@vue-skuilder/edit-ui 0.1.11 → 0.1.12

package/dist/edit-ui.es.js

@@ -1,8 +1,472 @@
-import { defineComponent, defineAsyncComponent, ref, computed, onMounted, onUnmounted, watch, nextTick, onBeforeUnmount, markRaw, createElementBlock, openBlock, Fragment, renderList, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, createVNode, withCtx, createTextVNode, normalizeStyle, createBlock, withDirectives, normalizeClass, vModelText, withModifiers, withKeys } from "vue";
+import { defineComponent, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createElementVNode, createCommentVNode, defineAsyncComponent, ref, computed, onMounted, onUnmounted, watch, nextTick, onBeforeUnmount, markRaw, normalizeStyle, withDirectives, normalizeClass, vModelText, withModifiers, withKeys } from "vue";
+import { getDataLayer, DocType, Navigators, validateProcessorConfig, importParsedCards } from "@vue-skuilder/db";
 import { AudioAutoPlayer, RadioMultipleChoice, useViewable, useQuestionView, Question, splitByDelimiters, containsComponent, UserInputNumber, TFSelect, alertUser, SkldrMouseTrap, UserInputString, TagsInput, CardBrowser, getCurrentUser, SkMouseTrap } from "@vue-skuilder/common-ui";
 import { FieldType, DataShapeName, Status, Validators, log, NameSpacer, fieldConverters, validationFunctionToVuetifyRule, isValidBulkFormat, parseBulkTextToCards } from "@vue-skuilder/common";
-import { getDataLayer, validateProcessorConfig, importParsedCards } from "@vue-skuilder/db";
 import { defineStore } from "pinia";
