@vue-skuilder/common-ui 0.1.1

package/src/components/cardRendering/MdTokenRenderer.vue

@@ -0,0 +1,244 @@
+<template>
+  <span v-if="isText(token)">
+    <span v-if="!token.tokens || token.tokens.length === 0">
+      <span v-if="isComponent(token)">
+        <!-- <component :is="parsedComponent(token).is" v-if="!last" :text="parsedComponent(token).text" /> -->
+        <component :is="getComponent(parsedComponent(token).is)" v-if="!last" :text="parsedComponent(token).text" />
+      </span>
+      <span v-else-if="containsComponent(token)">
+        <md-token-renderer v-for="(subTok, j) in splitTextToken(token)" :key="j" :token="subTok" />
+      </span>
+      <span v-else>{{ decodeBasicEntities(token.text) }}</span>
+    </span>
+    <span v-else-if="token.tokens && token.tokens.length !== 0">
+      <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+    </span>
+  </span>
+
+  <span v-else-if="token.type === 'heading'">
+    <h1 v-if="token.depth === 1" class="text-h2">
+      <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+    </h1>
+    <h2 v-else-if="token.depth === 2" class="text-h3">
+      <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+    </h2>
+    <h3 v-else-if="token.depth === 3" class="text-h4">
+      <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+    </h3>
+    <h4 v-else-if="token.depth === 4">
+      <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+    </h4>
+    <h5 v-else-if="token.depth === 5">
+      <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+    </h5>
+    <h6 v-else-if="token.depth === 6">
+      <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+    </h6>
+  </span>
+
+  <strong v-else-if="token.type === 'strong'">
+    <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+  </strong>
+
+  <p v-else-if="token.type === 'paragraph'" class="text-h5">
+    <span v-if="containsComponent(token)">
+      <md-token-renderer
+        v-for="(splitTok, j) in splitParagraphToken(token)"
+        :key="j"
+        :token="splitTok"
+        :last="last && token.tokens.length === 1 && j === splitParagraphToken(token).length - 1"
+      />
+    </span>
+    <template v-else>
+      <md-token-renderer
+        v-for="(subTok, j) in token.tokens"
+        :key="j"
+        :token="subTok"
+        :last="last && token.tokens.length === 1"
+      />
+    </template>
+  </p>
+
+  <a v-else-if="token.type === 'link'" :href="token.href" :title="token.title">
+    <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+  </a>
+
+  <ul v-else-if="token.type === 'list' && token.ordered === false">
+    <md-token-renderer v-for="(item, j) in token.items" :key="j" :token="item" />
+  </ul>
+
+  <ol v-else-if="token.type === 'list' && token.ordered === true">
+    <md-token-renderer v-for="(item, j) in token.items" :key="j" :token="item" />
+  </ol>
+
+  <li v-else-if="token.type === 'list_item'">
+    <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+  </li>
+
+  <img v-else-if="token.type === 'image'" :src="token.href" :alt="token.title" />
+  <hr v-else-if="token.type === 'hr'" />
+  <br v-else-if="token.type === 'br'" />
+  <del v-else-if="token.type === 'del'" />
+
+  <table v-else-if="token.type === 'table'" :align="token.align">
+    <thead>
+      <th v-for="(h, j) in token.header" :key="j">{{ h.text }}</th>
+    </thead>
+    <tbody>
+      <tr v-for="(row, r) in token.rows" :key="r">
+        <td v-for="(cell, c) in row" :key="c">{{ cell.text }}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <span v-else-if="token.type === 'html'" v-html="token.raw"></span>
+
+  <code-block-renderer v-else-if="token.type === 'code'" :code="token.text" :language="token.lang" />
+  <!-- <highlightjs v-else-if="token.type === 'code'" class="hljs_render pa-2" :language="token.lang" :code="token.text" /> -->
+
+  <code v-else-if="token.type === 'codespan'" class="codespan" v-html="token.text"></code>
+
+  <blockquote v-else-if="token.type === 'blockquote'">
+    <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+  </blockquote>
+
+  <span v-else-if="token.type === 'escape'">{{ token.text }}</span>
+
+  <em v-else-if="token.type === 'em'">
+    <md-token-renderer v-for="(subTok, j) in token.tokens" :key="j" :token="subTok" />
+  </em>
+</template>
+
+<script setup lang="ts">
+import {
+  containsComponent as _containsComponent,
+  isComponent as _isComponent,
+  splitParagraphToken as _splitParagraphToken,
+  splitTextToken as _splitTextToken,
+  TokenOrComponent,
+} from './MarkdownRendererHelpers';
+import CodeBlockRenderer from './CodeBlockRenderer.vue';
+import FillInInput from '../../components/studentInputs/fillInInput.vue';
+import { MarkedToken, Tokens } from 'marked';
+import { markRaw } from 'vue';
+import { PropType } from 'vue';
+
+// Register components to be used in the template
+// In Vue 3 with <script setup>, components used via :is must be explicitly registered
+const components = {
+  fillIn: markRaw(FillInInput),
+  // Add other dynamic components here
+};
+
+// Define component props
+defineProps({
+  token: {
+    type: Object as PropType<TokenOrComponent>,
+    required: true,
+  },
+  last: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+// Methods
+function isComponent(token: MarkedToken): boolean {
+  const result = _isComponent(token);
+  return result;
+}
+
+function containsComponent(token: MarkedToken): boolean {
+  const result = _containsComponent(token);
+  return result;
+}
+
+function splitTextToken(token: MarkedToken): Tokens.Text[] {
+  return _splitTextToken(token);
+}
+
+function splitParagraphToken(token: Tokens.Paragraph): TokenOrComponent[] {
+  return _splitParagraphToken(token);
+}
+
+function parsedComponent(token: MarkedToken): {
+  is: string;
+  text: string;
+} {
+  // [ ] switching on component types & loading custom component
+  //
+  // sketch:
+  // const demoustached = token.text.slice(2, token.text.length - 2);
+  // const firstToken = demoustached.split(' ')[0];
+  // if (firstToken.charAt(firstToken.length - 1) == '>') {
+  //   return {
+  //     is: firstToken.slice(0, firstToken.length - 1),
+  //     text: demoustached.slice(firstToken.length + 1, demoustached.length),
+  //   };
+  // }
+
+  let text = '';
+  if ('text' in token && typeof token.text === 'string') {
+    text = token.text;
+  } else if ('raw' in token && typeof token.raw === 'string') {
+    text = token.raw;
+  }
+
+  // This now returns a component from our registered components object
+  return {
+    is: 'fillIn', // This should match a key in the components object
+    text,
+  };
+}
+
+function getComponent(componentName: string) {
+  // Return the component instance from our components object
+  return components[componentName as keyof typeof components];
+}
+
+function decodeBasicEntities(text: string): string {
+  return text
+    .replace(/&#39;/g, "'")
+    .replace(/&quot;/g, '"')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>');
+}
+
+function isText(tok: TokenOrComponent): boolean {
+  return (tok as any).inLink === undefined && tok.type === 'text';
+}
+
+// Make these functions and objects available to the template
+defineExpose({
+  isComponent,
+  containsComponent,
+  splitTextToken,
+  splitParagraphToken,
+  parsedComponent,
+  decodeBasicEntities,
+  isText,
+  components,
+  getComponent,
+});
+</script>
+
+<style lang="css" scoped>
+blockquote {
+  border-left: 3px teal solid;
+  padding-left: 8px;
+}
+
+.codespan {
+  padding-left: 3px;
+  padding-right: 3px;
+  margin-left: 1px;
+  margin-right: 1px;
+}
+
+p {
+  margin-bottom: 15px;
+  margin-top: 15px;
+}
+</style>

package/src/components/studentInputs/BaseUserInput.ts

@@ -0,0 +1,71 @@
+import { defineComponent } from 'vue';
+import { Answer, log } from '@vue-skuilder/common';
+import { useCardPreviewModeStore } from '../../stores/useCardPreviewModeStore';
+import { ViewComponent } from '../../composables/Displayable';
+import { isQuestionView } from '../../composables/CompositionViewable';
+import { QuestionRecord } from '@vue-skuilder/db';
+import { Store } from 'pinia';
+
+export default defineComponent({
+  name: 'UserInput',
+  data() {
+    return {
+      answer: '' as Answer,
+      previewModeStore: null as ReturnType<typeof useCardPreviewModeStore> | null,
+    };
+  },
+  mounted() {
+    // This happens after Pinia is initialized but before the component is used
+    this.previewModeStore = useCardPreviewModeStore();
+  },
+  computed: {
+    autofocus(): boolean {
+      return !this.previewModeStore?.previewMode;
+    },
+    autoFocus(): boolean {
+      return this.autofocus;
+    },
+  },
+  methods: {
+    submitAnswer(answer: Answer): QuestionRecord {
+      return this.submit(answer);
+    },
+    // isQuestionView(a: any): a is QuestionView<Question> {
+    //   return (a as QuestionView<Question>).submitAnswer !== undefined;
+    // },
+    submit(answer: Answer) {
+      return this.getQuestionViewAncestor().submitAnswer(answer, this.$options.name ?? 'UserInput');
+    },
+    getQuestionViewAncestor(): ViewComponent {
+      let ancestor = this.$parent;
+      let count = 0;
+
+      while (ancestor && !isQuestionView(ancestor)) {
+        const nextAncestor = ancestor.$parent;
+        if (!nextAncestor) {
+          const err = `
+UserInput.submit() has failed.
+The input element has no QuestionView ancestor element.`;
+          log(err);
+          throw new Error(err);
+        }
+        ancestor = nextAncestor;
+        count++;
+
+        if (count > 100) {
+          const err = `
+UserInput.submit() has failed.
+Exceeded maximum ancestor lookup depth.`;
+          log(err);
+          throw new Error(err);
+        }
+      }
+
+      if (!ancestor) {
+        throw new Error('No QuestionView ancestor found');
+      }
+
+      return ancestor;
+    },
+  },
+});

package/src/components/studentInputs/MultipleChoiceOption.vue

@@ -0,0 +1,127 @@
+<template>
+  <v-card :class="`${className}`" @mouseover="select" @click="submitThisOption">
+    <markdown-renderer :md="content" />
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'MultipleChoiceOption',
+
+  components: {
+    MarkdownRenderer: defineAsyncComponent(() => import('../../components/cardRendering/MarkdownRenderer.vue')),
+  },
+
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+    selected: {
+      type: Boolean,
+      required: true,
+    },
+    number: {
+      type: Number,
+      required: true,
+    },
+    setSelection: {
+      type: Function as PropType<(selection: number) => void>,
+      required: true,
+    },
+    submit: {
+      type: Function as PropType<() => void>,
+      required: true,
+    },
+    markedWrong: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  computed: {
+    className(): string {
+      let color: string;
+
+      switch (this.number) {
+        case 0:
+          color = 'bg-red';
+          break;
+        case 1:
+          color = 'bg-purple';
+          break;
+        case 2:
+          color = 'bg-indigo';
+          break;
+        case 3:
+          color = 'bg-light-blue';
+          break;
+        case 4:
+          color = 'bg-teal';
+          break;
+        case 5:
+          color = 'bg-deep-orange';
+          break;
+        default:
+          color = 'bg-grey';
+          break;
+      }
+
+      if (this.selected && !this.markedWrong) {
+        return `choice selected ${color} lighten-3 elevation-8`;
+      } else if (!this.selected && !this.markedWrong) {
+        return `choice not-selected ${color} lighten-4 elevation-1`;
+      } else if (this.selected && this.markedWrong) {
+        return `choice selected grey lighten-2 elevation-8`;
+      } else if (!this.selected && this.markedWrong) {
+        return 'choice not-selected grey lighten-2 elevation-0';
+      } else {
+        throw new Error(
+          `'selected' and 'markedWrong' props in MultipleChoiceOption are in an impossible configuration.`
+        );
+      }
+    },
+  },
+
+  methods: {
+    select(): void {
+      this.setSelection(this.number);
+    },
+
+    submitThisOption(): void {
+      if (this.markedWrong) {
+        return;
+      } else {
+        this.select();
+        this.submit();
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.choice {
+  text-align: center;
+  display: inline-block;
+  border-radius: 4px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin: 10px;
+  min-width: 75px; /* prevent tiny click-btns on, eg, one-letter answers */
+  transition: all 0.2s ease-in-out;
+}
+
+.selected {
+  transform: translateY(-10px) /* rotate(3deg) */ scale(1.15);
+  z-index: 1;
+}
+
+.not-selected {
+  z-index: 0;
+}
+</style>

package/src/components/studentInputs/RadioMultipleChoice.types.ts

@@ -0,0 +1,6 @@
+import { Answer } from '@vue-skuilder/common';
+
+export interface RadioMultipleChoiceAnswer extends Answer {
+  choiceList: string[];
+  selection: number;
+}

package/src/components/studentInputs/RadioMultipleChoice.vue

@@ -0,0 +1,168 @@
+<template>
+  <div ref="containerRef" class="multipleChoice">
+    <MultipleChoiceOption
+      v-for="(choice, i) in choiceList"
+      :key="i"
+      :content="choice"
+      :selected="choiceList.indexOf(choice) === currentSelection"
+      :number="choiceList.indexOf(choice)"
+      :set-selection="setSelection"
+      :submit="forwardSelection"
+      :marked-wrong="choiceIsWrong(choice)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import UserInput from './BaseUserInput';
+import MultipleChoiceOption from './MultipleChoiceOption.vue';
+import { defineComponent, PropType } from 'vue';
+import { SkldrMouseTrap } from '../../utils/SkldrMouseTrap';
+import { RadioMultipleChoiceAnswer } from './RadioMultipleChoice.types';
+
+export default defineComponent({
+  name: 'RadioMultipleChoice',
+  components: {
+    MultipleChoiceOption,
+  },
+  extends: UserInput,
+  props: {
+    choiceList: {
+      type: Array as PropType<string[]>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentSelection: -1,
+      incorrectSelections: [] as number[],
+      containerRef: null as null | HTMLElement,
+      _registeredHotkeys: [] as (string | string[])[],
+    };
+  },
+  watch: {
+    choiceList: {
+      immediate: true,
+      handler(newList) {
+        if (newList?.length) {
+          this.bindKeys();
+        }
+      },
+    },
+  },
+  mounted() {
+    if (this.containerRef) {
+      this.containerRef.focus();
+    }
+  },
+  unmounted() {
+    this.unbindKeys();
+  },
+  methods: {
+    forwardSelection(): void {
+      if (this.choiceIsWrong(this.choiceList[this.currentSelection])) {
+        return;
+      } else if (this.currentSelection !== -1) {
+        const ans: RadioMultipleChoiceAnswer = {
+          choiceList: this.choiceList,
+          selection: this.currentSelection,
+        };
+        const record = this.submitAnswer(ans);
+
+        if (!record.isCorrect) {
+          this.incorrectSelections.push(this.currentSelection);
+        }
+      }
+    },
+    setSelection(selection: number): void {
+      if (selection < this.choiceList.length) {
+        this.currentSelection = selection;
+      }
+    },
+    incrementSelection(): void {
+      if (this.currentSelection === -1) {
+        this.currentSelection = Math.ceil(this.choiceList.length / 2);
+      } else {
+        this.currentSelection = Math.min(this.choiceList.length - 1, this.currentSelection + 1);
+      }
+    },
+    decrementSelection(): void {
+      if (this.currentSelection === -1) {
+        this.currentSelection = Math.floor(this.choiceList.length / 2 - 1);
+      } else {
+        this.currentSelection = Math.max(0, this.currentSelection - 1);
+      }
+    },
+    choiceIsWrong(choice: string): boolean {
+      let ret = false;
+      this.incorrectSelections.forEach((sel) => {
+        if (this.choiceList[sel] === choice) {
+          ret = true;
+        }
+      });
+      return ret;
+    },
+    bindKeys() {
+      const hotkeys = [
+        {
+          hotkey: 'left',
+          callback: this.decrementSelection,
+          command: 'Move selection left',
+        },
+        {
+          hotkey: 'right',
+          callback: this.incrementSelection,
+          command: 'Move selection right',
+        },
+        {
+          hotkey: 'enter',
+          callback: this.forwardSelection,
+          command: 'Submit selection',
+        },
+        // Add number key bindings
+        ...Array.from({ length: this.choiceList.length }, (_, i) => ({
+          hotkey: (i + 1).toString(),
+          callback: () => this.setSelection(i),
+          command: `Select ${((i) => {
+            switch (i) {
+              case 0:
+                return 'first';
+              case 1:
+                return 'second';
+              case 2:
+                return 'third';
+              case 3:
+                return 'fourth';
+              case 4:
+                return 'fifth';
+              case 5:
+                return 'sixth';
+              default:
+                return `${i + 1}th`;
+            }
+          })(i)} option`,
+        })),
+      ];
+
+      SkldrMouseTrap.addBinding(hotkeys);
+      
+      // Store hotkeys for cleanup
+      this._registeredHotkeys = hotkeys.map(k => k.hotkey);
+    },
+
+    unbindKeys() {
+      // Remove specific hotkeys instead of resetting all
+      if (this._registeredHotkeys) {
+        this._registeredHotkeys.forEach(key => {
+          SkldrMouseTrap.removeBinding(key);
+        });
+      }
+    },
+    // bindNumberKey(n: number): void {
+    //   this.MouseTrap.bind(n.toString(), () => {
+    //     this.currentSelection = n - 1;
+    //   });
+    // },
+  },
+});
+</script>

package/src/components/studentInputs/TrueFalse.vue

@@ -0,0 +1,27 @@
+<template>
+  <div data-viewable="TrueFalse">
+    <RadioMultipleChoice :choice-list="['True', 'False']" :MouseTrap="MouseTrap" :submit="submit" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import RadioMultipleChoice from './RadioMultipleChoice.vue';
+
+export default defineComponent({
+  name: 'TrueFalse',
+  components: {
+    RadioMultipleChoice,
+  },
+  props: {
+    MouseTrap: {
+      type: Object as PropType<any>,
+      required: true,
+    },
+    submit: {
+      type: Function as PropType<(selection: number) => void>,
+      required: true,
+    },
+  },
+});
+</script>