let myQuestions = [ { question: "What's 2+2?", answers: [ { text: "4", correct: true }, { text: "2", correct: false }, { text: "10", correct: false }, { text: "1", correct: false }, ], }, { question: "What's 10+10?", answers: [ { text: "20", correct: true }, { text: "2", correct: false }, { text: "18", correct: false }, { text: "0", correct: false }, ], }, ]; function startQuiz() { //container.style.visibility = "visible"; //btn_start.style.visibility = "hidden"; showQuestion(myQuestions[0]); } function showQuestion(questionAndAnswers) { alert(questionAndAnswers.question); //const shuffledAnswers = _.shuffle(questionAndAnswers.answers); //questionTag.innerText = questionAndAnswers.question; //answerTag[0].innerText = shuffledAnswers[0].text; //answerTag[1].innerText = shuffledAnswers[1].text; //answerTag[2].innerText = shuffledAnswers[2].text; //answerTag[3].innerText = shuffledAnswers[3].text; } function nextQuestion() { showQuestion(myQuestions[0]); } <input type='button' value='Start Quiz' onclick=startQuiz() /> <input type='button' value='Next question' onclick=nextQuestion() />La primera pregunta se llama cuando presiono iniciar cuestionario y accede a mi primer objeto en mi matriz, ¿cómo hago para que funcione la función siguiente pregunta que básicamente accede al siguiente objeto incrementando, así que digamos que agrego la pregunta 3 y continúa?
Tome una variable global let currentQuestionIndex = 0; y actualice su función nextQuestion como se muestra a continuación. También actualice su función startQuiz() y establezca currentQuestionIndex = 0; & replace showQuestion(myQuestions[0]); con nextQuestion();
function nextQuestion() { // Add condition so at last question it will stop at last question if (myQuestions.length > currentQuestionIndex) { showQuestion(myQuestions[currentQuestionIndex]); currentQuestionIndex++; } } function startQuiz() { container.style.visibility = "visible"; btn_start.style.visibility = "hidden"; currentQuestionIndex = 0; nextQuestion(); }Su código completo se verá a continuación. He comentado parte de su código solo con fines de prueba.
let currentQuestionIndex = 0; let myQuestions = [ { question: "What's 2+2?", answers: [ { text: "4", correct: true }, { text: "2", correct: false }, { text: "10", correct: false }, { text: "1", correct: false }, ], }, { question: "What's 10+10?", answers: [ { text: "20", correct: true }, { text: "2", correct: false }, { text: "18", correct: false }, { text: "0", correct: false }, ], }, ]; function startQuiz() { //container.style.visibility = "visible"; //btn_start.style.visibility = "hidden"; currentQuestionIndex = 0; nextQuestion(); } function showQuestion(questionAndAnswers) { // temp code for alert alert(questionAndAnswers.question); //const shuffledAnswers = _.shuffle(questionAndAnswers.answers); //questionTag.innerText = questionAndAnswers.question; //answerTag[0].innerText = shuffledAnswers[0].text; //answerTag[1].innerText = shuffledAnswers[1].text; //answerTag[2].innerText = shuffledAnswers[2].text; //answerTag[3].innerText = shuffledAnswers[3].text; } function nextQuestion() { // Add condition so at last question it will stop at last question if (myQuestions.length > currentQuestionIndex) { showQuestion(myQuestions[currentQuestionIndex]); currentQuestionIndex++; } } <input type='button' value='Start Quiz' onclick=startQuiz() /> <input type='button' value='Next question' onclick=nextQuestion() />Puede almacenar su índice de preguntas actual y usarlo para recorrer la lista:
let currentQuestionIndex = 0; let myQuestions = [ { question: "What's 2+2?", answers: [ { text: "4", correct: true }, { text: "2", correct: false }, { text: "10", correct: false }, { text: "1", correct: false }, ], }, { question: "What's 10+10?", answers: [ { text: "20", correct: true }, { text: "2", correct: false }, { text: "18", correct: false }, { text: "0", correct: false }, ], }, ]; function startQuiz() { container.style.visibility = "visible"; btn_start.style.visibility = "hidden"; showQuestion(myQuestions[0]); } function showQuestion(questionAndAnswers) { const shuffledAnswers = _.shuffle(questionAndAnswers.answers); questionTag.innerText = questionAndAnswers.question; answerTag[0].innerText = shuffledAnswers[0].text; answerTag[1].innerText = shuffledAnswers[1].text; answerTag[2].innerText = shuffledAnswers[2].text; answerTag[3].innerText = shuffledAnswers[3].text; } function nextQuestion() { const nextIndex = currentQuestionIndex + 1; if (nextIndex < myQuestions.length - 1) { showQuestion(myQuestions[nextIndex]); currentQuestionIndex = nextIndex; } else { console.log('end of question list'); } }