\n {content}\n \n \n 🚀 Remove ads\n \n \n
\n );\n};\n","import React from \"react\";\n\nimport Checkbox from \"./Checkbox\";\nimport CollectionSelector from \"./CollectionSelector\";\nimport CollectionClozeSentenceEditor from \"./CollectionClozeSentenceEditor\";\nimport Icon from \"./Icon\";\nimport Toast from \"./Toast\";\n\nexport default class AddSentenceToCollection extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n collection: null,\n copied: false,\n errors: null,\n includeProgress: this.isNewSentence() ? null : (window.localStorage && window.localStorage.getItem(\"add-sentence-include-progress\") === \"true\"),\n saving: false,\n sentenceEditorVisible: false,\n upsertUrl: null\n };\n }\n\n componentDidMount() {\n }\n\n isNewSentence() {\n return !this.props.collectionClozeSentence;\n }\n\n reset() {\n this.collectionClozeSentenceEditor.reset();\n }\n\n renderCollectionClozeSentenceEditor() {\n if(!this.state.sentenceEditorVisible) {\n return null;\n }\n\n return (\n\n {\n // const collectionWasBlank = !this.state.collection;\n\n this.setState({\n collection,\n sentenceEditorVisible: copyable ? sentenceEditorVisible : true,\n upsertUrl: collection.collectionClozeSentencesUpsertUrl\n });\n\n // // timeout to get around modal fade in\n // const timeoutDuration = $(\".modal\").hasClass(\"fade\") && collectionWasBlank ? 500 : 0;\n // setTimeout(() => {\n // !!this.saveBtn && $(this.saveBtn).focus();\n // }, timeoutDuration);\n }}\n />\n {this.renderControls()}\n {this.state.sentenceEditorVisible &&
}\n {this.renderCollectionClozeSentenceEditor()}\n {this.renderToast()}\n
\n );\n }\n}\n","import React from \"react\";\n\nimport AddSentenceToCollectionModal from \"./AddSentenceToCollectionModal\";\n\nexport default class AddSentenceToCollectionBtn extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n modalVisible: false\n };\n }\n \n hideModal() {\n this.addSentenceToCollectionModal.hide();\n }\n\n renderModal() {\n if(!this.state.modalVisible) {\n return null;\n }\n\n const { collectionClozeSentence, collectionsUrl, copyable, isPro, nextReviewByLevel } = this.props;\n\n return (\n }\n {this.renderCollectionClozeSentenceEditor()}\n {this.renderToast()}\n
\n {children}\n \n \n \n );\n }\n}\n\n","import React from \"react\";\n\nexport default class ChatBot extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n input: \"\",\n messages: []\n };\n }\n\n componentDidMount() {\n }\n\n onSubmit(e) {\n e.preventDefault();\n\n const { input } = this.state;\n\n if(!input) {\n return false;\n }\n\n this.setState({\n input: \"\",\n messages: this.state.messages.concat([input])\n });\n\n $.ajax({\n data: { input },\n method: \"post\",\n url: this.props.url\n })\n .done((data) => {\n console.log(data);\n this.setState({\n messages: this.state.messages.concat([data.chatBotResponse])\n });\n })\n .fail(() => {\n alert(\"Failed!\");\n });\n }\n\n renderMessage(m) {\n if(typeof m === 'string' || m instanceof String) {\n return <>Me: {m};\n }\n\n return <>🤖: {m.target_language_response} [{m.en_response}];\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n","import React from \"react\";\n\nexport default class Checkbox extends React.Component {\n render() {\n const { checked, id, label, name, onChange, style, value } = this.props;\n\n return (\n - \n {this.state.messages.map((m, i) => (\n
{this.renderMessage(m)}
\n ))}\n
\n \n
\n );\n }\n}\n\n","import React from \"react\";\n\nimport { splitTextOnCloze } from \"../helpers\";\n\nexport default function ClozeSelectable(props) {\n const { onChange, text } = props;\n const { preClozeStr, cloze, postClozeStr } = splitTextOnCloze(text);\n\n const onMouseUp = (e) => {\n const selection = window.getSelection();\n const str = selection.toString().replace(/^\\s+|\\s+$/g, '');\n if(str && text.replace(/\\{\\{|\\}\\}/g, '').match(str)) {\n onChange(text.replace(/\\{\\{|\\}\\}/g, '').replace(str, '{{' + str + '}}'));\n }\n };\n\n return (\n {preClozeStr}{cloze}{postClozeStr}\n );\n};\n","import React from \"react\";\n\nimport { splitTextOnCloze } from \"../helpers\";\n\nexport default class ClozeSentence extends React.Component {\n render() {\n const { preClozeStr, cloze, postClozeStr } = splitTextOnCloze(this.props.text);\n return {preClozeStr}{cloze}{postClozeStr};\n }\n}\n","import React from \"react\";\n\nimport BulkAdd from \"./ClozeSentenceSearch/BulkAdd\";\nimport Pagination from \"./Pagination\";\nimport SearchForm from \"./ClozeSentenceSearch/SearchForm\";\nimport SearchResult from \"./ClozeSentenceSearch/SearchResult\";\n\nexport default class ClozeSentenceSearch extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n addToCollection: null,\n bulkAddVisible: false,\n clozeSentences: null,\n context: 'text',\n loading: false,\n page: 1,\n perPage: 20,\n query: props.query || '',\n selected: new Map(),\n total: 0,\n };\n }\n\n componentDidMount() {\n if(!!this.state.query) {\n this.search();\n }\n\n setTimeout(this.focusQuery.bind(this), 500);\n }\n\n focusQuery() {\n $(\"#cloze-sentences-query\").focus();\n }\n\n search() {\n this.setState({ loading: true });\n const {\n context,\n page,\n perPage,\n query\n } = this.state;\n $.ajax({\n data: {\n context,\n page,\n per_page: perPage,\n query,\n },\n method: 'get',\n url: this.props.url\n })\n .done((data) => {\n this.setState({\n clozeSentences: data.clozeSentences,\n loading: false,\n selected: new Map(),\n total: data.total\n }, this.focusQuery.bind(this));\n })\n .fail(() => {\n this.setState({ loading: false });\n alert('Oh no! There was an error searching sentences. Please try again and let us know if you see this error message again.');\n });\n }\n\n renderBulkAdd() {\n if(!this.state.bulkAddVisible || this.props.addToCollectionDisabled) {\n return null;\n }\n\n return (\n \n this.setState({ bulkAddVisible: !this.state.bulkAddVisible })}\n style={{ marginRight: 10 }}\n >\n Add {selectedCount} Selected to Collection\n \n {\n if(sentencesCount === selectedCount) {\n this.setState({ selected: new Map() });\n }\n else {\n this.setState({ selected: new Map(this.state.clozeSentences.map((cs) => [cs.id, true])) });\n }\n }}\n >\n {selectedCount === sentencesCount ? 'Uns' : 'S'}elect All\n \n
\n );\n }\n\n renderResults() {\n if(this.state.loading) {\n return Loading...
;\n }\n\n if(!this.state.clozeSentences) {\n return null;\n }\n\n return (\n \n
\n {this.renderBulkControls()}\n {this.renderBulkAdd()}\n {this.state.clozeSentences.map((cs) => (\n {\n const newSelected = new Map(this.state.selected);\n if(selected) {\n newSelected.set(cs.id, true);\n }\n else {\n newSelected.delete(cs.id);\n }\n this.setState({ selected: newSelected });\n }}\n sentence={cs}\n selected={this.state.selected.has(cs.id)}\n />\n ))}\n
\n );\n }\n\n onSubmit(e) {\n e.preventDefault();\n this.setState({ page: 1 }, () => this.search());\n }\n\n renderPagination() {\n if(!this.state.clozeSentences || this.state.loading) {\n return null;\n }\n\n const { page, perPage, total, updating } = this.state;\n\n return (\n \n {this.renderBulkControls()}\n {this.renderBulkAdd()}\n {this.state.clozeSentences.map((cs) => (\n
\n this.setState({ [e.target.name]: e.target.value })}\n onSubmit={(e) => this.onSubmit(e)}\n query={query}\n />\n {this.renderResults()}\n {this.renderPagination()}\n
\n );\n }\n}\n","import React from \"react\";\n\nimport moment from 'moment';\n\nimport CollectionSelector from \"../CollectionSelector\";\n\nexport default class BlukAdd extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n collection: null,\n readyForReview: true,\n upsertUrl: null\n };\n }\n\n add() {\n $.ajax({\n contentType: 'application/json',\n method: 'post',\n data: JSON.stringify({\n updates: this.props.clozeSentences\n .filter((cs) => this.props.selected.has(cs.id))\n .map((cs) => ({\n alternative_answers: cs.alternative_answers,\n cloze_sentence_id: cs.id,\n hint: cs.hint,\n multiple_choice_options: cs.multiple_choice_options,\n next_review: this.state.readyForReview ? moment().format(\"YYYY-MM-DD\") : null,\n notes: cs.notes,\n pronunciation: cs.pronunciation,\n tatoeba_id: cs.tatoeba_id,\n text: cs.text,\n translation: cs.translation,\n }))\n }),\n url: this.state.upsertUrl\n })\n .done(() => {\n this.props.onAdd();\n })\n .fail(() => {\n alert(\"Oh no! There was an error adding the sentences, sorry about that. Please try again and let us know if you see this message again.\");\n });\n }\n\n cancel() {\n this.props.onCancel();\n }\n\n renderControls() {\n if(!this.state.upsertUrl) {\n return null;\n }\n\n const selectedCount = this.props.selected.size;\n\n return (\n \n
\n );\n }\n\n render() {\n return (\n \n \n
\n \n \n \n
\n \n this.setState({\n collection,\n upsertUrl: collection.collectionClozeSentencesUpsertUrl\n })}\n />\n {this.renderControls()}\n
\n
\n );\n }\n}\n","import React from \"react\";\n\nexport default function SearchForm(props) {\n const { children, context, disabled, query, onChange, onSubmit } = props;\n\n return (\n \n );\n};\n","import React from \"react\";\n\nimport AddSentenceToCollectionModal from \"../AddSentenceToCollectionModal\";\nimport Icon from \"../Icon\";\nimport ManageCollectionModal from \"../ManageCollectionModal\";\n\nexport default class SearchResult extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n addToCollection: false,\n collections: null,\n loadingCollections: false,\n };\n }\n\n componentDidUpdate(prevProps, prevState) {\n }\n\n loadCollections() {\n this.setState({ loadingCollections: true });\n\n $.ajax({\n url: this.props.sentence.collectionsUrl\n })\n .done((data) => {\n this.setState({\n collections: data.clozeSentence.collections,\n languagePairing: data.languagePairing,\n loadingCollections: false\n });\n })\n .fail(() => {\n alert(\"Oh no! There was an error loading the collections. Sorry about that. Please try again and let us know if you see this message again.\");\n this.setState({ loadingCollections: false });\n });\n }\n\n renderTatoebaBtn() {\n const { tatoebaId } = this.props.sentence;\n\n if(tatoebaId) {\n return (\n \n
\n {!addToCollectionDisabled && (\n <>\n this.props.onSelect(e.target.checked)} style={{ left: 0, position: 'absolute' }} />\n
\n );\n }\n\n renderCollections() {\n if(this.state.loadingCollections) {\n return Loading...;\n }\n else if(!this.state.collections) {\n return (\n \n );\n }\n else if(this.state.collections.length) {\n return (\n \n Collections:\n {this.state.collections.map((c) => (\n \n ))}\n \n );\n }\n else {\n return Not found in any collections!;\n }\n }\n\n renderAddToCollection() {\n if(!this.state.addToCollection) {\n return null;\n }\n\n const collectionClozeSentence = Object.assign({}, this.props.sentence);\n delete collectionClozeSentence.id;\n collectionClozeSentence.clozeSentenceId = this.props.sentence.id;\n\n return (\n \n \n
\n \n )}\n \n {parts[0]}{parts[1].split('}}')[0]}{parts[1].split('}}')[1]}\n
\n {translation}
\n {pronunciation && {pronunciation}
}\n \n {this.renderAudioBtn()}\n {this.renderTatoebaBtn()}\n {this.renderCollections()}\n
\n this.el = el} style={{ opacity: this.props.disabled ? 0.3 : 1 }}>\n {this.renderSentence()}\n {this.renderAddToCollection()}\n {this.renderManageCollectionModal()}\n
\n );\n }\n}\n","import React from \"react\";\n\nimport ClozeSentenceSearch from \"./ClozeSentenceSearch\";\nimport Modal from \"./Modal\";\nimport ModalFooterCloseBtn from \"./ModalFooterCloseBtn\";\nimport ModalProPromo from \"./ModalProPromo\";\n\nexport default class ClozeSentenceSearchModal extends React.Component {\n renderProPromo() {\n return (\n \n \n this.textInput = el} value={text} onChange={(e) => this.handleChange(e)} />\n Wrap the cloze-word in
\n );\n }\n\n renderPercentMastered() {\n const { level, nextReview, saving } = this.state;\n const { isPro, sentenceOnly } = this.props;\n\n if(!nextReview || sentenceOnly) {\n return null;\n }\n\n return (\n {'{{'}{'}}'}, for example A {'{{'}missing{'}}'} word..\n \n \n
\n );\n }\n\n renderNextReview() {\n const { level, nextReview } = this.state;\n const {\n alreadyMasteredNextReview,\n answerQualityOptionsVisible,\n collectionClozeSentence,\n isPro,\n nextReviewByLevel\n } = this.props;\n\n if(answerQualityOptionsVisible && alreadyMasteredNextReview && level === 4) {\n const ef = collectionClozeSentence.easinessFactor || 1.5;\n const ri = collectionClozeSentence.repetitionInterval || nextReviewByLevel[4];\n const srsResponseQuality = [1, 4, 7];\n return (\n \n {[0, 1, 2, 3, 4].map((i) => (\n
\n {!isPro && Change percent mastered with Clozemaster Pro!}\n {this.renderNextReview()}\n \n this.onLevelBtnClick(e, i)}\n >\n {i * 25}%\n \n
\n ))}\n \n Next review:\n
\n );\n }\n\n return (\n - \n {['Hard', 'Normal', 'Easy'].map((r, q) => {\n let d = alreadyMasteredNextReview === 'srs' ?\n Math.ceil(ri * Math.max(ef + (0.1-(5-srsResponseQuality[q])*(0.08+(5-srsResponseQuality[q])*0.02)), 1.2)) :\n // 0.5, 1, 2\n (q === 0 ? 0.5 : q) * nextReviewByLevel[4];\n\n return (\n
- {moment().add(d, 'days').format(\"YYYY-MM-DD\")} if {r} is selected \n );\n })}\n
\n {\n e.preventDefault();\n this.setState({ level: 0, nextReview: null });\n }}\n style={{ marginTop: 2 }}\n type=\"button\"\n >\n Remove from Reviews\n \n
\n );\n }\n\n renderAddToReviewQueue() {\n const { nextReview } = this.state;\n if(this.props.sentenceOnly || !!nextReview) {\n return null;\n }\n\n return (\n Next review: {nextReview < moment().format(\"YYYY-MM-DD\") ? \"Now!\" : nextReview}
\n \n \n
\n );\n }\n\n renderFavoritedIgnored() {\n const { isPro, sentenceOnly } = this.props;\n const { saving } = this.state;\n\n if(sentenceOnly) {\n return null;\n }\n\n return (\n \n
\n );\n }\n\n renderToast() {\n if(!this.state.savedAt) {\n return null;\n }\n\n return (\n \n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n );\n }\n\n return Thanks for your input! 🙏
\n );\n }\n\n if(loading) {\n return (\n Loading...
\n );\n }\n\n return (\n <>\n Want to be able to generate more? We're considering making it possible with an add-on subscription to help support the added costs. Would you be willing to pay for an add-on subscription of $15 USD per month to generate up to 500 explanations per month?
\n- \n \n \n
{error}
\n );\n }\n\n if(explanation) {\n return (\n Loading...
\n );\n }\n\n if(!isPro) {\n // TODO!\n }\n\n return (\n\n
\n );\n}\n","import React from \"react\";\n\nimport NewCollectionForm from \"./NewCollectionForm\";\n\nexport default class CollectionSelector extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n showNewCollectionForm: false\n };\n }\n\n componentDidMount() {\n this.loadCollections();\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { onSelect } = this.props;\n const { collections, selectedId } = this.state;\n if(selectedId && selectedId !== prevState.selectedId && !!onSelect) {\n onSelect(collections.find((c) => c.id === selectedId));\n }\n }\n\n loadCollections() {\n const { collectionsUrl } = this.props;\n $.ajax({\n data: {\n filter: 'mine',\n order: 'updatedAt'\n },\n method: 'get',\n url: collectionsUrl\n })\n .done((data) => {\n const { initialSelectedCollectionId } = this.props;\n const { collections } = data;\n let { selectedId } = this.state;\n\n if(!selectedId && initialSelectedCollectionId && collections.filter((c) => c.id === initialSelectedCollectionId).length) {\n selectedId = initialSelectedCollectionId;\n }\n else if(!selectedId || !collections.filter((c) => c.id === selectedId).length) {\n selectedId = collections[0] && collections[0].id;\n }\n\n this.setState({\n collections,\n createCollectionUrl: collectionsUrl,\n loading: false,\n selectedId\n });\n })\n .fail(() => {\n alert(\"Oh no! There was an error loading collections. Sorry about that. Please try again and let us know if you see this message again.\");\n });\n }\n\n renderNewCollectionForm({ cancelable }) {\n return (\n Some sentences have an explanation from ChatGPT by default. Explanations for the rest are generated in real-time when you click Explain. There's currently a limit of {maxExplanationsPerMonth} per month to help prevent abuse as this is still a new feature. You currently have {Math.max(maxExplanationsPerMonth - countExplanationsThisMonth, 0)} remaining. Month resets in {monthResetsInDays} days. Need more? Let us know.
\n \n {/*countExplanationsThisMonth >= maxExplanationsPerMonth && (\nLoading...
;\n }\n\n if(!collections.length) {\n return this.renderNewCollectionForm({ cancelable: false });\n }\n\n if(showNewCollectionForm) {\n return this.renderNewCollectionForm({ cancelable: true });\n }\n\n return (\n \n {this.renderSelectControl()}\n
\n );\n }\n}\n","import React from \"react\";\n\nimport SpeechSynthesisBtn from \"./SpeechSynthesisBtn\";\n\nclass ConjugationGame extends React.Component {\n constructor(props) {\n super(props);\n\n this.inputRef = React.createRef();\n\n this.state = {\n answered: false,\n correct: false,\n correctSoFar: false,\n currentAnswer: \"\",\n currentIndex: null,\n history: [],\n historyVisible: false,\n loading: true\n };\n }\n\n componentDidMount() {\n // sample n selected verbs\n // load them\n // play\n // when kkkk\n\n this.loadVerbs();\n }\n\n init() {\n this.focusInput();\n\n $(window).on(\"keydown\", (e) => {\n const { answered } = this.state;\n\n if(e.which === 13) {\n e.preventDefault();\n e.stopPropagation();\n if(answered) {\n this.next();\n }\n else {\n this.setState({\n answered: true\n });\n }\n }\n });\n }\n\n loadVerbs() {\n const { verbs, verbsUrl } = this.props;\n console.log(verbs.map((v) => v.id));\n $.ajax({\n contentType: \"application/json\",\n data: JSON.stringify({ ids: verbs.map((v) => v.id) }),\n method: \"post\",\n url: verbsUrl\n })\n .done((data) => {\n this.setCandidates(data.inflectionEntries);\n this.setState({\n currentIndex: this.getRandomIndex(),\n loading: false\n }, () => this.init());\n })\n .fail(() => {\n });\n }\n\n setCandidates(entries) {\n const { checked } = this.props;\n this.candidates = [];\n entries.forEach((e) => {\n e.data.tables.forEach((t, tableIndex) => {\n t.columns.forEach((col, colIndex) => {\n col.forEach((row, rowIndex) => {\n if(colIndex === 0 || rowIndex === 0) {\n return false;\n }\n if(!checked[tableIndex][colIndex][rowIndex]) {\n return false;\n }\n this.candidates.push([\n e.term,\n e.translation,\n t.heading,\n t.columns[colIndex][0],\n t.columns[0][rowIndex],\n row\n ]);\n });\n });\n });\n });\n }\n\n focusInput() {\n this.inputRef && this.inputRef.current && this.inputRef.current.focus();\n }\n\n getRandomIndex() {\n return Math.floor(Math.random() * this.candidates.length);\n }\n\n next() {\n const { correct, currentIndex, history } = this.state;\n this.setState({\n answered: false,\n correct: false,\n correctSoFar: false,\n currentAnswer: \"\",\n currentIndex: this.getRandomIndex(),\n history: history.concat([this.candidates[currentIndex].concat([correct])])\n }, () => this.focusInput());\n }\n\n renderInput() {\n const { answered, correct, correctSoFar, currentAnswer, currentIndex } = this.state;\n const current = this.candidates[currentIndex];\n\n return (\n \n \n
\n Loading...
;\n }\n\n const current = this.candidates[currentIndex];\n\n return (\n\n
\n );\n }\n}\n\nexport default class ConjugationPractice extends React.Component {\n constructor(props) {\n super(props);\n\n console.log(props);\n\n const checked = [];\n // table-col-row\n props.demoEntry.tables.forEach((table, tableIndex) => {\n const checkedColsArr = [];\n table.columns.forEach((col, colIndex) => {\n const checkedRowsArr = [];\n col.forEach((row, rowIndex) => {\n checkedRowsArr.push(colIndex > 0 && rowIndex > 0 && row ? true : null);\n });\n checkedColsArr.push(checkedRowsArr);\n });\n checked.push(checkedColsArr);\n });\n\n const verbsMap = new Map(props.verbs.map((v) => [v.id, true]));\n\n this.state = {\n checked,\n verbsMap,\n view: \"settings\"\n };\n }\n\n componentDidUpdate(prevProps, prevState) {\n if(prevState.view !== this.state.view) {\n $(\"html, body\").animate({ scrollTop: 0 });\n }\n }\n\n renderHeading({ tableIndex }) {\n const { demoEntry } = this.props;\n const { checked } = this.state;\n\n let anyChecked = false;\n checked[tableIndex].forEach((col, colIndex) => {\n col.forEach((row, rowIndex) => {\n if(colIndex === 0 || rowIndex === 0) {\n return false;\n }\n anyChecked = anyChecked || checked[tableIndex][colIndex][rowIndex];\n });\n });\n\n return (\n \n \n
\n {current[1]}
\n {current[2]} - {current[3]}
\n \n
\n {current[4]}
\n {answered && !correct && {current[5]}
}\n {answered && !correct && (\n \n {this.renderInput()}\n
\n {answered && (\n \n {correct && (\n
\n )}\n \n {!answered && }\n {!answered && }\n {answered && }\n {answered && {correct ? \"🎉\" : \"❌\"}}\n
\n\n \n \n
\n {historyVisible && (\n- \n {history.map((h, i) => (\n
- \n {h[0]} {h[2]} {h[3]} - {h[4]} {h[5]} {h[6] ? \"🎉\" : \"❌\"}\n{h[1]}\n \n ))}\n
\n \n
\n );\n }\n\n renderColControl({ colIndex, rowIndex, tableIndex }) {\n const { demoEntry } = this.props;\n const { checked } = this.state;\n\n let anyChecked = null;\n checked[tableIndex].forEach((col, _colIndex) => {\n col.forEach((row, _rowIndex) => {\n if(_colIndex === 0 || _rowIndex === 0) {\n return false;\n }\n if(_rowIndex === rowIndex && demoEntry.tables[tableIndex].columns[_colIndex][_rowIndex]) {\n anyChecked = !!anyChecked || checked[tableIndex][_colIndex][_rowIndex];\n }\n });\n });\n\n return (\n \n );\n }\n\n renderRowControl({ colIndex, rowIndex, tableIndex }) {\n const { demoEntry } = this.props;\n const { checked } = this.state;\n\n let anyChecked = null;\n checked[tableIndex].forEach((col, _colIndex) => {\n col.forEach((row, _rowIndex) => {\n if(_colIndex === 0 || _rowIndex === 0) {\n return false;\n }\n if(_colIndex === colIndex && demoEntry.tables[tableIndex].columns[_colIndex][_rowIndex]) {\n anyChecked = !!anyChecked || checked[tableIndex][_colIndex][_rowIndex];\n }\n });\n });\n\n return (\n \n );\n }\n\n renderCell({ colIndex, rowIndex, tableIndex }) {\n const { demoEntry } = this.props;\n const { checked } = this.state;\n\n if(rowIndex === 0 && colIndex === 0) {\n return <> ;\n }\n else if(colIndex === 0) {\n return this.renderColControl({ colIndex, rowIndex, tableIndex });\n }\n else if(rowIndex === 0) {\n return this.renderRowControl({ colIndex, rowIndex, tableIndex });\n }\n\n const content = demoEntry.tables[tableIndex].columns[colIndex][rowIndex];\n\n return (\n \n );\n }\n\n renderSettings() {\n const { demoEntry, demoEntryTerm, verbs } = this.props;\n const { checked, verbsMap } = this.state;\n\n const anyChecked = checked.find((table, tableIndex) => (\n checked[tableIndex].find((col, colIndex) => (\n col.find((row, rowIndex) => {\n if(colIndex === 0 || rowIndex === 0) {\n return false;\n }\n return checked[tableIndex][colIndex][rowIndex];\n })\n ))\n ));\n const verbsSelected = Array.from(verbsMap.values()).filter((v) => v).length;\n\n return (\n\n
\n
\n
\n
\n );\n }\n\n render() {\n const { checked, verbsMap, view } = this.state;\n const { languageCode, languageIso, languagePairingSlug, verbs, verbsUrl } = this.props;\n\n if(view === \"settings\") {\n return this.renderSettings();\n }\n\n return (\n \n
Example: {demoEntryTerm}
\n {demoEntry.tables.map((t, tableIndex) => (\n\n {this.renderHeading({ tableIndex })}\n
\n ))}\n \n {t.columns.map((col, colIndex) => (\n
\n \n {col.map((row, rowIndex) => (\n
\n ))}\n \n {this.renderCell({ colIndex, rowIndex, tableIndex })}\n
\n ))}\n \n
\n
\n Verbs
\n \n\n {verbs.map((v) => (\n
\n \n \n
\n ))}\n \n
\n
Please select one or more parts of speech!
}\n {!verbsSelected &&Please select one or more verbs!
}\nCopied! 🎉
\n );\n }\n\n return (\n <>\n {!!errors && {errors}.
}\n\n \n
\n );\n }\n}\n","import React from \"react\";\nimport moment from 'moment';\n\nimport Modal from \"./Modal\";\nimport ModalFooterCloseBtn from \"./ModalFooterCloseBtn\";\n\nconst options = [\n ['Basic', 10],\n ['Beginner', 50],\n ['Casual', 100],\n ['Regular', 200],\n ['Serious', 500],\n ['Hardcore', 1000],\n];\n\nexport default class DailyGoalModal extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n custom: props.pointsPerDay && !options.map((o) => o[1]).includes(props.pointsPerDay),\n loading: false,\n pointsPerDay: props.pointsPerDay || 10,\n reset: false\n };\n }\n\n hide() {\n this.modal.hide();\n }\n\n renderGoalOptions() {\n const { custom, loading, pointsPerDay } = this.state;\n return [...options, [\"Custom\", \"custom\"]].map((o) => (\n \n \n Copy to Collection\n
\n\n {this.renderContent()}\n
\n \n \n
\n ));\n }\n\n onSubmit(e) {\n e.preventDefault();\n\n const { pointsPerDay, reset } = this.state;\n\n if(!pointsPerDay) {\n return false;\n }\n\n this.setState({ loading: true });\n\n $.ajax({\n contentType: \"application/json\",\n data: JSON.stringify({\n date: moment().format(\"YYYY-MM-DD\"),\n points_per_day: pointsPerDay,\n reset\n }),\n method: \"put\",\n url: this.props.updateUrl\n })\n .done((data) => {\n const { pointsPerDay, streak } = data.dailyGoal;\n this.setState({ loading: false }, () => this.props.onUpdate({\n pointsPerDay,\n streak\n }));\n })\n .fail(() => {\n this.setState({ loading: false });\n });\n }\n\n renderCustomGoalInput() {\n const { custom, pointsPerDay } = this.state;\n\n if(!custom) {\n return null;\n }\n\n return (\n \n \n this.setState({ pointsPerDay: e.target.value ? (Math.min(parseInt(e.target.value), 99999) || null) : null })}\n type=\"text\"\n value={pointsPerDay}\n />\n
\n );\n }\n\n render() {\n const { loading, pointsPerDay, reset } = this.state;\n return (\n Selecting a daily goal will help you stay motivated{!!this.props.targetLanguageName && `while learning ${this.props.targetLanguageName}`}! You can change your goal at any time.
\n \n \n );\n }\n}\n","import React from \"react\";\n\nimport DailyGoalModal from \"./DailyGoalModal\";\nimport DailyGoalStats from \"./DailyGoalStats\";\n\nexport default class DailyGoalPanel extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n modalVisible: false,\n pointsPerDay: props.pointsPerDay,\n streak: props.streak\n };\n }\n\n renderModal() {\n if(!this.state.modalVisible) {\n return null;\n }\n\n const { streak } = this.props;\n\n return (\n\n Learning a language requires practice every day. Stay motivated!\n \n
\n );\n }\n\n const { streak } = this.state; \n const { hoursLeftToday, numPointsToday, timeZone } = this.props;\n\n return (\n \n
\n );\n }\n}\n\n","import React from \"react\";\n\nimport DailyGoalModal from \"./DailyGoalModal\";\nimport DailyGoalStats from \"./DailyGoalStats\";\n\nexport default class DailyGoalPanelV2 extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n modalVisible: false,\n pointsPerDay: props.pointsPerDay,\n streak: props.streak\n };\n }\n\n renderModal() {\n if(!this.state.modalVisible) {\n return null;\n }\n\n const { streak } = this.props;\n\n return (\n \n
\n \n \n
\n Daily Goal\n \n {this.renderBody()}\n
\n {this.renderModal()}\n \n {/*Learning a language requires practice every day.
Stay motivated!*/}\n \n
\n );\n }\n\n const { streak } = this.state; \n const { hoursLeftToday, numPointsToday, timeZone } = this.props;\n\n return (\n <>\n Stay motivated!*/}\n \n
\n pointsPerDay ? \"#5cb85c\" : \"inherit\", fontSize: \"2em\" }}>{numPointsToday}/{pointsPerDay}\n
\n {streak} days in a row
\n {numPointsToday > pointsPerDay && Includes today 🎉
}\n \n );\n\n // return (\n // \n
\n );\n }\n}\n\n","import React from \"react\";\n\nimport Icon from \"./Icon\";\n\nexport default function DailyGoalStats(props) {\n const pointsPerDay = parseInt(props.pointsPerDay);\n const numPointsToday = parseInt(props.numPointsToday);\n const includesToday = (numPointsToday >= pointsPerDay);\n const streak = parseInt(props.streak);\n const hoursLeftToday = props.hoursLeftToday;\n\n return (\n \n
\n {this.renderModal()}\n \n Daily Goal\n {!!this.state.pointsPerDay && (\n \n )}\n
\n {this.renderBody()}\n\n
\n );\n}\n","import React from \"react\";\n\nimport DailyReminderModal from \"./DailyReminderModal\";\nimport Icon from \"./Icon\";\n\nexport default class DailyReminderBtn extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dailyReminderEmail: props.dailyReminderEmail,\n modalVisible: false\n };\n }\n\n renderModal() {\n if(!this.state.modalVisible) {\n return null;\n }\n\n return (\n \n Points: {numPointsToday} / {pointsPerDay}\n {!!includesToday &&
\n Streak: {streak} Day{streak === 1 ? '' : 's'} \n
\n */}\n\n Time remaining:\n {hoursLeftToday} Hours\n
\n {!!props.timeZone && (\n\n Time zone:\n {props.timeZone}\n
\n )}\nKeep up the great work and master your language faster! Like they say, practice makes perfect and you have to exercise that muscle. 💪
\n \n \n );\n }\n}\n","import React from \"react\";\nimport DailyReminderModal from \"./DailyReminderModal\";\n\nexport default class DailyReminderPanel extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dailyReminderEmail: props.dailyReminderEmail,\n modalVisible: false\n };\n }\n\n renderContent() {\n const { isSignedIn, timeZone } = this.props;\n const { dailyReminderEmail } = this.state;\n\n if(dailyReminderEmail) {\n return (\n\n Daily reminder email is set for {dailyReminderEmail} {timeZone}.\n \n
\n );\n }\n\n return (\n \n
\n );\n }\n\n renderModal() {\n if(!this.state.modalVisible) {\n return null;\n }\n\n return (\n Keep your streak alive!
\n \n \n
\n );\n }\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport moment from 'moment';\n\nimport { collectionPctStr } from \"../helpers\";\n\nimport Ad from \"./Ad\";\nimport AddFileToCollectionModal from \"./Dashboard/AddFileToCollectionModal\";\nimport AddToCollectionModal from \"./Dashboard/AddToCollectionModal\";\nimport AddSentenceToCollectionModal from \"./AddSentenceToCollectionModal\";\nimport AddClozeFromWordsToCollectionModal from \"./Dashboard/AddClozeFromWordsToCollectionModal\";\nimport AddTextToCollectionModal from \"./Dashboard/AddTextToCollectionModal\";\nimport ChallengeFriendsPanel from \"./Dashboard/ChallengeFriendsPanel\";\nimport ClozeListeningCollectionComponent from \"./Dashboard/ClozeListeningCollectionComponent\";\nimport ClozeListeningPanel from \"./Dashboard/ClozeListeningPanel\";\nimport ClozeSentenceSearchModal from \"./ClozeSentenceSearchModal\";\nimport CollectionGroupingsPanel from \"./Dashboard/CollectionGroupingsPanel\";\nimport CollectionsModalTable from \"./Dashboard/CollectionsModalTable\";\nimport CollectionPanel from \"./Dashboard/CollectionPanel\";\nimport CollectionProgressBar from \"./Dashboard/CollectionProgressBar\";\nimport Core1kCollectionComponent from \"./Dashboard/Core1kCollectionComponent\";\nimport DailyGoalPanel from \"./DailyGoalPanel\";\nimport DailyReminderPanel from \"./DailyReminderPanel\";\nimport DeleteLanguagePairingModal from \"./Dashboard/DeleteLanguagePairingModal\";\nimport DownloadFavoritesModal from \"./Dashboard/DownloadFavoritesModal\";\nimport FadeIn from \"./FadeIn\";\nimport FavoritesModal from \"./Dashboard/FavoritesModal\";\nimport FastTrackComponent from \"./Dashboard/FastTrackComponent\";\nimport FastTrackPanel from \"./Dashboard/FastTrackPanel\";\nimport FastTrackV2Panel from \"./Dashboard/FastTrackV2Panel\";\nimport FlagSprite from \"./FlagSprite\";\nimport FollowClozemasterPanel from \"./Dashboard/FollowClozemasterPanel\";\nimport FrequencyCollectionsComponent from \"./Dashboard/FrequencyCollectionsComponent\";\nimport FullHistoryBtn from \"./Dashboard/FullHistoryBtn\";\nimport GoogleAdPanel from \"./Dashboard/GoogleAdPanel\";\nimport GooglePanelsAd from \"./Dashboard/GooglePanelsAd\";\nimport GoogleRightSidebarAd from \"./Dashboard/GoogleRightSidebarAd\";\nimport GrammarCollectionsComponent from \"./Dashboard/GrammarCollectionsComponent\";\nimport Icon from \"./Icon\";\nimport LanguagePairingSettingsModal from \"./Dashboard/LanguagePairingSettingsModal\";\nimport LeaderboardStatPanel from \"./Dashboard/LeaderboardStatPanel\";\nimport Loading from \"./Loading\";\nimport LoadingOverlay from \"./LoadingOverlay\";\nimport ManageCollectionModal from \"./ManageCollectionModal\";\nimport MasteredIcon from \"./MasteredIcon\";\nimport Modal from \"./Modal\";\nimport ModalFooterCloseBtn from \"./ModalFooterCloseBtn\";\nimport MoreStatsModal from \"./Dashboard/MoreStatsModal\";\nimport MyCollectionsPanel from \"./Dashboard/MyCollectionsPanel\";\nimport Onboarding from \"./Onboarding\";\nimport PlayingIcon from \"./PlayingIcon\";\nimport PlayOptionsModal from \"./PlayOptionsModal\";\nimport RandomCollectionComponent from \"./Dashboard/RandomCollectionComponent\";\nimport ResetProgressModal from \"./Dashboard/ResetProgressModal\";\nimport ReviewSettingsModal from \"./Dashboard/ReviewSettingsModal\";\nimport ReviewStatPanel from \"./Dashboard/ReviewStatPanel\";\n\nfunction getCurrentDateStr() {\n const date = new Date();\n\n // Format day/month/year to two digits\n const formattedDate = ('0' + date.getDate()).slice(-2);\n const formattedMonth = ('0' + (date.getMonth() + 1)).slice(-2);\n const formattedYear = date.getFullYear().toString().substr(2,2);\n\n return [formattedYear, formattedMonth, formattedDate].join('-');\n}\n\nexport default class Dashboard extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n aboutToPlayCollection: null,\n aboutToPlayScope: null,\n addSentenceToCollectionVisible: false,\n favoritesModalVisible: false,\n managingCollection: null,\n managingCollectionScope: null,\n moreStatsVisible: false,\n reviewModalVisible: false,\n reviewSettingsModalVisible: false\n };\n }\n\n getCollectionsStats(collections) {\n let numPlaying = 0;\n let numMastered = 0;\n let numReadyForReview = 0;\n let numFavorited = 0;\n\n for(let i = 0, n = collections.length; i < n; i++) {\n numPlaying += collections[i].numPlaying;\n numMastered += collections[i].numMastered;\n numReadyForReview += collections[i].numReadyForReview;\n numFavorited += collections[i].numFavorited;\n }\n\n return {\n numFavorited,\n numMastered,\n numPlaying,\n numReadyForReview\n };\n }\n\n componentDidMount() {\n const $dashboard = $('#dashboard');\n\n $dashboard.popover({\n selector: '[data-toggle=\"popover\"]'\n });\n $dashboard.on('show.bs.popover', '[data-toggle=\"popover\"]', function(e) {\n $('[data-toggle=\"popover\"]').not(this).popover('destroy');\n });\n $dashboard.on('inserted.bs.popover', '[data-toggle=\"popover\"]', function(e) {\n $('.popover .popover-title').append(\n ''\n );\n });\n $dashboard.on('click', '.popover .close', () => {\n $('[data-toggle=\"popover\"]').popover('destroy');\n });\n\n $('#dashboard').tooltip({ selector: '[data-toggle=\"tooltip\"]' });\n\n // run check to load voices\n window.clozemaster.systemTtsAvailable(this.props.targetLanguageIso, this.props.targetLanguageCode)\n\n this.loadLanguagePairing();\n }\n\n loadLanguagePairing() {\n this.setState({ loading: true });\n const {\n includeFastTrackV2Collections,\n languagePairingUrl\n } = this.props;\n\n $.ajax({\n data: { include_fast_track_v2_collections: includeFastTrackV2Collections },\n url: languagePairingUrl\n }).done((data) => {\n const { collectionGroupings, collections, languagePairing, user } = data;\n console.log(data);\n\n const {\n clozeFromWordsUrl,\n clozeListening,\n clozeSentencesUrl,\n collectionFileImportUrl,\n collectionsUrl,\n currentLevelPoints,\n currentStreakDays,\n currentStreakIncludesToday,\n currentWeekLeaderboardRank,\n dailyGoalHoursLeftToday,\n dailyGoalPointsPerDay,\n dailyGoalStreak,\n dailyGoalUrl,\n dailyReminderEmail,\n dailyReminderEmailUrl,\n dailyStatsWebUrl,\n gameSettingsUrl,\n leaderboardsUrl,\n level,\n listeningTrialExpired,\n moreStatsUrl,\n nextLevelPoints,\n nextReviewByLevel,\n numPointsToday,\n past7DaysNewReview,\n playClozeListeningWebUrl,\n playOptions,\n playWebUrl,\n prevWeekLeaderboardRank,\n progressPerChunk,\n quickClozeUrl,\n rankingsUrl,\n resetProgressUrl,\n reviewSettingsUrl,\n score,\n sharedCollectionsUrl,\n speakingTrialExpired,\n useProgressChunks\n } = languagePairing;\n\n const { isSignedIn } = this.props;\n // this should only ever happen once after signing up\n if(isSignedIn && !user.hasRunPlayTutorial && !!window.localStorage.getItem(\"hasRunPlayTutorial\")) {\n this.saveHasRunPlayTutorial();\n }\n\n this.setState(Object.assign(this.getCollectionsStats(collections), {\n clozeFromWordsUrl,\n clozeListening,\n clozeSentencesUrl,\n collectionFileImportUrl,\n collectionGroupings,\n collections,\n collectionsUrl,\n currentLevelPoints,\n currentStreakDays,\n currentStreakIncludesToday,\n currentWeekLeaderboardRank,\n dailyGoalHoursLeftToday,\n dailyGoalPointsPerDay,\n dailyGoalStreak,\n dailyGoalUrl,\n dailyReminderEmail,\n dailyReminderEmailUrl,\n dailyStatsUrl: dailyStatsWebUrl,\n gameSettingsUrl,\n leaderboardsUrl,\n level,\n listeningTrialExpired,\n loading: false,\n moreStatsUrl,\n nextLevelPoints,\n nextReviewByLevel,\n numPointsToday,\n past7DaysNewReview,\n playClozeListeningUrl: playClozeListeningWebUrl,\n playLanguagePairingWebUrl: playWebUrl,\n playOptions,\n prevWeekLeaderboardRank,\n progressPerChunk,\n quickClozeUrl,\n rankingsUrl,\n resetProgressUrl,\n reviewSettingsUrl,\n score,\n sharedCollectionsUrl,\n speakingTrialExpired,\n useProgressChunks,\n user\n }), () => this.initPast7DaysChart());\n });\n }\n\n initPast7DaysChart() {\n const { past7DaysNewReview } = this.state;\n const dates = [];\n const newCounts = [];\n const reviewCounts = [];\n\n past7DaysNewReview.forEach((d) => {\n dates.push(moment(d.date, \"YYYY-MM-DD\").format('ddd MMM D'));\n newCounts.push(d.numNew);\n reviewCounts.push(d.numReview);\n });\n\n const ctx = this.past7DaysCanvas.getContext('2d');\n const data = {\n labels: dates,\n datasets: [\n {\n label: \"New\",\n fillColor: \"rgba(20,220,20,0.2)\",\n strokeColor: \"rgba(20,220,20,1)\",\n pointColor: \"rgba(20,220,20,1)\",\n pointStrokeColor: \"#fff\",\n pointHighlightFill: \"#fff\",\n pointHighlightStroke: \"rgba(20,220,20,1)\",\n data: newCounts\n },\n {\n label: \"Reviewed\",\n fillColor: \"rgba(151,187,205,0.5)\",\n strokeColor: \"rgba(151,187,205,1)\",\n pointColor: \"rgba(151,187,205,1)\",\n pointStrokeColor: \"#fff\",\n pointHighlightFill: \"#fff\",\n pointHighlightStroke: \"rgba(151,187,205,1)\",\n data: reviewCounts\n }\n ]\n };\n const chart = new Chart(ctx).Line(data, { multiTooltipTemplate: \"<%= datasetLabel %>: <%= value %>\", });\n }\n\n getPast7DaysNewReviewAvg(attr) {\n const avg = this.state.past7DaysNewReview.reduce((n, d) => n += d[attr], 0) / 7.0;\n return Math.round(avg * 10) / 10;\n }\n\n saveHasRunPlayTutorial() {\n $.ajax({\n contentType: \"application/json\",\n data: JSON.stringify({\n user: { has_run_play_tutorial: true }\n }),\n method: \"put\",\n url: \"/api/v1/users\"\n });\n }\n\n renderStats() {\n const state = this.state;\n const { isSignedIn } = this.props;\n\n return (\n \n
\n {this.renderModal()}\n \n {this.renderContent()}\n
\n \n
\n );\n }\n\n openFavoritesModal(action) {\n this.setState({ favoritesModalVisible: action });\n }\n\n renderReviewModal() {\n const { reviewModalVisible, collections } = this.state;\n // TODO! aboutToPlayScope = 'ready_for_review'\n }\n\n renderDownloadFavoritesModal() {\n const { downloadFavoritesCollection, user } = this.state;\n\n if(!downloadFavoritesCollection) {\n return null;\n }\n\n return (\n \n
\n \n this.setState({ aboutToPlayCollection: collection, aboutToPlayScope: 'ready_for_review' })}\n onReviewSettingsBtnClick={this.onReviewSettingsBtnClick.bind(this)}\n playLanguagePairingUrl={state.playLanguagePairingWebUrl}\n />\n
\n \n
\n Score
\n {state.score.toLocaleString()}
\n \n \n
\n \n \n
\n \n
\n \n Level \n
\n {state.level}
\n \n
\n \n {(state.nextLevelPoints - state.score).toLocaleString()} more points to level {state.level + 1}\n \n \n \n
\n \n
\n \n Streak {this.props.timeZone}\n
\n \n {state.currentStreakDays} Day{state.currentStreakDays === 1 ? '' : 's'}\n {state.currentStreakIncludesToday ? : ''}\n
\n \n
\n \n 7-day Average\n \n
\n \n \n {this.getPast7DaysNewReviewAvg('numNew')}\n \n \n \n {this.getPast7DaysNewReviewAvg('numReview')}\n \n \n
\n Ready for Review
\n {state.numReadyForReview.toLocaleString()}
\n \n \n spaced repetition system to help you remember what you learn. Intervals are set to 1 day (25% Mastered), 10 days (50% Mastered), 30 days (75% Mastered), and 180 days (100% Mastered) by default. Clozemaster Pro users can customize the intervals. You can also manually master or reset sentences while playing.\" }>\n How reviews work\n \n \n \n
\n */}\n Leaderboard
\n \n {state.ranking ? '' : 'N/A'}\n {state.ranking && state.prevDayRanking ?\n state.prevDayRanking ? 'up uptrend' : 'down downtrend')} data-toggle=\"tooltip\" title={'Ranked ' + state.prevDayRanking + ' yesterday UTC'}>\n : null\n }\n
\n This week\n \n \n \n \n
\n
\n Favorites
\n {state.numFavorited.toLocaleString()}
\n \n | \n \n | \n\n \n \n \n | \n
\n
\n );\n }\n\n return (\n Get in the game, track your progress, and more!
\n Sign up\n\n
\n Sign up or Login to get in the game, track your progress, and more! Or try out Clozemaster by playing random sentences in anonymous mode.\n \n
\n \n );\n }\n\n renderCore1kCollection() {\n const { collections, progressPerChunk, useProgressChunks } = this.state;\n const { isSignedIn } = this.props;\n const core1kCollection = collections.find((c) => c.type === \"Core1kCollection\");\n\n if(!core1kCollection) {\n return null;\n }\n\n return (\n\n {this.renderAnonPlayPanel()}\n {this.renderMainPanel()}\n {this.renderPanelsAd()}\n {this.renderFrequencyCollectionsPanel()}\n {this.renderMyCollectionsPanel()}\n {this.renderGrammarCollectionsPanel()}\n {this.renderCollectionGroupingsPanel()}\n {this.renderClozeListeningPanel()}\n {this.renderClozeReadingPanel()}\n {this.renderRandomCollection()}\n {this.renderLegacyFastTrack()}\n {this.renderNsfwCollection()}\n
\n );\n }\n\n renderClozeListeningPanel() {\n if(!this.state.playClozeListeningUrl) {\n return null;\n }\n\n const { clozeListening, collections, playClozeListeningUrl, progressPerChunk, useProgressChunks, user } = this.state;\n const { isSignedIn } = this.props;\n\n const clozeListeningCollection = collections.find((c) => c.type === \"ClozeListeningCollection\");\n\n if(clozeListeningCollection) {\n return (\n \n
\n );\n }\n\n renderAddToCollectionModal() {\n const { addingToCollection, addToCollectionVisible, user } = this.state;\n\n if(!addToCollectionVisible) {\n return null;\n }\n\n return (\n \n \n Cloze-Reading\n \n
\n
\n \n \n
\n \n Cloze-Reading\n \n
\n \n Level up your reading skills with longer texts.\n \n Go\n \n \n
\n - \n \n {/*= link_to current_user.pro_subscriber? ? more_stats_path(@language_pairing.slug) : pro_signup_path, disabled: !current_user.pro_subscriber?, class: 'btn btn-default btn-lg', data: { toggle: 'tooltip' }, title: 'More stats' do*/}\n \n {/*= link_to current_user.pro_subscriber? ? sentences_path(@language_pairing.slug) : pro_signup_path, disabled: !current_user.pro_subscriber?, class: 'btn btn-default btn-lg', data: { toggle: 'tooltip' }, title: 'Search sentences' do*/}\n \n {/*= link_to current_user.pro_subscriber? ? settings_path(@language_pairing.slug) : pro_signup_path, disabled: !current_user.pro_subscriber?, class: 'btn btn-default btn-lg', data: { toggle: 'tooltip', html: true }, title: 'Review settings' do*/}\n \n
\n
\n );\n }\n\n renderGiftPro() {\n if(this.props.giftsDisabled) {\n return null;\n }\n\n return (\n \n
\n Get fluent faster.
\n \n Clozemaster Pro\n\n
\n );\n }\n\n renderLatestBlogPost() {\n return (\n \n Gift Pro!\n
\n \n
\n Send Clozemaster Pro as a gift and get a free month!
\n Learn More\n \n \n\n
\n );\n }\n\n renderChallengeFriends() {\n return null;\n\n // // just skipping the challenge friends if anon for now\n // // should probably add some kind of way to share later\n // // or improve challenge friend so you follow them automatically?\n // if(!this.props.isSignedIn) {\n // return null;\n // }\n\n // return (\n // \n Blog\n
\n \n Latest blog post:\n \n
\n \n
\n );\n }\n\n renderFullHistoryBtn() {\n const { dailyStatsUrl, user } = this.state;\n const { isSignedIn } = this.props;\n\n return (\n \n
\n );\n }\n\n renderOnboarding() {\n if(true) {\n return null;\n }\n\n return (\n - \n
- \n \n \n
- \n \n \n
- \n \n \n
\n {this.renderProPromo()}\n {this.renderDailyReminder()}\n {this.renderDailyGoal()}\n {this.renderGiftPro()}\n {this.renderLatestBlogPost()}\n {this.renderRightColumnAd()}\n {this.renderChallengeFriends()}\n {this.renderFollowClozemaster()}\n {this.renderUpdatingOverlay()}\n
\n );\n }\n\n renderRightColumnAd() {\n const { user } = this.state;\n const { isPro } = user;\n const { googleAdsEnabled } = this.props;\n\n if(isPro || !googleAdsEnabled) {\n return null;\n }\n\n return (\n \n
\n );\n }\n}\n","import React from \"react\";\n\nimport BulkSentenceCreationEditor from \"./BulkSentenceCreationEditor\";\nimport Loading from \"../Loading\";\nimport Modal from \"../Modal\";\nimport ModalFooterCloseBtn from \"../ModalFooterCloseBtn\";\nimport TextareaAutosize from 'react-textarea-autosize';\n\nexport default class AddClozeFromWordsToCollectionModal extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n phase: 'form',\n text: '',\n numSentences: '5'\n };\n }\n\n hide() {\n this.modal.hide();\n }\n\n onSubmit(e) {\n e.preventDefault();\n this.setState({ phase: 'processing' });\n $.ajax({\n data: { text: this.state.text, num_sentences: this.state.numSentences },\n method: 'post',\n url: this.props.clozeFromWordsUrl,\n })\n .done((createData) => {\n this.handleCreateData(createData);\n })\n .fail(() => {\n this.setState({ phase: 'form' });\n alert(\"Oh no! There was an error processing the text - sorry about that. Please try again and let us know if you see this message again.\");\n });\n }\n\n handleCreateData(createData) {\n if(createData.errors) {\n alert(\"Oh no! There was an error processing the text: \" + createData.errors + \" Sorry about that. Please try again and let us know if you see this message again.\");\n this.setState({ phase: 'form' });\n return false;\n }\n\n const statusInterval = setInterval(() => {\n $.ajax({\n url: createData.url\n })\n .done((statusData) => {\n const { error, result } = statusData;\n if(error) {\n clearInterval(statusInterval);\n this.setState({ phase: 'form' });\n alert(\"Oh no! There was an error processing the text: \" + error + \" - sorry about that. Please try again and let us know if you see this message again.\");\n }\n if(result) {\n clearInterval(statusInterval);\n this.setState({ phase: 'edit', result: result.map((r, id) => ({ id, ...r })) });\n }\n })\n .fail(() => {\n this.setState({ phase: 'form' });\n alert(\"Oh no! There was an error processing the text - sorry about that. Please try again and let us know if you see this message again.\");\n });\n }, 5000);\n }\n\n renderProcessing() {\n return (\n \n
\n {this.renderAnonUserPromo()}\n \n \n {this.props.targetLanguageName} from {this.props.baseLanguageName}\n \n
\n {this.renderMainContent()}\n
\n {this.renderRightColumn()}\n {this.renderProControls()}
\n \n {this.props.targetLanguageName} from {this.props.baseLanguageName}\n \n
\n {this.renderMainContent()}\n {error}
;\n }\n }\n\n renderProcessing() {\n const { result } = this.state;\n return (\n\n \n this.setState({ separator: e.target.value })} /> \n \n this.setState({ separator: e.target.value })} /> \n \n
\n )\n }\n }\n\n renderForm() {\n return (\n \n );\n }\n\n renderEditor() {\n return (\n \n
\n );\n }\n\n renderPaging() {\n const { page, perPage, total, updating } = this.state;\n return (\n \n this.setState({ selectedCollectionClozeSentencesMap: e.target.checked ? new Map(collectionClozeSentences.map((ccs) => [ccs.id, true])) : new Map() })}\n style={{ margin: 0 }}\n />\n
\n Apply to all selected:\n \n \n \n \n \n \n \n \n
\n Loading...
;\n }\n if(!collectionClozeSentences) {\n return null;\n }\n if(!collectionClozeSentences.length) {\n returnNo results found!
;\n }\n\n return (\n\n {this.renderPageControls()}\n {collectionClozeSentences.map((ccs) => (\n {\n if(confirm('Are you sure you want to delete this sentence? This action cannot be undone.')) {\n this.destroy([ccs]);\n }\n }}\n isDeleteable={isCollectionEditable}\n isReportable={!isCollectionEditable}\n isTextEditable={isCollectionEditable}\n key={ccs.id}\n onCopy={() => this.setState({ hasCopiedSentences: true })}\n onSelectedChange={(selected) => {\n console.log(\"SELECTED\", selected);\n selectedCollectionClozeSentencesMap.set(ccs.id, selected);\n this.setState({ selectedCollectionClozeSentencesMap: new Map(selectedCollectionClozeSentencesMap) });\n }}\n onTokenClick={({ cloze, text }) => {\n this.setState({\n query: text\n }, () => $(\".modal\").animate({ scrollTop: 0 })); // back to the top\n }}\n selected={!!selectedCollectionClozeSentencesMap.get(ccs.id)}\n targetLanguageCode={targetLanguageCode}\n targetLanguageEnglishName={targetLanguageEnglishName}\n targetLanguageIso={targetLanguageIso}\n targetLanguageName={targetLanguageName}\n update={(update, callback) => this.update([ccs], update, callback)}\n updating={this.state.updating}\n />\n ))}\n {this.renderPaging()}\n
\n );\n }\n\n deleteCollectionProgress() {\n this.setState({ updating: true });\n\n $.ajax({\n method: 'delete',\n url: this.props.deleteCollectionProgressUrl\n })\n .done(() => {\n this.modal.hide();\n })\n .fail(() => {\n this.setState({ updating: false });\n alert('Oh no! There was an error deleting the collection\\'s progress. Sorry about that. Please try again and let us know if you see this error message again.');\n });\n }\n\n onResetProgressClick() {\n if(confirm('Are you sure? THIS WILL DELETE ALL YOUR PROGRESS FOR THIS COLLECTION. THIS CANNOT BE UNDONE.')) {\n if(confirm('Checking one more time - ARE YOU POSITIVE YOU WANT TO RESET YOUR PROGRESS FOR THIS COLLECTION? There\\'s no going back.')) {\n this.deleteCollectionProgress();\n }\n }\n }\n\n renderModalFooterDeleteCollectionProgress() {\n if(!this.props.deleteCollectionProgressUrl) {\n return null;\n }\n\n if(this.props.isSignedIn === false) {\n return null;\n }\n\n const { loading, updating } = this.state;\n\n return (\n \n \n Warning! This will delete all your progress for this collection.\n \n );\n }\n\n renderModalFooter() {\n return (\n <>\n {this.renderModalFooterDeleteCollectionProgress()}\n - \n
- {Math.round(ccs.level / 4 * 100) + '% Mastered'} \n
- Next Review: {ccs.nextReview === \"2100-01-01\" ? \"🧠\" : (ccs.nextReview <= moment().format('YYYY-MM-DD') ? Due! : ccs.nextReview)} \n
- Correct: {ccs.numPlayed - ccs.numIncorrect} \n
- Incorrect: {ccs.numIncorrect || 0} \n
\n
\n );\n }\n\n renderControls() {\n const ccs = this.props.collectionClozeSentence;\n const {\n baseLanguageEnglishName,\n collectionsUrl,\n collectionClozeSentencesErrorUrl,\n isDeleteable,\n isReportable,\n targetLanguageEnglishName,\n targetLanguageName,\n update,\n updating\n } = this.props;\n\n return (\n \n
\n );\n }\n\n onCopyBtnClick() {\n this.setState({\n copyPopoverVisible: !this.state.copyPopoverVisible\n });\n }\n\n onDeleteBtnClick() {\n this.props.destroy();\n }\n\n renderCopyPopover() {\n if(!this.state.copyPopoverVisible) {\n return null;\n }\n\n const { collectionClozeSentence, collectionsUrl, onCopy } = this.props;\n\n return (\n \n
\n \n \n \n \n \n \n \n
\n \n {this.renderTokensBtn()}\n {!!ccs.ttsAudioUrl && }\n {!!collectionsUrl && }\n
\n \n update({ text: value }, callback)}\n value={ccs.text}\n />}\n update({ translation: value }, callback)}\n value={ccs.translation}\n />\n update({ pronunciation: value }, callback)}\n value={ccs.pronunciation}\n />\n {!!ccs.transliteration && update({ notes: value }, callback)}\n value={ccs.notes}\n />\n update({ hint: value }, callback)}\n value={ccs.hint}\n />\n update({ alternative_answers: value }, callback)}\n />\n
\n );\n }\n}\n","import React from \"react\";\n\nexport default class CollectionClozeSentenceEditableAttribute extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n editing: false,\n value: props.value || ''\n };\n }\n\n onSubmit(e) {\n e.preventDefault();\n this.props.update(this.state.value, (success) => {\n success && this.setState({ editing: false });\n });\n }\n\n renderHelpText() {\n if(this.props.helpText) {\n return \n onSelectedChange(e.target.checked)} style={{ margin: 0 }} />\n
\n \n {this.renderControls()}\n
\n {this.renderText()}{/* */}
\n {this.renderTokens()}\n {isTextEditable && Transliteration: {ccs.transliteration}
}\n \n {!!ccs.nextReview && this.renderStats()}\n
\n {/* TODO! if owner - alt answers, hint (hint either way?), % mastered control 0/25/etc */}\n {this.renderCopyPopover()}\n {this.props.helpText}
;\n }\n }\n\n render() {\n const { className, label, name, updating } = this.props;\n const { editing, value } = this.state;\n\n if(editing) {\n return (\n \n );\n }\n\n return (\n {label}: {value}
\n );\n }\n}\n\n","import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\n\nexport default function Markdown({ children: markdown, ...props }) {\n return (\n \n Your daily reminder email is set for {dailyReminderEmail} {timeZone}.\n
\n );\n }\n\n return <>\n {dailyReminder}\n\n\n
\n\n {\n dailyReminder?.show && (\n <>\n You've reached today's limit of { sentenceLimit } sentences! 🙌
\nCome back tomorrow or get Clozemaster Pro for unlimited access to everything on Clozemaster!
\n\n {this.props.footer}\n
\n );\n }\n\n getSizeClassName() {\n const { size } = this.props;\n if(size === \"large\") {\n return \"modal-lg\";\n }\n else if(size === \"small\") {\n return \"modal-sm\";\n }\n return \"\";\n }\n\n hide(args) {\n const { noFade, onHidden } = (args || {});\n\n if(noFade) {\n $(this.modal).removeClass(\"fade\");\n }\n\n if(onHidden) {\n this.$modal.one(\"hidden.bs.modal\", onHidden);\n }\n\n $(this.modal).modal(\"hide\");\n }\n\n render() {\n const { noFade } = this.props;\n return ReactDOM.createPortal(\n this.modal = el}>\n
,\n document.querySelector(\"body\")\n );\n }\n}\n","import React from \"react\";\n\nimport Modal from \"./Modal\";\n\nexport default class ModalControl extends React.Component {\n componentDidMount() {\n }\n\n componentWillUnmount() {\n }\n\n renderControl() {\n return this.props.control;\n }\n\n renderModal() {\n return ReactDOM.createPortal(\n \n
\n \n
\n \n {!this.props.noClose && !this.props.noCloseBtn && (\n \n )}\n
\n {this.props.title}
\n\n {this.props.children}\n
\n {this.renderFooter()}\n {this.props.modalContentExtra}\n \n
\n );\n }\n\n renderContent() {\n const { collectionGroupings, collections, loading } = this.state;\n\n if(loading) {\n return \n {body}\n
\n \n {c.proOnly ? (\n \n \n
\n Pro!\n \n ) : Play
\n \n Pro!\n \n ) : Play
\n {!!fastTrackCollection && (\n \n {this.renderCollection(fastTrackCollection, (\n <>\n \n )}\n {!!mostCommonWordsCollections.length && (\n \n \n )}\n {!!grammarCollections.length && (\n \n \n )}\n {!!randomCollection && (\n \n {this.renderCollection(randomCollection, (\n <>\n \n )}\n
\n );\n }\n\n render() {\n const { onHidden } = this.props;\n return (\n {fastTrackCollection.name}
\nPlay a collection of {fastTrackCollection.numSentences.toLocaleString()} sentences with {fastTrackCollection.numSentences.toLocaleString()} unique cloze-words in order of difficulty.
\n \n ))}\nNot sure where to start? Start with this collection!
\n Most Common Words
\nPlay collections of sentences grouped by difficulty.
\nNot sure where to start? Try the {mostCommonWordsCollections[0].name} collection and go up from there.
\n {mostCommonWordsCollections.map((c) => (\n\n {this.renderCollection(c, (\n <>\n
\n ))}\n {c.name}
\n{c.numSentences.toLocaleString()} sentences
\n \n ))}\n \n Grammar Challenges
\nMaster difficult grammar in context.
\n {grammarCollections.map((c) => (\n\n {this.renderCollection(c, (\n <>\n
\n ))}\n {c.name}
\n{c.numSentences.toLocaleString()} sentences
\n \n ))}\n \n {randomCollection.name}
\nPlay a collection of {randomCollection.numSentences.toLocaleString()} randomly selected sentences.
\n {!fastTrackCollection &&Not sure where to start? Start with this collection!
}\n \n ))}\n \n
\n );\n }\n}\n\nclass Scene2 extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n collectionsModalVisible: false\n };\n }\n\n componentDidMount() {\n let typeLine1Timeout = null;\n let typeLine2Timeout = null;\n\n const typeLine2 = (index) => {\n if(!$(\"#line-2 .letter\").get(index)) {\n $(\"#buttons\").delay(1000).animate({ opacity: 1 });\n }\n $(\"#line-2 .letter\").eq(index).css(\"opacity\", 1);\n typeLine2Timeout = setTimeout(() => typeLine2(index + 1), 50);\n };\n\n const typeLine1 = (index) => {\n if(!$(\"#line-1 .letter\").get(index)) {\n typeLine2Timeout = setTimeout(() => typeLine2(0), 1000);\n return false;\n }\n $(\"#line-1 .letter\").eq(index).css(\"opacity\", 1);\n typeLine1Timeout = setTimeout(() => typeLine1(index + 1), 50);\n };\n\n typeLine1Timeout = setTimeout(() => typeLine1(0), 500);\n\n let skipped = false;\n $(window).on(\"keypress\", (e) => {\n // enter or space\n if(!skipped && (e.which === 13 || e.which === 32)) {\n e.preventDefault();\n clearTimeout(typeLine1Timeout);\n clearTimeout(typeLine2Timeout);\n $(\"#line-1 .letter, #line-2 .letter, #buttons\").stop(true, true).css(\"opacity\", 1);\n skipped = true;\n }\n });\n }\n\n renderOnboardingCollections() {\n const { collectionsModalVisible } = this.state;\n const { languagePairingUrl } = this.props;\n\n if(!collectionsModalVisible) {\n return null;\n }\n\n return (\n A “{\"cloze\".split(\"\").map((l) => {l})}”{\" sentence is a sentence with a word \".split(\"\").map((l) => {l})} (missing).
\n {\"The objective is to fill in the missing word based on context or the given translation.\".split(\"\").map((l) => {l})}
\n \n \n
\n {this.renderOnboardingCollections()}\n \n );\n }\n}\n\n// class RefinerOnboardingQuestions extends React.Component {\n// constructor(props) {\n// super(props);\n// \n// this.state = {\n// loading: true,\n// showContinueBtn: false\n// };\n// }\n// \n// componentDidMount() {\n// const { allDone, formId } = this.props;\n// \n// if(window._refiner) {\n// let showContinueBtnTimeout = null;\n// window._refiner(\"onShow\", (formId) => {\n// clearTimeout(showContinueBtnTimeout);\n// this.setState({\n// loading: false,\n// showContinueBtn: false // in case it was shown\n// });\n// });\n// window._refiner(\"onClose\", (formId) => {\n// this.setState({\n// loading: false,\n// showContinueBtn: true\n// });\n// });\n// window._refiner(\"showForm\", formId, true);\n// // in case form fails to load in 1s\n// showContinueBtnTimeout = setTimeout(() => {\n// this.setState({\n// loading: false,\n// showContinueBtn: true\n// });\n// }, 3000);\n// }\n// else {\n// allDone();\n// }\n// }\n// \n// render() {\n// const { allDone } = this.props;\n// const { loading, showContinueBtn } = this.state;\n// return (\n// {letters(\"With Clozemaster you play through \")}“{letters(\"collections\")}”{letters(\" of hundreds and even thousands of cloze sentences to rapidly expand your vocabulary.\")}
\n {letters(\"Clozemaster Pro users can also create their own collections.\")}
\n \n \n// {loading && \n// \n// \n// )}\n//
\n// );\n// }\n// }\n\n\nexport default class Onboarding extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n index: 1\n };\n }\n\n render() {\n const { index } = this.state;\n const { justPlayUrl, languagePairingUrl } = this.props;\n\n if(index === 2) {\n return (\n \n // {!!currentElement.selector && (\n // \n // )}\n //
,\n // document.querySelector('body')\n // );\n // }\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport Icon from \"./Icon\";\nimport FadeIn from \"./FadeIn\";\nimport Loading from \"./Loading\";\nimport Modal from \"./Modal\";\nimport Panel from \"./Panel\";\n\nexport default class OnboardingWelcome extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n showWelcomeMessage: false\n };\n }\n\n componentDidMount() {\n const { formId } = this.props;\n\n if(window._refiner && formId) {\n let showWelcomeMessageTimeout = null;\n window._refiner(\"onShow\", (formId) => {\n clearTimeout(showWelcomeMessageTimeout);\n this.setState({\n loading: false,\n showWelcomeMessage: false // in case it was shown\n });\n });\n window._refiner(\"onClose\", (formId) => {\n this.setState({\n loading: false,\n showWelcomeMessage: true\n });\n });\n window._refiner(\"showForm\", formId, true);\n // in case form fails to load in 1s\n showWelcomeMessageTimeout = setTimeout(() => {\n this.setState({\n loading: false,\n showWelcomeMessage: true\n });\n }, 3000);\n }\n else {\n this.setState({\n loading: false,\n showWelcomeMessage: true\n });\n }\n }\n\n render() {\n const { loading, showWelcomeMessage } = this.state;\n const { isLanguagePairingSelected, startPath } = this.props;\n\n return (\n \n //
\n // {currentElement.text}
\n // \n //\n {loading && \n \n )}\n
\n );\n }\n}\n","import React from \"react\";\n\nimport LoadingOverlay from \"./LoadingOverlay\";\n\nexport default class PaddleCheckout extends React.Component {\n constructor(props) {\n super(props);\n\n this.checkUserStatusCount = 0;\n\n this.state = {\n loading: false\n };\n }\n\n componentDidMount() {\n const { sandbox, vendor } = this.props;\n\n if(sandbox) {\n Paddle.Environment.set('sandbox');\n // to simulate checkout completed in tests\n window.handleCheckoutCompleted = (data) => this.handleCheckoutCompleted(data);\n }\n\n Paddle.Setup({\n eventCallback: (data) => {\n if(data.event === \"Checkout.Close\") {\n if(data.eventData.checkout.completed) {\n this.handleCheckoutCompleted(data);\n }\n }\n },\n vendor: parseInt(vendor)\n });\n\n this.setPrices();\n }\n\n setPrices() {\n const { discountPct, bigYearlyPriceFont, sandbox } = this.props;\n\n const product_ids = $(\".price\").map(function() {\n return $(this).find(\"[data-product]\").data(\"product\");\n }).toArray().join(\",\");\n\n $.ajax({\n dataType: \"jsonp\",\n data: { product_ids },\n timeout: 3000,\n url: `https://${sandbox ? \"sandbox-\" : \"\"}checkout.paddle.com/api/2.0/prices`\n })\n .done((data) => {\n if(!data.success) {\n this.fallbackSetPrices();\n return false;\n }\n\n try {\n data.response.products.forEach((r) => {\n const $price = $(`[data-product=\"${r.product_id}\"]`).parents(\".price\");\n const listPrice = r.subscription ? r.subscription.list_price.gross : r.list_price.gross;\n const prettifyPrice = (price) => (\n new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: r.currency\n }).format(price)\n );\n const prettyListPrice = prettifyPrice(listPrice);\n\n $price.find(\".default .dollars\").text(prettyListPrice);\n\n if(r.subscription && r.subscription.trial_days) {\n $price.siblings(\".period\").after(`${r.subscription.trial_days} day free trial`);\n\n if(r.subscription.interval === \"year\") {\n $price.siblings(\".period\").after(`\n
\n
\n
\n \n
\n
Welcome to Clozemaster!
\nFaster and more efficient language learning awaits you beyond this screen.
\n Start${prettifyPrice(listPrice / 12)}/month`);\n $price.siblings(\".guarantee\").hide();\n }\n }\n\n if(discountPct) {\n const discountedPrice = listPrice * (1 - discountPct);\n const prettyDiscountedPrice = prettifyPrice(discountedPrice);\n $price.find(\".default .dollars\").css({\n \"font-size\": \"2em\",\n \"text-decoration\": \"line-through\"\n });\n $price.append(`\n this.onAccentBtnClick(e, accent)}\n // title={'alt+' + key}\n type=\"button\"\n >\n {accent}\n \n );\n });\n }\n\n return \n \n );\n }\n\n renderBottomControls() {\n return (\n this.setState({ reportModalVisible: false })}\n url={currentSentence.reportUrl}\n />\n );\n }\n\n endRound() {\n if(confirm(\"Are you sure you want to end this round?\")) {\n this.setState({ roundEnded: true });\n }\n }\n\n renderUltModal() {\n return (\n \n \n this.setState({ sentenceControlVisible: true })}\n onError={() => this.setState({ sentenceControlVisible: true })}\n playAudio={this.playAudio.bind(this)}\n />*/}\n \n {this.renderSentenceControl()}\n {this.renderCurrentSentence()}\n {this.renderSrsControls()}\n \n );\n }\n\n renderPromoModal() {\n if(!this.state.promoModalVisible) {\n return null;\n }\n\n const { maxBeforePromo } = this.props;\n\n return (\n \n
\n )}\n noClose={true}\n size=\"small\"\n title=\"Pro\"\n >\n \n ${prettyDiscountedPrice}\n
\n `);\n if(r.subscription && r.subscription.interval === \"year\") {\n $price.siblings(\".per-month\").text(`${prettifyPrice(discountedPrice / 12)}/month`);\n if(bigYearlyPriceFont) {\n $price.find(\".discounted-price\").css({ fontSize: \"4em\" });\n }\n }\n }\n });\n } catch(e) {\n this.fallbackSetPrices();\n }\n })\n .fail(() => {\n this.fallbackSetPrices();\n });\n }\n\n fallbackSetPrices() {\n const { bigYearlyPriceFont, discountPct } = this.props;\n\n $(\".price\").each(function() {\n const $price = $(this);\n const product = $price.find(\"[data-product]\").data(\"product\");\n\n Paddle.Product.Prices(product, function(data) {\n console.log(data);\n const grossPrice = data.recurring ? data.recurring.price.gross : data.price.gross;\n $price.find(\".default .dollars\").text(grossPrice);\n const yearly = data.recurring && data.recurring.subscription && data.recurring.subscription.type === \"year\";\n\n if(data.recurring && data.recurring.subscription && data.recurring.subscription.trial_days) {\n $price.siblings(\".period\").after(`${data.recurring.subscription.trial_days} day free trial`);\n\n if(yearly) {\n $price.siblings(\".guarantee\").hide();\n }\n }\n\n // TODO! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat\n if(discountPct && !grossPrice.match(/,/)) {\n const m = grossPrice.match(/(\\D+)(\\d.+)/);\n const discounted = m[1] + parseFloat(m[2] * (1 - discountPct)).toFixed(2);\n $price.find(\".default .dollars\").css({\n \"font-size\": \"2em\",\n \"text-decoration\": \"line-through\"\n });\n $price.append(`\n ${discounted}
\n `);\n }\n });\n });\n }\n\n handleCheckoutCompleted(data) {\n const { sandbox } = this.props;\n\n if(sandbox) {\n console.log(data);\n }\n\n this.setState({ \n loading: true\n }, () => this.checkUserStatus(data));\n }\n\n // track then redirect\n onFinishedWaiting(eventCallbackData) {\n const { ga, mixpanel, tap } = window;\n const { eventData } = (eventCallbackData || {});\n const { userUuid } = this.props;\n\n try {\n // google analytics\n ga && ga('send', 'event', 'User', 'subscribed to pro');\n // mixpanel\n mixpanel && mixpanel.track && mixpanel.track('User subscribed to pro');\n }\n catch(e) {\n // do nothing, getting to the redirect is more important for ux\n }\n\n setTimeout(() => this.redirect(), 500); // give tracking requests half a second to send\n }\n\n redirect() {\n window.location = \"/pro-welcome\";\n }\n\n checkUserStatus(eventCallbackData) {\n if(this.checkUserStatusCount >= 5) {\n return this.onFinishedWaiting(eventCallbackData);\n }\n\n const { isProSubscriberUrl } = this.props;\n\n $.ajax({\n url: isProSubscriberUrl\n }) \n .done((data) => {\n if(data.user.isPro) {\n return this.onFinishedWaiting(eventCallbackData);\n }\n this.checkUserStatusCount += 1;\n setTimeout(() => this.checkUserStatus(eventCallbackData), 2000);\n })\n .fail(() => {\n this.onFinishedWaiting(eventCallbackData);\n });\n }\n\n render() {\n const { loading } = this.state;\n\n if(loading) {\n return \n
\n );\n}\n","import React from \"react\";\n\nexport default (props) => {\n return (\n {page > 1 && }
\n \n Total: {total.toLocaleString()} Page: {page} \n
\n {(page * perPage) < total && }
\n \n {props.heading &&
\n );\n};\n","// X duration total?\n// O what happens on end round?\n// X daily stats\n// X help\n// X feedback\n// X last play on ucvs\n// - infinite load\n// - admin ui\n// - dashboard panel\n// - make public\nimport React from \"react\";\n\nimport moment from 'moment';\n\nimport { LANGUAGE_ACCENT_MAP, secondsToHHMMSSStr, splitTextOnCloze } from \"../helpers\";\n\nimport ClozeSentence from \"./ClozeSentence\";\nimport FadeOut from \"./FadeOut\";\nimport FlagSprite from \"./FlagSprite\";\nimport Icon from \"./Icon\";\nimport Incorrect from \"./PlayCollection/Incorrect\";\nimport ListeningControl from \"./PlayCollection/ListeningControl\";\nimport Loading from \"./Loading\";\nimport Modal from \"./Modal\";\nimport Points from \"./PlayCollection/Points\";\nimport ReportModal from \"./PlayClozeListening/ReportModal\";\n\nexport default class PlayClozeListening extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n answered: false,\n correct: null,\n currentAnswer: '',\n currentSentenceIndex: null,\n promoModalVisible: false,\n reportModalVisible: false,\n loading: true,\n // points: null,\n // score: 0,\n sentences: [],\n sentenceControlVisible: false,\n sentenceVisible: false,\n textInputValue: '',\n totalDuration: 0\n };\n }\n\n componentDidMount() {\n this.loadSentences();\n }\n\n componentDidUpdate(prevProps, prevState) {\n if(prevState.loading && !this.state.loading) {\n this.initWavesurfer();\n }\n\n if(this.state.currentSentenceIndex !== prevState.currentSentenceIndex) {\n this.wavesurfer.load(this.getCurrentSentence().audioUrl);\n }\n\n const { isPro, maxBeforePromo, numPlayedToday } = this.props;\n if(!isPro && (this.state.currentSentenceIndex + numPlayedToday) >= maxBeforePromo && !this.state.promoModalVisible) {\n this.setState({ promoModalVisible: true });\n }\n }\n\n initWavesurfer() {\n this.wavesurfer = WaveSurfer.create({\n container: '#waveform',\n waveColor: 'rgba(68,157,68,0.5)',\n progressColor: '#5cb85c'\n });\n this.wavesurfer.on('error', () => {\n alert('Oh no! There was an error. Sorry about that. Please try again and let us know if you see this message again.');\n this.setState({ sentenceVisible: true });\n });\n this.wavesurfer.on('pause', () => {\n this.setState({ isPlayingAudio: false });\n });\n this.wavesurfer.on('play', () => {\n this.setState({ isPlayingAudio: true });\n });\n this.wavesurfer.on('seek', () => {\n this.playAudio();\n });\n this.wavesurfer.on('ready', () => {\n if(!!this.state.currentSentenceIndex) {\n this.playAudio();\n }\n });\n }\n\n loadSentences() {\n this.setState({ loading: true });\n\n $.ajax({\n url: this.props.playUrl\n })\n .done((data) => {\n console.log(data);\n this.setState({\n currentSentenceIndex: 0,\n loading: false,\n sentences: data.sentences\n });\n })\n .fail(() => {\n alert(\"Oh no! There was an error loading the sentences. Sorry about that. Please refresh the page and let us know if you see this message again.\");\n });\n }\n\n loadMoreSentences() {\n $.ajax({\n url: this.props.playUrl\n })\n .done((data) => {\n console.log(data);\n const existingSentenceIds = this.state.sentences.map((s) => s.id); \n this.setState({\n sentences: this.state.sentences.concat(data.sentences.filter((s) => existingSentenceIds.indexOf(s.id) < 0))\n });\n })\n .fail(() => {\n alert(\"Oh no! There was an error loading more sentences. Sorry about that. Please refresh the page and let us know if you see this message again.\");\n });\n }\n\n getCurrentSentence() {\n return this.state.sentences[this.state.currentSentenceIndex];\n }\n\n playPauseAudio() {\n this.wavesurfer.playPause();\n }\n\n playAudio(start) {\n this.wavesurfer.play(start);\n // return null;\n\n // if(this.sentenceAudio) {\n // this.sentenceAudio.pause();\n // }\n\n // const currentSentence = this.getCurrentSentence();\n // // const { gameSettings } = this.state;\n\n // this.sentenceAudio = new Audio(currentSentence.audioUrl);\n // // this.sentenceAudio.playbackRate = speed || parseFloat(gameSettings.textToSpeechSpeed) || 1;\n // if(onPlay) {\n // this.sentenceAudio.addEventListener('play', onPlay);\n // }\n // if(onEnded) {\n // this.sentenceAudio.addEventListener('ended', onEnded);\n // }\n // if(onError) {\n // this.sentenceAudio.addEventListener('error', onError);\n // }\n // this.sentenceAudio.play().catch(() => onError && onError());\n // return this.sentenceAudio;\n }\n\n onSubmitAnswer(e) {\n e.preventDefault();\n\n if(this.state.answered) {\n this.handleSrsResponse(3);\n return false;\n }\n\n const currentSentence = this.getCurrentSentence();\n const { preClozeStr, cloze, postClozeStr } = splitTextOnCloze(currentSentence.text);\n const correct = this.state.textInputValue.toLowerCase().replace(/^\\s+|\\s+$/g, '') === cloze.toLowerCase();\n // const points = correct ? 4 : 0;\n\n this.sendAnswer(correct);\n\n this.setState({\n answered: true,\n correct,\n // points,\n // score: this.state.score + points\n totalDuration: this.state.totalDuration + currentSentence.duration\n }, () => this.playAudio(0));\n }\n\n sendAnswer(correct) {\n const currentSentence = this.getCurrentSentence();\n $.ajax({\n contentType: 'application/json',\n data: JSON.stringify({\n sentence: { correct }\n }),\n method: 'post',\n url: currentSentence.answerUrl\n })\n .done((data) => {\n // TODO! update sentence?\n })\n .fail(() => {\n alert(\"Oh no! There was an error saving the answer. Sorry about that. Please let us know if you see this message again.\");\n });\n }\n\n sendSrsResponse(q) {\n const currentSentence = this.getCurrentSentence();\n const easinessFactor = this.getEasinessFactor({ ef: currentSentence.easinessFactor, q });\n const repetitionInterval = this.getRepetitionInterval({ ef: easinessFactor, q, ri: currentSentence.repetitionInterval });\n this.updateCurrentSentence({\n easiness_factor: easinessFactor,\n last_played_date: moment().format(\"YYYY-MM-DD\"),\n next_review: moment().add(repetitionInterval, 'days').format(\"YYYY-MM-DD\"),\n repetition_interval: repetitionInterval,\n });\n }\n\n updateCurrentSentence(attrs) {\n const currentSentence = this.getCurrentSentence();\n $.ajax({\n contentType: 'application/json',\n data: JSON.stringify({ sentence: attrs }),\n method: 'put',\n url: currentSentence.url\n })\n .done((data) => {\n // TODO! update sentence?\n })\n .fail(() => {\n alert(\"Oh no! There was an error updating the sentence. Sorry about that. Please let us know if you see this message again.\");\n });\n }\n\n ignore() {\n if(confirm(\"Are you sure? This will remove the sentence from your queue.\")) {\n this.updateCurrentSentence({ ignored: true });\n this.next();\n }\n }\n\n reset() {\n this.updateCurrentSentence({\n easiness_factor: 2.5,\n repetition_interval: null\n });\n this.next();\n }\n\n replayToday() {\n this.updateCurrentSentence({\n easiness_factor: 2.5,\n last_played_date: moment().format(\"YYYY-MM-DD\"),\n next_review: moment().format(\"YYYY-MM-DD\"),\n repetition_interval: null,\n });\n this.next();\n }\n\n handleSrsResponse(q) {\n this.sendSrsResponse(q);\n this.next();\n }\n\n next() {\n if((this.state.sentences.length - this.state.currentSentenceIndex) <= 3) {\n this.loadMoreSentences();\n }\n\n return this.setState({\n answered: false,\n correct: null,\n currentSentenceIndex: this.state.currentSentenceIndex + 1,\n // points: 0,\n sentenceControlVisible: false,\n sentenceVisible: false,\n textInputValue: ''\n });\n }\n\n getRepetitionInterval({ ef, ri, q }) {\n if(!ri) { \n return q;\n }\n return Math.ceil(ri * Math.max(ef, 1.3));\n }\n\n getEasinessFactor({ ef, q }) {\n return ef + (0.1-(5-q)*(0.08+(5-q)*0.02));\n }\n\n onAccentBtnClick(e, accent) {\n e.preventDefault();\n\n if(e.shiftKey) {\n accent = accent.toUpperCase();\n }\n\n const t = this.state.textInputValue;\n const caretPos = this.textInput.selectionStart;\n\n this.setState({\n textInputValue: t.substring(0, caretPos) + accent + t.substring(caretPos)\n }, () => {\n this.textInput.focus();\n this.textInput.selectionStart = caretPos + 1;\n this.textInput.selectionEnd = caretPos + 1;\n });\n }\n\n renderAccentButtons() {\n if(this.state.answered) {\n return null;\n }\n\n const accentMap = LANGUAGE_ACCENT_MAP[this.props.targetLanguageIso];\n\n if(!accentMap) {\n return null;\n }\n\n const btns = [];\n for(var key in accentMap) {\n accentMap[key].split('').forEach((accent) => {\n btns.push(\n {props.heading}
}\n \n {props.children}\n
\n {btns}
;\n }\n\n renderCurrentSentence() {\n if(!this.state.sentenceVisible) {\n return null;\n }\n\n const currentSentence = this.getCurrentSentence();\n const { answered, correct } = this.state;\n const { preClozeStr, cloze, postClozeStr } = splitTextOnCloze(currentSentence.text);\n\n return (\n \n
\n );\n }\n\n renderPlayCurrentSentenceAudioBtn() {\n let content = null;\n if(this.state.isPlayingAudio) {\n content = {preClozeStr}{answered ? (correct ? {cloze} : cloze) : ________}{postClozeStr}
\n {answered && }\n {this.renderPlayCurrentSentenceAudioBtn()}
\n \n - \n
- \n {this.renderPlayCurrentSentenceAudioBtn()}\n \n \n
- \n
- \n \n Ignore\n \n
- \n \n Reset\n \n
- \n \n Today\n \n
- \n \n {this.getRepetitionInterval({ ef: this.getEasinessFactor({ q: 1, ef: currentSentence.easinessFactor }), q: 1, ri: currentSentence.repetitionInterval })} days\n \n
- \n \n {this.getRepetitionInterval({ ef: this.getEasinessFactor({ q: 3, ef: currentSentence.easinessFactor }), q: 3, ri: currentSentence.repetitionInterval })} days\n \n
- \n \n {this.getRepetitionInterval({ ef: this.getEasinessFactor({ q: 5, ef: currentSentence.easinessFactor }), q: 5, ri: currentSentence.repetitionInterval })} days\n \n
\n
\n \n \n
\n \n
\n );\n }\n\n renderReportModal() {\n if(!this.state.reportModalVisible) {\n return null;\n }\n\n const currentSentence = this.getCurrentSentence();\n\n return (\n - \n \n \n {!this.state.roundEnded && }\n {/*
- Feedback */}\n \n
The time in the top right represents unique listening time - the sum of the duration of each sentence you play. In other words if a sentence is 3 seconds long, only 3 seconds will be added regardless of how many times you listen to that sentence. The idea is to track the total time your brain is exposed to unique content (as opposed to including the same sentence multiple times on repeat).
\n \n );\n }\n\n renderRoundResults() {\n const sentences = this.state.sentences.slice(0, this.state.currentSentenceIndex);\n return (\n- \n {sentences.map((s) => {\n let a = null;\n return (\n
- \n \n\n
\n \n \n
\n \n \n );\n })}\n
Ready to rapidly improve your listening skills?
\nListen to the sentence recorded by a native speaker, see the text and fill in the misisng word, then decide if and when you want to see the sentence again. Repeat.
\nSentences and audio are from the Mozilla's awesome Common Voice dataset (check it out and contribute if you can!). Translations are from Google.
\nThe audio quality ranges from good to bad, the accents are different, the speed is variable - in other words it's an excellent challenge for your listening abilities and a fantastic way to get better at listening. If you can get to a point where you understand these sentences with ease, you'll have no problem understanding native speakers in the real world - with background noise, different accents, etc.
\nThe spaced-repetition system is meant to help you listen to these sentences again and again at optimal intervals. You can also ignore sentences that aren't useful or have particularly bad audio - if a sentence gets enough ignores we'll remove it for everyone.
\nThe time in the top right represents \"unique listening time\" - the sum of the duration of each sentence you play. In other words if a sentence is 3 seconds long, only 3 seconds will be added regardless of how many times you listen to that sentence. The idea is to track the total time your brain is exposed to unique content (as opposed to including the same sentence multiple times on repeat).
\nFeedback? Comments? Questions? Let us know!
\n \n );\n }\n\n renderContent() {\n if(this.state.roundEnded) {\n return this.renderRoundResults();\n }\n\n return (\n <>\n {/*\n
\n Get Pro Today!\n \n );\n }\n\n render() {\n const { currentSentenceIndex, loading, score, sentenceControlVisible, sentenceVisible, totalDuration } = this.state;\n const { baseLanguageFlagIso, targetLanguageFlagIso } = this.props;\n\n if(this.state.loading) {\n return Play {maxBeforePromo} sentences of Cloze-Listening per day for free.
\nGet Clozemaster Pro for unlimited Cloze-Listening practice!
\nRapidly improve your listening skills. Get fluent faster.
\n\n {this.renderPoints()}\n
\n );\n }\n}\n","import React from \"react\";\n\nimport Icon from \"../Icon\";\nimport Modal from \"../Modal\";\nimport ModalFooterCloseBtn from \"../ModalFooterCloseBtn\";\n\nexport default class ReportModal extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n reporting: false,\n reported: false\n };\n }\n\n report() {\n this.setState({ reporting: true });\n $.ajax({\n method: \"post\",\n url: this.props.url\n })\n .done(() => {\n this.setState({\n reporting: false,\n reported: true\n });\n })\n .fail(() => {\n alert(\"Oh no! There was an error reporting the sentence. Sorry about that. Please try again and let us know if you see this message again.\");\n this.setState({ reporting: false });\n });\n }\n\n renderContent() {\n if(this.state.reported) {\n return (\n <>\n \n
\n {this.renderContent()}\n {this.renderBottomControls()}\n {this.renderHelpModal()}\n {this.renderUltModal()}\n {this.renderReportModal()}\n {this.renderPromoModal()}\n \n Played: {currentSentenceIndex}
\n {/*\n
*/}\n - \n
- Score: {score} / Rank: {0} \n \n
\n Cloze-Listening
\n Thanks for your help to improve Clozemaster!
\nDon't forget to ignore this sentence via the
Strong accents, poor quality, and background noise are features of Cloze-Listening to help you improve your listening skills and understand what you hear in any context.
\nBut sometimes a bad recording is just a bad recording. Or perhaps the translation isn't quite right.
\nLet us know here. If enough users report a sentence we'll remove it for everyone.
\n\n
In the meantime, if you don't want to see this sentence any more, please ignore it via the
\n {action}: {this.props.collectionName}\n
\n );\n }\n\n renderRoundStats() {\n const { answered, currentSentenceIndex, collectionClozeSentences, correctlyAnsweredSentenceCount, numCorrect, numIncorrect } = this.state;\n const pctComplete = correctlyAnsweredSentenceCount / collectionClozeSentences.filter((s) => !s.wasIncorrect).length * 100;\n\n return (\n \n
\n );\n }\n\n renderPlayingNameBanner() {\n if(this.props.isSignedIn || this.props.isTeachingCollection) {\n return (\n this.statusBar = el} style={{ display: 'block' }}>\n
\n {(!this.isInfiniteRound() || this.state.endingInfiniteRound) && (\n \n Correct : {numCorrect}\n
\n \n Incorrect : {numIncorrect}\n
\n \n To go : {this.isInfiniteRound() && !this.state.endingInfiniteRound ? 'Inf' : (collectionClozeSentences.length - currentSentenceIndex - (answered ? 1 : 0))}\n
\n \n \n
\n )}\n {this.renderPlayingNameBanner()}\n {this.renderSignUpInPromo()}\n {this.renderRoundCompleteBanner()}\n \n {this.renderPlayingName()}\n
\n );\n }\n }\n\n renderSignUpInPromo() {\n if(this.props.isSignedIn || this.props.isTeachingCollection) {\n return null;\n }\n\n return (\n \n );\n }\n\n renderRoundCompleteBanner() {\n if(!this.isRoundComplete()) {\n return null;\n }\n\n if(this.isNoSentences()) {\n return null;\n }\n\n return (\n \n \n \n
\n );\n }\n\n renderPoints() {\n if(this.state.answered && !this.state.correct) {\n return (\n \n
\n Round Complete!
\n\n
\n );\n }\n\n getCurrentSentence() {\n const { collectionClozeSentences, currentSentenceIndex } = this.state;\n return collectionClozeSentences[currentSentenceIndex];\n }\n\n getCurrentSentenceCloze() {\n return this.getCurrentSentence().text.split('{{')[1].split('}}')[0];\n }\n\n ignoreAll(callback) {\n this.setState({ updating: true });\n const currentSentence = this.getCurrentSentence();\n $.ajax({\n url: this.state.collectionClozeSentencesIgnoreAllUrl,\n method: 'put',\n data: {\n collection_cloze_sentence_id: currentSentence.id\n }\n })\n .done((data) => {\n // TODO! doesn't update other sentences that might have the same cloze\n const newCollectionClozeSentences = this.getUpdatedCollectionClozeSentences(currentSentence.id, { ignored: true });\n this.setState({\n collectionClozeSentences: newCollectionClozeSentences,\n updating: false\n }, callback);\n })\n .fail(() => {\n this.setState({ updating: false }, callback);\n alert('Oh no! There was an error updating the sentences. Sorry about that. Please try again and let us know if you see this message again.');\n });\n }\n\n updateCurrentSentence(attr, value, callback) {\n const currentSentence = this.getCurrentSentence();\n this.updateSentence({ sentence: currentSentence, attr, value, callback });\n }\n\n // expects attr string and value, or updates object\n updateSentence({ attr = null, callback, sentence, updates = null, value = null }) {\n this.setState({ updating: true });\n let update = { id: sentence.id };\n\n if(updates) {\n update = Object.assign(updates, update);\n }\n else {\n update[attr] = value;\n }\n\n $.ajax({\n url: sentence.collectionClozeSentencesUpsertUrl || this.state.collectionClozeSentencesUpsertUrl,\n method: 'post',\n dataType: 'json',\n contentType: 'application/json',\n data: JSON.stringify({ \n updates: [update]\n })\n })\n .then((data) => {\n return $.ajax({\n data: { ids: data.ids },\n method: 'post',\n url: data.collectionClozeSentencesBatchUrl\n });\n })\n .done((data) => {\n const updated = data.collectionClozeSentences[0];\n this.setState({\n collectionClozeSentences: this.state.collectionClozeSentences.map((ccs) => updated.id === ccs.id ? Object.assign(ccs, updated) : ccs),\n updating: false\n }, callback);\n })\n .fail(() => {\n this.setState({ updating: false }, callback);\n alert('Oh no! There was an error updating. Sorry about that. Please try again and let us know if you see this message again.');\n });\n }\n\n renderFavoriteToggle() {\n const { isSignedIn } = this.props;\n\n if(!this.state.isPro) {\n return (\n \n );\n }\n\n const currentSentence = this.getCurrentSentence();\n\n return (\n \n );\n }\n\n toggleTranslation() {\n this.setState({ translationVisible: !this.state.translationVisible });\n }\n\n renderTranslationsToggle() {\n const { gameSettings, answered } = this.state;\n\n if(gameSettings.translations === 'visible' || (gameSettings.translations === 'show-after' && answered)) {\n return null;\n }\n\n const button = (\n \n
\n \n
\n \n
\n \n Score: {score}\n
\n \n {this.renderPoints()}\n
\n \n
\n \n
\n \n {/*\n
\n \n {pctMastered}% Mastered\n
\n \n \n
\n */}\n \n = 1 ? \"#5cb85c\" : null, margin: \"0 5px\" }} />\n = 2 ? \"#5cb85c\" : null, margin: \"0 5px\" }} />\n = 3 ? \"#5cb85c\" : null, margin: \"0 5px\" }} />\n = 4 ? \"#5cb85c\" : null, margin: \"0 5px\" }} />\n
\n \n {pctMastered}% Mastered\n \n
\n {answered && !!currentSentence.nextReview && (\n Num played: ${currentSentence.numPlayed}
Num correct: ${currentSentence.numPlayed - currentSentence.numIncorrect}
${lastPlayedDateBeforeAnswering ? `Last seen: ${moment().diff(lastPlayedDateBeforeAnswering, \"days\")} days ago` : \"\"}`} data-toggle=\"tooltip\">\n Review: {currentSentence.nextReview}\n
\n )}\n Num correct: ${currentSentence.numPlayed - currentSentence.numIncorrect}
${lastPlayedDateBeforeAnswering ? `Last seen: ${moment().diff(lastPlayedDateBeforeAnswering, \"days\")} days ago` : \"\"}`} data-toggle=\"tooltip\">\n Review: {currentSentence.nextReview}\n
\n \n \n
\n );\n }\n\n renderAudioHintBtn() {\n return null;\n return (\n \n );\n }\n\n renderManualResetBtn() {\n const currentSentence = this.getCurrentSentence();\n const { gameSettings } = this.state;\n const { manualMasterResetConfirm } = gameSettings;\n const { isSignedIn } = this.props;\n\n return (\n \n
\n );\n }\n\n renderCurrentSentenceControls() {\n const { answered, gameSettings, nextReviewControlsVisible } = this.state;\n\n if(!answered) {\n return (\n Next review:
\n \n {btn({ days: this.getNextReviewDays(0.5), hotkey: \"1\", label: \"Hard\", onClick: () => this.onNextReviewControlHardSelected() })}\n {btn({ days: this.getNextReviewDays(), hotkey: \"2\", label: \"Normal\", onClick: () => this.onNextReviewControlDefaultSelected() })}\n {btn({ days: this.getNextReviewDays(2), hotkey: \"3\", label: \"Easy\", onClick: () => this.onNextReviewControlEasySelected() })}\n
\n \n {btn({ days: 0, hotkey: \"4\", label: \"Reset\", mastered: \"0\", onClick: () => { this.updateCurrentSentence(\"level\", 0); this.next(); } })}\n {level !== 4 && btn({ days: nextReviewByLevel[4], hotkey: \"5\", label: \"Mastered\", mastered: \"100\", onClick: () => { this.updateCurrentSentence(\"level\", 4); this.next(); } })}\n {btn({ days: \"Never\", hotkey: \"6\", label: \"Known\", mastered: \"100\", onClick: () => { this.updateSentence({ sentence: currentSentence, updates: { level: 4, next_review: \"2100-01-01\" } }); this.next(); } })}\n
\n \n {this.renderAudioHintBtn()}\n {this.renderTranslationsToggle()}\n {this.renderTextInputToMultipleChoiceBtn()}\n {this.renderTextInputHintBtn()}\n {this.renderImageBtn()}\n
\n );\n }\n\n const { isSignedIn } = this.props;\n const currentSentence = this.getCurrentSentence();\n\n const defaultControls = (\n <>\n {this.renderTtsBtn()}\n {this.renderImageBtn()}\n {this.renderTranslationsToggle()}\n {this.renderPronunciationToggle()}\n {this.renderTransliterationToggle()}\n \n );\n\n const defaultNextReviewControls = (\n <>\n {this.renderKnowItBtn()}\n {this.renderManualMasterBtn()}\n {this.renderManualResetBtn()}\n \n );\n\n let nextReviewControls = defaultNextReviewControls;\n if(this.nextReviewControlsEnabled()) {\n nextReviewControls = this.renderNextReviewToggle();\n }\n\n return (\n \n {defaultControls}\n \n {this.renderFavoriteToggle()}\n {nextReviewControls}\n \n {this.renderGrammarBtn()}\n {/*Discuss 0*/}\n \n \n \n {/*\n \n \n {this.renderCopyCurrentSentenceToCollectionPopover()}\n \n */}\n \n {this.renderNextReviewControls()}\n
\n );\n }\n\n renderGrammarBtn() {\n const currentSentence = this.getCurrentSentence();\n const { tokensEnabled, tokensVisible } = this.state;\n const { isSignedIn } = this.props;\n\n if(isSignedIn && tokensEnabled && currentSentence.tokensCount) {\n return (\n \n );\n }\n }\n\n onGrammarBtnClick() {\n const { hasShownTokens, tokensVisible } = this.state;\n\n this.setState({ \n hasShownTokens: hasShownTokens || tokensVisible,\n tokensVisible: !tokensVisible\n });\n }\n\n showSentenceEditorModal() {\n this.setState({ sentenceEditorModalVisible: true });\n }\n\n onTextInputBeforeInput(e) {\n const { answered, gameSettings } = this.state;\n\n // prevent text input change when opening modal via shortcut hotkey\n // a, c, d, e, f, i, m, r, u\n if(gameSettings.hotkeys === \"on\" && answered && e.altKey && [65, 67, 68, 69, 70, 73, 77, 82, 85].indexOf(e.which) >= 0) {\n e.preventDefault();\n return true;\n }\n }\n\n onTextInputKeyDown(e) {\n const { answered, gameSettings } = this.state;\n\n if(answered && gameSettings.keyDownClearsTextInputAfterAnswering === \"on\" && !this.afterAnswerKeyDownTriggered) {\n // if enter then skip\n if(e.which === 13) {\n return true;\n }\n this.afterAnswerKeyDownTriggered = true;\n this.setState({ textInputValue: '' });\n }\n this.handleAccentsOnKeyDown(e);\n }\n\n onTextInputKeyUp(e) {\n if(this.justShowedSentenceTextViaEnter) {\n this.justShowedSentenceTextViaEnter = false;\n return false;\n }\n\n if(!this.state.startedTextInput) {\n this.setState({ startedTextInput: true });\n }\n this.handleAccentsOnKeyUp(e);\n }\n\n onTextInputChange(e) {\n this.setState({\n textInputChangedAfterAnswering: this.state.answered,\n textInputValue: e.target.value\n });\n }\n\n handleAccentsOnKeyDown(e) {\n // not ideal, getting tick mark when using send_keys\n // suspect related to https://github.com/SeleniumHQ/selenium/issues/2704\n if(this.props.test && e.which === 0) {\n e.preventDefault();\n return false;\n }\n\n if(this.state.gameSettings.accentShortcuts !== 'on') {\n return null;\n }\n\n const caretPos = this.textInput.selectionStart;\n const c = String.fromCharCode(e.which);\n const accents = (LANGUAGE_ACCENT_MAP[this.props.targetLanguageIso] || {})[c.toUpperCase()];\n const accentDownCount = this.state.accentDownCount || 0;\n\n if(!e.altKey || !accents) {\n return null;\n }\n\n e.preventDefault();\n\n if(!accentDownCount) {\n this.accentingText = this.state.textInputValue;\n }\n\n let accent = accents[accentDownCount % accents.length];\n if(e.shiftKey) {\n accent = accent.toUpperCase();\n }\n\n const t = this.accentingText;\n this.setState({\n accentDownCount: (accentDownCount || 0) + 1,\n textInputValue: t.substring(0, caretPos) + accent + t.substring(caretPos)\n }, () => {\n this.textInput.selectionStart = caretPos;\n this.textInput.selectionEnd = caretPos + 1;\n });\n }\n\n handleAccentsOnKeyUp(e) {\n // not ideal, getting tick mark when using send_keys\n // suspect related to https://github.com/SeleniumHQ/selenium/issues/2704\n if(this.props.test && e.which === 0) {\n e.preventDefault();\n return false;\n }\n\n if(this.state.gameSettings.accentShortcuts !== 'on') {\n return null;\n }\n\n // 17 = ctrl key, 18 = alt key\n if(e.which === 18 && this.state.accentDownCount > 0) {\n const caretPos = this.textInput.selectionStart;\n this.setState({ accentDownCount: 0 });\n this.textInput.selectionStart = caretPos + 1;\n this.textInput.selectionEnd = caretPos + 1;\n }\n }\n\n getCurrentSentenceAnswers() {\n const currentSentence = this.getCurrentSentence();\n const cloze = this.getCurrentSentenceCloze();\n return [cloze].concat(currentSentence.alternativeAnswers || []);\n }\n\n isTextInputCorrectSoFar() {\n const lowerCaseTextInputValue = this.replaceAccents((this.state.textInputValue || '').toLowerCase());\n return !!this.getCurrentSentenceAnswers().find((a) => this.replaceAccents(a.toLowerCase()).indexOf(lowerCaseTextInputValue) === 0);\n }\n\n replaceAccents(str) {\n // treat ё as е for russian\n if(this.props.targetLanguageIso === 'ru') {\n return str.replace(/ё/g, 'е').replace(/Ё/g, 'Е');\n }\n\n return str;\n }\n\n onAddToCollectionClick() {\n // show modal with custom sentence based on selection\n //\n // show modal\n this.setState({\n addSentenceToCollectionModalVisible: true,\n selectionPopoverId: null, // hide the popover\n }, () => this.clearSelection()); // clear the selection to ensure popover stays closed\n // native check button - we post this sentence for people learning from target language to confirm whether sentence is correct\n }\n\n onSearchCollectionClick() {\n this.showManageCollectionModal();\n }\n\n showManageCollectionModal() {\n this.setState({\n manageCollectionModalVisible: true,\n selectionPopoverId: null\n });\n }\n\n onSearchSentencesClick() {\n this.showSentenceSearchModal();\n }\n\n showSentenceSearchModal() {\n const { answered } = this.state;\n\n if(!answered) {\n return null;\n }\n\n this.setState({\n clozeSentenceSearchModalVisible: true,\n selectionPopoverId: null\n });\n }\n\n getSelectionPopoverProps() {\n const currentSentence = this.getCurrentSentence();\n return {\n baseLanguageIso: this.props.baseLanguageIso,\n baseLanguageCode: this.props.baseLanguageCode,\n gameSettings: this.state.gameSettings,\n gameSettingsUrl: this.state.gameSettingsUrl,\n isPro: this.state.isPro,\n isSearchCollectionAvailable: !!this.props.collectionId,\n onClose: () => this.onSelectionPopoverClose(),\n onAddToCollectionClick: () => this.onAddToCollectionClick(),\n onSearchCollectionClick: () => this.onSearchCollectionClick(),\n onSearchSentencesClick: () => this.onSearchSentencesClick(),\n openResourceLinksEditor: () => this.openResourceLinksEditor(),\n searchTranslationEntriesUrl: this.state.searchTranslationEntriesUrl,\n targetLanguageCode: this.props.targetLanguageCode,\n targetLanguageEnglishName: this.props.targetLanguageEnglishName,\n targetLanguageIso: this.props.targetLanguageIso,\n tokenizeableId: currentSentence.id,\n tokenizeableType: \"CollectionClozeSentence\",\n userSelectionTranslationsUrl: this.state.userSelectionTranslationsUrl\n };\n }\n\n openResourceLinksEditor() {\n this.onSelectionPopoverClose();\n this.setState({\n resourceLinksEditorVisible: true\n });\n }\n\n renderCloze() {\n const { mode } = this.props;\n const { answered, gameSettings, textInputValue } = this.state;\n const currentSentence = this.getCurrentSentence();\n const cloze = this.getCurrentSentenceCloze();\n\n if(this.isPlayingTextInput()) {\n return (\n \n
\n Get full access to sentence grammar with Clozemaster Pro - subscribe today and get fluent faster!
\n \n\n \n {text}\n
\n {currentSentence.pronunciation}
\n \n )}\n {!!currentSentence.transliteration && answered && (gameSettings.transliteration === 'on' || this.state.transliterationVisible) && (\n <>\n {currentSentence.transliteration}
\n \n )}\n {this.renderAccentButtons()}\n \n {\n const { textInputValue } = this.state;\n const text = this.getCurrentSentencePlainText();\n let i = 0;\n while(text[i] && (textInputValue[i] && textInputValue[i].toLowerCase() === text[i].toLowerCase())) {\n i = i + 1;\n }\n this.setState({ textInputValue: text.substring(0, i + 1) }, () => {\n this.textInput && this.textInput.focus();\n });\n }}\n title=\"Hint!\"\n >\n
\n \n this.submitAnswer(textInputValue)}\n >\n Submit\n \n
\n \n );\n }\n\n showSentenceText() {\n this.setState({ sentenceTextVisible: true }, () => this.textInput && this.textInput.focus());\n }\n\n renderCurrentSentence() {\n if(this.isListening()) {\n return null;\n }\n\n if(!this.state.answered && this.isPlayingFullTextInput()) {\n return this.renderCurrentSentenceFullTextInput();\n }\n\n const { answered, gameSettings, tokensVisible } = this.state;\n const currentSentence = this.getCurrentSentence();\n let { preClozeStr, cloze, postClozeStr } = this.getCurrentSentenceParts();\n const { baseLanguageRtl, targetLanguageRtl } = this.props;\n\n if(answered) {// && !targetLanguageCode.match(/^cmn|^jpn/)) {\n preClozeStr = this.wordify({ text: preClozeStr, idPrefix: 'pre' });\n postClozeStr = this.wordify({ text: postClozeStr, idPrefix: 'post' });\n }\n\n let sentence = (\n \n {this.isSentenceTextHidden() ? (\n \n ) : sentence}\n
\n {(gameSettings.translations === 'visible' || this.state.translationVisible) && (\n Notes: {currentSentence.notes}
}\n {answered && tokensVisible && this.renderTokens()}\n {!this.isSentenceTextHidden() && (\n <>\n {this.renderAccentButtons()}\n {this.renderCurrentSentenceControls()}\n \n )}\n \n );\n\n return content;\n }\n\n renderAccentButtons() {\n if(this.isPlayingMultipleChoice()) {\n return null;\n }\n\n if(this.state.answered) {\n return null;\n }\n\n let extras = [];\n if(this.isPlayingFullTextInput()) {\n const punctuation = this.getCurrentSentencePlainText().match(ultimatePunctuationRegex);\n if(punctuation) {\n extras = punctuation.filter((v, i, a) => a.indexOf(v) === i);\n }\n }\n\n return (\n \n {this.renderShowExplanationBtn()}\n {control}\n
\n );\n }\n\n renderShowExplanationBtn() {\n const { isPro, showExplanations } = this.state;\n const { isSignedIn } = this.props;\n\n if(!showExplanations) {\n return null;\n }\n\n const currentSentence = this.getCurrentSentence();\n\n if(!currentSentence.explanation && !currentSentence.explanationJobUrl) {\n return null;\n }\n\n // // only for pro users for now\n // if(!currentSentence.explanation && !isPro) {\n // return null;\n // }\n\n return (\n Every sentence has a % Mastered.
\",\n }\n },\n {\n selector: \".level .progress\",\n opts: {\n content: \"Answer a sentence correctly 4 times in a row to get it to 100% Mastered.
\",\n }\n },\n {\n selector: [\".level .next-review\", \".level .progress\"],\n opts: {\n content: \"Each time a sentence is answered correctly, it's queued up to be reviewed further in the future.
\",\n }\n },\n {\n selector: \".score.total\",\n opts: {\n content: \"A correct answer scores points.
\",\n }\n },\n {\n selector: \".score.total\",\n opts: {\n content: \"A sentence with a higher % Mastered scores more points, and playing text input scores more points than multiple choice.
\",\n }\n },\n {\n selector: \".score.total\",\n opts: {\n content: \"An incorrect answer scores 0 points and resets the sentence to 0% Mastered.
\",\n }\n },\n {\n selector: \".btn.game-settings\",\n opts: {\n content: \"You can change the game settings here. Some settings are different for multiple choice vs. text input.
\"\n }\n },\n {\n selector: [\".next\", \".stage .sentence\"],\n opts: {\n content: \"That's it! 🙌 More questions? Click the Help button bottom right.
\",\n }\n },\n ];\n let popoverIndex = 0;\n\n const defaultOpts = {\n animation: false,\n container: \"body\",\n html: true,\n placement: \"bottom\",\n template: `\n\n \n \n \n
\n `,\n trigger: \"manual\"\n };\n\n const showNextPopover = () => {\n this.clearTutorialPopovers();\n\n if(popoverIndex >= popovers.length) {\n this.completedTutorial();\n return false;\n }\n\n const { opts } = popovers[popoverIndex];\n let { selector } = popovers[popoverIndex];\n const isLastPopover = popoverIndex + 1 >= popovers.length;\n opts.content = `\n \n ${opts.content}\n
\n \n ${popoverIndex + 1}/${popovers.length}\n \n ${isLastPopover ? \"\" : ``}\n
\n `;\n\n // allows for selector to be an array with a fallback selector if the first is not present\n if(selector instanceof Array) {\n if(!$(selector[0]).length) {\n selector = selector[1];\n }\n else {\n selector = selector[0];\n }\n }\n\n $(selector)\n .addClass(\"tutorial-target\")\n .popover(Object.assign({}, defaultOpts, opts))\n .popover(\"show\");\n\n const $popover = $(\".popover\");\n const selectorTop = $(selector).offset().top;\n const popoverTop = $popover.offset().top;\n const popoverBottom = popoverTop + $popover.height();\n const screenTop = $(window).scrollTop();\n const screenHeight = $(window).height();\n const screenBottom = screenTop + screenHeight;\n let scrollTop = null;\n if(popoverBottom > screenBottom) {\n scrollTop = popoverBottom - screenHeight;\n }\n if(selectorTop < screenTop) {\n scrollTop = selectorTop - 20; // - 20 for buffer\n }\n if(scrollTop) {\n $(\"html, body\").animate({ scrollTop });\n }\n };\n\n $(\"body\").on(\"click.tutorial\", \".popover .btn.next\", () => {\n popoverIndex += 1;\n showNextPopover();\n });\n $(\"body\").on(\"click.tutorial\", \".popover .btn.skip\", () => {\n this.completedTutorial();\n });\n\n showNextPopover();\n }\n\n clearTutorialPopovers() {\n $(\".tutorial-target\").popover(\"destroy\").removeClass(\"tutorial-target\");\n }\n\n completedTutorial() {\n const { isSignedIn } = this.props;\n const { hasRunTutorial } = this.state;\n\n this.setState({\n hasRunTutorial: true,\n isRunningTutorial: false\n }, () => this.clearTutorialPopovers());\n\n // if it was already true can skip update\n if(hasRunTutorial) {\n return true;\n }\n\n if(isSignedIn) {\n $.ajax({\n contentType: \"application/json\",\n data: JSON.stringify({\n user: { has_run_play_tutorial: true }\n }),\n method: \"put\",\n url: \"/api/v1/users\"\n });\n }\n else {\n window.localStorage.setItem(\"hasRunPlayTutorial\", \"true\");\n }\n }\n\n next() {\n const { shouldRunTutorial } = this.props;\n const {\n currentSentenceIndex,\n collectionClozeSentences,\n gameSettings,\n hasRunTutorial,\n hasShownTokens,\n isRunningTutorial,\n tokensVisible\n } = this.state;\n\n if(this.isRoundComplete()) {\n return false;\n }\n\n this.stopSentenceAudio();\n\n if(this.isPlayingSpeaking()) {\n this.stopRecordingAndResetRecordBtn();\n }\n\n if(isRunningTutorial) {\n this.completedTutorial();\n }\n else if(shouldRunTutorial && !hasRunTutorial) {\n return this.runTutorial();\n }\n\n this.setState({\n alreadyMastered: false,\n answered: false,\n audioLoopCount: 0,\n correct: null,\n points: null,\n currentSentenceIndex: currentSentenceIndex + 1,\n currentSentenceTimerStart: secondsSinceEpoch(),\n hasShownTokens: hasShownTokens || tokensVisible,\n isAudioLooping: false,\n listeningControlPlayComplete: false,\n multipleChoice: false,\n previousAnswer: null,\n sentenceTextVisible: false,\n speakingTranscript: '',\n startedTextInput: false,\n textInputChangedAfterAnswering: false,\n textInputValue: '',\n tokensVisible: false,\n translationVisible: gameSettings.translations === 'visible',\n usedHint: false\n }, () => {\n if(this.textInput) {\n this.textInput.focus();\n }\n // infinite and within N of the end, then load more\n if(this.isInfiniteRound() && this.state.currentSentenceIndex > this.state.collectionClozeSentences.length - 5) {\n this.loadMoreCollectionClozeSentences();\n }\n });\n }\n\n onMultipleChoiceOptionClick(answer) {\n if(this.state.answered) {\n this.next();\n }\n else {\n this.submitAnswer(answer);\n }\n }\n\n renderMultipleChoiceOptions() {\n if(!this.isPlayingMultipleChoice() && !this.state.multipleChoice) {\n return null;\n }\n\n const { answered, answerSubmitted, currentSentenceIndex, correct, wordBank } = this.state;\n const currentSentenceMultipleChoiceOptions = this.getCurrentSentence().multipleChoiceOptions;\n const options = currentSentenceMultipleChoiceOptions.length ? currentSentenceMultipleChoiceOptions : wordBank\n\n return (\n \n this.startRecording()}\n >\n {this.state.recording ? 'Recording...' : 'Record'}\n \n
\n );\n }\n\n renderRoundResults() {\n const {\n collectionClozeSentences,\n collectionClozeSentencesUpsertUrl,\n collectionsUrl,\n elapsedTime,\n hasShownTokens,\n isCollectionEditable,\n isPro,\n languagePairingUrl,\n leveledUp,\n nextReviewByLevel,\n numCorrect,\n numIncorrect,\n numMastered,\n numNew,\n numReview,\n onboarding,\n reportErrorUrl,\n startingNumMastered,\n startingNumPlaying,\n startingNumReadyForReview,\n score,\n tokensUrl,\n updating\n } = this.state;\n const {\n baseLanguageEnglishName,\n baseLanguageFlagIso,\n collectionId,\n isTeachingCollection,\n languagePairingWebUrl,\n scope,\n targetLanguageCode,\n targetLanguageEnglishName,\n targetLanguageFlagIso,\n targetLanguageIso,\n targetLanguageName,\n teachingCollectionResultsUrl\n } = this.props;\n const uniqueSentences = [];\n const uniqueSentenceIds = {};\n for(let i = 0, n = collectionClozeSentences.length; i < n; i++) {\n if(!uniqueSentenceIds[collectionClozeSentences[i].id]) {\n uniqueSentences.push(collectionClozeSentences[i]);\n uniqueSentenceIds[collectionClozeSentences[i].id] = true;\n }\n }\n return (\n {this.state.speakingTranscript}
\n Feeling confident?
\n\n \n
\nThis will set the sentence to 100% Mastered and set the next review date to the year 2100.
\n \n );\n }\n\n onMasterClick() {\n this.masterModal.hide();\n this.updateCurrentSentence('level', 4);\n }\n\n renderMasterModal() {\n const { nextReviewByLevel } = this.state;\n let nextReview = moment().add(nextReviewByLevel[4], 'days').format(\"YYYY-MM-DD\");\n if(nextReview > \"2100-01-01\") {\n nextReview = \"the year 2100\";\n }\n\n return (\n Already know this sentence?
\n\n \n
\nNext review due date will be {nextReview}.
\n \n );\n }\n\n onResetClick() {\n this.resetModal.hide();\n this.updateCurrentSentence('level', 0);\n }\n\n renderResetModal() {\n const { nextReviewByLevel } = this.state;\n let nextReview = moment().add(nextReviewByLevel[0], 'days').format(\"YYYY-MM-DD\");\n\n return (\n Want to see this sentence again sooner?
\n\n \n
\nNext review due date will be {nextReview}.
\n \n );\n }\n\n popLastSentenceIfIgnoredAndIncorrect(callback) {\n const { collectionClozeSentences } = this.state;\n const lastSentence = collectionClozeSentences[collectionClozeSentences.length - 1];\n const currentSentence = this.getCurrentSentence();\n\n // when incorrect the sentence is pushed onto collectionClozeSentences\n // when we ignore it, we want to pop it off so it isn't played again\n if(lastSentence.id === currentSentence.id && lastSentence.wasIncorrect && lastSentence.ignored) {\n collectionClozeSentences.pop();\n }\n\n this.setState({\n collectionClozeSentences: JSON.parse(JSON.stringify(collectionClozeSentences))\n }, callback);\n }\n\n onIgnoreAllClick() {\n this.ignoreModal.hide();\n this.ignoreAll(() => this.popLastSentenceIfIgnoredAndIncorrect(() => this.next()));\n }\n\n onIgnoreClick() {\n this.ignoreModal.hide();\n this.updateCurrentSentence(\"ignored\", true, () => {\n this.popLastSentenceIfIgnoredAndIncorrect(() => this.next());\n });\n }\n\n renderIgnoreModal() {\n const { pro } = this.state;\n\n return (\n \n Ignoring a sentence removes it from your queue. You'll no longer see it and it won't count towards your progress.\n \n
\n {!!this.props.collectionId && (\n\n Or you can ignore all sentences with the same missing word.\n \n
\n )}\n {/*\n\n If there's an error please report it by clicking the flag button bottom right.\n
\n */}\n {!pro && (\n \n Clozemaster Pro subscribers can unignore sentences as well as search all sentences!\n \n )}\n \n );\n }\n\n renderGameSettingsControl() {\n return (\n \n );\n }\n\n renderExplanationModal() {\n const { explanationModalVisible, isPro, showExplanations } = this.state;\n\n if(!showExplanations || !explanationModalVisible) {\n return null;\n }\n\n const currentSentence = this.getCurrentSentence();\n\n return (\n{currentSentence.explanation}
\n */}\n \n
\n );\n }\n\n getUpdatedCollectionClozeSentences(id, updates) {\n const newCollectionClozeSentences = JSON.parse(JSON.stringify(this.state.collectionClozeSentences));\n for(let i = 0, n = newCollectionClozeSentences.length; i < n; i++) {\n if(newCollectionClozeSentences[i].id === id) {\n newCollectionClozeSentences[i] = Object.assign(newCollectionClozeSentences[i], updates);\n }\n }\n return newCollectionClozeSentences;\n }\n\n onSentenceEditorUpdate(sentence) {\n this.sentenceEditorModal && this.sentenceEditorModal.hide();\n const currentSentence = this.getCurrentSentence();\n const newCollectionClozeSentences = this.getUpdatedCollectionClozeSentences(currentSentence.id, sentence);\n this.setState({ collectionClozeSentences: newCollectionClozeSentences, textInputChangedAfterAnswering: sentence.text !== currentSentence.text });\n }\n\n addCurrentSentenceToCollection() {\n const currentSentence = this.getCurrentSentence();\n this.setState({\n addSentenceToCollectionModalVisible: true\n });\n }\n\n renderAddSentenceToCollectionModal() {\n if(!this.state.addSentenceToCollectionModalVisible) {\n return null;\n }\n\n const { isPro, nextReviewByLevel, selectedSentenceClozeStr, selectedSentenceText } = this.state;\n const sentence = Object.assign({}, this.getCurrentSentence());\n delete sentence.id;\n let copyable = true;\n\n if(selectedSentenceClozeStr && selectedSentenceClozeStr.match(/.*\\{\\{.+\\}\\}.*/)) { // if present and contains cloze\n sentence.text = selectedSentenceClozeStr;\n copyable = false;\n }\n else if(selectedSentenceText) {\n sentence.text = sentence.text.replace(/{{|}}/g, '');\n sentence.text = sentence.text.replace(selectedSentenceText, '{{' + selectedSentenceText + '}}');\n copyable = false;\n }\n\n return (\n \n \n
\n );\n }\n\n onDontKnowClick() {\n const cloze = this.getCurrentSentenceCloze();\n const { textInputValue } = this.state;\n\n // setting previous answer to skip off by hint\n this.setState({ previousAnswer: \"\" }, () => {\n this.submitAnswer(textInputValue || \"\");\n this.setState({\n selectionPopoverId: \"sentence\",\n selectedSentenceText: cloze\n });\n });\n }\n\n renderClozeSentenceSearchModal() {\n if(!this.state.clozeSentenceSearchModalVisible) {\n return null;\n }\n\n return (\n \n
\n {currentSentence.translation}\n
\n \n
\n Change when and how images are shown in the game settings. \n {\n this.currentSentenceImageModal.hide();\n $(\"#game-settings-modal\").modal(\"show\");\n }}\n >\n
\n \n );\n }\n\n renderModals() {\n return (\n <>\n {this.renderAddSentenceToCollectionModal()}\n {this.renderClozeSentenceSearchModal()}\n {this.renderCurrentSentenceImageModal()}\n {this.renderDiscussionModal()}\n {this.renderExplanationModal()}\n {this.renderFavoriteProPromoModal()}\n {this.renderGameSettingsModal()}\n {this.renderHelpModal()}\n {this.renderIgnoreModal()}\n {this.renderKnowItModal()}\n {this.renderLeveledUpModal()}\n {this.renderManageCollectionModal()}\n {this.renderMasterModal()}\n {this.renderMaxPlayedTodayModal()}\n {this.renderResetModal()}\n {this.renderResourceLinksEditorModal()}\n {this.renderRoundHistoryModal()}\n {this.renderSentenceEditorModal()}\n \n );\n }\n\n isRoundComplete() {\n const { currentSentenceIndex, collectionClozeSentences, loading } = this.state;\n return !loading && currentSentenceIndex >= collectionClozeSentences.length;\n }\n\n renderSearchSentencesBtn() {\n if(!this.state.isSignedIn) {\n return null;\n }\n }\n\n renderManageCollectionBtn() {\n if(!this.state.isSignedIn || !this.props.collectionId) {\n return null;\n }\n }\n\n renderRoundHistoryBtn() {\n return (\n \n
\n );\n }\n\n renderCurrentSentenceSourceLink() {\n const currentSentence = this.getCurrentSentence();\n const { answered } = this.state;\n\n if(answered && currentSentence.tatoebaId) {\n return (\n No more sentences to play!
\n![](\"https://cdn.clozemaster.com/images/sad-pikachu.gif\")
Check back later as sentences become ready for review.
\n \n\n \n Sentence Source
\n );\n }\n }\n\n renderExplanationRequest() {\n const currentSentence = this.getCurrentSentence();\n const { collectionId } = this.props;\n const { answered, languagePairingId } = this.state;\n\n if(!answered) {\n return null;\n }\n\n return (\n \n
\n );\n }\n\n onStageFadeInComplete() {\n this.textInput && setTimeout(() => this.textInput.focus(), 0);\n }\n\n renderOnboardingNextOption({ btnClassName, btnText, explainer = null, onClick, text }) {\n return (\n \n {this.renderHeader()}\n {this.renderListeningControl()}\n {this.renderSpeakingControl()}\n {this.renderCurrentSentence()}\n {this.renderGameControls()}\n
\n \n {this.renderEndInfiniteRoundBtn()}\n {this.renderHelpBtn()}\n {this.renderRoundHistoryBtn()}\n {this.renderSearchSentencesBtn()}\n {this.renderManageCollectionBtn()}\n {this.renderGameSettingsControl()}\n {this.renderReportErrorBtn()}\n {this.renderCurrentSentenceSourceLink()}\n
\n {this.props.explanationRequestsEnabled && this.renderExplanationRequest()}\n {this.renderModals()}\n\n {/*\n {this.renderReplay()}\n {this.renderReportControl()}\n */}\n\n {this.props.test && this.isPlayingTextInput() && {this.getCurrentSentenceCloze()}}\n {this.props.test && this.isPlayingFullTextInput() && {this.getCurrentSentencePlainText()}}\n {text}
\n {explainer &&{explainer}
}\n \n\n {this.renderOnboardingNextOption({ btnClassName: \"success\", btnText: <>Continue
\n );\n }\n\n render() {\n const { loading, intraRoundAd, intraRoundAdVisible, onboardingNextOptionsVisible } = this.state;\n\n if(loading) {\n return or
\n {(this.isPlayingTextInput() || this.isPlayingFullTextInput()) && this.renderOnboardingNextOption({ btnClassName: \"success\", btnText: <>Play \n {this.renderRoundStats()} \n
\n );\n }\n}\n","import React from \"react\";\n\nexport default class AccentButtons extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n shiftKeyDown: false\n };\n }\n\n componentDidMount() {\n $(window)\n .on(\"keydown\", (e) => {\n this.setState({ shiftKeyDown: e.shiftKey });\n })\n .on(\"keyup\", (e) => {\n this.setState({ shiftKeyDown: e.shiftKey });\n });\n }\n\n render() {\n const { accentMap, extras, onAccentBtnClick } = this.props;\n const { shiftKeyDown } = this.state;\n\n const btns = [];\n for(var key in accentMap) {\n accentMap[key].split('').forEach((accent) => {\n btns.push(\n \n this.onStageFadeInComplete()}>{this.renderStage()} \n
\n {/*\n {btns}
;\n }\n}\n","import React from \"react\";\n\nimport Loading from \"../Loading\";\nimport Modal from \"../Modal\";\n\nexport default class DiscussionModal extends React.Component {\n constructor(props) {\n super(props);\n\n const { baseLanguageEnglishName, targetLanguageName, translation } = props;\n\n this.state = {\n content: \"\",\n formattingHelpVisible: false\n };\n }\n\n // copied from app/assets/javascripts/challenges/play.js\n onModalReady() {\n // Init modal\n const $discussionModal = $('#discussion-modal');\n \n //// Find topic in discourse if its there, return false if not\n const getSentenceTopic = () => {\n // place spinning gif\n modalFadeOn();\n // Remove existing comments\n $discussionModal.find('.discussion .comments').html(\"Loading...\")\n $.ajax({\n url: \"/discourse/sentence_topic\",\n method: \"get\",\n contentType: \"text/html\",\n data: {\n clozeable_sentence: this.props.sentencePlainText\n }\n }).done(function(data){\n modalFadeOff();\n // parse response\n // update the modal button\n $discussionModal.find('.discussion .comments').html(data)\n // activate likes, replies & input etc.\n $discussionModal.find('.discussion .comments a').attr(\"target\", \"_blank\");\n activateReplies();\n activateEdits();\n validateInput();\n addReplyAuthors();\n addTopicLink();\n // Add comment number to modal button\n var count = $(data).filter('.post').length;\n $('.comment-count').find('.value').text(count);\n \n }).error(function(){\n $discussionModal.find('.discussion .comments').html('')\n modalFadeOff();\n modalScrollTop();\n errorMessage(\"Something went wrong with the post, please try again or try reloading the page\");\n })\n }\n \n //// Post new comment to discourse, return list of comments\n $discussionModal.on('submit', 'form', (e) => {\n // Take control of the form\n e.preventDefault();\n var $form = $discussionModal.find('form');\n // Disable further input\n $form.find(':input').prop({ readonly: true });\n $form.find(':submit').prop('disabled', true);\n // Set up clozeable sentence & slug as a hidden field\n // Set up necessary params on the form\n $('').attr({'type':'hidden', 'name':'sentence'}).val(this.props.sentencePlainText).appendTo($form);\n $('').attr({'type':'hidden', 'name':'targetLanguage'}).val(this.props.targetLanguageEnglishName).appendTo($form);\n\n // fade\n modalFadeOn()\n\n const { baseLanguageEnglishName, targetLanguageName, translation } = this.props;\n const data = $form.serializeArray().map(\n (p) => p.name === \"content\" && !p.value.match(/^\\[details=.+Translation/) ? {\n name: p.name,\n value: `[details=\"${baseLanguageEnglishName} Translation\"]${translation}[/details]\\n\\n${p.value}`,\n } : p\n );\n\n // send post to controller\n $.ajax({\n url: $form.attr('action'),\n method: 'post',\n data\n }).done(function(data) {\n // console.log(data);\n removeDiscussionInput();\n $(\".discussion .comments\").html(data)\n // activate likes\n $(\".discussion .comments a\").attr(\"target\", \"_blank\");\n activateReplies();\n activateEdits();\n newForm();\n addReplyAuthors();\n // Increase comment count on button\n incrementCommentCount();\n addTopicLink();\n \n // Remove the fade\n modalFadeOff();\n\n }).error(function(e) {\n modalFadeOff();\n modalScrollTop();\n errorMessage(\"Something went wrong with the post, please try again or try reloading the page\");\n // Parse errors to page\n }).always(function() {\n // Return the form to user control\n $form.find(':input').prop({ readonly: false });\n $form.find(':submit').prop('disabled', false);\n });\n return false;\n });\n \n /// replace form with reply\n var activateReplies = function(){\n // Return if not a pro user\n if(!$('.comments').data('proUser')){\n return\n }\n \n // Wipe all click event handlers that might be there\n $('.comments .reply').off('click')\n // Add click event for replies\n $('.comments .reply').on('click', function(c){\n \n modalFadeOn();\n $discussionModal.find('.post').removeClass('highlight');\n // Get data from each post\n var parentPost = $(this).closest(\".post\")\n parentPost.addClass('highlight');\n // Scroll to top\n modalScrollTop();\n \n // Ajax request for form data\n $.ajax({\n url: \"/discourse/get_form\",\n method: \"get\",\n contentType: \"text/html\",\n data: {\n post_id: parentPost.data('postId'),\n post_number: parentPost.data('postNumber'),\n post_author: parentPost.data('author'),\n post_topic_id: parentPost.data('topicId'),\n post_type: \"reply\"\n }\n }).done(function(data){\n modalFadeOff();\n // parse response\n // update the modal button\n $discussionModal.find('.discussion .form').replaceWith(data)\n // activate likes\n validateInput();\n activateCancelForm();\n // Add comment number to modal button\n\n }).error(function(){\n modalFadeOff();\n modalScrollTop();\n errorMessage(\"Something went wrong with the reply, please try again or try reloading the page\");\n })\n })\n }\n \n var activateCancelForm = function() {\n $('.cancel-form').on('click', function(e){\n e.preventDefault();\n newForm();\n return false;\n })\n };\n \n var activateEdits = function(){\n // Return if not a pro user\n if(!$('.comments').data('proUser')){\n return\n }\n // Wipe all click event handlers that might be there\n $('.comments .edit').off('click');\n \n // add click handler\n $('.comments .edit').on('click', function(e) {\n e.preventDefault();\n modalFadeOn();\n // Get data from each post\n var parentPost = $(this).closest(\".post\")\n // Scroll to top\n modalScrollTop();\n \n // Ajax request for form data\n $.ajax({\n url: \"/discourse/get_form\",\n method: \"get\",\n contentType: \"text/html\",\n data: {\n post_id: parentPost.data('postId'),\n post_content: parentPost.find('.content p').text(),\n post_type: \"edit\"\n }\n }).done(function(data){\n modalFadeOff();\n // parse response\n // update the modal button\n $discussionModal.find('.discussion .form').replaceWith(data)\n // activate likes\n validateInput();\n activateCancelForm();\n // Add comment number to modal button\n\n }).error(function() {\n modalFadeOff();\n modalScrollTop();\n errorMessage(\"Something went wrong with the edit, please try again or try reloading the page\");\n });\n\n return false;\n });\n };\n \n var newForm = function(){\n modalFadeOn();\n // Ajax request for form data\n $.ajax({\n url: \"/discourse/get_form\",\n method: \"get\",\n contentType: \"text/html\",\n data: {\n post_type: \"post\"\n }\n }).done(function(data){\n modalFadeOff();\n // parse response\n // update the modal button\n $discussionModal.find('.discussion .form').replaceWith(data)\n $discussionModal.find(\"#discussion-input\").focus();\n // activate likes\n validateInput();\n // Add comment number to modal button\n\n }).error(function(){\n modalFadeOff();\n modalScrollTop();\n errorMessage(\"Something went wrong, please try again\");\n })\n }\n \n var addReplyAuthors = function(){\n const replies = $('.comments [data-reply-to-post-number]');\n replies.each(function(){\n const reply = $(this);\n const replyPost = $(reply).data('replyToPostNumber');\n const replyAuthor = $(\".comments\").find(\"[data-post-number='\" + replyPost + \"']\").data('author');\n reply.find('.reply-author').html(replyAuthor);\n })\n };\n\n $discussionModal.on('click', '.post .reply-author', function(e) {\n e.preventDefault();\n $discussionModal.find('.post').removeClass('highlight');\n var $post = $(this).closest('.post');\n var replyToPostNumber = $post.data('reply-to-post-number');\n var $replyToPost = $discussionModal.find('.post[data-post-number=\"' + replyToPostNumber + '\"]');\n $discussionModal.animate({ scrollTop: $replyToPost.offset().top - $discussionModal.offset().top }, 'slow', function() {\n $replyToPost.addClass('highlight');\n });\n return false;\n });\n \n var removeDiscussionInput = function(){\n $('#discussion-input').val(\"\");\n }\n // Modal fade\n var modalFadeOn = function(){\n $('.modal-overlay').css({\"visibility\": \"visible\"})\n $('.modal-loading').css(\"visibility\", \"visible\")\n }\n var modalFadeOff = function(){\n $('.modal-overlay').css({\"visibility\": \"hidden\"})\n $('.modal-loading').css(\"visibility\", \"hidden\")\n }\n \n // Validate content input - disable submit until its greater than 20 characters\n var validateInput = function(){\n $('#discussion-input').on(\"input\", function(e){\n var $submit = $('#discussion-input').parents(\"form:first\").find(\":submit\")\n if($('#discussion-input').val().length < 20){\n $submit.prop(\"disabled\",true);\n $('.post-length').show();\n } else {\n // Don't enable if its a normal user\n if($submit.attr('pro') == \"true\"){\n $submit.prop(\"disabled\",true);\n } else {\n $submit.prop(\"disabled\",false);\n $('.post-length').hide();\n }\n \n }\n });\n }\n // Initial call\n validateInput();\n\n // Function to toggle likes on a comment\n $discussionModal.on('click', '.post .like', function(e) {\n e.preventDefault();\n var $likeButton = $(this);\n var $post = $likeButton.closest('.post');\n var $likes = $post.find('.likes');\n $.ajax({\n url: \"/discourse/toggle_post_like\",\n method: \"put\",\n data: {\n post_id: $post.data('postId'),\n }\n }).done(function(data){\n $likeButton.toggleClass('liked');\n // update the modal button\n $likes.html(data);\n }).error(function(e){\n console.log(\"error\", e)\n modalScrollTop();\n errorMessage(\"Something went wrong liking this post, please try again or refresh the page.\");\n // Parse errors to page\n });\n return false;\n });\n\n // Activate Flaggable posts\n $discussionModal.on('click', '.post .flag', function(e) {\n e.preventDefault();\n var $flagButton = $(this);\n if($flagButton.hasClass('flagged')) {\n return false;\n }\n if(!confirm('Are you sure you want to flag this comment for the mods? Please only flag comments that are inappropriate or off-topic.')) {\n return false;\n }\n var postId = $flagButton.closest('.post').data('postId');\n $.ajax({\n url: \"/discourse/flag_post\",\n method: \"put\",\n data: {\n post_id: postId,\n }\n }).done(function(data){\n // update the button\n $flagButton.addClass('flagged');\n }).error(function(e){\n console.log(\"error\", e);\n modalScrollTop();\n errorMessage(\"Something went wrong flagging this post, please try again or refresh the page.\");\n });\n return false;\n });\n\n // Increases comment on the discussion modal button\n var incrementCommentCount = function(){\n var newCount = parseInt($('.comment-count .value').text(), 10) + 1;\n $('.comment-count .value').text(newCount);\n }\n\n // Scrolls the browser view to the top of the discussion modal\n var modalScrollTop = function(){\n $discussionModal.animate({ scrollTop: $discussionModal.find('.form').offset().top }, 'slow');\n };\n\n // Handles error messages for actions\n var errorMessage = function(msg) {\n $discussionModal.find('.errors').show().html(msg)\n };\n \n // Adds topic link\n var addTopicLink = function(){\n var topicId = $('.comments').find('.post').first().data('topicId');\n var href = '/forum/t/' + topicId;\n $discussionModal.find('.forum-topic-link').attr('href', href).toggle(!!topicId);\n if(topicId) {\n $discussionModal.find('.modal-footer a').attr('href', href);\n }\n };\n\n $discussionModal.find('.sentence .text').html(this.props.preClozeStr + '' + this.props.cloze + '' + this.props.postClozeStr);\n getSentenceTopic();\n }\n\n onFormattingHelpClick(e) {\n e.preventDefault();\n\n this.setState({ formattingHelpVisible: !this.state.formattingHelpVisible });\n }\n\n renderFormattingHelp() {\n if(!this.state.formattingHelpVisible) {\n return null;\n }\n\n return (\n <>\n | What you type: | \nHow it will look: | \n
|---|---|
| *italics* | italics |
| **bold** | bold |
| ~~strikethrough~~ | |
| * item 1 * item 2 * item 3 | \n
| \n
| {\"> quoted text\"} | quoted text |
| {\"[details=\\\"heading\\\"]some text[/details]\"} | \nheadingsome text | \n
\n \n );\n }\n\n renderPostForm() {\n if(!this.props.isPro) {\n return (\n
\n
\n );\n }\n\n const { content } = this.state;\n\n return (\n Sign up for Clozemaster Pro to join the discussion!
\n {/*To ensure high quality comments and foster a sense of community, only Pro users are able to contribute to the forum and sentence discussions.
*/}\n \n Go Pro \n \n\n \n
\n );\n }\n\n render() {\n const { isPro, onHidden } = this.props;\n \n return (\n \n
\n \n )}\n onHidden={onHidden}\n onShow={() => this.onModalReady()}\n show={true}\n title={(\n <>\n Discussion\n \n \n View in the forum \n \n \n \n )}\n >\n \n \n \n
\n \n \n \n {this.renderPostForm()}\n
\n \n );\n }\n}\n","import React from \"react\";\n\nimport ShortcutsList from \"./ShortcutsList\";\nimport TextToSpeechSettings from \"./TextToSpeechSettings\";\n\nconst FontSizer = function({ label, onChange, value }) {\n const floatValue = parseFloat(value.replace(/-/, \".\"));\n return (\n \n
\n );\n};\n\nexport default class GameSettings extends React.Component {\n constructor(props) {\n super(props);\n\n // NOTE! be sure to update UserLanguagePairing whitelist when adding settings\n this.state = Object.assign({}, {\n accentShortcuts: 'on',\n audioRecordings: 'on',\n clozemasterTextToSpeech: 'on',\n enterSubmitsEmpty: 'on',\n fitTextInputWidth: 'on',\n hints: 'on',\n hintFontSize: '1x',\n hotkeys: 'on',\n imageBackground: 'off',\n imageToggle: 'after',\n keyDownClearsTextInputAfterAnswering: 'on',\n leveledUpNotifications: 'on',\n listeningTextToSpeechVoice: 'random',\n listeningSkillAutoShowSentence: 'off',\n manualMasterResetConfirm: 'on',\n notesFontSize: '1x',\n pronunciation: 'on',\n pronunciationFontSize: '1x',\n sentenceTextInitiallyHidden: \"off\",\n soundEffects: 'on',\n spellingHints: 'on',\n textToSpeech: 'on',\n textToSpeechSpeed: 1,\n textToSpeechVoice: 'random',\n textToSpeechLooping: 'off',\n theme: 'light',\n translationFontSize: '1x',\n translations: 'visible',\n transliteration: 'on',\n transliterationFontSize: '1x',\n typingColorHint: 'on',\n }, props.initialSettings);\n }\n\n componentDidMount() {\n // GameSettings component sets default settings\n this.props.onUpdate && this.props.onUpdate(this.state);\n }\n\n componentDidUpdate(prevProps, prevState) {\n if(prevState.theme !== this.state.theme) {\n $('body').toggleClass('dark-mode', this.state.theme === 'dark');\n }\n }\n\n updateSetting(attr, value) {\n const { onUpdate, url } = this.props;\n\n let update = {};\n if(typeof attr === \"object\" && value == null) {\n update = attr;\n }\n else {\n update[attr] = value;\n }\n\n const newSettings = Object.assign({}, this.state, update);\n\n this.setState(newSettings, () => onUpdate && onUpdate(newSettings));\n\n $.ajax({\n url: url,\n data: {\n settings: newSettings\n },\n method: 'post'\n })\n .fail(() => {\n // TODO!\n });\n }\n\n renderBtnGroupBtn(attr, value, currentValue, content) {\n return (\n \n {label}\n
\n {floatValue}x
\n \n onChange(e.target.value.toString().replace(/\\./, \"-\") + \"x\")}\n step=\"0.5\"\n type=\"range\"\n value={floatValue}\n />\n
\n Sample text.
\n \n
\n );\n }\n\n renderSpellingHints() {\n if(this.props.isPlayingMultipleChoice) {\n return null;\n }\n\n const spellingHints = this.state.spellingHints;\n return (\n \n
\n \n Hints:\n
\n (appear above the missing word when available)\n \n {this.renderBtnGroupBtn('hints', 'on', hints, 'On')}\n {this.renderBtnGroupBtn('hints', 'off', hints, 'Off')}\n
\n \n
\n );\n }\n\n renderClearAfterAnswering() {\n if(this.props.isPlayingMultipleChoice) {\n return null;\n }\n\n const { keyDownClearsTextInputAfterAnswering } = this.state;\n\n return (\n \n
\n \n Spelling Hints:\n
\n (lets you know if your answer is incorrect by up to 2 letters)\n \n {this.renderBtnGroupBtn('spellingHints', 'on', spellingHints, 'On')}\n {this.renderBtnGroupBtn('spellingHints', 'off', spellingHints, 'Off')}\n
\n \n
\n );\n }\n\n\n renderColorHint() {\n if(this.props.isPlayingMultipleChoice) {\n return null;\n }\n\n const typingColorHint = this.state.typingColorHint;\n return (\n \n
\n \n Clear After Answering:\n
\n (keypress clears the text input after answering so you can practice re-typing the answer)\n \n {this.renderBtnGroupBtn('keyDownClearsTextInputAfterAnswering', 'on', keyDownClearsTextInputAfterAnswering, 'On')}\n {this.renderBtnGroupBtn('keyDownClearsTextInputAfterAnswering', 'off', keyDownClearsTextInputAfterAnswering, 'Off')}\n
\n \n
\n );\n }\n\n renderEnterSubmitsEmpty() {\n if(this.props.isPlayingMultipleChoice) {\n return null;\n }\n\n const { enterSubmitsEmpty } = this.state;\n return (\n \n
\n \n Typing Color Hint:\n
\n (see if you're entering the correct answer as you type)\n \n {this.renderBtnGroupBtn('typingColorHint', 'on', typingColorHint, 'On')}\n {this.renderBtnGroupBtn('typingColorHint', 'off', typingColorHint, 'Off')}\n
\n \n
\n );\n }\n\n renderTextBoxSize() {\n if(this.props.isPlayingMultipleChoice) {\n return null;\n }\n\n const { fitTextInputWidth } = this.state;\n return (\n \n
\n \n Enter Submits Empty:\n
\n (pressing Enter when the input is empty will submit a blank answer)\n \n {this.renderBtnGroupBtn('enterSubmitsEmpty', 'on', enterSubmitsEmpty, 'On')}\n {this.renderBtnGroupBtn('enterSubmitsEmpty', 'off', enterSubmitsEmpty, 'Off')}\n
\n \n
\n );\n }\n\n renderAudioRecordings() {\n const { audioRecordingsAvailable } = this.props;\n const { audioRecordings } = this.state;\n\n if(!audioRecordingsAvailable) {\n return null;\n }\n\n return (\n \n
\n \n Text Box Size:\n
\n (text box size can change to match the missing word)\n \n {this.renderBtnGroupBtn('fitTextInputWidth', 'on', fitTextInputWidth, 'Changes')}\n {this.renderBtnGroupBtn('fitTextInputWidth', 'off', fitTextInputWidth, 'Always the Same')}\n
\n \n
\n );\n }\n\n renderTextToSpeech() {\n const { clozemasterTtsAvailable, systemTtsAvailable, systemTtsVoices } = this.props;\n const { clozemasterTextToSpeech, textToSpeech, textToSpeechSpeed, textToSpeechVoice, textToSpeechLooping } = this.state;\n return (\n \n
\n Prefer Audio Recordings:
\n (when available, otherwise will fallback to text-to-speech if available)\n \n {this.renderBtnGroupBtn('audioRecordings', 'on', audioRecordings, 'On')}\n {this.renderBtnGroupBtn('audioRecordings', 'off', audioRecordings, 'Off')}\n
\n \n
\n );\n }\n\n renderShortcutHotkeysList() {\n return (\n \n Accent Shortcuts:\n
\n \n \n
\n alt+letter to insert accented version of letter pressed. Press letter multiple times while holding alt key for different available accents. May conflict with system shortcuts.\n \n
\n );\n }\n\n renderDarkMode() {\n const { theme } = this.state;\n\n return (\n \n Shortcut Hotkeys:\n
\n \n \n
\n \n
\n );\n }\n\n renderLeveledUpNotificationsToggle() {\n if(!this.props.isSignedIn) {\n return null;\n }\n\n const { leveledUpNotifications } = this.state;\n\n return (\n \n Dark Mode:\n
\n \n {this.renderBtnGroupBtn('theme', 'dark', theme, 'On')}\n {this.renderBtnGroupBtn('theme', 'light', theme, 'Off')}\n
\n \n
\n );\n }\n\n renderFontSizes() {\n const {\n hintFontSize,\n notesFontSize,\n pronunciationFontSize,\n transliterationFontSize,\n translationFontSize,\n } = this.state;\n\n return (\n \n Leveled Up Notifications:\n
\n \n {this.renderBtnGroupBtn('leveledUpNotifications', 'on', leveledUpNotifications, 'On')}\n {this.renderBtnGroupBtn('leveledUpNotifications', 'off', leveledUpNotifications, 'Off')}\n
\n \n this.updateSetting(\"hintFontSize\", value)}\n value={hintFontSize}\n />\n this.updateSetting(\"notesFontSize\", value)}\n value={notesFontSize}\n />\n this.updateSetting(\"pronunciationFontSize\", value)}\n value={pronunciationFontSize}\n />\n this.updateSetting(\"translationFontSize\", value)}\n value={translationFontSize}\n />\n this.updateSetting(\"transliterationFontSize\", value)}\n value={transliterationFontSize}\n />\n
\n );\n\n // return (\n // <>\n // {this.renderTranslationFontSize()}\n // {this.renderHintFontSize()}\n // {this.renderNotesFontSize()}\n // \n // );\n }\n\n renderTranslationFontSize() {\n const { translationFontSize } = this.state;\n\n return (\n \n Font Sizes:\n
\n \n
\n );\n\n }\n\n renderHintFontSize() {\n const { hintFontSize } = this.state;\n\n return (\n \n Translation Font Size:\n
\n \n {this.renderBtnGroupBtn('translationFontSize', '1x', translationFontSize, '1x')}\n {this.renderBtnGroupBtn('translationFontSize', '1-5x', translationFontSize, '1.5x')}\n {this.renderBtnGroupBtn('translationFontSize', '2x', translationFontSize, '2x')}\n {this.renderBtnGroupBtn('translationFontSize', '3x', translationFontSize, '3x')}\n
\n \n
\n );\n }\n\n renderNotesFontSize() {\n const { notesFontSize } = this.state;\n\n return (\n \n Hint Font Size:\n
\n \n {this.renderBtnGroupBtn('hintFontSize', '1x', hintFontSize, '1x')}\n {this.renderBtnGroupBtn('hintFontSize', '1-5x', hintFontSize, '1.5x')}\n {this.renderBtnGroupBtn('hintFontSize', '2x', hintFontSize, '2x')}\n {this.renderBtnGroupBtn('hintFontSize', '3x', hintFontSize, '3x')}\n
\n \n
\n );\n }\n\n renderManualMasterResetConfirmToggle() {\n if(!this.props.isSignedIn) {\n return null;\n }\n\n const { manualMasterResetConfirm } = this.state;\n\n\n return (\n \n Notes Font Size:\n
\n \n {this.renderBtnGroupBtn('notesFontSize', '1x', notesFontSize, '1x')}\n {this.renderBtnGroupBtn('notesFontSize', '1-5x', notesFontSize, '1.5x')}\n {this.renderBtnGroupBtn('notesFontSize', '2x', notesFontSize, '2x')}\n {this.renderBtnGroupBtn('notesFontSize', '3x', notesFontSize, '3x')}\n
\n \n
\n );\n }\n\n renderListeningSkillAutoShowSentence() {\n const { listeningSkillAutoShowSentence } = this.state;\n const { isPlayingListening } = this.props;\n\n if(!isPlayingListening) {\n return null;\n }\n\n return (\n \n Manual Master/Reset Confirmation:\n
\n \n {this.renderBtnGroupBtn('manualMasterResetConfirm', 'on', manualMasterResetConfirm, 'On')}\n {this.renderBtnGroupBtn('manualMasterResetConfirm', 'off', manualMasterResetConfirm, 'Off')}\n
\n \n
\n );\n }\n\n renderTransliterationToggle() {\n const { transliterationsAvailable } = this.props;\n const { transliteration } = this.state;\n\n if(!transliterationsAvailable) {\n return null;\n }\n\n return (\n \n Automatically Show Sentence After First Listen:\n
\n \n {this.renderBtnGroupBtn('listeningSkillAutoShowSentence', 'on', listeningSkillAutoShowSentence, 'On')}\n {this.renderBtnGroupBtn('listeningSkillAutoShowSentence', 'off', listeningSkillAutoShowSentence, 'Off')}\n
\n (when playing listening skill)
\n \n
\n );\n }\n\n renderSentenceTextInitiallyHidden() {\n const { sentenceTextInitiallyHidden } = this.state;\n\n return (\n \n
\n Transliteration:
\n (shown after answering when available)\n \n {this.renderBtnGroupBtn('transliteration', 'on', transliteration, 'On')}\n {this.renderBtnGroupBtn('transliteration', 'off', transliteration, 'Off')}\n
\n \n
\n );\n }\n\n render() {\n const {\n imageBackground,\n imageToggle,\n isPlayingMultipleChoice,\n pronunciation,\n soundEffects,\n translations,\n transliteration\n } = this.state;\n\n return (\n \n
\n \n Sentence Text Initially Hidden:\n
\n (see just the translation, then click a button to see the sentence text)\n \n \n \n
\n \n {this.renderListeningSkillAutoShowSentence()}\n {this.renderAudioRecordings()}\n
\n );\n }\n}\n","import React from \"react\";\n\nimport Icon from \"../Icon\";\nimport Modal from \"../Modal\";\nimport ShortcutsList from \"./ShortcutsList\";\n\nexport default class HelpModal extends React.Component {\n runTutorial() {\n const { runTutorial } = this.props;\n\n this.modal.hide({\n onHidden: () => {\n $(\"html, body\").animate({ scrollTop: 0 });\n runTutorial();\n }\n });\n }\n\n renderIconTable() {\n if(!this.props.isPlayingTextInput) {\n return null;\n }\n\n return (\n \n
\n {this.renderSentenceTextInitiallyHidden()}\n {!isPlayingMultipleChoice && this.renderHints()}\n {!isPlayingMultipleChoice && this.renderSpellingHints()}\n {!isPlayingMultipleChoice && this.renderColorHint()}\n {!isPlayingMultipleChoice && this.renderTextBoxSize()}\n {!isPlayingMultipleChoice && this.renderEnterSubmitsEmpty()}\n {!isPlayingMultipleChoice && this.renderClearAfterAnswering()}\n \n Translations:\n
\n \n {this.renderBtnGroupBtn('translations', 'visible', translations, 'Visible')}\n {this.renderBtnGroupBtn('translations', 'show-after', translations, Show After Answering)}\n {this.renderBtnGroupBtn('translations', 'hidden', translations, 'Hidden')}\n
\n \n
\n \n
\n Image Toggle:
\n (toggle button, if sentence image available)\n \n {this.renderBtnGroupBtn('imageToggle', 'after', imageToggle, 'After Answering')}\n {this.renderBtnGroupBtn('imageToggle', 'always', imageToggle, 'Before and After')}\n {this.renderBtnGroupBtn('imageToggle', 'off', imageToggle, 'Off')}\n
\n \n
\n \n
\n Image Background:
\n (use sentence image as background, if available)\n \n {this.renderBtnGroupBtn('imageBackground', 'on', imageBackground, 'On')}\n {this.renderBtnGroupBtn('imageBackground', 'off', imageBackground, 'Off')}\n
\n \n
\n {this.renderTransliterationToggle()}\n \n
\n Pronunciation:
\n (shown after answering when available)\n \n {this.renderBtnGroupBtn('pronunciation', 'on', pronunciation, 'On')}\n {this.renderBtnGroupBtn('pronunciation', 'off', pronunciation, 'Off')}\n
\n \n
\n {this.renderTextToSpeech()}\n {this.renderDarkMode()}\n {/*\n \n Sound Effects:\n
\n \n {this.renderBtnGroupBtn('soundEffects', 'on', soundEffects, 'On')}\n {this.renderBtnGroupBtn('soundEffects', 'off', soundEffects, 'Off')}\n
\n \n
\n */}\n {this.renderLeveledUpNotificationsToggle()}\n {this.renderManualMasterResetConfirmToggle()}\n {this.renderFontSizes()}\n {this.renderAccentShortcutsToggle()}\n {this.renderShortcutHotkeysList()}\n \n \n Switch to\n multiple choice\n \n \n \n Cloze mastery score multiplier is 8 for text input vs. 4 for multiple choice. Text input is more difficult than multiple choice, so you score more points!\n Switching to text input will also start a new round (your progress has been saved).\n \n
\n | \n | alt+t | \nToggle translation | \n
| alt+p | \nSwitch sentence to multiple choice - half points! | \n|
| alt+h | \nSingle letter hint - only 1 per sentence and half the points! | \n
Complete the sentence with the correct missing word!
\n \nPoints are determined as follows:
\n\n (4 points for multiple choice, 8 points for text input)
x (% Mastered divided by 25)\n
- \n
- Points are cut in half if you use a hint while playing text input or you review a sentence before it's ready for review. \n
- An incorrect answer gets 0 points. \n
- Playing favorites doesn't use the same equation - correct answers always get 2 points. \n
\n Clozemaster uses a spaced-repetition system to help maximize your learning efficiency with sentences starting at 0% Mastered. If a sentence is answered correctly it goes to 25% Mastered and is set to review the next day. Correct again? It goes to 50% Mastered and is set to review 10 days in the future. 75% Mastered is 30 days in the future, and 100% Mastered is 180 days in the future. Incorrect at any point resets the sentence to 0% Mastered. Pro users can customize these intervals via the Dashboard.\n
\n {isUsingSrsControls && (\n <>\n\n Once a sentence is 100% Mastered, each additional correct answer results in the review interval getting larger using a variation of the SuperMemo 2 algorithm.\n
\n\n If a sentence is 100% Mastered and answered correctly again, you'll see three buttons: Hard Normal Easy. These buttons are used to help determine the next review due date for the sentence. Hard will result in the next review being a bit sooner, and Easy will result in the next review being a bit further in the future.\n
\n \n )}\nQuestions? Something else you'd like to see here? Let us know.
\nShortcut Hotkeys
\n\n \n \n
\n `,\n title: this.props.hint,\n trigger: 'manual'\n });\n setTimeout(() => this.$container.tooltip('show'), 500); // let other animations finish\n }\n\n componentDidUpdate(prevProps, prevState) {\n if(prevProps.fontSize !== this.props.fontSize) {\n $(\".hint.tooltip\").removeClass(\"font-size-\" + prevProps.fontSize);\n $(\".hint.tooltip\").addClass(\"font-size-\" + this.props.fontSize);\n this.$container.tooltip(\"show\"); // to reposition\n }\n }\n\n componentWillUnmount() {\n this.$container.tooltip('destroy');\n }\n\n render() {\n return (\n this.container = el}>\n {this.props.children}\n \n );\n }\n}\n","import React from \"react\";\n\nimport FadeOut from \"../FadeOut\";\n\nexport default class Incorrect extends React.Component {\n render() {\n return (\n \n
\n \n \n
\n \n {content}\n
\n );\n }\n\n renderAd() {\n const { ad, onLinkClick } = this.props;\n return (\n\n
\n );\n }\n}\n","import React from \"react\";\n\nimport FlagSprite from \"../FlagSprite\";\nimport Modal from \"../Modal\";\nimport ModalFooterCloseBtn from \"../ModalFooterCloseBtn\";\n\nexport default class LeveledUpModal extends React.Component {\n componentDidMount() {\n window.clozemaster.loadTwitterSDK();\n window.clozemaster.loadFacebookSDK();\n }\n\n getShareMessage({ service = null }) {\n return 'I just leveled up playing ' + (service === \"twitter\" ? \"@clozemaster\" : \"Clozemaster\") + '! Now at level ' + this.props.level + ' learning ' + this.props.targetLanguageEnglishName + ' from ' + this.props.baseLanguageEnglishName + '.';\n }\n\n getTwitterShareUrl() {\n return 'https://twitter.com/intent/tweet?url=' +\n encodeURIComponent(this.props.shareUrl) +\n '&text=' +\n encodeURIComponent(this.getShareMessage({ service: \"twitter\" }));\n }\n\n onFacebookClick() {\n FB.ui({\n method: 'share',\n href: this.props.shareUrl,\n quote: this.getShareMessage()\n }, function(response){});\n }\n\n onTumblrClick() {\n window.open('http://tumblr.com/widgets/share/tool?posttype=text&tags=' + encodeURIComponent('langblr,studyblr,languages,language learning') + '&title=' + encodeURIComponent('Leveled up playing Clozemaster!') + '&content=' + encodeURIComponent(this.getShareMessage() + ' ' + this.props.shareUrl) + '&canonicalUrl=' + encodeURIComponent(window.location.href), '_blank', 'height=600,width=540');\n }\n\n render() {\n return (\n Advertisement
\n {this.renderAd()}\n {this.renderTimer()}\n this.content = el}>\n 
\n
\n \n );\n }\n}\n","import React from \"react\";\n\nimport Icon from \"../Icon\";\n\nexport default class ListeningControl extends React.Component {\n constructor(props) {\n super(props);\n\n // https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript\n const params = new Proxy(new URLSearchParams(window.location.search), {\n get: (searchParams, prop) => searchParams.get(prop),\n });\n\n this.state = {\n firstPlayEnded: false,\n playing: false,\n playComplete: false,\n showPlayButton: params.auto_play === \"off\" // show play button and don't auto play if auto play is off\n };\n }\n\n componentDidMount() {\n $(window).on(\"keydown.listening-control\", (e) => {\n if(this.state.firstPlayEnded && !this.state.playComplete) {\n // space\n if(e.which === 32) {\n e.preventDefault();\n this.playAudio();\n }\n // enter\n else if(e.which === 13) {\n e.preventDefault();\n this.setState({ playComplete: true });\n }\n }\n });\n\n if(!this.state.showPlayButton) {\n this.playAudio();\n }\n }\n\n componentWillUnmount() {\n $(window).off(\"keydown.listening-control\");\n }\n\n componentDidUpdate(prevProps, prevState) {\n if(this.state.playComplete && !prevState.playComplete) {\n this.props.onPlayComplete();\n }\n }\n\n // hear sentence\n // if auto-show sentence on\n // --> show sentence / play ended\n // else\n // --> should see flip button\n // on flip button click --> play ended\n\n playAudio() {\n // // https://developers.google.com/web/updates/2017/09/autoplay-policy-changes\n // const promise = this.audio.play();\n // promise.then(_ => {\n // // Autoplay started!\n // }).catch(error => {\n // this.setState({ showPlayButton: true });\n // });\n this.audio = this.props.playAudio({\n onPlay: () => {\n this.setState({\n playing: true,\n showPlayButton: false\n });\n },\n onEnded: () => {\n this.setState({\n firstPlayEnded: true,\n playing: false,\n playComplete: this.state.playComplete || this.props.playCompleteOnFirstPlayEnded\n });\n },\n onError: (e) => {\n // check if error triggered by window.speechSynthesis.cancel call\n if(window.SpeechSynthesisEvent && e instanceof window.SpeechSynthesisEvent && e.elapsedTime > 0) {\n return null;\n }\n\n if(!this.state.showPlayButton && !this.state.firstPlayEnded) {\n return this.setState({ showPlayButton: true });\n }\n\n alert('Oh no! There was an error with the audio.\\n' + e + ' ' + (e || {}).name + '\\nSorry about that. Please try again and let us know if you see this message again.');\n this.props.onError();\n // same state as onEnded, could consolidate\n this.setState({\n firstPlayEnded: true,\n playing: false,\n playComplete: this.state.playComplete || this.props.playCompleteOnFirstPlayEnded\n });\n }\n });\n }\n\n componentWillUnmount() {\n if(this.audio instanceof SpeechSynthesisUtterance) {\n window.speechSynthesis.cancel();\n }\n else if(this.audio) {\n this.audio.pause();\n }\n }\n\n render() {\n const { firstPlayEnded, playComplete, playing, showPlayButton } = this.state;\n return (\n \n
\n \n
\n Level:
\n \n
\n {this.props.level}
\n +1
\n Tell the world!
\n \n Tweet\n \n\n
\n );\n }\n}\n","import React from \"react\";\n\nexport default class MultipleChoiceOptions extends React.Component {\n constructor(props) { \n super(props);\n\n this.state = {\n options: []\n };\n }\n\n componentDidMount() {\n this.setState({ options: this.getOptions() });\n }\n\n componentDidUpdate(prevProps) {\n if(this.props.sentenceIndex !== prevProps.sentenceIndex) {\n this.setState({ options: this.getOptions() });\n }\n }\n\n getOptions() {\n const { actualAnswer, currentSentence, options } = this.props;\n\n // shuffle possible answers\n let answers = options.slice(0).sort(function() { return 0.5 - Math.random(); });\n // ensuring answers are lower case so we can remove actual answer when lowercase\n // was running into bug where actual answer was upcase (start of sentence), but all answer lowercase causing actual answer to not be removed\n for(let i = 0, n = answers.length; i < n; i++) {\n answers[i] = answers[i].toLowerCase();\n }\n // remove actual answer\n answers = answers.filter((a) => a !== actualAnswer.toLowerCase());\n if(answers < 4) {\n answers = answers.concat([actualAnswer]).sort();\n }\n else {\n // get subset\n answers = answers.slice(0, 3);\n // inject actual answer randomly\n answers.splice(Math.floor(Math.random() * 4), 0, actualAnswer);\n }\n // if first letter of cloze capitalized, capitalize all the potential answers\n if(actualAnswer.toUpperCase()[0] === actualAnswer[0]) {\n answers = answers.map(function(answer) {\n return answer.charAt(0).toUpperCase() + answer.slice(1);\n });\n }\n\n return answers;\n }\n\n getAnsweredOptionClassNames(o) {\n const { answered, answerSubmitted, correct, actualAnswer } = this.props;\n\n if(!answered) {\n return '';\n }\n\n\n if(o === actualAnswer) {\n return 'correct';\n }\n\n if(o === answerSubmitted && !correct) {\n return 'wrong incorrect';\n }\n\n return 'wrong';\n }\n\n clickOptionAtIndex(i) {\n const { options } = this.state;\n this.props.onOptionClick(options[i]);\n }\n\n renderButtonColumn({ o, i }) {\n return (\n this.playAudio()}>\n
\n {firstPlayEnded && !playComplete && (\n Click to play!
: null}\n \n
\n )}\n \n \n (space)\n
\n \n \n (enter)\n
\n \n this.props.onOptionClick(o)}\n style={this.props.targetLanguageCode.match(/cmn|yue/) && { fontWeight: 'normal' }}\n >\n {!this.props.answered && {i + 1}. }{o}\n \n
\n );\n }\n\n renderClickableOptions() {\n const { answered, onClickableOptionClick } = this.props;\n const { options } = this.state;\n\n if(!answered) {\n return null;\n }\n\n return (\n \n Learn more:\n {options.map((o) => (\n onClickableOptionClick(o)}\n style={{ margin: \"0 4px\" }}\n >\n {o}\n \n ))}\n
\n );\n }\n\n render() {\n const options = this.state.options;\n\n return (\n \n {options.map((o, i) => {\n if((i % 2) === 1) {\n return null;\n }\n\n return (\n
\n );\n }\n}\n","import React from \"react\";\n\nimport FadeOut from \"../FadeOut\";\n\nexport default class Points extends React.Component {\n render() {\n const { points } = this.props;\n\n if(!points) {\n return null;\n }\n\n return (\n \n {this.renderButtonColumn({ o, i })}\n {!!options[i + 1] && this.renderButtonColumn({ o: options[i + 1], i: i + 1 })}\n
\n );\n })}\n \n {this.renderClickableOptions()}\n \n
\n \n +{points}\n
\n This sentence is originally from Tatoeba. Please click here to update it there.
\n );\n }\n\n onSubmit(e) {\n e.preventDefault();\n\n const { collectionClozeSentence, url } = this.props;\n const { category, feedback } = this.state;\n\n this.setState({ submitting: true });\n\n $.ajax({\n data: {\n collection_cloze_sentence_error: {\n category,\n collection_cloze_sentence_id: collectionClozeSentence.id,\n feedback\n }\n },\n method: 'post',\n url\n })\n .done((data) => {\n this.setState({ submitted: true });\n })\n .fail((jqXHR, textStatus, errorThrown) => {\n alert('Oh no! There was an error reporting the error. \"' + textStatus + ' => ' + errorThrown + '\". Yikes, sorry about that. Please try again and let us know if you see this message again.');\n });\n }\n\n renderPleaseIgnore() {\n return (\nNote! If you would like to remove the sentence from your review queue, you can ignore it by clicking the button after answering.
\n );\n }\n\n renderContent() {\n if(this.state.submitted) {\n return (\n <>\nThanks for reporting the issue!
\n {this.renderTatoebaNotice()}\n {this.renderPleaseIgnore()}\n \n );\n }\n\n const { collectionClozeSentence } = this.props;\n const { category, feedback, submitting } = this.state;\n\n return (\n <>\nThanks for your help to improve Clozemaster! You can report any issues here.
\n {this.renderTatoebaNotice()}\n {this.renderPleaseIgnore()}\nText: {collectionClozeSentence.text}
\nTranslation: {collectionClozeSentence.translation}
\n {collectionClozeSentence.pronunciation &&Pronunciation: {collectionClozeSentence.pronunciation}
}\n\n \n \n );\n }\n\n render() {\n const { backdrop, onHidden } = this.props;\n const { submitted } = this.state;\n\n return (\n
Sentences you play through will be listed here. Keep going!
\n );\n }\n\n return (\n| {i + 1}. | \n\n {ccs.translation} \n | \n \n \n | \n
\n
\n
\n );\n }\n\n renderSentenceEditorModal() {\n if(!this.state.sentenceEditorModalVisible) {\n return null;\n }\n\n const {\n collectionClozeSentence,\n collectionClozeSentencesUpsertUrl,\n isPro,\n isTextEditable,\n nextReviewByLevel,\n onUpdate,\n } = this.props;\n\n return (\n \n {this.renderAudioBtn()}\n \n {this.renderFavoriteBtn()}\n updateSentence('ignored', !collectionClozeSentence.ignored)}\n title=\"Toggle ignore\"\n >\n
\n \n
\n {this.renderTokensBtn()}\n
\n \n
\n );\n }\n\n return (\n Get full access to sentence grammar with Clozemaster Pro - subscribe today and get fluent faster!
\n \n\n
\n );\n }\n\n render() {\n const { collectionClozeSentence } = this.props;\n\n return (\n \n {this.renderControls()}\n
\n \n
\n {this.renderTokens()}\n {collectionClozeSentence.translation}
\n {this.renderSentenceEditorModal()}\n \n \n
\n
\n );\n }\n\n goToNextCollectionToReview() {\n window.location = window.location.toString().replace('collections/' + this.state.collectionSlug, 'collections/' + this.state.nextCollectionToReview);\n }\n\n renderNextRoundBtn() {\n if(this.props.isTeachingCollection) {\n return (\n \n Play Again Stats:
\n| \n Score: +{score}\n | \n\n Time: {Math.floor(elapsedTime / 60)}:{elapsedTime % 60 < 10 ? '0' : ''}{elapsedTime % 60}\n | \n
| \n New: {numNew}\n | \n\n Review: {numReview}\n | \n
| \n Correct: {numCorrect}\n | \n\n Incorrect: {numIncorrect}\n | \n
\n
\n );\n }\n\n return (\n \n \n
\n \n \n
\n No more sentences ready for review! 🙌
\n );\n }\n\n renderControls() {\n const { isPro, languagePairingWebUrl, onboarding } = this.props;\n const dashboardPath = onboarding && !isPro ? \"/welcome-pro\" : (languagePairingWebUrl || \"/dashboard\");\n return (\n \n
\n );\n }\n\n renderDailyGoal() {\n const { dailyGoalHoursLeftToday, numPointsToday, dailyGoalPointsPerDay, dailyGoalStreak, loadingLanguagePairingStats } = this.state;\n\n if(loadingLanguagePairingStats) {\n return null;\n }\n\n if(!dailyGoalPointsPerDay) {\n return null;\n }\n\n return (\n \n \n
\n \n {this.renderNextRoundBtn()}\n
\n \n
\n );\n }\n\n renderCollectionProgress() {\n if(!this.props.collectionId) {\n return null;\n }\n\n const {\n startingNumMastered,\n startingNumPlaying,\n startingNumReadyForReview\n } = this.props;\n\n const {\n collectionName,\n collectionNumMastered,\n collectionNumPlaying,\n collectionNumReadyForReview,\n collectionNumSentences,\n progressPerChunk,\n useProgressChunks\n } = this.state;\n\n const numMasteredDiff = collectionNumMastered - startingNumMastered;\n const numPlayingDiff = collectionNumPlaying - startingNumPlaying;\n const numReadyForReviewDiff = collectionNumReadyForReview - startingNumReadyForReview;\n const pctMastered = pctStr(collectionNumMastered, collectionNumSentences);\n const pctPlaying = pctStr(collectionNumPlaying, collectionNumSentences);\n\n return (\n Daily Goal:
\n\n
\n );\n }\n\n renderLeveledUpIndicator() {\n if(this.props.leveledUp) {\n // up arrow, tada, hands raised\n return (\n \n ⬆🎉🙌\n \n );\n }\n }\n\n renderProgress() {\n const {\n baseLanguageFlagIso,\n currentLevelPoints,\n currentWeekLeaderboardRank,\n level,\n loadingLanguagePairingStats,\n nextLevelPoints,\n pointsToNextCurrentWeekLeaderboardRank,\n prevWeekLeaderboardRank,\n score,\n targetLanguageFlagIso\n } = this.state;\n\n if(loadingLanguagePairingStats) {\n return null;\n }\n\n let rankExtra = null;\n if(currentWeekLeaderboardRank === 1) {\n rankExtra = 🏆;\n }\n else if(currentWeekLeaderboardRank && currentWeekLeaderboardRank > 1 && pointsToNextCurrentWeekLeaderboardRank) {\n const nextRank = currentWeekLeaderboardRank - 1;\n rankExtra = {collectionName}
\n - \n
- \n \n Playing: {collectionNumPlaying.toLocaleString()} / {collectionNumSentences.toLocaleString()}\n {numPlayingDiff > 0 ? +{numPlayingDiff} : null}\n \n
\n {numPlayingDiff > 0 ? <>{pctStr(startingNumPlaying, collectionNumSentences)}: null}\n {pctPlaying}\n {!!useProgressChunks && (\n \n - \n \n Mastered: {collectionNumMastered.toLocaleString()} / {collectionNumSentences.toLocaleString()}\n {numMasteredDiff > 0 ? +{numMasteredDiff} : null}\n \n
\n {numMasteredDiff > 0 ? <>{pctStr(startingNumMastered, collectionNumSentences)}: null}\n {pctMastered}\n {!!useProgressChunks && (\n \n - \n \n Ready for Review: {collectionNumReadyForReview}\n {numReadyForReviewDiff > 0 ? -{numReadyForReviewDiff} : null}\n \n \n
({pointsToNextCurrentWeekLeaderboardRank.toLocaleString()} points to {nextRank}{ordinalSuffix(nextRank)});\n }\n\n let prevWeekRank = null;\n if(prevWeekLeaderboardRank) {\n const up = currentWeekLeaderboardRank > prevWeekLeaderboardRank;\n //
\n
\n );\n }\n\n renderProPromo() {\n if(!this.props.isSignedIn || this.props.isPro) {\n return null;\n }\n\n return (\n Progress:
\n {this.renderCollectionProgress()}\n\n
\n \n
\n - \n
- \n Level: {level}{this.renderLeveledUpIndicator()}\n
\n\n \n\n {(nextLevelPoints - score).toLocaleString()} points to level {level + 1} - keep going!\n \n {!!currentWeekLeaderboardRank && (\n - \n Ranked: {currentWeekLeaderboardRank}{ordinalSuffix(currentWeekLeaderboardRank)}{prevWeekRank} this week\n {rankExtra}\n \n )}\n
\n
\n );\n }\n\n renderSignUpPromo() {\n if(this.props.isSignedIn) {\n return null;\n }\n\n let message = \"Save your progress!\";\n\n if(this.props.isTeachingCollection) {\n message = \"Get fluent faster with Clozemaster!\";\n }\n\n return (\n \n
\n Get fluent faster.
\n \n Get Clozemaster Pro \n \n\n
\n );\n }\n\n renderTeachingCollectionResultsForm() {\n if(!this.props.isTeachingCollection) {\n return null;\n }\n\n const params = new URLSearchParams(window.location.search);\n if(params.get(\"results\") === \"false\") {\n return null;\n }\n\n const { answerTape, elapsedTime, numCorrect, numIncorrect, score } = this.props;\n const stats = { answerTape, elapsedTime, numCorrect, numIncorrect, score };\n\n return (\n \n
\n {message}
\n \n Sign Up \n \n\n \n \n {sentences}\n \n
\n
\n );\n }\n\n isReviewScope() {\n return this.props.scope === 'ready_for_review';\n }\n\n render() {\n const { numCorrect, numIncorrect, score } = this.props;\n /*\n Sentences:
\n\n
\n */\n return (\n Round results
\n Score: {score}
\n Correct: {numCorrect}
\n Incorrect: {numIncorrect}
\n {uniqueSentences.map((ccs) => {ccs.text}
)}\n \n \n {this.renderControls()}\n
\n );\n /*\n \n
\n {this.renderControls()}\n \n
\n Round Results
\n \n {this.renderStats()}\n {this.renderProPromo()}\n {this.renderSignUpPromo()}\n {this.renderTeachingCollectionResultsForm()}\n {this.renderDailyGoal()}\n {this.renderProgress()}\n {this.renderSentences()}\n
\n Daily Goal:
\n\n Points:\n 28 / 1000\n
\n \n Streak:\n 0\n Days\n \n
\n \n Time remaining:\n 16\n Hours\n
\n Progress:
\n\n \n
\n */\n }\n}\n","import React from \"react\";\n\nexport default function ShortcutsList() {\n return (\n \n
\n \n Played: +2\n
\n \n
\n \n Fast Track:\n 2,357\n
\n \n 9.756% 9.764%\n
\n \n Total:\n 2,519\n
\n \n 1.653% 1.655%\n
\n \n
\n\n \n Mastered: \n
\n \n
\n \n Fast Track:\n 117\n
\n \n \n
\n \n Total:\n 117\n
\n \n \n
\n \n
\n \n \n /\n \n\n Level:\n 49\n \n +1\n \n \n
\n \n \n
\n \n
\n \n Overall Level:\n 74\n \n +1\n \n \n
\n \n \n
\n \n
\n \n \n /\n \n Ranking\n
\n \n
\n \n Weekly:\n
\n \n \n 1,140th\n
\n\n \n 4 points to 1,139th\n
\n \n All-Time:\n
\n \n \n 1,416th\n
\n\n \n 16 points to 1,415th\n
\n \n
\n Overall Ranking
\n \n
\n \n Weekly:\n
\n \n \n 5,345th\n
\n\n \n 2 points to 5,344th\n
\n \n All-Time:\n
\n \n \n 4,174th\n
\n\n \n 57 points to 4,173rd\n
\n \n \n \n
\n *Different browsers may handle shortcut keys differently. Please let us know if you notice any issues.\n
\n );\n}\n","import React from \"react\";\n\nexport default class TeachingCollectionResultsForm extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n name: '',\n submitted: false,\n submitting: false\n };\n }\n\n onTeachingCollectionResultSubmit(e) {\n e.preventDefault();\n\n if(!this.state.name) {\n return false;\n }\n\n this.setState({ submitting: true });\n\n $.ajax({\n contentType: 'application/json',\n data: JSON.stringify({ \n teaching_collection_result: { name: this.state.name, stats: this.props.stats }\n }),\n method: 'post',\n url: this.props.teachingCollectionResultsUrl\n })\n .done((data) => {\n this.setState({ submitted: true });\n })\n .fail(() => {\n alert(\"Oh no! There was an error sending your results. Sorry about that. Please try again and let us know if you see this message again.\");\n this.setState({ submitting: false });\n });\n\n return false;\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\n\nexport default class TextToSpeechSettings extends React.Component {\n renderToggle() {\n return (\n | Enter | \nSubmit answer, next sentence, next round | \n
| 1-4 | \nSelect multiple choice answer | \n
| ctl+Space | \nReplay audio (when available) | \n
| ctl+Enter | \nRecord audio (for speaking) | \n
| alt+a | \nAdd current sentence to a collection Pro! | \n
| alt+c | \nOpen collection search Pro! | \n
| alt+d | \nEdit current sentence Pro! | \n
| alt+g | \nToggle grammar after answering (when available) | \n
| alt+e | \nReport current sentence error | \n
| alt+f | \nToggle favorite Pro! | \n
| alt+h | \nUse hint when playing text input | \n
| alt+i | \nIgnore current sentence | \n
| alt+k | \nMark current sentence as 'Known' (100% Mastered and next review year 2100) | \n
| alt+m | \nSet current sentence to '100% Mastered' | \n
| alt+p | \nSwitch current sentence to multiple choice | \n
| alt+r | \nReset current sentence to '0% Mastered' | \n
| alt+s | \nOpen sentence search Pro! | \n
| alt+t | \nToggle translation | \n
| alt+u | \nOpen sentence discussion Pro! | \n
| alt+x | \nToggle image (if available) | \n
| shift+alt+x | \nToggle explanation (if available) | \n
| alt+y | \nOpen round history | \n
\n
\n );\n }\n\n renderLoopingToggle() {\n return (\n \n Auto-Play:\n
\n \n {this.props.renderBtnGroupBtn('textToSpeech', 'on', this.props.textToSpeech, 'On')}\n {this.props.renderBtnGroupBtn('textToSpeech', 'off', this.props.textToSpeech, 'Off')}\n
\n \n
\n );\n }\n\n renderSystemVoices() {\n if(this.props.clozemasterTtsAvailable && this.props.clozemasterTextToSpeech === 'on') {\n return null;\n }\n\n if(!this.props.systemTtsAvailable) {\n return null;\n }\n\n return (\n \n
\n Loop:
\n (sentence audio will play on repeat for chorusing)\n \n {this.props.renderBtnGroupBtn('textToSpeechLooping', 'on', this.props.textToSpeechLooping, 'On')}\n {this.props.renderBtnGroupBtn('textToSpeechLooping', 'off', this.props.textToSpeechLooping, 'Off')}\n
\n \n
\n );\n }\n\n renderControls() {\n if(this.props.clozemasterTtsAvailable || this.props.systemTtsAvailable) {\n return (\n <>\n {this.renderToggle()}\n {this.renderLoopingToggle()}\n {this.renderClozemasterTtsToggle()}\n {this.renderSystemVoices()}\n {this.renderSpeedControl()}\n \n );\n }\n\n return (\n \n System Voice:\n
\n \n \n There are currently no voices available for {this.props.targetLanguageName} on your browser/device. Text-to-speech works best on Chrome and Safari for desktop.\n
\n );\n };\n\n renderClozemasterTtsToggle() {\n if(!this.props.clozemasterTtsAvailable || !this.props.systemTtsAvailable) {\n return null;\n }\n\n return (\n \n
\n );\n }\n\n renderSpeedControl() {\n const speed = parseFloat(this.props.textToSpeechSpeed);\n\n return (\n \n Use Clozemaster Voice:\n
\n \n {this.props.renderBtnGroupBtn('clozemasterTextToSpeech', 'on', this.props.clozemasterTextToSpeech, 'On')}\n {this.props.renderBtnGroupBtn('clozemasterTextToSpeech', 'off', this.props.clozemasterTextToSpeech, 'Off')}\n
\n \n
\n );\n }\n\n render() {\n return (\n \n Speed:\n
\n \n
\n \n {[0.5, 0.75, 1, 1.25, 1.5, 2].map((s) => (\n this.props.renderBtnGroupBtn('textToSpeechSpeed', s, speed, s + 'x')\n ))}\n
\n \n
\n );\n }\n};\n","import React from \"react\";\n\nimport { v4 as uuidv4 } from \"uuid\";\n\nimport Loading from \"../Loading\";\nimport PlaySystemTtsButton from \"../PlaySystemTtsButton\";\n\nexport default class Tokens extends React.Component {\n constructor(props) {\n super(props);\n\n this.id = `tokens-${uuidv4()}`;\n\n this.state = {\n loading: true\n };\n }\n \n componentDidMount() {\n this.loadTokens();\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { loading, tokens } = this.state;\n if(prevState.loading && !loading && tokens && tokens.length) {\n $(`#${this.id} [data-toggle=popover]`).popover();\n }\n }\n\n componentWillUnmount() {\n $(`#${this.id} [data-toggle=popover]`).popover(\"destroy\");\n }\n\n loadTokens() {\n const { tokenizeableId, tokenizeableType, url } = this.props;\n\n this.setState({ loading: true });\n\n $.ajax({\n data: {\n tokenizeable_id: tokenizeableId,\n tokenizeable_type: tokenizeableType\n },\n url\n })\n .done((data) => {\n console.log(data);\n const { tokens } = data;\n\n this.setState({\n loading: false,\n tokens\n });\n })\n .fail(() => {\n alert(\"Oh no! There was an error loading the tokens. Sorry about that. Please try again and let us know if you see this message again.\");\n });\n }\n\n renderMorphologicalFeatures(t) {\n if(!t.morphologicalFeatures || !t.morphologicalFeatures.length) {\n return null;\n }\n\n const { onClick } = this.props;\n\n return (\n \n Text-to-Speech\n
\n {this.renderControls()}\n \n `${f.keyLabel.charAt(0).toUpperCase() + f.keyLabel.slice(1)}: ${f.valueLabel}`).join(\"
\")}\n // data-content={`\n //\n // ${t.morphologicalFeatures.map((f) => `
\n // `}\n data-placement=\"bottom\"\n data-toggle=\"popover\"\n data-trigger=\"focus\"\n role=\"button\"\n style={{ marginTop: 10 }}\n >\n More\n \n
\n );\n }\n\n renderLemma(t) {\n if(!t.lemma || !t.lemma.text || t.text === t.lemma.text) {\n return null;\n }\n\n const { onClick, targetLanguageCode, targetLanguageIso } = this.props;\n\n const text = !!onClick ? (\n \")}\n // data-content={`\n //
| ${f.keyLabel} | ${f.valueLabel} |
\n {text}\n
\n );\n }\n\n renderTokenText(t) {\n const { onClick } = this.props;\n\n if(!onClick) {\n return (\n \n {t.text}\n \n );\n }\n\n return (\n \n
\n {!!t.lemma.pronunciation && t.lemma.pronunciation !== t.lemma.text && {t.lemma.pronunciation}
}\n \n {tokens.map((t) => (\n
\n );\n }\n}\n\n","import React from \"react\";\n\nimport moment from 'moment';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nimport { LANGUAGE_ACCENT_MAP, secondsSinceEpoch } from \"../helpers\";\n\nimport AddSentenceToCollectionModal from \"./AddSentenceToCollectionModal\";\nimport ClozeSentenceSearchModal from \"./ClozeSentenceSearchModal\";\nimport CollectionClozeSentenceEditorModal from \"./CollectionClozeSentenceEditorModal\";\nimport CopySentencePopover from \"./CopySentencePopover\";\nimport DiscussionModal from \"./PlayCollection/DiscussionModal\";\nimport ExplanationRequest from \"./ExplanationRequest\";\nimport FadeIn from \"./FadeIn\";\nimport FadeOut from \"./FadeOut\";\nimport FlagSprite from \"./FlagSprite\";\nimport GameSettings from \"./PlayCollection/GameSettings\";\nimport HelpModal from \"./PlayCollection/HelpModal\";\nimport Hint from \"./PlayCollection/Hint\";\nimport Icon from \"./Icon\";\nimport Incorrect from \"./PlayCollection/Incorrect\";\nimport IntraRoundAd from \"./PlayCollection/IntraRoundAd\";\nimport LeveledUpModal from \"./PlayCollection/LeveledUpModal\";\nimport ListeningControl from \"./PlayCollection/ListeningControl\";\nimport Loading from \"./Loading\";\nimport ManageCollectionModal from \"./ManageCollectionModal\";\nimport Modal from \"./Modal\";\nimport ModalFooterCloseBtn from \"./ModalFooterCloseBtn\";\nimport ModalProPromo from \"./ModalProPromo\";\nimport MultipleChoiceOptions from \"./PlayCollection/MultipleChoiceOptions\";\nimport Points from \"./PlayCollection/Points\";\nimport ReportErrorBtn from \"./PlayCollection/ReportErrorBtn\";\nimport RoundHistoryModal from \"./PlayCollection/RoundHistoryModal\";\nimport RoundResults from \"./PlayCollection/RoundResults\";\nimport SelectionPopover from \"./SelectionPopover\";\nimport SlideDown from \"./SlideDown\";\n// import SpeechToText from \"./SpeechToText\";\nimport Tokens from \"./PlayCollection/Tokens\";\n\nconst PlayCollectionModes = {\n fullTextInput: \"full_text_input\",\n multipleChoice: 'multiple_choice',\n textInput: 'text_input'\n};\n\nconst ultimatePunctuationRegex = /[!-/:-@[-`{-~¡-©«-¬®-±´¶-¸»¿×÷˂-˅˒-˟˥-˫˭˯-˿͵;΄-΅·϶҂՚-՟։-֊־׀׃׆׳-״؆-؏؛؞-؟٪-٭۔۩۽-۾܀-܍߶-߹।-॥॰৲-৳৺૱୰௳-௺౿ೱ-ೲ൹෴฿๏๚-๛༁-༗༚-༟༴༶༸༺-༽྅྾-࿅࿇-࿌࿎-࿔၊-၏႞-႟჻፠-፨᎐-᎙᙭-᙮᚛-᚜᛫-᛭᜵-᜶។-៖៘-៛᠀-᠊᥀᥄-᥅᧞-᧿᨞-᨟᭚-᭪᭴-᭼᰻-᰿᱾-᱿᾽᾿-῁῍-῏῝-῟῭-`´-῾\\u2000-\\u206e⁺-⁾₊-₎₠-₵℀-℁℃-℆℈-℉℔№-℘℞-℣℥℧℩℮℺-℻⅀-⅄⅊-⅍⅏←-⏧␀-␦⑀-⑊⒜-ⓩ─-⚝⚠-⚼⛀-⛃✁-✄✆-✉✌-✧✩-❋❍❏-❒❖❘-❞❡-❵➔➘-➯➱-➾⟀-⟊⟌⟐-⭌⭐-⭔⳥-⳪⳹-⳼⳾-⳿⸀-\\u2e7e⺀-⺙⺛-⻳⼀-⿕⿰-⿻\\u3000-〿゛-゜゠・㆐-㆑㆖-㆟㇀-㇣㈀-㈞㈪-㉃㉐㉠-㉿㊊-㊰㋀-㋾㌀-㏿䷀-䷿꒐-꓆꘍-꘏꙳꙾꜀-꜖꜠-꜡꞉-꞊꠨-꠫꡴-꡷꣎-꣏꤮-꤯꥟꩜-꩟﬩﴾-﴿﷼-﷽︐-︙︰-﹒﹔-﹦﹨-﹫！-／：-＠［-｀｛-･￠-￦￨-￮-�]|\\ud800[\\udd00-\\udd02\\udd37-\\udd3f\\udd79-\\udd89\\udd90-\\udd9b\\uddd0-\\uddfc\\udf9f\\udfd0]|\\ud802[\\udd1f\\udd3f\\ude50-\\ude58]|\\ud809[\\udc00-\\udc7e]|\\ud834[\\udc00-\\udcf5\\udd00-\\udd26\\udd29-\\udd64\\udd6a-\\udd6c\\udd83-\\udd84\\udd8c-\\udda9\\uddae-\\udddd\\ude00-\\ude41\\ude45\\udf00-\\udf56]|\\ud835[\\udec1\\udedb\\udefb\\udf15\\udf35\\udf4f\\udf6f\\udf89\\udfa9\\udfc3]|\\ud83c[\\udc00-\\udc2b\\udc30-\\udc93]/g;\n\nexport default class PlayCollection extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = Object.assign(this.getInitialGameState(), {\n gameSettings: props.gameSettings || {},\n hasRunTutorial: props.hasRunTutorial || !!window.localStorage.getItem(\"hasRunPlayTutorial\"),\n intraRoundAd: props.intraRoundAd,\n isRunningTutorial: false,\n translationVisible: true\n });\n }\n\n componentDidMount() {\n this.setupHotkeys();\n this.initTts();\n this.initSpeaking();\n\n $('body')\n .tooltip({ selector: '[data-toggle=\"tooltip\"]' })\n .on('click', (e) => {\n if(!!this.state.selectionPopoverId && !$(e.target).parents('.selection-popover, .sentence').length) {\n this.setState({\n selectionPopoverId: null,\n selectedSentenceClozeStr: null,\n selectedSentenceText: null\n });\n }\n })\n .on('mouseup', (e) => this.handleSelectionOnMouseUp(e));\n\n $('footer.footer a').on('click', function(e) {\n e.preventDefault();\n if(confirm('Are you sure you want to leave this page?')) {\n window.location = e.currentTarget.href;\n }\n });\n\n if(this.shouldShowIntraRoundAd()) {\n this.setState({\n intraRoundAdVisible: true,\n loading: false\n });\n }\n else {\n this.incrementRoundsPlayedCount();\n this.loadCollectionClozeSentences();\n }\n }\n\n initTts() {\n // run check to load voices\n this.isSystemTtsAvailable();\n }\n\n initSpeaking() {\n if(!this.isPlayingSpeaking()) {\n return false;\n }\n\n if(window['webkitSpeechRecognition']) {\n this.recognition = new webkitSpeechRecognition();\n }\n else if(window['SpeechRecongition']) {\n this.recognition = new SpeechRecongition();\n }\n else {\n return alert('Unable to play speaking on this browser! Sorry about that. Please try the latest Google Chrome.');\n }\n\n this.recognition.continuous = true;\n this.recognition.lang = this.props.targetLanguageIso.toLowerCase() + '-' + this.props.targetLanguageIso.toUpperCase();\n this.recognition.interimResults = true;\n \n this.recognition.onresult = (event) => {\n const transcript = event.results[0][0].transcript;\n this.setState({ speakingTranscript: transcript });\n if(event.results[0].isFinal) {\n this.stopRecordingAndResetRecordBtn();\n const matchingAnswer = this.getCurrentSentenceAnswers().find((a) => transcript.toLowerCase().match(a.toLowerCase()));\n if(!this.state.answered && matchingAnswer) {\n if(this.isPlayingTextInput()) {\n this.setState({ textInputValue: transcript });\n }\n this.submitAnswer(matchingAnswer);\n }\n }\n };\n\n this.recognition.onerror = (e) => this.onSpeechRecognitionError(e);\n }\n\n onSpeechRecognitionError(e) {\n alert(\"Oh no! There was an error: \" + e.error + \" \" + e.message + \" - sorry about that. Speaking is an experimental feature. You may need to refresh the page or update your browser permissions. Please let us know if the issue persists. Speaking works best on the latest version of Chrome on desktop.\");\n this.stopRecordingAndResetRecordBtn();\n }\n\n setupAudio() {\n if(this.hasSetupAudio) {\n return true;\n }\n\n this.correctAudio.volume = 0.25;\n this.incorrectAudio.volume = 0.25;\n\n this.hasSetupAudio = true;\n }\n\n getInitialGameState() {\n return {\n answered: false,\n collectionClozeSentences: [],\n correct: null,\n correctlyAnsweredSentenceCount: 0,\n currentSentenceIndex: 0,\n discussionModalVisible: false,\n elapsedTime: 0,\n endingInfiniteRound: false,\n hasShownTokens: false,\n intraRoundAdNextRoundable: false,\n intraRoundAdVisible: false,\n listeningControlPlayComplete: false,\n loading: true,\n multipleChoice: false, // used while playing text input\n numCorrect: 0,\n numIncorrect: 0,\n numMastered: 0,\n numNew: 0,\n numReview: 0,\n playedNew: {},\n playedReview: {},\n points: null,\n previousAnswer: null,\n roundHistoryModalVisible: false,\n score: 0,\n sentenceEditorModalVisible: false,\n speakingTranscript: '',\n startedTextInput: false,\n textInputChangedAfterAnswering: false,\n textInputValue: '',\n tokensVisible: false,\n usedHint: false\n };\n }\n\n setupHotkeys() {\n $(window).on('keydown', (e) => {\n if($('.modal').is(':visible')) {\n return true;\n }\n\n // teaching collection name input\n if(this.isRoundComplete() && $('input').is(':focus')) {\n return true;\n }\n\n const { answered, gameSettings, multipleChoice, usedHint } = this.state;\n\n if(gameSettings.hotkeys !== 'on') {\n return true;\n }\n\n ////////////////////////////////////////\n // enter\n if(e.which === 13) {\n if(e.ctrlKey) {\n // fallback hotkey option for speaking\n if(this.isPlayingSpeaking()) {\n e.preventDefault();\n this.startRecording();\n }\n }\n else if(this.isRoundComplete()) {\n this.nextRound();\n }\n else if(answered) {\n if(this.answerQualityOptionsVisible()) {\n this.handleAnswerQualityResponse(1);\n }\n else {\n e.preventDefault();\n this.next();\n }\n }\n else if(this.isPlayingTextInput() || this.isPlayingFullTextInput()) {\n if(!this.state.textInputValue && !this.state.startedTextInput) {\n return false;\n }\n else if(!this.state.textInputValue && gameSettings.enterSubmitsEmpty === 'off') {\n return false;\n }\n this.submitAnswer(this.state.textInputValue);\n }\n }\n\n ////////////////////////////////////////\n // space\n if(e.which === 32) {\n if(this.isRoundComplete()) {\n e.preventDefault();\n this.nextRound();\n }\n else if(e.ctrlKey) {\n e.preventDefault();\n return this.playSentenceAudio();\n }\n else if(e.altKey && this.isPlayingSpeaking()) {\n e.preventDefault();\n this.startRecording();\n }\n else if(answered && !this.isPlayingTextInput() && !this.isPlayingFullTextInput()) {\n e.preventDefault();\n if(this.answerQualityOptionsVisible()) {\n this.handleAnswerQualityResponse(1);\n }\n else {\n this.next();\n }\n }\n }\n\n ////////////////////////////////////////\n // right arrow\n if(e.which === 39) {\n if(this.isRoundComplete()) {\n e.preventDefault();\n this.nextRound();\n }\n else if(answered && !$(this.textInput).is(':focus')) {\n e.preventDefault();\n this.next();\n }\n }\n\n ////////////////////////////////////////\n // 1-4 number keys\n if(this.multipleChoiceOptions && !answered && [49, 50, 51, 52].indexOf(e.which) >= 0) {\n e.preventDefault();\n this.multipleChoiceOptions.clickOptionAtIndex(e.which - 49);\n }\n // numpad\n if(this.multipleChoiceOptions && !answered && [97, 98, 99, 100].indexOf(e.which) >= 0) {\n e.preventDefault();\n this.multipleChoiceOptions.clickOptionAtIndex(e.which - 97);\n }\n // 1-3 keys for srs\n if(answered && this.answerQualityOptionsVisible() && [49, 50, 51].indexOf(e.which) >= 0) {\n e.preventDefault();\n this.handleAnswerQualityResponse(e.which - 49);\n }\n // numpad for srs\n if(answered && this.answerQualityOptionsVisible() && [97, 98, 99].indexOf(e.which) >= 0) {\n e.preventDefault();\n this.handleAnswerQualityResponse(e.which - 97);\n }\n\n ////////////////////////////////////////\n // a\n if(e.which === 65 && e.altKey && answered) {\n e.preventDefault();\n this.addCurrentSentenceToCollection();\n }\n\n ////////////////////////////////////////\n // c\n if(e.which === 67 && e.altKey && answered) {\n e.preventDefault();\n this.showManageCollectionModal();\n }\n\n ////////////////////////////////////////\n // d\n if(e.which === 68 && e.altKey && answered) {\n e.preventDefault();\n this.showSentenceEditorModal();\n }\n\n ////////////////////////////////////////\n // e\n if(e.which === 69 && e.altKey && answered) {\n e.preventDefault();\n $('.report-error.btn').click();\n }\n\n ////////////////////////////////////////\n // f\n if(e.which === 70 && e.altKey && answered) {\n e.preventDefault();\n $('.favorite-clozeable').click();\n }\n\n ////////////////////////////////////////\n // g\n if(e.which === 71 && e.altKey && answered) {\n e.preventDefault();\n this.onGrammarBtnClick();\n }\n\n ////////////////////////////////////////\n // h\n if(e.which === 72 && e.altKey) {\n if(this.isPlayingTextInput() && !answered && !multipleChoice && !usedHint) {\n e.preventDefault();\n this.useTextInputHint();\n }\n }\n\n ////////////////////////////////////////\n // i\n if(e.which === 73 && e.altKey && answered) {\n e.preventDefault();\n this.ignoreModal.show();\n }\n\n ////////////////////////////////////////\n // k\n if(e.which === 75 && e.altKey && answered) {\n e.preventDefault();\n if(gameSettings.manualMasterResetConfirm === 'on') {\n this.knowItModal.show();\n }\n else {\n this.onKnowItClick();\n }\n }\n\n ////////////////////////////////////////\n // m\n if(e.which === 77 && e.altKey && answered) {\n e.preventDefault();\n if(gameSettings.manualMasterResetConfirm === 'on') {\n this.masterModal.show();\n }\n else {\n this.onMasterClick();\n }\n }\n\n ////////////////////////////////////////\n // p\n if(e.which === 80 && e.altKey) {\n if(this.isPlayingTextInput() && !answered && !multipleChoice) {\n e.preventDefault();\n this.setState({ multipleChoice: true });\n }\n }\n\n ////////////////////////////////////////\n // r\n if(e.which === 82 && e.altKey && answered) {\n e.preventDefault();\n if(gameSettings.manualMasterResetConfirm === 'on') {\n this.resetModal.show();\n }\n else {\n this.onResetClick();\n }\n }\n\n ////////////////////////////////////////\n // s\n if(e.which === 83 && e.altKey) {\n e.preventDefault();\n this.showSentenceSearchModal();\n }\n\n ////////////////////////////////////////\n // t\n if(e.which === 84 && e.altKey) { \n e.preventDefault();\n this.toggleTranslation();\n }\n\n ////////////////////////////////////////\n // u\n if(e.which === 85 && e.altKey && answered) { \n e.preventDefault();\n this.setState({ discussionModalVisible: !this.state.discussionModalVisible });\n }\n\n ////////////////////////////////////////\n // y\n if(e.which === 89 && e.altKey) { \n e.preventDefault();\n this.setState({ roundHistoryModalVisible: !this.state.roundHistoryModalVisible });\n }\n });\n\n $(window).on('keyup', (e) => {\n // esc\n if(e.which === 27 && this.state.leveledUpModalVisible) {\n // extra safeguard to remove leveledUpModal\n // reports of black background getting stuck\n // modal shown after answer response returns, may create race condition somewhere\n this.setState({ leveledUpModalVisible: false });\n }\n });\n }\n\n isPlayingFullTextInput() {\n return this.props.mode === PlayCollectionModes.fullTextInput;\n }\n\n isPlayingMultipleChoice() {\n return this.props.mode === PlayCollectionModes.multipleChoice;\n }\n\n isPlayingTextInput() {\n return this.props.mode === PlayCollectionModes.textInput;\n }\n\n isPlayingListening() {\n return this.props.skill === 'listening';\n }\n\n isPlayingSpeaking() {\n return this.props.skill === 'speaking';\n }\n\n shouldShowIntraRoundAd() {\n if(!this.state.intraRoundAd || this.props.isTeachingCollection) {\n return false;\n }\n const roundsPlayedCount = this.getRoundsPlayedCount();\n return !!roundsPlayedCount && roundsPlayedCount % 4 === 0;\n }\n\n getRoundsPlayedCount() {\n return parseInt(window.localStorage.getItem(\"roundsPlayedCount\")) || 0;\n }\n\n incrementRoundsPlayedCount() {\n const roundsPlayedCount = this.getRoundsPlayedCount();\n window.localStorage.setItem(\"roundsPlayedCount\", \"\" + (roundsPlayedCount + 1));\n }\n\n resetRoundsPlayedCount() {\n window.localStorage.removeItem(\"roundsPlayedCount\");\n }\n\n nextRound() {\n const { intraRoundAdNextRoundable, intraRoundAdVisible } = this.state;\n\n if(this.shouldShowIntraRoundAd() && !intraRoundAdVisible) {\n return this.setState({ intraRoundAdVisible: true });\n }\n\n if(intraRoundAdVisible && !intraRoundAdNextRoundable) {\n return false;\n }\n\n this.incrementRoundsPlayedCount();\n this.setState(this.getInitialGameState(), () => this.loadCollectionClozeSentences());\n }\n\n loadMoreCollectionClozeSentences() {\n const { playUrl, mode, skill, scope, count } = this.props;\n\n if(this.isRoundComplete() || this.state.endingInfiniteRound) {\n return false;\n }\n\n $.ajax({\n url: playUrl,\n data: {\n mode,\n skill,\n scope,\n count\n }\n })\n .done((data) => {\n console.log(data);\n\n const {\n collectionClozeSentences\n } = this.state;\n\n const collectionClozeSentencesHash = collectionClozeSentences.reduce((h, ccs) => { h[ccs.id] = true; return h }, {});\n const newCollectionClozeSentences = data.collectionClozeSentences.filter((ccs) => !collectionClozeSentencesHash[ccs.id]);\n \n this.setState({\n loading: false,\n collectionClozeSentences: collectionClozeSentences.concat(newCollectionClozeSentences),\n });\n })\n .fail(() => {\n alert('Oh no! There was an error loading more sentences. Sorry about that. Please refresh the page to try again and let us know if you see the message again.');\n });\n }\n\n loadCollectionClozeSentences() {\n this.setState({ loading: true });\n\n const { playUrl, mode, skill, scope, count } = this.props;\n\n $.ajax({\n url: playUrl,\n data: {\n mode,\n skill,\n scope,\n count\n }\n })\n .done((data) => {\n console.log(data);\n this.setState({\n loading: false,\n alreadyMasteredNextReview: data.languagePairing.alreadyMasteredNextReview,\n clozeSentencesUrl: data.languagePairing.clozeSentencesUrl,\n collectionClozeSentences: data.collectionClozeSentences,\n collectionClozeSentencesUrl: data.collection.collectionClozeSentencesUrl,\n collectionClozeSentencesUpsertUrl: data.collection.collectionClozeSentencesUpsertUrl,\n collectionClozeSentencesIgnoreAllUrl: data.collection.collectionClozeSentencesIgnoreAllUrl,\n collectionClozeSentencesAnswerUrl: data.collection.collectionClozeSentencesAnswerUrl,\n collectionClozeSentencesSrsResponseUrl: data.collection.collectionClozeSentencesSrsResponseUrl,\n collectionsUrl: data.collectionsUrl,\n currentSentenceTimerStart: secondsSinceEpoch(),\n gameSettingsUrl: data.languagePairing.gameSettingsUrl,\n intraRoundAd: data.intraRoundAd,\n isCollectionEditable: data.collection.isEditable,\n isPro: data.user.isPro,\n isSignedIn: data.user.isSignedIn,\n languagePairingId: data.languagePairing.id,\n languagePairingLevel: data.languagePairing.level,\n languagePairingUrl: data.languagePairing.url,\n nextReviewByLevel: data.languagePairing.nextReviewByLevel,\n numMastered: 0,\n numNew: 0,\n numPlaying: 0,\n numReview: 0,\n playedNew: {},\n playedReview: {},\n reportErrorUrl: data.collection.collectionClozeSentencesErrorUrl,\n searchTranslationEntriesUrl: data.languagePairing.searchTranslationEntriesUrl,\n startingNumMastered: data.collection.numMastered,\n startingNumPlaying: data.collection.numPlaying,\n startingNumReadyForReview: data.collection.numReadyForReview,\n tokensEnabled: data.collection.tokensEnabled,\n tokensUrl: data.collection.tokensUrl,\n userSelectionTranslationsUrl: data.languagePairing.userSelectionTranslationsUrl,\n wordBank: data.wordBank,\n });\n })\n .fail(() => {\n alert('Oh no! There was an error loading sentences. Sorry about that. Please refresh the page to try again and let us know if you see the message again.');\n });\n }\n\n isReviewScope() {\n return this.props.scope === 'ready_for_review';\n }\n\n isFavoritedScope() {\n return this.props.scope === 'favorited';\n }\n\n renderPlayingName() {\n let action = 'Playing';\n\n if(this.isReviewScope()) {\n action = 'Reviewing';\n }\n else if(this.isFavoritedScope()) {\n action = 'Favorites';\n }\n\n return (\n \n
\n ))}\n \n {this.renderTokenText(t)}\n {(!t.posTag || t.posTag.key !== \"PUNCT\") && (\n
\n \n
\n )}\n {!!t.pronunciation && t.pronunciation !== t.text && {t.pronunciation}
}\n {!!t.posTag && t.posTag.key}
\n {this.renderLemma(t)}\n {this.renderMorphologicalFeatures(t)}\n \n {action}: {this.props.collectionName}\n
\n );\n }\n\n renderRoundStats() {\n const { answered, currentSentenceIndex, collectionClozeSentences, correctlyAnsweredSentenceCount, numCorrect, numIncorrect } = this.state;\n const pctComplete = correctlyAnsweredSentenceCount / collectionClozeSentences.filter((s) => !s.wasIncorrect).length * 100;\n\n return (\n \n
\n );\n }\n\n renderPlayingNameBanner() {\n if(this.props.isSignedIn || this.props.isTeachingCollection) {\n return (\n this.statusBar = el} style={{ display: 'block' }}>\n
\n {(!this.isInfiniteRound() || this.state.endingInfiniteRound) && (\n \n Correct : {numCorrect}\n
\n \n Incorrect : {numIncorrect}\n
\n \n To go : {this.isInfiniteRound() && !this.state.endingInfiniteRound ? 'Inf' : (collectionClozeSentences.length - currentSentenceIndex - (answered ? 1 : 0))}\n
\n \n \n
\n )}\n {this.renderPlayingNameBanner()}\n {this.renderSignUpInPromo()}\n {this.renderRoundCompleteBanner()}\n \n {this.renderPlayingName()}\n
\n );\n }\n }\n\n renderSignUpInPromo() {\n if(this.props.isSignedIn || this.props.isTeachingCollection) {\n return null;\n }\n\n return (\n \n );\n }\n\n renderRoundCompleteBanner() {\n if(!this.isRoundComplete()) {\n return null;\n }\n\n if(this.isNoSentences()) {\n return null;\n }\n\n return (\n \n \n \n
\n );\n }\n\n renderPoints() {\n if(this.state.answered && !this.state.correct) {\n return (\n \n
\n Round Complete!
\n\n {this.renderPoints()}\n
\n );\n }\n\n getCurrentSentence() {\n const { collectionClozeSentences, currentSentenceIndex } = this.state;\n return collectionClozeSentences[currentSentenceIndex];\n }\n\n getCurrentSentenceCloze() {\n return this.getCurrentSentence().text.split('{{')[1].split('}}')[0];\n }\n\n ignoreAll(callback) {\n this.setState({ updating: true });\n const currentSentence = this.getCurrentSentence();\n $.ajax({\n url: this.state.collectionClozeSentencesIgnoreAllUrl,\n method: 'put',\n data: {\n collection_cloze_sentence_id: currentSentence.id\n }\n })\n .done((data) => {\n // TODO! doesn't update other sentences that might have the same cloze\n const newCollectionClozeSentences = this.getUpdatedCollectionClozeSentences(currentSentence.id, { ignored: true });\n this.setState({\n collectionClozeSentences: newCollectionClozeSentences,\n updating: false\n }, callback);\n })\n .fail(() => {\n this.setState({ updating: false }, callback);\n alert('Oh no! There was an error updating the sentences. Sorry about that. Please try again and let us know if you see this message again.');\n });\n }\n\n updateCurrentSentence(attr, value, callback) {\n const currentSentence = this.getCurrentSentence();\n this.updateSentence({ sentence: currentSentence, attr, value, callback });\n }\n\n // expects attr string and value, or updates object\n updateSentence({ attr = null, callback, sentence, updates = null, value = null }) {\n this.setState({ updating: true });\n let update = { id: sentence.id };\n\n if(updates) {\n update = Object.assign(updates, update);\n }\n else {\n update[attr] = value;\n }\n\n $.ajax({\n url: sentence.collectionClozeSentencesUpsertUrl || this.state.collectionClozeSentencesUpsertUrl,\n method: 'post',\n dataType: 'json',\n contentType: 'application/json',\n data: JSON.stringify({ \n updates: [update]\n })\n })\n .then((data) => {\n return $.ajax({\n data: { ids: data.ids },\n method: 'post',\n url: data.collectionClozeSentencesBatchUrl\n });\n })\n .done((data) => {\n const updated = data.collectionClozeSentences[0];\n this.setState({\n collectionClozeSentences: this.state.collectionClozeSentences.map((ccs) => updated.id === ccs.id ? Object.assign(ccs, updated) : ccs),\n updating: false\n }, callback);\n })\n .fail(() => {\n this.setState({ updating: false }, callback);\n alert('Oh no! There was an error updating. Sorry about that. Please try again and let us know if you see this message again.');\n });\n }\n\n renderFavoriteToggle() {\n const { isSignedIn } = this.props;\n\n if(!this.state.isPro) {\n return (\n \n );\n }\n\n const currentSentence = this.getCurrentSentence();\n\n return (\n \n );\n }\n\n toggleTranslation() {\n this.setState({ translationVisible: !this.state.translationVisible });\n }\n\n renderTranslationsToggle() {\n const { gameSettings, answered } = this.state;\n\n if(gameSettings.translations === 'visible' || (gameSettings.translations === 'show-after' && answered)) {\n return null;\n }\n\n const button = (\n \n
\n \n
\n \n
\n \n Score: {score}\n
\n \n
\n \n \n
\n \n {/*\n
\n \n \n
\n */}\n \n = 1 ? \"#5cb85c\" : null, margin: \"0 5px\" }} />\n = 2 ? \"#5cb85c\" : null, margin: \"0 5px\" }} />\n = 3 ? \"#5cb85c\" : null, margin: \"0 5px\" }} />\n = 4 ? \"#5cb85c\" : null, margin: \"0 5px\" }} />\n
\n \n {pctMastered}% Mastered\n \n
\n \n \n \n
\n );\n }\n\n renderAudioHintBtn() {\n return null;\n return (\n \n );\n }\n\n renderManualResetBtn() {\n const currentSentence = this.getCurrentSentence();\n const { gameSettings } = this.state;\n const { manualMasterResetConfirm } = gameSettings;\n const { isSignedIn } = this.props;\n\n return (\n \n {this.renderAudioHintBtn()}\n {this.renderTranslationsToggle()}\n {this.renderTextInputToMultipleChoiceBtn()}\n {this.renderTextInputHintBtn()}\n
\n );\n }\n\n const { isSignedIn } = this.props;\n const currentSentence = this.getCurrentSentence();\n\n const defaultControls = (\n <>\n {this.renderTtsBtn()}\n {this.renderTranslationsToggle()}\n {this.renderPronunciationToggle()}\n {this.renderTransliterationToggle()}\n \n );\n\n return (\n \n \n {defaultControls}\n \n {this.renderFavoriteToggle()}\n {/*this.renderKnowItBtn()*/}\n {/*this.renderManualMasterBtn()*/}\n {/*this.renderManualResetBtn()*/}\n \n {this.renderGrammarBtn()}\n {/*Discuss 0*/}\n \n \n \n {/*\n \n \n {this.renderCopyCurrentSentenceToCollectionPopover()}\n \n */}\n \n
\n );\n }\n\n renderGrammarBtn() {\n const currentSentence = this.getCurrentSentence();\n const { tokensEnabled, tokensVisible } = this.state;\n const { isSignedIn } = this.props;\n\n if(isSignedIn && tokensEnabled && currentSentence.tokensCount) {\n return (\n \n );\n }\n }\n\n onGrammarBtnClick() {\n const { hasShownTokens, tokensVisible } = this.state;\n\n this.setState({ \n hasShownTokens: hasShownTokens || tokensVisible,\n tokensVisible: !tokensVisible\n });\n }\n\n showSentenceEditorModal() {\n this.setState({ sentenceEditorModalVisible: true });\n }\n\n onTextInputBeforeInput(e) {\n const { answered, gameSettings } = this.state;\n\n // prevent text input change when opening modal via shortcut hotkey\n // a, c, d, e, f, i, m, r, u\n if(gameSettings.hotkeys === \"on\" && answered && e.altKey && [65, 67, 68, 69, 70, 73, 77, 82, 85].indexOf(e.which) >= 0) {\n e.preventDefault();\n return true;\n }\n }\n\n onTextInputKeyDown(e) {\n const { answered, gameSettings } = this.state;\n\n if(answered && gameSettings.keyDownClearsTextInputAfterAnswering === \"on\" && !this.afterAnswerKeyDownTriggered) {\n // if enter then skip\n if(e.which === 13) {\n return true;\n }\n this.afterAnswerKeyDownTriggered = true;\n this.setState({ textInputValue: '' });\n }\n this.handleAccentsOnKeyDown(e);\n }\n\n onTextInputKeyUp(e) {\n if(!this.state.startedTextInput) {\n this.setState({ startedTextInput: true });\n }\n this.handleAccentsOnKeyUp(e);\n }\n\n onTextInputChange(e) {\n this.setState({\n textInputChangedAfterAnswering: this.state.answered,\n textInputValue: e.target.value\n });\n }\n\n handleAccentsOnKeyDown(e) {\n // not ideal, getting tick mark when using send_keys\n // suspect related to https://github.com/SeleniumHQ/selenium/issues/2704\n if(this.props.test && e.which === 0) {\n e.preventDefault();\n return false;\n }\n\n if(this.state.gameSettings.accentShortcuts !== 'on') {\n return null;\n }\n\n const caretPos = this.textInput.selectionStart;\n const c = String.fromCharCode(e.which);\n const accents = (LANGUAGE_ACCENT_MAP[this.props.targetLanguageIso] || {})[c.toUpperCase()];\n const accentDownCount = this.state.accentDownCount || 0;\n\n if(!e.altKey || !accents) {\n return null;\n }\n\n e.preventDefault();\n\n if(!accentDownCount) {\n this.accentingText = this.state.textInputValue;\n }\n\n let accent = accents[accentDownCount % accents.length];\n if(e.shiftKey) {\n accent = accent.toUpperCase();\n }\n\n const t = this.accentingText;\n this.setState({\n accentDownCount: (accentDownCount || 0) + 1,\n textInputValue: t.substring(0, caretPos) + accent + t.substring(caretPos)\n }, () => {\n this.textInput.selectionStart = caretPos;\n this.textInput.selectionEnd = caretPos + 1;\n });\n }\n\n handleAccentsOnKeyUp(e) {\n // not ideal, getting tick mark when using send_keys\n // suspect related to https://github.com/SeleniumHQ/selenium/issues/2704\n if(this.props.test && e.which === 0) {\n e.preventDefault();\n return false;\n }\n\n if(this.state.gameSettings.accentShortcuts !== 'on') {\n return null;\n }\n\n // 17 = ctrl key, 18 = alt key\n if(e.which === 18 && this.state.accentDownCount > 0) {\n const caretPos = this.textInput.selectionStart;\n this.setState({ accentDownCount: 0 });\n this.textInput.selectionStart = caretPos + 1;\n this.textInput.selectionEnd = caretPos + 1;\n }\n }\n\n getCurrentSentenceAnswers() {\n const currentSentence = this.getCurrentSentence();\n const cloze = this.getCurrentSentenceCloze();\n return [cloze].concat(currentSentence.alternativeAnswers || []);\n }\n\n isTextInputCorrectSoFar() {\n const lowerCaseTextInputValue = this.replaceAccents((this.state.textInputValue || '').toLowerCase());\n return !!this.getCurrentSentenceAnswers().find((a) => this.replaceAccents(a.toLowerCase()).indexOf(lowerCaseTextInputValue) === 0);\n }\n\n replaceAccents(str) {\n // treat ё as е for russian\n if(this.props.targetLanguageIso === 'ru') {\n return str.replace(/ё/g, 'е').replace(/Ё/g, 'Е');\n }\n\n return str;\n }\n\n onAddToCollectionClick() {\n // show modal with custom sentence based on selection\n //\n // show modal\n this.setState({\n addSentenceToCollectionModalVisible: true,\n selectionPopoverId: null, // hide the popover\n }, () => this.clearSelection()); // clear the selection to ensure popover stays closed\n // native check button - we post this sentence for people learning from target language to confirm whether sentence is correct\n }\n\n onSearchCollectionClick() {\n this.showManageCollectionModal();\n }\n\n showManageCollectionModal() {\n this.setState({\n manageCollectionModalVisible: true,\n selectionPopoverId: null\n });\n }\n\n onSearchSentencesClick() {\n this.showSentenceSearchModal();\n }\n\n showSentenceSearchModal() {\n const { answered } = this.state;\n\n if(!answered) {\n return null;\n }\n\n this.setState({\n clozeSentenceSearchModalVisible: true,\n selectionPopoverId: null\n });\n }\n\n getSelectionPopoverProps() {\n return {\n baseLanguageIso: this.props.baseLanguageIso,\n baseLanguageCode: this.props.baseLanguageCode,\n isPro: this.state.isPro,\n isSearchCollectionAvailable: !!this.props.collectionId,\n onClose: () => this.onSelectionPopoverClose(),\n onAddToCollectionClick: () => this.onAddToCollectionClick(),\n onSearchCollectionClick: () => this.onSearchCollectionClick(),\n onSearchSentencesClick: () => this.onSearchSentencesClick(),\n searchTranslationEntriesUrl: this.state.searchTranslationEntriesUrl,\n targetLanguageCode: this.props.targetLanguageCode,\n targetLanguageEnglishName: this.props.targetLanguageEnglishName,\n targetLanguageIso: this.props.targetLanguageIso,\n userSelectionTranslationsUrl: this.state.userSelectionTranslationsUrl\n };\n }\n\n renderCloze() {\n const { mode } = this.props;\n const { answered, gameSettings, textInputValue } = this.state;\n const currentSentence = this.getCurrentSentence();\n const cloze = this.getCurrentSentenceCloze();\n\n if(this.isPlayingTextInput()) {\n return (\n \n
\n Get full access to sentence grammar with Clozemaster Pro - subscribe today and get fluent faster!
\n \n\n \n {text}\n
\n {currentSentence.pronunciation}
\n \n )}\n {!!currentSentence.transliteration && answered && (gameSettings.transliteration === 'on' || this.state.transliterationVisible) && (\n <>\n {currentSentence.transliteration}
\n \n )}\n {this.renderAccentButtons()}\n \n {\n const { textInputValue } = this.state;\n const text = this.getCurrentSentencePlainText();\n let i = 0;\n while(text[i] && textInputValue[i] === text[i]) {\n i = i + 1;\n }\n this.setState({ textInputValue: text.substring(0, i + 1) }, () => {\n this.textInput && this.textInput.focus();\n });\n }}\n title=\"Hint!\"\n >\n
\n \n this.submitAnswer(textInputValue)}\n >\n Submit\n \n
\n \n );\n }\n\n renderCurrentSentence() {\n if(this.isListening()) {\n return null;\n }\n\n if(!this.state.answered && this.isPlayingFullTextInput()) {\n return this.renderCurrentSentenceFullTextInput();\n }\n\n const { answered, gameSettings, nextReviewControlsVisible, tokensVisible } = this.state;\n const currentSentence = this.getCurrentSentence();\n let { preClozeStr, cloze, postClozeStr } = this.getCurrentSentenceParts();\n const { baseLanguageRtl, targetLanguageRtl } = this.props;\n\n if(answered) {// && !targetLanguageCode.match(/^cmn|^jpn/)) {\n preClozeStr = this.wordify({ text: preClozeStr, idPrefix: 'pre' });\n postClozeStr = this.wordify({ text: postClozeStr, idPrefix: 'post' });\n }\n\n let sentence = (\n \n {sentence}\n
\n {(gameSettings.translations === 'visible' || this.state.translationVisible) && (\n {currentSentence.pronunciation}
\n \n )}\n {!!currentSentence.transliteration && answered && (gameSettings.transliteration === 'on' || this.state.transliterationVisible) && (\n <>\n {currentSentence.transliteration}
\n \n )}\n {answered && !!currentSentence.notes && Notes: {currentSentence.notes}
}\n {answered && tokensVisible && this.renderTokens()}\n {this.renderAccentButtons()}\n {this.renderCurrentSentenceControls()}\n {answered && nextReviewControlsVisible && (\n - \n
- Next review: \n
- {this.renderManualResetBtn()}
0 days \n
{Math.round(nextReviewDays * 0.75)} days \n
{Math.round(nextReviewDays * 1.25) || 2} days \n - {this.renderManualMasterBtn()}
180 days \n - {this.renderKnowItBtn()}
Never \n
Custom \n
{btns}
;\n }\n\n onAccentBtnClick(e, accent) {\n if(e.shiftKey) {\n accent = accent.toUpperCase();\n }\n\n const t = this.state.textInputValue;\n const caretPos = this.textInput.selectionStart;\n\n this.setState({\n textInputValue: t.substring(0, caretPos) + accent + t.substring(caretPos)\n }, () => {\n this.textInput.focus();\n this.textInput.selectionStart = caretPos + 1;\n this.textInput.selectionEnd = caretPos + 1;\n });\n }\n\n showOffBy(distance) {\n const content = 'Almost! Off by ' + distance + ' letter' + (distance === 1 ? '' : 's') + '.';\n if($('.off-by').length) {\n $('.off-by').replaceWith(content);\n }\n else {\n $(this.textInput).popover({ content, html: true, trigger: 'manual', placement: 'top' }).popover('show');\n }\n }\n\n sendAnswer({ correct, timeDiff }) {\n if(!this.props.isSignedIn) {\n return false;\n }\n\n const { collectionClozeSentencesAnswerUrl, gameSettings, multipleChoice, usedHint } = this.state;\n const currentSentence = this.getCurrentSentence();\n const { mode, skill, scope } = this.props;\n\n // fire off answer\n $.ajax({\n contentType: \"application/json\",\n data: JSON.stringify({\n id: currentSentence.id,\n correct,\n // sending full_text_input as just text_input for now\n // TODO! update stat tracking to keep track of full_text_input if we decide to keep\n mode: (this.isPlayingMultipleChoice() || multipleChoice) ? PlayCollectionModes.multipleChoice : (this.isPlayingFullTextInput() ? \"text_input\" : mode),\n skill,\n playing_favorites: this.isFavoritedScope(),\n time: timeDiff,\n used_hint: usedHint\n }),\n method: 'put',\n url: currentSentence.collectionClozeSentencesAnswerUrl || collectionClozeSentencesAnswerUrl,\n })\n .done((data) => {\n const leveledUp = data.languagePairing.level > this.state.languagePairingLevel;\n this.setState({\n languagePairingLevel: data.languagePairing.level,\n leveledUp: this.state.leveledUp || leveledUp,\n leveledUpModalVisible: gameSettings.leveledUpNotifications === 'on' && leveledUp\n });\n })\n .fail(() => {\n alert('Oh no! There was an error saving that answer. Sorry about that. Your progress up until now has been saved. Please refresh the page and try again, and let us know if you see this message again.');\n });\n }\n\n isCorrectAnswer(a) {\n if(this.isPlayingFullTextInput()) {\n return a === this.getCurrentSentencePlainText();\n }\n\n const answers = this.getCurrentSentenceAnswers();\n const clean = this.replaceAccents(a.toLowerCase().replace(/^\\s+|\\s+$/g, ''));\n return !!answers.filter((answer) => (clean === this.replaceAccents(answer.toLowerCase()))).length;\n }\n\n submitAnswer(a) {\n const currentSentence = this.getCurrentSentence();\n const cloze = this.getCurrentSentenceCloze();\n const { mode, skill, scope } = this.props;\n const {\n collectionClozeSentences,\n collectionClozeSentencesAnswerUrl,\n correctlyAnsweredSentenceCount,\n currentSentenceTimerStart,\n elapsedTime,\n gameSettings,\n multipleChoice,\n nextReviewByLevel,\n numCorrect,\n numIncorrect,\n numMastered,\n numNew,\n numReview,\n playedNew,\n playedReview,\n previousAnswer,\n score,\n translationVisible,\n textInputValue,\n usedHint\n } = this.state;\n\n const correct = this.isCorrectAnswer(a);\n\n let distance = 0;\n if(this.isPlayingTextInput() && !multipleChoice && !correct && a !== previousAnswer && gameSettings.spellingHints === 'on' && Levenshtein && (distance = Levenshtein.get(this.replaceAccents(a.toLowerCase()), this.replaceAccents(cloze.toLowerCase()))) <= 2) {\n this.setState({ previousAnswer: a });\n this.showOffBy(distance);\n return true;\n }\n $(this.textInput).popover('destroy');\n\n const updatedCollectionClozeSentences = JSON.parse(JSON.stringify(collectionClozeSentences));\n\n let points = 0;\n const levelWas = currentSentence.level;\n let level = currentSentence.level;\n if(correct) {\n if(this.isFavoritedScope()) {\n points = correct ? 2 : 0;\n }\n else {\n level = Math.min(currentSentence.level + 1, 4);\n points = level * ((this.isPlayingMultipleChoice() || multipleChoice) ? 4 : 8);\n if(usedHint) {\n points = points * 0.5;\n }\n if(currentSentence.nextReview && currentSentence.nextReview > moment().format(\"YYYY-MM-DD\")) {\n points = points * 0.5;\n }\n }\n }\n else {\n if(!this.isFavoritedScope()) {\n level = 0;\n }\n currentSentence.wasIncorrect = true;\n updatedCollectionClozeSentences.push(currentSentence);\n }\n\n const countsAsNew = !currentSentence.nextReview;\n const countsAsReview = !countsAsNew && !playedNew[currentSentence.id] && !playedReview[currentSentence.id] && !!currentSentence.nextReview;\n const nextReview = this.isFavoritedScope() ? currentSentence.nextReview : moment().add(nextReviewByLevel[level], 'days').format(\"YYYY-MM-DD\");\n\n updatedCollectionClozeSentences.forEach((ccs) => {\n if(ccs.id === currentSentence.id) {\n ccs.level = level;\n ccs.nextReview = nextReview;\n }\n });\n\n const timeDiff = Math.min(secondsSinceEpoch() - currentSentenceTimerStart, 30); // max 30 seconds per answer\n\n this.sendAnswer({ correct, timeDiff });\n\n if((!!currentSentence.audioRecordingUrl || this.isTtsAvailable()) && gameSettings.textToSpeech === 'on') {\n this.playSentenceAudio();\n }\n this.playAnswerSoundEffect(correct);\n\n $('[data-toggle=\"tooltip\"]').tooltip('hide');\n\n this.afterAnswerKeyDownTriggered = false;\n this.setState({\n answered: true,\n answerSubmitted: a,\n collectionClozeSentences: updatedCollectionClozeSentences,\n correct,\n correctlyAnsweredSentenceCount: correctlyAnsweredSentenceCount + (correct ? 1 : 0),\n elapsedTime: elapsedTime + timeDiff,\n numCorrect: numCorrect + (correct ? 1 : 0),\n numIncorrect: numIncorrect + (correct ? 0 : 1),\n numMastered: numMastered + (currentSentence.level < 4 && level === 4 ? 1 : 0),\n numNew: numNew + (countsAsNew ? 1 : 0),\n numReview: numReview + (countsAsReview ? 1 : 0),\n playedNew: countsAsNew ? Object.assign({}, playedNew, { [currentSentence.id]: true }) : playedNew,\n playedReview: countsAsReview ? Object.assign({}, playedReview, { [currentSentence.id]: true }) : playedReview,\n points,\n pronunciationVisible: false,\n score: score + points,\n alreadyMastered: levelWas === level && level === 4,\n textInputValue: cloze,\n translationVisible: (gameSettings.translations === 'hidden' && translationVisible) || gameSettings.translations === 'show-after',\n transliterationVisible: false\n });\n }\n\n playAnswerSoundEffect(correct) {\n if(this.state.gameSettings.soundEffects !== 'on') {\n return false;\n }\n\n this.setupAudio();\n\n this[(correct ? 'correct' : 'incorrect') + 'Audio'].play();\n }\n\n endInfiniteRound() {\n const updatedCollectionClozeSentences = this.state.collectionClozeSentences.filter((s, i) => {\n return i <= this.state.currentSentenceIndex || s.wasIncorrect;\n });\n\n this.setState({\n collectionClozeSentences: updatedCollectionClozeSentences,\n endingInfiniteRound: true\n }, () => this.next());\n\n // this.setState({\n // collectionClozeSentences: JSON.parse(JSON.stringify(this.state.collectionClozeSentences)).slice(0, this.state.currentSentenceIndex + 1),\n // currentSentenceIndex: this.state.currentSentenceIndex + 1 // or call next\n // });\n }\n\n renderEndInfiniteRoundBtn() {\n if(!this.isInfiniteRound() || this.state.endingInfiniteRound) {\n return null;\n }\n\n return (\n Round\n \n );\n }\n\n answerQualityOptionsVisible() {\n const currentSentence = this.getCurrentSentence();\n return !this.isFavoritedScope() &&\n !!this.state.alreadyMasteredNextReview &&\n this.state.alreadyMastered &&\n !(currentSentence.nextReview || \"\").match(/2100/) &&\n currentSentence.level === 4;\n }\n\n renderNextBtn() {\n if(!this.state.answered) {\n return null;\n }\n\n let control = null;\n if(this.answerQualityOptionsVisible()) {\n control = (\n \n \n \n \n \n );\n }\n else {\n control = (\n \n );\n }\n\n return (\n
\n {this.renderEndInfiniteRoundBtn()}\n {control}\n
\n );\n }\n\n handleAnswerQualityResponse(quality) {\n if(this.state.alreadyMasteredNextReview === 'srs') {\n const srsResponseQuality = [1, 4, 7];\n this.sendSrsResponse(srsResponseQuality[quality]);\n }\n else if(this.state.alreadyMasteredNextReview === 'static') {\n const { nextReviewByLevel } = this.state;\n // 0.5, 1, 2\n const m = (quality === 0 ? 0.5 : quality);\n this.updateCurrentSentence('next_review', moment().add(Math.ceil(nextReviewByLevel[4] * m), 'days').format(\"YYYY-MM-DD\"));\n }\n else {\n alert(\"Something's gone terribly wrong! Sorry about that. Your answer's been saved, but not your Hard/Normal/Easy selection. Please let us know.\");\n }\n this.next();\n }\n\n sendSrsResponse(quality) {\n const currentSentence = this.getCurrentSentence();\n this.setState({ updating: true });\n\n $.ajax({\n url: currentSentence.collectionClozeSentencesSrsResponseUrl || this.state.collectionClozeSentencesSrsResponseUrl,\n method: 'post',\n dataType: 'json',\n contentType: 'application/json',\n data: JSON.stringify({ \n srs_response: {\n collection_cloze_sentence_id: currentSentence.id,\n quality\n }\n })\n })\n .done((data) => {\n this.setState({\n collectionClozeSentences: this.state.collectionClozeSentences.map((ccs) => (\n ccs.id === currentSentence.id ? data.collectionClozeSentence : ccs\n )),\n updating: false\n });\n })\n .fail(() => {\n this.setState({ updating: false });\n alert('Oh no! There was an error updating. Sorry about that. Please try again and let us know if you see this message again.');\n });\n }\n\n isInfiniteRound() {\n return this.props.count === 'infinite';\n }\n\n runTutorial() {\n this.setState({ isRunningTutorial: true });\n\n const popovers = [\n {\n selector: \".level .progress\",\n opts: {\n content: \"Every sentence has a % Mastered.
\",\n }\n },\n {\n selector: \".level .progress\",\n opts: {\n content: \"Answer a sentence correctly 4 times in a row to get it to 100% Mastered.
\",\n }\n },\n {\n selector: [\".level .next-review\", \".level .progress\"],\n opts: {\n content: \"Each time a sentence is answered correctly, it's queued up to be reviewed further in the future.
\",\n }\n },\n {\n selector: \".score.total\",\n opts: {\n content: \"A correct answer scores points.
\",\n }\n },\n {\n selector: \".score.total\",\n opts: {\n content: \"A sentence with a higher % Mastered scores more points, and playing text input scores more points than multiple choice.
\",\n }\n },\n {\n selector: \".score.total\",\n opts: {\n content: \"An incorrect answer scores 0 points and resets the sentence to 0% Mastered.
\",\n }\n },\n {\n selector: \".btn.game-settings\",\n opts: {\n content: \"You can change the game settings here. Some settings are different for multiple choice vs. text input.
\"\n }\n },\n {\n selector: [\".next\", \".stage .sentence\"],\n opts: {\n content: \"That's it! 🙌 More questions? Click the Help button bottom right.
\",\n }\n },\n ];\n let popoverIndex = 0;\n\n const defaultOpts = {\n animation: false,\n container: \"body\",\n html: true,\n placement: \"bottom\",\n template: `\n\n \n \n \n
\n `,\n trigger: \"manual\"\n };\n\n const showNextPopover = () => {\n this.clearTutorialPopovers();\n\n if(popoverIndex >= popovers.length) {\n this.completedTutorial();\n return false;\n }\n\n const { opts } = popovers[popoverIndex];\n let { selector } = popovers[popoverIndex];\n const isLastPopover = popoverIndex + 1 >= popovers.length;\n opts.content = `\n \n ${opts.content}\n
\n \n ${popoverIndex + 1}/${popovers.length}\n \n ${isLastPopover ? \"\" : ``}\n
\n `;\n\n // allows for selector to be an array with a fallback selector if the first is not present\n if(selector instanceof Array) {\n if(!$(selector[0]).length) {\n selector = selector[1];\n }\n else {\n selector = selector[0];\n }\n }\n\n $(selector)\n .addClass(\"tutorial-target\")\n .popover(Object.assign({}, defaultOpts, opts))\n .popover(\"show\");\n\n const $popover = $(\".popover\");\n const selectorTop = $(selector).offset().top;\n const popoverTop = $popover.offset().top;\n const popoverBottom = popoverTop + $popover.height();\n const screenTop = $(window).scrollTop();\n const screenHeight = $(window).height();\n const screenBottom = screenTop + screenHeight;\n let scrollTop = null;\n if(popoverBottom > screenBottom) {\n scrollTop = popoverBottom - screenHeight;\n }\n if(selectorTop < screenTop) {\n scrollTop = selectorTop - 20; // - 20 for buffer\n }\n if(scrollTop) {\n $(\"html, body\").animate({ scrollTop });\n }\n };\n\n $(\"body\").on(\"click.tutorial\", \".popover .btn.next\", () => {\n popoverIndex += 1;\n showNextPopover();\n });\n $(\"body\").on(\"click.tutorial\", \".popover .btn.skip\", () => {\n this.completedTutorial();\n });\n\n showNextPopover();\n }\n\n clearTutorialPopovers() {\n $(\".tutorial-target\").popover(\"destroy\").removeClass(\"tutorial-target\");\n }\n\n completedTutorial() {\n const { isSignedIn } = this.props;\n const { hasRunTutorial } = this.state;\n\n this.setState({\n hasRunTutorial: true,\n isRunningTutorial: false\n }, () => this.clearTutorialPopovers());\n\n // if it was already true can skip update\n if(hasRunTutorial) {\n return true;\n }\n\n if(isSignedIn) {\n $.ajax({\n contentType: \"application/json\",\n data: JSON.stringify({\n user: { has_run_play_tutorial: true }\n }),\n method: \"put\",\n url: \"/api/v1/users\"\n });\n }\n else {\n window.localStorage.setItem(\"hasRunPlayTutorial\", \"true\");\n }\n }\n\n next() {\n const { shouldRunTutorial } = this.props;\n const {\n currentSentenceIndex,\n collectionClozeSentences,\n gameSettings,\n hasRunTutorial,\n hasShownTokens,\n isRunningTutorial,\n tokensVisible\n } = this.state;\n\n if(this.isRoundComplete()) {\n return false;\n }\n\n if(this.sentenceAudio) {\n this.sentenceAudio.pause();\n }\n\n if(this.isPlayingSpeaking()) {\n this.stopRecordingAndResetRecordBtn();\n }\n\n if(isRunningTutorial) {\n this.completedTutorial();\n }\n else if(shouldRunTutorial && !hasRunTutorial) {\n return this.runTutorial();\n }\n\n this.setState({\n alreadyMastered: false,\n answered: false,\n correct: null,\n points: null,\n currentSentenceIndex: currentSentenceIndex + 1,\n currentSentenceTimerStart: secondsSinceEpoch(),\n hasShownTokens: hasShownTokens || tokensVisible,\n listeningControlPlayComplete: false,\n multipleChoice: false,\n previousAnswer: null,\n speakingTranscript: '',\n startedTextInput: false,\n textInputChangedAfterAnswering: false,\n textInputValue: '',\n tokensVisible: false,\n translationVisible: gameSettings.translations === 'visible',\n usedHint: false\n }, () => {\n if(this.textInput) {\n this.textInput.focus();\n }\n // infinite and within N of the end, then load more\n if(this.isInfiniteRound() && this.state.currentSentenceIndex > this.state.collectionClozeSentences.length - 5) {\n this.loadMoreCollectionClozeSentences();\n }\n });\n }\n\n onMultipleChoiceOptionClick(answer) {\n if(this.state.answered) {\n this.next();\n }\n else {\n this.submitAnswer(answer);\n }\n }\n\n renderMultipleChoiceOptions() {\n if(!this.isPlayingMultipleChoice() && !this.state.multipleChoice) {\n return null;\n }\n\n const { answered, answerSubmitted, currentSentenceIndex, correct, wordBank } = this.state;\n const currentSentenceMultipleChoiceOptions = this.getCurrentSentence().multipleChoiceOptions;\n const options = currentSentenceMultipleChoiceOptions.length ? currentSentenceMultipleChoiceOptions : wordBank\n\n return (\n \n this.startRecording()}\n >\n {this.state.recording ? 'Recording...' : 'Record'}\n \n
\n );\n }\n\n renderRoundResults() {\n const {\n collectionClozeSentences,\n collectionClozeSentencesUpsertUrl,\n collectionsUrl,\n elapsedTime,\n hasShownTokens,\n isCollectionEditable,\n isPro,\n languagePairingUrl,\n leveledUp,\n nextReviewByLevel,\n numCorrect,\n numIncorrect,\n numMastered,\n numNew,\n numReview,\n reportErrorUrl,\n startingNumMastered,\n startingNumPlaying,\n startingNumReadyForReview,\n score,\n tokensUrl,\n updating\n } = this.state;\n const {\n baseLanguageEnglishName,\n baseLanguageFlagIso,\n collectionId,\n isTeachingCollection,\n languagePairingWebUrl,\n scope,\n targetLanguageCode,\n targetLanguageEnglishName,\n targetLanguageFlagIso,\n targetLanguageIso,\n targetLanguageName,\n teachingCollectionResultsUrl\n } = this.props;\n const uniqueSentences = [];\n const uniqueSentenceIds = {};\n for(let i = 0, n = collectionClozeSentences.length; i < n; i++) {\n if(!uniqueSentenceIds[collectionClozeSentences[i].id]) {\n uniqueSentences.push(collectionClozeSentences[i]);\n uniqueSentenceIds[collectionClozeSentences[i].id] = true;\n }\n }\n return (\n {this.state.speakingTranscript}
\n Feeling confident?
\n\n \n
\nThis will set the sentence to 100% Mastered and set the next review date to the year 2100.
\n \n );\n }\n\n onMasterClick() {\n this.masterModal.hide();\n this.updateCurrentSentence('level', 4);\n }\n\n renderMasterModal() {\n const { nextReviewByLevel } = this.state;\n let nextReview = moment().add(nextReviewByLevel[4], 'days').format(\"YYYY-MM-DD\");\n if(nextReview > \"2100-01-01\") {\n nextReview = \"the year 2100\";\n }\n\n return (\n Already know this sentence?
\n\n \n
\nNext review due date will be {nextReview}.
\n \n );\n }\n\n onResetClick() {\n this.resetModal.hide();\n this.updateCurrentSentence('level', 0);\n }\n\n renderResetModal() {\n const { nextReviewByLevel } = this.state;\n let nextReview = moment().add(nextReviewByLevel[0], 'days').format(\"YYYY-MM-DD\");\n\n return (\n Want to see this sentence again sooner?
\n\n \n
\nNext review due date will be {nextReview}.
\n \n );\n }\n\n onIgnoreAllClick() {\n this.ignoreModal.hide();\n this.ignoreAll(() => this.next());\n }\n\n onIgnoreClick() {\n this.ignoreModal.hide();\n this.updateCurrentSentence('ignored', true, () => this.next());\n }\n\n renderIgnoreModal() {\n const { pro } = this.state;\n\n return (\n \n Ignoring a sentence removes it from your queue. You'll no longer see it and it won't count towards your progress.\n \n
\n {!!this.props.collectionId && (\n\n Or you can ignore all sentences with the same missing word.\n \n
\n )}\n {/*\n\n If there's an error please report it by clicking the flag button bottom right.\n
\n */}\n {!pro && (\n \n Clozemaster Pro subscribers can unignore sentences as well as search all sentences!\n \n )}\n \n );\n }\n\n renderGameSettingsControl() {\n return (\n \n );\n }\n\n renderGameSettingsModal() {\n return (\n\n
\n );\n }\n\n getUpdatedCollectionClozeSentences(id, updates) {\n const newCollectionClozeSentences = JSON.parse(JSON.stringify(this.state.collectionClozeSentences));\n for(let i = 0, n = newCollectionClozeSentences.length; i < n; i++) {\n if(newCollectionClozeSentences[i].id === id) {\n newCollectionClozeSentences[i] = Object.assign(newCollectionClozeSentences[i], updates);\n }\n }\n return newCollectionClozeSentences;\n }\n\n onSentenceEditorUpdate(sentence) {\n this.sentenceEditorModal && this.sentenceEditorModal.hide();\n const currentSentence = this.getCurrentSentence();\n const newCollectionClozeSentences = this.getUpdatedCollectionClozeSentences(currentSentence.id, sentence);\n this.setState({ collectionClozeSentences: newCollectionClozeSentences, textInputChangedAfterAnswering: sentence.text !== currentSentence.text });\n }\n\n addCurrentSentenceToCollection() {\n const currentSentence = this.getCurrentSentence();\n this.setState({\n addSentenceToCollectionModalVisible: true\n });\n }\n\n renderAddSentenceToCollectionModal() {\n if(!this.state.addSentenceToCollectionModalVisible) {\n return null;\n }\n\n const { isPro, nextReviewByLevel, selectedSentenceClozeStr, selectedSentenceText } = this.state;\n const sentence = Object.assign({}, this.getCurrentSentence());\n delete sentence.id;\n let copyable = true;\n\n if(selectedSentenceClozeStr && selectedSentenceClozeStr.match(/.*\\{\\{.+\\}\\}.*/)) { // if present and contains cloze\n sentence.text = selectedSentenceClozeStr;\n copyable = false;\n }\n else if(selectedSentenceText) {\n sentence.text = sentence.text.replace(/{{|}}/g, '');\n sentence.text = sentence.text.replace(selectedSentenceText, '{{' + selectedSentenceText + '}}');\n copyable = false;\n }\n\n return (\n \n
\n );\n }\n\n renderCurrentSentenceSourceLink() {\n const currentSentence = this.getCurrentSentence();\n const { answered } = this.state;\n\n if(answered && currentSentence.tatoebaId) {\n return (\n No more sentences to play!
\n
Check back later as sentences become ready for review.
\n \n\n \n Sentence Source
\n );\n }\n }\n\n renderExplanationRequest() {\n const currentSentence = this.getCurrentSentence();\n const { collectionId } = this.props;\n const { answered, languagePairingId } = this.state;\n\n if(!answered) {\n return null;\n }\n\n return (\n \n
\n );\n }\n\n onStageFadeInComplete() {\n this.textInput && setTimeout(() => this.textInput.focus(), 0);\n }\n\n render() {\n const { loading, intraRoundAd, intraRoundAdVisible } = this.state;\n\n if(loading) {\n return \n {this.renderHeader()}\n {this.renderListeningControl()}\n {this.renderSpeakingControl()}\n {this.renderCurrentSentence()}\n {this.renderGameControls()}\n
\n \n {this.renderHelpBtn()}\n {this.renderRoundHistoryBtn()}\n {this.renderSearchSentencesBtn()}\n {this.renderManageCollectionBtn()}\n {this.renderGameSettingsControl()}\n {this.renderReportErrorBtn()}\n {this.renderCurrentSentenceSourceLink()}\n
\n {this.props.explanationRequestsEnabled && this.renderExplanationRequest()}\n {this.renderModals()}\n\n {/*\n {this.renderReplay()}\n {this.renderReportControl()}\n */}\n\n {this.props.test && this.isPlayingTextInput() && {this.getCurrentSentenceCloze()}}\n {this.props.test && this.isPlayingFullTextInput() && {this.getCurrentSentencePlainText()}}\n \n {this.renderRoundStats()} \n
\n );\n }\n}\n","import React from \"react\";\n\nimport Modal from \"./Modal\";\n\nconst controlNoteStyles = {\n display: 'block',\n marginTop: 4,\n textAlign: 'center'\n};\n\nexport default class PlayOptionsModal extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n count: 10,\n mode: 'multiple_choice',\n skill: 'vocabulary',\n };\n }\n\n componentDidMount() {\n try {\n const { playOptions } = this.props;\n\n if(playOptions) {\n let count = playOptions.count || this.state.count;\n let skill = playOptions.skill || this.state.skill;\n let mode = playOptions.mode;\n\n if(mode !== \"text_input\" && mode !== \"multiple_choice\") {\n mode = this.state.mode;\n }\n\n if(!this.props.isPro) {\n count = 10;\n skill = 'vocabulary';\n }\n else if(skill === 'listening' && !this.props.isListeningSkillAvailable) {\n skill = 'vocabluary';\n }\n else if(skill === 'speaking' && !this.isSpeakingSkillAvailable()) {\n skill = 'vocabluary';\n }\n\n this.setState({\n count,\n mode,\n skill\n });\n }\n } catch(e) {\n // do nothing\n }\n }\n\n isSpeakingSkillAvailable() {\n const localSpeechRecognitionAvailable = window.clozemaster.speechRecognition.isSupported(this.props.targetLanguageIso)\n && window.clozemaster.speechRecognition.isAvailable();\n\n return this.props.isSpeakingSkillAvailable || localSpeechRecognitionAvailable;\n }\n\n componentDidUpdate(prevProps, prevState) {\n if(prevState.count !== this.state.count || prevState.mode !== this.state.mode || prevState.skill !== this.state.skill) {\n this.savePlayOptions();\n }\n }\n\n savePlayOptions() {\n try {\n window.localStorage.setItem('playOptions', JSON.stringify({\n count: this.state.count,\n mode: this.state.mode,\n skill: this.state.skill\n }));\n } catch(e) {\n // do nothing\n }\n }\n\n renderScope() {\n const { scope } = this.props;\n let content = '';\n if(scope === 'ready_for_review') {\n content = 'Ready for Review';\n }\n else if(scope === 'favorited') {\n content = 'Favorites';\n }\n else if(scope === 'frequency_collections') {\n content = 'Most Common Words';\n }\n else {\n return null;\n }\n return {content};\n }\n\n radioButton({ disabled = false, key, label, name, value }) {\n return (\n \n this.onStageFadeInComplete()}>{this.renderStage()} \n
\n {/*\n \n \n
\n );\n }\n\n getSkillOptions() {\n const { isListeningSkillAvailable, isSignedIn, targetLanguageIso } = this.props;\n\n const options = [\n this.radioButton({ disabled: !isSignedIn, key: \"vocabulary\", label: \"Vocabulary\", name: \"skill\", value: \"vocabulary\" })\n ];\n\n if(isListeningSkillAvailable) { // TODO! check if listening available\n options.push(\n this.radioButton({ disabled: !isSignedIn, key: \"listening\", label: \"Listening\", name: \"skill\", value: \"listening\" })\n );\n }\n\n // TODO! improve speaking support at some point - checking iso not correct\n if(this.isSpeakingSkillAvailable()) {\n options.push(\n this.radioButton({ disabled: !isSignedIn, key: \"speaking\", label: \"Speaking\", name: \"skill\", value: \"speaking\" })\n );\n }\n\n return options;\n }\n\n renderSkillProPromo() {\n const { skill } = this.state;\n const { isPro, listeningTrialExpired, speakingTrialExpired } = this.props;\n\n if(!isPro && skill === 'listening') {\n return (\n \n {listeningTrialExpired && You've already played your one free round for today. }\n {!listeningTrialExpired && 'Play one round of listening for free per day. '}\n Get Clozemaster Pro for unlimited listening practice!\n \n );\n }\n\n if(!isPro && skill === 'speaking') {\n return (\n \n {speakingTrialExpired && You've already played your one free round for today. }\n {!speakingTrialExpired && 'Play one round of speaking for free per day. '}\n Get Clozemaster Pro for unlimited speaking practice!\n \n );\n }\n }\n\n isSkillValid() {\n const { isPro, listeningTrialExpired, speakingTrialExpired } = this.props;\n const { skill } = this.state;\n\n if(skill === 'listening' && !isPro && listeningTrialExpired) {\n return false;\n }\n if(skill === 'speaking' && !isPro && speakingTrialExpired) {\n return false;\n }\n return true;\n }\n\n isSubmittable() {\n return this.isSkillValid();\n }\n\n renderSkill() {\n const { skill } = this.state;\n const options = this.getSkillOptions();\n\n if(options.length === 1) {\n return ;\n }\n\n return (\n \n Skill:\n
\n );\n }\n\n renderSentencesPerRound() {\n const { count } = this.state;\n const { isPro } = this.props;\n\n return (\n \n {options}\n
\n {this.renderSkillProPromo()}\n \n \n \n {!isPro && Get Clozemaster Pro to change the number of sentences per round!}\n
\n );\n }\n\n renderMode() {\n const { translateTranscribeAvailable } = this.props;\n const { mode, skill } = this.state;\n\n const content = (\n <>\n {this.radioButton({ label: \"Multiple Choice (Easy)\", name: \"mode\", value: \"multiple_choice\" })}\n {this.radioButton({ label: \"Text Input (Difficult)\", name: \"mode\", value: \"text_input\" })}\n {skill === \"listening\" && this.radioButton({ label: \"Transcribe (Hard)\", name: \"mode\", value: \"full_text_input\" })}\n \n );\n\n\n return (\n \n Mode:\n
\n );\n }\n\n render() {\n const { onHidden, collection, scope, skill } = this.props;\n const { mode } = this.state;\n\n return (\n \n {content}\n Score 2x the points with Text Input{skill === \"listening\" && \" and Transcribe\"}!\n
\n \n {collection.name}\n {this.renderScope()}\n
\n \n\n \n {props.percent}% Complete\n {props.children}\n
\n \n );\n}\n","import React from \"react\";\n\nimport { shuffleArray } from \"../helpers\";\n\nimport ClozeSentence from \"./ClozeSentence\";\nimport Icon from \"./Icon\";\nimport Loading from \"./Loading\";\n\nexport default class PublicRadio extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n playing: false,\n sentences: []\n };\n }\n\n componentDidMount() {\n this.isSystemTtsAvailable();\n this.loadSentences();\n }\n\n isSystemTtsAvailable() {\n const { baseLanguageIso, baseLanguageCode } = this.props;\n return window.clozemaster.systemTtsAvailable(baseLanguageIso, baseLanguageCode);\n }\n\n\n loadSentences() {\n $.ajax({\n data: {\n count: 100,\n radio: true\n },\n url: this.props.url\n })\n .done((data) => {\n console.log(data);\n this.setState({\n loading: false,\n sentences: data.collectionClozeSentences,\n });\n })\n .fail(() => {\n alert(\"Oh no! There was an error loading more sentences. Sorry about that. Please refresh the page and let us know if you see this message again.\");\n });\n }\n\n async playAudio() {\n clearTimeout(this.playAudioTimeout);\n\n if(!this.state.sentences.length) {\n return null;\n }\n if(!this.state.loading && this.state.sentences.length <= 5) {\n this.loadSentences();\n }\n\n const currentSentence = this.state.sentences[0];\n const pattern = ['text', 'pause', 'translation', 'pause', 'text', 'pause', 'text', 'pause', 'text', 'pause'];\n\n console.log(currentSentence);\n\n let canceled = false;\n this.playAudioTimeout = setTimeout(() => {\n canceled = true;\n this.next();\n }, 3 * 60 * 1000); // 3m per play\n\n try {\n for(let i = 0, n = pattern.length; i < n; i++) {\n console.log(pattern[i]);\n if(canceled) {\n break;\n }\n else if(pattern[i] === 'text') {\n await this.playRemoteAudio(currentSentence.ttsAudioUrl);\n }\n else if(pattern[i] === 'translation') {\n await this.playSystemTts(currentSentence.translation);\n }\n else {\n await this.sleep(2);\n }\n }\n }\n catch(e) {\n console.log('playAudio error', e);\n // alert(\"Oh no! There was an error playing the audio. Sorry about that. Please refresh the page and let us know if you see this message again.\");\n }\n\n if(!canceled) {\n this.next();\n }\n }\n\n next() {\n this.setState({ sentences: this.state.sentences.slice(1) }, () => this.playAudio());\n }\n\n playRemoteAudio(url) {\n return new Promise((resolve, reject) => {\n const audio = new Audio(url);\n audio.addEventListener('playing', () => {\n clearTimeout(this.playRemoteAudioTimeout);\n this.playRemoteAudioTimeout = setTimeout(reject, 10000); // 10s to end\n });\n audio.addEventListener('ended', () => {\n clearTimeout(this.playRemoteAudioTimeout); \n resolve();\n });\n audio.addEventListener('error', (e) => {\n clearTimeout(this.playRemoteAudioTimeout);\n reject(e);\n });\n this.playRemoteAudioTimeout = setTimeout(reject, 5000); // 5s to start\n audio.play().catch(reject);\n });\n }\n\n playSystemTts(s) {\n return new Promise((resolve, reject) => {\n const { baseLanguageIso, baseLanguageCode } = this.props;\n this.playSystemTtsTimeout = setTimeout(reject, 5000); // 5s to start\n const voices = window.clozemaster.getSystemTtsVoices(baseLanguageIso, baseLanguageCode);\n shuffleArray(voices);\n console.log(voices);\n const voice = voices.find((v) => v.name.match(/Google/)) || // prefer google voices\n voices[0];\n console.log(voice);\n const u = new SpeechSynthesisUtterance(s);\n u.voice = voice;\n u.lang = voice.lang;\n u.onstart = () => {\n clearTimeout(this.playSystemTtsTimeout);\n this.playSystemTtsTimeout = setTimeout(reject, 10000); // 10s to end\n };\n u.onend = () => {\n clearTimeout(this.playSystemTtsTimeout);\n resolve();\n };\n u.onerror = (e) => {\n clearTimeout(this.playSystemTtsTimeout);\n reject(e);\n };\n window.speechSynthesis.cancel();\n window.speechSynthesis.speak(u);\n });\n }\n\n getCurrentSentencePlainText() {\n return this.state.sentences[0].text.replace(/{{|}}/g, '');\n }\n\n sleep(n) {\n return new Promise((resolve, reject) => {\n setTimeout(resolve, n * 1000);\n });\n }\n\n renderContent() {\n if(this.state.loading && !this.state.sentences.length) {\n return Clozemaster Radio
\n \n
\n {currentSentence.translation}
\n \n
\n \n );\n }\n\n render() {\n return (\n \n 
\n 
\n
\n Get Clozemaster. Get fluent faster.
\n \n {this.renderContent()}\n
\n );\n }\n}\n","import React from \"react\";\n\nexport default class Radio extends React.Component {\n render() {\n const { checked, disabled, id, label, name, onChange, value } = this.props;\n\n return (\n \n \n
\n );\n }\n}\n","import React from \"react\";\n\nimport moment from 'moment';\n\nimport { secondsToHHMMSSStr } from \"../helpers\";\n\nimport Loading from \"./Loading\";\n\nexport default class Rankings extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n group: props.group || \"everyone\",\n metric: props.metric || \"num_points\",\n period: props.period || \"weekly\",\n loading: true,\n results: []\n };\n }\n\n componentDidMount() {\n this.submitRankingRequest();\n $(this.content).tooltip({ selector: '[data-toggle=\"tooltip\"]' });\n }\n\n componentWillUnmount() {\n clearTimeout(this.getRankingResultsTimeout);\n }\n\n submitRankingRequest() {\n const { group, metric, period } = this.state;\n\n this.setState({ loading: true });\n\n $.ajax({\n data: {\n ranking: {\n count: 50,\n count_around_user: 3,\n // from_date: this.getPeriodFromDate(),\n group,\n metric,\n // to_date: this.getPeriodToDate()\n period\n }\n },\n method: \"post\",\n url: this.props.rankingsUrl\n })\n .done((data) => {\n console.log(data);\n const { url } = data.ranking;\n this.getRankingResults(url);\n })\n .fail(() => {\n this.handleError();\n });\n }\n\n getRankingResults(url) {\n $.ajax({\n url\n })\n .done((data) => {\n console.log(data);\n const { results, status } = data.ranking;\n if(status === \"complete\") {\n this.setState({\n loading: false,\n results\n });\n }\n else if(status === \"error\") {\n this.handleError();\n }\n else if(status === \"working\" || status === \"pending\") {\n this.getRankingResultsTimeout = setTimeout(() => this.getRankingResults(url), 1000);\n }\n else {\n this.handleError();\n }\n })\n .fail(() => {\n this.handleError();\n });\n }\n\n handleError() {\n alert('Oh no! There was an error loading the leaderboards. Please try again, and please let us know if you see this message again.');\n this.setState({ loading: false, results: [] });\n }\n\n getPeriodFromDate() {\n const format = \"YYYY-MM-DD\";\n const { period } = this.state;\n\n if(period === \"weekly\") {\n return moment().startOf(\"isoWeek\").format(format);\n }\n if(period === \"monthly\") {\n return moment().startOf(\"month\").format(format);\n }\n if(period === \"yearly\") {\n return moment().startOf(\"year\").format(format);\n }\n return null;\n }\n\n getPeriodToDate() {\n const format = \"YYYY-MM-DD\";\n const { period } = this.state;\n\n if(period === \"weekly\") {\n return moment().endOf(\"isoWeek\").format(format);\n }\n if(period === \"monthly\") {\n return moment().endOf(\"month\").format(format);\n }\n if(period === \"yearly\") {\n return moment().endOf(\"year\").format(format);\n }\n return null;\n }\n\n renderRankingTable() {\n const { metric, results } = this.state;\n\n if(!results || !results.length) {\n return No one yet - be the first!
;\n }\n\n return (\n | {r.rank}. | \n\n {r.username}\n {r.level}\n {/*{r.pro && }*/}\n {('' + r.rank) === '1' && 🏆}\n | \n{metric === \"time_played\" ? secondsToHHMMSSStr(r.sum) : r.sum.toLocaleString()} | \n
\n {this.renderResultsHeader()}\n {this.renderRankingTable()}\n {this.renderMetricNotes()}\n
\n );\n }\n\n renderMetricNotes() {\n if(this.state.metric === \"time_played\") {\n return (\n *Max 15 seconds per sentence played.
\n );\n }\n }\n\n renderResultsHeader() {\n const { period } = this.state;\n\n let header = null\n let subheader = null;\n\n if(period === \"weekly\") {\n // header = \"Weekly\";\n subheader = <>Week of {moment().startOf('isoWeek').format('MMM D')}-{moment().endOf('isoWeek').format('MMM D')};\n }\n else if(period === \"monthly\") {\n // header = \"Monthly\";\n subheader = <>Month of {moment().startOf('month').format('MMM D')}-{moment().endOf('month').format('MMM D')};\n }\n else if(period === \"yearly\") {\n // header = \"Yearly\";\n subheader = <>Year of {moment().startOf('year').format('MMM D')}-{moment().endOf('year').format('MMM D YYYY')};\n }\n else {\n header = \"All-Time\"\n }\n\n // {header}\n // {subheader && <>{subheader}}\n\n return (\n
\n {header || subheader}\n
\n );\n }\n\n renderSocial() {\n const { group } = this.state;\n\n if(group === 'everyone') {\n return null;\n }\n\n // TODO!\n return null;\n\n return (\nLanguage learning doesn't have to be competitive - but it's more fun when it is. Challenge a friend! Or search for them on Clozemaster via their username.
\n );\n }\n\n onFormSubmit(e) {\n e.preventDefault();\n this.submitRankingRequest();\n }\n\n renderForm() {\n const { group, loading, metric, period } = this.state; \n\n return (\n \n );\n }\n\n renderContent() {\n return (\n <>\n {this.renderForm()}\n {this.renderResults()}\n {this.renderSocial()}\n \n );\n }\n\n render() {\n return (\n this.content = el}>{this.renderContent()}
\n );\n }\n}\n\n\n","import React from \"react\";\n\nimport { splitTextOnCloze } from \"../../helpers\";\n\nimport Checkbox from \"../Checkbox\";\nimport ClozeSentenceEntry from \"../mods/ClozeSentenceEntry\";\nimport CollectionClozeSentenceChangesModal from \"../mods/CollectionClozeSentenceChangesModal\";\nimport CollectionClozeSentenceEditor from \"../mods/CollectionClozeSentenceEditor\";\nimport CollectionClozeSentenceTts from \"../mods/CollectionClozeSentenceTts\";\nimport Icon from \"../Icon\";\nimport Loading from \"../Loading\";\nimport Modal from \"../Modal\";\nimport ModalFooterCloseBtn from \"../ModalFooterCloseBtn\";\nimport Pagination from \"../Pagination\";\nimport ProgressBar from \"../ProgressBar\";\nimport TokensEditor from \"../mods/TokensEditor\";\n\nexport default class ReportedCollectionClozeSentences extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n collections: null,\n includeResolved: true,\n includeSeen: true,\n languagePairings: null,\n loading: true,\n notifyUsersOnResolve: true,\n orderBy: null,\n page: 1,\n perPage: 50,\n reportedSentence: null,\n reportedSentences: [],\n resolveModalVisible: false,\n selectedCollectionId: parseInt(props.selectedCollectionId) || \"\",\n selectedLanguagePairingId: parseInt(props.selectedLanguagePairingId) || \"\",\n total: 0\n };\n }\n\n componentDidMount() {\n this.loadErrors();\n }\n\n loadErrors() {\n this.setState({ loading: true });\n\n const data = {\n include_resolved: this.state.includeResolved,\n include_marked_as_seen: this.state.includeSeen,\n order_by: this.state.orderBy,\n page: this.state.page\n };\n\n if(this.props.languagePairingsSelector) {\n data.collection_id = this.state.selectedCollectionId;\n data.language_pairing_id = this.state.selectedLanguagePairingId;\n data.include_language_pairings = true;\n }\n\n $.ajax({\n data,\n url: this.props.url\n })\n .done((data) => {\n console.log(data);\n const state = {\n loading: false,\n reportedSentences: data.reportedCollectionClozeSentences,\n total: data.total\n };\n\n if(this.props.languagePairingsSelector) {\n state.collections = data.collections;\n state.languagePairings = data.languagePairings;\n state.allLanguagePairingsResolvedCount = data.languagePairings.reduce((s, lp) => s + lp.resolved, 0)\n state.allLanguagePairingsTotalCount = data.languagePairings.reduce((s, lp) => s + lp.total, 0);\n }\n\n this.setState(state);\n })\n .fail(() => {\n alert(\n \"Oh no! There was an error loading errors. Sorry about that. \" +\n \"Please try again and let us know if you see this message again.\"\n );\n });\n }\n\n onEditSentenceClick(e) {\n this.setState({ editingReportedSentence: e });\n }\n\n // onViewSentenceClick(e) {\n // this.setState({ updating: true });\n // $.ajax({\n // url: e.collectionClozeSentenceUrl\n // })\n // .done((data) => {\n // this.setState({\n // collectionClozeSentence: data.collectionClozeSentence,\n // updating: false\n // });\n // })\n // .fail(() => {\n // this.setState({ updating: false });\n // alert(\"Oh no! There was an error loading the sentence. Sorry about that. Please try again and let us know if you see this message again.\");\n // });\n // }\n\n onClaimClick(reportedSentence) {\n this.updateClaim({ url: reportedSentence.claimUrl });\n }\n\n onRemoveClaimClick(reportedSentence) {\n this.updateClaim({ url: reportedSentence.removeClaimUrl });\n }\n\n updateClaim({ url }) {\n this.setState({ updating: true });\n $.ajax({\n method: \"post\",\n url\n })\n .done((data) => {\n console.log(data);\n const { reportedCollectionClozeSentence } = data;\n this.setState({\n reportedSentences: this.state.reportedSentences.map((e) => (\n e.id === reportedCollectionClozeSentence.id ? Object.assign({}, e, reportedCollectionClozeSentence) : e\n )),\n updating: false\n });\n })\n .fail(() => {\n this.setState({ updating: false });\n alert(\"Oh no! There was an error claiming the sentence! Sorry about that. Please try again let us know if you see this message again.\");\n });\n }\n\n onMarkAsSeenClick(e) {\n this.setState({ updating: true });\n $.ajax({\n method: \"post\",\n url: e.markAsSeenUrl\n })\n .done((data) => {\n console.log(data);\n const { reportedCollectionClozeSentence } = data;\n this.setState({\n reportedSentences: this.state.reportedSentences.map((e) => (\n e.id === reportedCollectionClozeSentence.id ? Object.assign({}, e, reportedCollectionClozeSentence) : e\n )),\n updating: false\n });\n })\n .fail(() => {\n this.setState({ updating: false });\n alert(\"Oh no! There was an error marking the sentence as seen! Sorry about that. Please try again let us know if you see this message again.\");\n });\n }\n\n onResolveClick(reportedSentence) {\n this.setState({ reportedSentence, resolveModalVisible: true });\n }\n\n resolve({ reportedSentence, notifyUsers = false }) {\n this.setState({ updating: true });\n $.ajax({\n contentType: \"application/json\",\n data: JSON.stringify({ notify_users: notifyUsers }),\n method: \"put\",\n url: reportedSentence.resolveUrl\n })\n .done((data) => {\n console.log(data);\n const { reportedCollectionClozeSentence } = data;\n\n const state = {\n reportedSentences: this.state.reportedSentences.map((e) => (\n e.id === reportedCollectionClozeSentence.id ? Object.assign({}, e, reportedCollectionClozeSentence) : e\n )),\n updating: false\n };\n\n if(this.props.languagePairingsSelector) {\n state.languagePairings = this.state.languagePairings.map((lp) => (\n reportedSentence.languagePairingId === lp.id ? Object.assign({}, lp, { resolved: lp.resolved + 1 }) : lp\n ));\n }\n\n state.allLanguagePairingsResolvedCount = this.state.allLanguagePairingsResolvedCount + 1;\n\n this.setState(state);\n })\n .fail(() => {\n this.setState({ updating: false });\n alert(\"Oh no! There was an error resolving the sentence! Sorry about that. Please try again let us know if you see this message again.\");\n });\n }\n\n renderResolveModal() {\n const { notifyUsersOnResolve, reportedSentence, resolveModalVisible } = this.state;\n if(!resolveModalVisible) {\n return null;\n }\n\n return (\n \n Are you sure? The sentence will no longer be editable and the users who reported the sentence will be notified. This action cannot be undone.\n
\n\n // \n // {\n // attr.split(/([A-Z])/).map((x, i, a) => (\n // i === 0 ? x.charAt(0).toUpperCase() + x.slice(1) : (i % 2 === 1 ? \" \" : (a[i - 1].toLowerCase() + x))\n // )).join(\"\")\n // }:\n // \n //
\n // {attr === \"text\" ? {preClozeStr}{cloze}{postClozeStr} : collectionClozeSentence[attr]}\n //
\n 👀 Marked as seen by {e.markedAsSeenByUserUsername}\n
\n );\n }\n\n return (\n \n \n
\n );\n }\n\n renderClaim(e) {\n if(e.claimedByCurrentUser) {\n return (\n \n
\n );\n }\n\n if(!e.claimedByUserUsername) {\n return (\n \n );\n }\n\n const { admin } = this.props;\n\n return (\n 👉 Me!
\n {!e.resolved && (\n \n )}\n \n {e.claimedByUserUsername}\n {!!admin && (\n
\n );\n }\n\n renderEdit(e) {\n return (\n \n );\n }\n\n // renderView(e) {\n // return (\n // \n // );\n // }\n\n renderResolve(e) {\n if(e.resolved) {\n return (\n \n \n
\n )}\n Resolved! 🎉
\n );\n }\n\n return (\n \n );\n }\n\n renderLanguagePairing() {\n const { baseLanguageName, targetLanguageName } = this.props;\n\n if(!baseLanguageName || !targetLanguageName) {\n return null;\n }\n\n return (\n Learning {targetLanguageName} from {baseLanguageName}\n );\n }\n\n renderLanguagePairingSelector() {\n if(this.props.languagePairingsSelector) {\n const { allLanguagePairingsResolvedCount, allLanguagePairingsTotalCount } = this.state;\n return (\n \n
\n );\n }\n }\n\n renderCollectionSelector() {\n if(!this.state.selectedLanguagePairingId || !this.state.collections) {\n return null;\n }\n\n return (\n - \n
- \n
- {this.renderCollectionSelector()} \n
\n Order by:\n
\n );\n }\n\n renderProgressBar() {\n const { languagePairings, selectedLanguagePairingId } = this.state;\n let sum, total;\n\n if(selectedLanguagePairingId) {\n const languagePairing = languagePairings.find((lp) => lp.id === selectedLanguagePairingId);\n if(languagePairing) {\n sum = languagePairing.resolved;\n total = languagePairing.total;\n }\n }\n else {\n sum = this.state.allLanguagePairingsResolvedCount;\n total = this.state.allLanguagePairingsTotalCount;\n }\n\n if(!total) {\n return null;\n }\n\n const percent = Math.round(sum / total * 1000) / 10;\n\n return (\n - \n
- \n \n \n
- \n \n \n
- \n \n \n
- \n \n \n
- \n \n \n
\n {this.renderProgressBar()}\n \n \n
\n {this.renderPagination()}\n {/*{this.renderViewCollectionClozeSentenceModal()}*/}\n {this.renderCollectionClozeSentenceChangesModal()}\n {this.renderCollectionClozeSentenceEditorModal()}\n {this.renderCollectionClozeSentenceTtsModal()}\n {this.renderCollectionClozeSentenceTokensEditor()}\n {this.renderResolveModal()}\n
\n );\n }\n\n render() {\n return (\n \n
\n {this.renderControls()}
\n {this.renderLanguagePairingSelector()}
\n | Source | \nSentence | \nUser | \nCategory | \nFeedback | \n {/*View | */}\nAssigned | \nEdit | \nTTS | \n {/*Tatoeba | */}\nTokens | \nResolve | \n\n {!!e.languagePairingSlug && {e.languagePairingSlug} }\n {e.collectionName} \n Last report: {e.lastCreatedAt}\n | \n \n {e.text ?\n | \n \n {\n e.usernames\n .map((u) => (\n \n {u}\n \n ))\n .reduce((prev, curr) => [prev, \", \", curr])\n }\n | \n{e.categories.join(\" / \")} | \n\n {e.feedbacks.join(\" / \")}\n {!!e.text && (\n <>\n \n Forum Comments ({e.commentsCount}) | \n {/*{this.renderView(e)} | */}\n\n {this.renderClaim(e)}\n {this.renderSeen(e)}\n | \n{this.renderEdit(e)} | \n{this.renderTts(e)} | \n {/*\n {e.tatoebaId ?\n Tatoeba\n : \"N/A\"\n }\n | */}\n{this.renderTokensBtn(e)} | \n\n {this.renderResolve(e)}\n \n | \n \n ))}\n
|---|
\n
\n );\n }\n}\n","import React from \"react\";\n\nimport Icon from \"./Icon\";\nimport Loading from \"./Loading\";\nimport Modal from \"./Modal\";\n\nexport function ResourceLinksEditor({ isPro, onCancel, onUpdate, resourceLinksUrl }) {\n const [resourceLinks, setResourceLinks] = React.useState(null);\n const [sample, setSample] = React.useState(\"cats\");\n const [saving, setSaving] = React.useState(false);\n\n React.useEffect(() => {\n $.ajax({\n url: resourceLinksUrl\n })\n .done(({ resourceLinks }) => {\n setResourceLinks(resourceLinks);\n })\n .fail(() => {\n alert(\"Error!\");\n });\n }, []);\n\n const save = () => {\n setSaving(true);\n $.ajax({\n contentType: \"application/json\",\n data: JSON.stringify({ resource_links: resourceLinks }),\n method: \"put\",\n url: resourceLinksUrl\n })\n .done(({ resourceLinks }) => {\n onUpdate(resourceLinks);\n })\n .fail(() => {\n alert(\"Error!\");\n setSaving(false);\n });\n };\n\n if(!resourceLinks) {\n return Reported Sentences {this.renderLanguagePairing()}
\nHow it works: claim a sentence you'd like to fix, make the corrections, then click resolve. 🎉
\n {this.renderContent()}\n Report counts by week\n\n
\n {resourceLinks.map((link, i) => (\n
\n \n \n \n
\n );\n}\n\nexport default function ResourceLinks({ onEditClick, query, resourceLinks, targetLanguageCode }) {\n const replaceWith = encodeURI(targetLanguageCode === \"deu\" ? query : query.toLowerCase());\n return (\n Add links to your favorite resources for any word or text selected after answering. Each URL needs the word QUERY. QUERY will be replaced with the search term.
For example, if you add Google with the URL https://www.google.com/search?q=QUERY and click the word \"cats\" after answering, you'll see a link to \"Google\" that will take you to https://www.google.com/search?q=cats.
\n Get Clozemaster Pro to customize resource links and add your own!\n
\n Get Pro\n
\n Enter a sample query, then click \"Try it\" beneath each URL below.\n setSample(e.target.value)} placeholder=\"Sample query\" value={sample} />\n
\n\n {resourceLinks.map((link, i) => (\n
\n setResourceLinks(resourceLinks.map((l, j) => i === j ? { ...l, name: e.target.value } : l))} placeholder=\"Name\" style={{ marginBottom: 10 }} value={link.name} />\n setResourceLinks(resourceLinks.map((l, j) => i === j ? { ...l, url: e.target.value } : l))} placeholder=\"URL\" style={{ marginBottom: 10 }} value={link.url} />\n {!link.url.match(/QUERY/) && URL missing QUERY. QUERY is replaced with the search query. For example https://www.google.com/search?q=QUERY.}\n
\n ))}\n \n Try it
\n \n \n \n \n
- \n {resourceLinks.sort((a, b) => a.name > b.name ? 1 : -1).map((link, i) => (\n
- \n {link.name}
\n \n ))}\n \n
\n {links.sort((a, b) => a.name > b.name ? 1 : -1).map((link, i) => (\n
\n );\n }\n\n getWiktionaryUrl() {\n const { baseLanguageIso, selection, targetLanguageEnglishName } = this.props;\n const query = encodeURI(targetLanguageEnglishName === \"German\" ? selection : selection.toLowerCase());\n return 'https://' + baseLanguageIso + '.wiktionary.org/wiki/' + query + '#' + targetLanguageEnglishName;\n }\n\n renderTranslations() {\n if(this.state.loadingTranslations) {\n return \n {link.name} \n
\n ))}\n Loading...
;\n }\n\n if(this.state.translations === false) {\n return (\n\n Get automatic Google translations for any word or selected text with Clozemaster Pro.\n
\n Take control of your learning. Get fluent faster. Get Pro today!\n
\n \n
\n );\n }\n\n renderControlBtn(text, icon, onClick) {\n return (\n \n );\n }\n\n renderControls() {\n const {\n isSearchCollectionAvailable,\n onAddToCollectionClick,\n onSearchCollectionClick,\n onSearchSentencesClick\n } = this.props;\n\n return (\n \n ![\"Color](\"/assets/google-translate-attribution/png/color-short-db1357358c54ba873f60dae0b7fab45f96d57c1ed7e3205853bc64be7941e279.png\")
\n
\n {!!onAddToCollectionClick && this.renderControlBtn('Add to Collection', 'plus', () => onAddToCollectionClick())}\n {!!isSearchCollectionAvailable && this.renderControlBtn('Collection Sentences', 'search', () => onSearchCollectionClick())}\n {this.renderControlBtn((!!isSearchCollectionAvailable ? 'All ' : '') + 'Sentences', 'search', () => onSearchSentencesClick())}\n
\n );\n }\n\n // renderWiktionaryEntry() {\n // const { wiktionaryEntry } = this.state;\n\n // if(!wiktionaryEntry) {\n // return null;\n // }\n\n // return (\n // \n //
\n // );\n // }\n\n renderAudioControl() {\n const { tokenText, ttsAvailable } = this.state;\n\n let handler = null;\n\n if(tokenText && tokenText.ttsUrl) {\n handler = () => {\n const audio = new Audio(tokenText.ttsUrl);\n audio.play();\n };\n }\n else if(ttsAvailable) {\n handler = () => this.playTts();\n }\n else {\n return null;\n }\n\n return (\n \n );\n }\n\n renderToken() {\n const { token } = this.state;\n\n return (\n \n // {wiktionaryEntry.map((e) => (\n //
\n // \n // {e.definitions.map((d) => (\n //
\n // ))}\n // \n // {d.text[0]} {d.partOfSpeech}\n //
- \n // {d.text.slice(1).map((t) =>
- {t} )}\n //
\n // \n // From Wiktionary \n // \n //
\n // \n \n
\n );\n }\n}\n\nexport default class SelectionPopover extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n slideout: localStorage.getItem(\"selectionPopoverSlideout\") !== \"false\"\n };\n }\n\n renderSelectionContent() {\n return (\n {this.props.selection}{this.renderAudioControl()}
\n {this.renderLinks()}\n {this.renderTranslations()}\n {this.renderToken()}\n {this.renderTokenText()}\n {this.renderControls()}\n {this.props.switchToSlideout && (\n \n \n
\n )}\n \n \n
\n )}\n {this.renderSelectionContent()}
\n - \n {links.sort((a, b) => a.name > b.name ? 1 : -1).map((link, i) => (\n
- \n {link.name} \n \n ))}\n
Loading...
;\n }\n\n if(this.state.translations === false) {\n return (\n\n Get automatic Google translations for any word or selected text with Clozemaster Pro.\n
\n );\n }\n\n return (\n\n \n \n \n \n
\n {!!onAddToCollectionClick && this.renderControlBtn('Add to Collection', 'plus', () => onAddToCollectionClick())}\n {!!isSearchCollectionAvailable && this.renderControlBtn('Collection Sentences', 'search', () => onSearchCollectionClick())}\n {this.renderControlBtn((!!isSearchCollectionAvailable ? 'All ' : '') + 'Sentences', 'search', () => onSearchSentencesClick())}\n
\n );\n }\n\n // renderWiktionaryEntry() {\n // const { wiktionaryEntry } = this.state;\n\n // if(!wiktionaryEntry) {\n // return null;\n // }\n\n // return (\n // \n //
\n // );\n // }\n\n renderAudioControl() {\n const { tokenText, ttsAvailable } = this.state;\n\n let handler = null;\n\n if(tokenText && tokenText.ttsUrl) {\n handler = () => {\n const audio = new Audio(tokenText.ttsUrl);\n audio.play();\n };\n }\n else if(ttsAvailable) {\n handler = () => this.playTts();\n }\n else {\n return null;\n }\n\n return (\n \n );\n }\n\n renderToken() {\n const { token } = this.state;\n\n return (\n \n // {wiktionaryEntry.map((e) => (\n //
\n // \n // {e.definitions.map((d) => (\n //
\n // ))}\n // \n // {d.text[0]} {d.partOfSpeech}\n //
- \n // {d.text.slice(1).map((t) =>
- {t} )}\n //
\n // \n // From Wiktionary \n // \n //
\n // \n
\n {this.renderLinks()}\n {this.renderTranslations()}\n {this.renderToken()}\n {this.renderTokenText()}\n {this.props.selection}{this.renderAudioControl()}
\n \n \n \n
\n {wiktionaryIframeVisible && }\n {this.renderControls()}\n {this.props.switchToPopover && (\n \n \n
\n )}\n \n {str}\n {morphologicalFeatures.length ? \" / \" : \"\"}\n {morphologicalFeatures.map((m, index) => (\n \n {m.value.toLowerCase()}\n {index === morphologicalFeatures.length - 1 ? \"\" : \" / \"}\n \n ))}\n
\n );\n}\n","import React from \"react\";\n\nimport Icon from \"./Icon\";\n\nexport default function SelectionTokenText({ tokenText }) {\n if(!tokenText) {\n return null;\n }\n\n const [exampleSentencesVisible, setExampleSentencesVisible] = React.useState(false);\n\n const { chatgptExplanation, dictionaryLookup, exampleSentences } = tokenText;\n\n return (\n\n {!!dictionaryLookup &&
\n );\n}\n","import React from \"react\";\n\nexport default class SlideDown extends React.Component {\n componentDidMount() {\n $(this.el).slideDown();\n }\n\n render() {\n return (\n {dictionaryLookup} (From Microsoft)
}\n {!!chatgptExplanation &&{chatgptExplanation} (From ChatGPT)
}\n {!!exampleSentences && !!exampleSentences.length && (\n\n
\n )}\n \n \n
\n {exampleSentencesVisible && (\n- \n {exampleSentences.map((e, index) => (\n
- {e[0]}
{e[1]} \n ))}\n
this.el = el} style={{ display: 'none' }}>\n {this.props.children}\n
\n );\n }\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport FocusTrap from \"focus-trap-react\";\n\nexport default class Slideout extends React.Component {\n componentDidMount() {\n this.$slideout = $(this.slideout);\n this.$backdrop = $(this.backdrop);\n\n const width = this.$slideout.width();\n this.$slideout.css({ right: -width, width });\n\n this.show();\n }\n\n show() {\n const { onShown } = this.props;\n\n this.$slideout.animate({\n right: 0,\n opacity: 1\n }, () => onShown && onShown());\n\n this.$backdrop\n .css({ opacity: 0 })\n .show()\n .animate({ opacity: 0.5 });\n }\n\n hide() {\n const { onHidden } = this.props;\n const width = this.$slideout.width();\n this.$backdrop.animate({ opacity: 0 }, () => this.$backdrop.hide());\n this.$slideout.animate({\n opacity: 0,\n right: -width\n }, () => onHidden && onHidden());\n }\n\n onBackdropClick(e) {\n e.preventDefault();\n e.stopPropagation();\n this.hide();\n }\n\n renderBackdrop() {\n return (\n this.backdrop = el} onClick={(e) => this.onBackdropClick(e)} style={{ position: 'fixed', top: 0, right: 0, bottom: 0, left: 0, zIndex: 1055, backgroundColor: '#000', opacity: 0 }}>
\n );\n }\n\n renderContent() {\n return (\n \n {this.props.header !== false && (\n
\n );\n }\n\n render() {\n return ReactDOM.createPortal(\n (\n <>\n {this.renderBackdrop()}\n \n {this.props.heading}\n \n
\n )}\n \n {this.props.children}\n
\n {this.props.footer}\n this.slideout = el}>\n {this.renderContent()}\n
\n \n ),\n document.querySelector('body')\n );\n }\n}\n","import React from \"react\";\n\nimport Icon from \"./Icon\";\n\nexport default class SpeechSynthesisBtn extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n voices: null\n };\n }\n\n componentDidMount() {\n if(!window.speechSynthesis) {\n return null;\n }\n\n this.voicesChangedListener = window.speechSynthesis.addEventListener(\"voiceschanged\", () => {\n this.updateVoices();\n });\n\n this.updateVoices();\n }\n\n // TODO! clean up listener on unmount\n\n updateVoices() {\n const { languageCode, languageIso } = this.props;\n\n this.setState({\n voices: window.clozemaster.getSystemTtsVoices(languageIso, languageCode)\n });\n }\n\n play() {\n const { languageCode, languageIso, text } = this.props;\n const { voices } = this.state;\n\n window.clozemaster.playSystemUtterance(text, voices[0]);\n }\n\n render() {\n const { voices } = this.state;\n\n if(!voices || !voices.length) {\n return null;\n }\n\n const { className, style, text } = this.props;\n\n return (\n \n );\n }\n}\n","import React from \"react\";\n\nimport Cookie from \"universal-cookie\";\nimport { ResultReason } from \"microsoft-cognitiveservices-speech-sdk\";\n\nconst speechsdk = require(\"microsoft-cognitiveservices-speech-sdk\");\n\nexport default class SpeechToText extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n displayText: \"Ready...\",\n recording: false\n };\n }\n\n componentDidMount() {\n this.getTokenOrRefresh();\n }\n\n getTokenOrRefresh() {\n const { speechTokenUrl } = this.props;\n\n return new Promise((resolve, reject) => {\n const cookie = new Cookie();\n const speechToken = cookie.get(\"speech-token-2\");\n\n if(speechToken) {\n const idx = speechToken.indexOf(\":\");\n return resolve({\n authToken: speechToken.slice(idx + 1),\n region: speechToken.slice(0, idx)\n });\n }\n\n $.ajax({\n url: speechTokenUrl\n })\n .done((data) => {\n const { region, token } = data;\n\n cookie.set(\"speech-token\", region + \":\" + token, { maxAge: 540, path: \"/\" });\n\n resolve({\n authToken: token,\n region\n });\n })\n .fail(() => {\n resolve({ authToken: null, error: err.response.data });\n });\n });\n }\n\n async speechToText() {\n const { languageLocale, onRecordingComplete } = this.props;\n\n const tokenObj = await this.getTokenOrRefresh();\n const speechConfig = speechsdk.SpeechConfig.fromAuthorizationToken(tokenObj.authToken, tokenObj.region);\n speechConfig.speechRecognitionLanguage = languageLocale; // 'en-US';\n\n const audioConfig = speechsdk.AudioConfig.fromDefaultMicrophoneInput();\n const recognizer = new speechsdk.SpeechRecognizer(speechConfig, audioConfig);\n\n this.setState({\n displayText: \"Recording...\",\n recording: true\n });\n\n recognizer.recognizeOnceAsync(\n (result) => {\n console.log(\"RESULT\", result);\n let displayText;\n if (result.reason === ResultReason.RecognizedSpeech) {\n displayText = result.text;\n // onRecordingComplete({ text: result.text });\n } else {\n displayText = \"Oh no! Recording was cancelled or could not be recognized. Please ensure your microphone is working properly and try again.\";\n }\n\n this.setState({\n displayText,\n recording: false\n });\n },\n (error) => {\n console.log(\"ERROR\", error);\n this.setState({\n displayText: \"Error\",\n recording: false\n });\n }\n );\n }\n\n render() {\n const { displayText, recording } = this.state;\n\n return (\n \n
\n );\n }\n}\n","import React from \"react\";\n\nconst Strike = ({ children, className, ...props }) => {\n return (\n \n {displayText}\n
\n \n\n {children}\n
\n );\n};\n\nexport default Strike;\n","import React from \"react\";\n\nimport { splitTextOnCloze } from \"../helpers\";\n\nimport CollectionEditorModal from \"./Dashboard/CollectionEditorModal\";\nimport Icon from \"./Icon\";\nimport Loading from \"./Loading\";\nimport MyTeachingCollection from \"./TeachingDashboard/MyTeachingCollection\";\nimport Pagination from \"./Pagination\";\nimport SharedCollectionsModal from \"./Dashboard/SharedCollectionsModal\";\n\nexport default class TeachingDashboard extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n cloning: false,\n collections: [],\n collectionEditorCollection: null,\n collectionEditorModalVisible: false,\n loading: true,\n page: 1,\n sharedCollectionsModalVisible: false\n };\n }\n\n componentDidMount() {\n this.loadCollections();\n }\n\n loadCollections() {\n this.setState({ loading: true });\n\n $.ajax({\n data: { filter: 'mine' },\n url: this.props.collectionsUrl\n })\n .done((data) => {\n this.setState({\n collections: data.collections,\n loading: false,\n page: 1\n });\n })\n .fail(() => {\n alert(\"Oh no! There was an error loading the collections. Sorry about that. Please try again and let us know if you see this message again.\");\n });\n }\n\n renderCollections() {\n // Collection 1\n // Link / Embed / Results / Add / Manage / Delete\n // Play options with link/embed\n\n const { clozeSentencesUrl, isAdmin } = this.props;\n const { collections, loading, page } = this.state;\n const perPage = 20; // using just js for now\n \n if(loading) {\n return No collections yet - check out shared collections or create your own!
\n );\n }\n\n return (\n\n {collections.slice((page - 1) * perPage, page * perPage).map((c) => (\n this.setState({ collectionEditorCollection: collection, collectionEditorModalVisible: true })}\n />\n ))}\n this.setState({ page: page + 1 })}\n onPrevClick={() => this.setState({ page: page - 1 })}\n page={page}\n perPage={perPage}\n total={collections.length}\n />\n
\n );\n }\n\n renderContent() {\n const { baseLanguageName, targetLanguageName } = this.props;\n\n return (\n \n
\n );\n }\n\n renderCollectionEditorModal() {\n if(!this.state.collectionEditorModalVisible) {\n return null;\n }\n\n return (\n Teaching {targetLanguageName} from {baseLanguageName}
\nClozemaster Teaching Collections are collections of cloze-sentences that you can share with your students. They are meant to be played anonymously, meaning students can play through the sentences without having to create an account, and at they end of the round they can enter their name so you can see the results. Teaching Collections are capped at 50 sentences, and are meant to be played through in a single round. You can share a link to your teaching collection, or embed a teaching collection on your site or blog. Questions? Feedback? Let us know on the forum.
\n\n \n \n
\n {this.renderCollections()}\n\n
\n )}\n url={this.props.collectionsUrl}\n />\n );\n }\n\n render() {\n return (\n \n
\n {collection.name}
\n{collection.sentencesCount} sentences / Created by {collection.user.username}
\n {collection.description}
\n \n \n {!this.props.isPro && Pro!}\n
\n \n
\n \n
\n - \n {collection.sentences.map((s) => {\n const parts = splitTextOnCloze(s.text);\n return (\n
- \n {parts.preClozeStr}{parts.cloze}{parts.postClozeStr}\n
\n {s.translation}\n \n );\n })}\n
\n
\n );\n }\n}\n","import React from \"react\";\n\nimport { splitTextOnCloze } from \"../../helpers\";\n\nimport Loading from \"../Loading\";\nimport Pagination from \"../Pagination\";\n\nexport default class ClozeSentenceSearch extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n bulkAddVisible: false,\n clozeSentences: null,\n context: 'text',\n loading: true,\n page: 1,\n perPage: 20,\n query: props.query || '',\n total: 0,\n };\n }\n\n componentDidMount() {\n this.search();\n }\n\n search() {\n this.setState({ loading: true });\n const {\n context,\n page,\n perPage,\n query\n } = this.state;\n $.ajax({\n data: {\n context,\n page,\n per_page: perPage,\n query,\n },\n method: 'get',\n url: this.props.url\n })\n .done((data) => {\n console.log(data);\n this.setState({\n clozeSentences: data.clozeSentences,\n loading: false,\n total: data.total\n });\n })\n .fail(() => {\n this.setState({ loading: false });\n alert('Oh no! There was an error searching sentences. Please try again and let us know if you see this error message again.');\n });\n }\n\n onSubmit(e) {\n e.preventDefault();\n this.setState({ page: 1 }, () => this.search());\n }\n\n renderForm() {\n const { loading } = this.state;\n\n return (\n \n );\n }\n\n renderClozeSentences() {\n if(this.state.loading) {\n return \n
\n \n {this.renderContent()}\n {this.renderCollectionEditorModal()}\n {this.renderSharedCollectionsModal()}\n
\n \n {this.state.clozeSentences.map((cs) => {\n const parts = splitTextOnCloze(cs.text);\n return (\n
\n );\n }\n\n renderPagination() {\n if(this.state.loading) {\n return null;\n }\n\n const { page, perPage, total } = this.state;\n\n return (\n \n \n
\n );\n })}\n \n {this.renderForm()}\n {this.renderClozeSentences()}\n {this.renderPagination()}\n
\n );\n }\n}\n","import React from \"react\";\n\nexport default class Contributors extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n };\n }\n\n onChange(enabled) {\n this.setState({ loading: true });\n\n const { collection } = this.props;\n\n this.setState({ loading: true });\n\n $.ajax({\n contentType: 'application/json',\n data: JSON.stringify({\n collection: { contributors_enabled: enabled }\n }),\n method: 'patch',\n url: collection.url,\n })\n .fail(() => {\n alert(\"Error updating contributors status! Sorry about that. Please let someone know and refresh the page to try again.\");\n });\n\n this.props.onChange(enabled);\n }\n\n render() {\n const { collection, enabled } = this.props;\n\n return (\n \n
\n );\n }\n}\n","import React from \"react\";\n\nimport Loading from \"../Loading\";\n\nexport default class CrosswordViewer extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n sentences: props.sentences\n };\n }\n\n componentDidMount() {\n this.loadPreview();\n }\n\n loadPreview() {\n $.ajax({\n url: this.props.crosswordsUrl,\n method: \"post\",\n data: { sentences: JSON.stringify(this.state.sentences) }\n })\n .done((data) => {\n this.setState({ loading: false, crossword: data.crossword });\n })\n .fail(() => {\n alert(\"Something went wrong, please try again or contact an admin.\");\n });\n }\n\n emailPdf() {\n $.ajax({\n url: this.props.crosswordsUrl,\n method: \"post\",\n data: { email_pdf: true, sentences: JSON.stringify(this.state.sentences) }\n })\n .done((data) => {\n alert(\"PDF will be sent to your email shortly!\");\n })\n .fail(() => {\n alert(\"Something went wrong, please try again or contact an admin.\");\n });\n }\n\n renderCrossword() {\n return ;\n }\n\n renderDownloadButtons() {\n return (\n \n \n
\n \n \n
\n \n \n
\n )\n }\n\n render() {\n if (this.state.loading) {\n return \n {this.renderCrossword()}\n {this.renderDownloadButtons()}\n
\n );\n }\n}\n","import React from \"react\";\n\nimport 'url-search-params-polyfill';\n\nimport Checkbox from \"../Checkbox\";\nimport Radio from \"../Radio\";\n\nexport default class EmbedBuilder extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n mode: \"multiple_choice\",\n results: true,\n };\n }\n\n onTextInputClick() {\n this.textInput.select();\n try {\n if(document.execCommand('copy')) {\n clearTimeout(this.copyTimeout);\n this.setState({ copied: true }, () => (this.copyTimeout = setTimeout(() => this.setState({ copied: false }), 3000)));\n }\n } catch(e) {\n }\n }\n\n getUrl() {\n const searchParams = new URLSearchParams();\n searchParams.append(\"mode\", this.state.mode);\n searchParams.append(\"results\", this.state.results);\n return this.props.url + \"?\" + searchParams.toString();\n }\n\n getCode() {\n return \"\";\n }\n\n render() {\n return (\n \n this.onTextInputClick()}\n readOnly\n ref={(el) => this.textInput = el}\n value={this.getCode()}\n />\n {this.state.copied &&
\n );\n }\n}\n\n","import React from \"react\";\n\nimport 'url-search-params-polyfill';\n\nimport Checkbox from \"../Checkbox\";\nimport Radio from \"../Radio\";\n\nexport default class LinkBuilder extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n mode: \"multiple_choice\",\n results: true,\n };\n }\n\n onTextInputClick() {\n this.textInput.select();\n try {\n if(document.execCommand('copy')) {\n clearTimeout(this.copyTimeout);\n this.setState({ copied: true }, () => (this.copyTimeout = setTimeout(() => this.setState({ copied: false }), 3000)));\n }\n } catch(e) {\n }\n }\n\n getUrl() {\n const searchParams = new URLSearchParams();\n searchParams.append(\"mode\", this.state.mode);\n searchParams.append(\"results\", this.state.results);\n return this.props.url + \"?\" + searchParams.toString();\n }\n\n render() {\n return (\n You can embed the code below into your website or blog just like you would with a Youtube video. Your students will then be able to play through all the sentences in the collection on your website or blog in a single round without having to sign in.
\n\n Mode:\n
\n \n this.setState({ mode: e.target.value })}\n value=\"multiple_choice\"\n />\n this.setState({ mode: e.target.value })}\n value=\"text_input\"\n />\n
\n \n this.setState({ results: e.target.checked })}\n />\n
\n Copied!
}\n \n this.onTextInputClick()}\n readOnly\n ref={(el) => this.textInput = el}\n type=\"text\"\n value={this.getUrl()}\n />\n {this.state.copied &&
\n );\n }\n}\n","import React from \"react\";\n\nimport Contributors from \"./Contributors\";\nimport CrosswordViewer from \"./CrosswordViewer\";\nimport EmbedBuilder from \"./EmbedBuilder\";\nimport Icon from \"../Icon\";\nimport LinkBuilder from \"./LinkBuilder\";\nimport Modal from \"../Modal\";\nimport ModalFooterCloseBtn from \"../ModalFooterCloseBtn\";\nimport Panel from \"../Panel\";\nimport ResultsViewer from \"./ResultsViewer\";\nimport SentencesEditor from \"./SentencesEditor\";\n\nexport default class MyTeachingCollection extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n contributorsEnabled: !!props.collection.contributorsEnabled,\n contributorsModalVisible: false,\n embedModalVisible: false,\n linkModalVisible: false,\n resultsModalVisible: false,\n sentences: props.collection.sentences,\n sentencesModalVisible: false\n };\n }\n\n renderResultsModal() {\n if(!this.state.resultsModalVisible) {\n return null;\n }\n\n const { collection } = this.props;\n\n return (\n You can share the link below with your students. They'll be able to play through all the sentences in the collection in a single round without having to sign in.
\n\n Mode:\n
\n \n this.setState({ mode: e.target.value })}\n value=\"multiple_choice\"\n />\n this.setState({ mode: e.target.value })}\n value=\"text_input\"\n />\n
\n \n this.setState({ results: e.target.checked })}\n />\n
\n Copied!
}\n \n
\n - \n \n \n {!!isAdmin && }\n \n \n \n
- Preview \n \n
{collection.name}
\nSentences: {this.state.sentences.length} Results: {collection.resultsCount}
\n {this.renderSentencesModal()}\n {this.renderContributorsModal()}\n {this.renderResultsModal()}\n {this.renderLinkModal()}\n {this.renderEmbedModal()}\n {this.renderCrosswordModal()}\n | Name | \nDate | \nStats | \nIncorrect | \n
|---|---|---|---|
| {r.name} | \n{r.createdAt} | \n\n
| \n \n \n \n
| \n
\n \n \n
\n
\n );\n }\n\n render() {\n if(this.state.loading) {\n return Sentences answered incorrectly one or more times ordered by count:
\n| Count | \nText | \n
|---|---|
| {e[1]} | {e[0]} |
\n {this.renderResultsTable()}\n {this.renderIncorrectSentences()}\n
\n );\n }\n}\n","import React from \"react\";\n\nimport { v4 as uuidv4 } from 'uuid';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nimport ClozeSentenceSearch from \"./ClozeSentenceSearch\";\nimport Loading from \"../Loading\";\n\nexport default class SentencesEditor extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n mode: 'editor',\n saving: false,\n sentences: props.sentences\n };\n }\n\n saveSentences() {\n this.setState({ saving: true });\n\n $.ajax({\n contentType: 'application/json',\n data: JSON.stringify({\n collection: { sentences: this.state.sentences }\n }),\n method: 'patch',\n url: this.props.collectionUrl,\n })\n .done((data) => {\n if(data.errors) {\n alert(data.errors.join(\" \"));\n this.setState({ saving: false });\n return false;\n }\n\n if(this.props.onSave) {\n this.props.onSave(this.state.sentences);\n }\n })\n .fail(() => {\n alert(\"Oh no! There was an error saving the sentences - sorry about that. Please try again and let us know if you see this message again.\");\n this.setState({ saving: false });\n });\n }\n\n onTextMouseUp(e, r, index) {\n if(this.state.saving) {\n return false;\n }\n\n const selection = window.getSelection();\n const str = selection.toString();\n if(str && r.text.replace(/\\{\\{|\\}\\}/g, '').match(str)) {\n this.setState({\n sentences: this.state.sentences.map((r, i) => {\n if(i === index) {\n return { ...r, text: r.text.replace(/\\{\\{|\\}\\}/g, '').replace(str, '{{' + str + '}}') };\n }\n return r;\n })\n });\n }\n }\n\n getNewId() {\n return uuidv4();\n }\n\n renderSentences() {\n const { sentences } = this.state;\n\n return (\n \n \n \n
\n
\n );\n }\n\n renderSearch() {\n return (\n | Text | \nTranslation | \nMultiple choice options (comma-separated list, optional) | \n Notes (optional) | \n\n |
|---|---|---|---|---|
| \n | \n \n | \n \n | \n \n | \n \n | \n
\n
\n - \n
- \n \n \n
- \n \n \n
\n \n \n
\n \n \n this.setState({ sentences: [{ id: this.getNewId(), text: clozeSentence.text, translation: clozeSentence.translation, tts: clozeSentence.tts }].concat(this.state.sentences) })}\n remove={(clozeSentence) => this.setState({ sentences: this.state.sentences.filter((s) => s.text !== clozeSentence.text) })}\n sentencesMap={new Map(this.state.sentences.map((s) => [s.text, true]))}\n url={this.props.clozeSentencesUrl}\n />\n \n
\n );\n }\n\n render() {\n if(this.state.mode === 'search') {\n return this.renderSearch();\n }\n\n return this.renderSentences();\n }\n}\n\n","import React from \"react\";\nimport ReactDOM from 'react-dom';\n\nimport FadeOut from \"./FadeOut\";\n\nexport default class Toast extends React.Component {\n componentDidMount() {\n const { content, context } = this.props;\n\n clearTimeout(window.toastTimeout);\n $(\"#toast\").remove();\n\n $(\"body\").append(`\n \n ${content}\n
\n `);\n\n window.toastTimeout = setTimeout(() => $(\"#toast\").fadeOut(), 3000);\n }\n\n render() {\n return null;\n }\n}\n","import React from \"react\";\n\nimport TextareaAutosize from 'react-textarea-autosize';\n\nexport default class UserProfileAttr extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n editing: false,\n originalValue: props.value,\n saving: false,\n value: props.value\n };\n }\n\n save() {\n this.setState({ saving: true });\n\n $.ajax({\n data: { user: { [this.props.name]: this.state.value } },\n method: 'put',\n url: this.props.url\n })\n .done((data) => {\n if(data.errors) {\n alert('Oh no! ' + data.errors);\n this.setState({ saving: false });\n return false;\n }\n this.setState({ editing: false, originalValue: this.state.value, saving: false });\n })\n .fail(() => {\n alert('Oh no! There was an error updating. Sorry about that. Please try again and let us know if you see this message again.');\n this.setState({ saving: false });\n });\n }\n\n render() {\n if(this.state.editing) {\n const inputProps = {\n className: 'form-control',\n disabled: this.state.saving,\n name: this.props.name,\n onChange: (e) => this.setState({ value: e.target.value }),\n ref: (el) => { this.input = el },\n value: this.state.value\n };\n\n return (\n \n
\n );\n }\n\n return (\n \n \n {this.props.textarea ?\n
\n \n \n \n
\n\n {this.props.label}: {this.state.value || 'Unknown'}{this.props.isCurrentUser && }\n
\n );\n }\n}\n","import React from \"react\";\n\nexport default class Block extends React.Component {\n render() {\n const { children, item, legend, onDelete } = this.props;\n return (\n \n );\n }\n}\n","import React from \"react\";\n\nimport Block from \"./Block\";\nimport SentenceEditor from \"./SentenceEditor\";\n\nexport default class SentenceBlock extends React.Component {\n render() {\n const { index, onDelete, onChange, sentence } = this.props;\n const { text, translation, textError, translationError } = sentence;\n\n return (\n\n
\n );\n}\n","import React from \"react\";\n\nimport { v4 as uuidv4 } from \"uuid\";\n\nimport Modal from \"../Modal\";\nimport ModalFooterCloseBtn from \"../ModalFooterCloseBtn\";\nimport Pagination from \"../Pagination\";\nimport SentenceSearchResult from \"./SentenceSearchResult\";\n\nexport default class SentenceSearchModal extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n context: \"text\",\n loading: false,\n page: 1,\n perPage: 50,\n query: \"\",\n selectedMap: new Map(props.sentences.map((s) => [s.text, s.id])),\n sentences: [],\n total: 0,\n };\n }\n\n search() {\n this.setState({ loading: true });\n const {\n context,\n page,\n perPage,\n query\n } = this.state;\n $.ajax({\n data: {\n context,\n page,\n per_page: perPage,\n query,\n },\n method: \"get\",\n url: this.props.url\n })\n .done((data) => {\n console.log(data);\n this.setState({\n loading: false,\n sentences: data.sentences,\n total: data.total\n });\n })\n .fail(() => {\n this.setState({ loading: false });\n alert(\n \"Oh no! There was an error searching sentences. \" +\n \"Please try again and let us know if you see this error message again.\"\n );\n });\n }\n\n onSubmit(e) {\n e.preventDefault();\n this.setState({ page: 1 }, () => this.search());\n }\n\n renderForm() {\n const { context, loading, query } = this.state;\n\n return (\n \n );\n }\n\n renderPagination() {\n if(this.state.loading) {\n return null;\n }\n\n const { page, perPage, total } = this.state;\n\n return (\n \n
\n onTextChange(e.target.value)}\n placeholder=\"Cloze sentence\"\n type=\"text\"\n value={text}\n />\n {textError && {textError}}\n
\n \n onTranslationChange(e.target.value)}\n placeholder=\"Translation\"\n type=\"text\"\n value={translation}\n />\n {translationError && {translationError}}\n
\n \n
\n );\n }\n}\n","import React from \"react\";\n\nimport { ReactSortable } from \"react-sortablejs\";\nimport { v4 as uuidv4 } from \"uuid\";\n\nimport { shuffleArray } from \"../../helpers\";\n\nimport Block from \"./Block\";\nimport SentenceBlock from \"./SentenceBlock\";\nimport SentenceSearchModal from \"./SentenceSearchModal\";\n\nexport default class SentencesBlock extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n sentenceSearchModalVisible: false\n };\n }\n\n renderSentenceSearchModal() {\n if(!this.state.sentenceSearchModalVisible) {\n return null;\n }\n\n const { item, onSentenceAdd, onSentenceDelete, sentenceSearchUrl } = this.props;\n\n return (\n \n onToggle({ text, translation })}\n >\n
\n \n this.setState({ text })}\n onTranslationChange={(translation) => this.setState({ translation })}\n text={text}\n translation={translation}\n />\n
\n \n this.setState({ sentenceSearchModalVisible: true })}\n >\n Sentence Search\n \n onSentenceAdd({ id: uuidv4(), text: \"\", translation: \"\" })}\n style={{ marginLeft: 10 }}\n >\n Add Sentence\n \n onSentencesChange(shuffleArray(item.sentences))}\n style={{ marginLeft: 10 }}\n >\n Shuffle Sentences\n \n
\n {this.renderSentenceSearchModal()}\n \n );\n }\n}\n","import React from \"react\";\n\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport Block from \"./Block\";\n\nexport default class TextBlock extends React.Component {\n renderInput() {\n const { item, onChange, textarea } = this.props;\n\n if(textarea) {\n return (\n \n {this.renderInput()}\n {renderErrorMessage(error)}\n
\n \n );\n }\n}\n","import React from \"react\";\n\nimport { ReactSortable } from \"react-sortablejs\";\nimport { v4 as uuidv4 } from \"uuid\";\n\nimport SentencesBlock from \"./SentencesBlock\";\nimport TextBlock from \"./TextBlock\";\n\nexport default class WorksheetEditor extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n blocks: this.setupBlocks(props.blocks || []),\n editable: props.editable,\n title: props.title || \"\"\n };\n }\n\n setupBlocks(blocksArr) {\n blocksArr.forEach((block) => {\n block.id = uuidv4();\n\n if (block.type === \"sentences_block\") {\n block.sentences = block.sentences || [];\n if (block.sentences.length !== 0) {\n block.sentences = Object.values(block.sentences);\n block.sentences.forEach((sentence) => {\n sentence.id = uuidv4();\n });\n }\n }\n });\n\n return blocksArr;\n }\n\n addBlock(type) {\n const { blocks } = this.state;\n const element = {};\n\n if (type === \"sentences_block\") {\n element.sentences = [];\n } else {\n element.text = \"\";\n }\n\n element.type = type;\n element.id = uuidv4();\n blocks.push(element);\n\n this.setState({\n blocks\n }, () => window.scrollTo(0, document.body.scrollHeight)); // scroll to bottom\n }\n\n makeEditable(status) {\n $.ajax({\n data: { worksheet: { editable: status } },\n method: \"put\",\n url: this.props.worksheetUrl,\n\n })\n .done(() => {\n this.setState({ editable: status });\n })\n .fail(() => {\n alert(\"Something is wrong\");\n });\n }\n\n validate() {\n const { blocks } = this.state;\n let valid = true;\n\n blocks.forEach((block) => {\n if (block.type === \"sentences_block\") {\n if (block.sentences) {\n block.sentences.forEach((sentence) => {\n if (sentence.text.length === 0) {\n sentence.textError = \"Can't be empty.\";\n valid = false;\n } else if (!sentence.text.match(/{{.*}}/)) {\n sentence.textError = \"Should contain a cloze.\";\n valid = false;\n } else {\n sentence.textError = null;\n }\n\n if (sentence.translation.length === 0) {\n sentence.translationError = \"Can't be empty.\";\n valid = false;\n } else {\n sentence.translationError = null;\n }\n });\n }\n } else {\n if (block.text.length === 0) {\n block.error = \"Can't be empty.\";\n valid = false;\n } else {\n block.error = null;\n }\n }\n });\n\n this.setState({ blocks });\n\n return valid;\n }\n\n save() {\n if (!this.validate()) {\n alert(\"Some fields have errors, please correct them and try again.\");\n return false;\n }\n\n const { blocks: content, title } = this.state;\n const { admin, editable } = this.props;\n\n $.ajax({\n data: { worksheet: { content, editable, title } },\n method: \"put\",\n url: this.props.worksheetUrl,\n })\n .done(() => {\n if(!editable && !admin) {\n alert(\"Thank you!\");\n window.location.href = \"/\";\n } else {\n alert(\"Saved!\");\n }\n })\n .fail(() => {\n alert(\"Something is wrong. Please try again and please let someone know if you see this message again.\");\n });\n }\n\n renderErrorMessage(message) {\n if(!message) {\n return null;\n }\n\n return (\n \n {message}\n \n );\n }\n\n renderSentencesBlock(item) {\n const { blocks } = this.state;\n const { sentenceSearchUrl } = this.props;\n\n return (\n \n this.save()}\n style={{ marginRight: 10 }}\n >\n Save\n \n \n \n \n {editable && !admin &&\n { if (confirm(\"Are you sure?\")) { this.setState({ editable: false }, () => this.save()); } }}\n type=\"button\"\n >\n Submit\n \n }\n {editable && admin &&\n \n }\n {!editable && admin &&\n \n }\n \n Preview\n \n
\n );\n }\n\n render() {\n return (\n \n {this.renderTitle()}\n
\n {this.renderBlocks()}\n
\n {this.renderFooter()}\n
\n );\n }\n}\n","import React from \"react\";\n\nexport default function BlogPostLanguagePairing({ languagePairingId, languagePairings, url }) {\n const [currentLanguagePairingId, setCurrentLanguagePairingId] = React.useState(languagePairingId);\n const [loading, setLoading] = React.useState(false);\n\n const didMount = React.useRef(false);\n\n React.useEffect(() => {\n if(!didMount.current) {\n didMount.current = true;\n }\n else {\n setLoading(true);\n fetch(url, {\n body: JSON.stringify({ blog_post: { language_pairing_id: currentLanguagePairingId } }),\n headers: {\n \"Accept\": \"application/json\",\n \"Content-Type\": \"application/json\"\n },\n method: \"put\"\n })\n .then((response) => {\n if(!response.ok) {\n throw response.status;\n }\n })\n .catch((error) => {\n alert(`${error} - please refresh and try again. Please let someone know if error persists.`);\n })\n .finally(() => {\n setLoading(false);\n });\n }\n }, [currentLanguagePairingId]);\n\n return (\n \n );\n}\n","import React from \"react\";\n\nimport Checkbox from \"../../Checkbox\";\n\nexport default function SearchForm(props) {\n const {\n context,\n disabled,\n excludeModerated,\n query,\n onChange,\n onSubmit,\n order,\n withHint,\n withNotes\n } = props;\n\n const asc = \"⇧\";\n const desc = \"⇩\";\n\n return (\n \n );\n};\n","import React from \"react\";\n\nimport ClozeSentenceEntry from \"../mods/ClozeSentenceEntry\";\nimport CollectionClozeSentenceChangesModal from \"../mods/CollectionClozeSentenceChangesModal\";\nimport CollectionClozeSentenceEditor from \"../mods/CollectionClozeSentenceEditor\";\nimport CollectionClozeSentenceTts from \"../mods/CollectionClozeSentenceTts\";\nimport TokensEditor from \"../mods/TokensEditor\";\n\nexport default class CollectionClozeSentenceRow extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n editorVisible: false,\n resourcesEditorVisible: false,\n tokensCount: props.collectionClozeSentence.tokensCount,\n tokensEditorVisible: false,\n ttsEditorVisible: false,\n };\n }\n\n renderTokensEditor() {\n if(!this.state.tokensEditorVisible) {\n return null;\n }\n\n const { collectionClozeSentence, testEnv } = this.props;\n\n return (\n \n {this.renderBlocks()}\n
\n {this.renderFooter()}\n
\n
- \n {tts.map((t) => (\n
- \n {t.voice_id}\n
\n \n \n ))}\n
{this.renderAudio()}
\n \n {!!jsonVisible && (\n {JSON.stringify(collectionClozeSentence, null, 2)}\n )}\n \n this.setState({ [e.target.name]: e.target.value })}\n onSubmit={(e) => this.onSearchSubmit(e)}\n order={order}\n query={query}\n withHint={withHint}\n withNotes={withNotes}\n />\n
\n\n \n
\n {this.renderPagination()}\n
\n );\n }\n}\n","import React from \"react\";\n\nexport default class CommonVoiceSentenceTr extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: false,\n status: props.status\n };\n }\n\n onStatusChange(e) {\n this.setState({ loading: true });\n $.ajax({\n data: { common_voice_sentence: { status: e.target.value } },\n method: \"put\",\n url: this.props.url\n })\n .done((data) => {\n this.setState({ status: data.commonVoiceSentence.status });\n })\n .fail(() => {\n alert(\"Error saving status! Please try again and let someone know if you see this message again.\");\n })\n .always(() => {\n this.setState({ loading: false });\n });\n }\n\n render() {\n const { audioUrl, difficulty, duration, id, text } = this.props;\n const { loading, status } = this.state;\n const statusClassName = status === \"approved\" ? \"success\" : (status === \"rejected\" ? \"danger\" : null);\n\n return (\n <>\n \n
| \n Moderated\n \n | \n Sentence | \n {/*Has TTS | */}\n\n Played\n \n | \n Incorrect | \nIgnored | \nTokens | \n\n | \n | \n | \n {/* | */}\n |
|---|
\n \n
\n \n \n
\n \n \n
\n - \n {currentSentence.tts.map((t, i) => (\n
- \n {t[\"voice_id\"]} ({t[\"service\"]}) ({i + 1})\n
\n \n \n ))}\n
- \n
- (e) \n
- (s) \n
- (t) \n
- (⬅️ or a) \n
- (➡️ or d) \n
- (r) \n
No more sentences! 🎉
\n \n \n );\n }\n\n const currentSentence = sentences[index];\n console.log(currentSentence);\n const { languagePairing } = this.props;\n const { baseLanguageIso, targetLanguageIso } = (languagePairing || {});\n\n return (\n <>\n\n
- \n
- Index: {index + 1} \n
- Moderated this session: {sentences.filter((s) => s.moderated).length} \n
\n
\n {this.renderTts()}\n
\n {this.renderSentenceEditor()}\n {this.renderTtsEditor()}\n {this.renderTokensEditor()}\n \n );\n }\n}\n","import React from \"react\";\n\nexport default class Tokens extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n tokens: null\n };\n }\n\n componentDidMount() {\n const { url } = this.props;\n\n $.ajax({\n data: { include: \"morphological_features,pos_tags\" },\n url\n })\n .done((data) => {\n this.setState({\n loading: false,\n morphologicalFeatures: data.morphologicalFeatures,\n posTags: data.posTags,\n tokens: data.tokens\n });\n })\n .fail(() => {\n alert(\"Failed to get tokens! Please refresh the page to try again and let someone know if you see this message again.\");\n });\n }\n\n render() {\n const { loading, tokens } = this.state;\n\n if(loading) {\n return \"Loading...\";\n }\n\n if(!tokens || !tokens.length) {\n return null;\n }\n\n return (\n \n {this.renderTts()}\n
- \n
- {currentSentence.numPlayed} 🎮 \n
- {currentSentence.numIncorrect} ❌ \n
- {currentSentence.numIgnored} 🚫 \n
- Tokens: {currentSentence.tokensCount} \n
\n
\n */}\n Tokens
\n {this.renderTokens()}\n\n (k)\n
\n\n {tokens.map((t) => (\n
\n );\n }\n}\n","import React from \"react\";\nimport Chart from \"chart.js\";\n\nexport default class StatsReportsLineChart extends React.Component {\n componentDidMount() {\n const colors = [\n \"rgb(255, 99, 132)\",\n \"rgb(54, 162, 235)\",\n // Array.from(Array(20)).map((x) => Math.floor(Math.random()*16777215).toString(16));\n '#560391', '#70e904', '#328bef', '#16800e', '#1f65e0', '#a3bfca', '#896ab7', '#495a40', '#8dae12', '#3495f', '#7c341d', '#2d3cb4', '#4fb679', '#853531', '#3db719', '#479575', '#ca1d4c', '#823dcf', '#1558e2', '#ba8313'\n ];\n\n const config = {\n\t\t\ttype: 'line',\n\t\t\tdata: {\n\t\t\t\tlabels: this.props.dates,\n\t\t\t\tdatasets: this.props.lines.map((l, i) => ({\n\t\t\t\t\tbackgroundColor: colors[i],\n\t\t\t\t\tborderColor: colors[i],\n\t\t\t\t\tdata: l.data,\n\t\t\t\t\tfill: false,\n\t\t\t\t\tlabel: l.label,\n\t\t\t\t}))\n\t\t\t},\n\t\t\toptions: {\n\t\t\t\tresponsive: true,\n\t\t\t\ttooltips: {\n\t\t\t\t\tmode: 'index',\n\t\t\t\t\tintersect: false,\n\t\t\t\t},\n\t\t\t\thover: {\n\t\t\t\t\tmode: 'nearest',\n\t\t\t\t\tintersect: true\n\t\t\t\t},\n\t\t\t}\n\t\t};\n\n const ctx = document.getElementById('canvas').getContext('2d');\n const myLine = new Chart(ctx, config);\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\n\nimport TTSVoicesTableRow from \"./TTSVoicesTableRow\";\n\nexport default class TTSSVoicesTable extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n voices: props.voices\n };\n }\n\n renderVoiceRow(voice) {\n const { languages } = this.props;\n const { voices } = this.state;\n\n return (\n \n {t.text}\n {t.posTag && <>
{t.posTag.key}}\n {t.lemma && t.lemma.text && t.lemma.text !== t.text && <>
{t.lemma.text}}\n
\n ))}\n {t.posTag.key}}\n {t.lemma && t.lemma.text && t.lemma.text !== t.text && <>
{t.lemma.text}}\n
\n \n \n
\n
\n );\n }\n}\n","import React from \"react\";\n\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nexport default class TTSVoicesTableRow extends React.Component {\n constructor(props) {\n super(props);\n \n const voice = props.voice || {};\n\n this.state = {\n languageId: voice.languageId || \"\",\n sampleAudioText: voice.sampleAudioText,\n updating: false\n };\n }\n\n componentDidMount() {\n const { voice } = this.props;\n\n if(this.shouldCheckSampleAudioStatus(voice.sampleAudioStatus)) {\n this.checkSampleAudioStatus();\n }\n }\n\n shouldCheckSampleAudioStatus(status) {\n return status === \"sample_audio_queued\" || status === \"sample_audio_working\";\n }\n\n checkSampleAudioStatus() {\n const { onUpdate, voice } = this.props;\n\n this.setState({ updating: true });\n\n setTimeout(() => {\n $.ajax({\n url: voice.url\n })\n .done((data) => {\n const { ttsVoice } = data;\n\n onUpdate && onUpdate(ttsVoice);\n\n if(this.shouldCheckSampleAudioStatus(ttsVoice.sampleAudioStatus)) {\n this.checkSampleAudioStatus();\n }\n else {\n this.setState({ updating: false });\n }\n })\n .fail(() => {\n alert(\"Error checking sample audio status.\");\n this.setState({ updating: false });\n });\n }, 3000);\n }\n\n update(attrs) {\n this.setState({ updating: true });\n\n const { onUpdate, voice } = this.props;\n console.log(voice);\n\n $.ajax({\n contentType: \"application/json\",\n data: JSON.stringify({ tts_voice: attrs }),\n dataType: \"json\",\n method: \"put\",\n url: voice.url\n })\n .done((data) => {\n if(data.errors) {\n alert(data.errors);\n this.setState({ updating: false });\n }\n else {\n const { ttsVoice } = data;\n\n onUpdate && onUpdate(ttsVoice);\n\n if(this.shouldCheckSampleAudioStatus(ttsVoice.sampleAudioStatus)) {\n this.checkSampleAudioStatus();\n }\n else {\n this.setState({ updating: false });\n }\n }\n })\n .fail(() => {\n alert(\"Something's gone awry! Failed to update.\");\n this.setState({ updating: false });\n });\n }\n\n render() {\n const { languages, voice } = this.props;\n const { sampleAudioText, updating } = this.state;\n\n return (\n | Active | \nProvider | \nLanguage code | \nName | \nSample | \nLanguage | \nDisplay name | \nGender | \n
|---|
Status: {voice.sampleAudioStatus}
\n {!!voice.sampleAudioErrorMessage && {voice.sampleAudioErrorMessage}
}\n {!!voice.sampleAudioErrorBacktrace && {JSON.stringify(voice.sampleAudioErrorBacktrace, null, 2)}}\n \n this.setState({ sampleAudioText: e.target.value })} style={{ marginRight: 5 }} value={sampleAudioText} />\n \n
\n \n
\n this.nextPage()}\n onPrevClick={() => this.prevPage()}\n page={page}\n perPage={perPage}\n total={total}\n updating={loading}\n />\n
\n \n );\n }\n}\n","import React from \"react\";\n\nexport default class Word extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n editing: false,\n text: props.text\n };\n }\n\n componentDidUpdate(prevProps, prevState) {\n if(prevProps.loading && !this.props.loading && this.state.editing) {\n this.setState({ editing: false });\n }\n }\n\n render() {\n const { editing, text } = this.state;\n const { destroy, loading, update } = this.props;\n\n if(editing) {\n return (\n - \n
- this.setState({ text: e.target.value })} value={text} /> \n \n \n
- \n
- {text} \n \n \n
\n \n
\n );\n }\n}\n","import React from \"react\";\n\nimport { isRTL, tatoebaUrl } from \"../../helpers\";\n\nimport ClozeSentence from \"../ClozeSentence\";\nimport Icon from \"../Icon\";\n\nexport default function ClozeSentenceEntry(props) {\n const { baseLanguageIso, clozeSentence, clozeSentenceStyle, includeTranslationLinks, targetLanguageIso } = props;\n const cs = clozeSentence; // convenience\n const plainText = cs.text.replace(/{{|}}/g, \"\");\n\n const deepLLanguages = ['bg', 'cs', 'da', 'de', 'el', 'en', 'es', 'et', 'fi', 'fr', 'hu', 'it', 'ja', 'lt', 'lv', 'nl', 'pl', 'pt', 'ro', 'ru', 'sk', 'sl', 'sv', 'zh'];\n const deepLAvailable = deepLLanguages.indexOf(baseLanguageIso) >= 0 && deepLLanguages.indexOf(targetLanguageIso) >= 0;\n console.log(\"baseLanguageIso\", baseLanguageIso, \"targetLanguageIso\", targetLanguageIso);\n\n // google translate hebrew is apparently iw, not sure where else we might need to make this change\n const googleTranslateTargetLanguageIso = (targetLanguageIso === \"he\" ? \"iw\" : targetLanguageIso);\n const googleTranslateBaseLanguageIso = (baseLanguageIso === \"he\" ? \"iw\" : baseLanguageIso);\n\n return (\n <>\n \n \n Please avoid deleting sentences whenever possible. Edits are preferred.\n
\n \n
\n {includeTranslationLinks && (\n \n )}\n \n
\n \n
\n {!!cs.pronunciation && \n {cs.translation}\n
\n {includeTranslationLinks && (\n \n )}\n Pronunciation: {cs.pronunciation}
}\n {!!cs.hint && Hint: {cs.hint}
}\n {!!cs.notes && Notes: {cs.notes}
}\n {!!(cs.alternativeAnswers || []).length && Alternative answers: {cs.alternativeAnswers.join(\",\")}
}\n {!!cs.tatoebaId && (\n Tatoeba \n {!!ttsErrorMessage &&
\n
\n \n
\n );\n }\n}\n","import React from \"react\";\n\nimport Icon from \"../Icon\";\n\nexport default class CollectionClozeSentenceChange extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n moreVisible: false\n };\n }\n\n render() {\n const c = this.props.change;\n const { moreVisible } = this.state;\n\n return (\n {ttsErrorMessage}
}\n{text}
\n{JSON.stringify(tts, null, 2)}\n {tts.map((t) => (\n \n {t[\"voice_id\"]}\n
\n \n
\n
\n \n
\n {/*\n {JSON.stringify(ttsVoices, null, 2)}\n \n \n \n Caution!\n \n
\n */}\n \n \n
\n
\n );\n }\n}\n","import React from \"react\";\n\nimport CollectionClozeSentenceChange from \"./CollectionClozeSentenceChange\";\nimport Modal from \"../Modal\";\nimport ModalFooterCloseBtn from \"../ModalFooterCloseBtn\";\n\nexport default class CollectionClozeSentenceChangesModal extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n changes: null,\n loading: true\n };\n }\n\n componentDidMount() {\n this.loadChanges();\n }\n\n loadChanges() {\n const { url } = this.props;\n\n $.ajax({\n url\n })\n .done((data) => {\n this.setState({\n changes: data.collectionClozeSentenceChanges,\n loading: false\n });\n })\n .fail(() => {\n alert(\"Oh no! There was an error loading the changes. Sorry about that. Please try again and let someone know if you see this message again.\");\n });\n }\n\n renderContent() {\n const { changes, loading } = this.state;\n\n if(loading) {\n return \"Loading...\";\n }\n\n if(!changes || !changes.length) {\n return \"No changes!\";\n }\n\n return changes.map((c, i) => (\n - \n {c.languagePairing &&
- {c.languagePairing} }\n
- Created at: {c.createdAt} \n {c.collection &&
- Collection: {c.collection} }\n
- User: {c.user && c.user.username} \n {c.deleted &&
- Deleted }\n {!c.deleted && Object.keys(c.newAttributes).filter((k) => (c.newAttributes[k] || c.oldAttributes[k]) && c.newAttributes[k] !== c.oldAttributes[k]).map((k) => (\n
- {k.charAt(0).toUpperCase() + k.slice(1).replace(/_/g, \" \")}: {\"\" + c.oldAttributes[k]} ➡️ {\"\" + c.newAttributes[k]} \n ))}\n
- \n { e.preventDefault(); this.setState({ moreVisible: !moreVisible }); }}>JSON
\n \n
\n {JSON.stringify(c, (k, v) => v !== null ? v : undefined, 2)}\n \n )}\n \n
\n );\n }\n\n renderEditBothCheckbox() {\n const { clozeSentenceUrl } = this.props;\n\n if(!clozeSentenceUrl) {\n return false;\n }\n\n const { editBoth } = this.state;\n\n return (\n <>\n \n
\n {this.renderCollectionClozeSentenceEditor()}\n
\n Collection Cloze-Sentence
\n\n {this.renderCollectionClozeSentenceEditor()}\n
\n
\n {this.renderClozeSentenceEditor()}\n
\n Parent Cloze-Sentence
\n\n {this.renderClozeSentenceEditor()}\n
\n \n
\n \n \n );\n }\n\n render() {\n const { clozeSentenceUrl, onHidden } = this.props;\n const { editBoth } = this.state;\n\n return (\n
\n
\n \n );\n};\n","import React from \"react\";\n\nimport { v4 as uuidv4 } from \"uuid\";\n\nimport ClozeSentence from \"../ClozeSentence\";\nimport Modal from \"../Modal\";\nimport ModalFooterCloseBtn from \"../ModalFooterCloseBtn\";\nimport TokensEditorToken from \"./TokensEditorToken\";\n\nexport default class TokensEditor extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n tokens: []\n };\n }\n\n componentDidMount() {\n this.loadTokens();\n }\n\n loadTokens() {\n const { testEnv, tokensUrl } = this.props;\n\n this.setState({ loading: true });\n\n $.ajax({\n data: { include: \"morphological_features,pos_tags\" },\n url: tokensUrl\n })\n .done((data) => {\n console.log(\"loadTokens\", data);\n const {\n tokenizationErrorMessage,\n tokenizationStatus,\n tokens\n } = data;\n\n if(tokenizationStatus === \"tokenization_failed\") {\n this.setState({ loading: false });\n alert(\"Tokenization failed! Please try again.\");\n return false;\n }\n\n if(tokenizationStatus === \"tokenization_queued\" || tokenizationStatus === \"tokenization_working\") {\n setTimeout(this.loadTokens.bind(this), testEnv ? 500 : 3000); // try again in 3s\n return false;\n }\n\n // intracomponent uuid so we can update new tokens when saved\n tokens.forEach((t) => t.uuid = uuidv4());\n this.setState({\n loading: false,\n morphologicalFeatures: data.morphologicalFeatures,\n posTags: data.posTags,\n tokens\n });\n })\n .fail(() => {\n alert(\"Error loading tokens! Please tell someone.\");\n });\n }\n\n renderContent() {\n const { loading, morphologicalFeatures, posTags, tokens } = this.state;\n const { clozeText, tokensUrl } = this.props;\n\n if(loading) {\n return \"Loading... This may take a few moments if the sentence is being tokenized.\";\n }\n\n return (\n \n
\n {hasClozeSentence && (\n Collection Cloze Sentence
\n\n
\n )}\n Parent Cloze Sentence
\n\n {\n this.setState({\n tokens: tokens.filter((token) => {\n return t.uuid !== token.uuid;\n })\n });\n }}\n onSave={({ token, uuid }) => {\n this.setState({\n tokens: tokens.map((t) => {\n return t.uuid === uuid ? token : t;\n })\n });\n }}\n posTags={posTags}\n token={t}\n tokensUrl={tokensUrl}\n />\n ))}\n
\n );\n }\n\n addToken() {\n const { tokens } = this.state;\n this.setState({\n tokens: tokens.concat([{\n index: tokens.length ? (Math.max(...tokens.map((t) => t.index)) + 1) : 1,\n uuid: uuidv4()\n }])\n }, () => $(\"#tokens\").scrollLeft(10000)); // max scroll left\n }\n\n regenerateTokens() {\n const confirmation = \"Are you sure? This will delete all existing tokens and regenerate new ones. This cannot be undone, and this may take a few minutes. Please type confirmed to continue.\";\n if(prompt(confirmation) !== \"confirmed\") {\n return false;\n }\n\n this.setState({ loading: true });\n\n const { testEnv, tokensUrl } = this.props;\n\n $.ajax({\n method: \"put\",\n url: tokensUrl\n })\n .done(() => {\n setTimeout(this.loadTokens.bind(this), testEnv ? 500 : 3000);\n })\n .fail(() => {\n alert(\"Error regenerating tokens! Please tell someone.\");\n });\n }\n\n render() {\n const { onHidden } = this.props;\n const { tokens } = this.state;\n\n return (\n Scrollable ➡️
\n