06 November 2014

Building out a quiz

There are a lot of ways in which the default look is a little clunky, but our goal is to play with writing for a news quiz and get one up and working. In a couple of weeks, we’ll look at how to use CSS to beautify our Slideshows. The same principles will work here. For now, though, focus on the text.

We’re going to use Tabletop.js – roughly, a script that lets you use a Google Spreadsheet as a data store. It makes a whole lot of things a whole lot easier. You don’t need to know much about Tabletop.js to get through this lesson, but if you’re curious, Source has a nice write up and Mike Ball has another.

With Tabletop.js, we can use a Google Spreadsheet as the backend for our quiz. You could, in theory, hand-code the JSON yourself. There’s actually an example of just that in the code we’re about to download. For now, ignore it.

We’re going to use Mother Jones’ quiz framework to make a super basic quiz.

Walk through:

  1. View the source of my demo quiz. Look at all the files that it is calling in as it loads.

  2. Download the zip file from the repository and open it, let’s look at the contents.
    • open index.html in a text editor; look over the files it calls on. Which are coming from elsewhere? Which are local?
    • Look at your folders. What all do you have here?
    • Look at the two newsquiz.js files – what does Minify do?
  3. Save the HTML as quiz_demo.html and put it in the directory where you are storing your course HTML. Copy the js and css directories over as well.

  4. Upload it to Digital Storage and confirm you have all the pieces.

I pulled a lot of things out of the original Mother Jones repository that certainly belong there if we’re going to contribute to the code base, but if we’re just going to use their work and give nothing back … we don’t need those extra files.

Exercise

Everyone pick your favorite stat out of Stats and the City and we’ll make a quiz about the city.





CUNY Graduate School of Journalism

© Fall 2014 Amanda Hickman