Separately record choices before and after page navigation in Qualtrics

Question

I am trying to find a way to record the order that a survey participant clicks different options, and at the same time being able to identify whether the clicks happen after a participant loads the same page the second time. For example, suppose I first click on option 1,3,4, then navigates to the previous page and come back, check option 5 and uncheck 4, then choose "next". I want to get something like 1|3|5|back|5|4|next.

The current code that I have written down for this purpose is the following:

Qualtrics.SurveyEngine.addOnload(function() {   
    var reasonOrder = "${e://Field/reasonOrder}";
    this.questionclick = function(event,element){        
        if (element.type == 'checkbox')        
        {            
            reasonOrder = reasonOrder + "|" + element.id.split('~')[2];    
            Qualtrics.SurveyEngine.setEmbeddedData('reasonOrder', reasonOrder);
        }    
    } 
});


Qualtrics.SurveyEngine.addOnPageSubmit(function(type) { 
    //var reasonOrder = "${e://Field/reasonOrder}";     
    if (type == "next"){
           reasonOrder = reasonOrder + "|next|";    
           Qualtrics.SurveyEngine.setEmbeddedData('reasonOrder', reasonOrder);  
    }   
    else if (type == "prev"){
           reasonOrder = reasonOrder + "|prev|";    
           Qualtrics.SurveyEngine.setEmbeddedData('reasonOrder', reasonOrder);  
    }        
    });

However, the current code seems to completely ignore everything inside the addOnload function and only executes the second part.

I have tried to separately execute the two parts by using two different embedded fields (reasonOrder and choiceOrder) and doing what follows:

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var reasonOrder = "${e://Field/reasonOrder}";
this.questionclick = function(event,element){        
    if (element.type == 'checkbox')        
    {            
        reasonOrder = reasonOrder + "|" + element.id.split('~')[2];    
        Qualtrics.SurveyEngine.setEmbeddedData('reasonOrder', reasonOrder);
    }    
}
});
Qualtrics.SurveyEngine.addOnPageSubmit(function(type){  
    var choiceOrder = "${e://Field/reasonOrder}";
    if (type == "next"){
       choiceOrder = choiceOrder + "|next|";    
    }
    else{
       choiceOrder = choiceOrder + "|prev|";               
    }
    Qualtrics.SurveyEngine.setEmbeddedData('choiceOrder', choiceOrder); 
});

But this version only records everything that happens in the first interaction, i.e. if a person comes back to the same page, his/her action is not recorded.

How should I change the codes to record the click stream that I need? Thanks!

Answer 1

You first example doesn't work because reasonOrder is local to the addOnLoad function. Try this:

Qualtrics.SurveyEngine.addOnload(function() {   
    var reasonOrder = "${e://Field/reasonOrder}";
    this.questionclick = function(event,element){        
        if (element.type == 'checkbox')        
        {            
            reasonOrder = reasonOrder + "|" + element.id.split('~')[2];    
            Qualtrics.SurveyEngine.setEmbeddedData('reasonOrder', reasonOrder);
        }    
    } 
    Qualtrics.SurveyEngine.addOnPageSubmit(function(type) { 
        if (type == "next"){
           reasonOrder = reasonOrder + "|next|";    
           Qualtrics.SurveyEngine.setEmbeddedData('reasonOrder', reasonOrder);  
        }   
        else if (type == "prev"){
           reasonOrder = reasonOrder + "|prev|";    
           Qualtrics.SurveyEngine.setEmbeddedData('reasonOrder', reasonOrder);  
        }        
    });
});