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.
<!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
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