generated from dwd/boilarplate-remix-tailwind-antd
s1
This commit is contained in:
Suvodip
506
app/components/ProgressReview.tsx
Normal file
506
app/components/ProgressReview.tsx
Normal file
@@ -0,0 +1,506 @@
|
||||
|
||||
|
||||
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]'> Correct Answer: {questionData.correctAnswer}</p>
|
||||
</div>
|
||||
<ul>
|
||||
{/* {questionData.options.map((option, index) => (
|
||||
<li key={index}>{option}</li>
|
||||
))} */}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</Modal>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user