使用 HTML + JavaScript 实现在线考试系统

在现代的在线教育平台中，在线考试系统是不可或缺的一部分。本文将通过一个完整的示例，演示如何使用 HTML、CSS 和 JavaScript 构建一个支持多种题型的在线考试系统。

效果演示

项目概述

本项目主要包含以下核心功能：

• 支持4种常见题型：单选题、多选题、判断题、填空题
• 答题卡导航功能
• 实时计时器
• 自动评分与结果反馈

页面结构与样式设计

创建 HTML 结构

<div class="container">
    <!-- 考试内容 -->
    <div class="exam-container">
        <!-- 标题和计时器 -->
        <div class="header">
            <h2>在线考试系统</h2>
            <div class="timer">剩余时间: <span id="time">30:00</span></div>
        </div>
        <!-- 题目 -->
        <div id="subject"></div>
        <!-- 导航按钮 -->
        <div class="navigation">
            <button id="prev-btn" disabled>上一题</button>
            <button id="next-btn">下一题</button>
            <button id="submit-btn" class="submit-btn">提交试卷</button>
        </div>
        <!-- 结果 -->
        <div id="result" class="result">
            <h2>考试结束</h2>
            <p>你的得分是: <span class="score" id="final-score">0</span> 分</p>
            <p id="result-message"></p>
        </div>
    </div>
    <!-- 答题卡 -->
    <div class="answer-sheet">
        <h3>答题卡</h3>
        <div class="answer-buttons" id="answer-buttons"></div>
    </div>
</div>

设计 CSS 样式

整体布局

body {
   
   
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}
.container {
   
   
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.exam-container {
   
   
    flex: 3;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-right: 20px;
}
.answer-sheet {
   
   
    flex: 1;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

题目区域样式

.header {
   
   
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.timer {
   
   
    font-weight: bold;
    color: #e74c3c;
}
.question {
   
   
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
}
.question h3 {
   
   
    margin-top: 0;
    color: #2c3e50;
}
.question-type {
   
   
    display: inline-block;
    padding: 2px 8px;
    background-color: #3498db;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
}
.options {
   
   
    margin-left: 20px;
}
.option {
   
   
    margin: 10px 0;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
}
.option:hover {
   
   
    background-color: #eee;
}
.option.selected {
   
   
    background-color: #3498db;
    color: white;
}
.option.multi-selected {
   
   
    background-color: #9b59b6;
    color: white;
}
.true-false-options {
   
   
    display: flex;
    gap: 20px;
}
.true-false-option {
   
   
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
}
.true-false-option.selected {
   
   
    background-color: #3498db;
    color: white;
    border-color: #3498db;
}
.fill-blank-input {
   
   
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}
.navigation {
   
   
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}
button {
   
   
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
button:hover {
   
   
    background-color: #2980b9;
}
button:disabled {
   
   
    background-color: #95a5a6;
    cursor: not-allowed;
}
.submit-btn {
   
   
    background-color: #2ecc71;
}
.submit-btn:hover {
   
   
    background-color: #27ae60;
}
.result {
   
   
    display: none;
    text-align: center;
    padding: 20px;
}
.score {
   
   
    font-size: 24px;
    font-weight: bold;
    color: #2ecc71;
}

答题卡样式

.answer-sheet h3 {
   
   
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    text-align: center;
}
.answer-buttons {
   
   
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.answer-btn {
   
   
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    background-color: white;
}
.answer-btn:hover {
   
   
    background-color: #f0f0f0;
}
.answer-btn.current {
   
   
    border: 2px solid #3498db;
    color: #3498db;
}
.answer-btn.answered {
   
   
    background-color: #3498db;
    color: white;
    border-color: #3498db;
}
.answer-btn.unanswered {
   
   
    background-color: #f1f1f1;
    color: #999;
}

核心功能实现

定义基础数据

// 题型常量
const QUESTION_TYPES = {
   
   
    SINGLE_CHOICE: 'single-choice',
    MULTI_CHOICE: 'multi-choice',
    TRUE_FALSE: 'true-false',
    FILL_BLANK: 'fill-blank'
};

// 考试数据
const examData = {
   
   
    title: "JavaScript综合测试",
    timeLimit: 30