Preview:
const suprqMean = 3.93;
const usabilityMean = 4.06;

const suprqSD = 0.29;
const usabilitySD = 0.29;


function listenForChanges (inputId, logId, output, mean, SD) {
  const input = document.querySelector(inputId);
  const log = document.querySelector(logId);

  input.addEventListener("change", updateValue);

  function updateValue(e) {
    output.textContent = (e.target.value - mean) / SD;
  }
}

listenForChanges("#formGroupExampleInput", "#suprq", suprq, suprqMean, suprqSD)
listenForChanges("#formGroupExampleInput1", "#usability", usability, usabilityMean, usabilitySD)
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter