flexboxfroggy

flexboxfroggy copied to clipboard

Now that styles are auto applied, it would be beneficial to have some type of indication that the style is invalid. Otherwise the learner is left confused on why their style is not being applied.

For example a incorrect style that looks correct on first glance: flex-direction: row-reversed; (An error I make all too much.)

A problem like that would be solved by some type of indicator that a line in invalid. (Perhaps an icon to the right of the invalid line?)

Eventually I'd love to parse the answers and add some tailored, localized hints for common errors (like row-reversed). I'm collecting some analytics data on that.

In the meantime, minor improvements could still be made to the feedback. There's subtle feedback in that the "Next" button changes from a disabled to active state. Maybe the color could also be changed from red to green when the level is solved.

I did notice that the next button changes state, but I wonder if that is too subtle of a feedback. (Especially for beginners.) Which is why I think some way of highlighting the offending line would be helpful.