plasma-gamification
Archit SutharGamifying Financial Literacy for Bharat – Interactive Learning through Play Background Financial literacy is a combination of financial awareness, knowledge, skills, attitudes, and behaviours necessary to make sound financial decisions and ultimately achieve financial well-being. It enables individuals to make informed choices, exercise control over personal finances, avoid financial scams, and confidently navigate evolving financial systems. Financial literacy also encourages saving and investment to manage short-term income fluctuations and achieve long-term goals. Financial well-being reflects the ability to handle unexpected financial events, manage financial stress, and confidently use financial resources. Financial literacy policies and programmes ultimately aim to strengthen this individual financial well-being. Different user groups face distinct challenges. Farmers manage irregular and seasonal incomes with limited access to formal finance. Women encounter gaps in digital, financial, and entrepreneurial confidence. Students are forming money habits for the first time. Young adults face scams, impulsive spending, and weak long-term planning. The Core Challenge This hackathon invites participants to design engaging, context-aware, and behaviour-driven gamified solutions that simplify financial concepts and make them actionable in everyday life. Solutions should move beyond awareness and enable learning through exploration, simulation, and decision-making. Teams are encouraged to interpret the problem creatively, combine or adapt user tracks, and explore ideas beyond illustrative examples—provided the solution strengthens financial resilience and promotes behavioural learning. User Tracks Track A: The Farmer Farmers face financial literacy challenges primarily related to managing irregular and seasonal incomes, meeting time-bound expenses, and coping with uncertainty. Key gaps lie in cash-flow management, savings for lean periods, responsible use of credit, and risk protection. Limited familiarity with formal banking, insurance, and digital payment systems often leads to reliance on informal credit and low preparedness for financial shocks. Strengthening budgeting skills, savings discipline, credit awareness, and risk management behaviour is critical to improving stability and resilience across agricultural cycles. Track B: The Woman Women often manage daily household finances while contributing to income generation, yet face gaps in digital confidence, formal financial usage, and long-term planning. Challenges commonly arise in budgeting across multiple needs, separating household and business finances, using banking and digital payment systems safely, and building savings for future security. Enhancing confidence in financial decision-making, strengthening skills in savings, debt management, and digital safety, and encouraging proactive use of formal financial services are central to improving financial control and independence. Track C: The Student Students are at an early stage of developing money-related understanding, habits, and attitudes. Their financial literacy needs centre on basic budgeting, saving, prioritising needs over wants, and safe digital behaviour. Limited exposure to real decision-making often results in weak behavioural control and low awareness of consequences. Building foundational knowledge, encouraging reflective spending and saving behaviour, and fostering positive attitudes toward planning and discipline are essential to shaping healthy financial habits early in life. Track D: The Young Adult Young adults face increasing exposure to complex financial decisions involving income management, credit use, investments, taxes, and digital financial platforms. Common challenges include impulsive spending, vulnerability to scams, inadequate savings, and weak long-term planning. Gaps are often observed in understanding risk–return trade-offs, managing debt responsibly, planning for retirement, and protecting oneself in digital financial environments. Strengthening decision-making skills, behavioural control, and long-term orientation is key to enabling informed choices as financial responsibilities expand. Functional & Technical Constraints The Rule of Three: Integrate at least three financial themes such as savings, budgeting, insurance, investments, retirement, digital finance, consumer rights, or fraud prevention. Rural-Ready Technology: Solutions must be lightweight, low-bandwidth friendly, offline-capable, and rely more on voice and visuals than text. Behaviour Over Theory: Go beyond quizzes and include simulation or decision-based mechanics with meaningful consequences.
Comments (0)
Sign in to leave a comment
Project Tasks21
Implement Theme & Design System
As a frontend developer, I want to implement the ArthaPlay design system so that all pages reflect the correct color palette, typography, and component standards. Apply the SRD color tokens: Background #F4F1E9 (Soft Ivory), Surface #E7D3C5 (Warm Sand), Text #2C2E3E (Midnight Gray), Accent #FF7A5A (Bright Tangerine), Muted #A6A6A6 (Neutral Slate). Set up global CSS custom properties, font families (Inter, system fonts), border radius standards, shadow tokens, and base styles for buttons, inputs, cards, and badges. Remove scaffold pages not required by user flows (generic welcome page, AI assistant page, default settings page). This task must be completed before any page implementation begins.
Implement Admin Scenarios CRUD API
As an admin, I want to use the backend API for scenario management so that I can create, update, publish, and delete scenario content from the admin portal. Implement endpoints: POST /admin/scenarios (create new scenario), GET /admin/scenarios (list all with filters by track and theme), GET /admin/scenarios/{id} (fetch with full edit data), PUT /admin/scenarios/{id} (update content, options, outcomes), DELETE /admin/scenarios/{id}, POST /admin/scenarios/{id}/publish (change status to published). Validate scenario structure (must have 2-4 options, at least one outcome per option, required financial theme tag). Require admin JWT for all endpoints. Support fraud alert scenario type.
Build Login Page
As a user, I want to use the frontend Login page so that I can sign in to ArthaPlay with my mobile number or email. Implement the Login page based on the existing JSX design (Login v3). The page includes: TopBrandBar with logo and language chip, a two-column layout with IllustrationPanel (village illustration, tagline carousel) and LoginFormCard (phone/email input with +91 prefix, password input with show/hide, Sign In CTA, Forgot Password link), SocialLoginDivider with Google and OTP login options, AlternateAuthOptions with Create Account and Admin Portal links, LanguageSwitcher chips (English, हिंदी, தமிழ், etc.), and TrustFooterBar (secure login, RBI compliant, works offline badges). On mobile collapse to single column with banner illustration. Admin flow routes to Dashboard; user flow routes to Galaxy Home.
Implement Localization Content API
As a user, I want to use the backend API for localization so that all scenario text, UI strings, and audio references are served in my selected regional language. Implement endpoints: GET /languages (list supported languages), GET /content?lang={lang} (fetch all UI strings for a language), GET /scenarios/{id}?lang={lang} (fetch scenario content in target language), PUT /content/{lang} (admin: update localization strings). Store translations with fallback to English. Support OTA updates so language packs can be pushed without app update.
Implement Scenario Engine API
As a user, I want to use the backend API for the scenario engine so that scenario content is served dynamically per track and supports offline JSON caching. Implement REST endpoints: GET /scenarios?track={track} (list scenarios by track), GET /scenarios/{id} (fetch single scenario with options and outcomes), POST /scenarios/{id}/response (submit user decision and receive outcome). Support versioned scenario exports for offline SQLite sync. Outcomes must include immediate result, long-term impact score delta, and behavioral tip. Also support fraud alert scenario type for Student track.
Implement Progress Tracking API
As a user, I want to use the backend API for progress tracking so that my saving streaks, decision scores, financial health metrics, XP, and level progression are persisted and synced across sessions. Implement endpoints: GET /users/{id}/progress (fetch all metrics), POST /users/{id}/progress (update after scenario completion), GET /users/{id}/progress/history (trend data for charts). Calculate saving streak, smart decision score, financial health meter value, stress indicator, XP delta, and current level server-side on each update. Support per-track metric schema.
Build Admin Dashboard Page
As an admin, I want to use the frontend Dashboard page so that I can get an overview of platform activity and navigate to content management, localization, and analytics. Implement the existing JSX design (Dashboard v2): sidebar layout with TopBar, Sidebar navigation (Overview, Scenarios, Languages, Analytics), summary stats cards (total users, active tracks, scenarios published, language coverage). Use ArthaPlay design tokens. Responsive: sidebar collapses to hamburger drawer on mobile. Reached from Login when admin credentials are used.
Build Galaxy Home Page
As a user, I want to use the frontend Galaxy Home page so that I can select my learning track by interacting with the 3D interactive financial galaxy. Implement the existing JSX design (Galaxy Home v2): a deep space canvas with four prominent track stars — Green (Farmer), Pink (Woman), Blue (Student), Orange (Young Adult) — with dynamic constellation lines, interactive star zoom-in on tap, time-based color transitions, hover pulse effects, comet progress streaks, and regional voice audio cues. Includes TopBrandBar, WelcomeGreeting overlay, TrackOrbitSelector, ProgressPulse stats ribbon, ActiveMissionBanner, ConstellationHighlights, CometLeaderboard, VoiceAccessibilityBar, and FooterBar. Tapping a star navigates to the Intro Story page for that track.
Implement Offline Sync Engine
As a user, I want to use the offline sync engine so that I can play scenarios without internet and have my progress automatically synced when I come back online. Implement a local data store that caches: scenario JSON bundles per track (including fraud alert scenarios), user progress state, pending decision submissions. On app launch with connectivity, run a background sync job: push pending local decisions to backend, pull latest scenario versions and language pack updates. Use a conflict resolution strategy (last-write-wins for progress, version-check for scenarios). Show a sync status indicator in the UI.
Build Scenarios Management Page
As an admin, I want to use the frontend Scenarios page so that I can manage, create, edit, and publish financial scenario content for all user tracks. Implement the existing JSX design (Scenarios v2): content management table listing all scenarios with track filter (Farmer/Woman/Student/Young Adult), status (draft/published), last updated timestamp. Include 'New Scenario' button and row-level edit/delete actions. Selecting a scenario routes to the Edit Story page. Support search and filter by track and financial theme (budgeting, savings, credit, insurance, digital finance, fraud). Reached from Admin Dashboard sidebar.
Build Profile Selection Page
As a user, I want to use the frontend Profile Selection page so that I can choose my persona (Farmer, Woman, Student, or Young Adult) and receive a tailored financial journey. Display four profile cards with illustrations and short descriptions of each track's unique financial challenges. Selecting a profile routes the user to the Intro Story page for that track. On mobile, display as a scrollable vertical list of cards. This page is reached from Galaxy Home after tapping a star. No JSX design exists — include design step in implementation.
Build Analytics Page
As an admin, I want to use the frontend Analytics page so that I can view user engagement metrics and behavioral improvement indicators across all tracks. Display: active users by track (bar chart), scenario completion rates (line chart), average decision scores per track, savings streak distribution, top-performing scenarios, fraud alert interaction stats, and language usage breakdown. Use chart components with Bright Tangerine accent palette. Support date range filtering (7 days, 30 days, custom). Reached from Admin Dashboard sidebar. No JSX design exists — include design step.
Build Intro Story Page
As a user, I want to use the frontend Intro Story page so that I can watch an engaging narrative introduction for my chosen track before entering scenarios. Implement the existing JSX design (Intro Story v2): animated storytelling screen with character narrator, regional language audio playback, illustrated scenes, and a 'Begin Journey' CTA. Each track (Farmer, Woman, Student, Young Adult) has a unique intro narrative. Include a skip button. Supports offline playback of pre-cached audio and visuals. Routes from Galaxy Home and leads to the first Scenario page.
Implement Analytics Data API
As an admin, I want to use the backend API for analytics so that I can view aggregated user engagement and behavioral metrics across all tracks. Implement endpoints: GET /admin/analytics/overview (total users, active users, scenario completions), GET /admin/analytics/tracks (breakdown by Farmer/Woman/Student/Young Adult), GET /admin/analytics/scores (decision score distribution), GET /admin/analytics/languages (language usage stats), GET /admin/analytics/fraud (fraud alert interaction and success rates). Aggregate data from user progress collection. Support date range query params. Cache aggregated results for 15 minutes to reduce read costs.
Build Languages Localization Page
As an admin, I want to use the frontend Languages page so that I can update and manage localized content strings for all supported regional languages. Display a language selector (English, हिंदी, தமிழ், తెలుగు, ಕನ್ನಡ, मराठी) with a side-by-side translation editor showing the English source string and the target language field. Support bulk import/export of translation files. Show completion percentage per language. Changes sync to backend for OTA delivery to app users. Reached from Admin Dashboard sidebar. No JSX design exists — include design step.
Build Scenario Page
As a user, I want to use the frontend Scenario page so that I can make financial decisions in realistic simulations and see the immediate and long-term consequences. Implement the existing JSX design (Scenario v2): scenario prompt display (e.g. 'You have ₹10,000 before crop season'), three interactive decision option cards, animated consequence reveal after selection, and real-time financial health meter update. Support scenario types per track: Farmer (crop decisions), Student (pocket money allocation, fraud identification), Woman (household budget, business finance), Young Adult (salary management, investment choice). Route to Fraud Alert (Student) or Outcome page after decision. Supports offline JSON-based scenario loading.
Build Scenario Edit Story Page
As an admin, I want to use the frontend Edit Story page so that I can create or modify individual scenario content including prompt text, decision options, outcome logic, and associated audio. Implement a rich form with: scenario title, track selector, financial theme tags, scenario body text editor, up to 4 decision options (each with label and outcome description), consequence outcome fields (immediate and long-term), audio upload for regional language narration, and publish/save-draft actions. Validate required fields before saving. Routes back to Scenarios list on save. No JSX design exists — include design step in implementation.
Build Fraud Alert Page
As a user (Student track), I want to use the frontend Fraud Alert page so that I can identify and respond to simulated financial scams in real-time decision scenarios. Implement the existing JSX design (Fraud Alert v2): TopBrandBar, FraudAlertHero with pulsing warning badge, ScamTypeCards (Fake Scholarship, UPI Fraud, Phishing Link, Lottery Scam), ScamScenarioSimulator with mock device frame and chat bubble, RedFlagChecklist, QuizChallenge with XP rewards, ProtectionTipsStrip, ReportScamCTA, BadgeRewardPanel. Selecting a response triggers animated feedback (correct: star burst, incorrect: shake + correction). Routes to Outcome page after decision. Supports offline JSON-based fraud scenario loading.
Build Outcome Page
As a user, I want to use the frontend Outcome page so that I can view the consequences of my financial decisions and understand their long-term impact. Implement the existing JSX design (Outcome v2): TopBrandBar, OutcomeHero with verdict and comet-streak animation, DecisionBreakdown (Your Choice vs Optimal Choice cards), ConsequenceTimeline (vertical staggered timeline with color-coded nodes), FinancialImpactScore (circular SVG progress ring), InsightCallout with key takeaway, BadgesEarned row, ReplayOrContinue CTAs, ProgressTeaser strip, and Footer. Use tangerine accent for negative outcomes and green for positive. Supports offline display via locally cached scenario outcome data.
Build Progress Page
As a user, I want to use the frontend Progress page so that I can track my financial health metrics and behavioral improvements over time. Implement the existing JSX design (Progress v2): saving streak counter with fire animation, smart decision score with trend chart, financial health meter (color-coded gauge), stress indicator, skill tree (budgeting, saving, risk awareness nodes), and milestone badges for completed scenarios. Support per-track metrics: Farmer (financial health), Student (decision score + badges), Woman (savings streak), Young Adult (financial health + skill tree). Show XP and level progression. Data syncs with backend when online; reads from local cache when offline.
Implement Voice & Audio Playback
As a user, I want to use the voice and audio playback feature so that I can hear scenario narrations and instructions in my regional language without needing to read. Implement audio playback service: load audio files from local cache (offline) or stream from backend storage (online). Support per-scenario regional audio tracks (one file per language per scenario). Integrate with Intro Story, Scenario, Fraud Alert, and Outcome pages. Include playback controls (play, pause, replay) and auto-play on page load with a mute toggle. Ensure audio files are compressed and bundled within the 50MB app size constraint.
No comments yet. Be the first!