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

[GELOEST] Kroatische Sonderzeichen

H

Hanna11

Mitglied
Hallo, ich arbeite immer noch an meinem Vokabeltrainer. Nun möchte ich auch kroatische Vokabeln unterbringen. In der kroatischen Sprache gibt es aber Sonderzeichen wie zum Beispiel č. In Word kann man diese Sonderzeichen mit einer speziellen Tastenkombination aufrufen, aber in meinem Vokabeltrainer funktioniert diese Tastenkombination nicht. Ich könnte zwar die Sonderzeichen auf der Website zu Verfügung stellen und dann muss der User Copy & Paste verwenden. Das wäre aber ziemlich umständlich. Hat jemand eine Idee, wie ich das machen könnte? Ich habe mir gedacht, dass ich vielleicht meine eigene Tastenkombination für die Sonderzeichen erstelle. Jedoch weiß ich aber nicht wie das geht. Schon mal Danke im Voraus :)
 
Werbung:
Werbung:
Ich habe es mir angeschaut, aber nicht ganz verstanden. Ich habe ja es schon mal mit Enter gemacht
Code: 
var input = document.getElementById("loesung");
       input.addEventListener("keyup", function(event) {
       if (event.keyCode === 13) {
       event.preventDefault();
       document.getElementById("pruefen").click();
  }
});

Aber wie kann ich sagen, dass wenn die Taste gedürckt wird ein Symbol hinzugefügt wird. Bei dem oberen wird ja dann eine Funktion ausgeführt.
 
Aber ist das nicht ein Auswahlliste, die für Formulare eigenlich verwendet wird. Wie soll ich dann das Ausgewählte in meine Eingabebox packen?
 
Werbung:
Hier ist eine Liste wie man die Zeichen mit dem Tastenkombination aufrufen kann,
infothek.rotkel.de

Tastaturkürzel: Buchstaben mit diakritischen Zeichen

Tastaturkürzel für Sonderbuchstaben. Alphabetisch sortierte lateinische Buchstaben mit diakritischen Zeichen - Tastaturkürzel für Windows, Mac, Linux, LaTeX, Html, Unicode.
infothek.rotkel.de infothek.rotkel.de
Ich denke aber das für dein Vokabeltrainer das Select oder Buttons einfacher sind als sich die ganzen Kombinationen zu merken
 
Werbung:
Ich habe es gerade ausprobiert, jedoch funktioniert es nicht. Erstens wird in der einen Box die Vokabeln nicht mehr angezeigt und zweitens wird das Sonderzeichen beim Auswählen nicht in die Eingabebox eingefügt
 
Hab das Problem gefunden. Ich hatte zwei Variabeln, die den gleichen Namen hatten. Jetzt funktioniert alles.
Ich hätte aber nochmal eine Frage:
Bei mir ist es so, dass bei einer falsch geschriebenen Vokabel es die Möglichkeit gibt diese Vokabeln nochmal in ein Kasten zu schreiben. Das habe ich mit prompt gelöst. Ich wollte jetzt auf prompt das Gleiche anwenden wie auf die Eingabebox. Ich hab aber herausgefunden, dass man prompt keine id zuordnen kann und man somit auch nicht wirklich darauf zugreifen kann(also so weit ich weiß). Gibt es da eine andere Möglichkeit?
Ich habe mir eigentlich eh vorgenommen einen eigene Alert-Box zu erstellen, aber ich weiß nicht, ob das auch mit prompt funktioniert.
 
Werbung:
Ich möchte, dass der benutzer einfach nochmal seine Vokabel eingibt, zum verinnerlichen. Es braucht keine Überprüfung. Ich möchte dann das auch bei dieser Eingabe die Sonderzeichen auswählen kann und die dann dort eingefügt werden
 
Ich habe das ausprobiert, aber irgendwie funktioniert das nicht. Jetzt wird manchmal der alert, ob es richtig oder falsch war nicht ausgegeben. Das einzig wichtige für mich ist eigentlich, dass man halt die falsche Vokabel nochmal eingibt. Dafür brauch ich aber auch die kroatischen Sonderzeichen, die man aber nicht durch diese select hinzufügen kann, da prompt ja eigentlich keine eigene Id hat.
 
Hier mein Code
Code: 
 <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>
Ich habe mal den Code für den Musik-Player und die Gestaltung rausgelassen, weil es sonst zu viele Zeichen sind.
 
Werbung:
Ahhh, jetzt habe ich es. Damit wird das prompt komplett weggelassen und man muss sein falsch geschriebenes berichtigen. Dankeschön!
 
Es gibt aber jetzt ein Problem, wenn ich das ganze mit Enter bestätige, funktioniert alles. Aber wenn ich den Button "Überprüfen" verwende, wird beim nochmaligen Hinschreiben es auch als richtig Antwort gewertet. Wie kann ich das beheben.

Eine weitere Anmerkung: Ich finde die Korrektur sehr unübersichtlich. Deswegen wollte ich fragen, ob man die Korrektur eine andere Schriftfarbe geben kann, sodass die Korrektur getrennt wird. Da ansonsten es ziemlich unübersichtlich ist, was jetzt als richtige Antwort gezählt wird und was einfach nur nochmal hingeschrieben wird.
 
Also soll ich den Code
Code: 
 var input = document.getElementById("loesung");
       input.addEventListener("keyup", function(event) {
       if (event.keyCode === 13) {
       event.preventDefault();
       if(status == 'neu') { //das au
            document.getElementById("pruefen").click();
       } else{ //und das
           neueVokabel();
           status = 'neu';
       }
      
  }
});

umändern zu dem Code
Code: 
 input.addEventListener("keyup", function (event) {
            if (event.keyCode === 13) {
                event.preventDefault();
                document.getElementById("pruefen").click();
            }
        });
Denn ich habe, denn Code so wie beim ersten gelassen und dann hat es auch funktioniert.
Hast du noch eine Idee zu meinem zweiten "Problem"
 
Werbung:
Okay, wow! Ich habe nicht gedacht, dass das mit der Farbe so einfach geht. Ich habe jetzt gedacht ich muss Css dafür verwenden. Danke!
Dann lass ich den Code einfach so:
Code: 
var input = document.getElementById("loesung");
       input.addEventListener("keyup", function(event) {
       if (event.keyCode === 13) {
       event.preventDefault();
       if(status == 'neu') { //das au
            document.getElementById("pruefen").click();
       } else{ //und das
           neueVokabel();
           status = 'neu';
       }
      
  }
});
 
Oki, stimmt. Ich habe nur gedacht, dass er komplizierte ist.
Ich habe es ausprobiert, aber die Farbe ändert sich nicht zurück zu schwarz.

Code: 
 function pruefen() {
            if(status == 'wiederholung'){
                 // Status Wiederholung: Der Benutzer hat die falsche
                // Vokabel erneut eingegeben und Enter gedrueckt
                // Neue Vokabel vorlegen
                neueVokabel();
                status = 'neu';
                input.style.color ='black';
            }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben