@doenet/assignment-viewer 0.1.0-alpha1 → 0.1.0-alpha2

package/dist/index.js

@@ -1861,6 +1861,9 @@ function generateNewSelectAttempt({
   const source = state.source;
   const numToSelect = source.numToSelect;
   const numChildren = state.latestChildStates.length;
+  if (numChildren === 0) {
+    return { finalQuestionCounter: initialQuestionCounter, state };
+  }
   const numVariantsPerChild = state.latestChildStates.map(
     (a) => calcNumVariantsFromState(a, numActivityVariants)
   );
@@ -1868,7 +1871,7 @@ function generateNewSelectAttempt({
   if (numToSelect > totalNumOptions) {
     if (source.selectByVariant) {
       throw Error(
-        "The specified number to select of a select activity is larger than the number of available variants."
+        `For a select activity, "number to select" is ${numToSelect.toString()}, which is larger than the number of available variants (${totalNumOptions.toString()}).`
       );
     } else {
       const totalNumChildVariants = numVariantsPerChild.reduce(
@@ -1876,11 +1879,11 @@ function generateNewSelectAttempt({
       );
       if (numToSelect > totalNumChildVariants) {
         throw Error(
-          "The specified number to select of a select activity is larger than the number of available activities."
+          `For a select activity, "number to select" is ${numToSelect.toString()}, which is larger than the number of available activities (${totalNumOptions.toString()}).`
         );
       } else {
         throw Error(
-          'The specified number to select of a select activity is larger than the number of available activities. Turning on "select by variant" will add enough options for the select activity to function.'
+          `For a select activity, "number to select" is ${numToSelect.toString()}, which is larger than the number of available activities (${totalNumOptions.toString()}). (Turning on "select by variant" will add enough options for the select activity to function.)`
         );
       }
     }
@@ -3337,7 +3340,18 @@ function getItemSequence(state) {
   } else {
     const numAttempts = state.attempts.length;
     if (numAttempts === 0) {
-      return [state.id];
+      if (state.latestChildStates.length === 0) {
+        return [];
+      } else {
+        const prelimResult = state.latestChildStates.flatMap(
+          (a) => getItemSequence(a)
+        );
+        if (state.type === "sequence") {
+          return prelimResult;
+        } else {
+          return prelimResult.slice(0, state.source.numToSelect);
+        }
+      }
     }
     return state.attempts[numAttempts - 1].activities.flatMap(
       (a) => getItemSequence(a)
@@ -3366,49 +3380,6 @@ function calcNumVariantsFromState(state, numActivityVariants) {
   }
   return numVariants;
 }
-function getUninitializedActivityState(source) {
-  switch (source.type) {
-    case "singleDoc": {
-      return {
-        type: "singleDoc",
-        id: source.id,
-        parentId: null,
-        source,
-        initialVariant: 0,
-        creditAchieved: 0,
-        attempts: []
-      };
-    }
-    case "select": {
-      return {
-        type: "select",
-        id: source.id,
-        parentId: null,
-        source,
-        initialVariant: 0,
-        creditAchieved: 0,
-        attempts: [],
-        latestChildStates: source.items.map(
-          getUninitializedActivityState
-        )
-      };
-    }
-    case "sequence": {
-      return {
-        type: "sequence",
-        id: source.id,
-        parentId: null,
-        source,
-        initialVariant: 0,
-        creditAchieved: 0,
-        attempts: [],
-        latestChildStates: source.items.map(
-          getUninitializedActivityState
-        )
-      };
-    }
-  }
-}
 function validateIds(source) {
   if (source.id.includes("|")) {
     throw Error(`Id "${source.id}" contains a "|".`);
@@ -3424,6 +3395,25 @@ function validateIds(source) {
   }
   return idsFound;
 }
+function gatherDocumentStructure(source) {
+  if (source.type === "singleDoc") {
+    return {
+      numActivityVariants: { [source.id]: source.numVariants ?? 1 },
+      questionCounts: {
+        [source.id]: source.baseLevelComponentCounts ? (source.baseLevelComponentCounts.question ?? 0) + (source.baseLevelComponentCounts.problem ?? 0) + (source.baseLevelComponentCounts.exercise ?? 0) : 1
+      }
+    };
+  } else {
+    const numActivityVariants = {};
+    const questionCounts = {};
+    for (const item of source.items) {
+      const res = gatherDocumentStructure(item);
+      Object.assign(numActivityVariants, res.numActivityVariants);
+      Object.assign(questionCounts, res.questionCounts);
+    }
+    return { numActivityVariants, questionCounts };
+  }
+}
 function validateStateAndSource(state, source) {
   if (!isExportedActivityState(state) || !isActivitySource(source)) {
     return false;
@@ -3511,13 +3501,6 @@ function propagateStateChangeToRoot({
     id: newParentState.id
   });
 }
-function isDocumentStructureData(obj) {
-  const typeObj = obj;
-  return (
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    typeObj !== null && typeof typeObj === "object" && typeof typeObj.activityId === "string" && typeof typeObj.docId === "string" && typeof typeObj.args === "object" && Array.isArray(typeObj.args.allPossibleVariants) && typeObj.args.allPossibleVariants.every((v) => typeof v === "string") && typeof typeObj.args.baseLevelComponentCounts === "object" && typeof typeObj.args.success === "boolean"
-  );
-}
 function isSingleDocReportStateMessage(obj) {
   const typeObj = obj;
   return (
@@ -3679,7 +3662,6 @@ function SelectActivity({
   showAnswerTitles = false,
   state,
   reportScoreAndStateCallback,
-  documentStructureCallback,
   checkRender,
   checkHidden,
   allowItemAttemptButtons = false,
@@ -3708,7 +3690,6 @@ function SelectActivity({
             darkMode,
             showAnswerTitles,
             reportScoreAndStateCallback,
-            documentStructureCallback,
             checkRender,
             checkHidden,
             allowItemAttemptButtons,
@@ -3723,37 +3704,11 @@ function SelectActivity({
       selectedIds.push(activity.id);
     }
   }
-  const unselectedActivities = state.latestChildStates.filter((activity) => !selectedIds.includes(activity.id)).map((activity) => /* @__PURE__ */ jsxRuntimeExports$1.jsx(
-    Activity,
-    {
-      state: activity,
-      flags,
-      baseId,
-      forceDisable,
-      forceShowCorrectness,
-      forceShowSolution,
-      forceUnsuppressCheckwork,
-      linkSettings,
-      darkMode,
-      showAnswerTitles,
-      reportScoreAndStateCallback,
-      documentStructureCallback,
-      checkRender: () => false,
-      checkHidden,
-      hasRenderedCallback,
-      reportVisibility,
-      reportVisibilityCallback
-    },
-    activity.id
-  ));
-  return /* @__PURE__ */ jsxRuntimeExports$1.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports$1.jsx(
     "div",
     {
       hidden: !checkRender(state),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports$1.jsx("div", { children: selectedActivities }),
-        /* @__PURE__ */ jsxRuntimeExports$1.jsx("div", { hidden: true, children: unselectedActivities })
-      ]
+      children: /* @__PURE__ */ jsxRuntimeExports$1.jsx("div", { children: selectedActivities })
     },
     // Replace the activity in the DOM when a new attempt is created,
     // except preserve it if just a single item was replaced with the other items staying unchanged.
@@ -3774,7 +3729,6 @@ function SequenceActivity({
   showAnswerTitles = false,
   state,
   reportScoreAndStateCallback,
-  documentStructureCallback,
   checkRender,
   checkHidden,
   allowItemAttemptButtons = false,
@@ -3802,37 +3756,6 @@ function SequenceActivity({
             darkMode,
             showAnswerTitles,
             reportScoreAndStateCallback,
-            documentStructureCallback,
-            checkRender,
-            checkHidden,
-            allowItemAttemptButtons,
-            generateNewItemAttempt,
-            hasRenderedCallback,
-            reportVisibility,
-            reportVisibilityCallback
-          },
-          activity.id
-        )
-      );
-    }
-  } else {
-    for (const activity of state.latestChildStates) {
-      activityList.push(
-        /* @__PURE__ */ jsxRuntimeExports$1.jsx(
-          Activity,
-          {
-            state: activity,
-            flags,
-            baseId,
-            forceDisable,
-            forceShowCorrectness,
-            forceShowSolution,
-            forceUnsuppressCheckwork,
-            linkSettings,
-            darkMode,
-            showAnswerTitles,
-            reportScoreAndStateCallback,
-            documentStructureCallback,
             checkRender,
             checkHidden,
             allowItemAttemptButtons,
@@ -53464,7 +53387,6 @@ function SingleDocActivity({
   showAnswerTitles = false,
   state,
   reportScoreAndStateCallback,
-  documentStructureCallback,
   checkRender,
   checkHidden,
   allowItemAttemptButtons = false,
@@ -53544,9 +53466,6 @@ function SingleDocActivity({
         initialState: initialDoenetState,
         initializeCounters: initialCounters,
         reportScoreAndStateCallback,
-        documentStructureCallback: (args) => {
-          documentStructureCallback(args);
-        },
         initializedCallback: () => {
           setRendered(true);
           hasRenderedCallback(state.id);
@@ -53587,7 +53506,6 @@ function Activity({
   showAnswerTitles = false,
   state,
   reportScoreAndStateCallback,
-  documentStructureCallback,
   checkRender,
   checkHidden,
   allowItemAttemptButtons = false,
@@ -53612,7 +53530,6 @@ function Activity({
           showAnswerTitles,
           state,
           reportScoreAndStateCallback,
-          documentStructureCallback,
           checkRender,
           checkHidden,
           allowItemAttemptButtons,
@@ -53638,7 +53555,6 @@ function Activity({
           showAnswerTitles,
           state,
           reportScoreAndStateCallback,
-          documentStructureCallback,
           checkRender,
           checkHidden,
           allowItemAttemptButtons,
@@ -53664,7 +53580,6 @@ function Activity({
           showAnswerTitles,
           state,
           reportScoreAndStateCallback,
-          documentStructureCallback,
           checkRender,
           checkHidden,
           allowItemAttemptButtons,
@@ -53679,33 +53594,13 @@ function Activity({
 }
 function activityStateReducer(state, action) {
   switch (action.type) {
-    case "reset": {
-      return getUninitializedActivityState(action.source);
-    }
     case "initialize": {
-      const initialState = initializeActivityState({
+      return initializeActivityState({
         source: state.source,
         variant: action.variantIndex,
         parentId: null,
         numActivityVariants: action.numActivityVariants
       });
-      const { state: newActivityState } = generateNewActivityAttempt({
-        state: initialState,
-        numActivityVariants: action.numActivityVariants,
-        initialQuestionCounter: action.initialQuestionCounter,
-        questionCounts: action.questionCounts,
-        parentAttempt: 1
-      });
-      if (action.allowSaveState) {
-        const scoreByItem = extractActivityItemCredit(newActivityState);
-        window.postMessage({
-          score: newActivityState.creditAchieved,
-          scoreByItem,
-          subject: "SPLICE.reportScoreByItem",
-          activityId: action.baseId
-        });
-      }
-      return newActivityState;
     }
     case "set": {
       const scoreByItem = extractActivityItemCredit(action.state);
@@ -53721,7 +53616,11 @@ function activityStateReducer(state, action) {
     }
     case "generateNewActivityAttempt": {
       let newActivityState;
+      let firstAttempt = false;
       if (!action.id || action.id === state.id) {
+        if (state.attempts.length === 0) {
+          firstAttempt = true;
+        }
         ({ state: newActivityState } = generateNewActivityAttempt({
           state,
           numActivityVariants: action.numActivityVariants,
@@ -53740,20 +53639,29 @@ function activityStateReducer(state, action) {
       }
       if (action.allowSaveState) {
         const scoreByItem = extractActivityItemCredit(newActivityState);
-        const sourceHash = hash(newActivityState.source);
-        window.postMessage({
-          state: {
-            state: pruneActivityStateForSave(
-              newActivityState,
-              false
-            ),
-            sourceHash
-          },
-          score: newActivityState.creditAchieved,
-          scoreByItem,
-          subject: "SPLICE.reportScoreAndState",
-          activityId: action.baseId
-        });
+        if (firstAttempt) {
+          window.postMessage({
+            score: newActivityState.creditAchieved,
+            scoreByItem,
+            subject: "SPLICE.reportScoreByItem",
+            activityId: action.baseId
+          });
+        } else {
+          const sourceHash = hash(newActivityState.source);
+          window.postMessage({
+            state: {
+              state: pruneActivityStateForSave(
+                newActivityState,
+                false
+              ),
+              sourceHash
+            },
+            score: newActivityState.creditAchieved,
+            scoreByItem,
+            subject: "SPLICE.reportScoreAndState",
+            activityId: action.baseId
+          });
+        }
       }
       return newActivityState;
     }
@@ -53836,63 +53744,28 @@ function Viewer({
   showAnswerTitles = false,
   showTitle = true
 }) {
-  const numSourceDocs = useMemo$4(() => getNumSourceDocs(source), [source]);
   const [errMsg, setErrMsg] = useState$3(null);
-  const [numActivityVariants, setNumActivityVariants] = useState$3({});
-  const [questionCounts, setQuestionCounts] = useState$3(
-    {}
-  );
-  const [initialized, setInitialized] = useState$3(false);
-  const [needNewAssignmentState, setNeedNewAssignmentState] = useState$3(false);
-  useEffect$5(() => {
-    setInitialized(false);
-    setNumActivityVariants({});
-    setQuestionCounts({});
-  }, [activityId, userId, source]);
-  useEffect$5(() => {
+  const initialPass = useRef$6(true);
+  const { numActivityVariants, questionCounts } = useMemo$4(() => {
     try {
       validateIds(source);
+      return gatherDocumentStructure(source);
     } catch (e2) {
       const message = e2 instanceof Error ? e2.message : "";
       setErrMsg(`Error in activity source: ${message}`);
+      return { numActivityVariants: {}, questionCounts: {} };
     }
   }, [source]);
   const [activityState, activityStateDispatch] = useReducer(
     activityStateReducer,
-    source,
-    getUninitializedActivityState
+    {
+      source,
+      variant: initialVariantIndex,
+      parentId: null,
+      numActivityVariants
+    },
+    initializeActivityState
   );
-  useEffect$5(() => {
-    if (!initialized && Object.keys(numActivityVariants).length === numSourceDocs && Object.keys(questionCounts).length === numSourceDocs) {
-      if (needNewAssignmentState) {
-        try {
-          activityStateDispatch({
-            type: "initialize",
-            variantIndex: initialVariantIndex,
-            numActivityVariants,
-            initialQuestionCounter: 1,
-            questionCounts,
-            allowSaveState: flags.allowSaveState,
-            baseId: activityId
-          });
-          setNeedNewAssignmentState(false);
-        } catch (e2) {
-          const message = e2 instanceof Error ? e2.message : "";
-          setErrMsg(`Error in activity: ${message}`);
-        }
-      }
-      setInitialized(true);
-    }
-  }, [
-    numActivityVariants,
-    questionCounts,
-    numSourceDocs,
-    flags.allowSaveState,
-    initialized,
-    activityId,
-    needNewAssignmentState,
-    initialVariantIndex
-  ]);
   const itemSequence = getItemSequence(activityState);
   const numItems = itemSequence.length;
   const [currentItemIdx, setCurrentItemIdx] = useState$3(0);
@@ -53914,36 +53787,36 @@ function Viewer({
   }
   const checkRender = useCallback$5(
     (state) => {
-      if (!initialized) {
-        return false;
-      }
       if (state.type === "singleDoc") {
         return itemsToRender.includes(state.id);
       } else {
         return true;
       }
     },
-    [initialized, itemsToRender]
+    [itemsToRender]
   );
   const checkHidden = useCallback$5(
     (state) => {
-      if (!initialized) {
-        return true;
-      }
       if (state.type === "singleDoc") {
         return paginate && currentItemId !== state.id;
       } else {
         return false;
       }
     },
-    [initialized, currentItemId, paginate]
+    [currentItemId, paginate]
   );
   useEffect$5(() => {
-    activityStateDispatch({
-      type: "reset",
-      source
-    });
-  }, [activityId, source]);
+    if (initialPass.current) {
+      initialPass.current = false;
+    } else {
+      activityStateDispatch({
+        type: "initialize",
+        source,
+        variantIndex: initialVariantIndex,
+        numActivityVariants
+      });
+    }
+  }, [activityId, source, initialVariantIndex, numActivityVariants]);
   useEffect$5(() => {
     const listenersAdded = [];
     const timeoutIdsAdded = [];
@@ -54012,6 +53885,21 @@ function Viewer({
         timeoutIdsAdded.push(timeoutId);
       });
     }
+    function getNewActivityState() {
+      try {
+        activityStateDispatch({
+          type: "generateNewActivityAttempt",
+          numActivityVariants,
+          initialQuestionCounter: 1,
+          questionCounts,
+          allowSaveState: flags.allowSaveState,
+          baseId: activityId
+        });
+      } catch (e2) {
+        const message = e2 instanceof Error ? e2.message : "";
+        setErrMsg(`Error in activity: ${message}`);
+      }
+    }
     if (flags.allowLoadState) {
       loadState().then((state) => {
         if (isActivityState(state)) {
@@ -54022,7 +53910,7 @@ function Viewer({
             baseId: activityId
           });
         } else if (state === null) {
-          setNeedNewAssignmentState(true);
+          getNewActivityState();
         } else {
           setErrMsg(`Invalid state returned`);
         }
@@ -54032,7 +53920,7 @@ function Viewer({
         );
       });
     } else {
-      setNeedNewAssignmentState(true);
+      getNewActivityState();
     }
     return () => {
       for (const listener3 of listenersAdded) {
@@ -54047,7 +53935,9 @@ function Viewer({
     flags.allowSaveState,
     activityId,
     userId,
-    source
+    source,
+    numActivityVariants,
+    questionCounts
   ]);
   function clickNext() {
     setCurrentItemIdx((was) => Math.min(numItems - 1, was + 1));
@@ -54055,29 +53945,6 @@ function Viewer({
   function clickPrevious() {
     setCurrentItemIdx((was) => Math.max(0, was - 1));
   }
-  function documentStructureCallback(data) {
-    if (isDocumentStructureData(data)) {
-      if (data.args.success) {
-        const docId = data.docId.split("|")[0];
-        setNumActivityVariants((was) => {
-          if (docId in was) {
-            return was;
-          }
-          const obj = { ...was };
-          obj[docId] = data.args.allPossibleVariants.length;
-          return obj;
-        });
-        setQuestionCounts((was) => {
-          if (docId in was) {
-            return was;
-          }
-          const obj = { ...was };
-          obj[docId] = (data.args.baseLevelComponentCounts.question ?? 0) + (data.args.baseLevelComponentCounts.problem ?? 0) + (data.args.baseLevelComponentCounts.exercise ?? 0);
-          return obj;
-        });
-      }
-    }
-  }
   function reportScoreAndStateCallback(msg) {
     if (isSingleDocReportStateMessage(msg)) {
       activityStateDispatch({
@@ -54091,37 +53958,35 @@ function Viewer({
     }
   }
   function generateNewItemAttempt(id2, initialQuestionCounter) {
-    if (initialized) {
-      activityStateDispatch({
-        type: "generateNewActivityAttempt",
-        id: id2,
-        numActivityVariants,
-        initialQuestionCounter,
-        questionCounts,
-        allowSaveState: flags.allowSaveState,
-        baseId: activityId
-      });
-      setItemsRendered((was) => {
-        const idx = was.indexOf(id2);
-        if (idx === -1) {
-          return was;
-        } else {
-          const arr = [...was];
-          arr.splice(idx, 1);
-          return arr;
-        }
-      });
-      setItemsToRender((was) => {
-        const idx = was.indexOf(id2);
-        if (idx === -1) {
-          return was;
-        } else {
-          const arr = [...was];
-          arr.splice(idx, 1);
-          return arr;
-        }
-      });
-    }
+    activityStateDispatch({
+      type: "generateNewActivityAttempt",
+      id: id2,
+      numActivityVariants,
+      initialQuestionCounter,
+      questionCounts,
+      allowSaveState: flags.allowSaveState,
+      baseId: activityId
+    });
+    setItemsRendered((was) => {
+      const idx = was.indexOf(id2);
+      if (idx === -1) {
+        return was;
+      } else {
+        const arr = [...was];
+        arr.splice(idx, 1);
+        return arr;
+      }
+    });
+    setItemsToRender((was) => {
+      const idx = was.indexOf(id2);
+      if (idx === -1) {
+        return was;
+      } else {
+        const arr = [...was];
+        arr.splice(idx, 1);
+        return arr;
+      }
+    });
   }
   function hasRenderedCallback(id2) {
     setItemsRendered((was) => {
@@ -54185,27 +54050,25 @@ function Viewer({
       }
     );
   }
-  if (initialized && !needNewAssignmentState) {
-    if (paginate) {
-      if (!itemsRendered.includes(currentItemId)) {
-        addItemToRender(currentItemId);
+  if (paginate) {
+    if (!itemsRendered.includes(currentItemId)) {
+      addItemToRender(currentItemId);
+    } else {
+      const nextItemId = itemSequence[currentItemIdx + 1];
+      if (currentItemIdx < numItems - 1 && !itemsRendered.includes(nextItemId)) {
+        addItemToRender(nextItemId);
       } else {
-        const nextItemId = itemSequence[currentItemIdx + 1];
-        if (currentItemIdx < numItems - 1 && !itemsRendered.includes(nextItemId)) {
-          addItemToRender(nextItemId);
-        } else {
-          const prevItemId = itemSequence[currentItemIdx - 1];
-          if (currentItemIdx > 0 && !itemsRendered.includes(prevItemId)) {
-            addItemToRender(prevItemId);
-          }
+        const prevItemId = itemSequence[currentItemIdx - 1];
+        if (currentItemIdx > 0 && !itemsRendered.includes(prevItemId)) {
+          addItemToRender(prevItemId);
         }
       }
-    } else {
-      for (const id2 of itemSequence) {
-        if (!itemsRendered.includes(id2) && itemsVisible.includes(id2)) {
-          addItemToRender(id2);
-          break;
-        }
+    }
+  } else {
+    for (const id2 of itemSequence) {
+      if (!itemsRendered.includes(id2) && itemsVisible.includes(id2)) {
+        addItemToRender(id2);
+        break;
       }
     }
   }
@@ -54223,7 +54086,7 @@ function Viewer({
             borderRadius: "10px",
             padding: "5px 20px"
           },
-          disabled: currentItemIdx === 0,
+          disabled: currentItemIdx <= 0,
           children: "Previous"
         }
       ),
@@ -54241,7 +54104,7 @@ function Viewer({
             borderRadius: "10px",
             padding: "5px 20px"
           },
-          disabled: currentItemIdx === numItems - 1,
+          disabled: currentItemIdx >= numItems - 1,
           children: "Next"
         }
       ),
@@ -54249,7 +54112,7 @@ function Viewer({
         "button",
         {
           onClick: generateActivityAttempt,
-          disabled: !initialized,
+          disabled: numItems === 0,
           style: {
             marginLeft: "30px",
             backgroundColor: "lightgray",
@@ -54263,7 +54126,7 @@ function Viewer({
     /* @__PURE__ */ jsxRuntimeExports$1.jsx(
       "div",
       {
-        hidden: itemsRendered.length > 0,
+        hidden: itemsRendered.length > 0 || numItems === 0,
         style: { marginLeft: "20px", marginTop: "20px" },
         children: "Initializing..."
       }
@@ -54281,7 +54144,6 @@ function Viewer({
         darkMode,
         showAnswerTitles,
         state: activityState,
-        documentStructureCallback,
         reportScoreAndStateCallback,
         checkRender,
         checkHidden,
@@ -54294,19 +54156,6 @@ function Viewer({
     )
   ] });
 }
-function getNumSourceDocs(activity) {
-  switch (activity.type) {
-    case "singleDoc": {
-      return 1;
-    }
-    case "select": {
-      return activity.items.reduce((a, c2) => a + getNumSourceDocs(c2), 0);
-    }
-    case "sequence": {
-      return activity.items.reduce((a, c2) => a + getNumSourceDocs(c2), 0);
-    }
-  }
-}
 const defaultFlags = {
   showCorrectness: true,
   readOnly: false,
@@ -54404,17 +54253,20 @@ function ActivityViewer({
 class ErrorBoundary extends Component {
   constructor(props) {
     super(props);
-    this.state = { hasError: false };
+    this.state = { hasError: false, message: "" };
   }
-  static getDerivedStateFromError(_2) {
-    return { hasError: true };
+  static getDerivedStateFromError(error) {
+    return { hasError: true, message: error.message };
   }
   componentDidCatch(error, errorInfo) {
     console.error("Uncaught error", error, errorInfo);
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ jsxRuntimeExports$1.jsx("h1", { children: "Sorry, something went wrong" });
+      return /* @__PURE__ */ jsxRuntimeExports$1.jsxs("div", { style: { marginLeft: "20px" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports$1.jsx("h1", { children: "An error occurred" }),
+        /* @__PURE__ */ jsxRuntimeExports$1.jsx("p", { children: this.state.message })
+      ] });
     }
     return this.props.children;
   }

package/package.json

@@ -2,7 +2,7 @@
     "name": "@doenet/assignment-viewer",
     "private": false,
     "description": "View assignments from questions written in DoenetML",
-    "version": "0.1.0-alpha1",
+    "version": "0.1.0-alpha2",
     "license": "AGPL-3.0-or-later",
     "homepage": "https://github.com/Doenet/assignment-viewer#readme",
     "type": "module",