<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>
</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 = ["schwarz", "aber", "braun"];
var vokablen2 = ["schwarz", "aber", "braun"];
var uebersetzung = ["crna", "ali", "smeđe"];
richtigeVokabeln = [ ];
falscheVokabeln = [ ];
richtigeAntwort = 0;
var wiederholung;
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);
// In dieser Form machte die Schleife keinen Sinn: Die Endebedingung (richtigeAntwort == 3)
// ist nie erfuellt, da die Variable richtigeAntwort den Wert 0 hat
// Daher wird die Schleife genau einmal durchlaufen
// do {
// Diese Funktion prueft ob die Uebersetzung richtig eingegeben wurde
// und legt ggf. eine neue Vokabel vor
function pruefen() {
// 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 + " richtig beantwortet!");
erg=richtigeVokabeln.includes(uebersetzung[index]);
if(erg == false){
richtigeVokabeln.push(uebersetzung[index]);}
// Ist die geforderte Anzahl von richtigen Antworten erreicht
// geben wir nur eine Rueckmeldung und legen keine neue Vokabel vor
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();
}
if (richtigeAntwort == 20) {
alert("Super! Du hast 20 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();
}
if (richtigeAntwort == 30) {
alert("Super! Du hast 30 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();
}
if (richtigeAntwort == 40) {
alert("Super! Du hast 40 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();
}
if (richtigeAntwort == 50) {
alert("Super! Du hast 50 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();
}
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]);
wiederholung = prompt("Gebe " + uebersetzung[index] + " nochmal ein, um die Vokabel zu verinnerlichen");
vokablen.push(vokablen[index]);
uebersetzung.push(uebersetzung[index]);
erg2=falscheVokabeln.includes(uebersetzung[index]);
if(erg2 == false){
falscheVokabeln.push(uebersetzung[index]);}
// Neue Vokabel vorlegen
neueVokabel();
alert(vokablen);
}
}
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>