82 lines
2.1 KiB
JavaScript
82 lines
2.1 KiB
JavaScript
"use strict"
|
|
function parseScores(scoresString) {
|
|
// TODO: Compete the function
|
|
return scoresString.split(" ");
|
|
}
|
|
|
|
function buildDistributionArray(scoresArray) {
|
|
// TODO: Compete the function
|
|
let arr = [0,0,0,0,0];
|
|
let score;
|
|
|
|
for (var i =0;i<scoresArray.length;i++){
|
|
score = Number(scoresArray[i]);
|
|
if (score >= 90)
|
|
arr[0] += 1;
|
|
else if (score >= 80)
|
|
arr[1] += 1;
|
|
else if (score >= 70)
|
|
arr[2] += 1;
|
|
else if (score >= 60)
|
|
arr[3] += 1;
|
|
else
|
|
arr[4] += 1;
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
function setTableContent(userInput) {
|
|
// TODO: Compete the function
|
|
let arr = buildDistributionArray(parseScores(userInput))
|
|
let table = document.getElementById("distributionTable")
|
|
if (userInput.length > 1){
|
|
let row0; // divs for bars
|
|
let row1; // letter grade labels
|
|
let row2; // number of each grade
|
|
|
|
let barA = arr[0]*10;
|
|
let barB = arr[1]*10;
|
|
let barC = arr[2]*10;
|
|
let barD = arr[3]*10;
|
|
let barF = arr[4]*10;
|
|
|
|
row0 = '<tr>\
|
|
<td><div style=' + '"height:' + barA + 'px" class="bar0"></div></td>\
|
|
<td><div style=' + '"height:' + barB + 'px" class="bar1"></div></td>\
|
|
<td><div style=' + '"height:' + barC + 'px" class="bar2"></div></td>\
|
|
<td><div style=' + '"height:' + barD + 'px" class="bar3"></div></td>\
|
|
<td><div style=' + '"height:' + barF + 'px" class="bar4"></div></td>\
|
|
</tr>';
|
|
row1 = '<tr>\
|
|
<td>A</td>\
|
|
<td>B</td>\
|
|
<td>C</td>\
|
|
<td>D</td>\
|
|
<td>F</td>\
|
|
</tr>';
|
|
|
|
row2 = '<tr>\
|
|
<td>' + arr[0] + '</td>\
|
|
<td>' + arr[1] + '</td>\
|
|
<td>' + arr[2] + '</td>\
|
|
<td>' + arr[3] + '</td>\
|
|
<td>' + arr[4] + '</td>\
|
|
</tr>';
|
|
/*table.innerHTML='<tr>\
|
|
<td><div style="height:30px" class="bar0"></div>A</td>\
|
|
<td><div style="height:20px" class="bar1"></div>B</td>\
|
|
<td><div style="height:10px" class="bar2"></div>C</td>\
|
|
<td><div style="height:0px" class="bar3"></div>D</td>\
|
|
<td><div style="height:20px" class="bar4"></div>F</td>\
|
|
</tr>'*/
|
|
|
|
table.innerHTML = row0 + row1 + row2;
|
|
}
|
|
else{
|
|
table.innerHTML = "<tr><td>No graph to display</td></tr>";
|
|
}
|
|
}
|
|
|
|
// The argument can be changed for testing purposes
|
|
setTableContent("45 78 98 83 86 99 90 59");
|