Skip to content

Visual Description Completeness Checklist

Run the Visual Description Checklist Fullscreen Edit Using the p5.js Editor

Description

This interactive MicroSim provides a comprehensive checklist that instructional designers can use to verify their visual descriptions are complete before submitting them to AI systems for MicroSim generation. Complete visual descriptions lead to better first-attempt results from AI code generation.

Features

  • Five Category Organization: Checklist items organized into Canvas/Container, Visual Elements, Text Elements, Dynamic Elements, and Layout Relationships
  • Expandable Sections: Click category headers to expand or collapse sections
  • Progress Tracking: Real-time progress bar shows completion percentage
  • Hover Tooltips: Hover over any checklist item to see example specifications
  • Export Function: Export your checklist status as formatted text for documentation
  • Persistent Checkmarks: Checkboxes toggle on click with visual confirmation

Checklist Categories

  1. Canvas/Container - Fundamental dimensions and appearance of the visualization area
  2. Visual Elements - Shapes, objects, and graphical components with their properties
  3. Text Elements - Labels, titles, and text content specifications
  4. Dynamic Elements - Animations, state changes, and interactive behaviors
  5. Layout Relationships - Spacing, alignment, and responsive design rules

How to Use

  1. Before writing a visual description for a MicroSim, expand all categories
  2. As you write your description, check off each item you've addressed
  3. Hover over items to see example specifications if you need guidance
  4. Use the progress bar to track completeness
  5. Export your checklist to include in documentation or prompts

Lesson Plan

Objective

Students will understand the components of a complete visual description and be able to create specifications that enable effective AI-assisted MicroSim generation.

Activities

  1. Exploration (5 minutes): Have students explore the checklist, expanding each category and hovering over items to read the example specifications.

  2. Analysis (10 minutes): Provide students with an incomplete visual description and have them use the checklist to identify what's missing. Discussion questions:

  3. Which category has the most missing elements?
  4. Why might certain specifications be overlooked?

  5. How would missing elements affect AI generation?

  6. Application (20 minutes): Students select a simple visualization concept and write a complete visual description, checking off items as they go. Target: 100% completion.

  7. Peer Review (10 minutes): Partners exchange descriptions and use the checklist to verify completeness, providing feedback on unclear specifications.

Assessment

  • Students submit visual descriptions with exported checklist showing 100% completion
  • Descriptions are evaluated for clarity and specificity of each specification
  • Bonus: Descriptions are tested with AI generation to assess real-world effectiveness

References