feat: multiple pages score view (#186)

* feat: add last page and restart button * feat: add ScoreBar and ScorePage * use overallFeedback * refactor: adjust ScorePage * fix: make Statusbar visible on ScorePage * refactor: ScoreBar * chore: add typing for `H5P.JoubelUI` * refactor: group all h5p extensions in one declaration file * refactor: use `reference` to import JoubelUI types * refactor: include h5p-extensions.d.ts in tsconfig * fix: add translations * refactor: use JoubelProgressbar * fix: re-add margin-top * chore: update `h5p-types-joubel-ui` * chore: update `h5p-types-joubel-ui` * fix: translation in nn.json * fix: make sure to trim list of words * fix: ensure color contrast on next button * bump patch version --------- Co-authored-by: Sindre Bøyum <[email protected]>
NDLANO · May 10, 2023 · 129cfbf · 129cfbf
1 parent 5799490
commit 129cfbf
Show file tree

Hide file tree

Showing 21 changed files with 409 additions and 52 deletions.
diff --git a/.h5pignore b/.h5pignore
@@ -1,14 +1,17 @@
+.github
+build_info
 node_modules
 src
-.github
+.eslintignore
+.eslintrc.json
 .gitignore
 .h5pignore
+h5p-extensions.d.ts
 jest.config.js
-semantics.json.d.ts
 library.json.d.ts
-build_info
-package.json
 package-lock.json
+package.json
 README.md
-webpack.config.js
+semantics.json.d.ts
 tsconfig.json
+webpack.config.js
diff --git a/build_info/repos b/build_info/repos
@@ -1,4 +1,6 @@
 https://github.com/h5p/h5p-blanks.git
 https://github.com/h5p/h5p-drag-text.git
 https://github.com/h5p/h5p-editor-radio-group.git
+https://github.com/h5p/h5p-joubel-ui.git
+https://github.com/h5p/h5p-question.git
 https://github.com/NDLANO/h5p-editor-csv-to-text.git
diff --git a/h5p-extensions.d.ts b/h5p-extensions.d.ts
@@ -0,0 +1 @@
+import 'h5p-types-joubel-ui';
diff --git a/language/.en.json b/language/.en.json
@@ -99,6 +99,34 @@
           "label": "Changed language mode aria",
           "default": "Swapped language from @sourceLanguage to @targetLanguage"
         },
+        {
+          "label": "Text for \"Next\" button",
+          "default": "Next"
+        },
+        {
+          "label": "Text for \"Finish\" button",
+          "default": "Finish"
+        },
+        {
+          "label": "Text for \"Restart\" button",
+          "default": "Restart"
+        },
+        {
+          "label": "Score label",
+          "default": "Score"
+        },
+        {
+          "label": "Textual representation of the score bar for those using a readspeaker",
+          "default": "You got @score out of @maxScore points"
+        },
+        {
+          "label": "Textual representation of the page numbers for those using a readspeaker",
+          "default": "Page @page of @totalPages"
+        },
+        {
+          "label": "Feedback text",
+          "default": "Your total score"
+        },
         {
           "label": "English",
           "default": "English"

diff --git a/language/nb.json b/language/nb.json
@@ -99,6 +99,34 @@
           "label": "Endret språkmodus aria",
           "default": "Byttet språk fra @sourceLanguage til @targetLanguage"
         },
+        {
+          "label": "Tekst for \"Neste\" knapp",
+          "default": "Neste"
+        },
+        {
+          "label": "Tekst for \"Fullfør\" knapp",
+          "default": "Fullfør"
+        },
+        {
+          "label": "Tekst for \"Start på nytt\" knapp",
+          "default": "Start på nytt"
+        },
+        {
+          "label": "Resultat etikett",
+          "default": "Resultat"
+        },
+        {
+          "label": "Tekstlig representasjon av resultatlinjen for de som bruker en skjermleser",
+          "default": "Du fikk @score av @maxScore poeng"
+        },
+        {
+          "label": "Tekstlig representasjon av sidetall for de som bruker en skjermleser",
+          "default": "Side @page av @totalPages"
+        },
+        {
+          "label": "Tilbakemelding-tekst",
+          "default": "Ditt resultat"
+        },
         {
           "label": "Engelsk",
           "default": "Engelsk"

diff --git a/language/nn.json b/language/nn.json
@@ -99,6 +99,34 @@
           "label": "Endret språkmodus aria",
           "default": "Bytte språk frå @sourceLanguage til @targetLanguage"
         },
