diff --git a/junior/app/components/challenge/challenge.gjs b/junior/app/components/challenge/challenge.gjs
index e9d90913d46..4026bcc52b1 100644
--- a/junior/app/components/challenge/challenge.gjs
+++ b/junior/app/components/challenge/challenge.gjs
@@ -8,6 +8,7 @@ import ENV from 'junior/config/environment';
import Bubble from '../bubble';
import DelayedElement from '../delayed-element';
+import IdentifiedLearner from '../identified-learner';
import RobotDialog from '../robot-dialog';
import ChallengeContent from './challenge-content';
import ChallengeLayout from './challenge-layout';
@@ -141,22 +142,25 @@ export default class Challenge extends Component {
{{pageTitle (t "pages.challenge.title")}}
-
- {{#each @challenge.instructions as |instruction index|}}
-
-
-
- {{/each}}
-
- {{#if this.robotFeedback.message}}
-
- {{/if}}
-
+
+
+
+}
diff --git a/junior/app/controllers/school/students.js b/junior/app/controllers/school/students.js
index f0860047ecd..1d0a321753c 100644
--- a/junior/app/controllers/school/students.js
+++ b/junior/app/controllers/school/students.js
@@ -14,6 +14,7 @@ export default class Students extends Controller {
identifyUser(learner) {
this.currentLearner.setLearner({
id: learner.id,
+ displayName: learner.displayName,
schoolUrl: this.model.schoolUrl,
});
styleToolkit.backgroundBlob.reset();
diff --git a/junior/app/styles/app.scss b/junior/app/styles/app.scss
index 1325358833f..a28f164535b 100644
--- a/junior/app/styles/app.scss
+++ b/junior/app/styles/app.scss
@@ -11,6 +11,7 @@
@import 'globals/fonts';
// Components
+@import 'components/challenge/challenge';
@import 'components/challenge/challenge-actions';
@import 'components/challenge/challenge-embed-simulator';
@import 'components/challenge/challenge-content';
@@ -23,6 +24,7 @@
@import 'components/bubble';
@import 'components/footer';
@import 'components/issue';
+@import 'components/identified-learner';
@import 'components/oralization-button';
@import 'components/robot-dialog';
diff --git a/junior/app/styles/components/challenge/challenge.scss b/junior/app/styles/components/challenge/challenge.scss
new file mode 100644
index 00000000000..e57d367dcde
--- /dev/null
+++ b/junior/app/styles/components/challenge/challenge.scss
@@ -0,0 +1,11 @@
+.header_container {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+
+ .identified-learner {
+ // Negative margin to set identified user outside the container on the far right
+ // Equals half of the total margin outside the challenge content + offset
+ margin-right: calc(((100% - 100vw) / 2) + 45px);
+ }
+}
diff --git a/junior/app/styles/components/identified-learner.scss b/junior/app/styles/components/identified-learner.scss
new file mode 100644
index 00000000000..ece055dada1
--- /dev/null
+++ b/junior/app/styles/components/identified-learner.scss
@@ -0,0 +1,30 @@
+.identified-learner {
+ display: flex;
+ gap: var(--pix-spacing-3x);
+ align-items: center;
+ font-weight: var(--font-medium);
+
+ &__informations {
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+
+ button {
+ padding: 0;
+ }
+
+ p {
+ font-weight: var(--pix-font-bold);
+ white-space: nowrap;
+ }
+ }
+
+ &__icon {
+ width: 40px;
+ height: 40px;
+ padding: var(--pix-spacing-1x);
+ background-color: var(--pix-primary-300);
+ border-radius: 50%;
+ fill: var(--pix-neutral-0);
+ }
+}
diff --git a/junior/app/styles/pages/identified/missions/introduction.scss b/junior/app/styles/pages/identified/missions/introduction.scss
index dffed4e6233..d6f904d44b1 100644
--- a/junior/app/styles/pages/identified/missions/introduction.scss
+++ b/junior/app/styles/pages/identified/missions/introduction.scss
@@ -3,6 +3,12 @@
flex-direction: column;
align-content: center;
+ .header_container {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ }
+
.button-actions__icon {
width: 20px;
height: 20px;
diff --git a/junior/app/styles/pages/identified/missions/list.scss b/junior/app/styles/pages/identified/missions/list.scss
index 539fcaf45b4..8ed16fc3fdd 100644
--- a/junior/app/styles/pages/identified/missions/list.scss
+++ b/junior/app/styles/pages/identified/missions/list.scss
@@ -34,3 +34,9 @@
}
}
}
+
+.header_container {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+}
diff --git a/junior/app/styles/pages/identified/missions/mission.scss b/junior/app/styles/pages/identified/missions/mission.scss
index 8a2537b6bfb..b6121af474a 100644
--- a/junior/app/styles/pages/identified/missions/mission.scss
+++ b/junior/app/styles/pages/identified/missions/mission.scss
@@ -1,6 +1,12 @@
.mission-page {
margin-top: 20px;
+ .header_container {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ }
+
&__body {
display: flex;
margin-top: 16px;
diff --git a/junior/app/templates/assessment/results.hbs b/junior/app/templates/assessment/results.hbs
index 39f30d8bb2b..8fb89a76ab7 100644
--- a/junior/app/templates/assessment/results.hbs
+++ b/junior/app/templates/assessment/results.hbs
@@ -1,8 +1,11 @@
{{page-title (t "pages.missions.end-page.title")}}
-
-
-
+
-
-
-
-
-
+
{{#each this.orderedMissionList as |mission|}}
diff --git a/junior/app/templates/identified/missions/mission/index.hbs b/junior/app/templates/identified/missions/mission/index.hbs
index f119d76c773..59605f62852 100644
--- a/junior/app/templates/identified/missions/mission/index.hbs
+++ b/junior/app/templates/identified/missions/mission/index.hbs
@@ -1,8 +1,11 @@
{{page-title (t "pages.missions.start-page.title")}}
-
-
-
+
-
-
-
+
+ const missionsList = allButton.filter(
+ (mission) => !mission.textContent.includes(t('components.login.logout-button')),
+ );
+
assert.strictEqual(missionsList.length, 3);
assert.true(missionsList[0].innerHTML.includes('mission_2'));
diff --git a/junior/translations/fr.json b/junior/translations/fr.json
index 6e1ad1ead89..a7a3f69dcce 100644
--- a/junior/translations/fr.json
+++ b/junior/translations/fr.json
@@ -26,6 +26,9 @@
},
"title": "Écran dans le mauvais sens"
},
+ "login": {
+ "logout-button": "Se déconnecter"
+ },
"oralization-button": {
"label": "Lire la consigne à haute voix",
"play": "J'écoute",