样式编辑

装修模式,控制测验的视觉呈现——配色、圆角、间距等。配置实时反映在预览区,所见即所得。


进入方式

点击左侧功能栏的样式图标进入全屏装修模式:

(图:样式编辑器全景:左侧配置树 + 中间预览 + 右侧模板/配置)

区域作用
左侧 - 配置层级树形结构,选择要配置的层级(测验/模块/页面)
中间 - 实时预览iframe 渲染被试端效果,支持缩放和拖拽平移
右侧 - 样式配置模板选择 + 自定义配置项

右上角 退出 返回编辑器。样式修改后需点击编辑器顶部的 保存 按钮才会生效。


样式模板

提供 6 种预设配色方案,点击即可切换,预览区实时更新。

选择任意非默认模板后,右侧面板展开完整配置项,可在预设基础上进一步自定义:

(图:自定义模式配置面板)

配置分类

分类可配置项
基础颜色页面背景、顶栏背景/标题色、主色调、主/次要文字色、边框色、按钮背景/文字色
题目卡片背景色、边框色、圆角、按钮圆角、内边距、选项间距、阴影
高亮标注背景色、边框色(用于必填标识等高亮效果)
答题卡按钮尺寸、按钮圆角、按钮间距、标记色
状态颜色未作答 / 已作答 / 部分 / 当前,每种状态可分别配置背景、边框、文字三种颜色
进度条填充色、轨道色、文字色(控制答题进度条的视觉效果)
字体字号题干字体/字号、选项字体/字号

颜色项点击打开取色器,圆角和间距使用滑块调整,字号支持直接输入 px 值。

导入/导出

自定义面板顶部提供 导出配置 和 导入配置 按钮,可将样式配置保存为 JSON 文件或从文件导入,方便跨测验复用。


配置层级

样式支持三级继承:测验 → 模块 → 页面。

  • 选择测验节点(标"全局")配置的是全局默认样式
  • 选择某个模块节点,可为该模块选择不同模板或自定义样式
  • 选择某个页面节点,可为单页定制样式

(图:模块级覆盖:第1模块选择了樱花主题,预览区变为粉色)

下级未单独配置时继承上级样式。模块/页面级配置面板右上角显示 重置为继承 链接,点击后清除覆盖、恢复继承。