Teaching CS50 with GitHub Classroom - CS50 Educator Workshop 2022

Key Takeaways

hello everyone it's so good to see you for our last session of the workshop which is quite a crazy statement here um today we'll be going over GitHub classroom and teaching safety with GitHub classroom um ghetto classroom is a tool for my friends at GitHub education that we started building some supports around and Associated has just said you can do everything you need with the course using our own tools submit 50 code Etc IO and so on but if you're interested in doing something more advanced having more flexibility more autonomy you can certainly use GitHub classroom for that and the plan for today will be to show you at a high level what is GitHub classroom and then going through a demo of how you could use GitHub classroom and wrong chin will help us see a student point of view using get a classroom too so GitHub classroom is again based off of github's infrastructure and if you want to go see you can go to github.com or classroom.github.com to go ahead and see the home page for classroom welcome to follow along if you'd like and it's important to know that all of what classroom offers is really based on github's infrastructure so if you're familiar for example with having a a notion of a classroom we can think of that as simply backing up to a GitHub organization where a GitHub organization is a collection of repositories now these repositories into the classroom are really just assignments we're gonna get a repository some like some collection of code here so every assignment in GitHub classroom is really just a GitHub repository show you some visuals here here's what our classroom looked like in Fall 2021 where we had this organization called GitHub classroom for cs50 this is our classroom for the fall course and inside that organization we had several repositories one for each assignment and what students would do is they would go and accept that assignment and create their own repository their own version of assignment inside our organization so a student might see something like this for individual assignment they would go ahead and see if they're working on DNA the distribution code inside a repository that they could then clone for themselves and submit work too so again all that we'll talk about today is based on github's infrastructure using organizations and repositories now GitHub classroom offers some UI kind of overlays to this idea of organizations and repositories if you were to log into classroom and you were to make your own classroom using their interface you might see something like this you would see a list of assignments that you have created where each assignment is again just a template repository and you can create that list of assignments to distribute to students based on those repositories here so let's say I've made a birthday's assignment a Caesar assignment and a cash assignment each of those assignments comes with a single link that I can then share with my students and they can then use that link to clone that template repository make their own changes and submit that work back to me so for example student languages if I send them a link they would see accept this assignment DNA and once they do they'll be able to see their own repository inside my classroom organization that they can again submit work to as they work on that assignment they're able to run what we call an action workflow in this case we do talk about that as Auto grading this action workflow run the check50 for us and gives a student back a score that I can then see in my own classroom so let's say a student worked on DNA they could do an automated commit and they could then see that action workflow run and see how many tests in check 50 they have passed and then later on if I want as a teacher to leave feedback on their work I could use github's pull requests feature to leave a comments on their work in this repository so if you're familiar with PRS I could go ahead and leave a comment like this and very nicely done for their work on a certain assignment using the pull request feature in GitHub and once I do that let's say I have a whole collection of students whose work I want to see I can go to GitHub classroom interface and see all their scores in one place out of the way here a little bit you can see I have Hermione Harry and Ron who've all submitted work to me and I can see how many tests they've passed for mine is 21-21 Harry has one out of 21. and if I wanted to I could download their grades using a CSV file here I could also download all their submissions in a single zip file using the download repositories feature here so this is what GitHub classroom offers us it offers us a chance to create our own assignments to distribute them with tablet repositories to have students have their own space in which to work on them and to submit that work back to us we can leave feedback and see their grades so let's actually dive into how we could do a demo of this and seeing how we built our own GitHub classroom so I will go over to classroom.github.com and I think the link is in the chat here and the first thing I'm going to do is sign in with your GitHub account so I'll go ahead and sign in here and once I do that I should see I already have a classroom open but if you'd like to make your own all you have to do is click on this new classroom button up here and notice that we prompted to select an organization for your new classroom so again GitHub classroom is based on github's already existing infrastructure around organizations so you'll first make a new organization and you'll then tie that organization to your GitHub classroom so I have already done this but if you want you can go ahead and create an organization and once you do you'll be able to create a classroom to go along with it the steps here are simply to create that organization name it type in your email save it and then go ahead and give your classroom a name in my case if I go back here I decide to call mine Carter's demo classroom so once you have that you can click on this demo here and you'll notice that we have some assignments I've already created these assignments but you can also create your own using this new assignment button here so I can go ahead and create a new assignment and let's say I have a template repository that I've put some distribution code into and I want to share that with my students so I'll hit new assignment and I'll first give the assignment a name in this case let's say I'm a teacher and I want to distribute cs50s cash problem from this most recent fall so what I could do is I could say I want to search for well actually I want to give it a name first I'll type in Cache here and also this is an individual assignment I could optionally give this assignment a deadline but just noted that in GitHub classroom once the deadline has passed your students can't submit work to that assignment so we tend to leave deadlines blank just so we can Implement our own lateness checks here I'll keep the repository visibility private because I only want students themselves to see their own repository and we don't tend to grant students admin access to the repository they tend not to need it so we'll leave this blank and we'll hit continue here and what I can then do is choose some starter code for the student to use so at this point I'd like to show you our own kind of infrastructure for GitHub classroom which is called classroom 50. and you're welcome to use this as you use GitHub classroom to see this I can go to github.com classroom 50. and you'll see that we've put together a collection of template repositories full of CSS distribution code for your students to use here so you could choose any of these type of repositories and distribute them using GitHub classroom for your students so notice how I wanted to use the cache repository here well I have a public template which means I can use this as the basis for this assignment I can share this with my own students so in GitHub classroom I'll say select a repository well I want to use the 2022 fall cache repository in classroom 50. so I'll then go ahead and use classroom 50 slash 2022 2022-4 slash Dash cache and I'll see the repository cop here so I can select it and now it is the basis for this assignment I can hit continue and now I'll be prompted to set up Auto grading and feedback we have done most of this for you there's no need to add automating tests we've already added those through our tablet processors using check50 we can also enable feedback pull requests as feature we saw earlier where I can leave comments on student work via a GitHub classrooms PR feature or pull request feature so I'll check that and I'll create this new assignment I'll get them out to load and now I notice I can see how many students have done this assignment so far currently it's none but in a moment it will just be runction so when I get this link here I can use to share with wrong Shin to accept this assignment and let me go ahead and share that with runction now and in a moment we'll see how wrong Shin walks through working on this assignment as a student can everyone see my screen I think we can all right so I just got the invaling that sent by Carter it looks like this so I'm just gonna visit it and I'm being greeted by this accept the assignment screen so all I can do is I can just click on set this assignment so what GitHub is doing right now is trying to create a assignment repository for this particular problem set and under Carter's classroom organization so I would just probably just refresh this page and it's done I can just click on this GitHub link it will bring me to the assignment repository so right now as you can see I'm now inside the assignment repository and I will be able to Dive Right In by creating a GitHub code space on it so I'll just click create cosplay on Main it will just spring up a code space for this assignment Repository and then back over to your product for now yeah so while rangshin's code space boots I want to show you just a brief resource we've created for you here if I can share my screen here we've created a resource for you to learn how to make your own custom assignments using GitHub classroom and specifically their template repository feature so if I click on this I should be brought to a link that shows me how to go through GitHub classroom and create my own assignments using GitHub classroom this is stuff I walk through for you to use and certainly don't feel tied to our own assignments you're welcome to modify them as you see fit we'll find a more long-term home for this in the future most likely in our own official documentation but for now I'll have it in notion here and again this just walks you through creating a blank template repository if you're not familiar with that going ahead and adding distribution code to it and giving it a name and also you are welcome to use our own GitHub action configurations to reuse Auto grading using your own and check if you check so notice here for example you might modify the name of your checks here I've called my Mario less test if I'm making this Mario last distribution code but I could also Supply a check50r because I could say I want to use a certain check if you slug maybe it's one I've made myself and putting that in here allow me to run check 50 ask student submits work as we'll see wrong Shin do in just a moment and this is all configurable using this main.yaml inside these have repository which again this documentation runs you through at the very end you should have a repository looks a bit like this and wrong chain are you ready to show us the student view okay just one moment my first basically putting up as I mentioned earlier and the first time student launching the code space it takes time to put the image and extract the image soon and also just to give you a more long tour of GitHub classroom and we can go to classroom 50 here and we can see a few other repositories that we have um So currently what we've done is we've added all of the assignments from 2021 fall but it's our goal to update these as we go through and update chips own assignments so we've called them 2022 followed simply that these will be the ones in use for teachers this next fall but as we have the course this coming fall will update those for the next year ahead wrong shin has already accepted my assignment so here I have this student named wrong Shin Liu test and I can see that at the moment wrong Shin's latest submission doesn't quite pass all of the checks but maybe eventually they will and I can go over here and I can download a CSV of all the grades from my students so far I got here simply by going to my classroom clicking on the assignment I distributed to runction in this case it was Cash and then I can see all the students who have accepted this assignment as well as all these submissions to this assignment so far so I'm ready to re-share my screen so right now I'm in codespace again but for this particular assignment only so as you can see I am now uh open a cache.c file which is the distribution code from the template repository um my goal is to finish this assignment of course but right now for the demo purposes I won't be implementing all of them I will just quickly maybe finish this one but doing it incorrectly um so let's say I finished this particular function I just want to submit it right now what I can do is just quickly make a push and type in this this is my summation and I will just quickly make a push thing changed so what it does is actually push the change I made for this assignment back to this assignment repository and as you can see it will just trigger the action workflow which is run the auto grader and again this is my submission that I just made if I click on it we can see that the auto grain is running um it takes time to run the auto grading again it's pulling one of those um code space image that we defined so that we are running the check at the acceptance environment as if students are working on their problem set so what is the other building that is actually it pulls the base image the code space is running but then you run chapter on top of it um and this is essentially what it's doing right now and once the charity check are finished running it will just render the output on to GitHub classroom and GitHub custom will be able to and Carter will be able to see uh what my grades are for this submission for this particular solution yeah wrong chain and all this runs you mind if I show what the looks like on my end that's good so here I am back in my assignment for cash I see wrong shin has accepted this assignment and is presently working on it what I could do is I could click on this commit button here to see wrong Shin's updates to this assignment so I'll click on this commit and I'll see that wrong chin has indeed one attempt at this problem so far I could also go to wrong Shin's repository here I could say cash function lootest and so I could see all of Rankin's progress simply by clicking on his assignment here and now I can see that he's indeed returned since over 250. now if I wanted to leave wrong Shin some feedback what I could do is simply click on the pull requests tab and go to this feedback pull request by clicking on this and choosing files change I can see the updates wrong chain has made so I can see that he modified particularly this line here 47 and leave a comment I can use the very same GitHub UI I could click on this and I could say maybe think about how this math will work out uh try thinking of an example with 25 cents do you get back one quarter so I can leave that comment and I could add a single comment and now the next time wrong Shin goes to that feedback PR you'll be able to see that comment on his own work and once Rankin's tests have finished I should be able to see an updated score for wrong Shin which in the end will probably still be this number of checks out of 14. so I won't see too many changes here but wrong chin as yours finished running in a way that we can see it so let me reach an ice cream so right now by the way I can see Carter's comment now and I can reply to it but not right now um since I did not correctly solve the problem set of course I failed all the greeting but then I will be able to click on it and see what check I'm failing this is all the traffic chat we already we already implemented but this is now rendering on github's action workflow so as you can see it tells me I did not return integers for number of cents but I did not correctly reject negative input that kind of thing so I would be able to get feedback from this Auto from this uh action workflow results and for this particular submission I can keep resubmitting until I probably you know solve the problem but this is the student this is the feedback that student would get from this Auto grader and I was awarded to out of 14 points probably because some of the Biologicals are probably because my cash compiles and so I passed all those checks but I did not pass the remaining chains yeah thank you for sharing Shin so that is the student view of things and to close us out just to make sure you have access to all the features that classroom offers I'd encourage you to go to if you're in GitHub classroom go to the settings tab over here and you should see an option to verify your status as a teacher so through github's Global education campus you're able to receive the code spaces feature for your own students if you click get verified here you can go through github's process to receive the features that wrong shin and I have just gone through here but overall this was our tour of GitHub classroom again all of our tools we've previously seen so far are code.cgio submit 50 check 50 and so on you can all use with teaching English to the classroom but if you'd like more autonomy more flexibility and so on get a classroom as one option for you so we just want to show this to you all today and we'll pause here and take a few questions