Wie kann ich bei einer richtiger Antwort einen Text anzeigen lassen und bei einer falscher Antwort einen anderen?

 Ich möchte auf meiner Webseite ein kleines Multiple-choice-Quiz machen.

Hier möchte ich, dass, wenn man das Richtige auswählt und auf Lösung klickt, eine Nachricht erscheint, dass dies die richtige Lösung ist. Bei einer falschen dann halt, dass es die falsche Antwort ist.

Ich könnte hier nach action="/Tests/Posts" eine andere Webseite öffnen lassen. Aber dann würde sich ja bei der falschen Antwort und bei der richtigen Antwort das gleiche Fenster öffnen.

<form method="post" action="/Tests/Post">
  <fieldset>
    <legend>Bei Längswellen erfolgt die Schwingung ... Ausbreitungsrichtung.</legend>
    <input type="checkbox" name="schwingung" value="in" onclick="return ValidatePetSelection();">... in ...<br>
    <input type="checkbox" name="schwingung" value="querZur" onclick="return ValidatePetSelection();">... quer zur ...<br>
    <input type="checkbox" name="schwingung" value="Birds" onclick="return ValidatePetSelection();">... gegen ...<br>
    <br>
    <input type="submit" value="Lösung">
  </fieldset>
</form>
<script type="text/javascript">
  function ValidatePetSelection() {
    var checkboxes = document.getElementsByName("schwingung");
    var numberOfCheckedItems = 0;

    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked)
        numberOfCheckedItems++;
    }

    if (numberOfCheckedItems > 1) {
      alert("Es ist genau eine Antwort richtig.");
      return false;
    }
  }
</script>

Answer 1

[regex9]

Meines Erachtens verwendest du für dein Quiz nicht die geeignetsten Feldelemente. Da es nur eine richtige Option gibt, wären Radiobuttons eine passende Wahl, denn diese lassen sich gruppieren und sind dem Otto-Normal-Nutzer für multiple-choice auch besser bekannt. Deinen derzeitigen script-Block könntest du dir sparen.

Verwende außerdem Labels zur Beschriftung. So stellst du eine deutliche Assoziation zwischen Feld und Feldbeschreibung auch auf Metaebene her.

<input id="radio1" name="schwingung" type="radio" value="in">
<label for="radio1">... in ...</label>
<br>
<input id="radio2" name="schwingung" type="radio" value="querZur">
<label for="radio2">... quer zur ...</label>
<br>
<input id="radio3" name="schwingung" type="radio" value="Birds">
<label for="radio3">... gegen ...</label>
<br>

Die gewählte Option solltest du auf Serverseite prüfen, da sich die Auswertung dort nicht so leicht vom Nutzer manipulieren lässt.

Da anhand deiner Frage nicht ersichtlich ist, welche Technologie sich da einsetzen ließe, zeige ich zwei kleine Beispiele. Eines mit PHP, eines mit Node.js.

Also angenommen, /Tests/Post steuert folgendes PHP-Skript an:

<?php
  $correctAnswer = "...";

  if (isset($_POST["schwingung"]) and $_POST["schwingung"] === $correctAnswer) {
    header("Location: URL/to/sucess/page");
  }
  else {
    header("Location: URL/to/failure/page");
  }
?>                          

Dann wäre die Erwartungshaltung, dass der gewählte Wert im $_POST-Array zu finden wäre. Es wird also geprüft, ob der Parameter existiert und der Wert der korrekten Antwort entspricht. Wenn dem so sein sollte, erfolgt eine Weiterleitung auf die Erfolgsseite. Andernfalls wird dem Nutzer sein Versagen deutlich gemacht.

Beispiel mit Node.js (und Express):

app.use(express.urlencoded());

app.post("/Tests/Post", (request, response) => {
  const correctAnswer = "...";

  if (request.body.schwingung === correctAnswer) {
    response.redirect("URL/to/success/page");
  }
  else {
    response.redirect("URL/to/failure/page");
  }
});

