Multiple choice quiz with jQuery

Information about the interactive jQuery multiple choice questionnaire / quiz widget using Ajax to load an external XML file containing the questions and answers.

Try the quiz script on a live site
http://www.france-pub.com/french-geography-quiz.html

Install the quiz in a web page

Load the javascript file

<script type=”text/javascript” src=”/js/jquery.ui.quiz-xml-1.js”></script>

Add a DIV  with a unique ID to display the quiz contents

<div id=”myDiv”>Your  multiple choice quiz is loading…</div>

Call the jQuery
<script>// <![CDATA[
$(function () {
$( “#myDiv” ).quiz21( { url:”quiz-geography-2.xml” } );
});
// ]]></script>

Parameters

url : the url of the XML file containing the Quiz data

The XML quiz file format

The Questions

How to format a single question and the corresponding choices in the XML file:

<Title> tag is the text of the question to be displayed.
The first <Choice> is always the correct answer but all the <Choice>s will be displayed in a random order.

A quiz can contain as many questions as is needed.
A question can have as many choices as is needed, but try to limit this with regards to the users view port.

Styling

jquery quiz

Styling is very simple and you can change the appearance over each HTML tag, simply override the elements in the DIV wich contains the widget, for example:

Information

The mimified  javascript file is 2.24k bytes and is compatible  with jQuery UI 1.10 +. The display remains responsive if the containing div is not set to a fixed size.

Contact us if you have questions or need more details on installing or using the widget. We can provide you with custom installations upon request.

Need help installing?

If you prefer using our expertise to install a quiz on your site, contact us. You’ll save time and money.

We have a dedicated editing and management interface with a database connection for larger scale deliveries of the quiz. This includes restricted user access and recording of user scores.
Contact us for more information .

More possibilities

  • Add an option to shuffle or not shuffle the questions, at the moment the questions are shuffled.
  • Add different point values  for correct or incorrect answers.
  • Add an option to display or not display the final score at the end of the quiz.

We love coding and colours