feat: finished attention check and face name association

nicoalee · nicoalee · commit 73a8d5842552 · 2024-11-28T16:59:25.000-05:00
diff --git a/src/app/models/ParticipantData.ts b/src/app/models/ParticipantData.ts
@@ -173,6 +173,7 @@ export class FaceNameAssociationTaskData extends BaseParticipantData {
     isCorrect: boolean;
     responseTime: number;
     blockNum: number;
+    attentionCheck: string;
 }
 
 export class PLTTaskData extends BaseParticipantData {
diff --git a/src/app/pages/tasks/task-playables/attention-check/attention-check.component.html b/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>
diff --git a/src/app/pages/tasks/task-playables/attention-check/attention-check.component.scss b/src/app/pages/tasks/task-playables/attention-check/attention-check.component.scss
@@ -0,0 +1 @@
+@import '../../../../sass/mixins';
diff --git a/src/app/pages/tasks/task-playables/attention-check/attention-check.component.ts b/src/app/pages/tasks/task-playables/attention-check/attention-check.component.ts
@@ -0,0 +1,111 @@
+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[];
+        durationStimulusPresented: 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 });
+    }
+}
diff --git a/src/app/pages/tasks/task-playables/face-name-association/face-name-association.component.scss b/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;
 }
 
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
@@ -13,6 +13,7 @@ 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 { AttentionCheckCache } from '../attention-check/attention-check.component';
 
 interface FaceNameAssociationMetadata {
     componentName: ComponentName;
@@ -32,7 +33,6 @@ interface FaceNameAssociationMetadata {
 
 export enum FaceNameAssociationCache {
     STIMULI = 'facenameassociation-stimuli',
-    BLOCK_NUM = 'facenameassociation-block-num',
 }
 
 @Component({
@@ -46,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
@@ -127,7 +127,7 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
             'counterbalance not defined'
         );
         this.stimulusSet = this.counterbalance;
-        this.blockNum = this.config.getCacheValue(FaceNameAssociationCache.BLOCK_NUM) || 1; // set to 1 if not defined
+        this.blockNum = metadata.componentConfig.blockNum || 1;
 
         if (config.getCacheValue(FaceNameAssociationCache.STIMULI)) {
             this.stimuli = config.getCacheValue(FaceNameAssociationCache.STIMULI) as FaceNameAssociationStimulus[];
@@ -167,6 +167,10 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
         this.allowResponse = false;
         this.currentName = '';
 
+        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,
             studyId: this.studyId,
@@ -185,6 +189,7 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
             responseTime: 0,
             blockNum: this.blockNum,
             submitted: this.timerService.getCurrentTimestamp(),
+            attentionCheck: attentionCheckAnswers,
         });
 
         if (this.phase === 'learning-phase') {
@@ -280,7 +285,6 @@ export class FaceNameAssociationComponent extends AbstractBaseTaskComponent {
 
         if (finishedLastStimulus) {
             super.decideToRepeat();
-            this.config.setCacheValue(FaceNameAssociationCache.BLOCK_NUM, ++this.blockNum);
             return;
         } else {
             this.currentStimuliIndex++;
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
@@ -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>
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
@@ -100,12 +100,16 @@ export class TaskDisplayComponent implements OnDestroy, Playable {
         this.handleComplete(nav);
     }
 
-    injectString(section: DisplaySection): string {
-        const text = getTextForLang(this.translateService.currentLang as SupportedLangs, section.textContent);
-
-        switch (section.injection) {
+    injectString(
+        textContent: string,
+        injection: 'cached-string' | 'counterbalance' | 'counterbalance-alternative',
+        cacheKey: string
+    ): string {
+        const text = getTextForLang(this.translateService.currentLang as SupportedLangs, textContent);
+
+        switch (injection) {
             case 'cached-string':
-                const cachedVar = thisOrDefault(this.config.getCacheValue(section.cacheKey), '');
+                const cachedVar = thisOrDefault(this.config.getCacheValue(cacheKey), '');
                 return text.replace('???', cachedVar);
             case 'counterbalance':
                 return text.replace('???', this.counterbalanceStr);
@@ -143,7 +147,8 @@ export class TaskDisplayComponent implements OnDestroy, Playable {
 
         // search the display sections to see if counterbalance alt needs to be injected
         if (!!metadata.componentConfig.sections.find((section) => section.injection === 'counterbalance-alternative')) {
-            // 3 - 1 == 2, and 3 - 2 == 1. This gives us the value that is not the counterbalance target value
+            // 3 - 1 == 2, and 3 - 2 == 1. This gives us the value that is not the counterbalance target value.
+            // Note that this only works if the counterbalance groups = 2. If more, we need to modify this logic
             this.counterbalanceAltStr = config.counterBalanceGroups[3 - config.counterbalanceNumber];
         }
 
diff --git a/src/app/pages/tasks/task.module.ts b/src/app/pages/tasks/task.module.ts
@@ -48,6 +48,7 @@ import { MatrixComponent } from './task-playables/questionnaire/matrix/matrix.co
 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';
 
 @NgModule({
     declarations: [
@@ -83,6 +84,7 @@ import { SdmtComponent } from './task-playables/sdmt/sdmt.component';
         SelectOptionComponent,
         InfoDisplayComponent,
         SkipButtonComponent,
+        AttentionCheckComponent,
 
         RotateDirective,
 
diff --git a/src/app/services/component-factory.service.ts b/src/app/services/component-factory.service.ts
@@ -22,11 +22,13 @@ import { ProbabilisticLearningTaskComponent } from '../pages/tasks/task-playable
 import { IowaGamblingTaskComponent } from '../pages/tasks/task-playables/iowa-gambling-task/iowa-gambling-task.component';
 import { InformationTaskComponent } from '../pages/tasks/task-playables/information-task/information-task.component';
 import { SdmtComponent } from '../pages/tasks/task-playables/sdmt/sdmt.component';
+import { AttentionCheckComponent } from '../pages/tasks/task-playables/attention-check/attention-check.component';
 
 export enum ComponentName {
     // Generic components
     DISPLAY_COMPONENT = 'DISPLAYCOMPONENT',
     SELECT_OPTION_COMPONENT = 'SELECTOPTIONCOMPONENT',
+    ATTENTIONCHECKCOMPONENT = 'ATTENTIONCHECKCOMPONENT',
 
     // Task related components
     RATING_COMPONENT = 'RATINGCOMPONENT',
@@ -78,6 +80,7 @@ const ComponentMap = {
     [ComponentName.IOWA_GAMBLING_COMPONENT]: IowaGamblingTaskComponent,
     [ComponentName.INFORMATION_TASK_COMPONENT]: InformationTaskComponent,
     [ComponentName.SDMT_COMPONENT]: SdmtComponent,
+    [ComponentName.ATTENTIONCHECKCOMPONENT]: AttentionCheckComponent,
 };
 
 @Injectable({
diff --git a/src/app/services/data-generation/data-generation.service.ts b/src/app/services/data-generation/data-generation.service.ts
@@ -468,7 +468,7 @@ export class DataGenerationService {
                 return getLearningPhaseStimuli(counterbalance);
             }
         } else {
-            return recombineStimuliForTesting(existingStimuli);
+            return recombineStimuliForTesting(existingStimuli, 2);
         }
     }
 
diff --git a/src/app/services/data-generation/raw-data/face-name-association.ts b/src/app/services/data-generation/raw-data/face-name-association.ts
diff --git a/src/assets/images/instructions/face-name-association/1/instructions.jpg b/src/assets/images/instructions/face-name-association/1/instructions.jpg
diff --git a/src/assets/images/instructions/face-name-association/2/instructions.jpg b/src/assets/images/instructions/face-name-association/2/instructions.jpg

Original file line number	Diff line number	Diff line change
`@@ -173,6 +173,7 @@ export class FaceNameAssociationTaskData extends BaseParticipantData {`
`173`	`173`	`isCorrect: boolean;`
`174`	`174`	`responseTime: number;`
`175`	`175`	`blockNum: number;`
	`176`	`+ attentionCheck: string;`
`176`	`177`	`}`
`177`	`178`
`178`	`179`	`export class PLTTaskData extends BaseParticipantData {`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,8 @@`
`4`	`4`	`font-size: 50px !important;`
`5`	`5`	`}`
`6`	`6`	`.stimulus {`
`7`		`- width: 600px;`
	`7`	`+ width: 50vw;`
	`8`	`+ max-width: 1000px;`
`8`	`9`	`height: auto;`
`9`	`10`	`}`
`10`	`11`