Skip to main content

LEAPS System

Overview​

The LEAPS (Learning Progress Study / Lernfortschrittsstudie) is a comprehensive longitudinal research study conducted by the Zurich Education Directorate to track and understand students' learning and educational development throughout their entire compulsory school journey. The TTF-DDG has contributed significantly to this initiative by developing and modernizing tablet-based web tasks for language assessment.

Status: ✅ Completed (Modernization)
Location: Zurich
Platform: Tablet-based web applications
Website: https://www.leaps-zh.ch/

Study Overview​

  • Participants: Approximately 1,500 children tracked from kindergarten entry to the end of mandatory schooling (ages 4-15)
  • Duration: Two student cohorts starting in 2023/24 and 2024/25, continuing at least until 2035
  • Focus Areas: Academic skills (mathematics, German) and cross-disciplinary competencies (motivation, learning factors)
  • First Results: Expected by the end of 2025

The study investigates critical questions about student learning progression, cognitive development, and environmental support factors to help improve the educational system.

TTF-DDG Contribution​

The TTF-DDG has developed three modernized language assessment tasks for the LEAPS platform, revolutionizing the technical infrastructure and development process for creating LEAPS-compatible tasks.

Developed Tasks​

1. Word Recognition (Letter Recognition)​

A tablet-based game where children read a word and select the corresponding image from four options (1 correct answer, 3 distractors).

Key Features:

  • Scene-based architecture (Demo, Practice, Transition, Test, End)
  • Animated characters and instruction audio for guidance
  • Immediate visual feedback in practice mode (e.g., sparkling stars)
  • No feedback in test mode for unbiased assessment
  • URL-based navigation for direct scene access
  • Test mode for rapid testing (maximum 2 items)

Technical Stack:

  • PIXI.js for 2D rendering
  • Vite as bundler
  • Vitest for unit testing
  • TypeScript for type safety

Repository: gitlab.uzh.ch/leaps/items/cordova/letter-recognition

2. Word Reading Comprehension - Image Selection​

Children read a word and select the corresponding image from four visual options. This task includes both LEAPS web deployment and Apache Cordova APK capabilities.

Key Features:

  • Multi-part demo with animated story (rocket explosion, Leapy character)
  • Adaptive practice mode (conditional third trial based on performance)
  • 30-second timeout with visual indicator (stop frog)
  • Comprehensive reporting system tracking interactions and timing
  • Both web and native Android app deployment options

Technical Stack:

  • PIXI.js for 2D rendering
  • Vite as bundler
  • Apache Cordova for native Android builds
  • Node.js and npm for dependency management

Repository: gitlab.uzh.ch/leaps/items/cordova/word-reading-comprehension

3. Word Reading Comprehension - Word Selection​

Similar to the image selection task, but children select the correct word from four text options instead of images.

Key Features:

  • Text-based choices instead of images
  • Same scene structure and story as image selection
  • Comprehensive reporting system for analytics and assessment
  • Session tracking with timestamps and performance metrics

Technical Stack:

  • PIXI.js for 2D rendering
  • Vite as bundler
  • TypeScript for structured data types
  • Node.js and npm for build management

Repository: gitlab.uzh.ch/leaps/items/cordova/word-reading-comprehension-text

Revolutionary Technical Transformation​

The Challenge: Legacy System Limitations​

Before the TTF-DDG's intervention, LEAPS tasks were developed using a legacy approach stored in a monolithic repository (leaps-items-language):

Legacy Architecture:

  • Pure HTML5 with inline JavaScript
  • Manual file management (zipped HTML/JS/CSS bundles)
  • No build system or dependency management
  • No testing infrastructure
  • No version control per task
  • WebView renderer for Android tablets

Problems:

  • Slow, error-prone development
  • Difficult to maintain and extend
  • Hard for multiple developers to collaborate
  • Manual testing leading to frequent bugs
  • No code quality metrics
  • Unoptimized performance

The Solution: Node.js Compatibility & Modern Infrastructure​

The TTF-DDG revolutionized LEAPS task development by introducing Node.js compatibility and solving the technical challenges that arose. This transformation makes task creation faster, cleaner, and more reliable.

Key Achievements​

1. Node.js Integration​

Challenge: LEAPS platform originally designed for pure HTML5/JavaScript bundles sent to WebView renderers.

Solution: The TTF-DDG introduced Node.js compatibility, enabling modern JavaScript development workflows while maintaining LEAPS platform compatibility.

Impact:

  • Access to npm ecosystem (thousands of libraries)
  • Modern JavaScript features (ES modules, async/await)
  • Professional development tools
  • Industry-standard practices
2. Modern Build System​

Implementation:

  • Vite for fast development and optimized production builds
  • Automated ZIP creation for LEAPS platform deployment
  • Development server with hot module replacement
  • Asset optimization and minification

Benefits:

# Fast development with instant feedback
npm run dev

# One-command production build with automatic packaging
npm run build  # Creates builds/latest.zip ready for LEAPS upload
3. Comprehensive Testing Framework​

