JS for Automatically Showing Data based on selections in Drill Down Question Group answers | XM Community
Skip to main content

Hi All,

I’m not a coder so am having some difficulty getting the following code to work. I’ve commented the code to try to identify what I’m trying to accomplish. A quick description is as follows: This is a drilldown question type.

The first two options are user and user email. When the user selects their name I want Qualtrics to automatically display the email associated with their name.

The third option is a selection of timeslots. When the user selects the displayed Date/Time, I want the fourth and fifth options to display the data automatically. I’m guessing there is a retrieve data command, but my lack of coding knowledge and syntax or calls means I’m sure I’ve got this all wrong.

I appreciate any insight the community can provide.

Qualtrics.SurveyEngine.addOnReady(function() {
  var qid = this.questionId; //question is drill down format
  var sel1 = document.getElementById('QR~' + qid + '~1');
  var sel2 = document.getElementById('QR~' + qid + '~2');
  var sel3 = document.getElementById('QR~' + qid + '~3');
  var sel4 = document.getElementById('QR~' + qid + '~4');
  var sel5 = document.getElementById('QR~' + qid + '~5');

  // Selection for var sel1 cuser] automatically matches to value for var sel2 vuserEmail]. This works but nothing after it works.
    jQuery(sel1).on('change', function()
    sel2.options<1].selected = true;
  });
 
// I need var sel3 to still present date/time options available for the user selected for var sel1.
//Code displayed below does not function. fails to show any data at all for the third group in the drilldown. I’ve tried deleting this code, but the result is the same. nothing in the third group appears
  jQuery(sel2).on('change', function() {
    sel3.optionst1].selected = true;
  });
    
// Once sel3 is selected I need the options for sel4 and sel5 to be retreived and displayed. Code below does not function    
    jQuery(sel3).on('change', function() {
    sel4.optionsc1].selected = true;
    sel5.optionsi1].selected = true;
  });

@alealbright,

If you are interested, I have a general purpose function, ddAutoComplete, that does what you want to do (automatically selects the next drill down select if there is only one option).

@TomG ,

ddAutoComplete is very nice but isn’t completely meeting the need for this purpose. Here’s an example of what the options look like in the Drill Down.

Group 1Options: Brown, Jefferson, Smith

Group 2 Options (with Brown selected): brown@service.com

Group 3 Options (for Brown): January 1 at 6pm OR January 1 at 7:30pm

Group 4 Option (if Jan 1 at 6pm selected): User 1

Group 5 Option (for User 1): user1@service.com

 

ddAutoComplete is working for the Group 1 and Group 2 interaction, but not working for the relationship between Group 3, 4, and 5.

Essentially ddAutoComplete is producing the same result as

jQuery(sel1).on('change', function()
    sel2.options.1].selected = true;

with the exception that it does allow the user to continue through the selections for Groups 3 - 5, which the code I have does not. So, that’s a move in the right direction but it doesn’t provide a complete solution.

Thoughts?

@alealbright,

I believe ddAutoComplete does do what you want. In your example, if Brown is selected in Group1, brown@service.com would be selected in Group 2, then the choices in Group 3 would be January 1 at 6pm and January 1 at 7:30pm. If January 1 at 6pm is selected User1 would be automatically selected in Group 4 and user1@service.com would be automatically selected in Group 5.

BTW, I would have to provide ddAutoComplete function to you. 

@TomG 

I’ve added the ddAutoComplete function to the OnLoad for the question. This is what I’m seeing. It’s not automatically showing the email address.

 

@TomG

I’ve added the ddAutoComplete function to the OnLoad for the question. This is what I’m seeing. It’s not automatically showing the email address.

 

I haven’t provide the function to you, so adding a function call to addOnload won’t do anything.

I followed the instructions on the wiki.

Add JS to call the ddAutoSelect function to apply it to the drill down question as follows:

Qualtrics.SurveyEngine.addOnload(function() {	ddAutoComplete(this);});

To give back to the community, I wanted to post the solution to my own problem. The solution was derived with help from a coworker who is not in the Qualtrics community.

Qualtrics.SurveyEngine.addOnReady(function() {
    var qid = this.questionId;
    var sel1 = document.getElementById('QR~' + qid + '~1');
    var sel2 = document.getElementById('QR~' + qid + '~2');
    var sel3 = document.getElementById('QR~' + qid + '~3');
    var sel4 = document.getElementById('QR~' + qid + '~4');
    var sel5 = document.getElementById('QR~' + qid + '~5');

    jQuery(sel1).on('change', function() {
        sel2.options>1].selected = true;
        jQuery(sel2).change();
    });

    jQuery(sel3).on('change', function() {
        sel4.options 1].selected = true;
        jQuery(sel4).change();
        sel5.options 1].selected = true;
    });
});

 

Leave a Reply


Terms & Conditions