Building a Narrowing-Focus Questionnaire

May 28, 2012 6:15 PM

How difficult would it be for someone with intermediate HTML/coding skills to build something similar to the Dog Breed Questionnaire on the Animal Planet website?

What terminology should I be looking into, and are there any templates I might be able to use? From what I can tell, the first question is what determines which "database" to access, and all subsequent questions narrow results within the chosen database down by certain criteria.

I'd like to do something similar so students can be advised on what kind of a class to take based on their interests and other criteria.

posted by These Birds of a Feather to computers & internet (7 answers total)

A more interesting, and probably more accurate, way to do this than simply having each choice eliminate certain options is to use an expert system.

Building the survey should be pretty easy given the skills described. Making it give you back an answer that's useful is more difficult, and the difficulty scales with how good a job you'd like it to do.
posted by tylerkaraszewski at 6:28 PM on May 28, 2012

At the simplest end of the spectrum, you could just make a bazillion HTML pages: so, instead of having the user select a radio button and press "next", each option is a link to the next page of the questionnaire. (Though this could end up being an incredible number of separate pages, depending upon how many options there are at each stage.)

Related question from a month ago.

Actually accessing what a programmer would think of as a database would require more than HTML skills, it would require proficiency in server-side programming languages. (And databases, obviously.) However, if you just mean spreadsheet-like tables of data, those could be javascript arrays and you could handle the logic client side, in javascript. (Though this would of course require proficiency in javascript, which does not always come along with proficiency in HTML.)
posted by XMLicious at 6:41 PM on May 28, 2012

Do a wordpress install, or any or your favorite CMSes and then search on "polls." It's easy.
posted by cjorgensen at 6:53 PM on May 28, 2012

Let's say this feature needs to be installed semi-permanently on a school website and not on a Wordpress (or on a site that would support any Wordpress features). I like the idea of using SurveyMonkey, but the Dog Breed example isn't so much a survey as it is a matchmaking engine. How could I figure out what the Dog Breed example is using?

Ideally the first stage would be Age Group (K-2, 3-5, 6-8, 9-12), then that would be narrowed down by Subject Matter (Math, English/Language Arts, Science, History/SS), then finally Sub-Discipline (Visual Art, Theater, Music, Health), since our school tries to use sub-disciplines as a way to teach major subject matter.

I don't want the end result to be as specific as the Dog Breed example, where an exact breed has been selected. I'd rather just get to a page that lists all Math and Visual Arts classes for grades 3-5.

I may be out of my league here, but I'm willing to give it a try since a client is eager to build something like this.
posted by These Birds of a Feather at 7:05 PM on May 28, 2012

Is there a reason you really need the narrowing decision tree UI? The use case you describe fits a very routine solution: an ordinary search form that posts to the server and does a single SQL query like "SELECT class_id FROM class WHERE age = 'K-2' AND subject = 'Science' AND subdiscipline = 'Health';".

It's not hard to imagine cases where you'd want a Javascript wizard pushing users through a finite state machine to reach an end state with an answer, but a little Googling isn't turning up much. I do see a few decision tree / wizard UI components: 1, 2, 3. But I think adapting them will be more work than it's worth when what it sounds like you could get by with a much more conventional form and a tutorial in SQL, e.g. GalaxQL.
posted by Monsieur Caution at 7:45 PM on May 28, 2012

Okay, seriously, why are people proposing things like Artificial Intelligence Expert Systems and finite state machines? Yes, there are technically elegant ways this could be implemented but the example that These Birds of a Feather describes, a series of three questions with four options in each question, would only require 1 + 4 + 4² + 4³ = 85 flat HTML pages, which is not unmanageable.

In terms of reliability and maintenance it would be a far better investment of time to learn a little bit of some scripting language to script generation of the flat HTML pages from a big array than jury rigging a first attempt ever at one of these more complicated solutions and having to worry about cross-browser debugging and maintenance of javascript or a database server connection going down and breaking everything. Playing with the more complicated versions would be edifying, but actually delivering those as a solution built in new-to-her technologies is just asking for trouble IMO if she is going to have to support it.

From looking at the source code, the dog breed questionnaire appears to be generated by Omniture, which appears to be a big bucks online marketing system or service.
posted by XMLicious at 8:58 PM on May 28, 2012 [1 favorite]

The questionnaire is NOT built by Omniture. Omniture is a tracking service similar to Google Analytics, and the code that XMLicious is referring to are tracking objects used to see what users click on the questionnaire and sends it to Omniture's system.

The actual quiz is implemented in JavaScript. If you look at the source there are functions validateQuestionnaire, getPreviousPage, getNextPage, getResultPage, etc. It checks the state of the question/answers and will take over the form action and redirects like so in the code:
/breed-selector/dog-breeds/questionnaire/page"+questionId+".html

It seems like a bit of an obtuse way of doing things. I've happened to actually built a JavaScript based quiz for a different Discovery site when I worked for an interactive agency before, and I used the JSON data format to hold questions/answers and validate from there instead of having to have static html pages to reference from if I didn't have access to any back end development for facilitating form actions (like in asp, php, perl, or any other major web programming/scripting language).

So to really answer your question, for someone with just HTML skills, this is a rather difficult thing to accomplish. It requires knowledge of JavaScript, and using a helper library like jQuery makes things easier, and also knowledge of the JSON (JavaScript Object Notation) format to help store answer/question combos if one doesn't have access to a database and scripting language to query it.
posted by xtine at 11:52 PM on May 28, 2012 [1 favorite]