我做了以下小测验。 http://jsfiddle.net/HattrickNZ/z7LDr/
我想知道如何使单选按钮在显示时没有选择选项？他们目前显示之前选择的任何内容。我还想知道如何使我从<script>标签中传递的一些文本变为粗体或如何输入新行（我尝试过<br>和“\n”）？
任何其他一般性建议也将不胜感激，因为我想使用新方法改进这个小测验（例如来自其他地方的建议......更好的方法是使用带有 JSON 数据结果的异步调用......）tks
<!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>
<div id="radio" style="display:none">
<div id="rd1"></div><input type="radio" name="ans" value=""/>
<div id="rd2"></div><input type="radio" name="ans" value=""/>
<div id="rd3"></div><input type="radio" name="ans" value=""/>
<div id="rd4"></div><input type="radio" name="ans" value=""/>
</div>
</br>
<button id ="up"> next </button>
</br>
</br>
<span id="test" >--------------This is for Test Purposes------------- </span> <br>
<span id="Qindex" >want to keep an eye on Qindex here </span> <br>
<span id="whatRadioButton" >want to keep an eye on what radio button was selected... </span> <br>
<span id="whatRightAnswer" >what is the right answer between [0,1,2,3]... </span>
<!-- <button id ="next_answer"> next answer </button> -->
</div>
<script>
var allQuestions = [
["Who is Prime Minister of the United Kingdom?",
"What is my favourite colour?",
"What shape is the moon?",
"What year was the car invented?",
"What day do catholics go to mass?"],[
["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
["Red","Blue","Green","Another"],
["Square","Rectangle","Pentagon","Round"],
["1914","1924","1934","None of the above"],
["Never","Sunday","Tuesday","Monday"]],
[0,1,3,3,1]];
//Correct answers go here between 0,1,2,3
var questionIndex = 0
var score = 0;
$("#up").on("click", function () {
questionIndex+=1
if (questionIndex <=5) {
$("#question").text("<b>Question " + questionIndex +"</b>: " + allQuestions[0][questionIndex-1])
document.getElementById("answer").style.display = "none"; //hide the span <span id="answer" >
document.getElementById("radio").style.display = "inline-block"; // display the radio buttons
document.getElementById("rd1").value = allQuestions[1][questionIndex-1][0]; //change the value attribute of id=rd*
document.getElementById("rd2").value = allQuestions[1][questionIndex-1][1];
document.getElementById("rd3").value = allQuestions[1][questionIndex-1][2];
document.getElementById("rd4").value = allQuestions[1][questionIndex-1][3];
document.getElementById("rd1").innerHTML = allQuestions[1][questionIndex-1][0]; //change the innerHTML(the text that
document.getElementById("rd2").innerHTML = allQuestions[1][questionIndex-1][1]; //appear in the browser) of id=rd*
document.getElementById("rd3").innerHTML = allQuestions[1][questionIndex-1][2];
document.getElementById("rd4").innerHTML = allQuestions[1][questionIndex-1][3];
//document.getElementById("rd1").checked==false; // trying to reset no radio button is selected - does not work
//document.getElementById("rd2").checked==false;
//document.getElementById("rd3").checked==false;
//document.getElementById("rd4").checked==false;
var radioButtons = $("#radio input:radio[name='ans']");
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
if(selectedIndex ===allQuestions[2][questionIndex-2]) {
score+=1;
}
//these are for test purposes
$("#whatRadioButton").text("What index answer you selected[0,1,2,3] = " + selectedIndex)
$("#Qindex").text("QuestionIndex = " + questionIndex)
$("#whatRightAnswer").text( "Correct answer index is: " + allQuestions[2][questionIndex-2] + "\n" +
"Answer selected was: " + selectedIndex +
"Your score is: " + score )
}
else if(questionIndex ===6){//end of game //no more questions
document.getElementById("radio").style.display = "none";//hide these id's for the end of the game
document.getElementById("up").style.display = "none"; //hide the next button with id = up
$("#Qindex").text("QuestionIndex = " + questionIndex)
var radioButtons = $("#radio input:radio[name='ans']");
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
if(selectedIndex ===allQuestions[2][questionIndex-2]) {
score+=1;
}
$("#question").text("This is the End of the Quiz <br> Your score was " + score + "/5 \n Thanks you for playing...")
//these is for test purposes...
$("#whatRadioButton").text("What index answer you selected[0,1,2,3] = " + selectedIndex)
$("#whatRightAnswer").text( "Correct answer index is: " + allQuestions[2][questionIndex-2] + "\n" +
"Answer selected was: " + selectedIndex +
"Your score is: " + score )
}
});
</script>
</body>
</html>