4.1. User Interface

UI Screenshots

For the aesthetics of the page we have opted for a retro look that is reminiscent of old NES games. We felt like this style would be easy to work with, and also create a unique and iconic look for our web application. The aesthetic is also referential of old role-playing games (RPGs), where a lot of the battles are held through back-and-forth turn-based interactions between the player's party and a boss character. We adopted this approach in our gamification attempts, which emulate such text-based RPG battles.

Login Page

Screenshot	Description
	The login page shows users our logo and has a single button for logging in, a throwback to the splash screen of games of old.
	Users log into the system through IVLE.
	An error page is shown whenever the user navigates to a 404 or unsuccessfully logs in.

Dashboard Page

Users can purchase and change their avatars in the dashboard. The levels and experiences gained in each tutorial are displayed here as well.

The modules list opens up to show the leaderboard, which ranks users in the tutorial according to the levels they've gained.

Lobby Page

Tutors are able to compose questions to be sent to students in the question composer. Tutors also are able to edit groupings within the tutorials in the active users list.

When a question is sent to a group of students another card appears to show that the students are in the process of answering the questions.

Once the students have decided on an answer the tutor can proceed to grade it and then send it back as experience to the students, taking damage for each point of experience given!

Students, on the other hand, can provide their own answers and vote for the one they believe is most correct. When a student receives all of the votes from the members of the group, they may submit the answer for grading!

Once the tutor has finished grading all the questions and sends it to the students, students may review the answers provided by all groups the question was addressed to.