[00:00.000 --> 00:15.680] Now is the time for the Josie Malaze. [00:15.680 --> 00:23.360] And he speaks about breaking the code of inclusion. [00:23.360 --> 00:31.440] The designing micro-material is based on prime principles for accessibility, programming, education. [00:31.440 --> 00:35.440] Very difficult detail. [00:35.440 --> 00:37.440] So, okay, the stage is yours. [00:37.440 --> 00:40.160] Thank you. [00:40.160 --> 00:44.160] Thank you. So, my name is Josie. [00:44.160 --> 00:48.800] Okay, okay, okay. My name is Josie. I am a PhD student at the University of Bristol. [00:48.800 --> 00:56.320] And today I'll be giving a talk about how we can design more open. [00:56.320 --> 00:58.320] Sorry for that. [00:58.320 --> 01:16.320] Okay, okay, okay. Test. All right. [01:16.320 --> 01:18.320] So, I'm Josie. [01:18.320 --> 01:24.320] And I'll be giving a talk about how we can design more open and inclusive pedagogical material to teach programming. [01:24.320 --> 01:30.320] I'll first like to start a bit with a small introduction to tell you why we think this talk is important. [01:30.320 --> 01:36.320] So, I've always been passionate both by programming, but also by education. [01:36.320 --> 01:40.320] I joined Kododojo from a very young age, helping kids to learn how to code. [01:40.320 --> 01:46.320] And I also went for an internship abroad in Kenya to build software for schools in less fortunate areas, [01:46.320 --> 01:52.320] where I could first-hand experience what technology can do to help education. [01:52.320 --> 01:58.320] Upon graduating, I joined Hack the Future Belgium for those of you that don't know. [01:58.320 --> 02:04.320] It's a small nonprofit organization in Brussels that organizes coding boot camps for refugees [02:04.320 --> 02:08.320] that are trying to find a job in the tech sector here. [02:08.320 --> 02:16.320] So, before we go on to the meat of the presentation, let's take a look at some of the background information we need. [02:16.320 --> 02:24.320] I'm pretty sure most of you remember your first programming classes where you had to install a weird-looking editor with hundreds of buttons. [02:24.320 --> 02:30.320] You had to type in some text. You tried to press the pre-button or a compile button. [02:30.320 --> 02:34.320] And you would see a weird error message that you didn't really understand. [02:34.320 --> 02:37.320] This can be very demotivating. [02:37.320 --> 02:43.320] And it's actually even worse when it happens to people from already underrepresented groups, [02:43.320 --> 02:47.320] because if they encounter these types of errors, they internalize it, [02:47.320 --> 02:52.320] and they feel like it's a confirmation that, yes, maybe they do not belong in such a classroom, [02:52.320 --> 02:56.320] which is, of course, not the message you want to send. [02:56.320 --> 03:02.320] Now, in the past years, there has been a new methodology of teaching programming [03:02.320 --> 03:07.320] that tries to limit this issue, and it's based on the prim principles. [03:07.320 --> 03:12.320] Now, the idea is, instead of starting to write your program from scratch from day one, [03:12.320 --> 03:16.320] you basically start with a simple exercise, predict. [03:16.320 --> 03:20.320] In this stage, you look at some existing code, you download it, [03:20.320 --> 03:25.320] and you're going to try to predict what will the result be if I run this piece of code. [03:25.320 --> 03:30.320] Then, in the next stage, you're actually going to download the code and execute it, [03:30.320 --> 03:34.320] and going to verify, wow, were your predictions correct or not. [03:34.320 --> 03:40.320] Then, in the third stage, we're going to ask you to actually make exercises on the problem. [03:40.320 --> 03:47.320] This can be label all the variables, or can you tell me which variables are updated at some point in the code. [03:47.320 --> 03:52.320] Now, up until this point, the learner hasn't changed anything about the code itself, [03:52.320 --> 03:58.320] and as such, it also doesn't feel like it's a personal failure if something goes wrong in the process. [03:58.320 --> 04:02.320] We're going to try to change this in the fourth step, modify, [04:02.320 --> 04:05.320] where we're still not going to ask the student to write codes from scratch, [04:05.320 --> 04:08.320] but we're going to give them a functioning program, [04:08.320 --> 04:11.320] and we're going to ask them, like, hey, can you make some small modifications, [04:11.320 --> 04:15.320] like, instead of running this loop three times, run it six times. [04:15.320 --> 04:20.320] And it's only in the last stage where we're going to ask them to actually write a new program from scratch [04:20.320 --> 04:23.320] using the same principles he developed earlier. [04:23.320 --> 04:27.320] Now, this is a new methodology in teaching, in programming education, [04:27.320 --> 04:32.320] but it's based on a very well-known pedagogical concept called the zone of proximal development, [04:32.320 --> 04:34.320] where the idea is quite simple. [04:34.320 --> 04:39.320] If you're only doing tasks you can do by yourself, you're not actually learning anything, [04:39.320 --> 04:41.320] you're just repeating stuff. [04:41.320 --> 04:45.320] But if I give you a task that you cannot do yourself, [04:45.320 --> 04:49.320] even with some help, you're actually just going to get demotivated [04:49.320 --> 04:53.320] and lose all motivation to continue learning, so that's also not good. [04:53.320 --> 04:57.320] So we should always strive to give exercises in this yellow zone, [04:57.320 --> 05:00.320] where the student cannot easily do it on their own, [05:00.320 --> 05:04.320] but with some proper guidance they can get there. [05:04.320 --> 05:06.320] Which brings us to micromaterials. [05:06.320 --> 05:10.320] Now, a micromaterial is an open education resource, [05:10.320 --> 05:14.320] so anybody can easily include it in their curriculum, [05:14.320 --> 05:18.320] but it should also provide some sort of automated feedback, [05:18.320 --> 05:21.320] so that even though the teacher is not there directly to guide the student, [05:21.320 --> 05:24.320] they can still get something away from it. [05:24.320 --> 05:27.320] Ideally, you also want some kind of automatically generated content, [05:27.320 --> 05:33.320] because managing all the content for exercises can be a very time-consuming exercise for teachers. [05:33.320 --> 05:37.320] So now we'll discuss some small examples that we, within our lab, [05:37.320 --> 05:40.320] have built to experiment with these ideas. [05:40.320 --> 05:44.320] So the first sample we'd like to discuss is an online environment [05:44.320 --> 05:48.320] to practice the use of HTML. [05:48.320 --> 05:50.320] It's designed for engineering students, [05:50.320 --> 05:55.320] where we do not really expect to be able to develop HTML websites on their own, [05:55.320 --> 06:00.320] but they should be able to grasp the core concepts of what the elements are about. [06:00.320 --> 06:05.320] So we have a stepwise progress that they can follow level by level, [06:05.320 --> 06:11.320] and we always start with a small presentation of the core HTML concepts that they need to know. [06:11.320 --> 06:15.320] Now, once it's time to actually practice their HTML, [06:15.320 --> 06:17.320] we do not just give them an editor, [06:17.320 --> 06:20.320] but instead we make use of Google's Blockly library [06:20.320 --> 06:24.320] to show this kind of HTML blocks that already contain the syntax, [06:24.320 --> 06:28.320] so they can focus on what the text represents and not on the syntax itself. [06:28.320 --> 06:33.320] Important here, we analyze sample HTML code to generate the blocks, [06:33.320 --> 06:39.320] so adding new levels is as simple as providing a new website we want them to recreate. [06:39.320 --> 06:44.320] We also dynamically create links for every element, [06:44.320 --> 06:49.320] like hints for every element that they will need to use in the page. [06:49.320 --> 06:54.320] We have a similar environment for the practice of databases for the same engineering students. [06:54.320 --> 06:59.320] We used to have a lot of problems where they had to install databases locally, [06:59.320 --> 07:02.320] database files could get corrupt, and they could turn into issues. [07:02.320 --> 07:06.320] So we developed a fully online environment with the use of SQLJS, [07:06.320 --> 07:10.320] which is an open source project based on SQLite, [07:10.320 --> 07:13.320] compiled to WebAssembly using Unscripted. [07:13.320 --> 07:18.320] So in this simple application, they would get to see a description of a database, [07:18.320 --> 07:21.320] and on this database, they would get to run queries. [07:21.320 --> 07:27.320] The queries would be typed in into an online code editor based on Adam. [07:27.320 --> 07:31.320] So they get syntax highlighting, they get code completion, [07:31.320 --> 07:36.320] and whenever they were to execute the queries, they could see the results directly in their browsers, [07:36.320 --> 07:41.320] and this they would use to answer questions about the data. [07:41.320 --> 07:45.320] Similarly, if it was more about inserting or updating the data, [07:45.320 --> 07:50.320] we could no longer do with simply having a simple filling the answer type of question. [07:50.320 --> 07:54.320] So instead, we're going to run checks to see at which step did they fail, [07:54.320 --> 08:01.320] so they can stepwise go back and modify the code until they get it right for all the constraints. [08:01.320 --> 08:07.320] Similarly, as well, if they want to create new tickets, we would also generate test cases for those. [08:07.320 --> 08:13.320] Another problem that's very often looked at is can the students interpret codes. [08:13.320 --> 08:16.320] And a common tool for this are trace tables. [08:16.320 --> 08:21.320] Now, for those of you that don't know, a trace table is just a way, for example, here, [08:21.320 --> 08:27.320] where you can look through your program line by line and note down what happens at each line. [08:27.320 --> 08:32.320] For example, this trace table is designed to look at which variables are declared or initialized [08:32.320 --> 08:36.320] or updated at certain moments in time. [08:36.320 --> 08:40.320] A different type of trace tables would be the operator's trace table, [08:40.320 --> 08:47.320] which gives the student a view of which operators are used at which points in the program. [08:47.320 --> 08:50.320] A third one would be this variable values, [08:50.320 --> 08:55.320] which is basically a way to see which variables are updated at which point in time, [08:55.320 --> 09:02.320] which is a way that we can know is the student actually reasoning about his code correctly. [09:02.320 --> 09:05.320] Lastly, we have a very basic trace table for advanced users [09:05.320 --> 09:09.320] where they can just keep track of the latest state of the program. [09:09.320 --> 09:14.320] Now, to this trace table application, we added some export functionalities [09:14.320 --> 09:17.320] so teachers could import the JSON from the students [09:17.320 --> 09:23.320] so we could run some diagnostics to see if students were understanding the code correctly. [09:23.320 --> 09:27.320] Now we add more of a social game, a coding card conundrum. [09:27.320 --> 09:31.320] It's basically a kind of card game where there are three types of cards. [09:31.320 --> 09:35.320] We have goal cards that say in a certain condition that needs to be true. [09:35.320 --> 09:40.320] We have environment cards that initialize five variables and we have code cards [09:40.320 --> 09:47.320] that would execute some codes to update the global state of the program. [09:47.320 --> 09:53.320] So it's a multiplayer game. It can be played from one to four people. [09:53.320 --> 09:57.320] And we get this field where each player gets a handful of cards [09:57.320 --> 10:02.320] and there will be three heaps in the center. [10:02.320 --> 10:06.320] Now, during their turn, students could select a card from their hand [10:06.320 --> 10:09.320] and place it on one of the environments. [10:09.320 --> 10:12.320] When doing so, they would have to update this state table [10:12.320 --> 10:17.320] to reflect the new latest state after executing the code on their card. [10:17.320 --> 10:20.320] And if they managed to achieve the goal on their goal card, [10:20.320 --> 10:22.320] they would get awarded some points for it. [10:22.320 --> 10:26.320] So it's a social game where they can still practice their trace tables. [10:26.320 --> 10:30.320] Then the final one we're going to discuss is Kingscrawl. [10:30.320 --> 10:32.320] In here, we tried to make it a bit more silly. [10:32.320 --> 10:36.320] We added a fantasy theme where the idea was that we live in the kingdom, [10:36.320 --> 10:39.320] but the kingdom is going to be attacked by an evil dragon. [10:39.320 --> 10:44.320] And it's up to us to find out which of the heroes will be able to stop the dragon. [10:44.320 --> 10:48.320] Now, there are 16 heroes randomly generated [10:48.320 --> 10:52.320] based on four essential variables of the equipment they are wearing [10:52.320 --> 10:58.320] and two extra variables to increase the inclusiveness of our application. [10:58.320 --> 11:02.320] Students would be shown a scroll that would be randomly generated [11:02.320 --> 11:06.320] based on essential JavaScript features [11:06.320 --> 11:09.320] that would update the states of those four variables. [11:09.320 --> 11:12.320] And it's up to the students to predict after the program has run [11:12.320 --> 11:15.320] which of the heroes matches the final description. [11:15.320 --> 11:20.320] Students were able to automatically select which elements of JavaScript [11:20.320 --> 11:24.320] they know or didn't know, so they could always participate [11:24.320 --> 11:27.320] even though they hadn't seen everything. [11:27.320 --> 11:29.320] And we gave them a state table to, of course, [11:29.320 --> 11:34.320] keep track of the state changes as they went through the scroll. [11:34.320 --> 11:38.320] So those were some of the examples that we developed. [11:38.320 --> 11:42.320] But now we'd like to take a step back and look at what did we learn from it [11:42.320 --> 11:44.320] and what kind of guidelines can we give you [11:44.320 --> 11:48.320] if you were to try to implement something on your own. [11:48.320 --> 11:53.320] So the first piece of advice you would like to give you is embrace the themes. [11:53.320 --> 11:58.320] I know it might look silly at first, but just having a silly theme [11:58.320 --> 12:01.320] takes a lot of the stress away from students [12:01.320 --> 12:04.320] and they no longer feel like they can fail doing an exercise [12:04.320 --> 12:09.320] because they're just playing a game in this kind of theme world. [12:09.320 --> 12:12.320] But when we want to design those themes [12:12.320 --> 12:16.320] we also shouldn't forget the principle of scale transfer [12:16.320 --> 12:20.320] which basically states that the context in which you learn something [12:20.320 --> 12:25.320] is an important part of how you will be able to apply those skills in different contexts. [12:25.320 --> 12:30.320] So the closer your environment is to a realistic use case [12:30.320 --> 12:33.320] the more useful their skills will directly be [12:33.320 --> 12:36.320] when they need to apply them to a realistic environment. [12:36.320 --> 12:39.320] So it's still good that in your silly theme world [12:39.320 --> 12:44.320] there is a real life kind of application. [12:44.320 --> 12:47.320] Also definitely invite the social aspects. [12:47.320 --> 12:49.320] One of the main reasons people stop learning how to code [12:49.320 --> 12:52.320] is because they don't really feel like they belong in the world [12:52.320 --> 12:54.320] or they feel discouraged. [12:54.320 --> 12:56.320] And just having this kind of social aspect [12:56.320 --> 12:59.320] it can be slightly competitive but also collaborative [12:59.320 --> 13:01.320] really takes away this barrier [13:01.320 --> 13:06.320] and pushes people to continue learning in a welcoming environment. [13:06.320 --> 13:10.320] Also you should strive to keep the setup minimal as possible [13:10.320 --> 13:12.320] and I know this sounds really straightforward [13:12.320 --> 13:16.320] but when you're designing an application that needs to be installed on a desktop [13:16.320 --> 13:19.320] and even 2 out of 20 students are facing issues [13:19.320 --> 13:22.320] that takes away at least 5 minutes of the teacher's time [13:22.320 --> 13:25.320] that they cannot be helping students. [13:25.320 --> 13:33.320] So if at all possible try to make it work just within the browser. [13:33.320 --> 13:37.320] Now we should also make sure that our micro materials [13:37.320 --> 13:40.320] only focus on one specific learning goal. [13:40.320 --> 13:44.320] A lot of content is created like for example the Heidi programming language [13:44.320 --> 13:46.320] which there is a great talk tomorrow [13:46.320 --> 13:48.320] and these are all like great tools [13:48.320 --> 13:52.320] but they kind of expect you to focus on them for your whole semester. [13:52.320 --> 13:55.320] A lot of teachers already have a curriculum they need to follow [13:55.320 --> 13:59.320] so they do not have the flexibility to really go with something else. [13:59.320 --> 14:02.320] Your tools should really be something they can introduce [14:02.320 --> 14:05.320] and use in one or two of their lessons [14:05.320 --> 14:08.320] without needing to change their overall curriculum. [14:08.320 --> 14:13.320] Otherwise it will just not be adapted. [14:13.320 --> 14:17.320] We also have the expertise reversal principle. [14:17.320 --> 14:20.320] Now the idea here is if you're new to something [14:20.320 --> 14:23.320] you really like to be guided and get all the hints on [14:23.320 --> 14:26.320] what can I do, what shouldn't I do [14:26.320 --> 14:28.320] but as you gain more experience [14:28.320 --> 14:31.320] if you keep having to go to the same guidance [14:31.320 --> 14:33.320] it actually becomes a hindrance. [14:33.320 --> 14:36.320] So ideally your application should be designed [14:36.320 --> 14:39.320] in such a way that they contain multiple layers [14:39.320 --> 14:44.320] where first at the outer layer there is a lot of help available for your students [14:44.320 --> 14:47.320] but as they move on and become more experienced [14:47.320 --> 14:49.320] and become more experts [14:49.320 --> 14:53.320] they can take away those layers and start operating the tool [14:53.320 --> 14:57.320] without getting all that extra help that's getting in the way of learning. [14:57.320 --> 15:03.320] Also of course try to do something with automatic content generation [15:03.320 --> 15:06.320] whenever you try to develop a tool on your own [15:06.320 --> 15:10.320] you will quickly discover that having to update the content yourself [15:10.320 --> 15:14.320] or even asking teachers to create the content themselves [15:14.320 --> 15:17.320] it takes a very long time and they will not do it. [15:17.320 --> 15:20.320] All right these to make it easier for teachers to use those tools [15:20.320 --> 15:22.320] not to give them more work. [15:22.320 --> 15:26.320] So the final principle is if adult possible [15:26.320 --> 15:28.320] try to make things more well compatible [15:28.320 --> 15:31.320] especially with the adults I've been teaching [15:31.320 --> 15:33.320] they are very busy work lives [15:33.320 --> 15:37.320] they are trying to learn programming while still taking care of the families [15:37.320 --> 15:39.320] if they have a simple tool they can use [15:39.320 --> 15:41.320] for example while on public transport [15:41.320 --> 15:44.320] that's a huge quality of life improvement for them. [15:44.320 --> 15:49.320] So let me finish this presentation by telling you all [15:49.320 --> 15:51.320] I know you're all a community of builders [15:51.320 --> 15:54.320] if you think like hey these kind of tools you discussed [15:54.320 --> 15:55.320] I can build those [15:55.320 --> 15:58.320] feel free to reach out to any learning environment [15:58.320 --> 16:01.320] close to you and try to ask how you can contribute. [16:01.320 --> 16:03.320] Thank you all for listening.