preactjs / preact-www

:book: Preact documentation website.
https://preactjs.com
MIT License
359 stars 506 forks source link

Tutorial: Add stages to 'Help' button, so it doesn't skip straight to solving #1153

Open rschristian opened 5 months ago

rschristian commented 5 months ago

This has been mentioned a few times in the tutorial discussion, but I noticed we don't have an issue so it's easily forgotten.

We could perhaps introduce "stages" to the help button so that the user gets a couple of hints before getting it solved for them. For example, on the first tutorial page where the user needs to add style={{ color: 'purple' }} and a pair of <em></em>, we might have the "Help" button check to see which (if either) condition is solved and give a prod towards whichever is unsolved. After expending the hints, the button will switch to "Solve" which the user can then use to give up.

rschristian commented 5 months ago

An overlay would be a great idea too: https://github.com/preactjs/preact-www/discussions/815#discussioncomment-6009305