refactor: adjust ScorePage

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

library.json

@@ -19,6 +19,11 @@
       "majorVersion": 1,
       "minorVersion": 10
     },
+    {
+      "machineName": "H5P.Question",
+      "majorVersion": 1,
+      "minorVersion": 5
+    },
     {
       "machineName": "H5P.JoubelUI",
       "majorVersion": 1,

library.json.d.ts

@@ -19,6 +19,11 @@ declare const json: {
       "majorVersion": 1,
       "minorVersion": 10
     },
+    {
+      "machineName": "H5P.Question",
+      "majorVersion": 1,
+      "minorVersion": 5
+    },
     {
       "machineName": "H5P.JoubelUI",
       "majorVersion": 1,

src/components/ScoreBar/ScoreBar.tsx

@@ -4,20 +4,14 @@ import React, { FC, useEffect } from 'react';
 type ScoreBarProps = {
   maxScore: number,
   score: number,
-  label: string,
-  helpText: string,
-  scoreExplanation: string,
 };
 
 export const ScoreBar: FC<ScoreBarProps> = ({
   maxScore,
   score,
-  label,
-  helpText,
-  scoreExplanation,
 }) => {
   const ref = React.useRef<HTMLDivElement>(null);
-  const scoreBar = (H5P as any).JoubelUI.createScoreBar(maxScore, label, helpText, scoreExplanation);
+  const scoreBar = (H5P as any).JoubelUI.createScoreBar(maxScore);
   scoreBar.setScore(score);
 
   useEffect(() => {

src/components/ScorePage/ScorePage.tsx

@@ -1,6 +1,6 @@
 import { H5P } from 'h5p-utils';
 import React, { FC } from 'react';
-import { ScoreBar } from "../ScoreBar/ScoreBar";
+import { ScoreBar } from '../ScoreBar/ScoreBar';
 
 type ScorePageProps = {
   score: number;
@@ -15,18 +15,15 @@ export const ScorePage: FC<ScorePageProps> = ({
   overallFeedbacks,
   onRestart,
 }) => {
-  // TODO: fix label, helpText, and scoreExplanation
-  // TODO: translate 'Restart'
-  const overallFeedback = (H5P as any).Question.determineOverallFeedback(overallFeedbacks, score / maxScore) ?? 'Your score is';
+  // TODO: translate 'Restart' and 'Your total score'
+  const overallFeedback = (H5P as any).Question.determineOverallFeedback(overallFeedbacks, score / maxScore);
+  const feedback = overallFeedback != '' ? overallFeedback : 'Your total score';
   return (
     <div className="h5p-vocabulary-drill-score-page">
-      <h2>{overallFeedback}</h2>
+      <h3>{feedback}</h3>
       <ScoreBar
         maxScore={maxScore}
         score={score}
-        label=''
-        helpText=''
-        scoreExplanation=''
       />
       <button
         type="button"

src/components/StatusBar/StatusBar.tsx

@@ -9,7 +9,7 @@ type StatusBarProps = {
   showNextButton: boolean;
   disableNextButton: boolean;
   onNext: () => void;
-  onSubmit: () => void;
+  onShowResults: () => void;
 };
 
 export const StatusBar: FC<StatusBarProps> = ({
@@ -20,21 +20,24 @@ export const StatusBar: FC<StatusBarProps> = ({
   showNextButton,
   disableNextButton,
   onNext,
-  onSubmit,
+  onShowResults,
 }) => {
-  // TODO: Translate "Next", "Submit", "Score" and "Page"
+  // TODO: Translate "Next", "Finish", "Score" and "Page"
+  const scorePage = page === totalPages;
   return (
     <>
       <ProgressBar page={page} totalPages={totalPages} />
       <div className="h5p-vocabulary-drill-status">
-        {score != null ? <div className="h5p-vocabulary-drill-status-score">
-          <span aria-hidden="true">Score: </span>
-          <span className="h5p-vocabulary-drill-status-number" aria-hidden="true">{score}</span>
-          <span className="h5p-vocabulary-drill-status-divider" aria-hidden="true"> / </span>
-          <span className="h5p-vocabulary-drill-status-number" aria-hidden="true">{totalScore}</span>
-          <p className="visually-hidden">Score: You got {score} out of {totalScore} points</p>
-        </div> : null}
-        <div>
+        {score != null && !scorePage ? (
+          <div className="h5p-vocabulary-drill-status-score">
+            <span aria-hidden="true">Score: </span>
+            <span className="h5p-vocabulary-drill-status-number" aria-hidden="true">{score}</span>
+            <span className="h5p-vocabulary-drill-status-divider" aria-hidden="true"> / </span>
+            <span className="h5p-vocabulary-drill-status-number" aria-hidden="true">{totalScore}</span>
+            <p className="visually-hidden">Score: You got {score} out of {totalScore} points</p>
+          </div>
+        ) : null}
+        <div className="h5p-vocabulary-drill-status-pages">
           <span className="h5p-vocabulary-drill-status-number" aria-hidden="true">{page}</span>
           <span className="h5p-vocabulary-drill-status-divider" aria-hidden="true"> / </span>
           <span className="h5p-vocabulary-drill-status-number" aria-hidden="true">{totalPages}</span>
@@ -50,14 +53,14 @@ export const StatusBar: FC<StatusBarProps> = ({
             Next
           </button>
           : null}
-        {!showNextButton ?
+        {!showNextButton && !scorePage ?
           <button
             type="button"
             className="h5p-vocabulary-drill-next"
-            onClick={onSubmit}
+            onClick={onShowResults}
             disabled={disableNextButton}
           >
-            Sumbit
+            Finish
           </button>
           : null}
       </div>

src/components/VocabularyDrill/VocabularyDrill.tsx

@@ -188,8 +188,8 @@ export const VocabularyDrill: FC<VocabularyDrillProps> = ({
       ? behaviour.numberOfWordsToShow
       : totalNumberOfWords;
 
-  const totalPages = Math.ceil(totalNumberOfWords / numberOfWordsToShow);
-  const multiplePages = totalPages > 1;
+  const totalPages = Math.ceil(totalNumberOfWords / numberOfWordsToShow) + 1; // add 1 for score page
+  const multiplePages = (totalPages - 1) > 1; // subtract 1 for score page
   const showNextButton = (page + 1) * numberOfWordsToShow < totalNumberOfWords;
 
   const pickedWords = multiplePages || !randomize ? pickWords(words.current, page, numberOfWordsToShow) : pickRandomWords(words.current, numberOfWordsToShow);
@@ -346,6 +346,9 @@ export const VocabularyDrill: FC<VocabularyDrillProps> = ({
     if (!shouldCreateRunnable) {
       return;
     }
+    if (showResults) {
+      return;
+    }
 
     shouldCreateRunnable = false;
     createRunnable();
@@ -372,9 +375,11 @@ export const VocabularyDrill: FC<VocabularyDrillProps> = ({
     }
   };
 
-  const handleSumbit = () => {
-    setShowResults(true);
+  const handleShowResults = () => {
+    const newPage = page + 1;
 
+    setShowResults(true);
+    setPage(newPage);
     setScore(score + (activeContentType.current?.getScore() ?? 0));
     setMaxScore(maxScore + (activeContentType.current?.getMaxScore() ?? 0));
   };
@@ -426,7 +431,7 @@ export const VocabularyDrill: FC<VocabularyDrillProps> = ({
               showNextButton={showNextButton}
               disableNextButton={disableNextButton}
               onNext={handleNext}
-              onSubmit={handleSumbit}
+              onShowResults={handleShowResults}
             />
           )}
         </div>

src/index.scss

@@ -234,7 +234,7 @@
   gap: 2em;
   justify-content: space-between;
   min-height: 2.7em;
-  padding: 0.5em 0.5em 0.5em 1em;
+  padding: 0.5em 1em;
   position: relative;
 
   button {
@@ -274,6 +274,10 @@
     flex-grow: 1;
   }
 
+  &-pages {
+    margin: 0 0 0 auto;
+  }
+
   &-number {
     color: #356BBD;
     font-size: 1.2em;