Auto Advance with Hot Spot

Question

I am trying to get the survey to auto-advance when a participant responds to a hot-spot question, but clicking any one of the regions.

I tried using the code below, thinking that 'undefined' would cover any response that wasn't text, radio, or checkbox but it doesn't work.

Are there any other element "types" that I could use? Or do I have to define a mouseclick or the region names first?

var that = this;
this.questionclick = function(event,element){
    if (element.type == 'undefined')  {
       that.clickNextButton();
    }
}

Thanks!

Answer 1

The hotspot regions are within an SVG, which the browser treats as an external object. That means that any javascript that refers to the svg object must be inside the object. Your javascript isn't. That's why it is undefined.

I think the best you can do is observe the div that contains the svg. Unfortunately, that means you can't tell if the respondent clicked on an actual region or just clicked on the picture. You'd probably want to make sure there aren't any gaps between your regions. Anyway, here is the code to observe a click on the hotspot image:

Qualtrics.SurveyEngine.addOnload(function() {
    $(this.questionId).select('div.HotSpotRegions').first().observe('click', function(event) {
        $('NextButton').click();
    });
});