Zufällige Anordnung der Antwortmöglichkeiten bei einem Multiple-Choice Quiz

sawyer · 31. Okt. 2014

Hallo,

ich habe ein Multiple-Choice Quiz erstellt das fürs erste einmal ganz gut funktioniert. Nun würde ich es gerne um einen Schritt erweitern: Zufällige Auswahl von Fragen

Ich möchte es so einfach wie möglich halten. Wenn jemand einfache Lösungswege kennt, lese ich mir gern diesbezüglich Vorschläge durch.

kkapsner · 31. Okt. 2014

Mit der HTML-Struktur, die du bis jetzt hast, wird es eher schwierig drei zufällige Fragen auszuwählen. Ich würde ja die Fragen jeweils in ein <div class="frage"> stecken und dann im JS zwei zufällige daraus ausblenden.

Die Antworten zu misches ist auch einfacher, wenn du die in ein <div class="antworten"> steckst. Dann kannst du durch die Antworten-divs durchiterieren, dir über .getElementsByTagName("input") die Inputs holen und dann zufällig im DOM einhängen (Also die HTMLCollection in ein Array umwandeln, das man dann mischt und dann von vorne nach hinten in das Elternelement per .appendChild() einhängen).

Für alle beide Aufgaben musst du wissen, wie man ein Array mischt. Schau' dir dazu die Funktion array.shuffle in http://kkjs.kkapsner.de/modules/kkjs.random.js an.

PS: deinem HTML fehlt eine DocType.
PPS: Warum hast du da ein <form>, das du nie benutzt?
PPPS: Dein JS kann man verbessern. So haben HTML-Kommentare da nichts verloren (du willst doch nicht den Mosaic noch unterstützen) und man kann Rückgabewerte von Funktionen auch zwischenspeichern...

sawyer · 01. Nov. 2014

Vielen Dank für den Input. Ich habe jetzt Schritt für Schritt versucht die Inputs einzubauen und mich dem ganzen anzunähern. Ich finde die Ideen gut, auch wenn ich mir zugegeben bei der Umsetzung schwer dabei tue, deswegen auch mein weiterer Post.

mikdoe · 05. Nov. 2014

Kannst du die Fragen etwas präziser formulieren (lieber viele kurze als wenig langen Text), damit man auch darauf antworten kann, ohne das alles nachzubauen? Oder machst ein JSFiddle daraus. Wer hier antwortet hat manchmal nicht soviel Zeit, das alles lokal nach- und aufzubauen, um antworten zu können.

sawyer · 05. Nov. 2014

Wie kann ich die Funktion zum Mischen gleich beim Laden der Seite starten? Soll ich dafür <body onLoad="..."> benutzen? Wenn ja, wie binde ich das in meinem Code ein?

kkapsner · 06. Nov. 2014

Dein Ansatz war nicht schlecht. Du hast nur ein paar kleine Fehler gemacht.

Zwei davon hast du schon selbst erkannst:

sawyer schrieb:
Wie kann ich die Funktion zum Mischen gleich beim Laden der Seite starten? Soll ich dafür <body onLoad="..."> benutzen? Wenn ja, wie binde ich das in meinem Code ein?
Stimmt diese Anweisung, oder muss fr_arr ein Array in meinem Fall sein?

Du kannst natürlich erst auf die Objekte zugreifen, wenn sie auch im DOM vorhanden sind. window.onload ist da ein Weg - oder ein anderer ist, einfach das <script> direkt an das Ende des <body>s zu legen.
Und fr_arr muss ein Array sein, da du in einer HTMLCollection (was du von document.getElementsByClassName() bekommst) nicht die Reihenfolge verändern kannst.

Als drittes kannst du die Funktion so nicht direkt übernehmen, da weitere Teile das random-Modules innerhalb verwendet werden (random.integer.inRange()).

Insgesamt könnte das dann so aussehen:

HTML:

<!DOCTYPE html>
<html>
<head><title>Quiz</title>
 
