Merge pull request #192 from levante-framework/add-replay-button-no-a…

…udio Replay button should be present even after audio prompt stops playing
levante-framework · Sep 17, 2024 · 132d6d0 · 132d6d0
2 parents 1311101 + a5fad96
commit 132d6d0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/task-launcher/src/tasks/shared/helpers/PageStateHandler.ts b/task-launcher/src/tasks/shared/helpers/PageStateHandler.ts
@@ -14,13 +14,15 @@ export class PageStateHandler {
   audioUri: string;
   audioBuffer?: AudioBuffer;
   replayBtn: HTMLButtonElement;
+  playStimulusOnLoad: boolean;
 
-  constructor(audioFile: string) {
+  constructor(audioFile: string, playStimulusOnLoad: boolean) {
     this.audioFile = audioFile;
     this.audioUri = mediaAssets.audio[camelize(this.audioFile)] ||
     mediaAssets.audio.nullAudio;
     this.getbuffer();
     this.replayBtn = document.getElementById('replay-btn-revisited') as HTMLButtonElement;
+    this.playStimulusOnLoad = playStimulusOnLoad !== undefined ? playStimulusOnLoad : true;
   }
 
   async getbuffer() {

diff --git a/task-launcher/src/tasks/shared/helpers/replayAudio.ts b/task-launcher/src/tasks/shared/helpers/replayAudio.ts
@@ -4,13 +4,15 @@ import { PageStateHandler } from "./PageStateHandler";
 
 export async function setupReplayAudio(pageStateHandler: PageStateHandler) {
   if (pageStateHandler.replayBtn) {
-    pageStateHandler.disableReplayBtn();
-    const enableDelayBuffer = 100; //in ms
-    const totalStimulusDurationMs = await pageStateHandler.getStimulusDurationMs(); //in ms
-    const totalDelay = totalStimulusDurationMs + enableDelayBuffer;
-    setTimeout(() => {
-      pageStateHandler.enableReplayBtn();
-    }, totalDelay);
+    if (pageStateHandler.playStimulusOnLoad){
+      pageStateHandler.disableReplayBtn();
+      const enableDelayBuffer = 100; //in ms
+      const totalStimulusDurationMs = await pageStateHandler.getStimulusDurationMs(); //in ms
+      const totalDelay = totalStimulusDurationMs + enableDelayBuffer;
+      setTimeout(() => {
+        pageStateHandler.enableReplayBtn();
+      }, totalDelay);
+    }
 
     const onAudioEnd = () => {
       pageStateHandler.enableReplayBtn();

diff --git a/task-launcher/src/tasks/shared/trials/afcStimulus.ts b/task-launcher/src/tasks/shared/trials/afcStimulus.ts
@@ -112,23 +112,22 @@ function getStimulus(layoutConfigMap: Record<string, LayoutConfigType>) {
   }
 }
 
+
 const getPromptTemplate = (
   prompt: string,
   mediaSrc: string | null,
   mediaAlt: string,
   stimText: string | null | undefined,
   equalSizeStim: boolean,
-  noAudio: boolean,
   stimulusContainerClassList: string[],
 ) => {
   let template = '<div class="lev-stimulus-container">';
-  if (!noAudio) {
-    template += `
-      <button id="${replayButtonHtmlId}" class="replay">
-        ${replayButtonSvg}
-      </button>
-    `;
-  }
+
+  template += `
+    <button id="${replayButtonHtmlId}" class="replay">
+      ${replayButtonSvg}
+    </button>
+  `;
 
   if (prompt) {
     template += `
@@ -178,7 +177,6 @@ function getPrompt(layoutConfigMap: Record<string, LayoutConfigType>) {
 
   if (itemLayoutConfig) {
     const {
-      noAudio,
       prompt: {
         enabled: promptEnabled,
       },
@@ -202,7 +200,6 @@ function getPrompt(layoutConfigMap: Record<string, LayoutConfigType>) {
       mediaAlt,
       stimText,
       equalSizeStim,
-      noAudio,
       stimulusContainerClassList,
     );
   }
@@ -323,7 +320,8 @@ function doOnLoad(layoutConfigMap: Record<string, LayoutConfigType>) {
 
   const stim = taskStore().nextStimulus;
   const itemLayoutConfig = layoutConfigMap?.[stim.itemId];
-  const pageStateHandler = new PageStateHandler(stim.audioFile);
+  const noAudio = itemLayoutConfig?.noAudio;
+  const pageStateHandler = new PageStateHandler(stim.audioFile, !noAudio);
   const isPracticeTrial = stim.assessmentStage === 'practice_response';
   const isInstructionTrial = stim.trialType === 'instructions';
   // Handle the staggered buttons