Use URL Parameter to Find Dictionary Value Then Replace HTML Element on Page Load

Question

We are going to be sending out surveys after a facilities project is complete. We want the question to lead the project’s name on the first page of the survey. We want to use a single survey instead of separate ones for ease of use. I planned to use a URL parameter [Key Value pair] with short form project names. Use these short form names as a key in a dictionary to retrieve the full name. Then to replace an HTML element with the corresponding dictionary value and display it.I want to do this all on the first Text/Graphic screen to load and not the 2nd or 3rd question page.I have done something similar using a listener event to change text in an HTML on multi-choice option selection, but this instance isn’t working.In the survey URL there will be a key value pair that is tied to an embedded data field called “p_id”. E.G. qualtrics.com/jfe/form/abcdefg?p_id=foobar1I have a dictionary of values like this:var choiceTextMap = { 'foobar1': 'Value 1', 'foobar2': 'Value 2', 'foobar3': 'Value 3'};I am trying to pipe the value of the p_id data field into a var, compare it to the dictionary, then take the corresponding value and replace the following ‘ ” HTML element with it.This element will be in the first Text/Graphic “question block” that the user sees, the question element is as follows: Welcome To The

Project Survey!I can’t seem to get it to pull the embedded data field’s value into a variable. I am really new to JavaScript and self-taught so there are most likely issues.But when I use the code the HTML

element is just blank and doesn’t get replaced with my dictionary value.Thank you and any guidance is appreciated.My JS code is as follows:Qualtrics.SurveyEngine.addOnload(function(){ // Load the project ID from embedded datavar project_id = "${e://Field/p_id}"; // Find the HTML element locationvar elementID = 'pname'; // Define an object mapping each choice value to its corresponding custom textvar choiceTextMap = { 'foobar1': 'Value 1', 'foobar2': 'Value 2', 'foobar3': 'Value 3'}; // Get the HTML element where you want to display the custom textvar customElement = document.getElementById(elementID);});Qualtrics.SurveyEngine.addOnReady(function(){ // Pulls info from =choiceTextMap dictionaryif (project_id) { // Get the value of the selected choice var choiceValue = project_id.value; // Display the full Project Name if available, or clear it otherwise customElement.textContent = choiceTextMap[choiceValue] || '';} else { // No choice selected, clear the custom text customElement.textContent = '';} });Qualtrics.SurveyEngine.addOnUnload(function(){ /*Place your JavaScript here to run when the page is unloaded*/});

chackbusch · Accepted Answer

@rockyrakunI think you can solve this without JavaScript. Use supplemental data instead. You can upload your mapping to the libary as CSV. Define the shortened ID as search field and add all the project details as additional columns. Pipe your short term from the URL below “Choose Columns To Seach On”. On the left side (in the example “Store Name”) select your short term column from the CSV. Below of that, you can define the additional project details as embedded data. They can then be used for further processing.This is just an example:BestChristian

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded