Js选择题的代码怎么写

在创建 JavaScript 选择题功能时，有几个关键步骤：创建HTML结构、设计CSS样式、编写JavaScript逻辑来处理用户交互和答案验证。

HTML结构、CSS样式、JavaScript交互逻辑，是实现选择题功能的核心。HTML用于定义题目和选项，CSS用于美化界面，JavaScript用于交互处理。下面是详细步骤：

一、HTML结构

首先，我们需要一个HTML结构来展示题目和选项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Quiz</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="quiz-container">
        <div id="question-container" class="hide">
            <div id="question">Question text</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>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式

接下来，我们需要一些基本的CSS样式来美化我们的选择题界面。

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
    margin: 0;
}
.quiz-container {
    width: 300px;
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.btn {
    background-color: #6c63ff;
    color: white;
    border: none;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}
.btn:hover {
    background-color: #5750d3;
}
.hide {
    display: none;
}
.btn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

三、JavaScript交互逻辑

最后，我们编写JavaScript代码来处理选择题的逻辑。

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');
let shuffledQuestions, currentQuestionIndex;
startButton.addEventListener('click', startGame);
nextButton.addEventListener('click', () => {
    currentQuestionIndex++;
    setNextQuestion();
});
function startGame() {
    startButton.classList.add('hide');
    shuffledQuestions = questions.sort(() => Math.random() - 0.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');
    } 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: '3', correct: false },
            { text: '5', correct: false },
            { text: '6', correct: false }
        ]
    },
    {
        question: 'What is the capital of France?',
        answers: [
            { text: 'Berlin', correct: false },
            { text: 'Madrid', correct: false },
            { text: 'Paris', correct: true },
            { text: 'Rome', correct: false }
        ]
    },
    {
        question: 'Who is CEO of Tesla?',
        answers: [
            { text: 'Jeff Bezos', correct: false },
            { text: 'Elon Musk', correct: true },
            { text: 'Bill Gates', correct: false },
            { text: 'Tony Stark', correct: false }
        ]
    },
    {
        question: 'What is the largest ocean on Earth?',
        answers: [
            { text: 'Atlantic Ocean', correct: false },
            { text: 'Indian Ocean', correct: false },
            { text: 'Arctic Ocean', correct: false },
            { text: 'Pacific Ocean', correct: true }
        ]
    }
];

四、详细解释

1、HTML结构

HTML部分定义了选择题的基本结构，包括题目展示区域和按钮区域。按钮用于启动游戏和显示下一题。

2、CSS样式

CSS部分用于美化界面，使其更具吸引力。通过设置背景颜色、边框半径、阴影等属性，使界面更加友好。

3、JavaScript交互逻辑

JavaScript部分是选择题功能的核心。通过事件监听器来响应用户的点击操作，动态展示题目和选项，并根据用户选择的答案给出反馈。

五、代码扩展

上述代码实现了一个基本的选择题功能，但我们可以进一步扩展。例如，添加计分功能、限制回答时间、随机打乱选项顺序等。

1、添加计分功能

在JavaScript中添加一个变量来记录用户的得分，并在每次回答正确时增加分数。

let score = 0;
function selectAnswer(e) {
    const selectedButton = e.target;
    const correct = selectedButton.dataset.correct;
    if (correct) {
        score++;
    }
    setStatusClass(document.body, correct);
    // ... 省略部分代码
}

2、限制回答时间

可以使用setTimeout函数来限制每题的回答时间。

let timer;
const TIME_LIMIT = 10; // seconds
function setNextQuestion() {
    resetState();
    showQuestion(shuffledQuestions[currentQuestionIndex]);
    timer = setTimeout(() => {
        // 超时处理逻辑
        alert('Time is up!');
        if (shuffledQuestions.length > currentQuestionIndex + 1) {
            nextButton.classList.remove('hide');
        } else {
            startButton.innerText = 'Restart';
            startButton.classList.remove('hide');
        }
    }, TIME_LIMIT * 1000);
}
function resetState() {
    clearTimeout(timer);
    // ... 省略部分代码
}

3、随机打乱选项顺序

在显示选项之前，使用sort方法对选项进行随机排序。

function showQuestion(question) {
    questionElement.innerText = question.question;
    question.answers.sort(() => Math.random() - 0.5).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);
    });
}

通过以上步骤，我们就实现了一个功能齐全的JavaScript选择题功能。HTML、CSS和JavaScript的结合，使得该功能不仅能运行良好，还具备良好的用户体验。