Fill in choices multi choice quiz

Question

I can't seem to add more than one choice in at a time from my array. I'd like to add them all in at once with corresponding radio buttons. What's the best way to do this? Below is the code.

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

Answer 1

The problem was with your for loop condition checking. Put this

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

You need to get the length of the choices array in quizcontent object.

Answer 2

You need to enumerate your choices and add a label for each answer ( 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

There are a few problems with your code. The first one in in the condition for the for loop. You should be running it as many times as there are choices. Secondly, you have to add a label for every choice, but you are only adding a label for the first choice.

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

You're looping through the wrong thing to create radio buttons for all of the options.

Currently, the variable i is looping from 0 to quizContent.length . This means it is looping through all of the questions. This will work well to create more than one question, but it does not work to create more than one answer.

To do this, within the loop iterating through the questions, you have to also iterate through the answer choices. Currently, you have this:

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

whereas you should loop through the answer choices instead:

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

Please self explanatory ans below,

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

Working fiddle

Answer 6

Shape up your loop to add the labeled radio button a bit, and it will add labeled radio buttons for all choices:

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

This is just a minimalist explanation of the direction you need to go.

@Pilot has the idea.