https://i.sstatic.net/HH00Z.png
Currently working on a quiz website using JavaScript, and trying to dynamically fill the color in the box as the quiz progresses with the help of CSS. However, facing some challenges with the code implementation. Any suggestions or insights? It seems like there might be an issue with the game.js class not being able to locate progressBarFull. Any assistance or guidance would be highly appreciated.
//////game.js/////
const question = document.getElementById('question');
const choices = Array.from(document.getElementsByClassName('choice-text'));
const progressText = document.getElementById('progressText');
const scoreText = document.getElementById('score');
const progressBarFull = document.getElementById('progressBarFull');
let currentQuestion = {};
let acceptingAnswer = false;
let Score = 0 ;
let QuestionCounter = 0;
let AvailableQuestion = [];
let questions = [
{
question:"Inside which HTML element do we put JavaScript?",
choice1: "<script>",
choice2: "<javascript>",
choice3: "<js>",
choice4: "<scripting>",
answer: 1
},
{
question:"What is correct syntax for referreing to an external script called xxx.js",
choice1: "<script href='xxx.js'>",
choice2: "<script name='xxx.js'>",
choice3: "<script src='xxx.js'>",
choice4: "<script file='xxx.js'>",
answer: 3
},
{
question:"How do you write Hello in an alert box",
choice1: "msgbox('Hello World')",
choice2: "alertbox('Hello World')",
choice3: "msg('Hello World')",
choice4: "alert('Hello World')",
answer: 4
},
]
// Constants
const CORRECT_BONUS = 10;
const MAX_QUESTIONS = 3;
const INCORRECT = 10;
startgame = ( ) =>{
QuestionCounter=0;
Score=0;
AvailableQuestion=[...questions];
console.log(AvailableQuestion);
getNewQuestion();
};
getNewQuestion =()=> {
if(AvailableQuestion.length == 0 || question>= MAX_QUESTIONS){
// Go to the endpage
return window.location.assign('/end.html');
}
QuestionCounter++;
progressText.innerText = `Question ${QuestionCounter} / ${MAX_QUESTIONS}`;
// Update The ProgressBar
progressBarFull.style.width = `${(QuestionCounter / MAX_QUESTIONS) * 100}
%`
console.log((QuestionCounter / MAX_QUESTIONS) * 100)
const questionIndex = Math.floor(Math.random() * AvailableQuestion.length);
currentQuestion = AvailableQuestion[questionIndex];
question.innerText = currentQuestion.question;
// foreach iterates through the choices
choices.forEach( choice => {
const number = choice.dataset['number'];
// getting number from data-number --- game.html
choice.innerText = currentQuestion['choice' + number]
})
AvailableQuestion.splice(questionIndex, 1);
acceptingAnswer = true
};
choices.forEach(choice => {
choice.addEventListener("click", e=> {
if(!acceptingAnswer) return;
acceptingAnswer = false;
const selectedChoice = e.target;
const selectedAnswer = selectedChoice.dataset["number"];
// Different ways of using conditions
// const classToApply = 'incorrect';
// if(selectedAnswer == currentQuestion.answer){
// classToApply = 'correct;'
// }
const classToApply = selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
if (classToApply === 'correct'){
incrementScore(CORRECT_BONUS)
}
else{
decrementScore(INCORRECT)
}
// console.log(classToApply)
selectedChoice.parentElement.classList.add(classToApply)
setTimeout(() => {
selectedChoice.parentElement.classList.remove(classToApply)
getNewQuestion()
}, 250);
// console.log(selectedAnswer == currentQuestion.answer)
})
})
incrementScore = num => {
Score += num;
scoreText.innerText = Score;
}
decrementScore = num => {
Score -= num;
scoreText.innerText = Score;
}
startgame()
/////game.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>Game - Play</title>
<link rel="stylesheet" href="app.css" >
<link rel="stylesheet" href="game.css">
</head>
<body>
<div class="container">
<div id="game" class="justify-center flex-column">
<div id="hud">
<div id="hud-item">
<p id="progressText" class="hud-prefix">
Question
</p>
<div id="progressBar">
<div id="progressBarFull"> </div>
</div>
</div>
<div id="hud-item">
<p class="hud-prefix">
Score
</p>
<h1 class="hud-mainText" id="score">
0
</h1>
</div>
</div>
<h2 id="question">
Answer to this question?
</h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1">Choice 1</p>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<p class="choice-text" data-number="2">Choice 2</p>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<p class="choice-text" data-number="3">Choice 3</p>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<p class="choice-text" data-number="4">Choice 4</p>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
//////game.css////
.choice-container{
display: flex;
margin-bottom: 0.5rem;
width: 100%;
font-size: 1.8rem;
border:0.1rem solid rgb(86, 235, 0.25);
background-color: white;
}
.choice-container:hover{
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgb(86, 165, 235, 0.5);
transform: translate(-0.1rem);
transition: transfor 150ms;
}
.choice-prefix{
padding:1.5rem 2.5rem;
background-color: #56a5eb;
color: white;
}
.choice-text{
padding: 1.5rem;
width: 100%;
}
.correct{
background-color: #28a745;
}
.incorrect{
background-color: #dc3545;
}
/* HUD */
#hud {
display: flex;
justify-content: space-evenly;
}
.hud-prefix{
text-align: center;
font-size: 2rem;
}
.hud-main-text{
text-align: center;
}
#progressBar{
width: 20rem;
height: 4rem;
border: 0.3rem solid #56a5eb;
margin-top: 0.9rem;
}
#progressBarFull{
height: 3.4rem;
background-color:#56a5eb;
width: 0%;
}