Question

6.12 LAB: Grade distribution

In this lab, you will write a JavaScript program that generates a bar graph of letter grades from a distributions of scores.

Implement the parseScores function (1 point)

Implement the parseScores function to take a space-separated string of scores as an argument and return an array of score strings. Each score is a number in the range [0, 100]. Ex: "45 78 98 83 86 99 90 59" → ["45","78","98","83","86","99","59"]

Hint: JavaScript's string split() function can create the array with one line of code.

Implement the buildDistributionArray function (2 points)

Implement the buildDistributionArray function to take an array of scores, built by parseScores, as an argument. A grade distribution array of length 5 is returned.

Loop through the scores array and tally up the number of A, B, C, D, and F scores using the standard scoring system (90 and above = A, 80‐89 = B, 70‐79 = C, etc.). Store these totals in a distribution array where the number of As is the first number, number of Bs is the second number, etc. Ex: ["45","78","98","83","86","99","59"] → [2, 2, 1, 0, 2]

buildDistributionArray returns [0, 0, 0, 0, 0] when the scoresArray argument is empty.

Implement the setTableContent function (7 points)

Implement the setTableContent function to take a space-separated string of scores as an argument, and produce a grade distribution graph by setting the innerHTML of the table on the page. The table has id="distributionTable".

Use a <div> for each bar. Each bar gains 10 pixels in height per grade occurrence. Use the styles from the embedded style sheet so that each bar is a different color. The CSS vertical-align property is set for <td> elements, so that the bars are aligned at the bottom of the containing cells. Below is a sample of what might be generated for the table's first row.

<tr>
   <td><div style="height:60px" class="bar0"></div></td>
   <td><div style="height:40px" class="bar1"></div></td>
   <td><div style="height:20px" class="bar2"></div></td>
   <td><div style="height:0px"  class="bar3"></div></td>
   <td><div style="height:40px" class="bar4"></div></td>
</tr>

If the input contains at least one score, then create 3 rows in the table. The first row contains divs for the bars. The second row contains letter grade labels. The third row contains the number of occurrences of each grade. Below is a sample of what the table might look like.

If the input does not contain any scores, then create only 1 cell in the table, with text content "No graph to display".

-------------------------------------------------------------------------------------------------------------------------------------------------

function parseScores(scoresString) {
   var inString = scoresString.split(" ");
return inString;
}

function buildDistributionArray(scoresArray) {
var result = [0, 0, 0, 0, 0];

   for(var i=0; i<scoresArray.length; i++) {
var s = parseInt(scoresArray[i]);
if(s >= 90) {
result[0] += 1;
} else if(s >= 80) {
result[1] += 1;
} else if(s >= 70) {
result[2] += 1;
} else if(s >= 60) {
result[3] += 1;
} else {
result[4] += 1;
}
}

return result;
}

function setTableContent(userInput) {
  
function bodyLoaded() {
// The argument passed to writeTableContent can be changed for
// testing purposes
//setTableContent("");
setTableContent("45 78 98 83 86 99 90 59");
//setTableContent("45 40 8 8 6 9 0 9");
}

function parseScores() is correct I received full credit

function buildDistributionArray() is correct I received full credit

I need help mainly with the table

Answer 1

function setTableContent(userInput) {
        var scores = parseScores(userInput);

scores = scores.filter(function (el) { return el != ""; });

        var distArr = buildDistributionArray(scores);

        var table = document.getElementById('distributionTable');

        if(scores.length == 0) {
                table.innerHTML += 'No graph to display';
        } else {
                var fRow = '<tr>'
                for(var i=0; i<5; i++) {                        
                        fRow += '<td><div style="height:' + (10 * distArr[i]) + 'px" class="bar' + i + '"></div></td>';
                }
                fRow += '</tr>';
                table.innerHTML += fRow;
                
                table.innerHTML += '<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>F</td></tr>';

                var lRow = '<tr>'
                for(var i=0; i<5; i++) {                        
                        lRow += '<td>' + distArr[i] + '</td>';
                }
                lRow += '</tr>';
                table.innerHTML += lRow;
        }
}

**************************************************

Thanks for your question. We try our best to help you with detailed answers, But in any case, if you need any modification or have a query/issue with respect to above answer, Please ask that in the comment section. We will surely try to address your query ASAP and resolve the issue.

Please consider providing a thumbs up to this question if it helps you. by Doing that, You will help other students, who are facing similar issue.