正文

JavaScript实现选择题：轻松编写互动式问答页面，让学习与娱乐两不误

/0 浏览量
1023

在这个数字化时代，交互式学习体验越来越受到人们的青睐。使用JavaScript编写一个互动式问答页面，不仅可以提升学习效果，还能增加学习的趣味性。下面，我们就来一步步实现这样一个问答页面。

1. 准备工作

在开始编写代码之前，我们需要准备以下内容：

  • HTML结构：定义问答页面的基本框架。
  • CSS样式：美化页面，提升用户体验。
  • JavaScript逻辑：实现问答的交互功能。

2. HTML结构

首先，我们定义一个简单的HTML结构，包括题目、选项和答案。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>互动式问答页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="question-container">
        <div id="question">1. JavaScript 是一门什么语言？</div>
        <div class="options">
            <button class="option" data-answer="A">A. C++</button>
            <button class="option" data-answer="B">B. Java</button>
            <button class="option" data-answer="C">C. JavaScript</button>
            <button class="option" data-answer="D">D. Python</button>
        </div>
        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. CSS样式

接下来，我们为问答页面添加一些基本的CSS样式。

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

#question-container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#question {
    font-size: 20px;
    margin-bottom: 10px;
}

.options {
    margin-bottom: 20px;
}

.option {
    padding: 10px;
    background-color: #f2f2f2;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

.option:hover {
    background-color: #ddd;
}

#result {
    font-size: 18px;
    color: green;
}

4. JavaScript逻辑

最后，我们使用JavaScript实现问答的交互功能。

// script.js
document.addEventListener('DOMContentLoaded', function () {
    const question = document.getElementById('question');
    const options = document.querySelectorAll('.option');
    const result = document.getElementById('result');

    options.forEach(option => {
        option.addEventListener('click', function () {
            const answer = this.getAttribute('data-answer');
            if (answer === 'C') {
                result.textContent = '恭喜你，回答正确！';
            } else {
                result.textContent = '很遗憾，回答错误。';
            }
        });
    });
});

5. 优化与扩展

以上代码实现了一个简单的互动式问答页面。你可以根据需求进行以下优化和扩展：

  • 添加更多题目和选项。
  • 使用随机数生成题目和选项，增加趣味性。
  • 添加计时器，限制答题时间。
  • 实现分页功能，将题目分批次展示。
  • 使用数据库存储题目和答案，实现持久化存储。

通过以上步骤，你可以轻松地使用JavaScript编写一个互动式问答页面，让学习与娱乐两不误。

-- 展开阅读全文 --