时间戳

首页 > 解决方案 > 如何允许多次尝试测验？

javascript - 如何允许多次尝试测验？

问题描述

我正在使用 Javascript、HTML5 和 CSS3 开发一个简单的测验。

目前，当用户选择一个答案时，无论答案是否正确，都会进入下一个问题。

我想为用户启用多次尝试。如果用户选择了错误的选项，该选项将被标记为红色，同时让用户有机会选择另一个选项（如消除过程）。只有在用户选择正确答案之前，才会显示下一个问题。

这是我的代码：

游戏.js

const question = document.querySelector('#question'); //can target both the class and the ID
const choices = Array.from(document.querySelectorAll('.choice-text'));
const scoreText = document.querySelector('#score');

let currentQuestion = {}
let acceptingAnswers = true
let score = 0
let questionCounter = 0
let availableQuestions = []

let questions = [
    {
        question: 'What is 2 + 2?',
        choice1: '5',
        choice2: '10',
        choice3: '1',
        choice4: '4',
        answer: 4  
    },
    {
        question: 'When is Christmas?',
        choice1: '25 December',
        choice2: '1 January',
        choice3: '4 July',
        choice4: '30 October',
        answer: 1  
    },
    {
        question: 'What is the capital of Japan?',
        choice1: 'Seoul',
        choice2: 'Beijing',
        choice3: 'Tokyo',
        choice4: 'Washington D.C.',
        answer: 3
    },
    {
        question: 'What is the emergency number?',
        choice1: '123',
        choice2: '555',
        choice3: '420',
        choice4: '911',
        answer: 4
    }
]

const SCORE_POINTS = 10
const MAX_QUESTIONS = 4

startGame = () =>{
    questionCounter = 0
    score = 0
    availableQuestions = [...questions]
    getNewQuestion()
}

getNewQuestion = () => {
    if(availableQuestions.length === 0 || questionCounter > MAX_QUESTIONS) {
        localStorage.setItem('mostRecentScore', score)
        
        return window.location.assign('end.html')
    }
    
    questionCounter++
    const questionsIndex = Math.floor(Math.random() * availableQuestions.length)
    currentQuestion = availableQuestions[questionsIndex]
    question.innerText = currentQuestion.question
    
    choices.forEach(choice => {
        const number = choice.dataset['number']
        choice.innerText= currentQuestion['choice' + number]
    })
    
    availableQuestions.splice(questionsIndex, 1)
    
    acceptingAnswers = true
}

choices.forEach(choice => {
    choice.addEventListener('click', e => {
        if(!acceptingAnswers) return
        
        acceptingAnswers = false
        const selectedChoice = e.target
        const selectedAnswer = selectedChoice.dataset['number']
        
        let classToApply = selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'
        
        if(classToApply === 'correct') {
            incrementScore(SCORE_POINTS)  
        }
        selectedChoice.parentElement.classList.add(classToApply)
        
        setTimeout(() => {
            selectedChoice.parentElement.classList.remove(classToApply)
            
            getNewQuestion()

        }, 500)
    }) 
})

incrementScore = num => {
    score += num
    scoreText.innerText = score
}

startGame()

游戏.html

<!DOCTYPE html>
<html>
    <head>
        <title>Trivia Quiz</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="style.css" rel="stylesheet">
        <link href="game.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div id="game" class="justify-center flex-column">
                <div id="hud">
                    <div class="hud-item">
                        <p id="gameTitle" class="hud-prefix">
                            Trivia Quiz
                        </p>
                        <p id="quizMode" class="hud-prefix2">
                            <br>Normal Mode
                        </p>
                    </div>
                    <div class="hud-item">
                        <p id= "gamePoints" class="hud-prefix">
                            Points
                        </p>
                        <h1 class="hud-main-text" id="score">
                            0
                        </h1>
                    </div>
                </div>
                <h1 id="question">What is the answer?</h1>
                <div class="choice-container">
                    <p class="choice-text" data-number="1">A</p>
                </div>
                <div class="choice-container">
                    <p class="choice-text" data-number="2">B</p>
                </div>
                <div class="choice-container">
                    <p class="choice-text" data-number="3">C</p>
                </div>
                <div class="choice-container">
                    <p class="choice-text" data-number="4">D</p>
                </div>
            </div> 
        </div>
        <script src="game.js"></script>
    </body>
