So the other day, my wife comes up to me and asks if we have any 3×5 cards in the house. 3×5 cards? What do you need those for? It turns out she wants them so she can make study flash cards for a test she has to take for her Aerobics and Fitness Association (AFAA) certification. (And yeah, I’m married to an aerobic instructor. Life is good!) I’m like, hey, flash cards are so 1970’s ! Electrons are free!

So I get to looking at the issue:

  • The list of questions is pretty obscure, and I can see a few spelling errors in there. So I know its going to have to be constantly updated, and that’s just not a task I’m really interested in.
  • I’d like to make this friendly and functional on a mobile phone.
  • I’m not interested in creating a special app for this, I’d just like something to run in the mobile browser.
  • I’d like to learn a new technology with this exercise so I can continue to grow my skills.

First, the list. I’ve been playing with Google drive lately. They’ve got a very friendly system to obtain JSON data directly from Google sheets. Perfect. Here’s a nice reference on the topic. I create a spreadsheet in Google drive, containing all the AFAA questions and responses.

The code is as simple as putting this code in the body of your html file.

<script src="https://spreadsheets.google.com/feeds/list/XXXXXXXX/od6/public/full?alt=json-in-script&amp;callback=useJSONdata"></script>

In the script portion of your site you would have:

function useJSONdata(root) { console.log(JSON.stringify(root, null, 4)); // Understanding the object root is a great way to understand what is going on with JSON var entries = root.feed.entry || []; .. etc. Analyse the data you need, run a for loop, create a string of content to be pasted back into the Document Object Model / HTML / body.

Pretty easy. I code this, my wife can easily update the spreadsheet as required.

flashcard1
flashcard2

The other tool that made this project interesting was the use of jQuery mobile tools. I used both their js and css files. Very nice. Pretty decent to use. I made use of three mobile events “swipeleft” “swiperight” and “taphold”. Swipe left to go to next slide. Swipe right to go to previous slide. Long touch and hold to reveal answer to question.

Check out the program on your mobile phone. Let us know what you think. Oh, and if you are a developer, all the JavaScript code is stored in the flashcards.html file, complete with comments. Use your browser dev tools to see the details…