私が作った次の小さなクイズがあります。 http://jsfiddle.net/HattrickNZ/z7LDr/
ラジオボタンが表示されたときにオプションが選択されないようにする方法を知りたいですか? 現在、以前に選択されたものは何でも表示されます。<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>