Creating simple ungraded quiz questions with feedback using HTML and JavaScript

Clive Shepherd recently wrote about “inductive learning.” He said:

In my post last week, Whatever happened to inductive learning?, I complained how difficult it was with current rapid development tools to write more conversational inductive questions in which you as author are able to comment on each selection that the user makes.

He explained that he wasn’t looking for graded answers, just a method for providing custom feedback for each clicked answer. He then provided some examples he created in Captivate and Articulate Presenter.

When I read his post, the first thing I thought was how dead-simple it is to create that kind of interaction in HTML and JavaScript. Flash-based products are not (as of this writing, anyway) really built for doing this kind of work, so why bother?

I think the biggest argument for trying to shoehorn this kind of interaction into a Flash-based system is the graphical user interface (GUI)… the avoidance of working directly with code. The Flash-based systems have nice GUIs, while the HTML-based systems are generally outdated and clunky.

Well, for those who don’t like working with code, I feel for ya; I honestly understand where you’re coming from. But, you sometimes need to go outside of your comfort zone to achieve your goals.

For those who are willing to give it a shot, I present to you a simple HTML and JavaScript template for inductive learning-style questions (ungraded, customized feedback for each answer selected).

• View the demo here.
• Read the how-to here.
• Download a ZIP file containing the source files here.
• And for Clive, here’s a version that uses your same demonstration question and artwork!

This is a simple demo, but because it’s built in HTML with CSS and JavaScript, it’s completely customizable and can be restyled and/or re-purposed for a variety of question types. JavaScripters can even add SCORM calls if desired! I’ve used this approach successfully at work, though my version at work uses MooTools effects to give the interactions a much smoother, Flash-like feel.

Enjoy! Please let me know if you find these examples helpful, or if you have other ideas for this kind of question style.

Related posts:

1. Send Captivate Quiz Data to JavaScript
2. Adding SCORM code to an HTML file using the pipwerks SCORM wrapper
3. SCORM JavaScript wrapper updates
4. Actionscript, JavaScript, and SCORM
5. Captivate-JavaScript limitations