• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Quiz erstellen

Deneb

Neues Mitglied
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:
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?
 
Werbung:
Erklär doch bitte, falls jemand anderes auch Interesse an solchen Aufgabenstellungen hat, wie Du es gelöst hast.
 
Werbung:
Notrev von Stack Overflow hat es gelöst.

Javascript:
let correct = document.getElementsByClassName('correct');
let wrong = document.getElementsByClassName('wrong');
let btn = document.getElementById('btn');

function checkInputs() {
  let countRightAnswers = 0; 

  for (i = 0; i < correct.length; i++) {
    if (correct[i].checked) {
      // set the style of the parent node
      correct[i].parentNode.classList.add('green');
      countRightAnswers++;
    }
  }
 
  for (i = 0; i < wrong.length; i++) {
    if (wrong[i].checked) {
      // set the style of the parent node
      wrong[i].parentNode.classList.add('red');
    }
  }

  document.getElementById('right-answers')
    .textContent = countRightAnswers + '/2 correct!';
}

btn.addEventListener("click", checkInputs);

CSS:
.green {
  border: 3px solid green;
}

.red {
  border: 3px solid red;
}

Und von html die red+green classes entfernen.

Allerdings gibt es schon das nächste Problem: wenn man die Antwort ändert (ohne die Seite zwischendurch neu zu laden), bleiben die alten Ergebnisfarben sichtbar.
 
Geht das in die richtige Richtung? Auch wenn es noch nicht funktioniert...und eigentlich soll das Ergebnis erst am Ende sichtbar werden.
Javascript:
let input = document.getElementsByTagName('input');
input[i].addEventListener("click", checkInputs);


Sowas habe ich u.a. auch ausprobiert (funktioniert nicht):
Javascript:
for (i = 0; i < correct.length; i++) {
                if (correct[i].checked && correct[i].parentNode.classList.contains('red')) {
                  correct[i].parentNode.classList.remove('red');
                 }
               }
 
Werbung:
Versuch es mal mit ...

Javascript:
var inputs = document.querySelectorAll('input[type="radio"]');
var zustand = null;
for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('change', function() {
        (zustand) ? console.log(zustand.value): null;
        if (this !== zustand) {
            zustand = this;
        }
        console.log(this.value)
    });
}
 
Ich sehe, dass es die Änderungen bei Inputs merkt. Leider bin ich nicht fähig es zu Quiz zu übertragen.
 
Werbung:
ChatGPT hat es gelöst. Herrlich! Einfach folgendes hinfügen.

Javascript:
// remove the styles of the previously selected answer
for (i = 0; i < correct.length; i++) {
  if (!correct[i].checked) {
    // remove the style of the parent node
    correct[i].parentNode.classList.remove('green');
  }
}

for (i = 0; i < wrong.length; i++) {
  if (!wrong[i].checked) {
    // remove the style of the parent node
    wrong[i].parentNode.classList.remove('red');
  }
}
 
Werbung:
Zurück
Oben