</head><body>
    <div class="frage">
    Frage 1:<br>
        <div class="antwort"><input type="checkbox" name="falsch"> Falsche Antwort<br/></div>
        <div class="antwort"><input type="checkbox" name="falsch"> Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig"> Richtige Antwort<br></div>
        <div class="antwort"> <input type="checkbox" name="richtig"> Richtige Antwort<br></div>
        <br>
   </div>
    
   <div class="frage">
    Frage 2:<br>
        <div class="antwort"><input type="checkbox" name="falsch"> Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig"> Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch"> Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig"> Richtige Antwort<br></div>
        <br>
    </div>

   <div class="frage">
    Frage 3:<br>
        <div class="antwort"><input type="checkbox" name="richtig"> Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig"> Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch"> Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch"> Falsche Antwort<br></div>
        <br>
    </div>
    
    <div class="frage">
    Frage 4:<br>
        <div class="antwort"><input type="checkbox" name="richtig"> Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig"> Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch"> Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch"> Falsche Antwort<br></div>
        <br>
    </div>
    
    <div class="frage">
    Frage 5:<br>
        <div class="antwort"><input type="checkbox" name="richtig"> Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig"> Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch"> Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch"> Falsche Antwort<br></div>
    <br>
    </div>

	<input type="button" value="Auswerten!" onclick="auswerten(this)">

 
	<div id="ausgabe"> </div>
	
	<script>
	function mixArray(fr_arr){
		for (var i = fr_arr.length; i--;){
			var sIndex = Math.floor(Math.random() * (i + 1));
			var h = fr_arr[i];
			fr_arr[i] = fr_arr[sIndex];
			fr_arr[sIndex] = h;
		}
		return fr_arr;
	}
	var fr_arr = [].slice.call(document.getElementsByClassName('frage'));
	mixArray(fr_arr);
	for(var i = 0; i < 2; i++){
		fr_arr[i].style.display = "none";
	}

	function auswerten(button){
		button.disabled = true;
		var punkte = 0;
		for (i=0; obj = document.getElementsByName('richtig')[i]; i++){
			if (obj.checked) punkte++;
		}

		for (i=0; obj = document.getElementsByName('falsch')[i]; i++){
			if (obj.checked) punkte--;
		}	

		document.getElementById('ausgabe').firstChild.data =
			'Du hast '+ punkte +' von '+ (pmax = document.getElementsByName('richtig').length) +
			' möglichen Punkten erreicht. Das sind '+ Math.round(punkte*100/pmax) +' Prozent.';
	}

	</script>
</body>
</html>

- - - Aktualisiert - - -

PS: hab' das <form> mal entfernt...

- - - Aktualisiert - - -

PPS: Die Punktezählung musst du dann natürlich anders machen...

sawyer · 07. Nov. 2014

Kann es sein, dass ich für dieses Vorhaben die 4 Antwortmöglichkeiten der jeweiligen Fragen in mehrere DIVs packen muss: Frage 1 -> <div class="antwort1">, Frage 2 -> <div class="antwort2">, Frage 3 -> <div class="antwort3">, etc. ?
Kann ich im append.Child(); mein Antworten-Array angeben?
Ist es eigentlich überflüssig, dass ich eine zweite Funktion für das Mischen eines Arrays geschrieben habe? Hätte eine Funktion zum Mischen (für Fragen und Antworten) gereicht?

kkapsner · 13. Nov. 2014

sawyer schrieb:
Kann es sein, dass ich für dieses Vorhaben die 4 Antwortmöglichkeiten der jeweiligen Fragen in mehrere DIVs packen muss: Frage 1 -> <div class="antwort1">, Frage 2 -> <div class="antwort2">, Frage 3 -> <div class="antwort3">, etc. ?

Nein, das musst du nicht.

sawyer schrieb:
Kann ich im append.Child(); mein Antworten-Array angeben?

Ja.

sawyer schrieb:
Ist es eigentlich überflüssig, dass ich eine zweite Funktion für das Mischen eines Arrays geschrieben habe? Hätte eine Funktion zum Mischen (für Fragen und Antworten) gereicht?

Ja und Ja.

Code:

<!DOCTYPE html>
<html>
<head><title>Quiz</title>
 
</head><body>
    <div class="frage">
    Frage 1:<br>
        <div class="antwort"><input type="checkbox" name="falsch">1 Falsche Antwort<br/></div>
        <div class="antwort"><input type="checkbox" name="falsch">2 Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig">3 Richtige Antwort<br></div>
        <div class="antwort"> <input type="checkbox" name="richtig">4 Richtige Antwort<br></div>
        <br>
   </div>
    
   <div class="frage">
    Frage 2:<br>
        <div class="antwort"><input type="checkbox" name="falsch">1 Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig">2 Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch">3 Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig">4 Richtige Antwort<br></div>
        <br>
    </div>

   <div class="frage">
    Frage 3:<br>
        <div class="antwort"><input type="checkbox" name="richtig">1 Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig">2 Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch">3 Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch">4 Falsche Antwort<br></div>
        <br>
    </div>
    
    <div class="frage">
    Frage 4:<br>
        <div class="antwort"><input type="checkbox" name="richtig">1 Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig">2 Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch">3 Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch">4 Falsche Antwort<br></div>
        <br>
    </div>
    
    <div class="frage">
    Frage 5:<br>
        <div class="antwort"><input type="checkbox" name="richtig">1 Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="richtig">2 Richtige Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch">3 Falsche Antwort<br></div>
        <div class="antwort"><input type="checkbox" name="falsch">4 Falsche Antwort<br></div>
    <br>
    </div>

	<input type="button" value="Auswerten!" onclick="auswerten(this)">

 
	<div id="ausgabe"> </div>
	
	<script>
	
	//Fragen mischen und ausblenden
	function mixArray(fr_arr){
		for (var i = fr_arr.length; i--;){
			var sIndex = Math.floor(Math.random() * (i + 1));
			var h = fr_arr[i];
			fr_arr[i] = fr_arr[sIndex];
			fr_arr[sIndex] = h;
		}
		return fr_arr;
	}
	var fr_arr = [].slice.call(document.getElementsByClassName('frage'));
	mixArray(fr_arr);
	for(var i = 0; i < 2; i += 1){
		fr_arr[i].style.display = "none";
	}
	for (i; i < fr_arr.length; i += 1){
		var ant_arr = [].slice.call(fr_arr[i].getElementsByClassName('antwort'));
		mixArray(ant_arr);
		ant_arr.forEach(function(ant){
			fr_arr[i].appendChild(ant);
		});
	}
	
	
	

	function auswerten(button){
		button.disabled = true;
		var punkte = 0;
		for (i=0; obj = document.getElementsByName('richtig')[i]; i++){
			if (obj.checked) punkte++;
		}

		for (i=0; obj = document.getElementsByName('falsch')[i]; i++){
			if (obj.checked) punkte--;
		}	

		document.getElementById('ausgabe').firstChild.data =
			'Du hast '+ punkte +' von '+ (pmax = document.getElementsByName('richtig').length) +
			' möglichen Punkten erreicht. Das sind '+ Math.round(punkte*100/pmax) +' Prozent.';
	}

	</script>
</body>
</html>

sawyer · 02. Dez. 2014

Danke, melde mich noch

sawyer · 03. Dez. 2014

Ist es korrekt, mittels document.getElementsByClassName('frage').style.display == "true" nach den am Schirm zufällig ausgegebenen 3 Fragen abzufragen, und dann in die Variable pmax mittels .length die Anzahl der richtigen Antwortmöglichkeiten von diesen 3 Fragen abzuspeichern?

sawyer · 21. Dez. 2014

Ist es korrekt, mittels document.getElementsByClassName('frage').style.display == "true" nach den am Schirm zufällig ausgegebenen 3 Fragen abzufragen, und dann in die Variable pmax mittels .length die Anzahl der richtigen Antwortmöglichkeiten von diesen 3 Fragen abzuspeichern?

Zufällige Anordnung der Antwortmöglichkeiten bei einem Multiple-Choice Quiz

sawyer

New member

kkapsner

Super Moderator

sawyer

New member

mikdoe

Moderator

sawyer

New member

kkapsner

Super Moderator

sawyer

New member

kkapsner

Super Moderator

sawyer

New member

sawyer

New member

sawyer

New member