Ergebnis 1 bis 11 von 11
Like Tree2Likes
  • 1 Post By sawyer
  • 1 Post By kkapsner

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

  1. #1
    sawyer ist offline Grünschnabel
    registriert
    31-10-2014
    Beiträge
    7

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

    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.
    Geändert von sawyer (08-01-2015 um 20:01 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.683

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

    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...

  3. #3
    sawyer ist offline Grünschnabel
    registriert
    31-10-2014
    Beiträge
    7

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

    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.
    Geändert von sawyer (08-01-2015 um 19:54 Uhr)

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.637

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

    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.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  5. #5
    sawyer ist offline Grünschnabel
    registriert
    31-10-2014
    Beiträge
    7

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

    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?
    Geändert von sawyer (08-01-2015 um 19:59 Uhr)
    mikdoe likes this.

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.683

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

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

    Zwei davon hast du schon selbst erkannst:
    Zitat Zitat von sawyer Beitrag anzeigen
    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-Code:
    <!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">&nbsp;</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...
    mikdoe likes this.

  7. #7
    sawyer ist offline Grünschnabel
    registriert
    31-10-2014
    Beiträge
    7

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

    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?
    Geändert von sawyer (08-01-2015 um 19:58 Uhr)

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.683

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

    Zitat Zitat von sawyer Beitrag anzeigen
    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.

    Zitat Zitat von sawyer Beitrag anzeigen
    Kann ich im append.Child(); mein Antworten-Array angeben?
    Ja.

    Zitat Zitat von sawyer Beitrag anzeigen
    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">&nbsp;</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>

  9. #9
    sawyer ist offline Grünschnabel
    registriert
    31-10-2014
    Beiträge
    7

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

    Danke, melde mich noch
    Geändert von sawyer (08-01-2015 um 20:11 Uhr)

  10. #10
    sawyer ist offline Grünschnabel
    registriert
    31-10-2014
    Beiträge
    7

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

    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?
    Geändert von sawyer (08-01-2015 um 20:11 Uhr)

  11. #11
    sawyer ist offline Grünschnabel
    registriert
    31-10-2014
    Beiträge
    7

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

    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?
    Geändert von sawyer (08-01-2015 um 19:50 Uhr)

Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 14-12-2009, 19:48
  2. anordnung von elementen
    Von berni.walzl im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 08-09-2008, 20:00
  3. Multiple Choice Test - erstellen
    Von Irrtus im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 27-03-2008, 17:46
  4. Antworten: 2
    Letzter Beitrag: 11-11-2002, 18:33

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •