From 4da1e86a85b304be45d317d313c1b424e183dcdb Mon Sep 17 00:00:00 2001
From: Eric Kean <kreut@hotmail.com>
Date: Wed, 7 Sep 2022 10:36:34 -0700
Subject: [PATCH] Question view changes

---
 resources/js/pages/questions.view.vue | 574 ++++++++++++--------------
 1 file changed, 275 insertions(+), 299 deletions(-)

diff --git a/resources/js/pages/questions.view.vue b/resources/js/pages/questions.view.vue
index 9f98b51e9..18bbc1297 100644
--- a/resources/js/pages/questions.view.vue
+++ b/resources/js/pages/questions.view.vue
@@ -1,8 +1,8 @@
 <template>
   <div :style="!inIFrame ? 'min-height:400px; margin-bottom:100px' : 'margin-bottom:10px;'">
-    <AllFormErrors :all-form-errors="allFormErrors" :modal-id="'modal-form-errors-completion-scoring-mode'"/>
-    <AllFormErrors :all-form-errors="allFormErrors" :modal-id="'modal-form-errors-libretexts-solution-error-form'"/>
-    <AllFormErrors :all-form-errors="allFormErrors" :modal-id="'modal-form-errors-file-upload'"/>
+    <AllFormErrors :all-form-errors="allFormErrors" :modal-id="'modal-form-errors-completion-scoring-mode'" />
+    <AllFormErrors :all-form-errors="allFormErrors" :modal-id="'modal-form-errors-libretexts-solution-error-form'" />
+    <AllFormErrors :all-form-errors="allFormErrors" :modal-id="'modal-form-errors-file-upload'" />
     <AllFormErrors :all-form-errors="allFormErrors"
                    :modal-id="'modal-form-errors-assignment-question-learning-tree-info'"
     />
@@ -21,10 +21,10 @@
         :fields="h5pVideoInteractionSubmissionsFields"
       >
         <template #cell(question)="data">
-          <span v-html="data.value"/>
+          <span v-html="data.value" />
         </template>
         <template #cell(response)="data">
-          <span v-html="data.value"/>
+          <span v-html="data.value" />
         </template>
       </b-table>
     </b-modal>
@@ -62,7 +62,7 @@
       </p>
       <p v-if="assignmentQuestionLearningTreeInfo.number_of_resets >= 1">
         You can have a total of {{
-        assignmentQuestionLearningTreeInfo.number_of_resets
+          assignmentQuestionLearningTreeInfo.number_of_resets
         }} reset{{ assignmentQuestionLearningTreeInfo.number_of_resets > 1 ? 's' : '' }}.
       </p>
     </b-modal>
@@ -141,7 +141,7 @@
       <b-alert :show="user.role === 2" variant="info">
         Students receive a {{ hintPenaltyIfShownHint }}% penalty for viewing the hint.
       </b-alert>
-      <span v-html="questions[currentPage - 1].hint"/>
+      <span v-html="questions[currentPage - 1].hint" />
       <template #modal-footer="{ ok}">
         <b-button
           size="sm"
@@ -208,7 +208,7 @@
       title="Reason For Uploading Local Solution"
       size="lg"
     >
-      <RequiredText/>
+      <RequiredText />
       <b-container>
         <b-form-group
           id="reason_for_uploading_local_solution"
@@ -250,7 +250,7 @@
             @namespaceloaded="onCKEditorNamespaceLoaded"
             @ready="handleFixCKEditor()"
           />
-          <has-error :form="libretextsSolutionErrorForm" field="text"/>
+          <has-error :form="libretextsSolutionErrorForm" field="text" />
         </b-form-group>
       </b-container>
       <template #modal-footer="{ ok, cancel }">
@@ -270,13 +270,13 @@
 
       size="lg"
     >
-      <RequiredText/>
+      <RequiredText />
       <b-form-group
         label-cols-sm="5"
         label-cols-lg="4"
         label-for="completion_scoring_mode"
       >
-        <template slot="label">
+        <template v-slot:label>
           Completion Scoring Mode*
         </template>
 
@@ -308,7 +308,7 @@
             </span>
           </b-form-radio>
         </b-form-radio-group>
-        <has-error :form="completionScoringModeForm" field="completion_scoring_mode"/>
+        <has-error :form="completionScoringModeForm" field="completion_scoring_mode" />
       </b-form-group>
       <template #modal-footer="{ ok, cancel }">
         <b-button size="sm" @click="$bvModal.hide('modal-update-completion-scoring-mode')">
@@ -335,7 +335,7 @@
         />
       </div>
     </b-modal>
-    <div v-if="modalEnrollInCourseIsShown" style="height: 375px"/>
+    <div v-if="modalEnrollInCourseIsShown" style="height: 375px" />
     <b-modal
       id="modal-not-updated"
       ref="modalNotUpdated"
@@ -365,7 +365,7 @@
           >
         </b-row>
         <b-row>
-          <p><span style="font-size: large" v-html="submissionDataMessage"/></p>
+          <p><span style="font-size: large" v-html="submissionDataMessage" /></p>
         </b-row>
       </b-container>
     </b-modal>
@@ -412,7 +412,7 @@
       title="Submission Not Accepted"
     >
       <b-alert variant="danger" :show="true">
-        <span class="font-weight-bold" style="font-size: large" v-html="submissionDataMessage"/>
+        <span class="font-weight-bold" style="font-size: large" v-html="submissionDataMessage" />
       </b-alert>
     </b-modal>
     <b-modal
@@ -429,7 +429,7 @@
           >
         </b-row>
         <b-row>
-          <span style="font-size: large" v-html="submissionDataMessage"/>
+          <span style="font-size: large" v-html="submissionDataMessage" />
         </b-row>
       </b-container>
     </b-modal>