+        {
+          "label": "Tekst for \"Neste\" knapp",
+          "default": "Neste"
+        },
+        {
+          "label": "Tekst for \"Fullfør\" knapp",
+          "default": "Fullfør"
+        },
+        {
+          "label": "Tekst for \"Start på nytt\" knapp",
+          "default": "Start på nytt"
+        },
+        {
+          "label": "Resultat etikett",
+          "default": "Resultat"
+        },
+        {
+          "label": "Tekstleg representasjon av resultatlinja for dei som bruker ein skjermlesar",
+          "default": "Du fekk @score av @maxScore poeng"
+        },
+        {
+          "label": "Tekstleg representasjon av sidetal for dei som bruker ein skjermlesar",
+          "default": "Side @page av @totalPages"
+        },
+        {
+          "label": "Tilbakemelding-tekst",
+          "default": "Ditt resultat"
+        },
         {
           "label": "Engelsk",
           "default": "Engelsk"

diff --git a/library.json b/library.json
@@ -3,7 +3,7 @@
   "machineName": "H5P.VocabularyDrill",
   "majorVersion": 1,
   "minorVersion": 0,
-  "patchVersion": 18,
+  "patchVersion": 19,
   "runnable": 1,
   "license": "MIT",
   "author": "NDLA",
@@ -18,6 +18,16 @@
       "machineName": "H5P.DragText",
       "majorVersion": 1,
       "minorVersion": 10
+    },
+    {
+      "machineName": "H5P.Question",
+      "majorVersion": 1,
+      "minorVersion": 5
+    },
+    {
+      "machineName": "H5P.JoubelUI",
+      "majorVersion": 1,
+      "minorVersion": 3
     }
   ],
   "editorDependencies": [

diff --git a/library.json.d.ts b/library.json.d.ts
@@ -3,7 +3,7 @@ declare const json: {
   "machineName": "H5P.VocabularyDrill",
   "majorVersion": 1,
   "minorVersion": 0,
-  "patchVersion": 18,
+  "patchVersion": 19,
   "runnable": 1,
   "license": "MIT",
   "author": "NDLA",
@@ -18,6 +18,16 @@ declare const json: {
       "machineName": "H5P.DragText",
       "majorVersion": 1,
       "minorVersion": 10
+    },
+    {
+      "machineName": "H5P.Question",
+      "majorVersion": 1,
+      "minorVersion": 5
+    },
+    {
+      "machineName": "H5P.JoubelUI",
+      "majorVersion": 1,
+      "minorVersion": 3
     }
   ],
   "editorDependencies": [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "eslint": "^8.39.0",
     "eslint-config-ndla-h5p": "github:ndlano/eslint-config-ndla-h5p",
     "h5p-types": "^1.17.0",
+    "h5p-types-joubel-ui": "^1.0.4",
     "jest": "^29.5.0",
     "mini-css-extract-plugin": "^2.7.5",
     "sass": "^1.62.1",

diff --git a/semantics.json b/semantics.json
@@ -162,6 +162,48 @@
         "default": "Swapped language from @sourceLanguage to @targetLanguage",
         "type": "text"
       },
+      {
+        "label": "Text for \"Next\" button",
+        "name": "next",
+        "default": "Next",
+        "type": "text"
+      },
+      {
+        "label": "Text for \"Finish\" button",
+        "name": "finish",
+        "default": "Finish",
+        "type": "text"
+      },
+      {
+        "label": "Text for \"Restart\" button",
+        "name": "restart",
+        "default": "Restart",
+        "type": "text"
+      },
+      {
+        "label": "Score label",
+        "name": "scoreLabel",
+        "default": "Score",
+        "type": "text"
+      },
+      {
+        "label": "Textual representation of the score bar for those using a readspeaker",
+        "name": "scoreBarLabel",
+        "default": "You got @score out of @maxScore points",
+        "type": "text"
+      },
+      {
+        "label": "Textual representation of the page numbers for those using a readspeaker",
+        "name": "pageNumberLabel",
+        "default": "Page @page of @totalPages",
+        "type": "text"
+      },
+      {
+        "label": "Feedback text",
+        "name": "feedbackText",
+        "default": "Your total score",
+        "type": "text"
+      },
       {
         "label": "English",
         "name": "lang_en",

diff --git a/semantics.json.d.ts b/semantics.json.d.ts
@@ -162,6 +162,48 @@ declare const json: [
         "default": "Swapped language from @sourceLanguage to @targetLanguage",
         "type": "text"
       },
+      {
+        "label": "Text for \"Next\" button",
+        "name": "next",
+        "default": "Next",
+        "type": "text"
+      },
+      {
+        "label": "Text for \"Finish\" button",
+        "name": "finish",
+        "default": "Finish",
+        "type": "text"
+      },
+      {
+        "label": "Text for \"Restart\" button",
+        "name": "restart",
+        "default": "Restart",
+        "type": "text"
+      },
+      {
+        "label": "Score label",
+        "name": "scoreLabel",
+        "default": "Score",
+        "type": "text"
+      },
+      {
+        "label": "Textual representation of the score bar for those using a readspeaker",
+        "name": "scoreBarLabel",
+        "default": "You got @score out of @maxScore points",
+        "type": "text"
+      },
+      {
+        "label": "Textual representation of the page numbers for those using a readspeaker",
+        "name": "pageNumberLabel",
+        "default": "Page @page of @totalPages",
+        "type": "text"
+      },
+      {
+        "label": "Feedback text",
+        "name": "feedbackText",
+        "default": "Your total score",
+        "type": "text"
+      },
       {
         "label": "English",
         "name": "lang_en",

diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import { H5P } from 'h5p-utils';
+import React, { FC, useEffect, useRef } from 'react';
 
 type ProgressBarProps = {
   page: number;
@@ -8,13 +9,20 @@ type ProgressBarProps = {
 export const ProgressBar: FC<ProgressBarProps> = ({
   page, totalPages
 }) => {
-  const progress = (page / Math.max(1, totalPages)) * 100;
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Page progress is also available in StatusBar
+  const disableAria = true; 
+  const progressBar = useRef(H5P.JoubelUI.createProgressbar(totalPages, { disableAria }));
+  progressBar.current.setProgress(page);
+
+  useEffect(() => {
+    if (ref.current && !ref.current.firstChild) {
+      progressBar.current.appendTo(ref.current);
+    }
+  }, [ref.current]);
+
   return (
-    <div className="h5p-vocabulary-drill-progressbar">
-      <div
-        className="h5p-vocabulary-drill-progressbar-front"
-        style={{ width: `${progress}%` }}
-      />
-    </div>
+    <div ref={ref} className="h5p-vocabulary-drill-progressbar" />
   );
 };
diff --git a/src/components/ScoreBar/ScoreBar.tsx b/src/components/ScoreBar/ScoreBar.tsx
@@ -0,0 +1,31 @@
+import { H5P } from 'h5p-utils';
+import React, { FC, useEffect, useRef } from 'react';
+import { useTranslation } from '../../hooks/useTranslation/useTranslation';
+
+type ScoreBarProps = {
+  maxScore: number,
+  score: number,
+};
+
+export const ScoreBar: FC<ScoreBarProps> = ({
+  maxScore,
+  score,
+}) => {
+  const { t } = useTranslation();
+  const scoreBarLabel = t('scoreBarLabel').replaceAll('@score', score.toString()).replaceAll('@maxScore', maxScore.toString());
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const scoreBar = useRef(H5P.JoubelUI.createScoreBar(maxScore, scoreBarLabel));
+  scoreBar.current.setScore(score);
+
+  useEffect(() => {
+    if (ref.current && !ref.current.firstChild) {
+      scoreBar.current.appendTo(ref.current);
+    }
+  }, [ref.current]);
+
+  return (
+    <div ref={ref} />
+  );
+};