ANKO - A dad's attempt to make the daughter fall in love with mathematics

Do you have kids at home who stay away from mathematics and stick to phones? I've one! I thought about ANKO to solve that problem and it's working.

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

A bit of Background

Kids spending time on phones, tablets, computers is not very unnatural nowadays. Indeed lots to learn from online resources, apps, books, etc. The problem at my home was a bit different, though.

My daughter felt it quite dull πŸ™„ to practice mathematics from her textbooks and wished she had it all in her tabs or computer to do interactively. While that excuse itself had blown my mind and brain 🀯, she then started suggesting ideas about it. That's when I thought of trying out an app and came up with a working prototype.

Of course, there are plenty of amazing apps available to help in the interactive online study. However, as a father-and-developer, it was too hard to let go of this opportunity!

This article is to share the journey from the initial idea to the prototype done so far. Also, it is my official submission to the #AmplifyHashnode Hackathon. I hope you enjoy reading it.

TL;DR

Please watch this short demo πŸ‘‡ (best with the SOUND ON πŸ”Š).

Here goes the App link: https://dev.d3a42c69u8fqa5.amplifyapp.com/

ANKO - Let's fall in love with Mathematics

Anko is a simple web application to help young kids engage with mathematics with fun. It has kid-friendly user interfaces(UI) designed with the target persona's user experience(UX) in mind.

But why is this strange name, ANKO?

Anko means points in the Hindi language. It is also used for maths in some of the Indian languages.

So far, ANKO has the following features,

  • First is the Signup screen for registering the profile using details like name, email, age, and gender for using the app. The app will set a difficulty level automatically, but users can change it as they wish. This screen also allows a user to login if registered already.

    1_introduction.png

  • After login, the user gets a friendly environment to get started with the math quiz practices. The environment includes a blackboard, a photo, and a tiny bookshelf hanging on the wall. It's how I see things at my home!

    2_Landing.png

  • There is a magic box kept on the table. The user snaps (a fancy name of a tap or click) to take out a random math quiz. Look at that! The quiz travels to the blackboard and waits for the right answer.

    Animation.gif

  • The user gets an acknowledgment of the right and wrong attempt. A right attempt always comes with appreciation and motivating words.

    Answer.gif

  • Every right answer can get the user a point. Earning every 10 points helps the user to cross a level. The tiny progress bar at the top navbar helps to track the progress.

    4_points_table.png

    As of now, there are 20 levels to achieve in total.

    5_Levels.png

  • The setting popup helps the user to alter the difficulty level at any point in time. It also includes a link to Logout from the application.

    3_Settings.png

A few more key points,

  • ANKO supports responsiveness. It means users can use it on tablets, mobiles like hand-held devices using a browser.
  • There is no back-end yet. The browser localstorage persists the data such that you have the feeling of starting from where you left off.
  • The prototype may have plenty of bugs!

Let's Talk about Technologies

I have used the followings so far,

  • React(Of course, JavaScript)
  • CSS
  • react-bootstrap
  • animate.css
  • Styled-Components
  • Browser's Localstorage
  • A homegrown JavaScript-based Quiz Engine. None of the quizzes are hard-coded or dictionary-driven. They all get generated at the run time using algorithmic logic.
  • AWS Amplify

Plan, Program, and the Execution

The Create-React-App was the default choice to get started with a React-based application. The next thing was to create a couple of DIVs and a button to prepare the app's initial page.

image.png

The top rectangle is styled to look like a Blackboard, and the below one a Table. How to do that? That's where CSS comes into play. The board, table, box, etc., are the SVG elements added to the respective UI elements using CSS.

The next part was to get the animation done. I had learned about CSS animation while creating a photo gallery a while back. With that knowledge, I could incorporate animate.css into the app.

Finally, created a Quiz Engine which can produce random mathematics quizzes on demand. The engine can produce different types of Quizzes. So far I have incorporated basic arithmetic, fill-in-the-gap, comparisons, and what comes before/after types. The engine is declarative and pluggable in nature to introduce a new quiz type without touching the base framework.

Hosting, Publishing, and the App URL

I'm presently hosting the app on AWS Amplify. I have used the manual publishing option to manage the app updates periodically. Getting started with Amplify was like a Cake Walk! This tweet summarizes all that you need to do.

Please feel free to access the app and play around.

https://dev.d3a42c69u8fqa5.amplifyapp.com/

Your Feedback Matters

Do you like it so far? Do you have a few words to say or let me know how do you feel about it? I'll appreciate it if you can take a couple of minutes to fill this tiny feedback form. It's always great to know, you care!

The FEEDBACK FORM

Where to Go from Here?

Yes, I've got a few plans.

  • First, to make the project open-source after a few clean-ups. I am hoping to get source code contributors to this project to manage and maintain it.
  • I have a long list of features in mind. Next is to prioritize them and create a pipeline.
  • There are at least 4 blog article ideas I'm looking forward to sharing with the Dev Community. That will summarize the technical part of it.
  • How about submitting it to the Product Hunt someday?


