Posted in

Make a Simple JavaScript Quiz Program examination

by Dineshkumar••0

Simple Online Quiz Examination Program Using JavaScript and HTML

In this post, we learn about How to make a simple javascript quiz?. You will learn from the basic step by step method.javascript is one of the very basic languages to learn to code professional.

You can code your own quiz program or quiz application in the feature. In this article, you can see a multiple choice of question program. you can access the correct result of the program.

Now let see the Code!…

1.File Name [login.html]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<html>
 
<head>
 
    <title>Exam Registration Form</title>
    <script type="text/javascript" src="validate.js"></script>
 
</head>
 
<body bgcolor="#FFFFFF">
    <h1 align="center" style="color:#ff0066;">WEB TECHNOLOGY MODEL QUIZ</h1>
    <form name="user" action="quiz.html" onsubmit="return check()"  autocomplete="off">
        <table align="center" width=40% width="100%" cellspacing="2" cellpadding="5" border="5">
            <tr>
                <td colspan="2" align="center"><b>ONLINE QUIZ EXAMINATION</b></td>
 
            </tr>
            <tr>
                <td align="left" valign="top" width="41%">User Name<span style="color:red">*</span></td>
 
                <td width="57%"><input type="text" value="" name="user_name" id="user_name" 
                    size="25" onkeyup="lettersonly(this)"></td>
            </tr>
            <tr>
                <td align="left" valign="top" width="41%">Registration Number<span style="color:red">*</span></td>
                <td width="57%">
                    <input type="text" value="" name="num" id="number"  size="25"  maxlength="12" onkeyup="numbersonly(this)"></td>
            </tr>
            <td align="left">Enter Password <span style="color:red">*</span></td>
            <td><input type="password" id="password" size="25"></td>
            </tr>
            <td align="left">Enter Confirm Password <span style="color:red">*</span></td>
            <td><input type="password" id="Confirm_Password" size="25"></td>
            </tr>
            <td><input type="submit" value="Submit" name="Submit" ></td>
            <td> <input type="reset" value="Reset" name="Reset" > </td>
            <tr>
            <td colspan="2"> <B>ALL READY REGISTER !!</B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b><a href="#">LOGIN HERE</a></b></td>
            </tr>
            </tr>
 
        </table>
    </form>
</body>
 
</html>

2.File Name[validate.js]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
function check() {
            user_name=document.getElementById('user_name').value.trim();
            number=document.getElementById('number').value.trim();
            password=document.getElementById('password').value.trim();
            Confirm_Password=document.getElementById('Confirm_Password').value.trim();
            password_expression = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;

           if (user_name=="") {
            alert("Please Fill your name First");
            return false;
            }
            else if (number=="") 
            {
                alert("Please Fill your Register Number");
                return false;
            }
            else if(password=="") 
            {
                alert("Please Fill your Password");
                return false;
            }
            else if (Confirm_Password=="") 
            {
               alert("Please Fill your Confirm Password");
               return false;
            }
            else if (!password_expression.test(password))
            {
                alert ('Upper case, Lower case, Special character and Numeric letter are required in Password filed');
                return false;
            }
            
            else if (password != Confirm_Password) 
            {
                alert ('Password not Matched');
                return false;
            }
            
            else if (document.getElementById("password").value.length < 6) 
            {
                alert ('Password minimum length is 6');
                return false;
            }
            
            else if (document.getElementById("password").value.length > 12)
             {
                alert ('Password max length is 12');
                return false;
            }


            
        }
        function lettersonly(input){
            var regex = /[^a-z]/gi;
            input.value = input.value.replace(regex,"");
        }
        function numbersonly(input){
            var regex  = /[^0-9]/gi;
            input.value = input.value.replace(regex,"");
            var regex = document.getElementById("number").maxLength;
        }


