Improve score explainer positioning

otacke · Sep 3, 2024 · f31ec44 · f31ec44
1 parent 8fc7300
commit f31ec44
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/scripts/h5p-dictation-solution.js b/src/scripts/h5p-dictation-solution.js
@@ -99,7 +99,8 @@ class Solution {
     }
 
     return result.words.map((word, index) =>
-      this.createSolutionWordDOM(index, word, result.words.length - 1 !== index));
+      this.createSolutionWordDOM(index, word)
+    );
   }
 
   /**
@@ -109,10 +110,9 @@ class Solution {
    * @param {string} word.type Status about missing, typo, ...
    * @param {string} word.solution Correct spelling of the word.
    * @param {string} word.answer User input for this word.
-   * @param {boolean} [trailingGap] True if wrapper should have trailing gap.
    * @returns {HTMLElement} DOM for solution words.
    */
-  createSolutionWordDOM(index, word, trailingGap = true) {
+  createSolutionWordDOM(index, word) {
     if (this.params.alternateSolution === 'first' && word.type !== 'match' && word.type !== 'typo') {
       word.solution = word.solution ? Util.splitWordAlternatives(word.solution)[0] : '';
     }
@@ -127,9 +127,6 @@ class Solution {
       wordDOM.classList.add(`h5p-wrapper-${word.type}`);
     }
 
-    if (trailingGap) {
-      wordDOM.classList.add('h5p-spacer');
-    }
     wordDOM.setAttribute('tabindex', '-1');
     wordDOM.setAttribute('role', 'listitem');
 

diff --git a/src/styles/h5p-dictation.scss b/src/styles/h5p-dictation.scss
@@ -99,6 +99,7 @@ $border-color_1: #7fb8ff;
 		z-index: 3;
 		display: inline-flex;
 		flex-wrap: wrap;
+		gap: 0.75em;
 		padding-right: 1.615384615em;
 		padding-bottom: .5em;
 		padding-left: .5em;
@@ -294,17 +295,23 @@ $border-color_1: #7fb8ff;
 	}
 }
 
-.h5p-spacer {
-	margin-right: .25em;
+.h5p-question-minus-one {
+	right: -1.1em;
+	top: -1em;
+}
+
+.h5p-question-plus-one {
+	right: -1.1em;
+	top: -1em;
 }
 
 .h5p-question-plus-one-half {
 	position: absolute;
 	width: 1.923076923em;
 	height: calc(1.923076923em * .638297872);
 	background-size: 100% 100%;
-	right: -1.615384615em;
-	top: -.846153846em;
+	right: -1.1em;
+	top: -1em;
 	z-index: 1;
 	opacity: 1;
 	transition: opacity 150ms linear, transform 150ms linear;
@@ -316,8 +323,8 @@ $border-color_1: #7fb8ff;
 	width: 1.923076923em;
 	height: calc(1.923076923em * .638297872);
 	background-size: 100% 100%;
-	right: -1.615384615em;
-	top: -.846153846em;
+	right: -1.1em;
+	top: -1em;
 	z-index: 1;
 	opacity: 1;
 	transition: opacity 150ms linear, transform 150ms linear;