Создание викторины JavaScript с использованием динамически генерируемых элементов

**

Как мне присвоить значение ответа каждому флажку?

При просмотре этот код создает (2) вопроса с (4) возможными ответами на каждый вопрос. Рядом с каждым возможным ответом стоит флажок. Прямо сейчас каждый флажок имеет значение false, но я хотел бы привязать значение каждого флажка к возможному ответу рядом с ним.

Любые идеи?

**

JavaScript ------------------------------------------------- ------------------

//JavaScript Quiz
//Questions and answers - multi-dimensional array.
var quizBank = [
["What object runs code continously until an exit condition is met?", "Loop", "Array","Function","Object"],
["Inside which HTML element do we put JavaScript?","javascript",
"js","scripting","script"]
];

//Adds ordered list, list items, and check-boxes. Iterates through array questions and answers.
function printQuiz(quiz) {
var check = "<input type='checkbox' id= 'response' name='response' label='response'>";
    var listHTML = "<ol>"
    for(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;
}
//prints printQuiz function to document
document.getElementById("quiz").innerHTML = printQuiz(quizBank);

/* Accessing the values of the checkboxes */
/* First get the ol's li elements under #quiz */
var listItems = document.getElementById("quiz").childNodes[0].childNodes;

/* Iterate through them and look inside for the input */
listItems.forEach(function(element) {

  if (element.childNodes.length > 1) {
   // of the li's who have more than 1 child nodes, the first child node is the checkbox input.
   var checkbox = element.childNodes[0];
   console.info(checkbox.checked);

    });

HTML ------------------------------------------------- ----------------------------

<div>
<h1>
Quiz: Programming Concepts
</h1>
<div id = "quiz"></div>
</div>

CSS ------------------------------------------------- -----------------------------

li {
  display: block;
  margin: 1em;

}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
678
1

Ответы 1

Я думаю, все, что вам нужно сделать, это добавить атрибут "значение" к вашему элементу ввода, значение которого будет ответом, соответствующим этому флажку ... (См. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)

Я ищу способ «динамически» добавлять уникальные значения к каждому динамически сгенерированному флажку.

Cdrew92 19.07.2018 00:11

Итак, я подумал о чем-то вроде: проверка функции (значение) {return "<input type = 'checkbox' value = '+ value +"' name = 'response'> "

moilejter 20.07.2018 06:07

Итак, я подумал о чем-то вроде: function check(value) { return "<input type='checkbox' value=' + value + "' name='response'>" } function printQuiz(quiz) { for (i=0; i < quiz.length; i++ ) { listItem += "<li>" + check(quiz[i][1]) + quiz[i][1] + "</li>"; } return listItem; }

moilejter 20.07.2018 06:14

Другие вопросы по теме