From 1e69d6b9e514ffb7b6e49e53d3928edef46c299b Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 15 Jul 2024 15:57:03 -0700
Subject: [PATCH 01/33] Initial widget creation

---
 packages/perseus/src/extra-widgets.ts         |   2 +
 packages/perseus/src/perseus-types.ts         |  18 +++
 .../perseus/src/util/widget-enum-utils.ts     |   3 +
 .../widgets/__stories__/phet-sim.stories.tsx  |  14 ++
 .../widgets/__testdata__/phet-sim.testdata.ts |  28 ++++
 packages/perseus/src/widgets/phet-sim.tsx     | 128 ++++++++++++++++++
 6 files changed, 193 insertions(+)
 create mode 100644 packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx
 create mode 100644 packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
 create mode 100644 packages/perseus/src/widgets/phet-sim.tsx

diff --git a/packages/perseus/src/extra-widgets.ts b/packages/perseus/src/extra-widgets.ts
index f5cecbb36c..bb48926e63 100644
--- a/packages/perseus/src/extra-widgets.ts
+++ b/packages/perseus/src/extra-widgets.ts
@@ -26,6 +26,7 @@ import Orderer from "./widgets/orderer";
 import Passage from "./widgets/passage";
 import PassageRef from "./widgets/passage-ref";
 import PassageRefTarget from "./widgets/passage-ref-target";
+import PhetSim from "./widgets/phet-sim";
 import Plotter from "./widgets/plotter";
 import PythonProgram from "./widgets/python-program";
 import Sorter from "./widgets/sorter";
@@ -58,6 +59,7 @@ export default [
     Passage,
     PassageRef,
     PassageRefTarget,
+    PhetSim,
     Plotter,
     PythonProgram,
     Sorter,
diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts
index e3582b2ca7..bfde7f6ad2 100644
--- a/packages/perseus/src/perseus-types.ts
+++ b/packages/perseus/src/perseus-types.ts
@@ -67,6 +67,8 @@ export type PerseusWidgetsMap = {
     [key in `passage-ref ${number}`]: PassageRefWidget;
 } & {
     [key in `passage-ref-target ${number}`]: PassageRefWidget;
+} & {
+    [key in `phet-sim ${number}`]: PhetSimWidget;
 } & {
     [key in `plotter ${number}`]: PlotterWidget;
 } & {
@@ -232,6 +234,8 @@ export type PassageRefWidget = Widget<'passage-ref', PerseusPassageRefWidgetOpti
 // prettier-ignore
 export type PassageWidget = Widget<'passage', PerseusPassageWidgetOptions>;
 // prettier-ignore
+export type PhetSimWidget = Widget<'phet-sim', PerseusPhetSimWidgetOptions>;
+// prettier-ignore
 export type PlotterWidget = Widget<'plotter', PerseusPlotterWidgetOptions>;
 // prettier-ignore
 export type PythonProgramWidget = Widget<'python-program', PerseusPythonProgramWidgetOptions>;
@@ -1536,6 +1540,19 @@ export type PerseusIFrameWidgetOptions = {
     static: boolean;
 };
 
+export type PerseusPhetSimWidgetOptions = {
+    // A URL to display, must start with https://phet.colorado.edu/
+    url: string;
+    // The width of the widget
+    width?: number | string;
+    // The height of the widget
+    height?: number | string;
+    // Translatable Text; Description of the sim for Khanmigo and alt text
+    description: string;
+    // Always false
+    static: boolean;
+};
+
 export type PerseusVideoWidgetOptions = {
     location: string;
     static?: boolean;
@@ -1604,6 +1621,7 @@ export type PerseusWidgetOptions =
     | PerseusPassageRefTargetWidgetOptions
     | PerseusPassageRefWidgetOptions
     | PerseusPassageWidgetOptions
+    | PerseusPhetSimWidgetOptions
     | PerseusPlotterWidgetOptions
     | PerseusRadioWidgetOptions
     | PerseusSimpleMarkdownTesterWidgetOptions
diff --git a/packages/perseus/src/util/widget-enum-utils.ts b/packages/perseus/src/util/widget-enum-utils.ts
index f549754f21..9db395676d 100644
--- a/packages/perseus/src/util/widget-enum-utils.ts
+++ b/packages/perseus/src/util/widget-enum-utils.ts
@@ -34,6 +34,7 @@ type WidgetName =
     | "passage"
     | "passage-ref"
     | "passage-ref-target"
+    | "phet-sim"
     | "plotter"
     | "python-program"
     | "reaction-diagram"
@@ -73,6 +74,7 @@ type WidgetEnum =
     | "PASSAGE"
     | "PASSAGE_REF"
     | "PASSAGE_REF_TARGET"
+    | "PHET_SIM"
     | "PLOTTER"
     | "PYTHON_PROGRAM"
     | "REACTION_DIAGRAM"
@@ -113,6 +115,7 @@ const widgetNameToEnum: Record<WidgetName, WidgetEnum> = {
     passage: "PASSAGE",
     "passage-ref": "PASSAGE_REF",
     "passage-ref-target": "PASSAGE_REF_TARGET",
+    "phet-sim": "PHET_SIM",
     plotter: "PLOTTER",
     "python-program": "PYTHON_PROGRAM",
     "reaction-diagram": "REACTION_DIAGRAM",
diff --git a/packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx b/packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx
new file mode 100644
index 0000000000..eddf0fcafa
--- /dev/null
+++ b/packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {question1} from "../__testdata__/phet-sim.testdata";
+
+export default {
+    title: "Perseus/Widgets/PhetSim",
+};
+
+type StoryArgs = Record<any, any>;
+
+export const Question1 = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={question1} />;
+};
diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
new file mode 100644
index 0000000000..1937b83955
--- /dev/null
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -0,0 +1,28 @@
+import type {PerseusRenderer} from "../../perseus-types";
+
+export const question1: PerseusRenderer = {
+    content: "Try matching the target image\n[[\u2603 phet-sim 1]]\n",
+    images: {
+        "https://ka-perseus-images.s3.amazonaws.com/8e518475587bc83767c72b49ff094e5870c3edc3.png":
+            {
+                width: 760,
+                height: 688,
+            },
+    },
+    widgets: {
+        "phet-sim 1": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "phet-sim",
+            options: {
+                url: "https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html",
+                height: "410",
+                width: "410",
+                description: "Projectile Data Lab",
+                static: false,
+            },
+            alignment: "default",
+        },
+    },
+};
diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
new file mode 100644
index 0000000000..b2ae49ebe7
--- /dev/null
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -0,0 +1,128 @@
+/* eslint-disable react/forbid-prop-types, react/sort-comp */
+/**
+ * This is a PhET simulation widget. It is used for rendering simulations
+ * from https://phet.colorado.edu/.
+ */
+
+import $ from "jquery";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import {getDependencies} from "../dependencies";
+import * as Changeable from "../mixins/changeable";
+import Util from "../util";
+
+import type {WidgetExports} from "../types";
+
+const {updateQueryString} = Util;
+
+/* This renders the PhET sim */
+class PhetSim extends React.Component<any> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        url: PropTypes.string,
+        description: PropTypes.string,
+    };
+
+    getUserInput: () => any = () => {
+        return null;
+    };
+
+    handleMessageEvent: (arg1: any) => void = (e) => {
+        // We receive data from the iframe that contains {passed: true/false}
+        //  and use that to set the status
+        // It could also contain an optional message
+        let data: Record<string, any> = {};
+        try {
+            data = JSON.parse(e.originalEvent.data);
+        } catch (err: any) {
+            return;
+        }
+
+        if (_.isUndefined(data.testsPassed)) {
+            return;
+        }
+
+        const status = data.testsPassed ? "correct" : "incorrect";
+        this.change({
+            status: status,
+            message: data.message,
+        });
+    };
+
+    componentDidMount() {
+        $(window).on("message", this.handleMessageEvent);
+    }
+
+    componentWillUnmount() {
+        $(window).off("message", this.handleMessageEvent);
+    }
+
+    render(): React.ReactNode {
+        const style = {
+            width: String(this.props.width),
+            height: String(this.props.height),
+        } as const;
+
+        const {kaLocale} = getDependencies();
+
+        // Add "px" to unitless numbers
+        Object.entries(style).forEach(([key, value]: [any, any]) => {
+            if (!value.endsWith("%") && !value.endsWith("px")) {
+                style[key] = value + "px";
+            }
+        });
+
+        let url = this.props.url;
+
+        // The URL needs to start with https://phet.colorado.edu/
+        // Do we want to allow users to paste in a relative path instead of
+        // just a full link?
+        if (
+            url &&
+            url.length &&
+            !url.startsWith("https://phet.colorado.edu/") // todo: find better check
+        ) {
+            // todo(anna): Error state, unable to provide content
+            // Figure out fallback
+        }
+        url = updateQueryString(url, "locale", kaLocale);
+
+        const sandboxProperties = "allow-same-origin allow-scripts";
+
+        // We sandbox the iframe so that we allowlist only the functionality
+        //  that we need. This makes it a bit safer in case some content
+        //  creator "went wild".
+        // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
+        return (
+            <iframe
+                sandbox={sandboxProperties}
+                style={style}
+                src={url}
+                aria-label={this.props.description}
+                allowFullScreen={true}
+            />
+        );
+    }
+
+    change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
+        // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+        return Changeable.change.apply(this, args);
+    };
+
+    simpleValidate: (arg1: any) => any = (rubric) => {
+        // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof PhetSim'.
+        return PhetSim.validate(this.getUserInput(), rubric);
+    };
+}
+
+export default {
+    name: "phet-sim",
+    displayName: "PhET Simulation",
+    widget: PhetSim,
+    // Let's not expose it to all content creators yet
+    hidden: true,
+} as WidgetExports<typeof PhetSim>;

From 8602fdc5503c8cfd9a1b0cba3dcff23b542df157 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Tue, 30 Jul 2024 22:59:10 -0700
Subject: [PATCH 02/33] Added locale checks on iframe

