在网页上保存 Javascript 函数

问题描述 投票：0回答：1

我做了一个测验，主题是哈利波特的宇宙。

我做了一个功能，允许用户在开始测验之前更改学院之间的主题（斯莱特林、赫奇帕奇等）。

但我有一个问题。每次您按下“验证”以验证您的答案，并且函数调用另一个问题（及其答案）时，主题会自行刷新并且不会保存所选的问题。

免责声明：这是我的第一篇文章，我的母语不是英语，请原谅我的语言。

这是我的主题功能。它添加并替换一个类，将主题放在页面上我想要的任何内容上：

// 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;

这是提问/回答功能：

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;

我的挑战是将所有内容放在同一页面上。

有什么想法吗？ 我说清楚了吗？

提前致谢，最诚挚的问候， 初学者^^

我从头开始创建了一切，它几乎有效，直到我意识到房子主题没有保存在任何地方。 我是一个初学者，我三周前开始学习 JS，所以请对我宽容一些。 如果你有任何线索，任何线索，我都会接受。

祝你和我工作顺利！

javascript
1个回答
0
投票

通过不重复类似的代码，您可以大大缩短函数

popUp
。这才是重要的事情。至于保存主题 你可以使用
localStorage.setItem("myTheme", theme)
。为了检索主题，加载后，您可以使用 
theme = localStorage.getItem("myTheme")

function popUp() {

  var themes = ["Serpentard", "Serdaigle", "Gryffondor", "Poufsouffle"];

  themes.forEach(function(theme) {
    document.querySelector('#' + theme).addEventListener('click', () => {
      for (const element of document.querySelectorAll('.customizable')) {
        element.classList.remove(...themes);
        element.classList.add(theme)
        console.log(element);
      }
    })
  })

}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.