Unter Drag & Drop versteht man das Verschieben von Objekten zu beliebigen Positionen auf dem Bildschirm. Diese Eigenschaft läßt sich für sehr variantenreiche Aufgabenkonstruktionen nutzen. Im Vordergrund stehen dabei Anordnungs- Zuordnungs- und Klassifikationsaufgaben, die auf sehr bequeme Weise hohe Interaktivität ermöglichen und zum andern sehr anspruchsvolle Eigenkonstruktionen vom Lernenden abverlangen können. Da vornehmlich Lernaufgaben anregt werden sollen, wird auf eine aufwendige Testung korrekter Positionen verzichtet. Als Rückmeldungen sind statt dessen Musterlösungen vorgesehen.Zugrunde liegendes Skript
Das entscheidende JavaScript (dragdrop.js) zur Konstruktion von Drag & Drop-Aufgaben wurde von Walter Zorn programmiert und für eine freie Nutzung zur Verfügung gestellt. Nähere Einzelheiten dazu: Siehe unbedingt die SeiteEinige AufgabenbeispieleDort werden hinreichende Angaben zur Konstruktion von Drag & Drop gemacht. Mit Hilfe dieses Scripts können sowohl Layer wie Bilder drag&drop-fähig gestaltet werden.
- DHTML: Drag & Drop für Bilder und Layer von W. Zorn.
http://www.walterzorn.de/dragdrop/dragdrop.htmHier wird nur ein Vorschlag von vielen möglichen Vorschlägen unterbreitet, um eine zügige Aufgabenkonstruktion vornehmen zu können. Jede Aufgabe erfordert eine eigene Html-Seite, welche die Datei drapdrop.js einbindet und Zugriff auf transparentpixel.gif hat. Die vorliegende Version funktioniert sowohl unter Netscape 4 und MIE sowie auch unter neueren NetscapeVersionen.
- Downlade dragdrop.zip [26.11.2002] (Autor Walter Zorn) von unserem Server.
In dragdrop.zip befinden sich die benötigten Dateien dragdrop.js (v2.71) und transparentpixel.gif.
Dem interessierten Leser wird empfohlen, auf der Seite Drag & Drop für Bilder und Layer die jeweils neueste Version von dragdrop.js zu inspizieren.
Objekte in die richtige Reihenfolge bringenNeue Aufgaben konstruieren
Kanzler der BRD einordnen
Musikinstrumente in Klassen einordnen
Ländernamen den Gebieten zuordnen
Länder zusammensetzen
Anordnung von Begriffen in eine Begriffshierarchie
Gemeinsamkeiten und Oberbegriffe finden
Junktor, Bedeutung und Symbol richtig zuordnen
Aus vorgegebenen Begriffen eine Tabelle konstruieren
Um neue Aufgaben zu konstruieren, lädt man die Datei dragdropschablone.htm in einen Editor, speichert sie unter einem neuen Namen ab (z.B. dragdropversuch.htm) und nimmt an der neuen Datei entsprechende Änderungen vor. Im gleichen Verzeichnis wie die neue Datei (dragdropversuch.htm) sollten sich das Script dragdrop.js sowie die die Grafikdatei transparentpixel.gif befinden.Auskommentieren nicht benötigter Layer
Mit Hilfe der Datei dragdropschablone.htm kann man recht bequem Aufgaben mit bis zu 20 Layer (-hier verschiebbare Bereiche) konstruieren. Um die Datei für die eigenen Bedürfnisse anzupassen, sind einige Modifikationen notwendig:
Layer, die man nicht benötigt, werden auskommentiert ( /* hier kommentar */)
Beispiel:Beschränkung der Dragfähigkeit auf die benötigten Layer (Bilder)
/*document.writeln ('<div id="MeinLayer8">acht</div>');
document.writeln ('<div id="MeinLayer9">neun</div>');
............................................................................................;
document.writeln ('<div id="MeinLayer20">zwanzig</div>');*/bedeutet: Da man nur 7 Layer benötigt, werden die Layer 8 bis 20 auskommentiert.
Statt Auskommentieren kann man die Passagen natürlich auch löschen.
Man entfernt die Namen der nicht benötigten Layer.Bestimmung des Layerinhalts
Im unteren Beispiel wurden die Namen MeinLayer8 bis MeinLayer20 entfernt.SET_DRAGGABLE(CURSOR_MOVE, NO_ALT, "MeinLayer1","MeinLayer2","MeinLayer3","MeinLayer4","MeinLayer5","MeinLayer6","MeinLayer7");Sonderfall Bilder: Statt des Layernamens wird der Bildname eingegeben. Befindet sich in der Datei zum Beispiel der html-code <img src="bildchen.gif" name="EinBildchen" width="100" height="50"> und soll dieses Bild drag&drop-fähig gemacht werden, so gibt man "EinBildchen" ein. Es können Layernamen und Bildnamen in beliebiger Reihenfolge eingegeben werden.
Man ändert einfach die Texte (bzw. den HTML-Code) der entsprechenden Layer.weitere Änderungen
Beispiel: document.writeln ('<div id="MeinLayer1"><b>Neuer Inhalt</b></div>');
bedeutet: im ersten verschiebbaren Bereich steht jetzt in Fettdruck der Text "Neuer Inhalt"
Sonderfall Bilder: Bilder können innerhalb von Layern, aber auch ohne Layer irgendwo in der Datei untergebracht werden. Je nach Gusto muss dann in der Funktion SET_DRAGGABLE ein Layername oder ein Bildname angegeben werden.
Das Aussehen und die Anfangspositionierung der Layer können in den Stylesheets entsprechend eigenen Wünschen angepasst werden.Abschließende Bemerkungen
Mittlerweile hat Walter Zorn sein Skript weiter ausgebaut. Sein neues Skript wz_dragdrop.js (siehe:Drag & Drop für Bilder und Layer) bietet eine Reihe interessanter Features, die relativ einfach zu implementieren sind: Z. B. Bilder verdecken und wieder sichtbar machen, Bilder vervielfältigen, Bildgröße und Bildposition verändern (siehe genaueres unter: http://www.walterzorn.de/dragdrop/commands.htm ). Nachfolgend das oben genanntes Beispiel Länder zusammensetzen erweitert um eine Hilfestellung durch die Option auf die korrekte Positionierung einzelner Länder.
Wenngleich Drag&Drop im Prinzip die Konstruktion kreativer und anspruchsvoller Lernaufgaben zulässt, welche die Eigenaktivität und selbständige Konstruktion des Wissens in besonderem Maße fördern könnten, ist die Erstellung ausgereifter Aufgaben aufwendig und ihre Anwendung nicht ganz unproblematisch. So ist etwa dafür Sorge zu leisten, daß das Browserfenster eine hinreichende Größe aufweist und während der Bearbeitung die Bildschirmgröße möglichst nicht verändert wird.