Feat 149 update face name association task (#150)

* feat: update face name assoc, added initial attention check files

* feat: finished attention check and face name association

* fix: updating data for prod

Author: nicoalee

src/app/models/ParticipantData.ts

@@ -166,12 +166,14 @@ export class FaceNameAssociationTaskData extends BaseParticipantData {
     namePresented: string;
     actualName: string;
     stimulusSet: number;
-    maleFemale: 'male' | 'female';
+    gender: 'M' | 'F';
     trialType: FaceNameAssociationTaskTrialtype;
     userAnswer: UserResponse;
     actualAnswer: UserResponse;
     isCorrect: boolean;
     responseTime: number;
+    blockNum: number;
+    attentionCheck: string;
 }
 
 export class PLTTaskData extends BaseParticipantData {

src/app/pages/tasks/task-playables/attention-check/attention-check.component.html

@@ -0,0 +1,5 @@
+<div class="container-fluid task-text wrapper flex-column-center">
+    <div class="full-box flex-column-center">
+        <h1 class="color-primary responsive-font-size-xl">{{ promptDisplayed }}</h1>
+    </div>
+</div>

src/app/pages/tasks/task-playables/attention-check/attention-check.component.scss

@@ -0,0 +1 @@
+@import '../../../../sass/mixins';

src/app/pages/tasks/task-playables/attention-check/attention-check.component.ts

@@ -0,0 +1,110 @@
+import { Component, HostListener } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ComponentName } from 'src/app/services/component-factory.service';
+import { Navigation } from '../../shared/navigation-buttons/navigation-buttons.component';
+import { Playable } from '../playable';
+import { TaskPlayerState } from '../task-player/task-player.component';
+import { TranslateService } from '@ngx-translate/core';
+
+interface AttentionCheckMetadata {
+    component: ComponentName;
+    componentConfig: {
+        numbersDisplayed: number[];
+        maxResponseTime: number;
+    };
+}
+
+export enum AttentionCheckCache {
+    USER_ANSWERS = 'attention-check-user-answers',
+}
+
+@Component({
+    selector: 'app-attention-check',
+    templateUrl: './attention-check.component.html',
+    styleUrls: ['./attention-check.component.scss'],
+})
+export class AttentionCheckComponent implements Playable {
+    numbersDisplayed: number[] = [];
+    userAnswers: string[] = [];
+    maxResponseTime: number = 0;
+    config: TaskPlayerState;
+
+    // stimulus related variables
+    showStimulus: boolean = false;
+    numberDisplayed: number;
+    promptDisplayed: string = '';
+    private responseAllowed: boolean = false;
+    private timer: any;
+
+    onComplete = new Subject<{ navigation: Navigation }>();
+
+    private translationMapping = {
+        promptBeginningSegment: {
+            en: 'Please press',
+            fr: '',
+        },
+        promptEndSegment: {
+            en: 'on your keyboard',
+            fr: '',
+        },
+    };
+
+    constructor(private translateService: TranslateService) {}
+
+    configure(metadata: AttentionCheckMetadata, config?: TaskPlayerState): void {
+        this.config = config;
+        this.numbersDisplayed = metadata.componentConfig.numbersDisplayed;
+        this.maxResponseTime = metadata.componentConfig.maxResponseTime;
+    }
+
+    private setTimer(delay: number, cbFunc?: () => void) {
+        this.timer = window.setTimeout(() => {
+            if (cbFunc) cbFunc();
+        }, delay);
+    }
+
+    afterInit(): void {
+        this.begin();
+    }
+
+    private setStimulus() {
+        this.showStimulus = true;
+        this.numberDisplayed = this.numbersDisplayed[this.userAnswers.length];
+        const currentLang = this.translateService.currentLang;
+        this.promptDisplayed = `${this.translationMapping.promptBeginningSegment[currentLang]} ${this.numberDisplayed} ${this.translationMapping.promptEndSegment[currentLang]}`;
+    }
+
+    begin() {
+        this.setTimer(this.maxResponseTime, () => {
+            this.handleRoundInteraction(null);
+        });
+        this.responseAllowed = true;
+        this.setStimulus();
+    }
+
+    @HostListener('window:keydown', ['$event'])
+    handleRoundInteraction(event: KeyboardEvent | null) {
+        if (!this.responseAllowed) return;
+        if (event === null) {
+            // we hit our maximum response time
+            this.userAnswers.push(null);
+        } else {
+            this.userAnswers.push(event.key);
+        }
+        this.completeRound();
+    }
+
+    completeRound() {
+        this.responseAllowed = false;
+        if (this.userAnswers.length >= this.numbersDisplayed.length) {
+            this.handleComplete();
+        } else {
+            this.begin();
+        }
+    }
+
+    handleComplete(): void {
+        this.config.setCacheValue(AttentionCheckCache.USER_ANSWERS, this.userAnswers);
+        this.onComplete.next({ navigation: Navigation.NEXT });
+    }
+}

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

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

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

@@ -13,24 +13,28 @@ import { TimerService } from 'src/app/services/timer.service';
 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 { ImageService } from 'src/app/services/image.service';
+import { AttentionCheckCache } from '../attention-check/attention-check.component';
 
 interface FaceNameAssociationMetadata {
     componentName: ComponentName;
     componentConfig: {
         isPractice: boolean;
         phase: 'learning-phase' | 'test-phase';
         maxResponseTime: number;
-        stimulusSet: number;
         interTrialDelay: number;
         durationStimulusPresented: number;
+        blockNum: number;
         stimuliConfig: {
             type: StimuliProvidedType;
             stimuli: FaceNameAssociationStimulus[];
         };
     };
 }
 
+export enum FaceNameAssociationCache {
+    STIMULI = 'facenameassociation-stimuli',
+}
+
 @Component({
     selector: 'app-face-name-association',
     templateUrl: './face-name-association.component.html',
@@ -42,7 +46,7 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
      * This task involves two phases. In the first phase, the participant sees a bunch of images and associated names. This is the learning phase.
      * In the second phase, the participant is tested on the images. Half of them are correct, and are half of them are recombined.
      *
-     * The stimuli are hard coded.
+     * The face images are taken from a set number of images, and names are automatically (and randomly) assigned depending on the counterbalance.
      */
 
     // config variables
@@ -53,6 +57,8 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
     private interTrialDelay = 500;
     private durationStimulusPresented = 3000;
     private durationOfFeedback = 1000;
+    private counterbalance: 1 | 2;
+    private blockNum: number;
 
     // high level variables
     taskData: FaceNameAssociationTaskData[];
@@ -62,12 +68,13 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
     // local state variables
     trialNum = 0;
     currentName = '';
+    stimulusShown = '';
     showStimulus = false;
     allowResponse = false;
-    stimulusShown: string | ArrayBuffer = null;
     blobs: { [key: string]: Blob } = {};
     feedback: string = '';
     showFeedback: boolean = false;
+    imagePath: string = '';
 
     YES = UserResponse.YES;
     NO = UserResponse.NO;
@@ -86,8 +93,7 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
     constructor(
         protected timerService: TimerService,
         protected loaderService: LoaderService,
-        private dataGenService: DataGenerationService,
-        private imageService: ImageService
+        private dataGenService: DataGenerationService
     ) {
         super(loaderService);
     }
@@ -107,44 +113,51 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
                 'duration stimulus presented not defined'
             );
 
+            this.config = config;
+
             this.phase = throwErrIfNotDefined(metadata.componentConfig.phase, 'phase not defined');
         } catch (error) {
             throw new Error('values not defined, cannot start study');
         }
         this.isPractice = metadata.componentConfig.isPractice;
-        this.stimulusSet = metadata.componentConfig.stimulusSet || 1;
         this.interTrialDelay = metadata.componentConfig.interTrialDelay || 500;
         this.durationStimulusPresented = metadata.componentConfig.durationStimulusPresented || 3000;
-
-        if (metadata.componentConfig.stimuliConfig.type === StimuliProvidedType.HARDCODED)
+        this.counterbalance = throwErrIfNotDefined(
+            config.counterBalanceGroups[config.counterbalanceNumber] as 1 | 2,
+            'counterbalance not defined'
+        );
+        this.stimulusSet = this.counterbalance;
+        this.blockNum = metadata.componentConfig.blockNum || 1;
+
+        if (config.getCacheValue(FaceNameAssociationCache.STIMULI)) {
+            this.stimuli = config.getCacheValue(FaceNameAssociationCache.STIMULI) as FaceNameAssociationStimulus[];
+        } else if (metadata.componentConfig.stimuliConfig.type === StimuliProvidedType.HARDCODED) {
             this.stimuli = metadata.componentConfig.stimuliConfig.stimuli;
+        }
     }
 
     async start() {
         this.taskData = [];
         this.currentStimuliIndex = 0;
         this.trialNum = 0;
 
-        if (!this.stimuli) {
-            this.stimuli = this.dataGenService.generateFaceNameAssociationTaskStimuli(this.phase);
-            const fileNames = this.stimuli.map((x) => `/assets/images/stimuli/facenameassociation/${x.imageName}.png`);
-            this.imageService.loadImagesAsBlobs(fileNames).subscribe((res) => {
-                res.forEach((blob, index) => {
-                    const imageName = this.stimuli[index].imageName;
-                    this.blobs[imageName] = blob;
-                });
-                super.start();
-            });
-        } else {
-            super.start();
+        this.stimuli = this.dataGenService.generateFaceNameAssociationTaskStimuli(
+            this.phase,
+            this.counterbalance,
+            this.stimuli
+        );
+        if (!this.config.getCacheValue(FaceNameAssociationCache.STIMULI)) {
+            // store in cache for next block
+            this.config.setCacheValue(FaceNameAssociationCache.STIMULI, this.stimuli);
         }
+        super.start();
     }
 
     private getActualAnswer(stimulus: FaceNameAssociationStimulus): UserResponse {
         if (this.phase === 'learning-phase') {
             return UserResponse.NA;
         } else {
-            return stimulus.personName === stimulus.correctPersonName ? UserResponse.YES : UserResponse.NO;
+            return stimulus.trialType === FaceNameAssociationTaskTrialtype.INTACT ? UserResponse.YES : UserResponse.NO;
         }
     }
 
@@ -153,7 +166,10 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
         this.showStimulus = false;
         this.allowResponse = false;
         this.currentName = '';
-        this.stimulusShown = null;
+
+        const attentionCheckAnswers: string = (
+            (this.config.getCacheValue(AttentionCheckCache.USER_ANSWERS) as string[]) || []
+        ).reduce((acc, curr, index) => (index === 0 ? curr : `${acc}, ${curr}`), '');
 
         this.taskData.push({
             userID: this.userID,
@@ -162,19 +178,18 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
             trial: ++this.trialNum,
             phase: this.phase,
             imagePresented: this.currentStimulus.imageName,
-            namePresented: this.currentStimulus.personName,
-            actualName: this.currentStimulus.correctPersonName,
+            namePresented: this.currentStimulus.displayedPersonName,
+            actualName: this.currentStimulus.actualPersonName,
             stimulusSet: this.stimulusSet,
-            maleFemale: this.currentStimulus.isFemale ? 'female' : 'male',
-            trialType:
-                this.currentStimulus.personName === this.currentStimulus.correctPersonName
-                    ? FaceNameAssociationTaskTrialtype.INTACT
-                    : FaceNameAssociationTaskTrialtype.RECOMBINED,
+            gender: this.currentStimulus.gender,
+            trialType: this.currentStimulus.trialType,
             userAnswer: UserResponse.NA,
             isCorrect: false,
             actualAnswer: this.getActualAnswer(this.currentStimulus),
             responseTime: 0,
+            blockNum: this.blockNum,
             submitted: this.timerService.getCurrentTimestamp(),
+            attentionCheck: attentionCheckAnswers,
         });
 
         if (this.phase === 'learning-phase') {
@@ -196,8 +211,8 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
     }
 
     private async setStimuliUI() {
-        this.currentName = this.currentStimulus.personName;
-        await this.showImage(this.blobs[this.currentStimulus.imageName]);
+        this.currentName = this.currentStimulus.displayedPersonName;
+        this.stimulusShown = this.currentStimulus.imagePath;
     }
 
     private setMaxResponseTimer(delay: number, cbFunc?: () => void) {
@@ -279,17 +294,4 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
             return;
         }
     }
-
-    private showImage(blob: Blob): Promise<void> {
-        return new Promise((resolve) => {
-            const fr = new FileReader();
-            const handler = () => {
-                this.stimulusShown = fr.result;
-                fr.removeEventListener('load', handler);
-                resolve();
-            };
-            fr.addEventListener('load', handler);
-            fr.readAsDataURL(blob);
-        });
-    }
 }

src/app/pages/tasks/task-playables/task-display/task-display.component.html

@@ -16,7 +16,10 @@ <h3 *ngIf="subtitle" class="subtitle" [innerHTML]="subtitle"></h3>
         <div>
             <ng-container *ngFor="let section of displaySections">
                 <ng-container *ngIf="section.sectionType === 'text'">
-                    <div class="section" [innerHTML]="injectString(section)"></div>
+                    <div
+                        class="section"
+                        [innerHTML]="injectString(section.textContent, section.injection, section.cacheKey)"
+                    ></div>
                 </ng-container>
                 <div
                     class="image-container {{ section.imageAlignment }}"
@@ -29,7 +32,7 @@ <h3 *ngIf="subtitle" class="subtitle" [innerHTML]="subtitle"></h3>
                 >
                     <img
                         class="{{ section.sectionType }}"
-                        [src]="getTranslation(section.imagePath)"
+                        [src]="injectString(getTranslation(section.imagePath), section.injection, section.cacheKey)"
                         alt="Instruction Image"
                     />
                 </div>