Dynamically adding selected scale item values

I am creating a form in which I have added few items of type SCALE and I want the user to select from a scale of 1 to 3.

Now I want to dynamically add all these selected values such as the sum = selected value of scaleA + ..scaleB+ ..ScaleN.

So far I have managed to get all the SCALE items, but I am unable to get the value that use has currently selected.

The API gives only following methods getUpperBound() and getLowerBound() where as I want to get the value the user has currently selected.

Is there a way I can achieve this?

Note: I want to display the user the sum of selected value right away as he is filling in the form.

The piece of code that I have written so far

function myFunction() {
  var form = FormApp.getActiveForm();
  var items = form.getItems(FormApp.ItemType.SCALE);
  for (var i = 0; i < items.length; i++)
    Logger.log(items[i].getId() + ':Title ' + items[i].getTitle()+ ':ScaleItem '+items[i].asScaleItem());
}

To make a dynamic form you will have to use google apps scripts to create your own from using HTML service. Like So: https://script.google.com/macros/s/AKfycby5b0Q2cuDSTl8VDIG60-9lnklAgeaZlXwmZq2slRG4h-fx6og/exec

Native form application from google cannot be used for making a dynamic form that updates while the form is live.

Html File: "ScaleForm", code source: http://www.w3schools.com/tags/tag_output.asp

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id = "formDiv">
    <form id = "scaleForm" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="0" min ="0" max ="3">
  3 <br>
  + <br> 0
  <input type="range" id="b" name="b" value="0" min ="0" max ="3">
  3 <br>
  =
  <output id = "c" name="x" for="a b"></output> <br>
    <input type ="button" value ="Submit" onclick ="formSubmit()">
    </form>
    </div>
    <br>
    Values Submitted shown Below:

    <div id="submittedValue">
    </div>

    <script>
    function formSubmit(){
    var formvalues = []
    var d = new Date();

    formvalues[0] = d.toString();
    formvalues[1] = document.getElementById("a").value
    formvalues[2] = document.getElementById("b").value
    formvalues[3] = document.getElementById("c").value
    var sub = document.getElementById("submittedValue")
    sub.innerHTML = "Value 1: " +formvalues[1]  +"<br>Value 2: "+formvalues[2] +"<br>Total: "+formvalues[3]
    google.script.run.recordValues(formvalues)

    }

    </script>
  </body>
</html>

Google Script code:

function doGet() {
  return HtmlService.createTemplateFromFile('ScaleForm')
    .evaluate() 
    .setTitle('Scale Form for stack overflow');

}

function recordValues(formvalues){
 var scale1 =formvalues[0]
 var scale2 = formvalues[1]
 var sum = formvalues[2]
 // The above assignments are for reference sake only they are not used 

 var Ss = SpreadsheetApp.openById("Paste your Spreadsheet ID here to record the values")
 var Sheet = Ss.getSheetByName("Responses")
 Sheet.appendRow(formvalues)

}

How to run this: