Vokabeltrainer in Javascript?

Question

Wie kann ich einen Vokabeltrainer ohne Datenbank oder PHP, am besten in Javascript (+ Html & css) Programmieren?

regex9 · Accepted Answer

Da gibt es viele verschiedene Möglichkeiten.

a) Alle Vokabeln mitsamt Übersetzung werden in einer HTML-Tabelle aufgelistet und standardmäßig ausgeblendet (CSS: display-Eigenschaft). Der Nutzer kann via Button / Checkbox die Vokabeln ein- und ausblenden (s. CSS-Pseudoklasse :checked oder via JavaScript).

Entsprechende Beispiele, an denen du dich orientieren kannst, findest du hier oder hier.

b) Du erstellst ein HTML-Formular, in dem, wie bei Option a) die Vokabeln in einer Tabelle aufgelistet werden. In der rechten Tabellenspalte wird ein Textfeld eingesetzt, welches in seinem pattern-Attribut die Lösung beinhaltet und als erforderdlich definiert wird. Wenn dem Formular noch ein Button zugeordnet wird, hat man eine einfache Validierung.

Minimalbeispiel:

<form>
  <label for="word1">Haus</label><input id="word1" pattern="house" required>
  <button>Validate</button>
</form>

Dem könnte man noch jeweils ein Element zufügen, welches die Lösung anzeigt oder einen Tipp gibt.

<span title="house">Tipp</span>

c) Wieder der Tabellenansatz mit Button. Wenn der Button angeklickt wird (schau dir Event Listener an) iterierst du via JavaScript über alle Eingabefelder und vergleichst die Werte mit der Lösung, die in einem data-Attribut liegt.

<input class="vocabulary-input" data-solution="Haus" id="word1">
<span></span>

JavaScript:

const inputFields = document.getElementsByClassName("vocabulary-input");

for (field of inputFields) {
  const solution = field.getAttribute("data-solution");
  field.nextSibling.innerText = field.value === solution ? "Correct" : "Wrong";
}

In dem leeren span-Element kann das Prüfungsergebnis eingesetzt werden.

d) Du legst dir ein Array an, in dem die Vokabeln gespeichert sind.

const vocabularies = [
  { "de": "Haus", "en": house, "es": "casa", /* ... */ },
  { "de": "Lampe", "en": lamp, "es": "lámpara", /* ... */ },
  /* ... */
];

Anhand der Länge und der random-Funktion ermittelst du einen Zufallsindex, um ein zufälliges Objekt zu erhalten. Zu dem kannst du folgend den Nutzer testen.

Ich stelle mir das so vor: Es gibt einen Generate-Button, der immer wieder einen neuen Zufallsindex sucht und das Wort ausgibt, welches geprüft werden soll. Wie du die Sprachen vorher festlegst (oder erst mit dem Generieren?), kannst du ja für dich selbst auswürfeln.

Ein zweiter Button ermöglich das Prüfen.

Schau dir dafür Objekte, Arrays und Event Listener an.

e) Du schaust nach einer API, der du irgendein Wort zuschicken kannst, um als Ergebnis die Übersetzung zu bekommen. Dann brauchst du wie in d) nur eine Wörterliste, die sich (erneut via Zufallsindex) abarbeiten lässt. Für die Prüfung vergleichst du die Eingabe mit der Übersetzung von der API.

Ich könnte nun noch weitermachen mit dem Auflisten möglicher Umsetzungen (die obigen Optionen ließen sich zudem unterschiedlich kombinieren), doch ich denke, dass das als Anregung ausreichen wird.

Soweit habe ich auch nie den Fall beachtet, dass es sich oft nicht auf eins-zu-eins-Paare beschränkt, sondern dass Wörter ebenso mit anderen Wörtern übersetzt werden können. Im Fall von b) kann man reguläre Ausdrücke im Attribut einsetzen, um eine größere Auswahl an Lösungen zu erlauben. Für die nachfolgenden Lösungen kann man mit Funktionen wie includes oder indexOf in Strings / Arrays suchen, statt mit einem strikten Vergleichsoperator zu arbeiten.

Vokabeltrainer in Javascript?

1 Antwort