frenchSpellingQuiz

I received an email from Eliza’s teacher today, and it included a list of her spelling words for the week (in French, of course). Knowing that she’s had trouble with this in the past (least favorite subject of hers), I decided to make a web application for Eliza to make spelling homework more fun.

On the application, I’ve listed Eliza’s spelling word equivalents in English. Next to each word is a text box. When you click into a text box, a photo hint appears. When you type in the word in French, the application will tell you if you’ve gotten the correct answer! It also keeps track of how many correct answers you’ve submitted! Eliza thinks it’s super cool, and updating it every week will be easy. I’ll bet spelling isn’t her least favorite subject by the end of this year.

For those of you interested in code, here’s what’s going on behind the application:

While the front of the web application is seemingly simple… the backend is much more complex. I’m using a wide array of technologies including jQuery, AJAX, Twitter’s Bootstrap, PHP, HTML, CSS, and JSON (javascript object notation).

In short, the application works by first opening the JSON file, which has a list of all the questions, answers, photo URL, etc. The list is then compiled into the HTML seen on the front of the application, but the answers are not included. The user (presumably Eliza) then clicks on a field.

fields

There is an event listener that listens for the field getting focus. Once a field is in focus (turns blue), it figures out which image needs to display, and updates the image aid on the right hand side of the page. The user can then enter the answer into the textbox. I use color around the text box to indicate status (incorrect, correct, incomplete, active).

After the answer is in, the user can hit “tab” to move to the next field, or simply click the next field with the mouse. Another listener is defined to listen for the text box losing focus. At the point it loses focus, the text that was entered is then POSTed to a PHP file that checks the answer. The PHP file checks whether the answer is correct or not by opening up the JSON file again, and searching for the question, where the answer can then be found and compared to the answer that was provided by the user.

If the answer is the same as the one in the JSON file, a “correct” is passed back to the front end application. When the front-end receives the response, it checks to see if the response is “correct” or “incorrect”, and it applies the CSS rules accordingly (to change the field highlight color, indicating to the user that the answer was correct or incorrect).

I added a few “bonuses” after the initial completion of the core application. This includes fadein and fadeout affects to the photos (when they’re changing), and a progress bar at the bottom that shows the number correct, number incorrect, and number unanswered.

progressBar

Knowing that my end-user was going to be a child, I needed to keep the interface clean, undistracted, and clever. By clever I mean the application is auto-submitting the answers for the user without requiring the user to click a “submit” or “check” button. It’s also figuring out which photo to display, and changing the photo when the user changes to a different field. With absolutely no training, I believe most 7 year olds would be able to hop in and figure out how work the application.

See if you can get all of Eliza’s spelling words correct!


Take the Quiz

If you’re a parent, how do you make homework more fun? If you’re not, how did you make your own homework fun as a kid?

Related Posts Plugin for WordPress, Blogger...