The following video-based lessons accompany Chapter 1 of Drag and Drop Code with Thunkable. You’ll be introduced to app building with Thunkable and stepped through the creation of a starter app, “Say It”, which speaks words when a button is clicked. You’ll learn basic coding terminology, work on some customization of the app to test your learning, and ultimately create your own custom app for helping travelers with common terms in a foreign language.

Build

Create a SayIt app with Text-to-Speech (video)
Follow this tutorial to build a simple app

Conceptualize

Terminology lesson: event handlers, events, and responses (video)
Learn the basics of coding terminology. You’ll need it to as you move towards more complex app building.

Self-Test Questions (see answers in the back of the book)

1.Match the terms with the definitions:

Term	Definition
Event	An event and the response it triggers.
Function call	The sequence of operations performed when an event occurs
Response	Something that happens to the app/device
Event Handler	When the app performs a task such as speaking words or playing a sound clip

2. Grammatically, what does an app’s behavior consist of?

3. The red, purple, and green outline parts of the code. Name the part of code within each color.

4. Which of the following are events?

a. Button1.Click

b. The passing of time

c. say

Customize

Customize the app to test and expand your skills and knowledge:

• Change the text that is spoken and retest to make sure it works.
• Modify the app so that on a long-click, it says something different than on the regular click (hint: check out the different “when” blocks in the Button1 folder of the Blocks Editor.. Test your change once you’ve made it.
• Modify the app so that it speaks a language other than English. In the Designer, change the “default language” of the Text to Speech component.
• Modify the app so that some other words are spoken every five seconds. You’ll need to add a Timer component in the Designer, and the “when Timer.Fires” event handler in the blocks.
• Modify the app by adding a TextInput component. TextInput allows the user to type in some text. Make it so clicking the button speaks whatever text was typed in. Note: the “with TextInput get Text” block gets you the text the user has typed in.

Create

Create an app to help a traveler communicate in a foreign language. The app should have multiple buttons that each speak some important phrase, e.g., “Dónde está el baño?”

Try to create the app on your own. For help, see the following video tutorials

Build a Travel App

Beautify the Travel App (kind of)

When you finish your app, share it!

Share and Publish an App

If you put in on social, use the tags #draganddropcode and #madewiththunkable