Solved
Is there a code for the drag and drop questions so respondents are dragging words into an image?
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!
Best answer by Anonymous
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
View original
Please find the qsf file for better understandingHello @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
Please find the qsf file for better understandingThank 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.
!
+21hello @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:
!
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!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.