Assignment 3 Winter 2025
GUI Development with MAUI
Due Date: (See Slate\ Assignments)
Date: April 2025
Type: Individual Assignment
Weight: 10%
Summary
In this assignment, students implement an interactive racing track simulator game that allows the user
to simulate a race and wager on the results. This program was inspired by the racetrack simulator Lab #1
in the Head First C#, 3rd Edition, page 187. During implementation, students follow the coding
conventions and principles used in class and the object-oriented design shown in Appendix 2.
Submission checklist
✓ The code submission is completed through GitHub Classroom. Ensure that all your local commits
are published in the repository you have started with using GitHub Classroom.
✓ MAUI App solution as a ZIP file that contains all files required to load the project into Rider or
Visual Studio and the GIT repository (.git folder). This ZIP file is only used as a backup.
✓ Video demo of the running application that presents the functionality implemented. The video is
submitted as a link to your student OneDrive account.
IMPORTANT NOTE: Submissions must be made electronically in SLATE and GitHub Classroom. Please
DO NOT email your submission.
Program Functional Requirements
1. The program simulates a racing track game where four racers compete against each other to
reach the finish line of a racetrack.
2. The Race Monitor is the user who is using the application to simulate the race and manage bets
for three players.
3. The program allows three players to place bets on which racer will finish first. The minimum bet
is $5. The users start with a total amount of $100.
4. The race monitor starts the race when all bets have been placed.
5. The SYSTEM randomly advances the racers on the racetrack until the first crosses the finish line.
6. The SYSTEM calculates the wins and losses for each bettor and updates their available cash
balance.
7. The race monitor (the user of the application) restarts the simulator to prepare it for the next
race.
1 Prof. Magdin Stoica PROG 10065 – Interactive App Development
[Link]@[Link]
Assignment 3 Winter 2025
8. The race monitor can customize the names of the bettors, the value of the minimum bet, the
starting cash amount for each bettor and the speed of the simulation, allowing the dogs to race
faster or slower.
9. The SYSTEM keeps track and can display, upon request by the race monitor, the history of bets
for each user, whether they won or lost and their cash amount after each bet.
Programming Concepts
1. Separation of user interface (presentation) and application logic using different classes.
2. Event-driven interactivity with event handlers, layouts, pickers, labels, and buttons.
3. Navigation between multiple pages
4. C# classes: field variables, constructors, properties, and methods
5. C# programming: classes, branching and repetition control structures, exception handling
6. Best practices: debugging, iterative development, separating problem-solving from
implementation by outlining the solutions using comments. Writing professional comments
using XML comments.
7. Manage code using version control systems with Git and GitHub
8. Working with AI for research and learning
Details
Part I (20%): Program Structure. Create the structure of the Racing Track Simulator game to match the
UML class diagram provided in Appendix 2.
Milestone 1. Types definition. Create all the types that represent the user-defined types of the
interactive application. Ensure each type is described using XML comments. Commit
and push your changes.
Milestone 2. Program Structure. Define all relationships for each class. Define field variables and
initialize them in the constructor of each class. Ensure each field variable is described
using XML comments. Commit and push your changes.
Milestone 3. Program Functionality. Add the method declarations for each class. Ensure each
method is commented with XML. Use the comments to articulate each method's
responsibility. Commit and push your changes.
Part II (30%): User Interface Design. Design the main user interface for the simulator using Appendix 1
as a guide/example. Customize the background, the racers, and the position of controls to meet your
goals and vision for the app. The user interface must meet the following requirements:
Milestone 4. Main User Interface
a. Analyze the UI and determine the optimal layout to be used in its design. The layout
should be maintained on screens of different sizes and orientations. To achieve an
optimal design, use a combination of grid layouts, stack layouts, and an absolute layout.
2 Prof. Magdin Stoica PROG 10065 – Interactive App Development
[Link]@[Link]
Assignment 3 Winter 2025
b. When/if the window is resized or shown on a larger screen, ensure the racetrack area of
the UI enlarges while the rest of the UI keeps its layout structure balanced well so that
the window does not have any large unused space.
c. The racers move across a racetrack implemented as an absolute layout.
d. The race monitor selects the user and enters the amount and the racer they want to bet
on
e. Upon entering the best, the application describes the bet the user has placed (e.g. Joe
bets 10$ on racer 1.)
f. Use an image button to start the race.
Part III (30%): Program Features. Implement the racing simulator functionality defined by the program’s
functional requirements 1 – 7.
Milestone 5. Placing Bets
a. Implement the necessary functionality to allow the racing monitor to place bets for the
three players
b. Ensure all input is verified to be correct using custom exception handling. Define a
SimulatorException class and use it to validate the user inputs and any business logic
exceptions that you encounter (e.g. a player trying to bet more money than they have, a
player placing a bet using a negative amount, etc.)
Milestone 6. Race Simulation
a. When the race monitor starts the race, use a timer to advance the racers on the race
track using random distances that are small enough for smooth movement.
b. When the first racer reaches the end of the track, announce the winner.
Milestone 7. Calculate Winnings
a. After the race winner has been announced, calculate the three players' wins and losses
based on their bets.
b. Use the “Bets” dashboard for each user to display how much money they each won or
lost and their new cash balance.
Milestone 8. Simulation Restart
a. Allow the race monitor to restart the race, which resets the position of the racers and
allows players to play new bets.
Part III (20%): Advanced Program Features. Extend the application design to allow the race monitor to
customize the simulation
Milestone 9. Customizable Simulation Options (Functional Requirement #8).
a. Create another page in the project, a Simulation Options Page, which allows the user to
customize the simulation. Design a way for the user to navigate to this page and back to
the main page.
3 Prof. Magdin Stoica PROG 10065 – Interactive App Development
[Link]@[Link]
Assignment 3 Winter 2025
i. The names of each of the bettors
ii. The value for the minimum bet allowed
iii. The initial cash that bettors start with
iv. The speed of the simulation that allows the racer to race faster or slower
Milestone 10. Simulator Analytics Feature (Functional Requirement #9).
a. Create a Simulation Analytics Page, which provides the user with a way to analyze the
simulation. Design a way for the user to navigate to this page and back to the main
page.
i. Show the list of bets each person has made
ii. For each bet, the app shall show whether the bet was won or lost and the total
amount of money the bettor had after the bet.
BONUS (5%). Use the S-Sense app throughout the creation of the assignment to set goals, intentions,
check in with your emotions and thoughts and reflect on the difficulties you’ve faced and how you’ve
overcome them.
1. Create an S-Sense goal to work towards through this assignment. Use the prompt refresh
(circular) button to get ideas of prompts for your S-Sense Goal.
2. Create a draft page for your assignment in Drafts and the S-Sense goal you have identified to it.
3. Set an intention at the start of the assignment
4. Periodically check in with your emotions and add them to your draft
5. Record significant thoughts, aha moments, and self-talk that you engage in while you are
working on your assignment
6. At the end of the assignment, please write a short reflection on the difficulties you’ve faced and
how you’ve overcome them. Pin this reflection to your draft.
7. In the report, add a screenshot of your draft page and copy the contents of your reflection.
Notes:
1. The professionalism of your submission, clarity of written communication is extremely
important. The ability to communicate your knowledge is as important as the knowledge itself.
a. Up to 20% of the mark for any written work can be deducted due to poor presentation /
communication: title page (5%), document organization (5%), layout (5%) and grammar
and spelling (5%).
b. Up to 20% of the mark for a program can be deducted due to poor presentation /
communication: quality of names according to our naming and coding conventions
(10%) and comments (10%).
4 Prof. Magdin Stoica PROG 10065 – Interactive App Development
[Link]@[Link]
Assignment 3 Winter 2025
2. All assignment shall be submitted by the deadline. Late submissions will be penalized with 10%
per day for up to 3 calendar days after which the assignment cannot be submitted anymore. An
email must be sent should you choose to submit a late assignment. If no such emails are
received the solution will be posted. Assignments are not accepted after the solutions have
been posted.
3. This assignment shall be completed individually. Remember that completing the assignment by
yourself will ensure your success on the midterm and final exam. See the Academic Honesty at
Sheridan.
4. Submission is done in electronic format using the SLATE DropBox. DO NOT email your
submission.
1. AI Fair Use Guidelines
Use AI as an assistant to help you overcome roadblocks, review concepts used in the assignment
and learn more about them.
▪ Ask “How do I…”, “What is …”, and “Why…” questions to help you learn.
▪ Ask for a peer review and feedback on how your work can be improved. Use this carefully
and ask follow-up questions about why specific proposed changes are useful. AI makes
mistakes and will not always make positive suggestions or suggestions that are suited to
your level. For better results, you can specify your context and what you are trying to learn
(“I am a computer science student in an introductory programming course, and I am
learning how to program in ….”).
▪ Always check the sources behind the AI output and cross-reference them against what we
have learned in class. If unsure, use our course team's AI channel to ask. Do not blindly trust
an AI answer, as they are known to “hallucinate” and invent things that do not exist,
including sources.
▪ Use Grammarly to ensure your report is clear, concise and free of syntax and grammar
errors.
DO NOT use AI for the following tasks:
Generate any part of the assignment based on assignment text copied and pasted into an AI
query.
Copy and paste significant generated AI output into the assignment. Copying lines of code
summarized by the AI from tutorials is allowed. Copying entire functions, modules, and
classes is not permitted.
Copy and paste AI-generated content as-is without proper citations. The citation must
specify the AI service used with the prompt to obtain the content.
Incorporate any content generated by an AI without a thorough understanding of what it is,
how it works and why it is necessary. You must be able to thoroughly explain any part of
your assignment submission without any assistance.
5 Prof. Magdin Stoica PROG 10065 – Interactive App Development
[Link]@[Link]
Assignment 3 Winter 2025
Appendix 1
A prototypical example of the user interface. Students are encouraged to redesign and make their
application user interface unique and adaptable to different types of devices and platforms.
Figure 1: Racetrack Simulator GUI using XAML
(Head First C#, 3rd Edition, Page 196)
6 Prof. Magdin Stoica PROG 10065 – Interactive App Development
[Link]@[Link]
Assignment 3 Winter 2025
Appendix 2 – Program Object-Oriented Structure
Figure 2: UML Class Diagram Showing Classes and Relationships
7 Prof. Magdin Stoica PROG 10065 – Interactive App Development
[Link]@[Link]