davidoster/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title> Computer Based Test</title>
    <link rel="stylesheet" href="simplequiz/css/style.css">
    <script src="file:///C:/Users/Orijajogunlo/Desktop/jquery-1.11.3.js"></script>
    <script src="simplequiz/js/script.js"></script>
</head>
<body>
	<div class="container">
    <header>
        <h1>Computer Based Test</h1>
        <p>Test your knowledge in javascript fundamentals</p>
      <div class="test-info">
      <h4>Name: Adeniran Uche Mukhtar</h4>
      <h5>Subject: Biology</h5>
      <h5>Exam Registration No: CHS/SSS3/2/2016</h5>
       <h5>Duration: 1hr 45min</h5>
    </div>
        </header>


        <section>
            <div id="results"></div>
            <form name="quizForm" onsubmit="submitAnswers(); return false">
                <h3>1. Toad requires ____ to breathe under water?</h3>
                <input type="radio" name="q1" value="a" id="q1a"> a. Lungs <br>
                <input type="radio" name="q1" value="b" id="q1b"> b. Moist skin<br>
                <input type="radio" name="q1" value="c" id="q1c"> c.link <br>
                <input type="radio" name="q1" value="d" id="q1d"> d.Gills <br>

                <h3>2. Cell is the _________ of life.?</h3>
                <input type="radio" name="q2" value="a" id="q2a"> a. DNA <br>
                <input type="radio" name="q2" value="b" id="q2b"> b. basic unit<br>
                <input type="radio" name="q2" value="c" id="q2c"> c. None of these<br>
                <input type="radio" name="q2" value="d" id="q2d"> d. All of the above<br>

                <h3>3. Plants convert ____ and water into carbohydrates and oxygen.</h3>
                <input type="radio" name="q3" value="a" id="q3a"> a. Carbon monoxide<br>
                <input type="radio" name="q3" value="b" id="q3b"> b. carbon  <br>
                <input type="radio" name="q3" value="c" id="q3c"> c. carbon dioxide<br>
                <input type="radio" name="q3" value="d" id="q3d"> d. all of the above<br>

                <h3>4.Fungi are _____</h3>
                <input type="radio" name="q4" value="a" id="q4a"> a. decomposers<br>
                <input type="radio" name="q4" value="b" id="q4b"> b. animals<br>
                <input type="radio" name="q4" value="c" id="q4c"> c. autotrophs<br>
                <input type="radio" name="q4" value="d" id="q4d">d. plants<br>

                <h3>5. JavaScript is a/an ________ language.</h3>
                <input type="radio" name="q5" value="a" id="q5a">a. compiled <br>
                <input type="radio" name="q5" value="b" id="q5b">b. interpreted<br>

                <br><br>
                <input type="submit" value="Submit Answers">
            </form>
        </section>
        <footer>
        copyright &copy; 2016, Designed with Love by Isaac
        </footer>
    </div>
</body>
</html>

## script.js
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(var 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", "d", "c", "a", "b"]

    //check answers
    for(var i = 1; i<= total; i++){
        if(eval('q' + i) == answers [i - 1]){
            score++;
        }
    }
      alert('You scored ' + score + " out of " + total);
    //display results
    var results = document.getElementById('results');
    resutls.innerHTML= '<h3> You scored <span' + score + '</span> out of <span>' + total + '</span></h3>';


    return false;
}

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

## simple-javascript-quiz.markdown

      
    Raw
  

              simple-javascript-quiz.markdown
            
          
    Simple Javascript Quiz

This is a simple JavaScript quiz. Designed and created with Html, css and Javascript. It's not just a quiz, but it also checks and validates answers when you click the submit button below the questions. Enjoy!
A Pen by George Pasparakis on CodePen.
License.

  
## style.css
body{
    background-color: #c5d5cb;
    color: white;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
}
h5,h4{
  text-align: left;
}
.container{
    width: 60%; background: #3b3a36;
    margin: 20px auto;
    overflow: auto;
    padding: 25px;
}
/*  #199fdb*/
header{
    text-align: center;
    border-bottom: white dashed 1px;
}

header h1{
    margin: 0;
    padding:0;
}

header p{
    padding: 0;
    margin-top: 5px;
    color: white;
}

section{
    min-height: 400px;
}

footer{
    text-align: center;
}

input[type="submit"]{
    background: #173e43;
    border: 0;
    color: #fff;
    padding:10px 15px;
    cursor: pointer;
}
#results h3{
    background-color:#f06226;
    padding: 10px;
    margin: 10px 0;
}

