Hallo liebe Experten! Ich würde gerne bei meinem Quiz die Menge der maximal möglichen richtigen Antworten mit angeben. Wenn ich aber folgendes mache:
<!DOCTYPE html>
<html>
<style type="text/css" media="screen">
form{ counter-reset: fragen 0 fragenf 0 fragenr 0 falsch 0 richtig 0; }
.r {counter-increment: fragenr;}
.f:checked {counter-increment: falsch;}
.r:checked {counter-increment: richtig;}
.ergebnisf:after{content:counter(falsch)}
.ergebnisr:after{content:counter(richtig) " von " counter(fragenr); }
</style>
<body>
<form>
<legend>
Wie viele Amtssprachen gibt es in der EU (Stand 2021)?
</legend>
<p>
<input class="f" type="checkbox" id="elf" name="EU[]" value="elf">
<label for="elf"> 11 Sprachen </label>
</p>
<p>
<input type="checkbox" id="24" class="r" name="EU[]" value="24">
<label for="24"> 24 Sprachen </label>
</p>
<p>
<input class="f" type="checkbox" id="27" name="EU[]" value="27">
<label for="27"> 27 Sprachen </label>
</p>
<p>
<input type="checkbox" id="alle" class="f" name="EU[]" value="alle">
<label for="alle"> Alle Sprachen, die in den EU-Ländern gesprochen werden </label>
</p>
</form>
<p> <span class="ergebnisr"> Richtige Antworten: </span>
</p>
<p> <span class="ergebnisf"> Falsche Antworten: </span>
</p>
</body>
dann wird nicht die Gesamtzahl der möglichen richtigen Antworten (im Beispiel: 1) gezählt, sondern nur die Anzahl der NICHT ausgewählten richtigen Antworten - sobald die Checkbox mit class="r" angekreuzt ist, steht da "1 von 0" anstatt "1 von 1". Wenn ich den Counter "fragenr" aber auch bei f:checked hochzählen lasse, werden die angeklickten Antworten nicht mehr gezählt. Was mache ich falsch oder geht das, was ich will, mit reinem css nicht? Eine php-Lösung wäre mir auch recht! Ich arbeite nämlich gerade an einer php-Version meiner Seite.