问卷考试系统设计（二）：题目 DSL 设计——用 JSON 描述一切题型

mumu — Sun, 05 Apr 2026 00:00:00 +0000

上一篇聊了整体架构和数据模型，这篇讲整个系统核心的部分：怎么用一套统一的 JSON 结构，把单选、多选、量表、矩阵、排序、填空……所有题型都描述清楚。然后让引擎把这些 JSON 跑起来，条件跳题、题目分组、随机排序，这些才是让问卷从"能编辑"变成"能填写"的关键。

为什么用 JSON 而不是多张表

传统建模的麻烦

直观的做法，每种题型一张表：

        
        
        
    
CREATE TABLE question_single_choice (
    id BIGINT PRIMARY KEY, stem TEXT,
    option_a TEXT, option_b TEXT, option_c TEXT, option_d TEXT,
    correct_answer VARCHAR(10)
);
CREATE TABLE question_likert (
    id BIGINT PRIMARY KEY, stem TEXT,
    scale_type VARCHAR(20), is_reverse BOOLEAN
);
-- 10 种题型 10 张表……

问题很明显：

问卷考试系统设计（五）：前端引擎——渲染、状态管理与防作弊

mumu — Mon, 20 Apr 2026 00:00:00 +0000

上一篇：问卷考试系统设计（四）：质量控制

后端写好了，接口也通了。前端要解决四个问题：怎么把后端返回的 JSON 渲染成可交互的答题界面、状态怎么管、考试场景怎么防作弊、手机上表格挤成一团怎么办。

前端答题状态要围绕一份本地快照流转，草稿和提交使用同一套校验结果：

stateDiagram-v2 [*] --> LoadingDsl LoadingDsl --> InitStore: 加载问卷 DSL InitStore --> Answering: 初始化 Pinia Answering --> RecomputeLogic: 选项变化 RecomputeLogic --> Answering: 更新跳题结果 Answering --> SavingDraft: 定时或失焦 SavingDraft --> Answering: 保存成功 Answering --> SubmitCheck: 点击提交 SubmitCheck --> Answering: 校验失败 SubmitCheck --> SubmitAnswer: 校验通过 SubmitAnswer --> SubmitSecurity: 附带质量与防作弊数据 SubmitSecurity --> Done Done --> [*]

一、注册表模式：一套 DSL 驱动所有题型渲染

硬编码的坑

直观的写法是 if-else：

        
<SingleChoice v-if="q.type === 'single_choice'" :question="q" />
<MultipleChoice v-else-if="q.type === 'multiple_choice'" :question="q" />
<LikertScale v-else-if="q.type === 'likert'" :question="q" />