💻 Class overview redesign (#5610)

This PR introduces a new redesign for the Class Overview page, by merging it together with the 'Live Statistics' and 'Overview of programs per adventure' pages. This simplifies the UI a lot, by not confusing users having to navigate through different and uneven UI elements. In this image we can see the new UI:

![image](https://github.com/hedyorg/hedy/assets/45865185/1b60aeb5-3fb1-4d24-816b-34e617f8f684)

In the image we can distinguish 3 different sections:

1. First the teacher is greeted with a table where they can check and verify the students saved programs. Here they can also perform several actions: change the password, delete the student from the class and also see their programs.
2. Then, teachers can see a graph representing the engagement of the students with the contents, measured trugh their numbers of adventures tried, with respect to their numbers of errors and successful runs.
3. After this the interface is similar to the one before, showing teachers and invitations.

Fixes #5097
Fixes #5424

**How to test**

* Go to the class overview page of a class, check it out.

I had to open a new PR for this, but @Annelein also helped a lot in the building of this feature! Thanks a lot 😄

app.py

@@ -117,7 +117,7 @@ def get_locale():
 ACHIEVEMENTS = achievements.Achievements(DATABASE, ACHIEVEMENTS_TRANSLATIONS)
 SURVEYS = surveys.SurveysModule(DATABASE)
 STATISTICS = statistics.StatisticsModule(DATABASE)
-
+FOR_TEACHERS = for_teachers.ForTeachersModule(DATABASE, ACHIEVEMENTS)
 TAGS = collections.defaultdict(hedy_content.NoSuchAdventure)
 for lang in ALL_LANGUAGES.keys():
     TAGS[lang] = hedy_content.Tags(lang)
@@ -635,7 +635,7 @@ def parse():
     # Save this program (if the user is logged in)
     if username and body.get('save_name'):
         try:
-            program_logic = programs.ProgramsLogic(DATABASE, ACHIEVEMENTS, STATISTICS)
+            program_logic = programs.ProgramsLogic(DATABASE, ACHIEVEMENTS, FOR_TEACHERS)
             program = program_logic.store_user_program(
                 user=current_user(),
                 level=level,
@@ -2797,7 +2797,7 @@ def current_user_allowed_to_see_program(program):
 
 app.register_blueprint(auth_pages.AuthModule(DATABASE))
 app.register_blueprint(profile.ProfileModule(DATABASE))
-app.register_blueprint(programs.ProgramsModule(DATABASE, ACHIEVEMENTS, STATISTICS))
+app.register_blueprint(programs.ProgramsModule(DATABASE, ACHIEVEMENTS, FOR_TEACHERS))
 app.register_blueprint(for_teachers.ForTeachersModule(DATABASE, ACHIEVEMENTS))
 app.register_blueprint(classes.ClassModule(DATABASE, ACHIEVEMENTS))
 app.register_blueprint(classes.MiscClassPages(DATABASE, ACHIEVEMENTS))
@@ -2807,7 +2807,6 @@ def current_user_allowed_to_see_program(program):
 app.register_blueprint(quiz.QuizModule(DATABASE, ACHIEVEMENTS, QUIZZES))
 app.register_blueprint(parsons.ParsonsModule(PARSONS))
 app.register_blueprint(statistics.StatisticsModule(DATABASE))
-app.register_blueprint(statistics.LiveStatisticsModule(DATABASE))
 app.register_blueprint(user_activity.UserActivityModule(DATABASE))
 app.register_blueprint(tags.TagsModule(DATABASE, ACHIEVEMENTS))
 app.register_blueprint(public_adventures.PublicAdventuresModule(DATABASE, ACHIEVEMENTS))

build-tools/heroku/generate-client-messages.py

@@ -25,7 +25,13 @@
     'disabled',
     'adventures_restored',
     'multiple_keywords_warning',
-    'selected'
+    'selected',
+    'adventures_tried',
+    'graph_title',
+    'errors',
+    'adventures_completed',
+    'number_of_errors',
+    'successful_runs'
 ]
 
 

content/client-messages.txt

@@ -7,4 +7,10 @@ gettext('directly_available')
 gettext('disabled')
 gettext('adventures_restored')
 gettext('multiple_keywords_warning')
-gettext('selected')
+gettext('selected')
+gettext('adventures_tried')
+gettext('graph_title')
+gettext('errors')
+gettext('adventures_completed')
+gettext('number_of_errors')
+gettext('successful_runs')

messages.pot

@@ -176,9 +176,6 @@ msgstr ""
 msgid "add_students"
 msgstr ""
 
-msgid "add_students_options"
-msgstr ""
-
 msgid "add_your_language"
 msgstr ""
 
@@ -236,12 +233,18 @@ msgstr ""
 msgid "adventures"
 msgstr ""
 
+msgid "adventures_completed"
+msgstr ""
+
 msgid "adventures_info"
 msgstr ""
 
 msgid "adventures_restored"
 msgstr ""
 
+msgid "adventures_tried"
+msgstr ""
+
 msgid "ago"
 msgstr ""
 
@@ -326,7 +329,7 @@ msgstr ""
 msgid "class_customize_success"
 msgstr ""
 
-msgid "class_live"
+msgid "class_graph_explanation"
 msgstr ""
 
 msgid "class_name_duplicate"
@@ -341,7 +344,7 @@ msgstr ""
 msgid "class_name_prompt"
 msgstr ""
 
-msgid "class_overview"
+msgid "class_performance_graph"
 msgstr ""
 
 msgid "class_survey_description"
@@ -614,6 +617,9 @@ msgstr ""
 msgid "error_logo_alt"
 msgstr ""
 
+msgid "errors"
+msgstr ""
+
 msgid "exclamation mark"
 msgstr ""
 
@@ -740,6 +746,9 @@ msgstr ""
 msgid "goto_profile"
 msgstr ""
 
+msgid "graph_title"
+msgstr ""
+
 msgid "grid_overview"
 msgstr ""
 
@@ -908,9 +917,6 @@ msgstr ""
 msgid "last_error"
 msgstr ""
 
-msgid "last_login"
-msgstr ""
-
 msgid "last_program"
 msgstr ""
 
@@ -1166,6 +1172,9 @@ msgstr ""
 msgid "number_lines"
 msgstr ""
 
+msgid "number_of_errors"
+msgstr ""
+
 msgid "number_programs"
 msgstr ""
 
@@ -1211,9 +1220,6 @@ msgstr ""
 msgid "owner"
 msgstr ""
 
-msgid "page"
-msgstr ""
-
 msgid "page_not_found"
 msgstr ""
 
@@ -1637,9 +1643,6 @@ msgstr ""
 msgid "student_details"
 msgstr ""
 
-msgid "student_list"
-msgstr ""
-
 msgid "student_not_allowed_in_class"
 msgstr ""
 
@@ -1676,6 +1679,9 @@ msgstr ""
 msgid "subscribe_newsletter"
 msgstr ""
 
+msgid "successful_runs"
+msgstr ""
+
 msgid "suggestion_color"
 msgstr ""
 
@@ -1757,12 +1763,6 @@ msgstr ""
 msgid "title_admin"
 msgstr ""
 
-msgid "title_class grid_overview"
-msgstr ""
-
-msgid "title_class live_statistics"
-msgstr ""
-
 msgid "title_class-overview"
 msgstr ""
 
@@ -1934,6 +1934,9 @@ msgstr ""
 msgid "view_slides"
 msgstr ""
 
+msgid "waiting_for_submit"
+msgstr ""
+
 msgid "walker_variable_role"
 msgstr ""
 

package.json

@@ -42,7 +42,7 @@
     "@types/jqueryui": "^1.12.16",
     "autoprefixer": "^10.4.2",
     "chai-colors": "^1.0.1",
-    "chart.js": "^3.6.2",
+    "chart.js": "^4.4.2",
     "codemirror": "^6.0.1",
     "cypress-real-events": "^1.12.0",
     "dompurify": "^2.3.5",