I Tutorial 2 I DruckenI Tutorial als Power-Point Präsentation I

Online-Spiele konzipieren und erstellen: Tutorial 1

Vorab:
Die Gruppen sollten möglichst ausgewogen sein, d.h. diejenigen, die schon einmal mit dem Programm Dreamweaver oder einem anderen Html-Editor gearbeitet haben, sollen sich auf die einzelnen Gruppen verteilen.

Viel Spaß!! :o)

Einloggen
Benutzername test2 Kennwort test2

Dreamweaver starten
Programme – Macromedia – Dreamweaver
Option try anklicken. Nicht registrieren!

• Alle Bilder, Webseiten etc. auf Diskettenlaufwerk (A)
  speichern!
  
  

Das Programm Dreamweaver
Macromedia ist derzeit die führende Firma für Internetanwendungen. Der HTML-Editor Dreamweaver erlaubt, auch ohne Kenntnisse der Programmiersprache Html Webseiten zu erstellen.

Prinzip: Wysiwyg
What you see is what you get

Vorteile des Dreamweavers

• Das Programm wird auch von Profis genutzt
• Umfangreiche Hilfslexikon sowie verschiedene Lektionen: F1-Taste drücken

Ziele

• Erstellen von Online-Spielen in Gruppenarbeit
• Grundkenntnisse im Umgang mit dem Programm Dreamweaver
  (Einfügen von Bildern, Texteingabe, Links, etc.)
  
  Wer mehr möchte: Johannes Gutenberg-Universität Mainz / HTML-Webdesign (HTML with Dreamweaver, Photoshop, etc.). Skript mit Übungen( Microsoft PowerPoint): hier klicken.
  

Am Ende sollen eure Webseiten ins Internet gestellt werden!

Was sind Online-Spiele?

Einfaches Beispiel für ein Online-Spiel

Warum Online-Spiele?

Motivation:

• Wei es Spaß macht! :o)
• Weil man das (Unterrichts-)Thema, das dem Spiel zugrunde liegt, wirklich verstanden haben muss, wenn man ein gutes Spiel konzipieren möchte
• Weil es bislang kaum interaktive Lernspiele im Internet gibt, obwohl sie eine Abwechselung zum herkömmlichen Lernen sind
• Weil Computerkenntnisse in der heutigen Berufswelt wichtig sind

Was ist wichtig bei einem Online-Lernspiel?

• Es sollte Material zu den Fragen beinhalten. In diesem Material sollten die Antworten zu den Fragen des Spiels versteckt sein. Das Online-Spiel soll den Besucher der Webseite motivieren, den vielleicht trocknen Lernstoff trotzdem genau durchzulesen.
• Falsche Antworten sollten bei Spielende korrigiert werden. Es reicht nicht, es nur bei einem Punktabzug zu belassen. Ansonsten ist der Lerneffekt nicht gegeben

Wie erstellt man Online-Spiele?

Vorab:
Es gibt, je nach Programmiersprache, verschiedene Möglichkeiten. Die meisten Online-Spiele basieren auf Javaskript oder Flash-Aktionskript.

Die einfachste Möglichkeit ist, Online-Spiele in der Skriptsprache Java zu gestalten.

Man muss jedoch nicht unbedingt Java beherrschen, um Online-Spiele zu programmieren (obwohl rudimentäre Kenntnisse hilfreich sind). Zum HTML-Editor 'Dreamweaver' der Firma Macromedia (die führende Firma bei den meisten Webanwendungen) gibt es eine Erweiterung des Programmes namens Coursebuilder, mit der sich solche Spiele über Programmfenster erstellen lassen.

Screenshot 1: Ein Programmfenster des Coursebuilders

Macromedia bietet sowohl auf seiner englischsprachigen Webseite wie auch auf seiner deutschsprachigen Webseite (www.macromedia.de) zur Evaluation eine sogenannte 30-Tage-Probeversion des Programmes Dreamweaver an. Dabei handelt es sich um eine Vollversion des Programmes, die nach 30ig Tagen automatisch nicht mehr verwendet werden kann. Nachteil ist die lange Downloadzeit des Programmes. Hinzu kommt, dass man vor dem Download ein Webformular mit Angaben zu seiner Person ausfüllen muß (Anschrift, Email, etc.)

Welche Möglichkeiten bietet das Programm CourseBuilder bei der Erstellung von Online-Spielen

Fragengestaltung:

• Texteingabefragen
• Multiple-Choice-Fragen
• Drag&Drop-Fragen, bei denen der Spieler ein Objekt auf ein passendes Feld via Maus ziehen muss

Spielgestaltung:

1 Alle Fragen auf einer Webseite:

• Die Fragen werden einzeln korrigiert, d.h. nach jeder Frage gibt es einen Button, mit dessen Hilfe der Spieler seine Antwort prüfen kann. Zusätzlich besteht die Möglichkeit, für jede Frage ein Zeitlimit zu setzen sowie die Anzahl der Eingaben zu beschränken. Den einzelnen Fragen Punkte zuzuweisen macht hier wenig Sinn.
  
  
• Erst nach einer Anzahl von Fragen werden die Antworten mittels eines Buttons vom Spieler geprüft. Gleichzeitig bekommt der Spieler seinen Punktstand zugewiesen.
  Beispiel

2 Fragen über mehrere Webseiten verteilen:

