Stackr Classroom for VS Code
Turn VS Code into an all-in-one interactive coding & robotics classroom. Learn, code, test, and submit assignments in one seamless flow without ever leaving your editor.
⚡ The Student Journey
One-Click Setup:
- Install the extension in VS Code.
- Click Sign In in the Stackr: Student Profile & Streak panel to connect your account.
- Your enrolled courses, current streak (🔥), and total points (⚡) sync automatically from the Stackr platform.
Picking a Challenge:
- The Curriculum & Modules tree on the Activity Bar displays your syllabus and lessons.
- Click Start Exercise on any module to automatically scaffold the starter code, styling, and
README.md into your workspace folder.
In-Editor Learning:
- The Lesson Sidecar splits open beside your active code editor.
- Watch the video explanation (Bunny Stream / YouTube / MP4), read the key takeaways, and follow the interactive checklist right next to your files.
Instant Validation & Feedback:
- Click Run Checks at any time to test your code privately before turning it in.
- Clear, encouraging feedback highlights what passed and where to fix bugs with actionable hints.
One-Click Turn-In:
- Click Submit Assignment in the sidecar or editor toolbar.
- The extension automatically bundles your code, securely turns in your assignment, awards points (+50 XP), updates your daily streak, and unlocks the next module!
🚀 Features
- Activity Bar Container (
media/stackr-activitybar.svg): Branded Stackr tab in the primary sidebar.
- Student Profile & Streak Webview: Live stats showing student name, email, XP points, and daily streak.
- Curriculum Tree Provider: Expandable courses -> modules -> video, notes, and exercises with completion indicators (✅).
- Dockable Lesson Sidecar (
stackr.sidecar): Embedded video player, markdown notes, task checklist, and instant test runner.
- Starter Scaffolding Engine: Creates starter files for HTML, CSS, JavaScript, Python, or Robotics challenges.
- Live Cloud Sync: Real-time sync with your Stackr student profile, active cohorts, and grading dashboard.
- Status Bar Indicator: Persistent
⚡ Stackr: XP | 🔥 Streak indicator in the VS Code status bar.
🛠️ Development & Building
Prerequisites
- Node.js 18+
- VS Code 1.85.0+
Compile
npm run compile
Watch Mode
npm run watch
Package into .vsix
npm run build:vsix
Installing in VS Code
code --install-extension stackr-classroom-0.1.0.vsix
⚙️ Configuration
stackr.autoRunChecksOnSave: (Default: false) Automatically runs exercise validation tests whenever you save a file in an exercise workspace.
Publishing to the Visual Studio Marketplace
# Login to vsce with your Personal Access Token (PAT)
npx vsce login PocketStudiosGroupLtd
# Publish the extension
npx vsce publish
Built with pride by Pocket Studios Group Ltd for Stackr.
| |
