Javascript анимации в Qualtrics не работает

Я пытаюсь создать игру с перетаскиванием в Qualtrics, используя javascript. Я намерен использовать библиотеки Prototype.js и Scriptaculous.js. Для начала я просто хотел воспроизвести простой код DEMO droppables в:

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

Я сделал следующее:

1) В Qualtrics > Library > Files Library я загрузил последние файлы scriptaculous.js, Effects.js и dragdrop.js.

2) В Survey > Look & Feel > Header я вставил эти три файла из библиотеки именно в таком порядке. [Я также пытался сделать это в нижнем колонтитуле, что, по мнению некоторых, является «правильным» подходом, но это не имеет никакого значения для проблемы, которую я здесь описываю]

3) В «Обзор» > «Внешний вид» > «Редактор CSS» я вставляю следующий код:

<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) Я создаю в опросе вопрос с описательным текстом и добавляю в код 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/верхний/нижний колонтитул и т. д.) я вижу, что пользовательский интерфейс работает нормально, и я могу перетащить поле в цель. Пожалуйста, смотрите скриншот здесь:

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

Однако теперь, когда я пытаюсь просмотреть или запустить опрос. Я вижу пользовательский интерфейс (блоки 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.

Я не уверен, в чем может быть проблема. Любые предложения будут ценны.


person user2758050    schedule 30.11.2017    source источник


Ответы (1)


Проблема в JFE. Попробуйте добавить &Q_JFE=0 к URL-адресу опроса.

script.aculo.us ищет Prototype.Version, но его нет в JFE. Поскольку JFE — это виртуальная среда, прототипы загружаются каким-то запутанным образом.

Кроме проведения опроса в SE (не JFE), я не могу придумать никакого простого способа обойти вашу проблему.

person T. Gibbons    schedule 30.11.2017
comment
Благодарим за ваше предложение. Я пробовал: buffalo.qualtrics.com/jfe/form/SV_6mxXGAkUL7kt8KF&Q_JFE=0. но он говорит, что не может найти URL. Не уверен, что это то, что вы имели в виду? - person user2758050; 30.11.2017
comment
Я также пытался использовать buffalo.qualtrics.com/SE/?SID=SV_6mxXGAkUL7kt8KF, но он меняет его обратно на JFE и не работает. - person user2758050; 30.11.2017
comment
Хорошо, я попробовал buffalo.qualtrics.com/SE/?SID=SV_6mxXGAkUL7kt8KF&Q_JFE=0 и он работает нормально. Большое спасибо за помощь в решении проблемы. - person user2758050; 30.11.2017