Image-Based Drag and Drop Question

 

Add the following to your Javascript editor in Qualtrics: 

(click the link in upper righthand corner to copy)

Qualtrics.SurveyEngine.addOnload(function()
{
	 jQuery("#"+ this.questionId+"  td.groupsContainerTd > div > div  > h2 ").hide();

    jQuery("#"+ this.questionId+"  td.groupsContainerTd > div:eq(0) > div  ").css({'border':'5px solid lime', "background-image":"url(https://cornell.qualtrics.com/CP/Graphic.php?IM=IM_cUNKuLWE87lkAD3)",'background-repeat': 'no-repeat',
   ' background-attachment': 'fixed',
    'background-position': 'center','background-size':'contain' });

    jQuery("#"+ this.questionId+"  td.groupsContainerTd > div:eq(1) > div  ").css({'border':'5px solid blue', "background-image":"url(https://cornell.qualtrics.com/CP/Graphic.php?IM=IM_2gb0yIABmGaKjvn)",'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'});
	
	jQuery("#"+ this.questionId+" td.groupsContainerTd > div > div ").css("width","300px");
	jQuery("#"+ this.questionId+" td.groupsContainerTd > div > div ").css("height","300px");

});

Qualtrics.SurveyEngine.addOnReady(function()
{

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

 

See it in action:

(refresh the page to see it again)

 

Leave a Reply

Your email address will not be published. Required fields are marked *