Gamification in Canvas

I worked with an instructor at CSU to develop a gamified course for the Design Thinking (IDEA) program. It is an introductory level course and topics include the purpose of college, strategies for educational wayfinding, and the integration of work and worldview. The instructor wanted to make the course more engaging for students so we designed the course to have a superhero journey theme which you can see in the design, layout, and assessments in the course.

1. Gamification in Canvas LMS Briana VanBuskirk, Laura Malinin, & Sarah Malinin

2. Presenters Instructional Designer CSUO Briana VanBuskirk RDC Director Laura Malinin RDC Operations & Academics Admin Sarah Badding

3. Overview Take a look at a gamified course in Canvas and its components Design elements demo (FreePik, Adobe Illustrator, Canva, CidiLabs Design Tools, PowerPoint) Experiences from the instructor and students

4. Objectives 1 Recognize the benefits of course gamification in relation to student engagement and user experience. 2 Identify tools and resources that can be utilized to add gamification elements to course pages. 3 Discuss ways you can implement gamification strategies in your course s .

5. Course Description: IDEA 110 Designing your University Life “Application of practical design thinking tools, ideas, and decision-making strategies to construct an individualized approach to finding and designing academic and practical experiences. Topics include the purpose of college, strategies for educational wayfinding, and the integration of work and worldview.”

6. Background

7. DESIGN “U” Designing your University Life Gameboard Quests Superhero Theme

8. Quest Assignments Slide decks created by graphic design student, Justin English.

9. Student Samples

10. Finance Videos Ikigai Framework Guest Lecturer Brad Sparks discussing finances.

11. Life Journey Videos

12. Demo time Canvas Course Walkthrough

13. Tools: To create the banners and homepage design I used free vector graphic elements I downloaded from freepik.com and Adobe Illustrator. I used CidiLabs Design tools for Canvas page layout and navigation. If you don’t have these tools, below are other options: 01 | Microsoft PowerPoint 02 | Canva.com 03 | Utilize features of the Canvas page editor

14. Demo time

15. Illustrator Document Setup Open Illustrator File > New Document Width Minimum: 195px Height: Up to you Artboards: 16 (for 4x4 grid) Select Create button

16. Illustrator Document Setup Select the Document Setup button Select the Edit Artboards button Select the Rearrange All button Make Spacing 0px Select the OK button

17. Recap: Freepik Search for and download the freepik item of your choice. Within the .zip file that downloads, there will be either an Adobe Illustrator file or a .eps file. Open either file in Illustrator. If you’re editing the file, don’t forget to right click on the item and “ungroup” so that you can select the individual pieces of the design and change them. Note: you may have to ungroup items more than once, as subgrouped items can be grouped together. Once your design is done, copy and paste it into your game board Illustrator document and arrange it as desired on that page. Tip: It’s easiest to group your items before copy/paste so it stays together after pasting it on the game board document.

18. Exporting in Illustrator When you game board is ready, follow these steps: File > Export > select Export As In the pop-up window, navigate to the folder you’d like to save your game board pieces (artboards) in. Save as type: select JPEG or PNG Check the Use Artboards radio button. Select the All option to export all of your artboards. Select Export . All of your artboards will be saved in the location you selected and then you’re ready for Canvas!

19. PowerPoint Document Setup Open PPT > Select Design tab > Select Slide Size button Example size - width: 16in height: 8in (the width should be divisible by 4 if you have 4 blocks across)

20. PowerPoint Document Setup Create rectangles that fit within the grid. Copy/Paste the box 15x and arrange a grid on your slide Tip: change the box color to white or no fill and the stroke to black for a clean start Note: remove outline on boxes when done.

21. PowerPoint Document Setup Create a 2nd ppt with 16 slides (one for each box) Adjust slide sizes: Select Design tab > Select Slide Size button (make slides the same size as your boxes) Copy/Paste from your grid so that each slide has the individual box Export the slides so you have individual jpegs

22. Setting up Canvas Once you have jpegs to work with, add them to the Canvas page as an image Create links from the images by going selecting the image, going to the link menu, and select course links > choose the page you want to link to Scale the box (in order to activate a width/height in the HTML code) Edit the code and adjust the width to 25% (no height % needed) Note: 25% is based on 4 images (4 x 25=100)

23. Canvas Code

24. UX Design User Experience

25. UX Design User experience refers to the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.

26. Survey of student experience

27. Question 1 This course has a gamified theme. Did you find this style and approach to the course to be more or less engaging than other online courses you've taken?

28. Question 2: 01 Feedback Sample 1: It makes things feel more fun and exciting 2 Feedback Sample 2: It's very fun to be a superhero and to have this self discovery class be about how we all are superheroes in our own way :) 3 Feedback Sample 3 This theme of this course definitely changed my perspective on this outcome of this class. I enjoy the class work. How did the gamified theme of the course change your approach to the coursework?

29. Question 4 How likely are you to take a course again that approaches the learning in a gamified style?

30. Challenges & Upcoming Changes Snow days - difficulty adjusting design on the fly Student backgrounds (some students were seniors, some students in different majors) Maintaining points for grading Adding badging

31. Thoughts/Questions

32. Thank you.