<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Quiz</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<h1>Simple Javascript Quiz</h1>
<p>Test your <strong>knowledge</strong></p>
</header>
<section>
<div id="results">
</div>
<form name="quizForm" onsubmit="return submitAnswers()">
<h3>1. Inside which HTML element do we put the JavaScript?</h3>
<input type="radio" name="q1" value="a" id="q1a">a. <scripting><br>
<input type="radio" name="q1" value="b" id="q1b">b. <js><br>
<input type="radio" name="q1" value="c" id="q1c">c. <script><br>
<input type="radio" name="q1" value="d" id="q1d">d. <javascript><br>
<h3>2. <p id="demo">This is a demonstration.</h3>
<input type="radio" name="q2" value="a" id="q2a">a. document.getElementByName("p").innerHTML = "Hello World!";<br>
<input type="radio" name="q2" value="b" id="q2b">b. #demo.innerHTML = "Hello World!";<br>
<input type="radio" name="q2" value="c" id="q2c">c. document.getElementById("demo").innerHTML = "Hello World!";<br>
<input type="radio" name="q2" value="d" id="q2d">d. document.getElement("p").innerHTML = "Hello World!";<br>
<h3>3. Where is the correct place to insert a JavaScript?</h3>
<input type="radio" name="q3" value="a" id="q3a">a. Both the <head> section and the <body> section are correct<br>
<input type="radio" name="q3" value="b" id="q3b">b. The <body> section<br>
<input type="radio" name="q3" value="c" id="q3c">c. The <head> section<br>
<input type="radio" name="q3" value="d" id="q3d">d. The <title> section<br>
<h3>4. What is the correct syntax for referring to an external script called "xxx.js"?</h3>
<input type="radio" name="q4" value="a" id="q4a">a. <script name="xxx.js"><br>
<input type="radio" name="q4" value="b" id="q4b">b. <script src="xxx.js"><br>
<input type="radio" name="q4" value="c" id="q4c">c. <script href="xxx.js"><br>
<input type="radio" name="q4" value="d" id="q4d">d. <script id="xxx.js"><br>
<h3>5. How do you write "Hello World" in an alert box?.</h3>
<input type="radio" name="q5" value="a" id="q5a">a. alertBox("Hello World");<br>
<input type="radio" name="q5" value="b" id="q5b">b. msg("Hello World");<br>
<input type="radio" name="q5" value="c" id="q5c">c. msgBox("Hello World");<br>
<input type="radio" name="q5" value="d" id="q5d">d. alert("Hello World");<br>
<br>
<div id="submitInput">
<input type="submit" value="submit Answers">
</div>
</form>
</section>
<footer>
Copyright © Everybody
</footer>
</div>
</body>
</html>
// Code goes here
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=["c","c","a","b","d"]
// Check Answers
for(i=1; i <= total; i++)
if(eval('q'+i) === answers[i-1]){
score++;
}
//Display Resutls
var result = document.getElementById('results');
results.innerHTML ='<h3> You scored <span>'+score+'</span> out of <span>'+total+'</span></h3>'
return false;
}
/* Styles go here */
body{
background:#e67e22;
color:#ecf0f1;
font-family: 'Source Sans Pro', sans-serif;
font-size:14px;
}
#container{
width:60%;
background:#3498db;
margin:12px auto;
overflow:auto;
padding:25px;
}
header{
text-align:center;
border-bottom:white dashed 1px;
}
header h1{
margin:0;
padding:0;
}
header p{
padding:0;
margin-top:5px;
color:#34495e;
}
section{
min-height:400px;
}
footer{
margin-top:20px;
text-align:center;
}
#submitInput{
text-align:center;
margin:10px auto;
}
#submitInput input[type="submit"]{
background:#e67e22;
color:#ecf0f1;
padding:10px 15px;
border:0;
cursor:pointer;
}
#results h3{
background:#e67e22;
margin:10px 0;
padding:10px;
}
#results span{
color:#34495e;
font-weight:800;
}