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 eKey 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=foobar1

I 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 ‘&nbsp” 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 <p id="pname">&nbsp</p> 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 <P> 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 data
var project_id = "${e://Field/p_id}";
    
    // Find the HTML element location
var elementID = 'pname';

    // Define an object mapping each choice value to its corresponding custom text
var choiceTextMap = {
    'foobar1': 'Value 1',
    'foobar2': 'Value 2',
    'foobar3': 'Value 3'
};

    // Get the HTML element where you want to display the custom text
var customElement = document.getElementById(elementID);

});

Qualtrics.SurveyEngine.addOnReady(function()
{
        // Pulls info from =choiceTextMap dictionary
if (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 = choiceTextMaptchoiceValue] || '';

} 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*/

});