Vokabel-Trainer

In diesem Kurs lernst du, wie du einen Vokabel-Trainer als progessive Web-App mit HTML5 erstellst, der auf allen Plattformen läuft.

Dabei wird immer wieder auf den Kurs JavaScript/Tutorials/App Bezug genommen.

• Vorüberlegungen
  • Vokabeln lernen - aber wie?
  • Datenmodellierung
    • Array
    • OOP
   
• Das Quiz
  • Quiz-Objekt
  • Der Zufall ist nicht genug
  • Statistik
   
• 

  Snowman
  • Templates nachladen
  • SVGs einbinden
  • Odd-Man-Out
   
• 

  Vokabeltrainer - die App
  • Installierbarkeit
  • Offline-Browsing
  • Backend
    • Daten auslagern
    • Daten eingeben, bzw. importieren
   

• Vokabeltrainer
  (das Quiz)

15min

mittel

Kenntnisse in

• JavaScript und das DOM
• Zahlenspiele

Dieses Kapitel dient dazu, vor dem eigentlichen Programmieren die Ziele und Anforderungen in einem Lastenheft festzulegen und dann zu überlegen, wie diese Ziele mit einem objektorientierten Vokabeltrainer realisiert werden können.

Vorüberlegungen

Vokabeln lernen - aber wie?

Das Netz ist voll mit kostenlosen und kommerziellen Vokabeltrainern, die einen schnellen Lernerfolg versprechen. Allerdings basiert der Spracherwerb auf dem Verknüpfen neuer Begriffe mit bisher Gelerntem im richtigem Kontext, sodass ein reines Lernen von Gegensatz-Paaren wie "Hund"-"dog" praktisch eher geringe Erfolge erzielt.

Deshalb soll unser Vokabeltrainer neben der klassischen Vokabelabfrage Deutsch-Englisch zusätzlich mehrere abwechslungsreiche Übungen bieten:.

1. DE - EN (given: word.translation; input == word.name)
2. EN - EN (given: word.description; input == word.name) (Begriffe durch englischsprachige Erklärung finden)
3. matching synonyms (Keks ist nicht nur biscuit, sondern auch cookie)
4. Gegensatzpaare ("opposites")
5. matching definitions (Siehe: examples)
6. Galgenmännchen ("Hangman")

langfristig:

• plural-forms
• irregular verbs

stärkere Gewichtung neuer und schwieriger Wörter

Der Vokabeltrainer soll Wörter nicht allein nach dem Zufallsprinzip auswählen, sondern wie ein Zettelkasten und seinen Fächern funktionieren!

Neue Vokabeln finden sich im vordersten Fach eines Zettelkasten. Erfolgreich abgefragte Vokabeln wandern ein Fach nach hinten, die nicht gekonnten verbleiben im vordersten Fach.

In einem zweiten Durchlauf werden neben den Vokabeln aus dem vordersten Fach auch die (bereits beherrschten) Wörter aus dem zweiten Fach bearbeitet. Die gekonnten Vokabeln wandern ein Fach nach hinten, die nicht gekonnten wandern zurück ins vorderste Fach (und müssen den Weg nach hinten erneut antreten).

Nach z.B. dem doppelten Zeitraum kommt dann das dritte Fach an die Reihe. Auch hier gilt wieder der Vorgang wie für das zweite Fach.

Die Fächer stehen also für einen Zeitraum, innerhalb dessen ihr Inhalt geprüft wird. Damit werden Vokabeln, die wirklich sitzen, in immer größeren Zeitabständen überprüft. Diejenigen Vokabeln, die nicht (mehr) sitzen, müssen wieder in den kürzesten Prüfzeitraum (vorderstes Fach) zurückgeführt werden. Und damit schließt sich der logische Kreis.

Im Skript wird eine Liste an Vokabeln zusammengestellt, die dem User zur Prüfung vorgelegt werden. Kann er eine Vokabel nicht korrekt bearbeiten, muss sie ihm wieder vorgelegt werden, bevor er Vokabeln aus „dem nächsten Fach“ vorgesetzt bekommt. Also bietet es sich an, die Prüfliste wie diesen Zettelkasten aufzubauen.

Das könnte ein simples Array sein, bei dem das vorderste Fach den Index 0 hat, das letzte Fach den Index 4. Das Umsortieren von Vokabelkarten (also ein word-Objekt) geschieht dann über die üblichen Array-Methoden push() (hinten anfügen) und splice() (um ein Element auszuschneiden).

Methodische Vorüberlegungen

Am Anfang jedes Programmierprojekts steht die Frage nach der Datenmodellierung:

Welche Daten benötige ich und wie sollen sie strukturiert werden?

konventioneller Ansatz mit Arrays

Das Programmieren eines Vokabeltrainers gehört zu den häufig gestellten Hausaufgaben bei der Einführung in die Programmierung.

