Praktische Sitzung 1: Erstellung einer Zuordnungsübung mit "Hot Potates" und "MS Frontpage 2000"

Transkript

1 4 Praktische Sitzung 1: Erstellung einer Zuordnungsübung mit "Hot Potates" und "MS Frontpage 2000" Ziel: In diesem Abschnitt werden Sie eine Zuordnungsübung zum Thema "Formen des Geldes" erstellen. 1. Hot Potatoes und JMatch starten Klicken Sie auf die "Start"-Taste. Klicken Sie im Start-Menü zunächst auf "Programme" und dann auf "Hot Potatoes 5". In dem "Hot Potatoes 5"-Menü klicken Sie auf "Hot Potatoes v5.5". Alternative: Wenn Sie auf dem Desktop das Symbol zu "Hot Potatoes v5. 5" finden, können Sie das Programm mit einem Doppelklick starten. Auf der Benutzeroberfläche, die nun erscheint sehen Sie 6 Kartoffeln mit einer jeweils anderen Aufschrift. Klicken Sie auf die Kartoffel mit dem Wort "JMatch", um dieses Subprogramm zu starten. 2. Titel der Zuordnungsübung eingeben und speichern Auf der Benutzeroberfläche von JMatch (siehe Abb. 1) geben Sie in der betreffenden Textbox "Formen des Geldes" als Titel Ihrer Übung ein. Als nächstes speichern Sie die Datei. Öffnen Sie das Datei-Menü und klicken Sie auf "Speichern" (siehe Abb. 1). In der Dialogbox, die erscheint, suchen Sie das Verzeichnis "workshop" auf dem Laufwerk C:, wo Sie die Datei abspeichern. Geben Sie der Datei den Namen "geldform". Die Verlängerung ".jmt" wird automatisch vom Programm hinzugefügt. Klicken Sie auf "speichern". Abb. 1

2 5 3. Bilddateien (als Vorgaben) einfügen Klicken Sie dann auf die erste Textbox in der linken Spalte mit der Überschrift "Vorgaben (geordnet)", um den Textanzeiger dort zu plazieren. In diese Box werden Sie das erste Bild einfügen. Öffnen Sie danach das Einfügen-Menü und klicken Sie auf "Grafik/Bild". In der Dialogbox, die erscheint, rufen Sie das Verzeichnis "workshop/images" auf und markieren Sie die Bilddatei "kaurischnecke.jpg" (siehe Abb. 2). Klicken Sie dann auf "Öffnen". Datei auswählen und auf "Öffnen" klicken Abb. 2 Bevor das Bild in die Textbox geladen wird, erscheint eine weitere Dialogbox (siehe Abb. 3). Mit Hilfe dieser Box können Sie die Größe ("Width" and "Height") und die Position ("Left", "Centre", "Right", "Top" usw.) des Bilds bestimmen. Löschen Sie den "Alt text" ("kaurischnecke.jpg"). Wenn Sie fertig sind, klicken auf "Ok", um das Bild zu laden. In der Textbox 1 auf der Programmoberfläche erscheinen dann die folgenden HTML- Scripts: <img src="images/kaurischnecke.jpg" width="105" height="108" align="left" border="0"></img> Die Scripts enthalten Anweisungen für den Browser zum Laden und Formatieren des Bilds auf der Internetseite. Wiederholen Sie den Vorgang, um die restlichen Bilddateien einzufügen. Die Dateien und ihre Reihenfolge sind wie folgt: Aufgabe 2: Aufgabe 3: roemerdenar.jpg salz.jpg

