A game where you can test your mental arithmetic skills (mathify.net)

Saron Sathasivam

Saron Sathasivam

— 4 min read

I noticed that my arithmetic skills were declining over the years.

When I was in primary school I always used to be the first student to hand-in my SIKORE sheet.

A game where you add, subtract, multiply or divide by the result you got from the last problem

SIKORE

Back then I didn't know why I was addicted to this game. But now I completely understand.

Everytime you got an answer right, there was this tiny dopamine rush. It was a perfect blend of challenge and reward. It kept you engaged, tested your speed and accuracy. And when combined with competition (your classmates) it created an incredibly motivating learning environment.

Mental arithmetic game

I'm a firm believer that if you want to learn something (and possibly be the best at it) you need to have exceptional knowledge of the basics.

In Muay Thai this would be:

  • Your stance
  • Footwork (lateral, pivot)
  • Distance management
  • Jab, Cross, Hook
  • Kicks, Elbows
  • Clinch

If you have the basics down you will do great with the more advanced stuff.

So I thought why not create a similar game that gives you the same dopamine hit and feeling of achievement afterwards.

Requirements

  1. The web-app needs to be fast and simple
  2. Backend written in Flask
  3. Frontend written in HTML/CSS
  4. Frontend operations in JS
  5. Ranking data saved in a CSV and displayed after each game
  6. Version control with git

Game Logic

You type in your name, which gets saved in the CSV file. And press "Start Game".

You will then see the arithmetic question pop up. Addition, Subtraction, Divison and Multiplication. Once you click the field the 60 second timer starts.

Once the timer reaches 10 seconds it starts to turn orange in color. Once it reaches 5 it turns red.

If you get a question right the counter will add 1 point to your score.

If you get a question wrong the counter will subtract 2 points

At the end of the game you will see the leaderboard with peoples' rank, name, score and date.

Now it's not the same as SIKORE yet because it doesn't take the answer of the previous question as the first number of the next question. But at the moment this will do.

Coding with Cursor

Coding this game was pretty easy with the help of Cursor.ai. You type in your requirements, your preferred tech stack, and explain how the game should work in detail.

I'm pretty sure that I could've created this game in one shot with a lengthy, detailed command, but this was my first time using Cursor.

It basically created the whole backend in Flask, configured all of the routes, and then proceeded to create the base HTML file (base.html) and included the routes' functions via the Jinja2 templating logic.

I then instructed it to make the frontend prettier with Bootstrap (CSS library) and some custom styling for the leaderboard and buttons.

Lastly, there was just the frontend operation logic, which is done in JS. One file handles all of the button actions, text field inputs, and resets the game after one successful playthrough.

(I'll make the source code public, need to learn how GitHub works)

Making it publicly available

The easiest part was making it publicly available.

I bought the domain "mathify.net" on Godaddy for 4 bucks a year. Then I spun up a virtual private server (VPS) on Digital Ocean which costs 2 bucks a month.

I installed nginx and configured it to force HTTPS and accept the domain name.

Routed mathify.net to my VPS' IP-address. So you can just type it into your browser search field.

I then transferred the files from my laptop to the server via SCP and installed all Python dependencies with:

$ pip install -r requirements.txt

I started the service and voila!

The site is online.

Summary of this tiny project

Cursor is here to stay. Genuine applause to the Cursor devs; they made it possible for someone with medium knowledge of coding to write and ship their first product.

If you can clearly formulate your project's requirements and know what your tech stack does (reading the documentation is a must), it's a piece of cake to ship. Once you understand how to connect a SQL database to your program, it's even possible to make a simple CRUD app.

This project made me realize that coding can be fun. It's also very easy to get into a flow state.

My current workflow:
1. Tell cursor my requirements and tech stack
2. Let it to the grunt work by writing the code
3. Let it explain how the code works and how files/functions interlink with each other
4. Go into files to see the logic
5. git add . && git commit -m "description of the things i changed in detail"
6. Build new features or functions
7. Repeat

This project is very small and simple, but it gave me the confidence to build bigger things—things that could actually solve real-world problems.

Also currently learning Web-dev security fundamentals (give me some time)

Excited to see where it takes me.

Read more