Vokabeltrainer

[Dominik]

Hallooo!

Also ich habe da ein Problem: und zwar habe ich von meinem Lehrer die Aufgabe bekommen, einen Vokabeltrainer zu programmieren. Ich habe alles außer die Abfrage der jeweil zugehörigen Übersetzung. Da weiss ich noch nicht, wie ich vorgehe. Er soll alle nach einander prüfen, ob sie richtig sind.

Ich hab mal das, was ich bis jetz geschafft hab, hochgeladen:
http://www.giyl-online.de/kevin.html

[suit]

Da weiss ich noch nicht, wie ich vorgehe.
Ich hab mal das, was ich bis jetz geschafft hab, hochgeladen:

das ist sehr klug, nicht wissen was man tut und einfach mal loslegen

male auf ein blatt papier, was passieren soll flowchart - wenn du alles gemalt hast, dann überlege welche programmier-/scriptsprache dafür am besten geeignet ist und welche du überhaupt verwenden kannst

erst dann lege los

[Dominik]

Es ist nicht so, dass ich garnicht weiss, wie ich vorgehen will, aber das was ich versucht hatte, hat nich geklappt. Es war folgendes:

Ich schreibe bei der Auflistung bereits für jede Vokabel ein Eingabefeld für die Lösung. Diesen Eingabefeldern geb ich jeweils einen Namen. hier z.B.: militaer[x][1][y]... das x setzt sich automatisch..

dann würde ich der in der pruef-function die werte (den eingegeben und die aus dem array) vergleichen mithilfe einer for-schleife (y=0; y<militaer[x][1].length; y++)...

doch das hat nich geklappt.

hoffe, dass mir jemand eine alternative sagen könnte!

lieben gruß,
dominik

[suit]

Es ist nicht so, dass ich garnicht weiss, wie ich vorgehen will, aber das was ich versucht hatte, hat nich geklappt. Es war folgendes:

es scheint aber so - wenn du ein konzept hast, sei mitteilsam und sag bitte, was du machen willst

ich will:

• eine seite mit einem wort
• a) in ein textfeld schreibe ich meine übersetzung
• b) aus einer liste wähle ich das richtige aus
• c) mit radioboxen suche ich das richtige aus
• c) mit checkboxen wähle ich passende aus
• und klicke auf ok
• dann passiert folgendes:

hoffe, dass mir jemand eine alternative sagen könnte!

so wirds schwer

[Dominik]

Ok, tut mir leid.

Ich liste alle lateinischen Wörtern auf. Neben denen sind pro Wort ein Eingabefeld (Textfeld). Ich gebe alle auf einmal ein.
Nachdem ich fertig bin, klicke ich auf den Button "Ich bin fertig!" und die Ergebnisse sollen auf ihre Richtigkeit geprüft werden, Besonderheit hierbei: Manche Wörter haben mehrer Bedeutungen!

Ich weiss nur nicht genau, wie ich es richtig umsetze.

[Felix Riesterer]

Lieber Dominik,

Ich liste alle lateinischen Wörtern auf.

das kann ich mir gut vorstellen. Man hat also eine Auflistung aller abzufragenden Vokabeln. Und dann?

Neben denen sind pro Wort ein Eingabefeld (Textfeld). Ich gebe alle auf einmal ein.

Also erst Seite komplett ausfüllen, dann wird geprüft. Verstanden.

Nachdem ich fertig bin, klicke ich auf den Button "Ich bin fertig!" und die Ergebnisse sollen auf ihre Richtigkeit geprüft werden,

Also eine Art "jetzt prüfen!"-Button, den man betätigen muss. Sieht soweit sehr logisch aus.

Besonderheit hierbei: Manche Wörter haben mehrer Bedeutungen!

Also muss man bei der Korrektur darauf achten, dass man alle möglichen Lösungen für ein Wort durchläuft, ehe man eine Lösung als endgültig falsch erachtet.

Etwas in dieser Art also:

var Vokabeltrainer = {  
    "daten" : {  
        "bat" : ["Fledermaus", "Schläger", "Baseball-Schläger"],  
        "guy" : ["Typ", "Kerl", "Mann", "Junge"],  
        "girl" : ["Mädchen"]  
    },  
  
    "pruefe_vokabel" : function (gefragt, geantwortet) {  
        // this.daten[gefragt] liefert das Array mit den möglichen Lösungen  
        if (!this.daten[gefragt])  
            return false; // Vokabel nicht in der "Datenbank" vorhanden...  
  
        var loesung = "";  
        // gehen wir zunächst davon aus, dass die eingegebene Lösung falsch ist:  
        var gewusst = false;  
  
        // Daten auf gefragte Vokabel hin untersuchen  
        for (loesung in this.daten[gefragt]) {  
            if (geantwortet == loesung) {  
                gewusst = true; // eine korrekte Lösung wurde eingegeben!  
            }  
        }  
  
        return gewusst;  
    }  
};  
  
alert(Vokabeltrainer.pruefe_vokabel("bat", "Schläger")); // richtig -> sollte true ergeben  
alert(Vokabeltrainer.pruefe_vokabel("guy", "Gurke")); // falsch -> sollte false ergeben  
alert(Vokabeltrainer.pruefe_vokabel("city", "Stadt")); // existiert nicht -> sollte false ergeben

Ich weiss nur nicht genau, wie ich es richtig umsetze.

Was _genau_ ist Dir noch unklar? Du hattest doch bisher sehr genau erklärt, was Du willst. Nur an der Stelle, an der suit genauer nachgefragt hatte, konntest Du bisher nicht genau beschreiben, wie Du weiter vorgehen willst. Aber genau das würde mir jetzt sehr helfen, um Dir zu helfen!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Lieber Dominik,

