Javascript Quiz

Developer
Joe Warren
Size
3,596 Kb
Views
28,336
  1. Javascript Quiz Previews
  2. Javascript Quiz HTML Codes
  3. Javascript Quiz CSS Codes
  4. Javascript Quiz JS Codes

How do I make an javascript quiz?

What is a javascript quiz? How do you make a javascript quiz? This script and codes were developed by Joe Warren on 22 October 2022, Saturday.

Javascript Quiz Previews
IQ Test

Javascript Quiz - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Javascript Quiz</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head>	<meta charset="utf-8">	<meta http-equiv="X-UA-Compatible" content="IE=edge">	<meta name="viewport" content="width=device-width, initial-scale=1">	<link rel="icon" href="../../favicon.ico">	<title>JavaScript Quiz</title>	<link rel="stylesheet" type="text/css" href="styles.css">	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>	<div class="container">	<div class="header clearfix">	<h3 class="text-muted">Code Jobber</h3>	</div>	<div class="jumbotron"> <h1>Javascript Quiz</h1> <p class="lead">Test your Javascript knowledge with this 5 question quiz. You have no time limit, and you will receive your score upon completing the quiz. Good luck!</p> <!-- <p><a class="btn btn-lg btn-success" href="#" role="button">Start</a></p> --> </div>	<!-- create form that contains questions -->	<section>	<div id="results"></div>	<form name="quizForm" onsubmit="return submitAnswers()">	<label>1. In which HTML elements do we put in JavaScript code?</label>	<br>	<!-- answer: b. script -->	<input class="radioJ" type="radio" name="q1" value="a"> a. &lt;js&gt;<br>	<input class="radioJ" type="radio" name="q1" value="b"> b. &lt;script&gt;<br>	<input class="radioJ" type="radio" name="q1" value="c"> c. &lt;body&gt;<br>	<input class="radioJ" type="radio" name="q1" value="d"> d. &lt;head&gt;<br><br>	<label>2. Which HTML attribute is used to reference an external Javascript file?</label>	<br>	<!-- answer: a. src -->	<input type="radio" name="q2" value="a"> a. &lt;src&gt;<br>	<input type="radio" name="q2" value="b"> b. &lt;p&gt;<br>	<input type="radio" name="q2" value="c"> c. &lt;footer&gt;<br>	<input type="radio" name="q2" value="d"> d. &lt;Java&gt;<br><br>	<label>3. How do we call an alert box?</label>	<br>	<!-- answer: d. alert("Hello") -->	<input type="radio" name="q3" value="a"> a. alert.box<br>	<input type="radio" name="q3" value="b"> b. call<br>	<input type="radio" name="q3" value="c"> c. Flintstone("Hello");<br>	<input type="radio" name="q3" value="d"> d. alert("Hello");<br><br>	<label>4. JavaScript is the same as Java?</label>	<br>	<!-- answer: a. False -->	<input type="radio" name="q4" value="a"> a. False<br>	<input type="radio" name="q4" value="b"> b. True<br><br>	<label>5. How do you comment a line out in JavaScript?</label>	<br>	<!-- answer: c. // -->	<input type="radio" name="q5" value="a"> a. %<br>	<input type="radio" name="q5" value="b"> b. +<br>	<input type="radio" name="q5" value="c"> c. //<br>	<input type="radio" name="q5" value="d"> d. Cena<br><br>	<input type="Submit" name="Submit Answers" class="btn btn-lg btn-success" id="submitJones">	</form>	</section>	<footer class="footer">	<p>&copy; 2017 | Code Jobber</p>	</footer>	</div> <!-- container -->	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>	<script type="text/javascript" src="script.js"></script>	</body>	</html> <script src="js/index.js"></script>
</body>
</html>

Javascript Quiz - Script Codes CSS Codes

/* Space out content a bit */
body { padding-top: 20px; padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer { padding-right: 15px; padding-left: 15px;
}
/* Custom page header */
.header { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px;
}
/* Custom page footer */
.footer { padding-top: 19px; color: #777; border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) { .container { max-width: 730px; }
}
.container-narrow > hr { margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn { padding: 14px 24px; font-size: 21px;
}
/* Supporting marketing content */
.marketing { margin: 40px 0;
}
.marketing p + h4 { margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) { /* Remove the padding we set earlier */ .header, .marketing, .footer { padding-right: 0; padding-left: 0; } /* Space out the masthead */ .header { margin-bottom: 30px; } /* Remove the bottom border on the jumbotron for visual effect */ .jumbotron { border-bottom: 0; }
}
#submitJones {	margin-bottom: 20px;
}

Javascript 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	//Looping through the question	for (var i = 1; i <= total; i++) {	//If we miss one, we output an alert box	if(eval('q' + i) == null || eval('q' + i) == ''){	alert('You missed question ' + i);	return false;	}	}	//Set Correct Answers	var answers = ['b', 'a', 'd', 'a', 'c'];	//Check 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 <strong>' + score + '</strong> out of <strong>' + total + '</strong> </h3>';	alert('You scored ' + score + ' out of ' + total);	return false;
}
Javascript Quiz - Script Codes
Javascript Quiz - Script Codes
Home Page Home
Developer Joe Warren
Username MightyJoeW
Uploaded October 22, 2022
Rating 3
Size 3,596 Kb
Views 28,336
Do you need developer help for Javascript 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!

Joe Warren (MightyJoeW) Script Codes
Name
MLK Google Homepage project
First Gen Pokemon Chart
Navbar test
React basic lesson
2017-04-02 Weather App
Bouncing Basketball
Joe Warren Portfolio Deluxe
Weather App 2
Joe Warren Portfolio
HEEL Rock Paper Scissors
Create amazing SEO content 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!