Hi Qualtrics Community, I am trying to create something in my survey that mimics the function of a Spoiler filter, like seen on Reddit here: https://i.redd.it/me0kodw5iiay.png
The idea is that the image is obscured until the person clicks to see it. I don't see anything that does specifically that (note: I have no programming/JavaScript skills but can code and edit shared code), and I tried using Skip and Display Logic but couldn't auto-advance (to give the appearance of the filter just going away on its own). The closest that I can figure out would be to manually create the regular image and obscured image outside Qualtrics, then have the obscured image be a Heat Map with one region over the "Click Here" button, and then have the survey auto-advance to the next page with the regular image once they've clicked the region.
The closest similar thing I've found is this post by @Rah : https://www.qualtrics.com/community/discussion/1279/auto-advance-by-clicking-on-heatmap-regions; is the code @TomG posted the closest that can happen? (i.e. click anywhere in image, not just a particular region)? Or is there a better way to do specifically what I am trying to do in clicking an image to change it to another image (or auto-advance to another page)? I also didn't quote parse the code well enough to figure out which parts I'd need to change to be specific to me variables, but I can probably figure that out on my own.
Page 1 / 1
A Heat Map question isn't a good choice for what you are trying to accomplish. I don't think you need multiple pages and questions either.
Hide the non-obscured image to start. When the obscured image is clicked show the non-obscured image and hide the obscured image.
html:
```
<img id="obscured" src="url_of_obscured_image">
<img id="nonObscured" src="url_of_non-obscured_image">
```
JS:
```
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#nonObscured").hide();
jQuery("#obscured").click(function() {
this.hide();
jQuery("#nonObscured").show();
});
});
```
Hide the non-obscured image to start. When the obscured image is clicked show the non-obscured image and hide the obscured image.
html:
```
<img id="obscured" src="url_of_obscured_image">
<img id="nonObscured" src="url_of_non-obscured_image">
```
JS:
```
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#nonObscured").hide();
jQuery("#obscured").click(function() {
this.hide();
jQuery("#nonObscured").show();
});
});
```
Thank you @TomG ! That is exactly what I need and way better than having multiple pages. The only things that could be better would be if I could restrict it to just clicking a designated area on the image instead of anywhere, and/or having the obscured image fade into the non-obscured rather than just instantly switching. But I'm guessing implementing either of these would require way more work than the simple code you shared, so unless you know a method that's nearly as simple I will gladly use this.
For any future visitors trying to do the same thing with the same lack of experience, here are some specifics I had to discover with trial and error since I've never added script to a survey before:
1. To add the HTML code, create a Descriptive Text question and copy the code into the box in HTML view
2. You do keep the quotes around the URL in the HTML code
3. To add the JavaScript, click the gear icon on the question, click to Add JavaScript, and paste it into the top section. Don't paste in the first row since that's already present.
I used Imgur for the image links because I'm used to it, but it's probably not the most reliable. Is there a way to use uploaded images to my Qualtrics library or does it only use external links?
For any future visitors trying to do the same thing with the same lack of experience, here are some specifics I had to discover with trial and error since I've never added script to a survey before:
1. To add the HTML code, create a Descriptive Text question and copy the code into the box in HTML view
2. You do keep the quotes around the URL in the HTML code
3. To add the JavaScript, click the gear icon on the question, click to Add JavaScript, and paste it into the top section. Don't paste in the first row since that's already present.
I used Imgur for the image links because I'm used to it, but it's probably not the most reliable. Is there a way to use uploaded images to my Qualtrics library or does it only use external links?
Actually @TomG if you don't mind answering one additional question that's not just making it more advanced (thank you so much for the help already) - can I make it so some follow-up questions on the same page don't show up until they have clicked the the image? Again I don't know JS or how it interacts with Qualtrics, but if I have a few multiple choice questions later on the page, can I add something like jQuery("#nonObscured").show(); but with the question ID instead of #nonObscured? Is that possible?
> @Bofstein said:
> I used Imgur for the image links because I'm used to it, but it's probably not the most reliable. Is there a way to use uploaded images to my Qualtrics library or does it only use external links?
Yes, you can upload images to your Qualtrics Library. After uploading, just copy the image's url into your html.
> @Bofstein said:
> Actually @TomG if you don't mind answering one additional question that's not just making it more advanced (thank you so much for the help already) - can I make it so some follow-up questions on the same page don't show up until they have clicked the the image? Again I don't know JS or how it interacts with Qualtrics, but if I have a few multiple choice questions later on the page, can I add something like jQuery("#nonObscured").show(); but with the question ID instead of #nonObscured? Is that possible?
Yes, you can initially hide questions then show them when the image is clicked. You can refer to a question by its QID, for example:
```
jQuery("#QID123").hide();
```
> I used Imgur for the image links because I'm used to it, but it's probably not the most reliable. Is there a way to use uploaded images to my Qualtrics library or does it only use external links?
Yes, you can upload images to your Qualtrics Library. After uploading, just copy the image's url into your html.
> @Bofstein said:
> Actually @TomG if you don't mind answering one additional question that's not just making it more advanced (thank you so much for the help already) - can I make it so some follow-up questions on the same page don't show up until they have clicked the the image? Again I don't know JS or how it interacts with Qualtrics, but if I have a few multiple choice questions later on the page, can I add something like jQuery("#nonObscured").show(); but with the question ID instead of #nonObscured? Is that possible?
Yes, you can initially hide questions then show them when the image is clicked. You can refer to a question by its QID, for example:
```
jQuery("#QID123").hide();
```
TomG , How can we do flip over image like showing one image and show text flip over, and when clicked they see another image. So i have 2 images front and back and want to show one or other on click (with some text) or any other suggestion.
TomG , This code solve most of the purpose can we amend like to check if someone have clicked to see other image. Also can we do another click to bring back to normal so kind of infinite loop (changing image on click) and also show some button say flip over
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.