How to dynamically update and display score on a page.

Forum|Forum|3 years ago
March 16, 2022
2 replies
395 views

Joris_D

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!

J

Joris_D
Author
Forum|Forum|3 years ago
April 20, 2022

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(/[^.0-9]/g,"");
if(this.value>10 || this.value<0) this.value='';
upscore();});
});

In the question html, add: