L26 — Mobile Applications pt.2

🎯Learning Objectives

Add an Image and a Sound component to an App Inventor app
Use a variable to store and update a number (score, counter)
Use if / else logic to check an answer and give feedback
Build a 3-question quiz app that counts correct answers and shows a final score

📖Theory

1. Recap — Where We Left Off

In L25 we built a greeting app with three components: Label, TextBox, Button. Today we add three new ideas:

Images — show a picture on screen
Sound — play a short audio clip
Variables — remember a number between button taps

Together they let us build a real quiz app by the end of the lesson.

2. The Image Component

In App Inventor's Designer, open the User Interface palette and drag an Image component onto the phone screen. Then in the Properties panel on the right, click Picture → Upload File and upload any .png or .jpg from your computer.

You can also change the image from Blocks:

set Image1.Picture  to  "cat.png"

Tip: images must be uploaded to the project first. In the Designer, select any component → Properties → Picture → "Upload File". Images are stored inside the project, not on your disk.

3. The Sound Component

Sound is a non-visible component (it doesn't appear on screen). Drag it from the Media palette — it lands in the "Non-visible components" strip below the phone outline.

Upload an .mp3 or .wav file the same way as an image.

Control it from Blocks:

Code

call Sound1.Play          ← start playing
call Sound1.Stop          ← stop
set Sound1.Source  to  "correct.mp3"

Free sounds: freesound.org has thousands of short sounds under free licences. Good choices for a quiz: a short "ding" for correct, a "buzz" for wrong.

4. Variables — Remembering Numbers

A variable is a named box in memory that holds a value. When the user taps "Correct!", we want to add 1 to the score. Without a variable, we'd forget the score every time.

Creating a variable in App Inventor Blocks:

Open the Variables category
Drag initialize global [name] to onto the workspace
Name it score, attach a number block 0

initialize global score to  0

Adding 1 to the score when the right button is tapped:

Code

when CorrectButton.Click
  set global score  to
      global score + 1
  set ScoreLabel.Text  to  join "Score: " global score

5. If / Else — Making Decisions

In L24 we saw branching in flowcharts. In App Inventor it's the if / then / else block from the Control category.

Code

when AnswerButton.Click
  if   AnswerBox.Text = "Paris"
  then
    set FeedbackLabel.Text  to  "✅ Correct!"
    set global score        to  global score + 1
  else
    set FeedbackLabel.Text  to  "❌ Wrong. The answer is Paris."

The condition (AnswerBox.Text = "Paris") uses an equals block from Logic. Type the expected answer as a text block.

6. Planning the Quiz App

Before building, let's plan the algorithm (remember L24!):

Code

( Start )
    |
[ Show Question 1 ]
    |
[ User types answer and taps Check ]
    |
  < answer correct? >
   /          \
  Yes          No
   |            |
[ score += 1 ] [ show wrong message ]
   \          /
  [ Show Question 2 ]
    ... (repeat for Q2, Q3)
    |
[ Show final score ]
    |
( End )

We'll use a variable questionNumber to track which question we're on, and a variable score for the count.

💻Code Examples

Example A — Score counter (standalone app)

Designer: Label (shows "Score: 0"), two Buttons ("Right answer" and "Wrong answer").

Blocks:

Code

initialize global score  to  0

when RightButton.Click
  set global score  to  global score + 1
  set ScoreLabel.Text  to  join "Score: "  global score

when WrongButton.Click
  set ScoreLabel.Text  to  "That was wrong!"

Example B — Single-question quiz with sound

Designer: Label (question text), TextBox (user types answer), Button "Check", Label (feedback), Sound component (upload "ding.mp3").

Blocks:

Code

when CheckButton.Click
  if   AnswerBox.Text = "4"
  then
    set FeedbackLabel.Text  to  "✅ Correct! 2 + 2 = 4"
    call Sound1.Play
  else
    set FeedbackLabel.Text  to  "❌ Try again"

Example C — Moving between questions

To show Question 2 after the user answers Question 1, use a variable qNum:

Code

initialize global qNum  to  1

when NextButton.Click
  set global qNum  to  global qNum + 1
  if global qNum = 2
  then
    set QuestionLabel.Text  to  "Q2: What is the capital of France?"
  if global qNum = 3
  then
    set QuestionLabel.Text  to  "Q3: How many days in a week?"
  if global qNum > 3
  then
    set QuestionLabel.Text  to  join "Quiz done! Your score: "  global score
    set NextButton.Enabled  to  false

✏️Practice Tasks

Task 1Score counter app

EASY — IN CLASS

Open App Inventor and create a new project ScoreApp.

Build Example A:

A Label showing "Score: 0"
A Button "+ Point" — tapping adds 1 to the score and updates the label
A Button "Reset" — sets the score back to 0

Test in the emulator: tap the button 5 times, confirm the score reaches 5. Tap Reset, confirm it goes back to 0.

💡 Hint

The Reset button needs its own "when Click" block that sets global score to 0 and sets ScoreLabel.Text to "Score: 0". You can use a join block here too: join "Score: " with the number 0.

Task 23-Question quiz

MEDIUM — IN CLASS

Create a new project QuizApp. Build a 3-question quiz:

Q1: What is 5 × 6? (answer: 30)
Q2: What colour is the sky? (answer: blue)
Q3: How many months in a year? (answer: 12)

Components needed:

A Label for the question text
A TextBox for the answer
A Button "Check answer"
A Label for feedback (✅ or ❌)
A Button "Next question"
A Label showing the current score

After all 3 questions, show "Quiz finished! You scored X/3."

💡 Hint

Use two global variables: score (starts at 0) and qNum (starts at 1). The "Check" button compares the answer for the current question number. The "Next" button increments qNum and updates the question label. When qNum goes above 3, hide the TextBox and "Check"/"Next" buttons, show only the final score.

Task 3Add sound and image

HARD — HOMEWORK

Extend your quiz from Task 2:

Find a short "ding" sound on freesound.org (search "short ding", filter by Creative Commons licence). Download it as .mp3.
In the Designer, add a Sound component. Upload the file.
In the Blocks, play the sound when the user gets a correct answer.
Add an Image component. Find or draw a simple "trophy" image. Show it when the user finishes the quiz with a score of 3/3.

💡 Hint

The trophy image starts hidden: set its Visible property to false in the Designer. In the final screen block, add: if global score = 3 then set TrophyImage.Visible to true.

⚠️Common Mistakes

Forgetting to initialize the variable to 0

If you create a variable but don't give it a starting value, its value is undefined. Always attach a 0 (or "" for text) to the initialize global block when you create it.

Comparing text with a number

AnswerBox.Text is always text, even if the user types a number. Comparing it to the number block 30 may fail. Use the text block "30" (with quotes) in the equals check.

Case sensitivity in text answers

"Blue" is not the same as "blue" in App Inventor. If your answer is "blue" but the user types "Blue", the check fails. Either tell the user what format to use, or use the upcase block to convert both sides to uppercase before comparing.

The sound plays before it finishes loading

If you call Sound1.Play immediately after setting Sound1.Source, it may not have loaded yet. It's safer to upload the sound file to the project and set the Source in the Designer (not from Blocks).

🎓Instructor Notes

⚡ How to run this lesson (~80 min)

[5 min] Recap L25. Ask a student to describe the greeting app they built. Lead into: "Today we add images, sounds, and a memory — so the app can keep score."
[10 min] Theory: Image + Sound. Show how to upload a file in the Designer. Demo Sound.Play live — students love it.
[15 min] Variables live demo. Build Example A (score counter) on the projector, step by step. Ask after each block: "What would happen if we skip this block?"
[10 min] If/else blocks. Show Example B. Run it, type the wrong answer, show the else branch fires.
[30 min] Tasks 1 + 2. Most of the class. Walk around. Task 1 takes ~10 min; Task 2 is the main challenge. The most common sticking point: forgetting to update the question label when qNum changes.
[10 min] Show 2–3 student quiz apps to the class. Ask them to quiz each other.

💬 Discussion questions

"Why do we need a variable instead of just changing the label text directly?"
"What would happen to the score if you closed and reopened the app? How would you fix that?"
"Name an app on your phone that uses a score or counter — how do you think it works?"

🧰 Resources

App Inventor: ai2.appinventor.mit.edu
Free sounds: freesound.org
Free images: flaticon.com (PNG icons, free with attribution)