davemib123 davemib123 -4 years ago 53
HTML Question

Javascript grade calculation

I am trying to create a grade calculator whereby; my students can calculate their grade based on grades achieved in set units. I have had an attempt, as you can see from my code below:

<script type="text/javascript">
var units = 3;
var ocr = 0;
var grade = "";
var feedback = "";

function runCert()
{
document.getElementById("o1").disabled=false;
document.getElementById("o2").disabled=false;
document.getElementById("o3").disabled=true;
document.getElementById("o1").style.backgroundColor="#CCFFCC";
document.getElementById("o2").style.backgroundColor="#CCFFCC";
document.getElementById("o3").style.backgroundColor="#FFCCCC";
units = 2;
}

function runScore()
{
ocr = 0;


function assistScore(con1)
{
if (document.getElementById("o1").disabled=false == "P") ocr = ocr + 21;
if (document.getElementById("o1").disabled=false == "M") ocr = ocr + 24;
if (document.getElementById("o1").disabled=false == "D") ocr = ocr + 27;

if (document.getElementById("o2").disabled=false == "P") ocr = ocr + 21;
if (document.getElementById("o2").disabled=false == "M") ocr = ocr + 24;
if (document.getElementById("o2").disabled=false == "D") ocr = ocr + 27;

if (document.getElementById("o3").disabled=false == "P") ocr = ocr + 14;
if (document.getElementById("o3").disabled=false == "M") ocr = ocr + 16;
if (document.getElementById("o3").disabled=false == "D") ocr = ocr + 18;
}



if (units == 2)
{
assistScore(document.getElementById("o1").value);
assistScore(document.getElementById("o2").value);


if (ocr >= 52)
{
ucas = 28;
grade = "D*";
feedback = "This is the highest grade available";
}
else if (ocr >= 50)
{
ucas = 24;
grade = "D";
feedback = "You are " + (50 - ocr) + " ocr points short of the next grade boundary";
}
else if (ocr >= 46)
{
ucas = 40;
grade = "M";
feedback = "You are " + (46 - ocr) + " ocr points short of the next grade boundary";
}
else
{
ucas = 8;
grade = "P";
feedback = "You are " + (42 - ocr) + " ocr points short of the next grade boundary";
}


}

alert("ocr Score: " + ocr + "\n\nocr Grade: " + grade + "\n\nUCAS Points: " + ucas + "\n\n" + feedback);


}
</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form >
<table width="933" height="251" border="1">
<tr>
<td colspan="3">OCR grade calculator </td>
<td width="199">&nbsp;</td>
</tr>
<tr>
<td width="201">unit #</td>
<td width="217">name </td>
<td width="288">mark </td>
<td>your course</td>
</tr>
<tr>
<td style="width: 98px;">1</td>
<td style="width: 221px;">Fundamentals of IT</td>
<td><select id="o1" style="background: #CCFFCC;">
<option value="Select">Select</option>
<option value="P">P</option>
<option value="M">M</option>
<option value="D">D</option>
</select></td>
<td><input type="radio" name="coursetype" value="ocr" id="A" onclick="runCert()" />
Certificate (2 units)</td>
</tr>
<tr>
<td style="width: 98px;">2</td>
<td style="width: 221px;">Global Information</td>
<td><select id="o2" style="background: #CCFFCC;">
<option value="Select">Select</option>
<option value="P">P</option>
<option value="M">M</option>
<option value="D">D</option>
</select></td>
<td><input type="button" value="Calculate Score" onclick="runScore()" /></td>
</tr>
<tr>
<td style="width: 98px;">3</td>
<td style="width: 221px;">Cyber Security</td>
<td><select id="o3" style="background: #CCFFCC;">
<option value="Select">Select</option>
<option value="P">P</option>
<option value="M">M</option>
<option value="D">D</option>
</select></td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</form>


The issue that I have is that the scores do not total, nor does the final grade. Could someone take a look at it for me?

Answer Source

