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.

Anwendungsbeispiele[Bearbeiten]

Zuordnungsquiz[Bearbeiten]

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)

Landkarten-Quiz[Bearbeiten]

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.

Weblinks[Bearbeiten]