Is there a code for the drag and drop questions so respondents are dragging words into an image? | XM Community
Solved

Is there a code for the drag and drop questions so respondents are dragging words into an image?

  • 16 August 2018
  • 4 replies
  • 496 views
J
Is there a code for the drag and drop questions so respondents are dragging words into the image rather than a box below it?

Thanks!
icon

Best answer by Anonymous 16 August 2018, 08:32

View original

4 replies

J
Thank you!

I should have specified that I was originally using the 'matrix' drag and drop question format not the 'pick, group and rank' one, so I had a bit of trouble getting the code to work for a while. As soon as I changed it to the pick, group and rank question though, it worked!

This was really helpful, I've not really done any coding before so this is all very new to me! Thanks!
PraDeepKotian_Ugam
Rank
Userlevel 6
Badge +21
hello @Jane ,
First clear your javascript you inserted and then you have to paste code inside Qualtrics.SurveyEngine.addOnReady(function(){ });

Below image will help you to understand better:

!
J
Thank you!

The code doesn't seem to be working for me though when I tried it, any reason why that would be? I've attached an image of how the code looks when I put it into the question editor.
!
A
Hello @Jane ,

Paste the below code in the drag and drop question js(onready) option:

jQuery("#"+ this.questionId+" td.groupsContainerTd > div > div > h2 ").hide();

jQuery("#"+ this.questionId+" td.groupsContainerTd > div:eq(0) > div ").css({'border':'none', "background-image":"url(http://pluspng.com/img-png/lion-hd-png--2800.png)",'background-repeat': 'no-repeat',
' background-attachment': 'fixed',
'background-position': 'center','background-size':'contain' });

jQuery("#"+ this.questionId+" td.groupsContainerTd > div:eq(1) > div ").css({'border':'none', "background-image":"url(https://media.indiedb.com/images/games/1/14/13306/goat_rend1.png)",'background-repeat': 'no-repeat',
' background-attachment': 'fixed',
'background-position': 'center','background-size':'contain'});


jQuery("#"+ this.questionId+" td.groupsContainerTd > div:eq(2) > div ").css({'border':'none', "background-image":"url(http://www.pngall.com/wp-content/uploads/2016/05/Nature-PNG-HD.png)",'background-repeat': 'no-repeat',
' background-attachment': 'fixed',
'background-position': 'center' ,'background-size':'contain'});

Replace the url with your own image url

Output of the above code:!

Please find the qsf file for better understanding

Leave a Reply


Terms & Conditions