From 38219912a884dcd15a6fdfafd68b04749342ef32 Mon Sep 17 00:00:00 2001
From: jasonqiu212 <jason_qiu@hotmail.com>
Date: Mon, 20 Mar 2023 13:59:50 +0800
Subject: [PATCH 1/3] Modify question headers in instructor edit sessions page

---
 .../question-edit-form.component.spec.ts.snap |  29 ++--
 .../question-edit-form.component.html         |  22 +--
 .../question-edit-form.component.scss         |   5 +
 .../visibility-panel.component.html           |   2 +-
 ...r-session-edit-page.component.spec.ts.snap | 139 +++++++++++-------
 5 files changed, 124 insertions(+), 73 deletions(-)

diff --git a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
index 0ea572bda1e..de4cc46e924 100644
--- a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
+++ b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
@@ -32,8 +32,8 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
     class="card"
     id="question-form-0"
   >
-    <div
-      class="card-header bg-primary text-white cursor-pointer"
+    <button
+      class="card-header bg-primary text-white cursor-pointer border-0"
     >
       <div
         class="collapse-caret"
@@ -49,17 +49,28 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
         </tm-panel-chevron>
       </div>
       <div
+        class="d-flex flex-column"
         id="question-header"
       >
-        <strong>
-          Question 
+        <div
+          class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
+        >
+          <h2
+            class="question-details fw-bold"
+          >
+            Question 
+            <span
+              id="question-number"
+            >
+              0 
+            </span>
+          </h2>
           <span
-            id="question-number"
+            class="text-start"
           >
-            0
+            Essay question
           </span>
-        </strong>
-         Essay question 
+        </div>
       </div>
       <div
         class="card-header-btn-toolbar"
@@ -99,7 +110,7 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
           </button>
         </div>
       </div>
-    </div>
+    </button>
     <div
       class="ng-trigger ng-trigger-collapseAnim"
       style=""
diff --git a/src/web/app/components/question-edit-form/question-edit-form.component.html b/src/web/app/components/question-edit-form/question-edit-form.component.html
index aaa5ca76b9a..bf7e6ae3ee5 100644
--- a/src/web/app/components/question-edit-form/question-edit-form.component.html
+++ b/src/web/app/components/question-edit-form/question-edit-form.component.html
@@ -1,17 +1,19 @@
 <div id="question-form-{{ model.questionNumber }}" class="card">
-  <div class="card-header bg-primary text-white cursor-pointer" (click)="triggerModelChange('isCollapsed', !model.isCollapsed)">
+  <button class="card-header bg-primary text-white cursor-pointer border-0" (click)="triggerModelChange('isCollapsed', !model.isCollapsed)">
     <div class="collapse-caret">
       <tm-panel-chevron [isExpanded]="!model.isCollapsed"></tm-panel-chevron>
     </div>
-    <div id="question-header">
-      <strong>Question <span id="question-number" *ngIf="!model.isEditable">{{ model.questionNumber }}</span></strong>
-      <select id="question-number-dropdown" class="form-control form-select question-number-select" [ngModel]="model.questionNumber" (ngModelChange)="triggerModelChange('questionNumber', $event)" *ngIf="model.isEditable" (click)="$event.stopPropagation()">
-        <option *ngFor="let i of range(numOfQuestions)" [ngValue]="i + 1">{{ i + 1 }}</option>
-      </select>
-      {{ model.questionType | questionTypeName }}
+    <div id="question-header" class="d-flex flex-column">
+      <div class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start">
+        <h2 class="question-details fw-bold">Question <span id="question-number" *ngIf="!model.isEditable">{{ model.questionNumber }}&nbsp;</span>
+          <select id="question-number-dropdown" class="form-control form-select question-number-select" [ngModel]="model.questionNumber" (ngModelChange)="triggerModelChange('questionNumber', $event)" *ngIf="model.isEditable" (click)="$event.stopPropagation()">
+            <option *ngFor="let i of range(numOfQuestions)" [ngValue]="i + 1">{{ i + 1 }}</option>
+          </select>
+        </h2>
+      <span class="text-start">{{ model.questionType | questionTypeName }}</span>
+      </div>
       <ng-container *ngIf="model.isCollapsed">
-        <br>
-        <div class="collapse-qn-description">{{ model.questionBrief }}</div>
+        <div class="collapse-qn-description text-start">{{ model.questionBrief }}</div>
       </ng-container>
     </div>
     <div class="card-header-btn-toolbar">
@@ -53,7 +55,7 @@
         </button>
       </div>
     </div>
-  </div>
+  </button>
   <div *ngIf="!model.isCollapsed" @collapseAnim>
     <div class="card-body">
       <div class="background-color-light-blue">
diff --git a/src/web/app/components/question-edit-form/question-edit-form.component.scss b/src/web/app/components/question-edit-form/question-edit-form.component.scss
index 86bf5ea0206..a41b52ccdf5 100644
--- a/src/web/app/components/question-edit-form/question-edit-form.component.scss
+++ b/src/web/app/components/question-edit-form/question-edit-form.component.scss
@@ -6,6 +6,11 @@
   margin-right: 5px;
 }
 
+.question-details {
+  font-size: 0.875rem;
+  margin-bottom: 0;
+}
+
 .background-color-light-blue {
   background-color: #EAEFF5;
 }
diff --git a/src/web/app/components/visibility-panel/visibility-panel.component.html b/src/web/app/components/visibility-panel/visibility-panel.component.html
index da00ba78ae6..507aa2bf6d7 100644
--- a/src/web/app/components/visibility-panel/visibility-panel.component.html
+++ b/src/web/app/components/visibility-panel/visibility-panel.component.html
@@ -1,7 +1,7 @@
 <div class="margin-top-15px padding-15px" [ngClass]="{ 'background-color-light-green': !model.isQuestionHasResponses, 'alert alert-danger': model.isQuestionHasResponses }">
   <div>
     <div *ngIf="model.isQuestionHasResponses">
-      <h5>Changing the visibility after collecting responses is not recommended.</h5>
+      <p class="fs-6 fw-bold">Changing the visibility after collecting responses is not recommended.</p>
       <p>Reason: The existing responses were submitted under the 'promise' of a certain visibility and changing the visibility later 'breaks' that promise.</p>
     </div>
     <b [ngClass]="{ 'visibility-title': !model.isQuestionHasResponses }">Visibility</b> (Who can see the responses?)
diff --git a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
index b70c62d8fd4..514455113e2 100644
--- a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
+++ b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
@@ -1225,8 +1225,8 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
             class="card"
             id="question-form-1"
           >
-            <div
-              class="card-header bg-primary text-white cursor-pointer"
+            <button
+              class="card-header bg-primary text-white cursor-pointer border-0"
             >
               <div
                 class="collapse-caret"
@@ -1242,27 +1242,38 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                 </tm-panel-chevron>
               </div>
               <div
+                class="d-flex flex-column"
                 id="question-header"
               >
-                <strong>
-                  Question 
-                </strong>
-                <select
-                  class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
-                  id="question-number-dropdown"
+                <div
+                  class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
                 >
-                  <option
-                    value="0: 1"
+                  <h2
+                    class="question-details fw-bold"
                   >
-                    1
-                  </option>
-                  <option
-                    value="1: 2"
+                    Question 
+                    <select
+                      class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
+                      id="question-number-dropdown"
+                    >
+                      <option
+                        value="0: 1"
+                      >
+                        1
+                      </option>
+                      <option
+                        value="1: 2"
+                      >
+                        2
+                      </option>
+                    </select>
+                  </h2>
+                  <span
+                    class="text-start"
                   >
-                    2
-                  </option>
-                </select>
-                 Essay question 
+                    Essay question
+                  </span>
+                </div>
               </div>
               <div
                 class="card-header-btn-toolbar"
@@ -1311,7 +1322,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                   </button>
                 </div>
               </div>
-            </div>
+            </button>
             <div
               class="ng-trigger ng-trigger-collapseAnim ng-animating"
               style=""
@@ -1933,8 +1944,8 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
             class="card"
             id="question-form-2"
           >
-            <div
-              class="card-header bg-primary text-white cursor-pointer"
+            <button
+              class="card-header bg-primary text-white cursor-pointer border-0"
             >
               <div
                 class="collapse-caret"
@@ -1950,27 +1961,38 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                 </tm-panel-chevron>
               </div>
               <div
+                class="d-flex flex-column"
                 id="question-header"
               >
-                <strong>
-                  Question 
-                </strong>
-                <select
-                  class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
-                  id="question-number-dropdown"
+                <div
+                  class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
                 >
-                  <option
-                    value="0: 1"
+                  <h2
+                    class="question-details fw-bold"
                   >
-                    1
-                  </option>
-                  <option
-                    value="1: 2"
+                    Question 
+                    <select
+                      class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
+                      id="question-number-dropdown"
+                    >
+                      <option
+                        value="0: 1"
+                      >
+                        1
+                      </option>
+                      <option
+                        value="1: 2"
+                      >
+                        2
+                      </option>
+                    </select>
+                  </h2>
+                  <span
+                    class="text-start"
                   >
-                    2
-                  </option>
-                </select>
-                 Essay question 
+                    Essay question
+                  </span>
+                </div>
               </div>
               <div
                 class="card-header-btn-toolbar"
@@ -2019,7 +2041,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                   </button>
                 </div>
               </div>
-            </div>
+            </button>
             <div
               class="ng-trigger ng-trigger-collapseAnim ng-animating"
               style=""
@@ -3763,8 +3785,8 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
         class="card"
         id="question-form-0"
       >
-        <div
-          class="card-header bg-primary text-white cursor-pointer"
+        <button
+          class="card-header bg-primary text-white cursor-pointer border-0"
         >
           <div
             class="collapse-caret"
@@ -3780,22 +3802,33 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
             </tm-panel-chevron>
           </div>
           <div
+            class="d-flex flex-column"
             id="question-header"
           >
-            <strong>
-              Question 
-            </strong>
-            <select
-              class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
-              id="question-number-dropdown"
+            <div
+              class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
             >
-              <option
-                value="0: 1"
+              <h2
+                class="question-details fw-bold"
               >
-                1
-              </option>
-            </select>
-             Essay question 
+                Question 
+                <select
+                  class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
+                  id="question-number-dropdown"
+                >
+                  <option
+                    value="0: 1"
+                  >
+                    1
+                  </option>
+                </select>
+              </h2>
+              <span
+                class="text-start"
+              >
+                Essay question
+              </span>
+            </div>
           </div>
           <div
             class="card-header-btn-toolbar"
@@ -3812,7 +3845,7 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
               </button>
             </div>
           </div>
-        </div>
+        </button>
         <div
           class="ng-trigger ng-trigger-collapseAnim ng-animating"
           style=""

From 3af82415525fe9c49bc1e68fd4df513535b55dd3 Mon Sep 17 00:00:00 2001
From: jasonqiu212 <jason_qiu@hotmail.com>
Date: Mon, 20 Mar 2023 15:15:28 +0800
Subject: [PATCH 2/3] Fix tests

---
 .../question-edit-form.component.spec.ts.snap |  8 +++----
 .../question-edit-form.component.html         |  8 +++----
 .../question-edit-form.component.scss         |  4 ++--
 ...r-session-edit-page.component.spec.ts.snap | 24 +++++++------------
 4 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
index de4cc46e924..28b29136543 100644
--- a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
+++ b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
@@ -49,14 +49,14 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
         </tm-panel-chevron>
       </div>
       <div
-        class="d-flex flex-column"
+        class="d-flex flex-column text-start"
         id="question-header"
       >
         <div
           class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
         >
           <h2
-            class="question-details fw-bold"
+            class="question-number fw-bold"
           >
             Question 
             <span
@@ -65,9 +65,7 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
               0 
             </span>
           </h2>
-          <span
-            class="text-start"
-          >
+          <span>
             Essay question
           </span>
         </div>
diff --git a/src/web/app/components/question-edit-form/question-edit-form.component.html b/src/web/app/components/question-edit-form/question-edit-form.component.html
index bf7e6ae3ee5..76fc4954580 100644
--- a/src/web/app/components/question-edit-form/question-edit-form.component.html
+++ b/src/web/app/components/question-edit-form/question-edit-form.component.html
@@ -3,17 +3,17 @@
     <div class="collapse-caret">
       <tm-panel-chevron [isExpanded]="!model.isCollapsed"></tm-panel-chevron>
     </div>
-    <div id="question-header" class="d-flex flex-column">
+    <div id="question-header" class="d-flex flex-column text-start">
       <div class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start">
-        <h2 class="question-details fw-bold">Question <span id="question-number" *ngIf="!model.isEditable">{{ model.questionNumber }}&nbsp;</span>
+        <h2 class="question-number fw-bold">Question <span id="question-number" *ngIf="!model.isEditable">{{ model.questionNumber }}&nbsp;</span>
           <select id="question-number-dropdown" class="form-control form-select question-number-select" [ngModel]="model.questionNumber" (ngModelChange)="triggerModelChange('questionNumber', $event)" *ngIf="model.isEditable" (click)="$event.stopPropagation()">
             <option *ngFor="let i of range(numOfQuestions)" [ngValue]="i + 1">{{ i + 1 }}</option>
           </select>
         </h2>
-      <span class="text-start">{{ model.questionType | questionTypeName }}</span>
+      <span>{{ model.questionType | questionTypeName }}</span>
       </div>
       <ng-container *ngIf="model.isCollapsed">
-        <div class="collapse-qn-description text-start">{{ model.questionBrief }}</div>
+        <div class="collapse-qn-description">{{ model.questionBrief }}</div>
       </ng-container>
     </div>
     <div class="card-header-btn-toolbar">
diff --git a/src/web/app/components/question-edit-form/question-edit-form.component.scss b/src/web/app/components/question-edit-form/question-edit-form.component.scss
index a41b52ccdf5..297cdb9a467 100644
--- a/src/web/app/components/question-edit-form/question-edit-form.component.scss
+++ b/src/web/app/components/question-edit-form/question-edit-form.component.scss
@@ -6,8 +6,8 @@
   margin-right: 5px;
 }
 
-.question-details {
-  font-size: 0.875rem;
+.question-number {
+  font-size: .875rem;
   margin-bottom: 0;
 }
 
diff --git a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
index 514455113e2..1b1f7938c03 100644
--- a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
+++ b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
@@ -1242,14 +1242,14 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                 </tm-panel-chevron>
               </div>
               <div
-                class="d-flex flex-column"
+                class="d-flex flex-column text-start"
                 id="question-header"
               >
                 <div
                   class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
                 >
                   <h2
-                    class="question-details fw-bold"
+                    class="question-number fw-bold"
                   >
                     Question 
                     <select
@@ -1268,9 +1268,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                       </option>
                     </select>
                   </h2>
-                  <span
-                    class="text-start"
-                  >
+                  <span>
                     Essay question
                   </span>
                 </div>
@@ -1961,14 +1959,14 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                 </tm-panel-chevron>
               </div>
               <div
-                class="d-flex flex-column"
+                class="d-flex flex-column text-start"
                 id="question-header"
               >
                 <div
                   class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
                 >
                   <h2
-                    class="question-details fw-bold"
+                    class="question-number fw-bold"
                   >
                     Question 
                     <select
@@ -1987,9 +1985,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                       </option>
                     </select>
                   </h2>
-                  <span
-                    class="text-start"
-                  >
+                  <span>
                     Essay question
                   </span>
                 </div>
@@ -3802,14 +3798,14 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
             </tm-panel-chevron>
           </div>
           <div
-            class="d-flex flex-column"
+            class="d-flex flex-column text-start"
             id="question-header"
           >
             <div
               class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
             >
               <h2
-                class="question-details fw-bold"
+                class="question-number fw-bold"
               >
                 Question 
                 <select
@@ -3823,9 +3819,7 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
                   </option>
                 </select>
               </h2>
-              <span
-                class="text-start"
-              >
+              <span>
                 Essay question
               </span>
             </div>

From 9d38b07db070d92e3a4eefc2246184fca33f994d Mon Sep 17 00:00:00 2001
From: jasonqiu212 <jason_qiu@hotmail.com>
Date: Thu, 23 Mar 2023 22:42:05 +0800
Subject: [PATCH 3/3] Fix e2e tests

---
 .../InstructorFeedbackEditPage.java            |  3 +--
 .../question-edit-form.component.spec.ts.snap  |  8 +++++---
 .../question-edit-form.component.html          |  4 ++--
 ...or-session-edit-page.component.spec.ts.snap | 18 ++++++++++++------
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
index 5761bbe5e39..4ada9f7d5a0 100644
--- a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
+++ b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
@@ -972,8 +972,7 @@ private WebElement getQuestionForm(int questionNum) {
     }
 
     private FeedbackQuestionType getQuestionType(int questionNum) {
-        String questionDetails = getQuestionForm(questionNum).findElement(By.id("question-header")).getText();
-        String questionType = questionDetails.split(" \\d+ ")[1].trim();
+        String questionType = getQuestionForm(questionNum).findElement(By.id("question-type")).getText().trim();
 
         switch (questionType) {
         case "Essay question":
diff --git a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
index 28b29136543..9df6a672596 100644
--- a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
+++ b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
@@ -56,16 +56,18 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
           class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
         >
           <h2
-            class="question-number fw-bold"
+            class="question-number fw-bold me-1"
           >
             Question 
             <span
               id="question-number"
             >
-              0 
+              0
             </span>
           </h2>
-          <span>
+          <span
+            id="question-type"
+          >
             Essay question
           </span>
         </div>
diff --git a/src/web/app/components/question-edit-form/question-edit-form.component.html b/src/web/app/components/question-edit-form/question-edit-form.component.html
index 76fc4954580..0f1e5e2e8c6 100644
--- a/src/web/app/components/question-edit-form/question-edit-form.component.html
+++ b/src/web/app/components/question-edit-form/question-edit-form.component.html
@@ -5,12 +5,12 @@
     </div>
     <div id="question-header" class="d-flex flex-column text-start">
       <div class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start">
-        <h2 class="question-number fw-bold">Question <span id="question-number" *ngIf="!model.isEditable">{{ model.questionNumber }}&nbsp;</span>
+        <h2 class="question-number fw-bold me-1">Question <span id="question-number" *ngIf="!model.isEditable">{{ model.questionNumber }}</span>
           <select id="question-number-dropdown" class="form-control form-select question-number-select" [ngModel]="model.questionNumber" (ngModelChange)="triggerModelChange('questionNumber', $event)" *ngIf="model.isEditable" (click)="$event.stopPropagation()">
             <option *ngFor="let i of range(numOfQuestions)" [ngValue]="i + 1">{{ i + 1 }}</option>
           </select>
         </h2>
-      <span>{{ model.questionType | questionTypeName }}</span>
+      <span id="question-type">{{ model.questionType | questionTypeName }}</span>
       </div>
       <ng-container *ngIf="model.isCollapsed">
         <div class="collapse-qn-description">{{ model.questionBrief }}</div>
diff --git a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
index 1b1f7938c03..0125cd02c30 100644
--- a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
+++ b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
@@ -1249,7 +1249,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                   class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
                 >
                   <h2
-                    class="question-number fw-bold"
+                    class="question-number fw-bold me-1"
                   >
                     Question 
                     <select
@@ -1268,7 +1268,9 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                       </option>
                     </select>
                   </h2>
-                  <span>
+                  <span
+                    id="question-type"
+                  >
                     Essay question
                   </span>
                 </div>
@@ -1966,7 +1968,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                   class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
                 >
                   <h2
-                    class="question-number fw-bold"
+                    class="question-number fw-bold me-1"
                   >
                     Question 
                     <select
@@ -1985,7 +1987,9 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                       </option>
                     </select>
                   </h2>
-                  <span>
+                  <span
+                    id="question-type"
+                  >
                     Essay question
                   </span>
                 </div>
@@ -3805,7 +3809,7 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
               class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
             >
               <h2
-                class="question-number fw-bold"
+                class="question-number fw-bold me-1"
               >
                 Question 
                 <select
@@ -3819,7 +3823,9 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
                   </option>
                 </select>
               </h2>
-              <span>
+              <span
+                id="question-type"
+              >
                 Essay question
               </span>
             </div>