@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/widgets/sequence-editor.jsx

@@ -0,0 +1,205 @@
+/* eslint-disable jsx-a11y/anchor-is-valid, no-alert, react/sort-comp */
+// @flow
+import {components, icons, ApiOptions} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import Editor from "../editor.jsx";
+
+const {InlineIcon} = components;
+const {iconCircleArrowDown, iconCircleArrowUp, iconPlus, iconTrash} = icons;
+
+type StepControlButtonProps = $FlowFixMe;
+
+class StepControlButton extends React.Component<StepControlButtonProps> {
+    render(): React.Node {
+        return (
+            <a
+                href="#"
+                className={
+                    "step-control-button " +
+                    "simple-button " +
+                    "simple-button--small " +
+                    "orange"
+                }
+                onClick={(e) => {
+                    e.preventDefault();
+                    this.props.onClick();
+                }}
+            >
+                <InlineIcon {...this.props.icon} />
+            </a>
+        );
+    }
+}
+
+type SequenceEditorProps = $FlowFixMe;
+
+class SequenceEditor extends React.Component<SequenceEditorProps> {
+    static propTypes = {
+        json: PropTypes.arrayOf(
+            PropTypes.shape({
+                content: PropTypes.string,
+                widgets: PropTypes.objectOf(PropTypes.any),
+                images: PropTypes.objectOf(PropTypes.any),
+            }),
+        ),
+        apiOptions: ApiOptions.propTypes,
+        onChange: PropTypes.func.isRequired,
+    };
+
+    static widgetName: "sequence" = "sequence";
+
+    static defaultProps: SequenceEditorProps = {
+        json: [
+            {
+                content: "",
+                widgets: {},
+                images: {},
+            },
+        ],
+    };
+
+    render(): React.Node {
+        return (
+            <div className="perseus-sequence-editor">
+                {_.map(this.props.json, (json, i) => {
+                    return (
+                        <div key={i}>
+                            Step {i + 1}
+                            <div
+                                style={{
+                                    display: "inline-block",
+                                    float: "right",
+                                }}
+                            >
+                                {i + 1 < this.props.json.length && (
+                                    <StepControlButton
+                                        icon={iconCircleArrowDown}
+                                        onClick={() => {
+                                            this._handleMoveStepLater(i);
+                                        }}
+                                    />
+                                )}
+                                {i > 0 && (
+                                    <StepControlButton
+                                        icon={iconCircleArrowUp}
+                                        onClick={() => {
+                                            this._handleMoveStepEarlier(i);
+                                        }}
+                                    />
+                                )}
+                                <StepControlButton
+                                    icon={iconTrash}
+                                    onClick={() => {
+                                        const msg =
+                                            "Are you sure you " +
+                                            "want to remove step " +
+                                            (i + 1) +
+                                            "?";
+                                        if (confirm(msg)) {
+                                            this._handleRemoveStep(i);
+                                        }
+                                    }}
+                                />
+                                <StepControlButton
+                                    icon={iconPlus}
+                                    onClick={() => {
+                                        this._handleAddStepAfter(i);
+                                    }}
+                                />
+                            </div>
+                            <Editor
+                                ref={"editor" + i}
+                                apiOptions={this.props.apiOptions}
+                                content={json.content}
+                                widgets={json.widgets}
+                                images={json.images}
+                                widgetEnabled={true}
+                                immutableWidgets={false}
+                                onChange={_.partial(
+                                    this._handleEditorChange,
+                                    i,
+                                )}
+                            />
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+
+    _handleEditorChange: (number, $FlowFixMe) => void = (i, newProps) => {
+        const steps = _.clone(this.props.json);
+        steps[i] = _.extend({}, steps[i], newProps);
+        this.props.onChange({json: steps});
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return {
+            json: _.times(this.props.json.length, (i) => {
+                // eslint-disable-next-line react/no-string-refs
+                return this.refs["editor" + i].serialize();
+            }),
+        };
+    };
+
+    _handleMoveStepEarlier: (number) => void = (i) => {
+        if (i === 0) {
+            return;
+        }
+        const steps = _.clone(this.props.json);
+        const step = steps[i];
+        steps.splice(i, 1);
+        steps.splice(i - 1, 0, step);
+        this.props.onChange({
+            json: steps,
+        });
+    };
+
+    _handleMoveStepLater: (number) => void = (i) => {
+        const steps = _.clone(this.props.json);
+        if (i + 1 === steps.length) {
+            return;
+        }
+        const step = steps[i];
+        steps.splice(i, 1);
+        steps.splice(i + 1, 0, step);
+        this.props.onChange({
+            json: steps,
+        });
+    };
+
+    _handleAddStepAfter: (number) => void = (i) => {
+        // We do a full serialization here because we
+        // might be copying widgets:
+        const steps = _.clone(this.props.json);
+        // Here we do magic to allow you to copy-paste
+        // things from the previous section into the new
+        // section while preserving widgets.
+        // To enable this, we preserve the widgets
+        // object for the new section, but wipe out
+        // the content.
+        const newStep =
+            i >= 0
+                ? {
+                      widgets: steps[i].widgets,
+                  }
+                : {};
+        steps.splice(i + 1, 0, newStep);
+        this.props.onChange({
+            json: steps,
+        });
+    };
+
+    _handleRemoveStep: (number) => void = (i) => {
+        const steps = _.clone(this.props.json);
+        steps.splice(i, 1);
+        this.props.onChange({
+            json: steps,
+        });
+    };
+}
+
+export default SequenceEditor;

package/src/widgets/simple-markdown-tester-editor.jsx

@@ -0,0 +1,84 @@
+/* eslint-disable react/sort-comp */
+// @flow
+/**
+ * This is the editor for the simple-markdown-tester widget. This is what shows
+ * up on the left side of the screen in the demo. Only the question writer
+ * sees this.
+ */
+import {Changeable, EditorJsonify} from "@khanacademy/perseus";
+import * as React from "react";
+
+type TextAreaProps = $FlowFixMe;
+
+class TextArea extends React.Component<TextAreaProps> {
+    render(): React.Node {
+        return (
+            <textarea
+                // eslint-disable-next-line react/no-string-refs
+                ref="input"
+                value={this.props.value || ""}
+                onChange={this.changeValue}
+            />
+        );
+    }
+
+    focus = () => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.input.focus();
+        return true;
+    };
+
+    changeValue = (e) => {
+        // Translating from the js event e to the value
+        // of the textbox to send to onChange
+        this.props.onChange(e.target.value);
+    };
+}
+
+type SimpleMarkdownTesterEditorProps = $FlowFixMe;
+
+class SimpleMarkdownTesterEditor extends React.Component<SimpleMarkdownTesterEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+    };
+
+    static widgetName: "simple-markdown-tester" = "simple-markdown-tester";
+
+    static defaultProps: SimpleMarkdownTesterEditorProps = {
+        value: "",
+    };
+
+    render(): React.Node {
+        return (
+            <div>
+                <label>
+                    <div>Simple markdown contents:</div>
+                    <div>
+                        <TextArea
+                            value={this.props.value}
+                            onChange={this.change("value")}
+                            // eslint-disable-next-line react/no-string-refs
+                            ref="input"
+                        />
+                    </div>
+                </label>
+            </div>
+        );
+    }
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    focus: () => boolean = () => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.input.focus();
+        return true;
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+}
+
+export default SimpleMarkdownTesterEditor;

package/src/widgets/simple-markdown-tester.jsx

@@ -0,0 +1,91 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import {Changeable, PerseusMarkdown} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const mdParse = PerseusMarkdown.parse;
+const mdOutput = PerseusMarkdown.basicOutput;
+
+type Props = $FlowFixMe;
+
+class SimpleMarkdownTester extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        value: PropTypes.string,
+    };
+
+    static defaultProps: Props = {
+        value: "",
+    };
+
+    /**
+     * This is the widget's grading function.
+     *
+     * simpleValidate generally defers to this function
+     *
+     * state is usually the result of toJSON on the widget
+     * rubric is the result of calling toJSON() on the editor
+     */
+    static validate(state: $FlowFixMe, rubric: $FlowFixMe): $FlowFixMe {
+        return {
+            type: "points",
+            earned: 0,
+            total: 0,
+            message: null,
+        };
+    }
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    toJSON: () => {...} = () => {
+        return {};
+    };
+
+    render(): React.Node {
+        const parsed = mdParse(this.props.value);
+        const output = mdOutput(parsed);
+        return <div>{output}</div>;
+    }
+
+    /**
+     * Widgets that are focusable should add a focus method that returns
+     * true if focusing succeeded. The first such widget found will be
+     * focused on page load.
+     */
+    focus: () => boolean = () => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.input.focus();
+        return true;
+    };
+
+    /**
+     * simpleValidate is called for grading. Rubric is the result of calling
+     * toJSON() on the editor that created this widget.
+     *
+     * Should return an object representing the grading result, such as
+     * {
+     *     type: "points",
+     *     earned: 1,
+     *     total: 1,
+     *     message: null
+     * }
+     */
+    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
+        return SimpleMarkdownTester.validate(this.toJSON(), rubric);
+    };
+}
+
+/**
+ * For this widget to work, we must import this file in src/all-widgets.js
+ */
+export default {
+    name: "simple-markdown-tester",
+    displayName: "Simple Markdown Tester",
+    hidden: true, // Hides this widget from the Perseus.Editor widget select
+    widget: SimpleMarkdownTester,
+    transform: _.identity,
+};

