@vue-skuilder/common-ui 0.1.1

package/src/components/studentInputs/UserInputNumber.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-container class="pa-0">
+    <v-text-field
+      ref="input"
+      v-model="answer"
+      prepend-icon="edit"
+      :autofocus="autofocus"
+      row-height="24"
+      toggle-keys="[13,32]"
+      class="text-h5"
+      :rules="[isNumeric]"
+      @keyup.enter="submitAnswer(makeNumeric(answer))"
+    ></v-text-field>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { Answer } from '@vue-skuilder/common';
+import UserInput from './BaseUserInput';
+import { defineComponent } from 'vue';
+
+type InputNumberRefs = {
+  input: HTMLInputElement;
+};
+
+type InputNumberInstance = ReturnType<typeof defineComponent> & {
+  $refs: InputNumberRefs;
+};
+
+export default defineComponent({
+  name: 'UserInputNumber',
+
+  ref: {} as InputNumberRefs,
+
+  extends: UserInput,
+
+  methods: {
+    mounted(this: InputNumberInstance) {
+      this.$refs.input.focus();
+    },
+
+    isNumeric(s: string): boolean {
+      return !isNaN(Number.parseFloat(s));
+    },
+
+    makeNumeric(num: Answer): number {
+      if (typeof num === 'string') {
+        return Number.parseFloat(num);
+      } else {
+        throw new Error('Expected a string, got ' + typeof num);
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.userInput {
+  border: none;
+  text-align: center;
+  border-bottom: 1px black;
+}
+</style>

package/src/components/studentInputs/UserInputString.vue

@@ -0,0 +1,89 @@
+<template>
+  <span class="user-input-container">
+    <input
+      v-model="answer"
+      :autofocus="autofocus"
+      type="text"
+      class="user-input-string"
+      ref="input"
+      @keyup.enter="submitAnswer(answer)"
+    />
+  </span>
+</template>
+
+<script lang="ts">
+// @compositionstart="onCompositionStart"
+// @compositionend="onCompositionEnd"
+import UserInput from './BaseUserInput';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'UserInputString',
+  extends: UserInput,
+
+  props: {
+    icon: {
+      type: Boolean,
+      required: false,
+    },
+  },
+
+  computed: {
+    prependIcon(): string {
+      return this.icon ? 'edit' : '';
+    },
+  },
+
+  mounted() {
+    (this.$refs.input as HTMLInputElement)?.focus();
+  },
+
+  methods: {
+    // debugInput(e: Event) {
+    //   const target = e.target as HTMLInputElement;
+    //   console.log('Input event:', {
+    //     value: target.value,
+    //     currentAnswer: this.answer,
+    //     target,
+    //   });
+    // },
+    // debugKeyup(e: KeyboardEvent) {
+    //   const target = e.target as HTMLInputElement;
+    //   console.log('Keyup event:', {
+    //     key: e.key,
+    //     value: target.value,
+    //     currentAnswer: this.answer,
+    //     target,
+    //   });
+    // },
+  },
+});
+</script>
+
+<style scoped>
+.user-input-container {
+  display: inline-block;
+  min-width: 6em;
+  vertical-align: baseline;
+}
+
+.user-input-string {
+  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:focus {
+  border-bottom: 2px solid currentColor;
+}
+</style>

package/src/components/studentInputs/fillInInput.vue

@@ -0,0 +1,71 @@
+<template>
+  <span v-if="radioType" class="text-h5 underline"
+    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
+  >
+  <user-input-string v-else id="input" :icon="false" type="text" :value="processedText" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, onMounted } from 'vue';
+import UserInputString from './UserInputString.vue';
+
+export default defineComponent({
+  name: 'FillInInput',
+
+  components: {
+    UserInputString,
+  },
+
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    // State
+    const inputType = ref<'text' | 'radio'>('text');
+    const processedText = ref('');
+
+    // Computed
+    const radioType = computed(() => {
+      return props.text.split('||').length > 1;
+    });
+
+    // Process text on mount
+    onMounted(() => {
+      console.log(`fillinCreated w/ text: ${props.text}`);
+
+      // Remove mustache syntax
+      processedText.value = props.text.substring(2, props.text.length - 2);
+
+      console.log(`fillin text trimmed to: ${processedText.value}`);
+
+      const split = processedText.value.split('||');
+      if (split.length > 1) {
+        inputType.value = 'radio';
+      }
+    });
+
+    return {
+      inputType,
+      radioType,
+      processedText,
+    };
+  },
+});
+</script>
+
+<style scoped>
+#input {
+  display: inline-block;
+  min-width: 4em;
+  text-align: center;
+}
+
+.underline {
+  text-decoration: underline;
+  text-decoration-style: solid 14px;
+}
+</style>

package/src/composables/CompositionViewable.ts

@@ -0,0 +1,180 @@
+// src/base-course/CompositionViewable.ts
+
+import moment from 'moment';
+import { computed, ComputedRef, ref, Ref } from 'vue';
+import { CardRecord, QuestionRecord } from '@vue-skuilder/db';
+import { HotKey } from '../utils/SkldrMouseTrap';
+import { Question } from './Displayable';
+import { ViewData, Answer } from '@vue-skuilder/common';
+
+// Core interfaces to ensure type safety
+export interface ViewableUtils {
+  startTime: Ref<moment.Moment>;
+  hotKeys: Ref<HotKey[]>;
+  timeSpent: ComputedRef<number>;
+  logger: ViewableLogger;
+  getURL: (item: string, dataShapeIndex?: number) => string;
+  emitResponse: (record: CardRecord) => void;
+}
+
+export interface ViewableLogger {
+  log: (message?: unknown, ...params: unknown[]) => void;
+  error: (message?: unknown, ...params: unknown[]) => void;
+  warn: (message?: unknown, ...params: unknown[]) => void;
+}
+
+export interface QuestionViewUtils<Q extends Question> {
+  priorSessionViews: Ref<number>;
+  priorAttempts: Ref<number>;
+  priorAnswers: Ref<[Answer, string][]>;
+  maxAttemptsPerView: Ref<number>;
+  maxSessionViews: Ref<number>;
+  question: Ref<Q | undefined>;
+  submitAnswer: (answer: Answer, submittingClass?: string) => QuestionRecord;
+}
+
+// Base composable for viewable functionality
+export function useViewable(
+  props: { data: ViewData[] },
+  emit: (event: string, ...args: unknown[]) => void,
+  componentName: string
+): ViewableUtils {
+  const startTime = ref(moment.utc());
+  const hotKeys = ref<HotKey[]>([]);
+
+  const logger: ViewableLogger = {
+    log: (message?: unknown, ...params: unknown[]) =>
+      console.log(`[${componentName}]: `, message, ...params),
+    error: (message?: unknown, ...params: unknown[]) =>
+      console.error(`[${componentName}]: `, message, ...params),
+    warn: (message?: unknown, ...params: unknown[]) =>
+      console.warn(`[${componentName}]: `, message, ...params),
+  };
+
+  const timeSpent = computed(() => Math.abs(moment.utc().diff(startTime.value, 'milliseconds')));
+
+  const getURL = (item: string, dataShapeIndex = 0): string => {
+    try {
+      if (props.data[dataShapeIndex]?.[item]) {
+        return URL.createObjectURL(props.data[dataShapeIndex][item] as Blob);
+      }
+    } catch (error) {
+      logger.error('Error creating URL for item:', item, error);
+    }
+    return '';
+  };
+
+  const emitResponse = (record: CardRecord) => {
+    emit('emitResponse', record);
+  };
+
+  return {
+    startTime,
+    hotKeys,
+    timeSpent,
+    logger,
+    getURL,
+    emitResponse,
+  };
+}
+
+// Question view composable
+export function useQuestionView<Q extends Question>(
+  viewableUtils: ViewableUtils
+  // modifyDifficulty?: number
+): QuestionViewUtils<Q> {
+  const priorSessionViews = ref(0);
+  const priorAttempts = ref(0);
+  const priorAnswers = ref<[Answer, string][]>([]);
+  const maxAttemptsPerView = ref(3);
+  const maxSessionViews = ref(1);
+  const question = ref<Q>();
+
+  const submitAnswer = (answer: Answer, submittingClass?: string): QuestionRecord => {
+    viewableUtils.logger.log('submitAnswer called...');
+
+    if (!question.value) {
+      throw new Error('Question not initialized');
+    }
+
+    priorAnswers.value.push([answer, submittingClass ?? '']);
+
+    const evaluation = question.value.evaluate(answer, viewableUtils.timeSpent.value);
+
+    viewableUtils.logger.log(`evaluation of answer ${answer}:`, evaluation);
+
+    const record: QuestionRecord = {
+      ...evaluation,
+      priorAttemps: priorAttempts.value,
+      courseID: '',
+      cardID: '',
+      timeSpent: viewableUtils.timeSpent.value,
+      timeStamp: viewableUtils.startTime.value,
+      userAnswer: answer,
+    };
+
+    if (!evaluation.isCorrect) {
+      priorAttempts.value++;
+    }
+
+    viewableUtils.emitResponse(record);
+    return record;
+  };
+
+  return {
+    priorSessionViews,
+    priorAttempts,
+    priorAnswers,
+    maxAttemptsPerView,
+    maxSessionViews,
+    question,
+    submitAnswer,
+  };
+}
+
+// Helper functions
+export function isQuestionView(component: any): component is QuestionViewUtils<Question> {
+  return 'submitAnswer' in component && 'priorAttempts' in component;
+}
+
+// Example usage in a child component:
+/*
+import { defineComponent, PropType } from 'vue';
+import { useViewable, useQuestionView } from './CompositionViewable';
+import { MyCustomQuestion } from './types';
+
+export default defineComponent({
+  name: 'MyCustomQuestionView',
+  props: {
+    data: {
+      type: Array as PropType<ViewData[]>,
+      required: true,
+    },
+    modifyDifficulty: Number,
+  },
+  setup(props, { emit }) {
+    const viewableUtils = useViewable(props, emit, 'MyCustomQuestionView');
+    const questionUtils = useQuestionView<MyCustomQuestion>(viewableUtils, props.modifyDifficulty);
+
+    // Initialize question
+    questionUtils.question.value = new MyCustomQuestion(props.data);
+
+    // Add custom logic here
+    const customMethod = () => {
+      viewableUtils.logger.log('Custom method called');
+      // ...
+    };
+
+    return {
+      ...viewableUtils,
+      ...questionUtils,
+      customMethod,
+    };
+  },
+  template: `
+    <div data-viewable="MyCustomQuestionView">
+      <!-- Your template here -->
+    </div>
+  `
+});
+*/

package/src/composables/Displayable.ts

@@ -0,0 +1,133 @@
+import { type DefineComponent, defineComponent } from 'vue';
+import { FieldType, DataShape, ViewData, Answer, Evaluation } from '@vue-skuilder/common';
+
+// [ ] #vue3 - post migration, specify this more precisely (no longer a hodge-podge)
+export type ViewComponent =
+  | DefineComponent<unknown, unknown, unknown>
+  | ReturnType<typeof defineComponent>;
+
+export function isDefineComponent(
+  v: ViewComponent
+): v is DefineComponent<unknown, unknown, unknown> {
+  return (v as DefineComponent<unknown, unknown, unknown>).__isFragment !== undefined;
+}
+
+// export function isComponentOptions(v: ViewComponent): v is ComponentOptions<any> {
+//   return (v as ComponentOptions<Vue>).name !== undefined;
+// }
+
+// tslint:disable-next-line:max-classes-per-file
+export abstract class Displayable {
+  public static dataShapes: DataShape[];
+
+  public static views: Array<ViewComponent>;
+  public static seedData?: Array<any>;
+  /**
+   * True if this displayable content type is meant to have
+   * user-submitted questions. False if supplied seedData array
+   * is comprehensive for the content type. EG, a SingleDigitAddition
+   * type may comprehensively supply 0+0,0+1,...,9+9 as its seed
+   * data, and not want any user input.
+   */
+  public static acceptsUserData: boolean = true;
+
+  /**
+   *
+   */
+  constructor(viewData: ViewData[]) {
+    if (viewData.length === 0) {
+      throw new Error(`
+Displayable Constructor was called with no view Data.
+            `);
+    }
+    validateData(this.dataShapes(), viewData);
+  }
+
+  public abstract dataShapes(): DataShape[];
+  public abstract views(): Array<ViewComponent>;
+}
+
+function validateData(shape: DataShape[], data: ViewData[]) {
+  for (let i = 0; i < shape.length; i++) {
+    shape[i].fields.forEach((field, j) => {
+      console.log(`[Displayable] shape[${i}].field[${j}]:\n ${JSON.stringify(field)}`);
+      if (data[i][field.name] === undefined && field.type !== FieldType.MEDIA_UPLOADS) {
+        // throw new Error(`field validation failed:\n\t${field.name}, (${field.type})`);
+        console.warn(`[Displayable] missing data`);
+      }
+    });
+  }
+}
+
+// tslint:disable-next-line:max-classes-per-file
+export abstract class Question extends Displayable {
+  /**
+   * returns a yes/no evaluation of a user's answer. Informs the SRS
+   * algorithm's decision to expand or reset a card's spacing
+   * @param answer
+   */
+  protected abstract isCorrect(answer: Answer): boolean;
+  /**
+   * returns a number from [0,1] representing the user's performance on the question,
+   * which informs elo adjustments and SRS multipliers
+   *
+   * @param answer the user's answer
+   * @param timeSpent the time the user spent on the card in milliseconds
+   * @returns a rating of the user's displayed skill, from 0-1
+   */
+  protected displayedSkill(answer: Answer, timeSpent: number): number {
+    console.warn(`Question is running the reference implementation of displayedSkill.
+    Consider overriding!`);
+    // experts should answer this question in <= 5 secnods (5000 ms)
+    const expertSpeed = 5000;
+    const userSpeed = Math.min(timeSpent, 10 * expertSpeed);
+
+    // if userResponse is > 10 x expertSpeed, discount as probably afk / distracted ?
+
+    const speedPenalty = userSpeed / expertSpeed;
+    const speedPenaltyMultiplier = userSpeed > expertSpeed ? Math.pow(0.8, speedPenalty) : 1;
+
+    let ret = this.isCorrect(answer) ? 1 : 0;
+
+    ret = ret * speedPenaltyMultiplier;
+
+    return Math.min(ret, 1);
+  }
+
+  /**
+   *
+   * @param answer the student's answer
+   * @param timeSpent the amount of time spent in ms
+   * @returns
+   */
+  public evaluate(answer: Answer, timeSpent: number): Evaluation {
+    return {
+      isCorrect: this.isCorrect(answer),
+      performance: this.displayedSkill(answer, timeSpent),
+    };
+  }
+
+  /*
+  TODO:
+
+  This class and its interface are critical in this app - it defines the app's
+  methodology, or its architecture of methodologies, for making inferences based on
+  student performance.
+
+  Some future directions:
+
+  displayedSkill() should receive contextual data as well as the direct report of
+  a user's interaction with this card. Context includes, eg, the status of the current
+  study session (is the user on tilt? have there been leading Qs? have there been distractors?),
+  the status of the user's interaction with the card (new? mature? history of resets?)
+
+  displayedSkill() should reach out to a course (or just the card, or card-type?) in order to receive
+  custom skill-dimension evaluators. EG: a card in the ear training course tagged 'articulation'
+  could trigger a fetch of a particular evaluator fcn for articulation. In general, we
+  want high-dimension evaluations.
+
+  answers should be processed for the likelihood of non-substantive-incorrectness. eg,
+  7 * 4 = 8 is much more likely to be a typo than a substantive error when compared
+  with 7 * 4 = 21
+  */
+}

package/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './CompositionViewable';
+export * from './Displayable';

package/src/index.ts

@@ -0,0 +1,79 @@
+// // Import and re-export components
+// import './styles/index.scss';
+
+export { default as HeatMap } from './components/HeatMap.vue';
+export type { DayData, Color, ActivityRecord } from './components/HeatMap.types';
+
+// global keybinding controller
+export { default as SkMouseTrap } from './components/SkMouseTrap.vue';
+export { default as SkMouseTrapToolTip } from './components/SkMouseTrapToolTip.vue';
+export * from './components/SkMouseTrap.types';
+export * from './components/SkMouseTrapToolTip.types';
+export { SkldrMouseTrap } from './utils/SkldrMouseTrap';
+export type { HotKey, HotKeyMetaData } from './utils/SkldrMouseTrap';
+
+// snackbar service - user notifications
+export { default as SnackbarService } from './components/SnackbarService.vue';
+export { alertUser, type SnackbarOptions } from './components/SnackbarService';
+
+export { default as PaginatingToolbar } from './components/PaginatingToolbar.vue';
+export * from './components/PaginatingToolbar.types';
+
+// Composables
+export * from './composables/CompositionViewable';
+export * from './composables/Displayable';
+
+/*
+  Study Session Components
+*/
+
+export { default as StudySession } from './components/StudySession.vue';
+export { default as StudySessionTimer } from './components/StudySessionTimer.vue';
+export type { StudySessionConfig } from './components/StudySession.types';
+
+/*
+  studentInputs
+
+  These components
+  - embed into cards
+  - accept inputs (answers) from students
+  - emit / pass answers to other components in the system
+*/
+export * from './components/studentInputs/BaseUserInput';
+export { default as RadioMultipleChoice } from './components/studentInputs/RadioMultipleChoice.vue';
+export { default as MultipleChoiceOption } from './components/studentInputs/MultipleChoiceOption.vue';
+export { default as TFSelect } from './components/studentInputs/TrueFalse.vue';
+export { default as UserInputNumber } from './components/studentInputs/UserInputNumber.vue';
+export { default as UserInputString } from './components/studentInputs/UserInputString.vue';
+export { default as FillInInput } from './components/studentInputs/fillInInput.vue';
+
+/*
+  cardRendering
+
+  These components are used to render course content
+*/
+export { default as CardViewer } from './components/cardRendering/CardViewer.vue';
+export { default as CardLoader } from './components/cardRendering/CardLoader.vue';
+
+export * from './components/cardRendering/MarkdownRendererHelpers';
+export { default as AudioAutoPlayer } from './components/cardRendering/AudioAutoPlayer.vue';
+export { default as CodeBlockRenderer } from './components/cardRendering/CodeBlockRenderer.vue';
+export { default as MdTokenRenderer } from './components/cardRendering/MdTokenRenderer.vue';
+export { default as MarkdownRenderer } from './components/cardRendering/MarkdownRenderer.vue';
+
+/*
+  Authentication Components
+*/
+export * from './components/auth';
+
+/*
+  stores
+*/
+export * from './stores/useCardPreviewModeStore';
+export * from './stores/useAuthStore';
+export * from './stores/useConfigStore';
+
+/*
+  plugins
+*/
+export { piniaPlugin } from './plugins/pinia';

package/src/plugins/pinia.ts

@@ -0,0 +1,24 @@
+// common-ui/src/plugins/pinia.ts
+import { Plugin } from 'vue';
+import { Pinia } from 'pinia';
+
+// This will hold the Pinia instance provided by the main app
+let _pinia: Pinia | null = null;
+
+export const setPinia = (pinia: Pinia) => {
+  _pinia = pinia;
+};
+
+export const getPinia = (): Pinia | null => {
+  return _pinia;
+};
+
+// Create a plugin that the main app can use
+export const piniaPlugin: Plugin = {
+  install(app, options) {
+    const pinia = options?.pinia;
+    if (pinia) {
+      setPinia(pinia);
+    }
+  },
+};