Improved course, added step completion, and UI tweaks.
Today, I'll start on making the course more satisfying. I have some ideas from looking at how boot.dev does it and brainstorming.
I'll start by changing the run tests button to "Submit". Each step will have a condition to be met when submitting
This took me almost the whole day, but I've managed to implement the concept of step completion. I can now set completion conditions on each step, and configure separately whether the tests can be run or not.
I will now add a toast that displays the error message or congratulations text on submission.
Done. I modified the style of the buttons a little, so that the user is invited to press the button I want them to press. For example, if they haven't submitted yet, the Submit button is primary, and the next is outlined. After a successful submission, they're the other way around. I also moved the buttons to be above the editor because the toast was getting in the way. But now that I've moved them, I can see that they should've been here all along. With all these changes, it looks so much better and feels so much more satisfying to use.
Next up:
- confetti on successful submission
- ensure all step conditions are correct
- replace "Next" with "Next lesson" or "Chapter x: x x x" if it's the last step.
- a tooltip that displays when hovering over the disabled "Next" button and explains to the user they need to submit first
- fix wrong step loading on refresh
Out of all these, I only finished all the step conditions. It took a tremendeous amount of time as I wrestled with regex and thinking of how to implement checks for every step.
Today I've put in about 12 hours of work, so tomorrow I'll probably take a break.