diff --git a/.changeset/sour-horses-scream.md b/.changeset/sour-horses-scream.md
new file mode 100644
index 0000000000..401aee22a7
--- /dev/null
+++ b/.changeset/sour-horses-scream.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+BUGFIX - [Number Line] - Some exercises with fractions wouldn't render
diff --git a/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap b/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap
index bf6a8bbc7c..aedd38d4e0 100644
--- a/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap
+++ b/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap
@@ -564,6 +564,362 @@ exports[`number-line widget snapshots all tick labels show when "Style" is "deci
`;
+exports[`number-line widget snapshots can handle fractions: show fractions 1`] = `
+
{
expect(container).toMatchSnapshot("left endpoint highlighted");
});
+ it(`can handle fractions`, () => {
+ // Some fractions create non-integer values (i.e. 7.00001).
+ // This test works specifically with 1/6 to generate the value that might cause an error.
+
+ // Arrange
+ const question = createNumberLineQuestionWithOptions({
+ range: [0, 1.1666666666666667],
+ divisionRange: [1, 12],
+ labelRange: [null, 0.16666666666666666],
+ labelStyle: "improper",
+ tickStep: 0.16666666666666666,
+ });
+
+ // Act
+ const {container} = renderQuestion(question, apiOptions);
+
+ // Assert
+ expect(container).toMatchSnapshot("show fractions");
+ });
+
it(`all tick labels show when "Style" is "decimal ticks" (deprecated option)`, () => {
// Arrange
const question = createNumberLineQuestionWithOptions({
diff --git a/packages/perseus/src/widgets/number-line/number-line.tsx b/packages/perseus/src/widgets/number-line/number-line.tsx
index e0cd0a51fc..0d27e6450a 100644
--- a/packages/perseus/src/widgets/number-line/number-line.tsx
+++ b/packages/perseus/src/widgets/number-line/number-line.tsx
@@ -151,12 +151,14 @@ const TickMarks: any = Graphie.createSimpleClass((graphie, props) => {
const highlightedTextStyle = {color: KhanColors.BLUE};
// Generate an array of tick numbers:
- // `Array(props.numDivisions)` makes an array of null values - one for every division marker
+ // `Array(Math.round(numDivisions))` makes an array of null values - one for every division marker
// `.keys()` gets the index values for each marker placeholder
// `.map()` converts the index values into actual tick numbers
- const initialTicks: number[] = [...Array(numDivisions).keys()].map(
- (index) => range[0] + index * tickStep,
- );
+ // NOTE: 'numDivisions' can sometimes be a non-integer (i.e. 7.000001).
+ // Using Math.round() to ensure that an integer is used in the Array setup.
+ const initialTicks: number[] = [
+ ...Array(Math.round(numDivisions)).keys(),
+ ].map((index) => range[0] + index * tickStep);
// .sort() comparator
const byNumericAscending = (a: number, b: number) => a - b;