Overview

Role: Front-end web development

During my internship at Carnegie Mellon University’s Human Computer Interaction Institution, I worked primarily with Professor Vincent Aleven’s lab on the gamification features of Lynnette, an intelligent tutoring system. For this project, I primarily worked on the implementation of the gamification design made by another intern; I will give an overview of the design principles and the methods I utilized to implement them.

What is Lynnette?

Lynnette is an intelligent tutoring system geared towards middle school students to primarily help with algebra learning. Previous research has demonstrated the effectiveness of intelligent tutoring systems in bolstering the learning of its users, due to its ability to provide personalized feedback on student progress, but intelligent tutoring systems have tended to focus more on learning effectiveness rather than student engagement. We aimed to also bolster student engagement with Lynnette by implementing gamification features, such as an achievements system and an immersive storyline.

My primary work was the implementation of the achievement system designed by my teammate. The achievements system of Lynnette is built on two main gamification principles: it stimulates the users' desire to complete and visually reinforces the feeling of accomplishment.

The modal not only gives additional information pertaining to their achievements, but also allows the user to directly access the pset, which encourages students to continue their psets for achievement progression, stimulating the desire to complete. Yellow here is a significant color to show whether achievements are completed or not; otherwise, the achievements listed in the modals are a dark blue similar to the blue in the space background.

The purpose of the sidebar is to have another convenient way to access achievement progress for each pset. When hovering over the achievement, there is an overview of what the achievement is called (which directly ties to the storyline that comes with each pset), what must be achieved to get the achievement, and when the user got the achievement.

For the implementation of the achievements page, I was working with an existing codebase that used Vue to run the page. Making changes to the page required HTML/CSS and JavaScript. The first step to this process, then, was understanding the codebase I was working with.

The first problem I encountered during these 10 weeks was actually getting changes I made to the code for the achievements page to be visible on the actual achievements screen. The previous achievements screen setup was much different, where instead of having the planet images in a map arrangement, they took the form of a list:

The first problem was that the planet images, while in the code, were not actually showing up. This was fixed by making some changes to certain properties added to these images in the codebase. Once the planet images showed up. The circular planet arrangement was accomplished by using the CSS grid property and then making modifications to each image’s positioning with position properties.

The next step to the planet map was implementing a progress bar for each planet. This was accomplished through masking. I used the grayed-out picture of the planet as the mask. Since in the codebase, there was already an existing property that denoted the mastery-level or progress of each pset, I used this property to determine what percentage of the grayed-out picture showed over the colored planet picture:

Modals were accomplished with an overlay that shows up in the center of the screen when each planet is clicked. Planet masking is the same as the planet masking on the main page. Whether or not achievements in the modal are yellow (aka, already obtained by the user) are dependent on achievement information we get from detectors, a JavaScript file which gets all the transactions from the tutor for each pset. For the achievements screen, I made different detectors meant to specifically check for each achievement from the tutor. If an achievement is obtained, the modal’s achievement elements will modify itself accordingly, as well as the achievement elements on the sidebar.

Key takeaways

1. Although my role was not that of a designer, communicating directly with designers was an crucial aspect so there was an understanding of the technical constraints I faced in implementing their design. As a programmer, I felt I was sufficiently challenged by the designers I worked with, and became aware that as a designer, it is important to consider the technical capabilities and constraints of your developers.

2. As this was also my first internship experience, I learned the importance of being able to effectively regulate your time so that the team can meet their desired goals within the desired timeframe. Since this was my first time working on such a big project, this was my first time learning how to work as one collaborator in a larger lab. A lot of what motivated my work was knowing that I could have a direct impact on the direction of this project, and that my work would be a part of their research.

3. Learning how to ask for help! Although I came to the project having the coding skills necessary for implementation, learning a concept in class and applying it to an actual project felt very different. I learned many new things about website building during my time on this project; this internship was also the first time I was using Vue or working with files like detectors. I’m greatly appreciative of the lab’s staff programmers, Octav Popescu and Jonathan Sewall, for their patience in answering all my questions and helping me with the implementation issues I encountered.