Add 10 guided practice levels for melody, rhythm, geometry, and Phrase Maker

[stutijain2006]

This PR adds a full guided practice flow with 10 levels in Music Blocks so students can move step by step from simple block arrangement to creating their own music and visual patterns.

This work was done to make practice problems more meaningful for children. Instead of only checking whether some blocks exist, the new levels guide students through actual learning goals and check whether they followed the expected musical workflow.

Credit as well to @ssz2605 for her contribution to this practice-level work and the overall direction of the feature.

Why this was needed-
Until now, the practice experience was limited and did not fully guide students from the basics of Music Blocks toward making their own music.

We wanted practice levels to:

• start with simple block arrangement
• slowly increase difficulty
• teach real music ideas like melody, beat, rhythm, shape, circle division, and pitch over time
• give children enough help without doing the whole task for them
• validate the actual workflow students are expected to learn

What is included in this PR-
Levels added and improved
This PR now supports a guided path up to level 10.
It includes work across:

• melody arrangement levels
• rhythm workflow with Rhythm Maker
• geometry and rhythm levels using repeat, divide, and boxes
• whole-note circle generation
• Phrase Maker based pitch-over-time work with Twinkle Twinkle

Other fixes made during implementation-
While building and testing these levels, a few related issues were also fixed:

• fixed starter block loading issues
• fixed some workspace clearing issues between levels
• added safer handling for some block execution paths
• fixed a large SVG/base64 save issue that could cause a stack overflow during play/save in large drawings
• improved some validation behavior so it matches how students actually build the blocks

Files touched-
Main work is in:

1. PracticeProblems.js

2. PracticeUI.js

3. PracticeValidator.js

4. starter files in js/practice_projects

What can be improved later-
Till now the basic foundation of practice problems using lesson plan is built, once this is approved, it can be extended to various levels building the complete music foundation of children. A lot more lesson plans can be added into the system.

Testing done-

• manually tested multiple levels in the UI

• tested starter workspace loading

• tested validation behavior for new workflows

• tested geometry/rhythm and Phrase Maker based levels

• tested fixes for a few runtime issues found during implementation

• Feature
  A demo video of the working of few levels is attached below -

Screen.Recording.2026-04-05.004737.1.1.mp4

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

mathutils.test.js

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

mathutils.test.js

[Ashutoshx7]

nice works guys
there is some merge conlict

[parthdagia05]

I really loved this idea, and i had a though similar to other guides like, In many modern apps , tutorials use a spotlight walkthrough approach:
The screen dims with a semi-transparent overlay
A cutout highlights the specific UI element (block, button, palette)
A tooltip with an arrow explains what to do (e.g., "Click here to add a note")
The user interacts with the highlighted element to advance to the next step

For Music Blocks, this could look like:
Spotlight on the "Music" palette → "Click here to open the music blocks"
Spotlight on the "Note" block → "Drag this to the workspace"
Spotlight on the "Pitch" block → "Connect this inside the note block"
Spotlight on the "Play" button → "Click to hear your first note!"

This might be more engaging for new user, what are your thoughts on this

[pikurasa]

This might be more engaging for new user, what are your thoughts on this

Something like that could still be done in conjunction to this.

[walterbender]

Like Devin, I am not able to see the button to launch the tutorial either from Firefox or Chrome.

[ssz2605]

@walterbender

This is the button to launch the tutorials ( I will be soon sharing the link of the full implementation)

[walterbender]

For some reason that button is not appearing when I open your branch

[ssz2605]

@walterbender It might be a caching issue. Could you please try opening it in incognito mode or clearing the browser cache? That might help in making the button visible.

[walterbender]

Unfortunately that didn't help either.

…

On Sun, Apr 5, 2026 at 7:58 AM Shreya Saxena ***@***.***> wrote: *ssz2605* left a comment (sugarlabs/musicblocks#6488) <#6488 (comment)> @walterbender <https://github.com/walterbender> may be in incognito mode you can try — Reply to this email directly, view it on GitHub <#6488 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6PXYO3SWQYR2ZNFWVGUXL4UJC5TAVCNFSM6AAAAACXM2G5J2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DCOBYG43TOMBXGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Walter Bender Sugar Labs https://www.sugarlabs.org <http://www.sugarlabs.org>

[ssz2605]

@walterbender okay I will check once if there are any issues from my side

[Ashutoshx7]

@walterbender It might be a caching issue. Could you please try opening it in incognito mode or clearing the browser cache? That might help in making the button visible.
i tried it locally

Screencast.from.2026-04-05.17-59-59.mp4

i am still going through the pr
but it seems to not adapting to dark mode and also if possible refinee the ui a bit to feel more native to musicblocks
just some final touches

[ssz2605]

@walterbender It might be a caching issue. Could you please try opening it in incognito mode or clearing the browser cache? That might help in making the button visible.
i tried it locally

Screencast.from.2026-04-05.17-59-59.mp4
i am still going through the pr but it seems to not adapting to dark mode and also if possible refinee the ui a bit to feel more native to musicblocks just some final touches

@Ashutoshx7 Thanks for the review will work on it!

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[stutijain2006]

All the ES Lint and others errors are solved, just one Security Scan error is remaining, I tried all the possible ways but some issue with package update in package-lock.json is coming due to which security scans are failing right now. If anyone knows how to solve this error, do let me know this.

[Ashutoshx7]

All the ES Lint and others errors are solved, just one Security Scan error is remaining, I tried all the possible ways but some issue with package update in package-lock.json is coming due to which security scans are failing right now. If anyone knows how to solve this error, do let me know this.

HY security scans is fixed re run it should works fine
and also take a look there seems to be some merge conflict