html 试图实现一个评分系统，以一个基于网络的琐事游戏

lxkprmvk  于 2023-04-18  发布在  其他
关注(0)|答案(1)|浏览(107)

我试图实现一个评分系统的琐事游戏使用java脚本和HTML.我得到的问题和HTML中的所有容器的代码，我只需要在JavaScript代码中的变量，每次用户正确回答问题时递增，我需要将该变量显示给用户.我试图在JavaScript中声明一个变量，但它不'如果答案正确，则不会更改它的值，或者至少不会向用户显示该值。HTML：

const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
var score = document.getElementById("score")

var score = 0;
document.write (score);

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
})

function startGame() {
  startButton.classList.add('hide')
  shuffledQuestions = questions.sort(() => Math.random() - .5)
  currentQuestionIndex = 0
  questionContainerElement.classList.remove('hide')
  setNextQuestion()
}

function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex])
}

function showQuestion(question) {
  questionElement.innerText = question.question
  question.answers.forEach(answer => {
    const button = document.createElement('button')
    button.innerText = answer.text
    button.classList.add('btn')
    if (answer.correct) {
      button.dataset.correct = answer.correct
       
    }
    button.addEventListener('click', selectAnswer)
    answerButtonsElement.appendChild(button)
  })
}

function resetState() {
  clearStatusClass(document.body)
  nextButton.classList.add('hide')
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
}

function selectAnswer(e) {
  const selectedButton = e.target
  const correct = selectedButton.dataset.correct
  setStatusClass(document.body, correct)
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
  if (shuffledQuestions.length > currentQuestionIndex + 1) {
    nextButton.classList.remove('hide')
  } else {
    startButton.innerText = 'Restart'
    startButton.classList.remove('hide')
  }
}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  if (correct) {
    element.classList.add('correct')
    score += 10
  
  } else {
    element.classList.add('wrong')
  }
}

function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}

const questions = [
  {
    question: 'What is 2 + 2?',
    answers: [
      { text: '4', correct: true },
      { text: '22', correct: false }
    ]
  },
  {
    question: 'Who is the best YouTuber?',
    answers: [
      { text: 'Web Dev Simplified', correct: true },
      { text: 'Traversy Media', correct: true },
      { text: 'Dev Ed', correct: true },
      { text: 'Fun Fun Function', correct: true }
    ]
  },
  {
    question: 'Is web development fun?',
    answers: [
      { text: 'Kinda', correct: false },
      { text: 'YES!!!', correct: true },
      { text: 'Um no', correct: false },
      { text: 'IDK', correct: false }
    ]
  },
  {
    question: 'What is 4 * 2?',
    answers: [
      { text: '6', correct: false },
      { text: '8', correct: true }
    ]
  }
]
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #4C8568
}

body.correct {
  color: green
}

body.wrong {
  background-color: red
}

.container {
  font-size: 20px;
  color: #B69E17;
  font-weight: bold;
  width: 800px;
  max-width: 80%;
  background-color: #5E6861;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 0 10px 2px;
 
}

.box {
  width: 100px;
  border-radius: 20px;
  padding: 5px;
  color: black;
  background-color: white;
 
  
}

.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  margin: 20px 0;
}

.btn {
  
  border: 1px solid hs1;
  background-color: #6C5F16;
  border-radius: 10px;
  padding: 5px 10px;
  color: white;
  font-weight: bold;
  font-size: 15px;
  outline: none;
}

.btn:hover {
  border-color: black;
}

.btn.correct {
  --hue: var(--hue-correct);
  color: green;
}

.btn.wrong {
  --hue: var(--hue-wrong);
  color: red;
}

.start-btn, .next-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hide {
  display: none;
}

html {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: green;
}

.points {
  position: absolute;
  top: 15px;
  right: 15px;
  
}

