Cupcake Activity Authoring for VS Code
A comprehensive authoring environment for creating, editing, validating, and previewing interactive Cupcake programming examples and exercises directly inside Visual Studio Code.
Developed by the PAWS Lab (Personalized Adaptive Web Systems Lab) at the University of Pittsburgh.
✨ Key Features
- ⚡ Real-Time YAML Schema Validation & Diagnostics: Automatic schema validation of your activity YAML files against official Cupcake schemas. Catch syntax issues, missing properties, or invalid options as you type.
- 👁️ Interactive Live Preview: Test and preview the authentic student-facing interactive view side-by-side with your code in real time, with automatic refresh when you save changes.
- ▶️ Code Execution & Auto-Capture: Run multi-language source code directly from the YAML editor using
▶️ Run and Capture Output Code Lenses to automatically update stdout, stderr, and test case expectations.
- 🔍 Snippet & Blank Navigation: Instantly navigate from YAML blank coordinates or line explanations to the exact target code location in the source file using
🔍 View in Source.
- 🚀 One-Click Activity Scaffolding: Quickly generate starter templates for all supported pedagogy activity types through the Command Palette or context menus.
- 🔒 Secure Authentication: Pair your VS Code instance with your Cupcake account using browser-based device flow. Authentication tokens are securely stored in VS Code SecretStorage and never exposed to the webview preview.
- 📖 Built-In Tutorials & Guidance: Access integrated guides and authoring tutorials directly from the editor toolbar or the preview panel.
🧩 Supported Activity Types
Cupcake provides authoring and validation for 7 distinct learning activity paradigms:
| Activity Type |
Identifier |
Description |
| Worked Examples |
worked-example |
Step-by-step annotated code walkthroughs with interactive line explanations and execution traces. |
| Code Completion |
code-completion |
Fill-in-the-blank coding exercises with targeted validation and feedback. |
| Parsons Puzzles |
parsons-puzzle |
2D draggable and indentable code block puzzles to reinforce program logic and structure. |
| Free Coding |
free-coding |
Open-ended programming tasks with automated test case validation and feedback. |
| Parameterized Code Tracing |
parameterized-code-tracing |
Variable-randomized tracing problems testing comprehension of control flow and state. |
| Macro Visualizations |
macro-visualization |
High-level interactive algorithm animations and visual step-throughs powered by JSVEE. |
| Multiple Choice Questions |
multiple-choice |
Conceptual assessments featuring formatted code snippets, explanations, and options. |
Supported Programming Languages
Cupcake supports authoring and execution across Python, Java, C, C++, JavaScript, TypeScript, SQL, Rust, Go, C#, and R.
🚀 Getting Started
Sign In with Cupcake:
- Open the Command Palette (
Ctrl+Shift+P / Cmd+Shift+P) and run Cupcake: Sign In.
- Your browser will open the Cupcake device authorization page. Confirm the pairing code.
- Once authenticated, your local environment is paired to run and preview activities.
Create a New Activity:
- Run
Cupcake: New [Activity Type] Task (e.g., Cupcake: New Worked Example Task).
- A fully configured template YAML file and starter source code file will be generated in your workspace.
Edit and Validate:
- As you edit your YAML file, hover over properties for documentation and schema tips.
- Use
▶️ Run and Capture Output above execution blocks to automatically run your code and populate outputs.
Preview the Activity:
- Click the Preview Activity (
👁️) icon in the top-right editor title bar, or press Ctrl+Shift+P / Cmd+Shift+P and run Cupcake: Preview Activity.
- The interactive student interface opens in an adjacent panel.
📋 Commands
All extension commands can be accessed from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
| Command |
Description |
Cupcake: Preview Activity |
Opens the interactive live preview panel for the active activity YAML file. |
Cupcake: Show Activity Tutorial |
Displays authoring instructions and guidelines for the current activity type. |
Cupcake: Sign In |
Authenticates your VS Code extension with the Cupcake platform. |
Cupcake: Sign Out |
Removes your stored authentication token. |
Cupcake: Authentication Status |
Checks whether you are currently signed in and connected to Cupcake. |
Cupcake: New Worked Example Task |
Scaffolds a new Worked Example activity template. |
Cupcake: New Code Completion Task |
Scaffolds a new Code Completion activity template. |
Cupcake: New Parsons Puzzle Task |
Scaffolds a new Parsons Puzzle activity template. |
Cupcake: New Free Coding Task |
Scaffolds a new Free Coding activity template. |
Cupcake: New Parameterized Code Tracing Task |
Scaffolds a new Parameterized Code Tracing activity template. |
Cupcake: New Macro Visualization Task |
Scaffolds a new Macro Visualization activity template. |
Cupcake: New Multiple Choice Question Task |
Scaffolds a new Multiple Choice Question activity template. |
Cupcake: Generate Macro Steps (JSVEE) |
Generates step-by-step animation states for JSVEE visualizations. |
⚙️ Extension Settings
Configure the extension by opening Settings (Cmd+, / Ctrl+,) and searching for Cupcake:
cupcake.baseUrl: The base URL of the Cupcake service backend (default: https://adapt2.sis.pitt.edu/cupcake/).cupcake.strictSSL: Controls whether SSL/TLS certificate chains are strictly verified (default: false to accommodate development environments).
📦 Requirements & Dependencies
- YAML Support: This extension depends on Red Hat YAML (
redhat.vscode-yaml) for JSON Schema integration and syntax validation (installed automatically).
- Workspace Trust: Activity preview and live code execution require a trusted workspace.
🔗 Links & Resources
