---

Web 开发记录 Episode1

项目概述

本项目是一个在线测验系统，允许用户进行 Web 开发相关的题目测试。用户在填写完信息后，可以参与答题，并提交结果进行评分。此外，系统还提供了查看历史成绩的功能。主要技术栈包括 HTML、CSS、JavaScript 和 ASP。

目录结构

• index.html - 项目入口页面，包含测验的基本框架。
• quizStyle.css - 样式文件，用于美化页面布局和元素。
• script.js - JavaScript 文件，包含计时、答题提交及 AJAX 调用历史成绩的逻辑。
• judge.asp - 服务器端处理文件，用于接收用户提交的测验结果，并进行评分和存储。
• history.asp - 显示用户的历史成绩。

主要功能

1. 用户信息与答题界面

• 页面布局：index.html 提供了用户信息输入和答题的基本框架。通过 quizStyle.css 文件设置页面的样式，使得页面更加美观和易于使用。
• 动态显示：页面中的测验题目在用户填写完姓名并点击“开始”按钮后显示。script.js 中的 startQuiz 函数控制测验的显示逻辑。

2. 计时功能

• 计时器：在测验开始时，script.js 文件中的 startQuiz 函数初始化计时器，通过 setInterval 每秒更新计时信息，并在页面上实时显示。
• 浮动时间显示：页面右上角有一个浮动时间显示框，包含当前时间和计时器。用户可以通过点击三角按钮来隐藏或显示时间和计时器。

3. 答题提交与评分

• 答题逻辑：用户完成测验后，点击“提交”按钮，script.js 中的 submitQuiz 函数会计算用户的分数，并将结果显示给用户。
• 表单提交：分数和用时通过隐藏的表单字段提交到 judge.asp，由服务器进行进一步处理。

4. 历史成绩显示

• AJAX 调用：用户可以点击“历史得分”按钮，通过 AJAX 异步请求 history.asp 页面，并将返回的历史成绩显示在当前页面。此逻辑由 script.js 中的 showHistoryScore 函数实现。

代码片段示例

HTML 代码片段

<form class="container" action="judge.asp" method="post" id="quizForm" accept-charset="UTF-8">
    <div class="hidden">
        <input type="hidden" id="s_time" name="s_time" value="">
        <input type="hidden" id="s_score" name="s_score" value="">
    </div>
    <!-- 用户信息和测验内容 -->
    <div class="info">
        <div class="namebox">
            <input type="text" id="s_name" name="s_name" value="" placeholder="请输入您的姓名" required>
        </div>
        <button type="button" onclick="startQuiz()">开始</button>
    </div>
    <div class="quiz">
        <!-- 测验问题 -->
    </div>
</form>

CSS 代码片段

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
}

.container {
    width: 60%;
    max-width: 1200px;
    background-color: #fff;
    padding: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-top: 40px;
}

JavaScript 代码片段

function startQuiz() {
    if (document.getElementById("s_name").value.trim() === "") {
        alert("请输入姓名");
        return;
    }

    document.querySelector('.info').style.display = 'none';
    document.querySelector('.intro').style.display = 'none';
    document.querySelector('.quiz').style.display = 'block';

    startTime = new Date();
    timeInterval = setInterval(countDown, 1000);
}

function showHistoryScore() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'history.asp', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('ajax-response').innerHTML = xhr.responseText;
        }
    };
    xhr.send();
}

部署与测试

1. 部署：将所有文件部署到支持 ASP 的 IIS 服务器中。确保 .html、.css 和 .js 文件在根目录中可访问，并配置 ASP 处理程序。
2. 测试：在浏览器中访问 index.html 页面，输入用户信息，进行答题测试，并验证提交和历史成绩显示功能是否正常工作。

遇到的问题与解决方案

1. 字符编码问题：在提交表单时，确保 accept-charset="UTF-8" 被正确设置，以避免中文字符在服务器端显示异常。
2. AJAX 跨域问题：由于服务器部署在同一域内，所以未遇到跨域问题。如果将来扩展为跨域访问，需要配置 CORS 头。

未来计划

• 增强用户体验：增加题目随机化和计时排行榜功能，使测验更加有趣。
• 移动设备优化：优化 CSS，使页面在移动设备上有更好的展示效果。
• 数据存储：将用户成绩存储在数据库中，并提供历史数据的可视化分析功能。

---

这个记录涵盖了项目的主要开发步骤和技术细节，同时列出了未来的改进方向。