diff --git a/library.json b/library.json index e4dcc0d..b1dc1a4 100644 --- a/library.json +++ b/library.json @@ -1,5 +1,5 @@ { - "title": "Profiler", + "title": "ProfileConfigurator", "description": "Create content to sort people/things into different catagories. Can be used for configuration, too.", "majorVersion": 1, "minorVersion": 2, @@ -7,18 +7,18 @@ "runnable": 1, "author": "Oliver Tacke, Lumenia AS", "license": "MIT", - "machineName": "H5P.Profiler", + "machineName": "H5P.ProfileConfigurator", "embedTypes": [ "iframe" ], "preloadedJs": [ { - "path": "dist/h5p-profiler.js" + "path": "dist/h5p-profile-configurator.js" } ], "preloadedCss": [ { - "path": "dist/h5p-profiler.css" + "path": "dist/h5p-profile-configurator.css" } ], "preloadedDependencies": [ diff --git a/package-lock.json b/package-lock.json index 0253e8f..985795c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "h5p-profiler", + "name": "h5p-profile-configurator", "version": "1.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "h5p-profiler", + "name": "h5p-profile-configurator", "version": "1.2.0", "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 6d5d907..95b361c 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "h5p-profiler", + "name": "h5p-profile-configurator", "version": "1.2.0", "description": "Create content to sort people/things into different catagories. Can be used for configuration, too.", "private": true, @@ -10,7 +10,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/otacke/h5p-personality-quiz-xr.git" + "url": "git+https://github.com/otacke/h5p-profile-configurator.git" }, "keywords": [ "h5p", diff --git a/src/entries/dist.js b/src/entries/dist.js index c83f73e..d2b4601 100644 --- a/src/entries/dist.js +++ b/src/entries/dist.js @@ -1,4 +1,4 @@ -import Profiler from '@scripts/h5p-profiler.js'; +import ProfileConfigurator from '@scripts/h5p-profile-configurator.js'; // Load library -H5P.Profiler = Profiler; +H5P.ProfileConfigurator = ProfileConfigurator; diff --git a/src/scripts/components/content.js b/src/scripts/components/content.js index ee94a23..244af6b 100644 --- a/src/scripts/components/content.js +++ b/src/scripts/components/content.js @@ -64,7 +64,7 @@ export default class Content { */ buildDOM() { this.dom = document.createElement('div'); - this.dom.classList.add('h5p-personality-quiz-xr-content'); + this.dom.classList.add('h5p-profile-configurator-content'); if (!this.params.personalities.length) { this.messageBoxHint = new MessageBoxHint(); @@ -135,7 +135,7 @@ export default class Content { // Title screen if set if (this.params.titleScreen) { this.intro = document.createElement('div'); - this.intro.classList.add('h5p-personality-quiz-xr-content-intro'); + this.intro.classList.add('h5p-profile-configurator-content-intro'); this.startScreen = new MediaScreen({ id: 'start', diff --git a/src/scripts/components/message-box/message-box-hint.scss b/src/scripts/components/message-box/message-box-hint.scss index 041dbad..fb6cb59 100644 --- a/src/scripts/components/message-box/message-box-hint.scss +++ b/src/scripts/components/message-box/message-box-hint.scss @@ -1,6 +1,6 @@ @use "@styles/main"; -.h5p-personality-quiz-xr-message-box.message-box-hint { +.h5p-profile-configurator-message-box.message-box-hint { background-color: main.$color-hint-message-background; border: 1px solid main.$color-hint-message-border; box-sizing: border-box; @@ -8,7 +8,7 @@ font-size: .8rem; padding: .8rem; - .h5p-personality-quiz-xr-message-box-message { + .h5p-profile-configurator-message-box-message { text-align: center; } } diff --git a/src/scripts/components/message-box/message-box.js b/src/scripts/components/message-box/message-box.js index ef5dcad..ba669e2 100644 --- a/src/scripts/components/message-box/message-box.js +++ b/src/scripts/components/message-box/message-box.js @@ -8,10 +8,10 @@ export default class MessageBox { */ constructor() { this.dom = document.createElement('div'); - this.dom.classList.add('h5p-personality-quiz-xr-message-box'); + this.dom.classList.add('h5p-profile-configurator-message-box'); this.message = document.createElement('p'); - this.message.classList.add('h5p-personality-quiz-xr-message-box-message'); + this.message.classList.add('h5p-profile-configurator-message-box-message'); this.dom.append(this.message); } diff --git a/src/scripts/components/message-box/message-box.scss b/src/scripts/components/message-box/message-box.scss index 9ca4872..b2a230a 100644 --- a/src/scripts/components/message-box/message-box.scss +++ b/src/scripts/components/message-box/message-box.scss @@ -1,4 +1,4 @@ -.h5p-personality-quiz-xr-message-box { +.h5p-profile-configurator-message-box { margin: 0; padding: 0; @@ -6,7 +6,7 @@ display: none; } - .h5p-personality-quiz-xr-message-box-message { + .h5p-profile-configurator-message-box-message { margin: 0; padding: 0; } diff --git a/src/scripts/components/question-screen/panel/option.js b/src/scripts/components/question-screen/panel/option.js index feef556..8a79639 100644 --- a/src/scripts/components/question-screen/panel/option.js +++ b/src/scripts/components/question-screen/panel/option.js @@ -45,7 +45,7 @@ export default class Option { */ buildDOM() { this.dom = document.createElement('div'); - this.dom.classList.add('h5p-personality-quiz-xr-answer-option'); + this.dom.classList.add('h5p-profile-configurator-answer-option'); this.dom.classList.add(`appearance-${this.params.appearance}`); if (this.params.mode === 'image') { this.dom.classList.add('has-image'); @@ -53,7 +53,7 @@ export default class Option { // Button this.button = document.createElement('button'); - this.button.classList.add('h5p-personality-quiz-xr-answer-option-button'); + this.button.classList.add('h5p-profile-configurator-answer-option-button'); this.button.addEventListener('click', () => { window.setTimeout(() => { @@ -82,7 +82,7 @@ export default class Option { // Image if (this.params.mode === 'image') { const image = document.createElement('img'); - image.classList.add('h5p-personality-quiz-xr-answer-option-button-image'); + image.classList.add('h5p-profile-configurator-answer-option-button-image'); image.setAttribute('alt', this.params.image.alt ?? ''); image.addEventListener('load', () => { this.params.globals.get('resize')(); @@ -96,7 +96,7 @@ export default class Option { // Button text this.buttonText = document.createElement('span'); this.buttonText.classList.add( - 'h5p-personality-quiz-xr-answer-option-button-text' + 'h5p-profile-configurator-answer-option-button-text' ); this.buttonText.innerText = this.params.text; this.button.append(this.buttonText); diff --git a/src/scripts/components/question-screen/panel/option.scss b/src/scripts/components/question-screen/panel/option.scss index 0a3fa73..05d8f65 100644 --- a/src/scripts/components/question-screen/panel/option.scss +++ b/src/scripts/components/question-screen/panel/option.scss @@ -3,10 +3,10 @@ to { background-position: 0%; color: var(--color-button-text-active); } } -.h5p-personality-quiz-xr-answer-option { +.h5p-profile-configurator-answer-option { height: 100%; - .h5p-personality-quiz-xr-answer-option-button { + .h5p-profile-configurator-answer-option-button { align-items: center; background: none; border: none; @@ -17,13 +17,13 @@ line-height: 1rem; padding: 0; - .h5p-personality-quiz-xr-answer-option-button-image { + .h5p-profile-configurator-answer-option-button-image { max-height: 15em; max-width: 15em; object-fit: cover; } - .h5p-personality-quiz-xr-answer-option-button-text { + .h5p-profile-configurator-answer-option-button-text { box-sizing: inherit; width: 100%; } @@ -34,7 +34,7 @@ } &.appearance-classic { - .h5p-personality-quiz-xr-answer-option-button { + .h5p-profile-configurator-answer-option-button { align-items: center; background: none; border: none; @@ -46,13 +46,13 @@ padding: 0; width: 100%; - .h5p-personality-quiz-xr-answer-option-button-image { + .h5p-profile-configurator-answer-option-button-image { flex-grow: 1; max-width: 100%; width: 100%; } - .h5p-personality-quiz-xr-answer-option-button-text { + .h5p-profile-configurator-answer-option-button-text { background: linear-gradient(to right, var(--color-button-active) 50%, #dddddd 50%) 100% center / 200% 100%; border-left: 5px solid var(--color-button-active); color: #000000; @@ -67,26 +67,26 @@ } &.selected { - .h5p-personality-quiz-xr-answer-option-button-text { + .h5p-profile-configurator-answer-option-button-text { background-position: 0%; color: var(--color-button-text-active); } - &:hover .h5p-personality-quiz-xr-answer-option-button-text:not(.animate) { + &:hover .h5p-profile-configurator-answer-option-button-text:not(.animate) { background: var(--color-button-active-hover); } } } &:not(.has-image) { - .h5p-personality-quiz-xr-answer-option-button:not(.selected):not([disabled]):hover { - .h5p-personality-quiz-xr-answer-option-button-text:not(.animate) { + .h5p-profile-configurator-answer-option-button:not(.selected):not([disabled]):hover { + .h5p-profile-configurator-answer-option-button-text:not(.animate) { background: #ececec; } } } &.has-image { - .h5p-personality-quiz-xr-answer-option-button { + .h5p-profile-configurator-answer-option-button { border-width: 4px; padding: 1em; @@ -111,7 +111,7 @@ } &.appearance-chat { - .h5p-personality-quiz-xr-answer-option-button { + .h5p-profile-configurator-answer-option-button { background-color: #eeeeee; border-radius: 1rem 1rem 0 1rem; box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.2); @@ -120,13 +120,13 @@ text-align: left; width: fit-content; - .h5p-personality-quiz-xr-answer-option-button-image { + .h5p-profile-configurator-answer-option-button-image { border-radius: 1rem 1rem 0 0; height: 10em; width: 15em; } - .h5p-personality-quiz-xr-answer-option-button-text { + .h5p-profile-configurator-answer-option-button-text { border-radius: 0 0 0 1rem; font-weight: normal; padding: 0.5rem 1rem; @@ -137,27 +137,27 @@ background-color: var(--color-button-active); color: var(--color-button-text-active); - .h5p-personality-quiz-xr-answer-option-button-text { + .h5p-profile-configurator-answer-option-button-text { background-color: var(--color-button-active); color: var(--color-button-text-active); } } &:not([disabled]):hover { - .h5p-personality-quiz-xr-answer-option-button-text:not(.animate) { + .h5p-profile-configurator-answer-option-button-text:not(.animate) { background: #cccccc; } } } &.has-image { - .h5p-personality-quiz-xr-answer-option-button-text { + .h5p-profile-configurator-answer-option-button-text { border-radius: 0 0 0 1rem; } } &:not(.has-image) { - .h5p-personality-quiz-xr-answer-option-button-text { + .h5p-profile-configurator-answer-option-button-text { border-radius: 1rem 1rem 0 1rem; } } diff --git a/src/scripts/components/question-screen/panel/panel.js b/src/scripts/components/question-screen/panel/panel.js index 7ad835a..8e2d17d 100644 --- a/src/scripts/components/question-screen/panel/panel.js +++ b/src/scripts/components/question-screen/panel/panel.js @@ -48,7 +48,7 @@ export default class Panel { */ buildDOM() { this.dom = document.createElement('div'); - this.dom.classList.add('h5p-personality-quiz-xr-panel'); + this.dom.classList.add('h5p-profile-configurator-panel'); this.dom.classList.add(`appearance-${this.params.appearance}`); // Visualization @@ -72,7 +72,7 @@ export default class Panel { ); const visualizationWrapper = document.createElement('div'); - visualizationWrapper.classList.add('h5p-personality-quiz-xr-visualization'); + visualizationWrapper.classList.add('h5p-profile-configurator-visualization'); visualizationWrapper.style.setProperty( '--max-visualization-height', @@ -109,7 +109,7 @@ export default class Panel { const questionTextId = H5P.createUUID(); this.questionText = document.createElement('div'); - this.questionText.classList.add('h5p-personality-quiz-xr-question'); + this.questionText.classList.add('h5p-profile-configurator-question'); this.questionText.setAttribute('id', questionTextId); this.dom.append(this.questionText); @@ -136,7 +136,7 @@ export default class Panel { // Options this.optionWrapper = document.createElement('ol'); - this.optionWrapper.classList.add('h5p-personality-quiz-xr-answer-options'); + this.optionWrapper.classList.add('h5p-profile-configurator-answer-options'); this.optionWrapper.classList.add(`mode-${mode}`); this.optionWrapper.setAttribute('aria-labelledby', questionTextId); // Some screenreaders do not real label unless role is set to group @@ -151,7 +151,7 @@ export default class Panel { this.params.answerOptions.forEach((option, index) => { const listItem = document.createElement('li'); - listItem.classList.add('h5p-personality-quiz-xr-answer-list-item'); + listItem.classList.add('h5p-profile-configurator-answer-list-item'); this.optionWrapper.append(listItem); const optionInstance = new Option( @@ -180,13 +180,13 @@ export default class Panel { if (this.params.allowsMultipleChoices && this.params.appearance === 'chat') { this.buttonDone = document.createElement('button'); - this.buttonDone.classList.add('h5p-personality-quiz-xr-button-done'); + this.buttonDone.classList.add('h5p-profile-configurator-button-done'); if (this.params.animation && this.params.appearance === 'chat') { this.buttonDone.classList.add('display-none'); } const label = document.createElement('span'); - label.classList.add('h5p-personality-quiz-xr-button-done-label'); + label.classList.add('h5p-profile-configurator-button-done-label'); label.innerText = this.params.dictionary.get('l10n.done'); this.buttonDone.append(label); diff --git a/src/scripts/components/question-screen/panel/panel.scss b/src/scripts/components/question-screen/panel/panel.scss index 125629c..865a7f4 100644 --- a/src/scripts/components/question-screen/panel/panel.scss +++ b/src/scripts/components/question-screen/panel/panel.scss @@ -4,7 +4,7 @@ 100% { opacity: 0; } } -.h5p-personality-quiz-xr-panel { +.h5p-profile-configurator-panel { align-content: center; display: flex; flex-direction: column; @@ -12,7 +12,7 @@ min-height: 4rem; width: 100%; - .h5p-personality-quiz-xr-visualization { + .h5p-profile-configurator-visualization { --max-visualization-height: 10rem; &.h5p-image img { @@ -31,16 +31,16 @@ } } - .h5p-personality-quiz-xr-question { + .h5p-profile-configurator-question { font-weight: bold; padding: 1em; text-align: center; } - .h5p-personality-quiz-xr-answer-options { + .h5p-profile-configurator-answer-options { padding: 0; - .h5p-personality-quiz-xr-answer-list-item { + .h5p-profile-configurator-answer-list-item { list-style: none; } @@ -48,7 +48,7 @@ grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 1rem; - .h5p-personality-quiz-xr-answer-list-item { + .h5p-profile-configurator-answer-list-item { height: 100%; } } @@ -59,26 +59,26 @@ } } - .h5p-personality-quiz-xr-button-done { + .h5p-profile-configurator-button-done { align-self: flex-end; font-size: 1rem; width: fit-content; } &.appearance-classic { - .h5p-personality-quiz-xr-question { + .h5p-profile-configurator-question { font-weight: bold; padding: 1em; text-align: center; } - .h5p-personality-quiz-xr-answer-options { + .h5p-profile-configurator-answer-options { display: grid; margin: 0; padding: 0; } - .h5p-personality-quiz-xr-button-done { + .h5p-profile-configurator-button-done { background-color: var(--color-button-background); background-size: cover; border: 0; @@ -121,7 +121,7 @@ margin-bottom: 0.5rem; min-height: 2.5rem; - .h5p-personality-quiz-xr-question { + .h5p-profile-configurator-question { background-color: #eeeeee; border-radius: 1rem 1rem 1rem 0; box-shadow: 0.125rem 0.125rem 0.25rem rgba(0 0 0 / 0.2); @@ -180,7 +180,7 @@ } } - .h5p-personality-quiz-xr-answer-options { + .h5p-profile-configurator-answer-options { align-self: flex-end; display: flex; flex-direction: row; @@ -214,7 +214,7 @@ } } - .h5p-personality-quiz-xr-button-done { + .h5p-profile-configurator-button-done { background-color: #eeeeee; border: none; border-radius: 1rem 1rem 0 1rem; @@ -226,7 +226,7 @@ text-align: left; width: fit-content; - .h5p-personality-quiz-xr-done-button-label { + .h5p-profile-configurator-done-button-label { border-radius: 0 0 0 1rem; font-weight: normal; padding: 0.5rem 1rem; diff --git a/src/scripts/components/question-screen/question-screen.js b/src/scripts/components/question-screen/question-screen.js index 1b56ca0..c75778f 100644 --- a/src/scripts/components/question-screen/question-screen.js +++ b/src/scripts/components/question-screen/question-screen.js @@ -33,7 +33,7 @@ export default class QuestionScreen { */ buildDOM() { this.dom = document.createElement('div'); - this.dom.classList.add('h5p-personality-quiz-xr-question-screen'); + this.dom.classList.add('h5p-profile-configurator-question-screen'); // Progressbar this.progressBar = new ProgressBar({ @@ -84,7 +84,7 @@ export default class QuestionScreen { }); this.panelWrapper = document.createElement('div'); - this.panelWrapper.classList.add('h5p-personality-quiz-xr-panel-wrapper'); + this.panelWrapper.classList.add('h5p-profile-configurator-panel-wrapper'); this.dom.append(this.panelWrapper); this.panels.forEach((panel) => { diff --git a/src/scripts/components/question-screen/question-screen.scss b/src/scripts/components/question-screen/question-screen.scss index f914f8d..c3058d0 100644 --- a/src/scripts/components/question-screen/question-screen.scss +++ b/src/scripts/components/question-screen/question-screen.scss @@ -1,9 +1,9 @@ -.h5p-personality-quiz-xr-question-screen { +.h5p-profile-configurator-question-screen { align-items: center; display: flex; flex-direction: column; - .h5p-personality-quiz-xr-panel-wrapper { + .h5p-profile-configurator-panel-wrapper { align-items: center; box-sizing: border-box; display: flex; diff --git a/src/scripts/components/result-screen/result-screen.js b/src/scripts/components/result-screen/result-screen.js index c0253fa..a4753fd 100644 --- a/src/scripts/components/result-screen/result-screen.js +++ b/src/scripts/components/result-screen/result-screen.js @@ -41,38 +41,38 @@ export default class ResultScreen { */ buildDOM() { this.dom = document.createElement('div'); - this.dom.classList.add('h5p-personality-quiz-xr-result-screen'); + this.dom.classList.add('h5p-profile-configurator-result-screen'); this.title = document.createElement('p'); this.title.classList.add( - 'h5p-personality-quiz-xr-result-screen-explanation-title' + 'h5p-profile-configurator-result-screen-explanation-title' ); this.title.classList.add('display-none'); this.dom.append(this.title); const row = document.createElement('div'); - row.classList.add('h5p-personality-quiz-xr-result-screen-row'); + row.classList.add('h5p-profile-configurator-result-screen-row'); // Visualization this.visualizationWrapper = document.createElement('div'); - this.visualizationWrapper.classList.add('h5p-personality-quiz-xr-visualization'); + this.visualizationWrapper.classList.add('h5p-profile-configurator-visualization'); this.visualizationWrapper.classList.add('display-none'); row.append(this.visualizationWrapper); this.detailsDOM = document.createElement('div'); - this.detailsDOM.classList.add('h5p-personality-quiz-xr-result-screen-details'); + this.detailsDOM.classList.add('h5p-profile-configurator-result-screen-details'); row.append(this.detailsDOM); // Personality explanation this.explanation = document.createElement('div'); this.explanation.classList.add( - 'h5p-personality-quiz-xr-result-screen-explanation' + 'h5p-profile-configurator-result-screen-explanation' ); this.explanation.classList.add('display-none'); this.description = document.createElement('p'); this.description.classList.add( - 'h5p-personality-quiz-xr-result-screen-explanation-description' + 'h5p-profile-configurator-result-screen-explanation-description' ); this.explanation.append(this.description); this.detailsDOM.append(this.explanation); @@ -80,28 +80,28 @@ export default class ResultScreen { // Options chosen this.optionsChosen = document.createElement('div'); this.optionsChosen.classList.add( - 'h5p-personality-quiz-xr-result-screen-options-chosen' + 'h5p-profile-configurator-result-screen-options-chosen' ); this.optionsChosen.classList.add('display-none'); this.detailsDOM.append(this.optionsChosen); this.choicesTitle = document.createElement('p'); - this.choicesTitle.classList.add('h5p-personality-quiz-xr-result-screen-choices-title'); + this.choicesTitle.classList.add('h5p-profile-configurator-result-screen-choices-title'); this.choicesTitle.innerText = this.params.dictionary.get('l10n.yourChoices'); this.optionsChosen.append(this.choicesTitle); this.choices = document.createElement('ul'); - this.choices.classList.add('h5p-personality-quiz-xr-result-screen-choices'); + this.choices.classList.add('h5p-profile-configurator-result-screen-choices'); this.optionsChosen.append(this.choices); this.dom.append(row); const buttonWrapper = document.createElement('div'); - buttonWrapper.classList.add('h5p-personality-quiz-xr-result-screen-buttons'); + buttonWrapper.classList.add('h5p-profile-configurator-result-screen-buttons'); if (this.params.allowReview) { this.buttonBack = document.createElement('button'); - this.buttonBack.classList.add('h5p-personality-quiz-xr-result-screen-button'); + this.buttonBack.classList.add('h5p-profile-configurator-result-screen-button'); this.buttonBack.innerText = this.params.l10n.review; this.buttonBack.addEventListener('click', () => { this.callbacks.onBack(); @@ -110,7 +110,7 @@ export default class ResultScreen { } this.buttonReset = document.createElement('button'); - this.buttonReset.classList.add('h5p-personality-quiz-xr-result-screen-button'); + this.buttonReset.classList.add('h5p-profile-configurator-result-screen-button'); this.buttonReset.innerText = this.params.l10n.reset; this.buttonReset.addEventListener('click', () => { this.callbacks.onReset(); @@ -191,12 +191,12 @@ export default class ResultScreen { .map((choice) => { const choiceItem = document.createElement('li'); choiceItem.classList.add( - 'h5p-personality-quiz-xr-result-screen-choices-list-item' + 'h5p-profile-configurator-result-screen-choices-list-item' ); const questionDOM = document.createElement('p'); questionDOM.classList.add( - 'h5p-personality-quiz-xr-result-screen-choices-question' + 'h5p-profile-configurator-result-screen-choices-question' ); questionDOM.innerText = choice.question; @@ -207,7 +207,7 @@ export default class ResultScreen { const choicesDOM = document.createElement('p'); choicesDOM.classList.add( - 'h5p-personality-quiz-xr-result-screen-choices-options' + 'h5p-profile-configurator-result-screen-choices-options' ); choicesDOM.innerHTML = options.join(', '); diff --git a/src/scripts/components/result-screen/result-screen.scss b/src/scripts/components/result-screen/result-screen.scss index 80b43ab..a53eba6 100644 --- a/src/scripts/components/result-screen/result-screen.scss +++ b/src/scripts/components/result-screen/result-screen.scss @@ -1,4 +1,4 @@ -.h5p-personality-quiz-xr-result-screen { +.h5p-profile-configurator-result-screen { align-items: center; background-position: 50% 50%; background-repeat: no-repeat; @@ -16,21 +16,21 @@ opacity: 0; } - .h5p-personality-quiz-xr-result-screen-explanation-title { + .h5p-profile-configurator-result-screen-explanation-title { align-self: flex-start; font-size: 1.5rem; font-weight: bold; margin: 0; } - .h5p-personality-quiz-xr-result-screen-row { + .h5p-profile-configurator-result-screen-row { box-sizing: border-box; display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr)); width: 100%; - .h5p-personality-quiz-xr-visualization { + .h5p-profile-configurator-visualization { &.h5p-image img { margin: 0 auto; height: auto !important; @@ -53,7 +53,7 @@ } } - .h5p-personality-quiz-xr-result-screen-details { + .h5p-profile-configurator-result-screen-details { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr)); @@ -63,11 +63,11 @@ } } - .h5p-personality-quiz-xr-result-screen-explanation { + .h5p-profile-configurator-result-screen-explanation { background-color: rgba(233, 239, 247, 0.8); padding: 1rem; - .h5p-personality-quiz-xr-result-screen-explanation-description { + .h5p-profile-configurator-result-screen-explanation-description { margin-bottom: 0; margin-top: 0; word-break: break-all; @@ -90,17 +90,17 @@ } } - .h5p-personality-quiz-xr-result-screen-options-chosen { + .h5p-profile-configurator-result-screen-options-chosen { background-color: rgba(233, 239, 247, 0.8); padding: 1rem; - .h5p-personality-quiz-xr-result-screen-choices-title { + .h5p-profile-configurator-result-screen-choices-title { font-size: 1.5rem; font-weight: bold; margin: 0; } - .h5p-personality-quiz-xr-result-screen-choices { + .h5p-profile-configurator-result-screen-choices { list-style: none; margin-bottom: 0; padding: 0; @@ -109,15 +109,15 @@ margin-bottom: 0; } - .h5p-personality-quiz-xr-result-screen-choices-list-item { + .h5p-profile-configurator-result-screen-choices-list-item { margin-bottom: 1rem; - .h5p-personality-quiz-xr-result-screen-choices-question { + .h5p-profile-configurator-result-screen-choices-question { font-size: 1.2rem; margin: 0 0 0.5rem 0; } - .h5p-personality-quiz-xr-result-screen-choices-options { + .h5p-profile-configurator-result-screen-choices-options { margin: 0; } } @@ -129,13 +129,13 @@ } } - .h5p-personality-quiz-xr-result-screen-buttons { + .h5p-profile-configurator-result-screen-buttons { display: flex; flex-direction: row; justify-items: center; gap: 1rem; - .h5p-personality-quiz-xr-result-screen-button { + .h5p-profile-configurator-result-screen-button { background-color: var(--color-button-background); background-size: cover; border: 0; diff --git a/src/scripts/h5p-profiler.js b/src/scripts/h5p-profile-configurator.js similarity index 96% rename from src/scripts/h5p-profiler.js rename to src/scripts/h5p-profile-configurator.js index c64634d..ef9f677 100644 --- a/src/scripts/h5p-profiler.js +++ b/src/scripts/h5p-profile-configurator.js @@ -7,7 +7,7 @@ import QuestionTypeContract from '@mixins/question-type-contract.js'; import Sanitization from '@mixins/sanitization.js'; import XAPI from '@mixins/xapi.js'; import Color from 'color'; -import '@styles/h5p-profiler.scss'; +import '@styles/h5p-profile-configurator.scss'; /** @constant {number} HOVER_COLOR_LIGHTNESS_DELTA Factor to lighten/darken a hover color. */ const HOVER_COLOR_LIGHTNESS_DELTA = 0.25; @@ -19,9 +19,9 @@ const ACTIVE_COLOR_LIGHTNESS_DELTA = 0.37; const PALE_COLOR_FACTOR = 0.9; /** @constant {string} DEFAULT_DESCRIPTION description */ -const DEFAULT_DESCRIPTION = 'Profiler'; +const DEFAULT_DESCRIPTION = 'ProfileConfigurator'; -export default class Profiler extends H5P.EventDispatcher { +export default class ProfileConfigurator extends H5P.EventDispatcher { /** * @class * @param {object} params Parameters passed by the editor. @@ -32,7 +32,7 @@ export default class Profiler extends H5P.EventDispatcher { super(); Util.addMixins( - Profiler, [QuestionTypeContract, Sanitization, XAPI] + ProfileConfigurator, [QuestionTypeContract, Sanitization, XAPI] ); // Sanitize parameters @@ -127,7 +127,7 @@ export default class Profiler extends H5P.EventDispatcher { * @param {H5P.jQuery} $wrapper Content's container. */ attach($wrapper) { - $wrapper.get(0).classList.add('h5p-personality-quiz-xr'); + $wrapper.get(0).classList.add('h5p-profile-configurator'); $wrapper.get(0).appendChild(this.dom); } @@ -149,7 +149,7 @@ export default class Profiler extends H5P.EventDispatcher { */ buildDOM() { const dom = document.createElement('div'); - dom.classList.add('h5p-personality-quiz-xr-main'); + dom.classList.add('h5p-profile-configurator-main'); this.content = new Content( { diff --git a/src/styles/h5p-profiler.scss b/src/styles/h5p-profile-configurator.scss similarity index 81% rename from src/styles/h5p-profiler.scss rename to src/styles/h5p-profile-configurator.scss index 3a30de0..c2b001b 100644 --- a/src/styles/h5p-profiler.scss +++ b/src/styles/h5p-profile-configurator.scss @@ -4,7 +4,7 @@ html { box-sizing: border-box; } -.h5p-personality-quiz-xr { +.h5p-profile-configurator { background-color: main.$color-background; color: main.$color-text; } diff --git a/upgrades.js b/upgrades.js index 8e520e8..969303b 100644 --- a/upgrades.js +++ b/upgrades.js @@ -1,5 +1,5 @@ /* global H5PUpgrades */ -H5PUpgrades['H5P.Profiler'] = (() => { +H5PUpgrades['H5P.ProfileConfigurator'] = (() => { // Avoiding to use H5P.createUUID as H5P function may change const createUUID = () => { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'