Expose a way to get user input from ServerItemRenderer

.changeset/honest-tables-impress.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": major
+"@khanacademy/perseus-dev-ui": patch
+---
+
+Change ServerItemRenderer scoring APIs to externalize scoring

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();
                         }}
                     >

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,17 +93,15 @@ 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) => {
                 act(() => sorter.moveOptionToIndex(option, 0));
             },
         );
 
-        // Act
-        renderer.guessAndScore();
-
-        // assert
+        // Assert
         expect(renderer).toHaveBeenAnsweredIncorrectly();
     });
 });

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
@@ -226,6 +227,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";
 

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;