Test branch

src/components/TrainingFailed.tsx

@@ -0,0 +1,9 @@
+import { Text } from '@mantine/core';
+
+export function TrainingFailed() {
+  return (
+    <Text>
+      Thank you for participating. Unfortunately you have didn&apos;t answer the training correctly, which means you are not eligible to participate in the study. You may close this window now.
+    </Text>
+  );
+}

src/components/response/ResponseBlock.tsx

@@ -1,7 +1,10 @@
 /* eslint-disable no-nested-ternary */
-import { Alert, Button, Group } from '@mantine/core';
+import {
+  Alert, Anchor, Button, Group,
+} from '@mantine/core';
 
 import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   IndividualComponent,
   ResponseBlockLocation,
@@ -31,11 +34,13 @@ export default function ResponseBlock({
   style,
 }: Props) {
   const storeDispatch = useStoreDispatch();
-  const { updateResponseBlockValidation } = useStoreActions();
+  const { updateResponseBlockValidation, toggleShowHelpText } = useStoreActions();
   const currentStep = useCurrentStep();
   const currentComponent = useCurrentComponent();
   const storedAnswer = status?.answer;
 
+  const navigate = useNavigate();
+
   const configInUse = config as IndividualComponent;
 
   const responses = useMemo(() => configInUse?.response?.filter((r) => (r.location ? r.location === location : location === 'belowStimulus')) || [], [configInUse?.response, location]);
@@ -120,9 +125,16 @@ export default function ResponseBlock({
         } else {
           let message = '';
           if (newAttemptsUsed >= trainingAttempts) {
-            message = `You've failed to answer this question correctly after ${trainingAttempts} attempts. ${allowFailedTraining ? 'You can continue to the next question.' : 'Unfortunately you have not met the criteria for continuing this study.'}`;
+            message = `You've didn't answer this question correctly after ${trainingAttempts} attempts. ${allowFailedTraining ? 'You can continue to the next question.' : 'Unfortunately you have not met the criteria for continuing this study.'}`;
+
+            // If the user has failed the training, wait 5 seconds and redirect to a fail page
+            if (!allowFailedTraining) {
+              setTimeout(() => {
+                navigate('./__trainingFailed');
+              }, 5000);
+            }
           } else if (trainingAttempts - newAttemptsUsed === 1) {
-            message = 'Please try again. You have 1 attempt left. Please read the help text carefully.';
+            message = 'Please try again. You have 1 attempt left.';
           } else {
             message = `Please try again. You have ${trainingAttempts - newAttemptsUsed} attempts left.`;
           }
@@ -158,6 +170,16 @@ export default function ResponseBlock({
                 {alertConfig[response.id].visible && (
                   <Alert mb="md" title={alertConfig[response.id].title} color={alertConfig[response.id].color}>
                     {alertConfig[response.id].message}
+                      {' '}
+                      {alertConfig[response.id].message.includes('Please try again') && (
+                      <>
+                        Please
+                        {' '}
+                        <Anchor style={{ fontSize: 14 }} onClick={() => storeDispatch(toggleShowHelpText())}>click here</Anchor>
+                        {' '}
+                        and read the help text carefully.
+                      </>
+                      )}
                     <br />
                     <br />
                     {attemptsUsed >= trainingAttempts && configCorrectAnswer && ` The correct answer was: ${configCorrectAnswer}.`}

src/controllers/ComponentController.tsx

@@ -15,6 +15,7 @@ import { useDisableBrowserBack } from '../utils/useDisableBrowserBack';
 import { useStorageEngine } from '../storage/storageEngineHooks';
 import { useStoreActions, useStoreDispatch } from '../store/store';
 import { StudyEnd } from '../components/StudyEnd';
+import { TrainingFailed } from '../components/TrainingFailed';
 import ResourceNotFound from '../ResourceNotFound';
 
 // current active stimuli presented to the user
@@ -50,6 +51,11 @@ export default function ComponentController() {
     return <StudyEnd />;
   }
 
+  // Handle failed training
+  if (currentComponent === '__trainingFailed') {
+    return <TrainingFailed />;
+  }
+
   if (currentComponent === 'Notfound') {
     return <ResourceNotFound email={studyConfig.uiConfig.contactEmail} />;
   }