Add next button wait and timeout

public/demo-image/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v1.0.5/src/parser/StudyConfigSchema.json",
+  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/time-to-next/src/parser/StudyConfigSchema.json",
   "studyMetadata": {
     "title": "Simple Images as Stimuli: Decision-Making with Uncertainty Visualizations",
     "version": "pilot",
@@ -54,7 +54,9 @@
             "No"
           ]
         }
-      ]
+      ],
+      "nextButtonEnableTime": 3000,
+      "nextButtonDisableTime": 15000
     },
     "dotplot-medium": {
       "meta": {

src/analysis/individualStudy/table/TableView.tsx

@@ -20,17 +20,19 @@ function AnswerCell({ cellData }: { cellData: StoredAnswer }) {
   return Number.isFinite(cellData.endTime) && Number.isFinite(cellData.startTime) ? (
     <Table.Td>
       <Stack miw={100}>
-        {Object.entries(cellData.answer).map(([key, storedAnswer]) => (
-          <Box key={`cell-${key}`}>
-            <Text fw={700} span>
-              {' '}
-              {`${key}: `}
-            </Text>
-            <Text span>
-              {`${storedAnswer}`}
-            </Text>
-          </Box>
-        ))}
+        {cellData.timedOut
+          ? <Text>Timed out</Text>
+          : Object.entries(cellData.answer).map(([key, storedAnswer]) => (
+            <Box key={`cell-${key}`}>
+              <Text fw={700} span>
+                {' '}
+                {`${key}: `}
+              </Text>
+              <Text span>
+                {`${storedAnswer}`}
+              </Text>
+            </Box>
+          ))}
       </Stack>
     </Table.Td>
   ) : (
@@ -237,6 +239,7 @@ export function TableView({
           endTime: Math.max(...Object.values(record.answers).filter((a) => a.endTime !== -1 && a.endTime !== undefined).map((a) => a.endTime)),
           answer: {},
           windowEvents: Object.values(record.answers).flatMap((a) => a.windowEvents),
+          timedOut: false, // not used
         }}
         key={`cell-${record.participantId}-total-duration`}
       />

src/components/TimedOut.tsx

@@ -0,0 +1,9 @@
+import { Text } from '@mantine/core';
+
+export function TimedOut() {
+  return (
+    <Text>
+      Thank you for participating. Unfortunately, you have not answered the questions within the given time limit. Because of this, you are no longer eligible to participate in the study. You may close this window now.
+    </Text>
+  );
+}

src/components/response/ResponseBlock.tsx

@@ -5,6 +5,7 @@ import {
 
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { IconAlertTriangle, IconInfoCircle } from '@tabler/icons-react';
 import {
   IndividualComponent,
   ResponseBlockLocation,
@@ -20,6 +21,8 @@ import { useAnswerField } from './utils';
 import ResponseSwitcher from './ResponseSwitcher';
 import { StoredAnswer, TrrackedProvenance } from '../../store/types';
 import { useStorageEngine } from '../../storage/storageEngineHooks';
+import { useStudyConfig } from '../../store/hooks/useStudyConfig';
+import { useNextStep } from '../../store/hooks/useNextStep';
 
 type Props = {
   status?: StoredAnswer;
@@ -42,6 +45,7 @@ export default function ResponseBlock({
   const storedAnswer = status?.answer;
 
   const studyId = useStudyId();
+  const studyConfig = useStudyConfig();
 
   const navigate = useNavigate();
 
@@ -62,6 +66,26 @@ export default function ResponseBlock({
 
   const showNextBtn = location === (configInUse?.nextButtonLocation || 'belowStimulus');
 
+  const nextButtonDisableTime = configInUse?.nextButtonDisableTime;
+  const nextButtonEnableTime = configInUse?.nextButtonEnableTime || 0;
+  const [timer, setTimer] = useState<number | undefined>(undefined);
+  // Start a timer on first render, update timer every 100ms
+  useEffect(() => {
+    let time = 0;
+    const interval = setInterval(() => {
+      time += 100;
+      setTimer(time);
+    }, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+  useEffect(() => {
+    if (timer && nextButtonDisableTime && timer >= nextButtonDisableTime && studyConfig.uiConfig.timeoutReject) {
+      navigate('./__timeout');
+    }
+  }, [nextButtonDisableTime, timer, navigate, studyConfig.uiConfig.timeoutReject]);
+
   useEffect(() => {
     const iframeResponse = responses.find((r) => r.type === 'iframe');
     if (iframeAnswers && iframeResponse) {
@@ -156,10 +180,28 @@ export default function ResponseBlock({
         }
       });
 
-      setEnableNextButton((allowFailedTraining && newAttemptsUsed >= trainingAttempts) || (Object.values(correctAnswers).every((isCorrect) => isCorrect) && newAttemptsUsed <= trainingAttempts));
+      setEnableNextButton(
+        (
+          allowFailedTraining && newAttemptsUsed >= trainingAttempts
+        ) || (
+          Object.values(correctAnswers).every((isCorrect) => isCorrect)
+          && newAttemptsUsed <= trainingAttempts
+        ),
+      );
     }
   };
 
+  const buttonTimerSatisfied = useMemo(
+    () => {
+      const nextButtonDisableSatisfied = nextButtonDisableTime && timer ? timer <= nextButtonDisableTime : true;
+      const nextButtonEnableSatisfied = timer ? timer >= nextButtonEnableTime : true;
+      return nextButtonDisableSatisfied && nextButtonEnableSatisfied;
+    },
+    [nextButtonDisableTime, nextButtonEnableTime, timer],
+  );
+
+  const { goToNextStep } = useNextStep();
+
   return (
     <div style={style}>
       {responses.map((response, index) => {
@@ -216,11 +258,38 @@ export default function ResponseBlock({
         )}
         {showNextBtn && (
           <NextButton
-            disabled={(hasCorrectAnswerFeedback && !enableNextButton) || !answerValidator.isValid()}
+            disabled={(hasCorrectAnswerFeedback && !enableNextButton) || !answerValidator.isValid() || !buttonTimerSatisfied}
             label={configInUse.nextButtonText || 'Next'}
           />
         )}
       </Group>
+      {showNextBtn && nextButtonEnableTime > 0 && timer && timer < nextButtonEnableTime && (
+      <Alert mt="md" title="Please wait" color="blue" icon={<IconInfoCircle />}>
+        The next button will be enabled in
+        {' '}
+        {Math.ceil((nextButtonEnableTime - timer) / 1000)}
+        {' '}
+        seconds.
+      </Alert>
+      )}
+      {showNextBtn && nextButtonDisableTime && timer && (nextButtonDisableTime - timer) < 10000 && (
+        (nextButtonDisableTime - timer) > 0
+          ? (
+            <Alert mt="md" title="Next button disables soon" color="yellow" icon={<IconAlertTriangle />}>
+              The next button disables in
+              {' '}
+              {Math.ceil((nextButtonDisableTime - timer) / 1000)}
+              {' '}
+              seconds.
+            </Alert>
+          ) : !studyConfig.uiConfig.timeoutReject && (
+            <Alert mt="md" title="Next button disabled" color="red" icon={<IconAlertTriangle />}>
+              The next button has timed out and is now disabled.
+              <Group justify="right" mt="sm">
+                <Button onClick={() => goToNextStep(false)} variant="link" color="red">Proceed</Button>
+              </Group>
+            </Alert>
+          ))}
     </div>
   );
 }

src/controllers/ComponentController.tsx

@@ -17,6 +17,7 @@ import { useStoreActions, useStoreDispatch } from '../store/store';
 import { StudyEnd } from '../components/StudyEnd';
 import { TrainingFailed } from '../components/TrainingFailed';
 import ResourceNotFound from '../ResourceNotFound';
+import { TimedOut } from '../components/TimedOut';
 
 // current active stimuli presented to the user
 export default function ComponentController() {
@@ -56,6 +57,11 @@ export default function ComponentController() {
     return <TrainingFailed />;
   }
 
+  // Handle timed out participants
+  if (currentComponent === '__timedOut') {
+    return <TimedOut />;
+  }
+
   if (currentComponent === 'Notfound') {
     return <ResourceNotFound email={studyConfig.uiConfig.contactEmail} />;
   }

src/parser/LibraryConfigSchema.json

@@ -60,6 +60,14 @@
             "description": "The meta data for the component. This is used to identify and provide additional information for the component in the admin panel.",
             "type": "object"
           },
+          "nextButtonDisableTime": {
+            "description": "A timeout (in ms) after which the next button will be disabled.",
+            "type": "number"
+          },
+          "nextButtonEnableTime": {
+            "description": "A timer (in ms) after which the next button will be enabled.",
+            "type": "number"
+          },
           "nextButtonLocation": {
             "$ref": "#/definitions/ResponseBlockLocation",
             "description": "The location of the next button."
@@ -486,6 +494,14 @@
           "description": "The meta data for the component. This is used to identify and provide additional information for the component in the admin panel.",
           "type": "object"
         },
+        "nextButtonDisableTime": {
+          "description": "A timeout (in ms) after which the next button will be disabled.",
+          "type": "number"
+        },
+        "nextButtonEnableTime": {
+          "description": "A timer (in ms) after which the next button will be enabled.",
+          "type": "number"
+        },
         "nextButtonLocation": {
           "$ref": "#/definitions/ResponseBlockLocation",
           "description": "The location of the next button."
@@ -658,6 +674,14 @@
           "description": "The meta data for the component. This is used to identify and provide additional information for the component in the admin panel.",
           "type": "object"
         },
+        "nextButtonDisableTime": {
+          "description": "A timeout (in ms) after which the next button will be disabled.",
+          "type": "number"
+        },
+        "nextButtonEnableTime": {
+          "description": "A timer (in ms) after which the next button will be enabled.",
+          "type": "number"
+        },
         "nextButtonLocation": {
           "$ref": "#/definitions/ResponseBlockLocation",
           "description": "The location of the next button."
@@ -949,6 +973,14 @@
           "description": "The meta data for the component. This is used to identify and provide additional information for the component in the admin panel.",
           "type": "object"
         },
+        "nextButtonDisableTime": {
+          "description": "A timeout (in ms) after which the next button will be disabled.",
+          "type": "number"
+        },
+        "nextButtonEnableTime": {
+          "description": "A timer (in ms) after which the next button will be enabled.",
+          "type": "number"
+        },
         "nextButtonLocation": {
           "$ref": "#/definitions/ResponseBlockLocation",
           "description": "The location of the next button."
@@ -1103,6 +1135,14 @@
           "description": "The meta data for the component. This is used to identify and provide additional information for the component in the admin panel.",
           "type": "object"
         },
+        "nextButtonDisableTime": {
+          "description": "A timeout (in ms) after which the next button will be disabled.",
+          "type": "number"
+        },
+        "nextButtonEnableTime": {
+          "description": "A timer (in ms) after which the next button will be enabled.",
+          "type": "number"
+        },
         "nextButtonLocation": {
           "$ref": "#/definitions/ResponseBlockLocation",
           "description": "The location of the next button."
@@ -1272,6 +1312,14 @@
           "description": "The meta data for the component. This is used to identify and provide additional information for the component in the admin panel.",
           "type": "object"
         },
+        "nextButtonDisableTime": {
+          "description": "A timeout (in ms) after which the next button will be disabled.",
+          "type": "number"
+        },
+        "nextButtonEnableTime": {
+          "description": "A timer (in ms) after which the next button will be enabled.",
+          "type": "number"
+        },
         "nextButtonLocation": {
           "$ref": "#/definitions/ResponseBlockLocation",
           "description": "The location of the next button."
@@ -1581,6 +1629,14 @@
           "description": "The meta data for the component. This is used to identify and provide additional information for the component in the admin panel.",
           "type": "object"
         },
+        "nextButtonDisableTime": {
+          "description": "A timeout (in ms) after which the next button will be disabled.",
+          "type": "number"
+        },
+        "nextButtonEnableTime": {
+          "description": "A timer (in ms) after which the next button will be enabled.",
+          "type": "number"
+        },
         "nextButtonLocation": {
           "$ref": "#/definitions/ResponseBlockLocation",
           "description": "The location of the next button."