Skip to content

Commit

Permalink
feat(junior): add new page for feedback + change resultPage
Browse files Browse the repository at this point in the history
  • Loading branch information
rouxxi committed Jan 29, 2025
1 parent 186f36a commit f208bf8
Show file tree
Hide file tree
Showing 18 changed files with 377 additions and 43 deletions.
12 changes: 11 additions & 1 deletion junior/app/components/challenge/challenge-layout.gjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
import Component from '@glimmer/component';

export default class ChallengeLayout extends Component {

get class () {
return this.args.color ?? 'default';
}

<template>
<div class="challenge-layout challenge-layout--{{@color}}">
<div class="challenge-layout challenge-layout--{{this.class}}">
<div class="container">
{{yield}}
</div>
</div>
</template>

}
2 changes: 1 addition & 1 deletion junior/app/components/robot-dialog.gjs
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default class RobotDialog extends Component {
const robotImage = window.document.querySelector('.robot-speaking__logo');
if (robotImage) {
robotImage.style.transition = `all 0.4s ease-in-out`;
robotImage.style.transform = `translateY(${bubblesHeight - ROBOT_IMAGE_OFFSET}px)`;
robotImage.style.transform = `translateY(${bubblesHeight - (this.args.robotOffSet || ROBOT_IMAGE_OFFSET)}px)`;
}
}

Expand Down
48 changes: 48 additions & 0 deletions junior/app/controllers/assessment/feedback.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { service } from '@ember/service';

export default class FeedBack extends Controller {
@service router;
@service intl;

get feedbackClass() {
if (this.model.assessment?.result?.global === 'exceeded' || this.model.assessment?.result?.global === 'reached') {
return 'feedback--success';
} else {
return 'feedback';
}
}

get buttonLabel() {
const translationKeyArray = `pages.missions.feedback.result.${this.model.assessment?.result?.global ?? 'not-reached'}.button-label`;

return this.intl.t(translationKeyArray);
}

get robotMood() {
switch (this.model.assessment?.result?.global) {
case 'exceeded':
return 'happy';
case 'reached':
return 'proud';
case 'not-reached':
return 'retry';
default:
return 'default';
}
}

get robotFeedBackMessage() {
const translationKeyArray = `pages.missions.feedback.result.${this.model.assessment?.result?.global ?? 'not-reached'}.robot-text`;

return [this.intl.t(translationKeyArray + '.0'), this.intl.t(translationKeyArray + '.1')];
}

@action
routeUrl() {
const sessionId = this.model.assessment?.id;
const routeName = 'assessment.results';
this.router.transitionTo(routeName, sessionId);
}
}
17 changes: 17 additions & 0 deletions junior/app/controllers/assessment/results.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { service } from '@ember/service';

