Wieso springt die Funktion nicht auf die nächste Frage?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ossenkaemper

Neues Mitglied
12 Juli 2021
2
0
1
23
Javascript:
const question = [
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is Alex fav Animal?",
        options: ["Dogs", "Cats", "Turtles", "iglos"],
        answer: "Dogs",
    },
    {
        question: "AAAAAAAAAAAAAAAA",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "BBBBBBBBBBBBBBBBBBBBB",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "CCCCCCCCCCCCCCCCCCCCCCCCCCCC",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "DDDDDDDDDDDDDDDDDD",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "Whasdasd0?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "WhaWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW+ 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "WhaZZZZZZZZZZZZZZZZZZZZZZZZZ+ 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "WYYYYYYYYYYYYYYYYYYYYYYYYYYY?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "WhaGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What iswdadaaaaaaaaaaaaaaaaaaaaaaaaa 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 101010110101 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
];

let max = (question.length - 1);
let min = 0;
let question_number = Math.round(Math.random() * (max - min)) + min;
let correct = 0;


document.addEventListener("DOMContentLoaded", () => {
    load_question();
});


//ZUR NÄCHSTEN FRAGE WECHSELN FEHLT
//ZUFÄLLIGE FRAGE AUSWÄHLEN ABER NICHT WIEDERHOLEN
//NACH 30 FRAGEN AUFHÖREN UND SCORE ANZEIGEN

function load_question () {
    document.querySelector("#question").innerHTML = question[question_number].question;
    const options = document.querySelector("#options");
    options.innerHTML = "";
    for (const option of question[question_number].options) {
        options.innerHTML += `<button class="option">${option}</button>`;
    };
    document.querySelectorAll(".option").forEach( option => {
        option.onclick = () => {
            if (option.textContent == question[question_number].answer) {
                alert("RICHTIG");
                correct += 1;
                document.querySelector("#correct").innerHTML = `${correct} of ${question.length - 1}`;
                return next_question();
            } else {
                alert("FALSCH");
            }
        }
    })
};

function next_question () {
    load_question();
    console.log("nächste frage sollte kommen?")
};

console.log(question);
console.log(question_number);


Servus miteinander, ich verstehe nicht wieso wenn ich die "return next_question" aufrufe, das Programm nicht die nächste frage lädt...
danke für eure hilfe und erklärung
 

basti1012

Senior HTML'ler
26 November 2017
1.678
177
63
Minden
basti1012.de
Bitte nächstes Mal das HTML mit posten , das erleichtert in den meisten fälle die Fehlersuche.
Weil du das außerhalb der Funktion aufrufst
Code:
var question_number = Math.round(Math.random() * (max - min)) + min;
Einmal beim Start und das wahr es.
Du musst das beim jeden Durchlauf aufrufen.

Zb direkt am Anfang der Funktion
Code:
function load_question () {
var question_number = Math.round(Math.random() * (max - min)) + min;
usw.....

Man könnte da aber noch paar Sachen ändern .
Zb nach der 12 Frage ein Button einblenden für Neustart.
Die Antwort Buttons immer zufällig anordnen, damit man sich das nicht merkt.
Deine 3ter Button hat fast immer die richtig Antwort
 
Zuletzt bearbeitet:
  • Like
Reaktionen: Ossenkaemper