如何为Javascript+HTML5+CSS3开发的Quiz测验开启多次作答功能？

我正在使用Javascript、HTML5和CSS3开发一个简易测验程序。
目前的逻辑是，用户选择答案后，无论对错都会直接进入下一题。
我想要为用户开启多次作答功能：如果用户选错选项，该选项会被标红，同时给用户再次选择其他选项的机会（类似排除法流程），只有当用户选对正确答案后才会展示下一题。

样式补充 #

首先在你的样式文件（game.css/style.css）中添加以下样式，实现错误选项标红、禁止重复点击的效果：

/* 正确选项样式 */
.correct {
  background-color: #00C851;
  color: #fff;
}
/* 错误选项样式 */
.incorrect {
  background-color: #ff4444;
  color: #fff;
  pointer-events: none; /* 禁止重复点击已选错的选项 */
}

修改后的game.js完整代码 #

const question = document.querySelector('#question'); // 可匹配class或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 wrongChoices = [] // 存储当前题目已选错的选项编号

let questions = [
    {
        question: '2加2等于多少？',
        choice1: '5',
        choice2: '10',
        choice3: '1',
        choice4: '4',
        answer: 4  
    },
    {
        question: '圣诞节是哪一天？',
        choice1: '12月25日',
        choice2: '1月1日',
        choice3: '7月4日',
        choice4: '10月30日',
        answer: 1  
    },
    {
        question: '日本的首都是哪里？',
        choice1: '首尔',
        choice2: '北京',
        choice3: '东京',
        choice4: '华盛顿哥伦比亚特区',
        answer: 3
    },
    {
        question: '美国急救电话是多少？',
        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]
        choice.parentElement.classList.remove('correct', 'incorrect')
    })
    // 清空上一题的选错记录
    wrongChoices = []
    availableQuestions.splice(questionsIndex, 1)
    acceptingAnswers = true
}

choices.forEach(choice => {
    choice.addEventListener('click', e => {
        if(!acceptingAnswers) return
        
        const selectedChoice = e.target
        const selectedAnswer = selectedChoice.dataset['number']
        
        // 已经选错的选项点击无效
        if(wrongChoices.includes(selectedAnswer)) return
        
        if(selectedAnswer == currentQuestion.answer) {
            // 选对逻辑：加分、展示正确样式后跳转下一题
            acceptingAnswers = false
            incrementScore(SCORE_POINTS)  
            selectedChoice.parentElement.classList.add('correct')
            
            setTimeout(() => {
                getNewQuestion()
            }, 500)
        } else {
            // 选错逻辑：仅标红、记录错误选项，允许继续作答
            wrongChoices.push(selectedAnswer)
            selectedChoice.parentElement.classList.add('incorrect')
        }
    }) 
})

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

startGame()

game.html代码（无需逻辑修改，可直接使用翻译后的版本） #

<!DOCTYPE html>
<html>
    <head>
        <title>常识测验</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">
                            常识测验
                        </p>
                        <p id="quizMode" class="hud-prefix2">
                            <br>普通模式
                        </p>
                    </div>
                    <div class="hud-item">
                        <p id= "gamePoints" class="hud-prefix">
                            得分
                        </p>
                        <h1 class="hud-main-text" id="score">
                            0
                        </h1>
                    </div>
                </div>
                <h1 id="question">请选择正确答案</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>

内容的提问来源于stack exchange，提问作者user14489561