😇Digital SAT® Score Calculator (ok)

https://www.albert.io/blog/sat-score-calculator/

Example 1

Digital SAT®

Legacy Pen-and-Paper

<div id="calculator_tabs59" class="scld-calculator-tabs-container ">
  <h1 class="scld-calculator-title">SAT® Score Calculator <a class="round-link"
      href="https://www.albert.io/subjects/high-school/act-sat/sat?utm_source=blog&amp;utm_medium=blog&amp;utm_campaign=sat-score-calculator"
      style="background-color: #6565c6">
      <img src="https://assets.albert.io/canary-assets/subject-icons/19b8e13d-3ec5-4346-872e-50f8635aa2a5.svg" class="scld-calculator-icon">
    </a>
  </h1>
  <div class="calulator-title">
    <h2 class="scld-calculator-subtitle">Enter your scores</h2>
    <h2 class="scld-result-title">Results</h2>
  </div>
  <div id="calculator_59_0" class="scld-calculator-tabs-sat scld-calculator__wrapper">
    <div id="tab_59_0" class="scld-calculator scld-calculator__input__container">
      <div id="59_0" class="scld-calculate">
        <p><label>Reading and Writing Module 1</label></p>
        <p class="calculator__item">
          <input type="range" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
            data-subject="Reading_and_Writing_Module_1" data-id="59_0">
          <input type="number" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
            data-subject="Reading_and_Writing_Module_1" data-id="59_0">
          <span class="scld-out-of-correct-number">/27</span>
        </p>
        <p><label>Reading and Writing Module 2</label></p>
        <p class="calculator__item">
          <input type="range" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
            data-subject="Reading_and_Writing_Module_2" data-id="59_0">
          <input type="number" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
            data-subject="Reading_and_Writing_Module_2" data-id="59_0">
          <span class="scld-out-of-correct-number">/27</span>
        </p>
        <p><label>Math Module 1</label></p>
        <p class="calculator__item">
          <input type="range" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_1"
            data-id="59_0">
          <input type="number" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_1"
            data-id="59_0">
          <span class="scld-out-of-correct-number">/22</span>
        </p>
        <p><label>Math Module 2</label></p>
        <p class="calculator__item">
          <input type="range" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_2"
            data-id="59_0">
          <input type="number" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_2"
            data-id="59_0">
          <span class="scld-out-of-correct-number">/22</span>
        </p>
      </div>
    </div>
    <div id="results_59_0" style="float: left" class="scld-calculator__result__container">
      <div class="scld-result-container"><span>Reading and Writing Score</span>
        <div class="scld-result-score shown-result">
          <output data-insert="Reading_and_Writing_Module_1" data-score="0" data-part="Reading_and_Writing_Score"
            class="scld-result-output-wc subject-result">430</output>
        </div>
      </div>
      <div style="display: none"><span>Reading and Writing Score</span>
        <div class=" hidden-result">
          <output data-insert="Reading_and_Writing_Module_2" data-part="Reading_and_Writing_Score">190</output>
        </div>
      </div>
      <div class="scld-result-container"><span>Math Score</span>
        <div class="scld-result-score shown-result">
          <output data-insert="Math_Module_1" data-score="0" data-part="Math_Score"
            class="scld-result-output-wc subject-result">430</output>
        </div>
      </div>
      <div style="display: none"><span>Math Score</span>
        <div class=" hidden-result">
          <output data-insert="Math_Module_2" data-part="Math_Score">190</output>
        </div>
      </div>
      <div class="scld-result-container"><span class="scld-result-predicted scld-result-last">Total SAT® Score</span>
        <div class="scld-result-score change-color" style="background-color: rgb(157, 105, 27);">
          <output data-insert="total" data-sat-max="1590" class="scld-result-output-wc">860</output>
        </div>
      </div>
    </div>
  </div>
  <div id="calculator_59_1" class="scld-calculator-tabs-sat scld-calculator__wrapper" style="display: none">
    <div id="tab_59_1" class="scld-calculator scld-calculator__input__container">
      <div id="59_1" class="scld-calculate">
        <p><label>SAT® Reading Section</label></p>
        <p class="calculator__item">
          <input type="range" min="0" max="52" value="26" data-part="Reading_&amp;_Writing_Section_Score"
            data-subject="SAT®_Reading_Section" data-id="59_1">
          <input type="number" min="0" max="52" value="26" data-part="Reading_&amp;_Writing_Section_Score"
            data-subject="SAT®_Reading_Section" data-id="59_1">
          <span class="scld-out-of-correct-number">/52</span>
        </p>
        <p><label>SAT® Writing Section</label></p>
        <p class="calculator__item">
          <input type="range" min="0" max="44" value="22" data-part="Reading_&amp;_Writing_Section_Score"
            data-subject="SAT®_Writing_Section" data-id="59_1">
          <input type="number" min="0" max="44" value="22" data-part="Reading_&amp;_Writing_Section_Score"
            data-subject="SAT®_Writing_Section" data-id="59_1">
          <span class="scld-out-of-correct-number">/44</span>
        </p>
        <p><label>SAT® Math Section</label></p>
        <p class="calculator__item">
          <input type="range" min="0" max="58" value="29" data-part="" data-subject="SAT®_Math_Section" data-id="59_1">
          <input type="number" min="0" max="58" value="29" data-part="" data-subject="SAT®_Math_Section" data-id="59_1">
          <span class="scld-out-of-correct-number">/58</span>
        </p>
      </div>
    </div>
    <div id="results_59_1" style="float: left" class="scld-calculator__result__container">
      <div class="scld-result-container"><span>Reading &amp; Writing Section Score</span>
        <div class="scld-result-score shown-result">
          <output data-insert="SAT®_Reading_Section" data-score="0" data-part="Reading_&amp;_Writing_Section_Score"
            class="scld-result-output-wc subject-result">490</output>
        </div>
      </div>
      <div style="display: none"><span>Reading &amp; Writing Section Score</span>
        <div class=" hidden-result">
          <output data-insert="SAT®_Writing_Section" data-part="Reading_&amp;_Writing_Section_Score">240</output>
        </div>
      </div>
      <div class="scld-result-container"><span>SAT® Math Section</span>
        <div class="scld-result-score shown-result">
          <output data-insert="SAT®_Math_Section" data-score="0" data-part=""
            class="scld-result-output-wc subject-result">520</output>
        </div>
      </div>
      <div class="scld-result-container"><span class="scld-result-predicted scld-result-last">Total SAT® Score</span>
        <div class="scld-result-score change-color" style="background-color: rgb(157, 105, 27);">
          <output data-insert="total" data-sat-max="1600" class="scld-result-output-wc">1010</output>
        </div>
      </div>
    </div>
  </div>
  <div class="calc-switcher-container">
    <div>
      <h3 class="scld-tab-switcher-title">Choose your score curve</h3>
      <p>
        <input type="radio" name="calculator_tab_59_0">
        <a href="#" class="scld-calculator-tab-button scld-selected-tab-button" data-tab-id="59"
          data-calculator-id="59_0">Digital SAT®</a>
        <input type="radio" name="calculator_tab_59_1">
        <a href="#" class="scld-calculator-tab-button " data-tab-id="59" data-calculator-id="59_1">Legacy
          Pen-and-Paper</a>
      </p>
    </div>
    <div class="scld-calculator__author">
      <a
        href="https://www.albert.io/subjects/high-school/act-sat/sat?utm_source=blog&amp;utm_medium=blog&amp;utm_campaign=sat-score-calculator">Try
        our practice tests!</a>
    </div>
  </div>
</div>

Example 2 (Hoàn chỉnh và tinh giản hơn)

C:\xampp82\htdocs\satscore\index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="./calculator.js"></script>
  <link rel="stylesheet" href="./calc-style.css">
  <title>Document</title>
