frontAnswerer/src/widget.tsx

import WidgetApp from "./WidgetApp";
import { Root, createRoot } from "react-dom/client";


let root: Root | undefined = undefined;

const widget = {
    create({ selector, quizId }: {
        selector: string;
        quizId: string;
    }) {
        const element = document.getElementById(selector);
        if (!element) throw new Error("Element for widget doesn't exist");

        root = createRoot(element);

        root.render(<WidgetApp quizId={quizId} />);
    },
    unmount() {
        if (root) root.unmount();
    }
};

export default widget;

/*
<script type="module">
    import widget from ".../widget.js";

    widget.create({
        selector: "widget-container",
        quizId: "...",
    })
</script>
*/