0form

Stand 17.1.05
"Schöne" interaktive Seiten sind noch etwas komplizierter;
Sie liefern eine Punktzahl und am besten einen Rang für eine Scoreliste zurück.

Interaktive Internetseiten

Interaktiv heißt eine Internetseite, wenn der Benutzer Eingaben machen kann und diese Eingaben überprüft werden.

Soll eine interaktive Lernkontrolle entstehen, so kann man fast immer von einem normalen Text mit Formeln und Bildern ausgehen, zum Beispiel:

Eine Geschichte von einem

und einem

Ein Rabe saß auf einem Baum und hielt in seinem Schnabel ein Stück Fleisch, das er gestohlen hatte. Der Fuchs sah es und dachte, das wäre ein Bissen für mich. Herr Rabe, fing er an, soeben komme ich aus der Stadt. Dort sprechen alle von Dir.

...

oder

12 - 5 = 7

Damit dieser Text mit einem Browser betrachtet werden kann, muß er in das HTML-Format konvertiert werden. Das kann automatisch in einem "Composer", zum Beispiel dem Composer des Browsers Mozilla, geschehen; es werden nur zusätzliche Kodierungen eingefügt. Auch Open Office kann automatisch konvertieren.

Dabei wird der Text etwas länger. Der ursprüngliche Text ist wieder grün hervorgehoben. Aus den Bildern sind die Dateinamen für die Bilddateien geworden. Die deutschen Umlaute sind gleichfalls umkodiert worden. Das Kleingedruckte muß uns nicht interessieren, da es ja automatisch erzeugt wird.

Die HTML-kodierte Geschichte:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

</head>

EineGeschichte von einem

und einem

... oder

12 - 5 = 7

</body>

</html>

Das Kleingedruckte braucht der Browser (Internet-Exporer, Mozilla, Opera, ...), um den Text darzustellen.

Sie können den vorstehenden Kode

markieren,

kopieren

in eine leere Textdatei einfügen

im Dateiformat "Text" unter dem Namen "test.htm" abspeichen und

im Browser (Internet Explorer, Mozilla, ...) öffnen

Im Browser sieht die Geschichte jetzt so aus, das heißt, von den HTML-Kodierungen - und von den Bildern . ist nichts zu sehen.

Eine Geschichte von einem

und einem

...

oder

12 - 5 = 7

Aus dem Text wird eine Lernkontrolle, wenn Wörter oder Zahlen entfernt, also Lücken erzeugt werden. Die vorgesehenen Lücken werden jetzt rot markiert:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html>

<head>

</head>

EineGeschichte von einem

und einem

12 - 5 = 7

</body>

</html>

Wenn die rot geschriebenen Wörter durch Schreiblücken ersetzt werden, muß der Bearbeiter aus dem Gesamttext erschließen, ob "Fuchs" oder "Rabe" die richtige Einsetzung ist, und er muß wissen oder feststellen können, daß 12 - 5 die Zahl 7 ergibt.

Jetzt erzählen wir dem Browser, daß er die Eingabe der rot markierten Wörter verlangen soll. Dazu erklären wir ihm, daß es sich um ein "Formular" handelt. In Open Office rufen wir dazu das Ikon Formular auf. Dann fügt Open Office das automatisch hinzu, was im folgenden Text wieder rot geschrieben ist. Das Formular beginnt mit dem Hinweis <form>. Anstelle der Lücken sollen Eingaben ("input") als Text verlangt werden. Die Lücken erhalten Namen und werden durchnummeriert (n1, n2, n3, ...; Open Office nennt die Lücken textbox1, textbox2, ...). Schließlich wird dem Browser mit </form> erklärt, daß das Formular jetzt beendet ist.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

</head>

<form action="test.php" method="post" >

EineGeschichte von einem

und einem

Ein

<input type="text" name="n1">

saß auf einem Baum und hielt in seinem Schnabel ein Stück Fleisch, das er gestohlen hatte. Der

<input type="text" name="n2">

sah es und dachte, das wäre ein Bissen für mich. Herr

<input type="text" name="n3">

, fing er an, soeben komme ich aus der Stadt. Dort sprechen alle von Dir.

...

oder

12 - 5 = <input type="text" name="n4">

<input type="submit" value="Einsenden">

</form>

</body>

</html>

Der nächste Schritt besteht jetzt darin, Rückmeldungen zu erzeugen, aus denen der Bearbeiter entnehmen kann, ob er die richtige oder eine falsche Einsetzung vorgenommen hat. Für die Erzeugung der Rückmeldung gibt es viele Möglichkeiten.

Wenn der Provider den Zugriff auf PHP erlaubt, ergänzt man in <form> die rot kursiv geschriebenen Textteile. Mit diesen wird auf eine Auswerte-Datei "test.php" verwiesen. Diese wird aufgerufen, wenn man die zusätzliche Schaltfläche "Absenden" anklickt. Auch diese Schaltfläche wird innerhalb der Formularoptionen von Open Office angeboten.

Jetzt erzeugen wir diese Datei test.php aus der vorstehenden Datei. Das Kleingedruckte bleibt unverändert. Das rot und klein Gedruckte wurde hinzugefügt. An die Stelle der Input-Befehle treten die php-Anweisungen. Sie beginnen mit <? und enden mit ?> . <form> , </form> und die Schaltfläche für "Absenden" werden gelöscht.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

EineGeschichte von einem

und einem

Richtige Einsetzungen erscheinen grün ; bei den rot geschriebenen Wörtern hast Du einen Fehler gemacht.

Ein

if ($n1=="Rabe") {echo" Rabe"; }

else { echo" Rabe ";}

saß auf einem Baum und hielt in seinem Schnabel ein Stück Fleisch, das er gestohlen hatte. Der

if ($n2=="Fuchs") {echo"Fuchs";}

else { echo" Fuchs ";}

sah es und dachte, das wäre ein Bissen für mich. Herr

<?php

if ($n3=="Rabe") {echo" Rabe"; }

else { echo" Rabe ";}

, fing er an, soeben komme ich aus der Stadt. Dort sprechen alle von Dir.

12 - 5 =

<?php

if ($n4=="7") {echo"7";}

else { echo"7 ";}

</body>

</html>

Diese Datei speichern Sie im Dateiformat "Text" unter dem Namen "test.php".

Wenn jetzt der Bearbeiter im Formular einsetzt und das Formular abschickt, erhält er eine Datei zurück, in der richtige Einsetzungen in grüner Schrift erscheinen. Bei falschen Einsetzungen erscheint die richtige Antwort in roter Schrift. Sie können das Prinzip testen, wenn Sie das Beispiel "Rabe" aufrufen. Dieses Beispiel können Sie auch bearbeiten, wenn Sie keine Datei ins Internet stellen.

Sie können sich die Einsetzungen zusätzlich als Email schicken lassen, wenn Sie in der folgenden php-Zeile statt der Scheinadresse Ihre Emailadresse einfügen

<? mail("Email@ihrprovider.de", "Test";, $n, $n1.$n2.$n3.$n4 ) ?>

und die Zeile dann vor die Zeile </body> einkopieren.