fix: adjust image quality

src/app/pages/tasks/task-playables/face-name-association/face-name-association.component.html

@@ -1,14 +1,7 @@
 <div class="wrapper task-text flex-column-center">
     <div class="full-box flex-column-center" style="justify-content: space-around">
         <ng-container *ngIf="showStimulus">
-            <img
-                *ngIf="stimulusShown"
-                class="stimulus"
-                width="800"
-                height="562"
-                [ngSrc]="stimulusShown"
-                alt="Stimulus"
-            />
+            <img *ngIf="stimulusShown" class="stimulus" [src]="stimulusShown" alt="Stimulus" />
         </ng-container>
 
         <ng-container *ngIf="showStimulus && stimulusShown && phase !== 'test-phase'">

src/app/pages/tasks/task-playables/face-name-association/face-name-association.component.scss

@@ -4,7 +4,9 @@
     font-size: 50px !important;
 }
 .stimulus {
+    width: 50vw;
     max-width: 1000px;
+    height: auto;
 }
 
 .response-button {

src/app/pages/tasks/task-playables/face-name-association/face-name-association.component.ts

@@ -4,16 +4,17 @@ import { StimuliProvidedType } from 'src/app/models/enums';
 import { TranslatedFeedback, UserResponse } from 'src/app/models/InternalDTOs';
 import { FaceNameAssociationTaskData } from 'src/app/models/ParticipantData';
 import { ComponentName } from 'src/app/services/component-factory.service';
-import { DataGenerationService } from 'src/app/services/data-generation/data-generation.service';
 import {
     FaceNameAssociationStimulus,
     FaceNameAssociationTaskTrialtype,
 } from 'src/app/services/data-generation/stimuli-models';
 import { LoaderService } from 'src/app/services/loader/loader.service';
 import { TimerService } from 'src/app/services/timer.service';
-import { AttentionCheckCache } from '../attention-check/attention-check.component';
 import { AbstractBaseTaskComponent } from '../base-task';
 import { TaskPlayerState } from '../task-player/task-player.component';
+import { DataGenerationService } from 'src/app/services/data-generation/data-generation.service';
+import { AttentionCheckCache } from '../attention-check/attention-check.component';
+import { NgOptimizedImage } from '@angular/common';
 
 interface FaceNameAssociationMetadata {
     componentName: ComponentName;

src/app/pages/tasks/task.module.ts

@@ -1,54 +1,54 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 import { MaterialModule } from 'src/app/modules/material/material.module';
-import { ChoiceComponent } from './unused/choice/choice.component';
+import { NgZorroModule } from 'src/app/modules/ngzorro/ngzorro.module';
+import { SafeResoucePipe } from 'src/app/pipes/safe.pipe';
+import { SharedModule } from '../shared/shared.module';
+import { BlankComponent } from './blank/blank.component';
+import { ConsentPageComponent } from './consent/consent-page/consent-page.component';
+import { NavigationButtonsComponent } from './shared/navigation-buttons/navigation-buttons.component';
+import { NumpadComponent } from './shared/numpad/numpad.component';
+import { OptionDisplayComponent } from './shared/option-display/option-display.component';
+import { RotateDirective } from './shared/Rotate.directive';
+import { SkipButtonComponent } from './shared/skip-button/skip-button.component';
+import { SliderComponent } from './shared/slider/slider.component';
+import { AttentionCheckComponent } from './task-playables/attention-check/attention-check.component';
 import { DemandSelectionComponent } from './task-playables/demand-selection/demand-selection.component';
 import { DigitSpanComponent } from './task-playables/digit-span/digit-span.component';
-import { NumpadComponent } from './shared/numpad/numpad.component';
+import { ConfirmDoneDialogComponent } from './task-playables/embedded-page/confirm-done-dialog/confirm-done-dialog.component';
+import { EmbeddedPageComponent } from './task-playables/embedded-page/embedded-page.component';
+import { IntroDialogComponent } from './task-playables/embedded-page/intro-dialog/intro-dialog.component';
+import { ChoicerComponent } from './task-playables/everyday-choice/choicer/choicer.component';
+import { RaterComponent } from './task-playables/everyday-choice/rater/rater.component';
+import { FaceNameAssociationComponent } from './task-playables/face-name-association/face-name-association.component';
 import { FingerTappingTaskComponent } from './task-playables/finger-tapping/finger-tapping-task.component';
+import { InfoDisplayComponent } from './task-playables/info-display/info-display.component';
+import { InformationTaskComponent } from './task-playables/information-task/information-task.component';
+import { IowaGamblingTaskComponent } from './task-playables/iowa-gambling-task/iowa-gambling-task.component';
 import { NBackComponent } from './task-playables/n-back/n-back.component';
 import { OddballComponent } from './task-playables/oddball/oddball.component';
-import { PostChoiceComponent } from './unused/post-choice/post-choice.component';
-import { ChoicerComponent } from './task-playables/everyday-choice/choicer/choicer.component';
-import { RatingComponent } from './unused/rating/rating.component';
-import { ShapeGameComponent } from './unused/shape-game/shape-game.component';
-import { TaskDisplayComponent } from './task-playables/task-display/task-display.component';
-import { SliderComponent } from './shared/slider/slider.component';
+import { ProbabilisticLearningTaskComponent } from './task-playables/probabilistic-learning-task/probabilistic-learning-task.component';
+import { MatrixComponent } from './task-playables/questionnaire/matrix/matrix.component';
+import { MultipleChoiceSelectComponent } from './task-playables/questionnaire/multiple-choice-select/multiple-choice-select.component';
+import { QuestionnaireComponent } from './task-playables/questionnaire/questionnaire.component';
+import { RadioButtonsComponent } from './task-playables/questionnaire/radio-buttons/radio-buttons.component';
+import { SliderControlComponent } from './task-playables/questionnaire/slider-control/slider-control.component';
+import { SartComponent } from './task-playables/sart/sart.component';
+import { SdmtComponent } from './task-playables/sdmt/sdmt.component';
+import { SelectOptionComponent } from './task-playables/select-option/select-option.component';
 import { SmileyFaceComponent } from './task-playables/smiley-face/smiley-face.component';
 import { StroopComponent } from './task-playables/stroop/stroop.component';
+import { TaskDisplayComponent } from './task-playables/task-display/task-display.component';
 import { TaskPlayerComponent } from './task-playables/task-player/task-player.component';
 import { TaskSwitchingComponent } from './task-playables/task-switching/task-switching.component';
 import { TrailMakingComponent } from './task-playables/trail-making/trail-making.component';
-import { RaterComponent } from './task-playables/everyday-choice/rater/rater.component';
-import { NgZorroModule } from 'src/app/modules/ngzorro/ngzorro.module';
-import { NavigationButtonsComponent } from './shared/navigation-buttons/navigation-buttons.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CommonModule, NgOptimizedImage } from '@angular/common';
-import { RotateDirective } from './shared/Rotate.directive';
+import { ChoiceComponent } from './unused/choice/choice.component';
 import { ColorGameComponent } from './unused/color-game/color-game.component';
-import { EmbeddedPageComponent } from './task-playables/embedded-page/embedded-page.component';
-import { SafeResoucePipe } from 'src/app/pipes/safe.pipe';
-import { SelectOptionComponent } from './task-playables/select-option/select-option.component';
-import { QuestionnaireComponent } from './task-playables/questionnaire/questionnaire.component';
-import { IntroDialogComponent } from './task-playables/embedded-page/intro-dialog/intro-dialog.component';
-import { ConfirmDoneDialogComponent } from './task-playables/embedded-page/confirm-done-dialog/confirm-done-dialog.component';
-import { ConsentPageComponent } from './consent/consent-page/consent-page.component';
-import { SharedModule } from '../shared/shared.module';
-import { InfoDisplayComponent } from './task-playables/info-display/info-display.component';
-import { SartComponent } from './task-playables/sart/sart.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { FaceNameAssociationComponent } from './task-playables/face-name-association/face-name-association.component';
-import { BlankComponent } from './blank/blank.component';
-import { ProbabilisticLearningTaskComponent } from './task-playables/probabilistic-learning-task/probabilistic-learning-task.component';
-import { OptionDisplayComponent } from './shared/option-display/option-display.component';
-import { IowaGamblingTaskComponent } from './task-playables/iowa-gambling-task/iowa-gambling-task.component';
-import { SkipButtonComponent } from './shared/skip-button/skip-button.component';
-import { InformationTaskComponent } from './task-playables/information-task/information-task.component';
-import { MultipleChoiceSelectComponent } from './task-playables/questionnaire/multiple-choice-select/multiple-choice-select.component';
-import { MatrixComponent } from './task-playables/questionnaire/matrix/matrix.component';
-import { SliderControlComponent } from './task-playables/questionnaire/slider-control/slider-control.component';
-import { RadioButtonsComponent } from './task-playables/questionnaire/radio-buttons/radio-buttons.component';
-import { SdmtComponent } from './task-playables/sdmt/sdmt.component';
-import { AttentionCheckComponent } from './task-playables/attention-check/attention-check.component';
+import { PostChoiceComponent } from './unused/post-choice/post-choice.component';
+import { RatingComponent } from './unused/rating/rating.component';
+import { ShapeGameComponent } from './unused/shape-game/shape-game.component';
 
 @NgModule({
     declarations: [
@@ -113,7 +113,6 @@ import { AttentionCheckComponent } from './task-playables/attention-check/attent
         ReactiveFormsModule,
         SharedModule,
         TranslateModule,
-        NgOptimizedImage,
     ],
     exports: [EmbeddedPageComponent],
 })