Math Dojo

A lightweight web app to train your math skills with high-quality mathematics problems, with no login required. Filter problems as you like and have fun solving them for as long as you can. Improve your problem-solving skills by learning from different written solutions. You can open the live demo here.

Overview

Following my first project, I decided to create a web app to facilitate my daily problem-solving exercises. I used to solve competitive programming problems on Codeforces and was amazed by its UI/UX, as it is very lightweight and encourages users to practice more.

I hope this web app can give people a similar experience to what I had while practicing coding and assist them in developing their problem-solving skills.

Technology Stack

Layer	Choice
Hosting	GitHub Pages, with static files pushed directly (no Actions workflow required)
Frontend	HTML, CSS, vanilla JavaScript
Data	JSON, with one metadata file per contest plus one JSON file per year
Persistence	Browser localStorage only

Main Tools

I built this web app using HTML, plain CSS, and vanilla JavaScript. I learned about caching strategies and chunking data for lazy loading to make the web app load faster.

Tool	Note
Grid.js	I used Grid.js, a built-in JavaScript framework, to build the problemset table. This package supports automatic pagination and sorting. Moreover, it is lightweight and easy to edit.
Swiper.js	Some of the problems contain more than one solution, so I use Swiper (like a carousel) to display the solutions.

Functional Requirements

Home (index.html)

• Site title and short description.

Problem Selector (filter.html)

• Dataset selector (Indonesia Regional Competition, AMC problems).
• Selecting a dataset loads data/<contest>/metadata.json and opens the problem list.

Problem List (problems.html)

Table columns:

• Problem ID
• Contest (two prefix words from the split problem ID, e.g. OSN_Regional_2026_20 → OSN Regional)
• Year
• Problem number

Controls:

• Sort
• Problems-per-page selector: 10 / 20 / 25 / 50 / 100 (default: 100)

Pagination below the table:

Previous · 1 2 3 4 5 ... · Next

Problem Page (problem.html?id=...)

Displays:

• Title
• Source
• Statement
• Figure (optional)
• Solution (optional)
• Tags

The page fetches only the content file for the requested problem's year (or data/<contest>/<year>.json directly for small datasets).