3 6 Aufgabe 4: kreditkarte.jpg Aufgabe 5: 10euro.jpg Wenn Sie alle Bilder eingefügt haben, speichern Sie die Datei. Hier den Alt-Text löschen. Abb Antworten eingeben Wenn Sie alle Bilder eingesetzt haben, klicken Sie nun auf die erste Textbox in der rechten Spalte mit der Überschrift "Antworten (ungeordnet)", um den Textanzeiger dort zu plazieren. In diese Box tippen Sie die folgende Antwort: "3 Shu, Kaurischnecke, Shang-Dynastie, v. Chr." Wiederholen Sie den Vorgang, um die Antworten für die nächsten vier Aufgaben einzutippen. Die nächsten vier Antworten sind: 3 Shu, Kaurischnecke, Shang-Dynastie, v. Chr. 1 Denar, Münze, Römische Republik, v. Chr. Salz, Zahlungsmittel inm Tibet, 13 Jh. n. Chr. Kreditkarte, elektronisches Geld, universell, zeitgenössisch 10 Euro, Papiergeld, EU, zeitgenössisch Wenn eine deutsche Tastatur nicht vorhanden ist, brauchen Sie bei der Eingabe dieser Informationen die ASCII Codes der deutschen Buchstaben. Im folgenden finden Sie die Codes der deutschen Buchstaben: ä Alt+132 Ä Alt+142 ö Alt+148 Ö Alt+153 ü Alt+129 Ü Alt+154 ß Alt+225 Danach hat die Programmoberfläche das Erscheinungsbild wie in Abb. 4 (näc hste Seite) Speichern Sie die Datei.

4 7 5. JMatch-Datei als "Drag-and-Drop" -Übung exportieren Nun sind Sie soweit und können Ihre Online-Übung erstellen. Dazu müssen Sie mit Hilfe des JMatch-Programms die Datei in eine HTML-Seite (Internetseite) konvertieren. Öffnen Sie das Datei-Menü. Dort klicken Sie auf "Webseite erstellen". Sie sehen dann die folgenden Optionen: "Export zu V5", "Export zu V5 Drag/Drop", "Export zu V6", "Flashcards für V5-Browser" usw. Um eine "Drag-and-Drop"-Übung zu erstellen, klicken Sie auf die zweite Option "Export zu V5 Drag/Drop". In der Dialogbox, die erscheint, tippen Sie den Namen der HTML-Datei (Internetseite), die vom Programm erstellt wird. Geben Sie den Namen "geldform" ein und speichern Sie die Datei im Verzeichnis "workshop" (siehe Abb. 5). Die Datei erhält automatisch die Verlängerung ".htm". In der Dialogbox, die danach erscheint, klicken Sie auf "Ja" ("Yes"), um die fertige Online-Übung zu betrachten. Der Browser wird automatisch gestartet. Abb. 4

5 8 Geben Sie hier den Dateinamen "geldform" ein. Klicken Sie dann auf "Speichern". Abb Die Online-Übung (Anweisungen, Feedback, Tasten und Aussehen) konfigurieren Die im Browser erscheinende Übung enthält englischsprachige Anweisungen, und vielleicht gefällt Ihnen die Farbkombination nicht. Öffnen Sie das Optionen-Menü und klicken Sie auf "Konfiguration". Das Konfigurationsmenü erscheint in einem separaten Fenster. Löschen Sie die englischen Anweisungen und schreiben Sie Ihre eigenen deutschen Anweisungen rein. Beginnen Sie mit "Titel/Anleitungen". Schreiben Sie folgendes in die Textboxen (siehe Abb. 6): Untertitel An weisungen Eine Zuordnungsübung Studieren Sie die 5 Abbildungen von verschiedenen Formen des Geldes. Erkennen Sie die Form, die Währung und die Herkunft dieser Zahlungsmittel? Ordnen Sie zu. Untertitel hier eintippen Eigene Anweisungen schreiben und eingeben. Abb. 6

