CODEWITHSUNDEEP
javascripthtmlarrays
Antonio Pavicevac-Ortiz
Antonio Pavicevac-Ortiz

Reputation: 7759

How can I Iterate through an array of questions and answers

I am in the process of creating a quiz in javascript; At present I have a forward and back button which iterates through my questions! \0/

Also, I have managed to create some radio buttons and able to extract the first array of answers. My problem is I can't iterate through the rest of answers (in the array) to match the questions...

This is the html:

    <div class="container">
    <div class="sixteen columns">
        <div class="row"></div>
        <h1>
            Welcome to the <br>ultimate nerd quiz!
        </h1>
        <form id="f1" method="post">

            <div id="question"></div>
        </form>
        <button class='navBackward'><</button><button class='navForward'>></button>     
    </div>
    <!-- sixteen columns -->
</div>
<!-- container -->

This is the array:

var allQuestions = [{
"question": "Who was Luke's wingman in the battle at Hoth?",
"choices": ["Dak", "Biggs", "Wedge", "fx-7"],
"correctAnswer": 0}, 
{
"question": "What is the name of Darth Vader's flag ship?",
"choices": ["The Avenger", "Devastator ", "Conquest", "The Executor"],
"correctAnswer": 3}, {}]; //etc

This is my JS: (This is what creates the initial radio buttons and the first set of answers) 

function createRadioButtonFromArray(array) { 
    var len = array.length;
    var form = document.getElementById("f1");
    for (var i = 0; i < len; i++) {
    var radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "choices";
    radio.className = "radioButtons";
    radio.value = i;
    radio.id = "choice" + i;
    var radioText = document.createElement("div");
    radioText.id = "c" + i;
    radioText.className = "choiceText";
    radioText.innerHTML = array[i];

    form.appendChild(radio);
    form.appendChild(radioText);

    }
}

createRadioButtonFromArray(item.choices);

This is what I am trying to use to display the other choices/answers in the array..

function answerFwd(){
    var answerOutput = " ";
    var itemAnswers = allQuestions;

    if(currentAnswer <= itemAnswers.length){
    currentAnswer++;
    }

I suppose the problem is I am not properly outputting the array contents...

    var answerOutput = "<p>" + itemAnswers[currentQuestion].choices + "</p> <br/>";
    update = document.getElementById("f1");

    update.innerHTML = answerOutput;

}

Upvotes: 0

Views: 515

Answers (2)

M&#39;sieur Toph&#39;
M&#39;sieur Toph&#39;

Reputation: 2676

I guess you should do something like that instead :

HTML : (-> add a responses' div, like the question's one)

<div class="container">
    <div class="sixteen columns">
        <div class="row"></div>
         <h1>
                Welcome to the <br>ultimate nerd quiz!
            </h1>

        <form id="f1" method="post">
            <div id="question"></div>
            <div id="responses"></div>
        </form>
        <button class='navBackward'>
            <</button>
                <button class='navForward'>></button>
    </div>
    <!-- sixteen columns -->
</div>

JS :

function createRadioButtonFromArray(array) {
    var len = array.length;
    var responses = document.getElementById("responses"); // <- reach the responses div instead of the form
    responses.innerHTML = '';
    for (var i = 0; i < len; i++) {
        var radio = document.createElement("input");
        radio.type = "radio";
        radio.name = "choices";
        radio.className = "radioButtons";
        radio.value = i;
        radio.id = "choice" + i;
        var radioText = document.createElement("div");
        radioText.id = "c" + i;
        radioText.className = "choiceText";
        radioText.innerHTML = array[i];


        responses.appendChild(radio);
        responses.appendChild(radioText);
    }
}

// ...

function answerFwd() {
    var answerOutput = " ";
    var itemAnswers = allQuestions;

    if (currentAnswer <= itemAnswers.length) {
        currentAnswer++;
    }

    createRadioButtonFromArray(itemAnswers[currentQuestion].choices); // <- Why don't you use the function you created earlier ????

    /*
    var answerOutput = "<p>" + itemAnswers[currentQuestion].choices + "</p> <br/>";
     update = document.getElementById("f1");

    update.innerHTML = answerOutput;
    */
}

See the jsFiddle : http://fiddle.jshell.net/msieurtoph/uD29v/

(I did not implement the 'backward answers' function)

Upvotes: 1

jhyap
jhyap

Reputation: 3837

I suppose the problem is I am not properly outputting the array contents...

Yes. Your contents is an array, so you would need to iterate it

var answerOutput = "<p>" + itemAnswers[currentQuestion].choices[0] + "</p> <br/>";

JSFiddle demo on how to iterate the array

Upvotes: 1

Related Questions