Dabei werden die Vokabeln üblicherweise in einem Array mit key-value-pairs gespeichert. Dies ist simpel, aber für einen einfachen Vokabeltrainer ausreichend:

Beispiel: Vokabeln in einem Array

var vokabeln = ["Hallo","hello","Keks","biscuit","Küche","kitchen"];

Da ein Array von 0 ausgehend gezählt wird, kannst du mit einer einfachen Formel zuerst die Felder vokabeln[0], vokabeln[2], vokabeln[4] usw. ausgeben und dann die Eingabe mit vokabeln[n+1] vergleichen:

Beispiel: Vokabeln aus Array ausgeben, mit Eingabe überprüfen So sieht's ausQuellcode

function newTask () {
    zufallindex = Math.floor( (vokabeln.length/2) * Math.random()) ;
    document.querySelector('#given').textContent = vokabeln[zufallindex*2] ;
    // durch diese Formel wird die 1. (0x2=0), 3.(1x2=2), 5. (2x2=4) Vokabel aufgerufen 
}
 
function checkResult() {
    if( (vokabeln[(zufallindex*2)+1]) == input.value ) {
        output.textContent = 'Super!';
    }
    else {
        output.textContent = 'Try again! (Click "New!")';
    }
}

Öffne das Beispiel in einem neuen Tab und überprüfe die Variablen in der Konsole F12).

---

Wie oben bereits erwähnt, wäre es sinnvoll über die DE-EN-Gegensatzpaare hinaus noch eine Angabe der Unit und eine englischsprachige Erklärung in den Array zu integrieren.

Beispiel: Vokabeln in einem Array - erweitert

var vokabeln = [
 "5.1","hello","another word for Good morning ","Hallo",
 "5.1","biscuit","a cookie ","Keks, Plätzchen",
 "5.1","kitchen","you cook in the ... ","Küche"
 ];

Hier wäre die Formel für eine Abfrage schon komplizierter.

Damit die feste Reihenfolge eingehalten wird, müsste eine fehlende Erklärung trotzdem mit einem leeren String "" dargestellt werden. Allerdings könnte solch eine fehlende Erklärung nicht für eine Abfrage verwendet werden und müsste daher herausgefiltert werden.

objektorientierte Datenmodellierung

Vielseitiger wäre eine objektorientierte Struktur, die für ein Wort mehrere Eigenschaften ermöglicht:

Beispiel: besser: Vokabeln in einer objektorientierten Struktur

var vocabulary = {
"word": [
{
name: "biscuit",
type: "noun",
countable: true,
plural: "biscuits",
synonyms: ["cookie", "cracker", "brownie"],
opposites: [], // könnte hier auch fehlen
description: "Brownies and crackers are …", 
translation: "Keks"
}
},
{ ... },
{ ... }
],
"5.2": [ {}, {}, {} ],
"5.3": [ {}, {}, {} ]
};

Ein weiterer Vorteil ist, dass nicht befüllbare Eigenschaften (wenn z.B. kein opposite verfügbar ist) auch einfach ausgelassen werden können, ohne dass sich die Index-Position eines Arrays ändern würde, da ja eben gerade kein Array mehr genutzt wird!

Anstelle immer komplizierterer Formeln können beim Schreiben des Trainer-Programms mit Begriffen wie word.name und word.synonym „sprechende Variablennamen“ verwendet werden, die Programmierung, Debuggen und spätere Änderungen einfacher machen.

Datenbank und Offline-Verfügbarkeit

Ein solcher Vokabeltrainer sollte von Schülern benutzt werden können. Diese haben eher ein Handy oder ein Tablet als einen Desktop-PC; oft jedoch keinen Vertrag dazu. Als Internetzugang nutzen sie WLAN zuhause oder, falls verfügbar, in der Schule.

Deshalb sollte eine solche Vokabel-App herunterladbar sein. Dies beinhaltet zuerst das Programm, aber auch die Daten selbst, die stets offline verfügbar sein und sich bei erneutem Einwählen ins Internet und der Verbindung zum Server gegebenenfalls aktualisiert werden sollten.

Personalisierung vs. Datenschutz

Bei einem Einsatz im Schul-Netzwerk oder am PC zuhause müsste man optimalerweise ein Login mit Passwortabfrage realisieren. Dies zöge aber den Aufbau einer Benutzerverwaltung sowie das Auseinandersetzen mit den Datenschutz-Richtlinien nach sich.

Deshalb verzichtet die Vokabel-App auf die serverseitige Speicherung der Daten und speichert die Ergebnissicherung wie im Mathe-Quiz nur auf dem Gerät des Benutzers ab.

• Vokabel-Trainer
  (Übersicht)
• Vokabel-Trainer (das Quiz)

Weblinks

• MDN: Progressive Web-Apps