Feature/partially correct

apps/ais/src/styles.scss

@@ -29,7 +29,12 @@
 @include solid-core-theme($app-theme);
 @include solid-glossary-theme($app-theme);
 @include solid-profile-theme($app-theme);
-@include solid-quiz-theme($app-theme, $quiz-correct, $quiz-incorrect);
+@include solid-quiz-theme(
+  $app-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+);
 @include solid-skeleton-theme($app-theme);
 @include solid-slideshow-theme($app-theme);
 

apps/ais/src/theme.scss

@@ -80,6 +80,7 @@ $app-accent: mat.define-palette($ais-accent, 500);
 
 $quiz-correct: mat.define-palette(mat.$light-green-palette, 600, 200, 600);
 $quiz-incorrect: mat.define-palette(mat.$red-palette, 700, 200, 600);
+$quiz-partiallyIncorrect: mat.define-palette(mat.$gray-palette, 400, 200, 600);
 
 // The warn palette is optional (defaults to red).
 $app-warn: mat.define-palette(mat.$red-palette);

apps/dive/src/styles.scss

@@ -29,7 +29,12 @@
 @include solid-core-theme($app-theme);
 @include solid-glossary-theme($app-theme);
 @include solid-profile-theme($app-theme);
-@include solid-quiz-theme($app-theme, $quiz-correct, $quiz-incorrect);
+@include solid-quiz-theme(
+  $app-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+);
 @include solid-skeleton-theme($app-theme);
 @include solid-slideshow-theme($app-theme);
 

apps/dive/src/theme.scss

@@ -80,6 +80,7 @@ $app-accent: mat.define-palette($dive-secondary, 500);
 
 $quiz-correct: mat.define-palette(mat.$light-green-palette, 600, 200, 600);
 $quiz-incorrect: mat.define-palette(mat.$red-palette, 700, 200, 600);
+$quiz-partiallyIncorrect: mat.define-palette(mat.$gray-palette, 400, 200, 600);
 
 // The warn palette is optional (defaults to red).
 $app-warn: mat.define-palette(mat.$red-palette);

apps/geomat/src/styles.scss

@@ -29,7 +29,12 @@
 @include solid-core-theme($app-theme);
 @include solid-glossary-theme($app-theme);
 @include solid-profile-theme($app-theme);
-@include solid-quiz-theme($app-theme, $quiz-correct, $quiz-incorrect);
+@include solid-quiz-theme(
+  $app-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+);
 @include solid-skeleton-theme($app-theme);
 @include solid-slideshow-theme($app-theme);
 

apps/geomat/src/theme.scss

@@ -82,6 +82,7 @@ $app-accent: mat.define-palette($geomat-secondary, 400);
 
 $quiz-correct: mat.define-palette(mat.$light-green-palette, 600, 200, 600);
 $quiz-incorrect: mat.define-palette(mat.$red-palette, 700, 200, 600);
+$quiz-partiallyIncorrect: mat.define-palette(mat.$gray-palette, 400, 200, 600);
 
 // The warn palette is optional (defaults to red).
 $app-warn: mat.define-palette(mat.$red-palette);

apps/planty/src/styles.scss

@@ -29,7 +29,12 @@
 @include solid-core-theme($app-theme);
 @include solid-glossary-theme($app-theme);
 @include solid-profile-theme($app-theme);
-@include solid-quiz-theme($app-theme, $quiz-correct, $quiz-incorrect);
+@include solid-quiz-theme(
+  $app-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+);
 @include solid-skeleton-theme($app-theme);
 @include solid-slideshow-theme($app-theme);
 

apps/planty/src/theme.scss

@@ -79,6 +79,7 @@ $app-accent: mat.define-palette($planty-accent, 300);
 
 $quiz-correct: mat.define-palette(mat.$light-green-palette, 600, 200, 600);
 $quiz-incorrect: mat.define-palette(mat.$red-palette, 700, 200, 600);
+$quiz-partiallyIncorrect: mat.define-palette(mat.$gray-palette, 400, 200, 600);
 
 // The warn palette is optional (defaults to red).
 $app-warn: mat.define-palette(mat.$red-palette);

apps/wabe/src/styles.scss

@@ -29,7 +29,12 @@
 @include solid-core-theme($app-theme);
 @include solid-glossary-theme($app-theme);
 @include solid-profile-theme($app-theme);
-@include solid-quiz-theme($app-theme, $quiz-correct, $quiz-incorrect);
+@include solid-quiz-theme(
+  $app-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+);
 @include solid-skeleton-theme($app-theme);
 @include solid-slideshow-theme($app-theme);
 

apps/wabe/src/theme.scss

@@ -80,6 +80,7 @@ $app-accent: mat.define-palette($wabe-accent, 500);
 
 $quiz-correct: mat.define-palette(mat.$light-green-palette, 600, 200, 600);
 $quiz-incorrect: mat.define-palette(mat.$red-palette, 700, 200, 600);
+$quiz-partiallyIncorrect: mat.define-palette(mat.$gray-palette, 400, 200, 600);
 
 // The warn palette is optional (defaults to red).
 $app-warn: mat.define-palette(mat.$red-palette);

