Frage zum Wiki-Artikel „Multiple-Choice-Quiz“

[AC]

Hallo zusammen, ich möchte gerne mehrere Quiz Botton erstellen. Bei mir erscheint nur zweimal derselbe Botton mit der Verlinkung zum selben Quiz.

Kann mir jemand weiterhelfen?

[Gunnar Bittersmann]

@@AC

Kann mir jemand weiterhelfen?

Nein.

Und diese Antwort enthält jetzt mehr notwendige Informationen als es deine Frage tat.

🖖 Живіть довго і процвітайте

[AC]

Sorry, ich habe das quiz 2016 nachgebaut und angepasst. Aber wenn ich versuche auf ein zweites quiz zu verweisen wird immer da zuletzt verlinkte quiz aufgerufen.Hier der HTML code:

<h1><b><p align="center">Quiz 2023</p></b></h1>
 <link rel="stylesheet" type="text/css" href="quiz.css" media="screen" />
 <script id= "Quiz 1" type="text/javascript" src="quiz1.js"></script>
 <script id= "Quiz 2" type="text/javascript" src="quiz2.js"></script>

<main id="main">
	<form id="quiz" action="">
		<p id="intro", align="center">Quiz"
		
	</form>
	
</main>

[Robert B.]

Hallo AC,

ich habe in deinem Beitrag den HTML-Beispielcode entsprechend ausgezeichnet.

Viele Grüße
Robert

[AC]

Hallo AC,

ich habe in deinem Beitrag den HTML-Beispielcode entsprechend ausgezeichnet.

Viele Grüße
Robert

Danke

[Robert B.]

Moin AC,

Sorry, ich habe das quiz 2016 nachgebaut und angepasst. Aber wenn ich versuche auf ein zweites quiz zu verweisen wird immer da zuletzt verlinkte quiz aufgerufen.Hier der HTML code:

<h1><b><p align="center">Quiz 2023</p></b></h1>
 <link rel="stylesheet" type="text/css" href="quiz.css" media="screen" />
 <script id= "Quiz 1" type="text/javascript" src="quiz1.js"></script>
 <script id= "Quiz 2" type="text/javascript" src="quiz2.js"></script>

<main id="main">
	<form id="quiz" action="">
		<p id="intro", align="center">Quiz"
		
	</form>
	
</main>

Der Code ist

• ohne Kenntnis des CSS- und JavaScript-Codes unvollständig
  • Was steht in den Dateien?
  • Das form enthält weder Eingabefelder, noch Buttons oder Actions;
• fehlerhaft:
  • p gehört nicht in h1, das b ist unnötig
  • link und script gehören in den head, h1 und main in den body

Viele Grüße
Robert

[Matthias Scharwies]

Hallo AC,

Sorry, ich habe das quiz 2016 nachgebaut und angepasst. Aber wenn ich versuche auf ein zweites quiz zu verweisen wird immer da zuletzt verlinkte quiz aufgerufen.Hier der HTML code:

• ohne Kenntnis des CSS- und JavaScript-Codes unvollständig
  • Was steht in den Dateien?
  • Das form enthält weder Eingabefelder, noch Buttons oder Actions;
• fehlerhaft:
  • p gehört nicht in h1, das b ist unnötig
  • link und script gehören in den head, h1 und main in den body

Ganz grundsätzlich:

Dieses Script war unser Weihnachts-Quiz 2016.

Aus diesem Grund haben wir ( @Felix Riesterer und ich) es in ein HTML-Dokument gepackt. Damals war uns wichtig, den Auswahlmechanismus mit HTML zu realisieren und auch zu erklären.

Das Script selbst ist nur im letzen Beispiel integriert, aber leider nicht weiter erklärt.

Ich habe den Artikel im Wiki um diesen Text ergänzt:

Wenn Sie mehrere Quizze auf einer Seite verwenden wollen, müssen Sie zunächst das eigentliche Script und die Daten (Fragen und Antworten) in zwei JavaScript-Dateien aufspalten und das Script so umschreiben, dass bei einem Aufruf das dazugehörende Datenpaket mit aufgerufen wird.

Eventuell hilft dir das R-Quiz von @Felix Riesterer :

Der Autor dieses Scripts Felix Riesterer ist seit 2005 bei SELFHTML aktiv. Er hat unter anderem ein JavaScript-Framework für interaktive Lernaufgaben geschrieben, dass unter einer GNU Lesser General Public License (LGPL) verfügbar ist.

Mit diesem können Sie mit einfachsten Mitteln diverse Quizze auf HTML-Seiten erstellen.

• https://www.felix-riesterer.de/main/seiten/rquiz.html

Herzliche Grüße

Matthias Scharwies

[AC]

Hallo Robert,

hier der java code den ich versuche mit anderen Fragen und einem neuen Button aufzurufen.

// ... Polyfill für Array.from entfernt - Rolf B

'use strict';
var myQuiz = {
	container: null,
	// helper function
	createElement: function (o) {
		var el, p;
		if (o && (o.tag || o.tagName)) {
			el = document.createElement(o.tag || o.tagName);
			if (o.text || o.txt) {
				var text = (o.text || o.txt)
				el.innerHTML = text;
			}
			for (p in o) {
				if (!p.match(/^t(e)?xt|tag(name)?$/i)) {
					el[p] = o[p];
				}
			}
		}
		return el;
	},
	// user interface for a quiz question
	createOptions: function () {
		var t = this,
			options = [],
			ul = document.createElement("ul");
		t.emptyContainer();
		t.intoContainer(t.createElement({
			tag: "h2",
			text: "(" + t.currentQuestion.category + ") " + t.currentQuestion.question
		}));
		t.intoContainer(ul);
		// create options
		options.push(t.currentQuestion.solution);
		t.currentQuestion.falses.forEach(function (s) {
			options.push(s);
		});
		
// suffel
		
		t.shuffleArray(options);
		options.forEach(function (s, i) {
			var li = document.createElement("li"),
				label = t.createElement({
					htmlFor: "a" + t.questions.length + "_" + i,
					tag: "label",
					text: s
				}),
				radio = t.createElement({
					id: "a" + t.questions.length + "_" + i,
					name: "answer",
					tag: "input",
					type: "radio",
					tabindex: "0",
					value: s
				});
			ul.appendChild(li);
			li.appendChild(radio);
			li.appendChild(label);
		});
		// Hinweis für Tastatur-User
		t.intoContainer(t.createElement({
			tag: "button",
			text: "confirm choice",
			type: "submit"
		}));
	},
	currentChoices: [],
	currentQuestion: null,
	// data could be filled from an external source (JSON)

	data: [{
		category: 'Überschrift',
		question:'Frage ',
		solution: 'richtig',
		falses: ['falsch ',
			'falsch',
			'falsch'],
		picture:'test',}, 
		],
	emptyContainer: function () {
		var t = this;
		while (t.container.firstChild) {
			t.container.removeChild(t.container.firstChild);
		}
	},
	handleInput: function () {
		var t = this, // t points to myQuiz
			// create real array so we can use forEach
			inputs = Array.from(t.container.getElementsByTagName("input")),
			selectedSolution = "";
		// determine selection
		inputs.forEach(function (o) {
			if (o.checked) {
				selectedSolution = o.value;
			}
		});
		// process selected answer
		if (selectedSolution && t.currentQuestion) {
			t.currentChoices.push({
				a: selectedSolution,
				q: t.currentQuestion
			});
			t.play();
		}
		// accept start button
		if (!t.currentQuestion) {
			t.play();
		}
	},
	init: function () {
		var t = this;
		// here goes any code for loading data from an external source
		t.container = document.getElementById("quiz");
		if (t.data.length && t.container) {
			// use anonymous functions so in handleInput
			// "this" can point to myQuiz
			t.container.addEventListener("submit", function (ev) {
				t.handleInput();
				ev.stopPropagation();
				ev.preventDefault();
				return false;
			});
			t.container.addEventListener("mouseup", function (ev) {
				// we want to only support clicks on start buttons...
				var go = ev.target.tagName.match(/^button$/i);
				// ... and labels for radio buttons when in a game
				if (ev.target.tagName.match(/^label$/i) && t.currentQuestion) {
					go = true;
				}
				if (go) {
					window.setTimeout(function () {
						t.handleInput();
					}, 50);
					ev.stopPropagation();
					ev.preventDefault();
					return false;
				}
			});
			t.start();
		}
	},
	intoContainer: function (el, parentType) {
		var t = this,
			parent;
		if (!el) {
			return;
		}
		if (parentType) {
			parent = document.createElement(parentType);
			parent.appendChild(el);
		} else {
			parent = el;
		}
		t.container.appendChild(parent);
		return parent;
	},
	// ask next question or end quiz if none are left
	play: function () {
		var t = this,
			ol;
		// game over?
		if (!t.questions.length) {
			t.showResults();
			// offer restart
			window.setTimeout(function () {
				t.start();
			}, 50);
			return;
		}
		t.currentQuestion = t.questions.shift();
		t.createOptions();
	},
	// list with remaining quiz question objects
	questions: [],
	// list original questions and given answers and elaborate on solutions
	showResults: function () {
		var cat, ol, s, scores = {},
			t = this,
			tab, thead, tbody, tr;
		t.emptyContainer();
		// show message
		t.intoContainer(t.createElement({
			tag: "p",
			text: "Sie haben alle Fragen des Quiz beantwortet. Hier die Auswertung Ihrer Antworten:"
		}));
		// list questions and given answers
		ol = t.intoContainer(t.createElement({
			id: "result",
			tag: "ol"
		}));
		t.currentChoices.forEach(function (o) {
			var p, li = ol.appendChild(t.createElement({
				tag: "li"
			}));
			// list original question
			li.appendChild(t.createElement({
				className: "question",
				tag: "p",
				text: "(" + o.q.category + ") " + o.q.question
			}));
			// list given answer
			p = li.appendChild(t.createElement({
				tag: "p",
				text: "Ihre Antwort: "
			}));
			p.appendChild(t.createElement({
				className: (o.q.solution == o.a ? "correct" : "wrong"),
				tag: "em",
				text: o.a
			}));
			// wrong answer?
			if (o.q.solution != o.a) {
				p = li.appendChild(t.createElement({
					tag: "p",
					text: "Die richtige Antwort wäre gewesen: "
				}));
				p.appendChild(t.createElement({
					tag: "em",
					text: o.q.solution
				}));
			}
			// elaborate on solution?
			if (o.q.explanation) {
				p = li.appendChild(t.createElement({
					tag: "p",
					text: "Erläuterung: "
				}));
				p.appendChild(t.createElement({
					tag: "em",
					text: o.q.explanation
				}));
			}
		});
		// display a kind of percentual score over the categories
		cat = [];
		t.currentChoices.forEach(function (o) {
			if (!cat.includes(o.q.category)) {
				cat.push(o.q.category);
			}
		});
		cat.sort();
		cat.forEach(function (c) {
			var correct = 0,
				num = 0;
			t.currentChoices.forEach(function (o) {
				if (o.q.category == c) {
					num++;
					if (o.q.solution == o.a) {
						correct++;
					}
				}
			});
			scores[c] = Math.floor(100 * correct / num) + "%";
		});
		tab = t.intoContainer(t.createElement({
			id: "scores",
			tag: "table"
		}));
		tab.appendChild(t.createElement({
			tag: "caption",
			text: "Ergebnis"
		}))
		thead = tab.appendChild(t.createElement({
			tag: "thead"
		}))
		tr = thead.appendChild(t.createElement({
			tag: "tr"
		}))
		for (s in scores) {
			tr.appendChild(t.createElement({
				tag: "th",
				text: s
			}));
		}
		tbody = tab.appendChild(t.createElement({
			tag: "tbody"
		}))
		tr = tbody.appendChild(t.createElement({
			tag: "tr"
		}))
		for (s in scores) {
			tr.appendChild(t.createElement({
				tag: "td",
				text: scores[s]
			}));
		}
		// show message
		t.intoContainer(t.createElement({
			tag: "p",
			text: "Möchten Sie das Quiz erneut starten?"
		}));
	},
	// helper function: shuffle array (adapted from http://javascript.jstruebig.de/javascript/69)
	shuffleArray: function (a) {
		var i = a.length;
		while (i >= 2) {
			var zi = Math.floor(Math.random() * i);
			var t = a[zi];
			a[zi] = a[--i];
			a[i] = t;
		}
		// no return argument since the array has been
		// handed over as a reference and not a copy!
	},
	// start quiz with a start button
	start: function () {
		var t = this;
		// fill list of remaining quiz questions
		t.questions = [];
		t.data.forEach(function (o) {
			t.questions.push(o);
		});
		//t.shuffleArray(t.questions);
		t.currentChoices = [];
		t.currentQuestion = null;
		// install start button
		t.intoContainer(t.createElement({
			className: "startBtn",
			tag: "button",
			text: "Starte quiz !"

		}), "p");
	}
	

	
};
document.addEventListener("DOMContentLoaded", function () {
	myQuiz.init();
});

Auch Versuche die "classe" umzubenennen hatten nur das Ergebni das zweimal derselbe button aufgerufen wurde. Vielen Dank an alle. Hab jetzt schon viel gelernt über html, css und jave ;-)

Code in ~~~ eingeschlossen, Polyfill für Array.from entfernt. Rolf

[Rolf B]

Hallo AC,

das Beispiel, das Du da als Vorlage verwendet hast, ist nicht wirklich für zwei Quizze in einer Seite ausgelegt.

Deswegen funktioniert es auch nicht, einfach den JavaScript-Code zu doppeln. Eigentlich brauchst Du den Code nur einmal, was gedoppelt werden muss, sind die Daten - also die Quizfragen - und der Programmcode muss so angepasst werden, dass man ihm unterschiedliche Fragensets vorlegen kann.

Das Quiz-Objekt, das von dem JavaScript-Code erzeugt wird, enthält eine data Eigenschaft mit den Fragen. Dieses Eigenschaft, und nur diese Eigenschaft, muss für unterschiedliche Quizze unterschiedlich belegt werden. Erst nachdem das geschehen ist, darf myQuiz.init() aufgerufen werden, um das Quiz zu starten. Matthias hat das vor ein paar Tagen auf der Wiki-Seite als Anmerkung notiert.

