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.
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?
dipeshsingh : It seems you're not using Engagement Survey platform
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
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!!
qualtrics_nerd : Thank you so much, it helps!
Hi
Thanks in advance
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.