Possible instructions here...
| bee |  |
Possible instructions here...
| bee | |
R-Quiz is a software component that can convert suitable contents into interactive quizzes (Demo).
Current Version: 3.0 (2017/05/01) - rquiz-3.0.zip (184.2 KB)
Changes in comparison to previous versions: CHANGES
R-Quiz is available under the GNU Lesser General Public License (LGPL) which makes it free software. You can use R-Quiz for all your intents and purposes as long as you don't directly sell it. However you can create quiz contents and sell these bundled with R-Quiz which itself remains free of charge. You can also use R-Quiz to offer contents behind a paywall.
R-Quiz currently supports these quiz types:
With the exception of the wordguess quiz type all quizzes can be printed on paper and used non-interactively. Use the browser's native printing functionality for this.
R-Quiz supports button texts and help texts in the following languages:
R-Quiz consists basically of two files, a JavaScript file rquiz.js and a corresponding CSS file rquiz.css. The class names in the CSS file have been prefixed in order to avoid complications with the web page's environment.
You can embed an additional JavaScript file like the provided rquiz-uploader.js which should illustrate how to connect to your server-side logic. An example PHP script rquiz-response.php is also provided. As response you can either send a simple number which will be interpreted as the last number of attempts, or you can send any custom message which will be displayed unmodified.
If you load R-Quiz using a script loader like in a WikiMedia environment, R-Quiz might not initialize any quizzes at first. For this case R-Quiz exposes the window.rQuizInit() method, which needs to be called by the script loader. This has to do with the DOMContentLoaded event which might already have fired in a script loader-based environment.
Make sure the script loader also loads the corresponding CSS file because R-Quiz might fail to do so in such a situation.
After initialization R-Quiz searches for elements that carry certain class names. When it finds a suitable one it tries to convert this element's contents into a quiz. If this element carries a lang attribute, R-Quiz tries to use the attribute value as language setting for the quiz. For backwards compatibility reasons the default language setting is "de" (German). This is what the source code should look like:
<div class="rquiz-matching" lang="en">
<p>Possible instructions here...</p>
<table>
<tr>
<td>bee</td>
<td><img src="bee.jpg" alt="bee"></td>
</tr>
</table>
</div>
| before | after | Possible instructions here...
| Possible instructions here...
|
|---|
If you add more rows to the table, the quiz will have more than a single pair. Using more than two cells per row results in the Quiz operating in "categories mode" in which it uses the first cell's contents as category indicator:
<div class="rquiz-matching" lang="en">
<p>Possible instructions here...</p>
<table>
<tr>
<td>Insects</td>
<td>ant</td>
<td><img src="biene.jpg" alt="bee"></td>
</tr>
</table>
</div>
| before | after | Possible instructions here...
| Possible instructions here...
|
|---|
<div class="rquiz-gapfill" lang="en">
<p>The early <strong>bird</strong> catches the <em>worm</em>.</p>
<p>A <b>bee | bumble bee | fly (<img src="bee.jpg" alt="bee">)</b> is an insect.</p>
<p>5 + 6 * 2 - 12 = <i>5()</i></p>
</div>
| before | after | The early bird catches the worm. A bee | bumble bee | fly ( 5 + 6 * 2 - 12 = 5() | The early bird catches the worm. A bee | bumble bee | fly ( 5 + 6 * 2 - 12 = 5() |
|---|
Every text structuring element like <b>, <i>, <em> or <strong> will become a drag&drop element. If R-Quiz finds parenthesis within such an element, this element won't become a drag&drop element but a text input field. Within the parenthesis you can place a hint. Multiple valid solutions can be separated using the pipe symbol.
<div class="rquiz-gapfill">
<table class="puzzle">
<tr>
<td><em><img alt="" src="...path/to/tile/image1-1..."></em></td>
<td><em><img alt="" src="...path/to/tile/image1-2..."></em></td>
<td><em><img alt="" src="...path/to/tile/image1-3..."></em></td>
</tr>
</table>
<tr>
<td><em><img alt="" src="...path/to/tile/image2-1..."></em></td>
<td><em><img alt="" src="...path/to/tile/image2-2..."></em></td>
<td><em><img alt="" src="...path/to/tile/image2-3..."></em></td>
</tr>
</table>
<tr>
<td><em><img alt="" src="...path/to/tile/image3-1..."></em></td>
<td><em><img alt="" src="...path/to/tile/image3-2..."></em></td>
<td><em><img alt="" src="...path/to/tile/image3-3..."></em></td>
</tr>
</table>
</div>
| before | after |
|
|
|---|
<div class="rquiz-memo" lang="en">
<table>
<tr>
<td>bee</td>
<td><img src="bee.jpg" alt="bee"></td>
</tr>
<tr>
<td>pear</td>
<td><img src="pear.jpg" alt="pear"></td>
</tr>
</table>
</div>
| before | after |
|
|
|---|
Again R-Quiz extracts the contents for this quiz type from a table element. If the table has two columns, the quiz will create sets with two cards per set. A table with three columns means sets with triplets and so on.
<div class="rquiz-multichoice" lang="en">
<p>Which animal is a mammal?(!Shark)(Whale)(Kangaroo)(!Nightingale)(Mouse)(!Bee)</p>
</div>
| before | after | Which animal is a mammal? (!Shark)(Whale)(Kangaroo)(!Nightingale)(Mouse)(!Bee) | Which animal is a mammal? (!Shark)(Whale)(Kangaroo)(!Nightingale)(Mouse)(!Bee) |
|---|
R-Quiz looks for any element in which it finds text with parentheses. The part before the first parenthesis will be interpreted as question and displayed unmodified. However the contents inside the parentheses get transformed into buttons that can be pressed and released (select and unselect). An exclamation mark at the beginning of such contents marks the contents as an incorrect option.
<div class="rquiz-wordjumble" lang="en">
<p>The <strong>early</strong> bird <strong>catches</strong> the worm.</p>
</div>
| before | after | The early bird catches the worm. | The early bird catches the worm. |
|---|
Every text structuring element like <b>, <i>, <em> or <strong> will become a text input field followed by parenthesis containing a hint in form of the expected word but in a jumbled form.
<div class="rquiz-crossword" lang="en">
<table>
<tr>
<td>bear</td>
<td>carnivorous mammal of the family Ursidae</td>
</tr>
<tr>
<td>beer</td>
<td>the world's oldest and most widely consumed alcoholic drink</td>
</tr>
</table>
</div>
| before | after |
|
|
|---|
Again R-Quiz extracts the contents for this quiz type from a table element. The text contents of the first cell of a row will be the solution, the text contents of the second the corresponding hint.
<div class="rquiz-wordsearch" lang="en">
<table>
<tr>
<td>beer</td>
<td>bear</td>
</tr>
</table>
</div>
| before | after |
|
|
|---|
Again R-Quiz extracts the text contents for this quiz type from any cell of a table element.
<div class="rquiz-wordguess" lang="en">
<table>
<tr>
<td>Bee</td>
<td>Honey</td>
</tr>
</table>
</div>
| before | after |
|
|
|---|
Again R-Quiz extracts the text contents for this quiz type from any cell of a table element.
I'm happy when my script is useful to someone. Emails about this are always welcome. I'm also open to suggestions for improvement, as I'm always learning and like to make my scripts better and more secure.
