@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/widgets/dropdown-editor.jsx

@@ -0,0 +1,201 @@
+// @flow
+import {components, icons, EditorJsonify} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import _ from "underscore";
+
+const {InfoTip, InlineIcon} = components;
+const {iconPlus, iconTrash} = icons;
+
+type Props = $FlowFixMe;
+
+class DropdownEditor extends React.Component<Props> {
+    static propTypes = {
+        choices: PropTypes.arrayOf(
+            PropTypes.shape({
+                content: PropTypes.string,
+                correct: PropTypes.bool,
+            }),
+        ),
+        placeholder: PropTypes.string,
+    };
+
+    static widgetName: string = "dropdown";
+
+    static defaultProps: Props = {
+        placeholder: "",
+        choices: [
+            {
+                content: "",
+                correct: false,
+            },
+        ],
+    };
+
+    onPlaceholderChange: (SyntheticInputEvent<>) => void = (e) => {
+        const placeholder = e.target.value;
+        this.props.onChange({placeholder: placeholder});
+    };
+
+    onCorrectChange: (number, SyntheticInputEvent<>) => void = (
+        choiceIndex,
+    ) => {
+        const choices = _.map(this.props.choices, function (choice, i) {
+            return _.extend({}, choice, {
+                correct: i === choiceIndex,
+            });
+        });
+        this.props.onChange({choices: choices});
+    };
+
+    onContentChange: (number, SyntheticInputEvent<>) => void = (
+        choiceIndex,
+        e,
+    ) => {
+        const choices = this.props.choices.slice();
+        const choice = _.clone(choices[choiceIndex]);
+        choice.content = e.target.value;
+        choices[choiceIndex] = choice;
+        this.props.onChange({choices: choices});
+    };
+
+    addChoice: (SyntheticMouseEvent<>) => void = (e) => {
+        e.preventDefault();
+
+        const choices = this.props.choices;
+        const blankChoice = {content: "", correct: false};
+        this.props.onChange(
+            {
+                choices: choices.concat([blankChoice]),
+            },
+            this.focus.bind(this, choices.length),
+        );
+    };
+
+    removeChoice: (number, SyntheticMouseEvent<>) => void = (
+        choiceIndex,
+        e,
+    ) => {
+        e.preventDefault();
+        const choices = _(this.props.choices).clone();
+        choices.splice(choiceIndex, 1);
+        this.props.onChange({
+            choices: choices,
+        });
+    };
+
+    focus: (number) => boolean = (i) => {
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[prop-missing]
+        ReactDOM.findDOMNode(this.refs["editor" + i]).focus(); // eslint-disable-line react/no-string-refs
+        return true;
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.Node {
+        const dropdownGroupName = _.uniqueId("perseus_dropdown_");
+        return (
+            <div className="perseus-widget-dropdown">
+                <div className="dropdown-info">
+                    Dropdown
+                    <InfoTip>
+                        <p>
+                            The drop down is useful for making inequalities in a
+                            custom format. We normally use the symbols {"<"},{" "}
+                            {">"}, ≤, ≥ (in that order) which you can copy into
+                            the choices. When possible, use the "multiple
+                            choice" answer type instead.
+                        </p>
+                    </InfoTip>
+                </div>
+                <div className="dropdown-placeholder">
+                    <input
+                        type="text"
+                        placeholder="Placeholder value"
+                        value={this.props.placeholder}
+                        onChange={this.onPlaceholderChange}
+                    />
+                    <InfoTip>
+                        <p>
+                            This value will appear as the drop down default. It
+                            should give the user some indication of the values
+                            available in the drop down itself, e.g.,
+                            Yes/No/Maybe.
+                        </p>
+                    </InfoTip>
+                </div>
+                <div className="clearfix" />
+                <ul className="dropdown-choices">
+                    {this.props.choices.map(function (choice, i) {
+                        const checkedClass = choice.correct
+                            ? "correct"
+                            : "incorrect";
+
+                        return (
+                            <li key={"" + i}>
+                                <div>
+                                    <input
+                                        ref={"radio" + i}
+                                        type="radio"
+                                        name={dropdownGroupName}
+                                        checked={
+                                            choice.correct ? "checked" : ""
+                                        }
+                                        // eslint-disable-next-line react/jsx-no-bind
+                                        onChange={this.onCorrectChange.bind(
+                                            this,
+                                            i,
+                                        )}
+                                        value={i}
+                                    />
+                                    <input
+                                        type="text"
+                                        ref={"editor" + i}
+                                        // eslint-disable-next-line react/jsx-no-bind
+                                        onChange={this.onContentChange.bind(
+                                            this,
+                                            i,
+                                        )}
+                                        className={checkedClass}
+                                        value={choice.content}
+                                    />
+                                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                    <a
+                                        href="#"
+                                        className="simple-button orange"
+                                        // eslint-disable-next-line react/jsx-no-bind
+                                        onClick={this.removeChoice.bind(
+                                            this,
+                                            i,
+                                        )}
+                                    >
+                                        <span className="remove-choice">
+                                            <InlineIcon {...iconTrash} />
+                                        </span>
+                                    </a>
+                                </div>
+                            </li>
+                        );
+                    }, this)}
+                </ul>
+
+                <div className="add-choice-container">
+                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                    <a
+                        href="#"
+                        className="simple-button orange"
+                        onClick={this.addChoice}
+                    >
+                        <InlineIcon {...iconPlus} /> Add a choice{" "}
+                    </a>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default DropdownEditor;

package/src/widgets/example-graphie-widget-editor.jsx

@@ -0,0 +1,70 @@
+// @flow
+import {Changeable, EditorJsonify} from "@khanacademy/perseus";
+import * as React from "react";
+
+import ExampleGraphie from "./example-graphie-widget.jsx";
+
+const ExampleGraphieWidget = ExampleGraphie.widget;
+
+type Props = $FlowFixMe;
+
+/**
+ * This is the widget's editor. This is what shows up on the left side
+ * of the screen in the demo page. Only the question writer sees this.
+ */
+class ExampleGraphieWidgetEditor extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+    };
+
+    static widgetName: "example-graphie-widget" = "example-graphie-widget";
+
+    static defaultProps: Props = {
+        correct: [4, 4],
+        graph: {
+            box: [340, 340],
+            labels: ["x", "y"],
+            range: [
+                [-10, 10],
+                [-10, 10],
+            ],
+            step: [1, 1],
+            gridStep: [1, 1],
+            valid: true,
+            backgroundImage: null,
+            markings: "grid",
+            showProtractor: false,
+        },
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    handleChange: ($FlowFixMe) => void = (newProps) => {
+        if (newProps.coord) {
+            this.change({
+                correct: newProps.coord,
+            });
+        }
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.Node {
+        return (
+            <div>
+                <ExampleGraphieWidget
+                    graph={this.props.graph}
+                    coord={this.props.correct}
+                    onChange={this.handleChange}
+                    apiOptions={this.props.apiOptions}
+                />
+            </div>
+        );
+    }
+}
+
+export default ExampleGraphieWidgetEditor;

package/src/widgets/example-graphie-widget.jsx

@@ -0,0 +1,175 @@
+/* eslint-disable no-unused-vars, react/forbid-prop-types, react/sort-comp */
+// @flow
+/**
+ * This is an example graphie-using widget
+ *
+ * TODO(jack): Add more comments
+ */
+
+import {number as knumber, point as kpoint} from "@khanacademy/kmath";
+import {
+    components,
+    ApiOptions,
+    Changeable,
+    Util,
+    WidgetJsonifyDeprecated,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import type {Coord, WidgetExports} from "@khanacademy/perseus";
+
+const {Graphie} = components;
+
+// $FlowFixMe[prop-missing]
+const MovablePoint = Graphie.MovablePoint;
+
+type Props = $FlowFixMe;
+
+/**
+ * This is the widget's renderer. It shows up in the right column
+ * in the demo, and is what is visible to users, and where
+ * users enter their answers.
+ */
+class ExampleGraphieWidget extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        apiOptions: ApiOptions.propTypes,
+
+        graph: PropTypes.object.isRequired,
+        coord: PropTypes.arrayOf(PropTypes.number),
+    };
+
+    static defaultProps: Props = {
+        // We want to allow our coord to be null to test if the
+        // user has interacted with this widget yet when grading it
+        coord: null,
+        graph: {
+            box: [400, 400],
+            labels: ["x", "y"],
+            range: [
+                [-10, 10],
+                [-10, 10],
+            ],
+            step: [1, 1],
+            gridStep: [1, 1],
+            valid: true,
+            backgroundImage: null,
+            markings: "grid",
+            showProtractor: false,
+        },
+    };
+
+    /**
+     * This is the widget's grading function
+     */
+    static validate(state: $FlowFixMe, rubric: $FlowFixMe): $FlowFixMe {
+        if (state.coord == null) {
+            return {
+                type: "invalid",
+                message: null,
+            };
+        }
+        if (kpoint.equal(state.coord, rubric.correct)) {
+            return {
+                type: "points",
+                earned: 1,
+                total: 1,
+                message: null,
+            };
+        }
+        return {
+            type: "points",
+            earned: 0,
+            total: 1,
+            message: null,
+        };
+    }
+
+    getUserInput: () => $FlowFixMe = () => {
+        return WidgetJsonifyDeprecated.getUserInput.call(this);
+    };
+
+    render(): React.Node {
+        return (
+            <Graphie
+                // eslint-disable-next-line react/no-string-refs
+                ref="graphie"
+                box={this.props.graph.box}
+                range={this.props.graph.range}
+                options={this.props.graph}
+                setup={this.setupGraphie}
+                setDrawingAreaAvailable={
+                    this.props.apiOptions.setDrawingAreaAvailable
+                }
+            >
+                <MovablePoint
+                    pointSize={5}
+                    coord={this.props.coord || [0, 0]}
+                    constraints={[
+                        MovablePoint.constraints.snap(),
+                        MovablePoint.constraints.bound(),
+                    ]}
+                    onMove={this.movePoint}
+                />
+            </Graphie>
+        );
+    }
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    movePoint: (Coord) => void = (newCoord) => {
+        this.change({
+            coord: newCoord,
+        });
+    };
+
+    _getGridConfig: ($FlowFixMe) => $FlowFixMe = (options) => {
+        return _.map(options.step, function (step, i) {
+            return Util.gridDimensionConfig(
+                step,
+                options.range[i],
+                options.box[i],
+                options.gridStep[i],
+            );
+        });
+    };
+
+    setupGraphie: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (
+        graphie,
+        options,
+    ) => {
+        const gridConfig = this._getGridConfig(options);
+        graphie.graphInit({
+            range: options.range,
+            scale: _.pluck(gridConfig, "scale"),
+            axisArrows: "<->",
+            labelFormat: function (s) {
+                return "\\small{" + s + "}";
+            },
+            gridStep: options.gridStep,
+            tickStep: _.pluck(gridConfig, "tickStep"),
+            labelStep: 1,
+            unityLabels: _.pluck(gridConfig, "unityLabel"),
+        });
+        graphie.label([0, options.range[1][1]], options.labels[1], "above");
+    };
+
+    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
+        return ExampleGraphieWidget.validate(this.getUserInput(), rubric);
+    };
+}
+
+/**
+ * For this widget to work, we must export it.
+ * We also must import this file in src/all-widgets.js
+ */
+export default ({
+    name: "example-graphie-widget",
+    displayName: "Example Graphie Widget",
+    hidden: true, // Hides this widget from the Perseus.Editor widget select
+    widget: ExampleGraphieWidget,
+}: WidgetExports<typeof ExampleGraphieWidget>);

package/src/widgets/example-widget-editor.jsx

@@ -0,0 +1,60 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import {Changeable, EditorJsonify} from "@khanacademy/perseus";
+import * as React from "react";
+
+type Props = $FlowFixMe;
+
+/**
+ * This is the widget's editor. This is what shows up on the left side
+ * of the screen in the demo. Only the question writer sees this.
+ */
+class ExampleWidgetEditor extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+    };
+
+    static widgetName: "example-widget" = "example-widget";
+
+    static defaultProps: Props = {
+        correct: "",
+    };
+
+    handleAnswerChange: (SyntheticInputEvent<>) => void = (event) => {
+        this.change({
+            correct: event.target.value,
+        });
+    };
+
+    render(): React.Node {
+        return (
+            <div>
+                <label>
+                    Correct answer:
+                    <input
+                        value={this.props.correct}
+                        onChange={this.handleAnswerChange}
+                        // eslint-disable-next-line react/no-string-refs
+                        ref="input"
+                    />
+                </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 ExampleWidgetEditor;

package/src/widgets/example-widget.jsx

@@ -0,0 +1,153 @@
+/* eslint-disable react/sort-comp */
+// @flow
+/**
+ * This is a simple number-entry widget
+ * It is not as powerful as number-input, but has a simpler, more
+ * representative structure as an example widget, and is easier to
+ * test new ideas on.
+ *
+ * TODO(jack): Add more comments
+ */
+import {Changeable} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import type {WidgetExports} from "@khanacademy/perseus";
+
+class TextInput extends React.Component<$FlowFixMe> {
+    render(): React.Node {
+        return (
+            <input
+                // 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);
+    };
+}
+
+/**
+ * This is the widget's renderer. It shows up in the right column
+ * in the demo, and is what is visible to users, and where
+ * users enter their answers.
+ */
+class ExampleWidget extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        value: PropTypes.string,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        value: "",
+    };
+
+    /**
+     * This is the widget's grading function. simpleValidate generally
+     * defers to this function.
+     *
+     * value is usually the result of getUserInput on the widget
+     * rubric is the result of calling serialize() on the editor
+     */
+    static validate(value: string, rubric: $FlowFixMe): $FlowFixMe {
+        if (value === "") {
+            return {
+                type: "invalid",
+                message:
+                    "It looks like you haven't answered all of the " +
+                    "question yet.",
+            };
+        }
+        if (value === rubric.correct) {
+            return {
+                type: "points",
+                earned: 1,
+                total: 1,
+                message: null,
+            };
+        }
+        return {
+            type: "points",
+            earned: 0,
+            total: 1,
+            message: null,
+        };
+    }
+
+    /**
+     * Tell our parent to update our props.
+     */
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    render(): React.Node {
+        return (
+            <TextInput
+                // eslint-disable-next-line react/no-string-refs
+                ref="input"
+                value={this.props.value}
+                onChange={this.change("value")}
+            />
+        );
+    }
+
+    getUserInput: () => string = () => {
+        return this.props.value;
+    };
+
+    /**
+     * 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
+     * getUserInput() 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 ExampleWidget.validate(this.getUserInput(), rubric);
+    };
+}
+
+/**
+ * For this widget to work, we must import this file in src/all-widgets.js
+ */
+export default ({
+    name: "example-widget",
+    displayName: "Example Widget",
+
+    // Tell the renderer what type of `display:` style we would like
+    // for the component wrapping this one.
+    defaultAlignment: "inline-block",
+
+    hidden: true, // Hides this widget from the Perseus.Editor widget select
+    widget: ExampleWidget,
+}: WidgetExports<typeof ExampleWidget>);