如何在用HTML编写的表单上设置排名系统，以便使用javascript对总计算值进行排名

我有一个简单的HTML表单。共有3个部分（A、B和C部分）。当用户填写表单时，通过显示总分和百分比来计算每个部分。我想排名分数，并显示在排名栏，但似乎无法计算如何做到这一点。例如，如果A部分得4分，B部分得3分，C部分得0分，则A部分得1分，B部分得2分，C部分得3分。另外，在填写表格时更改排名也很理想

我是JavaScript新手，这是我目前正在学习的课程的作业。我在如何逻辑地实现这一点上遇到了困难。这只是我表格的一个样本。我有一个更大的表格，有更多的部分和问题。请运行我的代码，以便您可以看到更好的视觉效果。任何代码片段和建议，将帮助我将不胜感激。我知道我的代码不是最好的，但正如我所说的，我还在学习，我的教授希望我们按照我的代码结构进行练习，因此更改此代码可能会导致我的教授扣分。因此，如果给出了任何代码片段，请保留与我的代码相同的结构

我曾尝试在JavaScript中使用if语句，但正如我所说的，我不知道如何在逻辑上做到这一点。我很感激

    <table>
          <tr>
            <th>Category |</th>
            <th>Points Possible |</th>
            <th>Points Awarded |</th>
            <th>Percent Achieved |</th>
            <th>Ranking</th>
          </tr>
          <tr>
            <td align="center">A</td>
            <td align="center">4</td>
            <td align="center"><b><div><span id="TotalASummary"></span></div></b></td>
            <td align="center"><b><div><span id="TotalAPercent"></span></div></b></td>
            <td bgcolor="#92d050" align="center"></td>
          </tr>
          <tr>
            <td align="center">B</td>
            <td align="center">4</td>
            <td align="center"><b><div><span id="TotalBSummary"></span></div></td>
            <td align="center"><b><div><span id="TotalBPercent"></span></div></td>
            <td bgcolor="#92d050" align="center"></td>
          </tr>
          <tr>
            <td align="center">C</td>
            <td align="center">4</td>
            <td align="center"><b><div><span id="TotalCSummary"></span></div></td>
            <td align="center"><b><div><span id="TotalCPercent"></span></div></td>
            <td bgcolor="#92d050" align="center"></td>
          </tr>
       </table>
       <table>
         <tr>
           <th>Section A.</th>
           <td></td>
           <td></td>
         </tr>
         <tr>
           <td></td>
         </tr>
         <tr>
           <td><b>A.1</b></td>
           <td><b>Value</b></td>
           <td><b>Awarded</b></td>
         </tr>
         <tr>
           <td>a)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcA1();" id="Aa1">
                             <option value="0">0</option>
                             <option value="1">1</option>
                           </select></td>
         </tr>
         <tr>
           <td>b)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcA1();" id="Ab1">
                              <option value="0">0</option>
                              <option value="1">1</option>
                              </select></td>
         </tr>
         <tr>
           <td>c)</td>
           <td align="center">2</td>
           <td align="center"><select class="select" onChange="calcA1();" id="Ac1">
                              <option value="0">0</option>
                              <option value="2">2</option>
                              </select></td>
         </tr>
         <tr>
           <td class="subtotal">Section A. Total</td>
           <td align="center"><b>4</b></td>
           <td align="center"><b><div><span id="totalA"></span></div></b></td>
         </tr>

         <tr>
           <th>Section B.</th>
           <td></td>
           <td></td>
         </tr>
         <tr>
           <td></td>
         </tr>
         <tr>
           <td><b>B.1</b></td>
           <td><b>Value</b></td>
           <td><b>Awarded</b></td>
         </tr>
         <tr>
           <td>a)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcB1();" id="Ba1">
                             <option value="0">0</option>
                             <option value="2">2</option>
                           </select></td>
         </tr>
         <tr>
           <td>b)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcB1();" id="Bb1">
                              <option value="0">0</option>
                              <option value="1">1</option>
                              </select></td>
         </tr>
         <tr>
           <td>c)</td>
           <td align="center">2</td>
           <td align="center"><select class="select" onChange="calcB1();" id="Bc1">
                              <option value="0">0</option>
                              <option value="2">2</option>
                              </select></td>
         </tr>

         <tr>
           <td class="subtotal">Section B. Total</td>
           <td align="center"><b>5</b></td>
           <td align="center"><b><div><span id="totalB"></span></div></b></td>
         </tr>
         <tr>
           <th>Section C.</th>
           <td></td>
           <td></td>
         </tr>
         <tr>
           <td></td>
         </tr>
         <tr>
           <td><b>C.1</b></td>
           <td><b>Value</b></td>
           <td><b>Awarded</b></td>
         </tr>
         <tr>
           <td>a)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcC1();" id="Ca1">
                             <option value="0">0</option>
                             <option value="3">3</option>
                           </select></td>
         </tr>
         <tr>
           <td>b)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcC1();" id="Cb1">
                              <option value="0">0</option>
                              <option value="1">1</option>
                              </select></td>
         </tr>
         <tr>
           <td>c)</td>
           <td align="center">2</td>
           <td align="center"><select class="select" onChange="calcC1();" id="Cc1">
                              <option value="0">0</option>
                              <option value="2">2</option>
                              </select></td>
         </tr>
         <tr>
           <td class="subtotal">Section C. Total</td>
           <td align="center"><b>6</b></td>
           <td align="center"><b><div><span id="totalC"></span></div></b></td>
         </tr>
       </table>

       <script>
       function calcA1R() {
         var Aa1 = document.getElementById('Aa1');
         var Ab1 = document.getElementById('Ab1');
         var Ac1 = document.getElementById('Ac1');

         var Aa1Val = Aa1.options[Aa1.selectedIndex].value;
         var Ab1Val = Ab1.options[Ab1.selectedIndex].value;
         var Ac1Val = Ac1.options[Ac1.selectedIndex].value;

         // returning the sum of the values
         return [parseInt(Aa1Val), parseInt(Ab1Val), parseInt(Ac1Val)].reduce((a, c) => a + c, 0)
       }

       function calcA1() {
         displaySumA()
       }

       function displaySumA() {
         document.getElementById('totalA').textContent = calcSumA()
         document.getElementById('TotalASummary').textContent = calcSumA()
         document.getElementById('TotalAPercent').textContent = Math.ceil(calcSumA() / 4 * 100) +'%'
       }

       function calcSumA() {
         return calcA1R()
       }

       function calcB1R() {
         var Ba1 = document.getElementById('Ba1');
         var Bb1 = document.getElementById('Bb1');
         var Bc1 = document.getElementById('Bc1');

         var Ba1Val = Ba1.options[Ba1.selectedIndex].value;
         var Bb1Val = Bb1.options[Bb1.selectedIndex].value;
         var Bc1Val = Bc1.options[Bc1.selectedIndex].value;

         // returning the sum of the values
         return [parseInt(Ba1Val), parseInt(Bb1Val), parseInt(Bc1Val)].reduce((a, c) => a + c, 0)
       }

       function calcB1() {
         displaySumB()
       }

       function displaySumB() {
         document.getElementById('totalB').textContent = calcSumB()
         document.getElementById('TotalBSummary').textContent = calcSumB()
         document.getElementById('TotalBPercent').textContent = Math.ceil(calcSumB() / 5 * 100) +'%'
       }

       function calcSumB() {
         return calcB1R()
       }

       function calcC1R() {
         var Ba1 = document.getElementById('Ca1');
         var Bb1 = document.getElementById('Cb1');
         var Bc1 = document.getElementById('Cc1');

         var Ca1Val = Ca1.options[Ca1.selectedIndex].value;
         var Cb1Val = Cb1.options[Cb1.selectedIndex].value;
         var Cc1Val = Cc1.options[Cc1.selectedIndex].value;

         // returning the sum of the values
         return [parseInt(Ca1Val), parseInt(Cb1Val), parseInt(Cc1Val)].reduce((a, c) => a + c, 0)
       }

       function calcC1() {
         displaySumC()
       }

       function displaySumC() {
         document.getElementById('totalC').textContent = calcSumC()
         document.getElementById('TotalCSummary').textContent = calcSumC()
         document.getElementById('TotalCPercent').textContent = Math.ceil(calcSumC() / 6 * 100) +'%'
       }

       function calcSumC() {
         return calcC1R()
       }

       </script>

