\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default AudioPlay;\r\n","import React from 'react';\r\nimport Button from '../Button';\r\n\r\nconst HideButtonPopup = ({ toggleHidePopup }) => {\r\n return (\r\n \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\nimport ScreenVolume from '../../../assets/images/popups/testhelp/screenVolume.png';\r\n\r\n\r\nconst TestHelp = () => {\r\n return (\r\n INSTRUCTIONS TO CANDIDATES
\r\n- \r\n
- Answer all the 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
- There are four parts to the test. \r\n
- Please note you will only hear each part once in your actual test. However for familiarisation and practice purposes, this familiarisation test will allow you to listen to each recording multiple times. \r\n
- For each part of the test there will be time for you to look through the questions and time for you to check your answers. \r\n
\r\n 
\r\n 
\r\n \r\n\t\t\t
\r\n 
\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\n\r\nexport default TestHelp;\r\n","import React, { Component } from 'react';\r\nimport IELTSListeningGapFill from '../../../assets/images/popups/taskhelp/IELTS-Listening-GapFill.png';\r\nimport IELTSListeningDragDrop1 from '../../../assets/images/popups/taskhelp/IELTS-Listening-DragDrop1.png';\r\nimport IELTSListeningDragDrop2 from '../../../assets/images/popups/taskhelp/IELTS-Listening-DragDrop2.png';\r\nimport IELTSListeningChoice from '../../../assets/images/popups/taskhelp/IELTS-Listening-Choice.png';\r\nimport IELTSListeningMultiChoice from '../../../assets/images/popups/taskhelp/IELTS-Listening-MultiChoice.png';\r\nimport IELTSListeningTableMatch from '../../../assets/images/popups/taskhelp/IELTS-Listening-TableMatch.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) {\r\n targetId = 'task-help-1';\r\n } else if (pageNumber === 2) {\r\n targetId = 'task-help-2';\r\n } else if (pageNumber === 3) {\r\n targetId = 'task-help-3';\r\n } else if (pageNumber === 4) {\r\n targetId = 'task-help-4';\r\n } else if (pageNumber === 5 || pageNumber === 6) {\r\n targetId = 'task-help-5';\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
Volume
\r\nIf you want to change the volume of the Listening test, click on the volume slider.
\r\nNavigation
\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
\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\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, flow-chart 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 to see all the questions and answers.
\r\nMultiple choice questions
\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 choose two or three answers. 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\nMatching questions using a table
\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\n\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 AudioPlay from '../components/AudioPlay';\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, playTestSound } = 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 && pageNumber !== 2) &&\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 {(pageNumber !== 1 && pageNumber !== 10) &&\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 from 'react';\r\nimport Button from '../../components/Button';\r\nimport Hint from '../../components/Hint';\r\n\r\nconst TestSound = ({ handleClick, updatePlayTestSound, testSoundBtn }) => {\r\n return (\r\n {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
\r\n );\r\n}\r\n\r\nexport default TestSound;\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; iTest sound
\r\n\r\n
\r\n Put on your headphones and click on the Play sound button to play a sample sound.
\r\n \r\n- toggleQuestion(questionId)}\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 {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\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.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 Word Count: {this.state.wordCount}
\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\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\nimport TableInputs from './TableInputs';\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 \r\n \r\n
\r\n )\r\n } else {\r\n return (\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 && }\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: 4,\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 + 3);\r\n }\r\n if (this.props.testPageNumber === 2) {\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 let answeredQuestion = [...this.state.answeredQuestion], chooseQForCheckbox;\r\n const questionAnswered = answersStatus.filter(checked => checked === true);\r\n\r\n if (this.props.testPageNumber === 2) {\r\n if (questionId === 4) {\r\n if (questionAnswered.length === 0) {\r\n answeredQuestion[3] = false;\r\n answeredQuestion[4] = false;\r\n answeredQuestion[5] = false;\r\n chooseQForCheckbox = 4;\r\n } else if (questionAnswered.length === 1) {\r\n answeredQuestion[3] = true;\r\n answeredQuestion[4] = false;\r\n answeredQuestion[5] = false;\r\n chooseQForCheckbox = (this.state.chooseQForCheckbox > 4) ? this.state.chooseQForCheckbox: 4;\r\n } else if (questionAnswered.length === 2) {\r\n answeredQuestion[3] = true;\r\n answeredQuestion[4] = true;\r\n answeredQuestion[5] = false;\r\n chooseQForCheckbox = (this.state.chooseQForCheckbox > 5) ? this.state.chooseQForCheckbox: 5;\r\n } else if (questionAnswered.length === 3) {\r\n answeredQuestion[3] = true;\r\n answeredQuestion[4] = true;\r\n answeredQuestion[5] = true;\r\n chooseQForCheckbox = 6;\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 > 2) {\r\n chooseQForCheckbox = 6;\r\n } else {\r\n chooseQForCheckbox = 4;\r\n }\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 === 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 > 6) {\r\n this.props.renderNextPage();\r\n this.setState({ chosenQuestion: 7, chooseQForCheckbox: 6 });\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 === 6) {\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: 4 });\r\n if (this.state.chooseQForCheckbox < 4) {\r\n this.props.renderPreviousPage();\r\n this.setState({ chosenQuestion: 3, chooseQForCheckbox: 4 });\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 = [4 , 5 , 6];\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\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 {test.question &&\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 Listening',\r\n 'time': 'Approximately 30 minutes',\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 24 questions in this test.',\r\n 'Each question carries one mark.',\r\n 'There are four parts to the test.',\r\n 'Please note you will only hear each part once in your actual test. However for familiarisation and practice purposes, this familiarisation test will allow you to listen to each recording multiple times.',\r\n 'For each part of the test there will be time for you to look through the questions and time for you to check your answers.'\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 Listening Multiple Choice (one answer)',\r\n 'answer': {\r\n 'type': 'radios',\r\n 'question': 'Questions 1 – 3',\r\n 'number': 3,\r\n 'description': 'Choose the correct answer.',\r\n 'title': '',\r\n 'content': [\r\n {\r\n 'id': 1,\r\n 'question': '1Why did Judy choose to study the East End of London?',\r\n 'answers': [\r\n {'id': 1, 'content': 'She wanted to understand her own background.'},\r\n {'id': 2, 'content': 'She was interested in place names.'},\r\n {'id': 3, 'content': 'She had read several books about it.'}\r\n ]\r\n },\r\n {\r\n 'id': 2,\r\n 'question': '2What was Judy’s main source of materials?',\r\n 'answers': [\r\n {'id': 1, 'content': 'books'},\r\n {'id': 2, 'content': 'newspapers'},\r\n {'id': 3, 'content': 'interviews'}\r\n ]\r\n },\r\n {\r\n 'id': 3,\r\n 'question': \"3What difficulty did Judy have with her dissertation?\",\r\n 'answers': [\r\n {'id': 1, 'content': 'writing the first draft'},\r\n {'id': 2, 'content': 'organising what she had collected'},\r\n {'id': 3, 'content': 'finding enough relevant sources'}\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 2,\r\n 'title': 'Sample Listening Multiple Choice (more than one answer)',\r\n 'answer': {\r\n 'type': 'checkboxes',\r\n 'question': 'Questions 4 – 6',\r\n 'number': 3,\r\n 'description': 'Choose THREE correct answers.',\r\n 'title': '',\r\n 'content': [\r\n {\r\n 'id': 4,\r\n 'question': `4 – 6 Which THREE things does the Guide to the Library have information about?`,\r\n 'answers': [\r\n {'id': 1, 'content': 'book reservations'},\r\n {'id': 2, 'content': 'reading room rules'},\r\n {'id': 3, 'content': 'catalogue'},\r\n {'id': 4, 'content': 'disabled facilities'},\r\n {'id': 5, 'content': 'location of rooms'},\r\n {'id': 6, 'content': 'café'},\r\n {'id': 7, 'content': 'regular events'},\r\n {'id': 8, 'content': 'staff'}\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 3,\r\n 'questionType': 'drop in answer part',\r\n 'title': 'Sample Listening Matching (Sample Task A)',\r\n 'answer': {\r\n 'type': 'dragNDrop',\r\n 'question': 'Questions 7 – 11',\r\n 'number': 5,\r\n 'description': 'Who is responsible for each area? Choose the correct answer and move it into the gap.',\r\n 'title': \"People\",\r\n 'className': 'listening',\r\n 'content': [\r\n {\r\n 'id': 7,\r\n 'answers': 'Mary Brown'\r\n },\r\n {\r\n 'id': 8,\r\n 'answers': 'John Stevens'\r\n },\r\n {\r\n 'id': 9,\r\n 'answers': 'Alison Jones'\r\n },\r\n {\r\n 'id': 10,\r\n 'answers': 'Tim Smith'\r\n },\r\n {\r\n 'id': 11,\r\n 'answers': 'Jenny James'\r\n }\r\n ],\r\n 'dragItems': [\r\n 'Finance',\r\n 'Food',\r\n 'Health',\r\n \"Kid's Counselling\",\r\n 'Organisation',\r\n 'Rooms',\r\n 'Sport',\r\n 'Trips'\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 4,\r\n 'title': 'Sample Listening Plan/Map/Diagram Labelling',\r\n 'answer': {\r\n 'type': 'table inputs',\r\n 'question': 'Questions 12 – 14',\r\n 'number': 3,\r\n 'description': 'The map has eight labels (A – H). Choose the correct label for each building.',\r\n 'title': '',\r\n 'className': 'table-inputs',\r\n 'content': [\r\n {\r\n 'id': 12,\r\n 'answers': 'Quilt Shop'\r\n },\r\n {\r\n 'id': 13,\r\n 'answers': 'Handicrafts Museum'\r\n },\r\n {\r\n 'id': 14,\r\n 'answers': 'School House'\r\n }\r\n ],\r\n answersIndex: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],\r\n }\r\n },\r\n {\r\n 'page': 5,\r\n 'title': 'Sample Listening (Note Completion)',\r\n 'answer': {\r\n 'type': 'inputTexts in paragraphs',\r\n 'question': 'Questions 15 – 21',\r\n 'number': 7,\r\n 'description': 'Complete the notes. Write ONE WORD AND/OR A NUMBER in each gap.',\r\n 'title': \"Phone call about second-hand furniture\",\r\n 'className': 'without-bullets-points',\r\n 'content': [\r\n {\r\n 'id': 15,\r\n 'answers': [\r\n '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\nItems
Dining table- ',\r\n ' shape- medium size'\r\n ]\r\n },\r\n {\r\n 'id': 16,\r\n 'answers': [\r\n '- ',\r\n ' old- £25.00'\r\n ]\r\n },\r\n {\r\n 'id': 17,\r\n 'answers': [\r\n 'Dining chairs- set of ',\r\n ' chairs'\r\n ]\r\n },\r\n {\r\n 'id': 18,\r\n 'answers': [\r\n '- seats covered in ',\r\n ' material'\r\n ]\r\n },\r\n {\r\n 'id': 19,\r\n 'answers': [\r\n '- in ',\r\n ' condition- £20.00'\r\n ]\r\n },\r\n {\r\n 'id': 20,\r\n 'answers': [\r\n 'Desk- length: ',\r\n ''\r\n ]\r\n },\r\n {\r\n 'id': 21,\r\n 'answers': [\r\n '- 3 drawers. Top drawer has a ',\r\n '- £50.00'\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n 'page': 6,\r\n 'title': 'Sample Listening Short Answer Questions',\r\n 'answer': {\r\n 'type': 'inputTexts in paragraphs',\r\n 'question': 'Questions 22 – 24',\r\n 'number': 3,\r\n 'description': 'Answer the questions. Write ONE WORD ONLY in each gap.List THREE types of staff that Pacific Clothing want to recruit at present.',\r\n 'title': '',\r\n 'className': 'with-bullets-points',\r\n 'content': [\r\n {\r\n 'id': 22,\r\n 'answers': [\r\n ' ',\r\n ]\r\n },\r\n {\r\n 'id': 23,\r\n 'answers': [\r\n ' '\r\n ]\r\n },\r\n {\r\n 'id': 24,\r\n 'answers': [\r\n ' '\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 TestSound from './pageContents/TestSound';\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 playTestSound: false,\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 === 3) {\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: 4, pageType: 'Tests' });\r\n }\r\n\r\n updatePlayTestSound = () => {\r\n this.setState({ playTestSound: !this.state.playTestSound });\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