Skip to content

Commit

Permalink
[FEATURE] Afficher la carte de conclusion des flashcards et gérer le …
Browse files Browse the repository at this point in the history
…score (PIX-14312)

 #10405
  • Loading branch information
pix-service-auto-merge authored Oct 25, 2024
2 parents 1fd4fbd + 1400eb3 commit b3d5466
Show file tree
Hide file tree
Showing 13 changed files with 430 additions and 18 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import PixButton from '@1024pix/pix-ui/components/pix-button';
import PixMessage from '@1024pix/pix-ui/components/pix-message';
import { t } from 'ember-intl';

<template>
<div class="element-flashcards-outro-card">

<div class="element-flashcards-outro-card__header">
<PixMessage class="element-flashcards-outro-card__alert" @type="success" @withIcon="true">
{{t "pages.modulix.flashcards.completed"}}
</PixMessage>
<p class="element-flashcards-outro-card__title">{{@title}}</p>
</div>

<div>
<p class="element-flashcards-outro-card__question">{{t "pages.modulix.flashcards.answerDirection"}}</p>
<ul class="element-flashcards-outro-card__counter">
<li class="element-flashcards-outro-card__counter__yes">
{{t "pages.modulix.flashcards.counters.yes" totalYes=@counters.yes}}
</li>
<li class="element-flashcards-outro-card__counter__almost">
{{t "pages.modulix.flashcards.counters.almost" totalAlmost=@counters.almost}}
</li>
<li class="element-flashcards-outro-card__counter__no">
{{t "pages.modulix.flashcards.counters.no" totalNo=@counters.no}}
</li>
</ul>
</div>

<div class="element-flashcards-outro-card__footer">
<PixButton @triggerAction={{@onRetry}} @iconBefore="refresh" @variant="tertiary" @size="small">
{{t "pages.modulix.buttons.flashcards.retry"}}
</PixButton>
</div>
</div>
</template>
39 changes: 35 additions & 4 deletions mon-pix/app/components/module/element/flashcards/flashcards.gjs
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import { t } from 'ember-intl';
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';

const INITIAL_COUNTERS_VALUE = { yes: 0, almost: 0, no: 0 };

