generated from dwd/boilarplate-remix-tailwind-antd
dynamic data
Suvodip
parent
db1be21da7
commit
c665a27db8
|
|
@ -1,146 +1,43 @@
|
||||||
let classmatesData = [
|
import React, { useEffect, useState } from 'react';
|
||||||
{
|
interface Performer {
|
||||||
id: "1",
|
id: number;
|
||||||
name: "Daniel Nguyen",
|
name: string;
|
||||||
program: "Graduate Program",
|
avatar: string;
|
||||||
type: "Student",
|
program: string;
|
||||||
avatar: "avatar1.png"
|
type: string;
|
||||||
},
|
}
|
||||||
{
|
|
||||||
id: "2",
|
export default function classMatesDirectory() {
|
||||||
name: "Sarah Anderson",
|
const [classmatesData, setData] = useState<Performer[]>([]);
|
||||||
program: "Post-Graduate Program",
|
const [loading, setLoading] = useState(true);
|
||||||
type: "Student",
|
const [error, setError] = useState<Error | null>(null);
|
||||||
avatar: "avatar2.png"
|
|
||||||
},
|
|
||||||
{
|
useEffect(() => {
|
||||||
id: "3",
|
fetch('https://iimtt-api.s38.siliconpin.com/api/class-mates')
|
||||||
name: "John Smith",
|
.then(res => {
|
||||||
program: "Undergraduate Program",
|
if (!res.ok) {
|
||||||
type: "Student",
|
throw new Error('Network response was not ok');
|
||||||
avatar: "avatar3.png"
|
}
|
||||||
},
|
return res.json();
|
||||||
{
|
})
|
||||||
id: "4",
|
.then(data => {
|
||||||
name: "Emily Davis",
|
setData(data);
|
||||||
program: "Graduate Program",
|
setLoading(false);
|
||||||
type: "Student",
|
})
|
||||||
avatar: "avatar4.png"
|
.catch(error => {
|
||||||
},
|
console.error('Error fetching data:', error);
|
||||||
{
|
setError(error);
|
||||||
id: "5",
|
setLoading(false);
|
||||||
name: "Michael Johnson",
|
});
|
||||||
program: "Post-Graduate Program",
|
}, []);
|
||||||
type: "Student",
|
if (loading) {
|
||||||
avatar: "avatar5.png"
|
return <div>Loading...</div>;
|
||||||
},
|
}
|
||||||
{
|
|
||||||
id: "6",
|
if (error) {
|
||||||
name: "Jessica Wilson",
|
return <div>Error: {error.message}</div>;
|
||||||
program: "Undergraduate Program",
|
}
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar6.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "7",
|
|
||||||
name: "David Brown",
|
|
||||||
program: "Graduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar1.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "8",
|
|
||||||
name: "Laura Lee",
|
|
||||||
program: "Post-Graduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar2.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "9",
|
|
||||||
name: "Chris Miller",
|
|
||||||
program: "Undergraduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar3.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "10",
|
|
||||||
name: "Sophia Taylor",
|
|
||||||
program: "Graduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar4.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "11",
|
|
||||||
name: "James Anderson",
|
|
||||||
program: "Post-Graduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar5.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "12",
|
|
||||||
name: "Olivia Thomas",
|
|
||||||
program: "Undergraduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar6.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "13",
|
|
||||||
name: "Ethan Martinez",
|
|
||||||
program: "Graduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar1.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "14",
|
|
||||||
name: "Ava Garcia",
|
|
||||||
program: "Post-Graduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar2.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "15",
|
|
||||||
name: "Noah Rodriguez",
|
|
||||||
program: "Undergraduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar3.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "16",
|
|
||||||
name: "Mia Martinez",
|
|
||||||
program: "Graduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar4.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "17",
|
|
||||||
name: "Lucas Wilson",
|
|
||||||
program: "Post-Graduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar5.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "18",
|
|
||||||
name: "Isabella Clark",
|
|
||||||
program: "Undergraduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar6.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "19",
|
|
||||||
name: "Liam Walker",
|
|
||||||
program: "Graduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar1.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "20",
|
|
||||||
name: "Charlotte Lewis",
|
|
||||||
program: "Post-Graduate Program",
|
|
||||||
type: "Student",
|
|
||||||
avatar: "avatar2.png"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
export default function Index() {
|
|
||||||
return (
|
return (
|
||||||
<div className=''>
|
<div className=''>
|
||||||
<p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-b-[#CFCFCF] py-5 pl-5 container-fluid'>
|
<p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-b-[#CFCFCF] py-5 pl-5 container-fluid'>
|
||||||
|
|
@ -149,9 +46,9 @@ export default function Index() {
|
||||||
<div className='container mx-auto grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 place-items-center p-6'>
|
<div className='container mx-auto grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 place-items-center p-6'>
|
||||||
{classmatesData.map(data => (
|
{classmatesData.map(data => (
|
||||||
<div key={data.id} className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
|
<div key={data.id} className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
|
||||||
<div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('../../assets/${data.avatar}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)'}}></div>
|
<div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('${data.avatar}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)'}}></div>
|
||||||
<div className='absolute bottom-0 left-0 w-full h-1/2 bg-[#FFF] '></div><br /><br />
|
<div className='absolute bottom-0 left-0 w-full h-1/2 bg-[#FFF] '></div><br /><br />
|
||||||
<img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={`../../assets/${data.avatar}`} alt="" />
|
<img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={data.avatar} alt="" />
|
||||||
<p className='z-10 text-[16px] font-[700] text-[]'>{data.name}</p>
|
<p className='z-10 text-[16px] font-[700] text-[]'>{data.name}</p>
|
||||||
<p className='z-10 text-[12px] font-[500] text-[#6E6E6E]'>
|
<p className='z-10 text-[12px] font-[500] text-[#6E6E6E]'>
|
||||||
<span>{data.program}</span> | <span>{data.type}</span>
|
<span>{data.program}</span> | <span>{data.type}</span>
|
||||||
|
|
@ -161,11 +58,4 @@ export default function Index() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{/* <div className="h-[90px] bg-cover bg-center w-full" style={{ backgroundImage: `url('../../assets/${data.avatar}')` }}>
|
|
||||||
<img className='w-[60px] h-[60px]' src={`../../assets/${data.avatar}`} alt="" />
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi nisi eligendi consectetur sequi nemo doloribus, obcaecati corrupti dolorum dolores omnis magni similique. Debitis unde nam, magnam maxime magni repudiandae.</p>
|
|
||||||
</div> */}
|
|
||||||
|
|
@ -1,28 +1,43 @@
|
||||||
let courseData = [
|
import React, { useEffect, useState } from 'react';
|
||||||
{
|
interface Performer {
|
||||||
id : "1",
|
id: number;
|
||||||
title : "Life History of Dr. Maria Montessori",
|
title: string;
|
||||||
chapter : "1",
|
chapter: string;
|
||||||
Program : "Graduate Program",
|
img: string;
|
||||||
img : "../../assets/course1.jpg"
|
Program: string;
|
||||||
},
|
}
|
||||||
{
|
|
||||||
id : "2",
|
|
||||||
title : "Introduction to Montessori Methods",
|
|
||||||
chapter : "2",
|
|
||||||
Program : "Graduate Program",
|
|
||||||
img : "../../assets/course2.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id : "3",
|
|
||||||
title : "Exercises on Practical Life",
|
|
||||||
chapter : "3",
|
|
||||||
Program : "Graduate Program",
|
|
||||||
img : "../../assets/course3.jpg"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function Index() {
|
export default function ContinueLearning() {
|
||||||
|
const [courseData, setData] = useState<Performer[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch('https://iimtt-api.s38.siliconpin.com/api/continue-learning')
|
||||||
|
.then(res => {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
setData(data);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
setError(error);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
if (loading) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div>Error: {error.message}</div>;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<section className='bg-[#FCFCFC]'>
|
<section className='bg-[#FCFCFC]'>
|
||||||
<div className='container mx-auto'>
|
<div className='container mx-auto'>
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,43 @@
|
||||||
let knowledgeData = [
|
import React, { useEffect, useState } from 'react';
|
||||||
{
|
interface Performer {
|
||||||
id: "1",
|
id: number;
|
||||||
status: "1",
|
title: string;
|
||||||
title: "Assessment on Special Education",
|
img: string;
|
||||||
challenge: "Challenge yourself & climb the leaderboard.",
|
challenge: string;
|
||||||
question: "Subjective Question",
|
question: string;
|
||||||
img: "../../assets/knowledge1.jpg"
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
status: "1",
|
|
||||||
title: "Quiz on Children Psychology",
|
|
||||||
challenge: "Challenge yourself & climb the leaderboard.",
|
|
||||||
question: "MCQ",
|
|
||||||
img: "../../assets/knowledge2.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
status: "1",
|
|
||||||
title: "Quiz on Montessori Methods",
|
|
||||||
challenge: "Challenge yourself & climb the leaderboard.",
|
|
||||||
question: "MCQ",
|
|
||||||
img: "../../assets/knowledge3.jpg"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function(){
|
export default function KnowledgeQuests() {
|
||||||
|
const [knowledgeData, setData] = useState<Performer[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch('https://iimtt-api.s38.siliconpin.com/api/knowledge-quests')
|
||||||
|
.then(res => {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
setData(data);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
setError(error);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
if (loading) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div>Error: {error.message}</div>;
|
||||||
|
}
|
||||||
return(
|
return(
|
||||||
<section className=''>
|
<section className=''>
|
||||||
<div className=''>
|
<div className=''>
|
||||||
|
|
@ -51,4 +63,4 @@ export default function(){
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,397 +1,71 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
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';
|
import { Modal } from 'antd';
|
||||||
|
|
||||||
|
interface Question {
|
||||||
|
questionId: string;
|
||||||
|
questionText: string;
|
||||||
|
correctAnswer: string;
|
||||||
|
options: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Quiz {
|
||||||
|
quizId: string;
|
||||||
|
quizName: string;
|
||||||
|
internalMarks: string;
|
||||||
|
attendance: string;
|
||||||
|
attendQuestion: string;
|
||||||
|
totalQuestion: string;
|
||||||
|
questions: Question[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Module {
|
||||||
|
moduleId: string;
|
||||||
|
type: string;
|
||||||
|
moduleName: string;
|
||||||
|
quizzes: Quiz[];
|
||||||
|
}
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
const [selectedQuiz, setSelectedQuiz] = useState(null);
|
const [selectedQuiz, setSelectedQuiz] = useState<Quiz | null>(null);
|
||||||
|
const [quizModuleData, setQuizModuleData] = useState<Module[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
const showModal = (quiz) => {
|
useEffect(() => {
|
||||||
|
fetch('https://iimtt-api.s38.siliconpin.com/api/quiz-module')
|
||||||
|
.then((res) => {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
// console.log('Fetched data:', data);
|
||||||
|
// Extract the modules array from the response
|
||||||
|
if (data && Array.isArray(data.modules)) {
|
||||||
|
setQuizModuleData(data.modules);
|
||||||
|
} else {
|
||||||
|
setError(new Error('Fetched data is not an array'));
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
setError(error);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div>Error: {error.message}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const showModal = (quiz: Quiz) => {
|
||||||
setSelectedQuiz(quiz);
|
setSelectedQuiz(quiz);
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
@ -408,98 +82,113 @@ export default function Index() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="">
|
<section className="">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
{
|
{quizModuleData.length > 0 ? (
|
||||||
quizModuleData.modules.map((moduleData) => (
|
quizModuleData.map((moduleData) => (
|
||||||
<div key={moduleData.moduleId}>
|
<div key={moduleData.moduleId}>
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<p className="text-[16px] font-[700] text-[#EF7A0C]">{moduleData.type}</p>
|
<p className="text-[16px] font-[700] text-[#EF7A0C]">{moduleData.type}</p>
|
||||||
<p className="text-[22px] font-[700]">{moduleData.moduleName}</p>
|
<p className="text-[22px] font-[700]">{moduleData.moduleName}</p>
|
||||||
<p className="text-[14px] font-[600]">3/8 Quizzes Completed </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>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-row space-x-4">
|
||||||
{
|
<p className="bg-[#FFE2C7] p-2 rounded-[8px]">
|
||||||
moduleData.quizzes.map((quizData) => (
|
<span className="text-[32px] font-[700] text-[#EF7A0C]">{quizData.attendQuestion}</span>/
|
||||||
<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}>
|
<span className="text-[16px] font-[700] ">{quizData.totalQuestion}</span>
|
||||||
<div className="flex flex-col space-y-2">
|
</p>
|
||||||
<h3 className="text-[20px] font-[700]">#{quizData.quizId} {quizData.quizName}</h3>
|
<img src="../../assets/right-arrow.svg" alt="" />
|
||||||
<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>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</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>
|
</div>
|
||||||
))}
|
))}
|
||||||
</Modal>
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div>No quiz modules available.</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>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,130 +1,43 @@
|
||||||
import React from 'react';
|
|
||||||
import { Flex, Progress } from 'antd';
|
import { Flex, Progress } from 'antd';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
interface Performer {
|
||||||
|
quizId: number;
|
||||||
|
quizType: string;
|
||||||
|
quizName: string;
|
||||||
|
percentage: string;
|
||||||
|
}
|
||||||
|
|
||||||
let quizData = [
|
export default function quizScoreData() {
|
||||||
{
|
const [quizData, setData] = useState<Performer[]>([]);
|
||||||
quizId: 1,
|
const [loading, setLoading] = useState(true);
|
||||||
quizType: "AI Quiz",
|
const [error, setError] = useState<Error | null>(null);
|
||||||
quizName: "Assessment on Special Education - 1",
|
|
||||||
percentage: "60"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 2,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 2",
|
|
||||||
percentage: "75"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 3,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 3",
|
|
||||||
percentage: "80"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 4,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 4",
|
|
||||||
percentage: "65"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 5,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 5",
|
|
||||||
percentage: "70"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 6,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 6",
|
|
||||||
percentage: "85"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 7,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 7",
|
|
||||||
percentage: "90"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 8,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 8",
|
|
||||||
percentage: "95"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 9,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 9",
|
|
||||||
percentage: "88"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 10,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 10",
|
|
||||||
percentage: "92"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 11,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 11",
|
|
||||||
percentage: "77"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 12,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 12",
|
|
||||||
percentage: "82"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 13,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 13",
|
|
||||||
percentage: "68"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 14,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 14",
|
|
||||||
percentage: "73"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 15,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 15",
|
|
||||||
percentage: "79"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 16,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 16",
|
|
||||||
percentage: "87"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 17,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 17",
|
|
||||||
percentage: "93"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 18,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 18",
|
|
||||||
percentage: "67"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 19,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 19",
|
|
||||||
percentage: "89"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quizId: 20,
|
|
||||||
quizType: "AI Quiz",
|
|
||||||
quizName: "Assessment on Special Education - 20",
|
|
||||||
percentage: "91"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function Index(){
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch('https://iimtt-api.s38.siliconpin.com/api/quiz-score')
|
||||||
|
.then(res => {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
setData(data);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
setError(error);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
if (loading) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div>Error: {error.message}</div>;
|
||||||
|
}
|
||||||
return(
|
return(
|
||||||
<section>
|
<section>
|
||||||
<div className="border-[1px] border-[#CFCFCF] rounded-t-[10px]" style={{background: 'linear-gradient(138.22deg, #4377C6 0%, #092E76 180.99%)'}}>
|
<div className="border-[1px] border-[#CFCFCF] rounded-t-[10px]" style={{background: 'linear-gradient(138.22deg, #4377C6 0%, #092E76 180.99%)'}}>
|
||||||
|
|
@ -148,5 +61,5 @@ export default function Index(){
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// quiz-details
|
||||||
{/* <Progress type="dashboard" percent={75} gapDegree={30} /> */}
|
{/* <Progress type="dashboard" percent={75} gapDegree={30} /> */}
|
||||||
|
|
@ -1,254 +1,99 @@
|
||||||
let performersData = [
|
import React, { useEffect, useState } from 'react';
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
name: "Eiden",
|
|
||||||
score: "48/50",
|
|
||||||
points: "999",
|
|
||||||
rank: "1",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar1.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
name: "Jackson",
|
|
||||||
score: "45/50",
|
|
||||||
points: "997",
|
|
||||||
rank: "2",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar2.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
name: "Emma Aria",
|
|
||||||
score: "43/50",
|
|
||||||
points: "994",
|
|
||||||
rank: "3",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar3.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
name: "John Doe",
|
|
||||||
score: "40/50",
|
|
||||||
points: "990",
|
|
||||||
rank: "4",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar4.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5",
|
|
||||||
name: "Jane Cooper",
|
|
||||||
score: "37/50",
|
|
||||||
points: "987",
|
|
||||||
rank: "5",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar5.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "6",
|
|
||||||
name: "John Doe",
|
|
||||||
score: "35/50",
|
|
||||||
points: "982",
|
|
||||||
rank: "6",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar6.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "7",
|
|
||||||
name: "Alice",
|
|
||||||
score: "33/50",
|
|
||||||
points: "980",
|
|
||||||
rank: "7",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar1.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "8",
|
|
||||||
name: "Bob",
|
|
||||||
score: "32/50",
|
|
||||||
points: "978",
|
|
||||||
rank: "8",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar2.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "9",
|
|
||||||
name: "Charlie",
|
|
||||||
score: "30/50",
|
|
||||||
points: "975",
|
|
||||||
rank: "9",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar3.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "10",
|
|
||||||
name: "Diana",
|
|
||||||
score: "28/50",
|
|
||||||
points: "972",
|
|
||||||
rank: "10",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar4.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "11",
|
|
||||||
name: "Edward",
|
|
||||||
score: "27/50",
|
|
||||||
points: "970",
|
|
||||||
rank: "11",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar5.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "12",
|
|
||||||
name: "Fiona",
|
|
||||||
score: "26/50",
|
|
||||||
points: "968",
|
|
||||||
rank: "12",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar6.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "13",
|
|
||||||
name: "George",
|
|
||||||
score: "25/50",
|
|
||||||
points: "965",
|
|
||||||
rank: "13",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar1.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "14",
|
|
||||||
name: "Hannah",
|
|
||||||
score: "23/50",
|
|
||||||
points: "962",
|
|
||||||
rank: "14",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar2.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "15",
|
|
||||||
name: "Ian",
|
|
||||||
score: "22/50",
|
|
||||||
points: "960",
|
|
||||||
rank: "15",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar3.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "16",
|
|
||||||
name: "Julia",
|
|
||||||
score: "20/50",
|
|
||||||
points: "957",
|
|
||||||
rank: "16",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar4.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "17",
|
|
||||||
name: "Kyle",
|
|
||||||
score: "19/50",
|
|
||||||
points: "955",
|
|
||||||
rank: "17",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar5.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "18",
|
|
||||||
name: "Laura",
|
|
||||||
score: "18/50",
|
|
||||||
points: "953",
|
|
||||||
rank: "18",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar6.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "19",
|
|
||||||
name: "Michael",
|
|
||||||
score: "17/50",
|
|
||||||
points: "950",
|
|
||||||
rank: "19",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar1.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "20",
|
|
||||||
name: "Nancy",
|
|
||||||
score: "16/50",
|
|
||||||
points: "947",
|
|
||||||
rank: "20",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar2.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "21",
|
|
||||||
name: "Oliver",
|
|
||||||
score: "15/50",
|
|
||||||
points: "945",
|
|
||||||
rank: "21",
|
|
||||||
program: "Graduate Program",
|
|
||||||
avatar: "avatar3.png"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
|
interface Performer {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
rank: number;
|
||||||
|
avatar: string;
|
||||||
|
score: number;
|
||||||
|
program: string;
|
||||||
|
points: number;
|
||||||
|
}
|
||||||
|
|
||||||
const highestRank = sortedData[0];
|
export default function TopPerformers() {
|
||||||
const secondHighestRank = sortedData[1];
|
const [data, setData] = useState<Performer[]>([]);
|
||||||
const thirdHighestRank = sortedData[2];
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
// console.log('The highest rank is:', highestRank);
|
useEffect(() => {
|
||||||
// console.log('The second highest rank is:', secondHighestRank);
|
fetch('https://iimtt-api.s38.siliconpin.com/api/top-performers')
|
||||||
// console.log('The Third highest rank is:', thirdHighestRank);
|
.then(res => {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
const sortedData: Performer[] = data.sort((a: Performer, b: Performer) => a.rank - b.rank);
|
||||||
|
setData(sortedData);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
setError(error);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
export default function(){
|
if (error) {
|
||||||
return(
|
return <div>Error: {error.message}</div>;
|
||||||
<div className=''>
|
}
|
||||||
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
|
||||||
<p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
|
const [highestRank, secondHighestRank, thirdHighestRank, ...sortedData] = data;
|
||||||
<div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
|
|
||||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
return (
|
||||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
<div className=''>
|
||||||
<img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
|
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>
|
||||||
<img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
|
Top Performers <img src="../../assets/right-arrow.svg" alt="" />
|
||||||
</div>
|
</h2>
|
||||||
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
|
<p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
|
||||||
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
|
<div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
|
||||||
</div>
|
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||||
<div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
<img className='mx-auto h-[52px] w-[60px]' src={secondHighestRank.avatar} alt="" />
|
||||||
<img className='-mt-10' src="../../assets/crown.png" alt="" />
|
<img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
|
||||||
<img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
|
</div>
|
||||||
<img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
|
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
|
||||||
</div>
|
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
|
||||||
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
|
|
||||||
<p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
|
|
||||||
</div>
|
|
||||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
|
||||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
|
||||||
<img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
|
|
||||||
<img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
|
|
||||||
</div>
|
|
||||||
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
|
|
||||||
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col'>
|
|
||||||
{sortedData.slice(3).map(data => (
|
|
||||||
<div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
|
|
||||||
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
|
||||||
<img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
|
|
||||||
<div>
|
|
||||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
|
||||||
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col justify-center place-items-center'>
|
|
||||||
<img src="../../assets/points-icon.svg" alt="" />
|
|
||||||
<p className='text-[10px] font-[700]'>{data.points} Points</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
<div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||||
}
|
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||||
|
<img className='-mt-10' src="../../assets/crown.png" alt="" />
|
||||||
|
<img className='mx-auto h-[52px] w-[60px]' src={highestRank.avatar} alt="" />
|
||||||
|
<img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
|
||||||
|
<p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
|
||||||
|
</div>
|
||||||
|
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||||
|
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||||
|
<img className='mx-auto h-[52px] w-[60px]' src={thirdHighestRank.avatar} alt="" />
|
||||||
|
<img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
|
||||||
|
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
{sortedData.map(data => (
|
||||||
|
<div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
|
||||||
|
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
||||||
|
<img className='w-[35px] h-[35px]' src={data.avatar} alt="" />
|
||||||
|
<div>
|
||||||
|
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||||
|
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col justify-center place-items-center'>
|
||||||
|
<img src="../../assets/points-icon.svg" alt="" />
|
||||||
|
<p className='text-[10px] font-[700]'>{data.points} Points</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue