MarketQuest — Investment Education Board Game for Kids

Why I Built This

In April 2022, Japan’s revised Course of Study made financial education mandatory in high school home economics classes. The goal was noble: equip the next generation with investment literacy in a country where household assets are overwhelmingly held in cash savings.

But there was a fundamental problem. Most adults in Japan don’t understand investing themselves. According to surveys by the Bank of Japan, over 70% of Japanese household financial assets sit in cash and deposits, compared to roughly 13% in the United States. Parents can’t teach what they don’t know, and textbook explanations of “diversification” and “risk-return tradeoffs” don’t stick with children.

I wanted to solve this differently. Instead of explaining investment concepts, I wanted children to experience them. What if a child could live through the Japanese bubble economy, the Lost Decade, the Lehman shock, and COVID-19 — all in a 30-minute board game?

That was the starting point for MarketQuest.

---

A Decade-Long Journey: From Physical Board Game to Browser App

2015: The Original Concept

MarketQuest didn’t start as software. In 2015, I designed a physical board game — a sugoroku where players would learn about asset management by rolling dice and responding to economic events. I drew icons by hand, designed board layouts on spreadsheets, and wrote out the rules for different asset types: cash, stocks, bonds, gold, and real estate.

The core educational idea was already there: players start with a fixed amount, traverse a board divided into economic eras, and face events that teach them about booms, recessions, diversification, and risk management. But a physical board game had severe limitations — it couldn’t simulate dynamic stock prices, couldn’t enforce complex rules automatically, and couldn’t reach children beyond a single classroom.

2024 April: Digital Prototypes

In early 2024, I began converting the concept into digital form. This phase produced several experimental prototypes:

• Kamishibai (slideshow) prototype: A simple HTML5 narrative that walked through economic events like a picture-story show, testing whether the educational content was engaging
• Counter Game: A stripped-down game loop testing dice rolls, position tracking, and basic event triggering
• News Site with Phaser: An early attempt at rendering the board game using Phaser 3, with a news-ticker style UI

In parallel, I built a Python data pipeline to generate realistic game content:

• Scraped historical events from Wikipedia covering 1900 to present
• Compiled macroeconomic indicators (Nikkei 225, CPI, GDP growth rates) from 1953 to 2022
• Simulated stock price movements using normalized economic data
• All this data fed into the event system that powers the game’s historical accuracy

2024 November-December: The Final Product

With validated game mechanics and a rich dataset, I built the production version using a modern web stack. The key architectural decision was creating a framework-independent game-core — pure TypeScript modules that handle all game logic without depending on any UI framework.

---

How It Works

The Game Board

Players start with 1,000,000 yen and traverse a 12-cell circular board. Each loop represents one year. The board’s composition changes dynamically based on the current era — during boom periods, there are more bonus and dividend cells; during recessions, more bankruptcy and tax cells appear.

The game covers selectable time spans:

• Short: 2011-2020 (10 years, ~15 minutes)
• Medium: 2001-2020 (20 years, ~25 minutes)
• Long: 1980-2020 (41 years, ~40 minutes)

Nine Cell Types

Cell Type	What Happens
News	A real historical event appears. Economy shifts. Stock prices move.
Dividend	Receive dividends based on your stock holdings.
Bankruptcy	One of your stocks goes to zero. Lesson: diversification matters.
IPO	A new stock unlocks. Opportunity to invest early.
Bonus	Receive extra cash (New Year’s money, work bonus).
Tax	Pay taxes proportional to your assets.
Chance	Random events — individual stocks boom or crash depending on the economy.

Six Fictional Stocks + Gold

Each stock represents a different industry sector with distinct risk profiles:

Stock	Sector	Risk	Unlock
Minnano Index	Market-tracking	Low	Start
MoguMogu Foods	Food & Beverage	Medium	Start
BiriBiri Energy	Energy	Low-Medium	Start
RoboRobo Works	Manufacturing / AI	Medium	Start
PikoPiko Games	IT / Gaming	High	IPO
KiraKira Fashion	Apparel	High	IPO

The index fund intentionally has the lowest volatility and cannot go bankrupt — reinforcing the educational message that diversified index investing is safer for beginners.

Economic Phases

The economy cycles through three phases — Good, Normal, and Bad — driven by real historical events. During a Good phase, stock booms are more likely (70% chance vs 30% crash). During a Bad phase, the ratio inverts. Children learn intuitively that economic conditions affect investment outcomes.

---

Architecture

Game-Core: Framework-Independent Logic

The most important architectural decision was separating game logic from the UI completely:

game-core/          (Pure TypeScript, zero dependencies)
  types.ts          Type definitions for all game entities
  engine.ts         Game state machine, turn processing
  board.ts          Board generation with era-based cell distribution
  market.ts         Stock pricing, trading, portfolio calculations
  events.ts         Historical event data, random event generation

This separation means the game logic can run anywhere — browser, server, or even a future React Native port. All 19 unit tests run against game-core directly, without needing a browser or UI framework.

Rendering Layer

• Phaser 3: Handles the visual board, dice animation, token movement, cutscenes, and sound effects
• Next.js 14 (App Router): Provides the application shell, routing, authentication pages, and ranking display
• Tailwind CSS: UI styling for all non-Phaser components

Backend Services

• Supabase: Authentication (Google OAuth, email/password), score storage, and online rankings
• Prisma + SQLite: Local data management for news events and game configurations

PWA

MarketQuest is a Progressive Web App with a service worker and manifest, installable on iOS and Android home screens for an app-like experience.

---

Trilingual Support

The game supports three language modes:

Mode	Target	Characteristics
Japanese	General	Standard Japanese text
Kids Mode	Ages 7-12	Hiragana-focused, simplified vocabulary
English	International	Full English localization

All text is managed through locale dictionaries. The game-core returns only translation keys, and the UI layer resolves them based on the selected language mode.

---

Play MarketQuest

MarketQuest is live and free to play. Try rolling the dice, navigating Japan’s economic history, and see how much you can grow your portfolio.

---

What I Learned

Game Design Requires Ruthless Simplification

The original 2015 board game had stocks, bonds, real estate, gold, savings accounts, and insurance. The final digital version reduced investment options to six stocks plus a real estate system. Every removed element made the game easier to understand without losing educational value. In educational game design, clarity beats completeness.

Separate Logic from Presentation

Building game-core as a pure TypeScript library with no UI dependencies was the best architectural decision in this project. It made the game testable, portable, and maintainable. When I switched from a 40-cell linear board to a 12-cell circular loop mid-development, only board.ts and engine.ts needed changes — the market logic, event system, and all UI code remained untouched.

Historical Data Makes Education Stick

Children remember the Lehman shock not because someone explained it, but because their virtual portfolio dropped 30% in a single turn. Anchoring abstract concepts to real events dramatically improves retention.

---

Development Process in Detail

I documented the full development journey in a 3-part blog series.

Part	Topic
Part 1: From Board Game to Browser	The origin story, 2015 concept, and why financial education matters
Part 2: Building the Game Engine	Architecture decisions, game-core design, and Phaser 3 integration
Part 3: Data, Auth, and Deployment	Python data pipeline, Supabase auth, PWA, and trilingual support