Array-Schleife und Wahrscheinlichkeit erhöhen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hanna11

Neues Mitglied
29 Juli 2020
27
1
3
17
Hallo, ich programmiere gerade einen Vokabeltrainer und habe die Vokabeln in Arrays gespeichert. Mein Programm läuft auch und man kann die Vokabeln auch abfragen. Ich will jetzt aber nicht, dass aber gezählt wird, wie viele richtige Antworten man gegeben hat und dann die Schleife endet. Ich habe das versucht mit do/while. Jedoch habe ich es so eingestellt, dass wenn man die Vokabeln überprüft sich die Seite neuladet, um nicht immer von Hand die Seite zu refreshen. Das Problem ist jetzt, dass halt dann die richtigen Antworten immer wieder von neu gezählten werden. Hat jemand einen Tipp, wie das möglich wäre. Mein zweites Problem ist, dass ich die Wahrscheinlichkeit erhöhen möchte, dass eine Vokabel aufgerufen wird, wenn sie falsch ist. Dafür habe ich eine Funktion erstellt, die sagt, dass die jeweilige Vokabel ins Array hinzugefügt werden soll. Naja, irgendwie hat das auch nicht funktioniert.
Und eine weitere Frage: Gibt es eine Möglichkeit, dass auf jeden Fall versichert ist, dass alle Vokabeln abgefragt werden. Das wäre mir dann zum Beispiel wichtig, wenn ich mit mehreren Vokabeln arbeite. Danke im Voraus!
Hier ist mein Quellcode:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="designvoc.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vokabeltrainer</title>
</head>
<body>
<p id ="demo"></p>
<div id="website">

  <div class="center">
    <input type="text" id="vokabel">
    <input type="text" placeholder="Lösung" id="loesung" autofocus>
    <button id="pruefen" onclick=Pruefen();javascript:location.reload(); >Überprüfen</button>
    
    </div>

        <script>

var index
var vokablen = ["hallo", "car", "haus", "geld", "ja", "nein", "Vater", "Mutter", "Kind", "danke", "bitte", "Baum", "rot"];
var uebersetzung = ["hello", "auto", "house", "money","yes", "no", "father", "mother", "child", "thank you", "please", "tree", "red"];
richtigeAntwort= 0;
var wiederholung;


var input = document.getElementById("loesung");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("pruefen").click();
  }
});


  index = Math.floor(Math.random() * vokablen.length)
    document.getElementById("vokabel").value = vokablen[index]


function Pruefen(){
    if(document.getElementById("loesung").value == uebersetzung[index])
      alert("richtig!"), richtigeAntwort++;
  else
    alert("falsch :( Die Lösung ist: " + uebersetzung[index]),
    wiederholung=prompt("Gebe " + uebersetzung[index] + " nochmal ein, um die Vokabel zu verinnerlichen");
   alert("Deine richtigen Antworten sind: " + richtigeAntwort++);
}

// Diese Funktion habe ich schon in die if-Abfrage eingebaut, aber es hat dann nicht funktioniert
function myFunction() {
  vokablen.push(vokablen[index]);
 
}
document.getElementById("demo").innerHTML = vokablen;
        </script>

</div>

</body>
</html>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Da bist Du ja schon ein ganzes Stück weiter gekommen! Einen Großteil der Probleme kannst Du lösen, wenn Du die Seite nicht neu lädst, um eine neue Vokabel zu geben, sondern dies gleich bei einer richtigen Antwort tust, d. h. dies:
Code:
  index = Math.floor(Math.random() * vokablen.length)
    document.getElementById("vokabel").value = vokablen[index]
in der Funktion Pruefen, wenn die Antwort richtig war.
 

Hanna11

Neues Mitglied
29 Juli 2020
27
1
3
17
Danke für deine Antwort. Jedoch funktioniert das nicht. Denn entweder das Feld für die Vokabel bleibt leer oder die Seite wird trotzdem neu geladen und die richtigen Antworten bleiben immer bei 1.
 

Hanna11

Neues Mitglied
29 Juli 2020
27
1
3
17
Also es hat jetzt doch funktioniert, dass es sich neulädt und eine neue Vokabel erscheint. Aber die Übersetzung, die ich geschrieben habe, bleibt stehen und man muss das dann erst weglöschen (was für den User schon etwas umständlich ist). Außerdem springt dann bei der zweiten richtigen Antwort der Zähler auf 3 richtige Antworten und bei der dritten richtigen Antwort auf 5.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Das kann man sicher alles leicht korrigieren. Poste doch mal deinen neuesten Code.
 

Hanna11

Neues Mitglied
29 Juli 2020
27
1
3
17
Okay, also ich habe den Fehler gefunden, sodass sich jetzt die Zahl nicht um 2 wächst, sondern nur noch, um eins. (habe irgendwo anstatt richtigeAntwort, richtigeAntwort++ geschrieben :) Und ich habe es geschafft, das bei einer falschen Antwort, diese Vokabel im array hinzugefügt wird, sodass diese öfters drankommen wird. Das Problem, dass man seine Übersetzung erst wegmachen muss, ist immer noch da. Außerdem funktioniert meine Schleife nicht. Der alert nach der Schleife wird nicht ausgeführt. Hier mein Quellcode:
Code:
var index
var vokablen = ["hallo", "car", "haus", "geld", "ja", "nein", "Vater", "Mutter", "Kind", "danke", "bitte", "Baum", "rot"];
var uebersetzung = ["hello", "auto", "house", "money","yes", "no", "father", "mother", "child", "thank you", "please", "tree", "red"];
richtigeAntwort= 0;
var wiederholung;


var input = document.getElementById("loesung");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("pruefen").click();
  }
});


  index = Math.floor(Math.random() * vokablen.length)
    document.getElementById("vokabel").value = vokablen[index]

do {
function Pruefen(){
    if(document.getElementById("loesung").value == uebersetzung[index])
  richtigeAntwort++,     alert("richtig!"),  index = Math.floor(Math.random() * vokablen.length),
    document.getElementById("vokabel").value = vokablen[index];
  else
    alert("falsch :( Die Lösung ist: " + uebersetzung[index]),
    wiederholung=prompt("Gebe " + uebersetzung[index] + " nochmal ein, um die Vokabel zu verinnerlichen"), vokablen.push(vokablen[index]);
   alert("Deine richtigen Antworten sind: " + richtigeAntwort);
   alert(vokablen);
}
}while (richtigeAntwort== 3)

if(richtigeAntwort == 3){
  alert("Super! Du hast 3 Vokabeln richtig geschrieben! Mach eine Pause");
}


document.getElementById("demo").innerHTML = vokablen;
        </script>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Ich habe das mal ein wenig überarbeitet und ich denke, so funktioniert es. Es liegt nahe, eine Schleife zu verwenden, aber IMO ist es ohne einfacher: Einfach innerhalb der Funktion pruefen() prüfen, ob die verlangte Anzahl von Antworten erreicht ist und wenn nicht, eine neue Vokabel vorlegen. Wenn Du es lieber mit einer Schleife machst, ist ein do-while-Schleife schon der richtige Ansatz weil sie ja mindestens einmal durchlaufen werden muss.
Die einzelnen Anweisungen durch Kommas zu trennen, ist zwar richtig und funktioniert, aber sehr ungebräuchlich. Besser konsequent geschweifte Klammern verwenden.
Alles andere habe ich im Code kommentiert.
Code:
    Vokabel: <input id="vokabel">
    Loesung: <input id="loesung">
    Prüfen: <input type="button" id="pruefen" value="Pruefen">
    <script>
        var index
        var vokablen = ["hallo", "car", "haus", "geld", "ja", "nein", "Vater", "Mutter", "Kind", "danke", "bitte", "Baum", "rot"];
        var uebersetzung = ["hello", "auto", "house", "money", "yes", "no", "father", "mother", "child", "thank you", "please", "tree", "red"];
        richtigeAntwort = 0;
        var wiederholung;
        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! Deine richtigen Antworten sind: " + richtigeAntwort);
                // Ist die geforderte Anzahl von richtigen Antworten erreicht
                // geben wir nur eine Rueckmeldung und legen keine neue Vokabel vor
                if (richtigeAntwort == 3) {
                    alert("Super! Du hast 3 Vokabeln richtig geschrieben! Mach eine Pause");
                } else {
                    // Neue Vokabel vorlegen
                    neueVokabel();
                }
            } 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]);
                // Neue Vokabel vorlegen
                neueVokabel();
                alert(vokablen);
            }
        }
        // } while (richtigeAntwort == 3)
        // Diese Funktion legt dem Benutzer eine neue Vokabel vor
        // Der Code wird mehrfach benoetigt, daher in einer Funktion
        function neueVokabel() {
            index = Math.floor(Math.random() * vokablen.length);
            document.getElementById("vokabel").value = vokablen[index];
            // Alte Uebersetzung kann jetzt geloescht werden
            input.value = '';
        }
        // Die erste Vokabel vorlegen
        neueVokabel();


        // document.getElementById("demo").innerHTML = vokablen;
    </script>
 

Hanna11

Neues Mitglied
29 Juli 2020
27
1
3
17
Danke für deine Überarbeitung. Ich werde mal später schauen, ob es funktioniert:smile:
 

Hanna11

Neues Mitglied
29 Juli 2020
27
1
3
17
Also es hat super funktioniert. Nur muss ich jetzt den Knopf "Überprüfen" drücken, damit das ganze funktioniert. Davor konnte ich es mit enter bestätigen. Dafür hatte ich diesen Code:
Code:
var input = document.getElementById("loesung");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("pruefen").click();

Das funktioniert aber jetzt nicht mehr. Des weiteren muss man jetzt erst wieder auf das Feld klicken, um seine Übersetzung zu schreiben. Davor war der Cursor gleich im Feld. Das habe ich so gemacht :
Code:
  <input type="text" placeholder="Lösung" id="loesung" autofocus>
Also mit autofocus. Aber irgendwie verliert es jetzt die Wirkung.
Nachdem die Schleife zu Ende ist möchte ich das angezeigt wird, welche Vokabeln man richtig beantwortet hat. Dafür habe ich einen leeren Array erstellt und die ich füg dann immer die Vokabel zu diesem array hinzu, wenn man es richtig geschrieben hat. Des Problem ist, dass die Vokabeln, die man mehrmals richtig hatte, dan auch mehrmals in dem Array stehen. Kann man das irgendwie verhindern? Oder hast du eine andere Idee, wie man es so machen kann, dass alle Vokabeln abgefragt werden können aus dem Vokabel-Array, weil sonst könnte es ja sein, dass der User manche Vokabeln nie lernt.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Nur muss ich jetzt den Knopf "Überprüfen" drücken, damit das ganze funktioniert. Davor konnte ich es mit enter bestätigen. Dafür hatte ich diesen Code:
Code:
var input = document.getElementById("loesung");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("pruefen").click();

Das funktioniert aber jetzt nicht mehr.
Dafür brauchst Du gar nicht den Keycode abzufragen: Das change-Event triggert, wenn man Enter drückt. Registriere dafür einen Eventlistener und rufe die Funktion pruefen auf. Dann brauchst Du den extra Knopf für das Überprüfen nicht mehr.
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Des weiteren muss man jetzt erst wieder auf das Feld klicken, um seine Übersetzung zu schreiben. Davor war der Cursor gleich im Feld. Das habe ich so gemacht :
Code:
<input type="text" placeholder="Lösung" id="loesung" autofocus>
Also mit autofocus. Aber irgendwie verliert es jetzt die Wirkung.
Dafür gibt es die Funktion focus(), siehe hier:
Damit kannst Du in der Funktion neueVokabel den Fokus auf das Eingabefeld für die Übersetzung legen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Des Problem ist, dass die Vokabeln, die man mehrmals richtig hatte, dan auch mehrmals in dem Array stehen. Kann man das irgendwie verhindern?
Selbstverständlich: Mit der Funktion includes kannst Du prüfen, ob ein Element schon im Array vorhanden ist. Dann nur hinzu fügen, wenn die Vokabel noch nicht drin ist.
 

Hanna11

Neues Mitglied
29 Juli 2020
27
1
3
17
Code:
       var input = document.getElementById("loesung");
       input.addEventListener("keyup", function(event) {
       if (event.keyCode === 13) {
       event.preventDefault();
       document.getElementById("pruefen").click();
  }
});
Das habe ich jetzt hinzugefügt! Ist jetzt nicht, was du vorgeschlagen hast, aber ich hab deins ausprobiert und irgendwie hat es nicht funktioniert (vielleicht war ich auch einfach zu dumm :)). Aber egal so funktioniert es.
 

