Create a quiz using form from html and JavaScript

Question

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?

Kumar · Accepted Answer · 2016-11-08 06:24:27Z

2

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>

edited Nov 8, 2016 at 6:24

answered Nov 8, 2016 at 5:53

Kumar

1082 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create a quiz using form from html and JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related