</html>

标签： javascripthtmlcssweb-applications

解决方案

尝试这个

const question = document.querySelector('#question'); //can target both the class and the ID
const choices = Array.from(document.querySelectorAll('.choice-text'));
const scoreText = document.querySelector('#score');

let currentQuestion = {}
let acceptingAnswers = true
let score = 0
let questionCounter = 0
let availableQuestions = []

let questions = [
    {
        question: 'What is 2 + 2?',
        choice1: '5',
        choice2: '10',
        choice3: '1',
        choice4: '4',
        answer: 4  
    },
    {
        question: 'When is Christmas?',
        choice1: '25 December',
        choice2: '1 January',
        choice3: '4 July',
        choice4: '30 October',
        answer: 1  
    },
    {
        question: 'What is the capital of Japan?',
        choice1: 'Seoul',
        choice2: 'Beijing',
        choice3: 'Tokyo',
        choice4: 'Washington D.C.',
        answer: 3
    },
    {
        question: 'What is the emergency number?',
        choice1: '123',
        choice2: '555',
        choice3: '420',
        choice4: '911',
        answer: 4
    }
]

const SCORE_POINTS = 10
const MAX_QUESTIONS = 4

startGame = () =>{
    questionCounter = 0
    score = 0
    availableQuestions = [...questions]
    getNewQuestion()
}

getNewQuestion = () => {
    if(availableQuestions.length === 0 || questionCounter > MAX_QUESTIONS) {
        localStorage.setItem('mostRecentScore', score)
        
        return window.location.assign('end.html')
    }
    
    let container = document.getElementsByClassName('choice-container');
    for(var i = 0; i < container.length; i++)
    {
      container[i].classList.remove('error', 'incorrect', 'correct');
    }
    
    questionCounter++
    const questionsIndex = Math.floor(Math.random() * availableQuestions.length)
    currentQuestion = availableQuestions[questionsIndex]
    question.innerText = currentQuestion.question
    
    choices.forEach(choice => {
        const number = choice.dataset['number']
        choice.innerText= currentQuestion['choice' + number]
    })
    
    availableQuestions.splice(questionsIndex, 1)
    
    acceptingAnswers = true
}




for (i = 0; i < choices.length; i++) {

choices[i].addEventListener('click', e => {
       // if(!acceptingAnswers) return
        
        acceptingAnswers = false
        const selectedChoice = e.target
        const selectedAnswer = selectedChoice.dataset['number']
        
        let classToApply = selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'
       
        if(classToApply === 'correct') {
            incrementScore(SCORE_POINTS) 
                    setTimeout(() => {
                selectedChoice.parentElement.classList.remove(classToApply)

                getNewQuestion()

            }, 500)
        } else {
            selectedChoice.parentElement.classList.add("error")
        }
        selectedChoice.parentElement.classList.add(classToApply)
        

    }) 
}



incrementScore = num => {
    score += num
    scoreText.innerText = score
}

startGame()
.error {
  color: red;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Trivia Quiz</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="style.css" rel="stylesheet">
        <link href="game.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div id="game" class="justify-center flex-column">
                <div id="hud">
                    <div class="hud-item">
                        <p id="gameTitle" class="hud-prefix">
                            Trivia Quiz
                        </p>
                        <p id="quizMode" class="hud-prefix2">
                            <br>Normal Mode
                        </p>
                    </div>
                    <div class="hud-item">
                        <p id= "gamePoints" class="hud-prefix">
                            Points
                        </p>
                        <h1 class="hud-main-text" id="score">
                            0
                        </h1>
                    </div>
                </div>
                <h1 id="question">What is the answer?</h1>
                <div class="choice-container">
                    <p class="choice-text" data-number="1">A</p>
                </div>
                <div class="choice-container">
                    <p class="choice-text" data-number="2">B</p>
                </div>
                <div class="choice-container">
                    <p class="choice-text" data-number="3">C</p>
                </div>
                <div class="choice-container">
                    <p class="choice-text" data-number="4">D</p>
                </div>
            </div> 
        </div>
        <script src="game.js"></script>
    </body>
</html>

推荐阅读