Computer Science & Software Engineering

Course Progress 0/0
Sprint View
Week 8 UI Runner Examples

UI Runner Examples

3 min read

Define UI Runner in a Lesson

UI Runner requires defining challenge and code variables, then passing them to the include with a unique runner_id. The code has access to outputElement for DOM manipulation.

{% capture challenge1 %}
Create a red square on the canvas. Use the GameEngine to render it!
{% endcapture %}

{% capture code1 %}
// Clear the output
outputElement.innerHTML = '';

// Create canvas
const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
outputElement.appendChild(canvas);

// Draw red square
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 200, 200);
{% endcapture %}

{% include ui-runner.html 
   runner_id="visual1"
   challenge=challenge1
   code=code1
   height="300px"
%}

Parameters

  • runner_id (required): Unique ID for each runner on the page (e.g., “visual1”, “visual2”)
  • challenge: Variable containing the challenge/instruction text
  • code: Variable containing the starter JavaScript code
  • height (optional): Editor height (defaults to “300px”)

UI Runner Architecture

HTML Component

  • File: _includes/ui-runner.html
  • Reusable component for visual JavaScript output
  • Uses CodeMirror for syntax highlighting (JavaScript mode only)
  • Provides outputElement variable for DOM manipulation

SCSS Styling

  • Main file: _sass/open-coding/forms/ui-runner.scss
  • Uses the same mixin architecture as code-runner:
    • @mixin control-panel - Top/bottom toolbars with buttons
    • @mixin sub-container - Groups editor/output sections
    • @mixin info-panel - Challenge box styling
    • @mixin emphasized-icon-button - Run button with accent color
    • @mixin icon-button - Stop/Reset/Copy/Clear buttons

Output Element

The outputElement variable is a div container where your visual output appears:

  • Min height: 400px
  • Max height: 600px
  • Scrollable if content exceeds max height
  • Supports canvas, SVG, and any DOM elements
  • Automatically cleared when Stop or Reset is clicked

Color Variables

Uses the same color system as code-runner:

  • --pref-bg-color - Background color
  • --pref-text-color - Text color
  • --pref-accent-color - Accent/emphasis color
  • --ui-border - Border color
  • --panel - Panel background

Canvas Lesson: Draw a Square

Challenge

Create a red square on the canvas. The square should be 200x200 pixels and centered in a 400x400 canvas.

Lines: 1 Characters: 0
UI Output

GameEngine Lesson: Simple Level

Challenge

Use the GameEngine to create a simple game level. The player (blue square) should be able to move around the screen. Try clicking the canvas and using arrow keys!

Lines: 1 Characters: 0
UI Output

DOM Lesson: Interactive Elements

Challenge

Create an interactive button that changes color when clicked. Use DOM manipulation to create and style the button.

Lines: 1 Characters: 0
UI Output

Best Practices

Code Structure

Always start your code by clearing the output element:

outputElement.innerHTML = '';

Canvas Setup

For canvas-based lessons:

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
outputElement.appendChild(canvas);
const ctx = canvas.getContext('2d');

Animation Cleanup

For animations using requestAnimationFrame, store the animation ID and clean it up when needed:

let animationId;

function animate() {
    // Your animation code
    animationId = requestAnimationFrame(animate);
}

animate();

// The Stop button will clear the output, stopping the animation

Memory Management

The UI Runner automatically cleans up when:

  • The Stop button is clicked (clears output and resets code)
  • The Reset button is clicked (resets to original code)
  • New code is run (clears previous output)

This prevents memory leaks from accumulating event listeners or animation loops.

Teaching Tips

Progressive Complexity

Start with simple DOM manipulation, then move to canvas drawing, and finally to game mechanics:

  1. DOM Basics: Create elements, style them, add event listeners
  2. Canvas Drawing: Draw shapes, use colors, understand coordinates
  3. Animation: Use requestAnimationFrame, update positions
  4. Game Logic: Handle input, implement physics, manage state

GameEngine Integration

When using the GameEngine framework:

  • Import necessary classes at the top of your code
  • Create a canvas element for the game
  • Initialize the game engine with the canvas
  • Provide clear instructions about controls (arrow keys, mouse clicks, etc.)

Debugging Hints

Students can use console.log() to debug - output appears in the browser console (F12 Developer Tools).

Course Timeline