From 0ca6127fb91e5c3218ca3a04f751b996b994c265 Mon Sep 17 00:00:00 2001
From: NeoHW <neohaowei@gmail.com>
Date: Mon, 15 Jul 2024 03:07:20 +0800
Subject: [PATCH] Make button separated from rubric table

---
 ...c-question-edit-answer-form.component.html | 93 ++++++++++---------
 ...c-question-edit-answer-form.component.scss |  9 ++
 2 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.html b/src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.html
index 2a7d9a6149b..feb16572466 100644
--- a/src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.html
+++ b/src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.html
@@ -1,58 +1,63 @@
-<table class="table table-bordered desktop-view" [attr.aria-label]="getAriaLabel()">
-  <thead>
-    <tr>
-      <td></td>
-      <th *ngFor="let choice of questionDetails.rubricChoices" scope="col">{{ choice }}</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let rubricDescriptionRow of questionDetails.rubricDescriptions; let i = index;"
-        [ngClass]="{ 'row-answered': i < responseDetails.answer.length && responseDetails.answer[i] !== RUBRIC_ANSWER_NOT_CHOSEN }">
-      <th class="fw-normal" scope="row">{{ questionDetails.rubricSubQuestions[i] }}</th>
-      <td *ngFor="let rubricDescriptionCell of rubricDescriptionRow; let j = index;" class="text-secondary answer-cell" (click)="selectAnswer(i, j)">
-        <input
-          type="radio"
-          [disabled]="isDisabled"
-          [name]="getInputId(id, i, j, 'desktop')"
-          [id]="getInputId(id, i, j, 'desktop')"
-          [checked]="i < responseDetails.answer.length && responseDetails.answer[i] === j"
-        />
-        <label [for]="getInputId(id, i, j, 'desktop')" (click)="$event.stopPropagation()">
-          {{ rubricDescriptionCell }}
-        </label>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<div class="mobile-view" [attr.aria-label]="getAriaLabel()">
-  <div class="card" *ngFor="let rubricDescriptionRow of questionDetails.rubricDescriptions; let i = index;">
-    <div class="card-header bg-light">
-      {{ questionDetails.rubricSubQuestions[i] }}
-    </div>
-    <div class="card-body"
-         [ngClass]="{ 'row-answered': i < responseDetails.answer.length && responseDetails.answer[i] !== RUBRIC_ANSWER_NOT_CHOSEN }">
-      <div *ngFor="let rubricDescriptionCell of rubricDescriptionRow; let j = index;">
-        <label>
+<div class="table-container">
+  <table class="table table-bordered desktop-view" [attr.aria-label]="getAriaLabel()">
+    <thead>
+      <tr>
+        <td></td>
+        <th *ngFor="let choice of questionDetails.rubricChoices" scope="col">{{ choice }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let rubricDescriptionRow of questionDetails.rubricDescriptions; let i = index;"
+          [ngClass]="{ 'row-answered': i < responseDetails.answer.length && responseDetails.answer[i] !== RUBRIC_ANSWER_NOT_CHOSEN }">
+        <th class="fw-normal" scope="row">{{ questionDetails.rubricSubQuestions[i] }}</th>
+        <td *ngFor="let rubricDescriptionCell of rubricDescriptionRow; let j = index;" class="text-secondary answer-cell" (click)="selectAnswer(i, j)">
           <input
             type="radio"
             [disabled]="isDisabled"
-            (click)="selectAnswer(i, j)"
-            [name]="getInputId(id, i, j, 'mobile')"
+            [name]="getInputId(id, i, j, 'desktop')"
+            [id]="getInputId(id, i, j, 'desktop')"
             [checked]="i < responseDetails.answer.length && responseDetails.answer[i] === j"
-            [attr.aria-label]="getAriaLabelForChoice(questionDetails.rubricChoices[j], rubricDescriptionCell, questionDetails.rubricSubQuestions[i])"
-          >
-          {{ getChoiceWithDescription(questionDetails.rubricChoices[j], rubricDescriptionCell) }}
-        </label>
+          />
+          <label [for]="getInputId(id, i, j, 'desktop')" (click)="$event.stopPropagation()">
+            {{ rubricDescriptionCell }}
+          </label>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="mobile-view" [attr.aria-label]="getAriaLabel()">
+    <div class="card" *ngFor="let rubricDescriptionRow of questionDetails.rubricDescriptions; let i = index;">
+      <div class="card-header bg-light">
+        {{ questionDetails.rubricSubQuestions[i] }}
+      </div>
+      <div class="card-body"
+           [ngClass]="{ 'row-answered': i < responseDetails.answer.length && responseDetails.answer[i] !== RUBRIC_ANSWER_NOT_CHOSEN }">
+        <div *ngFor="let rubricDescriptionCell of rubricDescriptionRow; let j = index;">
+          <label>
+            <input
+              type="radio"
+              [disabled]="isDisabled"
+              (click)="selectAnswer(i, j)"
+              [name]="getInputId(id, i, j, 'mobile')"
+              [checked]="i < responseDetails.answer.length && responseDetails.answer[i] === j"
+              [attr.aria-label]="getAriaLabelForChoice(questionDetails.rubricChoices[j], rubricDescriptionCell, questionDetails.rubricSubQuestions[i])"
+            >
+            {{ getChoiceWithDescription(questionDetails.rubricChoices[j], rubricDescriptionCell) }}
+          </label>
+        </div>
       </div>
     </div>
   </div>
 </div>
-<button
+
+<div class="button-container">
+  <button
     type="button"
     title="Reset choices"
     id="btn-reset"
     name="button-reset"
     class="btn btn-secondary"
     (click)="confirmReset()">
-  Reset choices
-</button>
\ No newline at end of file
+    Reset choices
+  </button>
+</div>
\ No newline at end of file
diff --git a/src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.scss b/src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.scss
index 8dedeab443a..d5664b0b04b 100644
--- a/src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.scss
+++ b/src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.scss
@@ -17,3 +17,12 @@
     display: none;
   }
 }
+
+.table-container {
+  margin-bottom: 1.25em;
+}
+
+.button-container {
+  display: flex;
+  justify-content: flex-end;
+}