Easy jQuery Quiz is now a real plugin!

June 10, 2013 | No comments

Hi folks, many thanks for your feedback and questions about my Easy jQuery Quiz tutorial. For those of you who would rather just download a plugin, you’re in luck, because I just made it into one!

See the demo or download the files.

Usage

Create an unordered list <ol> within a div. The <li>s that are quiz questions should all have on them and should contain a nested <ol> of multiple choice answers. The correct answer <li> within this nested <ol> should have on them. Like so:

<div id="myQuiz">
  <ol>
    <li>At viverra sapien dignissim eget, vel tristique nibh posuere in? At viverra sapien dignissim eget, vel tristique nibh posuere in? At viverra sapien dignissim eget, vel tristique nibh posuere in?
      <ol>
        <li>
            Morbi rutrum tempor nulla Morbi rutrum tempor nulla Morbi rutrum tempor nulla Morbi rutrum tempor nulla Morbi rutrum tempor nulla
        </li>
        <li>
            Donec congue accumsan turpis
        </li>
        <li>
            Mauris fermentum elit et ipsum pellentesque mattis.
        </li>
      </ol>
    </li>
    <li>At tempor eros, at dignissim risusvel urna fringilla varius?
      <ol>
        <li>
            Proin at eros enim
        </li>
        <li>
            Etiam eget diam odio
        </li>
        <li>
            Vestibulum viverra leo
        </li>
      </ol>
    </li>
    <li id="q3">Cursus ut hendrerit turpis suscipit risus imperdiet quis adipiscing dui porttitor est sagittis vel malesuada neque pretium?
      <ol>
        <li>
            Sed nec mauris id elit condimentum
        </li>
        <li>
            Praesent cursus lorem
        </li>
        <li>
            Nullam tempus velit quis
        </li>
        <li>
            Curabitur in tellus quis neque pulvinar faucibus.
        </li>
      </ol>
    </li>
  </ol>
</div>

Use the .ezQuiz() method to turn the div into a quiz:

$('#myQuiz').ezQuiz();

You can change the default settings like so:

$('#myQuiz').ezQuiz({
	//The submit button selector
	submitbtn: null,
	//The feedback element selector
	feedback: null,
	//Message if user gets more than half right
	besttext: 'Good job!',
	//Message if user gets more than 0 and less than half right
	oktext: 'Not bad.',
	//Message if user gets none right
	poortext: 'Better luck next time.'
});

Tagged: ,

Leave a Reply