Please complete on MS Word in individual files/parts as indicated. Please change file name to "index.html" for part 1,2, and 3. Please change file name to "calculator.html" for part 4. PART 1:  ...

Please complete on MS Word in individual files/parts as indicated. Please change file name to "index.html" for part 1,2, and 3. Please change file name to "calculator.html" for part 4.

PART 1:

5.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 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 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.

     class="bar3">

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".

LABACTIVITY

5.12.1: LAB: Grade distribution

0 / 10

Submission Instructions

Downloadable files

index.html

and

index.js

PART 2:

5.13 LAB: Temperature conversion

In this lab you will implement a temperature converter. Five UI elements are declared for you in the template:

Element description	Element's ID
Text input field for Celsius temperature	CInput
Text input field for Fahrenheit temperature	FInput
Button that, when clicked, converts from one temperature to the other	ConvertButton
Div for displaying an error message when temperature cannot be converted	ErrDiv
Image corresponding to the temperature	WeatherImage

Implement the conversion functions (2 points)

Implement the ConvertCtoF and ConvertFtoC functions to convert between Celsius and Fahrenheit. ConvertCtoF takes a single numerical argument for a temperature in Celsius and returns the temperature in Fahrenheit using the following conversion formula:

°F = °C * 9/5 + 32

Similarly, ConvertFtoC takes a single numerical argument for a temperature in Fahrenheit and returns the temperature in Celsius using the following conversion formula:

°C = (°F - 32) * 5/9

Register conversion button's click event in bodyLoaded() (2 points)

When the page loads, the bodyLoaded function is called. Implement bodyLoaded to register a click event handler for the Convert button (id="ConvertButton"). Use addEventListener(), not onclick.

When the Convert button is pressed, the text box that contains a number should be converted into the opposing temperature. So if a number is in the Celsius text box (id="CInput"), the temperature should be converted into Fahrenheit and displayed in the Fahrenheit text box (id="FInput") and vice versa. Use parseFloat() to convert from a string to a number and do not round the result.

Ensure that only one text field contains a value (2 points)

Ensure that only one text field contains a value at any moment in time unless the Convert button has been pressed. For example, when the Celsius field has a number and the user enters a Fahrenheit entry, the Celsius field should be cleared as soon as the user begins to type. This will require implementing an input event handler for each of the text fields that clears the opposing text field when a change occurs. Register each input event handler in the bodyLoaded function. Use addEventListener(), not oninput.

Change the image to reflect the temperature (2 points)

When the temperature is converted, change the image to reflect the temperature in Fahrenheit. Each image is in the same directory as your .html page.

Below 32 F	32 - 50 F	Above 50 F
cold.gif	cool.gif	warm.gif

Handle bad input (2 points)

When parseFloat() returns a NaN for the temperature to be converted, set ErrDiv's textContent to the message: "X is not a number", where X is the string from the text input. When parseFloat() returns a valid number, set ErrDiv's textContent to an empty string. The image below shows a sample error message.

LABACTIVITY

5.13.1: LAB: Temperature conversion

0 / 10

Submission Instructions

Downloadable files

index.html

,

index.js

,

cool.gif

,

cold.gif

, and

warm.gif

PART 3:

5.14 LAB: JavaScript Tic-Tac-Toe Investigate the page elements

The template .html page contains all needed page elements for a game of Tic-Tac-Toe:

• A 3x3 table is used to provide 9 cells for the game board.


• A div, initially containing text "TURN INFO", provides information about whether the current turn belongs to the player or computer. The div's ID is "turnInfo".


• A "New game" button allows the player to clear the board and start a new game. The button's ID is "newGameButton".

Investigate the existing script elements

The template .js script has three declarations:

• 
  playerTurn: Boolean variable that is true when the turn belongs to the player and false when the turn belongs to the computer.


• 
  computerMoveTimeout: ID of an active timeout for the computer's move, or 0 if no such timeout exists.


• 
  getGameBoard(): Function that returns an array of 9 elements, representing all cells in the game board. The first 3 elements are the top row, the next 3 the middle row, and the last 3 are the bottom row. The getGameBoard() function is implemented for you and requires no alteration.


• 
  start(): Function that is called when the page loads, in order to start the game. Events for the "New game" button click and game board cell clicks are registered. Then newGame() is called to start the game. The start() function is implemented for you and requires no alteration.

Implement the newGame() function (1 point)

Implement the newGame() function to do the following:

1. Use clearTimeout to clear the computer's move timeout and then set computerMoveTimeout back to 0


2. Loop through all game board cells and set the inner HTML of each to a non-breaking space:


3. Reset to the player's turn by setting playerTurn to true


4. Set the text of the turn information div to "Your turn"

Implement the cellClicked() function (2 points)

Implement the cellClicked() function to do the following:

• If playerTurn is true and the clicked cell is empty:




1. Set the cell's innerHTML to "X"


2. Set the cell's style color to "red"


3. Call switchTurn()

