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

feat: enhance Activity Builder with block reordering, description preview, quiz type selection, and updated documentation

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2025-12-19 15:47:16 -03:00
parent c71fae7dbc
commit 0988213eb7
5 changed files with 166 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+27 -1
View File
@@ -77,6 +77,15 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
setBlocks(blocks.map(b => b.id === id ? { ...b, ...updates } : b));
};
const moveBlock = (index: number, direction: 'up' | 'down') => {
const newBlocks = [...blocks];
const targetIndex = direction === 'up' ? index - 1 : index + 1;
if (targetIndex < 0 || targetIndex >= newBlocks.length) return;
[newBlocks[index], newBlocks[targetIndex]] = [newBlocks[targetIndex], newBlocks[index]];
setBlocks(newBlocks);
};
if (loading) return <div className="py-20 text-center text-gray-500 animate-pulse font-medium">Initializing Activity Builder...</div>;
if (!lesson) return <div className="py-20 text-center text-red-400">Activity not found.</div>;
@@ -113,9 +122,26 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<div key={block.id} className="relative group/block animate-in fade-in slide-in-from-bottom-4 duration-500" style={{ animationDelay: `${index * 100}ms` }}>
{editMode && (
<div className="absolute -left-12 top-0 h-full flex flex-col items-center gap-2 opacity-0 group-hover/block:opacity-100 transition-all">
<button
onClick={() => moveBlock(index, 'up')}
disabled={index === 0}
className="w-8 h-8 rounded-lg bg-white/5 text-gray-400 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all border border-white/10 disabled:opacity-20 disabled:cursor-not-allowed"
title="Move Up"
>
<span className="text-xs">↑</span>
</button>
<button
onClick={() => moveBlock(index, 'down')}
disabled={index === blocks.length - 1}
className="w-8 h-8 rounded-lg bg-white/5 text-gray-400 flex items-center justify-center hover:bg-blue-500 hover:text-white transition-all border border-white/10 disabled:opacity-20 disabled:cursor-not-allowed"
title="Move Down"
>
<span className="text-xs">↓</span>
</button>
<div className="h-2"></div>
<button
onClick={() => removeBlock(block.id)}
className="w-8 h-8 rounded-lg bg-red-500/10 text-red-500 flex items-center justify-center hover:bg-red-500 hover:text-white transition-all border border-red-500/20"
className="w-8 h-8 rounded-lg bg-red-500/10 text-red-400 flex items-center justify-center hover:bg-red-500 hover:text-white transition-all border border-red-500/20"
title="Remove Block"
>
<span className="text-sm">×</span>
web/studio/src/components/blocks/DescriptionBlock.tsx
+39 -9
View File
@@ -1,5 +1,7 @@
"use client";
import { useState } from "react";
interface DescriptionBlockProps {
id: string;
title?: string;
@@ -9,6 +11,7 @@ interface DescriptionBlockProps {
}
export default function DescriptionBlock({ title, content, editMode, onChange }: DescriptionBlockProps) {
const [showPreview, setShowPreview] = useState(false);
return (
<div className="space-y-6">
{/* Block Header */}
@@ -30,18 +33,45 @@ export default function DescriptionBlock({ title, content, editMode, onChange }:
</div>
{editMode ? (
<div className="space-y-2">
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Instructional Text</label>
<textarea
value={content}
onChange={(e) => onChange({ content: e.target.value })}
placeholder="Explain the activity to the students..."
className="w-full h-40 bg-white/5 border border-white/10 rounded-xl p-4 text-sm focus:border-blue-500/50 focus:outline-none transition-all resize-none"
/>
<div className="space-y-4">
<div className="flex items-center justify-between">
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Instructional Content</label>
<div className="flex bg-white/5 rounded-lg p-1 border border-white/5">
<button
onClick={() => setShowPreview(false)}
className={`px-4 py-1.5 text-[10px] uppercase font-black tracking-widest rounded-md transition-all ${!showPreview ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
>
Write
</button>
<button
onClick={() => setShowPreview(true)}
className={`px-4 py-1.5 text-[10px] uppercase font-black tracking-widest rounded-md transition-all ${showPreview ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
>
Preview
</button>
</div>
</div>
{showPreview ? (
<div className="min-h-[200px] p-6 rounded-xl glass border-white/5 bg-white/5">
<div className="prose prose-invert max-w-none">
<p className="text-gray-300 leading-relaxed text-lg whitespace-pre-wrap">
{content || "Nothing to preview..."}
</p>
</div>
</div>
) : (
<textarea
value={content}
onChange={(e) => onChange({ content: e.target.value })}
placeholder="Explain the activity to the students (Markdown supported)..."
className="w-full h-60 bg-white/5 border border-white/10 rounded-xl p-6 text-lg tracking-tight focus:border-blue-500/50 focus:outline-none transition-all resize-none shadow-inner"
/>
)}
</div>
) : (
<div className="prose prose-invert max-w-none">
<p className="text-gray-300 leading-relaxed text-lg">
<p className="text-gray-300 leading-relaxed text-lg whitespace-pre-wrap">
{content || "No description provided."}
</p>
</div>
web/studio/src/components/blocks/QuizBlock.tsx
+86 -23
View File
@@ -7,6 +7,7 @@ interface QuizQuestion {
question: string;
options: string[];
correct: number;
type?: 'multiple-choice' | 'true-false';
}
interface QuizBlockProps {
@@ -30,7 +31,8 @@ export default function QuizBlock({ id, title, quizData, editMode, onChange }: Q
id: Math.random().toString(36).substr(2, 9),
question: "New Question?",
options: ["Option 1", "Option 2"],
correct: 0
correct: 0,
type: 'multiple-choice'
};
onChange({ questions: [...questions, newQuestion] });
};
@@ -71,34 +73,95 @@ export default function QuizBlock({ id, title, quizData, editMode, onChange }: Q
{editMode ? (
<div className="space-y-6">
{questions.map((q, idx) => (
<div key={q.id} className="p-6 glass border-white/5 space-y-4 rounded-2xl">
<div key={q.id} className="p-8 glass border-white/5 space-y-6 rounded-3xl relative group/question animate-in slide-in-from-left-4 duration-500">
<div className="flex items-center justify-between gap-4">
<div className="flex bg-white/5 rounded-lg p-1 border border-white/5">
<button
onClick={() => updateQuestion(idx, { type: 'multiple-choice' })}
className={`px-3 py-1.5 text-[9px] uppercase font-black tracking-widest rounded-md transition-all ${q.type !== 'true-false' ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
>
MCQ
</button>
<button
onClick={() => updateQuestion(idx, { type: 'true-false', options: ["True", "False"], correct: 0 })}
className={`px-3 py-1.5 text-[9px] uppercase font-black tracking-widest rounded-md transition-all ${q.type === 'true-false' ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
>
T / F
</button>
</div>
<button
onClick={() => {
const newQuestions = questions.filter((_, i) => i !== idx);
onChange({ questions: newQuestions });
}}
className="p-2 text-gray-500 hover:text-red-400 transition-colors"
>
<span className="text-xl">×</span>
</button>
</div>
<input
value={q.question}
onChange={(e) => updateQuestion(idx, { question: e.target.value })}
className="w-full bg-white/5 border border-white/10 rounded-xl p-3 font-semibold focus:outline-none focus:border-blue-500/50 transition-all"
placeholder="Enter your question..."
className="w-full bg-white/5 border border-white/10 rounded-xl p-4 text-lg font-bold focus:outline-none focus:border-blue-500/50 transition-all placeholder:text-gray-600"
placeholder="What is the question?"
/>
<div className="space-y-3">
{q.options.map((opt, oIdx) => (
<div key={oIdx} className="flex gap-3 items-center">
<input
type="radio"
checked={q.correct === oIdx}
onChange={() => updateQuestion(idx, { correct: oIdx })}
className="w-4 h-4 accent-blue-500"
/>
<input
value={opt}
onChange={(e) => {
const newOpts = [...q.options];
newOpts[oIdx] = e.target.value;
updateQuestion(idx, { options: newOpts });
}}
className="flex-1 bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-blue-500/30"
placeholder={`Option ${oIdx + 1}`}
/>
{q.type === 'true-false' ? (
<div className="flex gap-4">
{["True", "False"].map((opt, oIdx) => (
<button
key={oIdx}
onClick={() => updateQuestion(idx, { correct: oIdx })}
className={`flex-1 py-4 rounded-xl border-2 transition-all font-black text-xs uppercase tracking-widest ${q.correct === oIdx ? "border-blue-500 bg-blue-500/10 text-white" : "border-white/5 bg-white/5 text-gray-500"}`}
>
{opt}
</button>
))}
</div>
))}
) : (
q.options.map((opt, oIdx) => (
<div key={oIdx} className="flex gap-3 items-center group/opt">
<input
type="radio"
checked={q.correct === oIdx}
onChange={() => updateQuestion(idx, { correct: oIdx })}
className="w-5 h-5 accent-blue-500 cursor-pointer"
/>
<input
value={opt}
onChange={(e) => {
const newOpts = [...q.options];
newOpts[oIdx] = e.target.value;
updateQuestion(idx, { options: newOpts });
}}
className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm font-medium focus:outline-none focus:border-blue-500/30 transition-all"
placeholder={`Option ${oIdx + 1}`}
/>
{q.options.length > 2 && (
<button
onClick={() => {
const newOpts = q.options.filter((_, i) => i !== oIdx);
updateQuestion(idx, { options: newOpts, correct: q.correct >= newOpts.length ? 0 : q.correct });
}}
className="opacity-0 group-hover/opt:opacity-100 p-2 text-gray-500 hover:text-red-400 transition-all"
>
×
</button>
)}
</div>
))
)}
{q.type !== 'true-false' && (
<button
onClick={() => updateQuestion(idx, { options: [...q.options, `Option ${q.options.length + 1}`] })}
className="text-[10px] font-black uppercase tracking-widest text-blue-500/50 hover:text-blue-500 transition-colors pl-8 mt-2"
>
+ Add Option
</button>
)}
</div>
</div>
))}