nicht angemeldet
Zufallsreihenfolge von Antwortalternativen bei MC-Fragen
0 
Matthias Apsel
0 0 0 0 0 0 0 0 
Gunnar Bittersmann
0 
MudGuard
Zufallsreihenfolge von Antwortalternativen bei MC-Fragen
Liebe Freunde der gepflegten Internetseitengestaltung!
Ich habe mir vor kurzem eine html-Datei gebastelt, mit der ich MC-Fragen lernen kann. Dazu hat mir der freundliche Herr Gunnar Bittersmann hier https://forum.selfhtml.org/?t=211130&m=1440414 eine Vorlage empfohlen, die ich mir erfolgreich anpassen konnte (anbei gleich noch mal danke!).
Meine Frage ist nun, ob es eine relativ einfache Möglichkeit gibt, eine weitere Funktion zu implementieren, mit der die Antwortalternativen zufällig neu angeordnet werden (Beispieldatei unten).
So in der Form:
Antwortoption1
Antwortoption2
Antwortoption3
Antwortoption4
*Knopfdruck*:
Antwortoption3
Antwortoption2
Antwortoption4
Antwortoption1
Zum Lernen wäre das eine enorme Erleichterung (da man sich dummerweise eher die Reihenfolge als die Antwortoption merkt). Normalerweise wäre das eine Aufgabe, die mir Spaß machen würde, sie einfach durch suchen/tüfteln/verändern hinzubiegen.
Dummerweise steht die Klausur Übermorgen an und für suchen/tüfteln/verändern reicht die Zeit nicht (die Originaldatei umfasst ca. 250 Fragen).
Ein bisschen kenne ich mich ja in der Materie aus, aber insgesamt leider zu wenig. Deshalb meine Hauptfrage, ob dieses Anliegen überhaupt (relativ einfach) möglich ist und wenn ja, ob jemand einen entscheidenden Tipp hat, ob es etwas gibt, was ich mir diesbezüglich anpassen kann.
Vielen Dank und freundliche Grüße,
André
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MC-Fragen</title>
<style>
body { font-family: Verdana;
font-size: 11pt;
margin-left:75px;
counter-reset: Ebene01;
}
p.question:before { content: counter(Ebene01) ") ";
counter-increment: Ebene01; }
.question
{
font-weight: bold;
}
/*
input { margin-bottom: 1em;
}
*/
label
{
display: inline-block;
line-height: 1.5em;
margin-right: 2em;
/*
width: 50em;
*/
}
label::after
{
visibility: hidden;
font-size: 1.0em;
margin-left: 0.5em;
}
#solution:target label::after
{
visibility: visible;
}
:checked + label::after
{
color: red;
content: '✘';
}
[value="true"] + label::after
{
color: lime;
content: '☚';
}
[value="true"]:checked + label::after
{
color: green;
content: '✔';
}
a
{
background: linear-gradient(#f8f8fa, #eeeef0 50%, #e8e8ea 50%, #dddddf);
border-radius: 666em;
box-shadow: 0.1em 0.1em 0.1em #666;
color: inherit;
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
width: 10em;
}
#solution:not(:target) [href="#"],
#solution:target [href="#solution"]
{
display: none;
}
</style>
<script src="http://dabblet.com/code/prefixfree.min.js"></script>
</head>
<body>
<form id="solution">
<p class="question">Frage?</p>
<p>
<input type="radio" name="q101" id="q101a" value="true"/><label for="q101a">Antwortoption1</label><br>
<input type="radio" name="q101" id="q101b" value="false"/><label for="q101b">Antwortoption2</label><br>
<input type="radio" name="q101" id="q101c" value="false"/><label for="q101c">Antwortoption3</label><br>
<input type="radio" name="q101" id="q101d" value="false"/><label for="q101d">Antwortoption4</label><br>
</p>
<hr>
<p class="question">Frage?</p>
<p>
<input type="radio" name="q102" id="q102a" value="false"/><label for="q102a">Antwortoption1</label><br>
<input type="radio" name="q102" id="q102b" value="false"/><label for="q102b">Antwortoption2</label><br>
<input type="radio" name="q102" id="q102c" value="false"/><label for="q102c">Antwortoption3</label><br>
<input type="radio" name="q102" id="q102d" value="true"/><label for="q102d">Antwortoption4</label><br>
</p>
<hr>
<p class="question">Frage?</p>
<p>
<input type="radio" name="q103" id="q103a" value="false"/><label for="q103a">Antwortoption1</label><br>
<input type="radio" name="q103" id="q103b" value="true"/><label for="q103b">Antwortoption2</label><br>
<input type="radio" name="q103" id="q103c" value="false"/><label for="q103c">Antwortoption3</label><br>
<input type="radio" name="q103" id="q103d" value="false"/><label for="q103d">Antwortoption4</label><br>
</p>
<hr>
<p>
<a href="#solution">Auflösung anzeigen</a>
<a href="#">Auflösung verstecken</a>
</p>
</form>
</body>
</html>
-
Om nah hoo pez nyeetz, André!
Meine Frage ist nun, ob es eine relativ einfache Möglichkeit gibt, eine weitere Funktion zu implementieren, mit der die Antwortalternativen zufällig neu angeordnet werden (Beispieldatei unten).
Nein, dies ist mit CSS-Mitteln nicht möglich und würde auch ein völliges Umwerfen der bisherigen Herangehensweise bedeuten.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias!
Nein, dies ist mit CSS-Mitteln nicht möglich und würde auch ein völliges Umwerfen der bisherigen Herangehensweise bedeuten.
Danke Dir! Meinst Du mit Umwerfen wenn es mit CSS geschehen sollte oder auch wenn man JavaScript einsetzen würde?
Viele Grüße,
André
-
Om nah hoo pez nyeetz, André!
Danke Dir! Meinst Du mit Umwerfen wenn es mit CSS geschehen sollte
imho gehts mit CSS nicht
oder auch wenn man JavaScript einsetzen würde?
JS hatte ich nicht im Focus. Da bräuchte man am HTML mMn nichts zu ändern.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
hi,
mein Tipp wäre
a) nutze hidden-fields um die korrekte Antwort dir zu merken, dann brauchst du in der Auswertung nur die 2 Werte vergleichen. Das Zufällige Sortieren kannst du z.b. mit shuffle() angehen.b) um schummeleien zu vermeiden, kannst du dir die korrekten Ergebnisse in $_SESSION merken. Sonnst eigentlich wie bei a)
Ob dir meine Aussage für die kurze Zeit noch reicht, weiß ich nicht, mich jetzte erst in alles einzudenken, war mir aber grade auch zu lange ;)
Gruß Niklas
P.S.: das bezieht sich beides einfach mal auf die Annahme, dass du php dateien hast, die das ganze machen.
-
Hallo Niklas!
Auch Dir herzlichen Dank!
P.S.: das bezieht sich beides einfach mal auf die Annahme, dass du php dateien hast, die das ganze machen.
Öhm, ne. Nix PHP. CSS bisher und evtl. JavaScript.
Viele Grüße,
André
-
-
Hallo!
Meine Frage ist nun, ob es eine relativ einfache Möglichkeit gibt, eine weitere Funktion zu implementieren, mit der die Antwortalternativen zufällig neu angeordnet werden (Beispieldatei unten).
Genau wie Matthias wüsste ich jetzt auch nicht, wie das mit CSS möglich sein sollte.
Was du möchtest ist ja, dass die Elemente mit den Antwortoptionen in ihrer Reihenfolge (zufällig) angeordnet werden.Ich würde das mit einer kleinen Javascript (jQuery) Funktion machen, die von jeder Frage die jeweiligen Antwortoptionen "zufällig" neu sortiert.
Gruß Gunther
-
Hallo Gunther!
Genau wie Matthias wüsste ich jetzt auch nicht, wie das mit CSS möglich sein sollte.
Was du möchtest ist ja, dass die Elemente mit den Antwortoptionen in ihrer Reihenfolge (zufällig) angeordnet werden.Ich würde das mit einer kleinen Javascript (jQuery) Funktion machen, die von jeder Frage die jeweiligen Antwortoptionen "zufällig" neu sortiert.
Danke schon mal für die Antwort. Kann man eine JavaScript-Funktion auf die bisherige CSS-Lösung "draufsatteln"? Sprich, dass die Radiobuttons mit den Labels, so wie ich sie jetzt habe, neu anordnen kann?
Ich habe auch schon ein paar kleine JavaScript-Funktionen umgesetzt, aber dafür fehlt mir jetzt der Aufhänger.
Danke, André
-
Hallo André!
Ich habe auch schon ein paar kleine JavaScript-Funktionen umgesetzt, aber dafür fehlt mir jetzt der Aufhänger.
Vielleicht hilft dir dieses Beispiel weiter ..., oder einer von den JS/jQuery Profis hier im Forum (bis ich eine brauchbare Lösung zusammengefrickelt habe, ist deine Prüfung vorbei - viel Erfolg übrigens!)
Gruß Gunther
-
Hallo Gunther!
Vielleicht hilft dir dieses Beispiel weiter
Sieht sehr interessant aus. Kann ich aber leider nicht anwenden. Ich habe es sogar hinbekommen, dass die Elemente zufällig durcheinander gewürfelt werden -- dann aber ALLE. Also stehen die Fragen nicht mehr bei den Antworten... ;)
..., oder einer von den JS/jQuery Profis hier im Forum (bis ich eine brauchbare Lösung zusammengefrickelt habe, ist deine Prüfung vorbei
So ähnlich wäre das bei mir auch!
- viel Erfolg übrigens!)
Danke, sehr freundlich!
Viele Grüße,
André
-
Hallo André!
Ich habe es sogar hinbekommen, dass die Elemente zufällig durcheinander gewürfelt werden -- dann aber ALLE. Also stehen die Fragen nicht mehr bei den Antworten... ;)
Na dann müsstest du doch schon fast am Ziel sein ...!
Du nimmst im Augenblick alle <p> Elemente?
Ausgehend von deinem Beispielcode musst du über alle <p> Elemente iterieren, die jeweils ein direkter Nachfahre eines <p> Elements mit der Klasse "question" sind, und deren Kindelemente (die <input> Elemente) "durcheinander würfeln". Et voilà ... ;-)Gruß Gunther
-
Na dann müsstest du doch schon fast am Ziel sein ...!
Hui -- Extase. Tatsächlich?
Du nimmst im Augenblick alle <p> Elemente?
Ausgehend von deinem Beispielcode musst du über alle <p> Elemente iterieren, die jeweils ein direkter Nachfahre eines <p> Elements mit der Klasse "question" sind, und deren Kindelemente (die <input> Elemente) "durcheinander würfeln". Et voilà ... ;-)Das verstehe ich jetzt nicht ganz. In dem Originalbeispiel gibt es 3 Wege. Den vorgefertigten für li-tags und für arrays -- die beide nicht sinnvoll sind. Aber der container und den habe ich "spaßenshalber" mal um meinen gesamten Inhalt gelegt. Dann werden aber auch die <hr> und alle anderen Elemente durcheinander gewürfelt.
Wie kann ich das denn für bestimmte Elemente angeben?
Danke,
André
-
@@Gunther:
nuqneH
[…] und deren Kindelemente (die <input> Elemente) "durcheinander würfeln".
Nö, die
phaben nebeninputnoch andere Kinder:labelundbr. Und dieinputund zugehörigelabelmöchte man nicht durcheinanderwürfeln (ein Wort).Ich würd mit sinnvollem Markup anfangen, bspw.:
<dl> <dt>Frage?</dt> <dd> <span><input type="radio" name="q101" id="q101a" value="true"/><label for="q101a">Antwortoption1</label></span> <span><input type="radio" name="q101" id="q101b" value="false"/><label for="q101b">Antwortoption2</label></span> <span><input type="radio" name="q101" id="q101c" value="false"/><label for="q101c">Antwortoption3</label></span> <span><input type="radio" name="q101" id="q101d" value="false"/><label for="q101d">Antwortoption4</label></span> </dd> <dt>Frage?</dt> <dd> ⋮ </dd> </dl>Dann kann man die
dd > spanmischen.Wenn gewünscht, kann man im Stylesheet
dd > span { display: block }setzen.Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
Hallo Gunnar!
Ich würd mit sinnvollem Markup anfangen, bspw.:
Das würde ich mit suchen/ersetzen wohl hinbekommen (alles andere wäre bei der Fragenmenge auch nicht sinnvoll).
Dann kann man die
dd > spanmischen.Und wie mache ich das, dass ich
dd > spanmische?Wenn gewünscht, kann man im Stylesheet
dd > span { display: block }setzen.Wozu ist das gut?
Danke, André
-
Hallo André!
Ich würd mit sinnvollem Markup anfangen, bspw.:
Dann kann man die
dd > spanmischen.Und wie mache ich das, dass ich
dd > spanmische?Also das Grundprinzip ist folgendes (egal ob du jetzt eine DL, UL oder OL verwendest):
-
Als erstes musst du jede Frage (sprich jedes Element mit einer Frage) ermitteln. Das wäre in Gunnars Vorschlag dann jeweils das <dt> Element (oder du gibst diesen Elementen eine Klasse, wie im ursprünglichen Beispiel).
-
Anschließend willst du ja zu jeder Frage_jeweils_die zugehörigen Antworten (sprich die jeweiligen Elemente mit den Antworten, bzw. die Elemente, die die zu einer Antwort gehörenden Elemente umschließen) in das Array zum mischen einlesen.
Die entsprechende jQuery Funktion heißt each()
So, jetzt aber .... ;-)
Gruß Gunther
-
Hallo Gunther!
Ich glaube ich bin ganz dicht dran -- aber ganz funzt es noch nicht *richtig*.
Ich habe die Funktion:
$('button.item').click(function(){ $("dd").each(function(){ $("span").shuffle(); }); });Und die Definition der Fragen sieht so aus, wie von Gunnar vorgeschlagen:
<dl> <dt>Welche Substanz ist wichtig für die Toleranzentwicklung?</dt> <dd> <span><input type="radio" name="q301" id="q301a" value="true"/><label for="q301a">cAMP</label></span> <span><input type="radio" name="q301" id="q301b" value="false"/><label for="q301b">MAO</label></span> <span><input type="radio" name="q301" id="q301c" value="false"/><label for="q301c">GABA</label></span> <span><input type="radio" name="q301" id="q301d" value="false"/><label for="q301d">NMDA</label></span> </dd> . . </dl>Jetzt werden allerdings die Radiobuttons und die Antworten Spaltenweise gemischt?! So in der Art:
o Antwortoption1
Antwortoption2 o
o Antwortoption3
Antwortoption4 oSo, jetzt aber .... ;-)
Kurz vor'm Ziel...
Danke und viele Grüße,
André
-
Hallo André!
Ich glaube ich bin ganz dicht dran -- aber ganz funzt es noch nicht *richtig*.
Ich habe die Funktion:
$('button.item').click(function(){$("dd").each(function(){
$("span").shuffle();
});
});Und wie siehts mit ~~~javascript $('button.item').click(function(){ $("dd").each(function(){ $(this).shuffle(); }); });aus?
Gruß Gunther
-
Ich hab's!!!!
$('button.item').click(function(){$("span").each(function(){
$("dd").shuffle();
});
});"span" und "dd" umdrehen! Tausend Dank!!! Grüße vom André
-
-
-
-
@@Gunnar:
nuqneH
[…] und deren Kindelemente (die <input> Elemente) "durcheinander würfeln".
Nö, die
phaben nebeninputnoch andere Kinder:labelundbr. Und dieinputund zugehörigelabelmöchte man nicht durcheinanderwürfeln (ein Wort).Ich würd mit sinnvollem Markup anfangen, bspw.:
Stimmt.
War schon spät gestern Abend ..., ich sollte zu solchen Uhrzeiten eben doch besser den jeweiligen Post zusätzlich öffnen, und nicht versuchen aus dem Gedächtnis ...Was er nimmt, ob DL, OL oder UL ist ja mehr oder weniger egal ...!
Gruß Gunther
-
-
Hi,
über alle <p> Elemente iterieren, die jeweils ein direkter Nachfahre eines <p> Elements mit der Klasse "question" sind,
Da kann man sich das Iterieren gleich sparen, denn p-Elemente können keine p-Elemente enthalten.
Oder ist das in HTML5 etwa erlaubt? (Sinnvoll erscheint's mir nicht - ein Absatz innerhalb eines Absatzes - aber "nicht sinnvoll" wäre ja nicht unbedingt ein Ausschlußkriterium bei HTML5)
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Hi,
über alle <p> Elemente iterieren, die jeweils ein direkter Nachfahre eines <p> Elements mit der Klasse "question" sind,
Da kann man sich das Iterieren gleich sparen, denn p-Elemente können keine p-Elemente enthalten.
Ja, das war ein Irrtum meinerseits ... ;-)
Das sollte nicht "Nachfahre" sondern "Nachfolger" heißen - mit den deutschen Bezeichnungen stehe ich auf Kriegsfuß ... :-PGruß Gunther
-
-
-
-
-