@khanacademy/perseus 0.0.1 → 0.2.1

package/src/widgets/lights-puzzle.jsx

@@ -0,0 +1,356 @@
+/* eslint-disable no-unused-vars, react/sort-comp */
+// @flow
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import * as Changeable from "../mixins/changeable.jsx";
+import WidgetJsonifyDeprecated from "../mixins/widget-jsonify-deprecated.jsx";
+
+import type {WidgetExports} from "../types.js";
+
+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 MOVE_COUNT_STYLE = {
+    padding: CELL_PADDING,
+    display: "inline-block",
+};
+
+const RESET_BUTTON_STYLE = {
+    float: "right",
+    paddingRight: CELL_PADDING,
+};
+
+const MAIN_TILE_SIZE = 50;
+
+const mapCells = (cells, func) => {
+    return _.map(cells, (row, y) => {
+        return _.map(row, (value, x) => {
+            return func(value, y, x);
+        });
+    });
+};
+
+const genCells = (height, width, func) => {
+    return _.times(height, (y) => {
+        return _.times(width, (x) => {
+            return func(y, x);
+        });
+    });
+};
+
+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;
+};
+
+// A single glowy cell
+class Tile extends React.Component<$FlowFixMe> {
+    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);
+    };
+}
+
+// A grid of glowy cells
+class TileGrid extends React.Component<$FlowFixMe> {
+    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>
+        );
+    }
+}
+
+// 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;
+        });
+    });
+};
+
+const flipTilesPattern = (oldCells, tileY, tileX, pattern) => {
+    return flipTilesPredicate(oldCells, (y, x) => {
+        const offsetY = y - tileY;
+        const offsetX = x - tileX;
+        if (Math.abs(offsetY) <= 1 && Math.abs(offsetX) <= 1) {
+            return pattern[offsetY + 1][offsetX + 1];
+        }
+        return false;
+    });
+};
+
+// The lights puzzle widget
+class LightsPuzzle extends React.Component<$FlowFixMe> {
+    _currPattern: $FlowFixMe;
+    _nextPattern: $FlowFixMe;
+    _patternIndex: number;
+
+    static propTypes = {
+        ...Changeable.propTypes,
+        cells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)),
+        startCells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)),
+        flipPattern: PropTypes.string.isRequired,
+        moveCount: PropTypes.number.isRequired,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        cells: [
+            [false, false, false],
+            [false, false, false],
+            [false, false, false],
+        ],
+        startCells: [
+            [false, false, false],
+            [false, false, false],
+            [false, false, false],
+        ],
+        flipPattern: "plus",
+        moveCount: 0,
+    };
+
+    getUserInput: () => $FlowFixMe = () => {
+        return WidgetJsonifyDeprecated.getUserInput.call(this);
+    };
+
+    render(): React.Node {
+        const width = this._width();
+        const tileSize = MAIN_TILE_SIZE;
+        const pxWidth = width * (tileSize + 2 * CELL_PADDING);
+        return (
+            <div>
+                <TileGrid
+                    cells={this.props.cells}
+                    size={tileSize}
+                    onChange={this._flipTile}
+                />
+                <div style={{width: pxWidth}}>
+                    <div style={MOVE_COUNT_STYLE}>
+                        {i18n.ngettext(
+                            "Moves: %(num)s",
+                            "Moves: %(num)s",
+                            this.props.moveCount,
+                        )}
+                    </div>
+                    <div style={RESET_BUTTON_STYLE}>
+                        <input
+                            type="button"
+                            value="Reset"
+                            onClick={this._reset}
+                            className="simple-button"
+                        />
+                    </div>
+                </div>
+                <div className="clearfix" />
+            </div>
+        );
+    }
+
+    change: (...args: $ReadOnlyArray<mixed>) => $FlowFixMe = (...args) => {
+        // $FlowFixMe[incompatible-call]
+        return Changeable.change.apply(this, args);
+    };
+
+    _width: () => number = () => {
+        if (this.props.cells.length !== 0) {
+            return this.props.cells[0].length;
+        }
+        return 0; // default to 0
+    };
+
+    componentDidMount() {
+        this._initNextPatterns();
+    }
+
+    componentDidUpdate(prevProps: $FlowFixMe) {
+        if (prevProps.flipPattern !== this.props.flipPattern) {
+            this._initNextPatterns();
+        }
+    }
+
+    _initNextPatterns: () => void = () => {
+        this._currPattern = PATTERNS[this.props.flipPattern](0);
+        this._nextPattern = PATTERNS[this.props.flipPattern](1);
+        this._patternIndex = 2;
+    };
+
+    _shiftPatterns: () => void = () => {
+        this._currPattern = this._nextPattern;
+        this._nextPattern = PATTERNS[this.props.flipPattern](
+            this._patternIndex,
+        );
+        this._patternIndex++;
+    };
+
+    _flipTile: ($FlowFixMe, $FlowFixMe) => void = (tileY, tileX) => {
+        const newCells = flipTilesPattern(
+            this.props.cells,
+            tileY,
+            tileX,
+            this._currPattern,
+        );
+        this._shiftPatterns();
+
+        this.change({
+            cells: newCells,
+            moveCount: this.props.moveCount + 1,
+        });
+    };
+
+    _reset: () => void = () => {
+        this.change({
+            cells: this.props.startCells,
+            moveCount: 0,
+        });
+    };
+
+    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
+        return validate(rubric, this.getUserInput());
+    };
+}
+
+// grading function
+const validate = function (rubric, state) {
+    const empty = _.all(state.cells, (row, y) => {
+        return _.all(row, (cell, x) => {
+            return cell === rubric.startCells[y][x];
+        });
+    });
+    if (empty) {
+        return {
+            type: "invalid",
+            message: i18n._("Click on the tiles to change the lights."),
+        };
+    }
+
+    const correct = _.all(state.cells, (row) => {
+        return _.all(row, (cell) => {
+            return cell;
+        });
+    });
+
+    if (correct) {
+        return {
+            type: "points",
+            earned: 1,
+            total: 1,
+            message: null,
+        };
+    }
+    if (rubric.gradeIncompleteAsWrong) {
+        return {
+            type: "points",
+            earned: 0,
+            total: 1,
+            message: null,
+        };
+    }
+    return {
+        type: "invalid",
+        message: i18n._("You must turn on all of the lights to continue."),
+    };
+};
+
+// The function run on the editor props to create the widget props
+const transformProps: ($FlowFixMe) => $FlowFixMe = function (editorProps) {
+    return {
+        cells: editorProps.startCells,
+        startCells: editorProps.startCells,
+        flipPattern: editorProps.flipPattern,
+    };
+};
+
+export default ({
+    name: "lights-puzzle",
+    displayName: "Lights Puzzle",
+    hidden: true,
+    widget: LightsPuzzle,
+    transform: transformProps,
+}: WidgetExports<typeof LightsPuzzle>);

