[FEATURE] Afficher la consigne au-dessus des Flashcards (PIX-15035)

 #10417

Author: pix-service-auto-merge

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"
             },

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,

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

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;
 

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],
   };