Merge pull request #3513 from dpalou/MOBILE-4081

Mobile 4081

Author: alfonso-salces

src/addons/mod/quiz/pages/player/player.html

@@ -52,7 +52,7 @@ <h2 *ngIf="!question.number" class="inline">{{ 'core.question.information' | tra
                         <div *ngIf="question.status || question.readableMark" slot="end"
                             class="ion-text-wrap ion-margin-horizontal addon-mod_quiz-question-note">
                             <p *ngIf="question.status" class="block">{{question.status}}</p>
-                            <p *ngIf="question.readableMark">{{ question.readableMark }}</p>
+                            <p *ngIf="question.readableMark" [innerHTML]="question.readableMark"></p>
                         </div>
                     </ion-item-divider>
 
@@ -149,19 +149,20 @@ <h3 class="item-heading">{{ 'addon.mod_quiz.cannotsubmitquizdueto' | translate }
             </ion-button>
         </ion-card>
 
-        <div collapsible-footer appearOnBottom *ngIf="!quizAborted && showSummary && summaryQuestions.length && loaded" slot="fixed"
-            class="list-item-limited-width">
-            <ion-button *ngIf="preventSubmitMessages.length" expand="block" class="ion-margin ion-text-wrap" [href]="moduleUrl" core-link
-                [showBrowserWarning]="false">
-                {{ 'core.openinbrowser' | translate }}
-                <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
-            </ion-button>
+        <div collapsible-footer appearOnBottom *ngIf="!quizAborted && showSummary && summaryQuestions.length && loaded" slot="fixed">
+            <div class="list-item-limited-width">
+                <ion-button *ngIf="preventSubmitMessages.length" expand="block" class="ion-margin ion-text-wrap" [href]="moduleUrl"
+                    core-link [showBrowserWarning]="false">
+                    {{ 'core.openinbrowser' | translate }}
+                    <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
+                </ion-button>
 
-            <!-- Button to submit the quiz. -->
-            <ion-button *ngIf="!attempt!.finishedOffline && !preventSubmitMessages.length" expand="block" class="ion-margin ion-text-wrap"
-                (click)="finishAttempt(true)">
-                {{ 'addon.mod_quiz.submitallandfinish' | translate }}
-            </ion-button>
+                <!-- Button to submit the quiz. -->
+                <ion-button *ngIf="!attempt!.finishedOffline && !preventSubmitMessages.length" expand="block"
+                    class="ion-margin ion-text-wrap" (click)="finishAttempt(true)">
+                    {{ 'addon.mod_quiz.submitallandfinish' | translate }}
+                </ion-button>
+            </div>
         </div>
     </core-loading>
 </ion-content>

src/addons/mod/quiz/pages/player/player.scss

@@ -13,15 +13,17 @@ $quiz-timer-iterations: 15 !default;
         border-bottom: 1px solid var(--stroke);
     }
 
-    core-timer .core-timer {
-        // Make the timer go red when it's reaching 0.
-        @for $i from 0 through $quiz-timer-iterations {
-            &.core-timer-timeleft-#{$i} {
-                background-color: rgba($quiz-timer-warn-color, 1 - ($i / $quiz-timer-iterations)) !important;
+    core-timer ::ng-deep {
+        .core-timer {
+            // Make the timer go red when it's reaching 0.
+            @for $i from 0 through $quiz-timer-iterations {
+                &.core-timer-timeleft-#{$i} {
+                    background-color: rgba($quiz-timer-warn-color, 1 - ($i / $quiz-timer-iterations)) !important;
 
-                @if $i <= $quiz-timer-iterations / 2 {
-                    label, span, ion-icon {
-                        color: var(--white);
+                    @if $i <= $quiz-timer-iterations / 2 {
+                        label, span, ion-icon {
+                            color: var(--white);
+                        }
                     }
                 }
             }

src/addons/mod/quiz/pages/review/review.html

@@ -92,7 +92,7 @@ <h2 *ngIf="!question.number">{{ 'core.question.information' | translate }}</h2>
                         <div class="ion-text-wrap ion-margin-horizontal addon-mod_quiz-question-note" slot="end"
                             *ngIf="question.status || question.readableMark">
                             <p *ngIf="question.status">{{question.status}}</p>
-                            <p *ngIf="question.readableMark">{{question.readableMark}}</p>
+                            <p *ngIf="question.readableMark" [innerHTML]="question.readableMark"></p>
                         </div>
                     </ion-item-divider>