🪲Fix not being able to complete the quiz while in programmer's mode (#…

…5615) If the developers mode was enabled, then the parsons and the quiz became unusable. To solve this I split the logic into two functions: one to set the developers mode and another to show it. Now you can actually complete the quiz and the parsons while in this mode. Fixes #5172 **How to test** * Check the programmer's mode toggle while being logged off and check that you can complete the quiz and the parsons. * As a student of a class with mandatory programmer's mode check that you can complete the quiz and the parsons (I wonder if teachers use this feature much being that no one complained about this before recently)
hedyorg · Jun 17, 2024 · 3c960ee · 3c960ee
1 parent 11e1143
commit 3c960ee
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 27 deletions.
diff --git a/static/js/app.ts b/static/js/app.ts
@@ -759,7 +759,6 @@ function updateSelectOptions(selectName: string) {
         } else if (!optionsArray.includes(text)){
           optionsArray.push(text);
           }
-      console.log(optionsArray);
   });
 
   if (selectName == 'level'){
@@ -788,7 +787,6 @@ export async function delete_program(id: string, prompt: string) {
     const response = await postJsonWithAchievements('/programs/delete', { id });    
     showAchievements(response.achievement, true, "");
     // issue request on the Bar component.
-    console.log("resp", response)
     modal.notifySuccess(response.message);
   });
 }
@@ -1496,7 +1494,7 @@ function createModal(level:number ){
   modal.repair(editor, 0, title);
 }
 
-export function toggleDevelopersMode(event='click', enforceDevMode: boolean) {
+export function setDevelopersMode(event='click', enforceDevMode: boolean) {
   let enable: boolean = false;
   switch (event) {
     case 'load':
@@ -1508,17 +1506,21 @@ export function toggleDevelopersMode(event='click', enforceDevMode: boolean) {
     case 'click':
       // Toggled
       enable = $('#developers_toggle').prop('checked');
-      window.localStorage.setItem('developer_mode', `${enable}`);
       if (enable) {
         pushAchievement("lets_focus");
       }
       break;
   }
+  window.localStorage.setItem('developer_mode', `${enable}`)
+  toggleDevelopersMode()
+}
 
+function toggleDevelopersMode() {
+  const enable = window.localStorage.getItem('developer_mode') === 'true';
   // DevMode hides the tabs and makes resizable elements track the appropriate size.
   // (Driving from HTML attributes is more flexible on what gets resized, and avoids duplicating
   // size literals between HTML and JavaScript).
-  $('#adventures').toggle(!enable);
+  $('#adventures').toggle(!enable || currentTab === 'quiz' || currentTab === 'parsons');
   // Parsons dont need a fixed height
   if (currentTab === 'parsons') return
   $('[data-devmodeheight]').each((_, el) => {
@@ -1852,17 +1854,13 @@ function reconfigurePageBasedOnTab() {
   resetWindow();
 
   updatePageElements();
+  toggleDevelopersMode();
   if (currentTab === 'parsons') {
     loadParsonsExercise(theLevel, 1);
     // remove the fixed height from the editor
     document.getElementById('code_editor')!.style.height = '100%'
     document.getElementById('code_output')!.style.height = '100%'
     return;
-  } else {
-    $('[data-devmodeheight]').each((_, el) => {
-      const heights = $(el).data('devmodeheight').split(',') as string[];
-      $(el).css('height', heights[0]);
-    });
   }
 
   const adventure = theAdventures[currentTab];

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
@@ -60490,6 +60490,7 @@ ${o3}` : i3;
     save_customizations: () => save_customizations,
     select_profile_image: () => select_profile_image,
     setDateLevelInputColor: () => setDateLevelInputColor,
+    setDevelopersMode: () => setDevelopersMode,
     set_explore_favourite: () => set_explore_favourite,
     set_favourite_program: () => set_favourite_program,
     showAchievements: () => showAchievements,
@@ -60513,7 +60514,6 @@ ${o3}` : i3;
     theLevel: () => theLevel,
     theLocalSaveWarning: () => theLocalSaveWarning,
     theModalEditor: () => theModalEditor,
-    toggleDevelopersMode: () => toggleDevelopersMode,
     toggleVariableView: () => toggleVariableView,
     toggle_blur_code: () => toggle_blur_code,
     toggle_keyword_language: () => toggle_keyword_language,
@@ -105514,7 +105514,6 @@ def note_with_error(value, err):
       } else if (!optionsArray.includes(text)) {
         optionsArray.push(text);
       }
-      console.log(optionsArray);
     });
     if (selectName == "level") {
       optionsArray.sort();
@@ -105536,7 +105535,6 @@ def note_with_error(value, err):
       updateProgramCount();
       const response = await postJsonWithAchievements("/programs/delete", { id: id2 });
       showAchievements(response.achievement, true, "");
-      console.log("resp", response);
       modal.notifySuccess(response.message);
     });
   }
@@ -106081,7 +106079,7 @@ def note_with_error(value, err):
     let title = ClientMessages["Program_repair"];
     modal.repair(editor, 0, title);
   }
