TestPage: add KeyboardNavigationNote.tsx
This commit is contained in:
parent
93a968e1da
commit
c81aec0405
|
|
@ -0,0 +1,42 @@
|
|||
import React from 'react';
|
||||
import { useLocalStorage } from 'react-use';
|
||||
import { Box, IconButton, NoSsr } from '@material-ui/core';
|
||||
import { Alert, AlertTitle } from '@material-ui/lab';
|
||||
import { Close as CloseIcon } from '@material-ui/icons';
|
||||
|
||||
const LOCAL_STORAGE_KEY = 'showKeyboardNavigationNote';
|
||||
|
||||
const KeyboardNavigationNote = () => {
|
||||
const [show, setShow] = useLocalStorage(LOCAL_STORAGE_KEY, true);
|
||||
|
||||
if (!show || typeof window === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<NoSsr>
|
||||
<Box mb={2}>
|
||||
<Alert
|
||||
severity="info"
|
||||
action={
|
||||
<IconButton onClick={() => setShow(false)}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<AlertTitle>Nawigacja</AlertTitle>
|
||||
Czy wiesz, że{' '}
|
||||
<strong>
|
||||
możesz poruszać się pomiędzy pytaniami i wybierać odpowiedzi{' '}
|
||||
</strong>
|
||||
za pomocą klawiatury? <br />- <strong>klawisze A / B / C / D</strong>{' '}
|
||||
- wybór odpowiedzi <br />- <strong>lewa strzałka</strong> - powrót do
|
||||
poprzedniego pytania <br />- <strong>prawa strzałka</strong> -
|
||||
przejście do następnego pytania <br />
|
||||
</Alert>
|
||||
</Box>
|
||||
</NoSsr>
|
||||
);
|
||||
};
|
||||
|
||||
export default KeyboardNavigationNote;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useEffect, useMemo, useRef, useState, Fragment } from 'react';
|
||||
import { useUpdateEffect } from 'react-use';
|
||||
import clsx from 'clsx';
|
||||
import { usePrompt } from 'libs/hooks';
|
||||
|
|
@ -30,6 +30,7 @@ import Question from './Question';
|
|||
import Navigation from './Navigation';
|
||||
import Summary from './Summary';
|
||||
import FixedSpinner from './FixedSpinner';
|
||||
import KeyboardNavigationNote from './KeyboardNavigationNote';
|
||||
|
||||
export interface TestProps {
|
||||
initialQuestions: QuestionT[];
|
||||
|
|
@ -173,71 +174,76 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
|
|||
Do tej kwalifikacji nie zostały dodane żadne pytania.
|
||||
</Typography>
|
||||
) : (
|
||||
<Paper>
|
||||
<AppBar color="default" position="static">
|
||||
<Tabs
|
||||
value={currentTab}
|
||||
textColor="primary"
|
||||
indicatorColor="primary"
|
||||
variant="scrollable"
|
||||
onChange={(_, newTab: number) => setCurrentTab(newTab)}
|
||||
>
|
||||
{questions.map((question, index) => {
|
||||
return (
|
||||
<Tab
|
||||
key={question.id}
|
||||
className={clsx(
|
||||
reviewMode
|
||||
? {
|
||||
[classes.correct]:
|
||||
question.correctAnswer ===
|
||||
selectedAnswers[index],
|
||||
[classes.incorrect]:
|
||||
question.correctAnswer !==
|
||||
selectedAnswers[index],
|
||||
}
|
||||
: {}
|
||||
)}
|
||||
label={`Pytanie ${index + 1}`}
|
||||
<Fragment>
|
||||
<KeyboardNavigationNote />
|
||||
<Paper>
|
||||
<AppBar color="default" position="static">
|
||||
<Tabs
|
||||
value={currentTab}
|
||||
textColor="primary"
|
||||
indicatorColor="primary"
|
||||
variant="scrollable"
|
||||
onChange={(_, newTab: number) => setCurrentTab(newTab)}
|
||||
>
|
||||
{questions.map((question, index) => {
|
||||
return (
|
||||
<Tab
|
||||
key={question.id}
|
||||
className={clsx(
|
||||
reviewMode
|
||||
? {
|
||||
[classes.correct]:
|
||||
question.correctAnswer ===
|
||||
selectedAnswers[index],
|
||||
[classes.incorrect]:
|
||||
question.correctAnswer !==
|
||||
selectedAnswers[index],
|
||||
}
|
||||
: {}
|
||||
)}
|
||||
label={`Pytanie ${index + 1}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<Tab label="Podsumowanie" disabled={!reviewMode} />
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
<Box padding={3}>
|
||||
{questions.map((question, index) => (
|
||||
<TabPanel key={question.id} value={currentTab} index={index}>
|
||||
<Question
|
||||
question={question}
|
||||
answer={selectedAnswers[index]}
|
||||
onSelectAnswer={answer =>
|
||||
handleSelectAnswer(index, answer)
|
||||
}
|
||||
reviewMode={reviewMode}
|
||||
current={currentTab === index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<Tab label="Podsumowanie" disabled={!reviewMode} />
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
<Box padding={3}>
|
||||
{questions.map((question, index) => (
|
||||
<TabPanel key={question.id} value={currentTab} index={index}>
|
||||
<Question
|
||||
question={question}
|
||||
answer={selectedAnswers[index]}
|
||||
onSelectAnswer={answer => handleSelectAnswer(index, answer)}
|
||||
</TabPanel>
|
||||
))}
|
||||
<TabPanel value={currentTab} index={questions.length}>
|
||||
<Summary
|
||||
answers={selectedAnswers}
|
||||
questions={questions}
|
||||
reviewMode={reviewMode}
|
||||
current={currentTab === index}
|
||||
startedAt={startedAt}
|
||||
endedAt={endedAt}
|
||||
/>
|
||||
</TabPanel>
|
||||
))}
|
||||
<TabPanel value={currentTab} index={questions.length}>
|
||||
<Summary
|
||||
answers={selectedAnswers}
|
||||
questions={questions}
|
||||
<Navigation
|
||||
hasPreviousTab={currentTab !== 0}
|
||||
hasNextTab={currentTab !== maxTabIndex}
|
||||
onRequestPrevTab={handleGoToPrevTab}
|
||||
onRequestNextTab={handleGoToNextTab}
|
||||
isLastQuestion={currentTab === maxTabIndex}
|
||||
reviewMode={reviewMode}
|
||||
startedAt={startedAt}
|
||||
endedAt={endedAt}
|
||||
onReset={handleReset}
|
||||
onFinish={handleFinish}
|
||||
/>
|
||||
</TabPanel>
|
||||
<Navigation
|
||||
hasPreviousTab={currentTab !== 0}
|
||||
hasNextTab={currentTab !== maxTabIndex}
|
||||
onRequestPrevTab={handleGoToPrevTab}
|
||||
onRequestNextTab={handleGoToNextTab}
|
||||
isLastQuestion={currentTab === maxTabIndex}
|
||||
reviewMode={reviewMode}
|
||||
onReset={handleReset}
|
||||
onFinish={handleFinish}
|
||||
/>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Fragment>
|
||||
)}
|
||||
</Container>
|
||||
</Section>
|
||||
|
|
|
|||
Reference in New Issue