diff --git a/mon-pix/app/components/timed-challenge-instructions.hbs b/mon-pix/app/components/timed-challenge-instructions.hbs index 5d9f8db63ce..97398ea3522 100644 --- a/mon-pix/app/components/timed-challenge-instructions.hbs +++ b/mon-pix/app/components/timed-challenge-instructions.hbs @@ -1,26 +1,22 @@
-
+

{{t "pages.timed-challenge-instructions.primary" time=this.allocatedTime htmlSafe=true}} -

+ -
+

{{t "pages.timed-challenge-instructions.secondary"}} -

+

-
- - {{this.allocatedTime}} -
+ + {{this.allocatedTime}}
-
- - {{t "pages.timed-challenge-instructions.action"}} - -
+ + {{t "pages.timed-challenge-instructions.action"}} +
\ No newline at end of file diff --git a/mon-pix/app/controllers/assessments/challenge.js b/mon-pix/app/controllers/assessments/challenge.js index d6ac76743fa..40034978cc3 100644 --- a/mon-pix/app/controllers/assessments/challenge.js +++ b/mon-pix/app/controllers/assessments/challenge.js @@ -60,6 +60,7 @@ export default class ChallengeController extends Controller { get couldDisplayInfoAlert() { return ( !this.hasFocusedOutOfWindow && + this.displayChallenge && !this.model.answer && this.model.challenge.focused && !this.model.assessment.hasFocusedOutChallenge @@ -163,6 +164,13 @@ export default class ChallengeController extends Controller { return true; } + if (this._isTimedChallenge && this._isFocusedCertificationChallenge) { + return !!( + (this.hasConfirmedFocusChallengeWarningScreen && this.hasUserConfirmedTimedChallengeWarning) || + this.model.assessment.hasTimeoutChallenge + ); + } + if (this._isTimedChallenge) { if (this.hasUserConfirmedTimedChallengeWarning || this.model.assessment.hasTimeoutChallenge) return true; } @@ -201,6 +209,15 @@ export default class ChallengeController extends Controller { } get displayTimedChallengeInstructions() { + if (this.isTimedChallengeWithoutAnswer && this.isFocusedCertificationChallengeWithoutAnswer) { + return ( + this.hasConfirmedFocusChallengeWarningScreen && + this.isTimedChallengeWithoutAnswer && + !this.hasUserConfirmedTimedChallengeWarning && + !this.model.assessment.hasTimeoutChallenge + ); + } + return ( this.isTimedChallengeWithoutAnswer && !this.hasUserConfirmedTimedChallengeWarning && diff --git a/mon-pix/app/styles/components/_focused-certification-challenge-instructions.scss b/mon-pix/app/styles/components/_focused-certification-challenge-instructions.scss index 7f379f69f06..c8aba9d7325 100644 --- a/mon-pix/app/styles/components/_focused-certification-challenge-instructions.scss +++ b/mon-pix/app/styles/components/_focused-certification-challenge-instructions.scss @@ -10,44 +10,27 @@ justify-content: center; &__image { - img { - width: 158px; - height: 158px; - } + width: 158px; + height: 158px; } &__title { - margin-top: 22px; + @extend %pix-title-l; + + margin: var(--pix-spacing-6x) 0; color: var(--pix-neutral-800); - font-size: 3rem; - font-family: $font-open-sans; - font-style: normal; - font-stretch: normal; - line-height: 56px; } &__description { + @extend %pix-body-l; + max-width: 450px; - margin-top: 24px; - margin-bottom: 50px; + margin-bottom: var(--pix-spacing-6x); color: var(--pix-neutral-800); - font-weight: 500; - font-size: 1.25rem; - font-family: $font-roboto; - font-style: normal; - font-stretch: normal; text-align: center; } - &__action { - display: flex; - justify-content: center; - } -} - -.focused-challenge-instructions-action { &__confirmation-button { - font-size: 0.875rem; - text-transform: uppercase; + margin-top: var(--pix-spacing-6x); } } diff --git a/mon-pix/app/styles/components/_timed-challenge-instructions.scss b/mon-pix/app/styles/components/_timed-challenge-instructions.scss index 7f29aa3ab6d..2cef95ffca3 100644 --- a/mon-pix/app/styles/components/_timed-challenge-instructions.scss +++ b/mon-pix/app/styles/components/_timed-challenge-instructions.scss @@ -1,27 +1,25 @@ .timed-challenge-instructions { display: flex; flex-direction: column; + align-items: center; justify-content: center; - padding: 20px; + padding: var(--pix-spacing-10x) var(--pix-spacing-6x); overflow: hidden; text-align: center; &__primary { - margin-top: 22px; + @extend %pix-title-s; + color: var(--pix-neutral-800); font-weight: var(--pix-font-bold); - font-size: 1.5rem; - font-style: normal; - font-stretch: normal; } &__secondary { - margin-top: 9px; + @extend %pix-body-l; + + margin-top: var(--pix-spacing-3x); margin-bottom: 50px; color: var(--pix-neutral-800); - font-size: 1.125rem; - font-style: normal; - font-stretch: normal; } &__time { @@ -29,44 +27,28 @@ } &__allocated-time { - color: var(--pix-neutral-800); - font-size: 1.7375rem; - } - - &__action { - display: flex; - justify-content: center; - } -} - -.timed-challenge-instructions-allocated-time { - &__gauge { display: flex; - flex-direction: row; + gap: var(--pix-spacing-2x); align-items: center; - justify-content: center; - width: fit-content; height: 50px; margin: 0 auto; - padding: 4px 12px; - line-height: 3.125rem; + padding: var(--pix-spacing-1x) var(--pix-spacing-3x); + color: var(--pix-neutral-800); + font-size: 1.5rem; background-color: var(--pix-neutral-20); border-radius: 7px; } } -.timed-challenge-instructions-gauge { +.timed-challenge-instructions-allocated-time { &__icon { - width: 42px; - padding-right: 6px; - padding-bottom: 6px; + width: 2.5rem; + fill: var(--pix-neutral-800); } } .timed-challenge-instructions-action { &__confirmation-button { - margin-top: 22px; - font-size: 0.875rem; - text-transform: uppercase; + margin-top: var(--pix-spacing-6x); } } diff --git a/mon-pix/app/templates/components/focused-certification-challenge-instructions.hbs b/mon-pix/app/templates/components/focused-certification-challenge-instructions.hbs index 49f332a1c17..cd91863f957 100644 --- a/mon-pix/app/templates/components/focused-certification-challenge-instructions.hbs +++ b/mon-pix/app/templates/components/focused-certification-challenge-instructions.hbs @@ -1,22 +1,19 @@
-
- -
-
+ + +

{{t "pages.focused-certification-challenge-instructions.title"}} -

+ -
+

{{t "pages.focused-certification-challenge-instructions.description"}} -

+

-
- - {{t "pages.focused-certification-challenge-instructions.action"}} - -
+ + {{t "pages.focused-certification-challenge-instructions.action"}} +
\ No newline at end of file diff --git a/mon-pix/tests/acceptance/challenge-item-test.js b/mon-pix/tests/acceptance/challenge-item-test.js index 619211a843b..fcb6162365c 100644 --- a/mon-pix/tests/acceptance/challenge-item-test.js +++ b/mon-pix/tests/acceptance/challenge-item-test.js @@ -572,6 +572,64 @@ module('Acceptance | Displaying a challenge of any type', function (hooks) { assert.dom(screen.getByText('Mode focus')).exists(); }); }); + + module('when a challenge is focused and timed', function () { + test('should display focus first then timer information page', async function (assert) { + // given + const user = server.create('user', 'withEmail'); + await authenticate(user); + + const focusedCertificationChallengeWarningManager = this.owner.lookup( + 'service:focused-certification-challenge-warning-manager', + ); + focusedCertificationChallengeWarningManager.reset(); + + assessment = server.create('assessment', 'ofCertificationType'); + server.create('challenge', 'forCertification', 'QCM', 'withFocused', { timer: 60 }); + + const certificationCourse = server.create('certification-course', { + accessCode: 'ABCD12', + sessionId: 1, + nbChallenges: 2, + firstName: 'Alin', + lastName: 'Cendy', + }); + assessment = certificationCourse.assessment; + + // when + const screen = await visit(`/assessments/${assessment.id}/challenges/0`); + + // then + assert + .dom( + screen.getByRole('heading', { + name: 'Mode focus', + level: 1, + }), + ) + .exists(); + + // when + await click(screen.getByRole('button', { name: 'Je suis prêt' })); + + // then + assert + .dom( + screen.getByRole('heading', { + name: 'Vous disposerez de 1 minute pour réussir la question suivante.', + level: 1, + }), + ) + .exists(); + + // when + await click(screen.getByRole('button', { name: `Commencer l'épreuve` })); + + // then + assert.dom(screen.getByRole('heading', { name: 'Mode Focus', level: 3 })).exists(); + assert.dom(screen.getByText('1:00')).exists(); + }); + }); }); module('when assessment is v2 certification', function (hooks) {