fix(microlearning): responsive cards, consistent navigation and clearer activity step

src/components/microlearning/AutoEvaluationEnd.vue

@@ -6,30 +6,51 @@
       {{ $t('autoEvaluation.end.subtitle') }}
     </p>
     <QuestionComponent
+      v-model="answers.link"
       type="likert"
       :question="$t('autoEvaluation.firstQuestion', { discipline: discipline })"
     />
-    <QuestionComponent type="likert" :question="$t('autoEvaluation.secondQuestion')" />
-    <QuestionComponent type="yesMaybeNot" :question="$t('autoEvaluation.willUse')" />
-    <QuestionComponent type="openDialogue" :question="$t('autoEvaluation.feedback')" />
-    <div class="buttons">
-      <button class="btn-primary" @click="$emit('start')">
-        {{ $t('finish') }}
-      </button>
-      <a @click="$emit('start')">{{ $t('skip') }}</a>
-    </div>
+    <QuestionComponent
+      v-model="answers.confidence"
+      type="likert"
+      :question="$t('autoEvaluation.secondQuestion')"
+    />
+    <QuestionComponent
+      v-model="answers.willUse"
+      type="yesMaybeNot"
+      :question="$t('autoEvaluation.willUse')"
+    />
+    <QuestionComponent
+      v-model="answers.feedback"
+      type="openDialogue"
+      :question="$t('autoEvaluation.feedback')"
+    />
+    <TrailNavigation
+      class="nav"
+      next-label="finish"
+      skippable
+      @back="$emit('back')"
+      @next="$emit('start')"
+      @skip="$emit('start')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import QuestionComponent from '@/components/microlearning/QuestionComponent.vue';
+import TrailNavigation from '@/components/microlearning/TrailNavigation.vue';
+import type { EvalAnswers } from '@/composables/useMicrolearning';
 
 defineProps<{
   discipline?: string;
 }>();
 
+// reactive object owned by useMicrolearning, fields are filled in place
+const answers = defineModel<EvalAnswers>('answers', { required: true });
+
 defineEmits<{
   (e: 'start'): void;
+  (e: 'back'): void;
 }>();
 </script>
 
@@ -45,21 +66,14 @@ defineEmits<{
   width: 100%;
 }
 
