Simple Quiz

Developer
Lisa Macken
Size
2,847 Kb
Views
30,360
  1. Simple Quiz Previews
  2. Simple Quiz HTML Codes
  3. Simple Quiz CSS Codes
  4. Simple Quiz JS Codes

How do I make an simple quiz?

What is a simple quiz? How do you make a simple quiz? This script and codes were developed by Lisa Macken on 01 October 2022, Saturday.

Simple Quiz Previews
IQ Test

Simple Quiz - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Quiz</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>	<head>	<title>Simple JavaScript Quiz</title>	<link rel="stylesheet" href="css/style.css">	<script src="js/script.js"></script>	</head>	<body>	<div id="container">	<header>	<h1>Simple JavaScript Quiz</h1>	<p>Test your knowledge in <strong>JavaScript fundamentals</strong></p>	</header>	<section>	<div id="results"></div>	<form name="quizForm" onsubmit="return submitAnswers()">	<h3>1. In which HTML element do we put in JavaScript code?</h3>	<input type="radio" name="q1" value="a" id="q1a">a. &lt;js&gt;<br>	<input type="radio" name="q1" value="b" id="q1b">b. &lt;script&gt;<br>	<input type="radio" name="q1" value="c" id="q1c">c. &lt;body&gt;<br>	<input type="radio" name="q1" value="d" id="q1d">d. &lt;link&gt;<br>	<h3>2. Which HTML attribute is used to reference an external JavaScript file?</h3>	<input type="radio" name="q2" value="a" id="q2a">a. src<br>	<input type="radio" name="q2" value="b" id="q2b">b. rel<br>	<input type="radio" name="q2" value="c" id="q2c">c. type<br>	<input type="radio" name="q2" value="d" id="q2d">d. href<br>	<h3>3. How would you write "Hello" in an alert box?</h3>	<input type="radio" name="q3" value="a" id="q3a">a. msg("Hello");<br>	<input type="radio" name="q3" value="b" id="q3b">b. alertBox("Hello");<br>	<input type="radio" name="q3" value="c" id="q3c">c. document.write("Hello");<br>	<input type="radio" name="q3" value="d" id="q3d">d. alert("Hello");<br>	<h3>4. JavaScript is directly related to the "Java" programming language</h3>	<input type="radio" name="q4" value="a" id="q4a">a. True<br>	<input type="radio" name="q4" value="b" id="q4b">b. False<br>	<h3>5. A variable in JavaScript must start with which special character</h3>	<input type="radio" name="q5" value="a" id="q5a">a. @<br>	<input type="radio" name="q5" value="b" id="q5b">b. $<br>	<input type="radio" name="q5" value="c" id="q5c">c. #<br>	<input type="radio" name="q5" value="d" id="q5d">d. No Special Character<br>	<br><br>	<input type="submit" value="Submit Answers">	</form>	</section>	<footer>	<p>Copyright &copy; 2017, All Rights Reserved</p>	</footer>	</div>	</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Simple Quiz - Script Codes CSS Codes

body {	background: #f06226;	color: #fff;	font-family: "arial", sans-serif;	font-size: 14px;
}
#container {	width: 60%;	background: #199fdb;	margin: 20px auto;	overflow: auto;	padding: 25px;
}
header {	text-align: center;	border-bottom: #fff dashed 1px;
}
header h1 {	margin: 0;	padding: 0;
}
header p {	padding: 0;	margin-top: 5px;	color: #000;
}
section {	min-height: 400px;
}
footer {	text-align: center;
}
input[type="submit"]{	background: #f06226;	border: 0;	color: #fff;	padding: 10px 15px;	cursor: pointer;
}
#results h3 {	background: #f06226;	padding: 10px;	margin: 10px 0;
}
#results span {	color: #000;	font-weight: bold;
}

Simple Quiz - Script Codes JS Codes

function submitAnswers(){	var total = 5;	var score = 0;	// Get user Input	var q1 = document.forms["quizForm"]["q1"].value;	var q2 = document.forms["quizForm"]["q2"].value;	var q3 = document.forms["quizForm"]["q3"].value;	var q4 = document.forms["quizForm"]["q4"].value;	var q5 = document.forms["quizForm"]["q5"].value;	// Validation	for (i = 1; i <= total; i++){	if (eval('q'+i) == null || eval('q'+i) == ''){	alert('You missed question ' + i);	return false;	}	}	// Set correct Answers	var answers = ["b","a","d","b","d"];	// check the answers	for (i = 1; i <= total; i++){	if(eval('q'+i) == answers[i - 1]){	score++;	}	}	// Display Results	var results = document.getElementById('results');	results.innerHTML = '<h3>You scored <span>'+score+'</span> out of <span>'+total+' !</span></h3>';	alert('You scored '+ score+ 'out of '+ totol);	return false;
}
Simple Quiz - Script Codes
Simple Quiz - Script Codes
Home Page Home
Developer Lisa Macken
Username lmack90
Uploaded October 01, 2022
Rating 3
Size 2,847 Kb
Views 30,360
Do you need developer help for Simple Quiz?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lisa Macken (lmack90) Script Codes
Name
A Pen by Lisa Macken
SVG icons
Rollover Effect 1
Columns everywhere
Animation examples
A JQuery Mobile Quiz Game
Menu smoothscroll
Image moves with mouse
Scrollable svg Animations
Carousel
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!