zurück zu  Übungsaufgaben stellen mit JavaScript

Drag & Drop-Aufgaben
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 Seite Dort 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. Hier 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.
Einige Aufgabenbeispiele
Objekte in die richtige Reihenfolge bringen
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
Neue Aufgaben 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.
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:
Auskommentieren nicht benötigter Layer
Layer, die man nicht benötigt, werden auskommentiert ( /*  hier kommentar */)
Beispiel:
/*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.

Beschränkung der Dragfähigkeit auf die benötigten Layer (Bilder)
Man entfernt die Namen der nicht benötigten Layer.
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.
Bestimmung des Layerinhalts
Man ändert einfach die Texte (bzw. den HTML-Code) der entsprechenden Layer.
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.
weitere Änderungen
Das Aussehen und die Anfangspositionierung der Layer können in den Stylesheets entsprechend eigenen Wünschen angepasst werden.
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.
Abschließende Bemerkungen
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.

zurück zu  Übungsaufgaben stellen mit JavaScript
created 19.9.2001; last update 3.4.2003; Bernhard Jacobs, b.jacobs@mz.uni-saarland.de