[FEATURE] Adds option for teacher to set quiz threshold for unlocking…

… next level (hedyorg#3362)

**Description**
In this PR we add an exciting new feature: quiz thresholds! Teachers are able to set a quiz score between 0 and 100 that is the minimal score needed for the user to "unlock" the next level. When the score is not reached yet the level is unlocked and the 'next level' button is hidden. This should make it easier for teachers to make multiple levels available but still ensure that children have an understanding of a level before skipping to the next one.

**Fixes**
This PR fixes hedyorg#3298

**How to test**
Make sure you are a teacher and navigate to the customization of a class. Notice the new "unlock thresholds" option on which you can set a quiz value between 0 and 100. Set it and verify with a student account that this indeed works as expected. When trying to directly navigating to a non-locked and not-achieved level the following error should be shown:

`Quiz threshold not reached to unlock this level`

app.py

@@ -821,6 +821,9 @@ def index(level, program_id):
     else:
         adventures = load_adventures_per_level(level, g.keyword_lang)
 
+    # Initially all levels are available -> strip those for which conditions are not met or not available yet
+    available_levels = list(range(1, hedy.HEDY_MAX_LEVEL + 1))
+
     customizations = {}
     if current_user()['username']:
         customizations = DATABASE.get_student_class_customizations(current_user()['username'])
@@ -838,6 +841,36 @@ def index(level, program_id):
     if 'levels' in customizations and level not in available_levels:
         return utils.error_page(error=403, ui_message=gettext('level_not_class'))
 
+    # At this point we can have the following scenario:
+    # - The level is allowed and available
+    # - But, if there is a quiz threshold we have to check again if the user has reached it
+
+    if 'level_thresholds' in customizations:
+        if 'quiz' in customizations.get('level_thresholds'):
+            # Temporary store the threshold
+            threshold = customizations.get('level_thresholds').get('quiz')
+            # Get the max quiz score of the user in the previous level
+            # A bit out-of-scope, but we want to enable the next level button directly after finishing the quiz
+            # Todo: How can we fix this without a re-load?
+            quiz_stats = DATABASE.get_quiz_stats([current_user()['username']])
+            if level > 1:
+                scores = [x.get('scores', []) for x in quiz_stats if x.get('level') == level - 1]
+                scores = [score for week_scores in scores for score in week_scores]
+                max_score = 0 if len(scores) < 1 else max(scores)
+                if max_score < threshold:
+                    return utils.error_page(error=403, ui_message=gettext('quiz_threshold_not_reached'))
+
+            # We also have to check if the next level should be removed from the available_levels
+            if level < hedy.HEDY_MAX_LEVEL:
+                scores = [x.get('scores', []) for x in quiz_stats if x.get('level') == level]
+                scores = [score for week_scores in scores for score in week_scores]
+                max_score = 0 if len(scores) < 1 else max(scores)
+                # We don't have the score yet for the next level -> remove all upcoming levels from 'available_levels'
+                if max_score < threshold:
+                    available_levels = available_levels[:available_levels.index(level)+1]
+
+    # Add the available levels to the customizations dict -> simplify implementation on the front-end
+    customizations['available_levels'] = available_levels
     cheatsheet = COMMANDS[g.lang].get_commands_for_level(level, g.keyword_lang)
 
     teacher_adventures = []

build-tools/heroku/tailwind/styles.css

@@ -51,7 +51,11 @@ strong {
   @apply bg-green-500 text-white border-green-700;
 }
 
-.green-btn:hover {
+.green-btn:disabled, .green-btn[disabled] {
+  @apply bg-gray-500 border-gray-700;
+}
+
+.green-btn:hover:enabled {
   @apply bg-green-400 border-green-500;
 }