Review

  • No good story / movie / tv show is completed by just writing. You need a plan.

  • We have briefly talked about planning out your code. Today we will start that process.

Carousel imageCarousel imageCarousel imageCarousel imageCarousel imageCarousel image

4.4 - Storyboarding


When you come up with an idea for a program / app, you need to be mindful of the audience. Sure, your idea might be amazing to you but how is the user going to interact with the program?

  • Storyboarding a small program can be relatively simple - and it's good to start simple.

  • For a program, this can be done on a large whiteboard, a digital whiteboard, a table in a document, etc. You have many options.

    • For every interaction between the user and the computer, draw or write-out details like scenes in a tv show.

    • Any time the screen changes drastically, create a new scene (card)


Example: The Guessing Game

Keep in mind that the text in each box is a draft version and can be adjusted later.

Welcome! We are going to play a little guessing game. Please select an option:

1. Play

2. Quit

Splash screen! Show the user what this program will do and give the main menu.

Ok, let's play! I am thinking of a number between 1 and 20. You have two guesses remaining. Please make a guess >

First turn: Give the user the required information and ask for their first guess.

Oh, so close! But your guess was too high. Here's a big hint - the number I am thinking of is odd. Last chance - what's your guess >

Second guess: Give the user a hint (or two) and ask for their final guess.

Congratulations! You guessed correctly. The number was X. Would you like to:

1. Play again

2. Quit

If the user wins, congratulate them and ask if they want to play again.

Oh, sorry... better luck next time. The number was X. Why not try again?

Would you like to:

1. Play again

2. Quit

If the user does not win, invite them to play again.

Your turn!


Pair up!
Working with a partner, create a shared Google Doc, insert a two-column table, and storyboard one of the following games:

    • Reaction timer - The computer counts down for a few seconds from a random number. At zero it changes something on the screen you have to click or press a specific key as quickly as possible. Time the user's reaction time (accuracy counts if it's a key on the keyboard).

    • Text-based Codebreaker (Mastermind)

    • Hangman

    • Simon

    • Tic Tac Toe (two player)


Today's Task / Homework

  • Today's task is just a storyboard. You will NOT be coding.

  • You will work either solo or in a pair (2). No more.

  • Start the 4.4-4.6 project in Replit, make sure you pair up properly - if something goes wrong talk to Mr. Brash.

  • Inside this Repl you will see a file called "storyboard.drawing"