JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<h1>Merit rating is the sum of the 16 best in your grades.</h1>
<p>A: 20 points</p>
<p>B: 15 points</p>
<p>C: 10 points</p>
<p>Not rated: 0 points</p>

<p><strong>The highest score you can get is 320 which means that it has Distinction in all subjects.</strong></p>
<p>Do you have 17 or 18 scores, you remove one or two of the worst grade, your meritis made up of your 16 best scores.</p>

<div id="Grade">
    <p><strong>Swedish:</strong> <input type="radio" name="radClassSwedish" value="20"/>A
        <input type="radio" name="radClassSwedish" value="15"/>B
        <input type="radio" name="radClassSwedish" value="10"/>C
        <input type="radio" name="radClassSwedish" value="0"/>Not rated
    </p>
    <p><strong>English:</strong> <input type="radio" name="radClassEnglish" value="20"/>A
        <input type="radio" name="radClassEnglish" value="15"/>B
        <input type="radio" name="radClassEnglish" value="10"/>C
        <input type="radio" name="radClassEnglish" value="0"/>Not rated
    </p>
    <p><strong>Mathematics:</strong> <input type="radio" name="radClassMathematics" value="20"/>A
        <input type="radio" name="radClassMathematics" value="15"/>B
        <input type="radio" name="radClassMathematics" value="10"/>C
        <input type="radio" name="radClassMathematics" value="0"/>Not rated
    </p>
    <p><strong>Religion:</strong> <input type="radio" name="radClassReligion" value="20"/>A
        <input type="radio" name="radClassReligion" value="15"/>B
        <input type="radio" name="radClassReligion" value="10"/>C
        <input type="radio" name="radClassReligion" value="0"/>Not rated
    </p>
    <p><strong>Social Studies:</strong> <input type="radio" name="radClassSocialStudies" value="20"/>A
        <input type="radio" name="radClassSocialStudies" value="15"/>B
        <input type="radio" name="radClassSocialStudies" value="10"/>C
        <input type="radio" name="radClassSocialStudies" value="0"/>Not rated
    </p>
   ...

CSS

p {
    overflow: hidden;
}
strong {
    float: left;
    width: 120px;
}

JavaScript

$('#calcButton').click(function() {
    var sum = 0,
        arr = [];

    // put the values into an array
    $('input:radio:checked', '#Grade').each(function() {
        var value = parseInt(this.value, 10);
        if ( !isNaN(value) ) { arr.push(value); }
    });

    // sort the array numerically and ascending
    arr.sort(function(a, b) {
       return a - b;
    });

    // delete the first two array items (the lowest two scores)
    arr = arr.slice(2);

    // calculate the sum
    for (var i = 0; i < arr.length; i++) {
        sum += arr[i]; 
    }

    // print the sum on the page
    $('#answer').text(sum);    
});