align viewTypes w/ question view spec...

`data` array as prop

Author: NiloCK

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

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, PropType, defineOptions } from 'vue';
+import { ref, computed, PropType, defineOptions } from 'vue';
 import { useViewable, useQuestionView } from '@vue-skuilder/courseware';
 import { MultipleChoiceQuestion } from './MultipleChoiceQuestion';
 import { ViewData } from '@vue-skuilder/common';
@@ -20,28 +20,38 @@ defineOptions({
 });
 
 const props = defineProps({
-  questionText: {
-    type: String,
-    required: true,
-  },
-  options: {
-    type: Array as () => string[],
-    required: true,
-  },
   data: {
     type: Array as PropType<ViewData[]>,
     required: true,
   },
+  modifyDifficulty: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
 });
 
+const emit = defineEmits(['emit-response']);
+
 const selectedAnswer = ref('');
 
-const viewableUtils = useViewable(props, () => {}, 'MultipleChoiceQuestionView');
+const viewableUtils = useViewable(props, emit, 'MultipleChoiceQuestionView');
 const questionUtils = useQuestionView<MultipleChoiceQuestion>(viewableUtils);
 
 // Initialize question
 questionUtils.question.value = new MultipleChoiceQuestion(props.data);
 
+// Extract question text and options from the question instance
+const questionText = computed(() => {
+  const question = new MultipleChoiceQuestion(props.data);
+  return (question as any)._questionText || '';
+});
+
+const options = computed(() => {
+  const question = new MultipleChoiceQuestion(props.data);
+  return (question as any).options || [];
+});
+
 const submitAnswer = () => {
   if (selectedAnswer.value) {
     questionUtils.submitAnswer({ response: selectedAnswer.value });

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

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, PropType, defineOptions } from 'vue';
+import { ref, computed, PropType, defineOptions } from 'vue';
 import { useViewable, useQuestionView } from '@vue-skuilder/courseware';
 import { NumberRangeQuestion } from './NumberRangeQuestion';
 import { ViewData } from '@vue-skuilder/common';
@@ -17,24 +17,33 @@ defineOptions({
 });
 
 const props = defineProps({
-  questionText: {
-    type: String,
-    required: true,
-  },
   data: {
     type: Array as PropType<ViewData[]>,
     required: true,
   },
+  modifyDifficulty: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
 });
 
+const emit = defineEmits(['emit-response']);
+
 const userAnswer = ref<number | null>(null);
 
-const viewableUtils = useViewable(props, () => {}, 'NumberRangeQuestionView');
+const viewableUtils = useViewable(props, emit, 'NumberRangeQuestionView');
 const questionUtils = useQuestionView<NumberRangeQuestion>(viewableUtils);
 
 // Initialize question
 questionUtils.question.value = new NumberRangeQuestion(props.data);
 
+// Extract question text from the question instance
+const questionText = computed(() => {
+  const question = new NumberRangeQuestion(props.data);
+  return (question as any).questionText || '';
+});
+
 const submitAnswer = () => {
   if (userAnswer.value !== null) {
     questionUtils.submitAnswer({ response: userAnswer.value });

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

@@ -1,48 +1,53 @@
 <template>
   <div>
+    <p>HELLO WORLD</p>
     <p>{{ questionText }}</p>
     <input v-model="userAnswer" @keyup.enter="submitAnswer" placeholder="Your answer" />
     <button @click="submitAnswer">Submit</button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, PropType, defineOptions } from 'vue';
+import { ref, computed, PropType, defineOptions } from 'vue';
 import { useViewable, useQuestionView } from '@vue-skuilder/courseware';
 import { SimpleTextQuestion } from './SimpleTextQuestion';
 import { ViewData } from '@vue-skuilder/common';
 
 defineOptions({
-  name: 'SimpleTextQuestionView'
+  name: 'SimpleTextQuestionView',
 });
 
 const props = defineProps({
-  questionText: {
-    type: String,
-    required: true,
-  },
   data: {
     type: Array as PropType<ViewData[]>,
     required: true,
   },
+  modifyDifficulty: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
 });
 
+const emit = defineEmits(['emit-response']);
+
 const userAnswer = ref('');
 
-const viewableUtils = useViewable(props, () => {}, 'SimpleTextQuestionView');
+const viewableUtils = useViewable(props, emit, 'SimpleTextQuestionView');
 const questionUtils = useQuestionView<SimpleTextQuestion>(viewableUtils);
 
 // Initialize question
 questionUtils.question.value = new SimpleTextQuestion(props.data);
 
+// Extract question text from the question instance
+const questionText = computed(() => {
+  const question = new SimpleTextQuestion(props.data);
+  return (question as any).questionText || '';
+});
+
 const submitAnswer = () => {
   questionUtils.submitAnswer({ response: userAnswer.value });
 };
-
-onMounted(() => {
-  // Optionally, you might want to focus the input field on mount
-  // This requires a ref on the input element
-});
 </script>
 
 <style scoped>