Branch Logic And Embedded Data | XM Community
Skip to main content

Hello everyone,
I want to design a study on Qualtrics. In the study, participants will be allowed to spend the income they earned in previous stages. There are 8 spending options given to participants. I used branch logic in the stage of deducting the expenditure from the net income. However, it did not work completely. I am open to suggestions on this issue.

Thank you in advance.

Best.

 


You could use JS inside a matrix constant sum question.

Here’s the demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/00a1841e-33a5-49ae-a9c5-6934da853af4/SV_8HBDY4VRJnFn40J/BL_eWhyLPGnUXT8onQ?Q_SurveyVersionID=current

 

Qualtrics.SurveyEngine.addOnReady(function () {
const quest = this;
const qc = quest.getQuestionContainer();

// Pipe your max amount here
const maxAmount = parseInt("500");
const alertText = "Please ensure the amount consumed is less than";

const nextButton = document.querySelector("#NextButton");

// Add a row below the total row
const totalRow = qc.querySelector("tr.CSTotal");
const remainingRow = totalRow.cloneNode(true);
totalRow.insertAdjacentElement("afterend", remainingRow);

// Give them total rows new labels for clarity
totalRow.querySelector("th").innerHTML = "Amount Consumed";
remainingRow.querySelector("th").innerHTML = 'Amount Left <small id="amountAlert" style="color: red;display:none;">+++++ $ _____.</small>';

const totalInput = totalRow.querySelector("input");
const remainingInput = remainingRow.querySelector("input");

// Monitor changes to the total
totalInput.oninput = function () {
setTimeout(() => {
const amountUsed = parseInt(totalInput.value.replaceAll(/\D/gm, ""));
const amountLeft = maxAmount - amountUsed;

// Update the remaining total with the amount left
remainingInput.value = amountLeft;

// Hide next button if amount consumed is more than available
// Show the alert message in this case
if (amountLeft < 0) {
nextButton.style.display = "none";
alertMessage.style.display = "block";
} else {
nextButton.style.display = "";
alertMessage.style.display = "none";
}
}, 0);
};

// Start with the entire amount being available
remainingInput.value = maxAmount;

// Put values in the alert message
const alertMessage = qc.querySelector("#amountAlert");
alertMessage.innerHTML = alertMessage.innerHTML.replace("+++++", alertText);
alertMessage.innerHTML = alertMessage.innerHTML.replace("_____", maxAmount);
});

 


Hello, thank you for your answer. I will try it. Thank you again.


Leave a Reply