Kiosk Web App jQuery Implementation

Question

I have a relatively simple web app that functions as a kiosk that I am currently revising. My original goal was just to get it working, but now I am trying to implement more a elegant approach.

Basic Background Info:

• Content - all of the content comes from a database via php - either responding to ajax calls or directly echoing content with php (most of the content). This part I have already revised and while still not perfect is rather effective/flexible.
• What the kiosk does - our clients take one or more surveys using the kiosk. The data is submitted once a form passes validation. If that is the last survey, the session ends. If there are more surveys, they continue taking surveys.

The Issue: I have a mess of jQuery event handlers that control the behavior of the kiosk. Basically the behavior consists of showing/hiding elements that are already in the DOM, based on what state the kiosk is in.

• toggling the instructions
• toggling the logout screen (end to survey early)
• go to next/previous question of the survey
• idle timer which displays auto-logout warnings (again just show/hides not an alert)
• showing missed questions if not enough answered
• submitting the form if it passes simple validation

The more surveys I add, the more special cases I run into and the messier the jQuery seems to get. The surveys that only consist of radio buttons are easy (although the code is still not elegant) but I seem to be treating those that have question-piping (questions that rely on other questions) and text responses as special cases when I wish I could take a more modular/OOP approach to the jQuery.

I've considered...

• Prototype
• jQuery UI Widget Factory
• Writing my own jQuery Plugin
• Writing my own javascript class
• Knockout.js
• Continuing the current jQuery approach, just cleaning it up

Thanks in advance for offering your expertise and pointing me in the right direction based on the context of my project.

Answer 1

Backbone.js will be an excellent way to solve this problem. This approach will solve my problem by...

• separating the model from the view
• taking advantage of inheritance, I can create base classes with standard behavior and subclasses to implement the special behaviors of some survey elements
• Backbone.js is very lightweight and "plays well with others"