This is the code for a basic multiple choice quiz of which the answers an be either true or false. Consequently, the text output of the feedback can only contain two strings, i.e. “Yes, this is the correct answer” and “Sorry, wrong answer!”, for every question on the same page.
This code goes in the head of the html page:
//a link to your jquery file
<script src="js_jquery.js" type="text/javascript"></script>
//the start of the quiz script
<script type="text/javascript">
//this function turns out the result in the div named answer, below the question
function displayResult(container, correct, questionId){
// Change the contents
container = $(container).next()
container.css('background-color', correct == true ? 'lightgreen' : 'pink');
container.css('display','block');
container.html("<b>QUESTION " + (questionId) + ":</b> " + (correct == true ? "Correct!" : "Wrong!"));
}
//this function passes the relevant div id to displayResult, so displayResult knows which answer div to show
function finalizeAnswer(bttn,c,questionId) {
displayResult(bttn.parentNode, c, questionId);
}
</script>
And this example of two questions goes into the body of your html page:
<div id="1">
<div id="question">
Question 1:<br/>
What is the square root of 16?<br/>
<br/>
<button onClick="finalizeAnswer(this, false, 1)">A. 7</button>
<button onClick="finalizeAnswer(this, false, 1)">B. 5</button>
<button onClick="finalizeAnswer(this, true, 1)">C. 4</button>
<button onClick="finalizeAnswer(this, false, 1)">D. 1</button>
</div>
<div id="answer" style="display:none">Answer</div>
</div>
<div id="2">
<div id="question">
Question 2:<br/>
What is the square root of 16?<br/>
<br/>
<button onClick="finalizeAnswer(this, false, 2)">A. 7</button>
<button onClick="finalizeAnswer(this, false, 2)">B. 5</button>
<button onClick="finalizeAnswer(this, true, 2)">C. 4</button>
<button onClick="finalizeAnswer(this, false, 2)">D. 1</button>
</div>
<div id="answer" style="display:none">Answer</div>
</div>
You can style the questions and answers to match your layout.
I borrowed the essence of this quiz from this answer by Druttka on stackoverflow.
