fix: dark mode, navigation, quiz removal, exam multi-answers

Author: uouake

frontend/src/app/pages/exam/exam.html

@@ -61,20 +61,33 @@ <h1>Simulateur d'Examen</h1>
           <div class="qhead">
             <span class="badge font-mono muted">{{ index + 1 }}/{{ questions.length }}</span>
             <span class="pill">{{ (q.domainKey ?? 'unknown') === 'development' ? 'Développement' : (q.domainKey ?? 'unknown') === 'security' ? 'Security' : (q.domainKey ?? 'unknown') === 'deployment' ? 'Deployment' : (q.domainKey ?? 'unknown') === 'troubleshooting' ? 'Troubleshooting & Optimization' : 'Unknown' }}</span>
+            <span *ngIf="isMultiChoice(q)" class="pill multi-pill">Multi ({{ q.requiredAnswers }})</span>
             <button class="flag" (click)="toggleFlag()" [attr.aria-label]="isFlagged(q) ? 'Retirer le marqueur de la question ' + (index + 1) : 'Marquer la question ' + (index + 1) + ' pour revision'" [attr.aria-pressed]="isFlagged(q)">{{ isFlagged(q) ? '🚩' : '⚑' }}</button>
           </div>
 
           <pre class="stem" [appGlossaryHandler]="q.stem" [innerHTML]="q.stem | glossary"></pre>
 
+          <!-- Message pour questions multi-réponses -->
+          <div *ngIf="isMultiChoice(q)" class="multi-hint muted">
+            Sélectionnez {{ q.requiredAnswers }} réponses
+            <span *ngIf="chosenSetFor(q) as selected">
+              ({{ selected.size }}/{{ q.requiredAnswers }})
+            </span>
+          </div>
+
           <div class="choices">
             <button
               class="choice"
               *ngFor="let k of choiceKeys(q)"
               (click)="pick(k)"
-              [disabled]="submittingAttempt || answers.has(q.id)"
-              [class.selected]="chosenFor(q) === k"
+              [disabled]="submittingAttempt"
+              [class.selected]="isChosen(q, k)"
+              [class.multi-choice]="isMultiChoice(q)"
               [appGlossaryHandler]="q.choices[k]"
             >
+              <div class="choice-indicator" [class.checkbox]="isMultiChoice(q)" [class.radio]="!isMultiChoice(q)" [class.checked]="isChosen(q, k)">
+                <span *ngIf="isChosen(q, k)">✓</span>
+              </div>
               <div class="choice-k">{{ k }}</div>
               <div class="choice-body" [innerHTML]="q.choices[k] | glossary"></div>
             </button>

frontend/src/app/pages/exam/exam.scss

@@ -187,6 +187,20 @@ h1 {
   border: 1px solid hsl(var(--exam-border));
 }
 
