[wip] discoverable qtypes (#823)

- **[wip] add example question impls**
- **make Question types externally available**

Author: NiloCK

packages/courses/src/index.ts

@@ -1,10 +1,74 @@
 import { markRaw } from 'vue';
 import { Course } from './Course';
-import { Displayable, ViewComponent } from '@vue-skuilder/common-ui';
-import { DataShape, NameSpacer, ShapeDescriptor, ViewDescriptor } from '@vue-skuilder/common';
+import {
+  Displayable,
+  Question,
+  ViewComponent,
+} from '@vue-skuilder/common-ui';
+import {
+  DataShape,
+  NameSpacer,
+  ShapeDescriptor,
+  ViewDescriptor,
+  ViewData,
+  Answer,
+  Evaluation,
+} from '@vue-skuilder/common';
 
 import defaultCourse from './default';
 
+/**
+ * A `Course` is a container for a set of related `Question` types.
+ */
+export { Course };
+
+
+/**
+ * The base class for all interactive course content.
+ * A `Displayable` defines the data it requires and the Vue components used to render it.
+ */
+export { Displayable };
+
+/**
+ * The base class for all questions. It extends `Displayable` and adds
+ * logic for evaluating user answers. This is the primary class developers
+ * will extend to create new question types.
+ */
+export { Question };
+
+/**
+ * A type representing a Vue component that can be used to render a `Displayable`.
+ */
+export type { ViewComponent };
+
+
+
+/**
+ * Represents the actual data passed to a `Displayable`'s constructor.
+ */
+export type { ViewData };
+
+/**
+ * Represents a user's answer to a `Question`.
+ */
+export type { Answer };
+
+/**
+ * Represents the evaluation of a user's `Answer`.
+ */
+export type { Evaluation };
+
+/**
+ * A descriptor that uniquely identifies a `ViewComponent`.
+ */
+export type { ViewDescriptor };
+
+/**
+ * A descriptor that uniquely identifies a `DataShape`.
+ */
+export type { ShapeDescriptor };
+
+
 import chess from './chess';
 import french from './french';
 import math from './math';

packages/standalone-ui/src/main.ts

@@ -23,6 +23,13 @@ import { useAuthStore } from '@vue-skuilder/common-ui';
 import '@vue-skuilder/courses/style';
 import '@vue-skuilder/common-ui/style';
 
+// Import allCourses singleton and exampleCourse
+import { allCourses } from '@vue-skuilder/courses';
+import { exampleCourse } from './questions/exampleCourse';
+
+// Add the example course to the allCourses singleton
+allCourses.courses.push(exampleCourse);
+
 // theme configuration
 import config from '../skuilder.config.json';
 

packages/standalone-ui/src/questions/MultipleChoiceQuestion.ts

@@ -0,0 +1,44 @@
+import { Question, ViewData, Answer } from '@vue-skuilder/courses';
+import { FieldType, DataShape } from '@vue-skuilder/common';
+import MultipleChoiceQuestionView from './MultipleChoiceQuestionView.vue';
+
+export class MultipleChoiceQuestion extends Question {
+  public static dataShapes: DataShape[] = [
+    {
+      name: 'MultipleChoiceQuestion',
+      fields: [
+        { name: 'questionText', type: FieldType.STRING },
+        { name: 'options', type: FieldType.STRING }, // Comma-separated string of options
+        { name: 'correctAnswer', type: FieldType.STRING },
+      ],
+    },
+  ];
+
+  public static views = [
+    { name: 'MultipleChoiceQuestionView', component: MultipleChoiceQuestionView },
+  ];
+
+  private questionText: string;
+  private options: string[];
+  private correctAnswer: string;
+
+  constructor(data: ViewData[]) {
+    super(data);
+    this.questionText = data[0].questionText as string;
+    this.options = (data[0].options as string).split(',').map(s => s.trim());
+    this.correctAnswer = data[0].correctAnswer as string;
+  }
+
+  public dataShapes(): DataShape[] {
+    return MultipleChoiceQuestion.dataShapes;
+  }
+
+  public views() {
+    // This will be dynamically populated or imported
+    return MultipleChoiceQuestion.views;
+  }
+
+  protected isCorrect(answer: Answer): boolean {
+    return (answer.response as string) === this.correctAnswer;
+  }
+}

packages/standalone-ui/src/questions/MultipleChoiceQuestionView.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <p>{{ questionText }}</p>
+    <div v-for="(option, index) in options" :key="index">
+      <input
+        type="radio"
+        :id="`option-${index}`"
+        :value="option"
+        v-model="selectedAnswer"
+      />
+      <label :for="`option-${index}`">{{ option }}</label>
+    </div>
+    <button @click="submitAnswer">Submit</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType } from 'vue';
+import { useViewable, useQuestionView } from '@vue-skuilder/common-ui';
+import { MultipleChoiceQuestion } from './MultipleChoiceQuestion';
+import { ViewData } from '@vue-skuilder/common';
+
+const props = defineProps({
+  questionText: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array as () => string[],
+    required: true,
+  },
+  data: {
+    type: Array as PropType<ViewData[]>,
+    required: true,
+  },
+});
+
+const selectedAnswer = ref('');
+
+const viewableUtils = useViewable(props, () => {}, 'MultipleChoiceQuestionView');
+const questionUtils = useQuestionView<MultipleChoiceQuestion>(viewableUtils);
+
+// Initialize question
+questionUtils.question.value = new MultipleChoiceQuestion(props.data);
+
+const submitAnswer = () => {
+  if (selectedAnswer.value) {
+    questionUtils.submitAnswer({ response: selectedAnswer.value });
+  }
+};
+</script>
+
+<style scoped>
+/* Add some basic styling if needed */
+</style>

