generated from dwd/boilarplate-remix-tailwind-antd
506 lines
18 KiB
TypeScript
506 lines
18 KiB
TypeScript
|
|
|
|
let quizModuleData = {
|
|
modules: [
|
|
{
|
|
moduleId: 1,
|
|
type: "Theory Quiz Scores",
|
|
moduleName: "Module 1 - Life History of Dr. Maria Montessori",
|
|
quizzes: [
|
|
{
|
|
quizId: 1,
|
|
quizName: "Lorem Ipsum Dolor Sit",
|
|
attendQuestion: 48,
|
|
totalQuestion: 50,
|
|
internalMarks: 28,
|
|
attendance: 20,
|
|
questions: [
|
|
{
|
|
questionId: 1,
|
|
questionText: "What is the capital of France?",
|
|
options: [
|
|
"Paris",
|
|
"London",
|
|
"Berlin",
|
|
"Madrid"
|
|
],
|
|
correctAnswer: "Paris"
|
|
},
|
|
{
|
|
questionId: 2,
|
|
questionText: "What is 2 + 2?",
|
|
options: [
|
|
"3",
|
|
"4",
|
|
"5",
|
|
"6"
|
|
],
|
|
correctAnswer: "4"
|
|
},
|
|
{
|
|
questionId: 3,
|
|
questionText: "What is the boiling point of water?",
|
|
options: [
|
|
"90°C",
|
|
"100°C",
|
|
"110°C",
|
|
"120°C"
|
|
],
|
|
correctAnswer: "100°C"
|
|
},
|
|
{
|
|
questionId: 4,
|
|
questionText: "Who wrote 'To Kill a Mockingbird'?",
|
|
options: [
|
|
"Harper Lee",
|
|
"Mark Twain",
|
|
"J.K. Rowling",
|
|
"Ernest Hemingway"
|
|
],
|
|
correctAnswer: "Harper Lee"
|
|
},
|
|
{
|
|
questionId: 5,
|
|
questionText: "What is the largest planet in our solar system?",
|
|
options: [
|
|
"Earth",
|
|
"Mars",
|
|
"Jupiter",
|
|
"Saturn"
|
|
],
|
|
correctAnswer: "Jupiter"
|
|
},
|
|
{
|
|
questionId: 6,
|
|
questionText: "What is the speed of light?",
|
|
options: [
|
|
"300,000 km/s",
|
|
"150,000 km/s",
|
|
"100,000 km/s",
|
|
"50,000 km/s"
|
|
],
|
|
correctAnswer: "300,000 km/s"
|
|
},
|
|
{
|
|
questionId: 7,
|
|
questionText: "Who painted the Mona Lisa?",
|
|
options: [
|
|
"Vincent van Gogh",
|
|
"Pablo Picasso",
|
|
"Leonardo da Vinci",
|
|
"Claude Monet"
|
|
],
|
|
correctAnswer: "Leonardo da Vinci"
|
|
},
|
|
{
|
|
questionId: 8,
|
|
questionText: "What is the chemical symbol for gold?",
|
|
options: [
|
|
"Au",
|
|
"Ag",
|
|
"Pt",
|
|
"Pb"
|
|
],
|
|
correctAnswer: "Au"
|
|
},
|
|
{
|
|
questionId: 9,
|
|
questionText: "What is the tallest mountain in the world?",
|
|
options: [
|
|
"K2",
|
|
"Kangchenjunga",
|
|
"Mount Everest",
|
|
"Lhotse"
|
|
],
|
|
correctAnswer: "Mount Everest"
|
|
},
|
|
{
|
|
questionId: 10,
|
|
questionText: "What is the smallest unit of life?",
|
|
options: [
|
|
"Cell",
|
|
"Atom",
|
|
"Molecule",
|
|
"Organ"
|
|
],
|
|
correctAnswer: "Cell"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
quizId: 2,
|
|
quizName: "Lorem Ipsum Dolor Sit",
|
|
attendQuestion: 45,
|
|
totalQuestion: 50,
|
|
internalMarks: 29,
|
|
attendance: 20,
|
|
questions: [
|
|
{
|
|
questionId: 1,
|
|
questionText: "What is the capital of Italy?",
|
|
options: [
|
|
"Rome",
|
|
"Venice",
|
|
"Florence",
|
|
"Milan"
|
|
],
|
|
correctAnswer: "Rome"
|
|
},
|
|
{
|
|
questionId: 2,
|
|
questionText: "What is 3 + 5?",
|
|
options: [
|
|
"7",
|
|
"8",
|
|
"9",
|
|
"10"
|
|
],
|
|
correctAnswer: "8"
|
|
},
|
|
{
|
|
questionId: 3,
|
|
questionText: "What is the freezing point of water?",
|
|
options: [
|
|
"0°C",
|
|
"32°C",
|
|
"100°C",
|
|
"273K"
|
|
],
|
|
correctAnswer: "0°C"
|
|
},
|
|
{
|
|
questionId: 4,
|
|
questionText: "Who wrote 'Pride and Prejudice'?",
|
|
options: [
|
|
"Jane Austen",
|
|
"Charles Dickens",
|
|
"Emily Brontë",
|
|
"George Eliot"
|
|
],
|
|
correctAnswer: "Jane Austen"
|
|
},
|
|
{
|
|
questionId: 5,
|
|
questionText: "What is the smallest planet in our solar system?",
|
|
options: [
|
|
"Mercury",
|
|
"Venus",
|
|
"Earth",
|
|
"Mars"
|
|
],
|
|
correctAnswer: "Mercury"
|
|
},
|
|
{
|
|
questionId: 6,
|
|
questionText: "What is the speed of sound?",
|
|
options: [
|
|
"343 m/s",
|
|
"300 m/s",
|
|
"1500 m/s",
|
|
"1000 m/s"
|
|
],
|
|
correctAnswer: "343 m/s"
|
|
},
|
|
{
|
|
questionId: 7,
|
|
questionText: "Who painted the Starry Night?",
|
|
options: [
|
|
"Vincent van Gogh",
|
|
"Pablo Picasso",
|
|
"Leonardo da Vinci",
|
|
"Claude Monet"
|
|
],
|
|
correctAnswer: "Vincent van Gogh"
|
|
},
|
|
{
|
|
questionId: 8,
|
|
questionText: "What is the chemical symbol for silver?",
|
|
options: [
|
|
"Au",
|
|
"Ag",
|
|
"Pt",
|
|
"Pb"
|
|
],
|
|
correctAnswer: "Ag"
|
|
},
|
|
{
|
|
questionId: 9,
|
|
questionText: "What is the second tallest mountain in the world?",
|
|
options: [
|
|
"K2",
|
|
"Kangchenjunga",
|
|
"Mount Everest",
|
|
"Lhotse"
|
|
],
|
|
correctAnswer: "K2"
|
|
},
|
|
{
|
|
questionId: 10,
|
|
questionText: "What is the largest organ in the human body?",
|
|
options: [
|
|
"Liver",
|
|
"Heart",
|
|
"Skin",
|
|
"Brain"
|
|
],
|
|
correctAnswer: "Skin"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
moduleId: 2,
|
|
type: "Theory Quiz Scores",
|
|
moduleName: "Module 2",
|
|
attendQuestion: 42,
|
|
totalQuestion: 50,
|
|
internalMarks: 22,
|
|
attendance: 20,
|
|
quizzes: [
|
|
{
|
|
quizId: 1,
|
|
quizName: "Quiz 1",
|
|
attendQuestion: 49,
|
|
totalQuestion: 50,
|
|
internalMarks: 2,
|
|
attendance: 20,
|
|
questions: [
|
|
{
|
|
questionId: 1,
|
|
questionText: "What is the capital of Germany?",
|
|
options: [
|
|
"Berlin",
|
|
"Munich",
|
|
"Hamburg",
|
|
"Frankfurt"
|
|
],
|
|
correctAnswer: "Berlin"
|
|
},
|
|
{
|
|
questionId: 2,
|
|
questionText: "What is 5 + 3?",
|
|
options: [
|
|
"7",
|
|
"8",
|
|
"9",
|
|
"10"
|
|
],
|
|
correctAnswer: "8"
|
|
},
|
|
{
|
|
questionId: 3,
|
|
questionText: "What is the melting point of ice?",
|
|
options: [
|
|
"0°C",
|
|
"32°C",
|
|
"100°C",
|
|
"273K"
|
|
],
|
|
correctAnswer: "0°C"
|
|
},
|
|
{
|
|
questionId: 4,
|
|
questionText: "Who wrote '1984'?",
|
|
options: [
|
|
"George Orwell",
|
|
"Aldous Huxley",
|
|
"Ray Bradbury",
|
|
"J.D. Salinger"
|
|
],
|
|
correctAnswer: "George Orwell"
|
|
},
|
|
{
|
|
questionId: 5,
|
|
questionText: "What is the second smallest planet in our solar system?",
|
|
options: [
|
|
"Mercury",
|
|
"Venus",
|
|
"Earth",
|
|
"Mars"
|
|
],
|
|
correctAnswer: "Mars"
|
|
},
|
|
{
|
|
questionId: 6,
|
|
questionText: "What is the speed of light in a vacuum?",
|
|
options: [
|
|
"300,000 km/s",
|
|
"150,000 km/s",
|
|
"299,792 km/s",
|
|
"299,792 m/s"
|
|
],
|
|
correctAnswer: "299,792 km/s"
|
|
},
|
|
{
|
|
questionId: 7,
|
|
questionText: "Who painted the Last Supper?",
|
|
options: [
|
|
"Vincent van Gogh",
|
|
"Pablo Picasso",
|
|
"Leonardo da Vinci",
|
|
"Claude Monet"
|
|
],
|
|
correctAnswer: "Leonardo da Vinci"
|
|
},
|
|
{
|
|
questionId: 8,
|
|
questionText: "What is the chemical symbol for iron?",
|
|
options: [
|
|
"Fe",
|
|
"Ir",
|
|
"In",
|
|
"I"
|
|
],
|
|
correctAnswer: "Fe"
|
|
},
|
|
{
|
|
questionId: 9,
|
|
questionText: "What is the third tallest mountain in the world?",
|
|
options: [
|
|
"K2",
|
|
"Kangchenjunga",
|
|
"Mount Everest",
|
|
"Lhotse"
|
|
],
|
|
correctAnswer: "Kangchenjunga"
|
|
},
|
|
{
|
|
questionId: 10,
|
|
questionText: "What is the smallest bone in the human body?",
|
|
options: [
|
|
"Stapes",
|
|
"Femur",
|
|
"Tibia",
|
|
"Fibula"
|
|
],
|
|
correctAnswer: "Stapes"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
console.log(quizModuleData)
|
|
import React, { useState } from 'react';
|
|
import { Modal } from 'antd';
|
|
|
|
|
|
export default function Index() {
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [selectedQuiz, setSelectedQuiz] = useState(null);
|
|
|
|
const showModal = (quiz) => {
|
|
setSelectedQuiz(quiz);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleOk = () => {
|
|
setIsModalOpen(false);
|
|
setSelectedQuiz(null);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setIsModalOpen(false);
|
|
setSelectedQuiz(null);
|
|
};
|
|
|
|
return (
|
|
<section className="">
|
|
<div className="flex flex-col">
|
|
{
|
|
quizModuleData.modules.map((moduleData) => (
|
|
<div key={moduleData.moduleId}>
|
|
<div className="p-6">
|
|
<p className="text-[16px] font-[700] text-[#EF7A0C]">{moduleData.type}</p>
|
|
<p className="text-[22px] font-[700]">{moduleData.moduleName}</p>
|
|
<p className="text-[14px] font-[600]">3/8 Quizzes Completed </p>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
{
|
|
moduleData.quizzes.map((quizData) => (
|
|
<div onClick={() => showModal(quizData)} className="flex flex-row justify-between place-items-center hover:bg-[#FFF4EA] duration-500 border-b-[1px] border-b-[#CFCFCF] p-6 cursor-pointer" key={quizData.quizId}>
|
|
<div className="flex flex-col space-y-2">
|
|
<h3 className="text-[20px] font-[700]">#{quizData.quizId} {quizData.quizName}</h3>
|
|
<p className="text-[16px] font-[700] text-[#6E6E6E]">
|
|
<span>Internal Marks: {quizData.internalMarks}</span> •
|
|
<span>Attendance: {quizData.attendance}</span>
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-row space-x-4">
|
|
<p className="bg-[#FFE2C7] p-2 rounded-[8px]">
|
|
<span className="text-[32px] font-[700] text-[#EF7A0C]">{quizData.attendQuestion}</span>/
|
|
<span className="text-[16px] font-[700] ">{quizData.totalQuestion}</span>
|
|
</p>
|
|
<img src="../../assets/right-arrow.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
{selectedQuiz && (
|
|
<Modal title={selectedQuiz.quizName} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={1000}>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-b-[1px] border-b-[#CFCFCF]">
|
|
<div className="flex justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-3">
|
|
<div className="flex flex-row space-x-2">
|
|
<div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
|
|
<img className=" " src="../../assets/calendar.svg" alt="" />
|
|
</div>
|
|
<div className='flex flex-col'>
|
|
<p className="text-[20px] font-[800]">18/10</p>
|
|
<p className="text-[14px] font-[600] text-[#414141]">Attendance</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-3">
|
|
<div className="flex flex-row space-x-2">
|
|
<div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
|
|
<img className=" " src="../../assets/note.svg" alt="" />
|
|
</div>
|
|
<div className='flex flex-col'>
|
|
<p className="text-[20px] font-[800]">12 <span className="text-[14px] font-[500]">Questions</span></p>
|
|
<p className="text-[14px] font-[600] text-[#414141]">Attempted</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center place-items-center my-3">
|
|
<div className="flex flex-row space-x-2">
|
|
<div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
|
|
<img className=" " src="../../assets/note.svg" alt="" />
|
|
</div>
|
|
<div className='flex flex-col'>
|
|
<p className="text-[20px] font-[800]">12 <span className="text-[14px] font-[500]">Correct</span></p>
|
|
<p className="text-[14px] font-[600] text-[#414141]">Attempts</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{selectedQuiz.questions.map((questionData) => (
|
|
<div key={questionData.questionId} className="mb-4 px-10 flex flex-col space-y-2">
|
|
<p className='text-[20px] font-[700]'>Q{questionData.questionId}: {questionData.questionText}</p>
|
|
<p className="text-[16px] font-[600] text-[#EF7A0C]">Your Answer</p>
|
|
<p className="text-[20px] font-[500]">{questionData.correctAnswer}</p>
|
|
<div className='inline-flex place-items-center space-x-4 w-full border-[1px] border-[#218B32] rounded-[10px] p-3'>
|
|
<p className='text-[14px] font-[700] text-[#218B32] inline-flex place-items-center'><img src="../../assets/green-tick.svg" alt="" /> Correct</p>
|
|
<p className='text-[14px] font-[400]'> {questionData.correctAnswer}</p>
|
|
</div>
|
|
<ul>
|
|
{/* {questionData.options.map((option, index) => (
|
|
<li key={index}>{option}</li>
|
|
))} */}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</Modal>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|