Quiz Whiz

Written by KK Rebecca Lai, Nicole Zhu & Adam Baumgartner

Here at Vox media, we are constantly finding new ways to create engaging, shareable content. Our newest authoring tool is a quiz generator that offers thorough explanations of topics in enticing, concise and interactive ways. The tool also automates the process for creating an interactive quiz without involving a developer writing repetitive code.

Check out the project.

See it in action!

Our adventurous pioneers over at Vox.com were the first to try out the tool. Nilay Patel authored a piece about adding value to digital products, which included a cheeky quiz about the cost and value of art. In late July, an on-air conversation about domestic violence on ESPN sparked a debate about victim-blaming, which Lauren Williams turned into a great flowchart. The quizzes are meant to be engaging but also informative, so each section can be populated with explanations and links to highlight important parts of the answers.

How did we build this?

We started building the quiz generator at Vax, our product team’s annual hack week. After getting a working prototype of a multiple choice quiz up and running, we worked closely with a handful of Vox.com reporters on specific, concrete use cases. We iterated through multiple versions of the quiz generator based on usability feedback and took into account their suggestions for additional features. While working with Nilay, we edited the spreadsheet template to accommodate descriptions for each question so that reporters could provide background information when necessary. The constant dialogue between the editorial and product teams helped us build a tool that is both useful and easy to use (and more feedback is always encouraged!)

How does the tool work?

The quiz tool is powered by (you guessed it!) Google Spreadsheets. Editors use a Google Spreadsheet Template to input the content of the quiz. For each question, they enter the question text, four choices, an optional question description, the correct answer, incorrect message, correct message and a hint. Once the editor is done, they publish the spreadsheet to the web and grab its public URL.

The editor then feeds the spreadsheet URL into our authoring tool, which uses Tabletop.js to collect the spreadsheet data. In order to make the tool more reliable, the authoring tool uses Tabletop.js to collect the spreadsheet data into a JSON object, which is then attached to the embed code. This means that the quiz embed code will need to be regenerated every time a change is made in the spreadsheet, but the quiz will be more stable since it does not rely on accessing Google Spreadsheets every time it loads.

Next, the editor picks from one of Vox Media’s verticals (the tool currently supports Vox.com, SB Nation, The Verge, Polygon, Eater and Racked). A vertical-specific stylesheet URL is then generated, e.g. quiz-vox.css. The stylesheet, together with the quiz data, is parsed together with a script tag using the quiz.js library. All of these files are currently hosted on Amazon S3. Finally, editors can copy and paste the embed code into the CMS and voilà -- an interactive quiz without touching any code!

How does the quiz itself work?

The quiz dynamically generates an array of multiple choice questions from a JSON object. Users’ answers are highlighted when selected, then the chosen string is compared to the correct answer. Users can also see a hint for each question. Scores are incremented if the user answers correctly, and the final result is displayed at the end of the quiz for users to share on social media.

Why does the embed code look like crazy wizardry?

When we first started testing the quiz tool, we had some issues with the TinyMCE editor stripping out parts of the embed code that contained the data to the quiz (especially those with href tags.) But Yuri Victor helped out by writing a script that obfuscated the JSON object and turned them into hex codes. When quiz.js runs, the code is unpacked into regular JSON objects again. (What?! We don’t fully understand it either…) With this change, the embed code don’t get stripped out even when you switch between the Visual and HTML Views in Chorus.

How can I use it?

The build that we have right now is specific for use within the six verticals in Vox Media (a stylesheet for Curbed is on its way.) If you want to use it for your own site, a couple of changes will get you up and running:

1. Follow the Install instructions on Github.

2. Create your own stylesheets (ours is written in SASS.) The quiz.css.scss file contains the most basic styles for the quiz, and quiz-VERTICAL.css.scss contains more specific styles like typography, colors etc. So make a copy of any one of the vertical-specific stylesheets and change elements such as fonts and colors to fit your design.

3. Edit quiz.js. The stylesheets are added dynamically to the page with JavaScript, so go ahead and edit quiz.js to include the stylesheet that you just created. The social media sharing buttons are also specific to Vox Media’s verticals so change the links accordingly.

4. Find somewhere to host these files. Host them somewhere on the World Wide Web (we use Amazon S3) and use those links in the generated embed code.