Как добавить текст к переключателю с Javascript?

Question

Я создаю викторину, и у меня есть переключатели, которые нужно использовать для выбора ответов.

Я использую массив, содержащий объекты, имеющие 3 свойства.

1. Недвижимость задает вопрос.

2. свойство хранит множество ответов.

3. свойство, которое имеет значение индекса правильного ответа из массива ответов.

В основном это выглядит следующим образом:

var questions = [{question1: "What color is the sky?", answers:["blue", "red", "green", "orange"], correctAnswer: 0}];

correctAnswer: 0 является значение индекса синего.

Я нахожусь в точке, где мне нужно начать поместить значения этих объектов в разметку.

Например, у меня есть 4 переключателя в моем html.

<form id="buttons"> 
      <input type="radio" name="answer" value="0"><br> 
      <input type="radio" name="answer" value="1"><br> 
      <input type="radio" name="answer" value="2"><br> 
      <input type="radio" name="answer" value="3"><br> 
     </form> 

мне нужен код JavaScript, чтобы ввести ответы на мой вопрос рядом с моими радиокнопками, и я хочу, чтобы проверить, если человек выбрал правильный ответ, проверяя, если значение кнопки радио такого же, как значение индекса внутри объекта.

так, чтобы это выглядело так, как показано выше.

<form id="buttons"> 
      <input type="radio" name="answer" value="0">blue<br> 
      <input type="radio" name="answer" value="1">red<br> 
      <input type="radio" name="answer" value="2">green<br> 
      <input type="radio" name="answer" value="3">orange<br> 
     </form> 

правильный ответ в примере будет значением = "0";

Надеюсь, это не слишком смущает. Я работаю над проектом недели 4 викторины от http://javascriptissexy.com/how-to-learn-javascript-properly/

Answer 1

Ваш вопрос имеет несколько неясностей

1. Если будет больше, чем один вопрос, то, что должно быть имена входных? Например, имя1, имя2 и т. Д.?

2. Что вы хотите сделать с правильным ответом?Например, вы можете сохранить его в качестве атрибута данных на входе, как это: <input type="radio" name="answer" data-correct="true">Blue<br>

Так или иначе, я предполагаю, так как вы изучаете Javascript, а не JQuery (который сделал бы эту задачу в 10 раз легче) вы можете попробовать это:

(под редакцией использовать Array.forEach() вместо того, чтобы для (вар в ...)

<form id="buttons"> 
</form> 

<script type="text/javascript"> 

var questions = [ 
    { question1: "What color is the sky?", 
    answers:["blue", "red", "green", "orange"], 
    correctAnswer: 0 
    } 
]; 

var questionHtml = ''; 
questions.forEach(function(question) { 
    questionHtml = '<p>'+ question.question1 + '</p>'; 
    question.answers.forEach(function(answer, i) { 
    questionHtml += '<input type="radio" name="answer" ' 
    questionHtml += 'value="' + i + '">' 
    questionHtml += answer + '<br>' 
    }) 
}) 
document.getElementById('buttons').innerHTML = questionHtml; 

</script> 

Вы можете играть с ним здесь: JSFiddle

Answer 2

Добавить ярлыки после ввода и заполнить ответы на них.

<form id="buttons"> 
    <input type="radio" name="answer" value="0"><label></label><br> 
    <input type="radio" name="answer" value="1"><label></label><br> 
    <input type="radio" name="answer" value="2"><label></label><br> 
    <input type="radio" name="answer" value="3"><label></label><br> 
</form> 

и

var labels = document.getElementsByTagName('label'); 
for (var i = 0; i < labels.length; i += 1) { 
    labels[i].innerHTML = yourValues[i]; 
}​​​​ 

Оттуда вы хотите добавить умную логику для ввода правильного значения в правой этикетке, но это основная идея.