Interaktive Arbeitsblätter mit dem el. Werkzeugasten selber erstellen
 

Kapitel 4: Interaktive Bilder

.   .

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!)
 

Was die Interaktiven Arbeitsblätter für Schüler erst so richtig interessant macht ist die Tatsache, dass man an jeder Stelle des Arbeitsblattes Bilder, Animationen und ähnliche Details einbauen kann. Das erhöht den Reiz, sich mit dem Thema auseinander zu setzen. Animationen (animierte Gifs oder Flash-Animationen) findet man zu Tausenden im Netz und kann sie auch leicht selbst erstellen. Einige Elemente sollten an den richtigen Stellen verwendet werden - ein überall funkelndes und blinkendes Arbeitsblatt lenkt jedoch vom Inhalt ab. Im folgenden Kapitel wollen wir aber nicht normale Gifs verwenden, sondern uns Animationen und Wechselbilder selbst erstellen, die damit auch didaktisch sinnvoll eingesetzt werden können. einige Beispiele dafür kann man hier betrachten:

1. Beispiel: Einsatz von Wechselbildern
2. Beispiel: Einsatz von Bilderfolgen

Wir wollen nun - ohne didaktische Hintergründe - zu unseren Zwölf-Elf-Arbeitsblättern einige interaktive Bilder integrieren integrieren. Dazu brauchen wir wieder die Originaldateien.

Originaldateien zum Werkzeug Doppbild: [ Download ]
Originaldateien zum Werkzeug Diashow : [ Download ]

Um diese Werkzeuge nun bearbeiten zu können kopiere ich die Dateien Doppbild [ Download ] und Diashow [ 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 sowie die Dateien radio.htm und checkbox.htm aus dem zweiten Kapitel und die Dateien kurzantwort.htm und lücke.htm aus dem dritten Kapitel. Hinzugekommen sind die Dateien doppbild.htm und diashow.htm! Die Datei stucco.gif ist wie gehabt 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 ]

	Beginnen wir also mit der Datei doppbild.htm. Nach dem Öffnen der Datei - keine Angst wenn das Bild nicht zu sehen ist - wir haben die Bilder ja nicht mit heruntergeladen (und werden das aus Platzgründen auch nicht tun) sollte es erst mal so aussehen. An Stelle des Bildes ist ein Platzhalter zu sehen. Um die Datei zu bearbeiten öffne ich sie wieder im Editor also Datei und bearbeiten wählen oder Communicator und dann Composer öffnen.
	Im Composer sieht sie nun also so aus wie links dargestellt. Der erste und der letzte Script beinhalten wieder den Anfang und das Ende der Java-Script-Inhalte. Die lassen wir also unverändert.
.              .	Diese beiden Bilder wollen wir als Wechselbild verwenden. Also kopieren wir sie in unseren Ordner: =>Rechtsklick auf das Bild, =>Bild speichern unter! Merkt euch gut den Namen dieser Bilder. Wir brauchen ihn gleich!
	Bereits der nächste Script verlangt die Eingabe des ersten Bildernamens. Hier Tragen wir bei VALUE den Namen "zwoelf-elf_01.gif" ein. Das ist nämlich das erste Bild das angezeigt werden soll. Achtung! Auf Groß - u. Kleinschreibung achten und niemals Leerzeichen verwenden!
	Im nächste Script wird die Eingabe des zweiten Bildernamens verlangt. Hier tragen wir bei VALUE den Namen "zwoelf-elf_02.gif" ein. Das ist dann das andere Bild das angezeigt werden soll.
	Weiter verändern wir nichts! Trotzdem - der Vollständigkeit halber - der nächste Script enthält den internen Bildernamen. Dieser ist nur interessant, wenn im selben Script mit mehreren verschiedenen Wechselbildern gearbeitet wird. Allerdings muss das Bild pic0 nun auch das Startbild zugewiesen bekommen. Ein Doppelklick auf den Platzhalter öffnet ein Kontexmenü in das wir den Dateinamen des Anfangsbildes, also zwoelf-elf_01.gif, eintragen. Mit den folgenden Scripten kann man die Button umbennen, wenn man möchte - aber eigentlich ist die Datei jetzt schon fertig. Nur noch das Hintergrundbild und den Titel ändern und wir können uns am Ergebnis dieses Kapitels Wechselbilder erfreuen!