</head>
<body>
  <div id="calculator_tabs59" class="scld-calculator-tabs-container ">
    <h1 class="scld-calculator-title">SAT® Score Calculator <a class="round-link"
        href="https://www.albert.io/subjects/high-school/act-sat/sat?utm_source=blog&amp;utm_medium=blog&amp;utm_campaign=sat-score-calculator"
        style="background-color: #6565c6">
        <img src="https://assets.albert.io/canary-assets/subject-icons/19b8e13d-3ec5-4346-872e-50f8635aa2a5.svg"
          class="scld-calculator-icon">
      </a>
    </h1>
    <div class="calulator-title">
      <h2 class="scld-calculator-subtitle">Enter your scores</h2>
      <h2 class="scld-result-title">Results</h2>
    </div>
    <div id="calculator_59_0" class="scld-calculator-tabs-sat scld-calculator__wrapper">
      <div id="tab_59_0" class="scld-calculator scld-calculator__input__container">
        <div id="59_0" class="scld-calculate">
          <p><label>Reading and Writing Module 1</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_1" data-id="59_0">
            <input type="number" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_1" data-id="59_0">
            <span class="scld-out-of-correct-number">/27</span>
          </p>
          <p><label>Reading and Writing Module 2</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_2" data-id="59_0">
            <input type="number" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_2" data-id="59_0">
            <span class="scld-out-of-correct-number">/27</span>
          </p>
          <p><label>Math Module 1</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_1"
              data-id="59_0">
            <input type="number" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_1"
              data-id="59_0">
            <span class="scld-out-of-correct-number">/22</span>
          </p>
          <p><label>Math Module 2</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_2"
              data-id="59_0">
            <input type="number" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_2"
              data-id="59_0">
            <span class="scld-out-of-correct-number">/22</span>
          </p>
        </div>
      </div>
      <div id="results_59_0" style="float: left" class="scld-calculator__result__container">
        <div class="scld-result-container"><span>Reading and Writing Score</span>
          <div class="scld-result-score shown-result">
            <output data-insert="Reading_and_Writing_Module_1" data-score="0" data-part="Reading_and_Writing_Score"
              class="scld-result-output-wc subject-result">430</output>
          </div>
        </div>
        <div style="display: none"><span>Reading and Writing Score</span>
          <div class=" hidden-result">
            <output data-insert="Reading_and_Writing_Module_2" data-part="Reading_and_Writing_Score">190</output>
          </div>
        </div>
        <div class="scld-result-container"><span>Math Score</span>
          <div class="scld-result-score shown-result">
            <output data-insert="Math_Module_1" data-score="0" data-part="Math_Score"
              class="scld-result-output-wc subject-result">430</output>
          </div>
        </div>
        <div style="display: none"><span>Math Score</span>
          <div class=" hidden-result">
            <output data-insert="Math_Module_2" data-part="Math_Score">190</output>
          </div>
        </div>
        <div class="scld-result-container"><span class="scld-result-predicted scld-result-last">Total SAT® Score</span>
          <div class="scld-result-score change-color" style="background-color: rgb(157, 105, 27);">
            <output data-insert="total" data-sat-max="1590" class="scld-result-output-wc">860</output>
          </div>
        </div>
      </div>
    </div>
    <div id="calculator_59_1" class="scld-calculator-tabs-sat scld-calculator__wrapper" style="display: none">
      <div id="tab_59_1" class="scld-calculator scld-calculator__input__container">
        <div id="59_1" class="scld-calculate">
          <p><label>SAT® Reading Section</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="52" value="26" data-part="Reading_&amp;_Writing_Section_Score"
              data-subject="SAT®_Reading_Section" data-id="59_1">
            <input type="number" min="0" max="52" value="26" data-part="Reading_&amp;_Writing_Section_Score"
              data-subject="SAT®_Reading_Section" data-id="59_1">
            <span class="scld-out-of-correct-number">/52</span>
          </p>
          <p><label>SAT® Writing Section</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="44" value="22" data-part="Reading_&amp;_Writing_Section_Score"
              data-subject="SAT®_Writing_Section" data-id="59_1">
            <input type="number" min="0" max="44" value="22" data-part="Reading_&amp;_Writing_Section_Score"
              data-subject="SAT®_Writing_Section" data-id="59_1">
            <span class="scld-out-of-correct-number">/44</span>
          </p>
          <p><label>SAT® Math Section</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="58" value="29" data-part="" data-subject="SAT®_Math_Section"
              data-id="59_1">
            <input type="number" min="0" max="58" value="29" data-part="" data-subject="SAT®_Math_Section"
              data-id="59_1">
            <span class="scld-out-of-correct-number">/58</span>
          </p>
        </div>
      </div>
      <div id="results_59_1" style="float: left" class="scld-calculator__result__container">
        <div class="scld-result-container"><span>Reading &amp; Writing Section Score</span>
          <div class="scld-result-score shown-result">
            <output data-insert="SAT®_Reading_Section" data-score="0" data-part="Reading_&amp;_Writing_Section_Score"
              class="scld-result-output-wc subject-result">490</output>
          </div>
        </div>
        <div style="display: none"><span>Reading &amp; Writing Section Score</span>
          <div class=" hidden-result">
            <output data-insert="SAT®_Writing_Section" data-part="Reading_&amp;_Writing_Section_Score">240</output>
          </div>
        </div>
        <div class="scld-result-container"><span>SAT® Math Section</span>
          <div class="scld-result-score shown-result">
            <output data-insert="SAT®_Math_Section" data-score="0" data-part=""
              class="scld-result-output-wc subject-result">520</output>
          </div>
        </div>
        <div class="scld-result-container"><span class="scld-result-predicted scld-result-last">Total SAT® Score</span>
          <div class="scld-result-score change-color" style="background-color: rgb(157, 105, 27);">
            <output data-insert="total" data-sat-max="1600" class="scld-result-output-wc">1010</output>
          </div>
        </div>
      </div>
    </div>
    <div class="calc-switcher-container">
      <div>
        <h3 class="scld-tab-switcher-title">Choose your score curve</h3>
        <p>
          <input type="radio" name="calculator_tab_59_0">
          <a href="#" class="scld-calculator-tab-button scld-selected-tab-button" data-tab-id="59"
            data-calculator-id="59_0">Digital SAT®</a>
          <input type="radio" name="calculator_tab_59_1">
          <a href="#" class="scld-calculator-tab-button " data-tab-id="59" data-calculator-id="59_1">Legacy
            Pen-and-Paper</a>
        </p>
      </div>
      <div class="scld-calculator__author">
        <a
          href="https://www.albert.io/subjects/high-school/act-sat/sat?utm_source=blog&amp;utm_medium=blog&amp;utm_campaign=sat-score-calculator">Try
          our practice tests!</a>
      </div>
    </div>
  </div>
</body>
</html>

C:\xampp82\htdocs\satscore\calculator.js

