Store positions of solution word markers

src/scripts/components/h5p-crossword-content.js

@@ -161,7 +161,7 @@ export default class CrosswordContent {
     tableWrapper.appendChild(this.table.getDOM());
     this.content.appendChild(tableWrapper);
 
-    const canHaveSolutionWord = this.table.addSolutionWord(this.params.solutionWord);
+    const canHaveSolutionWord = this.table.addSolutionWord(this.params.solutionWord, state.solutionCells);
     if (this.params.solutionWord !== '') {
       if (canHaveSolutionWord) {
         this.solutionWord = new CrosswordSolutionWord({
@@ -388,6 +388,9 @@ export default class CrosswordContent {
       return;
     }
 
+    // Position of the solution word cells in the crossword
+    const solutionCells = this.table?.getSolutionWordCellPositions();
+
     const crosswordLayout = {
       cols: this.crosswordLayout.cols,
       rows: this.crosswordLayout.rows,
@@ -401,7 +404,7 @@ export default class CrosswordContent {
       })
     };
 
-    return { crosswordLayout, cells, focus };
+    return { crosswordLayout, cells, focus, solutionCells };
   }
 
   /**

src/scripts/components/h5p-crossword-table.js

@@ -1,6 +1,7 @@
 import CrosswordCell from '@components/h5p-crossword-cell.js';
 import Util from '@services/util.js';
 import './h5p-crossword-table.scss';
+import { XAPI_PLACEHOLDER  } from '@mixins/xapi.js';
 
 /** @constant {number} CELL_FONT_SIZE_DIVIDER Divisor found by testing */
 export const CELL_FONT_SIZE_DIVIDER = 2;
@@ -313,13 +314,21 @@ export default class CrosswordTable {
   /**
    * Mark cells with solution word ids and circles if possible.
    * @param {string} solutionWord Solution word.
+   * @param {number[]} positions Positions of solution word.
    * @returns {boolean} True, if possibe, else false.
    */
-  addSolutionWord(solutionWord) {
+  addSolutionWord(solutionWord, positions = []) {
     if (!solutionWord || solutionWord === '') {
       return false;
     }
 
+    if (positions.length) {
+      positions.forEach((position) => {
+        this.cells[position.row][position.column].addSolutionWordIdMarker(position.solutionWordId);
+      });
+      return true;
+    }
+
     const solutionWordCells = this.findSolutionWordCells(solutionWord);
     solutionWordCells.forEach((cell, index) => {
       cell.addSolutionWordIdMarker(index + 1);
@@ -1091,18 +1100,33 @@ export default class CrosswordTable {
 
         const placeholders = [];
         if (this.params.scoreWords) {
-          placeholders.push(CrosswordTable.XAPI_PLACEHOLDER);
+          placeholders.push(XAPI_PLACEHOLDER);
         }
         else {
           while (placeholders.length < word.answer.length) {
-            placeholders.push(CrosswordTable.XAPI_PLACEHOLDER);
+            placeholders.push(XAPI_PLACEHOLDER);
           }
         }
 
         return `<p>${clue}</ br>${placeholders.join(' ')}</p>`;
       })
       .join('');
   }
-}
 
-CrosswordTable.XAPI_PLACEHOLDER = '__________';
+  /**
+   * Get solution word cell positions.
+   * @returns {object[]} Solution word cell positions.
+   */
+  getSolutionWordCellPositions() {
+    return this.cells
+      .flat()
+      .filter(((cell) => cell.getInformation().solutionWordId !== null))
+      .map((cell) => {
+        return {
+          row: cell.getPosition().row,
+          column: cell.getPosition().column,
+          solutionWordId: cell.getInformation().solutionWordId
+        };
+      });
+  }
+}

src/scripts/mixins/xapi.js

@@ -1,6 +1,9 @@
 import Util from '@services/util.js';
 import { DEFAULT_DESCRIPTION } from '@scripts/h5p-crossword.js';
 
+/** @constant {string} XAPI_PLACEHOLDER Placeholder for a gap. */
+export const XAPI_PLACEHOLDER = '__________';
+
 /**
  * Mixin containing methods for xapi stuff.
  */