This mobile application is a fun and educational math game designed specifically for children. It features a variety of challenges where young users can choose different types of calculations to practice — including addition, subtraction, multiplication, and division.

The app was developed using MIT App Inventor, allowing for a user-friendly interface and smooth gameplay tailored to a younger audience.

The development of the Mobile application

This screen uses a minimal number of code blocks to maintain simplicity and efficiency. The primary function implemented here ensures that when a button is pressed, the app transitions smoothly to another screen — such as the login screen — allowing users to navigate through different parts of the game.

As shown in the image above, the block-based logic clearly demonstrates this functionality, highlighting a straightforward approach to screen switching within the app.

Much like the other page, there aren’t many blocks behind this screen. The blocks ensure that any values stored inside the username_TextBox will be saved into the Tiny_DataBase. It also gets stored inside a global variable, which can be linked between pages if done correctly. Once the button is pressed, it will change the screen to the selection screen.  

The blocks shown above are linked to the four operation buttons: addition, subtraction, multiplication, and division. Each button is programmed to set a global variable (global operation) to match the selected operation when pressed.

After setting the operation, the app immediately navigates to the levels page. The selected operation is carried over using the global variable, allowing the next screen to load the appropriate challenges based on the user’s choice.

This logic was implemented consistently across all four operation buttons, ensuring seamless interaction between screens and maintaining a smooth user experience.

This page demonstrates how the Randomised button is programmed within the app. To enable this feature, two global variables were first defined: one for the random number and another for the operation (both stored as text).

When the Randomised button is clicked, the program generates a random integer between 1 and 4. Each number corresponds to a different operation — addition (+), subtraction (−), multiplication (×), or division (÷).

A large if statement handles the logic, checking the value of the random number and assigning the appropriate operation to the global operation variable. For example, if the random number equals 1, the global operation is set to “+”. This same logic is repeated for all four operations.

Once the operation is selected, the app opens the LevelsPage, passing along the chosen operation using the global operation value. This keeps the experience seamless while introducing an element of surprise and variety for users.

This section of the code handles multiple actions when a level button is pressed. First, four global variables are set using text blocks:

• global Level
• global Operation
• global QuestionTime
• global TimerValue

The global Operation variable is used across multiple screens to maintain consistency in the operation type selected earlier (e.g., addition, subtraction). This ensures that the operation remains linked as the user progresses through the app.

Each level button is configured to assign a specific value to global Level, along with its corresponding time limits. For example:

• Level 1: No time limit
• Level 2: 20-second limit
• Level 3: 10-second limit

These values are stored in both the TimerValue and QuestionTime variables and differ depending on the level selected. This allows the app to dynamically adjust difficulty and pacing.

Finally, each button includes a block that opens the Questions Page, passing along both the global Operation and global Level using a list. This approach allows multiple variables to be transferred together, making the transition between screens seamless and maintaining user context.

The Submit button’s functionality is built to evaluate user input and manage the scoring system. When clicked, the program checks which checkbox (A–D) has been selected and stores that value in the global userAnswer variable.

An if condition then compares the global userAnswer to the global correctAnswer.

• If they match, the user is awarded 10 points for that round.
• If the answer is incorrect, the user receives 0 points.

To ensure only one checkbox can be selected at a time, a separate block of code was created for each checkbox (A through D). Whenever a checkbox is selected, an if statement sets that specific option to true and automatically sets all others to false. This guarantees that only one answer can be submitted per question, avoiding multiple selections and maintaining the game’s logic.

During the development of this screen, multiple global variables were created to maintain functionality across different screens of the app. These variables are essential for dynamically generating math questions and handling user interactions.

To support division questions, a predefined list of equations was manually written, using number ranges between 1 and 12. This ensures all division problems result in whole numbers and can be randomly selected when the game generates a new question.

For each question:

• global Num1 and global Num2 are set depending on the selected operation (addition, subtraction, multiplication, or division), providing values for the equation.
• global correctAnswer stores the calculated answer to the question.
• Three separate variables—global wrong1, global wrong2, and global wrong3—generate incorrect answers by offsetting the correct answer by ±1 or ±2. These are used to populate the multiple-choice checkboxes alongside the correct answer.
• global userAnswer captures the selected user input, which is later compared against the correctAnswer to determine scoring.

Additional global variables, such as global score, global level, and global timerValue, are used to connect the game logic with its difficulty settings. Each level adjusts the time limit and scoring system, ensuring that gameplay scales appropriately with challenge.

By organizing logic through well-structured global variables, the game maintains a smooth, consistent experience across all levels and operations.

The image above illustrates a custom procedure designed to handle three types of operations: randomised, addition, and subtraction. This procedure ensures that the question generation logic adapts dynamically based on the selected operation.

1. Randomised Operation Handling
   When the global operation passed from the selection screen is set to "Random", the procedure selects a random operation symbol (e.g., +, −, ×, ÷) from a predefined list. This makes the gameplay more unpredictable and engaging for users.
2. Addition Logic
   If the selected operation is "+", the procedure calculates the correct answer by adding num1 and num2 using math blocks. The result is stored in the global correctAnswer variable, which is later compared against the user’s response.
3. Subtraction Logic (Avoiding Negative Results)
   To prevent negative answers (which may confuse younger users), a temporary variable is used to reorder the operands. The logic follows this sequence:
   • If num1 is less than num2, their values are swapped.
   • A temporary variable holds the original num1 value.
   • num1 is then set to the larger of the two, and num2 is set to the smaller.
   • This ensures that subtraction always yields a positive result.

