**
Need help setting answer values for checkboxes
Currently, I have a code that displays (2) questions with (4) possible answers each. Next to each answer is a checkbox with a default value of false. However, I want to link the value of each checkbox to its corresponding answer.
Any suggestions on how to achieve this?
**
JavaScript-------------------------------------------------------------------
//Creating a JavaScript Quiz
//Array containing questions and their respective answers.
let quizBank = [
["Which object executes code continuously until an exit condition is met?", "Loop", "Array","Function","Object"],
["Where should we place JavaScript within HTML?","javascript",
"js","scripting","script"]
];
//Function to display questions, answers, and checkboxes based on array.
function printQuiz(quiz) {
let check = "<input type='checkbox' id='response' name='response' label='response'>";
let listHTML = "<ol>"
for(let i = 0; i < quiz.length; i++){
listHTML += "<li>" + (i + 1) +": " + quiz[i][0] + "</li>" +
"<li>" + check + quiz[i][1] + "</li>" +
"<li>" + check + quiz[i][2] + "</li>" +
"<li>" + check + quiz[i][3] + "</li>" +
"<li>" + check + quiz[i][4] + "</li>";
}
listHTML += "<ol>";
return listHTML;
}
//Display the quiz using printQuiz function
document.getElementById("quiz").innerHTML = printQuiz(quizBank);
/* Accessing checkbox values */
/* Get the li elements under #quiz */
let listItems = document.getElementById("quiz").childNodes[0].childNodes;
/* Loop through li elements to find the input */
listItems.forEach(function(element) {
if (element.childNodes.length > 1) {
// The first child node within the li element is the checkbox input.
let checkbox = element.childNodes[0];
console.log(checkbox.checked);
});
HTML-----------------------------------------------------------------------------
<div>
<h1>
Quiz: Programming Concepts
</h1>
<div id="quiz"></div>
</div>
CSS------------------------------------------------------------------------------
li {
display: block;
margin: 1em;
}