JavaScript/Anwendung und Praxis/Drag and Drop-Quiz

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der HTML5-Drag & Drop-API können mit wenigen Zeilen Code Elemente mit Anzeigegeräten wie der Maus selektieren, verschieben und dann woanders wieder ablegen.

In diesem Tutorial sollen in einem Quiz Elemente an die richtige Stelle verschoben werden. Das Skript überprüft dann, ob der abgelegte Ort der passende ist und gibt dann eine Rückmeldung aus.

Inhaltsverzeichnis

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Zuordnungsquiz

In diesem Quiz sollen Begriffe den richtigen Kategorien zugeordnet werden. Wenn alle Begriffe gezogen und abgelegt wurden, wertet das Skript die Erfolgsquote aus.

ToDo (weitere ToDos)

Beispiel muss erstellt werden.--Matthias Scharwies (Diskussion) 13:44, 28. Aug. 2016 (CEST)

[Bearbeiten] Landkarten-Quiz

In diesem Quiz sollen die Namen der einzelnen Bundesstaaten Australiens an die richtige Stelle einer SVG-Karte zugeordnet werden. Da Drag & Drop bei SVG-Elementen nicht funktioniert, werden über die SVG- Elemente unsichtbare divs als Dropzonen realisiert.

ToDo (weitere ToDos)

Beispiel muss erstellt werden.--Matthias Scharwies (Diskussion) 13:44, 28. Aug. 2016 (CEST)

Eleganter wäre eine komplette Umsetzung in SVG.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML