Question

Hobbiest web dev在这里。我的任务是使用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;
 }

的Javascript

$(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 个答案: