Multiplication Practice: A Dive into Building a Simple Multiplication Quiz Game for Kids

full view of my app with game in progress

Abstract:
This article explores the journey of conceptualizing, designing, and deploying a children-friendly front-end web application - Multiplication Practice. It delves into the technicalities of front-end development, challenges encountered, solutions implemented, and the educational gains from completing the project.

Introduction:
In my ongoing pursuit of Tech learning, I recently ventured into exploring the Open Source Ecosystem. I looked towards making my first few open-source contributions. While exploring repositories suitable for newcomers, I stumbled upon Prajwalpd7’s “Multiplication Flash Cards Game” project. As games have been a prominent part of my portfolio, encountering a similar project, a lightweight build consisting of a one-page structure with embedded CSS and JavaScript, sparked instant interest and excitement.

full view of Prajwalpd7’s app with game in progress

I follow several Tech Developer Advocates on Twitter. Particularly those of Nigerian descent. Arit Amana is one of them. And so around this same time, I encountered a tweet by Arit announcing a Saturday Coding Challenge. Balancing my eagerness to avoid horizontal skill enhancement and rather focus on substantial vertical progression, I opted to engage with this challenge, pushing me to work with concepts I seldom explore. I recognized completing and sharing my submission could forge a connection, understanding the pivotal role networking plays in aiding newcomers in securing their initial Tech jobs.

Arit Amana's Saturday Coding Challenge

Project Ideation and Planning:
Inspired by Prajwalpd7’s “Multiplication Flash Cards Game” and integrating user stories from Arit Amana's Saturday Coding Challenge, I conceived the idea to craft an app that amalgamates both concepts. Building an app to fulfill the Saturday Coding Challenge requirements while offering a rewarding educational tool for children to enrich their multiplication skills became the focal ambition.

The app's landing page serves the Saturday Coding Challenge's use cases, presenting users with the opportunity to hypothetically support a children's charity through subscription plans ($29/month, $39/month, $59/month). Subsequently, users can select their billing date, receive confirmation of their choice, and view the amount owed and the upcoming billing date. Additionally, users have the option to skip donations and proceed directly to the game. The game itself offers three distinct difficulty levels, each featuring a 10-round quiz to test the users' proficiency in multiplication.

app building - project structure in VsCode

Technology Stack:
Unlike Prajwalpd7’s basic game structure with code consolidated in a single index.html file, I opted for a modular approach to captivate the focus group - children. Leveraging React.js in line with Next.js Framework guidelines, I emphasized code reliability, maintainability, and efficient development by adopting TypeScript for static typing in JavaScript. Furthermore, Tailwind CSS streamlined rapid development through its utility classes directly applied within the HTML structure.

react typescript function snippet with tailwind css styling

Development Process:

• In the realm of front-end web development, diverse approaches exist for single actions. While Zustand and Redux are advocated for global state management, the Context API proved more than adequate for this app, facilitating state access and updates across all components.
• On the landing page, I employed two <div>s for a clever modal implementation. It showcased the available choices, rendered as a dropdown list using <select> and <option> elements.
• For functionalities involving date selection, I seized the opportunity to refresh my knowledge by relearning and applying several methods, including utilizing the Date object to power the app's logic. Methods such as toDateString() and setDate() were instrumental in this process.
• The modular code structure ensured that each related logic was compartmentalized into distinct components, facilitating a coherent and organized development approach.
• The app's central logic flow enabled users to choose between three sets of multiplication tables. Upon selection, a random question was generated based on the chosen group. Storing the correct answer in a variable, I employed four randomly generated offsets to generate alternative answer choices around the correct answer. Rendering all answers in a radio input type, I integrated a score variable to track correctly chosen answers on each attempt.

my app's landing page modal

Design and User Experience:

• Responsive web development necessitates the use of breakpoints to adapt websites to various screen sizes and devices. My endeavor was to test a responsive breakpoint system that sets 320px as the minimum design width, aligning with best practices.
• Additionally, I meticulously designed the project to utilize the full width of the body tag, dynamically adjusting component sizes for different breakpoints. This professional approach contrasts with my prior projects and establishes a uniform, consistent, and polished appearance.

app's game difficulty levels

Challenges Faced in Testing and Deployment
The development of this application did not pose an overwhelming challenge due to the relatively straightforward logic behind it. Successfully running the code in both the build and production stages, coupled with Vercel's seamless deployment handling, showcased the efficacy of the implementation. The use of TypeScript ensured defensive checks throughout the application's lifecycle, mitigating any potential system breaks.

my app's game over modal



Knowledge, Growth, Summary
Crafting user-friendly games aligns with my proficiency. And having the opportunity to continue that streak with this project was deeply satisfying. User and child feedback reflected an enjoyable experience, embracing the gamification of education. The mobile-friendly nature of the site enhanced the conventional gaming experience.

Personally, the cognitive engagement in this project solidified my front-end development knowledge. My focus now shifts towards backend web development, initiating the journey with learning Node.js and Express to augment my value as a full-stack developer.

References and Resources:
The project’s GitHub repository can be found at this link: https://github.com/traez/multiplication-practice
The live site is hosted on Vercel and accessible here: https://multiplication-practice-traez.vercel.app