Brian-Individual

3a)

i. Describes the overall purpose of the program

The purpose of this program was to add a fun little game onto our “Our Games” tab for our website

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

The computer would randomly generate a color. Then the user would have to repeat that color. When the computer selects a color, the main color disappears. When the user selects a color, the main color turns white.

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

Input: User selects a color. Output: If the user perfectly selects the color given by the computer, a new color is added to the sequence. If the user doesn’t perfectly repeat the given colors, an alert is given saying, “Game Over”.

3b)

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

const panels = [
            topLeft,
            topRight,
            bottomLeft,
            bottomRight
        ];

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.

 const panels = [
            topLeft,
            topRight,
            bottomLeft,
            bottomRight
        ];
        return panels[parseInt(Math.random() * panels.length)];
    };

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

The name of the list is panels

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

The data in the list describes the position of the four different colors that are chosen at random

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

Without a list, it would be impossible for the game to work. This is because, without a list, the game wouldn’t be able to repeat the previous sequence of colors for the user to select.

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

Sequencing:

  const sequence = [getRandomPanel()];
    let sequenceToGuess = [...sequence];

...

    const panelClicked = panelClicked => {
        if (!canClick) return;
        const expectedPanel = sequenceToGuess.shift();
        if (expectedPanel === panelClicked) {

Selection:

  const panelClicked = panelClicked => {
        if (!canClick) return;
        const expectedPanel = sequenceToGuess.shift();
        if (expectedPanel === panelClicked) {
            if (sequenceToGuess.length === 0) {
                //new round
                sequence.push(getRandomPanel());
                sequenceToGuess = [...sequence];
                startFlashing();
            }
        } else {
            //end game
            alert("Game Over (Restart Page to Startover)");
        }
    };

Iteration:

 const sequence = [getRandomPanel()];
    let sequenceToGuess = [...sequence];

...

   sequence.push(getRandomPanel());
   sequenceToGuess = [...sequence];
   startFlashing();

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

<div>
    <div onclick="panelClicked(event.currentTarget)" class="panel top-left-panel"></div>
    <div onclick="panelClicked(event.currentTarget)" class="panel top-right-panel"></div>
</div>
<div>
    <div onclick="panelClicked(event.currentTarget)" class="panel bottom-left-panel"></div>
    <div onclick="panelClicked(event.currentTarget)" class="panel bottom-right-panel"></div>
</div>
  const panelClicked = panelClicked => {
        if (!canClick) return;
        const expectedPanel = sequenceToGuess.shift();
        if (expectedPanel === panelClicked) {

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

It takes the user’s selection on a selected color and checks if it correlates with the color sequence randomly generated by the computer.

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 panelClicked first starts off with a panel being clicked which triggers an algorithm to check if the panels clicked by the user are equal to the ones that the computer generated.

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.

First call:

     const getRandomPanel = () => {
        const panels = [
            topLeft,
            topRight,
            bottomLeft,
            bottomRight
        ];
        return panels[parseInt(Math.random() * panels.length)];
    };

    const sequence = [getRandomPanel()];
    let sequenceToGuess = [...sequence];
...
    //new round
    sequence.push(getRandomPanel());
                sequenceToGuess = [...sequence];
                startFlashing();
            }

Second call:

<div>
    <div onclick="panelClicked(event.currentTarget)" class="panel top-left-panel"></div>
    <div onclick="panelClicked(event.currentTarget)" class="panel top-right-panel"></div>
</div>
<div>
    <div onclick="panelClicked(event.currentTarget)" class="panel bottom-left-panel"></div>
    <div onclick="panelClicked(event.currentTarget)" class="panel bottom-right-panel"></div>
</div>

...

 const panelClicked = panelClicked => {
        if (!canClick) return;
        const expectedPanel = sequenceToGuess.shift();
        if (expectedPanel === panelClicked) {
            if (sequenceToGuess.length === 0) {
                //new round
                sequence.push(getRandomPanel());
                sequenceToGuess = [...sequence];
                startFlashing();
            }
        } else {
            //end game
            alert("Game Over (Restart Page to Startover)");
        }
    };

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

Condition(s) tested by the first call:

The first call tests the condition, if the sequence guessed, is correct compared to the given sequence

Condition(s) tested by the second call

The second call tests the condition, if the colors selected by the user are correct compared to the sequence given.

iii. Identifies the result of each call

Result of the first call:

The first call adds a random panel by using math.random to the previous sequence. Then the random panel is moved to the sequence that the user needs to guess.

Result of the second call:

The second call links the 4 different panels designed in Html and CSS to an algorithm. The algorithm would then check if the panels selected by the user are similar compared to the given sequence. If it isn’t right, then it would end the game. If it is right, it would add another color to the sequence.