Stardance Challenge Devlog 1: Finding the “Just Right” Balance with eceWire
The Vision: Khan Academy Meets IXL
Welcome to my very first devlog for the Stardance Challenge! With eceWire, I am setting out to solve a major user experience and pedagogical problem in modern digital education. When analyzing the current web landscape for online learning tools, I noticed a frustrating, extreme divide between two massive platform philosophies:
- Khan Academy: Offers brilliant, deep lesson contexts, conceptual explanations, and rich structural layouts. However, it can feel painfully slow, over-reliant on sitting through long videos, and sluggish when you just want to jump in and build core muscle memory.
- IXL: Blazing fast and gets straight to the point with continuous question drilling loops. However, it completely lacks pedagogical depth. It can feel like a cold, repetitive question mill that flags answers without offering actual real-time teaching.
I wanted to engineer a platform that sits “just right” directly in the middle. It steals the deep, visually rich lesson content cards of Khan Academy and marries them natively to the rapid-fire, low-latency practice engines of IXL. To prove this hybrid architecture works, I built a fast single-page web prototype running entirely inside a single index file, loaded with comprehensive environments for Pre-Algebra, Honors Geometry, and Arduino hardware engineering.
Font and UI Design System
To ensure students can focus during intensive, late-night study sessions without suffering severe eye strain, I built out a sleek obsidian layout system using strict custom style tokens.
-
Typography Foundations: The application imports and relies on a balance between standard headers and readable body text. Body components use clean geometric sans-serif configurations to keep long technical reading clear, while primary layout headers utilize a heavy serif display style via
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans&display=swap'). -
The Obsidian Color Scheme: Deep Background uses a space-cadet navy blue (
#0c0f1a) that keeps overall contrast soft. Elevated Cards use layered surfaces (#131728) to distinctly separate text blocks from interactive sandbox segments.
Core Tracks: Pre-Algebra, Honors Geo, and Arduino
Pre-Algebra (117+ Skills)
Focuses on establishing core numerical mastery before students advance into structural equations. Students are presented with direct, high-speed input elements evaluated instantly by the runtime engine to maximize rapid skill absorption.
Honors Geometry (280+ Skills)
Brings heavy spatial concepts to life by rendering customized coordinate vector blocks (.svg-wrap). This setup lets students view visual definitions—like calculating polygon interior angles or managing coordinate focus proofs—right next to their practice area.
Arduino Physical Computing
Structures embedded syntax wrappers specifically tailored for microcontrollers. Students can review exact code arrays for setup routines (void setup()) and loops (void loop()) alongside circuit schematics to master software-hardware logic simultaneously.
Teaching in Action and Student Response
I actively use this platform to teach my students, and the response has been incredible. They absolutely love the hybrid layout. Students can study textbook definitions at their own pace on the “Learn” side, then switch to “Practice” to drill concepts without experiencing browser lag.
When a student achieves a score of 60% or higher, the data engine updates the user profile instantly:
if (curSkill && pct >= 60) {
setDone(curSkill.ui, curSkill.si);
updateProgress();
}
