Elementary JavaScript quiz form

elementary-javascript-quiz-form.markdown

Elementary JavaScript quiz form

A very elementary JavaScript quiz form

A Pen by Tim Ivey on CodePen.

License.

index.html

<div id="container">
  <header>
    <h1>Simple JavaScript Quiz</h1>
    <p>Test your knowledge in <strong>JavaScript Fundamentals</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. &lt;js&gt;<br>
      <input type="radio" name="q1" value="b" id="q1b">b. &lt;script&gt;<br>
      <input type="radio" name="q1" value="c" id="q1c">c. &lt;body&gt;<br>
      <input type="radio" name="q1" value="d" id="q1d">d. &lt;link&gt;<br>

      <br><br>
      <h3>2. What is the vision of JavaScript varibles called?</h3>
      <input type="radio" name="q2" value="a" id="q2a">a. inline<br>
      <input type="radio" name="q2" value="b" id="q2b">b. line of sight<br>
      <input type="radio" name="q2" value="c" id="q2c">c. directional<br>
      <input type="radio" name="q2" value="d" id="q2d">d. scope<br>      
      
      <br><br>
      <h3>3. JavaScript is a version of Java.</h3>
      <input type="radio" name="q3" value="a" id="q3a">a. true<br>
      <input type="radio" name="q3" value="b" id="q3b">b. false<br>  
      
      <br><br>
      <input type="submit" value="Submit Answers">
    </form>
  </section>
  <footer>
    <p>Copyright &copy; 2015</p>
  </footer> 
</div>

script.js

function submitAnswers() {
  var total = 3;
  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;
  
  // 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","b"];
  
  for(var i = 1; i <= total; i++) {
    // Check answers
    if (eval('q' + i) == answers[i - 1]) {
      score++;
    }
  }

  // Display results
  var results = document.getElementById('results');
  results.innerHTML = '<h3>You scored <span>' + score + '</span> out of <span>' + total + '</span></h3>';
  //alert('You scored ' + score + ' out of ' + total);
  
  return false;
}

style.css

body {
  background: #f06226;
  color: white;
  font-family: arial;
  font-size: 14px;
}

#container {
  width: 60%;
  background: #199fdb;
  margin: 20px auto;
  overflow: auto;
  padding: 25px;
}

header {
  text-align: center;
  border-bottom: #fff dashed 1px;
}

header h1,
header p {
  margin 0;
  padding 0;
}

header p {
  margin-top: 5px;
  color: #000;
}

section {
  min-height: 400px;
}

footer {
  text-align: center;
}

input[type="submit"] {
  background: #f06226;
  border: 0;
  color: white;
  padding: 10px 15px;
  cursor: pointer;
}

#results h3 {
  background: #f06226;
  padding: 10px;
  margin: 10px 0;
}
#results span {
  color: #000;
  font-weight: bold; 
}