Fix oppia#18697: Hints are absent in embedding. (oppia#19656)

Fix Hints in Iframe

Author: jnvtnguyen

core/templates/components/button-directives/hint-and-solution-buttons.component.html

@@ -26,7 +26,7 @@
       </button>
     </li>
   </ul>
-  <div class="hint-container" *ngIf="isVisible && isTooltipVisible()">
+  <div class="hint-container" *ngIf="isVisible && isTooltipVisible() && !iframed">
     <div class="hint-box hint-box-add-ons">
       <span [innerHTML]="'I18N_HINT_NEED_HELP' | translate"></span>
       <button type="button"
@@ -37,7 +37,8 @@
       </button>
     </div>
   </div>
-  <div class="hint-container solution-container" *ngIf="isTooltipForSolutionVisible && isSolutionTooltipVisible()">
+  <div class="hint-container solution-container"
+       *ngIf="isTooltipForSolutionVisible && isSolutionTooltipVisible() && !iframed">
     <div class="hint-box hint-box-add-ons">
       <span [innerHTML]="'I18N_SOLUTION_NEED_HELP' | translate"></span>
       <button type="button"

core/templates/components/button-directives/hint-and-solution-buttons.component.ts

@@ -28,6 +28,7 @@ import { StatsReportingService } from 'pages/exploration-player-page/services/st
 import { Subscription } from 'rxjs';
 import { ContextService } from 'services/context.service';
 import { I18nLanguageCodeService } from 'services/i18n-language-code.service';
+import { UrlService } from 'services/contextual/url.service';
 
 import './hint-and-solution-buttons.component.css';
 
@@ -48,6 +49,7 @@ export class HintAndSolutionButtonsComponent implements OnInit, OnDestroy {
   activeHintIndex!: number | null;
   displayedCard!: StateCard;
   hintIndexes: number[] = [];
+  iframed!: boolean;
   solutionModalIsActive: boolean = false;
   currentlyOnLatestCard: boolean = true;
   isVisible: boolean = true;
@@ -56,6 +58,7 @@ export class HintAndSolutionButtonsComponent implements OnInit, OnDestroy {
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private contextService: ContextService,
+    private urlService: UrlService,
     private explorationPlayerStateService: ExplorationPlayerStateService,
     private hintAndSolutionModalService: HintAndSolutionModalService,
     private hintsAndSolutionManagerService: HintsAndSolutionManagerService,
@@ -67,6 +70,7 @@ export class HintAndSolutionButtonsComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this._editorPreviewMode = this.contextService.isInExplorationEditorPage();
+    this.iframed = this.urlService.isIframed();
     this.resetLocalHintsArray();
     this.directiveSubscriptions.add(
       this.playerPositionService.onNewCardOpened.subscribe(

core/templates/pages/exploration-player-page/layout-directives/exploration-footer.component.html

@@ -1,4 +1,4 @@
-<div class="footer navbar-fixed-bottom oppia-exploration-footer" *ngIf="!iframed">
+<div class="footer navbar-fixed-bottom oppia-exploration-footer">
   <div *ngIf="shouldRenderLessonInfoTooltip()" aria-live="assertive">
     <div class="close-tooltip e2e-test-close-lesson-info-tooltip" (click)="learnerHasViewedLessonInfo()" (keydown.enter)="learnerHasViewedLessonInfo()" tabindex="0"></div>
     <div class="lesson-info-tooltip lesson-info-tooltip-add-ons"
@@ -11,7 +11,7 @@
               #lessonInfoButton
               (keydown.escape)="learnerHasViewedLessonInfo()"
               (click)="showInformationCard()"
-              *ngIf="!footerIsInQuestionPlayerMode">
+              *ngIf="!footerIsInQuestionPlayerMode && !iframed">
         <img [src]="getStaticImageUrl('/general/apple.svg')"
              class="exploration-footer-img"
              alt=""

core/templates/pages/exploration-player-page/modals/display-hint-modal.component.html

@@ -33,4 +33,9 @@
   .oppia-learner-got-it-button {
     float: right;
   }
+
+  .modal-body {
+    max-height: calc(85vh - 125px);
+    overflow-y: auto;
+  }
 </style>