Du willst ein Quiz auf deiner responsive Website? Wir haben für dich ein kleines Drag&Drop-Ratespiel auf Basis von jQuery, PHP, HTML und CSS erstellt. Wie bereits bei der Ultragallery ist das Quiz sehr einfach zu bedienen: alles auf einen PHP-fähigen Webserver laden, die Bilder ersetzen und falls nötig die Einstellungen in der index.php vornehmen.
Hier gehts zum Quiz:
Funktionen
Das Responsive Web Quiz lädt die Bilder im Ordner /bilder in ein Array, das mit der PHP-Funktion shuffle() durchmischt wird. Der Browser lädt dann fünf Fotos aus dem Ordner in draggable div-Container, darunter werden die Dateinamen dieser Bilder erneut durchmischt und als jQuery Dropzones in weiteren div-Containern angezeigt. Der User kann jetzt mittels Mausinteraktion (klicken und halten) die Zuweisungen der Bilder zu den dazugehörigen Dateinamen vornehmen. Wird das Bild richtig zugewiesen, wird der untere Container grün, ist die Zuweisung falsch, wird er rot. Sobald alle Bilder den richtigen Dateinamen zugewiesen sind erscheint eine Nachricht mit der erreichten Punktzahl (Anzahl Versuche bis zum Ziel).
Open Source Download
Das gesamte Projekt steht hier als Download zur Verfügung. Herunterladen, Bilder ersetzen, auf den eigenen Webserver laden und loslegen. Wir freuen uns über Weiterentwicklungen und Code-Snippets aller Art. Viel Spass beim Raten!
