Skip to content

Commit d79c834

Browse files
pix-service-auto-mergepix-service-auto-merge
authored
[FEATURE] Affichage du challenge avec le nouveau design (PIX-9368)
2 parents 3a803a6 + 64a0e69 commit d79c834

File tree

19 files changed

+124
-220
lines changed

19 files changed

+124
-220
lines changed

‎1d/app/pods/assessment/challenge/template.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<Challenge::Item @challenge={{@model.challenge}} @assessment={{@model.assessment}} @activity={{@model.activity}} />
1+
<Challenge @challenge={{@model.challenge}} @assessment={{@model.assessment}} @activity={{@model.activity}} />

‎1d/app/pods/challenge-preview/template.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<Challenge::Item @challenge={{@model}} />
1+
<Challenge @challenge={{@model}} />

‎1d/app/pods/components/challenge/challenge-actions/template.hbs

+2-14
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,12 @@
11
<div class="challenge-actions">
22
{{#unless (eq @level "TUTORIAL")}}
3-
<PixButton
4-
class="pix1d-button pix1d-button--skip"
5-
@isDisabled={{@isDisabled}}
6-
@triggerAction={{@skipChallenge}}
7-
@shape="rounded"
8-
@size="big"
9-
>
3+
<PixButton class="pix1d-button pix1d-button--skip" @triggerAction={{@skipChallenge}} @shape="rounded" @size="big">
104
<span>
115
Je passe
126
</span>
137
</PixButton>
148
{{/unless}}
15-
<PixButton
16-
class="pix1d-button"
17-
@isDisabled={{@isDisabled}}
18-
@triggerAction={{@validateAnswer}}
19-
@shape="rounded"
20-
@size="big"
21-
>
9+
<PixButton class="pix1d-button" @triggerAction={{@validateAnswer}} @shape="rounded" @size="big">
2210
<span>
2311
Je continue
2412
</span>

‎1d/app/pods/components/challenge/challenge-instruction/template.hbs

-9
This file was deleted.

‎1d/app/pods/components/challenge/item/component.js ‎1d/app/pods/components/challenge/component.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { service } from '@ember/service';
33
import Component from '@glimmer/component';
44
import { tracked } from '@glimmer/tracking';
55

6-
export default class Item extends Component {
6+
export default class Challenge extends Component {
77
@service store;
88
@service router;
99
@tracked answerHasBeenValidated = false;

‎1d/app/pods/components/challenge/item/template.hbs

+48-69
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,51 @@
11
<div class="challenge-item">
2-
<div class="challenge-item__body">
3-
<div class="challenge-item__container">
4-
<Challenge::ChallengeInstruction @instruction={{@challenge.instruction}} />
5-
<div class="challenge-item__playground">
6-
{{#if @challenge.illustrationUrl}}
7-
<div class="challenge-item__image">
8-
<Challenge::ChallengeIllustration @src={{@challenge.illustrationUrl}} @alt={{@challenge.illustrationAlt}} />
9-
</div>
10-
{{/if}}
11-
{{#if @challenge.hasValidEmbedDocument}}
12-
<div class="challenge-item__embed">
13-
<Challenge::ChallengeEmbedSimulator
14-
@url={{@challenge.embedUrl}}
15-
@title={{@challenge.embedTitle}}
16-
@height={{@challenge.embedHeight}}
17-
/>
18-
</div>
19-
{{/if}}
20-
{{#if @challenge.autoReply}}
21-
<div class="challenge-item__autoreply">
22-
<Challenge::ChallengeItemAutoReply @setAnswerValue={{this.setAnswerValue}} />
23-
</div>
24-
{{/if}}
25-
{{#if @challenge.isQROC}}
26-
<div class="challenge-item__qroc">
27-
<Challenge::ChallengeItemQroc @challenge={{@challenge}} @setAnswerValue={{this.setAnswerValue}} />
28-
</div>
29-
{{/if}}
30-
{{#if @challenge.isQROCM}}
31-
<div class="challenge-item__qrocm">
32-
<Challenge::ChallengeItemQrocm @challenge={{@challenge}} @setAnswerValue={{this.setAnswerValue}} />
33-
</div>
34-
{{/if}}
35-
{{#if @challenge.isQCU}}
36-
<div class="challenge-item__qcu">
37-
<Challenge::ChallengeItemQcu
38-
@challenge={{@challenge}}
39-
@setAnswerValue={{this.setAnswerValue}}
40-
@assessment={{@assessment}}
41-
/>
42-
</div>
43-
{{/if}}
44-
{{#if @challenge.isQCM}}
45-
<div class="challenge-item__qcm">
46-
<Challenge::ChallengeItemQcm
47-
@challenge={{@challenge}}
48-
@setAnswerValue={{this.setAnswerValue}}
49-
@assessment={{@assessment}}
50-
/>
51-
</div>
52-
{{/if}}
2+
<div class="challenge-item__playground">
3+
{{#if @challenge.illustrationUrl}}
4+
<div class="challenge-item__image">
5+
<Challenge::ChallengeIllustration @src={{@challenge.illustrationUrl}} @alt={{@challenge.illustrationAlt}} />
536
</div>
54-
</div>
55-
</div>
56-
57-
<div class="challenge-item__footer">
58-
<Challenge::ChallengeActions
59-
@validateAnswer={{this.validateAnswer}}
60-
@skipChallenge={{this.skipChallenge}}
61-
@level={{@activity.level}}
62-
/>
7+
{{/if}}
8+
{{#if @challenge.hasValidEmbedDocument}}
9+
<div class="challenge-item__embed">
10+
<Challenge::ChallengeEmbedSimulator
11+
@url={{@challenge.embedUrl}}
12+
@title={{@challenge.embedTitle}}
13+
@height={{@challenge.embedHeight}}
14+
/>
15+
</div>
16+
{{/if}}
17+
{{#if @challenge.autoReply}}
18+
<div class="challenge-item__autoreply">
19+
<Challenge::ChallengeItemAutoReply @setAnswerValue={{@setAnswerValue}} />
20+
</div>
21+
{{/if}}
22+
{{#if @challenge.isQROC}}
23+
<div class="challenge-item__qroc">
24+
<Challenge::ChallengeItemQroc @challenge={{@challenge}} @setAnswerValue={{@setAnswerValue}} />
25+
</div>
26+
{{/if}}
27+
{{#if @challenge.isQROCM}}
28+
<div class="challenge-item__qrocm">
29+
<Challenge::ChallengeItemQrocm @challenge={{@challenge}} @setAnswerValue={{@setAnswerValue}} />
30+
</div>
31+
{{/if}}
32+
{{#if @challenge.isQCU}}
33+
<div class="challenge-item__qcu">
34+
<Challenge::ChallengeItemQcu
35+
@challenge={{@challenge}}
36+
@setAnswerValue={{@setAnswerValue}}
37+
@assessment={{@assessment}}
38+
/>
39+
</div>
40+
{{/if}}
41+
{{#if @challenge.isQCM}}
42+
<div class="challenge-item__qcm">
43+
<Challenge::ChallengeItemQcm
44+
@challenge={{@challenge}}
45+
@setAnswerValue={{@setAnswerValue}}
46+
@assessment={{@assessment}}
47+
/>
48+
</div>
49+
{{/if}}
6350
</div>
64-
</div>
65-
66-
<AnswerFeedback
67-
@answer={{this.answer}}
68-
@answerHasBeenValidated={{this.answerHasBeenValidated}}
69-
@nextAction={{this.resume}}
70-
/>
71-
72-
<WarningFeedback @showWarningModal={{this.showWarningModal}} @onClose={{this.onCloseWarningModal}} />
51+
</div>

‎1d/app/pods/components/challenge/template.hbs

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{{page-title "Challenge"}}
2+
<div class="container">
3+
<RobotDialog @instruction={{@challenge.instruction}} />
4+
<Challenge::Item @challenge={{@challenge}} @setAnswerValue={{this.setAnswerValue}} @assessment={{@assessment}} />
5+
6+
<Challenge::ChallengeActions
7+
@validateAnswer={{this.validateAnswer}}
8+
@skipChallenge={{this.skipChallenge}}
9+
@level={{@activity.level}}
10+
/>
11+
12+
<AnswerFeedback
13+
@answer={{this.answer}}
14+
@answerHasBeenValidated={{this.answerHasBeenValidated}}
15+
@nextAction={{this.resume}}
16+
/>
17+
18+
<WarningFeedback @showWarningModal={{this.showWarningModal}} @onClose={{this.onCloseWarningModal}} />
19+
</div>

‎1d/app/pods/components/challenge/challenge-instruction/component.js ‎1d/app/pods/components/robot-dialog/component.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
22
import { action } from '@ember/object';
33
import * as markdownConverter from '1d/utils/markdown-converter';
44

5-
export default class ChallengeInstruction extends Component {
5+
export default class RobotDialog extends Component {
66
@action
77
readTheInstruction(text) {
88
if (!window.speechSynthesis.speaking) {

‎1d/app/pods/components/robot-dialog/template.hbs

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
<div class="robot-speaking">
22
<img class="robot-speaking__logo" alt="mascotte pix1d" src="/images/happy-robot.svg" />
3-
<p class="robot-speaking__instruction">{{@instruction}}</p>
3+
<Markdown::MarkdownToHtmlUnsafe @markdown={{@instruction}} @class="robot-speaking__instruction" />
4+
{{! À activer quand le design + fonctionnalité sont actés }}
5+
{{! <PixIconButton}}
6+
{{! @ariaLabel="Lire la consigne à haute voix"}}
7+
{{! @withBackground="true"}}
8+
{{! @icon="volume-high"}}
9+
{{!-- @triggerAction={{fn this.readTheInstruction @instruction}}--}}
10+
{{! />}}
411
</div>

‎1d/app/pods/home/template.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
class="school-code__input"
1111
/>
1212

13-
<PixButton class="pix1d-button" @triggerAction={{this.goToSchool}}>
13+
<PixButton class="pix1d-button" @triggerAction={{this.goToSchool}} @shape="rounded">
1414
{{t "pages.home.go-to-school"}}
1515
</PixButton>
1616
</div>

‎1d/app/styles/app.scss

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
@charset "utf-8";
22

3+
/* Pix UI */
4+
@import 'pix-design-tokens';
5+
36
// Globals
47
@import 'globals/fonts';
58
@import 'globals/a11y';
@@ -12,7 +15,6 @@
1215
@import 'components/challenge-actions';
1316
@import 'components/challenge-embed-simulator';
1417
@import 'components/challenge-illustration';
15-
@import 'components/challenge-instruction';
1618
@import 'components/challenge-item';
1719
@import 'components/challenge-item-proposals';
1820
@import 'components/error';
@@ -45,8 +47,8 @@ b {
4547

4648
footer {
4749
margin-top: auto;
48-
margin-bottom: 25px;
49-
margin-left: 30px;
50+
margin-bottom: 32px;
51+
margin-left: 32px;
5052
text-align: start;
5153

5254
img {

‎1d/app/styles/components/challenge-actions.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
.challenge-actions {
22
display: flex;
3-
justify-content: space-around;
3+
flex-direction: row;
4+
justify-content: space-between;
5+
max-width: 850px;
6+
margin: 0 auto 32px auto;
7+
padding: 0 30px;
8+
9+
button:only-child {
10+
margin-left: auto;
11+
}
412
}
513

‎1d/app/styles/components/challenge-embed-simulator.scss

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
&__iframe {
33
position: relative;
44
width: 100%;
5-
height: calc(100% - 5px);
65
border: none;
76
}
87
}

‎1d/app/styles/components/challenge-instruction.scss

-25
This file was deleted.

‎1d/app/styles/components/challenge-item.scss

+4-31
Original file line numberDiff line numberDiff line change
@@ -7,43 +7,17 @@
77
}
88

99
.challenge-item {
10-
&__body {
11-
height: calc(100vh - 93px);
12-
padding: 32px 121px 10px 121px;
13-
overflow-y: auto;
14-
background-color: #505F79;
15-
}
16-
17-
&__footer {
18-
position: fixed;
19-
right: 0;
20-
bottom: 0;
21-
left: 0;
22-
padding: 16px 0 19px;
23-
background-color: var(--pix-color-neutral-0);
24-
border-top: 1px solid #EBEBEB;
25-
box-shadow: 0px -3px 12px 3px rgb(0 25 54 / 2%);
26-
}
27-
28-
&__container {
29-
display: flex;
30-
flex-direction: column;
31-
max-width: 1600px;
32-
min-height: 100%;
33-
margin: 0 auto;
34-
overflow: hidden;
35-
background-color: var(--pix-color-neutral-0);
36-
border-radius: 50px 50px 24px 24px;
37-
}
10+
display: flex;
11+
flex-direction: column;
12+
max-width: 850px;
13+
margin: 0 auto;
3814

3915
&__playground {
4016
display: flex;
4117
flex-flow: row wrap;
4218
flex-grow: 1;
4319
align-content: center;
4420
justify-content: space-evenly;
45-
padding: 50px;
46-
background-color: var(--pix-color-neutral-0);
4721
}
4822

4923
&__image, &__qroc, &__qrocm {
@@ -68,7 +42,6 @@
6842
width: 0;
6943
}
7044

71-
7245
&__embed {
7346
display: block;
7447
width: 100%;

‎1d/app/styles/components/robot-dialog.scss

+16-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: flex;
33
flex-direction: row;
44
width: 100%;
5-
padding: 40px;
5+
padding: 40px 32px;
66

77
&__logo {
88
width: 128px;
@@ -17,6 +17,21 @@
1717
font-size: 1.5rem;
1818
background: #C3D0FF;
1919
border-radius: 16px 16px 16px 0;
20+
21+
a {
22+
color: #3d68ff;
23+
text-decoration: underline;
24+
25+
&:active,
26+
&:focus,
27+
&:hover {
28+
color: #2044dc;
29+
}
30+
}
31+
32+
a::after {
33+
@include external-link;
34+
}
2035
}
2136

2237
&__instruction::after {

0 commit comments

Comments
 (0)