package/src/widgets/simulator-editor.jsx

@@ -0,0 +1,144 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {InfoTip, NumberInput} = components;
+
+const maxTrials = 5000;
+
+type Props = $FlowFixMe;
+
+class SimulatorEditor extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        xAxisLabel: PropTypes.string,
+        yAxisLabel: PropTypes.string,
+        numTrials: PropTypes.number,
+        proportionLabel: PropTypes.string,
+        proportionOrPercentage: PropTypes.string,
+    };
+
+    static widgetName: string = "simulator";
+
+    static defaultProps: Props = {
+        xAxisLabel: "Proportion (%)",
+        yAxisLabel: "Number of times seen",
+        numTrials: 100,
+        proportionLabel: "Underlying proportion",
+        proportionOrPercentage: "proportion",
+    };
+
+    render(): React.Node {
+        return (
+            <div className="perseus-widget-simulator">
+                <div>
+                    {i18n._("X-Axis Label")}:
+                    <input
+                        type="text"
+                        className="graph-settings-axis-label"
+                        value={this.props.xAxisLabel}
+                        onChange={_.partial(
+                            this.handleTargetValueChange,
+                            "xAxisLabel",
+                        )}
+                    />
+                </div>
+                <div>
+                    {i18n._("Y-Axis Label")}:
+                    <input
+                        type="text"
+                        className="graph-settings-axis-label"
+                        value={this.props.yAxisLabel}
+                        onChange={_.partial(
+                            this.handleTargetValueChange,
+                            "yAxisLabel",
+                        )}
+                    />
+                </div>
+                <div>
+                    {i18n._('"True Proportion" Label')}:
+                    <input
+                        type="text"
+                        className="graph-settings-axis-label"
+                        value={this.props.proportionLabel}
+                        onChange={_.partial(
+                            this.handleTargetValueChange,
+                            "proportionLabel",
+                        )}
+                    />
+                    <InfoTip>
+                        <p>
+                            This text will be displayed next to the box in which
+                            the user enters the sample proportion for their
+                            simulation. For example, if your question is about
+                            surveying for approval ratings, you might want this
+                            to say "Sample approval rating".
+                        </p>
+                    </InfoTip>
+                </div>
+                <div>
+                    {i18n._("Proportion or Percentage")}:
+                    <select
+                        className="perseus-widget-dropdown"
+                        value={this.props.proportionOrPercentage}
+                        onChange={_.partial(
+                            this.handleTargetValueChange,
+                            "proportionOrPercentage",
+                        )}
+                    >
+                        <option key="proportion" value="proportion">
+                            Proportion
+                        </option>
+                        <option key="percentage" value="percentage">
+                            Percentage
+                        </option>
+                    </select>
+                    <InfoTip>
+                        <p>
+                            Do you want the user to describe their simulation in
+                            terms of a proportion or a percentage?
+                        </p>
+                    </InfoTip>
+                </div>
+                <div>
+                    {i18n._("Number of trials")}:
+                    <NumberInput
+                        value={this.props.numTrials}
+                        checkValidity={(val) => {
+                            return val >= 0 && val <= maxTrials;
+                        }}
+                        onChange={this.change("numTrials")}
+                    />
+                    <InfoTip>
+                        <p>
+                            This controls the number of trials used in the
+                            simulation. For example, if you set this to 50, then
+                            the survey will be conducted 50 times. Warning:
+                            setting this too high (i.e., greater than 5000 or
+                            so) will freeze the page.
+                        </p>
+                    </InfoTip>
+                </div>
+            </div>
+        );
+    }
+
+    change: (...args: $ReadOnlyArray<mixed>) => $FlowFixMe = (...args) => {
+        // $FlowFixMe[incompatible-call]
+        return Changeable.change.apply(this, args);
+    };
+
+    handleTargetValueChange: (string, $FlowFixMe) => void = (propName, e) => {
+        this.change(propName, e.target.value);
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+}
+
+export default SimulatorEditor;

