Custom Drag and Drop javascript not working in Qualtrics | XM Community
Question

Custom Drag and Drop javascript not working in Qualtrics

  • 24 June 2020
  • 1 reply
  • 20 views

I am using Rednips drag and drop javascript code (https://www.redips.net/javascript/drag-and-drop-table-content/) to drag elements from one table to another and record the position of those dragged items on the submit button. This works as an html file but in qualtrics the elements aren't able to be dragged. Can anyone help me with this? From what I've read it should be possible to do so. This is what it is supposed to look like with the blue boxes able to be dragged into the table on the right:
Annotation 2020-06-24 163949.png


1 reply

Userlevel 7
Badge +27

Hi there, if you still need, I was able to get an example of Redips drag and drop to work on my end. First, head over to the General section of the survey's Look & Feel and paste the below into the Header:
 
Then, to capture the table output, head over to the Survey Flow and create an Embedded Data element at the very top of the Flow. Create an Embedded Data field called "TableContents".
Next, head to the Builder and create a Text/Graphic question. Using the Rich Content Editor's HTML/Source view "<>", paste in the below:
Please drag and drop the below options.

 















































You can not drop here

Text1

 
Text2


Text3

 

Text4

     
Text5

 
Text6

     
   
Text7

   
       
Text8



Finally, update the question's JavaScript with the below:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

var redipsInit = REDIPS.drag.init();

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

});

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

});

Qualtrics.SurveyEngine.addOnPageSubmit(function()
{
var tbl = document.getElementById("tbl");
var content = REDIPS.drag.saveContent(tbl);
Qualtrics.SurveyEngine.setEmbeddedData("TableContents", content);

});
The output gets saved to the Embedded Data field of TableContents but will require some parsing to make sense of the drag and drop placements. The query output follows the format described here.
RedipsDND.png

Leave a Reply