@vue-skuilder/cli 0.1.8 → 0.1.10

package/dist/standalone-ui-template/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/courseware';
+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>

package/dist/standalone-ui-template/src/questions/README.md

@@ -0,0 +1,129 @@
+# Custom Questions in Standalone UI
+
+This directory contains example implementations of custom question types for the Vue Skuilder platform. These examples demonstrate how to create new `Question` subclasses and their corresponding Vue components, and how to integrate them into your application.
+
+## Example Questions Provided
+
+-   **SimpleTextQuestion**: A basic question that asks for a text input and checks for an exact string match.
+-   **MultipleChoiceQuestion**: Presents a question with multiple options and checks for the correct selection.
+-   **NumberRangeQuestion**: Asks for a numeric input and validates if it falls within a specified range.
+
+## How to Use These Examples
+
+Each question type consists of two main parts:
+1.  A TypeScript file (`.ts`) defining the `Question` subclass, which handles the question logic, data shapes, and answer evaluation.
+2.  A Vue component file (`.vue`) that provides the user interface for the question.
+
+These examples are already integrated into the `exampleCourse.ts` file, which you can use to see them in action.
+
+## Integrating Custom Questions into Your Course at Runtime
+
+To use your custom questions in a course, you need to:
+
+1.  **Define your Question Class**: Create a new TypeScript file (e.g., `MyCustomQuestion.ts`) that extends the `Question` class from `@vue-skuilder/courseware`. Define its `dataShapes` and `views` static properties.
+
+    ```typescript
+    // MyCustomQuestion.ts
+    import { Question, DataShape, ViewData, Answer } from '@vue-skuilder/courseware';
+    import { FieldType } from '@vue-skuilder/common';
+    import MyCustomQuestionView from './MyCustomQuestionView.vue';
+
+    export class MyCustomQuestion extends Question {
+      public static dataShapes: DataShape[] = [
+        new DataShape('MyCustomQuestion', [
+          { name: 'myField', type: FieldType.STRING },
+        ]),
+      ];
+
+      public static views = [
+        { name: 'MyCustomQuestionView', component: MyCustomQuestionView },
+      ];
+
+      constructor(data: ViewData[]) {
+        super(data);
+        // Initialize your question data from `data`
+      }
+
+      public dataShapes(): DataShape[] {
+        return MyCustomQuestion.dataShapes;
+      }
+
+      public views() {
+        return MyCustomQuestion.views;
+      }
+
+      protected isCorrect(answer: Answer): boolean {
+        // Implement your answer evaluation logic here
+        return false;
+      }
+    }
+    ```
+
+2.  **Create Your Vue Component**: Create a Vue component (e.g., `MyCustomQuestionView.vue`) that will render your question and allow user interaction. This component will receive props based on the `ViewData` you define for your question.
+
+    ```vue
+    <!-- MyCustomQuestionView.vue -->
+    <template>
+      <div>
+        <p>{{ questionData.myField }}</p>
+        <!-- Your input elements and UI -->
+        <button @click="submitAnswer">Submit</button>
+      </div>
+    </template>
+
+    <script setup lang="ts">
+    import { ref } from 'vue';
+    import { useStudySessionStore } from '@vue-skuilder/common-ui';
+
+    const props = defineProps({
+      // Define props based on your question's data
+      questionData: { type: Object, required: true },
+    });
+
+    const studySessionStore = useStudySessionStore();
+    const userAnswer = ref('');
+
+    const submitAnswer = () => {
+      // Collect user's answer and submit it
+      studySessionStore.submitAnswer({ response: userAnswer.value });
+    };
+    </script>
+    ```
+
+3.  **Register Your Question and Course**: In your application's entry point (e.g., `src/main.ts` or `src/App.vue`), you need to import your custom question and include it in a `Course` instance. Then, register this course with the `allCourses` list.
+
+    ```typescript
+    // src/main.ts (example)
+    import { createApp } from 'vue';
+    import App from './App.vue';
+    import { createPinia } from 'pinia';
+    import { allCourses, Course } from '@vue-skuilder/courseware';
+
+    // Import your custom question
+    import { MyCustomQuestion } from './questions/MyCustomQuestion';
+
+    // Create a new Course instance with your custom question
+    const myCustomCourse = new Course('MyCustomCourse', [
+      new MyCustomQuestion([{ myField: 'Hello Custom Question!' }]),
+    ]);
+
+    // Add your custom course to the global allCourses list
+    allCourses.courses.push(myCustomCourse);
+
+    const app = createApp(App);
+    app.use(createPinia());
+    app.mount('#app');
+    ```
+
+    **Note**: The `allCourses` object is a singleton that manages all available courses and their associated questions and views. By adding your custom course to `allCourses.courses`, it becomes discoverable by the `CardViewer` and other components that rely on the course registry.
+
+## Developing New Questions
+
+When developing new questions, consider the following:
+
+-   **DataShape Definition**: Carefully define the `DataShape` for your question. This dictates the structure of the data that will be passed to your question's constructor and Vue component.
+-   **Answer Evaluation**: Implement the `isCorrect` method in your `Question` subclass to define how user answers are evaluated.
+-   **Vue Component Props**: Ensure your Vue component's `props` match the data fields defined in your `DataShape` and any additional data you pass from your `Question` instance.
+-   **StudySessionStore**: Use the `useStudySessionStore()` composable from `@vue-skuilder/common-ui` to submit user answers and interact with the study session logic.
+
+Feel free to modify and extend the provided examples to suit your needs.

package/dist/standalone-ui-template/src/questions/SimpleTextQuestion.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { SimpleTextQuestion } from './SimpleTextQuestion';
+
+describe('SimpleTextQuestion', () => {
+  it('should correctly evaluate a correct answer', () => {
+    const question = new SimpleTextQuestion([
+      { questionText: 'What is the capital of France?', correctAnswer: 'Paris' },
+    ]);
+    expect(question.evaluate({ response: 'Paris' }, 0).isCorrect).toBe(true);
+  });
+
+  it('should correctly evaluate an incorrect answer', () => {
+    const question = new SimpleTextQuestion([
+      { questionText: 'What is the capital of France?', correctAnswer: 'Paris' },
+    ]);
+    expect(question.evaluate({ response: 'London' }, 0).isCorrect).toBe(false);
+  });
+
+  it('should be case-insensitive', () => {
+    const question = new SimpleTextQuestion([
+      { questionText: 'What is the capital of France?', correctAnswer: 'Paris' },
+    ]);
+    expect(question.evaluate({ response: 'paris' }, 0).isCorrect).toBe(true);
+  });
+});

package/dist/standalone-ui-template/src/questions/SimpleTextQuestion.ts

@@ -0,0 +1,40 @@
+import { ViewData, Answer, Question } from '@vue-skuilder/courseware';
+import { FieldType, DataShape, DataShapeName } from '@vue-skuilder/common';
+import SimpleTextQuestionView from './SimpleTextQuestionView.vue';
+
+export class SimpleTextQuestion extends Question {
+  public static dataShapes: DataShape[] = [
+    {
+      name: 'SimpleTextQuestion' as DataShapeName,
+      fields: [
+        { name: 'questionText', type: FieldType.STRING },
+        { name: 'correctAnswer', type: FieldType.STRING },
+      ],
+    },
+  ];
+
+  public static views = [{ name: 'SimpleTextQuestionView', component: SimpleTextQuestionView }];
+
+  // @ts-expect-error TS6133: Used in Vue template
+  private questionText: string;
+  private correctAnswer: string;
+
+  constructor(data: ViewData[]) {
+    super(data);
+    this.questionText = data[0].questionText as string;
+    this.correctAnswer = data[0].correctAnswer as string;
+  }
+
+  public dataShapes(): DataShape[] {
+    return SimpleTextQuestion.dataShapes;
+  }
+
+  public views() {
+    // This will be dynamically populated or imported
+    return SimpleTextQuestion.views;
+  }
+
+  protected isCorrect(answer: Answer): boolean {
+    return (answer.response as string).toLowerCase() === this.correctAnswer.toLowerCase();
+  }
+}

