Recording location of a graphic within an animation | XM Community
Skip to main content

Hello,
I have an animation in which a stick figure moves across the radius of a circle from the periphery toward the center. When the space bar is pressed, the survey moves on to the next question. I need to know the distance the stick figure is from the center of the circle when the space bar is pressed. Can anyone help me with a custom code to record this distance in my data?
If it is relevant, this task involves such animations appearing about 100 times and I need the distance recorded each time (I'm assuming if there is a javascript code which would do this I can just put it in the javascript on each of these questions.)

Thank you!

The method will depend upon the animation you are using. It will be different if its a CSS animation, a gif, a video etc.
It would help if you could either share a QSF or the link to the preview.

The animation is a gif. This is a link to the qualtrics preview: https://biusocialsciences.eu.qualtrics.com/jfe/preview/SV_1Bufdt6Czvfx7pk?Q_CHL=preview&Q_SurveyVersionID=current
Thank you so much for your help!

I'm thinking maybe there is some way to achieve this using a Heat Map question. If I could set a javascript so that when participants press the space bar, the coordinates of the moving graphic are recorded, as if the participants had clicked on the screen where the graphic was at that moment. Ie space bar is translated into clicking on the moving graphic.
Do you know how this could be done? Are there simpler alternatives?
Again, thank you so much- I really appreciate your assistance.

It appears that tracking a gif is quite complicated and will not be possible without importing some external libraries. An alternate route is to convert the gif to a video and track it's progress. There are two ways to do that via Data.now and CurrentTime. There is some minor difference in the elapsed time and you can choose the one based on your requirements. Here's the demo along with the question JS and HTML.

Thank you so much!
I just want to clarify a few things to make sure I understand what information this provides.

  1. So by doing this, what I am receiving in my data is the response time (at what time they press the spacebar), not the location of the graphic, correct? I know that generally response time on qualtrics is not so accurate, but this is essentially giving me the time the video was "paused", right? (If I use the el_time embedded variable)

  2. Since I have about 100 stimuli, I should give each embedded data value a unique name (a unique name for each question the javascript appears in) and then add all those names as embedded data in the survey flow so that they will be downloaded with my data? For example "time_thru_play1" "time_thru_play2" etc?


One more small thing- is there a way to set the autoplay on a one second delay? So that it will appear still for one second and then begin to play?

  1. Yes el_time will give you the duration of the clip played. Which will allow to identify the location of the stick figure.

  2. Yes. However, if you are going to use more than one on the same page, you'll also need to change the ID and also the name of other variables.

  3. Remove the autoplay and add a.play within a setTimeout method. You'll find plenty of resources regarding this online.

Leave a Reply


Terms & Conditions