Estoy haciendo una prueba usando 4 botones para responder las preguntas (tengo 6 preguntas en total).
¿Cómo obtengo el siguiente conjunto de preguntas de mi matriz? Se parece a esto:
var questions = [{ question: "the question!". answer1: "choice1", answer2: "choice2", answer3: "choice3", answer4: "choice4", correct: "choice3", }}Simplemente realice un seguimiento del índice actual en la matriz y, cuando hagan clic, incremente el índice. Y luego solo tendría un método de render que toma el índice como parámetro. Algo como:
const questions = [{ question: "the question!", answer1: "choice1", answer2: "choice2", answer3: "choice3", answer4: "choice4", correct: "choice3" }, { question: "the next question!", answer1: "A", answer2: "B", answer3: "C", answer4: "D", correct: "C" }]; var currentQuestionIndex = 0; const c = document.getElementById('content'); const render = (idx) => { const q = questions[idx]; c.innerHTML = `<strong>${q.question}</strong> <p><label><input name="q" type="radio"/>${q.answer1}</label> <p><label><input name="q" type="radio"/>${q.answer2}</label> <p><label><input name="q" type="radio"/>${q.answer3}</label> <p><label><input name="q" type="radio"/>${q.answer4}</label> `; } render(currentQuestionIndex); document.getElementById('btn').addEventListener('click', () => { currentQuestionIndex = (currentQuestionIndex + 1) % questions.length; render(currentQuestionIndex); }); <div id="content"></div> <button id="btn">Next</button>