var satObj = {
  "ids": ["59_0", "59_1"],
  "colors": [{
    "min": "1451",
    "max": "1600",
    "color": "#8224e3"
  }, {
    "min": "1251",
    "max": "1450",
    "color": "#1e73be"
  }, {
    "min": "1051",
    "max": "1250",
    "color": "#13866a"
  }, {
    "min": "851",
    "max": "1050",
    "color": "#9d691b"
  }, {
    "min": "0",
    "max": "850",
    "color": "#cc3224"
  }],
  "data": {
    "59_0": {
      "Reading_and_Writing_Module_1": [100, 100, 120, 140, 160, 170, 180, 190, 200, 200, 210, 210, 220, 230, 240, 260, 270, 290, 310, 320, 340, 360, 370, 390, 410, 430, 440, 460],
      "Reading_and_Writing_Module_2": [100, 100, 100, 110, 110, 110, 120, 120, 120, 130, 130, 140, 150, 170, 190, 190, 200, 210, 230, 240, 250, 260, 280, 290, 300, 310, 330, 330],
      "Math_Module_1": [100, 100, 120, 140, 160, 160, 180, 180, 200, 200, 210, 240, 260, 280, 300, 320, 340, 360, 390, 410, 430, 450, 470],
      "Math_Module_2": [100, 100, 100, 120, 120, 130, 150, 170, 170, 170, 190, 190, 200, 200, 210, 230, 240, 260, 270, 290, 300, 320, 330]
    },
    "59_1": {
      "SAT®_Reading_Section": [100, 100, 100, 110, 120, 130, 140, 150, 150, 160, 170, 170, 180, 190, 190, 200, 200, 210, 210, 220, 220, 230, 230, 240, 240, 250, 250, 260, 260, 270, 280, 280, 290, 290, 300, 300, 310, 310, 320, 320, 330, 330, 340, 350, 350, 360, 370, 370, 380, 380, 390, 400, 400],
      "SAT®_Writing_Section": [100, 100, 100, 100, 110, 120, 130, 130, 140, 150, 160, 160, 170, 180, 190, 190, 200, 210, 210, 220, 230, 230, 240, 250, 250, 260, 260, 270, 280, 280, 290, 300, 300, 310, 320, 320, 330, 340, 340, 350, 360, 370, 380, 390, 400],
      "SAT®_Math_Section": [200, 200, 210, 230, 240, 260, 280, 290, 310, 320, 330, 340, 360, 370, 380, 390, 410, 420, 430, 440, 450, 460, 470, 480, 480, 490, 500, 510, 520, 520, 530, 540, 550, 560, 560, 570, 580, 590, 600, 600, 610, 620, 630, 640, 650, 660, 670, 670, 680, 690, 700, 710, 730, 740, 750, 760, 780, 790, 800]
    }
  }
};
jQuery(document).ready(function ($) {
  Number.prototype.between = function (a, b, inclusive) {
    var min = Math.min.apply(Math, [a, b]),
      max = Math.max.apply(Math, [a, b]);
    return inclusive ? this >= min && this <= max : this > min && this < max;
  };
  $('.scld-calculator-tabs-act input').change(function () {
    let subject = $(this).data('subject'),
      calcId = $(this).data('id'),
      scores = calcObj[subject][calcId],
      colors,
      score = getScoreAct(scores, $(this).val()),
      insert = $('.results_' + calcId + ' [data-insert=' + subject + ']');
    insert.text(score);
    let english = $('.results_' + calcId + ' [data-insert=english]').text(),
      math = $('.results_' + calcId + ' [data-insert=math]').text(),
      reading = $('.results_' + calcId + ' [ data-insert=reading]').text(),
      science = $('.results_' + calcId + ' [data-insert=science]').text(),
      total = Math.round((Number(english) + Number(math) + Number(reading) + Number(science)) / 4);
    if (calcObj['colors'].length > 0) {
      colors = getColor(calcObj['colors'], total);
      $('.results_' + calcId + ' [data-insert=total]').css("background-color", colors.color);
    }
    $('.results_' + calcId + ' [data-insert=total]').text(total);
  });
  $('.scld-calculator-tabs-sat input').change(function () {
    let subject = $(this).data('subject'),
      calcId = $(this).data('id'),
      part = $(this).data('part'),
      max = $('#results_' + calcId + ' [data-insert=total]').data('sat-max'),
      scores = satObj.data[calcId][subject],
      score = getScoreSat(scores, $(this).val()),
      insert = $('#results_' + calcId + ' [data-insert=' + subject + ']'),
      color,
      allResult = $('#results_' + calcId + ' .subject-result');
    insert.text(score);
    if (part.length > 0) {
      let subScoreInsert = $('#results_' + calcId + ' .shown-result [data-part="' + part + '"]');
      $('#results_' + calcId + ' [data-insert=' + subject + ']').data('score', score);
      let subHidden = $('#results_' + calcId + ' .hidden-result [data-part="' + part + '"]').text();
      let totalPart = Number(subScoreInsert.data('score')) + Number(subHidden);
      subScoreInsert.text(totalPart);
    }
    var totalScore = 0;
    allResult.each(function () {
      totalScore += (Number($(this).html()));
    });
    if (satObj['colors'].length > 0) {
      color = getColor(satObj['colors'], totalScore);
      $('#results_' + calcId + ' .change-color').css("background-color", color.color);
    }
    $('#results_' + calcId + ' [data-insert=total]').text(totalScore);
  });
  $('.scld-calculator-tabs-staar input').change(function () {
    let calcId = $(this).data('id'),
      scores = staarObj.data[calcId][$(this).val()],
      scale = (scores) ? scores.scale : '',
      score = (scores) ? scores.score : '',
      percentile = (scores) ? scores.percentile : '',
      quantile = (scores) ? scores.quantile : '',
      color = getStaarColor(staarObj.colors, score.value);
    $('.results_' + calcId + ' [data-insert=scale]').text(scale);
    $('.results_' + calcId + ' [data-insert=score]').text(score.label);
    $('.results_' + calcId + ' [data-insert=percentile]').text(percentile);
    $('.results_' + calcId + ' [data-insert=quantile]').text(quantile);
    $('.results_' + calcId + ' .scld-result-score').css('background-color', color);
  });
  $('.scld-calculator-tabs-ap input').change(function () {
    let calcId = $(this).data('id'),
      complex = Boolean($(this).data('complex')),
      scores = apObj.data[calcId],
      weight = $(this).data('weight'),
      select = $(this).data('select'),
      dataKey = $(this).data('key'),
      insert = $('#results_' + calcId + ' [data-insert=' + select + ']'),
      total = $('#results_' + calcId + ' [data-insert=total]'),
      totalScore = $('#results_' + calcId + ' [data-insert=total-score]'),
      max = totalScore.data('max'),
      totalId = $('output.scld-result-output-wc[data-id=' + calcId + ']');
    if (!complex) {
      insert.text(Math.round($(this).val() * weight));
      insert.data('not-round', $(this).val() * weight);
    } else {
      let subTotal = $(this).val() * weight,
        dataEnd = insert.data('end');
      insert.data('complex_' + dataKey, subTotal);
      let sumSubject = 0;
      for (let i = 0; i <= dataEnd; i++) {
        sumSubject += insert.data('complex_' + i) || 0;
      }
      insert.text(Math.round(sumSubject));
      insert.data('not-round', sumSubject);
    }
    let scoreSum = 0;
    totalId.each(function () {
      const n = Number($(this).data('not-round'));
      scoreSum += isNaN(n) ? 0 : n;
    });
    if (scoreSum > Number(max)) {
      scoreSum = max;
    }
    let conversion = getScoresAp(scores, Math.round(scoreSum));
    totalScore.text(Math.round(scoreSum) + '/' + max);
    if (apObj['colors'].length > 0) {
      let color = getColor(apObj['colors'], Number(conversion));
      $('#results_' + calcId + ' .change-color').css("background-color", color.color);
    }
    total.text(conversion);
  });
  $('.scld-calculator-tabs-regent input').change(function () {
    let calcId = $(this).data('id'),
      complex = Boolean($(this).data('complex')),
      scores = regentObj.data[calcId],
      dataRow,
      weight = $(this).data('weight'),
      select = $(this).data('select'),
      dataKey = $(this).data('key'),
      insert = $('#results_' + calcId + ' [data-insert=' + select + ']'),
      total = $('#results_' + calcId + ' [data-insert=total]'),
      totalScore = $('#results_' + calcId + ' [data-insert=total-score]'),
      totalScaleScore = $('#results_' + calcId + ' [data-insert=total-scale-score]'),
      max = totalScore.data('max'),
      dataMax = scores[max],
      totalId = $('output.scld-result-output-wc[data-id=' + calcId + ']');
    if (!complex) {
      insert.text(Math.round($(this).val() * weight));
      insert.data('not-round', $(this).val() * weight);
    } else {
      let subTotal = $(this).val() * weight,
        dataEnd = insert.data('end');
      insert.data('complex_' + dataKey, subTotal);
      let sumSubject = 0;
      for (let i = 0; i <= dataEnd; i++) {
        sumSubject += insert.data('complex_' + i)
      }
      insert.text(Math.round(sumSubject));
      insert.data('not-round', sumSubject);
    }
    let scoreSum = 0;
    totalId.each(function () {
      scoreSum += (Number($(this).data('not-round')));
    });
    if (scoreSum > Number(max)) {
      scoreSum = max;
    }
    dataRow = (scores[scoreSum]) ? scores[scoreSum] : scores[max];
    if (regentObj['colors'].length > 0) {
      let color = getColor(regentObj['colors'], Number(dataRow.score));
      $('#results_' + calcId + ' .change-color').css("background-color", color.color);
    }
    totalScaleScore.text(dataRow.max + '/' + dataMax.max);
    totalScore.text(Math.round(scoreSum) + '/' + max);
    total.text(dataRow.score);
  });
  $('a.scld-calculator-tab-button').click(function (e) {
    e.preventDefault();
    let tabId = $(this).data('tab-id');
    let calcHideId = $('#calculator_tabs' + tabId + ' .calc-switcher-container').find('.scld-selected-tab-button').data('calculator-id');
    $('#calculator_tabs' + tabId + ' .calc-switcher-container').find('.scld-selected-tab-button').removeClass('scld-selected-tab-button');
    $(this).addClass('scld-selected-tab-button');
    let calcId = $(this).data('calculator-id');
    $('#calculator_tabs' + tabId + ' #calculator_' + calcHideId + '').hide();
    $('#calculator_tabs' + tabId + ' #calculator_' + calcId + '').show();
  });
  $('.calculator__item input').change(function () {
    $(this).next().val($(this).val());
    $(this).prev().val($(this).val());
  });
  function getColor(scores, value) {
    for (let score in scores) {
      if (value.between(scores[score].min, scores[score].max, true)) {
        return scores[score];
      }
    }
  }
  function getStaarColor(scores, value) {
    for (let score in scores) {
      if (value === scores[score].score.value) {
        return scores[score].color;
      }
    }
  }
  function getScoreAct(scores, value) {
    for (let score in scores) {
      let scoresArray = scores[score].split(',');
      if (scoresArray.includes(value)) {
        return score;
      }
    }
  }
  function getScoreSat(scores, value) {
    for (let score in scores) {
      if (value == score) {
        return scores[score];
      }
    }
  }
  function getScoresAp(scores, value) {
    for (let score in scores) {
      if (value.between(scores[score].min, scores[score].max, true)) {
        return score;
      }
    }
  }
  function init() {
    let inputSat = $('.scld-calculator-tabs-sat input[type="number"]'),
      inputStaar = $('.scld-calculator-tabs-staar input[type="number"]'),
      inputRegent = $('.scld-calculator-tabs-regent [data-insert=total-score]'),
      resultAp = $('.scld-calculator-tabs-ap [data-insert=total-score]'),
      resultAct = $('.scld-calculator-tabs-act [data-insert=total]');
    if (inputRegent.length > 0) {
      inputRegent.each(function () {
        let calcId = $(this).data('ids'),
          value = $(this).data('value'),
          total = $('#results_' + calcId + ' [data-insert=total]'),
          scores = regentObj.data[calcId],
          totalScore = $('#results_' + calcId + ' [data-insert=total-score]'),
          totalScaleScore = $('#results_' + calcId + ' [data-insert=total-scale-score]'),
          max = totalScore.data('max'),
          dataMax = scores[max],
          dataRow = (scores[value]) ? scores[value] : scores[max],
          color;
        if (regentObj['colors'].length > 0) {
          color = getColor(regentObj['colors'], Number(dataRow.score));
          $('#results_' + calcId + ' .change-color').css("background-color", color.color);
        }
        total.text(dataRow.score);
        totalScaleScore.text(dataRow.max + '/' + dataMax.max);
      });
    }
    if (resultAp.length > 0) {
      resultAp.each(function () {
        let calcId = $(this).data('ids'),
          value = $(this).data('value'),
          total = $('#results_' + calcId + ' [data-insert=total]'),
          scores = apObj.data[calcId],
          conversion = getScoresAp(scores, value),
          color;
        total.text(conversion);
        if (apObj['colors'].length > 0) {
          let color = getColor(apObj['colors'], Number(conversion));
          $('#results_' + calcId + ' .change-color').css("background-color", color.color);
        }
      });
    }
    if (inputStaar.length > 0) {
      inputStaar.each(function () {
        let calcId = $(this).data('id'),
          scores = staarObj.data[calcId][$(this).val()],
          scale = scores.scale,
          score = scores.score,
          percentile = scores.percentile,
          color = getStaarColor(staarObj.colors, score.value),
          quantile = scores.quantile;
        $('.results_' + calcId + ' [data-insert=scale]').text(scale);
        $('.results_' + calcId + ' [data-insert=score]').text(score.label);
        $('.results_' + calcId + ' [data-insert=percentile]').text(percentile);
        $('.results_' + calcId + ' [data-insert=quantile]').text(quantile);
        $('.results_' + calcId + ' .scld-result-score').css('background-color', color);
      });
    }
    if (inputSat.length > 0) {
      inputSat.each(function () {
        let calcId = $(this).data('id'),
          subject = $(this).data('subject'),
          color,
          max = $('#results_' + calcId + ' [data-insert=total]').data('sat-max'),
          part = $(this).data('part'),
          scores = satObj.data[calcId][subject],
          score = getScoreSat(scores, $(this).val());
        insert = $('#results_' + calcId + ' [data-insert=' + subject + ']'),
          allResult = $('#results_' + calcId + ' .subject-result');
        insert.text(score);
        if (part.length > 0) {
          let subScoreInsert = $('#results_' + calcId + ' .shown-result [data-part="' + part + '"]');
          $('#results_' + calcId + ' [data-insert=' + subject + ']').data('score', score);
          let subHidden = $('#results_' + calcId + ' .hidden-result [data-part="' + part + '"]').text();
          let totalPart = Number(subScoreInsert.data('score')) + Number(subHidden);
          subScoreInsert.text(totalPart);
        }
        var totalScore = 0;
        var subjects = 0;
        allResult.each(function (index, value) {
          totalScore += (Number($(this).html()));
        });
        if (satObj['colors'].length > 0) {
          color = getColor(satObj['colors'], totalScore);
          $('#results_' + calcId + ' .change-color').css("background-color", color.color);
        }
        $('#results_' + calcId + ' [data-insert=total]').text(totalScore);
      })
    }
    if (resultAct.length > 0) {
      resultAct.each(function () {
        let calcId = $(this).data('id'),
          result = $(this).data('result'),
          colors;
        if (calcObj['colors'].length > 0) {
          colors = getColor(calcObj['colors'], result);
          $('.results_' + calcId + ' [data-insert=total]').css("background-color", colors.color);
        }
      });
    }
  }
  init();
});

