What is a flowchart?

Sample Flowcharts

binary chopping

Sample Flowchart

×

Close

Tic Tac Toe

Sample Flowchart

×

Close

• A. A flowchart is a type of diagram that represents an algorithm, showing the steps as various kinds of boxes, and their order by connecting them with directional arrows that indicate the order of execution. Flowcharts are used to plan, organize, and perfect a program. However, they can be used outside the context of computer science as well. Here are some examples:
1. xkcd’s infamous “Tech Support Cheat Sheet”
2. CS4All's How to Debug
3. Simple flowchart on getting to school
4. The secret to happiness

Flowchart Symbols & Standards

• A. The following are the standard meanings for symbols used in a flowchart. If we wanted to create a flowchart that other people would be able to understand, we would need to agree upon the symbols used. Therefore, in this course, when you make an algorithm using a flow chart, this is the standard we will be following:

Audio/Visual Learning

• A. Let's continue by watching this video on making flowcharts. As you watch, remember drawing this kind of diagram helps us to visualize our programs and better understand how to modularize the code.
1. Set up your notes so that you can build a reference as you deepen your understanding.
2. Watch the video embedded below, or linked here .
3. Next, open your U2L3 Workbook. Complete the written responses section by responding fully to each of the prompts.

Understanding the Game Rules

• A. Now, let's see the game rules that we will use to create our flow chart. Here are the rules:

The Number Guessing Game

1. The computer will select a number at random between 1 and 1,000,000 (the player should not see the number). This will be known as the secret number.
2. The player will be given 18 attempts at guessing the secret number.
3. As long as the secret number is not guessed, the computer will inform the player if the number is too high or too low.
4. The computer will inform the player of how many guesses remain after each unsuccessful attempt.
5. When the player guesses the number, the computer will inform the player and ask if they want to play again.
6. If the player does not guess the secret number, the computer will inform the player and ask if they want to play again.

Drafting the Flowchart

• A. Now you will design your own flowchart. This flowchart will depict the flow of the algorithm for your game (based on the instructions above). You may use any of the following design tools (or any other you deem appropriate, such as "draw" in Google Docs).
1. diagrams.net (draw.io)
2. figma
3. canva
4. smartdraw

Create Number Guessing Game

• A. Use the flowchart you created to guide your scripting process. Here are a few things to keep in mind as you code your happy heart out:
1. Your code should be completely abstracted using modularization
2. The program interaction should be either in the console or via dialogue boxes using prompt( ), confirm( ), alert( ), etc.
3. Use the console to "see" what the program is doing
4. DEBUG Your code as you go along (do not wait until the very end)
5. Use the S.N.O.T protocol to support your progress

Sample Flowcharts

binary chopping

Sample Flowchart

×

Close

Tic Tac Toe

Sample Flowchart

×

Close

Flowchart Symbols & Standards

• A. The following are the standard meanings for symbols used in a flowchart. If we wanted to create a flowchart that other people would be able to understand, we would need to agree upon the symbols used. Therefore, in this course, when you make an algorithm using a flow chart, this is the standard we will be following:

Understanding the Game Rules

• A. Now, let's see the game rules that we will use to create our flow chart. Here are the rules:

The Number Guessing Game: Binary Chopping

1. The PLAYER will select a number at random between 1 and 1,000,000 This will be known as the secret number. This number will be stored in a variable.
2. The computer will be given 20 attempts at guessing the secret number.
3. As long as the secret number is not guessed, the computer will making guesses using binary chopping (selecting the number at the midpoint between the minimum number in the range and the maximum number in the range).
4. The computer will give the player the option of telling it if the number it guessed was too low or too high.
5. When the computer guesses the number, the computer will inform the player and ask if they want to play again.
6. If the computer does not guess the secret number, the computer will inform the player and ask if they want to play again.

Drafting the Flowchart

• A. Now you will design your own flowchart. This flowchart will depict the flow of the algorithm for your game (based on the instructions above). You may use any of the following design tools (or any other you deem appropriate, such as "draw" in Google Docs).
1. diagrams.net (draw.io)
2. figma
3. canva
4. smartdraw

Create Number Guessing Game Binary Chopping

• A. Use the flowchart you created to guide your scripting process. Here are a few things to keep in mind as you code your happy heart out:
1. Your code should be completely abstracted using modularization
2. The program interaction should be either in the console or via dialogue boxes using prompt( ), confirm( ), alert( ), etc.
3. Use the console to "see" what the program is doing
4. DEBUG Your code as you go along (do not wait until the very end)
5. Use the S.N.O.T protocol to support your progress

Written Responses

• A. Look over your work section, by section in order to guarantee the highest grade—and a true reflection of your newly gained skills.
1. Review your written responses for accuracy and thoroughness
2. Next, review your written responses for fluency (making sure the responses represent complete thoughts that fully address the prompt)
3. Make any necessary revisions prior to submitting the work.

Code Scripts

• A. Next, you will review your code for readability, efficiency, and elegance.
1. Ensure that each task is labeled using comments
2. Review your code segments individually and line by line.
3. Remove any bugs that may interfere with the program's execution
4. Ensure that the scripts you wrote meet the task criteria
5. Make sure that your code is highly legible and properly indented

Self-Evaluation

• A. Let's evaluate our own work based on the assignment rubric. Be as realistic as possible in your evaluation.
1. In your U2L3 Workbook, select the "self-evaluation" tab. Check off each criteria based on the level of performance you believe you achieved.
2. Add any notes or other communication you wish to convey to your teacher in the appropriate space.

Self-Reflection

• A. Finally, you will reflect on your skills development and ability to complete the lab.
1. In your U2L3 Workbook, select the "self-reflection" tab.
2. Respond to each prompt using complete sentences that express complete thoughts. Be sure to use the "Where Am I" rubric to determine your performance on certain tasks.

Attach Your Workbook

• A. Let's attach your workbook to Google Classroom. Here's what you need to do:
1. Open your U3L1 Workbook.
2. Change the share settings on the document to "anyone with the link" and "Editor".
3. Copy the link to the newly shared file and paste it in your Google Classroom turn in screen.

Attach your VS Code Project Folder

• A. Now, let's share your project folder so that your JavaScript work can be evaluated. Here's what you need to do:
1. Open your project folder (you will need to find where you stored the actual folder on you computer).
2. Upload the entire folder to your Google Drive.
3. Once the folder has been uploaded to Google Drive, change the share settings on the folder to "anyone with the link" and "Editor".
4. Copy the link to the newly shared folder and paste it in your Google Classroom turn in screen.
5. Finally, turn in your assignment for evaluation by your teacher.

REPLIT Submission

• A. You can submit your work via replit , if you wish. Here's what you need to do:
1. If you created your work in replit, simply paste the link to your lab submission in Google Classroom.
2. If you created your work in VS Code: find the folder on your computer where the project is stored, upload it to replit and then share that file in your Google Classroom.