6 9 Klicken Sie auf das Etikett "Hinweis/Rückmeldung" und verändern Sie die folgenden Angaben wie folgt: Punktzahl Richtige Antwort Falsche Antwort Ihr Ergebnis ist: Richtig! Gut gemacht! Leider falsch! Versuchen Sie es noch einmal! Falsche Lösungen wurden gelöscht. Sie können selbstverständlich Ihre Rückmeldungen nach eigenem Wunsch formulieren. Verändern Sie die Angaben zu den Schaltflächen wie folgt: Beschriftung der Schaltfläche "Prüfen" Beschriftung der Schaltfläche "OK" Schaltfläche "Weiter" anzeigen Next Exercise URL Schaltfläche "Inhalt" anzeigen Contents Page URL Schaltfläche "Zurück" anzeigen Kontrolle OK Nächste Seite geldgeschichte.htm Hauptseite geld.htm Zurück Diese Anweisungen müssen Sie exakt befolgen, denn hier werden die Verbindungen zu den anderen Komponenten unserer integrierten Einheit hergestellt. Als letztes klicken Sie auf das Etikett "Aussehen". Sie sehen hier das Standard- Farbschema von Hot Potatoes (Abb. 7). Wenn Ihnen die Farbkombination nic ht gefällt, klicken Sie auf das Regenbogen-Symbol neben jedem Farbcode. Klicken Sie auf die erwünschte Farbe und dann auf "OK". Sie können jederzeit auf "Vorschau" klicken, um Ihre Farbkombination im Mini-Fenster zu sehen. Klicken Sie hier, um die Farben zu verändern. Abb. 7 Wenn Sie mit den Einstellungen fertig sind, klicken Sie auf "Speichern unter". Suchen Sie dann in der Dialogbox das Verzeichnis "c:\workshop\" und speichern Sie die Konfigurationsdatei unter dem Namen "geldform" (siehe Abb. 8). Die Datei erhält

7 10 automatische die Verlängerung ".cfg". Klicken Sie dann auf "OK, um das Konfigurations -Menü zu schließen. Speichern Sie die Konfigurationsdatei unter dem Namen "geldform" ab. Abb. 8 Öffnen Sie nun das Datei-Menü und klicken Sie auf "Export in V5 Drag/Drop", um die aktualisierte Online-Übung zu erstellen. Speichern Sie die HTML-Datei wieder unter dem Namen "geldform". Sie werden dabei die erste Fassung dieser Datei überschreiben. Sehen Sie sich die Übung im Browser an und überprüfen Sie die neuen Einstellungen. Wie die Übung aussehen könnte, sehen Sie in Abb. 9. Abb. 9

8 11 7. JMatch-Datei in der Menü-Version (Version 3) exportieren Die Zuordnungsübung kann man in verschiedenen Versionen exportieren. Wenn man sie in der Version 3 exportiert, kann man die Übung (z.b. dessen Aussehen) mit Hilfe einer HTML-Software (z..b. MS Frontpage) verändern und zusätzliche Bilder einfügen. Wichtig ist vor allem, dass man dann Links auf andere Internet-Seiten, eine Seite mit Worterklärungen oder einen Audiotext anlegen kann. Im folgenden sollen Sie die Übung in der Version 3 exportieren und dann zwei Links anlegen einen auf ein Glossar und einen auf eine relevante Website im Internet. Um die Übung in der Version 3 exportieren zu können, muss man zunächst auf der Symbolleiste ein zusätzliches Symbol einfügen. Öffnen Sie das Optionen-Menü und klicken Sie auf "Einstellungen für Symbolleiste" (siehe Abb. 10). In der Dialogbox suchen Sie nach der Option "Export zu HTML (Export zu HTML-Seite für Browser der Version 3) [F3]". Setzen Sie einen Haken in das Kästchen links daneben, indem Sie darauf klicken. Klicken Sie dann auf "OK". Das Symbol für Version 3 (siehe Abb. 11) erscheint in der Symbolleiste. Symbolleiste Abb. 10 Abb. 11 Klicken Sie nun auf das Symbol und speichern Sie die neue Übung unter dem Namen "geldform1". Sehen Sie sich dann die neue Übung im Browser an (siehe Abb. 12). Dass die Übung nun ganz anders aussieht und eine andere Oberfläche, fällt sofort auf.

