@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/widgets/lights-puzzle-editor.jsx

@@ -0,0 +1,267 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {InfoTip, NumberInput, PropCheckBox} = components;
+
+const MAX_SIZE = 8;
+
+// styling
+const CELL_PADDING = 5;
+
+const TABLE_STYLE = {
+    display: "table",
+    tableLayout: "fixed",
+};
+
+const ROW_STYLE = {
+    display: "table-row",
+};
+
+const CELL_STYLE = {
+    display: "table-cell",
+    padding: CELL_PADDING,
+};
+
+const BASE_TILE_STYLE = {
+    borderRadius: 10,
+    cursor: "pointer",
+};
+
+const PATTERNS = {
+    plus: () => [
+        [false, true, false],
+        [true, true, true],
+        [false, true, false],
+    ],
+    x: () => [
+        [true, false, true],
+        [false, true, false],
+        [true, false, true],
+    ],
+    "plus/x": (iter) => {
+        return iter % 2 ? PATTERNS.x() : PATTERNS.plus();
+    },
+};
+
+/**
+ * Clamps value to an integer in the range [min, max]
+ */
+const clampToInt = function (value, min, max) {
+    value = Math.floor(value);
+    value = Math.max(value, min);
+    value = Math.min(value, max);
+    return value;
+};
+
+// Returns a copy of the tiles, with tiles flipped according to
+// whether or not their y, x position satisfies the predicate
+const flipTilesPredicate = (oldCells, predicate) => {
+    return _.map(oldCells, (row, y) => {
+        return _.map(row, (cell, x) => {
+            return predicate(y, x) ? !cell : cell;
+        });
+    });
+};
+
+type TileProps = $FlowFixMe;
+
+// A single glowy cell
+class Tile extends React.Component<TileProps> {
+    static propTypes = {
+        value: PropTypes.bool.isRequired,
+        size: PropTypes.number.isRequired,
+    };
+
+    render(): React.Node {
+        const color = this.props.value ? "#55dd55" : "#115511";
+        const style = _.extend({}, BASE_TILE_STYLE, {
+            width: this.props.size,
+            height: this.props.size,
+            backgroundColor: color,
+        });
+        return <div style={style} onClick={this._flip} />;
+    }
+
+    _flip = () => {
+        this.props.onChange(!this.props.value);
+    };
+}
+
+type TileGridProps = $FlowFixMe;
+
+// A grid of glowy cells
+class TileGrid extends React.Component<TileGridProps> {
+    static propTypes = {
+        cells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)).isRequired,
+        size: PropTypes.number.isRequired,
+    };
+
+    render(): React.Node {
+        return (
+            <div style={TABLE_STYLE} className="no-select">
+                {_.map(this.props.cells, (row, y) => {
+                    return (
+                        <div key={y} style={ROW_STYLE}>
+                            {_.map(row, (cell, x) => {
+                                return (
+                                    <div key={x} style={CELL_STYLE}>
+                                        <Tile
+                                            value={cell}
+                                            size={this.props.size}
+                                            onChange={_.partial(
+                                                this.props.onChange,
+                                                y,
+                                                x,
+                                            )}
+                                        />
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+}
+
+type LightsPuzzleEditorProps = $FlowFixMe;
+
+// The widget editor
+class LightsPuzzleEditor extends React.Component<LightsPuzzleEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        startCells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)),
+        flipPattern: PropTypes.string.isRequired,
+        gradeIncompleteAsWrong: PropTypes.bool.isRequired,
+    };
+
+    static widgetName: "lights-puzzle" = "lights-puzzle";
+
+    static defaultProps: LightsPuzzleEditorProps = {
+        startCells: [
+            [false, false, false],
+            [false, false, false],
+            [false, false, false],
+        ],
+        flipPattern: "plus",
+        gradeIncompleteAsWrong: false,
+    };
+
+    _height: () => number = () => {
+        return this.props.startCells.length;
+    };
+
+    _width: () => number = () => {
+        if (this.props.startCells.length !== 0) {
+            return this.props.startCells[0].length;
+        }
+        return 0; // default to 0
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    render(): React.Node {
+        return (
+            <div>
+                <div>
+                    Width:
+                    <NumberInput
+                        value={this._width()}
+                        placeholder={5}
+                        onChange={this._changeWidth}
+                    />
+                    {", "}
+                    Height:
+                    <NumberInput
+                        value={this._height()}
+                        placeholder={5}
+                        onChange={this._changeHeight}
+                    />
+                </div>
+                <div>
+                    Flip pattern:
+                    <select
+                        value={this.props.flipPattern}
+                        onChange={this._handlePatternChange}
+                    >
+                        {_.map(_.keys(PATTERNS), (pattern, i) => {
+                            return (
+                                <option value={pattern} key={i}>
+                                    {pattern}
+                                </option>
+                            );
+                        })}
+                    </select>
+                </div>
+                <div>
+                    Grade incomplete puzzles as wrong:{" "}
+                    <PropCheckBox
+                        gradeIncompleteAsWrong={
+                            this.props.gradeIncompleteAsWrong
+                        }
+                        onChange={this.props.onChange}
+                    />
+                    <InfoTip>
+                        By default, incomplete puzzles are graded as empty.
+                    </InfoTip>
+                </div>
+                <div>Starting configuration:</div>
+                <div style={{overflowX: "auto"}}>
+                    <TileGrid
+                        cells={this.props.startCells}
+                        size={50}
+                        onChange={this._switchTile}
+                    />
+                </div>
+            </div>
+        );
+    }
+
+    _handlePatternChange: (SyntheticInputEvent<>) => void = (e) => {
+        this.change("flipPattern", e.target.value);
+    };
+
+    _changeWidth: (number) => void = (newWidth) => {
+        newWidth = clampToInt(newWidth, 1, MAX_SIZE);
+        this._truncateCells(newWidth, this._height());
+    };
+
+    _changeHeight: (number) => void = (newHeight) => {
+        newHeight = clampToInt(newHeight, 1, MAX_SIZE);
+        this._truncateCells(this._width(), newHeight);
+    };
+
+    _truncateCells: (number, number) => void = (newWidth, newHeight) => {
+        const newCells = _.times(newHeight, (y) => {
+            return _.times(newWidth, (x) => {
+                // explicitly cast the result to a boolean with !!
+                return !!(
+                    this.props.startCells[y] && this.props.startCells[y][x]
+                );
+            });
+        });
+
+        this.change({startCells: newCells});
+    };
+
+    _switchTile: (number, number) => void = (tileY, tileX) => {
+        const newCells = flipTilesPredicate(this.props.startCells, (y, x) => {
+            return y === tileY && x === tileX;
+        });
+
+        this.change({startCells: newCells});
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+}
+
+export default LightsPuzzleEditor;

package/src/widgets/matcher-editor.jsx

@@ -0,0 +1,147 @@
+/* eslint-disable react/forbid-prop-types, react/sort-comp */
+// @flow
+import {components} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {InfoTip, PropCheckBox, TextListEditor} = components;
+
+type Props = $FlowFixMe;
+
+class MatcherEditor extends React.Component<Props> {
+    static propTypes = {
+        left: PropTypes.array,
+        right: PropTypes.array,
+        labels: PropTypes.array,
+        orderMatters: PropTypes.bool,
+        padding: PropTypes.bool,
+    };
+
+    static widgetName: "matcher" = "matcher";
+
+    static defaultProps: Props = {
+        left: ["$x$", "$y$", "$z$"],
+        right: ["$1$", "$2$", "$3$"],
+        labels: ["test", "label"],
+        orderMatters: false,
+        padding: true,
+    };
+
+    render(): React.Node {
+        return (
+            <div className="perseus-matcher-editor">
+                <div>
+                    {" "}
+                    Correct answer:{" "}
+                    <InfoTip>
+                        <p>
+                            Enter the correct answers here. The preview on the
+                            right will show the cards in a randomized order,
+                            which is how the student will see them.
+                        </p>
+                    </InfoTip>
+                </div>
+                <div className="perseus-clearfix">
+                    <TextListEditor
+                        options={this.props.left}
+                        onChange={(options, cb) => {
+                            this.props.onChange({left: options}, cb);
+                        }}
+                        layout="vertical"
+                    />
+                    <TextListEditor
+                        options={this.props.right}
+                        onChange={(options, cb) => {
+                            this.props.onChange({right: options}, cb);
+                        }}
+                        layout="vertical"
+                    />
+                </div>
+                <span>
+                    {" "}
+                    Labels:{" "}
+                    <InfoTip>
+                        <p>These are entirely optional.</p>
+                    </InfoTip>
+                </span>
+                <div>
+                    <input
+                        type="text"
+                        defaultValue={this.props.labels[0]}
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onChange={this.onLabelChange.bind(this, 0)}
+                    />
+                    <input
+                        type="text"
+                        defaultValue={this.props.labels[1]}
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onChange={this.onLabelChange.bind(this, 1)}
+                    />
+                </div>
+                <div>
+                    <PropCheckBox
+                        label="Order of the matched pairs matters:"
+                        orderMatters={this.props.orderMatters}
+                        onChange={this.props.onChange}
+                    />
+                    <InfoTip>
+                        <p>
+                            With this option enabled, only the order provided
+                            above will be treated as correct. This is useful
+                            when ordering is significant, such as in the context
+                            of a proof.
+                        </p>
+                        <p>
+                            If disabled, pairwise matching is sufficient. To
+                            make this clear, the left column becomes fixed in
+                            the provided order and only the cards in the right
+                            column can be moved.
+                        </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>
+        );
+    }
+
+    onLabelChange: (number, SyntheticInputEvent<>) => void = (index, e) => {
+        const labels = _.clone(this.props.labels);
+        labels[index] = e.target.value;
+        this.props.onChange({labels: labels});
+    };
+
+    getSaveWarnings: () => $ReadOnlyArray<string> = () => {
+        if (this.props.left.length !== this.props.right.length) {
+            return [
+                "The two halves of the matcher have different numbers" +
+                    " of cards.",
+            ];
+        }
+        return [];
+    };
+
+    serialize: $FlowFixMe = () => {
+        return _.pick(
+            this.props,
+            "left",
+            "right",
+            "labels",
+            "orderMatters",
+            "padding",
+        );
+    };
+}
+
+export default MatcherEditor;

package/src/widgets/matrix-editor.jsx

@@ -0,0 +1,155 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import {
+    components,
+    Changeable,
+    EditorJsonify,
+    MatrixWidget,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import Editor from "../editor.jsx";
+
+const {RangeInput} = components;
+const Matrix = MatrixWidget.widget;
+
+// Really large matrices will cause issues with question formatting, so we
+// have to cap it at some point.
+const MAX_BOARD_SIZE = 6;
+
+const getMatrixSize = function (matrix) {
+    const matrixSize = [1, 1];
+
+    // We need to find the widest row and tallest column to get the correct
+    // matrix size.
+    _(matrix).each((matrixRow, row) => {
+        let rowWidth = 0;
+        _(matrixRow).each((matrixCol, col) => {
+            if (matrixCol != null && matrixCol.toString().length) {
+                rowWidth = col + 1;
+            }
+        });
+
+        // Matrix width:
+        matrixSize[1] = Math.max(matrixSize[1], rowWidth);
+
+        // Matrix height:
+        if (rowWidth > 0) {
+            matrixSize[0] = Math.max(matrixSize[0], row + 1);
+        }
+    });
+    return matrixSize;
+};
+
+type Props = $FlowFixMe;
+
+class MatrixEditor extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        matrixBoardSize: PropTypes.arrayOf(PropTypes.number).isRequired,
+        answers: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
+        prefix: PropTypes.string,
+        suffix: PropTypes.string,
+        cursorPosition: PropTypes.arrayOf(PropTypes.number),
+    };
+
+    static widgetName: "matrix" = "matrix";
+
+    static defaultProps: Props = {
+        matrixBoardSize: [3, 3],
+        answers: [[]],
+        prefix: "",
+        suffix: "",
+        cursorPosition: [0, 0],
+    };
+
+    render(): React.Node {
+        const matrixProps = _.extend(
+            {
+                numericInput: true,
+                onBlur: () => {},
+                onFocus: () => {},
+                trackInteraction: () => {},
+            },
+            this.props,
+        );
+        return (
+            <div className="perseus-matrix-editor">
+                <div className="perseus-widget-row">
+                    {" "}
+                    Max matrix size:{" "}
+                    <RangeInput
+                        value={this.props.matrixBoardSize}
+                        onChange={this.onMatrixBoardSizeChange}
+                        format={this.props.labelStyle}
+                        useArrowKeys={true}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <Matrix {...matrixProps} />
+                </div>
+                <div className="perseus-widget-row">
+                    {" "}
+                    Matrix prefix:{" "}
+                    <Editor
+                        // eslint-disable-next-line react/no-string-refs
+                        ref="prefix"
+                        apiOptions={this.props.apiOptions}
+                        content={this.props.prefix}
+                        widgetEnabled={false}
+                        onChange={(newProps) => {
+                            this.change({prefix: newProps.content});
+                        }}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    {" "}
+                    Matrix suffix:{" "}
+                    <Editor
+                        // eslint-disable-next-line react/no-string-refs
+                        ref="suffix"
+                        apiOptions={this.props.apiOptions}
+                        content={this.props.suffix}
+                        widgetEnabled={false}
+                        onChange={(newProps) => {
+                            this.change({suffix: newProps.content});
+                        }}
+                    />
+                </div>
+            </div>
+        );
+    }
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    onMatrixBoardSizeChange: ([number, number]) => void = (range) => {
+        const matrixSize = getMatrixSize(this.props.answers);
+        if (range[0] !== null && range[1] !== null) {
+            range = [
+                Math.round(Math.min(Math.max(range[0], 1), MAX_BOARD_SIZE)),
+                Math.round(Math.min(Math.max(range[1], 1), MAX_BOARD_SIZE)),
+            ];
+            const answers = _(Math.min(range[0], matrixSize[0])).times(
+                (row) => {
+                    return _(Math.min(range[1], matrixSize[1])).times((col) => {
+                        return this.props.answers[row][col];
+                    });
+                },
+            );
+            this.props.onChange({
+                matrixBoardSize: range,
+                answers: answers,
+            });
+        }
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+}
+
+export default MatrixEditor;