1. Engineering
  2. Computer Science
  3. background this assignment goals are 1 understand the basics of...

Question: background this assignment goals are 1 understand the basics of...

Question details


This assignment goals are: 1) Understand the basics of lists manipulation using arrays and traversal mechanics. 2) Understand implementation of basic statistical data using said lists. 3) Populate, process and create data within the document using loops and arrays.


Please read carefully all of the following subsections. Completing the skeleton file For this assignment, you will complete the missing code parts of the provided skeleton_a8.html​ file. Along the document, you will find all the required sections marked in between comments sections, for example: or /* Complete code under this comment */



When the page is loading, the only function which will run it init()​. This will call 3 other functions: 1) generateGrades() 2) populateStudentsTable() 3) computeStats() Your job is to implement the body of this functions based on the given information: studentNames ​and an empty grades ​arrays. There is also a totalPoints global vairiable which you do not need to change, it is to calculate the C+ grade. Note that EVERY TIME the page is reloaded, all the data will be recalculated.


1) generateGrades() will, for each student of the ‘studentNames’ array, populate the already declared global array ‘grades​’, with random grades from 1-100, each value rounded to two decimal places.​ HINT​: a random number can be easily created with the built-in function Math.random() - this returns a pseudo-random real number from [0,1] - a good way to create a random number within a range is to multiply the result of random() by the desired upper bound and then add the lower bound. e.g. - try ((Math.random() * 5) + 1).toFixed(2); and see which numbers you get. LAST BUT NOT LEAST - Make sure you insert NUMBERS into the array. Might save you a headache or two.

2) Once all the grades are in the array, populateStudentsTable() will generate the elements in the page. Each index in ‘grades’, corresponds to the student with the same index of the ‘studentNames’ array; for example, grades[0] is the grade for student studentNames[0]. By the time the document is fully loaded, the table ‘students’ must be completely populated with all the students from the aforementioned array and its newly generated grades. Every even-number cell​, must be of the ‘studentNameEven’ class e.g. <... class=”...” … > ​- this will need to be generated with code, can’t be done manually. HINT: ​For creating the HTML, you will need the following functions: var el = document.createElement - return a new HTML element and stores it in el el.setAttribute(‘attribute-name’,’attribute-value’’); - adds attribute to the HTML el el.appendChild(el2); - adds the HTML element to the el hierarchy e.g. - table > tr // tr is a child of table The following code will create a div element and add a p to it. Add text to the p and then append the p into the div var d = document.createElement(‘div’); var paragraph = document.createElement(‘p’); paragraph.innerHTML = ‘Hello, world!’; d.appendChild(paragraph); You will need to do a similar process within a loop in order to create all the row and cells required for the table.

3) Finally, you will compute basic course statistics in the computeStats() function. Mean - sum of all grades divided by the number of grades. Median - if odd, the element which has the same number of items on the left and the right of the array. Otherwise, the average of the two middle elements. e.g - [1 2 3 4 5] → median is 5 / [ 1 2 3 4 ] → median is 2.5 Standard Deviation - Here is the reference with process explained (Square root of the variance) C+ Curve Grade And populate the specific sections of the “stats” box: meanBox medianBox sdBox cPlusBox - percentage of points as per the mean These are all the inputs below the table. Just setting the values will suffice. HINT​: You will need the following functions: sort(array) sort an array of values in ascending order (this was implemented for you) var array = [7,3,4,5]; sort(array); // now array is [3,4,5,7] .floor() var a = 3.7; a.floor() → 3 .toFixed() var a = 3.87765; a.toFixed(3) → 3.877 Math.sqrt(val) Math.sqrt(9) → 3 Math.round(val)

Considerations and References:

1. DO NOT CHANGE ANY UNREQUESTED PIECE OF CODE (just the indicated functions) 2. All javascript chapters in Fluency 6 textbook - including arrays and loops. 3. To convert a text value into a number type, look at: http://www.w3schools.com/jsref/jsref_number.asp 4. You can use some built-in Math functions such as: http://www.w3schools.com/jsref/jsref_min.asp 5. You can check if a value is a number with: http://www.w3schools.com/jsref/jsref_isnan.asp


<!DOCTYPE html>


Student Name:




var studentNames = [
'Aanisah', 'Apple', 'Astrella Celeste','Liberty',
'Marquise','Ocean','Rocket','Rufus', 'Saffron Sahara',
'Sage Moonblood', 'Tallulah', 'Willow Camille Reign',
'Xia','Xolani','Yasmeen','Yakub', 'Zariel','Zanta'];
var grades = new Array();
var totalPoints = 500;

function generateGrades() {
// for each student
// generate a grade and put it into grades array

function populateStudentsTable() {
// for each student name
// create the needed HTML elements and put something in them

function computeStats() {
/* Calculate the mean */

/* Extract median */

/* Compute Standard Deviation */

/* Calculate C+ grade */



<table id="students">
<caption>Total Points: 500 </caption>
<th>Student Name</th>
<th>Course Grade</th>

<div id="stats">
<table id="statsTable">
<th>Standard Deviation</th>
<th>C+ Grade</th>
<td><input id="meanBox" type="text" readonly /></td>
<td><input id="medianBox" type="text" readonly /></td>
<td><input id="sdBox" type="text" readonly /></td>
<td><input id="cPlusBox" type="text" readonly /></td>




function init() {

function sort(array) {
array.sort(function(a,b){return a-b})



body {
text-align: center;
#students {
border: 1px solid #DDD;
border-radius: 10px;
margin: 2em auto;

#studentName {
text-align: left;

.studentNameEven {
background: #d9d1e8;

#statsTable {
margin: auto;
border: 1px solid #DDD;
border-radius: 10px;
padding: 20px;

#statsTable input {
text-align: center;
border: none;
background: #EEE;


<script type="text/javascript">
(function() {
var _analytics_scr = document.createElement('script');
_analytics_scr.type = 'text/javascript'; _analytics_scr.async = true; _analytics_scr.src = '/_Incapsula_Resource?SWJIYLWA=2977d8d74f63d7f8fedbea018b7a1d05&ns=2';
var _analytics_elem = document.getElementsByTagName('script')[0]; _analytics_elem.parentNode.insertBefore(_analytics_scr, _analytics_elem);
// ]]>


Solution by an expert tutor
Blurred Solution
This question has been solved
Subscribe to see this solution