From b6175c46b6d63ee3d415663227b5e2883d14857a Mon Sep 17 00:00:00 2001
From: Nikhil <nikhil.agarwal.2019@gmail.com>
Date: Tue, 1 Oct 2024 22:25:43 +0530
Subject: [PATCH] Fixes correctness footer issue in diagnostic test (#20984)

* Fixes correctness footer issue.

* Updates variable name.

* Adds banner, updates css

* Fixes frontend tests
---
 .../diagnostic-test-player.component.html      | 18 ++++++++++++------
 .../diagnostic-test-player.component.spec.ts   | 14 --------------
 .../diagnostic-test-player.component.ts        | 10 ++++------
 .../conversation-skin.component.ts             |  9 +++++++--
 4 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.html b/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.html
index 8f3ac3f056c2..1a7e63326b1a 100644
--- a/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.html
+++ b/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.html
@@ -1,4 +1,5 @@
-<div class="diagnostic-test-container">
+<background-banner></background-banner>
+<div class="diagnostic-test-container position-relative">
   <div class="oppia-diagnostic-test-page-header">
     <button class="btn oppia-back-to-classroom-button">
       <a class="oppia-anchor-tag-under-button" [href]="'/learn/' + classroomUrlFragment">
@@ -112,15 +113,16 @@ <h3 class="oppia-no-recommendation-header-text">
   .oppia-diagnostic-test-page-header {
     align-items: center;
     display: flex;
-    margin: 3%;
+    justify-content: center;
+    padding: 3% 3% 0 3%;
+    position: relative;
   }
   .oppia-back-to-classroom-button {
-    align-items: center;
     background-color: #00645c;
     color: #fff;
-    display: flex;
-    float: right;
     font-family: "Capriola", "Roboto", Arial, sans-serif;
+    left: 5%;
+    position: absolute;
     text-transform: uppercase;
   }
   .oppia-back-button-text-class {
@@ -260,7 +262,11 @@ <h3 class="oppia-no-recommendation-header-text">
   @media(max-width: 500px) {
     .oppia-introductory-card {
       margin-left: auto;
-      width: 100%;
+      width: 90%;
+    }
+    .oppia-back-to-classroom-button {
+      left: 1%;
+      position: relative;
     }
     .oppia-image {
       align-items: center;
diff --git a/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.spec.ts b/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.spec.ts
index d80bada041f9..6f57c9912992 100644
--- a/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.spec.ts
+++ b/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.spec.ts
@@ -210,20 +210,6 @@ describe('Diagnostic test player component', () => {
     );
   });
 
-  it("should be able to get Oppia's avatar image URL after initialization", () => {
-    windowRef.nativeWindow.location.search = '?classroom=math';
-    spyOn(preventPageUnloadEventService, 'addListener');
-
-    expect(component.OPPIA_AVATAR_IMAGE_URL).toEqual('');
-
-    const avatarImageLocation =
-      '/assets/copyrighted-images/avatar/oppia_avatar_100px.svg';
-
-    component.ngOnInit();
-
-    expect(component.OPPIA_AVATAR_IMAGE_URL).toEqual(avatarImageLocation);
-  });
-
   it('should get classroomData after initialization', fakeAsync(() => {
     windowRef.nativeWindow.location.search = '?classroom=math';
 
diff --git a/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.ts b/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.ts
index 1a03ed471eb5..b5080db31076 100644
--- a/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.ts
+++ b/core/templates/pages/diagnostic-test-player-page/diagnostic-test-player.component.ts
@@ -37,7 +37,10 @@ import {AlertsService} from 'services/alerts.service';
   templateUrl: './diagnostic-test-player.component.html',
 })
 export class DiagnosticTestPlayerComponent implements OnInit {
-  OPPIA_AVATAR_IMAGE_URL: string = '';
+  OPPIA_AVATAR_IMAGE_URL: string =
+    this.urlInterpolationService.getStaticCopyrightedImageUrl(
+      '/avatar/oppia_avatar_100px.svg'
+    );
   diagnosticTestTopicTrackerModel!: DiagnosticTestTopicTrackerModel;
   diagnosticTestIsStarted: boolean = false;
   diagnosticTestIsFinished = false;
@@ -81,11 +84,6 @@ export class DiagnosticTestPlayerComponent implements OnInit {
       return this.diagnosticTestIsStarted && !this.diagnosticTestIsFinished;
     });
 
-    this.OPPIA_AVATAR_IMAGE_URL =
-      this.urlInterpolationService.getStaticCopyrightedImageUrl(
-        '/avatar/oppia_avatar_100px.svg'
-      );
-
     this.componentSubscription.add(
       this.diagnosticTestPlayerStatusService.onDiagnosticTestSessionCompleted.subscribe(
         (recommendedTopicIds: string[]) => {
diff --git a/core/templates/pages/exploration-player-page/learner-experience/conversation-skin.component.ts b/core/templates/pages/exploration-player-page/learner-experience/conversation-skin.component.ts
index cf94e650e80a..490d33dcb87b 100644
--- a/core/templates/pages/exploration-player-page/learner-experience/conversation-skin.component.ts
+++ b/core/templates/pages/exploration-player-page/learner-experience/conversation-skin.component.ts
@@ -135,6 +135,7 @@ export class ConversationSkinComponent {
   displayedCard: StateCard;
   upcomingInlineInteractionHtml;
   responseTimeout: NodeJS.Timeout | null = null;
+  correctnessFooterIsShown: boolean = true;
   DEFAULT_TWITTER_SHARE_MESSAGE_PLAYER =
     AppConstants.DEFAULT_TWITTER_SHARE_MESSAGE_EDITOR;
 
@@ -260,6 +261,7 @@ export class ConversationSkinComponent {
       this.navigationThroughCardHistoryIsEnabled = false;
       this.checkpointCelebrationModalIsEnabled = false;
       this.skipButtonIsShown = true;
+      this.correctnessFooterIsShown = false;
     }
 
     if (!this.contextService.isInExplorationPlayerPage()) {
@@ -456,7 +458,8 @@ export class ConversationSkinComponent {
       if (
         !this.isIframed &&
         !this._editorPreviewMode &&
-        !this.explorationPlayerStateService.isInQuestionPlayerMode()
+        !this.explorationPlayerStateService.isInQuestionPlayerMode() &&
+        !this.explorationPlayerStateService.isInDiagnosticTestPlayerMode()
       ) {
         // For the first state which is always a checkpoint.
         let firstStateName: string;
@@ -567,6 +570,7 @@ export class ConversationSkinComponent {
 
   isCorrectnessFooterEnabled(): boolean {
     return (
+      this.correctnessFooterIsShown &&
       this.answerIsCorrect &&
       this.playerPositionService.hasLearnerJustSubmittedAnAnswer()
     );
@@ -1147,7 +1151,8 @@ export class ConversationSkinComponent {
     if (
       !this.isIframed &&
       !this._editorPreviewMode &&
-      !this.explorationPlayerStateService.isInQuestionPlayerMode()
+      !this.explorationPlayerStateService.isInQuestionPlayerMode() &&
+      !this.explorationPlayerStateService.isInDiagnosticTestPlayerMode()
     ) {
       // Navigate the learner to the most recently reached checkpoint state.
       this._navigateToMostRecentlyReachedCheckpoint();