fix: layout modifications to task display and face name

cognitive-neuroscience · Dec 5, 2024 · b3fd6de · b3fd6de
1 parent fbc0d0f
commit b3fd6de
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 9 deletions.
diff --git a/...app/pages/tasks/task-playables/face-name-association/face-name-association.component.html b/...app/pages/tasks/task-playables/face-name-association/face-name-association.component.html
@@ -1,7 +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" [src]="stimulusShown" alt="Stimulus" />
+            <img *ngIf="stimulusShown" class="stimulus" [src]="stimulusShown" alt="Stimulus" />
         </ng-container>
 
         <ng-container *ngIf="showStimulus && stimulusShown && phase !== 'test-phase'">

diff --git a/...app/pages/tasks/task-playables/face-name-association/face-name-association.component.scss b/...app/pages/tasks/task-playables/face-name-association/face-name-association.component.scss
@@ -5,6 +5,7 @@
 }
 .stimulus {
     max-width: 1000px;
+    width: 50vw;
 }
 
 .response-button {

diff --git a/src/app/pages/tasks/task-playables/face-name-association/face-name-association.component.ts b/src/app/pages/tasks/task-playables/face-name-association/face-name-association.component.ts
@@ -25,6 +25,7 @@ interface FaceNameAssociationMetadata {
         interTrialDelay: number;
         durationStimulusPresented: number;
         blockNum: number;
+        durationOfFeedback: number;
         stimuliConfig: {
             type: StimuliProvidedType;
             stimuli: FaceNameAssociationStimulus[];
@@ -57,7 +58,7 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
     private stimulusSet = 1;
     private interTrialDelay = 500;
     private durationStimulusPresented = 3000;
-    private durationOfFeedback = 1000;
+    private durationOfFeedback = 3000;
     private counterbalance: 1 | 2;
     private blockNum: number;
 
@@ -87,6 +88,10 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
             [SupportedLangs.EN]: 'Is this',
             [SupportedLangs.FR]: 'Est-ce',
         },
+        tooSlow: {
+            [SupportedLangs.EN]: 'Please respond faster next time',
+            [SupportedLangs.FR]: 'Veuillez répondre plus vite la prochaine fois',
+        },
     };
 
     get prompt(): string {
@@ -140,6 +145,7 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
         );
         this.stimulusSet = this.counterbalance;
         this.blockNum = metadata.componentConfig.blockNum || 1;
+        this.durationOfFeedback = this.durationOfFeedback || 3000;
 
         if (config.getCacheValue(FaceNameAssociationCache.STIMULI)) {
             this.stimuli = config.getCacheValue(FaceNameAssociationCache.STIMULI) as FaceNameAssociationStimulus[];
@@ -285,14 +291,14 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
                 this.currentTrial.isCorrect = true;
                 break;
             case UserResponse.NA:
-                this.feedback = TranslatedFeedback.TOOSLOW;
+                this.feedback = this.translationMapping.tooSlow[this.translateService.currentLang];
                 break;
             default:
                 this.currentTrial.isCorrect = false;
                 break;
         }
 
-        if (this.phase === 'test-phase' && this.feedback === TranslatedFeedback.TOOSLOW) {
+        if (this.phase === 'test-phase' && this.currentTrial.userAnswer === UserResponse.NA) {
             this.showFeedback = true;
             await wait(this.durationOfFeedback);
             if (this.isDestroyed) return;

diff --git a/src/app/pages/tasks/task-playables/task-display/task-display.component.html b/src/app/pages/tasks/task-playables/task-display/task-display.component.html
@@ -1,10 +1,12 @@
 <div class="display-container">
-    <div *ngIf="timerMode && showTimer">
-        <div class="timer-value">
-            <span>{{ timerDisplayValue }}</span>
-        </div>
+    <div *ngIf="timerMode && showTimer" class="timer-value {{ timerPlacement }}">
+        <span>{{ timerDisplayValue }}</span>
     </div>
-    <div class="display-instructions overflow-scrollable">
+    <div
+        class="display-instructions overflow-scrollable {{
+            timerMode && showTimer && timerPlacement.includes('top') ? 'pad-top' : ''
+        }}"
+    >
         <div>
             <ng-container *ngIf="title">
                 <h1 class="title" [innerHTML]="title"></h1>

diff --git a/src/app/pages/tasks/task-playables/task-display/task-display.component.scss b/src/app/pages/tasks/task-playables/task-display/task-display.component.scss
@@ -25,6 +25,8 @@
 }
 
 .timer-value {
+    position: absolute;
+    width: 100%;
     padding: 1% 4% 1% 4%;
     display: flex;
     justify-content: center;
@@ -33,6 +35,36 @@
     color: white;
     background-color: #3f51b5;
     font-size: 2.5rem;
+
+    &.top-left {
+        top: 0;
+        justify-content: flex-start !important;
+    }
+
+    &.top-center {
+        top: 0;
+        justify-content: center !important;
+    }
+
+    &.top-right {
+        top: 0;
+        justify-content: flex-end !important;
+    }
+
+    &.bottom-left {
+        bottom: 0;
+        justify-content: flex-start !important;
+    }
+
+    &.bottom-center {
+        bottom: 0;
+        justify-content: center !important;
+    }
+
+    &.bottom-right {
+        bottom: 0;
+        justify-content: flex-end !important;
+    }
 }
 
 .display-instructions {
@@ -43,6 +75,10 @@
     display: flex;
     flex-direction: column;
 
+    &.pad-top {
+        margin-top: 4%;
+    }
+
     .title {
         font-weight: bold;
         color: #3f51b5;

diff --git a/src/app/pages/tasks/task-playables/task-display/task-display.component.ts b/src/app/pages/tasks/task-playables/task-display/task-display.component.ts
@@ -36,6 +36,7 @@ export interface TaskDisplayComponentMetadata {
             canSkipTimer: boolean;
             skipAvailableAfterXSeconds: number;
             countDown: boolean;
+            placement?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
         };
         subtitle?: string;
         sections?: DisplaySection[];
@@ -73,6 +74,7 @@ export class TaskDisplayComponent implements OnDestroy, Playable {
     timerMode: boolean = false;
     timerDisplayValue: number;
     timerCountDown: boolean = false;
+    timerPlacement: TaskDisplayComponentMetadata['componentConfig']['timerConfig']['placement'] = 'top-left';
     showNavigationButtons: boolean = true;
 
     nextButtonText: string = '';
@@ -160,6 +162,7 @@ export class TaskDisplayComponent implements OnDestroy, Playable {
                 metadata.componentConfig.timerConfig.skipAvailableAfterXSeconds,
                 0
             );
+            this.timerPlacement = thisOrDefault(metadata.componentConfig.timerConfig.placement, 'top-center');
 
             if (!this.canSkipTimer || this.skipAvailableAfterXSeconds > 0) {
                 this.showNavigationButtons = false;