Bei richtiger Antwort eine Seite weiter

matrixpro

..::=Area51=::.., ,
Moin...

Ich wollte ein kleines Spiel "bauen" Kurz erklärt. Man kommt auf eine Seite dort steht ein Rätsel. Man hat ein Eingabefeld wo man die Antwort reinschreiben kann. Klickt man auf OK und die Antwort ist richtig, dann soll man Automatisch auf die nächste seite kommen, bzw die 2te Frage kommen. Besser aber auf eine neue Seite, weil auch manchmal bilder eingebunden werden sollen.

Ich habe den Coder hier. Wo ich nun sagen kann, das wenn Feld xyz eben die Richtige antwort hat, das "script" weiß das es richtig ist. Man soll dann aber auf Seite 2 geleitet werden.

hier mal den code

Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test-Test-Test</title>

 
  <main role="main">
    <h2>Rätsel</h2>

    <form name="Formular" >
      <p>Rätsel 01?</p>
      <input type="text" name="Eingabe" size="40">
      <button type="button" onclick="Antwort()">OK!</button>
      
    </form>
    <p id="ausgabe"></p>
  </main>

<script>
    function Antwort () {
      var Ergebnis = (document.Formular.Eingabe.value == 'Banane') ? 'RICHTIG!' : 'FALSCH!';
      var text = 'Die Antwort ist ' + Ergebnis;
	  var ausgabe = document.getElementById('ausgabe');
	  ausgabe.innerHTML = text;
    }
</script>

Bin da für jeden tipp dankbar. Ich selber hab da nicht so den PLan von. Fummel mich aber immer wieder gern in so ne Sachen rein.
Hier im Code z.b. ist " Banane" die Lösung.. hat man diese so soll man bei Klicken auf OK auf Seite 2 kommen. Muss doch gehen. Ich hab grad nur keine Idee mehr wo nach ich da suchen soll.
 
Gib am besten dem type-Attribut vom Button den Wert submit.
Dann wird erst das onsubmit-Event von der Form ausgelöst und dann die action der Form aufgerufen.
Die action bekommt also die Ziel-URL und onsubmit ruft die JavaScript-Funktion Antwort auf. DIese muss dann allerdings boolen zurück geben, eben ob richtig oder falsch.

HTML:
<form name="Formular" onsubmit="return Antwort()" action="/rätsel/aufgabe2.html">
  <button type="submit">OK!</button>
</form>

Mit dem Type reset werden die input-Felder der Form zurück gesetzt.

Beachte aber, dass es so kein Problem ist, diese URL aus dem Source zu suchen und dann selber aufzurufen.
Besser wäre, wenn Du die Antwort an den Server sendest und dann dort entscheidest, ob sie richtig ist oder nicht.
Bei jedem Klick auf den Button aktualisierst Du dann die Seite, auf dem Server musst Du dann fest legen, was angezeigt wird, also die aktuelle Frage mit der Info, dass es falsch ist, oder die neue Frage.
Das müsstest Du dann aber alles mit PHP machen, ist aus meiner Sicht aber auch die einzige Option, außer du verwendest ASP.NET oder Perl. Zu letzterem kann ich nur sagen: Tus nicht :D
 
Moin.

Danke für den Tipp. Mache ich es aber so. Kann ich auf OK klicken und komme immer auf die nächste Seite. Also ich kann auch nichts ins Feld schreiben. Und komme dennochr zur nächsten Seite. Das man die Lösung im Quelltext finden kann weiß ich wohl. ich denke aber nicht das die die Mitmachen werden auf diese Idee kommen.

Auf der anderen Seite. Wie würde das ganze denn in Php aussehen?
 
Dass Du immer auf die nächste Seite kommst, musst Du in der Antwort-Funktion lösen.
Diese Funktion muss ein boolean zurück geben, gibt sie true zurück, leitet der Button auf die nächste Seite weiter, gibt sie false zurück passiert nichts.
Dort liegen dann auch eventuelle Meldungen.

In PHP kann ich das jetzt so auf Anhieb nicht fehlerfrei bieten, aber zumindest das Vorgehen beschreiben:

Ich schauen, dass die Seite einen GET-Parameter bekommt, der die aktuelle Position im Fragen-Katalog angibt.
Beim Server musst Du dir dann an die Session gekoppelt pro Seite die jeweilige Antwort merken oder eben null.
So kannst Du dann beim Aufruf einer Fragen-Position prüfen ob die vorherige Frage beantwortet wurde.
Wurde sie beantwortet, suchst Du die angeforderte Frage und dazu gehörige Daten raus, andernfalls die Daten zu der vorherigen Frage.

Ganz grob umrissen:

PHP:
<?php
$currentId= $_GET["id"];
$eingabe = $_POST["Eingabe"];

if (!IstFrageErlaubt($currentId)) {
  $InfoMessage = "Diese Frage ist noch nicht erlaubt. Beantworte bitte zuerst diese Frage:";
  $currentId = $currentId - 1;
} else if (IstEingabeRichtig($currentId, $eingabe)) {
  $InfoMessage = "Glückwunsch, weiter geht es mit dieser Frage:";
} else {
  $InfoMessage = "Eingabe falsch, versuch es nochmal:";
}

$QuestionName = GetFragenName($currentId);
$QuestionText = GetFragenText($currentId);

?>

  <main role="main">
    <h2>Rätsel</h2>

    <p><?=$InfoMessage></p>

    <form name="Formular" method="POST" action="/rätsel/frage.php&id=<?=$currentId + 1>">
      <h2><?=$QuestionName></h2>
      <p><?=$QuestionText></p>
      <input type="text" name="Eingabe" size="40">
      <button type="button" onclick="Antwort()">OK!</button>
    </form>
  </main>

Einfach runter geschrieben, sind vermutlich noch Fehler drin, ganz abgesehen davon, dass die meisten Methoden nicht implementiert sind, ich hoffe, dass das Vorgehen dennoch klar wird :D
Du musst dann natürlich noch die EIngaben abspeichern, damit sie bei der Snforderung zur nächsten Frage auch vorhanden sind.
 
Hi ich danke dir. Hab ziemlich Zeitgleich noch eine Lösung gefunden. Werde die beiden mal miteinander vergleichen. Vielen dank für deine Hilfe.
 
Oben