Need to display a live update of the average of 6 inputted numbers

Hi,
I need to be able to display with live updates an average of 6 inputted numbers.
Basically, I need user to enter their ratings from 1-10 for 6 different questions and then I need the screen to display to them live what their average rating is.
Currently, I am using a "Constant Sum" question. And I can get coding to have the average display in the console log with what I've coded. But I'm having trouble figuring out how to get that to display on the actual screen.
The code I am using is below.
What I want to display (either above or ideally below) the constant sum/input area is:
"Your current average rating is [average]"
I need the [average] to update every time they enter something new (or as per my code on every click)

Qualtrics.SurveyEngine.addOnload(function()
{
var calculateAverage = function() {
currentChoices = document.querySelectorAll("input[name^='QR~QID21']")
numberOfChoices = currentChoices.length
currentSum = 0
for(var i=0; i < numberOfChoices; i++) {
currentSum += parseInt(currentChoices[i].value)
}
currentAverage = currentSum / numberOfChoices
console.log("Current Average: " + currentAverage)
return currentAverage
}

var addBlurHandlers = function() {
currentChoices = document.querySelectorAll("input[name^='QR~QID21']")
for (var i = 0; i < currentChoices.length; i++)
   currentChoices[i].onblur = calculateAverage  
}
addBlurHandlers()
  this.questionclick = function(event,element)
  {
calculateAverage();
}
});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
console.log("Page loaded...");
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});