Multievent

Mit Multievent können 26 unterschiedliche, interaktive Ereignisformate in einer Webseite implementiert werden. Dieses JavaScript macht sich im Dokument auf die Suche nach Bereichen, die von doppelt geschweiften Klammern umrahmt sind {{…}}. Der so umklammerte Zwischenraum wird in ein interaktives Element umgewandelt. Zeichen zwischen den beiden öffnenden geschweiften Klammern bestimmen das Ergebnis. Unten ist aufgelistet, welche Formate durch welche Zeichenfolgen erzeugt werden. Beispielsweise bewirkt ein kleines {r{…}}, dass ein auswertbarer Radiobutton vor dem eingeklammerten Begriff entsteht (siehe unten).

Ausprobieren »

Multievent mit LibreOffice »

Ereignisformate

Hier werden Codierungen aufgeführt, die markierte Textbereiche in Multimedia-Events umwandeln. Bei Aufgaben, die ausgewertet werden, lassen sich noch die folgenden Codierungen einfügen:

• {H{Nach der Auswertung erscheinender Hinweis, falls die Aufgabe richtig gewertet wurde.}}
• {h{Nach der Auswertung erscheinender Hinweis, falls die Aufgabe falsch gewertet wurde.}}

---

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}}

---

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. Solange nicht alle Boxen richtig angekreuzt sind, erscheinen Lupen neben den Boxen nach der Auswertung.

Code: {c{ (kleines c) Um Aufgaben zu gruppieren: {c1{; {c2{ ...

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. Solange nicht alle Boxen richtig angekreuzt sind, erscheinen Lupen neben den Boxen nach der Auswertung.

Code: {C{ (großes C) Um Aufgaben zu gruppieren: {C1{; {C2{ ...

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 Säugetiere an.

Code: {k{ (kleines k) Um Aufgaben zu gruppieren: {k1{; {k2{ ...

Ergebnis:

Anklickbarer Button (Das Ausrufezeichen ! kennzeichnet einen Begriff, der sichtbar bleiben soll. Nach korrekter Auswertung verschwinden überschüssige Begriffe.)

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

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

---

Aufgabe 9: Klicke alle Säugetiere an.

Code: {K{ (großes K) Um Aufgaben zu gruppieren: {K1{; {K2{ ...

Ergebnis:

Anklickbarer Button (Das Ausrufezeichen ! kennzeichnet einen Begriff, der sichtbar bleiben soll. Nach korrekter Auswertung bleiben überschüssige Begriffe 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, ...}}

---

Aufgabe 22: Klick in das Eingabefenster und drücke die richtigen Buchstaben für den gesuchten Vogel.

Code: {v{ (kleines v)

Ergebnis:

Suchsel (Der senkrechte Strich | trennt die Begriffe.)

Editorbeispiel:

{v{Specht|Adler|Fasan}}

Browseransicht: 

{v{Specht|Adler|Fasan}}

---

Aufgabe 23: Klick die Buchstaben der Tiere im Suchsel an.

Code: {w{ (kleines w)

Ergebnis:

Suchsel (Der senkrechte Strich | trennt die Zellen. Die doppelte Tilde ~~ die Zeilen. Großbuchstaben - richtig; Kleinbuchstaben - falsch)

Editorbeispiel:

{w{ a|M|p|b~~ H|A|H|N~~ d|U|g|d~~ E|S|E|L}}

Browseransicht: 

{w{ a|M|p|b~~ H|A|H|N~~ d|U|g|d~~ E|S|E|L}}

---

Aufgabe 24: Löse das Kreuzworträtsel.

Code: {W{ (großes W)

Ergebnis:

Kreuzworträtsel (Der senkrechte Strich | trennt die Zellen. Die doppelte Tilde ~~ die Zeilen. Buchstaben werden in Textfelder verwandelt.)

Editorbeispiel:

{W{ | | |1| ~~ 2|E|N|T|E~~ | | |A| ~~ | | |U| ~~ | | |B| ~~ | | |E| }}

Browseransicht: 

{W{ | | |1| ~~ 2|E|N|T|E~~ | | |A| ~~ | | |U| ~~ | | |B| ~~ | | |E| }}

---

Kombinieren

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 Säugetiere an.

{k1{Kuckuck}} {k1{!Esel}} {k1{!Kuh}} {k1{Fisch}}

---

Aufgabe 9: Klicke alle Säugetiere an.

{K2{Kuckuck}}, {K2{!Esel}}, {K2{!Kuh}}, {K2{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.}}

---

Aufgabe 22: Klick in das Eingabefenster und drücke die richtigen Buchstaben für den gesuchten Vogel.

{v{Specht|Adler|Fasan}}

---

Aufgabe 23: Klick die Buchstaben der Tiere im Suchsel an.

{w{a|M|p|b~~H|A|H|N~~d|U|g|d~~E|S|E|L}}

---

Aufgabe 24: Löse das Kreuzworträtsel.
1: Stadtvogel 2: Wasservogel

{W{| | |1| ~~2|E|N|T|E~~ | | |A| ~~ | | |U| ~~ | | |B| ~~ | | |E| }}

---

Ausprobieren

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

Neu

---

Einbinden

HTML-Kenner

In die Kopfzeile Ihres Dokumentes wird folgende Zeile eingefügt: <script language="javascript" type="text/javascript" src="pfad_zur_datei/multievent.js"></script>. Der Pfad zur eigenen Datei wird entsprechend angepasst. In allen Tags, die mit der Klasse multievent versehen sind, werden die doppelt geschweiften Klammern, die das Script erkennt, durch entsprechende Event-Elemente ersetzt.

---

Anfänger

• Das Script "multieventDOK.js" setzt automatisch für das ganze Dokument die Klasse "multievent". In der ganzen Seite werden doppelt geschweiften Klammern gesucht und gegebenenfalls ersetzt. Es erscheint ein einziger Auswertung-Button am unteren Ende der Seite.
• Das Script "multieventTab.js" setzt automatisch für die Zellen einer Tabelle die Klasse "multievent". In jeder Tabellenzelle werden doppelt geschweiften Klammern gesucht und gegebenenfalls ersetzt. Im unteren Bereich jeder Tabellenzelle erscheint bei Bedarf ein Auswertung-Button.

Multievent mit LibreOffice

• Datei > Neu > HTML-Dokument
• Bei bestehender Datei im Dateienordner: rechte Maustaste > Öffnen mit ...
• Eventuell direkte Formatierung löschen
• Cursor an erste Stelle des Dokumentes setzen (oben links)
• Einfügen > Script...
• Scripttyp: > URL: Durchsuchen ...
• "multieventDOK.js" oder "multieventTab.js" markieren

LibreOffice bietet die Möglichkeit, eine HTML-Datei zu erzeugen. Dazu betätigt man im Reiter "Datei" den Pfad "Neu" > "HTML-Dokument".



Nachdem das Dokument als HTML-Datei gespeichert wurde, erscheint im Reiter "Einfügen" der Pfad "Script".



Im Script-Fenster kann der Pfad zur gewünschten JavaScript-Datei zugewiesen werden. Vor dem Einfügen muss der Cursor an allererster Stelle (oben links) im Dokument stehen.



Die um das JavaScript ergänzte Datei muss nochmals gespeichert werden (Datei > Speichern oder STRG+S). Die gespeicherte HTML-Datei zeigt nun in einem Webbrowser sämtliche Multievent-Elemente anstelle der geschweiften Klammern an.

Abermaliges Öffnen der Datei

Bevor diese Datei später nochmals geöffnet wird, muss unbedingt der richtige Dateityp markiert werden. Nachdem im Reiter "Datei" auf den Pfad "Öffnen" geklickt wurde, erscheint unten recht im Dialogfenster [Alle Dateien] die Möglichkeit, ein bestimmtes Suchformat anzuklicken. Hier wird eine riesige Anzahl von möglichen Formaten angezeigt. Erst im untersten Teil dieser Formatliste erscheint das Format "HTML-Dokument" - nicht "Webseiten (Writer)" und auch nicht "HTML-Dokument (Writer)". Nur wenn dieses Format (ohne Writer-Zusatz) ganz unten in der Liste markiert wird, öffnet das Programm die entsprechende Datei richtig. Ansonsten würde das eingebundene JavaScript beim Öffnen wieder gelöscht werden.



Direkte Formatierung löschen

Aus dem Internet herauskopierte Texte sind oft mit einer Unzahl von Formatierungen belegt, die nur im Quelltext erkennbar sind. Diese Formatierungen können eventuell dazu führen, dass es zu Problemen im Programmablauf kommen kann. Aus diesem Grunde ist es ratsam, diese Texte von ihren Formatierungen zu befreien. Dafür wird der gesamte Text markiert. Danach klickt man auf den Reiter "Format und dann auf den Pfad "Direkte Formatierung löschen" (STRG+M).