GLM-5.1 在「动态表单」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：动态表单
  • 测试类型：网页生成
  • 评测维度：表单设计

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建交互式 Web 应用。 回答要求： 1. 所有代码必须封装在单个 HTML 文件中，不依赖任何外部库或 CDN，可直接在浏览器中运行。 2. 代码结构清晰，HTML/CSS/JavaScript 各自分区，变量命名语义化，逻辑注释简洁到位。 3. 优先保证核心功能的正确性与完整性，UI 风格简洁美观即可，无需过度设计。 4. 对用户操作给予明确的视觉反馈（如错误提示、成功状态），确保基础交互体验流畅。 5. 输出完整的、可独立运行的 HTML 代码，不省略任何部分。

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

请生成一个「问卷调查创建」动态表单页面，所有代码（HTML、CSS、JavaScript）写在同一个 HTML 文件中。 ## 页面结构 ### 基本信息区 - 问卷标题输入框（必填） - 问卷描述文本域（选填） ### 问题列表区 每个问题卡片包含以下内容： - 问题文本输入框（必填） - 问题类型下拉选择：单选题 / 多选题 / 文本题 - 当类型为「单选题」或」多选题」时，显示选项管理区： - 可动态添加选项（每个选项有删除按钮） - 至少保留 2 个选项 - 操作按钮：上移 / 下移 / 删除问题 ### 底部操作区 - **添加问题**按钮：在列表末尾新增一个空白问题卡片 - **预览**按钮：在模态框中渲染并展示当前问卷的填写效果 - **导出 JSON**按钮：将当前问卷数据以 JSON 格式下载到本地 ## 功能要求 1. **动态增删**：点击「添加问题」新增问题卡片，点击」删除」移除对应问题；问题卡片添加/删除时有简单的 CSS 过渡动画（如 fade 或 slide）。 2. **类型切换**：切换问题类型时，选项管理区根据类型动态显示或隐藏。 3. **上移/下移**：调整问题顺序，第一个问题禁用「上移」，最后一个问题禁用」下移」。 4. **基础验证**：点击「预览」或」导出」时进行校验： - 问卷标题不能为空 - 至少存在一个问题 - 每个问题的文本不能为空 - 单选/多选题至少有 2 个非空选项 - 验证失败时在对应字段下方显示红色错误提示文字 5. **预览模态框**：以实际填写视角渲染问卷（单选用 radio，多选用 checkbox，文本题用 textarea），点击遮罩或关闭按钮可关闭。 6. **导出 JSON**：将问卷数据（标题、描述、问题列表及选项）序列化为 JSON 文件并触发下载。 ## UI 要求 - 页面整体居中，最大宽度 720px - 问题卡片有明显的边框/阴影区分 - 错误提示文字为红色，紧贴对应输入框下方 - 按钮样式区分主操作（蓝色）和危险操作（红色）

任务要求

AI 模型需要满足以下要求：

  1. 动态增删问题卡片功能正确，添加/删除时有可见的 CSS 过渡动画效果
  2. 问题类型切换（单选/多选/文本）能正确控制选项管理区的显示与隐藏，选项可动态增删
  3. 上移/下移按钮能正确调整问题顺序，边界问题（首尾）的对应按钮处于禁用状态
  4. 基础必填验证覆盖所有关键字段（标题、问题文本、选项内容），错误提示清晰显示在对应字段附近
  5. 预览模态框能正确渲染问卷填写视图（radio/checkbox/textarea），并可正常关闭
  6. 导出 JSON 功能能将完整问卷数据（含标题、描述、所有问题及选项）正确序列化并触发文件下载

评测结果

综合得分

该模型在此用例的得分为：93.6 分（满分 100 分），已通过

