Feature quiz section tabs with overflow

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#ab03c5e257a7806c67cf6250310e3e6ccb5119c9",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#50a07f361febc643505e8d6991b6a037d1432c63",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",

kolibri/plugins/coach/assets/src/composables/useQuizCreation.js

@@ -1,4 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
+import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
 import uniq from 'lodash/uniq';
 import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
 import { ChannelResource, ExamResource } from 'kolibri.resources';
@@ -46,9 +47,12 @@ export default () => {
    * The questions that are currently selected for action in the active section */
   const _selectedQuestions = ref([]);
 
-  /** @type {ref<>} A list of all channels available which have exercises */
+  /** @type {ref<Array>} A list of all channels available which have exercises */
   const _channels = ref([]);
 
+  /** @type {ref<Number>} A counter for use in naming new sections */
+  const _sectionLabelCounter = ref(1);
+
   // ------------------
   // Section Management
   // ------------------
@@ -112,7 +116,11 @@ export default () => {
    * Adds a section to the quiz and returns it */
   function addSection() {
     const newSection = objectWithDefaults({ section_id: uuidv4() }, QuizSection);
+    const { sectionLabel$ } = enhancedQuizManagementStrings;
+    newSection.section_title = `${sectionLabel$()} ${_sectionLabelCounter.value}`;
+    _sectionLabelCounter.value++;
     updateQuiz({ question_sources: [...get(quiz).question_sources, newSection] });
+    setActiveSection(newSection.section_id);
     return newSection;
   }
 
@@ -127,6 +135,7 @@ export default () => {
     if (updatedSections.length === 0) {
       const newSection = addSection();
       setActiveSection(newSection.section_id);
+      updatedSections.push(newSection);
     } else {
       setActiveSection(get(updatedSections)[0].section_id);
     }