Hab jetzt schon viel gelernt über html, css und jave ;-)

JavaScript, nicht Java. Dazu hatte Altmeister Cheatah dies zu bemerken...

Viel gelernt - sicher. Aber längst nicht genug, um einen mit funktionaler und objektorientierter Programmierung vollgestopften, schlecht dokumentierten und nicht selbstdokumentierenden Codeklops wie dieses Script verstehen zu können (der auch noch Fehler enthält, wie das "use strict"; hinter dem Array-Polyfill). Der Code ist auch nicht mehr modern, er nimmt noch an vielen Stellen auf Altbrowser Rücksicht, was die Lesbarkeit weiter erschwert.

Und leider hat sich diese Wiki-Seite darauf beschränkt, das Quiz dahinzukübeln. Als Tutorial müsste es den Code Punkt für Punkt erklären. Matthias und ich haben im Moment aber nicht die Ressourcen, das zu verbessern.

Den Array.from Polyfill brauchst Du heutzutage übrigens nicht mehr. Der kann als erstes weg (also alles vor dem "use strict").

Rolf

[Gunnar Bittersmann]

@@Rolf B

Go home, Silbentrennung, you’re drunk.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Go home, Silbentrennung, you’re drunk.

Go home, Silbentrennung, you’re bekifft.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar Bittersmann,

