Video

My video demonstration can be found below or at this link

Write-up (Reaction Time)

3a.

3.a.i.

This program is a cure to boredom and its purpose is to provide a fun and competitive experience while testing the user’s reaction time.

3.a.ii.

This program allows a user to test their reaction time by awarding points every time they click a circular target. After each click, the target is resized and relocated at a random position in the game container. The user has 15 seconds to accumulate the highest score they can. This ties in with a larger project in which there is a currency system. The user must pay 15 tokens in order to play and is rewarded in tokens, which are dependant on the user’s score. The video demonstration shows the game being played two times. It shows off the live updates of tokens and the overall functionality of game, including net gain/loss of tokens.

3.a.iii.

The inputs of the program are the mouse clicks made by the user in order to hit the targets that appear on screen. The program detects these inputs and returns an output by resizing and re-positioning the target at a random location in the game container until fifteen seconds have passed.

3b.

3.b.i.

code block 1

3.b.ii.

code block 2

3.b.iii.

The name of the variable representing the collection type “local storage” is tokenAmt. This can be found on line 28 of the first code segment. It is being used at line 39 of the second code segment.

3.b.iv.

The data that is being stored in local storage as tokenAmt represents the number of tokens that the user currently has. This is vital to the functionality of the program as it is able to do mathematical calculations with this data in order to update the user’s token amount after the user has paid to play the game and earned more tokens as a result of a good score in the game.

3.b.v.

The use of local storage in this part of the program is efficient and simple because it is able to be updated and/or recalled very easily. An alternative method of achieving this functionality would be to fetch the number of tokens the user has each time the game calls for an update in token amount, which would take significantly more computing power and cannot be updated nearly as conveniently.

3.c.

3.c.i.

code block 3

3.c.ii.

code block 4

3.c.iii.

The procedure here is generateRandomIntegerInRange(). As the name implies, this function is able to return a random integer between two numerical values that are passed into it as parameters. It is called in the procedure gameplay() as it is needed for the important role of randomly repositioning and resizing the target, which is achieved by setting its width, height, top position, and left position according to the randomly generated values.

3.c.iv.

The algorithm declares the constant id, which is assigned to the ‘uid’ of the user that is logged in (that information is stored locally and is retrieved locally). Then, it uses Javascript Fetch API to fetch the database from the API endpoint. It filters out response errors through the use of an if-statement that identifies the response status and, if it’s equal to 200, it returns the error message, which is an example of selection. If the response status is not 200, then it iterates through the database. It tries to find a ‘uid’ that matches the value of the variable ‘id’, or the ‘uid’ of the player that is logged in. Once it finds a match, it stores that user’s token amount (which is also found in the database) locally as tokenAmt for later use. The order of these steps is intricate and vital to the functionality of the algorithm because response errors must be sorted out before trying to find things in the database.

3.d

3.d.i.

Call One

The first call is in the function to randomize the target’s size, which is called whenever the target is clicked. This call takes a minimum numerical value and a maximum numerical value as parameters and generates a random integer between the two parameters. The function generateRandomIntegerInRange() is called for this purpose at line 160 in the code segment 3.c.i.

Call Two

The second call is in the function to randomize the target’s position in the game container, which is called whenever the target is clicked. This call takes a minimum numerical value and a maximum numerical value as parameters and generates a random integer between the two parameters. The function generateRandomIntegerInRange() is called for this purpose at lines 161 and 162 in the code segment 3.c.i.

3.d.ii.

Condition(s) tested by Call One

This call is used to generate a random number between 40 and 130, which are used to set the size of the target by updating its ‘width’ property and ‘border-radius’ property.

Condition(s) tested by Call Two

This call is used to generate a random number between 520 and 750 for the target’s y-position and 50 and 780 for the target’s x-position. These minimum and maximum values are chosen through trial and error in trying to figure out where the game container borders lie in relation to the target’s size.

3.d.iii.

Results of Call One

The target is resized appropriately to give the game more variety.

Results of Call Two

The target is re-positioned appropriately to make the game function properly.

My Grade from Vivian Ni

Grading Rubric 1

My Grade from Samit Poojary

Grading Rubric 2