Welcome! Today, we’re going to try a program with a little more complexity and twists in Scratch. In this program, I demonstrate the following tips/tricks:
- How to use a List control real-time
- How to get inputs from user and take action accordingly
- How to convert Text-to-speech
- How to read variables real-time from calculations and let the avatar speak it!
- Nested logic and loops
- Sprite animation with edge detection
Play/run it here from my project page (it plays in any modern browser):https://scratch.mit.edu/projects/279843196/
Works on ANY device, with or without touch/mouse!
Game-Play Overview
The objectives are listed above, it’s not much of a game but rather important concepts teaching disguising as a cute game 🙂 Based on these concepts, some of you can create much better games than I can and that’s great. My goal isn’t about creating or selling games (or selling anything) rather sharing the knowledge and getting the young generation excited about the possibilities.
First, you click the green flag to start the app as usual. Then, you’ll notice a list called “Grocery List” appear empty for a few seconds, but get populated with some values (we’ll discuss further). See snapshot below. And the avatar called Avery is actually speaking to us. She counts EXACTLY the number of items in the list every time and says it aloud. This is done through Text to Speech technology. There’s a free extension made available by Scratch team and it’s only required for the builder/programmer, the user doesn’t need to install anything.
Then we move to Scratch’s “text bubble” features where Avery asks us a question. This creates the input box (see image below) and she waits for your input. You can enter a word/text (there’s no validation for this demo for simplicity, but look at Challenge section below for ideas). If anything other than X is entered (by Enter key or by touching/clicking blue tick-mark next to input box), the value you enter is inserted into the List real-time.
The Grocery List is updated with your inputs and is shown on screen. Image excerpt below…
Once you’re done entering, just enter ‘x’ or ‘X’ (without the quotes) as Avery asked. Now Avery will stop asking for more inputs, and instead will speak again and go off to do the shopping. This is where I do the sprite animations with different costumes (only minor variation/tweaks from the Scratch library images…but since I converted them to Vector graphics, I could do more; but not here.)
After she’s done “shopping”, she confirms that she’s done and says she’ll empty up the list which now looks like below:
So there you go.
Now Try It! Run it here: https://scratch.mit.edu/projects/279843196/
Explanation:
The list is a “new” element in Scratch. The manipulation of the list that I do here are: a) Load 3 items at load-time as an example/default list b) I get the number of items in that List control c) I pass that number through a Text-to-Speech module and let Avery “speak” it!
To add the Text-to-Speech extension, click on this icon at bottom-left of the IDE : 
Then click on Text to Speech module, and you should get a new item in the left panel as shown below:
This new item will now enable you to use functions like “speak” and others (pretty basic but this is for beginners! Free!). It’ll look like this:
So, she says the exact number: “three”. Here’s the code block snippet:
Then I add items by processing the user inputs from the input box “forever” until “X” is entered. So the whole thing is in a loop checking for that. Until X, Avery will keep asking if there’s anything else you want to add to the list! (There’s no error check on my part for this demo, so if you entered billions of items you’re on your own and will crash Scratch servers…so, don’t waste your time doing that, instead see Challenge section below).
The complete code blocks are shown below. It’s probably hard to read this tiny but to give you enough to follow along…best thing to do is to look at the actual from the link above where you play it.
When <flag> clicked event runs the code blocks at start-up. The blocks next to it run after Avery is touched/clicked. Your focus should be on this…the nested loop here so that it runs until X is entered, and within it a bunch of things have to done (text2speech, ask for input, calculations such manipulating the List, etc.) and then gracefully exit when it’s expected.
Again, to understand the code and to extend it, you need to look into the code blocks in Scratch and tinker with it yourself, but here’s a couple of key things I want to point out:
The red blocks are what’s related to the List manipulation in real-time. Notice I get the length of the List (which is the # of items in the list at a given time) and pass it on to the Text2Speech module’s speak() function…making Avery say out the length.
As the loop is running (while answer is NOT “X”), I get the inputs and store in a built-in variable called “answer”. If the answer is not X, we consider it as an item we want to add to Avery’s list. So with the call “add(answer).Grocery List” (in red block) the items are added one-by-one. (Can you make Avery say out loud the total items in list EACH time there’s a new item? Can you tell Avery to take out an item from the list?)
Lastly, when answer is X, she goes off walking. That’s the sprite animation and all images are available in the source code from above link. So, no need to repeat here but look for “switch costume to <param>” function blocks. Once her animation is complete, she comes back and clears up the list (see the section below) and wraps it up. To restart the whole thing, you’ll click the green flag again or refresh the page.
Challenge:
- Can you implement the logic and loops differently? There are many more ways to accomplish what’s shown here.
- Can you use a sprite with an empty shopping cart at the start, and a full cart after the avatar is done with shopping?
- And another mechanism to end the user-input to list? There are so many ways! Think about it and see if you can add a different way.
- Can you add input validation to ensure it’s robust and meaningful? (When adding to list)
- Can you make Avery say out loud the total items in list EACH time there’s a new item? e.g. “Thanks! I have now <N> items on my list.”
- Can you tell Avery to take out an item from the list? Use List functions in red.
