Studio Design

Configuring an Interactive Rain

4 min readUpdated

Set up an interactive rain game's falling items, timing, end conditions, and scoring in a roomy Configure dialog, opened right from the canvas.

Configuring an interactive rain game

Interactive rain is a fast-paced game where items fall down the screen and learners tap the correct targets while avoiding the wrong ones, often under time or accuracy pressure. Its setup — the falling items, how fast they fall and spawn, whether the game speeds up, the conditions that end the round, and whether it's graded — lives in a dedicated Configure dialog with room to work, instead of being squeezed into the narrow right sidebar.

Opening the Configure dialog

Select an interactive rain game on the canvas. A floating ⚙ Configure button appears just above it.

Click ⚙ Configure to open the dialog. Alongside the settings you'll see a live preview of the game, so you can check the layout while you edit (you can't see the widget itself behind the dialog). The preview is partial by design: it shows the game area and how many correct and wrong items are in the pool, but not the individual items, the lanes, or the live fall animation — those only appear when a learner plays the game. Use Preview to see the real thing (see Preview and Test a Lesson). From top to bottom the dialog has:

  • Scoring — whether tapping the right targets contributes to the score, and which items count as correct. The Scoring switch, Points, and Group work the same for every scorable widget.
  • Content — the falling items, the fall speed and spawn timing, the speed-up settings, the end conditions, the repeat mode, and the number of lanes. With Scoring off, the Correct items picker moves here.

Setting up the content

Work in the Content section:

  • Rain Items — each item is a falling target. Choose whether it uses text or an image, and edit its label or image. Add a text or image item, and use the trash icon to remove one. Give every image item alt text — a short description like "A red apple". Screen readers read it out, so learners who can't see the picture can still tell a right target from a wrong one. The dialog warns you about an image item without one.
  • Fall Speed sets how quickly items move down the screen.
  • Spawn Interval sets how often new items appear.
  • Lanes sets how many vertical paths items can fall in.
  • Speed Up decides whether the fall speed and/or spawn rate ramp up over time or after each correct tap.
  • End Conditions decide what stops the game. You can add more than one; the first one triggered ends the round.
  • All correct selected — the learner has tapped every correct item at least once. Tapping the same item twice doesn't count twice.
  • Incorrect selected — the learner tapped a wrong item.
  • Correct missed — a correct item fell past the bottom without being tapped.
  • All items rained — nothing is left: every item has fallen or been tapped, and none will come back. With Repeat Mode set to All Items this never happens.
  • Timeout — the number of seconds you set has passed.
  • Repeat Mode controls whether items fall again — All Items (every item keeps coming back), Un-clicked Only (an item comes back until the learner taps it once), or No Repeats (each item falls once).

However you set it up, a round with nothing left to fall always ends — with No Repeats, once the last item has fallen or been tapped, even if no end condition fired (for example, a learner missed a correct item under All correct selected). With All Items or Un-clicked Only, items keep coming back, so add a Timeout to make sure a learner who stops tapping still finishes. The dialog warns you when a repeating game has no Timeout.

Each end condition decides the heading on the end screen: All correct selected shows "Great job!", Incorrect selected, Correct missed and All items rained show "Try again!", and Timeout — or a round that simply ran out of items — shows "Done!". These headings are fixed, and they don't change the grade.

Start with a small item pool, then tune the speed, spawn timing, and end conditions until the game feels challenging but readable.

Grading the rain game

Scoring is on by default, so the dialog opens with the shared on/off, points, and group controls already at the top, along with a Correct items picker — select which items count as correct targets.

Grading is all or nothing. A learner earns the full points only if they tap every correct item at least once and never tap a wrong one. A single wrong tap scores 0, whatever your end conditions are — end conditions only decide when the round stops.

If you're using the game purely for practice with no grade, turn Scoring off. The Correct items picker moves into Content, because the correct/incorrect marking still drives the in-game feedback flashes and the end conditions.

Saving your changes

Nothing you change in the dialog affects the widget until you save it. The canvas keeps showing the last saved version while you work.

  • Save applies your Content and Scoring changes to the widget.
  • Cancel throws the changes away and leaves the widget as it was. Pressing Esc, clicking the ✕, or clicking outside the dialog does the same thing. If you've made changes, you'll be asked to confirm before they're discarded, so an accidental click can't lose your work.

What stays in the sidebar

Only Content and Scoring move into the Configure dialog. Style & Layout — the background and item colors, text color, font size, border radius, the correct/incorrect flash colors, and cursor — still lives in the right sidebar, the same as every other widget. So do the game's behaviors/triggers, visibility, and position.

Learn by doing

Was this article helpful?