packages/standalone-ui/src/questions/NumberRangeQuestion.ts

@@ -0,0 +1,45 @@
+import { Question, ViewData, Answer } from '@vue-skuilder/courses';
+import { FieldType, DataShape } from '@vue-skuilder/common';
+import NumberRangeQuestionView from './NumberRangeQuestionView.vue';
+
+export class NumberRangeQuestion extends Question {
+  public static dataShapes: DataShape[] = [
+    {
+      name: 'NumberRangeQuestion',
+      fields: [
+        { name: 'questionText', type: FieldType.STRING },
+        { name: 'min', type: FieldType.NUMBER },
+        { name: 'max', type: FieldType.NUMBER },
+      ],
+    },
+  ];
+
+  public static views = [
+    { name: 'NumberRangeQuestionView', component: NumberRangeQuestionView },
+  ];
+
+  private questionText: string;
+  private min: number;
+  private max: number;
+
+  constructor(data: ViewData[]) {
+    super(data);
+    this.questionText = data[0].questionText as string;
+    this.min = data[0].min as number;
+    this.max = data[0].max as number;
+  }
+
+  public dataShapes(): DataShape[] {
+    return NumberRangeQuestion.dataShapes;
+  }
+
+  public views() {
+    // This will be dynamically populated or imported
+    return NumberRangeQuestion.views;
+  }
+
+  protected isCorrect(answer: Answer): boolean {
+    const userAnswer = answer.response as number;
+    return userAnswer >= this.min && userAnswer <= this.max;
+  }
+}

packages/standalone-ui/src/questions/NumberRangeQuestionView.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <p>{{ questionText }}</p>
+    <input type="number" v-model.number="userAnswer" @keyup.enter="submitAnswer" placeholder="Enter a number" />
+    <button @click="submitAnswer">Submit</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType } from 'vue';
+import { useViewable, useQuestionView } from '@vue-skuilder/common-ui';
+import { NumberRangeQuestion } from './NumberRangeQuestion';
+import { ViewData } from '@vue-skuilder/common';
+
+const props = defineProps({
+  questionText: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Array as PropType<ViewData[]>,
+    required: true,
+  },
+});
+
+const userAnswer = ref<number | null>(null);
+
+const viewableUtils = useViewable(props, () => {}, 'NumberRangeQuestionView');
+const questionUtils = useQuestionView<NumberRangeQuestion>(viewableUtils);
+
+// Initialize question
+questionUtils.question.value = new NumberRangeQuestion(props.data);
+
+const submitAnswer = () => {
+  if (userAnswer.value !== null) {
+    questionUtils.submitAnswer({ response: userAnswer.value });
+  }
+};
+</script>
+
+<style scoped>
+/* Add some basic styling if needed */
+</style>