## [Enhancement] Unlock “Next Lesson” Button After Successful Submission #160

Closed
opened 2026-05-17 22:27:57 +00:00 by enjin2310 · 1 comment

Classification

Type: UX Enhancement
Priority: High
Component: Playground Interface / Lesson Progression

Summary

After a user submits code in any playground, there should be an option to proceed directly to the next lesson. Currently, users must manually navigate back to the lesson list and select the next item, which interrupts learning flow and reduces interactivity.

Current Behavior

  • When the user clicks Submit, the playground runs tests and displays results.
  • Regardless of pass or fail, the interface does not provide a direct way to move forward.
  • Users must manually scroll or click through the sidebar to find the next lesson.

Expected Behavior

  • Upon successful submission (test passed), a “Next Lesson” button should appear.
  • The button should be clearly visible near the output or notification area.
  • Clicking it should automatically load the next lesson in sequence without requiring manual navigation.

Benefits

  • Improves user experience and lesson continuity.
  • Reduces friction between learning steps.
  • Encourages engagement by rewarding progress with immediate access to the next challenge.

Suggested Implementation

  1. Add a conditional button that appears only after a successful test result.
  2. Include a tooltip or message like:

    Great job! Ready for the next lesson?”

  3. Integrate with the lesson sequence logic to load the next lesson automatically.
  4. Optionally, allow users to toggle this feature in settings for manual control.

Example UI Flow

PASS: All tests passed!
[Next Lesson →]

Additional Notes

This enhancement complements the previous suggestion for post-submission notifications, creating a smoother and more interactive learning experience across all playgrounds.

### Classification **Type:** UX Enhancement **Priority:** High **Component:** Playground Interface / Lesson Progression ### Summary After a user submits code in any playground, there should be an option to **proceed directly to the next lesson**. Currently, users must manually navigate back to the lesson list and select the next item, which interrupts learning flow and reduces interactivity. ### Current Behavior - When the user clicks **Submit**, the playground runs tests and displays results. - Regardless of pass or fail, the interface does not provide a direct way to move forward. - Users must manually scroll or click through the sidebar to find the next lesson. ### Expected Behavior - Upon successful submission (test passed), a **“Next Lesson”** button should appear. - The button should be clearly visible near the output or notification area. - Clicking it should automatically load the next lesson in sequence without requiring manual navigation. ### Benefits - Improves user experience and lesson continuity. - Reduces friction between learning steps. - Encourages engagement by rewarding progress with immediate access to the next challenge. ### Suggested Implementation 1. Add a **conditional button** that appears only after a successful test result. 2. Include a tooltip or message like: > “✅ Great job! Ready for the next lesson?” 3. Integrate with the lesson sequence logic to load the next lesson automatically. 4. Optionally, allow users to toggle this feature in settings for manual control. ### Example UI Flow ✅ PASS: All tests passed! [Next Lesson →] ### Additional Notes This enhancement complements the previous suggestion for post-submission notifications, creating a smoother and more interactive learning experience across all playgrounds.
Owner

Implemented in spikersoft-angular PR #26.

After a Challenge lesson's tests all pass, the output area now shows a "Next:

Implemented in spikersoft-angular PR #26. After a Challenge lesson's tests all pass, the output area now shows a "Next: <title> →" button that loads the next prerequisite-satisfied lesson directly. Gating lives in a `nextLessonCta` computed (lesson mode + not a tutorial + all tests passed + an unlocked next lesson exists) and clears on navigation. Tutorials are excluded since they already advance via the tutorial pane. Applies to all shared-runner playgrounds (C#, Python, JS, SQL, C, C++), with EN/ES strings and unit tests (pass / failing / last-lesson / tutorial cases).
Sign in to join this conversation.