Use Javascript to set a new value for an embedded data variable based upon a selected choice | XM Community
Solved

Use Javascript to set a new value for an embedded data variable based upon a selected choice

  • 19 November 2018
  • 7 replies
  • 487 views

I want to use javascript to set a value for an embedded data variable based upon a selected choice. I'm not familiar with JS, so here is my poor adaptation from the JSI example from Qualtrics (with most of it commented out). I'm basically using this variable to change the descriptive text. The variable "ModeScript" has a default value established int he beginning of the survey flow. Since I need it to change within a block, I'm trying to use Javascript to change it if someone selects the recodedvalue choice three.
Qualtrics.SurveyEngine.addOnload(function()
{
//create Qualtrics.SurveyEngine.QuestionData object
Qualtrics.SurveyEngine.addOnload(function ()
{
//disables the next button on the page
//this.disableNextButton();
//question click is a simple onclick handler
//attached to the question's container div
this.questionclick = function(event,element)
{
//by default you get the click event as the first parameter and the clicked element as the second parameter
console.log(event, element);
if (element.type == 'radio')
{
var choiceNum = element.id.split('~')[2];

//alert('You clicked on choice '+choiceNum);
// if (choiceNum == 3)
// {
//Qualtrics.SurveyEngine.setEmbeddedData('ModeScript', 'Test');
//enables the next button - Note that the QuestionData object is bound to this to make it easier to use
//this.enableNextButton();
// }
//else
// {
//disables the next button
// this.disableNextButton();
// }
}
}
});

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

Qualtrics.SurveyEngine.addOnPageSubmit(function(type)
{
if (choiceNum == 3)
{
Qualtrics.SurveyEngine.setEmbeddedData('ModeScript', 'Test');
}
});
icon

Best answer by fleb 20 November 2018, 09:44

View original

7 replies

Userlevel 5
Badge +6
Hi,
I don't think that Qualtrics.SurveyEngine.addOnPageSubmit knows variables from Qualtrics.SurveyEngine.addOnload -> I would update your e. field each time user clicks on a choice of your question (if it will be 3, I would send there your new text and otherwise the old text)
I have implemented following code. I hope it is the right solution.

Qualtrics.SurveyEngine.addOnload(function()
{
this.questionclick = function(event, element) {//each time user click on the question
if(element.type == "radio") { //and only if he clicks on the radio button with choice
var ID = this.getQuestionInfo().QuestionID;
var questionObject = Qualtrics.SurveyEngine.getInstance(ID);
var currentResponse = questionObject.getSelectedChoices()[0]; //gets the response which is licked now
//alert(currentResponse);
var eFieldText;
if (currentResponse ==3) {eFieldText ="Your new text"}
else{eFieldText ="Your original text" }
Qualtrics.SurveyEngine.setEmbeddedData('eVarName',eFieldText);

}
}

});
@fleb That worked! The question choice was actually 23. I used the question click example from the javascript question api to tell me that:

this.questionclick = function(event,element){
//for a single answer multiple choice question, the element type will be radio
if (element.type == 'radio')
{
var choiceNum = element.id.split('~')[2];
alert('You clicked on choice '+choiceNum);
}
}

The only issue or question I have now, is if it's possible to format the text. In the survey flow, I can use HTML. Am I able to use HTML in JS? It seemed like it was treating it as part of the JS code. Thanks!
Userlevel 7
Badge +27
Two things...

1. An easier solution:
```
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
if(jQuery("#"+this.questionId+" input.radio:checked").attr("choiceid")=="23") {
Qualtrics.SurveyEngine.setEmbeddedData("ModeScript", "Test");
}
});
```
2. You can add html tags to the embedded data value string:
```
Qualtrics.SurveyEngine.setEmbeddedData("ModeScript", "<b>Test</b>");
```

Hi TomG,
I am able to save web api response in Qualtrics.SurveyEngine.setEmbeddedData
at addOnload and able to view data in Data & Analysis tab for that embedded field. But when I try to save web api response on Qualtrics.SurveyEngine.addOnUnload using Qualtrics.SurveyEngine.setEmbeddedData its not showing the value in Data & Analysis tab but API returns the result. Tried a lot after changing the order of Embedded data from Survey Flow. No success till now, Could you please assist,
Thanks to all,

Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/28302#Comment_28302Yes, if you use addOnUnload the page data is already gone. Use addOnPageSubmit instead.

Hi TomG,
I am setting embedded field in Java Script only based upon the web api response but I found embedded field blank in Data & Analysis tab of Survey.see my code

Qualtrics.SurveyEngine.addOnPageSubmit(function()
{
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
// This is the correct web api response I am getting through //https://DataCenterID.qualtrics.com/API/v3/directories/{directoryId}/contacts/s/earch
var apiResponse = JSON.parse(this.responseText);
var contactInfo = apiResponse.result.elements[0];
firstName = contactInfo.firstName;
lastName = contactInfo.lastName;
Qualtrics.SurveyEngine.setEmbeddedData("ContactFirstName", firstName);
Qualtrics.SurveyEngine.setEmbeddedData("ContactLastName", lastName);
alert( Qualtrics.SurveyEngine.getEmbeddedData("ContactFirstName") );
// Here I am able to get the first name in alert But this field not updating first name in Data & Analysis tab of Survey
}
// Api is returning correct response in var apiResponse

Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/28378#Comment_28378You must define an embedded data field in the survey flow for it to be saved in the response data.

Leave a Reply