\n \n {content}\n \n \n )\n}\n\nHint.propTypes = {\n content: PropTypes.string.isRequired,\n}\n","import PropTypes from 'prop-types'\nimport styled, { css } from 'styled-components'\n\nimport { Box, media, Text } from '@redriverpress/system'\n\nimport Definition from 'Common/components/ClickableTooltip'\nimport Hint from './Hint'\n\nconst correctStyles = css`\n border-bottom: 2px solid ${props => props.theme.colors.green500};\n pointer-events: none;\n`\n\nconst incorrectStyles = css`\n background: ${props => props.theme.colors.red50};\n border-bottom: 2px solid ${props => props.theme.colors.red500};\n`\n\nconst Input = styled.input`\n appearance: none;\n background: transparent;\n border: none;\n border-radius: 0;\n border-bottom: 2px solid ${props => props.theme.colors.gray400};\n border-top: 2px solid transparent;\n line-height: 1;\n width: 12ch;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n text-align: center;\n transition: background 0.3s ease-in-out, border-color 0.15s ease-in-out;\n\n ${media.md`\n width: 20ch;\n `}\n\n &:focus {\n background: ${props => props.theme.colors.blue100};\n border-bottom: 2px solid ${props => props.theme.colors.blue500};\n border-top: 2px solid ${props => props.theme.colors.white};\n outline: none;\n }\n\n ${props => props.mode === 'correct' && correctStyles}\n ${props => props.mode === 'fix' && incorrectStyles}\n ${props => props.mode === 'example' && `pointer-events: none;`}\n`\nInput.displayName = 'LATInput'\n\nconst PromptContent = content => (\n \n \n Definition:\n \n {content}\n \n)\n\nexport default function Blank({\n isCorrect,\n isSubmitted,\n prompt,\n promptType,\n ...props\n}) {\n return (\n \n \n {promptType === 'definition' && (\n } />\n )}\n {promptType === 'hint' && }\n \n )\n}\n\nBlank.defaultProps = {\n mode: 'default',\n prompt: null,\n promptType: 'none',\n}\n\nBlank.propTypes = {\n mode: PropTypes.oneOf(['correct', 'default', 'example', 'fix']),\n prompt: PropTypes.string,\n promptType: PropTypes.oneOf(['definition', 'hint', 'none']),\n}\n","import PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport {\n Box,\n LoadingSpinner,\n Svg,\n TransparentButton,\n Tooltip,\n tooltipDelayDuration,\n} from '@redriverpress/system'\n\nimport useImmersiveReader from '../hooks/useImmersiveReader'\n\nconst StyledBox = styled(Box)`\n background: ${props => props.theme.colors.gray200};\n\n &:hover {\n background: ${props => props.theme.colors.blue600};\n color: ${props => props.theme.colors.white};\n & svg {\n fill: ${props => props.theme.colors.white};\n }\n }\n`\n\nconst VIMEO_CAPTION_REGEX = /(.*?)<\\/p>/g\n\nexport default function ImmersiveReaderContent({ title, content }) {\n const { launchReader, loading } = useImmersiveReader()\n\n return (\n \n \n \n launchReader({\n title,\n content: content.replace(VIMEO_CAPTION_REGEX, ''),\n })\n }\n >\n \n {loading ? (\n \n ) : (\n \n \n \n \n \n \n \n \n )}\n \n \n \n \n \n Immersive Reader\n \n \n )\n}\n\nImmersiveReaderContent.defaultProps = {\n title: '',\n}\n\nImmersiveReaderContent.propTypes = {\n title: PropTypes.string,\n content: PropTypes.string.isRequired,\n}\n","import { launchAsync } from '@microsoft/immersive-reader-sdk'\nimport { useState } from 'react'\n\nimport xhr from 'Common/utils/xhr'\n\nexport default function useImmersiveReader() {\n const [loading, setLoading] = useState(false)\n\n const saveToken = tokenData => {\n localStorage.setItem('immersive-reader-token', tokenData.token)\n localStorage.setItem('immersive-reader-subdomain', tokenData.subdomain)\n localStorage.setItem('immersive-reader-expires-at', tokenData.expires_on)\n }\n\n const getToken = async () => {\n const tokenExpiresAt = localStorage.getItem('immersive-reader-expires-at')\n const token = localStorage.getItem('immersive-reader-token')\n const subdomain = localStorage.getItem('immersive-reader-subdomain')\n\n // Checking if there's any info missing for the request and if the token has expired\n // following the logic in https://docs.microsoft.com/en-us/azure/applied-ai-services/immersive-reader/how-to-cache-token\n if (\n !tokenExpiresAt ||\n !subdomain ||\n !token ||\n Date.now() / 1000 > tokenExpiresAt // check if current time in seconds is greater than the token expiration time\n ) {\n const { data } = await xhr({\n url: '/api/v1/immersive_reader_token',\n method: 'GET',\n })\n\n saveToken(data)\n\n return data\n }\n\n return {\n token: localStorage.getItem('immersive-reader-token'),\n subdomain: localStorage.getItem('immersive-reader-subdomain'),\n }\n }\n\n const launchReader = async ({ title, content }) => {\n setLoading(true)\n const { token, subdomain } = await getToken()\n\n const options = { uiZIndex: 6 }\n const data = {\n title,\n chunks: [\n {\n content,\n mimeType: 'text/html',\n },\n ],\n }\n\n launchAsync(token, subdomain, data, options)\n .then(() => setLoading(false))\n .catch(() => {\n setLoading(false)\n localStorage.removeItem('immersive-reader-token')\n localStorage.removeItem('immersive-reader-subdomain')\n localStorage.removeItem('immersive-reader-expires-at')\n })\n }\n\n return { launchReader, loading }\n}\n","import xhr from 'Common/utils/xhr'\nimport { activitiesEndpoint } from 'Endpoints'\n\nexport default function submitHomeworkActivity(id) {\n return xhr({\n url: `${activitiesEndpoint}/${id}`,\n method: 'PUT',\n data: {\n homework_activity: {\n submitted: true,\n },\n },\n })\n}\n"],"sourceRoot":""}