diff --git a/src/scripts/h5p-dictation-solution.js b/src/scripts/h5p-dictation-solution.js index 7fa73f3..8eb52b6 100644 --- 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 index fa71c78..02867bc 100644 --- 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,8 +295,14 @@ $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 { @@ -303,8 +310,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; @@ -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;