Modifying existing venn diagram JavaScript code for Qualtrics | XM Community
Skip to main content
I came across this JavaScript to implement a venn diagram measure of overlap:



https://github.com/noahfreedman/qualtrics_venn_diagram



It seems to have been written quite a while ago. The demo is not functioning and the instructions are outdated. But I think the code is usable with a few adjustments, maybe.



Any suggestions on how to use this?
No, but I created a Venn Diagram script that works a completely different way:



!
Thanks. Is this open-source? and can it be adjusted to increments of 1 instead of 10?
No, it is not open source. It modifies a graphic slider ten-gauge so it can only be adjusted in increments of 10.
Where can I find this Venn Diagram script?

I would love to know where to find this script as well!

Hi Hannahkh95,
I got around this in a rather weird way. It's not perfect, so please excuse the non-technical language, but it works. So I used Tom's idea of utilising the 10-gauge slider and created 11 images of overlapping circles, then fed them into the CSS of qualtrics graphic elements. Here's how to do it:

  1. Create a graphic slider and select ten-gauge.

  2. Look & Feel -> Back to Old Editor -> Advanced -> +Add Custom CSS

  3. Paste the attached css code into the box, which will give you control over lots of visual elements. If you look at the 10-gauge section, I have redirected qualtrics to another address, corresponding to the images I wanted to show up (i.e. 11 stages of overlap), but really you can choose any image as long as you are careful with the size and formatting.

Although within qualtrics it may still look like a ten gauge, when you preview/publish, the right diagrams will show up. If this doesn't work, try changing the theme/template of the survey. I hope this helps.
1.png2.png3.png4.pnga.pngcss.txt

Thank you so much!!! This is amazing 😃

Does anyone know how to get a version of the Venn diagram that depicts full overlap?

https://community.qualtrics.com/XMcommunity/discussion/comment/40930#Comment_40930I realise this is a while back now but I would really be interested in knowing the answer to this too!

Hi Hannahkh95,
I got around this in a rather weird way. It's not perfect, so please excuse the non-technical language, but it works. So I used Tom's idea of utilising the 10-gauge slider and created 11 images of overlapping circles, then fed them into the CSS of qualtrics graphic elements. Here's how to do it:

  1. Create a graphic slider and select ten-gauge.
  2. Look & Feel -> Back to Old Editor -> Advanced -> +Add Custom CSS
  3. Paste the attached css code into the box, which will give you control over lots of visual elements. If you look at the 10-gauge section, I have redirected qualtrics to another address, corresponding to the images I wanted to show up (i.e. 11 stages of overlap), but really you can choose any image as long as you are careful with the size and formatting.


Although within qualtrics it may still look like a ten gauge, when you preview/publish, the right diagrams will show up. If this doesn't work, try changing the theme/template of the survey. I hope this helps.
1.png2.png3.png4.pnga.pngcss.txt

 

Hi Easa, is there a way to download your css file and use your adaptation? Qualtrics will not allow me to download the .txt, but I am also not sure if it will still work given how much time has passed.

 

Thank you!

Leave a Reply


Terms & Conditions