Simple Quiz

Q. Which of the following is an element?

  • Water
  • Gold
  • Wind
  • Milk

Gold is an element. Water, wind, and milk are made up of combinations of elements.

I've tried to make this quiz as simple as I could. There are three basic parts to it: javascript, html, and css.

JavaScript

This is ready to go. Just copy and paste this into your file's <head< tag.

<script type="text/javascript">
function submit_question(question, expected, input) {
   var status = document.getElementById(question + "_answer_status");
   var answer = document.getElementById(question + "_answer");

   answer.setAttribute("class","answer");
   answer.setAttribute("className","answer");
   
   if (expected == input) {
      status.innerHTML = "Correct!"; 
   }
   else {
      status.innerHTML = "Incorrect.";  
      answer.setAttribute("class","answer incorrect");
      answer.setAttribute("className","answer incorrect");
   }
      
   answer.style.visibility = "visible";
}
</script>

HTML

1. Copy and paste this where you want your quiz to be on the page.

<p class="question">Q. Which of the following is an element?</p>
<ul>
   <li>
      <input type="radio" name="sample_question" value="a" 
             onchange="javascript:submit_question('sample', 'b', this.value)" />
      Water
   </li>
   <li>
      <input type="radio" name="sample_question" value="b" 
             onchange="javascript:submit_question('sample', 'b', this.value)" />
      Gold
   </li>
   <li>
   <input type="radio" name="sample_question" value="c" 
          onchange="javascript:submit_question('sample', 'b', this.value)" />
      Wind
   </li>
   <li>
      <input type="radio" name="sample_question" value="d" 
             onchange="javascript:submit_question('sample', 'b', this.value)" />
      Milk
   </li>
</ul>
<p id="sample_answer" class="answer">
   <strong id="sample_answer_status"></strong> 
   Gold is an element. Water, wind, and milk are made up of combinations of elements.
</p>

2. Replace the Question and Answer text for your question.

3. Replace the correct answer. For example, if d is correct,

onchange="javascript:submit_question('sample', 'b', this.value)"

4. (Optional) Change the name of the question. 'sample' is the name of the question. If you've only got one quiz on the page, don't worry about changing it. It you've got more, just change 'sample' to something different for each question. Also change it in the name attribute. For example, if your question is about cells, you would change the code to read:

name="cell_question"

and

onchange="javascript:submit_question('cell', 'b', this.value)"

Sample CSS

(Optional) The quiz will work without this and you can completely style it your own way. This css should just serve as a starting point.

<style type="text/css">
div.quiz {
   border: 2px solid #888;
   padding: 5px 10px 0;
   height: 110px;
   margin-bottom: 1em;
}
.quiz ul {
   float: left;
}
.quiz  li {
   list-style-type: none;
}
.quiz p {
   clear: left
}
.quiz input[type=radio] {
   margin: 0 15px;
}
.question {
   font-weight: bold;
}
p.answer {
   visibility: hidden;
   float: left;
   clear: none;
   color: #FFFFFF;
   padding: 3px;
   margin-left: 25px;
   width: 55%;
   background: #459F3E;
}
.incorrect {
   background: #E67B24 !important;
}
</style>