Create a quiz using form from html and JavaScript


I have a form, here is it:

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <form action="lab4.php" method="POST">
        1. That man does look rather strange but you shouldn’t ______ at him. <br>
        <select name="vop1" style="width: 100px;" required> 
            <option value=""></option>
            <option value="v11">glare</option>
            <option value="v12">blink</option>
            <option value="v13">stare</option>
            <option value="v14">frown</option>
        </select>
        <p></p>
        2. He made a hole in the fence so that he could ______ through without being seen. <br>  
        <select name="vop2" style="width: 100px;" required> 
            <option value=""></option>
            <option value="v21">peer</option>
            <option value="v22">blink</option>
            <option value="v23">wink</option>
            <option value="v24">peep</option>
        </select>
        <p></p>
        3. If you go out into bright sunlight after being in the dark, you sometimes ______. <br>
        <select name="vop3" style="width: 100px;" required> 
            <option value=""></option>
            <option value="v31">peer</option>
            <option value="v32">blink</option>
            <option value="v33">glare</option>
            <option value="v34">peep</option>
        </select>
        <p></p>
        <button type="submit" name="submit" >GO</button> <input type="reset" value="Reset">
    </form>   
</body>
</html>

What do I need? You can see, that there is a <form action="lab4.php" method="POST">. I used this form with php. In php I get the values from all 3 questions and sum them. Like this: if ($_POST[vop1] == v11){$sum++;}

In the end I write something like this: if ($sum == 3) echo "Very good, you have answered 3 questions!" or if ($sum == 1) echo "Bad".

So, using this form, I need to do the same thing by using JavaScript. What is the code to get my value, to sum it and to write it in JavaScript, just like PHP has done it?


Answers:


Using Javascript is not an ideal option for quiz, because answers can be hacked using the source code of the html page.

For your understanding purpose only,

OPTION #1:

<script>
   var sum=0;
   function checkAns(){
   if(document.getElementByName('vop1').value=='v11') 
       sum++;
   ....
   ....
</script>

OR

OPTION #2:

Javascript:

<script>
var sum=0;
function checkq1(ans) { 
    if(ans=='v11')
        sum++;
}
</script>

HTML:

1. That man does look rather strange but you shouldn’t ______ at him. <br>
<select name="vop1" style="width: 100px;" required onchange="checkq1(this.value)"> 
<option value=""></option>
<option value="v11">glare</option>
<option value="v12">blink</option>
<option value="v13">stare</option>
<option value="v14">frown</option>
</select>