Hallo Ihr lieben,
ich hoffe Ihr könnt mir helfen.
Für die Übung und um zwei Hobbys zu verbinden, versuche ich einen eigenen Vokabeltrainer für Deutsch-Spanisch zu schreiben.
Soweit funktioniert mein Test bisher auch, jedoch möchte ich noch einen Zähler einbauen, der die korrekten und falschen Antworten mit zählt und anzeigt.
Genau hier stoße ich aber an meine Grenzen, dadurch dass die Seite nach jeder bestätigten Vokabel neu lädt, wird mir der Wert meiner Variable "richtig" immer wieder auf den Ursprung zurück gesetzt. Ich habe es bisher noch nicht herausgefunden, wie ich das umgehen kann. Auch mit session.Storrage habe ich es versucht, dann springt der Zähler auf 1 aber nicht weiter. Vielleicht kann mir von euch ja einer den entscheidenden klapps auf den Hinterkopf geben.
Vielen Dank an euch.
Viele Grüße
Wan
Hier mein Code HTML + JS bisher:
<!DOCTYPE html>
<head>
<title>Spanisch Vokalbeltrainer</title>
<meta charset="utf-8">
<meta lang="de">
<link type="text/css" rel="stylesheet" href="">
</head>
<body>
<h1>Spanisch Vokabeltrainer</h1>
<p>Vokabel:</p>
<!-- Hier wird die deutsche Vokabel eingefügt -->
<p id="vokabel"></p>
<p>Übersetzung:</p>
<!-- Hier gibt der User die Übersetzung ein -->
<form>
<input type="text" id="uebersetzung">
<button type="submit" onclick="auswerten()">Absenden</button>
</form>
<script>
var richtig = 0;
var falsch = 0;
//Array mit den deutschen Wörtern
var deutsche_woerter = ["Hallo", "Tschüss", "Freund"];
//Array mit den spanischen Wörtern
var spanische_woerter = ["Hola", "Adios", "Amigo"];
//Für eine zufällige Auswahl an Vokabeln
var rand = deutsche_woerter[Math.floor(Math.random() * deutsche_woerter.length)];
console.log("Vokabel: "+rand);
//Um die Indexnummer der zufälligen Auswahl zu erfahren
var number = deutsche_woerter.indexOf(rand);
console.log("Indexnummer der Vokabel: "+number);
//die deutsche Vokabel einfügen
document.getElementById("vokabel").innerHTML = (rand);
function auswerten() {
//abfangen der Eingabe des Users
user_uebersetzung = document.getElementById("uebersetzung").value;
//Prüfen ob die Übersetzung des Users dem Spanischen Wort im spanische_woerter Array entspricht
//da wir mit der Variable number wissen, welcher Index des deutschen_woerter Arrays angezeigt wird
//muss im Array spanische_woerter der Index natürlich der selbe sein, da deutsche und spanische vokabeln
//in beiden Arrays an der selben stelle stehen.
//Wird also aus der deutschen Liste der erste Wert angezeigt, so muss in der spanischen Liste auch das
//erste Wort als korrekte übersetzung stimmen.
if (user_uebersetzung == spanische_woerter[number]) {
alert("Super!")
richtig++;
}
else if (user_uebersetzung == "") {
alert("Es wurde kein Text eingegeben!")
}
else {
alert("Leider Falsch...")
falsch++;
}
}
console.log("Richtig: "+richtig)
console.log("Falsch: "+falsch)
</script>
</body>
</html>
Alles anzeigen