Question

我正在创建一个测验，我有单选按钮需要用来选择答案。

我正在使用一个包含具有3个属性的对象的数组。

一个属性提出问题。
属性包含一系列答案。
一个属性，其索引值为答案数组中的正确答案。

基本上它看起来像这样：

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

correctAnswer: 0是蓝色的索引值。

我正处于需要开始将这些对象的值放入标记的位置。

例如，我的html中有4个单选按钮。

<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”;

我希望这不会太混乱。我正在从http://javascriptissexy.com/how-to-learn-javascript-properly/

Answer 1

添加带有标签的新节点的简单代码，它工作正常

var x = document.createElement("INPUT");
        x.setAttribute("type", "radio");
        x.setAttribute("name", "sort");
        x.setAttribute("value", "town");
        x.setAttribute("id", "town");
        container_element.appendChild(x);
        var label = document.createElement('label');
        label.setAttribute('for', 'town');
        label.innerHTML = "town";
        container_element.appendChild(label);

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];
}

从那里你需要添加更智能的逻辑，以便在正确的标签中放置正确的值，但这是基本的想法。

Answer 3

你的问题有些含糊不清

如果有多个问题，那么输入名称应该是什么？例如name1，name2等？
你想用正确的答案做什么？例如，您可以将其作为数据属性存储在输入中，如下所示：<input type="radio" name="answer" data-correct="true">Blue<br>

无论哪种方式，我认为既然你正在研究Javascript，而不是jQuery（这会使这项任务变得容易10倍）你可以试试这个：

（编辑使用Array.forEach（）代替for（var in ...）

<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

如何使用Javascript将文本添加到单选按钮？

3 个答案: