shafin808s/edbridge-scholars
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'web' of https://git.omukk.dev/shafin808s/edbridge-scholars into web

Browse Source
This commit is contained in:
Sheikh Muhtadee Aslam Taron
2026-03-04 03:26:29 +06:00
parent 437c7a517f e75233929a
commit a08476ec53
3 changed files with 61 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/lessons/Quiz.tsx
View File

@ -22,11 +22,13 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
if (!selectedId) return; if (!selectedId) return;
setIsSubmitted(true); setIsSubmitted(true);
const selectedOption = data.options.find((opt) => opt.id === selectedId); const selectedOption = data.options.find((opt) => opt.id === selectedId);
const selectedOption = data.options.find((opt) => opt.id === selectedId);
if (selectedOption?.isCorrect && onComplete) { if (selectedOption?.isCorrect && onComplete) {
onComplete(); onComplete();
} }
}; };
const selectedOption = data.options.find((opt) => opt.id === selectedId);
const selectedOption = data.options.find((opt) => opt.id === selectedId); const selectedOption = data.options.find((opt) => opt.id === selectedId);
const isCorrect = selectedOption?.isCorrect; const isCorrect = selectedOption?.isCorrect;
@ -39,6 +41,12 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
<p className="text-lg font-medium text-slate-900 mb-6 whitespace-pre-line"> <p className="text-lg font-medium text-slate-900 mb-6 whitespace-pre-line">
{data.question} {data.question}
</p> </p>
<h4 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-2">
Concept Check
</h4>
<p className="text-lg font-medium text-slate-900 mb-6 whitespace-pre-line">
{data.question}
</p>
<div className="space-y-3"> <div className="space-y-3">
{data.options.map((option) => { {data.options.map((option) => {
@ -58,9 +66,12 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
} else if (option.isCorrect) { } else if (option.isCorrect) {
// Highlight correct answer if wrong one was picked // Highlight correct answer if wrong one was picked
borderClass = "border-green-200 bg-green-50/50"; borderClass = "border-green-200 bg-green-50/50";
// Highlight correct answer if wrong one was picked
borderClass = "border-green-200 bg-green-50/50";
} }
} else if (selectedId === option.id) { } else if (selectedId === option.id) {
borderClass = "border-indigo-600 bg-indigo-50"; borderClass = "border-indigo-600 bg-indigo-50";
borderClass = "border-indigo-600 bg-indigo-50";
} }
return ( return (
@ -71,6 +82,17 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
className={`w-full text-left p-4 rounded-lg border-2 transition-all duration-200 flex items-center justify-between group ${borderClass} ${bgClass}`} className={`w-full text-left p-4 rounded-lg border-2 transition-all duration-200 flex items-center justify-between group ${borderClass} ${bgClass}`}
> >
<div className="flex items-center"> <div className="flex items-center">
<span
className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold mr-3 ${
isSubmitted && option.isCorrect
? "bg-green-200 text-green-800"
: isSubmitted && option.id === selectedId
? "bg-red-200 text-red-800"
: selectedId === option.id
? "bg-indigo-600 text-white"
: "bg-slate-100 text-slate-500"
}`}
>
<span <span
className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold mr-3 ${ className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold mr-3 ${
isSubmitted && option.isCorrect isSubmitted && option.isCorrect
@ -87,6 +109,9 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
<span className="text-slate-700 group-hover:text-slate-900"> <span className="text-slate-700 group-hover:text-slate-900">
{option.text} {option.text}
</span> </span>
<span className="text-slate-700 group-hover:text-slate-900">
{option.text}
</span>
</div> </div>
{icon} {icon}
</button> </button>
@ -97,6 +122,9 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
{/* Feedback Section */} {/* Feedback Section */}
{isSubmitted && ( {isSubmitted && (
<div
className={`p-6 border-t ${isCorrect ? "bg-green-50 border-green-100" : "bg-slate-50 border-slate-100"}`}
>
<div <div
className={`p-6 border-t ${isCorrect ? "bg-green-50 border-green-100" : "bg-slate-50 border-slate-100"}`} className={`p-6 border-t ${isCorrect ? "bg-green-50 border-green-100" : "bg-slate-50 border-slate-100"}`}
> >
@ -124,6 +152,29 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
{data.explanation} {data.explanation}
</div> </div>
</div> </div>
<div
className={`mt-1 p-1 rounded-full ${isCorrect ? "bg-green-200" : "bg-slate-200"}`}
>
{isCorrect ? (
<CheckCircle2 className="w-4 h-4 text-green-700" />
) : (
<div className="w-4 h-4 text-slate-500 font-bold text-center leading-4">
i
</div>
)}
</div>
<div>
<p
className={`font-bold ${isCorrect ? "text-green-800" : "text-slate-800"} mb-1`}
>
{isCorrect ? "That's right!" : "Not quite."}
</p>
<p className="text-slate-600 mb-2">{selectedOption?.feedback}</p>
<div className="text-sm text-slate-500 bg-white p-3 rounded border border-slate-200">
<span className="font-semibold block mb-1">Explanation:</span>
{data.explanation}
</div>
</div>
</div> </div>
</div> </div>
)} )}
@ -137,6 +188,9 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
selectedId selectedId
? "bg-slate-900 text-white hover:bg-slate-800 shadow-md transform hover:-translate-y-0.5" ? "bg-slate-900 text-white hover:bg-slate-800 shadow-md transform hover:-translate-y-0.5"
: "bg-slate-200 text-slate-400 cursor-not-allowed" : "bg-slate-200 text-slate-400 cursor-not-allowed"
selectedId
? "bg-slate-900 text-white hover:bg-slate-800 shadow-md transform hover:-translate-y-0.5"
: "bg-slate-200 text-slate-400 cursor-not-allowed"
}`} }`}
> >
Check Answer <ChevronRight className="w-4 h-4 ml-1" /> Check Answer <ChevronRight className="w-4 h-4 ml-1" />

2
src/pages/student/Lessons.tsx
View File

@ -35,6 +35,8 @@ const STYLES = `
:root { --content-max: 1100px; } :root { --content-max: 1100px; }
:root { --content-max: 1100px; }
.ls-screen { .ls-screen {
min-height: 100vh; min-height: 100vh;
background: #fffbf4; background: #fffbf4;

5
src/pages/student/StudentLayout.tsx
View File

@ -174,6 +174,11 @@ const STYLES = `
opacity: 1; opacity: 1;
} }
/* Ensure the dock is hidden on desktop (md and up) */
@media (min-width: 768px) {
.sl-dock-wrap { display: none !important; }
}
/* Quest mode: active label uses Cinzel for the pirate feel */ /* Quest mode: active label uses Cinzel for the pirate feel */
.quest-mode .sl-dock-item.active .sl-dock-label { .quest-mode .sl-dock-item.active .sl-dock-label {
font-family: 'Sorts Mill Goudy', serif; font-family: 'Sorts Mill Goudy', serif;