Skip to content

Latest commit

 

History

History
102 lines (72 loc) · 3.5 KB

README.md

File metadata and controls

102 lines (72 loc) · 3.5 KB
Raw

quiz.js

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.

Documentation

The detailled documentation is currently only available in german. You can see it on https://elb-min-uhh.github.io/quiz.js/.

Usage

If you want to include quiz.js into your page, you can do it on multiple ways.

With elearn.js

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).

Manually

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.

Supported Languages

Per default all quiz.js elements will be german. You can change this easily with different methods.

  1. A lang attribute 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 the lang attribute after the document was loaded will not change already localized elements. Use method 2 for this.
  2. 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

Quiz Elements

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>

License

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