Computer Science Principles

Course Progress 0/0
Sprint View
Week 17 Code Runner - Examples

Code Runner - Examples

2 min read

Python Lesson: Fix the Syntax Error

Challenge

Fix the syntax error. Run the code to get a hint!

Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Python Lesson: Complete the Function

Challenge

Complete the function to calculate the area of a rectangle. Replace the ??? with the correct calculation.

Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Java Lesson: Fix the Compilation Error

Challenge

The code has a compilation error. Fix it!

Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

JavaScript Lesson: Complete the Loop

Challenge

Complete the for loop to print numbers 1 through 5. Fill in the missing parts of the loop.

Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Code Runner Reference

Code runner requires defining and passing liquid variables for challenge and code to the include file code-runner.html. Study the source of this markdown file to see how the liquid variables are defined for each example above.

Parameters

  • runner_id (required): Unique ID for each runner on the page (e.g., “exercise1”, “exercise2”)
  • language (optional): “python”, “java”, or “javascript” (defaults to “python”)
  • challenge: Variable containing the challenge/instruction text
  • code: Variable containing the starter code
  • height (optional): Editor height (defaults to “300px”)

Code Runner Architecture

HTML Component

  • File: _includes/code-runner.html
  • Reusable component with parameters for customization
  • Uses CodeMirror for syntax highlighting

SCSS Styling

  • Main file: _sass/open-coding/forms/code-runner.scss
  • Uses mixins for consistent styling across lessons:
    • @mixin control-panel - Top/bottom toolbars with buttons
    • @mixin sub-container - Groups editor/output sections
    • @mixin info-panel - Challenge box styling
    • @mixin output-panel - Code output display
    • @mixin icon-button - Consistent button styling
    • @mixin select-control - Dropdown menus

Color Variables

  • File: _sass/open-coding/user-preferences.scss

  • Uses colors that correspond to user preferences

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

Course Timeline