Glossary of Terms
This glossary provides definitions for key concepts used in the "Creating Educational MicroSims with Generative AI" course. Definitions follow ISO 11179 standards: precise, concise, distinct, and non-circular.
Total Terms: 242
100-Point Rubric
A standardized evaluation framework that assigns numerical scores across multiple quality criteria to assess MicroSim completeness, functionality, and educational effectiveness.
Example: A MicroSim scores 85/100 with points for responsive design (20), accessibility (15), and documentation (20).
3D Visualization
A rendering technique that displays objects with depth, perspective, and lighting to simulate three-dimensional space on a two-dimensional screen.
Example: A molecule viewer uses WebGL to show chemical bonds from any angle.
Accessible Design
A design approach that ensures digital products are usable by people with diverse abilities, including visual, auditory, motor, and cognitive differences.
Example: Adding keyboard navigation and screen reader support to a MicroSim.
Adaptive Learning
An educational method that uses algorithms to customize learning content and pace based on individual learner performance and needs.
Example: A system that presents easier problems after incorrect answers and harder ones after correct answers.
AI Code Generation
The process of using artificial intelligence to automatically produce programming code from natural language descriptions or specifications.
Example: Asking Claude to write a p5.js sketch for a bouncing ball simulation.
AI Driven
A characteristic of systems that use artificial intelligence algorithms to generate, modify, or enhance functionality without explicit programming for each scenario.
Example: MicroSims created through conversational prompts to large language models.
AI Hallucinations
False or fabricated information generated by AI models that appears plausible but is factually incorrect or nonsensical.
Example: An AI generating code that references non-existent p5.js functions.
AI Limitations
Constraints and weaknesses inherent in artificial intelligence systems that affect their reliability, accuracy, or applicability.
Example: LLMs cannot visually verify that UI elements do not overlap on a canvas.
AI Prompting
The practice of crafting input text to guide AI systems toward producing desired outputs.
Example: Writing "Create a slider that controls animation speed from 1 to 60 frames per second."
Analyze Level
The fourth level of Bloom's Taxonomy where learners examine relationships, differentiate components, and connect concepts to understand structure.
Example: Comparing two sorting algorithms to determine which is more efficient.
Animation Control
The mechanism that allows users to start, stop, pause, or adjust the playback of animated sequences in a simulation.
Example: A play/pause button that toggles the isRunning state variable.
Animation Loop
A continuously executing cycle that updates and redraws visual elements to create the appearance of motion.
Example: The p5.js draw() function that executes 60 times per second by default.
Apply Level
The third level of Bloom's Taxonomy where learners use acquired knowledge to solve problems in new situations.
Example: Using physics equations to predict projectile trajectories in a simulation.
Attribution License
A legal permission that allows reuse of creative works provided the original creator is credited appropriately.
Example: CC BY requires citing the original author when sharing or modifying MicroSims.
background()
A p5.js function that sets the color of the entire canvas, typically called at the beginning of each draw cycle to clear previous frames.
Example: background('aliceblue') fills the canvas with a light blue color.
Bar Chart
A visualization that uses rectangular bars of varying lengths to represent and compare categorical data values.
Example: A Chart.js bar chart showing test scores by subject area.
Bar Charts
Plural form referring to multiple bar chart visualizations or various bar chart types including horizontal, stacked, and grouped variants.
Bloom's Taxonomy
A hierarchical framework classifying educational learning objectives into six cognitive levels from basic recall to creative synthesis.
Example: A course aligns assessments to Remember, Understand, Apply, Analyze, Evaluate, and Create levels.
Bubble Chart
A scatter plot variant where a third data dimension is represented by the size of circular markers.
Example: A chart showing countries with GDP on x-axis, life expectancy on y-axis, and population as bubble size.
Button Control
An interactive user interface element that triggers an action when clicked or pressed.
Example: A "Reset" button that returns simulation parameters to default values.
Canvas Element
The HTML5 drawing surface where p5.js renders graphics, animations, and interactive content.
Example: A 400×450 pixel canvas divided into drawing and control regions.
Canvas Height
The vertical dimension of the drawing area measured in pixels, typically calculated as drawHeight plus controlHeight.
Example: let canvasHeight = drawHeight + controlHeight; results in 450 pixels.
Canvas Width
The horizontal dimension of the drawing area measured in pixels, often dynamically adjusted for responsive design.
Example: let canvasWidth = 400; sets an initial width that may change with window resizing.
Capstone Project
A culminating educational project that integrates skills learned throughout a course into a comprehensive final work.
Example: Creating an original MicroSim with full documentation and metadata for a teaching portfolio.
Causal Loop Diagrams
Visual representations showing feedback relationships between variables where changes in one element influence others in circular patterns.
Example: A diagram showing how student engagement affects learning outcomes, which affects motivation, which affects engagement.
CC BY-NC-SA
Creative Commons Attribution-NonCommercial-ShareAlike license requiring attribution, prohibiting commercial use, and requiring derivative works use the same license.
Example: MicroSims shared under CC BY-NC-SA can be modified for education but not sold commercially.
Chart Types
Categories of data visualizations distinguished by their structure and purpose, such as bar, line, pie, scatter, and bubble charts.
Example: Selecting a line chart for time-series data and a pie chart for proportional data.
Chart.js Library
A JavaScript library for creating responsive, animated charts and graphs using the HTML5 canvas element.
Example: Using Chart.js to create an interactive line graph of temperature over time.
ChartJS
An alternative name for Chart.js, the JavaScript charting library.
See also: Chart.js Library
ChatGPT
An AI language model developed by OpenAI capable of generating code, explanations, and conversational responses from text prompts.
Example: Using ChatGPT to generate initial p5.js code for a physics simulation.
Circuit Simulation
A specialized MicroSim type that models electrical circuits, showing current flow, voltage, and component behavior.
Example: A simulation demonstrating Ohm's Law with adjustable resistance and voltage.
Claude
An AI assistant developed by Anthropic designed for helpful, harmless, and honest interactions including code generation.
Example: Using Claude to debug and refine MicroSim code iteratively.
Claude Code
A command-line interface tool that enables Claude AI to assist with software development tasks directly in a terminal environment.
Example: Running claude to get AI assistance while developing MicroSims.
Code Debugging with AI
The process of using AI tools to identify, explain, and fix errors in programming code.
Example: Pasting error messages into Claude to get explanations and corrections.
Cognitive Levels
The hierarchical stages of mental processing complexity in learning, from simple recall to complex creation.
Example: Bloom's six levels: Remember, Understand, Apply, Analyze, Evaluate, Create.
Cognitive Load Theory
An educational framework describing how mental processing capacity limits affect learning, distinguishing intrinsic, extraneous, and germane load.
Example: Removing decorative borders from MicroSims to reduce extraneous cognitive load.
Collaboration Workflow
A structured process for multiple people to work together on shared projects using version control, review, and communication tools.
Example: Team members use GitHub branches, pull requests, and code reviews to develop MicroSims.
Color Contrast
The difference in luminance between foreground and background colors that affects readability and accessibility.
Example: Black text on white background has high contrast; gray on light gray has poor contrast.
Color Theory
Principles governing how colors interact, combine, and affect perception, used to create effective visual designs.
Example: Using complementary colors for emphasis and analogous colors for harmony in MicroSims.
Concept Dependencies
Relationships indicating which concepts must be understood before learning new ones in a knowledge domain.
Example: Understanding "Variables" before "Functions" in a programming learning graph.
Container Width
The horizontal dimension of the HTML element that contains an embedded MicroSim, used for responsive sizing.
Example: containerWidth = document.querySelector('main').offsetWidth;
Context Window
The maximum amount of text an AI model can process in a single interaction, measured in tokens.
Example: Claude's context window allows processing thousands of lines of code simultaneously.
Control Flow
Programming constructs that determine the order in which code statements execute based on conditions and logic.
Example: If-else statements, switch cases, and conditional expressions.
Control Height
The vertical dimension of the interface area reserved for interactive elements like sliders and buttons.
Example: let controlHeight = 50; allocates 50 pixels for controls at the canvas bottom.
Control Region
The designated portion of a MicroSim interface where interactive controls are placed, separate from the visualization area.
Example: A white rectangular area below the simulation containing sliders and buttons.
Coordinate System
A numerical framework for specifying positions on the canvas using x (horizontal) and y (vertical) values.
Example: In p5.js, (0,0) is the top-left corner with y increasing downward.
Coordinate Translation
The process of shifting the origin point of a coordinate system to simplify positioning of grouped elements.
Example: Using translate(100, 200) to draw a group of shapes relative to a new origin.
Copyright Icon
A clickable visual indicator displaying licensing information that links to the full copyright notice.
Example: A small CC icon in the corner linking to the Creative Commons license page.
Create Level
The highest level of Bloom's Taxonomy where learners synthesize knowledge to produce original work.
Example: Designing a novel MicroSim to teach a concept not covered in existing materials.
createButton()
A p5.js function that generates an HTML button element that can trigger callbacks when clicked.
Example: startButton = createButton('Start'); startButton.mousePressed(toggleAnimation);
createCanvas()
A p5.js function that initializes the drawing surface with specified width and height dimensions.
Example: createCanvas(400, 450); creates a 400×450 pixel canvas.
createSlider()
A p5.js function that generates an HTML range input element for adjusting numerical values.
Example: speedSlider = createSlider(1, 60, 30); creates a slider from 1 to 60 with default 30.
Creative Commons
A nonprofit organization providing standardized licenses for sharing creative works with specified permissions and restrictions.
Example: Releasing MicroSims under CC BY-NC-SA for educational reuse.
CSS Basics
Fundamental knowledge of Cascading Style Sheets for controlling the visual presentation of web content.
Example: Setting border: none; in CSS to remove iframe borders.
Data Type to Chart Types
The practice of selecting appropriate visualization types based on the characteristics of the underlying data.
Example: Using line charts for continuous time-series data and bar charts for categorical comparisons.
data.json File
A JSON file containing configurable data that can be easily modified by AI tools or users without changing code.
Example: A file containing quiz questions that an AI can update without editing JavaScript.
Debugging Techniques
Methods for identifying, isolating, and fixing errors in code, including logging, breakpoints, and systematic testing.
Example: Adding console.log() statements to track variable values during execution.
Declarative Layout
A programming approach where the desired end state is specified rather than step-by-step instructions to achieve it.
Example: Mermaid diagrams where you declare node relationships and the library handles positioning.
describe() Function
A p5.js accessibility function that provides text descriptions of canvas content for screen readers.
Example: describe('An animated bouncing ball demonstrating physics concepts', LABEL);
Description Metadata
Dublin Core field containing a textual summary of a resource's content and purpose.
Example: description: "Interactive simulation demonstrating projectile motion with adjustable angle and velocity"
Design Pattern
A reusable, documented solution to a commonly occurring problem within a specific context that provides a template for implementation while allowing adaptation to particular requirements.
Example in MicroSims: Separation of Drawing and Control Regions Pattern
MicroSims use a standard two-region canvas layout:
1 2 3 | |
The upper region (colored 'aliceblue') displays the simulation. The lower region (colored 'white') contains sliders and buttons. This pattern solves the problem of separating interactive controls from the visualization area, ensuring controls don't obscure the simulation and users always know where to find them.
This pattern appears consistently across MicroSims in most MicroSim examples, enabling:
- Predictable user experience
- Reliable AI generation (the pattern is learnable)
- Easier maintenance and modification
Developer Tools
Browser-integrated utilities for inspecting, debugging, and profiling web applications.
Example: Using Chrome DevTools to examine console errors and network requests.
Diversity of MicroSims
The range of different simulation types, subjects, and approaches in a collection or portfolio.
Example: A portfolio containing p5.js animations, Chart.js visualizations, and Leaflet maps.
Draw Height
The vertical dimension of the visualization area where the main simulation graphics are rendered.
Example: let drawHeight = 400; allocates 400 pixels for the animation area.
draw() Function
A p5.js function that executes continuously in a loop, typically 60 times per second, to update and render animations.
Example: Moving a ball position and redrawing it each frame to create animation.
Drawing Primitives
Basic geometric shapes provided by a graphics library for building complex visualizations.
Example: p5.js primitives include rect(), ellipse(), line(), triangle(), and arc().
Drawing Region
The area of a MicroSim canvas designated for displaying the simulation visualization, separate from controls.
Example: The top 400 pixels of a canvas showing an animated physics demonstration.
Dublin Core Metadata
An ISO standard set of vocabulary terms for describing digital resources including title, creator, subject, and description.
Example: Adding Dublin Core fields to index.md frontmatter for cataloging MicroSims.
Durations
Time spans or intervals represented in timeline visualizations, showing how long events or periods lasted.
Example: A timeline showing the duration of each historical era as colored bars.
Dynamic Scaling
The automatic adjustment of element sizes in response to changes in container dimensions or viewport size.
Example: Slider width that grows or shrinks as the browser window resizes.
Educational Equity
The principle of designing learning resources to be accessible regardless of socioeconomic status or device capabilities.
Example: Ensuring MicroSims work on older devices and slow internet connections.
Educational Simulation
An interactive digital experience designed to help learners understand concepts through exploration and experimentation.
Example: A simulation where students adjust gravity to observe effects on projectile motion.
Element Grouping
The technique of organizing related visual components together so they can be transformed as a unit.
Example: Using push(), translate(), and pop() to move a label and its value together.
ellipse()
A p5.js function that draws an oval or circle at specified coordinates with given width and height.
Example: ellipse(200, 200, 50, 50); draws a 50-pixel diameter circle at (200, 200).
Embedding
The process of including one digital resource within another, typically using iframes for MicroSims in web pages.
Example: Placing a MicroSim inside an MkDocs page using an iframe element.
Equation Graphing
The visual representation of mathematical functions by plotting calculated points on a coordinate plane.
Example: A MicroSim showing y = sin(x) with adjustable amplitude and frequency.
ER Diagram Example
An entity-relationship diagram demonstrating database schema design with tables and their connections.
Example: A vis-network visualization showing relationships between Students, Courses, and Enrollments.
Evaluate Level
The fifth level of Bloom's Taxonomy where learners make judgments based on criteria and standards.
Example: Critiquing a MicroSim against the 100-point quality rubric.
Event Handlers
Functions that execute in response to user actions like mouse clicks, key presses, or touch gestures.
Example: A mousePressed() function that toggles simulation state when the canvas is clicked.
Event Lists
Collections of discrete occurrences with timestamps used to populate timeline visualizations.
Example: A JSON array of historical events with dates and descriptions for a timeline MicroSim.
Extraneous Load
Cognitive burden imposed by poorly designed instruction that does not contribute to learning.
Example: Decorative animations that distract from the educational content of a MicroSim.
fill()
A p5.js function that sets the interior color for subsequently drawn shapes.
Example: fill('blue'); makes all following shapes filled with blue color.
Fixed Layout
A MicroSim design with static dimensions that do not change regardless of container or viewport size.
Example: A 400×450 canvas that maintains exact size on all devices.
Flash Card MicroSim
An interactive simulation presenting information in question-answer pairs for memorization and recall practice.
Example: A MicroSim showing vocabulary terms that flip to reveal definitions when clicked.
Flowchart
A diagram using standardized symbols and arrows to represent steps and decisions in a process.
Example: A Mermaid flowchart showing the logic for validating user input.
Flowcharts
Plural form referring to multiple flowchart diagrams or various flowchart types.
Forced Directed Layout
A graph visualization algorithm that simulates physical forces to position nodes, with connected nodes attracting and all nodes repelling.
Example: vis-network using physics simulation to automatically arrange a network diagram.
Formative Assessment
Ongoing evaluation during instruction that provides feedback to improve learning rather than assign grades.
Example: A MicroSim quiz that provides immediate feedback and hints after each answer.
Frame Rate
The frequency at which animation frames are rendered, measured in frames per second (fps).
Example: frameRate(60); sets the animation to update 60 times per second.
Fullscreen Icon
A clickable control that expands the MicroSim to fill the entire browser window or screen.
Example: A small expand icon in the corner that triggers fullscreen mode when clicked.
Functions
Named, reusable blocks of code that perform specific tasks and can accept parameters and return values.
Example: A drawBall(x, y, radius) function that encapsulates ball-drawing logic.
General vs. Specialized
The distinction between versatile, multipurpose MicroSim types and those designed for specific subject domains.
Example: p5.js is general-purpose; a circuit simulator is specialized for electronics.
Generative AI
Artificial intelligence systems that create new content such as text, code, or images from patterns learned during training.
Example: Using Claude to generate JavaScript code for a physics simulation.
Geographic Maps
Interactive visualizations displaying spatial data on representations of Earth's surface.
Example: A Leaflet.js map showing the locations of historical events.
Germane Load
Cognitive effort dedicated to constructing and automating mental schemas during learning.
Example: The mental work of connecting new concepts to existing knowledge while using a MicroSim.
Git
A distributed version control system that tracks changes to files and coordinates work among multiple contributors.
Example: Using git commit to save snapshots of MicroSim development progress.
GitHub
A web-based platform providing Git repository hosting, collaboration features, and deployment services.
Example: Hosting MicroSim code on GitHub and deploying to GitHub Pages.
Global Variables
Variables declared outside all functions, accessible from anywhere in the program throughout its execution.
Example: let canvasWidth = 400; declared at the top of a p5.js sketch.
Graph Layout Algorithms
Mathematical methods for automatically positioning nodes and edges in network visualizations.
Example: Force-directed, hierarchical, and circular layout algorithms in vis-network.
Graph Node Coloring
The assignment of colors to network graph nodes to indicate categories, values, or relationships.
Example: Coloring nodes by taxonomy category in a learning graph visualization.
Guided Exploration
An instructional approach providing structured support while allowing learners to discover concepts through interaction.
Example: A MicroSim with prompts suggesting which parameters to adjust first.
Heavyweight Libraries
JavaScript frameworks with large file sizes and extensive functionality that may slow page loading.
Example: ReactFlow compared to simpler libraries like vis-network for graph visualization.
History of GraphViz
The development background of the GraphViz graph visualization software that influenced modern diagram tools.
Example: Understanding how AT&T's GraphViz inspired DOT notation used in modern tools.
HTML Fundamentals
Basic knowledge of HyperText Markup Language for structuring web page content and elements.
Example: Understanding <div>, <iframe>, and <script> tags for MicroSim embedding.
HTML Slide Embedding
The technique of incorporating MicroSims into presentation slides using HTML and iframes.
Example: Adding a live simulation to a reveal.js slide deck for classroom demonstrations.
iframe Integration
The process of embedding external content within a web page using the HTML iframe element.
Example: <iframe src="main.html" width="400" height="450"></iframe>
iframe Styling
CSS techniques for controlling the visual appearance and behavior of embedded iframe content.
Example: Removing borders with style="border: none;" for seamless integration.
index.md File
The main documentation file for a MicroSim containing metadata, description, and embedded simulation.
Example: A markdown file with YAML frontmatter, iframe embed, and usage instructions.
Infographics
Visual representations combining images, charts, and text to communicate information clearly and engagingly.
Example: A static or interactive graphic explaining the p5.js execution flow.
Intelligent Textbook
An online interactive textbook that responds to the needs of the student and predicts learning paths to help student reach their goals.
Intelligent Textbooks are classified in a five-level system that begins with a simple printed textbooks (Level 1) to advanced AI-backed textbooks (Level 5) that generate new content based on the needs of their students.
- See also: Learning Graph
Input Handling
The processing of user actions such as mouse movements, clicks, keyboard presses, and touch events.
Example: Detecting slider changes to update simulation parameters in real-time.
Interactive Learning
An educational approach where learners actively engage with materials through manipulation and exploration.
Example: Students adjusting parameters in a MicroSim to observe cause-and-effect relationships.
Interaction Design
The practice of designing digital products with logical, intuitive, and meaningful user interactions.
Example: Placing controls consistently at the bottom of all MicroSims for predictable behavior.
Intrinsic Load
The inherent complexity of learning material determined by the content itself and learner expertise.
Example: The unavoidable difficulty of understanding recursion for beginning programmers.
Investigate Phase
The third stage of PRIMM methodology where learners explore code structure and trace execution flow.
Example: Students stepping through code to understand how the draw loop updates ball position.
isRunning State
A boolean variable tracking whether an animation or simulation is currently executing or paused.
Example: if (isRunning) { updatePosition(); } only moves objects when running.
Iterative Refinement
The process of progressively improving code or designs through repeated cycles of testing and modification.
Example: Prompting an AI to adjust slider positioning after initial code places them incorrectly.
JavaScript Basics
Fundamental knowledge of JavaScript programming including variables, functions, objects, and DOM manipulation.
Example: Understanding how to declare variables and write functions for p5.js sketches.
JSON Schema
A vocabulary for describing and validating the structure of JSON documents.
Example: A schema defining required metadata fields for MicroSim documentation.
Keyboard Events
User interactions detected when keys are pressed, released, or held on a keyboard.
Example: Using arrow keys to control character movement in a MicroSim.
Keyboard Navigation
The ability to operate interactive elements using keyboard controls without requiring a mouse.
Example: Tab key moves between controls; Enter activates buttons; arrow keys adjust sliders.
keyPressed()
A p5.js event function that executes once when any keyboard key is pressed down.
Example: function keyPressed() { if (key === ' ') togglePause(); }
Large Language Models
AI systems trained on vast text datasets to understand and generate human-like text and code.
Example: GPT-4 and Claude are LLMs capable of generating p5.js code from descriptions.
Leaflet JS Library
An alternative name for Leaflet.js, the JavaScript mapping library.
See also: Leaflet.js
Leaflet.js
An open-source JavaScript library for creating interactive, mobile-friendly maps with various data overlays.
Example: Using Leaflet to display historical event locations on an interactive world map.
Learning Graph
A directed graph representing concepts and their prerequisite relationships within a knowledge domain.
Example: A visualization showing that "Variables" must be learned before "Functions."
Learning Objectives
Specific, measurable statements describing what learners should know or be able to do after instruction.
Example: "Students will be able to implement a responsive MicroSim layout."
Line Chart
A visualization displaying data points connected by lines to show trends over continuous intervals.
Example: A Chart.js line chart showing temperature changes throughout a day.
Line Charts
Plural form referring to multiple line chart visualizations or various line chart configurations.
line()
A p5.js function that draws a straight line segment between two points.
Example: line(0, 0, 100, 100); draws a diagonal line from top-left.
Live Preview
Real-time display of code changes without requiring manual page refresh or rebuild.
Example: Using mkdocs serve to see documentation changes immediately in the browser.
Local Variables
Variables declared within a function, accessible only within that function's scope.
Example: function draw() { let x = 100; } where x exists only inside draw().
Loops
Programming constructs that repeat code execution until a condition is met.
Example: A for loop drawing multiple circles: for (let i = 0; i < 10; i++) { ellipse(i*40, 200, 30); }
Low-Bandwidth Design
Design practices ensuring content loads and functions effectively on slow internet connections.
Example: Minimizing JavaScript file sizes and avoiding large image downloads in MicroSims.
main.html File
A minimal HTML file that serves as the entry point for iframe embedding of a MicroSim.
Example: An HTML file loading style.css and script.js for iframe source.
Make Phase
The fifth and final stage of PRIMM methodology where learners create original code based on learned patterns.
Example: Students designing their own simulation after studying examples.
Maps
Geographic visualizations displaying spatial relationships and location-based data.
Example: An interactive map showing earthquake locations with magnitude indicators.
Margin Variable
A numerical value defining the spacing between visual elements and canvas edges.
Example: let margin = 25; creates consistent 25-pixel padding around content.
Mermaid
A JavaScript library that renders diagrams from text-based descriptions using a markdown-inspired syntax.
Example: Creating flowcharts by writing graph TD; A-->B; in markdown files.
Mermaid.js Diagrams
Visual diagrams generated by the Mermaid library including flowcharts, sequence diagrams, and entity relationships.
Example: A process diagram created from text that automatically handles layout and styling.
Metadata Standards
Agreed-upon formats and vocabularies for describing digital resources to enable discovery and interoperability.
Example: Dublin Core, Schema.org, and IEEE LOM are metadata standards used in education.
metadata.json File
A JSON file containing machine-readable descriptive information about a MicroSim.
Example: A file with Dublin Core fields, educational level, and technical requirements.
MicroSim Architecture
The structural organization of simulation components including regions, layouts, and interaction patterns.
Example: A standard architecture with drawing region, control region, and responsive sizing.
MicroSim Definition
A small, focused, interactive web-based simulation designed to help learners understand a single concept.
Example: A bouncing ball simulation teaching concepts of gravity and energy conservation.
MicroSim Packaging
The standard set of files and folder structure required for a complete, deployable MicroSim.
Example: A directory containing index.md, main.html, style.css, script.js, and metadata.json.
MicroSim Type Selection
The process of choosing the appropriate simulation format based on learning objectives and content type.
Example: Selecting a timeline for historical events and a network graph for concept relationships.
MicroSim Uniqueness
The characteristic that each MicroSim focuses on a single, specific concept or skill.
Example: One MicroSim for gravity, a separate one for friction, rather than combining both.
MicroSim Validation
The process of checking that a MicroSim meets quality standards for functionality, accessibility, and documentation.
Example: Running automated tests to verify all required metadata fields are present.
Minimal Borders
A design approach eliminating or reducing visual boundaries around embedded content for seamless integration.
Example: Using border: none; CSS to remove iframe borders on textbook pages.
MkDocs Embedding
The technique of incorporating MicroSims into MkDocs documentation pages using iframes.
Example: Adding <iframe src="./main.html"></iframe> to a markdown documentation file.
mkdocs serve
A command that starts a local development server for previewing MkDocs documentation with live reload.
Example: Running mkdocs serve to preview changes at http://127.0.0.1:8000.
Model Editor
A MicroSim type at Bloom's Create level where users construct or modify conceptual models.
Example: A simulation where students build their own state machine diagrams.
Modify Phase
The fourth stage of PRIMM methodology where learners make changes to existing code to observe effects.
Example: Students changing the gravity constant in a physics simulation to see different behaviors.
Mouse Events
User interactions detected when the mouse moves, clicks, drags, or hovers over elements.
Example: Using mousePressed() to detect clicks on interactive elements.
mouseDragged()
A p5.js event function that executes continuously while the mouse button is held and moved.
Example: Allowing users to drag objects by updating positions in mouseDragged().
mousePressed()
A p5.js event function that executes once when a mouse button is clicked down.
Example: function mousePressed() { if (overButton) toggleState(); }
Multiple Representations
The pedagogical practice of presenting concepts through various formats like text, images, and interactions.
Example: Teaching fractions through written explanations, pie charts, and interactive MicroSims.
Network Graphs
Visualizations showing nodes and edges representing entities and their relationships.
Example: A vis-network diagram displaying prerequisite relationships between course concepts.
Objective Classification
The process of categorizing learning objectives according to frameworks like Bloom's Taxonomy.
Example: Identifying "explain the difference" as an Understand-level objective.
Older Device Support
Design considerations ensuring functionality on devices with limited processing power or older browsers.
Example: Avoiding complex WebGL features that may not work on older tablets.
Open Exploration
An instructional approach allowing learners to discover concepts freely without prescribed steps.
Example: A sandbox MicroSim where students can adjust any parameter in any order.
Open Graph Tags
HTML metadata elements controlling how content appears when shared on social media platforms.
Example: <meta property="og:image" content="/sims/ball/ball.png"> sets the share preview image.
OpenMaps Data
Geographic data from OpenStreetMap, a collaborative mapping project providing free map data.
Example: Leaflet.js MicroSims using OpenStreetMap tiles for base map display.
Org Chart Example
A network visualization demonstrating hierarchical organizational structure with reporting relationships.
Example: A vis-network diagram showing company departments and reporting lines.
Other Chart Types
Additional visualization formats beyond basic bar, line, and pie charts, such as radar, polar, and doughnut charts.
Example: Using Chart.js radar charts to compare skills across multiple dimensions.
Other MicroSim Libraries
JavaScript frameworks beyond the core set used for specialized visualization needs.
Example: Three.js for 3D graphics or D3.js for custom data visualizations.
p5.js Editor Preview
The built-in preview feature of the p5.js online editor showing sketch output in real-time.
Example: Testing MicroSim code at editor.p5js.org before integrating into a website.
p5.js Library
A JavaScript library making creative coding accessible with functions for drawing, animation, and interaction.
Example: Using p5.js to create an interactive physics simulation with minimal code.
p5.js MicroSim
A MicroSim built using the p5.js library, offering maximum flexibility for custom visualizations and interactions.
Example: A custom-coded animation showing wave interference patterns.
Parameter Adjustment
The ability for users to modify simulation variables through interactive controls.
Example: A slider allowing users to change the gravity constant from 0.1 to 2.0.
Pause Button
An interactive control that temporarily halts simulation execution while preserving current state.
Example: A button that sets isRunning = false without resetting position variables.
Peer Review
A collaborative process where team members evaluate each other's work to improve quality.
Example: Colleagues reviewing MicroSim code for bugs, accessibility, and best practices.
Pie Charts
Circular visualizations divided into sectors representing proportional parts of a whole.
Example: A Chart.js pie chart showing the distribution of student grade levels.
Pixels
The individual dots of color that compose digital images and define canvas resolution.
Example: A 400×450 canvas contains 180,000 individually addressable pixels.
pop() Function
A p5.js function that restores drawing settings to their state before the most recent push() call.
Example: Using pop() after drawing a rotated element to restore normal orientation.
Portfolio Development
The process of collecting, organizing, and presenting work samples demonstrating skills and accomplishments.
Example: Building a GitHub repository showcasing diverse MicroSim projects.
Predict Phase
The first stage of PRIMM methodology where learners predict code behavior before execution.
Example: Students guessing what output code will produce before running it.
PRIMM Methodology
A pedagogical framework for teaching programming: Predict, Run, Investigate, Modify, Make.
Example: Using PRIMM to scaffold learning when introducing new p5.js concepts.
Process Diagrams
Visual representations showing steps, decisions, and flows in a procedure or workflow.
Example: A Mermaid diagram showing the steps to create and deploy a MicroSim.
Programming Fundamentals
Core concepts underlying all programming including variables, control flow, functions, and debugging.
Example: Understanding loops and conditionals before learning p5.js-specific functions.
Project Evaluation
The systematic assessment of completed work against defined criteria and rubrics.
Example: Scoring a capstone MicroSim using the 100-point quality rubric.
Prompt Engineering
The skill of crafting effective text inputs to guide AI systems toward desired outputs.
Example: Writing specific, detailed prompts that produce functional MicroSim code.
Prototyping
Creating preliminary versions of simulations to test concepts and gather feedback before full development.
Example: Quickly sketching a MicroSim idea in the p5.js editor before refining.
push() Function
A p5.js function that saves current drawing settings to a stack for later restoration.
Example: Using push() before applying transforms to isolate their effects.
Quality Score
A numerical rating assessing MicroSim completeness, functionality, and adherence to standards.
Example: A MicroSim with full documentation, accessibility, and responsive design scores 95/100.
Quiz Mode
A MicroSim operational state presenting assessment questions and evaluating user responses.
Example: A simulation that switches from exploration to testing user understanding.
ReactFlow
A JavaScript library for building node-based editors and interactive diagrams in React applications.
Example: Creating complex workflow editors with drag-and-drop node connections.
rect()
A p5.js function that draws a rectangle at specified coordinates with given width and height.
Example: rect(10, 10, 100, 50); draws a 100×50 rectangle at position (10, 10).
Relative Positioning
Placing elements based on calculated positions relative to canvas dimensions or other elements.
Example: text(title, canvasWidth/2, margin); centers text regardless of canvas size.
Remember Level
The first and foundational level of Bloom's Taxonomy involving recall of facts and basic concepts.
Example: Memorizing the names of p5.js drawing functions.
Reset Button
An interactive control that returns simulation state and parameters to initial default values.
Example: A button that resets ball position, velocity, and slider values to starting conditions.
Responsive Layout
A MicroSim design that dynamically adjusts to fit different container sizes and viewport dimensions.
Example: A simulation that expands to fill available width while maintaining proportions.
Responsive Width
The horizontal dimension that automatically adjusts based on container or viewport size.
Example: canvasWidth = document.querySelector('main').offsetWidth;
RGB Color Model
A color system defining colors by red, green, and blue component values ranging from 0 to 255.
Example: fill(255, 0, 0); produces pure red; fill(128, 128, 128); produces gray.
Rules Files
Configuration documents containing coding standards and patterns for AI-assisted development.
Example: A .cursor/rules file specifying MicroSim layout conventions for AI tools.
Run Phase
The second stage of PRIMM methodology where learners execute code to observe actual behavior.
Example: Students running a sketch to compare actual output with their predictions.
Scaffolding Strategies
Instructional techniques providing temporary support that is gradually removed as learner competence increases.
Example: Starting with guided tutorials before moving to open-ended MicroSim creation.
Screen Reader Support
Features enabling visually impaired users to access content through text-to-speech software.
Example: Using the p5.js describe() function to provide canvas content descriptions.
script.js File
The JavaScript file containing the p5.js sketch code for a MicroSim.
Example: A file with setup(), draw(), and event handler functions.
Separation of Drawing and Control Regions Pattern
A design pattern that uses separates screen regions for drawing and controlling simulations.
Example: In MicroSims, the drawing region is typically placed above the control region.
1 2 3 | |
The upper region (colored 'aliceblue') displays the simulation. The lower region (colored 'white') contains sliders and buttons. This pattern solves the problem of separating interactive controls from the visualization area, ensuring controls don't obscure the simulation and users always know where to find them.
This pattern appears consistently across MicroSims in most MicroSim examples, enabling:
- Predictable user experience
- Reliable AI generation (the pattern is learnable)
- Easier maintenance and modification
Sequence Diagrams
Visualizations showing interactions between components over time with vertical lifelines and horizontal messages.
Example: A Mermaid sequence diagram showing user, browser, and server communication.
setup() Function
A p5.js function that executes once when the sketch starts, used for initialization.
Example: Creating the canvas, initializing variables, and setting initial states in setup().
Shape Rendering
The process of drawing geometric shapes on the canvas with specified colors, strokes, and fills.
Example: Rendering a filled blue circle with a black outline.
Simplicity
The design principle that MicroSims should focus on essential elements without unnecessary complexity.
Example: A bouncing ball with only the controls needed to understand the physics concept.
Simulation Fidelity
The degree to which a simulation accurately represents real-world behavior and systems.
Example: High-fidelity physics simulations use actual equations; low-fidelity uses simplified models.
Skills Development
The process of learning to create and use AI skill files for specialized code generation tasks.
Example: Creating a custom Claude skill for generating Chart.js visualizations.
Slider Control
An interactive element allowing users to select values within a continuous range by dragging a handle.
Example: A horizontal slider adjusting animation speed from 1 to 60 frames per second.
Social Image Preview
The thumbnail image displayed when a link is shared on social media or messaging platforms.
Example: A screenshot of a MicroSim shown when sharing its URL on Twitter.
Sorter MicroSim
An interactive simulation at Bloom's Remember level where users categorize or order items.
Example: A drag-and-drop activity sorting historical events into chronological order.
Specialized MicroSims
Simulations designed for specific subject domains requiring custom visualization techniques.
Example: A 3D molecule viewer for chemistry or a circuit simulator for electronics.
Speed Control
An interface element allowing users to adjust the rate of animation or simulation progression.
Example: A slider that modifies the frameRate() or step size in physics calculations.
Standard Layout
The conventional MicroSim structure with a drawing region above and control region below.
Example: A 400×400 pixel drawing area with a 50-pixel control strip at the bottom.
Start Button
An interactive control that initiates or resumes simulation execution from a paused state.
Example: A button labeled "Start" that sets isRunning = true;
State Management
The tracking and updating of application status, modes, and variable values throughout execution.
Example: Using a mode variable with values like "RUNNING", "PAUSED", and "RESET".
Stop Button
An interactive control that halts simulation execution completely.
Example: A button that stops animation and prevents further state changes.
stroke()
A p5.js function that sets the outline color for subsequently drawn shapes.
Example: stroke('black'); gives all following shapes black outlines.
style.css File
A CSS file containing styling rules to ensure MicroSims display cleanly in iframes.
Example: CSS setting border: none; and margin: 0; for seamless embedding.
Subject Metadata
Dublin Core field listing topic areas and keywords describing resource content.
Example: subject: ["Physics", "Kinematics", "Projectile Motion"]
Taxonomy Pyramid
A visual representation of Bloom's Taxonomy showing hierarchical levels from Remember to Create.
Example: A triangular diagram with Remember at the base and Create at the apex.
Text Editor
A software application for writing and editing plain text files including code.
Example: VS Code, Sublime Text, or the p5.js web editor for writing MicroSim code.
text()
A p5.js function that displays text strings at specified canvas coordinates.
Example: text("Speed: " + speed, 20, 430); displays a label with current value.
textAlign()
A p5.js function that sets horizontal and vertical alignment for text rendering.
Example: textAlign(CENTER, TOP); centers text horizontally and aligns to top vertically.
textSize()
A p5.js function that sets the font size in pixels for subsequently drawn text.
Example: textSize(16); sets text to 16-pixel height for readability.
Timeline Visualization
A graphical representation showing events arranged along a temporal axis.
Example: A vis-timeline showing key events in computer history with zoom and pan.
Timelines
Interactive visualizations displaying sequences of events along a time axis.
Example: A MicroSim showing the chronological development of programming languages.
Title Metadata
Dublin Core field containing the name by which a resource is formally known.
Example: title: "Bouncing Ball Physics Simulation"
Token Limits
Maximum number of tokens (word pieces) that can be processed in a single AI interaction.
Example: Breaking large code files into smaller segments to fit within context limits.
ToolTips
Small informational popups that appear when hovering over interface elements.
Example: Hovering over a slider reveals "Adjust animation speed (1-60 fps)".
Touch Events
User interactions detected on touchscreen devices including taps, swipes, and pinches.
Example: Supporting touchStarted() alongside mousePressed() for mobile compatibility.
translate() Function
A p5.js function that shifts the coordinate system origin to a new position.
Example: translate(200, 100); moves origin so (0,0) is now at previous (200,100).
Two-Column Layout
A MicroSim design with the canvas divided into two side-by-side areas for simulation and data display.
Example: Animation on the left, real-time graph of variables on the right.
Understand Level
The second level of Bloom's Taxonomy where learners explain ideas and interpret meaning.
Example: Explaining how the draw() loop creates animation through repeated updates.
Universal Design Learning
An educational framework providing multiple means of engagement, representation, and expression.
Example: Offering text, audio, and interactive options for learning the same concept.
updateCanvasSize()
A custom function that recalculates canvas dimensions based on current container size.
Example: Reading container width and adjusting slider positions during window resize.
Usability Studies
Research methods evaluating how easily users can accomplish tasks with an interface.
Example: Observing students using a MicroSim to identify confusing controls.
User Interaction
Actions taken by users to engage with a simulation, such as clicking, dragging, or adjusting controls.
Example: Moving a slider to change gravity and observing the effect on ball motion.
User Testing
The practice of having actual users try a product to identify issues and gather feedback.
Example: Having students use a MicroSim and report confusion or bugs.
Variables
Named storage locations that hold values which can be changed during program execution.
Example: let ballX = 200; creates a variable storing the ball's horizontal position.
Venn Diagrams
Visualizations using overlapping circles to show relationships between sets.
Example: A diagram showing overlapping skills needed for front-end, back-end, and full-stack development.
Version Control
Systems that track changes to files over time, enabling collaboration and history review.
Example: Using Git to maintain history of MicroSim development and coordinate team work.
Vis-network JS Library
An alternative name for vis-network, the JavaScript library for network visualizations.
See also: vis-network Library
vis-network Library
A JavaScript library for creating interactive network graphs with nodes, edges, and physics simulation.
Example: Visualizing concept dependencies in a learning graph with draggable nodes.
Vis-Timeline
The timeline component of the vis.js library for creating interactive temporal visualizations.
Example: Creating a zoomable historical timeline with event grouping.
WCAG Guidelines
Web Content Accessibility Guidelines providing standards for making web content accessible to people with disabilities.
Example: Meeting WCAG 2.1 AA contrast requirements for MicroSim text and controls.
Web Browser
A software application that retrieves and displays web content, running JavaScript for interactivity.
Example: Chrome, Firefox, Safari, or Edge displaying and running MicroSim code.
Web-Based Simulation
An interactive educational tool that runs in a web browser without requiring software installation.
Example: A p5.js MicroSim accessible through any modern browser via URL.
WebGL
Web Graphics Library enabling high-performance 2D and 3D graphics rendering in browsers.
Example: Using p5.js WEBGL mode for 3D molecule visualizations.
windowResized()
A p5.js event function that executes when the browser window dimensions change.
Example: Calling resizeCanvas() and updating element positions in windowResized().
Workflow
A sequence of steps and decisions that define how a process progresses from start to completion.
Example: The workflow for creating a MicroSim: design, code, test, document, deploy.
Working in Teams
Collaborative development practices for groups creating MicroSim projects together.
Example: Using Git branches, pull requests, and code reviews for team MicroSim development.
xAPI
Experience API (Tin Can), a specification for tracking learning activities and storing them in a Learning Record Store.
Example: Sending xAPI statements when students interact with MicroSim controls.
YAML Frontmatter
Metadata in YAML format at the beginning of markdown files, delimited by triple dashes.
Example: Title, description, and quality_score fields at the top of index.md.
This glossary was generated from the course concept list following ISO 11179 metadata registry standards.