+const _sfc_main$r = defineComponent({
+  name: "NavigationStrategyList",
+  props: {
+    strategies: {
+      type: Array,
+      required: true
+    },
+    defaultStrategyId: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["edit", "delete", "update:defaultStrategy"],
+  methods: {
+    getDisplayConfig(strategy) {
+      if (!strategy.serializedData) return "No configuration";
+      try {
+        const config = JSON.parse(strategy.serializedData);
+        if (Array.isArray(config)) {
+          return `${config.length} cards in sequence`;
+        }
+        return Object.keys(config).map((key) => `${key}: ${config[key]}`).join(", ");
+      } catch {
+        return strategy.serializedData;
+      }
+    }
+  }
+});
+const _export_sfc$1 = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1$r = { class: "navigation-strategy-list" };
+const _hoisted_2$f = { key: 0 };
+const _hoisted_3$b = { class: "d-flex" };
+function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_v_radio = resolveComponent("v-radio");
+  const _component_v_list_item_title = resolveComponent("v-list-item-title");
+  const _component_v_list_item_subtitle = resolveComponent("v-list-item-subtitle");
+  const _component_v_icon = resolveComponent("v-icon");
+  const _component_v_btn = resolveComponent("v-btn");
+  const _component_v_list_item = resolveComponent("v-list-item");
+  const _component_v_list = resolveComponent("v-list");
+  const _component_v_radio_group = resolveComponent("v-radio-group");
+  return openBlock(), createElementBlock("div", _hoisted_1$r, [
+    createVNode(_component_v_radio_group, {
+      "model-value": _ctx.defaultStrategyId,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:defaultStrategy", $event))
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_v_list, null, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.strategies, (strategy) => {
+              return openBlock(), createBlock(_component_v_list_item, {
+                key: strategy._id,
+                lines: "three"
+              }, {
+                prepend: withCtx(() => [
+                  createVNode(_component_v_radio, {
+                    value: strategy._id
+                  }, null, 8, ["value"])
+                ]),
+                append: withCtx(() => [
+                  createElementVNode("div", _hoisted_3$b, [
+                    createVNode(_component_v_btn, {
+                      icon: "",
+                      size: "small",
+                      title: "Edit Strategy (coming soon)",
+                      class: "mr-1",
+                      disabled: ""
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_v_icon, null, {
+                          default: withCtx(() => _cache[3] || (_cache[3] = [
+                            createTextVNode("mdi-pencil")
+                          ])),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(_component_v_btn, {
+                      icon: "",
+                      size: "small",
+                      title: "Delete Strategy",
+                      class: "mr-1",
+                      onClick: ($event) => _ctx.$emit("delete", strategy)
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_v_icon, null, {
+                          default: withCtx(() => _cache[4] || (_cache[4] = [
+                            createTextVNode("mdi-delete")
+                          ])),
+                          _: 1
+                        })
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"])
+                  ])
+                ]),
+                default: withCtx(() => [
+                  createVNode(_component_v_list_item_title, { class: "text-h6" }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(strategy.name), 1)
+                    ]),
+                    _: 2
+                  }, 1024),
+                  createVNode(_component_v_list_item_subtitle, null, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(strategy.description), 1)
+                    ]),
+                    _: 2
+                  }, 1024),
+                  createVNode(_component_v_list_item_subtitle, { class: "strategy-details mt-2" }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", null, [
+                        _cache[1] || (_cache[1] = createElementVNode("strong", null, "Type:", -1)),
+                        createTextVNode(" " + toDisplayString(strategy.implementingClass), 1)
+                      ]),
+                      strategy.serializedData ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
+                        _cache[2] || (_cache[2] = createElementVNode("strong", null, "Configuration:", -1)),
+                        createTextVNode(" " + toDisplayString(_ctx.getDisplayConfig(strategy)), 1)
+                      ])) : createCommentVNode("", true)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1024);
+            }), 128))
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["model-value"])
+  ]);
+}
+const NavigationStrategyList = /* @__PURE__ */ _export_sfc$1(_sfc_main$r, [["render", _sfc_render$r], ["__scopeId", "data-v-3a73a1db"]]);
+const _sfc_main$q = defineComponent({
+  name: "NavigationStrategyEditor",
+  components: {
+    NavigationStrategyList
+  },
+  props: {
+    courseId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      strategies: [],
+      loading: true,
+      showDeleteConfirm: false,
+      strategyToDelete: null,
+      showCreateDialog: false,
+      newStrategy: {
+        name: "",
+        description: "",
+        cardIds: ""
+      },
+      defaultStrategyId: null
+    };
+  },
+  async created() {
+    await this.loadStrategies();
+  },
+  methods: {
+    async loadStrategies() {
+      this.loading = true;
+      try {
+        const dataLayer = getDataLayer();
+        const courseDB = dataLayer.getCourseDB(this.courseId);
+        const [strategies, courseConfig] = await Promise.all([
+          courseDB.getAllNavigationStrategies(),
+          courseDB.getCourseConfig()
+        ]);
+        this.strategies = strategies;
+        this.defaultStrategyId = courseConfig.defaultNavigationStrategyId || null;
+      } catch (error) {
+        console.error("Failed to load navigation strategies:", error);
+        this.strategies = [
+          {
+            _id: `NAVIGATION_STRATEGY-ELO`,
+            docType: DocType.NAVIGATION_STRATEGY,
+            name: "ELO",
+            description: "Default ELO-based navigation strategy",
+            implementingClass: Navigators.ELO,
+            course: this.courseId,
+            serializedData: "",
+            author: "system"
+          }
+        ];
+      }
+      this.loading = false;
+    },
+    async setDefaultStrategy(strategyId) {
+      try {
+        this.loading = true;
+        const dataLayer = getDataLayer();
+        const courseDB = dataLayer.getCourseDB(this.courseId);
+        const config = await courseDB.getCourseConfig();
+        config.defaultNavigationStrategyId = strategyId;
+        await courseDB.updateCourseConfig(config);
+        this.defaultStrategyId = strategyId;
+        alert("Default strategy updated!");
+      } catch (error) {
+        console.error("Failed to set default strategy:", error);
+        alert("Error updating default strategy. See console for details.");
+      } finally {
+        this.loading = false;
+      }
+    },
+    openCreateDialog() {
+      this.newStrategy = { name: "", description: "", cardIds: "" };
+      this.showCreateDialog = true;
+    },
+    async saveNewStrategy() {
+      if (!this.newStrategy.name || !this.newStrategy.cardIds) {
+        alert("Strategy Name and Card IDs are required.");
+        return;
+      }
+      this.loading = true;
+      try {
+        const dataLayer = getDataLayer();
+        const userDB = dataLayer.getUserDB();
+        const userName = userDB.getUsername();
+        const courseDB = dataLayer.getCourseDB(this.courseId);
+        const cardIdArray = this.newStrategy.cardIds.split(/[\n,]+/).map((id) => id.trim()).filter((id) => id);
+        const strategyData = {
+          _id: `NAVIGATION_STRATEGY-${Date.now()}`,
+          docType: DocType.NAVIGATION_STRATEGY,
+          name: this.newStrategy.name,
+          description: this.newStrategy.description,
+          implementingClass: Navigators.HARDCODED,
+          author: userName,
+          course: this.courseId,
+          serializedData: JSON.stringify(cardIdArray)
+        };
+        await courseDB.addNavigationStrategy(strategyData);
+        this.showCreateDialog = false;
+        await this.loadStrategies();
+      } catch (error) {
+        console.error("Failed to save new strategy:", error);
+        alert("Error saving strategy. See console for details.");
+      }
+      this.loading = false;
+    },
+    editStrategy(strategy) {
+      console.log(`Editing strategy ${strategy._id} is not yet implemented`);
+    },
+    confirmDeleteStrategy(strategy) {
+      this.strategyToDelete = strategy;
+      this.showDeleteConfirm = true;
+    },
+    async deleteStrategy() {
+      if (!this.strategyToDelete) return;
+      this.loading = true;
+      try {
+        const dataLayer = getDataLayer();
+        const courseDB = dataLayer.getCourseDB(this.courseId);
+        const emptyStrategy = {
+          _id: this.strategyToDelete._id,
+          docType: DocType.NAVIGATION_STRATEGY,
+          name: "DELETED",
+          description: "This strategy has been deleted",
+          implementingClass: "",
+          course: this.courseId,
+          serializedData: ""
+        };
+        await courseDB.updateNavigationStrategy(this.strategyToDelete._id, emptyStrategy);
+        console.log(`Strategy ${this.strategyToDelete._id} marked as deleted`);
+        this.strategies = this.strategies.filter((s2) => s2._id !== this.strategyToDelete?._id);
+        this.showDeleteConfirm = false;
+        this.strategyToDelete = null;
+      } catch (error) {
+        console.error("Failed to delete navigation strategy:", error);
+      }
+      this.loading = false;
+    }
+  }
+});
+const _hoisted_1$q = { class: "navigation-strategy-editor" };
+const _hoisted_2$e = { key: 0 };
+const _hoisted_3$a = { key: 1 };
+const _hoisted_4$9 = {
+  key: 0,
+  class: "no-strategies"
+};
+function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_v_progress_circular = resolveComponent("v-progress-circular");
+  const _component_navigation_strategy_list = resolveComponent("navigation-strategy-list");
+  const _component_v_icon = resolveComponent("v-icon");
+  const _component_v_btn = resolveComponent("v-btn");
+  const _component_v_card_title = resolveComponent("v-card-title");
+  const _component_v_text_field = resolveComponent("v-text-field");
+  const _component_v_textarea = resolveComponent("v-textarea");
+  const _component_v_card_text = resolveComponent("v-card-text");
+  const _component_v_spacer = resolveComponent("v-spacer");
+  const _component_v_card_actions = resolveComponent("v-card-actions");
+  const _component_v_card = resolveComponent("v-card");
+  const _component_v_dialog = resolveComponent("v-dialog");
+  return openBlock(), createElementBlock("div", _hoisted_1$q, [
+    _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
+      createVNode(_component_v_progress_circular, {
+        indeterminate: "",
+        color: "secondary"
+      })
+    ])) : (openBlock(), createElementBlock("div", _hoisted_3$a, [
+      _cache[16] || (_cache[16] = createElementVNode("h2", { class: "text-h5 mb-4" }, "Navigation Strategies", -1)),
+      _ctx.strategies.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_4$9, _cache[7] || (_cache[7] = [
+        createElementVNode("p", null, "No navigation strategies defined for this course.", -1)
+      ]))) : (openBlock(), createBlock(_component_navigation_strategy_list, {
+        key: 1,
+        strategies: _ctx.strategies,
+        "default-strategy-id": _ctx.defaultStrategyId,
+        "onUpdate:defaultStrategy": _ctx.setDefaultStrategy,
+        onEdit: _ctx.editStrategy,
+        onDelete: _ctx.confirmDeleteStrategy
+      }, null, 8, ["strategies", "default-strategy-id", "onUpdate:defaultStrategy", "onEdit", "onDelete"])),
+      createVNode(_component_v_btn, {
+        color: "primary",
+        class: "mt-4",
+        onClick: _ctx.openCreateDialog
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_v_icon, { start: "" }, {
+            default: withCtx(() => _cache[8] || (_cache[8] = [
+              createTextVNode("mdi-plus")
+            ])),
+            _: 1
+          }),
+          _cache[9] || (_cache[9] = createTextVNode(" Add New Strategy "))
+        ]),
+        _: 1
+      }, 8, ["onClick"]),
+      createVNode(_component_v_dialog, {
+        modelValue: _ctx.showCreateDialog,
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.showCreateDialog = $event),
+        "max-width": "600px"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_v_card, null, {
+            default: withCtx(() => [
+              createVNode(_component_v_card_title, null, {
+                default: withCtx(() => _cache[10] || (_cache[10] = [
+                  createTextVNode("Create New Navigation Strategy")
+                ])),
+                _: 1
+              }),
+              createVNode(_component_v_card_text, null, {
+                default: withCtx(() => [
+                  createVNode(_component_v_text_field, {
+                    modelValue: _ctx.newStrategy.name,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.newStrategy.name = $event),
+                    label: "Strategy Name",
+                    required: ""
+                  }, null, 8, ["modelValue"]),
+                  createVNode(_component_v_text_field, {
+                    modelValue: _ctx.newStrategy.description,
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.newStrategy.description = $event),
+                    label: "Description",
+                    required: ""
+                  }, null, 8, ["modelValue"]),
+                  createVNode(_component_v_textarea, {
+                    modelValue: _ctx.newStrategy.cardIds,
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.newStrategy.cardIds = $event),
+                    label: "Card IDs",
+                    placeholder: "Enter card IDs, one per line or separated by commas",
+                    rows: "10",
+                    required: ""
+                  }, null, 8, ["modelValue"])
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_card_actions, null, {
+                default: withCtx(() => [
+                  createVNode(_component_v_spacer),
+                  createVNode(_component_v_btn, {
+                    color: "blue darken-1",
+                    text: "",
+                    onClick: _cache[3] || (_cache[3] = ($event) => _ctx.showCreateDialog = false)
+                  }, {
+                    default: withCtx(() => _cache[11] || (_cache[11] = [
+                      createTextVNode("Cancel")
+                    ])),
+                    _: 1
+                  }),
+                  createVNode(_component_v_btn, {
+                    color: "blue darken-1",
+                    text: "",
+                    onClick: _ctx.saveNewStrategy
+                  }, {
+                    default: withCtx(() => _cache[12] || (_cache[12] = [
+                      createTextVNode("Save")
+                    ])),
+                    _: 1
+                  }, 8, ["onClick"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["modelValue"]),
+      createVNode(_component_v_dialog, {
+        modelValue: _ctx.showDeleteConfirm,
+        "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.showDeleteConfirm = $event),
+        "max-width": "400px"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_v_card, null, {
+            default: withCtx(() => [
+              createVNode(_component_v_card_title, { class: "text-h5" }, {
+                default: withCtx(() => _cache[13] || (_cache[13] = [
+                  createTextVNode("Delete Strategy")
+                ])),
+                _: 1
+              }),
+              createVNode(_component_v_card_text, null, {
+                default: withCtx(() => [
+                  createTextVNode(' Are you sure you want to delete the strategy "' + toDisplayString(_ctx.strategyToDelete?.name) + '"? ', 1)
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_card_actions, null, {
+                default: withCtx(() => [
+                  createVNode(_component_v_spacer),
+                  createVNode(_component_v_btn, {
+                    color: "error",
+                    onClick: _ctx.deleteStrategy
+                  }, {
+                    default: withCtx(() => _cache[14] || (_cache[14] = [
+                      createTextVNode("Delete")
+                    ])),
+                    _: 1
+                  }, 8, ["onClick"]),
+                  createVNode(_component_v_btn, {
+                    onClick: _cache[5] || (_cache[5] = ($event) => _ctx.showDeleteConfirm = false)
+                  }, {
+                    default: withCtx(() => _cache[15] || (_cache[15] = [
+                      createTextVNode("Cancel")
+                    ])),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ]))
+  ]);
+}
+const NavigationStrategyEditor = /* @__PURE__ */ _export_sfc$1(_sfc_main$q, [["render", _sfc_render$q], ["__scopeId", "data-v-cdd166d3"]]);
 const BlanksCardDataShapes = [
   {
     name: DataShapeName.Blanks,
@@ -5769,7 +6233,7 @@ const _sfc_main$p = defineComponent({
     };
   }
 });
-const _export_sfc$1 = (sfc, props) => {
+const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
     target[key] = val;
@@ -5835,7 +6299,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("", true)
   ]);
 }
-const FillInView = /* @__PURE__ */ _export_sfc$1(_sfc_main$p, [["render", _sfc_render$p], ["__scopeId", "data-v-0aa9252e"]]);
+const FillInView = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__scopeId", "data-v-0aa9252e"]]);
 function splitText(text2, leftBound, rightBound) {
   const leftSplit = text2.split(leftBound);
   const left = leftSplit[0];
@@ -10164,7 +10628,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ]);
 }
-const PuzzleView = /* @__PURE__ */ _export_sfc$1(_sfc_main$o, [["render", _sfc_render$o]]);
+const PuzzleView = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o]]);
 const _ChessPuzzle = class _ChessPuzzle2 extends Question {
   constructor(data2) {
     super(data2);
@@ -10309,7 +10773,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const AudioParseView = /* @__PURE__ */ _export_sfc$1(_sfc_main$n, [["render", _sfc_render$n]]);
+const AudioParseView = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n]]);
 const _AudioParsingQuestion = class _AudioParsingQuestion2 extends Question {
   constructor(data2) {
     super(data2);
@@ -10391,7 +10855,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const IdentifyVocab = /* @__PURE__ */ _export_sfc$1(_sfc_main$m, [["render", _sfc_render$m]]);
+const IdentifyVocab = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
 const fields$a = [
   {
     name: "word",
@@ -10478,7 +10942,7 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const HorizontalAddition = /* @__PURE__ */ _export_sfc$1(_sfc_main$l, [["render", _sfc_render$l]]);
+const HorizontalAddition = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
 const _sfc_main$k = defineComponent({
   name: "VerbalAddition",
   components: {
@@ -10529,7 +10993,7 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const VerbalAddition = /* @__PURE__ */ _export_sfc$1(_sfc_main$k, [["render", _sfc_render$k]]);
+const VerbalAddition = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
 const data$3 = function() {
   const ret = [];
   for (let i2 = 0; i2 < 10; i2++) {
@@ -10615,7 +11079,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const HorizontalDivision = /* @__PURE__ */ _export_sfc$1(_sfc_main$j, [["render", _sfc_render$j]]);
+const HorizontalDivision = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 const fields$9 = [
   {
     name: "a",
@@ -10728,7 +11192,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const MultiplicationHorizontal = /* @__PURE__ */ _export_sfc$1(_sfc_main$i, [["render", _sfc_render$i]]);
+const MultiplicationHorizontal = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 const _sfc_main$h = defineComponent({
   name: "VerbalMultiplication",
   components: {
@@ -10779,7 +11243,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const VerbalMultiplication = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["render", _sfc_render$h]]);
+const VerbalMultiplication = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 const validator$3 = {
   instructions: "An integer between 0 and 10, inclusive.",
   test: (value) => {
@@ -10873,7 +11337,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(_component_TFSelect, { submit: _ctx.submit }, null, 8, ["submit"])
   ]);
 }
-const TrueFalse = /* @__PURE__ */ _export_sfc$1(_sfc_main$g, [["render", _sfc_render$g]]);
+const TrueFalse = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 const _EqualityTest = class _EqualityTest2 extends Question {
   /**
    * @param data a and b are seed props that will pop a question of
@@ -10963,7 +11427,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const Solve = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["render", _sfc_render$f]]);
+const Solve = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 const validator$2 = {
   instructions: "An integer between 0 and 10, inclusive.",
   test: (value) => {
@@ -11149,7 +11613,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const AngleCategorizeV = /* @__PURE__ */ _export_sfc$1(_sfc_main$e, [["render", _sfc_render$e], ["__scopeId", "data-v-57f16e4a"]]);
+const AngleCategorizeV = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e], ["__scopeId", "data-v-57f16e4a"]]);
 const validator$1 = {
   instructions: 'Must be "ACUTE", "RIGHT", "OBTUSE", "STRAIGHT", or "REFLEX".',
   test: (value) => {
@@ -31459,7 +31923,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["modelValue"])
   ]);
 }
-const CalculateSupplementaryAngles = /* @__PURE__ */ _export_sfc$1(_sfc_main$d, [["render", _sfc_render$d], ["__scopeId", "data-v-4f8ac466"]]);
+const CalculateSupplementaryAngles = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__scopeId", "data-v-4f8ac466"]]);
 const validator = {
   instructions: "Must be 2 or 3.",
   test: (value) => {
@@ -31617,7 +32081,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ]);
 }
-const defaultView = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["render", _sfc_render$c], ["__scopeId", "data-v-0452c3a5"]]);
+const defaultView = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__scopeId", "data-v-0452c3a5"]]);
 const fields$4 = [
   {
     name: "n",
@@ -37648,7 +38112,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, _hoisted_1$b))
   ]);
 }
-const SyllableSeqVis = /* @__PURE__ */ _export_sfc$1(_sfc_main$b, [["render", _sfc_render$b], ["__scopeId", "data-v-2f79c080"]]);
+const SyllableSeqVis = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b], ["__scopeId", "data-v-2f79c080"]]);
 const _sfc_main$a$1 = defineComponent({
   name: "NoteDisplay",
   props: {
@@ -37913,7 +38377,7 @@ function _sfc_render$a$1(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const NoteDisplay = /* @__PURE__ */ _export_sfc$1(_sfc_main$a$1, [["render", _sfc_render$a$1]]);
+const NoteDisplay = /* @__PURE__ */ _export_sfc(_sfc_main$a$1, [["render", _sfc_render$a$1]]);
 const _sfc_main$9$1 = defineComponent({
   // this class name *may* be used as a lookup for dynamic component.
   // eslint-disable-next-line
@@ -38184,7 +38648,7 @@ function _sfc_render$9$1(_ctx, _cache, $props, $setup, $data, $options) {
     ]))) : createCommentVNode("", true)
   ])) : createCommentVNode("", true);
 }
-const Playback = /* @__PURE__ */ _export_sfc$1(_sfc_main$9$1, [["render", _sfc_render$9$1]]);
+const Playback = /* @__PURE__ */ _export_sfc(_sfc_main$9$1, [["render", _sfc_render$9$1]]);
 const fields$3 = [
   {
     name: "Melody",
@@ -38575,7 +39039,7 @@ function _sfc_render$8$1(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ]);
 }
-const NotePlayback = /* @__PURE__ */ _export_sfc$1(_sfc_main$8$1, [["render", _sfc_render$8$1]]);
+const NotePlayback = /* @__PURE__ */ _export_sfc(_sfc_main$8$1, [["render", _sfc_render$8$1]]);
 const fields$2 = [
   {
     name: "Note",
@@ -38713,7 +39177,7 @@ function _sfc_render$7$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const TextBox$1 = /* @__PURE__ */ _export_sfc$1(_sfc_main$7$1, [["render", _sfc_render$7$1]]);
+const TextBox$1 = /* @__PURE__ */ _export_sfc(_sfc_main$7$1, [["render", _sfc_render$7$1]]);
 var Chroma = /* @__PURE__ */ ((Chroma2) => {
   Chroma2["A"] = "A";
   Chroma2["B"] = "B";
@@ -61441,7 +61905,7 @@ const _hoisted_1$6 = { id: "abc" };
 function _sfc_render$6$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$6);
 }
-const MusicScoreRenderer = /* @__PURE__ */ _export_sfc$1(_sfc_main$6$1, [["render", _sfc_render$6$1]]);
+const MusicScoreRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$6$1, [["render", _sfc_render$6$1]]);
 function fiveRandomKeys() {
   const randomKeys = [];
   for (let i2 = 0; i2 < 5; i2++) {
@@ -61511,7 +61975,7 @@ K:${_ctx.question.key}
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const IdentifyKeyView = /* @__PURE__ */ _export_sfc$1(_sfc_main$5$1, [["render", _sfc_render$5$1]]);
+const IdentifyKeyView = /* @__PURE__ */ _export_sfc(_sfc_main$5$1, [["render", _sfc_render$5$1]]);
 const keys = [
   "C",
   "G",
@@ -61640,7 +62104,7 @@ function _sfc_render$4$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const LetterQuestionView = /* @__PURE__ */ _export_sfc$1(_sfc_main$4$1, [["render", _sfc_render$4$1], ["__scopeId", "data-v-4ae4db54"]]);
+const LetterQuestionView = /* @__PURE__ */ _export_sfc(_sfc_main$4$1, [["render", _sfc_render$4$1], ["__scopeId", "data-v-4ae4db54"]]);
 const data$1 = function() {
   const ret = [];
   for (let i2 = 0; i2 < 26; i2++) {
@@ -61715,8 +62179,101 @@ __publicField(_TypeLetterQuestion, "views", [LetterQuestionView]);
 __publicField(_TypeLetterQuestion, "acceptsUserData", true);
 __publicField(_TypeLetterQuestion, "seedData", data$1());
 let TypeLetterQuestion = _TypeLetterQuestion;
+const data = function() {
+  return [
+    {
+      gameLength: 30,
+      // 30 seconds game
+      initialSpeed: 2,
+      // Initial fall speed
+      acceleration: 0.1,
+      // Speed increase per second
+      spawnInterval: 1
+      // New letter every second
+    }
+  ];
+};
+const _FallingLettersQuestion = class _FallingLettersQuestion2 extends Question {
+  constructor(data2) {
+    super(data2);
+    __publicField(this, "gameLength");
+    __publicField(this, "initialSpeed");
+    __publicField(this, "acceleration");
+    __publicField(this, "spawnInterval");
+    this.gameLength = data2[0].gameLength;
+    this.initialSpeed = data2[0].initialSpeed;
+    this.acceleration = data2[0].acceleration;
+    this.spawnInterval = data2[0].spawnInterval;
+  }
+  evaluate(a) {
+    return {
+      isCorrect: this.isCorrect(a),
+      performance: this.displayedSkill(a)
+    };
+  }
+  displayedSkill(a) {
+    if (a.win) {
+      return 1;
+    } else {
+      return a.percentage;
+    }
+  }
+  dataShapes() {
+    return _FallingLettersQuestion2.dataShapes;
+  }
+  views() {
+    return _FallingLettersQuestion2.views;
+  }
+  isCorrect(a) {
+    return a.win;
+  }
+};
+__publicField(_FallingLettersQuestion, "dataShapes", [
+  {
+    name: DataShapeName.TYPING_fallingLetters,
+    fields: [
+      {
+        name: "gameLength",
+        type: FieldType.NUMBER
+      },
+      {
+        name: "initialSpeed",
+        type: FieldType.NUMBER
+      },
+      {
+        name: "acceleration",
+        type: FieldType.NUMBER
+      },
+      {
+        name: "spawnInterval",
+        type: FieldType.NUMBER,
+        validator: {
+          instructions: "How often should a new letter spawn? (in seconds)",
+          test: (input) => {
+            if (typeof input === "string") {
+              const x = parseFloat(input);
+              if (x > 0) {
+                return { status: Status.ok, msg: "" };
+              } else {
+                return { status: Status.error, msg: "Must be greater than 0" };
+              }
+            } else {
+              return { status: Status.error, msg: "Unexpected non-string input." };
+            }
+          },
+          placeholder: "1"
+        }
+      }
+    ]
+  }
+]);
+__publicField(_FallingLettersQuestion, "views", []);
+__publicField(_FallingLettersQuestion, "acceptsUserData", true);
+__publicField(_FallingLettersQuestion, "seedData", data());
+let FallingLettersQuestion = _FallingLettersQuestion;
 const _sfc_main$3$1 = defineComponent({
   name: "FallingLettersView",
+  emits: ["emitResponse"],
   props: {
     data: {
       type: Array,
@@ -61955,99 +62512,8 @@ function _sfc_render$3$1(_ctx, _cache, $props, $setup, $data, $options) {
     _ctx.gameOver ? (openBlock(), createElementBlock("div", _hoisted_8$1$1, toDisplayString(_ctx.gameOverMessage), 1)) : createCommentVNode("", true)
   ]);
 }
-const FallingLettersView = /* @__PURE__ */ _export_sfc$1(_sfc_main$3$1, [["render", _sfc_render$3$1], ["__scopeId", "data-v-3c9f2af5"]]);
-const data = function() {
-  return [
-    {
-      gameLength: 30,
-      // 30 seconds game
-      initialSpeed: 2,
-      // Initial fall speed
-      acceleration: 0.1,
-      // Speed increase per second
-      spawnInterval: 1
-      // New letter every second
-    }
-  ];
-};
-const _FallingLettersQuestion = class _FallingLettersQuestion2 extends Question {
-  constructor(data2) {
-    super(data2);
-    __publicField(this, "gameLength");
-    __publicField(this, "initialSpeed");
-    __publicField(this, "acceleration");
-    __publicField(this, "spawnInterval");
-    this.gameLength = data2[0].gameLength;
-    this.initialSpeed = data2[0].initialSpeed;
-    this.acceleration = data2[0].acceleration;
-    this.spawnInterval = data2[0].spawnInterval;
-  }
-  evaluate(a) {
-    return {
-      isCorrect: this.isCorrect(a),
-      performance: this.displayedSkill(a)
-    };
-  }
-  displayedSkill(a) {
-    if (a.win) {
-      return 1;
-    } else {
-      return a.percentage;
-    }
-  }
-  dataShapes() {
-    return _FallingLettersQuestion2.dataShapes;
-  }
-  views() {
-    return _FallingLettersQuestion2.views;
-  }
-  isCorrect(a) {
-    return a.win;
-  }
-};
-__publicField(_FallingLettersQuestion, "dataShapes", [
-  {
-    name: DataShapeName.TYPING_fallingLetters,
-    fields: [
-      {
-        name: "gameLength",
-        type: FieldType.NUMBER
-      },
-      {
-        name: "initialSpeed",
-        type: FieldType.NUMBER
-      },
-      {
-        name: "acceleration",
-        type: FieldType.NUMBER
-      },
-      {
-        name: "spawnInterval",
-        type: FieldType.NUMBER,
-        validator: {
-          instructions: "How often should a new letter spawn? (in seconds)",
-          test: (input) => {
-            if (typeof input === "string") {
-              const x = parseFloat(input);
-              if (x > 0) {
-                return { status: Status.ok, msg: "" };
-              } else {
-                return { status: Status.error, msg: "Must be greater than 0" };
-              }
-            } else {
-              return { status: Status.error, msg: "Unexpected non-string input." };
-            }
-          },
-          placeholder: "1"
-        }
-      }
-    ]
-  }
-]);
-__publicField(_FallingLettersQuestion, "views", [FallingLettersView]);
-__publicField(_FallingLettersQuestion, "acceptsUserData", true);
-__publicField(_FallingLettersQuestion, "seedData", data());
-let FallingLettersQuestion = _FallingLettersQuestion;
+const FallingLettersView = /* @__PURE__ */ _export_sfc(_sfc_main$3$1, [["render", _sfc_render$3$1], ["__scopeId", "data-v-41b85e8b"]]);
+FallingLettersQuestion.views = [FallingLettersView];
 const typing = new CourseWare("typing", [TypeLetterQuestion, FallingLettersQuestion]);
 const _sfc_main$2$1 = defineComponent({
   name: "IdentifyVocab",
@@ -62119,7 +62585,7 @@ function _sfc_render$2$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ]);
 }
-const TextBox = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$1, [["render", _sfc_render$2$1]]);
+const TextBox = /* @__PURE__ */ _export_sfc(_sfc_main$2$1, [["render", _sfc_render$2$1]]);
 const fields = [
   {
     name: "Word",
@@ -62374,7 +62840,7 @@ function _sfc_render$1$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 512)
   ]);
 }
-const PianoRangeVisualizer = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$1, [["render", _sfc_render$1$1], ["__scopeId", "data-v-4b232a8b"]]);
+const PianoRangeVisualizer = /* @__PURE__ */ _export_sfc(_sfc_main$1$1, [["render", _sfc_render$1$1], ["__scopeId", "data-v-4b232a8b"]]);
 defineComponent({
   name: "MidiConfig",
   components: {
@@ -68699,13 +69165,6 @@ const _sfc_main$a = defineComponent({
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_text_field = resolveComponent("v-text-field");
   return openBlock(), createBlock(_component_v_text_field, {
@@ -68721,7 +69180,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: _ctx.autofocus
   }, null, 8, ["modelValue", "name", "label", "rules", "hint", "autofocus"]);
 }
-const IntegerInput = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+const IntegerInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$a, [["render", _sfc_render$a]]);
 const _sfc_main$9 = defineComponent({
   name: "MarkdownInput",
   extends: FieldInput,
@@ -68746,7 +69205,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: _ctx.autofocus
   }, null, 8, ["modelValue", "name", "label", "rules", "hint", "autofocus"]);
 }
-const MarkdownInput = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__scopeId", "data-v-28ef24ff"]]);
+const MarkdownInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["render", _sfc_render$9], ["__scopeId", "data-v-28ef24ff"]]);
 const _sfc_main$8 = defineComponent({
   name: "MediaDragDropUploader",
   extends: FieldInput,
@@ -68942,7 +69401,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     ], 34)
   ]);
 }
-const MediaDragDropUploader = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__scopeId", "data-v-e86645b6"]]);
+const MediaDragDropUploader = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$8], ["__scopeId", "data-v-e86645b6"]]);
 const _sfc_main$7 = defineComponent({
   name: "MidiInput",
   components: {
@@ -69074,7 +69533,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["modelValue", "onClickCapture"])
   ]);
 }
-const MidiInput = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+const MidiInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$7, [["render", _sfc_render$7]]);
 const _sfc_main$6 = defineComponent({
   name: "NumberInput",
   extends: FieldInput,
@@ -69112,7 +69571,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: _ctx.autofocus
   }, null, 8, ["modelValue", "name", "label", "rules", "hint", "autofocus"]);
 }
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+const NumberInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$6, [["render", _sfc_render$6]]);
 const _sfc_main$5 = defineComponent({
   name: "StringInput",
   extends: FieldInput,
@@ -69150,7 +69609,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: _ctx.autofocus
   }, null, 8, ["modelValue", "name", "label", "rules", "hint", "autofocus"]);
 }
