填寫選擇多項選擇測驗

Question

我似乎無法一次從陣列中添加多個選擇。 我想通過相應的單選按鈕將它們全部一次添加。 最好的方法是什么？ 下面是代碼。

http://jsbin.com/oJoBuKA/1/edit

Answer 1

問題出在您的for循環條件檢查中。 放這個

for (var i = 0; i < quizContent[0].choices.length; i++)

您需要獲取quizcontent對象中的optionss數組的長度。

Answer 2

您需要枚舉選擇並為每個答案添加標簽（ jsFiddle ）：

for (var i = 0; i < quizContent.length; i++) {
  document.getElementById("questionHeader").innerHTML = quizContent[i].question;

  for (var j = 0; j < quizContent[i].choices.length; j++) {
    var choice = quizContent[i].choices[j];
    var id = "ans" + j + 1;
    var elem = document.createElement("input");
    elem.setAttribute("type", "radio");
    elem.setAttribute("id", "ans" + j + 1);
    elem.setAttribute("name", "ans" + i);
    document.getElementById("choices").appendChild(elem);
    var labelElem = document.createElement("label");
    labelElem.innerHTML = quizContent[i].choices[j];
    document.getElementById("choices").insertBefore(labelElem, elem);
  }

}

Answer 3

您的代碼有一些問題。 for循環條件中的第一個。 您應該盡可能多地運行它。 其次，您必須為每個選擇添加標簽，但是您只為第一個選擇添加標簽。

for (var i = 0; i < quizContent[0].choices.length; i++) {
    var choice = quizContent[0].choices[i];
    var id = "ans" + i + 1;
    var elem = document.createElement("input");
    elem.setAttribute("type", "radio");
    elem.setAttribute("id", "ans" + i + 1);
    elem.setAttribute("name", "answer");
    var label = document.createElement("label");
    label.setAttribute("class", "choice");
    label.innerHTML = choice;
    var br = document.createElement('br');

    document.getElementById("choices").appendChild(label);
    document.getElementById("choices").appendChild(elem);
    document.getElementById("choices").appendChild(br);
}

Answer 4

您正在遍歷錯誤的事物來為所有選項創建單選按鈕。

當前，變量i從0循環到quizContent.length 。 這意味着它正在遍歷所有問題。 創建一個以上的問題將很有效，但是創建一個以上的答案將不起作用。

為此，在遍歷問題的循環中，您還必須遍歷答案的選擇。 當前，您有：

for (var i = 0; i < quizContent.length; i++) {
    var choice = quizContent[0].choices[i];
    var id = "ans" + i + 1;
    var elem = document.createElement("input");
    elem.setAttribute("type", "radio");
    elem.setAttribute("id", "ans" + i + 1);
    document.getElementById("choices").appendChild(elem);
    document.getElementById("choice").innerHTML = quizContent[0].choices[0]; 
}

而您應該循環選擇答案：

for (var i = 0; i < quizContent.length; i++) {
    for (var x = 0; x < quizContent[i].choices.length; x++) {
        var choice = quizContent[i].choices[x];
        var id = "ans" + i + 1;
        var elem = document.createElement("input");
        elem.setAttribute("type", "radio");
        elem.setAttribute("id", "ans" + i + 1);
        document.getElementById("choices").appendChild(elem);
        document.getElementById("choice").innerHTML = quizContent[0].choices[0]; 
}

Answer 5

請在下面自我說明答案，

<div id="container">
  <h1 id="title">Your Quiz</h1>
  <h2 id="questionHeader"></h2>
  <div id="choices"></div>
</div>

for (var i = 0; i < quizContent.length; i++) {
    for (var j = 0; j < quizContent[i].choices.length; j++) { // choices is an array so iterate over it to get individual choice.
        var choice = quizContent[i].choices[j]; 
        var id = "ans" + i + 1;
        var elem = document.createElement("input");
        elem.setAttribute("type", "radio");
        elem.setAttribute("id", "ans" + i + 1);
        elem.setAttribute("name", "choice"); // set this to ensure only one radio button is selected.
        document.getElementById("choices").appendChild(elem);
        var label = document.createElement("label");
        label.innerHTML = quizContent[0].choices[j]; // set label innerHTML here 
        document.getElementById("choices").appendChild(label); // append label here
    }
}

工作提琴

Answer 6

調整循環形狀以稍微添加帶標簽的單選按鈕，它將為所有選擇添加帶標簽的單選按鈕：

//Need to loop through my choices and create radio buttons at same time.
//Having trouble creating radio buttons here.

for (var i = 0; i < quizContent[0].choices.length; i++) {
    var choice = quizContent[0].choices[i];

    var labelId = "lbl" + i + 1;
    var labelElem = document.createElement("label");
    labelElem.setAttribute("id", labelId);
    document.getElementById("choices").appendChild(labelElem);
    document.getElementById(labelId).innerHTML = quizContent[0].choices[i];

    var inputId = "ans" + i + 1;
    var inputElem = document.createElement("input");
    inputElem.setAttribute("type", "radio");
    inputElem.setAttribute("id", inputId);
    document.getElementById("choices").appendChild(inputElem);
    //document.getElementById(id).innerHTML = choice;

    /*radioButton = document.createElement("input");
    radioButton.type = "radio";*/

    //document.getElementById("choice").innerHTML = quizContent[0].choices[0]; 
}

這只是您需要走的方向的極簡主義解釋。

@Pilot有這個想法。