 I'm just going to put this guy up here. It makes a little bit more sense towards the end of the presentation. So yeah, my name is David Beaumont. I'm from Box Hill TAFE, or Box Hill Institute, actually. It's now called. And my presentation is on engaging secondary school learners at Yaranger's Tech School. And I'm just going to refer to it as YRTS, because it's a bit of a mouthful. So first of all, I thought I'd give you a quick background about the Yaranger's Tech School. So the Victorian government invested $128 million to develop 10 tech schools around the state of Victoria. And the aim of these tech schools was to prepare high school students for future careers by introducing them to up and coming technologies such as virtual reality, 3D printing, robotics, and electronics. And I guess we also wanted to get the students to look at the real world applications of these technologies as well. So in mid-2016, our team began designing the curriculum for the Yaranger's Tech School. And the aim was to roll out a trial version of the high tech hospital scenario in early December. So I'm part of the multimedia team. So I'm a multimedia designer. And our job was to be able to create a vibrant, fun, and engaging online learning environment. The user interface had to be clean and easy to use as the students would be completing some of the pre-learning activities before coming into the tech school. And the site also had to be tablet friendly as well, as when the students were in the tech school, they'd be using tablets to work through the instructions for the main challenges. And I apologize for any dog lovers out there. I'm a cat person, so it's putting it out there. So three mock-ups were designed. And this is one that was chosen. A separate instance of Moodle was created. And we use a clean theme as a basis and kind of built from there. We integrated some JavaScript libraries and some other assets as well just to speed up build time. So as you can see as well, we kind of went for quite vibrant, bright colors. We went for a mixture of photographs and also vector graphics as well. All the vector graphics are quite kind of comical as well, because we're obviously trying to design for year eight, nine, and 10 students. As you can see here on the front page, we've got a tab menu as well. My workspace tab is the main menu which students will be working out of. Across the top, we just have a few links off to site pages. And as you scroll down, there's links off to the courses which the students are enrolled in. So the site's also responsive as well. So this is just an example of the desktop view. Go down to like a tablet size view and also down to mobile device as well. Although not many students would be actually accessing this content on their mobile being more so for tablets and desktop. We also wanted to create a more visual experience for students when they first entered the course. So we came up with this idea of creating a graphic which was meant to be a little bit of fun and not too serious, but it contained objects that related to the pre-learning activities. So for example, this course was the insectoid sewer challenge. And we had a topic about biomimicry. And so that was represented by the little fish which is swimming around in the fishbowl. And another topic was also arduinos. So we had a little boring drill which was arduino operated. So this was just a HTML block positioned at the top of the course with a little bit of custom HTML CSS and JavaScript to get the course search working. We also went for a grid format as well for navigation just for ease of use on tablets. This was something that was developed internally as well a while ago for our other instance of Moodle. So we just kind of adapted that. But the way that this works is that a bit of JavaScript just loops through all the sections in the course and it takes the title and the description and creates these buttons which then link off to the first page in that section. There's also dividers as well. So if the section is kept empty with no description, it creates a divider for you. So background briefings is just an example of a divider. So we have kind of sections and subsections. And the reason why we did that is because students and teachers would be doing things off-site and then they would be coming in to do things on-site. And we wanted to make that really clear as to what they had to do off-site and on-site. So we had a learning designer with us and she's just left actually to go to another job which was disappointing. But she was really passionate about gamification and she encouraged us to look at gamification in ways that we could quickly embed it into Moodle. And our time frames were quite short as well. So we couldn't do anything crazy and super fancy. So we came up with the idea of taking this initially static scene and making it into an interactive scene. So initially when the student enters the course, the scene is empty. And as they work through the pre-learning activities, the scene then starts to get populated with different objects. And these objects are, I believe this works, animated as well. So they're just on a loop animation which goes for either five to 10 seconds. And they're also clickable as well. So the student can then see what they've been rewarded that object for. So for example, this one here, you have successfully completed the biomimicry section. Your reward is the filter-o-fish state of the art Self-filtration system does a job no human wants to do. So the guys on the multimedia team had a good time coming up with the names for these things. So hopefully the students enjoyed it as much as we did. These are some examples of other scenes. So the top one is a high-tech hospital challenge and the bottom one is the wearables challenge. And so the way that we created these scenes is first of all creating the assets in Illustrator. Some of them were purchased as well just to speed up development time. Once we created them in Illustrator, we then imported them into After Effects and we did the animation in After Effects. And there is a plugin called Cheetah, which is like Cheetah but within S. And that allows you to export these as sprites. Then in order to play it in the browser, we used a JavaScript library called Collie. And so for those of you who don't know what a sprite is, it's literally just a series of images in a straight line and you kind of have a window and that kind of moves along and it looks like an animation as it kind of moves along because it's not showing everything at the same time. I might make a bit more sense later when I show you another slide. We also made use of the certificate plugin in Moodle. So students were required to do a work permit before they came to the tech school. And the work permit was just like a safety quiz. So it was kind of like when you go to construction site, you need a white card. But for this one, they needed their work permit before they could come in and use the equipment. So once they completed the quiz, we released this for them to print. And we also used the certificate plugin as well to generate certificates as well once they've completed each of the challenges. Also you might have noticed in the scene that we had little avatars standing off to the left. So because we didn't have a lot of development time and we couldn't allow the users to fully create their own avatar and customize it, we just came up with a number of different generic avatars. We had an even mixture of boys and girls, robots and animals. And hopefully having a big enough variety that at least one of them is going to appeal to the user. Again, so this is kind of what a sprite looks like, I guess. These ones were just created in Illustrator. I'm not taking them over to After Effects because the animation is quite simple. It's literally just the guy or the girl's eyes opening and closing just to give them a bit of life. Oh, actually one other thing I wanted to mention about avatars is that once the user selected the avatars in their avatar in the scene, that then gets saved to the database and wherever they go in Moodle, that avatar will appear. So another thing which was developed was a self-reflection survey which gave instant feedback. So the user works through a number of questions, just assessing themselves on how they went during the challenges. And when they get to the end, it spurts out their results. So it tells them what their strengths were, what their weaknesses were. And then there's also some mapping towards potential future careers for the students as well. They can also see their results in a visual format. So I've just got like an interactive graph here. So when they hover over the different sections, they can see what they were good at and what maybe they could improve on. And this was all developed by the other guy, who's in the multimedia team, who's extremely talented. And I promise I wouldn't mention his name because he's a little bit shy. But he developed this using PHP view.js, which is the lightweight JavaScript framework which allows you to rapidly build user interfaces. So something that for any of the developers out there, something that might take a few lines of jQuery to do, you could then do in just one line of view. And he also used Chart Bundle as well, and that's what's generating the colorful chart, interactive chart here. Lastly, I just wanted to talk about rapid on-boarding as well. And so we had a number of different schools coming to the tech school. So we wanted to make sure that the information that we were giving them was the same. We thought, well, maybe we could create animation which can then be shown to the students before they enter the tech school. So I'm just going to play you this, if I can. And then I'll go through 20 seconds. And that didn't work. Let's try that again. Let's try that again. From your work here, we would like you to work in TIN. Each of you should have a specific role in your TIN. Each TIN will have a leader, a recorder, and a checker. A leader has the overall responsibility for encouraging participation. So that just kind of gives you an example. Again, to create that was just using Illustrator to create the graphics and using some pre-precious graphics as well to speed up the process and then taking it into After Effects to animate. There's a cool little tool in After Effects called the Puppet Tool which allows you to plot points on the graphics body. So I could plot a point on the end of my arm at the elbow and then at the shoulder and then I can kind of start to move that graphic around and record as I'm moving that graphic around. So that just kind of speeds up the process of creating animation because anyone who's ever tried to do it before, it can be quite time consuming. We also had JavaScript Bootstrap Tour. You may have seen this before but all it is is a bit of a JavaScript library which allows the user to do a virtual tour by themselves. They just click on the Start Tour button and up on the right there and that starts to take them around the web page and you just have to put a blurb in to describe exactly what that thing is and it will just jump around to the different things and explain it to the user. They can exit the tour at any stage so it's just a nice little extra to have just to get people familiar with your site. So this was the feedback which we got from our students which was pretty good I think and also from teachers again we're relatively happy with that although I would like to incorporate into the surveys I guess get some more information about gamification and some of the things that I've talked about in this presentation and see whether those things are actually increasing student engagement. So that's one thing I'm going to look at once I get back to work and at the moment most of the reporting is just done to satisfy government because it's government funded but I reckon I'd be able to just slip a question in there and no one else would know although this is being recorded so I probably shouldn't have said that. And last of all thank you very much for listening these are the people who have been involved in the project some of them are from the team or the department that I'm in teaching innovations and others work out at the site providing the training for the students and teachers and I just had a little challenge for you guys if you can pick the two people who actually weren't here that night when this photo was taken you'll get this little guy here as a is a reward so if you've got questions feel free to ask now and otherwise you can just shout out who you think was not there one of them is quite easy to pick up. Lady in the red yes a guy in the white shirt no. Anyone else so yes a guy at the back in the far right there that's that's my manager yeah the lighting conditions was quite good for him when I was photoshopping it in so anyway that's that's yours so I hope you like Darth Vader and do you want to come up here and grab it.