10 Steps
Interactive Quiz EngineReal-time scoring and feedback evaluation in game.js
8+ Games
Traditional Activities IndexedFrom Congklak and Egrang to Gobak Sodor and Bentengan
4 Dossiers
Dedicated Deep-Dive PortalsComprehensive history, physics, and rules documentation
6 Breakpoints
Responsive Tailwind MatrixCustom screens from xs (250px) to 2xl (1536px)
60 FPS
GPU-Accelerated MarqueeFluid keyframe translations without layout recalculation
0ms
Zero-Build Runtime LatencyPure vanilla web execution on static edge CDN
The Operational Mandate
Context & High-Stakes Constraints
With the rapid rise of digital screens and mobile entertainment, traditional Indonesian folk games are rapidly fading from the daily lives of younger generations. These games are far more than idle pastimes — they represent centuries of intangible cultural heritage, teaching essential life lessons such as patience, balance, tactical foresight, and community solidarity. Pusakaku was conceived to reverse this trend: a digital sanctuary that documents, celebrates, and revitalizes traditional Indonesian games through modern web experiences.
Core Mandate: Build an accessible, visually appealing cultural platform that pairs in-depth ethnographic game archives with a gamified 10-stage quiz engine to educate children, parents, and educators about Indonesia's folk game heritage.
02FOLK HERITAGE & GAMIFIED INTERFACES
The Pusakaku Cultural Experience in Action
Explore the core interactive touchpoints of Pusakaku — from gamified cultural quizzes and deep anthropological game profiles to dual-lane kinetic marquees and responsive heritage typography.
🔒pusakaku.local/index.html
01 / 05Official Brand Presentation
Official Project Showcase & Folklore Flyer
Official project presentation flyer showcasing Pusakaku's cultural preservation mission, interactive folklore encyclopedias, and traditional Nusantara game archives.
◆ Authentic Nusantara Heritage Visual Identity◆ Traditional Games Educational Preservation◆ Gamified Interactive Cultural Learning
03CAPABILITIES & WORKFLOW
Core Capabilities & Heritage Education Workflow
Pusakaku bridges the generational divide by transforming ancient Indonesian folk games into engaging, interactive digital experiences.
Gamified Cultural Assessment
Dynamic 10-stage quiz state machine evaluating traditional folk game comprehension with automated scoring and constructive feedback.
Anthropological Game Archives
Detailed dossiers on Congklak, Egrang, Kelereng, and Layang-Layang analyzing origins, cultural philosophies, and physical benefits.
Kinetic Marquee & Visual UX
Dual-lane infinite carousel displaying regional folk activities with hardware-accelerated CSS animations and responsive hover overlays.
Cultural Preservation Advocacy
Structured educational initiative promoting traditional physical play as a healthier, community-oriented alternative to excessive screen time.
8 Mission-Critical Modules
Each module is engineered with robust transactional boundaries, modular isolation, and comprehensive audit trails.
MODULE // 01 OF 08Interactive Assessment
Gamified 10-Stage Cultural Quiz Engine
Multi-step quiz module (Pages/game.html) designed to test and reinforce knowledge of Indonesian traditional game rules, cultural history, and regional origins.
- State-driven question pagination using showQuestion(index) with next/previous bounds checks
- Real-time evaluation logic aggregating 10 points per correct answer up to a 100-point ceiling
- Dynamic qualitative feedback generator differentiating high mastery (≥70) from retry guidance
- Full quiz reset capability (restartQuiz()) clearing radio selections and restoring initial state
Traditional Game Discovery & Educational Assessment Lifecycle
From cultural exploration to interactive assessment — guiding users through an engaging cycle of historical learning and gamified reinforcement.
Stage 01Cultural Immersion
Anthropological Game Discovery
User explores the games catalog and dedicated deep-dive portals, reading about historical origins, physics principles, and cognitive benefits.
Browse Catalog → Select Game Profile
Stage 02Gamified Evaluation
10-Stage Interactive Assessment
User launches the quiz engine in game.html, answering 10 progressive questions covering game rules, regional origins, and material craftsmanship.
Complete 10-Question Quiz → Submit Form
Stage 03Advocacy & Action
Real-World Play & Screen-Time Reduction
System tallies score out of 100, delivers qualitative feedback, and encourages users to organize physical play sessions with friends and community.
Review Score Feedback → Share & Play Outdoors
Folk Heritage Authenticity & Child Development Guarantee
Pusakaku serves as an authentic educational bridge. The platform synthesizes peer-reviewed folklore research with child psychology insights, ensuring that every game record, rule explanation, and quiz metric accurately preserves Indonesia's intangible heritage while promoting active social development.
04SYSTEM ANATOMY & ARCHITECTURE
Tailwind Semantic Web & Gamified Quiz Architecture
Engineered with a clean separation between multi-page semantic HTML5 views, utility-first Tailwind CSS styling sheets, a lightweight JavaScript quiz state machine, and custom TrueType typography.
Pattern: Semantic Web Architecture + Gamified Assessment Engine
Protocol: Client-Side DOM Manipulation & State Paging
Client Presentation & Semantic Views
HTML5 + Tailwind CSS v3.4.17Multi-page semantic portal (index, game, pagecongklak, pageegrang, pagekelereng, pagelayang) styled with utility classes and custom responsive breakpoints.
Interactive Quiz State Machine
Javascript/game.jsCentralized quiz controller managing question pagination (showQuestion), score calculation, feedback strings, and radio form resets.
Preloader & Entry Choreography
Javascript/hello.jsAsynchronous text-stepping intro curtain executing on window.onload, transitioning gracefully into the landing view via CSS translate transforms.
Kinetic Motion & Styling Layer
CSS3 Hardware-Accelerated KeyframesHardware-accelerated marquee carousel (slide-right, slide-right2), wave animations, pulse indicators, and hover-zoom scaling.
Cultural Typography & Vector Layer
Font/Yogyakarta.ttf & SVG IconsEmbedded custom TrueType display typography paired with local SVG illustrations, regional photography, and cultural badges.
Curated Technology Stack
A modern engineering stack combining high-throughput user interfaces, modular backend architecture, and resilient data layers.
Frontend & UI Architecture
HTML5Semantic Markup across 6 Cultural & Game Portals
Tailwind CSS v3.4.17Utility-First Responsive Styling with 6 Custom Breakpoints
CSS3 KeyframesHardware-Accelerated Marquee & Pulse Animations
Yogyakarta FontCustom Embedded TrueType Typography ('Yogyakarta')
Vanilla JavaScript (ES6+)Quiz Pagination State Engine, Scoring & Preloader Intro
Content & Ethnographic Research
Mancala / Congklak ResearchHistorical Documentation of Mathematical Folk Play
Vestibular Balance StudiesAnalysis of Motor Coordination in Egrang & Bakiak
Kaghati Kolope LoreWorld's Oldest Kite Folklore from Muna Island, Sulawesi
Screen-Time AdvocacyPedagogical Framework for Screen-Time Reduction
Tooling & Deployment
Node.js & npmPackage Management & Tailwind Build Automation
VS Code Live ServerLocal Development Server Environment
Git & GitHubVersion Control & Open-Source Collaboration
Vercel / Static EdgeHigh-Performance Edge CDN Static Deployment
Codebase Structure & Data Models
Clear boundary separation between system components, paired with modular schemas and structured repositories.
📁 Root & Pages/ (Core Portals & Game Dossiers)
├──index.html — Main landing portal with hero, marquee, about, and FAQ
├──Pages/game.html — Interactive 10-stage gamified cultural assessment quiz
├──Pages/pagecongklak.html — Congklak (Mancala) history, rules, and mathematical lore
├──Pages/pageegrang.html — Egrang (bamboo stilts) balance physics and motor skills
├──Pages/pagekelereng.html — Kelereng (marbles) precision geometry and tactical rules
├──Pages/pagelayang.html — Layang-Layang (kites) aerodynamics and Kaghati Kolope history
Database Entities & Schema Models
Data Model: TraditionalGame
Represents indigenous folk game records with title, regional origin, material equipment (bamboo, cowrie shells, glass), required player count, and developmental values.
Data Model: QuizQuestion
Stores assessment items with prompt text, 4 multiple-choice options (a-d), correct answer key, and historical context explanation.
Data Model: UserQuizSession
Tracks transient assessment state: selected answers array (q1-q10), computed score (0-100), completion timestamp, and qualitative feedback string.
Data Model: CulturalEvent
Captures preservation workshops, school festivals, and regional folk game tournaments with organizer, location, date, and target age group.
05SECURITY, API & PRODUCTION IMPACT
Hardened Perimeter & Data Safety Standards
Client-side architecture ensuring zero telemetry intrusion, isolated state memory, and secure static transmission.
API Endpoints & Routing Architecture
Interactive Quiz Engine (Client State)
POSTsubmitQuiz()Evaluates radio inputs across q1-q10, calculates score out of 100, and displays qualitative feedback
POSTrestartQuiz()Resets currentQuestionIndex to 0, clears checked radio buttons, and hides result panel
Cultural Portals & Game Dossiers
GET/Pages/game.htmlServes 10-question traditional game quiz interface
GET/Pages/pagecongklak.htmlDelivers deep-dive historical dossier and rules for Congklak
GET/Pages/pageegrang.htmlServes history, balance physics, and motor coordination guide for Egrang
Enterprise Security & Governance Standards
Client-Side Memory Isolation
All quiz calculations execute locally within browser memory without sending user responses to unverified third-party endpoints, preserving absolute visitor privacy.
Zero-Tracker Privacy Footprint
The application operates with zero behavioral tracking cookies, commercial ad beacons, or telemetry scripts, ensuring a safe educational environment for children.
Sanitized Static Distribution
Deployed as pre-compiled static assets served over TLS 1.3 encrypted HTTPS channels, inherently immune to server-side SQL injection or remote code execution vectors.
Defensive DOM Injection
Dynamic feedback messages and score figures are rendered strictly through textContent properties to prevent Cross-Site Scripting (XSS) risks.
Engineering Challenges & Production Results
How critical technical bottlenecks were overcome and verified under real production conditions.
Challenge // 01
Engineering an interactive multi-step quiz interface using pure vanilla JavaScript without introducing bulky state management libraries. Solved by designing an element display toggle function (showQuestion) linked to a currentQuestionIndex counter, paired with radio-selector querying and automated form clearing on restart.
Challenge // 02
Maintaining smooth 60 FPS performance for dual-lane continuous marquees displaying high-resolution cultural photography. Solved by leveraging GPU-accelerated CSS keyframe translations (slide-right, slide-right2) that bypass CPU layout recalculation.
Challenge // 03
Synthesizing authentic anthropological lore with accessible child-friendly explanations. Conducted thorough research into game origins — such as Congklak's Mancala ancestry and the ancient Kaghati Kolope leaf kite of Muna Island — presenting complex historical data in concise, engaging narratives.