Estoy creando un cuestionario y tengo varias preguntas y todas tienen varias opciones. No sé exactamente los términos correctos, así que perdóname por eso.
para mi cuestionario, tengo esta pregunta:
let questions = [ { question: "Questions 1" choice1: "answer 1", choice2: "answer 2", choice3: "answer 3", choice4: "answer 4", answer: "answer 1", },
y yo estaba usando esta lógica:
choices.forEach(function (choice) { const number = choice.dataset['number'] choice.innerText = currentQuestion['choice' + number] })
la pregunta y la respuesta van a través de este div:
<div class="choice-container"> <p class="choice-prefix">A</p> <p class="choice-text" data-number="1">Choice</p> </div>
antes de eso, tenía un JS más simple y quiero usarlo
let questionsQuiz = [ { question: "question", answers: [ "1, "2", "3", "4", ], correctAnswer: "4", }, ]quiero usar la segunda matriz, podría hacer que funcione primero, pero estaba creando botones de elementos.
¿Cómo puede "conectar" cada respuesta con el ?
Hice un código de muestra para ti.
Este código toma las preguntas del objeto y las representa en el elemento wrap. A cada elemento que contiene una respuesta se le asigna un detector de clics. La pregunta y la respuesta tienen un atributo data . Cuando se hace clic en una respuesta, la función checkAnswer() verifica los atributos de data de la pregunta y la respuesta en la que se hizo clic y los compara con los especificados en el objeto.
Espero haber sido de ayuda.
let questions = [ { question: "Questions 1", choice: ["answer 1", "answer 2", "answer 3", "answer 4"], answer: 1, }, { question: "Questions 2", choice: ["answer 1", "answer 2", "answer 3", "answer 4"], answer: 3, }, { question: "Questions 3", choice: ["answer 1", "answer 2", "answer 3", "answer 4"], answer: 2, }, ]; var wrap = document.getElementById('wrap'); questions.forEach((el, i) => { var vrp = document.createElement('div'); vrp.setAttribute('data-id', i); var q = document.createElement('p'); q.innerText = el.question; vrp.appendChild(q); el.choice.forEach((e, i) => { var a = document.createElement('p'); a.innerText = e; a.setAttribute('data-ans', i); vrp.appendChild(a); a.addEventListener('click', checkAnswer); }); wrap.appendChild(vrp); }); function checkAnswer() { var q = this.parentNode.getAttribute('data-id'); var a = this.getAttribute('data-ans'); if (questions[+q].answer - 1 === +a) { console.log('Correct answer!'); } else { console.log('Not a correct answer!'); } } <div id='wrap'></div>