+.multi-hint {
+  margin: 10px 0;
+  padding: 8px 12px;
+  background: hsl(var(--primary) / 0.1);
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.multi-pill {
+  background: hsl(200 90% 50% / 0.2) !important;
+  color: hsl(200 90% 65%) !important;
+}
+
 .choices {
   display: grid;
   gap: 10px;
@@ -203,12 +217,45 @@ h1 {
   display: flex;
   gap: 12px;
   align-items: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.choice:hover {
+.choice:hover:not(:disabled) {
   border-color: hsl(var(--primary) / 0.4);
 }
 
+.choice:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.choice-indicator {
+  width: 22px;
+  height: 22px;
+  border: 2px solid hsl(var(--exam-border));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+}
+
+.choice-indicator.checkbox {
+  border-radius: 6px;
+}
+
+.choice-indicator.radio {
+  border-radius: 50%;
+}
+
+.choice-indicator.checked {
+  background: hsl(var(--primary));
+  border-color: hsl(var(--primary));
+  color: white;
+  font-size: 14px;
+}
+
 .choice-k {
   width: 30px;
   height: 30px;
@@ -223,6 +270,7 @@ h1 {
 
 .choice.selected {
   outline: 2px solid hsl(var(--primary) / 0.35);
+  border-color: hsl(var(--primary) / 0.5);
 }
 
 .nav {

frontend/src/app/pages/exam/exam.spec.ts

@@ -24,6 +24,7 @@ describe('Exam', () => {
       stem: 'What is AWS Lambda?',
       choices: { A: 'Compute', B: 'Storage' },
       answer: 'A',
+      requiredAnswers: 1,
       conceptKey: 'lambda',
       domainKey: 'development',
       frExplanation: 'Explication',
@@ -38,6 +39,7 @@ describe('Exam', () => {
       stem: 'What is S3?',
       choices: { A: 'Compute', B: 'Storage' },
       answer: 'B',
+      requiredAnswers: 1,
       conceptKey: 's3',
       domainKey: 'security',
       frExplanation: 'Explication',
@@ -52,6 +54,7 @@ describe('Exam', () => {
       stem: 'What is EC2?',
       choices: { A: 'Compute', B: 'Storage' },
       answer: 'A',
+      requiredAnswers: 1,
       conceptKey: 'ec2',
       domainKey: 'deployment',
       frExplanation: 'Explication',
@@ -347,7 +350,7 @@ describe('Exam', () => {
     await fixture.whenStable();
   });
 
-  it('should not allow answering same question twice', async () => {
+  it('should allow changing answer', async () => {
     component.startExam();
     httpMock.expectOne(`${baseUrl}/api/exams/start`).flush({
       mode: 'exam',
@@ -357,7 +360,10 @@ describe('Exam', () => {
     });
     await fixture.whenStable();
 
+    // Première réponse
     component.pick('A');
+    expect(component.answers.get('q1')).toBe('A');
+
     httpMock.expectOne(`${baseUrl}/api/attempts`).flush({
       ok: true,
       attemptId: 'att1',
@@ -366,8 +372,9 @@ describe('Exam', () => {
     });
     await fixture.whenStable();
 
+    // Changement de réponse
     component.pick('B');
-    expect(component.answers.get('q1')).toBe('A');
+    expect(component.answers.get('q1')).toBe('B');
   });
 
   it('should return chosen answer for question', () => {
@@ -618,4 +625,197 @@ describe('Exam', () => {
   it('should not show negative time', () => {
     expect(component.formatTime(-10)).toBe('00:00:00');
   });
+
+  // Tests pour les questions multi-réponses
+  describe('Multi-choice questions', () => {
+    const multiQuestion: Question = {
+      id: 'q-multi',
+      exam: 'DVA-C02',
+      topic: 1,
+      questionNumber: 1,
+      stem: 'Select two options:',
+      choices: { A: 'Option A', B: 'Option B', C: 'Option C', D: 'Option D' },
+      answer: 'A,B',
+      requiredAnswers: 2,
+      conceptKey: 'multi',
+      domainKey: 'development',
+      frExplanation: 'Explication',
+      sourceUrl: 'url',
+      textHash: 'hash-multi',
+    };
+
+    it('should detect multi-choice question', () => {
+      expect(component.isMultiChoice(multiQuestion)).toBe(true);
+      expect(component.isMultiChoice(mockQuestions[0])).toBe(false);
+    });
+
+    it('should allow selecting multiple answers up to requiredAnswers', async () => {
+      component.startExam();
+      httpMock.expectOne(`${baseUrl}/api/exams/start`).flush({
+        mode: 'exam',
+        count: 65,
+        durationMinutes: 130,
+        items: [multiQuestion],
+      });
+      await fixture.whenStable();
+
+      component.pick('A');
+      httpMock.expectOne(`${baseUrl}/api/attempts`).flush({ ok: true, attemptId: 'att1', isCorrect: false, correctAnswer: 'A,B' });
+      await fixture.whenStable();
+
+      component.pick('B');
+      httpMock.expectOne(`${baseUrl}/api/attempts`).flush({ ok: true, attemptId: 'att2', isCorrect: false, correctAnswer: 'A,B' });
+      await fixture.whenStable();
+
+      const answers = component.answers.get('q-multi') as Set<string>;
+      expect(answers.size).toBe(2);
+      expect(answers.has('A')).toBe(true);
+      expect(answers.has('B')).toBe(true);
+    });
+
+    it('should not allow more than requiredAnswers selections', async () => {
+      component.startExam();
+      httpMock.expectOne(`${baseUrl}/api/exams/start`).flush({
+        mode: 'exam',
+        count: 65,
+        durationMinutes: 130,
+        items: [multiQuestion],
+      });
+      await fixture.whenStable();
+
+      component.pick('A');
+      httpMock.expectOne(`${baseUrl}/api/attempts`).flush({ ok: true, attemptId: 'att1', isCorrect: false, correctAnswer: 'A,B' });
+      await fixture.whenStable();
+
+      component.pick('B');
+      httpMock.expectOne(`${baseUrl}/api/attempts`).flush({ ok: true, attemptId: 'att2', isCorrect: false, correctAnswer: 'A,B' });
+      await fixture.whenStable();
+
+      component.pick('C'); // Ne devrait pas être ajouté (déjà 2 réponses)
+
+      const answers = component.answers.get('q-multi') as Set<string>;
+      expect(answers.size).toBe(2);
+      expect(answers.has('C')).toBe(false);
+    });
+
+    it('should allow deselecting answers', async () => {
+      component.startExam();
+      httpMock.expectOne(`${baseUrl}/api/exams/start`).flush({
+        mode: 'exam',
+        count: 65,
+        durationMinutes: 130,
+        items: [multiQuestion],
+      });
+      await fixture.whenStable();
+
+      component.pick('A');
+      httpMock.expectOne(`${baseUrl}/api/attempts`).flush({ ok: true, attemptId: 'att1', isCorrect: false, correctAnswer: 'A,B' });
+      await fixture.whenStable();
+
+      component.pick('B');
+      httpMock.expectOne(`${baseUrl}/api/attempts`).flush({ ok: true, attemptId: 'att2', isCorrect: false, correctAnswer: 'A,B' });
+      await fixture.whenStable();
+
+      component.pick('A'); // Désélectionner A
+
+      const answers = component.answers.get('q-multi') as Set<string>;
+      expect(answers.size).toBe(1);
+      expect(answers.has('A')).toBe(false);
+      expect(answers.has('B')).toBe(true);
+    });
+
+    it('should check if choice is selected for multi question', async () => {
+      component.startExam();
+      httpMock.expectOne(`${baseUrl}/api/exams/start`).flush({
+        mode: 'exam',
+        count: 65,
+        durationMinutes: 130,
+        items: [multiQuestion],
+      });
+      await fixture.whenStable();
+
+      expect(component.isChosen(multiQuestion, 'A')).toBe(false);
+
+      component.pick('A');
+      httpMock.expectOne(`${baseUrl}/api/attempts`).flush({ ok: true, attemptId: 'att1', isCorrect: false, correctAnswer: 'A,B' });
+      await fixture.whenStable();
+
+      expect(component.isChosen(multiQuestion, 'A')).toBe(true);
+      expect(component.isChosen(multiQuestion, 'B')).toBe(false);
+    });
+
+    it('should return chosen set for multi question', async () => {
+      component.startExam();
+      httpMock.expectOne(`${baseUrl}/api/exams/start`).flush({
+        mode: 'exam',
+        count: 65,
+        durationMinutes: 130,
+        items: [multiQuestion],
+      });
+      await fixture.whenStable();
+
+      expect(component.chosenSetFor(multiQuestion)).toBeNull();
+
+      component.pick('A');
+      httpMock.expectOne(`${baseUrl}/api/attempts`).flush({ ok: true, attemptId: 'att1', isCorrect: false, correctAnswer: 'A,B' });
+      await fixture.whenStable();
+
+      const set = component.chosenSetFor(multiQuestion);
+      expect(set).not.toBeNull();
+      expect(set!.has('A')).toBe(true);
+    });
+
+    it('should calculate correct score for multi answers', async () => {
+      component.startExam();
+      httpMock.expectOne(`${baseUrl}/api/exams/start`).flush({
+        mode: 'exam',
+        count: 65,
+        durationMinutes: 130,
+        items: [multiQuestion],
+      });
+      await fixture.whenStable();
+
+      // Réponses correctes
+      component.answers.set('q-multi', new Set(['A', 'B']));
+
+      const score = component.score();
+      expect(score.correct).toBe(1);
+      expect(score.total).toBe(1);
+      expect(score.percent).toBe(100);
+    });
+
+    it('should calculate incorrect score for partial multi answers', async () => {
+      component.startExam();
+      httpMock.expectOne(`${baseUrl}/api/exams/start`).flush({
+        mode: 'exam',
+        count: 65,
+        durationMinutes: 130,
+        items: [multiQuestion],
+      });
+      await fixture.whenStable();
+
+      // Réponses partielles (seulement A, pas B)
+      component.answers.set('q-multi', new Set(['A', 'C']));
+
+      const score = component.score();
+      expect(score.correct).toBe(0);
+      expect(score.total).toBe(1);
+      expect(score.percent).toBe(0);
+    });
+
+    it('should return joined string for multi chosenFor', async () => {
+      component.startExam();
+      httpMock.expectOne(`${baseUrl}/api/exams/start`).flush({
+        mode: 'exam',
+        count: 65,
+        durationMinutes: 130,
+        items: [multiQuestion],
+      });
+      await fixture.whenStable();
+
+      component.answers.set('q-multi', new Set(['B', 'A']));
+
+      expect(component.chosenFor(multiQuestion)).toBe('A,B');
+    });
+  });
 });