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.
- Sample Quiz
- the data behind this quiz (note … the URL on Digital Storage is actually a private spreadsheet.)
Walk through:
-
View the source of my demo quiz. Look at all the files that it is calling in as it loads.
- 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?
-
Save the HTML as
quiz_demo.htmland put it in the directory where you are storing your course HTML. Copy thejsandcssdirectories over as well. - 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.