0

私はしばらくこれを理解しようとしてきましたが、完全に困惑しています。

基本的な一連の複数選択問題を表示するプログラムを作成しています。質問が表示され、回答の 1 つをクリックすると、次の質問に進みます。

問題は、1 つの質問を表示し、ユーザーがボタンの 1 つをクリックしたときに次の質問を表示する方法がわからないことです。ボタンをクリックしても何も起こりません。何がうまくいかないのですか？

        // progress meter
        var progress = new Array();
        for (var i = 0; i < questions.length; i++) progress.push("0");

        var i = 0;
        display(0);

        // display questions
        function display(i) {
            var prg_string;
            for (var j = 0; j < progress.length; j++) prg_string += progress[j];
            document.write(
                "<div id = 'background'>"
                    + "<div id = 'progress'>" + progress + "</div>"
                    + "<div id = 'title'>-JogNog Test v1-<br></br>" + tower + "</div>"
                    + "<div id = 'question'>" + questions[i].text + "</div>"
                    + "<div id = 'stats'>Level " + level + "/" + total_levels + " Question " + (i + 1) + "/" + questions.length + "</div>"
                + "</div>"
            );

            document.write("<button id = 'answer1' onclick = 'next(questions[i].answers[0].correct)'>" + questions[i].answers[0].text + "</button>");
            if (questions[i].answers.length > 0)
                document.write("<button id = 'answer2' onclick = 'next(questions[i].answers[1].correct)'>" + questions[i].answers[1].text + "</button>");
            if (questions[i].answers.length > 1)
                document.write("<button id = 'answer3' onclick = 'next(questions[i].answers[2].correct)'>" + questions[i].answers[2].text + "</button>");
            if (questions[i].answers.length > 2)
                document.write("<button id = 'answer4' onclick = 'next(questions[i].answers[3].correct)'>" + questions[i].answers[3].text + "</button>");
        }

        // go to next question, marking whether answer was right or wrong
        function next(correct) {
            if(correct) progress[i] = "T";
            else progress[i] = "F";
            i += 1;
            display(i);
        }
4

2 に答える 2

1

私はあなたのコードを読んでいませんが (ループを処理する部分だけに注目してSSCCEの投稿に取り組みたいと思うかもしれません)、ループはあなたがここで望んでいるものではないと感じています。ループは、何かを自動的に反復する必要がある場合に最適です。しかし実際には、一度に 1 つの質問だけを表示する必要があります。

これを行う最も簡単な方法は、各質問を個別に処理する手段があると仮定して、ユーザーがどの質問に取り組んでいるかを追跡することです。その質問を表示します。ユーザーが回答を送信したら、カウンター + 1 を使用して質問をレンダリングする関数を呼び出します。存在しない問題を参照しないように、クイズの最後まで行っていないことを確認してください。

ここにいくつかの擬似コードがあります:

var questionNumber, questions; //assume these already have values
function printQuestion(questionNumber){ ... }
function nextQuestion(){
    if(questionNumber < questions){
         questionNumber++;
         printQuestion(questionNumber); 
    }
    else{
         showResults();
    }
}
于 2012-08-15T12:48:11.770 に答える
0

ここでループは必要ないという@ngmiceliに同意します。1 つの質問を表示し、ユーザーが前の質問に対する回答を選択したときに次の質問に進むクリック イベント ハンドラーを作成します。

私は先に進み、デモンストレーション用に別のセットアップを作成しました。ここでデモを見ることができます：

-- jsFiddle デモ --

しかし、私はそのプロセスを歩みます。まず、基本的な HTML ドキュメントをセットアップします。

<body>
    <h1>-Test v1-</h1>
    <h2>Simple Math</h2>
    <div id="container">
        <div><span id="numRight">0</span> of <span id="numQuestions">0</span></div>
        <div id="question"></div>
        <div id="answers"></div>
    </div>
</body>

次に、array配列内の各要素がobject. 各質問オブジェクトには、質問自体、可能な回答の配列、および正解の配列インデックスを示す「answerIdx」プロパティが含まれています。

questions = [
    {
        question: 'What is 0 / 6 ?',
        options: ['0','1','2'],
        answerIdx: 0
    },
    {
        question: 'What is 2 + 2 ?',
        options: ['72','4','3.5'],
        answerIdx: 1
    }
]

また、操作したい HTML 要素を指す変数をいくつか作成しました。

numRight = 0,
numQuestions = 0,
answerDiv = document.getElementById('answers'),
questionDiv = document.getElementById('question'),
numRightSpan = document.getElementById('numRight'),
numQuestionsSpan = document.getElementById('numQuestions');

次に、1 つの質問オブジェクトをパラメーターとして受け取る「displayQuestion」関数を作成しました。

function displayQuestion(q) {  
    // insert the question text into the appropriate HTML element
    questionDiv.innerHTML = q.question;

    // remove any pre-existing answer buttons
    answerDiv.innerHTML = '';

    // for each option in the 'options' array, create a button
    // attach an 'onclick' event handler that will update
    // the question counts and display the next question in the array
    for(i = 0; i < q.options.length; i++) {
        btn = document.createElement('button');
        btn.innerHTML = q.options[i];
        btn.setAttribute('id',i);

        // event handler for each answer button
        btn.onclick = function() {
            var id = parseInt(this.getAttribute('id'),10);
            numQuestionsSpan.innerHTML = ++numQuestions;

            // if this is the right answer, increment numRight
            if(id === q.answerIdx) {
                numRightSpan.innerHTML = ++numRight;
            }

            // if there is another question to be asked, run the function again
            // otherwise, complete the test however you see fit
            if(questions.length) {
                displayQuestion(questions.shift()); 
            } else {
                alert('Done! You got '+numRight+' of '+numQuestions+' right!');
            }                    
        }
        answerDiv.appendChild(btn);        
    }
}

最後に、最初の質問を表示しました。

displayQuestion(questions.shift());
于 2012-08-15T13:30:21.720 に答える