Replacing piped text with JS based on certain conditions | XM Community
Skip to main content

Hi,

Essentially what I want to do is to compare values obtained from participants to loop and merge fields. If any of the participants’ values is less than its corresponding loop and merge value, it replaces the piped text content of another loop and merge field with “1”.

The reason why I want to do this is because I want to show participants the results of a simple algorithm (${lm://Field/9}). Let’s say the algorithm is supposed to predict whether a fictional person would be a good partner based on three pieces of information. I want to give the participants the chance to create rules upfront like if the fictional person is above a 7/10 in messiness then the actual algorithm’s prediction will be overruled and just replaced with “1”.

I am pretty sure my code mostly works due to the console.log notifications. However, it seems to fail on the last part. I think the reason is that the piped text loop and merge field I want to replace with “1” does not have an HTML element ID and therefore cannot be found. Are there any solutions to this? Or any alternative approaches to achieve the same thing?

 

Any help would be greatly appreciated!

 

Qualtrics.SurveyEngine.addOnload(function() {
    var embeddedData1 = "${q://QID73/ChoiceTextEntryValue}";
    var embeddedData2 = "${q://QID74/ChoiceTextEntryValue}";
    var embeddedData3 = "${q://QID75/ChoiceTextEntryValue}";

    var loopMergeText1 = "${lm://Field/3}";
    var loopMergeText2 = "${lm://Field/4}";
    var loopMergeText3 = "${lm://Field/5}";

    console.log("embeddedData1:", embeddedData1);
    console.log("embeddedData2:", embeddedData2);
    console.log("embeddedData3:", embeddedData3);
    console.log("loopMergeText1:", loopMergeText1);
    console.log("loopMergeText2:", loopMergeText2);
    console.log("loopMergeText3:", loopMergeText3);

    var flag = false;

    // Compare embedded data with loop and merge texts
    if (embeddedData1 < loopMergeText1 || embeddedData2 < loopMergeText2 || embeddedData3 < loopMergeText3) {
        flag = true;
    }

    console.log("flag:", flag);

    // Display separate loop and merge piped text based on flag
    if (flag) {
        // Display "1" instead of separate loop and merge piped text
        var elementId = "${lm://Field/9}";
        var replacedElement = document.getElementById(elementId);
        if (replacedElement) {
            replacedElement.textContent = "1";
            console.log("The number at the end was replaced with a '1'.");
        } else {
            console.log("Error: Element with ID '" + elementId + "' not found.");
        }
    }
});

 

Can you share a preview of your survey or the HTML of your question?

Hi @FelixK ,

Assuming the Loop and merge is before the question of above JS. You can use the below JS code to save your Flag value in an embedded data elementId. You can use this embedded data pipe text to display either 1 or the loop value “${lm://Field/9}” wherever you want to display.

// Define elementId variable outside conditional blocks
var elementId = ;

if (flag==true) {
    // Set elementId to 1 if flag is true
    elementId = 1;
    console.log("The number at the end was replaced with a '1'. ElementId:", elementId);
} else {
    // Set elementId to the Qualtrics piped text variable
    elementId = "${lm://Field/9}";    
    console.log("Error: Element with ID not found. ElementId:", elementId);
}

//Now save the value of variable elementId in an embedded data. Also, declare in survey flow.
Qualtrics.SurveyEngine.setEmbeddedData( "elementId", elementId)

I ended up figuring it out! Turns out you can create your own HTML embedded IDs which is what I did. So, this code worked for me: 

Qualtrics.SurveyEngine.addOnload(function() {
    // Retrieve embedded data for cutoffs chosen by the participant
    var cutoff1 = parseInt("${q://QID73/ChoiceTextEntryValue}", 10);
    var cutoff2 = parseInt("${q://QID74/ChoiceTextEntryValue}", 10);
    var cutoff3 = parseInt("${q://QID75/ChoiceTextEntryValue}", 10);
    console.log("Cutoffs:", cutoff1, cutoff2, cutoff3); // Log cutoff values

    // Retrieve embedded data for the current loop and merge values
    var loopMergeValue1 = parseInt("${lm://Field/3}", 10); // Assuming these correspond to the data to compare against cutoffs
    var loopMergeValue2 = parseInt("${lm://Field/4}", 10);
    var loopMergeValue3 = parseInt("${lm://Field/5}", 10);
    console.log("LoopMerge Values:", loopMergeValue1, loopMergeValue2, loopMergeValue3); // Log loop merge values

    // Retrieve the algorithmic advice from loop and merge Field/9
    var algoAdvice = "${lm://Field/9}";
    console.log("Algo Advice before processing:", algoAdvice); // Log the initial algorithmic advice

    // Determine the content to update based on conditions
    var contentToUpdate;
    if (loopMergeValue1 < cutoff1 || loopMergeValue2 < cutoff2 || loopMergeValue3 < cutoff3) {
        console.log("Condition met for setting to 1"); // Log when condition for 1 is met
        contentToUpdate = "1"; // If any value is below its respective cutoff, show "1"
    } else {
        console.log("Condition not met, using algo advice:", algoAdvice); // Log when using original advice
        contentToUpdate = algoAdvice; // Otherwise, use the original algorithmic advice
    }

    // Update the HTML element with the determined content
    var element = document.getElementById('_non_linear');
    if (element) {
        element.textContent = contentToUpdate;
    } else {
        console.log("Error: Element with ID '_non_linear' not found.");
    }
});

 

Leave a Reply


Terms & Conditions