@@ -444,7 +444,7 @@
         </p>
       </div>
     </b-alert>
-    <EnrollInCourse :is-lms="isLMS"/>
+    <EnrollInCourse :is-lms="isLMS" />
     <Email id="contact-grader-modal"
            ref="email"
            extra-email-modal-text="Before you contact your grader, please be sure to look at the solutions first, if they are available."
@@ -453,7 +453,7 @@
            type="contact_grader"
            :subject="getSubject()"
     />
-    <CannotAddAssessmentToBetaAssignmentModal/>
+    <CannotAddAssessmentToBetaAssignmentModal />
     <b-modal
       id="modal-cannot-update-solution"
       ref="modalCannotUpdateSolutionIfBetaAssignment"
@@ -485,69 +485,182 @@
       ref="modalProperties"
       title="Properties"
       size="lg"
+      hide-footer
     >
       <b-container>
-        <b-form-group
-          id="private_description"
-          label-cols-sm="3"
-          label-cols-lg="2"
-        >
-          <template slot="label">
-            Private Description
-            <QuestionCircleTooltip :id="'private-description-tooltip'"/>
-            <b-tooltip target="private-description-tooltip" delay="250"
-                       triggers="hover focus"
-            >
-              An optional description for the assessment. This description will only be viewable by you.
-            </b-tooltip>
+        <div class="pb-4">
+          <b-card>
+            <template #header>
+              <h6 class="mb-0">
+                Identifiers
+              </h6>
+            </template>
+            <div class="mb-2">
+              ADAPT ID: <span id="adaptID">{{ adaptId }}</span>
+              <span class="text-info">
+                <a
+                  href=""
+                  class="pr-1"
+                  aria-label="Copy ADAPT Id"
+                  @click.prevent="doCopy('adaptID')"
+                >
+                  <font-awesome-icon :icon="copyIcon" />
+                </a>
+              </span>
+            </div>
+            <div class="mb-2">
+              ADAPT URL: <span id="currentURL">{{
+                currentUrl
+              }}</span>
+              <span class="text-info">
+                <a
+                  href=""
+                  class="pr-1"
+                  aria-label="Copy ADAPT URL"
+                  @click.prevent="doCopy('currentURL')"
+                >
+                  <font-awesome-icon :icon="copyIcon" />
+                </a>
+              </span>
+            </div>
+            <div v-if="!['text','qti'].includes(technology)" class="mb-2">
+              Technology:
+              <span id="technology" class="text-hide">
+                {{ technology }}
+              </span>
+              {{ formattedTechnology }}
+              <span class="text-info">
+                <a
+                  href=""
+                  class="pr-1"
+                  aria-label="Copy Technology"
+                  @click.prevent="doCopy('technology')"
+                >
+                  <font-awesome-icon :icon="copyIcon" />
+                </a>
+              </span>
+            </div>
+            <div v-if="a11yTechnologySrc" class="mb-2">
+              A11y Technology URL: <span id="a11yTechnologySrc"
+                                         v-html="a11yTechnologySrc"
+              />
+            </div>
+            <div v-if="questions[currentPage - 1] && technology !== 'text'" class="mb-2">
+              <span v-show="false" id="embed_formatively">
+                {{ technology }}:{{ questions[currentPage - 1].technology_id }}
+              </span>
+              <span v-if="technology !== 'qti'">Embed Formatively: {{
+                technology
+              }}:{{ questions[currentPage - 1].technology_id }} <a
+                href=""
+                class="pr-1"
+                aria-label="Copy Technology"
+                @click.prevent="doCopy('embed_formatively')"
+              >
+                <font-awesome-icon :icon="copyIcon" />
+              </a>
+              </span>
+            </div>
+            <div v-if="technologySrc" class="mb-2">
+              Technology URL: <span id="technologySrc"
+                                    v-html="technologySrc"
+              />
+              <span id="technology_src" class="text-hide">
+                {{ questions[currentPage - 1].technology_src }}
+              </span>
+              <span class="text-info">
+                <a
+                  href=""
+                  class="pr-1"
+                  aria-label="Copy Technology"
+                  @click.prevent="doCopy('technology_src')"
+                >
+                  <font-awesome-icon :icon="copyIcon" />
+                </a>
+              </span>
+            </div>
+          </b-card>
+        </div>
+        <div v-if="questions && questions[currentPage-1]" class="pb-4">
+          <b-card>
+            <template #header>
+              <h6 class="mb-0">
+                Embed Settings
+              </h6>
+            </template>
+            <IframeInformation :assignment-information-shown-in-i-frame="assignmentInformationShownInIFrame"
+                               :submission-information-shown-in-i-frame="submissionInformationShownInIFrame"
+                               :attribution-information-shown-in-i-frame="attributionInformationShownInIFrame"
+                               :parent-update-shown-in-i-frame="parentUpdateShownInIFrame"
+            />
+          </b-card>
+        </div>
+        <b-card>
+          <template #header>
+            <h6 class="mb-0">
+              Description and Attribution
+            </h6>
           </template>
-          <b-form-textarea
+          <b-form-group
             id="private_description"
-            v-model="propertiesForm.private_description"
-            rows="2"
-            max-rows="2"
-          />
-        </b-form-group>
-        <b-form-group
-          id="attribution"
-          label-cols-sm="3"
-          label-cols-lg="2"
-          label="Attribution"
-          label-for="attribution"
-        >
-          <b-form-row>
-            <toggle-button
-              :width="90"
-              class="mt-2"
-              :value="autoAttribution"
-              :sync="true"
-              :font-size="14"
-              :margin="4"
-              :color="toggleColors"
-              :labels="{checked: 'Auto', unchecked: 'Custom'}"
-              @change="autoAttribution = !autoAttribution"
+            label-cols-sm="3"
+            label-cols-lg="2"
+          >
+            <template v-slot:label>
+              Private Description
+              <QuestionCircleTooltip :id="'private-description-tooltip'" />
+              <b-tooltip target="private-description-tooltip" delay="250"
+                         triggers="hover focus"
+              >
+                An optional description for the assessment. This description will only be viewable by you.
+              </b-tooltip>
+            </template>
+            <b-form-textarea
+              id="private_description"
+              v-model="propertiesForm.private_description"
+              rows="2"
+              max-rows="2"
             />
