I made a quiz, and the theme is the Harry Potter’s universe.
I made a feature that allow the user to change the theme between the houses (Slytherin, Hufflepuff etc.) before starting the quiz.
But I’ve got a problem. Each time you press validate, to validate your answer, and a function call another question (and its answers), the theme refreshes itself and doesn’t save the chosen one.
Disclaimer: It’s my first post, and I’m not a native English speaker, excuse my language.
Here’s my theme function. It add and replace a class to put the theme on whatever I want on the page :
// Allow to reset a theme :
function resetTheme() {
document.querySelector('.customizable').classList.remove('Serpentard', 'Gryffondor', 'Poufsouffle', 'Serdaigle');
}
function popUp() {
// Logique Slytherin
document.querySelector('#Serpentard').addEventListener('click', () => {
for (const element of document.querySelectorAll('.customizable')) {
element.classList.add('Serpentard')
console.log(element);
}
for (const element of document.querySelectorAll('.customizable')) {
element.classList.remove('Serdaigle', 'Gryffondor', 'Poufsouffle');
console.log(element);
}
})
// Logique Ravenclaw
document.querySelector('#Serdaigle').addEventListener('click', () => {
for (const element of document.querySelectorAll('.customizable')) {
element.classList.add('Serdaigle')
console.log(element);
}
for (const element of document.querySelectorAll('.customizable')) {
element.classList.remove('Serpentard', 'Gryffondor', 'Poufsouffle');
console.log(element);
}
})
// Logique Gryffondor
document.querySelector('#Gryffondor').addEventListener('click', () => {
for (const element of document.querySelectorAll('.customizable')) {
element.classList.add('Gryffondor')
console.log(element);
}
for (const element of document.querySelectorAll('.customizable')) {
element.classList.remove('Serdaigle', 'Serpentard', 'Poufsouffle');
console.log(element);
}
})
// Logique Hufflepuff
document.querySelector('#Poufsouffle').addEventListener('click', () => {
for (const element of document.querySelectorAll('.customizable')) {
element.classList.add('Poufsouffle')
console.log(element);
}
for (const element of document.querySelectorAll('.customizable')) {
element.classList.remove('Serdaigle', 'Gryffondor', 'Serpentard');
console.log(element);
}
})
}
export default popUp;
Here is the question/answer functions :
import createQuestion from "./cardQuestion.js";
import questionsToAsk from "./questionsToAsk.js";
import displayPopup from "./popUp.js";
const QUESTIONS = document.querySelector(".blockQuestion");
const timerElement = document.getElementById('timer');
let currentQuestionIndex = 0;
let score = 0;
let timer;
// Display the question
function displayQuestion(index) {
selectedAnswerId = null;
QUESTIONS.innerHTML = createQuestion(questionsToAsk[index]);
startTimer();
}
// Start the timer (between each question)
function startTimer(timeLeft = 15) {
timerElement.innerHTML = `
<img src="../public/images/hourglass.png" alt="Sablier" class="timer-icon">
<span>${timeLeft}</span>
`;
timer = setInterval(() => {
timeLeft--;
timerElement.innerHTML = `
<img src="../public/images/hourglass.png" alt="Sablier" class="timer-icon">
<span>${timeLeft}</span>
`;
if (timeLeft <= 0) {
clearInterval(timer);
nextQuestion();
}
}, 1000);
}
// Display the next question :
function nextQuestion() {
clearInterval(timer);
currentQuestionIndex++;
if (currentQuestionIndex < questionsToAsk.length) {
displayQuestion(currentQuestionIndex);
} else {
showFinalScore();
}
}
// Final score :
function showFinalScore() {
QUESTIONS.innerHTML = `
<h2>Quiz terminé !</h2>
<p>Votre score : ${score} / ${questionsToAsk.length}</p>
<button id="restart">Rejouer</button>
`;
document.getElementById('restart').addEventListener('click', () => {
location.reload();
});
}
// Verify the answer :
function checkAnswer(selectedAnswer, correctAnswer) {
if (selectedAnswer === correctAnswer) {
score++;
}
nextQuestion();
}
// Start button :
QUESTIONS.innerHTML = '<button id="start">START</button>';
document.getElementById('start').addEventListener('click', () => {
displayQuestion(currentQuestionIndex);
});
// Variable to stock the answer :
let selectedAnswerId = null;
// Event Listener for the event :
QUESTIONS.addEventListener('click', (e) => {
if (e.target.classList.contains('answer-btn')) {
// Réinitialiser tous les boutons
document.querySelectorAll('.answer-btn').forEach(btn => {
btn.classList.remove('selected');
});
// Marquer le bouton cliqué comme sélectionné
e.target.classList.add('selected');
selectedAnswerId = e.target.id;
} else if (e.target.id === 'validate') {
if (selectedAnswerId) {
const correctAnswer = questionsToAsk[currentQuestionIndex].lienValider.slice(1);
checkAnswer(selectedAnswerId, correctAnswer);
} else {
alert("Veuillez sélectionner une réponse avant de valider !");
}
}
});
displayPopup();
main page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Modal</title>
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="styleSerpentard.css">
<link rel="stylesheet" href="Serdaigle">
<link rel="stylesheet" href="Gryffondor">
<link rel="stylesheet" href="Poufsouffle">
<script defer src="script.js"></script>
</head>
<body>
<div id="twp-container">
<div id="twp-overlay">
<div id="twp-popup">
<h2 id="twp-popup-title">Greetings, wizard</h2>
<p class="twp-intro">It seems distraction is on the horizon. Before moving ahead, consider: is this the best direction for your attention right now, or might there be other ways to use this moment?</p>
<p class="twp-full-quote">As the old adage reminds us, “<span class="twp-quote">We may encounter many defeats but we must not be defeated.</span>”</p>
<div id="twp-popup-footer"><button id="Serdaigle">Serdaigle</button></div>
<div id="twp-popup-footer"><button id="Serpentard">Serpentard</button></div>
<div id="twp-popup-footer"><button id="Poufsouffle">Poufsouffle</button></div>
<div id="twp-popup-footer"><button id="Gryffondor">Gryffondor</button></div>
</div>
</div>
</div>
<article class="question customizable">
<fieldset class="listReponse customizable">
<legend>${question.legend}</legend>
<button class="answer-btn customizable" id="R1" name="answer">${question.R1}</button>
<button class="answer-btn customizable" id="R2" name="answer">${question.R2}</button>
<button class="answer-btn customizable" id="R3" name="answer">${question.R3}</button>
<button class="answer-btn customizable" id="R4" name="answer">${question.R4}</button>
</fieldset>
<button id="validate">VALIDER</button>
</article>
</body>
</html>
// CardQuestion :
function createQuestion(question) {
let addQuestion =`
<article class="question">
<fieldset class="listReponse">
<legend>${question.legend}</legend>
<button class="answer-btn" id="R1" name="answer">${question.R1}</button>
<button class="answer-btn" id="R2" name="answer">${question.R2}</button>
<button class="answer-btn" id="R3" name="answer">${question.R3}</button>
<button class="answer-btn" id="R4" name="answer">${question.R4}</button>
</fieldset>
<button id="validate">VALIDER</button>
</article>`;
return addQuestion;
}
export default createQuestion;
My challenge is to put everything on the same page.
Any idea ?
Was I clear ?
Thanks in advance, best regards,
a beginner ^^
I created everything from scratch, and it pretty much worked until I realised the house theme wasn’t save anywhere.
I’m a beginner, I started JS 3 weeks ago, so be easy on me.
If you have any clue, anything at all, I’ll take it.
Best wishes for you work and mine !
You need to sign in to view this answers
Leave feedback about this