Computer Science & Software Engineering
Course Progress
0/0
Code Runner - Examples
Objectives in Technical Learning
Code Runner - JavaScript
Lesson Planning
Variables
Strings
Classes and Methods
Mathematical Expressions
Booleans
JSON and JavaScript Objects
Nested Conditionals
Iterations
Data Abstraction!
Arrays
Conditionals
Functions
Teaching Weeks Issue
Likert Review
Sprint 4 - CSSE Objectives
OCS GameEngine Guide
Variables and HTML DOM
GameEngine Essentials Guide
Characters
Backgrounds
Enemy Death
Enemy Collision
DOM Updates
Objects, Instance Data
Randomized Dialogues
Local Storage in JS
Gravity
Blocks
Transitions Screens
Single Responsibility Principle (SRP)
Finite State Programming
GameEngine Essentials Summative Assessment
Game-in-game
Implementing Enemies
Web APIs and Local Storage Documentation
API's and how they are used
Game Over | Transitions | Leaderboard
Local Storage
Player | Animation | Collision
Backgrounds | Theme | Messages
Enemies | Collision
Platform | Elevated
Sprint 5 - CSSE Objectives
Game Help - Platformer
OOP, Multiplayer
Code Runner - Examples
2 min read
Python Lesson: Fix the Syntax Error
Code Runner 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
Code Runner 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
Code Runner 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
Code Runner 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