MDL-67791 mod_h5pactivity: attempt report UI ajustments
authorFerran Recio <ferran@moodle.com>
Thu, 14 May 2020 14:45:08 +0000 (16:45 +0200)
committerFerran Recio <ferran@moodle.com>
Fri, 15 May 2020 10:38:28 +0000 (12:38 +0200)
mod/h5pactivity/classes/output/attempt.php
mod/h5pactivity/classes/output/reportresults.php
mod/h5pactivity/classes/output/result.php
mod/h5pactivity/classes/output/result/compound.php [deleted file]
mod/h5pactivity/lang/en/h5pactivity.php
mod/h5pactivity/templates/attempt.mustache
mod/h5pactivity/templates/result.mustache
mod/h5pactivity/templates/result/header.mustache
mod/h5pactivity/templates/result/options.mustache

index 7c51127..ac433b4 100644 (file)
@@ -86,8 +86,10 @@ class attempt implements renderable, templatable {
             'durationcompact' => '-',
             'completion' => $attempt->get_completion(),
             'completionicon' => $this->completion_icon($output, $attempt->get_completion()),
+            'completiontext' => $this->completion_icon($output, $attempt->get_completion(), true),
             'success' => $attempt->get_success(),
             'successicon' => $this->success_icon($output, $attempt->get_success()),
+            'successtext' => $this->success_icon($output, $attempt->get_success(), true),
             'scaled' => $attempt->get_scaled(),
             'reporturl' => new moodle_url('/mod/h5pactivity/report.php', [
                 'a' => $attempt->get_h5pactivityid(), 'attemptid' => $attempt->get_id()
@@ -117,37 +119,55 @@ class attempt implements renderable, templatable {
      *
      * @param renderer_base $output the renderer base object
      * @param int|null $completion the current completion value
+     * @param bool $showtext if the icon must have a text or only icon
      * @return string icon HTML
      */
-    private function completion_icon(renderer_base $output, int $completion = null): string {
+    private function completion_icon(renderer_base $output, int $completion = null, bool $showtext = false): string {
         if ($completion === null) {
             return '';
         }
         if ($completion) {
             $alt = get_string('attempt_completion_yes', 'mod_h5pactivity');
-            return $output->pix_icon('i/completion-auto-y', $alt);
+            $icon = 'i/completion-auto-y';
+        } else {
+            $alt = get_string('attempt_completion_no', 'mod_h5pactivity');
+            $icon = 'i/completion-auto-n';
         }
-        $alt = get_string('attempt_completion_no', 'mod_h5pactivity');
-        return $output->pix_icon('i/completion-auto-n', $alt);
+        $text = '';
+        if ($showtext) {
+            $text = $alt;
+            $alt = '';
+        }
+        return $output->pix_icon($icon, $alt).$text;
     }
 
     /**
      * Return a success icon
      * @param renderer_base $output the renderer base object
      * @param int|null $success the current success value
+     * @param bool $showtext if the icon must have a text or only icon
      * @return string icon HTML
      */
-    private function success_icon(renderer_base $output, int $success = null): string {
+    private function success_icon(renderer_base $output, int $success = null, bool $showtext = false): string {
         if ($success === null) {
             $alt = get_string('attempt_success_unknown', 'mod_h5pactivity');
-            return $output->pix_icon('i/empty', $alt);
-        }
-        if ($success) {
+            if ($showtext) {
+                return $alt;
+            }
+            $icon = 'i/empty';
+        } else if ($success) {
             $alt = get_string('attempt_success_pass', 'mod_h5pactivity');
-            return $output->pix_icon('i/checkedcircle', $alt);
+            $icon = 'i/checkedcircle';
+        } else {
+            $alt = get_string('attempt_success_fail', 'mod_h5pactivity');
+            $icon = 'i/uncheckedcircle';
+        }
+        $text = '';
+        if ($showtext) {
+            $text = $alt;
+            $alt = '';
         }
-        $alt = get_string('attempt_success_fail', 'mod_h5pactivity');
-        return $output->pix_icon('i/uncheckedcircle', $alt);
+        return $output->pix_icon($icon, $alt).$text;
     }
 
     /**
index b6efae0..7627a30 100644 (file)
@@ -82,7 +82,9 @@ class reportresults implements renderable, templatable {
         $data->results = [];
         foreach ($results as $key => $result) {
             $outputresult = output_result::create_from_record($result);
-            $data->results[] = $outputresult->export_for_template($output);
+            if ($outputresult) {
+                $data->results[] = $outputresult->export_for_template($output);
+            }
         }
 
         return $data;
index fb1ab06..fc8b53a 100644 (file)
@@ -100,9 +100,13 @@ class result implements renderable, templatable {
      * return the correct result output depending on the interactiontype
      *
      * @param stdClass $result h5pactivity_attempts_results record
-     * @return result
+     * @return result|null the result output class if any
      */
-    public static function create_from_record(stdClass $result): self {
+    public static function create_from_record(stdClass $result): ?self {
+        // Compound result track is omitted from the report.
+        if ($result->interactiontype == 'compound') {
+            return null;
+        }
         $classname = "mod_h5pactivity\\output\\result\\{$result->interactiontype}";
         $classname = str_replace('-', '', $classname);
         if (class_exists($classname)) {
diff --git a/mod/h5pactivity/classes/output/result/compound.php b/mod/h5pactivity/classes/output/result/compound.php
deleted file mode 100644 (file)
index 2f2f77f..0000000
+++ /dev/null
@@ -1,56 +0,0 @@
-<?php
-// This file is part of Moodle - http://moodle.org/
-//
-// Moodle is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// Moodle is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
-
-/**
- * Contains class mod_h5pactivity\output\result\compound
- *
- * @package   mod_h5pactivity
- * @copyright 2020 Ferran Recio
- * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
- */
-
-namespace mod_h5pactivity\output\result;
-
-defined('MOODLE_INTERNAL') || die();
-
-use mod_h5pactivity\output\result;
-use renderer_base;
-use stdClass;
-
-/**
- * Class to display H5P compound result.
- *
- * @copyright 2020 Ferran Recio
- * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
- */
-class compound extends result {
-
-    /**
-     * Export this data so it can be used as the context for a mustache template.
-     *
-     * @param renderer_base $output
-     * @return stdClass
-     */
-    public function export_for_template(renderer_base $output): stdClass {
-        $data = parent::export_for_template($output);
-        // A compound without any description is just a partial score so no track needed.
-        if (empty($data->description)) {
-            $data->description = get_string('result_compound', 'mod_h5pactivity');
-            $data->track = true;
-        }
-        return $data;
-    }
-}
index 9bd018b..35fa58e 100644 (file)
@@ -45,9 +45,9 @@ $string['attempt_highest'] = 'Highest score attempt';
 $string['attempt_last'] = 'Last attempt';
 $string['attempt_none'] = 'No attempts are used for grading';
 $string['attempt_number'] = 'Attempt #{$a}';
-$string['attempt_success_fail'] = 'Attempt marked as failed';
-$string['attempt_success_pass'] = 'Attempt completed successfully';
-$string['attempt_success_unknown'] = 'Unkown attempt success state';
+$string['attempt_success_fail'] = 'Fail';
+$string['attempt_success_pass'] = 'Pass';
+$string['attempt_success_unknown'] = 'Not reported';
 $string['attempts'] = 'Attempts';
 $string['attempts_report'] = 'Attempts report';
 $string['attempts_none'] = 'This user has no attempts to display.';
@@ -94,6 +94,7 @@ $string['myattempts'] = 'My attempts';
 $string['no_compatible_track'] = 'This interaction ({$a}) does not provide tracking information or the tracking
         provided is not compatible with the current activity version.';
 $string['noparticipants'] = 'No participants to display';
+$string['outcome'] = 'Outcome';
 $string['package'] = 'Package file';
 $string['package_help'] = 'The package file is a h5p file containing H5P interactive content.';
 $string['page-mod-h5pactivity-x'] = 'Any H5P module page';
@@ -126,6 +127,7 @@ $string['score'] = 'Score';
 $string['score_out_of'] = '{$a->rawscore} out of {$a->maxscore}';
 $string['startdate'] = 'Start date';
 $string['statement_received'] = 'xAPI statement received';
+$string['totalscore'] = 'Total score';
 $string['tracking_messages'] = 'Some H5P provide attempt tracking data for advanced reporting such as number of attempts, responses and grades. Note: Some H5P don\'t provide attempt tracking data. In such cases, the following settings will have no effect.';
 $string['true'] = 'True';
 $string['view'] = 'View';
index 42ee0bf..faa97b3 100644 (file)
     }
 
 }}
-<h2 class="w-100 d-flex flex-column-reverse flex-md-row">
-    <span class="flex-grow-1">
-        {{#user}}
-          {{{picture}}}
-          {{#str}}attempt, mod_h5pactivity{{/str}} #{{attempt}}: {{fullname}}
-        {{/user}}
-        {{^user}}
-          {{#str}}attempt, mod_h5pactivity{{/str}} #{{attempt}}
-        {{/user}}
-    </span>
-    <span class="align-self-start badge p-3 mb-3 mb-md-0
-            {{#success}}badge-success{{/success}} {{^success}}badge-secondary{{/success}}">
-        {{#success}}
-            {{#pix}}i/checkedcircle, moodle, {{#str}}answer_pass, mod_h5pactivity{{/str}}{{/pix}}
-        {{/success}}
-        {{^success}}
-            {{#pix}}i/uncheckedcircle, moodle, {{#str}}answer_fail, mod_h5pactivity{{/str}}{{/pix}}
-        {{/success}}
-        {{#score}}{{#str}}score, mod_h5pactivity{{/str}}: {{score}}{{/score}}
-    </span>
+<h2 class="px-0 px-md-3">
+    {{#user}}
+      {{{picture}}}
+      {{#str}}attempt, mod_h5pactivity{{/str}} #{{attempt}}: {{fullname}}
+    {{/user}}
+    {{^user}}
+      {{#str}}attempt, mod_h5pactivity{{/str}} #{{attempt}}
+    {{/user}}
 </h2>
-<div class="container-fluid">
+<div class="container-fluid mt-4 mb-5 px-0 px-md-3">
     <dl class="row">
-        <dt class="col-sm-3">{{#str}} startdate, mod_h5pactivity {{/str}}</dt>
-        <dd class="col-sm-3">{{#userdate}} {{timemodified}}, {{#str}} strftimedatetime, core_langconfig {{/str}} {{/userdate}}</dd>
-        <dt class="col-sm-3">{{#str}} completion, mod_h5pactivity {{/str}}</dt>
-        <dd class="col-sm-3">{{{completionicon}}}</dd>
-        <dt class="col-sm-3 text-truncate">{{#str}} duration, mod_h5pactivity {{/str}}</dt>
-        <dd class="col-sm-3">{{duration}}</dd>
-        <dt class="col-sm-3">{{#str}} success {{/str}}</dt>
-        <dd class="col-sm-3">{{{successicon}}}</dd>
+        <dt class="col-12">{{#str}} startdate, mod_h5pactivity {{/str}}</dt>
+        <dd class="col-12">{{#userdate}} {{timemodified}}, {{#str}} strftimedatetime, core_langconfig {{/str}} {{/userdate}}</dd>
+        <dt class="col-12">{{#str}} completion, mod_h5pactivity {{/str}}</dt>
+        <dd class="col-12">{{{completiontext}}}</dd>
+        <dt class="col-12 text-truncate">{{#str}} duration, mod_h5pactivity {{/str}}</dt>
+        <dd class="col-12">{{duration}}</dd>
+        <dt class="col-12">{{#str}} outcome, mod_h5pactivity {{/str}}</dt>
+        <dd class="col-12">{{{successtext}}}</dd>
+        {{#score}}
+            <dt class="col-12">{{#str}} totalscore, mod_h5pactivity {{/str}}</dt>
+            <dd class="col-12">{{score}}</dd>
+        {{/score}}
     </dl>
 </div>
index f4e3920..4309275 100644 (file)
 
 }}
 
-<div class="container-fluid w-100 border border-secondary my-3">
-    <div class="row w-100 py-3 px-1 p-md-3 m-0">
+<div class="container-fluid w-100 my-0 p-0">
+    <div class="row w-100 py-3 px-1 m-0 p-md-3">
         {{>mod_h5pactivity/result/header}}
         {{{content}}}
         {{#hasoptions}}
index 4b6ca48..a5592da 100644 (file)
     }
 
 }}
-<h3 class="w-100 d-flex flex-column-reverse flex-md-row">
-    <span class="flex-grow-1">
-        {{description}}
-    </span>
-    {{#maxscore}}
-        <span class="align-self-start badge p-3 mb-3 mb-md-0
-                {{#success}}badge-success{{/success}} {{^success}}badge-secondary{{/success}}">
-            {{#success}}
-                {{#pix}}i/checkedcircle, moodle, {{#str}}answer_pass, mod_h5pactivity{{/str}}{{/pix}}
-            {{/success}}
-            {{#score}}{{#str}}score, mod_h5pactivity{{/str}}: {{score}}{{/score}}
-        </span>
-    {{/maxscore}}
+<h3 class="w-100">
+    {{description}}
 </h3>
index 5c99273..4be6d11 100644 (file)
     }
 
 }}
-<table class="table">
+<table class="table table-striped">
   <thead>
     <tr>
-        <th scope="col" class="">{{optionslabel}}</th>
-        <th scope="col" class="text-center">{{correctlabel}}</th>
-        <th scope="col" class="text-center ">{{answerlabel}}</th>
+        <th scope="col">{{optionslabel}}</th>
+        <th scope="col">{{correctlabel}}</th>
+        <th scope="col">{{answerlabel}}</th>
     </tr>
   </thead>
   <tbody>
     {{#options}}
     <tr>
-      <td>{{description}}</td>
-      <td class="text-center">{{#correctanswer}}{{>mod_h5pactivity/result/answer}}{{/correctanswer}}</td>
-      <td class="text-center">{{#useranswer}}{{>mod_h5pactivity/result/answer}}{{/useranswer}}</td>
+        <td>{{description}}</td>
+        <td>{{#correctanswer}}{{>mod_h5pactivity/result/answer}}{{/correctanswer}}</td>
+        <td>{{#useranswer}}{{>mod_h5pactivity/result/answer}}{{/useranswer}}</td>
     </tr>
     {{/options}}
+    {{#score}}
+    <tr class="table-light">
+        <td colspan="2" class="d-none d-sm-table-cell border-top-3 border-dark"></td>
+        <td class="d-none d-sm-table-cell border-top border-dark">
+            <strong>{{#str}}score, mod_h5pactivity{{/str}}: {{score}}</strong>
+        </td>
+        <td class="d-table-cell d-sm-none text-right border-top border-dark" colspan="3">
+            <strong>{{#str}}score, mod_h5pactivity{{/str}}: {{score}}</strong>
+        </td>
+    </tr>
+    {{/score}}
   </tbody>
 </table>