reading component back arrow

src/app/reading/reading.component.html

@@ -87,7 +87,12 @@
     <div class="mcq-card" *ngIf="hasStarted && questions?.length">
       <div class="mcq-card__header">
 
-        <img src="assets/images/reading/back.png" alt="" class="icon-img" />
+        <img src="assets/images/reading/back.png"
+             alt="Back"
+             class="icon-img"
+             (click)="goToReadingPassage()"
+             tabindex="0"
+             (keydown.enter)="goToReadingPassage()" />
 
         <h3 class="mcq-card__title">Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}</h3>
         <div class="mcq-card__actions">

src/app/reading/reading.component.ts

@@ -482,4 +482,9 @@ export class ReadingComponent {
   private refreshGenerateQuestionsState(): void {
     this.isGenerateQuestionDisabled = !(this.content && this.content.trim().length > 0);
   }
+
+  goToReadingPassage(): void {
+    this.hasStarted = false;
+    this.refreshGenerateQuestionsState();
+  }
 }