Implementation:

  • Vitest for unit testing
  • Code coverage reporting
  • Automated test runs in CI/CD pipeline
  • JUnit output for integration with GitLab

Benefits:

# Run tests during development
npm run test

# Check code coverage
npm run test:coverage

# CI/CD integration
npm run test:ci
4. Dependency Management​

Implementation:

  • npm for package management
  • package-lock.json for reproducible builds
  • Semantic versioning for dependencies
  • Automated security updates

Benefits:

  • Clear dependency tracking
  • Easy updates and security patches
  • Consistent builds across environments
  • No manual library downloads
5. Code Quality Tools​

Implementation:

  • ESLint for code linting
  • Prettier for code formatting
  • TypeScript for type safety
  • Pre-commit hooks for quality checks

Benefits:

# Ensure code quality
npm run lint
npm run lint:fix

# Type checking
npx tsc --noEmit
6. Version Control Per Task​

Before: All tasks in one monolithic repository
After: Each task in its own Git repository with dedicated CI/CD

Benefits:

  • Independent versioning and releases
  • Clearer change history
  • Easier collaboration
  • Better issue tracking
7. Enhanced Developer Experience​

Features:

  • URL routing for direct scene access during development
  • Debug mode for testing
  • Test mode for rapid iteration
  • Comprehensive documentation (README, CONTRIBUTING, CHANGELOG)
  • GitLab CI/CD integration

Technical Architecture​

Current Stack (Modernized Tasks)​

  • Rendering Engine: PIXI.js v8 (2D graphics, animations)
  • Build Tool: Vite v6 (fast bundling, HMR)
  • Package Manager: npm (dependency management)
  • Testing Framework: Vitest v3 (unit testing, coverage)
  • Code Quality: ESLint v9, Prettier, TypeScript v5
  • CI/CD: GitLab CI with automated testing and releases
  • Audio: @pixi/sound for audio playback
  • Deployment: Automated ZIP creation for LEAPS platform

Legacy Stack (Old Tasks)​

  • Structure: Raw HTML5 + inline JavaScript
  • Build: Manual ZIP creation
  • Dependencies: Manual file downloads
  • Testing: Manual testing only
  • Version Control: Monolithic repository
  • Deployment: Manual file management

Platform Support​

  • Modern web browsers on tablets (Chrome, Safari, Firefox)
  • iOS and Android support via WebView
  • Touch-optimized interfaces for tablet interaction
  • Responsive design for various screen sizes
  • Apache Cordova for native Android APK (some tasks)

Data Management​

  • Structured JSON-based item databases
  • Session reporting with timestamps
  • Answer tracking with correctness and timing
  • Integration with LEAPS System.sendData() API
  • Local storage for development/testing

Development Workflow​

Modern Workflow (TTF-DDG Tasks)​

Setup​

# Install Node.js 20+ from nodejs.org
# Clone repository
# Install dependencies
npm install

Development​

# Start development server with hot reload
npm run dev

# Direct scene access for testing
# http://localhost:5173/practice
# http://localhost:5173/test?testMode=true

Quality Assurance​

# Run tests
npm run test

# Check code quality
npm run lint
npm run typecheck

# Build for production
npm run build

Deployment​

# Create versioned release
npm run release

# Result: builds/latest.zip ready for LEAPS platform upload
# Also creates: builds/build-X.Y.Z.zip with version number

Legacy Workflow (Old Tasks)​

  1. Edit HTML/JS files manually
  2. Test with Python HTTP server: python3 -m http.server
  3. Manually ZIP files for LEAPS upload
  4. No automated testing or quality checks

Impact of Modernization​

Development Speed​

  • Before: Days to weeks for task creation and testing
  • After: Hours to days with rapid iteration cycles
  • Improvement: 5-10x faster development

Reliability​

  • Before: Manual testing, bugs discovered in production
  • After: Automated testing catches issues before deployment
  • Improvement: Significantly fewer production bugs

Maintainability​

  • Before: Code difficult to understand and modify
  • After: Clear architecture with TypeScript types and documentation
  • Improvement: New developers productive in hours, not weeks

Collaboration​

  • Before: Difficult to work on same codebase simultaneously
  • After: Standard Git workflows with branching and merge requests
  • Improvement: Multiple developers can collaborate effectively

Performance​

  • Before: Unoptimized bundle sizes, slow loading
  • After: Vite optimization produces minimal bundles
  • Improvement: Faster loading times, better user experience

Quality​

  • Before: No measurable quality metrics
  • After: Code coverage, linting, type checking
  • Improvement: Objectively measurable code quality

Research Applications​

Assessment Areas​

The LEAPS language tasks assess:

  • Word Recognition: Early reading skills and letter-sound correspondence
  • Reading Comprehension: Understanding written words and their meanings
  • Vocabulary Development: Word-to-meaning mappings

Longitudinal Tracking​

Tasks designed for repeated administration across school years to track:

  • Learning progress trajectories
  • Individual differences in skill development
  • Intervention effectiveness
  • Environmental factor impacts

Data Collection​

Each task provides rich data:

  • Response accuracy (correct/incorrect)
  • Response times (timestamps)
  • Practice vs. test performance
  • Session duration and completion rates

