Radio Buttons when selected to show “Correct”

Question

I am a bit new to JS and HTML5. I am creating a simple quiz, just for the heck of it. I know need to make it possible for each question to be marked "correct" independently of the others. How can I do that through JS, or even CSS/HTML5? I have a feeling I need to change the jquery file, but I am a little stuck on how to do it. The quiz works perfect, just the way I want, but as a user selects an answer, I'd like to display correct or wrong. Basically, when the quiz is pulled in the browser, the user will select one answer from each question, when the correct answer is selected, I want to show the word "correct".

In order is my game.js, CSS and index

 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

There are 2 possible ways to do:

Store the individual answers in JS and check the value of selected radio against the those answers.
Store the answers of questions in a database and make a server request to validate user inputs against correct answers.

Latter is a recommended solution as it'll keep your answers invisible to the users but if it doesn't matter you can use the former method.

Possible solution via Method 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"

Radio Buttons when selected to show “Correct”

Question

1 answers

solution1
0 ACCPTED 2017-08-31 21:17:56

Radio Buttons when selected to show “Correct”

Question

1 answers

solution1 0 ACCPTED 2017-08-31 21:17:56

solution1
0 ACCPTED 2017-08-31 21:17:56