Implement switchTurn() part 1: turn-switching logic (2 points)

Implement the switchTurn() function to do the following:

1. If switching from the player's turn to the computer's turn, use setTimeout to call makeComputerMove after 1 second (1000 milliseconds). Assign the return value of setTimeout to computerMoveTimeout.
   
   The timeout simulates the computer "thinking", and prevents the nearly-instant response to each player move that would occur from a direct call to makeComputerMove().


2. Toggle playerTurn's value from false to true or from true to false.


3. Set the turn information div's text content to "Your turn" if playerTurn is true, or "Computer's turn" if playerTurn is false.

Implement makeComputerMove() (2 points)

Implement makeComputerMove() so that the computer puts an "O" in a random, available cell. Set the cell's style color to "blue". Call switchTurn() at the end of the function to switch back to the player's turn.

Implement switchTurn() part 2: checking for a winner (3 points)

Add logic to the switchTurn() function that checks for a winner before the turn switch.

• If the board contains 3 X's in a row, display the text "You win!" in the turn info div.


• If the board contains 3 O's in a row, display the text "Computer wins!" in the turn info div.


• If the board is full without either the player or computer having won, display the text "Draw game" in the turn info div.

In the case of a winner or a draw game, set playerTurn to false and return without switching turns. This prevents the user from being able to place an X after the game is over.

LABACTIVITY

5.14.1: LAB: JavaScript Tic-Tac-Toe

0 / 10

Submission Instructions

Downloadable files

index.html

and

index.js

PART 4:

5.15 LAB: Medical device vulnerability scoring

In this lab, you will complete the implementation of a Medical Device Vulnerability Scoring web page. The purpose of this web page is to return a score that numerically quantifies how vulnerable a specific vulnerability is to the particular attack. The properties of the system will be selected from a group of predetermined options, where each option is a styled radio button. Once options are selected for all possible properties, the web page will display the vulnerability score (and hide the warning label).

1. Implement a function called updateScore. This function must verify that one button from each property is selected.


2. Using JavaScript, add a click or change event listener to each radio button (Do not add the event listener to the button label). Notice that the radio buttons are hidden using CSS.


3. Once one button from each property is selected, the webpage should:




• Hide the warning label by setting the display style of the  with ID warning to none. Note: both none and hidden have similar visual effects, however none doesn't occupy any space, while hidden does occupy space, affecting the layout).


• Compute the vulnerability score.


• The score should be updated and displayed inside the  with ID score.




4. The score must have a minimum of 0 and a maximum of 10.


5. The final score must berounded up to the tenths decimal place, and displayed with one decimal place. Ex: If the final score is 7.311456, the score should be displayed as 7.4.


6. Once the score is being displayed, updating a property will automatically update the vulnerability score.


7. The score is computed as:




• ScoreFinal=(Scopestatus)∗((3.326258289∗ScoreBase)+(1.1∗ScoreExploitability)), where the ScopeStatus,ScoreBase, and ScoreExploitability are calculated as:




• 
  IfScoreBase is 0, thenScoreFinal should be 0.
  




• ScopeStatus(Selection)=

Scope Status	Value
Unchanged	1.0
Changed	1.08

• ScoreBase=BaseConfidentiality+BaseIntegrity+BaseAvailability, where:
  


• BaseConfidentiality(LevelSensitivity,LevelConfidentiality)=




• 
  Sensitivity corresponds to rows, and Confidentiality corresponds to columns.
  

Sensitivity / Confidentiality	None	Low	High
None	0.00	0.22	0.56
Low	0.00	0.65	0.75
High	0.00	0.85	0.95

• BaseIntegrity(LevelHealthImpact,LevelIntegrity)=




• 
  Health Impact corresponds to rows, and Integrity corresponds to columns.
  

Health Impact / Integrity	None	Low	High
None	0.00	0.22	0.56
Low	0.55	0.60	0.75
High	0.85	0.90	0.95

• BaseAvailability(LevelHealthImpact,LevelAvailability)=




• 
  Health Impact corresponds to rows, and Availability corresponds to columns.
  

Health Impact / Availability	None	Low	High
None	0.00	0.22	0.56
Low	0.55	0.60	0.65
High	0.85	0.90	0.95

• ScoreExploitability=AttackVector∗AttackComplexity∗PrivilegedRequired∗UserInteraction, where:
  


• AttackVector(Selection)=

Attack Vector	Value
Network	0.85
Adjacent Network	0.62
Local	0.55
Physical	0.20

• AttackComplexity(Selection)=

Attack Complexity	Value
Low	0.77
High	0.44

• PrivilegeRequired(Selection)=

Privilege Required	Value
None	0.85
Low	0.62
High	0.27

• UserInteraction(Selection)=

User Interaction	Value
None	0.85
Required	0.62

LABACTIVITY

5.15.1: LAB: Medical device vulnerability scoring

0 / 10

Submission Instructions

Downloadable files

calculator.html

,

calculator.css

,

calculator.js

, and

jquery-3.2.1.m