0 
<!DOCTYPE html>
<html>
<head>
<Title> Title: My Quiz </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>
<span id="question">Welcom to my Game hit next to play...</span>
</br>
<span id="answer" >possible answers will go here...</span>
</br>

<button id ="up"> next </button> 
</div>


<script>
var allQuestions = [["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"], [["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],["red","blue","green","another"]], [0,1]];
var questionIndex = 0

$("#up").on("click", function () {
questionIndex+=1
$("#question").text("questionIndex = "+ questionIndex + "--Question " + questionIndex +": " + allQuestions[0][questionIndex-1]) 
});


//$("#up").on("click", function () {

//for(i=0;i<4;i++){
//$("#answer").text("<input type="radio" name="group1" value="Milk">" +allQuestions[1][questionIndex-1][0]+ "<br>") 
//}
//});

</script>

</body>
</html>

How do I change the "span id="answer"" to something like 

<input type="radio" name="colour" value="blue">Blue<br>
<input type="radio" name="colour" value="red">Red<br>
<input type="radio" name="colour" value="green">Green<br>
<input type="radio" name="colour" value="another">Another<br>

What I am trying to do is change 'span id="answer"' to be radio buttons and on pressing next the next set of answers will be displayed. This already works for 'span id="question"' at the minute (needs a bit of tidying).

Relevant JSFiddle Link

4

3 回答 3

3

我试图让它发挥作用

http://jsfiddle.net/G3wsd/8/

var allQuestions = ["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"];
var allAnswers = [["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],["red","blue","green","another"]];
var index = 0

$("#up").on("click", function () {
    $("#question").text("Question " + (index + 1) +": " + allQuestions[index]) 

    var answers = '';
    $(allAnswers[index]).each(function(i) {
        answers += '<input type="radio" name="group' + index + '" value="' + allAnswers[index][i] + '">' + allAnswers[index][i] + '<br>'
    });

    $("#answer").html(answers);

    index+=1;
}
);

但是，我认为这不是获得结果的最佳方式。我会建议一些带有 JSON 数据结果的异步调用。

我会多看这个，看看我是否能提供更多帮助，但希望这能帮助你入门。

于 2013-06-25T21:04:15.617 回答
0

我的解决方案可能是最糟糕的一个......我将所有内容放在一个数组中。:D

var allQuestions = [
["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"],
 [["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],["red","blue","green","another"]], [0,1]];
var questionIndex = 0;

$("#up").on("click", function () {
questionIndex+=1
$("#question").text("questionIndex = "+ questionIndex + "--Question " + questionIndex +": " + allQuestions[0][questionIndex-1]);

answers=allQuestions[1][questionIndex-1];

ans_html='';
for(i=0;i<answers.length;i++) {

ans_html+='<input type="radio" name="'+allQuestions[0][questionIndex-1]+'" value="'+answers[i]+'">'+answers[i]+'<br>';  

}

$("#answer").html(

ans_html



);
});


//$("#up").on("click", function () {

//for(i=0;i<4;i++){
//$("#answer").text("<input type="radio" name="group1" value="Milk">" +allQuestions[1][questionIndex-1][0]+ "<br>") 
//}
//});
于 2013-06-25T21:17:39.647 回答
0

我也尝试了一下（这个例子是独立的并且经过测试），但比威廉花费的时间更长......干得好，威廉。

jsFiddle在这里

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                var allQuestions = ["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"];
                var allAnswers = ["Gordon Brown|Tony Blair|Mohammed Al Fayed|Barack Obama","Green|Red|Blue|Brown"];
                var questionIndex = 0
                var ndx = 0

                $("#up").on("click", function () {
                    questionIndex+=1
                    $('#question').text(allQuestions[ndx]);
                    var xx = allAnswers[ndx];
                    var yy = makeHTML(xx);
                    $('#answer').html(yy);
                    ndx++;
                });


                function makeHTML(arr) {
                    var aAns = arr.split('|');
                    var h = '<input type="radio" name="color" value="' +aAns[0]+ '">' +aAns[0]+ '<br><input type="radio" name="color" value="' +aAns[1]+ '">' +aAns[1]+ '<br><input type="radio" name="color" value="' +aAns[2]+ '">' +aAns[2]+ '<br><input type="radio" name="color" value="' +aAns[3]+ '">' +aAns[3]+ '<br>';
                    return h;
                }


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div>
        <span id="question">Welcome to my Game hit next to play...</span>
        </br>
        <span id="answer" >possible answers will go here...</span>
        </br>
        <button id ="up"> next </button> 
    </div>


</body>
</html>
于 2013-06-25T21:15:12.050 回答