thomaspark / flexboxfroggy Goto Github PK

There are a few new German translations left to do.

In https://github.com/thomaspark/flexboxfroggy/blob/gh-pages/lang/de/index.html#L25:

• "Level"

In https://github.com/thomaspark/flexboxfroggy/blob/gh-pages/js/messages.js:

• "Reset"
• "Are you sure you want to reset the game?\n\nYour saved progress will be lost and you'll be sent to the start of the game."

Can someone help with these? (@tfrommen 😉)

Can the code be commented whenever you have some to do so?

I love love this tutorial...my only concern is the animated froggies did not let me concentrate mentally on how to move them around. I personally would have done better without the animation.

Hi Thomas,

Flexbox Froggy is insane, it's really good. I'd like to help with the Spanish translation, Do you think it's possible?

Although it is not bad to let user practice more by typing property key on their own,
click to fill would somehow save a lot of time and give user one option to make their learning smoother than before.
How do you think? If it is good, I am willing to contribute

It's known that some browsers (e.g. IE11) don't fully support flexbox and/or support an earlier specification of flexbox.

While playing this game, it would be nice to know, at any point, what the browser support is for each flexbox feature. If there's a particular feature that needs a workaround, or performs differently, it would be nice to know.

Conversely... if all of these basic flexbox features are fully supported, even in IE11, then at least there should be a message indicating that too!

thx

This is not an issue. It's more like a suggestion.

Have you thought in show the level with a little label, at least with a hover or tooltip, but I think as a labeled list should be better.

In this way. The game would not be only to learn it'd be useful as reference when you want to check something in special or want to re-check something which already achieved.

Would be A+ to have a readme:

1. Better visibility in the repo.
2. Can outline build steps, contribution guidelines, license etc.

Also, this thing is super awesome 👍

Is there a way to play this game more than once? Reloading and clearing out the storage doesn't seem to make a difference. Every level is always already completed.

Issue: Both level 18 and 20 automatically switches to some non-English language even after English is selected from the bottom of the page.

Reproduce: 1) Visit flexboxfroggy.com/#en 2) Complete levels up to 17 3) Notice that lvl-18 automatically switches to a non-English language. Note: Proceeding to lvl-19 automatically restores the language back to English.

Screenshot: http://i.imgur.com/0DSWfep.png

Instead of having to press submit every time to apply the styles and check your work. It would be beneficial if the styles auto applied allowing the learner to see their work without having to submit.

I suppose this is related to #5. At times I wanted to be able to choose whether or not the help text appeared on the page. Being able to hide the help text would make it clearer whether or not the relevant rule had been learned.

There is no level for wrap-reverse value, so last level looks confusing.

There is an error when loading page.
Seems to be happening only on Chrome and recently (about a week ago).

Uncaught ReferenceError: Parse is not defined
    at game.js:1

Parse.initialize("FwVMmzHookZZ5j9F9ILc2E5MT5ufabuV7hCXKSeu");

Browser: Chrome Version 60.0.3112.78 (Official Build) (64-bit)
OS: macOs Sierra 10.12.4

The "Next" button-like-div which must be activated after completing a level cannot be reached by keyboard. Easiest and most comprehensive fix is to make it (and all other <div class="button">) into a proper <button>.

Maybe it's some 3rd party lib, or a plugin in my browser but it seems to be broken on Fx. Using 46.0.1.

In level 15, if I use any non-zero integer after order:, such as order: 1;, the red frog goes to the right-most spot, while the lily pad stays to the very left. If I use order: 0;, of course, it stays in the same place, second from the right.

Macbook Pro, v 10.11, Chrome v 48.0.2564.109

I like it. If you can depict direction too, you can differentiate row from row-reverse. Not sure how it can be implemented, and will have to make sure the aesthetics fit and aren't too distracting, but I'm definitely keen on the idea.

Would be nice to provide a solution/explanation for anyone who simply cannot figure one out ;-)

I am a student at Wyncode Academy.

Our instructor Auston Busen suggested your awesome game as a way to learn Flexbox.

At level 14, I answered correctly and pressed "next".

The language changed to Hungarian as described here.

I answered correctly and pressed "next" again. The language remained in Hungarian.

I pressed the "English" link at the bottom. Still Hungarian. I pressed the "French" link, and the language changed to French. I manually entered http://flexboxfroggy.com/#en into Chrome's location and still the language was Hungarian.

I finally tried pressing "Magyar" and then "English" and the language was then in English.

Thanks for making Flexbox Froggy!

subj

How to reproduce bug

1. Complete any level (1~23)
2. Quickly go to next level; it works even after frogs begin to move a bit
3. Wait a bit
4. Level is automatically completed.

Aside: Thanks for this project!

Learning (and recalling) flexbox layout properties with Flexbox Froggy is fun!

Now grid layout is here!
http://caniuse.com/#search=grid
https://css-tricks.com/snippets/css/complete-guide-grid/

And it is already can be used with @supports (display: grid) {}

It would be great to adapt Froggy to the new css layout module or make a new project, e.g. Grid Giraffe with variable neck sizes!

Level 15,
I expected order: 1; (or order: 0;) to move the red frog to the first lilypad.

