From e397be15e8c9e2ca02f6fde4c31632636583eeca Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Fri, 25 Aug 2023 13:38:17 -0700
Subject: [PATCH 01/19] remove unnecessary 85px top margin from
 CoachImmersivePage

---
 kolibri/plugins/coach/assets/src/views/CoachImmersivePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/CoachImmersivePage.vue b/kolibri/plugins/coach/assets/src/views/CoachImmersivePage.vue
index abe047c6afa..05d9f369a6e 100644
--- a/kolibri/plugins/coach/assets/src/views/CoachImmersivePage.vue
+++ b/kolibri/plugins/coach/assets/src/views/CoachImmersivePage.vue
@@ -125,7 +125,7 @@
 <style lang="scss" scoped>
 
   .coach-main {
-    margin: 85px auto 0;
+    margin: 0 auto;
   }
 
 </style>

From 1ff04c73e3b90caefcd5a076176b4aacdd733d9b Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Fri, 25 Aug 2023 13:38:40 -0700
Subject: [PATCH 02/19] center and maxat 1000px the kpagecontainer in
 createquizsection

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

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 16fb4d33ae0..43c2fcc2aa6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -29,12 +29,10 @@
     </UiAlert>
 
     <KPageContainer
-      :style="maxContainerHeight"
+      :style="{ ...maxContainerHeight, maxWidth: '1000px', margin: '0 auto' }"
     >
 
       <CreateQuizSection />
-
-
       <div v-if="bookmarksRoute">
         <strong>
           <KRouterLink

From f82bf103767dcea1c1b81e3e30a43cb9ef20a319 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Fri, 25 Aug 2023 13:39:08 -0700
Subject: [PATCH 03/19] polishing quiz title field & icon

