From a482301f3f897450db90a654580388ecc6a89558 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Latzarus?= Date: Mon, 7 Oct 2024 10:32:05 +0200 Subject: [PATCH 1/4] feat(api): improve modulix seeds content --- .../modules/didacticiel-modulix.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/api/src/devcomp/infrastructure/datasources/learning-content/modules/didacticiel-modulix.json b/api/src/devcomp/infrastructure/datasources/learning-content/modules/didacticiel-modulix.json index 1d68fa73605..b6d5006de09 100644 --- a/api/src/devcomp/infrastructure/datasources/learning-content/modules/didacticiel-modulix.json +++ b/api/src/devcomp/infrastructure/datasources/learning-content/modules/didacticiel-modulix.json @@ -47,10 +47,10 @@ "element": { "id": "47823e8f-a4af-44d6-96f7-5b6fc7bc6b51", "type": "flashcards", - "title": "Introduction à l'adresse e-mail", + "title": "Introduction à la poésie", "instruction": "

...

", "introImage": { - "url": "https://example.org/image.jpeg" + "url": "https://images.pix.fr/modulix/didacticiel/intro-flashcards.png" }, "cards": [ { @@ -59,7 +59,7 @@ "image": { "url": "https://images.pix.fr/modulix/didacticiel/icon.svg" }, - "text": "Qui a écrit le Dormeur du Val ?" + "text": "Qui a écrit « Le Dormeur du Val ? »" }, "verso": { "image": { @@ -71,7 +71,7 @@ { "id": "48d0cd29-1e08-4b18-b15a-411ab83e5d3c", "recto": { - "text": "Comment s'appelait la fille de Victor Hugo, évoquée dans le poème 'Demain dès l'aube' ?" + "text": "Comment s'appelait la fille de Victor Hugo, évoquée dans le poème « Demain dès l'aube » ?" }, "verso": { "text": "

Léopoldine

" @@ -83,13 +83,13 @@ "image": { "url": "https://images.pix.fr/modulix/didacticiel/icon.svg" }, - "text": "Quel animal a des yeux 'mêlés de métal et d'agathe' selon Charles Baudelaire ?" + "text": "Quel animal a des yeux « mêlés de métal et d'agathe » selon Charles Baudelaire ?" }, "verso": { "image": { "url": "https://images.pix.fr/modulix/didacticiel/chaton.jpg" }, - "text": "

Un chat

" + "text": "

Le chat

" } } ] From 961976124f35df1f256518d34e4e5e43dbfdbb54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Latzarus?= Date: Mon, 7 Oct 2024 11:15:17 +0200 Subject: [PATCH 2/4] feat(api): add intro card component for modulix flash cards --- .../module/element/flashcards-intro-card.gjs | 22 ++++++ .../styles/components/module/_flashcards.scss | 14 +++- .../module/flashcards-intro-card_test.gjs | 68 +++++++++++++++++++ mon-pix/translations/en.json | 1 + mon-pix/translations/es.json | 1 + mon-pix/translations/fr.json | 1 + mon-pix/translations/nl.json | 1 + 7 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 mon-pix/app/components/module/element/flashcards-intro-card.gjs create mode 100644 mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs diff --git a/mon-pix/app/components/module/element/flashcards-intro-card.gjs b/mon-pix/app/components/module/element/flashcards-intro-card.gjs new file mode 100644 index 00000000000..90abd55199f --- /dev/null +++ b/mon-pix/app/components/module/element/flashcards-intro-card.gjs @@ -0,0 +1,22 @@ +import PixButton from '@1024pix/pix-ui/components/pix-button'; +import { t } from 'ember-intl'; + + diff --git a/mon-pix/app/styles/components/module/_flashcards.scss b/mon-pix/app/styles/components/module/_flashcards.scss index ed6852be2c8..05e0586f961 100644 --- a/mon-pix/app/styles/components/module/_flashcards.scss +++ b/mon-pix/app/styles/components/module/_flashcards.scss @@ -1,5 +1,6 @@ .element-flashcards { - &__card { + &__card, + &__intro-card { display: flex; flex-direction: column; justify-content: space-between; @@ -13,6 +14,17 @@ box-shadow: 0 12px 24px 0 rgb(7 20 46 / 12%); } + &__intro-card { + align-items: center; + padding: var(--pix-spacing-2x); + padding-bottom: var(--pix-spacing-6x); + border: 0; + } + + &__intro-card__title { + @extend %pix-title-s; + } + &__footer { display: flex; flex-direction: column; diff --git a/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs b/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs new file mode 100644 index 00000000000..3a7ec9e5486 --- /dev/null +++ b/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs @@ -0,0 +1,68 @@ +import { clickByName, render } from '@1024pix/ember-testing-library'; +import { t } from 'ember-intl/test-support'; +import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards-intro-card'; +// eslint-disable-next-line no-restricted-imports +import { module, test } from 'qunit'; +import sinon from 'sinon'; + +import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering'; + +module('Integration | Component | Module | Flashcards Intro Card', function (hooks) { + setupIntlRenderingTest(hooks); + + test('should display an intro card', async function (assert) { + // given + const introImage = { + url: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg', + }; + const title = 'Introduction à la poésie'; + + // when + const screen = await render( + , + ); + + // then + assert.ok(screen.getByText('Introduction à la poésie')); + assert.strictEqual( + screen.getByRole('presentation').getAttribute('src'), + 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg', + ); + assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.start') })).exists(); + }); + + test('should not display image if not provided', async function (assert) { + // given + const introImage = undefined; + const title = 'Introduction à la poésie'; + + // when + const screen = await render( + , + ); + + // then + assert.dom(screen.queryByRole('img')).doesNotExist(); + }); + + module('when we click on "Commencer"', function () { + test('should call the onStart method', async function (assert) { + // given + const introImage = undefined; + const title = 'Introduction à la poésie'; + const onStartStub = sinon.stub(); + + await render( + , + ); + + // when + await clickByName(t('pages.modulix.buttons.flashcards.start')); + + // then + assert.true(onStartStub.calledOnce); + }); + }); +}); diff --git a/mon-pix/translations/en.json b/mon-pix/translations/en.json index a48aa7a1110..91a7c084534 100644 --- a/mon-pix/translations/en.json +++ b/mon-pix/translations/en.json @@ -1380,6 +1380,7 @@ } }, "flashcards": { + "start": "Start", "seeAnswer": "See the answer", "seeAgain": "Review the question", "nextCard": "Next" diff --git a/mon-pix/translations/es.json b/mon-pix/translations/es.json index 343c1f70f25..53a247120c3 100644 --- a/mon-pix/translations/es.json +++ b/mon-pix/translations/es.json @@ -1357,6 +1357,7 @@ } }, "flashcards": { + "start" : "Para empezar", "seeAnswer" : "ver la respuesta", "seeAgain": "Revisa la pregunta", "nextCard": "Siguiente" diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json index 1b478b2468c..a5f2c6aea2e 100644 --- a/mon-pix/translations/fr.json +++ b/mon-pix/translations/fr.json @@ -1380,6 +1380,7 @@ } }, "flashcards": { + "continuer": "Continuer", "seeAnswer": "Voir la réponse", "seeAgain": "Revoir la question", "nextCard": "Suivant" diff --git a/mon-pix/translations/nl.json b/mon-pix/translations/nl.json index a410e07caa5..9c4e4e5491e 100644 --- a/mon-pix/translations/nl.json +++ b/mon-pix/translations/nl.json @@ -1357,6 +1357,7 @@ } }, "flashcards": { + "start": "Beginnen", "seeAnswer" : "Zie het antwoord", "seeAgain": "Bekijk de vraag", "nextCard": "Volgende" From 7b0f6a650fd8bf25de710b609c1ab7a3b5a63084 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Latzarus?= Date: Mon, 7 Oct 2024 11:59:47 +0200 Subject: [PATCH 3/4] feat(api): display intro cards before cards in modulix Flashcards element --- .../components/module/element/flashcards.gjs | 67 +++++++++++----- .../components/module/element_test.gjs | 2 +- .../components/module/flashcards_test.gjs | 76 +++++++++++++++++-- .../components/module/grain_test.gjs | 2 +- mon-pix/translations/fr.json | 2 +- 5 files changed, 117 insertions(+), 32 deletions(-) diff --git a/mon-pix/app/components/module/element/flashcards.gjs b/mon-pix/app/components/module/element/flashcards.gjs index 022e08d33df..5a0e84066d5 100644 --- a/mon-pix/app/components/module/element/flashcards.gjs +++ b/mon-pix/app/components/module/element/flashcards.gjs @@ -5,12 +5,20 @@ import { tracked } from '@glimmer/tracking'; import { t } from 'ember-intl'; import { eq } from 'ember-truth-helpers'; import ModulixFlashcardsCard from 'mon-pix/components/module/element/flashcards-card'; +import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards-intro-card'; export default class ModulixFlashcards extends Component { @tracked /** * Displayed side of the card on the screen - * @type {'recto'|'verso'} + * @type {"intro"|"cards"|"outro"} + */ + currentStep = 'intro'; + + @tracked + /** + * Displayed side of the card on the screen + * @type {"recto"|"verso"} */ displayedSideName = 'recto'; @@ -33,6 +41,11 @@ export default class ModulixFlashcards extends Component { return this.args.flashcards.cards.length; } + @action + start() { + this.currentStep = 'cards'; + } + @action flipCard() { this.displayedSideName = this.displayedSideName === 'recto' ? 'verso' : 'recto'; @@ -46,27 +59,39 @@ export default class ModulixFlashcards extends Component { } diff --git a/mon-pix/tests/integration/components/module/element_test.gjs b/mon-pix/tests/integration/components/module/element_test.gjs index 6c4020a6dd8..18849ead867 100644 --- a/mon-pix/tests/integration/components/module/element_test.gjs +++ b/mon-pix/tests/integration/components/module/element_test.gjs @@ -252,6 +252,6 @@ module('Integration | Component | Module | Element', function (hooks) { ); // then - assert.dom(screen.getByRole('button', { name: 'Voir la réponse' })).exists(); + assert.dom(screen.getByRole('button', { name: 'Commencer' })).exists(); }); }); diff --git a/mon-pix/tests/integration/components/module/flashcards_test.gjs b/mon-pix/tests/integration/components/module/flashcards_test.gjs index f88540db5a5..34cc24de01e 100644 --- a/mon-pix/tests/integration/components/module/flashcards_test.gjs +++ b/mon-pix/tests/integration/components/module/flashcards_test.gjs @@ -9,7 +9,7 @@ import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering'; module('Integration | Component | Module | Flashcards', function (hooks) { setupIntlRenderingTest(hooks); - test('should display the given card', async function (assert) { + test('should display the intro card by default', async function (assert) { // given const firstCard = { id: 'e1de6394-ff88-4de3-8834-a40057a50ff4', @@ -45,7 +45,7 @@ module('Integration | Component | Module | Flashcards', function (hooks) { type: 'flashcards', title: "Introduction à l'adresse e-mail", instruction: '

...

', - introImage: { url: 'https://images.pix.fr/modulix/placeholder-details.svg' }, + introImage: { url: 'https://images.pix.fr/modulix/flashcards-intro.png' }, cards: [firstCard, secondCard], }; @@ -53,17 +53,76 @@ module('Integration | Component | Module | Flashcards', function (hooks) { const screen = await render(); // then - assert.ok(screen.getByText("A quoi sert l'arobase dans mon adresse email ?")); + assert.ok(screen.getByText("Introduction à l'adresse e-mail")); assert.strictEqual( screen.getByRole('presentation').getAttribute('src'), - 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg', + 'https://images.pix.fr/modulix/flashcards-intro.png', ); - assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.seeAnswer') })).exists(); - assert.ok(screen.getByText(t('pages.modulix.flashcards.direction'))); - assert.ok(screen.getByText(t('pages.modulix.flashcards.position', { currentCardPosition: 1, totalCards: 2 }))); + assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.start') })).exists(); + assert.dom(screen.queryByText(t('pages.modulix.flashcards.direction'))).doesNotExist(); + assert + .dom(screen.queryByText(t('pages.modulix.flashcards.position', { currentCardPosition: 1, totalCards: 2 }))) + .doesNotExist(); }); - module('when we click on Next button', function () { + module('when user clicks on the "Start" button', function () { + test('should display the first card', async function (assert) { + // given + const firstCard = { + id: 'e1de6394-ff88-4de3-8834-a40057a50ff4', + recto: { + image: { + url: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg', + }, + text: "A quoi sert l'arobase dans mon adresse email ?", + }, + verso: { + image: { url: 'https://images.pix.fr/modulix/didacticiel/ordi-spatial.svg' }, + text: "Parce que c'est joli", + }, + }; + const secondCard = { + id: 'e1de6394-ff88-4de3-8834-a40057a50ff4', + recto: { + image: { + url: 'https://images.pix.fr/modulix/didacticiel/icon.svg', + }, + text: 'Qui a écrit le Dormeur du Val ?', + }, + verso: { + image: { + url: 'https://images.pix.fr/modulix/didacticiel/chaton.jpg', + }, + text: '

Arthur Rimbaud

', + }, + }; + + const flashcards = { + id: '71de6394-ff88-4de3-8834-a40057a50ff4', + type: 'flashcards', + title: "Introduction à l'adresse e-mail", + instruction: '

...

', + introImage: { url: 'https://images.pix.fr/modulix/placeholder-details.svg' }, + cards: [firstCard, secondCard], + }; + + // when + const screen = await render(); + await clickByName(t('pages.modulix.buttons.flashcards.start')); + + // then + assert.ok(screen.getByText("A quoi sert l'arobase dans mon adresse email ?")); + assert.strictEqual( + screen.getByRole('presentation').getAttribute('src'), + 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg', + ); + assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.seeAnswer') })).exists(); + assert.ok(screen.getByText(t('pages.modulix.flashcards.direction'))); + assert.ok(screen.getByText(t('pages.modulix.flashcards.position', { currentCardPosition: 1, totalCards: 2 }))); + }); + }); + + module('when users clicks on the "Continue" then "Next" button', function () { test('should display the next card', async function (assert) { // given const firstCard = { @@ -106,6 +165,7 @@ module('Integration | Component | Module | Flashcards', function (hooks) { // when const screen = await render(); + await clickByName(t('pages.modulix.buttons.flashcards.start')); await clickByName(t('pages.modulix.buttons.flashcards.seeAnswer')); await clickByName(t('pages.modulix.buttons.flashcards.nextCard')); diff --git a/mon-pix/tests/integration/components/module/grain_test.gjs b/mon-pix/tests/integration/components/module/grain_test.gjs index b06668ec766..36200c0dfbb 100644 --- a/mon-pix/tests/integration/components/module/grain_test.gjs +++ b/mon-pix/tests/integration/components/module/grain_test.gjs @@ -299,7 +299,7 @@ module('Integration | Component | Module | Grain', function (hooks) { `); // then - assert.dom(screen.getByRole('button', { name: 'Voir la réponse' })).exists(); + assert.dom(screen.getByRole('button', { name: 'Commencer' })).exists(); }); }); diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json index a5f2c6aea2e..1a0cff9f536 100644 --- a/mon-pix/translations/fr.json +++ b/mon-pix/translations/fr.json @@ -1380,7 +1380,7 @@ } }, "flashcards": { - "continuer": "Continuer", + "start": "Commencer", "seeAnswer": "Voir la réponse", "seeAgain": "Revoir la question", "nextCard": "Suivant" From 910cebc0a4b986933d5fe6e697a79dd28277f080 Mon Sep 17 00:00:00 2001 From: dianeCdrPix Date: Tue, 8 Oct 2024 11:06:07 +0200 Subject: [PATCH 4/4] refactor(mon-pix): create folder flashcards in element --- mon-pix/app/components/module/element.gjs | 2 +- .../module/element/{ => flashcards}/flashcards-card.gjs | 0 .../module/element/{ => flashcards}/flashcards-intro-card.gjs | 0 .../components/module/element/{ => flashcards}/flashcards.gjs | 4 ++-- .../integration/components/module/flashcards-card_test.gjs | 2 +- .../components/module/flashcards-intro-card_test.gjs | 2 +- .../tests/integration/components/module/flashcards_test.gjs | 2 +- 7 files changed, 6 insertions(+), 6 deletions(-) rename mon-pix/app/components/module/element/{ => flashcards}/flashcards-card.gjs (100%) rename mon-pix/app/components/module/element/{ => flashcards}/flashcards-intro-card.gjs (100%) rename mon-pix/app/components/module/element/{ => flashcards}/flashcards.gjs (97%) diff --git a/mon-pix/app/components/module/element.gjs b/mon-pix/app/components/module/element.gjs index d25217d65e9..140b996f1bc 100644 --- a/mon-pix/app/components/module/element.gjs +++ b/mon-pix/app/components/module/element.gjs @@ -3,7 +3,7 @@ import Component from '@glimmer/component'; import { eq } from 'ember-truth-helpers'; import DownloadElement from 'mon-pix/components/module/element/download'; import EmbedElement from 'mon-pix/components/module/element/embed'; -import FlashcardsElement from 'mon-pix/components/module/element/flashcards'; +import FlashcardsElement from 'mon-pix/components/module/element/flashcards/flashcards'; import ImageElement from 'mon-pix/components/module/element/image'; import QcmElement from 'mon-pix/components/module/element/qcm'; import QcuElement from 'mon-pix/components/module/element/qcu'; diff --git a/mon-pix/app/components/module/element/flashcards-card.gjs b/mon-pix/app/components/module/element/flashcards/flashcards-card.gjs similarity index 100% rename from mon-pix/app/components/module/element/flashcards-card.gjs rename to mon-pix/app/components/module/element/flashcards/flashcards-card.gjs diff --git a/mon-pix/app/components/module/element/flashcards-intro-card.gjs b/mon-pix/app/components/module/element/flashcards/flashcards-intro-card.gjs similarity index 100% rename from mon-pix/app/components/module/element/flashcards-intro-card.gjs rename to mon-pix/app/components/module/element/flashcards/flashcards-intro-card.gjs diff --git a/mon-pix/app/components/module/element/flashcards.gjs b/mon-pix/app/components/module/element/flashcards/flashcards.gjs similarity index 97% rename from mon-pix/app/components/module/element/flashcards.gjs rename to mon-pix/app/components/module/element/flashcards/flashcards.gjs index 5a0e84066d5..6cc95ffaa4e 100644 --- a/mon-pix/app/components/module/element/flashcards.gjs +++ b/mon-pix/app/components/module/element/flashcards/flashcards.gjs @@ -4,8 +4,8 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { t } from 'ember-intl'; import { eq } from 'ember-truth-helpers'; -import ModulixFlashcardsCard from 'mon-pix/components/module/element/flashcards-card'; -import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards-intro-card'; +import ModulixFlashcardsCard from 'mon-pix/components/module/element/flashcards/flashcards-card'; +import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards/flashcards-intro-card'; export default class ModulixFlashcards extends Component { @tracked diff --git a/mon-pix/tests/integration/components/module/flashcards-card_test.gjs b/mon-pix/tests/integration/components/module/flashcards-card_test.gjs index ccbdd0383ea..18636f8b647 100644 --- a/mon-pix/tests/integration/components/module/flashcards-card_test.gjs +++ b/mon-pix/tests/integration/components/module/flashcards-card_test.gjs @@ -1,6 +1,6 @@ import { clickByName, render } from '@1024pix/ember-testing-library'; import { t } from 'ember-intl/test-support'; -import ModulixFlashcardsCard from 'mon-pix/components/module/element/flashcards-card'; +import ModulixFlashcardsCard from 'mon-pix/components/module/element/flashcards/flashcards-card'; // eslint-disable-next-line no-restricted-imports import { module, test } from 'qunit'; import sinon from 'sinon'; diff --git a/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs b/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs index 3a7ec9e5486..f9f75a7d87e 100644 --- a/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs +++ b/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs @@ -1,6 +1,6 @@ import { clickByName, render } from '@1024pix/ember-testing-library'; import { t } from 'ember-intl/test-support'; -import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards-intro-card'; +import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards/flashcards-intro-card'; // eslint-disable-next-line no-restricted-imports import { module, test } from 'qunit'; import sinon from 'sinon'; diff --git a/mon-pix/tests/integration/components/module/flashcards_test.gjs b/mon-pix/tests/integration/components/module/flashcards_test.gjs index 34cc24de01e..8bae707f017 100644 --- a/mon-pix/tests/integration/components/module/flashcards_test.gjs +++ b/mon-pix/tests/integration/components/module/flashcards_test.gjs @@ -1,6 +1,6 @@ import { clickByName, render } from '@1024pix/ember-testing-library'; import { t } from 'ember-intl/test-support'; -import ModulixFlashcards from 'mon-pix/components/module/element/flashcards'; +import ModulixFlashcards from 'mon-pix/components/module/element/flashcards/flashcards'; // eslint-disable-next-line no-restricted-imports import { module, test } from 'qunit';