Electronic 3×5 Flash Cards
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.
In the script portion of your site you would have:
Pretty easy. I code this, my wife can easily update the spreadsheet as required.
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.