How to rank results in an HTML form using Javascript?

Question

I have a simple form in HTML. There are 3 sections (Section A, B and C). As the user fills out the form each section is calculated by displaying total points and percentage. I would like to rank the scores and display it in the ranking column but cannot seem to figure how to do it. For example if Section A has 4 points and Section B has 3 points and Section C has 0 points then section A would have the rank of 1, section B would have the rank of 2 and section C would have the rank of 3. Also having the ranking change as the form is being filled out would be ideal.

I am new to JavaScript and am having trouble on how to logically implement this. This is just a sample of my form. I really have a much larger form with more sections and questions. Please run my code so you can see a better visual. Any code snippets and advice that would help me will be appreciated.

I've tried using if statements in JavaScript but like I said I can't wrap my mind around how to logically do it.

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() / 4 * 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() / 4 * 100) +'%'
}

function calcSumC() {
  return calcC1R()
}


   
     Category |
     Points Possible |
     Points Awarded |
     Percent Achieved |
     Ranking
   
   
     A
     4
     
     
     
   
   
     B
     4
     
     
     
   
   
     C
     4
     
     
     
   


  
    Section A.
    
    
  
  
    
  
  
    A.1
    Value
    Awarded
  
  
    a)
    1
    
  
  
    b)
    1
    
  
  
    c)
    2
    
  
  
    Section A. Total
    2
    
  

  
    Section B.
    
    
  
  
    
  
  
    B.1
    Value
    Awarded
  
  
    a)
    1
    
  
  
    b)
    1
    
  
  
    c)
    2
    
  

  
    Section B. Total
    2
    
  
  
    Section C.
    
    
  
  
    
  
  
    C.1
    Value
    Awarded
  
  
    a)
    1
    
  
  
    b)
    1
    
  
  
    c)
    2
    
  
  
    Section C. Total
    2

user_11820817 · Answer

Here we go took a second to clean up some of your code. I added the Ranking function that's probably not the best way to do it but it works. Also I removed the duplicate code and set it into one function that handles all the scoring for each section.

var sections = {
  section_a: 0,
  section_b: 0,
  section_c: 0
}

function calcSection(section) {
  let sum = 0;
  document.querySelectorAll('select.'+section)
  .forEach((input)=>{
    sum += parseInt(input.options[input.selectedIndex].value);
  });
  sections[section] = sum;
  document.getElementById('total_'+section).textContent = sum;
  document.getElementById('summary_'+section).textContent = sum
  document.getElementById('percent_'+section).textContent = Math.ceil(sum / 4 * 100) +'%';
  calcRanks();
}

function calcRanks() {
  let sectionsArr = [];
  let keys = Object.keys(sections);
  keys.forEach((key, i)=>{
    sectionsArr.push({ section: key, value: sections[key], rank: 0 });
    if(i + 1 === keys.length) {
      sectionsArr.sort((a,b)=>{return a.value > b.value ? -1 : a.value < b.value ? 1 : 0});
      let lastIndex = 0;
      for(let i = 1; i < sectionsArr.length; i++){
        let section = sectionsArr[i];
        let lastSection = sectionsArr[lastIndex];
        //console.log(lastSection.value, section.value);
        if(lastSection.value > section.value) {
          sectionsArr[i].rank = lastSection.rank + 1;
        }
        if(lastSection.value === section.value) {
          sectionsArr[i].rank = lastSection.rank;
        }
        lastIndex = i;
      }
      displayRanks(sectionsArr);
    }
  });
}

function displayRanks(sections) {
  sections.forEach((section)=>{
    document.getElementById('rank_'+section.section).textContent = section.rank +1;
  });
}


   
     Category |
     Points Possible |
     Points Awarded |
     Percent Achieved |
     Ranking
   
   
     A
     4
     
     
     
   
   
     B
     4
     
     
     
   
   
     C
     4
     
     
     
   





  
    Section A.
    
    
  
  
    
  
  
    A.1
    Value
    Awarded
  
  
    a)
    1
    
  
  
    b)
    1
    
  
  
    c)
    2
    
  
  
    Section A. Total
    2
    
  

  
    Section B.
    
    
  
  
    
  
  
    B.1
    Value
    Awarded
  
  
    a)
    1
    
  
  
    b)
    1
    
  
  
    c)
    2
    
  

  
    Section B. Total
    2
    
  
  
    Section C.
    
    
  
  
    
  
  
    C.1
    Value
    Awarded
  
  
    a)
    1
    
  
  
    b)
    1
    
  
  
    c)
    2
    
  
  
    Section C. Total
    2

How to rank results in an HTML form using Javascript?

1 Answers