University of Phoenix Week 5 Grade distribution Java Project
6.12 LAB: Grade distributionIn 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".