@khanacademy/perseus 1.1.1 → 1.2.0

package/dist/strings.js

@@ -52,6 +52,7 @@ module.exports = [
     i18n._("Correct (but you crossed it out)", {}),
     i18n._("Correct (selected)", {}),
     i18n._("Correct!", {}),
+    i18n._("Current", {}),
     // I18N: As in the command, "Dilate the polygon"
     i18n._("Dilate", {}),
     i18n._("dilation", {}),

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "publishConfig": {
         "access": "public"
     },
@@ -35,16 +35,16 @@
         "@khanacademy/wonder-blocks-color": "^1.1.20",
         "@khanacademy/wonder-blocks-core": "^4.3.0",
         "@khanacademy/wonder-blocks-data": "^7.0.0",
-        "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
+        "@khanacademy/wonder-blocks-dropdown": "^2.10.1",
         "@khanacademy/wonder-blocks-form": "^2.4.5",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
         "@khanacademy/wonder-blocks-layout": "^1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
         "@khanacademy/wonder-blocks-modal": "^2.3.1",
-        "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-popover": "^1.1.24",
         "@khanacademy/wonder-blocks-progress-spinner": "^1.1.31",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-tooltip": "^1.4.0",
         "@khanacademy/wonder-blocks-typography": "^1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",
@@ -68,16 +68,16 @@
         "@khanacademy/wonder-blocks-color": "^1.1.20",
         "@khanacademy/wonder-blocks-core": "^4.3.0",
         "@khanacademy/wonder-blocks-data": "^7.0.0",
-        "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
+        "@khanacademy/wonder-blocks-dropdown": "^2.10.1",
         "@khanacademy/wonder-blocks-form": "^2.4.5",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
         "@khanacademy/wonder-blocks-layout": "^1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
         "@khanacademy/wonder-blocks-modal": "^2.3.1",
-        "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-popover": "^1.1.24",
         "@khanacademy/wonder-blocks-progress-spinner": "^1.1.31",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-tooltip": "^1.4.0",
         "@khanacademy/wonder-blocks-typography": "^1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",

package/src/__stories__/hints-renderer.stories.jsx

@@ -0,0 +1,52 @@
+// @flow
+
+import React from "react";
+
+import HintsRenderer from "../hints-renderer.jsx";
+
+type StoryArgs = {|
+    hints: $ReadOnlyArray<$FlowFixMe>,
+    hintsVisible: number,
+|};
+
+type Story = {|
+    title: string,
+    argTypes: $FlowFixMe,
+|};
+
+export default ({
+    title: "Perseus/Renderers/Hints Renderer",
+    argTypes: {
+        hints: {
+            control: "object",
+            defaultValue: [
+                {
+                    content: "this is hint 1",
+                    images: {},
+                    replace: false,
+                    widgets: {},
+                },
+                {
+                    content: "this is hint 2",
+                    images: {},
+                    replace: false,
+                    widgets: {},
+                },
+                {
+                    content: "this is hint 3",
+                    images: {},
+                    replace: false,
+                    widgets: {},
+                },
+            ],
+        },
+        hintsVisible: {
+            control: {type: "number", min: 0},
+            defaultValue: 3,
+        },
+    },
+}: Story);
+
+export const Interactive = (args: StoryArgs): $FlowFixMe => {
+    return <HintsRenderer {...args} />;
+};

package/src/__tests__/__snapshots__/renderer_test.jsx.snap

@@ -385,11 +385,17 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -456,11 +462,17 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -527,11 +539,17 @@ exports[`renderer snapshots initial render: initial render 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1"
-                  tabindex="0"
                   type="button"
                 >
                   <span

package/src/components/highlighting/ui/highlight-tooltip.jsx

@@ -13,12 +13,12 @@
  * still have to notify the tooltip to remeasure itself when the highlight
  * focus _changes_.
  */
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import Tooltip from "@khanacademy/wonder-blocks-tooltip";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
 import {Log} from "../../../logging/log.js";
-import {colors} from "../../../styles/global-styles.js";
-import NewTooltip from "../../new-tooltip/new-tooltip.jsx";
 
 import {getRelativeRect} from "./util.js";
 
@@ -36,8 +36,6 @@ type HighlightTooltipProps = {|
 |};
 
 class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
-    _tooltip: ?React.ElementRef<typeof NewTooltip>;
-
     _getFocusRect(): ?Rect {
         const {focusNode, focusOffset, offsetParent} = this.props;
 
@@ -94,31 +92,36 @@ class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
             return null;
         }
 
-        const content = (
-            <div className={css(styles.tooltipLabel)}>{this.props.label}</div>
+        // using div instead of TooltipContent because
+        // TooltipContent wouldn't let me overwrite
+        // user-select and onClick
+        const content: $FlowFixMe = (
+            <div
+                className={css(styles.tooltipLabel)}
+                onClick={this.props.onClick}
+            >
+                {this.props.label}
+            </div>
         );
 
+        const style = {
+            position: "absolute",
+            left: focusRect.left,
+            // offset the spacing WB provides around tooltips
+            top: `calc(${Math.round(focusRect.top)}px + 0.95em)`,
+            height: 0,
+        };
+
         return (
-            <NewTooltip
-                content={content}
-                color={colors.kaBlue}
-                inverted={true}
-                onClick={this.props.onClick}
+            <div
+                style={style}
                 onMouseEnter={this.props.onMouseEnter}
                 onMouseLeave={this.props.onMouseLeave}
-                toggleOnHover={false}
-                showOnMount={true}
-                ref={(e) => (this._tooltip = e)}
             >
-                <div
-                    style={{
-                        position: "absolute",
-                        left: focusRect.left,
-                        top: focusRect.top,
-                        height: focusRect.height,
-                    }}
-                />
-            </NewTooltip>
+                <Tooltip content={content} opened={true}>
+                    <div />
+                </Tooltip>
+            </div>
         );
     }
 }
@@ -131,6 +134,9 @@ const styles = StyleSheet.create({
         // we lose our reference to the _actual_ text they want to highlight,
         // and the "Add highlight" action fails.
         userSelect: "none",
+        fontFamily: `"Lato", sans-serif`,
+        padding: `10px ${Spacing.medium_16}px`,
+        cursor: "pointer",
     },
 });
 

package/src/components/highlighting/ui/selection-tracker.jsx

@@ -24,7 +24,7 @@ export type TrackedSelection = {|
     proposedHighlight: DOMHighlight,
 |};
 
-type SelectionTrackerProps = {
+type SelectionTrackerProps = {|
     // A function that builds a DOMHighlight from the given DOMRange, if
     // possible. If it would not currently be valid to add a highlight over the
     // given DOMRange, returns null.
@@ -38,17 +38,15 @@ type SelectionTrackerProps = {
     ) => React.Element<any>,
     // If false, will not track selections.
     enabled: boolean,
-    ...
-};
+|};
 
-type SelectionTrackerState = {
+type SelectionTrackerState = {|
     // The current state of the mouse button. We distinguish between down,
     // down and the selection has changed since going down, and up.
     mouseState: "down" | "down-and-selecting" | "up",
     // The current TrackedSelection, if any.
     trackedSelection: ?TrackedSelection,
-    ...
-};
+|};
 
 class SelectionTracker extends React.PureComponent<
     SelectionTrackerProps,
@@ -63,15 +61,15 @@ class SelectionTracker extends React.PureComponent<
         this._updateListeners(false, this.props.enabled);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: SelectionTrackerProps) {
-        if (this.props.buildHighlight !== nextProps.buildHighlight) {
+    componentDidUpdate(prevProps: SelectionTrackerProps) {
+        if (this.props.buildHighlight !== prevProps.buildHighlight) {
             // The highlight-building function changed, so the
             // proposedHighlight we built with it might be different, or no
             // longer be valid. Update accordingly.
-            this._updateTrackedSelection(nextProps.buildHighlight);
+            this._updateTrackedSelection();
         }
 
-        this._updateListeners(this.props.enabled, nextProps.enabled);
+        this._updateListeners(prevProps.enabled, this.props.enabled);
     }
 
     componentWillUnmount() {
@@ -133,37 +131,28 @@ class SelectionTracker extends React.PureComponent<
     }
 
     /**
-     * Compute the current TrackedSelection from the document state.
+     * Compute and update the TrackedSelection to reflect the document state.
      */
-    _computeTrackedSelection(
-        buildHighlight: (domRange: DOMRange) => ?DOMHighlight,
-    ): ?TrackedSelection {
+    _updateTrackedSelection(): void {
         const focusAndRange = this._computeFocusAndRange();
         if (!focusAndRange) {
-            return null;
+            this.setState({trackedSelection: null});
+            return;
         }
 
         const {focusNode, focusOffset, range} = focusAndRange;
-        const proposedHighlight = buildHighlight(range);
+        const proposedHighlight = this.props.buildHighlight(range);
         if (!proposedHighlight) {
-            return null;
+            this.setState({trackedSelection: null});
+            return;
         }
 
-        return {focusNode, focusOffset, proposedHighlight};
-    }
-
-    /**
-     * Update the TrackedSelection to reflect the document state.
-     */
-    _updateTrackedSelection(
-        buildHighlight: (domRange: DOMRange) => ?DOMHighlight,
-    ) {
-        const trackedSelection = this._computeTrackedSelection(buildHighlight);
+        const trackedSelection = {focusNode, focusOffset, proposedHighlight};
         this.setState({trackedSelection});
     }
 
     _handleSelectionChange: () => void = () => {
-        this._updateTrackedSelection(this.props.buildHighlight);
+        this._updateTrackedSelection();
 
         if (this.state.mouseState === "down") {
             this.setState({

package/src/hints-renderer.jsx

@@ -26,6 +26,8 @@ import type {APIOptionsWithDefaults} from "./types.js";
 type Props = {|
     ...React.ElementConfig<Renderer>,
     className?: string,
+    // note (mcurtis): I think this should be $ReadOnlyArray<PerseusRenderer>,
+    // but things spiraled out of control when I tried to change it
     hints: $ReadOnlyArray<$FlowFixMe>,
     hintsVisible?: number,
 |};
@@ -72,11 +74,18 @@ class HintsRenderer extends React.Component<Props, State> {
             this._cacheHintImages();
         }
 
+        // Force number to make Flow happy
+        const prevHintsVisible = prevProps.hintsVisible || 0;
+        const nextHintsVisible = this.props.hintsVisible || 0;
+
         // When a new hint is displayed we immediately focus it
-        // $FlowFixMe[invalid-compare]
-        if (prevProps.hintsVisible < this.props.hintsVisible) {
-            // $FlowFixMe[unsafe-addition]
-            const pos = this.props.hintsVisible - 1;
+        // (keeping within the boundaries of hint count)
+        if (
+            prevHintsVisible < nextHintsVisible &&
+            nextHintsVisible <= this.props.hints.length &&
+            nextHintsVisible >= 0
+        ) {
+            const pos = nextHintsVisible - 1;
             // $FlowFixMe[prop-missing]
             // $FlowFixMe[incompatible-use]
             ReactDOM.findDOMNode(this.refs["hintRenderer" + pos]).focus(); // eslint-disable-line react/no-string-refs

package/src/mixins/__tests__/widget-prop-blacklist_test.js

@@ -0,0 +1,23 @@
+// @flow
+
+import {removeDenylistProps} from "../widget-prop-blacklist.js";
+
+describe("removeDenylistProps", () => {
+    it("removes props that are in denylist from input", () => {
+        // Arrange
+        const props = {
+            // These props are not on the denylist
+            foo: "bar",
+            gandalf: "awesome",
+            // These props are on the denylist
+            key: "f-sharp",
+            id: 42,
+        };
+
+        // Act
+        const result = removeDenylistProps(props);
+
+        // Assert
+        expect(result).toStrictEqual({foo: "bar", gandalf: "awesome"});
+    });
+});

package/src/mixins/widget-prop-blacklist.js

@@ -9,8 +9,10 @@
  * circular JSON structures sometimes).
  *
  * This blacklists things that we know don't need to be serialized.
+ *
+ * TODO(TB): Go through and update usage of BLACKLIST to DENYLIST: https://khanacademy.atlassian.net/browse/LP-13149?atlOrigin=eyJpIjoiNTI0Y2UwNzQ0MzA4NDYzOGI1YWRmNjEwY2E5YzZlZWUiLCJwIjoiaiJ9
  */
-export default [
+const denylist = [
     // standard props "added" by react
     // (technically the renderer still adds them)
     "key",
@@ -34,3 +36,15 @@ export default [
     "trackInteraction",
     "keypadElement",
 ];
+
+export const removeDenylistProps = (props: Object): Object => {
+    const newProps = {...props};
+    for (const prop of denylist) {
+        if (prop in newProps) {
+            delete newProps[prop];
+        }
+    }
+    return newProps;
+};
+
+export default denylist;

package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap

@@ -218,7 +218,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                               type="button"
                             >
                               <div
-                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
+                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
                               >
                                 <div
                                   class="iconWrapper_17y0hv9"
@@ -234,7 +234,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                       data-test-id="choice-icon__library-choice-icon"
                                       style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
                                     >
-                                      A
+                                      <div
+                                        class="innerWrapper_177sg8x"
+                                      >
+                                        A
+                                      </div>
                                     </div>
                                   </span>
                                 </div>
@@ -389,7 +393,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                               type="button"
                             >
                               <div
-                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
+                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
                               >
                                 <div
                                   class="iconWrapper_17y0hv9"
@@ -405,7 +409,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                       data-test-id="choice-icon__library-choice-icon"
                                       style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
                                     >
-                                      B
+                                      <div
+                                        class="innerWrapper_177sg8x"
+                                      >
+                                        B
+                                      </div>
                                     </div>
                                   </span>
                                 </div>
@@ -560,7 +568,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                               type="button"
                             >
                               <div
-                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
+                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
                               >
                                 <div
                                   class="iconWrapper_17y0hv9"
@@ -576,7 +584,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                       data-test-id="choice-icon__library-choice-icon"
                                       style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
                                     >
-                                      C
+                                      <div
+                                        class="innerWrapper_177sg8x"
+                                      >
+                                        C
+                                      </div>
                                     </div>
                                   </span>
                                 </div>
@@ -731,7 +743,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                               type="button"
                             >
                               <div
-                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
+                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
                               >
                                 <div
                                   class="iconWrapper_17y0hv9"
@@ -747,7 +759,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                       data-test-id="choice-icon__library-choice-icon"
                                       style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
                                     >
-                                      D
+                                      <div
+                                        class="innerWrapper_177sg8x"
+                                      >
+                                        D
+                                      </div>
                                     </div>
                                   </span>
                                 </div>
@@ -902,7 +918,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                               type="button"
                             >
                               <div
-                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
+                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
                               >
                                 <div
                                   class="iconWrapper_17y0hv9"
@@ -918,7 +934,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                       data-test-id="choice-icon__library-choice-icon"
                                       style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
                                     >
-                                      E
+                                      <div
+                                        class="innerWrapper_177sg8x"
+                                      >
+                                        E
+                                      </div>
                                     </div>
                                   </span>
                                 </div>

package/src/styles/articles.less

@@ -178,8 +178,6 @@
         position: relative;
 
         &:before {
-            background: linear-gradient(to right,
-                rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
             bottom: 0;
             content: "";
             position: absolute;

package/src/styles/perseus-renderer.less

@@ -107,7 +107,7 @@
     }
 
     div.paragraph {
-        font-family: "Noto Serif", serif;
+        font-family: "Lato", sans-serif;
         font-weight: 400;
         font-size: 18px;
         line-height: 22px;

package/src/styles/widgets/passage.less

@@ -50,6 +50,7 @@
         font-weight: 400;
         font-size: 20px;
         line-height: 24px;
+        text-indent: 20px;
 
         span {
             text-indent: 0;

package/src/types.js

@@ -491,7 +491,7 @@ export type WidgetProps<RenderProps, Rubric> = {|
     questionCompleted?: boolean,
     onFocus: (blurPath: FocusPath) => void,
     onBlur: (blurPath: FocusPath) => void,
-    findWidgets: (FilterCriterion) => any,
+    findWidgets: (FilterCriterion) => $ReadOnlyArray<Widget>,
     reviewModeRubric: Rubric,
     onChange: ChangeHandler,
     trackInteraction: (extraData?: any) => void,

package/src/widgets/__tests__/__snapshots__/dropdown_test.jsx.snap

@@ -23,11 +23,19 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                >
+                  3 items
+                </span>
                 <button
                   aria-expanded="true"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -94,11 +102,17 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1"
-                  tabindex="0"
                   type="button"
                 >
                   <span

package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap

@@ -33,7 +33,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 class="perseus-graded-group"
               >
                 <div
-                  class="title_6pk9ag"
+                  class="title_1lagzkb"
                 >
                   Problem 1a
                 </div>
@@ -270,7 +270,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 class="perseus-graded-group"
               >
                 <div
-                  class="title_6pk9ag"
+                  class="title_1lagzkb"
                 >
                   Problem 1b
                 </div>
@@ -507,7 +507,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 class="perseus-graded-group"
               >
                 <div
-                  class="title_6pk9ag"
+                  class="title_1lagzkb"
                 >
                   Problem 1c
                 </div>