From 844217dd295604adee8da6995737a0fca9c7e118 Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Mon, 28 Oct 2024 14:30:42 +0100
Subject: [PATCH 1/3] sr(api): edit flashcards-schema to display instruction
 before title

---
 .../learning-content/validation/element/flashcards-schema.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/tests/devcomp/unit/infrastructure/datasources/learning-content/validation/element/flashcards-schema.js b/api/tests/devcomp/unit/infrastructure/datasources/learning-content/validation/element/flashcards-schema.js
index 7f0ad11b930..167b01416eb 100644
--- a/api/tests/devcomp/unit/infrastructure/datasources/learning-content/validation/element/flashcards-schema.js
+++ b/api/tests/devcomp/unit/infrastructure/datasources/learning-content/validation/element/flashcards-schema.js
@@ -19,8 +19,8 @@ const versoSide = Joi.object({
 const flashcardsElementSchema = Joi.object({
   id: uuidSchema,
   type: Joi.string().valid('flashcards').required(),
-  title: htmlNotAllowedSchema.required(),
   instruction: htmlSchema.optional(),
+  title: htmlNotAllowedSchema.required(),
   introImage: image,
   cards: Joi.array().items({
     id: uuidSchema,

From 7b425a9682713ed14764775c92a43112275ceef6 Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Mon, 28 Oct 2024 16:41:17 +0100
Subject: [PATCH 2/3] feat(api): add instruction value in Flashcards in
 didacticiel module.

---
 .../learning-content/modules/didacticiel-modulix.json           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 b6d5006de09..9881510b9cd 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,8 +47,8 @@
           "element": {
             "id": "47823e8f-a4af-44d6-96f7-5b6fc7bc6b51",
             "type": "flashcards",
+            "instruction": "<p>Lisez la question, essayez de trouver la réponse puis retourner la carte en cliquant dessus.<br>Cela permet de tester votre mémoire 🎯</p>",
             "title": "Introduction à la poésie",
-            "instruction": "<p>...</p>",
             "introImage": {
               "url": "https://images.pix.fr/modulix/didacticiel/intro-flashcards.png"
             },

From 95bad70f0cc46116aaf512a6884a5c2d18fa9df4 Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Mon, 28 Oct 2024 16:45:13 +0100
Subject: [PATCH 3/3] feat(mon-pix): display instruction in flashcards element.

---
 .../module/element/flashcards/flashcards.gjs      |  4 ++++
 .../app/styles/components/module/_flashcards.scss |  5 +++++
 .../components/module/flashcards_test.gjs         | 15 ++++++++++++++-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/mon-pix/app/components/module/element/flashcards/flashcards.gjs b/mon-pix/app/components/module/element/flashcards/flashcards.gjs
index b3750c5a5b8..b90de0d3a34 100644
--- a/mon-pix/app/components/module/element/flashcards/flashcards.gjs
+++ b/mon-pix/app/components/module/element/flashcards/flashcards.gjs
@@ -9,6 +9,7 @@ import { eq } from 'ember-truth-helpers';
 import ModulixFlashcardsCard from 'mon-pix/components/module/element/flashcards/flashcards-card';
 import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards/flashcards-intro-card';
 import ModulixFlashcardsOutroCard from 'mon-pix/components/module/element/flashcards/flashcards-outro-card';
+import htmlUnsafe from 'mon-pix/helpers/html-unsafe';
 
 const INITIAL_COUNTERS_VALUE = { yes: 0, almost: 0, no: 0 };
 
@@ -113,6 +114,9 @@ export default class ModulixFlashcards extends Component {
   }
 
   <template>
+    <div class="element-flashcards__instruction">
+      {{htmlUnsafe @flashcards.instruction}}
+    </div>
     <div class="element-flashcards">
       {{#if this.modulixPreviewMode.isEnabled}}
         <ModulixFlashcardsIntroCard
diff --git a/mon-pix/app/styles/components/module/_flashcards.scss b/mon-pix/app/styles/components/module/_flashcards.scss
index 22d3b2cfee8..af50547cb8b 100644
--- a/mon-pix/app/styles/components/module/_flashcards.scss
+++ b/mon-pix/app/styles/components/module/_flashcards.scss
@@ -7,6 +7,11 @@
   background-repeat: no-repeat;
   background-position: top center;
 
+  &__instruction {
+    padding-bottom: var(--pix-spacing-6x);
+    font-weight: var(--pix-font-medium);
+  }
+
   &__recto-verso {
     display: flex;
 
diff --git a/mon-pix/tests/integration/components/module/flashcards_test.gjs b/mon-pix/tests/integration/components/module/flashcards_test.gjs
index 81d6fc821fb..0099b9f34dc 100644
--- a/mon-pix/tests/integration/components/module/flashcards_test.gjs
+++ b/mon-pix/tests/integration/components/module/flashcards_test.gjs
@@ -11,6 +11,19 @@ import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
 module('Integration | Component | Module | Flashcards', function (hooks) {
   setupIntlRenderingTest(hooks);
 
+  test('should display provided instructions about Flashcards', async function (assert) {
+    // given
+    const { flashcards } = _getFlashcards();
+
+    // when
+    const screen = await render(<template><ModulixFlashcards @flashcards={{flashcards}} /></template>);
+
+    // then
+    assert.ok(
+      screen.getByText('Lisez la question, essayez de trouver la réponse puis retourner la carte en cliquant dessus'),
+    );
+  });
+
   test('should display the intro card by default', async function (assert) {
     // given
     const { flashcards } = _getFlashcards();
@@ -341,7 +354,7 @@ function _getFlashcards() {
     id: '71de6394-ff88-4de3-8834-a40057a50ff4',
     type: 'flashcards',
     title: "Introduction à l'adresse e-mail",
-    instruction: '<p>...</p>',
+    instruction: 'Lisez la question, essayez de trouver la réponse puis retourner la carte en cliquant dessus',
     introImage: { url: 'https://images.pix.fr/modulix/flashcards-intro.png' },
     cards: [firstCard, secondCard],
   };