package/src/widgets/matcher.jsx

@@ -0,0 +1,271 @@
+/* eslint-disable react/forbid-prop-types, react/sort-comp */
+// @flow
+import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
+import {StyleSheet, css} from "aphrodite";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import Sortable from "../components/sortable.jsx";
+import {getDependencies} from "../dependencies.js";
+import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
+import {ApiOptions} from "../perseus-api.jsx";
+import Renderer from "../renderer.jsx";
+import Util from "../util.js";
+
+import type {SortableOption} from "../components/sortable.jsx";
+import type {WidgetExports} from "../types.js";
+
+const {shuffle, seededRNG} = Util;
+const HACKY_CSS_CLASSNAME = "perseus-widget-matcher";
+
+class Matcher extends React.Component<$FlowFixMe, $FlowFixMe> {
+    static propTypes = {
+        apiOptions: ApiOptions.propTypes,
+        labels: PropTypes.array,
+        left: PropTypes.array,
+        onChange: PropTypes.func,
+        orderMatters: PropTypes.bool,
+        padding: PropTypes.bool,
+        problemNum: PropTypes.number,
+        right: PropTypes.array,
+        trackInteraction: PropTypes.func.isRequired,
+        linterContext: linterContextProps,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        left: [],
+        right: [],
+        labels: ["", ""],
+        orderMatters: false,
+        padding: true,
+        problemNum: 0,
+        onChange: function () {},
+        linterContext: linterContextDefault,
+    };
+
+    state: $FlowFixMe = {
+        leftHeight: 0,
+        rightHeight: 0,
+        katex: null,
+    };
+
+    componentDidMount() {
+        getDependencies()
+            .getKaTeX()
+            .then((katex) => this.setState({katex}));
+    }
+
+    render(): React.Node {
+        // We don't render the Matcher until KaTeX has fully loaded, in case
+        // the sortables are rendering KaTeX content. This is un-optimal as
+        // we end up loading KaTeX even when we may not need it, however it
+        // helps to ensure that the dimensions of the sortables (and thus the
+        // Matcher) will be correct when they render, if their contents are
+        // KaTeX-derived.
+        if (!this.state.katex) {
+            return <CircularSpinner />;
+        }
+
+        // Use the same random() function to shuffle both columns sequentially
+        const rng = seededRNG(this.props.problemNum);
+
+        let left;
+        if (!this.props.orderMatters) {
+            // If the order doesn't matter, don't shuffle the left column
+            left = this.props.left;
+        } else {
+            left = shuffle(this.props.left, rng, /* ensurePermuted */ true);
+        }
+
+        const right = shuffle(this.props.right, rng, /* ensurePermuted */ true);
+
+        const showLabels = _.any(this.props.labels);
+        const constraints = {
+            height: _.max([this.state.leftHeight, this.state.rightHeight]),
+        };
+
+        const cellMarginPx = this.props.apiOptions.isMobile ? 8 : 5;
+
+        return (
+            <table className={css(styles.widget) + " " + HACKY_CSS_CLASSNAME}>
+                <tbody>
+                    {showLabels && (
+                        <tr className={css(styles.row)}>
+                            <th
+                                className={css(
+                                    styles.column,
+                                    styles.columnLabel,
+                                )}
+                            >
+                                <Renderer
+                                    content={this.props.labels[0] || "..."}
+                                    linterContext={this.props.linterContext}
+                                />
+                            </th>
+                            <th
+                                className={css(
+                                    styles.column,
+                                    styles.columnRight,
+                                    styles.columnLabel,
+                                )}
+                            >
+                                <Renderer
+                                    content={this.props.labels[1] || "..."}
+                                    linterContext={this.props.linterContext}
+                                />
+                            </th>
+                        </tr>
+                    )}
+                    <tr className={css(styles.row)}>
+                        <td className={css(styles.column)}>
+                            <Sortable
+                                options={left}
+                                layout="vertical"
+                                padding={this.props.padding}
+                                disabled={!this.props.orderMatters}
+                                constraints={constraints}
+                                onMeasure={this.onMeasureLeft}
+                                onChange={this.changeAndTrack}
+                                margin={cellMarginPx}
+                                linterContext={this.props.linterContext}
+                                // eslint-disable-next-line react/no-string-refs
+                                ref="left"
+                            />
+                        </td>
+                        <td className={css(styles.column, styles.columnRight)}>
+                            <Sortable
+                                options={right}
+                                layout="vertical"
+                                padding={this.props.padding}
+                                constraints={constraints}
+                                onMeasure={this.onMeasureRight}
+                                onChange={this.changeAndTrack}
+                                margin={cellMarginPx}
+                                linterContext={this.props.linterContext}
+                                // eslint-disable-next-line react/no-string-refs
+                                ref="right"
+                            />
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        );
+    }
+
+    changeAndTrack: ($FlowFixMe) => void = (e) => {
+        this.props.onChange(e);
+        this.props.trackInteraction();
+    };
+
+    onMeasureLeft: ($FlowFixMe) => void = (dimensions) => {
+        const height = _.max(dimensions.heights);
+        this.setState({leftHeight: height});
+    };
+
+    onMeasureRight: ($FlowFixMe) => void = (dimensions) => {
+        const height = _.max(dimensions.heights);
+        this.setState({rightHeight: height});
+    };
+
+    getUserInput: () => $FlowFixMe = () => {
+        // If KaTeX hasn't loaded then we won't be able to get the contents
+        // of the sortables on the left and right, so we just return empty
+        // arrays until we render for the first time.
+        if (!this.state.katex) {
+            return {
+                left: [],
+                right: [],
+            };
+        }
+
+        return {
+            // eslint-disable-next-line react/no-string-refs
+            left: this.refs.left.getOptions(),
+            // eslint-disable-next-line react/no-string-refs
+            right: this.refs.right.getOptions(),
+        };
+    };
+
+    // Programatic API for moving options
+    // This is used by testing
+    moveLeftOptionToIndex: (option: SortableOption, index: number) => void = (
+        option,
+        index,
+    ) => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.left.moveOptionToIndex(option, index);
+    };
+
+    // Programatic API for moving options
+    // This is used by testing
+    moveRightOptionToIndex: (option: SortableOption, index: number) => void = (
+        option,
+        index,
+    ) => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.right.moveOptionToIndex(option, index);
+    };
+
+    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
+        // $FlowFixMe[prop-missing]
+        return Matcher.validate(this.getUserInput(), rubric);
+    };
+}
+
+_.extend(Matcher, {
+    validate: function (state, rubric) {
+        const correct =
+            _.isEqual(state.left, rubric.left) &&
+            _.isEqual(state.right, rubric.right);
+
+        return {
+            type: "points",
+            earned: correct ? 1 : 0,
+            total: 1,
+            message: null,
+        };
+    },
+});
+
+const padding = 5;
+const border = "1px solid #444";
+
+const styles = StyleSheet.create({
+    widget: {
+        paddingTop: padding,
+        maxWidth: "100%",
+
+        // Need to override minWidth in CSS :(
+        minWidth: "auto",
+    },
+
+    row: {
+        // Need to override global rules in CSS :(
+        border: 0,
+    },
+
+    column: {
+        // TODO(benkomalo): constraint to half width?
+        padding: 0,
+        border: 0,
+    },
+
+    columnRight: {
+        borderLeft: border,
+    },
+
+    columnLabel: {
+        fontWeight: "inherit",
+        borderBottom: border,
+        padding: `0 ${padding}px ${padding}px ${padding}px`,
+        textAlign: "center",
+    },
+});
+
+export default ({
+    name: "matcher",
+    displayName: "Two column matcher",
+    widget: Matcher,
+    isLintable: true,
+}: WidgetExports<typeof Matcher>);