warum verlinkst Du auf eine Seite "...kevin.html"? Bist Du nun Dominik oder Kevin?

http://www.giyl-online.de/kevin.html

Aha. Also schauen wir mal. Du definierst Deine Arrays (ob die gewählte Struktur sinnvoll ist, darüber nachher mehr) und drei Funktionen. Ich poste hier mal diese drei Funktionen:

  
         function abfrage()  
         {  
         wahlfeld="";  
         if (document.form1.wortfeld[0].checked == true)  
         wahlfeld = militaer;  
         if (document.form1.wortfeld[1].checked == true)  
         wahlfeld = bewegung;  
         aufbau();  
         }  
  
  
         function aufbau()  
         {  
         document.write("<form id=\"2\"><table><tr><td>");  
         for (x=0; x<wahlfeld.length; x++)  
          document.write(wahlfeld[x][0]+ "<br>");  
         document.write("</td></tr></table></form><input type=\"button\" onClick=\"\" value=\"Ich bin fertig!\">");  
         }  
  
  
  
          function punkterechner()  
          {  
                         var out = "Sie haben&nbsp;" + punkte + "&nbsp;von 1 Punkten erreicht";  
                         document.getElementById("ergebnis").innerHTML = out;  
          }

Wie man sehen kann, arbeitest Du überall mit globalen Variablen. Das ist nicht optimal. Es wäre sinnvoller, ein globales Objekt anzulegen, in welches Du Deine Sachen als Unterobjekte oder Methoden hineinkonstruierst. Vergleiche mal mein Quiz-Script dazu.

Das nächste, was mir an Deinem Code auffällt: Du notierst document.write(). Das ist nach dem fertigen Laden einer Seite sehr problematisch, da Du damit das vorhandene Dokument komplett ersetzt. Hier versagt dann auch zum Beispiel Dein Punkterechner, da das Element mit der ID "ergebnis" nach document.write() nicht mehr existiert! Das bedeutet, dass Du nach dem document.write()-Vorgang quasi auf einer neuen Seite bist! Es wäre daher schlauer, die bestehende Seite in ihrer Struktur zu belassen, um nur ihre Inhalte zu modifizieren. Dazu brauchst Du dann die ganzen http://de.selfhtml.org/javascript/objekte/document.htm@title=DOM-Methoden, deren Umgang allerdings erst gründlich geübt und gelernt werden will (ich erinnere mich da an meine ersten Gehversuche... und Verzweiflungen).

Bevor Du Dich jetzt aber entmutigen lässt, möchte ich Dir nur raten (falls Du das nicht sowieso schon tust), dass Du Dir im Firefox den Firebug-Plugin installierst, um damit die volle Übersicht über alle derzeit definierten Objekte und Funktionen/Variablen zu haben. Ich wüsste nicht, wie ich ohne dieses Wahnsinnswerkzeug JavaScripte schreiben sollte.

Dass Du erst hinterher im IE testest, versteht sich (hoffentlich) von selbst.

Zu Deinen Daten-Arrays: Wenn Du eine echte HTML-Seite mit JavaScript modifizierst, dann kannst Du die Daten korrekt in HTML abbilden. Mein Quiz-Script benutzt dazu Tabellen, die in speziellen Elternelementen mit einer ganz speziellen Klasse stehen (z.B. <div class="kreuzwort-quiz"><table><tr>...), um sich aus diesen Tabellen dann die eigentlichen Quiz-Inhalte zu holen. Eine solche Vorgehensweise hat den Vorteil, dass Du dasselbe JavaScript auf mehreren HTML-Seiten einsetzen kannst, und dass Du nur auf den jeweiligen Seiten andere Inhalte bereithalten musst.

Zuguterletzt (hoffentlich "guter") möchte ich Dir ans Herz legen, dass Du den JavaScript-Code in einer externen Datei notierst, um diese im <head> Deiner Seite einzubinden, sodass dieses JavaScript dann alles notwendige an Deiner Seite vornimmt, ohne dass Du dazu im HTML-Dokument irgendwo noch weiteren JavaScript-Code (z.B. Eventhandler wie onclick oder ähnliches) notierst. Das nennt man dann "unobtrusive JavaScript" und ist eine Idealvorstellung, wie JavaScript verwendet werden sollte (mein Quiz-Script geht übringens auf diese Art und Weise vor). Wenn JavaScript im Browser nicht verfügbar ist, was passiert dann auf der Seite, wenn sie geladen wurde?

Letzte Frage an Dich: Hat Dir Dein Lehrer explizit aufgetragen, dass Du das mit JavaScript löst? Es wäre ja auch eine server-seitige Scriptsprache wie PHP möglich gewesen...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Dominik]

Vielen Dank, Felix, für deinen langen Text :-O ;)

Das Problem mit document.write ist mir bereits aufgefallen, aber ich hab es schon mit innerHTML probiert, doch da schreibt er JEDES mal neu, anstatt es untereinander aufzulisten. PS: Der Punktezähler kann im Moment sowieso nicht funktionieren, weil es den DIV "ergebnis" überhaupt nicht gibt. Die Funktion hatte ich nur beim ersten Versuch ohne Arrays schon drin und hab sie seitdem nicht rausgetan.

Den Code werde ich ab jetzt auch in eine extra .js Datei lagern.

Zu Firebug: Danke :) Das hat mir ein Freund auch schon geraten. ;)

Zum letzten Punkt: PHP ist nicht möglich, da die Datei lokal geöffnet werden soll. Daher gäb es dort schon das erste Problem, weil ein zusätzliches Porgramm wie XAMPP gebraucht wird.

Vielen Dank!

Dominik