-.buttons {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.subtitle {
+  max-width: 560px;
+  text-align: center;
 }
 
-.btn-primary {
-  padding: 0.9rem;
-  border: none;
-  border-radius: 10px;
-  background: var(--primary-hover);
-  color: white;
-  cursor: pointer;
-  font-size: 1rem;
-  margin-bottom: 1rem;
+.nav {
+  width: 100%;
+  max-width: 560px;
 }
 
 .abadge {

src/components/microlearning/AutoEvaluationStart.vue

@@ -3,28 +3,45 @@
     <p class="abadge">{{ $t('autoEvaluation.start.badge') }}</p>
     <p class="title is-4">{{ $t('autoEvaluation.start.title') }}</p>
     <p class="subtitle is-6">
-      {{ $t('autoEvaluation.start.subtitle') }}
+      {{ locked ? $t('autoEvaluation.start.lockedNotice') : $t('autoEvaluation.start.subtitle') }}
     </p>
-    <QuestionComponent :question="$t('autoEvaluation.firstQuestion', { discipline: discipline })" />
-    <QuestionComponent :question="$t('autoEvaluation.secondQuestion')" />
-    <div class="buttons">
-      <button class="btn-primary" @click="$emit('start')">
-        {{ $t('microLearning.briefingScreen.primaryButton') }}
-      </button>
-      <a @click="$emit('start')">{{ $t('skip') }}</a>
-    </div>
+    <QuestionComponent
+      v-model="answers.link"
+      :disabled="locked"
+      :question="$t('autoEvaluation.firstQuestion', { discipline: discipline })"
+    />
+    <QuestionComponent
+      v-model="answers.confidence"
+      :disabled="locked"
+      :question="$t('autoEvaluation.secondQuestion')"
+    />
+    <TrailNavigation
+      class="nav"
+      :next-label="locked ? 'next' : 'microLearning.briefingScreen.primaryButton'"
+      :skippable="!locked"
+      @back="$emit('back')"
+      @next="$emit('start')"
+      @skip="$emit('start')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import QuestionComponent from '@/components/microlearning/QuestionComponent.vue';
+import TrailNavigation from '@/components/microlearning/TrailNavigation.vue';
+import type { EvalAnswers } from '@/composables/useMicrolearning';
 
 defineProps<{
   discipline?: string;
+  locked: boolean;
 }>();
 
+// reactive object owned by useMicrolearning, fields are filled in place
+const answers = defineModel<EvalAnswers>('answers', { required: true });
+
 defineEmits<{
   (e: 'start'): void;
+  (e: 'back'): void;
 }>();
 </script>
 
@@ -40,21 +57,14 @@ defineEmits<{
   width: 100%;
 }
 
-.buttons {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.subtitle {
+  max-width: 560px;
+  text-align: center;
 }
 
-.btn-primary {
-  padding: 0.9rem;
-  border: none;
-  border-radius: 10px;
-  background: var(--primary-hover);
-  color: white;
-  cursor: pointer;
-  font-size: 1rem;
-  margin-bottom: 1rem;
+.nav {
+  width: 100%;
+  max-width: 560px;
 }
 
 .abadge {

src/components/microlearning/BriefingScreen.vue

@@ -29,19 +29,18 @@
         {{ $t('microLearning.hint') }}
       </div>
 
-      <button class="btn-primary" @click="$emit('start')">
-        {{ $t('microLearning.briefingScreen.primaryButton') }}
-      </button>
-
-      <button class="btn-ghost" @click="$emit('back')">
-        {{ $t('microLearning.briefingScreen.ghostButton') }}
-      </button>
+      <TrailNavigation
+        next-label="microLearning.briefingScreen.primaryButton"
+        @back="$emit('back')"
+        @next="$emit('start')"
+      />
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
 import type { DisciplineMeta } from '@/types/microlearning';
+import TrailNavigation from './TrailNavigation.vue';
 
 const obj = ['understand', 'identify', 'discover'];
 defineProps<{
@@ -130,31 +129,4 @@ h2 {
   font-size: 0.85rem;
   margin-bottom: 1rem;
 }
-
-.btn-primary {
-  width: 100%;
-  padding: 0.9rem;
-  border: none;
-  border-radius: 10px;
-  background: var(--primary-hover);
-  color: white;
-  cursor: pointer;
-  font-size: 1rem;
-  margin-bottom: 1rem;
-}
-
-.btn-primary:hover {
-  background: var(--primary-dark);
-}
-
-.btn-ghost {
-  border: none;
-  background: transparent;
-  color: var(--neutral-80);
-  cursor: pointer;
-}
-
-.btn-ghost:hover {
-  color: var(--neutral-100);
-}
 </style>

src/components/microlearning/CompleteScreen.vue

@@ -13,6 +13,23 @@
         {{ $t('microLearning.completeScreen.description') }}
       </p>
 
+      <div class="takeaways">
+        <article v-if="chosenActivity" class="takeaway">
+          <span class="takeaway-label">{{ $t('microLearning.reflection.yourPick') }}</span>
+          <h3>{{ chosenActivity.title }}</h3>
+          <p>{{ chosenActivity.desc }}</p>
+        </article>
+
+        <article v-if="resource" class="takeaway resource">
+          <span class="takeaway-label">📚 {{ resource.label }}</span>
+          <h3>{{ resource.title }}</h3>
+          <p>{{ $t('microLearning.reflection.resourceSubtitle') }}</p>
+          <a :href="resource.href" target="_blank" rel="noopener noreferrer">
+            {{ $t('microLearning.reflection.ctaSource') }}
+          </a>
+        </article>
+      </div>
+
       <div class="actions">
         <router-link class="btn-primary" to="/tutor">
           {{ $t('microLearning.completeScreen.primaryButton') }}</router-link
@@ -26,6 +43,20 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import type { Activity, Discipline, VotretourStep } from '@/types/microlearning';
+
+const props = defineProps<{
+  discipline: Discipline;
+  chosenActivity: Activity | null;
+}>();
+
+const resource = computed(
+  () =>
+    (props.discipline.steps.find((s) => s.type === 'votretour') as VotretourStep | undefined)
+      ?.resource
+);
+
 defineEmits<{
   (e: 'restart'): void;
 }>();
@@ -69,6 +100,58 @@ defineEmits<{
   margin-bottom: 2rem;
 }
 
+.takeaways {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  text-align: left;
+}
+
+.takeaway {
+  padding: 1.25rem 1.5rem;
+  border: 1px solid var(--primary);
+  border-radius: 12px;
+  background: var(--neutral-0);
+}
+
+.takeaway.resource {
+  border-color: transparent;
+  background: var(--primary-lighter);
+}
+
+.takeaway-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--primary-dark);
+}
+
+.takeaway h3 {
+  margin: 0.35rem 0;
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+
+.takeaway p {
+  margin: 0;
+  color: var(--neutral-80);
+  line-height: 1.6;
+}
+
+.takeaway a {
+  display: inline-block;
+  margin-top: 0.5rem;
+  color: var(--primary-dark);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.takeaway a:hover {
+  text-decoration: underline;
+}
+
 .actions {
   display: flex;
   flex-direction: column;

src/components/microlearning/LikertScale.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="scaleWrapper">
     <div class="scaleLevel" :key="value" v-for="value in scale">
-      <div class="scaleValue" :class="{ selected: selected === value }" @click="selectValue(value)">
+      <button
+        type="button"
+        class="scaleValue"
+        :class="{ selected: selected === value }"
+        :disabled="disabled"
+        @click="selected = value"
+      >
         {{ value }}
-      </div>
+      </button>
       <span class="levelLegend" v-if="value === 1 || value == 5">{{
         value === 1 ? $t('autoEvaluation.notAtAll') : $t('autoEvaluation.tottally')
       }}</span>
@@ -12,13 +18,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type Ref } from 'vue';
 const scale = [1, 2, 3, 4, 5];
-const selected: Ref<number | undefined> = ref(undefined);
-
-const selectValue = (val: number) => {
-  selected.value = val;
-};
+const selected = defineModel<number>();
+defineProps<{ disabled?: boolean }>();
 </script>
 
 <style lang="css" scoped>
@@ -36,9 +38,16 @@ const selectValue = (val: number) => {
   margin-top: 0.5rem;
   cursor: pointer;
   border: 1px solid var(--neutral-50);
+  font: inherit;
+  color: inherit;
+  width: 100%;
+}
+
+.scaleValue:disabled {
+  cursor: default;
 }
 
-.scaleValue:hover {
+.scaleValue:hover:not(:disabled) {
   border-color: var(--primary-hover);
   color: var(--primary-hover);
 }