选择单选按钮以显示“正确”时

Question

我对JS和HTML5有点陌生。 我正在创建一个简单的测验，只是为了它。 我知道需要使每个问题都独立于其他问题而被标记为“正确”。 如何通过JS甚至CSS / HTML5做到这一点？ 我有一种需要更改jquery文件的感觉，但是我对如何执行操作有些困惑。 测验就像我想要的那样完美，但是随着用户选择答案，我想显示正确还是错误。 基本上，当在浏览器中拉出测验时，用户将从每个问题中选择一个答案，当选择了正确答案时，我要显示“正确”一词。

依次是我的game.js，CSS和索引

 if (jQuery) { var checkAnswers = function() { var answerString = ""; var answers = $(":checked"); answers.each(function(i) { answerString = answerString + answers[i].value; }); $(":checked").each(function(i) { var answerString = answerString + answers[i].value; }); checkIfCorrect(answerString); }; var checkIfCorrect = function(theString) { if (parseInt(theString, 16) === 811124566973) { $("body").addClass("correct"); $("h1").text("You Win!"); } }; $("#question1").show(); }; if (impress) { $("#question2").show(); }; if (atom) { $("#question3").show(); }; if (createjs) { $("#question4").show(); }; if (me) { $("#question5").show(); }; if (require) { $("#question6").show(); }; if ($().playground) { $("#question7").show(); }; if (jaws) { $("#question8").show(); }; if (enchant) { $("#question9").show(); }; if (Crafty) { $("#question10").show(); }; 

 body { margin-left: 50px; } #question1, #question2, #question3, #question4, #question5, #question6, #question7, #question8, #question9, #question10 { display: none; } canvas { display: none; } .correct { background-color: #24399f; color: white; } #question1 { background-color: #EBF5D1; } #question2 { background-color: #E0F0D4; } #question3 { background-color: #D6EBD6; } #question4 { background-color: #CCE6D9; } #question5 { background-color: #C2E0DB; } #question6 { background-color: #B8DBDE; } #question7 { background-color: #ADD6E0; } #question8 { background-color: #A3D1E3; } #question9 { background-color: #99CCE6; } #question10 { background-color: #8FC7E8; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quiz</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body onclick="checkAnswers();"> <h1>Quiz</h1> <div id="quiz"> <div id="question1"> <div class="question">Which is not a main file type that we use to make websites?</div> <input type="radio" name="question1" value="a" /> <label>.html</label> <input type="radio" name="question1" value="b" /> <label>.exe</label> <input type="radio" name="question1" value="c" /> <label>.js</label> <input type="radio" name="question1" value="d" /> <label>.css</label> </div> <br /> <div id="question2"> <div class="question">A JavaScript object is wrapped by what charaters?</div> <input type="radio" name="question2" value="a" /> <label>[]</label> <input type="radio" name="question2" value="b" /> <label>;;</label> <input type="radio" name="question2" value="c" /> <label>{}</label> <input type="radio" name="question2" value="d" /> <label>()</label> </div> <br /> <div id="question3"> <div class="question">Moles are which of the following?</div> <input type="radio" name="question3" value="a" /> <label>Omniverous</label> <input type="radio" name="question3" value="b" /> <label>Adorable</label> <input type="radio" name="question3" value="c" /> <label>Whackable</label> <input type="radio" name="question3" value="d" /> <label>All of the above</label> </div> <br /> <div id="question4"> <div class="question">In Japanese "か" is prounounced...</div> <input type="radio" name="question4" value="a" /> <label>ka</label> <input type="radio" name="question4" value="b" /> <label>ko</label> <input type="radio" name="question4" value="c" /> <label>ke</label> <input type="radio" name="question4" value="d" /> <label>ki</label> </div> <br /> <div id="question5"> <div class="question">The gravitational constant on earth is approximately...</div> <input type="radio" name="question5" value="a" /> <label>10m/s^2</label> <input type="radio" name="question5" value="b" /> <label>.809m/s^2</label> <input type="radio" name="question5" value="c" /> <label>9.81m/s^2</label> <input type="radio" name="question5" value="d" /> <label>84.4m/s^2</label> </div> <br /> <div id="question6"> <div class="question">45 (in base 10) is what in binary (base 2)?</div> <input type="radio" name="question6" value="a" /> <label>101101</label> <input type="radio" name="question6" value="b" /> <label>110011</label> <input type="radio" name="question6" value="c" /> <label>011101</label> <input type="radio" name="question6" value="d" /> <label>101011</label> </div> <br /> <div id="question7"> <div class="question">4 << 2=. ..</div> <input type="radio" name="question7" value="a" /> <label>16</label> <input type="radio" name="question7" value="b" /> <label>4</label> <input type="radio" name="question7" value="c" /> <label>2</label> <input type="radio" name="question7" value="d" /> <label>8</label> </div> <br /> <div id="question8"> <div class="question">Given the lengths of two sides of a right triangle (one with a 90 degree angle), how would you find the hypotenuse?</div> <input type="radio" name="question8" value="a" /> <label>Pi*Radius^2</label> <input type="radio" name="question8" value="b" /> <label>Pythagorean Theorem</label> <input type="radio" name="question8" value="c" /> <label>Calculator?</label> <input type="radio" name="question8" value="d" /> <label>Sin(side1 + side2)</label> </div> <br /> <div id="question9"> <div class="question">True or False: All games must run at at least 60 frames per second to be any good.</div> <input type="radio" name="question9" value="a" /> <label>True</label> <input type="radio" name="question9" value="b" /> <label>False</label> </div> <br /> <div id="question10"> <div class="question">Using a server can help you to...</div> <input type="radio" name="question10" value="a" /> <label>hide your code.</label> <input type="radio" name="question10" value="b" /> <label>have a performant game.</label> <input type="radio" name="question10" value="c" /> <label>create shared experiences for players.</label> <input type="radio" name="question10" value="d" /> <label>all of the above.</label> </div> </div> <script src="jquery.js"></script> <script src="impress.js"></script> <!-- atom needs this to run --> <canvas></canvas> <script src="atom.js"></script> <script src="easel.js"></script> <script src="melon.js"></script> <script src="yabble.js"></script> <script src="jquery.gamequery.js"></script> <script src="jaws.js"></script> <script src="enchant.js"></script> <script src="crafty.js"></script> <script src="game.js"></script> </body> </html> 

Answer 1

有两种可能的方法：

1. 将单个答案存储在JS中，并根据这些答案检查所选收音机的值。
2. 将问题的答案存储在数据库中，并发出服务器请求以针对正确答案验证用户输入。

后一种方法是推荐的解决方案，因为它会使用户看不到您的答案，但是如果没关系，则可以使用前一种方法。

通过方法1的可能解决方案：

For each radio input create data attributes (question & correct).

Now for each selection, check 'question' attribute value and fetch its answer.

If it matches, display "Correct" message below the question, else display "Incorrect"