---
 packages/perseus/src/widgets/phet-sim.tsx | 96 ++++++++++++++---------
 1 file changed, 58 insertions(+), 38 deletions(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index b2ae49ebe7..5912103b57 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -4,7 +4,7 @@
  * from https://phet.colorado.edu/.
  */
 
-import $ from "jquery";
+import Banner from "@khanacademy/wonder-blocks-banner";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
@@ -27,38 +27,30 @@ class PhetSim extends React.Component<any> {
         description: PropTypes.string,
     };
 
-    getUserInput: () => any = () => {
-        return null;
-    };
-
-    handleMessageEvent: (arg1: any) => void = (e) => {
-        // We receive data from the iframe that contains {passed: true/false}
-        //  and use that to set the status
-        // It could also contain an optional message
-        let data: Record<string, any> = {};
-        try {
-            data = JSON.parse(e.originalEvent.data);
-        } catch (err: any) {
-            return;
-        }
+    private readonly iframeRef: React.RefObject<HTMLIFrameElement>;
+    private errMessage: string | null;
 
-        if (_.isUndefined(data.testsPassed)) {
-            return;
-        }
+    constructor(props) {
+        super(props);
+        this.iframeRef = React.createRef<HTMLIFrameElement>();
+        this.errMessage = null;
+    }
 
-        const status = data.testsPassed ? "correct" : "incorrect";
-        this.change({
-            status: status,
-            message: data.message,
-        });
+    getUserInput: () => any = () => {
+        return null;
     };
 
     componentDidMount() {
-        $(window).on("message", this.handleMessageEvent);
-    }
-
-    componentWillUnmount() {
-        $(window).off("message", this.handleMessageEvent);
+        if (this.iframeRef.current) {
+            this.iframeRef.current.onload = () => {
+                if (this.iframeRef.current) {
+                    if (!this.checkForLocale(this.iframeRef.current)) {
+                        this.errMessage =
+                            "Sorry, this simulation isn't available in your language!";
+                    }
+                }
+            };
+        }
     }
 
     render(): React.ReactNode {
@@ -87,24 +79,38 @@ class PhetSim extends React.Component<any> {
             !url.startsWith("https://phet.colorado.edu/") // todo: find better check
         ) {
             // todo(anna): Error state, unable to provide content
-            // Figure out fallback
+            url = "";
+            this.errMessage = "Cannot load PhET widget";
         }
         url = updateQueryString(url, "locale", kaLocale);
 
         const sandboxProperties = "allow-same-origin allow-scripts";
 
         // We sandbox the iframe so that we allowlist only the functionality
-        //  that we need. This makes it a bit safer in case some content
-        //  creator "went wild".
+        // that we need. This makes it a bit safer in case some content
+        // creator "went wild".
         // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
         return (
-            <iframe
-                sandbox={sandboxProperties}
-                style={style}
-                src={url}
-                aria-label={this.props.description}
-                allowFullScreen={true}
-            />
+            <>
+                {this.errMessage && (
+                    <Banner
+                        kind="warning"
+                        layout="floating"
+                        text={this.errMessage}
+                        onDismiss={() => {
+                            this.errMessage = null;
+                        }}
+                    />
+                )}
+                <iframe
+                    ref={this.iframeRef}
+                    sandbox={sandboxProperties}
+                    style={style}
+                    src={url}
+                    aria-label={this.props.description}
+                    allowFullScreen={true}
+                />
+            </>
         );
     }
 
@@ -117,6 +123,20 @@ class PhetSim extends React.Component<any> {
         // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof PhetSim'.
         return PhetSim.validate(this.getUserInput(), rubric);
     };
+
+    checkForLocale: (arg1: HTMLIFrameElement) => boolean = (iframe) => {
+        const {kaLocale} = getDependencies();
+        if (iframe.contentWindow) {
+            const locales: string[] = Object.keys(
+                // TODO(Anna): Fix the CORS error
+                iframe.contentWindow.phet.chipper.localeData,
+            );
+            return locales.includes(kaLocale);
+        }
+        // TODO(Anna): Feels like we should throw a different error if iframe.contentWindow
+        // isn't accessible... But what do we return here, in that case?
+        return false;
+    };
 }
 
 export default {

From 691bfe3041e5d47b26736d7506346b8f289f2bdc Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Thu, 1 Aug 2024 16:41:17 -0700
Subject: [PATCH 03/33] Small text update in storybook test data

---
 packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
index 1937b83955..32960e4732 100644
--- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -1,7 +1,8 @@
 import type {PerseusRenderer} from "../../perseus-types";
 
 export const question1: PerseusRenderer = {
-    content: "Try matching the target image\n[[\u2603 phet-sim 1]]\n",
+    content:
+        "Do this fun PhET simulation! A projectile data lab!\n[[\u2603 phet-sim 1]]\n",
     images: {
         "https://ka-perseus-images.s3.amazonaws.com/8e518475587bc83767c72b49ff094e5870c3edc3.png":
             {

From fa03b2d4c9d1ad2e4e8671f6e62020bc3425e413 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Thu, 1 Aug 2024 16:41:24 -0700
Subject: [PATCH 04/33] Check locale availability

---
 packages/perseus/src/widgets/phet-sim.tsx | 83 ++++++++++++-----------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index 5912103b57..55b61653a6 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -7,7 +7,6 @@
 import Banner from "@khanacademy/wonder-blocks-banner";
 import PropTypes from "prop-types";
 import * as React from "react";
-import _ from "underscore";
 
 import {getDependencies} from "../dependencies";
 import * as Changeable from "../mixins/changeable";
@@ -27,29 +26,25 @@ class PhetSim extends React.Component<any> {
         description: PropTypes.string,
     };
 
-    private readonly iframeRef: React.RefObject<HTMLIFrameElement>;
-    private errMessage: string | null;
-
     constructor(props) {
         super(props);
-        this.iframeRef = React.createRef<HTMLIFrameElement>();
-        this.errMessage = null;
+        this.state = {
+            iframeRef: React.createRef<HTMLIFrameElement>(),
+            errMessage: null,
+        };
     }
 
     getUserInput: () => any = () => {
         return null;
     };
 
-    componentDidMount() {
-        if (this.iframeRef.current) {
-            this.iframeRef.current.onload = () => {
-                if (this.iframeRef.current) {
-                    if (!this.checkForLocale(this.iframeRef.current)) {
-                        this.errMessage =
-                            "Sorry, this simulation isn't available in your language!";
-                    }
-                }
-            };
+    async componentDidMount() {
+        const {kaLocale} = getDependencies();
+        if (!(await this.checkForLocale(kaLocale))) {
+            this.setState({
+                errMessage:
+                    "Sorry, this simulation isn't available in your language!",
+            });
         }
     }
 
@@ -68,7 +63,8 @@ class PhetSim extends React.Component<any> {
             }
         });
 
-        let url = this.props.url;
+        let url: string = this.props.url;
+        url = updateQueryString(url, "locale", kaLocale);
 
         // The URL needs to start with https://phet.colorado.edu/
         // Do we want to allow users to paste in a relative path instead of
@@ -76,13 +72,11 @@ class PhetSim extends React.Component<any> {
         if (
             url &&
             url.length &&
-            !url.startsWith("https://phet.colorado.edu/") // todo: find better check
+            !url.startsWith("https://phet.colorado.edu/")
         ) {
-            // todo(anna): Error state, unable to provide content
+            // TODO(Anna): Do we want to report an error on this?
             url = "";
-            this.errMessage = "Cannot load PhET widget";
         }
-        url = updateQueryString(url, "locale", kaLocale);
 
         const sandboxProperties = "allow-same-origin allow-scripts";
 
@@ -92,23 +86,24 @@ class PhetSim extends React.Component<any> {
         // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
         return (
             <>
-                {this.errMessage && (
+                {this.state["errMessage"] && (
                     <Banner
                         kind="warning"
                         layout="floating"
-                        text={this.errMessage}
+                        text={this.state["errMessage"]}
                         onDismiss={() => {
-                            this.errMessage = null;
+                            this.setState({errMessage: null});
                         }}
                     />
                 )}
                 <iframe
-                    ref={this.iframeRef}
+                    ref={this.state["iframeRef"]}
                     sandbox={sandboxProperties}
                     style={style}
                     src={url}
-                    aria-label={this.props.description}
-                    allowFullScreen={true}
+                    srcDoc={url ? undefined : "Could not load PhET simulation."}
+                    title={this.props.description}
+                    allow="fullscreen"
                 />
             </>
         );
@@ -124,19 +119,27 @@ class PhetSim extends React.Component<any> {
         return PhetSim.validate(this.getUserInput(), rubric);
     };
 
-    checkForLocale: (arg1: HTMLIFrameElement) => boolean = (iframe) => {
-        const {kaLocale} = getDependencies();
-        if (iframe.contentWindow) {
-            const locales: string[] = Object.keys(
-                // TODO(Anna): Fix the CORS error
-                iframe.contentWindow.phet.chipper.localeData,
-            );
-            return locales.includes(kaLocale);
-        }
-        // TODO(Anna): Feels like we should throw a different error if iframe.contentWindow
-        // isn't accessible... But what do we return here, in that case?
-        return false;
-    };
+    async checkForLocale(kaLocale: string): Promise<boolean> {
+        return fetch(this.props.url)
+            .then((response: Response): Promise<string> => response.text())
+            .then((html: string): boolean => {
+                try {
+                    // Find where window.phet.chipper.localeData is set.
+                    const localeDataVar: string =
+                        "window.phet.chipper.localeData = ";
+                    const startIndex = html.indexOf(localeDataVar);
+                    html = html.substring(startIndex + localeDataVar.length);
+                    const endIndex = html.indexOf(";");
+                    html = html.substring(0, endIndex);
+                    const locales: string[] = Object.keys(JSON.parse(html));
+                    return locales.includes(kaLocale);
+                } catch {
+                    // TODO(Anna): Feels like we should throw a different error if locale data
+                    // isn't accessible... But what do we return in that case?
+                    return false;
+                }
+            });
+    }
 }
 
 export default {

From 1d03ea23de439407ff97dcedbebf93d133addd12 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Thu, 1 Aug 2024 21:08:36 -0700
Subject: [PATCH 05/33] Changed URL from string to URL type

---
 packages/perseus/src/widgets/phet-sim.tsx | 77 ++++++++++-------------
 1 file changed, 33 insertions(+), 44 deletions(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index 55b61653a6..90b731db2e 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -10,12 +10,9 @@ import * as React from "react";
 
 import {getDependencies} from "../dependencies";
 import * as Changeable from "../mixins/changeable";
-import Util from "../util";
 
 import type {WidgetExports} from "../types";
 
-const {updateQueryString} = Util;
-
 /* This renders the PhET sim */
 class PhetSim extends React.Component<any> {
     static propTypes = {
@@ -26,6 +23,8 @@ class PhetSim extends React.Component<any> {
         description: PropTypes.string,
     };
 
+    private url: URL | null = null;
+
     constructor(props) {
         super(props);
         this.state = {
@@ -40,7 +39,13 @@ class PhetSim extends React.Component<any> {
 
     async componentDidMount() {
         const {kaLocale} = getDependencies();
-        if (!(await this.checkForLocale(kaLocale))) {
+        this.url = new URL(this.props.url);
+        this.url.searchParams.set("locale", kaLocale);
+        if (this.url?.origin !== "https://phet.colorado.edu") {
+            // TODO(Anna): Do we want to report an error on this?
+            this.url = null;
+        }
+        if (await this.showLocaleWarning(kaLocale)) {
             this.setState({
                 errMessage:
                     "Sorry, this simulation isn't available in your language!",
@@ -53,9 +58,6 @@ class PhetSim extends React.Component<any> {
             width: String(this.props.width),
             height: String(this.props.height),
         } as const;
-
-        const {kaLocale} = getDependencies();
-
         // Add "px" to unitless numbers
         Object.entries(style).forEach(([key, value]: [any, any]) => {
             if (!value.endsWith("%") && !value.endsWith("px")) {
@@ -63,27 +65,11 @@ class PhetSim extends React.Component<any> {
             }
         });
 
-        let url: string = this.props.url;
-        url = updateQueryString(url, "locale", kaLocale);
-
-        // The URL needs to start with https://phet.colorado.edu/
-        // Do we want to allow users to paste in a relative path instead of
-        // just a full link?
-        if (
-            url &&
-            url.length &&
-            !url.startsWith("https://phet.colorado.edu/")
-        ) {
-            // TODO(Anna): Do we want to report an error on this?
-            url = "";
-        }
-
-        const sandboxProperties = "allow-same-origin allow-scripts";
-
         // We sandbox the iframe so that we allowlist only the functionality
         // that we need. This makes it a bit safer in case some content
         // creator "went wild".
         // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
+        const sandboxProperties = "allow-same-origin allow-scripts";
         return (
             <>
                 {this.state["errMessage"] && (
@@ -98,11 +84,13 @@ class PhetSim extends React.Component<any> {
                 )}
                 <iframe
                     ref={this.state["iframeRef"]}
+                    title={this.props.description}
                     sandbox={sandboxProperties}
                     style={style}
-                    src={url}
-                    srcDoc={url ? undefined : "Could not load PhET simulation."}
-                    title={this.props.description}
+                    src={this.url?.toString()}
+                    srcDoc={
+                        this.url ? undefined : "Could not load PhET simulation."
+                    }
                     allow="fullscreen"
                 />
             </>
@@ -119,25 +107,26 @@ class PhetSim extends React.Component<any> {
         return PhetSim.validate(this.getUserInput(), rubric);
     };
 
-    async checkForLocale(kaLocale: string): Promise<boolean> {
-        return fetch(this.props.url)
+    async showLocaleWarning(kaLocale: string): Promise<boolean> {
+        // If there is no actual simulation, we shouldn't show any locale warnings
+        if (!this.url) {
+            return false;
+        }
+        return fetch(this.url)
             .then((response: Response): Promise<string> => response.text())
             .then((html: string): boolean => {
-                try {
-                    // Find where window.phet.chipper.localeData is set.
-                    const localeDataVar: string =
-                        "window.phet.chipper.localeData = ";
-                    const startIndex = html.indexOf(localeDataVar);
-                    html = html.substring(startIndex + localeDataVar.length);
-                    const endIndex = html.indexOf(";");
-                    html = html.substring(0, endIndex);
-                    const locales: string[] = Object.keys(JSON.parse(html));
-                    return locales.includes(kaLocale);
-                } catch {
-                    // TODO(Anna): Feels like we should throw a different error if locale data
-                    // isn't accessible... But what do we return in that case?
-                    return false;
-                }
+                // Find where window.phet.chipper.localeData is set.
+                const localeDataVar: string =
+                    "window.phet.chipper.localeData = ";
+                const startIndex = html.indexOf(localeDataVar);
+                html = html.substring(startIndex + localeDataVar.length);
+                const endIndex = html.indexOf(";");
+                html = html.substring(0, endIndex);
+                const locales: string[] = Object.keys(JSON.parse(html));
+                return !locales.includes(kaLocale);
+            })
+            .catch((error: any) => {
+                return false;
             });
     }
 }

From eb1b3bdc240f428bc31623115ec1ccc84cfc8c35 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Fri, 2 Aug 2024 14:33:28 -0700
Subject: [PATCH 06/33] Adjusting state vs class vars

---
 packages/perseus/src/widgets/phet-sim.tsx | 54 ++++++++++++++++-------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index 90b731db2e..33184bcd85 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -11,10 +11,18 @@ import * as React from "react";
 import {getDependencies} from "../dependencies";
 import * as Changeable from "../mixins/changeable";
 
-import type {WidgetExports} from "../types";
+import type {PerseusPhetSimWidgetOptions} from "../perseus-types";
+import type {WidgetExports, WidgetProps} from "../types";
+
+type RenderProps = PerseusPhetSimWidgetOptions; // transform = _.identity
+type Props = WidgetProps<RenderProps, PerseusPhetSimWidgetOptions>;
+
+type State = {
+    errMessage: string | null;
+};
 
 /* This renders the PhET sim */
-class PhetSim extends React.Component<any> {
+class PhetSim extends React.Component<Props, State> {
     static propTypes = {
         ...Changeable.propTypes,
         width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -23,14 +31,25 @@ class PhetSim extends React.Component<any> {
         description: PropTypes.string,
     };
 
-    private url: URL | null = null;
+    private url: URL | null;
+    private iframeRef: React.RefObject<HTMLIFrameElement>;
+
+    state: State = {
+        errMessage: null,
+    };
 
     constructor(props) {
         super(props);
-        this.state = {
-            iframeRef: React.createRef<HTMLIFrameElement>(),
-            errMessage: null,
-        };
+        // Initialize the URL
+        const {kaLocale} = getDependencies();
+        this.url = new URL(this.props.url);
+        this.url.searchParams.set("locale", kaLocale);
+        if (this.url.origin !== "https://phet.colorado.edu") {
+            // TODO(Anna): Report some kind of error
+            this.url = null;
+        }
+        // Initialize the IFrame ref
+        this.iframeRef = React.createRef<HTMLIFrameElement>();
     }
 
     getUserInput: () => any = () => {
@@ -39,12 +58,6 @@ class PhetSim extends React.Component<any> {
 
     async componentDidMount() {
         const {kaLocale} = getDependencies();
-        this.url = new URL(this.props.url);
-        this.url.searchParams.set("locale", kaLocale);
-        if (this.url?.origin !== "https://phet.colorado.edu") {
-            // TODO(Anna): Do we want to report an error on this?
-            this.url = null;
-        }
         if (await this.showLocaleWarning(kaLocale)) {
             this.setState({
                 errMessage:
@@ -72,18 +85,18 @@ class PhetSim extends React.Component<any> {
         const sandboxProperties = "allow-same-origin allow-scripts";
         return (
             <>
-                {this.state["errMessage"] && (
+                {this.state.errMessage && (
                     <Banner
                         kind="warning"
                         layout="floating"
-                        text={this.state["errMessage"]}
+                        text={this.state.errMessage}
                         onDismiss={() => {
                             this.setState({errMessage: null});
                         }}
                     />
                 )}
                 <iframe
-                    ref={this.state["iframeRef"]}
+                    ref={this.iframeRef}
                     title={this.props.description}
                     sandbox={sandboxProperties}
                     style={style}
@@ -93,6 +106,13 @@ class PhetSim extends React.Component<any> {
                     }
                     allow="fullscreen"
                 />
+                <button
+                    onClick={() => {
+                        this.iframeRef.current?.requestFullscreen();
+                    }}
+                >
+                    Fullscreen
+                </button>
             </>
         );
     }
@@ -126,6 +146,8 @@ class PhetSim extends React.Component<any> {
                 return !locales.includes(kaLocale);
             })
             .catch((error: any) => {
+                // If we have an error grabbing locale data, we shouldn't show
+                // a locale warning in case it is spurious
                 return false;
             });
     }

From 059d87d3b877a0c361dd4d89dfee86a04624ecbe Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 5 Aug 2024 19:41:45 -0700
Subject: [PATCH 07/33] Add different locale checker

---
 packages/perseus/src/widgets/phet-sim.tsx | 38 ++++++++++++++++++++---
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index 33184bcd85..31df50f279 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -5,6 +5,7 @@
  */
 
 import Banner from "@khanacademy/wonder-blocks-banner";
+import Button from "@khanacademy/wonder-blocks-button";
 import PropTypes from "prop-types";
 import * as React from "react";
 
@@ -31,8 +32,8 @@ class PhetSim extends React.Component<Props, State> {
         description: PropTypes.string,
     };
 
-    private url: URL | null;
-    private iframeRef: React.RefObject<HTMLIFrameElement>;
+    private readonly url: URL | null;
+    private readonly iframeRef: React.RefObject<HTMLIFrameElement>;
 
     state: State = {
         errMessage: null,
@@ -43,6 +44,7 @@ class PhetSim extends React.Component<Props, State> {
         // Initialize the URL
         const {kaLocale} = getDependencies();
         this.url = new URL(this.props.url);
+        // TODO(Anna): Update kaLocale to match PhET locale format
         this.url.searchParams.set("locale", kaLocale);
         if (this.url.origin !== "https://phet.colorado.edu") {
             // TODO(Anna): Report some kind of error
@@ -106,13 +108,13 @@ class PhetSim extends React.Component<Props, State> {
                     }
                     allow="fullscreen"
                 />
-                <button
+                <Button
                     onClick={() => {
                         this.iframeRef.current?.requestFullscreen();
                     }}
                 >
                     Fullscreen
-                </button>
+                </Button>
             </>
         );
     }
@@ -132,6 +134,33 @@ class PhetSim extends React.Component<Props, State> {
         if (!this.url) {
             return false;
         }
+
+        /*
+        Access to fetch at 'https://phet.colorado.edu/services/check-html-updates' from origin 'http://localhost:6006'
+        has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No
+        'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your
+        needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
+         */
+        const phetRegex: RegExp =
+            /https:\/\/phet\.colorado\.edu\/sims\/html\/([a-zA-Z0-9-]+)\/.*/g;
+        const match: RegExpExecArray | null = phetRegex.exec(
+            this.url.toString(),
+        );
+        if (!match) {
+            return false;
+        }
+        const simName = match[1];
+        const locales = await fetch(
+            `https://phet.colorado.edu/sims/html/${simName}/latest/string-map.json`,
+        )
+            .then((response: Response) => response.json())
+            .then((json: any) => {
+                console.log(Object.keys(json));
+                return Object.keys(json);
+            });
+
+        //return !locales.includes(kaLocale);
+
         return fetch(this.url)
             .then((response: Response): Promise<string> => response.text())
             .then((html: string): boolean => {
@@ -143,6 +172,7 @@ class PhetSim extends React.Component<Props, State> {
                 const endIndex = html.indexOf(";");
                 html = html.substring(0, endIndex);
                 const locales: string[] = Object.keys(JSON.parse(html));
+                console.log(locales);
                 return !locales.includes(kaLocale);
             })
             .catch((error: any) => {

From 32077212ddd0106a61917557d60bce5f06240127 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Fri, 9 Aug 2024 00:42:03 -0700
Subject: [PATCH 08/33] Update available locale logic

---
 packages/perseus/src/widgets/phet-sim.tsx | 112 ++++++++++++----------
 1 file changed, 60 insertions(+), 52 deletions(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index 31df50f279..9361980c7a 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -5,7 +5,8 @@
  */
 
 import Banner from "@khanacademy/wonder-blocks-banner";
-import Button from "@khanacademy/wonder-blocks-button";
+import IconButton from "@khanacademy/wonder-blocks-icon-button";
+import cornersOutIcon from "@phosphor-icons/core/regular/corners-out.svg";
 import PropTypes from "prop-types";
 import * as React from "react";
 
@@ -20,6 +21,7 @@ type Props = WidgetProps<RenderProps, PerseusPhetSimWidgetOptions>;
 
 type State = {
     errMessage: string | null;
+    url: URL | null;
 };
 
 /* This renders the PhET sim */
@@ -32,26 +34,23 @@ class PhetSim extends React.Component<Props, State> {
         description: PropTypes.string,
     };
 
-    private readonly url: URL | null;
     private readonly iframeRef: React.RefObject<HTMLIFrameElement>;
+    private readonly locale: string;
 
     state: State = {
+        url: null,
         errMessage: null,
     };
 
     constructor(props) {
         super(props);
-        // Initialize the URL
-        const {kaLocale} = getDependencies();
-        this.url = new URL(this.props.url);
-        // TODO(Anna): Update kaLocale to match PhET locale format
-        this.url.searchParams.set("locale", kaLocale);
-        if (this.url.origin !== "https://phet.colorado.edu") {
-            // TODO(Anna): Report some kind of error
-            this.url = null;
-        }
-        // Initialize the IFrame ref
+        this.locale = this.getPhetCompatibleLocale(getDependencies().kaLocale);
         this.iframeRef = React.createRef<HTMLIFrameElement>();
+        this.state.url = new URL(this.props.url);
+        this.state.url.searchParams.set("locale", this.locale);
+        if (this.state.url.origin !== "https://phet.colorado.edu") {
+            this.state.url = null;
+        }
     }
 
     getUserInput: () => any = () => {
@@ -59,8 +58,17 @@ class PhetSim extends React.Component<Props, State> {
     };
 
     async componentDidMount() {
-        const {kaLocale} = getDependencies();
-        if (await this.showLocaleWarning(kaLocale)) {
+        // Display an error if we fail to load the resource
+        if (this.state.url) {
+            const validLink = await fetch(this.state.url).then(
+                (response: Response) => response.ok,
+            );
+            if (!validLink) {
+                this.setState({url: null});
+            }
+        }
+        // Display a warning if the simulation doesn't have our locale
+        if (await this.showLocaleWarning(this.locale)) {
             this.setState({
                 errMessage:
                     "Sorry, this simulation isn't available in your language!",
@@ -73,6 +81,7 @@ class PhetSim extends React.Component<Props, State> {
             width: String(this.props.width),
             height: String(this.props.height),
         } as const;
+
         // Add "px" to unitless numbers
         Object.entries(style).forEach(([key, value]: [any, any]) => {
             if (!value.endsWith("%") && !value.endsWith("px")) {
@@ -102,19 +111,22 @@ class PhetSim extends React.Component<Props, State> {
                     title={this.props.description}
                     sandbox={sandboxProperties}
                     style={style}
-                    src={this.url?.toString()}
+                    src={this.state.url?.toString()}
                     srcDoc={
-                        this.url ? undefined : "Could not load PhET simulation."
+                        this.state.url
+                            ? undefined
+                            : "Could not load simulation."
                     }
                     allow="fullscreen"
                 />
-                <Button
+                <IconButton
+                    icon={cornersOutIcon}
                     onClick={() => {
                         this.iframeRef.current?.requestFullscreen();
                     }}
-                >
-                    Fullscreen
-                </Button>
+                    aria-label={"Fullscreen"}
+                    size={"small"}
+                />
             </>
         );
     }
@@ -129,23 +141,33 @@ class PhetSim extends React.Component<Props, State> {
         return PhetSim.validate(this.getUserInput(), rubric);
     };
 
-    async showLocaleWarning(kaLocale: string): Promise<boolean> {
-        // If there is no actual simulation, we shouldn't show any locale warnings
-        if (!this.url) {
-            return false;
+    getPhetCompatibleLocale: (arg1: string) => string = (kaLocale) => {
+        switch (kaLocale) {
+            case "pt-pt":
+                return "pt";
+            case "zh-hans":
+                return "zh_CN";
+            case "zh-hant":
+                return "zh_TW";
+            case "fa-af":
+                return "fa_DA";
+            default:
+                return kaLocale;
         }
+    };
 
-        /*
-        Access to fetch at 'https://phet.colorado.edu/services/check-html-updates' from origin 'http://localhost:6006'
-        has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No
-        'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your
-        needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
-         */
+    async showLocaleWarning(locale: string): Promise<boolean> {
+        // Do not show a locale warning on an invalid URL
+        if (!this.state.url) {
+            return false;
+        }
+        // Grab the simulation name
         const phetRegex: RegExp =
             /https:\/\/phet\.colorado\.edu\/sims\/html\/([a-zA-Z0-9-]+)\/.*/g;
         const match: RegExpExecArray | null = phetRegex.exec(
-            this.url.toString(),
+            this.state.url.toString(),
         );
+        // Do not show a locale warning on a non-simulation URL
         if (!match) {
             return false;
         }
@@ -155,31 +177,17 @@ class PhetSim extends React.Component<Props, State> {
         )
             .then((response: Response) => response.json())
             .then((json: any) => {
-                console.log(Object.keys(json));
                 return Object.keys(json);
             });
 
-        //return !locales.includes(kaLocale);
-
-        return fetch(this.url)
-            .then((response: Response): Promise<string> => response.text())
-            .then((html: string): boolean => {
-                // Find where window.phet.chipper.localeData is set.
-                const localeDataVar: string =
-                    "window.phet.chipper.localeData = ";
-                const startIndex = html.indexOf(localeDataVar);
-                html = html.substring(startIndex + localeDataVar.length);
-                const endIndex = html.indexOf(";");
-                html = html.substring(0, endIndex);
-                const locales: string[] = Object.keys(JSON.parse(html));
-                console.log(locales);
-                return !locales.includes(kaLocale);
-            })
-            .catch((error: any) => {
-                // If we have an error grabbing locale data, we shouldn't show
-                // a locale warning in case it is spurious
+        // Only display a locale warning if there is no fallback language
+        const baseLocale = this.locale.split("_")[0];
+        for (const l of locales) {
+            if (baseLocale === l.split("_")[0]) {
                 return false;
-            });
+            }
+        }
+        return true;
     }
 }
 

From 6a741a10288d96c280051aab1235bad5116a3a33 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Fri, 9 Aug 2024 01:44:36 -0700
Subject: [PATCH 09/33] Rebase onto main

---
 packages/perseus/package.json                 |  8 +++
 .../widgets/__testdata__/phet-sim.testdata.ts |  7 ---
 packages/perseus/src/widgets/phet-sim.tsx     | 49 +++++++++++--------
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/packages/perseus/package.json b/packages/perseus/package.json
index 79c8da5d03..bdb224b70a 100644
--- a/packages/perseus/package.json
+++ b/packages/perseus/package.json
@@ -48,6 +48,14 @@
         "@khanacademy/perseus-linter": "^1.1.0",
         "@khanacademy/pure-markdown": "^0.3.7",
         "@khanacademy/simple-markdown": "^0.13.0",
+        "@khanacademy/kas": "^0.3.9",
+        "@khanacademy/kmath": "^0.1.12",
+        "@khanacademy/math-input": "^19.2.0",
+        "@khanacademy/perseus-core": "1.4.2",
+        "@khanacademy/perseus-linter": "^0.4.0",
+        "@khanacademy/pure-markdown": "^0.3.5",
+        "@khanacademy/simple-markdown": "^0.12.0",
+        "@khanacademy/wonder-blocks-icon-button": "^5.3.3",
         "@use-gesture/react": "^10.2.27",
         "mafs": "0.19.0",
         "uuid": "^10.0.0"
diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
index 32960e4732..9d72a86d53 100644
--- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -3,13 +3,6 @@ import type {PerseusRenderer} from "../../perseus-types";
 export const question1: PerseusRenderer = {
     content:
         "Do this fun PhET simulation! A projectile data lab!\n[[\u2603 phet-sim 1]]\n",
-    images: {
-        "https://ka-perseus-images.s3.amazonaws.com/8e518475587bc83767c72b49ff094e5870c3edc3.png":
-            {
-                width: 760,
-                height: 688,
-            },
-    },
     widgets: {
         "phet-sim 1": {
             graded: true,
diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index 9361980c7a..e6636ac0ee 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -5,6 +5,7 @@
  */
 
 import Banner from "@khanacademy/wonder-blocks-banner";
+import {View} from "@khanacademy/wonder-blocks-core";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import cornersOutIcon from "@phosphor-icons/core/regular/corners-out.svg";
 import PropTypes from "prop-types";
@@ -106,27 +107,33 @@ class PhetSim extends React.Component<Props, State> {
                         }}
                     />
                 )}
-                <iframe
-                    ref={this.iframeRef}
-                    title={this.props.description}
-                    sandbox={sandboxProperties}
-                    style={style}
-                    src={this.state.url?.toString()}
-                    srcDoc={
-                        this.state.url
-                            ? undefined
-                            : "Could not load simulation."
-                    }
-                    allow="fullscreen"
-                />
-                <IconButton
-                    icon={cornersOutIcon}
-                    onClick={() => {
-                        this.iframeRef.current?.requestFullscreen();
-                    }}
-                    aria-label={"Fullscreen"}
-                    size={"small"}
-                />
+                <View>
+                    <iframe
+                        ref={this.iframeRef}
+                        title={this.props.description}
+                        sandbox={sandboxProperties}
+                        style={style}
+                        src={this.state.url?.toString()}
+                        srcDoc={
+                            this.state.url
+                                ? undefined
+                                : "Could not load simulation."
+                        }
+                        allow="fullscreen"
+                    />
+                    <IconButton
+                        icon={cornersOutIcon}
+                        onClick={() => {
+                            this.iframeRef.current?.requestFullscreen();
+                        }}
+                        aria-label={"Fullscreen"}
+                        style={{
+                            marginTop: 5,
+                            marginBottom: 5,
+                            alignSelf: "flex-end",
+                        }}
+                    />
+                </View>
             </>
         );
     }

From b9859a928d9d94224ae58de8f8e3e8231347dfd8 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Fri, 9 Aug 2024 02:15:44 -0700
Subject: [PATCH 10/33] Make width and height auto

---
 packages/perseus/src/perseus-types.ts         |  4 -
 .../widgets/__testdata__/phet-sim.testdata.ts |  2 -
 packages/perseus/src/widgets/phet-sim.tsx     | 77 +++++++++----------
 3 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts
index bfde7f6ad2..79c53db6ea 100644
--- a/packages/perseus/src/perseus-types.ts
+++ b/packages/perseus/src/perseus-types.ts
@@ -1543,10 +1543,6 @@ export type PerseusIFrameWidgetOptions = {
 export type PerseusPhetSimWidgetOptions = {
     // A URL to display, must start with https://phet.colorado.edu/
     url: string;
-    // The width of the widget
-    width?: number | string;
-    // The height of the widget
-    height?: number | string;
     // Translatable Text; Description of the sim for Khanmigo and alt text
     description: string;
     // Always false
diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
index 9d72a86d53..ca5816abc2 100644
--- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -11,8 +11,6 @@ export const question1: PerseusRenderer = {
             type: "phet-sim",
             options: {
                 url: "https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html",
-                height: "410",
-                width: "410",
                 description: "Projectile Data Lab",
                 static: false,
             },
diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index e6636ac0ee..225d2ef251 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -29,8 +29,6 @@ type State = {
 class PhetSim extends React.Component<Props, State> {
     static propTypes = {
         ...Changeable.propTypes,
-        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         url: PropTypes.string,
         description: PropTypes.string,
     };
@@ -78,41 +76,40 @@ class PhetSim extends React.Component<Props, State> {
     }
 
     render(): React.ReactNode {
-        const style = {
-            width: String(this.props.width),
-            height: String(this.props.height),
-        } as const;
-
-        // Add "px" to unitless numbers
-        Object.entries(style).forEach(([key, value]: [any, any]) => {
-            if (!value.endsWith("%") && !value.endsWith("px")) {
-                style[key] = value + "px";
-            }
-        });
-
         // We sandbox the iframe so that we allowlist only the functionality
         // that we need. This makes it a bit safer in case some content
         // creator "went wild".
         // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
         const sandboxProperties = "allow-same-origin allow-scripts";
         return (
-            <>
-                {this.state.errMessage && (
-                    <Banner
-                        kind="warning"
-                        layout="floating"
-                        text={this.state.errMessage}
-                        onDismiss={() => {
-                            this.setState({errMessage: null});
-                        }}
-                    />
-                )}
-                <View>
+            <View>
+                <View
+                    style={{
+                        position: "relative",
+                        width: "100%",
+                        paddingBottom: "100%",
+                        height: 0,
+                    }}
+                >
+                    {this.state.errMessage && (
+                        <Banner
+                            kind="warning"
+                            layout="floating"
+                            text={this.state.errMessage}
+                            onDismiss={() => {
+                                this.setState({errMessage: null});
+                            }}
+                        />
+                    )}
                     <iframe
                         ref={this.iframeRef}
                         title={this.props.description}
                         sandbox={sandboxProperties}
-                        style={style}
+                        style={{
+                            width: "100%",
+                            height: "100%",
+                            position: "absolute",
+                        }}
                         src={this.state.url?.toString()}
                         srcDoc={
                             this.state.url
@@ -121,20 +118,20 @@ class PhetSim extends React.Component<Props, State> {
                         }
                         allow="fullscreen"
                     />
-                    <IconButton
-                        icon={cornersOutIcon}
-                        onClick={() => {
-                            this.iframeRef.current?.requestFullscreen();
-                        }}
-                        aria-label={"Fullscreen"}
-                        style={{
-                            marginTop: 5,
-                            marginBottom: 5,
-                            alignSelf: "flex-end",
-                        }}
-                    />
                 </View>
-            </>
+                <IconButton
+                    icon={cornersOutIcon}
+                    onClick={() => {
+                        this.iframeRef.current?.requestFullscreen();
+                    }}
+                    aria-label={"Fullscreen"}
+                    style={{
+                        marginTop: 5,
+                        marginBottom: 5,
+                        alignSelf: "flex-end",
+                    }}
+                />
+            </View>
         );
     }
 

From 256bfa53e4d6cb9a8862e6a40472cf1da79477c8 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 12 Aug 2024 11:55:57 -0700
Subject: [PATCH 11/33] Design updates from pair with Caitlyn

---
 packages/perseus/src/widgets/phet-sim.tsx | 24 ++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index 225d2ef251..83156bbd1a 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -83,6 +83,13 @@ class PhetSim extends React.Component<Props, State> {
         const sandboxProperties = "allow-same-origin allow-scripts";
         return (
             <View>
+                {this.state.errMessage && (
+                    <Banner
+                        kind="warning"
+                        layout="floating"
+                        text={this.state.errMessage}
+                    />
+                )}
                 <View
                     style={{
                         position: "relative",
@@ -91,16 +98,6 @@ class PhetSim extends React.Component<Props, State> {
                         height: 0,
                     }}
                 >
-                    {this.state.errMessage && (
-                        <Banner
-                            kind="warning"
-                            layout="floating"
-                            text={this.state.errMessage}
-                            onDismiss={() => {
-                                this.setState({errMessage: null});
-                            }}
-                        />
-                    )}
                     <iframe
                         ref={this.iframeRef}
                         title={this.props.description}
@@ -114,7 +111,7 @@ class PhetSim extends React.Component<Props, State> {
                         srcDoc={
                             this.state.url
                                 ? undefined
-                                : "Could not load simulation."
+                                : "Sorry, this simulation cannot load."
                         }
                         allow="fullscreen"
                     />
@@ -124,6 +121,7 @@ class PhetSim extends React.Component<Props, State> {
                     onClick={() => {
                         this.iframeRef.current?.requestFullscreen();
                     }}
+                    kind={"secondary"}
                     aria-label={"Fullscreen"}
                     style={{
                         marginTop: 5,
@@ -145,6 +143,10 @@ class PhetSim extends React.Component<Props, State> {
         return PhetSim.validate(this.getUserInput(), rubric);
     };
 
+    // kaLocales and PhET locales use different formats and abbreviations.
+    // PhET accepts different formats, i.e. kaLocale's hyphens, but it does not accept
+    // different abbreviations, so in points of divergence of abbreviations, we need to
+    // convert kaLocale abbreviations into abbreviations recognized by PhET.
     getPhetCompatibleLocale: (arg1: string) => string = (kaLocale) => {
         switch (kaLocale) {
             case "pt-pt":

From 6aa63ac6b70ac04265d8c934aae086b85f736be1 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 12 Aug 2024 21:41:27 -0700
Subject: [PATCH 12/33] Combine strings file changes

---
 packages/perseus/src/strings.ts                          | 8 ++++++++
 .../src/widgets/__testdata__/phet-sim.testdata.ts        | 1 +
 packages/perseus/src/widgets/phet-sim.tsx                | 9 ++++++---
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/perseus/src/strings.ts b/packages/perseus/src/strings.ts
index 41c35574ea..ca9686230c 100644
--- a/packages/perseus/src/strings.ts
+++ b/packages/perseus/src/strings.ts
@@ -125,6 +125,8 @@ export type PerseusStrings = {
     videoWrapper: string;
     mathInputTitle: string;
     mathInputDescription: string;
+    simulationLoadFail: string;
+    simulationLocaleWarning: string;
 };
 
 /**
@@ -291,6 +293,9 @@ export const strings: {
     mathInputTitle: "mathematics keyboard",
     mathInputDescription:
         "Use keyboard/mouse to interact with math-based input fields",
+    simulationLoadFail: "Sorry, this simulation cannot load.",
+    simulationLocaleWarning:
+        "Sorry, this simulation isn't available in your language.",
 };
 
 /**
@@ -441,4 +446,7 @@ export const mockStrings: PerseusStrings = {
     mathInputTitle: "mathematics keyboard",
     mathInputDescription:
         "Use keyboard/mouse to interact with math-based input fields",
+    simulationLoadFail: "Sorry, this simulation cannot load.",
+    simulationLocaleWarning:
+        "Sorry, this simulation isn't available in your language.",
 };
diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
index ca5816abc2..970bec1b00 100644
--- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -3,6 +3,7 @@ import type {PerseusRenderer} from "../../perseus-types";
 export const question1: PerseusRenderer = {
     content:
         "Do this fun PhET simulation! A projectile data lab!\n[[\u2603 phet-sim 1]]\n",
+    images: {},
     widgets: {
         "phet-sim 1": {
             graded: true,
diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index 83156bbd1a..f241d67ef3 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -11,6 +11,7 @@ import cornersOutIcon from "@phosphor-icons/core/regular/corners-out.svg";
 import PropTypes from "prop-types";
 import * as React from "react";
 
+import {PerseusI18nContext} from "../components/i18n-context";
 import {getDependencies} from "../dependencies";
 import * as Changeable from "../mixins/changeable";
 
@@ -33,6 +34,8 @@ class PhetSim extends React.Component<Props, State> {
         description: PropTypes.string,
     };
 
+    static contextType = PerseusI18nContext;
+    declare context: React.ContextType<typeof PerseusI18nContext>;
     private readonly iframeRef: React.RefObject<HTMLIFrameElement>;
     private readonly locale: string;
 
@@ -69,8 +72,7 @@ class PhetSim extends React.Component<Props, State> {
         // Display a warning if the simulation doesn't have our locale
         if (await this.showLocaleWarning(this.locale)) {
             this.setState({
-                errMessage:
-                    "Sorry, this simulation isn't available in your language!",
+                errMessage: this.context.strings.simulationLocaleWarning,
             });
         }
     }
@@ -84,6 +86,7 @@ class PhetSim extends React.Component<Props, State> {
         return (
             <View>
                 {this.state.errMessage && (
+                    // TODO(anna): Make this banner focusable
                     <Banner
                         kind="warning"
                         layout="floating"
@@ -111,7 +114,7 @@ class PhetSim extends React.Component<Props, State> {
                         srcDoc={
                             this.state.url
                                 ? undefined
-                                : "Sorry, this simulation cannot load."
+                                : this.context.strings.simulationLocaleWarning
                         }
                         allow="fullscreen"
                     />

From b4798638c11be2827fceb2254f4de1e802f8907d Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 12 Aug 2024 23:50:19 -0700
Subject: [PATCH 13/33] Combine import changes

---
 .changeset/empty-seals-worry.md           | 5 +++++
 packages/perseus/src/perseus-types.ts     | 1 +
 packages/perseus/src/widgets/phet-sim.tsx | 1 +
 3 files changed, 7 insertions(+)
 create mode 100644 .changeset/empty-seals-worry.md

diff --git a/.changeset/empty-seals-worry.md b/.changeset/empty-seals-worry.md
new file mode 100644
index 0000000000..7191a1a61b
--- /dev/null
+++ b/.changeset/empty-seals-worry.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Add PhET widget
diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts
index 79c53db6ea..e06175401a 100644
--- a/packages/perseus/src/perseus-types.ts
+++ b/packages/perseus/src/perseus-types.ts
@@ -290,6 +290,7 @@ export type PerseusWidget =
     | OrdererWidget
     | PassageRefWidget
     | PassageWidget
+    | PhetSimWidget
     | PlotterWidget
     | PythonProgramWidget
     | RadioWidget
diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index f241d67ef3..cf9aa22679 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -206,4 +206,5 @@ export default {
     widget: PhetSim,
     // Let's not expose it to all content creators yet
     hidden: true,
+    isLintable: true,
 } as WidgetExports<typeof PhetSim>;

From 9a41c13db1f425f4fc6e6df4c24ae758d8be543d Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Tue, 13 Aug 2024 15:40:29 -0700
Subject: [PATCH 14/33] Add PhET editor skeleton

---
 packages/perseus-editor/src/all-editors.ts    |  2 +
 .../__stories__/phet-sim-editor.stories.tsx   | 18 ++++++++
 .../src/widgets/phet-sim-editor.tsx           | 46 +++++++++++++++++++
 3 files changed, 66 insertions(+)
 create mode 100644 packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx
 create mode 100644 packages/perseus-editor/src/widgets/phet-sim-editor.tsx

diff --git a/packages/perseus-editor/src/all-editors.ts b/packages/perseus-editor/src/all-editors.ts
index a6427534f8..4084927675 100644
--- a/packages/perseus-editor/src/all-editors.ts
+++ b/packages/perseus-editor/src/all-editors.ts
@@ -27,6 +27,7 @@ import OrdererEditor from "./widgets/orderer-editor";
 import PassageEditor from "./widgets/passage-editor";
 import PassageRefEditor from "./widgets/passage-ref-editor";
 import PassageRefTargetEditor from "./widgets/passage-ref-target-editor";
+import PhetSimEditor from "./widgets/phet-sim-editor";
 import PlotterEditor from "./widgets/plotter-editor";
 import PythonProgramEditor from "./widgets/python-program-editor";
 import RadioEditor from "./widgets/radio/editor";
@@ -64,6 +65,7 @@ export default [
     PassageEditor,
     PassageRefEditor,
     PassageRefTargetEditor,
+    PhetSimEditor,
     PlotterEditor,
     PythonProgramEditor,
     SimpleMarkdownTesterEditor,
diff --git a/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx
new file mode 100644
index 0000000000..292a2758d6
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx
@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import PhetSimEditor from "../phet-sim-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "PerseusEditor/Widgets/PhET Simulation Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <PhetSimEditor onChange={action("onChange")} />;
+};
diff --git a/packages/perseus-editor/src/widgets/phet-sim-editor.tsx b/packages/perseus-editor/src/widgets/phet-sim-editor.tsx
new file mode 100644
index 0000000000..95fb4b0295
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/phet-sim-editor.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
+/* eslint-disable react/sort-comp */
+import {Changeable, EditorJsonify} from "@khanacademy/perseus";
+import * as React from "react";
+
+import BlurInput from "../components/blur-input";
+
+type PhetSimEditorProps = any;
+
+class PhetSimEditor extends React.Component<PhetSimEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+    };
+
+    static widgetName = "phet-sim" as const;
+
+    static defaultProps: PhetSimEditorProps = {
+        url: "",
+        description: "",
+    };
+
+    change: (arg1: any, arg2: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    render(): React.ReactNode {
+        return (
+            <div>
+                <label>
+                    URL:
+                    <BlurInput
+                        value={this.props.url}
+                        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
+                        onChange={this.change("url")}
+                    />
+                </label>
+            </div>
+        );
+    }
+
+    serialize: () => any = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+}
+
+export default PhetSimEditor;

From 047b960936fabe2c6e0df52adbe20a6de948ffaf Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Tue, 13 Aug 2024 16:16:23 -0700
Subject: [PATCH 15/33] Add tests

---
 .../widgets/__testdata__/phet-sim.testdata.ts |  2 +-
 .../src/widgets/__tests__/phet-sim.test.ts    | 43 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 packages/perseus/src/widgets/__tests__/phet-sim.test.ts

diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
index 970bec1b00..82b2d9778e 100644
--- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -6,7 +6,7 @@ export const question1: PerseusRenderer = {
     images: {},
     widgets: {
         "phet-sim 1": {
-            graded: true,
+            graded: false,
             version: {major: 0, minor: 0},
             static: false,
             type: "phet-sim",
diff --git a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
new file mode 100644
index 0000000000..50ea48890d
--- /dev/null
+++ b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
@@ -0,0 +1,43 @@
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import * as Dependencies from "../../dependencies";
+import {question1} from "../__testdata__/phet-sim.testdata";
+
+import {renderQuestion} from "./renderQuestion";
+
+import type {APIOptions} from "../../types";
+
+describe("phet-sim widget", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should snapshot", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        const {container} = renderQuestion(question1, apiOptions);
+
+        // Assert
+        expect(container).toMatchSnapshot("first render");
+    });
+
+    it("should snapshot on mobile", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: true,
+        };
+
+        // Act
+        const {container} = renderQuestion(question1, apiOptions);
+
+        // Assert
+        expect(container).toMatchSnapshot("first mobile render");
+    });
+
+    //There isn't testable behavior for this widget
+});

From 81a8989d08f00f6de579e93378c123486ed9abd1 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Wed, 14 Aug 2024 11:32:55 -0700
Subject: [PATCH 16/33] Mock fetch call for jest tests

---
 packages/perseus/src/widgets/__tests__/phet-sim.test.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
index 50ea48890d..600a394691 100644
--- a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
+++ b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
@@ -11,6 +11,11 @@ describe("phet-sim widget", () => {
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
         );
+        global.fetch = jest.fn(() =>
+            Promise.resolve({
+                json: () => Promise.resolve({test: 100}),
+            }),
+        ) as jest.Mock;
     });
 
     it("should snapshot", () => {

From b2f4049b009f2fc01997c289199753343fde4008 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Wed, 14 Aug 2024 15:55:06 -0700
Subject: [PATCH 17/33] Fix state and props usage

---
 packages/perseus/src/widgets/phet-sim.tsx | 90 ++++++++++++-----------
 1 file changed, 47 insertions(+), 43 deletions(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index cf9aa22679..3652c1372b 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -8,7 +8,6 @@ import Banner from "@khanacademy/wonder-blocks-banner";
 import {View} from "@khanacademy/wonder-blocks-core";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import cornersOutIcon from "@phosphor-icons/core/regular/corners-out.svg";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import {PerseusI18nContext} from "../components/i18n-context";
@@ -28,12 +27,6 @@ type State = {
 
 /* This renders the PhET sim */
 class PhetSim extends React.Component<Props, State> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        url: PropTypes.string,
-        description: PropTypes.string,
-    };
-
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
     private readonly iframeRef: React.RefObject<HTMLIFrameElement>;
@@ -48,11 +41,6 @@ class PhetSim extends React.Component<Props, State> {
         super(props);
         this.locale = this.getPhetCompatibleLocale(getDependencies().kaLocale);
         this.iframeRef = React.createRef<HTMLIFrameElement>();
-        this.state.url = new URL(this.props.url);
-        this.state.url.searchParams.set("locale", this.locale);
-        if (this.state.url.origin !== "https://phet.colorado.edu") {
-            this.state.url = null;
-        }
     }
 
     getUserInput: () => any = () => {
@@ -60,20 +48,13 @@ class PhetSim extends React.Component<Props, State> {
     };
 
     async componentDidMount() {
-        // Display an error if we fail to load the resource
-        if (this.state.url) {
-            const validLink = await fetch(this.state.url).then(
-                (response: Response) => response.ok,
-            );
-            if (!validLink) {
-                this.setState({url: null});
-            }
-        }
-        // Display a warning if the simulation doesn't have our locale
-        if (await this.showLocaleWarning(this.locale)) {
-            this.setState({
-                errMessage: this.context.strings.simulationLocaleWarning,
-            });
+        await this.updateSimState(this.props.url);
+    }
+
+    async componentDidUpdate(prevProps) {
+        // If the URL has changed, update our state
+        if (prevProps.url !== this.props.url) {
+            await this.updateSimState(this.props.url);
         }
     }
 
@@ -93,28 +74,20 @@ class PhetSim extends React.Component<Props, State> {
                         text={this.state.errMessage}
                     />
                 )}
-                <View
-                    style={{
-                        position: "relative",
-                        width: "100%",
-                        paddingBottom: "100%",
-                        height: 0,
-                    }}
-                >
+                <View>
                     <iframe
                         ref={this.iframeRef}
                         title={this.props.description}
                         sandbox={sandboxProperties}
                         style={{
-                            width: "100%",
-                            height: "100%",
-                            position: "absolute",
+                            width: 400,
+                            height: 400,
                         }}
                         src={this.state.url?.toString()}
                         srcDoc={
                             this.state.url
                                 ? undefined
-                                : this.context.strings.simulationLocaleWarning
+                                : this.context.strings.simulationLoadFail
                         }
                         allow="fullscreen"
                     />
@@ -165,17 +138,48 @@ class PhetSim extends React.Component<Props, State> {
         }
     };
 
-    async showLocaleWarning(locale: string): Promise<boolean> {
+    makeSafeUrl(urlString: string): URL | null {
+        let url: URL | null = null;
+        if (URL.canParse(urlString)) {
+            url = new URL(urlString);
+            url.searchParams.set("locale", this.locale);
+            if (url.origin !== "https://phet.colorado.edu") {
+                url = null;
+            }
+        }
+        return url;
+    }
+
+    async updateSimState(urlString: string) {
+        const url = this.makeSafeUrl(urlString);
+        if (url) {
+            // Display an error if we fail to load the resource
+            const validLink = await fetch(url)
+                .then((response: Response) => response.ok)
+                .catch(() => false);
+            if (validLink) {
+                const showLocaleWarning = await this.showLocaleWarning(url);
+                this.setState({
+                    url: url,
+                    errMessage: showLocaleWarning
+                        ? this.context.strings.simulationLocaleWarning
+                        : null,
+                });
+                return;
+            }
+        }
+        this.setState({url: null, errMessage: null});
+    }
+
+    async showLocaleWarning(url: URL): Promise<boolean> {
         // Do not show a locale warning on an invalid URL
-        if (!this.state.url) {
+        if (!url) {
             return false;
         }
         // Grab the simulation name
         const phetRegex: RegExp =
             /https:\/\/phet\.colorado\.edu\/sims\/html\/([a-zA-Z0-9-]+)\/.*/g;
-        const match: RegExpExecArray | null = phetRegex.exec(
-            this.state.url.toString(),
-        );
+        const match: RegExpExecArray | null = phetRegex.exec(url.toString());
         // Do not show a locale warning on a non-simulation URL
         if (!match) {
             return false;

From ccdc783cd710023beda2c5a4e25146230063ca4c Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 11:15:21 -0700
Subject: [PATCH 18/33] Remove package.json changes

---
 packages/perseus/package.json | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/perseus/package.json b/packages/perseus/package.json
index bdb224b70a..79c8da5d03 100644
--- a/packages/perseus/package.json
+++ b/packages/perseus/package.json
@@ -48,14 +48,6 @@
         "@khanacademy/perseus-linter": "^1.1.0",
         "@khanacademy/pure-markdown": "^0.3.7",
         "@khanacademy/simple-markdown": "^0.13.0",
-        "@khanacademy/kas": "^0.3.9",
-        "@khanacademy/kmath": "^0.1.12",
-        "@khanacademy/math-input": "^19.2.0",
-        "@khanacademy/perseus-core": "1.4.2",
-        "@khanacademy/perseus-linter": "^0.4.0",
-        "@khanacademy/pure-markdown": "^0.3.5",
-        "@khanacademy/simple-markdown": "^0.12.0",
-        "@khanacademy/wonder-blocks-icon-button": "^5.3.3",
         "@use-gesture/react": "^10.2.27",
         "mafs": "0.19.0",
         "uuid": "^10.0.0"

From 424fce9f39d1a6d5a17711b9c9d0330f65caa950 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 11:39:43 -0700
Subject: [PATCH 19/33] Address PR comments

---
 packages/perseus/package.json             |  3 +-
 packages/perseus/src/widgets/phet-sim.tsx | 68 ++++++++++++-----------
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/packages/perseus/package.json b/packages/perseus/package.json
index 79c8da5d03..508a950a4d 100644
--- a/packages/perseus/package.json
+++ b/packages/perseus/package.json
@@ -41,8 +41,8 @@
     },
     "dependencies": {
         "@khanacademy/kas": "^0.3.11",
-        "@khanacademy/kmath": "^0.1.13",
         "@khanacademy/keypad-context": "^1.0.0",
+        "@khanacademy/kmath": "^0.1.13",
         "@khanacademy/math-input": "^21.0.0",
         "@khanacademy/perseus-core": "1.5.0",
         "@khanacademy/perseus-linter": "^1.1.0",
@@ -61,6 +61,7 @@
         "@khanacademy/wonder-blocks-dropdown": "5.3.0",
         "@khanacademy/wonder-blocks-form": "^4.7.1",
         "@khanacademy/wonder-blocks-icon": "4.1.0",
+        "@khanacademy/wonder-blocks-icon-button": "^5.3.3",
         "@khanacademy/wonder-blocks-layout": "2.0.32",
         "@khanacademy/wonder-blocks-link": "6.1.1",
         "@khanacademy/wonder-blocks-pill": "2.2.1",
diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index 3652c1372b..d2b2e6c940 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -20,8 +20,12 @@ import type {WidgetExports, WidgetProps} from "../types";
 type RenderProps = PerseusPhetSimWidgetOptions; // transform = _.identity
 type Props = WidgetProps<RenderProps, PerseusPhetSimWidgetOptions>;
 
+// For returning user input, but currently the PhET widget
+// does not support accessing user input
+type UserInput = null;
+
 type State = {
-    errMessage: string | null;
+    bannerMessage: string | null;
     url: URL | null;
 };
 
@@ -29,21 +33,21 @@ type State = {
 class PhetSim extends React.Component<Props, State> {
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
-    private readonly iframeRef: React.RefObject<HTMLIFrameElement>;
+    private readonly iframeRef: React.RefObject<HTMLIFrameElement> =
+        React.createRef<HTMLIFrameElement>();
     private readonly locale: string;
 
     state: State = {
         url: null,
-        errMessage: null,
+        bannerMessage: null,
     };
 
     constructor(props) {
         super(props);
         this.locale = this.getPhetCompatibleLocale(getDependencies().kaLocale);
-        this.iframeRef = React.createRef<HTMLIFrameElement>();
     }
 
-    getUserInput: () => any = () => {
+    getUserInput(): UserInput {
         return null;
     };
 
@@ -60,18 +64,18 @@ class PhetSim extends React.Component<Props, State> {
 
     render(): React.ReactNode {
         // We sandbox the iframe so that we allowlist only the functionality
-        // that we need. This makes it a bit safer in case some content
-        // creator "went wild".
+        // that we need. This makes it safer to present third-party content
+        // from the PhET website.
         // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
         const sandboxProperties = "allow-same-origin allow-scripts";
         return (
             <View>
-                {this.state.errMessage && (
+                {this.state.bannerMessage && (
                     // TODO(anna): Make this banner focusable
                     <Banner
                         kind="warning"
                         layout="floating"
-                        text={this.state.errMessage}
+                        text={this.state.bannerMessage}
                     />
                 )}
                 <View>
@@ -138,37 +142,37 @@ class PhetSim extends React.Component<Props, State> {
         }
     };
 
+    // Setting URL to null will display an error message in the iframe
     makeSafeUrl(urlString: string): URL | null {
-        let url: URL | null = null;
-        if (URL.canParse(urlString)) {
-            url = new URL(urlString);
-            url.searchParams.set("locale", this.locale);
-            if (url.origin !== "https://phet.colorado.edu") {
-                url = null;
-            }
+        if (!URL.canParse(urlString)) {
+            return null;
+        }
+        const url = new URL(urlString);
+        if (url.origin !== "https://phet.colorado.edu") {
+            return null;
         }
+        url.searchParams.set("locale", this.locale);
         return url;
     }
 
     async updateSimState(urlString: string) {
         const url = this.makeSafeUrl(urlString);
-        if (url) {
-            // Display an error if we fail to load the resource
-            const validLink = await fetch(url)
-                .then((response: Response) => response.ok)
-                .catch(() => false);
-            if (validLink) {
-                const showLocaleWarning = await this.showLocaleWarning(url);
-                this.setState({
-                    url: url,
-                    errMessage: showLocaleWarning
-                        ? this.context.strings.simulationLocaleWarning
-                        : null,
-                });
-                return;
-            }
+        if (url === null) {
+            this.setState({url: null, bannerMessage: null});
+            return;
+        }
+        const response = await fetch(url);
+        if (!response.ok) {
+            this.setState({url: null, bannerMessage: null});
+            return;
         }
-        this.setState({url: null, errMessage: null});
+        const showLocaleWarning = await this.showLocaleWarning(url);
+        this.setState({
+            url: url,
+            bannerMessage: showLocaleWarning
+                ? this.context.strings.simulationLocaleWarning
+                : null,
+        });
     }
 
     async showLocaleWarning(url: URL): Promise<boolean> {

From c70aec2a1f3e6b5e3bf6ca193483988c3eafe3e6 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 11:44:44 -0700
Subject: [PATCH 20/33] Make prettier

---
 packages/perseus/src/widgets/phet-sim.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index d2b2e6c940..ab97dd24ec 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -49,7 +49,7 @@ class PhetSim extends React.Component<Props, State> {
 
     getUserInput(): UserInput {
         return null;
-    };
+    }
 
     async componentDidMount() {
         await this.updateSimState(this.props.url);

From b439aed0cf5c41808266157527167adad176c2d5 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 12:03:38 -0700
Subject: [PATCH 21/33] Add error test

---
 .../widgets/__testdata__/phet-sim.testdata.ts | 19 ++++++++++++++++++
 .../src/widgets/__tests__/phet-sim.test.ts    | 20 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
index 82b2d9778e..10db98251c 100644
--- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -19,3 +19,22 @@ export const question1: PerseusRenderer = {
         },
     },
 };
+
+export const nonPhetUrl: PerseusRenderer = {
+    content: "This widget should render an error!\n[[\u2603 phet-sim 2]]\n",
+    images: {},
+    widgets: {
+        "phet-sim 2": {
+            graded: false,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "phet-sim",
+            options: {
+                url: "https://google.com/",
+                description: "Google homepage",
+                static: false,
+            },
+            alignment: "default",
+        },
+    },
+};
\ No newline at end of file
diff --git a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
index 600a394691..c100f2cef7 100644
--- a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
+++ b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
@@ -1,6 +1,8 @@
+import {screen} from "@testing-library/react";
+
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/phet-sim.testdata";
+import {nonPhetUrl, question1} from "../__testdata__/phet-sim.testdata";
 
 import {renderQuestion} from "./renderQuestion";
 
@@ -16,6 +18,22 @@ describe("phet-sim widget", () => {
                 json: () => Promise.resolve({test: 100}),
             }),
         ) as jest.Mock;
+        global.URL.canParse = jest.fn(() => true) as jest.Mock;
+    });
+
+    it("should reject non-PhET domain", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        renderQuestion(nonPhetUrl, apiOptions);
+
+        // Assert
+        expect(
+            screen.queryByText("Sorry, this simulation cannot load."),
+        ).toBeVisible();
     });
 
     it("should snapshot", () => {

From 1916140cc8f3dd79fcd6eb17426452b1dc564da5 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 12:45:44 -0700
Subject: [PATCH 22/33] Remove the error test temporarily

---
 .../widgets/__testdata__/phet-sim.testdata.ts | 19 -------------------
 .../src/widgets/__tests__/phet-sim.test.ts    | 15 ---------------
 2 files changed, 34 deletions(-)

diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
index 10db98251c..49e86141ac 100644
--- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -18,23 +18,4 @@ export const question1: PerseusRenderer = {
             alignment: "default",
         },
     },
-};
-
-export const nonPhetUrl: PerseusRenderer = {
-    content: "This widget should render an error!\n[[\u2603 phet-sim 2]]\n",
-    images: {},
-    widgets: {
-        "phet-sim 2": {
-            graded: false,
-            version: {major: 0, minor: 0},
-            static: false,
-            type: "phet-sim",
-            options: {
-                url: "https://google.com/",
-                description: "Google homepage",
-                static: false,
-            },
-            alignment: "default",
-        },
-    },
 };
\ No newline at end of file
diff --git a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
index c100f2cef7..7c42bb07fe 100644
--- a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
+++ b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
@@ -21,21 +21,6 @@ describe("phet-sim widget", () => {
         global.URL.canParse = jest.fn(() => true) as jest.Mock;
     });
 
-    it("should reject non-PhET domain", () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-
-        // Act
-        renderQuestion(nonPhetUrl, apiOptions);
-
-        // Assert
-        expect(
-            screen.queryByText("Sorry, this simulation cannot load."),
-        ).toBeVisible();
-    });
-
     it("should snapshot", () => {
         // Arrange
         const apiOptions: APIOptions = {

From bbdc4663a1d7bccb25e634b216baa03bd329b3e6 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 12:49:28 -0700
Subject: [PATCH 23/33] Remove unnecessary imports

---
 packages/perseus/src/widgets/__tests__/phet-sim.test.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
index 7c42bb07fe..21d2efee73 100644
--- a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
+++ b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
@@ -1,8 +1,6 @@
-import {screen} from "@testing-library/react";
-
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import {nonPhetUrl, question1} from "../__testdata__/phet-sim.testdata";
+import {question1} from "../__testdata__/phet-sim.testdata";
 
 import {renderQuestion} from "./renderQuestion";
 

From fce9cff194e4ab832a41deb1f4ecaa1c1c6f0839 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 12:55:49 -0700
Subject: [PATCH 24/33] Make prettier

---
 packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
index 49e86141ac..82b2d9778e 100644
--- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -18,4 +18,4 @@ export const question1: PerseusRenderer = {
             alignment: "default",
         },
     },
-};
\ No newline at end of file
+};

From 38d454578af07bc6d9663bdcc538b825c3332ed4 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 14:35:13 -0700
Subject: [PATCH 25/33] Remove direct use of older Promise-based APIs

---
 packages/perseus/src/widgets/phet-sim.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index ab97dd24ec..caad913a59 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -89,7 +89,7 @@ class PhetSim extends React.Component<Props, State> {
                         }}
                         src={this.state.url?.toString()}
                         srcDoc={
-                            this.state.url
+                            this.state.url !== null
                                 ? undefined
                                 : this.context.strings.simulationLoadFail
                         }
@@ -189,13 +189,17 @@ class PhetSim extends React.Component<Props, State> {
             return false;
         }
         const simName = match[1];
-        const locales = await fetch(
+        const response = await fetch(
             `https://phet.colorado.edu/sims/html/${simName}/latest/string-map.json`,
-        )
-            .then((response: Response) => response.json())
-            .then((json: any) => {
-                return Object.keys(json);
-            });
+        );
+        if (!response.ok) {
+            return false;
+        }
+        const responseJson = await response.json();
+        if (!responseJson) {
+            return false;
+        }
+        const locales = Object.keys(responseJson);
 
         // Only display a locale warning if there is no fallback language
         const baseLocale = this.locale.split("_")[0];

From be76aba6115b72b635847c5622a3a470957b5b73 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 14:35:19 -0700
Subject: [PATCH 26/33] Update tests

---
 .../widgets/__testdata__/phet-sim.testdata.ts | 19 ++++
 .../__snapshots__/phet-sim.test.ts.snap       | 99 +++++++++++++++++++
 .../src/widgets/__tests__/phet-sim.test.ts    | 54 +++++++++-
 3 files changed, 167 insertions(+), 5 deletions(-)
 create mode 100644 packages/perseus/src/widgets/__tests__/__snapshots__/phet-sim.test.ts.snap

diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
index 82b2d9778e..988f188f6e 100644
--- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -19,3 +19,22 @@ export const question1: PerseusRenderer = {
         },
     },
 };
+
+export const nonPhetUrl: PerseusRenderer = {
+    content: "This should display an error!\n[[\u2603 phet-sim 2]]\n",
+    images: {},
+    widgets: {
+        "phet-sim 2": {
+            graded: false,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "phet-sim",
+            options: {
+                url: "https://google.com/",
+                description: "Google",
+                static: false,
+            },
+            alignment: "default",
+        },
+    },
+};
\ No newline at end of file
diff --git a/packages/perseus/src/widgets/__tests__/__snapshots__/phet-sim.test.ts.snap b/packages/perseus/src/widgets/__tests__/__snapshots__/phet-sim.test.ts.snap
new file mode 100644
index 0000000000..18af042cd5
--- /dev/null
+++ b/packages/perseus/src/widgets/__tests__/__snapshots__/phet-sim.test.ts.snap
@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`phet-sim widget should snapshot on mobile: first mobile render 1`] = `
+<div>
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
+  >
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="0"
+    >
+      <div
+        class="paragraph"
+      >
+        Do this fun PhET simulation! A projectile data lab!
+
+        <div
+          class="perseus-widget-container widget-nohighlight widget-block"
+        >
+          <div
+            class="default_xu2jcg"
+          >
+            <div
+              class="default_xu2jcg"
+            >
+              <iframe
+                allow="fullscreen"
+                sandbox="allow-same-origin allow-scripts"
+                srcdoc="Sorry, this simulation cannot load."
+                style="width: 400px; height: 400px;"
+                title="Projectile Data Lab"
+              />
+            </div>
+            <button
+              aria-disabled="false"
+              aria-label="Fullscreen"
+              class="button_vr44p2-o_O-shared_188r6j6-o_O-default_b6j6uv-o_O-inlineStyles_oz9y1l"
+              type="button"
+            >
+              <span
+                class="svg_1q6jc65-o_O-icon_1521uiv-o_O-inlineStyles_xbmduj"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`phet-sim widget should snapshot: first render 1`] = `
+<div>
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
+  >
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="0"
+    >
+      <div
+        class="paragraph"
+      >
+        Do this fun PhET simulation! A projectile data lab!
+
+        <div
+          class="perseus-widget-container widget-nohighlight widget-block"
+        >
+          <div
+            class="default_xu2jcg"
+          >
+            <div
+              class="default_xu2jcg"
+            >
+              <iframe
+                allow="fullscreen"
+                sandbox="allow-same-origin allow-scripts"
+                srcdoc="Sorry, this simulation cannot load."
+                style="width: 400px; height: 400px;"
+                title="Projectile Data Lab"
+              />
+            </div>
+            <button
+              aria-disabled="false"
+              aria-label="Fullscreen"
+              class="button_vr44p2-o_O-shared_188r6j6-o_O-default_b6j6uv-o_O-inlineStyles_oz9y1l"
+              type="button"
+            >
+              <span
+                class="svg_1q6jc65-o_O-icon_1521uiv-o_O-inlineStyles_xbmduj"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
index 21d2efee73..1208aafab0 100644
--- a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
+++ b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
@@ -1,6 +1,8 @@
+import {screen, waitFor} from "@testing-library/react";
+
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/phet-sim.testdata";
+import {nonPhetUrl, question1} from "../__testdata__/phet-sim.testdata";
 
 import {renderQuestion} from "./renderQuestion";
 
@@ -13,13 +15,18 @@ describe("phet-sim widget", () => {
         );
         global.fetch = jest.fn(() =>
             Promise.resolve({
-                json: () => Promise.resolve({test: 100}),
+                json: () =>
+                    Promise.resolve({
+                        en: {stringConstant: "localized string"},
+                    }),
+                ok: true,
             }),
         ) as jest.Mock;
         global.URL.canParse = jest.fn(() => true) as jest.Mock;
     });
 
-    it("should snapshot", () => {
+    // Snapshots a widget with URL = null, before componentDidMount runs
+    it("should snapshot", async () => {
         // Arrange
         const apiOptions: APIOptions = {
             isMobile: false,
@@ -32,7 +39,8 @@ describe("phet-sim widget", () => {
         expect(container).toMatchSnapshot("first render");
     });
 
-    it("should snapshot on mobile", () => {
+    // Snapshots a widget with URL = null, before componentDidMount runs
+    it("should snapshot on mobile", async () => {
         // Arrange
         const apiOptions: APIOptions = {
             isMobile: true,
@@ -45,5 +53,41 @@ describe("phet-sim widget", () => {
         expect(container).toMatchSnapshot("first mobile render");
     });
 
-    //There isn't testable behavior for this widget
+    it("should display with valid PhET URL", async () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        //const {container} = renderQuestion(question1, apiOptions);
+        renderQuestion(question1, apiOptions);
+
+        // Assert
+        //await waitFor(() => expect(container).toMatchSnapshot("first render"));
+        await waitFor(() => {
+            expect(screen.queryByTitle("Projectile Data Lab")).toHaveAttribute(
+                "src",
+                "https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html?locale=en",
+            );
+        });
+    });
+
+    it("should display an error for a non-PhET URL", async () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        renderQuestion(nonPhetUrl, apiOptions);
+
+        // Assert
+        await waitFor(() => {
+            expect(screen.queryByTitle("Google")).toHaveAttribute(
+                "srcDoc",
+                "Sorry, this simulation cannot load.",
+            );
+        });
+    });
 });

From 2538ea2554eeff19a448b51ae304b531572c176a Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 14:37:09 -0700
Subject: [PATCH 27/33] Make prettier

---
 packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
index 988f188f6e..b26ac23bee 100644
--- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts
@@ -37,4 +37,4 @@ export const nonPhetUrl: PerseusRenderer = {
             alignment: "default",
         },
     },
-};
\ No newline at end of file
+};

From 6ae18214a648a69a2a82755765d2a9928580d6ee Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 14:41:49 -0700
Subject: [PATCH 28/33] Remove unnecessary comments

---
 packages/perseus/src/widgets/__tests__/phet-sim.test.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
index 1208aafab0..42eeff25f8 100644
--- a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
+++ b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
@@ -60,11 +60,9 @@ describe("phet-sim widget", () => {
         };
 
         // Act
-        //const {container} = renderQuestion(question1, apiOptions);
         renderQuestion(question1, apiOptions);
 
         // Assert
-        //await waitFor(() => expect(container).toMatchSnapshot("first render"));
         await waitFor(() => {
             expect(screen.queryByTitle("Projectile Data Lab")).toHaveAttribute(
                 "src",

From c655233f5b469778bc20678692e19fb0cbdabc44 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 15:32:08 -0700
Subject: [PATCH 29/33] Add makeSafeUrl tests

---
 .../__snapshots__/phet-sim.test.ts.snap       | 99 -------------------
 .../src/widgets/__tests__/phet-sim.test.ts    | 56 +++++------
 packages/perseus/src/widgets/phet-sim.tsx     | 28 +++---
 3 files changed, 42 insertions(+), 141 deletions(-)
 delete mode 100644 packages/perseus/src/widgets/__tests__/__snapshots__/phet-sim.test.ts.snap

diff --git a/packages/perseus/src/widgets/__tests__/__snapshots__/phet-sim.test.ts.snap b/packages/perseus/src/widgets/__tests__/__snapshots__/phet-sim.test.ts.snap
deleted file mode 100644
index 18af042cd5..0000000000
--- a/packages/perseus/src/widgets/__tests__/__snapshots__/phet-sim.test.ts.snap
+++ /dev/null
@@ -1,99 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`phet-sim widget should snapshot on mobile: first mobile render 1`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        Do this fun PhET simulation! A projectile data lab!
-
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="default_xu2jcg"
-          >
-            <div
-              class="default_xu2jcg"
-            >
-              <iframe
-                allow="fullscreen"
-                sandbox="allow-same-origin allow-scripts"
-                srcdoc="Sorry, this simulation cannot load."
-                style="width: 400px; height: 400px;"
-                title="Projectile Data Lab"
-              />
-            </div>
-            <button
-              aria-disabled="false"
-              aria-label="Fullscreen"
-              class="button_vr44p2-o_O-shared_188r6j6-o_O-default_b6j6uv-o_O-inlineStyles_oz9y1l"
-              type="button"
-            >
-              <span
-                class="svg_1q6jc65-o_O-icon_1521uiv-o_O-inlineStyles_xbmduj"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`phet-sim widget should snapshot: first render 1`] = `
-<div>
-  <div
-    class="perseus-renderer perseus-renderer-responsive"
-  >
-    <div
-      class="paragraph"
-      data-perseus-paragraph-index="0"
-    >
-      <div
-        class="paragraph"
-      >
-        Do this fun PhET simulation! A projectile data lab!
-
-        <div
-          class="perseus-widget-container widget-nohighlight widget-block"
-        >
-          <div
-            class="default_xu2jcg"
-          >
-            <div
-              class="default_xu2jcg"
-            >
-              <iframe
-                allow="fullscreen"
-                sandbox="allow-same-origin allow-scripts"
-                srcdoc="Sorry, this simulation cannot load."
-                style="width: 400px; height: 400px;"
-                title="Projectile Data Lab"
-              />
-            </div>
-            <button
-              aria-disabled="false"
-              aria-label="Fullscreen"
-              class="button_vr44p2-o_O-shared_188r6j6-o_O-default_b6j6uv-o_O-inlineStyles_oz9y1l"
-              type="button"
-            >
-              <span
-                class="svg_1q6jc65-o_O-icon_1521uiv-o_O-inlineStyles_xbmduj"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
index 42eeff25f8..4d909f6551 100644
--- a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
+++ b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
@@ -3,6 +3,7 @@ import {screen, waitFor} from "@testing-library/react";
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
 import {nonPhetUrl, question1} from "../__testdata__/phet-sim.testdata";
+import PhetSim, {makeSafeUrl} from "../phet-sim";
 
 import {renderQuestion} from "./renderQuestion";
 
@@ -25,34 +26,6 @@ describe("phet-sim widget", () => {
         global.URL.canParse = jest.fn(() => true) as jest.Mock;
     });
 
-    // Snapshots a widget with URL = null, before componentDidMount runs
-    it("should snapshot", async () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: false,
-        };
-
-        // Act
-        const {container} = renderQuestion(question1, apiOptions);
-
-        // Assert
-        expect(container).toMatchSnapshot("first render");
-    });
-
-    // Snapshots a widget with URL = null, before componentDidMount runs
-    it("should snapshot on mobile", async () => {
-        // Arrange
-        const apiOptions: APIOptions = {
-            isMobile: true,
-        };
-
-        // Act
-        const {container} = renderQuestion(question1, apiOptions);
-
-        // Assert
-        expect(container).toMatchSnapshot("first mobile render");
-    });
-
     it("should display with valid PhET URL", async () => {
         // Arrange
         const apiOptions: APIOptions = {
@@ -88,4 +61,31 @@ describe("phet-sim widget", () => {
             );
         });
     });
+
+    it("should make the URL with the correct locale", async () => {
+        // Arrange
+        const baseUrl =
+            "https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html";
+        const locale = "fr";
+
+        // Act
+        const url: URL | null = makeSafeUrl(baseUrl, locale);
+
+        // Assert
+        expect(url?.toString()).toBe(
+            "https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html?locale=fr",
+        );
+    });
+
+    it("should erase a non-PhET URL", async () => {
+        // Arrange
+        const baseUrl = "https://google.com";
+        const locale = "en";
+
+        // Act
+        const url: URL | null = makeSafeUrl(baseUrl, locale);
+
+        // Assert
+        expect(url).toBe(null);
+    });
 });
diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index caad913a59..36b6bada73 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -142,21 +142,8 @@ class PhetSim extends React.Component<Props, State> {
         }
     };
 
-    // Setting URL to null will display an error message in the iframe
-    makeSafeUrl(urlString: string): URL | null {
-        if (!URL.canParse(urlString)) {
-            return null;
-        }
-        const url = new URL(urlString);
-        if (url.origin !== "https://phet.colorado.edu") {
-            return null;
-        }
-        url.searchParams.set("locale", this.locale);
-        return url;
-    }
-
     async updateSimState(urlString: string) {
-        const url = this.makeSafeUrl(urlString);
+        const url = makeSafeUrl(urlString, this.locale);
         if (url === null) {
             this.setState({url: null, bannerMessage: null});
             return;
@@ -212,6 +199,19 @@ class PhetSim extends React.Component<Props, State> {
     }
 }
 
+// Setting URL to null will display an error message in the iframe
+export const makeSafeUrl = (urlString: string, locale: string): URL | null => {
+    if (!URL.canParse(urlString)) {
+        return null;
+    }
+    const url = new URL(urlString);
+    if (url.origin !== "https://phet.colorado.edu") {
+        return null;
+    }
+    url.searchParams.set("locale", locale);
+    return url;
+};
+
 export default {
     name: "phet-sim",
     displayName: "PhET Simulation",

From 37675906a8f225549485a781de37a15660b132de Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 15:34:28 -0700
Subject: [PATCH 30/33] Lint

---
 packages/perseus/src/widgets/__tests__/phet-sim.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
index 4d909f6551..37d746dc78 100644
--- a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
+++ b/packages/perseus/src/widgets/__tests__/phet-sim.test.ts
@@ -3,7 +3,7 @@ import {screen, waitFor} from "@testing-library/react";
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
 import {nonPhetUrl, question1} from "../__testdata__/phet-sim.testdata";
-import PhetSim, {makeSafeUrl} from "../phet-sim";
+import {makeSafeUrl} from "../phet-sim";
 
 import {renderQuestion} from "./renderQuestion";
 

From 267c645a4d1c9ce7d47042cbe33b2d2cd292bd91 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 16:28:10 -0700
Subject: [PATCH 31/33] Remove unnecessary View tag

---
 packages/perseus/src/widgets/phet-sim.tsx | 36 +++++++++++------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-sim.tsx
index 36b6bada73..0d13c22d6b 100644
--- a/packages/perseus/src/widgets/phet-sim.tsx
+++ b/packages/perseus/src/widgets/phet-sim.tsx
@@ -30,7 +30,7 @@ type State = {
 };
 
 /* This renders the PhET sim */
-class PhetSim extends React.Component<Props, State> {
+export class PhetSim extends React.Component<Props, State> {
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
     private readonly iframeRef: React.RefObject<HTMLIFrameElement> =
@@ -78,24 +78,22 @@ class PhetSim extends React.Component<Props, State> {
                         text={this.state.bannerMessage}
                     />
                 )}
-                <View>
-                    <iframe
-                        ref={this.iframeRef}
-                        title={this.props.description}
-                        sandbox={sandboxProperties}
-                        style={{
-                            width: 400,
-                            height: 400,
-                        }}
-                        src={this.state.url?.toString()}
-                        srcDoc={
-                            this.state.url !== null
-                                ? undefined
-                                : this.context.strings.simulationLoadFail
-                        }
-                        allow="fullscreen"
-                    />
-                </View>
+                <iframe
+                    ref={this.iframeRef}
+                    title={this.props.description}
+                    sandbox={sandboxProperties}
+                    style={{
+                        width: 400,
+                        height: 400,
+                    }}
+                    src={this.state.url?.toString()}
+                    srcDoc={
+                        this.state.url !== null
+                            ? undefined
+                            : this.context.strings.simulationLoadFail
+                    }
+                    allow="fullscreen"
+                />
                 <IconButton
                     icon={cornersOutIcon}
                     onClick={() => {

From 1338f6c515b372cc548910d8c7b32613ff3675b8 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 16:28:32 -0700
Subject: [PATCH 32/33] Refactor story into newer format

---
 .../__stories__/phet-sim-editor.stories.tsx   | 21 ++++++++++---------
 .../src/widgets/phet-sim-editor.tsx           |  2 +-
 .../widgets/__stories__/phet-sim.stories.tsx  | 20 +++++++++++-------
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx
index 292a2758d6..c6d948ca82 100644
--- a/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx
+++ b/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx
@@ -1,18 +1,19 @@
 import {action} from "@storybook/addon-actions";
-import * as React from "react";
 
-import PhetSimEditor from "../phet-sim-editor";
+import {PhetSimEditor} from "../phet-sim-editor";
 
-type StoryArgs = Record<any, any>;
+import type {Meta, StoryObj} from "@storybook/react";
 
-type Story = {
-    title: string;
+const meta: Meta<typeof PhetSimEditor> = {
+    component: PhetSimEditor,
+    title: "PerseusEditor/Widgets/PhET Simulation Editor",
 };
 
-export default {
-    title: "PerseusEditor/Widgets/PhET Simulation Editor",
-} as Story;
+export default meta;
+type Story = StoryObj<typeof PhetSimEditor>;
 
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <PhetSimEditor onChange={action("onChange")} />;
+export const Primary: Story = {
+    args: {
+        onChange: action("onChange"),
+    },
 };
diff --git a/packages/perseus-editor/src/widgets/phet-sim-editor.tsx b/packages/perseus-editor/src/widgets/phet-sim-editor.tsx
index 95fb4b0295..01284acca9 100644
--- a/packages/perseus-editor/src/widgets/phet-sim-editor.tsx
+++ b/packages/perseus-editor/src/widgets/phet-sim-editor.tsx
@@ -7,7 +7,7 @@ import BlurInput from "../components/blur-input";
 
 type PhetSimEditorProps = any;
 
-class PhetSimEditor extends React.Component<PhetSimEditorProps> {
+export class PhetSimEditor extends React.Component<PhetSimEditorProps> {
     static propTypes = {
         ...Changeable.propTypes,
     };
diff --git a/packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx b/packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx
index eddf0fcafa..7c4710cb8c 100644
--- a/packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx
+++ b/packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx
@@ -1,14 +1,18 @@
-import * as React from "react";
+import {PhetSim} from "../phet-sim";
 
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/phet-sim.testdata";
+import type {Meta, StoryObj} from "@storybook/react";
 
-export default {
-    title: "Perseus/Widgets/PhetSim",
+const meta: Meta<typeof PhetSim> = {
+    component: PhetSim,
+    title: "Perseus/Widgets/PhET Simulation",
 };
 
-type StoryArgs = Record<any, any>;
+export default meta;
+type Story = StoryObj<typeof PhetSim>;
 
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
+export const Primary: Story = {
+    args: {
+        url: "https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html",
+        description: "Projectile Data Lab",
+    },
 };

From fbdc96bb3e865ae12ac82d527bf01783fc47d590 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Mon, 19 Aug 2024 16:31:13 -0700
Subject: [PATCH 33/33] Fix import issue

---
 .../src/widgets/__stories__/phet-sim-editor.stories.tsx         | 2 +-
 packages/perseus-editor/src/widgets/phet-sim-editor.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx
index c6d948ca82..62dcafc601 100644
--- a/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx
+++ b/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx
@@ -1,6 +1,6 @@
 import {action} from "@storybook/addon-actions";
 
-import {PhetSimEditor} from "../phet-sim-editor";
+import PhetSimEditor from "../phet-sim-editor";
 
 import type {Meta, StoryObj} from "@storybook/react";
 
diff --git a/packages/perseus-editor/src/widgets/phet-sim-editor.tsx b/packages/perseus-editor/src/widgets/phet-sim-editor.tsx
index 01284acca9..95fb4b0295 100644
--- a/packages/perseus-editor/src/widgets/phet-sim-editor.tsx
+++ b/packages/perseus-editor/src/widgets/phet-sim-editor.tsx
@@ -7,7 +7,7 @@ import BlurInput from "../components/blur-input";
 
 type PhetSimEditorProps = any;
 
-export class PhetSimEditor extends React.Component<PhetSimEditorProps> {
+class PhetSimEditor extends React.Component<PhetSimEditorProps> {
     static propTypes = {
         ...Changeable.propTypes,
     };