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