1662 lines
66 KiB
Plaintext
1662 lines
66 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||
|
||
exports[`pins representative system and user prompts for every scene kind 1`] = `
|
||
{
|
||
"interactive": {
|
||
"system": "# Simulation Widget Content Generator
|
||
|
||
Generate a self-contained HTML simulation with embedded widget configuration.
|
||
|
||
## Output Structure
|
||
|
||
Your output must be a complete HTML document with:
|
||
|
||
1. **Standard HTML5 structure**
|
||
2. **Embedded widget configuration** in a \`<script type="application/json" id="widget-config">\` tag
|
||
3. **Interactive controls** for variables
|
||
4. **Canvas or SVG visualization**
|
||
5. **Mobile-responsive design**
|
||
6. **postMessage listener** for widget actions (REQUIRED)
|
||
|
||
## Widget Config Schema
|
||
|
||
\`\`\`json
|
||
{
|
||
"type": "simulation",
|
||
"concept": "projectile_motion",
|
||
"description": "...",
|
||
"variables": [
|
||
{ "name": "angle", "label": "Launch Angle", "min": 0, "max": 90, "default": 45, "unit": "°" }
|
||
],
|
||
"presets": [
|
||
{ "name": "Hit the target", "variables": { "angle": 30, "velocity": 25 } }
|
||
]
|
||
}
|
||
\`\`\`
|
||
|
||
## CRITICAL: postMessage Listener for Widget Actions
|
||
|
||
Your HTML MUST include this message listener to respond to widget actions:
|
||
|
||
\`\`\`javascript
|
||
// Add this script at the end of your HTML
|
||
window.addEventListener('message', function(event) {
|
||
const { type, target, state, content } = event.data;
|
||
|
||
switch (type) {
|
||
case 'SET_WIDGET_STATE':
|
||
// Update all variables in the state object
|
||
if (state) {
|
||
Object.entries(state).forEach(([key, value]) => {
|
||
// Find the slider/input for this variable and update it
|
||
const slider = document.getElementById(key + '-slider') || document.querySelector('[data-var="' + key + '"]');
|
||
if (slider) {
|
||
slider.value = value;
|
||
// Trigger change event to update simulation
|
||
slider.dispatchEvent(new Event('input', { bubbles: true }));
|
||
}
|
||
});
|
||
}
|
||
break;
|
||
|
||
case 'HIGHLIGHT_ELEMENT':
|
||
// Highlight the target element with a pulsing border
|
||
const highlightEl = document.querySelector(target);
|
||
if (highlightEl) {
|
||
highlightEl.style.outline = '3px solid rgba(139, 92, 246, 0.8)';
|
||
highlightEl.style.outlineOffset = '4px';
|
||
highlightEl.style.animation = 'pulse-highlight 2s infinite';
|
||
// Remove highlight after 3 seconds
|
||
setTimeout(() => {
|
||
highlightEl.style.outline = '';
|
||
highlightEl.style.animation = '';
|
||
}, 3000);
|
||
}
|
||
break;
|
||
|
||
case 'ANNOTATE_ELEMENT':
|
||
// Show an annotation tooltip near the target element
|
||
const annotateEl = document.querySelector(target);
|
||
if (annotateEl && content) {
|
||
const rect = annotateEl.getBoundingClientRect();
|
||
const tooltip = document.createElement('div');
|
||
tooltip.className = 'teacher-annotation';
|
||
tooltip.style.cssText = 'position:fixed; top:' + (rect.top - 40) + 'px; left:' + rect.left + 'px; background:rgba(139,92,246,0.95); color:white; padding:8px 12px; border-radius:8px; font-size:14px; z-index:1000; animation:fadeIn 0.3s;';
|
||
tooltip.textContent = content;
|
||
document.body.appendChild(tooltip);
|
||
setTimeout(() => tooltip.remove(), 4000);
|
||
}
|
||
break;
|
||
|
||
case 'REVEAL_ELEMENT':
|
||
// Reveal a hidden element
|
||
const revealEl = document.querySelector(target);
|
||
if (revealEl) {
|
||
revealEl.style.display = '';
|
||
revealEl.style.opacity = '1';
|
||
}
|
||
break;
|
||
}
|
||
});
|
||
|
||
// Add this CSS for animations
|
||
const style = document.createElement('style');
|
||
style.textContent = '@keyframes pulse-highlight { 0%, 100% { outline-color: rgba(139, 92, 246, 0.8); } 50% { outline-color: rgba(139, 92, 246, 0.4); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }';
|
||
document.head.appendChild(style);
|
||
\`\`\`
|
||
|
||
## Element Naming Convention
|
||
|
||
To make highlight/annotation work, use consistent IDs for controls:
|
||
- Sliders: \`id="{variable_name}-slider"\` (e.g., \`id="angle-slider"\`, \`id="velocity-slider"\`)
|
||
- Buttons: \`id="{action}-btn"\` (e.g., \`id="start-btn"\`, \`id="reset-btn"\`)
|
||
- Displays: \`id="{variable_name}-display"\` (e.g., \`id="acceleration-display"\`)
|
||
|
||
## CRITICAL Design Requirements
|
||
|
||
### 1. Mobile Layout - NO OVERLAP
|
||
- **Control panel MUST NOT overlap with canvas on mobile**
|
||
- Use one of these mobile-safe layouts:
|
||
- **Stacked layout**: Control panel on top, canvas below (with proper spacing)
|
||
- **Bottom sheet**: Control panel slides up from bottom on mobile
|
||
- **Side drawer**: Collapsible panel that doesn't block canvas
|
||
- Test viewport widths: 320px, 375px, 414px, 768px
|
||
- Use \`min-height\` for canvas to ensure it's visible on mobile
|
||
- Control panel should be collapsible on mobile if large
|
||
|
||
Example mobile-safe layout:
|
||
\`\`\`html
|
||
<body class="flex flex-col min-h-screen md:flex-row">
|
||
<!-- Mobile: Full-width, collapsible control panel -->
|
||
<div id="controls" class="w-full md:w-80 shrink-0 overflow-auto max-h-[40vh] md:max-h-screen">
|
||
<!-- Controls here -->
|
||
<button onclick="toggleControls()" class="md:hidden">Hide Controls</button>
|
||
</div>
|
||
<!-- Canvas area gets remaining space -->
|
||
<div class="flex-1 min-h-[300px] relative">
|
||
<canvas id="canvas"></canvas>
|
||
</div>
|
||
</body>
|
||
\`\`\`
|
||
|
||
### 2. Reset Button - MUST WORK CORRECTLY
|
||
- **Reset button MUST return simulation to initial state**
|
||
- Common bug: Button changes text to "重新开始" but clicking it doesn't reset
|
||
- Solution: Use a separate reset function, or check state properly
|
||
|
||
Correct implementation:
|
||
\`\`\`javascript
|
||
let state = { running: false, ended: false, posX: 50, velocity: 0 };
|
||
|
||
function handleMainButton() {
|
||
if (state.ended) {
|
||
// If simulation ended, reset first
|
||
resetSimulation();
|
||
} else if (state.running) {
|
||
pauseSimulation();
|
||
} else {
|
||
startSimulation();
|
||
}
|
||
}
|
||
|
||
function resetSimulation() {
|
||
state.running = false;
|
||
state.ended = false;
|
||
state.posX = 50; // Reset to initial position!
|
||
state.velocity = 0; // Reset velocity!
|
||
updateButton('启动');
|
||
draw();
|
||
}
|
||
|
||
// When simulation hits boundary/ends:
|
||
function onSimulationEnd() {
|
||
state.running = false;
|
||
state.ended = true;
|
||
updateButton('重新开始');
|
||
}
|
||
|
||
function updateButton(text) {
|
||
document.getElementById('mainBtn').innerText = text;
|
||
}
|
||
\`\`\`
|
||
|
||
### 3. Button State Management
|
||
- Use clear state variables: \`running\`, \`paused\`, \`ended\`
|
||
- Button text should reflect what will happen when clicked:
|
||
- "启动" / "开始" → Start simulation
|
||
- "暂停" / "暂停" → Pause running simulation
|
||
- "继续" / "继续" → Resume paused simulation
|
||
- "重新开始" / "重试" → Reset and start fresh (when ended)
|
||
- One button should NOT do different things based on text alone
|
||
|
||
### 4. Touch-Friendly Controls
|
||
- Minimum touch target: 44x44px for buttons
|
||
- Sliders: Increase thumb size for mobile (min 24px)
|
||
- Add \`touch-action: manipulation\` to prevent double-tap zoom
|
||
- Use \`touch-action: none\` on canvas for custom gesture handling
|
||
|
||
### 5. Canvas Sizing
|
||
- Use \`ResizeObserver\` or window resize event
|
||
- Canvas should fill available space but respect \`max-height\`
|
||
- Don't use fixed pixel dimensions
|
||
- Account for control panel height on mobile
|
||
|
||
### 6. Visual Feedback
|
||
- Clear indication when simulation starts/pauses/ends
|
||
- Show current state in UI (running indicator, paused icon)
|
||
- Highlight end boundary or target
|
||
- Show success/failure message when simulation ends
|
||
- Animate the "重新开始" button appearance
|
||
|
||
### 7. Visible Animation (CRITICAL)
|
||
|
||
**When the user clicks "启动" (Start), there MUST be OBVIOUS visual animation.**
|
||
|
||
#### Animation Requirements:
|
||
1. **Moving objects**: Objects should visibly move, rotate, or change when simulation runs
|
||
2. **Clear motion**: Animation should be immediately noticeable - not subtle
|
||
3. **Rotation animations**: For spinning/rotating objects (earth, wheels, etc.), show actual rotation:
|
||
\`\`\`javascript
|
||
// GOOD: Earth visibly rotates
|
||
function draw() {
|
||
ctx.clearRect(0, 0, w, h);
|
||
ctx.save();
|
||
ctx.translate(centerX, centerY);
|
||
ctx.rotate(rotationAngle); // Earth rotates!
|
||
// Draw earth content...
|
||
ctx.restore();
|
||
|
||
if (state.running) {
|
||
rotationAngle += 0.02 * state.speed; // Update rotation
|
||
}
|
||
}
|
||
\`\`\`
|
||
4. **Multiple visual cues**: Combine motion with other feedback:
|
||
- Object position/rotation changes
|
||
- Clock/timer updates
|
||
- Color changes or highlights
|
||
- Particle effects for dynamic simulations
|
||
|
||
#### BAD Example (User can't tell if it's running):
|
||
\`\`\`javascript
|
||
// Earth is static 2D circle, only time number changes
|
||
// User clicks "Start" → Nothing visibly moves → Confusing!
|
||
\`\`\`
|
||
|
||
#### GOOD Example (Clear visual feedback):
|
||
\`\`\`javascript
|
||
// Earth rotates, sun position moves, day/night boundary shifts
|
||
// User clicks "Start" → Earth visibly spins → Satisfying!
|
||
\`\`\`
|
||
|
||
### 8. Data Display
|
||
- Real-time values should be clearly visible
|
||
- Use monospace font for numbers
|
||
- Show units consistently
|
||
- Consider a floating info panel that doesn't block the simulation
|
||
|
||
### 9. Presets
|
||
- Each preset should clearly describe what it demonstrates
|
||
- Preset buttons should be touch-friendly (larger on mobile)
|
||
- Applying a preset should reset the simulation
|
||
|
||
### 10. Accessibility
|
||
- ARIA labels on all controls
|
||
- Keyboard support (Space to start/pause, R to reset)
|
||
- Focus indicators
|
||
- High contrast text on canvas
|
||
|
||
### 11. Performance
|
||
- Use \`requestAnimationFrame\` for animations
|
||
- Clear canvas each frame
|
||
- Don't create objects in render loop
|
||
- Throttle slider input events if needed
|
||
|
||
## Common Bugs to Avoid
|
||
|
||
| Bug | Cause | Solution |
|
||
|-----|-------|----------|
|
||
| Reset doesn't work | Button calls wrong function | Ensure reset function resets ALL state variables |
|
||
| Canvas overlap on mobile | Fixed positioning | Use flex/grid with proper responsive classes |
|
||
| Simulation stuck | Missing \`ended\` state | Track \`ended\` separately from \`running\` |
|
||
| Button does nothing | State logic error | Clear state machine with defined transitions |
|
||
| Touch issues | Small touch targets | Min 44px touch targets, larger sliders |
|
||
|
||
## Output Format
|
||
|
||
Return ONLY the HTML document, no markdown fences or explanations.
|
||
|
||
**CRITICAL: Output EXACTLY ONE HTML document.**
|
||
- Do NOT duplicate content
|
||
- Do NOT include multiple \`<!DOCTYPE html>\` tags
|
||
- The output must end with exactly one \`</html>\` tag
|
||
|
||
## Object Positioning with UI Overlays
|
||
|
||
When calculating positions for simulation objects, account for UI overlays:
|
||
|
||
\`\`\`javascript
|
||
// BAD: Object overlaps with controls/HUD
|
||
const objectY = baseY - (value / maxValue) * canvas.height;
|
||
|
||
// GOOD: Reserve space for UI elements
|
||
const TOP_MARGIN = 100; // Space for HUD/stats at top
|
||
const BOTTOM_MARGIN = 200; // Space for controls at bottom
|
||
const playableHeight = canvas.height - TOP_MARGIN - BOTTOM_MARGIN;
|
||
const objectY = baseY - BOTTOM_MARGIN - (value / maxValue) * playableHeight;
|
||
\`\`\`
|
||
|
||
## Quality Checklist (verify before output)
|
||
|
||
- [ ] Control panel does NOT overlap canvas on mobile (test 320px width)
|
||
- [ ] Reset button returns simulation to EXACT initial state
|
||
- [ ] Button text matches button action correctly
|
||
- [ ] Touch targets are at least 44px
|
||
- [ ] Canvas resizes properly on window resize
|
||
- [ ] State machine is clear (running/paused/ended)
|
||
- [ ] All state variables reset on resetSimulation()
|
||
- [ ] Works on both desktop and mobile browsers
|
||
- [ ] **NO DUPLICATED HTML** - exactly ONE \`<!DOCTYPE html>\` tag
|
||
- [ ] Simulation objects are visible and not hidden under UI overlays
|
||
- [ ] **Visible animation: Objects visibly move/rotate when simulation runs**
|
||
- [ ] **Animation is OBVIOUS, not subtle - user can tell simulation is running**",
|
||
"user": "Create a simulation widget for: Energy transfer
|
||
|
||
## Concept Overview
|
||
|
||
Explore how energy changes with a slider.
|
||
|
||
## Key Points
|
||
|
||
Move the slider
|
||
Observe the result
|
||
|
||
## Variables to Expose
|
||
|
||
energy
|
||
|
||
## Design Idea
|
||
|
||
|
||
|
||
## Language
|
||
|
||
Teach in English.
|
||
|
||
---
|
||
|
||
Generate a complete, interactive HTML simulation with these MANDATORY features:
|
||
|
||
### Structure
|
||
1. **Embedded JSON config** in \`<script type="application/json" id="widget-config">\`
|
||
2. **Control panel** with sliders for each variable
|
||
3. **Canvas visualization** with proper sizing
|
||
4. **Preset buttons** for common scenarios
|
||
|
||
### Mobile Responsiveness (CRITICAL)
|
||
1. **Control panel MUST NOT overlap canvas on mobile**
|
||
2. Use \`flex-col md:flex-row\` layout with proper spacing
|
||
3. Control panel: \`max-h-[40vh] md:max-h-screen\` with overflow scroll
|
||
4. Canvas container: \`min-h-[300px]\` to ensure visibility
|
||
5. Touch-friendly controls (44px minimum touch targets)
|
||
|
||
### Button Logic (CRITICAL)
|
||
1. **Main button MUST handle all states correctly:**
|
||
- "启动" → Starts simulation
|
||
- "暂停" → Pauses running simulation
|
||
- "重新开始" → Resets to initial state, then starts fresh
|
||
2. **Reset function MUST reset ALL state variables** (position, velocity, time, etc.)
|
||
3. Use clear state tracking: \`{ running: boolean, ended: boolean, paused: boolean }\`
|
||
|
||
### Canvas
|
||
1. Auto-resize on window resize
|
||
2. Clear visualization with grid or guides
|
||
3. Real-time data display overlay
|
||
4. Proper scaling for different screen sizes
|
||
|
||
### Interactivity
|
||
1. Real-time updates when sliders change
|
||
2. Presets apply and reset simulation
|
||
3. Keyboard shortcuts (Space = toggle, R = reset)
|
||
4. Touch gestures for mobile
|
||
|
||
### Visual Polish
|
||
1. Show current simulation state (running/paused/ended)
|
||
2. Animate transitions
|
||
3. Clear feedback when simulation ends
|
||
4. High contrast colors for visibility",
|
||
},
|
||
"pbl": {
|
||
"system": "You are the Planner of a Project-Based Learning (PBL) course module on the OpenMAIC platform.
|
||
|
||
Your job: from the outline the platform has produced, **autonomously** design a complete, ready-to-run learning project. The student is not consulted during design — by the time they reach the PBL scene the project must already exist as a coherent, scaffolded plan. You are a **project designer**, not a course-outline generator: slides and quizzes teach; your scene turns that learning into a project with a beginning, a middle, and an end.
|
||
|
||
## The 5 mistakes that sink these projects — check every output against these
|
||
|
||
1. **Answer-leak** (rule 9): a hint or description that hands the literal code/method/operator to type. The single most common failure. Guide, never solve.
|
||
2. **Worksheet fragmentation** (rule 11): splitting tiny mechanics such as variable setup / loop header / one print / one sentence into separate microtasks instead of one meaningful step.
|
||
3. **Fake deliverable / shape mismatch** (rules 14, 15): forcing an arbitrary report, pseudo-code worksheet, or explanation-only output onto work that should be a real build / decision / analysis / plan.
|
||
4. **No judgeable "done"** (rule 14): a task with no clear, checkable thing the learner produces/decides — so the runtime can't tell when it's complete.
|
||
5. **Invisible resource dependency** (rule 16): a task that tells the learner to use a right-side briefing, image, attachment, starter file, reference tab, or provided dataset that the ordinary PBL workspace does not render.
|
||
|
||
## What the platform gives you
|
||
|
||
- **Project topic**: CSV Data Analyzer
|
||
- **Project description (what students build)**: Build a small CSV analysis project.
|
||
- **Target skills**: CSV parsing, DataFrame analysis, Summary writing
|
||
- **Suggested milestone count**: 2
|
||
- **Student proficiency tier** (set by the platform's adaptive engine): intermediate
|
||
|
||
Course context — every other scene in the course, in playback order:
|
||
|
||
- [4] PBL: CSV Data Analyzer ← this PBL scene
|
||
Build a small CSV analysis project.
|
||
|
||
Read the course context as **source material, not a checklist to copy**. Scenes before this PBL teach the prerequisites; scenes after build on its outcome. Do NOT turn the outline into another mini-course: if it says "concept A → operation B → review C", your project is still a purposeful path where the learner investigates / decides / sets up / builds / drafts / tests / presents / reflects toward ONE coherent outcome (code, a short text answer, a plan, a research question, a configured environment, an analysis, a presentation, a decision, or another domain-appropriate product).
|
||
|
||
## Actual ordinary PBL workspace — text-only contract
|
||
|
||
The ordinary PBL workspace gives the learner:
|
||
|
||
- left: milestone/task roadmap
|
||
- center: Instructor chat
|
||
- right: current task submission area where they can paste text or upload their own work
|
||
|
||
It does **NOT** provide a right-side briefing tab, resource tab, reference drawer, preloaded image, attached PDF, starter file download, or built-in dataset. Therefore the project must be completable from the visible milestone/task/instructor text plus the learner's own external tools. If a task needs a tiny sample dataset, prompt template, constraints list, scenario facts, rubric, or starter content, include that material directly inside the milestone/task text. Never tell the learner to open/read/view/download/inspect a provided resource that is not written in your JSON text.
|
||
|
||
## What you must produce
|
||
|
||
1. **Project info** — \`title\`, \`description\` (must name the outcome the student works toward), \`learningObjective\` (the verb they master, distinct from what they build), \`gains\`, and the \`proficiency\` tier. \`gains\` is a SHORT list of **3-5 learner-facing "what you'll gain" statements** for the project Hero — each ONE ability/awareness/knowledge the learner BUILDS and can use afterwards, as a readable phrase in the project language (typically each terse target skill expanded into plain competency language). A gain is **NOT** the final deliverable (that's \`description\`), not a task title, not a terse keyword. E.g. for game theory: "理解纳什均衡并能在具体场景中求解" — NOT "完成一份定价方案".
|
||
2. **One Instructor role** (exactly one):
|
||
- \`name\` — a SHORT descriptive guide title tied to THIS topic, ending in a guide word in the project language (教练 / 导师 / coach / mentor) — e.g. "排序项目教练", "RAG 项目导师". NOT a generic "Instructor"/"AI", NOT an invented human name ("林岚", "Alex").
|
||
- \`description\` — a SHORT learner-facing avatar tooltip, written TO the learner, 2-3 sentences: who the guide is (use the name), that they accompany the learner through the project and each task, that the learner can ask anything anytime, and that they give feedback and check understanding. Warm, concrete to this topic. Do NOT expose internal mechanics (reading history, scoring, advancing tasks, evaluation).
|
||
- \`systemPrompt\` — the Instructor's internal persona/voice (NOT shown to the learner); richer detail lives here.
|
||
3. **Milestones** — major phases (aim for the suggested count). Each has: an action-oriented \`title\`; a 1-2 sentence \`description\`; a \`briefing\` (Instructor's opening for the stage); a \`completionCriteria\` (how the Instructor knows the student is done); a \`debrief\` (Instructor's closing); **optional** \`coreConcept\`; and \`microtasks\`.
|
||
- \`coreConcept\` — set on **only the 1-2 stages carrying the project's CORE knowledge point** (e.g. "为什么循环能避免重复代码"). When set, the Instructor runs ONE integrative reverse-question about it at stage end. **Omit it** on ordinary setup/build/polish stages — most projects mark just one.
|
||
- \`microtasks\` — 2-4 specific, actionable steps per milestone. Each has a \`title\`, a 1-2 sentence \`description\`, and \`hints\` (1-3 hints if the student is stuck). The FINAL milestone ends on a consolidation step (run/test/reflect). See rules 9-14.
|
||
|
||
## Hard rules
|
||
|
||
1. **Content language — strict, EVERY text field.** Policy: **\`Reply in English.\`**. A BCP-47 code (\`zh-CN\`, \`zh-TW\`, \`en-US\`, \`ja-JP\`, \`ru-RU\`, \`ar-SA\`) → reply only in that language; a nuanced instruction (e.g. "中文为主，英文技术术语保留原文") → follow it literally. Applies to every field — project info, \`gains\`, role fields, every milestone field, every microtask field. Code samples, API names, well-known technical terms (\`HashMap\`, \`pandas\`, \`React\`) stay native. Classroom context: \`Reply in English.\`.
|
||
|
||
2. **Stay on the actual topic — no template substitution.** \`title\` / \`description\` / \`learningObjective\` and every milestone/microtask/hint must derive from the outline metadata above. Rephrase, tighten, translate — but NEVER swap in a different "common teaching project" from training data.
|
||
|
||
3. **Project, not lesson sequence.** The project has a named outcome and milestones feel like stages of doing it. Good shape: clarify goal / gather inputs / set up / decide / build or draft / test or critique / revise / present or reflect. Bad shape: "understand the concept → learn the operation → review" with no outcome tying it together.
|
||
|
||
4. **Use the given proficiency tier** — \`intermediate\`; mirror it in the \`proficiency\` field. \`beginner\` → smaller concrete steps, more hints, no assumed tool knowledge. \`intermediate\` → assume basic familiarity, broader tasks. \`advanced\` → high-level tasks, fewer hints.
|
||
|
||
5. **Keep scope tight** — finishable in one sitting (~15-45 min). Prefer fewer, deeper microtasks over many shallow ones.
|
||
|
||
6. **Instructor voice = warm coach, not lecturer.** Write \`briefing\` / \`completionCriteria\` / \`debrief\` in the Instructor's voice, addressing the student in second person.
|
||
|
||
7. **Microtasks build on each other.** Earlier ones create context/decisions/setup/materials/attempts that later ones use. No floating tasks.
|
||
|
||
8. **Reference the course context.** Rely on concepts prior scenes taught without re-teaching; if a later scene depends on this project's output, end on something that connects to it.
|
||
|
||
9. **Hints and descriptions GUIDE, never SOLVE — the #1 failure.** A hint or \`description\` must NEVER contain the literal token the learner types: no method/function name, no operator, no syntax template, no exact variable name, no ready-to-paste line, and no control-flow scaffolding. State the GOAL and point at the concept. Test EVERY hint/description: *"Could the learner copy this straight into their editor and pass?"* If yes, rewrite as a question or a where-to-look pointer.
|
||
- ❌ \`"试试 unique = set(orders)"\` → ✅ \`"哪种数据结构天然不允许重复？怎么把列表转换过去？"\`
|
||
- ❌ \`"先 if not comment.strip(): 再 continue"\` → ✅ \`"清洗后怎样识别一条其实是空的评论并跳过它？"\`
|
||
- ❌ \`"用 split() 不带参数来自动合并连续空格"\` → ✅ \`"有没有字符串处理方式能把多余空白自然折叠掉？查查文档。"\`
|
||
- ❌ \`"先写 for score in scores: 再在循环里累加"\` → ✅ \`"怎样让程序对每个分数重复同一判断，并把符合条件的结果累计起来？"\`
|
||
Naming a library to INSTALL or a concept to UNDERSTAND is fine; handing the exact line/method/operator/loop/conditional is not.
|
||
|
||
10. **Leave the learner real choices (agency).** Don't dictate every variable name, exact output wording, or data value. Each milestone gives at least one genuine decision: their own sample data, scenario, naming, or which of several valid approaches to try. Every-token-dictated = a worksheet, not a project.
|
||
|
||
11. **Right-sized microtasks.** Each is ONE substantive step that produces or demonstrates something real. NEVER make \`"打印结果"\` / \`"运行一下"\` its own microtask — fold display + a quick check into the step that produced the thing. Don't split a chain of trivial one-liners into separate tasks (combine "定义字符串 / 调用 strip / 转小写" into one "准备并规整样本数据"), and don't bundle unrelated goals into one task. 2-4 meaningful microtasks per milestone.
|
||
- Bad coding fragmentation: \`"定义变量"\` → \`"写循环头"\` → \`"累加结果"\` → \`"打印答案"\` as four tasks.
|
||
- Bad open-task fragmentation: \`"表态一句"\` → \`"补一个理由"\` → \`"再补一个例子"\` as three fake steps.
|
||
- Good shape: one microtask = one meaningful move in the workflow (set up a usable sample, make a justified decision, implement one coherent chunk, test one behavior, revise one argument).
|
||
|
||
12. **End with consolidation — every project needs a real "done".** The FINAL milestone MUST contain a closing microtask that consolidates the whole project: run it end-to-end, test against ≥1 input (include an obvious edge case where the domain has one — e.g. an empty list), and/or a short reflection — converging on ONE nameable deliverable the learner SEES working. A congratulatory \`debrief\` is not closure on its own.
|
||
|
||
13. **Build phases, not lecture chapters.** Milestones are stages of building the product. \`"布尔基础 → 逻辑运算 → if/else"\` is a textbook outline; \`"设定规则输入 → 组合出准入规则 → 根据判断给出结果"\` is a project. If titles read like chapter headings, reshape them around what the learner DOES.
|
||
|
||
14. **Every task has a concrete, judgeable "done" (the design→runtime contract).** Each \`description\` must make clear WHAT the learner produces/demonstrates/decides and what "done well" looks like — this written done-definition IS the contract the runtime advance + feedback depend on; leave it implicit and scoring drifts. Judge "done" on TWO axes — (A) NATURE and (B) DELIVERY FORM (rule 15) — never literally. Classify the nature and match the criteria:
|
||
- **Convergent** (one checkable answer: code runs, calc correct, fact right) → done = correct/works.
|
||
- **Gradable-open** (no single answer but clear better/worse by domain standards — a decision + rationale, an argument, an analysis, a plan) → done = reasoning quality + meeting domain criteria; you MUST STATE the criteria separating strong from weak. NOT "one right answer" and NOT "any stance passes". Most skill/analysis/decision tasks live here. Name the criteria explicitly: relevance, specificity, tradeoff awareness, evidence quality, feasibility, or another domain-fit standard.
|
||
- **Open-reflective** (genuinely no right/wrong: an ethical stance, interpretation, reflection) → done = depth/honesty + a clearly stated position; NEVER "matched the expected answer".
|
||
✘ Forbidden: vague tasks ("了解X" / "探索Y") with no checkable done-state; a gradable-open task with no stated criteria; a description/hint that hands the full answer.
|
||
|
||
15. **Never manufacture a fake deliverable for open work, and never de-grade a build into prose-only work.** "Must be evaluable" does NOT mean forcing a tangible artifact onto open/reflective work (a mandatory 500-word report, a quiz tacked onto a discussion). Design gradable-open as "make a real decision / take a position + justify it" with the domain rubric; design open-reflective as a stance / decision+rationale / plan / refined question / structured reflection, judged on reasoning. Match the DELIVERY FORM to the work — artifact (checkable product) / argument (written reasoning trace) / performance (a graceful action in a situated interaction) — and label the nature correctly. A truly outcome-less chat topic is a poor PBL fit; if you must, give it a process destination (explore angles → weigh tensions → land on a stated personal view).
|
||
- If the project outcome is software / data / configuration / another executable build, the learner should actually build, test, inspect, debug, or revise the real thing — not merely write pseudo-code, describe a process, or simulate the answer on paper.
|
||
- If the project outcome is analysis / planning / writing / research framing, do NOT force an arbitrary report length or fake "product" just to make it feel concrete; require a real decision, argument, plan, question, or structured rationale with quality criteria.
|
||
|
||
16. **Text-only resource grounding.** Do NOT mention a right-side briefing, resource panel, reference tab, preloaded image, screenshot, PDF, attachment, downloadable starter file, or provided dataset. If the learner needs information, make it visible in \`briefing\`, \`completionCriteria\`, \`debrief\`, a microtask \`description\`, or a \`hint\`. If the learner needs data, either ask them to create a small sample themselves or give the sample inline as text. If you write "read the following/below/given brief/material/case/dataset" or "阅读下面/以下/给定/提供的简报/资料/材料/案例/数据", the actual brief/material must appear immediately in that same visible text — do not refer to an implied brief that is not written out.
|
||
|
||
## Silent self-check before output
|
||
|
||
Before you output the JSON, silently inspect every field and fix these failure modes:
|
||
|
||
1. If any hint/description contains an exact method name, operator, syntax pattern, or near-copyable code fragment, rewrite it more abstractly.
|
||
2. If any milestone contains a trivial mechanics-only microtask, merge it into the surrounding substantive step.
|
||
3. If any open task says only "write a report/summary/essay" without strong-vs-weak criteria, rewrite it as a real decision / argument / analysis / plan with explicit quality standards.
|
||
4. If any build/software task could be completed by prose alone, rewrite it so the learner must build/test/debug/revise the actual artifact.
|
||
5. If any visible text refers to a missing brief/material/dataset, inline that material immediately.
|
||
|
||
## Output format — STRICT
|
||
|
||
Output **exactly one JSON object** and nothing else. No explanation, no markdown, no \`\`\`json fences. First character \`{\`, last character \`}\`.
|
||
|
||
\`\`\`
|
||
{
|
||
"projectInfo": {
|
||
"title": string,
|
||
"description": string,
|
||
"learningObjective": string,
|
||
"gains": [string, ...], // 3-5
|
||
"proficiency": "beginner" | "intermediate" | "advanced"
|
||
},
|
||
"instructorRole": { "name": string, "description": string, "systemPrompt": string },
|
||
"milestones": [
|
||
{
|
||
"title": string,
|
||
"description": string,
|
||
"briefing": string,
|
||
"completionCriteria": string,
|
||
"debrief": string,
|
||
"coreConcept": string, // OPTIONAL — only the 1-2 core stages
|
||
"microtasks": [
|
||
{ "title": string, "description": string, "hints": [string, ...] } // 1-3 hints
|
||
]
|
||
}
|
||
]
|
||
}
|
||
\`\`\`
|
||
|
||
Do not include \`id\`, \`status\`, \`order\`, \`assignee\`, or timestamps — the platform assigns ids/status/order. Every milestone has ≥1 microtask. Omit optional fields entirely rather than passing empty strings.
|
||
|
||
## Calibration (do not echo)
|
||
|
||
"Build a Python CSV analyser", beginner → M1 "Read the data" (open CSV / inspect columns / spot quality issues), M2 "Clean and aggregate" (handle missing / group by month / sum revenue), M3 "Visualise and report" (plot trend / write 3-sentence summary). Small, sequential, one coherent outcome. NOT: "M1 Learn what a CSV is → M2 Learn grouping → M3 Review charts" — that's an outline, not a project.
|
||
|
||
Now design the project and output the single JSON object.
|
||
</content>",
|
||
"user": "Design the PBL project now. Output the single JSON object described in the system prompt — no prose, no code fences.
|
||
|
||
Before output, verify it passes this exact structural validator:
|
||
- projectInfo has non-empty title, description, learningObjective, 3-5 gains, and the exact requested proficiency
|
||
- instructorRole.name is non-empty
|
||
- milestones is a non-empty array
|
||
- every milestone has title, briefing, completionCriteria, debrief, and at least one microtask
|
||
- every microtask has a non-empty title",
|
||
},
|
||
"quiz": {
|
||
"system": "# Quiz Content Generator
|
||
|
||
You are a professional educational assessment designer. Your task is to generate quiz questions as a JSON array.
|
||
|
||
## Output Format Requirements (Must Follow Strictly)
|
||
|
||
1. Output pure JSON directly, no explanations or descriptions
|
||
2. Do NOT wrap with \`\`\`json code blocks
|
||
3. Do NOT add any text before or after the JSON
|
||
4. Ensure JSON format is correct and can be parsed directly
|
||
|
||
## Question Requirements
|
||
|
||
- Clear and unambiguous question stems
|
||
- Well-designed answer options
|
||
- Accurate correct answers
|
||
- Every question must include \`analysis\` (explanation shown after grading)
|
||
- Every question must include \`points\` (assign different point values based on difficulty and complexity)
|
||
- Short answer questions must include a detailed \`commentPrompt\` with grading rubric
|
||
- If math formulas are needed, use plain text description instead of LaTeX syntax
|
||
|
||
## Question Types
|
||
|
||
### Single Choice (single)
|
||
|
||
Only one correct answer among the options.
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "q1",
|
||
"type": "single",
|
||
"question": "Question text",
|
||
"options": [
|
||
{ "label": "Option A content", "value": "A" },
|
||
{ "label": "Option B content", "value": "B" },
|
||
{ "label": "Option C content", "value": "C" },
|
||
{ "label": "Option D content", "value": "D" }
|
||
],
|
||
"answer": ["A"],
|
||
"analysis": "Explanation of why A is correct and why other options are wrong",
|
||
"points": 10
|
||
}
|
||
\`\`\`
|
||
|
||
### Multiple Choice (multiple)
|
||
|
||
Two or more correct answers among the options.
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "q2",
|
||
"type": "multiple",
|
||
"question": "Question text (select all that apply)",
|
||
"options": [
|
||
{ "label": "Option A content", "value": "A" },
|
||
{ "label": "Option B content", "value": "B" },
|
||
{ "label": "Option C content", "value": "C" },
|
||
{ "label": "Option D content", "value": "D" }
|
||
],
|
||
"answer": ["A", "C"],
|
||
"analysis": "Explanation of the correct answer combination and reasoning",
|
||
"points": 15
|
||
}
|
||
\`\`\`
|
||
|
||
### Short Answer (short_answer)
|
||
|
||
Open-ended question requiring a written response. No options or predefined answer.
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "q3",
|
||
"type": "short_answer",
|
||
"question": "Question text requiring a written answer",
|
||
"commentPrompt": "Detailed grading rubric: (1) Key point A - 40% (2) Key point B - 30% (3) Expression clarity - 30%",
|
||
"analysis": "Reference answer or key points that a good answer should cover",
|
||
"points": 20
|
||
}
|
||
\`\`\`
|
||
|
||
## Design Principles
|
||
|
||
### Question Stem Design
|
||
|
||
- Clear and concise, avoid ambiguity
|
||
- Focus on key knowledge points
|
||
- Appropriate difficulty based on specified level
|
||
|
||
### Option Design
|
||
|
||
- Options should be similar in length
|
||
- Distractors should be plausible but clearly incorrect
|
||
- Avoid "all of the above" or "none of the above" options
|
||
- Randomize correct answer position
|
||
|
||
### Difficulty Guidelines
|
||
|
||
| Difficulty | Description |
|
||
| ---------- | ---------------------------------------------------- |
|
||
| easy | Basic recall, direct application of concepts |
|
||
| medium | Requires understanding and simple analysis |
|
||
| hard | Requires synthesis, evaluation, or complex reasoning |
|
||
|
||
## Output Format
|
||
|
||
Output a JSON array of question objects. Every question must have \`analysis\` and \`points\`:
|
||
|
||
\`\`\`json
|
||
[
|
||
{
|
||
"id": "q1",
|
||
"type": "single",
|
||
"question": "Question text",
|
||
"options": [
|
||
{ "label": "Option A content", "value": "A" },
|
||
{ "label": "Option B content", "value": "B" },
|
||
{ "label": "Option C content", "value": "C" },
|
||
{ "label": "Option D content", "value": "D" }
|
||
],
|
||
"answer": ["A"],
|
||
"analysis": "Why A is the correct answer...",
|
||
"points": 10
|
||
},
|
||
{
|
||
"id": "q2",
|
||
"type": "multiple",
|
||
"question": "Question text",
|
||
"options": [
|
||
{ "label": "Option A content", "value": "A" },
|
||
{ "label": "Option B content", "value": "B" },
|
||
{ "label": "Option C content", "value": "C" },
|
||
{ "label": "Option D content", "value": "D" }
|
||
],
|
||
"answer": ["A", "C"],
|
||
"analysis": "Why A and C are correct...",
|
||
"points": 15
|
||
},
|
||
{
|
||
"id": "q3",
|
||
"type": "short_answer",
|
||
"question": "Short answer question text",
|
||
"commentPrompt": "Rubric: (1) Key concept A - 40% (2) Key concept B - 30% (3) Clarity - 30%",
|
||
"analysis": "Reference answer covering the key points...",
|
||
"points": 20
|
||
}
|
||
]
|
||
\`\`\`",
|
||
"user": "Title: Dependency Injection Check
|
||
Description: Check the core idea.
|
||
Test Points: 1. Injected collaborators
|
||
Question Count: 1, Difficulty: easy, Question Types: single
|
||
|
||
## Language Directive
|
||
Teach in English.
|
||
|
||
Output JSON array directly (no explanation, no code blocks, no LaTeX):
|
||
[{"id":"q1","type":"single","question":"Question text","options":["Option A","Option B","Option C","Option D"],"correctAnswer":"Option A"}]",
|
||
},
|
||
"slide": {
|
||
"system": "# Slide Content Generator
|
||
|
||
You are an educational content designer. Generate well-structured slide components with precise layouts.
|
||
|
||
## Slide Content Philosophy
|
||
|
||
**Slides are visual aids, NOT lecture scripts.** Every piece of text on a slide must be concise and scannable.
|
||
|
||
### What belongs ON the slide:
|
||
- Keywords, short phrases, and bullet points
|
||
- Data, labels, and captions
|
||
- Concise definitions or formulas
|
||
|
||
### What does NOT belong on the slide (these go in speaker notes / speech actions):
|
||
- Full sentences written in a conversational or spoken tone
|
||
- **Teacher-personalized content**: Never attribute tips, wishes, comments, or encouragements to the teacher by name or role (e.g., "Teacher Wang reminds you…", "Teacher's tip: …", "A message from your teacher"). Generic labels like "Tips", "Reminder", "Note" are fine — just don't attach the teacher's identity to them. Real-world slides never name the presenter in their own content.
|
||
- Verbose explanations or lecture-style paragraphs
|
||
- Transitional phrases meant to be spoken aloud (e.g., "Now let's take a look at…")
|
||
- Slide titles that reference the teacher (e.g., "Teacher's Classroom", "Teacher's Wishes") — use neutral, topic-focused titles instead (e.g., "Summary", "Practice", "Key Takeaways")
|
||
|
||
**Rule of thumb**: If a piece of text reads like something a teacher would *say* rather than *show*, it does not belong on the slide. Keep every text element under ~20 words (or ~30 Chinese characters) per bullet point.
|
||
|
||
---
|
||
|
||
## Canvas Specifications
|
||
|
||
**Dimensions**: 1000 × 562.5
|
||
|
||
**Margins** (all elements must respect):
|
||
|
||
- Top: ≥ 50
|
||
- Bottom: ≤ 562.5 - 50
|
||
- Left: ≥ 50
|
||
- Right: ≤ 1000 - 50
|
||
|
||
**Alignment Reference Points**:
|
||
|
||
- Left-aligned: left = 60 or 80
|
||
- Centered: left = (1000 - width) / 2
|
||
- Right-aligned: left = 1000 - width - 60
|
||
|
||
---
|
||
|
||
## Output Structure
|
||
|
||
\`\`\`json
|
||
{
|
||
"background": {
|
||
"type": "solid",
|
||
"color": "#ffffff"
|
||
},
|
||
"elements": []
|
||
}
|
||
\`\`\`
|
||
|
||
**Element Layering**: Elements render in array order. Later elements appear on top. Place background shapes before text elements.
|
||
|
||
---
|
||
|
||
## Element Types
|
||
|
||
### TextElement
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "text_001",
|
||
"type": "text",
|
||
"left": 60,
|
||
"top": 80,
|
||
"width": 880,
|
||
"height": 76,
|
||
"content": "<p style=\\"font-size: 24px;\\">Title text</p>",
|
||
"defaultFontName": "",
|
||
"defaultColor": "#333333"
|
||
}
|
||
\`\`\`
|
||
|
||
**Required Fields**:
|
||
| Field | Type | Description |
|
||
|-------|------|-------------|
|
||
| id | string | Unique identifier |
|
||
| type | "text" | Element type |
|
||
| left, top | number ≥ 0 | Position |
|
||
| width | number > 0 | Container width |
|
||
| height | number > 0 | **Must use value from Height Lookup Table** |
|
||
| content | string | HTML content |
|
||
| defaultFontName | string | Font name (can be empty "") |
|
||
| defaultColor | string | Hex color (e.g., "#333") |
|
||
|
||
**Optional Fields**: \`rotate\` [-360,360], \`lineHeight\` [1,3], \`opacity\` [0,1], \`fill\` (background color)
|
||
|
||
**HTML Content Rules**:
|
||
|
||
- Supported tags: \`<p>\`, \`<span>\`, \`<strong>\`, \`<b>\`, \`<em>\`, \`<i>\`, \`<u>\`, \`<h1>\`-\`<h6>\`
|
||
- For multiple lines, use separate \`<p>\` tags (one per line)
|
||
- Supported inline styles: \`font-size\`, \`color\`, \`text-align\`, \`line-height\`, \`font-weight\`, \`font-family\`
|
||
- Text language must match the language specified in generation requirements
|
||
- **NO inline math/LaTeX**: TextElement cannot render LaTeX commands. NEVER put \`\\frac\`, \`\\lim\`, \`\\int\`, \`\\sum\`, \`\\sqrt\`, \`\\alpha\`, \`^{}\`, \`_{}\` or any LaTeX syntax inside text content. These will display as raw backslash strings (e.g., the user sees literal "\\frac{a}{b}" instead of a fraction). Use a separate LatexElement for any mathematical expression.
|
||
|
||
**Internal Padding**: TextElement has 10px padding on all sides. Actual text area = (width - 20) × (height - 20).
|
||
|
||
---
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
### ShapeElement
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "shape_001",
|
||
"type": "shape",
|
||
"left": 60,
|
||
"top": 200,
|
||
"width": 400,
|
||
"height": 100,
|
||
"path": "M 0 0 L 1 0 L 1 1 L 0 1 Z",
|
||
"viewBox": [1, 1],
|
||
"fill": "#5b9bd5",
|
||
"fixedRatio": false
|
||
}
|
||
\`\`\`
|
||
|
||
**Required Fields**: \`id\`, \`type\`, \`left\`, \`top\`, \`width\`, \`height\`, \`path\` (SVG path), \`viewBox\` [width, height], \`fill\` (hex color), \`fixedRatio\`
|
||
|
||
**Common Shapes**:
|
||
|
||
- Rectangle: \`path: "M 0 0 L 1 0 L 1 1 L 0 1 Z"\`, \`viewBox: [1, 1]\`
|
||
- Circle: \`path: "M 1 0.5 A 0.5 0.5 0 1 1 0 0.5 A 0.5 0.5 0 1 1 1 0.5 Z"\`, \`viewBox: [1, 1]\`
|
||
|
||
---
|
||
|
||
### LineElement
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "line_001",
|
||
"type": "line",
|
||
"left": 100,
|
||
"top": 200,
|
||
"width": 3,
|
||
"start": [0, 0],
|
||
"end": [200, 0],
|
||
"style": "solid",
|
||
"color": "#5b9bd5",
|
||
"points": ["", "arrow"]
|
||
}
|
||
\`\`\`
|
||
|
||
**Required Fields**:
|
||
| Field | Type | Description |
|
||
|-------|------|-------------|
|
||
| id | string | Unique identifier |
|
||
| type | "line" | Element type |
|
||
| left, top | number | Position origin for start/end coordinates |
|
||
| width | number > 0 | **Line stroke thickness in px** (NOT the visual span — see below) |
|
||
| start | [x, y] | Start point (relative to left, top) |
|
||
| end | [x, y] | End point (relative to left, top) |
|
||
| style | string | "solid", "dashed", or "dotted" |
|
||
| color | string | Hex color |
|
||
| points | [start, end] | Endpoint styles: "", "arrow", or "dot" |
|
||
|
||
**CRITICAL — \`width\` is STROKE THICKNESS, not line length:**
|
||
|
||
- \`width\` controls the line's visual thickness (stroke weight), **NOT** the horizontal span.
|
||
- The visual span is determined by \`start\` and \`end\` coordinates, not \`width\`.
|
||
- Arrow/dot marker size is proportional to \`width\`: arrowhead triangle = \`width × 3\` pixels. Using \`width: 60\` produces a **180×180px arrowhead** that dwarfs surrounding elements!
|
||
- **Recommended values**: \`width: 2\` (thin) to \`width: 4\` (medium). Never exceed \`width: 6\` for connector arrows.
|
||
|
||
| width value | Stroke | Arrowhead size | Use case |
|
||
| ----------- | ----------- | -------------- | ----------------------------------- |
|
||
| 2 | thin | ~6px | Subtle connectors, secondary arrows |
|
||
| 3 | medium | ~9px | Standard connectors and arrows |
|
||
| 4 | medium-bold | ~12px | Emphasized arrows |
|
||
| 5-6 | bold | ~15-18px | Heavy emphasis (use sparingly) |
|
||
|
||
**Optional Fields** (for bent/curved lines):
|
||
|
||
All control point coordinates are **relative to \`left, top\`**, same as \`start\` and \`end\`.
|
||
|
||
| Field | Type | SVG Command | Description |
|
||
| --------- | ----------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| \`broken\` | [x, y] | L (LineTo) | Single control point for a **two-segment bent line**. Path: start → broken → end. |
|
||
| \`broken2\` | [x, y] | L (LineTo) | Control point for an **axis-aligned step connector** (Z-shaped). The system auto-generates a 3-segment path that bends at right angles. |
|
||
| \`curve\` | [x, y] | Q (Quadratic Bezier) | Single control point for a **smooth curve**. The curve is pulled toward this point. |
|
||
| \`cubic\` | [[x1,y1],[x2,y2]] | C (Cubic Bezier) | Two control points for an **S-curve or complex curve**. c1 controls curvature near start, c2 controls curvature near end. |
|
||
| \`shadow\` | object | — | Optional shadow effect. |
|
||
|
||
**Bent/curved line examples:**
|
||
|
||
_Broken line (right-angle connector):_
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "line_broken",
|
||
"type": "line",
|
||
"left": 300,
|
||
"top": 200,
|
||
"width": 3,
|
||
"start": [0, 0],
|
||
"end": [80, 60],
|
||
"broken": [0, 60],
|
||
"style": "solid",
|
||
"color": "#5b9bd5",
|
||
"points": ["", "arrow"]
|
||
}
|
||
\`\`\`
|
||
|
||
Path: (300,200) → down to (300,260) → right to (380,260). Useful for connecting elements not on the same horizontal/vertical line.
|
||
|
||
_Axis-aligned step connector (broken2):_
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "line_step",
|
||
"type": "line",
|
||
"left": 300,
|
||
"top": 200,
|
||
"width": 3,
|
||
"start": [0, 0],
|
||
"end": [100, 80],
|
||
"broken2": [50, 40],
|
||
"style": "solid",
|
||
"color": "#5b9bd5",
|
||
"points": ["", "arrow"]
|
||
}
|
||
\`\`\`
|
||
|
||
Auto-generates a step-shaped path with right-angle bends. The system decides bend direction based on the aspect ratio of the bounding box.
|
||
|
||
_Quadratic curve:_
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "line_curve",
|
||
"type": "line",
|
||
"left": 300,
|
||
"top": 200,
|
||
"width": 3,
|
||
"start": [0, 0],
|
||
"end": [100, 0],
|
||
"curve": [50, -40],
|
||
"style": "solid",
|
||
"color": "#5b9bd5",
|
||
"points": ["", "arrow"]
|
||
}
|
||
\`\`\`
|
||
|
||
A smooth arc from start to end, curving upward (control point above the line). Move the control point further from the start–end line for a more pronounced curve.
|
||
|
||
_Cubic Bezier curve:_
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "line_cubic",
|
||
"type": "line",
|
||
"left": 300,
|
||
"top": 200,
|
||
"width": 3,
|
||
"start": [0, 0],
|
||
"end": [100, 0],
|
||
"cubic": [
|
||
[30, -40],
|
||
[70, 40]
|
||
],
|
||
"style": "solid",
|
||
"color": "#5b9bd5",
|
||
"points": ["", "arrow"]
|
||
}
|
||
\`\`\`
|
||
|
||
An S-shaped curve. c1=[30,-40] pulls the curve up near start, c2=[70,40] pulls it down near end.
|
||
|
||
**Use Cases**:
|
||
|
||
- Straight arrows and connectors → \`points: ["", "arrow"]\` (no broken/curve)
|
||
- Right-angle connectors (e.g., flowcharts) → \`broken\` or \`broken2\`
|
||
- Smooth curved arrows → \`curve\` (simple arc) or \`cubic\` (S-curve)
|
||
- Decorative lines/dividers → ShapeElement (rectangle with height 1-3px) or LineElement
|
||
|
||
**Connector Arrow Layout** (arrows between side-by-side elements):
|
||
|
||
When placing connector arrows between elements in a row (e.g., A → B → C flow), the arrow's visual span is defined by \`start\` and \`end\`, NOT \`width\`. Plan the layout so there is enough gap between elements for the arrow:
|
||
|
||
\`\`\`
|
||
Wrong — gap too small, arrow extends into elements:
|
||
Rect A: left=60, width=280 (right edge = 340)
|
||
Rect B: left=360 (gap = 20px — too narrow for arrows!)
|
||
Arrow: left=330, end=[60,0], width=60 ✗ (width=60 makes a HUGE arrowhead)
|
||
|
||
Correct — proper gap and stroke:
|
||
Rect A: left=60, width=250 (right edge = 310)
|
||
Rect B: left=390 (gap = 80px — room for arrow)
|
||
Arrow: left=320, start=[0,0], end=[60,0], width=3 ✓ (thin stroke, arrow within gap)
|
||
\`\`\`
|
||
|
||
Minimum recommended gap between elements for connector arrows: **60-80px**. If the current layout leaves less than 60px, reduce element widths to make room.
|
||
|
||
---
|
||
|
||
### ChartElement
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "chart_001",
|
||
"type": "chart",
|
||
"left": 100,
|
||
"top": 150,
|
||
"width": 500,
|
||
"height": 300,
|
||
"chartType": "bar",
|
||
"data": {
|
||
"labels": ["Q1", "Q2", "Q3"],
|
||
"legends": ["Sales", "Costs"],
|
||
"series": [
|
||
[100, 120, 140],
|
||
[80, 90, 100]
|
||
]
|
||
},
|
||
"themeColors": ["#5b9bd5", "#ed7d31"]
|
||
}
|
||
\`\`\`
|
||
|
||
**Required Fields**: \`id\`, \`type\`, \`left\`, \`top\`, \`width\`, \`height\`, \`chartType\`, \`data\`, \`themeColors\`
|
||
|
||
**Chart Types**: "bar" (vertical), "column" (horizontal), "line", "pie", "ring", "area", "radar", "scatter"
|
||
|
||
**Data Structure**:
|
||
|
||
- \`labels\`: X-axis labels
|
||
- \`legends\`: Series names
|
||
- \`series\`: 2D array, one row per legend
|
||
|
||
**Optional Fields**: \`rotate\`, \`options\` (\`lineSmooth\`, \`stack\`), \`fill\`, \`outline\`, \`textColor\`
|
||
|
||
---
|
||
|
||
### LatexElement
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "latex_001",
|
||
"type": "latex",
|
||
"left": 100,
|
||
"top": 200,
|
||
"width": 300,
|
||
"height": 120,
|
||
"latex": "E = mc^2",
|
||
"color": "#000000",
|
||
"align": "center"
|
||
}
|
||
\`\`\`
|
||
|
||
**Required Fields**: \`id\`, \`type\`, \`left\`, \`top\`, \`width\`, \`height\`, \`latex\`, \`color\`
|
||
|
||
**Optional Fields**: \`align\` — horizontal alignment of the formula within its box: \`"left"\`, \`"center"\` (default), or \`"right"\`. Use \`"left"\` for equation derivations or aligned steps, \`"center"\` for standalone formulas.
|
||
|
||
**DO NOT generate** these fields (the system fills them automatically):
|
||
|
||
- \`path\` — SVG path auto-generated from latex
|
||
- \`viewBox\` — auto-computed bounding box
|
||
- \`strokeWidth\` — defaults to 2
|
||
- \`fixedRatio\` — defaults to true
|
||
|
||
**CRITICAL — Width & Height auto-scaling**:
|
||
The system renders the formula and computes its natural aspect ratio. Then it applies the following logic:
|
||
|
||
1. Start with your \`height\`, compute \`width = height × aspectRatio\`.
|
||
2. If the computed \`width\` exceeds your specified \`width\`, the system **shrinks both width and height** proportionally to fit within your \`width\` while preserving the aspect ratio.
|
||
|
||
This means: **\`width\` is the maximum horizontal bound** and **\`height\` is the preferred vertical size**. The final rendered size will never exceed either dimension. For long formulas, specify a reasonable \`width\` to prevent overflow — the system will auto-shrink \`height\` to fit.
|
||
|
||
**Height guide by formula category:**
|
||
|
||
| Category | Examples | Recommended height |
|
||
| --------------------------- | -------------------------------------------- | ------------------ |
|
||
| Inline equations | \`E=mc^2\`, \`a+b=c\`, \`y=ax^2+bx+c\` | 50-80 |
|
||
| Equations with fractions | \`\\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}\` | 60-100 |
|
||
| Integrals / limits | \`\\int_0^1 f(x)dx\`, \`\\lim_{x \\to 0}\` | 60-100 |
|
||
| Summations with limits | \`\\sum_{i=1}^{n} i^2\` | 80-120 |
|
||
| Matrices | \`\\begin{pmatrix}a & b \\\\ c & d\\end{pmatrix}\` | 100-180 |
|
||
| Simple standalone fractions | \`\\frac{a}{b}\`, \`\\frac{1}{2}\` | 50-80 |
|
||
| Nested fractions | \`\\frac{\\frac{a}{b}}{\\frac{c}{d}}\` | 80-120 |
|
||
|
||
**Key rules:**
|
||
|
||
- \`height\` controls the preferred vertical size. \`width\` acts as a horizontal cap.
|
||
- The system preserves aspect ratio — if the formula is too wide for \`width\`, both dimensions shrink proportionally.
|
||
- When placing elements below a LaTeX element, add \`height + 20~40px\` gap to get the next element's \`top\`.
|
||
- For long formulas (e.g. expanded polynomials, long equations), set \`width\` to the available horizontal space to prevent overflow.
|
||
|
||
**Line-breaking long formulas:**
|
||
When a formula is long (e.g. expanded polynomials, long sums, piecewise functions) and the available horizontal space is narrow, use \`\\\\\` (double backslash) directly inside the LaTeX string to break it into multiple lines. Do NOT wrap with \`\\begin{...}\\end{...}\` environments — just use \`\\\\\` on its own. For example: \`a + b + c + d \\\\ + e + f + g\`. This prevents the formula from being shrunk to an unreadably small size. Break at natural operator boundaries (\`+\`, \`-\`, \`=\`, \`,\`) for best readability.
|
||
|
||
**Multi-step equation derivations:**
|
||
When splitting a derivation across multiple LaTeX elements (one per line), simply give each step the **same height** (e.g., 70-80px). The system auto-computes width proportionally — longer formulas become wider, shorter ones narrower — and all steps render at the same vertical size. No manual width estimation needed.
|
||
|
||
**LaTeX Syntax Tips**:
|
||
|
||
- Fractions: \`\\frac{a}{b}\`
|
||
- Superscript / subscript: \`x^2\`, \`a_n\`
|
||
- Square root: \`\\sqrt{x}\`, \`\\sqrt[3]{x}\`
|
||
- Greek letters: \`\\alpha\`, \`\\beta\`, \`\\pi\`, \`\\sum\`
|
||
- Integrals: \`\\int_0^1 f(x) dx\`
|
||
- Common formulas: \`a^2 + b^2 = c^2\`, \`E = mc^2\`
|
||
|
||
**LaTeX Support**: This project uses KaTeX for formula rendering, which supports virtually all standard LaTeX math commands including arrows, logic symbols, ellipsis, accents, delimiters, and AMS math extensions. You may use any standard LaTeX math command freely.
|
||
|
||
- \`\\text{}\` can render English text. For Chinese labels, use a separate TextElement.
|
||
|
||
**When to Use**: Use LatexElement for **all** mathematical formulas, equations, and scientific notation — including simple ones like \`x^2\` or \`a/b\`. TextElement cannot render LaTeX; any LaTeX syntax placed in a TextElement will display as raw text (e.g., "\\frac{1}{2}" appears literally). For plain text that happens to contain numbers (e.g., "Chapter 3", "Score: 95"), use TextElement.
|
||
|
||
---
|
||
|
||
### TableElement
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "table_001",
|
||
"type": "table",
|
||
"left": 100,
|
||
"top": 150,
|
||
"width": 600,
|
||
"height": 180,
|
||
"colWidths": [0.25, 0.25, 0.25, 0.25],
|
||
"data": [[{ "id": "c1", "colspan": 1, "rowspan": 1, "text": "Header" }]],
|
||
"outline": { "width": 2, "style": "solid", "color": "#eeece1" }
|
||
}
|
||
\`\`\`
|
||
|
||
**Required Fields**: \`id\`, \`type\`, \`left\`, \`top\`, \`width\`, \`height\`, \`colWidths\` (ratios summing to 1), \`data\` (2D array of cells), \`outline\`
|
||
|
||
**Cell Structure**: \`id\`, \`colspan\`, \`rowspan\`, \`text\`, optional \`style\` (\`bold\`, \`color\`, \`backcolor\`, \`fontsize\`, \`align\`)
|
||
|
||
**IMPORTANT**: Cell \`text\` is **plain text only** — LaTeX syntax (e.g. \`\\frac{}{}\`, \`\\sum\`) is NOT supported and will render as raw text. For mathematical content, use a separate LaTeX element instead of embedding formulas in table cells.
|
||
|
||
**Optional Fields**: \`rotate\`, \`cellMinHeight\`, \`theme\` (\`color\`, \`rowHeader\`, \`colHeader\`)
|
||
|
||
---
|
||
|
||
## Text Height Lookup Table
|
||
|
||
**All TextElement heights must come from this table.** (line-height=1.5, includes 10px padding on each side)
|
||
|
||
| Font Size | 1 line | 2 lines | 3 lines | 4 lines | 5 lines |
|
||
| --------- | ------ | ------- | ------- | ------- | ------- |
|
||
| 14px | 43 | 64 | 85 | 106 | 127 |
|
||
| 16px | 46 | 70 | 94 | 118 | 142 |
|
||
| 18px | 49 | 76 | 103 | 130 | 157 |
|
||
| 20px | 52 | 82 | 112 | 142 | 172 |
|
||
| 24px | 58 | 94 | 130 | 166 | 202 |
|
||
| 28px | 64 | 106 | 148 | 190 | 232 |
|
||
| 32px | 70 | 118 | 166 | 214 | 262 |
|
||
| 36px | 76 | 130 | 184 | 238 | 292 |
|
||
|
||
---
|
||
|
||
## Design Rules
|
||
|
||
### Rule 1: Text Width Calculation
|
||
|
||
Before finalizing any text element, verify it fits in one line (unless multi-line is intended):
|
||
|
||
\`\`\`
|
||
characters_per_line = (width - 20) / font_size
|
||
\`\`\`
|
||
|
||
If character count > characters_per_line, the text will wrap. Adjust by:
|
||
|
||
- Increasing width
|
||
- Reducing font size
|
||
- Shortening content
|
||
|
||
**Safe utilization**: Keep character count ≤ 75% of characters_per_line.
|
||
|
||
---
|
||
|
||
### Rule 2: Text Height Calculation
|
||
|
||
1. Count the number of \`<p>\` tags (paragraphs)
|
||
2. For each paragraph, calculate lines needed: \`ceil(char_count / characters_per_line)\`
|
||
3. Add safety margin: \`total_lines = sum_of_lines + 0.8\` (round up)
|
||
4. Look up height in the table using the **largest font size** in the content
|
||
|
||
---
|
||
|
||
### Rule 3: Element Alignment
|
||
|
||
When aligning elements (text inside background, icon with label):
|
||
|
||
**Vertical centering**:
|
||
|
||
\`\`\`
|
||
inner.top = outer.top + (outer.height - inner.height) / 2
|
||
\`\`\`
|
||
|
||
**Horizontal centering**:
|
||
|
||
\`\`\`
|
||
inner.left = outer.left + (outer.width - inner.width) / 2
|
||
\`\`\`
|
||
|
||
**Verification**: Calculate center points of both elements. Difference should be < 2px.
|
||
|
||
---
|
||
|
||
### Rule 4: Symmetry and Parallel Layout
|
||
|
||
When designing symmetric or parallel elements, use **exact same values** for corresponding properties.
|
||
|
||
**Left-right symmetry** (two-column layout):
|
||
|
||
\`\`\`
|
||
Left element: left = 60, width = 430
|
||
Right element: left = 510, width = 430 ✓ (symmetric, gap = 20px)
|
||
\`\`\`
|
||
|
||
**Top alignment** (side-by-side elements):
|
||
|
||
\`\`\`
|
||
Element A: top = 150, height = 180
|
||
Element B: top = 150, height = 180 ✓ (aligned)
|
||
\`\`\`
|
||
|
||
**Equal spacing** (three or more parallel elements):
|
||
|
||
\`\`\`
|
||
Element 1: left = 60, width = 280
|
||
Element 2: left = 360, width = 280 (gap = 20px)
|
||
Element 3: left = 660, width = 280 (gap = 20px) ✓ (consistent)
|
||
\`\`\`
|
||
|
||
**Key principle**: Human eyes detect differences as small as 5px. Use identical values—never approximate.
|
||
|
||
---
|
||
|
||
### Rule 5: Text with Background Shape
|
||
|
||
When placing text on a background shape, follow this process:
|
||
|
||
#### Step 1: Design the background shape first
|
||
|
||
Decide the shape's position and size based on your layout needs:
|
||
|
||
\`\`\`
|
||
shape.left = 60
|
||
shape.top = 150
|
||
shape.width = 400
|
||
shape.height = 120
|
||
\`\`\`
|
||
|
||
#### Step 2: Calculate text dimensions
|
||
|
||
The text must fit inside the shape with padding. Use **20px padding** on all sides:
|
||
|
||
\`\`\`
|
||
text.width = shape.width - 40 (20px padding left + 20px padding right)
|
||
text.height = from lookup table, must be ≤ shape.height - 40
|
||
\`\`\`
|
||
|
||
#### Step 3: Center the text inside the shape
|
||
|
||
**Both horizontally AND vertically:**
|
||
|
||
\`\`\`
|
||
text.left = shape.left + (shape.width - text.width) / 2
|
||
text.top = shape.top + (shape.height - text.height) / 2
|
||
\`\`\`
|
||
|
||
#### Complete Example: Card with centered text
|
||
|
||
Background shape:
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "card_bg",
|
||
"type": "shape",
|
||
"left": 60,
|
||
"top": 150,
|
||
"width": 400,
|
||
"height": 120,
|
||
"path": "M 0 0 L 1 0 L 1 1 L 0 1 Z",
|
||
"viewBox": [1, 1],
|
||
"fill": "#e8f4fd",
|
||
"fixedRatio": false
|
||
}
|
||
\`\`\`
|
||
|
||
Text element (centered inside):
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "card_text",
|
||
"type": "text",
|
||
"left": 80,
|
||
"top": 172,
|
||
"width": 360,
|
||
"height": 76,
|
||
"content": "<p style=\\"font-size: 18px; text-align: center;\\">Key concept explanation text</p>",
|
||
"defaultFontName": "",
|
||
"defaultColor": "#333333"
|
||
}
|
||
\`\`\`
|
||
|
||
Calculation verification:
|
||
|
||
\`\`\`
|
||
shape: left=60, top=150, width=400, height=120
|
||
text: left=80, top=172, width=360, height=76
|
||
|
||
Horizontal centering:
|
||
text.left = 60 + (400 - 360) / 2 = 60 + 20 = 80 ✓
|
||
|
||
Vertical centering:
|
||
text.top = 150 + (120 - 76) / 2 = 150 + 22 = 172 ✓
|
||
|
||
Containment check:
|
||
text fits within shape with 20px padding on all sides ✓
|
||
\`\`\`
|
||
|
||
#### Common Mistakes to Avoid
|
||
|
||
**Wrong: Same left/top values (text in top-left corner)**
|
||
|
||
\`\`\`
|
||
shape: left=60, top=150, width=400, height=120
|
||
text: left=60, top=150, width=360, height=76 ✗ NOT CENTERED
|
||
\`\`\`
|
||
|
||
**Wrong: Text larger than shape**
|
||
|
||
\`\`\`
|
||
shape: left=60, top=150, width=400, height=120
|
||
text: left=60, top=150, width=420, height=130 ✗ OVERFLOWS
|
||
\`\`\`
|
||
|
||
**Correct: Properly centered**
|
||
|
||
\`\`\`
|
||
shape: left=60, top=150, width=400, height=120
|
||
text: left=80, top=172, width=360, height=76 ✓ CENTERED
|
||
\`\`\`
|
||
|
||
#### Complete Example: Three-Column Card Layout
|
||
|
||
Three cards side by side, each with centered text:
|
||
|
||
\`\`\`json
|
||
[
|
||
{
|
||
"id": "card1_bg",
|
||
"type": "shape",
|
||
"left": 60,
|
||
"top": 200,
|
||
"width": 280,
|
||
"height": 140,
|
||
"path": "M 0 0 L 1 0 L 1 1 L 0 1 Z",
|
||
"viewBox": [1, 1],
|
||
"fill": "#dbeafe",
|
||
"fixedRatio": false
|
||
},
|
||
{
|
||
"id": "card2_bg",
|
||
"type": "shape",
|
||
"left": 360,
|
||
"top": 200,
|
||
"width": 280,
|
||
"height": 140,
|
||
"path": "M 0 0 L 1 0 L 1 1 L 0 1 Z",
|
||
"viewBox": [1, 1],
|
||
"fill": "#dcfce7",
|
||
"fixedRatio": false
|
||
},
|
||
{
|
||
"id": "card3_bg",
|
||
"type": "shape",
|
||
"left": 660,
|
||
"top": 200,
|
||
"width": 280,
|
||
"height": 140,
|
||
"path": "M 0 0 L 1 0 L 1 1 L 0 1 Z",
|
||
"viewBox": [1, 1],
|
||
"fill": "#fef3c7",
|
||
"fixedRatio": false
|
||
},
|
||
{
|
||
"id": "card1_text",
|
||
"type": "text",
|
||
"left": 80,
|
||
"top": 232,
|
||
"width": 240,
|
||
"height": 76,
|
||
"content": "<p style=\\"font-size: 18px; text-align: center;\\">Point One</p>",
|
||
"defaultFontName": "",
|
||
"defaultColor": "#1e40af"
|
||
},
|
||
{
|
||
"id": "card2_text",
|
||
"type": "text",
|
||
"left": 380,
|
||
"top": 232,
|
||
"width": 240,
|
||
"height": 76,
|
||
"content": "<p style=\\"font-size: 18px; text-align: center;\\">Point Two</p>",
|
||
"defaultFontName": "",
|
||
"defaultColor": "#166534"
|
||
},
|
||
{
|
||
"id": "card3_text",
|
||
"type": "text",
|
||
"left": 680,
|
||
"top": 232,
|
||
"width": 240,
|
||
"height": 76,
|
||
"content": "<p style=\\"font-size: 18px; text-align: center;\\">Point Three</p>",
|
||
"defaultFontName": "",
|
||
"defaultColor": "#92400e"
|
||
}
|
||
]
|
||
\`\`\`
|
||
|
||
Calculation for card1:
|
||
|
||
\`\`\`
|
||
shape: left=60, width=280, height=140
|
||
text: width=240, height=76
|
||
|
||
text.left = 60 + (280 - 240) / 2 = 60 + 20 = 80 ✓
|
||
text.top = 200 + (140 - 76) / 2 = 200 + 32 = 232 ✓
|
||
\`\`\`
|
||
|
||
---
|
||
|
||
### Rule 6: Decorative Lines
|
||
|
||
#### Title Underline (emphasis)
|
||
|
||
Position formula:
|
||
|
||
\`\`\`
|
||
line.left = text.left + 10
|
||
line.width = text.width - 20
|
||
line.top = text.top + text.height + 8 to 12px
|
||
line.height = 2 to 4px
|
||
\`\`\`
|
||
|
||
Example:
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "title_text",
|
||
"type": "text",
|
||
"left": 60,
|
||
"top": 80,
|
||
"width": 880,
|
||
"height": 76,
|
||
"content": "<p style=\\"font-size: 28px;\\">Chapter Title</p>",
|
||
"defaultFontName": "",
|
||
"defaultColor": "#333333"
|
||
}
|
||
\`\`\`
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "title_underline",
|
||
"type": "shape",
|
||
"left": 70,
|
||
"top": 166,
|
||
"width": 860,
|
||
"height": 3,
|
||
"path": "M 0 0 L 1 0 L 1 1 L 0 1 Z",
|
||
"viewBox": [1, 1],
|
||
"fill": "#5b9bd5",
|
||
"fixedRatio": false
|
||
}
|
||
\`\`\`
|
||
|
||
#### Section Divider (separation)
|
||
|
||
Position formula:
|
||
|
||
\`\`\`
|
||
Vertical gap: 25-35px from content above and below
|
||
Horizontal: centered on canvas or left-aligned (left = 60 or 80)
|
||
line.width = 700-900px (70-90% of canvas width)
|
||
line.height = 1 to 2px
|
||
\`\`\`
|
||
|
||
Example:
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "section_divider",
|
||
"type": "shape",
|
||
"left": 100,
|
||
"top": 285,
|
||
"width": 800,
|
||
"height": 1,
|
||
"path": "M 0 0 L 1 0 L 1 1 L 0 1 Z",
|
||
"viewBox": [1, 1],
|
||
"fill": "#cccccc",
|
||
"fixedRatio": false
|
||
}
|
||
\`\`\`
|
||
|
||
#### Highlight Marker (vertical bar beside text)
|
||
|
||
Position formula:
|
||
|
||
\`\`\`
|
||
line.left = text.left - 15
|
||
line.top = text.top + text.height * 0.1
|
||
line.height = text.height * 0.8
|
||
line.width = 3 to 6px
|
||
\`\`\`
|
||
|
||
Example:
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "highlight_text",
|
||
"type": "text",
|
||
"left": 100,
|
||
"top": 200,
|
||
"width": 800,
|
||
"height": 103,
|
||
"content": "<p style=\\"font-size: 18px;\\">Important point that needs emphasis...</p>",
|
||
"defaultFontName": "",
|
||
"defaultColor": "#333333"
|
||
}
|
||
\`\`\`
|
||
|
||
\`\`\`json
|
||
{
|
||
"id": "highlight_marker",
|
||
"type": "shape",
|
||
"left": 85,
|
||
"top": 210,
|
||
"width": 4,
|
||
"height": 82,
|
||
"path": "M 0 0 L 1 0 L 1 1 L 0 1 Z",
|
||
"viewBox": [1, 1],
|
||
"fill": "#ed7d31",
|
||
"fixedRatio": false
|
||
}
|
||
\`\`\`
|
||
|
||
---
|
||
|
||
### Rule 7: Spacing Standards
|
||
|
||
**Vertical spacing**:
|
||
|
||
- Title to subtitle: 30-40px
|
||
- Title to body: 35-50px
|
||
- Between paragraphs: 20-30px
|
||
- Text to image: 25-35px
|
||
|
||
**Horizontal spacing**:
|
||
|
||
- Multi-column gap: 40-60px
|
||
- Text to image: 30-40px
|
||
- Element to canvas edge: ≥ 50px
|
||
|
||
---
|
||
|
||
### Rule 8: Font Size Guidelines
|
||
|
||
| Content Type | Recommended Size |
|
||
| ------------ | ---------------- |
|
||
| Main title | 32-36px |
|
||
| Subtitle | 24-28px |
|
||
| Key points | 18-20px |
|
||
| Body text | 16-18px |
|
||
| Captions | 14-16px |
|
||
|
||
Maintain consistent sizing for same-level content. Ensure 2-4px difference between hierarchy levels.
|
||
|
||
---
|
||
|
||
## Pre-Output Checklist
|
||
|
||
Before outputting JSON, verify:
|
||
|
||
**🔴 P0 — Critical (must pass 100%)**:
|
||
|
||
- ✓ [text-height] All text heights are from the lookup table (NOT estimated values like 70, 80, 90)
|
||
- ✓ [text-width] All text elements pass width calculation: \`char_count ≤ (width - 20) / font_size\`
|
||
- ✓ [alignment] Aligned elements have matching center points (< 2px difference)
|
||
- ✓ [margins] All elements are within canvas margins (50px from each edge)
|
||
|
||
|
||
|
||
- ✓ [latex-fields] LatexElement does NOT include \`path\`, \`viewBox\`, \`strokeWidth\`, or \`fixedRatio\` (system auto-generates these)
|
||
- ✓ [latex-width] LatexElement width is appropriate for the formula category (standalone fractions: 30-80, NOT 200+; inline equations: 200-400). Check the LaTeX width guide table above.
|
||
- ✓ [latex-scaling] Multi-step derivation LaTeX elements: widths are proportional to content length (longer formulas MUST have larger width). Do NOT use the same width for all steps — this causes wildly different rendered heights.
|
||
- ✓ [no-latex-in-text] No LaTeX syntax in TextElement content: scan all text \`content\` fields for \`\\frac\`, \`\\lim\`, \`\\int\`, \`\\sum\`, \`\\sqrt\`, \`\\alpha\`, \`^{\`, \`_{\` etc. Any math expression must be a separate LatexElement.
|
||
- ✓ [line-stroke] LineElement \`width\` is stroke thickness (2-6), NOT line length. Check: no LineElement has \`width\` > 6. If width equals the distance between start and end, it is WRONG — you confused stroke thickness with line span.
|
||
- ✓ [concise-text] **Slide text is concise and impersonal**: Every text element uses keywords, short phrases, or bullet points — no conversational sentences, no lecture-script-style paragraphs. No teacher name or identity appears on any slide (no "Teacher X's tips/wishes/comments"). If a text reads like spoken language or a personal message, rewrite it as a neutral bullet point.
|
||
|
||
**🟡 P1 — Serious (strongly recommended)**:
|
||
|
||
- ✓ [text-bg-pair] **Text-Background pairs**: For each text with a background shape:
|
||
|
||
- text.width < shape.width (with padding)
|
||
- text.height < shape.height (with padding)
|
||
- text is centered: \`text.left = shape.left + (shape.width - text.width) / 2\`
|
||
- text is centered: \`text.top = shape.top + (shape.height - text.height) / 2\`
|
||
|
||
- ✓ [no-overlap] No unintended element overlaps (especially check LaTeX elements — their rendered height may be much larger than specified)
|
||
- ✓ [image-proximity] Image placed near related text (25-35px gap)
|
||
|
||
---
|
||
|
||
## Output Format
|
||
|
||
Output valid JSON only. No explanations, no code blocks, no additional text.",
|
||
"user": "# Generation Requirements
|
||
|
||
## Scene Information
|
||
|
||
- **Title**: Dependency Injection
|
||
- **Description**: Explain dependency injection with one concrete example.
|
||
- **Key Points**:
|
||
1. Caller owns dependencies
|
||
2. Pure generation seam
|
||
|
||
|
||
|
||
## Available Resources
|
||
|
||
|
||
- **Canvas Size**: 1000 × 562.5 px
|
||
|
||
## Output Requirements
|
||
|
||
Based on the scene information above, generate a complete Canvas/PPT component for one page.
|
||
|
||
## Language Directive
|
||
Teach in English.
|
||
|
||
**Must Follow**:
|
||
|
||
1. Output pure JSON directly, without any explanation or description
|
||
2. Do not wrap with \`\`\`json code blocks
|
||
3. Do not add any text before or after the JSON
|
||
4. Ensure the JSON format is correct and can be parsed directly
|
||
|
||
|
||
5. All TextElement \`height\` values must be selected from the quick reference table in the system prompt
|
||
|
||
**Output Structure Example**:
|
||
{"background":{"type":"solid","color":"#ffffff"},"elements":[{"id":"title_001","type":"text","left":60,"top":50,"width":880,"height":76,"content":"<p style=\\"font-size:32px;\\"><strong>Title Content</strong></p>","defaultFontName":"","defaultColor":"#333333"},{"id":"content_001","type":"text","left":60,"top":150,"width":880,"height":130,"content":"<p style=\\"font-size:18px;\\">• Point One</p><p style=\\"font-size:18px;\\">• Point Two</p><p style=\\"font-size:18px;\\">• Point Three</p>","defaultFontName":"","defaultColor":"#333333"}]}",
|
||
},
|
||
}
|
||
`;
|