This adds a new Panels level type. This type of level can provide a series of "panels" of information.

In this initial implementation, each panel contains one large image and one piece of markdown text. The user presses "Next" to go through the panels, "Continue" to go to the next level from the final panel, and can also use some bubbles at the bottom to navigate between the panels.

If useful, this level type can be made more flexible, to support a wider variety of content types and layouts. It's currently supported for Lab2 progressions, though could be supported in legacy progressions as well.

Authoring is currently done via JSON, and is quite simple, for example:

    "level_data": {
      "panels": [
        {
          "imageUrl": "https://images.code.org/image0.png",
          "text": "Nice work!  You just learned how to **Play a sound**."
        },
        {
          "imageUrl": "https://images.code.org/image1.png",
          "text": "Did you know there are *more* features available?"
        }
      ]
    }

It's used in one level so far: https://studio.code.org/s/music-intro-2024/lessons/1/levels/8.

Background

I was pondering a new kind of instructional level for Music Lab that might address some of our discussed needs:

• We would like to give rich explanations to students, while keeping level-specific instructions crisp and actionable.
• We know we have one or two points in our onboarding where we'd like to give students some additional context, and have currently earmarked them as video levels.
• We're increasingly concerned that students aren't watching videos. This has been discussed a lot during and post Dance Party: AI Edition.
• I pitched this same type of level for Dance Party: AI Edition and curriculum seemed quite interested.

Long ago

Funnily enough, the last time I built something very similar to this was all the way back in 2007, when there was a last minute scramble and I pitched, prototyped and started building the Inside Xbox live news feed feature for the Xbox 360. Inside Xbox provided a bunch of panels that the user could move between, with a variety of content types supported over time, including images, text, and video. It was easy for the content team to author new content daily.

Here's a screenshot with the entry button, that I found: