Module 3- utilize JavaScript to compute statistics

Module 3 Assignment
 Purpose
Students will create an HTML page and utilize JavaScript to compute statistics on a set of values provided
by the user.
 Related Module Objecves
This assignment satisfies Module Objectives 1, 2, 3, 4, 5 and 6.
 Possible Points
This assignment is worth a maximum of 100 points. 
 Important Notes
Students may refer to the following pages in case they forget how to perform the following tasks:
Access the Course Web Server
Viewing your ePortfolio in a web browser
 Required Tools
Students will be required to use one or more of the following tools to earn a passing grade on the module
assignment. Each of the tools listed below can be downloaded for free or already exist in the indicated
12/8/2018 Module 3 Assignment
https://canvas.unf.edu/courses/36836/assignments/291346 2/5
Assignment Description
Students will create a statistical calculator web page using a combination of HTML, CSS and JavaScript.
This web page will provide a form in which users can enter a series of numbers (5 to 20 values between 0
and 100) separated by spaces and display the results of eight (8) statistical
calculations. Some examples are provided at the end of the assignment.
Preliminary Tasks
operating system.
Web browser (Chrome or Firefox recommended)
Basic text editor
Notepad++ (Windows)
TextEdit in plain­text mode (Mac OS)
pico or vi (Linux)
Secure Shell (SSH) client
PuTTy (Windows)
ssh (Mac OS and Linux)
File transfer tool (must support SFTP via SSH ­ DO NOT USE FTP)
WinSCP (Windows)
CyberDuck (Mac OS)
sftp (Linux)
 Warnings
Students must complete this assignment without the assistance of third­party development tools or
frameworks such as jQuery or Bootstrap. Assignments that appear to be the product of third­party
development tools or frameworks (professor's discretion) will receive 0 points.
 Direcons
 Review the requirements listed in the Assignment Requirements section
 Create a website that meets all of the stated requirements
 Complete the assignment before the due date (refer to the Course Schedule)
Note: Students will not submit anything to Canvas.
 Assignment Requirements
12/8/2018 Module 3 Assignment
https://canvas.unf.edu/courses/36836/assignments/291346 3/5
Log onto the Course Web Server
Create a folder called images in the module3 folder
Store all of the pictures used in your web page for this assignment in the images folder
Use relative URLs to access the pictures
For all the web pages created for this assignment
Hyperlinks to pages outside the web server (i.e., Wikipedia.org) should open the linked pages in
a new browser tab or window
All other hyperlinks should open the linked pages in the same browser tab or window
An automatic 10­point (10%) penalty will be assessed for a disorganized page.
Statistical Calculator Page (10 points)
Create a Statistical Calculator web page using the filename index.html in the module3 folder.
Give the page a descriptive title
Display Statistical Calculator along the top of the page using an <h2 tag
One (1) textarea field
Note: The textarea field should be configured as required.
This control will accept the user input
Eight (8) text fields
Note 1: All text fields should be configured as readonly.
Note 2: The order of the text fields is not important as long as they are organized. Variance
Max
Mean
Median
Min
Mode
Standard Deviation
Can be abbreviated as Std Dev
Sum
Variance
Two (2) buttons
Reset
Submit
Note: The reset and submit buttons should be placed near the textarea control.
At the bottom of the page, include one (1) additional hyperlink to your ePortfolio
Use a relative URL for the ePortfolio link
External CSS File (0 points)
Modify the site.css file located in the public_html/css/ folder to control the presentation of the Statistical
Calculator page.
Have fun using CSS to format the form's controls, as well as the rest of the page
12/8/2018 Module 3 Assignment
https://canvas.unf.edu/courses/36836/assignments/291346 4/5
External JavaScript File (90 points)
Create an external JavaScript file with the filename script.js in the module3 folder.
Import the script.js file into the HTML page
Add the following functions to the script.js file.
Note 1: Use a global variable for the array of values.
Note 2: ALL of the functions except calcMode() and performStatistics() MUST return a value to two (2)
decimal places.
Note 3: Students can use Excel to verify the output of their functions.
In Excel, use VAR.P and STDEV.P to calculate Variance and Standard Deviation
Note 4: Only the performStatistics() function should interact directly with the form controls.
None of the other functions should contain statements like document.getElementById("sum")
Note 5: DO NOT duplicate any code. If a function performs a required operation, call that function rather
than duplicate the code within another function.
For example, the calcMean() function calculates the sum of the array values before calculating the
mean value; therefore, call the calcSum() function rather than calculating the sum in the calcMean()
function.
An automatic 10­point (10%) penalty will be assessed for ANY duplicate code.
In this context, duplicate code refers to exact same statements or exact same functionality
Required functions
Note: Click on the hyperlinks for information on how to perform the statistical calculations.
calcMean() (http://www.mathsisfun.com/mean.html)
calcMedian() (http://www.mathsisfun.com/median.html)
calcMode() (http://www.mathsisfun.com/mode.html)
The function MUST handle bimodal and multimodal conditions correctly
Separate the bimodal or multimodal values using spaces
calcStdDev() (http://www.mathsisfun.com/data/standard­deviation.html)
calcSum() (http://www.mathsisfun.com/definitions/sum.html)
calcVariance() (http://www.mathsisfun.com/data/standard­deviation.html)
findMax() (http://www.mathsisfun.com/definitions/maximum.html)
findMin() (http://www.mathsisfun.com/definitions/minimum.html)
performStatistics()
Input
12/8/2018 Module 3 Assignment
https://canvas.unf.edu/courses/36836/assignments/291346 5/5
None
Process
Create an array of the values entered in the textarea control
Call each of the eight (8) functions (in some order)
Calling the functions in the correct logical order will help reduce duplicate code 
Store the value returned by each function in the value property of the respective control
Example: document.getElementById("sum").value=calcSum();
Output
Always return false
Otherwise, the web browser may display an error message
ePortfolio Page (0 points)
Update your ePortfolio web page (index.html) in the public_html folder.
Create a hyperlink using the existing text Module 3 to open your Statistical Calculator page
Use a relative URL for the  Statistical Calculator page link
Examples
Example #1
Entered Values: 5  3  10  0  3  2  10  3  7  8
Max  Mean   Median  Min  Mode   Std Dev  Sum  Variance 
 10.00  5.10 4.00  0.00  3 3.30 51.00 10.89
Example #2
Entered Values: 42  80  78  59  76  76  41  30  80  51 (contains two pairs of values)
Max  Mean   Median  Min Mode *  Std Dev  Sum  Variance 
 80.00  61.30 67.50  30.00   76  80  18.13  613.00  328.61
* Bimodal and multimodal values can be displayed in any order.