\n
\n);\n","const ratioToPercentage = (widthProportion, heightProportion) =>\n (heightProportion / widthProportion) * 100;\n\nconst ASPECT_RATIO = {\n landscape: ratioToPercentage(16, 9),\n landscape_legacy: ratioToPercentage(4, 3),\n portrait: ratioToPercentage(3, 4),\n square: ratioToPercentage(1, 1),\n};\n\nexport const imgWithFormatFn = (imageId, imageBasePath) => format =>\n `${imageBasePath}/${imageId}_${format.id}.jpg`;\n\nexport const format = Object.freeze({\n legacy: {\n id: 4,\n aspectRatio: [ASPECT_RATIO.landscape_legacy, ASPECT_RATIO.portrait],\n },\n free: {\n id: 7,\n },\n sm: {\n id: 503,\n aspectRatio: ASPECT_RATIO.landscape,\n },\n sm_richtext: {\n id: 503,\n aspectRatio: [ASPECT_RATIO.landscape, ASPECT_RATIO.portrait],\n },\n md: {\n id: 505,\n aspectRatio: ASPECT_RATIO.landscape,\n },\n md_richtext: {\n id: 505,\n aspectRatio: [ASPECT_RATIO.landscape, ASPECT_RATIO.portrait],\n },\n lg: {\n id: 507,\n aspectRatio: ASPECT_RATIO.landscape,\n },\n lg_richtext: {\n id: 507,\n aspectRatio: [ASPECT_RATIO.landscape, ASPECT_RATIO.portrait],\n },\n full: {\n id: 509,\n aspectRatio: ASPECT_RATIO.landscape,\n },\n});\n\nexport const getFormatForWidth = ({ innerWidth, sources = [] }) => {\n const source = sources.find(w => innerWidth >= w.minWidth && innerWidth <= w.maxWidth);\n return source ? source.imgFormat : format.lg;\n};\n\nexport const getImgUrlForWidth = ({ innerWidth, sources = [], imageId, imageBasePath }) => {\n const useFormat = getFormatForWidth({ innerWidth, sources });\n return imgWithFormatFn(imageId, imageBasePath)(useFormat);\n};\n","import { createContext, useContext } from 'react';\n\n// eslint-disable-next-line fp/no-let\nlet frontendConfig = null;\n\nexport function hasFrontendConfig() {\n return !!frontendConfig;\n}\n\nexport function setFrontendConfig(inFrontendConfig) {\n frontendConfig = inFrontendConfig; // eslint-disable-line fp/no-mutation\n}\n\nexport function getFrontendConfig() {\n return frontendConfig;\n}\n\nexport function clearFrontendConfig() {\n frontendConfig = null; // eslint-disable-line fp/no-mutation\n}\n\n// CONTEXT\nexport const FrontendConfigContext = createContext({ getFrontendConfig });\n\n// USAGE HOOK\nexport const useFrontendConfig = () => useContext(FrontendConfigContext).getFrontendConfig();\n","export const Picture = ({ sources, fallbackUrl, alt, className, aspectRatio }) => (\n \n
\n );\n};\n","import styled from 'styled-components';\nimport classnames from 'classnames';\nimport { RichText } from '../RichText/RichText';\nimport { useImagePlaceholderReplacementEffect } from '../../utils/replacers/useImagePlaceholderReplacementEffect';\nimport { ContentHeadline } from '../ContentContainer/ContentHeadline/ContentHeadline';\n\nexport const legalFragment = {\n name: 'Legal',\n partial() {\n return `legal(appName: \"mdl\") {\n ... on Article {\n id\n shortTitle\n text\n }\n }\n `;\n },\n};\n\nexport const LegalNotice = ({ className, legal }) => {\n useImagePlaceholderReplacementEffect({});\n const { text, shortTitle } = legal || {};\n\n return (\n \n
\n \n {children}\n
\n \n \n \n
\n );\n};\n\nexport const StyledLegalNotice = styled(LegalNotice)`\n .img-caption {\n display: none;\n }\n`;\n","import styled from 'styled-components';\nimport gql from 'graphql-tag';\nimport { useParams } from 'react-router-dom';\nimport { colors, resolutions } from '../../utils/css';\nimport { I18nText } from '../I18n/I18nText';\nimport {\n getDwContactUrl,\n getDwUrlWithLang,\n getFooterLinkForNamedUrl,\n getLegalUrl,\n} from '../../utils/url/urlFactory';\nimport { useRtlContext } from '../../hooks/useRtl';\nimport { legalFragment } from '../LegalNotice/LegalNotice';\n\nexport const footerFragment = {\n name: 'Footer',\n fragment() {\n return gql`fragment ${this.name} on Query {\n footer(lang: $lang) {\n accessibility(appName: \"mdl\") {\n namedUrl\n }\n policy(appName: \"mdl\") {\n namedUrl\n }\n ${legalFragment.partial()}\n }\n }\n `;\n },\n};\n\nexport const Footer = ({ className, data }) => {\n const { isRtl } = useRtlContext();\n const { langCode } = useParams();\n\n const rtlClass = isRtl ? 'rtl' : '';\n return (\n \n );\n};\n\nconst footerData = ({ langCode, data }) => [\n {\n translation: {\n key: 'footer.copyright',\n parameters: { first: new Date().getFullYear() },\n },\n id: 0,\n aria: 'footer.copyright',\n role: 'Firm name',\n },\n {\n translation: 'footer.dw',\n id: 1,\n href: getDwUrlWithLang({ langCode }),\n target: '_blank',\n aria: 'footer.dw',\n role: 'link',\n },\n {\n translation: 'footer.privacyPolicy',\n id: 2,\n href: getFooterLinkForNamedUrl({ namedUrl: data.footer.policy.namedUrl }),\n target: '_blank',\n aria: 'footer.privacyPolicy',\n role: 'link',\n },\n {\n translation: 'footer.accessibility',\n id: 3,\n href: getFooterLinkForNamedUrl({ namedUrl: data.footer.accessibility.namedUrl }),\n target: '_blank',\n aria: 'footer.accessibility',\n role: 'link',\n },\n {\n translation: 'footer.legal',\n id: 4,\n href: getLegalUrl(langCode),\n target: '',\n aria: 'footer.legal',\n role: 'link',\n },\n {\n translation: 'footer.contact',\n id: 5,\n href: getDwContactUrl(),\n target: '_blank',\n aria: 'footer.contact',\n role: 'link',\n },\n];\n\nexport const StyledFooter = styled(Footer)`\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n align-items: center;\n width: 100%;\n min-height: 90px;\n font-family: Helvetica, Arial, sans-serif;\n line-height: 45px;\n margin: 20px 0;\n background: ${colors.LG_BLUE_7};\n\n ul {\n display: flex;\n flex-flow: row wrap;\n flex-direction: row;\n max-width: 100%;\n list-style-type: none;\n padding: 10px 0;\n text-align: center;\n margin: 0;\n }\n\n li {\n margin-right: 12px;\n padding: 0 0 0 12px;\n\n &.rtl {\n direction: rtl;\n }\n }\n\n .footer-link {\n text-decoration: none;\n font-size: 15px;\n color: ${colors.LG_BLUE_4};\n background-color: transparent;\n :hover,\n :active,\n :focus {\n color: ${colors.LG_WHITE};\n }\n }\n\n @media (max-width: ${resolutions.max.tablet}px) {\n margin: 0;\n }\n\n @media (max-width: ${resolutions.max.mobile}px) {\n max-width: 100%;\n min-height: 65px;\n\n ul {\n justify-content: center;\n }\n }\n`;\n","import styled from 'styled-components';\n\nconst LoadingMessage = ({ className }) => (\n {shortTitle}
\n\n
\n \n
\n \n
\n);\n\nexport const StyledLoadingMessage = styled(LoadingMessage)``;\n","import styled from 'styled-components';\n\nconst ErrorMessage = ({ className, error }) => (\n Loading ...
\n\n
\n);\nexport const StyledErrorMessage = styled(ErrorMessage)`\n color: red;\n`;\n","import { useQuery } from '@apollo/client';\nimport { StyledLoadingMessage as LoadingMessage } from '../commons/LoadingMessage';\nimport { StyledErrorMessage as ErrorMessage } from '../commons/ErrorMessage';\n\nconst hasData = data => data && Object.values(data).filter(item => item).length > 0;\n\nexport const WithGraphQLQueryHandling = ({ query, queryVariables, children }) => {\n const { loading, error, data = {}, refetch } = useQuery(query, {\n variables: queryVariables,\n });\n\n if (loading) {\n return {error}
\n{!isServer() && children}
\n);\n","import { useSelector } from 'react-redux';\nimport config from '../../config';\nimport { userSelector } from '../../state/user/userSelectors';\nimport { useLocalStorage } from '../../hooks/useLocalStorage';\nimport { I18nText } from '../I18n/I18nText';\nimport { BrowserOnly } from './BrowserOnly';\n\nexport const GdprLayer = ({ footerData }) => {\n const { isLoggedIn } = useSelector(userSelector);\n const [hasAcceptedGdpr, setHasAcceptedGdpr] = useLocalStorage('hasAcceptedGdpr');\n const { namedUrl } = footerData.footer.policy || {};\n\n if (isLoggedIn || hasAcceptedGdpr) {\n return null;\n }\n\n return (\n \n
\n \n
\n \n
\n \n setHasAcceptedGdpr(true)}\n />\n
\n \n
\n);\n\nexport const StyledPageLayout = styled(PageLayout)`\n background: ${colors.LG_WHITE};\n display: grid;\n margin: 0 auto;\n overflow-x: hidden !important;\n padding: 0;\n width: 100%;\n\n @media (min-width: ${resolutions.min.desktop}px) {\n margin: 40px auto;\n min-height: 600px;\n padding: 0 20px;\n width: 1240px;\n\n .content-container {\n width: 1200px;\n }\n }\n`;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useEffect } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { checkUserProfile } from '../services/userService';\nimport { loginTimeout } from '../state/user/userDuck';\nimport { feedbackHelper } from '../utils/url/feedbackHelpers';\nimport { userSelector } from '../state/user/userSelectors';\n\nexport const useCheckSessionTimeout = langCode => {\n const dispatch = useDispatch();\n const { isLoggedIn } = useSelector(userSelector);\n const history = useHistory();\n\n useEffect(() => {\n if (isLoggedIn) {\n checkUserProfile()\n .then(response => {\n if (response.status === 401) {\n dispatch(loginTimeout());\n history.push(feedbackHelper.forSessionTimeout('', langCode));\n }\n })\n .catch(() => {\n history.push(feedbackHelper.forGeneralError(langCode));\n });\n }\n }, [isLoggedIn]);\n};\n","import { LANG_CODES } from './langMapper';\n\nconst rtlLanguages = [\n LANG_CODES.ARABIC,\n LANG_CODES.DARI,\n LANG_CODES.HAUSA,\n LANG_CODES.PASHTO,\n LANG_CODES.PERSIAN,\n LANG_CODES.URDU,\n];\nexport const isRtlByLangCode = langCode => rtlLanguages.includes(langCode);\n","import {\n findExistingCourseById,\n findExistingLessonById,\n findInquiryProgress,\n} from './learnProgress';\n\nexport const learnProgressSelector = state => state.learnProgress;\n\nexport const findLessonLearnProgressSelector = lessonId => state => {\n const { lessons } = state.learnProgress;\n return findExistingLessonById({ lessons, lessonId });\n};\n\nexport const findInquiryLearnProgressSelector = (lessonId, exerciseId) => state => {\n if (!lessonId || !exerciseId) {\n return [];\n }\n const { lessons } = state.learnProgress;\n return findInquiryProgress({ lessons, lessonId, exerciseId });\n};\n\nexport const findCourseLearnProgressSelector = courseId => state => {\n const { courses } = state.learnProgress;\n return { courseProgress: findExistingCourseById({ courses, courseId }) };\n};\n\nexport const isLessonProgressSyncRequiredSelector = state => state.learnProgress.isSyncRequired;\n","export default __webpack_public_path__ + \"static/media/bg-dw-desktop.4aec073f.jpg\";","export default __webpack_public_path__ + \"static/media/DWTheAntiquaB-W7Bold.73a35783.woff\";","export default __webpack_public_path__ + \"static/media/DWTheAntiquaB-W7Bold.c739cf0d.woff2\";","export default __webpack_public_path__ + \"static/media/dwtheantiquab-w5plain.94c5b804.woff\";","export default __webpack_public_path__ + \"static/media/dwtheantiquab-w5plain.524a5eac.woff2\";","export default __webpack_public_path__ + \"static/media/DWTheAntiquaB-W5PlainItalic.0c806fe1.woff\";","export default __webpack_public_path__ + \"static/media/DWTheAntiquaB-W5PlainItalic.390937af.woff2\";","import { createGlobalStyle, StyleSheetManager } from 'styled-components';\nimport stylisRTLPlugin from 'stylis-plugin-rtl';\nimport { useParams } from 'react-router';\nimport { colors } from '../utils/css';\nimport { useValidateTicketAndLoginUser } from '../hooks/useValidateTicketAndLoginUser';\nimport { useRedirectAfterLogOut } from '../hooks/useRedirectAfterLogOut';\nimport { StyledPageLayout as PageLayout } from '../components/Page/PageLayout';\nimport { useLocationGetter } from '../hooks/useLocationGetter';\nimport { useCheckSessionTimeout } from '../hooks/useCheckSessionTimeout';\nimport { isRtlByLangCode } from '../utils/mappers/rtlLanguages';\nimport { useSyncLearnProgress } from '../hooks/useSyncLessonProgress';\nimport bgDWDesktop from '../assets/images/bg-dw-desktop.jpg';\nimport DWTheAntiquaBBoldWoff from '../assets/fonts/dw-theAntiquaB-W7Bold-web/DWTheAntiquaB-W7Bold.woff';\nimport DWTheAntiquaBBoldWoff2 from '../assets/fonts/dw-theAntiquaB-W7Bold-web/DWTheAntiquaB-W7Bold.woff2';\nimport DWTheAntiquaBSPlainWoff from '../assets/fonts/dw-theAntiquaB-W5Plain-web/dwtheantiquab-w5plain.woff';\nimport DWTheAntiquaBSPlainWoff2 from '../assets/fonts/dw-theAntiquaB-W5Plain-web/dwtheantiquab-w5plain.woff2';\nimport DWTheAntiquaBSPlainItalicWoff from '../assets/fonts/dw-theAntiquaB-W5PlainItalic-web/DWTheAntiquaB-W5PlainItalic.woff';\nimport DWTheAntiquaBSPlainItalicWoff2 from '../assets/fonts/dw-theAntiquaB-W5PlainItalic-web/DWTheAntiquaB-W5PlainItalic.woff2';\n\nexport const GlobalStyles = createGlobalStyle`\n * {\n box-sizing: border-box;\n font-family: Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n &:after, &:before {\n box-sizing: border-box;\n }\n html {\n -webkit-tap-highlight-color: transparent;\n }\n body {\n direction: ltr;\n text-align: left;\n background: url(${bgDWDesktop}) center top no-repeat ${colors.LG_GRAY_3};\n @font-face {\n font-family: DWTheAntiquaBBold;\n src: url(${DWTheAntiquaBBoldWoff}) format(\"woff\"),\n url(${DWTheAntiquaBBoldWoff2}) format(\"woff2\");\n font-style: normal;\n font-weight: 400\n }\n @font-face {\n font-family: DWTheAntiquaB;\n src: url(${DWTheAntiquaBSPlainWoff}) format(\"woff\"),\n url(${DWTheAntiquaBSPlainWoff2}) format(\"woff2\");\n font-style: normal;\n font-weight: 400\n }\n @font-face {\n font-family: DWTheAntiquaBItalic;\n src: url(${DWTheAntiquaBSPlainItalicWoff}) format(\"woff\"),\n url(${DWTheAntiquaBSPlainItalicWoff2}) format(\"woff2\");\n font-style: normal;\n font-weight: 400\n }\n }\n svg:not(:root) {\n overflow: hidden;\n }\n`;\n\nexport const MainPage = ({ children }) => {\n const { langCode } = useParams();\n const { location } = useLocationGetter();\n useValidateTicketAndLoginUser(location, langCode);\n useRedirectAfterLogOut(langCode);\n useCheckSessionTimeout(langCode);\n useSyncLearnProgress();\n\n const isRtl = isRtlByLangCode(langCode);\n\n return (\n {children}
\n Page not found (404).
\n \n {resultPoints}\n /\n {maxPointsForAllExercises}\n
\n );\n};\n\nexport const StyledLessonScore = styled(LessonScore)`\n font-size: 14px;\n\n .low {\n color: ${colors.LG_RED_SCORE};\n }\n .mid {\n color: ${colors.LG_GRAY_11};\n }\n .good {\n color: ${colors.LG_GREEN_SCORE};\n }\n`;\n","import styled from 'styled-components';\nimport { I18nText } from '../../I18n/I18nText';\nimport { colors } from '../../../utils/css';\n\nexport const ProgressResetButton = ({ className, onClickReset }) => {\n return (\n \n );\n};\n\nexport const StyledProgressResetButton = styled(ProgressResetButton)`\n background-color: ${colors.LG_GRAY_2};\n border: 1px solid transparent;\n color: ${colors.LG_WHITE};\n font-size: 12px;\n min-height: 31px;\n padding: 3px 10px;\n`;\n\nexport const StyledSmallProgressResetButton = styled(StyledProgressResetButton)`\n min-height: 27px;\n padding: 1px 7px;\n`;\n","export const progressIconColors = {\n GRAY: 'gray',\n WHITE: 'white',\n};\n","import styled from 'styled-components';\nimport classnames from 'classnames';\nimport { colors } from '../../utils/css';\nimport { progressIconColors } from './progressIconColors';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nexport const progressState = Object.freeze({\n EMPTY: 'empty',\n HALF: 'half',\n FULL: 'full',\n});\n\nconst translationKeyPrefix = 'common.progress';\n\nconst getTitleTranslationKey = progress => {\n switch (progress) {\n case progressState.EMPTY:\n return `${translationKeyPrefix}.none`;\n case progressState.HALF:\n return `${translationKeyPrefix}.half`;\n case progressState.FULL:\n return `${translationKeyPrefix}.full`;\n default:\n return `${translationKeyPrefix}.none`;\n }\n};\n\nconst ProgressIcon = ({ className, progress, color = progressIconColors.GRAY }) => {\n const title = useTranslation(getTitleTranslationKey(progress));\n\n return (\n \n
\n );\n};\n\nexport const StyledProgressIcon = styled(ProgressIcon)`\n width: 16px;\n height: 16px;\n margin: 0;\n text-align: right;\n\n div {\n margin: 0;\n }\n\n .background.white {\n border: 2px solid ${colors.LG_WHITE};\n }\n\n .background.gray {\n border: 2px solid ${colors.LG_GRAY_2};\n }\n\n .background {\n height: 100%;\n width: 100%;\n border-radius: 50%;\n box-sizing: border-box;\n\n .icon {\n height: 100%;\n }\n\n .icon.white {\n background: ${colors.LG_WHITE};\n }\n\n .icon.gray {\n background: ${colors.LG_GRAY_2};\n }\n\n .icon.full {\n width: 100%;\n }\n\n .icon.half {\n width: 50%;\n }\n\n .icon.empty {\n width: 0;\n }\n }\n`;\n","import { USER } from '../constants/userUrl';\n\nexport const PS_PREFIX = USER.PS_URL;\nexport const CERTIFICATE_URL = `${PS_PREFIX}protected/certificate/`;\n\nexport const getCertificate = id => {\n return fetch(`${CERTIFICATE_URL}${id}`, {\n headers: {\n 'Content-Type': 'application/pdf',\n },\n }).then(response => (response.ok ? response : response.json().then(err => Promise.reject(err))));\n};\n","import { getCertificate } from '../services/certificateService';\nimport { FEEDBACK_TYPES } from '../constants/feedback';\nimport { feedbackHelper } from './url/feedbackHelpers';\n\nexport const handleCertificateGeneration = async ({ id, langCode, history }) => {\n if (!id) {\n history.push(feedbackHelper.forInvalidCertificate(langCode));\n }\n\n try {\n const response = await getCertificate(id);\n response.blob().then(blob => {\n const headerFilename = response.headers.get('Content-Disposition').split('filename=')[1];\n const filename = headerFilename.replace('?', '–');\n const url = window.URL.createObjectURL(blob);\n const downloadLink = document.createElement('a');\n // eslint-disable-next-line fp/no-mutation\n downloadLink.href = url;\n // eslint-disable-next-line fp/no-mutation\n downloadLink.download = decodeURIComponent(filename);\n downloadLink.click();\n });\n } catch (error) {\n error.errorCode === FEEDBACK_TYPES.MISSING_TRANSCRIPTION\n ? history.push(feedbackHelper.forCertificateMissingTranscription(langCode))\n : history.push(feedbackHelper.forInvalidCertificate(langCode));\n }\n};\n","export default __webpack_public_path__ + \"static/media/icon-course-cert-gray.0fdcab0c.svg\";","import styled from 'styled-components';\nimport { useHistory } from 'react-router-dom';\nimport { useParams } from 'react-router';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { handleCertificateGeneration } from '../../utils/certificateUtils';\nimport CertificateGray from '../../assets/svg/icon-course-cert-gray.svg';\n\nexport const CertificateIcon = ({ className, id }) => {\n const history = useHistory();\n const { langCode } = useParams();\n const title = useTranslation('common.progress.cert');\n\n const handleOnCertificateClick = async () => {\n if (id) {\n await handleCertificateGeneration({ id, langCode, history });\n }\n };\n\n return (\n \n \n
\n \n 
\n
\n );\n};\n\nexport const StyledCertificateIcon = styled(CertificateIcon)`\n width: 16px;\n height: 24px;\n cursor: pointer;\n`;\n","export default __webpack_public_path__ + \"static/media/star-white.d32dc96a.svg\";","export default __webpack_public_path__ + \"static/media/star-gray.84ad33dd.svg\";","import styled from 'styled-components';\nimport StarWhite from '../../assets/svg/star-white.svg';\nimport StarGrey from '../../assets/svg/star-gray.svg';\nimport { progressIconColors } from './progressIconColors';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nconst starsMapping = {\n [progressIconColors.GRAY]: StarGrey,\n [progressIconColors.WHITE]: StarWhite,\n};\n\nexport const ProgressIconStar = ({ className, color }) => {\n const title = useTranslation('common.progress.good');\n\n return (\n \n
\n \n
\n );\n};\n","import styled from 'styled-components';\nimport { colors, resolutions } from '../../../utils/css';\nimport { CourseAccordion } from './CourseAccordion/CourseAccordion';\n\nexport const CourseList = ({ className, groupedLessons, onClickResetLesson }) => (\n - \n {Object.keys(groupedLessons).map(key => (\n // group lessons by their group names\n
- \n
\n \n
\n );\n};\n\nexport const StyledModal = styled(Modal)`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10040;\n\n .modal-background {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: ${colors.LG_BLACK};\n opacity: 0.5;\n font-family: Helvetica, Arial, sans-serif;\n font-weight: 400;\n font-size: 15px;\n }\n .modal-dialogue {\n position: relative;\n background-color: ${colors.LG_WHITE};\n width: 900px;\n margin: 30px auto;\n\n .modal-content {\n position: relative;\n background-color: ${colors.LG_WHITE};\n background-clip: padding-box;\n border-radius: 0;\n outline: 0;\n box-shadow: 0 3px 9px ${colors.LG_TRANSPARENT_BLACK_50};\n border: 1px solid ${colors.LG_TRANSPARENT_BLACK_20};\n\n .modal-body {\n position: relative;\n padding: 15px;\n font-size: 15px;\n\n p {\n margin: 0 0 10px;\n }\n }\n }\n\n .modal-footer {\n padding: 35px 10px;\n text-align: right;\n border-top: 1px solid ${colors.LG_GRAY_4};\n display: flex;\n flex-flow: row;\n justify-content: space-evenly;\n\n button {\n position: relative;\n margin: 0 7px;\n width: 100%;\n }\n }\n }\n\n &.fade {\n opacity: 0;\n -webkit-transition: opacity 0.15s linear;\n -o-transition: opacity 0.15s linear;\n transition: opacity 0.15s linear;\n }\n\n &.fade.in {\n opacity: 1;\n }\n\n &.rtl {\n direction: rtl;\n }\n\n @media (max-width: ${resolutions.max.tablet}px) {\n .modal-dialogue {\n width: 600px;\n .modal-footer {\n flex-flow: column;\n button {\n margin: 15px 0;\n }\n }\n }\n }\n\n @media (max-width: ${resolutions.max.mobile}px) {\n .modal-dialogue {\n width: auto;\n margin: 10px;\n .modal-footer {\n flex-flow: column;\n button {\n margin: 15px 0;\n }\n }\n }\n }\n`;\n\nexport const RightButton = styled(StandardButton)`\n background: ${colors.LG_WHITE};\n color: ${colors.LG_BLUE_1};\n border: 1px solid ${colors.LG_BLUE_1};\n box-sizing: border-box;\n\n :hover {\n border-color: ${colors.LG_BLACK};\n }\n`;\n\nexport const LeftButton = StandardButton;\n","import { StyledModal as Modal } from './Modal';\n\nexport const ResetModal = ({ fadeIn, onConfirmClicked, onCancelClicked }) => {\n const descriptionKey = 'lesson.modal.confirm';\n const leftButtonKey = 'lesson.modal.reset';\n const rightButtonKey = 'lesson.modal.cancel';\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n};\n\nexport const StyledCourseProgress = styled(CourseProgress)`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-right: 25px;\n\n > * {\n margin: 14px;\n }\n`;\n","// converts dkLearningLevel value to string learning levels\nexport const learningLevelMapper = {\n 0: '',\n 2: 'A1',\n 4: 'A2',\n 8: 'B1',\n 16: 'B2',\n};\n\nexport const sortByLearningLevel = coursesToSort =>\n // eslint-disable-next-line fp/no-mutating-methods\n [...coursesToSort].sort((a, b) => {\n if (a.dkLearningLevel === 0 && b.dkLearningLevel === 0) return 0;\n return a.dkLearningLevel - b.dkLearningLevel || a.id - b.id;\n });\n","import { useEffect, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { createGlobalStyle } from 'styled-components';\nimport {\n groupBy,\n isFinalTestPredicate,\n removeContentLinksWithEmptyTarget,\n} from '../../utils/commons';\nimport { useFrontendConfig } from '../../hooks/useFrontendConfig';\nimport {\n deleteCourseProgress,\n deleteLessonProgress,\n initCourse,\n readCourseProgress,\n readLessonProgresses,\n} from '../../state/progress/learnProgressDuck';\nimport { isMonolingualCourse } from '../../constants/isLtrContentOnly';\nimport { StyledCourseHeroImage as CoursePageHeroImage } from './CourseHeroImage/CourseHeroImage';\nimport { I18nText } from '../I18n/I18nText';\nimport { StyledCourseList as CourseList } from './CourseList/CourseList';\nimport { ModalIntegration } from '../Modal/ModalIntegration';\nimport { ResetModal } from '../Modal/ResetModal';\nimport { StyledCourseProgress as CourseProgress } from './Progress/CourseProgress';\nimport { learningLevelMapper } from '../../utils/learningLevelUtils';\n\nexport const LTRContentCourseOverviewStyle = createGlobalStyle`\n #courses {\n .title,\n span[aria-label*=\"lesson\"] {\n /* @noflip */\n direction: ltr;\n }\n .content .title {\n /* @noflip */\n text-align: left;\n }\n }\n`;\n\nexport const CourseOverview = ({ data, contentId }) => {\n const isMonoLingualCourse = isMonolingualCourse(contentId);\n\n const {\n name,\n dkLearningLevel,\n contentLinks: lessonContentLinks,\n mainContentImageLink,\n learningMetaInfo: { achievableScore, exerciseCount } = {},\n } = data.content;\n const filteredContentLinks = removeContentLinksWithEmptyTarget(lessonContentLinks);\n const finalLessonId = filteredContentLinks\n .filter(contentLink => isFinalTestPredicate(contentLink))\n .map(contentLink => contentLink.target.id);\n const allLessonIds = filteredContentLinks.map(contentLink => contentLink.target.id);\n const groupedLessons = groupBy('groupName', filteredContentLinks);\n const { imageBasePath } = useFrontendConfig();\n const [isResetModalOpen, setResetModalOpen] = useState(false);\n const [lessonIdToDelete, setLessonIdToDelete] = useState(null);\n\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(\n initCourse({\n allExerciseCount: exerciseCount,\n maxPointsForAllExercises: achievableScore,\n cosCourseId: contentId,\n }),\n );\n dispatch(readLessonProgresses(allLessonIds));\n dispatch(readCourseProgress(contentId));\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n const onClickResetCourse = () => {\n setResetModalOpen(true);\n };\n\n const onClickResetLesson = (e, lessonId) => {\n e.preventDefault();\n setLessonIdToDelete(lessonId);\n setResetModalOpen(true);\n };\n\n const onConfirmResetProgress = () => {\n if (lessonIdToDelete) {\n dispatch(deleteLessonProgress(lessonIdToDelete));\n setLessonIdToDelete(null);\n } else {\n dispatch(deleteCourseProgress(contentId));\n }\n setResetModalOpen(false);\n };\n\n const onCancelResetModal = () => {\n setLessonIdToDelete(null);\n setResetModalOpen(false);\n };\n\n return (\n \n {isMonoLingualCourse && \n \n
\n );\n};\n","import gql from 'graphql-tag';\nimport { Helmet } from 'react-helmet-async';\nimport { useFrontendConfig } from '../../hooks/useFrontendConfig';\n\nexport const imageOGMetaDataFragment = {\n name: 'ImageOGMetaData',\n fragment({ type }) {\n return gql`fragment ${type}${this.name} on ${type} {\n mainContentImage {\n id\n imageFormats\n }\n }\n `;\n },\n};\n\nexport const hasCorrectImageFormat = imageFormats =>\n imageFormats.find(format => format.includes('MASTER_LANDSCAPE'));\n\nconst createImageSharingData = ({ id, imageFormats, imageBasePath }) => {\n if (hasCorrectImageFormat(imageFormats)) {\n return {\n url: `${imageBasePath}/${id}_401.jpg`,\n width: 700,\n height: 394,\n };\n }\n return undefined;\n};\n\nexport const ImageOGMetaData = ({ image }) => {\n const { imageBasePath } = useFrontendConfig();\n\n if (!image) {\n return null;\n }\n\n const { url, width, height } = createImageSharingData({ ...image, imageBasePath }) || {};\n\n if (!url) {\n return null;\n }\n\n return (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n ';\nconst DIV_CLOSING = '
';\n\nexport const wrapTablesWithDiv = htmlString => {\n const text = removeAttributesFromTables(htmlString);\n const textReplacedOpenings = text.replace(\n new RegExp(TABLE_WITH_ATTRIBUTES, 'g'),\n `${TABLE_WRAPPER_DIV}${OPEN_TABLE_TAG}`,\n );\n const textReplacedClosings = textReplacedOpenings.replace(\n new RegExp(CLOSE_TABLE_TAG, 'g'),\n `${CLOSE_TABLE_TAG}${DIV_CLOSING}`,\n );\n return textReplacedClosings;\n};\n\nconst removeAttributesFromTables = htmlString =>\n htmlString.replace(new RegExp(TABLE_WITH_ATTRIBUTES, 'g'), OPEN_TABLE_TAG);\n","import { Component } from 'react';\n\nexport class WithRenderDelay extends Component {\n state = {};\n\n componentDidMount() {\n const delayTime = this.props.delayTime || 100;\n const timeoutHandle = setTimeout(() => this.props.actionToBeDelayed(), delayTime);\n this.setState((prevState, props) => ({ timeoutHandle }));\n }\n\n componentWillUnmount() {\n clearTimeout(this.state.timeoutHandle);\n }\n\n render() {\n // eslint-disable-next-line no-unused-vars\n const { render, actionToBeDelayed, delayTime, ...restProps } = this.props;\n return render(restProps);\n }\n}\n","import { useRef } from 'react';\nimport styled from 'styled-components';\nimport classnames from 'classnames';\nimport { DwPicture } from '../../DwPicture/DwPicture';\nimport { RichText } from '../../RichText/RichText';\n\nconst KnowledgeModalContainer = ({\n className,\n fadeIn,\n knowledgeType,\n imageId,\n imageName,\n audioFile,\n title,\n shortTitle,\n name,\n text,\n subTitle,\n onClose,\n isRtl,\n}) => {\n const audioRef = useRef();\n const closeModalRef = useRef();\n const closeBackdropRef = useRef();\n const faded = fadeIn ? 'in' : '';\n const initialSound = knowledgeType === 'INITIAL_SOUND';\n\n const playAudio = e => {\n e.preventDefault();\n audioRef.current.play();\n };\n\n const closeModal = () => {\n closeModalRef.current.classList.remove('in');\n closeBackdropRef.current.classList.remove('in');\n if (onClose) {\n onClose();\n }\n };\n\n const closeButton = (\n \n {linkTitle}\n
\n {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n \n \n );\n\n return (\n <>\n\n
\n \n \n {initialSound && (\n
\n \n {closeButton}\n
\n )}\n\n {!initialSound && (\n \n {shortTitle}\n
\n\n {closeButton}\n {audioLink(title)}\n {subTitle && (\n
\n )}\n\n {initialSound && (\n \n {subTitle}\n
\n )}\n\n
\n )}\n {!initialSound && (\n \n {imageId &&
\n )}\n {name}
\n\n
\n \n {\n replacePlaceholderImagesWithResponsivePictures();\n replacePlaceholderMarkupWithKnowledges({ knowledges, isRtl });\n }}\n delayTime={10}\n render={() =>
\n \n
\n \n );\n }}\n \n );\n};\n","import { useTimeout } from '../../../hooks/useTimeout';\nimport { replacePlaceholderMarkupWithKnowledges } from '../../../utils/replacers/knowledgeReplacer';\nimport { useRtlContext } from '../../../hooks/useRtl';\n\nexport const useKnowledgePlaceholderReplacementEffect = ({\n trigger,\n knowledges,\n ignore = false,\n}) => {\n const { isRtl } = useRtlContext();\n useTimeout(\n {\n callback: () => {\n if (!ignore) {\n replacePlaceholderMarkupWithKnowledges({ knowledges, isRtl });\n }\n },\n delay: 10,\n },\n [trigger],\n );\n};\n","import { wrapTablesWithDiv } from '../../utils/replacers/htmlReplacer';\nimport { useKnowledgePlaceholderReplacementEffect } from '../Modal/KnowledgeModal/useKnowledgePlaceholderReplacementEffect';\nimport { WithRenderDelay } from '../WithRenderDelay/WithRenderDelay';\nimport { replacePlaceholderImagesWithResponsivePictures } from '../../utils/replacers/imageReplacer';\nimport { RichText } from '../RichText/RichText';\nimport { ContentHeadline } from '../ContentContainer/ContentHeadline/ContentHeadline';\n\nexport const GrammarItem = ({ data }) => {\n const { name, text, knowledges } = data.content;\n const markup = wrapTablesWithDiv(text);\n\n useKnowledgePlaceholderReplacementEffect({ knowledges });\n\n return (\n \n \n
\n \n \n \n
\n );\n};\n","import gql from 'graphql-tag';\nimport { toLang } from '../utils/mappers/langMapper';\nimport { PageContainer } from '../components/Page/PageContainer';\nimport { WithGraphQLQueryHandling } from '../components/WithGraphQLQueryHandling/WithGraphQLQueryHandling';\nimport { knowledgesFragment } from '../components/Lesson/LessonKnowledge/LessonKnowledge';\nimport { GrammarItem } from '../components/GrammarItem/GrammarItem';\nimport { PageMetaData } from '../components/Page/PageMetaData';\nimport { PAGE_TYPES } from '../constants/pageTypes';\nimport {\n gtmDataLayerFragment,\n GtmScriptWithDataLayer,\n} from '../components/GoogleTagManager/GtmScriptWithDataLayer';\n\nexport const grammarPageQuery = gql`\n query GrammarPage($id: Int!, $lang: Language!) {\n content(id: $id, lang: $lang) {\n ... on Knowledge {\n name\n text\n }\n ...KnowledgeKnowledges\n ${gtmDataLayerFragment.partial()}\n }\n }\n ${knowledgesFragment.fragment({ type: 'Knowledge' })}\n`;\n\nexport const GrammarPage = ({ contentId, langCode }) => {\n const grammarPageQueryVariables = {\n id: +contentId,\n lang: toLang(langCode),\n };\n\n return (\n {name}
\n\n
\n \n
\n \n
\n )}\n {learningLevelMapper[dkLearningLevel]}
\n\n
\n );\n};\n\nexport const StyledGrammarOverviewHeader = styled(GrammarOverviewHeader)`\n display: block;\n width: 100%;\n background-color: ${colors.LG_GRAY_3};\n color: ${colors.LG_GRAY_9};\n\n .grammarOverviewHeader-wrapper {\n height: 320px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n h1 {\n padding: 125px 20px 0 20px;\n margin: 20px 0 10px;\n }\n\n p {\n padding: 0 20px 10px;\n margin: 0 0 10px;\n }\n }\n\n @media (min-width: ${resolutions.min.desktop}px) {\n margin-bottom: 20px;\n }\n\n @media (max-width: ${resolutions.max.mobile}px) {\n .grammarOverviewHeader-wrapper {\n height: 240px;\n\n h1 {\n padding: 78px 20px 0 20px;\n }\n }\n }\n`;\n","import { useRef } from 'react';\nimport styled from 'styled-components';\nimport { Link } from 'react-router-dom';\nimport { useToggle } from '../../../hooks/useToggle';\nimport { colors, resolutions } from '../../../utils/css';\nimport { StyledToggleableArrow as ToggleableArrow } from '../../ToggleableArrow/ToggleableArrow';\nimport { I18nText } from '../../I18n/I18nText';\nimport { getContentUrl } from '../../../utils/url/urlFactory';\n\nexport const AccordionItem = ({ title, contents, className }) => {\n const element = useRef(null);\n const [isOpen, { toggleOnClick }] = useToggle();\n const height = element.current ? element.current.scrollHeight : '0';\n return (\n \n
\n \n \n \n {contents.map(content => (\n \n
\n );\n};\n\nexport const StyledAccordionItem = styled(AccordionItem)`\n font-family: DWTheAntiquaB, Georgia, serif;\n font-weight: 400;\n font-size: 18px;\n line-height: 25px;\n text-align: left;\n\n display: flex;\n flex-direction: column;\n margin: 0px;\n\n .accordionItem-btn {\n display: flex;\n position: relative;\n width: 100%;\n padding: 20px;\n background-color: ${({ backgroundColor }) => backgroundColor};\n color: ${colors.LG_WHITE};\n cursor: pointer;\n align-items: center;\n border: none;\n :hover {\n background-color: ${colors.LG_GRAY_9};\n }\n :focus {\n color: ${colors.LG_BAHAMA_BLUE};\n text-decoration: underline;\n }\n }\n\n .toggleable-arrow {\n right: 18px;\n }\n`;\n\nexport const AccordionItemContent = styled.div`\n max-height: ${({ isOpen, height }) => (isOpen ? height : '1')}px;\n overflow: hidden;\n background-color: ${colors.LG_WHITE};\n transition: max-height 0.7s;\n\n .accordionItem-text {\n font-size: 18px;\n line-height: 25px;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: ${colors.LG_GRAY_12};\n\n a {\n color: ${colors.LG_GRAY_9};\n text-decoration: none;\n padding: 20px;\n display: block;\n &:hover {\n color: ${colors.LG_WHITE};\n background-color: ${colors.LG_GRAY_9};\n }\n }\n\n @media (max-width: ${resolutions.max.mobile}px) {\n font-size: 15px;\n line-height: 20px;\n }\n }\n`;\n","import { colors } from '../utils/css';\n\nexport const grammarOverviewColors = [\n `${colors.LG_GREEN_YELLOW}`,\n `${colors.DW_LIGHT_BLUE}`,\n `${colors.LG_ORANGE}`,\n `${colors.LG_RED}`,\n `${colors.LG_GREEN_YELLOW}`,\n `${colors.LG_PINK}`,\n `${colors.LG_ORANGE_DARK}`,\n `${colors.LG_ORANGE}`,\n `${colors.LG_RED_DARK}`,\n `${colors.DW_LIGHT_BLUE}`,\n `${colors.LG_GREEN}`,\n `${colors.LG_ORANGE}`,\n];\n","import styled from 'styled-components';\nimport { StyledAccordionItem as AccordionItem } from './AccordionItem/AccordionItem';\nimport { grammarOverviewColors } from '../../constants/grammarOverviewColors';\n\nexport const Accordion = ({ className, data }) => {\n return (\n \n \n {content.shortTitle}\n \n
\n ))}\n \n {data.map((accordionData, index) => (\n
\n );\n};\n\nexport const StyledAccordion = styled(Accordion)`\n display: block;\n`;\n","import { StyledGrammarOverviewHeader as GrammarOverviewHeader } from './GrammarOverviewHeader';\nimport { StyledAccordion as Accordion } from '../Accordion/Accordion';\n\nconst removeEmptyGrammars = data =>\n Object.values(data.grammarOverview).filter(\n item => Array.isArray(item.grammars) && item.grammars.length,\n );\n\nexport const GrammarOverview = data => (\n <>\n {lessonName}
\n\n \n
\n \n \n
\n \n \n
\n \n \n
\n - \n
\n
\n );\n};\n","export const subtitlesLabels = Object.freeze({\n GERMAN: 'Deutsch/Deutsch',\n ENGLISH: 'English',\n RUSSIAN: 'Русский',\n CHINESE: '中文',\n PORTUGUESE_BRAZIL: 'Português',\n ALBANIAN: 'Shqip',\n AMHARIC: 'አማርኛ',\n ARABIC: 'عربي',\n BENGALI: 'বাংলা',\n BOSNIAN: 'Bosanski',\n BULGARIAN: 'Български',\n DARI: 'دری',\n FRENCH: 'Français',\n GREEK: 'Ελληνικά',\n HAUSA: 'Hausa',\n HINDI: 'हिन्दी',\n INDONESIAN: 'Bahasa Indonesia',\n KISWAHILI: 'Kiswahili',\n CROATIAN: 'Hrvatski',\n MACEDONIAN: 'Македонски',\n PASHTO: 'پښتو',\n PERSIAN: 'فارسی',\n POLISH: 'Polski',\n ROMANIAN: 'Română',\n SERBIAN: 'Srpski',\n SPANISH: 'Español',\n TURKISH: 'Türkçe',\n UKRANIAN: 'Українська мова',\n URDU: 'اردو',\n});\n","const hasVideoPlaceholdersInRichText = ({ text = '' }) =>\n /\n
\n \n
\n \n \n
\n \n
\n {learningTargetHeadline}
\n \n\n
\n \n \n
\n \n
\n \n \n
\n \n To view this video please enable JavaScript, and consider upgrading to a web browser that{' '}\n
\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n {imageId && (\n playAudio(e)}\n style={{ cursor: 'pointer' }}\n role=\"button\"\n tabIndex={0}\n >\n \n
\n );\n};\n","/* eslint-disable no-nested-ternary */\nimport gql from 'graphql-tag';\nimport {\n MediaInputVideo,\n mediaInputVideoFragment,\n} from '../../MediaInput/MediaInputVideo/MediaInputVideo';\nimport {\n MediaInputImage,\n mediaInputImageFragment,\n} from '../../MediaInput/MediaInputImage/MediaInputImage';\nimport {\n MediaInputAudio,\n mediaInputAudioFragment,\n} from '../../MediaInput/MediaInputAudio/MediaInputAudio';\n\nexport const mediaInputChooserFragment = {\n name: 'MediaInputChooser',\n fragment({ type }) {\n return gql`fragment ${type}${this.name} on ${type} {\n ...${type}MediaInputImage\n ...${type}MediaInputAudio\n ...${type}MediaInputVideo\n }\n ${mediaInputImageFragment.fragment({ type })}\n ${mediaInputAudioFragment.fragment({ type })}\n ${mediaInputVideoFragment.fragment({ type })}\n `;\n },\n};\n\nexport const MediaInputChooser = ({ data }) => {\n const { videos, audios } = data.content;\n\n const lessonInput =\n videos.length > 0 ? (\n \n
\n ) : null;\n\n return (\n \n
\n );\n};\n","import { useParams } from 'react-router';\nimport gql from 'graphql-tag';\nimport {\n LessonContentDescription,\n lessonContentDescriptionFragment,\n} from '../LessonContentDescription/LessonContentDescription';\nimport {\n MediaInputChooser,\n mediaInputChooserFragment,\n} from '../MediaInputChooser/MediaInputChooser';\nimport { ImageOGMetaData } from '../../ImageOGMetaData/ImageOGMetaData';\nimport { knowledgesFragment } from '../LessonKnowledge/LessonKnowledge';\nimport { WithGraphQLQueryHandling } from '../../WithGraphQLQueryHandling/WithGraphQLQueryHandling';\nimport { metaDataFragment, PageMetaData } from '../../Page/PageMetaData';\nimport { PAGE_TYPES } from '../../../constants/pageTypes';\nimport {\n gtmDataLayerFragment,\n GtmScriptWithDataLayer,\n} from '../../GoogleTagManager/GtmScriptWithDataLayer';\n\nexport const lessonInformationQuery = gql`\n query LessonInformation($lessonId: Int!, $lang: Language!) {\n content(id: $lessonId, lang: $lang) {\n ... on Lesson {\n ...LessonMediaInputChooser\n ...LessonContentDescription\n ...LessonKnowledges\n ...${metaDataFragment.name}\n ${gtmDataLayerFragment.partial()}\n }\n }\n }\n ${mediaInputChooserFragment.fragment({ type: 'Lesson' })}\n ${lessonContentDescriptionFragment}\n ${knowledgesFragment.fragment({ type: 'Lesson' })}\n ${metaDataFragment.fragment({ type: 'Lesson' })}\n`;\n\nexport const LessonInformation = ({\n lessonLang,\n firstExercisePath,\n isFinalTest,\n courseName,\n isContentDescriptionHintVisible = false,\n ogImage,\n}) => {\n const { lessonId } = useParams();\n\n const lessonInformationQueryVariables = {\n lessonId: +lessonId,\n lang: lessonLang,\n };\n\n return (\n \n
\n {lessonInput}
\n \n
\n );\n};\n","import classnames from 'classnames';\nimport { I18nText } from '../../I18n/I18nText';\n\nexport const ContentNavTitle = ({ title, top, bottom }) => (\n {isRtlLang ? rtlStats : ltrStats}
\n\n
\n \n);\n","import gql from 'graphql-tag';\nimport { ContentHeadline } from '../../../ContentContainer/ContentHeadline/ContentHeadline';\n\nexport const lessonExerciseHeadlineFragment = {\n name: 'LessonExerciseHeadline',\n fragment() {\n return gql`fragment ${this.name} on Exercise {\n name\n description\n }\n `;\n },\n};\n\nexport const LessonExerciseHeadline = ({ data }) => {\n const { name, description } = data.content;\n return (\n \n \n
\n {name}
\n\n \n
\n));\n","import { forwardRef } from 'react';\nimport { LessonExerciseHiddenAudio } from './LessonExerciseHiddenAudio';\n\nexport const LessonExerciseSoundFailureHiddenAudio = forwardRef((_, ref) => (\n \n
\n );\n","import { useContext } from 'react';\nimport { AudioContext } from '../context/AudioContext';\n\nexport const useAudio = () => {\n const [\n audiosRefArray,\n setAudiosRefArray,\n wrongAnswerAudioRef,\n correctAnswerAudioRef,\n ] = useContext(AudioContext);\n\n const stopOtherAudios = index => {\n const currentAudio = audiosRefArray[index];\n audiosRefArray.forEach(audio => {\n if (audio !== currentAudio) {\n audio.current.pause();\n // eslint-disable-next-line fp/no-mutation,no-param-reassign\n audio.current.currentTime = 0;\n }\n });\n };\n const playAudio = (e, ref) => {\n e.preventDefault();\n const index = audiosRefArray.indexOf(ref);\n stopOtherAudios(index);\n audiosRefArray[index].current.play();\n };\n\n const addRef = ref => {\n // eslint-disable-next-line fp/no-mutating-methods\n audiosRefArray.push(ref);\n setAudiosRefArray(audiosRefArray);\n };\n\n const playWrongDefaultAudioFeedBack = () => {\n wrongAnswerAudioRef.current.play();\n };\n\n const playCorrectDefaultAudioFeedBack = () => {\n correctAnswerAudioRef.current.play();\n };\n\n return {\n playAudio,\n addRef,\n playWrongDefaultAudioFeedBack,\n playCorrectDefaultAudioFeedBack,\n };\n};\n","/* eslint-disable jsx-a11y/role-supports-aria-props */\nimport { useEffect, useRef, useState } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useAudio } from '../../../../../hooks/useAudio';\nimport { useTranslation } from '../../../../../hooks/useTranslation';\nimport { useFrontendConfig } from '../../../../../hooks/useFrontendConfig';\n\nconst LessonExerciseQuestionAudioGlobalStyles = createGlobalStyle` \n /* @noflip */\n .alwaysLtr {\n text-align: left;\n direction: ltr;\n }\n`;\n\nexport const LessonExerciseQuestionAudio = ({ audio, inquiryText }) => {\n const [isPlaying, setIsPlaying] = useState(false);\n const [hasEnded, setHasEnded] = useState(false);\n\n const playAudioLabel = useTranslation('exercise.playAudio');\n const { target: answerAudio } = audio || {};\n const { mp3Src: audioUrl, mainContentImage } = answerAudio || {};\n\n const audioRef = useRef();\n const { addRef, playAudio } = useAudio();\n\n const { imageBasePath } = useFrontendConfig();\n\n useEffect(() => {\n addRef(audioRef);\n }, [addRef]);\n\n const handleOnPlaying = () => {\n setIsPlaying(true);\n };\n\n const handleOnEnded = () => {\n setIsPlaying(false);\n setHasEnded(true);\n };\n\n const handleOnPaused = () => {\n setIsPlaying(false);\n };\n\n const getBubbleAudioLabel = () => {\n if (isPlaying) return 'playing';\n\n if (hasEnded) return 'ending';\n\n return '';\n };\n\n const audioLabel = inquiryText || playAudioLabel;\n return (\n <>\n \n
\n \n
\n {audioLabel}
\n \n \n {mainContentImage && (\n \n
\n )}\n \n );\n};\n","import { createGlobalStyle } from 'styled-components';\n\nexport const LessonExerciseQuestionTextGlobalStyles = createGlobalStyle` \n /* @noflip */\n .alwaysLtr {\n text-align: left;\n direction: ltr;\n }\n`;\n\nexport const LessonExerciseQuestionText = ({ inquiryText }) => (\n <>\n {inquiryText}
\n \n);\n","import { LessonExerciseQuestionText } from './LessonExerciseQuestionText';\nimport { useFrontendConfig } from '../../../../../hooks/useFrontendConfig';\n\nexport const LessonExerciseQuestionImage = ({ inquiryText, mainContentImage }) => {\n const { id, name } = mainContentImage;\n const { imageBasePath } = useFrontendConfig();\n return (\n <>\n \n 
\n
\n \n );\n};\n","import { LessonExerciseQuestionText } from './LessonExerciseQuestionText';\nimport { MediaInputVideo } from '../../../../MediaInput/MediaInputVideo/MediaInputVideo';\n\nexport const LessonExerciseQuestionVideo = ({ inquiryText, videos }) => (\n <>\n \n \n
\n \n);\n","export const findQuestionAudio = audios => audios.find(audio => audio.mainContent);\n\nexport const findFeedbackAudio = (isSolutionAudioFallbackMode, audios) => {\n const feedbackAudio = audios.find(audio => !audio.mainContent);\n return feedbackAudio || (isSolutionAudioFallbackMode ? findQuestionAudio(audios) : undefined);\n};\n","export const QUESTION_TYPES = Object.freeze({\n TEXT: 'TEXT',\n IMAGE: 'IMAGE',\n AUDIO: 'AUDIO',\n VIDEO: 'VIDEO',\n});\n","import gql from 'graphql-tag';\nimport { LessonExerciseQuestionAudio } from './QuestionTypes/LessonExerciseQuestionAudio';\nimport { LessonExerciseQuestionImage } from './QuestionTypes/LessonExerciseQuestionImage';\nimport { LessonExerciseQuestionText } from './QuestionTypes/LessonExerciseQuestionText';\nimport { LessonExerciseQuestionVideo } from './QuestionTypes/LessonExerciseQuestionVideo';\nimport { findQuestionAudio } from '../../../../utils/audioUtils';\nimport { QUESTION_TYPES } from './QuestionTypes/questionTypes';\nimport { mediaInputVideoFragment } from '../../../MediaInput/MediaInputVideo/MediaInputVideo';\n\nexport const lessonExerciseQuestionFragment = {\n name: 'LessonExerciseQuestion',\n fragment() {\n return gql`fragment ${this.name} on Inquiry {\n inquiryText\n mainContentImage {\n id\n name\n }\n audios: contentLinks(targetTypes: [AUDIO]) {\n id\n mainContent\n target {\n ...on Audio {\n mp3Src\n mainContentImage {\n imageId: id\n imageName: name\n }\n }\n }\n }\n ...Inquiry${mediaInputVideoFragment.name}\n } \n ${mediaInputVideoFragment.fragment({ type: 'Inquiry' })}\n `;\n },\n};\n\nexport const exerciseQuestionTypeSelector = ({ inquiry }) => {\n const { videos, audios, mainContentImage } = inquiry;\n if (mainContentImage) {\n return QUESTION_TYPES.IMAGE;\n }\n if (videos.length > 0) {\n return QUESTION_TYPES.VIDEO;\n }\n if (findQuestionAudio(audios)) {\n return QUESTION_TYPES.AUDIO;\n }\n return QUESTION_TYPES.TEXT;\n};\n\nexport const LessonExerciseQuestion = ({ inquiry, useSubInquiryTextAsLabel = false }) => {\n const { inquiryText, videos, audios, mainContentImage, subInquiries } = inquiry;\n const questionType = exerciseQuestionTypeSelector({ inquiry });\n\n const getLabelText = () => {\n if (inquiryText) return inquiryText;\n if (subInquiries && useSubInquiryTextAsLabel) return subInquiries[0].subInquiryText;\n return '';\n };\n\n const labelText = getLabelText(inquiryText, subInquiries);\n const questionAudio = findQuestionAudio(audios);\n\n switch (questionType) {\n case QUESTION_TYPES.IMAGE:\n return \n \n
\n);\nexport const StyledButtonTemplate = styled(ButtonTemplate)`\n width: ${props => (props.fullWidth ? '100%' : '40%')};\n\n button {\n border-radius: 25px;\n width: 100%;\n height: 38px;\n background: ${colors.LG_WHITE};\n color: ${colors.LG_BLUE_1};\n border: 1px solid ${colors.LG_BLUE_1};\n transition: 0.2s;\n outline: none;\n }\n`;\n","import styled from 'styled-components';\nimport { StyledButtonTemplate } from './ButtonTemplate';\nimport { colors } from '../../utils/css';\n\nexport const SolveButton = ({ className, isDisabled, handleClick, fullWidth, children }) => (\n \n \n \n \n \n
\n);\n\nexport const StyledSolveCheckButton = styled(SolveCheckButton)`\n /* @noflip */\n direction: ltr;\n display: flex;\n margin: auto;\n justify-content: space-between;\n padding: 20px 0;\n margin-bottom: 50px;\n width: 770px;\n > * {\n width: 376px;\n }\n\n @media (max-width: ${resolutions.max.tablet}px) {\n width: 79.825%;\n padding: 20px 20px;\n > * {\n width: 48%;\n }\n }\n\n @media (max-width: ${resolutions.max.mobile}px) {\n width: 97%;\n }\n`;\n","export const placeholderConfig = [\n { placeholder: '#p#', size: 'medium', maxLength: 15 },\n { placeholder: '#ps#', size: 'small', maxLength: 7 },\n { placeholder: '#pm#', size: 'medium', maxLength: 15 },\n { placeholder: '#pl#', size: 'full', maxLength: null },\n];\n\nexport const createSingleSentenceAnswerContent = (subInquiries, arrayJoinString) => {\n const sentences = subInquiries.map(subInquiry => subInquiry.subInquiryText);\n return sentences.join(arrayJoinString);\n};\n\nexport const cleanupAndAddPlaceholderComponents = answertext => {\n // eslint-disable-next-line fp/no-let\n let answerWithReplacePlaceholders = answertext;\n\n const replaceInString = config => {\n // eslint-disable-next-line fp/no-mutation\n answerWithReplacePlaceholders = answerWithReplacePlaceholders.replace(\n new RegExp(config.placeholder, 'g'),\n `${config.size}`,\n );\n };\n\n placeholderConfig.forEach(replaceInString);\n return answerWithReplacePlaceholders;\n};\n","export const INQUIRY_STATE = Object.freeze({\n INITIAL: 'INITIAL',\n WRONG: 'WRONG',\n CORRECT: 'CORRECT',\n SOLVED: 'SOLVED',\n});\n","/* eslint-disable jsx-a11y/anchor-is-valid,jsx-a11y/aria-role,comma-dangle */\nimport { useState } from 'react';\nimport classnames from 'classnames';\nimport { INQUIRY_STATE } from '../workflow/inquiryState';\n\nexport const ClozePulldown = ({\n index,\n pulldownData,\n inquiryState,\n checkEntry,\n onHandleItemSelected,\n isDisabled,\n}) => {\n const [isToggled, setIsToggled] = useState(false);\n const getInputClassName = () => {\n switch (inquiryState) {\n case INQUIRY_STATE.CORRECT:\n case INQUIRY_STATE.WRONG:\n return checkEntry(pulldownData) ? 'correct-input' : 'wrong-input';\n case INQUIRY_STATE.SOLVED:\n return 'solved-input';\n default:\n return '';\n }\n };\n\n const onPulldownClicked = () => {\n if (!isDisabled) {\n setIsToggled(!isToggled);\n }\n };\n\n return (\n - \n {pulldownData.alternatives.map((alternative, altIndex) => (\n
- \n
\n
\n )\n );\n};\n","import styled from 'styled-components';\n\nexport const StyledContainerTextContent = styled('div')`\n display: grid;\n\n br {\n content: '';\n display: block;\n height: 10px;\n }\n`;\n","const MULTIPLE_WHITESPACES_REGEX = /\\s\\s+/g;\nconst MINUS_CHARACTERS_REGEX = /[\\u002D\\u2010\\u2027\\u2011\\u2013\\u2014\\u2212]/g;\nconst SPECIAL_CHARACTERS = ',\\\\.!\\\\?:;\\\\-';\nconst WHITESPACE_BEFORE_SPECIAL_REGEX = new RegExp(` ([${SPECIAL_CHARACTERS}])`, 'g');\nconst WHITESPACE_AFTER_SPECIAL_REGEX = new RegExp(`([${SPECIAL_CHARACTERS}]) `, 'g');\n\nexport const normalizeText = str => {\n if (!str) {\n return str;\n }\n return str\n .trim()\n .replace(MULTIPLE_WHITESPACES_REGEX, ' ')\n .replace(MINUS_CHARACTERS_REGEX, '-')\n .replace(WHITESPACE_BEFORE_SPECIAL_REGEX, '$1')\n .replace(WHITESPACE_AFTER_SPECIAL_REGEX, '$1');\n};\n\nexport const isNormalizedTextEqual = (str1, str2) => {\n return normalizeText(str1) === normalizeText(str2);\n};\n","/* eslint-disable jsx-a11y/anchor-is-valid,jsx-a11y/aria-role */\nimport { useState, useEffect } from 'react';\nimport classnames from 'classnames';\nimport { createGlobalStyle } from 'styled-components';\nimport {\n cleanupAndAddPlaceholderComponents,\n createSingleSentenceAnswerContent,\n} from '../clozeExerciseUtils';\nimport { ExerciseRichText } from '../ExerciseRichText';\nimport { StyledContainerTextContent } from './ContainerTextContent';\nimport { INQUIRY_STATE } from '../../workflow/inquiryState';\nimport { shuffle } from '../../../../../utils/commons';\nimport { isNormalizedTextEqual } from '../../utils/exerciseUtils';\n\nconst ChooseAnswerGlobalStyles = createGlobalStyle` \n /* @noflip */\n .alwaysLtr {\n text-align: left;\n direction: ltr;\n }\n`;\n\nexport const ChooseAnswer = ({ inquiry, onChange, inquiryState, isDisabled }) => {\n const { subInquiries, clozeLayoutType, id } = inquiry;\n\n const scopeClassName = `inquiry_${id}`;\n\n const initialClozeChooseData = subInquiries.map(subInquiry => {\n return {\n ...subInquiry,\n selectedAnswer: undefined,\n };\n });\n const initialSelectableAnswers = subInquiries.map(subInquiry => ({\n text: subInquiry.alternatives[0].alternativeText,\n id: subInquiry.alternatives[0].id,\n }));\n\n const [clozeChooseData, setClozeChooseData] = useState(initialClozeChooseData);\n const [selectableAnswers, setSelectableAnswers] = useState(initialSelectableAnswers);\n\n const setSelectedAnswer = answer => {\n // eslint-disable-next-line fp/no-let\n let updated = false;\n const newClozeData = clozeChooseData.map(clozeData => {\n if (!clozeData.selectedAnswer && !updated) {\n // eslint-disable-next-line fp/no-mutation\n updated = true;\n return { ...clozeData, selectedAnswer: answer };\n }\n return { ...clozeData };\n });\n setClozeChooseData(newClozeData);\n };\n\n const removeSelectedAnswer = answer => {\n const newClozeData = clozeChooseData.map(clozeData => {\n if (clozeData.selectedAnswer && clozeData.selectedAnswer.id === answer.id) {\n return { ...clozeData, selectedAnswer: undefined };\n }\n return { ...clozeData };\n });\n setClozeChooseData(newClozeData);\n };\n\n const removeSelectableAnswer = answer => {\n const newSelectableAnswers = selectableAnswers.filter(\n selectableAnswer => selectableAnswer.id !== answer.id,\n );\n setSelectableAnswers(newSelectableAnswers);\n };\n\n const addSelectableAnswer = answer => {\n const newSelectableAnswers = [answer, ...selectableAnswers];\n setSelectableAnswers(newSelectableAnswers);\n };\n\n const handleAnswerClicked = (e, answerText, answerId, isSelectedAnswer) => {\n const answer = { text: answerText, id: +answerId };\n e.preventDefault();\n if (!isDisabled) {\n if (isSelectedAnswer) {\n removeSelectedAnswer(answer);\n addSelectableAnswer(answer);\n } else {\n setSelectedAnswer(answer);\n removeSelectableAnswer(answer);\n }\n }\n };\n\n const checkEntry = (answerText, index) => {\n return clozeChooseData[index].alternatives.some(\n alternative =>\n isNormalizedTextEqual(answerText, alternative.alternativeText) && alternative.isCorrect,\n );\n };\n useEffect(() => {\n if (inquiryState === INQUIRY_STATE.SOLVED) {\n setClozeChooseData(\n subInquiries.map(subInquiry => ({\n ...subInquiry,\n selectedAnswer: {\n text: subInquiry.alternatives[0].alternativeText,\n id: subInquiry.alternatives[0].id,\n },\n })),\n );\n setSelectableAnswers([]);\n }\n }, [inquiryState, subInquiries]);\n useEffect(() => {\n if (inquiryState !== INQUIRY_STATE.SOLVED) {\n onChange(\n clozeChooseData.filter((data, index) =>\n clozeChooseData[index].alternatives.some(\n alternative =>\n data.selectedAnswer &&\n isNormalizedTextEqual(data.selectedAnswer.text, alternative.alternativeText) &&\n alternative.isCorrect,\n ),\n ).length,\n );\n }\n }, [inquiryState, onChange, clozeChooseData]);\n useEffect(() => {\n setSelectableAnswers(answers =>\n shuffle(answers.slice(0)).map(answer => {\n return {\n ...answer,\n };\n }),\n );\n }, []);\n\n const EmptyPlaceholder = () => ;\n const FilledPlaceholder = ({ selectedAnswer, index }) => (\n {answerLink(selectedAnswer, index, true)}
\n );\n\n const PlaceHolder = ({ clozeData, index }) => {\n const { selectedAnswer } = clozeData;\n return (\n <>\n {selectedAnswer ? (\n \n \n \n \n
\n );\n\n const singleLinePartialComponent = answerContent => (\n \n \n \n
\n );\n const getAnswerClasses = (answerText, index, isSelectedAnswer) => {\n const defaultClasses = 'btn answer-sorting-btn alwaysLtr';\n if (!isSelectedAnswer) {\n return defaultClasses;\n }\n return classnames(\n defaultClasses,\n (inquiryState === INQUIRY_STATE.CORRECT || inquiryState === INQUIRY_STATE.WRONG) &&\n checkEntry(answerText, index)\n ? 'correct-input'\n : '',\n inquiryState === INQUIRY_STATE.WRONG && !checkEntry(answerText, index) ? 'wrong-input' : '',\n inquiryState === INQUIRY_STATE.SOLVED ? 'solved-input' : '',\n );\n };\n const answerLink = (selectableAnswer, index, isSelectedAnswer) => (\n ')),\n },\n };\n\n const selectedClozeLayoutConfig = clozeLayoutTypeConfig[clozeLayoutType];\n\n if (selectedClozeLayoutConfig == null) {\n return null;\n }\n\n return (\n <>\n
\n {selectedClozeLayoutConfig.cmp(selectedClozeLayoutConfig.answerContent())}\n
\n \n {selectableAnswers.map((selectableAnswer, index) =>\n answerLink(selectableAnswer, index, false, false),\n )}\n
\n \n );\n};\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 2,\n height: 2,\n x: 2,\n y: 6\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 2,\n height: 2,\n x: 5,\n y: 6\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 2,\n height: 2,\n x: 8,\n y: 6\n});\n\nvar _ref5 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"m 11,6 3,0 0,5 -2,0 0,-3 -1,0 z\"\n});\n\nvar _ref6 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 2,\n height: 2,\n x: 12,\n y: 12\n});\n\nvar _ref7 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 6,\n height: 2,\n x: 5,\n y: 12\n});\n\nvar _ref8 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 2,\n height: 2,\n x: 9,\n y: 9\n});\n\nvar _ref9 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 2,\n height: 2,\n x: 6,\n y: 9\n});\n\nvar _ref10 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 2,\n height: 2,\n x: 2,\n y: 12\n});\n\nvar _ref11 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 3,\n height: 2,\n x: 2,\n y: 9\n});\n\nfunction SvgKeyboard(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 16,\n height: 16,\n style: {\n fill: \"#888\"\n },\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, /*#__PURE__*/React.createElement(\"g\", null, /*#__PURE__*/React.createElement(\"path\", {\n style: {\n fill: \"none\",\n stroke: \"#888\"\n },\n d: \"M 0.5,4.5 15.5,4.5 15.5,15.5 0.5,15.5 Z\"\n }), _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgKeyboard);\nexport default __webpack_public_path__ + \"static/media/keyboard.3a060932.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components';\nimport { ReactComponent as KeyboardIcon } from '../../../../assets/svg/keyboard.svg';\nimport { resolutions } from '../../../../utils/css';\n\nexport const StyledKeyboardIcon = styled(KeyboardIcon)`\n display: none;\n\n @media (min-width: ${resolutions.max.tabletLandscape}px) {\n display: block;\n .placeholder-cloze > & {\n display: inline-block;\n }\n }\n`;\n","import styled, { css } from 'styled-components';\nimport { forwardRef } from 'react';\nimport { INQUIRY_STATE } from '../../Lesson/LessonExercise/workflow/inquiryState';\nimport { useTranslation } from '../../../hooks/useTranslation';\n\nexport const TextAreaInput = forwardRef(\n (\n { inquiryState, input, isDisabled, onChange, onKeyPress, isPlaceholderDisabled = false },\n ref,\n ) => {\n const translatedPlaceholder = useTranslation('exercise.typeHere');\n\n const getBorderColor = () => {\n switch (inquiryState) {\n case INQUIRY_STATE.WRONG:\n return '#be232d';\n case INQUIRY_STATE.CORRECT:\n return '#82b905';\n case INQUIRY_STATE.SOLVED:\n case INQUIRY_STATE.INITIAL:\n default:\n return '#d1c9c2';\n }\n };\n\n const onTextAreaKeyPress = e => {\n if (onKeyPress) {\n onKeyPress(e);\n }\n };\n\n return (\n \n \n {!isTextArea && (\n false,\n onKeyPress: onInputKeyPress,\n isPlaceholderDisabled: true,\n ref: textAreaRef,\n }}\n />\n )}\n
\n \n
\n );\n};\n","import { useState } from 'react';\nimport { INQUIRY_STATE } from './inquiryState';\nimport { useExerciseProgress } from './ExerciseProgress';\n\nexport const useInquiryHandling = ({ inquiryId, achievableScore, subInquiries = 1 }) => {\n const [isSolveButtonDisabled, setSolveButtonDisabled] = useState(true);\n const [isCheckButtonDisabled, setCheckButtonDisabled] = useState(false);\n const [isMarkedAsDone, setMarkedAsDone] = useState(false);\n const [wrongAnswerCount, setWrongAnswerCount] = useState(0);\n const [inquiryState, setInquiryState] = useState(INQUIRY_STATE.INITIAL);\n\n const { addDoneInquiry, exerciseProgress } = useExerciseProgress();\n const { isFromPlacementCourse } = exerciseProgress;\n\n const isDisabled = () => {\n return (\n inquiryState === INQUIRY_STATE.CORRECT ||\n inquiryState === INQUIRY_STATE.SOLVED ||\n (inquiryState === INQUIRY_STATE.WRONG && isFromPlacementCourse)\n );\n };\n\n const disableAllButtons = () => {\n setCheckButtonDisabled(true);\n setSolveButtonDisabled(true);\n };\n\n const checkAndMarkAsDone = ({ score = 0 }) => {\n if (!isMarkedAsDone) {\n addDoneInquiry({ inquiryId, achievableScore, score });\n setMarkedAsDone(true);\n }\n };\n\n const handleCorrectAnswer = () => {\n setInquiryState(INQUIRY_STATE.CORRECT);\n checkAndMarkAsDone({ score: achievableScore });\n disableAllButtons();\n };\n\n const handleWrongAnswer = (correctSubInquiries = 0) => {\n setInquiryState(INQUIRY_STATE.WRONG);\n checkAndMarkAsDone({ score: (achievableScore * correctSubInquiries) / subInquiries });\n setWrongAnswerCount(wrongAnswerCount + 1);\n if (isFromPlacementCourse) setCheckButtonDisabled(true);\n setSolveButtonDisabled(false);\n };\n\n const handleSolved = () => {\n setInquiryState(INQUIRY_STATE.SOLVED);\n checkAndMarkAsDone({});\n disableAllButtons();\n };\n\n return {\n isSolveButtonDisabled,\n isCheckButtonDisabled,\n inquiryState,\n isDisabled,\n isFromPlacementCourse,\n handleCorrectAnswer,\n handleWrongAnswer,\n handleSolved,\n };\n};\n","import { useRef, useState } from 'react';\nimport { useParams } from 'react-router';\nimport {\n exerciseQuestionTypeSelector,\n LessonExerciseQuestion,\n} from '../LessonExerciseQuestion/LessonExerciseQuestion';\nimport { StyledSolveCheckButton } from '../../../SolveCheckButton/SolveCheckButton';\nimport { StyledPulldownAnswer } from './AnswerTypes/PulldownAnswer';\nimport { QUESTION_TYPES } from '../LessonExerciseQuestion/QuestionTypes/questionTypes';\nimport { LessonExerciseHint } from '../LessonExerciseHint/LessonExerciseHint';\nimport { ChooseAnswer } from './AnswerTypes/ChooseAnswer';\nimport { WritingAnswer } from './AnswerTypes/WritingAnswer';\nimport { useAudio } from '../../../../hooks/useAudio';\nimport { useInquiryHandling } from '../workflow/useInquiryHandling';\nimport { findFeedbackAudio } from '../../../../utils/audioUtils';\nimport { LessonExerciseHiddenAudio } from '../LessonExerciseHiddenAudio/LessonExerciseHiddenAudio';\n\nexport const ClozeExerciseRow = ({ inquiry, initiallyCorrectInquiries = 0 }) => {\n const { exerciseId } = useParams();\n const {\n audios,\n inquiryDescription,\n id: inquiryId,\n learningMetaInfo: { achievableScore },\n mainContentImage,\n } = inquiry;\n const { clozeType } = inquiry.subInquiries[0];\n\n const [correctSubInquiries, setCorrectSubInquiries] = useState(initiallyCorrectInquiries);\n const { playWrongDefaultAudioFeedBack, playCorrectDefaultAudioFeedBack } = useAudio();\n const isSolutionAudioFallbackMode = Boolean(mainContentImage);\n const feedbackAudio = findFeedbackAudio(isSolutionAudioFallbackMode, audios);\n const { target: answerAudio } = feedbackAudio || {};\n const { mp3Src: feedbackAudioUrl } = answerAudio || {};\n const feedbackAudioRef = useRef();\n\n const {\n isSolveButtonDisabled,\n isCheckButtonDisabled,\n handleCorrectAnswer,\n handleWrongAnswer,\n handleSolved,\n inquiryState,\n isDisabled,\n } = useInquiryHandling({ inquiryId, achievableScore, subInquiries: inquiry.subInquiries.length });\n\n const onChange = changeResult => {\n setCorrectSubInquiries(changeResult);\n };\n\n const onHandleSolveButtonClicked = () => {\n handleSolved();\n playCorrectAudioFeedBack();\n };\n\n const onHandleCheckButtonClicked = () => {\n if (correctSubInquiries === inquiry.subInquiries.length) {\n handleCorrectAnswer();\n playCorrectAudioFeedBack();\n } else {\n handleWrongAnswer(correctSubInquiries);\n playWrongDefaultAudioFeedBack();\n }\n };\n const playCorrectAudioFeedBack = () => {\n if (feedbackAudioUrl) {\n feedbackAudioRef.current.play();\n } else {\n playCorrectDefaultAudioFeedBack();\n }\n };\n const getAnswerComponent = () => {\n switch (clozeType) {\n case 'PULLDOWN':\n return (\n \n
\n \n
\n \n
\n );\n\n return (\n \n
\n \n
\n );\n};\n","import gql from 'graphql-tag';\nimport { AudioProvider } from '../../../../context/AudioContext';\nimport { LessonExerciseTextInput } from '../LessonExerciseTextInput/LessonExerciseTextInput';\nimport { ClozeExerciseRow } from './ClozeExerciseRow';\n\nexport const clozeExerciseFragment = {\n name: 'clozeExercise',\n fragment() {\n return gql`fragment ${this.name} on Inquiry {\n text\n clozeLayoutType\n subInquiries {\n clozeType\n }\n } \n `;\n },\n};\n\nexport const ClozeExercise = ({ data }) => {\n const { inputText, inquiries } = data.content;\n\n return (\n \n {questionType === QUESTION_TYPES.TEXT && clozeType !== 'CHOOSE' ? (\n <>\n
\n \n
\n {lessonExerciseHintPartial}\n \n ) : (\n <>\n \n
\n {answerComponent}
\n {lessonExerciseHintPartial}\n \n )}\n \n
\n \n onCheckClicked()}\n handleSolveClicked={() => onSolveClicked()}\n isSolveButtonDisabled={isSolveButtonDisabled}\n isCheckButtonDisabled={isCheckButtonDisabled}\n />\n
\n );\n};\n","import { DictationExerciseRow } from './DictationExerciseRow';\nimport { AudioProvider } from '../../../../context/AudioContext';\n\nexport const DictationExercise = ({ data }) => {\n const { inquiries } = data.content;\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n onSolveClicked(e)}\n handleCheckClicked={e => onCheckClicked(e)}\n />\n
\n );\n};\n","/* eslint-disable jsx-a11y/media-has-caption */\nimport { useParams } from 'react-router';\nimport { ManyToManyQuestionRow } from './ManyToManyQuestionRow/ManyToManyQuestionRow';\nimport { LessonExerciseTextInput } from '../LessonExerciseTextInput/LessonExerciseTextInput';\nimport { AudioProvider } from '../../../../context/AudioContext';\n\nexport const ManyToManyExercise = ({ data }) => {\n const { exerciseId } = useParams();\n const { inputText, inquiries } = data.content;\n\n return (\n \n
\n {inquiryDescription && (\n {inquiryText}
\n \n
\n \n
\n \n {state.leftAnswers.map(answer => (\n onAnswerClicked(e, answer.id, true)}\n />\n ))}\n
\n \n {state.rightAnswers.map(answer => (\n onAnswerClicked(e, answer.alternatives[0].id, false)}\n />\n ))}\n
\n \n
\n \n {state.leftMatchedAnswers.map((matchedAnswer, index) => (\n onMatchedAnswerClicked(e, index)}\n />\n ))}\n
\n \n {state.rightMatchedAnswers.map((matchedAnswer, index) => (\n onMatchedAnswerClicked(e, index)}\n />\n ))}\n
\n \n
\n )}\n \n {inquiries.map(inquiry => (\n
\n \n {answer.alternativeText}\n
\n \n );\n});\n","/* eslint-disable jsx-a11y/role-supports-aria-props */\nimport { forwardRef } from 'react';\nimport { ANSWER_STATE } from '../answerState';\nimport { useFrontendConfig } from '../../../../../hooks/useFrontendConfig';\n\nexport const LessonExerciseImageAnswer = forwardRef(({ answer, handleAnswerClicked }, ref) => {\n const { imageBasePath } = useFrontendConfig();\n\n const assignAnswerClass = ({ answerState }) => {\n switch (answerState) {\n case ANSWER_STATE.INITIAL:\n return '';\n case ANSWER_STATE.SELECTED:\n return 'selected-image';\n case ANSWER_STATE.CORRECT:\n return 'correct-image';\n case ANSWER_STATE.WRONG:\n return 'wrong-image';\n case ANSWER_STATE.SOLVED:\n return 'solved-image';\n default:\n // eslint-disable-next-line fp/no-throw\n throw new Error('invalid answerState');\n }\n };\n\n return (\n \n
\n \n
\n \n
\n \n {answers.map((answer, index) => (\n
\n \n
\n {answerLabel}
\n \n \n );\n};\n","import { I18nText } from '../../../../I18n/I18nText';\nimport { LessonExerciseQuestionAudio } from '../../LessonExerciseQuestion/QuestionTypes/LessonExerciseQuestionAudio';\nimport { findFeedbackAudio } from '../../../../../utils/audioUtils';\nimport { useTranslation } from '../../../../../hooks/useTranslation';\nimport { useRtlContext } from '../../../../../hooks/useRtl';\n\nexport const SelfAssessmentQuestion = ({ audios, mainContentImage }) => {\n const { isRtl } = useRtlContext();\n\n const howWasItWithOnlyFeedbackAudio = useTranslation('exercise.howWasItWithOnlyFeedbackAudio');\n const howWasItLabel = useTranslation('exercise.howWasIt');\n\n const isSolutionAudioFallbackMode = Boolean(mainContentImage);\n const feedbackAudio = findFeedbackAudio(isSolutionAudioFallbackMode, audios);\n\n const feedbackAudioUrl = feedbackAudio ? feedbackAudio.target.mp3Src : null;\n\n const lessonExerciseQuestionAudio = () => {\n const hasOnlyFeedbackAudio =\n feedbackAudioUrl.includes('Loesungsaudio.mp3') && audios.length === 1;\n const audioLabel = hasOnlyFeedbackAudio ? howWasItWithOnlyFeedbackAudio : howWasItLabel;\n return \n {feedbackAudioUrl ? (\n lessonExerciseQuestionAudio()\n ) : (\n
\n );\n};\n","import { useState } from 'react';\nimport { SelfAssessmentAnswer } from './SelfAssessmentAnswer';\nimport { SelfAssessmentQuestion } from './SelfAssessmentQuestion';\nimport { useInquiryHandling } from '../../workflow/useInquiryHandling';\n\nexport const SelfAssessment = ({ inquiry }) => {\n const {\n audios,\n mainContentImage,\n learningMetaInfo: { achievableScore },\n id: inquiryId,\n } = inquiry;\n const fixedAnswers = [\n { label: 'exercise.02', index: 1, isSelected: false },\n { label: 'exercise.01', index: 0, isSelected: false },\n ];\n\n const { handleCorrectAnswer, handleWrongAnswer } = useInquiryHandling({\n inquiryId,\n achievableScore,\n });\n\n const [answersFrozen, setAnswersFrozen] = useState(false);\n const [answers, setSelected] = useState(fixedAnswers);\n\n const updateSelected = selectedIndex => {\n const updatedAnswers = answers.map((answer, index) => {\n return {\n ...answer,\n isSelected: index === selectedIndex ? true : answer.isSelected,\n };\n });\n\n setSelected(updatedAnswers);\n };\n\n const evaluateAnswer = selectedIndex => {\n if (selectedIndex === 0) {\n handleCorrectAnswer();\n } else {\n handleWrongAnswer();\n }\n };\n\n const onAnswerClicked = (e, index) => {\n e.preventDefault();\n\n if (answersFrozen) {\n return;\n }\n\n evaluateAnswer(index);\n updateSelected(index);\n setAnswersFrozen(true);\n };\n\n return (\n \n
\n )}\n \n
\n \n );\n};\n","import { createGlobalStyle } from 'styled-components';\nimport { LessonExerciseHint } from '../LessonExerciseHint/LessonExerciseHint';\nimport { LessonExerciseQuestion } from '../LessonExerciseQuestion/LessonExerciseQuestion';\nimport { SelfAssessment } from './SelfAssessment/SelfAssessment';\n\nexport const RepeatExerciseRowGlobalStyles = createGlobalStyle`\n /* @noflip */\n .answer {\n direction: ltr;\n text-align: left;\n }\n`;\n\nexport const RepeatExerciseRow = ({ inquiry }) => {\n const { inquiryDescription, subInquiries } = inquiry;\n const { subInquiryDescription } = subInquiries[0];\n\n return (\n <>\n \n
\n \n {answers.map((answer, index) => (\n onAnswerClicked(e, index)}\n />\n ))}\n
\n \n
\n \n
\n \n
\n \n
\n {subInquiryDescription}
}\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {answers.map((answer, index) => (\n
\n \n
\n {correctAnswerAudioUrl && (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {choosenAnswers.map(answer => getAnswerLink(answerType, answer))}\n
\n \n {selectableAnswers.map(answer => getAnswerLink(answerType, answer))}\n
\n \n
\n \n
\n \n
\n \n );\n};\n","import { AudioProvider } from '../../../../context/AudioContext';\nimport { LessonExerciseTextInput } from '../LessonExerciseTextInput/LessonExerciseTextInput';\nimport { SortingExerciseRow } from './SortingExerciseRow';\n\nexport const SortingExercise = ({ data }) => {\n const { inputText, inquiries } = data.content;\n return (\n \n
\n);\n","export const ContentBottomLine = () => (\n \n \n
\n);\n","import styled from 'styled-components';\nimport { useRef } from 'react';\nimport { useToggle } from '../../hooks/useToggle';\nimport { StyledToggleableArrow as ToggleableArrow } from '../ToggleableArrow/ToggleableArrow';\nimport { colors } from '../../utils/css';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nexport const AccordionContainer = ({ title, children, className }) => {\n const element = useRef(null);\n const [isOpen, { toggleOnClick }] = useToggle();\n const height = element.current ? element.current.scrollHeight : '0';\n const titleTranslation = useTranslation(title);\n\n return (\n \n \n {children}\n \n
\n );\n};\n\nexport const AccordionContainerContent = styled.div`\n max-height: ${({ isOpen, height }) => (isOpen ? height : '1')}px;\n overflow: hidden;\n background-color: ${colors.LG_WHITE};\n transition: max-height 0.7s;\n margin-bottom: 20px;\n`;\n\nexport const StyledAccordionContainer = styled(AccordionContainer)`\n button {\n outline: none;\n padding: 0;\n display: flex;\n position: relative;\n cursor: pointer;\n border: none;\n background-color: ${colors.LG_WHITE};\n width: 10em;\n }\n .toggleable-arrow {\n position: relative;\n top: 0.1em;\n margin-left: 0.2em;\n width: 20px;\n height: 17px;\n }\n`;\n","import gql from 'graphql-tag';\nimport { createGlobalStyle } from 'styled-components';\nimport { RichText } from '../RichText/RichText';\nimport { useKnowledgePlaceholderReplacementEffect } from '../Modal/KnowledgeModal/useKnowledgePlaceholderReplacementEffect';\nimport { ContentContainer } from '../ContentContainer/ContentContainer';\nimport { ContentBottomLine } from '../ContentContainer/ContentBottomLine/ContentBottomLine';\nimport { StyledAccordionContainer as AccordionContainer } from '../ContentContainer/AccordionContainer';\n\nexport const manuscriptFragment = gql`\n fragment LessonManuscript on Lesson {\n id\n manuscript\n }\n`;\n\nconst ManuscriptGlobalStyles = createGlobalStyle`\n /* @noflip */\n .alwaysLtr {\n text-align: left;\n }\n`;\n\nexport const Manuscript = ({ content, isStandalone = true }) => {\n const { knowledges, manuscript } = content;\n const ContainerComponent = isStandalone ? ContentContainer : AccordionContainer;\n\n useKnowledgePlaceholderReplacementEffect({ knowledges, ignore: !isStandalone });\n\n return (\n \n
\n \n \n
\n \n
\n \n
\n \n
\n );\n case 'VIDEO':\n return (\n \n
\n );\n default:\n return null;\n }\n};\n\nexport const LessonExerciseItem = ({ data, exerciseCounter, manuscriptContent }) => {\n const contentComponent = getExerciseComponentByType(data);\n const mediaInputComponent = getExerciseMediaInputComponentByType(data);\n\n useKnowledgePlaceholderReplacementEffect({\n knowledges: [...data.content.knowledges, ...manuscriptContent.knowledges],\n });\n\n return (\n <>\n \n
\n )}\n {mediaInputComponent}
\n \n
\n \n );\n }}\n \n );\n};\n","import { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { isServer } from '../utils/ssr';\nimport globals from '../utils/globals';\n\nexport const useScrollToTop = () => {\n const { pathname } = useLocation();\n\n useEffect(() => {\n !isServer() && globals.window.scrollTo(0, 0);\n }, [pathname]);\n};\n","import { useRef } from 'react';\nimport { DwPicture } from '../../../DwPicture/DwPicture';\n\nexport const VocabularyRow = ({ data }) => {\n const { name, subTitle, audios, text } = data;\n const audio = audios[0];\n const audioSource = audio ? audio.mp3Src : '';\n const isValidImage = audio && audio.mainContentImageLink;\n\n const audioRef = useRef();\n\n const playAudio = e => {\n e.preventDefault();\n audioRef.current.play();\n };\n\n return (\n \n
\n \n
\n \n \n handleNextButtonClick({\n exerciseAchievableScore,\n })\n }\n />\n
\n \n
\n );\n};\n","import { gql } from '@apollo/client';\nimport { useParams } from 'react-router';\nimport { createGlobalStyle } from 'styled-components';\nimport { VocabularyRow } from './VocabularyRow/VocabularyRow';\nimport { toLang } from '../../../utils/mappers/langMapper';\nimport { WithGraphQLQueryHandling } from '../../WithGraphQLQueryHandling/WithGraphQLQueryHandling';\nimport { isRtlByLangCode } from '../../../utils/mappers/rtlLanguages';\nimport { metaDataFragment, PageMetaData } from '../../Page/PageMetaData';\nimport { PAGE_TYPES } from '../../../constants/pageTypes';\nimport {\n gtmDataLayerFragment,\n GtmScriptWithDataLayer,\n} from '../../GoogleTagManager/GtmScriptWithDataLayer';\n\nexport const lessonVocabularyQuery = gql`\n query LessonVocabulary($lessonId: Int!, $lessonLang: Language!) {\n content(id: $lessonId, lang: $lessonLang) {\n ... on Lesson {\n vocabularies {\n id\n name\n subTitle\n text\n audios {\n mp3Src\n mainContentImageLink {\n targetId\n }\n }\n }\n ...${metaDataFragment.name}\n ${gtmDataLayerFragment.partial()}\n }\n }\n }\n ${metaDataFragment.fragment({ type: 'Lesson' })}\n`;\n\nconst LessonVocabularyGlobalStyles = createGlobalStyle`\n /* @noflip */\n .override-ltr {\n text-align: left;\n }\n \n @media (min-width: 768px) { \n /* @noflip */\n .col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9 {\n float:right\n } \n \n /* @noflip */\n div.row.vocabulary div.col-sm-4 p {\n margin-right: auto;\n margin-left: 20px\n }\n \n /* @noflip */\n .col-sm-offset-1 {\n margin-right: 8.33333333%;\n margin-left: 0;\n }\n }\n\n @media (min-width: 1200px) {\n /* @noflip */\n .col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9 {\n float:right\n } \n \n /* @noflip */\n .col-lg-offset-2 {\n margin-right: 16.66666667%;\n margin-left: 0\n }\n }\n`;\n\nexport const LessonVocabulary = () => {\n const { langCode, lessonId } = useParams();\n\n const lessonVocabularyQueryVariables = {\n lessonId: +lessonId,\n lessonLang: toLang(langCode),\n };\n\n // TODO: this is only temporary here because the old styles need this distinction\n const isRtl = isRtlByLangCode(langCode);\n\n return (\n \n
\n \n
\n \n
\n {subTitle && {subTitle}}\n
\n {isValidImage && (\n
\n \n
\n )}\n \n \n
\n \n
\n );\n};\n","import { useHistory, useParams } from 'react-router';\nimport { LessonVocabulary } from '../LessonVocabulary/LessonVocabulary';\nimport { StyledStandardButton as StandardButton } from '../../StandardButton/StandardButton';\nimport { NavigationRow } from './NavigationRow/NavigationRow';\nimport { normalizeUrlName } from '../../../utils/url/url';\nimport {\n ALPHABETICAL_ORDER_URL_SUFFIX,\n LESSON_VOCABULARY_URL_SUFFIX,\n getLessonGrammarUrl,\n getLessonPhonemicChartUrl,\n getLessonRegionalStudiesUrl,\n getLessonVocabularyUrl,\n getSummaryUrl,\n getLessonUrl,\n} from '../../../utils/url/urlFactory';\nimport { LessonKnowledge } from '../LessonKnowledge/LessonKnowledge';\nimport { LESSON_PARTS } from '../../../constants/lessonParts';\nimport { ContentBottomLine } from '../../ContentContainer/ContentBottomLine/ContentBottomLine';\nimport { PAGE_TYPES } from '../../../constants/pageTypes';\nimport { PageMetaData } from '../../Page/PageMetaData';\n\nconst LESSON_PARTS_SUFFIX = {\n [LESSON_VOCABULARY_URL_SUFFIX]: LESSON_PARTS.VOCABULARY_GLOSSARY,\n [ALPHABETICAL_ORDER_URL_SUFFIX]: LESSON_PARTS.PHONEMIC_CHART,\n};\n\nexport const LessonKnowledgeNavigation = ({\n lessonName,\n lessonKeywordStrings,\n lessonKnowledgeOverviewItems,\n}) => {\n const history = useHistory();\n const { langCode, lessonId, knowledgeType, contentId } = useParams();\n const lessonPath = getLessonUrl(lessonId, langCode, normalizeUrlName(lessonName));\n\n const getCurrentItem = () => {\n if (contentId) {\n return lessonKnowledgeOverviewItems.find(item => item.targetId.toString() === contentId);\n }\n return lessonKnowledgeOverviewItems.find(\n item => item.lessonPart === LESSON_PARTS_SUFFIX[knowledgeType],\n );\n };\n\n const currentItem = getCurrentItem();\n const currentItemIndex = lessonKnowledgeOverviewItems.indexOf(currentItem);\n const previousItem = lessonKnowledgeOverviewItems[currentItemIndex - 1];\n const nextItem = lessonKnowledgeOverviewItems[currentItemIndex + 1];\n\n const moveTo = item => {\n const normalizedName = normalizeUrlName(item.target.name);\n if (item.lessonPart === LESSON_PARTS.GRAMMAR) {\n return getLessonGrammarUrl(langCode, lessonId, normalizedName, item.targetId);\n }\n if (item.lessonPart === LESSON_PARTS.REGIONAL_STUDIES) {\n return getLessonRegionalStudiesUrl(langCode, lessonId, normalizedName, item.targetId);\n }\n if (item.lessonPart === LESSON_PARTS.PHONEMIC_CHART) {\n return getLessonPhonemicChartUrl(langCode, lessonId, normalizedName);\n }\n return getLessonVocabularyUrl(langCode, lessonId, normalizedName);\n };\n\n const getCurrentComponent = () => {\n if ([LESSON_PARTS.GRAMMAR, LESSON_PARTS.REGIONAL_STUDIES].includes(currentItem.lessonPart)) {\n const pageType =\n currentItem.lessonPart === LESSON_PARTS.GRAMMAR\n ? PAGE_TYPES.GRAMMAR\n : PAGE_TYPES.REGIONAL_STUDIES;\n return (\n \n
\n \n
\n \n {currentItem && i18n.t(getTranslationCodeForLessonPart(currentItem.lessonPart))}\n
\n {previousItem && (\n Phonemic Chart component
\n \n );\n }\n return\n
\n );\n};\n","import gql from 'graphql-tag';\nimport { WithGraphQLQueryHandling } from '../components/WithGraphQLQueryHandling/WithGraphQLQueryHandling';\nimport { manuscriptFragment, Manuscript } from '../components/Manuscript/Manuscript';\nimport { knowledgesFragment } from '../components/Lesson/LessonKnowledge/LessonKnowledge';\nimport {\n MediaInputChooser,\n mediaInputChooserFragment,\n} from '../components/Lesson/MediaInputChooser/MediaInputChooser';\nimport { metaDataFragment, PageMetaData } from '../components/Page/PageMetaData';\nimport { PAGE_TYPES } from '../constants/pageTypes';\nimport {\n gtmDataLayerFragment,\n GtmScriptWithDataLayer,\n} from '../components/GoogleTagManager/GtmScriptWithDataLayer';\n\nexport const ManuscriptQuery = gql`\n query ManuscriptPage($id: Int!, $lang: Language!) {\n content(id: $id, lang: $lang) {\n ...LessonMediaInputChooser\n ...LessonManuscript\n ...LessonKnowledges\n ...${metaDataFragment.name}\n ${gtmDataLayerFragment.partial()}\n }\n }\n ${mediaInputChooserFragment.fragment({ type: 'Lesson' })}\n ${manuscriptFragment}\n ${knowledgesFragment.fragment({ type: 'Lesson' })}\n ${metaDataFragment.fragment({ type: 'Lesson' })}\n`;\n\nexport const ManuscriptPage = ({ contentId, language }) => {\n const ManuscriptPageQueryVariables = {\n id: +contentId,\n lang: language,\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n);\n","import { getArticleUrl } from '../../../../utils/url/url';\n\nexport const ArticleLinks = ({ data }) => {\n return data.map(({ targetId, target: { name: targetName }, name }) => (\n \n
\n {children}
\n \n
\n ));\n};\n","import { capitalize, getMediaFileSizeInKBorMB } from '../../../../utils/commons';\nimport { getAudioDownloadUrl } from '../../../../utils/url/url';\n\nexport const AudioLinks = ({ data }) => {\n const getAudioLinkTitle = (name, format, size, variant) =>\n `${name} | ${format} | ${getMediaFileSizeInKBorMB(size)} (${capitalize(variant)})`;\n\n return data.map(audioLink =>\n audioLink.target.audioResourceLinks.map(({ id, url, format, size, variant }) => (\n \n )),\n );\n};\n","import { getDownloadUrl } from '../../../../utils/url/url';\nimport { useFrontendConfig } from '../../../../hooks/useFrontendConfig';\n\nexport const DownloadLinks = ({ data }) => {\n const { staticBaseHost } = useFrontendConfig();\n\n return data.map(({ targetId, target: { filename }, name }) => (\n \n {name}\n
\n\n
\n ));\n};\n","import gql from 'graphql-tag';\nimport { getMediaFileSizeInKBorMB } from '../../../../utils/commons';\nimport { getVideoDownloadUrl } from '../../../../utils/url/url';\n\nexport const videoResourceLinksFragment = {\n name: 'VideoResourceLinks',\n fragment() {\n return gql`fragment ${this.name} on Video {\n id\n name\n videoResourceLinks {\n id\n url\n techFormat\n size\n format\n }\n } \n `;\n },\n};\n\nexport const VideoLinks = ({ data }) => {\n const getVideoLinksByFormat = video =>\n video.videoResourceLinks.filter(videoLink => videoLink.techFormat.includes('PODCAST'));\n\n const videos = [].concat(\n ...data.map(video =>\n getVideoLinksByFormat(video.target).map(link => ({ ...link, name: video.name })),\n ),\n );\n\n const getVideoLinkTitle = (name, format, size, techFormat) =>\n `${name} | ${format} | ${getMediaFileSizeInKBorMB(size)} (${techFormat.slice(-2)})`;\n\n return videos.map(({ id, url, name, format, size, techFormat }) => (\n \n {name}\n
\n\n \n {getVideoLinkTitle(name, format, size, techFormat)}\n \n
\n ));\n};\n","import gql from 'graphql-tag';\nimport { ContentContainer } from '../../ContentContainer/ContentContainer';\nimport { ContentHeadline } from '../../ContentContainer/ContentHeadline/ContentHeadline';\nimport { ContentBottomLine } from '../../ContentContainer/ContentBottomLine/ContentBottomLine';\nimport { ContentSection } from '../../ContentContainer/ContentSection/ContentSection';\nimport { ArticleLinks } from './Links/ArticleLinks';\nimport { AudioLinks } from './Links/AudioLinks';\nimport { DownloadLinks } from './Links/DownloadLinks';\nimport { VideoLinks, videoResourceLinksFragment } from './Links/VideoLinks';\nimport { I18nText } from '../../I18n/I18nText';\n\nexport const lessonExtrasFragment = gql`\n fragment LessonExtras on Lesson {\n id\n contentLinks(targetTypes: [ARTICLE, DOWNLOAD, AUDIO, VIDEO]) {\n id\n name\n targetId\n targetType\n target {\n ... on Download {\n filename\n }\n ... on Article {\n name\n }\n ... on Audio {\n id\n name\n audioResourceLinks {\n id\n url\n size\n format\n variant\n }\n }\n ...${videoResourceLinksFragment.name}\n }\n }\n }\n ${videoResourceLinksFragment.fragment()}\n`;\n\nconst filterContentByType = type => contentLink => contentLink.targetType === type;\n\nexport const LessonExtras = ({ content = {} }) => {\n const { contentLinks = [] } = content;\n const downloads = contentLinks.filter(filterContentByType('DOWNLOAD'));\n const articles = contentLinks.filter(filterContentByType('ARTICLE'));\n const audios = contentLinks.filter(filterContentByType('AUDIO'));\n const videos = contentLinks.filter(filterContentByType('VIDEO'));\n const [hasDownloads, hasVideos, hasAudios, hasArticles] = [\n !!downloads.length,\n !!videos.length,\n !!audios.length,\n !!articles.length,\n ];\n\n return (\n\n
\n )}\n {showFeedback && (\n \n
\n \n
\n )}\n \n
\n \n
\n \n );\n};\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useEffect } from 'react';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { createGlobalStyle } from 'styled-components';\nimport { EXERCISE_ACTION_TYPES, ExerciseAction } from './ExerciseAction';\nimport { LessonExerciseHint } from '../LessonExerciseHint/LessonExerciseHint';\nimport { Summary } from './Summary';\nimport {\n filteredAssembledInfos,\n filterLessonExerciseOverviewItems,\n} from '../../../../utils/lessonUtils';\nimport { userSelector } from '../../../../state/user/userSelectors';\nimport { useI18nContext } from '../../../../context/I18nContext';\nimport { removeImproveMode, setImproveMode } from '../../../../state/mode/lessonExerciseModeDuck';\nimport { useExerciseManager } from '../../../../hooks/useExerciseManager';\nimport { getLessonUrl, getLoginPage, getSummaryUrl } from '../../../../utils/url/urlFactory';\nimport { useGlobalsContext } from '../../../../context/GlobalsContext';\nimport { normalizeUrlName } from '../../../../utils/url/url';\nimport { setLessonProgressSyncNeeded } from '../../../../state/progress/learnProgressDuck';\nimport { PageMetaData } from '../../../Page/PageMetaData';\nimport { PAGE_TYPES } from '../../../../constants/pageTypes';\nimport { GtmScriptWithDataLayer } from '../../../GoogleTagManager/GtmScriptWithDataLayer';\n\nexport const LessonResultAndSummaryGlobalStyles = createGlobalStyle`\n @media (min-width: 1200px) {\n /* @noflip */\n .col-lg-push-1 {\n right: 8.33333333%;\n left: 0;\n }\n }\n @media (min-width: 1200px) {\n /* @noflip */\n .col-lg-pull-1 {\n left: 8.33333333%;\n right: auto;\n }\n }\n /* @noflip */\n .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {\n position: relative;\n min-height: 1px;\n padding-left: 20px;\n padding-right: 20px;\n }\n`;\n\nexport const LessonExerciseResult = ({\n lessonOverviewParts,\n lessonId,\n lessonName,\n courseId,\n isFinalTest,\n lessonKeywordStrings,\n data,\n}) => {\n const { isLoggedIn } = useSelector(userSelector);\n const { i18n } = useI18nContext();\n const { langCode } = useParams();\n const { location } = useGlobalsContext().window;\n const dispatch = useDispatch();\n const history = useHistory();\n\n const lessonExerciseOverviewItems = filterLessonExerciseOverviewItems(lessonOverviewParts);\n const { firstExerciseLink, isFullScoreAchieved } = useExerciseManager({\n lessonName,\n lessonExerciseOverviewItems,\n courseId,\n isFinalTest,\n });\n\n useEffect(() => {\n dispatch(removeImproveMode(lessonId));\n }, []);\n\n const lessonPath = getLessonUrl(lessonId, langCode, normalizeUrlName(lessonName));\n const assembledInfos = filteredAssembledInfos({ lessonOverviewParts, lessonPath });\n const showImproveButton = !isLoggedIn || (isLoggedIn && !isFullScoreAchieved());\n const resultPrefix = 'lesson.exercises.result';\n\n const generateNextUrl = () => {\n return assembledInfos[0] ? assembledInfos[0].url : getSummaryUrl(lessonPath);\n };\n\n const generateExerciseInfos = t => {\n const exerciseInfos = assembledInfos.map(info => t(`${resultPrefix}.${info.name}`)).join(', ');\n\n return (\n exerciseInfos && (\n \n
\n \n \n
\n
\n \n \n {percentile}%\n \n
\n \n
\n {t(`${resultPrefix}.whatsNext`)} {exerciseInfos}.\n
\n )\n );\n };\n\n const infos = generateExerciseInfos(i18n.t);\n const nextUrl = generateNextUrl();\n const hintKey = i18n.t(`${resultPrefix}.hint`);\n\n const handleImproveClicked = () => {\n if (isLoggedIn) {\n dispatch(setImproveMode(lessonId));\n const firstExerciseLinkInImproveMode = firstExerciseLink(true);\n history.push(firstExerciseLinkInImproveMode);\n } else {\n dispatch(setLessonProgressSyncNeeded(true));\n }\n };\n\n const handleSaveClicked = () => {\n if (isLoggedIn) {\n history.push(nextUrl);\n } else {\n dispatch(setLessonProgressSyncNeeded(true));\n }\n };\n\n const handleContinueClicked = () => {\n history.push(nextUrl);\n };\n\n const loginLink = isLoggedIn\n ? undefined\n : getLoginPage(location.origin, langCode, location.pathname);\n\n return (\n <>\n\n
\n \n );\n};\n","import { Link } from 'react-router-dom';\nimport { Summary } from '../LessonExercise/LessonExerciseResult/Summary';\nimport { getContentUrl, getDashboardUrl } from '../../../utils/url/urlFactory';\nimport { I18nText } from '../../I18n/I18nText';\nimport { toLangCode } from '../../../utils/mappers/langMapper';\nimport { isFinalTestPredicate } from '../../../utils/commons';\nimport { LessonResultAndSummaryGlobalStyles } from '../LessonExercise/LessonExerciseResult/LessonExerciseResult';\n\nexport const LessonSummary = ({ data, lessonId, language }) => {\n const { content } = data;\n const { contentLinks } = content;\n const currentLessonLink = contentLinks.find(link => link.targetId === lessonId);\n const currentLessonIndex = contentLinks.indexOf(currentLessonLink);\n\n const generateRedirectInfos = () => {\n const nextLessonContentLink = contentLinks[currentLessonIndex + 1] || {};\n const { lesson } = nextLessonContentLink;\n\n if (!lesson) {\n return {\n url: getDashboardUrl(toLangCode(language)),\n redirectMessage: 'lesson.exercises.result.toDashboard',\n };\n }\n\n const { shortTitle, id } = lesson;\n\n const url = getContentUrl({\n id,\n name: shortTitle,\n language,\n __typename: 'Lesson',\n });\n\n const isFinalTest = isFinalTestPredicate(nextLessonContentLink);\n\n const redirectMessage = isFinalTest\n ? 'lesson.exercises.result.toFinalTest'\n : 'lesson.exercises.result.nextLesson';\n\n return { url, redirectMessage };\n };\n\n const { url, redirectMessage } = generateRedirectInfos();\n\n return (\n <>\n \n
\n \n
\n \n
\n {infos}
\n {!isLoggedIn && (\n \n
\n \n
\n \n
\n \n {showImproveButton && (\n
\n \n
\n )}\n \n {!isLoggedIn && (\n
\n \n
\n \n
\n \n );\n};\n","import gql from 'graphql-tag';\nimport { LessonSummary } from '../components/Lesson/LessonSummary/LessonSummary';\nimport { WithGraphQLQueryHandling } from '../components/WithGraphQLQueryHandling/WithGraphQLQueryHandling';\nimport { PageMetaData } from '../components/Page/PageMetaData';\nimport { PAGE_TYPES } from '../constants/pageTypes';\nimport { gtmDataLayerFragment } from '../components/GoogleTagManager';\nimport { GtmScriptWithDataLayer } from '../components/GoogleTagManager/GtmScriptWithDataLayer';\n\nexport const lessonSummaryPageQuery = gql`\n query LessonSummaryPage($id: Int!, $lang: Language!) {\n content(id: $id, lang: $lang) {\n ... on Course {\n id\n contentLinks(targetTypes: LESSON) {\n additionalInformation\n targetId\n lesson: target {\n ... on Lesson {\n id\n shortTitle\n }\n }\n }\n ${gtmDataLayerFragment.partial()}\n }\n }\n }\n`;\n\nexport const LessonSummaryPage = ({\n courseId,\n lessonId,\n language,\n lessonName,\n lessonKeywordStrings,\n}) => {\n const LessonSummaryQueryVariables = {\n id: +courseId,\n lang: language,\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n {isMonolingualCourse(courseId.toString()) && (\n (\n \n \n )}\n />\n (\n (\n (\n
\n \n
\n );\n};\n","import { hasErrorClassAssigner } from '../../utils/errorClassAssigner';\nimport { getTranslatedValidationMessage } from '../../utils/validation/validationMessages';\nimport { useI18nContext } from '../../context/I18nContext';\n\nexport const Select = ({\n name,\n defaultOptionKey,\n options,\n validationError,\n register,\n ...restProps\n}) => {\n const { i18n } = useI18nContext();\n\n return (\n \n \n {validationError && (\n \n {getTranslatedValidationMessage({\n name,\n validationErrorTranslationKey: defaultOptionKey,\n validationType: validationError.type,\n t: i18n.t,\n })}\n \n )}\n
\n );\n};\n","import { hasErrorClassAssigner } from '../../utils/errorClassAssigner';\nimport { getTranslatedValidationMessage } from '../../utils/validation/validationMessages';\nimport { useI18nContext } from '../../context/I18nContext';\n\nexport const Checkbox = ({\n name,\n labelText,\n validationErrorTranslationKey,\n register,\n validationError,\n ...restProps\n}) => {\n const { i18n } = useI18nContext();\n\n return (\n \n
\n );\n};\n","import {\n hasErrorClassAssigner,\n hasNestedErrorsClassAssigner,\n} from '../../../utils/errorClassAssigner';\nimport { I18nText } from '../../I18n/I18nText';\nimport { deconstructDateOfBirth } from '../../../utils/userUtils';\nimport { useTranslation } from '../../../hooks/useTranslation';\n\nexport const BirthDateInput = ({\n register,\n errors,\n initialDateOfBirth,\n translationPrefix = 'profile.register',\n}) => {\n const { year: initYear } = deconstructDateOfBirth(initialDateOfBirth);\n const hasErrors = errors.year;\n const placeholderLabel = useTranslation(`${translationPrefix}.placeholder.yearOfBirth`);\n\n return (\n \n
\n \n \n
\n {validationError && (\n \n {getTranslatedValidationMessage({\n name,\n validationErrorTranslationKey,\n validationType: validationError.type,\n t: i18n.t,\n })}\n \n )}\n \n
\n );\n};\n","export const emailPattern = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;\nexport const transcriptionPattern = /^[\\sa-zA-ZäöüÄÖÜß-]*$/;\nexport const namePattern = /^[^\\u0027\\u0022;{}<>&:\\\\]+$/;\n\nexport const passwordValid = password => {\n if (!password) {\n return false;\n }\n\n const minLength = 8;\n // eslint-disable-next-line\n let numberOfFulfilledConditions = 0;\n const minNumberOfFulfilledConditions = 3;\n const regexPatterns = [/[0-9]/, /[^A-Za-z_0-9]/, /[A-Z]/, /[a-z]/];\n\n regexPatterns.forEach(pattern => {\n if (password.match(pattern) !== null) {\n // eslint-disable-next-line\n numberOfFulfilledConditions += 1;\n }\n });\n\n return !!(\n password.length >= minLength && numberOfFulfilledConditions >= minNumberOfFulfilledConditions\n );\n};\n\nexport const passwordRetypeValid = (passwordRetype, password) =>\n !!(password && password === passwordRetype);\n\nexport const passwordDiffersFromEmail = (password, email) => {\n const repeatedCharsLimit = 4;\n const template = email;\n const { length } = template;\n // eslint-disable-next-line\n let subString;\n\n // eslint-disable-next-line\n for (let i = 0; i < length - repeatedCharsLimit; i++) {\n // eslint-disable-next-line\n subString = template.substring(i, i + repeatedCharsLimit);\n if (password.indexOf(subString) !== -1) {\n return false;\n }\n }\n return true;\n};\n\nconst validateCaptcha = (state, setState) => {\n setState({ ...state, captchaError: !state.isCaptchaPassed });\n return state.isCaptchaPassed;\n};\n\nexport const captcha = {\n validateCaptcha,\n};\n","import ReCAPTCHA from 'react-google-recaptcha';\nimport config from '../../config';\n\nexport const ReCaptcha = ({ languageCode, onSuccess, onExpired }) => {\n const checkForReCaptchaToken = token => {\n if (token) {\n onSuccess(token);\n }\n };\n\n return (\n \n
\n {hasErrors && (\n \n \n
\n \n
\n );\n};\n","import { USER } from '../constants/userUrl';\nimport { BASIC_JSON_CONTENT_TYPE_HEADER } from '../constants/services';\nimport { formatPasswordResetUserData } from '../utils/mappers/passwordReset';\n\nconst PS_PREFIX = USER.PS_URL;\nconst PASSWORD_RESOURCE_PUBLIC_RESET = `${PS_PREFIX}public/user/password/reset`;\nexport const PASSWORD_RESOURCE_PUBLIC_RESET_REQUEST = `${PS_PREFIX}public/user/password/reset-request`;\nconst PASSWORD_RESOURCE_PROTECTED = `${PS_PREFIX}protected/user/password`;\n\nexport const changePassword = (oldUserPassword, userPassword) =>\n fetch(`${PASSWORD_RESOURCE_PROTECTED}/change`, {\n method: 'POST',\n body: JSON.stringify({\n oldPassword: oldUserPassword,\n newPassword: userPassword,\n }),\n ...BASIC_JSON_CONTENT_TYPE_HEADER,\n });\n\nexport const requestResetPassword = ({ userData, captchaToken }) => {\n const formattedData = formatPasswordResetUserData({ userData, captchaToken });\n return fetch(PASSWORD_RESOURCE_PUBLIC_RESET_REQUEST, {\n method: 'POST',\n body: JSON.stringify(formattedData),\n ...BASIC_JSON_CONTENT_TYPE_HEADER,\n }).then(response => (response.ok ? Promise.resolve(response) : Promise.reject(response)));\n};\n\nexport const setPasswordByToken = (newPassword, token) =>\n fetch(PASSWORD_RESOURCE_PUBLIC_RESET, {\n method: 'POST',\n body: JSON.stringify({\n newPassword,\n passwordResetToken: token,\n }),\n ...BASIC_JSON_CONTENT_TYPE_HEADER,\n }).then(response => (response.ok ? Promise.resolve(response) : Promise.reject(response)));\n\nexport const getUserByConfirmationId = confirmationId =>\n fetch(`${PS_PREFIX}public/user/mail?token=${confirmationId}`)\n .then(res => res.text())\n .catch(e => console.log(e));\n","export const formatPasswordResetUserData = ({ userData, captchaToken }) => ({\n email: userData.email,\n recaptcha: captchaToken,\n});\n","import { Input } from '../Input';\nimport {\n passwordDiffersFromEmail,\n passwordRetypeValid,\n passwordValid,\n} from '../../../utils/validation/validators';\n\nexport const NewPasswordInputs = ({\n passwordTitleKey,\n passwordPlaceholderKey,\n passwordRepeatTitleKey,\n passwordRepeatPlaceholderKey,\n email,\n register,\n errors,\n getValues,\n}) => {\n return (\n <>\n \n
\n \n
\n \n
\n \n
\n \n \n
\n passwordValid(value, getValues().email),\n differsFromEmail: value => passwordDiffersFromEmail(value, getValues().email),\n },\n })}\n validationError={errors.password}\n />\n passwordRetypeValid(value, getValues().password),\n },\n })}\n validationError={errors.passwordRetype}\n />\n cancelRegistration(e)}\n />\n \n
\n \n
\n
\n \n
\n \n
\n \n
\n );\n};\n","import { useRef, useState } from 'react';\nimport { useHistory, useParams } from 'react-router';\nimport { useForm } from 'react-hook-form';\nimport { I18nText } from '../I18n/I18nText';\nimport { Input } from '../Input/Input';\nimport { captcha, emailPattern } from '../../utils/validation/validators';\nimport { hasErrorClassAssigner } from '../../utils/errorClassAssigner';\nimport { ReCaptcha } from '../ReCaptcha/ReCaptcha';\nimport { StyledStandardButton as StandardButton } from '../StandardButton/StandardButton';\nimport { scrollIntoViewCenter } from '../../utils/htmlUtils';\nimport { requestResetPassword } from '../../services/passwordService';\nimport { feedbackHelper } from '../../utils/url/feedbackHelpers';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nexport const PasswordReset = () => {\n const [state, setState] = useState({\n isCaptchaPassed: false,\n captchaError: false,\n captchaToken: null,\n });\n const { langCode } = useParams();\n const captchaRef = useRef();\n const history = useHistory();\n\n const {\n register,\n handleSubmit,\n formState: { errors },\n } = useForm({\n mode: 'onSubmit',\n reValidateMode: 'onSubmit',\n });\n\n const captchaMessage = useTranslation('client.recaptcha');\n const captchaValidationMessage = useTranslation({\n key: 'client.validator.required',\n parameters: { first: captchaMessage },\n });\n\n const onSubmit = async data => {\n if (!captcha.validateCaptcha(state, setState)) {\n scrollIntoViewCenter(captchaRef.current);\n return;\n }\n try {\n await requestResetPassword({ userData: data, captchaToken: state.captchaToken });\n history.push(feedbackHelper.forPasswordResetRequest(langCode));\n } catch (err) {\n history.push(feedbackHelper.getForErrorCode(err, langCode));\n }\n };\n\n const onCaptchaSuccess = token => {\n setState({ ...state, isCaptchaPassed: true, captchaToken: token });\n };\n\n const onCaptchaExpired = () => {\n setState({ ...state, isCaptchaPassed: false, captchaToken: null });\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n
\n \n
\n );\n};\n","import { Link } from 'react-router-dom';\nimport { useLocation, useParams } from 'react-router';\nimport { I18nText } from '../I18n/I18nText';\nimport { StyledStandardButton } from '../StandardButton/StandardButton';\nimport { feedbackHelper } from '../../utils/url/feedbackHelpers';\nimport { getTargetPageUrl, URL_SEARCH_PARAM_TARGET_PATH } from '../../utils/url/urlFactory';\nimport { COMMON_FEEDBACK_TRANSLATION_KEYS } from '../../constants/feedback';\n\nexport const StatusFeedback = () => {\n const { langCode, feedbackType } = useParams();\n const { search } = useLocation();\n\n const feedbackContentKey = feedbackHelper.getFeedbackContentKey(feedbackType);\n const urlParams = new URLSearchParams(search);\n const targetPath = urlParams.get(URL_SEARCH_PARAM_TARGET_PATH);\n const targetPageUrl = targetPath || getTargetPageUrl(feedbackType, langCode);\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n
\n \n \n
\n \n
\n );\n};\n","import { useDispatch } from 'react-redux';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { useForm } from 'react-hook-form';\nimport { Checkbox } from '../../Checkbox/Checkbox';\nimport { I18nText } from '../../I18n/I18nText';\nimport { StyledStandardButton } from '../../StandardButton/StandardButton';\nimport { deleteUser } from '../../../services/userService';\nimport { deleteUserAccount } from '../../../state/user/userDuck';\nimport { feedbackHelper } from '../../../utils/url/feedbackHelpers';\nimport { useTranslation } from '../../../hooks/useTranslation';\n\nexport const DeleteAccountModal = ({ onClose }) => {\n const { langCode } = useParams();\n const history = useHistory();\n const dispatch = useDispatch();\n\n const { register, handleSubmit } = useForm({\n mode: 'onSubmit',\n });\n\n const confirmDeleteLabel = useTranslation('profile.edit.modal.confirmDelete');\n\n const onSubmit = async () => {\n try {\n const response = await deleteUser();\n if (response.ok) {\n dispatch(deleteUserAccount());\n history.push(feedbackHelper.forUserDelete(langCode));\n } else {\n const responseJson = await response.json();\n history.push(feedbackHelper.getForErrorCode(responseJson, langCode));\n }\n } catch (err) {\n history.push(feedbackHelper.getForErrorCode(err, langCode));\n }\n };\n\n return (\n <>\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n );\n};\n","import { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Link, useHistory } from 'react-router-dom';\nimport { useParams } from 'react-router';\nimport {\n contactLanguageOptions,\n handicapOptions,\n languageLevelOptions,\n learningTypeOptions,\n professionOptions,\n sexOptions,\n writingReadingLevelOptions,\n} from '../../constants/userInputOptions';\nimport { setUser } from '../../state/user/userDuck';\nimport { feedbackHelper } from '../../utils/url/feedbackHelpers';\nimport { updateUserProfile } from '../../services/userService';\nimport { I18nText } from '../I18n/I18nText';\nimport { DeleteAccountModal } from '../Modal/DeleteAccountModal/DeleteAccountModal';\nimport { ModalIntegration } from '../Modal/ModalIntegration';\nimport { StyledStandardButton } from '../StandardButton/StandardButton';\nimport { getPasswordChangeUrl } from '../../utils/url/urlFactory';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { Select } from '../Select/Select';\nimport { BirthDateInput } from '../Input/BirthDateInput/BirthDateInput';\nimport { countries } from '../../constants/countries';\nimport { Input } from '../Input/Input';\nimport { emailPattern, namePattern, transcriptionPattern } from '../../utils/validation/validators';\nimport { CUSTOM_ERROR_TRANSLATION_KEYS } from '../../utils/validation/validationMessages';\nimport { userDataSelector } from '../../state/user/userSelectors';\nimport { useI18nContext } from '../../context/I18nContext';\n\nexport const UserProfile = () => {\n const history = useHistory();\n const { langCode } = useParams();\n const dispatch = useDispatch();\n const userData = useSelector(userDataSelector);\n const { i18n } = useI18nContext();\n\n const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);\n\n const {\n register,\n handleSubmit,\n getValues,\n formState: { errors },\n } = useForm({\n mode: 'onSubmit',\n reValidateMode: 'onSubmit',\n });\n\n const additionalSelectInputs = [\n { name: 'contactLanguage', options: contactLanguageOptions, translationKeySuffix: '' },\n { name: 'profession', options: professionOptions },\n { name: 'languageLevel', options: languageLevelOptions },\n { name: 'writingReadingLevel', options: writingReadingLevelOptions },\n { name: 'handicap', options: handicapOptions },\n { name: 'learningType', options: learningTypeOptions },\n ];\n\n const checkboxInputs = [\n { name: 'teacher', translationKeySuffix: '.teacher' },\n { name: 'newsletter', translationKeySuffix: '.newsletter.subscribe' },\n { name: 'signalSoundDisabled', translationKeySuffix: '.signalSoundTurnOff' },\n ];\n\n const removeEmptySelectValues = data => {\n const cleanedData = { ...data };\n additionalSelectInputs.forEach(selectInputName => {\n const value = cleanedData[selectInputName.name];\n if (value === '') {\n // eslint-disable-next-line fp/no-delete\n delete cleanedData[selectInputName.name];\n }\n });\n return cleanedData;\n };\n\n const onSubmit = async data => {\n const cleanedData = removeEmptySelectValues(data);\n try {\n const updatedData = await updateUserProfile(cleanedData);\n dispatch(setUser(updatedData));\n updatedData.email !== getValues().email\n ? history.push(feedbackHelper.forMailChangeRequest(langCode))\n : history.push(feedbackHelper.forProfileUpdated(langCode));\n } catch (err) {\n history.push(feedbackHelper.getForErrorCode(err, langCode));\n }\n };\n\n const toggleDeleteAccountModal = () => {\n setDeleteModalOpen(!isDeleteModalOpen);\n };\n\n return (\n \n
\n \n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n );\n};\n","import { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { feedbackHelper } from '../../utils/url/feedbackHelpers';\nimport { getUserByConfirmationId, setPasswordByToken } from '../../services/passwordService';\nimport { I18nText } from '../I18n/I18nText';\nimport { NewPasswordInputs } from '../Input/NewPassword/NewPasswordInputs';\nimport { StyledStandardButton as StandardButton } from '../StandardButton/StandardButton';\nimport { StyledLoadingMessage as LoadingMessage } from '../commons/LoadingMessage';\n\nexport const SetNewPassword = ({ confirmationId }) => {\n const history = useHistory();\n const { langCode } = useParams();\n const [email, setEmail] = useState(null);\n\n useEffect(() => {\n getUserByConfirmationId(confirmationId)\n .then(userEmailResponse => {\n if (!userEmailResponse.includes('@')) {\n history.push(feedbackHelper.forInvalidToken(langCode));\n } else {\n setEmail(userEmailResponse);\n }\n })\n .catch(e => {\n history.push(feedbackHelper.getForErrorCode(e, langCode));\n });\n // eslint-disable-next-line\n }, []);\n\n const {\n register,\n handleSubmit,\n getValues,\n formState: { errors },\n } = useForm({\n mode: 'onSubmit',\n reValidateMode: 'onSubmit',\n });\n\n const onSubmit = async () => {\n try {\n await setPasswordByToken(getValues().password, confirmationId);\n history.push(feedbackHelper.forSetPassword(langCode));\n } catch (err) {\n history.push(feedbackHelper.getForErrorCode(err, langCode));\n }\n };\n\n return email ? (\n \n
\n \n
\n \n
\n \n
\n \n \n
\n
\n {additionalSelectInputs.map(({ name, options, translationKeySuffix = '.title' }) => (\n\n \n
\n \n
\n {additionalSelectInputs.map(({ name, options, translationKeySuffix = '.title' }) => (\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\nconst PlacementTestGlobalStyles = createGlobalStyle`\n div.allcourses .main-course {\n float: left;\n text-align: left\n }\n\n div.allcourses .main-course h2 {\n float: left;\n margin: 0 6px 0 0\n }\n\n @media (max-width: 767px) {\n div.allcourses .main-course h2 {\n margin: 5px 6px 0 10px\n }\n }\n\n div.allcourses .main-course p.course-title {\n margin: 6px 0 0\n }\n\n div.allcourses .main-course span.progress-icon {\n float: right;\n margin-top: 20px\n }\n\n div.allcourses .main-course span.progress-icon.half {\n margin-left: 8px\n }\n\n @media (min-width: 768px) {\n div.allcourses .main-course p {\n clear: left\n }\n\n div.allcourses .main-course p.course-title {\n margin: 32px 7px 0 16px\n }\n }\n\n @media (min-width: 992px) {\n div.allcourses .main-course span.progress-icon.half {\n margin-left: 10px\n }\n }\n\n @media (max-width: 767px) {\n div.allcourses .main-course[class*=assess] {\n height: 180px\n }\n\n div.allcourses .main-course[class*=assess] span.progress-icon {\n margin-top: 5px\n }\n\n div.allcourses .main-course[class*=assess] h2 {\n font-size: 36px;\n line-height: 40px;\n display: inline;\n float: none;\n width: auto;\n margin: 0\n }\n\n div.allcourses .main-course[class*=assess] p {\n max-width: 100%;\n max-height: 100%;\n overflow: visible;\n opacity: 1;\n margin: 0\n }\n }\n`;\n\nexport const PlacementTest = ({ data }) => {\n const { name, subTitle, mainContentImageLink, lessons } = data.content;\n return (\n {level}
\n\n
\n );\n};\n","import gql from 'graphql-tag';\nimport { useParams } from 'react-router';\nimport { toLang } from '../utils/mappers/langMapper';\nimport { PageContainer } from '../components/Page/PageContainer';\nimport { PlacementTest } from '../components/PlacementTest/PlacementTest';\nimport { WithGraphQLQueryHandling } from '../components/WithGraphQLQueryHandling/WithGraphQLQueryHandling';\nimport { getPlacementTestIdForLangCode } from '../utils/mappers/placementTestCourseIds';\nimport { metaDataFragment, PageMetaData } from '../components/Page/PageMetaData';\nimport { PAGE_TYPES } from '../constants/pageTypes';\nimport {\n gtmDataLayerFragment,\n GtmScriptWithDataLayer,\n} from '../components/GoogleTagManager/GtmScriptWithDataLayer';\n\nexport const placementTestPageQuery = gql`\n query PlacementTestPage($id: Int!, $lang: Language!) {\n content(id: $id, lang: $lang) {\n ... on Course {\n id\n name\n subTitle\n mainContentImageLink {\n name\n targetId\n }\n lessons {\n subTitle: teaser\n id\n name\n language\n dkLearningLevel\n }\n ...${metaDataFragment.name}\n ${gtmDataLayerFragment.partial()}\n }\n }\n }\n ${metaDataFragment.fragment({ type: 'Course' })}\n`;\n\nexport const PlacementTestPage = () => {\n const { langCode } = useParams();\n const placementCourseId = getPlacementTestIdForLangCode(langCode);\n\n const placementTestPageQueryVariables = {\n id: placementCourseId,\n lang: toLang(langCode),\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n {name}
\n\n
\n {subTitle}
\n\n {lessons.map((lesson, index) => (\n
\n \n
\n );\n\n const ltrText = (\n \n {`${number} `}\n
\n );\n\n return (\n \n
\n \n );\n};\n\nexport const StyledVocabularyTrainerStatus = styled(VocabularyTrainerStatus)`\n & div.exercise-nav div.exercise-nav-title.rtl {\n direction: rtl;\n }\n`;\n","import { RichText } from '../RichText/RichText';\nimport { DwPicture } from '../DwPicture/DwPicture';\n\nexport const BubbleContainer = ({ children, mainContentImage }) => {\n return (\n \n \n {isRtl ? rtlText : ltrText}\n
\n \n {mainContentImage &&
\n );\n};\n","import { useRef, useState, useEffect } from 'react';\nimport styled, { createGlobalStyle } from 'styled-components';\nimport classnames from 'classnames';\nimport { BubbleContainer } from './BubbleContainer';\nimport { StyledSolveButton } from '../SolveCheckButton/SolveButton';\nimport { I18nText } from '../I18n/I18nText';\n\nconst VocabularyTrainerItemGlobalStyles = createGlobalStyle` \n /* @noflip */\n .alwaysLtr {\n text-align: left;\n direction: ltr;\n }\n`;\n\nexport const VocabularyTrainerItem = ({\n vocabulary: { text, audios, subTitle, name },\n onSolved,\n isHidden,\n className,\n}) => {\n const audioRef = useRef();\n const { mp3Src, mainContentImage } = audios[0] || {};\n const [isSolved, setSolved] = useState(false);\n const [audioStatus, setAudioStatus] = useState('');\n const [isDisabled, setDisabled] = useState(false);\n\n const onSolveClicked = event => {\n event.preventDefault();\n setSolved(true);\n setDisabled(true);\n if (!mp3Src) {\n setAudioStatus('ending');\n onSolved();\n }\n };\n\n const onAnswerClicked = event => {\n event.preventDefault();\n audioRef.current.play();\n setAudioStatus('playing');\n };\n\n const onAudioEnded = () => {\n setAudioStatus('ending');\n onSolved();\n };\n\n useEffect(() => {\n if (!isHidden) {\n setSolved(false);\n setAudioStatus('');\n setDisabled(false);\n }\n }, [text, isHidden]);\n\n return (\n <>\n \n
\n {!isHidden && (\n \n
\n \n {text} \n
\n \n \n {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n \n
\n \n \n
\n )}\n ...
\n \n \n
\n )}\n \n );\n};\n\nexport const StyledVocabularyTrainerItem = styled(VocabularyTrainerItem)`\n & .answer-multiple-text:hover:after {\n -webkit-transition: all 0.3s linear;\n -moz-transition: all 0.3s linear;\n -o-transition: all 0.3s linear;\n transition: all 0.3s linear;\n border-left-color: #0098ff;\n }\n & .bubble .hint {\n display: block;\n font-size: 80%;\n font-style: italic;\n }\n`;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgSmileyPositive(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"100%\",\n height: \"100%\",\n viewBox: \"0 0 55 54\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n xmlSpace: \"preserve\",\n style: {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n strokeLinejoin: \"round\",\n strokeMiterlimit: 1.41421\n },\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, /*#__PURE__*/React.createElement(\"circle\", {\n className: \"dot\",\n cx: 27.5,\n cy: 27,\n r: 27,\n style: {\n fill: \"#A9A094\"\n }\n }), /*#__PURE__*/React.createElement(\"g\", {\n id: \"face\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M26.439,37.092l-11.313,-11.314l-2.829,2.829l11.314,11.313l2.828,-2.828Z\",\n style: {\n fill: \"#fff\"\n }\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M39.874,18l-19.092,19.092l2.829,2.828l19.092,-19.092l-2.829,-2.828Z\",\n style: {\n fill: \"#fff\"\n }\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgSmileyPositive);\nexport default __webpack_public_path__ + \"static/media/smiley-positive.3d91069e.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgSmileyNegative(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"100%\",\n height: \"100%\",\n viewBox: \"0 0 55 54\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n xmlSpace: \"preserve\",\n style: {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n strokeLinejoin: \"round\",\n strokeMiterlimit: 1.41421\n },\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, /*#__PURE__*/React.createElement(\"circle\", {\n className: \"dot\",\n cx: 27.5,\n cy: 27,\n r: 27,\n style: {\n fill: \"#A9A094\"\n }\n }), /*#__PURE__*/React.createElement(\"g\", {\n id: \"face\"\n }, /*#__PURE__*/React.createElement(\"circle\", {\n cx: 18.5,\n cy: 18.5,\n r: 3.5,\n style: {\n fill: \"#fff\"\n }\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: 36.5,\n cy: 18.5,\n r: 3.5,\n style: {\n fill: \"#fff\"\n }\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M40.902,32.312l-26.41,5.613l0.624,2.935l26.41,-5.614l-0.624,-2.934Z\",\n style: {\n fill: \"#fff\"\n }\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgSmileyNegative);\nexport default __webpack_public_path__ + \"static/media/smiley-negative.6c289ab6.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components';\nimport { ReactComponent as SmileyPositive } from '../svg/smiley-positive.svg';\nimport { ReactComponent as SmileyNegative } from '../svg/smiley-negative.svg';\n\nexport const StyledSmileyPositive = styled(SmileyPositive)``;\nexport const StyledSmileyNegative = styled(SmileyNegative)``;\n","import { useState } from 'react';\nimport classnames from 'classnames';\nimport styled from 'styled-components';\nimport {\n StyledSmileyNegative as SmileyNegative,\n StyledSmileyPositive as SmileyPositive,\n} from '../../assets/icons/Smiley';\nimport { useRtlContext } from '../../hooks/useRtl';\n\nexport const VocabularyTrainerSmileys = ({ handleCorrectAnswer, handleWrongAnswer, className }) => {\n const ANSWER_STATE = Object.freeze({\n INITIAL: 'initial',\n WRONG: 'wrong',\n CORRECT: 'correct',\n });\n const { isRtl } = useRtlContext();\n const [answerState, setAnswerState] = useState(ANSWER_STATE.INITIAL);\n\n const onPositiveSmileyClicked = e => {\n e.preventDefault();\n setAnswerState(ANSWER_STATE.CORRECT);\n handleCorrectAnswer();\n };\n\n const onNegativeSmileyClicked = e => {\n e.preventDefault();\n setAnswerState(ANSWER_STATE.WRONG);\n handleWrongAnswer();\n };\n\n return (\n \n \n \n
\n \n
\n );\n};\n\nexport const StyledVocabularyTrainerSmileys = styled(VocabularyTrainerSmileys)`\n @media (min-width: 768px) {\n &.isRtl .col-lg-offset-5 {\n margin-right: 0;\n margin-left: 33.3333%;\n }\n }\n`;\n","import { useState } from 'react';\nimport { useTimeout } from './useTimeout';\n\nexport const TRANSITION_STATUS = Object.freeze({\n INITIAL: 'initial',\n BUSY: 'busy',\n READY: 'ready',\n});\n\nexport const useTransition = ({ delay }) => {\n const [transition, setTransition] = useState({ status: TRANSITION_STATUS.INITIAL });\n\n useTimeout(\n {\n callback: () => {\n if (transition.status === TRANSITION_STATUS.BUSY) {\n transition.onTransitionEnd();\n }\n setTransition({ status: TRANSITION_STATUS.READY });\n },\n delay,\n },\n [transition],\n );\n\n const startTransition = newTransition => {\n setTransition({ ...newTransition, status: TRANSITION_STATUS.BUSY });\n };\n\n return { transitionStatus: transition.status, startTransition };\n};\n","import { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport classnames from 'classnames';\nimport { useHistory, useParams } from 'react-router';\nimport { StyledVocabularyTrainerStatus as VocabularyTrainerStatus } from './VocabularyTrainerStatus';\nimport { StyledVocabularyTrainerItem as VocabularyTrainerItem } from './VocabularyTrainerItem';\nimport { StyledVocabularyTrainerSmileys as VocabularyTrainerSmileys } from './VocabularyTrainerSmileys';\nimport { useTransition } from '../../hooks/useTransition';\nimport { getFeedbackUrl } from '../../utils/url/urlFactory';\nimport { FEEDBACK_TYPES } from '../../constants/feedback';\n\nexport const VocabularyTrainerExercise = ({ vocabularies, handleExerciseEnd, className }) => {\n const [isSolved, setSolved] = useState(false);\n const [correctAnswers, setCorrectAnswers] = useState(0);\n const [trainerVocabularies, setTrainerVocabularies] = useState(vocabularies);\n const history = useHistory();\n const { langCode } = useParams();\n\n const nextVocabulary = newTrainerVocabularies => {\n const slicedTrainerVocabularies = newTrainerVocabularies.slice(1);\n setTrainerVocabularies(slicedTrainerVocabularies);\n setSolved(false);\n if (!slicedTrainerVocabularies.length) {\n handleExerciseEnd();\n }\n };\n\n const { transitionStatus, startTransition } = useTransition({\n delay: 300,\n });\n\n useEffect(() => {\n if (vocabularies.length === 0) {\n history.push(getFeedbackUrl(FEEDBACK_TYPES.VOCABULARY_TRAINER_NO_VOCABULARIES, langCode));\n }\n }, [history, langCode, vocabularies.length]);\n\n const onSolved = () => {\n setSolved(true);\n };\n\n const handleCorrectAnswer = () => {\n startTransition({ onTransitionEnd: () => nextVocabulary(trainerVocabularies) });\n setCorrectAnswers(value => value + 1);\n };\n const handleWrongAnswer = () => {\n const newTrainerVocabularies = [...trainerVocabularies, trainerVocabularies[0]];\n startTransition({ onTransitionEnd: () => nextVocabulary(newTrainerVocabularies) });\n };\n\n if (!trainerVocabularies.length) {\n return null;\n }\n\n return (\n \n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n \n
\n \n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n \n
\n \n
\n )}\n \n
\n \n );\n};\n","import gql from 'graphql-tag';\nimport { useParams } from 'react-router';\nimport { useSelector } from 'react-redux';\nimport {\n PlacementAndFinalTestResult,\n placementResultFragment,\n} from '../components/PlacementResult/PlacementAndFinalTestResult';\nimport { PageContainer } from '../components/Page/PageContainer';\nimport { WithGraphQLQueryHandling } from '../components/WithGraphQLQueryHandling/WithGraphQLQueryHandling';\nimport { sortByLearningLevel } from '../utils/learningLevelUtils';\nimport { toLang } from '../utils/mappers/langMapper';\nimport { lessonOverviewPartsFragment } from '../components/Lesson/Lesson';\nimport { userDataSelector } from '../state/user/userSelectors';\nimport { metaDataFragment } from '../components/Page/PageMetaData';\nimport { gtmDataLayerFragment } from '../components/GoogleTagManager';\n\nexport const placementResultPageQuery = ({ handicap }) => gql`\n query PlacementResultPage($id: Int!, $lessonIdString: String!, $amount: Int!, $lang: Language!, $type: ModelType!) {\n lesson: content(id: $id, lang: $lang) {\n ... on Lesson {\n id\n name\n dkLearningLevel\n dwLinks: contentLinks(targetTypes: [NAVIGATION]) {\n id: targetId\n description\n name\n }\n }\n ...${`PlacementOverviewParts${handicap || ''}`}\n ...${metaDataFragment.name}\n ${gtmDataLayerFragment.partial()}\n }\n\n dkCourses: contentsByType(\n type: $type\n lang: $lang\n amount: $amount\n filters: { field: \"dkLearningLevel\", value: [\"2\", \"4\"] }\n ) {\n ...PlacementResult\n }\n\n dkCoursesInGerman: contentsByType(\n type: $type\n lang: GERMAN\n amount: $amount\n filters: { field: \"dkLearningLevel\", value: [\"8\"] }\n ) {\n ...PlacementResult\n }\n \n currentCourse: contentsByType(\n lang: $lang\n type: COURSE\n amount: 1\n filters: { field: \"contentLinks.targetId\", value: [$lessonIdString] }\n ) {\n ... on Course {\n id\n name\n dkLearningLevel\n contentLinks(targetTypes: LESSON) {\n targetId\n additionalInformation\n }\n }\n }\n }\n ${lessonOverviewPartsFragment.fragment({ scope: 'Placement', handicap })}\n ${placementResultFragment}\n ${metaDataFragment.fragment({ type: 'Lesson' })}\n`;\n\nexport const PlacementAndFinalTestResultPage = ({ contentId }) => {\n const { langCode } = useParams();\n const { handicap } = useSelector(userDataSelector) || {};\n\n const placementResultPageQueryVariables = {\n amount: 10,\n id: +contentId,\n lessonIdString: contentId,\n lang: toLang(langCode),\n type: 'COURSE',\n };\n\n return (\n \n
\n \n
\n \n \n \n {showCertificateButton && (\n \n {dwLinks.map(link => {\n if (!link.name.includes(nextLevel)) return '';\n return (\n \n )}\n
\n \n
\n \n
\n \n
\n \n
\n )}\n {nextCourseUrl && (\n <>\n \n
\n \n
\n \n
\n \n
\n {nextLevel}
\n\n
\n \n )}\n {dwLinks && dwLinks.length > 0 && (\n \n \n
\n \n
\n );\n })}\n \n {link.name}\n
\n{link.description}
\n\n
\n );\n};\n\nexport const StyledHelp = styled(Help)`\n .content {\n margin: 10px;\n }\n`;\n","import gql from 'graphql-tag';\nimport { useParams } from 'react-router';\nimport { toLang } from '../utils/mappers/langMapper';\nimport { PageContainer } from '../components/Page/PageContainer';\nimport { WithGraphQLQueryHandling } from '../components/WithGraphQLQueryHandling/WithGraphQLQueryHandling';\nimport { helpFragment, StyledHelp as Help } from '../components/Help/Help';\nimport { PageMetaData } from '../components/Page/PageMetaData';\nimport { PAGE_TYPES } from '../constants/pageTypes';\nimport {\n gtmDataLayerFragment,\n GtmScriptWithDataLayer,\n} from '../components/GoogleTagManager/GtmScriptWithDataLayer';\n\nexport const helpPageQuery = gql`\n query HelpPage($lang: Language!) {\n help(lang: $lang, appName: \"mdl\") {\n ...${helpFragment.name}\n ${gtmDataLayerFragment.partial()}\n }\n }\n ${helpFragment.fragment()}\n`;\n\nexport const HelpPage = () => {\n const { langCode } = useParams();\n\n const helpPageQueryVariables = {\n lang: toLang(langCode),\n };\n\n return (\n \n
\n {shortTitle}
\n\n
\n );\n};\n\nexport const StyledVocabularySearch = styled(VocabularySearch)`\n .tt-menu {\n visibility: hidden;\n }\n\n .tt-open {\n visibility: visible;\n }\n\n .twitter-typeahead {\n position: relative;\n display: inline-block;\n }\n`;\n","import { useState, useEffect } from 'react';\n\nexport default function useDebounce(value, delay) {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n return () => {\n clearTimeout(handler);\n };\n }, [delay, value]);\n\n return debouncedValue;\n}\n","import { StyledStandardButton as StandardButton } from '../../StandardButton/StandardButton';\n\nexport const VocabularyMoreButton = ({ handleClick, style }) => (\n \n
\n \n \n \n dispatch({\n type: TYPE_SET_INPUT,\n payload: { input: e.target.value },\n })\n }\n onKeyUp={handleKeys}\n onBlur={handleBlur}\n onFocus={handleFocus}\n ref={searchInput}\n />\n \n
\n \n
\n \n {distinctSuggestions &&\n distinctSuggestions.length > 0 &&\n distinctSuggestions.map((suggestion, index) => (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n
\n \n
\n);\n","export const VocabularyItem = ({ item }) => {\n return (\n \n
\n \n
\n \n
\n );\n};\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport { useEffect, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { ReactComponent as IconHintCircleOrange } from '../../assets/svg/icon-hint-circle-orange.svg';\nimport { StyledVocabularySearch } from './VocabularySearch/VocabularySearch';\nimport { VocabularyMoreButton } from './VocabularyMoreButton/VocabularyMoreButton';\nimport { I18nText } from '../I18n/I18nText';\nimport { ContentHeadline } from '../ContentContainer/ContentHeadline/ContentHeadline';\nimport { combineVocabularyData } from '../../hooks/vocabularySearchHooks';\nimport { VocabularyItem } from './VocabularyItem';\nimport { getQueryVariables } from './VocabularyQuery';\n\nexport const Vocabulary = ({ data, refetch }) => {\n const { langCode } = useParams();\n\n const [startValue, setStartValue] = useState(0);\n const [vocabularyData, setVocabularyData] = useState(combineVocabularyData(data));\n const [isNotEmptyResp, setIsNotEmptyResp] = useState(false);\n const [searchQuery, setSearchQuery] = useState('');\n\n const findAdditionalData = shouldConcat => {\n refetch(\n getQueryVariables({\n langCode,\n offset: startValue,\n searchQuery,\n }),\n ).then(resp => {\n const combinedVocabularyData = combineVocabularyData(resp.data);\n shouldConcat\n ? setVocabularyData(prevState => [...prevState, ...combinedVocabularyData])\n : setVocabularyData(combinedVocabularyData);\n setIsNotEmptyResp(combinedVocabularyData.length > 0);\n if (combinedVocabularyData.length > 0) {\n setStartValue(prevState => prevState + 12);\n }\n });\n };\n\n useEffect(() => {\n findAdditionalData();\n }, [searchQuery]);\n\n return (\n \n
\n \n
\n \n \n {item.name}\n \n
\n {item.subTitle}\n
\n \n
\n \n
\n \n
\n \n );\n};\n","import { useParams } from 'react-router-dom';\nimport { PageMetaData } from '../components/Page/PageMetaData';\nimport { WithGraphQLQueryHandling } from '../components/WithGraphQLQueryHandling/WithGraphQLQueryHandling';\nimport { GTM_NO_CONTENT_PAGE_IDS, PAGE_TYPES } from '../constants/pageTypes';\nimport { Vocabulary } from '../components/Vocabulary/Vocabulary';\nimport { PageContainer } from '../components/Page/PageContainer';\nimport { getQueryVariables, vocabularySearchQuery } from '../components/Vocabulary/VocabularyQuery';\nimport { GtmScriptWithDataLayer } from '../components/GoogleTagManager/GtmScriptWithDataLayer';\n\nexport const VocabularyPage = () => {\n const { langCode } = useParams();\n\n const vocabularyPageQueryVariables = getQueryVariables({\n langCode,\n });\n\n return (\n \n
\n \n \n findAdditionalData(true)}\n />\n
\n \n \n
\n \n {\n setStartValue(0);\n setSearchQuery(newSearchQuery);\n }}\n />\n
\n \n \n
\n \n {vocabularyData.map(item => (\n
\n \n \n
\n