Request for inclusion of ranking question with drag and drop functionality in engagement surveys | XM Community
Skip to main content

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

  • January 31, 2023
  • 5 replies
  • 120 views

Forum|alt.badge.img+9

Can a ranking question be created in engagement surveys, as there's no existing ranking question type? The desired question requires drag and drop functionality to rank options, and display the rankings.


Ranking.png

5 replies

dipeshsingh
Level 2 ●●
Forum|alt.badge.img+12
  • Level 2 ●●
  • 61 replies
  • January 31, 2023

Vinoth_Mathaiyan

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






Forum|alt.badge.img+9

dipeshsingh : It seems you're not using Engagement Survey platform


qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • Level 5 ●●●●●
  • 225 replies
  • February 3, 2023

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.


Rank the following items in order of importance:




     
  • Item 1

  •  
  • Item 2

  •  
  • Item 3

  •  
  • Item 4



image.png
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*/

});

image.pngHope it resolves your query😊!!


Forum|alt.badge.img+9

qualtrics_nerd : Thank you so much, it helps!


Forum|alt.badge.img+5
  • Level 2 ●●
  • 12 replies
  • January 5, 2024

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

 

Thanks in advance


Leave a Reply