Animation Javascript in Qualtrics not working

Question

I am trying to create a drag and drop game in Qualtrics using javascript. I intend to use Prototype.js and Scriptaculous.js libraries. To start with, I just wanted to replicate the simple droppables DEMO code in:

http://madrobby.github.io/scriptaculous/droppables/

I did the following:

1) In Qualtrics > Library > Files Library, I uploaded the latest scriptaculous.js, effects.js, and dragdrop.js files.

2) In the Survey > Look & Feel > Header, I inserted these three files from the library in that order. [I have also tried doing this in the footer which some suggest is the 'correct' approach, but it does not make any difference to the problem I describe here]

3) In the Survey > Look & Feel > CSS Editor, I insert the following code:

<style type="text/css">
  div#droppable_container {
     height: 140px;
     width: 400px; 
  }
  div#draggable_demo {
    width: 80px;
    height: 80px;
    cursor: move;
    background: #9fcfba;
    border: 1px solid #666;
    text-align: center;
    position: relative;
    top: 30px;
    line-height: 50px; 
  }
  div#droppable_demo {
    width: 160px;
    height: 120px;
    background: #fff;
    border: 5px solid #ccc;
    text-align: center;
    position: relative;
    top: -60px;
    left: 140px;
    line-height: 100px; 
 }
 div#droppable_demo.hover {
    border: 5px dashed #aaa;
    background:#efefef; 
 }
 .draggable{
    background:#ffffff; 
  }</style>

4) I create a 'descriptive text' question in the survey, and in the HTML code, I add:

<div class="demo" id="droppable_container">
  <div id="draggable_demo" class="draggable">
    Drag me!
  </div>
<div id="droppable_demo">
    Drop here!
 </div>
</div>

5) Finally, I enter the following in the JS editor of the question:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/


   new Draggable('draggable_demo', { 
    revert: true 
   });

   Droppables.add('droppable_demo', { 
     accept: 'draggable',
     hoverclass: 'hover',
     onDrop: function() { $('droppable_demo').highlight(); }
   });
});

In the survey's Look & Feel section (where we edit the CSS/header/footer etc.), I see the UI seems to be working fine, and I can drag the box into the target. Please see the screenshot here:

https://www.acsu.buffalo.edu/~goswami4/LF.png

However, now when I try to preview or launch the survey. I see the UI (the div boxes) but nothing happens to the animation (I cannot drag and drop). If I inspect the element in the browser, I see there are the following errors:

Failed to evaluate page script in page uncaught exception: script.aculo.us requires the Prototype JavaScript framework >= 1.6.0.3   vendor.cd475ea4947919930974.js:1:4131
Failed to evaluate page script in page uncaught exception: script.aculo.us requires the Prototype JavaScript framework >= 1.6.0.3   vendor.cd475ea4947919930974.js:1:4131
Failed to evaluate page script in page Script error.   vendor.cd475ea4947919930974.js:1:4131
Failed to evaluate page script in page uncaught exception: dragdrop.js requires including script.aculo.us' effects.js library   vendor.cd475ea4947919930974.js:1:4131
Failed to evaluate page script in page Script error.

I am not sure what might be the issue. Any suggestions would be greatly appreciated.

Answer 1

JFE is the issue. Try adding &Q_JFE=0 to the survey url.

script.aculo.us is looking for Prototype.Version, but it isn't there in JFE. Since JFE is a virtual environment, prototypejs is being loaded in some convoluted way.

Other than running the survey in SE (non-JFE), I can't think of any easy way around your issue.