spikerj/spikersoft-issues
1
0
Fork 0
Code Issues 196 Pull Requests Actions Packages Projects Releases Wiki Activity

## [Enhancement] Add Post-Submission Notifications and Improved Lesson Navigation in Playgrounds #158

New Issue
Closed
opened 2026-05-17 22:26:20 +00:00 by enjin2310 · 1 comment
enjin2310 commented 2026-05-17 22:26:20 +00:00
Copy Link
Copy Source

[Enhancement] Add Post-Submission Notifications and Improved Lesson Navigation in Playgrounds

Classification

Type: UX Enhancement
Priority: High
Component: Playground Interface / User Interaction

Summary

After submitting code in any playground (Python, JavaScript, C++, etc.), users currently need to manually scroll to view test results. This creates friction in the learning experience, as the feedback is not immediately visible. Additionally, once the user scrolls down to see the test output, returning to the Lessons container to select the next lesson becomes cumbersome and unintuitive.

Current Behavior

  • When the user clicks Submit, the test runs and results appear below the editor.
  • The user must manually scroll down to see whether the test passed or failed.
  • After viewing results, the user must scroll back up and manually locate the next lesson in the sidebar.

Expected Behavior

  • Upon submission, the playground should display a notification or toast message summarizing the test result (e.g., “✅ Test Passed” or “❌ Test Failed”) without requiring manual scrolling.
  • The notification should include a brief summary of the output and disappear automatically after a few seconds.
  • The interface should provide a quick navigation button or auto-focus on the next lesson, improving flow and engagement.

Benefits

  • Enhances user experience by providing instant feedback.
  • Reduces unnecessary scrolling and improves accessibility.
  • Encourages continuous learning by streamlining transitions between lessons.

Suggested Implementation

  1. Add a lightweight toast notification system triggered by test completion.
  2. Include a “Next Lesson” button within the notification or near the output panel.
  3. Maintain accessibility standards (keyboard navigation, screen reader support).
  4. Optionally, allow users to toggle this feature in settings.

Example Notification

✅ All tests passed!
Output: 'cached_value' is None
Next: Lesson 108 – Boolean Logic

Additional Notes

This improvement would align the playground experience with modern interactive learning platforms, making it more responsive and user-friendly for learners.

## [Enhancement] Add Post-Submission Notifications and Improved Lesson Navigation in Playgrounds ### Classification **Type:** UX Enhancement **Priority:** High **Component:** Playground Interface / User Interaction ### Summary After submitting code in any playground (Python, JavaScript, C++, etc.), users currently need to manually scroll to view test results. This creates friction in the learning experience, as the feedback is not immediately visible. Additionally, once the user scrolls down to see the test output, returning to the **Lessons** container to select the next lesson becomes cumbersome and unintuitive. ### Current Behavior - When the user clicks **Submit**, the test runs and results appear below the editor. - The user must manually scroll down to see whether the test passed or failed. - After viewing results, the user must scroll back up and manually locate the next lesson in the sidebar. ### Expected Behavior - Upon submission, the playground should display a **notification or toast message** summarizing the test result (e.g., “✅ Test Passed” or “❌ Test Failed”) without requiring manual scrolling. - The notification should include a brief summary of the output and disappear automatically after a few seconds. - The interface should provide a **quick navigation button** or **auto-focus** on the next lesson, improving flow and engagement. ### Benefits - Enhances user experience by providing instant feedback. - Reduces unnecessary scrolling and improves accessibility. - Encourages continuous learning by streamlining transitions between lessons. ### Suggested Implementation 1. Add a lightweight **toast notification system** triggered by test completion. 2. Include a **“Next Lesson”** button within the notification or near the output panel. 3. Maintain accessibility standards (keyboard navigation, screen reader support). 4. Optionally, allow users to toggle this feature in settings. ### Example Notification ✅ All tests passed! Output: 'cached_value' is None Next: Lesson 108 – Boolean Logic ### Additional Notes This improvement would align the playground experience with modern interactive learning platforms, making it more responsive and user-friendly for learners.
spikerj commented 2026-06-08 22:32:28 +00:00
Owner
Copy Link
Copy Source

Implemented in spikersoft-angular PR #27.

A transient snackbar now fires the moment a graded lesson result arrives — "✅ All tests passed!" or "❌ X of Y tests passed" — so feedback is visible without scrolling to the output pane. Material's snackbar is an aria-live region (screen-reader announced). On a pass with an unlocked next lesson it carries a "Next lesson" action that advances directly (complementing the inline #160 CTA); auto-dismisses after a few seconds. Fires once per submission and only for graded lesson runs (sandbox runs don't toast). Applies to all shared-runner playgrounds with EN/ES strings and unit tests (pass / last-lesson / fail / sandbox / dedup).

Implemented in spikersoft-angular PR #27. A transient snackbar now fires the moment a graded lesson result arrives — "✅ All tests passed!" or "❌ X of Y tests passed" — so feedback is visible without scrolling to the output pane. Material's snackbar is an aria-live region (screen-reader announced). On a pass with an unlocked next lesson it carries a "Next lesson" action that advances directly (complementing the inline #160 CTA); auto-dismisses after a few seconds. Fires once per submission and only for graded lesson runs (sandbox runs don't toast). Applies to all shared-runner playgrounds with EN/ES strings and unit tests (pass / last-lesson / fail / sandbox / dedup).
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#158