From 274ba2f0cb81c8eebf4faea626cf72fb245bfd39 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 31 Oct 2023 08:51:58 -0700
Subject: [PATCH 01/21] set not loading when quiz creator comes up

---
 .../coach/assets/src/views/plan/CreateExamPage/index.vue       | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 41aadf022c3..7b572012515 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -108,6 +108,9 @@
     created() {
       this.quizForge.initializeQuiz();
     },
+    mounted() {
+      this.$store.dispatch('notLoading');
+    },
     $trs: {
       createNewExamLabel: {
         message: 'Create new quiz',

From b02fdb34823e09a46f39bbbbf9423a15115cd210 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 12 Oct 2023 15:44:31 -0700
Subject: [PATCH 02/21] add DEBUG option to useQuizCreation; bootstrap basic
 accordion setup

---
 .../assets/src/composables/useQuizCreation.js | 44 ++++++++++--
 .../plan/CreateExamPage/AccordionItem.vue     |  2 +-
 .../plan/CreateExamPage/CreateQuizSection.vue | 67 ++++++++++++++-----
 .../src/views/plan/CreateExamPage/index.vue   | 15 +++--
 4 files changed, 100 insertions(+), 28 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 67e547dc9a3..64b6ff280f4 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -8,7 +8,7 @@ import { get, set } from '@vueuse/core';
 import { computed, ref } from 'kolibri.lib.vueCompositionApi';
 // TODO: Probably move this to this file's local dir
 import selectQuestions from '../modules/examCreation/selectQuestions.js';
-import { Quiz, QuizSection } from './quizCreationSpecs.js';
+import { Quiz, QuizSection, QuizQuestion } from './quizCreationSpecs.js';
 
 /** Validators **/
 /* objectSpecs expects every property to be available -- but we don't want to have to make an
@@ -30,7 +30,7 @@ function isExercise(o) {
 /**
  * Composable function presenting primary interface for Quiz Creation
  */
-export default () => {
+export default (DEBUG = true) => {
   // -----------
   // Local state
   // -----------
@@ -53,6 +53,38 @@ export default () => {
   /** @type {ref<Number>} A counter for use in naming new sections */
   const _sectionLabelCounter = ref(1);
 
+  // Debug Data Generators
+  function _quizQuestions(num = 5) {
+    const questions = [];
+    for (let i = 0; i <= num; i++) {
+      const overrides = {
+        title: `Quiz Question ${i}`,
+        question_id: `${i}`,
+      };
+      questions.push(objectWithDefaults(overrides, QuizQuestion));
+    }
+    return questions;
+  }
+
+  function _quizSections(num = 5, numQuestions = 5) {
+    const sections = [];
+    for (let i = 0; i <= num; i++) {
+      const overrides = {
+        section_id: `${i}`,
+        section_title: `A section ${i}`,
+        questions: _quizQuestions(numQuestions),
+      };
+      sections.push(objectWithDefaults(overrides, QuizSection));
+    }
+    return sections;
+  }
+
+  function _generateTestData(numSections = 5, numQuestions = 5) {
+    const sections = _quizSections(numSections, numQuestions);
+    updateQuiz({ question_sources: sections });
+    setActiveSection(sections[0].section_id);
+  }
+
   // ------------------
   // Section Management
   // ------------------
@@ -162,8 +194,12 @@ export default () => {
    * use */
   function initializeQuiz() {
     set(_quiz, objectWithDefaults({}, Quiz));
-    const newSection = addSection();
-    setActiveSection(newSection.section_id);
+    if (DEBUG) {
+      _generateTestData();
+    } else {
+      const newSection = addSection();
+      setActiveSection(newSection.section_id);
+    }
     _fetchChannels();
   }
 
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
index f0d32869a5c..27e61bc3ad9 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
@@ -32,7 +32,7 @@
         required: true,
       },
       id: {
-        type: Number,
+        type: String,
         required: true,
       },
     },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 6f9dc0adbb4..8abe3f331c6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -153,28 +153,51 @@
       tabsId="quizSectionTabs"
       :activeTabId="quizForge.activeSection.value ? quizForge.activeSection.value.section_id : ''"
     >
-
-      <p>{{ quizForge.activeSection.value.section_id }}</p>
       <!-- TODO This should be a separate component like "empty section container" or something -->
-      <div class="question-mark-layout">
-        <span class="help-icon-style">?</span>
-      </div>
+      <div v-if="!accordionQuestions.length">
+        <div class="question-mark-layout">
+          <span class="help-icon-style">?</span>
+        </div>
 
-      <p class="no-question-style">
-        {{ noQuestionsInSection$() }}
-      </p>
+        <p class="no-question-style">
+          {{ noQuestionsInSection$() }}
+        </p>
 
-      <p>{{ addQuizSectionQuestionsInstructions$() }}</p>
+        <p>{{ addQuizSectionQuestionsInstructions$() }}</p>
 
-      <KButton
-        primary
-        icon="plus"
-        @click="openSelectResources(quizForge.activeSection.value.section_id)"
-      >
-        {{ addQuestionsLabel$() }}
-      </KButton>
+        <KButton
+          primary
+          icon="plus"
+          @click="openSelectResources(quizForge.activeSection.value.section_id)"
+        >
+          {{ addQuestionsLabel$() }}
+        </KButton>
+      </div>
       <!-- END TODO -->
 
+      <AccordionContainer v-else>
+        <template #default="{ toggleItemState, isItemExpanded, /* closeAccordionPanel */ }">
+          <AccordionItem
+            v-for="question in accordionQuestions"
+            :id="question.id"
+            :key="question.id"
+            :title="question.title"
+          >
+            <template #heading>
+              <button @click="toggleItemState(question.id)">
+                {{ question.title }}
+              </button>
+            </template>
+
+            <template #content>
+              <div v-if="isItemExpanded(question.id)">
+                TODO: Use actual resources, render questions here
+              </div>
+            </template>
+          </AccordionItem>
+        </template>
+      </AccordionContainer>
+
 
     </KTabsPanel>
 
@@ -191,12 +214,16 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import commonCoach from '../../common';
-  import SectionSidePanel from './SectionSidePanel.vue';
-  import TabsWithOverflow from './TabsWithOverflow.vue';
+  import SectionSidePanel from './SectionSidePanel';
+  import TabsWithOverflow from './TabsWithOverflow';
+  import AccordionContainer from './AccordionContainer';
+  import AccordionItem from './AccordionItem';
 
   export default {
     name: 'CreateQuizSection',
     components: {
+      AccordionContainer,
+      AccordionItem,
       TabsWithOverflow,
       SectionSidePanel,
     },
@@ -264,6 +291,10 @@
           },
         ];
       },
+      accordionQuestions() {
+        const mapQuestionToAccordionItem = q => ({ id: q.question_id, title: q.title });
+        return get(this.quizForge.activeQuestions).map(mapQuestionToAccordionItem);
+      },
     },
     methods: {
       tabRefLabel(section_id) {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 7b572012515..fba6c77f1c5 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -20,7 +20,7 @@
       :style="{ ...maxContainerHeight, maxWidth: '1000px', margin: '0 auto' }"
     >
 
-      <CreateQuizSection />
+      <CreateQuizSection v-if="quizInitialized" />
 
       <BottomAppBar>
         <KButtonGroup>
@@ -41,6 +41,8 @@
 
 <script>
 
+  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import { ref } from 'kolibri.lib.vueCompositionApi';
   import pickBy from 'lodash/pickBy';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -50,8 +52,6 @@
   import useQuizCreation from '../../../composables/useQuizCreation';
   import CreateQuizSection from './CreateQuizSection.vue';
 
-  const quizForge = useQuizCreation();
-
   export default {
     name: 'CreateExamPage',
     components: {
@@ -59,9 +59,13 @@
       BottomAppBar,
       CreateQuizSection,
     },
-    mixins: [commonCoreStrings, commonCoach],
-    data() {
+    mixins: [commonCoreStrings, commonCoach, responsiveWindowMixin],
+    setup() {
+      const quizForge = useQuizCreation();
+      const quizInitialized = ref(false);
+
       return {
+        quizInitialized,
         quizForge,
       };
     },
@@ -107,6 +111,7 @@
     },
     created() {
       this.quizForge.initializeQuiz();
+      this.quizInitialized = true;
     },
     mounted() {
       this.$store.dispatch('notLoading');

From dba27e4a0fb46cb02390c20f4737d9aac7bb5c89 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 16 Oct 2023 12:27:13 -0700
Subject: [PATCH 03/21] uuid for test data ID

---
 .../plugins/coach/assets/src/composables/useQuizCreation.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 64b6ff280f4..7ed7a4f34be 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -59,7 +59,7 @@ export default (DEBUG = true) => {
     for (let i = 0; i <= num; i++) {
       const overrides = {
         title: `Quiz Question ${i}`,
-        question_id: `${i}`,
+        question_id: uuidv4(),
       };
       questions.push(objectWithDefaults(overrides, QuizQuestion));
     }
@@ -70,7 +70,7 @@ export default (DEBUG = true) => {
     const sections = [];
     for (let i = 0; i <= num; i++) {
       const overrides = {
-        section_id: `${i}`,
+        section_id: uuidv4(),
         section_title: `A section ${i}`,
         questions: _quizQuestions(numQuestions),
       };

From d14514fdaa5113d5bab01954e10e32fbf095f756 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 16 Oct 2023 12:27:26 -0700
Subject: [PATCH 04/21] remove unneded prop

---
 .../coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue | 1 -
 .../assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
index 27e61bc3ad9..4758f2f2076 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
@@ -13,7 +13,6 @@
       <slot
         :id="id"
         name="content"
-        :answers="title"
       >
       </slot>
     </div>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
index 9808153c587..4317eb057fe 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
@@ -81,7 +81,6 @@
                 const containerTop = this.$refs.tabsWrapper.$el.offsetTop;
                 const containerBottom = containerTop + this.$refs.tabsWrapper.$el.clientHeight;
 
-                console.log(tabRef, tabRefTop, containerTop, containerBottom);
                 return tabRefTop >= containerBottom;
               })
             : [];

From 27fb9769f4398940fce10e0f8e92755bc36ffb97 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 16 Oct 2023 14:33:01 -0700
Subject: [PATCH 05/21] drag-and-drop scaffolding function & design

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 192 +++++++++++++++---
 1 file changed, 163 insertions(+), 29 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 8abe3f331c6..bc73e459471 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -154,7 +154,7 @@
       :activeTabId="quizForge.activeSection.value ? quizForge.activeSection.value.section_id : ''"
     >
       <!-- TODO This should be a separate component like "empty section container" or something -->
-      <div v-if="!accordionQuestions.length">
+      <div v-if="!quizForge.activeQuestions.value.length">
         <div class="question-mark-layout">
           <span class="help-icon-style">?</span>
         </div>
@@ -175,29 +175,129 @@
       </div>
       <!-- END TODO -->
 
-      <AccordionContainer v-else>
-        <template #default="{ toggleItemState, isItemExpanded, /* closeAccordionPanel */ }">
-          <AccordionItem
-            v-for="question in accordionQuestions"
-            :id="question.id"
-            :key="question.id"
-            :title="question.title"
+
+      <div v-else>
+        <KGrid>
+          <KGridItem
+            :layout12="{ span: 6 }"
           >
-            <template #heading>
-              <button @click="toggleItemState(question.id)">
-                {{ question.title }}
-              </button>
-            </template>
-
-            <template #content>
-              <div v-if="isItemExpanded(question.id)">
-                TODO: Use actual resources, render questions here
+            <div class="left-column-alignment-style">
+              <div class="align-kcheckbox-style">
+                <p>
+                  <KCheckbox />
+                </p>
+              </div>
+
+              <div>
+                <p> "SELECT ALL FIX ME"</p>
               </div>
-            </template>
-          </AccordionItem>
-        </template>
-      </AccordionContainer>
+            </div>
+          </KGridItem>
 
+          <KGridItem
+            :layout12="{ span: 6 }"
+          >
+            <div class="right-alignment-style">
+              <KGrid>
+                <KGridItem :layout12="{ span: 4 }">
+                  <button class="icon-container remove-button-style">
+                    <KIcon
+                      class="reduce-chervon-spacing"
+                      icon="chevronDown"
+                    />
+                    <KIcon
+                      class="reduce-chervon-spacing"
+                      icon="chevronUp"
+                    />
+                  </button>
+                </KGridItem>
+
+                <KGridItem
+                  :layout12="{ span: 4 }"
+                >
+
+                  <KIconButton
+                    class="icon-size"
+                    icon="refresh"
+                  />
+                </KGridItem>
+
+                <KGridItem
+                  :layout12="{ span: 4 }"
+                >
+                  <KIconButton
+                    class="icon-size"
+                    icon="trash"
+                  />
+                </KGridItem>
+              </KGrid>
+            </div>
+          </KGridItem>
+
+        </KGrid>
+
+        <AccordionContainer v-slot="{ toggleItemState, isItemExpanded }">
+          <DragContainer
+            key="drag-container"
+            :items="quizForge.activeQuestions.value"
+            @sort="handleQuestionOrderChange"
+          >
+            <transition-group
+              tag="div"
+              name="list"
+              class="wrapper"
+            >
+              <Draggable
+                v-for="(question, index) in quizForge.activeQuestions.value"
+                :key="`drag-${question.question_id}`"
+                tabindex="-1"
+                style="background: white"
+              >
+                <AccordionItem :id="question.question_id" :title="question.title">
+                  <template #heading="{ title }">
+                    <div class="accordion-header">
+                      <DragHandle>
+                        <div>
+                          <DragSortWidget
+                            class="sort-widget"
+                            moveUpText="up"
+                            moveDownText="down"
+                            :isFirst="index === 0"
+                            :isLast="index === quizForge.activeQuestions.value.length - 1"
+                            @moveUp="shiftOne(index, -1)"
+                            @moveDown="shiftOne(index, +1)"
+                          />
+                        </div>
+                      </DragHandle>
+                      <KCheckbox style="padding-left: 0.5em" />
+                      <a
+                        class="accordion-header-label"
+                        @click="toggleItemState(question.question_id)"
+                      >
+                        {{ title }}
+                      </a>
+                      <a
+                        class="accordion-header-chevron"
+                        @click="toggleItemState(question.question_id)"
+                      >
+                        <KIcon
+                          :icon="isItemExpanded(question.question_id) ?
+                            'chevronUp' : 'chevronRight'"
+                        />
+                      </a>
+                    </div>
+                  </template>
+                  <template #content="">
+                    <h1 v-if="isItemExpanded(question.question_id)">
+                      {{ question.title }}
+                    </h1>
+                  </template>
+                </AccordionItem>
+              </Draggable>
+            </transition-group>
+          </DragContainer>
+        </AccordionContainer>
+      </div>
 
     </KTabsPanel>
 
@@ -213,6 +313,10 @@
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import DragContainer from 'kolibri.coreVue.components.DragContainer';
+  import DragHandle from 'kolibri.coreVue.components.DragHandle';
+  import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
+  import Draggable from 'kolibri.coreVue.components.Draggable';
   import commonCoach from '../../common';
   import SectionSidePanel from './SectionSidePanel';
   import TabsWithOverflow from './TabsWithOverflow';
@@ -224,6 +328,10 @@
     components: {
       AccordionContainer,
       AccordionItem,
+      DragContainer,
+      Draggable,
+      DragSortWidget,
+      DragHandle,
       TabsWithOverflow,
       SectionSidePanel,
     },
@@ -291,10 +399,6 @@
           },
         ];
       },
-      accordionQuestions() {
-        const mapQuestionToAccordionItem = q => ({ id: q.question_id, title: q.title });
-        return get(this.quizForge.activeQuestions).map(mapQuestionToAccordionItem);
-      },
     },
     methods: {
       tabRefLabel(section_id) {
@@ -329,6 +433,13 @@
             : 'none',
         };
       },
+      handleQuestionOrderChange({ newArray }) {
+        const payload = {
+          section_id: get(this.quizForge.activeSection).section_id,
+          questions: newArray,
+        };
+        this.quizForge.updateSection(payload);
+      },
       handleAddSection() {
         const newSection = this.quizForge.addSection();
         this.quizForge.setActiveSection(get(newSection).section_id);
@@ -432,10 +543,6 @@
     font-size: 1em;
   }
 
-  .accordion-detail-container {
-    margin-left: 3em;
-  }
-
   .float-item-left-style {
     float: right;
     margin-top: 1em;
@@ -532,4 +639,31 @@
     min-height: 40px;
   }
 
+  .accordion-header {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding: 0 0.5em;
+  }
+
+  .accordion-header-label {
+    flex-grow: 1;
+    align-self: stretch;
+    padding: 0 0 0 1em;
+    line-height: 2.75em;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .accordion-header-chevron {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    cursor: pointer;
+  }
+
+  /deep/ .checkbox-icon {
+    top: 2px;
+  }
+
 </style>

From 7d386d51bba45d3a2deca54d5b0533c6723dd2d2 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 17 Oct 2023 11:46:59 -0700
Subject: [PATCH 06/21] styles on the accordion headers

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index bc73e459471..81f6d2fbddc 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -270,13 +270,18 @@
                         </div>
                       </DragHandle>
                       <KCheckbox style="padding-left: 0.5em" />
-                      <a
+                      <KButton
+                        tabindex="0"
+                        appearance="basic-link"
+                        :style="accordionStyleOverrides"
                         class="accordion-header-label"
                         @click="toggleItemState(question.question_id)"
                       >
                         {{ title }}
-                      </a>
-                      <a
+                      </KButton>
+                      <KButton
+                        appearance="basic-link"
+                        :style="accordionStyleOverrides"
                         class="accordion-header-chevron"
                         @click="toggleItemState(question.question_id)"
                       >
@@ -284,7 +289,7 @@
                           :icon="isItemExpanded(question.question_id) ?
                             'chevronUp' : 'chevronRight'"
                         />
-                      </a>
+                      </KButton>
                     </div>
                   </template>
                   <template #content="">
@@ -367,6 +372,12 @@
     },
     inject: ['quizForge'],
     computed: {
+      accordionStyleOverrides() {
+        return {
+          color: this.$themeTokens.text + '!important',
+          textDecoration: 'none',
+        };
+      },
       noKgridItemPadding() {
         return {
           paddingLeft: '0em',
@@ -666,4 +677,8 @@
     top: 2px;
   }
 
+  /deep/ .grip {
+    top: 2px !important;
+  }
+
 </style>

From 4787a7f27cfd651e94a5f28b81e258fa538ee927 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 19 Oct 2023 16:39:25 -0700
Subject: [PATCH 07/21] section tabs better design parity w/out regression

Ran into some issues w/ the way the overflow calculation was done as I tried to adjust the heights of the tabs and their containers themselves
This ultimately ends up losing some items which were impacting the calculations which will be fixed in a subsequent commit
---
 .../plan/CreateExamPage/CreateQuizSection.vue     | 15 ++++-----------
 .../plan/CreateExamPage/TabsWithOverflow.vue      | 13 ++++++++++---
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 81f6d2fbddc..b8744e0e63a 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -34,8 +34,6 @@
       {{ addQuizSections$() }}
     </p>
 
-    <hr class="bottom-border">
-
     <KGrid>
       <KGridItem
         :layout12="{ span: 10 }"
@@ -145,8 +143,6 @@
 
     </KGrid>
 
-    <hr class="bottom-border">
-
     <KTabsPanel
       v-if="quizForge.activeSection.value"
       class="no-question-layout"
@@ -396,6 +392,8 @@
           margin: '0px',
           textOverflow: 'ellipsis',
           maxWidth: '160px',
+          padding: '0px!important',
+          height: '3.25em',
         };
       },
       sectionOptions() {
@@ -528,11 +526,6 @@
     font-weight: bold;
   }
 
-  .bottom-border {
-    margin-block-start: -2px;
-    border: 1px solid #dedede;
-  }
-
   .kgrid-alignment-style {
     padding-right: 1em;
     padding-left: 0;
@@ -633,8 +626,8 @@
   }
 
   .options-button {
-    width: 36px !important;
-    height: 36px !important;
+    width: 3.25em !important;
+    height: 3.25em !important;
     margin: 0;
     border-radius: 0 !important;
   }
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
index 4317eb057fe..c3aa49fb49d 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
@@ -69,6 +69,9 @@
     mounted() {
       this.mounted = true;
       this.setWrappingButtonTabIndex();
+      this.$nextTick(() => {
+        this.setOverflowTabs();
+      });
     },
     methods: {
       setOverflowTabs() {
@@ -106,13 +109,15 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    height: 2.25em;
+    height: 3rem !important;
+    min-height: 3rem !important;
     overflow: hidden;
   }
 
   /deep/ .tab > button,
   .tab {
     max-width: calc(200px - 40px);
+    height: 3rem !important;
     text-overflow: ellipsis;
 
     /* We *need* the overflow to be hidden for our calculations of which to show work properly.
@@ -123,13 +128,15 @@
 
   /deep/ .tab {
     display: inline-block;
-    height: 2.5em;
+    height: 3rem !important;
+    margin: 0;
     overflow: visible; // Keep outline fully visible
   }
 
   .container {
     position: relative;
-    max-height: 2.25em;
+    height: 3rem !important;
+    padding: 0 1em;
   }
 
 </style>

From 5f90049c47c7aa0f11f59ff1dc3d8e8f51697f2b Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 19 Oct 2023 16:40:24 -0700
Subject: [PATCH 08/21] dragStart event allows dynamic styles when dragging;
 disallow highlighting

---
 .../src/views/sortable/DragContainer.vue      |  1 +
 .../plan/CreateExamPage/CreateQuizSection.vue | 20 ++++++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/kolibri/core/assets/src/views/sortable/DragContainer.vue b/kolibri/core/assets/src/views/sortable/DragContainer.vue
index 7fb1e54585c..10698966044 100644
--- a/kolibri/core/assets/src/views/sortable/DragContainer.vue
+++ b/kolibri/core/assets/src/views/sortable/DragContainer.vue
@@ -56,6 +56,7 @@
       handleStart() {
         // handle cancelation of drags
         // document.addEventListener('keyup', this.triggerMouseUpOnESC);
+        this.$emit('dragStart');
       },
       handleStop(event) {
         const { oldIndex, newIndex } = event.data;
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index b8744e0e63a..a7b7e6377c7 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -237,6 +237,7 @@
             key="drag-container"
             :items="quizForge.activeQuestions.value"
             @sort="handleQuestionOrderChange"
+            @dragStart="handledDragStart"
           >
             <transition-group
               tag="div"
@@ -289,9 +290,11 @@
                     </div>
                   </template>
                   <template #content="">
-                    <h1 v-if="isItemExpanded(question.question_id)">
-                      {{ question.title }}
-                    </h1>
+                    <div :style="{ userSelect: dragActive ? 'none!important' : 'text' }">
+                      <h1 v-if="isItemExpanded(question.question_id)">
+                        {{ question.title }}
+                      </h1>
+                    </div>
                   </template>
                 </AccordionItem>
               </Draggable>
@@ -366,12 +369,19 @@
         deleteSectionLabel$,
       };
     },
+    data() {
+      return {
+        dragActive: false,
+      };
+    },
     inject: ['quizForge'],
     computed: {
       accordionStyleOverrides() {
         return {
           color: this.$themeTokens.text + '!important',
           textDecoration: 'none',
+          // Ensure text doesn't get highlighted as we drag
+          userSelect: this.dragActive ? 'none!important' : 'text',
         };
       },
       noKgridItemPadding() {
@@ -454,7 +464,11 @@
         this.quizForge.setActiveSection(get(newSection).section_id);
         this.sectionCreationCount++;
       },
+      handledDragStart() {
+        this.dragActive = true;
+      },
       handleSectionOptionSelect({ label }, section_id) {
+        this.dragActive = false;
         // Always set the active section to the one that is having its side panel opened
         this.quizForge.setActiveSection(section_id);
 

From 786b66f14827bccdd1e2f315195454f50d17fac0 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 19 Oct 2023 21:51:35 -0700
Subject: [PATCH 09/21] design polish

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 40 +++++++++++--------
 .../plan/CreateExamPage/TabsWithOverflow.vue  |  3 +-
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index a7b7e6377c7..f72e15a0796 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -1,9 +1,7 @@
 <template>
 
-  <div>
-    <KGrid
-      class="add-padding"
-    >
+  <div style="padding-top: 2rem;">
+    <KGrid :style="wrapperStyles">
       <KGridItem
         :layout4="{ span: 1 }"
         :layout8="{ span: 1 }"
@@ -30,17 +28,17 @@
       </KGridItem>
     </KGrid>
 
-    <p style="margin-top: 0px;">
+    <p :style="addQuizSectionsStyles">
       {{ addQuizSections$() }}
     </p>
 
-    <KGrid>
+    <KGrid :style="tabsWrapperStyles">
       <KGridItem
         :layout12="{ span: 10 }"
-        :style="noKgridItemPadding"
       >
         <TabsWithOverflow
           tabsId="quizSectionTabs"
+          class="section-tabs"
           :tabs="tabs"
           :appearanceOverrides="{ padding: '0px', overflow: 'hidden' }"
           :activeTabId="quizForge.activeSection.value ?
@@ -81,6 +79,7 @@
             <KIconButton
               v-if="overflowTabs.length"
               tabindex="-1"
+              class="overflow-tabs"
               icon="optionsHorizontal"
               :style="overflowButtonStyles(overflowTabs)"
             >
@@ -130,11 +129,11 @@
 
       <KGridItem
         :layout12="{ span: 2 }"
-        :style="noKgridItemPadding"
       >
         <KButton
           appearance="flat-button"
           icon="plus"
+          style="height: 3rem"
           @click="handleAddSection"
         >
           {{ addSectionLabel$() }}
@@ -384,10 +383,17 @@
           userSelect: this.dragActive ? 'none!important' : 'text',
         };
       },
-      noKgridItemPadding() {
+      addQuizSectionsStyles() {
+        return {
+          margin: '0 0 1rem 0',
+          padding: '0 0 1rem 0',
+          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
+        };
+      },
+      tabsWrapperStyles() {
         return {
-          paddingLeft: '0em',
-          paddingRight: '0em',
+          paddingTop: '1rem',
+          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
         };
       },
       tabs() {
@@ -445,8 +451,8 @@
       },
       overflowButtonStyles(overflow) {
         return {
-          height: '40px',
-          width: '40px',
+          height: '2.25rem!important',
+          width: '2.25rem!important',
           border: this.activeSectionIsHidden(overflow)
             ? '2px solid ' + this.$themeTokens.primary
             : 'none',
@@ -532,10 +538,6 @@
     color: #996189;
   }
 
-  .add-padding {
-    padding-top: 16px;
-  }
-
   .no-question-style {
     font-weight: bold;
   }
@@ -688,4 +690,8 @@
     top: 2px !important;
   }
 
+  /deep/ .overflow-tabs svg {
+    top: 7px !important;
+  }
+
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
index c3aa49fb49d..cdbdc1aa4f4 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
@@ -17,7 +17,7 @@
     <!-- This should be within the KTabsList to simplify rendering, but there is no slot.
       The absolute styling isn't as nice as if it were part of the flex container instead, but
       it ought to work -->
-    <div style="position: absolute; right: 0; top: -7px;">
+    <div style="position: absolute; right: 0; top: 5px;">
       <slot name="overflow" :overflowTabs="overflowTabs"></slot>
     </div>
 
@@ -136,7 +136,6 @@
   .container {
     position: relative;
     height: 3rem !important;
-    padding: 0 1em;
   }
 
 </style>

From 2125d3e919e90bb9d4817af46b50d8c26c2385db Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 23 Oct 2023 20:36:32 -0700
Subject: [PATCH 10/21] helpers for select all checkbox props

---
 .../assets/src/composables/useQuizCreation.js | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 7ed7a4f34be..7221f588abd 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -246,6 +246,25 @@ export default (DEBUG = true) => {
     );
   }
 
+  function toggleQuestionInSelection(question_id) {
+    if (get(_selectedQuestions).includes(question_id)) {
+      removeQuestionFromSelection(question_id);
+    } else {
+      addQuestionToSelection(question_id);
+    }
+  }
+
+  function selectAllQuestions() {
+    if (get(allQuestionsSelected)) {
+      set(_selectedQuestions, []);
+    } else {
+      set(
+        _selectedQuestions,
+        get(activeQuestions).map(q => q.question_id)
+      );
+    }
+  }
+
   /**
    * @affects _channels - Fetches all channels with exercises and sets them to _channels */
   function _fetchChannels() {
@@ -316,6 +335,31 @@ export default (DEBUG = true) => {
   /** @type {ComputedRef<Array>} A list of all channels available which have exercises */
   const channels = computed(() => get(_channels));
 
+  /** Handling the Select All Checkbox
+   * See: remove/toggleQuestionFromSelection() & selectAllQuestions() for more */
+
+  /** @type {ComputedRef<Boolean>} Whether all active questions are selected */
+  const allQuestionsSelected = computed(
+    () => get(selectedActiveQuestions).length === get(activeQuestions).length
+  );
+  const noQuestionsSelected = computed(() => get(selectedActiveQuestions).length === 0);
+  /** @type {ComputedRef<String>} The label that should be shown alongside the "Select all" checkbox
+   */
+  const selectAllLabel = computed(() => {
+    if (get(noQuestionsSelected)) {
+      const { selectAllLabel$ } = enhancedQuizManagementStrings;
+      return selectAllLabel$();
+    } else {
+      const { numberOfSelectedQuestions$ } = enhancedQuizManagementStrings;
+      return numberOfSelectedQuestions$({ count: get(selectedActiveQuestions).length });
+    }
+  });
+
+  /** @type {ComputedRef<Boolean>} Whether the select all checkbox should be indeterminate */
+  const selectAllIsIndeterminate = computed(() => {
+    return !get(allQuestionsSelected) && !get(noQuestionsSelected);
+  });
+
   return {
     // Methods
     saveQuiz,
@@ -328,6 +372,8 @@ export default (DEBUG = true) => {
     updateQuiz,
     addQuestionToSelection,
     removeQuestionFromSelection,
+    toggleQuestionInSelection,
+    selectAllQuestions,
 
     // Computed
     channels,
@@ -340,5 +386,9 @@ export default (DEBUG = true) => {
     activeQuestions,
     selectedActiveQuestions,
     replacementQuestionPool,
+    selectAllIsIndeterminate,
+    selectAllLabel,
+    allQuestionsSelected,
+    noQuestionsSelected,
   };
 };

From 85a5ac0da8e4f7653473259d8e55f3bd6a31aeb0 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 23 Oct 2023 20:36:59 -0700
Subject: [PATCH 11/21] enhanced quiz messages updates

---
 .../strings/enhancedQuizManagementStrings.js           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
index 1fbd1afebad..296bbb08e1d 100644
--- a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
+++ b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
@@ -1,6 +1,9 @@
 import { createTranslator } from 'kolibri.utils.i18n';
 
 export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManagementStrings', {
+  selectAllLabel: {
+    message: 'Select all',
+  },
   sectionLabel: {
     message: 'Section',
   },
@@ -70,7 +73,7 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   numberOfSelectedQuestions: {
     message: '{count, number} {count, plural, one {question selected} other {questions selected}}',
   },
-  replqceQuestions: {
+  replaceQuestions: {
     message: 'Replace questions',
   },
   changeResources: {
@@ -88,12 +91,9 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   expandAll: {
     message: 'Expand all',
   },
-  replace: {
+  replaceAction: {
     message: 'Replace',
   },
-  replaceQuestions: {
-    message: 'Replace questions',
-  },
   replaceQuestionsExplaination: {
     message: 'The new questions you selected will replace the current ones.',
   },

From 96b927cd79d7cfe3743440e7736b81e6e5d03235 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 23 Oct 2023 20:38:52 -0700
Subject: [PATCH 12/21] pass click event through tabswithoverflow; a11y
 improvements

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 238 +++++++++---------
 .../plan/CreateExamPage/TabsWithOverflow.vue  |   9 +-
 2 files changed, 122 insertions(+), 125 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index f72e15a0796..9562a0aaaf4 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div style="padding-top: 2rem;">
-    <KGrid :style="wrapperStyles">
+    <KGrid>
       <KGridItem
         :layout4="{ span: 1 }"
         :layout8="{ span: 1 }"
@@ -40,39 +40,22 @@
           tabsId="quizSectionTabs"
           class="section-tabs"
           :tabs="tabs"
-          :appearanceOverrides="{ padding: '0px', overflow: 'hidden' }"
           :activeTabId="quizForge.activeSection.value ?
             quizForge.activeSection.value.section_id :
             '' "
           backgroundColor="transparent"
           hoverBackgroundColor="transparent"
+          @click="id => quizForge.setActiveSection(id)"
         >
           <template #tab="{ tab }">
-            <KButton
+            <span
               :ref="tabRefLabel(tab.id)"
               appearance="flat-button"
               style="display: inline-block;"
               :appearanceOverrides="tabStyles"
-              @click="() => quizForge.setActiveSection(tab.id)"
             >
               {{ tab.label }}
-            </KButton>
-            <KIconButton
-              icon="optionsVertical"
-              class="options-button"
-              size="small"
-              @click="() => null"
-            >
-              <template #menu>
-                <KDropdownMenu
-                  :primary="false"
-                  :disabled="false"
-                  :hasIcons="true"
-                  :options="sectionOptions"
-                  @select="opt => handleSectionOptionSelect(opt, tab.id)"
-                />
-              </template>
-            </KIconButton>
+            </span>
           </template>
 
           <template #overflow="{ overflowTabs }">
@@ -90,37 +73,7 @@
                   :hasIcons="true"
                   :options="overflowTabs"
                   @select="opt => quizForge.setActiveSection(opt.id)"
-                >
-                  <template #option="{ option }">
-                    <!-- TODO Clean this up by moving it to another component -->
-                    <!-- Maybe not so easy since they're styled differently -->
-                    <KButton
-                      appearance="flat-button"
-                      :primary="quizForge.activeSection.value.section_id === option.id"
-                      :appearanceOverrides="tabStyles"
-                      class="menu-button"
-                      @click="() => quizForge.setActiveSection(option.id)"
-                    >
-                      {{ option.label }}
-                    </KButton>
-                    <KIconButton
-                      icon="optionsVertical"
-                      style="position: absolute; right: 0; border-radius: 0!important;"
-                      @click="() => null"
-                    >
-                      <template #menu>
-                        <KDropdownMenu
-                          :primary="false"
-                          :disabled="false"
-                          :hasIcons="true"
-                          :containFocus="false"
-                          :options="sectionOptions"
-                          @select="opt => handleSectionOptionSelect(opt, option.id)"
-                        />
-                      </template>
-                    </KIconButton>
-                  </template>
-                </KDropdownMenu>
+                />
               </template>
             </KIconButton>
           </template>
@@ -144,12 +97,11 @@
 
     <KTabsPanel
       v-if="quizForge.activeSection.value"
-      class="no-question-layout"
       tabsId="quizSectionTabs"
       :activeTabId="quizForge.activeSection.value ? quizForge.activeSection.value.section_id : ''"
     >
       <!-- TODO This should be a separate component like "empty section container" or something -->
-      <div v-if="!quizForge.activeQuestions.value.length">
+      <div v-if="!quizForge.activeQuestions.value.length" class="no-question-style">
         <div class="question-mark-layout">
           <span class="help-icon-style">?</span>
         </div>
@@ -172,61 +124,63 @@
 
 
       <div v-else>
-        <KGrid>
+        <KGrid class="questions-list-label-row">
           <KGridItem
+            class="left-side-heading"
             :layout12="{ span: 6 }"
           >
-            <div class="left-column-alignment-style">
-              <div class="align-kcheckbox-style">
-                <p>
-                  <KCheckbox />
-                </p>
-              </div>
-
-              <div>
-                <p> "SELECT ALL FIX ME"</p>
-              </div>
-            </div>
+            <h2 :style="{ color: $themeTokens.annotation }">
+              {{ questionList$() }}
+            </h2>
+          </KGridItem>
+          <KGridItem
+            class="right-side-heading"
+            :layout12="{ span: 6 }"
+          >
+            <KButton
+              primary
+              :text="coreString('optionsLabel')"
+            >
+              <template #menu>
+                <KDropdownMenu
+                  :primary="false"
+                  :disabled="false"
+                  :hasIcons="true"
+                  :options="activeSectionActions"
+                  @select="handleActiveSectionAction"
+                />
+              </template>
+            </KButton>
+          </KGridItem>
+        </KGrid>
+        <KGrid :style="accordionTopBarStyles">
+          <KGridItem
+            class="left-side-heading"
+            :layout12="{ span: 6 }"
+          >
+            <KCheckbox
+              class="select-all-box"
+              :label="quizForge.selectAllLabel.value"
+              :checked="quizForge.allQuestionsSelected.value"
+              :indeterminate="quizForge.selectAllIsIndeterminate.value"
+              @change="() => quizForge.selectAllQuestions()"
+            />
           </KGridItem>
 
           <KGridItem
+            class="right-side-heading"
             :layout12="{ span: 6 }"
           >
-            <div class="right-alignment-style">
-              <KGrid>
-                <KGridItem :layout12="{ span: 4 }">
-                  <button class="icon-container remove-button-style">
-                    <KIcon
-                      class="reduce-chervon-spacing"
-                      icon="chevronDown"
-                    />
-                    <KIcon
-                      class="reduce-chervon-spacing"
-                      icon="chevronUp"
-                    />
-                  </button>
-                </KGridItem>
-
-                <KGridItem
-                  :layout12="{ span: 4 }"
-                >
-
-                  <KIconButton
-                    class="icon-size"
-                    icon="refresh"
-                  />
-                </KGridItem>
-
-                <KGridItem
-                  :layout12="{ span: 4 }"
-                >
-                  <KIconButton
-                    class="icon-size"
-                    icon="trash"
-                  />
-                </KGridItem>
-              </KGrid>
-            </div>
+            <KIconButton
+              icon="refresh"
+              :tooltip="replaceAction$()"
+              @click="handleReplaceSelection"
+            />
+            <KIconButton
+              icon="trash"
+              :tooltip="coreString('deleteAction')"
+              @click="handleDeleteSelection"
+            />
           </KGridItem>
 
         </KGrid>
@@ -236,7 +190,7 @@
             key="drag-container"
             :items="quizForge.activeQuestions.value"
             @sort="handleQuestionOrderChange"
-            @dragStart="handledDragStart"
+            @dragStart="handleDragStart"
           >
             <transition-group
               tag="div"
@@ -258,6 +212,7 @@
                             class="sort-widget"
                             moveUpText="up"
                             moveDownText="down"
+                            :noDrag="true"
                             :isFirst="index === 0"
                             :isLast="index === quizForge.activeQuestions.value.length - 1"
                             @moveUp="shiftOne(index, -1)"
@@ -265,7 +220,13 @@
                           />
                         </div>
                       </DragHandle>
-                      <KCheckbox style="padding-left: 0.5em" />
+                      <KCheckbox
+                        style="padding-left: 0.5em"
+                        :checked="quizForge.selectedActiveQuestions.value.includes(
+                          question.question_id
+                        )"
+                        @change="() => quizForge.toggleQuestionInSelection(question.question_id)"
+                      />
                       <KButton
                         tabindex="0"
                         appearance="basic-link"
@@ -350,6 +311,8 @@
         addQuizSectionQuestionsInstructions$,
         editSectionLabel$,
         deleteSectionLabel$,
+        replaceAction$,
+        questionList$,
       } = enhancedQuizManagementStrings;
 
       // The number we use for the default section title
@@ -366,6 +329,8 @@
         addQuizSectionQuestionsInstructions$,
         editSectionLabel$,
         deleteSectionLabel$,
+        replaceAction$,
+        questionList$,
       };
     },
     data() {
@@ -383,6 +348,11 @@
           userSelect: this.dragActive ? 'none!important' : 'text',
         };
       },
+      accordionTopBarStyles() {
+        return {
+          backgroundColor: this.$themePalette.grey.v_100,
+        };
+      },
       addQuizSectionsStyles() {
         return {
           margin: '0 0 1rem 0',
@@ -407,25 +377,39 @@
         return {
           margin: '0px',
           textOverflow: 'ellipsis',
-          maxWidth: '160px',
-          padding: '0px!important',
-          height: '3.25em',
+          maxWidth: '10rem',
+          padding: '1rem 0!important',
+          height: '3.25rem',
         };
       },
-      sectionOptions() {
+      activeSectionActions() {
         return [
           {
             label: this.editSectionLabel$(),
             icon: 'edit',
+            id: 'edit',
           },
           {
             label: this.deleteSectionLabel$(),
             icon: 'delete',
+            id: 'delete',
           },
         ];
       },
     },
     methods: {
+      handleActiveSectionAction(opt) {
+        switch (opt.id) {
+          case 'edit':
+            console.log('Editing, ', this.quizForge.activeSection.value.section_id);
+            break;
+          case 'delete':
+            console.log('Deleting, ', this.quizForge.activeSection.value.section_id);
+            break;
+          default:
+            console.error('BAD OPTION GIVEN OHHHHHH NOOOOO');
+        }
+      },
       tabRefLabel(section_id) {
         return `section-tab-${section_id}`;
       },
@@ -470,9 +454,10 @@
         this.quizForge.setActiveSection(get(newSection).section_id);
         this.sectionCreationCount++;
       },
-      handledDragStart() {
+      handleDragStart() {
         this.dragActive = true;
       },
+      /*
       handleSectionOptionSelect({ label }, section_id) {
         this.dragActive = false;
         // Always set the active section to the one that is having its side panel opened
@@ -487,6 +472,7 @@
             break;
         }
       },
+      */
       openSelectResources(section_id) {
         this.$router.replace({ path: 'new/' + section_id + '/select-resources' });
       },
@@ -553,11 +539,6 @@
     margin-left: 1em;
   }
 
-  .right-alignment-style {
-    float: right;
-    margin-top: 1em;
-  }
-
   .drag-icon {
     margin-top: -0.5em;
     font-size: 1em;
@@ -607,10 +588,6 @@
     font-size: 1em;
   }
 
-  .align-kcheckbox-style {
-    margin-left: 3em;
-  }
-
   .remove-button-style {
     width: 100%;
     padding: 0;
@@ -694,4 +671,31 @@
     top: 7px !important;
   }
 
+  .select-all-box {
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 2.5em;
+
+    // Vertical centering here into the KCheckbox
+    /deep/ & label {
+      line-height: 28px;
+    }
+  }
+
+  .right-side-heading {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .left-side-heading {
+    display: flex;
+    align-items: center;
+  }
+
+  .questions-list-label-row {
+    /deep/ & > div {
+      align-items: center;
+    }
+  }
+
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
index cdbdc1aa4f4..8375fa0dbc8 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
@@ -7,6 +7,7 @@
       v-bind="$attrs"
       :activeTabId="activeTabId"
       :tabs="tabs"
+      @click="id => $emit('click', id)"
     >
       <template #tab="{ tab }">
         <slot name="tab" :tab="tab" :tabIsVisible="tabIsVisible(tab)"></slot>
@@ -62,13 +63,11 @@
       tabs() {
         this.$nextTick(() => {
           this.setOverflowTabs();
-          this.setWrappingButtonTabIndex();
         });
       },
     },
     mounted() {
       this.mounted = true;
-      this.setWrappingButtonTabIndex();
       this.$nextTick(() => {
         this.setOverflowTabs();
       });
@@ -88,12 +87,6 @@
               })
             : [];
       },
-      // The buttons are wrapped with a button that we aren't going to use due to KTabsList
-      setWrappingButtonTabIndex() {
-        for (const child of this.$refs.tabsWrapper.$el.children) {
-          child.setAttribute('tabindex', -1);
-        }
-      },
       tabIsVisible(tab) {
         return !this.overflowTabs.map(t => t.id).includes(tab.id);
       },

From d60e6665c65fa7d19e7796f2514fa32a6d17fbcc Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 23 Oct 2023 21:25:36 -0700
Subject: [PATCH 13/21] edit & delete buttons work for section tabs

---
 .../views/plan/CreateExamPage/CreateQuizSection.vue  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 9562a0aaaf4..eda7f8313d9 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -399,15 +399,15 @@
     },
     methods: {
       handleActiveSectionAction(opt) {
-        switch (opt.id) {
-          case 'edit':
-            console.log('Editing, ', this.quizForge.activeSection.value.section_id);
+        const section_id = this.quizForge.activeSection.value.section_id;
+        switch (opt.label) {
+          case this.editSectionLabel$():
+            this.$router.replace({ path: 'new/' + section_id + '/edit' });
             break;
-          case 'delete':
+          case this.deleteSectionLabel$():
             console.log('Deleting, ', this.quizForge.activeSection.value.section_id);
+            this.quizForge.removeSection(this.quizForge.activeSection.value.section_id);
             break;
-          default:
-            console.error('BAD OPTION GIVEN OHHHHHH NOOOOO');
         }
       },
       tabRefLabel(section_id) {

From 0e33376fee4eb4217410ace4711ae9104b1d4d96 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 25 Oct 2023 14:16:14 -0700
Subject: [PATCH 14/21] expandcollapse icon;

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index eda7f8313d9..886732e4b77 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -171,6 +171,11 @@
             class="right-side-heading"
             :layout12="{ span: 6 }"
           >
+            <KIconButton
+              :icon="expandOrCollapseAllIcon"
+              :tooltip="replaceAction$()"
+              @click="handleExpandCollapseAll"
+            />
             <KIconButton
               icon="refresh"
               :tooltip="replaceAction$()"
@@ -249,11 +254,17 @@
                       </KButton>
                     </div>
                   </template>
-                  <template #content="">
-                    <div :style="{ userSelect: dragActive ? 'none!important' : 'text' }">
-                      <h1 v-if="isItemExpanded(question.question_id)">
-                        {{ question.title }}
-                      </h1>
+                  <template #content>
+                    <div
+                      :style="{ userSelect: dragActive.value ? 'none!important' : 'text' }"
+                      :aria-expanded="isItemExpanded(question.question_id)"
+                    >
+                      <p
+                        v-if="isItemExpanded(question.question_id) && !dragActive.value"
+                        class="question-content-panel"
+                      >
+                        CONTENT OF {{ question.title }}
+                      </p>
                     </div>
                   </template>
                 </AccordionItem>
@@ -273,7 +284,7 @@
 
 <script>
 
-  import { get } from '@vueuse/core';
+  import { get, set } from '@vueuse/core';
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
@@ -317,8 +328,10 @@
 
       // The number we use for the default section title
       const sectionCreationCount = ref(1);
+      const dragActive = ref(false);
 
       return {
+        dragActive,
         sectionCreationCount,
         sectionLabel$,
         addQuizSections$,
@@ -333,11 +346,6 @@
         questionList$,
       };
     },
-    data() {
-      return {
-        dragActive: false,
-      };
-    },
     inject: ['quizForge'],
     computed: {
       accordionStyleOverrides() {
@@ -345,7 +353,7 @@
           color: this.$themeTokens.text + '!important',
           textDecoration: 'none',
           // Ensure text doesn't get highlighted as we drag
-          userSelect: this.dragActive ? 'none!important' : 'text',
+          userSelect: get(this.dragActive) ? 'none!important' : 'text',
         };
       },
       accordionTopBarStyles() {
@@ -443,6 +451,7 @@
         };
       },
       handleQuestionOrderChange({ newArray }) {
+        set(this.dragActive, false);
         const payload = {
           section_id: get(this.quizForge.activeSection).section_id,
           questions: newArray,
@@ -455,11 +464,11 @@
         this.sectionCreationCount++;
       },
       handleDragStart() {
-        this.dragActive = true;
+        set(this.dragActive, true);
       },
       /*
       handleSectionOptionSelect({ label }, section_id) {
-        this.dragActive = false;
+        set(this.dragActive, false);
         // Always set the active section to the one that is having its side panel opened
         this.quizForge.setActiveSection(section_id);
 
@@ -698,4 +707,12 @@
     }
   }
 
+  .question-content-panel {
+    padding-left: 5.5em;
+  }
+
+  /deep/ .sortable-handled {
+    align-self: flex-end;
+  }
+
 </style>

From 11fc97082d27c4a4d6220e29a91795d94c531d6f Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 25 Oct 2023 21:59:02 -0700
Subject: [PATCH 15/21] root page mostly feature complete; polish; a11y updates

---
 .../assets/src/composables/useQuizCreation.js |  62 ++--
 .../CreateExamPage/AccordionContainer.vue     |  17 ++
 .../plan/CreateExamPage/CreateQuizSection.vue | 289 ++++++++++--------
 .../plan/CreateExamPage/ReplaceQuestions.vue  |   4 +
 .../strings/enhancedQuizManagementStrings.js  |   4 +
 5 files changed, 221 insertions(+), 155 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 7221f588abd..923fadeff1e 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -1,4 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
+import isEqual from 'lodash/isEqual';
 import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
 import uniq from 'lodash/uniq';
 import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
@@ -43,9 +44,9 @@ export default (DEBUG = true) => {
    * The section that is currently selected for editing */
   const _activeSectionId = ref(null);
 
-  /** @type {ref<QuizQuestion[]>}
-   * The questions that are currently selected for action in the active section */
-  const _selectedQuestions = ref([]);
+  /** @type {ref<String[]>}
+   * The question_ids that are currently selected for action in the active section */
+  const _selectedQuestionIds = ref([]);
 
   /** @type {ref<Array>} A list of all channels available which have exercises */
   const _channels = ref([]);
@@ -53,7 +54,9 @@ export default (DEBUG = true) => {
   /** @type {ref<Number>} A counter for use in naming new sections */
   const _sectionLabelCounter = ref(1);
 
+  //--
   // Debug Data Generators
+  //--
   function _quizQuestions(num = 5) {
     const questions = [];
     for (let i = 0; i <= num; i++) {
@@ -71,7 +74,7 @@ export default (DEBUG = true) => {
     for (let i = 0; i <= num; i++) {
       const overrides = {
         section_id: uuidv4(),
-        section_title: `A section ${i}`,
+        section_title: `Test section ${i}`,
         questions: _quizQuestions(numQuestions),
       };
       sections.push(objectWithDefaults(overrides, QuizSection));
@@ -96,6 +99,7 @@ export default (DEBUG = true) => {
    * @throws {TypeError} if section is not a valid QuizSection
    **/
   function updateSection({ section_id, ...updates }) {
+    console.log('updating with...', section_id, updates);
     const targetSection = get(allSections).find(section => section.section_id === section_id);
     if (!targetSection) {
       throw new TypeError(`Section with id ${section_id} not found; cannot be updated.`);
@@ -135,10 +139,10 @@ export default (DEBUG = true) => {
   /**
    * @param {QuizQuestion[]} newQuestions
    * @affects _quiz - Updates the active section's `questions` property
-   * @affects _selectedQuestions - Clears this back to an empty array
+   * @affects _selectedQuestionIds - Clears this back to an empty array
    * @throws {TypeError} if newQuestions is not a valid array of QuizQuestions
    * Updates the active section's `questions` property with the given newQuestions, and clears
-   * _selectedQuestions from it. Then it resets _selectedQuestions to an empty array */
+   * _selectedQuestionIds from it. Then it resets _selectedQuestionIds to an empty array */
   // TODO WRITE THIS FUNCTION
   function replaceSelectedQuestions(newQuestions) {
     return newQuestions;
@@ -231,23 +235,24 @@ export default (DEBUG = true) => {
   // --------------------------------
 
   /** @param {QuizQuestion} question
-   * @affects _selectedQuestions - Adds question to _selectedQuestions if it isn't there already */
+   * @affects _selectedQuestionIds - Adds question to _selectedQuestionIds if it isn't
+   * there already */
   function addQuestionToSelection(question_id) {
-    set(_selectedQuestions, uniq([...get(_selectedQuestions), question_id]));
+    set(_selectedQuestionIds, uniq([...get(_selectedQuestionIds), question_id]));
   }
 
   /**
    * @param {QuizQuestion} question
-   * @affects _selectedQuestions - Removes question from _selectedQuestions if it is there */
+   * @affects _selectedQuestionIds - Removes question from _selectedQuestionIds if it is there */
   function removeQuestionFromSelection(question_id) {
     set(
-      _selectedQuestions,
-      get(_selectedQuestions).filter(id => id !== question_id)
+      _selectedQuestionIds,
+      get(_selectedQuestionIds).filter(id => id !== question_id)
     );
   }
 
   function toggleQuestionInSelection(question_id) {
-    if (get(_selectedQuestions).includes(question_id)) {
+    if (get(_selectedQuestionIds).includes(question_id)) {
       removeQuestionFromSelection(question_id);
     } else {
       addQuestionToSelection(question_id);
@@ -256,10 +261,10 @@ export default (DEBUG = true) => {
 
   function selectAllQuestions() {
     if (get(allQuestionsSelected)) {
-      set(_selectedQuestions, []);
+      set(_selectedQuestionIds, []);
     } else {
       set(
-        _selectedQuestions,
+        _selectedQuestionIds,
         get(activeQuestions).map(q => q.question_id)
       );
     }
@@ -326,9 +331,8 @@ export default (DEBUG = true) => {
   /** @type {ComputedRef<QuizQuestion[]>} All questions in the active section's `questions` property
    *                                      those which are currently set to be used in the section */
   const activeQuestions = computed(() => get(activeSection).questions);
-  /** @type {ComputedRef<QuizQuestion[]>} All questions the user has selected for the active
-   *                                         section */
-  const selectedActiveQuestions = computed(() => get(_selectedQuestions));
+  /** @type {ComputedRef<String[]>} All question_ids the user has selected for the active section */
+  const selectedActiveQuestions = computed(() => get(_selectedQuestionIds));
   /** @type {ComputedRef<QuizQuestion[]>} Questions in the active section's `resource_pool` that
    *                                         are not in `questions` */
   const replacementQuestionPool = computed(() => {});
@@ -339,9 +343,26 @@ export default (DEBUG = true) => {
    * See: remove/toggleQuestionFromSelection() & selectAllQuestions() for more */
 
   /** @type {ComputedRef<Boolean>} Whether all active questions are selected */
-  const allQuestionsSelected = computed(
-    () => get(selectedActiveQuestions).length === get(activeQuestions).length
-  );
+  const allQuestionsSelected = computed(() => {
+    return isEqual(
+      get(selectedActiveQuestions).sort(),
+      get(activeQuestions)
+        .map(q => q.question_id)
+        .sort()
+    );
+  });
+
+  /**
+   * Deletes and clears the selected questions from the active section
+   */
+  function deleteActiveSelectedQuestions() {
+    const { section_id, questions } = get(activeSection);
+    const selectedIds = get(selectedActiveQuestions);
+    const newQuestions = questions.filter(q => !selectedIds.includes(q.question_id));
+    updateSection({ section_id, questions: newQuestions });
+    set(_selectedQuestionIds, []);
+  }
+
   const noQuestionsSelected = computed(() => get(selectedActiveQuestions).length === 0);
   /** @type {ComputedRef<String>} The label that should be shown alongside the "Select all" checkbox
    */
@@ -370,6 +391,7 @@ export default (DEBUG = true) => {
     setActiveSection,
     initializeQuiz,
     updateQuiz,
+    deleteActiveSelectedQuestions,
     addQuestionToSelection,
     removeQuestionFromSelection,
     toggleQuestionInSelection,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
index b07998825aa..0f5d53e88cd 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
@@ -6,6 +6,11 @@
       name="list"
       class="wrapper"
     >
+      <slot
+        name="top"
+        :expandAll="expandAll"
+        :collapseAll="collapseAll"
+      ></slot>
       <slot
         :toggleItemState="toggleItemState"
         :isItemExpanded="isItemExpanded"
@@ -26,7 +31,18 @@
         expandedItemIds: [],
       };
     },
+    watch: {
+      expandedItemIds() {
+        this.$emit('toggled', this.expandedItemIds);
+      },
+    },
     methods: {
+      expandAll(ids = []) {
+        this.expandedItemIds = ids;
+      },
+      collapseAll() {
+        this.expandedItemIds = [];
+      },
       toggleItemState(id) {
         const index = this.expandedItemIds.indexOf(id);
         if (index === -1) {
@@ -43,6 +59,7 @@
           const index = this.expandedItemIds.indexOf(id);
           this.expandedItemIds.splice(index, 1);
         }
+        this.$emit('toggled', this.expandedItemIds);
       },
     },
   };
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 886732e4b77..25bb10830b5 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -34,6 +34,8 @@
 
     <KGrid :style="tabsWrapperStyles">
       <KGridItem
+        :layout4="{ span: 3 }"
+        :layout8="{ span: 6 }"
         :layout12="{ span: 10 }"
       >
         <TabsWithOverflow
@@ -45,6 +47,7 @@
             '' "
           backgroundColor="transparent"
           hoverBackgroundColor="transparent"
+          :aria-label="quizSectionsLabel$()"
           @click="id => quizForge.setActiveSection(id)"
         >
           <template #tab="{ tab }">
@@ -81,6 +84,9 @@
       </KGridItem>
 
       <KGridItem
+        style="padding: 0; margin-right: 0;"
+        :layout4="{ span: 1 }"
+        :layout8="{ span: 2 }"
         :layout12="{ span: 2 }"
       >
         <KButton
@@ -153,124 +159,141 @@
             </KButton>
           </KGridItem>
         </KGrid>
-        <KGrid :style="accordionTopBarStyles">
-          <KGridItem
-            class="left-side-heading"
-            :layout12="{ span: 6 }"
-          >
-            <KCheckbox
-              class="select-all-box"
-              :label="quizForge.selectAllLabel.value"
-              :checked="quizForge.allQuestionsSelected.value"
-              :indeterminate="quizForge.selectAllIsIndeterminate.value"
-              @change="() => quizForge.selectAllQuestions()"
-            />
-          </KGridItem>
 
-          <KGridItem
-            class="right-side-heading"
-            :layout12="{ span: 6 }"
-          >
-            <KIconButton
-              :icon="expandOrCollapseAllIcon"
-              :tooltip="replaceAction$()"
-              @click="handleExpandCollapseAll"
-            />
-            <KIconButton
-              icon="refresh"
-              :tooltip="replaceAction$()"
-              @click="handleReplaceSelection"
-            />
-            <KIconButton
-              icon="trash"
-              :tooltip="coreString('deleteAction')"
-              @click="handleDeleteSelection"
-            />
-          </KGridItem>
 
-        </KGrid>
+        <AccordionContainer
+          :items="quizForge.activeQuestions.value"
+          @toggled="items => expandedQuestionIds = items"
+        >
+          <template #top="{ expandAll, collapseAll }">
+            <KGrid key="top-bar" :style="accordionTopBarStyles">
+              <KGridItem
+                class="left-side-heading"
+                :layout12="{ span: 6 }"
+              >
+                <KCheckbox
+                  class="select-all-box"
+                  :label="quizForge.selectAllLabel.value"
+                  :checked="quizForge.allQuestionsSelected.value"
+                  :indeterminate="quizForge.selectAllIsIndeterminate.value"
+                  @change="() => quizForge.selectAllQuestions()"
+                />
+              </KGridItem>
 
-        <AccordionContainer v-slot="{ toggleItemState, isItemExpanded }">
-          <DragContainer
-            key="drag-container"
-            :items="quizForge.activeQuestions.value"
-            @sort="handleQuestionOrderChange"
-            @dragStart="handleDragStart"
-          >
-            <transition-group
-              tag="div"
-              name="list"
-              class="wrapper"
+              <KGridItem
+                class="right-side-heading"
+                :layout12="{ span: 6 }"
+              >
+                <KIconButton
+                  icon="expandAll"
+                  :tooltip="expandAll$()"
+                  :disabled="expandedQuestionIds.length === quizForge.activeQuestions.value.length"
+                  @click="expandAll(quizForge.activeQuestions.value.map(i => i.question_id))"
+                />
+                <KIconButton
+                  icon="collapseAll"
+                  :tooltip="collapseAll$()"
+                  :disabled="expandedQuestionIds.length === 0"
+                  @click="collapseAll()"
+                />
+                <KIconButton
+                  icon="refresh"
+                  :tooltip="replaceAction$()"
+                  :disabled="quizForge.selectedActiveQuestions.value.length === 0"
+                  @click="handleReplaceSelection"
+                />
+                <KIconButton
+                  icon="trash"
+                  :tooltip="coreString('deleteAction')"
+                  :aria-label="coreString('deleteAction')"
+                  :disabled="quizForge.selectedActiveQuestions.value.length === 0"
+                  @click="quizForge.deleteActiveSelectedQuestions"
+                />
+              </KGridItem>
+
+            </KGrid>
+          </template>
+          <template #default="{ toggleItemState, isItemExpanded }">
+            <DragContainer
+              key="drag-container"
+              :items="quizForge.activeQuestions.value"
+              @sort="handleQuestionOrderChange"
+              @dragStart="handleDragStart"
             >
-              <Draggable
-                v-for="(question, index) in quizForge.activeQuestions.value"
-                :key="`drag-${question.question_id}`"
-                tabindex="-1"
-                style="background: white"
+              <transition-group
+                tag="div"
+                name="list"
+                class="wrapper"
               >
-                <AccordionItem :id="question.question_id" :title="question.title">
-                  <template #heading="{ title }">
-                    <div class="accordion-header">
-                      <DragHandle>
-                        <div>
-                          <DragSortWidget
-                            class="sort-widget"
-                            moveUpText="up"
-                            moveDownText="down"
-                            :noDrag="true"
-                            :isFirst="index === 0"
-                            :isLast="index === quizForge.activeQuestions.value.length - 1"
-                            @moveUp="shiftOne(index, -1)"
-                            @moveDown="shiftOne(index, +1)"
-                          />
-                        </div>
-                      </DragHandle>
-                      <KCheckbox
-                        style="padding-left: 0.5em"
-                        :checked="quizForge.selectedActiveQuestions.value.includes(
-                          question.question_id
-                        )"
-                        @change="() => quizForge.toggleQuestionInSelection(question.question_id)"
-                      />
-                      <KButton
-                        tabindex="0"
-                        appearance="basic-link"
-                        :style="accordionStyleOverrides"
-                        class="accordion-header-label"
-                        @click="toggleItemState(question.question_id)"
-                      >
-                        {{ title }}
-                      </KButton>
-                      <KButton
-                        appearance="basic-link"
-                        :style="accordionStyleOverrides"
-                        class="accordion-header-chevron"
-                        @click="toggleItemState(question.question_id)"
+                <Draggable
+                  v-for="(question, index) in quizForge.activeQuestions.value"
+                  :key="`drag-${question.question_id}`"
+                  tabindex="-1"
+                  style="background: white"
+                >
+                  <AccordionItem :id="question.question_id" :title="question.title">
+                    <template #heading="{ title }">
+                      <h3
+                        class="accordion-header"
                       >
-                        <KIcon
-                          :icon="isItemExpanded(question.question_id) ?
-                            'chevronUp' : 'chevronRight'"
+                        <DragHandle>
+                          <div>
+                            <DragSortWidget
+                              class="sort-widget"
+                              moveUpText="up"
+                              moveDownText="down"
+                              :noDrag="true"
+                              :isFirst="index === 0"
+                              :isLast="index === quizForge.activeQuestions.value.length - 1"
+                              @moveUp="shiftOne(index, -1)"
+                              @moveDown="shiftOne(index, +1)"
+                            />
+                          </div>
+                        </DragHandle>
+                        <KCheckbox
+                          style="padding-left: 0.5em"
+                          :checked="quizForge.selectedActiveQuestions.value.includes(
+                            question.question_id
+                          )"
+                          @change="() => quizForge.toggleQuestionInSelection(question.question_id)"
                         />
-                      </KButton>
-                    </div>
-                  </template>
-                  <template #content>
-                    <div
-                      :style="{ userSelect: dragActive.value ? 'none!important' : 'text' }"
-                      :aria-expanded="isItemExpanded(question.question_id)"
-                    >
-                      <p
-                        v-if="isItemExpanded(question.question_id) && !dragActive.value"
-                        class="question-content-panel"
+                        <KButton
+                          tabindex="0"
+                          appearance="basic-link"
+                          :style="accordionStyleOverrides"
+                          class="accordion-header-label"
+                          :aria-expanded="isItemExpanded(question.question_id)"
+                          :aria-controls="`question-panel-${question.question_id}`"
+                          @click="toggleItemState(question.question_id)"
+                        >
+                          <span>{{ title }}</span>
+                          <KIcon
+                            style="position: absolute; right:0; top: 0.92em"
+                            :icon="isItemExpanded(question.question_id) ?
+                              'chevronUp' : 'chevronRight'"
+                          />
+                        </KButton>
+                      </h3>
+                    </template>
+                    <template #content>
+                      <div
+                        :id="`question-panel-${question.question_id}`"
+                        :ref="`question-panel-${question.question_id}`"
+                        :style="{ userSelect: dragActive.value ? 'none!important' : 'text' }"
                       >
-                        CONTENT OF {{ question.title }}
-                      </p>
-                    </div>
-                  </template>
-                </AccordionItem>
-              </Draggable>
-            </transition-group>
-          </DragContainer>
+                        <p
+                          v-if="isItemExpanded(question.question_id) && !dragActive.value"
+                          class="question-content-panel"
+                        >
+                          CONTENT OF {{ question.title }}
+                        </p>
+                      </div>
+                    </template>
+                  </AccordionItem>
+                </Draggable>
+              </transition-group>
+            </DragContainer>
+          </template>
         </AccordionContainer>
       </div>
 
@@ -317,6 +340,7 @@
         addQuizSections$,
         addSectionLabel$,
         quizTitle$,
+        quizSectionsLabel$,
         addQuestionsLabel$,
         noQuestionsInSection$,
         addQuizSectionQuestionsInstructions$,
@@ -324,17 +348,24 @@
         deleteSectionLabel$,
         replaceAction$,
         questionList$,
+        expandAll$,
+        collapseAll$,
       } = enhancedQuizManagementStrings;
 
       // The number we use for the default section title
       const sectionCreationCount = ref(1);
       const dragActive = ref(false);
+      const expandedQuestionIds = ref([]);
 
       return {
+        expandedQuestionIds,
         dragActive,
         sectionCreationCount,
+        expandAll$,
+        collapseAll$,
         sectionLabel$,
         addQuizSections$,
+        quizSectionsLabel$,
         addSectionLabel$,
         quizTitle$,
         addQuestionsLabel$,
@@ -372,6 +403,7 @@
         return {
           paddingTop: '1rem',
           borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
+          flexWrap: 'nowrap',
         };
       },
       tabs() {
@@ -405,7 +437,14 @@
         ];
       },
     },
+    mounted() {
+      this.$store.dispatch('notLoading');
+    },
     methods: {
+      handleReplaceSelection() {
+        const section_id = get(this.quizForge.activeSection).section_id;
+        this.$router.replace({ path: 'new/' + section_id + '/replace-questions' });
+      },
       handleActiveSectionAction(opt) {
         const section_id = this.quizForge.activeSection.value.section_id;
         switch (opt.label) {
@@ -415,6 +454,7 @@
           case this.deleteSectionLabel$():
             console.log('Deleting, ', this.quizForge.activeSection.value.section_id);
             this.quizForge.removeSection(this.quizForge.activeSection.value.section_id);
+            this.focusActiveSectionTab();
             break;
         }
       },
@@ -427,7 +467,7 @@
         // TODO Consider the "Delete section" button on the side panel; maybe we need to await
         // nextTick if we're getting the error
         if (tabRef) {
-          tabRef.$el.focus();
+          tabRef.focus();
         } else {
           console.error(
             'Tried to focus active tab id: ',
@@ -466,22 +506,6 @@
       handleDragStart() {
         set(this.dragActive, true);
       },
-      /*
-      handleSectionOptionSelect({ label }, section_id) {
-        set(this.dragActive, false);
-        // Always set the active section to the one that is having its side panel opened
-        this.quizForge.setActiveSection(section_id);
-
-        switch (label) {
-          case this.editSectionLabel$():
-            this.$router.replace({ path: 'new/' + section_id + '/edit' });
-            break;
-          case this.deleteSectionLabel$():
-            this.quizForge.removeSection(section_id);
-            break;
-        }
-      },
-      */
       openSelectResources(section_id) {
         this.$router.replace({ path: 'new/' + section_id + '/select-resources' });
       },
@@ -649,10 +673,12 @@
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    padding: 0 0.5em;
+    padding: 0 0.5em !important;
+    margin: 0.25em 0;
   }
 
   .accordion-header-label {
+    position: relative;
     flex-grow: 1;
     align-self: stretch;
     padding: 0 0 0 1em;
@@ -661,13 +687,6 @@
     cursor: pointer;
   }
 
-  .accordion-header-chevron {
-    display: flex;
-    align-items: center;
-    align-self: stretch;
-    cursor: pointer;
-  }
-
   /deep/ .checkbox-icon {
     top: 2px;
   }
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
index 7116850ebe9..4357c1e4ee1 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
@@ -2,6 +2,9 @@
 
   <div>
     <h1>Replace questions</h1>
+    <p v-for="(question,index) in quizForge.selectedActiveQuestions.value" :key="`${index}q`">
+      {{ JSON.stringify(question) }}
+    </p>
     <h2>
       <KRouterLink appearance="raised-button" :to="{ path: 'select-resources' }">
         Select resources
@@ -16,6 +19,7 @@
 
   export default {
     name: 'ReplaceQuestions',
+    inject: ['quizForge'],
   };
 
 </script>
diff --git a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
index 296bbb08e1d..c3b0a009a90 100644
--- a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
+++ b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
@@ -10,6 +10,10 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   createNewQuiz: {
     message: 'Create new quiz',
   },
+  quizSectionsLabel: {
+    message: 'Quiz sections',
+    context: 'Used as an aria-label for screen readers to describe the purpose of the list of tabs',
+  },
   quizTitle: {
     message: 'Quiz title',
   },

From f166476bb9f2069b51c001e6d4d1a0992b9d8b36 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 25 Oct 2023 22:04:37 -0700
Subject: [PATCH 16/21] handle quiz title field

---
 .../assets/src/views/plan/CreateExamPage/CreateQuizSection.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 25bb10830b5..ad0b77be762 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -24,6 +24,7 @@
           :autofocus="true"
           :maxlength="100"
           @blur="e => quizForge.updateQuiz({ title: e.target.value })"
+          @change="title => quizForge.updateQuiz({ title })"
         />
       </KGridItem>
     </KGrid>

From 1b08d9cff430b3498e2baa04fb4914c022a55c71 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 15 Nov 2023 17:54:35 -0800
Subject: [PATCH 17/21] Ensure [Tab]-nav flow works properly when leaving
 Options button

KDS commit 047379f579ad7067381a9576edc21abd12ad8378 is a req for this change
---
 .../assets/src/views/plan/CreateExamPage/CreateQuizSection.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index ad0b77be762..0f21e573849 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -154,6 +154,7 @@
                   :disabled="false"
                   :hasIcons="true"
                   :options="activeSectionActions"
+                  @tab="e => (e.preventDefault() || $refs.selectAllCheckbox.focus())"
                   @select="handleActiveSectionAction"
                 />
               </template>
@@ -161,7 +162,6 @@
           </KGridItem>
         </KGrid>
 
-
         <AccordionContainer
           :items="quizForge.activeQuestions.value"
           @toggled="items => expandedQuestionIds = items"
@@ -173,6 +173,7 @@
                 :layout12="{ span: 6 }"
               >
                 <KCheckbox
+                  ref="selectAllCheckbox"
                   class="select-all-box"
                   :label="quizForge.selectAllLabel.value"
                   :checked="quizForge.allQuestionsSelected.value"

From 877d26fd470c1a4d8bc3f53b9b34c499ece33994 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 15 Nov 2023 18:13:55 -0800
Subject: [PATCH 18/21] not debug by default

---
 kolibri/plugins/coach/assets/src/composables/useQuizCreation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 923fadeff1e..db10418e6af 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -31,7 +31,7 @@ function isExercise(o) {
 /**
  * Composable function presenting primary interface for Quiz Creation
  */
-export default (DEBUG = true) => {
+export default (DEBUG = false) => {
   // -----------
   // Local state
   // -----------

From a86be796e480ba3dad7cbc9615c151b3c0862295 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 16 Nov 2023 15:09:41 -0800
Subject: [PATCH 19/21] fix eternal loading state when navigation routes

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 28 +++++++++++++++----
 .../src/views/plan/CreateExamPage/index.vue   |  4 +++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 0f21e573849..e7b78407e30 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -109,6 +109,28 @@
     >
       <!-- TODO This should be a separate component like "empty section container" or something -->
       <div v-if="!quizForge.activeQuestions.value.length" class="no-question-style">
+        <KGrid class="questions-list-label-row">
+          <KGridItem
+            class="right-side-heading"
+            style="padding: 0.7em 0.75em;"
+          >
+            <KButton
+              primary
+              :text="coreString('optionsLabel')"
+            >
+              <template #menu>
+                <KDropdownMenu
+                  :primary="false"
+                  :disabled="false"
+                  :hasIcons="true"
+                  :options="activeSectionActions"
+                  @tab="e => (e.preventDefault() || $refs.selectAllCheckbox.focus())"
+                  @select="handleActiveSectionAction"
+                />
+              </template>
+            </KButton>
+          </KGridItem>
+        </KGrid>
         <div class="question-mark-layout">
           <span class="help-icon-style">?</span>
         </div>
@@ -439,9 +461,6 @@
         ];
       },
     },
-    mounted() {
-      this.$store.dispatch('notLoading');
-    },
     methods: {
       handleReplaceSelection() {
         const section_id = get(this.quizForge.activeSection).section_id;
@@ -454,7 +473,6 @@
             this.$router.replace({ path: 'new/' + section_id + '/edit' });
             break;
           case this.deleteSectionLabel$():
-            console.log('Deleting, ', this.quizForge.activeSection.value.section_id);
             this.quizForge.removeSection(this.quizForge.activeSection.value.section_id);
             this.focusActiveSectionTab();
             break;
@@ -698,7 +716,7 @@
   }
 
   /deep/ .overflow-tabs svg {
-    top: 7px !important;
+    top: 5px !important;
   }
 
   .select-all-box {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index fba6c77f1c5..0ed911db4a6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -103,6 +103,10 @@
       },
     },
     watch: {
+      $route: function() {
+        // FIXME Coach shouldn't be setting loading in a beforeEach here maybe?
+        this.$store.dispatch('notLoading');
+      },
       filters(newVal) {
         this.$router.push({
           query: { ...this.$route.query, ...pickBy(newVal) },

From 51d0e6a7adebc2bb1f54b3000006fea585f3161d Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 29 Nov 2023 13:19:09 -0800
Subject: [PATCH 20/21] KDS Update

---
 kolibri/core/package.json |  2 +-
 yarn.lock                 | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index fa362410689..b237aa97759 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.0",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#v2.0.0-beta1",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#0ed2f274b1bc3808218a4d3f526c181b96b32c6d",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
diff --git a/yarn.lock b/yarn.lock
index 83628e74102..154d12265f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7648,6 +7648,22 @@ kolibri-constants@0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.0.tgz#47c9d773894e23251ba5ac4db420822e45603142"
   integrity sha512-WYDMGDzB9gNxRbpX1O2cGe1HrJvLvSZGwMuAv6dqrxJgPf7iO+Hi40/1CXjHM7nk5CRt+hn5bqnMzCBmj1omPA==
 
+"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#0ed2f274b1bc3808218a4d3f526c181b96b32c6d":
+  version "1.3.0"
+  resolved "https://github.com/learningequality/kolibri-design-system#0ed2f274b1bc3808218a4d3f526c181b96b32c6d"
+  dependencies:
+    aphrodite "https://github.com/learningequality/aphrodite/"
+    autosize "^3.0.21"
+    css-element-queries "^1.2.0"
+    frame-throttle "^3.0.0"
+    fuzzysearch "^1.0.3"
+    keen-ui "^1.3.0"
+    lodash "^4.17.15"
+    popper.js "^1.14.6"
+    purecss "^0.6.2"
+    tippy.js "^4.2.1"
+    vue-intl "^3.1.0"
+
 "kolibri-design-system@https://github.com/learningequality/kolibri-design-system#v2.0.0-beta1":
   version "1.3.0"
   resolved "https://github.com/learningequality/kolibri-design-system#13e539592fd87508cd32f60e4ad22c1ec320559b"

From 1a65873c674ba71def0a681e6d61ef3dc78da543 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 30 Nov 2023 13:17:19 -0800
Subject: [PATCH 21/21] lint

---
 kolibri/plugins/coach/assets/src/composables/useQuizCreation.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index db10418e6af..41aa7b3bcea 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -99,7 +99,6 @@ export default (DEBUG = false) => {
    * @throws {TypeError} if section is not a valid QuizSection
    **/
   function updateSection({ section_id, ...updates }) {
-    console.log('updating with...', section_id, updates);
     const targetSection = get(allSections).find(section => section.section_id === section_id);
     if (!targetSection) {
       throw new TypeError(`Section with id ${section_id} not found; cannot be updated.`);