Design
To allow compatibility between mobile and desktop, the webapp will change layout depending on the display's aspect ratio. However, the core functionality and backend programming will be the same. To design these, we used Mockitt.
This is the main screen of the app that the user will see on every bootup after loading/creating a database. It features a scrollable list of all the students, with a preview of their data. Tapping on a student then opens a more detailed view of their information. The navigation bar at the top has three features: left will open the menu, center shows the current course and provides a dropdown, where the user can add a new course, and the top right opens the cold call feature.
This screen provides a quick summary of a student's performance and randomly chooses one to be called on based off of the weighted algorithm. The absent and not prepared buttons will change color when pressed to signify that they are being added to the current rating, and next confirms the input.
The menu slides down from the top and darkens the inactive window for better contrast. It can be closed either by tapping the grey area or tapping the close menu button. Save To and Import From provide a dropdown when pressed, allowing the user to choose from the device's internal file manager, OneDrive (need to look into how the API for this works), and Text (from clipboard). (Import From is used to transfer between devices: data is automatically loaded from last database used when opening the app)
A more detailed view on a student's performance. It shows all prior calls in a scrollable list and has a graph which can be zoomed and shows a rolling average of performance. The pencil icon allows the items to be edited when tapped through a popup.
Item: Popup to edit student name/seat/string data.
Rating: A condensed version of the cold call rating choice in case an error was made.
Manual: Adds students to the current open course. Pressing the X removes them and all of their associated data (with a confirmation popup).
Text: Allows the user to paste from their clipboard, or automatically import from an existing spreadsheet of student names, and data if applicable. (data format here is undetermined, using rating_unixtimestamp as a placeholder). Only student name is required.
First screen the user will see if they have never opened the app. Provides a shortcut to import an existing database or create a new course (and database, which is automatically made if not loaded)
This is the main screen that the user will see after loading/creating a database. It features a scrollable list of all the students, with a preview of their data. Clicking on a student then opens a more detailed view of their information. The navigation bar at the top has three features: left will open the menu, center shows the current course and provides a dropdown, where the user can add/drop courses, and the top right opens the cold call feature.
The menu pops out from the right and darkens the inactive window for better contrast. It can be closed either by clicking the grey area or clicking the close menu button. Save To and Import From open a pop up window when clicked, allowing the user to choose from the device's internal file manager, OneDrive (need to look into how the API for this works), and Text (from clipboard). (Import From is used to transfer between devices: data is automatically loaded from last database used when opening the app)
Allows the user to paste from their clipboard, or automatically import from an existing spreadsheet of student names, and data if applicable. (data format here is undetermined, using rating_unixtimestamp as a placeholder). Only student name is required. Clicking the X removes them and all of their associated data (with a confirmation popup). Clicking the edit button allows the user to edit student information, such as their name and seat position.
Allows the user to add a new course. The user will enter the course name, start date, and end date. This pop up window is opened when the add course button is selected from the courses dropdown. The background is greyed out to emphasize the window. The window can be exited be by clicking the x in the top right or by clicking outside of the window.