C:\xampp82\htdocs\satscore\calc-style.scss

.scld-calculator-title {
  font-size: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 30px !important;
}
p {
  font-size: 16px;
}
.scld-result-container {
  font-size: 16px;
  background: #f1f2f3;
  padding: 15px;
  border-radius: 7px;
  margin: 10px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .scld-result-last {
    + {
      .scld-result-score {
        output {
          font-size: 25px;
        }
      }
    }
  }
  span {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
  }
  .scld-result-output {
    height: 40px;
    min-width: 40px;
    background: #1abc9c;
    border-radius: 16px;
    padding: 8px 16px;
    color: #000;
    display: inline-block;
    text-align: center;
    font-size: 16px;
  }
  .scld-result-output-wc {
    color: #fff;
    text-align: center;
    font-size: 16px;
  }
  .scld-result-predicted-output {
    min-width: 40px;
    background: #1abc9c;
    border-radius: 40px;
    padding: 8px 16px;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 16px;
  }
  .scld-composite-score {
    display: inline-block;
    background: #399fdf;
    padding: 5px 10px;
    color: #fff;
    border-radius: 20px;
  }
  .scld-result-score {
    display: inline-block;
    background: #399fdf;
    padding: 1px 20px;
    color: #fff;
    border-radius: 50px;
  }
  .scld-result-predicted-output-large {
    font-size: 25px;
  }
}
.scld-result-title {
  font-size: 20px;
  font-weight: 400;
  font-size: 24px;
  text-align: center;
}
.scld-tab-switcher-title {
  font-size: 20px;
  font-weight: normal;
  font-style: italic;
  margin: 0 0 15px 0;
}
.calc-switcher-container {
  a.scld-calculator-tab-button {
    text-decoration: none !important;
  }
  display: flex;
  width: 100%;
  justify-content: space-between;
  > div {
    &:first-child {
      flex: 4;
    }
    &:last-child {
      flex: 2;
      margin-left: 25px;
    }
  }
  a {
    text-align: center;
  }
  .scld-calculator__switcher {
    flex: 0 1 70%;
  }
  .scld-calculator__author {
    flex: 0 1 30%;
  }
}
input[type="range"] {
  appearance: none;
  width: 80%;
  color: inherit;
  background: inherit;
  background-image: inherit;
  border: none !important;
  border-radius: inherit;
  display: inherit;
  padding: 0;
  &:focus {
    outline: none !important;
    &::-webkit-slider-runnable-track {
      background: #399fdf;
    }
    &::-ms-fill-lower {
      background: #399fdf;
    }
    &::-ms-fill-upper {
      background: #399fdf;
    }
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 44px;
    width: 14px;
    border-radius: 3px;
    background: #2b6296;
    cursor: pointer;
    margin-top: -14px;
  }
  &::-moz-range-thumb {
    height: 44px;
    width: 14px;
    border-radius: 3px;
    background: #2b6296;
    cursor: pointer;
  }
  &::-ms-thumb {
    height: 44px;
    width: 14px;
    border-radius: 3px;
    background: #2b6296;
    cursor: pointer;
  }
  &::-webkit-slider-runnable-track {
    height: 18px;
    cursor: pointer;
    background: #399fdf;
    border-radius: 10px;
    border: 0.2px solid #3390c1;
  }
  &::-moz-range-track {
    height: 18px;
    cursor: pointer;
    background: #399fdf;
    border-radius: 10px;
    border: 0.2px solid #3390c1;
  }
  &::-ms-track {
    height: 18px;
    cursor: pointer;
    background: transparent;
    border-color: #3390c1;
    border-width: 16px 0;
    color: transparent;
  }
  &::-ms-fill-lower {
    background: #399fdf;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
  }
  &::-ms-fill-upper {
    background: #399fdf;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
  }
}
.scld-calculator-tabs {
  overflow: hidden;
}
.scld-calculator-tabs-container {
  input[type="number"] {
    height: 25px;
    width: 53px;
    border: 1px solid #daddde;
    display: inline-block;
    color: inherit;
    background: inherit;
    background-image: inherit;
    padding: 0 5px;
    border-radius: 3px;
    font-family: "Open Sans", sans-serif;
  }
  .scld-calculate {
    position: relative;
    float: left;
    width: 70%;
    margin: 0px;
  }
  #results {
    position: relative;
    float: left;
    text-align: center;
  }
  input[type="radio"] {
    margin: 0 10px;
  }
}
.scld-slider {
  display: inline-block !important;
}
.scld-calculator__author {
  a {
    text-decoration: none !important;
    display: block;
    text-align: center;
    color: #1abc9c;
    font-size: 14px;
    font-weight: bold;
    &:focus {
      outline: none;
    }
  }
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  font-style: italic;
}
.scld-calculate {
  input[type="number"] {
    font-size: 16px;
    &:focus {
      outline: none !important;
    }
  }
}
.scld-out-of-correct-number {
  font-size: 20px;
  margin-left: 3px;
  vertical-align: top;
}
.scld-calculator-tab-button {
  margin-right: 12px;
  padding: 8px 12px;
  background-color: #fff;
  color: #18a085;
  border: 1px solid #1abc9c;
  border-radius: 4px;
  margin-bottom: 8px;
  display: inline-flex;
  &:hover {
    background: #1abc9c;
    color: #fff !important;
  }
}
.scld-selected-tab-button {
  background: #1abc9c;
  color: #fff !important;
}
input[name^="calculator_tab"] {
  display: none;
}
.scld-calculator-subtitle {
  font-size: 20px;
  font-style: italic;
  margin-bottom: 21px;
}
.scld-result-predicted {
  font-weight: 600 !important;
}
.scld-result-last {
  font-size: 22px;
}
.calculator__item {
  display: flex;
  align-items: center;
  input {
    &:first-child {
      margin-right: 10px;
    }
  }
}
.scld-calculator__wrapper {
  display: flex;
  justify-content: space-between;
  display: flex;
  justify-content: space-between;
  .scld-calculate {
    width: 100% !important;
  }
  .scld-calculator {
    width: 100% !important;
  }
}
.calulator-title {
  display: flex;
  justify-content: space-between;
  h2 {
    &:first-child {
      flex: 4;
    }
    &:last-child {
      flex: 2;
      position: relative;
      margin-left: 25px;
    }
  }
}
.staar-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.scld-calculator__input-wrapper {
  flex: 4;
}
.scld-calculator__row.multiple-input {
  .scld-calculator__result {
    .scld-result-container {
      flex: 1;
    }
  }
}
.change-color {
  &.red {
    background: rgb(221, 85, 102) !important;
  }
  &.yellow {
    background: rgb(240, 191, 108) !important;
  }
  &.green {
    background: rgb(136, 211, 113) !important;
  }
  &.blue {
    background: rgb(45, 173, 255) !important;
  }
  &.purple {
    background: rgb(152, 91, 205) !important;
  }
}
h1,
h2,
h3 {
  &::before {
    display: none !important;
  }
}
.scld-calculator-tabs-sat.scld-calculator__wrapper {
  .scld-calculator {
    flex: 4;
    + {
      div {
        flex: 2;
      }
    }
  }
}
.max-width {
  max-width: 215px;
}
.round-link {
  display: flex;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin-left: 16px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  img {
    width: 100%;
    max-width: 100%;
  }
}
.scld-calculator__row {
  display: flex;
  justify-content: space-between;
}
.scld-calculator__input__container {
  flex: 4;
}
.scld-calculator__input {
  flex: 4;
}
.scld-calculator__result__container {
  flex: 2;
  margin-left: 25px;
}
.scld-calculator__result {
  flex: 2;
  margin-left: 25px;
}
@media (max-width: 960px) {
  .calc-switcher-container {
    a.scld-calculator-tab-button {
      margin-bottom: 10px;
    }
  }
}
@media (max-width: 767px) {
  .scld-calculator__wrapper {
    flex-direction: column;
  }
  .scld-calculator__row {
    flex-direction: column;
  }
  .scld-calculator__input__container {
    flex: 1;
  }
  .scld-calculator__input {
    flex: 1;
  }
  .scld-calculator__result__container {
    flex: 1;
    margin-left: 0;
  }
  .scld-calculator__result {
    flex: 1;
    margin-left: 0;
  }
}

Example 3 (Hoàn chỉnh và tinh giản hơn)

C:\xampp82\htdocs\satscore\index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="./calculator.js"></script>
  <link rel="stylesheet" href="./calc-style.css">
  <title>Document</title>
</head>
<body>
  <div id="calculator_tabs98" class="scld-calculator-tabs-container ">
    <h1 class="scld-calculator-title">SAT® Score Calculator <a class="round-link"
        href="https://www.albert.io/subjects/high-school/act-sat/sat?utm_source=blog&amp;utm_medium=blog&amp;utm_campaign=sat-score-calculator"
        style="background-color: #6565c6">
        <img src="https://assets.albert.io/canary-assets/subject-icons/19b8e13d-3ec5-4346-872e-50f8635aa2a5.svg"
          class="scld-calculator-icon">
      </a>
    </h1>
    <div class="calulator-title">
      <h2 class="scld-calculator-subtitle">Enter your scores</h2>
      <h2 class="scld-result-title">Results</h2>
    </div>
    <div id="calculator_98_0" class="scld-calculator-tabs-sat scld-calculator__wrapper">
      <div id="tab_98_0" class="scld-calculator scld-calculator__input__container">
        <div id="98_0" class="scld-calculate">
          <p><label>Reading and Writing Module 1</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_1" data-id="98_0">
            <input type="number" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_1" data-id="98_0">
            <span class="scld-out-of-correct-number">/27</span>
          </p>
          <p><label>Reading and Writing Module 2</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_2" data-id="98_0">
            <input type="number" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_2" data-id="98_0">
            <span class="scld-out-of-correct-number">/27</span>
          </p>
          <p><label>Math Module 1</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_1"
              data-id="98_0">
            <input type="number" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_1"
              data-id="98_0">
            <span class="scld-out-of-correct-number">/22</span>
          </p>
          <p><label>Math Module 2</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_2"
              data-id="98_0">
            <input type="number" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_2"
              data-id="98_0">
            <span class="scld-out-of-correct-number">/22</span>
          </p>
        </div>
      </div>
      <div id="results_98_0" style="float: left" class="scld-calculator__result__container">
        <div class="scld-result-container"><span>Reading and Writing Score</span>
          <div class="scld-result-score shown-result">
            <output data-insert="Reading_and_Writing_Module_1" data-score="0" data-part="Reading_and_Writing_Score"
              class="scld-result-output-wc subject-result">430</output>
          </div>
        </div>
        <div style="display: none"><span>Reading and Writing Score</span>
          <div class=" hidden-result">
            <output data-insert="Reading_and_Writing_Module_2" data-part="Reading_and_Writing_Score">190</output>
          </div>
        </div>
        <div class="scld-result-container"><span>Math Score</span>
          <div class="scld-result-score shown-result">
            <output data-insert="Math_Module_1" data-score="0" data-part="Math_Score"
              class="scld-result-output-wc subject-result">430</output>
          </div>
        </div>
        <div style="display: none"><span>Math Score</span>
          <div class=" hidden-result">
            <output data-insert="Math_Module_2" data-part="Math_Score">190</output>
          </div>
        </div>
        <div class="scld-result-container"><span class="scld-result-predicted scld-result-last">Total SAT® Score</span>
          <div class="scld-result-score change-color" style="background-color: rgb(157, 105, 27);">
            <output data-insert="total" data-sat-max="1980" class="scld-result-output-wc">860</output>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

C:\xampp82\htdocs\satscore\calculator.js

var satObj = {
  "ids": ["98_0"],
  "colors": [
    {
      "min": "1451",
      "max": "1600",
      "color": "#8224e3"
    },
    {
      "min": "1251",
      "max": "1450",
      "color": "#1e73be"
    },
    {
      "min": "1051",
      "max": "1250",
      "color": "#13866a"
    },
    {
      "min": "851",
      "max": "1050",
      "color": "#9d691b"
    },
    {
      "min": "0",
      "max": "850",
      "color": "#cc3224"
    }
  ],
  "data": {
    "98_0": {
      "Reading_and_Writing_Module_1": [100, 100, 120, 140, 160, 170, 180, 190, 200, 200, 210, 210, 220, 230, 240, 260, 270, 290, 310, 320, 340, 360, 370, 390, 410, 430, 440, 460],
      "Reading_and_Writing_Module_2": [100, 100, 100, 110, 110, 110, 120, 120, 120, 130, 130, 140, 150, 170, 190, 190, 200, 210, 230, 240, 250, 260, 280, 290, 300, 310, 330, 330],
      "Math_Module_1": [100, 100, 120, 140, 160, 160, 180, 180, 200, 200, 210, 240, 260, 280, 300, 320, 340, 360, 390, 410, 430, 450, 470],
      "Math_Module_2": [100, 100, 100, 120, 120, 130, 150, 170, 170, 170, 190, 190, 200, 200, 210, 230, 240, 260, 270, 290, 300, 320, 330]
    }
  }
};
jQuery(document).ready(function ($) {
  Number.prototype.between = function (a, b, inclusive) {
    var min = Math.min.apply(Math, [a, b]), max = Math.max.apply(Math, [a, b]);
    return inclusive ? this >= min && this <= max : this > min && this < max;
  };
  $('.scld-calculator-tabs-sat input').change(function () {
    let subject = $(this).data('subject'), // Reading_and_Writing_Module_1
      calcId = $(this).data('id'), // 98_0
      part = $(this).data('part'), // Reading_and_Writing_Score,
      scores = satObj.data[calcId][subject],
      score = getScoreSat(scores, $(this).val()),
      insert = $('#results_' + calcId + ' [data-insert=' + subject + ']'),
      color,
      allResult = $('#results_' + calcId + ' .subject-result');
    insert.text(score);
    if (part.length > 0) {
      let subScoreInsert = $('#results_' + calcId + ' .shown-result [data-part="' + part + '"]');
      $('#results_' + calcId + ' [data-insert=' + subject + ']').data('score', score);
      let subHidden = $('#results_' + calcId + ' .hidden-result [data-part="' + part + '"]').text();
      let totalPart = Number(subScoreInsert.data('score')) + Number(subHidden);
      subScoreInsert.text(totalPart);
    }
    var totalScore = 0;
    allResult.each(function () {
      totalScore += (Number($(this).html()));
    });
    if (satObj['colors'].length > 0) {
      color = getColor(satObj['colors'], totalScore);
      $('#results_' + calcId + ' .change-color').css("background-color", color.color);
    }
    $('#results_' + calcId + ' [data-insert=total]').text(totalScore);
  });
  $('.calculator__item input').change(function () {
    $(this).next().val($(this).val());
    $(this).prev().val($(this).val());
  });
  function getColor(scores, value) {
    for (let score in scores) {
      if (value.between(scores[score].min, scores[score].max, true)) {
        return scores[score];
      }
    }
  }
  function getScoreSat(scores, value) {
    for (let score in scores) {
      if (value == score) {
        return scores[score];
      }
    }
  }
  function init() {
    let inputSat = $('.scld-calculator-tabs-sat input[type="number"]');
    if (inputSat.length > 0) {
      inputSat.each(function () {
        let calcId = $(this).data('id'),
          subject = $(this).data('subject'),
          color,
          max = $('#results_' + calcId + ' [data-insert=total]').data('sat-max'),
          part = $(this).data('part'),
          scores = satObj.data[calcId][subject],
          score = getScoreSat(scores, $(this).val());
        insert = $('#results_' + calcId + ' [data-insert=' + subject + ']'),
          allResult = $('#results_' + calcId + ' .subject-result');
        insert.text(score);
        if (part.length > 0) {
          let subScoreInsert = $('#results_' + calcId + ' .shown-result [data-part="' + part + '"]');
          $('#results_' + calcId + ' [data-insert=' + subject + ']').data('score', score);
          let subHidden = $('#results_' + calcId + ' .hidden-result [data-part="' + part + '"]').text();
          let totalPart = Number(subScoreInsert.data('score')) + Number(subHidden);
          subScoreInsert.text(totalPart);
        }
        var totalScore = 0;
        var subjects = 0;
        allResult.each(function (index, value) {
          totalScore += (Number($(this).html()));
        });
        if (satObj['colors'].length > 0) {
          color = getColor(satObj['colors'], totalScore);
          $('#results_' + calcId + ' .change-color').css("background-color", color.color);
        }
        $('#results_' + calcId + ' [data-insert=total]').text(totalScore);
      })
    }
  }
  init();
});

C:\xampp82\htdocs\satscore\calc-style.scss