#results span{
    color: #000;
    font-weight: bold;
}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title> Computer Based Test</title>
	<link rel="stylesheet" href="simplequiz/css/style.css">
	<script src="file:///C:/Users/Orijajogunlo/Desktop/jquery-1.11.3.js"></script>
	<script src="simplequiz/js/script.js"></script>
	</head>
	<body>
	<div class="container">
	<header>
	<h1>Computer Based Test</h1>
	<p>Test your knowledge in javascript fundamentals</p>
	<div class="test-info">
	<h4>Name: Adeniran Uche Mukhtar</h4>
	<h5>Subject: Biology</h5>
	<h5>Exam Registration No: CHS/SSS3/2/2016</h5>
	<h5>Duration: 1hr 45min</h5>
	</div>
	</header>


	<section>
	<div id="results"></div>
	<form name="quizForm" onsubmit="submitAnswers(); return false">
	<h3>1. Toad requires ____ to breathe under water?</h3>
	<input type="radio" name="q1" value="a" id="q1a"> a. Lungs <br>
	<input type="radio" name="q1" value="b" id="q1b"> b. Moist skin<br>
	<input type="radio" name="q1" value="c" id="q1c"> c.link <br>
	<input type="radio" name="q1" value="d" id="q1d"> d.Gills <br>

	<h3>2. Cell is the _________ of life.?</h3>
	<input type="radio" name="q2" value="a" id="q2a"> a. DNA <br>
	<input type="radio" name="q2" value="b" id="q2b"> b. basic unit<br>
	<input type="radio" name="q2" value="c" id="q2c"> c. None of these<br>
	<input type="radio" name="q2" value="d" id="q2d"> d. All of the above<br>

	<h3>3. Plants convert ____ and water into carbohydrates and oxygen.</h3>
	<input type="radio" name="q3" value="a" id="q3a"> a. Carbon monoxide<br>
	<input type="radio" name="q3" value="b" id="q3b"> b. carbon <br>
	<input type="radio" name="q3" value="c" id="q3c"> c. carbon dioxide<br>
	<input type="radio" name="q3" value="d" id="q3d"> d. all of the above<br>

	<h3>4.Fungi are _____</h3>
	<input type="radio" name="q4" value="a" id="q4a"> a. decomposers<br>
	<input type="radio" name="q4" value="b" id="q4b"> b. animals<br>
	<input type="radio" name="q4" value="c" id="q4c"> c. autotrophs<br>
	<input type="radio" name="q4" value="d" id="q4d">d. plants<br>

	<h3>5. JavaScript is a/an ________ language.</h3>
	<input type="radio" name="q5" value="a" id="q5a">a. compiled <br>
	<input type="radio" name="q5" value="b" id="q5b">b. interpreted<br>

	<br><br>
	<input type="submit" value="Submit Answers">
	</form>
	</section>
	<footer>
	copyright © 2016, Designed with Love by Isaac
	</footer>
	</div>
	</body>
	</html>
	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(var 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", "d", "c", "a", "b"]

	//check answers
	for(var i = 1; i<= total; i++){
	if(eval('q' + i) == answers [i - 1]){
	score++;
	}
	}
	alert('You scored ' + score + " out of " + total);
	//display results
	var results = document.getElementById('results');
	resutls.innerHTML= '<h3> You scored <span' + score + '</span> out of <span>' + total + '</span></h3>';



	return false;
	}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	body{
	background-color: #c5d5cb;
	color: white;
	font-family: 'Arial', sans-serif;
	font-size: 14px;
	}
	h5,h4{
	text-align: left;
	}
	.container{
	width: 60%; background: #3b3a36;
	margin: 20px auto;
	overflow: auto;
	padding: 25px;
	}
	/* #199fdb*/
	header{
	text-align: center;
	border-bottom: white dashed 1px;
	}

	header h1{
	margin: 0;
	padding:0;
	}

	header p{
	padding: 0;
	margin-top: 5px;
	color: white;
	}

	section{
	min-height: 400px;
	}

	footer{
	text-align: center;
	}

	input[type="submit"]{
	background: #173e43;
	border: 0;
	color: #fff;
	padding:10px 15px;
	cursor: pointer;
	}
	#results h3{
	background-color:#f06226;
	padding: 10px;
	margin: 10px 0;
	}

	#results span{
	color: #000;
	font-weight: bold;
	}