-          </b-form-row>
-          <div v-show="autoAttribution">
-            <span v-show="!autoAttributionHTML.length">No licensing information is available.</span>
-            <span v-show="autoAttributionHTML.length" class="ml-2" v-html="autoAttributionHTML"/>
-          </div>
-          <ckeditor v-show="!autoAttribution"
-                    v-model="propertiesForm.attribution"
-                    :config="richEditorConfig"
-                    tabindex="0"
-                    @ready="handleFixCKEditor()"
-          />
-        </b-form-group>
+          </b-form-group>
+          <b-form-group
+            id="attribution"
+            label-cols-sm="3"
+            label-cols-lg="2"
+            label="Attribution"
+            label-for="attribution"
+          >
+            <b-form-row>
+              <toggle-button
+                :width="90"
+                class="mt-2"
+                :value="autoAttribution"
+                :sync="true"
+                :font-size="14"
+                :margin="4"
+                :color="toggleColors"
+                :labels="{checked: 'Auto', unchecked: 'Custom'}"
+                @change="autoAttribution = !autoAttribution"
+              />
+            </b-form-row>
+            <div v-show="autoAttribution">
+              <span v-show="!autoAttributionHTML.length">No licensing information is available.</span>
+              <span v-show="autoAttributionHTML.length" class="ml-2" v-html="autoAttributionHTML" />
+            </div>
+            <ckeditor v-show="!autoAttribution"
+                      v-model="propertiesForm.attribution"
+                      :config="richEditorConfig"
+                      tabindex="0"
+                      @ready="handleFixCKEditor()"
+            />
+          </b-form-group>
+          <b-button size="sm" @click="$bvModal.hide('modal-properties')">
+            Cancel
+          </b-button>
+          <b-button size="sm" variant="primary" @click="updateProperties()">
+            Update
+          </b-button>
+        </b-card>
       </b-container>
-      <template #modal-footer="{ ok, cancel }">
-        <b-button size="sm" @click="$bvModal.hide('modal-properties')">
-          Cancel
-        </b-button>
-        <b-button size="sm" variant="primary" @click="updateProperties()">
-          Update
-        </b-button>
-      </template>
     </b-modal>
     <b-modal
       id="modal-reset-to-default-text"
@@ -589,13 +702,13 @@
         </b-button>
       </template>
     </b-modal>
-    <CannotDeleteAssessmentFromBetaAssignmentModal/>
+    <CannotDeleteAssessmentFromBetaAssignmentModal />
     <b-modal
       id="modal-remove-question"
       ref="modal"
       title="Confirm Remove Question"
     >
-      <RemoveQuestion :beta-assignments-exist="betaAssignmentsExist"/>
+      <RemoveQuestion :beta-assignments-exist="betaAssignmentsExist" />
       <template #modal-footer>
         <b-button
           size="sm"
@@ -615,124 +728,6 @@
       </template>
     </b-modal>
 
-    <b-modal
-      id="modal-share"
-      ref="modal_share"
-      title="Share"
-      size="lg"
-    >
-      <div v-if="questions && questions[currentPage-1]">
-        <IframeInformation :assignment-information-shown-in-i-frame="assignmentInformationShownInIFrame"
-                           :submission-information-shown-in-i-frame="submissionInformationShownInIFrame"
-                           :attribution-information-shown-in-i-frame="attributionInformationShownInIFrame"
-                           :parent-update-shown-in-i-frame="parentUpdateShownInIFrame"
-        />
-      </div>
-      <div class="mb-2">
-        <span class="font-weight-bold">Libretexts ID:</span> <span id="libretextsID">
-          {{ libraryText }}-{{ pageId }}</span>
-        <span class="text-info">
-          <a
-            href=""
-            class="pr-1"
-            aria-label="Copy Libretexts ID"
-            @click.prevent="doCopy('libretextsID')"
-          >
-            <font-awesome-icon :icon="copyIcon"/>
-          </a>
-        </span>
-      </div>
-      <div class="mb-2">
-        <span class="font-weight-bold">ADAPT ID: </span><span id="adaptID">{{ adaptId }}</span>
-        <span class="text-info">
-          <a
-            href=""
-            class="pr-1"
-            aria-label="Copy ADAPT Id"
-            @click.prevent="doCopy('adaptID')"
-          >
-            <font-awesome-icon :icon="copyIcon"/>
-          </a>
-        </span>
-      </div>
-      <div class="mb-2">
-        <span class="font-weight-bold">ADAPT URL:</span> <span id="currentURL">{{
-          currentUrl
-        }}</span>
-        <span class="text-info">
-          <a
-            href=""
-            class="pr-1"
-            aria-label="Copy ADAPT URL"
-            @click.prevent="doCopy('currentURL')"
-          >
-            <font-awesome-icon :icon="copyIcon"/>
-          </a>
-        </span>
-      </div>
-      <div v-if="technology !== 'text'" class="mb-2">
-        <span class="font-weight-bold">Technology: </span>
-        <span id="technology" class="text-hide">
-          {{ technology }}
-        </span>
-        {{ formattedTechnology }}
-        <span class="text-info">
-          <a
-            href=""
-            class="pr-1"
-            aria-label="Copy Technology"
-            @click.prevent="doCopy('technology')"
-          >
-            <font-awesome-icon :icon="copyIcon"/>
-          </a>
-        </span>
-      </div>
-      <div v-if="a11yTechnologySrc" class="mb-2">
-        <span class="font-weight-bold">A11y Technology URL: </span><span id="a11yTechnologySrc"
-                                                                         v-html="a11yTechnologySrc"
-      />
-      </div>
-      <div v-if="questions[currentPage - 1] && technology !== 'text'" class="mb-2">
-        <span v-show="false" id="embed_formatively">
-          {{ technology }}:{{ questions[currentPage - 1].technology_id }}
-        </span>
-        <span v-if="technology !== 'qti'" class="font-weight-bold">Embed Formatively:</span> {{
-        technology
-        }}:{{ questions[currentPage - 1].technology_id }} <a
-        href=""
-        class="pr-1"
-        aria-label="Copy Technology"
-        @click.prevent="doCopy('embed_formatively')"
-      >
-        <font-awesome-icon :icon="copyIcon"/>
-      </a>
-      </div>
-      <div v-if="technologySrc" class="mb-2">
-        <span class="font-weight-bold">Technology URL: </span><span id="technologySrc"
-                                                                    v-html="technologySrc"
-      />
-        <span id="technology_src" class="text-hide">
-          {{ questions[currentPage - 1].technology_src }}
-        </span>
-        <span class="text-info">
-          <a
-            href=""
-            class="pr-1"
-            aria-label="Copy Technology"
-            @click.prevent="doCopy('technology_src')"
-          >
-            <font-awesome-icon :icon="copyIcon"/>
-          </a>
-        </span>
-      </div>
-
-      <template #modal-footer="{ ok }">
-        <b-button size="sm" variant="primary" @click="$bvModal.hide('modal-share')">
-          OK
-        </b-button>
-      </template>
-    </b-modal>
-
     <b-modal
       id="modal-upload-file"
       :title="getModalUploadFileTitle()"
