\r\n onClick!()}\r\n >\r\n {url instanceof Array ? (\r\n url.map((video) => {\r\n return (\r\n
\r\n );\r\n }\r\n}\r\n","import { connect } from \"react-redux\";\r\nimport { Hazard } from \"./hazard\";\r\nimport { playVideo, exitHPTest } from \"../../actions/hazard\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faPlay, faPowerOff } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nfunction Overlay({ testNo, ended, videoStatus, numVideos, currentVideo, tamper, playVideo, exitHPTest }: Hazard) {\r\n const tamperTitle : { [key: string]: string } = {\r\n 'Rapid clicking': 'Rapid clicking detected',\r\n 'Too many clicks': 'You clicked too may times',\r\n 'Click pattern': 'A pattern was detected with your clicks'\r\n };\r\n\r\n const tamperTestInfo = tamper[testNo] ? tamper[testNo] : [];\r\n\r\n return ended === true || videoStatus.playing ? (\r\n <>\r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n {videoStatus.played > 0.004 ? 'Continue' : currentVideo !== 1 ? 'Start Next Clip' : 'Start Test'}
\r\n \r\n );\r\n}\r\n\r\nconst mapStateToProps = (state: any): Hazard => {\r\n return {\r\n ...state,\r\n testNo: state.hazard.testNo,\r\n ended: state.hazard.ended,\r\n videoStatus: state.hazard.videoStatus,\r\n numVideos: state.hazard.numVideos,\r\n currentVideo: state.hazard.currentVideo,\r\n tamper: state.hazard.tamper\r\n };\r\n}\r\n\r\nconst mapDispatchToProps = { playVideo, exitHPTest }\r\n\r\nexport default connect{tamperTestInfo[currentVideo - 2] && videoStatus.played < 0.001 ? tamperTitle[tamperTestInfo[currentVideo - 2]] : `Clip ${currentVideo} of ${numVideos[testNo]}`}
\r\n {videoStatus.played > 0.004 ?\r\n <>\r\nBuffering...
\r\n \r\n : currentVideo !== 1 ? \r\n <>\r\n {tamperTestInfo[currentVideo - 2] && videoStatus.played < 0.001\r\n ?You will score zero for this clip
\r\n :You've completed {currentVideo - 1} out of {numVideos[testNo]} clips
\r\n }\r\n \r\n : (\r\n <>\r\nThis test contains {numVideos[testNo]} clips. {numVideos[testNo] - 1} clips contain 1 developing hazard and 1 clip contains two where you will score points for both developing hazards.
\r\nClick or tap anywhere on the video when you see a developing hazard. This is something that will cause you to take action such as changing speed or direction.
\r\nA red flag will appear at the bottom of the screen to show your response has been registered. You can score up to 5 points for each developing hazard so the earlier you recognise and respond to them the better.
\r\nYou won’t lose points for responding to things may not develop into a hazard. But don’t click too often, or in a pattern, otherwise you may see a warning message and you won’t score any points for that clip.
\r\n \r\n )}\r\n \r\n {currentVideo !== 1 ?\r\n setPlayed(e)}\r\n onDuration={setDuration}\r\n onError={setError}\r\n onClick={handleClick}\r\n />\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state: any): Hazard => {\r\n return {\r\n ...state,\r\n testNo: state.hazard.testNo,\r\n videos: state.hazard.videos,\r\n videoClicks: state.hazard.videoClicks,\r\n currentVideo: state.hazard.currentVideo,\r\n videoStatus: state.hazard.videoStatus\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n playVideo,\r\n pauseVideo,\r\n setDuration,\r\n setPlayed,\r\n addVideoClick,\r\n setBuffering,\r\n setError,\r\n setVideoReady,\r\n setVideoEnded\r\n};\r\n\r\nexport default connect\r\n {videoInfo.prehazard ? : ''}\r\n \r\n \r\n \r\n \r\n \r\n {videoInfo.nohazards > 1 ? \r\n \r\n {videoInfo.prehazard2 ? : null}\r\n \r\n \r\n \r\n \r\n \r\n \r\n : ''\r\n }\r\n
\r\n )\r\n}\r\n\r\nexport default ScoreWindow\r\n","import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faFlag } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\ninterface FlagProps {\r\n videoClicks: number[];\r\n duration: number;\r\n ended: boolean | void;\r\n}\r\n\r\nexport default function Flags({ videoClicks, duration, ended }: FlagProps) {\r\n return (\r\n \r\n {videoClicks\r\n ? videoClicks.map((flag: number) => {\r\n return (\r\n
\r\n );\r\n}\r\n","import { useEffect } from 'react';\r\nimport { Videos } from './hazard'\r\nimport _ from 'lodash'\r\n\r\ninterface ReviewProps{\r\n videos: Videos[],\r\n scores: number[],\r\n tamper: string[],\r\n clicks: number[][],\r\n passMark: number,\r\n goToVideo: Function,\r\n testNo: number;\r\n}\r\n\r\nfunction Review({videos, scores, tamper, clicks, passMark, goToVideo, testNo}: ReviewProps) {\r\n const availableScores = [0, 1, 2, 3, 4, 5];\r\n const totalScore = scores.length ? scores.reduce((a, b) => a + b) : 0\r\n const averageScore = scores.length ? (totalScore / (videos.length + 1)).toFixed(1) : 0;\r\n const backgroundColor = (score: number) => {\r\n if(score === 5){return 'five'}\r\n else if(score === 4){return 'four'}\r\n else if(score === 3){return 'three'}\r\n else if(score === 2){return 'two'}\r\n else if(score === 1){return 'one'}\r\n else{return 'bg-white'}\r\n }\r\n\r\n useEffect(() => {\r\n\r\n }, []);\r\n\r\n return (\r\n \r\n {totalScore >= passMark ? \r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default Review\r\n","import { connect } from \"react-redux\";\r\nimport { Hazard } from \"./hazard\";\r\nimport { setSeekChange, setSeekStart, setSeekEnd } from \"../../actions/hazard\";\r\n\r\nfunction VideoProgress({\r\n videoStatus,\r\n setSeekStart,\r\n setSeekChange,\r\n setSeekEnd,\r\n}: Hazard) {\r\n return (\r\n Congratulations you've passed!
:Sorry, you have failed this time!
}\r\nYou have scored {totalScore ? totalScore : '0'} points out of a possible {(videos.length + 1) * 5}, the pass mark is {passMark}
\r\nTo replay and review any of the following clips in more detail please select the appropriate item in the menu list below:
\r\n| \r\n | Description | \r\nScore | \r\nStatus | \r\n
|---|---|---|---|
| {index + 1} | \r\n{video.title}{video.nohazards > 1 ? ` & ${video.title2}` : ''} | \r\n{scores[index] >= 1 ? scores[index] : '0'}{video.nohazards > 1 ? ` + ${scores[videos.length + 1] ? scores[videos.length + 1] : '0'}` : ''} | \r\n{tamper[index] ? tamper[index] : ''} | \r\n
\r\n
\r\n \r\n
\r\n Analysis of all clips by score
\r\n\r\n
\r\n {averageScore} per clip
\r\n {availableScores.map((score, index) => {\r\n return \r\n {score === 0\r\n ? (_.compact(scores).filter(x => x === score).length + ((videos.length + 1) - _.compact(scores).length))\r\n : scores.filter(x => x === score).length}\r\n
\r\n })}\r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state: any): Hazard => {\r\n return {\r\n ...state,\r\n videos: state.hazard.videos,\r\n videoStatus: state.hazard.videoStatus,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n playPauseVideo,\r\n setPlaybackRate,\r\n setPauseOnScore,\r\n}\r\n\r\nexport default connect\r\n \r\n \r\n
\r\n Score Window
\r\n {videoStatus.scoreWindow}
\r\n
\r\n \r\n setPlaybackRate(0.25)}\r\n className={`${videoStatus.playbackRate === 0.25 ? 'bg-blue-700' : 'bg-red-500 hover:bg-red-700'} text-white ${playbackButtonStyles}`}\r\n >\r\n 0.25x\r\n \r\n setPlaybackRate(0.5)}\r\n className={`${videoStatus.playbackRate === 0.5 ? 'bg-blue-700' : 'bg-red-500 hover:bg-red-700'} text-white ${playbackButtonStyles}`}\r\n >\r\n 0.5x\r\n \r\n setPlaybackRate(1)}\r\n className={`${videoStatus.playbackRate === 1 ? 'bg-blue-700' : 'bg-red-500 hover:bg-red-700'} text-white ${playbackButtonStyles}`}\r\n >\r\n 1x\r\n \r\n setPlaybackRate(1.5)}\r\n className={`${videoStatus.playbackRate === 1.5 ? 'bg-blue-700' : 'bg-red-500 hover:bg-red-700'} text-white ${playbackButtonStyles}`}\r\n >\r\n 1.5x\r\n \r\n setPlaybackRate(2)}\r\n className={`${videoStatus.playbackRate === 2 ? 'bg-blue-700' : 'bg-red-500 hover:bg-red-700'} text-white ${playbackButtonStyles}`}\r\n >\r\n 2x\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n","import { useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { FullScreen, useFullScreenHandle } from \"react-full-screen\";\r\nimport { AxiosResponse } from \"axios\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faAngleRight, faAngleLeft, faTimes } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { useBeforeunload } from 'react-beforeunload';\r\n\r\nimport \"./HazardPerception.css\";\r\nimport myLDC from \"../../api/myldc\";\r\nimport FullscreenButton from \"../FullscreenButton\";\r\nimport { Hazard } from \"./hazard\";\r\nimport VideoPlayer from \"./VideoPlayer\";\r\nimport ScoreWindow from \"./ScoreWindow\";\r\nimport Flags from \"./Flags\";\r\nimport Review from \"./Review\";\r\nimport VideoProgress from \"./VideoProgress\";\r\nimport VideoReviewControls from \"./VideoReviewControls\";\r\nimport {\r\n setVideos,\r\n nextVideo,\r\n prevVideo,\r\n goToVideo,\r\n addVideoClick,\r\n exitHPTest,\r\n resetHPTest\r\n} from \"../../actions/hazard\";\r\nimport Spinner from \"../Spinner\";\r\n\r\nfunction HazardPerception(props: Hazard) {\r\n const {\r\n testNo,\r\n review,\r\n videos,\r\n passMark,\r\n numVideos,\r\n currentVideo,\r\n scores,\r\n ended,\r\n videoStatus,\r\n videoClicks,\r\n tamper,\r\n setVideos,\r\n prevVideo,\r\n nextVideo,\r\n exitHPTest,\r\n goToVideo,\r\n resetHPTest\r\n } = props;\r\n const handle = useFullScreenHandle();\r\n\r\n const SaveProgress = () => {\r\n // localStorage.setItem('HelloWorld', 'mydata');\r\n }\r\n\r\n useEffect(() => {\r\n return () => {\r\n SaveProgress();\r\n }\r\n }, [])\r\n\r\n useBeforeunload((event: MouseEvent) => {\r\n SaveProgress();\r\n });\r\n\r\n if (typeof(numVideos[testNo]) === 'undefined' || numVideos[testNo] <= 0) {\r\n myLDC.get(`hazard/${testNo}`).then((response: AxiosResponse\r\n
\r\n \r\n ) : (\r\n \r\n
\r\n \r\n {currentVideo}/{numVideos[testNo]}\r\n
\r\n \r\n {\" \"}\r\n {ended ? (\r\n <>\r\n You scored{\" \"}\r\n {scores[testNo][currentVideo - 1]\r\n ? scores[testNo][currentVideo - 1]\r\n : 0}{\" \"}\r\n {videos[testNo][currentVideo - 1].nohazards > 1\r\n ? `for the first hazard and ${\r\n scores[testNo][videos.length + 1]\r\n ? scores[testNo][videos[testNo].length + 1]\r\n : 0\r\n } for the second hazard`\r\n : \"for this hazard\"}\r\n \r\n ) : null}\r\n
\r\n \r\n {ended ? (\r\n \r\n
\r\n {ended ? (\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n ) : null}\r\n \r\n
\r\n {videos[testNo][currentVideo - 1].title}\r\n
\r\n {videos[testNo][currentVideo - 1].description}{\" \"}\r\n {videos[testNo][currentVideo - 1].description2}\r\n \r\n {tamper[testNo][currentVideo - 1] ? (\r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n {tamper[testNo][currentVideo - 1]} Detected\r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n
\r\n )}\r\n \r\n );\r\n}\r\n\r\ninterface PassedProps {\r\n testNo: number\r\n}\r\n\r\nconst mapStateToProps = (state: any, ownProps?: any): Hazard => {\r\n return {\r\n ...state,\r\n testNo: ownProps.testNo,\r\n videos: state.hazard.videos,\r\n videoClicks: state.hazard.videoClicks,\r\n currentVideo: state.hazard.currentVideo,\r\n videoStatus: state.hazard.videoStatus,\r\n numVideos: state.hazard.numVideos,\r\n passMark: state.hazard.passMark,\r\n scores: state.hazard.scores,\r\n tamper: state.hazard.tamper,\r\n review: state.hazard.review,\r\n ended: state.hazard.ended,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setVideos,\r\n nextVideo,\r\n prevVideo,\r\n goToVideo,\r\n addVideoClick,\r\n exitHPTest,\r\n resetHPTest\r\n};\r\n\r\nexport default connect\r\n
\r\n | \r\n | Mark | \r\nStatus | \r\nReview | \r\n
| There are currently no tests available | \r\n
Remaining
:{\" \"}\r\n {secondsToHms(counter)}\r\n \r\n );\r\n};\r\n\r\nexport default Countdown;\r\n","import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faVolumeUp } from \"@fortawesome/free-solid-svg-icons\";\r\nimport Speech from \"react-speech\";\r\n\r\nconst styles = {\r\n container: {\r\n display: \"block\",\r\n float: \"right\",\r\n zIndex: 100000\r\n },\r\n text: {\r\n width: \"100%\",\r\n display: \"\"\r\n },\r\n play: {\r\n hover: {\r\n color: \"#666\"\r\n },\r\n button: {\r\n width: \"34\",\r\n height: \"34\",\r\n cursor: \"pointer\",\r\n pointerEvents: \"none\",\r\n float: \"right\"\r\n }\r\n },\r\n stop: {\r\n hover: {\r\n backgroundColor: \"GhostWhite\"\r\n },\r\n button: {\r\n width: \"34\",\r\n height: \"34\",\r\n cursor: \"pointer\",\r\n pointerEvents: \"none\",\r\n outline: \"none\",\r\n backgroundColor: \"Gainsboro\",\r\n border: \"solid 1px rgba(255,255,255,1)\",\r\n borderRadius: 6\r\n }\r\n },\r\n pause: {\r\n hover: {\r\n backgroundColor: \"GhostWhite\"\r\n },\r\n button: {\r\n width: \"34\",\r\n height: \"34\",\r\n cursor: \"pointer\",\r\n pointerEvents: \"none\",\r\n outline: \"none\",\r\n backgroundColor: \"Gainsboro\",\r\n border: \"solid 1px rgba(255,255,255,1)\",\r\n borderRadius: 6\r\n }\r\n },\r\n resume: {\r\n hover: {\r\n backgroundColor: \"GhostWhite\"\r\n },\r\n button: {\r\n width: \"34\",\r\n height: \"34\",\r\n cursor: \"pointer\",\r\n pointerEvents: \"none\",\r\n outline: \"none\",\r\n backgroundColor: \"Gainsboro\",\r\n border: \"solid 1px rgba(255,255,255,1)\",\r\n borderRadius: 6\r\n }\r\n }\r\n};\r\n\r\nexport default function TextToSpeech(props: { text: any; voiceOver: boolean }) {\r\n if (props.voiceOver !== true) {\r\n return <>;\r\n }\r\n const icon = \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state: any): TheoryProps => {\r\n return {\r\n ...state,\r\n testNo: state.question.testNo,\r\n correct: state.question.correct,\r\n incorrect: state.question.incorrect,\r\n numQuestions: state.question.numQuestions,\r\n flagged: state.question.flagged,\r\n dvsa: state.question.dvsa\r\n };\r\n};\r\n\r\nexport default connect{props.numQuestions[props.testNo]}
Number of tTest questions:
{props.correct[props.testNo].length + props.incorrect[props.testNo].length}
Number of cCompleted questions:
{props.numQuestions[props.testNo] - (props.correct[props.testNo].length + props.incorrect[props.testNo].length)}
Number of iIncomplete questions:
{props.flagged[props.testNo].length}
Number of fFlagged questions:
\r\n\t\t\t{props.percentage}%
\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default ProgressBar;","import { useState, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { AxiosResponse } from \"axios\";\r\nimport ProgressBar from \"./Progress\";\r\nimport { TheoryProps } from \"../../types/theory\";\r\nimport myLDC from \"../../api/myldc\";\r\n\r\ninterface SectionResults {\r\n section: number,\r\n name: string,\r\n free: number,\r\n num_questions: number\r\n}\r\n\r\nfunction TestResults(props: TheoryProps) {\r\n const { testNo, numQuestions, passMark, correct, incorrect, flagged, dvsa, complete } = props;\r\n const [sections, setSections] = useState\r\n \r\n \r\n
\r\n ) : null}\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state: any): TheoryProps => {\r\n return {\r\n ...state,\r\n testNo: state.question.testNo,\r\n numQuestions: state.question.numQuestions,\r\n correct: state.question.correct,\r\n incorrect: state.question.incorrect,\r\n flagged: state.question.flagged,\r\n passMark: state.question.passMark,\r\n dvsa: state.question.dvsa,\r\n complete: state.question.complete\r\n };\r\n};\r\n\r\nexport default connectTheory Test {testNo} Report
\r\n {correct[testNo].length >= passMark\r\n ?Congratulations, you've passed
\r\n :Sorry, but you've failed the test this time
\r\n }\r\n\r\n You answered {correct[testNo].length} out of{\" \"}\r\n {numQuestions[testNo]} questions correctly, the pass rate is{\" \"}\r\n {passMark} out of {numQuestions[testNo]}\r\n
\r\n\r\n Date:{\" \" + complete[testNo].date}\r\n
\r\n\r\n Questions: {numQuestions[testNo]}\r\n
\r\n\r\n Status:{\" \"}\r\n
\r\n Time Taken:{\" \" + complete[testNo].taken}\r\n
\r\n\r\n
\r\n Correct:
\r\n {correct[testNo].length} / {numQuestions[testNo]}
\r\n \r\n
\r\n Incorrect:
\r\n {incorrect[testNo].length} / {numQuestions[testNo]}
\r\n \r\n
\r\n Flagged:
\r\n {flagged[testNo].length} / {numQuestions[testNo]}
\r\n \r\n
\r\n \r\n
\r\n {sections.length >= 1 ? (\r\n Incomplete:
\r\n {numQuestions[testNo] - (correct[testNo].length + incorrect[testNo].length)} / {numQuestions[testNo]}
\r\n \r\n
\r\n | DVSA Category | \r\nCorrect | \r\nIncorrect | \r\nTotal | \r\n% Correct | \r\n
| {section.section}. {section.name} | \r\n{dvsa[testNo][section.section] ? dvsa[testNo][section.section]['correct'].length : 0} | \r\n{dvsa[testNo][section.section] ? dvsa[testNo][section.section]['numQuestions'] - dvsa[testNo][section.section]['correct'].length : 0} | \r\n{dvsa[testNo][section.section] ? dvsa[testNo][section.section]['numQuestions'] : 0} | \r\n{dvsa[testNo][section.section] ? Math.floor((dvsa[testNo][section.section]['correct'].length / dvsa[testNo][section.section]['numQuestions']) * 100) : null}% | \r\n
\r\n Reviewing {review} questions only\r\n
\r\n );\r\n }\r\n return <>;\r\n}\r\n","import _ from 'lodash'\r\nimport TextToSpeech from './TextToSpeech'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faCheckCircle } from '@fortawesome/free-solid-svg-icons'\r\n\r\ninterface OptionTypes {\r\n options: any,\r\n correct: string,\r\n amount: number,\r\n selected: string | null,\r\n voiceOver: boolean,\r\n review?: (boolean | string),\r\n ended?: boolean,\r\n learning?: boolean,\r\n fullScreenAvailable?: boolean,\r\n addAnswer: (a: string, b: string, c: number | null) => void,\r\n removeAnswer: (a: string, b: number | null) => void,\r\n}\r\n\r\nexport default function QuestionOptions({options, correct, amount, selected, voiceOver, addAnswer, removeAnswer, review, ended, learning, fullScreenAvailable}: OptionTypes) {\r\n return (\r\n \r\n {_.times(amount, (i) => (\r\n \r\n review !== true\r\n ? selected === \r\n String.fromCharCode(97 + i).toUpperCase() ? removeAnswer(String.fromCharCode(97 + i).toUpperCase(), options.dsacat) : addAnswer(\r\n String.fromCharCode(97 + i).toUpperCase(),\r\n correct,\r\n options.dsacat\r\n )\r\n : \"\"\r\n }\r\n >\r\n {options.format !== 1 ? <>\r\n 
\r\n \r\n }\r\n
\r\n ))}\r\n \r\n )\r\n}","import { IconDefinition } from '@fortawesome/fontawesome-common-types'\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n\r\ninterface ButtonTypes {\r\n text: string,\r\n fn: any | void,\r\n icon?: IconDefinition,\r\n iconClass?: string,\r\n className?: string,\r\n disabled?: boolean\r\n}\r\n\r\nexport default function Button({text, fn, icon, iconClass, className, disabled}: ButtonTypes) {\r\n return (\r\n {review === true && String.fromCharCode(97 + i).toUpperCase() === correct ?
\r\n \r\n \r\n \r\n }\r\n {text}
\r\n \r\n \r\n )\r\n}\r\n","import { connect } from \"react-redux\";\r\n\r\nimport Button from \"./Button\";\r\nimport { TheoryFunctionProps, TheoryProps } from \"../../types/theory\";\r\nimport { faAngleLeft, faAngleRight, faFlag, faQuestion } from \"@fortawesome/free-solid-svg-icons\";\r\nimport {\r\n nextQuestion,\r\n prevQuestion,\r\n flagQuestion,\r\n reviewAll,\r\n reviewFlagged,\r\n reviewIncomplete,\r\n reviewSummary,\r\n reviewAnswers,\r\n endTest\r\n} from \"../../actions\";\r\n\r\nfunction TestButtons(props: TheoryProps & TheoryFunctionProps & {className?: string, remaining?: number, fullScreenAvailable?: boolean}) {\r\n const { className, remaining, fullScreenAvailable, testNo, numQuestions, currentQuestion, correct, incorrect, incomplete, overview, review, ended, flagged, prevQuestion, nextQuestion, flagQuestion, reviewSummary, reviewAll, reviewAnswers, reviewFlagged, reviewIncomplete, endTest } = props;\r\n if (overview !== false) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n {typeof review === 'boolean'\r\n || (review === 'flagged' && (flagged[testNo].length > 1 || currentQuestion !== flagged[testNo][0]))\r\n || (review === 'incomplete' && (incomplete[testNo].length > 1 || currentQuestion !== incomplete[testNo][0])) ? \r\n \r\n : \r\n }\r\n {ended !== true ? \r\n \r\n : \r\n }\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state: any, myProps: {className?: string}): TheoryProps & TheoryFunctionProps => {\r\n return {\r\n ...state,\r\n testNo: state.question.testNo,\r\n currentQuestion: state.question.currentQuestion,\r\n overview: state.question.overview,\r\n ended: state.question.ended,\r\n numQuestions: state.question.numQuestions,\r\n correct: state.question.correct,\r\n incorrect: state.question.incorrect,\r\n incomplete: state.question.incomplete,\r\n flagged: state.question.flagged,\r\n review: state.question.review,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n nextQuestion,\r\n prevQuestion,\r\n flagQuestion,\r\n reviewAll,\r\n reviewFlagged,\r\n reviewIncomplete,\r\n reviewSummary,\r\n reviewAnswers,\r\n endTest,\r\n}\r\n\r\nexport default connect\r\n Mark {numbers[props.mark]} answer\r\n {props.mark > 1\r\n ? \"s\"\r\n : \"\"}\r\n
\r\n )\r\n}\r\n","import { connect } from \"react-redux\";\r\nimport _ from 'lodash'\r\nimport { TheoryFunctionProps, TheoryProps } from '../../types/theory';\r\nimport { goToQuestion } from \"../../actions\";\r\n\r\nfunction TestQuestionReviewButtons(props: TheoryProps & TheoryFunctionProps) {\r\n if (props.review !== true) {\r\n return null;\r\n }\r\n let keys = _.keys(props.questions[props.testNo]);\r\n return (\r\n \r\n {keys.map((question) => (\r\n \r\n props.goToQuestion(parseInt(question) + 1)\r\n }\r\n className={`my-1 cursor-pointer font-bold border-4 ${\r\n parseInt(question) ===\r\n (props.currentQuestion - 1)\r\n ? \"border-black\"\r\n : \"border-transparent\"\r\n } ${\r\n props.ended === true\r\n ? _.includes(\r\n props.correct[props.testNo],\r\n parseInt(question) + 1\r\n )\r\n ? \"bg-green-correct\"\r\n : _.includes(\r\n props.incorrect[props.testNo],\r\n parseInt(question) + 1\r\n )\r\n ? \"bg-red-incorrect\"\r\n : \"bg-gray-100\"\r\n : \"\"\r\n } shadow text-center font-medium inline-block w-11 mr-1.5 sm:w-12 sm:mr-3.5 lg:w-10 xl:w-12 lg:mr-2.5 xl:mr-3`}\r\n >\r\n {parseInt(question) + 1}\r\n
\r\n ))}\r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = (state: any): TheoryProps & TheoryFunctionProps => {\r\n return {\r\n ...state,\r\n testNo: state.question.testNo,\r\n questions: state.question.questions,\r\n currentQuestion: state.question.currentQuestion,\r\n review: state.question.review,\r\n ended: state.question.ended,\r\n correct: state.question.correct,\r\n incorrect: state.question.incorrect\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = { goToQuestion }\r\n\r\nexport default connect{props.questionInfo.case!.situation}
;\r\n }\r\n\r\n return (\r\n <>\r\n // \r\n
\r\n \r\n
\r\n {overview !== false ? (overview === \"summary\" ? Theory Test {testNo}
\r\n {overview !== 'results' ? Q
: null}\r\n uestion
{currentQuestion} of {numQuestions[testNo]}{ended !== true ?
\r\n \r\n
}\r\n \r\n
\r\n \r\n ) : \r\n
\r\n ) : \r\n \r\n
\r\n \r\n
\r\n \r\n toggleVoiceover()}\r\n className=\"cursor-pointer float-right\"\r\n size=\"lg\"\r\n />\r\n
\r\n \r\n {!props.skipCorrect || props.correct.length < (props.numQuestions[props.currentSection] - 1) ?
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state: any, myProps: {className?: string}): LPProps => {\r\n return {\r\n ...state,\r\n numQuestions: state.learning.numQuestions,\r\n currentSection: state.learning.currentSection,\r\n correct: state.learning.correct,\r\n skipCorrect: state.learning.skipCorrect,\r\n study: state.learning.study\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = { nextQuestion, prevQuestion, setStudy, setSkipCorrect }\r\n\r\nexport default connect\r\n
\r\n {props.explanation}\r\n
\r\n )\r\n }\r\n return null;\r\n}\r\n","import React, { useState } from \"react\";\r\nimport { AxiosResponse } from \"axios\";\r\nimport { connect } from \"react-redux\";\r\nimport { FullScreen, useFullScreenHandle } from \"react-full-screen\";\r\nimport { useBeforeunload } from \"react-beforeunload\";\r\nimport { faVolumeMute, faVolumeUp } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { setSection, addLPAnswer, removeLPAnswer } from \"../../actions/learning\";\r\nimport { toggleVoiceover } from \"../../actions\";\r\nimport myLDC from \"../../api/myldc\";\r\nimport QuestionImage from \"../TheoryTest/QuestionImage\";\r\nimport QuestionCase from \"../TheoryTest/QuestionCase\";\r\nimport QuestionOptions from \"../TheoryTest/QuestionOptions\";\r\nimport TextToSpeech from \"../TheoryTest/TextToSpeech\";\r\nimport MarkNumAnswers from \"../TheoryTest/MarkNumAnswers\";\r\nimport LearningButtons from \"./LearningButtons\";\r\nimport { LPProps, SectionType } from \"../../types/learning\";\r\nimport Study from \"./Study\";\r\nimport Spinner from \"../Spinner\";\r\nimport FullscreenButton from \"../FullscreenButton\";\r\n\r\nfunction LearningProgram(props: LPProps) {\r\n const {section, numQuestions, questions, answers, currentQuestion, currentSection, study, voiceOver, setSection, addLPAnswer, removeLPAnswer, toggleVoiceover} = props;\r\n const handle = useFullScreenHandle();\r\n const [sections] = useState\r\n {props.explanation}\r\n
\r\n
\r\n \r\n );\r\n}\r\n\r\ninterface PassedProps {\r\n section: number;\r\n}\r\n\r\nconst mapStateToProps = (state: any, ownProps: any) => {\r\n return {\r\n ...state,\r\n section: ownProps.section,\r\n currentQuestion: state.learning.currentQuestion,\r\n currentSection: state.learning.currentSection,\r\n study: state.learning.study,\r\n numQuestions: state.learning.numQuestions,\r\n voiceOver: state.learning.voiceOver,\r\n questions: state.learning.questions,\r\n answers: state.learning.answers,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setSection,\r\n addLPAnswer,\r\n removeLPAnswer,\r\n toggleVoiceover,\r\n};\r\n\r\nexport default connect\r\n
\r\n {currentSection}. {sections[currentSection - 1].name}
\r\n \r\n Q
\r\n uestion
\r\n {currentQuestion}/{numQuestions[currentSection]}\r\n \r\n {questions[currentSection][currentQuestion - 1].format < 2 ? (\r\n
\r\n \r\n
\r\n ) : \r\n
\r\n ) : \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n toggleVoiceover()}\r\n className=\"cursor-pointer float-right\"\r\n size=\"lg\"\r\n />\r\n
\r\n | Section | \r\nQuestions | \r\nCorrect | \r\nIncorrect | \r\nIncomplete | \r\n
|---|
\r\n \r\n {children}\r\n \r\n
\r\n )\r\n}\r\n","import Card from \"../Card\"\r\nimport TextToSpeech from '../TheoryTest/TextToSpeech'\r\n\r\nconst Rule = (props: {children: string, image: string | null, imagefooter: string | null}) => {\r\n return (\r\n 
: null}\r\n {props.imagefooter ? {props.imagefooter}
: null}\r\n{navButtons}
\r\n {rules.map((rule: HCRules) => {\r\n return {navButtons}
\r\n \r\n }\r\n return (\r\n | {section.title} | \r\n
There are currently no pupils
\r\n : pupils.map((pupil: any) => (\r\n Hi I'm {data.firstname}
I'm a {data.gender === 'F' ? 'female ' : null}driving instructor {data.trainee === 1 ? 'licenced' : 'approved'} by the DVSA offering driving lessons in {data.headerareas}
Sorry, no instructors found{search.length > 1 ? ` for postcode ${search}` : ''}
\r\n : instructors.map((instructor: InstructorDetails) => \r\n
\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n