-const StringInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+const StringInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["render", _sfc_render$5]]);
 const _sfc_main$4 = defineComponent({
   name: "ChessPuzzleInput",
   extends: FieldInput,
@@ -69211,7 +69670,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: _ctx.autofocus
   }, null, 8, ["modelValue", "name", "label", "rules", "autofocus"]);
 }
-const ChessPuzzleInput = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const ChessPuzzleInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$4, [["render", _sfc_render$4]]);
 const useDataInputFormStore = defineStore("dataInputForm", {
   state: () => ({
     dataInputForm: {
@@ -69721,7 +70180,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const DataInputForm = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const DataInputForm = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["render", _sfc_render$3]]);
 const _sfc_main$2 = defineComponent({
   name: "CardPreviewList",
   components: {
@@ -70128,7 +70587,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("", true)
   ]);
 }
-const CardPreviewList = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-41613480"]]);
+const CardPreviewList = /* @__PURE__ */ _export_sfc$1(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-41613480"]]);
 const _sfc_main$1 = defineComponent({
   name: "BulkImportView",
   components: {
@@ -70840,13 +71299,13 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const BulkImportView = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-901d842b"]]);
+const BulkImportView = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-901d842b"]]);
 const _sfc_main = defineComponent({
   name: "CourseEditor",
   components: {
     DataInputForm,
     // ComponentRegistration,
-    // NavigationStrategyEditor,
+    NavigationStrategyEditor,
     BulkImportView
   },
   props: {
@@ -70969,7 +71428,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ])),
             _: 1
           }),
-          createVNode(_component_v_tab, { value: "registration" }, {
+          createVNode(_component_v_tab, { value: "navigation" }, {
             default: withCtx(() => _cache[7] || (_cache[7] = [
               createTextVNode("Navigation")
             ])),
@@ -71057,7 +71516,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ])) : createCommentVNode("", true);
 }
-const CourseEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e1502803"]]);
+const CourseEditor = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-772fe5be"]]);
 export {
   BulkImportView,
   ChessPuzzleInput,