@@ -786,11 +781,10 @@
                       @keydown="solutionTextForm.errors.clear('solution_text')"
                       @ready="handleFixCKEditor()"
             />
-            <has-error :form="solutionTextForm" field="solution_text"/>
+            <has-error :form="solutionTextForm" field="solution_text" />
           </div>
           <div>
-            <span class="float-right"><b-button variant="primary" @click="submitSolutionText"
-            >Save Text</b-button></span>
+            <span class="float-right"><b-button variant="primary" @click="submitSolutionText">Save Text</b-button></span>
           </div>
         </div>
       </div>
@@ -852,7 +846,7 @@
                       :class="{ 'is-invalid': cutupsForm.errors.has('chosen_cutups') }"
                       @keydown="cutupsForm.errors.clear('chosen_cutups')"
                     />
-                    <has-error :form="cutupsForm" field="chosen_cutups"/>
+                    <has-error :form="cutupsForm" field="chosen_cutups" />
                   </b-col>
                   <b-col lg="8" class="ml-3">
                     <b-row>
@@ -862,7 +856,7 @@
                         Set As Solution
                       </b-button>
                       <span v-show="settingAsSolution" class="ml-2">
-                        <b-spinner small type="grow"/>
+                        <b-spinner small type="grow" />
                         Processing your file...
                       </span>
                     </b-row>
@@ -901,7 +895,7 @@
                       :class="{ 'is-invalid': questionSubmissionPageForm.errors.has('page') }"
                       @keydown="questionSubmissionPageForm.errors.clear('page')"
                     />
-                    <has-error :form="questionSubmissionPageForm" field="page"/>
+                    <has-error :form="questionSubmissionPageForm" field="page" />
                   </b-col>
                   <b-col lg="8" class="ml-3">
                     <b-row>
@@ -911,7 +905,7 @@
                         Set As Question File Submission
                       </b-button>
                       <span v-show="settingAsSolution" class="ml-2">
-                        <b-spinner small type="grow"/>
+                        <b-spinner small type="grow" />
                         Processing your file...
                       </span>
                     </b-row>
@@ -971,17 +965,17 @@
                 <ul v-if="files.length && (preSignedURL !== '')">
                   <li v-for="file in files" :key="file.id">
                     <span :class="file.success ? 'text-success font-weight-bold' : ''">{{
-                        file.name
-                      }}</span> -
+                      file.name
+                    }}</span> -
                     <span>{{ formatFileSize(file.size) }} </span>
                     <span v-if="file.size > 10000000">Note: large files may take up to a minute to process.</span>
                     <span v-if="file.error" class="text-danger">Error: {{ file.error }}</span>
                     <span v-else-if="file.active" class="ml-2">
-                      <b-spinner small type="grow"/>
+                      <b-spinner small type="grow" />
                       Uploading File...
                     </span>
                     <span v-if="processingFile">
-                      <b-spinner small type="grow"/>
+                      <b-spinner small type="grow" />
                       Processing file...
                     </span>
                     <b-button v-if="!processingFile && (preSignedURL !== '') && (!$refs.upload || !$refs.upload.active)"
@@ -1020,7 +1014,7 @@
                background="#FFFFFF"
       />
       <div v-if="questions !==['init'] && !inIFrame">
-        <PageTitle :title="title"/>
+        <PageTitle :title="title" />
       </div>
       <div v-if="questions.length && !initializing && inIFrame && !showSubmissionInformation">
         <div
@@ -1036,14 +1030,14 @@
             <span class="font-weight-bold">
               You have successfully submitted a response on  {{ questions[currentPage - 1].last_submitted }}.
               <span v-if="showScores">  You received a score of {{
-                  questions[currentPage - 1].submission_score
-                }}.</span></span>
+                questions[currentPage - 1].submission_score
+              }}.</span></span>
           </b-alert>
         </div>
       </div>
       <div v-if="questions.length && !initializing && !isLoading">
         <div v-show="isInstructorLoggedInAsStudent">