libs/solid/glossary/src/lib/components/glossary.component.html

@@ -5,35 +5,37 @@
     <mat-icon>{{ Filter.value === '' ? 'search' : 'close' }}</mat-icon>
   </button>
 </mat-form-field>
-<mat-list *ngIf="GlossaryEntries | async as state">
-  <ng-container *ngFor="let kvp of state.sections">
-    <h3 mat-subeader>{{ kvp[0] }}</h3>
-    <mat-list-item
-      *ngFor="let entryId of kvp[1]"
-      solidGlossaryEntry
-      [refId]="entryId"
-    >
-      <span class="mat-body-strong entry-header" mat-line>{{
-        state.entries[entryId].term
-      }}</span>
-      <div
-        [data]="state.entries[entryId].text"
-        markdown
-        [inline]="true"
-        mat-line
-      ></div>
-      <span
-        class="links"
-        *ngIf="state.entries[entryId].links.length > 0"
-        mat-line
-        >&rarr;<a
-          (click)="followRef(refId)"
-          *ngFor="let refId of state.entries[entryId].links; let i = index"
-        >
-          {{ state.entries[refId].term
-          }}{{ i < state.entries[entryId].links.length - 1 ? ',' : '' }}</a
-        >
-      </span>
-    </mat-list-item>
-  </ng-container>
-</mat-list>
+<div class="scrollable-list">
+  <mat-list *ngIf="GlossaryEntries | async as state">
+    <ng-container *ngFor="let kvp of state.sections">
+      <h3 mat-subeader>{{ kvp[0] }}</h3>
+      <mat-list-item
+        *ngFor="let entryId of kvp[1]"
+        solidGlossaryEntry
+        [refId]="entryId"
+      >
+        <span class="mat-body-strong entry-header" mat-line>{{
+          state.entries[entryId].term
+        }}</span>
+        <div
+          [data]="state.entries[entryId].text"
+          markdown
+          [inline]="true"
+          mat-line
+        ></div>
+        <span
+          class="links"
+          *ngIf="state.entries[entryId].links.length > 0"
+          mat-line
+          >&rarr;<a
+            (click)="followRef(refId)"
+            *ngFor="let refId of state.entries[entryId].links; let i = index"
+          >
+            {{ state.entries[refId].term
+            }}{{ i < state.entries[entryId].links.length - 1 ? ',' : '' }}</a
+          >
+        </span>
+      </mat-list-item>
+    </ng-container>
+  </mat-list>
+</div>

libs/solid/glossary/src/lib/components/glossary.component.scss

@@ -1,6 +1,6 @@
 mat-list {
   padding: 0;
-  display: inline-block;
+  display: block;
   height: calc(100vh - 119px);
   width: 300px;
   overflow-y: auto;
@@ -60,3 +60,8 @@ mat-form-field {
     }
   }
 }
+
+.scrollable-list {
+  overflow-y: auto;
+  scrollbar-color: #9999 #9993;
+}

libs/solid/quiz/src/lib/components/end/end.component.html

@@ -46,6 +46,9 @@ <h2>Selbsttest - Auswertung</h2>
       <mat-icon class="correctIcon" *ngIf="question.answered === 1">
         check_circle
       </mat-icon>
+      <mat-icon class="partiallyIncorrectIcon" *ngIf="question.answered === -2">
+        check_circle
+      </mat-icon>
       <mat-icon class="incorrectIcon" *ngIf="question.answered === -1">
         cancel
       </mat-icon>

libs/solid/quiz/src/lib/components/end/end.component.scss

@@ -184,3 +184,8 @@ mat-form-field {
   margin: 2em;
   text-align: center;
 }
+
+.partiallyIncorrectIcon {
+  transform: translateY(-3px) translateX(-5px);
+  opacity: 1;
+}

libs/solid/quiz/src/lib/components/multiple-choice-question/multiple-choice-question.component.html

@@ -44,5 +44,5 @@
   mat-raised-button
   class="nextQuestionBtn"
 >
-  {{ correct === 1 ? 'Richtig,' : ' Falsch,' }} nächste Frage
+  {{ getFeedbackResultLabel() }} nächste Frage
 </button>

libs/solid/quiz/src/lib/components/multiple-choice-question/multiple-choice-question.component.ts

