4 – User Input

🎯 Learning Objectives

Develop the Programming and Development learning strand:

  • Apply decomposition to break down a larger problem into more manageable steps
  • Use user input in a block-based programming language
  • Use a block-based programming language to create a sequence
  • Use variables in a block-based programming language
💬 Key Vocabulary

  • Event-driven programming
  • event handler
  • input
  • checkbox
  • variables
  • sequence
  • object properties
  • object ids
  • decomposition

📝 Starter Activity – User input

It is common for software applications to obtain data from the user.

Questions

  • What data is being collected?
  • How is it being collected?
  • At what point does the user submit the data?

Think/pair/share

Solution

📖 getText()

getText (“id”) is a built-in subroutine that collects the text entered into a textbox; “id” is to be replaced with the name given to the text box.

You can use an event handler to determine when to collect the data and what to do with it once it has been collected and linked with a variable.

Click here for an example app that uses this feature.

📝 Activity 1 – Theme park tickets app

The purpose of this app is to allow the user to enter in the number of adult and child tickets required.

Once the user selects the submit_button, the data will be captured and processed and total will be displayed in the result_label.

Download the worksheet below and place the blocks in the correct order to form a working segment of code.

📖 Decompose the problem

Decomposition is breaking a problem down into more manageable chunks.

Programming an app for a mobile device can be a daunting task to undertake.

Decomposing the problem helps us make the task less daunting and more achievable.

📖 Decomposition example (Tappy Tap App)

StepFurther decomposition
Screens1. Create three empty screens to work with and give each an appropriate name.
Welcome screen1. Design the welcome screen by adding images, labels, and buttons.
2. Code button so that when clicked it moves to the game screen.
Game play1. Add title label and blue dot image.
2. Code blue dot to move to random position on screen when clicked.
3. Add score variable that increments
4. Code screen to move automatically to the results screen after five seconds.
Results screen1. Add score label.
2. Add code to pass the score into the score label.
3. Add play again button and code it to go to the welcome screen.

Open your project diary and spend ten minutes decomposing your app project with your partner.

📝 Develop your app

Now that you have decomposed the problem and have designs for the screens, you are ready to start developing your app.

  • Sign in to code.org with your credentials (username and password)
  • Select Projects and click on the App Lab
  • Name your project with the same name as the app title

📖 Pair programming reminder

While you are developing your project, you and your partner will take turns to be the driver and the navigator. You will swap roles regularly as directed by your teacher.

The driver: Your role is to control the keyboard and mouse and place the code block in the correct places.

The navigator: Your role is to help support the driver by watching for any mistakes, reading the instructions to the driver, or seeking support if needed.

How to be successful with pair programming:

  • Teamwork
  • Driver: focus on the code and workspace
  • Navigator: watch the code being entered by the driver, look at previous work and examples, and research the problem

Both partners must be contributing equally.

You should now spend the rest of the lesson working in your pairs on your app, leave 5 minutes at the end to do the next task.

📝 Your project diary: Milestone 1

In your pairs, you now need to reflect on what you have achieved this lesson. Open your project diaries and navigate to the slide “Diary Milestone 1”.

  1. Add a screenshot of your code or design window.
  2. Describe what you have achieved this lesson and any problems you had to overcome.
  3. Write down what you need to focus your attention on in the next lesson.

In this lesson, you…

  • Looked at how to handle user input from a text box
  • Decomposed your project
  • Make a start developing your project

Next lesson, you will…

  • Develop your app further

🏅 Badge it

🥈 Silver Badge

🥇 Gold Badge

🥉 Platinum Badge