1 of 16

Lesson 4: User input

Year 8 – Programming – Mobile app development

2 of 16

Lesson 4: User input

Objectives

In this lesson, you will

  • Use user input in a block-based programming language
  • Use decomposition to break down your app project into more manageable steps
  • Use a block-based programming language to order instructions in a sequence
  • Use variables in a block-based programming language

​

2

3 of 16

User input

Starter activity

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.

3

4 of 16

User input

Starter activity

Text boxes (allowing for the user to input a text string)

Checkboxes (allowing for the user to indicate a yes or no response)

Button (linked to an event that will capture and process the data when it is clicked)

4

5 of 16

getText()

Activity 1

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.

​

5

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.

6 of 16

Theme park tickets app

Activity 1

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.

​

6

7 of 16

Theme park tickets app

​

Activity 1

7

Place the blocks in the correct order to form a working segment of code.

​

​

8 of 16

Solution

Activity 1

8

9 of 16

Decompose the problem

Activity 2

Decomposition is breaking a problem down into more manageable chunks.

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

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

9

10 of 16

Decomposition example (Tappy Tap App)

Activity 2

10

Step

Further decomposition

Screens

  1. Create three empty screens to work with and give each an appropriate name.

Welcome screen

  1. Design the welcome screen by adding images, labels, and buttons.
  2. Code button so that when clicked it moves to the game screen.

Game play

​

Results screen

​

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

11 of 16

Decomposition example (Tappy Tap App)

Activity 2

11

Step

Further decomposition

Screens

  1. Create three empty screens to work with and give each an appropriate name

Welcome screen

  1. Design the welcome screen by adding images, labels, and buttons.
  2. Code button so that when clicked it moves to the game screen.

Game play

  1. 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 screen

  1. 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.

​

12 of 16

Develop your app

Activity 2

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

​

12

13 of 16

Pair programming reminder

Activity 3

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.

​

13

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.

14 of 16

App development

Activity 3

​

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.

​

14

15 of 16

Your project diary: Milestone 1

Activity 4

In your pairs, you now need to reflect on what you have achieved this lesson.

  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.

15

16 of 16

Next lesson

Summary

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

16