0
我有以下小測驗，我做了。 http://jsfiddle.net/HattrickNZ/z7LDr/radiobuttons html jquery
我想知道如何使單選按鈕在顯示時沒有選擇選項？他們目前顯示以前選擇的任何內容。 我也想知道如何使一些文字從<script>標記粗體內傳遞或如何進入一個新行（我試過<br>和「\ n」）？
而且任何其他一般的建議是讚賞，因爲我想提高使用新的方法這個小測驗（EG提醒從別的地方...一個更好的辦法是使用異步與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>
不要有任何數據庫來存儲問答題？單選按鈕應該像問題一樣動態。現在它擁有靜態ID。 – zod
hi zod，認爲這就是我正在努力的方向，只是不知道它在這個階段如何完成 – HattrickNZ