Created
March 21, 2017 19:09
-
-
Save noogler617/65af7797a5730561fb7de5916168d435 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Quiz</title> | |
<link rel="stylesheet" type="text/css" href="../quiz/quiz.css"> | |
</head> | |
<body> | |
<style> | |
body { | |
background: black; | |
color: white; | |
font-family: 'Arial', sans-serif; | |
} | |
.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; | |
} | |
input[type='submit'] { | |
background: #f06226; | |
border: 0; | |
color: #fff; | |
padding: 10px 15px; | |
cursor: pointer; | |
#results h3 { | |
background: black; | |
padding: 10px; | |
margin: 10px 0; | |
} | |
</style> | |
<div class="container"> | |
<header> | |
<h1>Simple JavaScript Quiz</h1> | |
<p>Test your knowledge in <strong>JavaScript!</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. js <br> | |
<input type="radio" name="q2" value="b" id="q1a">b. script <br> | |
<input type="radio" name="q3" value="c" id="q1a">c. body <br> | |
<input type="radio" name="q4" value="d" id="q1a">d. link <br> | |
<h3>2. Which HTML attribute is used to reference an external JavaScript file? </h3> | |
<input type="radio" name="q1" value="a" id="q2a">a. src <br> | |
<input type="radio" name="q2" value="b" id="q2a">b. rel <br> | |
<input type="radio" name="q3" value="c" id="q2a">c. type<br> | |
<input type="radio" name="q4" value="d" id="q2a">d. href<br> | |
<h3>3. How would you write hello in a alert box?</h3> | |
<input type="radio" name="q1" value="a" id="q3a">a. msg('Hello')<br> | |
<input type="radio" name="q2" value="b" id="q3a">b. alertbox('hello')<br> | |
<input type="radio" name="q3" value="c" id="q3a">c. document.write('Hello')<br> | |
<input type="radio" name="q4" value="d" id="q3a">d. alert('Hello')<br> | |
<h3>4. JavaScript is directly related to the "Java" programming?</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 varable in JavaScript must start with which special character?</h3> | |
<input type="radio" name="q1" value="a" id="q5a">a. @<br> | |
<input type="radio" name="q2" value="b" id="q5a">b. $<br> | |
<input type="radio" name="q3" value="c" id="q5a">c. #<br> | |
<input type="radio" name="q4" value="d" id="q5a">d. No special character<br> | |
<br><br> | |
<input type="submit" value="Submit Ansers"> | |
</form> | |
</section> | |
</div> | |
<script> | |
function submitAnswers(){ | |
var total = 5; | |
var score = 0; | |
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 1"); | |
return false; | |
} | |
} | |
//set correct answers | |
var ansers = ["b","a","d","b","d"] | |
if(q1 == answers[0]){ | |
score++; | |
} | |
if(q2 == answers[1]){ | |
score++; | |
} | |
if(q3 == answers[2]){ | |
score++; | |
} | |
if(q4 == answers[3]){ | |
score++; | |
} | |
if(q5 == answers[4]){ | |
score++; | |
} | |
alert('You scoreed '+score+' out of '+total); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a Javascript I have written out using very little code with HTML CSS and JavaScript.