Interactive time use calculator

This is the first quiz I handcoded using Javascript. Dubbed as an interactive time use calculator, it was produced during my summer internship with NBC Local Media but it was only published on Dec 18 as part of the year-end series. (Updated)

By submitting the time you spend everyday on various activities like sleeping, working, surfing Internet, shopping and exercising, the quiz will compare your time use habit with the rest of Americans and show the result using charts.

The idea came after the 2014 American Time Use Survey was released in June. Instead of doing a story about how Americans spend their time (WSJ did the story), I wanted to make the survey more relevant and personally engaging for users. A good way would be to find out where you stand in the statistics, and a quiz should do the work.

To make the result easily understood, I thought drawing a chart would be helpful. So I explored different ways to do that and settled with D3, a JavaScript library for data visualization. I tried Google chart but failed to load it in the same page (it worked fine in a separate page). But D3 is actually more powerful because you could customize everything from the color to the mouseover tooltip. It took me several weeks to put everything together as there are different parts that I need to figure out.

  1. I need to learn how to build a quiz. All the existing quiz tools or plugin don’t meet my requirement because I need a quiz that allows me to use the result to draw a chart on the same page after the quiz is submitted. So I started with a simple HTML form.
  2. After building a simple HTML form, I need something to validate the user input before the form is submitted. I don’t want users to put in more than 24 in the hour box or more than 59 in the minute box. After testing out several plugin, I managed to make jQuery Validation works.
  3. I figured out how to use popular javascript library jQuery to collect user input, do calculation, and select which result box to show after the form is submitted.
  4. After drawing the D3 charts, I learnt how to use jQuery Tipsy plugin to add mouseover tooltip to each bar in the charts.
  5. Finally, after everything was working, my editors wanted to allow users to share their personal result through social media. Twitter is no-brainer, but Facebook is a disaster when you want to customize the shared content. Instead of going through all the complicated processes in Facebook SDK for Javascript, I found a workaround by creating 4 empty pages, each with a meta tag that states a different result. So now there are 4 different results for users to share in their Facebook. (Update: the personalized results sharing function was not used by the editors in the published version but you still can find it in my github page.)

Instead of compare user input with the average Americans, I produced a second chart that does the comparison with the user’s peer group (same age group, gender and employment status). I believe this gives users a better picture of where they stand in the society.

The whole project proves a notion that many coders have been stressing – the best way to learn coding is to produce a project. Yes, that’s the truth!

You can access the code in my Github or try the quiz.

Thanks for my Studio 20 classmate Elle Zhu and editors in NBC for helping to complete the quiz.