Features

The Gradescope Submitter provides a complete in-browser coding environment for students.

Code Editor

CodeMirror Integration

The editor uses CodeMirror with:

• Python syntax highlighting — Keywords, strings, comments, and functions are color-coded
• Line numbers — Easy reference for debugging
• Auto-indentation — Proper Python indentation maintained
• Dark theme — Material Darker theme for reduced eye strain
• Tab support — 4-space indentation

Resizable Editor

In iframe mode, students can drag the bottom edge to resize the editor panel:

• Minimum height: 200px
• Maximum height: 90% of viewport
• Default height: 420px

Code Execution

Pyodide Runtime

Code runs in the browser using Pyodide, a Python interpreter compiled to WebAssembly:

• No server round-trips — Instant execution
• Full Python 3.11 — Most standard library modules available
• NumPy, Pandas support — Can be loaded on demand

Input Support

The input() function works inline:

name = input("What is your name? ")
print(f"Hello, {name}!")

When code calls input():

1. A text field appears in the output area
2. Student types their response
3. Pressing Enter continues execution

Error Handling

Syntax Errors — Detected before execution:

• Code won't run until fixed
• Error message shows line number and description

Runtime Errors — Displayed with full traceback:

• NameError, TypeError, ValueError, etc.
• Stack trace shows exact line where error occurred

Submission

One-Click Submit

Click "Submit Code" to:

1. Send code to the Express server
2. Server submits to Gradescope API
3. Receive confirmation with submission URL

Submission Status

The status bar shows:

• Ready to submit — Default state
• Submitting... — In progress
• Submitted successfully — With link to Gradescope
• Error — With error message

Starter Code

Instructors can provide starter code templates:

# Lab 1: Calculate Total
# Complete the function below

def calculate_total(items):
    """
    Calculate the total price of all items.
    
    Args:
        items: A list of prices (floats)
    
    Returns:
        The sum of all prices
    """
    # TODO: Write your code here
    pass

Students see this code pre-loaded when they open the assignment.

Help System

A built-in help modal explains:

• How to navigate between Code and Output tabs
• What each button does
• Tips for common issues

Access via the ? button in the bottom bar.

Tab Navigation

In iframe mode, the interface uses tabs:

Tab	Purpose
Code	Write and edit Python code
Output	View execution results and errors

Clicking "Run Code" automatically switches to the Output tab.

Keyboard Shortcuts

Shortcut	Action
Tab	Insert 4 spaces
Shift+Tab	Dedent line
Ctrl/Cmd+Z	Undo
Ctrl/Cmd+Shift+Z	Redo