Widget Library

Score Widget

4 min readUpdated

Display scene-level or lesson-level progress as points or percentages.

The score widget displays progress. Use it when the learner should see how they are doing in the current scene or across the lesson.

Where the settings live

Select the score widget on the canvas and click the floating ⚙ Configure button to open its setup dialog — the scope, the format, and the label all live there, next to a live preview. The right sidebar keeps only Style & Layout (font, colors, border radius, size and position).

Settings to know

In the ⚙ Configure dialog:

  • Scope chooses whether the widget shows scene score, lesson score, or a single grading group.
  • Format chooses how the score is displayed.
  • Label sets the text before the score.
  • Show Label controls whether that label appears.
  • Nothing graded decides what the widget shows while there is nothing to score yet — no graded questions in its scope. Show zero shows 0, 0%, or 0/0 (depending on the format); Hide shows nothing at all until there is a score to report. The score that comes with a lesson's ending is set to Hide, so an ungraded story never ends on a meaningless 0.

Group scope

With Scope set to Group, pick the grading group to show. Groups belong to the questions in them, so renaming a group in Manage groups moves every score showing it to the new name, and deleting a group switches those scores back to the whole-lesson score. If a Group score points at a group no question uses any more, the publish check warns you ("Score Shows a Group No Question Is In") — it would only ever read 0.

A score per group is how an ending shows each skill separately (Fractions: 2/2, Decimals: 1/2): see Score each skill separately with grading groups.

Write the Label as a name, not a sentence

Berdee adds the colon between the label and the number, so type Your score and learners read Your score: 8. Type Your score: and they read Your score:: 8.

Good labels are short and read as a name for the number: Your score, Points earned, This round, Total. Leave off the colon, the dash, and the trailing space — Berdee handles the join, on the canvas and in the lesson alike, so what you see while authoring is what learners get.

Turn Show Label off when the number can stand alone, such as a score chip in the corner of a game scene.

Sizing a score widget

A score widget sizes itself around its text:

  • Drag a corner to scale the whole readout — the number and its padding grow together, and a badge shows the text size as you drag.
  • Drag a side handle to set how wide the box is.
  • Height is automatic. The readout is one line tall at its text size, so changing the Font Size setting resizes the box.

Set the width for the score learners will actually reach, not the one showing now. The value changes as the lesson runs — 0 becomes 100% or 18/20 — and the box does not grow to follow it. A label that runs past the width is trimmed with an ellipsis, so give a long label like Total points earned room, or shorten it and let the number do the talking.

Unlike answer widgets, a score widget has no minimum size — it is something learners read, not something they tap, so a compact chip tucked in a corner is perfectly fine. (A timer is different: learners press it to start and pause, so it keeps a minimum tap size.)

Score widgets you made before this update keep their exact size until you resize one or change its font size.

Grading setup

The score widget is not itself graded. It reflects the grading decisions made on other widgets — see Grading and Score for how those decisions add up.

How to set up the content

Choose the score scope based on what you want the learner to feel. Scene score works well for immediate feedback. Lesson score is better for cumulative progress and review.

Useful setting combinations

  • Scene scope + label shown:

Best for This challenge or This scene feedback right after submission.

  • Lesson scope + label shown:

Best for ongoing Total score or Lesson progress displays.

  • Percentage display + feedback text:

Best when you want the learner to understand performance at a glance without doing the math.

Strong use cases

  • Showing quiz results after a submit action.
  • Reinforcing progress in a gamified lesson.
  • Displaying cumulative performance before a final reflection.
  • Keeping a visible score through a multi-scene game or review — put it on a layout and apply the layout to every scene of the game.
  • Adding up points on a quiz-game board students keep coming back to: a Lesson score in Points format, with harder questions worth more. Step-by-step: Make a game board students pick questions from.

The score updates the moment a learner answers

A score widget is live: it changes as soon as a question is answered, not when the learner presses Submit. On a scene with a Submit Button that means a score on the same scene gives the answers away — a learner can pick an option, watch the number move, and switch answers until it goes up.

When correctness should stay private until Submit, put the score on the scene after the Submit — a feedback scene, or the lesson's ending — instead of beside the questions. Keep a live score on the question scene only when instant feedback is the point, like a practice game.

Great pairings with other widgets

  • Pair score with button so the learner moves on to a scene that shows their results.
  • Pair it with timer for score-plus-speed activities.
  • Pair it with multiple choice, text input, or any graded widget set.
  • Pair it with text for encouraging feedback like "You improved from the last round."
  • Pair it with **word search** for vocabulary review. Word search has its own _Per word_ vs _Full completion_ scoring mode that controls whether each find credits points immediately or only when every word is found.

Learn by doing

Was this article helpful?