Render report from template

Make it possible to disable scores (backwards compatibility)
Updated reporting submodule
HFP-1168

renderer.php

@@ -18,7 +18,7 @@
  * Defines the renderer for the hvp (H5P) module.
  *
  * @package     mod_hvp
- * @copyright   2016 onward Eiz Edddin Al Katrib <eiz@barasoft.co.uk>
+ * @copyright   2016 Joubel AS <contact@joubel.com>
  * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
@@ -27,7 +27,7 @@ defined('MOODLE_INTERNAL') || die();
 /**
  * The renderer for the hvp module.
  *
- * @copyright   2016 onward Eiz Edddin Al Katrib <eiz@barasoft.co.uk>
+ * @copyright   2016 Joubel AS <contact@joubel.com>
  * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  *
  * @SuppressWarnings(PHPMD)

review.php

@@ -78,6 +78,10 @@ if (!$xapiresults) {
     print_error('invalidxapiresult', 'hvp');
 }
 
+$totalRawScore = 0;
+$totalMaxScore = 0;
+$totalScaledScore = 0;
+
 // Assemble our question tree.
 $basequestion = null;
 foreach ($xapiresults as $question) {
@@ -89,9 +93,12 @@ foreach ($xapiresults as $question) {
         $xapiresults[$question->parent_id]->children[] = $question;
     }
 
-    // Set scaled score
-    if ($question->grademax && $question->max_score) {
+    // Set scores
+    if (isset($question->raw_score) && isset($question->grademax) && isset($question->max_score)) {
         $question->score_scale = $question->grademax / $question->max_score;
+        $totalRawScore += $question->raw_score;
+        $totalMaxScore += $question->max_score;
+        $totalScaledScore += $question->score_scale * $question->raw_score;
     }
 
     // Set score labels
@@ -108,9 +115,7 @@ foreach ($styles as $style) {
     $PAGE->requires->css(new moodle_url($CFG->httpswwwroot . '/mod/hvp/reporting/' . $style));
 }
 
-// Print page HTML.
-echo $OUTPUT->header();
-echo '<div class="clearer"></div>';
+$renderer = $PAGE->get_renderer('mod_hvp');
 
 // Print title and report.
 $title = $hvp->title;
@@ -122,9 +127,17 @@ if ($userid !== (int) $USER->id) {
         $title .= ": {$userresult->username}";
     }
 }
-echo "<div class='h5p-report-container'>
-        <h2>{$title}</h2>
-        <div class='h5p-report-view'>{$reporthtml}</div>
-      </div>";
 
+// Create title
+$reviewContext = [
+  'title' => $title,
+  'report' => $reporthtml,
+  'rawScore' => $totalRawScore,
+  'maxScore' => $totalMaxScore,
+  'scaledScore' => $totalScaledScore
+];
+
+// Print page HTML.
+echo $OUTPUT->header();
+echo $renderer->render_from_template('hvp/review', $reviewContext);
 echo $OUTPUT->footer();

templates/review.mustache

+<div class="clearer"></div>
+<div class="h5p-reporting-container">
+  <div class="h5p-reporting-header">
+
+    <!--Title-->
+    <div class="h5p-reporting-title">{{title}}</div>
+
+    <!--Scoring-->
+    <div class="h5p-reporting-main-score-wrapper">
+
+      <!--Raw score-->
+      <div class="h5p-reporting-main-score-container">
+        <span class="h5p-reporting-main-score-label">
+          {{# str }} reportingscorelabel, mod_hvp {{/ str }}
+        </span>
+        <span class="h5p-reporting-main-score-raw"></span>
+        <span class="h5p-reporting-main-score-delimiter">
+          {{# str }} reportingscoredelimiter, mod_hvp {{/ str }}
+        </span>
+        <span class="h5p-reporting-main-score-max"></span>
+      </div>
+
+      <!--Scaled score-->
+      <div class="h5p-reporting-scaled-container">
+        <span class="h5p-reporting-scaled-label">
+          {{# str }} reportingscaledscorelabel, mod_hvp {{/ str }}
+        </span>
+        <span class="h5p-reporting-scaled-score"></span>
+      </div>
+    </div>
+  </div>
+
+  <!--Render report as html-->
+  <div class="h5p-report-view">{{{report}}}</div>
+</div>

xapi-custom-report.css

@@ -23,3 +23,28 @@ body .h5p-compound-container {
 body .h5p-report-container {
   margin: 10px;
 }
+
+body .h5p-reporting-main-score-wrapper,
+body .h5p-reporting-main-scaled-container,
+body .h5p-reporting-main-score-container {
+  display: inline-block;
+}
+
+body .h5p-reporting-main-score-wrapper {
+  font-size: 0.95em;
+  float: right;
+
+  background-color: #f3f3f3;
+  border-bottom: solid 1px #dfdfdf;
+  padding: 0.4em 1em;
+}
+
+
+body .h5p-reporting-score-wrapper {
+  font-weight: bold;
+}
+
+body .h5p-reporting-scaled-label,
+body .h5p-reporting-score-label {
+  font-weight: normal;
+}