.points {
  display: flex; 
  color: white;
  width: 250px;
  padding: 10px 0;
  font-size: 30px;
}
<div class="container">
  <div id="question-container" class="hide">
    <div id="question">Question</div>
    <div id="answer-buttons" class="btn-grid">
      <button class="btn">Answer 1</button>
      <button class="btn">Answer 2</button>
      <button class="btn">Answer 3</button>
      <button class="btn">Answer 4</button>
    </div>
  </div>
  
  <div class="controls">
    <button id="start-btn" class="start-btn btn">Start</button>
    <button id="next-btn" class="next-btn btn hide">Next</button>
  </div>
  
</div>
    <div class="box">
       <div id="score">SCORE:</div>
          </div>
Html

1条答案

按热度按时间
nr7wwzry

nr7wwzry1#

如果脚本位于head部分，则必须等待DOMContentLoaded。
你声明了两倍的变量分数！
一次用于div元素，第二次用于playerScore...
在函数function selectAnswer(e)，setStatusClass(document.body, correct);中，即使答案为假，也会在玩家得分上加10！！！
setStatusClass(button, button.dataset.correct)递增10 /好答案。
因此，如果在第一次调用后不将playerScore减少10，则您将获得10个免费+每个好答案10！

setStatusClass(document.body, correct); // add 10 to the player score even the answer is false!!!
playerScore-=10;

这很棘手，所以你应该在这里调用另一个函数来改变setStatusClass的样式！
你只需要改变这种行为。
当您在setStatusClass中使“Restart”可见时，您必须在function startGame中将playerScore重置为0。
哦，如果你不点击“下一步”，你可以点击好的答案多少次，你想增加你的分数：）

window.addEventListener("DOMContentLoaded",init);
        let startButton=null;
        let nextButton=null;
        let questionContainerElement=null;
        let questionElement=null;
        let answerButtonsElement=null;
        let score=null;
        let playerScore=0;
        let shuffledQuestions, currentQuestionIndex;
        
        const questions = [
          {
            question: 'What is 2 + 2?',
            answers: [
              { text: '4', correct: true },
              { text: '22', correct: false }
            ]
          },
          {
            question: 'Who is the best YouTuber?',
            answers: [
              { text: 'Web Dev Simplified', correct: true },
              { text: 'Traversy Media', correct: true },
              { text: 'Dev Ed', correct: true },
              { text: 'Fun Fun Function', correct: true }
            ]
          },
          {
            question: 'Is web development fun?',
            answers: [
              { text: 'Kinda', correct: false },
              { text: 'YES!!!', correct: true },
              { text: 'Um no', correct: false },
              { text: 'IDK', correct: false }
            ]
          },
          {
            question: 'What is 4 * 2?',
            answers: [
              { text: '6', correct: false },
              { text: '8', correct: true }
            ]
          }
        ]
    
        function init(){
            startButton = document.getElementById('start-btn');
            nextButton = document.getElementById('next-btn');
            questionContainerElement = document.getElementById('question-container');
            questionElement = document.getElementById('question');
            answerButtonsElement = document.getElementById('answer-buttons');
            score = document.getElementById("score")
            playerScore = 0;
            displayScore();;
            startButton.addEventListener('click', startGame)
            nextButton.addEventListener('click', () => {
                currentQuestionIndex++
                setNextQuestion()
            })
        }
        
        

        function startGame() {
          startButton.classList.add('hide');
          shuffledQuestions = questions.sort(() => Math.random() - .5);
          currentQuestionIndex = 0;
          questionContainerElement.classList.remove('hide');
          setNextQuestion();
          playerScore = 0 // ADDED TO RESTORE THE SCORE AT 0
          displayScore();
        }
        function displayScore(){
            score.textContent = "SCORE:" + playerScore; 
        }
        function setNextQuestion() {
          resetState();
          showQuestion(shuffledQuestions[currentQuestionIndex]);
        }

        function showQuestion(question) {
          questionElement.innerText = question.question
          question.answers.forEach(answer => {
            const button = document.createElement('button')
            button.innerText = answer.text
            button.classList.add('btn')
            if (answer.correct) {
              button.dataset.correct = answer.correct

            }
            button.addEventListener('click', selectAnswer)
            answerButtonsElement.appendChild(button)
          })
        }

        function resetState() {
          clearStatusClass(document.body)
          nextButton.classList.add('hide')
          while (answerButtonsElement.firstChild) {
            answerButtonsElement.removeChild(answerButtonsElement.firstChild)
          }
        }

        function selectAnswer(e) {
          const selectedButton = e.target
          const correct = selectedButton.dataset.correct
          setStatusClass(document.body, correct); // add 10 to the player score even the answer is false!!!
          /* this following line decrease the score by 10 for each question. It works but this is tricky */
          playerScore-=10;
          Array.from(answerButtonsElement.children).forEach(button => {
            setStatusClass(button, button.dataset.correct)
          })
          if (shuffledQuestions.length > currentQuestionIndex + 1) {
            nextButton.classList.remove('hide')
          } else {
            startButton.innerText = 'Restart'
            startButton.classList.remove('hide')
          }
        }

        function setStatusClass(element, correct) {
          clearStatusClass(element)
          if (correct) {
            element.classList.add('correct')
            playerScore += 10;
            //alert("element = " + element + ", correct = " + correct + ", so 10 points added even if not true");
            //uncoment the alert to see what's happening
          } else {
            element.classList.add('wrong')
          }
          displayScore();
        }

        function clearStatusClass(element) {
          element.classList.remove('correct')
          element.classList.remove('wrong')
        }
*, *::before, *::after {
          box-sizing: border-box;
        }

        body {
          padding: 0;
          margin: 0;
          display: flex;
          width: 100vw;
          height: 100vh;
          justify-content: center;
          align-items: center;
          background-color: #4C8568
        }

        body.correct {
          color: green
        }

        body.wrong {
          background-color: red
        }

        .container {
          font-size: 20px;
          color: #B69E17;
          font-weight: bold;
          width: 800px;
          max-width: 80%;
          background-color: #5E6861;
          border-radius: 20px;
          padding: 10px;
          box-shadow: 0 0 10px 2px;

        }

        .box {
          width: 100px;
          border-radius: 20px;
          padding: 5px;
          color: black;
          background-color: white;

        }

        .btn-grid {
          display: grid;
          grid-template-columns: repeat(2, auto);
          gap: 10px;
          margin: 20px 0;
        }

        .btn {

          border: 1px solid hs1;
          background-color: #6C5F16;
          border-radius: 10px;
          padding: 5px 10px;
          color: white;
          font-weight: bold;
          font-size: 15px;
          outline: none;
        }

        .btn:hover {
          border-color: black;
        }

        .btn.correct {
          --hue: var(--hue-correct);
          color: green;
        }

        .btn.wrong {
          --hue: var(--hue-wrong);
          color: red;
        }

        .start-btn, .next-btn {
          font-size: 1.5rem;
          font-weight: bold;
          padding: 10px 20px;
        }

        .controls {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .hide {
          display: none;
        }

        html {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: green;
        }

        .points {
          position: absolute;
          top: 15px;
          right: 15px;

        }

        .points {
          display: flex; 
          color: white;
          width: 250px;
          padding: 10px 0;
          font-size: 30px;
        }
<div class="container">
  <div id="question-container" class="hide">
    <div id="question">Question</div>
    <div id="answer-buttons" class="btn-grid">
      <button class="btn">Answer 1</button>
      <button class="btn">Answer 2</button>
      <button class="btn">Answer 3</button>
      <button class="btn">Answer 4</button>
    </div>
  </div>
  
  <div class="controls">
    <button id="start-btn" class="start-btn btn">Start</button>
    <button id="next-btn" class="next-btn btn hide">Next</button>
  </div>
  
</div>
    <div class="box">
       <div id="score">SCORE:</div>
          </div>
赞(0）分享  回复(0）举报  2023-04-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com