Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement lesson attempt tracking, retry functionality, and max attempt limits for interactive blocks.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2025-12-22 15:47:18 -03:00
parent 32f71852d9
commit f592f78b6c
16 changed files with 325 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/experience/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+55 -33
View File
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import { lmsApi, Lesson, Course, Module } from "@/lib/api";
import Link from "next/link";
import { ChevronLeft, ChevronRight, Menu, CheckCircle2 } from "lucide-react";
import { useAuth } from "@/context/AuthContext";
import DescriptionPlayer from "@/components/blocks/DescriptionPlayer";
import MediaPlayer from "@/components/blocks/MediaPlayer";
@@ -18,6 +19,8 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
const [course, setCourse] = useState<(Course & { modules: Module[] }) | null>(null);
const [loading, setLoading] = useState(true);
const [sidebarOpen, setSidebarOpen] = useState(true);
const [userGrade, setUserGrade] = useState<any | null>(null);
const { user } = useAuth();
useEffect(() => {
const fetchAll = async () => {
@@ -28,8 +31,14 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
]);
setLesson(lessonData);
setCourse(courseData);
if (user) {
const grades = await lmsApi.getUserGrades(user.id, params.id);
const currentGrade = grades.find((g: any) => g.lesson_id === params.lessonId);
setUserGrade(currentGrade || null);
}
} catch (err) {
console.error(err);
console.error("Failed to load lesson data", err);
} finally {
setLoading(false);
}
@@ -116,16 +125,16 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
/>
)}
{block.type === 'quiz' && (
<QuizPlayer id={block.id} title={block.title} quizData={block.quiz_data || { questions: [] }} />
<QuizPlayer id={block.id} title={block.title} quizData={block.quiz_data || { questions: [] }} allowRetry={lesson.allow_retry} />
)}
{block.type === 'fill-in-the-blanks' && (
<FillInTheBlanksPlayer id={block.id} title={block.title} content={block.content || ""} />
<FillInTheBlanksPlayer id={block.id} title={block.title} content={block.content || ""} allowRetry={lesson.allow_retry} />
)}
{block.type === 'matching' && (
<MatchingPlayer id={block.id} title={block.title} pairs={block.pairs || []} />
<MatchingPlayer id={block.id} title={block.title} pairs={block.pairs || []} allowRetry={lesson.allow_retry} />
)}
{block.type === 'ordering' && (
<OrderingPlayer id={block.id} title={block.title} items={block.items || []} />
<OrderingPlayer id={block.id} title={block.title} items={block.items || []} allowRetry={lesson.allow_retry} />
)}
{block.type === 'short-answer' && (
<ShortAnswerPlayer
@@ -133,6 +142,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
title={block.title}
prompt={block.prompt || ""}
correctAnswers={block.correctAnswers || []}
allowRetry={lesson.allow_retry}
/>
)}
</div>
@@ -146,41 +156,53 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
{lesson.is_graded && (
<div className="pt-20 border-t border-white/5 animate-in fade-in slide-in-from-bottom-8 duration-1000">
<div className="bg-blue-600/10 border border-blue-500/20 rounded-[2rem] p-12 text-center relative overflow-hidden group">
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 blur-3xl rounded-full -translate-y-1/2 translate-x-1/2 group-hover:bg-blue-500/20 transition-all duration-700"></div>
<h3 className="text-2xl font-black mb-4">Complete & Submit</h3>
<p className="text-gray-400 max-w-sm mx-auto mb-8 text-sm">
This activity is graded. Make sure you&apos;ve completed all blocks before submitting your work for evaluation.
</p>
<button
onClick={async () => {
const userData = localStorage.getItem("user");
if (userData) {
const u = JSON.parse(userData);
try {
// In a real scenario, we'd calculate the actual score from blocks
await lmsApi.submitScore(u.id, params.id, params.lessonId, 100);
alert("Score submitted successfully!");
} catch (err) {
console.error("Submission failed", err);
{userGrade && lesson.max_attempts && userGrade.attempts_count >= lesson.max_attempts ? (
<div className="space-y-4">
<div className="inline-flex items-center gap-2 px-6 py-2 bg-amber-500/10 border border-amber-500/30 text-amber-400 rounded-full text-xs font-black uppercase tracking-widest">
Locked: Maximum attempts reached ({lesson.max_attempts})
</div>
<div className="text-4xl font-black text-white">
Score: <span className="text-blue-500">{userGrade.score * 100}%</span>
</div>
<p className="text-gray-500 text-xs italic">This assessment is now closed for further submissions.</p>
</div>
) : (
<>
<button
onClick={async () => {
if (user) {
try {
// In a real scenario, we'd calculate the actual score from blocks
const res = await lmsApi.submitScore(user.id, params.id, params.lessonId, 1.0);
setUserGrade(res);
alert("Score submitted successfully!");
} catch (err) {
console.error("Submission failed", err);
alert("Failed to submit score. Please try again.");
}
}
}
}}
className="btn-premium px-12 py-4 rounded-2xl shadow-blue-500/40 shadow-xl group/btn"
>
<span className="flex items-center gap-2 font-black italic">
SUBMIT FOR GRADING <CheckCircle2 className="w-5 h-5 group-hover/btn:scale-110 transition-transform" />
</span>
</button>
</div>
}}
className="btn-premium px-12 py-4 rounded-2xl shadow-blue-500/40 shadow-xl group/btn"
>
<span className="flex items-center gap-2 font-black italic">
{userGrade ? `SUBMIT ATTEMPT ${userGrade.attempts_count + 1}` : 'SUBMIT FOR GRADING'}
<CheckCircle2 className="w-5 h-5 group-hover/btn:scale-110 transition-transform" />
</span>
</button>
{lesson.max_attempts && (
<p className="mt-4 text-[10px] text-gray-500 font-bold uppercase tracking-widest">
Attempt {userGrade ? userGrade.attempts_count : 0} of {lesson.max_attempts} used
</p>
)}
</>
)}
</div>
)}
</div>
</div>
{/* Footer Controls */}
<footer className="h-20 glass border-t border-white/5 px-6 flex items-center justify-between bg-black/60 backdrop-blur-3xl">
<footer className="h-20 glass border-t border-white/5 px-6 flex items-center justify-between bg-black/60 backdrop-blur-3xl shrink-0">
{prevLesson ? (
<Link href={`/courses/${params.id}/lessons/${prevLesson.id}`} className="group flex items-center gap-3">
<div className="w-10 h-10 rounded-xl glass border-white/10 flex items-center justify-center group-hover:bg-white/5 transition-all text-gray-400 group-hover:text-white">
web/experience/src/app/courses/[id]/progress/page.tsx
+8 -11
View File
@@ -3,6 +3,7 @@
import React, { useState, useEffect } from "react";
import { useParams, useRouter } from "next/navigation";
import { lmsApi, GradingCategory, UserGrade, Course, Module } from "@/lib/api";
import { useAuth } from "@/context/AuthContext";
import {
Award,
BarChart3,
@@ -26,17 +27,15 @@ export default function StudentProgressPage() {
const [course, setCourse] = useState<(Course & { modules: Module[], grading_categories?: GradingCategory[] }) | null>(null);
const [userGrades, setUserGrades] = useState<UserGrade[]>([]);
const [loading, setLoading] = useState(true);
const [user, setUser] = useState<any>(null);
const { user } = useAuth();
const loadData = React.useCallback(async () => {
try {
const courseData = await lmsApi.getCourseOutline(id);
setCourse(courseData as any);
setCourse(courseData);
const userData = localStorage.getItem("user");
if (userData) {
const u = JSON.parse(userData);
const grades = await lmsApi.getUserGrades(u.id, id);
if (user) {
const grades = await lmsApi.getUserGrades(user.id, id);
setUserGrades(grades);
}
} catch (err) {
@@ -44,13 +43,11 @@ export default function StudentProgressPage() {
} finally {
setLoading(false);
}
}, [id]);
}, [id, user]);
useEffect(() => {
const userData = localStorage.getItem("user");
if (userData) setUser(JSON.parse(userData));
loadData();
}, [id, loadData]);
}, [loadData]);
if (loading) return (
<div className="min-h-screen bg-slate-950 flex items-center justify-center">
@@ -70,7 +67,7 @@ export default function StudentProgressPage() {
const count = catLessons.length;
const completedCount = catGrades.length;
const avgScore = completedCount > 0
? catGrades.reduce((sum, g) => sum + g.score, 0) / completedCount
? (catGrades.reduce((sum, g) => sum + g.score, 0) / completedCount) * 100
: 0;
const weightedScore = (avgScore * cat.weight) / 100;
web/experience/src/components/blocks/FillInTheBlanksPlayer.tsx
+23 -18
View File
@@ -6,9 +6,10 @@ interface FillInTheBlanksPlayerProps {
id: string;
title?: string;
content: string;
allowRetry?: boolean;
}
export default function FillInTheBlanksPlayer({ id, title, content }: FillInTheBlanksPlayerProps) {
export default function FillInTheBlanksPlayer({ id, title, content, allowRetry = true }: FillInTheBlanksPlayerProps) {
const [userAnswers, setUserAnswers] = useState<string[]>([]);
const [submitted, setSubmitted] = useState(false);
@@ -66,8 +67,8 @@ export default function FillInTheBlanksPlayer({ id, title, content }: FillInTheB
}}
disabled={submitted}
className={`mx-1 px-2 py-0 border-b-2 bg-transparent transition-all focus:outline-none text-center rounded-t-sm ${submitted
? (isCorrect(part.index!) ? "border-green-500 text-green-400 bg-green-500/10" : "border-red-500 text-red-100 bg-red-500/10")
: "border-blue-500/30 focus:border-blue-500 text-blue-400 focus:bg-blue-500/5"
? (isCorrect(part.index!) ? "border-green-500 text-green-400 bg-green-500/10" : "border-red-500 text-red-100 bg-red-500/10")
: "border-blue-500/30 focus:border-blue-500 text-blue-400 focus:bg-blue-500/5"
}`}
style={{ width: `${Math.max((part.answer?.length || 5) * 12, 60)}px` }}
placeholder="..."
@@ -76,22 +77,26 @@ export default function FillInTheBlanksPlayer({ id, title, content }: FillInTheB
))}
</div>
{!submitted && parsed.answers.length > 0 && (
<button
onClick={() => setSubmitted(true)}
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
>
Validate Answers
</button>
)}
{allowRetry && (
<>
{!submitted && parsed.answers.length > 0 && (
<button
onClick={() => setSubmitted(true)}
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
>
Validate Answers
</button>
)}
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
>
Try Again
</button>
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-3xl border-white/5"
>
Try Again
</button>
)}
</>
)}
</div>
</div>
web/experience/src/components/blocks/MatchingPlayer.tsx
+24 -21
View File
@@ -11,9 +11,10 @@ interface MatchingPlayerProps {
id: string;
title?: string;
pairs: MatchingPair[];
allowRetry?: boolean;
}
export default function MatchingPlayer({ id, title, pairs }: MatchingPlayerProps) {
export default function MatchingPlayer({ id, title, pairs, allowRetry = true }: MatchingPlayerProps) {
const [selectedLeft, setSelectedLeft] = useState<number | null>(null);
const [matches, setMatches] = useState<Record<number, number>>({});
const [submitted, setSubmitted] = useState(false);
@@ -52,8 +53,8 @@ export default function MatchingPlayer({ id, title, pairs }: MatchingPlayerProps
key={i}
onClick={() => !submitted && setSelectedLeft(i)}
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft === i ? "border-blue-500 bg-blue-500/10 text-white shadow-lg" :
matches[i] !== undefined ? "border-blue-500/20 bg-blue-500/5 text-blue-400" :
"border-white/5 bg-white/5 text-gray-200 hover:border-white/20"
matches[i] !== undefined ? "border-blue-500/20 bg-blue-500/5 text-blue-400" :
"border-white/5 bg-white/5 text-gray-200 hover:border-white/20"
}`}
>
{pair.left}
@@ -90,24 +91,26 @@ export default function MatchingPlayer({ id, title, pairs }: MatchingPlayerProps
})}
</div>
<div className="md:col-span-2 pt-8 border-t border-white/5">
{!submitted && Object.keys(matches).length === (pairs || []).length && (
<button
onClick={() => setSubmitted(true)}
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
>
Validate Matching
</button>
)}
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
>
Try Again
</button>
)}
</div>
{allowRetry && (
<div className="md:col-span-2 pt-8 border-t border-white/5">
{!submitted && Object.keys(matches).length === (pairs || []).length && (
<button
onClick={() => setSubmitted(true)}
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
>
Validate Matching
</button>
)}
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
>
Try Again
</button>
)}
</div>
)}
</div>
</div>
);
web/experience/src/components/blocks/OrderingPlayer.tsx
+25 -22
View File
@@ -6,9 +6,10 @@ interface OrderingPlayerProps {
id: string;
title?: string;
items: string[];
allowRetry?: boolean;
}
export default function OrderingPlayer({ id, title, items }: OrderingPlayerProps) {
export default function OrderingPlayer({ id, title, items, allowRetry = true }: OrderingPlayerProps) {
const [userOrder, setUserOrder] = useState<number[]>([]);
const [submitted, setSubmitted] = useState(false);
@@ -53,7 +54,7 @@ export default function OrderingPlayer({ id, title, items }: OrderingPlayerProps
disabled={isPicked || submitted}
onClick={() => handlePick(item.originalIdx)}
className={`px-6 py-3 rounded-full border text-sm font-bold transition-all ${isPicked ? "opacity-20 grayscale border-white/5 bg-white/5" :
"border-white/10 bg-white/5 text-gray-200 hover:border-blue-500/50 hover:bg-blue-500/5"
"border-white/10 bg-white/5 text-gray-200 hover:border-blue-500/50 hover:bg-blue-500/5"
}`}
>
{item.value}
@@ -76,8 +77,8 @@ export default function OrderingPlayer({ id, title, items }: OrderingPlayerProps
key={i}
onClick={() => !submitted && handlePick(idx)}
className={`flex items-center gap-4 p-4 rounded-xl border text-sm font-bold transition-all cursor-pointer ${isItemCorrect ? "border-green-500 bg-green-500/20 text-green-400" :
isItemWrong ? "border-red-500 bg-red-500/20 text-red-100" :
"border-blue-500/30 bg-blue-500/5 text-blue-400 hover:bg-blue-500/10"
isItemWrong ? "border-red-500 bg-red-500/20 text-red-100" :
"border-blue-500/30 bg-blue-500/5 text-blue-400 hover:bg-blue-500/10"
}`}
>
<span className="opacity-50 text-xs">{i + 1}.</span>
@@ -92,24 +93,26 @@ export default function OrderingPlayer({ id, title, items }: OrderingPlayerProps
</div>
</div>
<div className="pt-8 border-t border-white/5">
{!submitted && userOrder.length === (items || []).length && (
<button
onClick={() => setSubmitted(true)}
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
>
Validate Sequence
</button>
)}
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
>
Try Again
</button>
)}
</div>
{allowRetry && (
<div className="pt-8 border-t border-white/5">
{!submitted && userOrder.length === (items || []).length && (
<button
onClick={() => setSubmitted(true)}
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
>
Validate Sequence
</button>
)}
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
>
Try Again
</button>
)}
</div>
)}
</div>
</div>
);
web/experience/src/components/blocks/QuizPlayer.tsx
+21 -16
View File
@@ -16,9 +16,10 @@ interface QuizPlayerProps {
quizData: {
questions: QuizQuestion[];
};
allowRetry?: boolean;
}
export default function QuizPlayer({ id, title, quizData }: QuizPlayerProps) {
export default function QuizPlayer({ id, title, quizData, allowRetry = true }: QuizPlayerProps) {
const [userAnswers, setUserAnswers] = useState<Record<string, number[]>>({});
const [submitted, setSubmitted] = useState(false);
@@ -88,21 +89,25 @@ export default function QuizPlayer({ id, title, quizData }: QuizPlayerProps) {
</div>
))}
{!submitted && questions.length > 0 && (
<button
onClick={() => setSubmitted(true)}
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
>
Validate Answers
</button>
)}
{submitted && (
<button
onClick={() => { setSubmitted(false); setUserAnswers({}); }}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-3xl border-white/5"
>
Try Again
</button>
{allowRetry && (
<>
{!submitted && questions.length > 0 && (
<button
onClick={() => setSubmitted(true)}
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
>
Validate Answers
</button>
)}
{submitted && (
<button
onClick={() => { setSubmitted(false); setUserAnswers({}); }}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-3xl border-white/5"
>
Try Again
</button>
)}
</>
)}
</div>
</div>
web/experience/src/components/blocks/ShortAnswerPlayer.tsx
+24 -19
View File
@@ -7,9 +7,10 @@ interface ShortAnswerPlayerProps {
title?: string;
prompt: string;
correctAnswers: string[];
allowRetry?: boolean;
}
export default function ShortAnswerPlayer({ id, title, prompt, correctAnswers }: ShortAnswerPlayerProps) {
export default function ShortAnswerPlayer({ id, title, prompt, correctAnswers, allowRetry = true }: ShortAnswerPlayerProps) {
const [userAnswer, setUserAnswer] = useState("");
const [submitted, setSubmitted] = useState(false);
@@ -38,8 +39,8 @@ export default function ShortAnswerPlayer({ id, title, prompt, correctAnswers }:
onChange={(e) => setUserAnswer(e.target.value)}
disabled={submitted}
className={`w-full bg-white/5 border-2 rounded-2xl px-6 py-4 text-lg transition-all focus:outline-none ${submitted
? (isCorrect ? "border-green-500 bg-green-500/10 text-green-400" : "border-red-500 bg-red-500/10 text-red-100")
: "border-white/10 focus:border-blue-500 text-white"
? (isCorrect ? "border-green-500 bg-green-500/10 text-green-400" : "border-red-500 bg-red-500/10 text-red-100")
: "border-white/10 focus:border-blue-500 text-white"
}`}
placeholder="Type your answer..."
/>
@@ -52,23 +53,27 @@ export default function ShortAnswerPlayer({ id, title, prompt, correctAnswers }:
)}
</div>
{!submitted && (
<button
onClick={() => setSubmitted(true)}
disabled={!userAnswer.trim()}
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 disabled:opacity-50 disabled:grayscale"
>
Submit Answer
</button>
)}
{allowRetry && (
<>
{!submitted && (
<button
onClick={() => setSubmitted(true)}
disabled={!userAnswer.trim()}
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 disabled:opacity-50 disabled:grayscale"
>
Submit Answer
</button>
)}
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
>
Try Again
</button>
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-3xl border-white/5"
>
Try Again
</button>
)}
</>
)}
</div>
</div>
web/experience/src/lib/api.ts
+6 -2
View File
@@ -43,7 +43,10 @@ export interface Lesson {
};
is_graded: boolean;
grading_category_id: string | null;
max_attempts: number | null;
allow_retry: boolean;
position: number;
created_at: string;
}
export interface GradingCategory {
@@ -60,7 +63,8 @@ export interface UserGrade {
course_id: string;
lesson_id: string;
score: number;
metadata?: any;
attempts_count: number;
metadata: any;
created_at: string;
}
@@ -104,7 +108,7 @@ export const lmsApi = {
return response.json();
},
async getCourseOutline(courseId: string): Promise<Course & { modules: Module[] }> {
async getCourseOutline(courseId: string): Promise<Course & { modules: Module[], grading_categories: GradingCategory[] }> {
const response = await fetch(`${API_BASE_URL}/courses/${courseId}/outline`);
if (!response.ok) throw new Error('Failed to fetch course outline');
return response.json();
web/studio/src/app/courses/[id]/grading/page.tsx
+7 -7
View File
@@ -1,6 +1,6 @@
"use client";
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useCallback } from "react";
import { useParams, useRouter } from "next/navigation";
import { cmsApi, GradingCategory } from "@/lib/api";
import {
@@ -29,11 +29,7 @@ export default function GradingPolicyPage() {
const [newWeight, setNewWeight] = useState<number>(0);
const [submitting, setSubmitting] = useState(false);
useEffect(() => {
loadCategories();
}, [id]);
async function loadCategories() {
const loadCategories = useCallback(async () => {
try {
const data = await cmsApi.getGradingCategories(id);
setCategories(data);
@@ -42,7 +38,11 @@ export default function GradingPolicyPage() {
} finally {
setLoading(false);
}
}
}, [id]);
useEffect(() => {
loadCategories();
}, [loadCategories]);
async function handleAdd() {
if (!newName || newWeight <= 0) return;
web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+63 -22
View File
@@ -22,6 +22,8 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
const [gradingCategories, setGradingCategories] = useState<GradingCategory[]>([]);
const [isGraded, setIsGraded] = useState(false);
const [selectedCategoryId, setSelectedCategoryId] = useState<string | "">("");
const [maxAttempts, setMaxAttempts] = useState<number | null>(null);
const [allowRetry, setAllowRetry] = useState(true);
useEffect(() => {
const loadData = async () => {
@@ -31,6 +33,8 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
setLesson(lessonData);
setIsGraded(lessonData.is_graded);
setSelectedCategoryId(lessonData.grading_category_id || "");
setMaxAttempts(lessonData.max_attempts);
setAllowRetry(lessonData.allow_retry);
if (lessonData.metadata?.blocks) {
setBlocks(lessonData.metadata.blocks);
@@ -63,7 +67,9 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
const updated = await cmsApi.updateLesson(lesson.id, {
metadata: { ...lesson.metadata, blocks },
is_graded: isGraded,
grading_category_id: selectedCategoryId || null
grading_category_id: selectedCategoryId || null,
max_attempts: maxAttempts,
allow_retry: allowRetry
});
setLesson(updated);
setEditMode(false);
@@ -161,28 +167,63 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
</div>
{isGraded && (
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 animate-in zoom-in-95 duration-300">
{gradingCategories.length === 0 ? (
<div className="col-span-full py-4 text-center border border-dashed border-white/10 rounded-2xl text-xs text-gray-500 italic">
No grading categories defined. <Link href={`/courses/${params.id}/grading`} className="text-blue-400 underline ml-1">Go to Grading Policy</Link>
<>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 animate-in zoom-in-95 duration-300">
{gradingCategories.length === 0 ? (
<div className="col-span-full py-4 text-center border border-dashed border-white/10 rounded-2xl text-xs text-gray-500 italic">
No grading categories defined. <Link href={`/courses/${params.id}/grading`} className="text-blue-400 underline ml-1">Go to Grading Policy</Link>
</div>
) : (
gradingCategories.map((cat) => (
<button
key={cat.id}
onClick={() => setSelectedCategoryId(cat.id)}
className={`p-4 rounded-2xl border transition-all text-left group ${selectedCategoryId === cat.id
? "bg-blue-500/10 border-blue-500 text-blue-400"
: "bg-white/5 border-white/10 text-gray-500 hover:border-white/20"
}`}
>
<div className="text-[10px] font-bold uppercase tracking-widest opacity-60 mb-1">Category</div>
<div className="font-bold truncate">{cat.name}</div>
<div className="text-xs mt-2 font-medium opacity-80">{cat.weight}% Weight</div>
</button>
))
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6 border-t border-white/5 animate-in fade-in duration-500">
<div className="space-y-4">
<label className="block">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Maximum Attempts</span>
<div className="flex items-center gap-3">
<input
type="number"
value={maxAttempts || ""}
onChange={(e) => setMaxAttempts(e.target.value ? parseInt(e.target.value) : null)}
placeholder="Unlimited"
className="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all w-32"
/>
<span className="text-xs text-gray-500">Leave empty for unlimited</span>
</div>
</label>
</div>
) : (
gradingCategories.map((cat) => (
<button
key={cat.id}
onClick={() => setSelectedCategoryId(cat.id)}
className={`p-4 rounded-2xl border transition-all text-left group ${selectedCategoryId === cat.id
? "bg-blue-500/10 border-blue-500 text-blue-400"
: "bg-white/5 border-white/10 text-gray-500 hover:border-white/20"
}`}
>
<div className="text-[10px] font-bold uppercase tracking-widest opacity-60 mb-1">Category</div>
<div className="font-bold truncate">{cat.name}</div>
<div className="text-xs mt-2 font-medium opacity-80">{cat.weight}% Weight</div>
</button>
))
)}
</div>
<div className="space-y-2">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 block mb-2">After Submission</span>
<label className="flex items-center gap-3 cursor-pointer group relative">
<input
type="checkbox"
checked={allowRetry}
onChange={(e) => setAllowRetry(e.target.checked)}
className="sr-only peer"
/>
<div className="w-10 h-6 bg-gray-700 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-4"></div>
<span className="text-sm font-bold text-gray-400 peer-checked:text-white transition-colors">Allow Instant Corrections</span>
</label>
<p className="text-[10px] text-gray-600 italic">Enables &quot;Check Answer&quot; buttons for individual blocks</p>
</div>
</div>
</>
)}
</div>
)}
web/studio/src/lib/api.ts
+2
View File
@@ -59,6 +59,8 @@ export interface Lesson {
} | null;
is_graded: boolean;
grading_category_id: string | null;
max_attempts: number | null;
allow_retry: boolean;
position: number;
created_at: string;
}