Question

我正在使用javascript创建测验;目前我有一个前进和后退按钮，它遍历我的questions! \ 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 demo on how to iterate the array

Answer 2

我想你应该做那样的事情：

HTML :( - ＆gt;添加回复'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/

（我没有实现'向后答案'功能）

如何通过一系列问题和答案进行迭代

2 个答案: