Beiträge von JahBasti

JahBasti · 23. März 2020

Vielen Dank für die doch augenscheinliche Lösung. Ich habe die Konsole in Sublime Text noch nicht gefunden. Bzw weiß nicht, ob es ratsam ist, auf eine externe Lösung zurückzugreifen.

JahBasti · 22. März 2020

Hallo zusammen,

ich bin neu in dem Forum und auch neu im Programmieren mit JavaScript. Ich arbeite gerade an einem kleinen Quiz, in dem eine Frage und jeweils vier Antwortmöglichkeiten gegeben sind. Dabei richte ich mich nach einem Tutorial, stoße aber auf ein Problem, das ich einfach nicht lösen kann.

Ich habe eine Konstante ("questions") erstellt, die zunächst 5 Dummyfragen mit Antwortmöglichkeiten erhält. Über die Funktion load() sollten die Frage- und Antwortfelder jeweils mit dem ersten Listenpunkt gefüllt werden. Dies geschieht aber nicht. Über Hinweise wäre ich dankbar. Generell möchte ich das Problem so selbständig wie möglich lösen.

html: question soll die Antwort anzeigen, options die Antwortmöglichkeiten. script.js wird aufgerufen.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Arten-Quiz</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="quiz-container">
        <div class="question-number">
            <h3>Frage <span class="question-num-value"></span> von <span class="total-question"></span></h3>
        </div>
        <div class="question">
        </div>
        <div class="options">
            <div id="0" class="option1"></div>
            <div id="1" class="option2"></div>
            <div id="2" class="option3"></div>
            <div id="3" class="option4"></div>
        </div>
        <div class="button">
            <button type="button" class="btn" onclick="next()">Nächste Frage</button>
        </div>
        <div class="remark">
            Die Arten sind leicht zu verwechseln.
        </div>
    </div>

    <script src="script.js"></script>
    
</body>
</html>

Alles anzeigen

JavaScript: Enthält die zuweisenden Konstanten und die Funktion. Datei ist im gleichen Ordner wie die html

Code

const questionNumberSpan=document.querySelector(".question-num-value");
const totalQuestionSpan==document.querySelector(".total-question");
const question=document.querySelector(".question");
const op1=document.querySelector(".option1");
const op2=document.querySelector(".option2");
const op3=document.querySelector(".option3");
const op4=document.querySelector(".option4");
let questionIndex=0;

const questions=[
{
    q:'Welche Art ist das?',
    options:['Zebra', 'Elefant', 'Drossel', 'Tiger'],
    answer:0
},
{
    q:"Welche Art ist das?",
    options:["Affe", "Käfer", "Schwein", "Schwalbe"],
    answer:1
},
{
    q:"Welche Art ist das?",
    options:["Eule", "Hund", "Katze", "Löwe"],
    answer:2
},
{
    q:"Welche Art ist das?",
    options:["Wespe", "Biene", "Hummel", "Mücke"],
    answer:3
}
]

function load(){
    question.innerHTML=questions[questionIndex].q;
    op1.innerHTML=questions[questionIndex].options[0];
    op2.innerHTML=questions[questionIndex].options[1];
    op3.innerHTML=questions[questionIndex].options[2];
    op4.innerHTML=questions[questionIndex].options[3];
}

window.onload=function(){
    load();
}

Alles anzeigen

Wenn noch weitere Informationen benötigt werden, liefere ich sie gerne nach.

Vielen Dank schon einmal und schöne Grüße,

Sebastian

Beiträge von JahBasti

Elemente aus Liste abrufen

Elemente aus Liste abrufen