package/src/widgets/sorter-editor.jsx

@@ -0,0 +1,100 @@
+/* eslint-disable react/forbid-prop-types */
+// @flow
+import {components} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {InfoTip, PropCheckBox, TextListEditor} = components;
+
+const HORIZONTAL = "horizontal";
+const VERTICAL = "vertical";
+
+type Props = $FlowFixMe;
+
+class SorterEditor extends React.Component<Props> {
+    static propTypes = {
+        correct: PropTypes.array,
+        layout: PropTypes.oneOf([HORIZONTAL, VERTICAL]),
+        padding: PropTypes.bool,
+    };
+
+    static widgetName: "sorter" = "sorter";
+
+    static defaultProps: Props = {
+        correct: ["$x$", "$y$", "$z$"],
+        layout: HORIZONTAL,
+        padding: true,
+    };
+
+    onLayoutChange: (SyntheticInputEvent<>) => void = (e) => {
+        this.props.onChange({layout: e.target.value});
+    };
+
+    serialize: ($FlowFixMe) => void = () => {
+        return _.pick(this.props, "correct", "layout", "padding");
+    };
+
+    render(): React.Node {
+        const editor = this;
+
+        return (
+            <div>
+                <div>
+                    {" "}
+                    Correct answer:{" "}
+                    <InfoTip>
+                        <p>
+                            Enter the correct answer (in the correct order)
+                            here. The preview on the right will have the cards
+                            in a randomized order, which is how the student will
+                            see them.
+                        </p>
+                    </InfoTip>
+                </div>
+                <TextListEditor
+                    options={this.props.correct}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onChange={function (options, cb) {
+                        editor.props.onChange({correct: options}, cb);
+                    }}
+                    layout={this.props.layout}
+                />
+                <div>
+                    <label>
+                        {" "}
+                        Layout:{" "}
+                        <select
+                            value={this.props.layout}
+                            onChange={this.onLayoutChange}
+                        >
+                            <option value={HORIZONTAL}>Horizontal</option>
+                            <option value={VERTICAL}>Vertical</option>
+                        </select>
+                    </label>
+                    <InfoTip>
+                        <p>
+                            Use the horizontal layout for short text and small
+                            images. The vertical layout is best for longer text
+                            and larger images.
+                        </p>
+                    </InfoTip>
+                </div>
+                <div>
+                    <PropCheckBox
+                        label="Padding:"
+                        padding={this.props.padding}
+                        onChange={this.props.onChange}
+                    />
+                    <InfoTip>
+                        <p>
+                            Padding is good for text, but not needed for images.
+                        </p>
+                    </InfoTip>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default SorterEditor;