.scld-calculator-title {
  font-size: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 30px !important;
}
p {
  font-size: 16px;
}
.scld-result-container {
  font-size: 16px;
  background: #f1f2f3;
  padding: 15px;
  border-radius: 7px;
  margin: 10px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .scld-result-last {
    + {
      .scld-result-score {
        output {
          font-size: 25px;
        }
      }
    }
  }
  span {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
  }
  .scld-result-output {
    height: 40px;
    min-width: 40px;
    background: #1abc9c;
    border-radius: 16px;
    padding: 8px 16px;
    color: #000;
    display: inline-block;
    text-align: center;
    font-size: 16px;
  }
  .scld-result-output-wc {
    color: #fff;
    text-align: center;
    font-size: 16px;
  }
  .scld-result-predicted-output {
    min-width: 40px;
    background: #1abc9c;
    border-radius: 40px;
    padding: 8px 16px;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 16px;
  }
  .scld-composite-score {
    display: inline-block;
    background: #399fdf;
    padding: 5px 10px;
    color: #fff;
    border-radius: 20px;
  }
  .scld-result-score {
    display: inline-block;
    background: #399fdf;
    padding: 1px 20px;
    color: #fff;
    border-radius: 50px;
  }
  .scld-result-predicted-output-large {
    font-size: 25px;
  }
}
.scld-result-title {
  font-size: 20px;
  font-weight: 400;
  font-size: 24px;
  text-align: center;
}
.scld-tab-switcher-title {
  font-size: 20px;
  font-weight: normal;
  font-style: italic;
  margin: 0 0 15px 0;
}
.calc-switcher-container {
  a.scld-calculator-tab-button {
    text-decoration: none !important;
  }
  display: flex;
  width: 100%;
  justify-content: space-between;
  > div {
    &:first-child {
      flex: 4;
    }
    &:last-child {
      flex: 2;
      margin-left: 25px;
    }
  }
  a {
    text-align: center;
  }
  .scld-calculator__switcher {
    flex: 0 1 70%;
  }
  .scld-calculator__author {
    flex: 0 1 30%;
  }
}
input[type="range"] {
  appearance: none;
  width: 80%;
  color: inherit;
  background: inherit;
  background-image: inherit;
  border: none !important;
  border-radius: inherit;
  display: inherit;
  padding: 0;
  &:focus {
    outline: none !important;
    &::-webkit-slider-runnable-track {
      background: #399fdf;
    }
    &::-ms-fill-lower {
      background: #399fdf;
    }
    &::-ms-fill-upper {
      background: #399fdf;
    }
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 44px;
    width: 14px;
    border-radius: 3px;
    background: #2b6296;
    cursor: pointer;
    margin-top: -14px;
  }
  &::-moz-range-thumb {
    height: 44px;
    width: 14px;
    border-radius: 3px;
    background: #2b6296;
    cursor: pointer;
  }
  &::-ms-thumb {
    height: 44px;
    width: 14px;
    border-radius: 3px;
    background: #2b6296;
    cursor: pointer;
  }
  &::-webkit-slider-runnable-track {
    height: 18px;
    cursor: pointer;
    background: #399fdf;
    border-radius: 10px;
    border: 0.2px solid #3390c1;
  }
  &::-moz-range-track {
    height: 18px;
    cursor: pointer;
    background: #399fdf;
    border-radius: 10px;
    border: 0.2px solid #3390c1;
  }
  &::-ms-track {
    height: 18px;
    cursor: pointer;
    background: transparent;
    border-color: #3390c1;
    border-width: 16px 0;
    color: transparent;
  }
  &::-ms-fill-lower {
    background: #399fdf;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
  }
  &::-ms-fill-upper {
    background: #399fdf;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
  }
}
.scld-calculator-tabs {
  overflow: hidden;
}
.scld-calculator-tabs-container {
  input[type="number"] {
    height: 25px;
    width: 53px;
    border: 1px solid #daddde;
    display: inline-block;
    color: inherit;
    background: inherit;
    background-image: inherit;
    padding: 0 5px;
    border-radius: 3px;
    font-family: "Open Sans", sans-serif;
  }
  .scld-calculate {
    position: relative;
    float: left;
    width: 70%;
    margin: 0px;
  }
  #results {
    position: relative;
    float: left;
    text-align: center;
  }
  input[type="radio"] {
    margin: 0 10px;
  }
}
.scld-slider {
  display: inline-block !important;
}
.scld-calculator__author {
  a {
    text-decoration: none !important;
    display: block;
    text-align: center;
    color: #1abc9c;
    font-size: 14px;
    font-weight: bold;
    &:focus {
      outline: none;
    }
  }
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  font-style: italic;
}
.scld-calculate {
  input[type="number"] {
    font-size: 16px;
    &:focus {
      outline: none !important;
    }
  }
}
.scld-out-of-correct-number {
  font-size: 20px;
  margin-left: 3px;
  vertical-align: top;
}
.scld-calculator-tab-button {
  margin-right: 12px;
  padding: 8px 12px;
  background-color: #fff;
  color: #18a085;
  border: 1px solid #1abc9c;
  border-radius: 4px;
  margin-bottom: 8px;
  display: inline-flex;
  &:hover {
    background: #1abc9c;
    color: #fff !important;
  }
}
.scld-selected-tab-button {
  background: #1abc9c;
  color: #fff !important;
}
input[name^="calculator_tab"] {
  display: none;
}
.scld-calculator-subtitle {
  font-size: 20px;
  font-style: italic;
  margin-bottom: 21px;
}
.scld-result-predicted {
  font-weight: 600 !important;
}
.scld-result-last {
  font-size: 22px;
}
.calculator__item {
  display: flex;
  align-items: center;
  input {
    &:first-child {
      margin-right: 10px;
    }
  }
}
.scld-calculator__wrapper {
  display: flex;
  justify-content: space-between;
  display: flex;
  justify-content: space-between;
  .scld-calculate {
    width: 100% !important;
  }
  .scld-calculator {
    width: 100% !important;
  }
}
.calulator-title {
  display: flex;
  justify-content: space-between;
  h2 {
    &:first-child {
      flex: 4;
    }
    &:last-child {
      flex: 2;
      position: relative;
      margin-left: 25px;
    }
  }
}
.staar-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.scld-calculator__input-wrapper {
  flex: 4;
}
.scld-calculator__row.multiple-input {
  .scld-calculator__result {
    .scld-result-container {
      flex: 1;
    }
  }
}
.change-color {
  &.red {
    background: rgb(221, 85, 102) !important;
  }
  &.yellow {
    background: rgb(240, 191, 108) !important;
  }
  &.green {
    background: rgb(136, 211, 113) !important;
  }
  &.blue {
    background: rgb(45, 173, 255) !important;
  }
  &.purple {
    background: rgb(152, 91, 205) !important;
  }
}
h1,
h2,
h3 {
  &::before {
    display: none !important;
  }
}
.scld-calculator-tabs-sat.scld-calculator__wrapper {
  .scld-calculator {
    flex: 4;
    + {
      div {
        flex: 2;
      }
    }
  }
}
.max-width {
  max-width: 215px;
}
.round-link {
  display: flex;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin-left: 16px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  img {
    width: 100%;
    max-width: 100%;
  }
}
.scld-calculator__row {
  display: flex;
  justify-content: space-between;
}
.scld-calculator__input__container {
  flex: 4;
}
.scld-calculator__input {
  flex: 4;
}
.scld-calculator__result__container {
  flex: 2;
  margin-left: 25px;
}
.scld-calculator__result {
  flex: 2;
  margin-left: 25px;
}
@media (max-width: 960px) {
  .calc-switcher-container {
    a.scld-calculator-tab-button {
      margin-bottom: 10px;
    }
  }
}
@media (max-width: 767px) {
  .scld-calculator__wrapper {
    flex-direction: column;
  }
  .scld-calculator__row {
    flex-direction: column;
  }
  .scld-calculator__input__container {
    flex: 1;
  }
  .scld-calculator__input {
    flex: 1;
  }
  .scld-calculator__result__container {
    flex: 1;
    margin-left: 0;
  }
  .scld-calculator__result {
    flex: 1;
    margin-left: 0;
  }
}

Example 4 (Hoàn chỉnh và tinh giản hơn)

C:\xampp82\htdocs\satscore\index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="./calculator.js"></script>
  <link rel="stylesheet" href="./calc-style.css">
  <title>Document</title>
</head>
<body>
  <div id="calculator_tabs98" class="scld-calculator-tabs-container ">
    <h1 class="scld-calculator-title">SAT® Score Calculator <a class="round-link"
        href="https://www.albert.io/subjects/high-school/act-sat/sat?utm_source=blog&amp;utm_medium=blog&amp;utm_campaign=sat-score-calculator"
        style="background-color: #6565c6">
        <img src="https://assets.albert.io/canary-assets/subject-icons/19b8e13d-3ec5-4346-872e-50f8635aa2a5.svg"
          class="scld-calculator-icon">
      </a>
    </h1>
    <div class="calulator-title">
      <h2 class="scld-calculator-subtitle">Enter your scores</h2>
      <h2 class="scld-result-title">Results</h2>
    </div>
    <div id="calculator_98questions" class="scld-calculator-tabs-sat scld-calculator__wrapper">
      <div id="tab_98questions" class="scld-calculator scld-calculator__input__container">
        <div id="98questions" class="scld-calculate">
          <p><label>Reading and Writing Module 1</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_1" data-id="98questions">
            <input type="number" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_1" data-id="98questions">
            <span class="scld-out-of-correct-number">/27</span>
          </p>
          <p><label>Reading and Writing Module 2</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_2" data-id="98questions">
            <input type="number" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_2" data-id="98questions">
            <span class="scld-out-of-correct-number">/27</span>
          </p>
          <p><label>Math Module 1</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_1"
              data-id="98questions">
            <input type="number" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_1"
              data-id="98questions">
            <span class="scld-out-of-correct-number">/22</span>
          </p>
          <p><label>Math Module 2</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_2"
              data-id="98questions">
            <input type="number" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_2"
              data-id="98questions">
            <span class="scld-out-of-correct-number">/22</span>
          </p>
        </div>
      </div>
      <div id="results_98questions" style="float: left" class="scld-calculator__result__container">
        <div class="scld-result-container"><span>Reading and Writing Score</span>
          <div class="scld-result-score shown-result">
            <output data-insert="Reading_and_Writing_Module_1" data-score="0" data-part="Reading_and_Writing_Score"
              class="scld-result-output-wc subject-result">430</output>
          </div>
        </div>
        <div style="display: none"><span>Reading and Writing Score</span>
          <div class=" hidden-result">
            <output data-insert="Reading_and_Writing_Module_2" data-part="Reading_and_Writing_Score">190</output>
          </div>
        </div>
        <div class="scld-result-container"><span>Math Score</span>
          <div class="scld-result-score shown-result">
            <output data-insert="Math_Module_1" data-score="0" data-part="Math_Score"
              class="scld-result-output-wc subject-result">430</output>
          </div>
        </div>
        <div style="display: none"><span>Math Score</span>
          <div class=" hidden-result">
            <output data-insert="Math_Module_2" data-part="Math_Score">190</output>
          </div>
        </div>
        <div class="scld-result-container"><span class="scld-result-predicted scld-result-last">Total SAT® Score</span>
          <div class="scld-result-score change-color" style="background-color: rgb(157, 105, 27);">
            <output data-insert="total" data-sat-max="1980" class="scld-result-output-wc">860</output>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

C:\xampp82\htdocs\satscore\calculator.js

