nicht angemeldet
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>
Matthias Apsel
Gunnar Bittersmann
MudGuard