Show ID-matched Embedded Data from Contact List as a Link in Survey Question

aychenaychen Community Member Qubie ✭
edited May 29 in Custom Code

Show ID-matched Embedded Data from Contact List as a Link in Survey Question

In my survey, I need to show several different links to a few respondents, were each respondent would be assigned 20+ unique links.

I want to pipe the link into a survey question to dynamically display them to different respondents. I've been trying to match the observation IDs (“obsid") to the link stored as embedded data in the contact list (“link”) by creating a function that returns the matching link given an id (where I can populate the id by appending a query string to the URL of the survey link sent out to different respondents). I set this as a new embedded data field (‘matchlink') through JS and pipe this into a survey question as a clickable link.

The data looks something like:
email | obsid | link
respondent 1 | 1 | link1.com
respondent 1 | 2 | link2.com
respondent 1 | 3 | link3.com
respondent 2 | 4 | link4.com
respondent 2 | 5 | link5.com

In JS, I created a table (“ID_table") that calls the embedded data from the contact list. Then, the function getLookupTableByID() is used to match the this ID to the link value. This is adapted from https://thepoliticalmethodologist.com/2019/05/23/utilizing-javascript-in-qualtrics-for-survey-experimental-designs/ , where they’ve manually inputed values in the lookup table. Instead, I want to draw these values from a pre-defined embedded data label from a .csv file. I added this JS code:

var ID_table = {
  ID: "${e://Field/obsid}",
  link: "${e://Field/link}"
};

function getLookupTableByID(mytable, IDfield, ID, returnfield) {
  matchindex = null;
  try {
    //this matches the panel data observation ID (obsID) with the row ID (ID) variable in the JS table above
    var matchindex = mytable[IDfield].indexOf(ID);
    //this returns the value of the response (defined in JS table) at the matching index
        var matchreturn = mytable[returnfield][matchindex];
  } catch (ex) {
    console.log(ex);
  }
  return matchreturn;
}


//get observation ID (obsid) from panel data
var obsID = Qualtrics.SurveyEngine.getEmbeddedData("obsid");


//create new Embedded Data field with this function that corresponds to the matched file to be shown
var match = getLookupTableByID(ID_table, “ID", obsID, "link");
    Qualtrics.SurveyEngine.setEmbeddedData('matchlink', match);


jQuery("#matchlink").html(ID_table.link);

Then, I set the new embedded data field ‘matchlink’ at the top of the survey flow and leave the field empty.

However, when I go to pipe “matchlink" into the survey content as a hyperlink, it does not show up. I think it might have something to do with the HTML, but this is all new to me and I’m having trouble figuring out how to correctly display the link. It seems like what I want to do is similar to what has been done here: https://www.qualtrics.com/community/discussion/3530/how-to-save-the-embedded-data-in-the-csv-file-how-to-show-the-content-of-the-embedded-data-in-a-q

In the HTML, I have:

<div>Please click on <a href="${e://Field/matchlink}" target="_blank">this link</a> to view the article.&nbsp;</div><div>&nbsp;</div>

I’ve also tried this, but I’m certain this is improper formatting:

<div>Please click on <span>id="matchlink">this link</span> to view the article.&nbsp;</div><div>&nbsp;</div>

Any ideas on how to fix the code would be greatly appreciated! I’m also open to alternative approaches to accomplishing the larger task. Hope this is clear.

Thank you in advance!!

Best Answer

  • aychenaychen Qubie ✭
    Accepted Answer

    Thanks again for these insights, @TomG. It looks like this task can be better accomplished with a web service script.

Answers

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭

    You can't set and pipe embedded data on the same page. So, your JS has to update the href attribute in your <a> tag. Therefore, your html would be something like:

    <div>Please click on <a id="matchlink" target="_blank">this link</a> to view the article.&nbsp;</div><div>&nbsp;</div>
    

    The JS would have something like:

    jQuery("#matchlink").attr("href", match);
    
  • aychenaychen Community Member Qubie ✭

    Thanks for the quick reply @TomG !
    I've made the changes you've suggested, but when I test the survey, the link in the question is not clickable... I suspect there is something else wrong with the way I've set the new embedded data variable, but I can't diagnose what the problem is. I've tried manually assigning an array to "link" in the ID_table (e.g. ["link1.com", "link2.com"...]) instead of using "${e://Field/link}" and feeding it into getLookupTableByID(), which works fine even without setting it as HTML content.

    Any other clues on what I might be getting wrong??

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭

    @aychen said:
    Any other clues on what I might be getting wrong??

    Replace:

    var obsID = Qualtrics.SurveyEngine.getEmbeddedData("obsid");
    

    with:

    var obsID = "${e://Field/obsid}";
    
  • aychenaychen Community Member Qubie ✭

    @TomG said:

    Replace:

    var obsID = Qualtrics.SurveyEngine.getEmbeddedData("obsid");
    

    with:

    var obsID = "${e://Field/obsid}";
    

    I've actually tried this as well. No luck. In fact, when ID_table is manually defined, it works with

    var obsID = Qualtrics.SurveyEngine.getEmbeddedData("obsid")
    

    but not with:

    var obsID = "${e://Field/obsid}" 
    
  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭

    @aychen said:
    I've actually tried this as well. No luck. In fact, when ID_table is manually defined, it works with

    var obsID = Qualtrics.SurveyEngine.getEmbeddedData("obsid")
    

    but not with:

    var obsID = "${e://Field/obsid}" 
    

    You've done something wrong because those two are equivalent...except getEmbeddedData is no longer officially supported by Qualtrics.

    Beyond that, I'm not sure what is wrong without looking at it in a debugger. I will say that you've made it more difficult than necessary. The getLookupTableByID function is pointless. You can make the id the object key, then you don't need a lookup function.

    var ID_table = {
      "${e://Field/obsid}" : "${e://Field/link}"
    };
    var match = ID_table["${e://Field/obsid}"];
    
Sign In to Comment