Embed external content to be viewed within survey window (and record selections) | XM Community
Solved

Embed external content to be viewed within survey window (and record selections)

  • 29 March 2018
  • 6 replies
  • 94 views
L
Hi everyone! I'm hoping someone can help me out with sort of a strange request. As part of my dissertation study, I would like to allow survey respondents to view content from a list that I provide. My ultimate goal is to record 1) which items they viewed (if any), 2) how long they viewed them, and 3) whether they returned to material they had previously viewed. After they do this, I would like them to complete the rest of the survey.

Ideally, some of the items would be external websites shown via hyperlink (i.e., the participant could read through content on the external website) that *don't* open in a separate tab or window. (I would rather avoid other tabs/windows because I don't want respondents to forget that they're still taking the survey. It's easy to fall into a rabbit hole with this topic.) Maybe the other sites could pop up in a lightbox or something similar, or maybe they could be contained/embedded within part of the response list... kind of like an accordion content section that could be collapsed after they're done. I'm 100% open to other options too. Regardless, I'm hoping this can work across browsers and devices.

I have a Qualtrics license through my department and am limited to the options available in the Research Core (can't get the API). My programming skills aren't anything to write home about, but I'm willing to learn! This may or may not be possible in Qualtrics - or in programs that could be embedded in a Qualtrics survey - but I wanted to ask the community before I gave up. Hopefully I'm not missing something obvious.

I hope this made sense, but I can provide additional info if desired. Thanks for your time!
Lindsay
icon

Best answer by TomG 29 March 2018, 23:24

View original

6 replies

TomG
Rank
Userlevel 7
Badge +27
You can show your external content in iframes. You can set up a toggle button for each iframe to hide or show the iframe when clicked using JavaScript. The timing and return things will be a bit tricky, but doable.
L
Thank you, @TomG! I can try to create the iframes with some of the JavaScript syntax that's floating around online. In terms of the toggle functionality, would I want to use JS or jQuery? Sorry if this is a dumb question - I've never used either, and I didn't know if jQuery's inclusion would make it easier.

For the timing and return stuff, it would be ideal if I could record each time an iframe was expanded and how long it was open each time. If I can only record whether a frame was viewed (yes/no) and the total time it was viewed (across clicks), that would also be fine. I assume I would use event tracking and embedded data to coordinate this, but I don't want to put the cart before the horse here. Iframes first, haha!
TomG
Rank
Userlevel 7
Badge +27
jQuery will make it a bit easier. You are on the right track. Your logic for your timing and view count variables will be tied to the button clicks.
G
Hi there. i just saw this conversation and I am trying to solve a similar issue: I am trying to record whether a frame was viewed (yes/no), the total time it was viewed (across clicks), and the order it was reviewed. my frames are hidden behind a fuzzy panel. The respondents need to click on them to see what is behind. I am interested in using this embedded data and event tracking. But can you please explain a bit more as I am not super savvy when it comes to these details? Thank you so much!
L
Been a bit since I posted, but I'm honestly stuck! @TomG I was able to create iframes with no issues. I also found jQuery syntax (stopPropagation) that closes the an active iframe if anything outside of it is clicked. Thank you for your help 😀

The toggle buttons are where it has gotten tricky. The good news is that I can make the buttons, and the buttons can open/close iframes. The bad news is that I haven't been able to toggle the iframe displays. For example, if I have Buttons A & B that are associated with iframes A & B, clicking Button A will open/close both iframe A and iframe B (same for Button B ). I've tried to remedy this several different ways:

* trying to define functions where A is visible + B is hidden/B is visible + A is hidden and linking the function to jQuery toggle commands;
* trying to tie these functions to click events instead of a jQuery toggle command;
* trying to use the div id for A in one toggle command and the div id for B in another;
* trying to define A & B with various data-role types (accordion, collapsible, etc);
* adding custom CSS (which was probably wrong) to the header;
* ...and more that I can't really even explain.


Am I barking up the wrong tree here? I feel like I'm making things too complicated, but I'm kind of at a loss. I need to get rolling with data collection soon and this is killing me.

(As a side note, I can't seem to set things up so that all iframes are hidden when the page loads. If I try to set the display style to "none" the iframes never show up.)

I really appreciate any help, and I can provide additional info if needed. Thanks so much!

@Gizem, it sounds like we're doing very similar things. If you've figured out a solution, I'd love to hear it! If not, I am happy to share my materials with you once I figure it out 😉
M
Badge +2
Hello @Gizem @lrroberts @TomG !

I am doing a similar project for my master's thesis. I would like to embed full web pages within the survey, and record how much time is spent browsing each page. If possible, I would also like to allow for respondents to click on more links that are within the embedded web pages, and record those as well... But I don't know how possible that is.

Has anyone figured out the solution to this? If so, I would really appreciate any shared guidance and/or code! I am a novice coder, unfortunately, but I am eager to learn.

Thanks so much in advance!
-Isaac

Leave a Reply


Terms & Conditions