样式编辑
装修模式,控制测验的视觉呈现——配色、圆角、间距等。配置实时反映在预览区,所见即所得。
进入方式
点击左侧功能栏的样式图标进入全屏装修模式:
(图:样式编辑器全景:左侧配置树 + 中间预览 + 右侧模板/配置)
| 区域 | 作用 |
|---|---|
| 左侧 - 配置层级 | 树形结构,选择要配置的层级(测验/模块/页面) |
| 中间 - 实时预览 | iframe 渲染被试端效果,支持缩放和拖拽平移 |
| 右侧 - 样式配置 | 模板选择 + 自定义配置项 |
右上角 退出 返回编辑器。样式修改后需点击编辑器顶部的 保存 按钮才会生效。
样式模板
提供 6 种预设配色方案,点击即可切换,预览区实时更新。
选择任意非默认模板后,右侧面板展开完整配置项,可在预设基础上进一步自定义:
(图:自定义模式配置面板)
配置分类
| 分类 | 可配置项 |
|---|---|
| 基础颜色 | 页面背景、顶栏背景/标题色、主色调、主/次要文字色、边框色、按钮背景/文字色 |
| 题目卡片 | 背景色、边框色、圆角、按钮圆角、内边距、选项间距、阴影 |
| 高亮标注 | 背景色、边框色(用于必填标识等高亮效果) |
| 答题卡 | 按钮尺寸、按钮圆角、按钮间距、标记色 |
| 状态颜色 | 未作答 / 已作答 / 部分 / 当前,每种状态可分别配置背景、边框、文字三种颜色 |
| 进度条 | 填充色、轨道色、文字色(控制答题进度条的视觉效果) |
| 字体字号 | 题干字体/字号、选项字体/字号 |
颜色项点击打开取色器,圆角和间距使用滑块调整,字号支持直接输入 px 值。
导入/导出
自定义面板顶部提供 导出配置 和 导入配置 按钮,可将样式配置保存为 JSON 文件或从文件导入,方便跨测验复用。
配置层级
样式支持三级继承:测验 → 模块 → 页面。
- 选择测验节点(标"全局")配置的是全局默认样式
- 选择某个模块节点,可为该模块选择不同模板或自定义样式
- 选择某个页面节点,可为单页定制样式
(图:模块级覆盖:第1模块选择了樱花主题,预览区变为粉色)
下级未单独配置时继承上级样式。模块/页面级配置面板右上角显示 重置为继承 链接,点击后清除覆盖、恢复继承。