To be sure, order: 5; does put the red frog on the 5th lilypad (ie, nothing is reversed).
However any other value for order, keeps the red frog on the 4th (starting) lilypad!
I cannot get it to move to 1st, 2nd, or 3rd lilypad with order: 1;, order: 2;, or order:3; or order:0;.

All other levels work fine for me (though level 24 vexed me with wrap-reverse).

Am I just missing something obvious ?
I'm using chrome, on win 7, in full screen.

I think it's unreasonable to expect anyone to memorize all of the properties and their values in time it takes to go through first 23 steps.

It ends up being quite frustrating to break one's train of thought and state because one has to go back and look up property or value one might try.

For things like align-content, there is no mention that stretch is the default. It would be nice to add on the attribute descriptions that stretch is default.

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?)

Hi there,

First of all big thanks for this great project, it helped me and a lot of people I know.
For example, my girlfriend who is currently learning HTML and CSS with no computer science or programming background at all. This is the problem I would like to discuss, in level 14 the term "Integer" is used, probably because we engineers tend to not think too much about it. I would love to see a little explanation added for what integer means in this overlay.

If it is in your interest I would add a PR for this.

Have a nice day and thanks again for this great project!

In docs.js line 165.

Stops execution of js and seems to break hover tooltips.

None of the existing levels is using flex-grow or flex-shrink. It may be a good idea to use these more advanced features too (it may be harder to visualize them with frogs though)

So I assume 1 is the correct answer for the order, however entering 2 or 3 works too?

There are a few new Portuguese translations left to do.

In https://github.com/thomaspark/flexboxfroggy/blob/gh-pages/js/messages.js:

• "Reset"
• "Are you sure you want to reset the game?\n\nYour saved progress will be lost and you'll be sent to the start of the game."

@mvtenorio, mind helping out with these? 😄

Awesome game. Perfect for checking our skills. 👍

An harder mode, without saying which properties should be used would be great!

The froggies are a bit fuzzy on my monitor, since they're PNGs. These little buddies are perfect for SVG, composed of simple shapes and flat colors. It'll make the filesize a little smaller, too.

This is a really awesome tutorial, good job, thanks so much!

The only suggestion is warming up to level 24 combined concepts, especially wrap-reverse. That's pretty intense!

I just completed the game and it is very informative. I like how the challenges get progressively more difficult, while maintaining the option for help with the hovers, you really did a good job of it!

The thing with learning something new is that there is no way of remembering this stuff without repetition & at the end of the game, the user is told that they have done well and are sent on their way, my first feature request would be a cheat-sheet that they can download, to help them remember what they have learned.

It would be good if the contributors could make one that is frog themed. Or, with the authors permissions, we could add links to an existing cheat-sheet such as one of the following:

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://jonibologna.com/flexbox-cheatsheet/
• http://yoksel.github.io/flex-cheatsheet/

Secondly, even if the user gets the correct answer they may not understand the logic, that is why websites such as Code Academy and Udacity have answer text / videos respectively, to explain the logic behind the answer.

Maybe you could have an explanation of the answer shown once the user has answered correctly, just to walk them though the logic.

I realise that I have touched on a lot of points here & I would quite happily be a contributor to your project, I'm just putting my thoughts on the table.

I didn't know where to add a comment.
This is awesome. Thanks!

Just spotted this missing Japanese string while working on the language menu:
https://github.com/thomaspark/flexboxfroggy/blob/gh-pages/js/messages.js#L75

@ginpei, would you be able to add it?

Hi,

Congratulations for this excellent project 🎁

I made it to the last lvl, 24 of 24, but didn't notice the validation message ("You win! Thanks to your mastery of flexbox, you were able to bring all of the frogs to safety.") for I was focused on the frogs themselves, in the right pane.

It could be nice adding a little completion animation when the game is over.

For level 19 & 20, using flex-direction: column; or flex-direction: column-reverse; has the same effect in terms of frog-lilypad color matches, but only the former is accepted as a correct answer.

The link to this GitHub overlaps the next button on iPhone 5s. This may be one of the only issues making the game unplayable on mobile.

Great Job!!! this is awesome.

I think your should require semicolons in order to to solve the levels or at least a warning.

Thanks

ReferenceError: Firebase is not defined http://flexboxfroggy.com/js/game.js:1:5

var firebase = new Firebase('https://blinding-heat-5896.firebaseio.com/web/data');
var analytics = firebase.child('analytics');

Can you make a color-blind / color-deficient mode? It's extremely difficult for some people to see the difference between the red and green frogs and lilly pads.

Thanks for considering! Excellent learning resources.

When looking at the container for code, there seems to be a hairline gap at the bottom of the code lines. Adding height: 100% to the .line-numbers class seems to fix this.

I wanted to post this here in the event that it was helpful. Happy to make a PR if desired.

Without height: 100%:

With height: 100%:

Do a tag and release it.

The MIT license present in this repo only mentions software and documentation. What about the images? If I stole them for some other project, would that be okay? A small parenthetical phrase would suffice: "...to any person obtaining a copy of this software, included media files, and associated documentation files...".

When you hover over align-self in level 16, the help text reads:

Aligns a flex item along the main axis, overriding the align-items value.

If I'm not mistaken, align-self aligns an item along the cross axis, just like align-items does.