Multievent

Multievent ist ein kleines JavaScript. Innerhalb eines div-Tags mit der Klasse "multievent" wandeln doppelt geschweifte Klammern den so umrahmten Textbereich in 21 unterschiedliche Ereignisse um. Mit diesem Script kann sehr schnell Interaktivität in Web-Seiten implementiert werden. Bei Interesse bin ich gerne bereit, Auskunft zu geben.

Aufgabe 1: Klick das schnellste Landtier der Welt an?

Code: {r1{, {r2{, {r3{ (kleines r mit Zahl)

Ergebnis:

Radiobutton links (Das Ausrufezeichen ! kennzeichnet den richtigen Begriff. Bezugnehmende Buttons haben die gleiche Zahl.)

Editorbeispiel: {r1{Leopard}} {r1{!Gepard}} {r1{Gazelle}} {r1{Strauß}} {r1{Windhund}}

Browseransicht: {r1{Leopard}} {r1{!Gepard}} {r1{Gazelle}} {r1{Strauß}} {r1{Windhund}}

{S1{Anton}} {S1{Beispiel}} {S1{Anton}} {S1{Beispiel}} {S1{Beispiel}} {S1{Ende}} {S1{Ende}}

Aufgabe 2: Klick unten den größten Meeresbewohner an?

Code: {R1{, {R2{, {R3{ (großes R mit Zahl)

Ergebnis:

Radiobutton rechts (Das Ausrufezeichen ! kennzeichnet den richtigen Begriff. Bezugnehmende Buttons haben die gleiche Zahl.)

Editorbeispiel: {R1{!Blauwal}} {R1{Pottwal}} {R1{Riesenkalmar}} {R1{Riesenhai}} {R1{Walhai}}

Browseransicht: {R1{!Blauwal}} {R1{Pottwal}} {R1{Riesenkalmar}} {R1{Riesenhai}} {R1{Walhai}}

Aufgabe 3: Klicke alle Säugetiere an.

Code: {c{ (kleines c)

Ergebnis:

Checkbox links (Das Ausrufezeichen ! kennzeichnet einen richtigen Begriff)

Editorbeispiel: {c{!Gazelle}} {c{!Maus}} {c{Riesenkalmar}} {c{Strauß}} {c{!Windhund}}

Browseransicht: {c{!Gazelle}} {c{!Maus}} {c{Riesenkalmar}} {c{Strauß}} {c{!Windhund}}

Aufgabe 4: Klick alle Süßwasserfische an.

Code: {C{ (großes C)

Ergebnis:

Checkbox rechts (Das Ausrufezeichen ! kennzeichnet einen richtigen Begriff.)

Editorbeispiel: {C{Dorsch}} {C{!Forelle}} {C{!Karpfen}} {C{Hering}} {C{!Zander}}

Browseransicht: {C{Dorsch}} {C{!Forelle}} {C{!Karpfen}} {C{Hering}} {C{!Zander}}

Aufgabe 5: Stelle die Redewendung unten richtig.

Code: {a{ (kleines a)

Ergebnis:

Auswahlfeld ohne Leerauswahl (Das Ausrufezeichen ! kennzeichnet einen richtigen Begriff. Der senkrechte Strich | trennt Auswahlfelder.)

Editorbeispiel: Eine {a{Ente|Meise|Möwe|!Schwalbe|Taube}} macht noch keinen Sommer.

Browseransicht: Eine {a{Ente|Meise|Möwe|!Schwalbe|Taube}} macht noch keinen Sommer.

Aufgabe 6: Klicke den Vogel mit der größten Spannweite an.

Code: {A{ (großes A)

Ergebnis:

Auswahlfeld mit Leerauswahl (Das Ausrufezeichen ! kennzeichnet einen richtigen Begriff. Der senkrechte Strich | trennt Auswahlfelder.)

Editorbeispiel: {A{Andenkondor|Krauskopfpelikan|Marabu-Storch|Trompeterschwan|!Wanderalbatros}}

Browseransicht: {A{Andenkondor|Krauskopfpelikan|Marabu-Storch|Trompeterschwan|!Wanderalbatros}}

Aufgabe 7: Klicke das richtige Tier an.

Code: {S1{ (großes S mit Nummer S1, S2, S3 ...)

Ergebnis:

Auswahlfeld (Alle Bereiche mit identischer Nummer werde im Auswahlfeld gesammelt.)

Editorbeispiel: Der {S1{Kuckuck}} und der {S1{Esel}}, die hatten einen Streit ...

Browseransicht: Der {S1{Kuckuck}} und der {S1{Esel}}, die hatten einen Streit ...

Aufgabe 8: Klicke alle Tiere weg, die keine Säugetiere sind.

Code: {k{ (kleines k)

Ergebnis:

Anklickbarer Button (Das Ausrufezeichen ! kennzeichnet einen Begriff, der sichtbar bleiben soll. Angeklickte Buttons verschwinden.)

Editorbeispiel: {k{Kuckuck}} {k{!Esel}} {k{!Kuh}} {k{Fisch}}

Browseransicht: {k{Kuckuck}} {k{!Esel}} {k{!Kuh}} {k{Fisch}}

Aufgabe 9: Klicke alle Tiere weg, die keine Säugetiere sind.

Code: {K{ (großes K)

Ergebnis:

Anklickbarer Button (Das Ausrufezeichen ! kennzeichnet einen Begriff, der sichtbar bleiben soll. Angeklickte Buttons bleiben sichtbar.)

Editorbeispiel: {K{Kuckuck}}, {K{!Esel}}, {K{!Kuh}},{K{Fisch}}

Browseransicht: {K{Kuckuck}}, {K{!Esel}}, {K{!Kuh}},{K{Fisch}}

Aufgabe 10: Trage das richtige Tier ein.

Code: {l{ (kleines l)

Ergebnis:

Textfeld mit Purzelwort als Lösungshilfe (Groß- und Kleinschreibung wird beim Lösen nicht beachtet.)

Editorbeispiel: Alle meine {l{Entchen}} schwimmen auf dem See, ...

Browseransicht: Alle meine {l{Entchen}} schwimmen auf dem See, ...

Aufgabe 11: Trage das richtige Tier ein.

Code: {L{ (großes L)

Ergebnis:

Textfeld mit Purzelwort als Lösungshilfe (Groß- und Kleinschreibung wird beim Lösen beachtet.)

Editorbeispiel: Auf der Mauer, auf der Lauer liegt 'ne kleine {L{Wanze}} ...

Browseransicht: Auf der Mauer, auf der Lauer liegt 'ne kleine {L{Wanze}} ...

Aufgabe 12: Trage das richtige Tier ein.

Code: {t{ (kleines t)

Ergebnis:

Leeres Textfeld (Groß- und Kleinschreibung wird beim Lösen nicht beachtet.)

Editorbeispiel: Der Kuckuck und der {t{Esel}}, die hatten einen Streit ...

Browseransicht: Der Kuckuck und der {t{Esel}}, die hatten einen Streit ...

Aufgabe 13: Trage das richtige Tier ein.

Code: {T{ (großes T)

Ergebnis:

Leeres Textfeld (Groß- und Kleinschreibung wird beim Lösen beachtet.)

Editorbeispiel: Fuchs du hast die {T{Gans}} gestohlen, gib sie wieder her ...

Browseransicht: Fuchs du hast die {T{Gans}} gestohlen, gib sie wieder her ...

Aufgabe 14: Wie viele Beine haben ein Bauer, 2 Kühe und 3 Enten zusammen?

Code: {z{ (kleines z)

Ergebnis:

Leeres Textfeld zur Zahleingabe (Im Beispiel werden 16; 16,0 und 16,00 als richtig gewertet.)

Editorbeispiel: Antwort: Sie haben {z{16}} Beine.

Browseransicht: Antwort: Sie haben {z{16}} Beine.

Aufgabe 15: Trage eine ungerade Zahl < 10 ein.

Code: {z{ (kleines z)

Ergebnis:

Leeres Textfeld zur Zahleingabe aus einer Zahlengruppe (Der senkrechte Strich | trennt Alternativen. Im Beispiel werden die Zahlen 1, 3, 5, 7 und 9 als richtig gewertet.)

Editorbeispiel: Antwort: {z{1|3|5|7|9}}

Browseransicht: Antwort: {z{1|3|5|7|9}}

Aufgabe 16: Wie viele Beine haben ein Bauer, x Kühe und y Enten zusammen?

Code: {X{ mit {Z{ (großes X mit großem Z)

Ergebnis:

Unterschiedlich gefüllte Textabschnitte {X{ mit angepassten Zahleingabewerten {Z{ (Der senkrechte Strich | trennt Werte, die nacheinander aufgerufen werden, sobald der eckige "Enter"-Pfeil ↵ neben der Auswertung geklickt wird.)

Editorbeispiel:

Wie viele Beine haben ein Bauer, {X{4|2|3|5}} Kühe und {X{2|4|5|3}} Enten zusammen?

Antwort: Sie haben {Z{22|18|24|28}} Beine.

Browseransicht:

Wie viele Beine haben ein Bauer, {X{4|2|3|5}} Kühe und {X{2|4|5|3}} Enten zusammen?

Antwort: Sie haben {Z{22|18|24|28}} Beine.

Aufgabe 17: Trage den deutschen Begriff ein.

Code: {X{ mit {y{ (großes X mit kleinem y)

Ergebnis:

Unterschiedlich gefüllte Textabschnitte {X{ mit angepassten Texteingabewerten {y{ (Der senkrechte Strich | trennt Werte, die nacheinander aufgerufen werden, sobald der eckige "Enter"-Pfeil ↵ neben der Auswertung geklickt wird. Groß- und Kleinschreibung wird beim Lösen nicht beachtet.)

Editorbeispiel:

englisch: {X{cat|cow|dog|horse|pig}} → deutsch: {y{Katze|Kuh|Hund|Pferd|Schwein}}

Browseransicht:

englisch: {X{cat|cow|dog|horse|pig}} → deutsch: {y{Katze|Kuh|Hund|Pferd|Schwein}}

Aufgabe 18: Trage den deutschen Begriff ein.

Code: {X{ mit {Y{ (großes X mit großem Y)

Ergebnis:

Unterschiedlich gefüllte Textabschnitte {X{ mit angepassten Texteingabewerten {Y{ (Der senkrechte Strich | trennt Werte, die nacheinander aufgerufen werden, sobald der eckige "Enter"-Pfeil ↵ neben der Auswertung geklickt wird. Groß- und Kleinschreibung wird beim Lösen beachtet.)

Editorbeispiel:

englisch: {X{bee|dolphin|eagle|shark|spider}} → deutsch: {Y{Biene|Delfin|Adler|Hai|Spinne}}

Browseransicht:

englisch: {X{bee|dolphin|eagle|shark|spider}} → deutsch: {Y{Biene|Delfin|Adler|Hai|Spinne}}

Aufgabe 19: Mache dir Notizen.

Code: {n{ (kleines n)

Ergebnis:

Textbereich für Notizen. (Für die Dauer der Browsersitzung können im Browser Hilfstexte eingetragen werden.)

Editorbeispiel:

{n{200|22|Notizen}} {n{Feldbreite|Feldhöhe|Text}}

Browseransicht:

{n{200|22|Notizen}}

Aufgabe 20: Klick auf das Auge für weitere Informationen.

Code: {b{ (kleines b)

Ergebnis:

Blende für verborgene Hilfsangebote. (Beim Klick auf das Auge erscheint oder verschwindet die Hilfe.)

Editorbeispiel:

{b{ Hilfe 1, Hilfe 2, ...}}

Browseransicht:

{b{ Hilfe 1, Hilfe 2, ...}}

Aufgabe 21: Klick auf das Auge für weitere Informationen.

Code: {B{ (großes B)

Ergebnis:

Eingerückte Blende für verborgene Hilfsangebote. (Beim Klick auf das Auge erscheint oder verschwindet die Hilfe.)

Editorbeispiel:

{B{ Hilfe 1, Hilfe 2, ...}}

Browseransicht:

{B{ Hilfe 1, Hilfe 2, ...}}

Kombinationen

Die unterschiedlichen Events können beliebig miteinander kombiniert werden.

Aufgabe 1: Klick das schnellste Landtier der Welt an?

{r1{Leopard}} {r1{!Gepard}} {r1{Gazelle}} {r1{Strauß}} {r1{Windhund}}

Aufgabe 2: Klick unten den größten Meeresbewohner an?

{R1{!Blauwal}} {R1{Pottwal}} {R1{Riesenkalmar}} {R1{Riesenhai}} {R1{Walhai}}

Aufgabe 3: Klicke alle Säugetiere an.

{c{!Gazelle}} {c{!Maus}} {c{Riesenkalmar}} {c{Strauß}} {c{!Windhund}}

Aufgabe 4: Klick alle Süßwasserfische an.

{C{Dorsch}} {C{!Forelle}} {C{!Karpfen}} {C{Hering}} {C{!Zander}}

Aufgabe 5: Stelle die Redewendung unten richtig.

Eine {a{Ente|Meise|Möwe|!Schwalbe|Taube}} macht noch keinen Sommer.

Aufgabe 6: Klicke den Vogel mit der größten Spannweite an.

{A{Andenkondor|Krauskopfpelikan|Marabu-Storch|Trompeterschwan|!Wanderalbatros}}

Aufgabe 7: Klicke das richtige Tier an.

Der {S1{Kuckuck}} und der {S1{Esel}}, die hatten einen Streit ...

Aufgabe 8: Klicke alle Tiere weg, die keine Säugetiere sind.

{k{Kuckuck}} {k{!Esel}} {k{!Kuh}} {k{Fisch}}

Aufgabe 9: Klicke alle Tiere weg, die keine Säugetiere sind.

{K{Kuckuck}}, {K{!Esel}}, {K{!Kuh}}, {K{Fisch}}

Aufgabe 10: Trage das richtige Tier ein.

Alle meine {l{Entchen}} schwimmen auf dem See, ...

Aufgabe 11: Trage das richtige Tier ein. Achte auf die Rechtschreibung.

Auf der Mauer, auf der Lauer liegt 'ne kleine {L{Wanze}} ...

Aufgabe 12: Trage das richtige Tier ein.

Der Kuckuck und der {t{Esel}}, die hatten einen Streit ...

Aufgabe 13: Trage das richtige Tier ein. Achte auf die Rechtschreibung.

Fuchs du hast die {T{Gans}} gestohlen, gib sie wieder her ...

Aufgabe 14: Wie viele Beine haben ein Bauer, 2 Kühe und 3 Enten zusammen? Trage eine Zahl ein.

Antwort: Sie haben {z{16}} Beine.

Aufgabe 15: Trage eine ungerade Zahl < 10 ein.

Antwort: {z{1|3|5|7|9}}

Aufgabe 16: Wie viele Beine haben ein Bauer, {X{4|2|3|5}} Kühe und {X{2|4|5|3}} Enten zusammen? Trage eine Zahl ein.

Antwort: Sie haben {Z{22|18|24|28}} Beine.

Aufgabe 17: Trage den deutschen Begriff ein.

englisch: {X{cat|cow|dog|horse|pig}} → deutsch: {y{Katze|Kuh|Hund|Pferd|Schwein}}

Aufgabe 18: Trage den deutschen Begriff ein. Achte auf die Rechtschreibung.

englisch: {X{bee|dolphin|eagle|shark|spider}} → deutsch: {Y{Biene|Delfin|Adler|Hai|Spinne}}

Aufgabe 19: Mache dir fürs Lösen der Aufgaben kleine Notizen.

{n{200|22|Notizen}}

Aufgabe 20: Klick auf das Auge für weitere Informationen.

{b{ Wenn du alle Aufgaben gelöst hast, klick auf den Auswertungsbutton. Nach einem Klick auf den "Enter"-Pfeil ↵ kannst du nochmals starten.}}

Aufgabe 21: Klick auf das Auge für weitere Informationen.

{B{ Wenn du alle Aufgaben gelöst hast, klick auf den Auswertungsbutton. Nach einem Klick auf den "Enter"-Pfeil ↵ kannst du nochmals starten.}}

Ausprobieren

Im unteren Textfeld kann mit den Events experimentiert werden. Die jeweiligen Anpassungen erscheinen darunter.