41 lines
2.9 KiB
Plaintext
41 lines
2.9 KiB
Plaintext
|
In this lab, you will write three JavaScript functions to generate a bar graph of letter grades from a distributions of scores.
|
|||
|
|
Implement parseScores() (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", "90", "59"]
|
|||
|
|
|
|||
|
|
Hint: The string method split() can create the array with one line of code.
|
|||
|
|
Implement buildDistributionArray() (2 points)
|
|||
|
|
|
|||
|
|
Implement the buildDistributionArray() function to take an array of scores, built by parseScores(), as an argument. The function should return a grade distribution array of length 5.
|
|||
|
|
|
|||
|
|
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, 60-69 = D, 59 and below = F). 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", "90", "59"] → [3, 2, 1, 0, 2]
|
|||
|
|
|
|||
|
|
buildDistributionArray() returns [0, 0, 0, 0, 0] when the scoresArray argument is empty.
|
|||
|
|
Implement setTableContent() (7 points)
|
|||
|
|
|
|||
|
|
Implement the setTableContent() function to take a space-separated string of scores as an argument. setTableContent() should call parseScores() and buildDistributionArray() and produce a grade distribution graph by setting the table's inner HTML. The table has id="distributionTable".
|
|||
|
|
|
|||
|
|
Use a <div> for each bar. Each bar gains 10 pixels in height per grade occurrence. Apply the classes 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:30px" class="bar0"></div></td>
|
|||
|
|
<td><div style="height:20px" class="bar1"></div></td>
|
|||
|
|
<td><div style="height:10px" class="bar2"></div></td>
|
|||
|
|
<td><div style="height:0px" class="bar3"></div></td>
|
|||
|
|
<td><div style="height:20px" class="bar4"></div></td>
|
|||
|
|
</tr>
|
|||
|
|
|
|||
|
|
If the scores string contains at least one score, then create 3 rows in the table:
|
|||
|
|
|
|||
|
|
First row: Contains divs for the bars.
|
|||
|
|
Second row: Contains letter grade labels.
|
|||
|
|
Third row: Contains the number of occurrences of each grade.
|
|||
|
|
|
|||
|
|
Below is a sample of what the table might look like.
|
|||
|
|
|
|||
|
|
If the scores string does not contain any scores, then create only 1 cell in the table with text content "No graph to display".
|
|||
|
|
Testing your solution
|
|||
|
|
|
|||
|
|
The given index.js file calls setTableContent() with several different scores. Replace the scores string with other scores to verify the web page produces a table with the correct bar graph. Replace the scores string with an empty string ("") to verify the table displays "No graph to display".
|
|||
|
|
|