That's All. Please do not hesitate to share your feedback. If you enjoyed this article or found it helpful, let's connect. You can find me on Twitter(@tapasadhikary) sharing thoughts, tips, and code practices. You may also like,

P.S. I love Coffee β˜•. Buy Me A Coffee

Deepak Kumar's photo

Hey Tapas, I really liked the concept and UI is just wonderful.

When I saw the video, I thought app has sound feature also.

As it's more like a game and targeted on kids, adding some sound effect on click, correct answer, wrong answer and clicking the box would make the user experience much better I guess.

overall great work man !

Tapas Adhikary's photo

Thank you Deepak Kumar. Glad you liked the concept and the work.

You have just given some great feedback about the sound. I'm surely going to consider that. Completely agree with you, it will enhance the UX and engagement.

In case you have time, please feel free to pour in more ideas and suggestions here, Feedback.

Catalin's Tech's photo

You are so inventive Tapas Adhikary, haha! This is the power of a developer - you can create anything to solve real problems!

Well done!

Tapas Adhikary's photo

Thank you Catalin Pit. Very true, solving real-life problems gives a different level of satisfaction.

Glad you liked it.

Rahul's photo

I am gonna use this series in my learning process. This damn amazing project is really helpful and more than amazing. I sometimes don't get idea about what to build and all. But this series and all these projects told be build anything.

Loved this project, it looks attractive and very amazing for kids.

I have no words for this. My DAD is an Indian Army Officer I shouldn't expect anything like this for me.

Tapas Adhikary's photo

Hey Rahul,

Thanks, for all the awesome words about these projects. We can collaborate in the future for making something even cooler.

My DAD is an Indian Army Officer I shouldn't expect anything from this for me.

Wow, great to know. We all expect lots from him in that case. He is a true hero πŸ™.

Rutik Wankhade's photo

Well, she is a lucky daughter. Don't know about the hackathon but you surely deserve the πŸ† best father award. A great example of making learning fun. 😍 Loved it and Submitted the feedback.

Tapas Adhikary's photo

Thank you Rutik for submitting the feedback. It will surely help me to improve the app.

I just hope she doesn't ask for English now πŸ€ͺ.

Savio Martin's photo

Super cool, Tapas bro 🌈, Really awesome and clever work. Looks like you have took a great effort on this. Really awesome animations and a cool UI. Really good demo video too. Keep up your good works πŸ‘Š

Tapas Adhikary's photo

Thanks brother... Yes, it was hectic but fully enjoyed. I am happy to get your feedback.

Omotola Shogunle's photo

What an amazing app idea and implementation. Really love it, the ui is very playful and kids friendly. Your daughter has the best dad

Tapas Adhikary's photo

Thank you very much Omotola Shogunle. Appreciate you took the time to review and give feedback.

Will continue the project to improve further.

Sunrit Jana's photo

This blogs makes you fall in love with learning and writing, soooooo well written! Really awesome one! Love it and thank you for this awesome blog :D

Tapas Adhikary's photo

Thank you Sunrit. I'm very happy you liked it.😍

Victoria Lo's photo

Wow this is just amazing! Not only a well-written hackathon article, but also an awesome and creative project! It just shows there's no limit to building things and solving problems with code! Very inspiring :)

Tapas Adhikary's photo

Thank You, Victoria Lo for such an encouraging comment. Very happy to inspire :)

Yoog's photo

Story that not only the developers but also the parents can enjoy! I enjoyed reading this article as a father, as a student of mathematics, and as well as a developer.

Tapas Adhikary's photo

Thank you very much Yoog for such motivating comments.

Jasvinder's photo

HI Tapas, Liked your app, Coincidentally, recently, I too had put in a very similar effort for my son's maths (grade 3) classes. I did it in pure html, js and css, using all the latest JS capabilities (classes, reduce, etc). I too have woven a platform whereby we can just plugin new type of problems without impacting the base framework. I was anyway planning to move it to react+node for my hands-on. Would love to demo you my effort and explore the opportunity of collaboration. I haven't deployed in any cloud env for global access though.

Tapas Adhikary's photo

Jasvinder, That's great! Let's collaborate. I am out of all the actions for a couple of weeks. I shall touch base with you once I'm back. Please drop an email so that I know how to reach out to you.

Favourite Jome's photo

Wow, this is a lovely application. Great idea Tapas Adhikary 🀩. I did leave feedback.

Tapas Adhikary's photo

Thanks for the feedback, Favourite. Really appreciate it.

Thanks for loving the application too.

Arpendu Kumar Garai's photo

The UX and the animation looks awesome.. Great way to have fun and learn something at the same time.. Kids would definitely like it.. You definitely deserve a πŸ†.. Rock as always.. β™₯️β™₯️

Tapas Adhikary's photo

Thanks bro...

Hrithwik Bharadwaj's photo

The UI is so good for children β™₯️.

Tapas Adhikary's photo

Thank you very much.

GirlThatLovesToCode's photo

This looks awesome!

Piyush Sinha's photo

Woah 😳... absolutely loved the product. Great demo video.

Tapas Adhikary's photo

Thanks Piyush Sinha. I'll continue to work on it to make it better. Thank you for liking it.