Javascript Quiz: Mehrere Antworten gelten lassen?


05.03.2024, 11:03
<div class="team-anzeige">
    <h1>Team <p id="team"></p> ist an der Reihe:</h1>
    <br>
    <br>
    <button onclick="btnLos()" id="los" class="los">Los !</button>
    <br>
    <h2 id="div2"></h2>
    <br>
    <br>
    <input id="input" type="text" placeholder="Hier Antwort eintragen">
    <br>
    <br>
    <button onclick="absendeBtn()" class="absenden" id="absenden">Absenden</button>
    </div>

    <script src="main.js"></script>

var team = document.getElementById("team");


05.03.2024, 11:05
var team = document.getElementById("team");
var los = document.getElementById("los");
var absenden = document.getElementById("absenden");


function btnLos() {
    team.innerHTML = "Lehrer";
    input.style.visibility = "visible";
    los.style.display = "none";
    absenden.style.visibility = "visible";

    zufallsfrage = fragen[id];

    document.getElementById("div2").innerHTML = zufallsfrage.frage;
}

function absendeBtn() {
    var input = document.getElementById("input").value;
    if (input == zufallsfrage.antwort) {
        alert("Richtig");
    } else if (input == "") {
        alert("Antwort muss erst eingetragen werden");
    } else {
        alert("Leider falsch");
    }
}

var zufallsgenerator = Math.floor (Math.random() * 1);

const fragen = [];
        fragen[0]= {frage: "WIe viel Euro verdient Harry Kane in einem Jahr?", antwort: ["13 Mio", "13 mio", "13 Millionen", "13 millionen", "13millionen", "13Millionen", "13Mio", "13mio"]};
        fragen[1]= {frage: "Die Hauptstadt von Finnland ist...?", antwort: "Helsinki"};
        fragen[2]= {frage: "Welche Gürtelfarbe existiert nicht im Kampfsport Karate: Rot, Gelb, Orange oder Weiß?", antwort: "Rot"};
        fragen[3]= {frage: "Der Nachname des berühmten Sängers der Beatles: John...?", antwort: "Lennon"};
        fragen[4]= {frage: "Welche Farbe hat der Punkt auf der japanischen Flagge?", antwort: "Rot"};
        
        var id = Math.floor (Math.random() * fragen.length;
whgoffline  05.03.2024, 10:16

Also du willst alle Antworten die in der antwort Liste stehen erlauben...?

ArneH22 
Beitragsersteller
 05.03.2024, 10:50

Exakt

FaTech  05.03.2024, 10:32

Kannst du den Code bitte in einem Codeblock posten und nicht als Bildschirm Fotos? Man kann nur sehr schwer etwas erkennen. Genau dafür sind Codeblöcke da

ArneH22 
Beitragsersteller
 05.03.2024, 10:50

Ok ich versuche es

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

Du kannst ja den | (senkrechter Strich) als Trenner nutzen.

Dann lässt du per Explode ein Array aus den Antworten für die aktuelle Frage erzeugen.

Sobald die Antwort eingegeben wurde, prüfst Du, ob die Antwort im Array ist.

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];


alligator.indexOf("rounded snout"); // returns 3
Woher ich das weiß:eigene Erfahrung

Zu den Millionen kann ich nur sagen, leg dich bei der Antwort lieber auf die Zahl selbst fest, also sprich 13000000 statt da mit verschiedenen Formen vom Wort Millionen zu arbeiten.

Damit alle Antworten sowohl mit verschiedene Groß- und Kleinschreibung zählen, kannst du oben bei der Abfrage, ob input richtig ist, "input.toLowerCase()" verwenden und unten bei den Antwortmöglichkeiten alles klein schreiben.

Dadurch wird das, was der User oben als Antwort abgegeben hat, automatisch komplett kleingeschrieben.

Woher ich das weiß:Studium / Ausbildung – Gelernter Fachinformatiker Anwendungsentwicklung

ArneH22 
Beitragsersteller
 06.03.2024, 07:47

Dankeschön ^^

Dankeschön für eure Tipps.

Ich werde es ausprobieren.

LG Arne ^^