export default class Missions extends Controller {
@service intl;

get validatedObjectives() {
return this.model.mission.validatedObjectives?.split('\n') ?? [];
}
Expand All @@ -10,6 +13,20 @@ export default class Missions extends Controller {
return 'pages.missions.end-page.result.' + this.model.assessment.result.global;
}

get robotFeedBackMessage() {
const translationKeyArray = `pages.missions.feedback.result.${this.model.assessment.result?.global ?? 'not-reached'}.robot-text`;

return [this.intl.t(translationKeyArray + '.0'), this.intl.t(translationKeyArray + '.1')];
}

get feedbackClass() {
if (this.model.assessment?.result?.global === 'exceeded' || this.model.assessment?.result?.global === 'reached') {
return 'result--success';
} else {
return 'result';
}
}

get robotMood() {
switch (this.model.assessment.result.global) {
case 'exceeded':
Expand Down
1 change: 1 addition & 0 deletions junior/app/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ Router.map(function () {

this.route('assessment', { path: '/assessments/:assessment_id' }, function () {
this.route('resume');
this.route('feedback');
this.route('results');
this.route('challenge', { path: '/challenges' });
});
Expand Down
13 changes: 13 additions & 0 deletions junior/app/routes/assessment/feedback.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Route from '@ember/routing/route';
import { service } from '@ember/service';

export default class Feedback extends Route {
@service router;
@service store;

async model(params, transition) {
const assessment = await this.modelFor('assessment').reload();
const mission = await this.store.findRecord('mission', assessment.missionId);
return { mission, assessment };
}
}
4 changes: 2 additions & 2 deletions junior/app/routes/assessment/resume.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default class ResumeRoute extends Route {
@service store;

async redirect(assessment, transition) {
if (transition.from.name === 'challenge-preview') {
if (transition.from?.name === 'challenge-preview') {
return this.router.replaceWith('organization-code');
}
if (transition.to.queryParams.assessmentHasNoMoreQuestions === 'true') {
Expand All @@ -16,6 +16,6 @@ export default class ResumeRoute extends Route {
}

_routeToResults(assessment) {
return this.router.replaceWith('assessment.results', assessment.id);
return this.router.transitionTo('assessment.feedback', assessment.id);
}
}
2 changes: 2 additions & 0 deletions junior/app/styles/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@
@use 'pages/loading' as *;
@use 'pages/organization-code' as *;
@use 'pages/school' as *;
@use 'pages/assessments/feedback' as *;


body {
color: var(--pix-neutral-900);
Expand Down
18 changes: 18 additions & 0 deletions junior/app/styles/components/challenge/challenge-layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,24 @@
border: 2px solid var(--pix-success-500);
}

&--feedback {
background-color: rgba(var(--pix-secondary-500-inline), 10%);
}

&--feedback--success {
background-color: rgba(var(--pix-secondary-500-inline), 10%);
background-image: url("/images/background-stars-success.svg");
}

&--result {
background-color: rgba(var(--pix-secondary-500-inline), 10%);
}

&--result--success {
background-color: rgba(var(--pix-secondary-500-inline), 10%);
background-image: url("/images/background-success-result-page.svg");
}

.container {
width: 100%;
max-width: 1440px;
Expand Down
25 changes: 25 additions & 0 deletions junior/app/styles/pages/assessments/feedback.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.feedback {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;

img {
width: 185px;
}

button {
width: fit-content;
margin-top: 46px;
margin-left: 190px;
}

.robot-speaking {
width: fit-content;
.bubbles {
margin-left: 190px;
}
}
}
22 changes: 22 additions & 0 deletions junior/app/templates/assessment/feedback.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{{page-title (t "pages.missions.feedback.title")}}
<Challenge::ChallengeLayout @color="{{this.feedbackClass}}">

<div class="feedback">
<div class="robot-container">

<RobotDialog @class={{this.robotMood}} @robotOffSet={{120}}>
{{#each this.robotFeedBackMessage as |message|}}
<Bubble @message={{message}} />
{{/each}}

</RobotDialog>
<PixButton
@variant={{this.backHomeButtonVariant}}
class="issue-button"
@size="large"
@triggerAction={{this.routeUrl}}
>{{this.buttonLabel}}</PixButton>
</div>

</div>
</Challenge::ChallengeLayout>
68 changes: 36 additions & 32 deletions junior/app/templates/assessment/results.hbs
Original file line number Diff line number Diff line change
@@ -1,39 +1,43 @@
{{page-title (t "pages.missions.end-page.title")}}
<div class="mission-page">
<div class="header_container">
<RobotDialog @class={{this.robotMood}}>
<Bubble @message={{t this.resultMessage}} @status="success" />
</RobotDialog>
<IdentifiedLearner />
</div>
<div class="mission-page__body">
<MissionCard::CompletedMissionCard
@missionLabelStatus={{t "pages.missions.list.status.completed.label"}}
@title={{@model.mission.name}}
@areaCode={{@model.mission.areaCode}}
/>
<Challenge::ChallengeLayout @color="{{this.feedbackClass}}">
<div class="mission-page">
<div class="header_container">
<RobotDialog @class={{this.robotMood}}>
{{#each this.robotFeedBackMessage as |message|}}
<Bubble @message={{message}} />
{{/each}}
</RobotDialog>
<IdentifiedLearner />
</div>
<div class="mission-page__body">
<MissionCard::CompletedMissionCard
@missionLabelStatus={{t "pages.missions.list.status.completed.label"}}
@title={{@model.mission.name}}
@areaCode={{@model.mission.areaCode}}
/>

<div class="mission-page__details">
<p class="details-list__title details-list__title--big">{{t this.resultsTitle}}</p>
<ul class="details-list">
{{#each this.validatedObjectives as |element index|}}
<div class="mission-page__details">
<p class="details-list__title details-list__title--big">{{t this.resultsTitle}}</p>
<ul class="details-list">
{{#each this.validatedObjectives as |element index|}}

<li>
{{#if (this.isStepSuccessFul index)}}
<img src="/images/icons/valid.svg" alt="Valid" />
{{else}}
<img src="/images/icons/not-valid.svg" alt="Invalid" />
{{/if}}
<MarkdownToHtml @markdown="{{element}}" class="details-list__item" />
</li>
{{/each}}
</ul>
<li>
{{#if (this.isStepSuccessFul index)}}
<img src="/images/icons/valid.svg" alt="Valid" />
{{else}}
<img src="/images/icons/not-valid.svg" alt="Invalid" />
{{/if}}
<MarkdownToHtml @markdown="{{element}}" class="details-list__item" />
</li>
{{/each}}
</ul>

<PixButtonLink @route="identified.missions" @shape="rounded" class="details-action">
<p>{{t "pages.missions.end-page.back-to-missions"}}</p>
<PixIcon @name="arrowRight" class="details-action__icon" @ariaHidden={{true}} />
</PixButtonLink>
<PixButtonLink @route="identified.missions" @shape="rounded" class="details-action">
<p>{{t "pages.missions.end-page.back-to-missions"}}</p>
<PixIcon @name="arrowRight" class="details-action__icon" @ariaHidden={{true}} />
</PixButtonLink>

</div>
</div>
</div>
</div>
</Challenge::ChallengeLayout>
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@
<div class="header_container">
<RobotDialog>
<Bubble
@message={{t "pages.missions.introduction-page.welcome"}}
@message={{t "pages.missions.introduction-page.robot-text.0"}}
@oralization={{@model.learnerHasOralizationFeature}}
/>

<Bubble
@message={{t "pages.missions.introduction-page.robot-text.1"}}
@oralization={{@model.learnerHasOralizationFeature}}
/>
</RobotDialog>
Expand Down
Loading

0 comments on commit f208bf8

Please sign in to comment.