Our team was excited about the idea of gamifying studying and promoting the interaction between fellow MCIT students. Hence the MCIT Online Study Smackdown game was born!

What it does

An online quiz app that allows you to test your core MCIT knowledge against other students

How we built it

Built with HTML, CSS, and Vanilla JS

Challenges we ran into

While making MCIT Online Study Smackdown, we ran into two principal challenges: optimizing the application for mobile and adding animations to the app. Optimizing the app for mobile meant that we needed to utilize CSS flexbox and viewport density to ensure that the app would render properly on both desktop-sized environments and mobile environments.

The animations on the final page of the app were also quite difficult. We had to learn about the CSS transitions, animation, and keyframes properties and how to use those to make the animations we ended up with. After a lot of tinkering, we got it looking great!

Accomplishments that we're proud of

We're extremely proud of the app as a whole! We set out to learn more about web development and ended up with a cohesive product that we're both excited to expand on in the future! We feel that this app could have real, tangible benefits for members of the MCIT Online community by helping them study. We're also proud about the way we divided labor across the project and efficiently tackled the tasks that were in front of us.

What we learned

While making the app, we learned a lot about the DOM (document object model), CSS media queries, and CSS flexbox. Using JavaScript to traverse the DOM proved an extremely useful tactic for dynamically changing the way the page was rendered, including the colors of various objects and what was visible on the page. CSS media queries were useful to set a specific viewport size at which the page would break to either desktop or mobile versions. Learning about CSS flexbox also allowed us to efficiently design an app that works great on both a desktop and mobile environment.

What's next for MCIT Online Study Smackdown Game!

  • Allowing players to add their own custom questions into a quiz database
  • A self-study mode with unlimited questions and the ability to favourite/tag questions
  • Addition of quiz questions for the electives

Built With

Share this project: