<!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. &lt;scripting&gt;<br>
          <input type="radio" name="q1" value="b" id="q1b">b. &lt;js&gt;<br>
          <input type="radio" name="q1" value="c" id="q1c">c. &lt;script&gt;<br>
          <input type="radio" name="q1" value="d" id="q1d">d. &lt;javascript&gt;<br>
          
           <h3>2. &lt;p id="demo"&gt;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 &lt;head&gt; section and the &lt;body&gt; section are correct<br>
          <input type="radio" name="q3" value="b" id="q3b">b. The &lt;body&gt; section<br>
          <input type="radio" name="q3" value="c" id="q3c">c. The &lt;head&gt; section<br>
          <input type="radio" name="q3" value="d" id="q3d">d. The &lt;title&gt; 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. &lt;script name="xxx.js"&gt;<br>
          <input type="radio" name="q4" value="b" id="q4b">b. &lt;script src="xxx.js"&gt;<br>
          <input type="radio" name="q4" value="c" id="q4c">c. &lt;script href="xxx.js"&gt;<br>
          <input type="radio" name="q4" value="d" id="q4d">d. &lt;script id="xxx.js"&gt;<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 &copy; 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;
}