I have a survey to which I've added some Javascript: Participants can use an "add button" and a "remove button" to decide how many groups they which to group the list of items into, by adding and removing groups as they wish. You can see how it works here https://samgu.eu.qualtrics.com/jfe/form/SV_czQxglGYSFUQ6zQ
The problem is that when an item has been added to a group, and a participant decides to remove that group, the items that have been added to that group stays in that group, hidden. So, when they hit the "add button" the perviously chosen items appear in that group again. I wish instad that all items that are in a group that is removed are thrown back into the list of items again.
Is it somehow possible to use Javascript to move items in a way that could help me with this problem?
Current html:
How do I move items in Pick, Group, Rank using Javascript?
Current Javascript:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("div.Group:not(:first)").hide();
jQuery("#addbutton").on('click',function(){ jQuery("div.Group:eq("+parseInt(parseInt(jQuery("div.Group:visible").length))+")").show();
});
jQuery("#removebutton").on('click',function(){ jQuery("div.Group:eq("+parseInt(parseInt(jQuery("div.Group:visible").length-1))+")").hide();
});
});
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .rank").hide();
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Thanks in advance!
Best answer by ahmedA
Qualtrics.SurveyEngine.addOnReady(function () {
let quest = this;
let boxes = quest.questionContainer.querySelectorAll(".AnswerContainer"),
add_button = quest.questionContainer.querySelector("#addbutton"),
remove_button = quest.questionContainer.querySelector("#removebutton"),
tracker = 1,
all_choices = quest.getChoices();
boxes.forEach((box) => box.hide());
boxes[tracker - 1].show();
add_button.onclick = function () {
if (tracker < boxes.length) {
tracker++;
boxes[tracker - 1].show();
} else {
alert("Max Boxes");
}
};
remove_button.onclick = function () {
if (tracker <= 1) {
alert("Min Boxes");
return false;
}
let clear_choices = [];
all_choices.forEach((item) => {
if (quest.getChoiceAnswerValue(item) == tracker) clear_choices.push(item);
});
clear_choices.forEach((ch) => {
quest.setChoiceAnswerValue(ch, tracker, 0);
});
tracker--;
boxes[tracker].hide();
};
});
Qualtrics.SurveyEngine.addOnReady(function () {
let quest = this;
let boxes = quest.questionContainer.querySelectorAll(".AnswerContainer"),
add_button = quest.questionContainer.querySelector("#addbutton"),
remove_button = quest.questionContainer.querySelector("#removebutton"),
tracker = 1,
all_choices = quest.getChoices();
boxes.forEach((box) => box.hide());
boxes[tracker - 1].show();
add_button.onclick = function () {
if (tracker < boxes.length) {
tracker++;
boxes[tracker - 1].show();
} else {
alert("Max Boxes");
}
};
remove_button.onclick = function () {
if (tracker <= 1) {
alert("Min Boxes");
return false;
}
let clear_choices = [];
all_choices.forEach((item) => {
if (quest.getChoiceAnswerValue(item) == tracker) clear_choices.push(item);
});
clear_choices.forEach((ch) => {
quest.setChoiceAnswerValue(ch, tracker, 0);
});
tracker--;
boxes[tracker].hide();
};
});
This won't work for PGR, but if you can move to Matrix Single answer, drag and drop, the code above will do the trick.
Thanks so much for the answer! and it might definitely work using the matrix single answer question type instead.
I tested the code but the problem remains that when I remove a group, the objects that I have put it that box still appears when a group is added again. I need the objects to be thrown back into the list of objects when a group is removed. Am I missing anything that I need to add to the code?
This is how it looks with the code you suggested + my html.
https://samgu.eu.qualtrics.com/jfe/form/SV_8iHuwbj8zS9HNRQ
Thanks again!
Create a new question and copy the JS there.
The problem is that you've probably made changes to your scale points, hence the numbering is not 1,2,3... but is something more like 4,5,6...
Demo.
Oh alright, yeah that works great! Thanks so much for the help.
One problem still remains though: Currently, the item that is thrown back ends up at the end of the list. I need it to go back to its initial place (i.e. Statement 1 goes at the top of the list and not at the end of the list). Would that be possible to solve?
Also, if it's not too much to ask for, I wonder if you would be kind to specify code to keep the items in three-ish columns. I noticed now that a list of 38 items is not that easy to get an overview of when the are all listed in a long list.
The first one is too much work. May get around to it sometime.
For the second one, check out my earlier comments, I think I answered in Dec/Jan. It doesn't keep them in columns, but keeps the boxes in view while scrolling down.
Alright, I understand. Thanks so much for the help, really appreciate it!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.