3 ms·

It took me at least 5 minutes to work out what to do. It is not immediately apparent you have to type in the selectors in the styling box, I thought you had to

It took me at least 5 minutes to work out what to do. It is not immediately apparent you have to type in the selectors in the styling box, I thought you had to click on the animated objects. Pretty cool idea, I found it a little too easy, but as a developer already, maybe I am not the target market. You did manage to throw in a few curve balls like needing to use general and adjacent sibling selectors to select particular elements beside other elements and inside of elements. I think it should get harder a lot quicker, would be cool to see an expert CSS version of this where it starts out hard.

rickyc091 13y ago
Likewise. I kept typing ".plate", until I looked more carefully and realized there was a plate tag. I can see this being used as a teaching tool.
- m_mueller 13y ago
  I did exactly the same. Then I thought the error was that it needs '{' on the same line. The 'aha' moment is funny though. What would be nice as a learning helper: having some display of what was actually selected with the last command. For example little hands displayed on top of the objects would somewhat match the theme.
  - chc 13y ago
    If you select the right objects, they get lifted up in the air. If you select the wrong objects, they shake.
    - m_mueller 13y ago
      I see. My suggestion would be to keep the lift animation, but replace the shaking with something that is persistently visible as long as the selector hasn't changed - this way it would be much easier to make out what has been going on. Also, one could play around with different selectors before actually answering the question.
jtfairbank 13y ago
I'm not sure that making it harder faster is a good idea. It was easy for me as well (for the most part), but I immediately sent out an email to some friends who are trying to learn the web basics. A game like this is a fun way to teach them about css selectors- adding some specific notes about them in the email makes it a really easy lesson.
rythie 13y ago
You can skip ahead, click three lines symbol on the top right and select an exercise.

rickyc091 13y ago

Likewise. I kept typing ".plate", until I looked more carefully and realized there was a plate tag. I can see this being used as a teaching tool.

m_mueller 13y ago
I did exactly the same. Then I thought the error was that it needs '{' on the same line. The 'aha' moment is funny though. What would be nice as a learning helper: having some display of what was actually selected with the last command. For example little hands displayed on top of the objects would somewhat match the theme.
- chc 13y ago
  If you select the right objects, they get lifted up in the air. If you select the wrong objects, they shake.
  - m_mueller 13y ago
    I see. My suggestion would be to keep the lift animation, but replace the shaking with something that is persistently visible as long as the selector hasn't changed - this way it would be much easier to make out what has been going on. Also, one could play around with different selectors before actually answering the question.

jtfairbank 13y ago

I'm not sure that making it harder faster is a good idea. It was easy for me as well (for the most part), but I immediately sent out an email to some friends who are trying to learn the web basics. A game like this is a fun way to teach them about css selectors- adding some specific notes about them in the email makes it a really easy lesson.

rythie 13y ago

You can skip ahead, click three lines symbol on the top right and select an exercise.