@commonpub/layer 0.18.1 → 0.18.2

package/components/homepage/HeroSection.vue

@@ -17,14 +17,22 @@ const activeContest = computed(() => {
 // (they're async on first load). A local ref would reset on remount and
 // the user would see the banner "come back" after dismissing — which also
 // fails the navigation.spec.ts e2e test.
+//
+// NOTE: useState returns a Ref. Vue SFC's auto-unwrap-on-template-write
+// is reliable for bindings the compiler recognizes as refs, but for
+// auto-imported Nuxt composables the detection is inconsistent across
+// versions — safer to set `.value` explicitly from a real handler.
 const heroDismissed = useState('cpub:hero-dismissed', () => false);
+function dismissHero(): void {
+  heroDismissed.value = true;
+}
 </script>
 
 <template>
   <section v-if="!heroDismissed" class="cpub-hero-banner">
     <div class="cpub-hero-grid-bg" />
     <div class="cpub-hero-gradient" />
-    <button class="cpub-hero-dismiss" title="Dismiss" @click="heroDismissed = true">
+    <button class="cpub-hero-dismiss" title="Dismiss" @click="dismissHero">
       <i class="fa-solid fa-xmark"></i>
     </button>
     <div class="cpub-hero-inner">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -30,7 +30,7 @@
     "@aws-sdk/client-s3": "^3.1010.0",
     "@commonpub/explainer": "^0.7.12",
     "@commonpub/schema": "^0.14.4",
-    "@commonpub/server": "^2.47.2",
+    "@commonpub/server": "^2.47.3",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -53,13 +53,13 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/docs": "0.6.2",
     "@commonpub/auth": "0.5.1",
+    "@commonpub/docs": "0.6.2",
     "@commonpub/config": "0.11.0",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/editor": "0.7.9",
-    "@commonpub/learning": "0.5.1",
-    "@commonpub/protocol": "0.9.9",
-    "@commonpub/ui": "0.8.5"
+    "@commonpub/ui": "0.8.5",
+    "@commonpub/protocol": "0.9.9"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/index.vue

@@ -76,7 +76,12 @@ const { data: contests, pending: contestsPending } = await useFetch<{ items: Con
 
 // Shared with HeroSection.vue via the same useState key so the dismiss
 // persists across the configurable-renderer and legacy code paths.
+// Use an explicit handler — see HeroSection.vue for why template
+// auto-unwrap-on-write isn't reliable for Nuxt composables.
 const heroDismissed = useState('cpub:hero-dismissed', () => false);
+function dismissHero(): void {
+  heroDismissed.value = true;
+}
 const joinedHubs = ref(new Set<string>());
 
 // Active contest for hero banner
@@ -166,7 +171,7 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
     <section v-if="!heroDismissed" class="cpub-hero-banner">
       <div class="cpub-hero-grid-bg" />
       <div class="cpub-hero-gradient" />
-      <button class="cpub-hero-dismiss" title="Dismiss" @click="heroDismissed = true">
+      <button class="cpub-hero-dismiss" title="Dismiss" @click="dismissHero">
         <i class="fa-solid fa-xmark"></i>
       </button>
       <div class="cpub-hero-inner">

package/pages/learn/[slug]/[lessonSlug]/edit.vue

@@ -37,14 +37,25 @@ const editMarkdown = ref('');
 // Video URL
 const editVideoUrl = ref('');
 
-// Quiz data
+// Quiz data — canonical shape: {id, options:[{id,text}], correctOptionId}.
+// Server grades via `@commonpub/learning/gradeQuiz`; see session 129.
+interface QuizOption {
+  id: string;
+  text: string;
+}
 interface QuizQuestion {
+  id: string;
   question: string;
-  options: string[];
-  correctIndex: number;
+  options: QuizOption[];
+  correctOptionId: string;
   explanation: string;
 }
 const editQuiz = ref<QuizQuestion[]>([]);
+const editPassingScore = ref(70);
+
+function genId(): string {
+  return crypto.randomUUID().replace(/-/g, '').slice(0, 8);
+}
 
 const lessonTypes = ['article', 'video', 'quiz', 'project', 'explainer'] as const;
 
@@ -69,12 +80,46 @@ watch(lesson, (l) => {
     editVideoUrl.value = (content.videoUrl as string) ?? '';
     editMarkdown.value = (content.notes as string) ?? '';
   } else if (l.type === 'quiz') {
-    editQuiz.value = Array.isArray(content.questions)
-      ? (content.questions as QuizQuestion[]).map(q => ({ ...q }))
-      : [];
+    editPassingScore.value = typeof content.passingScore === 'number' ? content.passingScore : 70;
+    const rawQuestions = Array.isArray(content.questions) ? (content.questions as unknown[]) : [];
+    editQuiz.value = rawQuestions.map((raw) => migrateQuestion(raw));
   }
 }, { immediate: true });
 
+// Upgrade legacy `{question, options: string[], correctIndex, explanation}` to the
+// canonical `{id, options:[{id,text}], correctOptionId, explanation}` shape.
+// Content already in canonical shape is preserved. Missing ids are filled in.
+function migrateQuestion(raw: unknown): QuizQuestion {
+  const src = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>;
+  const options: QuizOption[] = Array.isArray(src.options)
+    ? (src.options as unknown[]).map((o) => {
+        if (typeof o === 'string') return { id: genId(), text: o };
+        const obj = (o && typeof o === 'object' ? o : {}) as Record<string, unknown>;
+        return {
+          id: typeof obj.id === 'string' && obj.id ? obj.id : genId(),
+          text: typeof obj.text === 'string' ? obj.text : '',
+        };
+      })
+    : [];
+
+  let correctOptionId =
+    typeof src.correctOptionId === 'string' && src.correctOptionId ? src.correctOptionId : '';
+  if (!correctOptionId && typeof src.correctIndex === 'number') {
+    correctOptionId = options[src.correctIndex]?.id ?? options[0]?.id ?? '';
+  }
+  if (!correctOptionId) {
+    correctOptionId = options[0]?.id ?? '';
+  }
+
+  return {
+    id: typeof src.id === 'string' && src.id ? src.id : genId(),
+    question: typeof src.question === 'string' ? src.question : '',
+    options,
+    correctOptionId,
+    explanation: typeof src.explanation === 'string' ? src.explanation : '',
+  };
+}
+
 // Build content payload based on type
 function buildContent(): unknown {
   switch (editType.value) {
@@ -85,7 +130,17 @@ function buildContent(): unknown {
     case 'video':
       return { videoUrl: editVideoUrl.value, notes: editMarkdown.value };
     case 'quiz':
-      return { questions: editQuiz.value };
+      return {
+        type: 'quiz',
+        passingScore: editPassingScore.value,
+        questions: editQuiz.value.map((q) => ({
+          id: q.id,
+          question: q.question,
+          options: q.options.map((o) => ({ id: o.id, text: o.text })),
+          correctOptionId: q.correctOptionId,
+          ...(q.explanation ? { explanation: q.explanation } : {}),
+        })),
+      };
     default:
       return { markdown: editMarkdown.value };
   }
@@ -134,10 +189,17 @@ async function unlinkContent(): Promise<void> {
 
 // Quiz helpers
 function addQuestion(): void {
+  const options: QuizOption[] = [
+    { id: genId(), text: '' },
+    { id: genId(), text: '' },
+    { id: genId(), text: '' },
+    { id: genId(), text: '' },
+  ];
   editQuiz.value.push({
+    id: genId(),
     question: '',
-    options: ['', '', '', ''],
-    correctIndex: 0,
+    options,
+    correctOptionId: options[0]!.id,
     explanation: '',
   });
 }
@@ -147,14 +209,16 @@ function removeQuestion(index: number): void {
 }
 
 function addOption(qIndex: number): void {
-  editQuiz.value[qIndex]!.options.push('');
+  editQuiz.value[qIndex]!.options.push({ id: genId(), text: '' });
 }
 
 function removeOption(qIndex: number, oIndex: number): void {
   const q = editQuiz.value[qIndex]!;
+  const removed = q.options[oIndex];
   q.options.splice(oIndex, 1);
-  if (q.correctIndex >= q.options.length) {
-    q.correctIndex = Math.max(0, q.options.length - 1);
+  // If the removed option was the correct answer, reassign to the first remaining.
+  if (removed && removed.id === q.correctOptionId) {
+    q.correctOptionId = q.options[0]?.id ?? '';
   }
 }
 
@@ -265,7 +329,19 @@ const videoEmbedUrl = computed(() => {
     <section v-else-if="editType === 'quiz'" class="lesson-section">
       <h2 class="lesson-section-title">Quiz Questions</h2>
 
-      <div v-for="(q, qi) in editQuiz" :key="qi" class="quiz-question-card">
+      <div class="form-field" style="margin-bottom: 16px; max-width: 240px;">
+        <label for="passing-score" class="form-label">Passing Score (%)</label>
+        <input
+          id="passing-score"
+          v-model.number="editPassingScore"
+          type="number"
+          min="0"
+          max="100"
+          class="form-input"
+        />
+      </div>
+
+      <div v-for="(q, qi) in editQuiz" :key="q.id" class="quiz-question-card">
         <div class="quiz-q-header">
           <span class="quiz-q-number">Q{{ qi + 1 }}</span>
           <button class="cpub-delete-btn" @click="removeQuestion(qi)" aria-label="Remove question">
@@ -279,11 +355,11 @@ const videoEmbedUrl = computed(() => {
         </div>
 
         <div class="quiz-options">
-          <div v-for="(opt, oi) in q.options" :key="oi" class="quiz-option-row">
+          <div v-for="(opt, oi) in q.options" :key="opt.id" class="quiz-option-row">
             <label class="quiz-radio-label">
-              <input type="radio" :name="`q${qi}-correct`" :value="oi" v-model="q.correctIndex" />
+              <input type="radio" :name="`q-${q.id}-correct`" :value="opt.id" v-model="q.correctOptionId" />
             </label>
-            <input v-model="q.options[oi]" type="text" class="form-input quiz-option-input" :placeholder="`Option ${oi + 1}`" />
+            <input v-model="opt.text" type="text" class="form-input quiz-option-input" :placeholder="`Option ${oi + 1}`" />
             <button v-if="q.options.length > 2" class="cpub-delete-btn cpub-delete-btn-sm" @click="removeOption(qi, oi)" aria-label="Remove option">
               <i class="fa-solid fa-xmark"></i>
             </button>

package/pages/learn/[slug]/[lessonSlug]/index.vue

@@ -49,6 +49,27 @@ async function markComplete(): Promise<void> {
   }
 }
 
+// Quiz server-response shape (mirrors @commonpub/learning's QuizGrade).
+interface QuizQuestionResult {
+  questionId: string;
+  selectedOptionId: string | null;
+  correctOptionId: string;
+  correct: boolean;
+  explanation?: string;
+}
+interface QuizGrade {
+  correct: number;
+  total: number;
+  score: number;
+  passed: boolean;
+  results: QuizQuestionResult[];
+}
+interface CompleteResponse {
+  progress: number;
+  certificateIssued: boolean;
+  quiz?: QuizGrade;
+}
+
 // Build flat lesson list for prev/next navigation
 interface FlatLesson {
   slug: string;
@@ -89,41 +110,78 @@ const videoUrl = computed(() => {
   return url;
 });
 
-// Quiz data
+// Quiz data — answers are GRADED SERVER-SIDE. The GET response redacts
+// `correctOptionId` + `explanation` from each question, so the client cannot
+// grade locally; it must POST to /complete and render the server's grade.
+interface QuizOption {
+  id: string;
+  text: string;
+}
 interface QuizQuestion {
+  id: string;
   question: string;
-  options: string[];
-  correctIndex: number;
-  explanation: string;
+  options: QuizOption[];
+  // correctOptionId and explanation are redacted until after submission.
 }
 
 const quizQuestions = computed<QuizQuestion[]>(() => {
   const content = lesson.value?.content as Record<string, unknown> | null;
   if (!content || !Array.isArray(content.questions)) return [];
-  return content.questions as QuizQuestion[];
+  return (content.questions as QuizQuestion[]).filter((q) => q && Array.isArray(q.options));
 });
 
-const quizAnswers = ref<Record<number, number>>({});
-const quizSubmitted = ref<Record<number, boolean>>({});
+// Draft answers: questionId → selected optionId. User can change freely
+// until submit.
+const quizAnswers = ref<Record<string, string>>({});
+const quizSubmitting = ref(false);
+const quizGrade = ref<QuizGrade | null>(null);
+// Lookup map from questionId → result for the current submission.
+const quizResultByQuestion = computed<Record<string, QuizQuestionResult>>(() => {
+  if (!quizGrade.value) return {};
+  const map: Record<string, QuizQuestionResult> = {};
+  for (const r of quizGrade.value.results) map[r.questionId] = r;
+  return map;
+});
 
-function submitQuizAnswer(qIndex: number, optionIndex: number): void {
-  if (quizSubmitted.value[qIndex]) return;
-  quizAnswers.value[qIndex] = optionIndex;
-  quizSubmitted.value[qIndex] = true;
+function selectAnswer(questionId: string, optionId: string): void {
+  if (quizGrade.value) return; // locked after submission until retry
+  quizAnswers.value = { ...quizAnswers.value, [questionId]: optionId };
 }
 
-function isQuizComplete(): boolean {
-  return quizQuestions.value.length > 0 && quizQuestions.value.every((_, i) => quizSubmitted.value[i]);
-}
+const allQuizAnswered = computed(() =>
+  quizQuestions.value.length > 0 &&
+  quizQuestions.value.every((q) => !!quizAnswers.value[q.id]),
+);
 
-const quizScore = computed(() => {
-  if (!isQuizComplete()) return null;
-  let correct = 0;
-  for (let i = 0; i < quizQuestions.value.length; i++) {
-    if (quizAnswers.value[i] === quizQuestions.value[i]!.correctIndex) correct++;
+async function submitQuiz(): Promise<void> {
+  if (!allQuizAnswered.value || quizSubmitting.value) return;
+  quizSubmitting.value = true;
+  try {
+    const res = await $fetch<CompleteResponse>(
+      `/api/learn/${slug.value}/${lessonSlug.value}/complete`,
+      { method: 'POST', body: { answers: { ...quizAnswers.value } } },
+    );
+    if (res.quiz) {
+      quizGrade.value = res.quiz;
+      if (res.quiz.passed) {
+        completed.value = true;
+        toast.success(`Passed — ${res.quiz.score}%`);
+      } else {
+        toast.error(`Scored ${res.quiz.score}% — below passing. Try again.`);
+      }
+    }
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : 'Failed to submit quiz';
+    toast.error(msg);
+  } finally {
+    quizSubmitting.value = false;
   }
-  return { correct, total: quizQuestions.value.length };
-});
+}
+
+function retryQuiz(): void {
+  quizAnswers.value = {};
+  quizGrade.value = null;
+}
 
 // Lesson type icon
 function getLessonTypeIcon(type: string): string {
@@ -233,7 +291,7 @@ const isOwner = computed(() => user.value?.id === path.value?.author?.id);
 
         <!-- QUIZ lesson -->
         <div v-if="lesson.type === 'quiz' && quizQuestions.length" class="lesson-quiz">
-          <div v-for="(q, qi) in quizQuestions" :key="qi" class="quiz-card">
+          <div v-for="(q, qi) in quizQuestions" :key="q.id" class="quiz-card">
             <div class="quiz-header">
               <span class="quiz-badge">QUESTION {{ qi + 1 }}</span>
             </div>
@@ -241,30 +299,51 @@ const isOwner = computed(() => user.value?.id === path.value?.author?.id);
             <div class="quiz-options">
               <button
                 v-for="(opt, oi) in q.options"
-                :key="oi"
+                :key="opt.id"
                 class="quiz-option"
                 :class="{
-                  'selected-correct': quizSubmitted[qi] && oi === q.correctIndex,
-                  'selected-wrong': quizSubmitted[qi] && quizAnswers[qi] === oi && oi !== q.correctIndex,
-                  answered: quizSubmitted[qi],
+                  'selected-correct': quizResultByQuestion[q.id] && opt.id === quizResultByQuestion[q.id].correctOptionId,
+                  'selected-wrong': quizResultByQuestion[q.id] && quizAnswers[q.id] === opt.id && opt.id !== quizResultByQuestion[q.id].correctOptionId,
+                  'selected-pending': !quizGrade && quizAnswers[q.id] === opt.id,
+                  answered: !!quizGrade,
                 }"
-                :disabled="!!quizSubmitted[qi]"
-                @click="submitQuizAnswer(qi, oi)"
+                :disabled="!!quizGrade"
+                :aria-pressed="quizAnswers[q.id] === opt.id"
+                @click="selectAnswer(q.id, opt.id)"
               >
                 <span class="quiz-option-key">{{ String.fromCharCode(65 + oi) }}</span>
-                <span class="quiz-option-text">{{ opt }}</span>
-                <span v-if="quizSubmitted[qi] && oi === q.correctIndex" class="quiz-option-indicator"><i class="fa-solid fa-check"></i></span>
-                <span v-if="quizSubmitted[qi] && quizAnswers[qi] === oi && oi !== q.correctIndex" class="quiz-option-indicator"><i class="fa-solid fa-xmark"></i></span>
+                <span class="quiz-option-text">{{ opt.text }}</span>
+                <span v-if="quizResultByQuestion[q.id] && opt.id === quizResultByQuestion[q.id].correctOptionId" class="quiz-option-indicator"><i class="fa-solid fa-check"></i></span>
+                <span v-if="quizResultByQuestion[q.id] && quizAnswers[q.id] === opt.id && opt.id !== quizResultByQuestion[q.id].correctOptionId" class="quiz-option-indicator"><i class="fa-solid fa-xmark"></i></span>
               </button>
             </div>
-            <div v-if="quizSubmitted[qi] && q.explanation" class="quiz-explanation">
-              <i class="fa-solid fa-lightbulb"></i> {{ q.explanation }}
+            <div v-if="quizResultByQuestion[q.id]?.explanation" class="quiz-explanation">
+              <i class="fa-solid fa-lightbulb"></i> {{ quizResultByQuestion[q.id]!.explanation }}
             </div>
           </div>
 
-          <div v-if="quizScore" class="quiz-score">
-            <div class="quiz-score-value">{{ quizScore.correct }} / {{ quizScore.total }}</div>
-            <div class="quiz-score-label">correct answers</div>
+          <!-- Submit / result / retry -->
+          <div class="quiz-actions">
+            <button
+              v-if="!quizGrade"
+              class="quiz-submit-btn"
+              :disabled="!allQuizAnswered || quizSubmitting || !isAuthenticated"
+              @click="submitQuiz"
+            >
+              <i class="fa-solid fa-check-double"></i>
+              {{ quizSubmitting ? 'Grading...' : 'Submit Quiz' }}
+            </button>
+            <p v-if="!isAuthenticated" class="quiz-signin-hint">Sign in to submit this quiz.</p>
+          </div>
+
+          <div v-if="quizGrade" class="quiz-score" :class="{ passed: quizGrade.passed, failed: !quizGrade.passed }">
+            <div class="quiz-score-value">{{ quizGrade.correct }} / {{ quizGrade.total }}</div>
+            <div class="quiz-score-label">
+              {{ quizGrade.score }}% — {{ quizGrade.passed ? 'Passed' : 'Did not pass' }}
+            </div>
+            <button v-if="!quizGrade.passed" class="quiz-retry-btn" @click="retryQuiz">
+              <i class="fa-solid fa-rotate-right"></i> Try Again
+            </button>
           </div>
         </div>
 
@@ -279,7 +358,7 @@ const isOwner = computed(() => user.value?.id === path.value?.author?.id);
 
         <!-- Footer: Mark Complete + Prev/Next -->
         <footer class="lesson-footer">
-          <div v-if="isAuthenticated" class="lesson-complete-row">
+          <div v-if="isAuthenticated && lesson.type !== 'quiz'" class="lesson-complete-row">
             <button v-if="!completed" class="lesson-complete-btn" @click="markComplete" :disabled="completing">
               <i class="fa-solid fa-check-circle"></i> {{ completing ? 'Marking...' : 'Mark as Complete' }}
             </button>
@@ -287,6 +366,11 @@ const isOwner = computed(() => user.value?.id === path.value?.author?.id);
               <i class="fa-solid fa-check-circle"></i> Completed
             </div>
           </div>
+          <div v-else-if="isAuthenticated && completed" class="lesson-complete-row">
+            <div class="lesson-completed-badge">
+              <i class="fa-solid fa-check-circle"></i> Completed
+            </div>
+          </div>
 
           <div class="lesson-nav-footer">
             <NuxtLink v-if="prevLesson" :to="`/learn/${slug}/${prevLesson.slug}`" class="lesson-nav-btn lesson-nav-prev">
@@ -396,10 +480,24 @@ const isOwner = computed(() => user.value?.id === path.value?.author?.id);
 .quiz-option-indicator { font-size: 12px; flex-shrink: 0; }
 .quiz-option.selected-correct .quiz-option-indicator { color: var(--green); }
 .quiz-option.selected-wrong .quiz-option-indicator { color: var(--red); }
+.quiz-option.selected-pending { background: var(--accent-bg); border-color: var(--accent); }
+.quiz-option.selected-pending .quiz-option-key { color: var(--accent); }
+.quiz-option.selected-pending .quiz-option-text { color: var(--text); }
 .quiz-explanation { margin-top: 12px; padding: 10px 14px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); color: var(--accent); font-size: 13px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
+.quiz-actions { margin: 16px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+.quiz-submit-btn { padding: 10px 20px; background: var(--accent); color: var(--color-text-inverse); border: var(--border-width-default) solid var(--border); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-md); font-family: inherit; }
+.quiz-submit-btn:hover:not(:disabled) { box-shadow: var(--shadow-sm); transform: translate(1px, 1px); }
+.quiz-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.quiz-signin-hint { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }
 .quiz-score { text-align: center; padding: 20px; border: var(--border-width-default) solid var(--green); background: var(--green-bg); }
+.quiz-score.passed { border-color: var(--green); background: var(--green-bg); }
+.quiz-score.passed .quiz-score-value, .quiz-score.passed .quiz-score-label { color: var(--green); }
+.quiz-score.failed { border-color: var(--red); background: var(--red-bg); }
+.quiz-score.failed .quiz-score-value, .quiz-score.failed .quiz-score-label { color: var(--red); }
 .quiz-score-value { font-size: 28px; font-weight: 700; font-family: var(--font-mono); color: var(--green); }
 .quiz-score-label { font-size: 11px; font-family: var(--font-mono); color: var(--green); text-transform: uppercase; letter-spacing: 0.08em; }
+.quiz-retry-btn { margin-top: 12px; padding: 8px 16px; background: var(--surface); color: var(--text); border: var(--border-width-default) solid var(--border); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
+.quiz-retry-btn:hover { background: var(--surface2); }
 
 /* Empty state */
 .lesson-empty { color: var(--text-faint); font-size: 13px; text-align: center; padding: 48px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }