Multiple Choice Quiz - Scripte, Animationen, Templates und Tipps für WebsiteX5 -

Tag 42
09.02.2025
C
Summe aller Downloads seit Januar 2020: 132305 [Stand: 11.02.2025 - 14:00 h]
 •  Tag 42
Direkt zum Seiteninhalt

Multiple Choice Quiz

Themenseiten
Ein einfaches Multiple Choice Quiz
Ein Script, bestehend aus HTML, CSS und Javascript, in einer einzigen Datei. Somit auch geeignet, als einzelne Seite, nicht nur in einer Website, sondern auch nur auf einem PC zu nutzen. Sie könne so, diese Datei auch per eMail weitergeben um so z.B. ein Training für Schüler anbieten zu können. Die Anzahl an Fragen und Themengebieten sind in dieser Datei eigentlich unbegrenzt. Ist das Multiple Choice Quiz komplett ausgefüllt, werden die Lösungen angezeigt und für die Auswertung werden für jedes Themengebiet die Gesamtheit der Richtig beantworteten Fragen prozentual angegeben.
Man kann dieses Quiz bzw. den Test anschließend erneut starten. Gerade Kinder können sich leicht die Reihenfolge der möglichen Antworten merken, deshalb stehen die Antworten nicht mehr in der gleichen Reihenfolge wie beim ersten Durchgang.
Die HTML-Seite, die Sie sich hier herunterladen können, ist entsprechend auskommentiert. Zuerst kommt der CSS Teil, gefolgt von dem Javascript. In diesem Script finden Sie ab der Zeile 296 beginnend, den Bereich für die Fragen und Antworten. Ich habe in der Download-Datei nur zwei Themenbereiche mit jeweils einer Frage und jeweils vier möglichen Antworten vorbereitet. Sie können immer ein Scriptteil kopieren und anschließend mit einer neuen Frage und vier Antworten wieder einfügen. Hier der Abschnitt, der für eine Frage und vier mögliche Antworten zuständig ist:
294    //  #####   Ab hier können Sie beliebig viele eigene Fragen und Antworten einfügen   #####
295
296 { category: 'THEMENGEBIET 1',             // Themengebiet der folgenden Frage
297 question: 'HIER IHRE ERSTE FRAGE',   // Diese Frage wird gestellt
298 solution: 'DIE RICHTIGE ANTWORT',   // Die richtige Antwort
299
300  falses: [                                                   // Die falschen Antworten
301 'FALSCHE ANTWORT 1',
302 'FALSCHE ANTWORT 2',
303 'FALSCHE ANTWORT 3'
304 ],
305
306 explanation: 'HIER EINE ERKLÄRUNG ZUR ANTWORT'         // Die Erklärung - die richtige Antwort umschreiben
307 },
308
309 //  #######   Ende der ersten Frage  -  jetzt folgt die nächste Frage u.s.w.  #######
Sie ersetzen die in GROSSBUCHSTABEN dargestellten TEXTE durch Ihre eigenen Texte wie z.B. unter category: 'THEMENGEBIET 1', das Themengebiet category: 'Geografie', usw.
Sie können so ohne weiteres vier bis fünf Themengebiete mit jeweils mindestens vier Fragen zusammenstellen. Im folgenden Beispiel habe ich vier Themengebiete mit jeweils vier sehr einfachen Fragen zum ausprobieren zusammengestellt. Sind alle 16 Fragen beantwortet, erhalten Sie die Auswertung (folgend 3 kleine Screenshots).

Hier können Sie ein Multiple Choice Quiz ausprobieren. Klicken Sie einfach auf den Button "Das Quiz starten":
Sie können sich eine Vorlage für ein solches Multiple Choice Quiz, wie bereits weiter oben angekündigt, hier herunterladen.
Quellcode: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Spiele/Multiple-Choice-Quiz - wurde von mir überarbeitet.
Und nun viel Spaß mit dem Script, dass Sie entweder in einer neuen Seite oder Tab oder innerhalb Ihrer Website mittels iframe einbinden. Ein direktes einfügen des Scriptes im Inklusiv-Objekt HTML-Code kann zu Störungen des vorhandenen Styles Ihrer Website führen - als iframe allerdings problemlos. Zum Beispiel:

<iframe src="https://www.ihr-domainname.de/quiz/quiz_1.html" style="border:0px #ffffff none;color:#FFFFFF;" name="quiz_1" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="600" width="600px" allowfullscreen></iframe>


Quellenangabe : Quellcode
https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Spiele/Multiple-Choice-Quiz

Erstellt 12.01.2025
Revision 00 von 12.01.2025 - Seitenerstellung und Freigabe.
website security
Letzte Aktualisierung: 09.02.2025
internet-abc.de   /
für Kinder, Lehrkräfte und Eltern
Zurück zum Seiteninhalt