{
                            this.updateAnswer(i, {message: e.target.value});
                        }} />
                </div>*/
            return <div className="perseus-widget-row" key={i}>
                <div
                    className={"input-answer-editor-value-container" +
                        (answer.maxError ? " with-max-error" : "")}
                    style={{float: 'none'}}
                >
                    <NumberInput value={answer.value}
                        className="numeric-input-value"
                        placeholder="answer"
                        format={_.last(answer.answerForms)}
                        onFormatChange={(newValue, format) => {
                            // NOTE(charlie): The mobile web expression editor
                            // relies on this automatic answer form resolution
                            // for determining when to show the Pi symbol. If we
                            // get rid of it, we should also disable Pi for
                            // NumericInput and require problems that use Pi to
                            // build on Expression. Alternatively, we could
                            // store answers as plaintext and parse them to
                            // determine whether or not to reveal Pi on the
                            // keypad (right now, answers are stored as resolved
                            // values, like '0.125' rather than '1/8').
                            var forms;
                            if (format === "pi") {
                                forms = ["pi"];
                            } else if (format === "mixed") {
                                forms = ["proper", "mixed"];
                            } else if (format === "proper" ||
                                       format === "improper") {
                                forms = ["proper", "improper"];
                            }
                            this.updateAnswer(i, {
                                value: firstNumericalParse(newValue),
                                answerForms: forms
                            });
                        }}
                        onChange={(newValue) => {
                            this.updateAnswer(i, {
                                value: firstNumericalParse(newValue)});
                        }} />
                    {answer.strict && <div className="is-strict-indicator"
                        title="strictly equivalent to">≡</div>}
                    {answer.simplify !== "required" &&
                     answer.status === "correct" &&
                      <div className={"simplify-indicator " + answer.simplify}
                        title="accepts unsimplified answers?">‰</div>}
                    {answer.maxError ? <div className="max-error-container">
                        <div className="max-error-plusmn">±</div>
                        <NumberInput placeholder={0}
                            value={answers[i]["maxError"]}
                            format={_.last(answer.answerForms)}
                            onChange={this.updateAnswer(i, "maxError")} />
                    </div> : null}
                    <div className="value-divider" />
                    <a href="javascript:void(0)"
                        className={"answer-status " + answer.status}
                        onClick={() => this.onStatusChange(i)}
                        onKeyDown={(e) =>
                            this.onSpace(e, this.onStatusChange, i)}>
                        {answer.status}
                    </a>
                    <a
                        href="javascript:void(0)"
                        className="answer-trash"
                        onClick={() => this.onTrashAnswer(i)}
                        onKeyDown={(e) =>
                            this.onSpace(e, this.onTrashAnswer, i)}
                    >
                        <InlineIcon {...iconTrash} />
                    </a>
                    <a href="javascript:void(0)"
                        className="options-toggle"
                        onClick={() => this.onToggleOptions(i)}
                        onKeyDown={(e) =>
                            this.onSpace(e, this.onToggleOptions, i)}
                    >
                        <InlineIcon {...iconGear} />
                    </a>
                </div>
                <div className="input-answer-editor-message">{editor}</div>
                {this.state.showOptions[i] &&
                    <div className="options-container">
                        {maxError(i)}
                        {answer.status === "correct" && unsimplifiedAnswers(i)}
                        {suggestedAnswerTypes(i)}
                    </div>}
            </div>;
        });

return <div className="perseus-input-number-editor">
            {/*<div className="ui-title">User input</div>*/}
            {/*<div className="msg-title">Message shown to user on attempt</div>*/}
            {generateInputAnswerEditors()}
            {addAnswerButton}
        </div>;

change(...args) {
        return Changeable.change.apply(this, args);
    },

onToggleOptions: function(choiceIndex) {
        var showOptions = this.state.showOptions.slice();
        showOptions[choiceIndex] = !showOptions[choiceIndex];
        this.setState({showOptions: showOptions});
    },

onTrashAnswer: function(choiceIndex) {
        if (choiceIndex >= 0 && choiceIndex < this.props.answers.length) {
            var answers = this.props.answers.slice(0);
            answers.splice(choiceIndex, 1);
            this.props.onChange({answers: answers});
        }
    },

onSpace: function(e, callback) {
        if (e.key === " ") {
            e.preventDefault(); // prevent page shifting
            var args = _.toArray(arguments).slice(2);
            callback.apply(this, args);
        }
    },

onStatusChange: function(choiceIndex) {
        var statuses = ["wrong", "ungraded", "correct"];
        var answers = this.props.answers;
        var i = _.indexOf(statuses, answers[choiceIndex].status);
        var newStatus = statuses[(i + 1) % statuses.length];

this.updateAnswer(choiceIndex, {
            status: newStatus,
            simplify: newStatus === "correct" ? "required" : "accepted"
        });
    },

updateAnswer: function(choiceIndex, update) {
        if (!_.isObject(update)) {
            return _.partial((choiceIndex, key, value) => {
                var update = {};
                update[key] = value;
                this.updateAnswer(choiceIndex, update);
            }, choiceIndex, update);
        }

var answers = _.clone(this.props.answers);

// Don't bother to make a new answer box unless we are editing the last
        // one.
        // TODO(oliver): This might not be necessary anymore.
        if (choiceIndex === answers.length) {
            var lastAnswer = initAnswer(this.state.lastStatus);
            var answers = answers.concat(lastAnswer);
        }

answers[choiceIndex] = _.extend({}, answers[choiceIndex], update);
        this.props.onChange({answers: answers});
    },

addAnswer: function() {
        var lastAnswer = initAnswer(this.state.lastStatus);
        var answers = this.props.answers.concat(lastAnswer);
        this.props.onChange({answers: answers});
    },

getSaveWarnings: function() {
        // Filter out all the empty answers
        var warnings = [];
        // TODO(emily): This doesn't actually work, because the value is either
        // null or undefined when undefined, probably.
        if (_.contains(_.pluck(this.props.answers, "value"), "")) {
            warnings.push("One or more answers is empty");
        }
        if (this.props.labelText === "") {
            warnings.push("No label is specified");
        }
        this.props.answers.forEach((answer, i) => {
            var formatError = (answer.strict &&
                (!answer.answerForms || answer.answerForms.length === 0));
            if (formatError) {
                warnings.push(`Answer ${i+1} is set to string format ` +
                              "matching, but no format was selected");
            }
        });
        return warnings;
    },

serialize() {
        return EditorJsonify.serialize.call(this);
    },
});

module.exports = NumericInputEditor;