The quiz.js was developed as extension for elearn.js. But it is also possible to use quiz.js on its own. You need to include jQuery for quiz.js to work.
The detailled documentation is currently only available in german. You can see it on https://elb-min-uhh.github.io/quiz.js/.
If you want to include quiz.js into your page, you can do it on multiple ways.
With elearn.js it's easiest to use the atom-elearnjs package for the editor Atom. You can simply add the question divs to the markdown file and the package will do the quiz.js import for you.
The file quizJS_Dokumentation.md is written for the atom-elearnjs package. It will convert to the linked documentation (with a few minor differences).
If you want to add it manually to your HTML file, you have to insert
<link rel="stylesheet" type="text/css" href="assets/css/quiz.css">
<script type="text/javascript" src="assets/js/min.js"></script> <!-- jQuery -->
<script type="text/javascript" src="assets/js/quiz.js"></script> <!-- Quiz Script -->
to the <head>. You can then use the quiz elements everywhere in the <body>.
Notice: You can find those files in the assets folder. You might want to update the href/src path when you manually copy the files.
Per default all quiz.js elements will be german. You can change this easily with different methods.
- A
langattribute will cause this node and all included quiz.js nodes to appear in the selected language. E.g.<html lang="en">to change the language for the whole document or<div class="question" lang="en">for only one question. Changing thelangattribute after the document was loaded will not change already localized elements. Use method 2 for this. - The
quizJS.setLanguage()function can be used to set the language from inside a script. You can use this for atom-elearnjs projects in the meta custom block.
Available languages are:
- de: German (default)
- en: English
There are quiz elements of several types. Please check the the documentation.
One simple example code for a multiple choice question is
<div class="question" qtype="choice" id="q_choice">
<h4>What directories are likely to be present in a digital script?</h4>
<div class="answers multiple">
<label><input val="Frage2-1">assets</label>
<label><input val="Frage2-2">movies</label>
<label><input val="Frage2-3">img</label>
<label><input val="Frage2-4">css</label>
<label><input val="Frage2-5">lang</label>
</div>
<div class="feedback correct">
You were correct.
</div>
<div class="feedback incorrect">
You were wrong.
</div>
<!--
MD5 of the correct input id's
-->
<a class="ans">b5ceb729a1b347aa357790e1588c88b3</a>
<a class="ans">1fd302a9c89fc92eead418857a7e5a07</a>
<a class="ans">4fc364339b2127eb81c13ab986a27085</a>
</div>
quiz.js is developed by dl.min of Universität Hamburg.
The software is using MIT-License.
cc-by Michael Heinecke, Arne Westphal, dl.min, Universität Hamburg