How to dynamically update and display score on a page. | XM Community
Skip to main content

Hi!
I am trying to display a total score that is calculated based on the average of respondents' entries to a form displayed on the same page.
The default values of the form input fields (QID13) are piped from prior questions. I would like:
1) the total score to display the average of these default values upon loading the page, and;
2) the total score should update whenever the respondent changes the value of one of the form input fields.
I know I need JS for this, and I found useful discussions here:
https://community.qualtrics.com/XMcommunity/discussion/5854/how-to-display-score-on-survey-page-that-dynamically-updates
https://community.qualtrics.com/XMcommunity/discussion/9743/display-math-operation-results-real-time
My knowledge of JS is pretty much limited to being able to copy and paste it, so for me the code in these threads is just one or two steps too far removed from what I am trying to do.
Any help is much appreciated!
Capture.PNG

In case anyone needs something similar, here's the solution:
Qualtrics.SurveyEngine.addOnload(function() {
 var input = jQuery("#"+this.questionId+" .InputText");
var l = input.length;
function upscore(){

var s = 0;
input.each(function(){
s = s + parseFloat(jQuery(this).val())||0;
});
jQuery("#total").text((Math.round((parseFloat(s/l))/0.5)*0.5).toFixed(1));


}
upscore();
 input.css({"text-align":"center","width":"6em"}).attr("inputmode","numeric");
 input.on("input", function() { this.value = this.value.replace(/e^.0-9]/g,""); 
   if(this.value>10 || this.value<0) this.value='';
   upscore();});
});

In the question html, add:

Total grade: 

Please note that this code rounds the total score to the nearest 0.5.


Hello, I have the same question as yours. Could you please be more specific about how you did this? Thank you so much!


Leave a Reply