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.
This screen will be prompted to the user when they click on a student in the Web Base. It provides a quick summary of the student for the user, providing them with their prior calls, average rating, bar graph of the students history, and a list of all of all previous calls. Additionally, there are "Last Student" and "Next" student buttons to allow for the user to go through the list of students with ease. There is also an edit button to edit the current student selected in the top right of the screen and a close button to go back to the main screen.
The user can add a student manually on this page by entering the respective student’s information. The user must enter the student’s first name, last name, and seating arrangement. The user may also enter the student’s prior calls and rating, but both of these are optional.
This screen is prompted to the user when they click the edit button on the student metrics page. The user is prompted with multiple options to change things about the current student that is selected in the student metrics page. There are two specific areas of info stored for each student, the first being the ratings that they have received throughout the course and the other being personal info. The user has the ability to change the rating from any specific day for said student along with their first name, last name, and seat.
This screen is prompted to the user when the change the screen to the second option in the Student Editor. Here, the user is able to get a more advance view of the current CSV file being stored and used for the class. The user has the ability of uploading a new CSV file with any update that they have with the course. Formatting is provided in this page to ensure that the user will not have any issues or error occur when uploading their new file.
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.
This page is shown after the professor has chosen to randomly select a student and a student is chosen. This page shows the student's name, seat number, prior calls, average rating, as well as buttons for the professor to rate the student's performance as either -/5 stars, absent, un/under prepared, or a skip button. After a rating or button is clicked an option to choose a new student will appear.