Hallo,
ich versuche ein Quiz zu erstellen. Die richtig ausgewählten Antworten sollten mit grün und die falsch ausgewählten mit rot markiert werden.
Das hier funktioniert gut:
Mit vier Alternativen funktioniert es nur noch teilweise. Zum Beispiel die letzten falschen Antworten werden nicht mit rot markiert, wenn man sie auswählt:
Kann mir vielleicht jemand da weiterhelfen?
ich versuche ein Quiz zu erstellen. Die richtig ausgewählten Antworten sollten mit grün und die falsch ausgewählten mit rot markiert werden.
Das hier funktioniert gut:
HTML:
<form name="form">
<fieldset><legend>1. question</legend>
<label class="green"><input type="radio" class="correct" name="question1"> correct</label>
<label class="red"><input type="radio" class="wrong" name="question1"> wrong</label>
</fieldset>
<fieldset><legend class="b">2. question</legend>
<label class="red"><input type="radio" class="wrong" name="question2"> wrong</label>
<label class="green"><input type="radio" class="correct" name="question2"> correct</label>
</fieldset>
</form>
<button id="btn">Answers</button>
<p id="right-answers"></p>
Javascript:
let correct = document.getElementsByClassName('correct');
let wrong = document.getElementsByClassName('wrong');
let btn = document.getElementById('btn');
let green = document.getElementsByClassName('green');
let red = document.getElementsByClassName('red');
function checkInputs() {
let countRightAnswers = 0;
for (i = 0; i < correct.length; i++) {
if (correct[i].checked) {
green[i].style.border = '3px solid #008255'
countRightAnswers++
}
else if (wrong[i].checked) {
red[i].style.border = '3px solid red'
}
else {
red[i].style.border = ''
green[i].style.border = '';
}
document.getElementById('right-answers').textContent = countRightAnswers + '/2 correct!';
}
}
btn.addEventListener("click", checkInputs);
Mit vier Alternativen funktioniert es nur noch teilweise. Zum Beispiel die letzten falschen Antworten werden nicht mit rot markiert, wenn man sie auswählt:
HTML:
<form name="form">
<fieldset><legend>1. question</legend>
<label class="green"><input type="radio" class="correct" name="question1"> correct</label>
<label class="red"><input type="radio" class="wrong" name="question1"> wrong</label>
<label class="red"><input type="radio" class="wrong" name="question1"> wrong</label>
<label class="red"><input type="radio" class="wrong" name="question1"> wrong</label>
</fieldset>
<fieldset><legend class="b">2. question</legend>
<label class="red"><input type="radio" class="wrong" name="question2"> wrong</label>
<label class="red"><input type="radio" class="wrong" name="question2"> wrong</label>
<label class="red"><input type="radio" class="wrong" name="question2"> wrong</label>
<label class="green"><input type="radio" class="correct" name="question2"> correct</label>
</fieldset>
</form>
Kann mir vielleicht jemand da weiterhelfen?