From 61f0719c30a41428db48d57b520ad7ad61187929 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Fri, 9 Jul 2021 10:25:16 +0200 Subject: [PATCH 1/3] Adapt mobile app templates to Ionic 5 --- classes/output/mobile.php | 9 +++++-- ...iceset.html => multichoiceset_ionic3.html} | 0 mobile/multichoiceset_latest.html | 24 +++++++++++++++++++ 3 files changed, 31 insertions(+), 2 deletions(-) rename mobile/{multichoiceset.html => multichoiceset_ionic3.html} (100%) create mode 100644 mobile/multichoiceset_latest.html diff --git a/classes/output/mobile.php b/classes/output/mobile.php index 3dd386b..a93d821 100644 --- a/classes/output/mobile.php +++ b/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') ]; diff --git a/mobile/multichoiceset.html b/mobile/multichoiceset_ionic3.html similarity index 100% rename from mobile/multichoiceset.html rename to mobile/multichoiceset_ionic3.html diff --git a/mobile/multichoiceset_latest.html b/mobile/multichoiceset_latest.html new file mode 100644 index 0000000..a537998 --- /dev/null +++ b/mobile/multichoiceset_latest.html @@ -0,0 +1,24 @@ +
+ + +

+ +

+

+ +

+ + + + + +

+ +

+ + + + + +
From a5e9da7e50a082fcee0467e410113674dd49b036 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Fri, 9 Jul 2021 10:27:48 +0200 Subject: [PATCH 2/3] Fix question not rendered in app for Moodle 3.11 In Moodle 3.11 the option label uses a div element instead of a label element --- mobile/multichoiceset.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/mobile/multichoiceset.js b/mobile/multichoiceset.js index a3a57ef..68498e7 100644 --- a/mobile/multichoiceset.js +++ b/mobile/multichoiceset.js @@ -43,11 +43,20 @@ 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 feedback = (feedbackDiv ? feedbackDiv.innerHTML : ''); var qclass = d.getAttribute('class'); options.push({text: label, name: name, checked: checked, disabled: disabled, feedback: feedback, qclass: qclass}); }); From 0d699bc84b75f7a5784500d8b9b59af8b9f8e1b1 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Fri, 9 Jul 2021 11:23:12 +0200 Subject: [PATCH 3/3] Display correctness icon in mobile app --- mobile/multichoiceset.js | 8 +++++--- mobile/multichoiceset_latest.html | 5 +++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/mobile/multichoiceset.js b/mobile/multichoiceset.js index 68498e7..c35a3a5 100644 --- a/mobile/multichoiceset.js +++ b/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'); @@ -57,8 +56,11 @@ var result = { var checked = (checkbox.getAttribute('checked') ? true : false); var disabled = (d.querySelector('input').getAttribute('disabled') === 'disabled' ? true : false); var feedback = (feedbackDiv ? feedbackDiv.innerHTML : ''); - var qclass = d.getAttribute('class'); - options.push({text: label, name: name, checked: checked, disabled: disabled, feedback: feedback, qclass: qclass}); + 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; diff --git a/mobile/multichoiceset_latest.html b/mobile/multichoiceset_latest.html index a537998..4f923b3 100644 --- a/mobile/multichoiceset_latest.html +++ b/mobile/multichoiceset_latest.html @@ -18,6 +18,11 @@ + + +