-  function toggleDevelopersMode(event2 = "click", enforceDevMode) {
+  function setDevelopersMode(event2 = "click", enforceDevMode) {
     let enable = false;
     switch (event2) {
       case "load":
@@ -106091,13 +106089,17 @@ def note_with_error(value, err):
         break;
       case "click":
         enable = $("#developers_toggle").prop("checked");
-        window.localStorage.setItem("developer_mode", `${enable}`);
         if (enable) {
           pushAchievement("lets_focus");
         }
         break;
     }
-    $("#adventures").toggle(!enable);
+    window.localStorage.setItem("developer_mode", `${enable}`);
+    toggleDevelopersMode();
+  }
+  function toggleDevelopersMode() {
+    const enable = window.localStorage.getItem("developer_mode") === "true";
+    $("#adventures").toggle(!enable || currentTab === "quiz" || currentTab === "parsons");
     if (currentTab === "parsons")
       return;
     $("[data-devmodeheight]").each((_, el3) => {
@@ -106351,16 +106353,12 @@ def note_with_error(value, err):
   function reconfigurePageBasedOnTab() {
     resetWindow();
     updatePageElements();
+    toggleDevelopersMode();
     if (currentTab === "parsons") {
       loadParsonsExercise(theLevel, 1);
       document.getElementById("code_editor").style.height = "100%";
       document.getElementById("code_output").style.height = "100%";
       return;
-    } else {
-      $("[data-devmodeheight]").each((_, el3) => {
-        const heights = $(el3).data("devmodeheight").split(",");
-        $(el3).css("height", heights[0]);
-      });
     }
     const adventure = theAdventures[currentTab];
     if (adventure) {

diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/templates/incl/editor-and-output.html b/templates/incl/editor-and-output.html
@@ -267,14 +267,14 @@
   {% endif %}
 <!-- developer mode toggle -->
 {% if raw or public_adventures_page %}
-  <div _="on load hedyApp.toggleDevelopersMode('load', false)"></div>
+  <div _="on load hedyApp.setDevelopersMode('load', false)"></div>
 {% elif not enforce_developers_mode and not editor_readonly %}
   <div class="mx-auto mt-4 w-64 border-gray-400 border-2 rounded-full py-2 px-4" id="developers_toggle_container">
     <label for="developers_toggle" class="flex flex-row items-center justify-center cursor-pointer">
       <div class="relative">
         <input id="developers_toggle" type="checkbox" class="sr-only"
-        _="on load hedyApp.toggleDevelopersMode('load', false)
-          on click hedyApp.toggleDevelopersMode('click', false)">
+        _="on load hedyApp.setDevelopersMode('load', false)
+          on click hedyApp.setDevelopersMode('click', false)">
         <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" id="dev_toggle"></div>
         <div
           id="toggle_circle"
@@ -284,5 +284,5 @@
     </label>
   </div>
 {% else %}
-  <div _="on load hedyApp.toggleDevelopersMode('load', true)"></div>
+  <div _="on load hedyApp.setDevelopersMode('load', true)"></div>
 {% endif %}