Interaktive Arbeitsblätter mit dem el. Werkzeugasten selber erstellen
 

Kapitel 2: Radiobutton und Checkboxen




Für die Herstellung interaktiver Arbeitsblätter mit dem elektronischen Werkzeugkasten benötigen wir zuallererst das entsprechende Material. Um die Dateien auf den eigenen Computer zu kopieren, also herunterzuladen oder downzuloaden, klickt man mit der rechten Maustaste auf die hervorgehobene Verknüpfung und wählt aus dem Kontexmenue den Menuepunkt Verknüpfung speichern unter... bzw. Ziel Speichern unter... :

 
Wenn noch nicht vorhanden: Die Datei von mir überarbeitete Datei scripts.js  [ Download ]

Wenn noch nicht vorhanden: Eine ältere Version des Browsers Netscape Navigator [ Download ]
(ich empfehle die Versionen 4.5 – 4.8 die man kostenlos aus dem Internet bekommen kann. Neuer Versionen taugen für unsere Zwecke nicht, da Java-Scripts dort anders angezeigt werden!)
 

Wenn wir das alles haben kann es losgehen. Der Browser wird installiert – wenn er nicht bereits vorhanden ist – und geöffnet. Dann legen wir auf der Festplatte unseres Computers einen Ordner an (z.B.: C:/Eigene Dateien/Werkzeugkasten/). In diesen Ordner kopieren wir die Datei scripts.js und alle anderen Dateien, die wir verwenden wollen (Bilder, Sounds, etc.). Nun entscheiden wir uns für ein Werkzeug, welches wir verwenden wollen.

Nachdem die Vorgehensweise anhand des Erstellen eines Lückentextes bereits erläutert wurde geht es jetzt mit dem Kapitel Radiobutton und Checkboxen weiter. Um eine Idee davon zu bekommen, um was es sich dabei handelt schauen wir uns die zwei Originaldateien genauer an:

Originaldateien zum Werkzeug Radiobutton: [ Download ]
Originaldateien zum Werkzeug Checkboxen: [ Download ]

Um diese Werkzeuge nun bearbeiten zu können kopiere ich die Dateien radio.htm [ Download ] und checkbox.htm [ Download ] in den Ordner, in dem sich die Datei scripts.js auch schon befindet. Das sollte jetzt also so aussehen:
 

Bitte lasst euch nicht von der etwas ungewöhnlichen Darstellung irritiern - ich arbeite mit einer spanischen Windowsversion ;)
 

Wir erkennen den Ordner Werkzeugkasten. 
In diesem Ordner befinden sich die Dateien lueckentext.htm, scripts.js und stucco.gif bereits aus dem ersten Kapitel. Hinzugekommen sind die Dateien radio.htm und checkbox.htm.
 

Die Datei stucco.gif ist übrigens nur ein Hintergrundbild, welches ich bei HTML-Dokumenten gerne verwende, um der Webseite ein etwas schöneres Aussehen zu geben. Diese Datei kann hier heruntergeladen werden: [ Download ]
 

Wenn wir das alles soweit vorbereitet haben, dann können wir mit der Bearbeitung der Datei radio.htm beginnen.

 
 
1. Schritt:




Die Datei radio.htm wird im Netscape Navigator geöffnet:

Wir sehen links das im Netscape Navigator geöffnete Dokument. Bei Radiobutten gibt  es nur eine richtige Alternative die man anklicken muss. Um die Datei zu bearbeiten öffne ich sie wieder im Editor also Datei und bearbeiten wählen oder Communicator und dann Composer öffnen.
Wieder sehen wir das Dokument mit den gelben Java-Script-Ausdrücken! Ich formuliere zuerst die Frage und die Antworten und beginne dann mit der Bearbeitung der Scripts.
Bei diesem Werkzeug sind eigentlich nur die Scripte neben den Antworten - also die Radiobutton - wichtig. Ein Doppelklick auf den Script neben der ersten Antwort öffnet den Inhalt des Scripts: Hier steht, dass dieser Button den Wert 0 hat! Da die Antwort in meinem Beispiel falsch ist gehört dort wirklich eine Null hin - ich lasse den Script also unverändert. Sollte die erste Antwort bereits die richtige sein muss hier eine 1 als value eingetragen werden!
So kontrolliere ich alle Scripte der Radiobutton und stelle sicher, dass nur bei der richtigen Antwort der Wert 1 steht - alle falschen Antworten müssen den Wert 0 haben!
Der Rückmeldetext erscheint immer wenn auf den Button Ich bin fertig gedrückt wurde am Ende der Auswertung - unabhängig, ob die Antwort stimmt oder nicht! Also sollte man hier bei value einen neutralen Text wie z.B. Achte auf die Groß - und Kleinschreibung! eintragen. Natürlich hat man auch die Möglichkeit, diesen Text wegzulassen - dann trägt man nach value einfach " " (das ist ein Leerstring) ein.
Damit die Seite nun optisch zu der Lückentextseite passt verwende ich hier auch das Hintergrundbild stucco.gif! Dazu klicke ich mit der rechten Maustaste irgendwo auf eine freie Stelle der Seite und kann dann die Seiteneigenschaften verändern.
Wie links zu erkennen habe ich die Datei stucco.gif als Hintergrundbild eingetragen. Unter dem Menuepunkt Allgemein habe ich die Möglichkeit auch den Titel und den Autor der Seite einzutragen bzw. zu ändern.
Abspeichern und Vorschau wählen - wenn alles geklappt hat sollte das Ergebnis so aussehen ... und es sollte auch funktionieren!
Wenn nicht - alles von vorne :(

Wenn doch - Hurra und weiter zu den Checkboxen ...
Erst mal kurz ausruhen ... und dann weiter
Die Originaldatei checkbox.htm sieht so aus, wie links dargestellt. Der einzige Unterschied zu den Radiobutten isr der, dass hier beliebig viel richtige Antworten möglich sind!

Demzufolge ist die Bearbeitung auch analog zu den Radiobutten zu erledigen ...
Als erstes formuliere ich die Frage und die Antworten.

Dann weise ich den richtigen Antworten den Wert 1 und den falschen Antworten den Wert 0 zu.

Wenn ich mehr Checkboxen benötige kopiere ich ganz einfach eine (natürlich mit dem Java-Script-Ausdruck!) und füge sie unter den bereits vorhandenen Checkboxen ein.

Man kann auch problemlos überflüssige Checkboxen löschen.
Auch hier gibt es wieder ein Feedback, das es zu bearbeiten gilt.

Nun noch das Hintergrundbild und den Titel ändern und wir können uns am Ergebnis des zweiten Kapitels erfreuen!
Fertig!!!

Ein wesentlicher Vorteil der Checkboxen gegenüber Radiobutten ist, dass man im Prinzip beliebig viele Checkboxen gleichzeitig verwenden kann - auch für mehrere Fragen und in Tabellen.
Hier ist meine fertige Radiobutten-Seite zum Zwölf-Elf! [ Download ]
...und meine fertige Checkboxen-Seite zum Zwölf-Elf! [ Download ]

[ Weiter zu Kapitel 3 ]
[ Zurück zum Index ]