Via错题本：把英语错题整理做成一个离线 App#

跟 Via 老师学英语，也把每一次错题变成下一次进步的素材。

网址：mistake.viaenglish.xyz

一、项目简介#

Via错题本是一个面向英语学习场景的错题整理工具。它可以读取学生上传的英语试卷 DOCX 文件，根据试卷结构识别 Part、Passage 和题号，再按学生选择的错题范围生成一份新的错题本 DOCX 文档。

这个项目最初是一个浏览器网页工具，后来在保留网站版本的基础上，增加了 Android App。App 使用 WebView 承载网页界面，同时通过 Android 原生能力完成文件选择和文档保存。

项目的核心目标很简单：减少手工抄录错题的时间，让学生把精力放回到理解、订正和复习上。

二、主要功能#

1. 选择学生和排版方式#

用户输入学生姓名，并选择错题本的生成方式：

按题型分类
按考试分类

2. 上传英语试卷#

工具支持选择 .docx 格式的英语试卷。文件在本地解析，不需要上传到服务器。

3. 识别试卷结构#

程序会从 DOCX 内部的 XML 结构中读取段落、表格和图片，并尝试识别：

Part
Passage
考试分区
题号
题目文本
选项
文章内容
题目中的图片

4. 按题号添加错题#

题号支持多种输入形式，例如：

1
21, 22, 24
2
36-45
3
21, 24, 36-45

程序会根据所选排版方式和题号范围，提取对应的题目内容，并自动过滤重复错题。

5. 错题预览#

App 将操作区和预览区拆成两个界面：

主界面：填写姓名、选择排版方式、上传试卷、添加题目
预览界面：集中查看已添加的错题

这样可以避免在一个页面里堆叠过多内容，手机上操作也更清晰。

6. 生成并导出 DOCX#

程序会基于内置的 DOCX 模板生成错题本，保留文字、表格和图片。Android App 点击“生成错题本”后，会调用系统保存界面，由用户选择文件保存位置。

三、界面设计#

App 的界面遵循“少说明、快操作”的原则：

主标题使用“Via错题本”
标题下方显示“跟Via老师学英语”
右上角放置 Via 老师 Logo
主界面只保留必要字段和按钮
错题预览单独作为第二个界面
使用绿色作为主强调色，保持学习工具的清爽感
表单和按钮采用适合手机触控的尺寸

相比桌面网页，App 版本隐藏了较长的帮助说明和规则文字，把信息分成操作流程和预览结果两个阶段。

四、技术实现#

网页端#

HTML
CSS
原生 JavaScript
JSZip 3.10.1
Web APIs：File、FileReader、Blob、URL、DOMParser

网页端负责主要业务逻辑，包括：

读取 DOCX 文件
解压 DOCX ZIP 包
解析 word/document.xml
读取关系文件和媒体资源
识别题号、Part、Passage 和文章结构
生成新的 document.xml
把内容重新写回 DOCX ZIP 包

Android 端#

Android App 使用 Java 编写原生外壳，WebView 加载 App 内置的网页资源。

原生层主要负责：

初始化 WebView
加载内置 index.html
调用 Android 系统文件选择器读取试卷
从 App 内置资源读取 DOCX 输出模板
接收网页生成的 Base64 文档数据
调用系统“另存为”界面保存 DOCX
处理 Android 返回键
在 WebView 初始化失败时显示兜底错误页面

网页和原生层之间通过一个范围受限的 JavaScript Bridge 通信：

1
网页 index.html
2
    │
3
    ├── AndroidApp.loadAsset("output-template.docx")
4
    └── AndroidApp.saveDocx(base64Data, fileName)
5
             │
6
             └── Android 系统文件保存界面

五、DOCX 处理思路#

DOCX 文件本质上是一个 ZIP 压缩包，里面包含 XML 文档和媒体资源。项目没有依赖服务器端转换，而是在浏览器或 WebView 中直接处理文件。

基本流程如下：

1
选择试卷 DOCX
2
    ↓
3
读取 ZIP 文件
4
    ↓
5
解析 document.xml
6
    ↓
7
提取段落、表格和图片
8
    ↓
9
识别 Part / Passage / 题号
10
    ↓
11
生成错题条目
12
    ↓
13
读取输出模板
14
    ↓
15
替换模板正文
16
    ↓
17
重新打包 DOCX
18
    ↓
19
保存错题本文件

这种方式的优点是数据不需要离开设备，适合处理学生试卷这类包含个人学习信息的文件。

六、项目中比较有挑战的部分#

1. DOCX 不是简单的纯文本#

题目可能出现在普通段落、表格、图片或多个 XML 节点中。解析时不能只读取页面上看到的文字，还要处理 Word 文档中的关系文件、媒体文件和格式结构。

2. 不同试卷的结构并不完全一致#

同样是 Part one，有的试卷会明确写出 Passage，有的试卷只通过题号和段落顺序表达结构。因此项目使用了多种识别规则，并为没有显式 Passage 的情况提供回退逻辑。

3. 网页下载和 Android 保存方式不同#

浏览器可以通过 Blob 和 <a download> 下载文件，但 Android App 更适合调用系统文件保存器。最终方案保留了浏览器下载逻辑，同时在 App 中切换到原生保存流程。

4. 离线运行#

最初网页通过 CDN 加载 JSZip。为了让 App 在没有网络的环境中也可以使用，Android 版本把 JSZip 复制到 assets 目录，并把输出模板一并内置。

七、工程结构#

1
错题本/
2
├── 错题本生成器2.4.html          # 原始网站版本
3
├── 输出模版.docx                  # 原始输出模板
4
├── logo.jpg                       # Via 老师 Logo
5
├── android-app/                   # Android Studio 工程
6
│   ├── app/
7
│   │   └── src/main/
8
│   │       ├── assets/
9
│   │       │   ├── index.html     # App 内置页面
10
│   │       │   ├── jszip.min.js   # 本地 JSZip
11
│   │       │   ├── logo.jpg       # App 顶部 Logo
12
│   │       │   └── output-template.docx
13
│   │       ├── java/
14
│   │       │   └── .../MainActivity.java
15
│   │       └── res/
16
│   ├── build.gradle.kts
17
│   ├── settings.gradle.kts
18
│   └── README.md
19
└── Via错题本项目介绍.md

八、当前版本#

应用名称：Via错题本
Android Application ID：com.mistakebook.app
当前版本：1.0.5
最低支持版本：Android 7.0（API 24）
编译版本：Android 15（API 35）
Android Gradle Plugin：8.11.0
Gradle：8.13
Java：17+

1
## 结语
2

3
## 下载
4

5
[下载 Android APK](/downloads/via-mistake-book.apk)
6

7
Via错题本不是一个复杂的在线平台，而是一个围绕真实学习流程打磨的小工具：把试卷交给程序，把时间留给学习。
8

9
从网页到 Android App 的过程，也让我重新认识到一个实用工具的价值不只在于“能不能实现”，还在于它是否足够简单、稳定，并且真正贴近用户每天的使用习惯。

音乐

音乐