diff --git a/src/features/QualificationPage/features/TestPage/components/Test/Navigation.tsx b/src/features/QualificationPage/features/TestPage/components/Test/Navigation.tsx
index bca7e86..33f43f1 100644
--- a/src/features/QualificationPage/features/TestPage/components/Test/Navigation.tsx
+++ b/src/features/QualificationPage/features/TestPage/components/Test/Navigation.tsx
@@ -1,3 +1,5 @@
+import { useKeyPressEvent } from 'react-use';
+
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Button, ButtonGroup, useMediaQuery } from '@material-ui/core';
import {
@@ -31,6 +33,9 @@ const Navigation = ({
const classes = useStyles();
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('sm'));
+ useKeyPressEvent('ArrowRight', onRequestNextTab);
+ useKeyPressEvent('ArrowLeft', onRequestPrevTab);
+
return (
diff --git a/src/features/QualificationPage/features/TestPage/components/Test/Test.tsx b/src/features/QualificationPage/features/TestPage/components/Test/Test.tsx
index b1bfc0e..2abc077 100644
--- a/src/features/QualificationPage/features/TestPage/components/Test/Test.tsx
+++ b/src/features/QualificationPage/features/TestPage/components/Test/Test.tsx
@@ -50,6 +50,7 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
const [startedAt, setStartedAt] = useState(new Date());
const [endedAt, setEndedAt] = useState(new Date());
const classes = useStyles();
+ const maxTabIndex = questions.length + (reviewMode ? 1 : 0) - 1;
usePrompt(!reviewMode);
const analyticsParams = useMemo(
() => ({
@@ -136,6 +137,20 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
setReviewMode(true);
};
+ const handleGoToNextTab = () => {
+ if (currentTab === maxTabIndex) {
+ return;
+ }
+ setCurrentTab(current => current + 1);
+ };
+
+ const handleGoToPrevTab = () => {
+ if (currentTab === 0) {
+ return;
+ }
+ setCurrentTab(current => current - 1);
+ };
+
return (
{isFetching && }
@@ -204,14 +219,10 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
setCurrentTab(currentTab - 1)}
- onRequestNextTab={() => setCurrentTab(currentTab + 1)}
- isLastQuestion={
- currentTab + 1 === questions.length + (reviewMode ? 1 : 0)
- }
+ hasNextTab={currentTab !== maxTabIndex}
+ onRequestPrevTab={handleGoToPrevTab}
+ onRequestNextTab={handleGoToNextTab}
+ isLastQuestion={currentTab === maxTabIndex}
reviewMode={reviewMode}
onReset={handleReset}
onFinish={handleFinish}