Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Diner

flukeout.github.io

Post reply on HN
Print view View original

111–120 of 121 posts

Re: CSS Diner

#111

Post by samelawrence »

shittyanalogy wrote: post #71

Very cool. Possible bug: on level 19, :nth-last-child() doesn't seem to work for selecting the first child in a set of children in firefox. Running $("bento:nth-last-child(2)").length is coming up 0 in the console as well. edit: these work though :/ bento:nth-last-child(even) bento:nth-last-child(1n+2) bento:nth-last-child(2n+0) edit 2: Ahh figured it out. :nth-last-child doesn't match only nodes that satisfy the sel…

TIL * from CSS where known.previous == didntKnowShit

I learned a lot today. Thanks for posting this in the thread.

Re: CSS Diner

#113

Post by suyash »

wrl wrote: post #89

It is really bugging me that I can't prefix ".table" or "div.table" to any of these, since intuitively that's what I'd do when writing styles.

this is not valid CSS : ".table" or "div.table" since those are elements themselves and not class names. Unless of-course table is a class name then I'm mistaken.

Re: CSS Diner

#114

Post by reshambabble »

Like what you're trying to do here!

It took me some time to figure out what I needed to do. Immediately, when I see "select," I think "click," so I clicked on the item instead of typing in text. Consider saying, "select images by typing in their class below."

Instead of ".classname," give an example. Also consider a pop up tutorial or a guide that shows you what to do on the very first lesson.

The list of lessons is also confusing. There needs to be something that says - this is what you've learned and what you still have to learn. Otherwise it just looks like a strange list of words from a language I don't know.

Also - consider putting the instructions on the left hand side, and putting "Learn CSS!" or something at the top instead of "Select ???." Because I read from left to right, right now I see the image first, an instruction to select something on the image (which I and others will interpret as "click on the image") and then I stop (rather than go all the way across to see the other instructions). If I see the instructions first and know exactly what to do.

Great job on this!

Re: CSS Diner

#115

Post by kremlin »

CoryMathews wrote: post #106
kremlin wrote: post #85

Earlier quoted context omitted.

bento:nth-last-child(4) worked for me. It selects the element that is the 4th child from last. I think the confusion is here: people think that bento:nth-last-child(2) will be the solution because it should select the second-from-last bento element, but what it does is it selects all bento elements which are the 2nd from last children -- and since in the puzzle there is no bento that is second from last, it selects n…

That makes very little sense. Adding the bento: should have removed all the other items from selection. It sounds like you are explaining a selector such as *:nth-last-child(4)

it in fact works the way that 'makes very little sense'.

There is a good reason, though, and it's in keeping with the 'nth-of-type' selector logic: there is a selector that works the way you think, called nth-last-of-type[0]

[0] http://www.w3schools.com/cssref/sel_nth-last-of-type.asp

[sample page I made just for you on my github.io page] http://flanneljesus.github.io/

Re: CSS Diner

#116

Post by chc »

kang wrote: post #75
shittyanalogy wrote: post #71

Very cool. Possible bug: on level 19, :nth-last-child() doesn't seem to work for selecting the first child in a set of children in firefox. Running $("bento:nth-last-child(2)").length is coming up 0 in the console as well. edit: these work though :/ bento:nth-last-child(even) bento:nth-last-child(1n+2) bento:nth-last-child(2n+0) edit 2: Ahh figured it out. :nth-last-child doesn't match only nodes that satisfy the sel…

Came here to report level 19 as well. According to the description on level 18 div p:nth-child(2) selects the second in every So on level 19, to select the first in , div bento:nth-child(1) should work, but it doesn't. However, div bento:nth-child(2) works. So I think a possible bug here?

The description of :nth-child is misleading here. It would only do that if the first two elements in every DIV were P elements. A more accurate description would be "Selects the second element in each DIV if it is a P." The description given there sounds more like :nth-of-type.

Re: CSS Diner

#117

Post by muxxa »

Super idea and execution! I think it needs a few more iterations in a teaching environment to actually make it effective though. I tried running this by someone with absolutely zero css or html experience.

- The instruction (e.g. 'Select the small apples') isn't noticeable enough.

- There needs to be a pause after you get an answer right, so you can work out why you got it right (otherwise you can bang away at random combinations until you get to the next step without any idea what worked).

- Similarly, when you try a wrong answer, there needs to be feedback as to why. E.g. if you try 'bento small plate', when the answer is 'bento #small plate', then there needs to be an explanation as to what you didn't do. This is not trivial to achieve!

- The instructions at the right hand side is visually noisy, and should be hidden until needed, or perhaps presented first (in a modal popup) to give the visitor a heads up as to what they are supposed to be adding to their knowledge.

- Because of the right hand instructions, it's not initially clear that the HTML code is at all part of 'the puzzle'.

You are 90% there, just the last 90% to make it a true gem of a teaching tool.

Re: CSS Diner

#118

Post by chc »

m_mueller wrote: post #81
rickyc091 wrote: post #24

Earlier quoted context omitted.

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.

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.

If you select the right objects, they get lifted up in the air. If you select the wrong objects, they shake.

Re: CSS Diner

#119

Post by m_mueller »

chc wrote: post #118
m_mueller wrote: post #81

Earlier quoted context omitted.

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.

If you select the right objects, they get lifted up in the air. If you select the wrong objects, they shake.

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.

Re: CSS Diner

#120

Post by NKCSS »

I have found two bugs;

Level 17 of 26: Select the small apple and the pickle

Does not accept .table > :last-child, apple.small

does accept

apple.small, pickle

Level 19 of 26: Select the 1st bento:

Does not accept .table > :nth-last-child(4)

does accept: bento:first

Post reply on HN