I'm trying to make a quiz game for a school project and it's not doing its function (Like showing the answer options). And I've got the "Uncaught ReferenceError ReferenceError: question is not defined".
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spēle</title>
<style>
.box{
max-width: 18rem;
text-align: center;
border: 2px solid black;
border-radius: 8px;
padding: 8px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="container box">
Spēle, "Kā sauc šo pilsētu?"
<hr>
<div id="question-title">
Question title
</div>
<div id="option-list">
<input type="radio" id="0" name="0"> option value</input>
</div>
<div id="score-area">
Score Area
</div><button id="submit">Iesniegt!</button><br>
<button id="start">Sākt!</button><br>
<button id="play-again">Spēlēt vēlreiz!</button>
</div><!-- Database-->
<script src="script.js"></script>
<script>
// definē variantus:
let questionNo = 0;
let score = 0;
let question_title = document.getElementById(question-title);
let option_list = document.getElementById(option-list);
let score_area = document.getElementById(score-area);
let btn_submit = document.getElementById(submit);
let start = document.getElementById(start);
let play_again = document.getElementById(play-again);
// paslepjam dažas lietas
hideItems(question_title);
hideItems(options_list);
hideItems(btn_submit);
hideItems(play_agian);
hideItems(score_area);
// Starta poga uz klikšķa
start.addEventListener('click', function () {
show(question_title);
show(option_list);
show(btn_submit);
loadQuestions();
hideItems(start);
});
function loadQuestions() {
// parbaudi vai ir jautājami jautājumi
if (questionNo < data.lengt) {
let q = data[questionNo].qs;
let optionsArray = data[questionNo].options;
// Parādīt jautājumus:
question_title.innerText = q;
// Parādīt opcijas:
option_list.innerText = "";
for (let i =0; i < 4; i++) {
option_list.innerHTML = options_list.innerHTML +
`
<input type="radio" id="${i}" name="${question_title}">${optionsArray[i]}</input>
`;
}
}else{
console.log("no more question")
show(score_area);
score_area.innerText = "Pareizās atbildes: " + score;
hideItems(btn_submit);
show(play_again);
}
}
play_again.addEventListener("click", function() {
location.reload();
})
btn_submit.addEventListener('click', function () {
let id = getCheckedId();
try {
if (id == data[questionNo].answerId) {
score++;
console.log("correct answer")
}
} catch (error) {
}
questionNo++;
loadQuestions();
})
function getCheckedId() {
for (let i = 0; i < 4; i++) {
if (document.getElementById(i).checked)
console.log("you selected:"+ i)
return i;
}}
function hideItems(element) {
element.style.display = "none";
}
function showItems(element) {
element.style.display = "block";
}
</script>
</div>
</body>
</html>
Script.js
var data= [
{
"qs": "1. Pilsēta",
"options": [
"Rīga",
"Kuldīga",
"Jēkabpils",
"Talsi"
],
"answerId": 2
},
{
"qs": "2. Pilsēta",
"options": [
"Ogre",
"Liepāja",
"Snēpele",
"Daugavpils"
],
"answerId": 1
},
{
"qs": "3. Pilsēta",
"options": [
"Tukums",
"Grobiņa",
"Cēsis",
"Priekule"
],
"answerId": 4
},
{
"qs": "4. Pilsēta",
"options": [
"Basi",
"Ezere",
"Saldus",
"Turlava"
],
"answerId": 3
},
{
"qs": "5. Pilsēta",
"options": [
"Kandava",
"Valmiera",
"Rūjiena",
"Krāslava"
],
}
]
I tried to make a quiz game with images (For cities like "Whats the city called" from the image and there's four options on which one is the correct city.) but sort of failed because its not doing its thing and I am a beginner at coding. It was supposed to show ua picture of a city and you have to check the correct answer. Once you've submitted the answer you receive another question and so on until you've answered all of the questions and it shows your score and gives you a option to "play again".
I think that you should have used quotation marks "" in the parameter
let question_title = document.getElementById("question-title");
let option_list = document.getElementById("option-list");
let score_area = document.getElementById("score-area");
let btn_submit = document.getElementById("submit");
let start = document.getElementById("start");
let play_again = document.getElementById("play-again");
So it can recognizes the value as a string and finds the element using its ID, since there is no quotation marks "", it is trying to find a variable named question that does not exists so a error is returned saying this variable is not defined.
Also, it is not trying to find a variable named question-title because the minus character - is invalid for variable names.
You are defining the function as showItems()
function showItems(element) {
element.style.display = "block";
}
but you are always calling it as show()
show(question_title);
show(option_list);
show(btn_submit);
you should call it using showItems()
showItems(question_title);
showItems(option_list);
showItems(btn_submit);
You should remove the s in theses lines
hideItems(options_list);
option_list.innerHTML = options_list.innerHTML +
`
<input type="radio" id="${i}" name="${question_title}">${optionsArray[i]}</input>
`;
You should write it correctly
hideItems(play_agian);
You should write it correctly
if (questionNo < data.lengt)
So you should write it in the beginning of the script, so the program knows what is it and how it works when you call
<script>
function getCheckedId() {
for (let i = 0; i < 4; i++) {
if (document.getElementById(i).checked)
console.log("you selected:"+ i)
return i;
}}
function hideItems(element) {
element.style.display = "none";
}
function showItems(element) {
element.style.display = "block";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spēle</title>
<style>
.box{
max-width: 18rem;
text-align: center;
border: 2px solid black;
border-radius: 8px;
padding: 8px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="container box">
Spēle, "Kā sauc šo pilsētu?"
<hr>
<div id="question-title">
Question title
</div>
<div id="option-list">
<input type="radio" id="0" name="0"> option value</input>
</div>
<div id="score-area">
Score Area
</div><button id="submit">Iesniegt!</button><br>
<button id="start">Sākt!</button><br>
<button id="play-again">Spēlēt vēlreiz!</button>
</div><!-- Database-->
<script src="script.js"></script>
<script>
// Functions needs to go before using them
function getCheckedId() {
for (let i = 0; i < 4; i++) {
if (document.getElementById(i).checked)
console.log("you selected:"+ i)
return i;
}}
function hideItems(element) {
element.style.display = "none";
}
function showItems(element) {
element.style.display = "block";
}
// definē variantus:
let questionNo = 0;
let score = 0;
let question_title = document.getElementById("question-title");
let option_list = document.getElementById("option-list");
let score_area = document.getElementById("score-area");
let btn_submit = document.getElementById("submit");
let start = document.getElementById("start");
let play_again = document.getElementById("play-again");
// paslepjam dažas lietas
hideItems(question_title);
hideItems(option_list);
hideItems(btn_submit);
hideItems(play_again);
hideItems(score_area);
// Starta poga uz klikšķa
start.addEventListener('click', function () {
showItems(question_title);
showItems(option_list);
showItems(btn_submit);
loadQuestions();
hideItems(start);
});
function loadQuestions() {
// parbaudi vai ir jautājami jautājumi
if (questionNo < data.length) {
let q = data[questionNo].qs;
let optionsArray = data[questionNo].options;
// Parādīt jautājumus:
question_title.innerText = q;
// Parādīt opcijas:
option_list.innerText = "";
for (let i =0; i < 4; i++) {
option_list.innerHTML = option_list.innerHTML +
`
<input type="radio" id="${i}" name="${question_title}">${optionsArray[i]}</input>
`;
}
}else{
console.log("no more question")
showItems(score_area);
score_area.innerText = "Pareizās atbildes: " + score;
hideItems(btn_submit);
showItems(play_again);
}
}
play_again.addEventListener("click", function() {
location.reload();
})
btn_submit.addEventListener('click', function () {
let id = getCheckedId();
try {
if (id == data[questionNo].answerId) {
score++;
console.log("correct answer")
}
} catch (error) {
}
questionNo++;
loadQuestions();
})
</script>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.