web #1
@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from "react";
|
||||||
import { QuizData } from '../types';
|
import { type QuizData } from "../../types/lesson";
|
||||||
import { CheckCircle2, XCircle, ChevronRight } from 'lucide-react';
|
import { CheckCircle2, XCircle, ChevronRight } from "lucide-react";
|
||||||
|
|
||||||
interface QuizProps {
|
interface QuizProps {
|
||||||
data: QuizData;
|
data: QuizData;
|
||||||
@ -21,20 +21,24 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
|
|||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
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);
|
||||||
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 isCorrect = selectedOption?.isCorrect;
|
const isCorrect = selectedOption?.isCorrect;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full max-w-2xl mx-auto bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mt-6">
|
<div className="w-full max-w-2xl mx-auto bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mt-6">
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<h4 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-2">Concept Check</h4>
|
<h4 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-2">
|
||||||
<p className="text-lg font-medium text-slate-900 mb-6 whitespace-pre-line">{data.question}</p>
|
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) => {
|
||||||
@ -52,11 +56,11 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
|
|||||||
icon = <XCircle className="w-5 h-5 text-red-600" />;
|
icon = <XCircle className="w-5 h-5 text-red-600" />;
|
||||||
}
|
}
|
||||||
} 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";
|
||||||
}
|
}
|
||||||
} else if (selectedId === option.id) {
|
} else if (selectedId === option.id) {
|
||||||
borderClass = "border-indigo-600 bg-indigo-50";
|
borderClass = "border-indigo-600 bg-indigo-50";
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -67,14 +71,22 @@ 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 ${
|
<span
|
||||||
isSubmitted && option.isCorrect ? 'bg-green-200 text-green-800' :
|
className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold mr-3 ${
|
||||||
isSubmitted && option.id === selectedId ? 'bg-red-200 text-red-800' :
|
isSubmitted && option.isCorrect
|
||||||
selectedId === option.id ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-500'
|
? "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"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
{option.id}
|
{option.id}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-slate-700 group-hover:text-slate-900">{option.text}</span>
|
<span className="text-slate-700 group-hover:text-slate-900">
|
||||||
|
{option.text}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{icon}
|
{icon}
|
||||||
</button>
|
</button>
|
||||||
@ -85,21 +97,33 @@ 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
|
||||||
|
className={`p-6 border-t ${isCorrect ? "bg-green-50 border-green-100" : "bg-slate-50 border-slate-100"}`}
|
||||||
|
>
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<div className={`mt-1 p-1 rounded-full ${isCorrect ? 'bg-green-200' : 'bg-slate-200'}`}>
|
<div
|
||||||
{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>}
|
className={`mt-1 p-1 rounded-full ${isCorrect ? "bg-green-200" : "bg-slate-200"}`}
|
||||||
</div>
|
>
|
||||||
<div>
|
{isCorrect ? (
|
||||||
<p className={`font-bold ${isCorrect ? 'text-green-800' : 'text-slate-800'} mb-1`}>
|
<CheckCircle2 className="w-4 h-4 text-green-700" />
|
||||||
{isCorrect ? "That's right!" : "Not quite."}
|
) : (
|
||||||
</p>
|
<div className="w-4 h-4 text-slate-500 font-bold text-center leading-4">
|
||||||
<p className="text-slate-600 mb-2">{selectedOption?.feedback}</p>
|
i
|
||||||
<div className="text-sm text-slate-500 bg-white p-3 rounded border border-slate-200">
|
</div>
|
||||||
<span className="font-semibold block mb-1">Explanation:</span>
|
)}
|
||||||
{data.explanation}
|
</div>
|
||||||
</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>
|
||||||
)}
|
)}
|
||||||
@ -111,8 +135,8 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
|
|||||||
disabled={!selectedId}
|
disabled={!selectedId}
|
||||||
className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center ${
|
className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center ${
|
||||||
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"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
Check Answer <ChevronRight className="w-4 h-4 ml-1" />
|
Check Answer <ChevronRight className="w-4 h-4 ml-1" />
|
||||||
|
|||||||
Reference in New Issue
Block a user