im building a quiz and i have multiple questions and they all have multiple choices. i dont know exaclty the right terms, so forgive me for that.
for my quiz, i have this question:
let questions = [ { question: "Questions 1" choice1: "answer 1", choice2: "answer 2", choice3: "answer 3", choice4: "answer 4", answer: "answer 1", },
and i was using this logic:
choices.forEach(function (choice) { const number = choice.dataset['number'] choice.innerText = currentQuestion['choice' + number] })
the question and answer go tho this div:
<div class="choice-container"> <p class="choice-prefix">A</p> <p class="choice-text" data-number="1">Choice</p> </div>
before that, i had a simpler JS, and i want to use it
let questionsQuiz = [
{
question: "question",
answers: [
"1,
"2",
"3",
"4",
],
correctAnswer: "4",
},
]i want to use the second array, i could make it work first but i was creating elemet buttons.
how can a "connect" each answer to the ?
I made a sample code for you.
This code takes the questions from the object and renders them in the wrap element. Each element containing an answer is assigned a click listener. The question and answer have a data attribute. When a response is clicked, the checkAnswer() function checks the data attributes of the question and the clicked response and compares it with those specified in the object.
I hope I have been helpful.
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>