\n
\n );\n }\n\n return elements ? (\n Thanks for your feedback!
\n {closeModal ? (\n\n \n
\n ) : null}\n \n {closeModal ? (\n
\n ) : null;\n};\n\nexport default Webform;\n","import React, { useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faInfoCircle } from '@fortawesome/free-solid-svg-icons';\nimport styles from './constructionBanner.module.scss';\n\nconst ConstructionBanner = ({ setModalIsOpen }) => {\n const [infoExpanded, setInfoExpanded] = useState(false);\n return (\n \n \n
\n ) : null}\n {data.webformById.title}
\n \n\n
\n );\n};\n\nexport default ConstructionBanner;\n","import React, { useState} from 'react';\nimport styles from './tabs.module.scss';\n\nconst Tabs = (props) => {\n const [tabState, setTabState] = useState(0);\n \n const toggleTab = (index) => {\n setTabState(index);\n }\n\n const handleFocus = (e) => {\n if (e.currentTarget){\n let tab = e.currentTarget;\n let parent = tab.parentElement;\n let tabList = parent.parentElement;\n \n if (e.key == 'ArrowRight') {\n if (tab === tabList.lastChild.firstChild) {\n let nextSibling = tabList.firstChild.firstChild;\n nextSibling.tabIndex = \"0\";\n nextSibling.focus();\n tab.tabIndex = \"-1\";\n } else {\n let nextSibling = parent.nextSibling.firstChild;\n nextSibling.tabIndex = \"0\";\n nextSibling.focus();\n tab.tabIndex = \"-1\";\n }\n }\n\n if (e.key == 'ArrowLeft'){\n if (tab === tabList.firstChild.firstChild) {\n let prevSibling = tabList.lastChild.firstChild;\n prevSibling.tabIndex = \"0\";\n prevSibling.focus();\n tab.tabIndex = \"-1\";\n } else { \n let prevSibling = parent.previousSibling.firstChild;\n prevSibling.tabIndex = \"0\";\n prevSibling.focus();\n tab.tabIndex = \"-1\";\n }\n }\n }\n }\n\n const TabList = () => {\n return (\n \n
\n \n This module is getting an update!{' '}\n \n
\n\n MOOSE is continually evolving so existing modules need upkeep and updating from time to time. You have found a\n module from the first year of MOOSE that we are actively working on updating, which may mean that you encounter\n broken links or other things that make it hard for you to work on the module. If you run into one of these\n issues, use the{' '}\n {' '}\n button on the module page to let us know and we will direct our efforts to fix that issue ASAP!\n
\n\n
\n )\n }\n\n const TabPanel = () => {\n return (\n \n
\n - {props.tab.map((item, index) => (\n
- \n \n \n ))}
\n
\n ) \n }\n\n return (\n \n { props.children.length ? props.children.map((item, index) => (\n
\n {item}
\n )) : {props.children}
}\n \n
\n )\n}\n\nexport default Tabs;","import React, { useState, useContext } from \"react\";\nimport styles from './unitProgress.module.scss'\nimport UserProgressContext from '../../context/userProgressContext';\n\nconst UnitProgress = (props) => {\n const [unitState, setUnitState] = useState(0);\n const userProgressData = useContext(UserProgressContext);\n \n const toggleUnit = (index) => {\n setUnitState(index);\n props.setUnitSelected(index);\n }\n\n const handleFocus = (e) => {\n if (e.currentTarget){\n let tab = e.currentTarget;\n let parent = tab.parentElement;\n let tabList = parent.parentElement;\n \n if (e.key == 'ArrowRight') {\n if (tab === tabList.lastChild.querySelector(\"button\")) {\n let nextSibling = tabList.firstChild.querySelector(\"button\");\n nextSibling.tabIndex = \"0\";\n nextSibling.focus();\n tab.tabIndex = \"-1\";\n } else {\n let nextSibling = parent.nextSibling.querySelector(\"button\");\n nextSibling.tabIndex = \"0\";\n nextSibling.focus();\n tab.tabIndex = \"-1\";\n }\n }\n\n if (e.key == 'ArrowLeft'){\n if (tab === tabList.firstChild.querySelector(\"button\")) {\n let prevSibling = tabList.lastChild.querySelector(\"button\");\n prevSibling.tabIndex = \"0\";\n prevSibling.focus();\n tab.tabIndex = \"-1\";\n } else { \n let prevSibling = parent.previousSibling.querySelector(\"button\");\n prevSibling.tabIndex = \"0\";\n prevSibling.focus();\n tab.tabIndex = \"-1\";\n }\n }\n }\n }\n\n const ProgressCircle = () => {\n let radius = \"50\";\n let center = \"70\";\n let circumference = radius * 2 * Math.PI;\n\n function strokeDashoffset (percent) {\n let str = circumference - percent * circumference;\n return str;\n }\n\n\n return (\n - \n {\n props.lessons.map((item,index) => {\n let nLessonCompleted = 0;\n\t item.entity.fieldLessons.forEach(lesson => {\n // TODO: Will need to rename the variable lessonsViewed to lessonsCompleted to make more sense (after tracking completed lessons).\n userProgressData?.lessonsViewed.forEach(e => {\n if (e.id == lesson.entity.id) {\n nLessonCompleted++;\n }\n });\n });\n return (\n
- \n \n Unit {index + 1}\n \n )\n })\n }\n
\n
\n )\n }\n\n const Tools = () => {\n return (\n Grades
\n {moduleData.fieldGrade &&- {moduleData.fieldGrade.map((grade) => (\n
- \n {grade.entity.name}\n \n ))}
Topics
\n {moduleData.fieldTopic &&- {moduleData.fieldTopic.map((topic) => (\n
- \n {topic.entity.name}\n \n ))}
Activities
\n {moduleData.fieldActivity &&- {moduleData.fieldActivity.map((activity) => (\n
- \n {activity.entity.name}\n \n ))}
\n {moduleData.fieldToolsNeeded &&
\n )\n }\n\n const Standards = () => {\n return (\n {moduleData.fieldToolsNeeded}
}\n\n {moduleData.fieldStandard &&
\n )\n }\n\n const Teacher = () => {\n return (\n - {moduleData.fieldStandard.map((standard) => (\n
- \n {standard.entity.name}\n \n ))}
\n {moduleData.fieldTeacherNotes &&
\n )\n }\n\n return (\n {ReactHtmlParser(moduleData.fieldTeacherNotes)}
}\n\n {moduleData?.fieldUnderConstruction ? \n setModalIsOpen(false)}\n style={customModalStyles}\n contentLabel=\"Feedback Form\"\n >\n {webform}\n \n
\n );\n};\n\nexport default OverviewInfo;\n","export default __webpack_public_path__ + \"interior-grade.0fed973e.svg\";","import React from 'react';\nimport GradeIcon from '../../assets/icons/interior-grade.svg';\n\nconst InteriorGradeIcon = ({ moduleGradeData , width, height, color, backGround, text, border }) => {\n\n function findModuleGrade(gradeLevel) {\n let icon;\n let aria;\n let defaultColor;\n\n if (gradeLevel <= 2) {\n icon = 'sign';\n aria = 'Sign icon';\n defaultColor = '#0D7F60';\n } else if (gradeLevel <= 5) {\n icon = 'compass';\n aria = 'Compass icon';\n defaultColor = '#CC421D';\n } else if (gradeLevel <= 8) {\n icon = 'map';\n aria = 'Map icon';\n defaultColor = '#00788F';\n } else {\n icon = 'bag';\n aria = 'Backpack icon';\n defaultColor = '#AB6312';\n }\n\n const textStyle = {\n color: defaultColor,\n }\n\n return (\n \n \n
\n \n Unsure where to start?\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n {ReactHtmlParser(moduleData.fieldImageCredit)}
\n\n
\n \n
\n {moduleData.title}
\n {moduleData.fieldCreatedBy.length ? (\n\n Module created by \n
\n ) : (\n ''\n )}\n {lessonsLoggedCount > 0 && lastViewedLessonId ? (\n <>\n - \n {moduleData.fieldCreatedBy.map((creator, index) => (\n
- {creator} \n ))}\n
{descriptionText}
\n \n \n
\n {text && {text}}\n \n )\n }\n\n return (\n <>\n {moduleGradeData.map(gradeData => findModuleGrade(gradeData.entity.fieldGradeNumber))}\n \n );\n};\n\nexport default InteriorGradeIcon;\n","import React from 'react';\nimport styles from \"./mySectionsProgress.module.scss\";\n\nconst MySectionsProgress = ({ lesson }) => {\n\tlet nCompletedSection = 0;\n\tlesson.entity.fieldComponents.forEach(item => {\n\t\tif (item.sectionProgress.length > 0) {\n\t\t\tnCompletedSection++;\n\t\t}\n\t});\n\treturn (\n\t\t\n\t\t\t
\n\t);\n};\n\nexport default MySectionsProgress;","import React, { useContext } from 'react';\nimport { withRouter, Link } from 'react-router-dom';\nimport LastLessonViewedContext from '../../context/lastLessonViewedContext';\nimport { stringToPathComponent, routerGetPath } from '../../util/helpers';\nimport styles from './overviewLessonGroup.module.scss';\nimport InteriorGradeIcon from '../interiorGradeIcon/interiorGradeIcon';\nimport MySectionsProgress from \"../mySectionsProgress/mySectionsProgress\";\n\nconst OverviewLessonGroup = ({ history, lessons, groupId, lessonsViewedIdsPerGroup, gradeLevel }) => {\n const path = routerGetPath(history);\n const lastLessonViewedData = useContext(LastLessonViewedContext);\n let lessonsViewedIds = [];\n\n if (lessonsViewedIdsPerGroup) {\n const lessonsViewedGroup = lessonsViewedIdsPerGroup.filter(\n lessonGroup => lessonGroup.lessonGroupId === parseInt(groupId)\n );\n\n if (lessonsViewedGroup.length > 0) {\n lessonsViewedIds = lessonsViewedGroup[0].lessonGroupLessonsViewedIds;\n }\n }\n\n const optionalLesson = (\n Progress
\n\t\t\t\n {lesson.entity.fieldComponents.map((section) => (\n \n ))}\n \n\t\t\t\n {nCompletedSection} out of {lesson.entity.fieldComponents.length} sections completed\n \n\t\t\n
\n );\n\n return (\n \n
\n\n - \n {\n lessons.map((lesson, index) => {\n if (lesson.entity.fieldComponents.length > 0) {\n return
\n {`${lesson.entity.fieldRequired ? 'required' : 'optional'}`}
\n \n
\n \n {lesson.entity.title}\n \n {`Lesson ${index + 1}`}
\n {lesson.entity.fieldRequired ? null : optionalLesson}\n\n {`${lessonsViewedIds.includes(lesson.entity.uniqueId) ? 'completed' : ''}`}{' '}\n
\n {`${\n lastLessonViewedData?.lastViewedLessonId === lesson.entity.uniqueId ? 'last viewed' : ''\n }`}
\n \n {moduleData.fieldLessonCategories.map((lessonGroup, index) => (\n \n {moduleData.fieldFoundationalSkillsMods[0].entity.title}\n \n ) : null}\n
\n );\n};\n\nexport default OverviewLessons;\n","import React, { useState } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { MODULE_OVERVIEW_QUERY } from './overview.graphql';\nimport LoadingSpinner from '../loadingSpinner/loadingSpinner';\nimport OverviewInfo from '../overviewInfo/overviewInfo';\nimport OverviewLessons from '../overviewLessons/overviewLessons';\nimport styles from './overview.module.scss';\n\nconst Overview = ({ moduleId }) => {\n const [unitSelected, setUnitSelected] = useState(0);\n const { loading, error, data } = useQuery(MODULE_OVERVIEW_QUERY, { variables: { moduleId } });\n\n let firstLessonId;\n let firstLessonTitle;\n let firstSectionId;\n\n if (loading) return \n
\n ))}\n {moduleData?.fieldFoundationalSkillsMods.length ? (\n \n {`UNIT ${unitSelected + 1}`} - {lessonGroup.entity.fieldTitle}\n
\n\n
\n );\n};\n\nexport default Overview;\n","import React from 'react';\n\nconst GlossaryContext = React.createContext(null);\n\nexport default GlossaryContext;\n","import gql from 'graphql-tag';\n\nexport const MODULE_INTERIOR_QUERY = gql`\n query($moduleId: String!) {\n nodeById(id: $moduleId) {\n title\n id\n entityId\n ... on NodeModule {\n fieldUnderConstruction\n fieldGlossary {\n entity {\n ... on ParagraphGlossaryTerm {\n fieldTitle\n fieldBody {\n processed\n }\n }\n }\n }\n fieldLessonCategories {\n entity {\n id\n ... on ParagraphLessonCategory {\n fieldTitle\n fieldLessons {\n entity {\n id\n entityId\n ... on NodeLesson {\n uniqueId\n title\n fieldRequired\n fieldComponents {\n parentId\n id\n sectionProgress {\n entity {\n id\n ... on ProgressSectionLog {\n created\n }\n }\n __typename\n }\n components {\n __typename\n entity {\n entityId\n __typename\n }\n }\n }\n }\n }\n }\n }\n }\n }\n fieldFoundationalSkillsMods {\n entity {\n entityId\n title\n }\n }\n fieldGrade {\n entity {\n id\n name\n entityId\n ... on TaxonomyTermGradeLevels {\n fieldGradeNumber\n }\n }\n }\n }\n }\n }\n`;\n","import React from 'react';\nimport { withRouter } from 'react-router-dom';\nimport styles from './interiorBackToOverview.module.scss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faBookOpen } from '@fortawesome/free-solid-svg-icons';\n\nconst InteriorBackToOverview = ({ history, moduleTitle }) => {\n const fullPath = history.location.pathname;\n const path = fullPath.split('/step')[0];\n\n return (\n \n );\n};\n\nexport default withRouter(InteriorBackToOverview);\n","import React, { useContext } from 'react';\nimport { withRouter, Link } from 'react-router-dom';\nimport { stringToPathComponent, routerGetPath } from '../../util/helpers';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTimesCircle } from '@fortawesome/free-solid-svg-icons';\nimport styles from './myProgress.module.scss';\nimport InteriorGradeIcon from '../interiorGradeIcon/interiorGradeIcon';\nimport MySectionsProgress from \"../mySectionsProgress/mySectionsProgress\";\nimport UserProgressContext from \"../../context/userProgressContext\";\n\nconst MyProgress = ({ history, moduleData, closeProgressModal }) => {\n\n const path = routerGetPath(history);\n\n const optionalLesson = (\n \n
\n \n
\n \n
\n );\n\n const userProgressData = useContext(UserProgressContext);\n \n return (\n <>\n \n { closeProgressModal && \n \n }\n
\n \n );\n};\n\nexport default withRouter(MyProgress);\n","import React, { useRef, useState, useEffect } from 'react';\nimport { withRouter, useLocation } from 'react-router-dom';\nimport { Breakpoint } from 'react-socks';\nimport Modal from 'react-modal';\nimport InteriorBackToOverview from '../interiorBackToOverview/interiorBackToOverview';\nimport OverviewLessons from '../overviewLessons/overviewLessons';\nimport styles from './interiorNav.module.scss';\nimport Webform from '../webform/webform';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faRoute, faComment, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';\nimport InteriorGradeIcon from '../interiorGradeIcon/interiorGradeIcon';\nimport MyProgress from '../myProgress/myProgress';\n\nconst customModalStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n transform: 'translate(-50%, -50%)',\n padding: '0',\n border: '0',\n borderRadius: '0',\n background: 'transparent',\n },\n overlay: {\n zIndex: '200',\n backgroundColor: 'rgba(42, 42, 42, 0.65)',\n },\n};\n\nconst progressModalStyles = {\n content: {\n top: '15%',\n right: '10%',\n bottom: '15%',\n left: '10%',\n maxWidth: '900px',\n margin: 'auto',\n padding: '0',\n border: '0',\n borderRadius: '15px',\n background: 'transparent',\n },\n overlay: {\n zIndex: '200',\n backgroundColor: 'rgba(42, 42, 42, 0.65)',\n },\n};\n\nModal.setAppElement('#app-root');\n\nconst usePrevious = value => {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n};\n\nconst useLocationChange = action => {\n const location = useLocation();\n const prevLocation = usePrevious(location);\n useEffect(() => {\n action(location, prevLocation);\n }, [action, location, prevLocation]);\n};\n\nconst InteriorNav = ({ moduleTitle, moduleData, setWebformIsOpen, webformIsOpen, setProgressIsOpen, progressIsOpen }) => {\n const [navOpen, setNavOpen] = useState(false);\n\n useLocationChange((location, prevLocation) => {\n if (prevLocation?.pathname && prevLocation.pathname !== location.pathname) {\n setNavOpen(false);\n }\n });\n\n const openModal = () => {\n setWebformIsOpen(true);\n };\n\n const closeModal = () => {\n setWebformIsOpen(false);\n };\n\n const openProgressModal = () => {\n setProgressIsOpen(true);\n };\n\n const closeProgressModal = () => {\n setProgressIsOpen(false);\n };\n\n const webform = My Progress
\n- \n {\n moduleData.fieldLessonCategories.map((lesson, index) => {\n let nLessonCompleted = 0;\n lesson.entity.fieldLessons.forEach(lesson => {\n // TODO: Will need to rename the variable lessonsViewed to lessonsCompleted to make more sense (after tracking completed lessons).\n userProgressData?.lessonsViewed.forEach(e => {\n if (e.id == lesson.entity.id) {\n nLessonCompleted++;\n }\n });\n });\n return (\n
- \n \n\n
\n
\n\n {`Unit ${index + 1}`}-\n {lesson.entity.fieldTitle}\n
\n \n Lessons complete:\n {`${nLessonCompleted}/${lesson.entity.fieldLessons.length}`}\n \n- \n {\n lesson.entity.fieldLessons.map((lesson, index) => {\n if (lesson.entity.fieldComponents.length > 0) {\n return
- \n \n\n\n\n
{`Lesson ${index + 1}`}
\n {lesson.entity.fieldRequired ? null : optionalLesson}\n\n \n }\n }\n )}\n
\n );\n })\n }\n - \n
\n \n \n \n \n
\n );\n};\n\nexport default withRouter(InteriorNav);\n","export const stops = [\n {\n content:\n 'Welcome to your selected MOOSE module! This tour will help you find the things you can always expect to find in any module you explore.',\n },\n {\n selector: '.tourStopBack',\n content: 'Click on this button to navigate back to the overview page.',\n },\n {\n selector: '.tourStopNext',\n content: 'Clicking this button when you are done with a page is the easiest way to navigate through the module.',\n },\n {\n selector: '.tourStopLessons',\n content:\n 'In this menu you will find all the different lesson groups and lessons for the module. This will help you navigate and see what is coming next!',\n },\n {\n selector: '.tourStopBreak',\n content:\n 'You’ve found the Break Library! Here you have access to lots of different kinds of breaks so you can choose one that looks good to you.',\n },\n {\n selector: '.tourStopFeedback',\n content:\n 'Did you find a broken link? Is there something we forgot to include? Click here to give us your feedback on the module so we can make it better!',\n },\n {\n selector: '.tourStopEnd',\n content: 'That ends our tour! Click anywhere to begin your module.',\n },\n];\n","import React from 'react';\nimport Tour from 'reactour';\nimport { stops } from '../../../data/interiorTour';\n\nconst InteriorTour = ({ isTourOpen, setIsTourOpen }) => (\n <>\n \n \n \n
\n \n
\n {webform}
\n \n \n
\n \n
\n \n {navOpen ? (\n \n ) : null}\n \n {' '}\n
\n );\n};\n\nexport default LessonText;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_IMAGE_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n id\n ... on ParagraphImage {\n fieldImage {\n entity {\n ... on MediaImage {\n fieldMediaImage {\n alt\n ... on FieldMediaImageFieldMediaImage {\n derivative(style: MODULEFULLWIDTH) {\n url\n }\n }\n }\n }\n }\n }\n fieldCaption\n fieldCredit\n }\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { PARAGRAPH_IMAGE_QUERY } from './lessonImage.graphql';\nimport Image from '../image/image';\nimport styles from './lessonImage.module.scss';\n\nconst LessonImage = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_IMAGE_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n return (\n {text}
\n \n
\n );\n};\n\nexport default LessonImage;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_IMAGE_GRID_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n id\n ... on ParagraphImageGrid {\n fieldTitle\n fieldImages {\n targetId\n entity {\n ... on ParagraphImage {\n fieldImage {\n entity {\n ... on MediaImage {\n fieldMediaImage {\n alt\n ... on FieldMediaImageFieldMediaImage {\n derivative(style: MODULEFULLWIDTH) {\n url\n }\n }\n }\n }\n }\n }\n fieldCaption\n fieldCredit\n }\n }\n }\n }\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { PARAGRAPH_IMAGE_GRID_QUERY } from './lessonImageGrid.graphql';\nimport Image from '../image/image';\nimport styles from './lessonImageGrid.module.scss';\n\nconst LessonImageGrid = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_IMAGE_GRID_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n let title = '';\n let images = [];\n\n if (data) {\n title = data.paragraphById.fieldTitle;\n images = data.paragraphById.fieldImages;\n }\n\n return (\n {data?.paragraphById?.fieldCaption}
\n{data?.paragraphById?.fieldCredit}
\n\n
\n );\n};\n\nexport default LessonImageGrid;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_VIDEO_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n ... on ParagraphVideo {\n fieldVideo {\n entity {\n ... on MediaRemoteVideo {\n fieldMediaOembedVideo\n }\n }\n }\n fieldTitle\n fieldTranscript\n }\n }\n }\n`;\n","import React, { useState } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport ReactPlayer from 'react-player/lazy';\nimport { PARAGRAPH_VIDEO_QUERY } from './lessonVideo.graphql';\nimport styles from './lessonVideo.module.scss';\n\nconst LessonVideo = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_VIDEO_QUERY, { variables: { paragraphId } });\n const [transcriptOpen, setTranscriptOpen] = useState(false);\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n let transcript;\n if (data && data?.paragraphById?.fieldTranscript) {\n transcript = data.paragraphById.fieldTranscript.split('\\n').map((text, index) => {title}
\n\n {images.map(image => {\n const mediaImage = image?.entity?.fieldImage?.entity?.fieldMediaImage;\n return mediaImage ? (\n
\n \n
\n ) : null;\n })}\n {image.entity.fieldCaption}
: null}\n {image.entity?.fieldCredit ?{image.entity.fieldCredit}
: null}\n{text}
);\n }\n\n return (\n\n
\n );\n};\n\nexport default LessonVideo;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_FILE_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n ... on ParagraphFileDownload {\n fieldTitle\n fieldFile {\n entity {\n ... on MediaDocument {\n fieldMediaDocument {\n entity {\n ... on File {\n uri {\n url\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n`;\n","export default __webpack_public_path__ + \"download.0c42fa43.svg\";","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { PARAGRAPH_FILE_QUERY } from './lessonFile.graphql';\nimport Download from '../../../public/download.svg';\nimport styles from './lessonFile.module.scss';\n\nconst LessonFile = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_FILE_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n return (\n \n
\n {data.paragraphById.fieldTitle}
\n\n setTranscriptOpen(!transcriptOpen)}\n className={transcriptOpen ? styles.open : styles.closed}\n >\n {transcriptOpen ? 'Hide transcript' : 'View transcript'}\n \n
\n {transcriptOpen ? (\n \n
\n ) : null}\n \n {transcript}
\n \n \n 
\n Download {data?.paragraphById?.fieldTitle}\n \n
\n );\n};\n\nexport default LessonFile;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_BUTTON_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n ... on ParagraphButton {\n fieldButton {\n title\n uri\n }\n }\n }\n }\n`;\n","export default __webpack_public_path__ + \"external-link.13628129.svg\";","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { PARAGRAPH_BUTTON_QUERY } from './lessonButton.graphql';\nimport ExternalLink from '../../../public/external-link.svg';\nimport styles from './lessonButton.module.scss';\n\nconst LessonButton = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_BUTTON_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n return (\n \n {\n if (!window.confirm('This link will take you to a different website. Are you sure?')) e.preventDefault();\n }}\n >\n 
\n {data.paragraphById.fieldButton.title}\n \n
\n );\n};\n\nexport default LessonButton;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_AUDIO_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n ... on ParagraphAudio {\n fieldTitle\n fieldAudio {\n entity {\n ... on MediaAudio {\n fieldMediaAudioFile {\n entity {\n ... on File {\n uri {\n url\n }\n }\n }\n }\n }\n }\n }\n fieldTranscript\n }\n }\n }\n`;\n","import React, { useState } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport ReactAudioPlayer from 'react-audio-player';\nimport { PARAGRAPH_AUDIO_QUERY } from './lessonAudio.graphql';\nimport styles from './lessonAudio.module.scss';\n\nconst LessonAudio = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_AUDIO_QUERY, { variables: { paragraphId } });\n const [transcriptOpen, setTranscriptOpen] = useState(false);\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n let transcript;\n if (data && data?.paragraphById?.fieldTranscript) {\n transcript = data.paragraphById.fieldTranscript.split('\\n').map((text, index) => {text}
);\n }\n\n return (\n\n
\n );\n};\n\nexport default LessonAudio;\n","import React from 'react';\nimport styles from './lessonHorizontalRule.module.scss';\n\nconst LessonHorizontalRule = ({ paragraphId }) => {data?.paragraphById?.fieldTitle}
\n\n setTranscriptOpen(!transcriptOpen)}\n className={transcriptOpen ? styles.open : styles.closed}\n >\n {transcriptOpen ? 'Hide transcript' : 'View transcript'}\n \n
\n {transcriptOpen ? (\n \n
\n ) : null}\n\n {transcript}
\n {transcript}
\n ;\n\nexport default LessonHorizontalRule;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_TEXT_TO_SPEECH_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n ... on ParagraphTextToSpeech {\n fieldBody {\n processed\n }\n fieldVoiceLanguage\n }\n }\n }\n`;\n","import React, { useState, useContext } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { useSpeechSynthesis } from 'react-speech-kit';\nimport ReactHtmlParser from 'react-html-parser';\nimport ReactTooltip from 'react-tooltip';\nimport GlossaryContext from '../../context/glossaryContext';\nimport { PARAGRAPH_TEXT_TO_SPEECH_QUERY } from './lessonTextToSpeech.graphql';\nimport styles from './lessonTextToSpeech.module.scss';\nimport { externalLink, recursiveInnerText, tooltipAttributes, glossaryCloseButton } from '../../util/helpers';\n\nconst LessonTextToSpeech = ({ paragraphId }) => {\n const glossaryContext = useContext(GlossaryContext);\n const { loading, error, data } = useQuery(PARAGRAPH_TEXT_TO_SPEECH_QUERY, { variables: { paragraphId } });\n const { speak, cancel, speaking, voices } = useSpeechSynthesis();\n const language = data?.paragraphById?.fieldVoiceLanguage;\n let voice;\n // Use Samantha voice by default and for English.\n if (language === undefined || language === null || language === 'en') {\n voice = voices.filter(voiceItem => voiceItem.name === 'Samantha');\n } else {\n // Otherwise use the first voice with the specified language.\n voice = voices.filter(voiceItem => voiceItem.lang.includes(`${language}-`));\n }\n if (voice instanceof Array) [voice] = voice;\n // Set up form states.\n const [pitch, setPitch] = useState(1);\n const [rate, setRate] = useState(1);\n const rateStyle = { background: 'linear-gradient(to right, #2d768c 0%, #2d768c 33%, #eee6df 33%, #eee6df 100%)' };\n const pitchStyle = { background: 'linear-gradient(to right, #2d768c 0%, #2d768c 50%, #eee6df 50%, #eee6df 100%)' };\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n let formattedText = '';\n let text = '';\n if (data && data?.paragraphById?.fieldBody?.processed) {\n let glossaryIdCounter = 0;\n formattedText = ReactHtmlParser(data.paragraphById.fieldBody.processed, {\n transform: node => {\n if (node.type === 'tag') {\n if (node.name === 'a' && node.attribs.rel === 'nofollow') {\n return externalLink(node);\n }\n if (node.name === 'span' && node.attribs.class === 'glossary') {\n // Recursively retrieve inner text from node .\n const glossaryText = recursiveInnerText(node);\n if (!glossaryText || typeof glossaryText !== 'string') {\n return null;\n }\n // Don't use glossary styling if there is no glossary provider.\n if (!glossaryContext) {\n return glossaryText;\n }\n const { glossaryTerms, glossaryTooltipIds } = glossaryContext;\n // Don't use glossary styling if there are no glossary terms.\n if (!glossaryTerms) {\n return glossaryText;\n }\n const matchingTerm = glossaryTerms.filter(\n glossaryTerm => glossaryTerm.title === glossaryText.toLocaleLowerCase().trim()\n );\n if (matchingTerm.length) {\n const { definition } = matchingTerm[0];\n const glossaryId = `glossary-${paragraphId}-${glossaryIdCounter}`;\n glossaryTooltipIds.push(glossaryId);\n glossaryIdCounter += 1;\n return (\n \n \n
\n (\n
\n );\n};\n\nexport default LessonTextToSpeech;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_SLIDESHOW_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n ... on ParagraphSlideshow {\n fieldTitle\n fieldSlide {\n targetId\n entity {\n ... on ParagraphSlide {\n fieldSlideImage {\n entity {\n ... on MediaImage {\n fieldMediaImage {\n alt\n ... on FieldMediaImageFieldMediaImage {\n derivative(style: MODULEFULLWIDTH) {\n url\n }\n }\n }\n }\n }\n }\n fieldDescription\n }\n }\n }\n }\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { CarouselProvider, Slider, Slide, Image, ButtonBack, ButtonNext, DotGroup } from 'pure-react-carousel';\nimport { PARAGRAPH_SLIDESHOW_QUERY } from './lessonSlideshow.graphql';\nimport 'pure-react-carousel/dist/react-carousel.es.css';\nimport styles from './lessonSlideshow.module.scss';\n\nconst LessonSlideshow = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_SLIDESHOW_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n return (\n \n {speaking ? (\n \n ) : (\n speak({ text, rate, pitch, voice })}\n className={styles.play}\n title=\"read text\"\n >\n listen\n \n )}\n \n voice controls\n \n
\n {formattedText}
\n \n \n \n
\n )}\n />\n \n \n \n {data.paragraphById.fieldSlide.map((slide, index) => (\n \n \n ))}\n \n \n \n Back\n \n \n \n Next\n \n
\n );\n};\n\nexport default LessonSlideshow;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_SLIDES_EMBED_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n ... on ParagraphSlidesEmbed {\n fieldTitle\n fieldSlidesEmbed {\n uri\n }\n fieldPortrait\n }\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport Iframe from 'react-iframe';\nimport { PARAGRAPH_SLIDES_EMBED_QUERY } from './lessonSlidesEmbed.graphql';\nimport ExternalLink from '../../../public/external-link.svg';\nimport styles from './lessonSlidesEmbed.module.scss';\n\nconst LessonText = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_SLIDES_EMBED_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n let uri;\n let portrait;\n let presentUri;\n let showPresentationButton = false;\n\n if (data && data.paragraphById) {\n uri = data?.paragraphById?.fieldSlidesEmbed?.uri;\n\n // create 'go to presentation' link if this is a google slide embed\n if (uri.includes('docs.google.com/presentation')) {\n const embedRegex = /\\/embed?\\S*/i;\n presentUri = uri.replace(embedRegex, '/pub?start=false&loop=false&delayms=3000');\n showPresentationButton = true;\n }\n\n // checkbox for portrait orientation display\n portrait = data?.paragraphById?.fieldPortrait;\n }\n\n return (\n {data.paragraphById.fieldTitle}
\n{slide.entity.fieldDescription}
\n\n {showPresentationButton ? (\n {\n if (!window.confirm('This link will take you to a different website. Are you sure?')) e.preventDefault();\n }}\n >\n \n \n ) : (\n ''\n )}\n
\n );\n};\n\nexport default LessonText;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_TEXT_AND_IMAGE_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n id\n ... on ParagraphTextAndImage {\n fieldBody {\n processed\n }\n fieldImageWithCaption {\n targetId\n entity {\n ... on ParagraphImage {\n fieldImage {\n entity {\n ... on MediaImage {\n fieldMediaImage {\n alt\n ... on FieldMediaImageFieldMediaImage {\n derivative(style: MODULEFULLWIDTH) {\n url\n }\n }\n }\n }\n }\n }\n fieldCaption\n fieldCredit\n }\n }\n }\n fieldImageSide\n fieldImageSize\n }\n }\n }\n`;\n","import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport ReactHtmlParser from 'react-html-parser';\nimport ReactTooltip from 'react-tooltip';\nimport GlossaryContext from '../../context/glossaryContext';\nimport { PARAGRAPH_TEXT_AND_IMAGE_QUERY } from './lessonTextAndImage.graphql';\nimport Image from '../image/image';\nimport styles from './lessonTextAndImage.module.scss';\nimport { externalLink, glossaryCloseButton, recursiveInnerText, tooltipAttributes } from '../../util/helpers';\n\nconst LessonImage = ({ paragraphId }) => {\n const glossaryContext = useContext(GlossaryContext);\n const { loading, error, data } = useQuery(PARAGRAPH_TEXT_AND_IMAGE_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n let text;\n let imageUrl;\n let imageAlt;\n let imageSide;\n let imageSize;\n\n if (data && data.paragraphById) {\n const paragraphText = data.paragraphById?.fieldBody?.processed;\n let glossaryIdCounter = 0;\n text = ReactHtmlParser(paragraphText, {\n transform: node => {\n if (node.type === 'tag' && node.name === 'a' && node.attribs.rel === 'nofollow') {\n return externalLink(node);\n }\n if (node.type === 'tag' && node.name === 'span' && node.attribs.class === 'glossary') {\n // Recursively retrieve inner text from node.\n const glossaryText = recursiveInnerText(node);\n if (!glossaryText || typeof glossaryText !== 'string') {\n return null;\n }\n // Don't use glossary styling if there is no glossary provider.\n if (!glossaryContext) {\n return glossaryText;\n }\n const { glossaryTerms, glossaryTooltipIds } = glossaryContext;\n // Don't use glossary styling if there are no glossary terms.\n if (!glossaryTerms) {\n return glossaryText;\n }\n const matchingTerm = glossaryTerms.filter(\n glossaryTerm => glossaryTerm.title === glossaryText.toLocaleLowerCase().trim()\n );\n if (matchingTerm.length) {\n const { definition } = matchingTerm[0];\n const glossaryId = `glossary-${paragraphId}-${glossaryIdCounter}`;\n glossaryTooltipIds.push(glossaryId);\n glossaryIdCounter += 1;\n return (\n \n \n \n Embedded Slides\n
\n {text}
\n \n
\n \n );\n};\n\nexport default LessonImage;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_EMBED_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n id\n ... on ParagraphEmbed {\n fieldEmbedCode {\n processed\n }\n }\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { PARAGRAPH_EMBED_QUERY } from './lessonEmbed.graphql';\nimport styles from './lessonEmbed.module.scss';\n\nconst LessonEmbed = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_EMBED_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n let embedCode;\n if (data && data.paragraphById) {\n embedCode = data?.paragraphById?.fieldEmbedCode?.processed;\n }\n\n return (\n {data?.paragraphById?.fieldImageWithCaption?.entity?.fieldCaption}
\n{data?.paragraphById?.fieldImageWithCaption?.entity?.fieldCredit}
\n\n \n
\n );\n};\n\nexport default LessonEmbed;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_THINGLINK_EMBED_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n id\n ... on ParagraphThinglinkEmbed {\n fieldEmbedCode {\n processed\n }\n }\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { PARAGRAPH_THINGLINK_EMBED_QUERY } from './lessonThinglinkEmbed.graphql';\nimport styles from './lessonThinglinkEmbed.module.scss';\n\nconst LessonThinglinkEmbed = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_THINGLINK_EMBED_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n let embedCode;\n if (data && data.paragraphById) {\n embedCode = data?.paragraphById?.fieldEmbedCode?.processed;\n }\n\n return (\n \n \n
\n );\n};\n\nexport default LessonThinglinkEmbed;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_IMAGE_WITH_SIZE_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n id\n ... on ParagraphImageWithSize {\n fieldImage {\n entity {\n ... on MediaImage {\n fieldMediaImage {\n alt\n ... on FieldMediaImageFieldMediaImage {\n derivative(style: MODULEFULLWIDTH) {\n url\n }\n }\n }\n }\n }\n }\n fieldCaption\n fieldCredit\n fieldImageSize\n }\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { PARAGRAPH_IMAGE_WITH_SIZE_QUERY } from './lessonImageWithSize.graphql';\nimport Image from '../image/image';\nimport styles from './lessonImageWithSize.module.scss';\n\nconst LessonImageWithSize = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_IMAGE_WITH_SIZE_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n let imageSize;\n\n if (data) {\n imageSize = data?.paragraphById?.fieldImageSize;\n }\n\n return (\n {data?.paragraphById?.fieldCaption}
\n{data?.paragraphById?.fieldCredit}
\n \n );\n};\n\nexport default LessonImageWithSize;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_HEADING_WITH_ICON_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n id\n ... on ParagraphHeadingWithIcon {\n fieldTitle\n fieldIcon {\n entity {\n ... on MediaIcon {\n fieldMediaImage {\n alt\n ... on FieldMediaIconFieldMediaImage {\n url\n }\n }\n }\n }\n }\n }\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport SVG from 'react-inlinesvg';\nimport { PARAGRAPH_HEADING_WITH_ICON_QUERY } from './lessonHeadingWithIcon.graphql';\nimport styles from './lessonHeadingWithIcon.module.scss';\n\nconst LessonHeadingWithIcon = ({ paragraphId }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_HEADING_WITH_ICON_QUERY, { variables: { paragraphId } });\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n let icon;\n let heading;\n\n if (data && data?.paragraphById) {\n icon = data?.paragraphById?.fieldIcon?.entity?.fieldMediaImage;\n heading = data?.paragraphById?.fieldTitle;\n }\n\n return (\n\n \n
\n );\n};\n\nexport default LessonHeadingWithIcon;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_CALLOUT_BOX_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n parentId\n ... on ParagraphCalloutBox {\n fieldTitle\n fieldIcon {\n entity {\n ... on MediaIcon {\n fieldMediaImage {\n alt\n ... on FieldMediaIconFieldMediaImage {\n url\n }\n }\n }\n }\n }\n fieldBody {\n processed\n }\n }\n }\n }\n`;\n","import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport ReactHtmlParser from 'react-html-parser';\nimport ReactTooltip from 'react-tooltip';\nimport SVG from 'react-inlinesvg';\nimport GlossaryContext from '../../context/glossaryContext';\nimport { PARAGRAPH_CALLOUT_BOX_QUERY } from './lessonCalloutBox.graphql';\nimport styles from './lessonCalloutBox.module.scss';\nimport { externalLink, glossaryCloseButton, recursiveInnerText, tooltipAttributes } from '../../util/helpers';\n\nconst LessonCalloutBox = ({ paragraphId }) => {\n const glossaryContext = useContext(GlossaryContext);\n const { loading, error, data } = useQuery(PARAGRAPH_CALLOUT_BOX_QUERY, { variables: { paragraphId } });\n\n if (loading) return `Loading...`;\n if (error) throw new Error(error.message);\n\n let text;\n let heading;\n let icon;\n\n if (data && data.paragraphById) {\n icon = data?.paragraphById?.fieldIcon?.entity?.fieldMediaImage;\n heading = data?.paragraphById?.fieldTitle;\n const paragraphText = data.paragraphById?.fieldBody?.processed;\n let glossaryIdCounter = 0;\n text = ReactHtmlParser(paragraphText, {\n transform: node => {\n if (node.type === 'tag' && node.name === 'a' && node.attribs.rel === 'nofollow') {\n return externalLink(node);\n }\n if (node.type === 'tag' && node.name === 'span' && node.attribs.class === 'glossary') {\n // Recursively retrieve inner text from node.\n const glossaryText = recursiveInnerText(node);\n if (!glossaryText || typeof glossaryText !== 'string') {\n return null;\n }\n // Don't use glossary styling if there is no glossary provider.\n if (!glossaryContext) {\n return glossaryText;\n }\n const { glossaryTerms, glossaryTooltipIds } = glossaryContext;\n // Don't use glossary styling if there are no glossary terms.\n if (!glossaryTerms) {\n return glossaryText;\n }\n const matchingTerm = glossaryTerms.filter(\n glossaryTerm => glossaryTerm.title === glossaryText.toLocaleLowerCase().trim()\n );\n if (matchingTerm.length) {\n const { definition } = matchingTerm[0];\n const glossaryId = `glossary-${paragraphId}-${glossaryIdCounter}`;\n glossaryTooltipIds.push(glossaryId);\n glossaryIdCounter += 1;\n return (\n \n \n {heading}
\n\n \n
\n );\n};\n\nexport default LessonCalloutBox;\n","import gql from 'graphql-tag';\n\nexport const PARAGRAPH_H5P_QUERY = gql`\n query($paragraphId: String!) {\n paragraphById(id: $paragraphId) {\n ... on ParagraphH5p {\n fieldH5p {\n h5pContentId\n h5pContentEmbedURL\n h5pContentFullEmbedURL\n }\n }\n }\n }\n`;","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport Iframe from 'react-iframe';\nimport { PARAGRAPH_H5P_QUERY } from './lessonH5P.graphql';\nimport styles from './lessonH5P.module.scss';\nimport LoadingSpinner from '../loadingSpinner/loadingSpinner';\n\nconst LessonH5P = ({ paragraphId, paragraphLabel }) => {\n const { loading, error, data } = useQuery(PARAGRAPH_H5P_QUERY, { variables: { paragraphId } });\n let uri;\n let fullURI;\n let contentId = \"\";\n\n if (data) {\n uri = data?.paragraphById.fieldH5p?.h5pContentEmbedURL;\n fullURI = data?.paragraphById.fieldH5p?.h5pContentFullEmbedURL;\n contentId = data?.paragraphById.fieldH5p?.h5pContentId;\n }\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n return (\n \n );\n};\n\nexport default LessonH5P;\n","import React from 'react';\nimport LessonText from '../lessonText/lessonText';\nimport LessonImage from '../lessonImage/lessonImage';\nimport LessonImageGrid from '../lessonImageGrid/lessonImageGrid';\nimport LessonVideo from '../lessonVideo/lessonVideo';\nimport LessonFile from '../lessonFile/lessonFile';\nimport LessonButton from '../lessonButton/lessonButton';\nimport LessonAudio from '../lessonAudio/lessonAudio';\nimport LessonHorizontalRule from '../lessonHorizontalRule/lessonHorizontalRule';\nimport LessonTextToSpeech from '../lessonTextToSpeech/lessonTextToSpeech';\nimport LessonSlideshow from '../lessonSlideshow/lessonSlideshow';\nimport LessonSlidesEmbed from '../lessonSlidesEmbed/lessonSlidesEmbed';\nimport LessonTextAndImage from '../lessonTextAndImage/lessonTextAndImage';\nimport LessonEmbed from '../lessonEmbed/lessonEmbed';\nimport LessonThinglinkEmbed from '../lessonThinglinkEmbed/lessonThinglinkEmbed';\nimport LessonImageWithSize from '../lessonImageWithSize/lessonImageWithSize';\nimport LessonHeadingWithIcon from '../lessonHeadingWithIcon/lessonHeadingWithIcon';\nimport LessonCalloutBox from '../lessonCalloutBox/lessonCalloutBox';\nimport LessonH5P from '../lessonH5P/lessonH5P';\n\nconst getParagraph = paragraph => {\n switch (paragraph.bundle) {\n case 'text':\n return \n {heading ?
\n {heading}
: ``}\n{text}
\n {paragraphs.map(paragraph => getParagraph(paragraph))}
;\n\nexport default LessonComponents;\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faBell } from '@fortawesome/free-solid-svg-icons';\nimport styles from './breakButton.module.scss';\n\nconst BreakButton = props => {\n const { setModalIsOpen, setTimerModalIsOpen, modalIsOpen, timerModalIsOpen } = props;\n\n const onClick = e => {\n e.preventDefault();\n if (modalIsOpen) {\n setModalIsOpen(false);\n } else {\n setTimerModalIsOpen(prevtimerModalIsOpen => !prevtimerModalIsOpen);\n }\n };\n return (\n \n
\n );\n};\n\nexport default BreakButton;\n","import React, { useState, useEffect } from 'react';\nimport { useQuery, useMutation } from '@apollo/react-hooks';\nimport ReactHtmlParser, {convertNodeToElement} from 'react-html-parser';\n\nimport SVG from 'react-inlinesvg';\nimport { withRouter } from 'react-router-dom';\nimport { LESSON_QUERY, UPSERT_SECTION_LOG_MUTATION } from './lesson.graphql';\nimport { CURRENT_USER_PROGRESS_QUERY } from '../../App.graphql';\nimport LoadingSpinner from '../loadingSpinner/loadingSpinner';\nimport LessonComponents from '../lessonComponents/lessonComponents';\nimport styles from './lesson.module.scss';\nimport BreakButton from '../takeABreak/breakButton/breakButton';\n\nconst Lesson = ({\n sectionId,\n lessonId,\n userId,\n moduleId,\n setModalIsOpen,\n setTimerModalIsOpen,\n modalIsOpen,\n timerModalIsOpen,\n}) => {\n const [mutationRan, setMutationRan] = useState(false);\n const periodIndex = lessonId.indexOf('.');\n const lessonEntityId = lessonId.slice(0, periodIndex);\n const input = { field_section: sectionId };\n const { loading, error, data } = useQuery(LESSON_QUERY, { variables: { lessonId: lessonEntityId } });\n\n // Set mutationRan back to false if lessonId changes.\n useEffect(() => {\n setMutationRan(false);\n }, [sectionId]);\n\n const [\n upsertSectionLog,\n {\n data: upsertSectionLogData,\n loading: upsertSectionLogLoading,\n error: upsertSectionLogError,\n called: upsertSectionLogCalled,\n },\n ] = useMutation(UPSERT_SECTION_LOG_MUTATION, {\n variables: {\n input,\n },\n refetchQueries: [{ query: CURRENT_USER_PROGRESS_QUERY, variables: { userId, moduleId } }],\n onCompleted: () => {\n setMutationRan(true);\n },\n });\n\n // Run the mutation to create a lesson log entry.\n if (!upsertSectionLogLoading && !mutationRan && userId) {\n upsertSectionLog(input);\n }\n\n let paragraphs = [];\n let references = null;\n\n if (loading) return \n \n
\n \n {icon ? (\n
\n );\n};\n\nexport default withRouter(Lesson);\n","import { useMediaQuery } from 'react-responsive';\n\nconst useScreenSize = () => {\n const isSm = useMediaQuery({ query: `(min-width: 640px` });\n const isMd = useMediaQuery({ query: `(min-width: 768px` });\n const isLargeTablet = useMediaQuery({ query: `(min-width: 1093px` });\n const isLg = useMediaQuery({ query: `(min-width: 1024px` });\n const isXl = useMediaQuery({ query: `(min-width: 1280px` });\n\n const getScreenSize = () => {\n if (isXl) return 5;\n if (isLg) return 4;\n if (isLargeTablet) return 3;\n if (isMd) return 2;\n if (isSm) return 1;\n return 0;\n };\n\n return {\n screenSize: getScreenSize(),\n };\n};\n\nexport default useScreenSize;\n","import React, { useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';\nimport styles from './breakCategory.module.scss';\n\nconst BreakCategory = props => {\n const { categoryTitle, categoryDescription } = props;\n const [dropDownOpen, setDropDownOpen] = useState(false);\n return (\n \n \n
\n ) : (\n {data.nodeById.title}
\n{data.nodeById.title}
\n )}\n\n
\n ) : (\n ''\n )}\n \n
\n References
\n{references}
\n\n
\n );\n};\n\nexport default BreakCategory;\n","import React, { useRef } from 'react';\nimport Carousel from 'react-elastic-carousel';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlayCircle } from '@fortawesome/free-solid-svg-icons';\nimport styles from './breakCategoryMedia.module.scss';\nimport LoadingSpinner from '../../loadingSpinner/loadingSpinner';\n\nconst BreakCategoryMedia = props => {\n const Arrow = () => <>;\n\n const Pagination = ({ pages, activePage, onClick }) => (\n \n
\n \n
\n {dropDownOpen ? <>{categoryDescription} : null}\n {categoryTitle}
\n \n\n {pages.map(page => {\n const isActivePage = activePage === page;\n return (\n onClick(page)}\n />\n );\n })}\n
\n );\n\n const { category, setSelectedActivity } = props;\n let categoryActivities;\n\n if (category) {\n categoryActivities = category.takeABreakActivitiesByNode?.results;\n }\n\n const carouselRef = useRef(null);\n const onNextStart = (currentItem, nextItem) => {\n if (currentItem.index === nextItem.index) {\n // we hit the last item, go to first item\n carouselRef.current.goTo(0);\n }\n };\n\n const onPrevStart = (currentItem, nextItem) => {\n if (currentItem.index === nextItem.index) {\n // we hit the first item, go to last item\n carouselRef.current.goTo(categoryActivities.length);\n }\n };\n\n const breakPoints = [\n { width: 1, itemsToShow: 1 },\n { width: 500, itemsToShow: 2 },\n { width: 900, itemsToShow: 3 },\n ];\n\n const shuffle = activities => {\n let currentIndex = activities.length;\n let randomIndex;\n while (currentIndex !== 0) {\n randomIndex = Math.floor(Math.random() * currentIndex);\n currentIndex -= 1;\n [activities[currentIndex], activities[randomIndex]] = [activities[randomIndex], activities[currentIndex]];\n }\n return activities;\n };\n\n return (\n \n
\n );\n};\n\nexport default BreakCategoryMedia;\n","export default __webpack_public_path__ + \"kids-jumping.ad80de0f.jpg\";","import React from 'react';\nimport styles from './breakTitle.module.scss';\nimport kidsJumping from '../../../../public/kids-jumping.jpg';\n\nconst BreakTitle = () => (\n \n {categoryActivities ? (\n \n {shuffle(categoryActivities).map(activity =>\n activity?.fieldImage?.entity ? (\n
\n \n {\n setSelectedActivity(activity);\n }}\n // if acitvity include a video, apply tinted overlay class//\n className={`${styles.activityThumbnail} ${\n activity.fieldComponents?.length &&\n activity.fieldComponents.filter(component => component.entity?.entityBundle === 'video').length\n ? styles.tintedOverlay\n : null\n }`}\n style={{ backgroundImage: `url(${activity?.fieldImage?.entity?.fieldMediaImage.derivative.url})` }}\n alt={activity?.fieldImage?.entity?.fieldMediaImage.alt}\n >\n {/* //If activity includes components that contain a video, render the play triangle */}\n {activity.fieldComponents?.length &&\n activity.fieldComponents.filter(component => component.entity?.entityBundle === 'video').length ? (\n
\n ) : null\n )}\n \n ) : (\n {`${activity.fieldDuration} min`}
\n \n {activity.entityLabel}
\n \n 
\n
\n);\n\nexport default BreakTitle;\n","import gql from 'graphql-tag';\n\nexport const BREAK_CATEGORY_QUERY = gql`\n query($moduleId: String!) {\n taxonomyLoad(vid: \"take_a_break_activities\", parent: 0) {\n results {\n id\n tid\n name\n description {\n processed\n }\n ... on TaxonomyTermTakeABreakActivities {\n takeABreakActivitiesByNode(node: $moduleId) {\n results {\n id\n entityId\n entityLabel\n ... on NodeTakeABreakActivity {\n fieldDuration\n fieldImage {\n entity {\n id\n ... on MediaImage {\n fieldMediaImage {\n alt\n ... on FieldMediaImageFieldMediaImage {\n derivative(style: MODULEFULLWIDTH) {\n url\n }\n }\n }\n }\n }\n }\n fieldComponents {\n entity {\n id\n entityBundle\n }\n }\n }\n }\n }\n }\n }\n }\n }\n`;\n","import React from 'react';\nimport Scrollbars from 'react-custom-scrollbars';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faArrowLeft } from '@fortawesome/free-solid-svg-icons';\nimport LessonComponents from '../../lessonComponents/lessonComponents';\nimport styles from './breakActivity.module.scss';\n\nconst BreakActivity = props => {\n const { setSelectedActivity, selectedActivity, setModalIsOpen } = props;\n const components = selectedActivity.fieldComponents;\n\n const paragraphs = components\n ? components.map((component, index) => ({\n index,\n id: component.entity.id,\n bundle: component.entity.entityBundle,\n }))\n : null;\n\n return (\n \n
\n MOOSE Brain Break Library
\nYou've earned it. Click on an activity of your choice to take a break from your lesson.
\n\n
\n );\n};\n\nexport default BreakActivity;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTimesCircle } from '@fortawesome/free-solid-svg-icons';\nimport { useQuery } from '@apollo/react-hooks';\nimport ReactHtmlParser from 'react-html-parser';\nimport BreakCategory from '../breakCategory/breakCategory';\nimport BreakCategoryMedia from '../breakCategoryMedia.js/breakCategoryMedia';\nimport BreakTitle from '../breakTitle/breakTitle';\nimport styles from './breakMainContent.module.scss';\nimport { BREAK_CATEGORY_QUERY } from './breakMainContent.graphql';\nimport LoadingSpinner from '../../loadingSpinner/loadingSpinner';\nimport BreakActivity from '../breakActivity/breakActivity';\n\nconst BreakMainContent = props => {\n const { setModalIsOpen, moduleId } = props;\n const [selectedActivity, setSelectedActivity] = useState(null);\n const scrollBarRef = useRef();\n let breakCategories;\n const { data } = useQuery(BREAK_CATEGORY_QUERY, { variables: { moduleId } });\n\n if (data) {\n breakCategories = data.taxonomyLoad?.results;\n }\n\n return (\n <>\n {selectedActivity ? (\n \n
\n \n \n \n
\n \n (\n
\n \n
\n \n {selectedActivity.entityLabel}
\n {components ? (\nOops! Nothing has been added to this activity yet.
\n )}\n \n
\n ) : (\n \n {\n setModalIsOpen(false);\n }}\n >\n (\n
\n )}\n \n );\n};\n\nexport default BreakMainContent;\n","import React from 'react';\nimport Modal from 'react-modal';\nimport useScreenSize from '../../windowSize/windowSize';\nimport BreakMainContent from '../breakMainContent/breakMainContent';\n\nconst BreakModal = props => {\n const { setModalIsOpen, moduleId, modalIsOpen } = props;\n const { screenSize } = useScreenSize();\n const getModalWidth = () => {\n switch (screenSize) {\n case 0:\n case 1:\n return '90%';\n case 2:\n return '740px';\n case 3:\n case 4:\n return '810px';\n case 5:\n return '1005px';\n default:\n return '975px';\n }\n };\n\n const getModalHeight = () => {\n switch (screenSize) {\n case 0:\n case 1:\n case 2:\n return '75vh';\n case 3:\n case 4:\n case 5:\n return '86vh';\n default:\n return '85vh';\n }\n };\n\n const customModalStyles = {\n content: {\n top: '50%',\n left: '50%',\n borderRadius: '15px',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n transform: 'translate(-50%, -50%)',\n padding: '0',\n height: getModalHeight(),\n width: getModalWidth(),\n display: 'flex',\n overflow: 'hidden',\n justifyContent: 'center',\n alignItems: 'center',\n border: '0',\n },\n overlay: {\n zIndex: '200',\n backgroundColor: 'rgba(42, 42, 42, 0.65)',\n },\n };\n\n Modal.setAppElement('#app-root');\n\n return (\n \n
\n \n \n
\n \n );\n};\n\nexport default TimerModal;\n","import React from 'react';\nimport { withRouter, Link } from 'react-router-dom';\nimport { stringToPathComponent, routerGetPath } from '../../util/helpers';\nimport styles from './lessonNext.module.scss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faArrowCircleRight, faArrowCircleLeft, faCheckCircle } from '@fortawesome/free-solid-svg-icons';\n\nconst LessonNext = ({ history, lessonId, lessons, sections, sectionId }) => {\n const path = routerGetPath(history);\n const thisIndex = lessons.findIndex(lessonItem => lessonItem.entity.uniqueId === lessonId);\n const prevLesson = lessons.filter((lessonItem, index) => index === thisIndex - 1);\n const nextLesson = lessons.filter((lessonItem, index) => index === thisIndex + 1);\n\n const currentLesson = lessons.filter((lessonItem, index) => index === thisIndex);\n const currentLessonId = lessonId.split(\".\").slice(0,1);\n\n const thisSectionIndex = sections.findIndex(sectionItem => sectionItem.id == sectionId);\n const prevSection = sections.filter((sectionItem, index) => index === thisSectionIndex - 1);\n const nextSection = sections.filter((sectionItem, index) => index === thisSectionIndex + 1);\n\n // Go to previous section in current lesson\n const backCurrentLesson =\n thisSectionIndex > 0 ? (\n Time to give your brain a break!
\n\n
\n \n \n \n 
\n
\n \n
\n \n Great progress on your lesson! Take a break to give your brain time to take in everything you've just\n learned.\n
\n \n
\n \n ) : (\n \n );\n \n // Go to previous section in prev lesson\n const backPrevLesson =\n thisSectionIndex > 0 && prevLesson[0] ? (\n \n
\n \n ) : (\n \n );\n \n // Last lesson.\n if (thisSectionIndex === sections.length - 1 ) {\n return (\n \n {thisSectionIndex > 0 && (prevSection[0].parentId == currentLessonId) ?\n backCurrentLesson : backPrevLesson\n }\n \n Finish\n
\n );\n }\n \n // Lesson with multiple sections.\n if (nextSection[0].parentId == currentLessonId) {\n return (\n \n {thisSectionIndex > 0 && (prevSection[0].parentId == currentLessonId) ?\n backCurrentLesson : backPrevLesson\n }\n \n
\n );\n }\n \n // Lesson with one section.\n return (\n \n Next\n
\n \n \n {thisSectionIndex > 0 && (prevSection[0].parentId == currentLessonId) ?\n backCurrentLesson : backPrevLesson\n }\n \n
\n );\n};\n\nexport default withRouter(LessonNext);\n","import React from 'react';\nimport { withRouter, Link } from 'react-router-dom';\nimport { stringToPathComponent, routerGetPath } from '../../util/helpers';\nimport styles from './unitCompleteBanner.module.scss';\nimport InteriorGradeIcon from '../interiorGradeIcon/interiorGradeIcon';\n\nconst UnitCompleteBanner = ({ history, moduleGradeData, lessonId, lessons, sections, sectionId }) => {\n const path = routerGetPath(history);\n const thisIndex = lessons.findIndex(lessonItem => lessonItem.entity.uniqueId === lessonId);\n const nextLesson = lessons.filter((lessonItem, index) => index === thisIndex + 1);\n\n const thisSectionIndex = sections.findIndex(sectionItem => sectionItem.id == sectionId);\n const nextSection = sections.filter((sectionItem, index) => index === thisSectionIndex + 1);\n\n const unitLesson = lessonId.split('.');\n const unitIndex = parseInt(unitLesson[2]);\n const currentLessonId = unitLesson.slice(0,1);\n\n let nextUnitLesson = [];\n let nextUnitIndex;\n let nextSectionParentId;\n\n if (thisIndex !== lessons.length - 1) {\n nextUnitLesson = nextLesson[0].entity.uniqueId.split('.');\n nextUnitIndex = parseInt(nextUnitLesson[2]);\n nextSectionParentId = nextSection[0].parentId;\n }\n\n function findModuleGrade(gradeLevel) {\n let color;\n\n if (gradeLevel <= 2) {\n color = '#0D7F60';\n } else if (gradeLevel <= 5) {\n color = '#CC421D';\n } else if (gradeLevel <= 8) {\n color = '#00788F';\n } else {\n color = '#AB6312';\n }\n \n if (thisSectionIndex === sections.length - 1) {\n // Last lesson of module\n return (\n \n Next\n
\n \n \n
\n );\n }\n\n if ((nextUnitIndex === unitIndex + 1) && (currentLessonId != nextSectionParentId)) { \n // Last lesson of unit\n return (\n \n
\n \n \n Finish Module\n \n
\n \n
\n Nice Job!
\nYou have completed Unit {unitIndex + 1}.
\n\n
\n );\n }\n } \n \n return (\n <>\n {moduleGradeData.map(gradeData => findModuleGrade(gradeData.entity.fieldGradeNumber))}\n \n );\n};\n\nexport default withRouter(UnitCompleteBanner);\n","import React, { useContext, useState, useEffect, useRef } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport * as Sentry from '@sentry/react';\nimport UserContext from '../../context/userContext';\nimport GlossaryContext from '../../context/glossaryContext';\nimport { MODULE_INTERIOR_QUERY } from './interior.graphql';\nimport InteriorNav from '../interiorNav/interiorNav';\nimport InteriorTour from '../interiorTour/interiorTour';\nimport Lesson from '../lesson/lesson';\nimport { LessonError } from '../error/error';\nimport styles from './interior.module.scss';\nimport { processGlossaryTerms } from '../../util/helpers';\nimport BreakModal from '../takeABreak/breakModals/breakModal';\nimport TimerModal from '../takeABreak/breakModals/timerModal';\nimport LessonNext from '../lessonNext/lessonNext';\nimport ConstructionBanner from '../constructionBanner/constructionBanner';\nimport OverviewBackToModules from '../overviewBackToModules/overviewBackToModules';\nimport InteriorGradeIcon from '../interiorGradeIcon/interiorGradeIcon';\nimport UnitCompleteBanner from '../unitCompleteBanner/unitCompleteBanner';\n\nconst Interior = ({ match, moduleId, history }) => {\n const [isTourOpen, setIsTourOpen] = useState(false);\n const userId = useContext(UserContext);\n const { loading, error, data } = useQuery(MODULE_INTERIOR_QUERY, { variables: { moduleId } });\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const [timerModalIsOpen, setTimerModalIsOpen] = useState(false);\n const [webformIsOpen, setWebformIsOpen] = useState(false);\n const [progressIsOpen, setProgressIsOpen] = useState(false);\n\n const lessonRef = useRef();\n const breadcrumbRef = useRef();\n \n // Page scrolls to top of breadcrumb, lesson is scrolled to top of container\n useEffect(() => {\n if (breadcrumbRef.current) {\n if (lessonRef.current) {\n lessonRef.current.scrollIntoView();\n window.scrollTo(0,breadcrumbRef.current.offsetTop - 20);\n }\n } else {\n window.scrollTo(0, 0);\n }\n },[history.location]);\n\n if (loading) return 'Loading...';\n if (error) throw new Error(error.message);\n\n // Flatten lessons into a single array.\n let lessons = [];\n let sections = [];\n\n // Glossary term tooltip tracker.\n const glossaryTooltipIds = [];\n let glossaryTerms = {};\n\n if (data) {\n const lessonGroups = data.nodeById.fieldLessonCategories;\n lessons = [].concat(...lessonGroups.map(group => group.entity.fieldLessons));\n sections = [].concat(...lessons.map(lesson => lesson.entity.fieldComponents));\n glossaryTerms = processGlossaryTerms(data.nodeById?.fieldGlossary);\n }\n\n const thisIndex = lessons.findIndex(lessonItem => lessonItem.entity.uniqueId === match.params.lessonId);\n const fieldRequired = lessons[thisIndex].entity.fieldRequired;\n\n const optionalLesson = (\n \n
\n \n \n Next Unit\n \n
\n \n
\n Nice Job!
\nYou have completed Unit {unitIndex + 1}.
\n\n
\n );\n\n return (\n <>\n {data.nodeById.fieldUnderConstruction ? \n
\n \n Not sure where to start?\n \n
\n \n \n
\n \n );\n};\n\nexport default Interior;\n","import gql from 'graphql-tag';\n\nexport const UPSERT_MODULE_LOG_MUTATION = gql`\n mutation($input: ModuleLogInput!) {\n upsertModuleLog(input: $input) {\n entity {\n entityId\n }\n errors\n violations {\n message\n }\n }\n }\n`;\n\nexport const MODULE_GRADE_QUERY = gql`\n query($moduleId: String!) {\n nodeById(id: $moduleId) {\n entityId\n ... on NodeModule {\n fieldGrade {\n entity {\n name\n entityId\n ... on TaxonomyTermGradeLevels {\n fieldGradeNumber\n }\n }\n }\n }\n }\n }\n`;\n","import React, { useContext, useState, useEffect } from 'react';\nimport { useMutation, useQuery } from '@apollo/react-hooks';\nimport { withRouter, Link } from 'react-router-dom';\nimport Modal from 'react-modal';\nimport { MODULE_GRADE_QUERY, UPSERT_MODULE_LOG_MUTATION } from './moduleFinish.graphql';\nimport OverviewBackToModules from '../overviewBackToModules/overviewBackToModules';\nimport LoadingSpinner from '../loadingSpinner/loadingSpinner';\nimport Webform from '../webform/webform';\nimport UserContext from '../../context/userContext';\nimport { routerGetPath } from '../../util/helpers';\nimport styles from './moduleFinish.module.scss';\n\nconst customModalStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n transform: 'translate(-50%, -50%)',\n padding: '0',\n border: '0',\n borderRadius: '0',\n width: '800px',\n maxWidth: 'calc(100% - 2rem)',\n },\n overlay: {\n zIndex: '200',\n backgroundColor: 'rgba(42, 42, 42, 0.65)',\n },\n};\n\nconst ModuleFinish = ({ history, moduleId }) => {\n const path = routerGetPath(history);\n const userId = useContext(UserContext);\n const [modalIsOpen, setIsOpen] = useState(false);\n\n const { loading, error, data } = useQuery(MODULE_GRADE_QUERY, { variables: { moduleId } });\n const [upsertModuleLog, { loading: upsertModuleLogLoading, called: upsertModuleLogCalled }] = useMutation(\n UPSERT_MODULE_LOG_MUTATION\n );\n\n useEffect(() => {\n window.scrollTo(0, 0);\n },[]);\n\n let backToModules = null;\n\n if (loading) backToModules = \n \n \n \n
\n \n
\n \n
\n \n {fieldRequired ? null : optionalLesson}\n
\n \n
\n );\n};\n\nexport default withRouter(ModuleFinish);\n","export default __webpack_public_path__ + \"arrow-white.556731c4.svg\";","import React, { useState } from 'react';\nimport { withRouter, Link } from 'react-router-dom';\nimport { stringToPathComponent, routerGetPath } from '../../util/helpers';\nimport Arrow from '../../../public/arrow-white.svg';\nimport styles from './lessonPathways.module.scss';\n\nconst LessonPathways = ({ history }) => {\n const path = routerGetPath(history);\n // Grab lesson data passed from lessonNext link.\n const location = history.location || null;\n const { optionalLessons, nextLesson } = location.state || { optionalLessons: [], nextLesson: '' };\n\n // Set up form states.\n const [selectedLink, setLink] = useState('');\n const [selectedRadioId, setRadioId] = useState('');\n\n // Update on radio input selection.\n const handleOptionChange = event => {\n setLink(event.target.value);\n setRadioId(event.target.id);\n };\n\n // On form submit, redirect to chosen link.\n const submitForm = event => {\n event.preventDefault();\n history.push(selectedLink);\n };\n\n // Default to a link back to the module.\n let form = Go to module overview;\n\n // Build form if all the lesson data is present.\n if (optionalLessons.length && nextLesson) {\n // Build radio inputs for optional lessons.\n const optionalLinks = optionalLessons.map(lesson => {\n const lessonLink = `${path}/step/${lesson.entity.uniqueId}/${stringToPathComponent(lesson.entity.title)}`;\n const lessonId = lesson.entity.uniqueId;\n return (\n \n Back to the module\n \n {webform}\n \n
\n Congratulations!
\nYou completed the module! Great job!
\n \n {backToModules}
\n \n
\n );\n};\n\nexport default withRouter(LessonPathways);\n","import React from 'react';\nimport styles from './notFound.module.scss';\n\nconst NotFound = () => (\n \n
\n Where to go next?
\n{form}
\n {backLink}
\n \n
\n);\n\nexport default NotFound;\n","import gql from 'graphql-tag';\n\nexport const ENTIRE_MODULE_QUERY = gql`\n query($moduleId: String!) {\n nodeById(id: $moduleId) {\n id\n entityId\n title\n ... on NodeModule {\n fieldDescription {\n processed\n }\n fieldImage {\n entity {\n ... on MediaImage {\n fieldMediaImage {\n alt\n ... on FieldMediaImageFieldMediaImage {\n derivative(style: MODULEFULLWIDTH) {\n url\n }\n }\n }\n }\n }\n }\n fieldToolsNeeded\n fieldGrade {\n entity {\n id\n name\n entityId\n ... on TaxonomyTermGradeLevels {\n fieldGradeNumber\n }\n }\n }\n fieldTopic {\n targetId\n entity {\n name\n }\n }\n fieldActivity {\n targetId\n entity {\n name\n }\n }\n fieldStandard {\n targetId\n entity {\n name\n }\n }\n fieldLessonCategories {\n entity {\n id\n ... on ParagraphLessonCategory {\n fieldTitle\n fieldLessons {\n entity {\n id\n entityId\n ... on NodeLesson {\n title\n fieldRequired\n fieldComponents {\n entity {\n id\n entityBundle\n }\n }\n fieldReferences {\n processed\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n`;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { useReactToPrint } from 'react-to-print';\nimport { withRouter } from 'react-router-dom';\nimport { useQuery } from '@apollo/react-hooks';\nimport { ENTIRE_MODULE_QUERY } from './print.graphql';\nimport LoadingSpinner from '../loadingSpinner/loadingSpinner';\nimport LessonComponents from '../lessonComponents/lessonComponents';\nimport styles from './print.module.scss';\n\nconst Print = ({ history, moduleId }) => {\n const fullPath = history.location.pathname;\n const path = fullPath.split('/print')[0];\n const [printDisabled, setPrintDisabled] = useState(true);\n const printRef = useRef();\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setPrintDisabled(false);\n }, 5000);\n return () => clearTimeout(timer);\n }, []);\n\n const handlePrint = useReactToPrint({\n content: () => printRef.current,\n });\n\n const { loading, error, data } = useQuery(ENTIRE_MODULE_QUERY, { variables: { moduleId } });\n\n if (loading) return \n \n Contact\n \n
\n 404: Page not found
\nOops!
\nSorry, we couldn’t find the page you were looking for. Let us know if we can help you find something!
\n \n Home\n \n\n
\n \n \n {printDisabled ? 'Loading...' : 'Print this module'}\n \n \n
\n \n
\n {data.nodeById.title}
\n\n
\n \n );\n};\n\nexport default withRouter(Print);\n","import React, { useState, useMemo, useEffect } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronUp, faChevronDown, faArrowCircleRight, faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons';\nimport ReactHtmlParser from 'react-html-parser';\nimport Pagination from 'rc-pagination';\nimport styles from './questions.module.scss';\nimport LoadingSpinner from '../../loadingSpinner/loadingSpinner';\n\nconst Questions = ({\n selectedQuestions,\n questionsRef,\n selectedCategory,\n setSelectedQuestions,\n allQuestions,\n setSelectedCategory,\n searchedTerm,\n setSearchedTerm,\n}) => {\n const [questionExpanded, setQuestionExpanded] = useState(false);\n const [currentPage, setCurrentPage] = useState(1);\n const PageSize = 10;\n\n // Slices selected questions to render based off current page selected and page range\n const currentData = useMemo(() => {\n const firstPageIndex = (currentPage - 1) * PageSize;\n const lastPageIndex = firstPageIndex + PageSize;\n return selectedQuestions.slice(firstPageIndex, lastPageIndex);\n }, [currentPage, selectedQuestions]);\n\n useEffect(() => {\n setCurrentPage(1);\n }, [selectedCategory]);\n\n // Set questions to expand all upon search results entered\n useEffect(() => {\n if (!selectedCategory && selectedQuestions.length !== allQuestions.length) {\n setQuestionExpanded('all');\n } else {\n setQuestionExpanded(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedQuestions]);\n\n // Items to render for pagination library\n const Items = ({ currentQuestions }) => (\n <>\n {currentQuestions.length ? (\n currentQuestions.map(question => (\n \n
\n {data.nodeById.title}
\n \n {lessonsData?.map(lesson => (\n\n
\n ))}\n {lesson.lessonTitle}
\n\n
\n ) : (\n ''\n )}\n References
\n \n\n \n {questionExpanded === question.entityId || questionExpanded === 'all' ? (\n
\n ))\n ) : (\n \n {ReactHtmlParser(\n question.body.processed.replace(\n searchedTerm,\n `${searchedTerm}`\n )\n )}\n
\n ) : null}\n \n {\n setSelectedQuestions(null);\n setSearchedTerm(undefined);\n }}\n >\n Clear Results\n \n
\n )}\n \n );\n\n // Custom Next, previous, and numbered for pagination Library\n\n const itemRender = (current, type, element) => {\n if (type === 'page') {\n return (\n \n );\n }\n if (type === 'prev') {\n return (\n Oops! Nothing was found for that search. Please try again.
\n\n
\n );\n }\n if (type === 'next') {\n return (\n \n
\n );\n }\n return element;\n };\n\n // On page change request, set current page\n const onPageChange = page => {\n setCurrentPage(page);\n };\n\n return (\n \n {selectedQuestions.length && selectedQuestions.length !== allQuestions.length && !selectedCategory ? (\n {\n setSelectedQuestions(null);\n setSelectedCategory(null);\n setSearchedTerm(undefined);\n }}\n >\n Clear Results\n \n ) : null}\n {selectedQuestions !== 'loading' ?
\n );\n};\n\nexport default Questions;\n","import gql from 'graphql-tag';\n\nexport const HELP_DESK_SEARCH = gql`\n query($text: String!) {\n queryHelpdesk(category_ids: [], text: $text, limit: 10, offset: 0) {\n count\n entities {\n id\n entityId\n entityLabel\n ... on NodeHelpDeskQuestion {\n body {\n processed\n }\n fieldHelpDeskCategory {\n targetId\n entity {\n entityId\n entityLabel\n }\n }\n }\n }\n }\n }\n`;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faSearch } from '@fortawesome/free-solid-svg-icons';\nimport { useLazyQuery } from '@apollo/react-hooks';\nimport ReactHtmlParser from 'react-html-parser';\nimport styles from './typeAhead.module.scss';\nimport { HELP_DESK_SEARCH } from '../searchNav/searchNav.graphql.js';\n\nconst TypeAhead = ({\n items,\n setSelectedCategory,\n setSelectedQuestions,\n questionsRef,\n allQuestions,\n setSearchedTerm,\n}) => {\n const [suggestions, setSuggestions] = useState([]);\n const [inputText, setInputText] = useState('');\n const [formSubmittedCount, setFormSubmittedCount] = useState(0);\n\n // Creates array with 10 ref elements to be used in mapped suggestions for drop down, allowing keydown focus ability\n const refsArray = [];\n for (let i = 0; i <= 10; i++) {\n refsArray.push(React.createRef());\n }\n const refs = useRef(refsArray);\n\n const [fetchSearch, { data: allData }] = useLazyQuery(HELP_DESK_SEARCH);\n\n // On input text change, re-filter suggestions and update state\n const onTextChange = e => {\n setSuggestions([]);\n const { value } = e.target;\n setInputText(value);\n if (value.length > 0) {\n setSuggestions(items.filter(item => item.value.toUpperCase().includes(value.toUpperCase())));\n }\n };\n\n // On drop down selected, set searched term and selected questions\n const onSuggestionSelected = value => {\n setSearchedTerm(inputText);\n setInputText('');\n setSuggestions([]);\n setSelectedQuestions(allQuestions.filter(question => question.entityId === value.id));\n };\n\n // Handle submit of input bar search, only triggers when not using a suggestion/drop down (raw query of input)\n const handleSubmit = () => {\n setSelectedQuestions('loading');\n fetchSearch({ variables: { text: inputText } });\n setFormSubmittedCount(formSubmittedCount + 1);\n setSearchedTerm(inputText);\n setInputText('');\n setSuggestions([]);\n questionsRef.current.scrollIntoView({\n behavior: 'smooth',\n block: 'end',\n });\n };\n\n // Preventing key down default on this page to allow for keydown for dropdown\n window.addEventListener(\n 'keydown',\n function(e) {\n if (['ArrowUp', 'ArrowDown'].indexOf(e.code) > -1) {\n e.preventDefault();\n }\n },\n false\n );\n\n // When data changes or form is submitted, set questions to the results\n useEffect(() => {\n if (allData) {\n setSelectedQuestions(allData?.queryHelpdesk?.entities);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [allData, formSubmittedCount]);\n\n return (\n \n {\n handleSubmit();\n e.preventDefault();\n }}\n >\n {\n setSelectedCategory(null);\n setSearchedTerm(undefined);\n }}\n placeholder=\"What are you having trouble with?\"\n value={inputText}\n onKeyDown={e => {\n if (e.keyCode === 40 && refs.current[0].current) {\n refs.current[0].current.focus();\n }\n }}\n />\n \n \n {suggestions.length === 0 ? null : (\n
\n );\n};\n\nexport default TypeAhead;\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck } from '@fortawesome/free-solid-svg-icons';\nimport styles from './userCard.module.scss';\n\nconst UserCard = ({ selectedCategory, setSelectedCategory, category, setSearchedTerm }) => (\n \n
\n )}\n - \n {suggestions.map((suggestion, index) => (\n
- \n {ReactHtmlParser(\n suggestion.value.replace(inputText, `${inputText}`)\n )}\n \n \n ))}\n
\n {selectedCategory === parseInt(category.entityId) ? (\n
\n \n);\n\nexport default UserCard;\n","import React from 'react';\nimport styles from './searchNav.module.scss';\nimport TypeAhead from '../typeAhead/typeAhead';\nimport UserCard from '../userCard/userCard';\n\nconst SearchNav = ({\n allQuestions,\n setSelectedQuestions,\n setSelectedCategory,\n selectedQuestions,\n setAllResultsExpanded,\n questionsRef,\n selectedCategory,\n categories,\n setSearchedTerm,\n}) => {\n const items = [];\n let newItem = {};\n\n // For all questions, push an item that will be used to filter dropdown list\n allQuestions.forEach(question => {\n newItem.value = question.entityLabel;\n newItem.id = question.entityId;\n items.push(newItem);\n newItem = {};\n });\n\n return (\n \n
\n );\n};\n\nexport default SearchNav;\n","import gql from 'graphql-tag';\n\nexport const HELP_DESK_CATEGORIES = gql`\n query {\n taxonomyLoad(vid: \"help_desk_category\", parent: 0) {\n results {\n entityId\n entityLabel\n }\n }\n }\n`;\n\nexport const HELP_DESK_QUESTIONS = gql`\n query {\n nodeQuery(\n limit: 100\n offset: 0\n filter: { conditions: [{ operator: EQUAL, field: \"type\", value: [\"help_desk_question\"] }] }\n ) {\n count\n entities {\n id\n entityId\n entityLabel\n ... on NodeHelpDeskQuestion {\n body {\n processed\n }\n fieldHelpDeskCategory {\n targetId\n entity {\n entityId\n entityLabel\n }\n }\n }\n }\n }\n }\n`;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport Questions from '../questions/questions';\nimport SearchNav from '../searchNav/searchNav';\nimport styles from './helpDesk.module.scss';\nimport { HELP_DESK_CATEGORIES, HELP_DESK_QUESTIONS } from './helpDesk.graphql';\nimport LoadingSpinner from '../../loadingSpinner/loadingSpinner';\n\nconst HelpDesk = () => {\n const { loading: categoriesLoading, data: categoriesData } = useQuery(HELP_DESK_CATEGORIES);\n const { loading: questionsLoading, data: questionsData } = useQuery(HELP_DESK_QUESTIONS);\n const [selectedCategory, setSelectedCategory] = useState(null);\n const [selectedQuestions, setSelectedQuestions] = useState([]);\n const [allResultsExpanded, setAllResultsExpanded] = useState(false);\n const [searchedTerm, setSearchedTerm] = useState('');\n let categories = null;\n let allQuestions = null;\n const questionsRef = useRef();\n\n if (categoriesData && questionsData) {\n categories = categoriesData?.taxonomyLoad?.results;\n allQuestions = questionsData?.nodeQuery?.entities;\n }\n\n // When data first loads, or when category removed, set questions back to all\n useEffect(() => {\n if (!selectedCategory && allQuestions) {\n setSelectedQuestions(allQuestions);\n }\n }, [allQuestions, selectedCategory]);\n\n // When user changes selected category, sets the selected questions to those in that category\n useEffect(() => {\n if (selectedCategory) {\n const filteredQuestions = allQuestions.filter(\n question =>\n question.fieldHelpDeskCategory[0]?.targetId === selectedCategory ||\n question.fieldHelpDeskCategory[1]?.targetId === selectedCategory ||\n question.fieldHelpDeskCategory[2]?.targetId === selectedCategory\n );\n setSelectedQuestions(filteredQuestions);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedCategory]);\n\n return (\n Welcome to the MOOSE Help Desk
\n Hi! How can we help you?
\n\n Select a button below to see questions and answers related to your role.\n
\n \n {categories.map(category => (\n
\n \n
\n );\n};\n\nexport default HelpDesk;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { BreakpointProvider, setDefaultBreakpoints } from 'react-socks';\nimport { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\nimport ReactTooltip from 'react-tooltip';\nimport { CURRENT_USER_QUERY, CURRENT_USER_PROGRESS_QUERY } from './App.graphql';\nimport UserContext from './context/userContext';\nimport UserProgressContext from './context/userProgressContext';\nimport LastLessonViewedContext from './context/lastLessonViewedContext';\nimport LoadingSpinner from './components/loadingSpinner/loadingSpinner';\nimport Overview from './components/overview/overview';\nimport Interior from './components/interior/interior';\nimport ModuleFinish from './components/moduleFinish/moduleFinish';\nimport LessonPathways from './components/lessonPathways/lessonPathways';\nimport NotFound from './components/notFound/notFound';\nimport Print from './components/print/print';\nimport styles from '../styles/app.module.scss';\nimport HelpDesk from './components/helpDesk/helpDesk/helpDesk';\n\nsetDefaultBreakpoints([{ small: 0 }, { medium: 769 }]);\n\nconst App = ({ moduleId }) => {\n const { loading, error, data } = useQuery(CURRENT_USER_QUERY);\n const userId = data && data?.currentUserContext ? data?.currentUserContext?.uid.toString() : '';\n const { loading: userProgressLoading, error: userProgressError, data: userProgressData } = useQuery(\n CURRENT_USER_PROGRESS_QUERY,\n {\n skip: !data || loading || !userId || !moduleId,\n variables: { userId, moduleId },\n fetchPolicy: 'network-only',\n }\n );\n\n if (loading || userProgressLoading) return \n \n Home\n \n | \n \n MOOSE Help Desk\n \n
\n {categoriesLoading || questionsLoading ? (\n \n \n \n \n \n
\n