FOP: Multi-Screen Apps
Review:

With Design mode we can now make interactive apps using UI elements like
buttons, dropdown menus, labels, etc.

Performing some action (click, drag, mouse hover) will trigger an event that you
can control by programming what should happen next.

We’ve added interactivity now to our programs. Now we will continue to further
expand our knowledge of event-driven programming by creating apps that
contain multiple screens.


But first we must learn about a couple more features.
Last stage we built a simple app where chased an image around the screen. Now
we can make a more interesting version which is much more detailed.
Todays Instructions:

Today you will still work independently but there are a few more problems
to figure out today than last time.

It is recommended you work with a partner to work through these stages
with so that you can help and bounce ideas off each other or discuss
strategy.

Make sure to read all of the instructions and make predictions for what the
code should do before running the program.

We will be completing Unit 5 Stage 2 today and moving onto Stage 3
where you will be making your own app based on what you have learned
so far.
Debugging:

Today you will learn about a debugging tool used in many programming
languages which is the console.log(“message”) command.

console.log is a command you can place in various parts of your code to end
messages to yourself to verify the program is doing what you think it’s doing which
helps prevent errors down the line.


console.log is a way to get the computer to tell you what’s happening and when.
Using well-placed console.log statements is very useful technique for figuring out
things like:

The order in which things are happening

A value or state of something at various points in the program during execution

Whether an event is firing or not, and when.
Debugging Continued:

Remember there are two types of common errors a programmer can make when writing
code:

Syntax Error – Misspelling, Missing Semicolons, Incorrect operators, etc. Usually easy to fix.

Logic Error – Error in design of code. Wrong output because logic structure of program is wrong.
Requires more thought process to fix these errors.

console.log messages are a great tool used to point out logic errors in code. Places
console.log messages in your code to see if certain functions or events are occurring like
you would suspect them to.

Study the code in the exercise and make a prediction about what you think will happen.
Run the program and find out if you made the correct prediction.

Keep testing until you understand what is going on.
Multiple Screens:

We now have the ability to create apps that contain multiple screens using Design
mode!

We now also have a new command called setScreen(“id”) which is used to change the
screen.

Now pay attention as I go over some aspects of how to create new screens and how
to transition from screen to screen using events.

There is a reference guide that you can refer to after my demonstration for more
information about screens.
Make Mini Chaser Game:


Make an app that contains three screens:

Welcome Screen – Contains button which starts the game

Game Screen – User must click image to continue playing. If user clicks the background the game
ends and transitions to the end screen.

End Screen – Gives the user the opportunity to replay the game or go back to the Welcome
screen.
Try and be creative! Remember that you can use images from the internet in your apps.


Don’t forgot about console.log
EXTRA: Add a “bad guy” to the game. If you click the bad guy instead of the target you
lose. Trick: make the bad guy move to a random location every time the mouse moves on
the screen.
Good Programming Practice:

Write a little code

Test it to make sure it does what you think

Write the next piece
If you do this, the errors you make will tend to be smaller and easier to catch.
Make Your Own App:

After completing stage 2 and your mini chaser game, move on to stage 3
where you will be building another app following some guidelines.


Start by drawing your design out on paper and add features you may
want to include that you may not have learned about yet.


Refer to all the instructions on the PDF labeled CREATE YOUR OWN APP located
on my website.
Don’t try to get too complicated though as you are restricted to app lab.
Begin designing and coding this idea once you are finished with stage 2.
We will be learning more features we can add to our programs so be on
the lookout of what you can add to your own project.