Documentation​

For Researchers​

Each task includes documentation for:

  • Installation and setup procedures
  • Running tasks locally for testing
  • Understanding task flow and scenes
  • Interpreting collected data
  • Troubleshooting common issues

For Developers​

Comprehensive technical documentation:

  • README.md: Overview, installation, build instructions
  • CONTRIBUTING.md: Development guidelines
  • CHANGELOG.md: Version history and changes
  • APPLICATION_FLOW.md: Detailed scene flow (Word Recognition)
  • URL_ROUTING.md: URL parameter documentation (Word Recognition)

Example Resources​

Best Practices Established​

The LEAPS modernization established best practices now used across TTF-DDG projects:

1. Framework Selection​

Criteria:

  • Performance (PIXI.js chosen for smooth 2D graphics)
  • Developer experience (Vite for fast builds)
  • Community support (npm ecosystem)
  • Long-term maintainability

2. Testing Standards​

Requirements:

  • Unit tests for critical functionality
  • Code coverage targets (aim for >70%)
  • Automated CI/CD testing
  • Manual QA protocols

3. Build & Deployment​

Workflow:

  • Automated build scripts
  • Version-tagged releases
  • Platform-specific packaging (LEAPS ZIP format)
  • GitLab CI/CD integration

4. Code Quality​

Standards:

  • TypeScript for type safety
  • ESLint for code consistency
  • Prettier for formatting
  • Pre-commit hooks for enforcement

5. Documentation​

Requirements:

  • Clear README with setup instructions
  • Contributing guidelines for developers
  • Changelog for version tracking
  • Technical architecture documentation

These practices are now templates for all new TTF-DDG task development.

Comparison: Old vs. New​

AspectLegacy SystemModern System (TTF-DDG)
TechnologyPure HTML5/JSNode.js + Vite + PIXI.js
StructureInline scriptsModular architecture
DependenciesManual downloadsnpm packages
BuildManual ZIPAutomated with Vite
TestingManual onlyAutomated unit tests
QualityNo metricsCoverage + linting
Dev SpeedSlow iterationFast with HMR
CollaborationDifficultGit workflows
Version ControlMonolithic repoPer-task repos
DocumentationMinimalComprehensive
DeploymentManual processAutomated scripts
MaintainabilityLowHigh

Lessons Learned​

Technical Insights​

The LEAPS modernization demonstrates:

  1. Infrastructure Investment Pays Off: Upfront effort in modern tooling accelerates long-term development
  2. Testing is Essential: Research software needs testing just like commercial software
  3. Developer Experience Matters: Happy developers write better code faster
  4. Standards Enable Collaboration: Shared practices make teamwork effective
  5. Documentation is Development: Good docs are as important as good code

Challenges Overcome​

Node.js Integration:

  • Made Node.js tooling work with LEAPS WebView platform
  • Solved bundling issues for WebView compatibility
  • Maintained backward compatibility with LEAPS infrastructure

Build Complexity:

  • Created seamless development-to-production workflow
  • Automated packaging for LEAPS platform requirements
  • Balanced optimization with debuggability

Transition Management:

  • Migrated existing tasks without breaking changes
  • Trained researchers on new development process
  • Documented legacy system for historical reference

Future Development​

Planned Enhancements​

  • Additional Tasks: More language assessment tasks using modern architecture
  • Enhanced Analytics: Real-time performance dashboards
  • Multi-language Support: Interface translations for diverse populations
  • Cloud Sync: Automatic data backup and synchronization
  • Accessibility: Enhanced support for diverse learner needs

Community Contributions​

We welcome:

  • Bug reports and fixes via GitLab issues
  • Feature suggestions and enhancement proposals
  • New task contributions following established patterns
  • Documentation improvements and translations

Maintenance​

Each task repository includes:

  • Active issue tracking
  • Semantic versioning
  • Regular dependency updates
  • Security patch monitoring

Support & Training​

Getting Started​

  1. Review Prerequisites: Node.js 20+, Python 3 (for local testing)
  2. Clone Repository: Get the task you need from GitLab
  3. Install Dependencies: Run npm install
  4. Start Development: Run npm run dev
  5. Read Documentation: Review README and CONTRIBUTING files

Technical Support​

The TTF-DDG provides:

  • GitLab issue tracking for bug reports
  • Email support for implementation questions
  • Code review for community contributions
  • Documentation updates based on feedback

Training Resources​

  • Comprehensive README files with examples
  • Inline code documentation and comments
  • Example configurations and URL parameters
  • Video tutorials (planned)

Acknowledgments​

Original LEAPS Development: Zurich Education Directorate
Task Modernization: TTF-DDG (NCCR Evolving Language)
Research Applications: LEAPS research team and participating schools
Technical Supervision: NCCR Evolving Language Supervision Team

The TTF-DDG's contribution to LEAPS demonstrates how modern software engineering practices can enhance educational research infrastructure, making it more reliable, maintainable, and effective for longitudinal studies.

← Back to Tasks | View Task Library →