export default class ModulixFlashcards extends Component {
@tracked
Expand All @@ -30,6 +33,13 @@ export default class ModulixFlashcards extends Component {
*/
currentCardIndex = 0;

@tracked
/**
* Stores the number of times an answer has been chosen
* @type {object}
*/
counters = { ...INITIAL_COUNTERS_VALUE };

get currentCard() {
return this.args.flashcards.cards[this.currentCardIndex];
}
Expand All @@ -43,7 +53,15 @@ export default class ModulixFlashcards extends Component {
}

get footerIsEmpty() {
return this.currentStep === 'intro';
return this.currentStep === 'intro' || this.currentStep === 'outro';
}

@action
retry() {
this.currentStep = 'intro';
this.currentCardIndex = 0;
this.displayedSideName = 'recto';
this.counters = { ...INITIAL_COUNTERS_VALUE };
}

@action
Expand All @@ -56,9 +74,17 @@ export default class ModulixFlashcards extends Component {
this.displayedSideName = this.displayedSideName === 'recto' ? 'verso' : 'recto';
}

incrementCounterFor(userAssessment) {
this.counters[userAssessment]++;
}

goToNextCard() {
this.currentCardIndex++;
this.displayedSideName = 'recto';
if (this.currentCardIndex < this.numberOfCards - 1) {
this.currentCardIndex++;
this.displayedSideName = 'recto';
} else {
this.currentStep = 'outro';
}
}

@action
Expand All @@ -68,6 +94,7 @@ export default class ModulixFlashcards extends Component {
cardId: this.currentCard.id,
};
this.args.onSelfAssessment(selfAssessmentData);
this.incrementCounterFor(userAssessment);
this.goToNextCard();
}

Expand All @@ -90,6 +117,10 @@ export default class ModulixFlashcards extends Component {
/>
{{/if}}

{{#if (eq this.currentStep "outro")}}
<ModulixFlashcardsOutroCard @title={{@flashcards.title}} @onRetry={{this.retry}} @counters={{this.counters}} />
{{/if}}

<div class="element-flashcards__footer {{if this.footerIsEmpty 'element-flashcards__footer--empty'}}">
{{#if (eq this.currentStep "cards")}}
{{#if (eq this.displayedSideName "recto")}}
Expand All @@ -108,7 +139,7 @@ export default class ModulixFlashcards extends Component {
type="button"
{{on "click" (fn this.onSelfAssessment "no")}}
>
{{t "pages.modulix.buttons.flashcards.answers.notAtAll"}}
{{t "pages.modulix.buttons.flashcards.answers.no"}}
</button>
<button
class="element-flashcards__footer__answer__button element-flashcards__footer__answer__button--almost"
Expand Down
61 changes: 59 additions & 2 deletions mon-pix/app/styles/components/module/_flashcards-card.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
.element-flashcards-card,
.element-flashcards-intro-card {
.element-flashcards-intro-card,
.element-flashcards-outro-card,
{
display: flex;
flex-direction: column;
justify-content: space-between;
Expand Down Expand Up @@ -64,7 +66,8 @@
}
}

.element-flashcards-intro-card {
.element-flashcards-intro-card,
.element-flashcards-outro-card {
align-items: center;
padding: var(--pix-spacing-2x);
padding-bottom: var(--pix-spacing-6x);
Expand All @@ -75,3 +78,57 @@
}
}

.element-flashcards-outro-card {

&__header {
display: flex;
flex-direction: column;
gap: var(--pix-spacing-4x);
align-items: center;
justify-content: center;
width: 100%;
min-height: 173px;
text-align: center;
background-image: url("/images/modulix/flashcards-outro-image.svg");
background-repeat: no-repeat;
background-size: contain;
}

&__alert {
@extend %pix-title-xs;

padding: var(--pix-spacing-1x) var(--pix-spacing-4x);
color: var(--pix-neutral-0);
}

&__title {
padding: 0 var(--pix-spacing-4x);
color: var(--pix-neutral-0);
}

&__question {
@extend %pix-body-s;

margin-bottom: var(--pix-spacing-2x);
font-weight: var(--pix-font-bold);
}

&__counter {
@extend %pix-body-l;

font-weight: var(--pix-font-bold);

&__yes {
color: var(--pix-success-500);
}

&__almost {
color: var(--pix-warning-500);
}

&__no {
color: var(--pix-error-500);
}
}
}

3 changes: 3 additions & 0 deletions mon-pix/public/images/modulix/flashcards-outro-image.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -1,7 +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/flashcards-card';
// eslint-disable-next-line no-restricted-imports
import { module, test } from 'qunit';
import sinon from 'sinon';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +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/flashcards-intro-card';
// eslint-disable-next-line no-restricted-imports
import { module, test } from 'qunit';
import sinon from 'sinon';

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { clickByName, render } from '@1024pix/ember-testing-library';
import { t } from 'ember-intl/test-support';
import ModulixFlashcardsOutroCard from 'mon-pix/components/module/element/flashcards/flashcards-outro-card';
import { module, test } from 'qunit';
import sinon from 'sinon';

import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';

module('Integration | Component | Module | Flashcards Outro Card', function (hooks) {
setupIntlRenderingTest(hooks);

test('should display an outro card', async function (assert) {
// given
const counters = { yes: 1, almost: 2, no: 1 };
const title = 'Introduction à la poésie';

// when

const screen = await render(
<template><ModulixFlashcardsOutroCard @counters={{counters}} @title={{title}} /></template>,
);

// then
assert.ok(screen.getByText('Introduction à la poésie'));
assert.ok(screen.getByText(`Oui ! : ${counters.yes}`));
assert.ok(screen.getByText(`Presque : ${counters.almost}`));
assert.ok(screen.getByText(`Pas du tout : ${counters.no}`));
assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.retry') })).exists();
});

module('when we click on "Réessayer"', function () {
test('should call the onRetry method', async function (assert) {
// given
const title = 'Introduction à la poésie';
const onRetryStub = sinon.stub();

await render(<template><ModulixFlashcardsOutroCard @title={{title}} @onRetry={{onRetryStub}} /></template>);

// when
await clickByName(t('pages.modulix.buttons.flashcards.retry'));

// then
assert.true(onRetryStub.calledOnce);
});
});
});
Loading

0 comments on commit b3d5466

Please sign in to comment.