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.
- 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.
- 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.
- After drawing the D3 charts, I learnt how to use jQuery Tipsy plugin to add mouseover tooltip to each bar in the charts.
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!
Thanks for my Studio 20 classmate Elle Zhu and editors in NBC for helping to complete the quiz.