Is there a code for the drag and drop questions so respondents are dragging words into an image? | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

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

  • Aug 16, 2018 4:35 AM UTC
  • 4 replies
  • 1061 views
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

    4 replies

    • Anonymous
    • Answer
    • Aug 16, 2018 6:32 AM UTC
    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
      • Jane
      • Author
      • Aug 17, 2018 3:41 AM UTC
      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. !
      PraDeepKotian_XM
      QPN Level 5 ●●●●●
      Forum|alt.badge.img+21
      • PraDeepKotian_XM
      • QPN Level 5 ●●●●●
      • Aug 17, 2018 12:37 PM UTC
      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: !
      PK
        • Jane
        • Author
        • Aug 20, 2018 6:08 AM UTC
        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!
        Terms & ConditionsAccessibility statement