Vokabeltrainer programmieren?
Hallo, ich wollte mir meinen eigenen Vokabeltrainer programmieren. Ich wollte das eigentlich mit html und JavaScript machen. Da ich aber überhaupt kein Profi bin, wollte ich fragen, ob das überhaupt geht und wie man da genau vorgeht.
4 Antworten
Geht, aber wenn du noch keine Erfahrung in JS hast, geht es für dich wahrscheinlich nicht. Das klingt zwar einfach, aber die Vokablen musst du ja irgendwo speichern. Um das ganze halbwegs variabel zu machen bräuchtest du dann auch noch ne Datenbank (lokal reicht).
Dann musst du den Spaß ja noch designen damit es nicht komplett scheiße aussieht.
Wenn dir alles aber egal ist, ist es tatsächlich nicht so schwer
https://jsfiddle.net/075L38nj/
Musst dir vlt nen Array mit Vokablen + Lösung anlegen, aber an sich kannst du es so ähnlich machen. Nur halt schöner
Ja ne, da kannst du halt deine Vokabeln + Lösung speichern. Aber das kannst du zur Not ja auch hardcoden.
überprüfen musst du ja nicht viel, ein input feld mit der Übersetzung vergleichen
Ich habe mir jetzt deine Datei angeschaut. Kann ich dieses Prinzip dann einfach so übernehmen? Dann muss ich das halt für jede Vokabeln, die ich haben möchte aufschreiben.
https://jsfiddle.net/w8vxs0uz/2/
Die Vokabel ändert sich jetzt bei jedem Reload. kannste so lassen oder du geht halt jedes element aus dem array per schleife durch
Vielen Dank für dein auführliche Hilfe. Denkst du dann ich soll eine Datenbank verwenden oder reicht ein array, wo ich dann die Vokabeln selber eintrag?
Soll ich dann einfach alle Vokabeln die ich möchte eintippen als array? Und wegen der Schleife: ich müsste dann ja eigentlich eine vorschleife nehmen oder? Kann man dann trotzdem das mit dem Zufallsprinzip machen?
wenn dus mit zufall machen willst reicht auch ne while schleife :) aber is eig egal
Danke, Danke! Du hast mir sehr weitergeholfen
Das geht mit PHP am einfachsten. Dazu eine SQL Datenbank mit den Vokabeln benutzen. Der Rest arbeitet dann wie jede "bessere" Webseite die Informationen aus einer Datenbank verwendet.
Gut wäre auch direkt eine Möglichkeit einzubauen neue Vokabeln eingeben zu können.
Wenn es etwas komplizierter werden darf, dann in der Datenbank merken welche Vokabeln von einem Benutzer wie oft richtig und wie oft Falsch beantwortet wurden. Dann kann man noch nicht richtig gelernte Vokabeln öfter abfragen für einen besseren Lerneffekt. Auch kann man wenn zu oft hintereinander bzw. in einem bestimmten Zeitraum falsch beantwortet wurde Vokabeln gewählt werden die vorher oft richtig beantwortet wurden. Dann fühlt sich der Abgefragte besser und findet das lernen leichter.
In der Datenbank kann man natürlich auch die Irregulären Verben gleich mit eintragen und bei jeder Vokabel eine Schwierigkeitsstufe hinterlegen. So fängt man dann "klein" an und wenn man die meisten Vokabeln seiner Schwierigkeitsstufe (und darunter) kann wird man hochgestuft, schaltet dann neue Vokabeln frei.
Bei einer browserseitigen Lösung mit JavaScript würde ich mir zunächst eine Objektstruktur überlegen, welche die Vokabeln speichern soll.
Ein Array an Objekten (als JSON-Format) wäre hilfreich:
const words = [
{ "de": "Wort", "en": "word" },
{ "de": "Satz", "en": "sentence" },
// etc. ...
];
Der Vorteil wäre an dieser Stelle, dass diese Struktur flexibel ist. Die Wörter werden assoziativ zu ihren Übersetzungen gespeichert und bei Bedarf könnte man noch weitere Sprachen hinzufügen.
Wenn gefordert, könnte man diese Struktur sogar noch weiter ausbauen / verschachteln. So wäre es möglich, je Wort noch verschiedene Metainformationen (wie z.B. die Aussprache) zu halten.
Diese JSON-Struktur würde ich direkt als (JSON-)Datei speichern. Wenn sie via HTTP Request erreichbar ist, kann dein Skript sie initial aufrufen und in dein Programm (deine Variable) einflößen (Stichwort: AJAX-Request).
Zur Verwaltung dieser Wortliste sollte es Funktionen geben, die es erlauben, Einträge hinzuzufügen, zu suchen, sie zu entfernen oder zu bearbeiten.
Für die allererste Befüllung muss man vielleicht nur eine Sprache pflegen. Die vorhandenen Wörter kann man folgend (initial) an eine Übersetzungs-API schicken. Pons, Google Translate, dict, ... es lässt sich auf jeden Fall etwas passendes finden. Außer, man möchte unbedingt auf explizite Vokabeln prüfen.
Generell kann man sich dafür ein gleiches Interface schreiben. Es bedarf ja nur eines Textfelds mit Button. Im Textfeld werden separiert alle Wörter eingelesen und in die Wortliste eingefügt.
Die entstandene Struktur lässt man sich dann als String ausgeben und kopiert sie anschließend einfach in die JSON-Datei.
Zu guter Letzt fehlt nur noch die Programmlogik, die allerdings ziemlich einfach ist. Für die Webseite bedarf es einer Eingabemöglichkeit für den Nutzer, dazu sollte es Button und Ausgabefläche geben. Mittels Funktionen der DOM API kann man nun die Eingaben auslesen und Feedback / gefragte Vokabeln setzen. Ein Beispiel dafür hast du ja bereits bekommen.
Somit brauchst du nur noch eine Strategie, wie du die Vokabeln abfragst. Entweder plump die Liste durch, von oben nach unten oder mit irgendeinem Zufallsprinzip.
Danke für deine Antwort! Aber um ehrlich zu sein, hat mich das gerade ziemlich überrumpelt. Vor allem hat mich das mit JSON verwirrt. Ist das was du vorgeschlagen hast dann wie eine Datenbank und die muss ich dann mit meinem Programm verbinden?
Daten kann man entweder in einer Datenbank persistent speichern oder in einer Datei. Ich schlage eine Datei vor, die ihre Daten im JSON-Format speichert, denn dieses Format ist mit JavaScript gut kompatibel und die Methodik ist einfach.
Die Datei muss folgend nur noch über eine URL erreichbar sein, damit JavaScript die Daten auslesen kann. Das heißt, es reicht aus, sie im Verzeichnis abzulegen, in dem auch die Webseite liegt. Folgend wird ein AJAX-Request gegen die URL abgefeuert, um die Daten zu erhalten.
Ich hoffe es ist okay, wenn ich dich noch etwas frage. Ich habe jetzt mir paar Sachen durchgelesen und habe versucht in einer extra Datei ein JSON-Array anzulegen. Naja hat irgendwie nicht so geklappt. Dann habe ich in ein paar Youtube Videos gesehen, dass die des einfach in html bei <script></script> reingeschrieben haben. Keine Ahnung, ob es dann überhaupt ein JSON-Format ist. Jetzt weiß ich aber nicht wie ich auf die Länge des JSON-Arrays zugreife. Ich zeig dir meinen Quellcode und habe dann auch einfach irgendwas ausprobiert, aber es hat nicht so ganz funktioniert. Vielleicht kannst du mir weiterhelfen.
<script>
var index;
vokabeln = {
"en" : ["house", "hello", "bye"],
"de" : [ "Haus", "Hallo", "Tschüss" ]
};
window.onload = () =>{
index = Math.floor(Math.random() * Object.keys(de[i]).length)
document.getElementById("vokabel").value = vokablen.de[index]
}
function Pruefen(){
if(document.getElementById("loesung").value == vokabeln.en[index])
alert("richtig!")
else
alert("falsch :(");
}
</script>
@regex9 Ich brauch ja die Länge für das Zufallsprinzip
vocabulary.json:
[
{ "de": "Haus", "en": "house" },
{ "de": "hallo", "en": "hello" },
{ "de": "tschüss", "en": "bye" },
/* etct. ... */
]
Im Grunde sind es einfach nur Objekte in einem Array. Deshalb ist das JSON-Format so kompatibel zu JavaScript. Die Dateiendung ist im Übrigen egal - ob .txt oder .json - der Text wird später einfach nur ausgelesen und nochmal geparst.
Die Wörter sollten assoziativ zueinander - also als Paare gespeichert werden. Das ist sicherer, als wenn du zwei Arrays nebeneinander laufen lässt, bei denen du bei der Pflege schnell versehentlich die Reihenfolge verdrehen könntest, o.ä..
Die Daten würde ich in einer eigenen Datei speichern, denn so bleibt das Skript einfacher überschaubar.
index.js:
// create XMLHttpRequest object ...
request.addEventListener("readystatechange", function() {
if (this.readyState === 4 && this.status === 200) {
start(JSON.parse(this.responseText));
}
});
// send request ...
function start(vocabulary) {
// your vocabulary trainer code ...
}
Da in vocabulary nun einfach nur das Array steht, welches in der Datei angeführt wurde, kann die Länge auf altbekanntem Wege ermittelt werden.
const numberOfWords = vocabulary.length;
Zugriff auf bspw. das zweite englische Wort:
console.log(vocabulary[1].en);
// or:
console.log(vocabulary[1]["en"]);
Danke für das Erklärung. Ich habe mich jetzt trotzdem für "normale" Arrays entschieden. Keine Ahnung, aber das verstehe ich eher, auch wenn das wahrscheinlich unübersichtlicher ist. Trotzdem vielen Dank. Vielleicht werde ich mir das für ein anderes Projekt nochmal anschauen :)
Wenn du kein Profi bist kann noch so ein Langer Text dir nicht Helfen 😬
Du musst dich in die Programmiersprache einlesen und sie auch Verstehen, geh doch in ein Programmierkurs oder ähnliches.
Danke für deine Antwort! Also ganz neu bin ich nicht. Ich habe schon kleine Spiele mit JavaScript programmiert. Aus dem Vokabeltrainer wollte ich jetzt nichts großes machen. Ich habe mich schon informiert, dass es mit Datenbanken einfacher ist. Meine Idee war aber eigentlich, dass der User eine z.B. Deutsches Wort bekommt und das dann übersetzen soll. Deswegen verstehe ich nicht ganz wie mir Datenbanken helfen sollen. Dort werden ja nur Datensätze gespeichert. Oder kann man dann diese auch aufrufen und mit dem Wort vergleichen, welches der User eingetippt hat