thomaspark / flexboxfroggy Goto Github PK
View Code? Open in Web Editor NEWA game for learning CSS flexbox ๐ธ
Home Page: https://flexboxfroggy.com
License: MIT License
A game for learning CSS flexbox ๐ธ
Home Page: https://flexboxfroggy.com
License: MIT License
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');
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.
There are a few new German translations left to do.
In https://github.com/thomaspark/flexboxfroggy/blob/gh-pages/lang/de/index.html#L25:
In https://github.com/thomaspark/flexboxfroggy/blob/gh-pages/js/messages.js:
Can someone help with these? (@tfrommen ๐)
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
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.
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
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!
Would be nice to provide a solution/explanation for anyone who simply cannot figure one out ;-)
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.
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?
I didn't know where to add a comment.
This is awesome. Thanks!
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?)
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.
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!
There are a few new Portuguese translations left to do.
In https://github.com/thomaspark/flexboxfroggy/blob/gh-pages/js/messages.js:
@mvtenorio, mind helping out with these? ๐
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)
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
There is no level for wrap-reverse value, so last level looks confusing.
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!
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.
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.
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.
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
So I assume 1 is the correct answer for the order, however entering 2 or 3 works too?
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
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:
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.
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.
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.
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.
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.
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.
How to reproduce bug
Aside: Thanks for this project!
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.
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>
.
Great Job!!! this is awesome.
I think your should require semicolons in order to to solve the levels or at least a warning.
Thanks
Awesome game. Perfect for checking our skills. ๐
An harder mode, without saying which properties should be used would be great!
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.
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.
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...".
In docs.js line 165.
Stops execution of js and seems to break hover tooltips.
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?
subj
Do a tag and release it.
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!
Would be A+ to have a readme:
Also, this thing is super awesome ๐
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.