)
@@ -21,6 +22,7 @@ exports[`SvgImage should load and render a normal graphie svg 1`] = `
@@ -31,6 +33,7 @@ exports[`SvgImage should load and render a png 1`] = `
)
`;
diff --git a/packages/perseus/src/components/__tests__/math-input.test.tsx b/packages/perseus/src/components/__tests__/math-input.test.tsx
index 56dbe88d13..784a9a8b33 100644
--- a/packages/perseus/src/components/__tests__/math-input.test.tsx
+++ b/packages/perseus/src/components/__tests__/math-input.test.tsx
@@ -6,15 +6,17 @@ import {testDependencies} from "../../../../../testing/test-dependencies";
import * as Dependencies from "../../dependencies";
import MathInput from "../math-input";
+import type {KeypadButtonSets} from "../math-input";
import type {UserEvent} from "@testing-library/user-event";
-const allButtonSets = {
+const allButtonSets: KeypadButtonSets = {
advancedRelations: true,
basicRelations: true,
divisionKey: true,
logarithms: true,
preAlgebra: true,
trigonometry: true,
+ scientific: true,
};
describe("Perseus' MathInput", () => {
@@ -142,6 +144,35 @@ describe("Perseus' MathInput", () => {
expect(mockOnChange).toHaveBeenLastCalledWith("1+2-3");
});
+ it("is possible to use the scientific keypad", async () => {
+ // Arrange
+ const mockOnChange = jest.fn();
+ render(
+ 12\\ \\text{pi} or " +
- "2/3\\ \\text{pi}",
+ "12\\\\ \\\\text{pi} or " +
+ "2/3\\\\ \\\\text{pi}",
EXTRA_SYMBOLS_ERROR:
"We could not understand your " +
"answer. Please check your answer for extra " +
@@ -293,7 +294,7 @@ export const strings: {
MISSING_PERCENT_ERROR:
"Your answer is almost correct, " +
"but it is missing a " +
- "\\% at the end.",
+ "\\\\% at the end.",
MULTIPLICATION_SIGN_ERROR:
"I'm a computer. I only understand " +
"multiplication if you use an asterisk " +
@@ -330,10 +331,11 @@ export const strings: {
simplifiedProperExample: "a *simplified proper* fraction, like $3/5$",
improperExample: "an *improper* fraction, like $10/7$ or $14/8$",
simplifiedImproperExample: "a *simplified improper* fraction, like $7/4$",
- mixedExample: "a mixed number, like $1\\ 3/4$",
+ mixedExample: "a mixed number, like $1\\\\ 3/4$",
decimalExample: "an *exact* decimal, like $0.75$",
- percentExample: "a percent, like $12.34\\%$",
- piExample: "a multiple of pi, like $12\\ \\text{pi}$ or $2/3\\ \\text{pi}$",
+ percentExample: "a percent, like $12.34\\\\%$",
+ piExample:
+ "a multiple of pi, like $12\\\\ \\\\text{pi}$ or $2/3\\\\ \\\\text{pi}$",
yourAnswer: "**Your answer should be** ",
yourAnswerLabel: "Your answer:",
addPoints: "Click to add points",
@@ -543,12 +545,16 @@ export const strings: {
message:
"Point 2, vertex at %(x)s comma %(y)s. Angle %(angleMeasure)s degrees",
},
- srAngleGraphAriaLabel: "An angle on a coordinate plane.",
+ srAngleGraphAriaLabel: {
+ context:
+ "Screenreader-accessible label of an angle graph on a coordinate plane",
+ message: "An angle on a coordinate plane.",
+ },
srAngleGraphAriaDescription: {
context:
"Screenreader-only description of an angle on a coordinate plane.",
message:
- "The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the initial side at %(isX)s comma %(isY)s and a point on the terminal side at %(tsX)s comma %(tsY)s",
+ "The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the starting side at %(startingSideX)s comma %(startingSideY)s and a point on the ending side at %(endingSideX)s comma %(endingSideY)s",
},
// The above strings are used for interactive graph SR descriptions.
};
@@ -761,11 +767,11 @@ export const mockStrings: PerseusStrings = {
angleMeasure,
vertexX,
vertexY,
- isX,
- isY,
- tsX,
- tsY,
+ startingSideX,
+ startingSideY,
+ endingSideX,
+ endingSideY,
}) =>
- `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the initial side at ${isX} comma ${isY} and a point on the terminal side at ${tsX} comma ${tsY}.`,
+ `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the starting side at ${startingSideX} comma ${startingSideY} and a point on the ending side at ${endingSideX} comma ${endingSideY}.`,
// The above strings are used for interactive graph SR descriptions.
};
diff --git a/packages/perseus/src/styles/perseus-renderer.less b/packages/perseus/src/styles/perseus-renderer.less
index e19530ae4e..3d4cb36791 100644
--- a/packages/perseus/src/styles/perseus-renderer.less
+++ b/packages/perseus/src/styles/perseus-renderer.less
@@ -414,6 +414,12 @@
padding: 25px 25px 0 0;
}
+.perseus-dropdown .perseus-renderer .paragraph {
+ /* overriding overly broad selectors in .framework-perseus rules */
+ margin-bottom: 0 !important;
+ font-size: 18px !important;
+}
+
@import "./widgets/categorizer.less";
@import "./widgets/dropdown.less";
@import "./widgets/expression.less";
diff --git a/packages/perseus/src/util/parse-perseus-json/general-purpose-parsers/convert.ts b/packages/perseus/src/util/parse-perseus-json/general-purpose-parsers/convert.ts
new file mode 100644
index 0000000000..849e112854
--- /dev/null
+++ b/packages/perseus/src/util/parse-perseus-json/general-purpose-parsers/convert.ts
@@ -0,0 +1,7 @@
+import type {PartialParser} from "../parser-types";
+
+// Given a function, creates a PartialParser that converts one type to another
+// using that function. The returned parser never fails.
+export function convert
+
+`;
+
exports[`interaction widget should render 1`] = `
+
+
+
+
+
+
+ {
beforeEach(() => {
@@ -38,4 +41,13 @@ describe("interaction widget", () => {
// what state its in.
expect(score).toHaveBeenAnsweredIncorrectly();
});
+
+ it("renders movable point elements with blank constraintXMin, constraintXMax, etc.", async () => {
+ const {container} = renderQuestion(
+ questionWithMovablePointMissingConstraints,
+ );
+ await waitForInitialGraphieRender();
+
+ expect(container).toMatchSnapshot();
+ });
});
diff --git a/packages/perseus/src/widgets/interaction/interaction.testdata.ts b/packages/perseus/src/widgets/interaction/interaction.testdata.ts
index 03e8edbacc..9ff4f9c8b4 100644
--- a/packages/perseus/src/widgets/interaction/interaction.testdata.ts
+++ b/packages/perseus/src/widgets/interaction/interaction.testdata.ts
@@ -259,3 +259,60 @@ export const question1: PerseusRenderer = {
},
},
};
+
+export const questionWithMovablePointMissingConstraints: PerseusRenderer = {
+ content: "[[☃ interaction 1]]",
+ images: {},
+ widgets: {
+ "interaction 1": {
+ graded: true,
+ options: {
+ static: false,
+ elements: [
+ {
+ key: "movable-point-64f8ec",
+ options: {
+ constraint: "none",
+ constraintFn: "0",
+ constraintXMin: "",
+ constraintXMax: "",
+ constraintYMin: "",
+ constraintYMax: "",
+ snap: 0.5,
+ startX: "0",
+ startY: "10",
+ varSubscript: 0,
+ },
+ type: "movable-point",
+ },
+ ],
+ graph: {
+ backgroundImage: {
+ bottom: 0,
+ left: 0,
+ scale: 1,
+ url: null,
+ },
+ box: [400, 400],
+ editableSettings: ["canvas", "graph"],
+ gridStep: [2, 2],
+ labels: ["x", "y"],
+ markings: "graph",
+ range: [
+ [-5, 50],
+ [-5, 50],
+ ],
+ rulerLabel: "",
+ rulerTicks: 10,
+ showProtractor: false,
+ showRuler: false,
+ snapStep: [1, 1],
+ tickStep: [5, 5],
+ valid: true,
+ },
+ },
+ type: "interaction",
+ version: {major: 0, minor: 0},
+ },
+ },
+};
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx
index ecc93225dd..0ecb3f8e88 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx
@@ -112,10 +112,10 @@ function AngleGraph(props: AngleGraphProps) {
angleMeasure,
vertexX: srFormatNumber(coords[1][X], locale),
vertexY: srFormatNumber(coords[1][Y], locale),
- isX: srFormatNumber(coords[2][X], locale),
- isY: srFormatNumber(coords[2][Y], locale),
- tsX: srFormatNumber(coords[0][X], locale),
- tsY: srFormatNumber(coords[0][Y], locale),
+ startingSideX: srFormatNumber(coords[2][X], locale),
+ startingSideY: srFormatNumber(coords[2][Y], locale),
+ endingSideX: srFormatNumber(coords[0][X], locale),
+ endingSideY: srFormatNumber(coords[0][Y], locale),
});
const formatCoordinates = (x: number, y: number) => ({
diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx
index d9b4f0d03f..6acf462f4b 100644
--- a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx
@@ -569,7 +569,7 @@ describe("MafsGraph", () => {
"angle-description",
);
expect(angleGraph).toHaveTextContent(
- "The angle measure is 270 degrees with a vertex at 0 comma 0, a point on the initial side at 1 comma 1 and a point on the terminal side at -1 comma 1.",
+ "The angle measure is 270 degrees with a vertex at 0 comma 0, a point on the starting side at 1 comma 1 and a point on the ending side at -1 comma 1.",
);
});
diff --git a/packages/perseus/src/widgets/numeric-input/score-numeric-input.test.ts b/packages/perseus/src/widgets/numeric-input/score-numeric-input.test.ts
index ddf569c325..b6a989eacf 100644
--- a/packages/perseus/src/widgets/numeric-input/score-numeric-input.test.ts
+++ b/packages/perseus/src/widgets/numeric-input/score-numeric-input.test.ts
@@ -315,6 +315,10 @@ describe("scoreNumericInput", () => {
});
it("rejects responses formatted as a percentage when any answer has no value field", () => {
+ // NOTE(benchristel): this is a characterization test for existing
+ // behavior. Ideally, answers should always have a value field, but
+ // some don't, so this test documents how we handle that.
+ // TODO(benchristel): Fix the data so we can remove this test.
const scoringData: PerseusNumericInputScoringData = {
answers: [
{
@@ -347,6 +351,43 @@ describe("scoreNumericInput", () => {
expect(score).toHaveBeenAnsweredIncorrectly();
});
+ it("rejects responses formatted as a percentage when any answer has a null value", () => {
+ // NOTE(benchristel): this is a characterization test for existing
+ // behavior. Ideally, answers should always have a value field, but
+ // some don't, so this test documents how we handle that.
+ // TODO(benchristel): Fix the data so we can remove this test.
+ const rubric: PerseusNumericInputScoringData = {
+ answers: [
+ {
+ value: null,
+ status: "correct",
+ maxError: 0,
+ simplify: "",
+ strict: false,
+ message: "",
+ },
+ {
+ // This is the actual correct answer
+ value: 0.5,
+ status: "correct",
+ maxError: 0,
+ simplify: "",
+ strict: false,
+ message: "",
+ },
+ ],
+ coefficient: true,
+ };
+
+ const score = scoreNumericInput(
+ {currentValue: "50%"},
+ rubric,
+ mockStrings,
+ );
+
+ expect(score).toHaveBeenAnsweredIncorrectly();
+ });
+
it("converts a percentage input value to a decimal", () => {
const scoringData: PerseusNumericInputScoringData = {
answers: [
diff --git a/packages/perseus/src/widgets/numeric-input/score-numeric-input.ts b/packages/perseus/src/widgets/numeric-input/score-numeric-input.ts
index df12f20ef3..f8d26f72b8 100644
--- a/packages/perseus/src/widgets/numeric-input/score-numeric-input.ts
+++ b/packages/perseus/src/widgets/numeric-input/score-numeric-input.ts
@@ -111,10 +111,7 @@ function scoreNumericInput(
const normalizedAnswerExpected = scoringData.answers
.filter((answer) => answer.status === "correct")
- .every(
- (answer) =>
- answer.value !== undefined && Math.abs(answer.value) <= 1,
- );
+ .every((answer) => answer.value != null && Math.abs(answer.value) <= 1);
// The coefficient is an attribute of the widget
let localValue: string | number = currentValue;
diff --git a/packages/perseus/src/widgets/passage-ref/passage-ref.tsx b/packages/perseus/src/widgets/passage-ref/passage-ref.tsx
index f6f1007621..ed91993a02 100644
--- a/packages/perseus/src/widgets/passage-ref/passage-ref.tsx
+++ b/packages/perseus/src/widgets/passage-ref/passage-ref.tsx
@@ -11,13 +11,14 @@ import {isPassageWidget} from "../passage/utils";
import type {PerseusPassageRefWidgetOptions} from "../../perseus-types";
import type {ChangeFn, Widget, WidgetExports, WidgetProps} from "../../types";
import type {PassageRefPromptJSON} from "../../widget-ai-utils/passage-ref/passage-ref-ai-utils";
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
const EN_DASH = "\u2013";
type RenderProps = {
passageNumber: PerseusPassageRefWidgetOptions["passageNumber"];
referenceNumber: PerseusPassageRefWidgetOptions["referenceNumber"];
- summaryText: PerseusPassageRefWidgetOptions["summaryText"];
+ summaryText: string;
};
type Props = WidgetProps;
@@ -25,7 +26,7 @@ type Props = WidgetProps;
type DefaultProps = {
passageNumber: Props["passageNumber"];
referenceNumber: Props["referenceNumber"];
- summaryText: Props["summaryText"];
+ summaryText: string;
};
type State = {
@@ -33,6 +34,10 @@ type State = {
content: string | null | undefined;
};
+0 as any as WidgetProps satisfies PropsFor<
+ typeof PassageRef
+>;
+
class PassageRef extends React.Component implements Widget {
static contextType = PerseusI18nContext;
declare context: React.ContextType;
@@ -175,9 +180,7 @@ export default {
hidden: true,
defaultAlignment: "inline",
widget: PassageRef,
- transform: (
- widgetOptions: PerseusPassageRefWidgetOptions,
- ): RenderProps => ({
+ transform: (widgetOptions: PerseusPassageRefWidgetOptions) => ({
passageNumber: widgetOptions.passageNumber,
referenceNumber: widgetOptions.referenceNumber,
summaryText: widgetOptions.summaryText,
diff --git a/packages/perseus/src/zoom.ts b/packages/perseus/src/zoom.ts
index daca6f9c56..747c4d4c54 100644
--- a/packages/perseus/src/zoom.ts
+++ b/packages/perseus/src/zoom.ts
@@ -265,7 +265,9 @@ ZoomServiceClass.prototype._scrollHandler = function (e: any) {
};
ZoomServiceClass.prototype._keyHandler = function (e: any) {
- if (e.keyCode === 27) {
+ // 27: Esc, 13: Enter, 32: Space
+ const keyCodes = [27, 13, 32];
+ if (keyCodes.includes(e.keyCode)) {
this._activeZoomClose();
}
};
@@ -367,12 +369,14 @@ Zoom.prototype.zoomImage = function () {
img.src = this._targetImage.src;
img.alt = this._targetImage.alt;
+ img.tabIndex = 0;
this.$zoomedImage = $zoomedImage;
};
Zoom.prototype._zoomOriginal = function () {
this.$zoomedImage.addClass("zoom-img").attr("data-action", "zoom-out");
+
$(this._targetImage).css("visibility", "hidden");
this._backdrop = document.createElement("div");