-
-
The basic pre-game configuration. Times tables on a standard slide board
-
Swap mode allows for quicker games
-
Roman numbers take a bit to getting used to
-
Congratulations, you solved a game
Inspiration
For my contribution, I focused on what I do best - design a fun educational game that challenges kids to play, and to learn while they are planning.
I was inspired by my nephews who are currently in elementary school. A big theme in their math education is memorizing times tables - a repetitive and boring chore that is nevertheless crucial for building a solid math foundation.
With the 1x1 (read: Einmaleins) Slider Puzzle, I aim to turn this chore into fun. By playing and competing for a top spot on the leader board, kids reinforce their times tables without even realizing how recall is improving.
What the name means
Kleines Einmaleins, or short 1x1, is what German kids call their Times Tables. Of course, there is also the "großes Einmaleins", which means that numbers go from 11 to 20.
What it does
During initialization, the board is filled with problems and solutions of the kind 5 x 6 = 30. Then the solutions are shuffled and the clock starts ticking... The player now has to push the solution tiles back towards the slot with the matching problem.
Younger kids that haven't covered multiplication yet can switch to addition. There a typical problem might be 5 + 8, which needs to be matched up with the answer tile 13.
At any level players can opt for larger operands to solve more complex problems such as 13 x 17 = 221. (Großes Einmaleins!)
Math cracks and computer science geeks might enjoy shifting to Roman numbers (79 would match Roman number LXXIX), binary numbers (79 = 1001111) or hexadecimals (79 = 4F).
Each mode has a separate leader board and personal history. If competition is too stiff and a player can't make it onto the leaderboard, they can always switch to a harder setting where the top spot might still be easier to beat ;-)
The timestamped local history can be used as a bargaining chip if necessary. ("Look mom, I just played six games. I don't need to practice for the pop quiz with you...")
On the result page, the players see their time and number of moves. Maybe they even achieved a new personal best.
😎 Secret postscript, for grown-ups only 😎
As any player will discover, puzzling and thinking is DAMN HARD. One of my first test players happened to be a university professor who nailed the math but took 304 slider moves to solve the puzzle.😳
To make sure the puzzle action is not distracting from the educational effect, I've added a Swap mode. This mode has the same mechanics as the Slide mode except that in Swap any tile can be swapped into the free spot from any position. This mode is quicker to play and exercises the math muscle more than the puzzle muscle. 💪
How I built it
I love the look and feel of the Dashatar VGV demo game. Likewise, at the technical level I am impressed with the VGV architecture. I, therefore, decided to base my work on the demo implementation and to gracefully modify and extend the codebase to suit my needs.
Main principles:
- Production-ready code (scalable & maintainable) and a UI that looks finished and professional
- Use best coding, design, and devops practices
- Don't cut corners, write code that could pass a code review in a work setting
- Study the demo code for new ideas and design patterns
- Use standard libraries and techniques that can be reused in other flutter projects
Some of the tools and libraries used:
- Translation and language toggle with standard internationalization library
- Responsive design, tuned to 4 screen sizes and thoroughly tested
- Anonymous authentication with Firebase Auth
- Automatically generated user handles to improve gaming experience while protecting underage users.
- FireStore data store for server-side storage and leader board
- Shared prefs for local history
Challenges I ran into
The biggest challenges presented themselves more around product design:
Both my countries of residence (Germany and South Africa) have strict laws around privacy and protection of minors. To avoid legal trouble caused by sloppy Ts&Cs or privacy policy I opted against full authentication and for anonymous accounts.
I also decided against user selected player handles and for automatically generated handles to avoid exposing minors to unfiltered user input in the leader board.
The gaming experience would have benefitted from some fresh graphic and sound art. However, I am a backend engineer and creating art is outside of my core skill set.
The competition UI looks a bit overloaded. This is because for the demo I want to showcase as many of the added features as possible. IRL I would now slim down the UI by removing or hiding some of the less popular features (e.g. custom board sizes)
Accomplishments that I am proud of
1x1 Einmaleins Slider Puzzle is solidly engineered and 95% production-ready. The only big item missing for a public launch is some fun art to make the UI more appealing to kids.
Under the hood, the app successfully uses best practices such as clear "separation of concern". For example, I aimed to demonstrate the implementation of a non-trivial abstract storage repo with concrete implementations using both FireStore and Shared Preferences and I achieved that goal.
What I learned
This was my first Flutter web project and I came out impressed. Flutter Web is a good alternative to a native app, and I will definitely use it again for smaller and short lived projects such as a novelty game.
On the technical side, I particularly enjoyed studying a non-trivial application of the bloc pattern in the VGV code and I am grateful to VGV for this learning experience.
In general, my attempt at building a clean architecture is paying off. For example, I got a last minute request from my testers to add the option to pause and resume an ongoing game. Players complained that solving the slider puzzles took to long and that they were often interrupted before they could finish a game. Adding this feature on short notice was easy thanks to the bloc-based architecture and required very little additional code.
What's next for 1x1 Einmaleins Slider
With the competition deadline out of the way I would now like to address the product design issues mentioned in the "challenges" section:
Write proper T&Cs and privacy policies to allow for full authentication.
With personalized accounts, allow for customization, especially a player handle. Maybe support multiple player handles. (Two siblings taking turns playing on one device...)
Hire a graphic artist to design a logo and some artwork that appeals to kids.
Clean up the UI and drop some less popular features. Add some bling and sparkle to the response card.
On the technical side, I would touch up some of the tests (super important for long term maintainability but cut towards the end for time reasons...) and maybe rethink my server api. The current solution works but is in need of some refactoring.
I also still need to activate Crashlytics and Google Analytics, which are both crucial for a public launch.
Having said that, my number one priority for the next month is going to be to document my experience and to share lessons learned with the Flutter dev community. The first step in that journey will be a talk at our local GDG community
Log in or sign up for Devpost to join the conversation.