Computer Science Principles

Course Progress 0/0
Week 17 Code Runner - Examples

Code Runner - Examples

3 min read

Introduction to Code Runners

In this post, we will explore how to use code runners to create interactive lessons. Code runners allow you to embed code snippets that can be executed directly on the page, providing an engaging learning experience for students. We support 4 languages: Python, Java, JavaScript, and AP CSP Pseudocode.

Python Code Runner

Code Runner Challenge

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

The following code snippet demonstrates a simple Python code runner. You can run this code directly on the page to see the output.

Java Code Runner

Code Runner Challenge

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

The Java code runner allows you to execute Java code snippets. The example above prints “Hello, World!” and counts from 0 to 4.

JavaScript Code Runner

Code Runner Challenge

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

The JavaScript code runner lets you run JavaScript code snippets. The example provided logs “Hello, World!” and counts from 0 to 4 in the console.

AP CSP Pseudocode Runner

Context: AP Computer Science Principles has a standardized pseudocode language that is used in the AP CSP exam. Our code runner supports this pseudocode, allowing students to practice and execute their pseudocode snippets directly on the page.

Code Runner Challenge

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

The AP CSP Pseudocode runner allows you to execute pseudocode snippets. The example above is a simple calculator that takes two numbers and an operator as input and displays the result.

Embedding Code Runners in YOUR notebooks

To embed code runners in your notebooks, you can use the following syntax:

{% include runners/code.html runner_id="your-runner-id" language="your-language" code=your_code_variable %}

Example Embedding a Python Code Runner:

{% include runners/code.html runner_id="python-main" language="python" code=python_example %}

This modular approach allows you to create interactive lessons with more code and less text, making it easier for students to learn by doing. You can customize the code snippets and languages to fit the needs of your lesson.

Example Embedding a Pseudocode Code Runner with preset code:

{% capture csp_example %}
num1 ← INPUT("Enter first number:")
op ← INPUT("Enter operator (+, -, *, /):")
num2 ← INPUT("Enter second number:")
result ← 0
IF (op = "+")
{
    result ← num1 + num2
}
ELSE
{
    IF (op = "-")
    {
        result ← num1 - num2
    }
    ELSE
    {
        IF (op = "*")
        {
            result ← num1 * num2
        }
        ELSE
        {
            IF (op = "/")
            {
                IF (num2 ≠ 0)
                {
                    result ← num1 / num2
                }
                ELSE
                {
                    DISPLAY("Error: Division by zero")
                    result ← "undefined"
                }
            }
            ELSE
            {
                DISPLAY("Invalid operator")
                result ← "undefined"
            }
        }
    }
}

DISPLAY("Result: "+ result)
{% endcapture %}
{% include runners/code.html runner_id="csp-main" language="pseudocode" code=csp_example %}

Notice the capture block that allows you to define the code snippet in a variable, which can then be passed to the code runner. This makes it easy to manage and update your code snippets without having to modify the HTML structure of your page.

Course Timeline