Provide a warning icon if the question is interactive.

kreut · Jun 27, 2024 · d2b02a0 · d2b02a0
1 parent 44c606c
commit d2b02a0
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 60 deletions.
diff --git a/app/Http/Middleware/SetAppVersionHeader.php b/app/Http/Middleware/SetAppVersionHeader.php
@@ -22,7 +22,7 @@ public function handle($request, Closure $next)
         //$app_version = env('VAPOR_COMMIT_HASH') ? env('VAPOR_COMMIT_HASH') : '1.0';
         if(!$response instanceof StreamedResponse) {
             //https://stackoverflow.com/questions/72060913/call-to-undefined-method-symfony-component-httpfoundation-streamedresponsehead
-            $response->header('appversion', '2.45');
+            $response->header('appversion', '2.46');
         }
         return $response;
     }

diff --git a/resources/js/components/FormattedQuestionTypeRadio.vue b/resources/js/components/FormattedQuestionTypeRadio.vue
@@ -1,20 +1,54 @@
 <template>
   <div>
     <p>Choose one of the question types below to further narrow your search.</p>
+    <div v-show="technology === 'h5p'">
+      <b-form-group
+        id="h5p-type-to-view"
+      >
+        <b-form-radio-group
+          v-model="h5pTypeToView"
+          stacked
+          required
+          @input="setH5pTypeToView($event)"
+        >
+          <b-form-radio name="h5p-type-to-view" value="auto-graded">
+            Auto-graded
+            <QuestionCircleTooltip id="auto-graded"/>
+            <b-tooltip target="auto-graded"
+                       delay="250"
+                       triggers="hover focus"
+            >
+              Students respond to questions and get feedback on submissions
+            </b-tooltip>
+          </b-form-radio>
+          <b-form-radio name="h5p-type-to-view" value="interactive">
+            Interactive
+            <QuestionCircleTooltip id="interactive"/>
+            <b-tooltip target="interactive"
+                       delay="250"
+                       triggers="hover focus"
+            >
+              There is nothing for students to submit. These questions are more appropriate for open-ended type
+              assessments.
+            </b-tooltip>
+          </b-form-radio>
+        </b-form-radio-group>
+      </b-form-group>
+      <hr>
+    </div>
     <div class="radio-grid">
-      <div v-for="(option, index) in formattedQuestionTypesOptionsByTechnology"
+      <div v-for="(option, index) in formattedQuestionTypesToView"
            :key="index"
            class="radio-item"
            :style="`width:${width}`"
       >
-        <label>
-          <input v-model="formattedQuestionType"
-                 type="radio"
-                 :value="option.formatted_question_type"
-                 @input="setFormattedQuestionType(option.formatted_question_type)"
-          >
+        <b-form-radio :id="`${formattedQuestionType}`"
+                      v-model="formattedQuestionType"
+                      :value="option.formatted_question_type"
+                      @change="setFormattedQuestionType(option.formatted_question_type)"
+        >
           {{ option.formatted_question_type }}
-        </label>
+        </b-form-radio>
       </div>
     </div>
   </div>
@@ -32,13 +66,25 @@ export default {
       type: Array,
       default: () => {
       }
+    },
+    interactiveFormattedTypes: {
+      type: Array,
+      default: () => {
+      }
     }
   },
   data: () => ({
+    h5pTypeToView: 'auto-graded',
+    formattedQuestionTypesToView: [],
     formattedQuestionType: '',
     width: ''
+
   }),
   mounted () {
+    this.formattedQuestionTypesToView = this.formattedQuestionTypesOptionsByTechnology
+    if (this.technology === 'h5p') {
+      this.formattedQuestionTypesToView = this.formattedQuestionTypesToView.filter(item => !this.interactiveFormattedTypes.includes(item.formatted_question_type))
+    }
     switch (this.technology) {
       case ('webwork'):
       case ('imathas'):
@@ -52,7 +98,16 @@ export default {
     }
   },
   methods: {
+    setH5pTypeToView (h5pTypeToView) {
+      this.formattedQuestionTypesToView = this.formattedQuestionTypesOptionsByTechnology
+      if (h5pTypeToView === 'auto-graded') {
+        this.formattedQuestionTypesToView = this.formattedQuestionTypesToView.filter(item => !this.interactiveFormattedTypes.includes(item.formatted_question_type))
+      } else {
+        this.formattedQuestionTypesToView = this.formattedQuestionTypesToView.filter(item => this.interactiveFormattedTypes.includes(item.formatted_question_type))
+      }
+    },
     setFormattedQuestionType (formattedQuestionType) {
+
       this.$emit('setFormattedQuestionType', formattedQuestionType)
     }
   }

diff --git a/resources/js/components/questions/QuestionsGet.vue b/resources/js/components/questions/QuestionsGet.vue
@@ -12,6 +12,7 @@
                                   :formatted-question-types-options-by-technology="formattedQuestionTypesOptionsByTechnology"
                                   :technology="allQuestionsTechnology"
                                   :formatted-question-type="formattedQuestionType"
+                                  :interactive-formatted-types="interactiveH5PFormattedTypes"
                                   @setFormattedQuestionType="setFormattedQuestionType"
       />
       <template #modal-footer="{ ok }">
@@ -1231,6 +1232,17 @@
                     </template>
                     <template v-slot:cell(type)="data">
                       {{ data.item.question_type ? data.item.question_type : 'Unknown' }}
+                      <span v-show="interactiveH5PFormattedTypes.includes(data.item.question_type)">
+                        <QuestionCircleTooltip :id="`h5p-interactive-tooltip-${data.item.id}`"
+                                               :color="'text-danger'"
+                        />
+                        <b-tooltip :target="`h5p-interactive-tooltip-${data.item.id}`"
+                                   delay="250"
+                                   triggers="hover focus"
+                        >
+                          This question is an interactive question and has no auto-graded component associated with it.  It acts like an ADAPT open-ended question.
+                        </b-tooltip>
+                      </span>
                     </template>
                     <template v-slot:cell(action)="data">
                       <GetQuestionsActions :assignment-question="data.item"
@@ -1453,6 +1465,42 @@ export default {
     }
   },
   data: () => ({
+    interactiveH5PFormattedTypes: [
+      'Accordion',
+      'Advent Calendar (beta)',
+      'AR Scavenger (beta)',
+      'Branching Scenario',
+      'Cornell Notes',
+      'Image Juxtaposition',
+      'Image Zoom',
+      'KewAr Code',
+      'None Provided',
+      'Questionnaire',
+      'Speak the Words',
+      'Advent Calendar (beta) Test',
+      'Arithmetic Quiz',
+      'Chart',
+      'Course Presentation',
+      'Documentation Tool',
+      'Flashcards',
+      'Iframe Embedder',
+      'Information Wall',
+      'Structure Strip',
+      'Twitter User Feed',
+      'Agamotto',
+      'Audio',
+      'Collage',
+      'Memory Game',
+      'Personality Quiz',
+      'Virtual Tour (360)',
+      'Appear.in for Chat and Talk',
+      'Audio Recorder',
+      'Dialog Cards',
+      'Guess the Answer',
+      'Image Hotspots',
+      'Image Slider',
+      'Timeline'
+    ],
     qtiContentType: '',
     formattedQuestionTypesOptionsByTechnology: [],
     formattedQuestionType: null,
@@ -1717,44 +1765,6 @@ export default {
   },
   methods: {
     initCentrifuge,
-    badH5PFormattedTypes () {
-      return [
-        'Accordion',
-        'Advent Calendar (beta)',
-        'AR Scavenger (beta)',
-        'Branching Scenario',
-        'Cornell Notes',
-        'Image Juxtaposition',
-        'Image Zoom',
-        'KewAr Code',
-        'None Provided',
-        'Questionnaire',
-        'Speak the Words',
-        'Advent Calendar (beta) Test',
-        'Arithmetic Quiz',
-        'Chart',
-        'Course Presentation',
-        'Documentation Tool',
-        'Flashcards',
-        'Iframe Embedder',
-        'Information Wall',
-        'Structure Strip',
-        'Twitter User Feed',
-        'Agamotto',
-        'Audio',
-        'Collage',
-        'Memory Game',
-        'Personality Quiz',
-        'Virtual Tour (360)',
-        'Appear.in for Chat and Talk',
-        'Audio Recorder',
-        'Dialog Cards',
-        'Guess the Answer',
-        'Image Hotspots',
-        'Image Slider',
-        'Timeline'
-      ]
-    },
     nursingFormattedQuestionTypes () {
       return ['Bow Tie',
         'Multiple Choice',
@@ -1783,19 +1793,7 @@ export default {
         this.$noty.info('Since you have chosen open-ended as your technology, you will only receive open-ended questions.')
         return false
       }
-      const goodFormattedOptions = []
-      const badH5PFormattedTypes = this.badH5PFormattedTypes()
-      console.log(badH5PFormattedTypes)
-      console.log(this.formattedQuestionTypesOptions)
-      for (let i = 0; i < this.formattedQuestionTypesOptions.length; i++) {
-        const currentType = this.formattedQuestionTypesOptions[i].formatted_question_type
-        console.log(currentType)
-        if (!badH5PFormattedTypes.includes(currentType)) {
-          goodFormattedOptions.push(this.formattedQuestionTypesOptions[i])
-        }
-      }
-
-      this.formattedQuestionTypesOptionsByTechnology = goodFormattedOptions
+      this.formattedQuestionTypesOptionsByTechnology = this.formattedQuestionTypesOptions
       if (this.allQuestionsTechnology !== 'any') {
         this.formattedQuestionTypesOptionsByTechnology = this.formattedQuestionTypesOptionsByTechnology.filter(item => item.technology === this.allQuestionsTechnology)
         if (['basic', 'nursing'].includes(this.qtiContentType)) {