\r\n {scores.Section1QuestionsAnswered}\r\n
\r\n \r\n {scores.Section1PercentCorrect}\r\n
\r\n \r\n {scores.Section1ElapsedTime}\r\n
\r\n \r\n {scores.Section1PointsScored}\r\n
\r\n \r\n {scores.Section1PointsPossible}\r\n
\r\n \r\n TIMER: {secondsLeft} sec \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 Type1;\r\n","import React, { useState } from 'react';\r\nimport s2_2a from '../../../assets/S2_2a.png';\r\nimport { TextField, makeStyles } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n maxWidth: '800px',\r\n margin: '0 auto',\r\n textAlign: 'left'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n textArea: {\r\n margin: '1rem auto',\r\n minWidth: '800px'\r\n }\r\n});\r\n\r\nconst Question1 = ({\r\n localAnswers,\r\n setLocalAnswers,\r\n secondsLeft,\r\n setInFocus\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = useState('');\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n 
\r\n
\r\n\r\n \r\n \r\n );\r\n};\r\n\r\nexport default Question1;\r\n","export default \"data:image/png;base64,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\"","import React, { useState } from 'react';\r\nimport s2_2b from '../../../assets/S2_2b.png';\r\nimport { TextField, makeStyles } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n maxWidth: '800px',\r\n margin: '0 auto',\r\n textAlign: 'left'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n textArea: {\r\n margin: '1rem auto',\r\n minWidth: '800px'\r\n }\r\n});\r\n\r\nconst Question2 = ({\r\n localAnswers,\r\n setLocalAnswers,\r\n secondsLeft,\r\n setInFocus\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = useState('');\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n 
\r\n
\r\n\r\n \r\n \r\n );\r\n};\r\n\r\nexport default Question2;\r\n","export default \"data:image/png;base64,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\"","import React, { useState, useEffect } from 'react';\r\nimport countDownTimer from '../helpers/countDownTimer';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport Question1 from './type2/Question1';\r\nimport Question2 from './type2/Question2';\r\nimport { makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n }\r\n});\r\n\r\nconst Type2 = ({\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n applicantInfo,\r\n wpmCounter,\r\n setWpmCounter\r\n}) => {\r\n const classes = useStyles();\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section2_2_Timer\r\n );\r\n const initTime = enabledQuestions.Section2_2_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n const [inFocus, setInFocus] = useState(false);\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n const question = '1.1';\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers({\r\n question1: '',\r\n question2: ''\r\n });\r\n\r\n setStringifyFn(() => (localAnswers) => {\r\n let tempArr = [];\r\n for (let item in localAnswers) {\r\n if (localAnswers[item]) tempArr.push(localAnswers[item]);\r\n }\r\n let str = tempArr.join('|');\r\n str = `|${str}|`;\r\n\r\n return str;\r\n });\r\n\r\n setSectionQuestion(question);\r\n\r\n axios({\r\n method: 'put',\r\n url: `${baseURL}updateTestProgress`,\r\n data: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: question\r\n }\r\n });\r\n\r\n setWpmCounter(0);\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n useEffect(() => {\r\n if (inFocus) setWpmCounter(wpmCounter + 1);\r\n }, [secondsLeft]);\r\n\r\n return (\r\n <>\r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n {scores.Section2QuestionsAnswered}\r\n
\r\n \r\n {scores.Section2PercentCorrect !== null\r\n ? scores.Section2PercentCorrect\r\n : 'not yet calculated'}\r\n
\r\n \r\n {scores.Section2ElapsedTime}\r\n
\r\n \r\n {scores.Section2PointsScored}\r\n
\r\n \r\n {scores.Section2PointsPossible}\r\n
\r\n \r\n TIMER: {secondsLeft} sec \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 TimeZone1;\r\n","import React, { useState, useEffect } from 'react';\r\nimport countDownTimer from '../helpers/countDownTimer';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport {\r\n FormControl,\r\n FormControlLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center'\r\n },\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n subContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n margin: '1rem 2rem'\r\n },\r\n qContainer: {\r\n margin: '0 auto',\r\n maxWidth: '850px',\r\n textAlign: 'left'\r\n }\r\n});\r\n\r\nconst MilitaryConversion2 = ({\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n applicantInfo\r\n}) => {\r\n const classes = useStyles();\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section3_2_Timer\r\n );\r\n const initTime = enabledQuestions.Section3_2_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n const question = '2.1';\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers('');\r\n\r\n setStringifyFn(() => (localAnswers) => `|${localAnswers}|`);\r\n\r\n setSectionQuestion(question);\r\n\r\n axios({\r\n method: 'put',\r\n url: `${baseURL}updateTestProgress`,\r\n data: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: question\r\n }\r\n });\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n const handleChange = (event) => {\r\n setLocalAnswers(event.target.value);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n \r\n You're handling an emergency call, and a fireman noted that he arrived\r\n on the scene at 18:00. What time is that?\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 MilitaryConversion2;\r\n","import React, { useState } from 'react';\r\nimport {\r\n FormControl,\r\n FormControlLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center'\r\n },\r\n subContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n margin: '1rem 2rem'\r\n }\r\n});\r\n\r\nconst Column1 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = useState('');\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\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 TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n TIMER: {secondsLeft} sec \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 AMvsPM4;\r\n","import React, { useState } from 'react';\r\nimport {\r\n FormControl,\r\n FormControlLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n margin: '.05rem 1rem'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n }\r\n});\r\n\r\nconst Question1 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = useState('');\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\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 TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n TIMER: {secondsLeft} sec \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 CATimeZone6;\r\n","import React, { useState } from 'react';\r\nimport {\r\n FormControl,\r\n FormControlLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center'\r\n },\r\n subContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n margin: '1rem 2rem'\r\n }\r\n});\r\n\r\nconst Column1 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = useState('');\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\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 TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n {scores.Section3QuestionsAnswered}\r\n
\r\n \r\n {scores.Section3PercentCorrect}\r\n
\r\n \r\n {scores.Section3ElapsedTime}\r\n
\r\n \r\n {scores.Section3PointsScored}\r\n
\r\n \r\n {scores.Section3PointsPossible}\r\n
\r\n \r\n
\r\n \r\n drop_handler(event, startContain1)}\r\n onDragOver={(event) => dragover_handler(event)}\r\n style={style.indivPuzlPieceHolder}\r\n >\r\n dragstart_handler(event, 'a2_772')}\r\n draggable\r\n >\r\n
\r\n \r\n \r\n
\r\n 772
\r\n \r\n \r\n
\r\n \r\n \r\n E22
\r\n \r\n \r\n
\r\n \r\n \r\n 727
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n E27
\r\n \r\n dragstart_handler(event)}\r\n >\r\n
\r\n 3317
\r\n \r\n \r\n dragstart_handler(event)}\r\n >\r\n
\r\n 331E
\r\n \r\n 3317
\r\n \r\n \r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n
\r\n \r\n drop_handler(event, startContain1)}\r\n onDragOver={(event) => dragover_handler(event)}\r\n style={style.indivPuzlPieceHolder}\r\n >\r\n dragstart_handler(event, 'a2_327')}\r\n draggable\r\n >\r\n
\r\n \r\n
\r\n 327
\r\n \r\n
\r\n \r\n \r\n 938
\r\n \r\n
\r\n \r\n \r\n 281
\r\n \r\n
\r\n \r\n \r\n \r\n {/* BOTTOM AREA */}\r\n 812
\r\n \r\n dragstart_handler(event)}\r\n >\r\n
\r\n 837
\r\n \r\n dragstart_handler(event)}\r\n >\r\n
\r\n \r\n \r\n\r\n {/* 2nd row */}\r\n 982
\r\n \r\n dragstart_handler(event)}\r\n >\r\n
\r\n 426
\r\n \r\n dragstart_handler(event)}\r\n >\r\n
\r\n \r\n \r\n {/* last row */}\r\n 891
\r\n 762
\r\n \r\n 021
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default DraggableComponent;\r\n","import React, { useState, useEffect } from 'react';\r\nimport DraggableComponent2 from '../layout/DraggableComponent2';\r\nimport countDownTimer from '../helpers/countDownTimer';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport { makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n spans: {\r\n color: '#611515'\r\n }\r\n});\r\n\r\nconst DragToMiddle2 = ({\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n applicantInfo\r\n}) => {\r\n const classes = useStyles();\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section4_2_Timer\r\n );\r\n const initTime = enabledQuestions.Section4_2_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n const question = '3.1';\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers({\r\n q1_426: '',\r\n q2_837: '',\r\n q3_762: ''\r\n });\r\n\r\n setStringifyFn(() => (localAnswers) => {\r\n let tempArr = [];\r\n for (let item in localAnswers) {\r\n if (localAnswers[item]) tempArr.push(item);\r\n }\r\n let str = tempArr.join('|');\r\n str = `|${str}|`;\r\n\r\n return str;\r\n });\r\n\r\n setSectionQuestion(question);\r\n\r\n axios({\r\n method: 'put',\r\n url: `${baseURL}updateTestProgress`,\r\n data: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: question\r\n }\r\n });\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n return (\r\n <>\r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n \r\n Do not submit until after the questions are displayed. This screen will\r\n switch in 10 seconds.\r\n \r\n \r\n A paragraph describing an emergency situation will then be displayed on\r\n the next screen for 20 seconds. Please read it carefully, wait, and then\r\n follow the instructions.\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Instructions;\r\n","import React from 'react';\r\nimport { makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n margin: '0 auto 1rem',\r\n maxWidth: '850px',\r\n textAlign: 'left'\r\n },\r\n m1: {\r\n margin: '1rem 0'\r\n }\r\n});\r\n\r\nconst Paragraph = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n The paragraph below will be shown for 20 seconds. Please read it\r\n carefully, wait, and then follow the instructions. Do not submit until\r\n after the questions are displayed.\r\n \r\n\r\n \r\n \r\n \r\n \"At 8:30 AM, strong winds blew down the power lines. Officer Jones\r\n is on the scene but we need someone here as soon as possible to\r\n start the emergency generator. Please have an on-call\r\n representative call us at 862-541-6621 immediately.\"\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Paragraph;\r\n","import React, { useState, useEffect } from 'react';\r\nimport countDownTimer from '../../helpers/countDownTimer';\r\nimport {\r\n Checkbox,\r\n FormControlLabel,\r\n FormGroup,\r\n makeStyles,\r\n Typography\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center'\r\n },\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n spans: {\r\n textDecoration: 'underline',\r\n textTransform: 'uppercase',\r\n color: '#611515'\r\n },\r\n subContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n margin: '1rem'\r\n }\r\n});\r\n\r\nconst Question = ({\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section4_3_Timer\r\n );\r\n const initTime = enabledQuestions.Section4_3_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers({\r\n 'it started at 9:30 AM': false,\r\n \"it's about a fallen tree\": false,\r\n 'call 862-541-6621': false,\r\n 'Officer Smith is there': false,\r\n 'it started at 8:30 AM': false,\r\n 'it involves power lines': false,\r\n 'need to start regulator': false,\r\n 'call 862-554-4526': false,\r\n 'a callback is optional': false\r\n });\r\n\r\n setStringifyFn(() => (localAnswers) => {\r\n let tempArr = [];\r\n for (let item in localAnswers) {\r\n if (localAnswers[item]) tempArr.push(item);\r\n }\r\n let str = tempArr.join('|');\r\n str = `|${str}|`;\r\n\r\n return str;\r\n });\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n const handleChange = (event) => {\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.checked\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n \r\n There are 24 apples in the bag, and it weighs 13.2 pounds. Please\r\n bring it to the exposition by 4:00 PM. We would also like some grapes\r\n but it may be too late.\r\n \r\n
\r\n\r\n \r\n \r\n );\r\n};\r\n\r\nexport default FindMissingInfo4;\r\n","import React, { useState } from 'react';\r\nimport { Button, makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: '2rem'\r\n },\r\n ms2: { margin: '0 2rem' }\r\n});\r\n\r\nconst Question1 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [index, setIndex] = useState(1);\r\n\r\n const optionsArray = [\r\n '531 Main Street',\r\n '825 Main Street',\r\n '8125 Main Street',\r\n '1825 Main Street',\r\n '1825 Main Avenue'\r\n ];\r\n const [value, setValue] = useState(optionsArray[0]);\r\n\r\n const handleChange = (value) => {\r\n setLocalAnswers({ ...localAnswers, question1: value });\r\n };\r\n\r\n const displayNewValue = (event) => {\r\n setValue(optionsArray[index]);\r\n handleChange(optionsArray[index]);\r\n\r\n if (index === optionsArray.length - 1) {\r\n setIndex(0);\r\n } else {\r\n setIndex(index + 1);\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n Change\r\n \r\n \r\n {value}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Question1;\r\n","import React, { useState } from 'react';\r\nimport { Button, makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: '2rem'\r\n },\r\n ms2: { margin: '0 2rem' }\r\n});\r\n\r\nconst Question2 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [index, setIndex] = useState(1);\r\n\r\n const optionsArray = [\r\n 'Washington City, Missouri',\r\n 'George Washington, DC',\r\n 'Jefferson, DC',\r\n 'Washington, CD',\r\n 'Washington, DC',\r\n 'Washington City, MO'\r\n ];\r\n const [value, setValue] = useState(optionsArray[0]);\r\n\r\n const handleChange = (value) => {\r\n setLocalAnswers({ ...localAnswers, question2: value });\r\n };\r\n\r\n const displayNewValue = (event) => {\r\n setValue(optionsArray[index]);\r\n handleChange(optionsArray[index]);\r\n\r\n if (index === optionsArray.length - 1) {\r\n setIndex(0);\r\n } else {\r\n setIndex(index + 1);\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n {value}\r\n \r\n \r\n Change\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Question2;\r\n","import React, { useState } from 'react';\r\nimport { Button, makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: '2rem'\r\n },\r\n ms2: { margin: '0 2rem' }\r\n});\r\n\r\nconst Question3 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [index, setIndex] = useState(1);\r\n\r\n const optionsArray = ['12001', '02001', '20001', '10002', '20010'];\r\n\r\n const [value, setValue] = useState(optionsArray[0]);\r\n\r\n const handleChange = (value) => {\r\n setLocalAnswers({ ...localAnswers, question3: value });\r\n };\r\n\r\n const displayNewValue = (event) => {\r\n setValue(optionsArray[index]);\r\n handleChange(optionsArray[index]);\r\n\r\n if (index === optionsArray.length - 1) {\r\n setIndex(0);\r\n } else {\r\n setIndex(index + 1);\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n Change\r\n \r\n \r\n {value}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Question3;\r\n","import React, { useState, useEffect } from 'react';\r\nimport countDownTimer from '../helpers/countDownTimer';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport Question1 from './matchAddress5/Question1';\r\nimport Question2 from './matchAddress5/Question2';\r\nimport Question3 from './matchAddress5/Question3';\r\nimport { makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n mb1: {\r\n marginBottom: '1rem'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n }\r\n});\r\n\r\nconst MatchAddress5 = ({\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n applicantInfo\r\n}) => {\r\n const classes = useStyles();\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section4_5_Timer\r\n );\r\n const initTime = enabledQuestions.Section4_5_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n const question = '3.4';\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers({\r\n question1: '',\r\n question2: '',\r\n question3: ''\r\n });\r\n\r\n setStringifyFn(() => (localAnswers) => {\r\n let tempArr = [];\r\n for (let item in localAnswers) {\r\n if (localAnswers[item]) tempArr.push(localAnswers[item]);\r\n }\r\n let str = tempArr.join('|');\r\n str = `|${str}|`;\r\n\r\n return str;\r\n });\r\n\r\n setSectionQuestion(question);\r\n\r\n axios({\r\n method: 'put',\r\n url: `${baseURL}updateTestProgress`,\r\n data: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: question\r\n }\r\n });\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n return (\r\n <>\r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MatchAddress5;\r\n","import React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport Spinner from '../layout/Spinner';\r\nimport { Grid, makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n margin: '1rem auto',\r\n maxWidth: '500px'\r\n },\r\n displayDivs: {\r\n border: '2px solid #611515',\r\n borderRadius: '4px',\r\n padding: '4px',\r\n textAlign: 'center'\r\n },\r\n heading: {\r\n textTransform: 'uppercase'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n spans: {\r\n color: '#611515',\r\n textTransform: 'uppercase'\r\n },\r\n textLeft: { textAlign: 'left' }\r\n});\r\n\r\nconst Summary4 = ({ enabledQuestions, setSectionQuestion, applicantInfo }) => {\r\n const classes = useStyles();\r\n\r\n const [scores, setScores] = useState('');\r\n\r\n useEffect(() => {\r\n setSectionQuestion('Summary');\r\n\r\n axios\r\n .put(`${baseURL}updateFinalAnswers`, {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail\r\n })\r\n .then(() => {\r\n return axios({\r\n method: 'get',\r\n url: `${baseURL}getSummaries`,\r\n params: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail\r\n }\r\n });\r\n })\r\n .then((response) => {\r\n if (response.data) setScores(response.data[0]);\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n }, []);\r\n\r\n if (scores.length !== 0) {\r\n return (\r\n <>\r\n \r\n {scores.Section4QuestionsAnswered}\r\n
\r\n \r\n {scores.Section4PercentCorrect}\r\n
\r\n \r\n {scores.Section4ElapsedTime}\r\n
\r\n \r\n {scores.Section4PointsScored}\r\n
\r\n \r\n {scores.Section4PointsPossible}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Question1;\r\n","import React, { useState } from 'react';\r\nimport {\r\n FormControl,\r\n FormControlLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n margin: '1rem 1rem'\r\n },\r\n ms1: {\r\n margin: '0 1rem'\r\n }\r\n});\r\n\r\nconst Question2 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = useState('');\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n The caller's name was Neil Armstrong.\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\nexport default Question2;\r\n","import React, { useState } from 'react';\r\nimport {\r\n FormControl,\r\n FormControlLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n margin: '1rem 1rem'\r\n },\r\n ms1: {\r\n margin: '0 1rem'\r\n }\r\n});\r\n\r\nconst Question3 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = useState('');\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n The call was about a business matter.\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\nexport default Question3;\r\n","import React, { useState, useEffect } from 'react';\r\nimport countDownTimer from '../../helpers/countDownTimer';\r\nimport { makeStyles, Typography } from '@material-ui/core';\r\nimport Question1 from './Question1';\r\nimport Question2 from './Question2';\r\nimport Question3 from './Question3';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n }\r\n});\r\n\r\nconst Questions = ({\r\n localAnswers,\r\n setLocalAnswers,\r\n enabledQuestions,\r\n handleFetchError,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section5_1_Timer\r\n );\r\n const initTime = enabledQuestions.Section5_1_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers({\r\n question1: '',\r\n question2: '',\r\n question3: ''\r\n });\r\n\r\n setStringifyFn(() => (localAnswers) => {\r\n let tempArr = [];\r\n for (let item in localAnswers) {\r\n if (localAnswers[item]) tempArr.push(localAnswers[item]);\r\n }\r\n let str = tempArr.join('|');\r\n str = `|${str}|`;\r\n\r\n return str;\r\n });\r\n\r\n setSectionQuestion('4.0');\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n The caller was calling about a luncheon.\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n \r\n Press play and listen to a sample telephone call. When completed, a list\r\n of true/false questions will be presented.{' '}\r\n \r\n \r\n It can only be started once, and if stopped, it cannot be restarted\r\n so please listen carefully.\r\n \r\n \r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nexport default AudioTrueOrFalse1;\r\n","export default __webpack_public_path__ + \"static/media/S5_Q2.0c72482a.mp3\";","import React, { useState } from 'react';\r\nimport {\r\n FormControl,\r\n FormControlLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n margin: '1rem'\r\n },\r\n ms1: {\r\n margin: '0 1rem'\r\n }\r\n});\r\n\r\nconst Question1 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = useState('');\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n\r\n {stopClicked ? (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Question1;\r\n","import React, { useState } from 'react';\r\nimport {\r\n FormControl,\r\n FormControlLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n margin: '1rem'\r\n },\r\n ms1: {\r\n margin: '0 1rem'\r\n }\r\n});\r\n\r\nconst Question2 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = useState('');\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n The caller thought it might be a radio system issue.\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\nexport default Question2;\r\n","import React, { useState } from 'react';\r\nimport {\r\n FormControl,\r\n FormControlLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n margin: '1rem'\r\n },\r\n ms1: {\r\n margin: '0 1rem'\r\n },\r\n text: {\r\n maxWidth: '600px'\r\n }\r\n});\r\n\r\nconst Question3 = ({ localAnswers, setLocalAnswers, secondsLeft }) => {\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = useState('');\r\n const handleChange = (event) => {\r\n setValue(event.target.value);\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n The call was trying to reach Tom.\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\nexport default Question3;\r\n","import React, { useState, useEffect } from 'react';\r\nimport countDownTimer from '../../helpers/countDownTimer';\r\nimport { makeStyles, Typography } from '@material-ui/core';\r\nimport Question1 from './Question1';\r\nimport Question2 from './Question2';\r\nimport Question3 from './Question3';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n }\r\n});\r\n\r\nconst Questions = ({\r\n localAnswers,\r\n setLocalAnswers,\r\n enabledQuestions,\r\n handleFetchError,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section5_2_Timer\r\n );\r\n const initTime = enabledQuestions.Section5_2_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers({\r\n question1: '',\r\n question2: '',\r\n question3: ''\r\n });\r\n\r\n setStringifyFn(() => (localAnswers) => {\r\n let tempArr = [];\r\n for (let item in localAnswers) {\r\n if (localAnswers[item]) tempArr.push(localAnswers[item]);\r\n }\r\n let str = tempArr.join('|');\r\n str = `|${str}|`;\r\n\r\n return str;\r\n });\r\n\r\n setSectionQuestion('4.1');\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n The call completed with an attempt to connect the caller to the person\r\n the caller requested.\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n \r\n Press play and listen to a sample telephone call. When completed, a list\r\n of true/false questions will be presented.{' '}\r\n \r\n \r\n It can only be started once, and if stopped, it cannot be restarted\r\n so please listen carefully.\r\n \r\n \r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nexport default AudioTrueOrFalse2;\r\n","export default __webpack_public_path__ + \"static/media/S5_Q3.75f75441.mp3\";","import React, { useState, useEffect } from 'react';\r\nimport S5_Q3 from '../../assets/S5_Q3.mp3';\r\nimport countDownTimer from '../helpers/countDownTimer';\r\nimport SoundComponent from '../layout/SoundComponent';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport { makeStyles, TextField, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n formContainer: {\r\n margin: '1rem auto',\r\n maxWidth: '600px'\r\n },\r\n inputs: {\r\n marginLeft: '1rem',\r\n width: '50%'\r\n },\r\n rowContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n maxWidth: '600px',\r\n margin: '0 auto'\r\n },\r\n subContainer: {\r\n margin: '1rem auto',\r\n textAlign: 'center'\r\n },\r\n span: {\r\n color: '#611515'\r\n }\r\n});\r\n\r\nconst CompleteWhilePlaying3 = ({\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n setbtnDisabled,\r\n applicantInfo\r\n}) => {\r\n const classes = useStyles();\r\n const [stopClicked, setStopClicked] = useState(false);\r\n\r\n useEffect(() => {\r\n setbtnDisabled(true);\r\n }, []);\r\n\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section5_3_Timer\r\n );\r\n const initTime = enabledQuestions.Section5_3_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n const question = '4.2';\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers({\r\n callerName: '',\r\n hospitalNameAndDepartment: '',\r\n phoneNumber: '',\r\n patientName: '',\r\n patientDOB: '',\r\n doctorRequestingReturnCall: ''\r\n });\r\n\r\n setStringifyFn(() => (localAnswers) => {\r\n let tempArr = [];\r\n for (let item in localAnswers) {\r\n if (localAnswers[item]) tempArr.push(localAnswers[item]);\r\n }\r\n let str = tempArr.join('|');\r\n str = `|${str}|`;\r\n\r\n return str;\r\n });\r\n\r\n setSectionQuestion(question);\r\n\r\n axios({\r\n method: 'put',\r\n url: `${baseURL}updateTestProgress`,\r\n data: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: question\r\n }\r\n });\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n const handleChange = (event) => {\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n\r\n {stopClicked ? (\r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n {stopClicked ? (\r\n \r\n ) : (\r\n
\r\n\r\n \r\n \r\n );\r\n};\r\n\r\nexport default CompleteWhilePlaying3;\r\n","export default __webpack_public_path__ + \"static/media/S5_Q4.36df01bb.mp3\";","import React, { useState, useEffect } from 'react';\r\nimport S5_Q4 from '../../assets/S5_Q4.mp3';\r\nimport countDownTimer from '../helpers/countDownTimer';\r\nimport SoundComponent from '../layout/SoundComponent';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport { makeStyles, TextField, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n formContainer: {\r\n margin: '1rem auto',\r\n maxWidth: '600px'\r\n },\r\n inputs: {\r\n marginLeft: '1rem',\r\n width: '50%'\r\n },\r\n rowContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n maxWidth: '600px',\r\n margin: '0 auto'\r\n },\r\n subContainer: {\r\n margin: '1rem auto',\r\n textAlign: 'center'\r\n },\r\n span: {\r\n color: '#611515'\r\n }\r\n});\r\n\r\nconst CompleteWhilePlaying4 = ({\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n setbtnDisabled,\r\n applicantInfo\r\n}) => {\r\n const classes = useStyles();\r\n const [stopClicked, setStopClicked] = useState(false);\r\n\r\n useEffect(() => {\r\n setbtnDisabled(true);\r\n }, []);\r\n\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section5_4_Timer\r\n );\r\n const initTime = enabledQuestions.Section5_4_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n const question = '4.3';\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers({\r\n whoWantsAReturnCall: '',\r\n reasonForCall: '',\r\n phoneNumber1: '',\r\n phoneNumber2: ''\r\n });\r\n\r\n setStringifyFn(() => (localAnswers) => {\r\n let tempArr = [];\r\n for (let item in localAnswers) {\r\n if (localAnswers[item]) tempArr.push(localAnswers[item]);\r\n }\r\n let str = tempArr.join('|');\r\n str = `|${str}|`;\r\n\r\n return str;\r\n });\r\n\r\n setSectionQuestion(question);\r\n\r\n axios({\r\n method: 'put',\r\n url: `${baseURL}updateTestProgress`,\r\n data: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: question\r\n }\r\n });\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n const handleChange = (event) => {\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n {stopClicked ? (\r\n \r\n ) : (\r\n
\r\n\r\n \r\n \r\n );\r\n};\r\n\r\nexport default CompleteWhilePlaying4;\r\n","export default __webpack_public_path__ + \"static/media/S5_Q5.1684b4cc.mp3\";","import React, { useState, useEffect } from 'react';\r\nimport countDownTimer from '../../helpers/countDownTimer';\r\nimport { makeStyles, TextField, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n maxWidth: '800px'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n textArea: {\r\n margin: '2rem auto',\r\n minWidth: '800px'\r\n }\r\n});\r\n\r\nconst Question = ({\r\n localAnswers,\r\n setLocalAnswers,\r\n enabledQuestions,\r\n handleFetchError,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section5_5_Timer\r\n );\r\n const initTime = enabledQuestions.Section5_5_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers('');\r\n\r\n setStringifyFn(() => (localAnswers) => `|${localAnswers}|`);\r\n\r\n if (enabledQuestions.TestID === '002') {\r\n setSectionQuestion('4.5');\r\n } else if (enabledQuestions.TestID === '001') {\r\n setSectionQuestion('4.4');\r\n }\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n const handleChange = (event) => {\r\n setLocalAnswers(event.target.value);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Question;\r\n","import React, { useState, useEffect } from 'react';\r\nimport S5_Q5 from '../../assets/S5_Q5.mp3';\r\nimport Question from './describeCall5/Question';\r\nimport SoundComponent from '../layout/SoundComponent';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport { makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n margin: '0 auto',\r\n maxWidth: '850px',\r\n textAlign: 'left'\r\n },\r\n subContainer: {\r\n margin: '1rem auto',\r\n textAlign: 'center'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n span: {\r\n color: '#611515'\r\n }\r\n});\r\n\r\nconst DescribeCall5 = ({\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n setbtnDisabled,\r\n applicantInfo\r\n}) => {\r\n const classes = useStyles();\r\n const [stopClicked, setStopClicked] = useState(false);\r\n\r\n useEffect(() => {\r\n setbtnDisabled(true);\r\n\r\n let question;\r\n if (enabledQuestions.TestID === '002') {\r\n question = '4.5';\r\n } else if (enabledQuestions.TestID === '001') {\r\n question = '4.4';\r\n }\r\n\r\n axios({\r\n method: 'put',\r\n url: `${baseURL}updateTestProgress`,\r\n data: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: question\r\n }\r\n });\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n During the call, the agent first offered to take a message for the\r\n office, then instructed the caller to call back during office hours.\r\n Why might the agent have handled the call in this manner? Please\r\n elaborate below (300 characters maximum).\r\n \r\n
\r\n\r\n \r\n \r\n {stopClicked ? (\r\n ''\r\n ) : (\r\n <>\r\n \r\n Press play and listen to a sample telephone call. When completed, a\r\n list of true/false questions will be presented.{' '}\r\n \r\n \r\n It can only be started once, and if stopped, it cannot be\r\n restarted so please listen carefully.\r\n \r\n \r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nexport default DescribeCall5;\r\n","export default __webpack_public_path__ + \"static/media/S5_Q6.5fe2cd38.mp3\";","import React, { useState, useEffect } from 'react';\r\nimport S5_Q6 from '../../assets/S5_Q6.mp3';\r\nimport countDownTimer from '../helpers/countDownTimer';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport SoundComponent from '../layout/SoundComponent';\r\nimport { makeStyles, TextField, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n formContainer: {\r\n margin: '1rem auto',\r\n maxWidth: '600px'\r\n },\r\n inputs: {\r\n marginLeft: '1rem',\r\n width: '50%'\r\n },\r\n rowContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n maxWidth: '600px',\r\n margin: '0 auto'\r\n },\r\n subContainer: {\r\n margin: '1rem auto',\r\n textAlign: 'center'\r\n },\r\n span: {\r\n color: '#611515'\r\n }\r\n});\r\n\r\nconst ExtraCompleteWhilePlaying6 = ({\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n setbtnDisabled,\r\n applicantInfo\r\n}) => {\r\n const classes = useStyles();\r\n const [stopClicked, setStopClicked] = useState(false);\r\n\r\n useEffect(() => {\r\n setbtnDisabled(true);\r\n }, []);\r\n\r\n const [secondsLeft, setSecondsLeft] = useState(\r\n enabledQuestions.Section5_32_Timer\r\n );\r\n const initTime = enabledQuestions.Section5_32_Timer;\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n useEffect(() => {\r\n toggle();\r\n\r\n setLocalAnswers({\r\n callerName: '',\r\n phoneNumber: '',\r\n whatTimeNextTuesday: '',\r\n whatDoesTheCallerNeed: '',\r\n isThisAMedicalEmergency: ''\r\n });\r\n\r\n setStringifyFn(() => (localAnswers) => {\r\n let tempArr = [];\r\n for (let item in localAnswers) {\r\n if (localAnswers[item]) tempArr.push(localAnswers[item]);\r\n }\r\n let str = tempArr.join('|');\r\n str = `|${str}|`;\r\n\r\n return str;\r\n });\r\n\r\n let question;\r\n if (enabledQuestions.TestID === '002') {\r\n question = '4.4';\r\n } else if (enabledQuestions.TestID === '001') {\r\n question = '';\r\n }\r\n\r\n setSectionQuestion(question);\r\n\r\n axios({\r\n method: 'put',\r\n url: `${baseURL}updateTestProgress`,\r\n data: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: question\r\n }\r\n });\r\n }, []);\r\n\r\n function reset() {\r\n setSecondsLeft(0);\r\n setIsActive(false);\r\n }\r\n\r\n useEffect(() => {\r\n return countDownTimer(\r\n isActive,\r\n secondsLeft,\r\n setSecondsLeft,\r\n handleFetchError,\r\n reset,\r\n setAnswerTime,\r\n initTime\r\n );\r\n }, [isActive, secondsLeft]);\r\n\r\n const handleChange = (event) => {\r\n setLocalAnswers({\r\n ...localAnswers,\r\n [event.target.name]: event.target.value\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n )}\r\n\r\n {stopClicked ? (\r\n \r\n TIMER: {secondsLeft} sec \r\n
\r\n\r\n \r\n {stopClicked ? (\r\n \r\n ) : (\r\n
\r\n\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ExtraCompleteWhilePlaying6;\r\n","import React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport Spinner from '../layout/Spinner';\r\nimport { Grid, makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n margin: '1rem auto',\r\n maxWidth: '500px'\r\n },\r\n displayDivs: {\r\n border: '2px solid #611515',\r\n borderRadius: '4px',\r\n padding: '4px',\r\n textAlign: 'center'\r\n },\r\n heading: {\r\n textTransform: 'uppercase'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n spans: {\r\n color: '#611515',\r\n textTransform: 'uppercase'\r\n },\r\n textLeft: { textAlign: 'left' }\r\n});\r\n\r\nconst Summary5 = ({ enabledQuestions, setSectionQuestion, applicantInfo }) => {\r\n const classes = useStyles();\r\n\r\n const [scores, setScores] = useState('');\r\n\r\n useEffect(() => {\r\n setSectionQuestion('Summary');\r\n\r\n axios({\r\n method: 'get',\r\n url: `${baseURL}getSummaries`,\r\n params: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail\r\n }\r\n })\r\n .then((response) => {\r\n if (response.data) setScores(response.data[0]);\r\n })\r\n .then(() => {\r\n return axios.put(`${baseURL}updateFinalAnswers`, {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail\r\n });\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n }, []);\r\n\r\n if (scores.length !== 0) {\r\n return (\r\n <>\r\n \r\n {scores.Section5QuestionsAnswered}\r\n
\r\n \r\n {scores.Section5PercentCorrect}\r\n
\r\n \r\n {scores.Section5ElapsedTime}\r\n
\r\n \r\n {scores.Section5PointsScored}\r\n
\r\n \r\n {scores.Section5PointsPossible}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default TestInstructions3;\r\n","import React, { useState } from 'react';\r\nimport submitClicked from '../helpers/submitClicked';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport Spinner from '../layout/Spinner';\r\nimport InvitationCode1 from './InvitationCode1';\r\nimport ApplicationInfo2 from './ApplicantInfo2';\r\nimport TestInstructions3 from './TestInstructions3';\r\nimport { Button, makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n btnContainer: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n footer: {\r\n textAlign: 'left',\r\n padding: '0 2rem',\r\n textTransform: 'uppercase'\r\n },\r\n formContainer: {\r\n backgroundColor: '#fff',\r\n margin: '8rem auto',\r\n maxWidth: '1000px',\r\n borderRadius: '4px',\r\n padding: '2rem'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n submitBtn: {\r\n backgroundColor: '#611515',\r\n border: '2px solid #611515 ',\r\n borderRadius: '4px',\r\n color: '#FFF',\r\n cursor: 'pointer',\r\n margin: '0 0.75rem 0.25rem',\r\n padding: '5px 18px',\r\n '&:hover': {\r\n backgroundColor: '#471010'\r\n }\r\n }\r\n});\r\n\r\nconst StartTest = ({\r\n currentSection,\r\n setCurrentSection,\r\n enabledQuestions,\r\n setEnabledQuestions,\r\n handleFetchError,\r\n applicantInfo,\r\n setApplicantInfo,\r\n setExistingUserInfo\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const [isWaiting, setIsWaiting] = useState(false);\r\n\r\n const [values, setValues] = useState({\r\n CallCenterID: '',\r\n PinID: '',\r\n TestID: ''\r\n });\r\n\r\n const [currentQuestion, setCurrentQuestion] = useState(0);\r\n\r\n const startTest = [\r\n - \r\n {areasSelected.map((area, index) => (\r\n
\r\n
\r\n );\r\n } else {\r\n if (currentQuestion === startTest.length - 1) {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n );\r\n }\r\n };\r\n\r\n const getFooter = (currentQuestion) => {\r\n if (currentQuestion === startTest.length - 1) {\r\n return '';\r\n }\r\n return 'Confidential and Proprietary';\r\n };\r\n\r\n const getTestInfo = () => {\r\n if (!values.CallCenterID || !values.PinID || !values.TestID) {\r\n handleFetchError(true, 'Please enter a valid invitation code.', 'error');\r\n\r\n return false;\r\n }\r\n\r\n setIsWaiting(true);\r\n\r\n axios({\r\n method: 'get',\r\n url: `${baseURL}testinfo`,\r\n params: {\r\n CallCenterID: values.CallCenterID,\r\n PinID: values.PinID,\r\n TestID: values.TestID\r\n }\r\n })\r\n .then((response) => {\r\n setIsWaiting(false);\r\n\r\n if (response.data.result.length === 0) {\r\n handleFetchError(\r\n true,\r\n 'Please enter a valid invitation code.',\r\n 'error'\r\n );\r\n setValues({ CallCenterID: '', PinID: '', TestID: '' });\r\n\r\n return startTest[0];\r\n }\r\n\r\n setEnabledQuestions(response.data.result[0]);\r\n\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n startTest\r\n );\r\n })\r\n .catch((error) => {\r\n handleFetchError(true, error.toString(), 'error');\r\n });\r\n };\r\n\r\n const createFetchApplicant = () => {\r\n if (\r\n !values.CallCenterID ||\r\n !applicantInfo.ApplicantName ||\r\n !applicantInfo.ApplicantEmail\r\n ) {\r\n handleFetchError(true, 'Please enter your name and email.', 'error');\r\n return;\r\n }\r\n\r\n setIsWaiting(true);\r\n\r\n axios({\r\n method: 'post',\r\n url: `${baseURL}applicantinfo`,\r\n data: {\r\n CallCenterID: values.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail\r\n }\r\n })\r\n .then((response) => {\r\n setIsWaiting(false);\r\n\r\n if (response.data.action === 'created') {\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n startTest\r\n );\r\n } else if (response.data.action === 'fetched') {\r\n handleFetchError(true, 'Welcome back!', 'success');\r\n\r\n setExistingUserInfo(response.data.result[0]);\r\n\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n startTest\r\n );\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n handleFetchError(true, error.toString(), 'error');\r\n });\r\n };\r\n\r\n const submitCallback = () => {\r\n if (currentQuestion === 0) {\r\n let isValid = getTestInfo();\r\n if (!isValid) return;\r\n } else if (currentQuestion === 1) {\r\n createFetchApplicant();\r\n } else {\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n startTest\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {section1[currentQuestion]}\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Section1;\r\n","import React, { useState, useEffect } from 'react';\r\nimport submitClicked from '../helpers/submitClicked';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport Spinner from '../layout/Spinner';\r\nimport section2Arr from '../helpers/componentMaps/Section2';\r\nimport { Button, makeStyles } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n formContainer: {\r\n backgroundColor: '#fff',\r\n margin: '1rem auto',\r\n maxWidth: '1000px',\r\n borderRadius: '4px',\r\n padding: '2rem'\r\n },\r\n submitBtn: {\r\n backgroundColor: '#611515',\r\n border: '2px solid #611515 ',\r\n borderRadius: '4px',\r\n color: '#FFF',\r\n cursor: 'pointer',\r\n margin: '1rem 0.75rem 0.25rem',\r\n padding: '5px 18px',\r\n '&:hover': {\r\n backgroundColor: '#471010'\r\n }\r\n }\r\n});\r\n\r\nconst Section2 = ({\r\n currentSection,\r\n setCurrentSection,\r\n enabledQuestions,\r\n handleFetchError,\r\n applicantInfo,\r\n existingUserInfo,\r\n sectionOrder\r\n}) => {\r\n const classes = useStyles();\r\n const [isWaiting, setIsWaiting] = useState(false);\r\n const [answerTime, setAnswerTime] = useState(0);\r\n const [sectionQuestion, setSectionQuestion] = useState('');\r\n const [localAnswers, setLocalAnswers] = useState('');\r\n const [stringifyFn, setStringifyFn] = useState(() => () =>\r\n 'error creating answer'\r\n );\r\n const [seconds, setSeconds] = useState(0);\r\n const [isActive, setIsActive] = useState(false);\r\n const [currentQuestion, setCurrentQuestion] = useState(0);\r\n const [wpmCounter, setWpmCounter] = useState(0);\r\n\r\n const section2 = section2Arr(\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n applicantInfo,\r\n existingUserInfo,\r\n setCurrentSection,\r\n currentSection,\r\n wpmCounter,\r\n setWpmCounter\r\n );\r\n\r\n const postAnswer = (stringifiedAnswer, localAnswers) => {\r\n return axios.post(`${baseURL}postAnswer`, {\r\n TestID: enabledQuestions.TestID,\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n Country: enabledQuestions.Country,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: sectionQuestion,\r\n AnswerTime: answerTime,\r\n Answer: stringifiedAnswer,\r\n localAnswers: localAnswers,\r\n wpmCounter: wpmCounter\r\n });\r\n };\r\n\r\n function submitCallback() {\r\n setIsWaiting(true);\r\n\r\n let stringifiedAnswer = stringifyFn(localAnswers);\r\n\r\n if (sectionQuestion !== 'Summary') {\r\n postAnswer(stringifiedAnswer, localAnswers)\r\n .then((response) => {\r\n setIsWaiting(false);\r\n\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n section2\r\n );\r\n })\r\n .catch((error) => handleFetchError(true, error.toString(), 'error'));\r\n } else {\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n section2\r\n );\r\n }\r\n }\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n useEffect(() => {\r\n if (currentQuestion === section2.length - 1) {\r\n setIsActive(false);\r\n }\r\n }, [seconds]);\r\n\r\n useEffect(() => {\r\n toggle();\r\n }, []);\r\n\r\n useEffect(() => {\r\n let interval = null;\r\n\r\n if (isActive) {\r\n interval = setInterval(() => {\r\n setSeconds((seconds) => seconds + 1);\r\n }, 1000);\r\n } else if (seconds !== 0) {\r\n clearInterval(interval);\r\n }\r\n\r\n return () => clearInterval(interval);\r\n }, [isActive, seconds]);\r\n\r\n return (\r\n <>\r\n \r\n {isWaiting ? (\r\n
\r\n \r\n {section2[currentQuestion]}\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Section2;\r\n","import React, { useState, useEffect } from 'react';\r\nimport submitClicked from '../helpers/submitClicked';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport Spinner from '../layout/Spinner';\r\nimport section3Arr from '../helpers/componentMaps/Section3';\r\nimport { Button, makeStyles } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n formContainer: {\r\n backgroundColor: '#fff',\r\n margin: '1rem auto',\r\n maxWidth: '1000px',\r\n borderRadius: '4px',\r\n padding: '2rem'\r\n },\r\n submitBtn: {\r\n backgroundColor: '#611515',\r\n border: '2px solid #611515 ',\r\n borderRadius: '4px',\r\n color: '#FFF',\r\n cursor: 'pointer',\r\n margin: '0 0.75rem 0.25rem',\r\n padding: '5px 18px',\r\n '&:hover': {\r\n backgroundColor: '#471010'\r\n }\r\n }\r\n});\r\n\r\nconst Section3 = ({\r\n currentSection,\r\n setCurrentSection,\r\n enabledQuestions,\r\n handleFetchError,\r\n applicantInfo,\r\n existingUserInfo\r\n}) => {\r\n const classes = useStyles();\r\n const [isWaiting, setIsWaiting] = useState(false);\r\n const [answerTime, setAnswerTime] = useState(0);\r\n const [sectionQuestion, setSectionQuestion] = useState('');\r\n const [localAnswers, setLocalAnswers] = useState('');\r\n const [stringifyFn, setStringifyFn] = useState(() => () =>\r\n 'error creating answer'\r\n );\r\n\r\n const [seconds, setSeconds] = useState(0);\r\n const [isActive, setIsActive] = useState(false);\r\n const [currentQuestion, setCurrentQuestion] = useState(0);\r\n\r\n const section3 = section3Arr(\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n applicantInfo,\r\n existingUserInfo,\r\n setCurrentSection,\r\n currentSection\r\n );\r\n\r\n const postAnswer = (stringifiedAnswer, localAnswers) => {\r\n return axios.post(`${baseURL}postAnswer`, {\r\n TestID: enabledQuestions.TestID,\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n Country: enabledQuestions.Country,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: sectionQuestion,\r\n AnswerTime: answerTime,\r\n Answer: stringifiedAnswer,\r\n localAnswers: localAnswers\r\n });\r\n };\r\n\r\n function submitCallback() {\r\n setIsWaiting(true);\r\n\r\n let stringifiedAnswer = stringifyFn(localAnswers);\r\n\r\n if (sectionQuestion !== 'Summary') {\r\n postAnswer(stringifiedAnswer, localAnswers)\r\n .then((response) => {\r\n setIsWaiting(false);\r\n\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n section3\r\n );\r\n })\r\n .catch((error) => handleFetchError(true, error.toString(), 'error'));\r\n } else {\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n section3\r\n );\r\n }\r\n }\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n useEffect(() => {\r\n if (currentQuestion === section3.length - 1) {\r\n setIsActive(false);\r\n }\r\n }, [seconds]);\r\n\r\n useEffect(() => {\r\n toggle();\r\n }, []);\r\n\r\n useEffect(() => {\r\n let interval = null;\r\n\r\n if (isActive) {\r\n interval = setInterval(() => {\r\n setSeconds((seconds) => seconds + 1);\r\n }, 1000);\r\n } else if (seconds !== 0) {\r\n clearInterval(interval);\r\n }\r\n\r\n return () => clearInterval(interval);\r\n }, [isActive, seconds]);\r\n\r\n return (\r\n <>\r\n \r\n {isWaiting ? (\r\n
\r\n \r\n {section3[currentQuestion]}\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Section3;\r\n","import React, { useState, useEffect } from 'react';\r\nimport submitClicked from '../helpers/submitClicked';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport Spinner from '../layout/Spinner';\r\nimport section4Arr from '../helpers/componentMaps/Section4';\r\nimport { Button, makeStyles } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n formContainer: {\r\n backgroundColor: '#fff',\r\n margin: '1rem auto',\r\n maxWidth: '1000px',\r\n borderRadius: '4px',\r\n padding: '2rem'\r\n },\r\n submitBtn: {\r\n backgroundColor: '#611515',\r\n border: '2px solid #611515 ',\r\n borderRadius: '4px',\r\n color: '#FFF',\r\n cursor: 'pointer',\r\n margin: '0 0.75rem 0.25rem',\r\n padding: '5px 18px',\r\n '&:hover': {\r\n backgroundColor: '#471010'\r\n }\r\n }\r\n});\r\n\r\nconst Section4 = ({\r\n currentSection,\r\n setCurrentSection,\r\n enabledQuestions,\r\n handleFetchError,\r\n applicantInfo,\r\n existingUserInfo\r\n}) => {\r\n const classes = useStyles();\r\n const [isWaiting, setIsWaiting] = useState(false);\r\n const [answerTime, setAnswerTime] = useState(0);\r\n const [sectionQuestion, setSectionQuestion] = useState('');\r\n const [localAnswers, setLocalAnswers] = useState('');\r\n const [stringifyFn, setStringifyFn] = useState(() => () => 'no valid answer');\r\n const [seconds, setSeconds] = useState(0);\r\n const [isActive, setIsActive] = useState(false);\r\n const [currentQuestion, setCurrentQuestion] = useState(0);\r\n\r\n const section4 = section4Arr(\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n applicantInfo,\r\n existingUserInfo,\r\n setCurrentSection,\r\n currentSection\r\n );\r\n\r\n const postAnswer = (stringifiedAnswer, localAnswers) => {\r\n return axios.post(`${baseURL}postAnswer`, {\r\n TestID: enabledQuestions.TestID,\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n Country: enabledQuestions.Country,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: sectionQuestion,\r\n AnswerTime: answerTime,\r\n Answer: stringifiedAnswer,\r\n localAnswers: localAnswers\r\n });\r\n };\r\n\r\n function submitCallback() {\r\n setIsWaiting(true);\r\n\r\n let stringifiedAnswer = stringifyFn(localAnswers);\r\n\r\n if (sectionQuestion !== 'Summary') {\r\n postAnswer(stringifiedAnswer, localAnswers)\r\n .then((response) => {\r\n setIsWaiting(false);\r\n\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n section4\r\n );\r\n })\r\n .catch((error) => handleFetchError(true, error.toString(), 'error'));\r\n } else {\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n section4\r\n );\r\n }\r\n }\r\n\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n useEffect(() => {\r\n if (currentQuestion === section4.length - 1) {\r\n setIsActive(false);\r\n }\r\n }, [seconds]);\r\n\r\n useEffect(() => {\r\n toggle();\r\n }, []);\r\n\r\n useEffect(() => {\r\n let interval = null;\r\n\r\n if (isActive) {\r\n interval = setInterval(() => {\r\n setSeconds((seconds) => seconds + 1);\r\n }, 1000);\r\n } else if (seconds !== 0) {\r\n clearInterval(interval);\r\n }\r\n\r\n return () => clearInterval(interval);\r\n }, [isActive, seconds]);\r\n\r\n return (\r\n <>\r\n \r\n {isWaiting ? (\r\n
\r\n \r\n {section4[currentQuestion]}\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Section4;\r\n","import React, { useState, useEffect } from 'react';\r\nimport submitClicked from '../helpers/submitClicked';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport Spinner from '../layout/Spinner';\r\nimport section5Arr from '../helpers/componentMaps/Section5';\r\nimport { Button, makeStyles } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n displayRight: {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n },\r\n formContainer: {\r\n backgroundColor: '#fff',\r\n margin: '1rem auto',\r\n maxWidth: '1000px',\r\n borderRadius: '4px',\r\n padding: '2rem'\r\n },\r\n submitBtn: {\r\n backgroundColor: '#611515',\r\n border: '2px solid #611515 ',\r\n borderRadius: '4px',\r\n color: '#FFF',\r\n cursor: 'pointer',\r\n margin: '0 0.75rem 0.25rem',\r\n padding: '5px 18px',\r\n '&:hover': {\r\n backgroundColor: '#471010'\r\n }\r\n },\r\n disabledBtn: {\r\n backgroundColor: '#B3B3B3',\r\n borderColor: '#B3B3B3',\r\n color: '#ECF0FE'\r\n }\r\n});\r\n\r\nconst Section5 = ({\r\n currentSection,\r\n setCurrentSection,\r\n enabledQuestions,\r\n handleFetchError,\r\n applicantInfo,\r\n existingUserInfo\r\n}) => {\r\n const classes = useStyles();\r\n const [btnDisabled, setbtnDisabled] = useState(false);\r\n const [isWaiting, setIsWaiting] = useState(false);\r\n const [answerTime, setAnswerTime] = useState(0);\r\n const [sectionQuestion, setSectionQuestion] = useState('');\r\n const [localAnswers, setLocalAnswers] = useState('');\r\n const [stringifyFn, setStringifyFn] = useState(() => () =>\r\n 'error creating answer'\r\n );\r\n const [seconds, setSeconds] = useState(0);\r\n const [isActive, setIsActive] = useState(false);\r\n const [currentQuestion, setCurrentQuestion] = useState(0);\r\n\r\n const section5 = section5Arr(\r\n enabledQuestions,\r\n handleFetchError,\r\n localAnswers,\r\n setLocalAnswers,\r\n setStringifyFn,\r\n setAnswerTime,\r\n setSectionQuestion,\r\n setbtnDisabled,\r\n applicantInfo,\r\n existingUserInfo,\r\n setCurrentSection,\r\n currentSection\r\n );\r\n\r\n const postAnswer = (stringifiedAnswer, localAnswers) => {\r\n return axios.post(`${baseURL}postAnswer`, {\r\n TestID: enabledQuestions.TestID,\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n Country: enabledQuestions.Country,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail,\r\n SectionQuestion: sectionQuestion,\r\n AnswerTime: answerTime,\r\n Answer: stringifiedAnswer,\r\n localAnswers: localAnswers\r\n });\r\n };\r\n\r\n function submitCallback() {\r\n setIsWaiting(true);\r\n\r\n let stringifiedAnswer = stringifyFn(localAnswers);\r\n\r\n if (sectionQuestion !== 'Summary') {\r\n postAnswer(stringifiedAnswer, localAnswers)\r\n .then((response) => {\r\n setIsWaiting(false);\r\n\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n section5\r\n );\r\n })\r\n .catch((error) => handleFetchError(true, error.toString(), 'error'));\r\n } else {\r\n submitClicked(\r\n currentQuestion,\r\n setCurrentQuestion,\r\n currentSection,\r\n setCurrentSection,\r\n section5\r\n );\r\n }\r\n }\r\n function toggle() {\r\n setIsActive(!isActive);\r\n }\r\n\r\n useEffect(() => {\r\n if (currentQuestion === section5.length - 1) {\r\n setIsActive(false);\r\n }\r\n }, [seconds]);\r\n\r\n useEffect(() => {\r\n toggle();\r\n }, []);\r\n\r\n useEffect(() => {\r\n let interval = null;\r\n\r\n if (isActive) {\r\n interval = setInterval(() => {\r\n setSeconds((seconds) => seconds + 1);\r\n }, 1000);\r\n } else if (seconds !== 0) {\r\n clearInterval(interval);\r\n }\r\n\r\n return () => clearInterval(interval);\r\n }, [isActive, seconds]);\r\n\r\n return (\r\n <>\r\n \r\n {isWaiting ? (\r\n
\r\n \r\n {section5[currentQuestion]}\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Section5;\r\n","import React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport baseURL from '../../helpers/helpers';\r\nimport { makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n heading: {\r\n textTransform: 'uppercase'\r\n },\r\n m1: {\r\n margin: '1rem 0'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n spans: {\r\n color: '#611515',\r\n textTransform: 'uppercase'\r\n }\r\n});\r\n\r\nconst GeneralSummary1 = ({ enabledQuestions, applicantInfo }) => {\r\n const classes = useStyles();\r\n\r\n const [scores, setScores] = useState('');\r\n\r\n useEffect(() => {\r\n axios({\r\n method: 'get',\r\n url: `${baseURL}getSummaries`,\r\n params: {\r\n CallCenterID: enabledQuestions.CallCenterID,\r\n ApplicantName: applicantInfo.ApplicantName,\r\n ApplicantEmail: applicantInfo.ApplicantEmail\r\n }\r\n })\r\n .then((response) => {\r\n if (response.data) setScores(response.data[0]);\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n }, []);\r\n\r\n return (\r\n <>\r\n \r\n {isWaiting ? (\r\n \r\n Submit\r\n \r\n )}\r\n
\r\n \r\n \r\n You received{' '}\r\n \r\n {scores.FinalPointsScored}\r\n {' '}\r\n points out of{' '}\r\n \r\n {scores.FinalPointsPossible}\r\n {' '}\r\n available points.\r\n \r\n \r\n A score of{' '}\r\n \r\n {scores.FinalPercentCorrect}\r\n \r\n {''} percent correct.\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default GeneralSummary1;\r\n","import React from 'react';\r\nimport { Divider, Grid, makeStyles, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n margin: '0 auto'\r\n },\r\n displayDivs: {\r\n border: '2px solid #611515',\r\n borderRadius: '4px',\r\n padding: '4px',\r\n textAlign: 'center'\r\n },\r\n heading: {\r\n textTransform: 'uppercase'\r\n },\r\n mt1: {\r\n marginTop: '1rem'\r\n },\r\n spans: {\r\n color: '#611515',\r\n textDecoration: 'underline',\r\n textTransform: 'uppercase'\r\n },\r\n textLeft: { textAlign: 'left' }\r\n});\r\n\r\nconst DetailedSummaryComponent = ({ scores }) => {\r\n const classes = useStyles();\r\n\r\n const keys = ['1', '2', '3', '4', '5'];\r\n\r\n return (\r\n <>\r\n \r\n \r\n {scores[0][`Section${el}Topic`]}\r\n \r\n
\r\n \r\n \r\n {scores[0][`Section${el}QuestionsAnswered`]}\r\n \r\n
\r\n \r\n \r\n {scores[0][`Section${el}PercentCorrect`] !== null\r\n ? scores[0][`Section${el}PercentCorrect`]\r\n : 'not yet calculated'}\r\n \r\n
\r\n \r\n \r\n {scores[0][`Section${el}PointsScored`]}\r\n \r\n
\r\n \r\n \r\n {scores[0][`Section${el}PointsPossible`]}\r\n \r\n
\r\n \r\n \r\n {' '}\r\n {scores[0][`Section${el}ElapsedTime`]}\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return;\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {enabledQuestions.Summaries !== 0 ? (\r\n endTest[currentQuestion]\r\n ) : (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default EndTest;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport isSectionEnabled from \"../src/components/helpers/isSectionEnabled\";\r\nimport { makeStyles } from \"@material-ui/core\";\r\nimport Navbar from \"../src/components/layout/Navbar\";\r\nimport CustomizedSnackbar from \"./components/layout/CustomizedSnackbar\";\r\nimport StartTest from \"./components/startTest/StartTest\";\r\nimport Section1 from \"./components/section1/Section1\";\r\nimport Section2 from \"./components/section2/Section2\";\r\nimport Section3 from \"./components/section3/Section3\";\r\nimport Section4 from \"./components/section4/Section4\";\r\nimport Section5 from \"./components/section5/Section5\";\r\nimport EndTest from \"./components/endTest/EndTest\";\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n textAlign: \"center\",\r\n marginTop: \"1rem\"\r\n }\r\n});\r\n\r\nconst renderCurrentSection = (\r\n currentSection,\r\n setCurrentSection,\r\n sectionOrder,\r\n enabledQuestions,\r\n setEnabledQuestions,\r\n handleFetchError,\r\n applicantInfo,\r\n setApplicantInfo,\r\n setExistingUserInfo,\r\n existingUserInfo\r\n) => {\r\n const sectionMap = {\r\n StartTest: (\r\n \r\n {renderCurrentSection(\r\n currentSection,\r\n setCurrentSection,\r\n sectionOrder,\r\n enabledQuestions,\r\n setEnabledQuestions,\r\n handleFetchError,\r\n applicantInfo,\r\n setApplicantInfo,\r\n setExistingUserInfo,\r\n existingUserInfo\r\n )}\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default App;\r\n","const reportWebVitals = onPerfEntry => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport App from './App';\r\nimport reportWebVitals from './reportWebVitals';\r\n\r\nReactDOM.render(\r\n