Merge pull request #4529 from crazyserver/MOBILE-4858

MOBILE-4858 quiz: Add certainty help button and alert

Author: albertgasset

scripts/langindex.json

@@ -2378,6 +2378,7 @@
   "core.question.answersaved": "question",
   "core.question.cannotdeterminestatus": "local_moodlemobileapp",
   "core.question.certainty": "qbehaviour_deferredcbm",
+  "core.question.certainty_help": "qbehaviour_deferredcbm",
   "core.question.complete": "question",
   "core.question.correct": "question",
   "core.question.errorattachmentsnotsupportedinsite": "local_moodlemobileapp",
@@ -2722,7 +2723,7 @@
   "core.viewer.readingthemehcm": "local_moodlemobileapp",
   "core.viewer.readingthemelight": "local_moodlemobileapp",
   "core.viewer.readingthemesepia": "local_moodlemobileapp",
-  "core.viewer.rotateleft": "h5p",
+  "core.viewer.rotateleft": "h5p/rotateLeft",
   "core.viewer.showmedia": "zoom",
   "core.viewer.theme": "moodle",
   "core.viewprofile": "moodle",

src/addons/qbehaviour/deferredcbm/component/addon-qbehaviour-deferredcbm.html

@@ -1,17 +1,31 @@
 @if (question && question.behaviourCertaintyOptions && question.behaviourCertaintyOptions.length) {
     <div>
         <ion-item class="ion-text-wrap addon-qbehaviour-deferredcbm-certainty-title">
-            <ion-label>
-                <p>{{ 'core.question.certainty' | translate }}</p>
+            <ion-label class="ion-no-margin">
+                <ion-row class="ion-align-items-center">
+                    <ion-col size="auto" class="ion-no-padding">
+                        <p class="item-heading">
+                            {{ 'core.question.certainty' | translate }}
+                        </p>
+                    </ion-col>
+                    <ion-col class="ion-no-padding">
+                        <ion-button class="addon-qbehaviour-deferredcbm-certainty-help-button" fill="clear"
+                            (click)="showCertaintyHelp()" [ariaLabel]="'core.help' | translate">
+                            <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
+                        </ion-button>
+                    </ion-col>
+                </ion-row>
             </ion-label>
         </ion-item>
 
         <ion-radio-group [(ngModel)]="question.behaviourCertaintySelected" [name]="question.behaviourCertaintyOptions[0].name">
-            <ion-item class="ion-text-wrap" *ngFor="let option of question.behaviourCertaintyOptions">
-                <ion-radio id="{{option.id}}" [value]="option.value" [disabled]="option.disabled">
-                    {{ option.text }}
-                </ion-radio>
-            </ion-item>
+            @for (option of question.behaviourCertaintyOptions; track option.id) {
+                <ion-item class="ion-text-wrap">
+                    <ion-radio id="{{option.id}}" [value]="option.value" [disabled]="option.disabled">
+                        {{ option.text }}
+                    </ion-radio>
+                </ion-item>
+            }
         </ion-radio-group>
 
         <!-- ion-radio doesn't use an input. Create a hidden input to hold the selected value. -->

src/addons/qbehaviour/deferredcbm/component/deferredcbm.ts

@@ -18,6 +18,9 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 import { CoreQuestionBehaviourButton, CoreQuestionQuestion } from '@features/question/services/question-helper';
 import { CoreSharedModule } from '@/core/shared.module';
+import { CoreAlerts } from '@services/overlays/alerts';
+import { Translate } from '@singletons';
+import { CoreMarkdown } from '@singletons/markdown';
 
 /**
  * Component to render the deferred CBM in a question.
@@ -44,4 +47,15 @@ export class AddonQbehaviourDeferredCBMComponent {
     @Output() buttonClicked = new EventEmitter<CoreQuestionBehaviourButton>(); // Will emit when a behaviour button is clicked.
     @Output() onAbort = new EventEmitter<void>(); // Should emit an event if the question should be aborted.
 
+    /**
+     * Show help modal.
+     */
+    showCertaintyHelp(): void {
+        const message = Translate.instant('core.question.certainty_help');
+
+        CoreAlerts.show({
+            message: CoreMarkdown.toHtml(message),
+        });
+    }
+
 }

src/core/features/question/lang.json

@@ -3,6 +3,7 @@
     "answersaved": "Answer saved",
     "cannotdeterminestatus": "Cannot determine status",
     "certainty": "Certainty",
+    "certainty_help": "Certainty-based marking requires you to indicate how reliable you think your answer is. The available levels are:\n\nCertainty level     | C=1 (Unsure) | C=2 (Mid) | C=3 (Quite sure)\n------------------- | ------------ | --------- | ----------------\nMark if correct     |   1          |    2      |      3\nMark if wrong       |   0          |   -2      |     -6\nProbability correct |  <67%        | 67-80%    |    >80%\n\nBest marks are gained by acknowledging uncertainty. For example, if you think there is more than a 1 in 3 chance of being wrong, you should enter C=1 and avoid the risk of a negative mark.",
     "complete": "Complete",
     "correct": "Correct",
     "errorattachmentsnotsupportedinsite": "Your site doesn't support attaching files to answers yet.",

src/core/singletons/markdown.ts

@@ -0,0 +1,96 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * Singleton with helper functions for markdown formatting.
+ */
+export class CoreMarkdown {
+
+    // Avoid creating singleton instances.
+    private constructor() {
+        // Nothing to do.
+    }
+
+    /**
+     * Converts Markdown text to HTML, handling only line breaks and tables.
+     *
+     * @param markdown - Markdown-formatted text.
+     * @returns HTML string.
+     */
+    static toHtml(markdown: string): string {
+        const lines = markdown.trim().split('\n');
+        const htmlLines: string[] = [];
+
+        let inTable = false;
+        let tableHeaderParsed = false;
+        let inTbody = false;
+
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i].trim();
+            const isTableRow = line.includes('|');
+            const isSeparatorRow = /^[:\-| ]+$/.test(line);
+
+            if (isTableRow && !isSeparatorRow) {
+                const cells = line.split('|').map(cell => cell.trim()).filter(Boolean);
+
+                if (!inTable) {
+                    htmlLines.push('<table class="core-table">');
+                    inTable = true;
+                    tableHeaderParsed = false;
+                    inTbody = false;
+                }
+
+                if (!tableHeaderParsed) {
+                    // Start the table header
+                    htmlLines.push('<thead>');
+                    htmlLines.push('<tr>' + cells.map(cell => `<th>${cell}</th>`).join('') + '</tr>');
+                    htmlLines.push('</thead>');
+                    tableHeaderParsed = true;
+                } else {
+                    // Start tbody if not already started
+                    if (!inTbody) {
+                        htmlLines.push('<tbody class="auto-striped">');
+                        inTbody = true;
+                    }
+                    htmlLines.push('<tr>' + cells.map(cell => `<td>${cell}</td>`).join('') + '</tr>');
+                }
+            } else if (isSeparatorRow) {
+                continue; // Skip separator like | --- | --- |
+            } else {
+                // If we were in a table, close it
+                if (inTable) {
+                    if (inTbody) {
+                        htmlLines.push('</tbody>');
+                    }
+                    htmlLines.push('</table>');
+                    inTable = false;
+                    inTbody = false;
+                }
+
+                htmlLines.push(`${line}<br>`);
+            }
+        }
+
+        // Close open table if still active
+        if (inTable) {
+            if (inTbody) {
+                htmlLines.push('</tbody>');
+            }
+            htmlLines.push('</table>');
+        }
+
+        return htmlLines.join('\n');
+    }
+
+}