Tri 3 CPT Write-Up

3a. Program Purpose and Function

i. Describes the overall purpose of the program.

The purpose of the program is to create a way for users to test their luck with the Roulette casino game.

ii. Describes what functionality of the program is demonstrated in the video.

The video shows a user playing through the game while. The user enters a desired username and clicks the “create” button, creating a new user with 50 coins to start. User then places bets by clicking on squares that have are not occupied by bet elements. User then click the “spin” button randomly selecting a square, user loses since a bet element was not placed on winning square. User then reloads page and re-enters username. This time clicking the load button updating the users coins that have been stored. User then places more bets on square changing the coin amount.

iii. Describes the input and output of the program demonstrated in the video.

The inputs in the video are the user typing in the username, creating the user, placing coins on board, spinning board, and loading user. The outputs demonstrated in the video are the winning/losing square, and change in coins for the user.

3b. Data Abstraction

i. The first program code segment must show how data have been stored in the list.

ii. The second program code segment must show the data in the same list being used, such as creating new data from the existing data or accessing multiple elements in the list, as part of fulfilling the program’s purpose

iii. Identifies the name of the list being used in this response.

The name of the list being used is “game.eles”

iv. Describes what the data contained in the list represent in your program.

The data in “game.eles” is the the square elements on the game board, the numbers that users can bet on in the game.

v. Explains how the selected list manages complexity in your program code by explaining why your program code could not be written, or how it would be written differently, if you did not use the list.

“game.eles” manages complexity by storing all of the different squares that a user can bet on into an array. This is crucial because it allows the program to be able to generate a random value within the the array to pick the winning square. This allows to the avoidance of having to use many variable to store each element in “game.eles” which would be difficult to manage due to the amount of elements. The program could not be written without “game.eles” because it it used to access, style, and manipulate elements throughout the program.

3c

i. The first program code segment must be a student-developed procedure that:- Defines the procedure’s name and return type (if necessary)- Contains and uses one or more parameters that have an effect on the functionality of the procedure

ii. The second program code segment must show where your student-developed procedure is being called in your program.

iii. Describes in general what the identified procedure does and how it contributes to the overall functionality of the program.

The procedure identified is “createEle”. The identified procedure allows for the process of creating new HTML elements allowing to define many properties of the new element in a single function. It helps create user interface in a way that allows for more concise and maintainable code.

iv. Explains in detailed steps how the algorithm implemented in the identified procedure works. Your explanation must be detailed enough for someone else to recreate it.

The procedure is able to create elements by using the parameters, parent (parent element to where the new element will be appended), eleType (the type of HTML element), html (the inner HTML content), and eleClass (the class name that will be added to the element). It creates a new element using the parameter “eleType” for the elements desired type as well as the method “document.createElement” to create the element, storing it in the variable “ele”. Then it takes the value set for the parameter “html” to set the inner HTML using the “innerHTML” property. Then it takes the value set for the parameter “eleClass” to add the class to the element using the “classList.add” method. Lastly it takes the value set for the parameter “parent” to append the element to its parent element using the “appendChild” method.

3d.

i. Describes two calls to the procedure identified in written response 3c. Each call must pass a different argument(s) that causes a different segment of code in the algorithm to execute

Call 1: User clicks spin button and betted on winning square

Call 2: User clicks square to bet on

ii. Describes what condition(s) is being tested by each call to the procedure.

Condition(s) tested by call 1: Condition being tested in call 1 is if square is with random value from 1-67 is occupied by a bet element

Condition(s) tested by call 2:Condition being tested in call 2 is whether the square has bet element it will remove bet element, add bet element when not occupied.

iii. Identifies the result of each call

Result of the call 1: All bets are cleared from board and a new bet element is added to winning square

Result of the call 2: A bet element is added to square the user clicks