package/dist/standalone-ui-template/src/questions/SimpleTextQuestionView.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <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 } from 'vue';
+import { useViewable, useQuestionView } from '@vue-skuilder/courseware';
+import { SimpleTextQuestion } from './SimpleTextQuestion';
+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('');
+
+const viewableUtils = useViewable(props, () => {}, 'SimpleTextQuestionView');
+const questionUtils = useQuestionView<SimpleTextQuestion>(viewableUtils);
+
+// Initialize question
+questionUtils.question.value = new SimpleTextQuestion(props.data);
+
+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>
+/* Add some basic styling if needed */
+</style>

package/dist/standalone-ui-template/src/questions/exampleCourse.ts

@@ -0,0 +1,10 @@
+import { CourseWare } from '@vue-skuilder/courseware';
+import { SimpleTextQuestion } from './SimpleTextQuestion';
+import { MultipleChoiceQuestion } from './MultipleChoiceQuestion';
+import { NumberRangeQuestion } from './NumberRangeQuestion';
+
+export const exampleCourse = new CourseWare('ExampleCourse', [
+  SimpleTextQuestion,
+  MultipleChoiceQuestion,
+  NumberRangeQuestion,
+]);

package/dist/standalone-ui-template/src/questions/index.ts

@@ -0,0 +1,117 @@
+// Library entry point for custom questions in standalone-ui
+// This file exports question types and components for consumption by studio-ui
+
+import { CourseWare } from '@vue-skuilder/courseware';
+import { DataShape } from '@vue-skuilder/common';
+import { ViewComponent } from '@vue-skuilder/common-ui';
+
+// [ ] todo: simplify exports here. Only the final 'bundle' is strictly required.
+
+// Export individual question classes
+export { SimpleTextQuestion } from './SimpleTextQuestion';
+export { MultipleChoiceQuestion } from './MultipleChoiceQuestion';
+export { NumberRangeQuestion } from './NumberRangeQuestion';
+
+// Export example course
+export { exampleCourse } from './exampleCourse';
+
+// Import components for re-export
+import SimpleTextQuestionView from './SimpleTextQuestionView.vue';
+import MultipleChoiceQuestionView from './MultipleChoiceQuestionView.vue';
+import NumberRangeQuestionView from './NumberRangeQuestionView.vue';
+
+// Export Vue components
+export { SimpleTextQuestionView, MultipleChoiceQuestionView, NumberRangeQuestionView };
+
+// Import classes for analysis
+import { SimpleTextQuestion } from './SimpleTextQuestion';
+import { MultipleChoiceQuestion } from './MultipleChoiceQuestion';
+import { NumberRangeQuestion } from './NumberRangeQuestion';
+import { exampleCourse } from './exampleCourse';
+
+/**
+ * Main function to export all custom questions for studio-ui consumption
+ * This provides a standardized interface for the CLI to discover and integrate
+ * custom question types into studio-ui builds
+ */
+export function allCustomQuestions() {
+  // Collect all question classes
+  const questionClasses = [SimpleTextQuestion, MultipleChoiceQuestion, NumberRangeQuestion];
+
+  // Collect all data shapes from questions
+  const dataShapes: DataShape[] = [];
+  questionClasses.forEach((questionClass) => {
+    if (questionClass.dataShapes) {
+      questionClass.dataShapes.forEach((shape) => {
+        // Avoid duplicates
+        if (!dataShapes.find((existing) => existing.name === shape.name)) {
+          dataShapes.push(shape);
+        }
+      });
+    }
+  });
+
+  // Collect all view components from questions
+  const views: ViewComponent[] = [];
+  questionClasses.forEach((questionClass) => {
+    if (questionClass.views) {
+      questionClass.views.forEach((view) => {
+        // Avoid duplicates by name
+        if (!views.find((existing) => existing.name === view.name)) {
+          views.push(view);
+        }
+      });
+    }
+  });
+
+  const courses = [exampleCourse];
+
+  // Return structured data for studio-ui integration
+  return {
+    // CourseWare instances with question instances
+    courses,
+
+    // Question class constructors for registration
+    questionClasses,
+
+    // Available data shapes for studio-ui CreateCardView
+    dataShapes,
+
+    // Vue components for runtime registration
+    views,
+
+    // Metadata for debugging and analysis
+    meta: {
+      questionCount: questionClasses.length,
+      dataShapeCount: dataShapes.length,
+      viewCount: views.length,
+      courseCount: courses.length,
+      packageName: '@vue-skuilder/standalone-ui',
+      sourceDirectory: 'src/questions',
+    },
+  };
+}
+
+/**
+ * Type definitions for the custom questions export structure
+ * This provides TypeScript support for CLI and studio-ui integration
+ */
+export interface CustomQuestionsExport {
+  courses: CourseWare[];
+  questionClasses: Array<
+    typeof SimpleTextQuestion | typeof MultipleChoiceQuestion | typeof NumberRangeQuestion
+  >;
+  dataShapes: DataShape[];
+  views: ViewComponent[];
+  meta: {
+    questionCount: number;
+    dataShapeCount: number;
+    viewCount: number;
+    courseCount: number;
+    packageName: string;
+    sourceDirectory: string;
+  };
+}
+
+// Default export for convenience
+export default allCustomQuestions;

