Tweaks to the question bank in Asking-questions workshop

[kevinmartinjos]

We have a problem bank at the end of this page. I found it difficult to get the trainees to ask questions based on some of them - they had the tendency to try and answer the question right away. Listing here the questions that I remember we had trouble with:

1. "There's a transition on this text, why isn't it working?"

   • "Transition" is probably not the right word, because CSS transitions seem to be a completely different beast than styles applied on :hover.
   • It is not clear what "working" means - perhaps we could have describe what was supposed to happen?
   • My suggestion: "This text is supposed to fade into nothing. Why is it flickering out and breaking the layout instead?"

2. "Before running Lighthouse, write down the errors it will give you on this page. Now validate the HTML."

   • They just ran lighthouse and listed the errors before I had a chance to intervene :D
   • I personally think the phrasing is rather obvious - do not run light house yet, make predictions first. I think trainees read "lighthouse" and jump into just executing it since they are familiar with the tool.
   • My suggestion: Remove references to lighthouse. "What accessibility issues can this page have?". This way it's easier to get trainees to make predictions and elicit ways for them to test their predictions.

3. "Why isn't this paragraph a grid item?"

   • Now it was my turn to misunderstand the question. I read it as "Why isn't this paragraph styled as a grid item - why is it not in a table-like layout with borders?". Answer: because it is not styled as a grid item. It's just a list.
   • A trainee kindly pointed out that the question probably meant "Why did we choose not to use grids here"?. Answer: because we wanted a list, not a column layout thingy.
   • I still can't decide between the two interpretations.

[illicitonion]

1. "There's a transition on this text, why isn't it working?"

   • "Transition" is probably not the right word, because CSS transitions seem to be a completely different beast than styles applied on :hover.
   • It is not clear what "working" means - perhaps we could have describe what was supposed to happen?
   • My suggestion: "This text is supposed to fade into nothing. Why is it flickering out and breaking the layout instead?"

I also saw this really confuse folks, and send them down some rabbit-holes. I'd recommend we move this to be the last question.

However, I did really value it as an example of a badly phrased question. In my group we had a discussion about how it doesn't make clear its expectations, and how if we were asked this question we'd push back and have the asker clarify their expectations. Maybe we could somehow do this in the exercise? Have the question phrased without expectations, but have some way of revealing a better version of the question?

2. "Before running Lighthouse, write down the errors it will give you on this page. Now validate the HTML."

   • They just ran lighthouse and listed the errors before I had a chance to intervene :D
   • I personally think the phrasing is rather obvious - do not run light house yet, make predictions first. I think trainees read "lighthouse" and jump into just executing it since they are familiar with the tool.
   • My suggestion: Remove references to lighthouse. "What accessibility issues can this page have?". This way it's easier to get trainees to make predictions and elicit ways for them to test their predictions.

+1

3. "Why isn't this paragraph a grid item?"

   • Now it was my turn to misunderstand the question. I read it as "Why isn't this paragraph styled as a grid item - why is it not in a table-like layout with borders?". Answer: because it is not styled as a grid item. It's just a list.
   • A trainee kindly pointed out that the question probably meant "Why did we choose not to use grids here"?. Answer: because we wanted a list, not a column layout thingy.
   • I still can't decide between the two interpretations.

Yeah, this question confused my group too... I'd be tempted to just remove it tbh, or make it a multiple choice question of things that may be true for the paragraph?

[SallyMcGrath]

Hello, thanks so much for this. Here is some context, that you may or may not find useful.

Some of the questions are meant to be a little bit confusing (not totally confounding) to stage these discussions. These are common questions trainees used to ask on our old course, but the goal is not for them to perfectly follow the directions and find the answer without friction. Not at all. This would seriously mislead the trainees as this feeling of not really getting stuff, when it first happens to them when they are studying alone, is very demotivating. It needs to happen in class with support. But the questions themselves shouldn't be a complete blocker either. We can swap in new questions if you have them. Open a PR to https://github.com/CodeYourFuture/CYF-Workshops

Let me look at the questions discussed here.

(Incidentally, I put an answer hint on each question as the id. For example the id of the transition question is #boolean. )

1. The transition - that is a transition - animation of the change between two states is called a transition and the rule is written but not applying. This is because the transition rule is applying to opacity (gradient value) but the text is already being hidden on/off with a display rule (boolean). Booleans can never be transitioned. They can see this by using the force state panel in Devtools and looking at the computed vs declared styles. Show/Hide juddering transitions is a common beginner CSS fail. I like your rephrase. Newbies don't tend to ask that - they tend to ask why isn't it working, but we should rephrase to be more useful. Or we can remove it entirely.

2. Yes, just running Lighthouse first is what they all do, and that's one thing to confront in the workshop. We go over this again in several more workshops where they predict and then explain. Secondly, Lighthouse doesn't validate HTML, which they all believe it does, and this is important to find out at some point. It's ok for them get stuff wrong -- the workshop is to get stuff wrong together in where it can be corrected.

3. The paragraph isn't a grid item because it's not a direct child of a grid container. How would you phrase this question? It is extremely straightforward, perhaps deceptively so. It's not intended to be. It's very common for trainees to not understand that only the direct children of a grid container become grid items, then they add (pointless) divs and break their layouts, which is why I added this question. It's one some of them will encounter in the wireframe project.

[illicitonion]

The transition - that is a transition

I don't think any of the learners in my group had ever used a CSS transition before. So their first step was to learn about them. And then to try to reproduce the problem outside of the page. I think they got so hung up on not knowing about transitions (and the question was pointing them so much at that thing they didn't know), that they were blind to the display property.

I think either either the rephrasing, or ideally some way of guiding them towards the rephrasing, makes sense.

It is extremely straightforward, perhaps deceptively so. It's not intended to be.

This was my experience. All of the learners in my group basically went "Obviously it's not, it's not in a grid, why would anyone ask this question? There must be something we're missing." and then spent a while trying to understand what nuance they didn't understand (spoilers: there was none).

[SallyMcGrath]

Oh it comes from when they do a dropdown menu. That's when this comes up. But I'm definitely not married to this question as they won't hit it until the Piscine in the new programme. I'd be happy to replace it - please make a suggestion.

The grid item question I am a bit more keen on. It is currently confounding people on the wireframe project in code I just reviewed 😂 Your learners are unusual. It comes up in literally every new class I have ever taught at CYF.