es war einmal eine Zeit, da war ich in einer Ausbildung. Und wir sollten da als Gruppenprojekt ein Programm zum Layouten einer Zeitung programmieren. Mit Spaltensatz und Zeilenumbruch und automatischer Silbentrennung. An einem IBM Großrechner.

Dabei habe ich dann gelernt, dass die Grundregel lautet: stoßen meh-rere Kon-sonan-ten aufeinander, tren-ne vor dem letz-ten Konsonanten. Leider gibt's dann die Ausnahmen wie Zeilenumb-ruch und Silbent-rennung. Und Lachnummern wie Urin-stinkt - und dagegen helfen dann nur noch Wörterbücher.

Da steht dann wohl "übeln" drin, vielleicht für "ver-übeln", was bei "hink-übeln" oder "verd-übeln" leider falsch ist. Im Tweet fehlte wohl der Plural zum Suffix "abend", gut für "Saufabende" oder "Feierabende", so dass er auf den Default zurückgefallen ist.

Word scheint da Neuem gegenüber eher vorsichtig motiviert zu sein, und mit Kübeln kennt es sich aus. Bis auf die letzte Silbentrennung sind alle automatisch (Silbentrennzone 0,1cm und unbegrenzte Strichzahl):

Was "Abende" sind, weiß es offenbar. Aber es trennt sie nicht selbstständig ab, das ging nur manuell. Zum "hin-kübeln" lässt es sich allerdings nur manuell bewegen, und anfangs meine ich, auch mal "Saufa-bende" gesehen habe. Aber vielleicht hat es zwischendurch ins Netz gelinst.

Rolf

[Der Martin]

Hallo Rolf,

Dabei habe ich dann gelernt, dass die Grundregel lautet:

"Setze Silbentrennung nur sehr, sehr sparsam ein."

stoßen meh-rere Kon-sonan-ten aufeinander, tren-ne vor dem letz-ten Konsonanten. Leider gibt's dann die Ausnahmen wie Zeilenumb-ruch und Silbent-rennung. Und Lachnummern wie Urin-stinkt

Das wäre nach deiner zitierten Regel aber Urins-tinkt.

Und wegen all dieser Schwierigkeiten verzichte ich auf automatische Silbentrennung ganz, und auch manuell setze ich nur bei auffallend langen Wörtern bedingte Trennstellen. Und das nur an den Wortfugen von Komposita, eventuell auch mal zwischen Präfix und Wortstamm.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Und wegen all dieser Schwierigkeiten verzichte ich auf automatische Silbentrennung ganz

Und ich werde gleich mal ein Ticket anlegen, weil wir hier auf automatische Silbentrennung verzichtet haben und es blöd aussieht:

und auch manuell setze ich nur bei auffallend langen Wörtern bedingte Trennstellen. Und das nur an den Wortfugen von Komposita, eventuell auch mal zwischen Präfix und Wortstamm.

Ja, das sind die bevorzugten Trennstellen. Vgl. Slides 10 und 11.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Rolf B

Und Lachnummern wie Urin-stinkt - und dagegen helfen dann nur noch Wörterbücher.

Nicht mehr lustig: Inzwischen haben alle Browser den „Urinstinkt“ in ihrem Wörterbuch und trennen nicht mehr Urin-stinkt. Um zu zeigen, wie es früher einmal war, habe ich mit ­ nachgeholfen.

Auch die „Wachstube“ haben sie im Wörterbuch und um da nicht falsch zu trennen, trennen sie lieber gar nicht (wie dann 2 Slides weiter zu sehen ist).

🖖 Живіть довго і процвітайте

[Tabellenkalk]

Hallo,

Word vs. Browser

ich glaub Word hat bzgl. Silbentrennung 2-3 Tage Vorsprung...

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

meins nicht. Das war Office 2016 😉

Rolf

[AC]

Hallo Rolf,

vielen Dank für dein Feedback. Das wird mir sehr weiterhelfen. Ich werde mich weiter mit dem Thema beschäftigen und sehen wie die Lösung nachher aussieht.

Vielen Dank nochmal

AC