Merge pull request ecampbell#21 from dpalou/ionic5

Adapt mobile app code to Ionic 5 + fix question in Moodle 3.11

classes/output/mobile.php

@@ -38,10 +38,15 @@ class mobile {
     /**
      * Returns the All-or-Nothing question type for the quiz in the mobile app.
      *
+     * @param  array $args Arguments from tool_mobile_get_content WS
      * @return void
      */
-    public static function mobile_get_multichoiceset() {
+    public static function mobile_get_multichoiceset($args) {
         global $CFG;
+
+        $args = (object) $args;
+        $versionname = $args->appversioncode >= 3950 ? 'latest' : 'ionic3';
+
         // General notes:
         // If you have worked on mobile activities, there is no cmid or courseid in $args here.
         // This is not equivalent to mod/quiz/attempt.php?attempt=57&cmid=147, rather
@@ -50,7 +55,7 @@ public static function mobile_get_multichoiceset() {
         return [
             'templates' => [[
                 'id' => 'main',
-                'html' => file_get_contents($CFG->dirroot . '/question/type/multichoiceset/mobile/multichoiceset.html')
+                'html' => file_get_contents($CFG->dirroot . "/question/type/multichoiceset/mobile/multichoiceset_$versionname.html")
             ]],
             'javascript' => file_get_contents($CFG->dirroot . '/question/type/multichoiceset/mobile/multichoiceset.js')
         ];

mobile/multichoiceset.js

@@ -22,7 +22,6 @@ var result = {
         // Replace Moodle's correct/incorrect classes, feedback and icons with mobile versions.
         that.CoreQuestionHelperProvider.replaceCorrectnessClasses(div);
         that.CoreQuestionHelperProvider.replaceFeedbackClasses(div);
-        that.CoreQuestionHelperProvider.treatCorrectnessIcons(div);
 
         // Get useful parts of the provided question html data.
         var questiontext = div.querySelector('.qtext');
@@ -43,13 +42,25 @@ var result = {
         var divs = answeroptions.querySelectorAll('div[class^=r]'); // Only get the answer options divs (class="r0...").
         divs.forEach(function(d, i) {
             // Each answer option contains all the data for presentation, it just needs extracting.
-            var label = d.querySelector('label').innerHTML;
-            var name = d.querySelector('label').getAttribute('for');
-            var checked = (d.querySelector('input[type=checkbox]').getAttribute('checked') ? true : false);
+            var checkbox = d.querySelector('input[type=checkbox]');
+            var feedbackDiv = d.querySelector('div.core-question-feedback-container');
+            var labelId = checkbox.getAttribute('aria-labelledby');
+            var labelElement = labelId ? d.querySelector('#' + labelId.replace(/:/g, '\\:')) : undefined;
+            if (!labelElement) {
+                // Not found, use the format used in older Moodle versions.
+                labelElement = d.querySelector('label');
+            }
+
+            var label = labelElement.innerHTML;
+            var name = checkbox.getAttribute('name');
+            var checked = (checkbox.getAttribute('checked') ? true : false);
             var disabled = (d.querySelector('input').getAttribute('disabled') === 'disabled' ? true : false);
-            var feedback = (d.querySelector('div') ? d.querySelector('div').innerHTML : '');
-            var qclass = d.getAttribute('class');
-            options.push({text: label, name: name, checked: checked, disabled: disabled, feedback: feedback, qclass: qclass});
+            var feedback = (feedbackDiv ? feedbackDiv.innerHTML : '');
+            var qclass = d.getAttribute('class') || '';
+            var iscorrect = qclass.indexOf('core-question-answer-correct') >= 0 ? 1 :
+                (qclass.indexOf('core-question-answer-incorrect') >= 0 ? 0 : undefined);
+            options.push({text: label, name: name, checked: checked, disabled: disabled, feedback: feedback, qclass: qclass,
+                iscorrect: iscorrect});
         });
         this.question.options = options;
 

mobile/multichoiceset_latest.html

@@ -0,0 +1,29 @@
+<section *ngIf="question.text || question.text === ''" class="qtype-multichoiceset">
+    <ion-item class="ion-text-wrap">
+        <ion-label>
+            <p>
+                <core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text>
+            </p>
+            <p *ngIf="question.prompt">
+                <core-format-text [component]="component" [componentId]="componentId" [text]="question.prompt"></core-format-text>
+            </p>
+        </ion-label>
+    </ion-item>
+    <ion-item *ngFor="let option of question.options" class="ion-text-wrap {{option.qclass}}">
+        <ion-label>
+            <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"></core-format-text>
+            <p *ngIf="option.feedback" class="core-question-feedback-container">
+                <core-format-text [text]="option.feedback"></core-format-text>
+            </p>
+        </ion-label>
+        <ion-checkbox [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled"
+                slot="end"></ion-checkbox>
+
+        <ion-icon *ngIf="option.iscorrect === 1" class="core-correct-icon" name="fas-check" color="success"
+                [attr.aria-label]="'core.question.correct' | translate"></ion-icon>
+        <ion-icon *ngIf="option.iscorrect === 0" class="core-correct-icon" name="fas-times" color="danger"
+            [attr.aria-label]="'core.question.incorrect' | translate"></ion-icon>
+        <!-- ion-checkbox doesn't use an input. Create a hidden input to hold the value. -->
+        <input type="hidden" [ngModel]="option.checked" [attr.name]="option.name">
+    </ion-item>
+</section>