\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 IELTSAcademicReadingChoiceAccordion from '../../../assets/images/popups/taskhelp/IELTS-AcademicReading-ChoiceAccordion.png';\r\nimport IELTSAcademicReadingMultiChoice from '../../../assets/images/popups/taskhelp/IELTS-AcademicReading-MultiChoice.png';\r\nimport IELTSAcademicReadingGapFill from '../../../assets/images/popups/taskhelp/IELTS-AcademicReading-GapFill.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\nimport IELTSAcademicReadingDragDrop1 from '../../../assets/images/popups/taskhelp/IELTS-AcademicReading-DragDrop1.png';\r\nimport IELTSAcademicReadingDragDrop2 from '../../../assets/images/popups/taskhelp/IELTS-AcademicReading-DragDrop2.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 === 3) {\r\n targetId = 'task-help-1';\r\n } else if (pageNumber === 2) {\r\n targetId = 'task-help-2';\r\n } else if (pageNumber === 4 || pageNumber === 8 || pageNumber === 9 || pageNumber === 10) {\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 in an accordion
\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\nMultiple choice questions where there is more than one answer
\r\nSome questions may ask you to select two or three options. Please make sure you read the instructions and questions carefully.
\r\nClick on the answers you think are 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 a question, click in the gap and write your answer. Some questions may ask you to write your answer in a table, flow-chart or diagram.
\r\nMatching questions using a table
\r\nTo select a question, click on the question number in the table. The column will become shaded.
\r\nSelect the correct option by clicking on a 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\nDrag and drop questions
\r\nTo answer a question, click on the answer and move it into the gap.
\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 to see all the Reading text and all the questions.
\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 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 TextArea from './TextArea';\r\n\r\nclass Answers extends Component {\r\n\r\n renderAnswerContent() {\r\n if (this.props.answers.type === 'radios') {\r\n return (\r\n Word Count: {this.state.wordCount}
\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: 5,\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\r\n if (this.props.testPageNumber === 2) {\r\n if (chosenId === 5) {\r\n this.setState({ chooseQForCheckbox: 5 });\r\n } else {\r\n this.setState({ chooseQForCheckbox: 7 });\r\n }\r\n this.setState({ chosenQuestion: chosenId });\r\n } else {\r\n this.setState({ chosenQuestion: chosenId });\r\n }\r\n }\r\n\r\n checkAnsweredQuestion = (questionId, answersStatus) => {\r\n const answeredQuestion = [...this.state.answeredQuestion];\r\n const questionAnswered = answersStatus.filter(checked => checked === true);\r\n if (this.props.testPageNumber === 2) {\r\n if (questionId === 5) {\r\n if (questionAnswered.length === 0) {\r\n answeredQuestion[4] = false; answeredQuestion[5] = false;\r\n } else if (questionAnswered.length === 1) {\r\n answeredQuestion[4] = true; answeredQuestion[5] = false;\r\n } else {\r\n answeredQuestion[4] = true; answeredQuestion[5] = true;\r\n }\r\n } else {\r\n if (questionAnswered.length === 0) {\r\n answeredQuestion[6] = false; answeredQuestion[7] = false;\r\n } else if (questionAnswered.length === 1) {\r\n answeredQuestion[6] = true; answeredQuestion[7] = false;\r\n } else {\r\n answeredQuestion[6] = true; answeredQuestion[7] = true;\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 this.setState({ answeredQuestion });\r\n }\r\n\r\n renderReviewNode = () => {\r\n const reviewModeNode = [...this.state.reviewModeNode];\r\n if (this.props.testPageNumber === 2) {\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 === 2) {\r\n this.setState({ chooseQForCheckbox: this.state.chooseQForCheckbox + 1 }, () => {\r\n if (this.state.chooseQForCheckbox === 5 || this.state.chooseQForCheckbox === 6) {\r\n this.setState({ chosenQuestion: 5 });\r\n } else if (this.state.chooseQForCheckbox === 7 || this.state.chooseQForCheckbox === 8) {\r\n this.setState({ chosenQuestion: 6 });\r\n } else if (this.state.chooseQForCheckbox > 8) {\r\n this.props.renderNextPage();\r\n this.setState({ chosenQuestion: 9, chooseQForCheckbox: 8 });\r\n }\r\n });\r\n } else if (this.props.testPageNumber === 5) {\r\n this.setState({ chosenQuestion: this.state.chosenQuestion + 1 }, () => {\r\n if (this.state.chosenQuestion > (this.props.test.question.content[0].id + this.props.test.answer.number - 1)) {\r\n this.props.renderNextPage();\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 === 10) {\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 === 2) {\r\n this.setState({ chooseQForCheckbox: this.state.chooseQForCheckbox - 1 }, () => {\r\n this.setState({ chosenQuestion: 5 });\r\n if (this.state.chooseQForCheckbox === 5 || this.state.chooseQForCheckbox === 6) {\r\n this.setState({ chosenQuestion: 5 });\r\n } else if (this.state.chooseQForCheckbox === 7 || this.state.chooseQForCheckbox === 8) {\r\n this.setState({ chosenQuestion: 6 });\r\n } else if (this.state.chooseQForCheckbox < 5) {\r\n this.props.renderPreviousPage();\r\n this.setState({ chosenQuestion: 4, chooseQForCheckbox: 5 });\r\n }\r\n });\r\n } else if (this.props.testPageNumber === 5) {\r\n this.setState({ chosenQuestion: this.state.chosenQuestion - 1 }, () => {\r\n if (this.state.chosenQuestion < this.props.test.question.content[0].id) {\r\n this.props.renderPreviousPage();\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 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 === 2) {\r\n const qArray = [5, 6, 7, 8];\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 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
\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 Academic 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 41 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': 'Sample Academic Reading Multiple Choice (one answer)',\r\n 'question': {\r\n 'title': '',\r\n 'content': `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\nThe general assumption is that older workers are paid more in spite of, rather than because of, their productivity. That might partly explain why, when employers are under pressure to cut costs, they persuade a 55-year old to take early retirement. Take away seniority-based pay scales, and older workers may become a much more attractive employment proposition. But most employers and many workers are uncomfortable with the idea of reducing someone’s pay in later life – although manual workers on piece-rates often earn less as they get older. So retaining the services of older workers may mean employing them in different ways.
\r\nOne innovation was devised by IBM Belgium. Faced with the need to cut staff costs, and having decided to concentrate cuts on 55 to 60-year olds, IBM set up a separate company called Skill Team, which re-employed any of the early retired who wanted to go on working up to the age of 60. An employee who joined Skill Team at the age of 55 on a five-year contract would work for 58% of his time, over the full period, for 88% of his last IBM salary. The company offered services to IBM, thus allowing it to retain access to some of the intellectual capital it would otherwise have lost.
\r\nThe best way to tempt the old to go on working may be to build on such ‘bridge’ jobs: part-time or temporary employment that creates a more gradual transition from full-time work to retirement. Studies have found that, in the United States, nearly half of all men and women who had been in full-time jobs in middle age moved into such ‘bridge’ jobs at the end of their working lives. In general, it is the best-paid and worst-paid who carry on working. There seem to be two very different types of bridge job-holder – those who continue working because they have to and those who continue working because they want to, even though they could afford to retire.
\r\nIf the job market grows more flexible, the old may find more jobs that suit them. Often, they will be self-employed. Sometimes, they may start their own businesses: a study by David Storey of Warwick University found that in Britain 70% of businesses started by people over 55 survived, compared with an overall national average of only 19%. But whatever pattern of employment they choose, in the coming years the skills of these ‘grey workers’ will have to be increasingly acknowledged and rewarded.
`\r\n },\r\n 'answer': {\r\n 'type': 'radios',\r\n 'question': 'Questions 1 – 4',\r\n 'number': 4,\r\n 'description': 'Choose the correct answer.',\r\n 'title': '',\r\n 'content': [\r\n {\r\n 'id': 1,\r\n 'question': '1In paragraph one, the writer suggests that companies could consider',\r\n 'answers': [\r\n {'id': 1, 'content': 'abolishing pay schemes that are based on age.'},\r\n {'id': 2, 'content': 'avoiding pay that is based on piece-rates.'},\r\n {'id': 3, 'content': 'increasing pay for older workers.'},\r\n {'id': 4, 'content': 'equipping older workers with new skills.'}\r\n ]\r\n },\r\n {\r\n 'id': 2,\r\n 'question': '2Skill Team is an example of a company which',\r\n 'answers': [\r\n {'id': 1, 'content': 'offers older workers increases in salary.'},\r\n {'id': 2, 'content': 'allows people to continue working for as long as they want.'},\r\n {'id': 3, 'content': 'allows the expertise of older workers to be put to use.'},\r\n {'id': 4, 'content': 'treats older and younger workers equally.'}\r\n ]\r\n },\r\n {\r\n 'id': 3,\r\n 'question': \"3According to the writer, 'bridge' jobs\",\r\n 'answers': [\r\n {'id': 1, 'content': 'tend to attract people in middle-salary ranges.'},\r\n {'id': 2, 'content': 'are better paid than some full-time jobs.'},\r\n {'id': 3, 'content': 'originated in the United States.'},\r\n {'id': 4, 'content': 'appeal to distinct groups of older workers.'}\r\n ]\r\n },\r\n {\r\n 'id': 4,\r\n 'question': '4David Storey’s study found that',\r\n 'answers': [\r\n {'id': 1, 'content': 'people demand more from their work as they get older.'},\r\n {'id': 2, 'content': 'older people are good at running their own businesses.'},\r\n {'id': 3, 'content': 'an increasing number of old people are self-employed.'},\r\n {'id': 4, 'content': 'few young people have their own businesses.'}\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 2,\r\n 'title': 'Sample Academic Reading Multiple Choice (more than one answer)',\r\n 'question': {\r\n 'title': '',\r\n 'content': `Clearly, when older people do heavy physical work, their age may affect their productivity. But other skills may increase with age, including many that are crucial for good management, such as an ability to handle people diplomatically, to run a meeting or to spot a problem before it blows up. Peter Hicks, who co-ordinates OECD* work on the policy implications of ageing, says that plenty of research suggests older people are paid more because they are worth more.
\r\nAnd the virtues of the young may be exaggerated. ‘The few companies that have kept on older workers find they have good judgement and their productivity is good,’ says Peter Peterson, author of a recent book on the impact of ageing. ‘Besides, their education standards are much better than those of today’s young high-school graduates.’ Companies may say that older workers are not worth training because they are reaching the end of their working lives; in fact, young people tend to switch jobs so frequently that they offer the worst returns on training. The median age for employer-driven training is the late 40s and early 50s, and this training goes mainly to managers.
\r\n* OECD: Organisation for Economic Co-operation and Development
`\r\n },\r\n 'answer': {\r\n 'type': 'checkboxes',\r\n 'question': 'Questions 5 – 6 and 7 – 8',\r\n 'number': 4,\r\n 'description': 'Choose TWO correct answers.',\r\n 'title': '',\r\n 'content': [\r\n {\r\n 'id': 5,\r\n 'question': `5 – 6 The list below gives some of the advantages of employing older workers.\r\n Which TWO advantages are mentioned by the writer of the text?`,\r\n 'answers': [\r\n {'id': 1, 'content': 'They are less likely to be involved in careless accidents.'},\r\n {'id': 2, 'content': 'They can predict areas that may cause trouble in the future.'},\r\n {'id': 3, 'content': 'They are able to train younger workers.'},\r\n {'id': 4, 'content': 'They can deal with unexpected problems.'},\r\n {'id': 5, 'content': 'They are more conscientious.'},\r\n {'id': 6, 'content': 'They are prepared to work for lower salaries.'},\r\n {'id': 7, 'content': 'They are more skilled in personal relationships.'}\r\n ]\r\n },\r\n {\r\n 'id': 6,\r\n 'question': `7 – 8 The list below gives some of the disadvantages of employing younger workers.
\r\n Which TWO disadvantages are mentioned by the writer of the text?`,\r\n 'answers': [\r\n {'id': 1, 'content': 'They are too confident of their own skills.'},\r\n {'id': 2, 'content': 'They may injure themselves.'},\r\n {'id': 3, 'content': 'They do not stay with the same company for very long.'},\r\n {'id': 4, 'content': 'Their training has been too theoretical.'},\r\n {'id': 5, 'content': 'They are not as well educated as older workers.'},\r\n {'id': 6, 'content': 'They demand higher salaries.'}\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 3,\r\n 'title': 'Sample Academic Reading Identifying Information (True/False/Not Given)',\r\n 'question': {\r\n 'title': 'The life and work of Marie Curie',\r\n 'content': `
Marie Curie is probably the most famous woman scientist who has ever lived. Born Maria Sklodowska in Poland in 1867, she is famous for her work on radioactivity, and was twice a winner of the Nobel Prize. With her husband, Pierre Curie, and Henri Becquerel, she was awarded the 1903 Nobel Prize for Physics, and was then sole winner of the 1911 Nobel Prize for Chemistry. She was the first woman to win a Nobel Prize.
\r\nFrom childhood, Marie was remarkable for her prodigious memory, and at the age of 16 won a gold medal on completion of her secondary education. Because her father lost his savings through bad investment, she then had to take work as a teacher. From her earnings she was able to finance her sister Bronia’s medical studies in Paris, on the understanding that Bronia would, in turn, later help her to get an education.
\r\nIn 1891 this promise was fulfilled and Marie went to Paris and began to study at the Sorbonne (the University of Paris). She often worked far into the night and lived on little more than bread and butter and tea. She came first in the examination in the physical sciences in 1893, and in 1894 was placed second in the examination in mathematical sciences. It was not until the spring of that year that she was introduced to Pierre Curie.
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'radios',\r\n 'question': 'Questions 9 – 11',\r\n 'number': 3,\r\n 'description': 'Choose TRUE if the statement agrees with the information given in the text, choose FALSE if the statement contradicts the information, or choose NOT GIVEN if there is no information on this.',\r\n 'title': '',\r\n 'content': [\r\n {\r\n 'id': 9,\r\n 'question': '9Marie Curie’s husband was a joint winner of both Marie’s Nobel Prizes.',\r\n 'answers': [\r\n {'id': 1, 'content': 'TRUE'},\r\n {'id': 2, 'content': 'FALSE'},\r\n {'id': 3, 'content': 'NOT GIVEN'}\r\n ]\r\n },\r\n {\r\n 'id': 10,\r\n 'question': '10Marie became interested in science when she was a child.',\r\n 'answers': [\r\n {'id': 1, 'content': 'TRUE'},\r\n {'id': 2, 'content': 'FALSE'},\r\n {'id': 3, 'content': 'NOT GIVEN'}\r\n ]\r\n },\r\n {\r\n 'id': 11,\r\n 'question': \"11Marie was able to attend the Sorbonne because of her sister’s financial contribution.\",\r\n 'answers': [\r\n {'id': 1, 'content': 'TRUE'},\r\n {'id': 2, 'content': 'FALSE'},\r\n {'id': 3, 'content': 'NOT GIVEN'}\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 4,\r\n 'title': 'Sample Academic Reading Reading Note Completion',\r\n 'question': {\r\n 'title': '',\r\n 'content': `The marriage of Pierre and Marie Curie in 1895 marked the start of a partnership that was soon to achieve results of world significance. Following Henri Becquerel’s discovery in 1896 of a new phenomenon, which Marie later called ‘radioactivity’, Marie Curie decided to find out if the radioactivity discovered in uranium was to be found in other elements. She discovered that this was true for thorium.
\r\n\r\n
Turning her attention to minerals, she found her interest drawn to pitchblende, a mineral whose radioactivity, superior to that of pure uranium, could be explained only by the presence in the ore of small quantities of an unknown substance of very high activity. Pierre Curie joined her in the work that she had undertaken to resolve this problem, and that led to the discovery of the new elements, polonium and radium. While Pierre Curie devoted himself chiefly to the physical study of the new radiations, Marie Curie struggled to obtain pure radium in the metallic state. This was achieved with the help of the chemist André-Louis Debierne, one of Pierre Curie’s pupils. Based on the results of this research, Marie Curie received her Doctorate of Science, and in 1903 Marie and Pierre shared with Becquerel the Nobel Prize for Physics for the discovery of radioactivity.
\r\nThe births of Marie’s two daughters, Irène and Eve, in 1897 and 1904 failed to interrupt her scientific work. She was appointed lecturer in physics at the École Normale Supérieure for girls in Sèvres, France (1900), and introduced a method of teaching based on experimental demonstrations. In December 1904 she was appointed chief assistant in the laboratory directed by Pierre Curie.
\r\nThe sudden death of her husband in 1906 was a bitter blow to Marie Curie, but was also a turning point in her career: henceforth she was to devote all her energy to completing alone the scientific work that they had undertaken. On May 13, 1906, she was appointed to the professorship that had been left vacant on her husband’s death, becoming the first woman to teach at the Sorbonne. In 1911 she was awarded the Nobel Prize for Chemistry for the isolation of a pure form of radium.
\r\nDuring World War I, Marie Curie, with the help of her daughter Irène, devoted herself to the development of the use of X-radiography, including the mobile units which came to be known as ‘Little Curies’, used for the treatment of wounded soldiers. In 1918 the Radium Institute, whose staff Irène had joined, began to operate in earnest, and became a centre for nuclear physics and chemistry. Marie Curie, now at the highest point of her fame and, from 1922, a member of the Academy of Medicine, researched the chemistry of radioactive substances and their medical applications.
\r\nIn 1921, accompanied by her two daughters, Marie Curie made a triumphant journey to the United States to raise funds for research on radium. Women there presented her with a gram of radium for her campaign. Marie also gave lectures in Belgium, Brazil, Spain and Czechoslovakia and, in addition, had the satisfaction of seeing the development of the Curie Foundation in Paris, and the inauguration in 1932 in Warsaw of the Radium Institute, where her sister Bronia became director.
\r\nOne of Marie Curie’s outstanding achievements was to have understood the need to accumulate intense radioactive sources, not only to treat illness but also to maintain an abundant supply for research. The existence in Paris at the Radium Institute of a stock of 1.5 grams of radium made a decisive contribution to the success of the experiments undertaken in the years around 1930. This work prepared the way for the discovery of the neutron by Sir James Chadwick and, above all, for the discovery in 1934 by Irène and Frédéric Joliot-Curie of artificial radioactivity. A few months after this discovery, Marie Curie died as a result of leukaemia caused by exposure to radiation. She had often carried test tubes containing radioactive isotopes in her pocket, remarking on the pretty blue-green light they gave off.
\r\nHer contribution to physics had been immense, not only in her own work, the importance of which had been demonstrated by her two Nobel Prizes, but because of her influence on subsequent generations of nuclear physicists and chemists.
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'inputTexts in paragraphs',\r\n 'question': 'Questions 12 – 17',\r\n 'number': 6,\r\n 'description': 'Complete the notes. Write ONE WORD from the text in each gap.',\r\n 'title': \"Marie Curie's research on radioactivity\",\r\n 'className': 'with-bullets-points',\r\n 'content': [\r\n {\r\n 'id': 12,\r\n 'answers': [\r\n 'When uranium was discovered to be radioactive, Marie Curie found that the element called ',\r\n 'had the same property.'\r\n ]\r\n },\r\n {\r\n 'id': 13,\r\n 'answers': [\r\n 'Marie and Pierre Curie’s research into the radioactivity of the mineral known as ',\r\n 'led to the discovery of two new elements.'\r\n ]\r\n },\r\n {\r\n 'id': 14,\r\n 'answers': [\r\n 'In 1911, Marie Curie received recognition for her work on the element ',\r\n '.'\r\n ]\r\n },\r\n {\r\n 'id': 15,\r\n 'answers': [\r\n 'Marie and Irène Curie developed X-radiography which was used as a medical technique for ',\r\n '.'\r\n ]\r\n },\r\n {\r\n 'id': 16,\r\n 'answers': [\r\n 'Marie Curie saw the importance of collecting radioactive material both for research and for cases of ',\r\n '.'\r\n ]\r\n },\r\n {\r\n 'id': 17,\r\n 'answers': [\r\n 'The radioactive material stocked in Paris contributed to the discoveries in the 1930s of the ',\r\n 'and of what was known as artificial radioactivity.'\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 5,\r\n 'questionType': 'drop in answer part',\r\n 'title': 'Sample Academic Reading Matching Headings',\r\n 'question': {\r\n 'title': 'The Physics of Traffic Behavior',\r\n 'type': 'drop target',\r\n 'className': 'drop-target',\r\n 'content': [\r\n {\r\n 'id': 18,\r\n 'question': `Some years ago, when several theoretical physicists, principally Dirk Helbing and Boris Kerner of Stuttgart, Germany, began publishing papers on traffic flow in publications normally read by traffic engineers, they were clearly working outside their usual sphere of investigation. They had noticed that if they simulated the movement of vehicles on a highway, using the equations that describe how the molecules of a gas move, some very strange results emerged. Of course, vehicles do not behave exactly like gas molecules: for example, drivers try to avoid collisions by slowing down when they get too near another vehicle, whereas gas molecules have no such concern. However, the physicists modified the equations to take the differences into account and the overall description of traffic as a flowing gas has proved to be a very good one; the moving-gas model of traffic reproduces many phenomena seen in real-world traffic.
\r\nThe strangest thing that came out of these equations, however, was the implication that congestion can arise completely spontaneously; no external causes are necessary. Vehicles can be flowing freely along, at a density still well below what the road can handle, and then suddenly gel into a slow-moving ooze. Under the right conditions a brief and local fluctuation in the speed or the distance between vehicles is all it takes to trigger a system-wide breakdown that persists for hours. In fact, the physicists’ analysis suggested such spontaneous breakdowns in traffic flow probably occur quite frequently on highways.
\r\nDramatic effects can result from small changes in traffic just as in nature
\r\nThough a decidedly unsettling discovery, this showed striking similarities to the phenomena popularized as ‘chaos theory’. This theory has arisen from the understanding that in any complex interacting system which is made of many parts, each part affects the others. Consequently, tiny variations in one part of a complex system can grow in huge but unpredictable ways. This type of dramatic change from one state to another is similar to what happens when a chemical substance changes from a vapor to a liquid. It often happens that water in a cloud remains as a gas even after its temperature and density have reached the point where it could condense into water droplets. However, if the vapor encounters a solid surface, even something as small as a speck of dust, condensation can take place and the transition from vapor to liquid finally occurs. Helbing and Kerner see traffic as a complex interacting system. They found that a small fluctuation in traffic density can act as the ‘speck of dust’ causing a sudden change from freely moving traffic to synchronized traffic, when vehicles in all lanes abruptly slow down and start moving at the same speed, making passing impossible.
\r\n `\r\n },\r\n {\r\n 'id': 19,\r\n 'question': 'The physicists have challenged proposals to set a maximum capacity for vehicles on highways. They argue that it may not be enough simply to limit the rate at which vehicles are allowed to enter a highway, rather, it may be necessary to time each vehicle’s entry onto a highway precisely to coincide with a temporary drop in the density of vehicles along the road. The aim of doing this would be to smooth out any possible fluctuations in the road conditions that can trigger a change in traffic behavior and result in congestion. They further suggest that preventing breakdowns in the flow of traffic could ultimately require implementing the radical idea that has been suggested from time to time: directly regulating the speed and spacing of individual cars along a highway with central computers and sensors that communicate with each car’s engine and brake controls.
'\r\n },\r\n {\r\n 'id': 20,\r\n 'question': 'However, research into traffic control is generally centered in civil engineering departments and here the theories of the physicists have been greeted with some skepticism. Civil engineers favor a practical approach to problems and believe traffic congestion is the result of poor road construction (two lanes becoming one lane or dangerous curves), which constricts the flow of traffic. Engineers questioned how well the physicists’ theoretical results relate to traffic in the real world. Indeed, some engineering researchers questioned whether elaborate chaos-theory interpretations are needed at all, since at least some of the traffic phenomena the physicists’ theories predicted seemed to be similar to observations that had been appearing in traffic engineering literature under other names for years; observations which had straightforward cause-and-effect explanations.
'\r\n },\r\n {\r\n 'id': 21,\r\n 'question': 'James Banks, a professor of civil and environmental engineering at San Diego State University in the US, suggested that a sudden slowdown in traffic may have less to do with chaos theory than with driver psychology. As traffic gets heavier and the passing lane gets more crowded, aggressive drivers move to other lanes to try to pass, which also tends to even out the speed between lanes. He also felt that another leveling force is that when a driver in a fast lane brakes a little to maintain a safe distance between vehicles, the shock wave travels back much more rapidly than it would in the other slower lanes, because each following driver has to react more quickly. Consequently, as a road becomes congested, the faster moving traffic is the first to slow down.
'\r\n }\r\n ]\r\n },\r\n 'answer': {\r\n 'type': 'dragNDrop',\r\n 'question': 'Questions 18 – 21',\r\n 'number': 4,\r\n 'description': 'The text has five sections. Choose the correct heading for each section and move it into the gap. The heading for one section has already been selected.',\r\n 'title': \"List of Headings\",\r\n 'className': 'big-text-drag',\r\n 'content': '',\r\n 'dragItems': [\r\n 'How a maths experiment actually reduced traffic congestion',\r\n 'How a concept from one field of study was applied in another',\r\n 'A lack of investment in driver training',\r\n 'Areas of doubt and disagreement between experts',\r\n 'How different countries have dealt with traffic congestion',\r\n 'The impact of driver behavior on traffic speed',\r\n 'A proposal to take control away from the driver',\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 6,\r\n 'questionType': 'drop in answer part',\r\n 'title': 'Sample Academic Reading Matching Sentence Endings',\r\n 'question': {\r\n 'title': 'Science in 16th-century London',\r\n 'content': `The Jewel House, a new book by historical researcher and author Deborah Harkness.
\r\nDeborah Harkness devotes her elegant and erudite new book, The Jewel House, to the scientific community in 16th-century London. She (rightly) argues that it is thanks to the imaginative collective efforts of the urban scientists that London became the melting pot in which a new mathematical and experimental culture crystallized.
\r\nHarkness is known for her ingenuity as a researcher and her historical empathy. In The Jewel House, Harkness turns her skills on the city of London as a whole with surprising and fascinating results. She began her research by asking herself a new question: not what caused scientific revolution but what the names science and scientist meant in 16th-century London. Then she collected a vast range of sources, from printed books to scientific instruments and notebooks, and recorded, in a relational database, information on the men and women who produced them.
\r\nEvery chapter of The Jewel House charts the activities of a particular community. Harkness leads us through the streets of London, showing us, neighborhood by neighborhood, where the major forms of natural knowledge found homes. For example, apothecaries settled in Lime Street, in what is now the City, where they created a dense network of shops and gardens. Clockmakers, both native craftsmen and many from overseas, clustered in several parishes near St Paul’s Cathedral. The once wealthy merchant, Clement Draper, even managed to transform the King’s Bench prison in Southwark, where he served time as a debtor, into a center of research and discussion. By the end of the book Harkness has mapped London’s scientific communities with astonishing precision.
\r\nMoreover, when Harkness reconstructs these groups, she provides not traditional, static accounts of their theories, but dynamic analyses of their practices as these developed over time. In many cases, she makes clear, the alchemists of Elizabethan London already understood that knowledge of nature had to rest not on authority but on familiarity through practice.
\r\nIn one crucial respect, Harkness argues, many of the 16th-century London scientists differed from the later ones of the 17th century. They saw themselves less as individuals out to gain fame, than as members of larger textual communities bent on exchanging and compiling information. The passages in which Harkness analyzes the 16th-century practices of note-taking and communication are among the most novel and informative in this fine book. She shows that they adopted the textual information processing methods of humanist scholarship to radically new ends.
\r\nIn this book, Harkness has charted the local and cosmopolitan worlds of science in Elizabethan London with a learning, precision and intelligence that compel admiration. Moreover, she has crafted a complex and effective new analytical mechanism which may transform the practices of historians of early modern science.
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'dragNDrop',\r\n 'question': 'Questions 22 – 24',\r\n 'number': 3,\r\n 'description': 'Complete each sentence with the correct ending. Choose the correct ending and move it into the gap.',\r\n 'title': \"\",\r\n 'className': '',\r\n 'content': [\r\n {\r\n 'id': 22,\r\n 'answers': 'Harkness’s research method was different to that of other writers because'\r\n },\r\n {\r\n 'id': 23,\r\n 'answers': 'Harkness’s reconstruction of the 16th-century London scientific groups was new because'\r\n },\r\n {\r\n 'id': 24,\r\n 'answers': 'Harkness shows that the 16th-century London scientists were innovative because'\r\n }\r\n ],\r\n 'dragItems': [\r\n 'she has the greatest knowledge of Elizabethan London.',\r\n 'she started by seeking to understand how basic terms were used in the past.',\r\n 'they worked as individuals rather than as a group.',\r\n 'she examined how their methods evolved and changed.',\r\n 'Clement Draper was the best scientist of his time.',\r\n 'they used old ways of analysing written information for new purposes.',\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 7,\r\n 'questionType': 'drop in answer part',\r\n 'title': 'Sample Academic Reading Summary Completion (selecting from a list of words or phrases)',\r\n 'question': {\r\n 'title': \"'This Marvellous Invention'\",\r\n 'content': `Of all mankind’s manifold creations, language must take pride of place. Other inventions – the wheel, agriculture, sliced bread – may have transformed our material existence, but the advent of language is what made us human. Compared to language, all other inventions pale in significance, since everything we have ever achieved depends on language and originates from it. Without language, we could never have embarked on our ascent to unparalleled power over\r\n all other animals, and even over nature itself.
\r\nBut language is foremost not just because it came first. In its own right it is a tool of extraordinary sophistication, yet based on an idea of ingenious simplicity: ‘this marvellous invention of composing out of twenty-five or thirty sounds that infinite variety of expressions which, whilst having in themselves no likeness to what is in our mind, allow us to disclose to others its whole secret, and to make known to those who cannot penetrate it all that we imagine, and all the various stirrings of our soul’. This was how, in 1660, the renowned French grammarians of the Port-Royal abbey near Versailles distilled the essence of language, and no one since has celebrated more eloquently the magnitude of its achievement. Even so, there is just one flaw in all these hymns of praise, for the homage to language’s unique accomplishment conceals a simple yet critical incongruity. Language is mankind’s greatest invention – except, of course, that it was never invented. This apparent paradox is at the core of our fascination with language, and it holds many of its secrets.
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'dragNDrop',\r\n 'question': 'Questions 25 – 28',\r\n 'number': 4,\r\n 'description': 'Complete the summary using the list of words. Choose the correct word and move it into the gap.',\r\n 'title': '',\r\n 'className': 'drop-content-inline',\r\n 'content': [\r\n {\r\n 'id': 25,\r\n 'answers': 'The wheel is one invention that has had a major impact on'\r\n },\r\n {\r\n 'id': 26,\r\n 'answers': ' aspects of life, but no impact has been as'\r\n },\r\n {\r\n 'id': 27,\r\n 'answers': ' as that of language. Language is very'\r\n },\r\n {\r\n 'id': 28,\r\n 'answers': ' , yet composed of just a small number of sounds.Language appears to be'\r\n }\r\n ],\r\n 'dragItems': [\r\n 'difficult',\r\n 'complex',\r\n 'original',\r\n 'admired',\r\n 'material',\r\n 'easy',\r\n 'fundamental'\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 8,\r\n 'title': 'Sample Academic Reading Summary Completion (selecting words from the text)',\r\n 'question': {\r\n 'title': '',\r\n 'content': `
The instructions accompanying do-it-yourself products are regularly cited as a source of unnecessary expense or frustration. Few companies seem to test their instructions by having them followed by a first-time user. Often, essential information is omitted, steps in the construction process are taken for granted, and some degree of special knowledge is assumed. This is especially worrying in any fields where failure to follow correct procedures can be dangerous.
\r\nObjections to material in plain English have come mainly from the legal profession. Lawyers point to the risk of ambiguity inherent in the use of everyday language for legal or official documents, and draw attention to the need for confidence in legal formulations, which can come only from using language that has been tested in courts over the course of centuries. The campaigners point out that there has been no sudden increase in litigation as a consequence of the increase in plain English materials.
\r\nSimilarly, professionals in several different fields have defended their use of technical and complex language as being the most precise means of expressing technical or complex ideas. This is undoubtedly true: scientists, doctors, bankers and others need their jargon in order to communicate with each other succinctly and unambiguously. But when it comes to addressing the non-specialist consumer, the campaigners argue, different criteria must apply.
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'inputTexts in one paragraph',\r\n 'question': 'Questions 29 – 33',\r\n 'number': 5,\r\n 'description': 'Complete the summary. Write NO MORE THAN TWO WORDS from the text in each gap.',\r\n 'title': '',\r\n 'className': 'input-with-paragraph',\r\n 'content': [\r\n {\r\n 'id': 29,\r\n 'answers': [\r\n 'Consumers often complain that they experience a feeling of ',\r\n 'when trying to put together do-it-yourself products which have not been tested by companies on a '\r\n ]\r\n },\r\n {\r\n 'id': 30,\r\n 'answers': [\r\n ' ',\r\n '. In situations where not keeping to the correct procedures could affect safety issues, it is especially important that '\r\n ]\r\n },\r\n {\r\n 'id': 31,\r\n 'answers': [\r\n ' ',\r\n 'information is not left out and no assumptions are made about a stage being self-evident or the consumer having a certain amount of '\r\n ]\r\n },\r\n {\r\n 'id': 32,\r\n 'answers': [\r\n ' ',\r\n '.Lawyers, however, have raised objections to the use of plain English. They feel that it would result in ambiguity in documents and cause people to lose faith in '\r\n ]\r\n },\r\n {\r\n 'id': 33,\r\n 'answers': [\r\n ' ',\r\n ' , as it would mean departing from language that has been used in the courts for a very long time.'\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 9,\r\n 'title': 'Sample Academic Reading Sentence Completion',\r\n 'question': {\r\n 'title': 'The origins of birds',\r\n 'content': `
The science of evolutionary relationships has undergone a major change in recent decades. It used to be the case that all the features of organisms were important in working out their family tree. But following the work of German entomologist Willi Hennig, many evolutionary scientists now believe that the only features which carry any useful information are the evolutionary 'novelties' shared between organisms. Mice, lizards and fish, for example, all have backbones – so the feature 'backbone' tells us nothing about their evolutionary relationship. But the feature 'four legs' is useful because it's an evolutionary novelty – a characteristic shared only between the lizard and the mouse. This would suggest that the lizard and mouse are more closely related to each other than either is to the fish. This revolutionary approach is called cladistics, and it has been central to the idea that birds evolved from dinosaurs.
\r\nThe 'birds are dinosaurs' theory was first developed by English palaeontologist Thomas Huxley (1825–1895). According to some accounts, one evening Huxley went to dinner still thinking about a mystery dinosaur bone in his lab. He knew he was dealing with the lower leg bone (tibia) of a meat-eating, two-legged dinosaur belonging to the classification known as theropods, but attached to the tibia was an unidentified extra bone. On the menu that evening was quail, a small bird similar to a pheasant, and Huxley noticed the same strange bone, attached to the quail tibia on his plate. He later realised that it was in fact the bird's anklebone. More importantly, Huxley concluded that its forms in both dinosaur and bird skeletons were so similar that they must be closely related.
\r\nHuxley's idea fell out of favour for fifty years following the 1916 publication of The Origin of Birds by the Danish doctor Gerhard Heilmann. During this time, Heilmann’s theory was widely accepted. Heilmann had noted that two-legged, meat-eating dinosaurs lacked collarbones. In later evolutionary stages these bones fuse together to form the distinctive 'Y'-shaped bone in a bird's neck, known as the furcula. Heilmann proposed the notion that such a feature could not be lost and then re-evolve at a later date, so dinosaurs could not be the ancestors of birds.
\r\nThen, in the late 1960s, John Ostrom from Yale University in the USA, noted 22 features in the skeletons of meat-eating dinosaurs that were also found in birds and nowhere else. This reset the thinking on bird ancestry and once again Huxley’s ideas caught the attention of the scientific community. Subsequent work has found up to 85 characteristics that tie dinosaurs and birds together. But what of Heilmann's missing bones? It turns out that not only did many dinosaurs have collarbones, these were also fused together into a furcula. Unfortunately for Heilmann, the fossil evidence was somewhat lacking in his day, and the few furculae that had been found were misidentified, usually as belly ribs.
\r\nUS ornithologist Alan Feduccia and palaeontologist Larry Martin are two vocal opponents of the dinosaur theory. They contend that birds evolved from some unknown reptile at a time long before dinosaurs. Their reasoning is that flight is most likely to have started from a tree-climbing ancestor, yet all the proposed dinosaurian ancestors were ground-dwellers. But the dino-bird supporters contend that an unknown dinosaurian bird-ancestor could have been tree-dwelling, or that birds evolved flight from the ground up by chasing and leaping after insects. Most of Feduccia and Martin's case against the 'birds-are-dinosaurs' hypothesis is based on differences between birds and dinosaurs. Supporters of cladistics, however, maintain that differences between organisms do not matter, as it is the similarities between them that count. Evolution dictates that organisms will change through time, so it is only the features which persist that carry useful information about their origins.
\r\nMost people on either side of the debate do accept, however, that the ancient winged creature known as Archaeopteryx is an ancestor of today’s birds. This is in spite of the fact that its form is distinctly non-bird-like, with a long bony tail, and teeth instead of a beak. The 'birds-are-dinosaurs' supporters contend that, if clearly-preserved feathers had not been found alongside two of the seven Archaeopteryx specimens, it would probably have been identified as a small dinosaur. However, Archaeopteryx does have some bird-like features, such as a furcula and bird-like feet, that suggest that it is too bird-like to be considered a dinosaur.
\r\nOver the last few decades several dinosaurs with bird-like features and primitive birds with dinosaur-like features have been found in several countries, connecting Archaeopteryx back to dinosaurs, and forwards to modern birds. Sinosauropteryx, excavated from 130-million-year-old rocks in northeast China, is one example. It has a dinosaur skeleton surrounded by a halo of fuzz, thought to be primitive feathers. And a reassessment of other dinosaurs reveals such bird-like features as hollow bones and a foot with three functional toes, characteristics that appeared over 50 million years before Archaeopteryx took to the air. And Rahonavis, a primitive bird from Madagascar is more bird-like than Archaeopteryx, yet retains some distinctive dinosaur features, including a long and vicious claw at the end of its wing. Over a century since Huxley's discovery, it seems that cladistics may have finally settled the 'dino-bird' debate.
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'inputTexts in paragraphs',\r\n 'question': 'Questions 34 – 38',\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': 34,\r\n 'answers': [\r\n 'Huxley formulated his theory while studying a dinosaur belonging to a group called ',\r\n '.'\r\n ]\r\n },\r\n {\r\n 'id': 35,\r\n 'answers': [\r\n 'Heilmann rejected Huxley’s theory because of the apparent absence of ',\r\n 'in dinosaurs.'\r\n ]\r\n },\r\n {\r\n 'id': 36,\r\n 'answers': [\r\n 'Feduccia and Martin believe that the ancestor of today’s birds was a kind of early ',\r\n '.'\r\n ]\r\n },\r\n {\r\n 'id': 37,\r\n 'answers': [\r\n 'In cladistics, the ',\r\n 'between organisms’ characteristics are of major importance.'\r\n ]\r\n },\r\n {\r\n 'id': 38,\r\n 'answers': [\r\n 'The dangerous ',\r\n 'on a primitive bird from Madagascar adds weight to the ‘dino-bird’ argument.'\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 10,\r\n 'title': 'Sample Academic Reading Flow-chart Completion (selecting words from the text)',\r\n 'className': '',\r\n 'question': {\r\n 'title': 'How a prototype caloric-restriction mimetic works',\r\n 'content': `No treatment on the market today has been proved to slow human aging. But one intervention, consumption of a low-calorie* yet nutritionally balanced diet, works incredibly well in a broad range of animals, increasing longevity and prolonging good health. Those findings suggest that caloric restriction could delay aging and increase longevity in humans, too. But what if someone could create a pill that mimicked the physiological effects of eating less without actually forcing people to eat less, a 'caloric-restriction mimetic'?
\r\nThe best-studied candidate for a caloric-restriction mimetic, 2DG (2-deoxy-D-glucose), works by interfering with the way cells process glucose. It has proved toxic at some doses in animals and so cannot be used in humans. But it has demonstrated that chemicals can replicate the effects of caloric restriction; the trick is finding the right one.
\r\nCells use the glucose from food to generate ATP (adenosine triphosphate), the molecule that powers many activities in the body. By limiting food intake, caloric restriction minimizes the amount of glucose entering cells and decreases ATP generation. When 2DG is administered to animals that eat normally, glucose reaches cells in abundance but the drug prevents most of it from being processed and thus reduces ATP synthesis. Researchers have proposed several explanations for why interruption of glucose processing and ATP production might retard aging. One possibility relates to the ATP-making machinery’s emission of free radicals, which are thought to contribute to aging and to such age-related diseases as cancer by damaging cells. Reduced operation of the machinery should limit their production and thereby constrain the damage. Another hypothesis suggests that decreased processing of glucose could indicate to cells that food is scarce (even if it isn’t) and induce them to shift into an anti-aging mode that emphasizes preservation of the organism over such ‘luxuries’ as growth and reproduction.
\r\n\r\n
*calorie: a measure of the energy value of food
\r\n `\r\n },\r\n 'answer': {\r\n 'type': 'inputTexts in an image',\r\n 'question': 'Questions 39 – 41',\r\n 'number': 3,\r\n 'description': 'Complete the flow-chart. Write NO MORE THAN TWO WORDS from the text in each gap.',\r\n 'title': 'How a caloric-restriction mimetic works',\r\n 'className': 'inputs-in-image',\r\n 'content': [\r\n {\r\n 'id': 39,\r\n 'focusText': ['less', 'is processed']\r\n },\r\n {\r\n 'id': 40,\r\n 'focusText': ['fewer', 'are emitted']\r\n },\r\n {\r\n 'id': 41,\r\n 'focusText': ['cells focus on', 'because']\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 === 12) {\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