@@ -60,23 +60,57 @@ export class MultipleChoiceQuestionComponent implements OnChanges {
 
   public onShowAnswersClick() {
     this.showAnswers = true;
-    this.correct = 1;
-
-    let correctAnswers = 0;
-    this.question.answers.forEach((answer) => {
-      if (answer.correct) {
-        correctAnswers++;
-        if (!this.selectedAnswers.includes(answer.id)) {
-          this.correct = -1;
-        }
-      }
-    });
-
-    if (this.selectedAnswers.length !== correctAnswers) {
+
+    if (this.isFullyCorrect()) {
+      this.correct = 1;
+    } else if (this.isPartiallyCorrect()) {
+      this.correct = -2;
+    } else {
       this.correct = -1;
     }
   }
 
+  public isFullyCorrect(): boolean {
+    const correctIds = this.question.answers
+      .filter((a) => a.correct)
+      .map((a) => a.id)
+      .sort();
+    const selected = [...this.selectedAnswers].sort();
+    return JSON.stringify(correctIds) === JSON.stringify(selected);
+  }
+
+  public isPartiallyCorrect(): boolean {
+    const correctIds = this.question.answers
+      .filter((a) => a.correct)
+      .map((a) => a.id);
+    const incorrectIds = this.question.answers
+      .filter((a) => !a.correct)
+      .map((a) => a.id);
+
+    const selectedCorrect = this.selectedAnswers.filter((id) =>
+      correctIds.includes(id),
+    );
+    const selectedIncorrect = this.selectedAnswers.filter((id) =>
+      incorrectIds.includes(id),
+    );
+
+    return (
+      selectedCorrect.length > 0 &&
+      (selectedIncorrect.length > 0 ||
+        selectedCorrect.length < correctIds.length)
+    );
+  }
+
+  public isIncorrect(): boolean {
+    return !this.isFullyCorrect() && !this.isPartiallyCorrect();
+  }
+
+  public getFeedbackResultLabel(): string {
+    if (this.correct === 1) return 'Richtig,';
+    if (this.correct === -2) return 'Teilweise richtig,';
+    return 'Falsch,';
+  }
+
   public onNextQuestionClick() {
     if (this.selectedAnswers.length == 0) this.correct = 0;
     this.nextQuestionClicked.emit(this.correct);

libs/solid/quiz/src/lib/components/question/question.theme.scss

@@ -1,11 +1,22 @@
 @use '@angular/material' as mat;
 
-@mixin solid-quiz-question-theme($mat-theme, $quiz-correct, $quiz-incorrect) {
+@mixin solid-quiz-question-theme(
+  $mat-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+) {
   $accent: map-get($mat-theme, accent);
   $foreground: map-get($mat-theme, foreground);
   $warn: map-get($mat-theme, warn);
   $quiz-correct: mat.define-palette(mat.$green-palette, 400, 200, 600);
   $quiz-wrong: mat.define-palette(mat.$red-palette, 400, 200, 600);
+  $quiz-partiallyIncorrect: mat.define-palette(
+    mat.$gray-palette,
+    400,
+    200,
+    600
+  );
   solid-quiz-question {
     mat-radio-group {
       display: flex;

libs/solid/quiz/src/lib/components/ranking-question/ranking-question.component.html

@@ -80,5 +80,12 @@
   mat-raised-button
   class="nextQuestionBtn"
 >
-  {{ correct === 1 ? 'Richtig,' : ' Falsch,' }} nächste Frage
+  {{
+    correct === 1
+      ? 'Richtig,'
+      : hasSubsequence && correct === -1
+        ? 'Teilweise richtig,'
+        : 'Falsch,'
+  }}
+  nächste Frage
 </button>

libs/solid/quiz/src/lib/state/quiz.model.ts

@@ -39,7 +39,9 @@ export enum QuizQuestionType {
   Range = 'RN',
 }
 
-export type QuizQuestionInSession = QuizQuestion & { answered: 0 | -1 | 1 };
+export type QuizQuestionInSession = QuizQuestion & {
+  answered: 0 | -1 | 1 | -2;
+};
 
 export interface QuizSession {
   progress: number;

libs/solid/quiz/src/lib/state/quiz.state.ts

@@ -1,6 +1,6 @@
 import { Action, Selector, State, StateContext } from '@ngxs/store';
 import {
   QuizAnswer,
   QuizMetadata,
   QuizQuestion,
   QuizQuestionApi,
@@ -187,7 +187,7 @@
     const session = { ...(getState().session as QuizSession) };
     const answeredQuestion = {
       ...session.questions[session.currentQuestion],
-      answered: correct as 0 | -1 | 1,
+      answered: correct as 0 | -1 | 1 | -2,
     };
     patchState({
       session: {

libs/solid/quiz/src/quiz-theme.scss

@@ -1,10 +1,16 @@
 @import 'lib/components/question/question.theme';
 
-@mixin solid-quiz-theme($mat-theme, $quiz-correct, $quiz-incorrect) {
+@mixin solid-quiz-theme(
+  $mat-theme,
+  $quiz-correct,
+  $quiz-incorrect,
+  $quiz-partiallyIncorrect
+) {
   @include solid-quiz-question-theme(
     $mat-theme,
     $quiz-correct,
-    $quiz-incorrect
+    $quiz-incorrect,
+    $quiz-partiallyIncorrect
   );
   $accent: map-get($mat-theme, accent);
 
@@ -50,6 +56,10 @@
     color: mat.get-color-from-palette($quiz-incorrect);
   }
 
+  .partiallyIncorrectIcon {
+    color: mat.get-color-from-palette($quiz-partiallyIncorrect);
+  }
+
   .unansweredIcon {
     color: mat.get-color-from-palette($accent);
   }