quiznoob — earn while you learn

TL;DR — a quiz app for Android and iOS that allows kids to earn internet time on Circle via an IFTTT webhook. The app and server code are open source on github. See below for installation and operating instructions.

I purchased a Circle device in December 2016 to control the amount of time my children spend on the internet. They spend most of their time on their iPads. It has worked reasonably well and I am quite pleased with the device. It works by ARP spoofing with an existing wifi router. It even comes built-in to some NetGear routers now.

The Circle device lets you control (1) their total amount of time on the internet; (2) what span of hours they can or can’t use the internet; and (3) can pause or resume the internet for a specific child or all devices. You must whitelist the MAC addresses of all controlled devices and associate them with a child. The device interface is only via a mobile app available on your iOS and Android. Do NOT install the Circle app on the child’s device!

You can reward your child by adding incremental amounts to their total time limit for the day. For example, say you set a maximum time limit of two hours per day and restrict service to only 9am–5pm each day, then they can only use the internet for 2 hours during 9am–5pm. The “bedtime” and “offtime” features are similar with the former allowing time spans to bridge midnight.

Bedtimes and offtimes worked like a charm. They quickly got used to these non-Internet periods. The major problem was my son asking “can I have more internet, please?” when he reached his daily allotment, especially on weekends. As we are sometimes busy and lazy, we’d just answer “sure” and award him with more time (in multiples of the Circle app’s 15 minute increments). This might happen several times a day (especially on weekends) when he hit the extended time limit. This seemed to defeat the purpose of the Circle device. We also had to push him to finish his homework each night. How could he earn more internet time as a self-service reward and do his homework at the same time?

In October 2017, I was thrilled to learn that IFTTT had introduced an integration with Circle so that I could programmatically extend his time. I decided to write quiznoob (a name chosen by my son): a quiz app for Android and iOS that allows kids to earn internet time on Circle via an IFTTT webhook. It has been a miracle (and a great science fair project for him too)!

The app consists of two parts: a server-side written in Rails4 that allows me to administer users, edit quizzes, questions, answers, etc. It’s pretty much a vanilla RoR application without many bells & whistles, but deploys easily to Heroku. The client app was written in flutter to achieve cross-platform deployment on iOS and Android from a single codebase. I have been super-impressed by flutter. It is well documented and works very easily out-of-the-box with Xcode and Android studio tools.

Server Installation

To install the server on your local machine first as a test, make sure you have ruby 2.2, Rails4 and MySQL (the default database) installed, then:

% git clone https://github.com/johncallahan/quiznoob.git
% cd quiznoob
% bundle install
% bundle exec rake db:create
% bundle exec rake db:migrate
% bundle exec rake db:seed
% bundle exec rails s

After the server starts, visit http://localhost:3000/ and login with admin@example.com and password ‘adminpassword’. You should see an empty list of users:

Click the “New User” button to create a user. The access token will be needed on the child’s quiznoob mobile app. Next, you will need to upload some quiz materials. There are some quizzes in the data directory of the github project as Excel files (data/qn_mathematics_9x.xlsx). Click on the “Questions” tab, select “Choose file” and click “Import”:

Although a quiz was automatically created when you imported the questions, you must create and assign the quiz to a subject. Click on the “Subjects” tab and then the “New Subject” button. Create a subject like “Mathematics” with a description and click “Create Subject”:

Finally, navigate to the Quiz tab, enable the “Multiply by 9” quiz and assign it to the “Mathematics” subject in the pull-down list:

This is the miminal setup needed for the mobile app to connect and operate. Later, we’ll configure rewards and integrate with IFTTT and Circle.

The Mobile App

The mobile application is built with flutter, a fantastic cross-platform tool for developing Android and iOS apps from a single codebase. The quiznoob-flutter source code is on github. You must first install Xcode, Android Studio and flutter on your computer. Make sure flutter is on your path. Then, clone the project, fix the flutter packages, start an iOS simulator, and run the app:

% git clone https://github.com/johncallahan/quiznoob-flutter.git
% flutter doctor
% open -a Simulator.app
% flutter run

You may have issues with your provisioning profile in which case you’ll need to open Xcode and create provisioning profile for the app. Follow instructions in the flutter documentation and tool instructions. They are very helpful. When the app starts, you should see:

Click on the heart and fill in information from the server’s User tab:

Click the “Done” button and your mobile app should connect with the server. You will see the available subjects:

Click on the Mathematics subject and you will see the “Multiply by 9” quiz:

You’re now ready to try a quiz! Click on the “Multiply by 9” list entry and proceed to answer the questions:

Click on the person to start the quiz:

Select an answer. Your selection will turn purple:

While your selection is purple, you can change your answer. When you are satisfied, click the ☑️ button to check your answer:

Great job! Click on the 😄 to move to the next question. Notice that your ❤️ count increased too. You will need these points for rewards. Try to skip a question, answer incorrectly, change your answer, etc. You can exit a quiz at anytime by clicking the ⬅️ or the ❤️ count. My children helped design the flow of the app. I thought that you should be awarded points only if you finished a quiz with 7/10 questions answered correctly, but my children said that you should earn points immediately for each correct answer and be able to cash in your hearts as soon as you reach the cost of a reward. They were right! Complete the quiz, click on the final ❤️ and return to the list of Mathematics quizzes.

Up next…

In the future articles, I’ll show you how to create rewards, hook the server up to a free IFTTT account, configure IFTTT webhooks, and connect to Circle. Then, I’ll also show you how to create your own quiz material including images (hosted in your Dropbox public folder) like this: