Auto-advance by clicking on heatmap regions | XM Community
Skip to main content
Solved

Auto-advance by clicking on heatmap regions

  • July 12, 2018
  • 6 replies
  • 283 views

Rah
Forum|alt.badge.img+2
Hi all, I´m using the following Javascript code to both hide my next button and make advancing to the next page conditional on clicking on the current page. Qualtrics.SurveyEngine.addOnload(function() { $('Buttons').hide(); var that = this; this.questionclick = function(event,element){ that.clickNextButton(); } }); This works very well. But I want to modify it such that the transition happens only when "Region1" of the heatmap is clicked on. Could any of you help me with that piece of the code? Thank you, Rah

Best answer by TomG

You can't. The Regions are inside an SVG. The closest you can come is advancing when someone clicks on the div containing the heatmap. ``` jQuery("#"+this.questionId+" .HeatMapContainer").on("click", function () [ jQuery("#NextButton").click(); }); ``` Note: { changed to [ in the code above to avoid Community 'Access Denied' error. Also, you should use addOnReady instead of addOnLoad when doing anything with the buttons.

6 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • Answer
  • July 12, 2018
You can't. The Regions are inside an SVG. The closest you can come is advancing when someone clicks on the div containing the heatmap. ``` jQuery("#"+this.questionId+" .HeatMapContainer").on("click", function () [ jQuery("#NextButton").click(); }); ``` Note: { changed to [ in the code above to avoid Community 'Access Denied' error. Also, you should use addOnReady instead of addOnLoad when doing anything with the buttons.

Rah
Forum|alt.badge.img+2
  • Author
  • July 14, 2018
Thank you very much TomG! As you mentioned, this code does not offer more than what my initial script could do. But it is still good to know.

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • July 14, 2018
@Rah, The difference is your original code would advance if the question was clicked and the code I provided only advances if the image is clicked.

Rah! did you ever figure this out? I'm trying to create a survey that basically mimics Tinder, so they have to click the images or I get no data.

Rah
Forum|alt.badge.img+2
  • Author
  • November 2, 2018
Hi @psychstudentdude Unfortunately, I couldn't do it through heat-map function. But for a tinder-like effect, I had used a combination of two buttons and auto-advancing which worked quite well.

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • November 3, 2018
@psychstudentdude, If you haven't seen it already, you might find this post of interest. The question text or buttons could easily be images.