noogler617/JavaScript Quiz

## JavaScript Quiz
<!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>
	<!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>