Hallo, ich arbeite an einem Vokabeltrainer und habe nun verschiedenen Lektionen. Bis jetzt funktioniert auch alles sehr gut. Nur bei einer Lektion wird man, wenn man alle Vokabeln richtig beantwortet hat nicht zurück geleitet manchmal wird dann auch keine neue Vokabel angezeigt, sondern es steht dort einfach nur undefined. Ich hoffe jemand kann mir helfen. Meine Code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Stylecodes/design4.css">
<link rel="stylesheet" href="Stylecodes/Main.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lektion 4</title>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="float2">
<div class="kasten2">Falsch beantwortete Vokabeln:<p id="wrong"></p> Wiederhole diese öfter!</div></div>
<div class="kasten"> Richtig beantwortete Vokabeln:<p id ="demo"></p> Restliche Vokabeln: <span id="rechnen"></span> </div>
</div>
<div id="website">
<h1 style="text-align: center; color:indianred; text-decoration: underline;">Lektion 4: Zeit</h1>
<div class="center">
<span id="abstand"> <input type="text" id="vokabel"></span>
<input type="text" placeholder="Lösung" id="loesung" autofocus> <select id="sonderzeichen">
<option></option>
<option>đ</option>
<option>ć</option>
<option>ž</option>
<option>č</option>
<option>š</option>
</select>
<div class="frame"> <button class="custom-btn btn-2" id="pruefen" onclick=Pruefen();>Überprüfen</button> </div>
</div>
<script>
var richtigeVokabeln, text;
var index;
var rechnung;
var erg;
var erg2;
var vokablen = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag", "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", "Frühling", "Sommer", "Herbst", "Winter", "Heute", "Morgen", "Gestern", "Jeden Tag", "Jetzt", "Frohe Weihnachten", "Frohe Ostern", "Frohes neues Jahr", "Mittag", "Nachmittag", "Mitternacht", "Stunde", "Minute", "Sekunde", "Uhr", "2 Uhr", "7 Uhr", "10:30 Uhr", "15 Uhr", "Vorgestern", "Übermorgen"];
var vokablen2 = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag", "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", "Frühling", "Sommer", "Herbst", "Winter", "Heute", "Morgen", "Gestern", "Jeden Tag", "Jetzt", "Frohe Weihnachten", "Frohe Ostern", "Frohes neues Jahr", "Mittag", "Nachmittag", "Mitternacht", "Stunde", "Minute", "Sekunde", "Uhr", "2 Uhr", "7 Uhr", "10:30 Uhr", "15 Uhr", "Vorgestern", "Übermorgen"];
var uebersetzung = ["ponedjeljak", "utorak", "srijeda", "četrvrtak", "petak", "subota", "nedjelja", "siječanj", "veljača", "ožujak", "travanj", "svibanj", "lipanj", "srpanj", "kolovoz", "rujan", "listopad", "studeni", "prosianc", "proljeće", "ljeto", "jesen", "zima", "danas", "sutra", "jučer", "svaki dan", "sada", "sretan božić", "sretan uskrs", "sretna nova godina", "podne", "poslijepodne", "ponoć", "sat", "minuta", "sekunda", "sat", "dva sat", "sedam sati ujutro", "deset sati i trideset minuta", "tri sata popodne/petnaest sati", "prekjučer", "prekosutra"];
richtigeVokabeln = [ ];
falscheVokabeln = [ ];
richtigeAntwort = 0;
var wiederholung;
var status ='neu' //das dann au
const input2 = document.getElementById("loesung");
const select = document.getElementById("sonderzeichen");
select.addEventListener("change", function (event) {
const zeichen = this.value;
input2.value += zeichen;
this.selectedIndex = 0;
document.getElementById("loesung").focus();
});
var input = document.getElementById("loesung");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("pruefen").click();
}
});
var input = document.getElementById("loesung");
document.getElementById('pruefen').addEventListener("click", pruefen);
function pruefen() {
if(status == 'wiederholung'){
neueVokabel();
status = 'neu';
input.style.color ='black';
} else {
// Pruefen ob die Uebersetzung richtig ist
if (document.getElementById("loesung").value == uebersetzung[index]) {
// Anzahl der richtigen Antworten erhoehen
richtigeAntwort++;
// Rueckmeldung an den Benutzer
alert("Richtig! Du hast " + richtigeAntwort + " Vokabeln richtig beantwortet!");
erg=richtigeVokabeln.includes(uebersetzung[index]);
if(erg == false){
richtigeVokabeln.push(uebersetzung[index]);}
vokablen.splice(index, 1);
alert(vokablen);
uebersetzung.splice(index, 1);
if (richtigeAntwort == 10) {
alert("Super! Du hast 10 Vokabeln richtig geschrieben! Mach eine Pause");
text = "<ul>";
richtigeVokabeln.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;
function myFunction(value) {
text += "<li>" + value + "</li>"; }
rechnung= vokablen2.length - richtigeVokabeln.length;
document.getElementById("rechnen").innerHTML = rechnung;
text = "<ul>";
falscheVokabeln.forEach(myFunction);
text += "</ul>";
document.getElementById("wrong").innerHTML = text;
function myFunction(value) {
text += "<li>" + value + "</li>"; }
neueVokabel();
} else {
// Neue Vokabel vorlegen
neueVokabel();
}
else {
// Neue Vokabel vorlegen
neueVokabel();
}
if (richtigeVokabeln.length == vokablen2.length){
alert("Sehr gut! Du hast alle Vokabeln richtig beantwortet. Du kehrst jetzt zurück zum Hauptmenü. Komm einfach wieder, um weiter zu lernen");
window.location.href = "Hauptmenü.html";
}
} else {
// Falsche Uebersetzung: Rueckmeldung an Benutzer
alert("Falsch :( Die Lösung ist: " + uebersetzung[index]);
alert("Gebe " + uebersetzung[index] + " nochmal ein, um die Vokabel zu verinnerlichen"); //war ursprünglich ein prompt
vokablen.push(vokablen[index]);
status = 'wiederholung'; // das auch weglassen
input.focus(); //das auch
input.style.color='firebrick';
uebersetzung.push(uebersetzung[index]);
erg2=falscheVokabeln.includes(uebersetzung[index]);
if(erg2 == false){
falscheVokabeln.push(uebersetzung[index]);}
// Neue Vokabel vorlegen
// neueVokabel(); das wurde geändert kommentar wegmachen
}
}}
function neueVokabel() {
index = Math.floor(Math.random() * vokablen.length);
document.getElementById("vokabel").value = vokablen[index];
document.getElementById("loesung").focus();
// Alte Uebersetzung kann jetzt geloescht werden
input.value = '';
}
// Die erste Vokabel vorlegen
neueVokabel();
</script>
</body>
</html>