Request for inclusion of ranking question with drag and drop functionality in engagement surveys

Vinoth_Mathaiyan

I can see rank order question with drag n drop functionality. Am i missing anything in your question?

Hi Vinoth_Mathaiyan ,
Here is custom code for the same which you can add below HTML/CSS code in a text/Graphic type question's Rich Content Editor to achieve the same.

Now in JS API of Qualtrics you can add the below code:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
const items = document.querySelectorAll('.item'); // select all elements with class 'item'
const nextButton = document.querySelector('#NextButton'); // select the button with ID 'NextButton'

// loop through each item and add event listeners for drag and drop actions
for (const item of items) {
 item.addEventListener('dragstart', handleDragStart);
 item.addEventListener('dragover', handleDragOver);
 item.addEventListener('drop', handleDrop);
}

// handle the start of a drag action by setting the data to be transferred and changing the background color of the source element
function handleDragStart(e) {
 e.dataTransfer.setData('text', e.target.innerHTML); // set the data to be transferred as the innerHTML of the target element
 e.target.style.backgroundColor = 'lightgray'; // change the background color of the target element to lightgray
}

// handle the dragover event by preventing the default behavior
function handleDragOver(e) {
 e.preventDefault();
}

// handle the drop event by swapping the innerHTML of the source and target elements
function handleDrop(e) {
 e.preventDefault();
 const source = e.dataTransfer.getData('text'); // get the data transferred from the source element
 const target = e.target; // get the target element
 const targetIndex = Array.from(items).indexOf(target); // get the index of the target element
 const sourceIndex = Array.from(items).findIndex(el => el.innerHTML === source); // get the index of the source element
 [items[targetIndex].innerHTML, items[sourceIndex].innerHTML] = [items[sourceIndex].innerHTML, items[targetIndex].innerHTML]; // swap the innerHTML of the source and target elements
 target.style.backgroundColor = ''; // reset the background color of the target element
}

// add an event listener to the next button to display the positions of all the ranked items
nextButton.addEventListener('click', function() {
 const positions = Array.from(items).map(item => item.innerHTML); // create an array of the innerHTML values of all the items
 alert(positions); // display the positions in an alert
});


});

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

});

Hope it resolves your query!!

Hi @qualtrics_nerd , will this work for reporting purposes in dashboard like the same Rank order question?

 

Thanks in advance