flexboxfroggy

flexboxfroggy copied to clipboard

Only works clicking on the next button.

Tested on Firefox and Chrome.

I've had a quick look at this, the problem appears to be because there are two valid answers

flex-direction: column-reverse;
align-content: space-between;
flex-wrap: wrap-reverse;
justify-content: center;

and

flex-flow: column-reverse wrap-reverse;
align-content: space-between;
justify-content: center;

Everything works as expected if you use the 4 line answer, however when using the 3 line answer the game.js does a check when the user presses enter to check the number of lines is the same as the expected answer and as it is less the button click is not triggered.

This could be fixed by adding a silent check each time the user presses enter incase it has been solved in less lines than expected however calling the check() function would cause the analytics functions to be called more than expected. As far as I can tell this question is the only one with multiple different answers so the problem shouldn't appear anywhere else...

Ahhh that explains it, thanks for the investigation @hedgecox.

This behavior is intended to avoid negative feedback when someone is simply entering a new line, which could get annoying and discouraging.

One approach is to have users hit enter a few times, and when the max lines is reached (even with blank lines), the answer is checked. This could be coupled with an alternate key combo to force checking, like shift-enter.

The second approach, which I'm leaning towards, is what @hedgecox suggests. The silent check would avoid the negative feedback shake, and only mark it if it's correct. It could help in another levels too if someone keeps multiple properties on one line, which isn't advised but could happen.

Turns out you can already hit control-enter or command-enter to force submit.

I hit this snag too! After all, we've learned flex-flow as a shorthand, so I'd expect the answer to be accepted as well. 😄