Multievent
The Multievent library originates from Aufgabenfuchs and has been adapted for Hyperbook.
With Multievent, 26 different interactive event formats can be implemented on a webpage. This JavaScript searches the document for areas enclosed in double curly braces {{…}}. The enclosed content is transformed into an interactive element. Characters between the opening curly braces determine the result. Below is a list of formats and the corresponding character sequences. For example, a small {r{…}} creates an evaluable radio button in front of the enclosed term (see below).
Feedback
For tasks that are evaluated, the following encodings can be added:
:::multievent
{H{Hint displayed after evaluation if the task is correctly evaluated.}}
{h{Hint displayed after evaluation if the task is incorrectly evaluated.}}
:::
{H{Hint displayed after evaluation if the task is correctly evaluated.}} {h{Hint displayed after evaluation if the task is incorrectly evaluated.}}
Task 1
Click on the fastest land animal in the world.
Syntax: {r1{, {r2{, {r3{ (small r with number)
Result: Radio button on the left (The exclamation mark ! indicates the correct term. Related buttons share the same number.)
:::multievent
{r1{Leopard}} {r1{!Cheetah}} {r1{Gazelle}} {r1{Ostrich}} {r1{Greyhound}}
:::
{r1{Leopard}} {r1{!Cheetah}} {r1{Gazelle}} {r1{Ostrich}} {r1{Greyhound}}
Task 2
Click on the largest marine animal below.
Syntax: {R1{, {R2{, {R3{ (capital R with number)
Result: Radio button on the right (The exclamation mark ! indicates the correct term. Related buttons share the same number.)
:::multievent
{R1{!Blue Whale}} {R1{Sperm Whale}} {R1{Giant Squid}} {R1{Basking Shark}} {R1{Whale Shark}}
:::
{R1{!Blue Whale}} {R1{Sperm Whale}} {R1{Giant Squid}} {R1{Basking Shark}} {R1{Whale Shark}}
Task 3
Click on all mammals. As long as not all boxes are correctly checked, magnifying glasses will appear next to the boxes after evaluation.
Syntax: {c{ (small c) To group tasks: {c1{; {c2{ ...
Result: Checkbox on the left (The exclamation mark ! indicates a correct term.)
:::multievent
{c{!Gazelle}} {c{!Mouse}} {c{Giant Squid}} {c{Ostrich}} {c{!Greyhound}}
:::
{c{!Gazelle}} {c{!Mouse}} {c{Giant Squid}} {c{Ostrich}} {c{!Greyhound}}
Task 4
Click on all freshwater fish. As long as not all boxes are correctly checked, magnifying glasses will appear next to the boxes after evaluation.
Syntax: {C{ (capital C) To group tasks: {C1{; {C2{ ...
Result: Checkbox on the right (The exclamation mark ! indicates a correct term.)
:::multievent
{C{Cod}} {C{!Trout}} {C{!Carp}} {C{Herring}} {C{!Pikeperch}}
:::
{C{Cod}} {C{!Trout}} {C{!Carp}} {C{Herring}} {C{!Pikeperch}}
Task 5
Arrange the saying below correctly.
Syntax: {a{ (small a)
Result: Dropdown without empty selection (The exclamation mark ! indicates a correct term. The vertical bar | separates dropdown options.)
:::multievent
A {a{Duck|Tit|Seagull|!Swallow|Pigeon}} does not make a summer.
:::
A {a{Duck|Tit|Seagull|!Swallow|Pigeon}} does not make a summer.
Task 6
Click on the bird with the largest wingspan.
Syntax: {A{ (capital A)
Result: Dropdown with empty selection (The exclamation mark ! indicates a correct term. The vertical bar | separates dropdown options.)
:::multievent
{A{Andean Condor|Dalmatian Pelican|Marabou Stork|Trumpeter Swan|!Wandering Albatross}}
:::
{A{Andean Condor|Dalmatian Pelican|Marabou Stork|Trumpeter Swan|!Wandering Albatross}}
Task 7
Click on the correct animal.
Syntax: {S1{ (capital S with number S1, S2, S3 ...)
Result: Dropdown (All areas with the same number are collected in the dropdown.)
:::multievent
The {S1{Cuckoo}} and the {S1{Donkey}}, they had a quarrel ...
:::
The {S1{Cuckoo}} and the {S1{Donkey}}, they had a quarrel ...
Task 8
Click on all mammals.
Syntax: {k{ (small k) To group tasks: {k1{; {k2{ ...
Result: Clickable button (The exclamation mark ! indicates a correct term. After correct evaluation, excess terms disappear.)
:::multievent
{k{Cuckoo}} {k{!Donkey}} {k{!Cow}} {k{Fish}}
:::
{k{Cuckoo}} {k{!Donkey}} {k{!Cow}} {k{Fish}}
Task 9
Click on all mammals.
Syntax: {K{ (capital K) To group tasks: {K1{; {K2{ ...
Result: Clickable button (The exclamation mark ! indicates a correct term. After correct evaluation, excess terms remain visible.)
:::multievent
{K{Cuckoo}}, {K{!Donkey}}, {K{!Cow}}, {K{Fish}}
:::
{K{Cuckoo}}, {K{!Donkey}}, {K{!Cow}}, {K{Fish}}
Task 10
Enter the correct animal.
Syntax: {l{ (small l)
Result: Text field with scrambled word as a hint (Case-insensitive.)
:::multievent
All my {l{Ducklings}} are swimming on the lake, ...
:::
All my {l{Ducklings}} are swimming on the lake, ...
Task 11
Enter the correct animal.
Syntax: {L{ (capital L)
Result: Text field with scrambled word as a hint (Case-sensitive.)
:::multievent
On the wall, on the wall lies a little {L{Bug}} ...
:::
On the wall, on the wall lies a little {L{Bug}} ...
Task 12
Enter the correct animal.
Syntax: {t{ (small t)
Result: Empty text field (Case-insensitive.)
:::multievent
The cuckoo and the {t{Donkey}}, they had a quarrel ...
:::
The cuckoo and the {t{Donkey}}, they had a quarrel ...
Task 13
Enter the correct animal.
Syntax: {T{ (capital T)
Result: Empty text field (Case-sensitive.)
:::multievent
Fox, you stole the {T{Goose}}, give it back ...
:::
Fox, you stole the {T{Goose}}, give it back ...
Task 14
How many legs do a farmer, 2 cows, and 3 ducks have together?
Syntax: {z{ (small z)
Result: Empty text field for number input (In the example, 16; 16.0 and 16.00 are considered correct.)
:::multievent
Answer: They have {z{16}} legs.
:::
Answer: They have {z{16}} legs.
Task 15
Enter an odd number < 10.
Syntax: {z{ (small z)
Result: Empty text field for number input from a group of numbers (The vertical bar | separates alternatives. In the example, the numbers 1, 3, 5, 7, and 9 are considered correct.)
:::multievent
Answer: {z{1|3|5|7|9}}
:::
Answer: {z{1|3|5|7|9}}
Task 16
How many legs do a farmer, x cows, and y ducks have together?
Syntax: {X{ with {Z{ (capital X with capital Z)
Result: Differently filled text sections {X{ with adjusted number input values {Z{ (The vertical bar | separates values, which are called sequentially when the square "Enter" arrow ↵ next to the evaluation is clicked.)
:::multievent
How many legs do a farmer, {X{4|2|3|5}} cows, and {X{2|4|5|3}} ducks have together?
Answer: They have {Z{22|18|24|28}} legs.
:::
How many legs do a farmer, {X{4|2|3|5}} cows, and {X{2|4|5|3}} ducks have together?
Answer: They have {Z{22|18|24|28}} legs.
Task 17
Enter the German term.
Syntax: {X{ with {y{ (capital X with small y)
Result: Differently filled text sections {X{ with adjusted text input values {y{ (The vertical bar | separates values, which are called sequentially when the square "Enter" arrow ↵ next to the evaluation is clicked. Case-insensitive.)
:::multievent
English: {X{cat|cow|dog|horse|pig}} → German: {y{Cat|Cow|Dog|Horse|Pig}}
:::
English: {X{cat|cow|dog|horse|pig}} → German: {y{Cat|Cow|Dog|Horse|Pig}}
Task 18
Enter the German term.
Syntax: {X{ with {Y{ (capital X with capital Y)
Result: Differently filled text sections {X{ with adjusted text input values {Y{ (The vertical bar | separates values, which are called sequentially when the square "Enter" arrow ↵ next to the evaluation is clicked. Case-sensitive.)
:::multievent
English: {X{bee|dolphin|eagle|shark|spider}} → German: {Y{Bee|Dolphin|Eagle|Shark|Spider}}
:::
English: {X{bee|dolphin|eagle|shark|spider}} → German: {Y{Bee|Dolphin|Eagle|Shark|Spider}}
Task 19
Take notes.
Syntax: {n{ (small n)
Result: Text area for notes. (For the duration of the browser session, helper texts can be entered in the browser.)
:::multievent
{n{200|22|Notes}} {n{Field Width|Field Height|Text}}
:::
{n{200|22|Notes}} {n{Field Width|Field Height|Text}}
Task 20
Click on the eye for more information.
Syntax: {b{ (small b)
Result: Toggle for hidden help offers. (Clicking on the eye shows or hides the help.)
:::multievent
{b{ Help 1, Help 2, ...}}
:::
{b{ Help 1, Help 2, ...}}
Task 21
Click on the eye for more information.
Syntax: {B{ (capital B)
Result: Indented toggle for hidden help offers. (Clicking on the eye shows or hides the help.)
:::multievent
{B{ Help 1, Help 2, ...}}
:::
{B{ Help 1, Help 2, ...}}
Task 22
Click in the input window and press the correct letters for the searched bird.
Syntax: {v{ (small v)
Result: Word search (The vertical bar | separates the terms.)
:::multievent
{v{Woodpecker|Eagle|Pheasant}}
:::
{v{Woodpecker|Eagle|Pheasant}}
Task 23
Click on the letters of the animals in the word search.
Syntax: {w{ (small w)
Result: Word search (The vertical bar | separates the cells. The double tilde ~~ separates the rows. Uppercase letters - correct; lowercase letters - incorrect.)
:::multievent
{w{
a|M|p|b~~
H|A|H|N~~
d|U|g|d~~
E|S|E|L}}
:::
{w{ a|M|p|b~~ H|A|H|N~~ d|U|g|d~~ E|S|E|L}}
Task 24
Solve the crossword puzzle.
Syntax: {W{ (capital W)
Result: Crossword puzzle (The vertical bar | separates the cells. The double tilde ~~ separates the rows.)
:::multievent
{W{
| | |1| ~~
2|D|U|C|K~~
| | |A| ~~
| | |U| ~~
| | |B| ~~
| | |E| }}
:::
{W{ | | |1| ~~ 2|D|U|C|K~~ | | |A| ~~ | | |U| ~~ | | |B| ~~ | | |E| }}
Combine
The different events can be freely combined.
:::multievent
- a) {r1{!correct}} {r1{wrong}}
- b) {R1{!correct}} {R1{wrong}}
- c) {c{!correct}} {c{wrong}}
- d) {C{!correct}} {C{wrong}}
- e) {a{!correct|wrong}}
- f) {A{!correct|wrong}}
:::
- a) {r1{!correct}} {r1{wrong}}
- b) {R1{!correct}} {R1{wrong}}
- c) {c{!correct}} {c{wrong}}
- d) {C{!correct}} {C{wrong}}
- e) {a{!correct|wrong}}
- f) {A{!correct|wrong}}
Mathematical Formulas
Mathematical formulas can also be used in the events. These are enclosed in curly braces.
Select all irrational numbers.
:::multievent
{c{!$\sqrt{2}$}} {c{!$\pi$}} {c{$\frac{1}{2}$}}
:::
{c{!}} {c{!}} {c{}}
Select the correct exponent.
2{a{2|3|!4|8}}=16