package/dist/standalone-ui-template/src/router/index.ts

@@ -0,0 +1,59 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+import StudyView from '../views/StudyView.vue';
+import ProgressView from '../views/ProgressView.vue';
+import BrowseView from '../views/BrowseView.vue';
+import UserStatsView from '../views/UserStatsView.vue';
+import UserSettingsView from '../views/UserSettingsView.vue';
+import { UserLogin, UserRegistration } from '@vue-skuilder/common-ui';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView,
+  },
+  {
+    path: '/study',
+    name: 'study',
+    component: StudyView,
+  },
+  {
+    path: '/progress',
+    name: 'progress',
+    component: ProgressView,
+  },
+  {
+    path: '/browse',
+    name: 'browse',
+    component: BrowseView,
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: UserLogin,
+  },
+  {
+    path: '/register',
+    alias: '/signup',
+    name: 'Register',
+    component: UserRegistration,
+  },
+  {
+    path: '/u/:username',
+    name: 'UserSettings',
+    component: UserSettingsView,
+  },
+  {
+    path: '/u/:username/stats',
+    name: 'UserStats', 
+    component: UserStatsView,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

package/dist/standalone-ui-template/src/views/BrowseView.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-container>
+    <div v-if="courseId">
+      <CourseInformation :course-id="courseId" :view-lookup-function="viewLookup" :edit-mode="editMode">
+        <template #actions="{ editMode }">
+          <!-- Standalone-ui specific actions - no registration/trial buttons -->
+          <div v-if="editMode !== 'none'">
+            <v-btn color="success" class="me-2" to="/study">Start Study Session</v-btn>
+          </div>
+        </template>
+      </CourseInformation>
+    </div>
+    <div v-else class="text-center">
+      <v-alert type="error"> Course ID not found in configuration </v-alert>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { CourseInformation } from '@vue-skuilder/common-ui';
+import { allCourseWare } from '@vue-skuilder/courseware';
+import { getDataLayer } from '@vue-skuilder/db';
+import config from '../../skuilder.config.json';
+
+const courseId = ref<string>('');
+const editMode = ref<'none' | 'readonly' | 'full'>('full');
+
+// Full view lookup using courses package (same as platform-ui)
+const viewLookup = (x: unknown) => {
+  return allCourseWare.getView(x);
+};
+
+onMounted(() => {
+  courseId.value = config.course || '';
+
+  // Determine edit mode based on data layer capabilities
+  const dataLayer = getDataLayer();
+  editMode.value = dataLayer.isReadOnly() ? 'readonly' : 'full';
+});
+</script>

package/dist/standalone-ui-template/src/views/HomeView.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" class="text-center">
+        <h1 class="text-h3 mb-6">{{ courseConfig.title }}</h1>
+        <p class="text-body-1 mb-6">{{ courseConfig.description }}</p>
+
+        <div v-if="isLoggedIn">
+          <v-btn color="primary" size="large" to="/study"> Start Learning </v-btn>
+        </div>
+        <div v-else class="d-flex flex-column align-center">
+          <p class="text-body-1 mb-4">Please login to start learning</p>
+          <UserLoginAndRegistrationContainer v-model="authDialogOpen" redirect-to-path="/study">
+            <template #activator="{ props }">
+              <v-btn color="primary" size="large" v-bind="props"> Login / Sign Up </v-btn>
+            </template>
+          </UserLoginAndRegistrationContainer>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useCourseConfig } from '../composables/useCourseConfig';
+import { UserLoginAndRegistrationContainer, useAuthStore } from '@vue-skuilder/common-ui';
+import { getDataLayer } from '@vue-skuilder/db';
+
+const { courseConfig } = useCourseConfig();
+const authStore = useAuthStore();
+const authDialogOpen = ref(false);
+
+const isLoggedIn = computed(() => authStore.isLoggedIn);
+</script>