var satObj = {
  "ids": ["98questions"],
  "colors": [
    {
      "min": "1451",
      "max": "1600",
      "color": "#8224e3"
    },
    {
      "min": "1251",
      "max": "1450",
      "color": "#1e73be"
    },
    {
      "min": "1051",
      "max": "1250",
      "color": "#13866a"
    },
    {
      "min": "851",
      "max": "1050",
      "color": "#9d691b"
    },
    {
      "min": "0",
      "max": "850",
      "color": "#cc3224"
    }
  ],
  "data": {
    "98questions": {
      "Reading_and_Writing_Module_1": [100, 100, 120, 140, 160, 170, 180, 190, 200, 200, 210, 210, 220, 230, 240, 260, 270, 290, 310, 320, 340, 360, 370, 390, 410, 430, 440, 460],
      "Reading_and_Writing_Module_2": [100, 100, 100, 110, 110, 110, 120, 120, 120, 130, 130, 140, 150, 170, 190, 190, 200, 210, 230, 240, 250, 260, 280, 290, 300, 310, 330, 330],
      "Math_Module_1": [100, 100, 120, 140, 160, 160, 180, 180, 200, 200, 210, 240, 260, 280, 300, 320, 340, 360, 390, 410, 430, 450, 470],
      "Math_Module_2": [100, 100, 100, 120, 120, 130, 150, 170, 170, 170, 190, 190, 200, 200, 210, 230, 240, 260, 270, 290, 300, 320, 330]
    }
  }
};
jQuery(document).ready(function ($) {
  Number.prototype.between = function (a, b, inclusive) {
    var min = Math.min.apply(Math, [a, b]), max = Math.max.apply(Math, [a, b]);
    return inclusive ? this >= min && this <= max : this > min && this < max;
  };
  $('.scld-calculator-tabs-sat input').change(function () {
    let subject = $(this).data('subject'), // Reading_and_Writing_Module_1
      calcId = $(this).data('id'), // 98questions
      part = $(this).data('part'), // Reading_and_Writing_Score,
      scores = satObj.data[calcId][subject],
      score = getScoreSat(scores, $(this).val()),
      insert = $('#results_' + calcId + ' [data-insert=' + subject + ']'),
      color,
      allResult = $('#results_' + calcId + ' .subject-result');
    insert.text(score);
    if (part.length > 0) {
      let subScoreInsert = $('#results_' + calcId + ' .shown-result [data-part="' + part + '"]');
      $('#results_' + calcId + ' [data-insert=' + subject + ']').data('score', score);
      let subHidden = $('#results_' + calcId + ' .hidden-result [data-part="' + part + '"]').text();
      let totalPart = Number(subScoreInsert.data('score')) + Number(subHidden);
      subScoreInsert.text(totalPart);
    }
    var totalScore = 0;
    allResult.each(function () {
      totalScore += (Number($(this).html()));
    });
    if (satObj['colors'].length > 0) {
      color = getColor(satObj['colors'], totalScore);
      $('#results_' + calcId + ' .change-color').css("background-color", color.color);
    }
    $('#results_' + calcId + ' [data-insert=total]').text(totalScore);
  });
  $('.calculator__item input').change(function () {
    $(this).next().val($(this).val());
    $(this).prev().val($(this).val());
  });
  function getColor(scores, value) {
    for (let score in scores) {
      if (value.between(scores[score].min, scores[score].max, true)) {
        return scores[score];
      }
    }
  }
  function getScoreSat(scores, value) {
    for (let score in scores) {
      if (value == score) {
        return scores[score];
      }
    }
  }
  function init() {
    let inputSat = $('.scld-calculator-tabs-sat input[type="number"]');
    if (inputSat.length > 0) {
      inputSat.each(function () {
        let calcId = $(this).data('id'),
          subject = $(this).data('subject'),
          color,
          max = $('#results_' + calcId + ' [data-insert=total]').data('sat-max'),
          part = $(this).data('part'),
          scores = satObj.data[calcId][subject],
          score = getScoreSat(scores, $(this).val());
        insert = $('#results_' + calcId + ' [data-insert=' + subject + ']'),
          allResult = $('#results_' + calcId + ' .subject-result');
        insert.text(score);
        if (part.length > 0) {
          let subScoreInsert = $('#results_' + calcId + ' .shown-result [data-part="' + part + '"]');
          $('#results_' + calcId + ' [data-insert=' + subject + ']').data('score', score);
          let subHidden = $('#results_' + calcId + ' .hidden-result [data-part="' + part + '"]').text();
          let totalPart = Number(subScoreInsert.data('score')) + Number(subHidden);
          subScoreInsert.text(totalPart);
        }
        var totalScore = 0;
        var subjects = 0;
        allResult.each(function (index, value) {
          totalScore += (Number($(this).html()));
        });
        if (satObj['colors'].length > 0) {
          color = getColor(satObj['colors'], totalScore);
          $('#results_' + calcId + ' .change-color').css("background-color", color.color);
        }
        $('#results_' + calcId + ' [data-insert=total]').text(totalScore);
      })
    }
  }
  init();
});

C:\xampp82\htdocs\satscore\calc-style.scss

.scld-calculator-title {
  font-size: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 30px !important;
}
p {
  font-size: 16px;
}
.scld-result-container {
  font-size: 16px;
  background: #f1f2f3;
  padding: 15px;
  border-radius: 7px;
  margin: 10px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .scld-result-last {
    + {
      .scld-result-score {
        output {
          font-size: 25px;
        }
      }
    }
  }
  span {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
  }
  .scld-result-output {
    height: 40px;
    min-width: 40px;
    background: #1abc9c;
    border-radius: 16px;
    padding: 8px 16px;
    color: #000;
    display: inline-block;
    text-align: center;
    font-size: 16px;
  }
  .scld-result-output-wc {
    color: #fff;
    text-align: center;
    font-size: 16px;
  }
  .scld-result-predicted-output {
    min-width: 40px;
    background: #1abc9c;
    border-radius: 40px;
    padding: 8px 16px;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 16px;
  }
  .scld-composite-score {
    display: inline-block;
    background: #399fdf;
    padding: 5px 10px;
    color: #fff;
    border-radius: 20px;
  }
  .scld-result-score {
    display: inline-block;
    background: #399fdf;
    padding: 1px 20px;
    color: #fff;
    border-radius: 50px;
  }
  .scld-result-predicted-output-large {
    font-size: 25px;
  }
}
.scld-result-title {
  font-size: 20px;
  font-weight: 400;
  font-size: 24px;
  text-align: center;
}
.scld-tab-switcher-title {
  font-size: 20px;
  font-weight: normal;
  font-style: italic;
  margin: 0 0 15px 0;
}
.calc-switcher-container {
  a.scld-calculator-tab-button {
    text-decoration: none !important;
  }
  display: flex;
  width: 100%;
  justify-content: space-between;
  > div {
    &:first-child {
      flex: 4;
    }
    &:last-child {
      flex: 2;
      margin-left: 25px;
    }
  }
  a {
    text-align: center;
  }
  .scld-calculator__switcher {
    flex: 0 1 70%;
  }
  .scld-calculator__author {
    flex: 0 1 30%;
  }
}
input[type="range"] {
  appearance: none;
  width: 80%;
  color: inherit;
  background: inherit;
  background-image: inherit;
  border: none !important;
  border-radius: inherit;
  display: inherit;
  padding: 0;
  &:focus {
    outline: none !important;
    &::-webkit-slider-runnable-track {
      background: #399fdf;
    }
    &::-ms-fill-lower {
      background: #399fdf;
    }
    &::-ms-fill-upper {
      background: #399fdf;
    }
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 44px;
    width: 14px;
    border-radius: 3px;
    background: #2b6296;
    cursor: pointer;
    margin-top: -14px;
  }
  &::-moz-range-thumb {
    height: 44px;
    width: 14px;
    border-radius: 3px;
    background: #2b6296;
    cursor: pointer;
  }
  &::-ms-thumb {
    height: 44px;
    width: 14px;
    border-radius: 3px;
    background: #2b6296;
    cursor: pointer;
  }
  &::-webkit-slider-runnable-track {
    height: 18px;
    cursor: pointer;
    background: #399fdf;
    border-radius: 10px;
    border: 0.2px solid #3390c1;
  }
  &::-moz-range-track {
    height: 18px;
    cursor: pointer;
    background: #399fdf;
    border-radius: 10px;
    border: 0.2px solid #3390c1;
  }
  &::-ms-track {
    height: 18px;
    cursor: pointer;
    background: transparent;
    border-color: #3390c1;
    border-width: 16px 0;
    color: transparent;
  }
  &::-ms-fill-lower {
    background: #399fdf;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
  }
  &::-ms-fill-upper {
    background: #399fdf;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
  }
}
.scld-calculator-tabs {
  overflow: hidden;
}
.scld-calculator-tabs-container {
  input[type="number"] {
    height: 25px;
    width: 53px;
    border: 1px solid #daddde;
    display: inline-block;
    color: inherit;
    background: inherit;
    background-image: inherit;
    padding: 0 5px;
    border-radius: 3px;
    font-family: "Open Sans", sans-serif;
  }
  .scld-calculate {
    position: relative;
    float: left;
    width: 70%;
    margin: 0px;
  }
  #results {
    position: relative;
    float: left;
    text-align: center;
  }
  input[type="radio"] {
    margin: 0 10px;
  }
}
.scld-slider {
  display: inline-block !important;
}
.scld-calculator__author {
  a {
    text-decoration: none !important;
    display: block;
    text-align: center;
    color: #1abc9c;
    font-size: 14px;
    font-weight: bold;
    &:focus {
      outline: none;
    }
  }
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  font-style: italic;
}
.scld-calculate {
  input[type="number"] {
    font-size: 16px;
    &:focus {
      outline: none !important;
    }
  }
}
.scld-out-of-correct-number {
  font-size: 20px;
  margin-left: 3px;
  vertical-align: top;
}
.scld-calculator-tab-button {
  margin-right: 12px;
  padding: 8px 12px;
  background-color: #fff;
  color: #18a085;
  border: 1px solid #1abc9c;
  border-radius: 4px;
  margin-bottom: 8px;
  display: inline-flex;
  &:hover {
    background: #1abc9c;
    color: #fff !important;
  }
}
.scld-selected-tab-button {
  background: #1abc9c;
  color: #fff !important;
}
input[name^="calculator_tab"] {
  display: none;
}
.scld-calculator-subtitle {
  font-size: 20px;
  font-style: italic;
  margin-bottom: 21px;
}
.scld-result-predicted {
  font-weight: 600 !important;
}
.scld-result-last {
  font-size: 22px;
}
.calculator__item {
  display: flex;
  align-items: center;
  input {
    &:first-child {
      margin-right: 10px;
    }
  }
}
.scld-calculator__wrapper {
  display: flex;
  justify-content: space-between;
  display: flex;
  justify-content: space-between;
  .scld-calculate {
    width: 100% !important;
  }
  .scld-calculator {
    width: 100% !important;
  }
}
.calulator-title {
  display: flex;
  justify-content: space-between;
  h2 {
    &:first-child {
      flex: 4;
    }
    &:last-child {
      flex: 2;
      position: relative;
      margin-left: 25px;
    }
  }
}
.staar-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.scld-calculator__input-wrapper {
  flex: 4;
}
.scld-calculator__row.multiple-input {
  .scld-calculator__result {
    .scld-result-container {
      flex: 1;
    }
  }
}
.change-color {
  &.red {
    background: rgb(221, 85, 102) !important;
  }
  &.yellow {
    background: rgb(240, 191, 108) !important;
  }
  &.green {
    background: rgb(136, 211, 113) !important;
  }
  &.blue {
    background: rgb(45, 173, 255) !important;
  }
  &.purple {
    background: rgb(152, 91, 205) !important;
  }
}
h1,
h2,
h3 {
  &::before {
    display: none !important;
  }
}
.scld-calculator-tabs-sat.scld-calculator__wrapper {
  .scld-calculator {
    flex: 4;
    + {
      div {
        flex: 2;
      }
    }
  }
}
.max-width {
  max-width: 215px;
}
.round-link {
  display: flex;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin-left: 16px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  img {
    width: 100%;
    max-width: 100%;
  }
}
.scld-calculator__row {
  display: flex;
  justify-content: space-between;
}
.scld-calculator__input__container {
  flex: 4;
}
.scld-calculator__input {
  flex: 4;
}
.scld-calculator__result__container {
  flex: 2;
  margin-left: 25px;
}
.scld-calculator__result {
  flex: 2;
  margin-left: 25px;
}
@media (max-width: 960px) {
  .calc-switcher-container {
    a.scld-calculator-tab-button {
      margin-bottom: 10px;
    }
  }
}
@media (max-width: 767px) {
  .scld-calculator__wrapper {
    flex-direction: column;
  }
  .scld-calculator__row {
    flex-direction: column;
  }
  .scld-calculator__input__container {
    flex: 1;
  }
  .scld-calculator__input {
    flex: 1;
  }
  .scld-calculator__result__container {
    flex: 1;
    margin-left: 0;
  }
  .scld-calculator__result {
    flex: 1;
    margin-left: 0;
  }
}