• Es gibt auch die Möglichkeit, Fragen über mehrere Webseiten zu verteilen. Ein Frame (Frage an euch: Was ist ein Frame?) verfolgt Punktestand, benötigte Zeit und Anzahl der Eingaben.
  Beispiel

Vorab: Dreamweaver Programmfenster

Das Programm hat zwei Fenster: Gezeigt wird einmal die Code-Ansicht uund einmal die Wysiwyg-Ansicht:

Für das Tutorial benötigst Du nur die Wysiwyg-Ansicht!
Screenshot 3

Arbeiten mit dem Coursebuilder

Übung 1: Eine Frage zum Thema englische Literatur:

1 Öffnen des Programmes Dreamweaver und speichern der neuen Webseite auf 3,5-Diskette. Dazu im Menü die Rubrik "Datei" anklicken und in dem Ausziehmenü die Option "Speichern unter ..." anklicken:

Screenshot

Alle Bilder, die ihr vielleicht später zur Gestaltung eures Spieles auswählt, sollten ebenfalls auf Diskette bzw. in einem neuen Ordner auf der Diskette abgespeichert werden.

2 Mit der Maus den Menüpunkt "Einfügen" anklicken und aus dem Ausziehmenü die Option "CourseBuilder interaktion" wählen:

Screenshot 2

(Wichtig: Das Programm CourseBuilder generiert auf eurer Diskette (bzw. je nach Dateipfad) zwei Ordner namens "images" und "skripts". Ohne diese Ordner funktiert das Spiel nicht. Sie müssen auch später mitsamt eurer Webseite auf den Server geladen werden!)

Das CourseBuilder Programmfenster öffnet sich (siehe Screenshot 3):

Screenshot 3

• Dort die Option 3.0 Browser auswählen (klicke des kleinen Kreis an! :o)
• Unter "Category:" die Rubrik "Mulitple Choice" anklicken
• Nicht mit der OK-Button bestätigen sondern in der unteren Menüleiste des Programmfensters die Rubrik "General" anklicken:
  Sreenshot 4
  
  Ein neues, internes CourseBuilder-Programmfenster ("General") öffnet sich:

Screenshot

• Modifiziere entsprechend der Abbildung oben in der angegeben Reihenfolge die Optionen des Programmfensters "General". Nach Eingabe 3 (siehe Screenshot) wiederum nicht mit dem OK-Button bestätigen, sondern in der unteren Menüleiste die Rubrik "Choices" anklicken (4):

Screenshot

• In dem neuen Programmfenster müssen nun nacheinander die verschiedenen möglichen Antworten eingegen werden sowie ihre Bewertung. Dazu muß zunächst unter der Rubrik "Choices:" eine Antwort ausgewählt werden, dann der Text eingegeben werden (hier zum Beispiel "James Joyce"), und schließlich in dem Pull-Down-Menü ausgewählt werden, ob die Antwort richtig (=Correct) oder falsch (=Incorrect) ist. Wie jeder von euch mit absoluter Sicherheit weiß, war natürlich James Joyce nicht der Verfasser des Buches (:o).

Screenshot

• Habt ihr alle Fragen beantwortet, dann wiederum nicht mit den OK-Button bestättigen, sondern in der unteren Menüleiste den "Action Mgr" anklicken:

Screenshot

Natürlich muß dem Spieler nach dem Drücken des "Fertig?"-Buttons noch mitgeteilt werden, ob die Antwort falsch oder richtig ist. Zunächst die Option für eine richtige Antwort

--if correct
hhhhPopup Message

Hier müßt ihr den Text "Popup Message" anklicken (1) und anschließen den Button "Edit" (2) drücken. Ein Fenster öffnet sich, in den ihr euren Text eingeben könnt (3). Nach der Texteingabe den OK-Button (4) drücken.

Nun müßt ihr die Popup Meldungen der Segmente -- else if incorrect und -- else if unknown response wie oben beschrieben verändern. Dazu in der gleichen Reihenfolge vorgehen, d.h. zunächst den entsprechenden Text "Popup Message" im Segment anklicken usw.

So, jetzt könnt ihr endlich den OK-Button drücken und die Quizfrage ist fertig:

Screenshot

Das CourseBuilder-Programmfenster schließt sich und das Dreamweaver-Programmfenster sollte nun folgenden Inhalt haben (die Schriftart habe ich modifiziert):

Speichert nun die Webseite wieder auf Diskette (siehe Beginn des Kapitels!)! Schaut euch nun eure Webseite mittels der Vorschaufunktion an:

Im Internet Explorer wird nun eure Webseite angezeigt! Klappt das Spiel?

Nachträgliches bearbeiten der Frage bzw. der Fragen

• Mit der Maus das CourseBuilder-Icon im Programmfenster des Dreamweavers anklicken. In dem Eigenschaftsfenster die Funktion "Edit" anklicken:

Auftrag:

Gestaltet eine Texteingabefrage (Text Entry). Wählt dazu wieder in er Menüleiste des Dreamweavers die Rubrik "Einfühen" & "CourseBuilder interaktion" (siehe Screenshot 2) aus. Wählt nun die Option "Text entry" aus und bearbeitetet nacheinander die Programmfenster "General", "Responses" und "Action Mgr" des CourseBuilders, bevor ihr mit dem OK-Button betätigt.

Auftrag: Erstellt weitere Fragen (entweder Multiple-Choice-Fragen oder Texteingabefragen).

Ein ausführliches Skript zum Thema Webseiten gestalten im Power-Point-Format, basierend auf dem Programm Dreamweaver, findet ihr hier.