In einem bestehenden Quiz die Antworten "shuffeln"

[dirkfastner]

Hallo in die Runde,

ich bin der Neue hier und das erste Mal in einem Forum.

Es geht darum, in ein bestehendem Quiz (html, css, js) die Antwortreihenfolge zu verändern.
Das Quiz ist ein Template und als Zip angehängt.

Die Fragen sind schon randomisiert. Derzeit sieht der Code folgend aus.


let shuffledQuestions = [] //empty array to hold shuffled selected questions out of all available questions

function handleQuestions() {
//function to shuffle and push 10 questions to shuffledQuestions array
//app would be dealing with 10questions per session
while (shuffledQuestions.length <= 9) {
const random = questions[Math.floor(Math.random() * questions.length)]
if (!shuffledQuestions.includes(random)) {
shuffledQuestions.push(random)
}
}
}


let questionNumber = 1 //holds the current question number
let playerScore = 0 //holds the player score
let wrongAttempt = 0 //amount of wrong answers picked by player
let indexNumber = 0 //will be used in displaying next question

// function for displaying next question in the array to dom
//also handles displaying players and quiz information to dom
function NextQuestion(index) {
handleQuestions()
const currentQuestion = shuffledQuestions[index]
document.getElementById("question-number").innerHTML = questionNumber
document.getElementById("player-score").innerHTML = playerScore
document.getElementById("display-question").innerHTML = currentQuestion.question;
document.getElementById("option-one-label").innerHTML = currentQuestion.optionA;
document.getElementById("option-two-label").innerHTML = currentQuestion.optionB;
document.getElementById("option-three-label").innerHTML = currentQuestion.optionC;
document.getElementById("option-four-label").innerHTML = currentQuestion.optionD;

}


function checkForAnswer() {
const currentQuestion = shuffledQuestions[indexNumber] //gets current Question
const currentQuestionAnswer = currentQuestion.correctOption //gets current Question's answer
const options = document.getElementsByName("option"); //gets all elements in dom with name of 'option' (in this the radio inputs)
let correctOption = null

options.forEach((option) => {
if (option.value === currentQuestionAnswer) {
//get's correct's radio input with correct answer
correctOption = option.labels[0].id
}
})

//checking to make sure a radio input has been checked or an option being chosen
if (options[0].checked === false && options[1].checked === false && options[2].checked === false && options[3].checked == false) {
document.getElementById('option-modal').style.display = "flex"
}

//checking if checked radio button is same as answer
options.forEach((option) => {
if (option.checked === true && option.value === currentQuestionAnswer) {
document.getElementById(correctOption).style.backgroundColor = "green"
playerScore++ //adding to player's score
indexNumber++ //adding 1 to index so has to display next question..
//set to delay question number till when next question loads
setTimeout(() => {
questionNumber++
}, 1000)
}

else if (option.checked && option.value !== currentQuestionAnswer) {
const wrongLabelId = option.labels[0].id
document.getElementById(wrongLabelId).style.backgroundColor = "red"
document.getElementById(correctOption).style.backgroundColor = "green"
wrongAttempt++ //adds 1 to wrong attempts
indexNumber++
//set to delay question number till when next question loads
setTimeout(() => {
questionNumber++
}, 1000)
}
})
}

Vielen Dank im Voraus
Dirk

 

[Sempervivum]

Hallo Dirk und willkommen im Forum!
Ich hoffe, die Frage hat sich noch nicht erledigt?
Ich habe mal die Optionen bzw. Antworten in der Funktion NextQuestion gemischt. Lies meine Kommentare und versuche, zu verstehen, wie es funktioniert:

// function for displaying next question in the array to dom
//also handles displaying players and quiz information to dom
function NextQuestion(index) {
    handleQuestions()
    const currentQuestion = shuffledQuestions[index]
    document.getElementById("question-number").innerHTML = questionNumber
    document.getElementById("player-score").innerHTML = playerScore;
    document.getElementById("display-question").innerHTML = currentQuestion.question;

    // Array mit Optionen bereitstellen, Kurztexte:
    const options = [
        "optionA",
        "optionB",
        "optionC",
        "optionD"
    ];

    // Array mischen
    // Quelle für den Algorithmus:
    // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
    console.log(options)
    for (let i = options.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [options[i], options[j]] = [options[j], options[i]];
    }
    console.log(options);
    // Container mit den Antworten bzw. Optionen bereit stellen:
    const optContainers = document.querySelectorAll('.game-options-container span');
    optContainers.forEach((container, idx) => {
        // Aktuelle Option bereit stellen:
        opt = options[idx];
        // Value im Radiobutton und Text im Label eintragen:
        container.querySelector('input').value = opt;
        container.querySelector('label').textContent = currentQuestion[opt];
    });

    // Dies kann jetzt entfallen:
    // document.getElementById("option-one-label").innerHTML = options[0];
    // document.getElementById("option-two-label").innerHTML = options[1];
    // document.getElementById("option-three-label").innerHTML = options[2];
    // document.getElementById("option-four-label").innerHTML = options[3];

}

Beste Grüße, Ulrich

 

[dirkfastner]

Hallo Ulrich,

danke für Deine Lösung. Ich war bis gestern im Krankenhaus, deswegen melde ich mich erst jetzt.
Ich werde es am Wochenende integrieren und Bescheid geben.
Dank Deiner Kommentare ist das sehr gut nachzuvollziehen.

Danke und beste Grüße
Dirk