Slay n' Study

Normal studying is boring. Why not hack away at enemies while doing it?

Comment

Inspiration

As college students, studying is a necessity. However, studying can feel boring and monotonous. To create a more fun studying experience, we built Slay n' Study. This studying game has a user play a knight that battles slimes while the user answers flashcard questions they created.

What it does

Slay n' Study is a flashcard game that utilizes amazing and creative characters to foster a more engaging learning experience. Players can log into their own study sets where they can add and delete cards, and then continue on to answer flashcard questions. Answering incorrectly causes the player to take damage, but answering correctly lets the player continue. This adds a layer of fun to learning while also being low stakes, and encouraging continued practice, by allowing the user to continue studying their cards regardless of whether or not they successfully completed their study set without losing all of their character health.

How we built it

The front end of our game was created using HTML and CSS with Bootstrap. We built the game logic using JavaScript, which included randomizing card order, tracking right and wrong questions, and storing that data using MongoDB through our back end. The back end was built using Express.js and Node.js. We used Git and GitHub to manage our version history.

Challenges we ran into

At the start of our project, we knew we would need to divide the work if we were to accomplish our goals, so we split up the workload in half, with two members of our team working on front end and two members working on the back end. The labor was further divided by module-specific functionality in order to not only work efficiently, but also to minimize conflicts when pushing to the main branch of our repository. While this seemed to work on paper, it caused problems later down the line because we spent a good number of hours our first day coding/working in isolation and testing in isolation. This ended up being an oversight as it consequently caused a significant number of compatibility issues when we shifted to trying integrate all of our separate modules. Trivial assumptions about function parameters and function calls propagated into failure within our application's underlying logic, and forced us to refactor a lot of our code, which consequently took time away from implementing features we had initially hoped to implement. However, through diligent debugging, we managed to resolve most of the issues we faced. There were a lot of issues regarding storing data into MongoDB, such as formatting issues and utilizing JSONs, but we ended up figuring out how to send our card data through the back end's endpoint and sent it to MongoDB using Mongoose.

Accomplishments that we're proud of

While we faced several major setbacks during day two and things were looking grim, through pair programming, we were able to successfully refactor our code to get our underlying game logic running. Most of us in our team had little to no experience using JavaScript, but despite this, we were able to learn how to use JavaScript to make our program function. For frontend and design, we weren't entirely sure how to go about it in the beginning, since our ideas involved a lot of art. We decided on a simple implementation of using JavaScript to change 2-frame gifs which we hand-animated with a less detailed but cuter art style, which ended up saving a lot of time but is still simple and cute. We are also proud of creating the backend using node.js and express as well as getting the font end to connect to out MongoDB database.

What we learned

We learned several new skills and improved on many of our existing skills during the course of the development of this project. Half of us learned how to use JavaScript for the first time. We learned how to use Git branching to manage different versions of our project and how to deal with merge conflicts. We learned how to create the backend for the project without any prior knowledge of JavaScript, Node.js, Express or Mongoose and had to figure out how to connect the front end to the backend with API calls.

What's next for Slay n' Study

The next steps for Slay n' Study will be implementing health for the slime enemies and adding different color variations of the slimes so the slime the user can see will periodically change color. Another addition we planned was more frequently displaying the flashcards the user got incorrect more often than correct.

Share this project:

Updates