sureshnepal/dzo_learn

Purpose and Runtime

Dzongkha Learn is a static, browser-only prototype for Level 1 Dzongkha alphabet practice. It runs directly from index.html, with Vue 3 and Tailwind CSS loaded from CDNs; there is no build pipeline, server application, authentication, or backend.

Entry and UI Composition

index.html is the browser entry point and hosts the Vue template, CDN dependencies, and script/style inclusion. The application UI and screen-level behavior are owned by js/app.js; supplemental visual behavior and animations reside in styles/custom.css.

Application Orchestrator

js/app.js creates the Vue application, coordinates onboarding/profile display, game-mode selection, question presentation, answer feedback, completion screens, and live XP rendering. It is the boundary between reactive UI state and the domain-oriented game/progress modules.

Game Session Engine

js/gameLogic.js defines the mechanics for the two modes: alphabet recognition and sound matching. It generates five-question sessions from alphabet data, produces four answer options, evaluates selections, tracks session state/score, and applies the configured XP-per-correct-answer rule. This module should remain independent of DOM/Vue rendering where possible.

Learning Content and Configuration

data/alphabets.json is the primary content catalog: character glyphs, transliterations, descriptions, difficulty, and referenced pronunciation audio paths. data/lessons.json supplies level/game metadata such as game IDs, question counts, and XP configuration. The runtime loads these static JSON resources, making content expansion primarily data-driven.

Progress Persistence Boundary

js/userProgress.js encapsulates profile and aggregate progress persistence through the browser Local Storage API. It stores the username, total XP, current level, completed sessions, games played, and last-played time under dzongkha_learn_user_data. This is the sole persistence mechanism and is local to a browser/device; clearing storage resets user state.

Primary Flow and External Dependencies

At startup, the browser loads index.html, external Vue/Tailwind CDN resources, local scripts, and JSON content. The user establishes or restores a local profile, selects a game mode, and starts a generated session. Each answer flows from Vue UI (js/app.js) to session evaluation (js/gameLogic.js); correct results increase XP and update persistent progress (js/userProgress.js), then UI state refreshes. Audio playback uses each alphabet’s audioFile reference from data/alphabets.json; referenced assets/ files are not present in this repository tree, so audio is an optional/missing static-resource boundary.