From 0a44d468dd127bf15dc32e720b9b0301af41a572 Mon Sep 17 00:00:00 2001
From: Matthew <matthewcurtis@khanacademy.org>
Date: Tue, 3 Dec 2024 13:57:03 -0600
Subject: [PATCH 1/3] Expose a way to get user input from ServerItemRenderer
 (#1910)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
This is a repeat of PR https://github.com/Khan/perseus/pull/1753 (which was reverted in https://github.com/Khan/perseus/pull/1905)

While this PR is essentially the same as the previous one, I added prop upgrading to the scoring logic and the empty widget logic (along with some tests).

---

I'm trying to tread lightly, maybe being overly cautious at the expense of keeping too much old code around. I tried to make everything we can get rid of after the move with `@deprecated`.

Basically this should expose everything we need to move the actual scoring process out of ServerItemRenderer and the React tree. We now have `getUserInput` on `ServerItemRenderer` and `scorePerseusItem` which is a non-React, pure function that returns a score.

Next step is to replace uses of `scoreInput` in Webapp with `scorePerseusItem`; then we can come back and delete a lot of this legacy code 🤞

Issue: [LEMS-2665](https://khanacademy.atlassian.net/browse/LEMS-2665)

## Test plan:
After the swap in Webapp, we should be able to complete an exercise with `scorePerseusItem` and everything else will work the same.

[LEMS-2665]: https://khanacademy.atlassian.net/browse/LEMS-2665?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: handeyeco

Reviewers: jeremywiebe, handeyeco

Required Reviewers:

Approved By: jeremywiebe

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald, ✅ .github/dependabot.yml

Pull Request URL: https://github.com/Khan/perseus/pull/1910
---
 .changeset/honest-tables-impress.md           |   6 +
 dev/flipbook.tsx                              |  11 +-
 .../src/components/__tests__/sorter.test.tsx  |  12 +-
 packages/perseus/src/index.ts                 |   2 +
 .../perseus/src/interactive2/objective_.ts    |   4 +-
 packages/perseus/src/renderer-util.test.ts    | 375 ++++++++++++++++--
 packages/perseus/src/renderer-util.ts         |  71 +++-
 packages/perseus/src/renderer.tsx             |  71 ++--
 packages/perseus/src/server-item-renderer.tsx |  64 ++-
 packages/perseus/src/types.ts                 |   5 +
 .../widgets/categorizer/categorizer.test.ts   |  18 +-
 .../src/widgets/definition/definition.test.ts |   7 +-
 .../__tests__/deprecated-standin.test.ts      |   7 +-
 .../widgets/expression/expression.test.tsx    |  18 +-
 .../perseus/src/widgets/group/group.test.tsx  |   8 +-
 packages/perseus/src/widgets/group/group.tsx  |   2 +
 .../src/widgets/matcher/matcher.test.tsx      |  12 +-
 .../perseus/src/widgets/matrix/matrix.test.ts |   4 -
 .../passage/__tests__/passage.test.tsx        |   9 +-
 testing/renderer-with-debug-ui.tsx            |  11 +-
 20 files changed, 571 insertions(+), 146 deletions(-)
 create mode 100644 .changeset/honest-tables-impress.md

diff --git a/.changeset/honest-tables-impress.md b/.changeset/honest-tables-impress.md
new file mode 100644
index 0000000000..29dd4efe54
--- /dev/null
+++ b/.changeset/honest-tables-impress.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": major
+"@khanacademy/perseus-dev-ui": patch
+---
+
+Change ServerItemRenderer scoring APIs to externalize scoring
diff --git a/dev/flipbook.tsx b/dev/flipbook.tsx
index f6dde1281c..ea05772598 100644
--- a/dev/flipbook.tsx
+++ b/dev/flipbook.tsx
@@ -18,6 +18,7 @@ import {useEffect, useMemo, useReducer, useRef, useState} from "react";
 
 import {Renderer} from "../packages/perseus/src";
 import {SvgImage} from "../packages/perseus/src/components";
+import {scorePerseusItem} from "../packages/perseus/src/renderer-util";
 import {mockStrings} from "../packages/perseus/src/strings";
 import {isCorrect} from "../packages/perseus/src/util";
 import {trueForAllMafsSupportedGraphTypes} from "../packages/perseus/src/widgets/interactive-graphs/mafs-supported-graph-types";
@@ -319,7 +320,15 @@ function GradableRenderer(props: QuestionRendererProps) {
                 leftContent={
                     <Button
                         onClick={() => {
-                            setScore(rendererRef.current?.score());
+                            if (rendererRef.current) {
+                                const score = scorePerseusItem(
+                                    question,
+                                    rendererRef.current.getUserInputMap(),
+                                    mockStrings,
+                                    "en",
+                                );
+                                setScore(score);
+                            }
                             clearScoreTimeout.set();
                         }}
                     >
diff --git a/packages/perseus/src/components/__tests__/sorter.test.tsx b/packages/perseus/src/components/__tests__/sorter.test.tsx
index 467bbe43d2..2101d87ff8 100644
--- a/packages/perseus/src/components/__tests__/sorter.test.tsx
+++ b/packages/perseus/src/components/__tests__/sorter.test.tsx
@@ -76,15 +76,13 @@ describe("sorter widget", () => {
         const {renderer} = renderQuestion(question1, apiOptions);
         const sorter = renderer.findWidgets("sorter 1")[0];
 
+        // Act
         // Put the options in the correct order
-
         ["$0.005$ kilograms", "$15$ grams", "$55$ grams"].forEach((option) => {
             act(() => sorter.moveOptionToIndex(option, 3));
         });
-        // Act
-        renderer.guessAndScore();
 
-        // assert
+        // Assert
         expect(renderer).toHaveBeenAnsweredCorrectly();
     });
     it("can be answered incorrectly", () => {
@@ -95,6 +93,7 @@ describe("sorter widget", () => {
         const {renderer} = renderQuestion(question1, apiOptions);
         const sorter = renderer.findWidgets("sorter 1")[0];
 
+        // Act
         // Put the options in the reverse order
         ["$0.005$ kilograms", "$15$ grams", "$55$ grams"].forEach(
             (option, index) => {
@@ -102,10 +101,7 @@ describe("sorter widget", () => {
             },
         );
 
-        // Act
-        renderer.guessAndScore();
-
-        // assert
+        // Assert
         expect(renderer).toHaveBeenAnsweredIncorrectly();
     });
 });
diff --git a/packages/perseus/src/index.ts b/packages/perseus/src/index.ts
index ecf8aab1b7..f8f4c96dd5 100644
--- a/packages/perseus/src/index.ts
+++ b/packages/perseus/src/index.ts
@@ -18,6 +18,7 @@ export {default as ServerItemRenderer} from "./server-item-renderer";
 export {default as HintsRenderer} from "./hints-renderer";
 export {default as HintRenderer} from "./hint-renderer";
 export {default as Renderer} from "./renderer";
+export {scorePerseusItem} from "./renderer-util";
 
 /**
  * Widgets
@@ -224,6 +225,7 @@ export type {
     PerseusWidgetsMap,
     MultiItem,
 } from "./perseus-types";
+export type {UserInputMap} from "./validation.types";
 export type {Coord} from "./interactive2/types";
 export type {MarkerType} from "./widgets/label-image/types";
 
diff --git a/packages/perseus/src/interactive2/objective_.ts b/packages/perseus/src/interactive2/objective_.ts
index 9dd605e5da..49cadd8b14 100644
--- a/packages/perseus/src/interactive2/objective_.ts
+++ b/packages/perseus/src/interactive2/objective_.ts
@@ -46,7 +46,7 @@ const mapObject = function <K extends string, V, U>(
     lambda: (arg1: V, arg2: K) => U,
 ): Record<K, U> {
     const result: Record<string, any> = {};
-    _.each(_.keys(obj), function (key) {
+    Object.keys(obj).forEach((key) => {
         // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
         result[key] = lambda(obj[key], key);
     });
@@ -66,7 +66,7 @@ const mapObjectFromArray = function <K extends string, V>(
     lambda: (arg1: K) => V,
 ): Record<K, V> {
     const result: Record<string, any> = {};
-    _.each(arr, function (elem) {
+    arr.forEach((elem) => {
         result[elem] = lambda(elem);
     });
     return result;
diff --git a/packages/perseus/src/renderer-util.test.ts b/packages/perseus/src/renderer-util.test.ts
index a9e80c78b7..4b32b8471e 100644
--- a/packages/perseus/src/renderer-util.test.ts
+++ b/packages/perseus/src/renderer-util.test.ts
@@ -1,33 +1,99 @@
-import {emptyWidgetsFunctional, scoreWidgetsFunctional} from "./renderer-util";
+import {screen} from "@testing-library/react";
+import {userEvent as userEventLib} from "@testing-library/user-event";
+
+import {
+    testDependencies,
+    testDependenciesV2,
+} from "../../../testing/test-dependencies";
+
+import * as Dependencies from "./dependencies";
+import {
+    emptyWidgetsFunctional,
+    scorePerseusItem,
+    scoreWidgetsFunctional,
+} from "./renderer-util";
 import {mockStrings} from "./strings";
 import {registerAllWidgetsForTesting} from "./util/register-all-widgets-for-testing";
-
-import type {DropdownWidget, PerseusWidgetsMap} from "./perseus-types";
+import {renderQuestion} from "./widgets/__testutils__/renderQuestion";
+import {question1} from "./widgets/group/group.testdata";
+
+import type {
+    DropdownWidget,
+    ExpressionWidget,
+    PerseusWidgetsMap,
+} from "./perseus-types";
 import type {UserInputMap} from "./validation.types";
-
-const testDropdownWidget: DropdownWidget = {
-    type: "dropdown",
-    options: {
-        choices: [
-            {
-                content: "Test choice 1",
-                correct: true,
-            },
-            {
-                content: "Test choice 2",
-                correct: false,
-            },
-        ],
-        placeholder: "Test placeholder",
-        static: false,
-    },
-};
+import type {UserEvent} from "@testing-library/user-event";
+
+function getTestDropdownWidget(): DropdownWidget {
+    return {
+        type: "dropdown",
+        options: {
+            choices: [
+                {
+                    content: "Test choice 1",
+                    correct: true,
+                },
+                {
+                    content: "Test choice 2",
+                    correct: false,
+                },
+            ],
+            placeholder: "Test placeholder",
+            static: false,
+        },
+    };
+}
+
+function getExpressionWidget(): ExpressionWidget {
+    return {
+        type: "expression",
+        version: {major: 1, minor: 0},
+        options: {
+            times: false,
+            buttonSets: ["basic"],
+            functions: [],
+            answerForms: [
+                {
+                    form: false,
+                    simplify: false,
+                    value: "2+2",
+                    considered: "correct",
+                },
+            ],
+        },
+    };
+}
+
+function getLegacyExpressionWidget() {
+    return {
+        type: "expression",
+        options: {
+            times: false,
+            buttonSets: ["basic"],
+            functions: [],
+            form: false,
+            simplify: false,
+            value: "2+2",
+        },
+    };
+}
 
 describe("emptyWidgetsFunctional", () => {
     beforeAll(() => {
         registerAllWidgetsForTesting();
     });
 
+    beforeEach(() => {
+        jest.spyOn(testDependenciesV2.analytics, "onAnalyticsEvent");
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+        jest.spyOn(Dependencies, "useDependencies").mockReturnValue(
+            testDependenciesV2,
+        );
+    });
+
     it("returns an empty array if there are no widgets", () => {
         // Arrange / Act
         const result = emptyWidgetsFunctional({}, [], {}, mockStrings, "en");
@@ -39,7 +105,7 @@ describe("emptyWidgetsFunctional", () => {
     it("properly identifies empty widgets", () => {
         // Arrange
         const widgets: PerseusWidgetsMap = {
-            "dropdown 1": testDropdownWidget,
+            "dropdown 1": getTestDropdownWidget(),
         };
         const widgetIds: Array<string> = ["dropdown 1"];
         const userInputMap: UserInputMap = {
@@ -64,7 +130,7 @@ describe("emptyWidgetsFunctional", () => {
     it("does not return widget IDs that are not empty", () => {
         // Arrange
         const widgets: PerseusWidgetsMap = {
-            "dropdown 1": testDropdownWidget,
+            "dropdown 1": getTestDropdownWidget(),
         };
         const widgetIds: Array<string> = ["dropdown 1"];
         const userInputMap: UserInputMap = {
@@ -89,7 +155,7 @@ describe("emptyWidgetsFunctional", () => {
     it("does not check for empty widgets whose IDs aren't provided", () => {
         // Arrange
         const widgets: PerseusWidgetsMap = {
-            "dropdown 1": testDropdownWidget,
+            "dropdown 1": getTestDropdownWidget(),
         };
         const widgetIds: Array<string> = [];
         const userInputMap: UserInputMap = {
@@ -114,8 +180,8 @@ describe("emptyWidgetsFunctional", () => {
     it("can properly split empty and non-empty widgets", () => {
         // Arrange
         const widgets: PerseusWidgetsMap = {
-            "dropdown 1": testDropdownWidget,
-            "dropdown 2": testDropdownWidget,
+            "dropdown 1": getTestDropdownWidget(),
+            "dropdown 2": getTestDropdownWidget(),
         };
         const widgetIds: Array<string> = ["dropdown 1", "dropdown 2"];
         const userInputMap: UserInputMap = {
@@ -148,7 +214,7 @@ describe("emptyWidgetsFunctional", () => {
                 options: {
                     content: "[[☃ dropdown 1]]",
                     widgets: {
-                        "dropdown 1": testDropdownWidget,
+                        "dropdown 1": getTestDropdownWidget(),
                     },
                     images: {},
                 },
@@ -184,7 +250,7 @@ describe("emptyWidgetsFunctional", () => {
                 options: {
                     content: "[[☃ dropdown 1]]",
                     widgets: {
-                        "dropdown 1": testDropdownWidget,
+                        "dropdown 1": getTestDropdownWidget(),
                     },
                     images: {},
                 },
@@ -211,6 +277,98 @@ describe("emptyWidgetsFunctional", () => {
         // Assert
         expect(result).toEqual([]);
     });
+
+    it("handles an empty modern Expression widget", () => {
+        // Arrange
+        const widgets: PerseusWidgetsMap = {
+            "expression 1": getExpressionWidget(),
+        };
+        const widgetIds: Array<string> = ["expression 1"];
+        const userInputMap: UserInputMap = {
+            "expression 1": "",
+        };
+
+        // Act
+        const result = emptyWidgetsFunctional(
+            widgets,
+            widgetIds,
+            userInputMap,
+            mockStrings,
+            "en",
+        );
+
+        // Assert
+        expect(result).toEqual(["expression 1"]);
+    });
+
+    it("upgrades an empty legacy Expression widget", () => {
+        // Arrange
+        const widgets: PerseusWidgetsMap = {
+            "expression 1": getLegacyExpressionWidget() as any,
+        };
+        const widgetIds: Array<string> = ["expression 1"];
+        const userInputMap: UserInputMap = {
+            "expression 1": "",
+        };
+
+        // Act
+        const result = emptyWidgetsFunctional(
+            widgets,
+            widgetIds,
+            userInputMap,
+            mockStrings,
+            "en",
+        );
+
+        // Assert
+        expect(result).toEqual(["expression 1"]);
+    });
+
+    it("handles a non-empty modern Expression widget", () => {
+        // Arrange
+        const widgets: PerseusWidgetsMap = {
+            "expression 1": getExpressionWidget(),
+        };
+        const widgetIds: Array<string> = ["expression 1"];
+        const userInputMap: UserInputMap = {
+            "expression 1": "2+2",
+        };
+
+        // Act
+        const result = emptyWidgetsFunctional(
+            widgets,
+            widgetIds,
+            userInputMap,
+            mockStrings,
+            "en",
+        );
+
+        // Assert
+        expect(result).toEqual([]);
+    });
+
+    it("upgrades a non-empty legacy Expression widget", () => {
+        // Arrange
+        const widgets: PerseusWidgetsMap = {
+            "expression 1": getLegacyExpressionWidget() as any,
+        };
+        const widgetIds: Array<string> = ["expression 1"];
+        const userInputMap: UserInputMap = {
+            "expression 1": "2+2",
+        };
+
+        // Act
+        const result = emptyWidgetsFunctional(
+            widgets,
+            widgetIds,
+            userInputMap,
+            mockStrings,
+            "en",
+        );
+
+        // Assert
+        expect(result).toEqual([]);
+    });
 });
 
 describe("scoreWidgetsFunctional", () => {
@@ -218,6 +376,16 @@ describe("scoreWidgetsFunctional", () => {
         registerAllWidgetsForTesting();
     });
 
+    beforeEach(() => {
+        jest.spyOn(testDependenciesV2.analytics, "onAnalyticsEvent");
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+        jest.spyOn(Dependencies, "useDependencies").mockReturnValue(
+            testDependenciesV2,
+        );
+    });
+
     it("returns an empty object when there's no widgets", () => {
         // Arrange / Act
         const result = scoreWidgetsFunctional({}, [], {}, mockStrings, "en");
@@ -229,7 +397,7 @@ describe("scoreWidgetsFunctional", () => {
     it("returns invalid if widget is unanswered", () => {
         // Arrange
         const widgets: PerseusWidgetsMap = {
-            "dropdown 1": testDropdownWidget,
+            "dropdown 1": getTestDropdownWidget(),
         };
         const widgetIds: Array<string> = ["dropdown 1"];
         const userInputMap: UserInputMap = {
@@ -254,7 +422,7 @@ describe("scoreWidgetsFunctional", () => {
     it("can determine if a widget was answered correctly", () => {
         // Arrange
         const widgets: PerseusWidgetsMap = {
-            "dropdown 1": testDropdownWidget,
+            "dropdown 1": getTestDropdownWidget(),
         };
         const widgetIds: Array<string> = ["dropdown 1"];
         const userInputMap: UserInputMap = {
@@ -279,7 +447,7 @@ describe("scoreWidgetsFunctional", () => {
     it("can determine if a widget was answered incorrectly", () => {
         // Arrange
         const widgets: PerseusWidgetsMap = {
-            "dropdown 1": testDropdownWidget,
+            "dropdown 1": getTestDropdownWidget(),
         };
         const widgetIds: Array<string> = ["dropdown 1"];
         const userInputMap: UserInputMap = {
@@ -304,8 +472,8 @@ describe("scoreWidgetsFunctional", () => {
     it("can handle multiple widgets", () => {
         // Arrange
         const widgets: PerseusWidgetsMap = {
-            "dropdown 1": testDropdownWidget,
-            "dropdown 2": testDropdownWidget,
+            "dropdown 1": getTestDropdownWidget(),
+            "dropdown 2": getTestDropdownWidget(),
         };
         const widgetIds: Array<string> = ["dropdown 1", "dropdown 2"];
         const userInputMap: UserInputMap = {
@@ -334,8 +502,8 @@ describe("scoreWidgetsFunctional", () => {
     it("skips widgets not in widgetIds", () => {
         // Arrange
         const widgets: PerseusWidgetsMap = {
-            "dropdown 1": testDropdownWidget,
-            "dropdown 2": testDropdownWidget,
+            "dropdown 1": getTestDropdownWidget(),
+            "dropdown 2": getTestDropdownWidget(),
         };
         const widgetIds: Array<string> = ["dropdown 1"];
         const userInputMap: UserInputMap = {
@@ -369,7 +537,7 @@ describe("scoreWidgetsFunctional", () => {
                 options: {
                     content: "[[☃ dropdown 1]]",
                     widgets: {
-                        "dropdown 1": testDropdownWidget,
+                        "dropdown 1": getTestDropdownWidget(),
                     },
                     images: {},
                 },
@@ -405,7 +573,7 @@ describe("scoreWidgetsFunctional", () => {
                 options: {
                     content: "[[☃ dropdown 1]]",
                     widgets: {
-                        "dropdown 1": testDropdownWidget,
+                        "dropdown 1": getTestDropdownWidget(),
                     },
                     images: {},
                 },
@@ -441,7 +609,7 @@ describe("scoreWidgetsFunctional", () => {
                 options: {
                     content: "[[☃ dropdown 1]]",
                     widgets: {
-                        "dropdown 1": testDropdownWidget,
+                        "dropdown 1": getTestDropdownWidget(),
                     },
                     images: {},
                 },
@@ -468,4 +636,135 @@ describe("scoreWidgetsFunctional", () => {
         // Assert
         expect(result["group 1"]).toHaveBeenAnsweredIncorrectly();
     });
+
+    it("can handle a correct modern Expression widget", () => {
+        // Arrange
+        const widgets: PerseusWidgetsMap = {
+            "expression 1": getExpressionWidget(),
+        };
+        const widgetIds: Array<string> = ["expression 1"];
+        const userInputMap: UserInputMap = {
+            "expression 1": "2+2",
+        };
+
+        // Act
+        const result = scoreWidgetsFunctional(
+            widgets,
+            widgetIds,
+            userInputMap,
+            mockStrings,
+            "en",
+        );
+
+        // Assert
+        expect(result["expression 1"]).toHaveBeenAnsweredCorrectly();
+    });
+
+    it("can handle a correct legacy Expression widget", () => {
+        // Arrange
+        const widgets: PerseusWidgetsMap = {
+            "expression 1": getLegacyExpressionWidget() as any,
+        };
+        const widgetIds: Array<string> = ["expression 1"];
+        const userInputMap: UserInputMap = {
+            "expression 1": "2+2",
+        };
+
+        // Act
+        const result = scoreWidgetsFunctional(
+            widgets,
+            widgetIds,
+            userInputMap,
+            mockStrings,
+            "en",
+        );
+
+        // Assert
+        expect(result["expression 1"]).toHaveBeenAnsweredCorrectly();
+    });
+
+    it("can handle an incorrect modern Expression widget", () => {
+        // Arrange
+        const widgets: PerseusWidgetsMap = {
+            "expression 1": getExpressionWidget(),
+        };
+        const widgetIds: Array<string> = ["expression 1"];
+        const userInputMap: UserInputMap = {
+            "expression 1": "2+42",
+        };
+
+        // Act
+        const result = scoreWidgetsFunctional(
+            widgets,
+            widgetIds,
+            userInputMap,
+            mockStrings,
+            "en",
+        );
+
+        // Assert
+        expect(result["expression 1"]).toHaveBeenAnsweredIncorrectly();
+    });
+
+    it("can handle an incorrect legacy Expression widget", () => {
+        // Arrange
+        const widgets: PerseusWidgetsMap = {
+            "expression 1": getLegacyExpressionWidget() as any,
+        };
+        const widgetIds: Array<string> = ["expression 1"];
+        const userInputMap: UserInputMap = {
+            "expression 1": "2+42",
+        };
+
+        // Act
+        const result = scoreWidgetsFunctional(
+            widgets,
+            widgetIds,
+            userInputMap,
+            mockStrings,
+            "en",
+        );
+
+        // Assert
+        expect(result["expression 1"]).toHaveBeenAnsweredIncorrectly();
+    });
+});
+
+describe("scorePerseusItem", () => {
+    let userEvent: UserEvent;
+    beforeEach(() => {
+        userEvent = userEventLib.setup({
+            advanceTimers: jest.advanceTimersByTime,
+        });
+    });
+
+    it("should return score from contained Renderer", async () => {
+        // Arrange
+        const {renderer} = renderQuestion(question1);
+        // Answer all widgets correctly
+        await userEvent.click(screen.getAllByRole("radio")[4]);
+        // Note(jeremy): If we don't tab away from the radio button in this
+        // test, it seems like the userEvent typing doesn't land in the first
+        // text field.
+        await userEvent.tab();
+        await userEvent.type(
+            screen.getByRole("textbox", {name: /nearest ten/}),
+            "230",
+        );
+        await userEvent.type(
+            screen.getByRole("textbox", {name: /nearest hundred/}),
+            "200",
+        );
+        const userInput = renderer.getUserInputMap();
+        const score = scorePerseusItem(question1, userInput, mockStrings, "en");
+
+        // Assert
+        expect(score).toHaveBeenAnsweredCorrectly();
+        expect(score).toEqual({
+            earned: 3,
+            message: null,
+            total: 3,
+            type: "points",
+        });
+    });
 });
diff --git a/packages/perseus/src/renderer-util.ts b/packages/perseus/src/renderer-util.ts
index ccc423afdc..cc332f8713 100644
--- a/packages/perseus/src/renderer-util.ts
+++ b/packages/perseus/src/renderer-util.ts
@@ -1,11 +1,40 @@
+import Objective from "./interactive2/objective_";
 import Util from "./util";
-import {getWidgetScorer} from "./widgets";
+import {getWidgetIdsFromContent} from "./widget-type-utils";
+import {getWidgetScorer, upgradeWidgetInfoToLatestVersion} from "./widgets";
 
-import type {PerseusWidgetsMap} from "./perseus-types";
+import type {PerseusRenderer, PerseusWidgetsMap} from "./perseus-types";
 import type {PerseusStrings} from "./strings";
 import type {PerseusScore} from "./types";
 import type {UserInput, UserInputMap} from "./validation.types";
 
+const {mapObject} = Objective;
+
+export function getUpgradedWidgetOptions(
+    oldWidgetOptions: PerseusWidgetsMap,
+): PerseusWidgetsMap {
+    // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
+    return mapObject(oldWidgetOptions, (widgetInfo, widgetId) => {
+        if (!widgetInfo.type || !widgetInfo.alignment) {
+            const newValues: Record<string, any> = {};
+
+            if (!widgetInfo.type) {
+                // TODO: why does widget have no type?
+                // We don't want to derive type from widget ID
+                // see: LEMS-1845
+                newValues.type = widgetId.split(" ")[0];
+            }
+
+            if (!widgetInfo.alignment) {
+                newValues.alignment = "default";
+            }
+
+            widgetInfo = {...widgetInfo, ...newValues};
+        }
+        return upgradeWidgetInfoToLatestVersion(widgetInfo);
+    });
+}
+
 export function emptyWidgetsFunctional(
     widgets: PerseusWidgetsMap,
     // This is a port of old code, I'm not sure why
@@ -15,8 +44,10 @@ export function emptyWidgetsFunctional(
     strings: PerseusStrings,
     locale: string,
 ): ReadonlyArray<string> {
+    const upgradedWidgets = getUpgradedWidgetOptions(widgets);
+
     return widgetIds.filter((id) => {
-        const widget = widgets[id];
+        const widget = upgradedWidgets[id];
         if (!widget || widget.static) {
             // Static widgets shouldn't count as empty
             return false;
@@ -50,17 +81,43 @@ export function emptyWidgetsFunctional(
     });
 }
 
+// TODO: combine scorePerseusItem with scoreWidgetsFunctional
+// once scorePerseusItem is the only one calling scoreWidgetsFunctional
+export function scorePerseusItem(
+    perseusRenderData: PerseusRenderer,
+    userInputMap: UserInputMap,
+    // TODO(LEMS-2461,LEMS-2391): these probably
+    // need to be removed before we move this to the server
+    strings: PerseusStrings,
+    locale: string,
+): PerseusScore {
+    // There seems to be a chance that PerseusRenderer.widgets might include
+    // widget data for widgets that are not in PerseusRenderer.content,
+    // so this checks that the widgets are being used before scoring them
+    const usedWidgetIds = getWidgetIdsFromContent(perseusRenderData.content);
+    const scores = scoreWidgetsFunctional(
+        perseusRenderData.widgets,
+        usedWidgetIds,
+        userInputMap,
+        strings,
+        locale,
+    );
+    return Util.flattenScores(scores);
+}
+
 export function scoreWidgetsFunctional(
     widgets: PerseusWidgetsMap,
     // This is a port of old code, I'm not sure why
     // we need widgetIds vs the keys of the widgets object
-    widgetIds: Array<string>,
+    widgetIds: ReadonlyArray<string>,
     userInputMap: UserInputMap,
     strings: PerseusStrings,
     locale: string,
 ): {[widgetId: string]: PerseusScore} {
+    const upgradedWidgets = getUpgradedWidgetOptions(widgets);
+
     const gradedWidgetIds = widgetIds.filter((id) => {
-        const props = widgets[id];
+        const props = upgradedWidgets[id];
         const widgetIsGraded: boolean = props?.graded == null || props.graded;
         const widgetIsStatic = !!props?.static;
         // Ungraded widgets or widgets set to static shouldn't be graded.
@@ -69,7 +126,7 @@ export function scoreWidgetsFunctional(
 
     const widgetScores: Record<string, PerseusScore> = {};
     gradedWidgetIds.forEach((id) => {
-        const widget = widgets[id];
+        const widget = upgradedWidgets[id];
         if (!widget) {
             return;
         }
@@ -79,7 +136,7 @@ export function scoreWidgetsFunctional(
         if (widget.type === "group") {
             const scores = scoreWidgetsFunctional(
                 widget.options.widgets,
-                Object.keys(widget.options.widgets),
+                getWidgetIdsFromContent(widget.options.content),
                 userInputMap[id] as UserInputMap,
                 strings,
                 locale,
diff --git a/packages/perseus/src/renderer.tsx b/packages/perseus/src/renderer.tsx
index 41e383a641..e2f291c589 100644
--- a/packages/perseus/src/renderer.tsx
+++ b/packages/perseus/src/renderer.tsx
@@ -25,7 +25,11 @@ import {Log} from "./logging/log";
 import {ClassNames as ApiClassNames, ApiOptions} from "./perseus-api";
 import PerseusMarkdown from "./perseus-markdown";
 import QuestionParagraph from "./question-paragraph";
-import {emptyWidgetsFunctional, scoreWidgetsFunctional} from "./renderer-util";
+import {
+    emptyWidgetsFunctional,
+    getUpgradedWidgetOptions,
+    scoreWidgetsFunctional,
+} from "./renderer-util";
 import TranslationLinter from "./translation-linter";
 import Util from "./util";
 import preprocessTex from "./util/tex-preprocess";
@@ -438,38 +442,13 @@ class Renderer
         widgetInfo: State["widgetInfo"];
         widgetProps: State["widgetProps"];
     } = (props: Props) => {
-        const allWidgetInfo = this._getAllWidgetsInfo(props);
+        const allWidgetInfo = getUpgradedWidgetOptions(props.widgets);
         return {
             widgetInfo: allWidgetInfo,
             widgetProps: this._getAllWidgetsStartProps(allWidgetInfo, props),
         };
     };
 
-    // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
-    _getAllWidgetsInfo: (props: Props) => PerseusWidgetsMap = (
-        props: Props,
-    ) => {
-        return mapObject(props.widgets, (widgetInfo, widgetId) => {
-            if (!widgetInfo.type || !widgetInfo.alignment) {
-                const newValues: Record<string, any> = {};
-
-                if (!widgetInfo.type) {
-                    // TODO: why does widget have no type?
-                    // We don't want to derive type from widget ID
-                    // see: LEMS-1845
-                    newValues.type = widgetId.split(" ")[0];
-                }
-
-                if (!widgetInfo.alignment) {
-                    newValues.alignment = "default";
-                }
-
-                widgetInfo = _.extend({}, widgetInfo, newValues);
-            }
-            return Widgets.upgradeWidgetInfoToLatestVersion(widgetInfo);
-        });
-    };
-
     _getAllWidgetsStartProps: (
         allWidgetInfo: PerseusWidgetsMap,
         props: Props,
@@ -1124,7 +1103,7 @@ class Renderer
             // /cry(aria)
             this._foundTextNodes = true;
 
-            if (_.contains(this.widgetIds, node.id)) {
+            if (this.widgetIds.includes(node.id)) {
                 // We don't want to render a duplicate widget key/ref,
                 // as this causes problems with react (for obvious
                 // reasons). Instead we just notify the
@@ -1510,7 +1489,7 @@ class Renderer
 
     getInputPaths: () => ReadonlyArray<FocusPath> = () => {
         const inputPaths: Array<FocusPath> = [];
-        _.each(this.widgetIds, (widgetId: string) => {
+        this.widgetIds.forEach((widgetId: string) => {
             const widget = this.getWidgetInstance(widgetId);
             if (widget && widget.getInputPaths) {
                 // Grab all input paths and add widgetID to the front
@@ -1518,7 +1497,7 @@ class Renderer
                 // Prefix paths with their widgetID and add to collective
                 // list of paths.
                 // @ts-expect-error - TS2345 - Argument of type '(inputPath: string) => void' is not assignable to parameter of type 'CollectionIterator<FocusPath, void, readonly FocusPath[]>'.
-                _.each(widgetInputPaths, (inputPath: string) => {
+                widgetInputPaths.forEach((inputPath: string) => {
                     const relativeInputPath = [widgetId].concat(inputPath);
                     inputPaths.push(relativeInputPath);
                 });
@@ -1742,46 +1721,42 @@ class Renderer
     }
 
     /**
-     * Returns an object mapping from widget ID to perseus-style score.
-     * The keys of this object are the values of the array returned
-     * from `getWidgetIds`.
+     * Scores the content.
+     *
+     * @deprecated use scorePerseusItem
      */
-    scoreWidgets(): {[widgetId: string]: PerseusScore} {
-        return scoreWidgetsFunctional(
+    score(): PerseusScore {
+        const scores = scoreWidgetsFunctional(
             this.state.widgetInfo,
             this.widgetIds,
             this.getUserInputMap(),
             this.props.strings,
             this.context.locale,
         );
-    }
-
-    /**
-     * Grades the content.
-     */
-    score(): PerseusScore {
-        const scores = this.scoreWidgets();
         const combinedScore = Util.flattenScores(scores);
         return combinedScore;
     }
 
-    guessAndScore(): [UserInputArray, PerseusScore] {
+    /**
+     * @deprecated use scorePerseusItem
+     */
+    guessAndScore: () => [UserInputArray, PerseusScore] = () => {
         const totalGuess = this.getUserInput();
         const totalScore = this.score();
 
         return [totalGuess, totalScore];
-    }
+    };
 
     examples: () => ReadonlyArray<string> | null | undefined = () => {
         const widgetIds = this.widgetIds;
-        const examples = _.compact(
-            _.map(widgetIds, (widgetId) => {
+        const examples = widgetIds
+            .map((widgetId) => {
                 const widget = this.getWidgetInstance(widgetId);
                 return widget != null && widget.examples
                     ? widget.examples()
                     : null;
-            }),
-        );
+            })
+            .filter(Boolean);
 
         // no widgets with examples
         if (!examples.length) {
diff --git a/packages/perseus/src/server-item-renderer.tsx b/packages/perseus/src/server-item-renderer.tsx
index 41476dc8d7..f842ad5e13 100644
--- a/packages/perseus/src/server-item-renderer.tsx
+++ b/packages/perseus/src/server-item-renderer.tsx
@@ -19,6 +19,7 @@ import HintsRenderer from "./hints-renderer";
 import LoadingContext from "./loading-context";
 import {ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
+import {scorePerseusItem} from "./renderer-util";
 import Util from "./util";
 
 import type {PerseusItem, ShowSolutions} from "./perseus-types";
@@ -27,6 +28,7 @@ import type {
     PerseusDependenciesV2,
     SharedRendererProps,
 } from "./types";
+import type {UserInputArray, UserInputMap} from "./validation.types";
 import type {
     GetPromptJSONInterface,
     RendererPromptJSON,
@@ -42,6 +44,7 @@ import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 type OwnProps = {
     hintsVisible?: number;
     item: PerseusItem;
+    score?: KEScore | null;
     problemNum?: number;
     reviewMode?: boolean;
     keypadElement?: KeypadAPI | null | undefined;
@@ -60,10 +63,23 @@ type DefaultProps = Required<
 >;
 
 type State = {
+    /**
+     * questionCompleted is used to signal that a learner has attempted
+     * the exercise. This is used when widgets want to show things like
+     * rationale or partial correctness.
+     */
     questionCompleted: boolean;
-    questionHighlightedWidgets: ReadonlyArray<any>;
-    // Keeps track of whether each asset (SvgImage or TeX) rendered by
-    // the questionRenderer has finished loading or rendering.
+    /**
+     * As far as I can tell, this is used to highlight empty widgets
+     * after a learner has clicked the "check" button. I don't think this could
+     * still be used though, because the "check" button is disabled while there
+     * are empty widgets.
+     */
+    questionHighlightedWidgets: ReadonlyArray<string>;
+    /**
+     * Keeps track of whether each asset (SvgImage or TeX) rendered by
+     * the questionRenderer has finished loading or rendering.
+     */
     assetStatuses: {
         [assetKey: string]: boolean;
     };
@@ -139,6 +155,16 @@ export class ServerItemRenderer
                 this.props.onRendered(true);
             }
         }
+
+        if (this.props.score && this.props.score !== prevProps.score) {
+            const emptyQuestionAreaWidgets =
+                this.questionRenderer.emptyWidgets();
+
+            this.setState({
+                questionCompleted: this.props.score.correct,
+                questionHighlightedWidgets: emptyQuestionAreaWidgets,
+            });
+        }
     }
 
     componentWillUnmount() {
@@ -305,18 +331,42 @@ export class ServerItemRenderer
         return this.questionRenderer.getPromptJSON();
     }
 
+    /**
+     * Returns an array of the widget `.getUserInput()` results
+     *
+     * TODO: can we remove this? Seems to be just for backwards
+     * compatibility with old Perseus Chrome logging
+     * @deprecated use getUserInput
+     */
+    getUserInputLegacy(): UserInputArray {
+        return this.questionRenderer.getUserInput();
+    }
+
+    /**
+     * Returns an object of the widget `.getUserInput()` results
+     */
+    getUserInput(): UserInputMap {
+        return this.questionRenderer.getUserInputMap();
+    }
+
     /**
      * Grades the item.
+     *
+     * @deprecated use scorePerseusItem
      */
     scoreInput(): KEScore {
-        const guessAndScore = this.questionRenderer.guessAndScore();
-        const guess = guessAndScore[0];
-        const score = guessAndScore[1];
+        const guess = this.getUserInput();
+        const score = scorePerseusItem(
+            this.props.item.question,
+            guess,
+            this.context.strings,
+            this.context.locale,
+        );
 
         // Continue to include an empty guess for the now defunct answer area.
         // TODO(alex): Check whether we rely on the format here for
         //             analyzing ProblemLogs. If not, remove this layer.
-        const maxCompatGuess = [guess, []];
+        const maxCompatGuess = [this.questionRenderer.getUserInput(), []];
 
         const keScore = Util.keScoreFromPerseusScore(
             score,
diff --git a/packages/perseus/src/types.ts b/packages/perseus/src/types.ts
index ec8da5f961..6cc7f2babc 100644
--- a/packages/perseus/src/types.ts
+++ b/packages/perseus/src/types.ts
@@ -666,6 +666,11 @@ export type WidgetProps<
     problemNum: number | null | undefined;
     apiOptions: APIOptionsWithDefaults;
     keypadElement?: any;
+    /**
+     * questionCompleted is used to signal that a learner has attempted
+     * the exercise. This is used when widgets want to show things like
+     * rationale or partial correctness.
+     */
     questionCompleted?: boolean;
     onFocus: (blurPath: FocusPath) => void;
     onBlur: (blurPath: FocusPath) => void;
diff --git a/packages/perseus/src/widgets/categorizer/categorizer.test.ts b/packages/perseus/src/widgets/categorizer/categorizer.test.ts
index d428a3b779..96517d76a1 100644
--- a/packages/perseus/src/widgets/categorizer/categorizer.test.ts
+++ b/packages/perseus/src/widgets/categorizer/categorizer.test.ts
@@ -3,6 +3,8 @@ import {userEvent as userEventLib} from "@testing-library/user-event";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
+import {scorePerseusItem} from "../../renderer-util";
+import {mockStrings} from "../../strings";
 import {renderQuestion} from "../__testutils__/renderQuestion";
 
 import {Categorizer} from "./categorizer";
@@ -57,7 +59,12 @@ describe("categorizer widget", () => {
         const {renderer} = renderQuestion(question1, apiOptions);
 
         // Act
-        const [_, score] = renderer.guessAndScore();
+        const score = scorePerseusItem(
+            question1,
+            renderer.getUserInputMap(),
+            mockStrings,
+            "en",
+        );
 
         // Assert
         expect(score).toMatchInlineSnapshot(`
@@ -76,7 +83,12 @@ describe("categorizer widget", () => {
         await userEvent.click(firstItem);
 
         // act
-        const [_, score] = renderer.guessAndScore();
+        const score = scorePerseusItem(
+            question1,
+            renderer.getUserInputMap(),
+            mockStrings,
+            "en",
+        );
 
         // assert
         expect(score).toMatchInlineSnapshot(`
@@ -111,8 +123,6 @@ describe("categorizer widget", () => {
             })[1],
         );
 
-        renderer.guessAndScore();
-
         // assert
         expect(renderer).toHaveBeenAnsweredCorrectly();
     });
diff --git a/packages/perseus/src/widgets/definition/definition.test.ts b/packages/perseus/src/widgets/definition/definition.test.ts
index 261ba43d1a..d1fccca161 100644
--- a/packages/perseus/src/widgets/definition/definition.test.ts
+++ b/packages/perseus/src/widgets/definition/definition.test.ts
@@ -123,14 +123,11 @@ describe("Definition widget", () => {
     });
 
     it("should not affect answerable", () => {
-        // Arrange
+        // Arrange / Act
         const {renderer} = renderQuestion(question);
 
-        // Act
-        const result = renderer.scoreWidgets();
-
         // Assert
-        expect(result["definition 1"]).toHaveBeenAnsweredCorrectly({
+        expect(renderer).toHaveBeenAnsweredCorrectly({
             shouldHavePoints: false,
         });
     });
diff --git a/packages/perseus/src/widgets/deprecated-standin/__tests__/deprecated-standin.test.ts b/packages/perseus/src/widgets/deprecated-standin/__tests__/deprecated-standin.test.ts
index 93604de822..3aa8b98c69 100644
--- a/packages/perseus/src/widgets/deprecated-standin/__tests__/deprecated-standin.test.ts
+++ b/packages/perseus/src/widgets/deprecated-standin/__tests__/deprecated-standin.test.ts
@@ -41,13 +41,10 @@ describe("Deprecated Standin widget", () => {
     });
 
     it("should be scorable and always give points", () => {
-        // Arrange
+        // Arrange / Act
         const {renderer} = renderQuestion(question);
 
-        // Act
-        const result = renderer.scoreWidgets();
-
         // Assert
-        expect(result["widget 1"]).toHaveBeenAnsweredCorrectly();
+        expect(renderer).toHaveBeenAnsweredCorrectly();
     });
 });
diff --git a/packages/perseus/src/widgets/expression/expression.test.tsx b/packages/perseus/src/widgets/expression/expression.test.tsx
index 2f5ee2a239..278e6a873e 100644
--- a/packages/perseus/src/widgets/expression/expression.test.tsx
+++ b/packages/perseus/src/widgets/expression/expression.test.tsx
@@ -7,6 +7,8 @@ import {
     testDependenciesV2,
 } from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
+import {scorePerseusItem} from "../../renderer-util";
+import {mockStrings} from "../../strings";
 import {renderQuestion} from "../__testutils__/renderQuestion";
 
 import ExpressionWidgetExport from "./expression";
@@ -447,7 +449,12 @@ describe("Expression Widget", function () {
                 renderer.setInputValue(["expression 1"], "123-x", () => {}),
             );
             act(() => jest.runOnlyPendingTimers());
-            const score = renderer.guessAndScore()[1];
+            const score = scorePerseusItem(
+                expressionItem2.question,
+                renderer.getUserInputMap(),
+                mockStrings,
+                "en",
+            );
 
             // Assert
             expect(score.type).toBe("points");
@@ -467,7 +474,12 @@ describe("Expression Widget", function () {
             act(() => jest.runOnlyPendingTimers());
 
             // act
-            const score = renderer.score();
+            const score = scorePerseusItem(
+                expressionItem2.question,
+                renderer.getUserInputMap(),
+                mockStrings,
+                "en",
+            );
 
             // Assert
             // Score.total doesn't exist if the input is invalid
@@ -498,7 +510,6 @@ describe("Expression Widget", function () {
             act(() => jest.runOnlyPendingTimers());
             act(() => screen.getByRole("textbox").blur());
             act(() => jest.runOnlyPendingTimers());
-            renderer.guessAndScore();
 
             // Assert
             await waitFor(() =>
@@ -517,7 +528,6 @@ describe("Expression Widget", function () {
             act(() => expression.insert("sen(x)"));
             act(() => jest.runOnlyPendingTimers());
             act(() => screen.getByRole("textbox").blur());
-            renderer.guessAndScore();
 
             // Assert
             expect(screen.queryByText("Oops!")).toBeNull();
diff --git a/packages/perseus/src/widgets/group/group.test.tsx b/packages/perseus/src/widgets/group/group.test.tsx
index b4d1316bfb..7f090d3e46 100644
--- a/packages/perseus/src/widgets/group/group.test.tsx
+++ b/packages/perseus/src/widgets/group/group.test.tsx
@@ -8,6 +8,7 @@ import * as Perseus from "@khanacademy/perseus";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
+import {scorePerseusItem} from "../../renderer-util";
 import {mockStrings} from "../../strings";
 import {traverse} from "../../traversal";
 import {renderQuestion} from "../__testutils__/renderQuestion";
@@ -413,10 +414,13 @@ describe("group widget", () => {
             screen.getByRole("textbox", {name: /nearest hundred/}),
             "200",
         );
-        const guessAndScore = renderer.guessAndScore();
+
+        const guess = renderer.getUserInputMap();
+        const score = scorePerseusItem(question1, guess, mockStrings, "en");
+        const guessAndScore = [renderer.getUserInput(), score];
 
         // Assert
-        expect(guessAndScore[1]).toHaveBeenAnsweredCorrectly();
+        expect(score).toHaveBeenAnsweredCorrectly();
         expect(guessAndScore).toMatchInlineSnapshot(`
             [
               [
diff --git a/packages/perseus/src/widgets/group/group.tsx b/packages/perseus/src/widgets/group/group.tsx
index 8affeafdb4..6df7646007 100644
--- a/packages/perseus/src/widgets/group/group.tsx
+++ b/packages/perseus/src/widgets/group/group.tsx
@@ -154,6 +154,8 @@ class Group extends React.Component<Props> implements Widget {
             }
         };
 
+        // TODO(LEMS-2391): replace this when there's a separate check
+        // for valid/invalid state
         const score = this.rendererRef?.score();
         const isValid = score && score.type !== "invalid";
         const isInvalid = score && score.type === "invalid";
diff --git a/packages/perseus/src/widgets/matcher/matcher.test.tsx b/packages/perseus/src/widgets/matcher/matcher.test.tsx
index 61872ecc16..c583ad1490 100644
--- a/packages/perseus/src/widgets/matcher/matcher.test.tsx
+++ b/packages/perseus/src/widgets/matcher/matcher.test.tsx
@@ -105,6 +105,7 @@ describe("matcher widget", () => {
         const {renderer} = renderQuestion(question1, apiOptions);
         await wait();
 
+        // Act
         const matcher: Matcher = renderer.findWidgets("matcher 1")[0];
 
         // Put the right options in the correct order by repeatedly moving
@@ -119,9 +120,6 @@ describe("matcher widget", () => {
             act(() => matcher.moveRightOptionToIndex(option, 4));
         });
 
-        // Act
-        renderer.guessAndScore();
-
         // assert
         expect(renderer).toHaveBeenAnsweredCorrectly();
     });
@@ -134,6 +132,7 @@ describe("matcher widget", () => {
         const {renderer} = renderQuestion(question1, apiOptions);
         await wait();
 
+        // Act
         const matcher: Matcher = renderer.findWidgets("matcher 1")[0];
 
         // Put the left options in reverse order
@@ -147,9 +146,6 @@ describe("matcher widget", () => {
             matcher.moveLeftOptionToIndex(option, 0);
         });
 
-        // Act
-        renderer.guessAndScore();
-
         // Assert
         expect(renderer).toHaveBeenAnsweredIncorrectly();
     });
@@ -164,14 +160,12 @@ describe("matcher widget", () => {
             },
         });
 
+        // Act
         const apiOptions: APIOptions = {
             isMobile: false,
         };
         const {renderer} = renderQuestion(question1, apiOptions);
 
-        // Act
-        renderer.guessAndScore();
-
         // Assert
         expect(renderer).toHaveBeenAnsweredIncorrectly();
     });
diff --git a/packages/perseus/src/widgets/matrix/matrix.test.ts b/packages/perseus/src/widgets/matrix/matrix.test.ts
index 05aebbdcad..27eee1a180 100644
--- a/packages/perseus/src/widgets/matrix/matrix.test.ts
+++ b/packages/perseus/src/widgets/matrix/matrix.test.ts
@@ -62,8 +62,6 @@ describe("matrix widget", () => {
             await userEvent.type(textboxes[i], correctAnswers[i].toString());
         }
 
-        renderer.guessAndScore();
-
         // assert
         expect(renderer).toHaveBeenAnsweredCorrectly();
     });
@@ -81,8 +79,6 @@ describe("matrix widget", () => {
             await userEvent.type(textboxes[i], "1");
         }
 
-        renderer.guessAndScore();
-
         // Assert
         expect(renderer).toHaveBeenAnsweredIncorrectly();
     });
diff --git a/packages/perseus/src/widgets/passage/__tests__/passage.test.tsx b/packages/perseus/src/widgets/passage/__tests__/passage.test.tsx
index fd3026773d..f34a76d644 100644
--- a/packages/perseus/src/widgets/passage/__tests__/passage.test.tsx
+++ b/packages/perseus/src/widgets/passage/__tests__/passage.test.tsx
@@ -5,6 +5,8 @@ import React from "react";
 import {testDependencies} from "../../../../../../testing/test-dependencies";
 import * as Dependencies from "../../../dependencies";
 import {ApiOptions} from "../../../perseus-api";
+import {scorePerseusItem} from "../../../renderer-util";
+import {mockStrings} from "../../../strings";
 import {renderQuestion} from "../../__testutils__/renderQuestion";
 import PassageWidgetExport, {LineHeightMeasurer} from "../passage";
 
@@ -133,7 +135,12 @@ describe("passage widget", () => {
         act(() => jest.runOnlyPendingTimers());
 
         // Act
-        const score = renderer.score();
+        const score = scorePerseusItem(
+            question2,
+            renderer.getUserInputMap(),
+            mockStrings,
+            "en",
+        );
 
         // Assert
         expect(score).toMatchInlineSnapshot(`
diff --git a/testing/renderer-with-debug-ui.tsx b/testing/renderer-with-debug-ui.tsx
index 322d81422f..e66ec3493b 100644
--- a/testing/renderer-with-debug-ui.tsx
+++ b/testing/renderer-with-debug-ui.tsx
@@ -10,6 +10,8 @@ import * as React from "react";
 import ReactJson from "react-json-view";
 
 import {Renderer, usePerseusI18n} from "../packages/perseus/src/index";
+import {scorePerseusItem} from "../packages/perseus/src/renderer-util";
+import {mockStrings} from "../packages/perseus/src/strings";
 import {registerAllWidgetsForTesting} from "../packages/perseus/src/util/register-all-widgets-for-testing";
 
 import SideBySide from "./side-by-side";
@@ -80,7 +82,14 @@ export const RendererWithDebugUI = ({
                                 if (!ref.current) {
                                     return;
                                 }
-                                setState(ref.current.guessAndScore());
+                                const guess = ref.current.getUserInputMap();
+                                const score = scorePerseusItem(
+                                    question,
+                                    ref.current.getUserInputMap(),
+                                    mockStrings,
+                                    "en",
+                                );
+                                setState([guess, score]);
                             }}
                         >
                             Check

From 30ceb04e61e46790c5d5658bc4c868dccbbc99b7 Mon Sep 17 00:00:00 2001
From: Khan Actions Bot <56267880+khan-actions-bot@users.noreply.github.com>
Date: Tue, 3 Dec 2024 15:04:03 -0500
Subject: [PATCH 2/3] Version Packages (#1943)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/honest-tables-impress.md  | 6 ------
 dev/CHANGELOG.md                     | 6 ++++++
 dev/package.json                     | 2 +-
 packages/perseus-editor/CHANGELOG.md | 7 +++++++
 packages/perseus-editor/package.json | 4 ++--
 packages/perseus/CHANGELOG.md        | 6 ++++++
 packages/perseus/package.json        | 2 +-
 7 files changed, 23 insertions(+), 10 deletions(-)
 delete mode 100644 .changeset/honest-tables-impress.md

diff --git a/.changeset/honest-tables-impress.md b/.changeset/honest-tables-impress.md
deleted file mode 100644
index 29dd4efe54..0000000000
--- a/.changeset/honest-tables-impress.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@khanacademy/perseus": major
-"@khanacademy/perseus-dev-ui": patch
----
-
-Change ServerItemRenderer scoring APIs to externalize scoring
diff --git a/dev/CHANGELOG.md b/dev/CHANGELOG.md
index 524f7f037f..5619529864 100644
--- a/dev/CHANGELOG.md
+++ b/dev/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @khanacademy/perseus-dev-ui
 
+## 4.0.3
+
+### Patch Changes
+
+-   [#1910](https://github.com/Khan/perseus/pull/1910) [`0a44d468d`](https://github.com/Khan/perseus/commit/0a44d468dd127bf15dc32e720b9b0301af41a572) Thanks [@handeyeco](https://github.com/handeyeco)! - Change ServerItemRenderer scoring APIs to externalize scoring
+
 ## 4.0.2
 
 ### Patch Changes
diff --git a/dev/package.json b/dev/package.json
index 6bbdd20c84..e11d359a03 100644
--- a/dev/package.json
+++ b/dev/package.json
@@ -3,7 +3,7 @@
     "description": "Perseus dev UI",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "4.0.2",
+    "version": "4.0.3",
     "private": true,
     "repository": {
         "type": "git",
diff --git a/packages/perseus-editor/CHANGELOG.md b/packages/perseus-editor/CHANGELOG.md
index 388d39a564..39f7a57d75 100644
--- a/packages/perseus-editor/CHANGELOG.md
+++ b/packages/perseus-editor/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @khanacademy/perseus-editor
 
+## 15.1.1
+
+### Patch Changes
+
+-   Updated dependencies [[`0a44d468d`](https://github.com/Khan/perseus/commit/0a44d468dd127bf15dc32e720b9b0301af41a572)]:
+    -   @khanacademy/perseus@45.0.0
+
 ## 15.1.0
 
 ### Minor Changes
diff --git a/packages/perseus-editor/package.json b/packages/perseus-editor/package.json
index 4b491ab915..4bb72e1636 100644
--- a/packages/perseus-editor/package.json
+++ b/packages/perseus-editor/package.json
@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "15.1.0",
+    "version": "15.1.1",
     "publishConfig": {
         "access": "public"
     },
@@ -38,7 +38,7 @@
         "@khanacademy/keypad-context": "^1.0.4",
         "@khanacademy/kmath": "^0.1.16",
         "@khanacademy/math-input": "^21.1.6",
-        "@khanacademy/perseus": "^44.0.0",
+        "@khanacademy/perseus": "^45.0.0",
         "@khanacademy/perseus-core": "1.5.3",
         "@khanacademy/pure-markdown": "^0.3.13",
         "mafs": "^0.19.0"
diff --git a/packages/perseus/CHANGELOG.md b/packages/perseus/CHANGELOG.md
index b1f0323746..f2a72611c0 100644
--- a/packages/perseus/CHANGELOG.md
+++ b/packages/perseus/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @khanacademy/perseus
 
+## 45.0.0
+
+### Major Changes
+
+-   [#1910](https://github.com/Khan/perseus/pull/1910) [`0a44d468d`](https://github.com/Khan/perseus/commit/0a44d468dd127bf15dc32e720b9b0301af41a572) Thanks [@handeyeco](https://github.com/handeyeco)! - Change ServerItemRenderer scoring APIs to externalize scoring
+
 ## 44.0.0
 
 ### Major Changes
diff --git a/packages/perseus/package.json b/packages/perseus/package.json
index 1c61a2b720..f2b5675d44 100644
--- a/packages/perseus/package.json
+++ b/packages/perseus/package.json
@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "44.0.0",
+    "version": "45.0.0",
     "publishConfig": {
         "access": "public"
     },

From e3062b3c8d7a27956bc49e2364e20169cba59781 Mon Sep 17 00:00:00 2001
From: Mark Fitzgerald <13896410+mark-fitzgerald@users.noreply.github.com>
Date: Tue, 3 Dec 2024 12:05:24 -0800
Subject: [PATCH 3/3] [Numeric Input] - Update styling to match modern inputs
 (#1832)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
The styling of the numeric input widget is quite constrained in regards to its size, and it is difficult to know when it has focus. Increasing its height will make it more physically accessible (better touch target). Adding more internal padding and increasing the border width will help with visual accessibility regarding a user's recognition of it having focus. Also, matching the styling that is used for the Expression widget (a close relative of this widget) lessens the cognitive load on users who see these two inputs as being similar/same (they don't know that they are two different widgets).

Issue: LEMS-2426

## Test plan:
1. Launch Storybook (yarn start)
1. Navigate to Perseus => Widgets => NumericInput => [Question 1](http://localhost:6006/?path=/story/perseus-widgets-numericinput--question-1)
   * Note that the input field is larger
1. Click or tab into the field
   * Note that the border is thicker and that the cursor is more visible (not next to the border as it was before)

## Affected UI:
### Standard presentation
#### Before:
![Before - Standard](https://github.com/user-attachments/assets/37644eb2-614d-4c8e-9d45-8222b47d03a4)

#### After:
![After - Standard](https://github.com/user-attachments/assets/bf9730af-55fa-4015-8d7e-c66fe20ace22)

### In-Focus
#### Before:
![Before - Focused](https://github.com/user-attachments/assets/9d9e786b-d152-4d92-bb11-8d7eff025743)

#### After:
![After - Focused](https://github.com/user-attachments/assets/46028bd9-892a-46a4-a9c0-f2e4227bfd40)

Author: mark-fitzgerald

Reviewers: SonicScrewdriver

Required Reviewers:

Approved By: SonicScrewdriver

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: https://github.com/Khan/perseus/pull/1832
---
 .changeset/two-turtles-return.md              |   5 +
 .../graded-group-set-jipt.test.ts.snap        | 786 +++++++++---------
 .../graded-group-set.test.ts.snap             | 262 +++---
 .../group/__snapshots__/group.test.tsx.snap   | 524 ++++++------
 .../__snapshots__/numeric-input.test.ts.snap  | 524 ++++++------
 .../widgets/numeric-input/numeric-input.tsx   |  46 +-
 6 files changed, 1074 insertions(+), 1073 deletions(-)
 create mode 100644 .changeset/two-turtles-return.md

diff --git a/.changeset/two-turtles-return.md b/.changeset/two-turtles-return.md
new file mode 100644
index 0000000000..f04274f897
--- /dev/null
+++ b/.changeset/two-turtles-return.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+[Numeric Input] - Update the UI to match Expression widget
diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
index f1453a2201..3926e342d6 100644
--- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
@@ -59,175 +59,173 @@ exports[`graded-group-set should render all graded groups 1`] = `
                     <div
                       class="perseus-widget-container widget-nohighlight widget-inline-block"
                     >
-                      <div>
-                        <span>
-                          <div>
-                            <input
-                              aria-invalid="false"
-                              aria-label="Your answer:"
-                              autocapitalize="off"
-                              autocomplete="off"
-                              autocorrect="off"
-                              class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn"
-                              id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
-                              type="text"
-                              value=""
-                            />
-                          </div>
+                      <span>
+                        <div>
+                          <input
+                            aria-invalid="false"
+                            aria-label="Your answer:"
+                            autocapitalize="off"
+                            autocomplete="off"
+                            autocorrect="off"
+                            class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_1y6ajxo"
+                            id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                            type="text"
+                            value=""
+                          />
+                        </div>
+                        <div
+                          style="position: relative; height: 0px; display: none;"
+                        >
                           <div
-                            style="position: relative; height: 0px; display: none;"
+                            class="tooltipContainer"
+                            style="position: absolute; left: 0px;"
                           >
                             <div
-                              class="tooltipContainer"
-                              style="position: absolute; left: 0px;"
+                              style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
                             >
                               <div
-                                style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                              >
-                                <div
-                                  style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                                />
-                                <div
-                                  style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                                />
-                              </div>
+                                style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                              />
                               <div
-                                class="perseus-formats-tooltip preview-measure"
-                                style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                                style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                              />
+                            </div>
+                            <div
+                              class="perseus-formats-tooltip preview-measure"
+                              style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                            >
+                              <div
+                                id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                               >
                                 <div
-                                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                                  class="perseus-renderer perseus-renderer-responsive"
                                 >
                                   <div
-                                    class="perseus-renderer perseus-renderer-responsive"
+                                    class="paragraph"
+                                    data-perseus-paragraph-index="0"
                                   >
-                                    <div
-                                      class="paragraph"
-                                      data-perseus-paragraph-index="0"
-                                    >
-                                      <ul>
-                                        <li>
-                                          <strong>
-                                            Your answer should be
-                                          </strong>
-                                        </li>
-                                        <li>
-                                          an integer, like 
+                                    <ul>
+                                      <li>
+                                        <strong>
+                                          Your answer should be
+                                        </strong>
+                                      </li>
+                                      <li>
+                                        an integer, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              6
-                                            </span>
-                                            <span />
+                                            6
                                           </span>
-                                        </li>
-                                        <li>
-                                          a 
-                                          <em>
-                                            simplified proper
-                                          </em>
-                                           fraction, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a 
+                                        <em>
+                                          simplified proper
+                                        </em>
+                                         fraction, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              3/5
-                                            </span>
-                                            <span />
+                                            3/5
                                           </span>
-                                        </li>
-                                        <li>
-                                          a 
-                                          <em>
-                                            simplified improper
-                                          </em>
-                                           fraction, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a 
+                                        <em>
+                                          simplified improper
+                                        </em>
+                                         fraction, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              7/4
-                                            </span>
-                                            <span />
+                                            7/4
                                           </span>
-                                        </li>
-                                        <li>
-                                          a mixed number, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a mixed number, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              1\\ 3/4
-                                            </span>
-                                            <span />
+                                            1\\ 3/4
                                           </span>
-                                        </li>
-                                        <li>
-                                          an 
-                                          <em>
-                                            exact
-                                          </em>
-                                           decimal, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        an 
+                                        <em>
+                                          exact
+                                        </em>
+                                         decimal, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              0.75
-                                            </span>
-                                            <span />
+                                            0.75
                                           </span>
-                                        </li>
-                                        <li>
-                                          a multiple of pi, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a multiple of pi, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              12\\ \\text{pi}
-                                            </span>
-                                            <span />
+                                            12\\ \\text{pi}
                                           </span>
-                                           or 
+                                          <span />
+                                        </span>
+                                         or 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              2/3\\ \\text{pi}
-                                            </span>
-                                            <span />
+                                            2/3\\ \\text{pi}
                                           </span>
-                                        </li>
-                                      </ul>
-                                    </div>
+                                          <span />
+                                        </span>
+                                      </li>
+                                    </ul>
                                   </div>
                                 </div>
                               </div>
                             </div>
                           </div>
-                        </span>
-                      </div>
+                        </div>
+                      </span>
                     </div>
                   </div>
                 </div>
@@ -288,175 +286,173 @@ exports[`graded-group-set should render all graded groups 1`] = `
                     <div
                       class="perseus-widget-container widget-nohighlight widget-inline-block"
                     >
-                      <div>
-                        <span>
-                          <div>
-                            <input
-                              aria-invalid="false"
-                              aria-label="Your answer:"
-                              autocapitalize="off"
-                              autocomplete="off"
-                              autocorrect="off"
-                              class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn"
-                              id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
-                              type="text"
-                              value=""
-                            />
-                          </div>
+                      <span>
+                        <div>
+                          <input
+                            aria-invalid="false"
+                            aria-label="Your answer:"
+                            autocapitalize="off"
+                            autocomplete="off"
+                            autocorrect="off"
+                            class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_1y6ajxo"
+                            id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                            type="text"
+                            value=""
+                          />
+                        </div>
+                        <div
+                          style="position: relative; height: 0px; display: none;"
+                        >
                           <div
-                            style="position: relative; height: 0px; display: none;"
+                            class="tooltipContainer"
+                            style="position: absolute; left: 0px;"
                           >
                             <div
-                              class="tooltipContainer"
-                              style="position: absolute; left: 0px;"
+                              style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
                             >
                               <div
-                                style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                              >
-                                <div
-                                  style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                                />
-                                <div
-                                  style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                                />
-                              </div>
+                                style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                              />
                               <div
-                                class="perseus-formats-tooltip preview-measure"
-                                style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                                style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                              />
+                            </div>
+                            <div
+                              class="perseus-formats-tooltip preview-measure"
+                              style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                            >
+                              <div
+                                id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                               >
                                 <div
-                                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                                  class="perseus-renderer perseus-renderer-responsive"
                                 >
                                   <div
-                                    class="perseus-renderer perseus-renderer-responsive"
+                                    class="paragraph"
+                                    data-perseus-paragraph-index="0"
                                   >
-                                    <div
-                                      class="paragraph"
-                                      data-perseus-paragraph-index="0"
-                                    >
-                                      <ul>
-                                        <li>
-                                          <strong>
-                                            Your answer should be
-                                          </strong>
-                                        </li>
-                                        <li>
-                                          an integer, like 
+                                    <ul>
+                                      <li>
+                                        <strong>
+                                          Your answer should be
+                                        </strong>
+                                      </li>
+                                      <li>
+                                        an integer, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              6
-                                            </span>
-                                            <span />
+                                            6
                                           </span>
-                                        </li>
-                                        <li>
-                                          a 
-                                          <em>
-                                            simplified proper
-                                          </em>
-                                           fraction, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a 
+                                        <em>
+                                          simplified proper
+                                        </em>
+                                         fraction, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              3/5
-                                            </span>
-                                            <span />
+                                            3/5
                                           </span>
-                                        </li>
-                                        <li>
-                                          a 
-                                          <em>
-                                            simplified improper
-                                          </em>
-                                           fraction, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a 
+                                        <em>
+                                          simplified improper
+                                        </em>
+                                         fraction, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              7/4
-                                            </span>
-                                            <span />
+                                            7/4
                                           </span>
-                                        </li>
-                                        <li>
-                                          a mixed number, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a mixed number, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              1\\ 3/4
-                                            </span>
-                                            <span />
+                                            1\\ 3/4
                                           </span>
-                                        </li>
-                                        <li>
-                                          an 
-                                          <em>
-                                            exact
-                                          </em>
-                                           decimal, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        an 
+                                        <em>
+                                          exact
+                                        </em>
+                                         decimal, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              0.75
-                                            </span>
-                                            <span />
+                                            0.75
                                           </span>
-                                        </li>
-                                        <li>
-                                          a multiple of pi, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a multiple of pi, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              12\\ \\text{pi}
-                                            </span>
-                                            <span />
+                                            12\\ \\text{pi}
                                           </span>
-                                           or 
+                                          <span />
+                                        </span>
+                                         or 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              2/3\\ \\text{pi}
-                                            </span>
-                                            <span />
+                                            2/3\\ \\text{pi}
                                           </span>
-                                        </li>
-                                      </ul>
-                                    </div>
+                                          <span />
+                                        </span>
+                                      </li>
+                                    </ul>
                                   </div>
                                 </div>
                               </div>
                             </div>
                           </div>
-                        </span>
-                      </div>
+                        </div>
+                      </span>
                     </div>
                   </div>
                 </div>
@@ -517,175 +513,173 @@ exports[`graded-group-set should render all graded groups 1`] = `
                     <div
                       class="perseus-widget-container widget-nohighlight widget-inline-block"
                     >
-                      <div>
-                        <span>
-                          <div>
-                            <input
-                              aria-invalid="false"
-                              aria-label="Your answer:"
-                              autocapitalize="off"
-                              autocomplete="off"
-                              autocorrect="off"
-                              class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn"
-                              id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
-                              type="text"
-                              value=""
-                            />
-                          </div>
+                      <span>
+                        <div>
+                          <input
+                            aria-invalid="false"
+                            aria-label="Your answer:"
+                            autocapitalize="off"
+                            autocomplete="off"
+                            autocorrect="off"
+                            class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_1y6ajxo"
+                            id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                            type="text"
+                            value=""
+                          />
+                        </div>
+                        <div
+                          style="position: relative; height: 0px; display: none;"
+                        >
                           <div
-                            style="position: relative; height: 0px; display: none;"
+                            class="tooltipContainer"
+                            style="position: absolute; left: 0px;"
                           >
                             <div
-                              class="tooltipContainer"
-                              style="position: absolute; left: 0px;"
+                              style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
                             >
                               <div
-                                style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                              >
-                                <div
-                                  style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                                />
-                                <div
-                                  style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                                />
-                              </div>
+                                style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                              />
                               <div
-                                class="perseus-formats-tooltip preview-measure"
-                                style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                                style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                              />
+                            </div>
+                            <div
+                              class="perseus-formats-tooltip preview-measure"
+                              style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                            >
+                              <div
+                                id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                               >
                                 <div
-                                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                                  class="perseus-renderer perseus-renderer-responsive"
                                 >
                                   <div
-                                    class="perseus-renderer perseus-renderer-responsive"
+                                    class="paragraph"
+                                    data-perseus-paragraph-index="0"
                                   >
-                                    <div
-                                      class="paragraph"
-                                      data-perseus-paragraph-index="0"
-                                    >
-                                      <ul>
-                                        <li>
-                                          <strong>
-                                            Your answer should be
-                                          </strong>
-                                        </li>
-                                        <li>
-                                          an integer, like 
+                                    <ul>
+                                      <li>
+                                        <strong>
+                                          Your answer should be
+                                        </strong>
+                                      </li>
+                                      <li>
+                                        an integer, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              6
-                                            </span>
-                                            <span />
+                                            6
                                           </span>
-                                        </li>
-                                        <li>
-                                          a 
-                                          <em>
-                                            simplified proper
-                                          </em>
-                                           fraction, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a 
+                                        <em>
+                                          simplified proper
+                                        </em>
+                                         fraction, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              3/5
-                                            </span>
-                                            <span />
+                                            3/5
                                           </span>
-                                        </li>
-                                        <li>
-                                          a 
-                                          <em>
-                                            simplified improper
-                                          </em>
-                                           fraction, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a 
+                                        <em>
+                                          simplified improper
+                                        </em>
+                                         fraction, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              7/4
-                                            </span>
-                                            <span />
+                                            7/4
                                           </span>
-                                        </li>
-                                        <li>
-                                          a mixed number, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a mixed number, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              1\\ 3/4
-                                            </span>
-                                            <span />
+                                            1\\ 3/4
                                           </span>
-                                        </li>
-                                        <li>
-                                          an 
-                                          <em>
-                                            exact
-                                          </em>
-                                           decimal, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        an 
+                                        <em>
+                                          exact
+                                        </em>
+                                         decimal, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              0.75
-                                            </span>
-                                            <span />
+                                            0.75
                                           </span>
-                                        </li>
-                                        <li>
-                                          a multiple of pi, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a multiple of pi, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              12\\ \\text{pi}
-                                            </span>
-                                            <span />
+                                            12\\ \\text{pi}
                                           </span>
-                                           or 
+                                          <span />
+                                        </span>
+                                         or 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              2/3\\ \\text{pi}
-                                            </span>
-                                            <span />
+                                            2/3\\ \\text{pi}
                                           </span>
-                                        </li>
-                                      </ul>
-                                    </div>
+                                          <span />
+                                        </span>
+                                      </li>
+                                    </ul>
                                   </div>
                                 </div>
                               </div>
                             </div>
                           </div>
-                        </span>
-                      </div>
+                        </div>
+                      </span>
                     </div>
                   </div>
                 </div>
diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
index ce69ebd6c0..edff67474d 100644
--- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
@@ -125,175 +125,173 @@ exports[`graded group widget should snapshot 1`] = `
                     <div
                       class="perseus-widget-container widget-nohighlight widget-inline-block"
                     >
-                      <div>
-                        <span>
-                          <div>
-                            <input
-                              aria-invalid="false"
-                              aria-label="Your answer:"
-                              autocapitalize="off"
-                              autocomplete="off"
-                              autocorrect="off"
-                              class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn"
-                              id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
-                              type="text"
-                              value=""
-                            />
-                          </div>
+                      <span>
+                        <div>
+                          <input
+                            aria-invalid="false"
+                            aria-label="Your answer:"
+                            autocapitalize="off"
+                            autocomplete="off"
+                            autocorrect="off"
+                            class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_1y6ajxo"
+                            id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                            type="text"
+                            value=""
+                          />
+                        </div>
+                        <div
+                          style="position: relative; height: 0px; display: none;"
+                        >
                           <div
-                            style="position: relative; height: 0px; display: none;"
+                            class="tooltipContainer"
+                            style="position: absolute; left: 0px;"
                           >
                             <div
-                              class="tooltipContainer"
-                              style="position: absolute; left: 0px;"
+                              style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
                             >
                               <div
-                                style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                              >
-                                <div
-                                  style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                                />
-                                <div
-                                  style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                                />
-                              </div>
+                                style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                              />
                               <div
-                                class="perseus-formats-tooltip preview-measure"
-                                style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                                style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                              />
+                            </div>
+                            <div
+                              class="perseus-formats-tooltip preview-measure"
+                              style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                            >
+                              <div
+                                id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                               >
                                 <div
-                                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                                  class="perseus-renderer perseus-renderer-responsive"
                                 >
                                   <div
-                                    class="perseus-renderer perseus-renderer-responsive"
+                                    class="paragraph"
+                                    data-perseus-paragraph-index="0"
                                   >
-                                    <div
-                                      class="paragraph"
-                                      data-perseus-paragraph-index="0"
-                                    >
-                                      <ul>
-                                        <li>
-                                          <strong>
-                                            Your answer should be
-                                          </strong>
-                                        </li>
-                                        <li>
-                                          an integer, like 
+                                    <ul>
+                                      <li>
+                                        <strong>
+                                          Your answer should be
+                                        </strong>
+                                      </li>
+                                      <li>
+                                        an integer, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              6
-                                            </span>
-                                            <span />
+                                            6
                                           </span>
-                                        </li>
-                                        <li>
-                                          a 
-                                          <em>
-                                            simplified proper
-                                          </em>
-                                           fraction, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a 
+                                        <em>
+                                          simplified proper
+                                        </em>
+                                         fraction, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              3/5
-                                            </span>
-                                            <span />
+                                            3/5
                                           </span>
-                                        </li>
-                                        <li>
-                                          a 
-                                          <em>
-                                            simplified improper
-                                          </em>
-                                           fraction, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a 
+                                        <em>
+                                          simplified improper
+                                        </em>
+                                         fraction, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              7/4
-                                            </span>
-                                            <span />
+                                            7/4
                                           </span>
-                                        </li>
-                                        <li>
-                                          a mixed number, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a mixed number, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              1\\ 3/4
-                                            </span>
-                                            <span />
+                                            1\\ 3/4
                                           </span>
-                                        </li>
-                                        <li>
-                                          an 
-                                          <em>
-                                            exact
-                                          </em>
-                                           decimal, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        an 
+                                        <em>
+                                          exact
+                                        </em>
+                                         decimal, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              0.75
-                                            </span>
-                                            <span />
+                                            0.75
                                           </span>
-                                        </li>
-                                        <li>
-                                          a multiple of pi, like 
+                                          <span />
+                                        </span>
+                                      </li>
+                                      <li>
+                                        a multiple of pi, like 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              12\\ \\text{pi}
-                                            </span>
-                                            <span />
+                                            12\\ \\text{pi}
                                           </span>
-                                           or 
+                                          <span />
+                                        </span>
+                                         or 
+                                        <span
+                                          style="white-space: nowrap;"
+                                        >
+                                          <span />
                                           <span
-                                            style="white-space: nowrap;"
+                                            class="mock-TeX"
                                           >
-                                            <span />
-                                            <span
-                                              class="mock-TeX"
-                                            >
-                                              2/3\\ \\text{pi}
-                                            </span>
-                                            <span />
+                                            2/3\\ \\text{pi}
                                           </span>
-                                        </li>
-                                      </ul>
-                                    </div>
+                                          <span />
+                                        </span>
+                                      </li>
+                                    </ul>
                                   </div>
                                 </div>
                               </div>
                             </div>
                           </div>
-                        </span>
-                      </div>
+                        </div>
+                      </span>
                     </div>
                   </div>
                 </div>
diff --git a/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap b/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
index 828a6ab9b6..899ca9bb11 100644
--- a/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
+++ b/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
@@ -752,175 +752,173 @@ exports[`group widget should snapshot: initial render 1`] = `
                         <div
                           class="perseus-widget-container widget-nohighlight widget-inline-block"
                         >
-                          <div>
-                            <span>
-                              <div>
-                                <input
-                                  aria-invalid="false"
-                                  aria-label="value rounded to the nearest ten"
-                                  autocapitalize="off"
-                                  autocomplete="off"
-                                  autocorrect="off"
-                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn"
-                                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
-                                  type="text"
-                                  value=""
-                                />
-                              </div>
+                          <span>
+                            <div>
+                              <input
+                                aria-invalid="false"
+                                aria-label="value rounded to the nearest ten"
+                                autocapitalize="off"
+                                autocomplete="off"
+                                autocorrect="off"
+                                class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_1y6ajxo"
+                                id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                                type="text"
+                                value=""
+                              />
+                            </div>
+                            <div
+                              style="position: relative; height: 0px; display: none;"
+                            >
                               <div
-                                style="position: relative; height: 0px; display: none;"
+                                class="tooltipContainer"
+                                style="position: absolute; left: 0px;"
                               >
                                 <div
-                                  class="tooltipContainer"
-                                  style="position: absolute; left: 0px;"
+                                  style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
                                 >
                                   <div
-                                    style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                                  >
-                                    <div
-                                      style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                                    />
-                                    <div
-                                      style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                                    />
-                                  </div>
+                                    style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                                  />
                                   <div
-                                    class="perseus-formats-tooltip preview-measure"
-                                    style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                                    style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                                  />
+                                </div>
+                                <div
+                                  class="perseus-formats-tooltip preview-measure"
+                                  style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                                >
+                                  <div
+                                    id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   >
                                     <div
-                                      id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                                      class="perseus-renderer perseus-renderer-responsive"
                                     >
                                       <div
-                                        class="perseus-renderer perseus-renderer-responsive"
+                                        class="paragraph"
+                                        data-perseus-paragraph-index="0"
                                       >
-                                        <div
-                                          class="paragraph"
-                                          data-perseus-paragraph-index="0"
-                                        >
-                                          <ul>
-                                            <li>
-                                              <strong>
-                                                Your answer should be
-                                              </strong>
-                                            </li>
-                                            <li>
-                                              an integer, like 
+                                        <ul>
+                                          <li>
+                                            <strong>
+                                              Your answer should be
+                                            </strong>
+                                          </li>
+                                          <li>
+                                            an integer, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  6
-                                                </span>
-                                                <span />
+                                                6
                                               </span>
-                                            </li>
-                                            <li>
-                                              a 
-                                              <em>
-                                                simplified proper
-                                              </em>
-                                               fraction, like 
+                                              <span />
+                                            </span>
+                                          </li>
+                                          <li>
+                                            a 
+                                            <em>
+                                              simplified proper
+                                            </em>
+                                             fraction, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  3/5
-                                                </span>
-                                                <span />
+                                                3/5
                                               </span>
-                                            </li>
-                                            <li>
-                                              a 
-                                              <em>
-                                                simplified improper
-                                              </em>
-                                               fraction, like 
+                                              <span />
+                                            </span>
+                                          </li>
+                                          <li>
+                                            a 
+                                            <em>
+                                              simplified improper
+                                            </em>
+                                             fraction, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  7/4
-                                                </span>
-                                                <span />
+                                                7/4
                                               </span>
-                                            </li>
-                                            <li>
-                                              a mixed number, like 
+                                              <span />
+                                            </span>
+                                          </li>
+                                          <li>
+                                            a mixed number, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  1\\ 3/4
-                                                </span>
-                                                <span />
+                                                1\\ 3/4
                                               </span>
-                                            </li>
-                                            <li>
-                                              an 
-                                              <em>
-                                                exact
-                                              </em>
-                                               decimal, like 
+                                              <span />
+                                            </span>
+                                          </li>
+                                          <li>
+                                            an 
+                                            <em>
+                                              exact
+                                            </em>
+                                             decimal, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  0.75
-                                                </span>
-                                                <span />
+                                                0.75
                                               </span>
-                                            </li>
-                                            <li>
-                                              a multiple of pi, like 
+                                              <span />
+                                            </span>
+                                          </li>
+                                          <li>
+                                            a multiple of pi, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  12\\ \\text{pi}
-                                                </span>
-                                                <span />
+                                                12\\ \\text{pi}
                                               </span>
-                                               or 
+                                              <span />
+                                            </span>
+                                             or 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  2/3\\ \\text{pi}
-                                                </span>
-                                                <span />
+                                                2/3\\ \\text{pi}
                                               </span>
-                                            </li>
-                                          </ul>
-                                        </div>
+                                              <span />
+                                            </span>
+                                          </li>
+                                        </ul>
                                       </div>
                                     </div>
                                   </div>
                                 </div>
                               </div>
-                            </span>
-                          </div>
+                            </div>
+                          </span>
                         </div>
                       </div>
                     </div>
@@ -959,175 +957,173 @@ exports[`group widget should snapshot: initial render 1`] = `
                         <div
                           class="perseus-widget-container widget-nohighlight widget-inline-block"
                         >
-                          <div>
-                            <span>
-                              <div>
-                                <input
-                                  aria-invalid="false"
-                                  aria-label="value rounded to the nearest hundred"
-                                  autocapitalize="off"
-                                  autocomplete="off"
-                                  autocorrect="off"
-                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn"
-                                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAy"
-                                  type="text"
-                                  value=""
-                                />
-                              </div>
+                          <span>
+                            <div>
+                              <input
+                                aria-invalid="false"
+                                aria-label="value rounded to the nearest hundred"
+                                autocapitalize="off"
+                                autocomplete="off"
+                                autocorrect="off"
+                                class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_1y6ajxo"
+                                id="input-with-examples-bnVtZXJpYy1pbnB1dCAy"
+                                type="text"
+                                value=""
+                              />
+                            </div>
+                            <div
+                              style="position: relative; height: 0px; display: none;"
+                            >
                               <div
-                                style="position: relative; height: 0px; display: none;"
+                                class="tooltipContainer"
+                                style="position: absolute; left: 0px;"
                               >
                                 <div
-                                  class="tooltipContainer"
-                                  style="position: absolute; left: 0px;"
+                                  style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
                                 >
                                   <div
-                                    style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                                  >
-                                    <div
-                                      style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                                    />
-                                    <div
-                                      style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                                    />
-                                  </div>
+                                    style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                                  />
                                   <div
-                                    class="perseus-formats-tooltip preview-measure"
-                                    style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                                    style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                                  />
+                                </div>
+                                <div
+                                  class="perseus-formats-tooltip preview-measure"
+                                  style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                                >
+                                  <div
+                                    id="input-with-examples-bnVtZXJpYy1pbnB1dCAy"
                                   >
                                     <div
-                                      id="input-with-examples-bnVtZXJpYy1pbnB1dCAy"
+                                      class="perseus-renderer perseus-renderer-responsive"
                                     >
                                       <div
-                                        class="perseus-renderer perseus-renderer-responsive"
+                                        class="paragraph"
+                                        data-perseus-paragraph-index="0"
                                       >
-                                        <div
-                                          class="paragraph"
-                                          data-perseus-paragraph-index="0"
-                                        >
-                                          <ul>
-                                            <li>
-                                              <strong>
-                                                Your answer should be
-                                              </strong>
-                                            </li>
-                                            <li>
-                                              an integer, like 
+                                        <ul>
+                                          <li>
+                                            <strong>
+                                              Your answer should be
+                                            </strong>
+                                          </li>
+                                          <li>
+                                            an integer, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  6
-                                                </span>
-                                                <span />
+                                                6
                                               </span>
-                                            </li>
-                                            <li>
-                                              a 
-                                              <em>
-                                                simplified proper
-                                              </em>
-                                               fraction, like 
+                                              <span />
+                                            </span>
+                                          </li>
+                                          <li>
+                                            a 
+                                            <em>
+                                              simplified proper
+                                            </em>
+                                             fraction, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  3/5
-                                                </span>
-                                                <span />
+                                                3/5
                                               </span>
-                                            </li>
-                                            <li>
-                                              a 
-                                              <em>
-                                                simplified improper
-                                              </em>
-                                               fraction, like 
+                                              <span />
+                                            </span>
+                                          </li>
+                                          <li>
+                                            a 
+                                            <em>
+                                              simplified improper
+                                            </em>
+                                             fraction, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  7/4
-                                                </span>
-                                                <span />
+                                                7/4
                                               </span>
-                                            </li>
-                                            <li>
-                                              a mixed number, like 
+                                              <span />
+                                            </span>
+                                          </li>
+                                          <li>
+                                            a mixed number, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  1\\ 3/4
-                                                </span>
-                                                <span />
+                                                1\\ 3/4
                                               </span>
-                                            </li>
-                                            <li>
-                                              an 
-                                              <em>
-                                                exact
-                                              </em>
-                                               decimal, like 
+                                              <span />
+                                            </span>
+                                          </li>
+                                          <li>
+                                            an 
+                                            <em>
+                                              exact
+                                            </em>
+                                             decimal, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  0.75
-                                                </span>
-                                                <span />
+                                                0.75
                                               </span>
-                                            </li>
-                                            <li>
-                                              a multiple of pi, like 
+                                              <span />
+                                            </span>
+                                          </li>
+                                          <li>
+                                            a multiple of pi, like 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  12\\ \\text{pi}
-                                                </span>
-                                                <span />
+                                                12\\ \\text{pi}
                                               </span>
-                                               or 
+                                              <span />
+                                            </span>
+                                             or 
+                                            <span
+                                              style="white-space: nowrap;"
+                                            >
+                                              <span />
                                               <span
-                                                style="white-space: nowrap;"
+                                                class="mock-TeX"
                                               >
-                                                <span />
-                                                <span
-                                                  class="mock-TeX"
-                                                >
-                                                  2/3\\ \\text{pi}
-                                                </span>
-                                                <span />
+                                                2/3\\ \\text{pi}
                                               </span>
-                                            </li>
-                                          </ul>
-                                        </div>
+                                              <span />
+                                            </span>
+                                          </li>
+                                        </ul>
                                       </div>
                                     </div>
                                   </div>
                                 </div>
                               </div>
-                            </span>
-                          </div>
+                            </div>
+                          </span>
                         </div>
                       </div>
                     </div>
diff --git a/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap b/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap
index 53e9f2f3e5..a6cd5c0053 100644
--- a/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap
+++ b/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap
@@ -90,175 +90,173 @@ exports[`numeric-input widget Should render predictably: after interaction 1`] =
         <div
           class="perseus-widget-container widget-nohighlight widget-inline-block"
         >
-          <div>
-            <span>
-              <div>
-                <input
-                  aria-invalid="false"
-                  aria-label="Your answer:"
-                  autocapitalize="off"
-                  autocomplete="off"
-                  autocorrect="off"
-                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-focused_1z0d9ul-o_O-input_19vw1dn"
-                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
-                  type="text"
-                  value="1252"
-                />
-              </div>
+          <span>
+            <div>
+              <input
+                aria-invalid="false"
+                aria-label="Your answer:"
+                autocapitalize="off"
+                autocomplete="off"
+                autocorrect="off"
+                class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-focused_1z0d9ul-o_O-input_ylhnsi"
+                id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                type="text"
+                value="1252"
+              />
+            </div>
+            <div
+              style="position: relative; height: 0px; display: none;"
+            >
               <div
-                style="position: relative; height: 0px; display: none;"
+                class="tooltipContainer"
+                style="position: absolute; left: 0px;"
               >
                 <div
-                  class="tooltipContainer"
-                  style="position: absolute; left: 0px;"
+                  style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
                 >
                   <div
-                    style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                  >
-                    <div
-                      style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                    />
-                    <div
-                      style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                    />
-                  </div>
+                    style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                  />
                   <div
-                    class="perseus-formats-tooltip preview-measure"
-                    style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                    style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                  />
+                </div>
+                <div
+                  class="perseus-formats-tooltip preview-measure"
+                  style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                >
+                  <div
+                    id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                   >
                     <div
-                      id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                      class="perseus-renderer perseus-renderer-responsive"
                     >
                       <div
-                        class="perseus-renderer perseus-renderer-responsive"
+                        class="paragraph"
+                        data-perseus-paragraph-index="0"
                       >
-                        <div
-                          class="paragraph"
-                          data-perseus-paragraph-index="0"
-                        >
-                          <ul>
-                            <li>
-                              <strong>
-                                Your answer should be
-                              </strong>
-                            </li>
-                            <li>
-                              an integer, like 
+                        <ul>
+                          <li>
+                            <strong>
+                              Your answer should be
+                            </strong>
+                          </li>
+                          <li>
+                            an integer, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  6
-                                </span>
-                                <span />
+                                6
                               </span>
-                            </li>
-                            <li>
-                              a 
-                              <em>
-                                simplified proper
-                              </em>
-                               fraction, like 
+                              <span />
+                            </span>
+                          </li>
+                          <li>
+                            a 
+                            <em>
+                              simplified proper
+                            </em>
+                             fraction, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  3/5
-                                </span>
-                                <span />
+                                3/5
                               </span>
-                            </li>
-                            <li>
-                              a 
-                              <em>
-                                simplified improper
-                              </em>
-                               fraction, like 
+                              <span />
+                            </span>
+                          </li>
+                          <li>
+                            a 
+                            <em>
+                              simplified improper
+                            </em>
+                             fraction, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  7/4
-                                </span>
-                                <span />
+                                7/4
                               </span>
-                            </li>
-                            <li>
-                              a mixed number, like 
+                              <span />
+                            </span>
+                          </li>
+                          <li>
+                            a mixed number, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  1\\ 3/4
-                                </span>
-                                <span />
+                                1\\ 3/4
                               </span>
-                            </li>
-                            <li>
-                              an 
-                              <em>
-                                exact
-                              </em>
-                               decimal, like 
+                              <span />
+                            </span>
+                          </li>
+                          <li>
+                            an 
+                            <em>
+                              exact
+                            </em>
+                             decimal, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  0.75
-                                </span>
-                                <span />
+                                0.75
                               </span>
-                            </li>
-                            <li>
-                              a multiple of pi, like 
+                              <span />
+                            </span>
+                          </li>
+                          <li>
+                            a multiple of pi, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  12\\ \\text{pi}
-                                </span>
-                                <span />
+                                12\\ \\text{pi}
                               </span>
-                               or 
+                              <span />
+                            </span>
+                             or 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  2/3\\ \\text{pi}
-                                </span>
-                                <span />
+                                2/3\\ \\text{pi}
                               </span>
-                            </li>
-                          </ul>
-                        </div>
+                              <span />
+                            </span>
+                          </li>
+                        </ul>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </span>
-          </div>
+            </div>
+          </span>
         </div>
          
       </div>
@@ -294,175 +292,173 @@ exports[`numeric-input widget Should render predictably: first render 1`] = `
         <div
           class="perseus-widget-container widget-nohighlight widget-inline-block"
         >
-          <div>
-            <span>
-              <div>
-                <input
-                  aria-invalid="false"
-                  aria-label="Your answer:"
-                  autocapitalize="off"
-                  autocomplete="off"
-                  autocorrect="off"
-                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn"
-                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
-                  type="text"
-                  value=""
-                />
-              </div>
+          <span>
+            <div>
+              <input
+                aria-invalid="false"
+                aria-label="Your answer:"
+                autocapitalize="off"
+                autocomplete="off"
+                autocorrect="off"
+                class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_1y6ajxo"
+                id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                type="text"
+                value=""
+              />
+            </div>
+            <div
+              style="position: relative; height: 0px; display: none;"
+            >
               <div
-                style="position: relative; height: 0px; display: none;"
+                class="tooltipContainer"
+                style="position: absolute; left: 0px;"
               >
                 <div
-                  class="tooltipContainer"
-                  style="position: absolute; left: 0px;"
+                  style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
                 >
                   <div
-                    style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                  >
-                    <div
-                      style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                    />
-                    <div
-                      style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                    />
-                  </div>
+                    style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                  />
                   <div
-                    class="perseus-formats-tooltip preview-measure"
-                    style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                    style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                  />
+                </div>
+                <div
+                  class="perseus-formats-tooltip preview-measure"
+                  style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                >
+                  <div
+                    id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                   >
                     <div
-                      id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                      class="perseus-renderer perseus-renderer-responsive"
                     >
                       <div
-                        class="perseus-renderer perseus-renderer-responsive"
+                        class="paragraph"
+                        data-perseus-paragraph-index="0"
                       >
-                        <div
-                          class="paragraph"
-                          data-perseus-paragraph-index="0"
-                        >
-                          <ul>
-                            <li>
-                              <strong>
-                                Your answer should be
-                              </strong>
-                            </li>
-                            <li>
-                              an integer, like 
+                        <ul>
+                          <li>
+                            <strong>
+                              Your answer should be
+                            </strong>
+                          </li>
+                          <li>
+                            an integer, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  6
-                                </span>
-                                <span />
+                                6
                               </span>
-                            </li>
-                            <li>
-                              a 
-                              <em>
-                                simplified proper
-                              </em>
-                               fraction, like 
+                              <span />
+                            </span>
+                          </li>
+                          <li>
+                            a 
+                            <em>
+                              simplified proper
+                            </em>
+                             fraction, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  3/5
-                                </span>
-                                <span />
+                                3/5
                               </span>
-                            </li>
-                            <li>
-                              a 
-                              <em>
-                                simplified improper
-                              </em>
-                               fraction, like 
+                              <span />
+                            </span>
+                          </li>
+                          <li>
+                            a 
+                            <em>
+                              simplified improper
+                            </em>
+                             fraction, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  7/4
-                                </span>
-                                <span />
+                                7/4
                               </span>
-                            </li>
-                            <li>
-                              a mixed number, like 
+                              <span />
+                            </span>
+                          </li>
+                          <li>
+                            a mixed number, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  1\\ 3/4
-                                </span>
-                                <span />
+                                1\\ 3/4
                               </span>
-                            </li>
-                            <li>
-                              an 
-                              <em>
-                                exact
-                              </em>
-                               decimal, like 
+                              <span />
+                            </span>
+                          </li>
+                          <li>
+                            an 
+                            <em>
+                              exact
+                            </em>
+                             decimal, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  0.75
-                                </span>
-                                <span />
+                                0.75
                               </span>
-                            </li>
-                            <li>
-                              a multiple of pi, like 
+                              <span />
+                            </span>
+                          </li>
+                          <li>
+                            a multiple of pi, like 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  12\\ \\text{pi}
-                                </span>
-                                <span />
+                                12\\ \\text{pi}
                               </span>
-                               or 
+                              <span />
+                            </span>
+                             or 
+                            <span
+                              style="white-space: nowrap;"
+                            >
+                              <span />
                               <span
-                                style="white-space: nowrap;"
+                                class="mock-TeX"
                               >
-                                <span />
-                                <span
-                                  class="mock-TeX"
-                                >
-                                  2/3\\ \\text{pi}
-                                </span>
-                                <span />
+                                2/3\\ \\text{pi}
                               </span>
-                            </li>
-                          </ul>
-                        </div>
+                              <span />
+                            </span>
+                          </li>
+                        </ul>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </span>
-          </div>
+            </div>
+          </span>
         </div>
          
       </div>
diff --git a/packages/perseus/src/widgets/numeric-input/numeric-input.tsx b/packages/perseus/src/widgets/numeric-input/numeric-input.tsx
index 5a115b6692..0e57bad2f8 100644
--- a/packages/perseus/src/widgets/numeric-input/numeric-input.tsx
+++ b/packages/perseus/src/widgets/numeric-input/numeric-input.tsx
@@ -75,6 +75,7 @@ type State = {
     // keeps track of the other set of values when switching
     // between 0 and finite solutions
     previousValues: ReadonlyArray<string>;
+    isFocused: boolean;
 };
 
 export class NumericInput
@@ -107,6 +108,7 @@ export class NumericInput
         // keeps track of the other set of values when switching
         // between 0 and finite solutions
         previousValues: [""],
+        isFocused: false,
     };
 
     // TODO(Nicole, Jeremy): This is maybe never used and should be removed
@@ -197,10 +199,16 @@ export class NumericInput
 
     _handleFocus: () => void = () => {
         this.props.onFocus([]);
+        this.setState((currentState) => {
+            return {...currentState, isFocused: true};
+        });
     };
 
     _handleBlur: () => void = () => {
         this.props.onBlur([]);
+        this.setState((currentState) => {
+            return {...currentState, isFocused: false};
+        });
     };
 
     render(): React.ReactNode {
@@ -241,29 +249,33 @@ export class NumericInput
         // component.
         const styles = StyleSheet.create({
             input: {
+                borderRadius: "3px",
+                borderWidth: this.state.isFocused ? "2px" : "1px",
+                display: "inline-block",
+                fontFamily: `Symbola, "Times New Roman", serif`,
+                fontSize: "18px",
+                height: "32px",
+                lineHeight: "18px",
+                padding: this.state.isFocused ? "4px" : "4px 5px", // account for added focus border thickness
                 textAlign: this.props.rightAlign ? "right" : "left",
                 width: this.props.size === "small" ? 40 : 80,
-                padding: 0,
-                height: "auto",
             },
         });
 
         return (
-            <div>
-                <InputWithExamples
-                    ref={(ref) => (this.inputRef = ref)}
-                    value={this.props.currentValue}
-                    onChange={this.handleChange}
-                    labelText={labelText}
-                    examples={this.examples()}
-                    shouldShowExamples={this.shouldShowExamples()}
-                    onFocus={this._handleFocus}
-                    onBlur={this._handleBlur}
-                    id={this.props.widgetId}
-                    disabled={this.props.apiOptions.readOnly}
-                    style={styles.input}
-                />
-            </div>
+            <InputWithExamples
+                ref={(ref) => (this.inputRef = ref)}
+                value={this.props.currentValue}
+                onChange={this.handleChange}
+                labelText={labelText}
+                examples={this.examples()}
+                shouldShowExamples={this.shouldShowExamples()}
+                onFocus={this._handleFocus}
+                onBlur={this._handleBlur}
+                id={this.props.widgetId}
+                disabled={this.props.apiOptions.readOnly}
+                style={styles.input}
+            />
         );
     }
 }