Tic Tac Toe Create Tack Written Task - AadyaDaita/Arduino_Society GitHub Wiki

i. Describes the overall purpose of the program This Tic Tac Toe game was created using Visual Studio Code, in Javascript. My program is a game meant for the younger generation to play as a pastime, to practice their mental simulation.
ii. Describes what functionality of the program is demonstrated in the video This game allows the user to play against the computer. The user and the computer take turns placing an “O” or an “X” on the grid. The first to place their symbol either in a column, row, or diagonally, wins the game. If neither of the players succeed, it will be declared a tie.
iii. Describes the input and output of the program demonstrated in the video The input by the user is the clicking of the mouse, on the location at which they desire the “O” to be placed on the grid. The output is the letter “O” being printed on that location. This will also trigger the computer to place an “X” on any other place on the grid, after exactly 0.2 seconds.

3B Capture and paste two program code segments you developed during the administration of this task that contain a list (or other collection type) being used to manage complexity in your program

i. The first program code segment must show how data has 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 It is a two-dimensional list, named board.
iv. Describes what the data contained in the list represent in your program The board list element holds the value placed on the tic tac toe grid by the user or computer. Lines 64-74 assign a value on the grid to an element in the list.
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. The list significantly reduces the complexity of my code, since the list allows the program to store data, and update/delete that data as well. When a user clicks on a location on the grid, the element associated will be updated and stored as an “O”. The image above shows the board element being updated to an “X”, for the position the computer chose. This game would not be possible without the usage of a list. When the user or the computer clicks to play, the O or X will not be saved. Therefore, actions such as checking whether the game is over or not are impossible.

3C Capture and paste two program code segments you developed during the administration of this task that contain a student-developed procedure that implements an algorithm used in your program and a call to that procedure.

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
Implements an algorithm that includes sequencing, selection and iteration

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

3. iii. Describes in general what the identified procedure does and how it contributes to the overall functionality of the program The procedure is named “user_clicked”. As the name suggests, it is activated when the user clicks on a place on the grid. It holds the specific set of instructions for adding an “O” to the board list/adding it to the grid. It receives the parameters row and column, and uses sequencing, selection, and iteration in its core processes. 4. 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. First, a click on the grid invokes user_clicked. Since is_user_turn boolean is true, the function checks whether or not the clicked space already has a value associated with it. This is done by the empty function. If empty is false, then it proceeds by setting the board element to “O” and printing it on the grid. Then, each time, the function checks whether the game is finished or not. In my game_done function, if rnd is equal to 0, then game_done checks whether there are any matches row-wise. If rnd is equal to 1, then game_done checks if there are any matches column wise. Lastly, if rnd is 3 and 4, game_done checks for matches left and right diagonally, respectively. So, in the user_clicked function, it initialized rnd to 0, and then iterates until 4, checking whether or not the game is done. If game_done returns a true value, then “YOU WON!!!” will be printed on the screen via HTML. If the game is not done, is_user_turn is set to false, and the program is instructed to wait 0.2 seconds. computer_play is then invoked, meaning it is the computer’s turn to play.

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 First call: The first call to the user_clicked function is even the very first square on the grid is clicked. Here, the row and column values, the arguments for the user_clicked procedure, are both 0, and are associated with board[0][0]. Second call: The second call to the user_clicked function is when the square in the middle of the grid is clicked. Here, the row and the column values, the arguments for the user_clicked procedure are both set to 1, and are associated with board[1][1].
ii. Describes what condition(s) is being tested by each call to the procedure Condition(s) tested by first call: Assume that there is already a symbol value in board[1][1]. The condition being checked is whether the board[row][column] that was clicked is empty or not. When the first space is clicked, the condition will be true, since board[0][0] is empty. Condition(s) tested by second call: I am still under the assumption that there is already a symbol value in board[1][1]. Now, when the condition of whether or not board[row][column] is empty is checked, a false value will be returned.
iii. Identifies the result of each call: Result of first call: User_clicked will place an “O” there. It would then proceed into the while loop, to check whether or not the game was finished. Result of second call: User_clicked would go into the else condition. It would prompt the user to click another space, as the current one is full. Lastly, it will reload the page after 3 seconds.