9 12 Abb. 12 Öffnen Sie das Datei-Menü und speichern Sie die Datei. Dann klicken Sie auf "Beenden" unten im Menü, um JMatch zu schließen (Abb. 13). Abb MS Frontpage 2000 starten und ein Glossar schreiben Klicken Sie auf die Start-Taste in der Windows -Leiste unten auf dem "Desktop". Klicken Sie dann auf "Programme" und dann auf "Microsoft Frontpage". Wenn sich Frontpage 2000 geladen hat, haben Sie eine neue, noch unausgefüllte Seite. Öffnen Sie das Datei-Menü und klicken Sie auf "Öffnen". Suchen Sie das Verzeichnis "c:\workshop" und klicken Sie dort auf die Datei mit dem Namen "glossar_schablone.htm". Klicken Sie dann auf "Öffnen".

10 13 Sie sehen dann eine einfache Datei mit dem Titel "Worterklärungen", einer Tabelle und der Taste "Schließen". Klicken Sie auf die Vorschau-Funktion unten links. Sie sehen nun Ihre Internetseite, wie sie in einem Browser erscheinen würde. Klicken Sie auf das unterstrichene Wort "Bedeutung". Daraufhin erscheinen die Wörter "Tippen Sie die Bedeutung hier". Diese Interaktion wird durch einen einfachen Javascript- Befehl ermöglicht. Die Scripts sind bereits in der Schablone enthalten. Klicken Sie auf Normal-Modus unten links im Frontpage und setzen Sie dann den Maus-Anzeiger in das Feld mit dem Wort "Bedeutung". Um die Scripts zu sehen, klicken Sie auf "HTML" unten links. Sie sehen dann die folgenden Scripts: bedeutung 9. Die Tabelle mit den Vokabeln einstellen und Vokabeln einfügen Im Normal-Modus markieren Sie die einzeilige Tabelle und öffnen Sie dann das Bearbeiten-Menü. Klicken Sie dort auf "Kopieren" (siehe Abb. 14). Klicken Sie dann auf "Einfügen", und die Tabelle erhält nun eine zweite Reihe mit identischen Inhalten (d.h. "Wort" und "Bedeutung"). Wiederholen Sie diesen Vorgang noch zweimal, um insgesamt eine Tabelle mit vier Reihen zu erstellen. Abb. 14 Eine Tabelle erscheint unter dem Titel. Ersetzen Sie in der linken Spalte das Wort "Wort" mit den folgenden Vokabeln. die Kaurischnecke die Münze das Zahlungsmittel

11 14 zeitgenössisch Nun geben Sie die englischen Bedeutungen dieser Vokabeln ein. Klicken Sie im Normal-Modus auf das Wort "Bedeutung" in der ersten Reihe. Klicken Sie dann auf HTML-Modus, denn wegen der Javascript-Scripts müssen Sie im HTML-Modus arbeiten. Ersetzen Sie diese Wörter "Tippen Sie die Bedeutung hier." mit dem Wort "cowry shell". Dabei müssen Sie aufpassen, dass Sie nicht aus Versehen die Scripts verändern oder die Interpunktion (z.b. und vor allem die Anführungszeichen) löschen Die Scripts sehen dann so aus: bedeutung Wiederholen Sie diesen Vorgang mit den restlichen drei Reihen und tippen Sie die folgenden Wortbedeutungen ein: coin means of payment contemporary Wenn Sie fertig sind, überprüfen Sie Ihre Arbeit anhand der Vorschau-Funktion (unten links). Klicken Sie auf das Wort "Bedeutung". Die englischen Bedeutungen müssten dann auf Mauklick erscheinen (siehe Abb. 15). Abb. 15 Öffnen Sie das Datei-Menü und klicken Sie auf "Speichern unter". Speichern Sie die Datei unter dem Namen "geldformgl" im Verzeichnis "c:\workshop" (siehe Abb. 16). Schließen Sie danach die Datei, indem Sie auf "Schließen" im Datei-Menü klicken.

