單擊按鈕，將問題和可能的答案存儲在一個數組中進行瀏覽

Question

Hobbiest網站開發人員。 我的任務是使用HTML / CSS / JS / JQ進行第一次測驗。 每個問題和可能的答案選擇都存儲在名為allQuestions的數組中。 該問題將以DIV格式顯示給用戶，答案選擇是多項選擇，並設置為三個相應單選按鈕的標簽。

單擊該按鈕時，會記錄用戶的答案（稍后再處理），並且問題和答案選項將更新為下一個相應的選項（現在在此部分中進行操作）。

我可以使該按鈕單擊一次，更新為第一個相應的問題和答案選擇。 但是我無法讓它在下一個過程中“進步”或“循環”。 我不確定我在這里缺少什么。

請原諒我的代碼/方法可能不符合常規。

JSFiddle： http : //jsfiddle.net/Ever/hXekq/

的HTML

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"      
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <script src="application.js"></script>
    <title>Tim's JS Quizlet!</title>
</head>
<body>
    <h2>JS and JQuery Quiz</h2>

    <div class="intro">
    Welcome! When the button at the bottom is clicked, the question and answers below will   
progress to the next question and respective answer chioces. Good luck!
    <br>
    </div>

    <br>

    <div class="questions">Ready?</div>

    <br>

    <input type="radio" id="radio1" name="radios"><label id="r1"> Yes</label></br>
    <input type="radio" id="radio2" name="radios"><label id="r2"> No</label></br>
    <input type="radio" id="radio3" name="radios"><label id="r3"> Wat </label></br>

    </br>

    <button>Submit</button>
</body>
</html>

的CSS

div.intro{
font-weight: bold;
width: 50%;
 }

div.questions{
width: 500px;
height: 100px;
border: 1px solid black;
padding: 5px;
 }

Java腳本

$(document).ready(function(){ 
//store quetsions, answer options, and answerkey.
var allQuestions = {
question: ["Who is Prime Minister of the United Kingdom?", "Which of the \
following is not a breed of dog?"],
choices: [" David Cameron", " Gordon Brown", " Winston Churchill", "Retrie\
ver", "Poodle", "Tabby"], 
answers: [0,2]
};

//set the first question and answer options.
var q = 0;
var rb1= 0;
var rb2=1;
var rb3=2;
var currentQuestion = (allQuestions.question[q]);
var currentRadio1 = (allQuestions.choices[rb1]);
var currentRadio2 = (allQuestions.choices[rb2]);
var currentRadio3 = (allQuestions.choices[rb3]);

//when button is clicked, update <.questions> to show the next question, and the \
//<#r's> to show the next answer options.
$('button').click(function(){
    $('.questions').html(currentQuestion);
    $('#r1').html(currentRadio1);
    $('#r2').html(currentRadio2);
    $('#r3').html(currentRadio3);
    q++;
    rb1 = rb1 + 3;
    rb2 = rb2 + 3;
    rb3 = rb3 + 3;
});
});


//Psuedocode:
//Use a JS object to separately hold each group of: questions, choices and correct answers.
//Use a JS function so that when <button> is clicked, it:
//**removes the current text from the <.questions> DIV
//**clears the radio buttons
//**adds the next question's text from <allQuestions> to the <.questions> DIV
//**adds the next anwers the radio buttons 
//Use a JS object to store each of the user's answers, which are determined by which
//radio button is selected when <button> is clicked. 
//If user clicks <button> without first selecting a radio button, do not update the form, and
//do not store their answer. Instead, alert the user.
//On the final page, let the user know they are done. Tally and display the total
//amount of correct answers.

Answer 1

好吧，您需要在每次點擊時更新您的變量，僅更改g就不會更新自身。 因此，將這些行放入click函數中：

$('button').click(function(){
        var currentQuestion = (allQuestions.question[q]);
        var currentRadio1 = (allQuestions.choices[rb1]);
        var currentRadio2 = (allQuestions.choices[rb2]);
        var currentRadio3 = (allQuestions.choices[rb3]);
        $('.questions').html(currentQuestion);
        $('#r1').html(currentRadio1);
        //etc

單擊按鈕，將問題和可能的答案存儲在一個數組中進行瀏覽

問題描述

1 個解決方案

解決方案1
0 已采納 2014-04-25 03:07:52

單擊按鈕，將問題和可能的答案存儲在一個數組中進行瀏覽

問題描述

1 個解決方案

解決方案1 0 已采納 2014-04-25 03:07:52

解決方案1
0 已采納 2014-04-25 03:07:52