Will create "point at correct spot(s) on image" question type.

Hi,

FYI, server-side image maps are supported in HTML and XHTML, see http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.6.2

First of all, I'd definitely welcome such a question type!

In my limited experience with these I've mostly seen them implemented in Flash, probably as the GUI for question creators to mark areas can be a bit tricky to implement in other technologies. And also keeping track of which areas have been chosen for the quiz taker. But then you'd be dependent on Flash, otherwise you'd be dependent on relatively advances JS (which could mean browser issues, and would need a fallback?). Ideally I'd prefer image maps and JS, though.

If I were to use it I would prefer, again ideally, a tool to mark areas (freehand and with say squares and circles), and be able to set a individual score per item, and at the same time have a "simple scoring" settings like MCQ questions have, so you get fixed point value if all were correctly marked.

... and I definitely would be better off to do a little research before: I'm glad I found Hylke's hotspot question type before beginning. If I understood it correctly, it lacks integration into quiz, but the quiz takers UI is quite exactly what I want to achieve. So I'll contact Hylke in order to avoid duplicate effort.

This would be terrific. I have extensive experience in developing e-learning courses. Of the tools in the top existing tools, Adobe Captivate and Lectora, they both have the graphic selection question type. If you are interested I could send you some examples of how they are used in a course.

Here are a few of the subtleties.

Like other question types we want to be able to have a single "correct" area or multiple correct areas. Ie "Click on each of the X-rays indicating TB" with 4 or 5 Xrays visible.

However, there needs to be some kind of symbol that shows the learner where he has already clicked. This becomes tricky in that if the graphic that appears at the click is static, it sometimes blends with the graphic. So you ideally will have a choice of icons wich indicate the previous clicks -- a few different colors and shapes so that the programmer will be able to select one that will easily contrast. Captivate offers a few dynamic icons which "pulse" and change shape and these are the best for this purpose. When I have the choice as an e-learning programmer, I always choose a dynamic icon for this purpose. There also must be a toggle so that if the learner clicks on an area and the icon appears, he can later click agan and deselect that point.

Ideally a hot spot alternative can be the aggregation of some overlapping or disjoint areas. For example in a photography course we required the learner to click on the "Foreground". However to identify the foreground we had to add a number of different rectangles or circles. SOme were overlapping and others were not.

Some people argue that the programmer should be able to define a hot spot area in the same manner that Photoshop and other graphic programs define a mast area--repeated clicks of a polygonal outline. This is in my experience UNNECESSARY for 90 percent of the items. From a time point of view, adding more rectangles and sircles is actually faster. In only a few cases is the precision of a graphics mask technique required. So if you have a graphic mask technique, also have the additive rectangels and circles if possible.

Typically, an audio message might well accompany a question of this type for the introduction or set up.

Ideally, the graphic or graphics which will have the hotspots can "enter" after a time delay after the text or audio set up of the question. Choice of entry transitions would be nice but are not critical.

An Option for Consideration:
I have not yet seen this variant, and it may well be another question type, but what is desirable is to be able to have the learner view a short video and click at a critical moment. In teaching a unit to physicians we wanted them to click as seen as they heard "railes" (a certain type stethoscope sound) of a patient whose chest breathing is shown with the audio from the stethascope. The criterion for corectness is that the click occurs within n milliseconds of the moment indicated by the programmer as the RIGHT moment. this si a timing audio or video question type.

When the programmer provides feetback for this type of question there is very often a modified graphic of the original that is used in the feedback, so try and make accomodation for this.

If as you develop this module, you would like us to test them for you and give you some examples for your documentation, we would be happy to help. Thanks for doing this. I would have but I am not a good enough programmer yet.

Apparently I should have posted to this thread but I made some small mock-ups as to the concept in question. I think we're all talking about very similar ideas though -- http://groups.drupal.org/node/70778

I think some kind of advanced javascript is a must for this. We're starting to get to a point where it's very hard to do these highly interactive things without javascript so at least in my development plan I wouldn't both accounting for it. For our classes students must have certain browser specifications (aka flash / js) so I wasn't planning on doing anything other then probably leaving a message saying you require js.

As for UI overlay, I agree, something animated or multicolored might be best. An obnoxious background could be used or a css/js filter that does some kind of contrast swap on just the region selected. I think possibly where we differ in concept is that I want users to know what's selectable when they mouse-over various things. So, the GUI for the question creator would involve clicking / expanding areas to meet the correct shape / size but then when a user taking the quiz mouses-over the image they will see faint outline of what is select-able.

As for concerns about the correct answer / security, it seems like it would be easy enough to have the standard multiple choice question selection fields render, be hidden, and then bound a region's click to selecting the appropriate checkbox / radio bubble. This way we could completely leverage the base multiple-choice question way of doing things and essentially be augmenting it with an overlay. If you wanted some kind of js degradation, this could also be provided by this as an image could be generated server side with the regions labeled A B C D (etc) and then clicking the radio button would correspond to the letter on the picture.

I think it might help for further discussions to identity distinct points in the overall transaction and refer to them as such. I'd suggest something like: Image Creation, User Selection, User Feedback as the 3 different UIs that need to be produced for the various users as we have several user-groups involved in the Quiz process.

I just came across this neat little thing:

http://jsxgraph.uni-bayreuth.de/wp/

Regards,
Raphael