Example 5 (Hoàn chỉnh và tinh giản hơn dùng để làm SAT)

C:\xampp82\htdocs\satscore\index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="./calculator.js"></script>
  <link rel="stylesheet" href="./calc-style.css">
  <title>Document</title>
</head>
<body>
  <div id="calculator_tabs98" class="scld-calculator-tabs-container ">
    <h1 class="scld-calculator-title">SAT® Score Calculator <a class="round-link"
        href="https://www.albert.io/subjects/high-school/act-sat/sat?utm_source=blog&amp;utm_medium=blog&amp;utm_campaign=sat-score-calculator"
        style="background-color: #6565c6">
        <img src="https://assets.albert.io/canary-assets/subject-icons/19b8e13d-3ec5-4346-872e-50f8635aa2a5.svg"
          class="scld-calculator-icon">
      </a>
    </h1>
    <div class="calulator-title">
      <h2 class="scld-calculator-subtitle">Enter your scores</h2>
      <h2 class="scld-result-title">Results</h2>
    </div>
    <div id="calculator_98questions" class="scld-calculator-tabs-sat scld-calculator__wrapper">
      <div id="tab_98questions" class="scld-calculator scld-calculator__input__container">
        <div id="98questions" class="scld-calculate">
          <p><label>Reading and Writing Module 1</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_1" data-id="98questions">
            <input type="number" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_1" data-id="98questions">
            <span class="scld-out-of-correct-number">/27</span>
          </p>
          <p><label>Reading and Writing Module 2</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_2" data-id="98questions">
            <input type="number" min="0" max="27" value="14" data-part="Reading_and_Writing_Score"
              data-subject="Reading_and_Writing_Module_2" data-id="98questions">
            <span class="scld-out-of-correct-number">/27</span>
          </p>
          <p><label>Math Module 1</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_1"
              data-id="98questions">
            <input type="number" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_1"
              data-id="98questions">
            <span class="scld-out-of-correct-number">/22</span>
          </p>
          <p><label>Math Module 2</label></p>
          <p class="calculator__item">
            <input type="range" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_2"
              data-id="98questions">
            <input type="number" min="0" max="22" value="11" data-part="Math_Score" data-subject="Math_Module_2"
              data-id="98questions">
            <span class="scld-out-of-correct-number">/22</span>
          </p>
        </div>
      </div>
      <div id="results_98questions" style="float: left" class="scld-calculator__result__container">
        <div class="scld-result-container"><span>Reading and Writing Score</span>
          <div class="scld-result-score shown-result">
            <output data-insert="Reading_and_Writing_Module_1" data-score="0" data-part="Reading_and_Writing_Score"
              class="scld-result-output-wc subject-result">430</output>
          </div>
        </div>
        <div style="display: none"><span>Reading and Writing Score</span>
          <div class=" hidden-result">
            <output data-insert="Reading_and_Writing_Module_2" data-part="Reading_and_Writing_Score">190</output>
          </div>
        </div>
        <div class="scld-result-container"><span>Math Score</span>
          <div class="scld-result-score shown-result">
            <output data-insert="Math_Module_1" data-score="0" data-part="Math_Score"
              class="scld-result-output-wc subject-result">430</output>
          </div>
        </div>
        <div style="display: none"><span>Math Score</span>
          <div class=" hidden-result">
            <output data-insert="Math_Module_2" data-part="Math_Score">190</output>
          </div>
        </div>
        <div class="scld-result-container"><span class="scld-result-predicted scld-result-last">Total SAT® Score</span>
          <div class="scld-result-score change-color" style="background-color: rgb(157, 105, 27);">
            <output data-insert="total" data-sat-max="1980" class="scld-result-output-wc">860</output>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

C:\xampp82\htdocs\satscore\calculator.js

var satObj = {
  "ids": ["98questions"],
  "colors": [
    {
      "min": "1451",
      "max": "1600",
      "color": "#8224e3"
    },
    {
      "min": "1251",
      "max": "1450",
      "color": "#1e73be"
    },
    {
      "min": "1051",
      "max": "1250",
      "color": "#13866a"
    },
    {
      "min": "851",
      "max": "1050",
      "color": "#9d691b"
    },
    {
      "min": "0",
      "max": "850",
      "color": "#cc3224"
    }
  ],
  "data": {
    "98questions": {
      "Reading_and_Writing_Module_1": [100, 100, 120, 140, 160, 170, 180, 190, 200, 200, 210, 210, 220, 230, 240, 260, 270, 290, 310, 320, 340, 360, 370, 390, 410, 430, 440, 460],
      "Reading_and_Writing_Module_2": [100, 100, 100, 110, 110, 110, 120, 120, 120, 130, 130, 140, 150, 170, 190, 190, 200, 210, 230, 240, 250, 260, 280, 290, 300, 310, 330, 330],
      "Math_Module_1": [100, 100, 120, 140, 160, 160, 180, 180, 200, 200, 210, 240, 260, 280, 300, 320, 340, 360, 390, 410, 430, 450, 470],
      "Math_Module_2": [100, 100, 100, 120, 120, 130, 150, 170, 170, 170, 190, 190, 200, 200, 210, 230, 240, 260, 270, 290, 300, 320, 330]
    }
  }
};
jQuery(document).ready(function ($) {
  Number.prototype.between = function (a, b, inclusive) {
    var min = Math.min.apply(Math, [a, b]), max = Math.max.apply(Math, [a, b]);
    return inclusive ? this >= min && this <= max : this > min && this < max;
  };
  $('.scld-calculator-tabs-sat input').change(function () {
    let subject = $(this).data('subject'), // Reading_and_Writing_Module_1
      calcId = $(this).data('id'), // 98questions
      part = $(this).data('part'), // Reading_and_Writing_Score,
      scores = satObj.data[calcId][subject],
      score = getScoreSat(scores, $(this).val()),
      insert = $('#results_' + calcId + ' [data-insert=' + subject + ']'),
      color,
      allResult = $('#results_' + calcId + ' .subject-result');
    insert.text(score);
    if (part.length > 0) {
      let subScoreInsert = $('#results_' + calcId + ' .shown-result [data-part="' + part + '"]');
      $('#results_' + calcId + ' [data-insert=' + subject + ']').data('score', score);
      let subHidden = $('#results_' + calcId + ' .hidden-result [data-part="' + part + '"]').text();
      let totalPart = Number(subScoreInsert.data('score')) + Number(subHidden);
      subScoreInsert.text(totalPart);
    }
    var totalScore = 0;
    allResult.each(function () {
      totalScore += (Number($(this).html()));
    });
    if (satObj['colors'].length > 0) {
      color = getColor(satObj['colors'], totalScore);
      $('#results_' + calcId + ' .change-color').css("background-color", color.color);
    }
    $('#results_' + calcId + ' [data-insert=total]').text(totalScore);
  });
  function getColor(scores, value) {
    for (let score in scores) {
      if (value.between(scores[score].min, scores[score].max, true)) {
        return scores[score];
      }
    }
  }
  function getScoreSat(scores, value) {
    for (let score in scores) {
      if (value == score) {
        return scores[score];
      }
    }
  }
});