Hier erfolgt der Zugriff über das response.body-Objekt und die Weiterleitung wird mit der redirect-Methode angestoßen.

Schau nun also einmal, welche Technologie dein Webserver / Webhoster unterstützt. Häufig hat man es mit einem Apache Webserver zutun, der PHP interpretieren kann, doch das muss nicht zwingend der Fall sein.

Im Anschluss solltest du dich mit den Grundlagen der jeweiligen Technologie näher auseinandersetzen. Lernmaterial lässt sich meist auf den offiziellen Entwicklerseiten finden.

Des Weiteren würde ich für ein Quiz mit mehr als zwei Fragen noch ein paar Änderungen in der Umsetzung der Prüfung vornehmen. Ein Prüfungsskript für alle Fragen sollte ausreichen.

Das name-Attribut im Formular sollte (der Ordnung halber) zuerst einmal mit einem anderen, abstrakteren Wert ausgestattet werden. Vielleicht zu answer. Das daraufhin auch Anpassungen im Serverskript vorzunehmen wären, muss wohl kaum erwähnt werden. Außerdem wäre es günstig, die Fragen mit einer ID auszustatten, die via hidden-Field mitgeschickt wird.

Im Serverskript müsste jedenfalls anhand dieser Information die korrekte Frage mitsamt Antwort ermittelt werden können. Speichere die Fragedaten einfach in einer Datei / Datenbank und lies sie dann aus. Zu den Fragedaten gehört ebenso ein Verweis auf die nächste Frage.

Die Fehler-/Erfolgsseiten wiederum sollten auf die nächste Frageseite verlinken. Man könnte an der Stelle mit Templates arbeiten, denen man die Information übergibt. Oder man leitet nicht auf eine neue Seite, sondern zurück zur Formularseite, unter welches man nur das Ergebnis (Richtig/Falsch) schreibt.

Da es da viele verschiedene Möglichkeiten gibt, wäre es ratsam, im Voraus den gewünschten Ablauf genau zu definieren.

Comments

[Geomatrics1]

Danke ich werde es auf jedenfall mal testen.

Das ganze ist nur ein Schulprojekt und ich werde es nur als locale website benutzen.

Die Fehler-/Erfolgsseiten wiederum sollten auf die nächste Frageseite verlinken. Man könnte an der Stelle mit Templates arbeiten, denen man die Information übergibt. Oder man leitet nicht auf eine neue Seite, sondern zurück zur Formularseite, unter welches man nur das Ergebnis ( Richtig/ Falsch) schreibt.

Also wenn auch nur angezeigt wird: richtig oder falsch. Dann wäre das glaube sogar besser.

[regex9]

@Geomatrics1

Du kannst das Formular via Fetch API (JavaScript) abschicken.

<form id="quiz-form">
  <!-- ... -->
  <p id="feedback"></p>
</form>
<script>
  document.getElementById("quiz-form").addEventListener("submit", function(evt) {
    evt.preventDefault();

    fetch("URL of your server script ...", {
      method: "post",
      body: new FormData(this)
    })
    .then(response => response.text())
    .then(text => this.getElementById("feedback").innerText = text));
  });
</script>

Der Aufruf des Standard-Event-Handlers für das submit-Event wird verhindert. Das Serverscript sollte statt einer Weiterleitung einfach nur Text in den Response schreiben (PHP: Mit print/echo; Node.js + Express: Mit response.send). Dieser wird im fetch-Callback aufgefangen und in den Paragraph geschrieben.

[Geomatrics1]

@regex9

Vielen Dank.

Answer 2

[Johannes0257]

Entweder du machst das ganze im Front-end indem du mit JavaScript die Antwort prüfst und dann dementsprechend auf eine neue Seite leitest. Hat halt den nachteil das jeder einfach das JavaScript lesen kann und so die Antwort kennt.

Oder besser du überprüfst die Antwort im Back-end mit beispielsweiße PHP.