Qualtrics 中的动画 Javascript 无法正常工作

Question

我正在尝试使用 javascript 在 Qualtrics 中创建拖放游戏。我打算使用 Prototype.js 和 Scriptaculous.js 库。首先，我只想复制简单的 droppables DEMO 代码：

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

我做了以下事情：

1) 在 Qualtrics > Library > Files Library 中，我上传了最新的 scriptaculous.js、effects.js 和 dragdrop.js 个文件。

2) 在 Survey > Look & Feel > Header 中，我按顺序从库中插入了这三个文件。 [我也尝试在页脚中这样做，有人建议使用 'correct' 方法，但这对我在此处描述的问题没有任何影响]

3) 在 Survey > Look & Feel > CSS Editor 中，我插入以下代码：

<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) 我在调查中创建了一个 'descriptive text' 问题，并在 HTML 代码中添加：

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

5) 最后，我在问题的JS编辑器中输入以下内容：

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(); }
   });
});

在调查的外观部分（我们编辑 CSS/header/footer 等），我看到 UI 似乎工作正常，我可以将框拖到目标中。请在此处查看屏幕截图：

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

但是，现在当我尝试预览或启动调查时。我看到 UI（div 框）但动画没有任何反应（我无法拖放）。如果我检查浏览器中的元素，我看到有以下错误：

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.

我不确定可能是什么问题。任何建议将不胜感激。

Answer 1

JFE 是问题所在。尝试将 &Q_JFE=0 添加到调查 url 中。

script.aculo.us 正在寻找 Prototype.Version，但它不在 JFE 中。由于 JFE 是一个虚拟环境，prototypejs 以某种复杂的方式加载。

除了运行 SE（非 JFE）中的调查，我想不出任何简单解决您的问题的方法。

Qualtrics 中的动画 Javascript 无法正常工作

Animation Javascript in Qualtrics not working

javascript

css

prototypejs

qualtrics

scriptaculous