Getting values from options seemed kind of broken, fixed it (and also shortened the code a little to make it more readable: pen

<script type="text/javascript">
var units = 3;
var ocr = 0;
var ucas = 0;
var grade = "";
var feedback = "";
  var o1 
  var o2 
  var o3 
  window.addEventListener("load", function(event) {
   o1 = document.getElementById("o1");
   o2 = document.getElementById("o2");
   o3 = document.getElementById("o3");
  })

function runCert()
{
o1.disabled=false;
o2.disabled=false;
o3.disabled=true;
o1.style.backgroundColor="#CCFFCC";
o2.style.backgroundColor="#CCFFCC";
o3.style.backgroundColor="#FFCCCC";
units = 2;
}

function runScore()
{
    ocr = 0;


    function assistScore(con1)
{
    if (o1.disabled==false && o1.value == "P") ocr = ocr + 21;
    if (o1.disabled==false && o1.value == "M")  ocr = ocr + 24;
    if (o1.disabled==false && o1.value == "D")  ocr = ocr + 27;

    if (o2.disabled==false && o2.value == "P") ocr = ocr + 21;
    if (o2.disabled==false && o2.value == "M") ocr = ocr + 24;
    if (o2.disabled==false && o2.value == "D") ocr = ocr + 27;

  if (o3.disabled==false && o3.value == "P") ocr = ocr + 14;
    if (o3.disabled==false && o3.value == "M") ocr = ocr + 16;
    if (o3.disabled==false && o3.value == "D") ocr = ocr + 18;   
}



if (units == 2)
    {
        assistScore(document.getElementById("o1").value);
        assistScore(document.getElementById("o2").value);


        if (ocr >= 52)
        {
            ucas = 28;
            grade = "D*";
            feedback = "This is the highest grade available";
        }
        else if (ocr >= 50)
        {
            ucas = 24;
            grade = "D";
            feedback = "You are " + (50 - ocr) + " ocr points short of the next grade boundary";
        }
        else if (ocr >= 46)
        {
            ucas = 40;
            grade = "M";
            feedback = "You are " + (46 - ocr) + " ocr points short of the next grade boundary";
        }
        else
        {
            ucas = 8;
            grade = "P";
            feedback = "You are " + (42 - ocr) + " ocr points short of the next grade boundary";
        }


    }

    alert("ocr Score: " + ocr + "\n\nocr Grade: " + grade + "\n\nUCAS Points: " + ucas + "\n\n" + feedback);


}
</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form >
  <table width="933" height="251" border="1">
    <tr>
      <td colspan="3">OCR grade calculator </td>
      <td width="199">&nbsp;</td>
    </tr>
    <tr>
      <td width="201">unit #</td>
      <td width="217">name </td>
      <td width="288">mark </td>
      <td>your course</td>
    </tr>
    <tr>
      <td style="width: 98px;">1</td>
      <td style="width: 221px;">Fundamentals of IT</td>
      <td><select id="o1" style="background: #CCFFCC;">
        <option value="Select">Select</option>
        <option value="P">P</option>
        <option value="M">M</option>
        <option value="D">D</option>
      </select></td>
      <td><input type="radio" name="coursetype" value="ocr" id="A" onclick="runCert()" />
Certificate (2 units)</td>
    </tr>
    <tr>
      <td style="width: 98px;">2</td>
      <td style="width: 221px;">Global Information</td>
      <td><select id="o2" style="background: #CCFFCC;">
        <option value="Select">Select</option>
        <option value="P">P</option>
        <option value="M">M</option>
        <option value="D">D</option>
      </select></td>
      <td><input type="button" value="Calculate Score" onclick="runScore()" /></td>
    </tr>
    <tr>
      <td style="width: 98px;">3</td>
      <td style="width: 221px;">Cyber Security</td>
      <td><select id="o3" style="background: #CCFFCC;">
        <option value="Select">Select</option>
        <option value="P">P</option>
        <option value="M">M</option>
        <option value="D">D</option>
      </select></td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</form>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download