package/dist/standalone-ui-template/src/views/ProgressView.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <h1 class="text-h4 mb-4">Your Progress</h1>
+
+        <!-- Placeholder for progress component -->
+        <v-card class="pa-4">
+          <p>Progress tracking will be shown here.</p>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+// Would import from common-ui or db package
+</script>

package/dist/standalone-ui-template/src/views/StudyView.vue

@@ -0,0 +1,84 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <div v-if="sessionPrepared">
+          <StudySession
+            :content-sources="sessionContentSources"
+            :session-time-limit="sessionTimeLimit"
+            :user="user"
+            :session-config="studySessionConfig"
+            :data-layer="dataLayer"
+            :get-view-component="getViewComponent"
+            @session-finished="handleSessionFinished"
+          />
+        </div>
+        <div v-else>
+          <v-card class="pa-4">
+            <v-progress-circular indeterminate color="primary"></v-progress-circular>
+            <p class="mt-4">Preparing study session...</p>
+          </v-card>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ContentSourceID, getDataLayer } from '@vue-skuilder/db';
+import { StudySession, type StudySessionConfig, useConfigStore } from '@vue-skuilder/common-ui';
+import { allCourseWare } from '@vue-skuilder/courseware';
+import ENV from '../ENVIRONMENT_VARS';
+
+const user = getDataLayer().getUserDB();
+const dataLayer = getDataLayer();
+const configStore = useConfigStore();
+const sessionPrepared = ref(false);
+const sessionTimeLimit = ref(configStore.config.sessionTimeLimit);
+const sessionContentSources = ref<ContentSourceID[]>([]);
+const studySessionConfig = ref<StudySessionConfig>({
+  likesConfetti: configStore.config.likesConfetti,
+});
+
+// Function to get view component from courses
+const getViewComponent = (view_id: string) => allCourseWare.getView(view_id);
+
+// Initialize study session with course from environment vars
+const initStudySession = async () => {
+  // Check if course ID is valid
+  if (!ENV.STATIC_COURSE_ID || ENV.STATIC_COURSE_ID === 'not_set') {
+    console.error('[StudyView] No course ID specified in environment vars!');
+    return;
+  }
+
+  console.log(`[StudyView] Starting study session for course: ${ENV.STATIC_COURSE_ID}`);
+
+  // Set the content source to the course ID from environment vars
+  sessionContentSources.value = [
+    {
+      type: 'course',
+      id: ENV.STATIC_COURSE_ID,
+    },
+  ];
+
+  // Mark the session as prepared
+  sessionPrepared.value = true;
+};
+
+// Handle session finished
+const handleSessionFinished = () => {
+  // router.go(0); // Refresh the page
+};
+
+// Initialize on component mount
+onMounted(async () => {
+  // user.value = await getCurrentUser();
+
+  // if (user.value) {
+  await initStudySession();
+  // } else {
+  //   console.error('[StudyView] No user available!');
+  // }
+});
+</script>