基础难度评测结果

  • 得分：93.6 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 问卷调查创建器 /* ========== 重置与变量 ========== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --primary: #1d4ed8; --primary-hover: #1635a8; --primary-light: #eef2ff; --danger: #dc2626; --danger-hover: #b91c1c; --danger-light: #fef2f2; --success: #059669; --success-light: #ecfdf5; --warning: #d97706; --bg: #f0f2f7; --card: #ffffff; --text: #111827; --text-sec: #6b7280; --border: #e2e5ec; --border-focus: #1d4ed8; --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 14px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04); --shadow-lg: 0 12px 36px rgba(0,0,0,.12); --radius: 10px; --radius-sm: 6px; --ease: cubic-bezier(.4,0,.2,1); } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: linear-gradient(160deg, #e8ecf8 0%, var(--bg) 40%, #f7f0eb 100%); color: var(--text); line-height: 1.6; min-height: 100vh; padding: 44px 20px 60px; position: relative; } /* 背景装饰光晕 */ body::before, body::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; } body::before { top: -180px; right: -120px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(29,78,216,.07) 0%, transparent 70%); } body::after { bottom: -140px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(217,119,6,.05) 0%, transparent 70%); } .container { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; } /* ========== 页面头部 ========== */ .page-header { text-align: center; margin-bottom: 36px; } .page-header h1 { font-size: 30px; font-weight: 800; letter-spacing: -.5px; background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .page-header p { color: var(--text-sec); font-size: 15px; margin-top: 6px; } /* ========== 卡片通用 ========== */ .card { background:...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一份极高质量的实现。模型不仅完美完成了所有功能点和验证逻辑，还在 UI 审美和交互细节（如自动聚焦新问题、复杂的 CSS 动画、响应式布局）上表现出色。代码结构清晰，使用了高效的事件委托和数据驱动思想，完全符合资深前端工程师的角色设定。 【KIMI】该问卷调查创建器在功能实现、表单验证和交互体验方面都表现良好。核心功能如动态增删问题、类型切换、排序、预览和导出均能正常使用，覆盖了所有关键需求。表单验证逻辑较为完整，错误提示清晰，但选项内容的非空验证可以进一步优化。页面布局合理，交互动画和UI设计增强了用户体验。总体来说，这是一个高质量的问卷创建器实现。

进阶难度评测结果

  • 得分：92.0 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 动态问卷创建器 tailwind.config = { theme: { extend: { colors: { bg: '#0d1117', card: '#161b22', 'card-hover': '#1c2128', border: '#30363d', accent: '#ff6b35', 'accent-hover': '#ff8c5a', 'accent-dim': 'rgba(255,107,53,0.12)', fg: '#e6edf3', muted: '#8b949e', success: '#3fb950', danger: '#f85149', 'danger-dim': 'rgba(248,81,73,0.12)', input: '#0d1117', }, fontFamily: { display: ['Space Grotesk', 'sans-serif'], body: ['Noto Sans SC', 'sans-serif'], } } } } *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Noto Sans SC', sans-serif; background: #0d1117; color: #e6edf3; min-height: 100vh; } /* 背景层次 */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 10% 20%, rgba(255,107,53,0.05) 0%, transparent 50%), radial-gradient(ellipse at 90% 80%, rgba(255,159,104,0.03) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(255,107,53,0.02) 0%, transparent 70%); pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } /* 滚动条 */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #484f58; } /* 卡片 */ .survey-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 24px; transition: border-color 0.2s, box-shadow 0.2s; } .survey-card:hover { border-color: #484f58; } /* 问题卡片 */ .question-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 0; transition: border-color 0.2s, box-shadow 0.2s, opacity 0.25s, transform 0.25s; position: relative; overflow: visible; } .question-card:hover { border-color: #484f58; } .question-card-inner { display: flex; padding: 20px; gap: 12px; } /* 拖拽手柄 */ .drag-handle { display: flex; align-items: flex-start; padding-top: 8px; cursor: grab; color: #484f58; font-size: 18px; transition: color 0.2s; user-select: none; flex-shrink: 0; }...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一份极高质量的实现方案。作者不仅完成了所有硬性功能要求，还在交互细节（如拖拽手柄限制、删除前的收缩动画、实时校验逻辑）上展现了资深前端工程师的专业水准。代码结构清晰，逻辑健壮，完全可以直接作为单页应用原型使用。 【KIMI】整体而言，该实现在功能完整性、交互体验和代码架构方面表现良好，基本覆盖了题目要求的核心功能点，用户体验佳。但在代码架构方面还有一定优化空间，如进一步封装事件处理和 DOM 操作，提高代码的模块化程度。

困难难度评测结果

  • 得分：90.1 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 高级动态问卷构建器 :root { --primary: #6366f1; --primary-dark: #4f46e5; --primary-light: #a5b4fc; --bg: #f3f4f6; --card: #ffffff; --text: #1f2937; --text-muted: #6b7280; --border: #e5e7eb; --danger: #ef4444; --success: #10b981; --warning: #f59e0b; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: linear-gradient(135deg, #e0e7ff 0%, #f3f4f6 50%, #ede9fe 100%); color: var(--text); min-height: 100vh; } .app-header { background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 50; } .header-actions button { background: rgba(255,255,255,0.2); border: none; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; margin-left: 0.5rem; transition: all 0.2s; font-size: 0.9rem; } .header-actions button:hover { background: rgba(255,255,255,0.3); } .stepper { display: flex; justify-content: center; padding: 2rem 1rem; background: transparent; } .step-item { display: flex; align-items: center; cursor: pointer; } .step-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--border); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-weight: bold; transition: all 0.3s; border: 2px solid transparent; } .step-item.active .step-circle { background: var(--primary); color: white; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); } .step-item.completed .step-circle { background: var(--success); color: white; } .step-label { margin-left: 0.5rem; font-weight: 500; color: var(--text-muted); } .step-item.active .step-label { color: var(--primary); } .step-item.completed .step-label { color: var(--success); } .step-line { width: 80px; height: 2px; background: var(--border); margin: 0...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一个高质量的单文件 Web 应用示例。它不仅完全满足了所有苛刻的功能要求（如条件逻辑、双重拖拽、Web Audio 合成），还在 UI/UX 细节上表现优异。代码在单文件限制下保持了良好的模块化和可维护性，充分展示了对浏览器底层 API 的熟练掌握，是一个极佳的复杂交互实现。 【KIMI】该代码实现了一个较为完整的高级动态问卷构建器，满足多步骤向导、条件逻辑、拖拽排序、音效反馈、JSON导入导出、localStorage持久化等核心功能要求，UI交互流畅，代码结构相对模块化。但在部分交互细节、代码抽象和注释方面还有改进空间。总体上是一个高质量的SPA应用实现。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%