Create "Learner Model" UI for Engagement

[JoelWiebe]

The Learner Model UI will be added as part of the CK Monitor UI to display graphs of student data (some data manually entered by the teacher and some gathered from the CK Board).

The student and the teacher will each have access to the CK Monitor that includes the Learner Model UI (available as a button from any board canvas within a project), but the Learner Model will display differently for teachers and students.

1. The learner model will be added to the CK Monitor.

2. For the teacher, the heading "Learner Models" can be added below the task monitoring tools

   
   • Selecting "View by Engagement" will open up a graph that shows a graph of all students' scores by that metric
   • A select control should allow for toggling between "Diagnostic" and "Re-assessment" values

• Alternatively, clicking on a single student's name will show all graphs for that particular student (i.e., for now, just the Engagement Model -- others can be implemented later)

3. Each Learner Model view should contain a gear in the top right corner which opens an editing screen for editing the dimensions of the Engagement Model

• This allows dimensions to be (1) named and added to the model or (2) removed

4. To view or modify the data for each student, the teacher can select the student's name in the left pane.

   • Displayed data includes: Engagement - entered by the teacher in terms of (a) diagnostic and (b) re-assessment
   • (Other graphs will be implemented in the future)
   • The legend should include (a) Diagnostic, (b) Re-assessment, (c) Avg student diagnostic, (d) Avg student re-assessment

5. When viewing the data for each individual student, a pencil icon should exist next to the settings gear in the top right of the Learner Model UI which allows for editing each student's data

• Clicking on the pencil opens the a modal pop-up for the teacher to enter the dimension values for the Engagement Model

• The modal pop-up opens to the current student whose data was being viewed
• The teacher also has access to a drop down that allows them to edit the data of other students
• There are also two sets of data for each student: "Diagnostic" and "Re-assessment"

Resources and recommendations

Please send me a PR early so I can review at each major step

Important: To see demo code of the javascript that I used to create the visualizations shown above or to explore other interactive demos, please explore the resources below:

• Highcharts demo code.zip
• https://www.highcharts.com/demo/polar
• https://www.highcharts.com/demo/gauge-activity

[JoelWiebe]

I updated the description above to just focus on Engagement. This will be repeated in the future for Content and Engagement -- if it's quicker to just build all three now, we can do that. Otherwise we can come back to these.

If building all three, the "View by..." buttons in the left pane may be ordered:

1. View by Engagement
2. View by SEL
3. View by Content

For now, we can ignore the "View Overview" button displayed in the images above.