Hi! Thanks in advance for any help. I have a survey that users will return to each week over a 16 week period. I created a multiple choice menu with 16 options - one for each week - and branching for each “lesson” according to which option they select.
Ideally, I want a user to only see “lesson 1” as a menu option during their first 7 days in the program. On the 8th day, I want them to see “lesson 1” and “lesson 2”, and so on through the end of the intervention, such that on day 106, they see all lessons, including “lesson 16”.
I tried to accomplish this by using embedded variables based on adding X number of days to their STARTDATE variable, assigned at screening, ie:
WEEKTWO = ${date://STARTDATE/c/+7%20day}
With help from chatgpt, I then tried to use javascript to accomplish this time-delayed branching, but nothing has worked.
Any ideas on how to accomplish my goal? Thank you so much!
Page 1 / 1
Hey @rooper.
nice challenge. I tested it with this question:
Implemented this code and added it as JavaScript to the multiple choice question:
Qualtrics.SurveyEngine.addOnload(function() { var startDateStr = "${e://Field/START}"; // Format: MM-DD-YYYY
// Parse the start date var startDateParts = startDateStr.split("-"); var startDate = new Date(startDatePartsa2], startDatePartsa0] - 1, startDatePartsa1]); // YYYY, MM-1, DD
// Get today's date var today = new Date();
// Calculate the difference in days var diffTime = today - startDate; var diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
// Determine how many list items to show var weeksSinceStart = Math.floor(diffDays / 7);
// Select the list items var listItems = document.querySelectorAll("#" + this.questionId + " .QuestionBody .ChoiceStructure .Selection");
// Hide all list items initially listItems.forEach(function(li) { li.style.display = "none"; });
// Show the appropriate number of list items for (var i = 0; i <= weeksSinceStart && i < listItems.length; i++) { listItemsti].style.display = ""; } });
And in the survey flow before the multiple choice question block I defined some embedded data field START in format MM-DD-YYYY:
This date is the first date of the first week of your lessons. In my example, I let it start 2 days ago. Taking the survey results in this view:
If I change START to 07-15-2024 and let it start one week earlier:
Change to 06-17-2024:
Change to some date later than today:
Hope I could help!
Best Christian
Hey @chackbusch, wow, thank you so much for your thoughtful help! This looks great. One challenge: the patients in this study will onboard to the program on different days, such that every person’s START will be staggered. That’s why I thought STARTDATE could be a good way to go, since that is embedding correctly according to when my test accounts start the survey. Is there a way to adapt your approach to accommodate their offset start dates? Thanks again!
@rooper Sure. Replace the START value with this piped text:
And slightly adjust the code to consider “/” instead of “-”:
Qualtrics.SurveyEngine.addOnload(function() { var startDateStr = "${e://Field/START}"; // Format: MM/DD/YYYY
// Parse the start date var startDateParts = startDateStr.split("/"); var startDate = new Date(startDatePartsr2], startDatePartsr0] - 1, startDatePartsr1]); // YYYY, MM-1, DD
// Get today's date var today = new Date();
// Calculate the difference in days var diffTime = today - startDate; var diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
// Determine how many list items to show var weeksSinceStart = Math.floor(diffDays / 7);
// Select the list items var listItems = document.querySelectorAll("#" + this.questionId + " .QuestionBody .ChoiceStructure .Selection");
// Hide all list items initially listItems.forEach(function(li) { li.style.display = "none"; });
// Show the appropriate number of list items for (var i = 0; i <= weeksSinceStart && i < listItems.length; i++) { listItems i].style.display = ""; } });
The embedded data should be placed before the first question so that the current date is set for START when the survey is started.
Best Christian
Thank you again for your help and apologies for the follow ups -- I’m still running into an issue for some reason. I embed the START variable at the top of my survey flow, along with a few other variables.
Then, I combined our javascript in my multiple choice question (mine hides the next button and advances to the next page upon selection). That code looks like this:
Qualtrics.SurveyEngine.addOnload(function() { // First functionality: Hide navigation buttons and auto-advance on choice selection if ($('NextButton')) { $('NextButton').hide(); } if ($('PreviousButton')) { $('PreviousButton').hide(); } var that = this;
// Automatically advances to the next page after a choice is made this.questionclick = function(event, element) { if (element.type == 'radio') { switch (element.id) { case 'QR~QID602~24': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson1"); break; case 'QR~QID602~6': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson2"); break; case 'QR~QID602~8': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson3"); break; case 'QR~QID602~10': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson4"); break; case 'QR~QID602~12': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson5"); break; case 'QR~QID602~14': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson6"); break; case 'QR~QID602~16': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson7"); break; case 'QR~QID602~20': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson8"); break; case 'QR~QID602~32': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson9"); break; case 'QR~QID602~61': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson10"); break; case 'QR~QID602~62': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson11"); break; case 'QR~QID602~63': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson12"); break; case 'QR~QID602~64': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson13"); break; case 'QR~QID602~65': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson14"); break; case 'QR~QID602~66': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson15"); break; case 'QR~QID602~67': Qualtrics.SurveyEngine.setEmbeddedData("FirstTocSelected", "Lesson16"); break; } that.clickNextButton(); } }
// Second functionality: Show list items based on weeks since start date var startDateStr = "${e://Field/START}"; // Format: MM/DD/YYYY
// Parse the start date var startDateParts = startDateStr.split("/"); var startDate = new Date(startDatePartsa2], startDatePartsa0] - 1, startDatePartsa1]); // YYYY, MM-1, DD
// Get today's date var today = new Date();
// Calculate the difference in days var diffTime = today - startDate; var diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
// Determine how many list items to show var weeksSinceStart = Math.floor(diffDays / 7);
// Select the list items var listItems = document.querySelectorAll("#" + this.questionId + " .QuestionBody .ChoiceStructure .Selection");
// Hide all list items initially listItems.forEach(function(li) { li.style.display = "none"; });
// Show the appropriate number of list items for (var i = 0; i <= weeksSinceStart && i < listItems.length; i++) { listItemsti].style.display = ""; } });
But when I go to my survey, I still see all the options displayed, even though this test account is only in week 2.
Thank you so much again for all your help today! I really appreciate it.
Hey @chackbusch, I just wanted to say I got this working today based on your code -- thanks again for your help, you really made a big difference in my ability to make this project work. Thank you!
@rooper Thank you for the feedback! Actually I did not have your last comment on my list. Glad you could finalize it on your own!
