The Math Game

I built this math studying game in 2013 for my little brother, Trevor. He loved it! He's played it for hundreds of hours and solved almost 30,000 problems!

Trevor in 2010
Trevor in 2010
a math problem on the problem page
a math problem on the problem page
charts and graphs of problems completed over time and the distribution of different types of problems
charts and graphs of problems completed over time and the distribution of different types of problems
a video playing on the rewards page
a video playing on the rewards page
1

Solve Math Problems

a math problem on the problem page
a math problem on the problem page
2

Choose and Watch Your Video Reward!

the video selection page
the video selection page
a video playing on the rewards page
a video playing on the rewards page
3

Check Your Stats!

how much time Trevor has played the game and a table of the easiest and hardest questions for him
how much time Trevor has played the game and a table of the easiest and hardest questions for him
charts and graphs of problems completed over time and the distribution of different types of problems
charts and graphs of problems completed over time and the distribution of different types of problems

BREAKDOWN

5,000+ lines of code
PHPMySQLJavaScriptHTMLLessCSS

The Math Game is built on the LAMP stack with some JavaScript for client side features.

Features

Random Choice of Videos - reduce stimming to encourage exposure to a variety of videos while also maintaining choice.
Sandboxing - reward videos auto-play with no controls and auto-return to the problem page when the video's done playing.
Detailed Statistics - number of problems solved, usage over time, time spent on work vs. reward, and more!

Database

User management is done with UserCake 2.0.2 (discontinued since 2017).

Notable game tables in the schema are:

problems - preset problems & answers
settings(user_id) - operators' input ranges, # of problems to solve
videos - youtube video id, meta info to display it
game_state(user_id) - current problem, # of problems remaining
rewards(user_id) - video watched, # of problems solved, timestamp
results(user_id) - problem, how long it took, timestamp

Setup

  1. Set up a MySQL database with the schema in setup/mathgame.sql.
  2. Pre-populate the database with a fixed set of problems (source):
<?php
populateProblems(
  populateOperators(array(
    '+' => 'addition',
    '-' => 'subtraction',
    '*' => 'multiplication',
    '/' => 'division'
  )),
  0, // minimum input value
  99 // maximum input value
);
?>