我如何遍歷一系列問題和答案

Question

我正在用javascript創建測驗； 目前，我有一個前進和后退按鈕，可以遍歷我的問題！ \\ 0 /

此外，我設法創建了一些單選按鈕並能夠提取第一組答案。 我的問題是我無法遍歷其余答案（在數組中）以匹配問題...

這是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 -->

這是數組：

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

這是我的JS ：（ 這是創建初始單選按鈕和第一組答案的原因）

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

這就是我試圖用來顯示數組中其他選擇/答案的東西。

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

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

我想問題是我沒有正確輸出數組內容...

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

    update.innerHTML = answerOutput;

}

Answer 1

我想問題是我沒有正確輸出數組內容...

是。 您的內容是一個數組，因此您需要對其進行迭代

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

JSFiddle演示如何迭代數組

Answer 2

我想你應該這樣做：

HTML：（->添加一個響應的div，就像問題的div一樣）

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

參見jsFiddle： http ://fiddle.jshell.net/msieurtoph/uD29v/

（我沒有實現“后退答案”功能）