Coding Education quiz STEM

Fill-up Tanks Quiz (Scratch)

Welcome back! You’ve surely seen images as below that appear online (internet sites, social media apps, etc.)

 In this Scratch app, I’ll demonstrate how to turn those static quiz images into an interactive, dynamic quiz application.

 

Ouput: 

This is what a quick game play session looks like in this app.

Design:

First, I need a tap image (from where the water will be flowing/dripping), then I need a diagram of tanks (uniquely identified with a digit) and the overall tubings/connections. I keep this sprite independent of the backdrop because we can then add different layouts (of tanks and tubings) while keeping the Tap same and its animation.

Then I get a layout image as above (sample image from the internet). I also create several images (5) for the sprite Tap as below just for making the tap dynamics with water drops going.

The app will ask (via bubbles) for an input (i.e. pick a number that corresponds to the tank# that’ll you think will fill up first): 1 through 7.

Once a numeric key is pressed If the response is evaluated against the correct answer, and the app will tell you if you’re right or wrong (via bubble). There’s no limit to trying.

Also, you can easily visualize the solution by pressing Spacebar any time. It’ll show you a simple animation of the liquid flow into the correct tank. This is done via a series of 12 costumes for the backdrop animated (see Code tab for Backdrop).

For simplicity’s sake, I’ve not incorporated sound (although in the code, there’s a sound resource you can use. Choose the Tap sprite and its Sound tab), or extensive images and additional levels—as they’re part of the same process, just repeat the same logic.

Code & Logic:

The complete, functional code is inside the project here! The code blocks for the Tap sprite is:

As you can see there are 2 events being handled. 1) When Flag is clicked to start the game 2) Whenever a key is pressed. I’m handling two different things when a key is pressed: (a) The numeric key to see if user picked the right tank# and b) To see if Spacebar is pressed to show the answer.

Hence, the nested if/else loop obviously. The communication back to the code blocks for the backdrop is done via broadcasting a message. If Spacebar is pressed, it notifies the code for backdrop to start showing the solution with animation.

The animation code for the backdrop is below:

Exercises: 

Add more levels, track scores, etc. Have fun 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top