foundersandcoders / morning-challenge-traffic-lights

:vertical_traffic_light: Traffic light callback challenge! :vertical_traffic_light:
9 stars 12 forks source link

clarify code #6

Open rachaelcodes opened 6 years ago

rachaelcodes commented 6 years ago

The complexity of the codebase seems to be making it difficult for students to explain where their functions are passing through the callbacks.

It might be easier to move the blinkLight function and colour variable definitions to another file, or otherwise out of sight, and the 'colour function' more clearly described as being 'a function that first shines that colour's light, then after a minute turns it off and calls any function that was passed as a callback' (or clearer still).

Or, alternatively, is there a more straightforward callback challenge we could use?

finnhodgkin commented 6 years ago

While I agree that the challenge in its current form is not quite appropriate for week 2, I don't think that hiding the more complicated parts is the solution. We're a no frameworks course, and in my opinion that same rule should apply to our own challenges and workshops - 'magic' functions should be explained openly, not hidden for simplicity's sake.

The extra documentation you outlined above would be amazing though!

Also feel free to just scrap the challenge :smile: I'm not sure if there's an appropriate replacement already in the Master Reference, but you could always make one yourself.

des-des commented 6 years ago

Hmm blink light is a function that returns a function, I think the code style is too advanced for week 2. If it could be rewritten so that it did not use currying (if you know what I mean) I think that would be a start.

I wrote this challenge I think for week 7 https://github.com/foundersandcoders/mc-do-this-then-do-that, as a kinda back to basics as it seemed lots of students were struggling with callbacks (as they always do).

I think its fairly badly written / needs lots of improvement (https://github.com/foundersandcoders/mc-do-this-then-do-that/issues) but if it could be cleaned up may be better for weeks 2. (we could swap them round).

@finnhodgkin @rachaelcodes thoughts?

finnhodgkin commented 6 years ago

@des-des for sure yeah! I'm more than happy for it to be swapped to a different week. After 5 unsuccessful attempts - 2 in London, 2 in Nazareth and 1 in Gaza - I think a change is definitely in order. The challenge is way too much of a mishmash of ideas for the second week (currying, callbacks, setTimeout and first class functions).

To be honest I thought the plan was to move it for this iteration :man_shrugging:

I had a quick scan of https://github.com/foundersandcoders/mc-do-this-then-do-that and it looks like a good replacement :+1:

zurda commented 5 years ago

Hi everyone, we're preparing the content for week 2 of Fac-16 and I was really excited to read this. I'm completely happy to help with this update and create a PR since this workshop was extremely confusing. Personally, amending the current workshop would be difficult for me to do, but swapping it sounds like a valid option. How do you suggest we proceed? (cc: @oliverjam , @des-des , @finnhodgkin , @rachaelcodes )

oliverjam commented 5 years ago

I've been thinking about this problem recently. Having talked through callbacks with a new coder I've noticed the problems in understanding callbacks have a root cause: first-class functions in JavaScript.

It's not intuitive to a lot of people that functions are just like other variables. You give them names, pass them around as arguments to other functions and call them whenever you want.

"Callback" feels like a term that obscures what's actually happening: passing a function as an argument, just like any other variable. Students have usually done this a fair bit before even starting FAC—addEventListener takes a callback as an argument.

I'm not sure either of the above workshops communicate this concept very well. Maybe we need a new one. I think these are reasonable learning outcomes:

  1. passing functions as arguments (without async complication)
  2. JS is synchronous (async code will run last)
  3. how passing functions as arguments helps (callbacks

I've got the rest of this week off works so could devote some time to writing a workshop up if we think it's a good idea.

finnhodgkin commented 5 years ago

I'm still v. happy for this MC to be moved or removed, though it might be worth checking in with the other campuses first to see how successfully the MC ran there - or if something else was used instead.

@oliverjam / @zurda happy to review & test anything either of you write :+1:

Moving the conversation to https://github.com/foundersandcoders/master-reference/issues/874 may help to raise visibility on this.

oliverjam commented 5 years ago

I think we should probably use @sima-qian's great slide deck intro to callbacks (and maybe @shiryz's awesome README it was based on). They're like the examples I used when I mentored this week, but a million times better, so there's no point in me writing anything new.

Edit: although now that I think about it that covers the theoretical introduction, but doesn't really solve the problem of this workshop probably being too hard/confusing, so maybe we still need a new workshop

sima-qian commented 5 years ago

@oliverjam There are a few differences now between the slide deck and the original readme, due to suggested changes on presentation's PR, so it might be a bit confusing to use both.

The traffic light challenge seemed to be more accessible to FAC15 after the introduction to functions presentation. They had only half an hour to tackle it and I believe about half the pairs finished the first challenge. As far as I can remember, no one managed to complete the first challenge in FAC14, even though we were given an hour.

Perhaps the morning challenge could be altered to give a few more hints, in order that every pair can at least make some progress?

shiryz commented 5 years ago

Hii :wave:,

Giving a better introduction to callbacks has softened the blow of this morning challenge which originally was an "easier" replacement of the waterfall challenge. When I wrote this readme it was an attempt to combine many resources already created (@oliverjam your examples were perfect for that :sparkles:), but it still needs work and any contributions with examples or coding questions would be most useful.

Last time this mc was given in Nazareth it went well (https://github.com/foundersandcoders/master-reference/issues/874#issuecomment-403790484), and I don't think it should be replaced since it does cover many important topics.

My unpopular opinion: :sweat_smile: Don't over-simplify it. Part of this challenge is the effort you put in understanding how callbacks work and once you understand the harder parts, it makes it really easy to get the rest such as sync vs async, waterfall, parallel etc...

Like @sima-qian suggested a few hints can be added to part 1 of the challenge that lead to the answer