Pasar Saham Virtual — Investment Simulator.

Description

Pasar Saham Virtual is a virtual investing simulator built as a self-contained web app for senior-high-level equivalence education (Paket C). Learners are given a virtual Rp 10,000,000 and manage it across stocks, a money-market fund, gold, and cash through 5 rounds of Indonesian economic-news scenarios, learning about diversification, risk profiles, and inflation along the way. It is an educational simulation only, with fully fictional instruments and prices.

Background

This “One Day One Code” build packages a full finance lesson as a SCORM 1.2 module that can run inside a learning management system while also working standalone. The aim was to let students feel the consequences of allocation decisions safely, through news-driven scenarios, rather than reading about investing in the abstract.

Goal

The goal was to teach practical investing concepts, diversification, risk, and inflation, through an interactive simulation that scores learner behavior, integrates with an LMS via SCORM, and remains fully usable offline as a PWA.

Features

• 5 sessions covering savings versus investing (with an inflation calculator), instrument cards, the core 5-round simulation, portfolio analysis, and real-investing guidance, plus a wrap-up screen.
• An investor-profile quiz that produces a suggested allocation, followed by allocation sliders and SVG charts across 5 news-driven rounds.
• 8 behavior-based badges, for example one that only unlocks if you hold gold at exactly 15% or more during the round where the rupiah weakens.
• Automatic scoring with SCORM integration, where per-session scores roll up into cmi.core.score.raw and a pass is recorded at 70 or above.
• An offline-ready PWA with a cache-first Service Worker, a mobile-first and WCAG 2.1 AA-minded interface, and prefers-reduced-motion support.

Technologies

• Vanilla ES6+ JavaScript with zero external libraries, using one global state object persisted to localStorage, manual screen routing, a shared quiz engine, and inline SVG charts.
• SCORM 1.2 for LMS tracking, degrading gracefully when window.API is absent.
• PWA technologies: a manifest.json and a cache-first Service Worker (sw.js) for offline use, plus HTML and CSS for the mobile-first shell.

How to Run

Clone the shared one-day-one-code repository and open the project’s folder. It has no build step, but it cannot be opened via file:// because the Service Worker and manifest require an HTTP origin, so serve it with a static server such as python3 -m http.server 8000 or npx serve . and open the local URL. Outside an LMS, SCORM tracking is skipped without errors while progress still persists to localStorage. A live version is available at the demo link.

Technical Decisions

The app shell is a set of empty sections filled by JavaScript at runtime, with all learning content (instruments, news rounds, quizzes, and badges) kept in a separate data file so the curriculum is easy to edit. SCORM tracking is designed to fail silently when no LMS API is present, and offline support comes from a cache-first Service Worker whose cache constant is bumped whenever assets change.

What I Learned

I learned how to integrate a web app with SCORM 1.2 and roll session scores up into an LMS, how to build an offline-first PWA with a cache-first Service Worker, and how to model a portfolio simulation with behavior-based scoring driven by scenario data.

Notes

This is part of the shared one-day-one-code repository and is an educational daily build for equivalence education; all instruments, prices, and scenarios are fictional and not investment advice. The project folder also includes a teaching module (Modul Ajar) and a preview image.