\r\n
\r\n );\r\n}\r\n\r\nexport default HideButtonPopup;\r\n","import React from 'react';\r\n\r\nconst Information = () => {\r\n return (\r\n \r\n
\r\n Screen hidden\r\n \r\n
\r\n\r\n
\r\n Your answers have been stored.
Please note that the clock is still running. The time has not been paused.
\r\nIf you wish to leave the room, please tell your invigilator.
\r\nClick the button below to go back to your test.
\r\n \r\n\r\n
\r\n );\r\n}\r\n\r\nexport default Information;\r\n","import React from 'react';\r\nimport ScreenCandidate from '../../../assets/images/popups/testhelp/screenCandidate.png';\r\nimport ScreenClock from '../../../assets/images/popups/testhelp/screenClock.png';\r\nimport ScreenNav from '../../../assets/images/popups/testhelp/screenNav.png';\r\nimport NextQBtn from '../../../assets/images/popups/testhelp/next-question-button.png';\r\nimport PreviousQBtn from '../../../assets/images/popups/testhelp/previous-question-button.png';\r\nimport ScreenReview from '../../../assets/images/popups/testhelp/screenReview.png';\r\nimport IconMinimise from '../../../assets/images/popups/testhelp/iconMinimise.png';\r\nimport IconMaximise from '../../../assets/images/popups/testhelp/iconMaximise.png';\r\nimport ScreenNavCurrent from '../../../assets/images/popups/testhelp/screenNavCurrent.png';\r\nimport ScreenNavAnswered from '../../../assets/images/popups/testhelp/screenNavAnswered.png';\r\nimport ScreenNavReview from '../../../assets/images/popups/testhelp/screenNavReview.png';\r\nimport ScreenNavNormal from '../../../assets/images/popups/testhelp/screenNavNormal.png';\r\nimport ScreenRightClick from '../../../assets/images/popups/testhelp/screenRightClick.png';\r\nimport ScreenRightHighlight from '../../../assets/images/popups/testhelp/screenRightHighlight.png';\r\nimport ScreenRightNotes from '../../../assets/images/popups/testhelp/screenRightNotes.png';\r\nimport ScreenNotes from '../../../assets/images/popups/testhelp/screenNotes.png';\r\nimport ScreenNotesIcon from '../../../assets/images/popups/testhelp/screenNotesIcon.png';\r\nimport ScreenRightClickHighlight from '../../../assets/images/popups/testhelp/screenRightClickHighlight.png';\r\nimport ScreenRightClear from '../../../assets/images/popups/testhelp/screenRightClear.png';\r\nimport ScreenRightClearAll from '../../../assets/images/popups/testhelp/screenRightClearAll.png';\r\n\r\n\r\nconst TestHelp = () => {\r\n return (\r\n INSTRUCTIONS TO CANDIDATES
\r\n- \r\n
- Answer all questions. \r\n
- You can change your answers at any time during the test. \r\n
INFORMATION FOR CANDIDATES
\r\n- \r\n
- There are 40 questions in this test. \r\n
- Each question carries one mark. \r\n
- The test clock will show you when there are 10 minutes and 5 minutes remaining. \r\n
\r\n 
\r\n 
\r\n \r\n\t\t\t
\r\n 
\r\n \r\n\t\t\t
\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 TestHelp;\r\n","import React, { Component } from 'react';\r\nimport IELTSGeneralTrainingReadingChoiceAccordion from '../../../assets/images/popups/taskhelp/IELTS-GeneralTrainingReading-ChoiceAccordion.png';\r\nimport IELTSGeneralTrainingReadingGapFill from '../../../assets/images/popups/taskhelp/IELTS-GeneralTrainingReading-GapFill.png';\r\nimport IELTSGeneralTrainingReadingDragDrop1 from '../../../assets/images/popups/taskhelp/IELTS-GeneralTrainingReading-DragDrop1.png';\r\nimport IELTSGeneralTrainingReadingDragDrop2 from '../../../assets/images/popups/taskhelp/IELTS-GeneralTrainingReading-DragDrop2.png';\r\nimport IELTSListeningMultiChoice from '../../../assets/images/popups/taskhelp/IELTS-Listening-MultiChoice.png';\r\nimport IELTSAcademicReadingTableMatch1 from '../../../assets/images/popups/taskhelp/IELTS-AcademicReading-TableMatch1.png';\r\nimport IELTSAcademicReadingTableMatch2 from '../../../assets/images/popups/taskhelp/IELTS-AcademicReading-TableMatch2.png';\r\n\r\nclass TaskHelp extends Component {\r\n componentDidMount() {\r\n if (this.props.pageNumber) {\r\n const targetId = this.generateTarget(this.props.pageNumber);\r\n const el = document.getElementById(targetId);\r\n el.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.pageNumber !== this.props.pageNumber) {\r\n const targetId = this.generateTarget(this.props.pageNumber);\r\n const el = document.getElementById(targetId);\r\n el.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n }\r\n\r\n generateTarget(pageNumber) {\r\n let targetId;\r\n if (pageNumber === 1 || pageNumber === 2) {\r\n targetId = 'task-help-1';\r\n } else if (pageNumber === 3) {\r\n targetId = 'task-help-2';\r\n } else if (pageNumber === 4) {\r\n targetId = 'task-help-3';\r\n } else if (pageNumber === 5 || pageNumber === 6 || pageNumber === 7) {\r\n targetId = 'task-help-4';\r\n }\r\n\r\n return targetId;\r\n }\r\n\r\n render() {\r\n return (\r\n At the top of the screen you can see:
\r\nYour name and candidate number.
\r\nA clock, which tells you how much time you have left. When you hover over the time you can see the seconds.
\r\n| \r\n Help\r\n | \r\n\r\n Click to view the help.\r\n | \r\n
| \r\n Settings\r\n | \r\n\r\n Click to change your screen settings.\r\n | \r\n
| \r\n Hide\r\n | \r\n\r\n Click to hide the screen content temporarily.\r\n | \r\n
Navigation
\r\nAt the bottom of the screen you can see the navigation bar
\r\nClick on a number to go to that question.
\r\n| \r\n | \r\n \r\n Click to go to the next question.\r\n | \r\n
| \r\n | \r\n \r\n Click to go to the previous question.\r\n | \r\n
| \r\n | \r\n \r\n Click if you want to look at this question again later. The question number in the navigation bar will turn into a circle.\r\n | \r\n
| \r\n | \r\n \r\n Click to make the navigation smaller.\r\n | \r\n
| \r\n | \r\n \r\n Click to make the navigation bigger.\r\n | \r\n
| \r\n | \r\n \r\n The blue highlighting shows the question you are looking at.\r\n | \r\n
| \r\n | \r\n \r\n The underlining shows that you have answered this question.\r\n | \r\n
| \r\n | \r\n \r\n The circle shows that you want to look at this question again (marked for review).\r\n | \r\n
| \r\n | \r\n \r\n The black highlighting shows that you have not answered the question.\r\n | \r\n
Highlighting
\r\nTo highlight something in the test:
\r\nSelect the text you want to highlight using the mouse.
\r\nRight click over the text.
\r\n| \r\n | \r\n \r\n Click to highlight the text you have selected.\r\n | \r\n
| \r\n | \r\n \r\n Click to highlight the text you have selected and to add notes about what you have highlighted.\r\n | \r\n
Notes
\r\nTo close the notes click on X in the top right. To view the notes right-click on the highlighted text (anything you write in Notes will be deleted at the end of the test).
\r\nYou can locate those areas of highlighted text containing notes by hovering over each highlighted text. If a small orange box appears the highlighted text contains notes.
\r\nTo clear your highlighting right click on the highlighted text.
\r\n| \r\n | \r\n \r\n Click to clear the highlighting. This will also clear any notes you have made.\r\n | \r\n
| \r\n | \r\n \r\n Click to clear all highlighting including notes.\r\n | \r\n
Scrolling
\r\nFor longer texts, you may need to scroll to see all of the test.
\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 TaskHelp;\r\n","import React, { Component } from 'react';\r\nimport Information from './helpContents/Information';\r\nimport TestHelp from './helpContents/TestHelp';\r\nimport TaskHelp from './helpContents/TaskHelp';\r\nimport Button from '../Button';\r\n\r\nclass HelpButtonPopup extends Component {\r\n\r\n state = {\r\n pos3: 0,\r\n pos4: 0,\r\n dragEnable: false,\r\n showContentIndex: 2\r\n };\r\n\r\n onMouseDown (event) {\r\n this.setState({ pos3: event.clientX, pos4: event.clientY, dragEnable: true });\r\n }\r\n\r\n onMouseUp (event) {\r\n this.setState({ dragEnable: false });\r\n }\r\n\r\n onMouseMove (event) {\r\n const pos1 = this.state.pos3 - event.clientX;\r\n const pos2 = this.state.pos4 - event.clientY;\r\n this.setState({ pos3: event.clientX, pos4: event.clientY });\r\n // set the element's new position:\r\n if (this.state.dragEnable) {\r\n this.moveTarget.style.top = (this.moveTarget.offsetTop - pos2) + \"px\";\r\n this.moveTarget.style.left = (this.moveTarget.offsetLeft - pos1) + \"px\";\r\n }\r\n }\r\n\r\n switchContent(index) {\r\n this.setState({ showContentIndex: index });\r\n }\r\n\r\n render() {\r\n const { pageNumber, toggleHelpPopup } = this.props;\r\n return (\r\n To choose a question either click on the question number at the bottom of the screen or click on the question.
\r\nMultiple choice questions
\r\nChoose your question by clicking on it.
\r\nClick on the answer you think is right.
\r\nIf you change your mind, click on a different answer.
\r\nIf you want to leave the question unanswered, click on your answer again.
\r\nGap fill questions
\r\nTo answer some questions, you need to write words or numbers in a gap. To answer these questions, click in the gap and write your answer. Some questions may ask you to write your answer in a table or diagram.
\r\nDrag and drop questions
\r\nTo answer a question, click on the answer on the right
\r\nand move it into the gap on the left.
\r\nIf you want to change your answer, move another answer into the gap.
\r\nIf you want to leave the question unanswered, move the answer back.
\r\nDon't forget! You may need to scroll through the text on the left or the right to see all the questions and answers.
\r\nTable matching questions
\r\nTo choose a question, click on the question number in the table. The row will become shaded.
\r\nChoose the correct answer by clicking on the space in the table. A tick will appear.
\r\nIf you want to change your answer, click on another space.
\r\nIf you want to leave the question unanswered, click on the space again.
\r\nSometimes you may choose an answer more than once. Make sure you read the instructions and questions carefully.
\r\nMultiple choice questions where there is more than one answer
\r\nSome questions may ask you to choose two or three answers. Make sure you read the instructions and questions carefully.
\r\nClick on the answers you think are right.
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default HelpButtonPopup;\r\n","import React, { Component } from 'react';\r\nimport Logo from '../assets/images/IELTSlogo.png';\r\nimport ParntersImage from '../assets/images/IELTSpartners.jpg';\r\nimport Button from '../components/Button';\r\nimport Timer from '../components/Timer';\r\nimport HideButtonPopup from '../components/staticComponents/HideButtonPopup';\r\nimport HelpButtonPopup from '../components/staticComponents/HelpButtonPopup';\r\n\r\nclass Banner extends Component {\r\n state = {\r\n showHidePopup: false,\r\n showHelpPopup: false\r\n }\r\n\r\n toggleHidePopup = () => {\r\n this.setState({ showHidePopup: !this.state.showHidePopup});\r\n }\r\n\r\n toggleHelpPopup = () => {\r\n this.setState({ showHelpPopup: !this.state.showHelpPopup});\r\n }\r\n\r\n render() {\r\n const { pageType, pageNumber } = this.props;\r\n const renderHelpItems = (\r\n this.onMouseDown(event)}\r\n onMouseMove={(event) => this.onMouseMove(event)}\r\n onMouseUp={(event) => this.onMouseUp(event)}\r\n ref={(node) => { this.moveTarget = node; }}\r\n >\r\n
\r\n Help\r\n \r\n
\r\n\r\n
\r\n - \r\n
- this.switchContent(0)}>Information \r\n
- this.switchContent(1)}>Test help \r\n
- this.switchContent(2)}>Task help \r\n
- \r\n { pageNumber !== 1 &&\r\n
- XXXX XXXXXXX - 123456 \r\n }\r\n { pageType !== 'Intro' &&\r\n
- \r\n \r\n \r\n \r\n }\r\n
\r\n { this.props.pageType === 'Intro' &&\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Banner;\r\n","import React from 'react';\r\n\r\nconst Button = ({ Message, type = 'message' }) => {\r\n return (\r\n \r\n 
\r\n 
\r\n
\r\n }\r\n \r\n {renderHelpItems}\r\n
\r\n { this.state.showHelpPopup &&\r\n {Message}
\r\n );\r\n}\r\n\r\nexport default Button;\r\n","import React from 'react';\r\nimport Button from '../../components/Button';\r\nimport Hint from '../../components/Hint';\r\n\r\nconst ConfirmDetails = ({ handleClick }) => {\r\n return (\r\n\r\n
\r\n );\r\n}\r\n\r\nexport default ConfirmDetails;\r\n","import React from 'react';\r\nimport Button from '../../components/Button';\r\nimport Hint from '../../components/Hint';\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nconst ConfirmDetails = ({ introductions, handleClick }) => {\r\n\r\n return (\r\n Confirm your details
\r\n\r\n
\r\n Name:
\r\nDate of birth:
\r\nCandidate number:
\r\n\r\n
\r\n );\r\n}\r\n\r\nexport default ConfirmDetails;\r\n","import React, { Component } from 'react';\r\n\r\nclass GroupInputs extends Component {\r\n state = {\r\n answerChecked: []\r\n }\r\n\r\n componentDidMount() {\r\n const storedAnswers = this.props.storedAnswers.filter(answer => answer.questionId === this.props.questionId);\r\n if (storedAnswers.length > 0) {\r\n this.setState({ answerChecked: storedAnswers[0].answer });\r\n } else {\r\n const answerChecked = [];\r\n for(let i=0; i{introductions.title}
\r\nTime: {introductions.time}
\r\nINSTRUCTIONS TO CANDIDATES
\r\n- \r\n { introductions.instructions.map(instruction =>\r\n
- {ReactHtmlParser(instruction)} \r\n )}\r\n
INFORMATION FOR CANDIDATES
\r\n- \r\n { introductions.information.map(information =>\r\n
- {information} \r\n )}\r\n
- \r\n { answers.map(answer =>\r\n
- this.handleChange(answer.id) }>\r\n this.handleChange(answer.id) }\r\n checked={(this.state.answerChecked[answer.id -1])? true : false}\r\n />\r\n
{answer.content}
\r\n \r\n )}\r\n
\r\n { content.map(question =>\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default MultiChoices;\r\n","import React, { Component } from 'react';\r\n\r\nclass TextInput extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: props.id\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const storedAnswers = this.props.storedAnswers.filter(answer => answer.questionId === this.props.id);\r\n if (storedAnswers.length > 0) {\r\n this.setState({ value: storedAnswers[0].answer });\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps){\r\n if(nextProps.chosenQuestionId !== this.props.chosenQuestionId && this.props.id === nextProps.chosenQuestionId){\r\n this.nameInput.focus();\r\n }\r\n }\r\n\r\n handleChange = (event) => {\r\n this.setState({ value: event.target.value }, () => {\r\n if (this.state.value !== '') {\r\n this.props.checkAnsweredQuestion(this.props.id, [true]);\r\n } else {\r\n this.props.checkAnsweredQuestion(this.props.id, [false]);\r\n }\r\n this.props.storeAnswers(this.props.id, this.state.value);\r\n });\r\n }\r\n\r\n handleFocus = () => {\r\n if (this.state.value === this.props.id) {\r\n this.setState({ value: '' }, () => {\r\n this.props.toggleQuestion(this.props.id);\r\n });\r\n }\r\n }\r\n\r\n handleBlur = () => {\r\n if (this.state.value === '') {\r\n this.setState({ value: this.props.id });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )}\r\n toggleQuestion(question.id)}\r\n >{ReactHtmlParser(question.question)}
\r\n \r\n { this.nameInput = input; }}\r\n autoFocus={this.props.id === this.props.chosenQuestionId}\r\n value={this.state.value}\r\n onChange={this.handleChange}\r\n onFocus={this.handleFocus}\r\n onBlur={this.handleBlur}\r\n />\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default TextInput;\r\n","import React from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport TextInput from './TextInput';\r\n\r\nconst MultiInputs = ({ className, content, toggleQuestion, chosenQuestionId, checkAnsweredQuestion, storeAnswers, storedAnswers }) => {\r\n return (\r\n \r\n {content.map((p) =>\r\n
\r\n );\r\n}\r\n\r\nexport default MultiInputs;\r\n","export default {\r\n BOX: 'box',\r\n}\r\n","import React, { Component } from 'react';\r\nimport { DragSource } from 'react-dnd';\r\nimport DndItemType from './DndItemType';\r\n\r\nconst boxSource = {\r\n beginDrag(props) {\r\n return {text: props.text}\r\n }\r\n};\r\n\r\nexport class DragBox extends Component {\r\n render() {\r\n const { connectDragSource, text } = this.props;\r\n return connectDragSource (\r\n {text}\r\n );\r\n }\r\n}\r\n\r\nexport default DragSource(DndItemType.BOX, boxSource, (connect, monitor) => ({\r\n connectDragSource: connect.dragSource(),\r\n isDragging: monitor.isDragging(),\r\n}))(DragBox);\r\n","import React, { Component } from 'react';\r\nimport { DropTarget } from 'react-dnd';\r\nimport DndItemType from './DndItemType';\r\nimport DragBox from './DragBox';\r\n\r\nconst boxTarget = {\r\n drop(props, monitor) {\r\n return monitor.getItem();\r\n },\r\n};\r\n\r\nexport class DropBoxEmpty extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n text: '',\r\n HoveringInText: '',\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const storedAnswers = this.props.storedAnswers.filter(answer => answer.questionId === this.props.id);\r\n if (storedAnswers.length > 0) {\r\n this.setState({ text: storedAnswers[0].answer });\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.isOver !== this.props.isOver && !nextProps.didDrop) {\r\n if (nextProps.isOver) {\r\n this.setState({ HoveringInText: this.props.item.text });\r\n } else {\r\n this.setState({ HoveringInText: '' });\r\n }\r\n }\r\n\r\n if (nextProps.item !== this.props.item) {\r\n this.setState({ HoveringInText: '' });\r\n }\r\n\r\n if (nextProps.didDrop !== this.props.didDrop && nextProps.didDrop){\r\n if (this.state.HoveringInText !== this.state.text && this.state.HoveringInText !== '') {\r\n if (this.state.text !== '') {\r\n this.props.generateReplacedText(this.state.text);\r\n } else {\r\n this.props.generateReplacedText('');\r\n }\r\n this.props.toggleQuestion(this.props.id);\r\n this.props.checkAnsweredQuestion(this.props.id, [true]);\r\n this.setState({ text: this.state.HoveringInText }, () => {\r\n this.props.storeAnswers(this.props.id, this.state.text);\r\n });\r\n } else if (this.state.text === this.props.item.text) {\r\n this.props.checkAnsweredQuestion(this.props.id, [false]);\r\n this.setState({ text: '' }, () => {\r\n this.props.storeAnswers(this.props.id, this.state.text);\r\n });\r\n }\r\n }\r\n }\r\n\r\n renderText() {\r\n if (this.state.text !== '') {\r\n return - \r\n
- {ReactHtmlParser(p.answers[0])}\r\n
\r\n {this.state.renderItems.map((item) =>
\r\n );\r\n }\r\n}\r\n\r\nexport default DropTarget(DndItemType.BOX, boxTarget, (connect, monitor) => ({\r\n connectDropTarget: connect.dropTarget(),\r\n isOver: monitor.isOver(),\r\n item: monitor.getItem(),\r\n itemresult:monitor.getDropResult(),\r\n didDrop:monitor.didDrop()\r\n}))(DropBoxFull);\r\n","import React, { Component } from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport DropBoxEmpty from './DropBoxEmpty';\r\nimport DropBoxFull from './DropBoxFull';\r\n\r\nclass DropContents extends Component {\r\n\r\n render() {\r\n const { content, className, toggleQuestion, chosenQuestionId, checkAnsweredQuestion, dragItems, generateReplacedText, replacedText, storeAnswers, storedAnswers } = this.props;\r\n\r\n return (\r\n \r\n {className ==='drop-content-inline' &&
\r\n );\r\n }\r\n}\r\n\r\nexport default DropContents;\r\n","import React from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport TextInput from './TextInput';\r\n\r\nconst MultiInputInPra = ({ className, content, toggleQuestion, chosenQuestionId, checkAnsweredQuestion, storeAnswers, storedAnswers }) => {\r\n return (\r\n The importance of language
}\r\n {content.length > 0 && content.map((p) =>\r\n\r\n {ReactHtmlParser(p.answers)}\r\n
to use. However, its sophistication is often overlooked.
}\r\n\r\n {content.map((p) =>\r\n {ReactHtmlParser(p.answers[0])}\r\n
\r\n );\r\n}\r\n\r\nexport default MultiInputInPra;\r\n","import React from 'react';\r\nimport TextInput from './TextInput';\r\n\r\nconst MultiInputsInImage = ({ className, content, toggleQuestion, chosenQuestionId, checkAnsweredQuestion, storeAnswers, storedAnswers }) => {\r\n return (\r\n \r\n {content.map((p) =>\r\n
\r\n );\r\n}\r\n\r\nexport default MultiInputsInImage;\r\n","import React, { Component } from 'react';\r\n\r\nclass TableInputs extends Component {\r\n state = {\r\n activeTrId: 0,\r\n activeTdId: [],\r\n focusTdId: 0,\r\n }\r\n\r\n componentWillMount() {\r\n document.addEventListener('click', this.handleOutsideClick, false);\r\n }\r\n\r\n componentDidMount() {\r\n const initialValues = [];\r\n this.props.content.forEach((item) => {\r\n const storedAnswer = this.props.storedAnswers.filter(answer => answer.questionId === item.id);\r\n if (storedAnswer.length > 0) {\r\n initialValues[item.id - 1] = storedAnswer[0].answer;\r\n } else {\r\n initialValues[item.id - 1] = 0;\r\n }\r\n });\r\n\r\n this.setState({ activeTdId: initialValues });\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener('click', this.handleOutsideClick, false);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.storedAnswers !== this.props.storedAnswers) {\r\n const initialValues = [];\r\n this.props.content.forEach((item) => {\r\n const storedAnswer = nextProps.storedAnswers.filter(answer => answer.questionId === item.id);\r\n if (storedAnswer.length > 0) {\r\n initialValues[item.id - 1] = storedAnswer[0].answer;\r\n } else {\r\n initialValues[item.id - 1] = 0;\r\n }\r\n });\r\n\r\n this.setState({ activeTdId: initialValues });\r\n }\r\n\r\n if (nextProps.chosenQuestionId !== this.state.activeTrId) {\r\n this.updateFocusTd(0);\r\n }\r\n }\r\n\r\n handleOutsideClick = (event) => {\r\n if (this.node.contains(event.target)) {\r\n return;\r\n }\r\n\r\n if (event.target.classList.contains('next') || event.target.classList.contains('previous') || event.target.classList.contains('for-detect-table-click')) {\r\n return;\r\n }\r\n\r\n this.updateFocusTd(false);\r\n }\r\n\r\n updateFocusTd(id) {\r\n this.setState({ focusTdId: id });\r\n }\r\n\r\n updateActiveTr(trId) {\r\n this.setState({ activeTrId: trId }, () => {\r\n this.props.toggleQuestion(this.state.activeTrId);\r\n });\r\n }\r\n\r\n updateActiveTd(tdId, trId) {\r\n const activeIdCurrentTR = (this.state.activeTdId[trId - 1] === tdId) ? 0 : tdId;\r\n const activeTdId = this.state.activeTdId;\r\n activeTdId[trId - 1] = activeIdCurrentTR;\r\n this.setState({ activeTdId }, () => {\r\n const answered = (this.state.activeTdId[trId - 1] === 0) ? [false] : [true];\r\n this.props.checkAnsweredQuestion(this.state.activeTrId, answered);\r\n this.props.storeAnswers(this.state.activeTrId, this.state.activeTdId[trId - 1]);\r\n });\r\n }\r\n\r\n renderThead() {\r\n return (\r\n \r\n this.node = node}>\r\n \r\n { this.renderThead() }\r\n \r\n { this.renderTbody() }\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default TableInputs;\r\n","import React, { Component } from 'react';\r\n\r\nclass TextArea extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n content: props.writingAnswerNote,\r\n wordCount: 0\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n const words = nextProps.writingAnswerNote.split(/\\s+/).filter(word => word !== '');\r\n this.setState({ content: nextProps.writingAnswerNote, wordCount: words.length });\r\n }\r\n\r\n wordCounter() {\r\n const words = this.state.content.split(/\\s+/).filter(word => word !== '');\r\n this.setState({ wordCount: words.length }, () => {\r\n if (this.state.wordCount === 0) {\r\n this.props.checkAnsweredQuestion(this.props.pageNumber, [false]);\r\n } else {\r\n this.props.checkAnsweredQuestion(this.props.pageNumber, [true]);\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n this.setState({ content: event.target.value },\r\n () => { this.wordCounter(); this.props.updateAnwerPerPage(this.state.content, this.props.pageNumber) })}\r\n value={this.state.content}\r\n >\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default TextArea;\r\n","import React, { Component } from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport MultiChoices from './MultiChoices';\r\nimport MultiInputs from './MultiInputs';\r\nimport DropContents from './DropContents';\r\nimport MultiInputInPra from './MultiInputInPra';\r\nimport MultiInputsInImage from './MultiInputsInImage';\r\nimport TableInputs from './TableInputs';\r\nimport TextArea from './TextArea';\r\nimport TextInput from './TextInput';\r\n\r\nclass Answers extends Component {\r\n\r\n renderAnswerContent() {\r\n if (this.props.answers.type === 'table inputs two') {\r\n return (\r\n Word Count: {this.state.wordCount}
\r\n\r\n
\r\n )\r\n } else if (this.props.answers.type === 'table inputs') {\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n List of political units | |
A | \r\n Tichitt-Oualata | \r\n
B | \r\n Jenné-Jeno | \r\n
C | \r\n Igbo-Ukwu | \r\n
\r\n
\r\n )\r\n } else if (this.props.answers.type === 'radios') {\r\n return (\r\n \r\n {this.props.answers.content.map((c) =>\r\n
\r\n )\r\n } else if (this.props.answers.type === 'inputTexts in one paragraph') {\r\n return (\r\n \r\n {ReactHtmlParser(c.answers[0])}\r\n
\r\n )}\r\n {ReactHtmlParser(this.props.answers.content)}
\r\n )\r\n }\r\n }\r\n\r\n render() {\r\n const { question, description, title } = this.props.answers;\r\n return (\r\n \r\n {question &&
\r\n );\r\n }\r\n}\r\n\r\nexport default Answers;\r\n","import React from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport DropBoxEmpty from '../../components/DropBoxEmpty';\r\n\r\nconst DropQuestion = ({ questions, className, toggleQuestion, chosenQuestion, checkAnsweredQuestion, generateReplacedText, storeAnswers, storedAnswers }) => {\r\n\r\n return (\r\n {question}
}\r\n {description &&{ReactHtmlParser(description)}
}\r\n {title &&{title}
}\r\n {this.renderAnswerContent()}\r\n\r\n { questions.map((question) =>\r\n
\r\n );\r\n}\r\n\r\nexport default DropQuestion;\r\n","import React, { Component } from 'react';\r\nimport Answers from '../../components/Answers';\r\nimport DropQuestion from './DropQuestion';\r\n\r\nclass Tests extends Component {\r\n state = {\r\n chosenQuestion: 1,\r\n answeredQuestion: [],\r\n reviewChecked: false,\r\n reviewModeNode: [],\r\n summaryView: false,\r\n chooseQForCheckbox: 17,\r\n replacedText: '',\r\n storedAnswers: []\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n answeredQuestion: this.props.answeredQuestion,\r\n storedAnswers: this.props.storedAnswers,\r\n reviewModeNode: this.props.reviewModeNode\r\n });\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.testPageNumber !== this.props.testPageNumber) {\r\n this.setState({ replacedText: '', reviewChecked: false });\r\n }\r\n }\r\n\r\n generateReplacedText = (text) => {\r\n this.setState({ replacedText: text });\r\n }\r\n\r\n toggleQuestion = (chosenId, page) => {\r\n if (page !== this.props.testPageNumber) {\r\n this.props.TestsPageJump(page + 2);\r\n }\r\n this.setState({ chosenQuestion: chosenId });\r\n }\r\n\r\n checkAnsweredQuestion = (questionId, answersStatus) => {\r\n let answeredQuestion = [...this.state.answeredQuestion], chooseQForCheckbox;\r\n const questionAnswered = answersStatus.filter(checked => checked === true);\r\n\r\n if (this.props.testPageNumber === 4) {\r\n if (questionId === 17) {\r\n if (questionAnswered.length === 0) {\r\n answeredQuestion[16] = false;\r\n answeredQuestion[17] = false;\r\n chooseQForCheckbox = 17;\r\n } else if (questionAnswered.length === 1) {\r\n answeredQuestion[16] = true;\r\n answeredQuestion[17] = false;\r\n chooseQForCheckbox = (this.state.chooseQForCheckbox > 17) ? this.state.chooseQForCheckbox: 17;\r\n } else {\r\n answeredQuestion[16] = true;\r\n answeredQuestion[17] = true;\r\n chooseQForCheckbox = (this.state.chooseQForCheckbox > 18) ? this.state.chooseQForCheckbox: 18;\r\n }\r\n }\r\n } else {\r\n if (questionAnswered.length === 0) {\r\n answeredQuestion[questionId - 1] = false;\r\n } else {\r\n answeredQuestion[questionId - 1] = true;\r\n }\r\n\r\n if (this.props.testPageNumber > 4) {\r\n chooseQForCheckbox = 18;\r\n } else {\r\n chooseQForCheckbox = 17;\r\n }\r\n }\r\n this.setState({ answeredQuestion, chooseQForCheckbox });\r\n }\r\n\r\n renderReviewNode = () => {\r\n const reviewModeNode = [...this.state.reviewModeNode];\r\n if (this.props.testPageNumber === 4) {\r\n this.setState({ reviewChecked: !this.state.reviewChecked }, () => {\r\n if (this.state.reviewChecked) {\r\n reviewModeNode[this.state.chooseQForCheckbox - 1] = true;\r\n } else {\r\n reviewModeNode[this.state.chooseQForCheckbox - 1] = false;\r\n }\r\n\r\n this.setState({ reviewModeNode });\r\n });\r\n } else {\r\n this.setState({ reviewChecked: !this.state.reviewChecked }, () => {\r\n if (this.state.reviewChecked) {\r\n reviewModeNode[this.state.chosenQuestion - 1] = true;\r\n } else {\r\n reviewModeNode[this.state.chosenQuestion - 1] = false;\r\n }\r\n\r\n this.setState({ reviewModeNode });\r\n });\r\n }\r\n }\r\n\r\n unCheckReviewLiClick = (questionId) => {\r\n if (!this.state.reviewModeNode[questionId -1]) {\r\n this.setState({ reviewChecked: false });\r\n }\r\n }\r\n\r\n handleNextClick = () => {\r\n if (this.props.testPageNumber === 4) {\r\n this.setState({ chooseQForCheckbox: this.state.chooseQForCheckbox + 1 }, () => {\r\n if (this.state.chooseQForCheckbox > 18) {\r\n this.props.renderNextPage();\r\n this.setState({ chosenQuestion: 19, chooseQForCheckbox: 18 });\r\n }\r\n });\r\n } else {\r\n this.setState({ chosenQuestion: this.state.chosenQuestion + 1 }, () => {\r\n if (this.state.chosenQuestion > (this.props.test.answer.content[0].id + this.props.test.answer.number - 1)) {\r\n if (this.props.testPageNumber === 7) {\r\n this.props.storeAnswersWhenTestUnmount(this.state.answeredQuestion, this.state.storedAnswers, this.state.reviewModeNode);\r\n }\r\n this.props.renderNextPage();\r\n }\r\n });\r\n }\r\n }\r\n\r\n handlePreviousClick = () => {\r\n if (this.props.testPageNumber === 4) {\r\n this.setState({ chooseQForCheckbox: this.state.chooseQForCheckbox - 1 }, () => {\r\n this.setState({ chosenQuestion: 17 });\r\n if (this.state.chooseQForCheckbox < 17) {\r\n this.props.renderPreviousPage();\r\n this.setState({ chosenQuestion: 16, chooseQForCheckbox: 17 });\r\n }\r\n });\r\n } else {\r\n this.setState({ chosenQuestion: this.state.chosenQuestion - 1 }, () => {\r\n if (this.state.chosenQuestion < this.props.test.answer.content[0].id) {\r\n if (this.props.testPageNumber === 5) {\r\n this.setState({ chosenQuestion: 17, chooseQForCheckbox: 18 });\r\n }\r\n this.props.renderPreviousPage();\r\n }\r\n });\r\n }\r\n }\r\n\r\n storeAnswers = (questionId, answer) => {\r\n let storedAnswers = this.state.storedAnswers.filter(answer => answer.questionId !== questionId);\r\n storedAnswers = [...storedAnswers,\r\n { 'questionId': questionId, 'answer' : answer }\r\n ];\r\n this.setState({ storedAnswers });\r\n }\r\n\r\n renderNavAnswers(page, test) {\r\n if (page === 4) {\r\n const qArray = [17, 18];\r\n return (\r\n qArray.map(q =>\r\n \r\n
\r\n )}\r\n \r\n Question {q}\r\n
\r\n \r\n \r\n Question {question.id}\r\n
\r\n \r\n - \r\n {this.props.tests.map(test => this.renderNavAnswers(test.page, test))}\r\n
\r\n
\r\n )\r\n }\r\n }\r\n\r\n render() {\r\n const { test } = this.props;\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Tests;\r\n","import React from 'react';\r\nimport Button from '../../components/Button';\r\n\r\nconst ConfirmFinish = ({ handleClick, testEnd }) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n {test.question.title}
\r\n {this.renderQuestions()}\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {this.renderAllNavAnswers()}\r\n \r\n
\r\n {!(this.props.testPageNumber === 1 && this.state.chosenQuestion === 1) &&\r\n }\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default ConfirmFinish;\r\n","export const INTROS = [\r\n {\r\n 'pageType': 'reading',\r\n 'title': 'IELTS General Training Reading',\r\n 'time': '1 hour',\r\n 'instructions': [\r\n 'Answer all the questions.',\r\n 'You can change your answers at any time during the test.'\r\n ],\r\n 'information': [\r\n 'There are 34 questions in this test.',\r\n 'Each question carries one mark.',\r\n 'The test clock will show you when there are 10 minutes and 5 minutes remaining.'\r\n ],\r\n 'message': \"Do not click 'Start test' until you are told to do so.\",\r\n 'btnText': 'Start test'\r\n }\r\n];\r\n","export const TESTS = [\r\n {\r\n 'page': 1,\r\n 'title': `Test ended
\r\n\r\n
\r\n Your test has finished.
\r\nAll of your answers have been stored.
\r\nPlease wait for further instructions.
\r\n {!testEnd && }\r\nPart 1
\r\nRead the text below and answer questions 1 – 4.
`,\r\n 'question': {\r\n 'title': `Political units in the history of West Africa`,\r\n 'content': `Note: this is an extract from a General Training Reading text on the subject of political units in the history of West Africa
\r\nSome of Africa’s earliest substantial masonry structures outside Egypt were built in West Africa. The fact that they were constructed demonstrates the existence of a sedentary and complex political unit. At Dhar Tichitt and Dhar Oualata, in modern Mauritania, a new chiefdom developed (around 2000–800 BC) in a deteriorating environment where arable land and pasturage for animals were at a premium. A four-tier settlement hierarchy has been discovered (that is, towns and other settlements at four levels of importance, based on size, function, and type of building), with the largest regional centers exceeding 220 acres (90 ha) in area. The evolution of Tichitt-Oualata society remains unclear, obscured by the poor condition of settlement sites. Competing hypotheses include long-term development in the area, rapid evolution, or immigration from elsewhere. Evidence points to the importance of mixed farming – both crops and animals. Inorganic wealth lay in beads, bracelets and small stone axes. Unfortunately, none of the region’s many tumuli* have yet been excavated. It would appear that the collapse of Tichitt-Oualata around 800 BC was brought about both by the increasing drying of the earth in the region and growing harassment from interlopers from outside.
\r\nDuring the first millennium BC, the advent of metallurgy added further impetus to the growth of complex societies south of the Sahara Desert. Indeed, precious metals were to play a key role in international trade between West Africa and the Mediterranean world, and between East Africa and Asia, throughout the late first and early second millennia AD. At a regional level, iron and copper were crucial materials for making both practical and prestige objects. Coupled with trade in ivory, the control of metallurgical commodities supplanted subsistence farming as the power basis of African elites from the beginning of the first millennium AD.
\r\nThe empire of Ghana existed before Arab geographers began to write of West Africa in the eighth century AD. Its origins and extent remain unclear. The ruins of one of its capitals, Kumbi-Saleh, lie in southeastern Mauritania; yet the most substantive settlement clusters known from the first millennium AD rest within the bounds of the Middle Niger river in neighboring Mali. Earlier scholarly thought placed Ghana as a state founded by Arab traders from North Africa, but recent research has emphasized the indigenous development of regional trade webs long before the Arab conquest of North Africa around AD 750.
\r\nUndoubtedly, the Middle Niger’s best-excavated site is that of Jenné-Jeno (250 BC to AD 1400). Here, trade with adjoining regions in commodities such as copper, iron, and sandstone is in evidence by AD 500. Additionally, by AD 800, local craft specialization and a regional hierarchy centered on Jenné-Jeno point to an urban status for the site. However, Jenné-Jeno is only one of many impressive settlements now known from the Middle Niger. The occupation of such sites continued through the time of Ghana's Islamic successor states, the empire of Mali (AD 1250–1600) and the empire of Songhai (AD 1375–1600). Future work is likely to confirm the view that the heart of the empire of Ghana, like that of the Malinke empire of Mali, lay not in its trade centers in the Sahara but closer to the resource centers of the Middle Niger.
\r\nWhile Jenné-Jeno was flourishing, spectacular developments were also taking place in the West African forest. Although limited excavations have only begun to hint at the political organization of Nigerian societies during the late first millennium AD, their richness and artistic expertise have been well demonstrated at the site of Igbo-Ukwu. Here an elaborate burial and a storehouse of regalia have been excavated, both holding superb brass castings and thousands of glass beads. The presence of such wealth hints at a well-organized system of trade, remarkably accomplished craft specialists, and a wealthy elite, but we know little of settlements in the region until the emergence of the state of Ife around AD 1100.
\r\n\r\n
*tumuli: small burial mounds made of stone and earth
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'table inputs two',\r\n 'question': 'Questions 1 – 4',\r\n 'number': 4,\r\n 'description': 'Choose the correct political unit (A – C). for each statement. You may choose any political unit more than once.',\r\n 'title': '',\r\n 'className': 'table-inputs-two',\r\n 'content': [\r\n {\r\n 'id': 1,\r\n 'answers': 'There is evidence that metal workers were highly skilled.'\r\n },\r\n {\r\n 'id': 2,\r\n 'answers': 'No investigation of certain structures has taken place.'\r\n },\r\n {\r\n 'id': 3,\r\n 'answers': 'Habitation continued after the decline of the political unit.'\r\n },\r\n {\r\n 'id': 4,\r\n 'answers': 'Different residential areas had different characteristics.'\r\n }\r\n ],\r\n answersIndex: ['A', 'B', 'C'],\r\n }\r\n },\r\n {\r\n 'page': 2,\r\n 'title': `Part 1
\r\nRead the texts and answer questions 5 – 10.
`,\r\n 'question': {\r\n 'title': `For Rent`,\r\n 'content': `A
\r\n\r\n
\r\n Westwood Towers in desired northwest location. Brand new 2-bedroom units.
\r\n- \r\n
- Open concept living \r\n
- City views \r\n
- Climate control in each unit \r\n
- Storage lockers available \r\n
- Underground parking \r\n
- $799 + utilities \r\n
Model suite open weekends.
\r\nFor information call 1632 41-1539
\r\nB
\r\n\r\n
\r\n GREAT VALUE 1-bedroom units. Enjoy the convenience of living just steps away from stores and services.
\r\n- \r\n
- On-site laundry \r\n
- Underground parking \r\n
- Gym on lower level \r\n
- Singles and couples preferred \r\n
- $700 per month plus heat. One year lease and references required. \r\n
Rental Office open daily 9 – 9.
\r\n495 Colborne St 1632 523-2222
\r\nC
\r\n\r\n
\r\n WELL-KEPT 1- and 2-bedroom units in older high-rise building.
\r\n- \r\n
- Very spacious units \r\n
- No pets \r\n
- Olympic-sized pool behind building \r\n
- Laundry on premises \r\n
- Gas heat \r\n
- On bus route \r\n
References needed. Ready for occupancy. Contact Z Group Realty 1632 521-4123 www.zgroup.com
\r\nD
\r\n\r\n
\r\n 1092 WONDERLAND RD.
\r\nNow accepting applications for 1-, 2-, & 3-bedroom units.
\r\n- \r\n
- Prime location in the west \r\n
- Key-card entry \r\n
- Free indoor parking with 2yr lease \r\n
- Laundry facilities on-site \r\n
- En-suite bath \r\n
$725 incl. hydro. Heat extra. Call to view. Baseline Holdings 1632 525-7835
\r\nE
\r\n\r\n
\r\n GROUND FLOOR Two-bedroom units for rent.
\r\n- \r\n
- Master bedroom with en-suite bath \r\n
- Enclosed patio at the back \r\n
- Alarm system \r\n
- Electric heat \r\n
- Parking at the front of each unit \r\n
- Washer/dryer in suite \r\n
- Bus at the door \r\n
Perfect for adult lifestyle. Rent includes membership to a nearby community centre with pool and fitness
\r\nmachines. $800 + heat & hydro. Londor Realty 1632 776-9054 or www.linodours.com
\r\nF
\r\n\r\n
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'table inputs',\r\n 'question': 'Questions 5 – 10',\r\n 'number': 6,\r\n 'description': `Look at the six rental notices (A – F). For which rental unit are the following statements true? NEW HIGH RISE COMPLEX inviting applications. 1-, 2- & 3-bedroom units.
\r\n- \r\n
- Eat-in kitchen with dishwasher \r\n
- Panoramic views from living room \r\n
- Luxurious main bath with whirlpool tub \r\n
- 2-vehicle underground parking \r\n
- Lower level has laundry and common room \r\n
$975 all inclusive
\r\nView by appointment.
\r\nSentry Apts. 1632 503-9762
\r\n\r\n Choose the correct letter (A – F).
\r\n You may choose any letter more than once.`,\r\n 'title': '',\r\n 'className': 'table-inputs',\r\n 'content': [\r\n {\r\n 'id': 5,\r\n 'answers': 'The unit has a private outdoor space.'\r\n },\r\n {\r\n 'id': 6,\r\n 'answers': 'The unit is available immediately.'\r\n },\r\n {\r\n 'id': 7,\r\n 'answers': 'There is exercise equipment on-site.'\r\n },\r\n {\r\n 'id': 8,\r\n 'answers': 'The unit is a generous size.'\r\n },\r\n {\r\n 'id': 9,\r\n 'answers': 'Entrance to the building is restricted.'\r\n },\r\n {\r\n 'id': 10,\r\n 'answers': 'The unit is close to shopping.'\r\n }\r\n ],\r\n answersIndex: ['A', 'B', 'C', 'D', 'E', 'F'],\r\n }\r\n },\r\n {\r\n 'page': 3,\r\n 'title': `
Part 1
\r\nRead the text below and answer questions 11 – 16.
`,\r\n 'question': {\r\n 'title': '',\r\n 'content': `Railway Season Tickets
\r\nTypes of Season Tickets
\r\nStandard season tickets allow unlimited travel between the two train stations shown on the ticket for the full duration of their validity. You can break your journey at any train station between the origin and destination station on your season ticket.
\r\nCombined rail-and-bus season tickets are available from some rail stations. This means if you can make your main journey by rail, you can then complete it by bus. Two separate season tickets may be required for some destinations.
\r\n\r\n
Ticket Duration
\r\n7-day
\r\n These normally cost less than five standard day-returns. They are valid for a full seven days’ rail travel between the points shown on the train ticket.
Monthly
\r\n Monthly season tickets are priced at less than four times the cost of 7-day train tickets and are valid for a full calendar month from the date of commencement.
Annual Card
\r\n This gives you a full calendar year's weekday travel for the price of only 40 weekly tickets.\r\n Annual Card holders can also save a third on the price of most Standard Class train fares in the region at weekends and on Bank Holidays.\r\n You can also take up to three adults with you at the same discount, while up to four children (aged 5–15) may accompany you for a minimum of £1 each.
How do I buy my first season ticket?
\r\n Your season ticket is not valid without a photocard, and both must always be carried together. A photocard will be issued to you free of charge when you first purchase a season ticket.\r\n You just need to take a passport-sized photograph to a ticket office and we'll do the rest. As long as your photo remains a good likeness,\r\n you can continue to use the photocard with any subsequent season tickets that you buy.
Part 1
\r\nRead the text below and answer questions 17 – 18.
`,\r\n 'question': {\r\n 'title': 'The History of Early Cinema',\r\n 'content': `Note: this is an extract from a General Training Reading text on the subject of the history of early cinema.
\r\nIn the end it was the United States that was to become, and remain, the largest single market for films. By protecting their own market and pursuing a vigorous export policy, the Americans achieved a dominant position on the world market by the start of the First World War. The centre of film-making had moved westwards, to Hollywood, and it was films from these new Hollywood studios that flooded onto the world’s film markets in the years after the First World War, and have done so ever since. Faced with total Hollywood domination, few film industries proved competitive. The Italian industry, which had pioneered the feature film with spectacular films like 'Quo vadis?' (1913) and 'Cabiria' (1914), almost collapsed. In Scandinavia, the Swedish cinema had a brief period of glory, notably with powerful epic films and comedies. Even the French cinema found itself in a difficult position. In Europe, only Germany proved industrially capable, while in the new Soviet Union and in Japan, the development of the cinema took place in conditions of commercial isolation.
\r\nHollywood took the lead artistically as well as industrially. Hollywood films appealed because they had better-constructed narratives, their special effects were more impressive, and the star system added a new dimension to screen acting. If Hollywood did not have enough of its own resources, it had a great deal of money to buy up artists and technical innovations from Europe to ensure its continued dominance over present or future competition.
\r\nThe rest of the world survived partly by learning from Hollywood and partly because audiences continued to exist for a product which corresponded to needs which Hollywood could not supply. As well as popular audiences, there were also increasing audiences for films which were artistically more adventurous or which dealt with wider international issues.
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'checkboxes',\r\n 'question': 'Questions 17 – 18',\r\n 'number': 2,\r\n 'description': 'Choose TWO correct answers.',\r\n 'title': '',\r\n 'content': [\r\n {\r\n 'id': 17,\r\n 'question': `17 – 18 Which TWO possible reasons for American dominance of the film industry are given in the text?`,\r\n 'answers': [\r\n {'id': 1, 'content': \"plenty of capital to purchase what it didn't have\"},\r\n {'id': 2, 'content': 'making films dealing with serious issues'},\r\n {'id': 3, 'content': 'being first to produce a feature film'},\r\n {'id': 4, 'content': 'well-written narratives'},\r\n {'id': 5, 'content': 'the effect of the First World War'}\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 5,\r\n 'title': `Part 1
\r\nRead the text below and answer questions 19 – 23.
`,\r\n 'question': {\r\n 'title': 'Political units in the history of West Africa',\r\n 'content': `Note: this is an extract from a General Training Reading text on the subject of political units in the history of West Africa
\r\nIfe, perched at the edge of Nigeria's forest, is thought to have come to prominence through its control of local products – including ivory, gold and pepper – in external trade. By AD 1300, its walled capital was at the peak of its wealth, with many shrines featuring elaborate pavements made of pieces of pottery, and a rich tradition of creating brass and terracotta sculptures, including ones of people richly adorned in ceremonial regalia. Many of these have survived. Subsistence for the large elite and artisan population appears to have been based upon small livestock and the cultivation of vegetables. Around AD 1500, the city of Ife declined, and the region's center of power shifted to Benin without any appreciable break in cultural tradition.
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'inputTexts in one paragraph',\r\n 'question': 'Questions 19 – 23',\r\n 'number': 5,\r\n 'description': 'Complete the summary. Write ONE WORD ONLY from the text in each gap.',\r\n 'title': 'Ife',\r\n 'className': 'input-with-paragraph',\r\n 'content': [\r\n {\r\n 'id': 19,\r\n 'answers': [\r\n 'The state of Ife adjoined the ',\r\n 'in Nigeria, and traded a variety of goods, including metals such as '\r\n ]\r\n },\r\n {\r\n 'id': 20,\r\n 'answers': [\r\n ' ',\r\n '. Floors in religious buildings were made from bits of '\r\n ]\r\n },\r\n {\r\n 'id': 21,\r\n 'answers': [\r\n ' ',\r\n '. There are many surviving examples of '\r\n ]\r\n },\r\n {\r\n 'id': 22,\r\n 'answers': [\r\n ' ',\r\n ' made of brass or terracotta. The population lived on animal products, and crops such as '\r\n ]\r\n },\r\n {\r\n 'id': 23,\r\n 'answers': [\r\n ' ',\r\n '.'\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 6,\r\n 'title': `Part 2
\r\nRead the text below and answer questions 24 – 28.
`,\r\n 'question': {\r\n 'title': '',\r\n 'content': `ACCIDENT INSURANCE FOR CITY MEDIA EMPLOYEES
\r\nCity Media is pleased to offer its employees accident insurance benefits which are unique in the industry. Our insurance package not only insures employees against accidents occurring on the job, but extends to their off-hours. It also provides 24-hour protection to dependants and to eligible partners. A general description of the accident insurance package is shown below. Any questions regarding it may be referred to our Human Resources Department.
\r\nOur basic insurance is the same for all employees, and City Media makes enrolling in this program a condition of employment. We make an exception for those who have the same or greater coverage in an alternate plan. However, employees with other plans are still able to have adult dependants enrolled in ours. At this time, City Media does not extend this insurance to temporary staff, whether they are under contract for their services or not.
\r\nFurther, employees can usually purchase accident insurance for their partners. However, submission and review of an application to the insurance company will determine whether the partner is eligible to participate.The terms in these policies bought for spouses are identical to those in the employees’ policy. This is, of course, provided that he/she has no accident insurance under another plan.
\r\nAccident benefits take effect after completing three months of employment. Full-time employees will then automatically receive the minimum $80,000 worth of protection. Part-time employees, defined as those scheduled to work less than forty hours per week, will also be offered accident protection, but the amount of this coverage depends on the hours they typically work. Additional insurance is optional and is sold in amounts of $25,000 and capped at $100,000. Anyone who is interested can submit a request to purchase it and will be responsible for the premium as well as the fees to administer it.
\r\nIf employees take an extended time off work on leave, they can either decide not to carry accident insurance or they can decide to keep it and pay 100% of the expense. Basic insurance protection resumes on the first day of the return to work; however, the optional coverages that are discontinued during this time are not automatically restored. These coverages will resume after a medical, a letter from the doctor, and an assurance that the insurance carrier is satisfied.
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'inputTexts in paragraphs',\r\n 'question': 'Questions 24 – 28',\r\n 'number': 5,\r\n 'description': 'Complete the sentences. Write ONE WORD ONLY from the text in each gap.',\r\n 'title': '',\r\n 'className': 'without-bullets-points',\r\n 'content': [\r\n {\r\n 'id': 24,\r\n 'answers': [\r\n 'The accident protection at City Media is ',\r\n ' amongst similar companies.'\r\n ]\r\n },\r\n {\r\n 'id': 25,\r\n 'answers': [\r\n 'The insurance programme excludes ',\r\n ' employees.'\r\n ]\r\n },\r\n {\r\n 'id': 26,\r\n 'answers': [\r\n 'An employee’s partner is not automatically ',\r\n ' for the insurance.'\r\n ]\r\n },\r\n {\r\n 'id': 27,\r\n 'answers': [\r\n 'The insurance coverage for part-timers is related to their usual number of ',\r\n '.'\r\n ]\r\n },\r\n {\r\n 'id': 28,\r\n 'answers': [\r\n 'Employees can send in a ',\r\n ' for extra insurance.'\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 7,\r\n 'title': `Part 2
\r\nRead the text below and answer questions 29 – 34.
`,\r\n 'question': {\r\n 'title': '',\r\n 'content': `CITY MEDIA INTERNSHIPS
\r\nWe are a proudly Canadian organization offering six annual internships, valued at $10,000 each, to deserving persons from minority groups. We offer career assistance, and an opportunity for these individuals to demonstrate the talent they have and get hands-on experience in broadcasting. We hope that our commitment to these groups becomes an industry-wide model of acceptance. Our goal is to have the City Media family mirror the diversity that makes our nation strong.
\r\nThe internship winners will work at one of our two speciality TV stations. The Connect station provides programming on regional events, while the emphasis at Transview is on instructional shows. Each intern will work in an entry-level position within an area that meets the requirements of the company and be paid at the opening rate set by the company for that position. If the assignment makes relocation necessary, a maximum $1,500 grant is provided to assist with these expenses.
\r\nInterested broadcasting applicants should provide evidence of full-time enrolment in the field of broadcasting at an accredited post-secondary institution. An official transcript from the educational institution is also required. Mature students may replace this transcript with a one-page typewritten statement of their goals. References from three teachers or employers will be necessary if the application proceeds.
\r\nOnce your application is accepted, you will receive a confirmation letter by mail from Personnel. The application is then referred to a Canada-wide panel of City Media employees. These individuals are familiar with the positions that would be considered a complementary fit with your stated career path. They will put together a shortlist of promising candidates and conduct an in-person or telephone interview. The type of interview will vary with the distance of each candidate. The hiring decisions of the panel are final.
\r\nIf a candidate is not eligible, the application will be removed from the competition, as will those whose applications and accompanying documents are received later than the deadline for submission. No exceptions can be made for delayed, lost or misdirected mail.
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'inputTexts in one ul',\r\n 'question': 'Questions 29 – 34',\r\n 'number': 6,\r\n 'description': 'Complete the notes. Write ONE WORD ONLY from the text in each gap.',\r\n 'title': 'CITY MEDIA INTERNSHIPS',\r\n 'className': 'inputTexts-in-one-ul',\r\n 'content': [\r\n {\r\n 'id': 29,\r\n 'answers': [\r\n '• Internships:
- allow minorities to gain
',\r\n 'and show their talents
'\r\n ]\r\n },\r\n {\r\n 'id': 30,\r\n 'answers': [\r\n '- further City Media’s aim to reflect the
',\r\n 'of people in Canada
• Internship at Transview focuses on educational broadcasting.
'\r\n ]\r\n },\r\n {\r\n 'id': 31,\r\n 'answers': [\r\n '• An additional amount of money is given if
',\r\n 'is required.
'\r\n ]\r\n },\r\n {\r\n 'id': 32,\r\n 'answers': [\r\n '• Support application with:
- proof of present
',\r\n 'in broadcasting studies
'\r\n ]\r\n },\r\n {\r\n 'id': 33,\r\n 'answers': [\r\n '- a
',\r\n 'issued by your school
• A panel decides which jobs are a good fit for each intern.
'\r\n ]\r\n },\r\n {\r\n 'id': 34,\r\n 'answers': [\r\n '• Interview method depends on
',\r\n '.
• Company strict about the deadline stated for applications.
'\r\n ]\r\n }\r\n ]\r\n }\r\n }\r\n];\r\n","import React, { Component } from 'react';\r\n\r\nclass HighlightNotes extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = this.getInitialState();\r\n }\r\n\r\n getInitialState() {\r\n return {\r\n noteVisibleId : [],\r\n noteDragging : undefined,\r\n contextMenu : {\r\n mode : \"\",\r\n pos : {}\r\n },\r\n mouseClickPos : {},\r\n highlightedRegionClickedId : \"\",\r\n highlightedRegionsCounter : 0,\r\n highlightedRegions : []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.addListenerLeftClick();\r\n this.addListenerRightClick();\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.testPageNumber !== this.state.testPageNumber) {\r\n // reset everything\r\n this.setState( this.getInitialState() )\r\n }\r\n }\r\n\r\n leftClickAction = (event) => {\r\n var _this = this;\r\n var selection = window.getSelection().getRangeAt(0);\r\n var parentEl = selection.commonAncestorContainer.parentNode;\r\n if (parentEl.classList.contains(\"isnote\")) {\r\n var id = parentEl.getAttribute(\"data-highlightedregion-id\");\r\n var noteVisibleId = _this.state.noteVisibleId;\r\n var idExisting = (_this.state.noteVisibleId.filter(VisibleId => VisibleId === id).length > 0) ? true : false;\r\n if (!idExisting) {\r\n noteVisibleId.push(id);\r\n }\r\n _this.setState({ noteVisibleId });\r\n }\r\n }\r\n\r\n addListenerLeftClick() {\r\n var el = document.getElementsByClassName(\"content\")[0];\r\n var el1 = document.getElementsByClassName(\"title\")[0];\r\n\r\n el.addEventListener('click', this.leftClickAction );\r\n el1.addEventListener('click', this.leftClickAction );\r\n }\r\n\r\n rightClickAction = (event) => {\r\n var _this = this;\r\n event.preventDefault();\r\n var selection = window.getSelection();\r\n\r\n if (selection.rangeCount > 0) {\r\n selection = selection.getRangeAt(0);\r\n var endContainer = selection.endContainer; // check start and end container to prevent cross paras and differnt tags including input highlight\r\n var startContainer = selection.startContainer;\r\n\r\n if (endContainer.wholeText === startContainer.wholeText) {\r\n var selectedText = selection.toString();\r\n var contextMenu = {\r\n mode: \"\",\r\n pos: {\r\n top: event.clientY,\r\n left: event.clientX\r\n }\r\n }\r\n var highlightedRegionClickedId = _this.getHighlightIdFromParents(selection.commonAncestorContainer.parentNode);\r\n if (highlightedRegionClickedId !== \"\") { // they clicked on an existing element.\r\n contextMenu.mode = \"existing\"\r\n } else if (selectedText !== \"\") {\r\n contextMenu.mode = \"new\"\r\n }\r\n _this.setState({ contextMenu, highlightedRegionClickedId : highlightedRegionClickedId });\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n addListenerRightClick() {\r\n var el = document.getElementsByClassName(\"content\")[0];\r\n var el1 = document.getElementsByClassName(\"title\")[0];\r\n\r\n el.addEventListener('contextmenu', this.rightClickAction, false);\r\n el1.addEventListener('contextmenu', this.rightClickAction, false);\r\n }\r\n\r\n getHighlightIdFromParents(elem) { // traverse up the tree until you find a .highlight (and return id) or until we reach .question (and stop)\r\n if (elem.nodeType === 1 && !elem.classList.contains(\"content\") && !elem.classList.contains(\"title\") && !elem.classList.contains(\"App\")) {\r\n if (elem.classList.contains(\"highlight\")) {\r\n return elem.getAttribute(\"data-highlightedregion-id\")\r\n } else if (elem.parentNode) { // we're not at the \".question\" element yet\r\n return this.getHighlightIdFromParents(elem.parentNode);\r\n }\r\n }\r\n return \"\";\r\n }\r\n\r\n\r\n dragNote_Start (event, note) {\r\n var noteDragging = note;\r\n var mouseClickPos = {\r\n offsetX: event.clientX - note.pos.left,\r\n offsetY: event.clientY - note.pos.top\r\n }\r\n this.setState({ mouseClickPos, noteDragging });\r\n }\r\n\r\n dragNote_Stop (event) {\r\n this.setState({ noteDragging: undefined });\r\n }\r\n dragNote_Move (event) {\r\n var noteDragging = this.state.noteDragging;\r\n if (noteDragging) {\r\n noteDragging.pos = {\r\n left: event.clientX - this.state.mouseClickPos.offsetX,\r\n top: event.clientY - this.state.mouseClickPos.offsetY\r\n };\r\n this.setState({ noteDragging });\r\n }\r\n }\r\n\r\n handleNoteClose(event, noteId) {\r\n var _this = this;\r\n var noteVisibleId = _this.state.noteVisibleId.filter(VisibleId => VisibleId !== noteId.toString());\r\n this.setState({ noteVisibleId });\r\n }\r\n\r\n handleNoteContentChange(event, note) {\r\n note.text = event.currentTarget.innerText;\r\n this.setState({ note });\r\n }\r\n\r\n handleContextMenuItemClick_Clear(event, clearAll) {\r\n var aHighlightedRegions = this.state.highlightedRegions;\r\n var i;\r\n if (clearAll) {\r\n aHighlightedRegions = [];\r\n var nodes = document.querySelectorAll(\".highlight\");\r\n for (i = 0; i < nodes.length; i++) {\r\n this.clearHighlight(nodes[i].getAttribute(\"data-highlightedregion-id\"));\r\n }\r\n this.setState({ noteVisibleId: [] });\r\n } else {\r\n for (i = 0; i < aHighlightedRegions.length; i++) {\r\n if (aHighlightedRegions[i].id.toString() === this.state.highlightedRegionClickedId) {\r\n aHighlightedRegions.splice(i,1);\r\n this.clearHighlight(this.state.highlightedRegionClickedId);\r\n break;\r\n }\r\n }\r\n this.setState({ noteVisibleId: this.state.noteVisibleId.filter(visibleId => visibleId !== this.state.highlightedRegionClickedId) });\r\n }\r\n this.setState({ contextMenu: { mode : \"\"}, highlightedRegions : aHighlightedRegions, highlightedRegionClickedId : \"\" })\r\n }\r\n\r\n handleContextMenuItemClick_Highlight(event) {\r\n this.createNewHighlightFromSelection(event);\r\n }\r\n\r\n handleContextMenuItemClick_Note(event) {\r\n var _this = this;\r\n if (this.state.highlightedRegionClickedId === \"\") { // it's a new note\r\n this.createNewHighlightFromSelection(event, true);\r\n } else {\r\n var node = document.querySelectorAll(\".highlight[data-highlightedregion-id='\" + this.state.highlightedRegionClickedId + \"']\")[0];\r\n node.classList.add(\"isnote\");\r\n var noteVisibleId = _this.state.noteVisibleId;\r\n var idExisting = (_this.state.noteVisibleId.filter(VisibleId => VisibleId === this.state.highlightedRegionClickedId).length > 0) ? true : false;\r\n if (!idExisting) {\r\n noteVisibleId.push(this.state.highlightedRegionClickedId);\r\n }\r\n\r\n this.setState({ contextMenu: { mode : \"\" }, noteVisibleId });\r\n }\r\n }\r\n\r\n createNewHighlightFromSelection(event, isNote) {\r\n var _this = this;\r\n var sNoteVisibleId = \"\";\r\n var highlightedRegions = this.state.highlightedRegions;\r\n var highlightedRegionsCounter = this.state.highlightedRegionsCounter;\r\n\r\n highlightedRegionsCounter += 1;\r\n\r\n // need to handle overlap\r\n var selection = window.getSelection().getRangeAt(0);\r\n var selectedText = selection.extractContents();\r\n var span = document.createElement(\"span\");\r\n span.classList.add(\"highlight\");\r\n if (isNote) {\r\n span.classList.add(\"isnote\");\r\n sNoteVisibleId = highlightedRegionsCounter.toString();\r\n }\r\n span.setAttribute(\"data-highlightedregion-id\", highlightedRegionsCounter);\r\n span.appendChild(selectedText);\r\n selection.insertNode(span);\r\n\r\n // add it to the array so we can keep track of them.\r\n highlightedRegions.push({\r\n id : highlightedRegionsCounter,\r\n note: {\r\n pos: this.state.contextMenu.pos\r\n }\r\n });\r\n\r\n window.getSelection().removeAllRanges();\r\n var noteVisibleId = _this.state.noteVisibleId;\r\n var idExisting = (_this.state.noteVisibleId.filter(VisibleId => VisibleId === sNoteVisibleId).length > 0) ? true : false;\r\n if (!idExisting) {\r\n noteVisibleId.push(sNoteVisibleId);\r\n }\r\n\r\n this.setState({ contextMenu : { mode : \"\" }, highlightedRegions, highlightedRegionsCounter, noteVisibleId });\r\n }\r\n\r\n clearHighlight(id) {\r\n var el = document.querySelectorAll(\".highlight[data-highlightedregion-id='\" + id + \"']\")[0];\r\n var parent = el.parentNode;\r\n while (el.firstChild) parent.insertBefore(el.firstChild, el);\r\n parent.removeChild(el);\r\n }\r\n\r\n handleClickOutside(event) {\r\n if (event.target === event.currentTarget) { // its a click on the actual element (not a child)\r\n this.setState({ contextMenu: { mode : \"\" } })\r\n }\r\n }\r\n\r\n renderNotes() {\r\n // TODO: loop through all the notes and output them\r\n return (\r\n\r\n {\r\n this.state.highlightedRegions.map((highlightedRegion) => {\r\n if (highlightedRegion.note) {\r\n\r\n var noteVisible = (this.state.noteVisibleId.filter(VisibleId => VisibleId === highlightedRegion.id.toString()).length > 0) ? \"visible\" : \"\";\r\n\r\n return (\r\n
\r\n )\r\n }\r\n\r\n render() {\r\n var cssClass = \"\";\r\n if (this.state.noteVisibleId.length > 0 || this.state.contextMenu.mode !== \"\") {\r\n cssClass += \"visible \";\r\n }\r\n var contextMenuClearMode = \"\";\r\n if (this.state.contextMenu.mode === \"existing\" && this.state.highlightedRegions.length > 0) {\r\n contextMenuClearMode = (this.state.highlightedRegions.length > 1) ? \"clear-all\" : \"clear-single\"\r\n }\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n return \"\"\r\n })\r\n }\r\n this.handleNoteClose(event, highlightedRegion.id)}>
\r\n this.dragNote_Start(event, highlightedRegion.note)}>
\r\n \r\n
\r\n this.handleNoteContentChange(event, highlightedRegion.note)}>\r\n
\r\n this.handleClickOutside(event)} onMouseUp={(event) => this.dragNote_Stop(event)} onMouseMove={(event) => this.dragNote_Move(event)} >\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default HighlightNotes;\r\n","import React, { Component } from 'react';\r\nimport ConfirmDetails from './pageContents/ConfirmDetails';\r\nimport Introductions from './pageContents/Introductions';\r\nimport Tests from './pageContents/Tests';\r\nimport ConfirmFinish from './pageContents/ConfirmFinish';\r\nimport { INTROS } from '../assets/content/intros';\r\nimport { TESTS } from '../assets/content/tests';\r\nimport HighlightNotes from '../components/staticComponents/HighlightNotes';\r\n\r\nclass MainContent extends Component {\r\n state = {\r\n answeredQuestion: [],\r\n storedAnswers: [],\r\n reviewModeNode: []\r\n }\r\n\r\n storeAnswersWhenTestUnmount = (answeredQuestion, storedAnswers, reviewModeNode) => {\r\n this.setState({ answeredQuestion, storedAnswers, reviewModeNode });\r\n }\r\n\r\n renderPageContent() {\r\n if (this.props.pageType === 'Intro') {\r\n switch(this.props.pageNumber) {\r\n case 1:\r\n return - \r\n
- this.handleContextMenuItemClick_Highlight(event) }>Highlight \r\n
- this.handleContextMenuItemClick_Note(event) }>Notes \r\n
- this.handleContextMenuItemClick_Clear(event) } title=\"Clears this highlighting\">Clear \r\n
- this.handleContextMenuItemClick_Clear(event, true) } title=\"Clears all highlighting on this page\">Clear all \r\n
\r\n {this.props.pageType === 'Tests' &&
\r\n );\r\n }\r\n}\r\n\r\nexport default MainContent;\r\n","import React, { Component } from 'react';\r\nimport './App.scss';\r\nimport './components/components.scss';\r\nimport './containers/containers.scss';\r\nimport './containers/pageContents/pageContent.scss';\r\nimport './components/staticComponents/popups.scss';\r\nimport './components/staticComponents/HighlightNotes.scss';\r\nimport Banner from './containers/Banner';\r\nimport MainContent from './containers/MainContent';\r\n\r\nclass App extends Component {\r\n state = {\r\n pageType: 'Intro',\r\n pageNumber: 1,\r\n testEnd: false\r\n };\r\n\r\n renderNextPage = () => {\r\n this.setState({ pageNumber: this.state.pageNumber + 1 });\r\n if (this.state.pageNumber === 2) {\r\n this.setState({ pageType: 'Tests' });\r\n } else if (this.state.pageNumber === 9) {\r\n this.setState({ pageType: 'End' });\r\n }\r\n }\r\n\r\n renderPreviousPage = () => {\r\n this.setState({ pageNumber: this.state.pageNumber - 1 });\r\n }\r\n\r\n TestsPageJump = (page) => {\r\n if (page) {\r\n this.setState({ pageNumber: page });\r\n }\r\n }\r\n\r\n forceEndTest = () => {\r\n this.setState({ pageNumber: 4, pageType: 'End', testEnd: true });\r\n }\r\n\r\n startReviewAnswers = () => {\r\n this.setState({ pageNumber: 3, pageType: 'Tests' });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default App;\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.1/8 is considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport function register(config) {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Let's check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl, config);\r\n\r\n // Add some additional logging to localhost, pointing developers to the\r\n // service worker/PWA documentation.\r\n navigator.serviceWorker.ready.then(() => {\r\n console.log(\r\n 'This web app is being served cache-first by a service ' +\r\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n );\r\n });\r\n } else {\r\n // Is not localhost. Just register service worker\r\n registerValidSW(swUrl, config);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW(swUrl, config) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n if (installingWorker == null) {\r\n return;\r\n }\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the updated precached content has been fetched,\r\n // but the previous service worker will still serve the older\r\n // content until all client tabs are closed.\r\n console.log(\r\n 'New content is available and will be used when all ' +\r\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n );\r\n\r\n // Execute callback\r\n if (config && config.onUpdate) {\r\n config.onUpdate(registration);\r\n }\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n\r\n // Execute callback\r\n if (config && config.onSuccess) {\r\n config.onSuccess(registration);\r\n }\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl, config) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl)\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n const contentType = response.headers.get('content-type');\r\n if (\r\n response.status === 404 ||\r\n (contentType != null && contentType.indexOf('javascript') === -1)\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl, config);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { DragDropContextProvider } from 'react-dnd';\r\nimport HTML5Backend from 'react-dnd-html5-backend';\r\nimport './index.css';\r\nimport App from './App';\r\nimport * as serviceWorker from './serviceWorker';\r\n\r\nReactDOM.render(\r\n