add map of content, enter contentrenderer into accordion content slots

learningequality · Jan 30, 2024 · 1a1c43c · 1a1c43c
1 parent 3b82c9a
commit 1a1c43c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -421,6 +421,13 @@ export default function useQuizCreation(DEBUG = false) {
   );
   /** @type {ComputedRef<QuizExercise[]>}   The active section's `resource_pool` */
   const activeResourcePool = computed(() => get(activeSection).resource_pool);
+  /** @type {ComputedRef<QuizExercise[]>}   The active section's `resource_pool` */
+  const activeResourceMap = computed(() =>
+    get(activeResourcePool).reduce((acc, resource) => {
+      acc[resource.content_id] = resource;
+      return acc;
+    }, {})
+  );
   /** @type {ComputedRef<QuizQuestion[]>} All questions in the active section's `resource_pool`
    *                                      exercises */
   const activeQuestionsPool = computed(() => []);
@@ -530,6 +537,7 @@ export default function useQuizCreation(DEBUG = false) {
   provide('activeSection', activeSection);
   provide('inactiveSections', inactiveSections);
   provide('activeResourcePool', activeResourcePool);
+  provide('activeResourceMap', activeResourceMap);
   provide('workingResourcePool', workingResourcePool);
   provide('activeQuestionsPool', activeQuestionsPool);
   provide('activeQuestions', activeQuestions);
@@ -565,6 +573,7 @@ export default function useQuizCreation(DEBUG = false) {
     inactiveSections,
     workingResourcePool,
     activeResourcePool,
+    activeResourceMap,
     activeQuestionsPool,
     activeQuestions,
     selectedActiveQuestions,
@@ -607,6 +616,7 @@ export function injectQuizCreation() {
   const activeSection = inject('activeSection');
   const inactiveSections = inject('inactiveSections');
   const activeResourcePool = inject('activeResourcePool');
+  const activeResourceMap = inject('activeResourceMap');
   const workingResourcePool = inject('workingResourcePool');
   const activeQuestionsPool = inject('activeQuestionsPool');
   const activeQuestions = inject('activeQuestions');
@@ -645,6 +655,7 @@ export function injectQuizCreation() {
     inactiveSections,
     workingResourcePool,
     activeResourcePool,
+    activeResourceMap,
     activeQuestionsPool,
     activeQuestions,
     selectedActiveQuestions,

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -281,16 +281,25 @@
                     </template>
                     <template #content>
                       <div
+                        v-if="isItemExpanded(question.question_id)"
                         :id="`question-panel-${question.question_id}`"
                         :ref="`question-panel-${question.question_id}`"
                         :style="{ userSelect: dragActive ? 'none!important' : 'text' }"
                       >
-                        <p
-                          v-if="isItemExpanded(question.question_id) && !dragActive"
-                          class="question-content-panel"
-                        >
-                          CONTENT OF {{ question.title }}
-                        </p>
+                        <ContentRenderer
+                          :ref="`contentRenderer-${question.question_id}`"
+                          :kind="activeResourceMap[question.exercise_id].kind"
+                          :lang="activeResourceMap[question.exercise_id].lang"
+                          :files="activeResourceMap[question.exercise_id].files"
+                          :available="activeResourceMap[question.exercise_id].available"
+                          :itemId="question.question_id"
+                          :assessment="true"
+                          :allowHints="false"
+                          @interaction="() => null"
+                          @updateProgress="() => null"
+                          @updateContentState="() => null"
+                          @error="err => $emit('error', err)"
+                        />
                       </div>
                     </template>
                   </AccordionItem>
@@ -386,6 +395,8 @@
         inactiveSections,
         workingResourcePool,
         activeQuestionsPool,
+        activeResourceMap,
+        activeResourcePool,
         activeQuestions,
         selectedActiveQuestions,
         replacementQuestionPool,
@@ -434,6 +445,8 @@
         activeSection,
         inactiveSections,
         workingResourcePool,
+        activeResourceMap,
+        activeResourcePool,
         activeQuestionsPool,
         activeQuestions,
         selectedActiveQuestions,