Embedded Files
JS file CSS file HTML file
function submitAnsw(){
var total = 5;
var score = 0;
// get user input
// this is changed to a querySelector, it grabs the input that is checked
// if no button is checked it returns a null
// The value is not grabed here in cause a selection was not made [cannot get value of null]
var q1 = document.querySelector('input[name="q1"]:checked');
var q2 = document.querySelector('input[name="q2"]:checked');
var q3 = document.querySelector('input[name="q3"]:checked');
var q4 = document.querySelector('input[name="q4"]:checked');
var q5 = document.querySelector('input[name="q5"]:checked');
// 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 Answers
for (i=1; i <= total; i++){
// After checking each q# to make sure it wasn't null
// it is now safe to get the value.
if(eval('q'+i).value == 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>';
return false;
}
body {
background: #f06226;
color:#FFF;
font-family: 'Arial', sans-serif;
font-size: 14px;
}
#container {
width: 60%;
background: #5bb;
margin: 20px auto;
padding:25px;
overflow: auto;
}
header {
text-align: center;
border-bottom: 1px dashed #FFF;
}
header h1 {
margin:0;
padding:0;
}
header p {
padding:0;
margin-top:5px;
color:#000;
}
section {
min-height:
}
footer {
text-align: center;
}
input[type='submit'] {
background: #f06226;
border: 0;
color:#FFF;
padding:10px 15px;
cursor: pointer;
}
#results h3 {
background: #f06226;
margin:10px 0;
padding:10px;
}
#results span {
color:#000;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Quiz</title>
<script src="app.js"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="container">
<header>
<h1>JavaScript Quiz</h1>
<p>Test your knowledge in <strong>JavaScript fundamentals</strong></p>
</header>
<section>
<div id="results"></div>
<form action="" name="quizForm" onsubmit="return submitAnsw()">
<h3>1. In which HTML element do we put in JS code?</h3>
<input type="radio" name="q1" value="a" id="q1a">a. <js><br />
<input type="radio" name="q1" value="b" id="q1b">b. <script><br />
<input type="radio" name="q1" value="c" id="q1c">c. <body><br />
<input type="radio" name="q1" value="d" id="q1d">d. <link><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 © 2015</p>
</footer>
</div>
</body>
</html>
a simple javasript quiz with printed results
Page updated
Google Sites
Report abuse