-          <LoggedInAsStudent :student-name="user.first_name + ' ' + user.last_name"/>
+          <LoggedInAsStudent :student-name="user.first_name + ' ' + user.last_name" />
         </div>
         <div v-if="inIFrame && (user.role === 2)">
           <b-button variant="primary" size="sm" class="mb-3" @click="viewInADAPT">
@@ -1091,14 +1085,14 @@
         </b-alert>
       </div>
       <div v-if="user.role === 2 && !inIFrame && !isLoading && !isInstructorWithAnonymousView">
-        <AssessmentTypeWarnings :beta-assignments-exist="betaAssignmentsExist"/>
+        <AssessmentTypeWarnings :beta-assignments-exist="betaAssignmentsExist" />
       </div>
       <div v-if="questions[currentPage-1] && questions[currentPage-1].h5p_non_adapt">
         <b-alert variant="info" show>
           This H5P question has type "{{ questions[currentPage - 1].h5p_non_adapt }}" which is not on the <a
-          href="https://chem.libretexts.org/Courses/Remixer_University/Mastering_ADAPT%3A_A_User%27s_Guide/07%3A_Building_H5P_Assessments/H5P-ADAPT_Assessment_Status"
-          target="blank"
-        >list of Adapt ready H5P questions</a>.
+            href="https://chem.libretexts.org/Courses/Remixer_University/Mastering_ADAPT%3A_A_User%27s_Guide/07%3A_Building_H5P_Assessments/H5P-ADAPT_Assessment_Status"
+            target="blank"
+          >list of Adapt ready H5P questions</a>.
           Please attempt this question in Student View to verify that it is working as expected.
         </b-alert>
       </div>
@@ -1152,7 +1146,7 @@
                              @end="cleanUpClickerCounter"
                   >
                     <template slot-scope="props">
-                      <span v-html="getTimeLeftMessage(props, assessmentType)"/>
+                      <span v-html="getTimeLeftMessage(props, assessmentType)" />
                     </template>
                   </countdown>
                   <span v-show="assessmentType !== 'clicker' && user.role === 3">
@@ -1176,8 +1170,8 @@
                 v-if="studentNonClicker() && assessmentType === 'real time' && numberOfAllowedAttempts === 'unlimited'"
               >
                 {{ questions[currentPage - 1].submission_count }}/<span><span
-                style="font-size:x-large;position: relative;bottom: -2px"
-              >&infin;</span>attempts</span>
+                  style="font-size:x-large;position: relative;bottom: -2px"
+                >&infin;</span>attempts</span>
               </li>
               <li>
                 <span v-if="['real time','learning tree'].includes(assessmentType)
@@ -1225,7 +1219,7 @@
                 && numberOfAllowedAttemptsPenalty"
             >
               Next Attempt Points: {{ maximumNumberOfPointsPossible }}
-              <QuestionCircleTooltip :id="'real-time-per-attempt-penalty-tooltip'"/>
+              <QuestionCircleTooltip :id="'real-time-per-attempt-penalty-tooltip'" />
               <b-tooltip target="real-time-per-attempt-penalty-tooltip" delay="250"
                          triggers="hover focus"
               >
@@ -1267,7 +1261,7 @@
             </div>
 
             <div v-if="studentNonClicker() && completionScoringModeMessage">
-              <span class="font-weight-bold" v-html="completionScoringModeMessage"/>
+              <span class="font-weight-bold" v-html="completionScoringModeMessage" />
             </div>
             <div
               v-if="studentNonClicker()
@@ -1280,21 +1274,6 @@
             </div>
             <div v-if="instructorInNonBasicView()">
               <div id="action-icons" class="pb-1">
-                Actions:
-                <a id="share-question-tooltip" href="" class="p-2" @click.prevent="openModalShare();">
-                  <b-icon icon="share"
-                          aria-label="Share"
-                          class="text-muted"
-                          scale="1.1"
-                  />
-                </a>
-                <b-tooltip target="share-question-tooltip"
-                           delay="750"
-                           triggers="hover"
-                >
-                  View question identifiers which can be used in sharing the question
-                </b-tooltip>
-
                 <a id="question-properties-tooltip" href="" class="p-1" @click.prevent="openModalProperties()">
                   <b-icon icon="gear"
                           aria-label="Properties"
@@ -1415,8 +1394,7 @@
                 </span>
               </div>
               <b-form-row style="margin-left:0">
-                This question is worth <span v-show="!showUpdatePointsPerQuestion" class="pl-1 pr-1"
-              > {{ questions[currentPage - 1].points }} </span>
+                This question is worth <span v-show="!showUpdatePointsPerQuestion" class="pl-1 pr-1"> {{ questions[currentPage - 1].points }} </span>
                 <b-form-input
                   v-if="showUpdatePointsPerQuestion"
                   id="points"
@@ -1429,10 +1407,10 @@
                   class="ml-2 mr-2"
                   @keydown="questionPointsForm.errors.clear('points')"
                 />
-                <has-error v-if="showUpdatePointsPerQuestion" :form="questionPointsForm" field="points"/>
+                <has-error v-if="showUpdatePointsPerQuestion" :form="questionPointsForm" field="points" />
                 point{{ 1 * (questions[currentPage - 1].points) !== 1 ? 's' : '' }}<span
-                v-show="showUpdatePointsPerQuestion"
-              >.</span>
+                  v-show="showUpdatePointsPerQuestion"
+                >.</span>
                 <span v-show="!showUpdatePointsPerQuestion" class="pl-1"> with a weight of</span>
                 <b-form-input
                   v-if="!showUpdatePointsPerQuestion"
@@ -1455,14 +1433,14 @@
                               @click="showUpdatePointsPerQuestion ? updatePoints(questions[currentPage-1].id): updateWeight(questions[currentPage-1].id)"
                     >
                       Update <span v-show="showUpdatePointsPerQuestion">Points</span><span
-                      v-show="!showUpdatePointsPerQuestion"
-                    >Weight</span>
+                        v-show="!showUpdatePointsPerQuestion"
+                      >Weight</span>
                     </b-button>
                   </div>
                 </b-col>
               </b-form-row>
               <b-row align-h="center">
-                <span class="pr-1 font-weight-bold" v-html="completionScoringModeMessage"/>
+                <span class="pr-1 font-weight-bold" v-html="completionScoringModeMessage" />
                 <a href="" @click.prevent="openUpdateCompletionScoringModeModal()">
                   <b-icon v-if="completionScoringModeMessage"
                           icon="pencil"
@@ -1490,7 +1468,7 @@
             </b-form-row>
 
             <div v-if="instructorInNonBasicView()">
-              <div v-if="!questions[currentPage-1].solution">
+              <span v-if="!questions[currentPage-1].solution">
                 <b-button
                   class="mt-2 mb-2 ml-1"
                   variant="dark"
@@ -1516,7 +1494,7 @@
                   Optionally, you can provide your own solution. If this question has a Libretext solution
                   associated with it, your local solution will be shown to your students.
                 </b-tooltip>
-              </div>
+              </span>
               <b-button
                 v-if="questions[currentPage-1].solution"
                 class="mt-1 mb-2 ml-1"
@@ -1609,7 +1587,7 @@
         <b-container>
           <span v-if="user.fake_student === 1">
             <b-button size="sm" @click="resetStudentViewSubmission">Reset Submission</b-button>
-            <QuestionCircleTooltip id="reset-submission-tooltip"/>
+            <QuestionCircleTooltip id="reset-submission-tooltip" />
             <b-tooltip target="reset-submission-tooltip" delay="250"
                        triggers="hover focus"
             >
@@ -1649,7 +1627,7 @@
                              @change="filterByQuestionType($event)"
               />
               <span v-if="filteringByQuestionType" class="pl-2">
-                <b-spinner small type="grow"/>
+                <b-spinner small type="grow" />
                 Updating view...
               </span>
             </b-form-group>
@@ -1660,7 +1638,7 @@
               size="sm"
               @click="addQuestionToFavorites('single')"
             >
-              <font-awesome-icon :icon="heartIcon"/>Add To My Favorites
+              <font-awesome-icon :icon="heartIcon" />Add To My Favorites
             </b-button>
             <SavedQuestionsFolders
               ref="savedQuestionsFolders"
@@ -1716,14 +1694,14 @@
                           @click.prevent="moveBackInTree(activeNode.parent)"
                 >
                   <span v-show="false" class="aaa">{{ activeNode }}</span>
-                  <font-awesome-icon :icon="arrowLeftIcon"/>
+                  <font-awesome-icon :icon="arrowLeftIcon" />
                 </b-button>
                 <b-button variant="outline-primary"
                           size="sm"
                           :disabled="activeNode.children && (!activeNode.children.length || (activeNode.children.length && learningTreeBranchOptions.length > 1)) || !learningTreeAsList.length"
                           @click.prevent="moveForwardInTree(activeNode.children)"
                 >
-                  <font-awesome-icon :icon="arrowRightIcon"/>
+                  <font-awesome-icon :icon="arrowRightIcon" />
                 </b-button>
               </b-col>
               <b-col id="learning_tree_messages">
@@ -1753,7 +1731,7 @@
                       :time="parseInt(learningTreeSuccessCriteriaTimeLeft)"
                     >
                       <template slot-scope="props">
-                        <span v-html="getTimeLeftUntilLearningTreeSuccess(props)"/>
+                        <span v-html="getTimeLeftUntilLearningTreeSuccess(props)" />
                       </template>
                     </countdown>
                   </b-alert>
@@ -1835,10 +1813,10 @@
                            @click.prevent="initExploreBranchOrTwig(learningTreeBranchOption)"
                         >{{
                           learningTreeBranchOption.parent !== -1 ?
-                          getLearningTreeBranchDescription(learningTreeBranchOption) : 'Root Assessment'
-                          }}</a> {{ getLearningTreeBranchMessage(learningTreeBranchOption).message }}
+                            getLearningTreeBranchDescription(learningTreeBranchOption) : 'Root Assessment'
+                        }}</a> {{ getLearningTreeBranchMessage(learningTreeBranchOption).message }}
                         <span v-if="getLearningTreeBranchMessage(learningTreeBranchOption).completed">
-                          <font-awesome-icon class="text-success" :icon="checkIcon"/>
+                          <font-awesome-icon class="text-success" :icon="checkIcon" />
                         </span>
                         <span v-show="false" class="aaa">{{ learningTreeBranchOption }}</span>
                       </li>
@@ -1849,8 +1827,8 @@
                     <div class="p-2">
                       <b-alert :show="remediationToView.answered_correctly" variant="success">
                         Already answered correctly. <span
-                        v-if="assignmentQuestionLearningTreeInfo.learning_tree_success_criteria === 'assessment based'"
-                      >Will not count towards a Root Assessment reset.</span>
+                          v-if="assignmentQuestionLearningTreeInfo.learning_tree_success_criteria === 'assessment based'"
+                        >Will not count towards a Root Assessment reset.</span>
                       </b-alert>
                     </div>
                     <h2 style="font-size:26px" class="page-title pl-3 pt-2">
@@ -1972,7 +1950,7 @@
                           @namespaceloaded="onCKEditorNamespaceLoaded"
                           @ready="handleFixCKEditor()"
                         />
-                        <has-error :form="openEndedDefaultTextForm" field="open_ended_default_text"/>
+                        <has-error :form="openEndedDefaultTextForm" field="open_ended_default_text" />
                       </b-card>
                       <b-container class="mt-2">
                         <b-row align-h="end">
@@ -2027,8 +2005,8 @@
                       save the .mp3 file to your computer, then <a href=""
                                                                    variant="sm"
                                                                    @click.prevent="openUploadFileModal(questions[currentPage - 1].id)"
-                    >
-                      upload the .mp3 file</a> from your computer into ADAPT.
+                      >
+                        upload the .mp3 file</a> from your computer into ADAPT.
                     </p>
                     <div class="ml-5">
                       <audio-recorder
@@ -2077,7 +2055,7 @@
                           :class="{ 'is-invalid': clickerTimeForm.errors.has('time_to_submit') }"
                           @keydown="clickerTimeForm.errors.clear('time_to_submit')"
                         />
-                        <has-error :form="clickerTimeForm" field="time_to_submit"/>
+                        <has-error :form="clickerTimeForm" field="time_to_submit" />
                       </b-form-group>
                       <b-col>
                         <b-button variant="success" @click="startClickerAssessment">
@@ -2089,7 +2067,7 @@
                       <hr>
                       <countdown v-show="assessmentType === 'clicker'" :time="timeLeft" @end="cleanUpClickerCounter">
                         <template slot-scope="props">
-                          <span v-html="getTimeLeftMessage(props, assessmentType)"/>
+                          <span v-html="getTimeLeftMessage(props, assessmentType)" />
                         </template>
                       </countdown>
                       <h4>{{ responsePercent }}% of students have responded</h4>
@@ -2098,7 +2076,7 @@
                       </h5>
                     </div>
                   </div>
-                  <pie-chart :key="currentPage" :chartdata="piechartdata" @pieChartLoaded="updateIsLoadingPieChart"/>
+                  <pie-chart :key="currentPage" :chartdata="piechartdata" @pieChartLoaded="updateIsLoadingPieChart" />
                 </div>
               </div>
             </b-col>
@@ -2150,7 +2128,7 @@
                       v-if="numberOfAllowedAttempts !== 'unlimited' && scoringType === 'p'"
                     >
                       {{
-                      numberOfRemainingAttempts
+                        numberOfRemainingAttempts
                       }}
                     </div>
                     <div>
@@ -2166,15 +2144,14 @@
                     >
                       Next Attempt Points: {{ maximumNumberOfPointsPossible }}
                       <span>
-                        <QuestionCircleTooltip :id="'learning-tree-per-attempt-penalty-tooltip'"/>
+                        <QuestionCircleTooltip :id="'learning-tree-per-attempt-penalty-tooltip'" />
                         <b-tooltip target="learning-tree-per-attempt-penalty-tooltip" delay="250"
                                    triggers="hover focus"
                         >
                           <span v-show="!freePassForSatisfyingLearningTreeCriteria">
                             A per attempt penalty of {{ numberOfAllowedAttemptsPenalty }}% is applied after the first
                             attempt. </span>
-                          <span v-show="freePassForSatisfyingLearningTreeCriteria"
-                          >  A per attempt penalty of {{ numberOfAllowedAttemptsPenalty }}% is applied after the second
+                          <span v-show="freePassForSatisfyingLearningTreeCriteria">  A per attempt penalty of {{ numberOfAllowedAttemptsPenalty }}% is applied after the second
                             attempt. </span>
                           {{ getHintPenaltyMessage() }}  With the penalty, the maximum number of points possible for the next attempt is
                           {{ maximumNumberOfPointsPossible }} points.
@@ -2186,8 +2163,8 @@
                   <div style="font-size: smaller">
                     <div>
                       Last submission: <span
-                      :class="{ 'text-danger': questions[currentPage - 1].last_submitted === 'N/A' }"
-                    >{{
+                        :class="{ 'text-danger': questions[currentPage - 1].last_submitted === 'N/A' }"
+                      >{{
                         questions[currentPage - 1].student_response
                       }}</span>
                       <div>
@@ -2195,8 +2172,8 @@
                         <span
                           :class="{ 'text-danger': questions[currentPage - 1].last_submitted === 'N/A' }"
                         >{{
-                            questions[currentPage - 1].last_submitted
-                          }} </span>
+                          questions[currentPage - 1].last_submitted
+                        }} </span>
                       </div>
                     </div>
                   </div>
@@ -2226,8 +2203,8 @@
                           <span
                             :class="{ 'text-danger': questions[currentPage - 1].last_submitted === 'N/A' }"
                           >{{
-                              questions[currentPage - 1].student_response
-                            }}</span>
+                            questions[currentPage - 1].student_response
+                          }}</span>
 
                         </span>
                         <span v-if="questions[currentPage - 1].has_h5p_video_interaction_submissions">
@@ -2241,12 +2218,12 @@
                         <span
                           :class="{ 'text-danger': questions[currentPage - 1].last_submitted === 'N/A' }"
                         >{{
-                            questions[currentPage - 1].last_submitted
-                          }} </span>
+                          questions[currentPage - 1].last_submitted
+                        }} </span>
                       </li>
                       <li v-if="showScores">
                         <span class="font-weight-bold">Score:</span> {{
-                        questions[currentPage - 1].submission_score
+                          questions[currentPage - 1].submission_score
                         }}
                       </li>
                       <li v-if="showScores">
@@ -2254,7 +2231,7 @@
                       </li>
                       <li v-if="parseFloat(questions[currentPage - 1].late_penalty_percent) > 0 && showScores">
                         <span class="font-weight-bold">Late Penalty:</span> {{
-                        questions[currentPage - 1].late_penalty_percent
+                          questions[currentPage - 1].late_penalty_percent
                         }}%
                       </li>
                     </ul>
@@ -2306,7 +2283,9 @@
                         <a :href="questions[currentPage-1].file_feedback_url"
                            target="”_blank”"
                         >
-                          {{ questions[currentPage - 1].file_feedback_type === 'audio' ? 'Listen To Feedback' : 'View Feedback' }}
+                          {{
+                            questions[currentPage - 1].file_feedback_type === 'audio' ? 'Listen To Feedback' : 'View Feedback'
+                          }}
                         </a>
                       </li>
                       <li v-if="showScores">
@@ -2345,8 +2324,8 @@
                         >
                           <span>
                             {{ bothFileUploadMode ? 'Optionally' : 'Please' }}, upload your compiled PDF on the assignment's <router-link
-                            :to="{ name: 'students.assignments.summary', params: { assignmentId: assignmentId }}"
-                          >summary page</router-link>.
+                              :to="{ name: 'students.assignments.summary', params: { assignmentId: assignmentId }}"
+                            >summary page</router-link>.
                           </span>
                         </b-row>
                       </b-container>
@@ -2367,7 +2346,7 @@
               <div v-if="questions[currentPage - 1].text_question"
                    class="mt-3 libretexts-border"
               >
-                <div class="mt-3" v-html="questions[currentPage - 1].text_question"/>
+                <div class="mt-3" v-html="questions[currentPage - 1].text_question" />
               </div>
               <div v-show="questions[currentPage - 1].a11y_technology_id" class="mt-3 libretexts-border">
                 <h2 class="editable">
@@ -2386,27 +2365,27 @@
               <div v-if="questions[currentPage-1].answer_html"
                    class="mt-3 libretexts-border"
               >
-                <div class="mt-3" v-html="questions[currentPage - 1].answer_html"/>
+                <div class="mt-3" v-html="questions[currentPage - 1].answer_html" />
               </div>
               <div v-if="questions[currentPage-1].solution_html"
                    class="mt-3 libretexts-border"
               >
-                <div class="mt-3" v-html="questions[currentPage - 1].solution_html"/>
+                <div class="mt-3" v-html="questions[currentPage - 1].solution_html" />
               </div>
               <div v-if="questions[currentPage-1].hint"
                    class="mt-3 libretexts-border"
               >
-                <div class="mt-3" v-html="questions[currentPage - 1].hint"/>
+                <div class="mt-3" v-html="questions[currentPage - 1].hint" />
               </div>
               <div v-if="questions[currentPage-1].libretexts_link"
                    class="mt-3 libretexts-border"
               >
-                <div class="mt-3" v-html="questions[currentPage - 1].libretexts_link"/>
+                <div class="mt-3" v-html="questions[currentPage - 1].libretexts_link" />
               </div>
               <div v-if="questions[currentPage-1].notes"
                    class="mt-3 libretexts-border"
               >
-                <div class="mt-3" v-html="questions[currentPage - 1].notes"/>
+                <div class="mt-3" v-html="questions[currentPage - 1].notes" />
               </div>
             </div>
           </b-row>
@@ -3808,6 +3787,18 @@ export default {
       }
     },
     async openModalProperties () {
+      this.currentUrl = this.getCurrentUrl()
+      this.embedCode = this.getEmbedCode()
+      this.libraryText = this.questions[this.currentPage - 1].library
+      this.adaptId = `${this.assignmentId}-${this.questions[this.currentPage - 1].id}`
+      this.pageId = this.questions[this.currentPage - 1].page_id
+      this.assignmentInformationShownInIFrame = this.questions[this.currentPage - 1].assignment_information_shown_in_iframe
+      this.submissionInformationShownInIFrame = this.questions[this.currentPage - 1].submission_information_shown_in_iframe
+      this.attributionInformationShownInIFrame = this.questions[this.currentPage - 1].attribution_information_shown_in_iframe
+      this.technology = this.questions[this.currentPage - 1].technology
+      this.formattedTechnology = this.getFormattedTechnology(this.technology)
+      this.technologySrc = this.getTechnologySrc('technology', 'technology_src', this.questions[this.currentPage - 1])
+      this.a11yTechnologySrc = this.getTechnologySrc('a11y_technology', 'a11y_technology_src', this.questions[this.currentPage - 1])
       this.propertiesForm.attribution = this.questions[this.currentPage - 1].attribution
       this.propertiesForm.private_description = this.questions[this.currentPage - 1].private_description
       this.autoAttribution = !!this.questions[this.currentPage - 1].auto_attribution
@@ -4163,21 +4154,6 @@ export default {
       this.currentUrl = this.getCurrentUrl()
       this.embedCode = this.getEmbedCode()
     },
-    openModalShare () {
-      this.$bvModal.show('modal-share')
-      this.currentUrl = this.getCurrentUrl()
-      this.embedCode = this.getEmbedCode()
-      this.libraryText = this.questions[this.currentPage - 1].library
-      this.adaptId = `${this.assignmentId}-${this.questions[this.currentPage - 1].id}`
-      this.pageId = this.questions[this.currentPage - 1].page_id
-      this.assignmentInformationShownInIFrame = this.questions[this.currentPage - 1].assignment_information_shown_in_iframe
-      this.submissionInformationShownInIFrame = this.questions[this.currentPage - 1].submission_information_shown_in_iframe
-      this.attributionInformationShownInIFrame = this.questions[this.currentPage - 1].attribution_information_shown_in_iframe
-      this.technology = this.questions[this.currentPage - 1].technology
-      this.formattedTechnology = this.getFormattedTechnology(this.technology)
-      this.technologySrc = this.getTechnologySrc('technology', 'technology_src', this.questions[this.currentPage - 1])
-      this.a11yTechnologySrc = this.getTechnologySrc('a11y_technology', 'a11y_technology_src', this.questions[this.currentPage - 1])
-    },
     getFormattedTechnology (technology) {
       let formattedTechnology
       switch (technology) {