Saving a Javascript Function on a webpage

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