3.File Name [quiz.html]


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body {
			font-weight: bolder;
		}
	</style>
	<title>Quiz Exam</title>
	<script type="text/javascript">
		function checkresult() {
			var d=0;
			var q1=document.quiz.qus1.value;
			var q2=document.quiz.qus2.value;
			var q3=document.quiz.qus3.value;
			var q4=document.quiz.qus4.value;
			var q5=document.quiz.qus5.value;
			var result=document.getElementById('result');
			var quiz=document.getElementById('quiz');
			if (q1=="Web server") {d++}
			if (q2=="Heading section") {d++}
			if (q3=="SRC") {d++}
			if (q4=="Web clients") {d++}
			if (q5=="Web clients") {d++}
             quiz.style.display="none";

				if (d<=3) {
					result.textContent=`Your result is ${d}/5. It is not so good You can prepare well... `
				} else{
					result.textContent=`Your result is ${d}. Super!... Congragulation...`

				}
		}
	</script>
</head>
<body>
	
<form name="quiz" id="quiz"> 
	<h1 align="center">WEB TECHNOLOGY QUIZ </h1>
	<h2>Anser all the question:</h2>
	<div>
		<p><h3>1.Which program is used by web clients to view the web pages?</h3></p>
		<p><input type="radio" name="qus1" value="Web browser">(A)  Web browser</p>
		<p><input type="radio" name="qus1" value="Protocol">(B) Protocol</p>
		<p><input type="radio" name="qus1" value="Web server">(C) Web server</p>
		<p><input type="radio" name="qus1" value="Search Engine">(D) Search Engine</p>
	</div>
	<div>
		<p><h3>2.Which section of the Web page will contain Meta tags?</h3></p>
		<p><input type="radio" name="qus2" value="Body section">(A) Body section</p>
		<p><input type="radio" name="qus2" value="Heading section">(B) Heading section</p>
		<p><input type="radio" name="qus2" value="(a) or (b)">(C) (a) or (b)</p>
		<p><input type="radio" name="qus2" value="None">(D) None</p>
	</div>
	<div>
		<p><h3>3.Which of the following attributes specifies the name of the image file?</h3></p>
		<p><input type="radio" name="qus3" value="Font">(A) Font</p>
		<p><input type="radio" name="qus3" value="SRC">(B) SRC</p>
		<p><input type="radio" name="qus3" value="Color">(C) Color</p>
		<p><input type="radio" name="qus3" value="Size">(D) Size</p>
	</div>
	<div>
		<p><h3>4.Who send the requisition for web pages to the web servers?</h3></p>
		<p><input type="radio" name="qus4" value="Node">(A) Node</p>
		<p><input type="radio" name="qus4" value="System">(B) System</p>
		<p><input type="radio" name="qus4" value="Web clients">(C) Web clients</p>
		<p><input type="radio" name="qus4" value=" Web customer">(D) Web customer</p>
	</div>
	<div>
		<p><h3>5.Which term is used to refer to the computers that are used for storing web pages as files?</h3></p>
		<p><input type="radio" name="qus5" value="Internet">(A) Internet</p>
		<p><input type="radio" name="qus5" value="Web clients">(B) Web clients</p>
		<p><input type="radio" name="qus5" value="Web servers">(C) Web servers</p>
		<p><input type="radio" name="qus5" value="World Wide Web">(D) World Wide Web</p>
	</div>



	<input type="button" name="button" value="CHECK RESULT" onclick="checkresult()">



</form>
<p id="result"></p>
</body>
</html>

OUTPUT 1

OUTPUT 2

OUTPUT 3

How to Run This Program?

STEP 1: First You Can Create One New Folder.

STEP 2: Now You can copy the login.html code and paste the notepad or any code editor.

STEP 4: Now, Save The [login.html] File in the Folder.

STEP 5: And Copy the [validate.js] code, again save the separate text file .js Extension in the same folder.

STEP 6: Again, copy the [quiz.html] code save the separate text file .HTML Extension in the same folder.

STEP 7: Finally all the three files are in the same folder…Now you can run the [login.html] file in your favorite browser.

NOTE: ALL THE THREE FILES ARE  IN THE SAME FOLDER THAT’S ONLY YOU CAN RUN THE CORRECT OUTPUT OF THE RESULT

I am a Software Engineer with a strong interest in writing technology-related articles, managing two websites. I am dedicated to learning new technologies and producing engaging content. Additionally, I possess expertise in digital marketing and SEO strategies.

Leave a Reply

Your email address will not be published. Required fields are marked *