Display survey element conditionally based on weekly time delay | XM Community
Skip to main content
Solved

Display survey element conditionally based on weekly time delay

  • 24 July 2024
  • 6 replies
  • 49 views

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! 

6 replies

chackbusch
Rank
Userlevel 5
Badge +17

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(startDateParts[2], startDateParts[0] - 1, startDateParts[1]); // 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 = "";
    }
});

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

Driving Qualtrics @ MHP – A Porsche Company 🚀
R
Badge +1

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!

chackbusch
Rank
Userlevel 5
Badge +17

@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(startDateParts[2], startDateParts[0] - 1, startDateParts[1]); // 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

Driving Qualtrics @ MHP – A Porsche Company 🚀
R
Badge +1

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(startDateParts[2], startDateParts[0] - 1, startDateParts[1]); // 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 = "";
    }
});

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. 

R
Badge +1

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!

chackbusch
Rank
Userlevel 5
Badge +17

@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! 🙏🏼

Driving Qualtrics @ MHP – A Porsche Company 🚀

Leave a Reply


Terms & Conditions