类别|
可能的要点|
奖励分数|
完成百分比|
排名
A.
4.
B
4.
C
4.
A节。
A.1
价值
授予
（a）
1.
0
1.
（b）
1.
0
1.
（c）
2.
0
2.
A节总计
4.
B节。
B.1
价值
授予
（a）
1.
0
2.
（b）
1.
0
1.
（c）
2.
0
2.
B节.总数
5.
C节。
C.1
价值
授予
（a）
1.
0
3.
（b）
1.
0
1.
（c）
2.
0
2.
C节总计
6.
函数1r（）{
var Aa1=document.getElementById（'Aa1'）；
var Ab1=document.getElementById（'Ab1'）；
var Ac1=document.getElementById（'Ac1'）；
var Aa1Val=Aa1.options[Aa1.selectedIndex].value；
var Ab1Val=Ab1.options[Ab1.selectedIndex].value；
var Ac1Val=Ac1.options[Ac1.selectedIndex].value；
//返回值的总和
返回[parseInt（Aa1Val），parseInt（Ab1Val），parseInt（Ac1Val）]。减少（（a，c）=>a+c，0）
}
函数1（）{
显示suma（）
}
函数displaySumA（）{
document.getElementById（'totalA'）。textContent=calcSumA（）
document.getElementById（'TotalASummary'）。textContent=calcSumA（）
document.getElementById（'TotalApertent'）。textContent=Math.ceil（calcSumA（）/4*100）+'%
}
函数calcSumA（）{
返回1R（）
}
函数calcB1R（）{
var Ba1=document.getElementById（'Ba1'）；
var Bb1=document.getElementById（'Bb1'）；
var Bc1=document.getElementById（'Bc1'）；
var Ba1Val=Ba1.options[Ba1.selectedIndex].value；
var Bb1Val=Bb1.options[Bb1.selectedIndex].value；
var Bc1Val=Bc1.options[Bc1.selectedIndex].value；
//返回值的总和
返回[parseInt（Ba1Val）、parseInt（Bb1Val）、parseInt（Bc1Val）]。reduce（（a，c）=>a+c，0）
}
函数calcB1（）{
displaySumB（）
}
函数displaySumB（）{
document.getElementById（'totalB'）。textContent=calcSumB（）
document.getElementById（'TotalBSummary'）。textContent=calcSumB（）
document.getElementById（'TotalBPercent'）。textContent=Math.ceil（calcSumB（）/5*100）+'%
}
函数calcSumB（）{
返回calcB1R（）
}
函数calcC1R（）{
var Ba1=document.getElementById（'Ca1'）；
变量Bb1
var list = {"A": 100, "B": 75, "C": 116, "D": 15};
keysSorted = Object.keys(list).sort(function(a,b){return list[a]-list[b]})
console.log(keysSorted);