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

mjs5zxmjs5zx Charlottesville, VACommunity Member - Trial User Qubie ✭

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

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');
}
});

Best Answers

  • flebfleb Czech Republic Sage ✭✭✭
    Accepted Answer

    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);
    
            }
        }
    
    });
    
  • TomGTomG Raleigh, NC Wizard ✭✭✭✭✭
    Accepted Answer

    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");
            }
    });
    
    1. You can add html tags to the embedded data value string:
    Qualtrics.SurveyEngine.setEmbeddedData("ModeScript", "<b>Test</b>");
    

Answers

  • mjs5zxmjs5zx Charlottesville, VACommunity Member - Trial User Qubie ✭

    @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!

Sign In to Comment