---
 .../plan/CreateExamPage/CreateQuizSection.vue     | 15 +++++++++++----
 1 file changed, 11 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 c5df9cbf5c1..6c4fff44992 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -491,13 +491,20 @@
 <style lang="scss"  scoped>
 
   .style-icon {
-    width: 2.5em;
-    height: 2.5em;
-    margin: 1.5em;
+    width: 32px;
+    height: 32px;
+    margin-top: 8px;
+    margin-left: 16px;
   }
 
   /deep/ .ui-textbox-label {
-    width: 76.5em;
+    width: 100% !important;
+  }
+
+  /deep/ .textbox {
+    width: 100% !important;
+    max-width: 100%;
+    margin-left: -1em;
   }
 
   .no-question-layout {

From e2c7d98a55decdcda9047bd87d8ab48317738d75 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Fri, 25 Aug 2023 13:52:41 -0700
Subject: [PATCH 04/19] tidy spacing on text/title field

---
 .../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 6c4fff44992..8adf46ae743 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 class="add-padding">
+    <KGrid>
       <KGridItem
         :layout4="{ span: 1 }"
         :layout8="{ span: 1 }"
@@ -29,7 +27,9 @@
       </KGridItem>
     </KGrid>
 
-    <p>{{ $tr('addSectionsDescription') }}</p>
+    <p style="margin-top: 0px;">
+      {{ $tr('addSectionsDescription') }}
+    </p>
 
     <hr class="bottom-border">
     <br>
@@ -532,7 +532,7 @@
   }
 
   .add-padding {
-    padding-top: 2rem;
+    padding-top: 16px;
   }
 
   .no-question-style {

From 546483f316c128ce6844b719f737a7d9564ab558 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 29 Aug 2023 14:20:45 -0700
Subject: [PATCH 05/19] make the composable useQuizCreation the default export

---
 .../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 895e3298233..c43cc987ca6 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -29,7 +29,7 @@ function isExercise(o) {
 /**
  * Composable function presenting primary interface for Quiz Creation
  */
-export function useQuizCreation() {
+export default () => {
   // -----------
   // Local state
   // -----------
@@ -285,4 +285,4 @@ export function useQuizCreation() {
     selectedActiveQuestions,
     replacementQuestionPool,
   };
-}
+};

From 1fb72299a78cabf25c3560a505325d674930b45d Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 29 Aug 2023 14:21:23 -0700
Subject: [PATCH 06/19] provide/inject composable as `quizForge` - set quiz
 title on field blur evt

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 16 ++-----
 .../src/views/plan/CreateExamPage/index.vue   | 47 +++++++++++++++++++
 2 files changed, 52 insertions(+), 11 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 8adf46ae743..8df62805dab 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -23,6 +23,7 @@
           :label="coachString('titleLabel')"
           :autofocus="true"
           :maxlength="100"
+          @blur="e => quizForge.updateQuiz({ title: e.target.value })"
         />
       </KGridItem>
     </KGrid>
@@ -39,7 +40,7 @@
       class="kgrid-alignment-style"
     >
       <KGridItem
-        :layout12="{ span: 6 }"
+        :layout12="{ span: 10 }"
         :style="noKgridItemPadding"
       >
         <KTabs
@@ -47,18 +48,15 @@
           ariaLabel="Coach reports"
           :tabs="tabs"
         >
-          <template>
-
-          </template>
+          <template></template>
         </KTabs>
       </KGridItem>
 
       <KGridItem
-        :layout12="{ span: 6 }"
+        :layout12="{ span: 2 }"
         :style="noKgridItemPadding"
       >
         <KButton
-          class="float-button"
           appearance="flat-button"
           icon="plus"
         >
@@ -344,6 +342,7 @@
       DragSortWidget,
     },
     mixins: [commonCoreStrings, commonCoach],
+    inject: ['quizForge'],
     data() {
       return {
         tabs: [{ id: '', label: this.$tr('sectionLabel') }],
@@ -539,11 +538,6 @@
     font-weight: bold;
   }
 
-  .float-button {
-    float: right;
-    background-color: #f5f5f5;
-  }
-
   .bottom-border {
     border: 1px solid #dedede;
   }
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 43c2fcc2aa6..b26e9fb426b 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -162,9 +162,12 @@
   import commonCoach from '../../common';
   import CoachImmersivePage from '../../CoachImmersivePage';
   import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon';
+  import useQuizCreation from '../../../composables/useQuizCreation';
   import CreateQuizSection from './CreateQuizSection.vue';
   import SectionSidePanel from './SectionSidePanel.vue';
 
+  const quizForge = useQuizCreation();
+
   export default {
     // TODO: Rename this to 'ExamCreationPage'
     name: 'CreateExamPage',
@@ -182,6 +185,36 @@
     },
     mixins: [commonCoreStrings, commonCoach, responsiveWindowMixin],
     data() {
+      /**
+       * TODO
+       * const {
+          // Methods
+          saveQuiz,
+          updateSection,
+          replaceSelectedQuestions,
+          addSection,
+          removeSection,
+          setActiveSection,
+          initializeQuiz,
+          updateQuiz,
+          addQuestionToSelection,
+          removeQuestionFromSelection,
+
+          // Computed
+          channels,
+          quiz,
+          allSections,
+          activeSection,
+          activeExercisePool,
+          activeQuestionsPool,
+          activeQuestions,
+          selectedActiveQuestions,
+          replacementQuestionPool,
+          } = quizForge;
+
+          or can I just ...quizForge in the return?
+      **/
+
       return {
         showError: false,
         moreResultsState: null,
@@ -195,9 +228,22 @@
         bookmarksCount: 0,
         bookmarks: [],
         more: null,
+        quizForge,
         // showSectionSettingsMenu:false
       };
     },
+    /**
+     * @returns {object}
+     * @property {object} quizForge - see useQuizCreation for details; this is a reflection of
+     *                                the object returned by that function which is initialized
+     *                                within this component
+     * add `inject: ['quizForge']` to any descendant component to access this
+     */
+    provide() {
+      return {
+        quizForge: this.quizForge,
+      };
+    },
     computed: {
       ...mapState(['toolbarRoute']),
       ...mapGetters('examCreation', ['numRemainingSearchResults']),
@@ -397,6 +443,7 @@
       },
     },
     created() {
+      this.quizForge.initializeQuiz();
       ContentNodeResource.fetchBookmarks({
         params: { limit: 25, kind: ContentNodeKinds.EXERCISE, available: true },
       }).then(data => {

From 9c8490f3cfbd61dfbdde49db849947dcf42adfd7 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 29 Aug 2023 14:25:16 -0700
Subject: [PATCH 07/19] remove unused resource selection

further cleaning

futherfurther cleanup
---
 .../src/views/plan/CreateExamPage/index.vue   | 649 +-----------------
 1 file changed, 4 insertions(+), 645 deletions(-)

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 b26e9fb426b..ca4f82374e4 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -6,7 +6,7 @@
     authorizedRole="adminOrCoach"
     icon="close"
     :pageTitle="$tr('createNewExamLabel')"
-    :route="toolbarRoute"
+    :route="$router.back()"
   >
     <KRouterLink
       appearance="raised-button"
@@ -20,114 +20,18 @@
       text="Test Replace Questions"
     />
 
-    <UiAlert
-      v-if="showError && !inSearchMode"
-      type="error"
-      :dismissible="false"
-    >
-      {{ selectionIsInvalidText }}
-    </UiAlert>
-
     <KPageContainer
       :style="{ ...maxContainerHeight, maxWidth: '1000px', margin: '0 auto' }"
     >
 
       <CreateQuizSection />
-      <div v-if="bookmarksRoute">
-        <strong>
-          <KRouterLink
-            :text="coreString('channelsLabel')"
-            :to="channelsLink"
-          />
-        </strong>
-        <ContentCardList
-          :contentList="bookmarks"
-          :contentHasCheckbox="contentHasCheckbox"
-          :contentCardMessage="() => ''"
-          :selectAllChecked="selectAllChecked"
-          :selectAllIndeterminate="selectAllIndeterminate"
-          :contentCardLink="bookmarksLink"
-          :contentIsChecked="contentIsSelected"
-          :viewMoreButtonState="viewMoreButtonState"
-          :showSelectAll="selectAllIsVisible"
-          :contentIsIndeterminate="contentIsIndeterminate"
-          @changeselectall="toggleTopicInWorkingResources"
-          @change_content_card="toggleSelected"
-          @moreresults="handleMoreResults"
-        />
-      </div>
-      <div v-if="examCreationRoute">
-        <p v-if="bookmarksCount">
-          {{ coreString('selectFromBookmarks') }}
-        </p>
-        <KRouterLink
-          v-if="bookmarksCount"
-          :style="{ width: '100%' }"
-          :to="getBookmarksLink()"
-        >
-          <div class="bookmark-container">
-            <BookmarkIcon />
-            <div class="text">
-              <h3>{{ coreString('bookmarksLabel') }}</h3>
-              <p>{{ $tr('resources', { count: bookmarksCount }) }}</p>
-            </div>
-          </div>
-        </KRouterLink>
-      </div>
-
-      <div v-if="examCreationRoute || examTopicRoute || inSearchMode">
-        <!-- <LessonsSearchBox
-          class="search-box"
-          @searchterm="handleSearchTerm"
-        /> -->
 
-        <LessonsSearchFilters
-          v-if="inSearchMode"
-          v-model="filters"
-          :searchTerm="searchTerm"
-          :searchResults="searchResults"
-        />
-        <ResourceSelectionBreadcrumbs
-          v-else
-          :ancestors="ancestors"
-          :channelsLink="channelsLink"
-          :topicsLink="topicsLink"
-        />
-        <h2>{{ topicTitle }}</h2>
-        <p>{{ topicDescription }}</p>
-        <ContentCardList
-          :contentList="filteredContentList"
-          :showSelectAll="selectAllIsVisible"
-          :viewMoreButtonState="viewMoreButtonState"
-          :selectAllChecked="selectAllChecked"
-          :selectAllIndeterminate="selectAllIndeterminate"
-          :contentIsChecked="contentIsSelected"
-          :contentIsIndeterminate="contentIsIndeterminate"
-          :contentHasCheckbox="contentHasCheckbox"
-          :contentCardMessage="selectionMetadata"
-          :contentCardLink="contentLink"
-          @changeselectall="toggleTopicInWorkingResources"
-          @change_content_card="toggleSelected"
-          @moreresults="handleMoreResults"
-        />
-      </div>
-
-
-      <BottomAppBar v-if="inSearchMode">
-        <KRouterLink
-          appearance="raised-button"
-          :text="$tr('exitSearchButtonLabel')"
-          primary
-          :to="topicRoute"
-        />
-      </BottomAppBar>
-      <BottomAppBar v-else>
+      <BottomAppBar>
         <KButtonGroup>
           <KButton
             :text="coreString('saveAction')"
             primary
-            :disabled="!exercisesHaveBeenSelected"
-            @click="continueProcess"
+            @click="() => quizForge.saveQuiz()"
           />
         </KButtonGroup>
       </BottomAppBar>
@@ -143,25 +47,12 @@
 
 <script>
 
-  import { mapState, mapActions, mapGetters } from 'vuex';
-  import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
-  import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
-  import flatMap from 'lodash/flatMap';
   import pickBy from 'lodash/pickBy';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import { ContentNodeResource } from 'kolibri.resources';
-  import { PageNames } from '../../../constants/';
-  // import { MAX_QUESTIONS } from '../../../constants/examConstants';
-  // import LessonsSearchBox from '../../plan/LessonResourceSelectionPage/
-  // SearchTools/LessonsSearchBox';
-  import LessonsSearchFilters from '../../plan/LessonResourceSelectionPage/SearchTools/LessonsSearchFilters';
-  import ResourceSelectionBreadcrumbs from '../../plan/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
-  import ContentCardList from '../../plan/LessonResourceSelectionPage/ContentCardList';
   import commonCoach from '../../common';
   import CoachImmersivePage from '../../CoachImmersivePage';
-  import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon';
   import useQuizCreation from '../../../composables/useQuizCreation';
   import CreateQuizSection from './CreateQuizSection.vue';
   import SectionSidePanel from './SectionSidePanel.vue';
@@ -169,67 +60,18 @@
   const quizForge = useQuizCreation();
 
   export default {
-    // TODO: Rename this to 'ExamCreationPage'
     name: 'CreateExamPage',
     components: {
       SectionSidePanel,
       UiAlert,
       CoachImmersivePage,
-      // LessonsSearchBox,
-      LessonsSearchFilters,
-      ResourceSelectionBreadcrumbs,
-      ContentCardList,
       BottomAppBar,
-      BookmarkIcon,
       CreateQuizSection,
     },
     mixins: [commonCoreStrings, commonCoach, responsiveWindowMixin],
     data() {
-      /**
-       * TODO
-       * const {
-          // Methods
-          saveQuiz,
-          updateSection,
-          replaceSelectedQuestions,
-          addSection,
-          removeSection,
-          setActiveSection,
-          initializeQuiz,
-          updateQuiz,
-          addQuestionToSelection,
-          removeQuestionFromSelection,
-
-          // Computed
-          channels,
-          quiz,
-          allSections,
-          activeSection,
-          activeExercisePool,
-          activeQuestionsPool,
-          activeQuestions,
-          selectedActiveQuestions,
-          replacementQuestionPool,
-          } = quizForge;
-
-          or can I just ...quizForge in the return?
-      **/
-
       return {
-        showError: false,
-        moreResultsState: null,
-        // null corresponds to 'All' filter value
-        filters: {
-          channel: this.$route.query.channel || null,
-          kind: this.$route.query.kind || null,
-          role: this.$route.query.role || null,
-        },
-        // numQuestionsBlurred: false,
-        bookmarksCount: 0,
-        bookmarks: [],
-        more: null,
         quizForge,
-        // showSectionSettingsMenu:false
       };
     },
     /**
@@ -245,195 +87,9 @@
       };
     },
     computed: {
-      ...mapState(['toolbarRoute']),
-      ...mapGetters('examCreation', ['numRemainingSearchResults']),
-      ...mapState('examCreation', [
-        // 'numberOfQuestions',
-        'contentList',
-        'selectedExercises',
-        // 'availableQuestions',
-        'searchResults',
-        'ancestors',
-      ]),
-      topicRoute() {
-        if (this.$route.query.last_id) {
-          return {
-            name: PageNames.EXAM_CREATION_TOPIC,
-            params: {
-              topicId: this.$route.query.last_id,
-            },
-          };
-        } else {
-          return this.toolbarRoute;
-        }
-      },
-      pageName() {
-        return this.$route.name;
-      },
-      // maxQs() {
-      //   return MAX_QUESTIONS;
-      // },
-      bookmarksRoute() {
-        return (
-          this.pageName === PageNames.EXAM_CREATION_BOOKMARKS_MAIN ||
-          this.pageName === PageNames.EXAM_CREATION_BOOKMARKS
-        );
-      },
-      examCreationRoute() {
-        return this.pageName === PageNames.EXAM_CREATION_ROOT;
-      },
-      examTopicRoute() {
-        return this.pageName === PageNames.EXAM_CREATION_TOPIC;
-      },
       maxContainerHeight() {
         return { maxHeight: '1000px' };
       },
-      // examTitle: {
-      //   get() {
-      //     return this.$store.state.examCreation.title;
-      //   },
-      //   set(value) {
-      //     this.$store.commit('examCreation/SET_TITLE', value);
-      //   },
-      // },
-      // numQuestions: {
-      //   get() {
-      //     return this.numberOfQuestions;
-      //   },
-      //   set(value) {
-      //     // If value in the input doesn't match state, update it
-      //     if (value !== Number(this.$refs.questionsInput.currentText)) {
-      //       this.$refs.questionsInput.currentText = value;
-      //     }
-      //     // If it is cleared out, then set vuex state to null so it can be caught during
-      //     // validation
-      //     if (value === '') {
-      //       this.$store.commit('examCreation/SET_NUMBER_OF_QUESTIONS', null);
-      //     }
-      //     if (value && value >= 1 && value <= this.maxQs) {
-      //       this.$store.commit('examCreation/SET_NUMBER_OF_QUESTIONS', value);
-      //       this.$store.dispatch('examCreation/updateSelectedQuestions');
-      //     }
-      //   },
-      // },
-      filteredContentList() {
-        const { role } = this.filters || {};
-        if (!this.inSearchMode) {
-          return this.contentList;
-        }
-        return this.searchResults.results.filter(contentNode => {
-          let passesFilters = true;
-          if (role === 'nonCoach') {
-            passesFilters = passesFilters && contentNode.num_coach_contents === 0;
-          }
-          if (role === 'coach') {
-            passesFilters = passesFilters && contentNode.num_coach_contents > 0;
-          }
-          return passesFilters;
-        });
-      },
-      allExercises() {
-        if (this.contentList) {
-          const topics = this.contentList.filter(({ kind }) => kind === ContentNodeKinds.TOPIC);
-          const exercises = this.contentList.filter(
-            ({ kind }) => kind === ContentNodeKinds.EXERCISE
-          );
-          const topicExercises = flatMap(topics, ({ exercises }) => exercises);
-          return [...exercises, ...topicExercises];
-        } else if (this.bookmarks) {
-          return this.bookmarks;
-        }
-        return [];
-      },
-      addableExercises() {
-        return this.allExercises.filter(exercise => !this.selectedExercises[exercise.id]);
-      },
-      exercisesHaveBeenSelected() {
-        return Object.keys(this.selectedExercises).length > 0;
-      },
-      selectAllChecked() {
-        return this.addableExercises.length === 0;
-      },
-      selectAllIndeterminate() {
-        if (this.selectAllChecked) {
-          return false;
-        }
-        return this.addableExercises.length !== this.allExercises.length;
-      },
-      inSearchMode() {
-        return this.pageName === PageNames.EXAM_CREATION_SEARCH;
-      },
-      searchTerm() {
-        return this.$route.params.searchTerm;
-      },
-      selectAllIsVisible() {
-        return !this.inSearchMode && this.pageName !== PageNames.EXAM_CREATION_ROOT;
-      },
-      viewMoreButtonState() {
-        if (!this.inSearchMode) {
-          return 'no_more_results';
-        }
-        if (this.moreResultsState === 'waiting' || this.moreResultsState === 'error') {
-          return this.moreResultsState;
-        }
-        if (!this.numRemainingSearchResults) {
-          return 'no_more_results';
-        }
-        return 'visible';
-      },
-      selectionIsInvalidText() {
-        if (Object.keys(this.selectedExercises).length === 0) {
-          return this.$tr('noneSelected');
-        }
-        return null;
-      },
-      channelsLink() {
-        return {
-          name: PageNames.EXAM_CREATION_ROOT,
-          params: {
-            classId: this.classId,
-          },
-        };
-      },
-      topicTitle() {
-        if (!this.ancestors.length) {
-          return '';
-        }
-        return this.ancestors[this.ancestors.length - 1].title;
-      },
-      topicDescription() {
-        if (!this.ancestors.length) {
-          return '';
-        }
-        return this.ancestors[this.ancestors.length - 1].description;
-      },
-      // numQuestIsInvalidText() {
-      //   if (this.numQuestions === '') {
-      //     return this.$tr('numQuestionsBetween');
-      //   }
-      //   if (this.numQuestions < 1 || this.numQuestions > 50) {
-      //     return this.$tr('numQuestionsBetween');
-      //   }
-      //   if (!Number.isInteger(this.numQuestions)) {
-      //     return this.$tr('numQuestionsBetween');
-      //   }
-      //   if (this.availableQuestions === 0) {
-      //     return this.$tr('noneSelected');
-      //   }
-      //   if (this.availableQuestions == 0 || this.availableQuestions == null) {
-      //     return this.$tr('numQuestionsExceedNoExercises', {
-      //       inputNumQuestions: this.numQuestions,
-      //       maxQuestionsFromSelection: 0,
-      //     });
-      //   }
-      //   if (this.numQuestions > this.availableQuestions) {
-      //     return this.$tr('numQuestionsExceed', {
-      //       inputNumQuestions: this.numQuestions,
-      //       maxQuestionsFromSelection: String(this.availableQuestions),
-      //     });
-      //   }
-      //   return null;
-      // },
     },
     watch: {
       filters(newVal) {
@@ -444,313 +100,16 @@
     },
     created() {
       this.quizForge.initializeQuiz();
-      ContentNodeResource.fetchBookmarks({
-        params: { limit: 25, kind: ContentNodeKinds.EXERCISE, available: true },
-      }).then(data => {
-        this.more = data.more;
-        this.bookmarks = data.results;
-        this.bookmarksCount = data.count;
-        this.loading = false;
-      });
-    },
-    methods: {
-      ...mapActions('examCreation', [
-        'addToSelectedExercises',
-        'removeFromSelectedExercises',
-        'fetchAdditionalSearchResults',
-      ]),
-      getBookmarksLink() {
-        return {
-          name: PageNames.EXAM_CREATION_BOOKMARKS_MAIN,
-        };
-      },
-      bookmarksLink(content) {
-        if (!content.is_leaf) {
-          return {
-            name: PageNames.EXAM_CREATION_BOOKMARKS,
-            params: {
-              classId: this.classId,
-              topicId: content.id,
-            },
-          };
-        }
-        const { query } = this.$route;
-        return {
-          name: PageNames.EXAM_CREATION_PREVIEW,
-          params: {
-            classId: this.classId,
-            contentId: content.id,
-          },
-          query: {
-            ...query,
-            ...pickBy({
-              searchTerm: this.$route.params.searchTerm,
-            }),
-          },
-        };
-      },
-      contentLink(content) {
-        if (!content.is_leaf) {
-          return {
-            name: PageNames.EXAM_CREATION_TOPIC,
-            params: {
-              classId: this.classId,
-              topicId: content.id,
-            },
-          };
-        }
-        const { query } = this.$route;
-        return {
-          name: PageNames.EXAM_CREATION_PREVIEW,
-          params: {
-            classId: this.classId,
-            contentId: content.id,
-          },
-          query: {
-            ...query,
-            ...pickBy({
-              searchTerm: this.$route.params.searchTerm,
-            }),
-          },
-        };
-      },
-      contentHasCheckbox() {
-        return this.pageName !== PageNames.EXAM_CREATION_ROOT;
-      },
-      contentIsSelected(content) {
-        if (content.kind === ContentNodeKinds.TOPIC) {
-          return content.exercises.every(exercise => Boolean(this.selectedExercises[exercise.id]));
-        } else {
-          return Boolean(this.selectedExercises[content.id]);
-        }
-      },
-      contentIsIndeterminate(content) {
-        if (content.kind === ContentNodeKinds.TOPIC) {
-          const everyExerciseSelected = content.exercises.every(exercise =>
-            Boolean(this.selectedExercises[exercise.id])
-          );
-          if (everyExerciseSelected) {
-            return false;
-          }
-          return content.exercises.some(exercise => Boolean(this.selectedExercises[exercise.id]));
-        }
-        return false;
-      },
-      selectionMetadata(content) {
-        if (content.kind === ContentNodeKinds.TOPIC) {
-          const count = content.exercises.filter(exercise =>
-            Boolean(this.selectedExercises[exercise.id])
-          ).length;
-          if (count === 0) {
-            return '';
-          }
-          const total = content.exercises.length;
-          return this.$tr('selectionInformation', { count, total });
-        }
-        return '';
-      },
-      toggleTopicInWorkingResources(isChecked) {
-        if (isChecked) {
-          this.showError = false;
-          // NOTE must call snackbar first before mutating the exercise list
-          this.showSnackbarNotification('resourcesAddedWithCount', {
-            count: this.addableExercises.length,
-          });
-          this.addToSelectedExercises(this.addableExercises);
-        } else {
-          this.showSnackbarNotification('resourcesRemovedWithCount', {
-            count: this.allExercises.length,
-          });
-          this.removeFromSelectedExercises(this.allExercises);
-        }
-      },
-      toggleSelected({ content, checked }) {
-        let exercises;
-        const list =
-          this.contentList && this.contentList.length ? this.contentList : this.bookmarks;
-        const contentNode = list.find(item => item.id === content.id);
-        const isTopic = contentNode.kind === ContentNodeKinds.TOPIC;
-        if (checked && isTopic) {
-          this.showError = false;
-          exercises = contentNode.exercises;
-          this.addToSelectedExercises(exercises);
-        } else if (checked && !isTopic) {
-          this.showError = false;
-          exercises = [contentNode];
-          this.addToSelectedExercises(exercises);
-        } else if (!checked && isTopic) {
-          exercises = contentNode.exercises;
-          this.removeFromSelectedExercises(exercises);
-        } else if (!checked && !isTopic) {
-          exercises = [contentNode];
-          this.removeFromSelectedExercises(exercises);
-        }
-
-        this.showSnackbarNotification(
-          checked ? 'resourcesAddedWithCount' : 'resourcesRemovedWithCount',
-          { count: exercises.length }
-        );
-      },
-      handleMoreResults() {
-        this.moreResultsState = 'waiting';
-        this.fetchAdditionalSearchResults({
-          searchTerm: this.searchTerm,
-          kind: this.filters.kind,
-          channelId: this.filters.channel,
-          currentResults: this.searchResults.results,
-        })
-          .then(() => {
-            this.moreResultsState = null;
-          })
-          .catch(() => {
-            this.moreResultsState = 'error';
-          });
-      },
-      continueProcess() {
-        if (this.selectionIsInvalidText) {
-          this.$refs.questionsInput.focus();
-          this.showError = true;
-        } else {
-          this.$router.push({ name: PageNames.EXAM_CREATION_QUESTION_SELECTION });
-        }
-      },
-      // handleSearchTerm(searchTerm) {
-      //   const lastId = this.$route.query.last_id || this.$route.params.topicId;
-      //   this.$router.push({
-      //     name: PageNames.EXAM_CREATION_SEARCH,
-      //     params: {
-      //       searchTerm,
-      //     },
-      //     query: {
-      //       last_id: lastId,
-      //     },
-      //   });
-      // },
-      topicsLink(topicId) {
-        return {
-          name: PageNames.EXAM_CREATION_TOPIC,
-          params: {
-            classId: this.classId,
-            topicId,
-          },
-        };
-      },
-      // handleNumberQuestionsBlur() {
-      //   this.numQuestionsBlurred = true;
-      //   if (Number(this.$refs.questionsInput.currentText) < 0) {
-      //     this.numQuestions = 1;
-      //   }
-      //   if (Number(this.$refs.questionsInput.currentText) > this.maxQs) {
-      //     this.numQuestions = this.maxQs;
-      //   }
-      // },
-      // addSection(){
-      //   this.showSectionSettingsMenu=true;
-      // }
     },
     $trs: {
-      resources: {
-        message: '{count} {count, plural, one {resource} other {resources}}',
-        context: "Only translate 'resource' and 'resources'.",
-      },
       createNewExamLabel: {
         message: 'Create new quiz',
         context: "Title of the screen launched from the 'New quiz' button on the 'Plan' tab.",
       },
-      // chooseExercises: {
-      //   message: 'Select folders or exercises from these channels',
-      //   context:
-      //     'When creating a new quiz, coaches can choose which folders or
-      //      exercises they want to include in the quiz from the channels that
-      //      contain exercise resources.',
-      // },
-      // numQuestions: {
-      //   message: 'Number of questions',
-      //   context: 'Indicates the number of questions that the quiz will have.',
-      // },
-      // numQuestionsBetween: {
-      //   message: 'Enter a number between 1 and 50',
-      //   context:
-      //     "Refers to an error if the coach inputs a number of
-      // quiz questions that's not between 1 and 50. Quizzes cannot have less
-      // than 1 or more than 50 questions. ",
-      // },
-      // numQuestionsExceed: {
-      //   message:
-      //     'The max number of questions based on the exercises
-      // you selected is {maxQuestionsFromSelection}. Select more exercises
-      // to reach {inputNumQuestions} questions, or lower the number of
-      //  questions to {maxQuestionsFromSelection}.',
-      //   context:
-      //     'This message displays if the learning
-      // resource has less questions than the number selected
-      //  by the coach initially.',
-      // },
-      // numQuestionsExceedNoExercises: {
-      //   message:
-      //     'The max number of questions based on the exercises
-      // you selected is 0. Select more exercises to reach
-      // {inputNumQuestions} questions.',
-
-      //   context:
-      //     'This message displays if the learning resource selected
-      // by the coach has less questions then the number of questions
-      // coach wants to use in the quiz.\n',
-      // },
-      noneSelected: {
-        message: 'No exercises are selected',
-        context:
-          "Error message which displays if no resources have been selected in the 'Create new quiz' screen.",
-      },
-      exitSearchButtonLabel: {
-        message: 'Exit search',
-        context:
-          "Button to exit the 'Search' page when user searches for resources to use in a quiz.",
-      },
-      selectionInformation: {
-        message:
-          '{count, number, integer} of {total, number, integer} {total, plural, one {resource selected} other {resources selected}}',
-
-        context:
-          "Indicates the number of resources selected by the coach. For example: '3 of 5 resources selected'.\n\nOnly translate 'of' and 'resource/resources selected'",
-      },
     },
   };
 
 </script>
 
 
-<style lang="scss" scoped>
-
-  .search-box {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .bookmarks-container {
-    display: flex;
-    align-items: center;
-  }
-
-  .lesson-content-card {
-    width: 100%;
-  }
-
-  .bookmark-container {
-    display: flex;
-    min-height: 141px;
-    margin-bottom: 24px;
-    border-radius: 2px;
-    box-shadow: 0 1px 5px 0 #a1a1a1, 0 2px 2px 0 #e6e6e6, 0 3px 1px -2px #ffffff;
-    transition: box-shadow 0.25s ease;
-  }
-
-  .bookmark-container:hover {
-    box-shadow: 0 5px 5px -3px #a1a1a1, 0 8px 10px 1px #d1d1d1, 0 3px 14px 2px #d4d4d4;
-  }
-
-  .text {
-    margin-left: 15rem;
-  }
-
-</style>
+<style lang="scss" scoped></style>

From 72f15fa66911f8a48cef08ed0467842ba5e3059d Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 29 Aug 2023 14:57:50 -0700
Subject: [PATCH 08/19] KTabs data derived from useQuizCreation; can add
 sections

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 68 ++++---------------
 1 file changed, 12 insertions(+), 56 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 8df62805dab..2aaef8e22fb 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -44,12 +44,9 @@
         :style="noKgridItemPadding"
       >
         <KTabs
-          tabsId="coachReportsTabs"
-          ariaLabel="Coach reports"
+          tabsId="quizSectionTabs"
           :tabs="tabs"
-        >
-          <template></template>
-        </KTabs>
+        />
       </KGridItem>
 
       <KGridItem
@@ -59,6 +56,7 @@
         <KButton
           appearance="flat-button"
           icon="plus"
+          @click="() => quizForge.addSection()"
         >
           {{ ($tr('addSection')).toUpperCase() }}
         </KButton>
@@ -322,6 +320,7 @@
 
 <script>
 
+  import { get } from '@vueuse/core';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import DragHandle from 'kolibri.coreVue.components.DragHandle';
   import Draggable from 'kolibri.coreVue.components.Draggable';
@@ -343,53 +342,6 @@
     },
     mixins: [commonCoreStrings, commonCoach],
     inject: ['quizForge'],
-    data() {
-      return {
-        tabs: [{ id: '', label: this.$tr('sectionLabel') }],
-        isQuestionAvailable: true,
-        placeholderList: [
-          {
-            id: 1,
-            title: 'question 1',
-            visible: false,
-            placeholderAnswers: [
-              {
-                id: 1,
-                option: 'bit',
-              },
-              {
-                id: 2,
-                option: 'but',
-              },
-              {
-                id: 3,
-                option: 'bite',
-              },
-              {
-                id: 4,
-                option: 'bait',
-              },
-              {
-                id: 5,
-                option: 'bet',
-              },
-            ],
-          },
-          {
-            id: 2,
-            title: 'question 2',
-            visible: false,
-            placeholderAnswers: [],
-          },
-          {
-            id: 3,
-            title: 'question 3',
-            visible: false,
-            placeholderAnswers: [],
-          },
-        ],
-      };
-    },
     computed: {
       noKgridItemPadding() {
         return {
@@ -397,6 +349,14 @@
           paddingRight: '0em',
         };
       },
+      tabs() {
+        return get(this.quizForge.allSections).map((section, index) => {
+          const id = section.section_id;
+          const label = section.section_title ? section.section_title : `Section ${index + 1}`;
+
+          return { id, label };
+        });
+      },
     },
     methods: {
       handleOrderChange(event) {
@@ -420,10 +380,6 @@
       },
     },
     $trs: {
-      sectionLabel: {
-        message: 'section 1',
-        context: 'Indicates the section number created',
-      },
       addSection: {
         message: 'add section',
         context: 'Label for adding the number of quiz sections',

From 51af02628b96f40d176d1585dda5faa276cf63cb Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 18 Sep 2023 13:22:04 -0700
Subject: [PATCH 09/19] don't just go back, set the back route correctly

---
 .../src/views/plan/CreateExamPage/index.vue   | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

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 ca4f82374e4..02308ce4946 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -6,25 +6,28 @@
     authorizedRole="adminOrCoach"
     icon="close"
     :pageTitle="$tr('createNewExamLabel')"
-    :route="$router.back()"
+    :route="backRoute"
   >
-    <KRouterLink
-      appearance="raised-button"
-      :to="{ path: 'new/123/edit' }"
-      text="Test Section Editor"
-    />
-
-    <KRouterLink
-      appearance="raised-button"
-      :to="{ path: 'new/123/replace-questions' }"
-      text="Test Replace Questions"
-    />
 
     <KPageContainer
       :style="{ ...maxContainerHeight, maxWidth: '1000px', margin: '0 auto' }"
     >
 
       <CreateQuizSection />
+      <!-- These buttons & br don't belong here but are here for testing purposes -->
+      <KButtonGroup style="margin-top: 1em auto;">
+        <KRouterLink
+          appearance="raised-button"
+          :to="{ path: 'new/123/edit' }"
+          text="Test Section Editor"
+        />
+
+        <KRouterLink
+          appearance="raised-button"
+          :to="{ path: 'new/123/replace-questions' }"
+          text="Test Replace Questions"
+        />
+      </KButtonGroup>
 
       <BottomAppBar>
         <KButtonGroup>
@@ -51,6 +54,7 @@
   import pickBy from 'lodash/pickBy';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { PageNames } from '../../../constants';
   import commonCoach from '../../common';
   import CoachImmersivePage from '../../CoachImmersivePage';
   import useQuizCreation from '../../../composables/useQuizCreation';
@@ -63,7 +67,6 @@
     name: 'CreateExamPage',
     components: {
       SectionSidePanel,
-      UiAlert,
       CoachImmersivePage,
       BottomAppBar,
       CreateQuizSection,
@@ -90,6 +93,9 @@
       maxContainerHeight() {
         return { maxHeight: '1000px' };
       },
+      backRoute() {
+        return { name: PageNames.EXAMS };
+      },
     },
     watch: {
       filters(newVal) {

From 942457c882cd0f96ced36dbf578d5624d6c40346 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 18 Sep 2023 16:28:06 -0700
Subject: [PATCH 10/19] tabs have options; addsection focuses new section;

---
 .../assets/src/composables/useQuizCreation.js | 12 +++
 .../plan/CreateExamPage/CreateQuizSection.vue | 89 ++++++++++++++++++-
 .../plan/CreateExamPage/SectionSidePanel.vue  |  5 +-
 3 files changed, 102 insertions(+), 4 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index c43cc987ca6..2c97cf39824 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -113,6 +113,7 @@ export default () => {
   function addSection() {
     const newSection = objectWithDefaults({ section_id: uuidv4() }, QuizSection);
     updateQuiz({ question_sources: [...get(quiz).question_sources, newSection] });
+    setActiveSection(newSection.section_id);
     return newSection;
   }
 
@@ -124,6 +125,12 @@ export default () => {
     if (updatedSections.length === get(allSections).length) {
       throw new Error(`Section with id ${section_id} not found; cannot be removed.`);
     }
+    if (!updatedSections.length) {
+      console.log('Deleting last section...');
+      // Here, if they are removing the last section, we create a new one and basically just replace
+      // the removed one with a new empty section
+      addSection();
+    }
     updateQuiz({ question_sources: updatedSections });
   }
 
@@ -240,6 +247,10 @@ export default () => {
   const activeSection = computed(() =>
     get(allSections).find(s => s.section_id === get(_activeSectionId))
   );
+  /** @type {Arrayc<ComputedRef<QuizSection>>} The inactive sections */
+  const inactiveSections = computed(() =>
+    get(allSections).filter(s => s.section_id !== get(_activeSectionId))
+  );
   /** @type {ComputedRef<QuizResource[]>}   The active section's `resource_pool` */
   const activeResourcePool = computed(() => get(activeSection).resource_pool);
   /** @type {ComputedRef<ExerciseResource[]>} The active section's `resource_pool` - that is,
@@ -279,6 +290,7 @@ export default () => {
     quiz,
     allSections,
     activeSection,
+    inactiveSections,
     activeExercisePool,
     activeQuestionsPool,
     activeQuestions,
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 2aaef8e22fb..24e1d0bea6a 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -43,10 +43,39 @@
         :layout12="{ span: 10 }"
         :style="noKgridItemPadding"
       >
-        <KTabs
+        <KTabsList
           tabsId="quizSectionTabs"
+          :appearanceOverrides="{ padding: '0px' }"
+          :activeTabId="quizForge.activeSection && quizForge.activeSection.value.section_id"
+          backgroundColor="transparent"
+          hoverBackgroundColor="transparent"
           :tabs="tabs"
-        />
+        >
+          <template #tab="{ tab, isActive }">
+            <KButton
+              appearance="flat-button"
+              :appearanceOverrides="tabStyles"
+              @click="() => quizForge.setActiveSection(tab.id)"
+            >
+              {{ tab.label }}
+            </KButton>
+            <KIconButton
+              icon="optionsVertical"
+              class="options-button"
+              @click="() => null"
+            >
+              <template #menu>
+                <KDropdownMenu
+                  :primary="false"
+                  :disabled="false"
+                  :hasIcons="true"
+                  :options="sectionOptions"
+                  @select="opt => handleSectionOptionSelect(opt, tab.id, isActive)"
+                />
+              </template>
+            </KIconButton>
+          </template>
+        </KTabsList>
       </KGridItem>
 
       <KGridItem
@@ -291,6 +320,10 @@
     <div
       v-else
       class="no-question-layout"
+    <KTabsPanel
+      class="no-question-layout"
+      tabsId="quizSectionTabs"
+      :activeTabId="quizForge.activeSection.value.section_id"
     >
 
       <div class="question-mark-layout">
@@ -311,7 +344,7 @@
       </KButton>
 
 
-    </div>
+    </KTabsPanel>
 
   </div>
 
@@ -352,11 +385,52 @@
       tabs() {
         return get(this.quizForge.allSections).map((section, index) => {
           const id = section.section_id;
+          // TODO The "Section N" label should probably be set directly on the Section object
+          // at creation rather than this
           const label = section.section_title ? section.section_title : `Section ${index + 1}`;
 
           return { id, label };
         });
       },
+      tabStyles() {
+        return {
+          margin: '0px',
+        };
+      },
+      sectionOptions() {
+        return [
+          {
+            // TODO This should be a $tr
+            label: 'Edit',
+            icon: 'edit',
+          },
+          {
+            // TODO This should be a $tr
+            label: 'Delete',
+            icon: 'delete',
+          },
+        ];
+      },
+    },
+    methods: {
+      handleSectionOptionSelect({ label }, section_id, isActive) {
+        switch (label) {
+          case 'Edit':
+            console.log('Edit');
+            this.$router.replace({ path: 'new/' + section_id + '/edit' });
+            break;
+          case 'Delete':
+            console.log('Delete');
+            if (isActive) {
+              if (get(this.quizForge.inactiveSections).length > 0) {
+                console.log('inactivesectwdatdgat');
+                this.quizForge.setActiveSection(get(this.quizForge.inactiveSections)[0].section_id);
+              }
+            }
+            this.quizForge.removeSection(section_id);
+            break;
+        }
+      },
     },
     methods: {
       handleOrderChange(event) {
@@ -598,6 +672,15 @@
   .limit-height {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
+    margin-bottom: -8px;
+    text-align: left;
+  }
+
+  .options-button {
+    width: 36px !important;
+    height: 36px !important;
+    margin: 0;
+    border-radius: 0 !important;
   }
 
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 8099fdde01c..bbd13c32af6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -5,7 +5,7 @@
     ref="resourcePanel"
     alignment="right"
     :closeButtonIconType="closeIcon"
-    @closePanel="$router.back()"
+    @closePanel="$router.replace(quizRootRoute)"
     @shouldFocusFirstEl="findFirstEl()"
   >
     <component :is="panel" :ref="$route.name" />
@@ -32,6 +32,9 @@
     name: 'SectionSidePanel',
     components: { SidePanelModal, SectionEditor, ReplaceQuestions, ResourceSelection },
     computed: {
+      quizRootRoute() {
+        return { name: PageNames.EXAM_CREATION_ROOT };
+      },
       panel() {
         return pageNameComponentMap[this.$route.name];
       },

From 9abbe390d29feb8ce5857bac4fd45f255c13771a Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 19 Sep 2023 08:37:48 -0700
Subject: [PATCH 11/19] show unique value for each section in KTabsPanel to be
 sure its working

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

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 24e1d0bea6a..a51e1cc841b 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -326,6 +326,8 @@
       :activeTabId="quizForge.activeSection.value.section_id"
     >
 
+      <h1>{{ quizForge.activeSection.value.section_id }}</h1>
+      <!-- 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>
@@ -342,6 +344,7 @@
       >
         {{ $tr('addQuestion') }}
       </KButton>
+      <!-- END TODO -->
 
 
     </KTabsPanel>

From de4a574e4ad546e6a2855f61f9751139c1a092c0 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 19 Sep 2023 10:19:49 -0700
Subject: [PATCH 12/19] don't set added sections as active, let the dev do it
 manually

---
 .../coach/assets/src/composables/useQuizCreation.js    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 2c97cf39824..9542dba145a 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -113,7 +113,6 @@ export default () => {
   function addSection() {
     const newSection = objectWithDefaults({ section_id: uuidv4() }, QuizSection);
     updateQuiz({ question_sources: [...get(quiz).question_sources, newSection] });
-    setActiveSection(newSection.section_id);
     return newSection;
   }
 
@@ -125,11 +124,12 @@ export default () => {
     if (updatedSections.length === get(allSections).length) {
       throw new Error(`Section with id ${section_id} not found; cannot be removed.`);
     }
-    if (!updatedSections.length) {
+    if (updatedSections.length === 0) {
       console.log('Deleting last section...');
-      // Here, if they are removing the last section, we create a new one and basically just replace
-      // the removed one with a new empty section
-      addSection();
+      const newSection = addSection();
+      setActiveSection(newSection.section_id);
+    } else {
+      setActiveSection(get(updatedSections)[0].section_id);
     }
     updateQuiz({ question_sources: updatedSections });
   }

From 1bffa3717246b8c919e455c9cc16bec7d41f28e7 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 19 Sep 2023 10:30:47 -0700
Subject: [PATCH 13/19] routing for side panels fixed; hooked into actual UI

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 23 +++++-------
 .../plan/CreateExamPage/SectionSidePanel.vue  | 37 ++++++++++++++++---
 .../src/views/plan/CreateExamPage/index.vue   | 14 -------
 3 files changed, 41 insertions(+), 33 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 a51e1cc841b..9870b8bd2da 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -51,7 +51,7 @@
           hoverBackgroundColor="transparent"
           :tabs="tabs"
         >
-          <template #tab="{ tab, isActive }">
+          <template #tab="{ tab }">
             <KButton
               appearance="flat-button"
               :appearanceOverrides="tabStyles"
@@ -70,7 +70,7 @@
                   :disabled="false"
                   :hasIcons="true"
                   :options="sectionOptions"
-                  @select="opt => handleSectionOptionSelect(opt, tab.id, isActive)"
+                  @select="opt => handleSectionOptionSelect(opt, tab.id)"
                 />
               </template>
             </KIconButton>
@@ -326,7 +326,7 @@
       :activeTabId="quizForge.activeSection.value.section_id"
     >
 
-      <h1>{{ quizForge.activeSection.value.section_id }}</h1>
+      <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>
@@ -341,6 +341,7 @@
       <KButton
         primary
         icon="plus"
+        @click="openSelectResources(quizForge.activeSection.value.section_id)"
       >
         {{ $tr('addQuestion') }}
       </KButton>
@@ -416,24 +417,19 @@
       },
     },
     methods: {
-      handleSectionOptionSelect({ label }, section_id, isActive) {
+      handleSectionOptionSelect({ label }, section_id) {
         switch (label) {
           case 'Edit':
-            console.log('Edit');
             this.$router.replace({ path: 'new/' + section_id + '/edit' });
             break;
           case 'Delete':
-            console.log('Delete');
-            if (isActive) {
-              if (get(this.quizForge.inactiveSections).length > 0) {
-                console.log('inactivesectwdatdgat');
-                this.quizForge.setActiveSection(get(this.quizForge.inactiveSections)[0].section_id);
-              }
-            }
             this.quizForge.removeSection(section_id);
             break;
         }
       },
+      openSelectResources(section_id) {
+        this.$router.replace({ path: 'new/' + section_id + '/select-resources' });
+      },
     },
     methods: {
       handleOrderChange(event) {
@@ -541,8 +537,7 @@
 
   .no-question-layout {
     width: auto;
-    height: 16.5em;
-    padding: 2.5em;
+    padding: 40px;
     text-align: center;
     background-color: #fafafa;
     border: 1px;
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index bbd13c32af6..8a146b44199 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -5,9 +5,10 @@
     ref="resourcePanel"
     alignment="right"
     :closeButtonIconType="closeIcon"
-    @closePanel="$router.replace(quizRootRoute)"
+    @closePanel="$router.replace(closePanelRoute)"
     @shouldFocusFirstEl="findFirstEl()"
   >
+    <p>{{ quizForge.activeSection.value.section_id }}</p>
     <component :is="panel" :ref="$route.name" />
   </SidePanelModal>
 
@@ -31,15 +32,41 @@
   export default {
     name: 'SectionSidePanel',
     components: { SidePanelModal, SectionEditor, ReplaceQuestions, ResourceSelection },
+    inject: ['quizForge'],
+    data() {
+      return {
+        prevRoute: { name: PageNames.EXAM_CREATION_ROOT },
+      };
+    },
     computed: {
-      quizRootRoute() {
-        return { name: PageNames.EXAM_CREATION_ROOT };
-      },
       panel() {
         return pageNameComponentMap[this.$route.name];
       },
+      closePanelRoute() {
+        if (this.closeIcon === 'close') {
+          return { name: PageNames.EXAM_CREATION_ROOT };
+        } else {
+          return this.prevRoute;
+        }
+      },
+      /**
+       * When the previous route was the root page OR select resources, we want an X icon.
+       * Otherwise, we want a back icon.
+       * X  means "close this side panel"
+       * <- means "go back to last view of this panel" - which we only want when we were selecting
+       *           resources.
+       */
       closeIcon() {
-        return this.$route.name === PageNames.QUIZ_SELECT_RESOURCES ? 'back' : 'close';
+        return this.prevRoute.name === PageNames.EXAM_CREATION_ROOT ||
+          this.prevRoute.name === PageNames.QUIZ_SELECT_RESOURCES
+          ? 'close'
+          : 'back';
+      },
+    },
+    watch: {
+      $route: function(_, o) {
+        this.prevRoute = o;
+        console.log('prevroute', this.prevRoute);
       },
     },
     methods: {
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 02308ce4946..c6eeaea5e8a 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -14,20 +14,6 @@
     >
 
       <CreateQuizSection />
-      <!-- These buttons & br don't belong here but are here for testing purposes -->
-      <KButtonGroup style="margin-top: 1em auto;">
-        <KRouterLink
-          appearance="raised-button"
-          :to="{ path: 'new/123/edit' }"
-          text="Test Section Editor"
-        />
-
-        <KRouterLink
-          appearance="raised-button"
-          :to="{ path: 'new/123/replace-questions' }"
-          text="Test Replace Questions"
-        />
-      </KButtonGroup>
 
       <BottomAppBar>
         <KButtonGroup>

From 2dec1431f14d4afc984657a384355a557ecd1f16 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 21 Sep 2023 11:33:07 -0700
Subject: [PATCH 14/19] fix test import

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

diff --git a/kolibri/plugins/coach/assets/test/useQuizCreation.spec.js b/kolibri/plugins/coach/assets/test/useQuizCreation.spec.js
index f13a99c8ebe..7ec338ddce7 100644
--- a/kolibri/plugins/coach/assets/test/useQuizCreation.spec.js
+++ b/kolibri/plugins/coach/assets/test/useQuizCreation.spec.js
@@ -2,7 +2,7 @@ import { get } from '@vueuse/core';
 import { ChannelResource, ExamResource } from 'kolibri.resources';
 import { objectWithDefaults } from 'kolibri.utils.objectSpecs';
 import { ExerciseResource, QuizQuestion } from '../src/composables/quizCreationSpecs.js';
-import { useQuizCreation } from '../src/composables/useQuizCreation.js';
+import useQuizCreation from '../src/composables/useQuizCreation.js';
 
 const {
   // Methods

From f8ec0d637d068d792d04215017e3accf63ec7331 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 21 Sep 2023 11:36:34 -0700
Subject: [PATCH 15/19] moreclean

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 245 +-----------------
 1 file changed, 11 insertions(+), 234 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 9870b8bd2da..78cb51340d4 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -33,12 +33,8 @@
     </p>
 
     <hr class="bottom-border">
-    <br>
 
-
-    <KGrid
-      class="kgrid-alignment-style"
-    >
+    <KGrid>
       <KGridItem
         :layout12="{ span: 10 }"
         :style="noKgridItemPadding"
@@ -94,232 +90,7 @@
     </KGrid>
 
     <hr class="bottom-border">
-    <div v-if="isQuestionAvailable">
-      <KGrid>
-        <KGridItem
-          :layout12="{ span: 6 }"
-        >
-          <div class="left-column-alignment-style">
-            <div class="align-kcheckbox-style">
-              <p>
-                <KCheckbox />
-              </p>
-            </div>
-
-            <div>
-              <p>{{ $tr('selectAllLabel') }}</p>
-            </div>
-          </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>
-      <DragContainer
-        :items="placeholderList"
-        @sort="handleOrderChange"
-      >
-        <AccordionContainer>
-          <template
-            #default="{ isItemExpanded, toggleItemState, closeAccordionPanel }"
-          >
-            <Draggable
-              v-for="(item,index) in placeholderList"
-              :key="item.id"
-              tabindex="-1"
-            >
-              <AccordionItem
-                :id="item.id"
-                :key="item.id"
-                :items="placeholderList"
-                :title="item.title"
-                :expanded="isItemExpanded(item.id)"
-              >
-                <template
-                  #heading="{ title }"
-                  :accordionToggle="onAccordionToggle(item.id)"
-                >
-                  <DragHandle>
-                    <button
-                      tabindex="-1"
-                      aria-expanded="false"
-                      aria-label="toggle-button"
-                      class="remove-button-style"
-                    >
-                      <div
-                        class="flex-div"
-                      >
-                        <div
-                          class="left-column-alignment-style"
-                        >
-
-                          <button
-                            class="remove-button-style"
-                            @click="closeAccordionPanel(item.id)"
-                          >
-                            <DragSortWidget
-                              class="drag-icon sort-widget"
-                              :moveUpText="$tr('upLabel', { name: item.title })"
-                              :moveDownText="$tr('downLabel', { name: item.title })"
-                              :isFirst="index === 0"
-                              :isLast="index === placeholderList.length - 1"
-                              @moveUp="shiftOne(index, -1)"
-                              @moveDown="shiftOne(index, +1)"
-                            />
-                          </button>
-
-                          <div
-                            class="check-box-style"
-                          >
-                            <KCheckbox
-                              :aria-label="$tr('checkBoxLabel',{ name: item.title })"
-                            />
-                          </div>
-                        </div>
-
-                        <div class="occupy-remaining-space">
-                          <button
-                            :id="item.id"
-                            :aria-controls="item.id"
-                            :aria-expanded="isItemExpanded(item.id)"
-                            aria-labelledby="question-title2 question-title-context"
-                            class="limit-height remove-button-style"
-                            @click="toggleItemState(item.id)"
-                          >
-                            <KGrid>
-                              <KGridItem
-                                :layout12="{ span: 6 }"
-                              >
-                                <div style="margin-top:.5em;">
-                                  {{ title }}
-                                </div>
-                              </KGridItem>
-
-                              <KGridItem
-                                :layout12="{ span: 6 }"
-                              >
-                                <div class="right-alignment-style">
-                                  <KIcon
-                                    v-if="isItemExpanded(item.id)"
-                                    class="icon-size toggle-icon"
-                                    icon="chevronUp"
-                                  />
-                                  <KIcon
-                                    v-else
-                                    class="icon-size toggle-icon"
-                                    icon="chevronRight"
-                                  />
-
-                                </div>
-                              </KGridItem>
-                            </KGrid>
-                          </button>
-                        </div>
-                      </div>
-                    </button>
-                  </DragHandle>
-                </template>
-
-                <template
-                  v-if="isItemExpanded(item.id)"
-                  #content
-                >
-                  <div
-                    id="sect1"
-                    aria-labelledby="accordion1id"
-                    class="accordion-detail-container"
-                  >
-                    <KGrid>
-                      <KGridItem :layout12="{ span: 8 }">
-                        <button
-                          class="remove-button-style text-align-start"
-                        >
-                          {{ $tr('questionPhrase') }}
-                        </button>
-
-                        <button
-                          class="remove-button-style text-align-start text-vertical-spacing"
-                        >
-                          {{ $tr('questionSubtitle') }}
-                        </button>
-                      </KGridItem>
-
-                      <KGridItem
-                        :layout12="{ span: 4 }"
-                      >
-                        <KIconButton
-                          class="float-item-left-style"
-                          icon="edit"
-                        />
-                      </KGridItem>
-                    </KGrid>
-
-                    <div class="choose-question question">
-                      <p class="space-content">
-                        {{ $tr('chooseQuestionLabel') }}
-                      </p>
-                    </div>
-
-                    <hr class="bottom-border">
-                    <KButton
-                      style="width:100%;margin-bottom:0.5em"
-                      appearance="raised-button"
-                      icon="plus"
-                    >
-                      {{ $tr('addAnswer') }}
-                    </KButton>
-                    <hr>
-                  </div>
-                </template>
-              </AccordionItem>
-            </Draggable>
-          </template>
-        </AccordionContainer>
-      </DragContainer>
-    </div>
 
-
-    <div
-      v-else
-      class="no-question-layout"
     <KTabsPanel
       class="no-question-layout"
       tabsId="quizSectionTabs"
@@ -359,16 +130,19 @@
 
   import { get } from '@vueuse/core';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import commonCoach from '../../common';
+  /*
   import DragHandle from 'kolibri.coreVue.components.DragHandle';
   import Draggable from 'kolibri.coreVue.components.Draggable';
   import DragContainer from 'kolibri.coreVue.components.DragContainer';
   import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
-  import commonCoach from '../../common';
   import AccordionContainer from './AccordionContainer.vue';
   import AccordionItem from './AccordionItem.vue';
+  */
 
   export default {
     name: 'CreateQuizSection',
+    /*
     components: {
       AccordionContainer,
       AccordionItem,
@@ -377,6 +151,7 @@
       DragContainer,
       DragSortWidget,
     },
+    */
     mixins: [commonCoreStrings, commonCoach],
     inject: ['quizForge'],
     computed: {
@@ -430,8 +205,7 @@
       openSelectResources(section_id) {
         this.$router.replace({ path: 'new/' + section_id + '/select-resources' });
       },
-    },
-    methods: {
+      /*
       handleOrderChange(event) {
         const reorderedList = event.newArray.map(x => {
           if (x.isPlaceholder) {
@@ -451,6 +225,7 @@
 
         this.handleOrderChange({ newArray });
       },
+          */
     },
     $trs: {
       addSection: {
@@ -474,6 +249,7 @@
         context:
           'This message indicates that more than one section can be added when creating a quiz.',
       },
+      /*
       questionPhrase: {
         message: 'Select the word that has the following vowel sound.',
         context: 'Placholder for the question',
@@ -510,6 +286,7 @@
         message: 'Question order saved',
         context: 'Success message shown when the admin re-orders question',
       },
+        */
     },
   };
 
@@ -567,13 +344,13 @@
   }
 
   .bottom-border {
+    margin-block-start: -2px;
     border: 1px solid #dedede;
   }
 
   .kgrid-alignment-style {
     padding-right: 1em;
     padding-left: 0;
-    margin-bottom: -1.5em;
     text-align: left;
   }
 

From 978f7cb18564bd019492f92e86c18330cec7232c Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Sun, 1 Oct 2023 14:52:43 -0700
Subject: [PATCH 16/19] add new section focuses new section

---
 .../src/views/plan/CreateExamPage/CreateQuizSection.vue     | 6 +++++-
 1 file changed, 5 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 78cb51340d4..782e8335ad5 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -81,7 +81,7 @@
         <KButton
           appearance="flat-button"
           icon="plus"
-          @click="() => quizForge.addSection()"
+          @click="handleAddSection"
         >
           {{ ($tr('addSection')).toUpperCase() }}
         </KButton>
@@ -192,6 +192,10 @@
       },
     },
     methods: {
+      handleAddSection() {
+        const newSection = this.quizForge.addSection();
+        this.quizForge.setActiveSection(get(newSection).section_id);
+      },
       handleSectionOptionSelect({ label }, section_id) {
         switch (label) {
           case 'Edit':

From 86f49dda6f1bb16d2ea9ec55f86df672c06b408f Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Sun, 1 Oct 2023 14:50:34 -0700
Subject: [PATCH 17/19] px -> em in create quiz section

---
 .../src/views/plan/CreateExamPage/CreateQuizSection.vue   | 8 ++++----
 1 file changed, 4 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 782e8335ad5..c926142e613 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -300,10 +300,10 @@
 <style lang="scss"  scoped>
 
   .style-icon {
-    width: 32px;
-    height: 32px;
-    margin-top: 8px;
-    margin-left: 16px;
+    width: 2em;
+    height: 2em;
+    margin-top: 0.5em;
+    margin-left: 1em;
   }
 
   /deep/ .ui-textbox-label {

From 9583c8e191284514181fa7a9e64d7097658ba1ce Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Sun, 1 Oct 2023 14:49:37 -0700
Subject: [PATCH 18/19] remove consolelog

---
 .../assets/src/views/plan/CreateExamPage/SectionSidePanel.vue    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 8a146b44199..a4bfe3110d3 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -66,7 +66,6 @@
     watch: {
       $route: function(_, o) {
         this.prevRoute = o;
-        console.log('prevroute', this.prevRoute);
       },
     },
     methods: {

From 528fb283339ab2f1d24079353bb2d6f1a013d7e0 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Sun, 1 Oct 2023 14:46:18 -0700
Subject: [PATCH 19/19] remove console.log, fix jsdoc type

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

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 9542dba145a..95b17eb7483 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -125,7 +125,6 @@ export default () => {
       throw new Error(`Section with id ${section_id} not found; cannot be removed.`);
     }
     if (updatedSections.length === 0) {
-      console.log('Deleting last section...');
       const newSection = addSection();
       setActiveSection(newSection.section_id);
     } else {
@@ -247,7 +246,7 @@ export default () => {
   const activeSection = computed(() =>
     get(allSections).find(s => s.section_id === get(_activeSectionId))
   );
-  /** @type {Arrayc<ComputedRef<QuizSection>>} The inactive sections */
+  /** @type {ComputedRef<QuizSection[]>} The inactive sections */
   const inactiveSections = computed(() =>
     get(allSections).filter(s => s.section_id !== get(_activeSectionId))
   );