PrepZen

的专注,为备考赋能。 这是一个纯前端、轻量级的在线刷题平台

本项目旨在演示一个完整的、无需后端服务的 Web 应用。它通过精巧的前端设计,实现了动态题库加载、多样化练习模式与即时反馈,展现了现代前端技术在构建交互式应用中的强大能力。

为高效学习而设计

我们相信,好的工具能让学习事半功倍。

智能练习

自定义题型、数量和模式,更有错题重练机制,让你专注于真正需要提升的部分。

即时反馈

答题后立即获得包含解析的详细反馈,实时统计正确率与进度,全面掌握学习状态。

极简专注

无广告、无干扰的纯净学习环境。极速加载,无需等待,让你随时随地进入心流状态。

工作流程

三步开启你的高效备考之旅。

1. 选择题库

从丰富的题库中心选择你的目标学科。

2. 配置练习

自由组合题型、数量和练习模式。

3. 开始学习

进入答题界面,利用答题卡、错题回顾等功能高效提升。

功能演示

选择一个题库,亲自体验平台的各项功能。


项目概览

解决特定问题,展示核心能力。

项目目标

核心目标是构建一个零依赖、高性能的客户端刷题应用。它旨在解决传统刷题平台依赖服务器、加载缓慢、体验割裂的问题,证明仅通过浏览器端技术,也能实现丰富、流畅、个性化的学习体验。

核心挑战

  • 数据管理:在无后端的情况下,如何高效、安全地加载和管理不同学科的题库数据?
  • 状态同步:如何构建一个健壮的状态管理系统,在复杂的练习流程中(如题型切换、错题重练、答题卡)保持数据的一致性?
  • UI/UX 设计:如何设计一个既美观又符合直觉的用户界面,让用户能够专注于学习本身?

最终实现

PrepZen 成功地应对了这些挑战,交付了一个完整的、可交互的 Web 应用。它不仅是一个实用的工具,更是我作为一名前端开发者,在架构设计、代码实现和产品思维上的一次综合展示。

纯前端架构

无需数据库,无服务器成本,部署简单,加载极速。

模块化设计

逻辑清晰,代码解耦,易于维护和扩展新功能。

项目架构

清晰的数据流与模块化的代码结构。

数据加载器

question-loader.js

状态管理器

原生JS对象

用户交互

DOM事件监听

UI渲染器

DOM操作

应用通过一个独立的数据加载模块异步获取题库JSON,将其解析后送入全局状态管理器。用户的任何操作(如选择题型、答题)都会更新状态,并触发相应的UI渲染函数,实现数据与视图的单向流动,确保了逻辑的清晰和可预测性。

技术栈与实现

现代、高效、可靠的技术选型。

HTML5

采用语义化标签构建清晰、无障碍的页面结构。

Tailwind CSS

以原子化 CSS 的方式,快速构建响应式、可定制化的用户界面。

原生 JavaScript (ES6+)

无框架依赖,通过模块化和现代 JS 特性,实现所有核心逻辑。

Iconify

按需加载海量图标,优化性能,保持视觉一致性。

未来蓝图

探索更多可能,让学习体验更上一层楼。

用户系统

引入用户账户,实现跨设备同步学习进度与错题本。

数据可视化

通过图表展示学习轨迹、知识点掌握情况,提供更深入的分析报告。

智能推荐

根据用户的答题情况,智能推荐薄弱知识点的相关题目。

自定义题库

允许用户导入自己的题库文件,创建个性化的练习集。