EduSteem - Student interface (Dashboard)

Repository

https://github.com/bflanagin/EduSteem

Continuing with the relentless march toward the first day of school, and with the student login complete, we turn our attention to the way the students will interact with the system. This will be the first post in the series about the student area.

New Feature: Student dash board

Based around similar "daily task" interfaces the student's dashboard gives the user quick access to everything they need for the day. From top to bottom we have:

• Next Class: Based on time of day as well as the students personal progress through the day those that have classes that don't need instruction can be accessed and completed by the student given the teacher has given them permission.

• Today: Lists all classes that will be taught that day regardless to the time. This serves two purposes 1. to help the student understand what is expected of them and when the teacher has graded the work the student has done a status update can be displayed on the class to inform the student if they're work is accepted or if they need to go back and work on it more. Please note the Reading class and how it is different the then rest. When a student mouses over the class a description of the class as well as other options become visible. Clicking on the 'play' button will start the class.

• Continue Work: This area is for all uncompleted work that the student may have in his or her queue. It works exactly like the Today list but is not connected to any calendar.

Along with the active view shown above, each student has access to a personal side panel with quick stats on how they are progressing. (fig. 2)

(fig 2)

Implementation

Following the style set by earlier parts of the program the Student UI is found in a sub folder called Student and there you will find the main interface file named StudentUI.qml. For the interface we had to create a 'card' to hold the school info this was done by creating a Item QML file named Card.qml and is referenced with in StudentUI file like so:

            GridView {
                id: classGrid
                width: parent.width * 0.98
                anchors.horizontalCenter: parent.horizontalCenter
                height: contentHeight
                cellWidth: 405
                cellHeight: 250
                clip: true

                model: todaysClasses

                delegate: Item {
                    width: classGrid.cellWidth
                    height: classGrid.cellHeight
                    clip: true

                    Card {
                        width: parent.width * 0.96
                        height: parent.height * 0.96
                        anchors.centerIn: parent
                        curtainColor: classColor
                        title: classtitle
                        unit: unitName
                        lesson: lessonName
                    }
                }
            }

As with other parts of the program we separate the logic into its own file titled student.js . Given the interface is still being built the logic file is primarily filled with placeholder functions this will of course be remedied as the UX is finalized.

Find out more

eduSteem is going through a development sprint. These weekly updates, help keep me on track as well as giving those that are interested detailed reporting of my progress. The goal is to have it ready for use in a small school setting by the end of July. For further reading check out these other posts here on Steemit.

• Introduction
• Week 1
• Week 2
• Week 3a
• Week 3b
• Week 4

GitHub Account

https://github.com/bflanagin