Math lesson with coding (no prerequisite knowledge)

tldr; Go to https://github.com/AutomagicalApps/functionLesson to get a base math lesson on functions using coding to build a Chrome Extension. No coding knowledge required.

Long version:

So as a math teacher who now codes full time, I still see the world through the eyes of a teacher. So many times as I am working on a coding project I think about how awesome 'this' would be as a lesson in a math class. Giving real world examples of a concept is like gold in a math class and I always love to have an actual response to the incessant question of "When will I ever have to use this in real life?".

[aside] My younger teacher self hated that question and in retrospect would give the most annoying, glib answer.

Student 1: When will we ever use $(insertMathConcept) in real life/job/ever?

Mr. McGowan: Well lets see, your job right now is to be a student and to be successful in that job you need to pass my class. $(insertMathConcept) will be on the test and passing the test is a requirement to passing the class. So you will use it to pass the class. Hence, it will be one of the most important things you will need in life to be successful.

Narrator: UGH. Mr. McGowan is such a smug, pompous $(insertCurseWord).

[/end aside]

As I was building a Chrome Extension I was thinking that this would be a great example to update my old analogy for functions. I used to use an airport/airplane example where all the people (input or domain values x) got on a plane (function, flight f) and ended up a the same airport (output value f(x) ). It worked great to talk about function composition as flights with connections in a 3rd airport. This could yield x gets on flight f (the f(x)) and ends up at a layover airport and takes a second flight (h) and ends up at the destination (function composition of h(f(x))). I also liked the symmetry/visual component of x value being inside of f and then the output f(x) getting on the connecting flight h and being shown in h(f(x)).

This also has some built in biases that I now understand a bit more. Not all students will have flown on a plane or understand the concept of a layover or connecting flights. Without a concrete connection to the example it just becomes an abstraction of an abstract concept...the inverse of concrete.

The new example I was thinking of is the browser. All students understand the concept of typing in a URL and ending up at that webpage. Sometimes they might click a link on that page and end at another page (hence the function composition connection). As I was building a Chrome extension I was thinking it would be fun to have the students code up a Chrome Extension and understand how Chrome uses functions to work under the hood and to allow them to expand it, personalize it, and have fun coding as well. The best part about coding and relating to math in my estimation (no pun intended) is the immediate feedback (the code runs or more likely, does not run) and the iterative process of problem solving to try to get it to work. That is the skill that I want students to leave with after their time in my math class. The underlying math concepts are just the vehicle in which they can explore that grit and develop their problem solving skills, figuring out which tools they have at their disposal, determining what the end goal actually is and deciphering on their own which tools to use to get there and figure out if they actually arrived at the intended end goal.

That process is coding. That is what I do all day now. I work on projects like that and need to learn the bits that will get me there.

So how can you use this lesson in your class?

First a caveat: I am not really good at detailed lesson planning, it was the thing I hated most (or 2nd most behind pointless meetings) about teaching. I would develop a skeletal plan, have a general understanding of the problems/concepts I wanted to cover and then see how the class unfolded depending on the class that day. It worked for me. It does not work for everybody (or in the case of my lesson plans, probably nobody as I would omit so much important details that were located in my head). I always say that each teacher is like an artist and has their own artistic flair that they import onto the lesson/class. Each teacher engages with students in different ways and that is why each teacher will teach a class differently, even with the same lesson plan regardless of detail.

OK, caveat out of the way. Here is the skeletal lesson plan. I planned it so you as the teacher will need no knowledge of how to code, nor will your students need beforehand...but hopefully you all will afterwards :)

-1. Take a deep breath, you got this. That code will look funky, you won't know the answers to all the students questions. You will feel uncomfortable. That is good. You will be releasing the power of being the knowledge holder in the room. That can be scary. Breathe. Do your favorite Power Pose (I like the Wonder Woman and the Victory V). 0. Go to https://github.com/AutomagicalApps/functionLesson which is where I hosted the folder of files.

Download the folder
Unzip the downloaded folder and know where it went (On a Chromebook you can click on the .zip file and then just drag the regular folder to the Downloads and it will copy over)
Go to your Chrome Extensions (you can type chrome://extensions/ in the Chrome URL bar)
Toggle on Developer Mode
Click Load Unpacked button
Choose the folder you downloaded (make sure it is not still a .zip file as Chrome doesn't like that, it won't let you choose the .zip folder)
Open a new tab or refresh the current one
Click the icon button for this Chrome Extension
Watch the magic happen! So now you have a Chrome Extension that will open up https://www.google.com when you click the icon.

Troubleshooting (A non-exhaustive list of things that can go wrong):

The internet might go down and this lesson will be worthless, have a backup lesson plan. Students might not have access to run Chrome Extensions. Test this out with a student account or student device on your school network first. Might need to talk to the IT people. (Hopefully you will not have to do this...) Students might not have access to the Developer Mode in Chrome. Students might not have access to run Chrome Extensions. Might need to talk to the IT people. Tell them this is an awesome application of the IT skills they are developing and it is a great ROI for those devices your district spent so much money on (Hopefully you will not have to do this...) Github might be blocked on your domain. Might need to talk to the IT people. (Hopefully you will not have to do this...) Student device might die and they don't have a charger. Have them work with another student in pairs. You only have a few laptops/Chromebooks. No problem, have them work in groups and refer to your group working norms (I know you already talked about them, but they might need a reminder/refresher/development ;) Chrome might have updated since I posted this and breaks the template example (This is possible but unlikely as I plan to take down the post if it breaks or update the code to get it working again). Extensions (that will need you to touch the code and alter it):

Make it open up a different URL when you click the Icon
Can you make it open more than 1 tab with the same URL when you click the icon? 2 different URLs?
Make it go to a webpage that you type in somewhere. (A possible solution would be to add a popup.html file with a textarea and a button. The textarea could be where you type the url and the button would execute it. You would need to add a "default_popup": popup.html property to the browser action part in the manifest.json as per here. This popup will override the action when you click the icon in the Chrome bar. It will now popup the popup.html file. You will also need to add the background.js script tag to that html. )

Wow. We really jumped the shark there on that 3rd extension step :) Feel free to contact me for more info on the solutions or use your Google-fu.