Debugging!

May 11 :: P1• P3 • P5 May 12 :: P2• P4



Expectations:

C: CONVERSATION...Mute your mic when not speaking and have camera on as much as possible

H: HELP...Raise your hand by clicking the "Raise Hand" Button, or by inserting the emoji and/or type “raise hand” in the chat

A: ACTIVITY...Work on the assignment/Complete tasks on time

M: MOVEMENT...Stay in the Teams meeting and be present (But don't forget to stretch and use eye safety tips!)

P: PARTICIPATION...Use thumbs up and thumbs down for a yes or no response. Ask and Answer questions in the chat area or verbally when appropriate.

S: SUCCESS...Succeed in a virtual space together!

Typing.com ASSIGNMENT! (5 Minute Typing Test!)

Typing:

1. Log in to typing.com

2. Click TESTS (On the top right ...next to Lessons)

3. On TESTS Tab, Click 5 Minute Typing Test (this is due Friday, May 14! NOTE: You will be taking 2 tests THIS WEEK!)

4. Begin Typing (Please DO NOT DO THE NEXT LESSON! It will RESET if you do!)

If you are finished or waiting, work on Clever!

  1. Students click on the Clever icon on the desktop

  2. Sign in using the username & password (same as logging into computer)

  3. Click on the square that says iReady

  4. Continue until time is up!

Lessons have been assigned to them based on their diagnostic test results both in Math and Reading. Within each lesson are brain break games. The district is pushing a goal of 45 minutes per week on Online Lessons in ELA and 45 minutes per week in Math to close the gaps found in the diagnostic. Math and ELA are providing some of that time during the week, but not all.

CODE.ORG!

Let's SIGN IN!

WHAT ARE WE LEARNING: App Development....Debugging!

WHY IS IT IMPORTANT: Investigating working code continues to be an introduction to many of the skills of programming. Students are also introduced to debugging as a skill they'll need to use and develop as programmers. A huge goal of this lesson, however, is attitudinal.

SWBAT:

  • Debug simple sequential and event-driven programs

  • Use the debugging process and Identify specific best practices for debugging programs

  • Use the speed slider, break points, and documentation as part of the debugging process

HOW WILL MY TEACHER KNOW WHAT I LEARNED: You will learn how to identify and fix problems and answer a follow up question!

No matter what level of experience - everyone gets bugs! And with a little practice everyone can get good at debugging. Find out the 4 simple steps it takes to squash a bug and some tips to debug even faster...

Debugging: the process of finding and fixing problems in code

ASSIGNMENT: Debugging!

Due: May 12 :: 25 Points!

Go to code.org

Select SIGN IN on the top right corner


Enter your fresnou.org email and password

Or Click Continue with MicroSoft


Click CONTINUE WITH MICROSOFT

Enter your fresnou.org email and password


If you are on MY DASHBOARD...

Scroll down to find MY COURSES...

Click CSP Unit 3 - Intro to App Design ('20-'21)

Click LESSON 7

Click 1 and continue

Follow along with the class!

Click CONTINUE

PAGE 2:

Do This:

Debug this program.

Try This: Notice the slider at the bottom of the screen? Currently the speed is set to "turtle". This slows down the running of your program, so you can watch each step and debug. If you flip the code from block to text mode, you can see the code highlighting as it's run. This is a form of a visualizer, a tool software developers use to help visualize code and find bugs.

PAGE 3:

Do This:

Debug this program.

Try This: Notice the slider at the bottom of the screen? Currently the speed is set to "turtle". This slows down the running of your program, so you can watch each step and debug. If you flip the code from block to text mode, you can see the code highlighting as it's run. This is a form of a visualizer, a tool software developers use to help visualize code and find bugs.

PAGE 4:

Do This:

  • Run the app to see how it works

  • Debug this program to use the correct sound and text when the user clicks each animal

PAGE 5:

Do This:

  • Run this program to see how it works.

  • Debug the program so that the smiley face does not go off the screen.




PAGE 6:

Do This:

  • Run this program to see how it works.

  • Add code to the program so that the "Go Back" button takes the user back to the home screen



PAGE 7: Don't put onEvent blocks inside other onEvent blocks. You almost never want to.

Do This:

  • Run this program, hit the up button, play the music, then stop the music, and hide the controls.

  • Do you notice something weird happening this second time?

  • Why you think this is happening

  • Debug the program to fix the issue you found.


PAGE 8:

Do This:

Run this program to see how it works. Then add code to the app to make the "Excited" button work.

  • Pick a song, image, and text to show when the button is clicked

  • Make sure only the "Excited" button has a thick border when it's clicked

  • You can use the code for the other buttons for ideas on how to write the code

TIP: We will need to google and save an image!


Completing the code.org assignment is worth

25 points!

NOTE: MAKE SURE THE TOP OF THE CODE.ORG LESSON SHOWS THAT IS COMPLETE! (ALL CIRCLES ETC SHOULD BE GREEN!)

Remember, if you skip a page this will occur:

CONGRATULATIONS! YOU HAVE COMPLETED LESSON 7...25 POINTS!

Debugging Strategies

Keep your code clean

  • Use clear, meaningful IDs for your elements

  • Keep your code organized in chunks that do the same thing

  • Use comments to explain your code

  • Write code using blocks


Run your code

  • Run your code a lot, every time you add a command or two

  • Slow down your code with the speed slider. Watch how it runs closely

  • Use console.log to get output. Add extra output statements throughout your code to get feedback on what parts are running.


Use classmates and resources

  • Talk out the problems with a partner or classmate

  • Compare your code to examples that you know work

  • Read documentation to know how a block is supposed to work

  • Hand trace your code to track what's happening.


Documentation: a written description of how a command or piece of code works or was developed.

Comment: form of program documentation written into the program to be read by people and which do not affect how a program runs.

Once you are done, please give a thumbs up in the chat!