{message}
\r\n } else {\r\n switch (action) {\r\n case LoginActions.Login:\r\n return (Processing login
);\r\n case LoginActions.LoginCallback:\r\n return (Processing login callback
);\r\n case LoginActions.Profile:\r\n case LoginActions.Register:\r\n return ();\r\n default:\r\n throw new Error(`Invalid action '${action}'`);\r\n }\r\n }\r\n }\r\n\r\n async login(returnUrl) {\r\n const state = { returnUrl };\r\n const result = await authService.signIn(state);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n break;\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(returnUrl);\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(`Invalid status result ${result.status}.`);\r\n }\r\n }\r\n\r\n async processLoginCallback() {\r\n const url = window.location.href;\r\n const result = await authService.completeSignIn(url);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n // There should not be any redirects as the only time completeSignIn finishes\r\n // is when we are doing a redirect sign in flow.\r\n throw new Error('Should not redirect.');\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(this.getReturnUrl(result.state));\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(`Invalid authentication result status '${result.status}'.`);\r\n }\r\n }\r\n\r\n getReturnUrl(state) {\r\n const params = new URLSearchParams(window.location.search);\r\n const fromQuery = params.get(QueryParameterNames.ReturnUrl);\r\n if (fromQuery && !fromQuery.startsWith(`${window.location.origin}/`)) {\r\n // This is an extra check to prevent open redirects.\r\n throw new Error(\"Invalid return url. The return url needs to have the same origin as the current page.\")\r\n }\r\n return (state && state.returnUrl) || fromQuery || `${window.location.origin}/`;\r\n }\r\n\r\n redirectToRegister() {\r\n this.redirectToApiAuthorizationPath(`${ApplicationPaths.IdentityRegisterPath}?${QueryParameterNames.ReturnUrl}=${encodeURI(ApplicationPaths.Login)}`);\r\n }\r\n\r\n redirectToProfile() {\r\n this.redirectToApiAuthorizationPath(ApplicationPaths.IdentityManagePath);\r\n }\r\n\r\n redirectToApiAuthorizationPath(apiAuthorizationPath) {\r\n const redirectUrl = `${window.location.origin}${apiAuthorizationPath}`;\r\n // It's important that we do a replace here so that when the user hits the back arrow on the\r\n // browser he gets sent back to where it was on the app instead of to an endpoint on this\r\n // component.\r\n window.location.replace(redirectUrl);\r\n }\r\n\r\n navigateToReturnUrl(returnUrl) {\r\n // It's important that we do a replace here so that we remove the callback uri with the\r\n // fragment containing the tokens from the browser history.\r\n window.location.replace(returnUrl);\r\n }\r\n}\r\n","import React from 'react'\r\nimport { Component } from 'react';\r\nimport authService from './AuthorizeService';\r\nimport { AuthenticationResultStatus } from './AuthorizeService';\r\nimport { QueryParameterNames, LogoutActions, ApplicationPaths } from './ApiAuthorizationConstants';\r\n\r\n// The main responsibility of this component is to handle the user's logout process.\r\n// This is the starting point for the logout process, which is usually initiated when a\r\n// user clicks on the logout button on the LoginMenu component.\r\nexport class Logout extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n message: undefined,\r\n isReady: false,\r\n authenticated: false\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const action = this.props.action;\r\n switch (action) {\r\n case LogoutActions.Logout:\r\n if (!!window.history.state.state.local) {\r\n this.logout(this.getReturnUrl());\r\n } else {\r\n // This prevents regular links to {message}
);\r\n } else {\r\n const action = this.props.action;\r\n switch (action) {\r\n case LogoutActions.Logout:\r\n return (Processing logout
);\r\n case LogoutActions.LogoutCallback:\r\n return (Processing logout callback
);\r\n case LogoutActions.LoggedOut:\r\n return ({message}
);\r\n default:\r\n throw new Error(`Invalid action '${action}'`);\r\n }\r\n }\r\n }\r\n\r\n async logout(returnUrl) {\r\n const state = { returnUrl };\r\n const isauthenticated = await authService.isAuthenticated();\r\n if (isauthenticated) {\r\n const result = await authService.signOut(state);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n break;\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(returnUrl);\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(\"Invalid authentication result status.\");\r\n }\r\n } else {\r\n this.setState({ message: \"You successfully logged out!\" });\r\n }\r\n }\r\n\r\n async processLogoutCallback() {\r\n const url = window.location.href;\r\n const result = await authService.completeSignOut(url);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n // There should not be any redirects as the only time completeAuthentication finishes\r\n // is when we are doing a redirect sign in flow.\r\n throw new Error('Should not redirect.');\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(this.getReturnUrl(result.state));\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(\"Invalid authentication result status.\");\r\n }\r\n }\r\n\r\n async populateAuthenticationState() {\r\n const authenticated = await authService.isAuthenticated();\r\n this.setState({ isReady: true, authenticated });\r\n }\r\n\r\n getReturnUrl(state) {\r\n const params = new URLSearchParams(window.location.search);\r\n const fromQuery = params.get(QueryParameterNames.ReturnUrl);\r\n if (fromQuery && !fromQuery.startsWith(`${window.location.origin}/`)) {\r\n // This is an extra check to prevent open redirects.\r\n throw new Error(\"Invalid return url. The return url needs to have the same origin as the current page.\")\r\n }\r\n return (state && state.returnUrl) ||\r\n fromQuery ||\r\n `${window.location.origin}${ApplicationPaths.LoggedOut}`;\r\n }\r\n\r\n navigateToReturnUrl(returnUrl) {\r\n return window.location.replace(returnUrl);\r\n }\r\n}\r\n","import React, { Component, Fragment } from 'react';\r\nimport { Route } from 'react-router';\r\nimport { Login } from './Login'\r\nimport { Logout } from './Logout'\r\nimport { ApplicationPaths, LoginActions, LogoutActions } from './ApiAuthorizationConstants';\r\n\r\nexport default class ApiAuthorizationRoutes extends Component {\r\n\r\n render () {\r\n return(\r\n \r\n {/* */}\r\n \r\n \r\n {this.exercise.espText}\r\n \r\n ![{this.exercise.images[0].ruText}]({this.exercise.images[0].img})
this.onImageClick(e, 0)} className=\"image6Lst\" />\r\n ![{this.exercise.images[1].ruText}]({this.exercise.images[1].img})
this.onImageClick(e, 1)} className=\"image6Lst\" />\r\n ![{this.exercise.images[2].ruText}]({this.exercise.images[2].img})
this.onImageClick(e, 2)} className=\"image6Lst\" />\r\n ![{this.exercise.images[3].ruText}]({this.exercise.images[3].img})
this.onImageClick(e, 3)} className=\"image6Lst\" />\r\n ![{this.exercise.images[4].ruText}]({this.exercise.images[4].img})
this.onImageClick(e, 4)} className=\"image6Lst\" />\r\n ![{this.exercise.images[5].ruText}]({this.exercise.images[5].img})
this.onImageClick(e, 5)} className=\"image6Lst\" />\r\n
\r\n )\r\n }\r\n\r\n render() {\r\n let contents = this.state.loading\r\n ? {this.exercise.images[0].ruText}
{this.exercise.images[1].ruText}
{this.exercise.images[2].ruText}
{this.exercise.images[3].ruText}
{this.exercise.images[4].ruText}
{this.exercise.images[5].ruText}
Loading exercise...
\r\n : this.renderImages();\r\n\r\n return (\r\n\r\n {contents}\r\n
\r\n );\r\n }\r\n\r\n loadAllImages(exercises) {\r\n console.log(\"image lading\")\r\n exercises.forEach((exercise) => {\r\n const img0 = new Image();\r\n img0.src = exercise.images[0];\r\n console.log(exercise.images[0]);\r\n\r\n const img1 = new Image();\r\n img1.src = exercise.images[1];\r\n console.log(exercise.images[1]);\r\n\r\n const img2 = new Image();\r\n img2.src = exercise.images[2];\r\n console.log(exercise.images[2]);\r\n\r\n\r\n const img3 = new Image();\r\n img3.src = exercise.images[3];\r\n console.log(exercise.images[3]);\r\n\r\n\r\n const img4 = new Image();\r\n img4.src = exercise.images[4];\r\n console.log(exercise.images[4]);\r\n\r\n const img5 = new Image();\r\n img5.src = exercise.images[5];\r\n console.log(exercise.images[5]);\r\n });\r\n }\r\n\r\n async populateData() {\r\n const token = await authService.getAccessToken();\r\n const response = await fetch('api/exercise/' + this.exerciseId, {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n const data = await response.json();\r\n this.exercises = this.shuffle(data);\r\n this.exercise = this.shufleExercise(this.exercises[0]);\r\n this.state = { excerciseNmb: 0 };\r\n this.setState({\r\n loading: false\r\n });\r\n }\r\n}\r\n\r\n\r\n","import React from 'react';\r\nimport authService from './api-authorization/AuthorizeService';\r\nimport \"./SentenceContructor.css\";\r\n\r\nconst Brick = ({ brick, index, exNumber, dragBrick, doubleClick, ...props }) => {\r\n return (\r\n Loading exercise (sentence contructor)...
\r\n : this.renderSentence();\r\n return (\r\n\r\n {contents}\r\n
\r\n );\r\n }\r\n\r\n renderSentence() {\r\n return (\r\n \r\n \r\n {this.state.exercise.bricks.map((brick, index) => (\r\n\r\n
\r\n {this.state.isHelpViewMode === true ?\r\n this.renderHelp() : <>}\r\n\r\n\r\n {this.state.exercise.ruSentence}
\r\n \r\n {this.state.exercise.words.map((word, index) =>\r\n this.isEmptyBreakStr(word) ? (\r\n \r\n {this.userTagToUnderline ? word : \"________\"}\r\n
\r\n ) : (\r\n \r\n {word}\r\n
\r\n )\r\n )}\r\n \r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n showHelp = (event) => {\r\n if (this.state.isHelpViewMode === true) return;\r\n this.setState({ isHelpViewMode: true });\r\n console.log(\"showHelp\");\r\n }\r\n\r\n hideHelp = (event) => {\r\n if (this.state.isHelpViewMode === false) return;\r\n this.setState({ isHelpViewMode: false });\r\n console.log(\"hideHelp\");\r\n }\r\n\r\n renderHelp() {\r\n let wordsLst = this.state.exercise.espSentence.split(' ');\r\n //console.log(wordsLst);\r\n return (\r\n \r\n {wordsLst.map((word, index) => (\r\n\r\n
\r\n );\r\n }\r\n\r\n async populateData() {\r\n const token = await authService.getAccessToken();\r\n const response = await fetch('api/exercise/' + this.exerciseId, {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n const data = await response.json();\r\n this.exercises = data;\r\n this.wordDivRefs = this.getRefArrayWithMaxLenForTheExercise(this.exercises);\r\n this.setState({ exercise: this.exercises[0] });\r\n this.setState({ excerciseNmb: 0 });\r\n this.setState({ loading: false });\r\n }\r\n}","import React from 'react';\r\nimport authService from './api-authorization/AuthorizeService';\r\nimport \"./StatementByVoice.css\";\r\n\r\nconst StatementTagsFromString = ({ statement, stmtNmb, taskNmb, regisrageMyRef, ...props }) => {\r\n var str = statement.statement;\r\n var strParts = str.split('*').filter((val) => val !== '');\r\n return (\r\n \r\n {word}\r\n
\r\n ))}\r\n \r\n {strParts.map((part, index) =>\r\n <>{part}\r\n
\r\n
\r\n )\r\n}\r\n\r\nconst StatementCombobox = ({ opts, optionIndex, curKey, regisrageMyRef, ...props }) => {\r\n const ref = React.createRef();\r\n let contents = (opts.length <= optionIndex) ? <>\r\n :\r\n ();\r\n regisrageMyRef(curKey, ref);\r\n return (\r\n <>\r\n {contents}\r\n \r\n )\r\n}\r\n\r\nexport default class StatementByVoice extends React.Component {\r\n constructor(props) {\r\n super();\r\n this.parent = props.parentComponent;\r\n this.exerciseId = props.exerciseId;\r\n this.audioRef = React.createRef();\r\n this.exercises = null;\r\n this.state = {\r\n loading: true,\r\n excerciseNmb: 0,\r\n exercise: null\r\n };\r\n this.resultsMap = null;\r\n this.cbxMap = null;\r\n }\r\n\r\n regisrageMyRef = (curKey, ref) => {\r\n console.log(\"REGISRATE!!!!!\" + curKey)\r\n console.log(ref);\r\n if (this.cbxMap === null)\r\n this.cbxMap = new Map();\r\n this.cbxMap.set(curKey, ref);\r\n }\r\n\r\n\r\n btnCheckClick = (event) => {\r\n\r\n this.getRightAnswersMap(this.state.exercise);\r\n console.log(\"CHECK_START!!!!!!!!!!!!!!!!!!!!!\");\r\n console.log(this.resultsMap);\r\n console.log(this.cbxMap);\r\n\r\n if (this.resultsMap === null || this.cbxMap === null)\r\n alert(\"ERROR: Map is empty!\");\r\n let badAnswersCbxArray = [];\r\n this.resultsMap.forEach((value, key, map) => {\r\n //value===this.cbxMap.get(key).\r\n console.log(\"KEY: \" + key + \";VALUE:\" + value);\r\n console.log(this.cbxMap.get(key));\r\n let ref = this.cbxMap.get(key);\r\n let n = ref.current.options.selectedIndex;\r\n let text = ref.current.options[n].text;\r\n console.log(text);\r\n if (text !== value)\r\n badAnswersCbxArray.push(ref);\r\n });\r\n\r\n if (badAnswersCbxArray.length === 0) {\r\n this.cbxMap = new Map();\r\n this.resultsMap = new Map();\r\n this.btnNextClick();\r\n }\r\n else {\r\n let msg = \"\";\r\n badAnswersCbxArray.map((ref, index) => msg = msg + index + \". \" + ref.current.options[ref.current.options.selectedIndex].text + \"; \");\r\n alert(msg);\r\n }\r\n }\r\n\r\n getRightAnswersMap = (exercise) => {\r\n this.resultsMap = new Map();\r\n const taskNmb = this.state.excerciseNmb;\r\n // exercise.statements.map((statement, stmtNmb) => {\r\n // statement.answers.map((answer, optionIndex) => {\r\n // this.resultsMap.set(taskNmb + '_statement' + stmtNmb + '_option' + optionIndex, answer);\r\n // })\r\n // })\r\n\r\n exercise.statements.forEach((statement, stmtNmb) => {\r\n statement.answers.forEach((answer, optionIndex) => {\r\n this.resultsMap.set(taskNmb + '_statement' + stmtNmb + '_option' + optionIndex, answer);\r\n })\r\n })\r\n }\r\n\r\n onPlay(audioRef) {\r\n if (this.state.loading === true)\r\n return;\r\n audioRef.current.play();\r\n }\r\n\r\n btnNextClick = (event) => {\r\n if (this.exercises.length === this.state.excerciseNmb + 1) {\r\n //alert(\"Конец\");\r\n if (this.parent != null) {\r\n this.parent.setExerciseComplete(this.exerciseId);\r\n this.parent.setNextExercise();\r\n }\r\n return;\r\n } else {\r\n let newNmb = this.state.excerciseNmb + 1;\r\n //this.exercise = this.exercises[newNmb];\r\n this.setState({ excerciseNmb: newNmb });\r\n this.setState({ exercise: this.exercises[newNmb] });\r\n\r\n //console.log(newNmb);\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.populateData();\r\n this.onPlay(this.audioRef);\r\n }\r\n\r\n componentDidUpdate() {\r\n this.onPlay(this.audioRef);\r\n }\r\n\r\n render() {\r\n let contents = this.state.loading\r\n ? \r\n
Loading exercise (StatementByVoice)...
\r\n : this.renderSentence();\r\n return (\r\n\r\n {contents}\r\n
\r\n );\r\n }\r\n\r\n onSelectChange = (e, curKey) => {\r\n console.log(\"EVENT \" + curKey);\r\n }\r\n\r\n renderSentence() {\r\n return (\r\n \r\n \r\n \r\n {this.state.exercise.allText}\r\n\r\n \r\n {this.state.exercise.statements.map((stmnt, index) =>\r\n
\r\n );\r\n }\r\n\r\n async populateData() {\r\n const token = await authService.getAccessToken();\r\n const response = await fetch('api/exercise/' + this.exerciseId, {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n const data = await response.json();\r\n this.exercises = data;\r\n this.setState({ exercise: this.exercises[0] });\r\n this.setState({ excerciseNmb: 0 });\r\n this.setState({ loading: false });\r\n }\r\n}","import React from 'react';\r\nimport authService from './api-authorization/AuthorizeService';\r\nimport './JoinValues.css';\r\n\r\nexport default class JoinValues extends React.Component {\r\n\r\n constructor(props) {\r\n super();\r\n\r\n this.exercises = [];\r\n this.exerciseId = props.exerciseId;\r\n this.parent = props.parentComponent;\r\n this.firstColVals = [];\r\n this.secondColVals = [];\r\n this.secondColShuffledVals = [];\r\n this.userSelection = [];\r\n this.correctSelection = [];\r\n this.firstColumnRowIsSelected = [];\r\n\r\n this.colourAr = ['red', 'green',]\r\n this.state = {\r\n loading: true,\r\n excerciseNmb: 0,\r\n exercise: null,\r\n taskText: '',\r\n col1RowSelectedNmb: -1,\r\n col2RowSelectedNmb: -1,\r\n isHelpViewMode: false\r\n };\r\n }\r\n\r\n GetCorrectSelection() {\r\n let result = [];\r\n for (let i = 0; i < this.secondColVals.length; i++) {\r\n let val = this.secondColShuffledVals[i];\r\n let n = this.secondColVals.findIndex(item => item === val);\r\n result.push(n);\r\n }\r\n console.log(this.firstColVals);\r\n console.log(this.secondColVals);\r\n console.log(this.secondColShuffledVals);\r\n console.log(result);\r\n\r\n\r\n return result;\r\n }\r\n\r\n shuffle(arr) {\r\n var j, temp;\r\n for (var i = arr.length - 1; i > 0; i--) {\r\n j = Math.floor(Math.random() * (i + 1));\r\n temp = arr[j];\r\n arr[j] = arr[i];\r\n arr[i] = temp;\r\n }\r\n return arr;\r\n }\r\n\r\n componentDidMount() {\r\n this.populateData();\r\n }\r\n\r\n\r\n render() {\r\n console.log(\"this.state.isHelpViewMode = \" + this.state.isHelpViewMode);\r\n let contents = this.state.loading\r\n ? \r\n \r\n
\r\n {/* \r\n \r\n
*/}\r\n Loading exercise (sentence contructor)...
\r\n // : this.renderComponent();\r\n : (this.state.isHelpViewMode === true ? this.renderComponentHelp() : this.renderComponent());\r\n\r\n\r\n return (\r\n\r\n {contents}\r\n
\r\n );\r\n }\r\n\r\n col1Click = (e, index) => {\r\n //если эта же ячейка уже выбрана, то сбрасываем выделение \r\n if (this.state.col1RowSelectedNmb === index) {\r\n this.setState({ col1RowSelectedNmb: -1 });\r\n this.setState({ col2RowSelectedNmb: -1 });\r\n return;\r\n }\r\n if (this.state.col2RowSelectedNmb === -1)\r\n this.setState({ col1RowSelectedNmb: index });\r\n else {\r\n //сбрасываем во втотой колонке возможное совпадение\r\n for (let i = 0; i < this.userSelection.length; i++) {\r\n if (this.userSelection[i] === index)\r\n this.userSelection[i] = -1;\r\n }\r\n\r\n this.userSelection[this.state.col2RowSelectedNmb] = index;\r\n this.firstColumnRowIsSelected[index] = true;\r\n this.setState({ col1RowSelectedNmb: -1 });\r\n this.setState({ col2RowSelectedNmb: -1 });\r\n }\r\n return;\r\n }\r\n\r\n col2Click = (e, index) => {\r\n if (this.state.col2RowSelectedNmb === index) {\r\n this.setState({ col1RowSelectedNmb: -1 });\r\n this.setState({ col2RowSelectedNmb: -1 });\r\n return;\r\n }\r\n\r\n //если выбираемая ячейка во второй колнке уже выбрана (т.е. this.userSelection[index]!==-1),\r\n //то нужно в первой колонке связанное значение сделать невыбранным\r\n if (this.userSelection[index] !== -1) {\r\n let n = this.userSelection[index];\r\n this.firstColumnRowIsSelected[n] = false;\r\n }\r\n\r\n this.userSelection[index] = -1;\r\n\r\n if (this.state.col1RowSelectedNmb === -1) {\r\n this.setState({ col2RowSelectedNmb: index });\r\n }\r\n else {\r\n\r\n //сбрасываем во втотой колонке возможное совпадение\r\n for (let i = 0; i < this.userSelection.length; i++) {\r\n if (this.userSelection[i] === this.state.col1RowSelectedNmb)\r\n this.userSelection[i] = -1;\r\n }\r\n\r\n this.firstColumnRowIsSelected[this.state.col1RowSelectedNmb] = true;\r\n this.userSelection[index] = this.state.col1RowSelectedNmb;\r\n this.setState({ col1RowSelectedNmb: -1 });\r\n this.setState({ col2RowSelectedNmb: -1 });\r\n }\r\n }\r\n\r\n btnCheckClick = (event) => {\r\n let errorCount = 0;\r\n console.log(this.secondColVals);\r\n console.log(this.secondColShuffledVals);\r\n console.log(this.userSelection);\r\n for (let i = 0; i < this.firstColVals.length; i++) {\r\n let n = this.userSelection[i];\r\n if (this.secondColVals[n] === this.secondColShuffledVals[i])\r\n continue;\r\n else\r\n errorCount++;\r\n }\r\n if (errorCount > 0)\r\n alert(errorCount + \" ошибок\");\r\n else {\r\n //alert(\" всё верно!\");\r\n\r\n let n = this.state.excerciseNmb;\r\n n = n + 1;\r\n\r\n if (n >= this.exercises.length) {\r\n if (this.parent != null) {\r\n this.parent.setExerciseComplete(this.exerciseId);\r\n this.parent.setNextExercise();\r\n }\r\n return;\r\n }\r\n this.firstColVals = this.exercises[n].column1;\r\n this.secondColVals = this.exercises[n].column2;\r\n this.secondColShuffledVals = this.shuffle([...this.secondColVals]);\r\n\r\n this.userSelection = [];\r\n this.firstColumnRowIsSelected = [];\r\n\r\n for (let i = 0; i < this.secondColVals.length; i++) {\r\n this.userSelection.push(-1);\r\n this.firstColumnRowIsSelected.push(false);\r\n }\r\n\r\n this.correctSelection = this.GetCorrectSelection();\r\n this.setState({ exercise: this.exercises[n] });\r\n this.setState({ excerciseNmb: n });\r\n }\r\n // let array = this.wordsDivRef.current.children;\r\n // let result = \"\";\r\n // result = array[0].innerText;\r\n // for (let i = 1; i < array.length; i++) {\r\n // result = result + \" \" + array[i].innerText;\r\n // }\r\n\r\n // if (result === this.state.exercise.espSentence) {\r\n // this.nextOnClick();\r\n // } else {\r\n // alert(\" - неверный ответ!\");\r\n // }\r\n };\r\n renderComponent() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n renderComponentHelp() {\r\n return (\r\n \r\n {this.state.taskText}\r\n
\r\n \r\n \r\n \r\n {this.firstColVals.map((fValue, index) => (\r\n
\r\n
\r\n | this.col1Click(e, index)}>\r\n \r\n \r\n {index + 1}\r\n \r\n \r\n {fValue}\r\n | \r\n this.col2Click(e, index)}>\r\n \r\n \r\n {this.userSelection[index] === -1 ? 'X' : (this.userSelection[index] + 1)}\r\n \r\n \r\n {this.secondColShuffledVals[index]}\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 showHelp = (event) => {\r\n console.log(\"showHelp\");\r\n if (this.state.isHelpViewMode === true) return;\r\n this.setState({ isHelpViewMode: true });\r\n }\r\n\r\n hideHelp = (event) => {\r\n console.log(\"hideHelp\");\r\n if (this.state.isHelpViewMode === false) return;\r\n this.setState({ isHelpViewMode: false });\r\n // let boolVal = this.state.isHelpViewMode;\r\n // boolVal = !boolVal;\r\n // this.setState({ isHelpViewMode: boolVal });\r\n // console.log(boolVal);\r\n\r\n }\r\n\r\n async populateData() {\r\n const token = await authService.getAccessToken();\r\n const response = await fetch('api/exercise/' + this.exerciseId, {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n const data = await response.json();\r\n this.exercises = data.exercises;\r\n this.firstColVals = data.exercises[0].column1;\r\n this.secondColVals = data.exercises[0].column2;\r\n this.secondColShuffledVals = this.shuffle([...this.secondColVals]);\r\n //this.userSelection \r\n for (let i = 0; i < this.secondColVals.length; i++) {\r\n this.userSelection.push(-1);\r\n this.firstColumnRowIsSelected.push(false);\r\n }\r\n this.correctSelection = this.GetCorrectSelection();\r\n\r\n this.setState({ taskText: data.taskText });\r\n this.setState({ exercise: this.exercises[0] });\r\n this.setState({ excerciseNmb: 0 });\r\n this.setState({ loading: false });\r\n }\r\n\r\n}","import React from 'react';\r\nimport authService from './api-authorization/AuthorizeService';\r\nimport \"./StatementByVoice.css\";\r\n\r\nconst StatementTagsFromString = ({ statement, stmtNmb, taskNmb, regisrageMyRef, ...props }) => {\r\n var str = statement.statement;\r\n var strParts = str.split('*').filter((val) => val !== '');\r\n return (\r\n \r\n {this.state.taskText}\r\n
\r\n \r\n \r\n \r\n {this.firstColVals.map((fValue, index) => (\r\n
\r\n
\r\n | \r\n \r\n \r\n {index + 1}\r\n \r\n \r\n {fValue}\r\n | \r\n \r\n \r\n \r\n {this.correctSelection[index] + 1}\r\n \r\n \r\n {this.secondColShuffledVals[index]}\r\n | \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {strParts.map((part, index) =>\r\n <>{part}\r\n
\r\n
\r\n )\r\n}\r\n\r\nconst StatementCombobox = ({ opts, optionIndex, curKey, regisrageMyRef, ...props }) => {\r\n const ref = React.createRef();\r\n let contents = (opts.length <= optionIndex) ? <>\r\n :\r\n ();\r\n regisrageMyRef(curKey, ref);\r\n return (\r\n <>\r\n {contents}\r\n \r\n )\r\n}\r\n\r\nexport default class CbxStatement extends React.Component {\r\n constructor(props) {\r\n super();\r\n this.parent = props.parentComponent;\r\n this.exerciseId = props.exerciseId;\r\n this.exercises = null;\r\n this.state = {\r\n loading: true,\r\n excerciseNmb: 0,\r\n exercise: null\r\n };\r\n this.resultsMap = null;\r\n this.cbxMap = null;\r\n }\r\n\r\n regisrageMyRef = (curKey, ref) => {\r\n console.log(\"REGISRATE!!!!!\" + curKey)\r\n console.log(ref);\r\n if (this.cbxMap === null)\r\n this.cbxMap = new Map();\r\n this.cbxMap.set(curKey, ref);\r\n }\r\n\r\n\r\n btnCheckClick = (event) => {\r\n\r\n this.getRightAnswersMap(this.state.exercise);\r\n console.log(\"CHECK_START!!!!!!!!!!!!!!!!!!!!!\");\r\n console.log(this.resultsMap);\r\n console.log(this.cbxMap);\r\n\r\n if (this.resultsMap === null || this.cbxMap === null)\r\n alert(\"ERROR: Map is empty!\");\r\n let badAnswersCbxArray = [];\r\n this.resultsMap.forEach((value, key, map) => {\r\n //value===this.cbxMap.get(key).\r\n console.log(\"KEY: \" + key + \";VALUE:\" + value);\r\n console.log(this.cbxMap.get(key));\r\n let ref = this.cbxMap.get(key);\r\n let n = ref.current.options.selectedIndex;\r\n let text = ref.current.options[n].text;\r\n console.log(text);\r\n if (text !== value)\r\n badAnswersCbxArray.push(ref);\r\n });\r\n\r\n if (badAnswersCbxArray.length === 0) {\r\n this.cbxMap = new Map();\r\n this.resultsMap = new Map();\r\n this.btnNextClick();\r\n }\r\n else {\r\n let msg = \"\";\r\n badAnswersCbxArray.map((ref, index) => msg = msg + index + \". \" + ref.current.options[ref.current.options.selectedIndex].text + \"; \");\r\n alert(msg);\r\n }\r\n }\r\n\r\n getRightAnswersMap = (exercise) => {\r\n this.resultsMap = new Map();\r\n const taskNmb = this.state.excerciseNmb;\r\n // exercise.statements.map((statement, stmtNmb) => {\r\n // statement.answers.map((answer, optionIndex) => {\r\n // this.resultsMap.set(taskNmb + '_statement' + stmtNmb + '_option' + optionIndex, answer);\r\n // })\r\n // })\r\n\r\n exercise.statements.forEach((statement, stmtNmb) => {\r\n statement.answers.forEach((answer, optionIndex) => {\r\n this.resultsMap.set(taskNmb + '_statement' + stmtNmb + '_option' + optionIndex, answer);\r\n })\r\n })\r\n }\r\n\r\n btnNextClick = (event) => {\r\n if (this.exercises.length === this.state.excerciseNmb + 1) {\r\n //alert(\"Конец\");\r\n if (this.parent != null) {\r\n this.parent.setExerciseComplete(this.exerciseId);\r\n this.parent.setNextExercise();\r\n }\r\n return;\r\n } else {\r\n let newNmb = this.state.excerciseNmb + 1;\r\n //this.exercise = this.exercises[newNmb];\r\n this.setState({ excerciseNmb: newNmb });\r\n this.setState({ exercise: this.exercises[newNmb] });\r\n\r\n //console.log(newNmb);\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.populateData();\r\n\r\n }\r\n\r\n componentDidUpdate() {\r\n\r\n }\r\n\r\n render() {\r\n let contents = this.state.loading\r\n ? \r\n
Loading exercise (StatementByVoice)...
\r\n : this.renderSentence();\r\n return (\r\n\r\n {contents}\r\n
\r\n );\r\n }\r\n\r\n onSelectChange = (e, curKey) => {\r\n console.log(\"EVENT \" + curKey);\r\n }\r\n\r\n renderSentence() {\r\n return (\r\n \r\n \r\n {this.state.exercise.allText}\r\n\r\n \r\n {this.state.exercise.statements.map((stmnt, index) =>\r\n
\r\n );\r\n }\r\n\r\n async populateData() {\r\n const token = await authService.getAccessToken();\r\n const response = await fetch('api/exercise/' + this.exerciseId, {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n const data = await response.json();\r\n this.exercises = data;\r\n this.setState({ exercise: this.exercises[0] });\r\n this.setState({ excerciseNmb: 0 });\r\n this.setState({ loading: false });\r\n }\r\n}","import React from 'react';\r\nimport authService from './api-authorization/AuthorizeService';\r\nimport \"./StatementByVoice.css\";\r\nimport InputMask from \"react-input-mask\";\r\n\r\nconst StatementTagsFromString = ({ statement, stmtNmb, taskNmb, getMaskForWord, regisrageMyRef, showHelp, ...props }) => {\r\n var str = statement.statement;\r\n var strParts = str.split('*').filter((val) => val !== '');\r\n if (str[0] === '*') {\r\n strParts.unshift('');\r\n }\r\n\r\n\r\n return (\r\n \r\n \r\n
\r\n {/* \r\n \r\n
*/}\r\n \r\n {strParts.map((part, index) =>\r\n <>{part}\r\n {(showHelp === false) ?\r\n
\r\n
\r\n\r\n )\r\n}\r\n\r\nconst StatementFillInTheGaps = ({ answ, answIndex, curKey, getMaskForWord, regisrageMyRef, ...props }) => {\r\n const ref = React.createRef();\r\n let contents = (answ.length <= answIndex) ? <>\r\n :\r\n \r\n
{statement.translation}
\r\n Loading exercise (StatementByVoice)...
\r\n : this.renderSentence();\r\n return (\r\n\r\n {contents}\r\n
\r\n );\r\n }\r\n\r\n showHelp = (event) => {\r\n if (this.state.isHelpViewMode === true) return;\r\n this.setState({ isHelpViewMode: true });\r\n console.log(\"showHelp\");\r\n }\r\n\r\n hideHelp = (event) => {\r\n if (this.state.isHelpViewMode === false) return;\r\n this.setState({ isHelpViewMode: false });\r\n console.log(\"hideHelp\");\r\n }\r\n\r\n onSelectChange = (e, curKey) => {\r\n console.log(\"EVENT \" + curKey);\r\n }\r\n\r\n renderSentence() {\r\n return (\r\n \r\n \r\n {this.state.exercise.allText}\r\n\r\n \r\n {this.state.exercise.statements.map((stmnt, index) =>\r\n
\r\n );\r\n }\r\n\r\n async populateData() {\r\n const token = await authService.getAccessToken();\r\n const response = await fetch('api/exercise/' + this.exerciseId, {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n const data = await response.json();\r\n this.exercises = data;\r\n this.exercises = this.shuffle(this.exercises);\r\n this.setState({ exercise: this.exercises[0] });\r\n this.setState({ excerciseNmb: 0 });\r\n this.setState({ loading: false });\r\n }\r\n}","import React, { Component } from 'react';\r\nimport authService from './api-authorization/AuthorizeService'\r\nimport './Lesson.css';\r\nimport ImageByVoice from './ImageByVoice';\r\nimport SentenceContructor from './SentenceСonstructor';\r\nimport StatementByVoice from './StatementByVoice';\r\nimport JoinValues from './JoinValues';\r\nimport currentCourceService from './CurrentCourceService';\r\nimport CbxStatement from './CbxStatement';\r\nimport FillInTheGaps from './FillInTheGaps';\r\n\r\nexport class Lesson extends Component {\r\n\r\n static displayName = \"Lesson\";\r\n\r\n constructor(props) {\r\n super(props);\r\n const queryParams = new URLSearchParams(window.location.search);\r\n this.lessonId = queryParams.get('id');\r\n this.courceId = queryParams.get('courceId');\r\n console.log(\"LESSON_ID = \" + this.lessonId);\r\n this.isRedoMode = false;\r\n this.state = {\r\n lesson: null,\r\n exercises: [],\r\n exercise: null,\r\n loading: true\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.populateLesson();\r\n }\r\n\r\n onUnitClick = (e, nmb) => {\r\n // if (this.state.unit.unitNumber === nmb) return;\r\n // this.setState({ unit: this.state.units[nmb] });\r\n // this.setState({ lessons: this.state.units[nmb].lessons });\r\n // this.setState({ lessonNmb: 0 });\r\n }\r\n\r\n onExerciseClick = (e, nmb) => {\r\n console.log(\"nmb=\" + nmb);\r\n if (this.state.exercise.exerciseNumber === nmb) return;\r\n console.log(\"exNmb=\" + this.state.exercise.exerciseNumber);\r\n this.setState({ exercise: this.state.exercises[nmb] });\r\n }\r\n\r\n setNextExercise = () => {\r\n // let n = this.state.exercise.exerciseNumber;\r\n // n = n + 1;\r\n let n = this.getNextExerciseNumb();\r\n\r\n if (n === this.state.exercises.length) {\r\n //alert(\"end of lesson!\");\r\n const url = `${window.location.protocol}//${window.location.host}/cources?id=${this.courceId}`;\r\n window.location.assign(url);\r\n }\r\n\r\n else\r\n this.setState({ exercise: this.state.exercises[n] });\r\n }\r\n\r\n getNextExerciseNumb() {\r\n let n = this.state.exercise.exerciseNumber;\r\n n = n + 1;\r\n if (this.isRedoMode === true) return n;\r\n\r\n while (n < this.state.exercises.length) {\r\n if (this.state.lesson.extendExercises[n].isCompleted === false)\r\n return n;\r\n n++;\r\n }\r\n return n;\r\n }\r\n\r\n getFirstExerciseNumb(lesson) {\r\n let n = 0;\r\n if (this.isRedoMode === true) return n;\r\n console.log(\"LESSON=\");\r\n console.log(lesson);\r\n console.log(lesson.exercises.length);\r\n\r\n while (n < lesson.exercises.length) {\r\n if (lesson.extendExercises[n].isCompleted === false)\r\n return n;\r\n n++;\r\n }\r\n return n;\r\n }\r\n\r\n\r\n\r\n async setExerciseComplete(exerciseId) {\r\n const token = await authService.getAccessToken();\r\n const url = `${window.location.protocol}//${window.location.host}/api/exercise/${exerciseId}`;\r\n await fetch(url, {\r\n method: 'PUT',\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n }\r\n\r\n renderExercise() {\r\n let exerciseComponent;\r\n switch (this.state.exercise.reactComponent) {\r\n case 'ImageByVoice':\r\n exerciseComponent = < ImageByVoice exerciseId={this.state.exercise.id} parentComponent={this} />;\r\n break;\r\n case 'StatementByVoice':\r\n exerciseComponent = \r\n \r\n
\r\n \r\n \r\n
{/**/}\r\n ERROR
\r\n break;\r\n }\r\n return (\r\n \r\n \r\n Урок {this.state.lesson.lessonName}\r\n \r\n
\r\n )\r\n }\r\n\r\n render() {\r\n let contents = this.state.loading\r\n ? \r\n {exerciseComponent}\r\n
\r\n\r\n \r\n Loading lesson...
\r\n : this.renderExercise();\r\n\r\n return (\r\n\r\n {/*
\r\n );\r\n }\r\n\r\n async populateLesson() {\r\n const token = await authService.getAccessToken();\r\n const url = `${window.location.protocol}//${window.location.host}/api/lesson/${this.lessonId}`;\r\n //console.log(\"#####:\" + url);\r\n const response = await fetch(url, {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n const data = await response.json();\r\n\r\n console.log(data);\r\n var completedCount = data.extendExercises.filter(a => a.isCompleted === true).length;\r\n console.log(\"completed count = \" + completedCount);\r\n console.log(\"allcount = \" + data.exercises.length);\r\n this.isRedoMode = completedCount === data.exercises.length ? true : false;\r\n console.log(\"this.isRedoMode = \" + this.isRedoMode);\r\n console.log(\"startFunc\");\r\n let n = this.getFirstExerciseNumb(data);\r\n console.log(\"endFunc\");\r\n\r\n this.setState({\r\n lesson: data,\r\n exercises: data.exercises,\r\n exercise: data.exercises[n]\r\n });\r\n\r\n this.setState({\r\n loading: false\r\n });\r\n\r\n // console.log(\"JastTestValue=\" + currentCourceService._testValue);\r\n // console.log(\"testValue=\" + currentCourceService.GetTestValeu());\r\n // console.log(\"testValue=\" + currentCourceService.GetTestValeu());\r\n // console.log(\"currentCourceId=\" + currentCourceService._currentCourceId);\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\n//import authService from './api-authorization/AuthorizeService'\r\nimport './VocabularyGroup.css';\r\nimport InputMask from \"react-input-mask\";\r\n\r\nexport class VocabularyWrite extends Component {\r\n\r\n static displayName = \"VocabularyWrite\";\r\n\r\n constructor(props) {\r\n super(props);\r\n this.cards = props.cards;\r\n this.parent = props.parentComponent;\r\n this.audioWord = new Audio(); // Создаём новый элемент Audio\r\n this.audioExample = new Audio();\r\n this.toLearn = this.shuffle([...props.cards]);\r\n this.userInputRef = React.createRef();\r\n this.toRepeat = [];\r\n this.failAttemptCount = 0;\r\n this.state = {\r\n card: this.toLearn[0],\r\n buttons: 'one',\r\n shorErrorInfo: false,\r\n showCorrectWordInfo: false\r\n };\r\n this.n = 0;\r\n\r\n }\r\n\r\n getMaskForWord(word) {\r\n\r\n const n = word.length;\r\n let result = \"\";\r\n\r\n for (let i = 0; i < n; i++) {\r\n if (word[i] === ' ' || word[i] === '-' || word[i] === ',' || word[i] === '.' || word[i] === '!' || word[i] === '?' || word[i] === '¿' || word[i] === '¡' || word[i] === ':')\r\n result = result + word[i]\r\n else\r\n result = result + '*';\r\n }\r\n return result;\r\n }\r\n\r\n shuffle(arr) {\r\n var j, temp;\r\n for (var i = arr.length - 1; i > 0; i--) {\r\n j = Math.floor(Math.random() * (i + 1));\r\n temp = arr[j];\r\n arr[j] = arr[i];\r\n arr[i] = temp;\r\n }\r\n return arr;\r\n }\r\n btnCheckClick = (event) => {\r\n this.failAttemptCount = 3;\r\n this.setState({ buttons: 'two' });\r\n }\r\n\r\n btnCorrectClick = (event) => {\r\n this.failAttemptCount = 0;\r\n this.userInputRef.current.value = '';\r\n this.toLearn.shift();\r\n if (this.toLearn.length === 0) {\r\n this.toLearn = this.shuffle([...this.toRepeat]);\r\n this.toRepeat = [];\r\n }\r\n\r\n if (this.toLearn.length === 0) {\r\n //alert(\"END OF GROUP\");\r\n\r\n if (this.parent != null)\r\n this.parent.setNextLevel();\r\n //вызвать метод простановки новой даты повторения\r\n //вернуться к окну словаря\r\n return;\r\n }\r\n\r\n this.setState({\r\n card: this.toLearn[0],\r\n buttons: 'one',\r\n shorErrorInfo: false,\r\n showCorrectWordInfo: false\r\n });\r\n\r\n let headerStr = (this.cards.length - (this.toRepeat.length + this.toLearn.length)) + '/' + this.cards.length;\r\n this.parent.setHaederString(headerStr);\r\n }\r\n\r\n playWord = (event) => {\r\n this.audioWord.src = this.state.card.audio;// Указываем путь к звуку \"клика\" \r\n this.audioWord.autoplay = true; // Автоматически запускаем\r\n }\r\n\r\n\r\n playExample = (event) => {\r\n //var audio = new Audio(); // Создаём новый элемент Audio\r\n this.audioExample.src = this.state.card.sampleAudio; // Указываем путь к звуку \"клика\"\r\n this.audioExample.autoplay = true; // Автоматически запускаем\r\n }\r\n\r\n btnIncorrectClick = (event) => {\r\n this.failAttemptCount = 0;\r\n this.userInputRef.current.value = '';\r\n this.toRepeat.push(this.toLearn[0]);\r\n this.toLearn.shift();\r\n if (this.toLearn.length === 0) {\r\n this.toLearn = this.shuffle([...this.toRepeat]);\r\n this.toRepeat = [];\r\n }\r\n if (this.toLearn.length === 0) {\r\n //alert(\"END OF GROUP\");\r\n return;\r\n }\r\n\r\n let headerStr = (this.cards.length - (this.toRepeat.length + this.toLearn.length)) + '/' + this.cards.length;\r\n this.setState({\r\n card: this.toLearn[0],\r\n buttons: 'one',\r\n shorErrorInfo: false,\r\n showCorrectWordInfo: false\r\n });\r\n\r\n this.parent.setHaederString(headerStr);\r\n }\r\n\r\n onKeyUp = (event) => {\r\n if (event.keyCode === 13) {\r\n this.userInputRef.current.value = this.userInputRef.current.value.replace('E', 'é')\r\n .replace('I', 'í').replace('O', 'ó').replace('A', 'á').replace('N', 'ñ').replace('U', 'ú');\r\n if (this.userInputRef.current.value === this.state.card.word) {\r\n //alert(\"Верно!\");\r\n if (this.failAttemptCount > 2)\r\n this.btnIncorrectClick(event);\r\n else\r\n this.btnCorrectClick(event);\r\n }\r\n else {\r\n this.failAttemptCount = this.failAttemptCount + 1;\r\n if (this.failAttemptCount > 2) {\r\n //alert(this.state.card.word);\r\n this.setState({\r\n shorErrorInfo: false,\r\n showCorrectWordInfo: true\r\n });\r\n } else {\r\n this.setState({\r\n shorErrorInfo: true,\r\n showCorrectWordInfo: false\r\n });\r\n // shorErrorInfo:false,\r\n // showCorrectWordInfo:false\r\n }\r\n //alert(\"Ошибка\");\r\n //this.btnIncorrectClick(event);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n // console.log(this.state.card);\r\n // console.log(this.state.showExamples ? \"SHOW\" : \"HIDE\");\r\n let exampleDiv = this.parent.state.showExamples && this.state.buttons === 'two' ?\r\n Weather forecast
\r\nThis component demonstrates fetching data from the server.
*/}\r\n {contents}\r\n\r\n
\r\n :\r\n \r\n\r\n let buttonsDiv = this.state.buttons === 'one' ?\r\n :\r\n \r\n \r\n Пример:\r\n \r\n {this.state.card.sample}\r\n \r\n
\r\n \r\n {this.state.card.sampleTranslation}\r\n
\r\n \r\n {/*
;\r\n\r\n let wordDiv = this.state.buttons === 'one' ?\r\n <> :\r\n {this.state.card.word}
*/}\r\n {/* \r\n */}\r\n {this.state.card.word}
\r\n\r\n let errorInfo = this.state.shorErrorInfo === true ? Неверно
: <>\r\n let correctWordInfo = this.state.showCorrectWordInfo === true ? Введите \"{this.state.card.word}\"
: <>\r\n\r\n return (\r\n \r\n 
\r\n this.onKeyUp(e)} /> \r\n
\r\n )\r\n }\r\n}","import React, { Component } from 'react';\r\n//import authService from './api-authorization/AuthorizeService'\r\nimport './VocabularyGroup.css';\r\n\r\nexport class VocabularyGuess extends Component {\r\n\r\n static displayName = \"VocabularyGuess\";\r\n\r\n constructor(props) {\r\n super(props);\r\n this.cards = props.cards;\r\n this.parent = props.parentComponent;\r\n //this.showExamples = props.showExamples;\r\n this.audioWord = new Audio(); // Создаём новый элемент Audio\r\n this.audioExample = new Audio();\r\n this.toLearn = this.shuffle([...props.cards]);\r\n this.toRepeat = [];\r\n this.state = {\r\n card: this.toLearn[0],\r\n buttons: 'one',\r\n //showExamples: false\r\n };\r\n this.n = 0;\r\n }\r\n\r\n shuffle(arr) {\r\n var j, temp;\r\n for (var i = arr.length - 1; i > 0; i--) {\r\n j = Math.floor(Math.random() * (i + 1));\r\n temp = arr[j];\r\n arr[j] = arr[i];\r\n arr[i] = temp;\r\n }\r\n return arr;\r\n }\r\n\r\n\r\n\r\n btnCheckClick = (event) => {\r\n this.setState({ buttons: 'two' });\r\n }\r\n\r\n btnCorrectClick = (event) => {\r\n this.toLearn.shift();\r\n if (this.toLearn.length === 0) {\r\n this.toLearn = this.shuffle([...this.toRepeat]);\r\n this.toRepeat = [];\r\n }\r\n\r\n if (this.toLearn.length === 0) {\r\n //alert(\"END OF GROUP\");\r\n\r\n if (this.parent != null)\r\n this.parent.setNextLevel();\r\n //вызвать метод простановки новой даты повторения\r\n //вернуться к окну словаря\r\n return;\r\n }\r\n\r\n this.setState({ card: this.toLearn[0], buttons: 'one' });\r\n\r\n let headerStr = (this.cards.length - (this.toRepeat.length + this.toLearn.length)) + '/' + this.cards.length;\r\n this.parent.setHaederString(headerStr);\r\n }\r\n\r\n playWord = (event) => {\r\n this.audioWord.src = this.state.card.audio;// Указываем путь к звуку \"клика\" \r\n this.audioWord.autoplay = true; // Автоматически запускаем\r\n }\r\n\r\n\r\n playExample = (event) => {\r\n //var audio = new Audio(); // Создаём новый элемент Audio\r\n this.audioExample.src = this.state.card.sampleAudio; // Указываем путь к звуку \"клика\"\r\n this.audioExample.autoplay = true; // Автоматически запускаем\r\n }\r\n\r\n btnIncorrectClick = (event) => {\r\n this.toRepeat.push(this.toLearn[0]);\r\n this.toLearn.shift();\r\n if (this.toLearn.length === 0) {\r\n this.toLearn = this.shuffle([...this.toRepeat]);\r\n this.toRepeat = [];\r\n }\r\n if (this.toLearn.length === 0) {\r\n //alert(\"END OF GROUP\");\r\n return;\r\n }\r\n\r\n let headerStr = (this.cards.length - (this.toRepeat.length + this.toLearn.length)) + '/' + this.cards.length;\r\n this.setState({ card: this.toLearn[0], buttons: 'one' });\r\n this.parent.setHaederString(headerStr);\r\n }\r\n\r\n\r\n render() {\r\n console.log(this.state.card);\r\n console.log(this.state.showExamples ? \"SHOW\" : \"HIDE\");\r\n let exampleDiv = this.parent.state.showExamples && this.state.buttons === 'two' ?\r\n {this.state.card.translation}
\r\n {errorInfo}\r\n {correctWordInfo}\r\n \r\n {wordDiv}\r\n {exampleDiv}\r\n {buttonsDiv}\r\n
\r\n \r\n
\r\n :\r\n \r\n\r\n let buttonsDiv = this.state.buttons === 'one' ?\r\n :\r\n \r\n \r\n Пример:\r\n \r\n {this.state.card.sample}\r\n \r\n
\r\n \r\n {this.state.card.sampleTranslation}\r\n
\r\n \r\n {/*
;\r\n\r\n let wordDiv = this.state.buttons === 'one' ?\r\n <> :\r\n {this.state.card.word}
*/}\r\n \r\n \r\n {this.state.card.word}
\r\n\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n}","import React, { Component } from 'react';\r\nimport authService from './api-authorization/AuthorizeService'\r\nimport './VocabularyGroup.css';\r\nimport currentCourceService from './CurrentCourceService';\r\n\r\nimport { VocabularyWrite } from './VocabularyWrite';\r\nimport { VocabularyGuess } from './VocabularyGuess';\r\n\r\nexport class VocabularyGroup extends Component {\r\n\r\n constructor(props) {\r\n\r\n console.log(\"!!!!!!!!!!!!!!!\");\r\n super(props);\r\n const queryParams = new URLSearchParams(window.location.search);\r\n this.groupId = queryParams.get('id');\r\n //this.groupId = queryParams.get('groupId');\r\n //sthis.groupId = 2;\r\n // console.log(\"GROUP_ID = \" + this.groupId); \r\n this.modes = ['guess', 'write'];\r\n this.state = {\r\n mode: 0,\r\n group: null,\r\n cards: [],\r\n headerString: \"\",\r\n showExamples: false,\r\n loading: true\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.populateLesson();\r\n }\r\n\r\n loadAllImages(cards) {\r\n console.log(\"image lading\")\r\n cards.forEach((card) => {\r\n const img = new Image();\r\n img.src = card.image;\r\n console.log(card.image);\r\n });\r\n }\r\n\r\n onUnitClick = (e, nmb) => {\r\n\r\n }\r\n\r\n setHaederString(headerStr) {\r\n this.setState({ headerString: headerStr });\r\n }\r\n\r\n onShowExampleValueChange = (event) => {\r\n console.log(event.currentTarget.checked)\r\n this.setState({ showExamples: event.currentTarget.checked });\r\n //console.log(\"aaa\" + this.state.showExamples);\r\n }\r\n\r\n onModeChange = (event) => {\r\n //console.log(event.currentTarget.selectedIndex); \r\n this.setState({ mode: event.currentTarget.selectedIndex });\r\n // switch (event.currentTarget.value) {\r\n // case 'Самопроверка':\r\n // this.setState({ mode: 0 });\r\n // break;\r\n // case 'Написание слов':\r\n // this.setState({ mode: 1 });\r\n // break;\r\n // }\r\n }\r\n\r\n async setNextLevel() {\r\n //вызвать метод простановки новой даты повторения\r\n //вернуться к окну словаря\r\n\r\n const token = await authService.getAccessToken();\r\n const url = `${window.location.protocol}//${window.location.host}/api/vocabularyGroup/${this.groupId}`;\r\n console.log(\"#####:\" + url);\r\n const response = await fetch(url, {\r\n method: 'PUT',\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n //const data = await response.json();\r\n\r\n const urlVocabularies = `${window.location.protocol}//${window.location.host}/vocabularies`;\r\n window.location.assign(urlVocabularies);\r\n }\r\n\r\n\r\n renderExercise() {\r\n let vocabularyComponent;\r\n switch (this.modes[this.state.mode]) {\r\n case 'write':\r\n vocabularyComponent = {this.state.card.translation}
\r\n \r\n {wordDiv}\r\n {exampleDiv}\r\n {buttonsDiv}\r\n
\r\n\r\n ERROR
\r\n break;\r\n }\r\n return (\r\n \r\n \r\n {this.state.headerString}\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n render() {\r\n let contents = this.state.loading\r\n ? \r\n {vocabularyComponent}\r\n
\r\n \r\n Loading lesson...
\r\n : this.renderExercise();\r\n return (\r\n\r\n {/*
\r\n );\r\n }\r\n\r\n async populateLesson() {\r\n const token = await authService.getAccessToken();\r\n const url = `${window.location.protocol}//${window.location.host}/api/vocabularyGroup/${this.groupId}`;\r\n const response = await fetch(url, {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n const data = await response.json();\r\n\r\n this.setState({\r\n group: data,\r\n cards: data.wordCards,\r\n headerString: \"0/\" + data.wordCards.length\r\n });\r\n\r\n this.loadAllImages(data.wordCards);\r\n\r\n this.setState({\r\n loading: false\r\n });\r\n\r\n // console.log(\"JastTestValue=\" + currentCourceService._testValue);\r\n // console.log(\"testValue=\" + currentCourceService.GetTestValeu());\r\n // console.log(\"testValue=\" + currentCourceService.GetTestValeu());\r\n // console.log(\"currentCourceId=\" + currentCourceService._currentCourceId);\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport authService from './api-authorization/AuthorizeService'\r\nimport './Vocabulary.css';\r\n\r\nexport class Vocabulary extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n units: [],\r\n unit: null,\r\n groups: [],\r\n loading: true\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.populateVocabulary();\r\n }\r\n\r\n onUnitClick = (e, nmb) => {\r\n if (this.state.unit.unitNumber === nmb) return;\r\n this.setState({ unit: this.state.units[nmb] });\r\n this.setState({ groups: this.state.units[nmb].vocabularyGroups })\r\n // this.setState({ lessons: this.state.units[nmb].lessons });\r\n // this.setState({ lessonNmb: 0 });\r\n }\r\n\r\n onGroupClic = (e, id) => {\r\n ///api/vocabularyGroup/\r\n const url = `${window.location.protocol}//${window.location.host}/vocabularyGroup?id=${id}`;\r\n // console.log(url);\r\n window.location.assign(url);\r\n }\r\n\r\n renderCourceInfo() {\r\n return (\r\n Weather forecast
\r\nThis component demonstrates fetching data from the server.
*/}\r\n {contents}\r\n\r\n
\r\n\r\n
\r\n )\r\n }\r\n\r\n render() {\r\n let contents = this.state.loading\r\n ? VOCABULARIO
\r\n\r\n\r\n
\r\n UNIDADES
\r\n {this.state.units.map((unit, index) =>\r\n this.onUnitClick(e, index)}>\r\n {(unit.name)}\r\n
\r\n )}\r\n \r\n\r\n
\r\n {this.state.groups.map((group, index) =>\r\n
\r\n \r\n {group.name}\r\n {group.userNotify} ({group.userStudyLevel}из7)\r\n \r\n
)}\r\n Loading vocabulary...
\r\n : this.renderCourceInfo();\r\n\r\n return (\r\n\r\n {/*
\r\n );\r\n }\r\n\r\n async populateVocabulary() {\r\n const token = await authService.getAccessToken();\r\n console.log(\"populateVocabulary\");\r\n //const url = `${window.location.protocol}//${window.location.host}/api/vocabularyinfo/${1}`;\r\n const url = `${window.location.protocol}//${window.location.host}/api/vocabularyinfo`;\r\n console.log(url);\r\n const response = await fetch(url, {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n\r\n console.log(\"DONE!\");\r\n const data = await response.json();\r\n //const data = await response.text();\r\n console.log(data);\r\n //return;\r\n this.setState({\r\n cource: data,\r\n units: data.vocabularyUnits,\r\n unit: data.vocabularyUnits[0],\r\n groups: data.vocabularyUnits[0].vocabularyGroups\r\n });\r\n this.setState({\r\n loading: false\r\n });\r\n\r\n }\r\n\r\n}","import React from 'react';\r\n\r\nexport class TestComponent1 extends React.Component {\r\n constructor(props) {\r\n super();\r\n //this.testStr = props.dataStr;\r\n this.testStr = \"!!!!!!!!!!!!!!!!!!!1\";\r\n console.log(props);\r\n };\r\n\r\n render() {\r\n console.log(this.testStr);\r\n return (\r\n Weather forecast
\r\nThis component demonstrates fetching data from the server.
*/}\r\n {contents}\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\n","import React, { Component } from 'react';\r\nimport authService from './api-authorization/AuthorizeService'\r\nimport './CourceInfo.css';\r\n\r\nexport class CourceInfo extends Component {\r\n\r\n static displayName = \"AAAAAAAA\";\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n cource: null,\r\n units: [],\r\n unit: null,\r\n lessons: [],\r\n lessonNmb: 0,\r\n loading: true\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.populateCource();\r\n }\r\n\r\n onUnitClick = (e, nmb) => {\r\n if (this.state.unit.unitNumber === nmb) return;\r\n this.setState({ unit: this.state.units[nmb] });\r\n this.setState({ lessons: this.state.units[nmb].extendLessons });\r\n this.setState({ lessonNmb: 0 });\r\n }\r\n\r\n onLessonClick = (e, nmb) => {\r\n this.setState({ lessonNmb: nmb });\r\n }\r\n\r\n onStartBtnClick = (e, lesson) => {\r\n // console.log(lesson);\r\n const url = `${window.location.protocol}//${window.location.host}/lesson?id=${lesson.id}&courceId=${this.state.cource.id}`;\r\n // console.log(url);\r\n window.location.assign(url);\r\n //window.location.assign(`${window.location.protocol}//` + `${window.location.host}/lesson`);\r\n //window.location.assign(\"https://localhost:5001/ImageByVoice\");\r\n\r\n }\r\n\r\n renderCourceInfo() {\r\n return (\r\n TestComponent1
\r\n{this.testStr}
\r\n\r\n {/*
\r\n\r\n
\r\n
\r\n
\r\n )\r\n }\r\n\r\n render() {\r\n let contents = this.state.loading\r\n ? Курс: {this.state.cource.courceName}
*/}\r\nEJERCICIOS
\r\n {/*Курс: {this.state.cource.courceName}
*/}\r\n \r\n
\r\n {/*UNIDADES
\r\n {this.state.units.map((unit, index) =>\r\n this.onUnitClick(e, index)}>\r\n {(unit.unitNumber + 1)}\r\n
\r\n )}\r\n \r\n\r\n
\r\n {this.state.lessons.map((lesson, index) =>\r\n
\r\n this.onLessonClick(e, index)}>\r\n Lección {lesson.lessonNumber + 1}\r\n
\r\n )}\r\n \r\n
\r\n
*/}\r\n \r\n
\r\n La lección de {this.state.lessons[this.state.lessonNmb].extendExercises.length} tareas
\r\n La lección completada en \r\n {Math.round((100 * this.state.lessons[this.state.lessonNmb].extendExercises.filter(x => x.isCompleted === true).length) / this.state.lessons[this.state.lessonNmb].extendExercises.length)}\r\n %
\r\n \r\n \r\n
\r\n \r\n
\r\n {this.state.lessons.map((lesson, index) =>\r\n
\r\n this.onLessonClick(e, index)}\r\n >\r\n
\r\n )}\r\n Lección {index + 1}
\r\n de {lesson.extendExercises.length} tareas
\r\n completada en \r\n {Math.round((100 * lesson.extendExercises.filter(x => x.isCompleted === true).length) / lesson.extendExercises.length)}\r\n %
\r\n \r\n \r\n
\r\n Loading...
\r\n : this.renderCourceInfo();\r\n\r\n return (\r\n\r\n {/*
\r\n );\r\n }\r\n\r\n async populateCource() {\r\n const token = await authService.getAccessToken();\r\n const response = await fetch('/api/cource', {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` }\r\n });\r\n const data = await response.json();\r\n console.log(data);\r\n this.setState({\r\n cource: data,\r\n units: data.extendUnits,\r\n unit: data.extendUnits[0],\r\n lessons: data.extendUnits[0].extendLessons,\r\n lessonNmb: 0\r\n });\r\n\r\n this.setState({\r\n loading: false\r\n });\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport { Route } from 'react-router';\r\nimport { Layout } from './components/Layout';\r\nimport { Home } from './components/Home';\r\nimport { FetchData } from './components/FetchData';\r\nimport { Counter } from './components/Counter';\r\nimport AuthorizeRoute from './components/api-authorization/AuthorizeRoute';\r\nimport ApiAuthorizationRoutes from './components/api-authorization/ApiAuthorizationRoutes';\r\nimport { ApplicationPaths } from './components/api-authorization/ApiAuthorizationConstants';\r\nimport { Lesson } from './components/Lesson';\r\nimport { VocabularyGroup } from './components/VocabularyGroup';\r\nimport { Vocabulary } from './components/Vocabulary';\r\nimport { TestComponent1 } from './components/TestComponent1';\r\n\r\nimport './custom.css'\r\n//import { CourcesList } from './components/CourcesList';\r\nimport { CourceInfo } from './components/CourceInfo';\r\n//import { ImageByVoice } from './components/ImageByVoice';\r\n\r\nexport default class App extends Component {\r\n static displayName = App.name;\r\n\r\n render() {\r\n console.log(window.location);\r\n return (\r\n Weather forecast
\r\nThis component demonstrates fetching data from the server.
*/}\r\n {contents}\r\n