12 15 Dateinamen "geldformgl" hier eintippen. Abb In der Zuordnungsübung "geldform1.htm" (Version 3) Links setzen Nun öffnen Sie die JMatch-Übung (Version 3), die Sie vorhin erstellt haben, und setzen dort Links auf das Glossar und eine relevante Website im Internet. Öffnen Sie das Datei-Menü und klicken Sie auf "Öffnen". In der Dialogbox, die erscheint, suchen Sie auf Laufwerk C: die Datei "workshop\geldform1.htm". Klicken Sie auf diese Datei und dann auf "Öffnen". Wenn Ihre Übung erscheint, sehen Sie, dass sie von Hot Potatoes als Tabelle formatiert wurde. Setzen Sie Ihren Maus-Anzeiger in die Reihe mit den Anweisungen. Klicken Sie auf das Tabelle-Menü und dann auf "Reihen oder Spalten" (siehe Abb. 17).

13 16 Eine zusätzliche Reihe einfügen Hier den Maus- Anzeiger setzen Abb. 17 In der Dialogbox, die erscheint, klicken Sie "Reihe" an und tippen Sie "1" in die Textbox mit der Überschrift "Anzahl der Reihen". Klicken Sie auch "unterhalb" an (siehe Abb. 18). Klicken Sie dann auf "OK". Eine zusätzliche Reihe erscheint zwischen den Anweisungen und den Aufgaben. Klicken Sie an diesen Stellen. Abb. 18 Als nächstes werden die Links angelegt. Setzen Sie Ihren Maus-Anzeiger in die neue Reihe und öffnen Sie das Einfügen-Menü. Klicken Sie auf "Grafik" und dann auf "von der Festplatte" (siehe Abb. 19). In der Dialogbox, die erscheint, suchen Sie das Verzeichnis "C:\workshop\images\" und klicken Sie auf die Grafikdatei "glossar.gif". Dann klicken Sie auf "Öffnen" (siehe Abb. 20).

14 17 Abb. 19 Klicken Sie zuerst auf "glossar.gif". Klicken Sie dann auf "OK". Abb. 20 Tippen Sie dann das Wort "Glossar" neben das Symbol, das nun erscheint. Setzen Sie einige Leerzeichen und wiederholen Sie die vorigen Schritte, um die Grafik "globe.gif" zu laden und das Wort "Moneymuseum" zu schreiben. Markieren Sie die Wörter und verändern Sie je nach Wunsch die Schrifttype, Punktgröße und Textfarbe. Wir empfehlen Arial, 10, schwarz. Das Ergebnis sehen Sie in Abb. 21. Speichern Sie die Datei, um keine Daten aus Versehen zu verlieren.

15 18 So sieht das Ergebnis aus. Abb. 21 Wir werden nun einen Link auf ein Pop-up-Fenster einrichten, damit das Glossar in einem kleinen Fenster erscheint, dessen Größe wir bestimmen können. Markieren Sie das Wort "Glossar" und klicken Sie dann auf HTML-Modus. Sie sehen, dass das Wort "Glossar" markiert ist. Fügen Sie vor und hinter diesem Wort die einfachen Javascripts für ein Pop-up-Fenster ein. Das Endergebnis sieht wie folgt aus: <a href=# onclick="window.open('geldformgl_demo.htm', 'Glossar', 'scrollbars,resizable,height=250,width=300')">glossar</a> Achten Sie dabei auf die Interpunktion, die genau stimmen muss. Markieren Sie nun das Wort "Moneymuseum" und öffnen Sie auf das Einfügen- Menü, Klicken Sie dort auf die Option "Hyperlink". In der Dialogbox, die erscheint, tippen Sie unter URL die folgende Internet-Adresse: (siehe Abb. 22). Dieser Link soll sich in einem neuen Fenster (aber kein Pop-up-Fenster) öffnen. Klicken Sie in der Dialogbox für das Einfügen eines Hyperlinks auf die Box "Zielfenster". In der Dialogbox, die erscheint, klicken Sie auf "Neues Fenster" (siehe Abb. 23).

16 19 Abb. 22 Abb. 23 Speichern Sie die Übung. Dann sehen Sie sich die Übung mit Hilfe der Vorschau- Funktion (links unten) an. Die Übung sieht wie in Abb. 24 aus.

17 20 Vorschau- Funktion Abb. 24