diff --git a/app/components/KnowledgeQuest.tsx b/app/components/KnowledgeQuest.tsx index c9a18f9..d642463 100644 --- a/app/components/KnowledgeQuest.tsx +++ b/app/components/KnowledgeQuest.tsx @@ -1,5 +1,5 @@ import React, {useState} from 'react'; -import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons'; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons'; import Icon from '@ant-design/icons'; import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; @@ -216,7 +216,7 @@ let performersData = [ points: "999", rank: "1", program: "Graduate Program", - avatar: "../../assets/avatar1.png" + avatar: "avatar1.png" }, { id: "2", @@ -225,7 +225,7 @@ let performersData = [ points: "997", rank: "2", program: "Graduate Program", - avatar: "../../assets/avatar2.png" + avatar: "avatar2.png" }, { id: "3", @@ -234,7 +234,7 @@ let performersData = [ points: "994", rank: "3", program: "Graduate Program", - avatar: "../../assets/avatar3.png" + avatar: "avatar3.png" }, { id: "4", @@ -243,7 +243,7 @@ let performersData = [ points: "990", rank: "4", program: "Graduate Program", - avatar: "../../assets/avatar4.png" + avatar: "avatar4.png" }, { id: "5", @@ -252,7 +252,7 @@ let performersData = [ points: "987", rank: "5", program: "Graduate Program", - avatar: "../../assets/avatar5.png" + avatar: "avatar5.png" }, { id: "6", @@ -261,7 +261,7 @@ let performersData = [ points: "982", rank: "6", program: "Graduate Program", - avatar: "../../assets/avatar6.png" + avatar: "avatar6.png" }, { id: "7", @@ -270,7 +270,7 @@ let performersData = [ points: "980", rank: "7", program: "Graduate Program", - avatar: "../../assets/avatar1.png" + avatar: "avatar1.png" }, { id: "8", @@ -279,7 +279,7 @@ let performersData = [ points: "978", rank: "8", program: "Graduate Program", - avatar: "../../assets/avatar2.png" + avatar: "avatar2.png" }, { id: "9", @@ -288,7 +288,7 @@ let performersData = [ points: "975", rank: "9", program: "Graduate Program", - avatar: "../../assets/avatar3.png" + avatar: "avatar3.png" }, { id: "10", @@ -297,7 +297,7 @@ let performersData = [ points: "972", rank: "10", program: "Graduate Program", - avatar: "../../assets/avatar4.png" + avatar: "avatar4.png" }, { id: "11", @@ -306,7 +306,7 @@ let performersData = [ points: "970", rank: "11", program: "Graduate Program", - avatar: "../../assets/avatar5.png" + avatar: "avatar5.png" }, { id: "12", @@ -315,7 +315,7 @@ let performersData = [ points: "968", rank: "12", program: "Graduate Program", - avatar: "../../assets/avatar6.png" + avatar: "avatar6.png" }, { id: "13", @@ -324,7 +324,7 @@ let performersData = [ points: "965", rank: "13", program: "Graduate Program", - avatar: "../../assets/avatar1.png" + avatar: "avatar1.png" }, { id: "14", @@ -333,7 +333,7 @@ let performersData = [ points: "962", rank: "14", program: "Graduate Program", - avatar: "../../assets/avatar2.png" + avatar: "avatar2.png" }, { id: "15", @@ -342,7 +342,7 @@ let performersData = [ points: "960", rank: "15", program: "Graduate Program", - avatar: "../../assets/avatar3.png" + avatar: "avatar3.png" }, { id: "16", @@ -351,7 +351,7 @@ let performersData = [ points: "957", rank: "16", program: "Graduate Program", - avatar: "../../assets/avatar4.png" + avatar: "avatar4.png" }, { id: "17", @@ -360,7 +360,7 @@ let performersData = [ points: "955", rank: "17", program: "Graduate Program", - avatar: "../../assets/avatar5.png" + avatar: "avatar5.png" }, { id: "18", @@ -369,7 +369,7 @@ let performersData = [ points: "953", rank: "18", program: "Graduate Program", - avatar: "../../assets/avatar6.png" + avatar: "avatar6.png" }, { id: "19", @@ -378,7 +378,7 @@ let performersData = [ points: "950", rank: "19", program: "Graduate Program", - avatar: "../../assets/avatar1.png" + avatar: "avatar1.png" }, { id: "20", @@ -387,7 +387,7 @@ let performersData = [ points: "947", rank: "20", program: "Graduate Program", - avatar: "../../assets/avatar2.png" + avatar: "avatar2.png" }, { id: "21", @@ -396,7 +396,7 @@ let performersData = [ points: "945", rank: "21", program: "Graduate Program", - avatar: "../../assets/avatar3.png" + avatar: "avatar3.png" } ]; @@ -429,92 +429,92 @@ type MenuItem = Required['items'][number]; const items2: MenuProps['items'] = [ { - key: 'subkq1', + key: 'subsd1', icon: , - label: 'Administration', + label: (

  Administration

), children: [ { - key: '1kq', + key: '1sd', label: (Class Schedules), }, { - key: '2kq', + key: '2sd', label: (Classmate Directory), }, { - key: '3kq', + key: '3sd', label: (Qualifications), }, ], }, { - key: 'subkq2', + key: 'subsd2', icon: , - label: 'My Courses', + label: (

  My Courses

), children: [ { - key: '4kq', + key: '4sd', label: (Graduate Program), }, { - key: '5kq', + key: '5sd', label: (Post-Graduate Program), }, ], }, { - key: 'subkq3', + key: 'subsd3', icon: , - label: 'Examinations', + label: (

  Examinations

), children: [ { - key: '6kq', + key: '6sd', label: (Exam Scheduled), }, { - key: '7kq', + key: '7sd', label: (Upcoming Exam), }, { - key: '8kq', + key: '8sd', label: (Passed Exam), }, ], }, { - key: 'subkq4', + key: 'subsd4', icon: , - label: 'Community', + label: (

  Community

), children: [ { - key: '9kq', + key: '9sd', label: (Exam Scheduled), }, { - key: '10kq', + key: '10sd', label: (Upcoming Exam), }, { - key: '11kq', + key: '11sd', label: (Passed Exam), }, ], }, { - key: 'subkq5', + key: 'subsd5', icon: , - label: 'Notifications', + label: (

  Notifications

), children: [ { - key: '12kq', + key: '12sd', label: (Exam Scheduled), }, { - key: '13kq', + key: '13sd', label: (Upcoming Exam), }, { - key: '14kq', + key: '14sd', label: (Passed Exam), }, ], @@ -527,17 +527,17 @@ const items2: MenuProps['items'] = [ style: { marginTop: '100px' }, children: [ { - key: '15kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), label: (

Settings

) }, { - key: '16kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }), label: (

Help & Support

) }, { - key: '17kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }), label: (

Logout

) }, @@ -611,7 +611,7 @@ const App: React.FC = () => {
-
+
{/* */}

Knowledge Quests

@@ -637,7 +637,7 @@ const App: React.FC = () => {

My Profile

Rayan Holiday

- +
diff --git a/app/components/StudentDashboard.tsx b/app/components/StudentDashboard.tsx index ccc5b13..f739258 100644 --- a/app/components/StudentDashboard.tsx +++ b/app/components/StudentDashboard.tsx @@ -1,5 +1,5 @@ import React, {useState} from 'react'; -import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons'; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons'; import Icon from '@ant-design/icons'; import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; @@ -69,7 +69,7 @@ let performersData = [ points: "999", rank: "1", program: "Graduate Program", - avatar: "../../assets/avatar1.png" + avatar: "avatar1.png" }, { id: "2", @@ -78,7 +78,7 @@ let performersData = [ points: "997", rank: "2", program: "Graduate Program", - avatar: "../../assets/avatar2.png" + avatar: "avatar2.png" }, { id: "3", @@ -87,7 +87,7 @@ let performersData = [ points: "994", rank: "3", program: "Graduate Program", - avatar: "../../assets/avatar3.png" + avatar: "avatar3.png" }, { id: "4", @@ -96,7 +96,7 @@ let performersData = [ points: "990", rank: "4", program: "Graduate Program", - avatar: "../../assets/avatar4.png" + avatar: "avatar4.png" }, { id: "5", @@ -105,7 +105,7 @@ let performersData = [ points: "987", rank: "5", program: "Graduate Program", - avatar: "../../assets/avatar5.png" + avatar: "avatar5.png" }, { id: "6", @@ -114,7 +114,7 @@ let performersData = [ points: "982", rank: "6", program: "Graduate Program", - avatar: "../../assets/avatar6.png" + avatar: "avatar6.png" } ]; @@ -148,7 +148,7 @@ const items2: MenuProps['items'] = [ { key: 'subsd1', icon: , - label: 'Administration', + label: (

  Administration

), children: [ { key: '1sd', @@ -167,7 +167,7 @@ const items2: MenuProps['items'] = [ { key: 'subsd2', icon: , - label: 'My Courses', + label: (

  My Courses

), children: [ { key: '4sd', @@ -182,7 +182,7 @@ const items2: MenuProps['items'] = [ { key: 'subsd3', icon: , - label: 'Examinations', + label: (

  Examinations

), children: [ { key: '6sd', @@ -201,7 +201,7 @@ const items2: MenuProps['items'] = [ { key: 'subsd4', icon: , - label: 'Community', + label: (

  Community

), children: [ { key: '9sd', @@ -220,7 +220,7 @@ const items2: MenuProps['items'] = [ { key: 'subsd5', icon: , - label: 'Notifications', + label: (

  Notifications

), children: [ { key: '12sd', @@ -299,7 +299,6 @@ const App: React.FC = () => { const { token: { colorBgContainer}, } = theme.useToken(); return ( - <> {/* */} @@ -319,14 +318,6 @@ const App: React.FC = () => { @@ -336,7 +327,7 @@ const App: React.FC = () => {
-
+

Student Dashboard

@@ -359,7 +350,7 @@ const App: React.FC = () => {

My Profile

Rayan Holiday

- +
@@ -442,7 +433,7 @@ const App: React.FC = () => {
{sortedData.slice(3).map(data => ( -
+

# {data.rank}

diff --git a/app/routes/ai-quiz.tsx b/app/routes/ai-quiz.tsx index 3ef826d..9bbd635 100644 --- a/app/routes/ai-quiz.tsx +++ b/app/routes/ai-quiz.tsx @@ -34,7 +34,6 @@ function toggleSection() { } } - export default function Index() { const [percent, setPercent] = useState(0); const [secondsLeft, setSecondsLeft] = useState(5); @@ -75,7 +74,7 @@ export default function Index() {
-

0/2000

+

/2000

diff --git a/app/routes/classmate-directory.tsx b/app/routes/classmate-directory.tsx new file mode 100644 index 0000000..e5df74a --- /dev/null +++ b/app/routes/classmate-directory.tsx @@ -0,0 +1,403 @@ +import React, {useState} from 'react'; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons'; +import Icon from '@ant-design/icons'; + +import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; +import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon'; +import ExaminationIcon from '~/components/customIcon/ExaminationIcon'; +import CommunityIcon from '~/components/customIcon/CommunityIcon'; +import NotificationIcon from '~/components/customIcon/NotificationIcon'; +import {Layout, Menu, theme, Button, Modal, MenuProps, Breadcrumb, Dropdown, Space} from 'antd'; +import '../../public/assets/student-dashboard.css'; + + let classmatesData = [ + { + id: "1", + name: "Daniel Nguyen", + program: "Graduate Program", + type: "Student", + avatar: "avatar1.png" + }, + { + id: "2", + name: "Sarah Anderson", + program: "Post-Graduate Program", + type: "Student", + avatar: "avatar2.png" + }, + { + id: "3", + name: "John Smith", + program: "Undergraduate Program", + type: "Student", + avatar: "avatar3.png" + }, + { + id: "4", + name: "Emily Davis", + program: "Graduate Program", + type: "Student", + avatar: "avatar4.png" + }, + { + id: "5", + name: "Michael Johnson", + program: "Post-Graduate Program", + type: "Student", + avatar: "avatar5.png" + }, + { + id: "6", + name: "Jessica Wilson", + 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" + } + ]; + + const { Header, Content, Sider } = Layout; + + const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({ + key, + label: `navsd ${key}`, + })); + + type MenuItem = Required['items'][number]; + + + const items2: MenuProps['items'] = [ + { + key: 'subsd1', + icon: , + label: 'Administration', + children: [ + { + key: '1sd', + label: (Class Schedules), + }, + { + key: '2sd', + label: (Classmate Directory), + }, + { + key: '3sd', + label: (Qualifications), + }, + ], + }, + { + key: 'subsd2', + icon: , + label: 'My Courses', + children: [ + { + key: '4sd', + label: (Graduate Program), + }, + { + key: '5sd', + label: (Post-Graduate Program), + }, + ], + }, + { + key: 'subsd3', + icon: , + label: 'Examinations', + children: [ + { + key: '6sd', + label: (Exam Scheduled), + }, + { + key: '7sd', + label: (Upcoming Exam), + }, + { + key: '8sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd4', + icon: , + label: 'Community', + children: [ + { + key: '9sd', + label: (Exam Scheduled), + }, + { + key: '10sd', + label: (Upcoming Exam), + }, + { + key: '11sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd5', + icon: , + label: 'Notifications', + children: [ + { + key: '12sd', + label: (Exam Scheduled), + }, + { + key: '13sd', + label: (Upcoming Exam), + }, + { + key: '14sd', + label: (Passed Exam), + }, + ], + }, + // getItem('Files', '9', ), + { + key: 'grp', + label: '', + type: 'group', + style: { marginTop: '100px' }, + children: [ + { + key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), + label: (

Settings

) + }, + { + key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }), + label: (

Help & Support

) + }, + { + key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }), + label: (

Logout

) + }, + ], + }, + ]; + const items: MenuProps['items'] = [ + { + label: 1st menu item, + key: '01sd', + }, + { + type: 'divider', + }, + { + label: 2nd menu item, + key: '02sd', + }, + { + type: 'divider', + }, + { + label: '3rd menu item', + key: '03sd', + }, +]; + +const App: React.FC = () => { + const [collapsed, setCollapsed] = useState(false); + const [open, setOpen] = React.useState(false); + const [loading, setLoading] = React.useState(true); + + const showLoading = () => { + setOpen(true); + setLoading(true); + + // Simple loading mock. You should add cleanup logic in real world. + setTimeout(() => { + setLoading(false); + }, 100); + }; + const { token: { colorBgContainer}, } = theme.useToken(); + + return ( + + + <> + {/* */} + Loading Modal

} footer={ } loading={loading} open={open} onCancel={() => setOpen(false)} > +

Some contents...

+

Some contents...

+

Some contents...

+ + + {/*
+
+ +
*/} + +
+ setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}> +
+
+

IIMTT Logo

+
+
+ + +
+ {/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */} + + +
+
+
+ Administration,},{title: 'Class Directory',},]}/> +
+ +
+
+ + +
+
+
+

Your Classmates | Graduate Program

+
+ {classmatesData.map(data => ( +
+ +
+ ))} +
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dignissimos nostrum fugit animi nobis. Explicabo nam accusamus harum doloremque praesentium officia, vel laborum nobis eveniet quibusdam ex rem asperiores alias!
+
+
+ + + + + ); +}; +export default App; \ No newline at end of file diff --git a/app/routes/quiz.tsx b/app/routes/quiz.tsx index 2a899b4..4b554d1 100644 --- a/app/routes/quiz.tsx +++ b/app/routes/quiz.tsx @@ -3,204 +3,213 @@ import { useState, useEffect } from 'react'; // Sample questions JSON data const questionsData = [ { - "id": 1, - "question": "What is the capital of France?", - "options": ["Berlin", "Madrid", "Paris", "Rome"], - "answer": "Paris" + id: 1, + question: "What is the capital of France?", + options: ["Berlin", "Madrid", "Paris", "Rome"], + answer: "Paris", }, { - "id": 2, - "question": "Which planet is known as the Red Planet?", - "options": ["Earth", "Mars", "Jupiter", "Saturn"], - "answer": "Mars" + id: 2, + question: "Which planet is known as the Red Planet?", + options: ["Earth", "Mars", "Jupiter", "Saturn"], + answer: "Mars", }, { - "id": 3, - "question": "What is the chemical symbol for gold?", - "options": ["Au", "Ag", "Pb", "Fe"], - "answer": "Au" + id: 3, + question: "What is the chemical symbol for gold?", + options: ["Au", "Ag", "Pb", "Fe"], + answer: "Au", }, { - "id": 4, - "question": "Who wrote 'To Kill a Mockingbird'?", - "options": ["Harper Lee", "Mark Twain", "Ernest Hemingway", "J.K. Rowling"], - "answer": "Harper Lee" + id: 4, + question: "Who wrote 'To Kill a Mockingbird'?", + options: ["Harper Lee", "Mark Twain", "Ernest Hemingway", "J.K. Rowling"], + answer: "Harper Lee", }, { - "id": 5, - "question": "What is the largest ocean on Earth?", - "options": ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"], - "answer": "Pacific Ocean" + id: 5, + question: "What is the largest ocean on Earth?", + options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"], + answer: "Pacific Ocean", }, { - "id": 6, - "question": "Which element has the atomic number 1?", - "options": ["Helium", "Hydrogen", "Oxygen", "Carbon"], - "answer": "Hydrogen" + id: 6, + question: "Which element has the atomic number 1?", + options: ["Helium", "Hydrogen", "Oxygen", "Carbon"], + answer: "Hydrogen", }, { - "id": 7, - "question": "In which year did the Titanic sink?", - "options": ["1912", "1905", "1898", "1923"], - "answer": "1912" + id: 7, + question: "In which year did the Titanic sink?", + options: ["1912", "1905", "1898", "1923"], + answer: "1912", }, { - "id": 8, - "question": "Who is the author of '1984'?", - "options": ["George Orwell", "Aldous Huxley", "Ray Bradbury", "J.D. Salinger"], - "answer": "George Orwell" + id: 8, + question: "Who is the author of '1984'?", + options: ["George Orwell", "Aldous Huxley", "Ray Bradbury", "J.D. Salinger"], + answer: "George Orwell", }, { - "id": 9, - "question": "What is the hardest natural substance on Earth?", - "options": ["Gold", "Platinum", "Diamond", "Iron"], - "answer": "Diamond" + id: 9, + question: "What is the hardest natural substance on Earth?", + options: ["Gold", "Platinum", "Diamond", "Iron"], + answer: "Diamond", }, { - "id": 10, - "question": "What is the largest planet in our solar system?", - "options": ["Earth", "Saturn", "Neptune", "Jupiter"], - "answer": "Jupiter" + id: 10, + question: "What is the largest planet in our solar system?", + options: ["Earth", "Saturn", "Neptune", "Jupiter"], + answer: "Jupiter", }, { - "id": 11, - "question": "What is the main ingredient in guacamole?", - "options": ["Tomato", "Avocado", "Pepper", "Onion"], - "answer": "Avocado" + id: 11, + question: "What is the main ingredient in guacamole?", + options: ["Tomato", "Avocado", "Pepper", "Onion"], + answer: "Avocado", }, { - "id": 12, - "question": "Which country is known as the Land of the Rising Sun?", - "options": ["China", "Japan", "Thailand", "South Korea"], - "answer": "Japan" + id: 12, + question: "Which country is known as the Land of the Rising Sun?", + options: ["China", "Japan", "Thailand", "South Korea"], + answer: "Japan", }, { - "id": 13, - "question": "What is the smallest prime number?", - "options": ["1", "2", "3", "5"], - "answer": "2" + id: 13, + question: "What is the smallest prime number?", + options: ["1", "2", "3", "5"], + answer: "2", }, { - "id": 14, - "question": "Who painted the Mona Lisa?", - "options": ["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso", "Claude Monet"], - "answer": "Leonardo da Vinci" + id: 14, + question: "Who painted the Mona Lisa?", + options: ["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso", "Claude Monet"], + answer: "Leonardo da Vinci", }, { - "id": 15, - "question": "What is the capital city of Australia?", - "options": ["Sydney", "Melbourne", "Canberra", "Brisbane"], - "answer": "Canberra" + id: 15, + question: "What is the capital city of Australia?", + options: ["Sydney", "Melbourne", "Canberra", "Brisbane"], + answer: "Canberra", }, { - "id": 16, - "question": "Which gas do plants primarily use for photosynthesis?", - "options": ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"], - "answer": "Carbon Dioxide" + id: 16, + question: "Which gas do plants primarily use for photosynthesis?", + options: ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"], + answer: "Carbon Dioxide", }, { - "id": 17, - "question": "What is the boiling point of water in Celsius?", - "options": ["90°C", "100°C", "110°C", "120°C"], - "answer": "100°C" + id: 17, + question: "What is the boiling point of water in Celsius?", + options: ["90°C", "100°C", "110°C", "120°C"], + answer: "100°C", }, { - "id": 18, - "question": "Which language is primarily spoken in Brazil?", - "options": ["Spanish", "Portuguese", "French", "English"], - "answer": "Portuguese" + id: 18, + question: "Which language is primarily spoken in Brazil?", + options: ["Spanish", "Portuguese", "French", "English"], + answer: "Portuguese", }, { - "id": 19, - "question": "What is the smallest unit of life?", - "options": ["Tissue", "Organ", "Cell", "Organism"], - "answer": "Cell" + id: 19, + question: "What is the smallest unit of life?", + options: ["Tissue", "Organ", "Cell", "Organism"], + answer: "Cell", }, { - "id": 20, - "question": "Who developed the theory of relativity?", - "options": ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Niels Bohr"], - "answer": "Albert Einstein" + id: 20, + question: "Who developed the theory of relativity?", + options: ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Niels Bohr"], + answer: "Albert Einstein", }, { - "id": 21, - "question": "In what year did World War II end?", - "options": ["1945", "1944", "1946", "1943"], - "answer": "1945" - } + id: 21, + question: "In what year did World War II end?", + options: ["1945", "1944", "1946", "1943"], + answer: "1945", + }, ]; - - export default function Index() { - const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); - const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown - const [intervalId, setIntervalId] = useState(null); - - useEffect(() => { - // Start the countdown timer - const id = setInterval(() => { - setTimeRemaining(prevTime => { - if (prevTime <= 1) { - clearInterval(id); - return 0; - } - return prevTime - 1; - }); - }, 1000); - - setIntervalId(id); - - // Clear interval on component unmount - return () => { - if (intervalId) { - clearInterval(intervalId); + const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); + const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown + const [selectedAnswers, setSelectedAnswers] = useState<{ [key: number]: string }>({}); + const [answeredQuestions, setAnsweredQuestions] = useState<{ id: number; selectedOption: string }[]>([]); + useEffect(() => { + // Start the countdown timer + const id = setInterval(() => { + setTimeRemaining((prevTime) => { + if (prevTime <= 1) { + clearInterval(id); + return 0; } - }; - }, [intervalId]); - - const handleNextQuestion = () => { - setCurrentQuestionIndex(prevIndex => (prevIndex + 1) % questionsData.length); + return prevTime - 1; + }); + }, 1000); + + // Clear interval on component unmount + return () => { + clearInterval(id); }; - - const currentQuestion = questionsData[currentQuestionIndex]; - - return ( - <> -
-
+ }, []); + + const handleNextQuestion = () => { + if (selectedAnswers[currentQuestion.id]) { + setAnsweredQuestions((prev) => [ + ...prev, + { id: currentQuestion.id, selectedOption: selectedAnswers[currentQuestion.id] }, + ]); + } + setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questionsData.length); + }; + + const handleAnswerChange = (questionId: number, selectedOption: string) => { + setSelectedAnswers((prevAnswers) => ({ + ...prevAnswers, + [questionId]: selectedOption, + })); + }; + + const currentQuestion = questionsData[currentQuestionIndex]; + return ( + <> +
+

✨

-

Take an AI Generative Quiz

-

Convert any text into an interactive quiz session

+

Take an AI Generative Quiz

+

Convert any text into an interactive quiz session

+
-
-
- {/* this div for margin top */} + +
{/* this div for margin top */}
+ +
+

Time remaining: {timeRemaining} seconds

-
-

Time remaining: {timeRemaining} seconds

-
- -
-
-

{`Q${currentQuestion.id}. ${currentQuestion.question}`}

-
- {currentQuestion.options.map((option, index) => ( -
- +
+
+

{`Q${currentQuestion.id}. ${currentQuestion.question}`}

+
+ {currentQuestion.options.map((option, index) => ( +
+ +
+ ))} +
+
+
- ))}
-
- -
-
- - ); - } \ No newline at end of file + {/* 
{JSON.stringify(answeredQuestions, null, 2)}
*/} + + ); +} diff --git a/app/routes/result.tsx b/app/routes/result.tsx new file mode 100644 index 0000000..d673011 --- /dev/null +++ b/app/routes/result.tsx @@ -0,0 +1,238 @@ +let performersData = [ + { + 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" + } +]; + + +export default function Index(){ + return( + <> +
+
+

✨

+
+

Take an AI Generative Quiz

+

Convert any text into an interactive quiz session

+
+
+
+ +
+
+ +

You scored 9/10

+

Congratulations on your achievement.

+ +
+
+

Top Performers of this Quiz

+
+ {performersData.map((result => +
+
+

# {result.rank}

+ +
+

{result.name}

+

{result.program}

+
+
+
+ +

{result.score}

+
+
+ ))} +
+
+
+ + ) +} \ No newline at end of file diff --git a/app/routes/start-quiz.tsx b/app/routes/start-quiz.tsx index 633bf35..bf4853c 100644 --- a/app/routes/start-quiz.tsx +++ b/app/routes/start-quiz.tsx @@ -12,7 +12,7 @@ export default function Index(){ -
+

Are You Ready to take this Quiz?

diff --git a/app/routes/test2.tsx b/app/routes/test2.tsx index 1e01811..957c0a1 100644 --- a/app/routes/test2.tsx +++ b/app/routes/test2.tsx @@ -1,5 +1,5 @@ import React, {useState} from 'react'; -import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons'; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons'; import Icon from '@ant-design/icons'; import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; @@ -38,87 +38,366 @@ let courseData = [ ]; let knowledgeData = [ { - id: "1", - status: "1", - title: "Assessment on Special Education", - challenge: "Challenge yourself & climb the leaderboard.", - question: "Subjective Question", - img: "../../assets/knowledge1.jpg" + id: "1", + status: "1", + title: "Assessment on Special Education", + challenge: "Challenge yourself & climb the leaderboard.", + question: "Subjective Question", + 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: "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" + id: "3", + status: "1", + title: "Quiz on Montessori Methods", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "../../assets/knowledge3.jpg" + }, + { + id: "4", + status: "1", + title: "Assessment on Special Education", + challenge: "Challenge yourself & climb the leaderboard.", + question: "Subjective Question", + img: "../../assets/knowledge1.jpg" + }, + { + id: "5", + status: "1", + title: "Quiz on Children Psychology", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "../../assets/knowledge2.jpg" + }, + { + id: "6", + status: "1", + title: "Quiz on Montessori Methods", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "../../assets/knowledge3.jpg" + }, + { + id: "7", + status: "1", + title: "Workshop on Child Development", + challenge: "Expand your knowledge & earn badges.", + question: "Interactive Session", + img: "../../assets/knowledge1.jpg" + }, + { + id: "8", + status: "1", + title: "Webinar on Educational Psychology", + challenge: "Join & enhance your skills.", + question: "Discussion", + img: "../../assets/knowledge2.jpg" + }, + { + id: "9", + status: "1", + title: "Seminar on Inclusive Education", + challenge: "Participate & gain insights.", + question: "Lecture", + img: "../../assets/knowledge3.jpg" + }, + { + id: "10", + status: "1", + title: "Course on Early Childhood Education", + challenge: "Complete the course & get certified.", + question: "Multiple Modules", + img: "../../assets/knowledge1.jpg" + }, + { + id: "11", + status: "1", + title: "Training on Classroom Management", + challenge: "Improve your teaching strategies.", + question: "Practical Tasks", + img: "../../assets/knowledge2.jpg" + }, + { + id: "12", + status: "1", + title: "Lecture on Cognitive Development", + challenge: "Expand your understanding & get certified.", + question: "Q&A Session", + img: "../../assets/knowledge3.jpg" + }, + { + id: "13", + status: "1", + title: "Workshop on Behavioral Issues", + challenge: "Join & learn from experts.", + question: "Interactive Session", + img: "../../assets/knowledge1.jpg" + }, + { + id: "14", + status: "1", + title: "Seminar on Learning Disabilities", + challenge: "Participate & enhance your knowledge.", + question: "Lecture", + img: "../../assets/knowledge2.jpg" + }, + { + id: "15", + status: "1", + title: "Webinar on Child Psychology", + challenge: "Join & expand your skills.", + question: "Discussion", + img: "../../assets/knowledge3.jpg" + }, + { + id: "16", + status: "1", + title: "Course on Special Education Needs", + challenge: "Complete the course & get certified.", + question: "Multiple Modules", + img: "../../assets/knowledge1.jpg" + }, + { + id: "17", + status: "1", + title: "Training on Autism Spectrum Disorder", + challenge: "Improve your teaching strategies.", + question: "Practical Tasks", + img: "../../assets/knowledge2.jpg" + }, + { + id: "18", + status: "1", + title: "Lecture on Emotional Development", + challenge: "Expand your understanding & get certified.", + question: "Q&A Session", + img: "../../assets/knowledge3.jpg" + }, + { + id: "19", + status: "1", + title: "Workshop on ADHD", + challenge: "Join & learn from experts.", + question: "Interactive Session", + img: "../../assets/knowledge1.jpg" + }, + { + id: "20", + status: "1", + title: "Seminar on Speech and Language Disorders", + challenge: "Participate & enhance your knowledge.", + question: "Lecture", + img: "../../assets/knowledge2.jpg" + }, + { + id: "21", + status: "1", + title: "Webinar on Child Nutrition", + challenge: "Join & expand your skills.", + question: "Discussion", + img: "../../assets/knowledge3.jpg" } ]; let performersData = [ { - id: "1", - name: "Eiden", - score: "48/50", - points: "999", - rank: "1", - program: "Graduate Program", - avatar: "../../assets/avatar1.png" + 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: "../../assets/avatar2.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: "../../assets/avatar3.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: "../../assets/avatar4.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: "../../assets/avatar5.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: "../../assets/avatar6.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)); @@ -148,92 +427,92 @@ type MenuItem = Required['items'][number]; const items2: MenuProps['items'] = [ { - key: 'subkq1', + key: 'subsd1', icon: , - label: 'Administration', + label: (

  Administration

), children: [ { - key: '1kq', + key: '1sd', label: (Class Schedules), }, { - key: '2kq', + key: '2sd', label: (Classmate Directory), }, { - key: '3kq', + key: '3sd', label: (Qualifications), }, ], }, { - key: 'subkq2', + key: 'subsd2', icon: , - label: 'My Courses', + label: (

  My Courses

), children: [ { - key: '4kq', + key: '4sd', label: (Graduate Program), }, { - key: '5kq', + key: '5sd', label: (Post-Graduate Program), }, ], }, { - key: 'subkq3', + key: 'subsd3', icon: , - label: 'Examinations', + label: (

  Examinations

), children: [ { - key: '6kq', + key: '6sd', label: (Exam Scheduled), }, { - key: '7kq', + key: '7sd', label: (Upcoming Exam), }, { - key: '8kq', + key: '8sd', label: (Passed Exam), }, ], }, { - key: 'subkq4', + key: 'subsd4', icon: , - label: 'Community', + label: (

  Community

), children: [ { - key: '9kq', + key: '9sd', label: (Exam Scheduled), }, { - key: '10kq', + key: '10sd', label: (Upcoming Exam), }, { - key: '11kq', + key: '11sd', label: (Passed Exam), }, ], }, { - key: 'subkq5', + key: 'subsd5', icon: , - label: 'Notifications', + label: (

  Notifications

), children: [ { - key: '12kq', + key: '12sd', label: (Exam Scheduled), }, { - key: '13kq', + key: '13sd', label: (Upcoming Exam), }, { - key: '14kq', + key: '14sd', label: (Passed Exam), }, ], @@ -246,17 +525,17 @@ const items2: MenuProps['items'] = [ style: { marginTop: '100px' }, children: [ { - key: '15kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), label: (

Settings

) }, { - key: '16kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }), label: (

Help & Support

) }, { - key: '17kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }), label: (

Logout

) }, @@ -317,34 +596,23 @@ const App: React.FC = () => { */}
- setCollapsed(value)} width={310} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}> + setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
{/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */} - +
-
+
{/* */}

Knowledge Quests

-
-
-
- +
@@ -409,7 +677,7 @@ const App: React.FC = () => {

{data.question}

- +
))}
diff --git a/public/assets/batch-icon.svg b/public/assets/batch-icon.svg new file mode 100644 index 0000000..9acb07d --- /dev/null +++ b/public/assets/batch-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/assets/celebration-icon.png b/public/assets/celebration-icon.png new file mode 100644 index 0000000..6d765bc Binary files /dev/null and b/public/assets/celebration-icon.png differ diff --git a/public/assets/reload.svg b/public/assets/reload.svg new file mode 100644 index 0000000..c4dc0a7 --- /dev/null +++ b/public/assets/reload.svg @@ -0,0 +1,3 @@ + + +