 my adapter because that's what we have you don't have any of the laptop so yeah come come actually close your eyes everybody close your eyes like like this do you think you have a talk if you do then just raise your hand i can see when you're not closing your eyes so everybody close their eyes i'm not paying attention if you think you have it close your eyes close your eyes up raise your hand if you have potentially a talk nobody else need to know just me okay you're pretty shy we'll find a solution if you don't if nobody shows up that will be me again so we don't want to go there please find a find a talk at about four four thirty so we start about now as soon as everybody's sitting there were spots over there if everyone has their computers pull them out because there are exercises you can follow along with and then i'll be pausing in between to see if anyone has questions along the way so take a moment if you can go to the Fosden page for this presentation go to the presentation link at the bottom and you can get to all the examples from the slides now is the moment to make noise with your laptop take your laptop out now you don't learn if you just listen plus it's not fun so it's mandatory if you have a laptop take it out they're going to hate me not you so that's fine don't worry about it so JavaScript is not funny if you do it alone so you need to help others to get it for this all right this talk is a little less technical and it's actually about how do we make the technical approachable so i would like to show you some ways that we can use JavaScript as maybe possibly the best language for effective learning so how not only then can you teach with JavaScript but how do you teach programming at all what are the the best practices for that and how can JavaScript fit very well with those best practices how does JavaScript fit very well with open education and we're going to look at open education as a slightly different thing from open source and see that JavaScript is really the best option for fully open computing education and finally we're going to look at what is computing literacy how can we teach it and how does the single pane nature of the JavaScript browser we can inspect have the UI and all of the sort of back end front end together at the same time make it the best language for computing literacy so the each one there's a little link of exercises within each slide i'll talk over them i'll give you guys a minute or two to look at them and then questions so we'll be pausing three times for questions and answers first we're going to think instructional design how do you teach programming i think the first sort of not necessarily intuitive thing is that you need to explicitly teach the implicit the general knowledge you hear is to get people to think like a programmer tell people what you're thinking get the students to think along the same process as you that is of course the end goal but between the beginning and that phase there's a lot of implicit knowledge that you as a programmer already have when there's an error why do you look at the line that you looked at why did you move your mouse to the file you moved it to why did you scroll away you did all of these little tiny things that you don't even think about are actually what a student needs to learn before they can get to the interesting the strategy stuff that you would like to teach so find ways to teach people what you're doing not what you're thinking the second is to emphasize the process over the product so this is along the same lines but now we're going to think how do you explicitly structure a series of exercises to emphasize the process over the product it's one thing to just say all right build me a recursive merge sort and while you're at it think about what you're doing the focus of that exercise is still the finished working code the tests pass or they don't and it's really up to the students personal discipline and experience whether or not they can document and keep track of what they learned along the way so the type of solution for this would be to assign steps instead of a final product say i don't care if your code works but i want your best attempt at these eight steps on the long along the way to a recursive solution context is content this one is something that's often overlooked usually with things like free code camp or con academy the thought is let's simplify the programming environment so students can focus on code but that is absolutely unhelpful believe in the long run because coding does not happen in a protective environment coding happens in a real environment it happens with real browsers it happens with real errors it happens with other people's code so context is content when wherever you place an exercise the student is explicitly learning what you told them to and implicitly learning how to navigate that environment if they're spending six months on free code camp that's six months that they not only didn't learn how to use the browser but didn't learn how to integrate javascript into their use of the browser so when you're designing exercises or projects think very carefully about what's the level of my student where would they be using the skills i'm trying to teach them and how do i embed the the skills i want in a simple example in context which brings to the last point full complexity max simplicity when you're designing an exercise you're helping someone you're coming up with a little snippet think what is the entire complete task that the student will have to deal with and how do i reduce that to its absolute most simplest form so i have an example for this we'll go over together quickly and it is an example that helps teach this and binding so what i have here is an example of an embedded resource it's what i call it i don't know what they're actually called the idea here is that the context is the content not only did i write a series of explanations on how this works and how binding works and how events work my example is written in code and it runs and the student is going to be interacting with that the same way this is weird in presentation mode there the student is going to be interacting with this in the same way that they would generally interact with real code so let's say that you're interested in what happens when we use a free variable a free variable by context so we have a callback function for an event inside that callback function is a free variable using this i want to set that by doing bind so we can use this little helper function load that's two that binding there so the student has now loaded just the lesson they wanted but that lesson is actually written in code but it also has a helpful log that explains in english what happened as the code executed so the student can study the code itself they can additionally study how did it log itself so you can see not only what happened what was the source code but how did the code write its own description what was the outcome on the screen and what is happening inside of all of this every time they click the button it's clicking bounded DOM element but we can see that the button they're actually clicking is host DOM element so when i click it it prints the information from my bound function so the bound callback on the host element if you want to see how exactly that was implemented you're not reading a markdown looking at code back and forth trying to string it together you are in context seeing the simplest possible example that will teach this concept the first step here is even to make it simpler and demonstrate the exact same mechanism taking place with a simple plain javascript object so that is the first bit how can we make good exercises for teaching programming and how is javascript very useful for that we had to explicitly teach the implicit it's not only about teaching the thought process it's about teaching the implicit skills that allow you to focus on the thought process and not every single bug focus on the process over the product you have exercises you have words you have projects where the explicit goals are to complete a series of steps rather than produce working code you have context as content carefully pairing exercises and projects with a specific learning environment so that where they are studying the code becomes part of the learning objective and finally put all that together and you have full complexity max simplicity teach the full complex task in the simplest possible way questions now i can just go on we can look at a couple more examples of each step if you like yes so explicitly teaching the implicit for that i have an example of what i call expanding one of the most important skills that we experience programmers have is the ability to step through code in our head know which line is going to be executed where did each value variable get its value how is that changing over time that is extremely difficult to teach especially because it's not usually explicitly taught people just say read the code and figure out what's happening and then people don't and what javascript has it so special is the flexibility of how many ways you can write the same code so this expanding is a form of refactoring that follows very strict rules so students don't have to focus on how they're going to do it they know exactly what's the next step in the process the first thing you expand any control flow statements so you're going to remove the conditions from directly within the ifs so that you can later assert them there's an example of a while loop below it's a very similar process then you're going to expand the expressions using block scope you split a one line expression into a series of proper order of operation single operation on one line so your code is becoming a lot longer and possibly more difficult to reason with until you get used to it then you see that this is actually an incredibly powerful tool because you can start to build exercises and even you are not building exercises the student themselves can build their own feedback mechanisms just by simply putting on the same line a little log dot push so now what the student has is a step by step process of what happened as this code executed because it's all javascript in the browser they can just simply copy paste it from the markdown into the console they fill in some values and they expect it to be false where was that this is an error i forgot to fix in the pushed version val 1 let's go to the while loop it works so for the looping it's a very similar process you start with a loop a for loop but for loops can always be expanded into a while loop you put it inside of a block to preserve the integrity of the let or the the block scope variable in your for loop block the whole while check the condition or sorry set the initial value check the condition at every loop update according to the same rule expand all the expressions and finally log it we'll just set some expected values so we failed we did not have the correct we did not have the correct prediction so here you are emphasizing what is the behavior of the code versus the implementation what did you expect the code to return and how exactly did it get there so now what a student has oh yeah firefox isn't always the best for this they can step through the code what value did every line of code have at every step and this allows you to make very good sense of what is otherwise rather opaque code so that is making the explicit making the implicit explicit an example of teaching process over product i have a recursion here so rather than saying recursion works like this draw some diagrams expect them to write working code say no recursion is built up of these steps these pieces every recursive solution has the same pieces and when you're planning a recursive solution build the pieces in this order and you can later assemble them back together to a solid solution this gives students something that they can work on small manageable understandable pieces so i've given an open end test an open end strategy challenge but then the steps first test cases without even running the code how do you expect that it will behave you could also provide those as part of the exercise base case write a function that determines if the argument is a base case focusing on one piece only what do i do if it is a base case what do i do to the operation or to the argument so i can build back up the breakdown if it's not a base case how do i move the argument closer to a base case write a function that does that but you'll notice at each point there are tests along i'll get to the helper function at the bottom build up i have two recursed partial solutions what do i do to get them closer to a full solution finally simply call them in a scaffolded recursive solution if it's a base case turn around if not we're going to break it down we will recurse and we'll build back up and return students can now then factor out their functions just copy paste in the body of their functions where the function call was they can collapse it if they like and convert it into a formal recursive definition and the step from here to here is actually relatively simple so what you have also is not only a good way to teach students the process of solving a problem but you're making a manageable step from the practice to the theory and the mathematical theory is often very difficult to get students interested in and to even understand if you want a nice little challenge step you can see how to compose those solutions so i'm actually taking longer than i thought context is context look at these on yourself i took a simple exercise from free code camp and just set it up in a whole bunch of different learning environments open source is not equal open education open source is open access to source code open education is open access to education open source educational resources is anything built for education that has an open source license but that doesn't mean that it's easily adaptable by the people who will be using it to learn so for a simple example i made here's a j s parson's it builds parson's problems for students and it's actually the teacher that has to build it there's full documentation on how to use it and it's not immediately obvious how a student would be able to build their own parson's problem so this is an open source educational resource that i would claim is not fully open education however with a little bit of reworking you can end up with the parsonizer where a student simply types in whatever they can copy paste the code from whatever exercises they're looking on and all of a sudden they build their own parson's project so the difference now between open education and open source is how readily can the students and teachers who are actually learning adapt their content for themselves so open source is not open education we had an example there the parson's library versus the copy paste parsonizer so what is an example something that's open source but not open education i would say free code camp yes the source code is open anyone can in principle rebuild their own free code camp and run it but practically speaking it's not only completely out of range for any student but most teachers probably don't even have the technical knowledge or the time to fit and adjust free code camp to match their own needs so it is open source great open source educational resource it is great free education but it's not open education not open source but open education is replete replete does not open source its code but the tools that they have for teachers classroom management exercise creation running code in a zero install environment is outstanding so replete is an example of closed source open education resource the perhaps best one i believe that is both open source and open education is a tool called python tutor that you can also use to study javascript that teaches the notional machine i'll talk about that in the next step so what is a quick example of something that is both open source open education and realistically accessible to a student it is this a student can inspect they want to study coercion because that's difficult so let's what happens if we take a string negative four a number four we add them i expect the result of this operation to be boolean true i got it right what if i said false i would get it wrong and what if that's not a boolean it would tell me so i'm constantly getting feedback in the console students are learning how to read the dev console look at the code they're learning how to in their heads break down long expressions to debug them and furthermore the source code itself is very accessible to a student there's a simple function that casts the types there's a simple clear function table and a slightly more complicated handler function that's long but has nothing extremely difficult in it and this over here is simply an html table so this is an example of a very powerful open educational resource tool that is also realistically open source to students you can imagine a student after a couple months getting the confidence to build their own tables for expressions that are troubling them or to make their own little courses and remix and share between themselves so open source is not strictly equal to open education finally computing literacy what is this how do we teach it so i'm going to skip defining exactly what it is i'll do that in a second by showing not a sentence but a project that a computationally literate student should be able to build realistically after maybe a year of study first step though is honesty this is intellectual honesty if you want to truly teach computational literacy you need to teach students that what is actually happening do not put it in any other words do not use analogies teach what is and expect that students can learn it so this goes to python tutor teaching programming first from a notional machine not using analogies not using custom environments let's teach students in place using clever methods agency students should learn that they have agency over the digital tools that they use of course you're not going to have it over everything what they should learn that is possible and so that's why in the previous slide i was advocating for open source resources that are also open education students can modify them themselves adapt their own courses ownership so this is now beyond the student to the whole community the schools the teachers they should all be able to easily adapt whatever content whatever courses to their own needs so this is again where free code camp isn't ideally open education it is a very good course but is very long and it's very prescribed it'd be difficult to adjust that to different lengths to slightly different needs different levels integration students can't just learn programming they need to learn how the user how the computer itself how the source code how the developer how there's an entire sort of space a communication space built around a running application that has real world impacts javascript is exceptionally good at teaching this through what i'll show you in the final project the ability to have a working application in the dom the dev inspector tools source code printouts all simply live on an open source hosting like this github.io finally preparation the goal of computational literacy isn't to create professional ready students it's to create students who are prepared to go on and learn whichever path they'll later need whether that is to be a developer whether it's to simply be an artist anything but to be living in the world with a basic understanding of what is computational literacy and how does it work why why does that relevant and that they do have some say here is an example of a final project that i believe a student could be able to build after one year it contains dynamic documentation automated testing and feedback through a simple run tests function that can easily be understood by them this is the only source code that they also didn't write for the whole project it just reads it just takes in a function arguments passes them through compares them and logs a student can see which one's failed which test case is failed what are all the functions available uh let's see i want to cheat we can now check our log and we can see that someone cheated cheating input one scheduled blah blah blah what is also super super important as far as computational literacy goes is the idea of applied computing and how do you embed a problem from the real world into the computational space and here we see that with embedding and debedding if we look at the model we can see this here the challenges we can look at the way students have organized their database they have two functions embed and debed that map from strings to array of char codes they perform all of their sorting and all of their removing extra elements on the array of numbers and map it back to a string when the user wants to see what's stored in memory so it's super simple it's things that can easily be done right within the first couple months but it's the fact that you're having people do this instead of something else that sets them up none of these concepts are impossible to understand but they need to be simplified and explicitly taught questions or is it time one question thank you are using a debugger in one of your teaching examples because everything it's always the built-in debugger and so that's one of the whole things is you have zero install openly available tools so all of the exercises are built in just the chrome or firefox okay sorry then i meant specifically pausing on a specific line and