basti1012

Senior HTML'ler
26 November 2017
1.348
136
63
39
Minden
sebastian1012.bplaced.net
Das muss auch mal sein:
@Hanna11 ich muss dir ein paar Respekt Punkte geben.

Wenn ich noch an deinen ersten Beitrag denke und jetzt sehe wie du die Vorschläge von @Sempervivum umsetzt und auch zu verstehen scheinst, ist schon echt Toll.
Selten ein Neuling gesehen der soviel selber macht und auch so schnell lernt.
Mach weiter so
 

Hanna11

Neues Mitglied
29 Juli 2020
27
1
3
17
@Sempervivum Das mit dem include hat auch funktioniert. Jedoch bin ich auf ein Fehler gestoßen, denn ich nicht erklären kann. Wenn man ein Wort falsch geschrieben hat, kommt der alert("falsch") und man muss das Wort nochmal eingeben. Aber wenn dann dieses Wort in der Abfrage nochmal dran kommt. Dann egal, ob man es richtig oder falsch schreibt, wird es als falsch gewertet und dann steht bei meinem alert: Die Lösung ist: undefined (dort müsstet dann eigentlich die richtige Lösung stehen) Hier ist mein Code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="designvoc.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vokabeltrainer</title>
</head>
<body>

<div id="übersicht"> Richtig beantwortete Vokabeln:<p id ="demo"></p> Restliche Vokabeln: <span id="rechnen"></span></div>
<div id="website">


  <div class="center">
  <span id="abstand"> <input  type="text" id="vokabel"></span>
    <input type="text" placeholder="Lösung" id="loesung" autofocus>
   <div id="submit"> <button id="pruefen" onclick=Pruefen();>Überprüfen</button> </div>
    
    </div>

        <script>
var richtigeVokabeln, text;
var index;
var rechnung;
var erg;
        var vokablen = ["hallo", "car", "haus", "geld", "ja", "nein", "Vater", "Mutter", "Kind", "danke", "bitte", "Baum", "rot"];
        var vokablen2 = ["hallo", "car", "haus", "geld", "ja", "nein", "Vater", "Mutter", "Kind", "danke", "bitte", "Baum", "rot"];
        var uebersetzung = ["hello", "auto", "house", "money", "yes", "no", "father", "mother", "child", "thank you", "please", "tree", "red"];
        richtigeVokabeln = [ ];
        richtigeAntwort = 0;
        var wiederholung;

       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 (document.getElementById("loesung").value == uebersetzung[index]) {
                
                richtigeAntwort++;
                
                alert("richtig! Deine richtigen Antworten sind: " + richtigeAntwort);
                erg=richtigeVokabeln.includes(uebersetzung[index]);
                
                if(erg == false){
                richtigeVokabeln.push(uebersetzung[index]);}
              
                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;
            

                } else {
                    
                    neueVokabel();
                }
            } else {
            
                alert("falsch :( Die Lösung ist: " + uebersetzung[index]);
                wiederholung = prompt("Gebe " + uebersetzung[index] + " nochmal ein, um die Vokabel zu verinnerlichen");
                vokablen.push(vokablen[index]);
              
                neueVokabel();
                alert(vokablen);
            }
        }
      
        function neueVokabel() {
            index = Math.floor(Math.random() * vokablen.length);
            document.getElementById("vokabel").value = vokablen[index];
            document.getElementById("loesung").focus();
          
            input.value = '';
        }
      
        neueVokabel();
        </script>
        <body>
        </html>
Ich finde einfach nicht meinen Fehler.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Mir scheint, ich sehe woran das liegt. Hier:
Code:
                    alert("falsch :( Die Lösung ist: " + uebersetzung[index]);
                    wiederholung = prompt("Gebe " + uebersetzung[index] + " nochmal ein, um die Vokabel zu verinnerlichen");
                    vokablen.push(vokablen[index]);

                    neueVokabel();
                    alert(vokablen);
hängst Du die Vokabel an das Ende des Arrays an. Dann fehlt dafür das Gegenstück im Array uebersetzung. Wenn Du die Übersetzung dort auch hinzu fügst, sollte das den Fehler beheben.
 
Werbung:

Neueste Beiträge