Week 4 Day 2 Challenge — Mini Quiz Flow

1. Build this in Design Mode first

STEP 1

Add two more screens so the app has three total: screen1, screen2, screen3.

screen1

Type	ID	Text
Label	`startLabel`	Ready?
Button	`startBtn`	Start Quiz

screen2

Type	ID	Text
Label	`questionLabel`	What is 2 + 2?
Button	`correctBtn`	4
Button	`wrongBtn`	5

screen3

Type	ID	Text
Label	`resultLabel`	Result
Label	`scoreLabel`	Score: 0
Button	`playAgainBtn`	Play Again

Draw the flow on paper first: three boxes, one arrow per button.

2. Switch to Code Mode

STEP 2

Copy this starter code into Code Mode and fill in the numbered STEPs.

// SETUP (already works — do not edit)
var score = 0;

// STEP 1: When startBtn is clicked, go to screen2.


// STEP 2: When correctBtn is clicked: add 1 to score, display it in
// scoreLabel as "Score: " + score, set resultLabel's text to "Correct!",
// then go to screen3.


// STEP 3: When wrongBtn is clicked: do NOT change score, set resultLabel's
// text to "Wrong!", then go to screen3. (scoreLabel should still show the
// current score, even though it didn't change this round.)


// STEP 4: When playAgainBtn is clicked, go back to screen2 so the user can
// answer again.

3. Check yourself

STEP 3

Start on screen1, answer correctly, and confirm scoreLabel goes up on screen3.
Click playAgainBtn, answer wrong this time, and confirm the score does not go up — but the app doesn't get stuck either.
Play a full round twice in a row. Does the score keep counting across replays, the same way visitCountLabel did in tonight's demo?
Try it for real before checking the answer key.

Answer key

var score = 0;

// STEP 1
onEvent("startBtn", "click", function() {
  setScreen("screen2");
});

// STEP 2
onEvent("correctBtn", "click", function() {
  score = score + 1;
  setText("scoreLabel", "Score: " + score);
  setText("resultLabel", "Correct!");
  setScreen("screen3");
});

// STEP 3
onEvent("wrongBtn", "click", function() {
  setText("resultLabel", "Wrong!");
  setScreen("screen3");
});

// STEP 4
onEvent("playAgainBtn", "click", function() {
  setScreen("screen2");
});