Este es un cuestionario en el que cada pregunta tiene 4 opciones de respuesta. Estoy repasando la pregunta una por una e intentando que aparezca con sus opciones de respuesta correspondientes, pero la pregunta también aparece con las opciones de respuesta de otras preguntas. ¿Qué me podría estar perdiendo aquí?
var questionOne = function () { // create container to hold questions and answer options & give it a class name var questionsDiv = document.createElement("div"); questionsDiv.className = "questions-div"; // create question stem, give it a class name, add its content, & append to questionsDiv var questionStem = document.createElement("h2"); questionStem.className = "question-stem"; questionStem.innerText = quizQuestions[currentQuestion].question; questionsDiv.append(questionStem); // create container to hold answer option buttons var answerOptionsDiv = document.createElement("div"); // create footer container, give it a class name, & append to the questionsContainer var footerDiv = document.createElement("div"); footerDiv.className = "footer-div"; questionsContainer.append(footerDiv); // create footer text (correct/wrong), give it a class name, & append to footerDiv var footerTextCorrect = document.createElement("h2"); footerTextCorrect.className = "footer-text-correct"; footerTextCorrect.innerText = "Correct!"; footerDiv.append(footerTextCorrect); var footerTextWrong = document.createElement("h2"); footerTextWrong.className = "footer-text-wrong"; footerTextWrong.innerText = "Wrong!"; footerDiv.append(footerTextWrong); // append questionsDiv to main questions container questionsContainer.append(questionsDiv); // append answerOptionsDiv to questions container questionsDiv.append(answerOptionsDiv); // loop through the questions for (let i = 0; i < quizQuestions.length; i++) { console.log(quizQuestions[currentQuestion].question); for (let j = 1; j <= 4; j++) { console.log(`${j}. ${quizQuestions[currentQuestion].options[`${j}`]}`); // create buttons for answer options and add their content var optionBtnOne = document.createElement("button"); optionBtnOne.innerText = `${j}. ${ quizQuestions[currentQuestion].options[`${j}`] }`; // append button to answerOptionsDiv answerOptionsDiv.append(optionBtnOne); optionBtnOne.addEventListener("click", selectAnswer); optionBtnOne.setAttribute( "id", `${quizQuestions[currentQuestion].options[`${j}`]}` ); } currentQuestion++; } };No debe tener el ciclo que itera a través de la matriz quizQuestions . Esta función solo debería procesar quizQuestions[currentQuestion] . El índice de currentQuestion debe incrementarse cuando el usuario pasa a la siguiente pregunta, no en esta función.
var questionOne = function() { // create container to hold questions and answer options & give it a class name var questionsDiv = document.createElement("div"); questionsDiv.className = "questions-div"; // create question stem, give it a class name, add its content, & append to questionsDiv var questionStem = document.createElement("h2"); questionStem.className = "question-stem"; questionStem.innerText = quizQuestions[currentQuestion].question; questionsDiv.append(questionStem); // create container to hold answer option buttons var answerOptionsDiv = document.createElement("div"); // create footer container, give it a class name, & append to the questionsContainer var footerDiv = document.createElement("div"); footerDiv.className = "footer-div"; questionsContainer.append(footerDiv); // create footer text (correct/wrong), give it a class name, & append to footerDiv var footerTextCorrect = document.createElement("h2"); footerTextCorrect.className = "footer-text-correct"; footerTextCorrect.innerText = "Correct!"; footerDiv.append(footerTextCorrect); var footerTextWrong = document.createElement("h2"); footerTextWrong.className = "footer-text-wrong"; footerTextWrong.innerText = "Wrong!"; footerDiv.append(footerTextWrong); // append questionsDiv to main questions container questionsContainer.append(questionsDiv); // append answerOptionsDiv to questions container questionsDiv.append(answerOptionsDiv); console.log(quizQuestions[currentQuestion].question); for (let j = 1; j <= 4; j++) { console.log(`${j}. ${quizQuestions[currentQuestion].options[`${j}`]}`); // create buttons for answer options and add their content var optionBtnOne = document.createElement("button"); optionBtnOne.innerText = `${j}. ${ quizQuestions[currentQuestion].options[`${j}`] }`; // append button to answerOptionsDiv answerOptionsDiv.append(optionBtnOne); optionBtnOne.addEventListener("click", selectAnswer); optionBtnOne.setAttribute( "id", `${quizQuestions[currentQuestion].options[`${j}`]}` ); } };