How to do a radio button quiz with answers comparison

أقسام الموقع: الإطار الزمني الرياضة معلومات سريعة العلوم الكون الصحة لغة وغيرها المنوعات الحيوانات باختصار تطبيقات وكتب

HOW TO DO A RADIO BUTTON QUIZ WITH ANSWERS COMPARISON USING JS AND HTML

In this lesson, you will learn how to make a radio button quiz, but all questions will be on the same page. You will also learn how to create a result page that shows the user's answers and the correct answers.

The video below will show more than one feature about this quiz: The radio button quiz, the answers comparison, and how to hide the javascript code from people who are trying to find out your code. The quiz has three questions, but once you know how the code works, you can easily add more questions to it.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Quiz</title>
</head>
<body>
    <p id="message001"></p>
    <p id="comments001"></p>
    <p id="click001"></p>

    <script>
        var a;
        var b;
        var c;
        var d;
        var e;
        var f;
        var z;

        var question001 = ["What is 1 + 1?<br /><br /><input onclick=option001() name=button001 type=radio />2<br /><br /><input onclick=option002() name=button001 type=radio />4<br /><br /><input onclick=option003() name=button001 type=radio />6<br /><br />What is 2 + 2?<br /><br /><input onclick=option004() name=button002 type=radio />3<br /><br /><input onclick=option005() name=button002 type=radio />4<br /><br /><input onclick=option006() name=button002 type=radio />8<br /><br />What is 3 + 3?<br /><br /><input onclick=option007() name=button003 type=radio />4<br /><br /><input onclick=option008() name=button003 type=radio />7<br /><br /><input onclick=option009() name=button003 type=radio />6<br /><br />"];

        window.onload = function () {
            a = 0;
            b = 0;
            c = 0;
            message001.innerHTML = question001;
            click001.innerHTML = "<button onclick=submit001()>Submit</button>";
        }

        function option001() {
            a = 1;
            d = 2;
        }

        function option002() {
            a = 0;
            d = 4;
        }

        function option003() {
            a = 0;
            d = 6;
        }

        function option004() {
            b = 0;
            e = 3;
        }

        function option005() {
            b = 1;
            e = 4;
        }

        function option006() {
            b = 0;
            e = 8;
        }

        function option007() {
            c = 0;
            f = 4;
        }

        function option008() {
            c = 0;
            f = 7;
        }

        function option009() {
            c = 1;
            f = 6;
        }

        function submit001() {
            z = a + b + c;
            message001.innerHTML = "End of Quiz";
            comments001.innerHTML = "Your score is " + z + "<br /><br />" + "What is 1 + 1? Your answer is " + d + ". The correct answer is 2" + "<br /><br />" + "What is 2 + 2? Your answer is " + e + ". The correct answer is 4" + "<br /><br />" + "What is 3 + 3? Your answer is " + f + ". The correct answer is 6";
            click001.innerHTML = "<button onclick=repeat001()>Repeat</button>";
        }

        function repeat001() {
            location.reload();
        }
    </script>
</body>
</html>

If you want to watch the video and see how it is done, you can check it out below.

OTHER RELATED PAGES:

Other Topics:

Islamic Holidays
Health Tips
Sports Facts