This smart handling of values maintains a child-friendly experience by avoiding unnecessary complexity like negative numbers, while also ensuring accuracy across different question types.

The multiplication operation in the application follows a similar structure to both addition and subtraction. It is designed to avoid decimal and negative numbers, making it suitable for the target audience of younger children. The calculation simply multiplies num1 by num2, and the result is stored in the global correctAnswer variable.

To create multiple choice options, three incorrect answers are generated by adding or subtracting 1 or 2 from the correct answer. This ensures the game remains challenging while still being fair and age-appropriate.

This section of the procedure is responsible for generating the randomised math questions that the user will answer. It begins by generating two random integers, num1 and num2, which serve as the operands for the math problems.

Based on the operation selected by the user (addition, subtraction, multiplication, division, or random), the program constructs the appropriate equation using these operands. The logic for each operation follows a similar pattern, ensuring consistency across different types of questions.

Key points of this procedure include:

• Avoiding Negative Results: For subtraction, the operands are rearranged if necessary to prevent negative answers, maintaining simplicity and suitability for children.
• Preventing Decimal Answers: For division, a special method is used (such as selecting from predefined division pairs) to ensure that results are whole numbers, avoiding decimals which could confuse young users.
• Consistency Across Operations: The code structure is duplicated and adapted for each operation type, maintaining the same core logic while accommodating operation-specific rules.

This approach ensures that every generated question is appropriate for the target age group and follows the game’s educational goals.

The code uses a consistent method to identify the operation being performed by checking for both the operation’s symbol (e.g., “+”) and its corresponding name (e.g., “addition”). This dual check is implemented across all four operation types (addition, subtraction, multiplication, and division).

This approach serves two main purposes:

• Error Tolerance: It provides flexibility in case the operation is referenced by either its symbol or its name in different parts of the program, preventing bugs from misnaming.
• Robustness: It ensures that the logic correctly recognizes the intended operation regardless of how it is represented in the code or passed between screens.

By using this method, the program becomes more fault-tolerant and easier to maintain.

The screenshot above demonstrates how the correct answer is assigned randomly to one of the four possible answer slots (checkboxes A, B, C, or D).

• A random integer between 1 and 4 is generated to determine which checkbox will hold the correct answer.
• The correct answer is then placed into that randomly selected slot.
• The remaining three checkboxes are filled with wrong answers, ensuring they differ from the correct one.
• This random placement ensures that the correct answer’s position changes each time a question is generated, preventing users from guessing based on answer placement patterns.

This approach enhances the game’s fairness and unpredictability, improving user engagement.

At the start of this code, several global variables are initialized to manage user data and scoring, including:

• Points this round: Tracks points earned in the current game.
• Correct answer: Stores the correct answer for validation.
• GlobalUsername: Links the user’s identity throughout the app, especially for the leaderboard.
• GlobalScore: Holds the user’s total accumulated points.
• UserAnswer: Captures the user’s selected answer.
• LeaderboardScores: Maintains the scores displayed on the leaderboard.

When the Next Page button is clicked, the code performs the following actions:

1. Adds the points earned this round to the user’s existing total score.
2. Formats and stores the user’s name and updated score as a single string with a hyphen separator.
3. Saves this information using a simple in-app database to persist scores.
4. Opens the Leaderboard page, initializing it with the updated leaderboard scores for display.

This system ensures that scores are accurately tracked, saved, and displayed, providing a seamless and competitive experience for users.

When the Results Page initializes, it retrieves key data passed from the Questions Page using the Get Start Value block with different indexes. These values include:

• Points for this round
• Correct answer
• User’s answer
• Global username

The page then updates the visual elements to provide feedback to the user:

• The Answer Label displays the text:
  "The correct answer is " followed by the actual correct answer, using a Join block to combine the text and value.
• The Points Label similarly shows:
  "Points gained " followed by the points earned in the round, also using a Join block.

To enhance user experience, an if statement checks whether the user’s answer matches the correct answer:

• If correct, a message in green text becomes visible, and the incorrect symbol is hidden.
• If incorrect, the green message is hidden, the incorrect symbol is shown, and a red text message appears.

This approach provides clear, immediate feedback to users about their performance in an intuitive and visually distinct way.

The Leaderboard Page is designed to display a list of users’ usernames alongside their total points earned while playing the game. The usernames and scores are intended to appear in a bullet-point format like this:

Here’s how it is supposed to work:

1. Data Storage and Retrieval:
   Usernames and their corresponding leaderboard scores are saved in a TinyDB database. This data originates from both the Login Screen (username entry) and the Results Page (points earned).
2. Data Processing:
   A loop is set up to process these entries—although currently, it only allows one entry, which is likely a limitation or bug.
3. Data Formatting:
   Each saved entry is formatted as "username – Points". The code splits this string to separate the username and score.
4. Display Preparation:
   The intention is to compile these entries into a bullet-point list with each user and score on a new line.
5. Displaying the Leaderboard:
   Finally, the compiled leaderboard string is set as the text of the leaderboard label, showing all users and their scores.

Current Issue

• The leaderboard does not function properly because of an error in the code responsible for retrieving, formatting, and printing the usernames and scores.
• The loop only allows for one entry to be processed, so multiple users’ scores are not displayed.
• The split and formatting logic may not correctly handle multiple entries or data from the TinyDB, causing the display to fail.