@vue-skuilder/common-ui 0.1.11 → 0.1.12

package/dist/assets/index.css

@@ -1,4 +1,4 @@
-.tooltip[data-v-ca46239a]{background-color:#000c;color:#fff;padding:5px;border-radius:3px;font-size:12px}.sk-mousetrap-tooltip-wrapper[data-v-5d6fb09c]{display:inline-block;position:relative}.sk-mousetrap-tooltip[data-v-5d6fb09c]{position:absolute;background-color:#000c;color:#fff;padding:2px 6px;border-radius:4px;font-size:12px;white-space:nowrap;pointer-events:none;z-index:9999}.sk-mt-tooltip-top[data-v-5d6fb09c]{bottom:100%;margin-bottom:5px;left:50%;transform:translate(-50%)}.sk-mt-tooltip-bottom[data-v-5d6fb09c]{top:100%;margin-top:5px;left:50%;transform:translate(-50%)}.sk-mt-tooltip-left[data-v-5d6fb09c]{right:100%;margin-right:5px;top:50%;transform:translateY(-50%)}.sk-mt-tooltip-right[data-v-5d6fb09c]{left:100%;margin-left:5px;top:50%;transform:translateY(-50%)}.sk-mousetrap-highlight-glow[data-v-5d6fb09c]{box-shadow:0 0 8px 2px #1976d299;transition:box-shadow .25s ease}.sk-mousetrap-highlight-scale[data-v-5d6fb09c]{transform:scale(1.03);transition:transform .25s ease}.sk-mousetrap-highlight-border[data-v-5d6fb09c]{outline:2px solid rgba(25,118,210,.8);outline-offset:2px;border-radius:4px;transition:outline .25s ease,outline-offset .25s ease}.fade-enter-active[data-v-5d6fb09c],.fade-leave-active[data-v-5d6fb09c]{transition:opacity .25s ease}.fade-enter-from[data-v-5d6fb09c],.fade-leave-to[data-v-5d6fb09c]{opacity:0}.pageSelect[data-v-a75fea7e]{max-width:60px}.selected-card[data-v-285e13bd]{background-color:#e0f2f7;border-left:4px solid #2196f3}.cursor-pointer[data-v-285e13bd]{cursor:pointer}.error-message[data-v-a4bdfdfb]{color:#f44336;padding:16px;background-color:#ffebee;border-radius:4px;margin:8px 0}.negative-interval[data-v-a4bdfdfb]{color:#f44336;font-weight:700;background-color:#ffebee;padding:2px 4px;border-radius:3px}.invalid-timestamp[data-v-a4bdfdfb]{color:#f44336;font-weight:700}.card-history-viewer[data-v-a4bdfdfb]{margin:16px 0}.timer-container[data-v-5960940a]{display:inline-flex;cursor:pointer}.cardView[data-v-a180fe1c]{padding:15px;border-radius:8px}.component-fade-enter-active[data-v-a180fe1c],.component-fade-leave-active[data-v-a180fe1c]{transition:opacity .3s ease}.component-fade-enter[data-v-a180fe1c],.component-fade-leave-to[data-v-a180fe1c]{opacity:0}.footer-controls[data-v-9ff3b701]{position:fixed;bottom:0;background-color:var(--v-background);z-index:100}.footer-right[data-v-9ff3b701]{position:fixed;bottom:0;right:0;background-color:var(--v-background);z-index:100}.correct[data-v-9ff3b701]{animation:varFade-9ff3b701 1.25s ease-out}.incorrect[data-v-9ff3b701]{animation:purpleFade-9ff3b701 1.25s ease-out}a[data-v-9ff3b701]{text-decoration:underline}@keyframes varFade-9ff3b701{0%{box-shadow:rgba(var(--r),var(--g),0,.25) 0 7px 8px -4px,rgba(var(--r),var(--g),0,.25) 0 12px 17px 2px,rgba(var(--r),var(--g),0,.25) 0 5px 22px 4px}to{box-shadow:#00960000 0 0}}@keyframes greenFade-9ff3b701{0%{box-shadow:#00960040 0 7px 8px -4px,#00960040 0 12px 17px 2px,#00960040 0 5px 22px 4px}to{box-shadow:#00960000 0 0}}@keyframes purpleFade-9ff3b701{0%{box-shadow:#73004b40 0 7px 8px -4px,#73004b40 0 12px 17px 2px,#73004b40 0 5px 22px 4px}to{box-shadow:#73004b00 0 0}}.choice[data-v-96de7172]{text-align:center;display:inline-block;border-radius:4px;padding:5px 15px;margin:10px;min-width:75px;transition:all .2s ease-in-out}.selected[data-v-96de7172]{transform:translateY(-10px) scale(1.15);z-index:1}.not-selected[data-v-96de7172]{z-index:0}.userInput[data-v-a56dcd1c]{border:none;text-align:center;border-bottom:1px black}.user-input-container[data-v-aa14961f]{display:inline-block;min-width:6em;vertical-align:baseline}.user-input-string[data-v-aa14961f]{display:inline-block;background:transparent;border:none;border-bottom:1px solid currentColor;color:currentColor;font-family:inherit;font-size:inherit;line-height:inherit;padding:0;margin:0;text-align:center;width:100%;outline:none}.user-input-string[data-v-aa14961f]:focus{border-bottom:2px solid currentColor}#input[data-v-486ac035]{display:inline-block;min-width:4em;text-align:center}.underline[data-v-486ac035]{text-decoration:underline;text-decoration-style:solid 14px}.cardView[data-v-1b728d79]{padding:15px;border-radius:8px}.component-fade-enter-active[data-v-1b728d79],.component-fade-leave-active[data-v-1b728d79]{transition:opacity .3s ease}.component-fade-enter[data-v-1b728d79],.component-fade-leave-to[data-v-1b728d79]{opacity:0}.playing[data-v-e1a0f62c]{animation:.85s ease-in-out infinite alternate pulse-e1a0f62c;z-index:1}@keyframes pulse-e1a0f62c{0%{transform:scale(1)}to{transform:scale(1.15)}}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+.tooltip[data-v-ca46239a]{background-color:#000c;color:#fff;padding:5px;border-radius:3px;font-size:12px}.sk-mousetrap-tooltip-wrapper[data-v-5d6fb09c]{display:inline-block;position:relative}.sk-mousetrap-tooltip[data-v-5d6fb09c]{position:absolute;background-color:#000c;color:#fff;padding:2px 6px;border-radius:4px;font-size:12px;white-space:nowrap;pointer-events:none;z-index:9999}.sk-mt-tooltip-top[data-v-5d6fb09c]{bottom:100%;margin-bottom:5px;left:50%;transform:translate(-50%)}.sk-mt-tooltip-bottom[data-v-5d6fb09c]{top:100%;margin-top:5px;left:50%;transform:translate(-50%)}.sk-mt-tooltip-left[data-v-5d6fb09c]{right:100%;margin-right:5px;top:50%;transform:translateY(-50%)}.sk-mt-tooltip-right[data-v-5d6fb09c]{left:100%;margin-left:5px;top:50%;transform:translateY(-50%)}.sk-mousetrap-highlight-glow[data-v-5d6fb09c]{box-shadow:0 0 8px 2px #1976d299;transition:box-shadow .25s ease}.sk-mousetrap-highlight-scale[data-v-5d6fb09c]{transform:scale(1.03);transition:transform .25s ease}.sk-mousetrap-highlight-border[data-v-5d6fb09c]{outline:2px solid rgba(25,118,210,.8);outline-offset:2px;border-radius:4px;transition:outline .25s ease,outline-offset .25s ease}.fade-enter-active[data-v-5d6fb09c],.fade-leave-active[data-v-5d6fb09c]{transition:opacity .25s ease}.fade-enter-from[data-v-5d6fb09c],.fade-leave-to[data-v-5d6fb09c]{opacity:0}.pageSelect[data-v-a75fea7e]{max-width:60px}.selected-card[data-v-285e13bd]{background-color:#e0f2f7;border-left:4px solid #2196f3}.cursor-pointer[data-v-285e13bd]{cursor:pointer}.error-message[data-v-a4bdfdfb]{color:#f44336;padding:16px;background-color:#ffebee;border-radius:4px;margin:8px 0}.negative-interval[data-v-a4bdfdfb]{color:#f44336;font-weight:700;background-color:#ffebee;padding:2px 4px;border-radius:3px}.invalid-timestamp[data-v-a4bdfdfb]{color:#f44336;font-weight:700}.card-history-viewer[data-v-a4bdfdfb]{margin:16px 0}.timer-container[data-v-5960940a]{display:inline-flex;cursor:pointer}.cardView[data-v-a180fe1c]{padding:15px;border-radius:8px}.component-fade-enter-active[data-v-a180fe1c],.component-fade-leave-active[data-v-a180fe1c]{transition:opacity .3s ease}.component-fade-enter[data-v-a180fe1c],.component-fade-leave-to[data-v-a180fe1c]{opacity:0}.footer-controls[data-v-49a65e47]{position:fixed;bottom:0;background-color:var(--v-background);z-index:100}.footer-right[data-v-49a65e47]{position:fixed;bottom:0;right:0;background-color:var(--v-background);z-index:100}.correct[data-v-49a65e47]{animation:varFade-49a65e47 1.25s ease-out}.incorrect[data-v-49a65e47]{animation:purpleFade-49a65e47 1.25s ease-out}a[data-v-49a65e47]{text-decoration:underline}@keyframes varFade-49a65e47{0%{box-shadow:rgba(var(--r),var(--g),0,.25) 0 7px 8px -4px,rgba(var(--r),var(--g),0,.25) 0 12px 17px 2px,rgba(var(--r),var(--g),0,.25) 0 5px 22px 4px}to{box-shadow:#00960000 0 0}}@keyframes greenFade-49a65e47{0%{box-shadow:#00960040 0 7px 8px -4px,#00960040 0 12px 17px 2px,#00960040 0 5px 22px 4px}to{box-shadow:#00960000 0 0}}@keyframes purpleFade-49a65e47{0%{box-shadow:#73004b40 0 7px 8px -4px,#73004b40 0 12px 17px 2px,#73004b40 0 5px 22px 4px}to{box-shadow:#73004b00 0 0}}.choice[data-v-96de7172]{text-align:center;display:inline-block;border-radius:4px;padding:5px 15px;margin:10px;min-width:75px;transition:all .2s ease-in-out}.selected[data-v-96de7172]{transform:translateY(-10px) scale(1.15);z-index:1}.not-selected[data-v-96de7172]{z-index:0}.userInput[data-v-a56dcd1c]{border:none;text-align:center;border-bottom:1px black}.user-input-container[data-v-aa14961f]{display:inline-block;min-width:6em;vertical-align:baseline}.user-input-string[data-v-aa14961f]{display:inline-block;background:transparent;border:none;border-bottom:1px solid currentColor;color:currentColor;font-family:inherit;font-size:inherit;line-height:inherit;padding:0;margin:0;text-align:center;width:100%;outline:none}.user-input-string[data-v-aa14961f]:focus{border-bottom:2px solid currentColor}#input[data-v-486ac035]{display:inline-block;min-width:4em;text-align:center}.underline[data-v-486ac035]{text-decoration:underline;text-decoration-style:solid 14px}.cardView[data-v-93f758b5]{padding:15px;border-radius:8px}.component-fade-enter-active[data-v-93f758b5],.component-fade-leave-active[data-v-93f758b5]{transition:opacity .3s ease}.component-fade-enter[data-v-93f758b5],.component-fade-leave-to[data-v-93f758b5]{opacity:0}.playing[data-v-e1a0f62c]{animation:.85s ease-in-out infinite alternate pulse-e1a0f62c;z-index:1}@keyframes pulse-e1a0f62c{0%{transform:scale(1)}to{transform:scale(1.15)}}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
   Theme: GitHub
   Description: Light theme as seen on github.com
   Author: github.com

package/dist/common-ui.es.js

@@ -2,8 +2,8 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { defineComponent, createElementBlock, openBlock, createCommentVNode, Fragment, renderList, normalizeStyle, toDisplayString, resolveComponent, createBlock, withCtx, createVNode, createTextVNode, createElementVNode, mergeProps, ref, computed, watch, onMounted, onBeforeUnmount, normalizeClass, renderSlot, Transition, withKeys, resolveDynamicComponent, markRaw, defineAsyncComponent, withDirectives, vModelText, getCurrentInstance, h, withModifiers, vShow } from "vue";
-import { Status, FieldType, toCourseElo, adjustCourseScores, log, displayableDataToViewData } from "@vue-skuilder/common";
-import { getCardHistoryID, docIsDeleted, isReview, newInterval, isQuestionRecord, getStudySource, SessionController, getDataLayer, GuestUsername } from "@vue-skuilder/db";
+import { Status, FieldType, toCourseElo, log, displayableDataToViewData } from "@vue-skuilder/common";
+import { getCardHistoryID, docIsDeleted, isReview, getStudySource, SessionController, getDataLayer, GuestUsername } from "@vue-skuilder/db";
 import { defineStore, setActivePinia } from "pinia";
 import { useRouter, useRoute } from "vue-router";
 import { VueTagsInput } from "@vojtechlanka/vue-tags-input";
@@ -7009,117 +7009,60 @@ const _sfc_main$j = defineComponent({
       this.currentCard.records.push(r2);
       console.log(`[StudySession] StudySession.processResponse is running...`);
       const cardHistory = this.logCardRecord(r2);
-      if (isQuestionRecord(r2)) {
-        console.log(`[StudySession] Question is ${r2.isCorrect ? "" : "in"}correct`);
-        if (r2.isCorrect) {
-          try {
-            if (this.$refs.shadowWrapper) {
-              this.$refs.shadowWrapper.setAttribute(
-                "style",
-                `--r: ${255 * (1 - r2.performance)}; --g:${255}`
-              );
-              this.$refs.shadowWrapper.classList.add("correct");
-            }
-          } catch (e) {
-            console.warn(`[StudySession] Error setting shadowWrapper style: ${e}`);
-          }
-          if (this.sessionConfig.likesConfetti) {
-            confetti({
-              origin: {
-                y: 1,
-                x: 0.25 + 0.5 * Math.random()
-              },
-              disableForReducedMotion: true,
-              angle: 60 + 60 * Math.random()
-            });
-          }
-          if (r2.priorAttemps === 0) {
-            const item = {
-              ...this.currentCard.item
-            };
-            this.loadCard(await this.sessionController.nextCard("dismiss-success"));
-            cardHistory.then((history) => {
-              this.scheduleReview(history, item);
-              if (history.records.length === 1) {
-                this.updateUserAndCardElo(0.5 + r2.performance / 2, this.courseID, this.cardID);
-              } else {
-                const k = Math.ceil(32 / history.records.length);
-                this.updateUserAndCardElo(0.5 + r2.performance / 2, this.courseID, this.cardID, k);
-              }
-            });
-          } else {
-            this.loadCard(await this.sessionController.nextCard("marked-failed"));
-          }
-        } else {
-          try {
-            if (this.$refs.shadowWrapper) {
-              this.$refs.shadowWrapper.classList.add("incorrect");
-            }
-          } catch (e) {
-            console.warn(`[StudySession] Error setting shadowWrapper style: ${e}`);
+      let maxAttemptsPerView = 1;
+      let maxSessionViews = 1;
+      if (isQuestionView(this.$refs.cardViewer?.$refs.activeView)) {
+        const view = this.$refs.cardViewer.$refs.activeView;
+        maxAttemptsPerView = view.maxAttemptsPerView;
+        maxSessionViews = view.maxSessionViews;
+      }
+      const sessionViews = this.countCardViews(this.courseID, this.cardID);
+      const result = await this.sessionController.submitResponse(
+        r2,
+        cardHistory,
+        this.userCourseRegDoc,
+        this.currentCard,
+        this.courseID,
+        this.cardID,
+        maxAttemptsPerView,
+        maxSessionViews,
+        sessionViews
+      );
+      this.handleUIFeedback(result);
+      if (result.shouldLoadNextCard) {
+        this.loadCard(await this.sessionController.nextCard(result.nextCardAction));
+      }
+      if (result.shouldClearFeedbackShadow) {
+        this.clearFeedbackShadow();
+      }
+    },
+    handleUIFeedback(result) {
+      if (result.isCorrect) {
+        try {
+          if (this.$refs.shadowWrapper && result.performanceScore !== void 0) {
+            this.$refs.shadowWrapper.setAttribute("style", `--r: ${255 * (1 - result.performanceScore)}; --g:${255}`);
+            this.$refs.shadowWrapper.classList.add("correct");
           }
-          cardHistory.then((history) => {
-            if (history.records.length !== 1 && r2.priorAttemps === 0) {
-              this.updateUserAndCardElo(0, this.courseID, this.cardID);
-            }
+        } catch (e) {
+          console.warn(`[StudySession] Error setting shadowWrapper style: ${e}`);
+        }
+        if (this.sessionConfig.likesConfetti) {
+          confetti({
+            origin: {
+              y: 1,
+              x: 0.25 + 0.5 * Math.random()
+            },
+            disableForReducedMotion: true,
+            angle: 60 + 60 * Math.random()
           });
-          if (isQuestionView(this.$refs.cardViewer?.$refs.activeView)) {
-            const view = this.$refs.cardViewer.$refs.activeView;
-            if (this.currentCard.records.length >= view.maxAttemptsPerView) {
-              const sessionViews = this.countCardViews(this.courseID, this.cardID);
-              if (sessionViews >= view.maxSessionViews) {
-                this.loadCard(await this.sessionController.nextCard("dismiss-failed"));
-                this.updateUserAndCardElo(0, this.courseID, this.cardID);
-              } else {
-                this.loadCard(await this.sessionController.nextCard("marked-failed"));
-              }
-            }
-          }
         }
       } else {
-        this.loadCard(await this.sessionController.nextCard("dismiss-success"));
-      }
-      this.clearFeedbackShadow();
-    },
-    async updateUserAndCardElo(userScore, course_id, card_id, k) {
-      if (k) {
-        console.warn(`k value interpretation not currently implemented`);
-      }
-      const courseDB = this.dataLayer.getCourseDB(this.currentCard.card.course_id);
-      const userElo = toCourseElo(this.userCourseRegDoc.courses.find((c) => c.courseID === course_id).elo);
-      const cardElo = (await courseDB.getCardEloData([this.currentCard.card.card_id]))[0];
-      if (cardElo && userElo) {
-        const eloUpdate = adjustCourseScores(userElo, cardElo, userScore);
-        this.userCourseRegDoc.courses.find((c) => c.courseID === course_id).elo = eloUpdate.userElo;
-        const results = await Promise.allSettled([
-          this.user.updateUserElo(course_id, eloUpdate.userElo),
-          courseDB.updateCardElo(card_id, eloUpdate.cardElo)
-        ]);
-        const userEloStatus = results[0].status === "fulfilled";
-        const cardEloStatus = results[1].status === "fulfilled";
-        if (userEloStatus && cardEloStatus) {
-          const user = results[0].value;
-          const card = results[1].value;
-          if (user.ok && card && card.ok) {
-            console.log(
-              `[StudySession] Updated ELOS:
-              	User: ${JSON.stringify(eloUpdate.userElo)})
-              	Card: ${JSON.stringify(eloUpdate.cardElo)})
-              `
-            );
-          }
-        } else {
-          console.log(
-            `[StudySession] Partial ELO update:
-            	User ELO update: ${userEloStatus ? "SUCCESS" : "FAILED"}
-            	Card ELO update: ${cardEloStatus ? "SUCCESS" : "FAILED"}`
-          );
-          if (!userEloStatus && results[0].status === "rejected") {
-            console.error("[StudySession] User ELO update error:", results[0].reason);
-          }
-          if (!cardEloStatus && results[1].status === "rejected") {
-            console.error("[StudySession] Card ELO update error:", results[1].reason);
+        try {
+          if (this.$refs.shadowWrapper) {
+            this.$refs.shadowWrapper.classList.add("incorrect");
           }
+        } catch (e) {
+          console.warn(`[StudySession] Error setting shadowWrapper style: ${e}`);
         }
       }
     },
@@ -7135,23 +7078,8 @@ const _sfc_main$j = defineComponent({
       }, 1250);
     },
     async logCardRecord(r2) {
-      return await this.user.putCardRecord(r2);
-    },
-    async scheduleReview(history, item) {
-      const nextInterval = newInterval(this.$props.user, history);
-      const nextReviewTime = hooks.utc().add(nextInterval, "seconds");
-      if (isReview(item)) {
-        console.log(`[StudySession] Removing previously scheduled review for: ${item.cardID}`);
-        this.user.removeScheduledCardReview(item.reviewID);
-      }
-      this.user.scheduleCardReview({
-        user: this.user.getUsername(),
-        course_id: history.courseID,
-        card_id: history.cardID,
-        time: nextReviewTime,
-        scheduledFor: item.contentSourceType,
-        schedulingAgentId: item.contentSourceID
-      });
+      const result = await this.user.putCardRecord(r2);
+      return result;
     },
     async loadCard(card) {
       if (this.loading) {
@@ -7208,24 +7136,19 @@ const _hoisted_1$b = {
   class: "StudySession"
 };
 const _hoisted_2$7 = {
-  key: 0,
-  class: "text-h3"
-};
-const _hoisted_3$5 = {
   key: 0,
   class: "text-h4"
 };
-const _hoisted_4$3 = { key: 0 };
-const _hoisted_5$3 = {
+const _hoisted_3$5 = { key: 0 };
+const _hoisted_4$3 = {
   key: 1,
   ref: "shadowWrapper"
 };
-const _hoisted_6$2 = { key: 2 };
+const _hoisted_5$3 = { key: 2 };
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_spacer = resolveComponent("v-spacer");
   const _component_v_progress_circular = resolveComponent("v-progress-circular");
   const _component_v_row = resolveComponent("v-row");
-  const _component_router_link = resolveComponent("router-link");
   const _component_heat_map = resolveComponent("heat-map");
   const _component_card_viewer = resolveComponent("card-viewer");
   const _component_StudySessionTimer = resolveComponent("StudySessionTimer");
@@ -7234,10 +7157,9 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.sessionPrepared ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
     createVNode(_component_v_row, { align: "center" }, {
       default: withCtx(() => [
-        _ctx.courseNames[_ctx.courseID] ? (openBlock(), createElementBlock("h1", _hoisted_2$7, toDisplayString(_ctx.courseNames[_ctx.courseID]) + ":", 1)) : createCommentVNode("", true),
         createVNode(_component_v_spacer),
         _ctx.loading ? (openBlock(), createBlock(_component_v_progress_circular, {
-          key: 1,
+          key: 0,
           color: "primary",
           indeterminate: "",
           size: "32",
@@ -7246,32 +7168,17 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 1
     }),
-    _cache[7] || (_cache[7] = createElementVNode("br", null, null, -1)),
-    _ctx.sessionFinished ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
-      _cache[6] || (_cache[6] = createElementVNode("p", null, "Study session finished! Great job!", -1)),
-      _ctx.sessionController ? (openBlock(), createElementBlock("p", _hoisted_4$3, toDisplayString(_ctx.sessionController.report), 1)) : createCommentVNode("", true),
-      createElementVNode("p", null, [
-        _cache[3] || (_cache[3] = createTextVNode(" Start ")),
-        createElementVNode("a", {
-          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("session-finished"))
-        }, "another study session"),
-        _cache[4] || (_cache[4] = createTextVNode(", or try ")),
-        createVNode(_component_router_link, {
-          to: `/edit/${_ctx.courseID}`
-        }, {
-          default: withCtx(() => _cache[2] || (_cache[2] = [
-            createTextVNode("adding some new content")
-          ])),
-          _: 1
-        }, 8, ["to"]),
-        _cache[5] || (_cache[5] = createTextVNode(" to challenge yourself and others! "))
-      ]),
+    _cache[2] || (_cache[2] = createElementVNode("br", null, null, -1)),
+    _ctx.sessionFinished ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
+      _cache[1] || (_cache[1] = createElementVNode("p", null, "Study session finished! Great job!", -1)),
+      _ctx.sessionController ? (openBlock(), createElementBlock("p", _hoisted_3$5, toDisplayString(_ctx.sessionController.report), 1)) : createCommentVNode("", true),
       createVNode(_component_heat_map, {
         "activity-records-getter": () => _ctx.user.getActivityRecords()
       }, null, 8, ["activity-records-getter"])
-    ])) : (openBlock(), createElementBlock("div", _hoisted_5$3, [
-      createVNode(_component_card_viewer, {
+    ])) : (openBlock(), createElementBlock("div", _hoisted_4$3, [
+      (openBlock(), createBlock(_component_card_viewer, {
         ref: "cardViewer",
+        key: _ctx.cardID,
         class: normalizeClass(_ctx.loading ? "muted" : ""),
         view: _ctx.view,
         data: _ctx.data,
@@ -7280,11 +7187,11 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
         "session-order": _ctx.cardCount,
         user_elo: _ctx.user_elo(_ctx.courseID),
         card_elo: _ctx.card_elo,
-        onEmitResponse: _cache[1] || (_cache[1] = ($event) => _ctx.processResponse($event))
-      }, null, 8, ["class", "view", "data", "card_id", "course_id", "session-order", "user_elo", "card_elo"])
+        onEmitResponse: _cache[0] || (_cache[0] = ($event) => _ctx.processResponse($event))
+      }, null, 8, ["class", "view", "data", "card_id", "course_id", "session-order", "user_elo", "card_elo"]))
     ], 512)),
-    _cache[8] || (_cache[8] = createElementVNode("br", null, null, -1)),
-    _ctx.sessionController ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+    _cache[3] || (_cache[3] = createElementVNode("br", null, null, -1)),
+    _ctx.sessionController ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sessionController.failedCount, (i) => {
         return openBlock(), createElementBlock("span", {
           key: i,
@@ -7325,7 +7232,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ])) : createCommentVNode("", true);
 }
-const StudySession = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d], ["__scopeId", "data-v-9ff3b701"]]);
+const StudySession = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d], ["__scopeId", "data-v-49a65e47"]]);
 let _pinia = null;
 const setPinia = (pinia) => {
   _pinia = pinia;
@@ -7903,7 +7810,7 @@ const _sfc_main$c = defineComponent({
     },
     async loadCard() {
       const qualified_id = this.qualified_id;
-      console.log(`Card Loader displaying: ${qualified_id.courseID}-${qualified_id.cardID}`);
+      console.log(`Card Loader displaying: ${qualified_id.courseID}::${qualified_id.cardID}`);
       this.loading = true;
       const _courseID = qualified_id.courseID;
       const _cardID = qualified_id.cardID;
@@ -7948,7 +7855,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     onEmitResponse: _cache[0] || (_cache[0] = ($event) => _ctx.processResponse($event))
   }, null, 8, ["class", "view", "data", "card_id", "course_id", "session-order"])) : createCommentVNode("", true);
 }
-const CardLoader = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$6], ["__scopeId", "data-v-1b728d79"]]);
+const CardLoader = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$6], ["__scopeId", "data-v-93f758b5"]]);
 function _getDefaults() {
   return {
     async: false,