Hier ist meine fertige Wechselbilder-Seite zum Zwölf-Elf! [ Download ]
	Und wieder eine kurze Verschnaufpause!
	Das zweite Werkzeug das interaktive Bilder erzeugt ist die Diashow. Damit werden eine Reihe von Bildern in einer bestimmten Reihenfolge hintereinander angezeigt. Das kann sehr nützlich sein z.B. als Gedankenstütze, wenn der Schüler einen zeitlichen Ablauf wiederholen soll. Er kann dann mit dem Vorwärts- und Rückwärtsknopf die zeitliche Abfolge nachvollziehen und dabei seinen Stoff verinnerlichen. Auch hier wird an Stelle des Bildes ein Platzhalter angezeigt, da die Bilder nicht kopiert worden sind. Das hat soweit seine Richtigkeit.
	Um die Datei zu bearbeiten öffne ich sie wieder im Editor also Datei und bearbeiten wählen oder Communicator und dann Composer öffnen. Im rechten Bild habe ich bereits den überflüssigen Text entfernt und wir erkennen die üblichen Java-Script-Ausdrücke neben dem Platzhalter für das Bild.
.   . .   . .   . .   . .   . .   . .   . .   .	Ich habe mir für dieses Arbeitsblatt gedacht, dass es doch schön wäre für jede Strophe ein Bild zu haben - dann kann dere Schüler das Gedicht lernen, indem er sich die Diaschau anschaut und die dazugehörigen Verse aufsagt. Also habe ich die Bilder links skizziert und eingescannt - so gibt es keine Probleme mit dem Urheberrecht! Diese  Bilder wollen wir in der Diaschau verwenden. Also kopieren wir sie in unseren Ordner: =>Rechtsklick auf das Bild, =>Bild speichern unter! Merkt euch gut den Namen dieser Bilder. Fällt euch etwas auf??? Richtig! Der Stamm des Bildernamens ist elf und dann sind sie einfach durchnummeriert! Die Dateiendung ist gif - das ist wichtig für die Diaschau!
	Durch einen Doppelklick auf den Platzhalter für das Bild (das Fragezeichen) öffnet sich wieder das Kontxmenue und ich kann das erste Bild elf1.gif als Startbild eintragen. Weiter geht es mit den Java- Script- Ausdrücken.
	Der erste und der letzte Script beinhalten wieder den Anfang und das Ende der Java-Script-Inhalte. Die lassen wir auch diesmal unverändert. Im zweiten Script wird der Dateistamm verlangt - das ist für uns elf. Wir tragen also bei VALUE elf ein!
	Im nächsten Script müssen wir die Dateiendung angeben. Die ist bei unseren Bildern gif. Also Tragen wir bei VALUE den Wert gif ein - Kleinschreibung beachten!
	Nun im nächsten Script noch die Anzahl der Bilder angeben - in unserem Beispiel 17 und das wars auch schon! Mit den folgenden Scripten kann man die Button umbennen, wenn man möchte - aber eigentlich ist die Datei jetzt schon fertig. Nur noch das Hintergrundbild und den Titel ändern und wir können uns am Ergebnis dieses Kapitels Diaschau erfreuen!
	Der Lohn der Mühe ist hier zu sehen - die fertige Diaschau und die Anleitung wozu sie gut ist! Viel Spass bei der Arbeit und viel Vergnügen beim Ernten der Erfolge!
Das ist meine fertige Diaschau-Seite zum Zwölf-Elf! [ Download ]
.   .	Damit ist der Kurs zum selbständigen Erstellen von Interaktiven Arbeisblättern zu Ende! Erholt euch gut - wie ihr seht geht Paul jetzt auch seinen Lieblingsbeschäftigungen nach :) Und dann wünsche ich euch noch viel Erfolg beim Einsatz dieser Arbeitsmittel im Unterricht. Das Kapitel 5 erklärt nur noch, wie die einzelnen Übungen zusammengefügt werden können!