Notice: This filter is IPv6 friendly by not encoding '[' and ']'.
\n*\n* Notice: This filter is IPv6 friendly by not encoding '[' and ']'.
\n*\n* Notice: The actual implementation skips inHTMLData(), since '<' is already encoded as '%3C' by encodeURI().
\n* Notice: This filter is IPv6 friendly by not encoding '[' and ']'.
\n*\n* Notice: This filter is IPv6 friendly by not encoding '[' and ']'.
\n*\n* Notice: The actual implementation skips inHTMLData(), since '<' is already encoded as '%3C' by encodeURI().
\n*\n* Notice: The actual implementation skips inHTMLData(), since '<' is already encoded as '%3C' by encodeURIComponent().
\n*\n* \n *\n * Copyright (c) 2015, Jon Schlinkert.\n * Licensed under the MIT License.\n */\n\nfunction pascalcase(str) {\n if (typeof str !== 'string') {\n throw new TypeError('expected a string.');\n }\n str = str.replace(/([A-Z])/g, ' $1');\n if (str.length === 1) { return str.toUpperCase(); }\n str = str.replace(/^[\\W_]+|[\\W_]+$/g, '').toLowerCase();\n str = str.charAt(0).toUpperCase() + str.slice(1);\n return str.replace(/[\\W_]+(\\w|$)/g, function (_, ch) {\n return ch.toUpperCase();\n });\n}\n\nmodule.exports = pascalcase;\n","'use strict';\n\nvar React = require('react');\nvar assign = require('lodash.assign');\nvar isPlainObject = require('lodash.isplainobject');\nvar xssFilters = require('xss-filters');\nvar pascalCase = require('pascalcase');\n\nvar typeAliases = {\n blockquote: 'block_quote',\n thematicbreak: 'thematic_break',\n htmlblock: 'html_block',\n htmlinline: 'html_inline',\n codeblock: 'code_block',\n hardbreak: 'linebreak'\n};\n\nvar defaultRenderers = {\n block_quote: 'blockquote', // eslint-disable-line camelcase\n emph: 'em',\n linebreak: 'br',\n image: 'img',\n item: 'li',\n link: 'a',\n paragraph: 'p',\n strong: 'strong',\n thematic_break: 'hr', // eslint-disable-line camelcase\n\n html_block: HtmlRenderer, // eslint-disable-line camelcase\n html_inline: HtmlRenderer, // eslint-disable-line camelcase\n\n list: function List(props) {\n var tag = props.type.toLowerCase() === 'bullet' ? 'ul' : 'ol';\n var attrs = getCoreProps(props);\n\n if (props.start !== null && props.start !== 1) {\n attrs.start = props.start.toString();\n }\n\n return createElement(tag, attrs, props.children);\n },\n code_block: function CodeBlock(props) { // eslint-disable-line camelcase\n var className = props.language && 'language-' + props.language;\n var code = createElement('code', { className: className }, props.literal);\n return createElement('pre', getCoreProps(props), code);\n },\n code: function Code(props) {\n return createElement('code', getCoreProps(props), props.children);\n },\n heading: function Heading(props) {\n return createElement('h' + props.level, getCoreProps(props), props.children);\n },\n\n text: null,\n softbreak: null\n};\n\nvar coreTypes = Object.keys(defaultRenderers);\n\nfunction getCoreProps(props) {\n var propKeys = Object.keys(props);\n\n var dataPropKeys = propKeys.filter(function(propKey) {\n return propKey.match(/data-.*/g);\n });\n\n var base = {\n key: props.nodeKey,\n className: props.className\n };\n\n var dataAttributes = dataPropKeys.reduce(function(prev, dataPropKey) {\n var attributes = {};\n attributes[dataPropKey] = props[dataPropKey];\n\n return assign(attributes, prev);\n }, {});\n\n return assign(dataAttributes, base);\n}\n\nfunction normalizeTypeName(typeName) {\n var norm = typeName.toLowerCase();\n var type = typeAliases[norm] || norm;\n return typeof defaultRenderers[type] !== 'undefined' ? type : typeName;\n}\n\nfunction normalizeRenderers(renderers) {\n return Object.keys(renderers || {}).reduce(function(normalized, type) {\n var norm = normalizeTypeName(type);\n normalized[norm] = renderers[type];\n return normalized;\n }, {});\n}\n\nfunction HtmlRenderer(props) {\n var coreProps = getCoreProps(props);\n var nodeProps = props.escapeHtml ? {} : { dangerouslySetInnerHTML: { __html: props.literal } };\n var children = props.escapeHtml ? [props.literal] : null;\n\n if (props.escapeHtml || !props.skipHtml) {\n var actualProps = assign(coreProps, nodeProps);\n return createElement(props.isBlock ? 'div' : 'span', actualProps, children);\n }\n}\n\nfunction isGrandChildOfList(node) {\n var grandparent = node.parent.parent;\n return (\n grandparent &&\n grandparent.type.toLowerCase() === 'list' &&\n grandparent.listTight\n );\n}\n\nfunction addChild(node, child) {\n var parent = node;\n do {\n parent = parent.parent;\n } while (!parent.react);\n\n parent.react.children.push(child);\n}\n\nfunction createElement(tagName, props, children) {\n var nodeChildren = Array.isArray(children) && children.reduce(reduceChildren, []);\n var args = [tagName, props].concat(nodeChildren || children);\n return React.createElement.apply(React, args);\n}\n\nfunction reduceChildren(children, child) {\n var lastIndex = children.length - 1;\n if (typeof child === 'string' && typeof children[lastIndex] === 'string') {\n children[lastIndex] += child;\n } else {\n children.push(child);\n }\n\n return children;\n}\n\nfunction flattenPosition(pos) {\n return [\n pos[0][0], ':', pos[0][1], '-',\n pos[1][0], ':', pos[1][1]\n ].map(String).join('');\n}\n\n// For some nodes, we want to include more props than for others\nfunction getNodeProps(node, key, opts, renderer) {\n var props = { key: key }, undef;\n\n // `sourcePos` is true if the user wants source information (line/column info from markdown source)\n if (opts.sourcePos && node.sourcepos) {\n props['data-sourcepos'] = flattenPosition(node.sourcepos);\n }\n\n var type = normalizeTypeName(node.type);\n\n switch (type) {\n case 'html_inline':\n case 'html_block':\n props.isBlock = type === 'html_block';\n props.escapeHtml = opts.escapeHtml;\n props.skipHtml = opts.skipHtml;\n break;\n case 'code_block':\n var codeInfo = node.info ? node.info.split(/ +/) : [];\n if (codeInfo.length > 0 && codeInfo[0].length > 0) {\n props.language = codeInfo[0];\n props.codeinfo = codeInfo;\n }\n break;\n case 'code':\n props.children = node.literal;\n props.inline = true;\n break;\n case 'heading':\n props.level = node.level;\n break;\n case 'softbreak':\n props.softBreak = opts.softBreak;\n break;\n case 'link':\n props.href = opts.transformLinkUri ? opts.transformLinkUri(node.destination) : node.destination;\n props.title = node.title || undef;\n if (opts.linkTarget) {\n props.target = opts.linkTarget;\n }\n break;\n case 'image':\n props.src = opts.transformImageUri ? opts.transformImageUri(node.destination) : node.destination;\n props.title = node.title || undef;\n\n // Commonmark treats image description as children. We just want the text\n props.alt = node.react.children.join('');\n node.react.children = undef;\n break;\n case 'list':\n props.start = node.listStart;\n props.type = node.listType;\n props.tight = node.listTight;\n break;\n default:\n }\n\n if (typeof renderer !== 'string') {\n props.literal = node.literal;\n }\n\n var children = props.children || (node.react && node.react.children);\n if (Array.isArray(children)) {\n props.children = children.reduce(reduceChildren, []) || null;\n }\n\n return props;\n}\n\nfunction getPosition(node) {\n if (!node) {\n return null;\n }\n\n if (node.sourcepos) {\n return flattenPosition(node.sourcepos);\n }\n\n return getPosition(node.parent);\n}\n\nfunction renderNodes(block) {\n var walker = block.walker();\n\n var propOptions = {\n sourcePos: this.sourcePos,\n escapeHtml: this.escapeHtml,\n skipHtml: this.skipHtml,\n transformLinkUri: this.transformLinkUri,\n transformImageUri: this.transformImageUri,\n softBreak: this.softBreak,\n linkTarget: this.linkTarget\n };\n\n var e, node, entering, leaving, type, doc, key, nodeProps, prevPos, prevIndex = 0;\n while ((e = walker.next())) {\n var pos = getPosition(e.node.sourcepos ? e.node : e.node.parent);\n if (prevPos === pos) {\n key = pos + prevIndex;\n prevIndex++;\n } else {\n key = pos;\n prevIndex = 0;\n }\n\n prevPos = pos;\n entering = e.entering;\n leaving = !entering;\n node = e.node;\n type = normalizeTypeName(node.type);\n nodeProps = null;\n\n // If we have not assigned a document yet, assume the current node is just that\n if (!doc) {\n doc = node;\n node.react = { children: [] };\n continue;\n } else if (node === doc) {\n // When we're leaving...\n continue;\n }\n\n // In HTML, we don't want paragraphs inside of list items\n if (type === 'paragraph' && isGrandChildOfList(node)) {\n continue;\n }\n\n // If we're skipping HTML nodes, don't keep processing\n if (this.skipHtml && (type === 'html_block' || type === 'html_inline')) {\n continue;\n }\n\n var isDocument = node === doc;\n var disallowedByConfig = this.allowedTypes.indexOf(type) === -1;\n var disallowedByUser = false;\n\n // Do we have a user-defined function?\n var isCompleteParent = node.isContainer && leaving;\n var renderer = this.renderers[type];\n if (this.allowNode && (isCompleteParent || !node.isContainer)) {\n var nodeChildren = isCompleteParent ? node.react.children : [];\n\n nodeProps = getNodeProps(node, key, propOptions, renderer);\n disallowedByUser = !this.allowNode({\n type: pascalCase(type),\n renderer: this.renderers[type],\n props: nodeProps,\n children: nodeChildren\n });\n }\n\n if (!isDocument && (disallowedByUser || disallowedByConfig)) {\n if (!this.unwrapDisallowed && entering && node.isContainer) {\n walker.resumeAt(node, false);\n }\n\n continue;\n }\n\n var isSimpleNode = type === 'text' || type === 'softbreak';\n if (typeof renderer !== 'function' && !isSimpleNode && typeof renderer !== 'string') {\n throw new Error(\n 'Renderer for type `' + pascalCase(node.type) + '` not defined or is not renderable'\n );\n }\n\n if (node.isContainer && entering) {\n node.react = {\n component: renderer,\n props: {},\n children: []\n };\n } else {\n var childProps = nodeProps || getNodeProps(node, key, propOptions, renderer);\n if (renderer) {\n childProps = typeof renderer === 'string'\n ? childProps\n : assign(childProps, {nodeKey: childProps.key});\n\n addChild(node, React.createElement(renderer, childProps));\n } else if (type === 'text') {\n addChild(node, node.literal);\n } else if (type === 'softbreak') {\n // Softbreaks are usually treated as newlines, but in HTML we might want explicit linebreaks\n var softBreak = (\n this.softBreak === 'br' ?\n React.createElement('br', {key: key}) :\n this.softBreak\n );\n addChild(node, softBreak);\n }\n }\n }\n\n return doc.react.children;\n}\n\nfunction defaultLinkUriFilter(uri) {\n var url = uri.replace(/file:\\/\\//g, 'x-file://');\n\n // React does a pretty swell job of escaping attributes,\n // so to prevent double-escaping, we need to decode\n return decodeURI(xssFilters.uriInDoubleQuotedAttr(url));\n}\n\nfunction ReactRenderer(options) {\n var opts = options || {};\n\n if (opts.allowedTypes && opts.disallowedTypes) {\n throw new Error('Only one of `allowedTypes` and `disallowedTypes` should be defined');\n }\n\n if (opts.allowedTypes && !Array.isArray(opts.allowedTypes)) {\n throw new Error('`allowedTypes` must be an array');\n }\n\n if (opts.disallowedTypes && !Array.isArray(opts.disallowedTypes)) {\n throw new Error('`disallowedTypes` must be an array');\n }\n\n if (opts.allowNode && typeof opts.allowNode !== 'function') {\n throw new Error('`allowNode` must be a function');\n }\n\n var linkFilter = opts.transformLinkUri;\n if (typeof linkFilter === 'undefined') {\n linkFilter = defaultLinkUriFilter;\n } else if (linkFilter && typeof linkFilter !== 'function') {\n throw new Error('`transformLinkUri` must either be a function, or `null` to disable');\n }\n\n var imageFilter = opts.transformImageUri;\n if (typeof imageFilter !== 'undefined' && typeof imageFilter !== 'function') {\n throw new Error('`transformImageUri` must be a function');\n }\n\n if (opts.renderers && !isPlainObject(opts.renderers)) {\n throw new Error('`renderers` must be a plain object of `Type`: `Renderer` pairs');\n }\n\n var allowedTypes = (opts.allowedTypes && opts.allowedTypes.map(normalizeTypeName)) || coreTypes;\n if (opts.disallowedTypes) {\n var disallowed = opts.disallowedTypes.map(normalizeTypeName);\n allowedTypes = allowedTypes.filter(function filterDisallowed(type) {\n return disallowed.indexOf(type) === -1;\n });\n }\n\n return {\n sourcePos: Boolean(opts.sourcePos),\n softBreak: opts.softBreak || '\\n',\n renderers: assign({}, defaultRenderers, normalizeRenderers(opts.renderers)),\n escapeHtml: Boolean(opts.escapeHtml),\n skipHtml: Boolean(opts.skipHtml),\n transformLinkUri: linkFilter,\n transformImageUri: imageFilter,\n allowNode: opts.allowNode,\n allowedTypes: allowedTypes,\n unwrapDisallowed: Boolean(opts.unwrapDisallowed),\n render: renderNodes,\n linkTarget: opts.linkTarget || false\n };\n}\n\nReactRenderer.uriTransformer = defaultLinkUriFilter;\nReactRenderer.types = coreTypes.map(pascalCase);\nReactRenderer.renderers = coreTypes.reduce(function(renderers, type) {\n renderers[pascalCase(type)] = defaultRenderers[type];\n return renderers;\n}, {});\n\nmodule.exports = ReactRenderer;\n","'use strict';\n\nvar React = require('react');\nvar Parser = require('commonmark').Parser;\nvar ReactRenderer = require('commonmark-react-renderer');\nvar propTypes = require('prop-types');\n\nfunction ReactMarkdown(props) {\n React.Component.call(this, props);\n}\n\nReactMarkdown.prototype = Object.create(React.Component.prototype);\nReactMarkdown.prototype.constructor = ReactMarkdown;\n\nReactMarkdown.prototype.render = function() {\n var containerProps = this.props.containerProps || {};\n var renderer = new ReactRenderer(this.props);\n var parser = new Parser(this.props.parserOptions);\n var ast = parser.parse(this.props.source || '');\n\n if (this.props.walker) {\n var walker = ast.walker();\n var event;\n\n while ((event = walker.next())) {\n this.props.walker.call(this, event, walker);\n }\n }\n\n if (this.props.className) {\n containerProps.className = this.props.className;\n }\n\n return React.createElement.apply(React,\n [this.props.containerTagName, containerProps, this.props.childBefore]\n .concat(renderer.render(ast).concat(\n [this.props.childAfter]\n ))\n );\n};\n\nReactMarkdown.propTypes = {\n className: propTypes.string,\n containerProps: propTypes.object,\n source: propTypes.string.isRequired,\n containerTagName: propTypes.string,\n childBefore: propTypes.object,\n childAfter: propTypes.object,\n sourcePos: propTypes.bool,\n escapeHtml: propTypes.bool,\n skipHtml: propTypes.bool,\n softBreak: propTypes.string,\n allowNode: propTypes.func,\n allowedTypes: propTypes.array,\n disallowedTypes: propTypes.array,\n transformLinkUri: propTypes.func,\n transformImageUri: propTypes.func,\n unwrapDisallowed: propTypes.bool,\n renderers: propTypes.object,\n walker: propTypes.func,\n parserOptions: propTypes.object\n};\n\nReactMarkdown.defaultProps = {\n containerTagName: 'div',\n parserOptions: {}\n};\n\nReactMarkdown.types = ReactRenderer.types;\nReactMarkdown.renderers = ReactRenderer.renderers;\nReactMarkdown.uriTransformer = ReactRenderer.uriTransformer;\n\nmodule.exports = ReactMarkdown;\n","import React from 'react';\nimport ReactMarkdown from 'react-markdown';\n\nconst PreviewCard = (props) => {\n const color = props.color || 'green';\n\n function handleNavigation() {\n if (props.externalLink) {\n window.open(props.link, '_blank', 'noopener,noreferrer');\n } else {\n window.location.href = props.link;\n }\n };\n\n let accessibleLabel =\n props.ariaLabel || `Read more${props.title ? ` about ${props.title}` : ''}`;\n if (props.externalLink) {\n accessibleLabel += ' (opens in a new tab)';\n }\n\n return (\n \n \n {props.buttonText || 'Read'}\n \n
\n );\n};\n\nexport default PreviewCard;\n\n","import React from 'react';\nimport HeaderSection from '../components/blog_posts/header_section';\nimport PreviewCard from '../components/shared/preview_card.jsx';\n\nexport default (props) => {\n const articles = props.blogPosts.length > 0 ? props.blogPosts.map(article =>\n ({articles}
\n : (\n Coming Soon!\n
\n
\n
\n )\n}\n","export const AP = 'ap';\nexport const PRE_AP = 'preap';\nexport const SPRINGBOARD = 'springboard';\n","import React from 'react'\n\nconst admin = () => [\n {\n question: 'How does the Professional Development work?',\n answer: After upgrading to Quill School Premium, you’ll receive an email from our team with next steps, which include setting up your professional development session.
\n },\n {\n question: 'How can I arrange the Professional Development session?',\n answer: [In order to set up that session, you will set up an initial 15-minute call between your PD coordinator and our School Partnerships team to discuss tailoring the session school goals and writing curriculum, which tools you’d like to highlight, and when you’d like the session to happen. You can do this by signing up at quill-partnerships.youcanbook.me .
,\n Teachers will be asked to set up their Quill accounts prior to the session, so they can jump right into exploring Quill!
\n ]\n },\n {\n question: 'What is the Professional Development session structure like?',\n answer: [\n The personalized session will last 45 to 75 minutes, and will involve a review of chosen tools as they relate to the school’s focus, and (time allowing) a conversation surrounding how teachers can effectively integrate Quill into their classroom. In the session, teachers will establish a direct line of communication with the School Partnerships team.
\n ]\n },\n {\n question: 'How will I access the Professional Development session?',\n answer: [Sessions outside of New York City will be held remotely via Zoom, and will be recorded via Zoom to provide teachers with continued access to the information. Teachers will receive a follow up email with a reminder of resources and a link to the session recording.
]\n },\n {\n question: 'How does Premium Reporting Work?',\n answer: [\n Teachers and administrators will continue to have access to basic reporting features, including the Activity Summary, Activity Analysis and Diagnostic reports. Here’s a guide on standard reports.
,\n Premium teacher reports are available to teachers within their account and administrators via a link in the Administrator Dashboard. Those reports include List Overview, Concepts and Common Core Standards reporting. You will be able to download and print each of the premium reports to share with your colleagues, administrators or parents. Here’s a guide on Premium Reports.
\n ]\n },\n {\n question: 'What resources can I use to introduce Quill to the teachers in my school?',\n answer: [You can access a two-page handout to introduce teachers to Quill here . Your teachers can use the teacher resources page to access in-depth guides and video overviews.
]\n }\n]\n\nexport default admin\n","import React from 'react'\n\nconst ap = () => [\n {\n question: 'What is Quill.org?',\n answer: Quill is a writing tool that provides over 700 writing, grammar, and proofreading activities designed to engage students in the writing process. Quill provides practice in many areas of sentence writing, from comma placement and subject-verb agreement to the use of conjunctions to convey complex relationships between ideas. In the Quill Connect tool, students practice writing different types of sentences using the evidence-based strategy of sentence combining. Students receive specific, targeted feedback on their writing that they can use to revise their work. Through these activities, students practice writing a variety of sophisticated sentences and practice conveying complex ideas in clear, succinct, and grammatically strong ways. Most activities are designed to be completed in 10-15 minutes so that you have the freedom to use them in the way that works best for your classroom.
\n },\n {\n question: 'What is the AP Writing Skills Survey?',\n answer: The AP Writing Skills Survey is a survey with 17 questions on a range of writing skills. The questions ask students to combine sentences, sometimes with a direction to use a specific strategy, and sometimes without any direction (other than to combine).
\n },\n {\n question: 'For which AP courses is this practice most relevant?',\n answer:Students in any AP course can benefit from the practice recommended by Quill's AP Writing Skills Survey, but the practice is probably of greatest interest to teachers of AP English Language and Composition and AP English Literature and Composition.
\n },\n {\n question: 'Is a writing skills survey different than a diagnostic?',\n answer: Quill's writing skills surveys can be used in lieu of Quill's general diagnostics. For example, an AP teacher would likely assign the AP Writing Skills Survey in lieu of the Advanced Diagnostic. Keep in mind, however, that teachers may want ELL students in AP courses to begin with one of the ELL Diagnostics instead of a writing skills survey. This article explains the differences between Quill’s various diagnostics and surveys in more depth.
\n },\n {\n question: 'How long does the Survey take?',\n answer: The Survey contains 17 questions and is designed to take about 30 minutes for students to complete.
\n },\n {\n question: 'What happens after I assign the Survey and my students complete it?',\n answer: After you have assigned the Survey and your students have completed it, Quill will show you how your students performed and provide recommendations of personalized practice activities you can digitally assign to students who need further skill development. This article explains how to find and assign those recommendations.
\n },\n {\n question: 'What kind of activities will be recommended to my students after they take the AP Writing Skills Survey?',\n answer: (\n \n
Depending on their performance, students will be recommended some or all of the following AP Writing Practice packs. The packs provide practice through Quill Connect , Quill's sentence combining tool . With the exception of the AP Writing - Advanced Sentence Combining pack , the activities in each pack are scaffolded to build in complexity. Here are descriptions of the packs:
\n
AP Writing Practice - Complex Sentences
\n
Students practice constructing complex sentences using subordinating conjunctions, such as even though, after, while, and because. Students also practice identifying time order, opposition, and cause/effect relationships.
\n
AP Writing Practice - Relative Clauses
\n
Students begin by using a provided relative pronoun, then progress to choosing between who, that, or which.
\n
AP Writing Practice - Appositive Phrases
\n
Students practice describing nouns using appositive phrases at the beginning, middle, and end of sentences.
\n
AP Writing Practice - Participial Phrases
\n
Students practice constructing sentences with -ing and -ed participial phrases at the beginning, middle, or end.
\n
AP Writing Practice - Parallel Structure
\n
Students practice constructing sentences in parallel structure with correlative conjunctions like either/or, neither/nor, and both/and, and with subordinating conjunctions like although, because, and when. Students also practice constructing sentences with parallel clauses.
\n
AP Writing Practice - Compound-Complex Sentences
\n
Students practice constructing compound sentences with and, or, but, and so. Students also practice constructing complex sentences with subordinating conjunctions such as even though, after, while, and because. Finally, students practice constructing compound-complex sentences with coordinating and subordinating conjunctions. Students also practice identifying time order, opposition, and cause/effect relationships.
\n
AP Writing Practice - Advanced Combining
\n
Students apply their knowledge of multiple sentence structures to combine the sentences in the strongest way possible. Students practice constructing compound and complex sentences, using modifying phrases and clauses, and combining predicates.
\n
Yes! From anywhere and at any time! Again though, please note that recommendations of the AP Writing Packs are generated after students complete the AP Writing Skills Survey. Please also note that students' performance on the AP Writing Practice packs will only be recorded if they are assigned to them by their teacher.
\n },\n {\n question: 'How many activities are in each AP Writing Practice pack?',\n answer: (\n \n
Each AP recommended pack* contains between 4 and 7 activities, each of which are designed to take between 10 and 15 minutes each.
\n
*Please note that the activities in the AP Writing - Advanced Combining pack are different as they are all uncued, meaning the feedback does not direct students to combine in a particular way. These are great for students who are ready to apply the strategies covered in the survey without suggestions or direction.
\n
\n
The focus in most of these activities is to build the target skill of the pack (appositives, relative clauses, etc.), so the vocabulary and reading level are intentionally designed to be accessible by all students.
\n
Teacher Tip: You can preview and play through any pack and its activities to get a sense of whether it's appropriate for your students.
\n
Quill has a variety of reports to help you track your students' performance and progress. In the Activity Summary report , you can quickly see which activities your students have completed, along with color-coded icons indicating their proficiency with each activity. Quill has several other reports as well. This Cheat Sheet shows you which report to go to for particular information, and this video will walk you through interpreting and utilizing three of Quill's student data reports.
\n },\n {\n question: 'How many AP Writing Practice packs should I assign to my students and how long will it take them to complete a pack?',\n answer: (\n \n
You can assign all the recommended packs in one click, or you can pick and choose, revisiting the recommendations report to assign more packs as needed.
\n
As Quill was designed to be a supplementary tool with each activity taking approximately 10-15 minutes, students are ideally completing an activity at least 1-2 times per week (at most completing one activity per day). Since each AP recommended pack contains between 4 and 7 activities, teachers generally expect a recommended pack to be completed in 1-2 weeks. Of course, students may need more or less time depending on the amount of activities in the pack, their level of difficulty, and students' level of proficiency.
\n
This article explains how you can use deadlines to help students pace themselves.
\n
The activities in the AP Writing Practice packs are curated from existing Quill activities. While your students may encounter an activity they have already completed, the AP Writing Practice packs have been customized to target the skills students need to write successfully at the AP level. Given the quantity and variety of activities available on Quill, chances are that the AP Writing Practice packs will include plenty of new activities, even for students who have been using Quill for a while.
\n },\n {\n question: 'Can I assign my students practice beyond the recommended AP Writing Practice packs?',\n answer: Yes! Quill offers 5 different tools with more than 700 writing, grammar, and proofreading activities designed to engage students in the writing process. This article will show you how to explore and assign Quill’s featured activity packs, and this article will show you how to create a custom activity pack.
\n },\n {\n question: 'Do I need to create an account on Quill.org to assign the AP Writing Skills Survey?',\n answer: (\n \n
It is recommended that you and your students create free accounts on Quill.org. Creating an account will give you access to the Survey and its recommended practice. Creating an account also allows you to track your students’ progress and view data reports. You can create an account by visiting the Quill sign-up page .
\n
If you do not want to create an account, you or your students can complete the Survey here . However, please note that if you do not create an account, your students’ performance on the Survey will not be saved or shared with you, and you will not have access to the recommended skills practice. You will also not be able to track student progress or view data reports.
\n
\n
We are here for you! The following resources are available:
\n
Quill Instructional Coach: You can reach out to us atpd@quill.org . Be sure to mention the course(s) you teach.
\n
Teacher Center:
\n
Support: Having a technical issue? Email support@quill.org or use the chat in the lower right corner of Quill to connect with a member of the Quill support team.
\n
AP® is a registered trademark of the College Board.
\n
Lessons are intended to take about 20-30 minutes to complete . The length of time depends on how long you choose to spend discussing each answer. While in most cases five minutes is enough, teachers may want to facilitate a longer conversation.
,\n To end a lesson early, press the “Start Practice Mode” button or “End Session” button in the toolbar at any time. To continue a lesson with a selected group of students, you can assign other students to start independent practice while keeping the lesson open for your group.
,\n If you need to abbreviate your time on Quill, you can complete a lesson at any point, and wait to assign the follow up activity until another time.
\n ]\n },\n {\n question: 'How can I support both struggling students and advanced learners in lessons mode?',\n answer: You can also use the flagging features to privately select students for extra support. If a student’s response requires intervention, you can click on the flag next to their answer, and they will show up in a list for you at the end of the lesson. At this point all other students can begin the independent practice while you work with a small group.
\n },\n {\n question: 'Can I skip slides?',\n answer: [Yes, the slides and the step-by-step guide are a starting point to introduce these concepts to your learners. You can customize the lessons for your learners by editing all of the prompts and questions. Within each lesson, you can also skip slides by selecting a new slide from the preview section.
,\n Coming soon: You will soon be able to create your own Lessons using the Quill interface! Keep an eye out for updates about this release.
\n ]\n },\n {\n question: 'How do I project a Quill Lesson?',\n answer: [After you have launched a lesson, click on the “Launch Projector” icon in the navigation bar at the top. This will open a new window with student facing slides only. In order to ensure that the projector does NOT mirror your screen or show students the teacher notes:
,\n For PC:
,\n \n Go to Control Panel or right-click on your desktop. \n Choose Display Settings. \n In the Multiple Display dropdown, select Extend Desktop to This Display. \n ,\n For Mac:
,\n \n Go to System Preferences. \n Go to Displays. \n Next, select the Arrangement tab. \n Uncheck Mirror Displays. \n ,\n Once you have unmirrored your screen from the projector, you can move the student slide window to the projector so the class could see it. You will be able to control what the students see and the projector slide from your teacher view.
\n ]\n },\n {\n question: 'How can I draw & write on a Quill Lesson using my SMARTboard?',\n answer: We know that every interactive projector works in different ways. If your setup does not support writing in a browser, you can download the chrome extension Web Paint , and use that to interact with a Quill lesson.
\n },\n {\n question: 'How many answers should I display at a time?',\n answer: We suggest that you project 2-3 student responses to allow for discussion. More than four responses might not all fit on the screen, and will require scrolling on the part of the students. If you want to discuss more than four answers, try projecting 2-3 options to start. Then deselect those answers and choose another set to continue the conversation.
\n }\n]\n\nexport default lessons\n","import React from 'react'\n\nconst preap = () => [\n {\n question: 'What is Quill.org?',\n answer: Quill is a writing tool that provides over 600 writing, grammar, and proofreading activities designed to engage students in the writing process. Quill provides practice in many areas of sentence writing, from comma placement and subject-verb agreement to the use of conjunctions to convey complex relationships between ideas. In the Quill Connect tool, students practice writing different types of sentences using the evidence-based strategy of sentence combining. Students receive specific, targeted feedback on their writing that they can use to revise their work. Through these activities, students practice writing a variety of sophisticated sentences and practice conveying complex ideas in clear, succinct, and grammatically strong ways. Most activities are designed to be completed in 10-15 minutes so that you have the freedom to use them in the way that works best for your classroom.
\n },\n {\n question: 'How is Quill.org used in Pre-AP English 1?',\n answer: (\n \n
As part of the customized Pre-AP + Quill Offering for English 1, there are two distinct skills surveys. Pre-AP Skills Survey 1 addresses the basics of sentence patterns, while Pre-AP Skills Survey 2 engages with tools for sentence expansion. The skills featured as part of each survey are derived directly from the elements of grammar called out by the Pre-AP English High School Course Framework.
\n
You can use these skills surveys during the course to assess your students’ needs and to generate a sequence of recommended activities that provides targeted writing practice on the skills addressed instructionally in the Learning Cycles. In each of these recommended practice activities, students receive immediate feedback on their writing that they can use to revise their responses up to five times. Through these rounds of feedback and revision, students practice key writing skills.
\n
In addition to the skills surveys and recommended practice activities, there are also sentence combining activities aligned to texts that are part of each unit’s instructional materials. These activities provide additional opportunities for students to practice their writing in context, combining sentences with a variety of skills and approaches that explore key ideas and themes from these texts.
\n
In addition to the previously mentioned tools and resources, you will also see direct links to Quill.org activities throughout English 1 lessons where specific grammar skills are addressed. The links will take students to independent practice activities that align with the writing goals of that particular lesson.
\n
\n
As part of the customized Pre-AP + Quill Offering for English 2, there are two distinct skills surveys. Pre-AP Skills Survey 1 addresses the basics of sentence patterns, while Pre-AP Skills Survey 2 engages with tools for sentence expansion. The skills featured as part of each survey are derived directly from the elements of grammar called out by the Pre-AP English High School Course Framework.
\n
You can use these skills surveys during the course to assess your students’ needs and to generate a sequence of recommended activities that provides targeted writing practice on the skills addressed instructionally in the Learning Cycles. In each of these recommended practice activities, students receive immediate feedback on their writing that they can use to revise their responses up to five times. Through these rounds of feedback and revision, students practice key writing skills.
\n
At this time, there are no sentence combining activities aligned to texts that are part of each unit’s instructional materials in Pre-AP English 2.
\n
\n
It is recommended that you and your students create free accounts on Quill.org. Creating an account will give you access to the two skills surveys and recommended practice; creating an account also allows you to track your students’ progress and view data reports. You can create an account by visiting the Quill sign-up page .
\n
If you do not want to create an account, the links provided throughout the English 1 lessons will allow you and your students to complete activities on Quill without Quill accounts.
\n
Please note that if you do not create an account, you will not be able to use the skills surveys, access the recommended skills practice, track student progress, or view data reports.
\n
Quill's writing skills surveys can be used in lieu of Quill's general diagnostics. For example, an AP teacher would likely assign the AP Writing Skills Survey in lieu of the Advanced Diagnostic. Keep in mind, however, that teachers may want ELL students in Pre-AP, AP, or SpringBoard courses to begin with one of the ELL Diagnostics instead of a writing skills survey. This article explains the differences between Quill’s various diagnostics and surveys in more depth .
\n },\n {\n question: 'How many activities are in each Pre-AP Writing Practice pack?',\n answer: Each Pre-AP recommended pack contains between 4 and 7 activities, each of which are designed to take between 10 and 15 minutes each. There are also additional practice packs for students who finish the Pre-AP recommended packs: same skills, new content. Learn how to find and assign those here.
\n },\n {\n question: 'How many Pre-AP Writing Practice packs should I assign to my students and how long will it take them to complete a pack?',\n answer: (\n \n
You can assign all the recommended packs in one click, or you can pick and choose, revisiting the recommendations report to assign more packs as needed.
\n
In general, we've found that students make progress when they are completing 2-4 activities on Quill per week. Since each Pre-AP recommended pack contains between 4 and 7 activities, teachers generally expect a recommended pack to be completed in 1-2 weeks. Of course, students may need more or less time depending on the amount of activities in the pack, their level of difficulty, and students' level of proficiency.
\n
This article explains how you can use deadlines to help students pace themselves.
\n
Quill has a variety of reports to help you track your students' performance and progress. In the Activity Summary report , you can quickly see which activities your students have completed, along with color-coded icons indicating proficiency. Quill has several other reports as well. This cheat sheet shows you which report to go to for particular information, and this video will walk you through 3 of Quill's student data reports .
\n },\n {\n question: 'What tools does Quill.org offer?',\n answer: (\n \n
If you create a free account on Quill.org, you will be able to assign additional activities from any of Quill’s 5 tools:
\n
\n \n Quill Connect
\n Students combine multiple ideas into a single sentence using the evidence-based strategy of sentence combining. Students receive instant feedback. *Note*: All activities recommended based on survey results are in Quill Connect.
\n \n \n Quill Grammar
\n Students practice basic grammar skills, from using correct capitalization to correcting commonly confused words.
\n \n \n Quill Proofreader
\n Students practice editing skills by correcting errors in passages. Students receive personalized follow-up activities based on their results.
\n \n \n Quill Lessons
\n Teachers lead whole-class writing instruction. Teachers control interactive slides that contain a mini-lesson and guided practice. Teachers can model writing strategies in real-time, present prompts to which students can respond, and then anonymously display student responses for discussion. Each Quill Lessons activity provides a lesson plan, writing prompts, discussion topics, and a follow-up independent practice activity. Teachers can also customize any lesson.
\n \n \n Quill Diagnostic
\n Students complete an activity designed to help teachers determine which skills students need to work on. After students complete a Quill Diagnostic activity, Quill recommends writing activities for students based on their results. Note : The writing skills surveys can be used in lieu of general Quill diagnostics.
\n \n \n
Unfortunately, at this time, there are no sentence combining activities aligned to texts in Pre-AP courses other than English I. If you would like to see activities like these for another course, please us know here !
\n },\n {\n question: 'What if I still have questions?',\n answer: (\n \n
We are here for you! The following resources are available:
\n
Quill Instructional Coach: You can reach out to us atpd@quill.org . Be sure to mention the course(s) you teach.
\n
Teacher Center:
\n
Support: Having a technical issue? Email support@quill.org or use the chat in the lower right corner of Quill to connect with a member of the Quill support team.
\n
All of our apps and all of our activities will always remain free, forever. Teachers see their students' results in the scorebook, and teachers may hover over the activity result to see the details.
\n },\n {\n question: 'What do I get with a premium membership?',\n answer: With Quill Premium, teachers can access Quill Progress Reports, which allow teachers to easily view and download their data. Quill Progress Reports show teachers how students are progressing on the Common Core and which concepts they need help with. With Quill Premium for Schools, teachers and administrators can access a school-wide dashboard that shows student progress and standards mastered across the entire school.
\n },\n {\n question: 'How does payment work on a premium membership?',\n answer: Quill Premium is provided on an annual license based on the school year. You may pay via credit card or check. Credit cards will be billed annually for Teacher and School Premium. If you pay with a check, Quill will issue an invoice to renew your subscription.
\n },\n {\n question: 'How much does premium cost?',\n answer: Quill Premium is provided as a teacher license, school license, or district license. The teacher license covers all of the students for one teacher and costs $80 per year. The school license is a site-wide license that covers all teachers and students in the school. For districts, we provide custom pricing, on-site training, and district dashboards. Contact us to receive a demo.
\n },\n {\n question: 'Do you accept purchase orders?',\n answer: Yes, we accept purchase orders. You may email a purchase order to sales@quill.org . Access our W-9 and reach out with any questions at 510-671-0222.
\n },\n {\n question: 'Do you offer financial aid?',\n answer: Yes, we provide Quill Premium for free to schools that have a demonstrated financial need. This funding is provided to select partners thanks to the support of our funders. Apply for financial aid.
\n },\n {\n question: 'Have more questions?',\n answer: You can call us at 510-671-0222 or visit our Support Center.
\n }\n]\n\nexport default premium\n","import React from 'react'\n\nconst springboard = () => [\n {\n question: 'What is Quill.org?',\n answer: (\n \n
Quill is a writing tool that provides over 600 writing, grammar, and proofreading activities designed to engage students in the writing process. Quill provides practice in many areas of sentence writing, from comma placement and subject-verb agreement to the use of conjunctions to convey complex relationships between ideas. In the Quill Connect tool, students practice writing different types of sentences using the evidence-based strategy of sentence combining. Students receive specific, targeted feedback on their writing that they can use to revise their work. Through these activities, students practice writing a variety of sophisticated sentences and practice conveying complex ideas in clear, succinct, and grammatically strong ways. Most activities are designed to be completed in 10-15 minutes so that you have the freedom to use them in the way that works best for your classroom.
\n
As part of the customized offering for SpringBoard, there are a variety of writing skills surveys to be used, depending on the context of your classes and students. The skills featured as part of each survey are derived directly from the elements of grammar called out by course texts and frameworks.
\n
You can use these skills surveys during the course to assess your students’ needs and to generate a sequence of recommended activities that provides targeted writing practice on the skills addressed instructionally. In each of these recommended practice activities, students receive immediate feedback on their writing that they can use to revise their responses up to five times. Through these rounds of feedback and revision, students practice key writing skills.
\n
In addition to the skills surveys and recommended practice activities, there are also sentence combining activities aligned to texts that appear in the instructional materials of both the Pre-AP English I course Grade 9 SpringBoard English Language Arts: English I. These activities provide additional opportunities for students to practice their writing in context, combining sentences with a variety of skills and approaches that explore key ideas and themes from these texts.
\n
\n
Teachers generally begin by having students complete a writing skills survey during class time. The practice that is recommended once students complete a survey can be completed by students independently and at their own pace, or can also be completed during class time. Some teachers ask students to complete recommended activities during a “Do Now,” during another portion of class time, or as homework. Since SpringBoard’s Language and Writer’s Craft elements of activities feature focused practice on specific grammatical skills, you may also find that there are Quill Lessons (Quill’s whole-class instructional tool) that can support your instruction.
\n
Of course, this customized offering for SpringBoard has been designed to empower you to make the best decisions for your classroom and your students. Knowledge of your students’ needs will assist you in making appropriate decisions.
\n
\n
It is recommended that you and your students create free accounts on Quill.org. Creating an account will give you access to the two skills surveys and recommended practice; creating an account also allows you to track your students’ progress and view data reports. You can create an account by visiting the Quill sign-up page .
\n
Please note that if you do not create an account, you will not be able to use the skills surveys, access the recommended skills practice, track student progress, or view data reports.
\n
Quill's writing skills surveys can be used in lieu of Quill's general diagnostics. For example, a 7th grade SpringBoard ELA teacher would likely assign the SpringBoard Writing Skills Survey in lieu of the Starter or Intermediate Diagnostic. Keep in mind, however, that teachers may want ELL students in Pre-AP, AP, or SpringBoard classes to begin with one of the ELL Diagnostics instead of a writing skills survey. This article explains the differences between Quill’s various diagnostics and surveys in more depth .
\n },\n {\n question: 'How many activities are in a skills survey recommended pack?',\n answer: Most recommended packs contain between 4 and 7 activities, each of which are designed to take between 10 and 15 minutes.
\n },\n {\n question: 'How many recommended packs should I assign to my students and how long will it take them to complete a pack?',\n answer: (\n \n
You can assign all the recommended packs in one click, or you can pick and choose, revisiting the recommendations report to assign more packs as needed.
\n
In general, we've found that students make progress when they are completing 2-4 activities on Quill per week. Since each recommended pack contains between 4 and 7 activities, teachers generally expect a recommended pack to be completed in 1-2 weeks. Of course, students may need more or less time depending on the amount of activities in the pack, their level of difficulty, and students' level of proficiency.
\n
This article explains how you can use deadlines to help students pace themselves .
\n
Quill has a variety of reports to help you track your students' performance and progress. In the Activity Summary report , you can quickly see which activities your students have completed, along with color-coded icons indicating proficiency. Quill has several other reports as well. This cheat sheet shows you which report to go to for particular information, and this video will walk you through 3 of Quill's student data reports .
\n },\n {\n question: 'What tools does Quill.org offer?',\n answer: (\n \n
If you create a free account on Quill.org, you will be able to assign additional activities from any of Quill’s 5 tools:
\n
\n \n Quill Connect
\n Students combine multiple ideas into a single sentence using the evidence-based strategy of sentence combining. Students receive instant feedback. *Note*: All activities recommended based on survey results are in Quill Connect.
\n \n \n Quill Grammar
\n Students practice basic grammar skills, from using correct capitalization to correcting commonly confused words.
\n \n \n Quill Proofreader
\n Students practice editing skills by correcting errors in passages. Students receive personalized follow-up activities based on their results.
\n \n \n Quill Lessons
\n Teachers lead whole-class writing instruction. Teachers control interactive slides that contain a mini-lesson and guided practice. Teachers can model writing strategies in real-time, present prompts to which students can respond, and then anonymously display student responses for discussion. Each Quill Lessons activity provides a lesson plan, writing prompts, discussion topics, and a follow-up independent practice activity. Teachers can also customize any lesson.
\n \n \n Quill Diagnostic
\n Students complete an activity designed to help teachers determine which skills students need to work on. After students complete a Quill Diagnostic activity, Quill recommends writing activities for students based on their results. Note : The writing skills surveys can be used in lieu of general Quill diagnostics.
\n \n \n
Unfortunately, at this time, there are no sentence combining activities aligned to texts in SpringBoard ELA courses other than SpringBoard ELA Grade 9. If you would like to see activities like these for another course, please us know here !
\n },\n {\n question: 'What if I still have questions?',\n answer: (\n \n
We are here for you! The following resources are available:
\n
Quill Instructional Coach: You can reach out to us atpd@quill.org . Be sure to mention the course(s) you teach.
\n
Teacher Center:
\n
Support: Having a technical issue? Email support@quill.org or use the chat in the lower right corner of Quill to connect with a member of the Quill support team.
\n
AP® is a registered trademark of the College Board.
\n
\n
Quill Reading for Evidence is our newest learning tool—and our first tool that supports students in building both language and reading skills. Each Reading for Evidence activity provides a high-interest, nonfiction text for students to read, and then engages them in expressing their understanding of that text through open-ended writing prompts.
\n
Students are asked to write about a key idea from the text using the connectives because , but , and so . As students write and revise, Quill's artificial intelligence (AI) Feedback Bot coaches them to improve the accuracy and specificity of their evidence, refine their logic and syntax, and correct any grammatical errors. Like in Quill Connect, students can make up to 4 revisions for each prompt. Designed for students in grades 8-12, these activities take about 15-20 minutes for students to complete.
\n
\n
Over the last few years, we've watched as more and more digital tools enter classrooms that intend to improve students' reading and writing. We've been struck by the fact that virtually all of them assess student learning the same way: through multiple-choice questions. Many members of the Quill team are former teachers; we've seen firsthand what many students do with multiple-choice questions: they scan the text for the “right answer,” and move on as soon as they find it, or worse, they copy the answers from a friend or a quick Google search. We wanted to create a digital reading tool that would go beyond multiple-choice—to provide a rich learning experience, and not only an assessment of learning.
\n
We began with a writing strategy in which students are asked to use the connectives because , but , and so to expand a provided sentence stem. In the paper-based version of this activity, a social studies teacher, for example, might give students the stem: “The British government wanted to vaccinate the public against smallpox…” A strong set of sentences in response might be:
\n
\n The British government wanted to vaccinate the public against smallpox because smallpox was responsible for the deaths of thousands of people in England every year . \n The British government wanted to vaccinate the public against smallpox, but some citizens believed that it was a violation of their medical freedom . \n The British government wanted to vaccinate the public against smallpox, so the British government made these laws mandatory . \n \n
This activity accomplishes so much simultaneously. Students have to read—and have to understand what they read—to complete the stems. Instead of selecting A, B, C, or D, they have to think through complex logical relationships: cause-effect and claim-counterclaim.
\n
What's more, even with the wide variety of sentences they might write, students will get precise, targeted feedback. Quill's AI Feedback Bot can show students where to reread, suggest information to include in their response, or show them an exemplar to follow. Each activity's feedback is highly specific to the activity's text. In the end, each student completing a Reading for Evidence activity gets their own private coach.
\n
How is this possible? Quill's curriculum developers write custom feedback for each Reading for Evidence text and writing prompt, so when a student submits a response, Quill's AI Feedback Bot compares the student's response to categories the team has created. The Bot determines which category the response falls into, and serves the appropriate feedback. Creating these activities is time- and labor-intensive, but being able to provide this rich reading and writing experience for students makes it well worth the effort.
\n
\n
You may want to share the following with students before they complete a Reading for Evidence activity:
\n
\n What kind of writing will Quill's AI Feedback Bot encourage and discourage? \n These activities are all about specificity and accuracy. This means the Bot may ask for more detail if your response is accurate, but short. \n If you write a response that is accurate but not based on evidence from the text, the Bot will ask you to revise using evidence from the text. Likewise, you will be discouraged from using direct quotations—the Bot will prompt you to put ideas into your own words. \n The Bot will also discourage you from drawing your own conclusions, sharing an opinion, or giving a recommendation. (Of course, your teacher may want you to do this outside of these activities! But in Reading for Evidence, it's all about what's in the text.) \n \n Sometimes Quill's AI Feedback Bot will give the wrong feedback. Try your best to use the feedback you've been given, and let Quill know when you've received unhelpful feedback (just click the “Report a Problem” button under that piece of feedback). You can also share general feedback on the tool through the optional emoji survey at the end of every activity. \n
For more on introducing Reading for Evidence to students, check out this article .
\n
\n
The following are our recommendations for teachers using Reading for Evidence with students:
\n
\n Introduce students to Quill and the Reading for Evidence tool. Frame the work they are about to do. Explaining the function of the connectives because , but , and so and providing examples can be particularly helpful.Walk students through the student onboarding section of a Reading for Evidence activity. These pages emphasize three takeaways: all writers revise; feedback may not always be correct; their teacher can see their responses and score.Model application of Reading for Evidence's feedback. This helps students develop the skill of applying feedback. This is also a great place to explain what Reading for Evidence is looking for.Align Reading for Evidence activities to your curriculum. Whenever possible, help students connect the content in Reading for Evidence activities to content they've studied in your class.Invite students to reflect on their thinking, writing, and learning in the tool. Have students use because , but , and so to extend their responses about content in class. \n
Read more about getting started using Reading for Evidence with your students in this article .
\n
\n
This first iteration of the Reading for Evidence tool is most appropriate for general education students in grades 8-12. However, the tool can provide valuable practice for students who don't fall into this category. Here are some ways you can support students who may need additional scaffolds:
\n
\n Introduce the main idea of the text and front-load vocabulary. For example, images/illustrations, videos, magazine/newspaper articles, realia, etc. can be used to help students access an activity text and activate relevant schema. Use browser extensions to provide read aloud and language support. Over the next several months and years, we will embed more scaffolds within the tool. For example, students will be able to hover over challenging vocabulary to see a student-friendly definition, etc. However, in the meantime, Reading for Evidence integrates with a variety of extensions that can provide important support. Model how to find evidence and how to incorporate feedback. There is so much metacognition at work when completing these activities. Pulling back the curtain on that for students can be powerful— and empowering! \n
This Teacher Center article expands on the tips above and links to extensions that integrate with Reading for Evidence.
\n
\n
Quill Reading for Evidence is our newest learning tool—and our first tool that supports students in building both language and reading skills. Each Reading for Evidence activity provides a high-interest, nonfiction text for students to read, and then engages them in expressing their understanding of that text through open-ended writing prompts.
\n
Students are asked to write about a key idea from the text using the connectives because , but , and so . As students write and revise, Quill's artificial intelligence (AI) Feedback Bot coaches them to improve the accuracy and specificity of their evidence, refine their logic and syntax, and correct any grammatical errors. Like in Quill Connect, students can make up to 4 revisions for each prompt. Designed for students in grades 8-12, these activities take about 15-20 minutes for students to complete.
\n
\n
Over the last few years, we've watched as more and more digital tools enter classrooms that intend to improve students' reading and writing. We've been struck by the fact that virtually all of them assess student learning the same way: through multiple-choice questions. Many members of the Quill team are former teachers; we've seen firsthand what many students do with multiple-choice questions: they scan the text for the “right answer,” and move on as soon as they find it, or worse, they copy the answers from a friend or a quick Google search. We wanted to create a digital reading tool that would go beyond multiple-choice—to provide a rich learning experience, and not only an assessment of learning.
\n
We began with a writing strategy in which students are asked to use the connectives because , but , and so to expand a provided sentence stem. In the paper-based version of this activity, an ELA or Science teacher, for example, might give students the stem: “The sounds of a coral reef can help scientists monitor its health…” A strong set of sentences in response might be:
\n
\n The sounds of a coral reef can help scientists monitor its health because healthy reefs are noisy, while unhealthy reefs are quieter . \n The sounds of a coral reef can help scientists monitor its health, but reviewing coral reef recordings can be a slow and difficult task . \n The sounds of a coral reef can help scientists monitor its health, so some scientists are using machine learning to analyze audio recordings more efficiently . \n \n
This activity accomplishes so much simultaneously. Students have to read—and have to understand what they read—to complete the stems. Instead of selecting A, B, C, or D, they have to think through complex logical relationships: cause-effect and claim-counterclaim.
\n
What's more, even with the wide variety of sentences they might write, students will get precise, targeted feedback. Quill's AI Feedback Bot can show students where to reread, suggest information to include in their response, or show them an exemplar to follow. Each activity's feedback is highly specific to the activity's text. In the end, each student completing a Reading for Evidence activity gets their own private coach.
\n
How is this possible? Quill's curriculum developers write custom feedback for each Reading for Evidence text and writing prompt, so when a student submits a response, Quill's AI Feedback Bot compares the student's response to categories the team has created. The Bot determines which category the response falls into, and serves the appropriate feedback. Creating these activities is time- and labor-intensive, but being able to provide this rich reading and writing experience for students makes it well worth the effort.
\n
\n
You may want to share the following with students before they complete a Reading for Evidence activity:
\n
\n Sometimes Quill's AI Feedback Bot will give the wrong feedback. Try your best to use the feedback you've been given, and let Quill know when you've received unhelpful feedback (just click the “Report a Problem” button under that piece of feedback). You can also share general feedback on the tool through the optional emoji survey at the end of every activity. What kind of writing will Quill's AI Feedback Bot encourage and discourage? \n These activities are all about specificity and accuracy. This means the Bot may ask for more detail if your response is accurate, but short. \n If you write a response that is accurate but not based on evidence from the text, the Bot will ask you to revise using evidence from the text. Likewise, you will be discouraged from using direct quotations—the Bot will prompt you to put ideas into your own words. \n The Bot will also discourage you from drawing your own conclusions, sharing an opinion, or giving a recommendation. (Of course, your teacher may want you to do this outside of these activities! But in Reading for Evidence, it's all about what's in the text.) \n \n \n
For more on introducing Reading for Evidence to students, check out this article .
\n
\n
The following are our recommendations for teachers using Reading for Evidence with students:
\n
\n Introduce students to Quill and the Reading for Evidence tool. Frame the work they are about to do. Explaining the function of the connectives because , but , and so and providing examples can be particularly helpful.Walk students through the student onboarding section of a Reading for Evidence activity. These pages emphasize three takeaways: all writers revise; feedback may not always be correct; their teacher can see their responses and score.Model application of Reading for Evidence's feedback. This helps students develop the skill of applying feedback. This is also a great place to explain what Reading for Evidence is looking for.Align Reading for Evidence activities to your curriculum. Whenever possible, help students connect the content in Reading for Evidence activities to content they've studied in your class.Invite students to reflect on their thinking, writing, and learning in the tool. Have students use because , but , and so to extend their responses about content in class. \n
Read more about getting started using Reading for Evidence with your students in this article .
\n
\n
This first iteration of the Reading for Evidence tool is most appropriate for general education students in grades 8-12. However, the tool can provide valuable practice for students who don't fall into this category. Here are some ways you can support students who may need additional scaffolds:
\n
\n Introduce the main idea of the text and front-load vocabulary. For example, images/illustrations, videos, magazine/newspaper articles, realia, etc. can be used to help students access an activity text and activate relevant schema. Use browser extensions to provide read aloud and language support. Over the next several months and years, we will embed more scaffolds within the tool. For example, students will be able to hover over challenging vocabulary to see a student-friendly definition, etc. However, in the meantime, Reading for Evidence integrates with a variety of extensions that can provide important support. Model how to find evidence and how to incorporate feedback. There is so much metacognition at work when completing these activities. Pulling back the curtain on that for students can be powerful— and empowering! \n
This Teacher Center article expands on the tips above and links to extensions that integrate with Reading for Evidence.
\n
{answer}
\n }\n }\n\n expandOrCollapseButton() {\n const { questionsAndAnswersFile } = this.props\n const { expanded } = this.state\n const files = ['premium', 'preap', 'ap', 'springboard', 'socialStudies'];\n const buttonClass = questionsAndAnswersFile === 'lessons' ? 'focus-on-dark' : 'focus-on-light';\n let innerElement;\n\n if (files.includes(questionsAndAnswersFile)) {\n const imageLink = expanded ? 'collapse.svg' : 'expand.svg'\n innerElement = Collapse
: Expand
\n }\n return {innerElement} \n }\n\n handleKeyPress = (e) => {\n e.preventDefault();\n const { key } = e;\n if(key === 'Enter') {\n this.handleToggleExpansion();\n }\n }\n\n handleToggleExpansion = () => {\n this.setState(prevState => ({ expanded: !prevState.expanded }));\n };\n\n render() {\n const { qa } = this.props;\n const { question } = qa;\n return (\n \n
\n {question} \n {this.answer()}\n
\n
\n {this.expandOrCollapseButton()}\n
\n
{\n constructor(props: QuestionsAndAnswersProps) {\n super(props)\n\n let questionsAndAnswers;\n switch (props.questionsAndAnswersFile) {\n case 'admin':\n questionsAndAnswers = admin\n break\n case LESSONS:\n questionsAndAnswers = lessons\n break\n case 'premium':\n questionsAndAnswers = premium\n break\n case PRE_AP:\n questionsAndAnswers = preap\n break\n case AP:\n questionsAndAnswers = ap\n break\n case SPRINGBOARD:\n questionsAndAnswers = springboard\n break\n case 'socialStudies':\n questionsAndAnswers = socialStudies\n break\n case 'interdisciplinaryScience':\n questionsAndAnswers = interdisciplinaryScience\n break\n default:\n questionsAndAnswers = []\n break\n }\n\n this.state = {\n questionsAndAnswers: questionsAndAnswers()\n }\n }\n\n renderQuestionsAndAnswers() {\n const { questionsAndAnswersFile } = this.props;\n const { questionsAndAnswers } = this.state;\n return questionsAndAnswers.map((qa, i) => Get started ;\n}\n\nexport const handleSetActiveSection = (section: string, setActiveSection: Function) => {\n setActiveSection(section);\n}\n","import * as React from 'react'\n\nexport function scrollToTop() {\n React.useEffect(() => {\n window.scrollTo(0, 0)\n }, [])\n}\n","import * as React from 'react';\n\nimport QuestionsAndAnswers from '../../containers/QuestionsAndAnswers';\nimport { generateLink, getStartedButton } from '../../helpers/collegeBoard';\nimport { scrollToTop } from '../../hooks/scrollToTop';\nimport {\n AP_SLUG,\n AP_WRITINGS_SKILLS_UNIT_TEMPLATE_ID,\n ELL_ADVANCED_DIAGNOSTIC_UNIT_TEMPLATE_ID,\n ELL_INTERMEDIATE_DIAGNOSTIC_UNIT_TEMPLATE_ID,\n ELL_STARTER_DIAGNOSTIC_UNIT_TEMPLATE_ID,\n} from '../assignment_flow/assignmentFlowConstants';\n\ninterface ApContainerProps {\n isPartOfAssignmentFlow?: boolean;\n}\n\nconst Ap = ({ isPartOfAssignmentFlow, }: ApContainerProps) => {\n\n isPartOfAssignmentFlow && scrollToTop();\n\n return (\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Official AP Writing Practice \n
Free AP® writing practice with comprehensive progress reports for you and immediate feedback for students that guides them towards mastery of sentence-level skills.
\n {getStartedButton(isPartOfAssignmentFlow)}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Sentence-Level Writing Practice \n
Identify which sentence-level skills your students need to practice with a skills survey. Then, assign activities recommended for each student based on their responses so they can practice and improve their proficiency with those skills.
\n
\n
\n
\n
AP Writing Skills Survey \n \n
\n
\n
AP Writing Skills Survey
\n
View \n
\n
\n
Students complete a 17 item survey to gauge their understanding of key writing skills that are essential to successful AP- and SAT-level writing. After students complete the survey, Quill will automatically recommend up to seven activity packs for each student based on their needs. Each pack contains a series of activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice with one of the skills covered by the survey.
\n
Skills
\n
Complex Sentences; relative clauses; appositive phrases; participial phrases; parallel structure; compound-complex sentences; advanced combining
\n
\n
\n \n
\n
\n
ELL Starter Skills Survey
\n
View \n
\n
\n
ELL students complete a 22 item survey to gauge their mastery of foundational English grammar. This survey is most appropriate for students who are in the Entering or Emerging WIDA levels . After students complete the survey, Quill will automatically recommend up to five activity packs for each student based on their needs. Each pack contains a series of activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice with one of the skills covered by the survey.
\n
Skills
\n
Simple verb conjugation; articles; simple subject-verb agreement; simple word order; singular and plural nouns; adjective placement
\n
\n
\n
\n
\n
ELL Intermediate Skills Survey
\n
View \n
\n
\n
ELL students complete a 23 item survey to gauge their mastery of English grammar. This survey is most appropriate for students who are in the Emerging or Developing WIDA levels . After students complete the survey, Quill will automatically recommend up to six activity packs for each student based on their needs. Each pack contains a series of activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice with one of the skills covered by the survey.
\n
Skills
\n
Subject-verb agreement; singular possessive nouns; possessive pronouns; prepositions; future tense; articles; intermediate questions
\n
\n
\n
\n
\n
ELL Advanced Skills Survey
\n
View \n
\n
\n
ELL students complete a 23 item survey to gauge their mastery of English grammar, specifically in areas that are challenging for non-native English speakers. This survey is most appropriate for students who are in the Developing or Expanding WIDA levels . After students complete the survey, Quill will automatically recommend up to five activity packs for each student based on their needs. Each pack contains a series of activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice with one of the skills covered by the survey.
\n
Skills
\n
Regular and irregular past tense; progressive tenses; phrasal verbs; choosing between prepositions; responding to questions; commonly confused words
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Personalized Recommendations
\n
After students complete the AP Writing Skills Survey, you'll receive recommendations for each student based on their responses and tailored to their individual needs. Each student will be recommended up to 45 sentence combining activities, grouped by concept into seven packs, that provide meaningful, targeted practice. You can assign all the activities with one click, or you can pick and choose.
\n
\n
\n
\n
\n
Writing with Targeted Feedback
\n
Students receive immediate feedback that guides them through the revision process, pushing them to think critically about their writing and make revisions that ultimately lead to strong, sophisticated, and grammatically accurate sentences. The feedback inspires students to strengthen their sentence structure, but also supports them in editing for mechanics such as punctuation and spelling.
\n
\n
\n
\n
\n
\n
\n
Data Reports
\n
You can monitor the progress of your students and continue to identify areas of need and areas of strength through multiple data reports. Use the analysis report to review your students' work sentence-by-sentence, or use the summary report to get a high-level sense of where your students could use some extra support.
\n
\n
\n
\n
\n
\n
\n
Quill and College Board have partnered to provide students with meaningful practice of their sentence-level writing skills.
\n
\n
Message from College Board
\n
\n
\n
\n
\n
Teaching writing is hard. Even harder can be attempting to pinpoint exactly when we learned how and why to write clearly. That’s why the College Board has worked with Quill.org to ensure that this new, free, comprehensive offering helps students practice targeted sentence construction skills in their writing. Sustained practice and exposure to targeted skills is important to improvement and comfort.
\n
Teaching writing may always be hard, but student practice in meaningful skills can make the learning that much clearer. Through this practice, students can begin to own the how and why of their writing.
\n
\n
\n
\n
\n
\n
\n
\n
{\n constructor(props) {\n super(props)\n\n this.modalRef = React.createRef();\n }\n\n componentDidMount() {\n if (this.modalRef.current) {\n this.modalRef.current.focus();\n }\n }\n\n\n leave() {\n window.localStorage.removeItem(UNIT_TEMPLATE_ID)\n window.localStorage.removeItem(UNIT_TEMPLATE_NAME)\n window.localStorage.removeItem(UNIT_NAME)\n window.localStorage.removeItem(ACTIVITY_IDS_ARRAY)\n window.localStorage.removeItem(CLASSROOMS)\n window.location.href = '/'\n }\n\n render() {\n return (\n \n
\n
\n
\n
Leave without assigning? \n \n
\n
If you exit the assigning process now, you will not be able to resume your current progress. However, you can assign new content at any time.
\n
\n
\n Cancel \n Go to dashboard \n
\n
\n
/ \nconst learningProcess = () => Learning process \nconst diagnostic = () => {\n constructor(props) {\n super(props)\n\n this.state = {\n showLeavingModal: false\n }\n }\n\n toggleLeavingModal = () => {\n this.setState({ showLeavingModal: !this.state.showLeavingModal })\n }\n\n getSlug() {\n const path = location.pathname\n // will grab whatever comes after '/assign/' and before another slash\n return path.split('/')[2]\n }\n\n renderButton() {\n const { button, } = this.props\n return button ? button : null\n }\n\n renderLinks() {\n const { unitTemplateId, unitTemplateName, isFromDiagnosticPath, courseSlug, } = this.props\n let elements\n try {\n elements = routeLinks[this.getSlug()]({ unitTemplateId, unitTemplateName, isFromDiagnosticPath, courseSlug, })\n } catch {\n elements = []\n }\n return {elements}
\n }\n\n renderProgressBar() {\n const { unitTemplateId, unitTemplateName, courseSlug } = this.props\n let className\n try {\n className = routeProgress[this.getSlug()]({ unitTemplateId, unitTemplateName, courseSlug, })\n } catch {\n className = null\n }\n return \n }\n\n renderLeavingModal() {\n if (this.state.showLeavingModal) {\n return \n {this.renderLeavingModal()}\n
\n
\n
\n {this.renderLinks()}\n
\n
\n {this.renderButton()}\n
\n
\n {this.renderProgressBar()}\n
{\n\n handleClick = (e) => {\n const { selectCard, lockedText, } = this.props\n if (e.target.tagName !== 'A' && !lockedText) {\n selectCard()\n }\n }\n\n handleAnchorClick = (e) => e.stopPropagation();\n\n renderButtons = () => {\n const { buttonText, buttonLink, selectCard, lockedText, } = this.props;\n /* eslint-disable react/jsx-no-target-blank */\n const button = buttonText && buttonLink ? {buttonText} Select \n const lockedButton = \n {button}\n {lockedText ? lockedButton : selectButton}\n
\n );\n } else {\n return button;\n }\n }\n\n render() {\n const { imgSrc, imgAlt, imgClassName, showNewTag, header, bodyArray, showRecommendedToStartTag, preHeader, showNewTagInPreHeaderLine, } = this.props\n const bodyElements = bodyArray.map(obj => (\n \n
{obj.key}
\n
{obj.text}
\n
NEW \n const newTag = showNewTag ? newTagElement : null\n const newTagInPreHeaderLine = showNewTagInPreHeaderLine ? newTagElement : null\n const recommendedToStartTag = showRecommendedToStartTag ? Recommended to start : null\n const preHeaderTag = preHeader ? {preHeader} : null\n const leftClassName = showRecommendedToStartTag ? \"left include-recommended-to-start-tag\" : \"left\"\n\n return (\n \n {newTag}\n \n
\n {imgSrc &&
}\n
\n {recommendedToStartTag}\n {preHeaderTag ?
{preHeaderTag}{newTagInPreHeaderLine}
: null}\n
{header} \n
\n
\n {this.renderButtons()}\n
\n {bodyElements}\n
\n \n )\n }\n}\n","import * as React from 'react'\n\nimport ScrollToTop from '../../shared/scroll_to_top'\nimport AssignmentFlowNavigation from '../assignment_flow_navigation'\nimport AssignmentCard from './assignment_card'\n\nconst packsWholeSrc = `${window.postbuildEnv.CDN_URL}/images/illustrations/packs-whole.svg`\nconst packsIndependentSrc = `${window.postbuildEnv.CDN_URL}/images/illustrations/packs-independent.svg`\n\nconst selectCard = (history, link) => {\n history.push(link)\n}\n\nconst minis = (props) => [\n ( selectCard(props.history, `/assign/featured-activity-packs?type=independent-practice`)}\n />),\n ( selectCard(props.history, `/assign/featured-activity-packs?type=whole-class`)}\n />)\n]\n\nconst ActivityType = (props) => (\n \n
\n
\n
\n
Do you want to assign only independent practice or lead whole-class lessons? \n
{minis(props)}
\n
\n
Concept}\n tooltipTriggerTextStyle={{ maxWidth: conceptMaxWidth }}\n />\n);\n\nexport const unitTemplateDataTableFields = [\n { name: \"\", attribute:\"addActivity\", width: \"32px\", noTooltip: true },\n { name: \"Name\", attribute:\"name\", width: \"208px\", rowSectionClassName: 'tabbable-field', noTooltip: true },\n { name: \"Description\", attribute:\"description\", width: \"232px\", rowSectionClassName: 'tooltip-section description-section', noTooltip: true },\n { name: \"In packs\", attribute:\"inPacks\", width: \"232px\", rowSectionClassName: 'in-packs-section', noTooltip: true },\n { name: \"Flag\", attribute:\"flag\", width: \"80px\", noTooltip: true },\n { name: \"Readability\", attribute:\"readability\", width: \"64px\", noTooltip: true },\n { name: conceptHeaderElement, attribute:\"concept\", width: conceptMaxWidth, noTooltip: true },\n { name: \"Tool\", attribute:\"tool\", width: \"88px\", noTooltip: true },\n { name: \"\", attribute:\"edit\", width: \"88px\", rowSectionClassName: 'tabbable-field', noTooltip: true }\n];\n\nexport function displayInPacksInfo(unitTemplates) {\n return unitTemplates.map(unitTemplate => {\n const { id, name } = unitTemplate;\n return {name} ;\n });\n}\n\nexport function unitTemplateActivityRows({ activities, handleClick, type }) {\n return activities.map(activity => {\n const { id, name, flags, activity_category, classification, readability_grade_level, description, unit_templates } = activity;\n const buttonStyle = type === 'add' ? 'add-activity-button' : 'remove-activity-button'\n const buttonText = type === 'add' ? '+' : '-'\n return {\n id,\n addActivity: handleClick(activity)}>{buttonText} ,\n name: {name} ,\n description: description || NOT_APPLICABLE,\n inPacks: displayInPacksInfo(unit_templates),\n flag: flags && flags.length ? flags.join(', ') : NOT_APPLICABLE,\n readability: readability_grade_level || NOT_APPLICABLE,\n concept: activity_category && activity_category.name ? activity_category.name : NOT_APPLICABLE,\n tool: classification && classification.id ? getIconForActivityClassification(classification.id) : NOT_APPLICABLE,\n edit: classification && classification.id ? edit : NOT_APPLICABLE\n }\n });\n}\n\nexport const editActivityLink = (classificationId, activityId) => `${window.postbuildEnv.DEFAULT_URL}/cms/activity_classifications/${classificationId}/activities/${activityId}/edit`;\n\nexport const editActivityPackLink = (unitTemplateId) => `${window.postbuildEnv.DEFAULT_URL}/cms/unit_templates/${unitTemplateId}/edit`;\n\nexport const previewActivityLink = (activityId) => `${window.postbuildEnv.DEFAULT_URL}/activity_sessions/anonymous?activity_id=${activityId}`;\n\nexport const validateUnitTemplateForm = ({ activityPackFlag, activityPackName, activityPackType }) => {\n const errors = {};\n if(!activityPackFlag) {\n errors['activityPackFlag'] = 'Activity pack flag is required.'\n }\n if(!activityPackName) {\n errors['activityPackName'] = 'Activity pack name is required.'\n }\n if(!activityPackType) {\n errors['activityPackType'] = 'Activity pack type is required.'\n }\n return errors;\n}\n\nexport const renderActivityPackTooltipElement = (data) => {\n if (!data) { return }\n const { activities, } = data;\n const table = (\n \n \n \n Activity \n Tool \n Grade Level Range \n \n {activities && activities.length && activities.map((activity: Activity) => {\n const { name, readability, classification } = activity\n return(\n \n {name} \n {classification.name} \n {readability} \n \n )\n })}\n \n
\n )\n return renderToString(table)\n}\n\nexport const renderPreviouslyAssignedActivitiesTooltipElement = (data) => {\n if (!data) { return }\n\n const table = (\n \n \n \n You've previously assigned this activity in another activity pack. You can remove individual activities from a pre-created pack on the next page.
\n Tip: If you want to add individual students to a previously created Activity Pack, go to \"Manage Activities\" to add students.
\n \n \n \n \n Assigned in Other Activity Packs \n Date Assigned \n Classes \n Students \n \n {data.length && data.map((unit) => {\n const { name, assigned_date, classrooms, students, } = unit;\n return(\n \n {name} \n {moment(assigned_date).format(\"MM/DD/YY\")} \n {classrooms.map(classroom => ({classroom}
))} \n \n {students.map((student, i) => {\n const { assigned_student_count, total_student_count } = student;\n const label = total_student_count === 1 ? 'student' : 'students';\n return {`${assigned_student_count}/${total_student_count} ${label}`}
\n })}\n \n \n )\n })}\n \n
\n )\n return renderToString(table)\n}\n\nexport const DisabledDiagnosticsBanner = ({ className }) => (\n \n
We've made improvements to the diagnostics for the 2024-2025 school year.
\n
Learn more \n
\n
),\n (\n
),\n (\n
)\n ]\n}\n\nconst ellDiagnosticMinis = ({ history, assignedPreTests, }) => {\n function isLocked(postTestActivityId) {\n const assignedPreTest = assignedPreTests.find(pretest => pretest.post_test_id === postTestActivityId)\n return assignedPreTest && !assignedPreTest.assigned_classroom_ids.length\n }\n\n return [\n (\n
),\n (\n
),\n (\n
)\n ]\n}\n\nconst collegeBoardDiagnosticMinis = ({ history }) => [\n {filter} ({number}) \n}\n\nconst AssignADiagnostic = ({ history, assignedPreTests, }) => {\n const [filter, setFilter] = React.useState(ALL)\n\n const general = generalDiagnosticMinis({ history, assignedPreTests, })\n const ell = ellDiagnosticMinis({ history, assignedPreTests, })\n const collegeBoard = collegeBoardDiagnosticMinis({ history, })\n const all = [general, ell, collegeBoard].flat()\n let minis = all\n switch(filter) {\n case GENERAL:\n minis = general;\n break;\n case ELL:\n minis = ell;\n break;\n case COLLEGEBOARD:\n minis = collegeBoard;\n break;\n }\n return (\n \n
\n
\n
\n
Which diagnostic covers the skills you want to assess? \n
\n
\n
{minis}
\n
\n
\n {title} \n \n {blogPostAuthor && {`By ${blogPostAuthor}`}
}\n Read \n \n \n )\n }\n return(\n \n
\n
\n
\n Want more guidance with your implementation of Quill? Check out these articles written by Quill's instructional coaches and curriculum team.
\n \n
Show more \n
\n {renderPreviewContent(blogPost)}\n
\n
window.location.href = '/assign/diagnostic'}\n showRecommendedToStartTag={diagnosticBannerShowing}\n />),\n ( window.location.href = '/assign/activity-library'}\n />),\n ( window.location.href = '/assign/activity-type'}\n />),\n ( window.location.href = '/assign/college-board'}\n />),\n ( window.location.href = '/assign/social-studies'}\n showNewTagInPreHeaderLine={true}\n />),\n ( window.location.href = '/assign/interdisciplinary-science'}\n showNewTagInPreHeaderLine={true}\n />)\n];\n\nconst headers = [\n {\n width: '24px',\n name: 'Tool',\n attribute: 'tool',\n noTooltip: true\n }, {\n width: '394px',\n name: 'Name',\n attribute: 'name',\n }, {\n width: TOPIC_WIDTH,\n name: 'Topics',\n attribute: 'topics',\n containsOwnTooltip: true\n }, {\n width: '180px',\n name: 'Date released',\n attribute: 'dateReleased',\n }, {\n width: '60px',\n name: '',\n attribute: 'previewLink',\n noTooltip: true\n }, {\n width: '70px',\n name: '',\n attribute: 'select',\n noTooltip: true\n }\n]\n\nconst AssignANewActivity = ({ numberOfActivitiesAssigned, showDiagnosticBanner, passedSuggestedActivities }) => {\n const [diagnosticBannerShowing, setDiagnosticBannerShowing] = React.useState(showDiagnosticBanner)\n const [activitiesToSuggest, setActivitiesToSuggest] = React.useState(passedSuggestedActivities || [])\n const [showAllSuggestedActivities, setShowAllSuggestedActivities] = React.useState(false)\n\n React.useEffect(() => {\n getData()\n }, []);\n\n React.useEffect(() => {\n // remove any previously stored activityPackId used for back navigation element focus in the event that user assigned pack or navigated back to dashboard before assigning\n window.sessionStorage.removeItem(CLICKED_ACTIVITY_PACK_ID);\n }, []);\n\n const getData = () => {\n requestGet(\n `${window.postbuildEnv.DEFAULT_URL}/activities/suggested_activities`,\n (body) => {\n setActivitiesToSuggest(body.activities)\n }\n );\n }\n\n function handleClickShowAll() {\n setShowAllSuggestedActivities(true)\n }\n\n function closeDiagnosticBanner() {\n setDiagnosticBannerShowing(false)\n\n requestPost('/milestones/complete_acknowledge_diagnostic_banner')\n }\n\n let diagnosticBanner\n\n if (diagnosticBannerShowing) {\n diagnosticBanner = (\n \n
We see you're new here! Try starting with a diagnostic. \n
We recommend that when teachers start using Quill, they first assign a diagnostic to assess their students' needs. Then, we'll provide each student a personalized learning plan of recommended activities based on their performance.
\n
\n \n )\n }\n\n const activitiesToShow = showAllSuggestedActivities ? activitiesToSuggest : activitiesToSuggest.slice(0, 5)\n\n const rows = activitiesToShow.map(activity => {\n const topicsTooltipHTMLRows = activity.topics.map(topic => {\n return (\n \n {topic[0]} \n / \n {topic[1]} \n / \n {topic[2]} \n
\n )\n })\n\n const displayedTopics = activity.topics.map((topic, i) => {\n if (i === activity.topics.length - 1) {\n return {topic[2]} {topic[2]} {topicsTooltipHTMLRows}
)\n\n const topicsStyle = {\n minWidth: TOPIC_WIDTH,\n width: TOPIC_WIDTH\n }\n\n const dateReleased = {moment(activity.publication_date).format('MMMM DD, YYYY')} \n const newTag = activity.publication_date > moment().subtract(3, 'months') ? NEW : null\n\n return {\n id: activity.id,\n tool: {activity.name} ,\n topics: (\n {dateReleased}{newTag}
,\n previewLink: Preview ,\n select: Select \n }\n })\n\n const evidenceSection = activitiesToSuggest.length ? (\n \n Browse the newest Reading for Evidence activities \n Show all {activitiesToSuggest.length} Reading for Evidence activities }\n \n ) : null\n\n return (\n \n
\n \n
\n
Find the perfect writing activities for your students. \n
\n
\n You have {numberOfActivitiesAssigned} {numberOfActivitiesAssigned === 1 ? 'activity' : 'activities'} assigned. \n
\n
View assigned activities \n
\n {diagnosticBanner}\n
{minis(diagnosticBannerShowing)}
\n {evidenceSection}\n
\n
\n )\n}\n\nexport default AssignANewActivity\n","import React from 'react';\n\nimport ApContainer from '../../../containers/ApContainer';\nimport AssignmentFlowNavigation from '../assignment_flow_navigation';\n\nconst AssignAp = () => {\n return (\n \n )\n}\n\nexport default AssignAp\n","import * as React from 'react';\n\nimport { generateLink } from '../../helpers/collegeBoard';\nconst expandSrc = `https://assets.quill.org/images/icons/expand.svg`;\n\ninterface Activity {\n title: string;\n description: string;\n unit_template_id: string;\n cb_anchor_tag: string;\n}\nexport interface ExpandableUnitProps {\n title: string;\n isFirst: boolean;\n learningCycles: {\n activities: Activity[]\n }[]\n isPartOfAssignmentFlow: boolean;\n slug: string;\n tag?: JSX.Element;\n}\n\nconst ExpandableUnit = ({ title, isFirst, learningCycles, isPartOfAssignmentFlow, slug, tag, }: ExpandableUnitProps) => {\n // per CollegeBoard specs, first section will be expanded when visting the page\n const [expanded, setExpanded] = React.useState(isFirst);\n const [focusedSectionExpanded, setFocusedSectionExpanded] = React.useState(false);\n const locationHash = document.location.hash;\n\n const handleSetExpanded = () => {\n setExpanded(!expanded);\n }\n\n const renderActivities = (activities: Activity[], isLastCycle: boolean) => {\n return activities.map((activity, i) => {\n const { unit_template_id, cb_anchor_tag, description, title } = activity;\n const isLocationMatch = locationHash === `#${cb_anchor_tag}`;\n if(isLocationMatch && !focusedSectionExpanded && !isFirst) {\n setFocusedSectionExpanded(true);\n handleSetExpanded();\n }\n const lastActivity = isLastCycle && i === activities.length - 1;\n const additionalStyle = `${lastActivity ? 'last-activity' : ''} ${isLocationMatch ? 'highlighted' : ''}`\n const link = generateLink({ isPartOfAssignmentFlow, unitTemplateId: unit_template_id, slug })\n const target = isPartOfAssignmentFlow ? '' : \"_blank\"\n return(\n \n )\n })\n }\n\n const topSectionStyle = `${expanded ? 'open' : 'closed'}`;\n\n const learningCyclesRows = learningCycles.map((learningCycle, i) => {\n const { activities } = learningCycle;\n const isLastCycle = i === learningCycles.length - 1;\n return(\n \n
Learning Cycle {i + 1}
\n
\n
\n {renderActivities(activities, isLastCycle)}\n
\n
\n
\n
\n
\n {title} \n {tag}\n
\n
\n
{learningCycles.length} Learning Cycles
\n
•
\n
5 Passage-Aligned Activities
\n
\n
\n
\n
\n \n
\n
\n
\n {learningCyclesRows}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Official Pre-AP English Practice \n
Free Pre-AP® English writing practice aligned to the Pre-AP English High School Course Framework for the English 1 and English 2 courses with immediate feedback for students and progress reports for you.
\n {getStartedButton(isPartOfAssignmentFlow)}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Sentence-Level Writing Practice \n
Identify which sentence-level skills your students need to practice with a skills survey. Then, assign activities recommended for each student based on their responses so they can practice and improve their proficiency with those skills.
\n
\n
\n
\n
Pre-AP Writing Skills Surveys \n \n
\n
\n
\n
Pre-AP Writing Skills Survey 1: Basic of Sentence Patterns
\n
For Pre-AP English 1
\n
For Pre-AP English 2
\n
\n
View \n
\n
\n
Students complete a 12 item survey their understanding of key writing skills, fundamental grammatical elements, and compound/complex sentence constructions. After students complete the survey, Quill will automatically recommend up to five activity packs for each student based on their needs. Each pack contains four to six activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice on one of the five skills addressed in the survey.
\n
Skills
\n
Subject-verb agreement; pronoun-antecedent agreement; compound subjects, objects and predicates; coordinating conjunctions in compound sentences; subordinating conjunctions
\n
\n
\n
\n
\n
\n
Pre-AP Writing Skills Survey 2: Tools for Sentence Expansion
\n
For Pre-AP English 1
\n
For Pre-AP English 2
\n
\n
View \n
\n
\n
Students complete a 12 item survey their understanding of key writing skills, focusing on constructions for expanding sentences with description and detail. After students complete the survey, Quill will automatically recommend up to five activity packs for each student based on their needs. Each pack contains four to six activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice on one of the five skills addressed in the survey.
\n
Skills
\n
Conjunctive adverbs; appositive phrases; relative clauses; participial phrases; parallel structure
\n
\n
\n \n
\n
\n
ELL Starter Skills Survey
\n
View \n
\n
\n
ELL students complete a 22 item survey to gauge their mastery of foundational English grammar. This survey is most appropriate for students who are in the Entering or Emerging WIDA levels . After students complete the survey, Quill will automatically recommend up to five activity packs for each student based on their needs. Each pack contains a series of activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice with one of the skills covered by the survey.
\n
Skills
\n
Simple verb conjugation; articles; simple subject-verb agreement; simple word order; singular and plural nouns; adjective placement
\n
\n
\n
\n
\n
ELL Intermediate Skills Survey
\n
View \n
\n
\n
ELL students complete a 23 item survey to gauge their mastery of English grammar. This survey is most appropriate for students who are in the Emerging or Developing WIDA levels . After students complete the survey, Quill will automatically recommend up to six activity packs for each student based on their needs. Each pack contains a series of activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice with one of the skills covered by the survey.
\n
Skills
\n
Subject-verb agreement; singular possessive nouns; possessive pronouns; prepositions; future tense; articles; intermediate questions
\n
\n
\n
\n
\n
ELL Advanced Skills Survey
\n
View \n
\n
\n
ELL students complete a 23 item survey to gauge their mastery of English grammar, specifically in areas that are challenging for non-native English speakers. This survey is most appropriate for students who are in the Developing or Expanding WIDA levels . After students complete the survey, Quill will automatically recommend up to five activity packs for each student based on their needs. Each pack contains a series of activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice with one of the skills covered by the survey.
\n
Skills
\n
Regular and irregular past tense; progressive tenses; phrasal verbs; choosing between prepositions; responding to questions; commonly confused words
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Writing Practice Aligned to Course Frameworks
\n
Each 12 item Pre-AP Writing Skills Survey covers five of the ten key grammar skills from the English 1 and English 2 course frameworks. Each survey helps identify which of the five skills your students need to practice most.
\n
\n
\n
\n
\n
Personalized Recommendations
\n
After your students complete a Pre-AP Writing Skills Survey, Quill will use the results to recommend a set of independent practice activities. You can choose to assign all the practice at once, or you can pick and choose the activities that best fit your instructional and students’ needs. As students complete the practice, they’ll receive instant feedback on their writing that guides them through the revising and editing process.
\n
\n
\n
\n
\n
\n
\n
Additional Practice
\n
Some of your students may benefit from more opportunities to practice a skill after they have completed the activities recommended based on their writing skills survey results. In that case, you can assign a second set of independent practice activities: same skills, new content.\n Learn more about the additional activity packs. \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Passage-Aligned Activities \n
20 custom sentence-combining activities, each one aligned to a unique Pre-AP English 1 text to give your students the opportunity to practice their sentence construction skills in context.
\n
\n
\n
\n
Passage-Aligned Activities \n
For Pre-AP English 1
\n
\n
\n
\n {expandableUnits}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Alignment to Pre-AP English 1 Content
\n
Each sentence-combining activity is aligned to a different text from the four English 1 instructional units. As students combine sentences and build their writing skills, they also explore key text elements: historical and authorial context, plot, structure, and more. These activities model the kind of analytical thinking they would optimally reflect in their own writing.
\n
\n
\n
\n
\n
Alignment to Pre-AP English High School Course Framework
\n
In these sentence-combining items, students are free to use any grammatically correct method of combining the sentences they choose. However, each item is written to provide opportunities for students to practice the skills from the course framework. No matter which method students choose to use, they will receive instant, targeted feedback on up to five revisions to help them strengthen their sentence and build their writing skills.
\n
\n
\n
\n
\n
\n
\n
Opportunities Throughout the Course
\n
At least one activity appears in each Learning Cycle of all four instructional units so that this sentence-combining practice can easily be incorporated into your instructional plans. Since these activities include details about the texts and analysis of key elements, they are best used to reinforce learning after students have read and discussed these texts in class.
\n
\n
\n
\n
\n
\n
\n
Quill and College Board have partnered to provide students with meaningful practice of their sentence-level writing skills.
\n
\n
Message from College Board
\n
\n
\n
\n
\n
Teaching writing is hard. Even harder can be attempting to pinpoint exactly when we learned how and why to write clearly. That’s why the College Board has worked with Quill.org to ensure that this new, free, comprehensive offering helps students practice targeted sentence construction skills in their writing. Sustained practice and exposure to targeted skills is important to improvement and comfort.
\n
Teaching writing may always be hard, but student practice in meaningful skills can make the learning that much clearer. Through this practice, students can begin to own the how and why of their writing.
\n
\n
\n
\n
\n
\n
\n
\n
\n}\n\ninterface PreApContainerState {\n units: Array\n}\n\nexport const PreApContainer = ({ isPartOfAssignmentFlow, units }: PreApContainerProps) => {\n\n const [preApUnits, setPreApUnits] = React.useState(units || []);\n\n React.useEffect(() => {\n setUnits();\n }, []);\n\n const setUnits = () => {\n if (!preApUnits.length) {\n requestGet('/preap_units.json',\n (data) => {\n setPreApUnits(data.units);\n }\n )\n }\n }\n return For SpringBoard 9}\n title={u.title}\n />\n )\n })\n\n return (\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Official SpringBoard Writing Practice \n
Free SpringBoard® English writing practice aligned to a variety of skills addressed through SpringBoard Grades 6-8, with immediate feedback for students and progress reports for you. Additional tools for SpringBoard Grades 9-10 and Grades 11-12 as well! Find out more below.
\n {getStartedButton(isPartOfAssignmentFlow)}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Sentence-Level Writing Practice \n
Identify which sentence-level skills your students need to practice with a skills survey. Then, assign activities recommended for each student based on their responses so they can practice and improve their proficiency with those skills.
\n
\n
\n
\n
Springboard Writing Skills Surveys \n \n
\n
\n
\n
SpringBoard Writing Skills Survey
\n
For SpringBoard 6-8
\n
\n
View \n
\n
\n
Students complete a 25 item survey to gauge their understanding of key writing skills, fundamental grammatical elements, common editing mistakes, and compound/complex sentence constructions. The skills addressed in this survey are aligned to the grammar instruction featured in the SpringBoard Language and Writer’s Craft and Language Checkpoint lesson components.
\n
Skills
\n
Subject-verb agreement; pronoun-antecedent agreement; compound subjects, objects and predicates; coordinating conjunctions in compound sentences; subordinating conjunctions; prepositional phrases; verb tense; subject and object pronouns; commonly confused words
\n
\n
\n
\n
Pre-AP and AP Writing Skills Surveys \n \n
\n
\n
\n
Pre-AP Writing Skills Survey 1: Basic of Sentence Patterns
\n
For SpringBoard 9-10
\n
\n
View \n
\n
\n
Students complete a 12 item survey their understanding of key writing skills, fundamental grammatical elements, and compound/complex sentence constructions. The skills addressed in this survey are aligned to the Pre-AP English High School Course Framework for English 1 and English 2.
\n
Skills
\n
Subject-verb agreement; pronoun-antecedent agreement; compound subjects, objects and predicates; coordinating conjunctions in compound sentences; subordinating conjunctions
\n
\n
\n
\n
\n
\n
Pre-AP Writing Skills Survey 2: Tools for Sentence Expansion
\n
For SpringBoard 9-10
\n
\n
View \n
\n
\n
Students complete a 12 item survey their understanding of key writing skills, focusing on constructions for expanding sentences with description and detail. The skills addressed in this survey are aligned to the Pre-AP English High School Course Framework for English 1 and English 2.
\n
Skills
\n
Conjunctive adverbs; appositive phrases; relative clauses; participial phrases; parallel structure
\n
\n
\n
\n
\n
\n
AP Writing Skills Survey
\n
For SpringBoard 11-12
\n
\n
View \n
\n
\n
Students complete a 17 item survey to gauge their understanding of key writing skills that are essential to successful AP- and SAT-level writing.
\n
Skills
\n
Complex Sentences; relative clauses; appositive phrases; participial phrases; parallel structure; compound-complex sentences; advanced combining
\n
\n
\n \n
\n
\n
ELL Starter Skills Survey
\n
View \n
\n
\n
ELL students complete a 22 item survey to gauge their mastery of foundational English grammar. This survey is most appropriate for students who are in the Entering or Emerging WIDA levels . After students complete the survey, Quill will automatically recommend up to five activity packs for each student based on their needs. Each pack contains a series of activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice with one of the skills covered by the survey.
\n
Skills
\n
Simple verb conjugation; articles; simple subject-verb agreement; simple word order; singular and plural nouns; adjective placement
\n
\n
\n
\n
\n
ELL Intermediate Skills Survey
\n
View \n
\n
\n
ELL students complete a 23 item survey to gauge their mastery of English grammar. This survey is most appropriate for students who are in the Emerging or Developing WIDA levels . After students complete the survey, Quill will automatically recommend up to six activity packs for each student based on their needs. Each pack contains a series of activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice with one of the skills covered by the survey.
\n
Skills
\n
Subject-verb agreement; singular possessive nouns; possessive pronouns; prepositions; future tense; articles; intermediate questions
\n
\n
\n
\n
\n
ELL Advanced Skills Survey
\n
View \n
\n
\n
ELL students complete a 23 item survey to gauge their mastery of English grammar, specifically in areas that are challenging for non-native English speakers. This survey is most appropriate for students who are in the Developing or Expanding WIDA levels . After students complete the survey, Quill will automatically recommend up to five activity packs for each student based on their needs. Each pack contains a series of activities that each take about 15 minutes to complete and provide scaffolded, sequenced practice with one of the skills covered by the survey.
\n
Skills
\n
Regular and irregular past tense; progressive tenses; phrasal verbs; choosing between prepositions; responding to questions; commonly confused words
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Personalized Recommendations
\n
After your students complete a SpringBoard 6-8, Pre-AP, AP, or ELL writing skills survey, Quill will use the results to recommend a set of independent practice activities. You can choose to assign all the practice at once, or you can pick and choose the activities that best fit your instructional and students’ needs. As students complete the practice, they’ll receive instant feedback on their writing that guides them through the revising and editing process.
\n
\n
\n
\n
\n
Writing with Targeted Feedback
\n
Students receive immediate feedback that guides them through the revision process, pushing them to think critically about their writing and make revisions that ultimately lead to strong, sophisticated, and grammatically accurate sentences. The feedback inspires students to strengthen their sentence structure, but also supports them in editing for mechanics such as punctuation and spelling.
\n
\n
\n
\n
\n
\n
\n
Data Reports
\n
You can monitor the progress of your students and continue to identify areas of need and areas of strength through multiple data reports. Use the analysis report to review your students' work sentence-by-sentence, or use the summary report to get a high-level sense of where your students could use some extra support.
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Passage-Aligned Activities \n
Twenty custom sentence-combining activities, each one aligned to a unique 9th grade SpringBoard ELA text to give your students the opportunity to practice their sentence construction skills in context.
\n
\n
\n
\n
Passage-Aligned Activities \n \n
\n
\n {expandableUnits}\n
\n
\n
\n
\n
\n
\n
Quill and College Board have partnered to provide students with meaningful practice of their sentence-level writing skills.
\n
\n
Message from College Board
\n
\n
\n
\n
\n
Teaching writing is hard. Even harder can be attempting to pinpoint exactly when we learned how and why to write clearly. That’s why the College Board has worked with Quill.org to ensure that this new, free, comprehensive offering helps students practice targeted sentence construction skills in their writing. Sustained practice and exposure to targeted skills is important to improvement and comfort.
\n
Teaching writing may always be hard, but student practice in meaningful skills can make the learning that much clearer. Through this practice, students can begin to own the how and why of their writing.
\n
\n
\n
\n
\n
\n
\n
\n
\n}\n\ninterface SpringBoardContainerState {\n units: Array\n}\n\nexport const SpringBoardContainer = ({ isPartOfAssignmentFlow, units }: SpringBoardContainerProps) => {\n\n const [springBoardUnits, setSpringBoardUnits] = React.useState(units || []);\n\n React.useEffect(() => {\n setUnits();\n }, []);\n\n const setUnits = () => {\n if (!springBoardUnits.length) {\n requestGet('/springboard_units.json',\n (data) => {\n setSpringBoardUnits(data.units);\n }\n )\n }\n }\n return selectCard(history, '/assign/ap')}\n />),\n ( selectCard(history, '/assign/pre-ap')}\n />),\n ( selectCard(history, '/assign/springboard')}\n />)\n];\n\nconst AssignADiagnostic = (props: any) => (\n \n
\n
\n
\n
Do you want to use activities aligned to SpringBoard, Pre-AP, or AP? \n
{minis(props)}
\n
\n
Saving : 'Update Activities';\n return {text} ;\n }\n }\n\n determineErrorMessageClass = () => {\n if (this.state.prematureContinueAttempted) {\n return 'error-message visible-error-message';\n }\n return 'error-message hidden-error-message';\n }\n\n handleClick = () => {\n this.props.updateActivities();\n this.setState({ loading: true, });\n }\n\n render() {\n const { editing, errorMessage, clickContinue, activities, selectedActivities, setSelectedActivities, toggleActivitySelection, unitName, showLessonsBanner, showEvidenceBanner, flagset, } = this.props\n const error = errorMessage ? \n {navigation}\n
\n );\n }\n}\n","import * as React from 'react'\n\nconst ActivityPackInformation = ({ activityPackData, classroomData }) => {\n\n function getStudentCount() {\n return classroomData.reduce((previousValue, classroom) => {\n const { students, } = classroom\n return students && students.length ? previousValue += students.length : previousValue\n }, 0)\n }\n\n return (\n \n
\n
Activity Pack
\n
{activityPackData && activityPackData.name}
\n
\n
\n
Activities
\n
{activityPackData && activityPackData.activityCount}
\n
\n
\n
Classes
\n
{classroomData && classroomData.length}
\n
\n
\n
Students
\n
{classroomData && classroomData.length && getStudentCount()}
\n
\n
(false);\n const [selectedClass, setSelectedClass] = React.useState({ label: '', value: '' });\n const [classrooms, setClassrooms] = React.useState([]);\n const [classroomUnits, setClassroomUnits] = React.useState([]);\n const [link, setLink] = React.useState(getDefaultLink());\n\n React.useEffect(() => {\n requestGet(`/teachers/classrooms/classrooms_and_classroom_units_for_activity_share/${unitId}`, (body) => {\n const classrooms = body.classrooms && filterClassrooms(body.classrooms.classrooms_and_their_students)\n setClassrooms(classrooms)\n setClassroomUnits(body.classroom_units)\n });\n }, []);\n\n React.useEffect(() => {\n if (classrooms.length && classroomUnits.length) {\n const newLink = getDefaultLink();\n const filteredClassrooms = filterClassrooms(classrooms);\n getSelectedClass(filteredClassrooms);\n newLink && setLink(newLink);\n }\n }, [classrooms, classroomUnits]);\n\n React.useEffect(() => {\n if (classrooms && classrooms.length) {\n const filteredClassrooms = filterClassrooms(classrooms);\n getSelectedClass(filteredClassrooms);\n setClassrooms(filteredClassrooms);\n }\n }, [selectedClassroomId, selectedClassroomName, selectableClassrooms]);\n\n function filterClassrooms(classrooms) {\n if (selectedClassroomName) {\n return classrooms.filter(classroomObject => classroomObject.classroom.name === selectedClassroomName);\n }\n\n if (selectedClassroomId === ALL_CLASSES) {\n return classrooms.filter(classroomObject => selectableClassrooms.includes(classroomObject.classroom.name))\n }\n\n if (selectedClassroomId && selectedClassroomId !== ALL_CLASSES) {\n const id = parseInt(selectedClassroomId);\n return classrooms.filter(classroomObject => classroomObject.classroom.id === id);\n }\n return classrooms;\n }\n\n function getSelectedClass(filteredClassrooms) {\n // we want set selectedClass and return only the link without dropdown if only one class remains after filtering\n if (filteredClassrooms && filteredClassrooms.length === 1) {\n const classroomObject = filteredClassrooms[0];\n const { classroom } = classroomObject;\n const { id, name } = classroom;\n const dropdownOption = {\n value: id,\n label: name\n }\n setSelectedClass(dropdownOption);\n }\n }\n\n function getDefaultLink() {\n if (!(classrooms.length)) { return '' }\n if (!(classroomUnits.length)) { return '' }\n if (classrooms.length !== 1) { return '' }\n const classroomObject = classrooms[0];\n const classroomUnitObject = classroomUnits[0];\n const { classroom } = classroomObject;\n if (singleActivity) {\n const { id } = classroomUnitObject;\n const activityId = singleActivity.activityId || singleActivity.id\n return `${window.postbuildEnv.DEFAULT_URL}/classroom_units/${id}/activities/${activityId}`;\n }\n if (!singleActivity) {\n const { id } = classroom;\n return `${window.postbuildEnv.DEFAULT_URL}/classrooms/${id}?unit_id=${unitId}`\n }\n }\n\n function getClassroomOptions() {\n return classrooms.map(classroomObject => {\n const { classroom } = classroomObject;\n const { id, name } = classroom;\n return {\n value: id,\n label: name\n }\n });\n }\n\n function getCourseId() {\n const selectedClassroom = selectedClass && classrooms.filter(classroomObject => classroomObject.classroom.id === parseInt(selectedClass.value))[0];\n return selectedClassroom && selectedClassroom.classroom.google_classroom_id;\n }\n\n function handleCloseModal() {\n closeModal();\n }\n\n function handleCopyLink() {\n setShowSnackbar(true);\n setTimeout(() => setShowSnackbar(false), defaultSnackbarTimeout);\n }\n\n function handleClassChange(classOption: DropdownObjectInterface) {\n const { value } = classOption;\n setSelectedClass(classOption);\n if (singleActivity) {\n const classroomUnit = classroomUnits.filter(unit => unit.classroom_id === parseInt(value))[0];\n const activityId = singleActivity.activityId || singleActivity.id\n setLink(`${window.postbuildEnv.DEFAULT_URL}/classroom_units/${classroomUnit.id}/activities/${activityId}`);\n } else {\n setLink(`${window.postbuildEnv.DEFAULT_URL}/classrooms/${value}?unit_id=${unitId}`);\n }\n }\n\n function handleShareToGoogleClassroomClick() {\n let shareUrl = 'https://classroom.google.com/share?';\n const title = singleActivity && singleActivity.name || activityPackData.name;\n const body = `Work on ${title}`;\n const courseId = getCourseId();\n if (link) {\n shareUrl += `url=${link}&`;\n shareUrl += `title=${title}&`;\n shareUrl += `body=${body}`;\n if (courseId) { shareUrl += `&courseid=${courseId}` }\n window.open(\n shareUrl,\n '_blank'\n );\n }\n }\n\n function returnActivityLinkComponent(showActivityLink: boolean) {\n const showContainerStyle = !showActivityLink ? 'hide-modal-element' : '';\n return (\n \n
{singleActivity ? 'Activity link' : 'Activity pack link'}
\n
{link}
\n
\n
\n
\n
\n
Choose a class
\n
Since you assigned this activity pack to more than one class you need to select a class to view the share link.
\n
\n
\n
\n
\n
\n
\n
Share with your class
\n {returnActivityLinkComponent(showActivityLink)}\n
\n
\n
\n \n
{getTitle()} \n
\n \n
{getDisclaimer()}
\n {renderActivityAndClassData(showActivityLink)}\n \n
\n Copy link \n \n
\n \n
\n );\n }\n\n const dataReady = !!(classrooms && classrooms.length);\n const showActivityLink = selectedClass && selectedClass.value;\n const showContainerStyle = !showActivityLink ? 'hide-modal-element' : '';\n\n return (\n \n
\n
\n {renderContent(dataReady)}\n (false);\n const [isExpanded, setIsExpanded] = React.useState(false);\n const [modalOpen, setModalOpen] = React.useState(false);\n const [activityPack, setActivityPack] = React.useState(activityPackData);\n const [singleActivity, setSingleActivity] = React.useState(null);\n\n React.useEffect(() => {\n setActivityPack(activityPackData);\n }, [activityPackData]);\n\n // this hook is for the case when a user opts to click Return to Dashboard in the assignment flow\n React.useEffect(() => {\n if (leaving) {\n handleUnmount();\n window.location.href = `${window.postbuildEnv.DEFAULT_URL}/teachers/classrooms`;\n }\n }, [leaving]);\n\n // this hook is for the case when a user opts to click Next in the assignment flow\n React.useEffect(() => {\n return () => {\n handleUnmount()\n }\n }, []);\n\n function handleUnmount() {\n window.localStorage.removeItem(UNIT_TEMPLATE_ID);\n window.localStorage.removeItem(UNIT_TEMPLATE_NAME);\n window.localStorage.removeItem(UNIT_NAME);\n window.localStorage.removeItem(ACTIVITY_IDS_ARRAY);\n window.localStorage.removeItem(ASSIGNED_CLASSROOMS);\n window.localStorage.removeItem(CLASSROOMS);\n window.localStorage.removeItem(UNIT_ID);\n }\n\n function handleClick() {\n moveToStage4();\n }\n\n function handleGoToClassroomIndex() {\n setLeaving(true);\n }\n\n function handleExpandCard() {\n setIsExpanded(!isExpanded);\n }\n\n function handleToggleShareModal() {\n setModalOpen(!modalOpen);\n }\n\n function handleShareActivityPackClick() {\n // clear data in case user clicked share single activity and closed out modal\n setSingleActivity(null);\n handleToggleShareModal();\n }\n\n function handleShareActivityClick(e, id) {\n e.stopPropagation();\n if(activityPack && activityPack.activities) {\n const { activities } = activityPack;\n const activity = activities.filter(activity => activity.id === id)[0];\n setSingleActivity(activity);\n handleToggleShareModal();\n }\n }\n\n function getRows(activityPackData) {\n if(!activityPackData) { return [] }\n const { activities } = activityPackData;\n if(!activities || !activities.length) { return }\n return activities.map(activity => {\n const { id, name } = activity;\n return {\n name,\n id,\n imgAlt: 'share-arrow',\n imgSrc: shareActivitySrc,\n onClick: (e) => handleShareActivityClick(e, id)\n }\n });\n }\n\n function getSelectedClassroomId() {\n if(classrooms && classrooms.length === 1) {\n const classroomObject = classrooms[0];\n const { classroom } = classroomObject;\n return classroom.id;\n }\n }\n\n function renderInviteStudents() {\n const emptyClassrooms = classrooms.filter(c => !c.students.length)\n const numberOfClassroomsFirstText = `${emptyClassrooms.length} ${emptyClassrooms.length === 1 ? 'class' : 'classes'}`\n const numberOfClassroomsSecondText = `${emptyClassrooms.length === 1 ? 'has' : 'have'}`\n return (\n Next \n return (\n \n {modalOpen &&\n
}\n
\n
\n
\n
Assigned! \n
\n
\n {allClassroomsAreEmpty && renderInviteStudents()}\n {!allClassroomsAreEmpty && renderShareActivityPackCards()}\n
\n
\n
{\n constructor(props) {\n super(props)\n\n this.state = {\n name: '',\n code: ' ',\n grade: null,\n timesSubmitted: 0,\n errors: {}\n }\n\n this.getClassCode = this.getClassCode.bind(this)\n this.handleGradeChange = this.handleGradeChange.bind(this)\n this.handleNameChange = this.handleNameChange.bind(this)\n this.createClass = this.createClass.bind(this)\n }\n\n UNSAFE_componentWillMount() {\n this.getClassCode()\n }\n\n getClassCode() {\n requestGet('/teachers/classrooms/regenerate_code', (body) => this.setState({ code: body.code }));\n }\n\n submitButtonClass() {\n const { name, grade, code, } = this.state\n let buttonClass = 'quill-button contained medium green focus-on-light';\n if (!name.length || !code.length || !grade) {\n buttonClass += ' disabled';\n }\n return buttonClass;\n }\n\n handleGradeChange(grade) {\n this.setState({ grade, });\n }\n\n handleNameChange(event) {\n this.setState({ name: event.target.value, })\n }\n\n createClass() {\n const { name, grade, code, timesSubmitted, } = this.state\n const classroom = { name, code, grade: grade.value, }\n requestPost('/teachers/classrooms', { classroom, }, (body) => {\n if (body && body.errors) {\n this.setState({ errors: body.errors, timesSubmitted: timesSubmitted + 1 });\n } else {\n this.props.onSuccess('Class created')\n }\n })\n }\n\n renderBody() {\n const { name, grade, code, timesSubmitted, errors, } = this.state\n return (\n \n )\n }\n\n renderFooter() {\n return (\n \n
\n
\n
You’ll invite students after you assign. \n
\n
\n Cancel \n Create \n
\n
\n {this.renderBody()}\n {this.renderFooter()}\n
\n )\n }\n}\n","export const canvasProvider = 'Canvas'\nexport const cleverProvider = 'Clever'\nexport const googleProvider = 'Google'\nexport const classlinkProvider = 'ClassLink'\nexport const canvasClassroomProvider = 'Canvas'\nexport const cleverClassroomProvider = 'Clever'\nexport const googleClassroomProvider = 'Google Classroom'\nexport const classlinkClassroomProvider = 'ClassLink'\nexport const classroomProviders = [canvasClassroomProvider, cleverClassroomProvider, googleClassroomProvider, classlinkClassroomProvider]\n\nconst importClassroomsEventName = (provider: string) => `${provider.toLowerCase()}-classroom-students-imported`\nconst importClassroomsPath = (provider: string) => `/${provider.toLowerCase()}_integration/teachers/import_classrooms`\nconst importStudentsEventName = (provider: string) => `${provider.toLowerCase()}-classroom-students-imported`\nconst importStudentsPath = (provider: string) => `/${provider.toLowerCase()}_integration/teachers/import_students`\nconst retrieveClassroomsEventName = (provider: string) => `${provider.toLowerCase()}-classrooms-retrieved`\nconst retrieveClassroomsPath = (provider: string) => `/${provider.toLowerCase()}_integration/teachers/retrieve_classrooms`\n\nexport const providerConfigLookup = {\n [canvasProvider]: {\n importClassroomsEventName: importClassroomsEventName(canvasProvider),\n importClassroomsPath: importClassroomsPath(canvasProvider),\n importStudentsEventName: importStudentsEventName(canvasProvider),\n importStudentsPath: importStudentsPath(canvasProvider),\n isCanvas: true,\n retrieveClassroomsEventName: retrieveClassroomsEventName(canvasProvider),\n retrieveClassroomsPath: retrieveClassroomsPath(canvasProvider),\n title: canvasClassroomProvider,\n },\n [cleverProvider]: {\n importClassroomsEventName: importClassroomsEventName(cleverProvider),\n importClassroomsPath: importClassroomsPath(cleverProvider),\n importStudentsEventName: importStudentsEventName(cleverProvider),\n importStudentsPath: importStudentsPath(cleverProvider),\n isClever: true,\n retrieveClassroomsEventName: retrieveClassroomsEventName(cleverProvider),\n retrieveClassroomsPath: retrieveClassroomsPath(cleverProvider),\n title: cleverClassroomProvider,\n },\n [googleProvider]: {\n importClassroomsEventName: importClassroomsEventName(googleProvider),\n importClassroomsPath: importClassroomsPath(googleProvider),\n importStudentsPath: importStudentsPath(googleProvider),\n importStudentsEventName: importStudentsEventName(googleProvider),\n isGoogle: true,\n retrieveClassroomsPath: retrieveClassroomsPath(googleProvider),\n retrieveClassroomsEventName: retrieveClassroomsEventName(googleProvider),\n title: googleClassroomProvider,\n },\n [classlinkProvider]: {\n importClassroomsEventName: importClassroomsEventName(classlinkProvider),\n importClassroomsPath: importClassroomsPath(classlinkProvider),\n importStudentsEventName: importStudentsEventName(classlinkProvider),\n importStudentsPath: importStudentsPath(classlinkProvider),\n isClassLink: true,\n retrieveClassroomsEventName: retrieveClassroomsEventName(classlinkProvider),\n retrieveClassroomsPath: retrieveClassroomsPath(classlinkProvider),\n title: classlinkClassroomProvider,\n }\n}\n\n","import Pusher from 'pusher-js';\n\nconst pusherInitializer = (id: number, channelEvent: string, callback?: () => void) => {\n if (window.postbuildEnv.RAILS_ENV === 'development') { Pusher.logToConsole = true; }\n\n const pusher = new Pusher(window.postbuildEnv.PUSHER_KEY, { cluster: window.postbuildEnv.PUSHER_CLUSTER });\n const channelName = String(id)\n const channel = pusher.subscribe(channelName);\n\n channel.bind(channelEvent, () => {\n if (callback && typeof(callback) === 'function') { callback() }\n\n pusher.unsubscribe(channelName)\n })\n\n return null\n}\n\nexport default pusherInitializer\n","import * as React from 'react';\n\nimport { useState } from 'react';\nimport pusherInitializer from '../../../../modules/pusherInitializer';\nimport GradeOptions from './grade_options';\n\nimport { providerConfigLookup } from './providerHelpers'\n\nimport { requestPost } from '../../../../modules/request/index';\nimport { DataTable, DropdownInput } from '../../../Shared/index';\nimport { ButtonLoadingSpinner, } from '../../../Shared/index'\n;\n\ninterface ImportProviderClassroomsModalProps {\n classrooms: Array;\n close: (event) => void;\n onSuccess: (event) => void;\n provider: 'Canvas' | 'Clever' | 'Google'\n user: any;\n}\n\nconst headers = [\n {\n width: '454px',\n name: 'Class',\n attribute: 'name'\n }, {\n width: '160px',\n name: 'Grade',\n attribute: 'grade',\n rowSectionClassName: 'show-overflow'\n }, {\n width: '74px',\n name: 'Year',\n attribute: 'year'\n }, {\n width: '74px',\n name: 'Students',\n attribute: 'students'\n }\n]\n\nconst ImportProviderClassroomsModal = ({classrooms: initialClassrooms, close, onSuccess, provider, user}: ImportProviderClassroomsModalProps) => {\n const [classrooms, setClassrooms] = useState(initialClassrooms);\n const [timesSubmitted, setTimesSubmitted] = useState(0);\n const [waiting, setWaiting] = useState(false);\n const providerConfig = providerConfigLookup[provider]\n\n const gradeOptions = GradeOptions\n\n const footerButtonClass = () => {\n let buttonClass = 'quill-button contained green medium focus-on-light';\n const noClassroomsChecked = classrooms.every(classroom => !classroom.checked)\n if (noClassroomsChecked) {\n buttonClass += ' disabled';\n }\n return buttonClass;\n }\n\n const toggleRowCheck = (rowId) => {\n const updatedClassrooms = classrooms.map(classroom => {\n if (classroom.classroom_external_id === rowId) { classroom.checked = !classroom.checked }\n\n return classroom\n })\n\n setClassrooms(updatedClassrooms)\n }\n\n const checkAllRows = () => {\n const newClassrooms = classrooms.map(classroom => {\n classroom.checked = true\n return classroom\n })\n setClassrooms(newClassrooms)\n }\n\n const uncheckAllRows = () => {\n const newClassrooms = classrooms.map(classroom => {\n classroom.checked = false\n return classroom\n })\n setClassrooms(newClassrooms)\n }\n\n const handleClickImportClasses = () => {\n pusherInitializer(user.id, providerConfig.importClassroomsEventName, () => onSuccess('Classes imported'))\n\n const classroomsCheckedWithNoGrade = classrooms.filter(classroom => classroom.checked && !classroom.grade)\n\n if (classroomsCheckedWithNoGrade.length) {\n const newClassrooms = classrooms.map(c => {\n if (classroomsCheckedWithNoGrade.find(noGradeClassroom => noGradeClassroom.id === c.id)) {\n c.error = 'Select a grade for your class'\n }\n return c\n })\n\n setClassrooms(newClassrooms);\n setTimesSubmitted(prevTimes => prevTimes + 1);\n return\n }\n\n setWaiting(true)\n\n const selectedClassrooms = classrooms.filter(classroom => classroom.checked)\n\n requestPost(providerConfig.importClassroomsPath, { selected_classrooms: selectedClassrooms })\n }\n\n const handleGradeChange = (rowId: string, grade: HTMLInputElement) => {\n const updatedClassrooms = classrooms.map(classroom => {\n if (classroom.classroom_external_id === rowId) { classroom.grade = grade.value }\n\n return classroom\n })\n\n setClassrooms(updatedClassrooms)\n }\n\n const renderModalContent = () => {\n if (!classrooms.length) { return }\n\n const rows = classrooms.map(classroom => {\n const { name, username, classroom_external_id, year, studentCount, checked, grade, error } = classroom\n const gradeOption = GradeOptions.find(g => [grade, Number(grade)].includes(g.value))\n const gradeSelector = (\n handleGradeChange(classroom_external_id, g)}\n options={gradeOptions}\n timesSubmitted={timesSubmitted}\n value={gradeOption}\n />\n )\n\n return {\n id: classroom_external_id,\n name,\n username,\n checked,\n year,\n className: error && !grade ? 'error' : '',\n grade: checked ? gradeSelector : null,\n students: studentCount,\n key: classroom_external_id,\n }\n })\n\n return (\n \n \n Import classes\n \n )\n }\n }\n\n return (\n \n
\n
\n\n
\n
Import classes from {providerConfig.title} \n \n\n
\n {renderModalContent()}\n
\n\n
\n
\n Cancel \n {renderImportButton()}\n
\n
\n\n
\n
{buttonText} \n } else {\n buttonClass += ' disabled';\n return {buttonText} \n }\n }\n\n return (\n \n
\n
\n \n
Link your account to {provider} \n \n Your email, {user.email}, is not associated with a {provider} account.
\n \n \n Cancel\n \n {renderLinkAccountButton()}\n
\n ;\n close: () => void;\n provider: 'Canvas' | 'Clever' | 'Google';\n}\n\nconst AVERAGE_TOOLTIP_ITEM_HEIGHT = 40 // update when CSS changes -- currently 22px line height + 16px \n You have {importedAndArchivedClassrooms.length} synced {provider} Classroom{importedAndArchivedClassrooms.length > 1 ? 's' : ''} archived in Quill \n c.name)}\n tooltipTriggerText={
\n ) : null\n\n const unownedClassroomsSection = unownedClassrooms.length ? (\n \n There {unownedClassrooms.length > 1 ? 'are' : 'is'} {unownedClassrooms.length} {provider} Classroom{unownedClassrooms.length > 1 ? 's' : ''} you have access to, but don't own\n c.name)}\n tooltipTriggerText={
\n ) : null\n\n notSeeingClassesSection = (\n \n
Not seeing classes? \n {importedAndArchivedClassroomsSection}\n {unownedClassroomsSection}\n \n )\n\n }\n\n return (\n \n
\n
\n
\n
Create classrooms in {providerTitle} \n \n
\n
\n
No classes are available to import yet. Go to {providerTitle} and create classes to import them into Quill.
\n
\n {notSeeingClassesSection}\n
\n Close \n
\n
\n
\n
\n
\n \n
Reauthorize {provider} \n \n \n To import a new {provider} classroom, you need to reauthorize {provider} access.\n
\n \n
\n Cancel\n \n {provider === 'Google' ?\n
\n :\n
\n Reauthorize\n }\n {EXPLORE_PREMIUM} ,\n {CONTACT_YOUR_ADMINISTRATOR} ,\n ]\n },\n [TEACHER_LACKS_SCHOOL_CANVAS]: {\n header: 'Contact your administrator to unlock Canvas',\n paragraphCopy: 'Looking to streamline your teaching process with Quill’s Canvas integration? Great news! Your subscription gives you access to the integration. The next step is for your administrator to set it up. Once they have done so, you’ll be able\\u00A0to:',\n checklistItems: [\n SEAMLESSLY_IMPORT_YOUR_CANVAS_ROSTERS,,\n AUTOMATICALLY_CREATE_AND_SYNC_CANVAS_STUDENT_ACCOUNTS,\n ],\n buttons: [\n {LEARN_MORE} ,\n {CONTACT_YOUR_ADMINISTRATOR} ,\n ]\n },\n [TEACHER_LACKS_INDIVIDUAL_CANVAS]: {\n header: ONE_STEP_AWAY_FROM_USING_CANVAS,\n paragraphCopy: 'Looking to streamline your teaching process with Quill’s Canvas integration? Great news! Your subscription gives you access to the integration and it has been set up by an administrator for your school. The last step is for you to log in to Quill via your Canvas account. Once you have done so, you’ll be able\\u00A0to:',\n checklistItems: [\n SEAMLESSLY_IMPORT_YOUR_CANVAS_ROSTERS,,\n AUTOMATICALLY_CREATE_AND_SYNC_CANVAS_STUDENT_ACCOUNTS,\n ],\n buttons: [\n {LEARN_HOW} \n ]\n },\n [ADMIN_LACKS_RELEVANT_PREMIUM]: {\n header: UNLOCK_CANVAS_WITH_SCHOOL_OR_DISTRICT_PREMIUM,\n paragraphCopy: 'Looking to streamline your school’s teaching process with Quill’s Canvas integration? Subscribe to School or District Premium to allow teachers at your school or district to:',\n checklistItems: [\n SEAMLESSLY_IMPORT_THEIR_CANVAS_ROSTERS,\n AUTOMATICALLY_CREATE_AND_SYNC_CANVAS_STUDENT_ACCOUNTS,\n ACCESS_A_HOST_OF_OTHER_PREMIUM_BENEFITS\n ],\n buttons: [\n {EXPLORE_PREMIUM} ,\n {LEARN_MORE} ,\n ]\n },\n [ADMIN_LACKS_SCHOOL_CANVAS]: {\n header: 'Get started with Canvas',\n paragraphCopy: 'Looking to streamline your school’s teaching process with Quill’s Canvas integration? Great news! Your subscription gives you access to the integration. The next step is to set it up. This will allow teachers at your school or district to:',\n checklistItems: [\n SEAMLESSLY_IMPORT_THEIR_CANVAS_ROSTERS,\n AUTOMATICALLY_CREATE_AND_SYNC_CANVAS_STUDENT_ACCOUNTS,\n ],\n buttons: [\n {LEARN_MORE} ,\n {SET_UP_INTEGRATION} ,\n ]\n },\n [ADMIN_LACKS_INDIVIDUAL_CANVAS]: {\n header: ONE_STEP_AWAY_FROM_USING_CANVAS,\n paragraphCopy: 'Looking to streamline your teaching process with Quill’s Canvas integration? Great news! Your subscription gives you access to the integration and it has been set up by you or another administrator for your school. The last step is for you to log in to Quill via your Canvas account. Once you have done so, you’ll be able\\u00A0to:',\n checklistItems: [\n SEAMLESSLY_IMPORT_YOUR_CANVAS_ROSTERS,,\n AUTOMATICALLY_CREATE_AND_SYNC_CANVAS_STUDENT_ACCOUNTS,\n ],\n buttons: [\n {LEARN_HOW} ,\n ]\n }\n}\n\ninterface CanvasModalProps {\n close: () => void;\n user: any;\n}\n\nconst CanvasModal = ({ close, user }: CanvasModalProps) => {\n const { modalRef } = useModalAccessibility(close);\n const subscriptionType = user.subscription?.account_type\n const hasSchoolOrDistrictPremium = subscriptionType?.includes(SCHOOL) || subscriptionType?.includes(DISTRICT)\n const schoolLinkedToCanvas = user.school_linked_to_canvas\n const userIsTeacher = user.role === TEACHER\n\n let canvasState\n\n if (userIsTeacher) {\n if (hasSchoolOrDistrictPremium) {\n // we don't show this modal if the user is already linked to Canvas and all of the other conditions are true, which would be state D\n canvasState = schoolLinkedToCanvas ? TEACHER_LACKS_INDIVIDUAL_CANVAS : TEACHER_LACKS_SCHOOL_CANVAS;\n } else {\n canvasState = TEACHER_LACKS_RELEVANT_PREMIUM;\n }\n } else {\n if (hasSchoolOrDistrictPremium) {\n // we don't show this modal if the user is already linked to Canvas and all of the other conditions are true, which would be state H\n canvasState = schoolLinkedToCanvas ? ADMIN_LACKS_INDIVIDUAL_CANVAS : ADMIN_LACKS_SCHOOL_CANVAS;\n } else {\n canvasState = ADMIN_LACKS_RELEVANT_PREMIUM;\n }\n }\n\n return (\n \n
\n
\n \n
{canvasStates[canvasState].header} \n \n {canvasStates[canvasState].paragraphCopy}
\n \n {canvasStates[canvasState].checklistItems.map(checklistItem => (\n {circleCheckImg}{checklistItem} \n ))}\n \n \n
\n Cancel\n \n \n {canvasStates[canvasState].buttons}\n
\n toggleClassroomSelection(classroom)} selected={false} />)\n const selectedStudents = students && students.length ? students.filter(s => s.isSelected) : []\n\n if (emptyClassroomSelected || selectedStudents.length) {\n checkbox = ( toggleClassroomSelection(classroom)} selected={true} />)\n }\n\n return checkbox\n}\n\nfunction renderStudentSection(classroom, students, lockedClassroomIds, toggleStudentSelection) {\n function selectStudents(studentOptions, classroomId) {\n const studentIds = studentOptions.map(s => s.value)\n toggleStudentSelection(studentIds, classroomId)\n }\n\n const { id, emptyClassroomSelected, } = classroom\n\n if (lockedClassroomIds.includes(id)) { return null }\n\n const options = students ? students.map((s) => {\n return { value: s.id, label: s.name, isSelected: s.isSelected, }\n }) : []\n\n const selectedStudents = options.filter(s => s.isSelected)\n\n if (options.length) {\n return (\n { selectStudents(e, id) }}\n isMulti={true}\n isSearchable={false}\n options={options}\n optionType=\"student\"\n value={selectedStudents}\n />\n )\n } else if (emptyClassroomSelected) {\n return And all students who join in the future \n }\n}\n\n\nconst AssignStudents = ({\n classrooms,\n canvasLink,\n cleverLink,\n fetchClassrooms,\n googleLink,\n lockedClassroomIds,\n lockedMessage,\n toggleClassroomSelection,\n toggleStudentSelection,\n user\n}) => {\n const { provider } = user\n const providerConfig = providerConfigLookup[provider]\n\n const reauthorizeLink = {\n [canvasProvider]: canvasLink,\n [cleverProvider]: cleverLink,\n [googleProvider]: googleLink,\n }[provider]\n\n const [providerClassrooms, setProviderClassrooms] = useState([])\n const [providerClassroomsLoading, setProviderClassroomsLoading] = useState(false)\n const [pendingImportFromProviderRequest, setPendingImportFromProviderRequest] = useState(false)\n\n const [isSnackbarVisible, setIsSnackbarVisible] = useState(false)\n const [snackbarCopy, setSnackbarCopy] = useState('')\n const [visibleModal, setVisibleModal] = useState(null)\n\n useSnackbarMonitor(isSnackbarVisible, setIsSnackbarVisible, defaultSnackbarTimeout)\n\n useEffect(() => {\n if (!provider) { return }\n\n retrieveProviderClassrooms()\n }, [])\n\n useEffect(() => {\n if (!pendingImportFromProviderRequest) { return }\n if (providerClassrooms === null) { return }\n\n setPendingImportFromProviderRequest(false)\n openModal(providerClassrooms.length ? importProviderClassroomsModal : noClassroomsToImportModal)\n }, [providerClassrooms])\n\n function handleImportClassesClick(option) {\n return importFromProvider[option.value]()\n }\n\n const closeModal = (callback = null) => {\n setVisibleModal(null)\n\n if (callback && typeof (callback) === 'function') { callback() }\n }\n\n const importFromCanvas = () => {\n if (providerConfig?.isCanvas) {\n setPendingImportFromProviderRequest(true)\n retrieveProviderClassrooms()\n } else {\n openModal(linkCanvasAccountModal)\n }\n }\n\n const importFromClever = () => {\n if (providerConfig?.isClever) {\n setPendingImportFromProviderRequest(true)\n retrieveProviderClassrooms()\n } else {\n openModal(linkCleverAccountModal)\n }\n }\n\n const importFromGoogle = () => {\n if (providerConfig?.isGoogle) {\n setPendingImportFromProviderRequest(true)\n retrieveProviderClassrooms()\n } else {\n openModal(linkGoogleAccountModal)\n }\n }\n\n const importFromProvider = {\n [canvasProvider]: importFromCanvas,\n [cleverProvider]: importFromClever,\n [googleProvider]: importFromGoogle,\n }\n\n const onSuccess = (snackbarCopy: string) => {\n fetchClassrooms()\n retrieveProviderClassrooms()\n showSnackbar(snackbarCopy)\n closeModal()\n }\n\n const openModal = (modalName: string) => {\n setVisibleModal(modalName)\n }\n\n const retrieveProviderClassrooms = () => {\n setProviderClassroomsLoading(true)\n pusherInitializer(user.id, providerConfig.retrieveClassroomsEventName, retrieveProviderClassrooms)\n\n requestGet(providerConfig.retrieveClassroomsPath, (body) => {\n if (body.reauthorization_required) {\n openModal(reauthorizeProviderModal)\n return\n }\n\n if (body.quill_retrieval_processing) { return }\n\n if (providerConfig?.isGoogle) {\n setProviderClassrooms(body.classrooms.filter(classroom => !classroom.alreadyImported && classroom.is_owner))\n } else {\n setProviderClassrooms(body.classrooms.filter(classroom => !classroom.alreadyImported))\n }\n\n setProviderClassroomsLoading(false)\n })\n }\n\n const showSnackbar = (snackbarCopy: string) => {\n setSnackbarCopy(snackbarCopy)\n setIsSnackbarVisible(true)\n }\n\n const renderAllClassroomsCheckbox = () => {\n if (classrooms.length <= 1) { return null }\n\n const selectedClassrooms = classrooms.filter((c) => {\n const { students, classroom, } = c\n const selectedStudents = students && students.length ? students.filter(s => s.isSelected) : []\n return !!(classroom.emptyClassroomSelected || selectedStudents.length)\n })\n\n const label = 'All classes and students'\n\n let checkbox = toggleClassroomSelection(null, true)} selected={false} />\n\n if (selectedClassrooms.length === classrooms.length) {\n checkbox = ( toggleClassroomSelection(null, false)} selected={true} />)\n } else if (selectedClassrooms.length) {\n checkbox = ( toggleClassroomSelection(null, false)} selected={true} state={INDETERMINATE} />)\n }\n\n return (\n \n {checkbox}\n
\n )\n }\n\n const renderClassroomList = () => {\n if (classrooms && classrooms.length) {\n const rows = classrooms.map(c => {\n const { classroom, students} = c\n\n return {\n checkbox: renderClassroomCheckbox(classroom, students, toggleClassroomSelection, lockedClassroomIds, lockedMessage),\n name: classroom.name,\n students: renderStudentSection(classroom, students, lockedClassroomIds, toggleStudentSelection)\n }\n })\n return (\n \n
\n
Your classrooms will appear here. Add a class to get started.
\n
\n
\n
\n 3 \n Choose classes or students \n
\n
\n {provider ? renderImportFromProviderButton(provider) : renderImportClassesDropdown()}\n openModal(createAClassForm)}\n type=\"button\"\n >\n Create a class\n \n
\n
\n
\n {renderCreateAClassInlineForm()}\n {renderAllClassroomsCheckbox()}\n {renderClassroomList()}\n
\n
Import from {theProviderTitle} \n let buttonClassName = \"quill-button outlined small grey icon focus-on-light\"\n\n if (providerClassroomsLoading && pendingImportFromProviderRequest) {\n buttonContent = Import from {theProviderTitle} \n buttonClassName += ' loading'\n }\n\n const importFromTheProvider = importFromProvider[theProvider]\n\n return (\n \n \n )\n }\n\n const renderCreateAClassInlineForm = () => {\n return visibleModal === createAClassForm\n ? closeModal(() => setPendingImportFromProviderRequest(false))}\n onSuccess={onSuccess}\n provider={provider}\n user={user}\n />\n )\n }\n\n const renderImportClassesDropdown = () => {\n const options = [\n {\n label: 'Import from Clever',\n value: cleverProvider,\n },\n {\n label: 'Import from Google Classroom',\n value: googleProvider,\n },\n {\n label: 'Import from Canvas',\n value: canvasProvider,\n }\n ]\n\n return (\n \n {renderImportProviderClassroomsModal()}\n {renderReauthorizeProviderModal()}\n {renderLinkProviderAccountModal()}\n {renderNoClassroomsToImportModal()}\n {renderSnackbar()}\n {renderClassroomsSection()}\n
\n )\n}\n\nexport default AssignStudents\n","import * as React from 'react'\n\nimport { requestPost, } from '../../../../../../modules/request'\nimport { Checkbox, DataTable, smallWhiteCheckIcon, warningIcon, } from '../../../../../Shared/index'\nimport { arrayFromNumbers, } from '../custom_activity_pack/shared'\nimport useModalAccessibility from '../../../../../Shared/hooks/useModalAccessibility'\n\nconst activityTableHeaders = [\n {\n name: 'Activity name',\n attribute: 'name',\n width: '521px',\n },\n {\n name: 'Suggested grades',\n attribute: 'suggestedGrades',\n width: '117px'\n }\n]\n\nconst classroomTableHeaders = [\n {\n name: 'Class name',\n attribute: 'name',\n width: '521px',\n },\n {\n name: 'Assigned grade',\n attribute: 'assignedGrade',\n width: '117px'\n }\n]\n\nconst GradeLevelWarningModal = ({ handleClickAssign, handleCloseModal, selectedActivities, selectedClassrooms, }) => {\n const { modalRef } = useModalAccessibility(close);\n const [dismissWarningCheckbox, setDismissWarningCheckbox] = React.useState(true)\n\n function toggleDismissWarningCheckbox() { setDismissWarningCheckbox(!dismissWarningCheckbox)}\n\n function completeDismissWarningCheckboxMilestone() {\n if (dismissWarningCheckbox) {\n requestPost('/milestones/complete_dismiss_grade_level_warning')\n }\n }\n\n function handleClickGoBackToEdit() {\n completeDismissWarningCheckboxMilestone()\n handleCloseModal()\n }\n\n function handleClickAssignToClasses() {\n completeDismissWarningCheckboxMilestone()\n handleClickAssign()\n }\n\n // we want to compare the classroom grades to the lower end of the range for each of the activities\n const lowestOfEachActivityReadabilityGradeLevel = selectedActivities.map(a => a.minimum_grade_level || 0)\n const highestGradeLevelBeingAssigned = Math.max(...lowestOfEachActivityReadabilityGradeLevel)\n\n const activityTableRows = selectedActivities.map(a => ({\n id: a.id,\n name: {a.name} ,\n suggestedGrades: a.minimum_grade_level ? arrayFromNumbers(a.minimum_grade_level, a.maximum_grade_level).join(', ') : null\n }))\n\n const classroomTableRows = selectedClassrooms.map(c => {\n const { grade, id, name, } = c.classroom\n const gradeToNumber = Number(grade)\n let gradeElement = gradeToNumber ? `Grade ${gradeToNumber}` : grade\n\n if (gradeToNumber && gradeToNumber < highestGradeLevelBeingAssigned) {\n gradeElement = (Grade {gradeToNumber} \n
\n
\n \n
Heads up! Activity grade level is above the classroom grade \n \n\n \n
Activities you are assigning are above the recommended grade level for your classes. Please confirm you want to assign these activities.
\n
\n
\n
We’re sharing this message to make sure that your students are ready for these activities. Students who have experience with Quill may be ready to practice more challenging activities. However, if you are not sure, you can preview the activity first to try it yourself and see if it’s the right level for your students.
\n
\n
\n
\n
\n Go back to edit assignment \n Assign pack to class \n
\n
\n
\n 1 \n Name the assignment \n
\n
\n
\n
\n
\n
\n\n \n
Are you sure you want to assign this diagnostic? \n \n\n \n
{tooltip} {haveOrHas} already completed the {activityName}. If you assign the diagnostic to them, they can take it again, but it will override their scores.
\n
\n
\n Cancel \n Yes, assign \n
\n
Publish Date}\n />\n ),\n attribute: 'publishDatePicker',\n width: '160px',\n headerClassName: 'publish-date-header-container',\n rowSectionClassName: 'datetime-picker'\n },\n {\n name: (\n Due Date}\n />\n ),\n attribute: 'dueDatePicker',\n width: '160px',\n headerClassName: 'due-date-header-container',\n rowSectionClassName: 'datetime-picker'\n },\n {\n name: 'Previously Assigned',\n attribute: 'previouslyAssigned',\n width: '80px',\n headerClassName: 'allow-wrap center-content previously-assigned-section',\n rowSectionClassName: `${rowSectionTooltipClassName} center-content previously-assigned-section`,\n noTooltip: true\n },\n]\n\nexport default class ReviewActivities extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n snackbarVisible: false,\n erroredActivityIds: [],\n previouslyAssignedActivityData: null\n }\n }\n\n componentDidUpdate() {\n const { activities } = this.props\n const { previouslyAssignedActivityData } = this.state\n if(!previouslyAssignedActivityData && activities) {\n this.getPreviouslyAssignedActivityData()\n }\n }\n\n getPreviouslyAssignedActivityData = () => {\n const { activities } = this.props\n const activityIds = JSON.stringify(activities.map(activity => activity.id))\n requestGet(`${window.postbuildEnv.DEFAULT_URL}/teachers/unit_templates/previously_assigned_activities?activity_ids=${activityIds}`, (response) => {\n if(response.previously_assigned_activity_data && Object.keys(response.previously_assigned_activity_data).length) {\n const { previously_assigned_activity_data } = response\n this.setState({ previouslyAssignedActivityData: previously_assigned_activity_data })\n }\n })\n }\n\n handleDateChange = (date, id, dateAttributeKey) => {\n const { activities, assignActivityDate, } = this.props\n const dates = this.props[dateAttributeKey]\n const activity = activities.find(act => act.id === id)\n const formattedDate = date || null\n this.setState({ erroredActivityIds: [], })\n assignActivityDate(activity, formattedDate, dateAttributeKey);\n }\n\n triggerSnackbar() {\n this.setState({ snackbarVisible: true }, () => {\n setTimeout(() => this.setState({ snackbarVisible: false, }), defaultSnackbarTimeout)\n })\n }\n\n handleDueDateChange = (date, id) => {\n const { activities, publishDates, } = this.props\n const dueDateIsBeforePublishDate = date && publishDates[id] && date <= moment.utc(publishDates[id])\n if (dueDateIsBeforePublishDate) {\n this.setState({\n erroredActivityIds: [id]\n }, this.triggerSnackbar)\n } else {\n this.handleDateChange(date, id, DUE_DATE_ATTRIBUTE_KEY)\n }\n }\n\n handlePublishDateChange = (date, id) => {\n const { activities, dueDates, } = this.props\n const publishDateIsAfterDueDate = date && dueDates[id] && date > moment.utc(dueDates[id])\n if (publishDateIsAfterDueDate) {\n this.setState({\n erroredActivityIds: [id]\n }, this.triggerSnackbar)\n } else {\n this.handleDateChange(date, id, PUBLISH_DATE_ATTRIBUTE_KEY)\n }\n }\n\n copyPublishDateToAll = () => {\n const { publishDates, dueDates, activities, } = this.props\n const publishDate = publishDates[activities[0].id]\n const activitiesWithEarlierDueDates = activities.filter(act => dueDates[act.id] && (publishDate >= dueDates[act.id]))\n\n if (publishDate && activitiesWithEarlierDueDates.length) {\n this.setState({\n erroredActivityIds: activitiesWithEarlierDueDates.map(a => a.id)\n }, this.triggerSnackbar)\n } else {\n this.copyDateToAll(PUBLISH_DATE_ATTRIBUTE_KEY)\n }\n }\n\n copyDueDateToAll = () => {\n const { publishDates, dueDates, activities, } = this.props\n const dueDate = dueDates[activities[0].id]\n const activitiesWithEarlierDueDates = activities.filter(act => publishDates[act.id] && (dueDate < publishDates[act.id]))\n\n if (dueDate && activitiesWithEarlierDueDates.length) {\n this.setState({\n erroredActivityIds: activitiesWithEarlierDueDates.map(a => a.id)\n }, this.triggerSnackbar)\n } else {\n this.copyDateToAll(DUE_DATE_ATTRIBUTE_KEY)\n }\n }\n\n copyDateToAll = (dateAttributeKey) => {\n const { activities, assignActivityDate, } = this.props\n const dates = this.props[dateAttributeKey]\n const existingDate = dates[activities[0].id] ? moment.utc(dates[activities[0].id]) : null\n this.setState({ erroredActivityIds: [], })\n activities.forEach(a => assignActivityDate(a, existingDate, dateAttributeKey))\n }\n\n removeRow = id => {\n const { activities, toggleActivitySelection } = this.props\n const activity = activities.find(act => act.id === id)\n toggleActivitySelection(activity, false)\n };\n\n rows() {\n const { activities, dueDates, publishDates } = this.props;\n const { erroredActivityIds, previouslyAssignedActivityData } = this.state;\n\n return activities.flatMap((activity, i) => {\n const {\n name,\n activity_classification,\n standard_level,\n activity_category,\n description,\n id,\n readability_grade_level,\n } = activity;\n\n const dueDateInMoment = dueDates[id] ? moment.utc(dueDates[id]) : null;\n const publishDateInMoment = publishDates[id] ? moment.utc(publishDates[id]) : null;\n\n const dueDatePicker = (\n this.handleDueDateChange(date, id)}\n defaultText={DUE_DATE_DEFAULT_TEXT}\n initialValue={dueDateInMoment}\n key={dueDateInMoment ? formatDateTimeForDisplay(dueDateInMoment) : id}\n />\n );\n\n const publishDatePicker = (\n this.handlePublishDateChange(date, id)}\n defaultText={PUBLISH_DATE_DEFAULT_TEXT}\n initialValue={publishDateInMoment}\n key={publishDateInMoment ? formatDateTimeForDisplay(publishDateInMoment) : id}\n />\n );\n\n const toolIcon = (\n ${activity_classification.alias}${activity_classification.description}
`}\n tooltipTriggerText={getExtraSmallIconForActivityClassification(activity_classification.id)}\n />\n );\n\n const activityName = (\n ${name}Tool: ${activity_classification.alias}
${readability_grade_level ? `Readability score: ${readability_grade_level}
` : ''}${description}
`}\n tooltipTriggerText={name}\n tooltipTriggerTextClass=\"clipped-content\"\n tooltipTriggerTextStyle={{ maxWidth: activityColumnMaxWidth }}\n />\n );\n\n const dataRow = {\n id,\n className: erroredActivityIds.includes(id) ? 'checked' : '',\n tool: toolIcon,\n activity: activityName,\n concept: activity_category.name,\n dueDatePicker,\n publishDatePicker,\n previouslyAssigned: (\n \n
\n
\n 2 \n Review activities and pick due dates \n
\n
\n
\n
\n
\n
\n\n
\n
Are you sure you want to assign this diagnostic? \n \n\n
\n
{tooltip} {haveOrHas} not yet completed the {postTestWarningModalPreNameCorrespondence[restrictedActivityId]}. Usually, students complete a Pre diagnostic and its practice activities first. Then, they move on to the Post diagnostic. If you assign the Post diagnostic now, students who haven't finished their practice activities yet will be able to take it, so we recommend waiting.
\n
\n\n
\n
\n Cancel \n Assign now \n
\n
\n\n
\n
Assigning... \n : Assign pack to classes ;\n }\n\n determineAssignButtonClass() {\n let buttonClass = 'quill-button contained medium green focus-on-light';\n if (!this.buttonEnabled()) {\n buttonClass += ' disabled';\n }\n return buttonClass;\n }\n\n buttonEnabled() {\n const { areAnyStudentsSelected, selectedActivities, errorMessage } = this.props\n return areAnyStudentsSelected && selectedActivities.length && !errorMessage\n }\n\n selectedClassrooms() {\n const { classrooms, } = this.props\n\n return classrooms.filter(c => c.students.find(s => s.isSelected) || c.classroom.emptyClassroomSelected)\n }\n\n handleClickAssign = () => {\n const { timesSubmitted, } = this.state\n const { errorMessage, finish, alreadyCompletedDiagnosticStudentNames, notYetCompletedPreTestStudentNames, showGradeLevelWarning, selectedActivities, } = this.props\n\n const selectedClassrooms = this.selectedClassrooms()\n const lowestSelectedClassroomGrade = Math.min(...selectedClassrooms.map(c => Number(c.classroom.grade) || 12))\n const aboveGradeLevelContentBeingAssigned = selectedActivities.find(a => {\n if (!a.minimum_grade_level) { return }\n\n return a.minimum_grade_level > lowestSelectedClassroomGrade\n })\n\n if (alreadyCompletedDiagnosticStudentNames.length) {\n this.setState({ showOverrideWarningModal: true })\n } else if (notYetCompletedPreTestStudentNames.length) {\n this.setState({ showSkipRecommendationsWarningModal: true, })\n } else if (showGradeLevelWarning && aboveGradeLevelContentBeingAssigned) {\n this.setState({ showGradeLevelWarningModal: true, })\n } else if (this.buttonEnabled() && !errorMessage) {\n this.setState({ loading: true, });\n finish();\n } else {\n this.setState({ prematureAssignAttempted: true, timesSubmitted: timesSubmitted + 1 });\n }\n };\n\n onAssignDespiteWarning = () => {\n const { finish, } = this.props\n this.setState({ loading: true, });\n finish();\n }\n\n closeSkipRecommendationsWarningModal = () => {\n this.setState({ showSkipRecommendationsWarningModal: false, })\n }\n\n closeOverrideWarningModal = () => {\n this.setState({ showOverrideWarningModal: false, })\n }\n\n closeGradeLevelWarningModal = () => {\n this.setState({ showGradeLevelWarningModal: false, })\n }\n\n renderOverrideWarningModal() {\n const { showOverrideWarningModal, } = this.state\n const { alreadyCompletedDiagnosticStudentNames, unitTemplateName, unitName } = this.props\n\n if (!showOverrideWarningModal) { return }\n\n return (\n \n {this.renderGradeLevelWarningModal()}\n {this.renderOverrideWarningModal()}\n {this.renderSkipRecommendationsWarningModal()}\n
\n
\n
\n
\n
Review and Assign \n {this.renderNameSection()}\n {this.renderReviewActivitiesSection()}\n {this.renderAssignStudentsSection()}\n \n
\n
;\n close: () => void;\n handleViewClick: (studentId: number|string) => void;\n defaultClassroomId?: number;\n}\n\nconst headers = [\n {\n width: '394px',\n name: 'Name',\n attribute: 'name'\n }, {\n width: '394px',\n name: 'Username',\n attribute: 'username'\n }, {\n width: '104px',\n name: '',\n attribute: 'viewButton',\n noTooltip: true,\n headerClassName: 'view-button-section',\n rowSectionClassName: 'view-button-section'\n }\n]\n\nfunction renderViewButton(handleViewClick: (id: string|number) => void, id: string|number) {\n function onClickView() {\n return handleViewClick(id)\n }\n\n return View \n}\n\nfunction renderDataTable(selectedClassroom: any, handleViewClick: (id: string|number) => void) {\n const rows = selectedClassroom.students.map(classroom => {\n const { name, username, id } = classroom\n return {\n name,\n username,\n id,\n viewButton: renderViewButton(handleViewClick, id)\n }\n })\n\n return (\n \n
\n
\n \n
Choose a student dashboard to view \n \n \n
\n \n Cancel \n
\n ;\n selectedActivities: Array;\n unitName: string;\n referralCode: string;\n location: any;\n history: any;\n}\n\ninterface UnitAssignmentFollowupState {\n showNextOptions: boolean;\n showViewAsStudentModal: boolean;\n assignedClassrooms: Array;\n showSnackbar: boolean;\n snackbarCopy: string;\n leaving: boolean;\n}\n\nexport default class UnitAssignmentFollowup extends React.Component {\n constructor(props) {\n super(props)\n\n const assignedClassrooms = props.classrooms.filter(c => c.classroom.emptyClassroomSelected || c.students.find(s => s.isSelected))\n\n this.state = {\n showViewAsStudentModal: false,\n showNextOptions: props.location.pathname === '/assign/next',\n assignedClassrooms,\n showSnackbar: false,\n snackbarCopy: '',\n leaving: false\n }\n }\n\n componentWillUnmount() {\n this.prepareToLeavePage()\n }\n\n prepareToLeavePage = async () => {\n return new Promise((resolve) => {\n return this.setState({ leaving: true, }, () => {\n window.localStorage.removeItem(UNIT_TEMPLATE_ID)\n window.localStorage.removeItem(UNIT_TEMPLATE_NAME)\n window.localStorage.removeItem(UNIT_NAME)\n window.localStorage.removeItem(ACTIVITY_IDS_ARRAY)\n window.localStorage.removeItem(CLASSROOMS)\n window.localStorage.removeItem(UNIT_ID)\n resolve()\n })\n })\n }\n\n allAssignedClassroomsAreEmpty = () => {\n const { assignedClassrooms, } = this.state\n return assignedClassrooms.every(c => c.classroom.emptyClassroomSelected)\n }\n\n showSnackbar = (snackbarCopy) => {\n this.setState({ showSnackbar: true, snackbarCopy }, () => {\n setTimeout(() => this.setState({ showSnackbar: false, }), defaultSnackbarTimeout)\n })\n }\n\n handleCopyLink = () => this.showSnackbar('Link copied')\n\n handleClickNext = () => {\n const { history, } = this.props\n history.push('/assign/next')\n this.setState({ showNextOptions: true })\n }\n\n renderSnackbar = () => {\n const { showSnackbar, snackbarCopy, } = this.state\n return \n
Assigned! \n \n
What would you like to do next? \n \n {this.renderSnackbar()}\n
\n
\n
Recommend Quill and earn a month of free Quill Premium for Teachers. \n
As a nonprofit organization that provides free activities, Quill relies on teachers to share the word.
\n
For every teacher that signs up for Quill with your referral link and completes an activity with their students, you earn a month of free Quill Premium, and they receive a one-month free trial.
\n
\n
\n \n Copy link \n \n
\n
More ways to share:
\n
\n
\n
\n
Take me to my dashboard \n if (!(showNextOptions || this.allAssignedClassroomsAreEmpty())) {\n button = Next \n }\n return (\n \n
\n
\n {this.renderViewAsStudentModal()}\n
\n {this.renderFollowUp()}\n
\n
\n \n {stageSpecificComponents}\n
\n \n\n );\n }\n}\n","import React from 'react';\nimport _ from 'underscore';\n\nexport default class UnitTemplateProfileShareButtons extends React.Component {\n\n urlEncodedMessage() {\n const { text, } = this.props\n return encodeURI(text) ;\n }\n\n render() {\n const { url, text, } = this.props\n\n const stuff = [\n {\n icon: 'fa-twitter',\n className: 'btn-twitter',\n href: `http://x.com/home?status=${encodeURIComponent(text)}`,\n title: 'Share on Twitter',\n action: 'Tweet',\n },\n {\n icon: 'fa-facebook',\n className: 'btn-facebook',\n href: `https://www.facebook.com/share.php?u=${url}`,\n title: 'Share this Activity pack on Facebook',\n action: 'Post',\n },\n {\n icon: 'fa-google-plus',\n className: 'btn-google-plus',\n href: `https://plus.google.com/share?url=${url}`,\n title: 'Share with Google Plus',\n action: 'Post',\n },\n {\n icon: 'fa-pinterest',\n className: 'btn-linkedin',\n href: `https://pinterest.com/pin/create/button/?url=${url}&media=https%3A%2F%2Fassets.quill.org%2Fimages%2Fshare%2Fpinterest.png&description=${this.urlEncodedMessage()}`,\n title: 'Share on Pinterest',\n action: 'Pin',\n }\n ];\n\n const links = _.map(stuff, hash => (\n \n {hash.action} \n \n ));\n\n return (\n \n
Share this Activity Pack \n
\n {links}\n
\n
\n \n \n {text} \n \n \n )\n }\n\n unitTemplatesAssignedActions() {\n return {studentsPresent: this.props.students, getInviteStudentsUrl: this.getInviteStudentsUrl};\n }\n\n renderSharingContainer() {\n return (\n \n
\n Share Quill With Your Colleagues\n \n
\n We’re a nonprofit providing free literacy activities. The more people
\n
\n {this.socialShareCopy()} \n
\n
\n
\n
\n
\n
\n
\n
\n {this.activityName()} Activity Pack!\n
\n
\n {this.teacherSpecificComponents()}\n
\n
\n
\n
\n {this.renderSharingContainer()}\n
\n
Log in or sign-up to assign \n
\n Log in \n Sign up \n
\n
redirectToActivity(row.original.id)}>{row.original.name} \n return(\n redirectToActivity(row.original.id)}>Preview \n return(\n
\"\n const standardLevelName = a.standard_level_name ? `${divider}${a.standard_level_name}
` : ''\n const standardName = a.standard.name ? `${divider}${a.standard.name}
` : ''\n const readability = a.readability ? `${divider}Readability: ${a.readability}
` : ''\n const topics = a.topic_names ? `${divider}Topics: ${a.topic_names.join(', ')}
` : ''\n const tooltipText = `Tool: ${a.classification.name}
${standardLevelName}${standardName}${readability}${topics}${a.description}
`\n formattedActivity.tooltipText = tooltipText\n formattedActivity.previouslyAssignedActivityData = previouslyAssignedActivityData && previouslyAssignedActivityData[a.id] ? previouslyAssignedActivityData[a.id] : null\n return formattedActivity\n })\n\n return (\n \n {showWarning && \n Activity Difficulty: Designed for 8th-12th Grade
\n Quill Reading for Evidence activities are designed for 8th-12th grade students or students reading at a Lexile level between 950-1250.
\n }\n
\n \n );\n}\n\nexport default UnitTemplateProfileDisclaimer\n","import * as React from 'react';\n\nconst UnitTemplateProfileDescription = ({ data }) => {\n return
\n};\n\nexport default UnitTemplateProfileDescription;\n","import React from 'react';\nimport _ from 'underscore';\n\nconst UnitTemplateProfileStandards = ({ data, }) => {\n const standards = _.uniq(data.activities.map(act => act.standard && act.standard.name)).filter(Boolean)\n const concepts = _.uniq(data.activities.map(act => act.standard && act.standard.standard_category && act.standard.standard_category.name)).filter(Boolean)\n const productionActivitiesRecommendedBy = data.diagnostics_recommended_by.filter(act => act.flags.includes(\"production\") && act.name.length)\n\n if (!standards.length && !concepts.length && !data.readability && !data.grade_range && !productionActivitiesRecommendedBy.length) { return \n Standards {s} )}\n \n )\n };\n\n const renderConcepts = () => {\n if (!concepts.length) { return \n Concepts {s} )}\n \n )\n };\n\n const renderGradeRange = () => {\n if (!data.grade_level_range) { return \n Grade Level Range {data.grade_level_range} \n \n )\n };\n\n const renderReadability = () => {\n if (!data.readability) { return \n Readability {data.readability} \n \n )\n };\n\n const renderRecommendedBy = () => {\n if (productionActivitiesRecommendedBy.length === 0) { return \n Recommended by {s.name} )}\n \n )\n };\n\n\n return (\n \n
\n {renderStandards()}\n {renderConcepts()}\n {renderGradeRange()}\n {renderReadability()}\n {renderRecommendedBy()}\n \n
{\n state = {\n data: null,\n loading: true,\n referralCode: ''\n }\n\n componentDidMount() {\n const { match } = this.props;\n const { activityPackId } = match.params;\n this.getProfileInfo(activityPackId);\n window.sessionStorage.setItem(CLICKED_ACTIVITY_PACK_ID, activityPackId);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps: RouteComponentProps) {\n const { location } = this.props;\n const { params } = nextProps;\n const { activityPackId } = params;\n if (!_.isEqual(location, nextProps.location)) {\n this.setState({ loading: true, });\n this.getProfileInfo(activityPackId);\n }\n }\n\n getProfileInfo = (id: string) => {\n requestGet(`/teachers/unit_templates/profile_info?id=${id}`, (response: { data: UnitTemplateProfileInterface, referral_code: string }) => {\n this.displayUnit(response)\n })\n }\n\n displayUnit = (response: { data: UnitTemplateProfileInterface, referral_code: string }) => {\n const { data, referral_code } = response;\n this.setState({\n data,\n referralCode: referral_code,\n loading: false\n })\n }\n\n indexLink = () => {\n const { data } = this.state;\n const { non_authenticated } = data;\n return non_authenticated\n ? '/activities/packs'\n : '/assign/featured-activity-packs';\n }\n\n socialShareUrl = (referralCode: string) => {\n return `${window.location}${referralCode ? '?referral_code=' + referralCode : ''}`\n }\n\n socialText = (name: string, referralCode: string) => {\n return `Check out the '${name}' activity pack I just assigned on Quill.org! ${this.socialShareUrl(referralCode)}`\n }\n\n handleGoToEditStudents = () => {\n const { history } = this.props;\n const { data } = this.state;\n const { name, id, activities, } = data\n const activityIdsArray = activities.map((act: Activity) => act.id).toString()\n window.localStorage.setItem(UNIT_TEMPLATE_NAME, name)\n window.localStorage.setItem(UNIT_NAME, name)\n window.localStorage.setItem(ACTIVITY_IDS_ARRAY, activityIdsArray)\n window.localStorage.setItem(UNIT_TEMPLATE_ID, id)\n let link = `/assign/select-classes?unit_template_id=${id}`\n const collegeBoardActivityTypeSlug = parsedQueryParams()[COLLEGE_BOARD_SLUG]\n if (collegeBoardActivityTypeSlug) {\n link += `&${COLLEGE_BOARD_SLUG}=${collegeBoardActivityTypeSlug}`\n }\n\n history.push(link)\n }\n\n handleActivityClick = (e) => {\n const { target } = e\n const { id } = target\n redirectToActivity(id)\n }\n\n renderAssignButton = () => {\n return Select pack \n }\n\n renderMobileActivitiesList = ({ activities }) => {\n if(!activities) { return }\n\n return(\n \n Activities \n \n {activities.map(activity => {\n const { id, name } = activity\n return {name} \n \n )\n }\n\n render() {\n const { data, loading, referralCode } = this.state\n\n if (loading) {\n return \n
\n {navigation}\n
\n
Activity Pack \n
{name} \n
\n
\n
\n {this.renderMobileActivitiesList(data)}\n
\n
\n
\n
\n
\n
{this.props.data.name.toUpperCase()}
\n if (this.props.isLink) {\n return (\n BETA
\n }\n if (cutOffTimeForNew < data.created_at) {\n return NEW
\n }\n }\n\n renderToolNames() {\n const { data, } = this.props\n\n const toolClassifications = data.activities.map(act => act.classification)\n const toolRows = _.uniqWith(toolClassifications, _.isEqual).map(classification => {\n return (\n \n {imageTagForClassification(classification.key)}\n {classification.name} \n \n )\n });\n\n return (\n \n
Contains activities from \n
\n {toolRows}\n
\n
\n
\n
\n
\n {this.renderActivityPackImage(data)}\n
\n
\n
\n NEW }\n
\n
\n
\n
\n {name}\n
\n {this.renderFlag(renderEvidenceTag)}\n
\n
\n
\n {this.renderToolNames()}\n
\n
\n Grade Level Range: {data.grade_level_range} \n
\n )\n }\n\n render() {\n return (\n \n
\n {this.renderGradeLevelRange()}\n
\n
\n
\n
\n
\n
\n {this.sayTime()}\n
\n
\n
\n
\n
\n
\n
\n
Create your own activity pack \n
Select from over 800 writing activities \n
\n
\n
\n )\n }\n\n handleClick = () => {\n const url = this.getLink()\n window.location.href = url\n }\n\n renderMiniContent = () => {\n return(\n \n {this.miniSpecificComponents()}\n \n )\n }\n\n render() {\n const { data } = this.props\n const { id } = data;\n if(id === CREATE_YOUR_OWN_ID) {\n return this.renderMiniContent()\n }\n return (\n \n {tools.map((tool, i) => {\n const toolName = i === tools.length - 1 ? tool : `${tool},`;\n return {toolName}
\n })}\n \n )\n }\n\n function getNameElement(name: string, activities: Activity[], packUrl:string) {\n const tooltipTriggerElement = {name} \n return(\n {unit_template_category.name}
,\n alphabeticalPackName: name,\n packName: nameElement,\n tools: toolsElement,\n alphabeticalTools: activityPackTools(activities)[0],\n gradeLevel: grade_level_range,\n chronologicalGradeLevel: getChronologicalGradeLevel(grade_level_range),\n activities: activities.length,\n duration: durationElement,\n chronologicalDuration: time\n }\n });\n }\n\n return(\n \n {type && index === 0 &&
{type}
}\n
\n
\n {!!readingTextModels.length && }\n {!!diagnosticModels.length && }\n {!!languageSkillsModels.length && \n \n {languageSkillsModels}\n \n }\n {!!dailyProofreadingModels.length && \n \n {dailyProofreadingModels}\n \n }\n {!!wholeClassModels.length && }\n \n )\n }\n const modelCards = models.map((model, index) => this.generateUnitTemplateView(model, index));\n return modelCards;\n }\n\n userLoggedIn() {\n const { signedInTeacher, } = this.props\n return signedInTeacher\n }\n\n userNotLoggedIn() {\n return !this.userLoggedIn();\n }\n\n handleTypeDropdownChange(type) {\n const { value } = type;\n window.location.href = value;\n }\n\n getDropdownValue(typeOptionsForDropdown) {\n const { location } = window;\n const { href } = location;\n\n if(href.includes('diagnostic')) {\n return typeOptionsForDropdown[1];\n } else if(href.includes('whole-class')) {\n return typeOptionsForDropdown[3];\n } else if(href.includes('independent')) {\n return typeOptionsForDropdown[2];\n }\n return typeOptionsForDropdown[0];\n }\n\n getLabelName(name) {\n switch (name) {\n case 'Whole class lessons':\n return 'Whole class lessons';\n case 'Independent practice':\n return 'Independent'\n default:\n return name;\n }\n }\n\n generateQueryString(gradeLevel, typeId=null) {\n let qs = ''\n\n if (gradeLevel) {\n const gradeLevelQuery = `gradeLevel=${gradeLevel}`\n qs+= qs.length ? `&${gradeLevelQuery}` : `?${gradeLevelQuery}`\n }\n\n if (typeId) {\n const typeQuery = `type=${typeId}`\n qs+= qs.length ? `&${typeQuery}` : `?${typeQuery}`\n }\n\n return qs\n }\n\n selectView(option) {\n this.setState({ currentView: option })\n }\n\n renderFilterOptions() {\n const { onMobile, currentView } = this.state\n const { types, selectedTypeId, data, selectGradeLevel, } = this.props\n const gradeLevelOptions = this.generateGradeLevelOptions(selectedTypeId)\n const currentGradeLevel = gradeLevelOptions.find(cat => cat.value && cat.value === data.selectedGradeLevel)\n\n const viewOptions = [GRID_VIEW_OPTION, LIST_VIEW_OPTION]\n\n const baseLink = this.getIndexLink()\n\n const typeOptions = types.map(type => {\n const { id, name, } = type\n const qs = this.generateQueryString(data.selectedGradeLevel, id)\n return (\n {name}\n )\n })\n\n const typeOptionsForDropdown = types.map(type => {\n const { id, name } = type;\n const qs = this.generateQueryString(data.selectedGradeLevel, id)\n return {\n label: this.getLabelName(name),\n value: `${baseLink}${qs}`\n }\n });\n typeOptionsForDropdown.unshift({ label: 'All Packs', value: '/activities/packs' });\n\n const allPacksLink = (\n All Packs\n );\n\n const typeOptionsWidget = onMobile ? (\n \n {allPacksLink}\n {typeOptions}\n
\n )\n\n return (\n \n
\n this.selectView(option)}\n label=\"View\"\n options={viewOptions}\n value={currentView || viewOptions[0]}\n />\n
\n {typeOptionsWidget}\n
\n \n {this.generateUnitTemplateViews()}\n
\n \n {this.generateShowAllGradesView()}\n
\n \n )\n }\n if(value === LIST_VIEW_OPTION.value) {\n return(\n \n \n {this.generateShowAllGradesView()}\n
\n \n )\n }\n }\n\n render() {\n return (\n \n {this.userLoggedIn() ?
: null}\n
\n
\n
Select an activity pack for your students. \n
\n {this.renderFilterOptions()}\n {this.generateShowAllGradesView()}\n {this.renderActivityPacks()}\n
\n
\n
\n
\n \n {this.showUnitTemplates()}\n
\n \n );\n }\n}\n","import React from 'react'\n\nconst AssignActivitiesContainer = (props) => {props.children}
\n\nexport default AssignActivitiesContainer\n","import * as React from 'react';\n\nimport { Tooltip, pluralize, } from '../../../Shared/index'\n\nconst evidenceImgSrc = `${window.postbuildEnv.CDN_URL}/images/icons/s/tool-evidence.svg`\n\nconst assetLink = (link, name) => ({name} )\n\nconst CoursePageActivity = ({ activity, }) => {\n const { display_name, description, paired_oer_asset_name, paired_oer_asset_link, assigned_student_count, completed_student_count, link_for_report, average_score, preview_href, paired_ai_edu_activities, } = activity\n\n const renderPieChart = () => {\n const rawPercent = completed_student_count / assigned_student_count;\n const percent = rawPercent > 100 ? 100 : Math.round(rawPercent * 100) / 100;\n const largeArcFlag = percent > 0.5 ? 1 : 0;\n const pathData = `M 1 0 A 1 1 0 ${largeArcFlag} 1 ${Math.cos(2 * Math.PI * percent)} ${Math.sin(2 * Math.PI * percent)} L 0 0`;\n return (\n \n \n );\n }\n\n const renderPairedActivityLinks = (pairedActivities) => {\n const activityLinks = pairedActivities.map(({ name, link, }) => {\n return assetLink(link, name)\n })\n\n if (activityLinks.length === 1) {\n return activityLinks\n }\n\n activityLinks.splice(1, 0, ' and ')\n\n return activityLinks\n }\n\n let resultsSection = (\n \n View results}\n />\n
\n )\n\n if (link_for_report) {\n resultsSection = (\n \n
View results \n
{renderPieChart()} {completed_student_count} of {assigned_student_count} student{assigned_student_count === 1 ? '' : 's'} completed
\n {average_score !== null &&
Average score: {average_score}%
}\n
\n
\n
\n
{preview_href ? {display_name} : display_name} \n
{description}
\n {paired_oer_asset_link && paired_oer_asset_name && (\n
Optional Paired OER Project Activity: {assetLink(paired_oer_asset_link, paired_oer_asset_name)}
\n )}\n {paired_ai_edu_activities?.length && (\n
Optional Paired aiEDU {pluralize(paired_ai_edu_activities.length, 'Activity', 'Activities')}: {renderPairedActivityLinks(paired_ai_edu_activities)}
\n )}\n
\n {resultsSection}\n
{text} \n }\n\n return (\n {text}}\n />\n )\n}\n\nexport default QuillResourceLink\n","import * as React from 'react';\n\nimport CoursePageActivity from './course_page_activity'\nimport QuillResourceLink from './quill_resource_link'\n\nconst expandImgSrc = `${window.postbuildEnv.CDN_URL}/images/icons/s/expand.svg`\nconst collapseImgSrc = `${window.postbuildEnv.CDN_URL}/images/icons/s/collapse.svg`\n\nconst CoursePageUnitTemplate = ({ toggleUnitTemplateExpansion, unitTemplate, expandedUnitTemplateIds, }) => {\n const { display_name, activities, all_oer_articles, all_quill_articles_href, description, oer_unit_teacher_guide, oer_unit_website, oer_unit_number, quill_teacher_guide_href, unit_template_id, } = unitTemplate\n\n function handleClickToggle() {\n toggleUnitTemplateExpansion(unit_template_id)\n }\n\n const isExpanded = expandedUnitTemplateIds.includes(unit_template_id)\n\n let previewAndAssignButton = Coming Soon \n let expandOrCollapseButton\n\n if (unit_template_id) {\n previewAndAssignButton = Preview & Assign \n\n const expandOrCollapseButtonImageSrc = isExpanded ? collapseImgSrc : expandImgSrc\n const expandOrCollapseButtonAriaLabel = isExpanded ? `Collapse ${display_name} activities` : `Expand ${display_name} activities`\n\n expandOrCollapseButton = (\n \n \n
\n )\n\n activitiesSection = (\n \n
Activities \n {activities.map(activity => \n
OER Project Unit {oer_unit_number} Resources \n
\n
\n
aiEDU Aligned Resources \n
\n
\n \n
\n
{display_name} \n
\n {previewAndAssignButton}\n {expandOrCollapseButton}\n
\n
\n
{description}
\n {quillResourceLinks}\n
\n )\n}\n\nexport default CoursePageUnitTemplate\n","import * as React from 'react';\n\nimport CoursePageUnitTemplate from '../components/content_hubs/course_page_unit_template'\nimport { Spinner, } from '../../Shared/index'\nimport { requestGet, } from '../../../modules/request'\nimport { scrollToTop } from '../hooks/scrollToTop';\n\nconst CoursePage = ({ overviewSection, localStorageKey, contentPageLink, partnerSection, unitTemplatePath, }) => {\n const [unitTemplates, setUnitTemplates] = React.useState(null)\n const [expandedUnitTemplateIds, setExpandedUnitTemplateIds] = React.useState(window.localStorage.getItem(localStorageKey)?.split(',').map(id => Number(id)))\n\n scrollToTop()\n\n React.useEffect(() => {\n requestGet(unitTemplatePath,\n ({ unit_templates, }) => { setUnitTemplates(unit_templates) }\n )\n }, [])\n\n React.useEffect(() => {\n if (expandedUnitTemplateIds || !unitTemplates) { return }\n\n setExpandedUnitTemplateIds(unitTemplates.map(unitTemplate => unitTemplate.unit_template_id))\n }, [unitTemplates])\n\n React.useEffect(() => {\n if (!expandedUnitTemplateIds) { return }\n\n window.localStorage.setItem(localStorageKey, expandedUnitTemplateIds.join(','))\n }, [expandedUnitTemplateIds])\n\n function expandAllUnitTemplates() {\n setExpandedUnitTemplateIds(unitTemplates.map(ut => ut.unit_template_id))\n }\n\n function collapseAllUnitTemplates() {\n setExpandedUnitTemplateIds([])\n }\n\n function toggleUnitTemplateExpansion(unitTemplateId) {\n const newExpandedUnitTemplateIds = expandedUnitTemplateIds.includes(unitTemplateId) ? expandedUnitTemplateIds.filter(id => id !== unitTemplateId) : expandedUnitTemplateIds.concat(unitTemplateId)\n setExpandedUnitTemplateIds(newExpandedUnitTemplateIds)\n }\n\n if (!unitTemplates || !expandedUnitTemplateIds) {\n return (\n \n {contentPageLink}\n
\n )\n }\n\n const unitTemplateElements = unitTemplates?.map(unitTemplate => {\n return (\n \n\n {contentPageLink}\n\n {overviewSection}\n\n
\n
Reading for Evidence Activities \n
\n Expand all \n Collapse all \n
\n
\n\n {unitTemplateElements}\n\n {partnerSection}\n\n
\"A New and Accurat Map of the World Drawne according to ye truest Descriptions lastest Discoveries & best observations yt have beene made by English or Strangers.\" by John Speed (1552-1629), The Barry Lawrence Ruderman Map Collection , Stanford University is licensed under CC BY-NC-SA 4.0
'\n\nconst LOCAL_STORAGE_KEY = 'worldHistory1200ToPresentExpandedUnitTemplateIds'\n\nconst SLUG = 'world-history-1200-to-present'\n\nconst WorldHistory1200ToPresent = ({ backlinkPath, }) => {\n const contentPage = backlinkPath || window.location.href.split(SLUG)[0]\n const contentPageLink = \n
\n
World History: 1200 CE - Present \n
World history, or the story of our past, belongs to everyone: it helps us understand where we've come from, how we got here, and where we might go next. In this course, students explore that shared human story beginning with the rise of complex, connected societies and ending with the emergence of the globalized world in which we live today.
\n
Quill Reading for Evidence activities provide a deep dive into key moments and movements from the period spanning 1200 CE to the present, helping students expand their content knowledge while building core reading and writing skills.
\n
\n
\n
\n
\n
\n
\n
Paired with the OER Project for deeper learning \n
OER Project provides open educational resources to empower teachers to better serve their students through innovative curricula and teaching tools. Currently, OER Project offers three complete social studies courses: Big History Project (BHP), World History Project (WHP), and World History AP (WH AP). Each course includes primary and secondary source readings, videos, and learning activities, along with scaffolded supports like leveled texts. Learn more about OER Project’s World History Project .
\n
Learn More About Quill’s Social Studies Activities \n
\n {title} \n \n {blogPostAuthor && {`By ${blogPostAuthor}`}
}\n Read \n \n \n )\n }\n\n return(\n \n \n
Learn more with these Teacher Center articles \n
\n
\n
\n)\n\nexport default SubjectPageTeacherCenterArticles\n","import * as React from 'react';\n\nimport { EXTRA_LARGE_ICON_BASE_SRC, } from '../../../Shared/index'\n\nconst closeReadingSrc = `${EXTRA_LARGE_ICON_BASE_SRC}/search-document.svg`\nconst constructingClaimsSrc = `${EXTRA_LARGE_ICON_BASE_SRC}/research-books.svg`\nconst sentenceFundamentalsSrc = `${EXTRA_LARGE_ICON_BASE_SRC}/comment-document.svg`\n\nconst SubjectPageSummary = ({ paragraphCopy, }) => (\n \n \n
Build Content Knowledge & Writing Skills With Reading for Evidence \n
{paragraphCopy}
\n
\n
\n
\n
Close reading \n
Every activity begins with a structured highlighting task as an entry point to the text. Then, students read and reread up to ten times in the process of developing their responses.
\n
\n
\n
\n
Constructing evidence-based claims \n
Students receive custom feedback developed by real teachers to help them use what they have read to craft strong sentences.
\n
\n
\n
\n
Sentence fundamentals \n
Practice with conjunctions like because, but, and so provides students with a framework to combine sentences and express complex ideas effectively. Once they’ve clearly captured these ideas in their response, students receive grammar and spelling guidance too.
\n
\n
\n
\n)\n\nexport default SubjectPageSummary\n","import * as React from 'react';\nimport ReactMarkdown from 'react-markdown';\n\nimport QuestionsAndAnswers from './QuestionsAndAnswers'\n\nimport SubjectPageTeacherCenterArticles from '../components/content_hubs/subject_page_teacher_center_articles'\nimport SubjectPageSummary from '../components/content_hubs/subject_page_summary'\nimport { LARGE_ICON_BASE_SRC, } from '../../Shared/index'\n\nconst shipIconSrc = `${LARGE_ICON_BASE_SRC}/ship.svg`\nconst scrollIconSrc = `${LARGE_ICON_BASE_SRC}/scroll.svg`\n\nconst pageImgBaseSrc = `${window.postbuildEnv.CDN_URL}/images/pages/social_studies_subject_page`\n\nconst quillPlusOERProjectLogoSrc = `${pageImgBaseSrc}/quill-plus-oer-project-logo.svg`\n\nconst WORLD_HISTORY_1200_TO_PRESENT_LINK = `${window.location.pathname}/world-history-1200-to-present`.replace('//', '/')\n\nconst overview = (\n \n \n
Social Studies \n
Quill Social Studies activities allow teachers to give students the literacy instruction they need while covering core course content. In these Reading for Evidence activities, students read course-aligned texts, use what they’ve read to draft evidence-based claims, and receive AI-powered feedback to strengthen their writing. Process and growth are key: our responsive coaching guides students to revise until their sentences are clear, logical, and grounded in specific details from the text.
\n
\n
\n
\n
\n
\n
World History \n 1750 CE - Present \n \n
Coming soon! \n
\n
\n
\n)\n\nconst summary = (\n \n \n
What Are Social Studies Teachers Saying? \n
\n
\n
“Quill has been helpful in giving them a toolkit to make arguments [and] to identify and test claims.”
\n
\n Rachel R. \n State Fine Arts High School \n Modern World History \n
\n
\n
\n
“They're learning content that I would probably not have time to teach them. They are practicing skills that, honestly, they all need more practice on every day.”
\n
\n Amber L. \n Glasgow School District \n
\n
\n
\n
“I would say that the combination of using the OER curriculum and Quill has pushed them in their reading stamina and level.”
\n
\n Tricia C. \n Latexo High School \n 9th Grade World History \n
\n
\n
\n
\n)\n\nconst partners = (\n \n Quill has partnered with OER Project to curate open educational resources from their site that work well with Quill social studies content. On the course landing page, each Reading for Evidence activity includes a suggested paired OER Project leveled text (ranging from 600L to 1500L). These texts can be used to preview new content, reinforce prior knowledge, provide additional historical context, or, when used in conjunction with the Quill activity, serve as part of a text set to support extended writing practice. Whether used on their own or as part of the full OER Project curriculum, these resources are a valuable addition to any high school world history classroom.
\n \n)\n\nconst tryItOutForYourself = (\n \n \n
Try it out for yourself \n
\n
\n)\n\nconst SocialStudiesSubjectPage = ({}) => {\n return (\n \n {overview}\n {summary}\n {teacherQuotes}\n {partners}\n
\n )\n}\n\nexport default SocialStudiesSubjectPage\n","import * as React from 'react';\n\nimport SocialStudiesSubjectPage from '../../../containers/SocialStudiesSubjectPage';\nimport AssignmentFlowNavigation from '../assignment_flow_navigation';\n\nconst AssignSocialStudiesSubjectPage = () => {\n return (\n \n )\n}\n\nexport default AssignSocialStudiesSubjectPage\n","import * as React from 'react';\n\nimport CoursePage from './CoursePage'\nimport { Tooltip, } from '../../Shared/index'\n\nconst chevronLeftImgSrc = `${window.postbuildEnv.CDN_URL}/images/icons/xs/chevron-left.svg`\nconst headerImgSrc = `${window.postbuildEnv.CDN_URL}/images/pages/content_hub/building_ai_knowledge@2x.png`\n\nconst imageCreditTooltipText = '\"DALL-E 3 - advanced artificial intelligence\" by Alenoach is in the Public Domain
'\n\nconst LOCAL_STORAGE_KEY = 'buildingAIKnowledgeExpandedUnitTemplateIds'\n\nconst SLUG = 'building-ai-knowledge'\n\nconst BuildingAIKnowledge = ({ backlinkPath, }) => {\n const contentPage = backlinkPath || window.location.href.split(SLUG)[0]\n const contentPageLink = \n
\n
Building AI Knowledge \n
In recent years, significant advancements have been made in artificial intelligence, and now it's expected to play an integral part in everyday life in the near future. Quill's Building AI Knowledge activities aim to provide teachers and students with an understanding of how AI works and to explain what skills and knowledge are needed to thrive in an AI-driven world.
\n
Quill Reading for Evidence activities are designed to engage students in learning about AI by exploring how it might impact their lives and the world around them. Students read a mix of stories that explore both the potential promises and pitfalls of AI. One of the main goals of this offering is to show students that AI is not just something that exists in the world; it is something that humans create. The young people reading these articles will have the opportunity to shape the future of AI, either by working with technology directly or by being informed citizens who influence laws.
\n
\n
\n
\n
\n
\n
\n
Paired with aiEDU for deeper learning \n
Quill.org & aiEDU, two nonprofit organizations dedicated to building foundational AI literacy, have partnered to curate a suite of resources from each organization that can be paired together to build student knowledge of AI. Each Quill activity can be paired with an aiEDU activity, which range from in-depth, 2-3 hour activities to 5-minute snapshot discussion items. Want to learn more? Visit www.aiedu.org !
\n
Learn more about Quill's interdisciplinary science activities \n
\n \n
Interdisciplinary Science \n
Over the next few years, Quill will building out Reading for Evidence activities aligned to high school science classrooms. Our first offering, Building AI Knowledge, features activities that introduce students to how AI will impact society over the next decade. In the future, we will build offerings around biology, earth sciences, and other science topics.
\n
\n
\n)\n\nconst summary = (\n \n Quill has partnered with aiEDU to curate activities from their site that work well with Quill Building AI Knowledge activities. On the course landing page, each Reading for Evidence activity includes a suggested paired aiEDU activity, which range from 5-minute warm-up activities to 3-4 hour student-led activities. These activities can be used to preview new content, reinforce prior knowledge, provide additional context, or, when used in conjunction with the Quill activity, serve as part of a text set to support extended writing practice. Whether used on their own or in conjunction with aiEDU activities, these resources are a valuable addition to any high school ELA or Computer Science classroom.
\n \n)\n\nconst tryItOutForYourself = (\n \n \n
Try it out for yourself \n
\n
\n)\n\nconst InterdisciplinaryScienceSubjectPage = ({}) => {\n return (\n \n {overview}\n {summary}\n {partners}\n
\n )\n}\n\nexport default InterdisciplinaryScienceSubjectPage\n","import * as React from 'react';\n\nimport InterdisciplinaryScienceSubjectPage from '../../../containers/InterdisciplinaryScienceSubjectPage';\nimport AssignmentFlowNavigation from '../assignment_flow_navigation';\n\nconst AssignInterdisciplinaryScienceSubjectPage = () => {\n return (\n \n )\n}\n\nexport default AssignInterdisciplinaryScienceSubjectPage\n","import React from 'react';\nimport { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';\nimport { CompatRouter } from \"react-router-dom-v5-compat\";\n\nimport ActivityType from '../components/assignment_flow/create_unit/activity_type.tsx';\nimport AssignADiagnostic from '../components/assignment_flow/create_unit/assign_a_diagnostic.tsx';\nimport AssignANewActivity from '../components/assignment_flow/create_unit/assign_a_new_activity';\nimport AssignAp from '../components/assignment_flow/create_unit/assign_ap.tsx';\nimport AssignPreAp from '../components/assignment_flow/create_unit/assign_pre_ap.tsx';\nimport AssignSpringBoard from '../components/assignment_flow/create_unit/assign_springboard.tsx';\nimport CollegeBoard from '../components/assignment_flow/create_unit/college_board.tsx';\nimport CreateUnit from '../components/assignment_flow/create_unit/create_unit';\nimport UnitTemplateAssigned from '../components/assignment_flow/unit_template_assigned';\nimport UnitTemplateProfile from '../components/assignment_flow/unit_templates_manager/unit_template_profile/unit_template_profile.tsx';\nimport UnitTemplatesManager from '../components/assignment_flow/unit_templates_manager/unit_templates_manager';\nimport AssignActivitiesContainer from './AssignActivitiesContainer.jsx';\nimport AssignWorldHistory1200ToPresent from '../components/assignment_flow/create_unit/assign_world_history_1200_to_present.tsx';\nimport AssignSocialStudiesSubjectPage from '../components/assignment_flow/create_unit/assign_social_studies_subject_page.tsx';\nimport AssignBuildingAIKnowledge from '../components/assignment_flow/create_unit/assign_building_ai_knowledge.tsx';\nimport AssignInterdisciplinaryScienceSubjectPage from '../components/assignment_flow/create_unit/assign_interdisciplinary_science_subject_page.tsx';\n\nconst AssignActivitiesRouter = props => (\n \n \n \n \n \n \n);\n\nexport default AssignActivitiesRouter\n","import React from 'react';\nimport AssignActivitiesRouter from '../containers/AssignActivitiesRouter';\n\nexport default (props) => (\n \n
This article is only for Premium users. \n
Quill Premium users have access to a slew of awesome features, including premium reports, priority support, and enhanced professional development opportunities.
\n
Try Quill Premium \n
By {author.name}
: null\n };\n\n render() {\n const { centerImages, title, updatedAt, } = this.props\n const className = centerImages ? 'center-images' : ''\n return(\n \n
\n
\n {this.renderBodyOrPaywall()}\n \n
\n {this.selectRatingEmoji(0)}} type=\"button\">😞 {this.selectRatingEmoji(1)}} type=\"button\">😐 {this.selectRatingEmoji(2)}} type=\"button\">😃 \n )\n }\n }\n\n render() {\n const { ratingMessage, } = this.state\n const { author, blogPost, displayPaywall, } = this.props\n\n return (\n \n
\n \n {ratingMessage}
\n {this.renderRatingEmoji()}\n \n \n
\n
\n
\n Teacher Center Articles \n Show more \n \n
\n {this.renderRelatedPosts()}\n
\n
\n
\n
\n \n
{this.displayTitle()} \n
\n
{articleCount} {pluralize('article', articleCount)} \n {!onSearchPage &&
Show all }\n
\n
\n {this.renderArticleCards()}\n
\n \n )\n }\n}\n","import pluralize from 'pluralize';\nimport * as React from 'react';\nimport _ from 'underscore';\n\nimport {\n ALL,\n BEST_PRACTICES,\n BLOG_POST_TO_COLOR,\n GETTING_STARTED,\n SEARCH,\n STUDENT,\n STUDENT_CENTER,\n STUDENT_CENTER_SLUG,\n SUPPORT,\n TEACHER_CENTER,\n TEACHER_CENTER_SLUG,\n TEACHER_MATERIALS,\n TEACHER_STORIES,\n TOPIC,\n WRITING_FOR_LEARNING,\n VIDEO_TUTORIALS,\n WEBINARS,\n WHATS_NEW,\n WRITING_INSTRUCTION_RESEARCH,\n} from './blog_post_constants';\nimport HeaderSection from './header_section';\nimport TopicSection from './topic_section.jsx';\n\nimport PreviewCard from '../shared/preview_card.jsx';\n\nexport default class BlogPostIndex extends React.Component {\n constructor(props) {\n super(props);\n\n const { blogPosts, } = props\n\n this.state = {\n articleFilter: window.location.pathname.includes(TOPIC) || props.query ? ALL : TOPIC,\n loading: true,\n blogPostsSortedByMostRead: [...blogPosts].sort((a, b) => (a.read_count < b.read_count) ? 1 : ((b.read_count < a.read_count) ? -1 : 0))\n };\n }\n\n filterArticlesBy(filter) {\n this.setState({ articleFilter: filter });\n }\n\n pageSubtitle() {\n const { role, } = this.props\n if (role === STUDENT) {\n return 'Everything you need to know about using Quill'\n }\n\n switch (this.pageTitle()) {\n case TEACHER_STORIES:\n return 'Read success stories about Quill in the classroom'\n case GETTING_STARTED:\n return 'Set up your classroom on Quill with guides, videos, and presentations'\n case WRITING_INSTRUCTION_RESEARCH:\n return \"Learn about the research behind Quill's methods and pedagogy\"\n case SUPPORT:\n return 'The most common questions teachers ask about Quill'\n case WEBINARS:\n return \"Watch Quill's recorded professional development sessions to learn Quill's implementation best practices\"\n case VIDEO_TUTORIALS:\n return \"View detailed walkthroughs of Quill tools, set-up, and features\"\n case BEST_PRACTICES:\n return \"Explore implementation ideas from Quill's instructional experts\"\n case WHATS_NEW:\n return 'Stay up to date on the latest Quill news'\n case TEACHER_MATERIALS:\n return 'Read and download useful materials to help navigate Quill, support students, and teach writing'\n case WRITING_FOR_LEARNING:\n return \"Learn about using Quill to simultaneously strengthen students' content knowledge and writing skills\"\n case TEACHER_CENTER:\n default:\n return \"Everything you need to know about Quill's pedagogy and use in the classroom\"\n }\n }\n\n pageTitle() {\n const { role, title, } = this.props\n if (window.location.pathname.includes(TOPIC)) {\n const topicTitle = title\n return role === STUDENT ? topicTitle.replace('Student ', '') : topicTitle\n } else if (role === STUDENT) {\n return STUDENT_CENTER\n } else {\n return TEACHER_CENTER\n }\n }\n\n currentPageIsSearchPage = () => window.location.pathname.includes(SEARCH);\n\n renderAnnouncement() {\n const { announcement, } = this.props\n\n if(announcement) {\n return (\n \n
\n {announcement.text}
\n \n )\n }\n }\n\n renderBasedOnArticleFilter() {\n const { articleFilter, } = this.state\n const { blogPosts,} = this.props\n\n let response;\n if (blogPosts.length === 0) {\n response = No results found. \n } else if (articleFilter === TOPIC || this.currentPageIsSearchPage()) {\n response = this.renderPreviewCardsByTopic();\n } else if (articleFilter === 'popularity') {\n response = (\n \n {this.renderPreviewCardsByPopularity()}\n
\n )\n } else {\n response = (\n \n {this.renderPreviewCards()}\n
\n )\n }\n return {response} \n }\n\n renderMostReadPost() {\n const { blogPostsSortedByMostRead, } = this.state\n const mostReadArticle = blogPostsSortedByMostRead[0];\n if (window.location.pathname.includes(SEARCH)) { return null; }\n const link = mostReadArticle.external_link ? mostReadArticle.external_link : `/teacher-center/${mostReadArticle.slug}`\n return (\n \n )\n }\n\n renderNavAndSectionHeader() {\n const { blogPosts, } = this.props\n if (this.currentPageIsSearchPage()) {\n return (\n \n \n
Search results \n {blogPosts.length} {pluralize('article', blogPosts.length)} \n \n \n )\n }\n\n return a.order_number - b.order_number)}\n color={BLOG_POST_TO_COLOR[topic.name]}\n key={topic.name}\n onSearchPage={this.currentPageIsSearchPage()}\n role={role}\n slug={topic.slug}\n title={topic.name}\n />\n );\n }\n })\n return sections;\n }\n\n render() {\n const { blogPosts, query, } = this.props\n if (blogPosts.length === 0 && !query) {\n return (\n \n
\n Coming Soon!\n
\n
\n
\n
\n )};\n }\n}\n","import moment from 'moment';\nimport * as React from 'react';\n\nexport const tableHeaders = [\n {\n name: 'Featured',\n attribute: 'featured',\n width: '50px',\n rowSectionClassName: 'featured-section',\n noTooltip: true\n },\n {\n name: 'Title',\n attribute: 'title',\n width: '400px',\n },\n {\n name: 'Created',\n attribute: 'createdAt',\n width: '60px',\n },\n {\n name: 'Updated',\n attribute: 'updatedAt',\n width: '60px',\n },\n {\n name: 'Rating',\n attribute: 'rating',\n width: '50px',\n rowSectionClassName: 'left-align'\n },\n {\n name: 'Views',\n attribute: 'views',\n width: '50px',\n rowSectionClassName: 'left-align'\n },\n {\n name: 'Actions',\n attribute: 'actions',\n width: '296px',\n rowSectionClassName: 'actions-section',\n noTooltip: true\n },\n]\n\nconst featuredCellContent = ({ featuredOrderNumber, featuredBlogPostLimitReached, handleClickStar, draft, }) => {\n if (draft) { return 'DRAFT' }\n if (featuredBlogPostLimitReached && featuredOrderNumber === null) { return {star} \n}\n\nexport const blogPostRows = (blogPosts, handleClickStar, featuredBlogPostLimitReached) => {\n return blogPosts.map(blogPost => {\n const { created_at, id, external_link, slug, rating, title, updated_at, read_count, draft, featured_order_number, } = blogPost\n\n function onClickStar() { handleClickStar(id) }\n const blogPostRow = {\n createdAt: moment(created_at).format('MM/DD/YY'),\n updatedAt: moment(updated_at).format('MM/DD/YY'),\n id,\n rating,\n title,\n views: read_count,\n actions: (\n \n Edit \n Preview \n Delete \n \n ),\n featured: featuredCellContent({ featuredOrderNumber: featured_order_number, featuredBlogPostLimitReached, handleClickStar: onClickStar, draft, })\n }\n return blogPostRow\n })\n}\n\nexport const saveOrderButton = (orderHasChanged, saveOrder) => {\n let button = (Save Order )\n\n if (orderHasChanged) {\n button = (Save Order )\n }\n\n return button\n}\n","import * as React from 'react';\n\nimport { blogPostRows, saveOrderButton, tableHeaders, } from './shared';\n\nimport { DataTable, } from '../../../../Shared/index';\n\nconst BlogPostTable = ({\n blogPosts,\n handleClickStar,\n updateOrder,\n featuredBlogPostLimitReached,\n saveOrder,\n topic,\n}) => {\n const [orderHasChanged, setOrderHasChanged] = React.useState(false)\n\n function orderBlogPosts() {\n return blogPosts.sort((bp1, bp2) => bp1.order_number - bp2.order_number)\n }\n\n function handleOrderChange(sortInfo) {\n setOrderHasChanged(true)\n updateOrder(sortInfo)\n }\n\n function handleSaveOrderClick() { saveOrder(topic, orderBlogPosts())}\n\n const rows = blogPostRows(orderBlogPosts(), handleClickStar, featuredBlogPostLimitReached)\n\n return (\n \n \n
{topic} \n {saveOrderButton(orderHasChanged, handleSaveOrderClick)}\n \n \n )\n}\n\nexport default BlogPostTable\n","import moment from 'moment';\nimport * as React from 'react';\nimport { SingleDatePicker } from 'react-dates';\nimport \"react-dates/initialize\";\nimport Dropzone from 'react-dropzone';\nimport Textarea from 'react-textarea-autosize';\n\nimport { requestPost, requestPut, } from '../../../../../modules/request/index';\nimport { smallWhiteCheckIcon } from '../../../../Shared/index';\nimport { BLOG_POST_TO_COLOR, } from '../../blog_posts/blog_post_constants';\nimport BlogPostContent from '../../blog_posts/blog_post_content';\nimport ItemDropdown from '../../general_components/dropdown_selectors/item_dropdown.jsx';\nimport getAuthToken from '../../modules/get_auth_token';\nimport PreviewCard from '../../shared/preview_card.jsx';\n\nconst defaultPreviewCardContent = `\n
Party Parrot Parade \n
There exist many excellent party parrots.
\n
VIDEO ')\n\n handleInsertH1 = () => this.insertMarkdown('# ')\n\n handleInsertH2 = () => this.insertMarkdown('## ')\n\n handleInsertH3 = () => this.insertMarkdown('### ')\n\n handleInsertItalic = () => this.insertMarkdown('*', '*')\n\n handleInsertLink = () => this.insertMarkdown('[', '](http://samepicofdavecoulier.tumblr.com)')\n\n handleInsertOrderedList = () => this.insertMarkdown('1. ')\n\n handleInsertPrimaryButton = () => this.insertMarkdown(\"\\n\", \"\\n \")\n\n handleInsertQuote = () => this.insertMarkdown('> ')\n\n handleInsertSecondaryButton = () => this.insertMarkdown(\"\\n\", \"\\n \")\n\n handleInsertUnorderedList = () => this.insertMarkdown('* ')\n\n handlePremiumChange = () => {\n this.setState(prevState => ({premium: !prevState.premium}));\n }\n\n handlePressNameChange = (e) => {\n this.setState({ pressName: e.target.value })\n }\n\n handlePreviewCardVideoDescriptionChange = (e) => {\n this.setState({videoDescription: e.target.value}, this.updatePreviewCardVideoContent)\n }\n\n handlePreviewCardVideoLinkChange = (e) => {\n this.setState({videoLink: e.target.value}, this.updatePreviewCardVideoContent)\n }\n\n handlePublishClick = (e) => this.handleSubmitClick(e, true)\n\n handlePublishedAtChange = (e) => {\n this.setState({ publishedAt: e}, this.updatePreviewCardBasedOnType)\n }\n\n handleSaveAndPreviewClick = (e) => {\n const { draft, } = this.state\n this.handleSubmitClick(e, !draft, false, this.goToPreview)\n }\n\n handleSaveDraftClick = (e) => { this.handleSubmitClick(e, false) }\n\n handleSubmitClick = (e, shouldPublish, unpublish = false, callback) => {\n const { action, postToEdit, } = this.props\n const {\n title,\n subtitle,\n imageLink,\n body,\n topic,\n author_id,\n preview_card_content,\n premium,\n publishedAt,\n externalLink,\n centerImages,\n pressName,\n footerContent\n } = this.state\n\n e.preventDefault()\n\n if (unpublish && window.prompt('To unpublish this post, please type UNPUBLISH.') !== 'UNPUBLISH') { return }\n let requestAction\n let url = `${window.postbuildEnv.DEFAULT_URL}/cms/blog_posts/`\n\n const blogPost = {\n blog_post: {\n title: title,\n subtitle: subtitle,\n image_link: imageLink,\n body: body,\n topic: topic,\n author_id: author_id,\n preview_card_content: preview_card_content,\n draft: !shouldPublish,\n premium: premium,\n published_at: publishedAt ? new Date(publishedAt) : null,\n external_link: externalLink,\n center_images: centerImages,\n press_name: pressName,\n footer_content: footerContent\n }\n }\n\n if (action === NEW && !unpublish) {\n requestPost(\n url,\n blogPost,\n (body) => {\n alert('Post added successfully!');\n window.location.href = (`/cms/blog_posts/${body.id}/edit`)\n callback ? callback() : null\n },\n (body) => {\n alert(\"😨 Rut roh. Something went wrong! (Don't worry, it's probably not your fault.)\");\n callback ? callback() : null\n }\n )\n } else {\n url += postToEdit.id\n requestPut(\n url,\n blogPost,\n (body) => {\n this.setState({draft: body.draft})\n alert('Update successful!');\n callback ? callback() : null\n },\n (body) => {\n alert(\"😨 Rut roh. Something went wrong! (Don't worry, it's probably not your fault.)\");\n callback ? callback() : null\n }\n )\n }\n }\n\n handleSubtitleChange = (e) => {\n const { value, } = e.target;\n const { previewCardHasAlreadyBeenManuallyEdited, } = this.state\n let state = {subtitle: value};\n if(!previewCardHasAlreadyBeenManuallyEdited) {\n state['blogPostPreviewDescription'] = value;\n }\n this.setState(state, () => {\n if(!previewCardHasAlreadyBeenManuallyEdited) {\n this.updatePreviewCardFromBlogPostPreview();\n }\n });\n }\n\n handleTitleChange = (e) => {\n const { value, } = e.target;\n const { previewCardHasAlreadyBeenManuallyEdited, } = this.state\n let state = { title: value };\n if(!previewCardHasAlreadyBeenManuallyEdited) {\n state['blogPostPreviewTitle'] = value;\n }\n this.setState(state, () => {\n if(!previewCardHasAlreadyBeenManuallyEdited) {\n this.updatePreviewCardFromBlogPostPreview();\n }\n });\n }\n\n handleTweetAuthorChange = (e) => {\n this.setState({ tweetAuthor: e.target.value }, this.updatePreviewCardTweetContent)\n }\n\n handleTweetImageChange = (e) => {\n this.setState({ tweetImage: e.target.value }, this.updatePreviewCardTweetContent)\n }\n\n handleTweetLinkChange = (e) => {\n this.setState({ tweetLink: e.target.value }, this.updatePreviewCardTweetContent)\n }\n\n handleTweetTextChange = (e) => {\n this.setState({ tweetText: e.target.value }, this.updatePreviewCardTweetContent)\n }\n\n handleUnpublishClick = (e) => { this.handleSubmitClick(e, false, true) }\n\n insertMarkdown = (startChar, endChar = null) => {\n /*\n TODO:\n - Special behaviors:\n - startChars should automatically be placed at the front of the line\n - if multiple lines are highlighted, we should insert startChar at beginning of each line\n - Extract this and the buttons into a separate component\n */\n const { body, } = this.state\n const container = document.getElementById('markdown-content');\n let newValue = body;\n if (container.selectionStart || container.selectionStart === 0) {\n let startPos = container.selectionStart;\n let endPos = container.selectionEnd;\n newValue = container.value.substring(0, startPos);\n newValue += startChar;\n newValue += container.value.substring(startPos, endPos);\n newValue += endChar ? endChar : '';\n newValue += container.value.substring(endPos, container.value.length);\n container.focus();\n } else {\n newValue += startChar;\n }\n this.setState({ body: newValue });\n }\n\n updatePreviewCardBasedOnType = () => {\n const { preview_card_type, custom_preview_card_content, } = this.state\n switch (preview_card_type) {\n case STANDARD:\n this.updatePreviewCardFromBlogPostPreview()\n break;\n default:\n this.setState({ preview_card_content: custom_preview_card_content })\n }\n }\n\n updatePreviewCardFromBlogPostPreview = () => {\n const { authors, } = this.props\n const {\n publishedAt,\n externalLink,\n blogPostPreviewImage,\n blogPostPreviewTitle,\n blogPostPreviewDescription,\n author_id,\n } = this.state\n const author = authors.find(a => a.id == author_id)\n let footerContent, button\n if (author) {\n footerContent = `by ${author.name}
`\n } else if (publishedAt) {\n footerContent = `${this.formatDate(new Date(publishedAt))}
`\n } else {\n footerContent = `\n
${blogPostPreviewTitle} \n
${blogPostPreviewDescription}
\n
by ${author.name}
`\n } else if (publishedAt) {\n footerContent = `${this.formatDate(new Date(publishedAt))}
`\n } else {\n footerContent = `\n
${tweetText}
\n
@${tweetAuthor}
\n
by ${author.name}
`\n } else if (publishedAt) {\n footerContent = `${this.formatDate(new Date(publishedAt))}
`\n } else {\n footerContent = `\n \n
\n \n `;\n this.setState({ preview_card_content: previewCardContent, previewCardHasAlreadyBeenManuallyEdited: true })\n }\n\n formatDate(date) {\n const options = { year: 'numeric', month: 'long', day: '2-digit' };\n const dateTimeFormat = new Intl.DateTimeFormat('en-US', options);\n return dateTimeFormat.format(date)\n }\n\n renderArticleMarkdownOrPreview = () => {\n const { publishedAt, showArticlePreview, body, centerImages, author_id, title, } = this.state\n const { postToEdit, authors, } = this.props\n let content, toolbarLeft, dateDisplayed\n if (publishedAt) {\n dateDisplayed = publishedAt\n } else if (postToEdit) {\n dateDisplayed = postToEdit.updated_at\n } else {\n dateDisplayed = new Date()\n }\n if (showArticlePreview) {\n toolbarLeft =
\n content = (\n
\n a.id == author_id)}\n body={body}\n centerImages={centerImages}\n displayPaywall={false}\n title={title}\n updatedAt={dateDisplayed}\n />\n \n
\n H1 \n H2 \n H3 \n
)\n content = \n }\n return (\n \n
\n
\n {toolbarLeft}\n
\n Edit \n Preview \n
\n
\n {content}\n
\n
\n Published At Date: \n
\n )\n }\n\n renderPreviewCardContentFields = () => {\n const {\n preview_card_type,\n blogPostPreviewImage,\n blogPostPreviewTitle,\n blogPostPreviewDescription,\n custom_preview_card_content,\n tweetLink,\n tweetImage,\n tweetText,\n tweetAuthor,\n videoLink,\n videoDescription\n } = this.state\n let contentFields;\n if ([STANDARD].includes(preview_card_type)) {\n contentFields = [\n Title: ,\n Description: (Please, choose the juiciest quote from the article that makes you want to read it and you should aim for 200 characters for the card description., for example: "I put jazz on and my kids work on Quill.") ,\n Custom HTML: ,\n ,\n If no author is supposed to show, please delete "<p class=author>" through the next "</p>". \n ]\n }\n\n return ({contentFields}
)\n }\n\n renderPreviewCardTypeDropdown = () => {\n const { preview_card_type, } = this.state\n return (\n \n Preview Card Template: \n
\n )\n }\n\n renderSaveAndPreviewButton = () => {\n const { action, } = this.props\n\n if (action === EDIT) {\n return \n )\n }\n\n return (\n \n {checkbox}\n Show only to Premium Members \n
\n )\n }\n\n renderCenterImagesCheckbox = () => {\n const { centerImages, } = this.state\n let checkbox = \n )\n }\n\n return (\n \n {checkbox}\n Center Images \n
\n )\n }\n\n render = () => {\n const { topics, studentTopics, authors, } = this.props\n const {\n title,\n subtitle,\n imageLink,\n pressName,\n author_id,\n topic,\n externalLink,\n uploadedMediaLink,\n preview_card_content,\n footerContent\n } = this.state\n const nullAuthor = {id: null, name: 'None'}\n const allTopics = topics.concat(studentTopics)\n return (\n \n )\n }\n}\n\nCreateOrEditBlogPost.defaultProps = {\n postToEdit: {\n id: null,\n subtitle: '',\n image_link: '',\n body: '',\n author_id: 11 /* Quill Staff */,\n topic: 'Webinars',\n draft: true,\n slug: true,\n preview_card_content: defaultPreviewCardContent,\n title: 'Write Your Title Here',\n premium: false,\n press_name: null,\n published_at: null,\n external_link: null,\n center_images: false\n }\n}\n","import * as React from 'react';\n\nimport { blogPostRows, saveOrderButton, tableHeaders, } from './shared';\n\nimport { DataTable, } from '../../../../Shared/index';\n\nconst FeaturedBlogPosts = ({\n featuredBlogPosts,\n handleClickStar,\n updateOrder,\n saveOrder,\n}) => {\n const [orderHasChanged, setOrderHasChanged] = React.useState(false)\n\n function handleOrderChange(sortInfo) {\n setOrderHasChanged(true)\n updateOrder(sortInfo)\n }\n\n const rows = blogPostRows(featuredBlogPosts.sort((bp1, bp2) => bp1.featured_order_number - bp2.featured_order_number), handleClickStar, false)\n\n return (\n \n \n
Featured \n {saveOrderButton(orderHasChanged, saveOrder)}\n \n \n
Posts that display in the overview page of the teacher dashboard
\n
Drag and drop to rearrange featured posts
\n
Un-star a post to add a new featured post
\n
\n )\n}\n\nexport default FeaturedBlogPosts\n","import React from 'react';\n\nimport BlogPost from '../components/blog_posts/blog_post';\nimport BlogPostIndex from '../components/blog_posts/blog_post_index';\nimport BlogPostTable from '../components/cms/blog_posts/blog_post_table';\nimport CreateOrEditBlogPost from '../components/cms/blog_posts/create_or_edit_blog_post';\nimport FeaturedBlogPosts from '../components/cms/blog_posts/featured_blog_posts.tsx';\nimport getAuthToken from '../components/modules/get_auth_token';\n\nconst FEATURED_BLOG_POST_LIMIT = 5\n\nexport default class BlogPosts extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = { blogPosts: props.blogPosts, }\n }\n\n confirmDelete(e) {\n if(window.prompt('To delete this post, please type DELETE.') !== 'DELETE') {\n e.preventDefault();\n }\n }\n\n featuredBlogPosts = () => {\n const { blogPosts, } = this.state\n return blogPosts.filter(bp => bp.featured_order_number !== null)\n }\n\n saveOrder = (topic, blogPosts, ) => {\n const link = `${window.postbuildEnv.DEFAULT_URL}/cms/blog_posts/update_order_numbers`\n const data = new FormData();\n data.append( \"blog_posts\", JSON.stringify(blogPosts) );\n fetch(link, {\n method: 'PUT',\n mode: 'cors',\n credentials: 'include',\n body: data,\n headers: {\n 'X-CSRF-Token': getAuthToken()\n }\n }).then((response) => {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response.json();\n }).then((response) => {\n alert(`Order for ${topic} blog posts has been saved.`)\n }).catch((error) => {\n // to do, use Sentry to capture error\n })\n };\n\n saveFeaturedOrder = () => {\n const link = `${window.postbuildEnv.DEFAULT_URL}/cms/blog_posts/update_featured_order_numbers`\n const data = new FormData();\n data.append( \"blog_posts\", JSON.stringify(this.featuredBlogPosts()) );\n fetch(link, {\n method: 'PUT',\n mode: 'cors',\n credentials: 'include',\n body: data,\n headers: {\n 'X-CSRF-Token': getAuthToken()\n }\n }).then((response) => {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response.json();\n }).then((response) => {\n alert(`Order for featured blog posts has been saved.`)\n }).catch((error) => {\n // to do, use Sentry to capture error\n })\n };\n\n updateOrderNumber = (sortInfo) => this.updateOrder(sortInfo, 'order_number')\n\n updateFeaturedOrderNumber = (sortInfo) => this.updateOrder(sortInfo, 'featured_order_number')\n\n updateOrder = (sortInfo, orderAttribute) => {\n const { blogPosts, } = this.state\n const newOrder = sortInfo.map(item => item.key);\n const newOrderedBlogPosts = blogPosts.map((bp, i) => {\n const newBlogPost = bp\n const newIndex = newOrder.findIndex(key => Number(key) === Number(bp.id))\n if (newIndex !== -1) {\n newBlogPost[orderAttribute] = newIndex\n }\n return newBlogPost\n })\n this.setState({blogPosts: newOrderedBlogPosts});\n };\n\n onClickStar = (blogPostId) => {\n const { blogPosts, } = this.state\n const blogPost = blogPosts.find(bp => bp.id === blogPostId)\n const featuredOrderNumber = blogPost.featured_order_number === null ? this.featuredBlogPosts().length : null\n const link = `${window.postbuildEnv.DEFAULT_URL}/cms/blog_posts/${blogPostId}`\n const data = { blog_post: { featured_order_number: featuredOrderNumber, } }\n fetch(link, {\n method: 'PUT',\n mode: 'cors',\n credentials: 'include',\n body: JSON.stringify(data),\n headers: {\n 'X-CSRF-Token': getAuthToken(),\n 'Content-Type': 'application/json'\n }\n }).then((response) => {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response.json();\n }).then((response) => {\n const indexOfUpdatedBlogpost = blogPosts.findIndex(bp => bp.id === response.id)\n blogPosts[indexOfUpdatedBlogpost].featured_order_number = response.featured_order_number\n this.setState({ blogPosts, })\n }).catch((error) => {\n // to do, use Sentry to capture error\n })\n }\n\n renderBlogPostsByTopic = () => {\n const { topics, studentTopics, } = this.props\n const { blogPosts, } = this.state\n const allTopics = topics.concat(studentTopics)\n const tables = allTopics.map(t => {\n const filteredBlogPosts = blogPosts.filter(bp => bp.topic === t)\n if (filteredBlogPosts.length > 0) {\n return (\n = FEATURED_BLOG_POST_LIMIT}\n handleClickStar={this.onClickStar}\n saveOrder={this.saveOrder}\n topic={t}\n updateOrder={this.updateOrderNumber}\n />\n )\n }\n }\n )\n return tables\n };\n\n render() {\n const { action, route, } = this.props\n if (['new', 'edit'].includes(action)) {\n return \n
\n
\n {this.renderBlogPostsByTopic()}\n
\n
\n {searchByActivityPack &&
}\n {!searchByActivityPack &&
}\n
\n {diagnosticsDropdown()}\n
New \n
Concept}\n tooltipTriggerTextStyle={{ maxWidth: conceptMaxWidth }}\n />\n );\n\n const dataTableFields = [\n { name: \"Name\", attribute:\"name\", width: \"264px\", rowSectionClassName: 'tabbable-field', noTooltip: true },\n { name: \"Flag\", attribute:\"flag\", width: \"80px\", noTooltip: true },\n { name: \"Readability\", attribute:\"readability\", width: \"64px\", noTooltip: true },\n { name: \"CCSS\", attribute:\"ccss\", width: readabilityMaxWidth, rowSectionClassName: 'tooltip-section ccss-section' },\n { name: conceptHeaderElement, attribute:\"concept\", width: conceptMaxWidth, noTooltip: true },\n { name: \"Tool\", attribute:\"tool\", width: \"88px\", noTooltip: true },\n { name: \"\", attribute:\"edit\", width: \"88px\", rowSectionClassName: 'tabbable-field', noTooltip: true },\n { name: \"\", attribute:\"remove\", width: \"88px\", rowSectionClassName: 'tabbable-field', noTooltip: true },\n ];\n\n function showStandardData(standard) {\n if(!standard || standard && !standard.name) { return NOT_APPLICABLE }\n const { name, standard_category } = standard;\n if(standard_category && standard_category.name) {\n return(\n {name} ,\n flag: flags && flags.length ? flags.join(', ') : NOT_APPLICABLE,\n readability: readability_grade_level || NOT_APPLICABLE,\n ccss: showStandardData(standard),\n concept: activity_category && activity_category.name ? activity_category.name : NOT_APPLICABLE,\n tool: classification && classification.id ? getIconForActivityClassification(classification.id) : NOT_APPLICABLE,\n edit: classification && classification.id ? edit : NOT_APPLICABLE,\n remove: remove \n }\n });\n }\n\n return(\n (false);\n\n function deleteUnitTemplate() {\n const confirm = window.confirm('Are you sure you want to delete ' + unitTemplate.name + '?');\n if (confirm) {\n handleDelete(unitTemplate.id);\n }\n }\n\n function handleHideActivitiesRow() {\n setShowActivities(!showActivities)\n }\n\n function handleSelectFlag(e) {\n const { target } = e;\n const { value } = target;\n const newUnitTemplate = {...unitTemplate}\n newUnitTemplate.flag = value\n updateUnitTemplate(newUnitTemplate)\n }\n\n function handleRemoveActivity(activityId: string) {\n const confirm = window.confirm('Are you sure you want to remove this activity?');\n if (confirm) {\n const newUnitTemplate = {...unitTemplate}\n const activityIds = unitTemplate.activities.map((activity) => activity.id)\n activityIds.splice(activityIds.indexOf(parseInt(activityId)), 1)\n newUnitTemplate.activity_ids = activityIds\n updateUnitTemplate(newUnitTemplate)\n }\n }\n\n function expandOrCollapseButton() {\n const imageLink = showActivities ? 'collapse.svg' : 'expand.svg';\n const imageAlt = showActivities ? 'Collapse' : 'Expand';\n const innerElement = {innerElement} \n }\n\n function renderDiagnostics() {\n const { diagnostic_names } = unitTemplate;\n if((!diagnostic_names || !diagnostic_names.length)) { return NOT_APPLICABLE }\n return diagnostic_names.map(diagnostic => (\n {diagnostic}
\n ));\n }\n\n const previewLink = `${window.postbuildEnv.DEFAULT_URL}/assign/featured-activity-packs/${unitTemplate.id}`;\n\n return (\n \n
\n {expandOrCollapseButton()}\n {unitTemplate.name} \n {renderDiagnostics()} \n {unitTemplate.unit_template_category && unitTemplate.unit_template_category.name || NOT_APPLICABLE} \n \n preview \n \n \n edit \n \n \n delete \n \n \n\n {showActivities &&
}\n\n
(true);\n const [flag, setFlag] = React.useState(ALL_FLAGS)\n const [fetchedData, setFetchedData] = React.useState([])\n const [searchInput, setSearchInput] = React.useState(\"\")\n const [diagnostics, setDiagnostics] = React.useState([])\n const [diagnostic, setDiagnostic] = React.useState(ALL_DIAGNOSTICS)\n const [error, setError] = React.useState(null);\n const [searchByActivityPack, setSearchByActivityPack] = React.useState(true);\n\n React.useEffect(() => {\n if (loadingTableData && !diagnostics.length) {\n fetchDiagnosticsData()\n }\n }, [diagnostics])\n\n React.useEffect(() => {\n if (loadingTableData && !fetchedData.length) {\n fetchUnitTemplatesData()\n }\n }, [fetchedData])\n\n React.useEffect(() => {\n if (loadingTableData && fetchedData.length && diagnostic.length) {\n setLoadingTableData(false)\n }\n }, [fetchedData, diagnostics])\n\n function fetchUnitTemplatesData() {\n setLoadingTableData(true)\n requestGet(\n UNIT_TEMPLATES_URL,\n (body) => {\n setError(null);\n setFetchedData(body.unit_templates)\n },\n (body) => {\n setLoadingTableData(false);\n setError(ERROR_MESSAGE)\n }\n )\n }\n\n function fetchDiagnosticsData() {\n requestGet(\n DIAGNOSTICS_URL,\n (body) => {\n setError(null);\n setDiagnostics(body.diagnostics)\n },\n (body) => {\n setLoadingTableData(false);\n setError(ERROR_MESSAGE)\n }\n )\n }\n\n function updateOrder(sortInfo) {\n if (isSortable()) {\n let orderedData = sortUnitTemplates(fetchedData)\n const newOrder = sortInfo.map(item => item.key);\n let count = newOrder.length\n const newOrderedUnitTemplates = orderedData.map((ut) => {\n const newUnitTemplate = ut\n const newIndex = newOrder.findIndex(key => Number(key) === Number(ut.id))\n if (newIndex !== -1) {\n newUnitTemplate['order_number'] = newIndex\n } else {\n newUnitTemplate['order_number'] = count\n }\n count += 1\n return newUnitTemplate\n })\n\n fetch(UPDATE_ORDER_URL, {\n method: 'PUT',\n mode: 'cors',\n credentials: 'include',\n body: JSON.stringify({unit_templates: newOrderedUnitTemplates}),\n headers: headerHash,\n }).then((response) => {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response.json();\n }).then((response) => {\n alert(`Order for activity packs has been saved.`)\n }).catch((error) => {\n // to do, use Sentry to capture error\n })\n setFetchedData(newOrderedUnitTemplates)\n }\n\n };\n\n function onDelete(id) {\n const link = `${window.postbuildEnv.DEFAULT_URL}/cms/unit_templates/${id}`\n fetch(link, {\n method: 'DELETE',\n mode: 'cors',\n credentials: 'include',\n headers: {\n 'X-CSRF-Token': getAuthToken()\n }\n }).then((response) => {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response.json();\n }).then((response) => {\n alert(`Activity pack was deleted.`)\n const updatedActivities = [...fetchedData].filter(activity => activity.id !== id);\n setFetchedData(updatedActivities);\n }).catch((error) => {\n // to do, use Sentry to capture error\n })\n }\n\n function updateUnitTemplate(unitTemplate) {\n const newUnitTemplate = unitTemplate\n newUnitTemplate.unit_template_category_id = unitTemplate.unit_template_category.id\n newUnitTemplate.activity_ids = unitTemplate.activity_ids || unitTemplate.activities.map((a) => a.id)\n const link = `${window.postbuildEnv.DEFAULT_URL}/cms/unit_templates/${unitTemplate.id}.json`\n const index = fetchedData.findIndex((e) => e.id === unitTemplate.id)\n fetch(link, {\n method: 'PUT',\n mode: 'cors',\n credentials: 'include',\n body: JSON.stringify({unit_template: newUnitTemplate}),\n headers: headerHash,\n }).then((response) => {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response.json();\n }).then((response) => {\n const newData = [...fetchedData]\n newData[index] = response.unit_template\n setFetchedData(newData)\n alert('Activity Pack has been saved.')\n }).catch((error) => {\n // to do, use Sentry to capture error\n })\n }\n\n function renderActivitiesTable() {\n if(loadingTableData && fetchedData.length === 0) { return }\n\n const filteredUnitTemplates = orderedUnitTemplates({ diagnostic, fetchedData, flag, searchByActivityPack, searchInput });\n const unitTemplateRows = filteredUnitTemplates.map((unitTemplate) => (\n \n
\n {renderTableHeader()}\n
\n
\n Name \n Flag \n Diagnostics \n \n \n \n )\n }\n\n function switchDiagnostic(diagnostic) {\n setDiagnostic(diagnostic)\n }\n\n function handleSearch(e) {\n const { target } = e;\n const { value } = target;\n setSearchInput(value)\n }\n\n function switchFlag(flag) {\n setFlag(flag)\n }\n\n function isSortable() {\n if(flag && ![ALL_FLAGS, NOT_ARCHIVED_FLAG, PRODUCTION_FLAG].includes(flag)) { return false }\n if (searchInput !== '') { return false}\n if (diagnostic !== ALL_DIAGNOSTICS) { return false}\n return true\n };\n\n function handleRadioChange() {\n setSearchByActivityPack(!searchByActivityPack);\n setSearchInput('');\n }\n\n return (\n \n
\n
\n {renderActivitiesTable()}\n {loadingTableData &&
}\n {error &&
{error}
}\n
\n {fields.map((field, i) => {\n const style = { width: `${unitTemplateDataTableFields[i].width}`, minWidth: `${unitTemplateDataTableFields[i].width}` }\n return {field} \n })}\n \n )\n })\n }\n\n function renderHeaders() {\n return(\n \n {unitTemplateDataTableFields.map((header, i) => {\n const { width, name, attribute, } = header;\n const style = { width: `${width}`, minWidth: `${width}` }\n return {name} ;\n })}\n \n )\n }\n\n return (\n \n
Selected Activities: \n
\n {renderHeaders()}\n \n \n
\n
>([])\n const [selectedActivities, setSelectedActivities] = React.useState>(parentActivities)\n const [loading, setLoading] = React.useState(true);\n const [currentPage, setCurrentPage] = React.useState(1);\n const [nameSearch, setNameSearch] = React.useState('')\n const [descriptionSearch, setDescriptionSearch] = React.useState('')\n const [conceptSearch, setConceptSearch] = React.useState('')\n const [activityPacksSearch, setActivityPacksSearch] = React.useState('')\n const [flagSearch, setFlagSearch] = React.useState(DEFAULT_FLAG)\n const [toolSearch, setToolSearch] = React.useState(DEFAULT_TOOL)\n const [readabilitySearch, setReadabilitySearch] = React.useState(DEFAULT_READABILITY)\n const [readabilityOptions, setReadabilityOptions] = React.useState>([])\n const [showNoActivityPacks, setShowNoActivityPacks] = React.useState(false)\n\n React.useEffect(() => {\n if (loading) { getActivities() }\n }, []);\n\n function getActivities() {\n requestGet(\n ACTIVITIES_URL,\n (data) => {\n setLoading(false)\n setActivities(data.activities);\n\n const readArr = data.activities.map(act => act.readability_grade_level)\n const readUnique = Array.from(new Set(readArr))\n const readFiltered = readUnique.filter(c => c !== '' && c !== null).sort()\n readFiltered.push(DEFAULT_READABILITY)\n setReadabilityOptions(readFiltered)\n },\n (body) => {\n setLoading(false)\n }\n )\n }\n\n function getFilteredActivities() {\n\n return activities.filter(act => {\n const nameMatch = nameSearch === '' || (act.name && act.name.toLowerCase().includes(nameSearch.toLowerCase()))\n const descriptionMatch = descriptionSearch === '' || (act.description && act.description.toLowerCase().includes(descriptionSearch.toLowerCase()))\n const conceptMatch = conceptSearch === '' || (act.activity_category && act.activity_category.name.toLowerCase().includes(conceptSearch.toLowerCase()))\n const activityPackMatch = activityPacksSearch === '' || (act.unit_templates && act.unit_templates.some(ut => ut.name.toLowerCase().includes(activityPacksSearch.toLowerCase())))\n const flagMatch = flagSearch === DEFAULT_FLAG || (act.data && act.data['flag'] && act.data['flag'] === flagSearch)\n const toolMatch = toolSearch === DEFAULT_TOOL || (act.classification && act.classification.name === toolSearch)\n const readabilityMatch = readabilitySearch === DEFAULT_READABILITY || (act.readability_grade_level && act.readability_grade_level === readabilitySearch)\n const selectedActivitiesMatch = selectedActivities.length === 0 || !selectedActivities.map(a => a.id).includes(act.id)\n const showNoActivityPacksMatch = showNoActivityPacks === false || (act.unit_templates && act.unit_templates.length === 0)\n return (\n nameMatch && descriptionMatch && conceptMatch && activityPackMatch &&\n flagMatch && toolMatch && readabilityMatch && selectedActivitiesMatch && showNoActivityPacksMatch\n );\n })\n }\n\n function currentPageActivities() {\n return getFilteredActivities().slice(lowerBound(currentPage), upperBound(currentPage))\n }\n\n function handleAddActivity(activity) {\n toggleParentActivity(activity)\n const newSelectedActivities = selectedActivities.slice()\n newSelectedActivities.push(activity)\n setSelectedActivities(newSelectedActivities)\n }\n\n function handleRemoveActivity(activity) {\n toggleParentActivity(activity)\n const newSelectedActivities = selectedActivities.filter(a => a.id !== activity.id)\n setSelectedActivities(newSelectedActivities)\n }\n\n function handleNameSearch(e) {\n setNameSearch(e.target.value)\n }\n\n function handleDescriptionSearch(e) {\n setDescriptionSearch(e.target.value)\n }\n\n function handleConceptSearch(e) {\n setConceptSearch(e.target.value)\n }\n\n function handleActivityPacksSearch(e) {\n setActivityPacksSearch(e.target.value)\n }\n\n function handleFlagSearch(e) {\n setFlagSearch(e.target.value)\n }\n\n function handleToolSearch(e) {\n setToolSearch(e.target.value)\n }\n\n function handleReadabilitySearch(e) {\n setReadabilitySearch(e.target.value)\n }\n\n function updateOrder(sortInfo) {\n const sortedIds = sortInfo.map(s => s.key)\n const newOrderedActivities = sortedIds.map((s) => activities.find((a) => a.id === parseInt(s)))\n setSelectedActivities(newOrderedActivities)\n\n const selectedParentActivities = newOrderedActivities.map(act => parentActivities.find(a => a.id === act.id))\n setParentActivities(selectedParentActivities)\n }\n\n function toggleShowNoActivityPacks() {\n setShowNoActivityPacks(!showNoActivityPacks)\n }\n\n if(!activities.length) {\n return \n
\n
All Activities: \n
\n
\n
\n
\n
\n
\n \n {TOOL_OPTIONS.map(key => {key} )}\n \n \n
\n \n {readabilityOptions.map(key => {key} )}\n \n \n
\n Only show activities without activity packs \n
\n
\n
\n
\n
\n
(flag ? {value: flag, label: flag} : null);\n const [activityPackName, setActivityPackName] = React.useState(name);\n const [activityPackInfo, setActivityPackInfo] = React.useState(activity_info);\n const [activityPackType, setActivityPackType] = React.useState(null);\n const [activityPackTime, setActivityPackTime] = React.useState(time ? {value: time.toString(), label: time.toString()} : null);\n const [activityPackImageLink, setActivityPackImageLink] = React.useState(image_link || '');\n const [activityPackActivities, setActivityPackActivities] = React.useState(activities || []);\n const [unitTemplateCategories, setUnitTemplateCategories] = React.useState([])\n const [uploadedFileLink, setUploadedFileLink] = React.useState('');\n const [showSnackbar, setShowSnackbar] = React.useState(false);\n const [snackbarMessage, setSnackbarMessage] = React.useState('');\n const [errors, setErrors] = React.useState(null);\n\n React.useEffect(() => {\n fetchUnitTemplateCategories().then(response => {\n if(response.unitTemplateCategories) {\n const options = response.unitTemplateCategories.map(unitTemplateCategory => ({ label: unitTemplateCategory.name, value: unitTemplateCategory.id }));\n const option = unit_template_category_id ? options.filter(option => option.value === unit_template_category_id)[0] : null;\n if(option) {\n setActivityPackType(option);\n }\n setUnitTemplateCategories(options);\n } else {\n const { error } = response;\n setSnackbarMessage(error);\n setShowSnackbar(true);\n }\n })\n }, []);\n\n React.useEffect(() => {\n if (showSnackbar) {\n setTimeout(() => setShowSnackbar(false), defaultSnackbarTimeout)\n }\n }, [showSnackbar])\n\n function getOptions(options: string[]) {\n return options.map((option: string) => ({ value: option, label: option }));\n }\n\n function handleFlagChange(option: DropdownObjectInterface) {\n setActivityPackFlag(option);\n }\n\n function handleNameChange(e) {\n const { target } = e;\n const { value } = target;\n setActivityPackName(value);\n }\n\n function handleImageLinkChange(e) {\n const { target } = e;\n const { value } = target;\n setActivityPackImageLink(value);\n }\n\n function handlePackTypeChange(option: DropdownObjectInterface) {\n setActivityPackType(option);\n }\n\n function handleTimeChange(option: DropdownObjectInterface) {\n setActivityPackTime(option);\n }\n\n function handlePackDescriptionChange(text: string) {\n setActivityPackInfo(text);\n }\n\n function handleFileDrop(acceptedFiles) {\n acceptedFiles.forEach(file => {\n const data = new FormData()\n data.append('file', file)\n fetch(`${window.postbuildEnv.DEFAULT_URL}/cms/images`, {\n method: 'POST',\n mode: 'cors',\n credentials: 'include',\n headers: {\n 'X-CSRF-Token': getAuthToken()\n },\n body: data\n })\n .then(response => response.json()) // if the response is a JSON object\n .then(response => setUploadedFileLink(response.url)); // Handle the success response object\n });\n }\n\n function handleNewSelectedActivities(newSelectedActivities) {\n const selectedActivities = newSelectedActivities.map(item => item.id);\n const newOrderedActivities = selectedActivities.map((key, i) => {\n const activity = activityPackActivities.find(activity => activity.id === key);\n activity.order_number = i;\n return activity;\n }).sort((firstActivity, secondActivity) => firstActivity.order_number - secondActivity.order_number)\n setActivityPackActivities(newOrderedActivities);\n }\n\n function toggleActivitySelection(activity) {\n if (activityPackActivities.find(act => act.id === activity.id)) {\n const filteredActivities = activityPackActivities.filter(act => act.id !== activity.id);\n setActivityPackActivities(filteredActivities);\n } else {\n const newActivity = {...activity};\n const updatedActivityPackActivities = [...activityPackActivities];\n newActivity.order_number = activityPackActivities.length;\n updatedActivityPackActivities.push(newActivity);\n setActivityPackActivities(updatedActivityPackActivities );\n }\n }\n\n function handleSaveUnitTemplate() {\n const errors = validateUnitTemplateForm({ activityPackFlag, activityPackName, activityPackType });\n\n if(Object.keys(errors).length) {\n return setErrors(errors);\n }\n setErrors(null);\n const unitTemplateObject = {\n name: activityPackName,\n flag: activityPackFlag?.value,\n activity_info: activityPackInfo,\n time: activityPackTime?.value,\n unit_template_category_id: activityPackType?.value,\n activity_ids: activityPackActivities.map(activity => activity.id),\n image_link: activityPackImageLink\n };\n if(id) {\n updateUnitTemplate(unitTemplateObject, id).then(response => {\n if(response.success) {\n setSnackbarMessage(SUCCESS_MESSAGE);\n setShowSnackbar(true);\n } else {\n const { error } = response;\n setSnackbarMessage(error);\n setShowSnackbar(true);\n }\n })\n } else {\n createUnitTemplate(unitTemplateObject).then(response => {\n if(response.success) {\n setSnackbarMessage(SUCCESS_MESSAGE);\n setShowSnackbar(true);\n } else {\n const { error } = response;\n setSnackbarMessage(error);\n setShowSnackbar(true);\n }\n })\n }\n }\n\n function handleCloseSubmissionModal() {\n setShowSnackbar(false);\n }\n\n function renderActivityPackPreviewLink() {\n if(!id) { return };\n const url = `${window.postbuildEnv.DEFAULT_URL}/assign/featured-activity-packs/${id}`;\n return(\n \n );\n }\n\n function renderReadabilitySection() {\n return (\n \n Readability: \n {!readability && {NOT_APPLICABLE}
}\n {readability && {readability}
}\n \n )\n }\n\n function renderDiagnosticsSection() {\n return (\n \n Diagnostics: \n \n {(!diagnostic_names || !diagnostic_names.length) && {NOT_APPLICABLE}
}\n {diagnostic_names && diagnostic_names.map((diagnostic) => {\n return {diagnostic}
;\n })}\n \n \n );\n }\n\n function renderPdfUploadSection() {\n return (\n \n
Note: for activity pack images, please upload an image that has a minimum height of 310px
\n
Click the square below or drag a file into it to upload a file: \n
\n
Here is the link to your uploaded file:
\n {uploadedFileLink &&
{uploadedFileLink} }\n
\n
\n
\n {renderActivityPackPreviewLink()}\n
\n
\n Activity Pack Description \n \n
\n \n \n {renderPdfUploadSection()}\n
\n
\n
Save \n {errors &&
Please fix the form errors and try submitting again.
}\n
\n
\n
,\n savingKeys: Array,\n modules: {\n textInputGenerator: TextInputGenerator,\n server: Server\n }\n}\n\nexport default class UnitTemplateCategory extends React.Component {\n constructor(props) {\n super(props);\n const { unitTemplateCategory } = this.props\n\n const initialModel = {\n name: null\n };\n\n const formFields = [\n {\n name: 'name'\n },\n {\n name: 'primary_color',\n label: 'primary color'\n },\n {\n name: 'secondary_color',\n label: 'secondary color'\n }\n ];\n\n const resourceNamePlural = 'unit_template_categories'\n const resourceNameSingular = 'unit_template_category'\n\n const savingKeys = ['name', 'id', 'primary_color', 'secondary_color'];\n\n const model1 = _.extend(initialModel, unitTemplateCategory);\n\n this.state = {\n resourceNameSingular: resourceNameSingular,\n resourceNamePlural: resourceNamePlural,\n model: model1,\n formFields: formFields,\n savingKeys: savingKeys,\n modules: {\n textInputGenerator: new TextInputGenerator(this, this.updateModelState),\n server: new Server(resourceNameSingular, resourceNamePlural, '/cms')\n }\n }\n }\n\n handleSave = () => {\n const { modules, model, savingKeys } = this.state\n const data = _.pick(model, savingKeys);\n const options = {\n savingKeys: savingKeys\n }\n modules.server.save(data, options);\n };\n\n updateModelState = (key, value) => {\n let newState = this.state;\n newState.model[key] = value;\n this.setState(newState);\n }\n\n render() {\n const { modules, formFields } = this.state\n let inputs = modules.textInputGenerator.generate(formFields);\n return(\n \n {inputs}\n Save \n
\n )\n }\n}\n","import React from 'react';\nimport { BrowserRouter, Route, Switch } from 'react-router-dom';\nimport { CompatRouter } from \"react-router-dom-v5-compat\";\n\nimport ActivityClassifications from './ActivityClassifications';\nimport UnitTemplateCategories from './UnitTemplateCategories';\nimport UnitTemplates from './UnitTemplates';\n\nimport ActivityClassification from '../components/activity_classifications/activity_classification';\nimport UnitTemplate from '../components/unitTemplate';\nimport UnitTemplateCategory from '../components/unit_template_categories/unit_template_category';\n\nfunction CmsActivitiesRouter(props) {\n return (\n \n \n \n \n \n \n );\n};\n\nexport default CmsActivitiesRouter;\n","import React from 'react';\n\nimport CmsActivitiesRouter from '../containers/CmsActivitiesRouter';\n\nconst CmsActivitiesAppClient = (props) => (\n Edit \n }\n }\n ];\n }\n\n setSort = newSorted => {\n if (!newSorted.length) { return }\n\n const { query } = this.state\n\n const sort = newSorted[0].id\n const sort_direction = newSorted[0].desc ? 'desc' : 'asc'\n if (sort !== query.sort || sort_direction !== query.sort_direction) {\n const newState = { ...this.state}\n newState.query.sort = sort\n newState.query.sort_direction = sort_direction\n this.setState(newState, this.search)\n }\n };\n\n search = (e) => {\n const { query } = this.state\n\n e ? e.preventDefault() : null\n this.setState({loading: true})\n const link = `${window.postbuildEnv.DEFAULT_URL}/cms/districts/search`\n const data = new FormData();\n data.append('district', '')\n Object.keys(query).forEach((k) => {\n data.append(k, query[k])\n })\n fetch(link, {\n method: 'POST',\n mode: 'cors',\n credentials: 'include',\n body: data,\n headers: {\n 'X-CSRF-Token': getAuthToken()\n }\n }).then((response) => {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response.json();\n }).then((response) => {\n this.setState({ data: response.districtSearchQueryResults, numberOfPages: response.numberOfPages, loading: false })\n }).catch((error) => {\n // to do, use Sentry to capture error\n })\n };\n\n submitPageForm = e => {\n this.updatePage(e.target.page.value)\n };\n\n updateField(e, key) {\n const value = e.target.value\n const newState = { ...this.state}\n newState.query[key] = value\n this.setState(newState)\n }\n\n updatePage = i => {\n const newState = { ...this.state}\n newState.query.page = i\n this.setState(newState, this.search)\n };\n\n handleUpdatePremiumStatus = e => {\n const selectedOptions = []\n Array.from(e.target.options).forEach(o => {\n if (o.selected) {\n selectedOptions.push(o.value)\n }\n })\n const newState = { ...this.state }\n newState.query.premium_status = selectedOptions\n this.setState(newState)\n };\n\n renderPageSelector() {\n const { query, numberOfPages } = this.state\n\n const currentPage = query.page || 1\n const totalPages = numberOfPages || 1\n return (\n \n )\n }\n\n renderPremiumStatusSelect() {\n const { districtPremiumTypes } = this.props\n const options = districtPremiumTypes.map((o, i) => {o} )\n return (\n \n {options}\n \n )\n }\n\n renderTableOrLoading() {\n const { loading, data, columns, query } = this.state\n\n if (loading) {\n return No records found for your query.
\n }\n\n const sort = query.sort ? query.sort : 'name'\n const sortDescending = query.sort_direction ? query.sort_direction === 'desc' : true\n return (\n \n
\n
\n {this.renderPageSelector()}\n
\n
\n
\n {this.renderTableOrLoading()}\n
Edit \n }\n }\n ];\n }\n\n setSort = newSorted => {\n if (!newSorted.length) { return }\n\n const sort = newSorted[0].id\n const sort_direction = newSorted[0].desc ? 'desc' : 'asc'\n if (sort !== this.state.query.sort || sort_direction !== this.state.query.sort_direction) {\n const newState = { ...this.state}\n newState.query.sort = sort\n newState.query.sort_direction = sort_direction\n this.setState(newState, this.search)\n }\n };\n\n search = (e) => {\n e ? e.preventDefault() : null\n this.setState({loading: true})\n const link = `${window.postbuildEnv.DEFAULT_URL}/cms/schools/search`\n const data = new FormData();\n Object.keys(this.state.query).forEach((k) => {\n data.append(k, this.state.query[k])\n })\n fetch(link, {\n method: 'POST',\n mode: 'cors',\n credentials: 'include',\n body: data,\n headers: {\n 'X-CSRF-Token': getAuthToken()\n }\n }).then((response) => {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response.json();\n }).then((response) => {\n this.setState({ data: response.schoolSearchQueryResults, numberOfPages: response.numberOfPages, loading: false })\n }).catch((error) => {\n // to do, use Sentry to capture error\n })\n };\n\n submitPageForm = e => {\n this.updatePage(e.target.page.value)\n };\n\n updateCheckbox = () => {\n const newState = { ...this.state}\n newState.query.search_schools_with_zero_teachers = !this.state.query.search_schools_with_zero_teachers\n this.setState(newState)\n };\n\n updateField(e, key) {\n const value = e.target.value\n const newState = { ...this.state}\n newState.query[key] = value\n this.setState(newState)\n }\n\n updatePage = i => {\n const newState = { ...this.state}\n newState.query.page = i\n this.setState(newState, this.search)\n };\n\n updatePremiumStatus = e => {\n const selectedOptions = []\n Array.from(e.target.options).forEach(o => {\n if (o.selected) {\n selectedOptions.push(o.value)\n }\n })\n const newState = { ...this.state }\n newState.query.premium_status = selectedOptions\n this.setState(newState)\n };\n\n renderPageSelector() {\n const currentPage = this.state.query.page || 1\n const totalPages = this.state.numberOfPages || 1\n return (\n \n )\n }\n\n renderPremiumStatusSelect() {\n const options = this.props.schoolPremiumTypes.map(o => {o} )\n return (\n \n {options}\n \n )\n }\n\n renderTableOrLoading() {\n if (this.state.loading) {\n return \n
\n
\n {this.renderPageSelector()}\n
\n
No records found for your query.
\n }\n }\n\n render() {\n return (\n \n
\n {this.renderTableOrLoading()}\n
{row.original.school} \n }\n return 'N/A';\n }\n }, {\n Header: \"Edit\",\n accessor: 'edit',\n resizable: false,\n maxWidth: 40,\n Cell: ({row}) => {\n return Edit \n }\n }, {\n Header: \"Details\",\n accessor: 'details',\n resizable: false,\n maxWidth: 60,\n Cell: ({row}) => {\n return Details \n }\n }, {\n Header: \"Sign In\",\n accessor: 'sign_in',\n resizable: false,\n maxWidth: 60,\n Cell: ({row}) => {\n return Sign In \n }\n }\n ];\n }\n\n setSort = newSorted => {\n const { query, } = this.state\n if (!newSorted.length) { return }\n\n const sort = newSorted[0].id\n const sort_direction = newSorted[0].desc ? 'desc' : 'asc'\n if (sort !== query.sort || sort_direction !== query.sort_direction) {\n const newState = { ...this.state}\n newState.query.sort = sort\n newState.query.sort_direction = sort_direction\n this.setState(newState, this.search)\n }\n };\n\n toggleAdvanced = () => { this.setState(prevState => ({ showAdvanced: !prevState.showAdvanced }))};\n\n search = (e) => {\n const { query, } = this.state\n e ? e.preventDefault() : null;\n this.setState({loading: true})\n const link = `${window.postbuildEnv.DEFAULT_URL}/cms/users/search`\n const data = new FormData();\n Object.keys(query).forEach((k) => {\n data.append(k, query[k])\n })\n fetch(link, {\n method: 'POST',\n mode: 'cors',\n credentials: 'include',\n body: data,\n headers: {\n 'X-CSRF-Token': getAuthToken()\n }\n }).then((response) => {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response.json();\n }).then((response) => {\n this.setState({ data: response.userSearchQueryResults, numberOfPages: response.numberOfPages, loading: false, page: 1 })\n }).catch((error) => {\n // to do, use Sentry to capture error\n })\n };\n\n submitPageForm = e => {\n e.preventDefault()\n this.updatePage(e.target.page.value)\n }\n\n updatePage = page => {\n this.setState({ page, })\n };\n\n updateField(e, key) {\n const value = e.target.value\n const newState = { ...this.state}\n newState.query[key] = value\n this.setState(newState)\n }\n\n updatePremiumStatus = e => {\n const selectedOptions = []\n Array.from(e.target.options).forEach(o => {\n if (o.selected) {\n selectedOptions.push(o.value)\n }\n })\n const newState = { ...this.state }\n newState.query.user_premium_status = selectedOptions\n this.setState(newState)\n };\n\n getPaginatedData = () => {\n const { defaultRecordLimit, } = this.props\n const { page, data, query, } = this.state;\n const recordsPerPage = defaultRecordLimit;\n const currentPage = page ? page - 1 : 0;\n\n const paginatedData = data.slice(currentPage * recordsPerPage, (currentPage + 1) * recordsPerPage);\n return paginatedData;\n };\n\n renderPageSelector() {\n const { page, numberOfPages, data, } = this.state\n const currentPage = page || 1\n const totalPages = numberOfPages || 1\n return (\n \n {data.length} total records
\n \n \n )\n }\n\n renderPremiumStatusSelect() {\n const { schoolPremiumTypes, } = this.props\n\n const options = schoolPremiumTypes.map(o => {o} )\n return (\n \n {options}\n \n )\n }\n\n renderTableOrLoading() {\n const { loading, data, query, columns, numberOfPages, } = this.state\n const { defaultRecordLimit, } = this.props\n\n if (loading) {\n return \n
\n
\n {Number(query.record_limit) === defaultRecordLimit ?
This search returns a maximum of {defaultRecordLimit} records by default. If you need to see more records, please change the settings under Advanced Search.
: this.renderPageSelector()}\n
\n
No records found.
\n }\n\n }\n\n renderUserFlagsetSelect() {\n const { flagsets, } = this.props\n\n const options = flagsets.map(pair => {pair.label} )\n return (\n this.updateField(e, 'flagset')}>\n {options}\n \n )\n }\n\n renderUserRoleSelect() {\n const { userRoleTypes, } = this.props\n\n const options = [{o} ))\n return (\n this.updateField(e, 'user_role')}>\n {options}\n \n )\n }\n\n render() {\n const { defaultRecordLimit, } = this.props\n const { showAdvanced, query, } = this.state\n\n return (\n \n
\n {this.renderTableOrLoading()}\n
\n \n {studentName} \n {completed} \n
\n {activityName}
\n {scoreTag}
\n \n )\n}\n\nconst ActivityFeed = ({ onMobile, activityFeed, }) => {\n const [showAll, setShowAll] = React.useState(false)\n\n function handleShowMoreClick() { setShowAll(true) }\n\n const rows = activityFeed.slice(0, showAll ? ABSOLUTE_MAX : INITIAL_MAX).map(act => {\n const { student_name, activity_name, score, completed, id, unit_id, classroom_id, user_id, activity_id, } = act\n\n const scoreTagStyle = {\n minWidth: SCORE_WIDTH,\n width: SCORE_WIDTH\n }\n\n return {\n className: \"focus-on-light\",\n studentName: student_name,\n activityName: activity_name,\n scoreTag: (\n {score}}\n tooltipTriggerTextClass='data-table-row-section'\n tooltipTriggerTextStyle={scoreTagStyle}\n />\n ),\n link: `/teachers/progress_reports/report_from_classroom_and_unit_and_activity_and_user/classroom/${classroom_id}/unit/${unit_id}/user/${user_id}/activity/${activity_id}`,\n completed,\n id,\n }\n })\n\n if (activityFeed.length === 0) {\n return (\n \n Activity Feed \n Once your students complete activities, you’ll be able to see them here.
\n \n )\n }\n\n const dataDisplay = onMobile ? rows.map(r => \n
\n
\n
\n
Explore Demo \n
\n
You are about to enter a Demo Account. All data is for demo purposes only - you can exit the Demo and re-enter your own account at any time.
\n
\n
Let's go! \n
Cancel \n
\n
\n
;\n showAll: boolean;\n}\n\nconst headers = [\n {\n name: 'Diagnostic',\n attribute: 'diagnostic',\n width: '290px'\n },\n {\n name: 'Class',\n attribute: 'classroom',\n width: '290px'\n },\n {\n name: 'Completed',\n attribute: 'completed',\n width: '62px',\n rowSectionClassName: \"completed-row-section\"\n },\n {\n name: 'Reports',\n attribute: 'results',\n width: '59px',\n noTooltip: true,\n rowSectionClassName: \"last-row-section\",\n headerClassName: 'last-header'\n }\n]\n\nconst MobileRecommendationRow = ({ row, }) => {\n const {\n diagnostic,\n summaryHref,\n classroom,\n } = row\n return (\n \n )\n}\n\nconst DiagnosticMini = ({diagnostics, onMobile, }) => {\n const [showAll, setShowAll] = React.useState(false);\n\n function handleShowMoreClick() { setShowAll(true) }\n\n if (!diagnostics.length) { return View ,\n summaryHref,\n }\n })\n\n const dataDisplay = onMobile ? rows.map(r => \n \n \n Diagnostic \n \n Results \n \n \n \n {dataDisplay}\n {diagnostics.length > INITIAL_MAX && !showAll && Show more }\n \n )\n}\n\nexport default DiagnosticMini\n","import moment from 'moment';\nimport * as React from 'react';\n\nimport { DataTable } from '../../../Shared/index';\n\nimport { requestPost } from '../../../../modules/request/index';\nimport GradeOptions from '../classrooms/grade_options';\n\nconst headers = [\n {\n width: '494px',\n name: 'Class',\n attribute: 'name'\n }, {\n width: '88px',\n name: 'Grade',\n attribute: 'grade'\n }, {\n width: '124px',\n name: 'Created',\n attribute: 'created'\n }, {\n width: '75px',\n name: 'Students',\n attribute: 'students',\n rowSectionClassName: \"students-row-section\",\n headerClassName: 'students-header'\n }\n]\n\nconst ModalContent = ({ classes, selectedClassroomIds, setSelectedClassroomIds, }) => {\n const checkAllRows = () => {\n const allIds = classes.map(c => c.id)\n setSelectedClassroomIds(allIds)\n }\n\n const uncheckAllRows = () => {\n setSelectedClassroomIds([])\n }\n\n const toggleRowCheck = (id) => {\n if (selectedClassroomIds.includes(id)) {\n setSelectedClassroomIds(selectedClassroomIds.filter(i => i !== id))\n } else {\n setSelectedClassroomIds(selectedClassroomIds.concat([id]))\n }\n }\n const rows = classes.sort((a, b) => a.created_at - b.created_at).map(classroom => {\n const { name, id, created_at, student_count, grade, error, students } = classroom\n const gradeOption = GradeOptions.find(g => [grade, Number(grade)].includes(g.value))\n return {\n name,\n id,\n checked: selectedClassroomIds.includes(id),\n grade: gradeOption ? gradeOption.label : 'Other',\n created: moment(created_at).format('MMM D, YYYY'),\n students: student_count || students.length\n }\n })\n\n return (\n \n
\n
\n\n
\n
Choose classes to archive \n
If you archive classes, students in those classes will no longer be able to access activities. You can view archived classes under the "Classes" tab.
\n
Learn more about archiving classes \n
\n\n
\n
\n\n
\n
\n Cancel \n Archive \n
\n
\n\n
\n
\n {modalIsOpen && \n \n
\n HELPFUL TIP \n
\n
Start of a new school year? \n
Quickly archive last year's classes.
\n
\n
Archive Classes \n
\n
\n \n )\n}\n\nexport default BulkArchiveClassesCard\n","import * as React from 'react'\n\nimport { arrowPointingRightIcon, EVIDENCE_HANDBOOK_LINK } from '../../../Shared/index'\n\nconst EvidencePromotionCard = () => {\n\n return (\n \n \n
\n NEW TOOL \n QUILL READING FOR EVIDENCE \n
\n
Provide reading texts that enable students to write with evidence \n
\n
\n )\n}\n\nexport default EvidencePromotionCard\n","import * as React from 'react'\n\nimport { PostNavigationBanner } from '../../../Shared'\n\nconst closeIconSrc = `${window.postbuildEnv.CDN_URL}/images/pages/dashboard/bulk_archive_close_icon_orange.svg`\n\nconst SchoolYearUpdatesCard = ({ handleCloseCard, }) => {\n return (\n \n Content improvements for all Diagnostics \n Quill Reading for Evidence now provides green, yellow, and red scores for students and teachers \n New High School Reading for Evidence Offerings: Social Studies (World History) and Interdisciplinary Science (Building AI Knowledge) \n ELL practice activities now provide bilingual translation to Spanish \n \n }\n buttons={[\n {\n className: 'gold small contained focus-on-light',\n href: '/teacher-center/quills-four-big-updates-for-the-20242025-school-year#diagnostics',\n text: \"Learn more about Quill’s latest updates\",\n target: \"_blank\"\n }\n ]}\n closeAria=\"Hide card until next school year\"\n closeIconSrc={closeIconSrc}\n handleCloseCard={handleCloseCard}\n icon={{ alt: \"Image of a school building\", src: \"https://assets.quill.org/images/banners/large-school-campus-gold.svg\" }}\n primaryHeaderText=\"Four Big Updates for the 2024-2025 School Year\"\n />\n )\n}\n\nexport default SchoolYearUpdatesCard\n","import * as React from 'react'\n\nimport BulkArchiveClassesCard from './bulk_archive_classrooms_card'\nimport EvidencePromotionCard from './evidence_promotion_card'\nimport SchoolYearUpdatesCard from './school_year_updates_card'\n\nconst MAY = 4\n\nconst PromotionalCard = ({ userId, classrooms, handleBulkArchiveSuccess, showEvidencePromotionCard, passedBulkArchiveCardClosedForRelevantYear, passedSchoolYearUpdatesCardClosed, }) => {\n const today = new Date(Date.now()) // equivalent to just new Date(), but much easier to stub for tests\n\n const relevantYear = today.getMonth() > MAY ? today.getUTCFullYear() : today.getUTCFullYear() - 1\n const bulkArchiveLocalStorageKey = `${relevantYear}BulkArchiveCardClosedForUser${userId}`\n const schoolYearUpdatesCard = `${relevantYear}SchoolYearUpdatesCardClosedForUser${userId}`\n\n const [bulkArchiveCardClosedForRelevantYear, setBulkArchiveCardClosedForRelevantYear] = React.useState(window.localStorage.getItem(bulkArchiveLocalStorageKey) || passedBulkArchiveCardClosedForRelevantYear)\n const [scoringUpdatesCardClosed, setSchoolYearUpdatesCardClosed] = React.useState(window.localStorage.getItem(schoolYearUpdatesCard) || passedSchoolYearUpdatesCardClosed)\n\n function handleCloseBulkArchiveCard() {\n window.localStorage.setItem(bulkArchiveLocalStorageKey, 'true')\n setBulkArchiveCardClosedForRelevantYear(true)\n }\n\n function handleCloseSchoolYearUpdatesCard() {\n window.localStorage.setItem(schoolYearUpdatesCard, 'true')\n setSchoolYearUpdatesCardClosed(true)\n }\n\n const classesCreatedLastSchoolYear = classrooms.filter(c => {\n const createdAt = new Date(c.created_at)\n return new Date(`July 1, ${relevantYear}`) > createdAt\n })\n\n if (!bulkArchiveCardClosedForRelevantYear && classesCreatedLastSchoolYear.length) {\n return (\n \n {text} \n {showNewTag && NEW }\n \n)\n\nconst ExploreDemoAction = ({setShowDemoModal}) => (\n setShowDemoModal(true)} type=\"button\">\n Explore a demo teacher account \n \n)\n\nconst HandyActions = ({ linkedToClever, setShowDemoModal}) => {\n const [hasAssignedSocialStudiesActivities, setHasAssignedSocialStudiesActivities] = React.useState(false)\n const [hasAssignedScienceActivities, setHasAssignedScienceActivities] = React.useState(false)\n\n React.useEffect(() => {\n requestGet('/teachers/progress_reports/assigned_content_hub_activities_status',\n ({ has_assigned_science_activities, has_assigned_social_studies_activities, }) => {\n setHasAssignedScienceActivities(has_assigned_science_activities)\n setHasAssignedSocialStudiesActivities(has_assigned_social_studies_activities)\n }\n )\n })\n\n return(\n \n Handy Actions \n {hasAssignedSocialStudiesActivities && \n )\n}\n\nexport default HandyActions\n","import * as React from 'react'\n\nimport { DropdownInput, Tooltip, helpIcon, } from '../../../Shared/index'\nimport { addCommasToThousands } from '../../../Staff/helpers/evidence/miscHelpers'\n\nconst KEY_METRICS_TIMEFRAME = 'keyMetricsTimeframe'\nconst YEARLY = 'yearly'\nconst WEEKLY = 'weekly'\nconst tooltipCopy = \"These metrics include data from deleted activity packs. Deleted activity packs will not be displayed in any other report.\"\n\nconst KeyMetric = ({ number, label, }) => (\n \n {number?.toLocaleString()} \n {label} \n \n )}\n />\n)\n\nconst KeyMetrics = ({ firstName, metrics, }) => {\n const [selectedTimeframe, setSelectedTimeframe] = React.useState(window.localStorage.getItem(KEY_METRICS_TIMEFRAME) || YEARLY)\n\n React.useEffect(() => {\n window.localStorage.setItem(KEY_METRICS_TIMEFRAME, selectedTimeframe)\n }, [selectedTimeframe])\n\n function onChangeSelectedTimeframe(e) { setSelectedTimeframe(e.value) }\n\n const timeframeOptions = [{ label: 'Yearly', value: YEARLY }, { label: 'Weekly', value: WEEKLY }]\n const selectedTimeframeOption = timeframeOptions.find(opt => opt.value === selectedTimeframe)\n\n const assignedActivitiesCount = metrics[`${selectedTimeframe}_assigned_activities_count`]\n const completedActivitiesCount = metrics[`${selectedTimeframe}_completed_activities_count`]\n\n return (\n \n \n \n {firstName}, here's your {selectedTimeframe} \n summary \n \n \n
\n \n )\n\n}\n\nexport default KeyMetrics\n","import * as React from 'react';\n\nimport {\n DataTable,\n expandIcon,\n fileChartIcon,\n fileDownloadIcon,\n helpIcon,\n playBoxIcon,\n previewIcon,\n} from '../../../Shared/index';\n\nconst INITIAL_MAX = 5\n\ninterface Lessons {\n classroom_name: string,\n activity_name: string,\n activity_id: number,\n unit_id: number,\n classroom_id: number,\n classroom_unit_id: number,\n supporting_info?: string\n}\n\ninterface LessonsMiniState {\n loading: boolean;\n lessons: Array;\n showAll: boolean;\n}\n\nconst headers = [\n {\n name: 'Quill Lesson',\n attribute: 'lesson',\n width: '290px'\n },\n {\n name: 'Class',\n attribute: 'classroom',\n width: '300px'\n },\n {\n name: 'More',\n attribute: 'actions',\n isActions: true,\n },\n {\n name: 'Present',\n attribute: 'present',\n width: '78px',\n noTooltip: true,\n rowSectionClassName: \"last-row-section\",\n headerClassName: 'last-header'\n }\n]\n\nconst MobileLessonRow = ({ row, }) => {\n const {\n lesson,\n presentHref,\n classroom\n } = row\n return (\n \n )\n}\n\nconst LessonsMini = ({ lessons, onMobile, }) => {\n const [showAll, setShowAll] = React.useState(false);\n\n function handleShowMoreClick() { setShowAll(true) }\n\n if (!lessons.length) { return Preview Customize Download lesson plan Present \n \n \n Present a live \n \n lesson \n \n \n \n {dataDisplay}\n {lessons.length > INITIAL_MAX && !showAll && Show more }\n \n )\n}\n\nexport default LessonsMini\n","import * as React from 'react';\n\nconst personWithChecklistSrc = `${window.postbuildEnv.CDN_URL}/images/pages/dashboard/person-with-checklist.svg`\nconst bigCheckIconSrc = `${window.postbuildEnv.CDN_URL}/images/pages/dashboard/icons-check-big.svg`\n\nconst bigCheckIcon = {\n src: bigCheckIconSrc,\n alt: 'Green check icon'\n}\n\ninterface OnboardingChecklistItemInterface {\n checked: boolean;\n name: string;\n link?: string;\n}\n\nconst OnboardingChecklistItem = ({ checked, name, link, }: OnboardingChecklistItemInterface) => {\n const checkmark = checked ?
\n let itemClassName = checked ? \"onboarding-checklist-item completed\" : \"onboarding-checklist-item\"\n if (link) {\n itemClassName += ' focus-on-light'\n return {checkmark}{name} \n }\n\n return ({checkmark}{name}
)\n}\n\nconst OnboardingChecklist = ({ onboardingChecklist, firstName, }: { onboardingChecklist: Array, firstName: string, }) => {\n return (\n \n
\n
Welcome, {firstName}! \n
Follow these steps to get the ball rolling.
\n
\n
\n
\n
\n
\n {blogPost.title} \n {blogPost.topic} \n \n )\n}\n\nconst TeacherCenterHighlights = ({ featuredBlogPosts, }) => {\n return (\n \n Teacher Center Highlights \n {featuredBlogPosts.map(bp => \n )\n}\n\nexport default TeacherCenterHighlights\n","import * as React from 'react'\n\nexport const WORLD_HISTORY = 'worldHistory'\nexport const AI_KNOWLEDGE = 'aiKnowledge'\n\nconst cardData = {\n [WORLD_HISTORY]: {\n title: 'World History Activities',\n content: (\n \n
Who is it for? \n
High school world history and ELA teachers who want to supplement their curriculum with a deep dive into essential world history topics and themes.
\n
Pair with OER Project for deeper learning \n
Each activity has a free paired activity from OER Project that can be used in tandem with Quill activities.
\n
\n
Who is it for? \n
8-12 Computer Science, ELA, or General Education teachers who want to introduce nonfiction articles about AI and its impact on society to their classrooms.
\n
Pair with aiEDU for deeper learning \n
Each activity has a free paired activity from our partner nonprofit aiEDU that can be used in tandem with Quill activities.
\n
Save \n\n if (selectedSubjectAreaIds.length && minimumGradeLevel && maximumGradeLevel) {\n saveButton = Save \n }\n\n return (\n \n
\n \n \n
\n
\n
Select the grade level and subjects you teach \n
Sharing the grade level and subjects you teach helps us make better decisions about what kind of content to create and what new product features to build. The more information we have, the better we can support you and your students!
\n
\n
\n
\n
You can edit this later in account settings
\n {saveButton}\n
Skip for now \n
\n
\n
\n )\n}\n\nexport default TeacherInfoModal\n","!function(t,e){\"object\"==typeof exports&&\"object\"==typeof module?module.exports=e(require(\"react\")):\"function\"==typeof define&&define.amd?define([\"react\"],e):\"object\"==typeof exports?exports.ReactConfetti=e(require(\"react\")):t.ReactConfetti=e(t.React)}(\"undefined\"!=typeof self?self:this,(function(t){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(t,\"__esModule\",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&\"object\"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,\"default\",{enumerable:!0,value:t}),2&e&&\"string\"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,\"a\",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p=\"\",n(n.s=2)}([function(e,n){e.exports=t},function(t,e,n){\"use strict\";var r={linear:function(t,e,n,r){return(n-e)*t/r+e},easeInQuad:function(t,e,n,r){return(n-e)*(t/=r)*t+e},easeOutQuad:function(t,e,n,r){return-(n-e)*(t/=r)*(t-2)+e},easeInOutQuad:function(t,e,n,r){var i=n-e;return(t/=r/2)<1?i/2*t*t+e:-i/2*(--t*(t-2)-1)+e},easeInCubic:function(t,e,n,r){return(n-e)*(t/=r)*t*t+e},easeOutCubic:function(t,e,n,r){return(n-e)*((t=t/r-1)*t*t+1)+e},easeInOutCubic:function(t,e,n,r){var i=n-e;return(t/=r/2)<1?i/2*t*t*t+e:i/2*((t-=2)*t*t+2)+e},easeInQuart:function(t,e,n,r){return(n-e)*(t/=r)*t*t*t+e},easeOutQuart:function(t,e,n,r){return-(n-e)*((t=t/r-1)*t*t*t-1)+e},easeInOutQuart:function(t,e,n,r){var i=n-e;return(t/=r/2)<1?i/2*t*t*t*t+e:-i/2*((t-=2)*t*t*t-2)+e},easeInQuint:function(t,e,n,r){return(n-e)*(t/=r)*t*t*t*t+e},easeOutQuint:function(t,e,n,r){return(n-e)*((t=t/r-1)*t*t*t*t+1)+e},easeInOutQuint:function(t,e,n,r){var i=n-e;return(t/=r/2)<1?i/2*t*t*t*t*t+e:i/2*((t-=2)*t*t*t*t+2)+e},easeInSine:function(t,e,n,r){var i=n-e;return-i*Math.cos(t/r*(Math.PI/2))+i+e},easeOutSine:function(t,e,n,r){return(n-e)*Math.sin(t/r*(Math.PI/2))+e},easeInOutSine:function(t,e,n,r){return-(n-e)/2*(Math.cos(Math.PI*t/r)-1)+e},easeInExpo:function(t,e,n,r){return 0==t?e:(n-e)*Math.pow(2,10*(t/r-1))+e},easeOutExpo:function(t,e,n,r){var i=n-e;return t==r?e+i:i*(1-Math.pow(2,-10*t/r))+e},easeInOutExpo:function(t,e,n,r){var i=n-e;return 0===t?e:t===r?e+i:(t/=r/2)<1?i/2*Math.pow(2,10*(t-1))+e:i/2*(2-Math.pow(2,-10*--t))+e},easeInCirc:function(t,e,n,r){return-(n-e)*(Math.sqrt(1-(t/=r)*t)-1)+e},easeOutCirc:function(t,e,n,r){return(n-e)*Math.sqrt(1-(t=t/r-1)*t)+e},easeInOutCirc:function(t,e,n,r){var i=n-e;return(t/=r/2)<1?-i/2*(Math.sqrt(1-t*t)-1)+e:i/2*(Math.sqrt(1-(t-=2)*t)+1)+e},easeInElastic:function(t,e,n,r){var i,o,a,c=n-e;return a=1.70158,0===t?e:1==(t/=r)?e+c:((o=0)||(o=.3*r),(i=c)=1&&this.rotationDirection===i.Positive?this.rotationDirection=i.Negative:this.rotateY<=-1&&this.rotationDirection===i.Negative&&(this.rotationDirection=i.Positive);var s=.1*this.rotationDirection;if(this.rotateY+=s,this.angle+=this.angularSpin,this.context.save(),this.context.translate(this.x,this.y),this.context.rotate(this.angle),this.context.scale(1,this.rotateY),this.context.rotate(this.angle),this.context.beginPath(),this.context.fillStyle=this.color,this.context.strokeStyle=this.color,this.context.globalAlpha=a,this.context.lineCap=\"round\",this.context.lineWidth=2,c&&\"function\"==typeof c)c.call(this,this.context);else switch(this.shape){case r.Circle:this.context.beginPath(),this.context.arc(0,0,this.radius,0,2*Math.PI),this.context.fill();break;case r.Square:this.context.fillRect(-this.w/2,-this.h/2,this.w,this.h);break;case r.Strip:this.context.fillRect(-this.w/6,-this.h/2,this.w/3,this.h)}this.context.closePath(),this.context.restore()}}])&&f(e.prototype,n),o&&f(e,o),t}();function p(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var v=function t(e,n){var r=this;!function(t,e){if(!(t instanceof e))throw new TypeError(\"Cannot call a class as a function\")}(this,t),p(this,\"canvas\",void 0),p(this,\"context\",void 0),p(this,\"getOptions\",void 0),p(this,\"x\",0),p(this,\"y\",0),p(this,\"w\",0),p(this,\"h\",0),p(this,\"lastNumberOfPieces\",0),p(this,\"tweenInitTime\",Date.now()),p(this,\"particles\",[]),p(this,\"particlesGenerated\",0),p(this,\"removeParticleAt\",(function(t){r.particles.splice(t,1)})),p(this,\"getParticle\",(function(){var t=u(r.x,r.w+r.x),e=u(r.y,r.h+r.y);return new l(r.context,r.getOptions,t,e)})),p(this,\"animate\",(function(){var t=r.canvas,e=r.context,n=r.particlesGenerated,i=r.lastNumberOfPieces,o=r.getOptions(),a=o.run,c=o.recycle,s=o.numberOfPieces,u=o.debug,f=o.tweenFunction,h=o.tweenDuration;if(!a)return!1;var l=r.particles.length,p=c?l:n,v=Date.now();if(ph?h:Math.max(0,v-y),p,s,h),b=Math.round(d-p),g=0;gt.height||e.y<-100||e.x>t.width+100||e.x<-100)&&(c&&p<=s?r.particles[n]=r.getParticle():r.removeParticleAt(n))})),l>0||p0&&n.call(r,r),r._options.run=!1)})),g(this,\"reset\",(function(){r.generator&&r.generator.particlesGenerated>0&&(r.generator.particlesGenerated=0,r.generator.particles=[],r.generator.lastNumberOfPieces=0)})),g(this,\"stop\",(function(){r.options={run:!1},r.rafId&&(cancelAnimationFrame(r.rafId),r.rafId=void 0)})),this.canvas=e;var i=this.canvas.getContext(\"2d\");if(!i)throw new Error(\"Could not get canvas context\");this.context=i,this.generator=new v(this.canvas,(function(){return r.options})),this.options=n,this.update()}var e,n,r;return e=t,(n=[{key:\"options\",get:function(){return this._options},set:function(t){var e=this._options&&this._options.run,n=this._options&&this._options.recycle;this.setOptionsWithDefaults(t),this.generator&&(Object.assign(this.generator,this.options.confettiSource),\"boolean\"==typeof t.recycle&&t.recycle&&!1===n&&(this.generator.lastNumberOfPieces=this.generator.particles.length)),\"boolean\"==typeof t.run&&t.run&&!1===e&&this.update()}}])&&b(e.prototype,n),r&&b(e,r),t}();function m(t){return function(t){if(Array.isArray(t))return C(t)}(t)||function(t){if(\"undefined\"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||S(t)||function(){throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\")}()}function x(t){return(x=\"function\"==typeof Symbol&&\"symbol\"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&\"function\"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?\"symbol\":typeof t})(t)}function P(){return(P=Object.assign||function(t){for(var e=1;et.length)&&(e=t.length);for(var n=0,r=new Array(e);n1?n-1:0),c=1;c {\n const { width, height } = size;\n\n const { modalRef } = useModalAccessibility(close);\n\n return (\n \n
\n
\n
\n \n
\n
\n
Welcome to Quill! \n
Our mission as a non-profit is to help students become strong writers, so all our content is completely free to use with an unlimited number of students.
\n
\n
\n
\n\n
\n
\n
Try a Demo \n
Play around with a fully loaded demo to see sample student data and reports.
\n
Start exploring \n
\n\n
\n
Start Setting Up \n
Ready to set up your own classes? Jump right into your account.
\n
Let's go! \n
\n
\n\n
>';\n var propFullNameSafe = propFullName || propName;\n /* istanbul ignore else */\n\n if (props[propName] == null) {\n if (isRequired) {\n return new Error(\"Required \".concat(location, \" `\").concat(propFullNameSafe, \"` was not specified in `\").concat(componentNameSafe, \"`.\"));\n }\n\n return null;\n }\n\n for (var _len = arguments.length, args = new Array(_len > 6 ? _len - 6 : 0), _key = 6; _key < _len; _key++) {\n args[_key - 6] = arguments[_key];\n }\n\n return validate.apply(void 0, [props, propName, componentNameSafe, location, propFullNameSafe].concat(args));\n }\n\n var chainedCheckType = checkType.bind(null, false);\n chainedCheckType.isRequired = checkType.bind(null, true);\n return chainedCheckType;\n}\n\ncreateChainableTypeChecker(function (props, propName, componentName, location, propFullName) {\n var propValue = props[propName];\n var Component = propValue;\n\n if (! /*#__PURE__*/React.isValidElement(propValue) && isValidElementType(propValue)) {\n var ownProps = {\n ref: function ref() {},\n step: {}\n };\n Component = /*#__PURE__*/React.createElement(Component, ownProps);\n }\n\n if (is.string(propValue) || is.number(propValue) || !isValidElementType(propValue) || !([Element, ForwardRef].indexOf(typeOf(Component)) !== -1)) {\n return new Error(\"Invalid \".concat(location, \" `\").concat(propFullName, \"` supplied to `\").concat(componentName, \"`. Expected a React class or forwardRef.\"));\n }\n\n return undefined;\n});\n\nvar defaultOptions = {\n arrowColor: '#fff',\n backgroundColor: '#fff',\n beaconSize: 36,\n overlayColor: 'rgba(0, 0, 0, 0.5)',\n primaryColor: '#f04',\n spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',\n textColor: '#333',\n zIndex: 100\n};\nvar buttonBase = {\n backgroundColor: 'transparent',\n border: 0,\n borderRadius: 0,\n color: '#555',\n cursor: 'pointer',\n fontSize: 16,\n lineHeight: 1,\n padding: 8,\n WebkitAppearance: 'none'\n};\nvar spotlight = {\n borderRadius: 4,\n position: 'absolute'\n};\nfunction getStyles() {\n var stepStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var options = deepmerge(defaultOptions, stepStyles.options || {});\n var width = 290;\n\n if (window.innerWidth > 480) {\n width = 380;\n }\n\n if (options.width) {\n if (window.innerWidth < options.width) {\n width = window.innerWidth - 30;\n } else {\n width = options.width; //eslint-disable-line prefer-destructuring\n }\n }\n\n var overlay = {\n bottom: 0,\n left: 0,\n overflow: 'hidden',\n position: 'absolute',\n right: 0,\n top: 0,\n zIndex: options.zIndex\n };\n var defaultStyles = {\n beacon: _objectSpread2(_objectSpread2({}, buttonBase), {}, {\n display: 'inline-block',\n height: options.beaconSize,\n position: 'relative',\n width: options.beaconSize,\n zIndex: options.zIndex\n }),\n beaconInner: {\n animation: 'joyride-beacon-inner 1.2s infinite ease-in-out',\n backgroundColor: options.primaryColor,\n borderRadius: '50%',\n display: 'block',\n height: '50%',\n left: '50%',\n opacity: 0.7,\n position: 'absolute',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n width: '50%'\n },\n beaconOuter: {\n animation: 'joyride-beacon-outer 1.2s infinite ease-in-out',\n backgroundColor: \"rgba(\".concat(hexToRGB(options.primaryColor).join(','), \", 0.2)\"),\n border: \"2px solid \".concat(options.primaryColor),\n borderRadius: '50%',\n boxSizing: 'border-box',\n display: 'block',\n height: '100%',\n left: 0,\n opacity: 0.9,\n position: 'absolute',\n top: 0,\n transformOrigin: 'center',\n width: '100%'\n },\n tooltip: {\n backgroundColor: options.backgroundColor,\n borderRadius: 5,\n boxSizing: 'border-box',\n color: options.textColor,\n fontSize: 16,\n maxWidth: '100%',\n padding: 15,\n position: 'relative',\n width: width\n },\n tooltipContainer: {\n lineHeight: 1.4,\n textAlign: 'center'\n },\n tooltipTitle: {\n fontSize: 18,\n margin: 0\n },\n tooltipContent: {\n padding: '20px 10px'\n },\n tooltipFooter: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-end',\n marginTop: 15\n },\n tooltipFooterSpacer: {\n flex: 1\n },\n buttonNext: _objectSpread2(_objectSpread2({}, buttonBase), {}, {\n backgroundColor: options.primaryColor,\n borderRadius: 4,\n color: '#fff'\n }),\n buttonBack: _objectSpread2(_objectSpread2({}, buttonBase), {}, {\n color: options.primaryColor,\n marginLeft: 'auto',\n marginRight: 5\n }),\n buttonClose: _objectSpread2(_objectSpread2({}, buttonBase), {}, {\n color: options.textColor,\n height: 14,\n padding: 15,\n position: 'absolute',\n right: 0,\n top: 0,\n width: 14\n }),\n buttonSkip: _objectSpread2(_objectSpread2({}, buttonBase), {}, {\n color: options.textColor,\n fontSize: 14\n }),\n overlay: _objectSpread2(_objectSpread2({}, overlay), {}, {\n backgroundColor: options.overlayColor,\n mixBlendMode: 'hard-light'\n }),\n overlayLegacy: _objectSpread2({}, overlay),\n overlayLegacyCenter: _objectSpread2(_objectSpread2({}, overlay), {}, {\n backgroundColor: options.overlayColor\n }),\n spotlight: _objectSpread2(_objectSpread2({}, spotlight), {}, {\n backgroundColor: 'gray'\n }),\n spotlightLegacy: _objectSpread2(_objectSpread2({}, spotlight), {}, {\n boxShadow: \"0 0 0 9999px \".concat(options.overlayColor, \", \").concat(options.spotlightShadow)\n }),\n floaterStyles: {\n arrow: {\n color: options.arrowColor\n },\n options: {\n zIndex: options.zIndex + 100\n }\n },\n options: options\n };\n return deepmerge(defaultStyles, stepStyles);\n}\n\nvar DEFAULTS = {\n floaterProps: {\n options: {\n preventOverflow: {\n boundariesElement: 'scrollParent'\n }\n },\n wrapperOptions: {\n offset: -18,\n position: true\n }\n },\n locale: {\n back: 'Back',\n close: 'Close',\n last: 'Last',\n next: 'Next',\n open: 'Open the dialog',\n skip: 'Skip'\n },\n step: {\n event: 'click',\n placement: 'bottom',\n offset: 10\n }\n};\n\nfunction getTourProps(props) {\n var sharedTourProps = ['beaconComponent', 'disableCloseOnEsc', 'disableOverlay', 'disableOverlayClose', 'disableScrolling', 'disableScrollParentFix', 'floaterProps', 'hideBackButton', 'hideCloseButton', 'locale', 'showProgress', 'showSkipButton', 'spotlightClicks', 'spotlightPadding', 'styles', 'tooltipComponent'];\n return Object.keys(props).filter(function (d) {\n return sharedTourProps.indexOf(d) !== -1;\n }).reduce(function (acc, i) {\n acc[i] = props[i]; //eslint-disable-line react/destructuring-assignment\n\n return acc;\n }, {});\n}\n\nfunction getMergedStep(step, props) {\n if (!step) return null;\n var mergedStep = deepmerge.all([getTourProps(props), DEFAULTS.step, step], {\n isMergeableObject: is.plainObject\n });\n var mergedStyles = getStyles(deepmerge(props.styles || {}, step.styles || {}));\n var scrollParent = hasCustomScrollParent(getElement(step.target), mergedStep.disableScrollParentFix);\n var floaterProps = deepmerge.all([props.floaterProps || {}, DEFAULTS.floaterProps, mergedStep.floaterProps || {}]); // Set react-floater props\n\n floaterProps.offset = mergedStep.offset;\n floaterProps.styles = deepmerge(floaterProps.styles || {}, mergedStyles.floaterStyles || {});\n delete mergedStyles.floaterStyles;\n floaterProps.offset += props.spotlightPadding || step.spotlightPadding || 0;\n\n if (step.placementBeacon) {\n floaterProps.wrapperOptions.placement = step.placementBeacon;\n }\n\n if (scrollParent) {\n floaterProps.options.preventOverflow.boundariesElement = 'window';\n }\n\n return _objectSpread2(_objectSpread2({}, mergedStep), {}, {\n locale: deepmerge.all([DEFAULTS.locale, props.locale || {}, mergedStep.locale || {}]),\n floaterProps: floaterProps,\n styles: mergedStyles\n });\n}\n/**\n * Validate if a step is valid\n *\n * @param {Object} step - A step object\n * @param {boolean} debug\n *\n * @returns {boolean} - True if the step is valid, false otherwise\n */\n\nfunction validateStep(step) {\n var debug = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n\n if (!is.plainObject(step)) {\n log({\n title: 'validateStep',\n data: 'step must be an object',\n warn: true,\n debug: debug\n });\n return false;\n }\n\n if (!step.target) {\n log({\n title: 'validateStep',\n data: 'target is missing from the step',\n warn: true,\n debug: debug\n });\n return false;\n }\n\n return true;\n}\n/**\n * Validate if steps is valid\n *\n * @param {Array} steps - A steps array\n * @param {boolean} debug\n *\n * @returns {boolean} - True if the steps are valid, false otherwise\n */\n\nfunction validateSteps(steps) {\n var debug = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n\n if (!is.array(steps)) {\n log({\n title: 'validateSteps',\n data: 'steps must be an array',\n warn: true,\n debug: debug\n });\n return false;\n }\n\n return steps.every(function (d) {\n return validateStep(d, debug);\n });\n}\n\nvar Scope = /*#__PURE__*/_createClass(function Scope(_element) {\n var _this = this;\n\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n _classCallCheck(this, Scope);\n\n _defineProperty(this, \"element\", void 0);\n\n _defineProperty(this, \"options\", void 0);\n\n _defineProperty(this, \"canBeTabbed\", function (element) {\n var tabIndex = element.tabIndex;\n if (tabIndex === null || tabIndex < 0) tabIndex = undefined;\n var isTabIndexNaN = isNaN(tabIndex);\n return !isTabIndexNaN && _this.canHaveFocus(element);\n });\n\n _defineProperty(this, \"canHaveFocus\", function (element) {\n var validTabNodes = /input|select|textarea|button|object/;\n var nodeName = element.nodeName.toLowerCase();\n var res = validTabNodes.test(nodeName) && !element.getAttribute('disabled') || nodeName === 'a' && !!element.getAttribute('href');\n return res && _this.isVisible(element);\n });\n\n _defineProperty(this, \"findValidTabElements\", function () {\n return [].slice.call(_this.element.querySelectorAll('*'), 0).filter(_this.canBeTabbed);\n });\n\n _defineProperty(this, \"handleKeyDown\", function (e) {\n var _this$options$keyCode = _this.options.keyCode,\n keyCode = _this$options$keyCode === void 0 ? 9 : _this$options$keyCode;\n /* istanbul ignore else */\n\n if (e.keyCode === keyCode) {\n _this.interceptTab(e);\n }\n });\n\n _defineProperty(this, \"interceptTab\", function (event) {\n var elements = _this.findValidTabElements();\n\n if (!elements.length) {\n return;\n }\n\n event.preventDefault();\n var shiftKey = event.shiftKey;\n var x = elements.indexOf(document.activeElement);\n\n if (x === -1 || !shiftKey && x + 1 === elements.length) {\n x = 0;\n } else if (shiftKey && x === 0) {\n x = elements.length - 1;\n } else {\n x += shiftKey ? -1 : 1;\n }\n\n elements[x].focus();\n });\n\n _defineProperty(this, \"isHidden\", function (element) {\n var noSize = element.offsetWidth <= 0 && element.offsetHeight <= 0;\n var style = window.getComputedStyle(element);\n if (noSize && !element.innerHTML) return true;\n return noSize && style.getPropertyValue('overflow') !== 'visible' || style.getPropertyValue('display') === 'none';\n });\n\n _defineProperty(this, \"isVisible\", function (element) {\n var parentElement = element;\n\n while (parentElement) {\n /* istanbul ignore else */\n if (parentElement instanceof HTMLElement) {\n if (parentElement === document.body) break;\n /* istanbul ignore else */\n\n if (_this.isHidden(parentElement)) return false;\n parentElement = parentElement.parentNode;\n }\n }\n\n return true;\n });\n\n _defineProperty(this, \"removeScope\", function () {\n window.removeEventListener('keydown', _this.handleKeyDown);\n });\n\n _defineProperty(this, \"checkFocus\", function (target) {\n if (document.activeElement !== target) {\n target.focus();\n window.requestAnimationFrame(function () {\n return _this.checkFocus(target);\n });\n }\n });\n\n _defineProperty(this, \"setFocus\", function () {\n var selector = _this.options.selector;\n if (!selector) return;\n\n var target = _this.element.querySelector(selector);\n /* istanbul ignore else */\n\n\n if (target) {\n window.requestAnimationFrame(function () {\n return _this.checkFocus(target);\n });\n }\n });\n\n if (!(_element instanceof HTMLElement)) {\n throw new TypeError('Invalid parameter: element must be an HTMLElement');\n }\n\n this.element = _element;\n this.options = options;\n window.addEventListener('keydown', this.handleKeyDown, false);\n this.setFocus();\n});\n\nvar JoyrideBeacon = /*#__PURE__*/function (_React$Component) {\n _inherits(JoyrideBeacon, _React$Component);\n\n var _super = _createSuper(JoyrideBeacon);\n\n function JoyrideBeacon(props) {\n var _this;\n\n _classCallCheck(this, JoyrideBeacon);\n\n _this = _super.call(this, props);\n\n _defineProperty(_assertThisInitialized(_this), \"setBeaconRef\", function (c) {\n _this.beacon = c;\n });\n\n if (!props.beaconComponent) {\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n var css = \"\\n @keyframes joyride-beacon-inner {\\n 20% {\\n opacity: 0.9;\\n }\\n \\n 90% {\\n opacity: 0.7;\\n }\\n }\\n \\n @keyframes joyride-beacon-outer {\\n 0% {\\n transform: scale(1);\\n }\\n \\n 45% {\\n opacity: 0.7;\\n transform: scale(0.75);\\n }\\n \\n 100% {\\n opacity: 0.9;\\n transform: scale(1);\\n }\\n }\\n \";\n style.type = 'text/css';\n style.id = 'joyride-beacon-animation';\n\n if (props.nonce !== undefined) {\n style.setAttribute('nonce', props.nonce);\n }\n\n style.appendChild(document.createTextNode(css));\n head.appendChild(style);\n }\n\n return _this;\n }\n\n _createClass(JoyrideBeacon, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n var _this2 = this;\n\n var shouldFocus = this.props.shouldFocus;\n\n setTimeout(function () {\n if (is.domElement(_this2.beacon) && shouldFocus) {\n _this2.beacon.focus();\n }\n }, 0);\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n var style = document.getElementById('joyride-beacon-animation');\n\n if (style) {\n style.parentNode.removeChild(style);\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this$props = this.props,\n beaconComponent = _this$props.beaconComponent,\n locale = _this$props.locale,\n onClickOrHover = _this$props.onClickOrHover,\n styles = _this$props.styles;\n var props = {\n 'aria-label': locale.open,\n onClick: onClickOrHover,\n onMouseEnter: onClickOrHover,\n ref: this.setBeaconRef,\n title: locale.open\n };\n var component;\n\n if (beaconComponent) {\n var BeaconComponent = beaconComponent;\n component = /*#__PURE__*/React.createElement(BeaconComponent, props);\n } else {\n component = /*#__PURE__*/React.createElement(\"button\", _extends({\n key: \"JoyrideBeacon\",\n className: \"react-joyride__beacon\",\n style: styles.beacon,\n type: \"button\"\n }, props), /*#__PURE__*/React.createElement(\"span\", {\n style: styles.beaconInner\n }), /*#__PURE__*/React.createElement(\"span\", {\n style: styles.beaconOuter\n }));\n }\n\n return component;\n }\n }]);\n\n return JoyrideBeacon;\n}(React.Component);\n\nfunction JoyrideSpotlight(_ref) {\n var styles = _ref.styles;\n return /*#__PURE__*/React.createElement(\"div\", {\n key: \"JoyrideSpotlight\",\n className: \"react-joyride__spotlight\",\n style: styles\n });\n}\n\nvar _excluded$2 = [\"mixBlendMode\", \"zIndex\"];\n\nvar JoyrideOverlay = /*#__PURE__*/function (_React$Component) {\n _inherits(JoyrideOverlay, _React$Component);\n\n var _super = _createSuper(JoyrideOverlay);\n\n function JoyrideOverlay() {\n var _this;\n\n _classCallCheck(this, JoyrideOverlay);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _super.call.apply(_super, [this].concat(args));\n\n _defineProperty(_assertThisInitialized(_this), \"_isMounted\", false);\n\n _defineProperty(_assertThisInitialized(_this), \"state\", {\n mouseOverSpotlight: false,\n isScrolling: false,\n showSpotlight: true\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleMouseMove\", function (e) {\n var mouseOverSpotlight = _this.state.mouseOverSpotlight;\n var _this$spotlightStyles = _this.spotlightStyles,\n height = _this$spotlightStyles.height,\n left = _this$spotlightStyles.left,\n position = _this$spotlightStyles.position,\n top = _this$spotlightStyles.top,\n width = _this$spotlightStyles.width;\n var offsetY = position === 'fixed' ? e.clientY : e.pageY;\n var offsetX = position === 'fixed' ? e.clientX : e.pageX;\n var inSpotlightHeight = offsetY >= top && offsetY <= top + height;\n var inSpotlightWidth = offsetX >= left && offsetX <= left + width;\n var inSpotlight = inSpotlightWidth && inSpotlightHeight;\n\n if (inSpotlight !== mouseOverSpotlight) {\n _this.updateState({\n mouseOverSpotlight: inSpotlight\n });\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleScroll\", function () {\n var target = _this.props.target;\n var element = getElement(target);\n\n if (_this.scrollParent !== document) {\n var isScrolling = _this.state.isScrolling;\n\n if (!isScrolling) {\n _this.updateState({\n isScrolling: true,\n showSpotlight: false\n });\n }\n\n clearTimeout(_this.scrollTimeout);\n _this.scrollTimeout = setTimeout(function () {\n _this.updateState({\n isScrolling: false,\n showSpotlight: true\n });\n }, 50);\n } else if (hasPosition(element, 'sticky')) {\n _this.updateState({});\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleResize\", function () {\n clearTimeout(_this.resizeTimeout);\n _this.resizeTimeout = setTimeout(function () {\n if (!_this._isMounted) {\n return;\n }\n\n _this.forceUpdate();\n }, 100);\n });\n\n return _this;\n }\n\n _createClass(JoyrideOverlay, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n var _this$props = this.props;\n _this$props.debug;\n _this$props.disableScrolling;\n var disableScrollParentFix = _this$props.disableScrollParentFix,\n target = _this$props.target;\n var element = getElement(target);\n this.scrollParent = getScrollParent(element, disableScrollParentFix, true);\n this._isMounted = true;\n\n window.addEventListener('resize', this.handleResize);\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate(prevProps) {\n var _this2 = this;\n\n var _this$props2 = this.props,\n lifecycle = _this$props2.lifecycle,\n spotlightClicks = _this$props2.spotlightClicks;\n\n var _treeChanges = treeChanges(prevProps, this.props),\n changed = _treeChanges.changed;\n /* istanbul ignore else */\n\n\n if (changed('lifecycle', LIFECYCLE.TOOLTIP)) {\n this.scrollParent.addEventListener('scroll', this.handleScroll, {\n passive: true\n });\n setTimeout(function () {\n var isScrolling = _this2.state.isScrolling;\n\n if (!isScrolling) {\n _this2.updateState({\n showSpotlight: true\n });\n }\n }, 100);\n }\n\n if (changed('spotlightClicks') || changed('disableOverlay') || changed('lifecycle')) {\n if (spotlightClicks && lifecycle === LIFECYCLE.TOOLTIP) {\n window.addEventListener('mousemove', this.handleMouseMove, false);\n } else if (lifecycle !== LIFECYCLE.TOOLTIP) {\n window.removeEventListener('mousemove', this.handleMouseMove);\n }\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this._isMounted = false;\n window.removeEventListener('mousemove', this.handleMouseMove);\n window.removeEventListener('resize', this.handleResize);\n clearTimeout(this.resizeTimeout);\n clearTimeout(this.scrollTimeout);\n this.scrollParent.removeEventListener('scroll', this.handleScroll);\n }\n }, {\n key: \"spotlightStyles\",\n get: function get() {\n var showSpotlight = this.state.showSpotlight;\n var _this$props3 = this.props,\n disableScrollParentFix = _this$props3.disableScrollParentFix,\n spotlightClicks = _this$props3.spotlightClicks,\n spotlightPadding = _this$props3.spotlightPadding,\n styles = _this$props3.styles,\n target = _this$props3.target;\n var element = getElement(target);\n var elementRect = getClientRect(element);\n var isFixedTarget = hasPosition(element);\n var top = getElementPosition(element, spotlightPadding, disableScrollParentFix);\n return _objectSpread2(_objectSpread2({}, isLegacy() ? styles.spotlightLegacy : styles.spotlight), {}, {\n height: Math.round(elementRect.height + spotlightPadding * 2),\n left: Math.round(elementRect.left - spotlightPadding),\n opacity: showSpotlight ? 1 : 0,\n pointerEvents: spotlightClicks ? 'none' : 'auto',\n position: isFixedTarget ? 'fixed' : 'absolute',\n top: top,\n transition: 'opacity 0.2s',\n width: Math.round(elementRect.width + spotlightPadding * 2)\n });\n }\n }, {\n key: \"updateState\",\n value: function updateState(state) {\n if (!this._isMounted) {\n return;\n }\n\n this.setState(state);\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this$state = this.state,\n mouseOverSpotlight = _this$state.mouseOverSpotlight,\n showSpotlight = _this$state.showSpotlight;\n var _this$props4 = this.props,\n disableOverlay = _this$props4.disableOverlay,\n disableOverlayClose = _this$props4.disableOverlayClose,\n lifecycle = _this$props4.lifecycle,\n onClickOverlay = _this$props4.onClickOverlay,\n placement = _this$props4.placement,\n styles = _this$props4.styles;\n\n if (disableOverlay || lifecycle !== LIFECYCLE.TOOLTIP) {\n return null;\n }\n\n var baseStyles = styles.overlay;\n /* istanbul ignore else */\n\n if (isLegacy()) {\n baseStyles = placement === 'center' ? styles.overlayLegacyCenter : styles.overlayLegacy;\n }\n\n var stylesOverlay = _objectSpread2({\n cursor: disableOverlayClose ? 'default' : 'pointer',\n height: getDocumentHeight(),\n pointerEvents: mouseOverSpotlight ? 'none' : 'auto'\n }, baseStyles);\n\n var spotlight = placement !== 'center' && showSpotlight && /*#__PURE__*/React.createElement(JoyrideSpotlight, {\n styles: this.spotlightStyles\n }); // Hack for Safari bug with mix-blend-mode with z-index\n\n if (getBrowser() === 'safari') {\n stylesOverlay.mixBlendMode;\n stylesOverlay.zIndex;\n var safarOverlay = _objectWithoutProperties(stylesOverlay, _excluded$2);\n\n spotlight = /*#__PURE__*/React.createElement(\"div\", {\n style: _objectSpread2({}, safarOverlay)\n }, spotlight);\n delete stylesOverlay.backgroundColor;\n }\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"react-joyride__overlay\",\n style: stylesOverlay,\n onClick: onClickOverlay\n }, spotlight);\n }\n }]);\n\n return JoyrideOverlay;\n}(React.Component);\n\nvar _excluded$1 = [\"styles\"],\n _excluded2 = [\"color\", \"height\", \"width\"];\n\nfunction JoyrideTooltipCloseBtn(_ref) {\n var styles = _ref.styles,\n props = _objectWithoutProperties(_ref, _excluded$1);\n\n var color = styles.color,\n height = styles.height,\n width = styles.width,\n style = _objectWithoutProperties(styles, _excluded2);\n\n return /*#__PURE__*/React.createElement(\"button\", _extends({\n style: style,\n type: \"button\"\n }, props), /*#__PURE__*/React.createElement(\"svg\", {\n width: typeof width === 'number' ? \"\".concat(width, \"px\") : width,\n height: typeof height === 'number' ? \"\".concat(height, \"px\") : height,\n viewBox: \"0 0 18 18\",\n version: \"1.1\",\n xmlns: \"http://www.w3.org/2000/svg\",\n preserveAspectRatio: \"xMidYMid\"\n }, /*#__PURE__*/React.createElement(\"g\", null, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z\",\n fill: color\n }))));\n}\n\nvar JoyrideTooltipContainer = /*#__PURE__*/function (_React$Component) {\n _inherits(JoyrideTooltipContainer, _React$Component);\n\n var _super = _createSuper(JoyrideTooltipContainer);\n\n function JoyrideTooltipContainer() {\n _classCallCheck(this, JoyrideTooltipContainer);\n\n return _super.apply(this, arguments);\n }\n\n _createClass(JoyrideTooltipContainer, [{\n key: \"render\",\n value: function render() {\n var _this$props = this.props,\n backProps = _this$props.backProps,\n closeProps = _this$props.closeProps,\n continuous = _this$props.continuous,\n index = _this$props.index,\n isLastStep = _this$props.isLastStep,\n primaryProps = _this$props.primaryProps,\n size = _this$props.size,\n skipProps = _this$props.skipProps,\n step = _this$props.step,\n tooltipProps = _this$props.tooltipProps;\n var content = step.content,\n hideBackButton = step.hideBackButton,\n hideCloseButton = step.hideCloseButton,\n hideFooter = step.hideFooter,\n showProgress = step.showProgress,\n showSkipButton = step.showSkipButton,\n title = step.title,\n styles = step.styles;\n var _step$locale = step.locale,\n back = _step$locale.back,\n close = _step$locale.close,\n last = _step$locale.last,\n next = _step$locale.next,\n skip = _step$locale.skip;\n var output = {\n primary: close\n };\n\n if (continuous) {\n output.primary = isLastStep ? last : next;\n\n if (showProgress) {\n output.primary = /*#__PURE__*/React.createElement(\"span\", null, output.primary, \" (\", index + 1, \"/\", size, \")\");\n }\n }\n\n if (showSkipButton && !isLastStep) {\n output.skip = /*#__PURE__*/React.createElement(\"button\", _extends({\n style: styles.buttonSkip,\n type: \"button\",\n \"aria-live\": \"off\"\n }, skipProps), skip);\n }\n\n if (!hideBackButton && index > 0) {\n output.back = /*#__PURE__*/React.createElement(\"button\", _extends({\n style: styles.buttonBack,\n type: \"button\"\n }, backProps), back);\n }\n\n output.close = !hideCloseButton && /*#__PURE__*/React.createElement(JoyrideTooltipCloseBtn, _extends({\n styles: styles.buttonClose\n }, closeProps));\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n key: \"JoyrideTooltip\",\n className: \"react-joyride__tooltip\",\n style: styles.tooltip\n }, tooltipProps), /*#__PURE__*/React.createElement(\"div\", {\n style: styles.tooltipContainer\n }, title && /*#__PURE__*/React.createElement(\"h4\", {\n style: styles.tooltipTitle,\n \"aria-label\": title\n }, title), /*#__PURE__*/React.createElement(\"div\", {\n style: styles.tooltipContent\n }, content)), !hideFooter && /*#__PURE__*/React.createElement(\"div\", {\n style: styles.tooltipFooter\n }, /*#__PURE__*/React.createElement(\"div\", {\n style: styles.tooltipFooterSpacer\n }, output.skip), output.back, /*#__PURE__*/React.createElement(\"button\", _extends({\n style: styles.buttonNext,\n type: \"button\"\n }, primaryProps), output.primary)), output.close);\n }\n }]);\n\n return JoyrideTooltipContainer;\n}(React.Component);\n\nvar _excluded = [\"beaconComponent\", \"tooltipComponent\"];\n\nvar JoyrideTooltip = /*#__PURE__*/function (_React$Component) {\n _inherits(JoyrideTooltip, _React$Component);\n\n var _super = _createSuper(JoyrideTooltip);\n\n function JoyrideTooltip() {\n var _this;\n\n _classCallCheck(this, JoyrideTooltip);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _super.call.apply(_super, [this].concat(args));\n\n _defineProperty(_assertThisInitialized(_this), \"handleClickBack\", function (e) {\n e.preventDefault();\n var helpers = _this.props.helpers;\n helpers.prev();\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleClickClose\", function (e) {\n e.preventDefault();\n var helpers = _this.props.helpers;\n helpers.close();\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleClickPrimary\", function (e) {\n e.preventDefault();\n var _this$props = _this.props,\n continuous = _this$props.continuous,\n helpers = _this$props.helpers;\n\n if (!continuous) {\n helpers.close();\n return;\n }\n\n helpers.next();\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleClickSkip\", function (e) {\n e.preventDefault();\n var helpers = _this.props.helpers;\n helpers.skip();\n });\n\n _defineProperty(_assertThisInitialized(_this), \"getElementsProps\", function () {\n var _this$props2 = _this.props,\n continuous = _this$props2.continuous,\n isLastStep = _this$props2.isLastStep,\n setTooltipRef = _this$props2.setTooltipRef,\n step = _this$props2.step;\n var back = getText(step.locale.back);\n var close = getText(step.locale.close);\n var last = getText(step.locale.last);\n var next = getText(step.locale.next);\n var skip = getText(step.locale.skip);\n var primaryText = continuous ? next : close;\n\n if (isLastStep) {\n primaryText = last;\n }\n\n return {\n backProps: {\n 'aria-label': back,\n 'data-action': 'back',\n onClick: _this.handleClickBack,\n role: 'button',\n title: back\n },\n closeProps: {\n 'aria-label': close,\n 'data-action': 'close',\n onClick: _this.handleClickClose,\n role: 'button',\n title: close\n },\n primaryProps: {\n 'aria-label': primaryText,\n 'data-action': 'primary',\n onClick: _this.handleClickPrimary,\n role: 'button',\n title: primaryText\n },\n skipProps: {\n 'aria-label': skip,\n 'data-action': 'skip',\n onClick: _this.handleClickSkip,\n role: 'button',\n title: skip\n },\n tooltipProps: {\n 'aria-modal': true,\n ref: setTooltipRef,\n role: 'alertdialog'\n }\n };\n });\n\n return _this;\n }\n\n _createClass(JoyrideTooltip, [{\n key: \"render\",\n value: function render() {\n var _this$props3 = this.props,\n continuous = _this$props3.continuous,\n index = _this$props3.index,\n isLastStep = _this$props3.isLastStep,\n size = _this$props3.size,\n step = _this$props3.step;\n\n step.beaconComponent;\n var tooltipComponent = step.tooltipComponent,\n cleanStep = _objectWithoutProperties(step, _excluded);\n\n var component;\n\n if (tooltipComponent) {\n var renderProps = _objectSpread2(_objectSpread2({}, this.getElementsProps()), {}, {\n continuous: continuous,\n index: index,\n isLastStep: isLastStep,\n size: size,\n step: cleanStep\n });\n\n var TooltipComponent = tooltipComponent;\n component = /*#__PURE__*/React.createElement(TooltipComponent, renderProps);\n } else {\n component = /*#__PURE__*/React.createElement(JoyrideTooltipContainer, _extends({}, this.getElementsProps(), {\n continuous: continuous,\n index: index,\n isLastStep: isLastStep,\n size: size,\n step: step\n }));\n }\n\n return component;\n }\n }]);\n\n return JoyrideTooltip;\n}(React.Component);\n\nvar JoyridePortal = /*#__PURE__*/function (_React$Component) {\n _inherits(JoyridePortal, _React$Component);\n\n var _super = _createSuper(JoyridePortal);\n\n function JoyridePortal() {\n _classCallCheck(this, JoyridePortal);\n\n return _super.apply(this, arguments);\n }\n\n _createClass(JoyridePortal, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n if (!canUseDOM) return;\n\n if (!isReact16) {\n this.renderReact15();\n }\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate() {\n if (!canUseDOM) return;\n\n if (!isReact16) {\n this.renderReact15();\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n if (!canUseDOM || !this.node) return;\n\n if (!isReact16) {\n ReactDOM.unmountComponentAtNode(this.node);\n }\n\n if (this.node.parentNode === document.body) {\n document.body.removeChild(this.node);\n this.node = undefined;\n }\n }\n }, {\n key: \"appendNode\",\n value: function appendNode() {\n var id = this.props.id;\n\n if (!this.node) {\n this.node = document.createElement('div');\n /* istanbul ignore else */\n\n if (id) {\n this.node.id = id;\n }\n\n document.body.appendChild(this.node);\n }\n }\n }, {\n key: \"renderReact15\",\n value: function renderReact15() {\n if (!canUseDOM) return null;\n var children = this.props.children;\n\n if (!this.node) {\n this.appendNode();\n }\n\n ReactDOM.unstable_renderSubtreeIntoContainer(this, children, this.node);\n return null;\n }\n }, {\n key: \"renderReact16\",\n value: function renderReact16() {\n if (!canUseDOM || !isReact16) return null;\n var children = this.props.children;\n\n if (!this.node) {\n this.appendNode();\n }\n\n return /*#__PURE__*/ReactDOM.createPortal(children, this.node);\n }\n }, {\n key: \"render\",\n value: function render() {\n if (!isReact16) {\n return null;\n }\n\n return this.renderReact16();\n }\n }]);\n\n return JoyridePortal;\n}(React.Component);\n\nvar JoyrideStep = /*#__PURE__*/function (_React$Component) {\n _inherits(JoyrideStep, _React$Component);\n\n var _super = _createSuper(JoyrideStep);\n\n function JoyrideStep() {\n var _this;\n\n _classCallCheck(this, JoyrideStep);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _super.call.apply(_super, [this].concat(args));\n\n _defineProperty(_assertThisInitialized(_this), \"scope\", {\n removeScope: function removeScope() {}\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleClickHoverBeacon\", function (e) {\n var _this$props = _this.props,\n step = _this$props.step,\n update = _this$props.update;\n\n if (e.type === 'mouseenter' && step.event !== 'hover') {\n return;\n }\n\n update({\n lifecycle: LIFECYCLE.TOOLTIP\n });\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleClickOverlay\", function () {\n var _this$props2 = _this.props,\n helpers = _this$props2.helpers,\n step = _this$props2.step;\n\n if (!step.disableOverlayClose) {\n helpers.close();\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"setTooltipRef\", function (c) {\n _this.tooltip = c;\n });\n\n _defineProperty(_assertThisInitialized(_this), \"setPopper\", function (popper, type) {\n var _this$props3 = _this.props,\n action = _this$props3.action,\n setPopper = _this$props3.setPopper,\n update = _this$props3.update;\n\n if (type === 'wrapper') {\n _this.beaconPopper = popper;\n } else {\n _this.tooltipPopper = popper;\n }\n\n setPopper(popper, type);\n\n if (_this.beaconPopper && _this.tooltipPopper) {\n update({\n action: action === ACTIONS.CLOSE ? ACTIONS.CLOSE : action,\n lifecycle: LIFECYCLE.READY\n });\n }\n });\n\n return _this;\n }\n\n _createClass(JoyrideStep, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n var _this$props4 = this.props,\n debug = _this$props4.debug,\n index = _this$props4.index;\n log({\n title: \"step:\".concat(index),\n data: [{\n key: 'props',\n value: this.props\n }],\n debug: debug\n });\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate(prevProps) {\n var _this$props5 = this.props,\n action = _this$props5.action,\n callback = _this$props5.callback,\n continuous = _this$props5.continuous,\n controlled = _this$props5.controlled,\n debug = _this$props5.debug,\n index = _this$props5.index,\n lifecycle = _this$props5.lifecycle,\n size = _this$props5.size,\n status = _this$props5.status,\n step = _this$props5.step,\n update = _this$props5.update;\n\n var _treeChanges = treeChanges(prevProps, this.props),\n changed = _treeChanges.changed,\n changedFrom = _treeChanges.changedFrom;\n\n var state = {\n action: action,\n controlled: controlled,\n index: index,\n lifecycle: lifecycle,\n size: size,\n status: status\n };\n var skipBeacon = continuous && action !== ACTIONS.CLOSE && (index > 0 || action === ACTIONS.PREV);\n var hasStoreChanged = changed('action') || changed('index') || changed('lifecycle') || changed('status');\n var hasStarted = changedFrom('lifecycle', [LIFECYCLE.TOOLTIP, LIFECYCLE.INIT], LIFECYCLE.INIT);\n var isAfterAction = changed('action', [ACTIONS.NEXT, ACTIONS.PREV, ACTIONS.SKIP, ACTIONS.CLOSE]);\n\n if (isAfterAction && (hasStarted || controlled)) {\n callback(_objectSpread2(_objectSpread2({}, state), {}, {\n index: prevProps.index,\n lifecycle: LIFECYCLE.COMPLETE,\n step: prevProps.step,\n type: EVENTS.STEP_AFTER\n }));\n }\n\n if (changed('index') && index > 0 && lifecycle === LIFECYCLE.INIT && status === STATUS.RUNNING && step.placement === 'center') {\n update({\n lifecycle: LIFECYCLE.READY\n });\n } // There's a step to use, but there's no target in the DOM\n\n\n if (hasStoreChanged && step) {\n var element = getElement(step.target);\n var elementExists = !!element;\n var hasRenderedTarget = elementExists && isElementVisible(element);\n\n if (hasRenderedTarget) {\n if (changedFrom('status', STATUS.READY, STATUS.RUNNING) || changedFrom('lifecycle', LIFECYCLE.INIT, LIFECYCLE.READY)) {\n callback(_objectSpread2(_objectSpread2({}, state), {}, {\n step: step,\n type: EVENTS.STEP_BEFORE\n }));\n }\n } else {\n console.warn(elementExists ? 'Target not visible' : 'Target not mounted', step); //eslint-disable-line no-console\n\n callback(_objectSpread2(_objectSpread2({}, state), {}, {\n type: EVENTS.TARGET_NOT_FOUND,\n step: step\n }));\n\n if (!controlled) {\n update({\n index: index + ([ACTIONS.PREV].indexOf(action) !== -1 ? -1 : 1)\n });\n }\n }\n }\n\n if (changedFrom('lifecycle', LIFECYCLE.INIT, LIFECYCLE.READY)) {\n update({\n lifecycle: hideBeacon(step) || skipBeacon ? LIFECYCLE.TOOLTIP : LIFECYCLE.BEACON\n });\n }\n\n if (changed('index')) {\n log({\n title: \"step:\".concat(lifecycle),\n data: [{\n key: 'props',\n value: this.props\n }],\n debug: debug\n });\n }\n /* istanbul ignore else */\n\n\n if (changed('lifecycle', LIFECYCLE.BEACON)) {\n callback(_objectSpread2(_objectSpread2({}, state), {}, {\n step: step,\n type: EVENTS.BEACON\n }));\n }\n\n if (changed('lifecycle', LIFECYCLE.TOOLTIP)) {\n callback(_objectSpread2(_objectSpread2({}, state), {}, {\n step: step,\n type: EVENTS.TOOLTIP\n }));\n this.scope = new Scope(this.tooltip, {\n selector: '[data-action=primary]'\n });\n this.scope.setFocus();\n }\n\n if (changedFrom('lifecycle', [LIFECYCLE.TOOLTIP, LIFECYCLE.INIT], LIFECYCLE.INIT)) {\n this.scope.removeScope();\n delete this.beaconPopper;\n delete this.tooltipPopper;\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this.scope.removeScope();\n }\n /**\n * Beacon click/hover event listener\n *\n * @param {Event} e\n */\n\n }, {\n key: \"open\",\n get: function get() {\n var _this$props6 = this.props,\n step = _this$props6.step,\n lifecycle = _this$props6.lifecycle;\n return !!(hideBeacon(step) || lifecycle === LIFECYCLE.TOOLTIP);\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this$props7 = this.props,\n continuous = _this$props7.continuous,\n debug = _this$props7.debug,\n helpers = _this$props7.helpers,\n index = _this$props7.index,\n lifecycle = _this$props7.lifecycle,\n nonce = _this$props7.nonce,\n shouldScroll = _this$props7.shouldScroll,\n size = _this$props7.size,\n step = _this$props7.step;\n var target = getElement(step.target);\n\n if (!validateStep(step) || !is.domElement(target)) {\n return null;\n }\n\n return /*#__PURE__*/React.createElement(\"div\", {\n key: \"JoyrideStep-\".concat(index),\n className: \"react-joyride__step\"\n }, /*#__PURE__*/React.createElement(JoyridePortal, {\n id: \"react-joyride-portal\"\n }, /*#__PURE__*/React.createElement(JoyrideOverlay, _extends({}, step, {\n debug: debug,\n lifecycle: lifecycle,\n onClickOverlay: this.handleClickOverlay\n }))), /*#__PURE__*/React.createElement(Floater, _extends({\n component: /*#__PURE__*/React.createElement(JoyrideTooltip, {\n continuous: continuous,\n helpers: helpers,\n index: index,\n isLastStep: index + 1 === size,\n setTooltipRef: this.setTooltipRef,\n size: size,\n step: step\n }),\n debug: debug,\n getPopper: this.setPopper,\n id: \"react-joyride-step-\".concat(index),\n isPositioned: step.isFixed || hasPosition(target),\n open: this.open,\n placement: step.placement,\n target: step.target\n }, step.floaterProps), /*#__PURE__*/React.createElement(JoyrideBeacon, {\n beaconComponent: step.beaconComponent,\n locale: step.locale,\n nonce: nonce,\n onClickOrHover: this.handleClickHoverBeacon,\n shouldFocus: shouldScroll,\n styles: step.styles\n })));\n }\n }]);\n\n return JoyrideStep;\n}(React.Component);\n\nvar Joyride = /*#__PURE__*/function (_React$Component) {\n _inherits(Joyride, _React$Component);\n\n var _super = _createSuper(Joyride);\n\n function Joyride(props) {\n var _this;\n\n _classCallCheck(this, Joyride);\n\n _this = _super.call(this, props);\n\n _defineProperty(_assertThisInitialized(_this), \"initStore\", function () {\n var _this$props = _this.props,\n debug = _this$props.debug,\n getHelpers = _this$props.getHelpers,\n run = _this$props.run,\n stepIndex = _this$props.stepIndex;\n _this.store = new createStore(_objectSpread2(_objectSpread2({}, _this.props), {}, {\n controlled: run && is.number(stepIndex)\n }));\n _this.helpers = _this.store.getHelpers();\n var addListener = _this.store.addListener;\n log({\n title: 'init',\n data: [{\n key: 'props',\n value: _this.props\n }, {\n key: 'state',\n value: _this.state\n }],\n debug: debug\n }); // Sync the store to this component's state.\n\n addListener(_this.syncState);\n getHelpers(_this.helpers);\n return _this.store.getState();\n });\n\n _defineProperty(_assertThisInitialized(_this), \"callback\", function (data) {\n var callback = _this.props.callback;\n /* istanbul ignore else */\n\n if (is[\"function\"](callback)) {\n callback(data);\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"handleKeyboard\", function (e) {\n var _this$state = _this.state,\n index = _this$state.index,\n lifecycle = _this$state.lifecycle;\n var steps = _this.props.steps;\n var step = steps[index];\n var intKey = window.Event ? e.which : e.keyCode;\n\n if (lifecycle === LIFECYCLE.TOOLTIP) {\n if (intKey === 27 && step && !step.disableCloseOnEsc) {\n _this.store.close();\n }\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"syncState\", function (state) {\n _this.setState(state);\n });\n\n _defineProperty(_assertThisInitialized(_this), \"setPopper\", function (popper, type) {\n if (type === 'wrapper') {\n _this.beaconPopper = popper;\n } else {\n _this.tooltipPopper = popper;\n }\n });\n\n _defineProperty(_assertThisInitialized(_this), \"shouldScroll\", function (disableScrolling, index, scrollToFirstStep, lifecycle, step, target, prevState) {\n return !disableScrolling && (index !== 0 || scrollToFirstStep || lifecycle === LIFECYCLE.TOOLTIP) && step.placement !== 'center' && (!step.isFixed || !hasPosition(target)) && // fixed steps don't need to scroll\n prevState.lifecycle !== lifecycle && [LIFECYCLE.BEACON, LIFECYCLE.TOOLTIP].indexOf(lifecycle) !== -1;\n });\n\n _this.state = _this.initStore();\n return _this;\n }\n\n _createClass(Joyride, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n if (!canUseDOM) return;\n var _this$props2 = this.props,\n disableCloseOnEsc = _this$props2.disableCloseOnEsc,\n debug = _this$props2.debug,\n run = _this$props2.run,\n steps = _this$props2.steps;\n var start = this.store.start;\n\n if (validateSteps(steps, debug) && run) {\n start();\n }\n /* istanbul ignore else */\n\n\n if (!disableCloseOnEsc) {\n document.body.addEventListener('keydown', this.handleKeyboard, {\n passive: true\n });\n }\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate(prevProps, prevState) {\n if (!canUseDOM) return;\n var _this$state2 = this.state,\n action = _this$state2.action,\n controlled = _this$state2.controlled,\n index = _this$state2.index,\n lifecycle = _this$state2.lifecycle,\n status = _this$state2.status;\n var _this$props3 = this.props,\n debug = _this$props3.debug,\n run = _this$props3.run,\n stepIndex = _this$props3.stepIndex,\n steps = _this$props3.steps;\n var prevSteps = prevProps.steps,\n prevStepIndex = prevProps.stepIndex;\n var _this$store = this.store,\n reset = _this$store.reset,\n setSteps = _this$store.setSteps,\n start = _this$store.start,\n stop = _this$store.stop,\n update = _this$store.update;\n\n var _treeChanges = treeChanges(prevProps, this.props),\n changedProps = _treeChanges.changed;\n\n var _treeChanges2 = treeChanges(prevState, this.state),\n changed = _treeChanges2.changed,\n changedFrom = _treeChanges2.changedFrom;\n\n var step = getMergedStep(steps[index], this.props);\n var stepsChanged = !isEqual(prevSteps, steps);\n var stepIndexChanged = is.number(stepIndex) && changedProps('stepIndex');\n var target = getElement(step === null || step === void 0 ? void 0 : step.target);\n\n if (stepsChanged) {\n if (validateSteps(steps, debug)) {\n setSteps(steps);\n } else {\n console.warn('Steps are not valid', steps); //eslint-disable-line no-console\n }\n }\n /* istanbul ignore else */\n\n\n if (changedProps('run')) {\n if (run) {\n start(stepIndex);\n } else {\n stop();\n }\n }\n /* istanbul ignore else */\n\n\n if (stepIndexChanged) {\n var nextAction = prevStepIndex < stepIndex ? ACTIONS.NEXT : ACTIONS.PREV;\n\n if (action === ACTIONS.STOP) {\n nextAction = ACTIONS.START;\n }\n\n if (!([STATUS.FINISHED, STATUS.SKIPPED].indexOf(status) !== -1)) {\n update({\n action: action === ACTIONS.CLOSE ? ACTIONS.CLOSE : nextAction,\n index: stepIndex,\n lifecycle: LIFECYCLE.INIT\n });\n }\n } // Update the index if the first step is not found\n\n\n if (!controlled && status === STATUS.RUNNING && index === 0 && !target) {\n update({\n index: index + 1\n });\n this.callback(_objectSpread2(_objectSpread2({}, this.state), {}, {\n type: EVENTS.TARGET_NOT_FOUND,\n step: step\n }));\n }\n\n var callbackData = _objectSpread2(_objectSpread2({}, this.state), {}, {\n index: index,\n step: step\n });\n\n var isAfterAction = changed('action', [ACTIONS.NEXT, ACTIONS.PREV, ACTIONS.SKIP, ACTIONS.CLOSE]);\n\n if (isAfterAction && changed('status', STATUS.PAUSED)) {\n var prevStep = getMergedStep(steps[prevState.index], this.props);\n this.callback(_objectSpread2(_objectSpread2({}, callbackData), {}, {\n index: prevState.index,\n lifecycle: LIFECYCLE.COMPLETE,\n step: prevStep,\n type: EVENTS.STEP_AFTER\n }));\n }\n\n if (changed('status', [STATUS.FINISHED, STATUS.SKIPPED])) {\n var _prevStep = getMergedStep(steps[prevState.index], this.props);\n\n if (!controlled) {\n this.callback(_objectSpread2(_objectSpread2({}, callbackData), {}, {\n index: prevState.index,\n lifecycle: LIFECYCLE.COMPLETE,\n step: _prevStep,\n type: EVENTS.STEP_AFTER\n }));\n }\n\n this.callback(_objectSpread2(_objectSpread2({}, callbackData), {}, {\n index: prevState.index,\n // Return the last step when the tour is finished\n step: _prevStep,\n type: EVENTS.TOUR_END\n }));\n reset();\n } else if (changedFrom('status', [STATUS.IDLE, STATUS.READY], STATUS.RUNNING)) {\n this.callback(_objectSpread2(_objectSpread2({}, callbackData), {}, {\n type: EVENTS.TOUR_START\n }));\n } else if (changed('status')) {\n this.callback(_objectSpread2(_objectSpread2({}, callbackData), {}, {\n type: EVENTS.TOUR_STATUS\n }));\n } else if (changed('action', ACTIONS.RESET)) {\n this.callback(_objectSpread2(_objectSpread2({}, callbackData), {}, {\n type: EVENTS.TOUR_STATUS\n }));\n }\n\n if (step) {\n this.scrollToStep(prevState);\n\n if (action === ACTIONS.START && lifecycle === LIFECYCLE.INIT && status === STATUS.RUNNING && step.placement === 'center') {\n update({\n lifecycle: LIFECYCLE.READY\n });\n }\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n var disableCloseOnEsc = this.props.disableCloseOnEsc;\n /* istanbul ignore else */\n\n if (!disableCloseOnEsc) {\n document.body.removeEventListener('keydown', this.handleKeyboard);\n }\n }\n }, {\n key: \"scrollToStep\",\n value: function scrollToStep(prevState) {\n var _this$state3 = this.state,\n index = _this$state3.index,\n lifecycle = _this$state3.lifecycle,\n status = _this$state3.status;\n var _this$props4 = this.props,\n debug = _this$props4.debug,\n disableScrolling = _this$props4.disableScrolling,\n disableScrollParentFix = _this$props4.disableScrollParentFix,\n scrollToFirstStep = _this$props4.scrollToFirstStep,\n scrollOffset = _this$props4.scrollOffset,\n scrollDuration = _this$props4.scrollDuration,\n steps = _this$props4.steps;\n var step = getMergedStep(steps[index], this.props);\n /* istanbul ignore else */\n\n if (step) {\n var target = getElement(step.target);\n var shouldScroll = this.shouldScroll(disableScrolling, index, scrollToFirstStep, lifecycle, step, target, prevState);\n\n if (status === STATUS.RUNNING && shouldScroll) {\n var hasCustomScroll = hasCustomScrollParent(target, disableScrollParentFix);\n var scrollParent = getScrollParent(target, disableScrollParentFix);\n var scrollY = Math.floor(getScrollTo(target, scrollOffset, disableScrollParentFix)) || 0;\n log({\n title: 'scrollToStep',\n data: [{\n key: 'index',\n value: index\n }, {\n key: 'lifecycle',\n value: lifecycle\n }, {\n key: 'status',\n value: status\n }],\n debug: debug\n });\n /* istanbul ignore else */\n\n if (lifecycle === LIFECYCLE.BEACON && this.beaconPopper) {\n var _this$beaconPopper = this.beaconPopper,\n placement = _this$beaconPopper.placement,\n popper = _this$beaconPopper.popper;\n /* istanbul ignore else */\n\n if (!(['bottom'].indexOf(placement) !== -1) && !hasCustomScroll) {\n scrollY = Math.floor(popper.top - scrollOffset);\n }\n } else if (lifecycle === LIFECYCLE.TOOLTIP && this.tooltipPopper) {\n var _this$tooltipPopper = this.tooltipPopper,\n flipped = _this$tooltipPopper.flipped,\n _placement = _this$tooltipPopper.placement,\n _popper = _this$tooltipPopper.popper;\n\n if (['top', 'right', 'left'].indexOf(_placement) !== -1 && !flipped && !hasCustomScroll) {\n scrollY = Math.floor(_popper.top - scrollOffset);\n } else {\n scrollY -= step.spotlightPadding;\n }\n }\n\n scrollY = scrollY >= 0 ? scrollY : 0;\n /* istanbul ignore else */\n\n if (status === STATUS.RUNNING) {\n scrollTo(scrollY, scrollParent, scrollDuration);\n }\n }\n }\n }\n /**\n * Trigger the callback.\n *\n * @private\n * @param {Object} data\n */\n\n }, {\n key: \"render\",\n value: function render() {\n if (!canUseDOM) return null;\n var _this$state4 = this.state,\n index = _this$state4.index,\n status = _this$state4.status;\n var _this$props5 = this.props,\n continuous = _this$props5.continuous,\n debug = _this$props5.debug,\n nonce = _this$props5.nonce,\n scrollToFirstStep = _this$props5.scrollToFirstStep,\n steps = _this$props5.steps;\n var step = getMergedStep(steps[index], this.props);\n var output;\n\n if (status === STATUS.RUNNING && step) {\n output = /*#__PURE__*/React.createElement(JoyrideStep, _extends({}, this.state, {\n callback: this.callback,\n continuous: continuous,\n debug: debug,\n setPopper: this.setPopper,\n helpers: this.helpers,\n nonce: nonce,\n shouldScroll: !step.disableScrolling && (index !== 0 || scrollToFirstStep),\n step: step,\n update: this.store.update\n }));\n }\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"react-joyride\"\n }, output);\n }\n }]);\n\n return Joyride;\n}(React.Component);\n\n_defineProperty(Joyride, \"defaultProps\", {\n continuous: false,\n debug: false,\n disableCloseOnEsc: false,\n disableOverlay: false,\n disableOverlayClose: false,\n disableScrolling: false,\n disableScrollParentFix: false,\n getHelpers: function getHelpers() {},\n hideBackButton: false,\n run: true,\n scrollOffset: 20,\n scrollDuration: 300,\n scrollToFirstStep: false,\n showSkipButton: false,\n showProgress: false,\n spotlightClicks: false,\n spotlightPadding: 10,\n steps: []\n});\n\nexport { ACTIONS, EVENTS, LIFECYCLE, STATUS, Joyride as default };\n","import * as React from 'react';\nimport ReactJoyride, { CallBackProps, STATUS } from 'react-joyride';\n\nimport { requestGet } from '../../../../modules/request/index';\nimport useWindowSize from '../../../Shared/hooks/useWindowSize';\n\nexport const DEMO_ONBOARDING_DASHBOARD = 'demo-onboarding-dashboard'\nexport const DEMO_ONBOARDING_STUDENT_REPORTS_LANDING_PAGE = 'demo-onboarding-student-reports-landing-page'\nexport const DEMO_ONBOARDING_DIAGNOSTIC_ACTIVITY_PACKS_INDEX = 'demo-onboarding-diagnostic-activity-packs-index'\nexport const DEMO_ONBOARDING_DIAGNOSTIC_RESULTS_SUMMARY = 'demo-onboarding-diagnostic-results-summary'\nexport const DEMO_ONBOARDING_DIAGNOSTIC_RECOMMENDATIONS = 'demo-onboarding-diagnostic-recommendations'\nexport const DEMO_ONBOARDING_DIAGNOSTIC_GROWTH_SUMMARY = 'demo-onboarding-diagnostic-growth-summary'\nconst COMPLETED = 'completed'\n\nconst sharedStepAttributes = {\n disableBeacon: true,\n hideCloseButton: true,\n hideFooter: true,\n spotlightClicks: true\n}\n\nconst dashboardSteps = [\n {\n ...sharedStepAttributes,\n content: (\n
To get started with the demo, we're going to show you what data you will see once students complete a diagnostic.
\n
\n
Click on "Student Reports" to go to the student data reports.
\n
\n
Click on the "Diagnostics" section to view the sample results of the diagnostic.
\n
\n
The Student Reports page lets you access all results. For example, Activity Analysis lets you see each student's writing for each activity.
\n
\n
Teachers use the "Pre" diagnostic to see their students`' needs and areas of growth at the start of the year. They use the "Post" at the end to measure growth.
\n
\n
Click on "View results and recommendations" to see the pre-intervention results.
\n
\n
You're on the "Class Summary" page now, which shows you the overall performance of your classroom.
\n
\n
From here, click on "Practice Recommendations" to see the specific recommendations for each student.
\n
\n
This is the Diagnostic Recommendations report.
\n
\n
Recommended Practice: Once students complete the diagnostic, each skill that students are not yet proficient in will have a green star next to it as a recommended practice activity.
\n
\n
Instant Assignments: With one click, you can automatically assign the recommended practice activities to your students, and they will be available to your students on their dashboards.
\n
\n
Once students complete the "Post-intervention" diagnostic, you can see their learning gains over the course of the year.
\n
\n
Click here to view the class learning gains summary.
\n
\n
This is the class summary of the Growth Report . This page shows the overall learning gains for your class.
\n
\n
You can also see the learning gains for each individual student.
\n
\n
Finally, you can assign additional recommended activities based on skills students need additional practice with.
\n
(false)\n const [showTour, setShowTour] = React.useState(false)\n const [{ run, steps }, setJoyrideState] = React.useState({\n run: true,\n steps: joyrideSteps[pageKey] || []\n })\n\n React.useEffect(getDemo, [])\n\n React.useEffect(() => {\n if (isDemo && !window.localStorage.getItem(pageKey)) {\n setShowTour(true)\n window.localStorage.setItem(pageKey, COMPLETED)\n }\n }, [isDemo])\n\n function getDemo() {\n requestGet('/teachers/demo_id',\n (data) => {\n setIsDemo(!!data.current_user_demo_id);\n }\n )\n }\n\n const handleJoyrideCallback = (data: CallBackProps) => {\n const { status, type } = data;\n const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];\n\n if (finishedStatuses.includes(status)) {\n setJoyrideState({ ...steps, run: false });\n }\n };\n\n if (!showTour) { return 1}\n disableScrolling={true}\n hideBackButton\n hideCloseButton\n run={run}\n steps={steps}\n styles={{ tooltipContent: { textAlign: 'left' }, options: { primaryColor: '#06806b'}, tooltip: { fontSize: '14px'} }}\n />\n )\n}\n\nexport default DemoOnboardingTour\n","import * as React from 'react';\n\nimport { requestGet } from '../../../modules/request';\nimport useWindowSize from '../../Shared/hooks/useWindowSize';\nimport useSnackbarMonitor from '../../Shared/hooks/useSnackbarMonitor';\nimport { Spinner, Snackbar, defaultSnackbarTimeout, } from '../../Shared/index';\nimport ActivityFeed from '../components/dashboard/activity_feed';\nimport DailyTinyTip from '../components/dashboard/daily_tiny_tip';\nimport DemoModal from '../components/dashboard/demo_modal';\nimport DiagnosticMini from '../components/dashboard/diagnostic_mini';\nimport PromotionalCard from '../components/dashboard/promotional_card';\nimport HandyActions from '../components/dashboard/handy_actions';\nimport KeyMetrics from '../components/dashboard/key_metrics';\nimport LessonsMini from '../components/dashboard/lessons_mini';\nimport OnboardingChecklist from '../components/dashboard/onboarding_checklist';\nimport TeacherCenterHighlights from '../components/dashboard/teacher_center_highlights';\nimport ContentHubCard, { WORLD_HISTORY, AI_KNOWLEDGE, } from '../components/dashboard/content_hub_card'\nimport TeacherInfoModal from '../components/dashboard/teacher_info_modal';\nimport WelcomeModal from '../components/dashboard/welcome_modal';\nimport ArticleSpotlight from '../components/shared/articleSpotlight';\nimport DemoOnboardingTour, { DEMO_ONBOARDING_DASHBOARD, } from '../components/shared/demo_onboarding_tour';\nimport { TEACHER_DASHBOARD_FEATURED_BLOG_POST_ID } from '../constants/featuredBlogPost';\n\nconst MAX_VIEW_WIDTH_FOR_MOBILE = 1103\n\nconst Dashboard = ({ onboardingChecklist, firstName, mustSeeWelcomeModal, mustSeeTeacherInfoModal, linkedToClever, featuredBlogPosts, showEvidencePromotionCard, subjectAreas, userId, classrooms, }) => {\n const size = useWindowSize();\n const className = \"dashboard white-background-accommodate-footer\"\n const onMobile = () => size.width <= MAX_VIEW_WIDTH_FOR_MOBILE\n\n const [showWelcomeModal, setShowWelcomeModal] = React.useState(mustSeeWelcomeModal)\n const [showTeacherInfoModal, setShowTeacherInfoModal] = React.useState(mustSeeTeacherInfoModal)\n const [showDemoModal, setShowDemoModal] = React.useState(false)\n const [showSnackbar, setShowSnackbar] = React.useState(false);\n const [snackbarText, setSnackbarText] = React.useState('');\n\n useSnackbarMonitor(showSnackbar, setShowSnackbar, defaultSnackbarTimeout)\n\n function closeWelcomeModal() { setShowWelcomeModal(false) }\n function closeDemoModal() { setShowDemoModal(false) }\n function closeTeacherInfoModal() { setShowTeacherInfoModal(false) }\n\n if (!onboardingChecklist.every(obj => obj.checked)) {\n return (\n \n {showWelcomeModal &&
\n )\n }\n\n const [metrics, setMetrics] = React.useState(null)\n const [diagnostics, setDiagnostics] = React.useState(null);\n const [lessons, setLessons] = React.useState(null);\n const [activityFeed, setActivityFeed] = React.useState(null)\n const [loading, setLoading] = React.useState(true);\n\n React.useEffect(() => {\n getMetrics();\n getDiagnostics()\n getLessons()\n getActivityFeed()\n }, []);\n\n React.useEffect(() => {\n if (metrics && diagnostics && lessons && activityFeed && loading) {\n setLoading(false)\n }\n }, [metrics, diagnostics, lessons, activityFeed])\n\n function getMetrics() {\n requestGet('/teacher_dashboard_metrics',\n (data) => {\n setMetrics(data);\n }\n )\n }\n\n function getDiagnostics() {\n requestGet('/teachers/diagnostic_info_for_dashboard_mini',\n (data) => {\n setDiagnostics(data.units);\n }\n )\n }\n\n function getLessons() {\n requestGet('/teachers/lessons_info_for_dashboard_mini',\n (data) => {\n setLessons(data.units);\n }\n )\n }\n\n function getActivityFeed() {\n requestGet('/teachers/activity_feed',\n (response) => {\n setActivityFeed(response.data);\n }\n )\n }\n\n function handleBulkArchiveSuccess(snackbarCopy) {\n setSnackbarText(snackbarCopy)\n setShowSnackbar(true)\n }\n\n if (loading) {\n return (\n \n )\n }\n\n return (\n \n \n
\n
\n {showDemoModal &&
}\n {showTeacherInfoModal &&
}\n
\n \n
\n
\n
\n )\n\n}\n\nexport default Dashboard\n","import React from 'react';\nimport Dashboard from '../containers/dashboard';\n\nexport default props => \n
\n
\n
Would you like to preview this lesson? \n
You can either preview this lesson or launch it. If you are ready to use this lesson with your students now, launch it.
\n
\n
\n
{this.renderPieChart()} {data.completedCount} of {numberOfStudentsAssignedToUnit} {Pluralize('student', numberOfStudentsAssignedToUnit)} ,\n {this.calculateAverageScore()} ,\n Preview , View Report ];\n /* eslint-enable react/jsx-no-target-blank */\n } else if (this.isLesson()) {\n return this.lessonFinalCell();\n }\n }\n\n handleChange = (date) => {\n const { updateDueDate, } = this.props\n const formattedDate = date || null\n this.setState({ startDate: date, });\n updateDueDate(this.uaId(), formattedDate);\n }\n\n handleHideUnitActivityClick = () => {\n const { hideUnitActivity } = this.props\n const x = confirm('Are you sure you want to delete this assignment?');\n if (x) {\n hideUnitActivity(this.uaId(), this.unitId());\n }\n }\n\n handleLaunchLessonWithNoStudents = () => {\n if (window.confirm(\"You have no students in this class. Quill Lessons is a collaborative tool for teachers and students to work together. If you'd like to launch this lesson anyway, click OK below. Otherwise, click Cancel.\")) {\n window.location.href = `${window.postbuildEnv.DEFAULT_URL}/teachers/classroom_units/${this.classroomUnitId()}/launch_lesson/${this.activityId()}`;\n }\n }\n\n handleLessonActivityNameClick = () => {\n this.setState({ showModal: true, });\n }\n\n handleMouseActionOnCustomize = () => {\n this.setState(prevState => ({ showCustomizeTooltip: !prevState.showCustomizeTooltip }));\n }\n\n handleMouseActionOnSupportingInfo = () => {\n this.setState(prevState => ({ showLessonPlanTooltip: !prevState.showLessonPlanTooltip }));\n }\n\n handleReportLinkClick = () => {\n $.get(`/teachers/progress_reports/report_from_unit_and_activity/u/${this.unitId()}/a/${this.activityId()}`)\n .success(data => window.location = data.url)\n .fail(() => alert('This report is not yet available. Please check back when at least one of your students has completed this activity.'));\n }\n\n icon = () => {\n const { data, } = this.props\n const classification = this.classification();\n if (classification) {\n // then we're coming from the index and have an id\n return `icon-${activityFromClassificationId(classification)}-green-no-border`;\n }\n // it is stupid that we are passing this in some of this components use create_activity_sessions\n // but don't have time to deprecate it right now\n return data.activity && data.activity.classification ? data.activity.classification.green_image_class : '';\n }\n\n isLesson = () => {\n const { lesson, } = this.props\n return lesson || this.classification() === 6;\n }\n\n lessonCompletedOrLaunch = () => {\n const { data, } = this.props\n if (data.completed) {\n /* eslint-disable react/jsx-no-target-blank */\n return View Report ;\n /* eslint-enable react/jsx-no-target-blank */\n }\n if (data.studentCount === 0) {\n return {data.started ? 'Resume Lesson' : 'Launch Lesson'} ;\n }\n if (data.started) {\n return Resume Lesson ;\n }\n return Launch Lesson ;\n }\n\n lessonFinalCell = () => {\n const { data, } = this.props\n /* eslint-disable react/jsx-no-target-blank */\n const supportingInfoLink = (\n \n {this.lessonCompletedOrLaunch()}\n
\n \n
\n );\n }\n\n renderCustomizedEditionsTag = () => {\n const { data, } = this.props\n if (!(window.location.pathname.includes('lessons') && data.hasEditions)) { return }\n return Customized
;\n }\n\n renderLessonPlanTooltip = () => {\n const { showLessonPlanTooltip, } = this.state\n if (!showLessonPlanTooltip) { return }\n\n return (\n \n
\n );\n }\n\n renderLessonsAction = () => {\n const { data, } = this.props\n if (window.location.pathname.includes('lessons')) {\n if (data.completed) {\n return
;\n } else if (data.started) {\n const href = `/teachers/classroom_units/${this.classroomUnitId()}/mark_lesson_as_completed/${this.activityId()}`;\n\n return Mark As Complete ; //eslint-disable-line react/jsx-no-target-blank\n }\n }\n }\n\n renderModal = () => {\n const { showModal, } = this.state\n const { data, } = this.props\n if (!showModal) { return }\n return (\n \n \n );\n }\n\n render = () => {\n const { activityReport, report, } = this.props\n let link,\n endRow;\n if (report) {\n link = {this.activityName()} ; // eslint-disable-line react/jsx-no-target-blank\n endRow = Object.assign({}, styles.reportEndRow, { width: activityReport ? '350px' : '150px', });\n } else if (this.isLesson()) {\n link = {this.activityName()} ;\n endRow = styles.lessonEndRow;\n } else {\n link = {this.activityName()} ; // eslint-disable-line react/jsx-no-target-blank\n endRow = styles.endRow;\n }\n return (\n \n
\n
\n
\n {link}\n {this.renderCustomizedEditionsTag()}\n
\n
\n {this.renderModal()}\n
\n {this.renderLessonsAction()}\n {this.finalCell()}\n {this.deleteRow()}\n
\n
, onSuccess: Function, onError: Function): void {\n let uri = `/teachers/units/${activityPackId}/update_activities`;\n let payload = {data: {activities_data: activityIds.map((id) => { return {id: id} })}};\n put(uri, payload, onSuccess, onError);\n}\n","import moment from 'moment';\nimport Pluralize from 'pluralize';\nimport React from 'react';\n\nimport AddClassroomActivityRow from './add_classroom_activity_row.jsx';\nimport ClassroomActivity from './classroom_activity';\n\nimport { Snackbar, defaultSnackbarTimeout } from '../../../../Shared/index';\nimport * as api from '../../modules/call_api';\n\nexport default class ActivitiesUnit extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n edit: false,\n unitName: (this.props.data.unitName || this.props.data.unit.name),\n savedUnitName: (this.props.data.unitName || this.props.data.unit.name),\n error: false,\n showTooltip: false,\n classroomActivities: (this.props.data.classroomActivities || this.props.data.classroom_activities),\n activityOrder: Array.from(this.props.data.classroomActivities.keys()),\n snackbarVisible: false,\n snackbarFadeTimer: null,\n allowSorting: this.props.allowSorting || false,\n }\n }\n\n UNSAFE_componentWillReceiveProps = (nextProps) => {\n if (nextProps.data.classroomActivities && (nextProps.data.classroomActivities.length === this.state.classroomActivities.length)) {\n this.setState({ classroomActivities: nextProps.data.classroomActivities, });\n } else if (nextProps.data.classroom_activities && (nextProps.data.classroom_activities.length === this.state.classroomActivities.length)) {\n this.setState({ classroomActivities: nextProps.data.classroom_activities, });\n }\n }\n\n getUnitId = () => {\n return this.props.data.unitId || this.props.data.unit.id;\n }\n\n\n addClassroomActivityRow = () => {\n if (this.state.classroomActivities.values().next().value.ownedByCurrentUser) {\n return this.props.report || this.props.lesson ? null : \n
Assigned to {classrooms.length} {Pluralize('class', classrooms.length)}: \n
\n
{c.name} ({c.assignedStudentCount}/{c.totalStudentCount} {Pluralize('student', c.totalStudentCount)}) )\n classroomsArray.push( this.setState({showAllClassrooms: true})} type=\"button\">Show all {classrooms.length} classes )\n return classroomsArray\n }\n return classrooms.map((c, i) => {c.name} ({c.assignedStudentCount}/{c.totalStudentCount} {Pluralize('student', c.totalStudentCount)}) )\n\n }\n\n deleteOrLockedInfo = () => {\n const firstCa = this.state.classroomActivities.values().next().value;\n const ownedByCurrentUser = this.ownedByCurrentUser();\n if (!this.props.report && !this.props.lesson && ownedByCurrentUser) {\n return Delete Activity Pack ;\n } else if (!ownedByCurrentUser) {\n return (\n \n {text} ;\n }\n }\n\n editStudentsLink = () => {\n const ownedByCurrentUser = this.ownedByCurrentUser()\n const { report, lesson, } = this.props\n if (!ownedByCurrentUser || report || lesson) {\n return null\n } else {\n return Edit Classes & Students \n }\n }\n\n editUnit = () => {\n this.props.editUnit(this.getUnitId());\n }\n\n editUnitName = () => {\n return {this.state.unitName} ;\n }\n\n submitName = () => {\n return Submit ;\n }\n\n toggleTooltip = () => {\n this.setState({ showTooltip: !this.state.showTooltip ,});\n }\n\n updateActivitiesApi = (unitId, activityIds, successHandler, errorHandler) => {\n api.changeActivityPackOrder(unitId, activityIds, successHandler, errorHandler);\n }\n\n updateAllDueDates = (date) => {\n const newClassroomActivities = new Map(this.state.classroomActivities);\n const uaIds = [];\n this.state.classroomActivities.forEach((v, k) => {\n uaIds.push(v.uaId);\n const classroomActivity = newClassroomActivities.get(k);\n classroomActivity.dueDate = moment(date);\n newClassroomActivities.set(k, classroomActivity);\n });\n this.setState({ classroomActivities: newClassroomActivities, });\n this.props.updateMultipleDueDates(uaIds, date);\n }\n\n renderClassroomActivities = () => {\n const { allowSorting, activityOrder, classroomActivities, } = this.state\n const {\n activityReport,\n activityWithRecommendationsIds,\n hideUnitActivity,\n data,\n lesson,\n report,\n updateDueDate,\n } = this.props\n const classroomActivitiesArr = [];\n let i = 0;\n for (let key of activityOrder) {\n const ca = classroomActivities.get(key);\n if (ca) {\n classroomActivitiesArr.push(\n \n
\n
Since {ownerName} created this activity pack, you are unable to edit this activity pack. You can ask the creator to edit it.
\n
If you would like to assign additional practice activities, you can create a new pack for your students.
\n
\n
\n \n
\n \n {this.showOrEditName()}\n \n \n {this.nameActionLink()}\n {this.deleteOrLockedInfo()}\n \n
\n
\n {this.assignedToSection()}\n
\n {this.editStudentsLink()}\n
\n {this.renderClassroomActivities()}\n {this.addClassroomActivityRow()}\n\n
\n \n
\n
{units} \n );\n};\n\nexport default ActivitiesUnits;\n","import React from 'react';\n\nexport default class extends React.Component {\n render() {\n let onButtonClick,\n buttonText,\n content,\n title;\n if (this.props.missing === 'activities') {\n title = 'You have no reports yet!';\n onButtonClick = () => { window.location.assign('/assign'); }\n buttonText = 'Assign an Activity';\n content = 'In order to access our different reports, you need to assign activities to your students.';\n } else if (this.props.missing === 'students') {\n title = 'You have no reports yet!';\n onButtonClick = () => { window.location.assign('/teachers/classrooms'); }\n buttonText = 'Invite Students';\n content = 'In order to access our different reports, you need to invite your students and assign activities.'\n } else if(this.props.missing === 'activitiesWithinDateRange') {\n title = 'You have no reports in that range.';\n onButtonClick = this.props.onButtonClick || null;\n buttonText = 'Reset Date Range';\n content = 'Please select a date range in which you assigned activities or your students worked on them.';\n } else if(this.props.missing === 'activitiesForSelectedClassroom') {\n title = 'You have no activities for that classroom.';\n onButtonClick = this.props.onButtonClick || null;\n buttonText = 'View All Classes';\n content = 'Please select a class that has activities, or assign new activities from the \\'Assign Activities\\' page.';\n } else {\n title = 'You have no reports yet!';\n onButtonClick = () => { window.location.assign('/teachers/classrooms?modal=create-a-class'); }\n buttonText = 'Create a Class';\n content = 'In order to access our different reports, you need to create a class and assign activities to your students.'\n } return (\n \n );\n }\n}\n","import React from 'react';\n\nimport { requestGet, } from '../../../../../modules/request/index';\nimport { Spinner } from '../../../../Shared/index';\nimport { ACTIVITY_ANALYSIS_FEATURED_BLOG_ID } from '../../../constants/featuredBlogPost';\nimport Units from '../../assignment_flow/manage_units/activities_units.jsx';\nimport ItemDropdown from '../../general_components/dropdown_selectors/item_dropdown';\nimport getParameterByName from '../../modules/get_parameter_by_name';\nimport EmptyProgressReport from '../../shared/EmptyProgressReport.jsx';\nimport ArticleSpotlight from '../../shared/articleSpotlight';\nimport { PROGRESS_REPORTS_SELECTED_CLASSROOM_ID, } from '../progress_report_constants';\n\nfunction ActivityPacks() {\n const [allUnits, setAllUnits] = React.useState([]);\n const [units, setUnits] = React.useState([]);\n const [loaded, setLoaded] = React.useState(false);\n const [selectedClassroomId, setSelectedClassroomId] = React.useState(getParameterByName('classroom_id'));\n const [classrooms, setClassrooms] = React.useState([]);\n\n React.useEffect(() => {\n handleNavigationClasses()\n getClassrooms();\n window.onpopstate = handlePopState;\n\n return () => {\n window.onpopstate = null;\n };\n }, []);\n\n React.useEffect(() => {\n if (loaded) {\n getUnitsForCurrentClass()\n }\n }, [selectedClassroomId])\n\n React.useEffect(() => {\n if (!classrooms.length) { return }\n\n getUnits();\n }, [classrooms])\n\n function handlePopState() {\n setLoaded(false);\n setSelectedClassroomId(getParameterByName('classroom_id'));\n getUnitsForCurrentClass();\n };\n\n function handleNavigationClasses() {\n document.getElementsByClassName('diagnostic-tab')[0]?.classList?.remove('active');\n document.getElementsByClassName('activity-analysis-tab')[0]?.classList?.add('active');\n const mobileActivityAnalysisTab = document.getElementById('mobile-activity-analysis-tab-checkmark')\n const mobileDiagnosticTab = document.getElementById('mobile-diagnostics-tab-checkmark')\n const mobileDropdown = document.getElementById('mobile-subnav-toggle')\n\n if (mobileDropdown && mobileActivityAnalysisTab && mobileDiagnosticTab) {\n mobileDropdown.classList.remove('open');\n mobileActivityAnalysisTab.classList.add('active');\n mobileDiagnosticTab.classList.remove('active');\n }\n // this is an override since we can only access the current_path from the backend so we just pass back an empty space\n // from the NavigationHelper module\n if (mobileDropdown && mobileDropdown.children[0] && mobileDropdown.children[0].children[0]) {\n const subTabElement = mobileDropdown.children[0].children[0]\n if (subTabElement.textContent === ' ' || subTabElement.textContent === 'Diagnostics') {\n subTabElement.textContent = 'Activity Analysis'\n }\n }\n }\n\n function getClassrooms() {\n requestGet(`${window.postbuildEnv.DEFAULT_URL}/teachers/classrooms/classrooms_i_teach`, (body) => {\n const newClassrooms = body.classrooms;\n if (newClassrooms.length > 0) {\n const localStorageSelectedClassroomId = window.localStorage.getItem(PROGRESS_REPORTS_SELECTED_CLASSROOM_ID);\n if (!selectedClassroomId && localStorageSelectedClassroomId && newClassrooms.find(c => Number(c.id) === Number(localStorageSelectedClassroomId))) {\n setSelectedClassroomId(Number(localStorageSelectedClassroomId));\n }\n setClassrooms(newClassrooms);\n } else {\n setLoaded(true);\n }\n });\n };\n\n function getUnits() {\n requestGet(\n `${window.postbuildEnv.DEFAULT_URL}/teachers/units?report=true`,\n (body) => {\n const parsedUnits = parseUnits(body);\n setAllUnits(parsedUnits)\n getUnitsForCurrentClass(parsedUnits)\n populateCompletionAndAverageScore(body, parsedUnits)\n }\n )\n };\n\n function getUnitsForCurrentClass(parsedUnits) {\n const units = parsedUnits || allUnits\n if (selectedClassroomId) {\n const selectedClassroom = classrooms.find(c => c.id === Number(selectedClassroomId));\n\n if (!selectedClassroom) { return }\n\n const unitsInCurrentClassroom = units.filter(unit => unit.classrooms.find(classroom => selectedClassroom.name === classroom.name));\n setUnits(unitsInCurrentClassroom);\n } else {\n setUnits(units);\n }\n }\n\n function parseUnits(data) {\n const parsedUnits = {};\n data.forEach((u) => {\n const assignedStudentCount = u.number_of_assigned_students ?? u.class_size;\n if (!parsedUnits[u.unit_id]) {\n parsedUnits[u.unit_id] = generateNewCaUnit(u, assignedStudentCount);\n } else {\n const caUnit = parsedUnits[u.unit_id];\n if (caUnit.classrooms.findIndex(c => c.name === u.class_name) === -1) {\n // add the info and student count from the classroom if it hasn't already been done\n const classroom = { name: u.class_name, totalStudentCount: u.class_size, assignedStudentCount, cuId: u.classroom_unit_id};\n caUnit.classrooms.push(classroom);\n }\n // if the activity info already exists, add to the completed count\n // otherwise, add the activity info if it doesn't already exist\n let completedCount,\n cumulativeScore;\n\n if (caUnit.classroomActivities.has(u.activity_id)) {\n completedCount = Number(caUnit.classroomActivities.get(u.activity_id).completedCount) + Number(u.completed_count || 0);\n cumulativeScore = Number(caUnit.classroomActivities.get(u.activity_id).cumulativeScore) + Number(u.classroom_cumulative_score || 0);\n } else {\n cumulativeScore = Number(u.classroom_cumulative_score || 0);\n completedCount = Number(u.completed_count || 0);\n }\n //completedCount = Number(4); // number of srudents who completed\n //cumulativeScore = Number(332); // cumulative percentage for those //completed --- 83*4\n caUnit.classroomActivities.set(u.activity_id, classroomActivityData(u, assignedStudentCount, completedCount, cumulativeScore));\n }\n });\n return Object.values(parsedUnits); // Convert to array as per original structure\n };\n\n function populateCompletionAndAverageScore(data, parsedUnits) {\n const promises = data.map((u) => {\n return requestGetScoreInfo(u).then((body) => {\n updateScoreInfo(u, body, parsedUnits)\n });\n });\n\n Promise.all(promises).then(() => {\n setLoaded(true);\n });\n };\n\n function requestGetScoreInfo(u) {\n return new Promise((resolve) => {\n requestGet(\n `${window.postbuildEnv.DEFAULT_URL}/teachers/units/score_info_for_activity/${u.activity_id}?classroom_unit_id=${u.classroom_unit_id}`,\n resolve\n );\n });\n };\n\n function updateScoreInfo(unitActivityUpdate, scoreInfo, parsedUnits) {\n const updatedUnits = parsedUnits.map(unit => {\n if (unit.unitId === unitActivityUpdate.unit_id) {\n const updatedActivities = new Map(unit.classroomActivities);\n const activity = updatedActivities.get(unitActivityUpdate.activity_id);\n\n if (activity) {\n activity.cumulativeScore += scoreInfo.cumulative_score;\n activity.completedCount += scoreInfo.completed_count;\n }\n\n return { ...unit, classroomActivities: updatedActivities };\n }\n return unit;\n });\n\n setAllUnits(updatedUnits)\n };\n\n\n function generateNewCaUnit(u, assignedStudentCount) {\n const classroom = {\n name: u.class_name,\n totalStudentCount: u.class_size,\n assignedStudentCount,\n cuId: u.classroom_unit_id\n };\n return {\n classrooms: [classroom],\n classroomActivities: new Map().set(u.activity_id, classroomActivityData(u, assignedStudentCount)),\n unitId: u.unit_id,\n unitCreated: u.unit_created_at,\n unitName: u.unit_name,\n };\n };\n\n function classroomActivityData(u, assignedStudentCount, completedCount, cumulativeScore) {\n return {\n name: u.activity_name,\n uaId: u.unit_activity_id,\n cuId: u.classroom_unit_id,\n activityId: u.activity_id,\n created_at: u.unit_activity_created_at,\n activityClassificationId: u.activity_classification_id,\n classroomId: u.classroom_id,\n ownedByCurrentUser: u.owned_by_current_user,\n ownerName: u.owner_name,\n createdAt: u.ca_created_at,\n dueDate: u.due_date,\n numberOfAssignedStudents: assignedStudentCount,\n cumulativeScore: cumulativeScore || u.classroom_cumulative_score || 0,\n completedCount: completedCount || u.completed_count || 0,\n };\n };\n\n function switchClassrooms(classroom) {\n const path = '/teachers/progress_reports/diagnostic_reports/#/activity_packs';\n window.history.pushState({}, '', classroom.id ? `${path}?classroom_id=${classroom.id}` : path);\n window.localStorage.setItem(PROGRESS_REPORTS_SELECTED_CLASSROOM_ID, classroom.id)\n setSelectedClassroomId(classroom.id)\n };\n\n function renderContent() {\n if (!loaded) {\n return \n
Activity Analysis \n
Open an activity analysis to view students' responses, the overall results on each question, and the concepts students need to practice.
\n
\n
Select a classroom:
\n
\n
\n {renderContent()}\n
\n \n {stateBasedComponent()}\n
\n \n );\n}\n\nexport default ActivityPacks;\n","import * as React from 'react'\nconst diagnosticSrc = `${window.postbuildEnv.CDN_URL}/images/illustrations/diagnostic-monochromatic.svg`\n\nconst EmptyDiagnosticProgressReport = () => (\n \n)\n\n\nexport default EmptyDiagnosticProgressReport\n","import * as React from 'react'\n\nimport * as assignmentFlowConstants from '../../../assignment_flow/assignmentFlowConstants'\n\nimport { EXTRA_SMALL_ICON_BASE_SRC, } from '../../../../../Shared'\n\nexport const baseImageSrc = `${window.postbuildEnv.CDN_URL}/images`\nexport const baseDiagnosticImageSrc = `${baseImageSrc}/pages/diagnostic_reports`\nexport const accountCommentIcon = \n
No data yet \n
Data will appear in this report shortly after your students complete the diagnostic.
\n
{proficiencyIcon}{PROFICIENCY}
\nexport const partialProficiencyTag = {partialProficiencyIcon}{PARTIAL_PROFICIENCY}
\nexport const noProficiencyTag = {noProficiencyIcon}{NO_PROFICIENCY}
\nexport const maintainedProficiencyTag = {proficiencyIcon}{MAINTAINED_PROFICIENCY}
\nexport const gainedSomeProficiencyTag = {gainedSomeProficiencyIcon}{GAINED_SOME_PROFICIENCY}
\nexport const gainedProficiencyTag = {proficiencyIcon}{GAINED_PROFICIENCY}
\n\nexport const proficiencyTextToTag = {\n [PROFICIENCY]: proficiencyTag,\n [PARTIAL_PROFICIENCY]: partialProficiencyTag,\n [NO_PROFICIENCY]: noProficiencyTag,\n [MAINTAINED_PROFICIENCY]: maintainedProficiencyTag,\n [GAINED_SOME_PROFICIENCY]: gainedSomeProficiencyTag,\n [GAINED_PROFICIENCY]: gainedProficiencyTag\n}\n\nexport const proficiencyTextToGrayIcon = {\n [PROFICIENCY]: grayProficiencyIcon,\n [PARTIAL_PROFICIENCY]: grayPartialProficiencyIcon,\n [NO_PROFICIENCY]: grayNoProficiencyIcon\n}\n\n// shared consts for handling table scroll at wide view\nexport const LEFT_OFFSET = 260 // width of the left-hand navigation\nexport const DEFAULT_LEFT_PADDING = 32\nexport const MOBILE_WIDTH = 930\nexport const DEFAULT_LEFT_PADDING_FOR_MOBILE = 0\n\n// release methods\nexport const IMMEDIATE = 'immediate'\nexport const STAGGERED = 'staggered'\n\nexport const releaseMethodToDisplayName = {\n [IMMEDIATE]: 'Immediate',\n [STAGGERED]: 'Staggered'\n}\n\nexport function sortSkillGroupsByQuestionNumbers(skillGroups, questions) {\n // Step 1: Create a mapping of question_uid to question_number\n const questionNumberMap = questions.reduce((acc, question) => {\n acc[question.question_uid] = question.question_number;\n return acc;\n }, {});\n\n\n // Step 2: Sort the skill groups based on the minimum question number in each group\n return skillGroups.sort((a, b) => {\n const minQuestionNumberA = Math.min(...a.question_uids.map(uid => questionNumberMap[uid]).filter(Boolean));\n const minQuestionNumberB = Math.min(...b.question_uids.map(uid => questionNumberMap[uid]).filter(Boolean));\n return minQuestionNumberA - minQuestionNumberB;\n });\n\n}\n","import * as React from 'react';\n\nimport { triangleUpIcon, } from './shared';\n\nimport { EXTRA_SMALL_ICON_BASE_SRC, } from '../../../../../Shared'\n\nconst barGraphIncreasingIcon = \n \n
Growth summary \n
{barGraphIncreasingIcon}Not available for diagnostics completed before August 2023.
\n
\n )\n } else if (showGrowthSummary) {\n const growth = skillsGrowth > 0 ? {triangleUpIcon}{`${skillsGrowth}%`} : No growth yet \n return (\n \n \n
Growth summary \n {skillsGrowth !== null &&
{barGraphIncreasingIcon}Skills growth:{growth}
}\n
\n )\n }\n\n return (\n \n \n
Growth summary \n
{barGraphIncreasingIcon}To see how your students have grown, first assign the {name} (Post)
\n
\n )\n\n}\n\nexport default GrowthSummarySection\n","import moment from 'moment';\nimport * as React from 'react';\n\nimport EmptyDiagnosticProgressReport from './empty_diagnostic_progress_report.jsx';\nimport GrowthSummarySection from './growthSummarySection';\nimport { Classroom, Diagnostic } from './interfaces';\nimport { baseDiagnosticImageSrc, calculateClassGrowthPercentage, goToAssign, } from './shared';\n\nimport { requestGet } from '../../../../../../modules/request/index';\nimport { DropdownInput, Tooltip, EXTRA_SMALL_ICON_BASE_SRC, } from '../../../../../Shared/index';\nimport { DIAGNOSTICS_FEATURED_BLOG_POST_ID, } from '../../../../constants/featuredBlogPost';\nimport ArticleSpotlight from '../../../shared/articleSpotlight';\nimport DemoOnboardingTour, { DEMO_ONBOARDING_DIAGNOSTIC_ACTIVITY_PACKS_INDEX, } from '../../../shared/demo_onboarding_tour';\nimport { PROGRESS_REPORTS_SELECTED_CLASSROOM_ID, } from '../../progress_report_constants';\n\nconst groupSrc = `${EXTRA_SMALL_ICON_BASE_SRC}/group.svg`\nconst calendarDateIconSrc = `${EXTRA_SMALL_ICON_BASE_SRC}/calendar-date.svg`\nconst userMultipleIconSrc = `${EXTRA_SMALL_ICON_BASE_SRC}/user-multiple.svg`\n\nconst multipleCardsIcon = All Classrooms
`, value: ALL }\n\nconst STARTER_V1_ID = 849\nconst INTERMEDIATE_V1_ID = 850\nconst ADVANCED_V1_ID = 888\n\nfunction summaryLink(isPostDiagnostic, activityId, classroomId, unitId) {\n const summaryPath = isPostDiagnostic ? 'growth_summary' : 'summary'\n const baseSummaryLink = `/teachers/progress_reports/diagnostic_reports/#/diagnostics/${activityId}/classroom/${classroomId}/${summaryPath}`\n return unitId ? `${baseSummaryLink}?unit=${unitId}` : baseSummaryLink\n}\n\nconst AssignedSection = ({ activity, sectionTitle, isPostDiagnostic, }) => {\n const { assigned_date, unit_name, completed_count, assigned_count, activity_id, classroom_id, unit_id, } = activity\n const activityPackText = `Activity pack: ${unit_name}`\n let activityPackElement = {activityPackText} \n if (window.innerWidth > MOBILE_WIDTH && ((activityPackText.length * AVERAGE_FONT_WIDTH) > ACTIVITY_PACK_TEXT_MAX_WIDTH)) {\n activityPackElement = \n \n
{sectionTitle} \n
{calendarDateIcon}Assigned: {moment(assigned_date).format('MMM D, YYYY')}
\n {unit_name &&
{multipleCardsIcon}{activityPackElement}
}\n
{multipleUsersIcon}Completed: {completed_count} of {assigned_count}
\n
\n )\n}\n\nconst PostInProgress = ({ name, }) => {\n return (\n \n \n
Post \n
{wrenchIcon}We're working on building the {name} (Post). We'll let you know when it's available.
\n
\n )\n}\n\nconst PostSection = ({ post, activityId, unitTemplateId, name, }) => {\n if (post) {\n return \n \n
Post \n
{calendarDateIcon}Not assigned
\n
\n )\n}\n\nconst Diagnostic = ({ diagnostic, }) => {\n const [studentResults, setStudentResults] = React.useState([]);\n const [skillGroupSummaries, setSkillGroupSummaries] = React.useState([]);\n const [classwideGrowthAverage, setClasswideGrowthAverage] = React.useState(null);\n const { name, pre, post, } = diagnostic\n const completedStudentCount = studentResults.filter(sr => sr.skill_groups).length\n\n React.useEffect(() => {\n if (post && post.activity_id) {\n getResults()\n }\n }, [])\n\n React.useEffect(() => {\n // classwideGrowthAverage result may be 0 in some instances so we check for initial null value\n if (skillGroupSummaries.length && completedStudentCount && classwideGrowthAverage === null) {\n calculateClassGrowthPercentage({ skillGroupSummaries, completedStudentCount, setClasswideGrowthAverage })\n }\n }, [skillGroupSummaries])\n\n function getResults() {\n requestGet(`/teachers/progress_reports/diagnostic_growth_results_summary?activity_id=${post.activity_id}&classroom_id=${pre.classroom_id}`,\n (data) => {\n setStudentResults(data.student_results);\n setSkillGroupSummaries(data.skill_group_summaries);\n }\n )\n }\n\n let postAndGrowth = ([STARTER_V1_ID, INTERMEDIATE_V1_ID, ADVANCED_V1_ID].includes(pre.activity_id)) ? null : \n )\n } else {\n postAndGrowth = (\n \n )\n }\n }\n\n return (\n \n )\n}\n\nconst Classroom = ({ classroom, }) => {\n const diagnostics = classroom.diagnostics.map(d => \n {classroom.name} \n {diagnostics}\n \n )\n}\n\nconst DiagnosticActivityPacks = ({ classrooms, }) => {\n const selectedClassroom = classrooms.find(c => Number(c.id) === Number(window.localStorage.getItem(PROGRESS_REPORTS_SELECTED_CLASSROOM_ID)))\n const [selectedClassroomId, setSelectedClassroomId] = React.useState(selectedClassroom && selectedClassroom.id || ALL)\n\n function onClassesDropdownChange(e) {\n window.localStorage.setItem(PROGRESS_REPORTS_SELECTED_CLASSROOM_ID, e.value)\n setSelectedClassroomId(e.value)\n }\n\n if (!classrooms.length) { return ${c.name}
`, })))\n const classroomElements = selectedClassroomId === ALL ? classrooms.map(c => c.id === selectedClassroomId)} />\n\n return (\n \n \n
\n
\n \n Diagnostic Reports \n opt.value === selectedClassroomId)}\n />\n \n {classroomElements}\n
\n
\n )\n}\n\nexport default DiagnosticActivityPacks\n","import * as React from 'react'\n\nimport { timeRewindIllustration, } from './shared'\n\nconst IneligibleForQuestionScoring = ({ pageName, }) => {\n return (\n \n {timeRewindIllustration}\n The {pageName} is not available for diagnostics completed before August 2023. \n Due to a change in our system, we cannot show the {pageName} for this diagnostic report. However, you can still:
\n \n View the Practice Recommendations to see each recommended practice activity. \n View the Student Responses page to see each student’s score on the diagnostic. \n View the Question Analysis page to see how the class performed on each question. \n \n If you have questions, please reach out to support@quill.org.
\n \n )\n}\n\nexport default IneligibleForQuestionScoring\n","import * as React from 'react'\n\nimport {\n helpIcon,\n Tooltip,\n} from '../../../../../Shared/index'\n\nconst SkillGroupTooltip = ({ name, description, }) => (\n ${name}{name} \n}\n\nexport default StudentNameOrTooltip\n","import * as React from 'react'\nimport { Link, } from 'react-router-dom'\n\nimport {\n OpenPopover,\n SkillGroup,\n SkillGroupSummary,\n StudentResult,\n} from './interfaces'\nimport {\n accountCommentIcon,\n closeIcon,\n DEFAULT_LEFT_PADDING,\n DEFAULT_LEFT_PADDING_FOR_MOBILE,\n LEFT_OFFSET,\n brightGreenTriangleUpIcon,\n MOBILE_WIDTH,\n noDataYet,\n proficiencyTextToTag\n} from './shared'\nimport SkillGroupTooltip from './skillGroupTooltip'\nimport StudentNameOrTooltip from './studentNameOrTooltip'\n\nimport useWindowSize from '../../../../../Shared/hooks/useWindowSize'\nimport {\n helpIcon,\n Tooltip,\n} from '../../../../../Shared/index'\n\nconst POST_TEST_DESCRIPTION = '\n {count ? brightGreenTriangleUpIcon : null}\n {count ? count : null} \n
\n )\n}\n\nfunction renderStudentHeaderSkillsData({ isPreTest, totalAcquiredSkillGroupsCount, correct_question_text, total_acquired_skill_groups_count, total_maintained_skill_group_proficiency_count, correct_skill_groups_text }) {\n const diagnosticNotCompletedMessage = Diagnostic not completed \n const tooltipText = \"The number of improved skills helps you celebrate each student's learning and growth. It shows you how many skills the student improved between the pre and post-diagnostic. A skill is considered “improved” if the student answered more questions for that skill correctly on the post-diagnostic than they did on the pre. \n
)\n const skillsSubHeader = correct_question_text ? {correct_question_text} {skillsDelta}
: diagnosticNotCompletedMessage\n let skillGroupsSubHeader = {correct_skill_groups_text}
\n const noSkillChange = !total_acquired_skill_groups_count && !total_maintained_skill_group_proficiency_count\n\n if (!isPreTest && !noSkillChange) {\n const acquiredText = totalAcquiredSkillGroupsCount === 1 ? '1 Improved Skill' : `${totalAcquiredSkillGroupsCount} Improved Skills`\n const maintainedText = total_maintained_skill_group_proficiency_count === 1 ? '(1 Maintained)' : `(${total_maintained_skill_group_proficiency_count} Maintained)`\n skillGroupsSubHeader = (\n \n {!!total_acquired_skill_groups_count &&
{brightGreenTriangleUpIcon}
}\n {!!total_acquired_skill_groups_count &&
{acquiredText} }\n {!!total_maintained_skill_group_proficiency_count &&
{maintainedText} }\n
\n {skillGroupsSubHeader}\n {skillsSubHeader}\n \n )\n}\n\nconst Popover = ({ studentResult, skillGroup, closePopover, responsesLink, }: PopoverProps) => {\n return (\n \n
\n \n {skillGroup.skill_group} \n {closeIcon} \n \n
\n View {studentResult.name}'s responses for {skillGroup.skill_group} \n \n
\n \n {proficiencyTextToTag[proficiency_text]}\n {number_of_correct_questions_text}
\n \n {openPopover.studentId === studentResult.id && openPopover.skillGroupId === id && \n )\n}\n\nconst StudentRow = ({ studentResult, skillGroupSummaries, openPopover, setOpenPopover, responsesLink, isPreTest }) => {\n const { name, skill_groups, id, total_acquired_skill_groups_count, correct_question_text, correct_skill_groups_text, total_maintained_skill_group_proficiency_count } = studentResult\n\n const totalAcquiredSkillGroupsCount = total_acquired_skill_groups_count > 0 ? total_acquired_skill_groups_count : 0;\n\n const firstCell = (\n \n
\n )\n\n let skillGroupCells = skillGroupSummaries.map((skillGroupSummary: SkillGroupSummary) => ({firstCell}{skillGroupCells} \n}\n\nconst StudentResultsTable = ({ isPreTest, skillGroupSummaries, studentResults, openPopover, setOpenPopover, responsesLink }: StudentResultsTableProps) => {\n const size = useWindowSize();\n const [isSticky, setIsSticky] = React.useState(false);\n const tableRef = React.useRef(null);\n\n const [stickyTableStyle, setStickyTableStyle] = React.useState({\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n zIndex: 3\n })\n\n function paddingLeft() {\n if (MOBILE_WIDTH >= window.innerWidth) { return DEFAULT_LEFT_PADDING_FOR_MOBILE }\n const skillGroupSummaryCards = document.getElementsByClassName('results-header')[0]\n return skillGroupSummaryCards && DEFAULT_LEFT_PADDING\n }\n\n React.useEffect(() => {\n onScroll()\n }, [size])\n\n const handleScroll = React.useCallback(() => {\n const { top, bottom, left, } = tableRef.current.getBoundingClientRect()\n\n if (top <= 0 && bottom > 92) {\n setStickyTableStyle(oldStickyTableStyle => ({ ...oldStickyTableStyle, left: left + paddingLeft() }))\n !isSticky && setIsSticky(true);\n } else {\n isSticky && setIsSticky(false);\n }\n }, [isSticky]);\n\n\n const onScroll = () => {\n if (tableRef && tableRef.current) {\n handleScroll();\n }\n }\n\n React.useEffect(() => {\n window.addEventListener(\"scroll\", onScroll);\n\n return () => {\n window.removeEventListener(\"scroll\", onScroll);\n };\n }, [handleScroll]);\n\n const studentRows = studentResults.map(studentResult => (\n {proficientStudentCount} of {completedStudentCount} Student{completedStudentCount === 1 ? '' : 's'}{' Proficient'} \n }\n\n return (\n \n {proficientStudentCount} of {completedStudentCount} Student{completedStudentCount === 1 ? '' : 's'}{' Improved or Maintained Skill'} \n {renderDelta(proficientStudentCount)}\n
\n )\n }\n\n const tableHeaders = skillGroupSummaries.map(skillGroupSummary => {\n const { name, description, gained_proficiency_in_post_test_student_names, not_yet_proficient_student_names } = skillGroupSummary\n const appendedDescription = isPreTest ? description : description + POST_TEST_DESCRIPTION\n const notYetProficientStudentCount = isPreTest && not_yet_proficient_student_names.length\n const proficientStudentCount = isPreTest ? completedStudentCount - notYetProficientStudentCount : gained_proficiency_in_post_test_student_names.length\n return (\n \n \n {name} \n
\n {renderCountData({ completedStudentCount, proficientStudentCount })}\n \n )\n })\n\n\n const renderHeader = (sticky) => {\n let style = { position: 'inherit' }\n if (window.innerWidth <= MOBILE_WIDTH) {\n style = { left: stickyTableStyle.left - paddingLeft() }\n } else if (LEFT_OFFSET > stickyTableStyle.left) {\n style = { left: -(LEFT_OFFSET - (stickyTableStyle.left - paddingLeft())) + 1 }\n }\n\n return (\n \n \n Name \n {tableHeaders}\n \n \n )\n }\n\n return (\n \n {isSticky && completedStudentCount && (\n
\n {renderHeader(true)}\n \n )}\n \n {renderHeader(false)}\n {completedStudentCount ? null : {noDataYet} \n {studentRows}\n \n
\n (!passedStudentResults);\n const [studentResults, setStudentResults] = React.useState(passedStudentResults || []);\n const [skillGroupSummaries, setSkillGroupSummaries] = React.useState(passedSkillGroupSummaries || []);\n const [openPopover, setOpenPopover] = React.useState({})\n\n const { activityId, classroomId, } = match.params\n\n React.useEffect(() => {\n if (eligibleForQuestionScoring) {\n setLoading(true)\n getResults()\n } else {\n setLoading(false)\n }\n }, [activityId, classroomId])\n\n React.useEffect(() => {\n window.addEventListener(CLICK, closePopoverOnOutsideClick)\n return function cleanup() {\n window.removeEventListener(CLICK, closePopoverOnOutsideClick)\n }\n }, [openPopover])\n\n function getResults() {\n requestGet(`/teachers/progress_reports/diagnostic_growth_results_summary?activity_id=${activityId}&classroom_id=${classroomId}`,\n (data) => {\n setStudentResults(data.student_results);\n setSkillGroupSummaries(data.skill_group_summaries);\n setLoading(false)\n }\n )\n }\n\n const responsesLink = (studentId) => `/diagnostics/${activityId}/classroom/${classroomId}/responses/${studentId}`\n\n function closePopoverOnOutsideClick(e) {\n if (!openPopover.studentId) { return }\n\n const popoverElements = document.getElementsByClassName('student-results-popover')\n const studentRow = document.getElementById(String(openPopover.studentId))\n if (popoverElements && (!popoverElements[0].contains(e.target) && !studentRow.contains(e.target))) {\n setOpenPopover({})\n }\n }\n\n if (loading) { return \n \n {mobileNavigation}\n {eligibleForQuestionScoring ? (\n \n \n \n {noProficiencyTag}\n
{noProficencyExplanation}
\n
\n {partialProficiencyTag}\n
{postPartialProficiencyExplanation}
\n
\n {gainedSomeProficiencyTag}\n
{gainedSomeProficiencyExplanation}
\n
\n {gainedProficiencyTag}\n
{gainedFullProficiencyExplanation}
\n
\n {maintainedProficiencyTag}\n
{maintainedProficiencyExplanation}
\n
\n \n \n ) : ( \n )\n}\n\nexport default withRouter(GrowthResults)\n","// adapted from https://github.com/JackPu/reactjs-percentage-circle/blob/master/src/index.js\n\nimport * as React from 'react';\n\ninterface PercentageCircleProps {\n percent: number,\n borderWidth: number,\n radius: number,\n bgcolor: string,\n color: string,\n children?: any,\n textStyle?: string,\n innerColor: string\n}\nconst PercentageCircle = ({ percent, borderWidth, radius, bgcolor, color, children, textStyle, innerColor }: PercentageCircleProps) => {\n\n let leftTransformerDegree = '0deg';\n let rightTransformerDegree = '0deg';\n if (percent >= 50) {\n rightTransformerDegree = '180deg';\n leftTransformerDegree = (percent - 50) * 3.6 + 'deg';\n } else {\n rightTransformerDegree = percent * 3.6 + 'deg';\n leftTransformerDegree = '0deg';\n }\n\n return (\n \n \n \n \n {children ? children : {percent}% }\n \n \n );\n}\n\nexport default PercentageCircle\n","import * as React from 'react';\nimport { withRouter } from 'react-router-dom';\n\nimport {\n SkillGroupSummary,\n StudentResult,\n} from './interfaces';\nimport PercentageCircle from './percentageCircle';\nimport IneligibleForQuestionScoring from './ineligibleForQuestionScoring';\nimport {\n fileDocumentIcon,\n noDataYet,\n triangleUpIcon,\n PRE,\n POST,\n sumProficiencyScores,\n calculateClassGrowthPercentage\n} from './shared';\nimport SkillGroupTooltip from './skillGroupTooltip';\n\nimport { requestGet } from '../../../../../../modules/request/index';\nimport {\n Tooltip,\n} from '../../../../../Shared/index';\nimport DemoOnboardingTour, { DEMO_ONBOARDING_DIAGNOSTIC_GROWTH_SUMMARY, } from '../../../shared/demo_onboarding_tour';\nimport LoadingSpinner from '../../../shared/loading_indicator.jsx';\n\nfunction renderGrowthElement(delta: number, text: string, inCard?: boolean) {\n const cardClass = inCard ? 'in-card' : ''\n return delta > 0 ? {triangleUpIcon}{Math.round(delta)}{`% ${text}`}
: No growth
\n}\n\nconst SkillGroupSummaryCard = ({ skillGroupSummary, completedStudentCount }: { skillGroupSummary: SkillGroupSummary, completedStudentCount: number }) => {\n const { name, description, not_yet_proficient_in_post_test_student_names, proficiency_scores_by_student } = skillGroupSummary\n let cardContent = noDataYet\n\n if (completedStudentCount) {\n const numberOfStudentsNeedingPracticeInPost = not_yet_proficient_in_post_test_student_names.length\n const preProficiencyScoreTotalSum = sumProficiencyScores(proficiency_scores_by_student, PRE)\n const postProficiencyScoreTotalSum = sumProficiencyScores(proficiency_scores_by_student, POST)\n const preProficiencyClassPercentage = Math.round((preProficiencyScoreTotalSum / completedStudentCount) * 100)\n const postProficiencyClassPercentage = Math.round((postProficiencyScoreTotalSum / completedStudentCount) * 100)\n const delta = postProficiencyClassPercentage - preProficiencyClassPercentage\n\n let needPracticeElement = No practice needed \n const growthElement = renderGrowthElement(delta, 'growth', true)\n\n if (numberOfStudentsNeedingPracticeInPost) {\n const tooltipText = `${not_yet_proficient_in_post_test_student_names.join('
`\n const tooltipTriggerText = numberOfStudentsNeedingPracticeInPost === 1 ? \"1 student recommended practice\" : `${numberOfStudentsNeedingPracticeInPost} students recommended practice`\n needPracticeElement = (\n \n \n {needPracticeElement}\n {growthElement}\n
\n )\n }\n\n return (\n \n \n {name} \n
\n {cardContent}\n \n )\n}\n\nexport const GrowthResults = ({ activityName, passedStudentResults, passedSkillGroupSummaries, match, mobileNavigation, eligibleForQuestionScoring, }) => {\n const [loading, setLoading] = React.useState(!passedStudentResults);\n const [studentResults, setStudentResults] = React.useState(passedStudentResults || []);\n const [skillGroupSummaries, setSkillGroupSummaries] = React.useState(passedSkillGroupSummaries || []);\n const [classwideGrowthAverage, setClasswideGrowthAverage] = React.useState(null);\n\n const { activityId, classroomId, } = match.params\n const completedStudentCount = studentResults.filter(sr => sr.skill_groups).length\n\n React.useEffect(() => {\n if (eligibleForQuestionScoring) {\n setLoading(true)\n getResults()\n } else {\n setLoading(false)\n }\n }, [activityId, classroomId])\n\n React.useEffect(() => {\n // classwideGrowthAverage result may be 0 in some instances so we check for initial null value\n if (skillGroupSummaries.length && completedStudentCount && classwideGrowthAverage === null) {\n calculateClassGrowthPercentage({ skillGroupSummaries, completedStudentCount, setClasswideGrowthAverage })\n }\n }, [skillGroupSummaries])\n\n function getResults() {\n requestGet(`/teachers/progress_reports/diagnostic_growth_results_summary?activity_id=${activityId}&classroom_id=${classroomId}`,\n (data) => {\n setStudentResults(data.student_results);\n setSkillGroupSummaries(data.skill_group_summaries);\n setLoading(false)\n }\n )\n }\n\n function renderClasswideGrowthAverage() {\n if(classwideGrowthAverage === null) { return }\n\n const classwideGrowthDisplayedAverage = classwideGrowthAverage > 0 ? classwideGrowthAverage: 0;\n const activityDisplayedName = activityName.replace('(Post)', '').trim();\n return(\n \n {`${activityDisplayedName}:`} \n {renderGrowthElement(classwideGrowthDisplayedAverage, 'Average class-wide growth across all skills', false)}\n \n )\n }\n\n if (loading) { return \n \n \n {eligibleForQuestionScoring && renderClasswideGrowthAverage()}\n \n {mobileNavigation}\n {eligibleForQuestionScoring ? : \n )\n}\n\nexport default withRouter(GrowthResults)\n","import * as React from 'react'\n\nimport {\n FULLY_CORRECT,\n expandIcon,\n greenCircleWithCheckIcon,\n gainedSomeProficiencyTag,\n gainedProficiencyTag,\n GAINED_PROFICIENCY,\n GAINED_SOME_PROFICIENCY,\n} from './shared'\n\nconst DEFAULT_ROW_COUNT = 3\n\nconst skillGainedTag = {\n [GAINED_PROFICIENCY]: gainedProficiencyTag,\n [GAINED_SOME_PROFICIENCY]: gainedSomeProficiencyTag\n}\n\nconst fullyCorrectTag = {greenCircleWithCheckIcon} {FULLY_CORRECT} \n\nconst GrowthSkillsTable = ({ skillGroupResults, isExpandable, }: { skillGroupResults: Array, isExpandable?: boolean }) => {\n const [isExpanded, setIsExpanded] = React.useState(skillGroupResults.length < DEFAULT_ROW_COUNT)\n\n function expandRows() { setIsExpanded(true) }\n\n const skillRows = skillGroupResults.sort((a, b) => a.skill_group.localeCompare(b.skill_group)).map(skillGroup => {\n const { pre, post, skill_group, proficiency_text, } = skillGroup\n const showSkillGainedTag = skillGainedTag[proficiency_text] ? skillGainedTag[proficiency_text] : null\n\n const preSummary = pre.summary === FULLY_CORRECT ? fullyCorrectTag : pre.summary\n const postSummary = post.summary === FULLY_CORRECT ? fullyCorrectTag : post.summary\n\n let postSummaryClassName\n postSummaryClassName += showSkillGainedTag ? ' contains-skill-gained-tag' : ''\n return (\n \n {skill_group} \n Pre Post
{pre.number_correct} {post.number_correct}
{pre.number_incorrect} {post.number_incorrect}
\n \n {preSummary} \n \n {postSummary} \n {showSkillGainedTag} \n \n
\n \n \n )\n })\n\n const displayedRows = isExpandable && !isExpanded ? skillRows.splice(0, DEFAULT_ROW_COUNT) : skillRows\n const showMoreButton = isExpandable && !isExpanded ? Show more {expandIcon}\n
\n \n \n Skill \n Correct \n Incorrect \n Summary \n \n \n {displayedRows} \n
\n {showMoreButton}\n
, isExpandable?: boolean }) => {\n const [isExpanded, setIsExpanded] = React.useState(skillGroupResults.length < DEFAULT_ROW_COUNT)\n\n function expandRows() { setIsExpanded(true) }\n\n const skillRows = skillGroupResults.sort((a, b) => a.skill_group.localeCompare(b.skill_group)).map(skillGroup => (\n \n {skillGroup.skill_group} \n {skillGroup.number_correct} \n {skillGroup.number_incorrect} \n {skillGroup.summary} \n )\n )\n\n const displayedRows = isExpandable && !isExpanded ? skillRows.splice(0, DEFAULT_ROW_COUNT) : skillRows\n const showMoreButton = isExpandable && !isExpanded ? Show more {expandIcon}\n
\n \n \n Skill \n Correct \n Incorrect \n Summary \n \n \n {displayedRows} \n
\n {showMoreButton}\n
{greenCircleWithCheckIcon}Correct
\nconst incorrectTag = {incorrectImage}Incorrect
\n\nconst PRE = 'pre'\nconst POST = 'post'\n\nconst QuestionTable = ({ question, }) => {\n const { directions, prompt, answer, concepts, question_number, } = question\n\n const headers = [\n {\n name: `Question ${question_number}`,\n attribute: 'label',\n width: '66px',\n tooltipText: \"The questions are grouped into skills for this report. The question number indicates the order in which students complete the questions.\",\n noTooltip: true\n },\n {\n name: \"\",\n attribute: 'conceptTag',\n width: '83px',\n noTooltip: true\n },\n {\n name: \"\",\n attribute: 'value',\n width: '720px'\n }\n ]\n\n const rows = [\n {\n label: 'Directions',\n value: directions,\n id: directions\n },\n {\n label: 'Prompt',\n value: prompt,\n id: prompt\n },\n {\n label: 'Response',\n value: answer,\n id: answer\n }\n ]\n\n concepts.forEach(concept => {\n rows.push({\n label: 'Concept',\n value: concept.name,\n conceptTag: concept.correct ? correctTag : incorrectTag,\n id: concept.name\n })\n })\n\n const mobileRows = rows.map(row => (\n {row.label} \n {row.value} \n {row.conceptTag} \n
))\n\n const mobileTable = (\n
Question {question_number}
\n {mobileRows}\n
\n \n )\n}\n\nconst Tab = ({ activeTab, label, setPreOrPost, value, }) => {\n function handleClick() { setPreOrPost(value) }\n\n return ({label} )\n}\n\nexport const IndividualStudentResponses = ({ match, passedConceptResults, passedSkillGroupResults, mobileNavigation, location, }) => {\n const [loading, setLoading] = React.useState(!(passedConceptResults && passedSkillGroupResults));\n const [name, setName] = React.useState('')\n const [conceptResults, setConceptResults] = React.useState(passedConceptResults || {});\n const [skillGroupResults, setSkillGroupResults] = React.useState>(passedSkillGroupResults || {});\n const [preOrPost, setPreOrPost] = React.useState(POST)\n\n const { activityId, classroomId, studentId, } = match.params\n const unitId = qs.parse(location.search.replace('?', '')).unit\n const unitQueryString = unitId ? `&unit_id=${unitId}` : ''\n\n React.useEffect(() => {\n getData()\n }, [])\n\n React.useEffect(() => {\n // this is only false in a test environment\n if (!(passedConceptResults && passedSkillGroupResults)) {\n setLoading(true)\n }\n getData()\n }, [activityId, classroomId, unitId, studentId])\n\n React.useEffect(() => {\n if (loading) { return }\n\n const splitUrl = window.location.href.split('#');\n const id = splitUrl[splitUrl.length - 1]\n\n // check if URL has a hash and the page has fully loaded\n if (id) {\n const element = document.getElementById(id);\n\n // if the element exists, scroll to it\n if (element) {\n element.scrollIntoView();\n }\n }\n }, [loading]);\n\n\n function getData() {\n requestGet(`/teachers/progress_reports/individual_student_diagnostic_responses/${studentId}?activity_id=${activityId}&classroom_id=${classroomId}${unitQueryString}`,\n (data) => {\n setConceptResults(data.concept_results);\n setSkillGroupResults(data.skill_group_results)\n setName(data.name)\n setLoading(false)\n }\n )\n }\n\n if (loading) { return {skillGroupResults[0] && skillGroupResults[0].pre ?
\n }\n\n const questions = conceptResults.pre ? conceptResults[preOrPost].questions : conceptResults.questions\n\n const sortedSkillGroups = sortSkillGroupsByQuestionNumbers(skillGroupResults, questions)\n\n const skillGroups = sortedSkillGroups.map(skillGroup => {\n const { number_correct, number_incorrect, } = conceptResults.pre ? skillGroup[preOrPost] : skillGroup\n const filteredQuestions = questions.filter(q => skillGroup.question_uids.includes(q.question_uid));\n const percentage = (number_correct / (number_correct + number_incorrect)) * 100;\n\n return (\n \n \n
\n {skillGroup.skill_group} \n {`${Math.round(percentage)}%`} \n \n
{number_correct} of {number_correct + number_incorrect} Questions Correct
\n
\n );\n });\n\n let conceptResultElements = skillGroups\n\n if (conceptResults.pre) {\n conceptResultElements = (\n \n
\n {skillGroups}\n )\n }\n\n return (\n \n \n {mobileNavigation}\n {skillsSection}\n \n \n )\n\n}\n\nexport default withRouter(IndividualStudentResponses)\n","import qs from 'qs';\nimport * as React from 'react';\nimport { withRouter } from 'react-router-dom';\nimport { stripHtml } from \"string-strip-html\";\n\nimport {\n fileDocumentIcon,\n sortSkillGroupsByQuestionNumbers,\n} from './shared';\nimport {\n SkillGroupSummary\n} from './interfaces'\n\nimport { requestGet } from '../../../../../../modules/request/index';\nimport {\n DataTable,\n Tooltip,\n} from '../../../../../Shared/index';\nimport LoadingSpinner from '../../../shared/loading_indicator.jsx';\n\ninterface Question {\n instructions: string;\n prompt: string;\n score: number;\n question_id: number;\n question_uid: string;\n question_number: number;\n}\n\nconst AVERAGE_FONT_WIDTH = 6.5\nconst ALLOTTED_WIDTH = 550\n\nconst desktopHeaders = [\n {\n name: 'Question',\n attribute: 'questionNumber',\n width: '112px',\n textAlign: 'center',\n rowSectionClassName: 'question-number-section',\n },\n {\n name: 'Activity Scores',\n attribute: 'scoreElement',\n width: '120px',\n noTooltip: true,\n rowSectionClassName: 'score-section',\n headerClassName: 'score-header'\n },\n {\n name: '',\n attribute: 'directionsAndPrompt',\n width: '644px',\n noTooltip: true,\n rowSectionClassName: 'directions-and-prompt-section',\n headerClassName: 'directions-and-prompt-header'\n }\n]\n\nconst mobileHeaders = [\n {\n name: '',\n attribute: 'directionsAndPrompt',\n width: '188px',\n rowSectionClassName: 'directions-and-prompt-section',\n },\n {\n name: 'Scores',\n attribute: 'scoreElement',\n width: '52px',\n rowSectionClassName: 'score-section',\n headerClassName: 'score-header',\n noTooltip: true\n }\n]\n\nconst scoreToClassName = (score) => {\n if (score >= 83) { return 'frequently-demonstrated-skill' }\n if (score >= 32) { return 'sometimes-demonstrated-skill' }\n return 'rarely-demonstrated-skill'\n}\n\nconst DirectionsAndPrompt = ({ directions, prompt, onMobile, }) => {\n function textOrTooltip(text) {\n if (onMobile) {\n return
\n }\n\n if ((stripHtml(text).result.length * AVERAGE_FONT_WIDTH) >= ALLOTTED_WIDTH) {\n return (\n {stripHtml(text).result}
\n }\n\n return (\n \n
\n Directions \n {textOrTooltip(directions)}\n
\n
\n Prompt \n {textOrTooltip(prompt)}\n
\n
(!(passedQuestions && passedSkillGroupSummaries));\n const [questions, setQuestions] = React.useState(passedQuestions || []);\n const [skillGroupSummaries, setSkillGroupSummaries] = React.useState(passedSkillGroupSummaries || []);\n const [completedStudentCount, setCompletedStudentCount] = React.useState(null)\n\n const { activityId, classroomId, } = match.params\n const unitId = qs.parse(location.search.replace('?', '')).unit\n const unitQueryString = unitId ? `?unit_id=${unitId}` : ''\n\n React.useEffect(() => {\n getQuestions()\n getResults()\n }, [])\n\n React.useEffect(() => {\n // only false in test environment\n if (!(passedQuestions && passedSkillGroupSummaries)) {\n setLoading(true)\n }\n getQuestions()\n getResults()\n }, [activityId, classroomId, unitId])\n\n React.useEffect(() => {\n if (questions.length && skillGroupSummaries.length && Number.isInteger(completedStudentCount)) {\n setLoading(false)\n }\n }, [questions, skillGroupSummaries, completedStudentCount])\n\n function getQuestions() {\n requestGet(`/teachers/progress_reports/question_view/classroom/${classroomId}/activity/${activityId}${unitQueryString}`,\n (data) => {\n setQuestions(data.data);\n }\n )\n }\n\n function getResults() {\n requestGet(`/teachers/progress_reports/diagnostic_results_summary?activity_id=${activityId}&classroom_id=${classroomId}${unitQueryString}`,\n (data) => {\n setCompletedStudentCount(data.student_results.filter(sr => sr.skill_groups).length)\n setSkillGroupSummaries(data.skill_group_summaries);\n }\n )\n }\n\n if (loading) { return {score}% : null\n }\n })\n\n const mobileRows = filteredQuestions.map(question => {\n const { instructions, prompt, question_id, score, } = question\n return {\n id: question_id,\n questionNumber: question_id,\n directionsAndPrompt: {score}% : null\n }\n })\n\n\n return (\n \n \n
\n {skillGroup.name} \n {completedStudentCount ? (\n \n {percentage}% \n Average score \n
\n ) : null}\n \n
\n
\n \n );\n });\n\n return (\n \n \n {mobileNavigation}\n {skillGroups}\n \n )\n}\n\nexport default withRouter(Questions)\n","import * as React from 'react'\n\nimport {\n baseDiagnosticImageSrc,\n} from './shared'\n\nimport {\n helpIcon,\n Tooltip,\n} from '../../../../../Shared/index'\n\nconst ellipsesIcon = \n \n
{name} \n
\n
\n {activityCount} {activityCount === 1 ? 'activity' : 'activities'} \n {ellipsesIcon}}\n />\n
\n \n )\n}\n\nexport default ActivityPackHeader\n","import * as React from 'react'\nimport { Link, } from 'react-router-dom'\n\nimport ActivityPackHeader from './activityPackHeader'\nimport {\n Recommendation,\n Student,\n} from './interfaces'\nimport {\n DEFAULT_LEFT_PADDING,\n DEFAULT_LEFT_PADDING_FOR_MOBILE,\n MOBILE_WIDTH,\n baseDiagnosticImageSrc,\n correctImage,\n noDataYet,\n recommendedGlyph\n} from './shared'\nimport StudentNameOrTooltip from './studentNameOrTooltip'\n\nimport {\n smallWhiteCheckIcon,\n} from '../../../../../Shared/index'\n\nconst openInNewTabIcon = {correctImage}Assigned
\n const progressIndicator = isAssigned && {completedCount} of {activityCount} Activities Completed
\n\n if (isSelected) {\n checkbox = (\n )\n }\n return (\n \n {} : toggleSelection} type=\"button\">\n {isRecommended ? recommendedGlyph : \n \n )\n}\n\nconst PostTestStudentRow = ({ student, postTestSelections, setPostTestSelections, previouslyAssignedPostTestStudentIds, studentsWhoCompletedAssignedRecommendations, }) => {\n const { name, completed, id, } = student\n\n if (!completed) {\n return {correctImage}Assigned
\n\n if (isSelected) {\n checkbox = (\n )\n }\n\n return (\n \n \n {} : toggleSelection} type=\"button\">\n {isAssigned ? assignedText : checkbox}\n \n \n \n )\n}\n\nconst StudentRow = ({ student, selections, recommendations, previouslyAssignedRecommendations, setSelections, responsesLink, }) => {\n const { name, completed, id, } = student\n\n let firstCell = (\n \n Diagnostic not completed \n
\n )\n\n let selectionCells = selections.map((selection: Recommendation) => (\n \n )\n\n selectionCells = selections.map((selection: Recommendation, i: number) => {\n const previouslyAssignedRecommendation = previouslyAssignedRecommendations.find(r => r.activity_pack_id === selection.activity_pack_id)\n const isAssigned = previouslyAssignedRecommendation.students.includes(id)\n const completedCount = isAssigned && previouslyAssignedRecommendation.diagnostic_progress[id]\n const isRecommended = recommendations.find(r => r.activity_pack_id === selection.activity_pack_id).students.includes(id)\n const isSelected = selection.students.includes(id)\n return (\n {firstCell}{selectionCells} \n}\n\nconst RecommendationsTable = ({ postTestSelections, previouslyAssignedPostTestStudentIds, setPostTestSelections, studentsWhoCompletedAssignedRecommendations, recommendations, responsesLink, students, selections, previouslyAssignedRecommendations, setSelections, studentsWhoCompletedDiagnostic, isPostTest, postDiagnosticUnitTemplateId}: RecommendationsTableProps) => {\n const recommendationsTableRef = React.useRef(null);\n\n function paddingLeft() {\n if (MOBILE_WIDTH >= window.innerWidth) { return DEFAULT_LEFT_PADDING_FOR_MOBILE }\n const explanation = document.getElementsByClassName('explanation')[0]\n return explanation && DEFAULT_LEFT_PADDING\n }\n\n function onSelectAllForPostDiagnosticClick() {\n const studentIdsWhoHaveCompletedDiagnostic = students.filter(s => s.completed).map(s => s.id)\n setPostTestSelections(studentIdsWhoHaveCompletedDiagnostic)\n }\n\n function onSelectAllColumnClick(activityPackId) {\n const newSelections = [...selections];\n const selectionIndex = newSelections.findIndex(sel => sel.activity_pack_id === activityPackId)\n const studentIdsWhoHaveCompletedDiagnostic = students.filter(s => s.completed).map(s => s.id)\n\n newSelections[selectionIndex].students = studentIdsWhoHaveCompletedDiagnostic\n\n setSelections(newSelections)\n }\n\n const tableHeaders = recommendations && recommendations.map(recommendation => {\n const { activity_pack_id, name, activity_count, } = recommendation\n\n function handleSelectAllClick() {\n onSelectAllColumnClick(activity_pack_id)\n }\n\n return (\n \n \n {isPostTest ? null : Name }\n {isPostTest ? renderPostTestTableHeader() : tableHeaders}\n \n \n )\n }\n\n return (\n \n
\n {renderRecommendationsTableHeader()}\n {(tableHasContent || isPostTest) ? null : {noDataYet} \n {recommendationStudentRows}\n \n\n
\n
\n {illustration}\n
\n {headerText} \n \n
{subheaderText}
\n
{descriptionText}
\n
\n
\n
\n
How would you like to release activity packs to students? \n
\n
\n
\n
{originalReleaseMethod ? 'Note: Your selection will be applied to the entire class' : ''}
\n
\n Cancel \n {originalReleaseMethod ? 'Save' : 'Assign'} \n
\n
\n
\n
{correctImage}Assigned
\n if (isSelected) {\n checkbox = (\n )\n }\n const studentNames = students_needing_instruction.join('\n \n
\n {isRecommended ? recommendedGlyph :
{name} \n \n
\n {isAssigned && assigned}\n {students_needing_instruction.length} student{students_needing_instruction.length === 1 ? '' : 's'} need{students_needing_instruction.length === 1 ? 's' : ''} instruction \n {activities.length} lesson{activities.length === 1 ? '' : 's'} \n {expandIcon} \n
\n
\n )\n}\n\nconst LessonsRecommendations = ({ assigningLessonsBanner, previouslyAssignedRecommendations, recommendations, selections, setSelections, }) => {\n return (\n \n {recommendations.map(recommendation =>
\n )\n}\n\nconst RecommendationsButtons = ({ className, parentClassName, numberSelected, assigning, assigned, handleClickAssignActivityPacks, deselectAll, selectAll, selectAllRecommended, releaseMethod, handleClickEditReleaseMethod }) => {\n let assignButton = Assign activity packs \n\n if (assigning) {\n assignButton = Assigning... \n } else if (assigned) {\n assignButton = Assigned \n } else if (numberSelected) {\n assignButton = Assign activity packs \n }\n\n let releaseMethodText\n let showReleaseMethodModalButton\n\n if (releaseMethod) {\n releaseMethodText = Release Method: {releaseMethod} \n }\n\n if (releaseMethod && handleClickEditReleaseMethod) {\n showReleaseMethodModalButton = Edit \n }\n\n return (\n \n
\n
\n Select all \n Select all recommended \n Deselect all \n
\n
\n
\n {releaseMethodText}\n {showReleaseMethodModalButton}\n
\n {assignButton}\n
\n
\n
Assign test \n\n if (assigningPostTest) {\n assignButton = Assigning... \n } else if (assignedPostTest) {\n assignButton = Assigned \n } else if (numberSelectedForPostTest) {\n assignButton = Assign test \n }\n\n return (\n \n {assignButton}\n
\n )\n}\n\nconst IndependentRecommendationsButtons = ({ handleClickAssignActivityPacks, independentSelections, setIndependentSelections, recommendations, students, assigned, assigning, previouslyAssignedRecommendations, releaseMethod, setShowReleaseMethodModal, }) => {\n function handleClickEditReleaseMethod() { setShowReleaseMethodModal(true) }\n\n function handleSelectAllClick() {\n const newSelections = independentSelections.map((selection, index) => {\n selection.students = students.filter(s => s.completed).map(s => s.id)\n return selection\n })\n setIndependentSelections(newSelections)\n }\n\n function handleSelectAllRecommendedClick() {\n const newSelections = independentSelections.map((selection, index) => {\n selection.students = recommendations[index].students\n return selection\n })\n setIndependentSelections(newSelections)\n }\n\n function handleDeselectAllClick() {\n const newSelections = independentSelections.map(selection => {\n selection.students = []\n return selection\n })\n setIndependentSelections(newSelections)\n }\n\n const numberSelected = independentSelections.reduce((previousValue, selection) => {\n const previouslyAssignedActivity = previouslyAssignedRecommendations.find(r => r.activity_pack_id === selection.activity_pack_id)\n const selectedStudents = selection.students.filter(id => !previouslyAssignedActivity.students.includes(id))\n return previousValue += selectedStudents.length\n }, 0)\n\n return (\n (!passedPreviouslyAssignedRecommendations && !passedIndependentRecommendations && !passedLessonRecommendations);\n const [previouslyAssignedIndependentRecommendations, setPreviouslyAssignedIndependentRecommendations] = React.useState(passedPreviouslyAssignedRecommendations);\n const [previouslyAssignedLessonsRecommendations, setPreviouslyAssignedLessonsRecommendations] = React.useState(passedPreviouslyAssignedLessonRecommendations);\n const [previouslyAssignedPostTestStudentIds, setPreviouslyAssignedPostTestStudentIds] = React.useState([])\n const [independentRecommendations, setIndependentRecommendations] = React.useState(passedIndependentRecommendations);\n const [lessonsRecommendations, setLessonsRecommendations] = React.useState(passedLessonRecommendations);\n const [independentSelections, setIndependentSelections] = React.useState([]);\n const [lessonsSelections, setLessonsSelections] = React.useState([]);\n const [postTestSelections, setPostTestSelections] = React.useState([])\n const [students, setStudents] = React.useState([]);\n const [independentAssigning, setIndependentAssigning] = React.useState(false)\n const [independentAssigned, setIndependentAssigned] = React.useState(false)\n const [postTestAssigning, setPostTestAssigning] = React.useState(false)\n const [postTestAssigned, setPostTestAssigned] = React.useState(false)\n const [lessonsAssigning, setLessonsAssigning] = React.useState(false)\n const [lessonsAssigned, setLessonsAssigned] = React.useState(false)\n const [showSnackbar, setShowSnackbar] = React.useState(false)\n const [snackbarText, setSnackbarText] = React.useState('')\n const [lessonsBannerEnabled, setLessonsBannerEnabled] = React.useState(lessonsBannerIsShowable)\n const [releaseMethod, setReleaseMethod] = React.useState(null)\n const [originalReleaseMethod, setOriginalReleaseMethod] = React.useState(null)\n const [showReleaseMethodModal, setShowReleaseMethodModal] = React.useState(false)\n\n useSnackbarMonitor(showSnackbar, setShowSnackbar, defaultSnackbarTimeout)\n\n const { params, } = match\n const { activityId, classroomId, } = params\n const unitId = qs.parse(location.search.replace('?', '')).unit\n const unitQueryString = unitId ? `?unit_id=${unitId}` : ''\n\n React.useEffect(() => {\n getRecommendations()\n getPreviouslyAssignedRecommendationData()\n }, [])\n\n React.useEffect(() => {\n setLoading(true)\n setIndependentSelections([])\n setLessonsSelections([])\n setIndependentRecommendations(null)\n setLessonsRecommendations(null)\n setPreviouslyAssignedIndependentRecommendations(null)\n setPreviouslyAssignedLessonsRecommendations(null)\n setPreviouslyAssignedPostTestStudentIds([])\n getRecommendations()\n getPreviouslyAssignedRecommendationData()\n getPreviouslyAssignedPostTestData()\n }, [activityId, classroomId, unitId])\n\n React.useEffect(() => {\n if (loading) { return }\n let newSelections = independentSelections\n if (independentSelections.length === 0) {\n newSelections = independentRecommendations.map((recommendation, i) => {\n return {\n activity_count: recommendation.activity_count,\n activity_pack_id: recommendation.activity_pack_id,\n name: recommendation.name,\n students: [...recommendation.students],\n };\n });\n }\n const newLessonsRecommendations = lessonsRecommendations.map((recommendation) => {\n if (previouslyAssignedLessonsRecommendations.includes(recommendation.activity_pack_id)) {\n return Object.assign({}, recommendation, { status: 'assigned', previously_assigned: true, });\n } else {\n return recommendation;\n }\n });\n setIndependentSelections(newSelections)\n setLessonsRecommendations(newLessonsRecommendations)\n }, [loading])\n\n React.useEffect(() => {\n if (independentAssigned) {\n setTimeout(() => setIndependentAssigned(false), 5000)\n }\n if (lessonsAssigned) {\n setTimeout(() => setLessonsAssigned(false), 5000)\n }\n if (postTestAssigned) {\n setTimeout(() => setPostTestAssigned(false), 5000)\n }\n }, [independentAssigned, lessonsAssigned, postTestAssigned])\n\n React.useEffect(() => {\n if (independentRecommendations && lessonsRecommendations && previouslyAssignedLessonsRecommendations && previouslyAssignedIndependentRecommendations) {\n setLoading(false)\n }\n }, [independentRecommendations, lessonsRecommendations, previouslyAssignedLessonsRecommendations, previouslyAssignedIndependentRecommendations])\n\n React.useEffect(() => {\n setReleaseMethod(originalReleaseMethod)\n }, [originalReleaseMethod])\n\n function closeLessonsBanner() {\n setLessonsBannerEnabled(false)\n requestPost('/milestones/complete_acknowledge_lessons_banner')\n }\n\n function getRecommendations() {\n requestGet(`/teachers/progress_reports/recommendations_for_classroom/${classroomId}/activity/${activityId}${unitQueryString}`, (data) => {\n setIndependentRecommendations(JSON.parse(JSON.stringify(data.recommendations)));\n setStudents(data.students)\n });\n requestGet(`/teachers/progress_reports/lesson_recommendations_for_classroom/${classroomId}/activity/${activityId}${unitQueryString}`, (data) => {\n setLessonsRecommendations(data.lessonsRecommendations);\n });\n }\n\n function getPreviouslyAssignedRecommendationData() {\n requestGet(`/teachers/progress_reports/previously_assigned_recommendations/${classroomId}/activity/${activityId}${unitQueryString}`, ((data) => {\n setPreviouslyAssignedIndependentRecommendations(data.previouslyAssignedIndependentRecommendations)\n setPreviouslyAssignedLessonsRecommendations(data.previouslyAssignedLessonsRecommendations)\n const anyIndependentRecommendationsPreviouslyAssigned = data.previouslyAssignedIndependentRecommendations.some(rec => rec.students.length)\n const releaseMethod = anyIndependentRecommendationsPreviouslyAssigned ? data.releaseMethod || IMMEDIATE : data.releaseMethod\n setOriginalReleaseMethod(releaseMethod)\n }));\n }\n\n function getPreviouslyAssignedPostTestData() {\n if (!postDiagnosticUnitTemplateId) { return }\n requestGet(`/teachers/progress_reports/student_ids_for_previously_assigned_activity_pack/${classroomId}/activity_pack/${postDiagnosticUnitTemplateId}`, ((data) => {\n setPreviouslyAssignedPostTestStudentIds(data.student_ids)\n }));\n }\n\n function initializePusher(isLessons = false) {\n if (window.postbuildEnv.RAILS_ENV === 'development') {\n Pusher.logToConsole = true;\n }\n const pusher = new Pusher(window.postbuildEnv.PUSHER_KEY, { cluster: window.postbuildEnv.PUSHER_CLUSTER });\n const channel = pusher.subscribe(classroomId);\n if (isLessons) {\n channel.bind('lessons-recommendations-assigned', (data) => {\n triggerSnackbar('Activity packs assigned')\n setLessonsAssigned(true)\n setLessonsAssigning(false)\n getPreviouslyAssignedRecommendationData();\n pusher.unsubscribe(classroomId)\n });\n } else {\n channel.bind('personalized-recommendations-assigned', (data) => {\n triggerSnackbar('Activity packs assigned')\n setIndependentAssigned(true)\n setIndependentAssigning(false)\n getPreviouslyAssignedRecommendationData();\n pusher.unsubscribe(classroomId)\n });\n }\n }\n\n function triggerSnackbar(snackbarCopy) {\n setSnackbarText(snackbarCopy)\n setShowSnackbar(true)\n }\n\n function onClickCancelReleaseMethod() {\n setReleaseMethod(originalReleaseMethod)\n setShowReleaseMethodModal(false)\n }\n\n function assignLessonsActivityPacks() {\n initializePusher(true)\n requestPost('/teachers/progress_reports/assign_whole_class_instruction_packs/', { unit_template_ids: lessonsSelections, classroom_id: params.classroomId }, (data) => { }, (data) => {\n alert(TROUBLE_PROCESSING_MESSAGE);\n })\n }\n\n function formatSelectionsForAssignment() {\n const independentSelectionsArr = independentSelections.map((activityPack, index) => {\n const students = _.uniq(activityPack.students.concat(previouslyAssignedIndependentRecommendations[index].students))\n return {\n id: activityPack.activity_pack_id,\n classrooms: [\n {\n id: classroomId,\n student_ids: students,\n order: index\n }\n ]\n }\n });\n return { selections: independentSelectionsArr, };\n }\n\n function assignIndependentActivityPacks() {\n setShowReleaseMethodModal(false)\n const dataToPass = {\n classroom_id: classroomId,\n diagnostic_activity_id: activityId,\n ...formatSelectionsForAssignment(),\n assigning_all_recommended_packs: _.isEqual(independentSelections, independentRecommendations),\n release_method: releaseMethod\n }\n setIndependentAssigning(true)\n initializePusher()\n requestPost('/teachers/progress_reports/assign_independent_practice_packs/', dataToPass, (data) => { }, (data) => {\n alert(TROUBLE_PROCESSING_MESSAGE);\n setIndependentAssigning(false)\n })\n }\n\n function assignPostTest() {\n const dataToPass = {\n classroom_id: classroomId,\n student_ids: postTestSelections,\n unit_template_id: postDiagnosticUnitTemplateId\n }\n setPostTestAssigning(true)\n requestPost('/teachers/progress_reports/assign_post_test/', dataToPass, (data) => {\n setPostTestAssigning(false)\n setPostTestAssigned(true)\n getPreviouslyAssignedPostTestData()\n }, (data) => {\n alert(TROUBLE_PROCESSING_MESSAGE);\n setPostTestAssigning(false)\n })\n }\n\n function handleClickAssignIndependentActivityPacks() {\n if (releaseMethod) {\n assignIndependentActivityPacks()\n } else {\n setShowReleaseMethodModal(true)\n }\n }\n\n const responsesLink = (studentId: number) => unitId ? `/diagnostics/${activityId}/classroom/${classroomId}/responses/${studentId}?unit=${unitId}` : `/diagnostics/${activityId}/classroom/${classroomId}/responses/${studentId}`\n\n if (loading) { return \n
{recommendedGlyph}
\n
\n
Recommended practice - not yet proficient \n
Each cell highlighted in green is an area for growth for the student - the student did not demonstrate full proficiency in this skill on the diagnostic, and Quill recommends that the student practices this skill. You can see their exact proficiency for each skill on the student results page.
\n
\n
\n Based on the results of the diagnostic, we created a personalized learning plan for each student. Customize your learning plan by selecting the activity packs you would like to assign.
\n \n \n
Independent practice {recommendedKey}\n \n \n
\n
\n
\n {showPostTestAssignmentColumn ?
: null}\n {showPostTestAssignmentColumn ?
: null}\n
\n
\n )\n }\n\n let assigningLessonsBanner\n\n if (lessonsSelections.length && lessonsBannerEnabled) {\n assigningLessonsBanner = \n \n
\n
Whole class instruction \n \n {recommendedKey}\n
)\n }\n\n let emptyState\n\n if (!(independentRecommendations.length || lessonsRecommendations.length)) {\n emptyState = (\n {craneIllustration}\n We're working on it! \n We just launched the growth diagnostics, so we don't have practice recommendations ready for the {activityName} yet. In the meantime, you can always assign the original recommendations again or explore our full library of activities to find additional practice for your students.
\n )\n }\n\n return (\n \n \n )\n}\n\nexport default withRouter(Recommendations)\n","import qs from 'qs';\nimport * as React from 'react';\nimport { withRouter } from 'react-router-dom';\n\nimport {\n OpenPopover,\n SkillGroupSummary,\n StudentResult\n} from './interfaces';\nimport {\n fileDocumentIcon,\n noProficiencyTag,\n partialProficiencyTag,\n proficiencyTag,\n timeRewindIllustration,\n noProficencyExplanation,\n prePartialProficiencyExplanation,\n proficiencyExplanation\n} from './shared';\nimport IneligibleForQuestionScoring from './ineligibleForQuestionScoring'\nimport StudentResultsTable from './studentResultsTable';\n\nimport { requestGet } from '../../../../../../modules/request/index';\nimport {\n CLICK,\n} from '../../../../../Shared/index';\nimport LoadingSpinner from '../../../shared/loading_indicator.jsx';\n\nexport const Results = ({ passedStudentResults, passedSkillGroupSummaries, match, mobileNavigation, location, eligibleForQuestionScoring, }) => {\n const [loading, setLoading] = React.useState(!passedStudentResults);\n const [studentResults, setStudentResults] = React.useState(passedStudentResults || []);\n const [skillGroupSummaries, setSkillGroupSummaries] = React.useState(passedSkillGroupSummaries || []);\n const [openPopover, setOpenPopover] = React.useState({})\n\n const { activityId, classroomId, } = match.params\n const unitId = qs.parse(location.search.replace('?', '')).unit\n const unitQueryString = unitId ? `&unit_id=${unitId}` : ''\n\n React.useEffect(() => {\n if (eligibleForQuestionScoring) {\n setLoading(true)\n getResults()\n } else {\n setLoading(false)\n }\n }, [activityId, classroomId, unitId])\n\n React.useEffect(() => {\n window.addEventListener(CLICK, closePopoverOnOutsideClick)\n return function cleanup() {\n window.removeEventListener(CLICK, closePopoverOnOutsideClick)\n }\n }, [openPopover])\n\n function getResults() {\n requestGet(`/teachers/progress_reports/diagnostic_results_summary?activity_id=${activityId}&classroom_id=${classroomId}${unitQueryString}`,\n (data) => {\n setStudentResults(data.student_results);\n setSkillGroupSummaries(data.skill_group_summaries);\n setLoading(false)\n }\n )\n }\n\n const responsesLink = (studentId: number) => unitId ? `/diagnostics/${activityId}/classroom/${classroomId}/responses/${studentId}?unit=${unitId}` : `/diagnostics/${activityId}/classroom/${classroomId}/responses/${studentId}`\n\n function closePopoverOnOutsideClick(e) {\n if (!openPopover.studentId) { return }\n\n const popoverElements = document.getElementsByClassName('student-results-popover')\n const studentRow = document.getElementById(String(openPopover.studentId))\n if (popoverElements && (!popoverElements[0].contains(e.target) && !studentRow.contains(e.target))) {\n setOpenPopover({})\n }\n }\n\n if (loading) { return \n {timeRewindIllustration}\n This report is unavailable for diagnostics assigned before a certain date. \n If you have questions, please reach out to support@quill.org.
\n )\n }\n\n return (\n \n \n {mobileNavigation}\n {emptyState || (\n \n \n {noProficiencyTag}\n
{noProficencyExplanation}
\n
\n {partialProficiencyTag}\n
{prePartialProficiencyExplanation}
\n
\n {proficiencyTag}\n
{proficiencyExplanation}
\n
\n )}\n {!!skillGroupSummaries.length && ()}\n \n )\n}\n\nexport default withRouter(Results)\n","import qs from 'qs';\nimport * as React from 'react';\nimport { Link, withRouter, } from 'react-router-dom';\n\nimport {\n fileDocumentIcon,\n PROFICIENCY,\n preToPostImprovedSkillsTooltipText,\n preQuestionsCorrectTooltipText,\n preSkillsProficientTooltipText,\n postQuestionsCorrectTooltipText,\n postSkillsImprovedOrMaintainTooltipText\n} from './shared';\n\nimport { requestGet } from '../../../../../../modules/request/index';\nimport { DataTable, DataTableChip, accountGreenIcon, pluralize } from '../../../../../Shared/index';\nimport LoadingSpinner from '../../../shared/loading_indicator.jsx';\n\ninterface Student {\n name: string;\n id: number;\n total_possible_questions_count: number;\n total_correct_questions_count: number;\n total_pre_correct_questions_count: number;\n total_pre_possible_questions_count: number;\n skill_groups: any[];\n total_correct_skill_groups_count: number;\n total_acquired_skill_groups_count: number;\n total_maintained_skill_group_proficiency_count: number;\n correct_skill_groups_text: string;\n}\n\nconst S_CELL_WIDTH = '176px'\nconst M_CELL_WIDTH = '184px'\nconst L_CELL_WIDTH = '320px'\nconst NOT_AVAILABLE = 'Not available'\n\nconst diagnosticNotCompletedElement = (Diagnostic not completed )\n\nconst preTestDesktopHeaders = (isSortable) => ([\n {\n name: 'Name',\n attribute: 'name',\n width: L_CELL_WIDTH,\n rowSectionClassName: 'name-section',\n sortAttribute: 'alphabeticalName',\n isSortable: true\n },\n {\n name: '',\n attribute: 'activeDiagnosticSkillsCorrectElement',\n sortAttribute: 'totalCorrectSkillsCount',\n width: L_CELL_WIDTH,\n rowSectionClassName: 'score-section',\n headerClassName: 'score-header',\n primaryTitle: 'Pre:',\n secondaryTitle: 'Questions Correct',\n tooltipName: 'Pre: Questions Correct',\n tooltipDescription: preQuestionsCorrectTooltipText,\n noTooltip: true,\n isSortable\n },\n {\n name: '',\n attribute: 'preSkillsProficientElement',\n sortAttribute: 'totalPreCorrectSkillsCount',\n width: L_CELL_WIDTH,\n primaryTitle: 'Pre:',\n secondaryTitle: 'Skills Proficient',\n tooltipName: 'Pre: Skills Proficient',\n tooltipDescription: preSkillsProficientTooltipText,\n noTooltip: true,\n isSortable\n }\n])\n\nconst postTestDesktopHeaders = (isSortable) => ([\n {\n name: 'Name',\n attribute: 'name',\n width: S_CELL_WIDTH,\n sortAttribute: 'alphabeticalName',\n rowSectionClassName: 'name-section',\n isSortable: true\n },\n {\n name: '',\n attribute: 'preToPostImprovedSkills',\n sortAttribute: 'totalAcquiredSkillGroupsCount',\n width: M_CELL_WIDTH,\n primaryTitle: 'Pre to Post:',\n secondaryTitle: 'Improved Skills',\n tooltipName: 'Pre to Post: Improved Skills',\n tooltipDescription: preToPostImprovedSkillsTooltipText,\n noTooltip: true,\n isSortable\n },\n {\n name: '',\n attribute: 'preSkillsCorrectElement',\n sortAttribute: 'totalPreCorrectQuestionsCount',\n width: M_CELL_WIDTH,\n primaryTitle: 'Pre:',\n secondaryTitle: 'Questions Correct',\n tooltipName: 'Pre: Questions Correct',\n tooltipDescription: preQuestionsCorrectTooltipText,\n rowSectionClassName: 'score-section',\n headerClassName: 'score-header',\n noTooltip: true,\n isSortable\n },\n {\n name: '',\n attribute: 'preSkillsProficientElement',\n sortAttribute: 'totalPreCorrectSkillsCount',\n width: M_CELL_WIDTH,\n primaryTitle: 'Pre:',\n secondaryTitle: 'Skills Proficient',\n tooltipName: 'Pre: Skills Proficient',\n tooltipDescription: preSkillsProficientTooltipText,\n noTooltip: true,\n isSortable\n },\n {\n name: '',\n attribute: 'activeDiagnosticSkillsCorrectElement',\n sortAttribute: 'totalCorrectSkillsCount',\n width: M_CELL_WIDTH,\n primaryTitle: 'Post:',\n secondaryTitle: 'Questions Correct',\n tooltipName: 'Post: Questions Correct',\n tooltipDescription: postQuestionsCorrectTooltipText,\n rowSectionClassName: 'score-section',\n headerClassName: 'score-header',\n noTooltip: true,\n isSortable\n },\n {\n name: 'Post: Skills Improved or Maintained',\n attribute: 'postSkillsImprovedOrMaintained',\n sortAttribute: 'totalAcquiredOrMaintainedSkillGroupsCount',\n width: '230px',\n primaryTitle: 'Post:',\n secondaryTitle: 'Skills Improved or Maintained',\n tooltipName: 'Post: Skills Improved or Maintained',\n tooltipDescription: postSkillsImprovedOrMaintainTooltipText,\n noTooltip: true,\n isSortable\n }\n])\n\n\nconst mobileHeaders = (isSortable) => ([\n {\n name: 'Name',\n attribute: 'name',\n width: '146px',\n rowSectionClassName: 'name-section',\n headerClassName: 'name-header',\n sortAttribute: 'alphabeticalName',\n isSortable: true\n },\n {\n name: 'Questions correct',\n attribute: 'skillsCorrectElement',\n sortAttribute: 'totalCorrectSkillsCount',\n width: '102px',\n rowSectionClassName: 'score-section',\n headerClassName: 'score-header',\n noTooltip: true,\n isSortable\n }\n])\n\nfunction calculateSkillsPercentage(correct, total) {\n return Math.round((correct/total) * 100)\n}\n\nfunction alphabeticalName(name) {\n const nameArray = name.split(' ')\n const lastName = nameArray[nameArray.length - 1]\n return `${lastName} ${nameArray.join(' ')}`\n}\n\nexport const StudentResponsesIndex = ({ passedStudents, match, mobileNavigation, location, isPostDiagnostic, }) => {\n const [loading, setLoading] = React.useState(!passedStudents);\n const [students, setStudents] = React.useState(passedStudents || []);\n\n const { activityId, classroomId, } = match.params\n const unitId = qs.parse(location.search.replace('?', '')).unit\n const unitQueryString = unitId ? `&unit_id=${unitId}` : ''\n\n React.useEffect(() => {\n getStudents()\n }, [])\n\n React.useEffect(() => {\n setLoading(true)\n getStudents()\n }, [activityId, classroomId, unitId])\n\n function getStudents() {\n const link = isPostDiagnostic ? `/teachers/progress_reports/diagnostic_growth_results_summary?activity_id=${activityId}&classroom_id=${classroomId}` : `/teachers/progress_reports/diagnostic_results_summary?activity_id=${activityId}&classroom_id=${classroomId}${unitQueryString}`\n requestGet(link,\n (data) => {\n setStudents(data.student_results);\n setLoading(false)\n }\n )\n }\n\n function getPreSkillsProficientCount({ total_correct_questions_count, total_correct_skill_groups_count, skill_groups }) {\n if (total_correct_questions_count === undefined) { return null }\n\n if (total_correct_skill_groups_count) { return total_correct_skill_groups_count }\n\n return skill_groups.filter(skillGroup => skillGroup.pre_test_proficiency === PROFICIENCY).length\n }\n\n function renderPreToPostImprovedSkillsElement({total_correct_questions_count, total_acquired_skill_groups_count}) {\n if (total_correct_questions_count === undefined) { return diagnosticNotCompletedElement }\n\n if (total_acquired_skill_groups_count === 0) { return '0 Improved Skills' }\n\n if (!total_acquired_skill_groups_count) { return NOT_AVAILABLE }\n\n return total_acquired_skill_groups_count === 1 ? '+1 Improved Skill' : `+${total_acquired_skill_groups_count} Improved Skills`\n }\n\n function renderPreSkillsCorrectElement({ total_correct_questions_count, total_pre_correct_questions_count, total_pre_possible_questions_count, total_possible_questions_count }) {\n if (total_correct_questions_count === undefined) { return null }\n\n if (!total_pre_correct_questions_count) { return NOT_AVAILABLE }\n\n return(\n \n
{total_pre_correct_questions_count} of {total_pre_possible_questions_count} Questions
\n
({(calculateSkillsPercentage(total_pre_correct_questions_count, total_possible_questions_count))}%)
\n
\n
{countOfPreSkillsProficient} of {skill_groups.length} {pluralize(countOfPreSkillsProficient, \"Skill\", \"Skills\")}
\n {!!countOfSkillsToPractice &&
({countOfSkillsToPractice} {pluralize({countOfSkillsToPractice}, \"Skill\", \"Skills\")} to Practice)
}\n
\n
{correct_skill_groups_text}
\n {!!countOfSkillsToPractice &&
({countOfSkillsToPractice} {pluralize(countOfSkillsToPractice, \"Skill\", \"Skills\")} to Practice)
}\n
\n
{total_correct_questions_count} of {total_possible_questions_count} Questions
\n
({calculateSkillsPercentage(total_correct_questions_count, total_possible_questions_count)}%)
\n
\n
{correct_skill_groups_text}
\n
({acquiredSkillsText}, {maintainedSkillsText})
\n
{name} \n }\n if (total_correct_questions_count === undefined) {\n return {name} Diagnostic not completed {total_correct_questions_count} of {total_possible_questions_count} ({calculateSkillsPercentage(total_correct_questions_count, total_possible_questions_count)}%)
: null\n }\n })\n\n return (\n \n \n {mobileNavigation}\n \n
\n \n )\n}\n\nexport default withRouter(StudentResponsesIndex)\n","import qs from 'qs';\nimport * as React from 'react';\nimport { withRouter } from 'react-router-dom';\n\nimport {\n SkillGroupSummary,\n StudentResult,\n} from './interfaces';\nimport PercentageCircle from './percentageCircle';\nimport IneligibleForQuestionScoring from './ineligibleForQuestionScoring'\nimport {\n fileDocumentIcon,\n noDataYet,\n timeRewindIllustration,\n} from './shared';\nimport SkillGroupTooltip from './skillGroupTooltip';\n\nimport { requestGet } from '../../../../../../modules/request/index';\nimport {\n Tooltip,\n} from '../../../../../Shared/index';\nimport DemoOnboardingTour, { DEMO_ONBOARDING_DIAGNOSTIC_RESULTS_SUMMARY, } from '../../../shared/demo_onboarding_tour';\nimport LoadingSpinner from '../../../shared/loading_indicator.jsx';\n\nconst SkillGroupSummaryCard = ({ skillGroupSummary, completedStudentCount }) => {\n const { name, description, not_yet_proficient_student_names, proficiency_scores_by_student } = skillGroupSummary\n let cardContent = noDataYet\n if (completedStudentCount) {\n const numberOfStudentsNeedingPractice = not_yet_proficient_student_names.length\n const proficiencyScoresSum: any = Object.values(proficiency_scores_by_student).reduce((a: number, b: number) => a + b, 0)\n const percentage = Math.round((proficiencyScoresSum/completedStudentCount) * 100)\n let needPracticeElement = No practice needed \n\n if (numberOfStudentsNeedingPractice) {\n const tooltipText = `${not_yet_proficient_student_names.join('
`\n const tooltipTriggerText = numberOfStudentsNeedingPractice === 1 ? \"1 student recommended practice\" : `${numberOfStudentsNeedingPractice} students recommended practice`\n needPracticeElement = (\n Score \n )\n }\n return (\n \n \n {name} \n
\n {cardContent}\n \n )\n}\n\nexport const Summary = ({ passedStudentResults, passedSkillGroupSummaries, match, mobileNavigation, location, eligibleForQuestionScoring, }) => {\n const [loading, setLoading] = React.useState(!passedStudentResults);\n const [studentResults, setStudentResults] = React.useState(passedStudentResults || []);\n const [skillGroupSummaries, setSkillGroupSummaries] = React.useState(passedSkillGroupSummaries || []);\n\n const { activityId, classroomId, } = match.params\n const unitId = qs.parse(location.search.replace('?', '')).unit\n const unitQueryString = unitId ? `&unit_id=${unitId}` : ''\n\n React.useEffect(() => {\n if (eligibleForQuestionScoring) {\n setLoading(true)\n getResults()\n } else {\n setLoading(false)\n }\n }, [activityId, classroomId, unitId])\n\n function getResults() {\n requestGet(`/teachers/progress_reports/diagnostic_results_summary?activity_id=${activityId}&classroom_id=${classroomId}${unitQueryString}`,\n (data) => {\n setStudentResults(data.student_results);\n setSkillGroupSummaries(data.skill_group_summaries);\n setLoading(false)\n }\n )\n }\n\n if (loading) { return \n {timeRewindIllustration}\n This report is unavailable for diagnostics assigned before a certain date. \n If you have questions, please reach out to support@quill.org.
\n )\n }\n\n const completedStudentCount = studentResults.filter(sr => sr.skill_groups).length\n\n const skillGroupSummaryCards = skillGroupSummaries.map(skillGroupSummary => \n \n )\n}\n\nexport default withRouter(Summary)\n","import * as React from 'react';\n\nimport qs from 'qs';\nimport { NavLink, Route, Switch, withRouter, } from 'react-router-dom';\n\nimport GrowthResults from './growthResults';\nimport GrowthSummary from './growthSummary';\nimport IndividualStudentResponses from './individualStudentResponses';\nimport Questions from './questions';\nimport Recommendations from './recommendations';\nimport Results from './results';\nimport { accountCommentIcon, baseDiagnosticImageSrc, closeIcon, goToAssign, } from './shared';\nimport StudentResponsesIndex from './studentResponsesIndex';\nimport Summary from './summary';\n\nimport { DropdownInput, } from '../../../../../Shared/index';\nimport { RESULTS_AND_RECOMMENDATIONS_FEATURED_BLOG_POST_ID } from '../../../../constants/featuredBlogPost';\nimport ArticleSpotlight from '../../../shared/articleSpotlight';\nimport { PROGRESS_REPORTS_SELECTED_CLASSROOM_ID, } from '../../progress_report_constants';\n\nconst barChartIcon = PRE \nconst postBadge = POST \n\nconst DiagnosticSection = ({ activity, isPostDiagnostic, isDisabled, search, }) => {\n const { activity_name, activity_id, classroom_id, } = activity\n const baseLinkPath = `/diagnostics/${activity_id}/classroom/${classroom_id}`\n const queryString = search ? search : ''\n\n const summaryLinkContent = {tableIcon}Class summary \n const resultLinkContent = {isPostDiagnostic ? barChartGrowthIcon : barChartIcon}Student results \n const recommendationsLinkContent = {multipleCheckboxIcon}Practice recommendations \n const responsesLinkContent = {accountCommentIcon}Student responses \n const questionsLinkContent = {cardTextIcon}Questions analysis \n\n const resultsPath = isPostDiagnostic ? 'growth_results' : 'results'\n const summaryPath = isPostDiagnostic ? 'growth_summary' : 'summary'\n\n let activityNameForDisplay = activity_name\n let preOrPostBadge\n\n if (activity_name.includes(PRE_TEXT)) {\n activityNameForDisplay = activity_name.replace(PRE_TEXT, '')\n preOrPostBadge = preBadge\n } else if (activity_name.includes(POST_TEXT)) {\n activityNameForDisplay = activity_name.replace(POST_TEXT, '')\n preOrPostBadge = postBadge\n }\n\n return (\n \n {activityNameForDisplay} {preOrPostBadge}{eyeIcon} {summaryLinkContent} : {summaryLinkContent} }\n {isDisabled ? {resultLinkContent} : {resultLinkContent} }\n {isDisabled ? {recommendationsLinkContent} : {recommendationsLinkContent} }\n {isDisabled ? {responsesLinkContent} : {responsesLinkContent} }\n {isDisabled ? {questionsLinkContent} : {questionsLinkContent} }\n \n )\n}\n\nconst mobileLinkOptions = (diagnostic, search) => {\n const baseLinkPathPre = `/diagnostics/${diagnostic.pre.activity_id}/classroom/${diagnostic.pre.classroom_id}`\n const baseLinkPathPost = diagnostic.post && `/diagnostics/${diagnostic.post.activity_id}/classroom/${diagnostic.post.classroom_id}`\n const queryString = search ? search : ''\n\n function pathsArray(isPostDiagnostic) {\n const prefix = isPostDiagnostic ? 'Post' : 'Pre'\n const baseLink = isPostDiagnostic ? baseLinkPathPost : baseLinkPathPre\n const resultsPath = isPostDiagnostic ? 'growth_results' : 'results'\n const summaryPath = isPostDiagnostic ? 'growth_summary' : 'summary'\n return [\n {\n label: `${prefix} - Class summary`,\n value: `${baseLink}/${summaryPath}${queryString}`\n },\n {\n label: `${prefix} - Student results`,\n value: `${baseLink}/${resultsPath}${queryString}`\n },\n {\n label: `${prefix} - Practice recommendations`,\n value: `${baseLink}/recommendations${queryString}`\n },\n {\n label: `${prefix} - Student responses`,\n value: `${baseLink}/responses${queryString}`\n },\n {\n label: `${prefix} - Questions analysis`,\n value: `${baseLink}/questions${queryString}`\n }\n ]\n }\n\n\n return diagnostic.post && diagnostic.post.assigned_count ? pathsArray(false).concat(pathsArray(true)) : pathsArray(false)\n}\n\nconst PostDiagnosticCard = ({ activityId, activityName, unitTemplateId, }) => {\n const [closed, setClosed] = React.useState(false)\n\n if (closed) { return \n {closeIcon} \n {chartGrowthIllustration}\n Measure growth by assigning a {activityName}
\n \n \n )\n}\n\nconst IndividualPack = ({ classrooms, history, match, location, lessonsBannerIsShowable, }) => {\n const unitId = qs.parse(location.search.replace('?', '')).unit\n const activityId = Number(match.params.activityId)\n const classroomId = Number(match.params.classroomId)\n const splitPathName = location.pathname.split('/')\n const subPage = splitPathName[splitPathName.length - 1]\n const activeClassroom = classrooms.find(c => c.id === classroomId )\n const activeDiagnostic = diagnosticForClassroom(activeClassroom)\n\n function diagnosticForClassroom(classroom) {\n return classroom.diagnostics.find(d => {\n const assignedDiagnosticAsEitherPreOrPost = (d.pre.activity_id === activityId) || (d.post && d.post.activity_id === activityId)\n const preOrPostHasUnitId = d.pre.unit_id || d.post?.unit_id\n if (assignedDiagnosticAsEitherPreOrPost && unitId && preOrPostHasUnitId) {\n return d.pre.unit_id === Number(unitId) || d.post?.unit_id === Number(unitId)\n }\n return assignedDiagnosticAsEitherPreOrPost\n })\n }\n\n function diagnosticActivityName() {\n if (!activeDiagnostic) { return '' }\n\n if (activeDiagnostic.pre.activity_id === activityId) {\n return activeDiagnostic.pre.activity_name\n }\n\n if (activeDiagnostic.post && activeDiagnostic.post.activity_id === activityId) {\n return activeDiagnostic.post.activity_name\n }\n\n return ''\n }\n\n function activeDiagnosticIsPost() {\n if (!activeDiagnostic) { return false }\n\n if (activeDiagnostic.post && activeDiagnostic.post.activity_id === activityId) {\n return true\n }\n\n return false\n }\n\n function eligibleForQuestionScoring() {\n if (!activeDiagnostic) { return false }\n\n // we only care about whether or not the pre-diagnostic is eligible because even if the post- is, we can't compare the data and so need to keep the empty state\n return activeDiagnostic.pre.eligible_for_question_scoring\n }\n\n function onClassesDropdownChange(e) {\n const newClassroom = classrooms.find(c => c.id === e.value)\n const parallelDiagnostic = diagnosticForClassroom(newClassroom)\n // the following line handles the case where we are currently viewing a post-diagnostic page, but the parallel classroom hasn't yet been assigned the post diagnostic\n const newActivityId = parallelDiagnostic.post && parallelDiagnostic.post.activity_id === activityId ? activityId : parallelDiagnostic.pre.activity_id\n window.localStorage.setItem(PROGRESS_REPORTS_SELECTED_CLASSROOM_ID, e.value)\n history.push(`/diagnostics/${newActivityId}/classroom/${e.value}/${subPage}`)\n }\n\n function onLinkDropdownChange(e) {\n history.push(e.value)\n }\n\n let postDiagnosticContent = String(opt.value) === match.params.classroomId)}\n />)\n\n const linkDropdownOptions = mobileLinkOptions(activeDiagnostic, location.search)\n\n const linkDropdown = ( window.location.href.includes(opt.value))}\n />)\n\n const sharedProps = {\n activityName: diagnosticActivityName(),\n classrooms,\n mobileNavigation: ({classroomDropdown}{linkDropdown} ),\n lessonsBannerIsShowable,\n isPostDiagnostic: activeDiagnosticIsPost(),\n postDiagnosticUnitTemplateId: activeDiagnostic.post?.unit_template_id,\n eligibleForQuestionScoring: eligibleForQuestionScoring()\n }\n\n return (\n \n \n
\n \n {classroomDropdown}\n \n \n \n
\n
\n )\n}\n\nexport default withRouter(IndividualPack)\n","import $ from 'jquery';\nimport * as React from 'react';\nimport { Route, Switch, withRouter } from 'react-router-dom';\n\nimport DiagnosticActivityPacks from './diagnostic_activity_packs';\nimport IndividualPack from './individualPack';\nimport { Classroom } from './interfaces';\n\nimport { requestGet } from '../../../../../../modules/request/index';\nimport LoadingSpinner from '../../../shared/loading_indicator.jsx';\n\nconst DiagnosticsIndex = ({ passedClassrooms, history, match, lessonsBannerIsShowable, }) => {\n const [loading, setLoading] = React.useState(!passedClassrooms);\n const [classrooms, setClassrooms] = React.useState>(passedClassrooms || []);\n\n React.useEffect(() => {\n getDiagnostics();\n $('.diagnostic-tab').addClass('active');\n $('.activity-analysis-tab').removeClass('active');\n handleMobileDropdown();\n }, []);\n\n function handleMobileDropdown() {\n const mobileDiagnosticTab = $('#mobile-diagnostics-tab-checkmark');\n const mobileActivityAnalysisTab = $('#mobile-activity-analysis-tab-checkmark');\n const mobileDropdown = $('#mobile-subnav-toggle');\n\n\n if (mobileDropdown && mobileDiagnosticTab && mobileActivityAnalysisTab) {\n mobileDropdown.removeClass('open');\n mobileDiagnosticTab.addClass('active');\n mobileActivityAnalysisTab.removeClass('active');\n }\n // this is an override since we can only access the current_path from the backend so we just pass back an empty space\n // from the NavigationHelper module\n if (mobileDropdown && mobileDropdown.children()[0] && mobileDropdown.children()[0].children[0]) {\n const subTabElement = $(mobileDropdown.children()[0].children[0]);\n if (subTabElement.text() === ' ' || subTabElement.text() === 'Activity Analysis') {\n subTabElement.text('Diagnostics');\n }\n }\n }\n\n function getDiagnostics() {\n requestGet('/teachers/diagnostic_units',\n (data) => {\n setClassrooms(data);\n setLoading(false)\n }\n )\n }\n\n if (loading) { return \n \n )\n}\n\nexport default withRouter(DiagnosticsIndex)\n","export const BLUE = 'blue'\nexport const RED = 'red'\nexport const ORANGE = 'orange'\nexport const GREEN = 'green'\nexport const GRAY = 'gray'\n\nexport default (grade) => {\n if (grade == null) {\n return BLUE;\n } else if (grade < 0.32) {\n return RED;\n } else if (grade < 0.83) {\n return ORANGE;\n } else if (grade <= 1.0) {\n return GREEN;\n }\n return GRAY;\n};\n","import GradeColor from './grade_color'\n\n// generally used for setting color class names, hence the score color concat at end\nexport default function (grade) {\n const color = grade === null ? GradeColor(grade) : GradeColor(grade/100)\n\n return `${color}-score-color`;\n}\n","import Pluralize from 'pluralize';\nimport React from 'react';\n\nimport ScoreColor from '../../modules/score_color.js';\n\nexport default class OverviewBoxes extends React.Component {\n componentDidMount() {\n this.countBoxType();\n }\n\n countBoxType = () => {\n const { data, } = this.props\n let count = {};\n let scoreColor;\n\n data.forEach(student => {\n scoreColor = ScoreColor(student.score);\n count[scoreColor] = count[scoreColor] || 0;\n count[scoreColor] += 1;\n })\n return count;\n };\n\n boxCreator = (group, count) => {\n let range,\n proficiency\n if (group === 'red-score-color') {\n range = '0 - 31%';\n proficiency = 'Rarely demonstrated skill'\n } else if (group === 'orange-score-color') {\n range = '32 - 82%';\n proficiency = 'Sometimes demonstrated skill'\n } else {\n range = '83 - 100%';\n proficiency = 'Frequently demonstrated skill'\n }\n return (\n \n
\n {count || 0} \n {Pluralize('Student', count)} \n \n
{group === 'blue-score-color' ? 'Completed' : range}
\n
{group === 'blue-score-color' ? null : proficiency}
\n
{this.groupingBoxes()}
\n }\n}\n","import React from 'react';\nimport _ from 'underscore';\n\nimport OverviewBoxes from './overview_boxes.jsx';\n\nimport { getTimeSpent } from '../../../helpers/studentReports';\nimport { requestGet, } from '../../../../../modules/request'\nimport { DataTable, Spinner, EXTRA_SMALL_ICON_BASE_SRC, } from '../../../../Shared/index'\nimport ScoreColor from '../../modules/score_color';\n\nconst accountIcon = (null)\n\n const { params, } = match\n const { unitId, activityId, classroomId, } = params\n\n React.useEffect(() => {\n requestGet(`/teachers/progress_reports/students_by_classroom/u/${unitId}/a/${activityId}/c/${classroomId}`, (response) => {\n const notCompletedStudents = response.not_completed_names.map(name => ({ name, scoreText: 'Not completed', }))\n const missedLessonStudents = response.missed_names.map(name => ({ name, scoreText: 'Missed lesson', }))\n const allStudents = response.students.concat(notCompletedStudents).concat(missedLessonStudents)\n setStudents(allStudents)\n })\n }, [])\n\n if (!students) {\n return (
)\n }\n\n const rows = students.map((student) => {\n const { name, score, id, time, number_of_questions, average_score_on_quill, scoreText, } = student\n\n const individualStudentReportLink = `/teachers/progress_reports/diagnostic_reports#/u/${unitId}/a/${activityId}/c/${classroomId}/student_report/${id}`\n\n return {\n key: name,\n id: name,\n name: id ? {accountIcon}{name} : {accountIcon}{name} ,\n lastName: name.split(' ')[1],\n score: scoreText || {score ? `${score}%` : 'N/A'} ,\n scoreNumber: score,\n timeSpent: time ? getTimeSpent(time) : PLACEHOLDER_STRING,\n numberOfQuestions: number_of_questions || PLACEHOLDER_STRING,\n averageScoreOnQuill: average_score_on_quill ? `${average_score_on_quill}%` : PLACEHOLDER_STRING\n }\n })\n\n return (\n \n
\n )\n}\n\nexport default ClassReport\n","import $ from 'jquery';\nimport React from 'react';\n\nimport { DropdownInput } from '../../../../Shared/index';\n\nconst studentsButton = ({ buttonGroupCallback, }) => {\n const identifier = 'students'\n const className = (window.location.href.includes(identifier) || window.location.href.includes('student_report')) && 'active'\n const handleClick = () => buttonGroupCallback(identifier)\n return Student reports \n}\n\nconst questionsButton = ({ buttonGroupCallback, }) => {\n const identifier = 'questions'\n const className = window.location.href.includes(identifier) && 'active'\n const handleClick = () => buttonGroupCallback(identifier)\n return Questions reports \n}\n\nconst Navbar = ({ params, selectedActivity, classrooms, buttonGroupCallback, dropdownCallback, }) => {\n const [isDiagnostic, setIsDiagnostic] = React.useState(false);\n\n React.useEffect(() => {\n $('.diagnostic-tab').removeClass('active');\n $('.activity-analysis-tab').addClass('active');\n }, []);\n\n const classroomOptions = classrooms.map(classroom => ({ value: classroom.id, label: classroom.name, }))\n\n const onDropdownChange = (classroomOption) => {\n const selectedClassroom = classrooms.find(c => c.id === classroomOption.value)\n dropdownCallback(selectedClassroom)\n }\n\n return (\n \n )\n}\n\nexport default Navbar\n","import React from 'react';\n\nimport { requestGet, } from '../../../../../modules/request'\nimport { DataTable, Spinner, } from '../../../../Shared/index'\nimport ScoreColor from '../../modules/score_color';\n\nconst headers = [\n {\n name: 'Score',\n attribute: 'score',\n sortAttribute: 'scoreNumber',\n width: '90px',\n isSortable: true,\n noTooltip: true,\n rowSectionClassName: 'center-content',\n headerClassName: 'center-content'\n },\n {\n name: 'No.',\n attribute: 'questionNumber',\n sortAttribute: 'questionNumber',\n width: '90px',\n isSortable: true,\n noTooltip: true,\n rowSectionClassName: 'center-content',\n headerClassName: 'center-content'\n },\n {\n name: 'Instructions',\n attribute: 'instructions',\n sortAttribute: 'instructions',\n width: '480px',\n isSortable: true,\n noTooltip: true,\n rowSectionClassName: 'allow-wrap'\n },\n {\n name: 'Prompt',\n attribute: 'prompt',\n sortAttribute: 'prompt',\n width: '506px',\n isSortable: true,\n noTooltip: true,\n rowSectionClassName: 'allow-wrap'\n },\n]\n\ninterface QuestionInterface {\n instructions: string;\n prompt: string;\n question_id: number;\n question_number: number;\n question_uid: string;\n score: number;\n}\n\nconst QuestionReport = ({ match, }) => {\n const [questions, setQuestions] = React.useState(null)\n\n const { params, } = match\n const { unitId, activityId, classroomId, } = params\n\n React.useEffect(() => {\n requestGet(`/teachers/progress_reports/question_view/classroom/${classroomId}/activity/${activityId}/unit/${unitId}`, (response) => {\n setQuestions(response.data)\n })\n }, [])\n\n if (!questions) {\n return (
)\n }\n\n const rows = questions.map((question) => {\n const { instructions, prompt, question_id, question_number, score } = question\n\n return {\n key: question_id,\n id: question_id,\n score: {score ? `${score}%` : 'N/A'} ,\n scoreNumber: score,\n questionNumber: question_number,\n instructions,\n prompt\n }\n })\n\n return (\n \n
\n )\n}\n\nexport default QuestionReport\n","export const formatString = (str: string) => {\n return stringifiedString(str).replace(/'/g, \"'\").replace(/ /g, '').replace(/(<([^>]+)>)/ig, '').replace(/"/g, '\"')\n}\n\nexport const formatStringAndAddSpacesAfterPeriods = (str: string) => {\n // some concept results don't have a concept result prompt so we early return to prevent the page from crashing\n if (!str) { return }\n return formatString(str).replace(/\\.(?=[^ ])/g, '. ')\n}\n\nexport const stringifiedString = (str: string) => {\n // handles question types in Quill Lessons where we save responses as a key-value store\n if (typeof str === 'object') {\n return Object.values(str).join(\"\\n\")\n }\n return str\n}\n","import * as React from 'react';\nimport _ from 'underscore';\n\nimport { formatStringAndAddSpacesAfterPeriods, } from './formatString';\n\nimport NumberSuffix from '../../modules/numberSuffixBuilder.js';\nimport ScoreColor from '../../modules/score_color.js';\nimport { findFeedbackForReport, formatAnswerStringForReport, } from '../../../../Shared/index'\n\nconst reviseIcon = \n {checkmarkIcon}\n {name} \n
\n )\n }\n\n return (\n \n {reviseIcon}\n {name} \n
\n )\n}\n\nconst StudentReportBox = ({ questionData, boxNumber, showScore, showDiff, }) => {\n function groupByAttempt() {\n return _.groupBy(questionData.concepts,\n (conc)=>conc.attempt\n );\n }\n\n function feedbackOrDirections(directionsOrFeedback, classNameAndText, key) {\n if (directionsOrFeedback) {\n return (\n \n {classNameAndText} \n {formatStringAndAddSpacesAfterPeriods(directionsOrFeedback)} \n \n )\n }\n }\n\n function feedbackRow(attemptNum, conceptsByAttempt) {\n let feedback = findFeedbackForReport(attemptNum, conceptsByAttempt)\n\n // sometimes feedback is coming through as a react variable, I've been unable to find the source of it\n if (feedback && typeof feedback === 'string') {\n feedback = feedbackOrDirections(feedback, 'Feedback', `${String(feedback)}-${attemptNum}`)\n }\n\n return feedback\n }\n\n function conceptsByAttempt() {\n const conceptsByAttempt = groupByAttempt();\n let attemptNum = 1;\n let results = [];\n while (conceptsByAttempt[attemptNum]) {\n let currAttempt = conceptsByAttempt[attemptNum]\n\n const feedback = feedbackRow(attemptNum, conceptsByAttempt)\n\n let score = 0;\n\n const conceptElements = currAttempt.map((concept, i)=>{\n concept.correct ? score += 1 : null;\n const conceptResult =
, conceptResult];\n }\n\n return conceptResult\n });\n\n const concepts = {conceptElements} \n \n )\n }\n\n function scoreRow(answer, attemptNum, previousAnswer) {\n const answerString = formatAnswerStringForReport(answer, previousAnswer, attemptNum, showDiff)\n return (\n \n {`${NumberSuffix(attemptNum)} submission`} \n {answerString} \n )\n }\n\n function questionScore() {\n // occassionally there is no questionScore\n // don't just do ...questionData && ...questionData.questionScore because\n // if it questionScore is zero it will evaluate to false\n if (typeof questionData.questionScore !== undefined) {\n if (!showScore) return;\n let score\n if (questionData.questionScore) {\n score = questionData.questionScore * 100\n } else if (questionData.score) {\n score = questionData.score\n } else {\n score = 0\n }\n return (\n \n Score \n {score}% \n \n );\n }\n }\n\n function keyTargetSkill() {\n const { key_target_skill_concept, } = questionData\n return (\n \n Target Skill \n \n );\n }\n\n return (\n \n
\n
\n
{boxNumber}
\n
\n \n {feedbackOrDirections(questionData.directions, 'Directions')}\n \n Prompt \n {formatStringAndAddSpacesAfterPeriods(questionData.prompt)} \n \n {questionScore()}\n {keyTargetSkill()}\n {emptyRow('')}\n {conceptsByAttempt()}\n \n
\n
\n
\n
Learn more about {activityClassificationName} scoring. \n}\n\nconst StudentReport = ({ params, studentDropdownCallback, activitySessionDropdownCallback, passedStudents, passedActivitySessions }) => {\n const [loading, setLoading] = React.useState(!(passedStudents && passedActivitySessions))\n const [students, setStudents] = React.useState(passedStudents || null)\n const [activitySessions, setActivitySessions] = React.useState(passedActivitySessions || null)\n\n const isInitialMount = React.useRef(true);\n\n React.useEffect(() => {\n if (passedStudents && passedActivitySessions) { return }\n\n setStudents(null)\n setActivitySessions(null)\n\n if (isInitialMount.current) {\n isInitialMount.current = false\n getStudentData()\n getActivitySessions()\n } else {\n setLoading(true)\n getStudentData()\n getActivitySessions()\n }\n }, [params])\n\n React.useEffect(() => {\n if (!students || !activitySessions) { return }\n\n setLoading(false)\n }, [students, activitySessions])\n\n function selectedActivitySession(students: Student[]) {\n const { studentId, activitySessionId, } = params;\n\n const student = studentId ? students.find((student: Student) => student.id === parseInt(studentId)) : students[0];\n\n if (!activitySessionId) {\n return student\n }\n\n const activitySession = activitySessions.find((session: Student) => session.activity_session_id === parseInt(activitySessionId))\n return activitySession || student\n }\n\n function getStudentData() {\n requestGet(`/teachers/progress_reports/students_by_classroom/u/${params.unitId}/a/${params.activityId}/c/${params.classroomId}`, (data: { students: Student[] }) => {\n const { students } = data;\n setStudents(students)\n });\n }\n\n function getActivitySessions() {\n requestGet(`/teachers/progress_reports/finished_activity_sessions_for_student/u/${params.unitId}/a/${params.activityId}/c/${params.classroomId}/s/${params.studentId}`, (data: { activity_sessions: Student[] }) => {\n const { activity_sessions } = data;\n setActivitySessions(activity_sessions)\n });\n }\n\n function studentBoxes(studentData: Student) {\n const concept_results = _.sortBy(studentData.concept_results, 'question_number')\n return concept_results.map((question: QuestionData, index: number) => {\n return Helpful Tips for Teachers (Expand to show more information) }\n sections={[\n scoringExplanation(student),\n {\n headerText: \"The bolded text helps you see the edits. It is not what the student sees.\",\n body: (\n \n In each student response, we have bolded all of the text that was added or edited from the previous response so that you can quickly see what changed in the student’s writing throughout their revision cycle.
\n When your student completes an activity, Quill uses bolding to provide hints for them about what to change. In the feedback you see below, phrases like “look at the bolded word” refer to the bolding the student sees as a hint, not the bolded text displayed in this report.
\n \n ),\n },\n ]}\n />\n )\n }\n\n function scoringExplanation(student) {\n let headerText = `The score for ${student.activity_classification_name} activities is based on reaching a correct response by the final attempt.`\n let body = (\n \n Quill employs a mastery-based grading system to grade activities.
\n Students earn:
\n \n Proficient (‘green’) for scoring between 83%-100%. \n Nearly Proficient (‘yellow’) for scoring between 32%-82%. \n Not Proficient (‘red’) for scoring between 0%-31%. \n Completed (’blue’) for activities that are not graded, such as a Diagnostic or Quill Lesson . \n \n We encourage students to replay their activities and Go for Green to get additional practice on skills and earn a higher grade.
\n \n )\n\n if (student.activity_classification === EVIDENCE_KEY) {\n headerText = \"The score for Quill Reading for Evidence activities is based on reaching a strong response on each prompt by the final attempt\"\n body = (\n \n Quill employs a mastery-based grading system to grade activities.
\n Students earn:
\n \n Proficient (‘green’) for scoring between 83%-100%. \n Nearly Proficient (‘yellow’) for scoring between 32%-82%. \n Not Proficient (‘red’) for scoring between 0%-31%. \n Completed (’blue’) for activities that are not graded, such as a Diagnostic or Quill Lesson . \n \n For each of the three prompts, students will have five opportunities to revise their work. Their score for each prompt is based on whether they reach a strong response by the final attempt. For example, if they reach a strong response on their fourth attempt, they’ll receive full credit for that prompt.
\n Students will receive full credit for this activity by writing a strong response for all three prompts. They will receive partial credit for reaching a strong response on any of the three prompts.
\n We encourage students to replay their activities and Go for Green to get additional practice on skills and earn a higher grade.
\n \n )\n }\n\n if (student.activity_classification === LESSONS_KEY) {\n headerText = \"Quill Lessons does not provide a score for students as there is no automated grading in the tool. Instead, the purpose of the tool is for teachers and students to collaboratively discuss answers, with feedback coming from peers rather than the automated grading and feedback that Quill provides in its independent practice tools.\"\n body = (\n During Quill Lessons , our tool meant for instruction with whole classes or small groups, teachers lead students through slides, and students engage with the slides by responding to prompts and discussing the relevant writing skills . During Quill Lessons, students will not receive automatic targeted feedback on their responses ; however, teachers can choose to anonymously display student responses during the Quill Lesson to prompt discussion, give feedback, and encourage students to revise their answers. On the last slide of the lesson, you can assign a follow-up Quill Grammar or Quill Connect activity. Please note that although Quill Lessons are not graded, the follow-up Quill Grammar or Quill Connect activity are graded.
\n )\n }\n\n return {\n headerText,\n body\n }\n }\n\n if (loading) { return \n
\n
\n
\n
\n
Time spent: \n
{displayTimeSpent}
\n
\n
\n
Target skills demonstrated correctly in prompts: \n
{displaySkills}{displayScore}
\n
\n
\n {renderHelpfulTips(activitySession)}\n {studentBoxes(activitySession)}\n
\n
{this.props.children}
\n )\n } else if (this.state.loading) {\n return \n \n \n
\n );\n }\n }\n}\n\nexport default DiagnosticReports\n","import $ from 'jquery';\nimport React from 'react';\n\nexport default class extends React.Component {\n UNSAFE_componentWillMount = () => {\n $('.diagnostic-tab').addClass('active');\n $('.activity-analysis-tab').removeClass('active');\n };\n\n switchToDiagnosticAssign = () => {\n window.location.href = '/assign/diagnostic'\n };\n\n render() {\n return (\n \n
\n
\n
Welcome! This is where you'll be able to see reports detailing your students' diagnostic results, but they haven't completed a diagnostic yet.
\n
Let's add your first diagnostic!
\n
\n
\n Assign Diagnostic \n
\n
\n
\n \n \n \n );\n};\n\nexport default DiagnosticReports;\n","import React from 'react';\nimport DiagnosticReports from '../containers/DiagnosticReports.jsx';\n\nexport default (props) => (\n \n
Reset Password \n
We'll email you a link to reset your password. You can also ask your teacher to reset it for you.
\n
\n \n
\n\n
\n
Need your teacher to reset your password? Share these instructions: \n
\n Sign in to your teacher account \n Click on the "My Classes" tab \n Click on the class whose students’ passwords you would like to reset \n Find the student whose password you would like to reset and click on the ellipsis button in the "Actions" column \n Click on "Reset password" \n \n
\n\n
\n )\n }\n\n let className = 'student '\n let description = ''\n\n const toBeAssigned = assignment.student_ids.includes(student.id)\n const previouslyAssigned = classroomUnit?.assigned_student_ids?.includes(student.id)\n const originallyAssigned = originalClassroomUnit?.assigned_student_ids?.includes(student.id)\n\n if (previouslyAssigned && toBeAssigned) {\n className += 'already-assigned'\n description = Pack assigned \n } else if (previouslyAssigned && !toBeAssigned) {\n className += 'will-be-removed'\n description = Pack will be removed \n } else if (!previouslyAssigned && toBeAssigned) {\n className += 'will-be-assigned'\n description = Pack will be assigned \n } else if (!previouslyAssigned && originallyAssigned) {\n description = (\n \n
Pack removed \n
Restore Assigned Pack \n
\n
\n {description}\n
\n
\n
\n \n
{removedStudentCount} Student{removedStudentCount === 1 ? '' : 's'} Will Have This Activity Pack Removed \n
\n
The students will no longer see this activity pack -- they will no longer see their previously completed assignments and their not yet completed assignments. Cancel button and re-check these students’ names.Update Students button.
\n
\n
\n
\n
\n
\n Cancel \n Update students \n
\n
\n
\n \n
\n
{classroom.name} \n {numberOfStudentsToAssign}/{classroom.students.length} student{numberOfStudentsToAssign === 1 ? '' : 's'} will be assigned \n \n
\n Unselect all \n Select all \n
\n
\n {students}\n
\n \n )\n })\n\n return (\n \n \n {showUnassignWarningModal && (\n
\n )}\n
\n
\n \n
Update students assigned to activity pack \n {unitName} \n \n \n
Cancel \n
{assignedStudentsHaveChanged() ? 'Update students assigned to pack' : 'Edit students before saving'} \n
\n {classrooms}\n
\n
\n )\n}\n\nexport default UpdateAssignedStudents\n","import React from 'react'\n\nimport { requestPut, } from '../../../modules/request/index'\nimport UnitStage1 from '../components/assignment_flow/create_unit/select_activities_container.jsx'\n\nexport default class EditUnitActivitiesContainer extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = { selectedActivities: [] }\n }\n\n toggleActivitySelection = (activity) => {\n const activities = this.state.selectedActivities\n const newActivities = activities.find(act => act.id === activity.id) ? activities.filter(act => act.id !== activity.id) : activities.concat([activity])\n this.setState({ selectedActivities: newActivities, })\n };\n\n getActivityIds = () => {\n const ids = [];\n this.state.selectedActivities.forEach((act)=>ids.push({id: act.id, due_date: null}));\n return ids\n };\n\n updateActivities = () => {\n const that = this;\n requestPut(\n `${window.postbuildEnv.DEFAULT_URL}/teachers/units/${that.props.match.params.unitId}/update_activities`,\n {\n data: { activities_data: that.getActivityIds(), }\n },\n (body) => {\n window.location = '/teachers/classrooms/lesson_planner'\n },\n (body) => {\n this.setState({ errors: body.errors, loading: false, })\n }\n )\n };\n\n render() {\n return (\n \n
\n )\n }\n}\n","import React from 'react';\n\nimport { requestGet, } from '../../../../modules/request/index';\nimport LoadingSpinner from '../shared/loading_indicator';\n\nexport default class ChooseClassroomLesson extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n activityName: '',\n classroomUnits: []\n }\n\n this.getClassroomLessonInfo()\n }\n\n getClassroomLessonInfo() {\n requestGet(`${window.postbuildEnv.DEFAULT_URL}/teachers/units/lesson_info_for_activity/${this.props.match.params.activityId}`, (body) => {\n this.setState({\n classroomUnits: body.classroom_units,\n activityName: body.activity_name[0].name,\n loading: false\n })\n })\n }\n\n setSelectedClassroomUnitId(id) {\n this.setState({ classroomUnitId: id })\n }\n\n goBack = () => {\n this.props.history.goBack()\n };\n\n launchLessonLink() {\n const classroomUnitId = this.state.classroomUnitId\n const lessonId = this.props.match.params.activityId\n return `${window.postbuildEnv.DEFAULT_URL}/teachers/classroom_units/${classroomUnitId}/launch_lesson/${lessonId}`\n }\n\n renderClasses() {\n const classrooms = this.state.classroomUnits.map((ca, i) =>\n this.renderClassroomRow(ca, i)\n )\n return {classrooms}
\n }\n\n renderClassroomRow(cu, i) {\n const numberOfStudents = `${cu.number_of_assigned_students} student${cu.number_of_assigned_students === 1 ? '' : 's'}`\n const selectedClassName = cu.id === this.state.classroomUnitId ? 'selected' : null\n let completionText, completionClass, imgName, clickFunction\n if (cu.completed) {\n completionText = \n
\n
\n
{cu.classroom_name} ({numberOfStudents})\n
\n {completionText}\n
\n
\n
You've selected this lesson to launch:
\n
\n
\n
{this.state.activityName}
\n
Undo Selection \n
\n
\n\n
\n
Now, choose a class to launch this lesson: \n {this.renderClasses()}\n \n
\n {/* we will use the text below when we have a lessons page to send teachers to */}\n {/*
*To re-do a completed lesson with your students, you can re-assign the lesson to the class and launch it. To re-assign a lesson, you can click here.
*/}\n
*To re-do a completed lesson with your students, you can re-assign the lesson to the class and launch it.
\n
{text} \n
\n
(null)\n const [showModal, setShowModal] = React.useState(false)\n\n function assignedToText () {\n // ensure classrooms is always an array as sometimes it is passed a set\n // and we need to do a number of things with it that are better with an array\n const classroomsArray = Array.isArray(classrooms) ? classrooms : Array.from(classrooms);\n const studentCountData = num_students_assigned || studentCount;\n return (\n \n
Assigned to
\n
{`${studentCountData} ${Pluralize('Student', studentCountData)}`} \n
in
\n
{`${classroomsArray.length} ${Pluralize('class', classroomsArray.length)} (${classroomsArray.join(', ')})`} \n
\n \n );\n };\n\n function handleDataTableChipClick(e, id) {\n setLessonActivityId(id)\n handleToggleModal()\n }\n\n function handleToggleModal() {\n setShowModal(!showModal)\n }\n\n function getClassroomActivities() {\n if (Object.keys(classroomActivities)) {\n return classroomActivities\n }\n if (Object.keys(classroom_activities)) {\n return classroom_activities\n }\n }\n\n function getActivityId(lessonActivity) {\n const { activityId, activityUid, activity } = lessonActivity\n return activityId || activityUid || activity?.uid\n }\n\n function getClassroomUnitId(lessonActivity) {\n const { cuId, classroom_unit_id } = lessonActivity\n return cuId || classroom_unit_id\n }\n\n function renderModal() {\n const activities = getClassroomActivities()\n const lessonActivityData = activities.get(lessonActivityId)\n\n if (!showModal || !(Object.keys(lessonActivityData).length)) { return }\n\n return (\n \n
handleDataTableChipClick(e, id)} />\n {completed && Lesson Complete
Mark As Complete }\n View Report ;\n }\n if (studentCount === 0) {\n return handleLaunchLessonWithNoStudents(e, activityId, classroomUnitId)}>{started ? 'Resume Lesson' : 'Launch Lesson'} ;\n }\n if (started) {\n return Resume Lesson ;\n }\n return Launch Lesson ;\n }\n\n function renderCustomizeCell(id) {\n return(\n \n \n )\n }\n\n function renderDownloadCell(id) {\n return(\n \n \n )\n }\n\n function renderClassroomActivities() {\n const lessonsIcon = \n {renderModal()}\n \n
\n {unitName || name} \n \n
\n {lockedInfo()}\n {assignedToText()}\n
\n
\n {renderClassroomActivities()}\n
\n \n );\n}\n\nexport default Unit\n","import * as React from 'react';\nimport Unit from './unit';\n\nconst Units = ({ data, hideClassroomActivity, hideUnit, report, lesson, updateDueDate}) => {\n const units = data.map(data =>\n ({units} \n}\n\nexport default Units\n","import React from 'react';\n\nimport _ from 'lodash';\nimport { requestGet, } from '../../../../modules/request';\nimport ItemDropdown from '../general_components/dropdown_selectors/item_dropdown';\nimport { PROGRESS_REPORTS_SELECTED_CLASSROOM_ID, } from '../progress_reports/progress_report_constants';\nimport LoadingIndicator from '../shared/loading_indicator';\nimport Units from './manage_units/units';\n\nexport default class ClassroomLessons extends React.Component {\n constructor(props) {\n super(props);\n\n const { classroomId, } = props.match.params\n\n this.state = {\n allLessons: [],\n lessons: [],\n classrooms: this.getClassrooms(classroomId),\n loaded: false,\n selectedClassroomId: classroomId,\n lessonUidsWithEditions: []\n };\n }\n\n getAllLessons = () => {\n requestGet(`${window.postbuildEnv.DEFAULT_URL}/teachers/lesson_units`, (body) => {\n this.setState({ allLessons: body, }, () => this.getLessonsForCurrentClass());\n });\n }\n\n getClassrooms = (classroomId) => {\n requestGet(`${window.postbuildEnv.DEFAULT_URL}/teachers/classrooms_i_teach_with_lessons`, (body) => {\n const classrooms = body.classrooms;\n if (classrooms.length > 0) {\n const localStorageSelectedClassroomId = Number(window.localStorage.getItem(PROGRESS_REPORTS_SELECTED_CLASSROOM_ID))\n const classroomFromLocalStorageClassroomId = classrooms.find(c => Number(c.id) === localStorageSelectedClassroomId)\n const classroomIdToUse = classroomFromLocalStorageClassroomId && !classroomId ? localStorageSelectedClassroomId : classroomId\n this.setState({ classrooms, selectedClassroomId: classroomIdToUse || classrooms[0].id, }, () => this.getAllLessons());\n } else {\n this.setState({ empty: true, loaded: true, });\n }\n });\n }\n\n getLessonsForCurrentClass = () => {\n const { allLessons, selectedClassroomId, } = this.state\n const lessonsInCurrentClassroom = _.reject(allLessons, lesson => lesson.classroom_id !== selectedClassroomId);\n this.setState({ lessons: lessonsInCurrentClassroom}, () => this.getLessonsWithEditions());\n }\n\n getLessonsWithEditions = () => {\n // TODO: Figure out if we should be pulling this data from RethinkDB instead\n // Use 'git blame' on this file to see the commit where this TODO was added to see what the code originally looked like\n this.setState({lessonUidsWithEditions: [], loaded: true})\n }\n\n generateNewCaUnit(u) {\n const { lessonUidsWithEditions, } = this.state\n const {\n number_of_assigned_students,\n class_size,\n class_name,\n unit_id,\n unit_created_at,\n unit_name,\n activity_id,\n activity_name,\n activity_uid,\n unit_activity_created_at,\n classroom_unit_id,\n unit_activity_id,\n activity_classification_id,\n classroom_id,\n owned_by_current_user,\n due_date,\n supporting_info,\n completed,\n started_count,\n owner_name,\n } = u\n const studentCount = Number(number_of_assigned_students || class_size)\n const hasEditions = lessonUidsWithEditions.indexOf(activity_uid) !== -1\n const caObj = {\n studentCount: studentCount,\n classrooms: new Set([class_name]),\n classroomActivities: new Map(),\n unitId: unit_id,\n unitCreated: unit_created_at,\n unitName: unit_name,\n };\n caObj.classroomActivities.set(activity_id, {\n name: activity_name,\n activityId: activity_id,\n activityUid: activity_uid,\n created_at: unit_activity_created_at,\n cuId: classroom_unit_id,\n uaId: unit_activity_id,\n activityClassificationId: activity_classification_id,\n classroomId: classroom_id,\n dueDate: due_date,\n supportingInfo: supporting_info,\n completed,\n studentCount,\n started: started_count > 0,\n hasEditions: hasEditions,\n ownedByCurrentUser: owned_by_current_user,\n ownerName: owner_name\n });\n return caObj;\n }\n\n orderUnits(units) {\n const unitsArr = [];\n Object.keys(units).forEach(unitId => unitsArr.push(units[unitId]));\n return unitsArr;\n }\n\n parseUnits(data) {\n const { lessonUidsWithEditions, } = this.state\n const parsedUnits = {};\n data.forEach((u) => {\n const {\n number_of_assigned_students,\n class_size,\n class_name,\n unit_id,\n unit_created_at,\n unit_name,\n activity_id,\n activity_name,\n activity_uid,\n unit_activity_created_at,\n classroom_unit_id,\n unit_activity_id,\n activity_classification_id,\n classroom_id,\n owned_by_current_user,\n due_date,\n supporting_info,\n completed,\n started_count,\n owner_name,\n } = u\n if (!parsedUnits[unit_id]) {\n // if this unit doesn't exist yet, go create it with the info from the first ca\n parsedUnits[unit_id] = this.generateNewCaUnit(u);\n } else {\n const caUnit = parsedUnits[unit_id];\n const hasEditions = lessonUidsWithEditions.indexOf(activity_uid) !== -1\n const studentCount = Number(number_of_assigned_students ? number_of_assigned_students : class_size)\n if (!caUnit.classrooms.has(class_name)) {\n // add the info and student count from the classroom if it hasn't already been done\n caUnit.classrooms.add(class_name);\n caUnit.studentCount += studentCount;\n }\n // add the activity info if it doesn't exist\n caUnit.classroomActivities.set(activity_id,\n caUnit.classroomActivities[activity_id] || {\n name: activity_name,\n activityId: activity_id,\n activityUid: activity_uid,\n created_at: unit_activity_created_at,\n cuId: classroom_unit_id,\n uaId: unit_activity_id,\n activityClassificationId: activity_classification_id,\n classroomId: classroom_id,\n dueDate: due_date,\n supportingInfo: supporting_info,\n completed,\n studentCount,\n started: started_count > 0,\n hasEditions: hasEditions,\n ownedByCurrentUser: owned_by_current_user,\n ownerName: owner_name\n });\n }\n });\n return this.orderUnits(parsedUnits);\n }\n\n switchClassrooms = (classroom) => {\n const { history, } = this.props\n window.localStorage.setItem(PROGRESS_REPORTS_SELECTED_CLASSROOM_ID, classroom.id)\n history.push(`/teachers/classrooms/activity_planner/lessons/${classroom.id}`);\n this.setState({ selectedClassroomId: classroom.id, }, () => this.getLessonsForCurrentClass());\n }\n\n renderEmptyState() {\n const assignLessonsLink = Assign Lessons \n const learnMoreLink = Learn More \n return (\n \n
\n
\n
\n
Launch Lessons \n \n
\n
\n
You have no lessons assigned \n
In order to launch a lesson, you need to assign a lesson to one of your classes.
\n
With Quill Lessons, teachers can use Quill to lead whole-class lessons and to see and display student responses in real-time.
\n
\n {assignLessonsLink}\n {learnMoreLink}\n
\n
\n
\n
\n We would love to hear about your experience with Quill Lessons. Please share your feedback by filling out this
short feedback form .\n
Before you launch a lessons activity with your students, we recommend you check out this tutorial on how to lead a lesson. We have also put together a comprehensive guide that will explain how to set up lessons in your classroom.
\n /* eslint-enable react/jsx-no-target-blank */\n\n return (\n \n
Launch Lessons \n {paragraphWithLinks}\n
Note: If you want to re-do a lesson with your class, re-assign the lesson then launch it.
\n
\n
\n
\n {this.renderHeader()}\n classy.id === selectedClassroomId)}\n />\n
\n
\n {this.renderFeedbackNote()}\n
\n
\n Share Activity Pack \n \n )\n\n const renameButton = (\n \n Rename Activity Pack \n \n )\n\n const closeButton = (\n \n Close Activity Pack \n \n )\n\n const closeElement = (\n \n Reopen Activity Pack \n \n )\n\n const reopenElement = (\n \n Delete Activity Pack \n \n )\n\n const deleteElement = (\n \n {isOpen && shareButton}\n {renameButton}\n {isOpen ? closeElement : reopenElement}\n {deleteElement}\n
\n )\n}\n\nexport default ActivityPackUpdateButtons\n","import * as React from 'react'\n\nconst CopyModal = ({ attributeName, closeFunction, copyFunction, }) => {\n return (\n \n
\n
\n
\n
Copy {attributeName} to all activities? \n
Copying will overwrite the settings you previously entered. Please confirm that you want to continue.
\n
\n
\n Cancel \n Yes, copy \n
\n
\n
\n
\n
\n \n
Remove this activity? \n
Are you sure you want to remove {activityName} from this activity pack?
\n
\n Cancel \n Yes, remove \n
\n Publish date}\n />\n ),\n attribute: 'publishDatePicker',\n width: '161px',\n headerClassName: 'publish-date-header-container',\n rowSectionClassName: 'datetime-picker'\n },\n {\n name: (\n Due date (optional) }\n />\n ),\n attribute: 'dueDatePicker',\n width: '161px',\n headerClassName: isOwner ? 'due-date-header-container' : 'due-date-header-container no-right-margin',\n rowSectionClassName: isOwner ? 'datetime-picker' : 'datetime-picker no-right-margin'\n },\n {\n name: 'Share',\n attribute: 'shareActivity',\n width: '80px',\n headerClassName: 'center-content',\n rowSectionClassName: 'center-content share',\n noTooltip: true\n }\n])\n\nconst ActivityTable = ({ data, onSuccess, isOwner, handleActivityClicked, handleToggleModal }) => {\n const classroomActivityArray = Array.from(data.classroomActivities).map(ca => ca[1])\n\n const [activityOrder, setActivityOrder] = React.useState(classroomActivityArray.map(ca => ca.activityId) || [])\n const [showCopyPublishDateModal, setShowCopyPublishDateModal] = React.useState(false)\n const [showCopyDueDateModal, setShowCopyDueDateModal] = React.useState(false)\n const [showRemoveActivityModal, setShowRemoveActivityModal] = React.useState(false)\n const [unitActivityIdToRemove, setUnitActivityIdToRemove] = React.useState(null)\n const [erroredUnitActivityIds, setErroredUnitActivityIds] = React.useState([])\n const [showSnackbar, setShowSnackbar] = React.useState(false)\n const [snackbarText, setSnackbarText] = React.useState('')\n\n useSnackbarMonitor(showSnackbar, setShowSnackbar, defaultSnackbarTimeout)\n\n React.useEffect(() => {\n setErroredUnitActivityIds([])\n }, [data])\n\n function removeActivity(unitActivityId) {\n requestPut(`${window.postbuildEnv.DEFAULT_URL}/teachers/unit_activities/${unitActivityId}/hide`, {}, () => onSuccess('Activity removed'))\n setShowRemoveActivityModal(false)\n }\n\n function closeDatePicker(date, unitActivityId, dateAttributeKey) {\n const activity = classroomActivityArray.find(act => act.uaId === unitActivityId)\n const activityHasDueDateBeforePublishDate = date && (dateAttributeKey === PUBLISH_DATE_ATTRIBUTE_KEY ? date >= moment.utc(activity.dueDate) : date <= moment.utc(activity.publishDate))\n if (activityHasDueDateBeforePublishDate) {\n setErroredUnitActivityIds([unitActivityId])\n setSnackbarText(INVALID_DATES_SNACKBAR_COPY)\n setShowSnackbar(true)\n } else {\n const formattedDate = date || null\n requestPut(`/teachers/unit_activities/${unitActivityId}`, { unit_activity: { [dateAttributeKey]: formattedDate, } }, () => onSuccess());\n }\n }\n\n function closeCopyPublishDateModal() { setShowCopyPublishDateModal(false) }\n\n function closeCopyDueDateModal() { setShowCopyDueDateModal(false) }\n\n function closeRemoveActivityModal() { setShowRemoveActivityModal(false) }\n\n function openCopyPublishDateModal() { setShowCopyPublishDateModal(true) }\n\n function openCopyDueDateModal() { setShowCopyDueDateModal(true) }\n\n function openRemoveActivityModal(unitActivityId) {\n setUnitActivityIdToRemove(unitActivityId)\n setShowRemoveActivityModal(true)\n }\n\n function copyPublishDateToAll() {\n const publishDate = classroomActivityArray[0].publishDate\n const activitiesWithEarlierDueDates = classroomActivityArray.filter(act => publishDate >= act.dueDate)\n if (publishDate && activitiesWithEarlierDueDates.length) {\n setErroredUnitActivityIds(activitiesWithEarlierDueDates.map(a => a.uaId))\n setSnackbarText(INVALID_DATES_SNACKBAR_COPY)\n setShowSnackbar(true)\n } else {\n copyDateToAll(publishDate, PUBLISH_DATE_ATTRIBUTE_KEY)\n }\n setShowCopyPublishDateModal(false)\n }\n\n function copyDueDateToAll() {\n const dueDate = classroomActivityArray[0].dueDate\n const activitiesWithEarlierDueDates = classroomActivityArray.filter(act => dueDate <= act.publishDate)\n if (dueDate && activitiesWithEarlierDueDates.length) {\n setErroredUnitActivityIds(activitiesWithEarlierDueDates.map(a => a.uaId))\n setSnackbarText(INVALID_DATES_SNACKBAR_COPY)\n setShowSnackbar(true)\n } else {\n copyDateToAll(dueDate, DUE_DATE_ATTRIBUTE_KEY)\n }\n setShowCopyDueDateModal(false)\n }\n\n function copyDateToAll(date, dateAttributeKey) {\n const unitActivityIds = classroomActivityArray.map(ca => ca.uaId)\n requestPut('/teachers/unit_activities/update_multiple_dates', { unit_activity_ids: unitActivityIds, date: date, date_attribute: dateAttributeKey }, () => onSuccess());\n }\n\n function reorderCallback(sortInfo) {\n const newUnitActivityOrder = sortInfo.map(item => item.key).filter(Boolean);\n const newActivityOrder = newUnitActivityOrder.map(unitActivityId => classroomActivityArray.find(ca => String(ca.uaId) === String(unitActivityId)).activityId)\n setActivityOrder(newActivityOrder)\n api.changeActivityPackOrder(data.unitId, newActivityOrder, () => onSuccess(null), null)\n }\n\n function handleShareActivityClick(activity) {\n handleActivityClicked(activity)\n handleToggleModal()\n }\n\n function getActivityNameToRemove() {\n return classroomActivityArray.find(act => act.uaId === unitActivityIdToRemove).name\n }\n\n const activityRows = activityOrder.flatMap((activityId, i) => {\n const activity = classroomActivityArray.find(act => act.activityId === activityId)\n if (!activity){ return }\n const previewLink = {activity.name} \n activity.activity = previewLink\n activity.tool = getExtraSmallIconForActivityClassification(activity.activityClassificationId)\n\n const dueDateInMoment = activity.dueDate ? moment.utc(activity.dueDate) : null\n const publishDateInMoment = activity.publishDate ? moment.utc(activity.publishDate) : null\n\n let activityDueDatePicker = dueDateInMoment ? formatDateTimeForDisplay(dueDateInMoment) : DUE_DATE_DEFAULT_TEXT\n let activityPublishDatePicker = publishDateInMoment ? formatDateTimeForDisplay(publishDateInMoment) : PUBLISH_DATE_DEFAULT_TEXT\n\n if (activity.staggered) {\n activityDueDatePicker = (\n closeDatePicker(date, activity.uaId, DUE_DATE_ATTRIBUTE_KEY)}\n defaultText={DUE_DATE_DEFAULT_TEXT}\n initialValue={dueDateInMoment}\n key={dueDateInMoment ? formatDateTimeForDisplay(dueDateInMoment) : activity.uaId}\n />\n )\n\n activityPublishDatePicker = (\n closeDatePicker(date, activity.uaId, PUBLISH_DATE_ATTRIBUTE_KEY)}\n defaultText={PUBLISH_DATE_DEFAULT_TEXT}\n icon={activity.scheduled ? scheduledIconImage : publishedIconImage}\n initialValue={publishDateInMoment}\n key={publishDateInMoment ? formatDateTimeForDisplay(publishDateInMoment) : activity.uaId}\n />\n )\n }\n\n activity.dueDatePicker = activityDueDatePicker\n activity.publishDatePicker = activityPublishDatePicker\n\n activity.shareActivity = (\n handleShareActivityClick(activity)} type=\"button\" value=\"row-button\">\n \n )\n activity.removable = true\n activity.id = activity.uaId\n activity.className = erroredUnitActivityIds.includes(activity.uaId) ? 'checked' : ''\n\n // add a separate row for the \"Copy to All\" buttons below the first activity row\n if (i === 0 && activityOrder.length > 1 && !activity.staggered && isOwner) {\n return [\n activity,\n {\n id: '',\n className: '',\n tool: '',\n activity: '',\n concept: '',\n dueDatePicker: (\n removeActivity(unitActivityIdToRemove)}\n />\n )}\n \n )\n}\n\nexport default ActivityTable\n","import * as React from 'react';\n\nimport { requestPut } from '../../../../../modules/request/index';\nimport useModalAccessibility from '../../../../Shared/hooks/useModalAccessibility';\n\nconst ArchiveModal = ({ onSuccess, closeModal, unitId, unitName, }) => {\n const { modalRef } = useModalAccessibility(close);\n function handleArchiveUnitButtonClick() {\n requestPut(`/teachers/units/${unitId}/hide`, {}, () => onSuccess('Activity pack deleted'))\n }\n\n return (\n \n
\n
\n \n
Permanently delete this activity pack? \n \n \n
Deleting an activity pack is permanent and cannot be undone. You will no longer have access to it in your student reports.
\n
If you no longer want students to see an activity pack and wish to retain access to it in your student reports, we suggest using the “Close activity pack” option instead.
\n
\n Cancel \n Delete \n
\n \n
\n
\n \n
Close this activity pack? \n \n \n
This activity pack will move to the "My Closed Activity Packs" tab. You will still have access to it in your student reports.
\n
Activities that students did not complete will be removed from their "To-do activities" list. Activities that students completed will remain on their "Completed" list.
\n
If you change your mind and wish to reopen this activity pack, you can do so from the "My Closed Activity Packs" tab.
\n
\n Cancel \n Close pack \n
\n {classroom.name} \n\n return (\n \n
\n
\n {classroomNameElement}\n {classroom.assignedStudentCount} of {classroom.totalStudentCount} student{classroom.totalStudentCount === 1 ? '' : 's'} \n
\n
\n
\n
\n \n
Rename your activity pack \n \n \n Cancel \n Save \n
\n \n
\n
\n \n
Reopen this activity pack? \n \n \n
This activity pack will move to the “My Open Activity Packs” tab.
\n
Activities that students have not completed will be added to their “To-do activities” list.
\n
\n Cancel \n Reopen pack \n
\n \n {showModal === RENAME && \n
\n {activityPackUpdateButtons}\n
\n
{data.unitName} \n {!isOwner && (
\n
\n
\n
Created by {firstActivity.ownerName}
\n
Since you did not create this pack, you are unable to edit it. \n
\n
)}\n {isOwner &&
Add/remove students assigned }\n
\n
\n
\n
\n
Assigned Class and Students \n \n {showIndividualClassroomInfo ? 'Hide details' : 'Show details'}\n \n \n
\n {totalClassroomInfoCopy} \n
\n {showIndividualClassroomInfo &&
{individualClassroomInfo}
}\n
Add activities }\n \n )\n}\n\nexport default ActivityPack\n","import React from 'react';\n\nimport ActivityPack from './activity_pack';\n\nimport { requestGet, } from '../../../../../modules/request';\nimport { DropdownInput, Snackbar, defaultSnackbarTimeout, EXTRA_SMALL_ICON_BASE_SRC, } from '../../../../Shared/index';\nimport { MY_ACTIVITIES_FEATURED_BLOG_ID } from '../../../constants/featuredBlogPost';\nimport getParameterByName from '../../modules/get_parameter_by_name';\nimport { PROGRESS_REPORTS_SELECTED_CLASSROOM_ID, } from '../../progress_reports/progress_report_constants';\nimport ArticleSpotlight from '../../shared/articleSpotlight';\nimport LoadingIndicator from '../../shared/loading_indicator';\n\nconst groupSrc = `${EXTRA_SMALL_ICON_BASE_SRC}/group.svg`\n\nconst ALL = 'ALL'\nconst ALL_OPTION = { label: `All Classes
`, value: ALL }\n\nexport default class ManageUnits extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n allUnits: [],\n units: [],\n loaded: false,\n classrooms: [],\n selectedClassroomId: getParameterByName('classroom_id') || ALL,\n activityWithRecommendationsIds: [],\n snackbarCopy: null,\n showSnackbar: false\n };\n }\n\n componentDidMount() {\n this.getClassrooms()\n this.getRecommendationIds();\n window.onpopstate = () => {\n this.setState({ loaded: false, selectedClassroomId: getParameterByName('classroom_id'), });\n this.getUnitsForCurrentClassAndOpenState();\n };\n }\n\n getClassrooms = () => {\n const { selectedClassroomId, } = this.state\n requestGet(\n `${window.postbuildEnv.DEFAULT_URL}/teachers/classrooms/classrooms_i_teach`,\n (body) => {\n const classrooms = body.classrooms;\n const localStorageSelectedClassroomId = window.localStorage.getItem(PROGRESS_REPORTS_SELECTED_CLASSROOM_ID)\n const classroomFromLocalStorageClassroomId = classrooms.find(c => Number(c.id) === Number(localStorageSelectedClassroomId))\n if ((!selectedClassroomId || selectedClassroomId === ALL) && classroomFromLocalStorageClassroomId) {\n this.setState({selectedClassroomId: Number(localStorageSelectedClassroomId)})\n }\n this.handleClassrooms(classrooms);\n }\n )\n };\n\n getRecommendationIds = () => {\n fetch(`${window.postbuildEnv.DEFAULT_URL}/teachers/progress_reports/activity_with_recommendations_ids`, {\n method: 'GET',\n mode: 'cors',\n credentials: 'include',\n }).then((response) => {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response.json();\n }).then((response) => {\n this.setState({ activityWithRecommendationsIds: response.activityWithRecommendationsIds, });\n }).catch((error) => {\n // to do, use Sentry to capture error\n });\n };\n\n handleClassrooms = (classrooms) => {\n if (classrooms.length > 0) {\n this.setState({ classrooms, }, () => this.getUnits());\n } else {\n this.setState({ empty: true, loaded: true, });\n }\n };\n\n hashLinkScroll = () => {\n const hash = window.location.hash;\n if (hash !== '') {\n const id = hash.replace('#', '');\n const element = document.getElementById(id);\n element ? element.scrollIntoView() : null;\n }\n };\n\n getUnits = () => {\n requestGet(`${window.postbuildEnv.DEFAULT_URL}/teachers/units`, (body) => {\n this.setAllUnits(body);\n });\n };\n\n getUnitsForCurrentClassAndOpenState = () => {\n const { selectedClassroomId, classrooms, allUnits, } = this.state\n if (selectedClassroomId && selectedClassroomId !== ALL) {\n // TODO: Refactor this. It is ridiculous that we need to find a classroom and match on name. Instead, the units should just have a list of classroom_ids that we can match on.\n const selectedClassroom = classrooms.find(c => c.id === Number(selectedClassroomId));\n const unitsInCurrentClassroom = allUnits.filter(unit => unit.classrooms.find(c => c.name === selectedClassroom.name));\n this.setState({ units: unitsInCurrentClassroom, loaded: true, });\n } else {\n this.setState(prevState => ({ units: prevState.allUnits, loaded: true, }));\n\n }\n };\n\n generateNewCaUnit = (u) => {\n const classroom = {\n name: u.class_name,\n totalStudentCount: u.class_size,\n assignedStudentCount: u.number_of_assigned_students ?? u.class_size,\n };\n const caObj = {\n classrooms: [classroom],\n classroomActivities: new Map(),\n unitId: u.unit_id,\n unitCreated: u.unit_created_at,\n unitName: u.unit_name,\n open: u.open\n };\n caObj.classroomActivities.set(u.activity_id, {\n name: u.activity_name,\n activityId: u.activity_id,\n created_at: u.unit_activity_created_at,\n cuId: u.classroom_unit_id,\n activityClassificationId: u.activity_classification_id,\n classroomId: u.classroom_id,\n dueDate: u.due_date,\n publishDate: u.publish_date,\n scheduled: u.scheduled,\n staggered: u.staggered,\n ownedByCurrentUser: u.owned_by_current_user,\n ownerName: u.owner_name,\n uaId: u.unit_activity_id,\n });\n return caObj;\n };\n\n parseUnits = (data) => {\n const parsedUnits = {};\n data.forEach((u) => {\n if (!parsedUnits[u.unit_id]) {\n // if this unit doesn't exist yet, go create it with the info from the first ca\n parsedUnits[u.unit_id] = this.generateNewCaUnit(u);\n } else {\n const caUnit = parsedUnits[u.unit_id];\n if (caUnit.classrooms.findIndex(c => c.name === u.class_name) === -1) {\n // add the info and student count from the classroom if it hasn't already been done\n const classroom = {\n name: u.class_name,\n totalStudentCount: u.class_size,\n assignedStudentCount: u.number_of_assigned_students ?? u.class_size,\n };\n caUnit.classrooms.push(classroom);\n }\n // add the activity info if it doesn't exist\n caUnit.classroomActivities.set(u.activity_id,\n caUnit.classroomActivities[u.activity_id] || {\n name: u.activity_name,\n cuId: u.classroom_unit_id,\n activityId: u.activity_id,\n created_at: u.unit_activity_created_at,\n activityClassificationId: u.activity_classification_id,\n classroomId: u.classroom_id,\n createdAt: u.ca_created_at,\n dueDate: u.due_date,\n publishDate: u.publish_date,\n staggered: u.staggered,\n scheduled: u.scheduled,\n ownedByCurrentUser: u.owned_by_current_user,\n ownerName: u.owner_name,\n uaId: u.unit_activity_id\n });\n }\n });\n return this.orderUnits(parsedUnits);\n };\n\n orderUnits = (units) => {\n const unitsArr = [];\n Object.keys(units).forEach(unitId => unitsArr.push(units[unitId]));\n return unitsArr;\n };\n\n setAllUnits = (data) => {\n this.setState({ allUnits: this.parseUnits(data), }, this.getUnitsForCurrentClassAndOpenState);\n this.hashLinkScroll();\n };\n\n switchClassrooms = (classroom) => {\n const { open, } = this.props\n window.localStorage.setItem(PROGRESS_REPORTS_SELECTED_CLASSROOM_ID, classroom.id)\n let baseLink = '/teachers/classrooms/activity_planner'\n baseLink += open ? '' : '/closed'\n if (classroom.id) {\n window.history.pushState({}, '', `${baseLink}?classroom_id=${classroom.id}`);\n } else {\n window.history.pushState({}, '', baseLink);\n }\n this.setState({ selectedClassroomId: classroom.value, }, () => this.getUnitsForCurrentClassAndOpenState());\n };\n\n stateBasedComponent = () => {\n const { open, } = this.props\n const { units, selectedClassroomId } = this.state\n\n const displayableUnits = units.filter(unit => unit.open === open)\n\n if (!displayableUnits.length && open) {\n return (\n \n
Start by assigning activities \n
Nothing to see here yet! Once you assign activities, they will show up here.
\n
\n
You have no closed activity packs \n
Closed activity packs are hidden from students. You can still access them in your reports.
\n
${c.name}
`, })))\n\n return (\n \n \n
\n
\n \n
\n
My {open ? 'Open' : 'Closed'} Activity Packs \n
\n
\n
\n {this.stateBasedComponent()}\n
\n );\n }\n}\n","import React from 'react';\nimport { renderNavList } from '../../../Shared';\n\nconst ACTIVE = 'active'\nconst LAUNCH_LESSONS = 'Launch Lessons'\nconst MY_OPEN_ACTIVITY_PACKS = 'My Open Activity Packs'\nconst MY_CLOSED_ACTIVITY_PACKS = 'My Closed Activity Packs'\nconst tabs = {\n [MY_OPEN_ACTIVITY_PACKS]: {\n label: MY_OPEN_ACTIVITY_PACKS,\n url: '/teachers/classrooms/activity_planner'\n },\n [MY_CLOSED_ACTIVITY_PACKS]: {\n label: MY_CLOSED_ACTIVITY_PACKS,\n url: '/teachers/classrooms/activity_planner/closed'\n },\n [LAUNCH_LESSONS]: {\n label: LAUNCH_LESSONS,\n url: '/teachers/classrooms/activity_planner/lessons'\n }\n}\n\nexport const MyActivitiesTabs = () => {\n const [dropdownOpen, setDropdownOpen] = React.useState(false);\n\n let openActivityPacksClassName, closedActivityPacksClassName, lessonsClassName, activeTab\n\n if (window.location.pathname.includes('/lessons')) {\n lessonsClassName = ACTIVE\n activeTab = LAUNCH_LESSONS\n } else if (window.location.pathname.includes('/closed')) {\n closedActivityPacksClassName = ACTIVE\n activeTab = MY_CLOSED_ACTIVITY_PACKS\n } else {\n openActivityPacksClassName = ACTIVE\n activeTab = MY_OPEN_ACTIVITY_PACKS\n }\n\n function handleDropdownClick() {\n setDropdownOpen(!dropdownOpen)\n }\n\n return(\n \n \n
\n
\n
\n {activeTab}
\n \n {renderNavList({ tabs, handleLinkClick: handleDropdownClick, activeTab, listClass: 'dropdown-menu' })}\n
\n
\n
\n
\n {renderNavList({ tabs, handleLinkClick: handleDropdownClick, activeTab })}\n
\n
\n );\n}\n\nexport default MyActivitiesTabs\n","import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\n\nimport UpdateAssignedStudents from './UpdateAssignedStudents';\nimport EditUnitActivitiesContainer from './EditUnitActivitiesContainer.jsx';\n\nimport ChooseClassroomLesson from '../components/assignment_flow/choose_classroom_lesson';\nimport ClassroomLessonsPlanner from '../components/assignment_flow/classroom_lessons';\nimport ManageUnits from '../components/assignment_flow/manage_units/manage_units';\nimport MyActivitiesTabs from '../components/assignment_flow/my_activities_tabs.jsx';\nimport UnitTemplateProfile from '../components/assignment_flow/unit_templates_manager/unit_template_profile/unit_template_profile.tsx';\nimport UnitTemplatesManager from '../components/assignment_flow/unit_templates_manager/unit_templates_manager';\n\nexport default class LessonPlannerContainer extends React.Component {\n constructor(props) {\n super(props)\n }\n\n render() {\n const { user, location, children, unassignWarningHidden, } = this.props\n const tabs = location.pathname.includes('teachers') ? \n {tabs}\n {children}\n \n \n
\n )\n }\n}\n","import React from 'react';\nimport { BrowserRouter, Route } from 'react-router-dom';\nimport { CompatRouter } from \"react-router-dom-v5-compat\";\n\nimport LessonPlannerContainer from './LessonPlannerContainer.jsx';\n\nconst LessonPlannerRouter = (props) => {\n return (\n \n \n \n \n );\n}\n\nexport default LessonPlannerRouter\n","import React from 'react';\nimport LessonPlannerRouter from '../containers/LessonPlannerRouter';\n\nexport default (props) => (\n \n
\n
\n \n
Log in as a teacher \n \n \n
Access a teacher's account to assign activities, manage rosters, and view data.
\n
s.value === school.id || s.value === school.value)}\n />\n t.value === teacher.id || t.value === teacher.value) : null}\n />\n \n
\n Cancel \n Log in \n
\n
\n * @license MIT\n */\n\n// The _isBuffer check is for Safari 5-7 support, because it's missing\n// Object.prototype.constructor. Remove this eventually\nmodule.exports = function (obj) {\n return obj != null && (isBuffer(obj) || isSlowBuffer(obj) || !!obj._isBuffer)\n}\n\nfunction isBuffer (obj) {\n return !!obj.constructor && typeof obj.constructor.isBuffer === 'function' && obj.constructor.isBuffer(obj)\n}\n\n// For Node v0.10 support. Remove this eventually.\nfunction isSlowBuffer (obj) {\n return typeof obj.readFloatLE === 'function' && typeof obj.slice === 'function' && isBuffer(obj.slice(0, 0))\n}\n","(function(){\r\n var crypt = require('crypt'),\r\n utf8 = require('charenc').utf8,\r\n isBuffer = require('is-buffer'),\r\n bin = require('charenc').bin,\r\n\r\n // The core\r\n md5 = function (message, options) {\r\n // Convert to byte array\r\n if (message.constructor == String)\r\n if (options && options.encoding === 'binary')\r\n message = bin.stringToBytes(message);\r\n else\r\n message = utf8.stringToBytes(message);\r\n else if (isBuffer(message))\r\n message = Array.prototype.slice.call(message, 0);\r\n else if (!Array.isArray(message) && message.constructor !== Uint8Array)\r\n message = message.toString();\r\n // else, assume byte array already\r\n\r\n var m = crypt.bytesToWords(message),\r\n l = message.length * 8,\r\n a = 1732584193,\r\n b = -271733879,\r\n c = -1732584194,\r\n d = 271733878;\r\n\r\n // Swap endian\r\n for (var i = 0; i < m.length; i++) {\r\n m[i] = ((m[i] << 8) | (m[i] >>> 24)) & 0x00FF00FF |\r\n ((m[i] << 24) | (m[i] >>> 8)) & 0xFF00FF00;\r\n }\r\n\r\n // Padding\r\n m[l >>> 5] |= 0x80 << (l % 32);\r\n m[(((l + 64) >>> 9) << 4) + 14] = l;\r\n\r\n // Method shortcuts\r\n var FF = md5._ff,\r\n GG = md5._gg,\r\n HH = md5._hh,\r\n II = md5._ii;\r\n\r\n for (var i = 0; i < m.length; i += 16) {\r\n\r\n var aa = a,\r\n bb = b,\r\n cc = c,\r\n dd = d;\r\n\r\n a = FF(a, b, c, d, m[i+ 0], 7, -680876936);\r\n d = FF(d, a, b, c, m[i+ 1], 12, -389564586);\r\n c = FF(c, d, a, b, m[i+ 2], 17, 606105819);\r\n b = FF(b, c, d, a, m[i+ 3], 22, -1044525330);\r\n a = FF(a, b, c, d, m[i+ 4], 7, -176418897);\r\n d = FF(d, a, b, c, m[i+ 5], 12, 1200080426);\r\n c = FF(c, d, a, b, m[i+ 6], 17, -1473231341);\r\n b = FF(b, c, d, a, m[i+ 7], 22, -45705983);\r\n a = FF(a, b, c, d, m[i+ 8], 7, 1770035416);\r\n d = FF(d, a, b, c, m[i+ 9], 12, -1958414417);\r\n c = FF(c, d, a, b, m[i+10], 17, -42063);\r\n b = FF(b, c, d, a, m[i+11], 22, -1990404162);\r\n a = FF(a, b, c, d, m[i+12], 7, 1804603682);\r\n d = FF(d, a, b, c, m[i+13], 12, -40341101);\r\n c = FF(c, d, a, b, m[i+14], 17, -1502002290);\r\n b = FF(b, c, d, a, m[i+15], 22, 1236535329);\r\n\r\n a = GG(a, b, c, d, m[i+ 1], 5, -165796510);\r\n d = GG(d, a, b, c, m[i+ 6], 9, -1069501632);\r\n c = GG(c, d, a, b, m[i+11], 14, 643717713);\r\n b = GG(b, c, d, a, m[i+ 0], 20, -373897302);\r\n a = GG(a, b, c, d, m[i+ 5], 5, -701558691);\r\n d = GG(d, a, b, c, m[i+10], 9, 38016083);\r\n c = GG(c, d, a, b, m[i+15], 14, -660478335);\r\n b = GG(b, c, d, a, m[i+ 4], 20, -405537848);\r\n a = GG(a, b, c, d, m[i+ 9], 5, 568446438);\r\n d = GG(d, a, b, c, m[i+14], 9, -1019803690);\r\n c = GG(c, d, a, b, m[i+ 3], 14, -187363961);\r\n b = GG(b, c, d, a, m[i+ 8], 20, 1163531501);\r\n a = GG(a, b, c, d, m[i+13], 5, -1444681467);\r\n d = GG(d, a, b, c, m[i+ 2], 9, -51403784);\r\n c = GG(c, d, a, b, m[i+ 7], 14, 1735328473);\r\n b = GG(b, c, d, a, m[i+12], 20, -1926607734);\r\n\r\n a = HH(a, b, c, d, m[i+ 5], 4, -378558);\r\n d = HH(d, a, b, c, m[i+ 8], 11, -2022574463);\r\n c = HH(c, d, a, b, m[i+11], 16, 1839030562);\r\n b = HH(b, c, d, a, m[i+14], 23, -35309556);\r\n a = HH(a, b, c, d, m[i+ 1], 4, -1530992060);\r\n d = HH(d, a, b, c, m[i+ 4], 11, 1272893353);\r\n c = HH(c, d, a, b, m[i+ 7], 16, -155497632);\r\n b = HH(b, c, d, a, m[i+10], 23, -1094730640);\r\n a = HH(a, b, c, d, m[i+13], 4, 681279174);\r\n d = HH(d, a, b, c, m[i+ 0], 11, -358537222);\r\n c = HH(c, d, a, b, m[i+ 3], 16, -722521979);\r\n b = HH(b, c, d, a, m[i+ 6], 23, 76029189);\r\n a = HH(a, b, c, d, m[i+ 9], 4, -640364487);\r\n d = HH(d, a, b, c, m[i+12], 11, -421815835);\r\n c = HH(c, d, a, b, m[i+15], 16, 530742520);\r\n b = HH(b, c, d, a, m[i+ 2], 23, -995338651);\r\n\r\n a = II(a, b, c, d, m[i+ 0], 6, -198630844);\r\n d = II(d, a, b, c, m[i+ 7], 10, 1126891415);\r\n c = II(c, d, a, b, m[i+14], 15, -1416354905);\r\n b = II(b, c, d, a, m[i+ 5], 21, -57434055);\r\n a = II(a, b, c, d, m[i+12], 6, 1700485571);\r\n d = II(d, a, b, c, m[i+ 3], 10, -1894986606);\r\n c = II(c, d, a, b, m[i+10], 15, -1051523);\r\n b = II(b, c, d, a, m[i+ 1], 21, -2054922799);\r\n a = II(a, b, c, d, m[i+ 8], 6, 1873313359);\r\n d = II(d, a, b, c, m[i+15], 10, -30611744);\r\n c = II(c, d, a, b, m[i+ 6], 15, -1560198380);\r\n b = II(b, c, d, a, m[i+13], 21, 1309151649);\r\n a = II(a, b, c, d, m[i+ 4], 6, -145523070);\r\n d = II(d, a, b, c, m[i+11], 10, -1120210379);\r\n c = II(c, d, a, b, m[i+ 2], 15, 718787259);\r\n b = II(b, c, d, a, m[i+ 9], 21, -343485551);\r\n\r\n a = (a + aa) >>> 0;\r\n b = (b + bb) >>> 0;\r\n c = (c + cc) >>> 0;\r\n d = (d + dd) >>> 0;\r\n }\r\n\r\n return crypt.endian([a, b, c, d]);\r\n };\r\n\r\n // Auxiliary functions\r\n md5._ff = function (a, b, c, d, x, s, t) {\r\n var n = a + (b & c | ~b & d) + (x >>> 0) + t;\r\n return ((n << s) | (n >>> (32 - s))) + b;\r\n };\r\n md5._gg = function (a, b, c, d, x, s, t) {\r\n var n = a + (b & d | c & ~d) + (x >>> 0) + t;\r\n return ((n << s) | (n >>> (32 - s))) + b;\r\n };\r\n md5._hh = function (a, b, c, d, x, s, t) {\r\n var n = a + (b ^ c ^ d) + (x >>> 0) + t;\r\n return ((n << s) | (n >>> (32 - s))) + b;\r\n };\r\n md5._ii = function (a, b, c, d, x, s, t) {\r\n var n = a + (c ^ (b | ~d)) + (x >>> 0) + t;\r\n return ((n << s) | (n >>> (32 - s))) + b;\r\n };\r\n\r\n // Package private blocksize\r\n md5._blocksize = 16;\r\n md5._digestsize = 16;\r\n\r\n module.exports = function (message, options) {\r\n if (message === undefined || message === null)\r\n throw new Error('Illegal argument ' + message);\r\n\r\n var digestbytes = crypt.wordsToBytes(md5(message, options));\r\n return options && options.asBytes ? digestbytes :\r\n options && options.asString ? bin.bytesToString(digestbytes) :\r\n crypt.bytesToHex(digestbytes);\r\n };\r\n\r\n})();\r\n","import * as _ from 'lodash'\nimport md5 from 'md5'\nimport * as React from 'react'\n\nimport { unorderedArraysAreEqual, } from '../../modules/unorderedArraysAreEqual'\nimport { NOT_APPLICABLE } from '../Shared'\n\nexport const RESTRICTED = 'restricted'\nexport const LIMITED = 'limited'\nexport const FULL = 'full'\nexport const LOADING = 'loading'\n\nexport const APPROVED = 'Approved'\nexport const PENDING = 'Pending'\nexport const DENIED = 'Denied'\nexport const SKIPPED = 'Skipped'\n\nexport const OVERVIEW = 'overview'\nexport const SKILL = 'skill'\nexport const STUDENT = 'student'\n\nexport const FETCH_ACTION = 'fetch'\nexport const RESET_ACTION = 'reset'\n\nexport const OLD_DIAGNOSTIC_TIMEFRAME = 'last-school-year'\n\nexport const DIAGNOSTIC_REPORT_DEFAULT_CELL_WIDTH = '182px'\nexport const groupByDropdownOptions = [{ label: 'Grade', value: 'grade' }, { label: 'Teacher', value: 'teacher' }, { label: 'Classroom', value: 'classroom' }]\nexport const oldDiagnosticTypeDropdownOptions = [\n { label: 'Starter Diagnostic', value: 1663 },\n { label: 'Intermediate Diagnostic', value: 1668 },\n { label: 'Advanced Diagnostic', value: 1678 },\n { label: 'ELL Starter Diagnostic', value: 1161 },\n { label: 'ELL Intermediate Diagnostic', value: 1568 },\n { label: 'ELL Advanced Diagnostic', value: 1590 },\n { label: 'AP Writing Skills Survey', value: 992 },\n { label: 'Pre-AP Writing Skills Survey 1', value: 1229 },\n { label: 'Pre-AP Writing Skills Survey 2', value: 1230 },\n { label: 'SpringBoard Writing Skills Survey', value: 1432 }\n]\nexport const diagnosticTypeDropdownOptions = [\n { label: 'Starter Diagnostic', value: 2537 },\n { label: 'Intermediate Diagnostic', value: 2539 },\n { label: 'Advanced Diagnostic', value: 2541 },\n { label: 'ELL Starter Diagnostic', value: 2550 },\n { label: 'ELL Intermediate Diagnostic', value: 2555 },\n { label: 'ELL Advanced Diagnostic', value: 2563 },\n { label: 'AP Writing Skills Survey', value: 992 },\n { label: 'Pre-AP Writing Skills Survey 1', value: 1229 },\n { label: 'Pre-AP Writing Skills Survey 2', value: 1230 },\n { label: 'SpringBoard Writing Skills Survey', value: 1432 }\n]\n\nexport const premiumLockImage = \n {premiumLockImage}\n
\n)\n\nexport const restrictedPage = (\n \n {premiumLockImage}\n
\n)\n\nexport const RESTRICTED_TEXT = \"Sorry, only verified admins with a subscription to School or District Premium can access this feature.\"\n\nexport function getDiagnosticTypeDropdownOptions(timeframe) {\n if (timeframe === OLD_DIAGNOSTIC_TIMEFRAME) return oldDiagnosticTypeDropdownOptions;\n\n return diagnosticTypeDropdownOptions\n}\n\nexport function selectionsEqual(firstSelection, secondSelection) {\n return (\n firstSelection == secondSelection || // less strict comparison so that undefined and null are treated as equal\n unorderedArraysAreEqual(firstSelection, secondSelection)\n )\n}\n\nexport function mapItemsIfNotAll(selectedItems, allItems, mapKey = 'id') {\n // selectedItems may, by design, be a superset of allItems, but if everything in allItems is in selectedItems, we want to treat it as \"everything\" being selected\n const allItemsSelected = allItems.every((item) => {\n return _.some(selectedItems, item)\n })\n\n if (allItemsSelected || selectionsEqual(selectedItems, allItems)) return null\n\n return selectedItems.map(i => i[mapKey])\n}\n\n/* Should produce the same output as backend `app/services/payload_hasher.rb:run` */\nexport function hashPayload(payloadArray: Array) {\n const joinedPayload = payloadArray.join('-')\n return md5(joinedPayload)\n}\n","import * as React from 'react'\n\nimport { SMALL, POSITIVE, NEGATIVE, NONE } from './shared'\n\nimport { requestPost, } from './../../../../modules/request'\nimport { ButtonLoadingSpinner, } from '../../../Shared/index'\nimport { hashPayload } from '../../shared'\n\nconst smallArrowUpIcon = ;\n selectedSchoolIds: Array;\n selectedClassroomIds: Array;\n selectedTeacherIds: Array;\n selectedTimeframe: string;\n customTimeframeStart?: any;\n customTimeframeEnd?: any;\n passedCount?: number;\n passedChange?: number;\n passedChangeDirection?: 'negative'|'positive'|'none';\n singularLabel?: string;\n pusherChannel?: any;\n labelSubText?: JSX.Element\n}\n\nconst PUSHER_CURRENT_EVENT_KEY = 'admin-snapshot-count-cached'\nconst PUSHER_PREVIOUS_EVENT_KEY = 'admin-snapshot-previous-count-cached'\nconst NOT_APPLICABLE = 'N/A'\nconst RETRY_TIMEOUT = 20000\n\nconst SnapshotCount = ({ label, size, queryKey, searchCount, selectedGrades, selectedSchoolIds, selectedTeacherIds, selectedClassroomIds, selectedTimeframe, customTimeframeStart, customTimeframeEnd, passedCount, passedPrevious, passedChange, passedChangeDirection, singularLabel, pusherChannel, labelSubText, }: SnapshotCountProps) => {\n const [count, setCount] = React.useState(passedCount || null)\n const [previous, setPrevious] = React.useState(passedPrevious)\n const [change, setChange] = React.useState(passedChange)\n const [changeDirection, setChangeDirection] = React.useState(passedChangeDirection || null)\n const [loading, setLoading] = React.useState(false)\n const [currentRetryTimeout, setCurrentRetryTimeout] = React.useState(null)\n const [previousRetryTimeout, setPreviousRetryTimeout] = React.useState(null)\n const [pusherCurrentMessage, setPusherCurrentMessage] = React.useState(null)\n const [pusherPreviousMessage, setPusherPreviousMessage] = React.useState(null)\n const [customTimeframeStartString, setCustomTimeframeStartString] = React.useState(null)\n const [customTimeframeEndString, setCustomTimeframeEndString] = React.useState(null)\n\n React.useEffect(() => {\n initializePusher()\n }, [pusherChannel])\n\n React.useEffect(() => {\n resetToDefault()\n\n clearTimeout(currentRetryTimeout)\n clearTimeout(previousRetryTimeout)\n\n getCurrentData()\n getPreviousData()\n }, [searchCount])\n\n React.useEffect(() => {\n if (!customTimeframeStart) return setCustomTimeframeStartString(null)\n\n setCustomTimeframeStartString(customTimeframeStart.toISOString())\n }, [customTimeframeStart])\n\n React.useEffect(() => {\n if (!customTimeframeEnd) return setCustomTimeframeEndString(null)\n\n setCustomTimeframeEndString(customTimeframeEnd.toISOString())\n }, [customTimeframeEnd])\n\n React.useEffect(() => {\n if (!pusherCurrentMessage) return\n\n if (filtersMatchHash(pusherCurrentMessage)) getCurrentData()\n }, [pusherCurrentMessage])\n\n React.useEffect(() => {\n if (!pusherPreviousMessage) return\n\n if (filtersMatchHash(pusherPreviousMessage)) getPreviousData()\n }, [pusherPreviousMessage])\n\n React.useEffect(() => {\n if (!previous || count === NOT_APPLICABLE || count === null) {\n setChangeDirection(NONE)\n return\n }\n\n const roundedPrevious = Math.round(previous || 0)\n\n const changeTotal = Math.round(((count - roundedPrevious) / (roundedPrevious || 1)) * 100)\n setChange(Math.abs(changeTotal))\n if (changeTotal) {\n setChangeDirection(changeTotal > 0 ? POSITIVE : NEGATIVE)\n } else {\n setChangeDirection(NONE)\n }\n }, [count, previous])\n\n function resetToDefault() {\n setCount(passedCount || null)\n setPrevious(passedPrevious || null)\n setChangeDirection(passedChangeDirection || null)\n setChange(passedChange || 0)\n }\n\n function getSearchParams() {\n return {\n query: queryKey,\n timeframe: selectedTimeframe,\n timeframe_custom_start: customTimeframeStart,\n timeframe_custom_end: customTimeframeEnd,\n school_ids: selectedSchoolIds,\n teacher_ids: selectedTeacherIds,\n classroom_ids: selectedClassroomIds,\n grades: selectedGrades\n }\n }\n\n function getCurrentData() {\n\n requestPost(`/snapshots/count`, getSearchParams(), (body) => {\n if (!body.hasOwnProperty('results')) {\n setCurrentRetryTimeout(setTimeout(getCurrentData, RETRY_TIMEOUT))\n setLoading(true)\n return\n }\n\n clearTimeout(currentRetryTimeout)\n\n const { results, } = body\n const { count } = results\n\n setCount((count === null) ? NOT_APPLICABLE : Math.round(count || 0))\n\n setLoading(false)\n })\n }\n\n function getPreviousData() {\n requestPost(`/snapshots/count?previous_timeframe=true`, getSearchParams(), (body) => {\n if (!body.hasOwnProperty('results')) {\n setPreviousRetryTimeout(setTimeout(getPreviousData, RETRY_TIMEOUT))\n return\n }\n\n clearTimeout(previousRetryTimeout)\n\n const { results, } = body\n const { count } = results\n\n setPrevious(Math.round(count || 0))\n })\n }\n\n function filtersMatchHash(hashMessage) {\n const filterTarget = [].concat(\n queryKey,\n selectedTimeframe,\n customTimeframeStartString,\n customTimeframeEndString,\n selectedSchoolIds,\n selectedGrades,\n selectedTeacherIds,\n selectedClassroomIds\n )\n\n const filterHash = hashPayload(filterTarget)\n\n return hashMessage == filterHash\n }\n\n function initializePusher() {\n pusherChannel?.bind(`${PUSHER_CURRENT_EVENT_KEY}:${queryKey}`, (body) => {\n const { message, } = body\n setPusherCurrentMessage(message)\n });\n\n pusherChannel?.bind(`${PUSHER_PREVIOUS_EVENT_KEY}:${queryKey}`, (body) => {\n const { message, } = body\n setPusherPreviousMessage(message)\n });\n };\n\n let className = `snapshot-item snapshot-count ${size}`\n if (changeDirection === NONE && count !== NOT_APPLICABLE) {\n className += ' no-change'\n } else if (changeDirection !== NONE) {\n className += ` ${changeDirection}`\n }\n\n let icon\n\n if (changeDirection === POSITIVE) {\n icon = size === SMALL ? smallArrowUpIcon : mediumArrowUpIcon\n } else if (changeDirection === NEGATIVE) {\n icon = size === SMALL ? smallArrowDownIcon : mediumArrowDownIcon\n }\n\n return (\n \n {loading &&
}\n \n {count?.toLocaleString() || '—'} \n {count === 1 && singularLabel ? singularLabel : label}{labelSubText} \n
\n \n {icon}\n {change === 0 ? null : `${change}%`} \n
\n \n )\n}\n\nexport default SnapshotCount\n\nSnapshotCount.defaultProps = {\n customTimeframeEnd: null,\n customTimeframeStart: null,\n selectedClassroomIds: null,\n selectedGrades: null,\n selectedTeacherIds: null,\n selectedTimeframe: \"this-school-year\",\n}\n","import * as React from 'react'\nimport { Link, } from 'react-router-dom';\n\nimport { USAGE_HIGHLIGHTS, SECTION_NAME_TO_ICON_URL, } from './shared'\n\nimport SnapshotCount from '../usage_snapshots/snapshotCount'\nimport { sentencesWrittenSnapshotInfo, studentLearningHoursSnapshotInfo, } from '../usage_snapshots/shared'\n\nconst HighlightsSection = ({ pusherChannel, schools, }) => {\n function renderHighlights() {\n const snapshotItems = [sentencesWrittenSnapshotInfo, studentLearningHoursSnapshotInfo].map(item => {\n const { label, size, queryKey, singularLabel, } = item\n const props = {\n label,\n queryKey,\n searchCount: 0,\n pusherChannel,\n singularLabel,\n size,\n selectedSchoolIds: schools.map(s => s.id),\n labelSubText: This school year \n }\n\n return (\n \n {snapshotItems}\n
\n )\n }\n\n return (\n \n \n {USAGE_HIGHLIGHTS} \n \n \n
\n {renderHighlights()}\n
\n
\n )\n}\n\nexport default HighlightsSection\n","import * as React from 'react'\n\nimport {\n SECTION_NAME_TO_ICON_URL,\n PROFESSIONAL_DEVELOPMENT_AND_SUPPORT,\n iconLinkBase,\n} from './shared'\n\nimport { RESTRICTED, } from '../../shared'\nimport { requestGet, } from '../../../../modules/request/index';\nimport { Spinner, } from '../../../Shared/index'\n\nexport const ERIKA_EMAIL = 'erika@quill.org'\nexport const SHANNON_EMAIL = 'shannon@quill.org'\n\nconst EMAIL_TO_IMG = {\n [ERIKA_EMAIL]: \n
\n
\n
Implement literacy with fidelity \n
{blackBulb}Premium Schools complete three times as many activities as free schools.
\n
With personalized learning, interactive activities, and immediate feedback, Quill Premium helps teachers foster literacy skills and critical thinking. If you’re interested in Quill Premium for your teachers, our sales team would love to connect with you.
\n
\n
\n {alexAndCharlieImg}\n
\n {quickLinks}\n
\n
\n
\n {quickLinks}\n
\n
\n
\n
\n
Meet your Professional Learning Manager \n
I am {name}, your main point of contact for Quill implementation questions and scheduling of virtual professional learning opportunities. Please feel free to contact me to discuss how I can best support your district’s Quill journey this year.
\n
\n
\n
\n {EMAIL_TO_IMG[email.toLowerCase()]}\n
\n {quickLinks}\n
\n
\n
\n
Meet your Quill Implementation Team \n
We are your main point of contact for Quill questions, onboarding needs, and scheduling of virtual training opportunities. Please feel free to contact us to discuss how we can best support your school’s Quill journey this year.
\n
\n
\n {scarletAndNattalieImg}\n
\n {quickLinks}\n
\n \n {PROFESSIONAL_DEVELOPMENT_AND_SUPPORT} \n \n {renderProfessionalLearningDevelopmentContent()}\n \n )\n}\n\nexport default ProfessionalDevelopmentSection\n","import * as React from 'react'\nimport { Link, } from 'react-router-dom';\n\nimport { iconLinkBase, ACCOUNT_MANAGEMENT, SECTION_NAME_TO_ICON_URL, } from './shared'\n\nimport { DarkButtonLoadingSpinner, } from '../../../Shared'\n\nexport const LOG_IN_AS_A_TEACHER = \"Log in as a Teacher\"\n\nexport const accountManagementTiles = [\n {\n name: 'Manage Accounts',\n link: '/teachers/premium_hub/account_management',\n icon: `${iconLinkBase}/manage-accounts.svg`,\n linkText: 'Manage accounts',\n description: 'Create new accounts, manage admins, and more.',\n },\n {\n name: LOG_IN_AS_A_TEACHER,\n icon: `${iconLinkBase}/log-in-as-a-teacher.svg`,\n description: 'Access each teacher’s account to assign activities, manage rosters, and view data.',\n },\n {\n name: 'Manage Subscriptions',\n link: '/teachers/premium_hub/school_subscriptions',\n linkText: 'Manage subscriptions',\n icon: `${iconLinkBase}/manage-subscriptions.svg`,\n description: 'View subscription history, manage subscriptions, and more.',\n }\n]\n\nconst AccountManagementSection = ({ handleClickLogInAsATeacher, loading, }) => {\n let logInAsTeacherButton = Log in as a teacher \n\n if (loading) {\n logInAsTeacherButton = Log in as a teacher \n }\n\n const tiles = accountManagementTiles.map(tile => {\n return (\n \n
\n
{tile.name} \n
{tile.description}
\n
\n
\n {tile.name === LOG_IN_AS_A_TEACHER ? logInAsTeacherButton :
{tile.linkText}}\n
\n
\n
\n \n {ACCOUNT_MANAGEMENT} \n \n \n \n )\n}\n\nexport default AccountManagementSection\n","import * as React from 'react'\nimport { Link, } from 'react-router-dom';\n\nimport { INTEGRATIONS, SECTION_NAME_TO_ICON_URL, iconLinkBase, } from './shared'\n\nexport const integrationTiles = [\n {\n name: 'Canvas',\n link: '/teachers/premium_hub/integrations/canvas',\n icon: `${iconLinkBase}/canvas.svg`,\n description: 'Make teaching at your school even more effective with our seamless Canvas integration.',\n },\n {\n name: 'Google Classroom',\n link: '/teachers/premium_hub/integrations/google',\n icon: `${iconLinkBase}/google-classroom.svg`,\n description: 'Make teaching at your school even more effective with our seamless Google Classroom integration.',\n },\n {\n name: 'Clever',\n link: '/teachers/premium_hub/integrations/clever',\n icon: `${iconLinkBase}/clever.svg`,\n description: 'Make teaching at your school even more effective with our seamless Clever integration.',\n }\n]\n\nconst IntegrationsSection = () => {\n const tiles = integrationTiles.map(tile => {\n return (\n \n
\n
{tile.name} \n
{tile.description}
\n
\n
\n
Learn more\n
\n
\n
\n \n {INTEGRATIONS} \n \n \n \n )\n}\n\nexport default IntegrationsSection\n","import * as React from 'react'\nimport { Link, } from 'react-router-dom';\n\nimport { PREMIUM_REPORTS, SECTION_NAME_TO_ICON_URL, iconLinkBase, } from './shared'\n\nconst DIAGNOSTIC_GROWTH_REPORT = 'Diagnostic Growth Report'\n\nexport const premiumReportTiles = [\n {\n name: 'Usage Snapshot Report',\n link: '/teachers/premium_hub/usage_snapshot_report',\n icon: `${iconLinkBase}/usage-snapshot-report.svg`,\n description: 'Key insights to help you succeed. View most assigned activities, average activities completed, and more.',\n new: true\n },\n {\n name: DIAGNOSTIC_GROWTH_REPORT,\n link: '/teachers/premium_hub/diagnostic_growth_report',\n icon: `${iconLinkBase}/diagnostic-growth-report.svg`,\n description: 'Get a detailed breakdown of Quill’s impact on students’ growth. View data by skill, student, and more.',\n new: true\n },\n {\n name: 'Data Export',\n link: '/teachers/premium_hub/data_export',\n icon: `${iconLinkBase}/data-export.svg`,\n description: 'Download a file containing all activities completed by students. Includes score, time spent, and more.',\n new: true\n },\n {\n name: 'Concepts Report',\n link: '/teachers/premium_hub/district_concept_reports',\n icon: `${iconLinkBase}/concepts-report.svg`,\n description: 'View the number of times a student correctly or incorrectly used a targeted concept.',\n },\n {\n name: 'Activity Scores Report',\n link: '/teachers/premium_hub/district_activity_scores',\n icon: `${iconLinkBase}/activity-scores-report.svg`,\n description: 'View the overall average score for each student per class.',\n },\n {\n name: 'Standards Report',\n link: '/teachers/premium_hub/district_standards_reports',\n icon: `${iconLinkBase}/standards-report.svg`,\n description: 'View a school’s overall progress on each of the Common Core standards.',\n }\n]\n\nconst PremiumReportsSection = () => {\n const tiles = premiumReportTiles.map(tile => {\n const buttonClassName = \"quill-button-archived focus-on-light outlined secondary medium\"\n const button = \n
\n
{tile.name}{tile.new ? NEW : null} \n
{tile.description}
\n
\n
\n {button}\n
\n
\n
\n \n {PREMIUM_REPORTS} \n \n \n \n )\n}\n\nexport default PremiumReportsSection\n","import Pusher from 'pusher-js';\nimport React from 'react';\n\nimport { requestGet, } from '../../../modules/request/index';\nimport { Tooltip, Spinner, Snackbar, defaultSnackbarTimeout, } from '../../Shared/index';\nimport useSnackbarMonitor from '../../Shared/hooks/useSnackbarMonitor';\nimport LogInAsATeacherModal from '../components/overview/logInAsAsTeacherModal'\nimport HighlightsSection from '../components/overview/highlightsSection'\nimport ProfessionalDevelopmentSection from '../components/overview/professionalDevelopmentSection'\nimport AccountManagementSection from '../components/overview/accountManagementSection'\nimport IntegrationsSection from '../components/overview/integrationsSection'\nimport PremiumReportsSection from '../components/overview/premiumReportsSection'\nimport { FULL, RESTRICTED_TEXT, } from '../shared'\n\nconst Overview = ({ adminId, accessType, passedModel, adminInfo, }) => {\n const [loading, setLoading] = React.useState(passedModel ? false : true)\n const [model, setModel] = React.useState(passedModel || null)\n const [pusherChannel, setPusherChannel] = React.useState(null)\n const [showLoginAsTeacherModal, setShowLoginAsTeacherModal] = React.useState(false)\n const [showSnackbar, setShowSnackbar] = React.useState(false);\n const [snackbarText, setSnackbarText] = React.useState('');\n\n useSnackbarMonitor(showSnackbar, setShowSnackbar, defaultSnackbarTimeout)\n\n React.useEffect(() => {\n const pusher = new Pusher(window.postbuildEnv.PUSHER_KEY, { cluster: window.postbuildEnv.PUSHER_CLUSTER });\n const channel = pusher.subscribe(String(adminId));\n setPusherChannel(channel)\n }, [])\n\n React.useEffect(() => {\n if (!pusherChannel) { return }\n\n bindToAdminUsersChannel()\n getData()\n }, [pusherChannel])\n\n React.useEffect(() => {\n if (model) {\n setLoading(false)\n }\n }, [model])\n\n function getData() {\n requestGet(\n `${window.postbuildEnv.DEFAULT_URL}/admins/${adminId}`,\n (body) => {\n receiveData(body)\n }\n );\n }\n\n function receiveData(data) {\n if (Object.keys(data).length > 1) {\n setModel(data)\n setLoading(false)\n }\n };\n\n function bindToAdminUsersChannel() {\n if (!pusherChannel) { return }\n\n if (window.postbuildEnv.RAILS_ENV === 'development') {\n Pusher.logToConsole = true;\n }\n pusherChannel.bind('admin-users-found', () => {\n getData()\n });\n };\n\n function handleClickLogInAsATeacher() {\n if (accessType === FULL) {\n setShowLoginAsTeacherModal(true)\n } else {\n setSnackbarText(RESTRICTED_TEXT)\n setShowSnackbar(true)\n }\n }\n\n function closeLogInAsATeacherModal() { setShowLoginAsTeacherModal(false) }\n\n function renderSubheader() {\n if (adminInfo.schools.length === 0) {\n return (\n Thanks for being an admin. We’re excited to have you on board!
\n )\n }\n\n const sortedSchools = adminInfo.schools.sort((a, b) => a.name.localeCompare(b.name));\n\n const associatedSchoolIndex = sortedSchools.findIndex(school => school.id === adminInfo.associated_school?.id);\n\n if (associatedSchoolIndex > 0) {\n const [associatedSchool] = sortedSchools.splice(associatedSchoolIndex, 1);\n sortedSchools.unshift(associatedSchool);\n }\n\n let schoolsText = '';\n\n if (sortedSchools.length === 1) {\n schoolsText = {sortedSchools[0].name} ;\n } else if (sortedSchools.length === 2) {\n schoolsText = {sortedSchools[0].name} and {sortedSchools[1].name} {sortedSchools[0].name} , {sortedSchools[1].name} , and {sortedSchools[2].name} s.name).join('{sortedSchools.length - 2} more }\n />\n )\n schoolsText = {sortedSchools[0].name} , {sortedSchools[1].name} , and {tooltip}Thanks for being an admin of {schoolsText}.
\n )\n }\n\n function renderLogInAsATeacherModal() {\n if (!showLoginAsTeacherModal) { return }\n\n const schoolOptions = model.schools.map(school => ({ value: school.id, label: school.name, id: school.id })) || []\n const teacherOptions = model.teachers.map(teacher => ({ value: teacher.id, label: teacher.name, schoolId: teacher.schools[0].id, id: teacher.id })) || []\n\n return (\n \n
\n
\n
Hello{adminInfo.name ? `, ${adminInfo.name.split(' ')[0]}` : ''}! \n {renderLogInAsATeacherModal()}\n {renderSubheader()}\n
\n
\n
\n
\n
\n
\n
- ;\n}\n\nconst NonPremiumReport = ({ showNewTag, headerText, subheaderText, bezelPath, testimonial, items, }: NonPremiumReportProps) => {\n let testimonialElement\n let itemsElement\n\n if (testimonial) {\n testimonialElement = (\n
\n {testimonial.quote}
\n {testimonial.attribution}
\n \n )\n }\n\n if (items?.length) {\n const itemsElements = items.map((item) => (\n \n
\n
{item.title} \n
{item.body}
\n
\n Why Quill Admins Love This Report \n \n {itemsElements}\n
\n \n )\n }\n\n return (\n \n
\n
\n {showNewTag ? NEW : null}\n {headerText} \n {subheaderText}
\n \n \n {itemsElement}\n {testimonialElement}\n
\n
\n
\n
{title || 'You have no reports yet!'} \n
\n {body || 'Once your students have completed their assigned activities, their reports will be displayed here.'}\n
\n
;\n}\n\nconst ActivityScoresTable = ({ data }) => {\n let columns = [\n {\n Header: 'Student',\n accessor: 'students_name',\n resizable: false,\n sortType: sortTableByLastName,\n Cell: ({row}) => {\n const classroomId = row.original.classroom_id;\n const studentId = row.original.student_id;\n const to = {\n pathname: '/teachers/premium_hub/district_activity_scores/student_overview',\n search: `?classroom_id=${classroomId}&student_id=${studentId}`\n }\n\n return \n
\n )\n } else {\n return = ({\n csvData,\n schoolNames,\n switchSchool,\n selectedSchool,\n teacherNames,\n switchTeacher,\n selectedTeacher,\n classroomNames,\n switchClassroom,\n selectedClassroom,\n filteredClassroomsData,\n}) => {\n return (\n \n
These reports are updated nightly.\"\n />\n
\n
\n
\n
\n {content}\n
\n );\n }\n}\n\nfunction getClassroomNames(classrooms, selectedSchool, selectTeacher) {\n let filtered = filterBySchool(classrooms, selectedSchool);\n filtered = filterByTeacher(filtered, selectTeacher);\n const names = filtered.map(row => row.classroom_name);\n return ['All Classrooms', ...Array.from(new Set(names))];\n}\n\nfunction getSchoolNames(classrooms) {\n const names = classrooms.map(row => row.schools_name);\n return ['All Schools', ...Array.from(new Set(names))];\n}\n\nfunction getTeacherNames(classrooms, selectedSchool) {\n const filtered = filterBySchool(classrooms, selectedSchool);\n const names = filtered.map(row => row.teachers_name);\n return ['All Teachers', ...Array.from(new Set(names))];\n}\n\nfunction formatDataForCSV(data) {\n const csvData = [];\n const csvHeader = [\n 'Classroom Name',\n 'Student Name',\n 'School Name',\n 'Teacher Name',\n 'Average Score',\n 'Activity Count',\n 'Time Spent',\n 'Last Active'\n ];\n const csvRow = row => [\n row.classroom_name,\n row.students_name,\n row.schools_name,\n row.teachers_name,\n `${(row.average_score * 100).toString()}%`,\n row.activity_count,\n getTimeSpent(row.timespent),\n row.last_active\n ];\n\n csvData.push(csvHeader);\n data.forEach(row => csvData.push(csvRow(row)));\n\n return csvData;\n}\n\nfunction filterBySchool(classrooms, selected) {\n if (selected !== 'All Schools') {\n return classrooms.filter(row => row.schools_name === selected);\n }\n\n return classrooms;\n}\n\nfunction filterByClass(classrooms, selected) {\n if (selected !== 'All Classrooms') {\n return classrooms.filter(row => row.classroom_name === selected);\n }\n\n return classrooms;\n}\n\nfunction filterByTeacher(classrooms, selected) {\n if (selected !== 'All Teachers') {\n return classrooms.filter(row => row.teachers_name === selected);\n }\n\n return classrooms;\n}\n\nfunction filterClassrooms(\n classrooms,\n selectedSchool,\n selectedTeacher,\n selectedClassroom\n) {\n let filtered = filterBySchool(classrooms, selectedSchool);\n filtered = filterByTeacher(filtered, selectedTeacher);\n filtered = filterByClass(filtered, selectedClassroom);\n\n return filtered;\n}\n\nconst mapStateToProps = (state) => {\n const filteredClassroomsData = filterClassrooms(\n state.district_activity_scores.classroomsData,\n state.district_activity_scores.selectedSchool,\n state.district_activity_scores.selectedTeacher,\n state.district_activity_scores.selectedClassroom\n );\n\n const teacherNames = getTeacherNames(\n state.district_activity_scores.classroomsData,\n state.district_activity_scores.selectedSchool\n );\n\n const classroomNames = getClassroomNames(\n state.district_activity_scores.classroomsData,\n state.district_activity_scores.selectedSchool,\n state.district_activity_scores.selectedTeacher,\n );\n\n return {\n loading: state.district_activity_scores.loading,\n errors: state.district_activity_scores.errors,\n selectedClassroom: state.district_activity_scores.selectedClassroom,\n selectedSchool: state.district_activity_scores.selectedSchool,\n selectedTeacher: state.district_activity_scores.selectedTeacher,\n classroomsData: state.district_activity_scores.classroomsData,\n filteredClassroomsData,\n csvData: formatDataForCSV(filteredClassroomsData),\n classroomNames,\n teacherNames,\n schoolNames: getSchoolNames(state.district_activity_scores.classroomsData),\n };\n};\nconst mapDispatchToProps = dispatch => ({\n switchSchool: school => dispatch(switchSchool(school)),\n switchClassroom: classroom => dispatch(switchClassroom(classroom)),\n switchTeacher: teacher => dispatch(switchTeacher(teacher)),\n getDistrictActivityScores: () => dispatch(getDistrictActivityScores()),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DistrictActivityScores);\n","import Pusher from 'pusher-js';\n\nimport { requestGet, } from '../modules/request/index';\n\nexport const recieveDistrictConceptReports = (body) => {\n return { type: 'RECIEVE_DISTRICT_CONCEPT_REPORTS', body, };\n};\n\nexport const switchClassroom = (classroom) => {\n return { type: 'SWITCH_CLASSROOM', classroom, };\n};\n\nexport const switchSchool = (school) => {\n return { type: 'SWITCH_SCHOOL', school, };\n};\n\nexport const switchTeacher = (teacher) => {\n return { type: 'SWITCH_TEACHER', teacher, };\n}\n\nexport const initializePusherForDistrictConceptReports = (adminId) => {\n return (dispatch) => {\n if (window.postbuildEnv.RAILS_ENV === 'development') {\n Pusher.logToConsole = true;\n }\n const pusher = new Pusher(window.postbuildEnv.PUSHER_KEY, { cluster: window.postbuildEnv.PUSHER_CLUSTER });\n const channel = pusher.subscribe(adminId);\n channel.bind('district-concept-reports-found', () => {\n dispatch(getDistrictConceptReports())\n });\n }\n}\n\nexport const getDistrictConceptReports = () => {\n return (dispatch) => {\n requestGet(\n `${window.postbuildEnv.DEFAULT_URL}/api/v1/progress_reports/district_concept_reports`,\n (body) => {\n if (body.id) {\n dispatch(initializePusherForDistrictConceptReports(String(body.id)))\n } else {\n dispatch(recieveDistrictConceptReports(body))\n }\n }\n );\n }\n};\n","import React from 'react';\n\nimport { sortTableByLastName } from '../../../modules/sortingMethods';\nimport { ReactTable, } from '../../Shared';\nimport EmptyStateForReport from '../../Teacher/components/progress_reports/empty_state_for_report';\n\nconst ConceptReportsTable = ({ data, }) => {\n const columns = [\n {\n Header: 'Student',\n accessor: 'student_name',\n resizable: false,\n sortType: sortTableByLastName,\n }, {\n Header: 'Teacher',\n accessor: 'teacher_name',\n resizable: false,\n sortType: sortTableByLastName,\n }, {\n Header: 'Classroom',\n accessor: 'classroom_name',\n resizable: false,\n }, {\n Header: 'School',\n accessor: 'school_name',\n resizable: false,\n }, {\n Header: 'Correct',\n accessor: 'correct',\n resizable: false,\n Cell: ({row}) => Number(row.original.correct),\n }, {\n Header: 'Incorrect',\n accessor: 'incorrect',\n resizable: false,\n Cell: ({row}) => Number(row.original.incorrect),\n }, {\n Header: 'Success Rate',\n accessor: 'percentage',\n resizable: false,\n Cell: ({row}) => `${row.original.percentage}%`,\n }\n ];\n\n if (data && data.length) {\n return (\n \n
\n );\n }\n return \n
These reports are updated nightly.\"\n />\n
\n
\n
\n
\n {content}\n
\n );\n }\n}\n\nfunction getClassroomNames(classrooms, selectedSchool, selectTeacher) {\n let filtered = filterBySchool(classrooms, selectedSchool);\n filtered = filterByTeacher(filtered, selectTeacher);\n const names = filtered.map(row => row.classroom_name);\n return ['All Classrooms', ...Array.from(new Set(names))];\n}\n\nfunction getSchoolNames(classrooms) {\n const names = classrooms.map(row => row.school_name);\n return ['All Schools', ...Array.from(new Set(names))];\n}\n\nfunction getTeacherNames(classrooms, selectedSchool) {\n const filtered = filterBySchool(classrooms, selectedSchool);\n const names = filtered.map(row => row.teacher_name);\n return ['All Teachers', ...Array.from(new Set(names))];\n}\n\nfunction formatDataForCSV(data) {\n const csvData = [];\n const csvHeader = [\n 'Student',\n 'Teacher',\n 'Classroom',\n 'School',\n 'Correct',\n 'Incorrect',\n 'Success Rate'\n ];\n const csvRow = row => [\n row.student_name,\n row.teacher_name,\n row.classroom_name,\n row.school_name,\n row.correct,\n row.incorrect,\n row.percentage\n ];\n\n csvData.push(csvHeader);\n data.forEach(row => csvData.push(csvRow(row)));\n\n return csvData;\n}\n\nfunction filterBySchool(classrooms, selected) {\n if (selected !== 'All Schools') {\n return classrooms.filter(row => row.school_name === selected);\n }\n\n return classrooms;\n}\n\nfunction filterByClass(classrooms, selected) {\n if (selected !== 'All Classrooms') {\n return classrooms.filter(row => row.classroom_name === selected);\n }\n\n return classrooms;\n}\n\nfunction filterByTeacher(classrooms, selected) {\n if (selected !== 'All Teachers') {\n return classrooms.filter(row => row.teacher_name === selected);\n }\n\n return classrooms;\n}\n\nfunction filterClassrooms(\n classrooms,\n selectedSchool,\n selectedTeacher,\n selectedClassroom\n) {\n let filtered = filterBySchool(classrooms, selectedSchool);\n filtered = filterByTeacher(filtered, selectedTeacher);\n filtered = filterByClass(filtered, selectedClassroom);\n\n return filtered;\n}\n\nconst mapStateToProps = (state) => {\n const filteredConceptReportsData = filterClassrooms(\n state.district_concept_reports.conceptReportsData,\n state.district_concept_reports.selectedSchool,\n state.district_concept_reports.selectedTeacher,\n state.district_concept_reports.selectedClassroom\n );\n\n const teacherNames = getTeacherNames(\n state.district_concept_reports.conceptReportsData,\n state.district_concept_reports.selectedSchool\n );\n\n const classroomNames = getClassroomNames(\n state.district_concept_reports.conceptReportsData,\n state.district_concept_reports.selectedSchool,\n state.district_concept_reports.selectedTeacher,\n );\n\n return {\n loading: state.district_concept_reports.loading,\n errors: state.district_concept_reports.errors,\n selectedClassroom: state.district_concept_reports.selectedClassroom,\n selectedSchool: state.district_concept_reports.selectedSchool,\n selectedTeacher: state.district_concept_reports.selectedTeacher,\n conceptReportsData: state.district_concept_reports.conceptReportsData,\n filteredConceptReportsData,\n csvData: formatDataForCSV(filteredConceptReportsData),\n classroomNames,\n teacherNames,\n schoolNames: getSchoolNames(state.district_concept_reports.conceptReportsData),\n };\n};\nconst mapDispatchToProps = dispatch => ({\n switchSchool: school => dispatch(switchSchool(school)),\n switchClassroom: classroom => dispatch(switchClassroom(classroom)),\n switchTeacher: teacher => dispatch(switchTeacher(teacher)),\n getDistrictConceptReports: () => dispatch(getDistrictConceptReports()),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DistrictConceptReports);\n","import Pusher from 'pusher-js';\n\nimport { requestGet, } from '../modules/request/index';\n\nexport const recieveDistrictStandardsReports = (body) => {\n return { type: 'RECIEVE_DISTRICT_STANDARDS_REPORTS', body, };\n};\n\nexport const switchClassroom = (classroom) => {\n return { type: 'SWITCH_CLASSROOM', classroom, };\n};\n\nexport const switchSchool = (school) => {\n return { type: 'SWITCH_SCHOOL', school, };\n};\n\nexport const switchTeacher = (teacher) => {\n return { type: 'SWITCH_TEACHER', teacher, };\n}\n\nexport const initializePusherForDistrictStandardsReports = (adminId) => {\n return (dispatch) => {\n if (window.postbuildEnv.RAILS_ENV === 'development') {\n Pusher.logToConsole = true;\n }\n const pusher = new Pusher(window.postbuildEnv.PUSHER_KEY, { cluster: window.postbuildEnv.PUSHER_CLUSTER });\n const channel = pusher.subscribe(adminId);\n channel.bind('district-standards-reports-found', () => {\n dispatch(getDistrictStandardsReports())\n });\n }\n}\n\nexport const getDistrictStandardsReports = (isFreemiumView) => {\n const freemiumParam = isFreemiumView ? '?freemium=true' : ''\n return (dispatch) => {\n requestGet(\n `${window.postbuildEnv.DEFAULT_URL}/api/v1/progress_reports/district_standards_reports${freemiumParam}`,\n (body) => {\n if (body.id && (window.postbuildEnv.RAILS_ENV === 'production')) {\n dispatch(initializePusherForDistrictStandardsReports(String(body.id)))\n } else {\n dispatch(recieveDistrictStandardsReports(body))\n }\n }\n );\n }\n};\n","import * as React from 'react';\n\nimport { ReactTable, } from '../../Shared/index';\nimport EmptyStateForReport from '../../Teacher/components/progress_reports/empty_state_for_report';\nimport { getTimeSpent } from '../../Teacher/helpers/studentReports';\n\nexport const StandardsReportsTable = ({ data, isFreemiumView }) => {\n\n const columns = [\n {\n Header: 'Standard level',\n accessor: 'standard_level_name',\n maxWidth: 160\n }, {\n Header: 'Standard name',\n accessor: 'name',\n Cell: ({ row }) => {row.original.name} ,\n }, {\n Header: 'Students',\n accessor: 'total_student_count',\n resizable: false,\n maxWidth: 130\n }, {\n Header: 'Proficient',\n accessor: 'proficient_count',\n resizable: false,\n maxWidth: 130,\n Cell: ({row}) => `${row.original.proficient_count } of ${ row.original.total_student_count}`,\n }, {\n Header: 'Activities',\n accessor: 'total_activity_count',\n resizable: false,\n maxWidth: 160,\n Cell: ({row}) => Number(row.original.total_activity_count),\n }, {\n Header: \"Time spent\",\n accessor: 'timespent',\n Cell: ({row}) => {\n const value = row.original.timespent;\n return (getTimeSpent(value))\n },\n resizable: false,\n maxWidth: 130\n }\n ];\n\n if (data && data.length) {\n const defaultSortedRule = isFreemiumView ? [{ id: 'total_activity_count', desc: true, }] : [{ id: 'last_active', desc: true, }]\n return (\n \n
\n );\n }\n return \n
\n )\n};\n\nexport default StandardsReports;\n","import React from 'react';\nimport { connect } from 'react-redux';\n\nimport NonPremiumReport from './NonPremiumReport'\n\nimport { getDistrictStandardsReports } from '../../../actions/district_standards_reports';\nimport LoadingSpinner from '../../Teacher/components/shared/loading_indicator';\nimport { getTimeSpent } from '../../Teacher/helpers/studentReports';\nimport StandardsReports from '../components/standardsReports';\nimport { FULL, LIMITED, } from '../shared';\n\nclass DistrictStandardsReports extends React.Component {\n componentDidMount() {\n const { getDistrictStandardsReports, isFreemiumView } = this.props;\n getDistrictStandardsReports(isFreemiumView);\n }\n\n render() {\n const { loading, accessType, isFreemiumView, standardsReportsData } = this.props;\n const showFreemiumReport = accessType === LIMITED && isFreemiumView\n const dataPresent = standardsReportsData && standardsReportsData.length\n\n let content = \n {content}\n
\n );\n }\n}\n\nfunction formatDataForCSV(data) {\n const csvData = [];\n const csvHeader = [\n 'Standard Level',\n 'Standard Name',\n 'Students',\n 'Proficient',\n 'Activities',\n 'Time Spent'\n ];\n const csvRow = row => [\n row.standard_level_name,\n row.name,\n row.total_student_count,\n row.proficient_count,\n row.total_activity_count,\n getTimeSpent(row.timespent),\n ];\n\n csvData.push(csvHeader);\n data && data.forEach(row => csvData.push(csvRow(row)));\n\n return csvData;\n}\n\nconst mapStateToProps = (state) => {\n const filteredStandardsReportsData = state.district_standards_reports.standardsReportsData\n\n return {\n loading: state.district_standards_reports.loading,\n errors: state.district_standards_reports.errors,\n standardsReportsData: state.district_standards_reports.standardsReportsData,\n filteredStandardsReportsData,\n csvData: formatDataForCSV(filteredStandardsReportsData)\n };\n};\nconst mapDispatchToProps = dispatch => ({\n getDistrictStandardsReports: (isFreemiumView) => dispatch(getDistrictStandardsReports(isFreemiumView)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DistrictStandardsReports);\n","import * as React from 'react'\n\nimport { School, } from './shared'\n\nimport { DataTable } from '../../../Shared/index';\n\ninterface SchoolSelectorProps {\n schools: School[];\n setSelectedSchoolIds: (schoolIds) => void;\n selectedSchoolIds: number[];\n}\n\nconst SchoolSelector = ({ schools, setSelectedSchoolIds, selectedSchoolIds }: SchoolSelectorProps) => {\n const checkRow = (id) => {\n if (selectedSchoolIds.includes(id)) { return }\n\n setSelectedSchoolIds([...selectedSchoolIds, id]);\n };\n\n const uncheckRow = (id) => {\n if (!selectedSchoolIds.includes(id)) { return }\n\n setSelectedSchoolIds(selectedSchoolIds.filter((selectedSchoolId) => selectedSchoolId !== id));\n };\n\n const checkAllRows = () => {\n setSelectedSchoolIds(schools.map((school) => school.id));\n };\n\n const uncheckAllRows = () => {\n setSelectedSchoolIds([]);\n };\n\n const selectedSchools = schools.map((school) => {\n school.checked = selectedSchoolIds.includes(school.id);\n return school\n });\n\n const headers = [{ name: \"Schools\", attribute: \"name\", width: \"356px\", rowSectionClassName: 'name', headerClassName: 'name' }]\n\n return (\n \n\ninterface CanvasIntegrationFormProps {\n schools: School[];\n success: () => void;\n existingIntegration?: CanvasInstance;\n close?: () => void;\n}\n\nexport const CANVAS_INTEGRATIONS_PATH = '/canvas_instances'\n\nconst isValidURL = (url: string): boolean => {\n try {\n const parsedURL = new URL(url);\n return ['http:', 'https:'].includes(parsedURL.protocol);\n } catch (error) {\n return false;\n }\n}\n\nconst CanvasIntegrationForm = ({ schools, existingIntegration=null, close=null, success, }: CanvasIntegrationFormProps) => {\n const [clientId, setClientId] = React.useState(existingIntegration?.client_id || '')\n const [clientSecret, setClientSecret] = React.useState(existingIntegration?.client_secret || '')\n const [instanceUrl, setInstanceUrl] = React.useState(existingIntegration?.url || '')\n const [selectedSchoolIds, setSelectedSchoolIds] = React.useState(existingIntegration?.school_ids || [])\n\n function validInput() {\n return Boolean(\n instanceUrl.length\n && isValidURL(instanceUrl)\n && clientId.length\n && clientSecret.length\n && selectedSchoolIds.length\n )\n }\n\n function closeOrReset() {\n if (close) {\n close()\n } else {\n setClientId('')\n setClientSecret('')\n setInstanceUrl('')\n setSelectedSchoolIds([])\n }\n }\n\n function handleChangeInstanceUrl(e: InputElement) { setInstanceUrl(e.target.value) }\n function handleChangeClientId(e: InputElement) { setClientId(e.target.value) }\n function handleChangeClientSecret(e: InputElement) { setClientSecret(e.target.value) }\n\n function handleDelete() {\n return requestDelete(\n `${CANVAS_INTEGRATIONS_PATH}/${existingIntegration.id}`,\n {},\n () => {\n closeOrReset()\n success()\n }\n )\n }\n\n function handleSubmit(e) {\n e.preventDefault()\n\n if (!validInput()) { return }\n\n const params = {\n canvas_config: {\n client_id: clientId,\n client_secret: clientSecret\n },\n canvas_instance: {\n url: instanceUrl\n },\n canvas_instance_schools: {\n school_ids: selectedSchoolIds\n }\n }\n\n if (existingIntegration) {\n return requestPut(\n `${CANVAS_INTEGRATIONS_PATH}/${existingIntegration.id}`,\n params,\n () => {\n closeOrReset()\n success()\n }\n )\n }\n\n return requestPost(\n CANVAS_INTEGRATIONS_PATH,\n params,\n () => {\n closeOrReset()\n success()\n }\n )\n }\n\n let deleteButtonOrEmptySpan = \n Delete\n \n )\n }\n\n const formName = `${existingIntegration ? 'Edit' : 'New'} Canvas Integration`\n\n return (\n \n )\n}\n\nexport default CanvasIntegrationForm\n","import * as React from 'react'\n\nimport CanvasIntegrationForm from './canvasIntegrationForm'\nimport { School, CanvasInstance, } from './shared'\n\ninterface CanvasIntegrationModalProps {\n schools: School[];\n success: () => void;\n existingIntegration?: CanvasInstance;\n close?: () => void;\n}\n\nconst CanvasIntegrationModal = (props: CanvasIntegrationModalProps) => {\n return (\n \n )\n}\n\nexport default CanvasIntegrationModal\n","import * as React from 'react'\nimport CanvasIntegrationModal from './canvasIntegrationModal'\nimport { School, CanvasInstance, } from './shared'\n\ninterface CanvasIntegrationInstanceProps {\n schools: School[];\n getCanvasIntegrations: () => void;\n canvasIntegration: CanvasInstance;\n}\n\nconst CanvasIntegrationInstance = ({ schools, getCanvasIntegrations, canvasIntegration, }: CanvasIntegrationInstanceProps) => {\n const [showEditModal, setShowEditModal] = React.useState(false)\n\n function openModal() { setShowEditModal(true) }\n function closeModal() { setShowEditModal(false) }\n\n function handleEditSubmission() {\n getCanvasIntegrations()\n closeModal()\n }\n\n return (\n \n {showEditModal && (\n \n \n
{canvasIntegration.url} \n Edit \n \n {\n canvasIntegration.school_names.map((schoolName, schoolIndex) => (\n \n
\n
{schoolName} \n
\n \n )\n}\n\nexport default CanvasIntegrationInstance\n","import * as React from 'react'\n\nimport { baseIntegrationImgSrc, } from '../shared'\n\nexport const lightbulbSrc = `${baseIntegrationImgSrc}/lightbulb.svg`\n\nconst IntegrationTip = () => (\n \n
\n
Integration Tip \n
Start the school year right by choosing a single integration. Changing mid-year can cause rostering challenges and may take up more of your valuable time, so decide upfront for a better experience.
\n
\n
\n
\n {showNewModal && (\n \n )\n }\n\n if (![FULL, LOADING].includes(accessType) && !user.school_linked_to_canvas) {\n return (\n \n
\n
\n
Unlock Canvas with School or District Premium \n
Looking to streamline your school’s teaching process with Quill’s Canvas integration? Subscribe to School or District Premium to allow teachers at your school or district to:
\n
\n {circleCheckImg}Seamlessly import their Canvas rosters. \n {circleCheckImg}Automatically create and sync Canvas student accounts. \n {circleCheckImg}Access a host of other premium benefits, including priority technical support, enhanced reporting, and assistance from our professional learning team. \n \n
\n
\n
\n
\n
\n )\n }\n\n if (!canvasIntegrations.length) {\n return (\n \n {renderModal()}\n
\n
\n
Get started with Canvas \n
Looking to streamline your school’s teaching process with Quill’s Canvas integration? Great news! Your subscription gives you access to the integration. The next step is to set it up. This will allow teachers at your school or district to:
\n
\n {circleCheckImg}Seamlessly import their Canvas rosters. \n {circleCheckImg}Automatically create and sync Canvas student accounts. \n \n
\n
\n
\n
\n {renderModal()}\n {canvasIntegrationElements}\n
\n Add New Canvas Integration\n \n Setup guide \n \n
\n
\n
Streamline teaching with Google Classroom \n
Make teaching at your school even more effective with our seamless Google Classroom integration. With this integration, teachers at your school or district can:
\n
\n {circleCheckImg}Seamlessly import Google Classroom rosters. \n {circleCheckImg}Automatically create and sync Google Classroom student accounts. \n {circleCheckImg}Share assignments directly to Google Classroom. \n \n
\n
\n
\n
\n
\n
\n
Streamline teaching with Clever \n
Make teaching at your school even more effective with our seamless Clever integration. With this integration, teachers at your school or district can:
\n
\n {circleCheckImg}Seamlessly import Clever rosters. \n {circleCheckImg}Automatically create and sync Clever student accounts. \n \n
{accessType === FULL ? 'You can also access Clever Secure Sync as part of your subscription. This makes the integration even more powerful and easy to configure.' : 'You can also subscribe to School or District Premium to access Clever Secure Sync. This makes the integration even more powerful and easy to configure.'}
\n
\n
\n
\n
\n
\n
\n \n
(true);\n const [showSchool, setShowSchool] = React.useState(true);\n const [showGrade, setShowGrade] = React.useState(true);\n const [showTeacher, setShowTeacher] = React.useState(true);\n const [showClass, setShowClass] = React.useState(true);\n const [showCompletedDate, setShowCompletedDate] = React.useState(true);\n const [showActivityPack, setShowActivityPack] = React.useState(true);\n const [showActivity, setShowActivity] = React.useState(true);\n const [showTool, setShowTool] = React.useState(true);\n const [showScore, setShowScore] = React.useState(true);\n const [showStandard, setShowStandard] = React.useState(true);\n const [showTimeSpent, setShowTimeSpent] = React.useState(true);\n const [loading, setLoading] = React.useState(true);\n const [downloadButtonBusy, setDownloadButtonBusy] = React.useState(false);\n const [showSnackbar, setShowSnackbar] = React.useState(false);\n const [data, setData] = React.useState(null);\n const [pusherMessage, setPusherMessage] = React.useState(null)\n const [customTimeframeStartString, setCustomTimeframeStartString] = React.useState(null)\n const [customTimeframeEndString, setCustomTimeframeEndString] = React.useState(null)\n\n useSnackbarMonitor(showSnackbar, setShowSnackbar, defaultSnackbarTimeout)\n\n const fields = {\n [STUDENT_NAME]: {\n dataTableField: { name: STUDENT_NAME, attribute: \"student_name\", width: STANDARD_WIDTH },\n checked: true\n },\n [STUDENT_EMAIL]: {\n dataTableField: { name: STUDENT_EMAIL, attribute: \"student_email\", width: STANDARD_WIDTH },\n setterFunction: setShowStudentEmail,\n checked: showStudentEmail\n },\n [COMPLETED_DATE]: {\n dataTableField: { name: COMPLETED_DATE, attribute: \"completed_at\", width: STANDARD_WIDTH },\n setterFunction: setShowCompletedDate,\n checked: showCompletedDate\n },\n [ACTIVITY]: {\n dataTableField: { name: ACTIVITY, attribute: \"activity_name\", width: STANDARD_WIDTH },\n setterFunction: setShowActivity,\n checked: showActivity\n },\n [ACTIVITY_PACK]: {\n dataTableField: { name: ACTIVITY_PACK, attribute: \"activity_pack\", width: STANDARD_WIDTH },\n setterFunction: setShowActivityPack,\n checked: showActivityPack\n },\n [SCORE]: {\n dataTableField: { name: SCORE, attribute: \"score\", width: STANDARD_WIDTH },\n setterFunction: setShowScore,\n checked: showScore\n },\n [TIME_SPENT]: {\n dataTableField: { name: `${TIME_SPENT} (Mins)`, attribute: \"timespent\", width: STANDARD_WIDTH },\n setterFunction: setShowTimeSpent,\n checked: showTimeSpent\n },\n [STANDARD]: {\n dataTableField: { name: STANDARD, attribute: \"standard\", width: STANDARD_WIDTH },\n setterFunction: setShowStandard,\n checked: showStandard\n },\n [TOOL]: {\n dataTableField: { name: TOOL, attribute: \"tool\", width: STANDARD_WIDTH },\n setterFunction: setShowTool,\n checked: showTool\n },\n [SCHOOL]: {\n dataTableField: { name: SCHOOL, attribute: \"school_name\", width: STANDARD_WIDTH },\n setterFunction: setShowSchool,\n checked: showSchool\n },\n [GRADE]: {\n dataTableField: { name: GRADE, attribute: \"classroom_grade\", width: STANDARD_WIDTH },\n setterFunction: setShowGrade,\n checked: showGrade\n },\n [TEACHER]: {\n dataTableField: { name: TEACHER, attribute: \"teacher_name\", width: STANDARD_WIDTH },\n setterFunction: setShowTeacher,\n checked: showTeacher\n },\n [CLASS]: {\n dataTableField: { name: CLASS, attribute: \"classroom_name\", width: STANDARD_WIDTH },\n setterFunction: setShowClass,\n checked: showClass\n },\n };\n\n React.useEffect(() => {\n initializePusher()\n }, [pusherChannel])\n\n React.useEffect(() => {\n getData()\n }, [searchCount])\n\n React.useEffect(() => {\n if (!customTimeframeStart) return\n\n setCustomTimeframeStartString(customTimeframeStart.toISOString())\n }, [customTimeframeStart])\n\n React.useEffect(() => {\n if (!customTimeframeEnd) return setCustomTimeframeEndString(null)\n\n setCustomTimeframeEndString(customTimeframeEnd.toISOString())\n }, [customTimeframeEnd])\n\n React.useEffect(() => {\n if (!pusherMessage) return\n\n if (filtersMatchHash(pusherMessage)) getData()\n }, [pusherMessage])\n\n function getData() {\n const searchParams = {\n query: queryKey,\n timeframe: selectedTimeframe,\n timeframe_custom_start: customTimeframeStart,\n timeframe_custom_end: customTimeframeEnd,\n school_ids: selectedSchoolIds,\n teacher_ids: selectedTeacherIds,\n classroom_ids: selectedClassroomIds,\n grades: selectedGrades\n }\n\n requestPost('/snapshots/data_export', searchParams, (body) => {\n if (!body.hasOwnProperty('results')) {\n setLoading(true)\n } else {\n const { results, } = body\n // We consider `null` to be a lack of data, so if the result is `[]` we need to explicitly `setData(null)`\n const data = results.length > 0 ? results : null\n const formattedData = formatData(data)\n setData(formattedData)\n setLoading(false)\n }\n })\n }\n\n function createCsvReportDownload() {\n const buttonDisableTime = 2000\n const requestParams = {\n query: 'create_csv_report_download',\n timeframe: selectedTimeframe,\n timeframe_custom_start: customTimeframeStart,\n timeframe_custom_end: customTimeframeEnd,\n school_ids: selectedSchoolIds,\n teacher_ids: selectedTeacherIds,\n classroom_ids: selectedClassroomIds,\n grades: selectedGrades,\n headers_to_display: getHeaders().map(header => header.attribute)\n }\n setDownloadButtonBusy(true)\n\n requestPost('/snapshots/create_csv_report_download', requestParams, (body) => {\n setShowSnackbar(true)\n setTimeout(() => { setDownloadButtonBusy(false) }, buttonDisableTime);\n })\n }\n\n function filtersMatchHash(hashMessage) {\n const filterTarget = [].concat(\n queryKey,\n selectedTimeframe,\n customTimeframeStartString,\n customTimeframeEndString,\n selectedSchoolIds,\n selectedGrades,\n selectedTeacherIds,\n selectedClassroomIds\n )\n\n const filterHash = hashPayload(filterTarget)\n\n return hashMessage == filterHash\n }\n\n function initializePusher() {\n pusherChannel?.bind(PUSHER_EVENT_KEY, (body) => {\n const { message, } = body\n\n setPusherMessage(message)\n });\n };\n\n function getTimeSpentInMinutes(seconds: number) {\n if (!seconds) {\n return 'N/A';\n }\n if (seconds < 60) {\n return `<1`;\n }\n if (seconds >= 60 && seconds < 120) {\n return '1';\n }\n return `${Math.floor((seconds % 3600) / 60)}`;\n }\n\n function formatData(data) {\n if (!data) { return null }\n\n return data.map((entry, index) => {\n const formattedEntry = { ...entry }\n const { score, tool } = entry\n let percentage\n\n if (NON_PERCENTAGE_TOOLS.includes(tool)) {\n percentage = COMPLETED\n } else if ((isNaN(score) || score < 0) && score !== 0) {\n percentage = NOT_APPLICABLE\n } else {\n percentage = Math.round(parseFloat(score) * 100) + '%'\n }\n\n formattedEntry.id = index\n formattedEntry.completed_at = moment(entry.completed_at.substring(0,10)).format(\"MM/DD/YYYY\");\n formattedEntry.timespent = getTimeSpentInMinutes(entry.timespent)\n formattedEntry.score = percentage\n return formattedEntry\n })\n }\n\n function toggleCheckbox(e) {\n e.preventDefault();\n const fieldLabel = e.currentTarget.id;\n const checked = fields[fieldLabel].checked;\n const setterFunction = fields[fieldLabel].setterFunction\n setterFunction(!checked);\n }\n\n function renderCheckboxes() {\n return Object.keys(fields).map((fieldLabel, i) => {\n // skip Student Name because we want this field to always be present\n if (i === 0) { return }\n\n let checkbox = (\n \n {fieldLabel} \n
\n )\n if (fields[fieldLabel].checked) {\n checkbox = (\n \n
\n \n
{fieldLabel} \n
\n \n
\n
\n
\n
\n {downloadButtonBusy ? Download \n \n
\n
\n
\n \n
\n
\n Fields \n \n {renderCheckboxes()}\n
\n \n
\n {loading &&
}\n {!loading &&
}\n
\n )\n}\n\nexport default DataExportTableAndFields;\n","import * as React from 'react';\n\nimport { Spinner } from '../../Shared/index';\nimport DataExportTableAndFields from '../components/dataExportTableAndFields';\nimport { FULL, mapItemsIfNotAll, restrictedPage } from '../shared';\n\nexport const DataExportContainer = ({\n accessType,\n loadingFilters,\n customStartDate,\n customEndDate,\n pusherChannel,\n searchCount,\n selectedClassrooms,\n availableClassrooms,\n selectedGrades,\n availableGrades,\n selectedSchools,\n selectedTeachers,\n availableTeachers,\n selectedTimeframe,\n openMobileFilterMenu\n}) => {\n\n if (loadingFilters) {\n return \n school.id)}\n selectedTeacherIds={mapItemsIfNotAll(selectedTeachers, availableTeachers)}\n selectedTimeframe={selectedTimeframe.value}\n />\n \n )\n}\n\nexport default DataExportContainer;\n","import * as React from 'react'\n\nimport { requestPost, } from './../../../../modules/request'\nimport { ButtonLoadingSpinner, } from '../../../Shared/index'\nimport { hashPayload, selectionsEqual } from '../../shared'\n\nconst expandImg = ;\n queryKey: string;\n searchCount: number;\n selectedGrades: Array;\n selectedSchoolIds: Array;\n selectedTeacherIds: Array;\n selectedClassroomIds: Array;\n selectedTimeframe: string;\n customTimeframeStart?: any;\n customTimeframeEnd?: any;\n pusherChannel?: any;\n}\n\nconst PUSHER_EVENT_KEY = 'admin-snapshot-top-x-cached'\nconst RETRY_TIMEOUT = 20000\n\nconst RankingModal = ({ label, closeModal, headers, data, }) => {\n return (\n \n
\n
\n
{label} \n
\n
\n Close \n
\n
\n
{header} ))\n\n const dataRowsForTable = data ? data.slice(0, numberOfRows) : [{}, {}, {}]\n\n const rowElements = dataRowsForTable.map((row, i) => {\n const { value, count, } = row\n\n return (\n \n {value || '—'} \n {value ? count?.toLocaleString() : '—'} \n \n )\n })\n\n return (\n \n \n \n {headerElements}\n \n \n \n {rowElements}\n \n
\n )\n}\n\nconst SnapshotRanking = ({ label, queryKey, headers, searchCount, selectedGrades, selectedSchoolIds, selectedTeacherIds, selectedClassroomIds, selectedTimeframe, customTimeframeStart, customTimeframeEnd, passedData, pusherChannel, }: SnapshotRankingProps) => {\n const [data, setData] = React.useState(null)\n const [loading, setLoading] = React.useState(false)\n const [retryTimeout, setRetryTimeout] = React.useState(null)\n const [showModal, setShowModal] = React.useState(false)\n const [pusherMessage, setPusherMessage] = React.useState(null)\n const [customTimeframeStartString, setCustomTimeframeStartString] = React.useState(null)\n const [customTimeframeEndString, setCustomTimeframeEndString] = React.useState(null)\n\n React.useEffect(() => {\n initializePusher()\n }, [pusherChannel, searchCount])\n\n React.useEffect(() => {\n resetToDefault()\n\n getData()\n }, [searchCount])\n\n React.useEffect(() => {\n if (!customTimeframeStart) return\n\n setCustomTimeframeStartString(customTimeframeStart.toISOString())\n }, [customTimeframeStart])\n\n React.useEffect(() => {\n if (!customTimeframeEnd) return setCustomTimeframeEndString(null)\n\n setCustomTimeframeEndString(customTimeframeEnd.toISOString())\n }, [customTimeframeEnd])\n\n React.useEffect(() => {\n if (!pusherMessage) return\n\n if (filtersMatchHash(pusherMessage)) getData()\n }, [pusherMessage])\n\n function resetToDefault() {\n setData(passedData || null)\n }\n\n function getData() {\n const searchParams = {\n query: queryKey,\n timeframe: selectedTimeframe,\n timeframe_custom_start: customTimeframeStart,\n timeframe_custom_end: customTimeframeEnd,\n school_ids: selectedSchoolIds,\n teacher_ids: selectedTeacherIds,\n classroom_ids: selectedClassroomIds,\n grades: selectedGrades\n }\n\n requestPost(`/snapshots/top_x`, searchParams, (body) => {\n if (!body.hasOwnProperty('results')) {\n setRetryTimeout(setTimeout(getData, RETRY_TIMEOUT))\n setLoading(true)\n } else {\n clearTimeout(retryTimeout)\n\n const { results, } = body\n // We consider `null` to be a lack of data, so if the result is `[]` we need to explicitly `setData(null)`\n const data = results.length > 0 ? results : null\n setData(data)\n\n setLoading(false)\n }\n })\n }\n\n function filtersMatchHash(hashMessage) {\n const filterTarget = [].concat(\n queryKey,\n selectedTimeframe,\n customTimeframeStartString,\n customTimeframeEndString,\n selectedSchoolIds,\n selectedGrades,\n selectedTeacherIds,\n selectedClassroomIds\n )\n\n const filterHash = hashPayload(filterTarget)\n\n return hashMessage == filterHash\n }\n\n function initializePusher() {\n pusherChannel?.bind(`${PUSHER_EVENT_KEY}:${queryKey}`, (body) => {\n const { message, } = body\n setPusherMessage(message)\n });\n };\n\n function openModal() {\n if (!data) { return }\n setShowModal(true)\n }\n\n function closeModal() { setShowModal(false) }\n\n let className = \"snapshot-item snapshot-ranking\"\n className += data ? ' has-data' : ' no-data'\n\n // disabling these rules for the div container because the behavior is handled by the button for keyboard users\n /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n return (\n \n {showModal && (\n \n
\n
{label} \n {loading &&
}\n {data &&
{expandImg} }\n
\n
\n
\n )\n}\n/* eslint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n\nexport default SnapshotRanking\n","import * as React from 'react'\n\nconst newTabSrc = `${window.postbuildEnv.CDN_URL}/images/pages/administrator/new_tab.svg`\n\nconst SnapshotFeedback = () => {\n return (\n \n \n
We’d love your feedback \n
\n
Looking for a specific metric? Visit our feedback forum to make a request and vote on ideas.
\n \n )\n}\n\nexport default SnapshotFeedback\n","import * as React from 'react'\n\nimport SnapshotCount from './snapshotCount'\nimport SnapshotRanking from './snapshotRanking'\nimport SnapshotFeedback from './snapshotFeedback'\nimport { COUNT, RANKING, FEEDBACK, SECTION_NAME_TO_ICON_URL, } from './shared'\n\nconst SnapshotSection = ({ active, name, className, itemGroupings, searchCount, selectedGrades, selectedSchoolIds, selectedClassroomIds, selectedTeacherIds, selectedTimeframe, customTimeframeStart, customTimeframeEnd, pusherChannel, }) => {\n const snapshotItemGroupings = itemGroupings.map(grouping => {\n const snapshotItems = grouping.items.map(item => {\n const { label, size, type, queryKey, headers, singularLabel, } = item\n const sharedProps = {\n key: queryKey,\n label,\n queryKey,\n searchCount,\n selectedGrades,\n selectedSchoolIds,\n selectedTeacherIds,\n selectedClassroomIds,\n selectedTimeframe,\n customTimeframeEnd,\n customTimeframeStart,\n pusherChannel,\n }\n\n if (type === COUNT) {\n return (\n \n {snapshotItems}\n
\n )\n })\n\n return (\n \n {!active && \n {name} \n }\n \n
\n {snapshotItemGroupings}\n
\n
\n )\n}\n\nexport default SnapshotSection\n","import * as React from 'react'\n\nimport { DropdownInput } from '../../../Shared/index';\n\nconst MONTHLY = 'Monthly';\nconst WEEKLY = 'Weekly';\nconst ON = 'On';\nconst OFF = 'Off';\n\nconst ReportSubscriptionModal = ({ cancel, currentSubscription, isOpen, save }) => {\n if (!isOpen) return null;\n\n const [isSubscribed, setIsSubscribed] = React.useState(currentSubscription ? true : false);\n const [frequency, setFrequency] = React.useState(currentSubscription?.frequency || MONTHLY);\n\n const frequencyOptions = [{ \"value\": MONTHLY, \"label\": MONTHLY }, { \"value\": WEEKLY, \"label\": WEEKLY }]\n\n const handleFrequencyOptionChange = (e: { value: string }) => {\n setFrequency(e.value)\n }\n\n const handleIsSubscribedOptionChange = (option: { target: { value: string } }) => {\n setIsSubscribed(option.target.value === ON)\n }\n\n function handleSaveClick() { save(isSubscribed, frequency, currentSubscription) }\n\n function renderFrequencyOptions() {\n const selectedFrequency = frequencyOptions.find(option => frequency === option.value)\n\n return (\n \n \n Frequency \n \n
\n )\n }\n\n function renderIsSubscribedOptions() {\n return (\n \n
Email me this report \n
\n \n \n
\n
\n \n \n
\n
\n {renderIsSubscribedOptions()}\n {renderFrequencyOptions()}\n
\n )\n }\n\n function renderSaveAndCancelButtons() {\n return (\n \n \n Cancel\n \n \n Save\n \n
\n )\n }\n\n function renderTitleAndDescription() {\n return (\n \n
Subscribe to this report \n
\n Keep up to date by having this report delivered to your inbox on a recurring basis. It will use filters\n currently applied when you subscribe, so please review them before doing so. You can always change your\n filters later by turning off the report and re-subscribing.\n
\n
\n
\n
\n
\n {renderTitleAndDescription()}\n {renderIsSubscribedAndFrequency()}\n {renderSaveAndCancelButtons()}\n
\n
\n
{section} opt.value === selectedTab)}\n />\n )\n\n const sectionsToShow = selectedTab === ALL ? snapshotSections : snapshotSections.filter(s => s.name === selectedTab)\n const snapshotSectionComponents = sectionsToShow.map(section => (\n s.id)}\n selectedTeacherIds={mapItemsIfNotAll(selectedTeachers, availableTeachers)}\n selectedTimeframe={selectedTimeframe.value}\n />\n ))\n\n if (accessType !== FULL) {\n return restrictedPage\n }\n\n return (\n \n \n
\n Usage Snapshot Report \n \n Guide \n \n \n
\n
\n Subscribe \n \n \n Download \n \n \n
\n {size.width >= MAX_VIEW_WIDTH_FOR_MOBILE ? tabs : tabDropdown}\n
\n \n
\n \n {snapshotSectionComponents}\n
\n
\n\n \n )\n}\n\nexport default UsageSnapshotsContainer;\n","import * as React from 'react'\nimport moment from 'moment'\n\nimport { getTimeSpent } from '../../../Teacher/helpers/studentReports'\nimport { Tooltip, helpIcon } from '../../../Shared'\n\nconst checkSrc = `${window.postbuildEnv.CDN_URL}/images/icons/circle-check-icon-vibrant-green.svg`\nconst loopSrc = `${window.postbuildEnv.CDN_URL}/images/icons/revise-icon-grey.svg`\nconst triangleSrc = `${window.postbuildEnv.CDN_URL}/images/icons/triangle-up-icon-vibrant-green-50.svg`\n\n// Overview tooltips\nexport const diagnosticNameTooltipText = \"This report shows all of the diagnostics that have been assigned by teachers connected to your account.—
\n\n// Shared functions\n\n// we use -1 so that null data values will be sorted last for the sort attribute\nfunction getOverallSkillGrowthSortValue(preDiagnosticScore, postDiagnosticScore) {\n if ((!preDiagnosticScore && preDiagnosticScore !== 0) || (!postDiagnosticScore && postDiagnosticScore !== 0)) {\n return -1\n }\n return postDiagnosticScore - preDiagnosticScore >= 0 ? postDiagnosticScore - preDiagnosticScore : 0\n}\n\nfunction getSingleSortValue(value) {\n if(value === null || value === undefined) { return -1 }\n return value\n}\n\n// Overview logic\n\nfunction processAggregateRows(aggregateRowsData, diagnosticId, rowData) {\n // set initial empty value if first pass\n if (!aggregateRowsData[diagnosticId]) {\n aggregateRowsData[diagnosticId] = {}\n }\n rowData.map((row, i) => {\n const { aggregate_id, ...properties } = row;\n if(aggregateRowsData[diagnosticId] && !aggregateRowsData[diagnosticId][aggregate_id]) {\n aggregateRowsData[diagnosticId][aggregate_id] = {...properties }\n }\n if (aggregateRowsData[diagnosticId] && aggregateRowsData[diagnosticId][aggregate_id]) {\n aggregateRowsData[diagnosticId][aggregate_id] = { ...aggregateRowsData[diagnosticId][aggregate_id], ...properties };\n }\n if (aggregateRowsData[diagnosticId] && aggregateRowsData[diagnosticId][aggregate_id] && !aggregateRowsData[diagnosticId][aggregate_id].order) {\n aggregateRowsData[diagnosticId][aggregate_id].order = i\n }\n });\n}\n\nfunction preDiagnosticCompletedValue({ diagnosticId, preStudentsAssigned, preStudentsCompleted, handlePreDiagnosticChipClick }) {\n if(!preStudentsAssigned) { return noDataToShow }\n return {`${preStudentsCompleted || 0} of ${preStudentsAssigned} Students`} \n}\n\nfunction studentsCompletedPracticeValue(studentsCompletedPractice) {\n return studentsCompletedPractice ? `${studentsCompletedPractice} Students` : noDataToShow\n}\n\nfunction averageActivitiesAndTimeSpentValue(averageActivitiesCount, averageTimespent) {\n return averageActivitiesCount ? `${Math.round(averageActivitiesCount) || 0} (${getTimeSpent(averageTimespent)})` : noDataToShow\n}\n\nfunction postDiagnosticCompleted(postStudentsAssigned, postStudentsCompleted) {\n return postStudentsAssigned ? `${postStudentsCompleted || 0} of ${postStudentsAssigned} Students` : noDataToShow\n}\n\nfunction overallSkillGrowthValue({diagnosticId, overallSkillGrowth, handleGrowthChipClick}) {\n if (!overallSkillGrowth) {\n return noDataToShow;\n } else if (overallSkillGrowth > 0) {\n return {`+${Math.round(overallSkillGrowth * 100)}%`} \n }\n return 'No Growth';\n}\n\nexport function createAggregateRowData({ aggregateRowsDataForDiagnostic, diagnosticId, handleGrowthChipClick, handlePreDiagnosticChipClick, groupByValue }) {\n let keys\n if (groupByValue === 'teacher' || groupByValue === 'classroom') {\n keys = Object.keys(aggregateRowsDataForDiagnostic).sort((a, b) => {\n return aggregateRowsDataForDiagnostic[a].order - aggregateRowsDataForDiagnostic[b].order;\n });\n } else {\n keys = Object.keys(aggregateRowsDataForDiagnostic)\n }\n\n return keys.map(key => {\n const data = aggregateRowsDataForDiagnostic[key];\n // we can early return if there are no students assigned to pre diagnostic\n if (!data.pre_students_assigned) { return null }\n const overallSkillGrowth = overallSkillGrowthValue({ diagnosticId, overallSkillGrowth: data.overall_skill_growth, handleGrowthChipClick });\n\n return {\n id: key,\n name: data.name,\n preDiagnosticCompleted: preDiagnosticCompletedValue({ diagnosticId, preStudentsAssigned: data.pre_students_assigned, preStudentsCompleted: data.pre_students_completed, handlePreDiagnosticChipClick }),\n studentsCompletedPractice: studentsCompletedPracticeValue(data.students_completed_practice),\n averageActivitiesAndTimeSpent: averageActivitiesAndTimeSpentValue(data.average_practice_activities_count, data.average_time_spent_seconds),\n postDiagnosticCompleted: postDiagnosticCompleted(data.post_students_assigned, data.post_students_completed),\n overallSkillGrowth\n };\n }).filter(row => !!row);\n}\n\nexport function aggregateOverviewData(args) {\n const { preDiagnosticAssignedData, postDiagnosticAssignedData, preDiagnosticCompletedData, postDiagnosticCompletedData, recommendationsData, setAggregatedData, handleSetNoDiagnosticDataAvailable, hasAdjustedFiltersFromDefault, setLoading, handleGrowthChipClick, handlePreDiagnosticChipClick, groupByValue } = args;\n\n // if there are no results for the pre diagnostic API and filters are at default, no diagnostics have been assigned\n if (!preDiagnosticAssignedData.length && !hasAdjustedFiltersFromDefault) {\n handleSetNoDiagnosticDataAvailable(true);\n }\n\n // Hash tables for data storage of each individual API results plus storing the aggregate row data for each diagnostic\n const preDiagnosticAssignedDataHash = {};\n const postDiagnosticAssignedDataHash = {};\n const preDiagnosticCompletedDataHash = {};\n const postDiagnosticCompletedDataHash = {};\n const recommendationsDataHash = {};\n const aggregateRowsData = {};\n\n // on first pass, we build the object needed for each row for the data table and populate with the necessary pre-diagnostic-assigned API results data\n const combinedData = preDiagnosticAssignedData.map(entry => {\n const { diagnostic_id, diagnostic_name, aggregate_rows, pre_students_assigned } = entry\n preDiagnosticAssignedDataHash[diagnostic_id] = { pre_students_assigned }\n processAggregateRows(aggregateRowsData, diagnostic_id, aggregate_rows)\n return {\n id: diagnostic_id,\n name: diagnostic_name,\n preDiagnosticCompleted: null,\n studentsCompletedPractice: null,\n averageActivitiesAndTimeSpent: null,\n postDiagnosticCompleted: null,\n overallSkillGrowth: null,\n aggregate_rows: null\n };\n });\n\n // process data for post-diagnostic-assigned API results\n postDiagnosticAssignedData.map(entry => {\n const { diagnostic_id, aggregate_rows, post_students_assigned } = entry\n postDiagnosticAssignedDataHash[diagnostic_id] = { post_students_assigned }\n processAggregateRows(aggregateRowsData, diagnostic_id, aggregate_rows)\n })\n\n // process data for pre-diagnostic-completed API results\n preDiagnosticCompletedData.map(entry => {\n const { diagnostic_id, aggregate_rows, pre_average_score, pre_students_completed } = entry\n preDiagnosticCompletedDataHash[diagnostic_id] = {\n pre_average_score,\n pre_students_completed\n }\n processAggregateRows(aggregateRowsData, diagnostic_id, aggregate_rows)\n })\n\n // process data for post-diagnostic-completed API results\n postDiagnosticCompletedData.map(entry => {\n const { diagnostic_id, aggregate_rows, overall_skill_growth, post_students_completed } = entry\n postDiagnosticCompletedDataHash[diagnostic_id] = {\n overall_skill_growth,\n post_students_completed\n }\n processAggregateRows(aggregateRowsData, diagnostic_id, aggregate_rows)\n })\n\n // process data for recommendations API results\n recommendationsData.map(entry => {\n const { diagnostic_id, aggregate_rows, average_practice_activities_count, average_time_spent_seconds, students_completed_practice } = entry\n recommendationsDataHash[diagnostic_id] = {\n average_practice_activities_count,\n average_time_spent_seconds,\n students_completed_practice\n }\n processAggregateRows(aggregateRowsData, diagnostic_id, aggregate_rows)\n })\n\n combinedData.forEach(entry => {\n const { id } = entry\n if (!preDiagnosticAssignedDataHash[id]?.pre_students_assigned) { return }\n const preStudentsAssigned = preDiagnosticAssignedDataHash[id]?.pre_students_assigned\n const preStudentsCompleted = preDiagnosticCompletedDataHash[id]?.pre_students_completed\n const postStudentsAssigned = postDiagnosticAssignedDataHash[id]?.post_students_assigned\n const postStudentsCompleted = postDiagnosticCompletedDataHash[id]?.post_students_completed\n const overallSkillGrowth = postDiagnosticCompletedDataHash[id]?.overall_skill_growth\n const studentsCompletedPractice = recommendationsDataHash[id]?.students_completed_practice\n const averageActivitiesCount = recommendationsDataHash[id]?.average_practice_activities_count\n const averageTimespent = recommendationsDataHash[id]?.average_time_spent_seconds\n const aggregateRowsDataForDiagnostic = aggregateRowsData[id]\n entry.preDiagnosticCompleted = preDiagnosticCompletedValue({ diagnosticId: id, preStudentsAssigned, preStudentsCompleted, handlePreDiagnosticChipClick })\n entry.preStudentsCompleted = getSingleSortValue(preStudentsCompleted)\n entry.studentsCompletedPractice = studentsCompletedPracticeValue(studentsCompletedPractice)\n entry.completedPracticeCount = getSingleSortValue(studentsCompletedPractice)\n entry.averageActivitiesAndTimeSpent = averageActivitiesAndTimeSpentValue(averageActivitiesCount, averageTimespent)\n entry.averageActivitiesCount = getSingleSortValue(averageActivitiesCount)\n entry.postDiagnosticCompleted = postDiagnosticCompleted(postStudentsAssigned, postStudentsCompleted)\n entry.postStudentsCompleted = getSingleSortValue(postStudentsCompleted)\n entry.overallSkillGrowthSortValue = getSingleSortValue(overallSkillGrowth)\n entry.overallSkillGrowth = overallSkillGrowthValue({diagnosticId: id, overallSkillGrowth, handleGrowthChipClick })\n entry.aggregate_rows = createAggregateRowData({ aggregateRowsDataForDiagnostic, diagnosticId: id, handleGrowthChipClick, handlePreDiagnosticChipClick, groupByValue })\n })\n setAggregatedData(combinedData);\n setLoading(false);\n}\n\n// Skills logic\n\nfunction scoreValue(score, studentCount) {\n if(!score) { return noDataToShow }\n return `${Math.round(score * 100)}% (${studentCount})`\n}\n\nfunction proficiencyValue(proficiencyLevelCount, totalStudents) {\n if(!totalStudents) { return noDataToShow }\n return `${proficiencyLevelCount} of ${totalStudents}`\n}\n\nfunction noClassGrowthTooltipText(preScoreCompletedPost, postStudentsCompleted, postScore) {\n const studentsOrStudents = postStudentsCompleted === 1 ? 'student' : 'students'\n const prePercentage = `${Math.round(preScoreCompletedPost * 100)}%`\n const postPercentage = `${Math.round(postScore * 100)}%`\n const comparisonText = prePercentage === postPercentage ? 'the same' : 'lower than this'\n return `The Pre Score of the ${postStudentsCompleted} ${studentsOrStudents} that completed the Post Diagnostic was ${prePercentage}. As the Post Score of these students (${postPercentage}) was ${comparisonText}, we deem there to have been no overall class growth.`\n}\n\nexport function growthResultsValue({ growthScore, studentCount, preScoreCompletedPost, postStudentsCompleted, postScore }) {\n if (growthScore && growthScore > 0) {\n return `+${scoreValue(growthScore, studentCount)}`\n }\n if (preScoreCompletedPost && postStudentsCompleted) {\n const tooltipText = noClassGrowthTooltipText(preScoreCompletedPost, postStudentsCompleted, postScore)\n return(\n \n
No class growth
\n
}\n />\n
{name}
\n }\n}\n\nfunction getPreToPostImprovedSkillsValue(count, postQuestionsTotal) {\n if(postQuestionsTotal === null) { return noDataToShow }\n if(count === 0) { return 'No improved skills'}\n return `+${count} Improved Skill${count === 1 ? '' : 's'}`\n}\n\nfunction getPreToPostImprovedSkillsSortValue(preCompleted, count, postQuestionsTotal) {\n if(!preCompleted) { return -2 }\n if(postQuestionsTotal === null) { return -1 }\n return count\n}\n\nfunction getQuestionsCorrectValue({ correctCount, total }) {\n if (!correctCount && !total) { return noDataToShow }\n return(\n \n
{`${correctCount} of ${total} Questions`}
\n
{`(${Math.round((correctCount / total) * 100)}%)`}
\n
\n
{`${proficientCount} of ${skillsCount} Skills`}
\n {practiceCount ?
{`(${practiceCount} Skills to Practice)`}
:
(No Skills To Practice)
}\n
{noDataToShow}
\n }\n const { completed_activities, time_spent_seconds } = data\n return `${completed_activities} (${getTimeSpent(time_spent_seconds)})`\n}\n\nfunction getPostSkillsImprovedOrMaintained({ improvedCount, maintainedCount, combinedCount, skillsTotal, postQuestionsTotal }) {\n if (postQuestionsTotal === null) {\n return noDataToShow\n }\n return (\n \n
{`${combinedCount} of ${skillsTotal} Skills`}
\n
{`(${improvedCount} Improved, ${maintainedCount} Maintained)`}
\n
\n
\n
Skill Proficient
\n
\n
\n
Maintained Skill
\n
\n
\n
Improved Skill
\n
\n
\n
Skill To Practice
\n
\n
{name}
\n {!!improved &&
}\n
{noDataToShow} }\n\n return {`${correctCount} of ${totalCount} Questions (${Math.round((correctCount/totalCount) * 100)}%)`} \n}\n\nfunction renderPostEmbeddedSkillStatus(improved, maintained, total) {\n if(total === null) { return {noDataToShow} }\n if(improved) { return skillImprovedElement }\n if(maintained) { return skillMaintainedElement }\n\n return skillToPracticeElement\n}\n\nfunction renderEmbeddedTable(aggregate_rows) {\n if(!aggregate_rows) { return false }\n\n // grabbed from the header width of the parent table\n const parentTableWidth = document.getElementsByClassName('data-table-headers')[0]\n\n // 1188px is the current computed width of the embedded data table\n return(\n \n
\n \n \n Diagnostic Skills \n Pre: Questions Correct \n Pre: Skills Status \n Post: Questions Correct \n Post: Skill Status \n \n \n \n {aggregate_rows.map(row => {\n const { skill_group_name, pre_questions_correct, pre_questions_percentage, pre_questions_total,\n post_questions_correct, post_questions_total, post_skills_improved, post_skills_maintained\n } = row\n\n if(!skill_group_name) { return }\n\n return(\n \n {renderSkillName(skill_group_name, post_skills_improved)} \n {renderEmbeddedScore(pre_questions_correct, pre_questions_total)}\n {pre_questions_correct === pre_questions_total ? skillProficientElement : skillToPracticeElement} \n {renderEmbeddedScore(post_questions_correct, post_questions_total)}\n {renderPostEmbeddedSkillStatus(post_skills_improved, post_skills_maintained, post_questions_total)} \n \n )\n })}\n \n
\n
(!passedData);\n const [preDiagnosticAssignedData, setPreDiagnosticAssignedData] = React.useState(null);\n const [postDiagnosticAssignedData, setPostDiagnosticAssignedData] = React.useState(null);\n const [preDiagnosticCompletedData, setPreDiagnosticCompletedData] = React.useState(null);\n const [postDiagnosticCompletedData, setPostDiagnosticCompletedData] = React.useState(null);\n const [recommendationsData, setRecommendationsData] = React.useState(null);\n const [aggregatedData, setAggregatedData] = React.useState(passedData || []);\n const [pusherMessage, setPusherMessage] = React.useState(null)\n\n React.useEffect(() => {\n handleSetDiagnosticIdForStudentCount(null)\n }, [])\n\n React.useEffect(() => {\n initializePusher()\n }, [pusherChannel])\n\n React.useEffect(() => {\n // this is for testing purposes; this value will always be null in a non-testing environment\n if (!passedData && groupByValue) {\n getData()\n }\n }, [searchCount, groupByValue])\n\n React.useEffect(() => {\n if (!pusherMessage) return\n\n switch (pusherMessage) {\n case getFilterHash(PRE_DIAGNOSTIC_ASSIGNED_QUERYSTRING):\n getPreDiagnosticAssignedData()\n break;\n case getFilterHash(PRE_DIAGNOSTIC_COMPLETED_QUERYSTRING):\n getPreDiagnosticCompletedData()\n break;\n case getFilterHash(POST_DIAGNOSTIC_ASSIGNED_QUERYSTRING):\n getPostDiagnosticAssignedData()\n break;\n case getFilterHash(POST_DIAGNOSTIC_COMPLETED_QUERYSTRING):\n getPostDiagnosticCompletedData()\n break;\n case getFilterHash(RECOMMENDATIONS_QUERYSTRING):\n getRecommendationsData()\n break;\n }\n }, [pusherMessage])\n\n React.useEffect(() => {\n if (preDiagnosticAssignedData && postDiagnosticAssignedData && preDiagnosticCompletedData && postDiagnosticCompletedData && recommendationsData) {\n aggregateOverviewData({\n preDiagnosticAssignedData,\n postDiagnosticAssignedData,\n preDiagnosticCompletedData,\n postDiagnosticCompletedData,\n recommendationsData,\n setAggregatedData,\n hasAdjustedFiltersFromDefault,\n handleSetNoDiagnosticDataAvailable,\n setLoading,\n handleGrowthChipClick,\n handlePreDiagnosticChipClick,\n groupByValue: groupByValue.value\n })\n }\n }, [preDiagnosticAssignedData, postDiagnosticAssignedData, preDiagnosticCompletedData, postDiagnosticCompletedData, recommendationsData])\n\n function initializePusher() {\n pusherChannel?.bind(PUSHER_EVENT_KEY, (body) => {\n const { message, } = body\n\n setPusherMessage(message)\n });\n };\n\n function getSearchParams(queryString) {\n return {\n query: queryString,\n timeframe: selectedTimeframe,\n school_ids: selectedSchoolIds,\n teacher_ids: selectedTeacherIds,\n classroom_ids: selectedClassroomIds,\n grades: selectedGrades,\n group_by: groupByValue.value\n }\n }\n\n function getData() {\n setLoading(true)\n getPreDiagnosticAssignedData()\n getPreDiagnosticCompletedData()\n getPostDiagnosticAssignedData()\n getPostDiagnosticCompletedData()\n getRecommendationsData()\n }\n\n function getPreDiagnosticAssignedData() {\n setPreDiagnosticAssignedData(null)\n const searchParams = getSearchParams(PRE_DIAGNOSTIC_ASSIGNED_QUERYSTRING)\n\n requestPost('/admin_diagnostic_reports/report', searchParams, (body) => {\n if (!body.hasOwnProperty('results')) { return }\n const { results, } = body\n setPreDiagnosticAssignedData(results)\n })\n }\n\n function getPostDiagnosticAssignedData() {\n setPostDiagnosticAssignedData(null)\n const searchParams = getSearchParams(POST_DIAGNOSTIC_ASSIGNED_QUERYSTRING)\n\n requestPost('/admin_diagnostic_reports/report', searchParams, (body) => {\n if (!body.hasOwnProperty('results')) { return }\n const { results, } = body\n setPostDiagnosticAssignedData(results)\n })\n }\n\n function getPreDiagnosticCompletedData() {\n setPreDiagnosticCompletedData(null)\n const searchParams = getSearchParams(PRE_DIAGNOSTIC_COMPLETED_QUERYSTRING)\n\n requestPost('/admin_diagnostic_reports/report', searchParams, (body) => {\n if (!body.hasOwnProperty('results')) { return }\n const { results, } = body\n setPreDiagnosticCompletedData(results)\n })\n }\n\n function getPostDiagnosticCompletedData() {\n setPostDiagnosticCompletedData(null)\n const searchParams = getSearchParams(POST_DIAGNOSTIC_COMPLETED_QUERYSTRING)\n\n requestPost('/admin_diagnostic_reports/report', searchParams, (body) => {\n if (!body.hasOwnProperty('results')) { return }\n const { results, } = body\n setPostDiagnosticCompletedData(results)\n })\n }\n\n function getRecommendationsData() {\n setRecommendationsData(null)\n const searchParams = getSearchParams(RECOMMENDATIONS_QUERYSTRING)\n\n requestPost('/admin_diagnostic_reports/report', searchParams, (body) => {\n if (!body.hasOwnProperty('results')) { return }\n const { results, } = body\n setRecommendationsData(results)\n })\n }\n\n function getFilterHash(queryKey) {\n const filterTarget = [].concat(\n queryKey,\n selectedTimeframe,\n selectedSchoolIds,\n selectedGrades,\n selectedTeacherIds,\n selectedClassroomIds,\n )\n return hashPayload(filterTarget)\n }\n\n function handleFilterOptionChange(option) {\n handleSetSelectedGroupByValue(option)\n }\n\n function handlePreDiagnosticChipClick(id: number) {\n const diagnosticTypeDropdownOptions = getDiagnosticTypeDropdownOptions(selectedTimeframe)\n const diagnosticType = diagnosticTypeDropdownOptions.filter(diagnosticType => diagnosticType.value === id)[0]\n handleSetSelectedDiagnosticType(diagnosticType)\n handleTabChangeFromDataChip(STUDENT)\n }\n\n function handleGrowthChipClick(id: number) {\n const diagnosticTypeDropdownOptions = getDiagnosticTypeDropdownOptions(selectedTimeframe)\n const diagnosticType = diagnosticTypeDropdownOptions.filter(diagnosticType => diagnosticType.value === id)[0]\n handleSetSelectedDiagnosticType(diagnosticType)\n handleSetSelectedGroupByValue(groupByValue)\n handleTabChangeFromDataChip(SKILL)\n }\n\n function renderContent() {\n if (loading) {\n return \n \n )\n}\n\nexport default OverviewSection;\n","import * as React from 'react'\nimport { Spinner, DataTable, noResultsMessage, DropdownInput } from '../../../Shared/index'\nimport { DropdownObjectInterface } from '../../../Staff/interfaces/evidenceInterfaces'\nimport { getDiagnosticTypeDropdownOptions, groupByDropdownOptions, hashPayload } from '../../shared'\nimport { requestPost } from '../../../../modules/request'\nimport { aggregateSkillsData, growthResultsTooltipText, postSkillScoreTooltipText, preSkillScoreTooltipText, studentsImprovedSkillTooltipText, studentsMaintainedProficiencyTooltipText, studentsWithoutImprovementTooltipText } from './helpers'\n\nconst QUERY_KEY = \"diagnostic-skills\"\nconst PUSHER_EVENT_KEY = \"admin-diagnostic-skills-cached\";\nconst DEFAULT_CELL_WIDTH = '160px'\nconst GROWTH_RESULTS = 'Growth Results'\n\nconst headers = [\n {\n name: 'Skill',\n attribute: 'name',\n width: '150px',\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'preSkillScore',\n sortAttribute: 'pre_score',\n width: '150px',\n primaryTitle: 'Pre',\n secondaryTitle: 'Skill Score',\n tooltipName: 'Pre Skill Score',\n tooltipDescription: preSkillScoreTooltipText,\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'postSkillScore',\n sortAttribute: 'post_score',\n width: '150px',\n primaryTitle: 'Post',\n secondaryTitle: 'Skill Score',\n tooltipName: 'Post Skill Score',\n tooltipDescription: postSkillScoreTooltipText,\n noTooltip: true,\n isSortable: true\n },\n {\n name: GROWTH_RESULTS,\n attribute: 'growthResults',\n sortAttribute: 'growthResultsSortValue',\n width: '174px',\n tooltipName: GROWTH_RESULTS,\n tooltipDescription: growthResultsTooltipText,\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'studentsImprovedSkill',\n sortAttribute: 'improved_proficiency',\n width: DEFAULT_CELL_WIDTH,\n primaryTitle: 'Students',\n secondaryTitle: 'Improved Skill',\n tooltipName: 'Students Improved Skill',\n tooltipDescription: studentsImprovedSkillTooltipText,\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'studentsWithoutImprovement',\n sortAttribute: 'recommended_practice',\n width: '184px',\n primaryTitle: 'Students Without',\n secondaryTitle: 'Improvement',\n tooltipName: 'Students Without Improvement',\n tooltipDescription: studentsWithoutImprovementTooltipText,\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'studentsMaintainedProficiency',\n sortAttribute: 'maintained_proficiency',\n width: '192px',\n primaryTitle: 'Students Maintained',\n secondaryTitle: 'Proficiency',\n tooltipName: 'Students Maintained Proficiency',\n tooltipDescription: studentsMaintainedProficiencyTooltipText,\n noTooltip: true,\n isSortable: true\n },\n]\n\n\nexport const SkillSection = ({\n searchCount,\n selectedGrades,\n selectedSchoolIds,\n selectedTeacherIds,\n selectedClassroomIds,\n selectedTimeframe,\n pusherChannel,\n diagnosticTypeValue,\n groupByValue,\n handleSetDiagnosticIdForStudentCount,\n handleSetSelectedDiagnosticType,\n handleSetSelectedGroupByValue,\n passedData\n}) => {\n const [pusherMessage, setPusherMessage] = React.useState(null)\n const [skillsData, setSkillsData] = React.useState(null);\n const [aggregatedData, setAggregatedData] = React.useState(passedData || []);\n const [loading, setLoading] = React.useState(!passedData);\n\n React.useEffect(() => {\n handleSetDiagnosticIdForStudentCount(null)\n }, [])\n\n React.useEffect(() => {\n initializePusher()\n }, [pusherChannel])\n\n React.useEffect(() => {\n if (!passedData && groupByValue && diagnosticTypeValue) {\n // this is for testing purposes; this value will always be null in a non-testing environment\n\n // If the timeframe has changed, we may be re-populating the selectedDiagnosticType drop-downs\n // In these cases, we need to re-select the appropriate value from the drop-down for the new timeframe\n // The re-selection will re-trigger this effect by changing the value of diagnosticTypeValue\n const diagnosticTypeDropdownOptions = getDiagnosticTypeDropdownOptions(selectedTimeframe)\n if (!diagnosticTypeDropdownOptions.includes(diagnosticTypeValue)) {\n const selectedDiagnosticType = diagnosticTypeDropdownOptions.find((option) => option.label === diagnosticTypeValue.label)\n\n handleSetSelectedDiagnosticType(selectedDiagnosticType)\n } else {\n getData()\n }\n }\n }, [searchCount, groupByValue, diagnosticTypeValue])\n\n React.useEffect(() => {\n if (!pusherMessage) return\n\n if (filtersMatchHash(pusherMessage)) getData()\n }, [pusherMessage])\n\n React.useEffect(() => {\n if (skillsData) {\n aggregateSkillsData({\n skillsData,\n setAggregatedData,\n setLoading\n })\n }\n }, [skillsData])\n\n function initializePusher() {\n pusherChannel?.bind(PUSHER_EVENT_KEY, (body) => {\n const { message, } = body\n\n setPusherMessage(message)\n });\n };\n\n function getData() {\n setLoading(true)\n const searchParams = {\n query: QUERY_KEY,\n timeframe: selectedTimeframe,\n school_ids: selectedSchoolIds,\n teacher_ids: selectedTeacherIds,\n classroom_ids: selectedClassroomIds,\n grades: selectedGrades,\n group_by: groupByValue.value,\n diagnostic_id: diagnosticTypeValue.value\n }\n\n requestPost('/admin_diagnostic_skills/report', searchParams, (body) => {\n if (!body.hasOwnProperty('results')) { return }\n const { results, } = body\n setSkillsData(results)\n })\n }\n\n function filtersMatchHash(hashMessage) {\n const filterTarget = [].concat(\n QUERY_KEY,\n groupByValue.value,\n parseInt(diagnosticTypeValue.value),\n selectedTimeframe,\n selectedSchoolIds,\n selectedGrades,\n selectedTeacherIds,\n selectedClassroomIds,\n )\n\n const filterHash = hashPayload(filterTarget)\n\n return hashMessage == filterHash\n }\n\n function handleDiagnosticTypeOptionChange(option: DropdownObjectInterface) {\n handleSetSelectedDiagnosticType(option)\n }\n\n function handleGroupByOptionChange(option: DropdownObjectInterface) {\n handleSetSelectedGroupByValue(option)\n }\n\n function renderContent() {\n if(loading) {\n return \n \n
\n {renderContent()}\n \n )\n}\n\nexport default SkillSection;\n","import * as React from 'react'\n\nimport { aggregateStudentData, preToPostImprovedSkillsTooltipText, preQuestionsCorrectTooltipText, preSkillsProficientTooltipText, totalActivitiesAndTimespentTooltipText, postQuestionsCorrectTooltipText, postSkillsImprovedOrMaintainTooltipText, studentNameTooltipText } from './helpers'\n\nimport { Spinner, DataTable, noResultsMessage, DropdownInput } from '../../../Shared/index'\nimport { DropdownObjectInterface } from '../../../Staff/interfaces/evidenceInterfaces'\nimport { getDiagnosticTypeDropdownOptions, hashPayload } from '../../shared'\nimport { requestPost } from '../../../../modules/request'\n\nconst STUDENTS_QUERY_KEY = \"diagnostic-students\"\nconst RECOMMENDATIONS_QUERY_KEY = \"student-recommendation\"\nconst FILTER_SCOPE_QUERY_KEY = 'filter-scope'\nconst PUSHER_EVENT_KEY = \"admin-diagnostic-students-cached\";\nconst DEFAULT_WIDTH = \"150px\"\nconst BATCH_SIZE = 50\nconst MAX_ROW_COUNT = 500\n\nconst headers = [\n {\n name: 'Student Name',\n attribute: 'name',\n sortAttribute: 'studentName',\n tooltipName: 'Student Name',\n tooltipDescription: studentNameTooltipText,\n width: DEFAULT_WIDTH,\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'preToPostImprovedSkills',\n sortAttribute: 'improvedSkills',\n width: DEFAULT_WIDTH,\n primaryTitle: 'Pre to Post:',\n secondaryTitle: 'Improved Skills',\n tooltipName: 'Pre to Post: Improved Skills',\n tooltipDescription: preToPostImprovedSkillsTooltipText,\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'preQuestionsCorrect',\n sortAttribute: 'preQuestionsCorrectSortValue',\n width: DEFAULT_WIDTH,\n primaryTitle: 'Pre: Questions',\n secondaryTitle: 'Correct',\n tooltipName: 'Pre: Questions Correct',\n tooltipDescription: preQuestionsCorrectTooltipText,\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'preSkillsProficient',\n sortAttribute: 'preSkillsProficientSortValue',\n width: '170px',\n primaryTitle: 'Pre: Skills',\n secondaryTitle: 'Proficient',\n tooltipName: 'Pre: Skills Proficient',\n tooltipDescription: preSkillsProficientTooltipText,\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'totalActivitiesAndTimespent',\n sortAttribute: 'totalActivities',\n width: '150px',\n primaryTitle: 'Total Activities',\n secondaryTitle: '& Time Spent',\n tooltipName: 'Total Activities & Time Spent',\n tooltipDescription: totalActivitiesAndTimespentTooltipText,\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'postQuestionsCorrect',\n sortAttribute: 'postQuestionsCorrectSortValue',\n width: DEFAULT_WIDTH,\n primaryTitle: 'Post: Questions',\n secondaryTitle: 'Correct',\n tooltipName: 'Post: Questions Correct',\n tooltipDescription: postQuestionsCorrectTooltipText,\n noTooltip: true,\n isSortable: true\n },\n {\n name: '',\n attribute: 'postSkillsImprovedOrMaintained',\n sortAttribute: 'postSkillsImprovedOrMaintainedSortValue',\n width: '200px',\n primaryTitle: 'Post: Skills Improved',\n secondaryTitle: 'Or Maintained',\n tooltipName: 'Post: Skills Improved Or Maintained',\n tooltipDescription: postSkillsImprovedOrMaintainTooltipText,\n noTooltip: true,\n isSortable: true\n },\n]\n\nexport const StudentSection = ({\n searchCount,\n selectedGrades,\n selectedSchoolIds,\n selectedTeacherIds,\n selectedClassroomIds,\n selectedTimeframe,\n diagnosticTypeValue,\n pusherChannel,\n createCsvReportDownload,\n handleSetDiagnosticIdForStudentCount,\n handleSetSelectedDiagnosticType,\n passedStudentData,\n passedRecommendationsData,\n passedVisibleData\n}) => {\n const [pusherMessage, setPusherMessage] = React.useState(null)\n const [recommendationsData, setRecommendationsData] = React.useState(passedRecommendationsData || null);\n const [studentData, setStudentData] = React.useState(passedStudentData || null);\n const [totalStudents, setTotalStudents] = React.useState(null)\n const [visibleData, setVisibleData] = React.useState(passedVisibleData || []);\n const [rowsToShow, setRowsToShow] = React.useState(BATCH_SIZE);\n const [loading, setLoading] = React.useState(!passedStudentData && !passedRecommendationsData && !passedVisibleData);\n\n React.useEffect(() => {\n initializePusher()\n }, [pusherChannel])\n\n React.useEffect(() => {\n // this is for testing purposes; these values will always be null in a non-testing environment\n if (!passedVisibleData && diagnosticTypeValue) {\n\n // If the timeframe has changed, we may be re-populating the selectedDiagnosticType drop-downs\n // In these cases, we need to re-select the appropriate value from the drop-down for the new timeframe\n // The re-selection will re-trigger this effect by changing the value of diagnosticTypeValue\n const diagnosticTypeDropdownOptions = getDiagnosticTypeDropdownOptions(selectedTimeframe)\n if (!diagnosticTypeDropdownOptions.includes(diagnosticTypeValue)) {\n const selectedDiagnosticType = diagnosticTypeDropdownOptions.find((option) => option.label === diagnosticTypeValue.label)\n\n handleSetSelectedDiagnosticType(selectedDiagnosticType)\n } else {\n handleSetDiagnosticIdForStudentCount(Number(diagnosticTypeValue.value))\n resetToDefault()\n getData()\n }\n }\n }, [searchCount, diagnosticTypeValue])\n\n React.useEffect(() => {\n if(!studentData || !recommendationsData) { return }\n\n const formattedData = aggregateStudentData(studentData, recommendationsData)\n\n if(!formattedData) { return}\n\n updateVisibleData(formattedData);\n setLoading(false)\n }, [studentData, recommendationsData])\n\n\n React.useEffect(() => {\n if (!pusherMessage) return\n\n if (pusherMessage === getFilterHash(STUDENTS_QUERY_KEY, diagnosticTypeValue.value)) {\n getStudentData()\n }\n if(pusherMessage === getFilterHash(RECOMMENDATIONS_QUERY_KEY, diagnosticTypeValue.value)) {\n getRecommendationsData()\n }\n if (pusherMessage === getFilterHash(FILTER_SCOPE_QUERY_KEY, diagnosticTypeValue.value)) {\n getTotalStudentCount()\n }\n }, [pusherMessage])\n\n React.useEffect(() => {\n const formattedData = aggregateStudentData(studentData, recommendationsData)\n if(formattedData) {\n updateVisibleData(formattedData);\n }\n }, [rowsToShow])\n\n function resetToDefault() {\n setRecommendationsData(null)\n setStudentData(null)\n setVisibleData(passedVisibleData || [])\n setRowsToShow(BATCH_SIZE)\n setLoading(!passedVisibleData)\n }\n\n function updateVisibleData(data) {\n const newDataToShow = data.slice(0, rowsToShow);\n setVisibleData(newDataToShow);\n }\n\n function initializePusher() {\n pusherChannel?.bind(PUSHER_EVENT_KEY, (body) => {\n const { message, } = body\n\n setPusherMessage(message)\n });\n };\n\n function getFilterHash(queryKey, diagnosticId) {\n const filterTarget = [].concat(\n queryKey,\n parseInt(diagnosticId),\n selectedTimeframe,\n selectedSchoolIds,\n selectedGrades,\n selectedTeacherIds,\n selectedClassroomIds,\n )\n return hashPayload(filterTarget)\n }\n\n function getData() {\n getRecommendationsData()\n getStudentData()\n getTotalStudentCount()\n }\n\n function getRecommendationsData() {\n setLoading(true)\n const searchParams = {\n query: RECOMMENDATIONS_QUERY_KEY,\n timeframe: selectedTimeframe,\n school_ids: selectedSchoolIds,\n teacher_ids: selectedTeacherIds,\n classroom_ids: selectedClassroomIds,\n grades: selectedGrades,\n diagnostic_id: diagnosticTypeValue.value\n }\n\n requestPost('/admin_diagnostic_students/report', searchParams, (body) => {\n if (!body.hasOwnProperty('results')) { return }\n const { results, } = body\n setRecommendationsData(results)\n })\n }\n\n function getStudentData() {\n setLoading(true)\n const searchParams = {\n query: STUDENTS_QUERY_KEY,\n timeframe: selectedTimeframe,\n school_ids: selectedSchoolIds,\n teacher_ids: selectedTeacherIds,\n classroom_ids: selectedClassroomIds,\n grades: selectedGrades,\n diagnostic_id: diagnosticTypeValue.value\n }\n\n requestPost('/admin_diagnostic_students/report', searchParams, (body) => {\n if (!body.hasOwnProperty('results')) { return }\n const { results, } = body\n if (rowsToShow > results.length) {\n setRowsToShow(results.length)\n }\n setStudentData(results)\n })\n }\n\n function getTotalStudentCount() {\n const searchParams = {\n query: FILTER_SCOPE_QUERY_KEY,\n timeframe: selectedTimeframe,\n school_ids: selectedSchoolIds,\n teacher_ids: selectedTeacherIds,\n classroom_ids: selectedClassroomIds,\n grades: selectedGrades,\n diagnostic_id: diagnosticTypeValue.value\n }\n\n requestPost('/admin_diagnostic_students/report', searchParams, (body) => {\n if (!body.hasOwnProperty('results')) { return }\n const { results } = body\n const { count } = results\n setTotalStudents(count)\n })\n }\n\n function handleDiagnosticTypeOptionChange(option: DropdownObjectInterface) {\n handleSetSelectedDiagnosticType(option)\n }\n\n function getInitialDiagnosticType() {\n const diagnosticTypeDropdownOptions = getDiagnosticTypeDropdownOptions(selectedTimeframe)\n if(selectedDiagnosticId) {\n return diagnosticTypeDropdownOptions.filter(diagnosticType => diagnosticType.value === selectedDiagnosticId)[0]\n }\n return diagnosticTypeDropdownOptions[0]\n }\n\n function loadMoreRows() {\n const count = rowsToShow + BATCH_SIZE\n if(count > studentData.length) {\n setRowsToShow(studentData.length)\n } else {\n setRowsToShow((prevRows) => prevRows + BATCH_SIZE);\n }\n };\n\n function renderButtonContent() {\n const disabled = rowsToShow === studentData.length\n const disabledClass = disabled ? 'disabled contained' : 'outlined'\n const showDownloadLink = rowsToShow === MAX_ROW_COUNT\n return(\n \n
\n
Displaying {`${rowsToShow} of ${totalStudents}`} students
\n {showDownloadLink &&
• Please download this report to view more than 500 results.
}\n
\n
Load more \n
\n
\n )\n }\n\n return (\n \n \n )\n}\n\nexport default StudentSection;\n","import * as React from 'react'\n\nimport OverviewSection from './overviewSection'\nimport SkillSection from './skillSection'\nimport StudentSection from './studentSection'\n\nimport { FULL, restrictedPage, OVERVIEW, SKILL, STUDENT, mapItemsIfNotAll, groupByDropdownOptions, getDiagnosticTypeDropdownOptions } from '../../shared'\nimport { LightButtonLoadingSpinner, Snackbar, Spinner, whiteArrowPointingDownIcon, filterIcon, defaultSnackbarTimeout, documentFileIcon, whiteEmailIcon } from '../../../Shared/index'\nimport useSnackbarMonitor from '../../../Shared/hooks/useSnackbarMonitor';\nimport { DropdownObjectInterface } from '../../../Staff/interfaces/evidenceInterfaces'\nimport { requestDelete, requestGet, requestPost } from '../../../../modules/request'\nimport ReportSubscriptionModal from '../../components/usage_snapshots/reportSubscriptionModal';\n\nconst barChartGreySrc = `${window.postbuildEnv.CDN_URL}/images/pages/diagnostic_reports/icons-bar-chart.svg`\nconst barChartWhiteIconSrc = `${window.postbuildEnv.CDN_URL}/images/icons/white-bar-chart-icon.svg`\nconst groupOfStudentsGreyIconSrc = `${window.postbuildEnv.CDN_URL}/images/pages/administrator/usage_snapshot_report/students.svg`\nconst groupOfStudentsWhiteIconSrc = `${window.postbuildEnv.CDN_URL}/images/icons/students-white.svg`\nconst pencilGreyIconSrc = `${window.postbuildEnv.CDN_URL}/images/pages/administrator/usage_snapshot_report/pencil.svg`\nconst pencilWhiteIconSrc = `${window.postbuildEnv.CDN_URL}/images/icons/white-pencil-icon.svg`\n\nconst ADMIN_DIAGNOSTIC_SUBSCRIPTION = 'admin_diagnostic_report'\nconst FILTER_SELECTIONS_REPORT_BASE = 'diagnostic_growth_report_'\n\nconst reportButtons = [\n {\n tab: OVERVIEW,\n displayName: 'Performance Overview',\n inactiveIconSrc: barChartGreySrc,\n activeIconSrc: barChartWhiteIconSrc\n },\n {\n tab: SKILL,\n displayName: 'Performance by Skill',\n inactiveIconSrc: pencilGreyIconSrc,\n activeIconSrc: pencilWhiteIconSrc\n },\n {\n tab: STUDENT,\n displayName: 'Performance by Student',\n inactiveIconSrc: groupOfStudentsGreyIconSrc,\n activeIconSrc: groupOfStudentsWhiteIconSrc\n },\n]\n\nexport const DiagnosticGrowthReportsContainer = ({\n accessType,\n loadingFilters,\n pusherChannel,\n searchCount,\n selectedClassrooms,\n availableClassrooms,\n selectedTimeframe,\n selectedGrades,\n availableGrades,\n selectedSchools,\n selectedTeachers,\n availableTeachers,\n openMobileFilterMenu,\n hasAdjustedFiltersFromDefault,\n handleSetDiagnosticIdForStudentCount,\n passedData\n}) => {\n\n const [activeTab, setActiveTab] = React.useState(OVERVIEW)\n const [selectedDiagnosticType, setSelectedDiagnosticType] = React.useState(null)\n const [selectedGroupByValue, setSelectedGroupByValue] = React.useState(null)\n const [noDiagnosticDataAvailable, setNoDiagnosticDataAvailable] = React.useState(!!passedData)\n const [downloadButtonBusy, setDownloadButtonBusy] = React.useState(false)\n const [showSnackbar, setShowSnackbar] = React.useState ![\"\"](\"https://assets.quill.org/images/illustrations/empty-state-premium-reports.svg\"){kind=spacer}
\n 
\n } else {\n innerElement = expanded ? ![\"College](\"https://assets.quill.org/images/college_board/college-board-logo.svg\"){kind=logo}
\n \n ![\"Quill](\"https://assets.quill.org/images/logos/quill-logo-green.svg\"){kind=logo}
\n ![\"Photograph](\"https://assets.quill.org/images/college_board/teaching-english-practice.webp\")
\n ![\"Illustration](\"https://assets.quill.org/images/college_board/sentence-writing-pencil.svg\")
\n ![\"A](\"https://assets.quill.org/images/college_board/ap-recommendations.svg\")
\n ![\"An](\"https://assets.quill.org/images/college_board/ap-additional-practice.svg\")
\n ![\"A](\"https://assets.quill.org/images/college_board/ap-reports.svg\")
\n ![\"Large](\"https://assets.quill.org/images/college_board/exaggerated-quote-left.svg\")
\n ![\"Large](\"https://assets.quill.org/images/college_board/exaggerated-quote-right.svg\")
\n 
Check out this helpful article![\"Photograph](\"https://assets.quill.org/images/college_board/teaching-english-practice-2.webp\")
\n ![\"A](\"https://assets.quill.org/images/college_board/pre-ap-concepts.svg\")
\n ![\"A](\"https://assets.quill.org/images/college_board/pre-ap-recommendations.svg\")
\n ![\"An](\"https://assets.quill.org/images/college_board/pre-ap-additional-practice.svg\")
\n ![\"Illustration](\"https://assets.quill.org/images/college_board/passage-book.svg\")
\n ![\"An](\"https://assets.quill.org/images/college_board/pre-ap-bookshelf.svg\")
\n ![\"An](\"https://assets.quill.org/images/college_board/pre-ap-couse-practice.svg\")
\n ![\"An](\"https://assets.quill.org/images/college_board/pre-ap-teacher-guide.svg\")
\n ![\"Photograph](\"https://assets.quill.org/images/college_board/student-writing-by-laptop.webp\")
\n ![\"An](\"https://assets.quill.org/images/college_board/springboard-reports.svg\")
\n 
\n\nexport const PreviouslyAssignedTooltip = ({ previouslyAssignedActivityData }) => {\n if(!previouslyAssignedActivityData) { return }\n return(\n 
\n 
\n return \n }\n\n function renderDiagnostics() {\n const { diagnostic_names } = unitTemplate;\n if((!diagnostic_names || !diagnostic_names.length)) { return NOT_APPLICABLE }\n return diagnostic_names.map(diagnostic => (\n