Menu
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()
}<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>2</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="1">1</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>2</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="1">1</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>2</b></td>
<td align="center"><b><div><span id="totalC"></span></div></b></td>
</tr>
</table>
930
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;
});
}<table>
<tr>
<th>Category |</th>
<th>Points Possible |</th>
<th>Points Awarded |</th>
<th>Percent Achieved |</th>
<th>Ranking</th>
</tr>
<tr class="section_a">
<td align="center">A</td>
<td align="center">4</td>
<td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
<td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
<td bgcolor="#92d050" align="center" id="rank_section_a"></td>
</tr>
<tr>
<td align="center">B</td>
<td align="center">4</td>
<td align="center"><b><div><span id="summary_section_b"></span></div></td>
<td align="center"><b><div><span id="percent_section_b"></span></div></td>
<td bgcolor="#92d050" align="center" id="rank_section_b"></td>
</tr>
<tr>
<td align="center">C</td>
<td align="center">4</td>
<td align="center"><b><div><span id="summary_section_c"></span></div></td>
<td align="center"><b><div><span id="percent_section_c"></span></div></td>
<td bgcolor="#92d050" align="center" id="rank_section_c"></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 section_a" onChange="calcSection('section_a')">
<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 section_a" onChange="calcSection('section_a')">
<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 section_a" onChange="calcSection('section_a')">
<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>2</b></td>
<td align="center"><b><div><span id="total_section_a"></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 section_b" onChange="calcSection('section_b')">
<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 section_b" onChange="calcSection('section_b')">
<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 section_b" onChange="calcSection('section_b')">
<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>2</b></td>
<td align="center"><b><div><span id="total_section_b"></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 section_c" onChange="calcSection('section_c')">
<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 section_c" onChange="calcSection('section_c')">
<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 section_c" onChange="calcSection('section_c')">
<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>2</b></td>
<td align="center"><b><div><span id="total_section_c"></span></div></b></td>
</tr>
</table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
