Skip to content

2
2023-029
Commit 189489cd authored by janithGamage's avatar janithGamage
Browse files
Options

fix: update 

Desc : update project
parent a4f95b73
Show whitespace changes
Inline Side-by-side
Showing with 223 additions and 35 deletions
Project/Frontend/Web_App/src/_mock/arrays/_curriculums.ts 0 → 100644
View file @ 189489cd
export const curriculums_mock_data = [
{
"curriculumCode": "01",
"curriculumLevel": "Base Level",
"curriculumName": "Learn Sign Language",
"curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorials": [
{
"tutorialCode": "01",
"tutorialTitle": "Numbers and Counting in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"taskItems": [
{
"title": "Learn Number One",
"description": "Learn how to sign the number one in sign language.",
"howToDo": "- Extend your index finger straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_one.jpg",
"referenceVideo": "https://example.com/number_one_video.mp4"
},
{
"title": "Learn Number Two",
"description": "Learn how to sign the number two in sign language.",
"howToDo": "- Extend your index and middle fingers straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_two.jpg",
"referenceVideo": "https://example.com/number_two_video.mp4"
},
{
"title": "Learn Number Three",
"description": "Learn how to sign the number three in sign language.",
"howToDo": "- Extend your index, middle, and ring fingers straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_three.jpg",
"referenceVideo": "https://example.com/number_three_video.mp4"
},
{
"title": "Learn Number Four",
"description": "Learn how to sign the number four in sign language.",
"howToDo": "- Extend your thumb, index, middle, and ring fingers straight up.\n- Keep your pinky finger folded.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_four.jpg",
"referenceVideo": "https://example.com/number_four_video.mp4"
},
{
"title": "Learn Number Five",
"description": "Learn how to sign the number five in sign language.",
"howToDo": "- Extend all your fingers straight up.\n- Keep your thumb resting on the side of your palm.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_five.jpg",
"referenceVideo": "https://example.com/number_five_video.mp4"
},
{
"title": "Learn Number Six",
"description": "Learn how to sign the number six in sign language.",
"howToDo": "- Extend your thumb and pinky finger straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_six.jpg",
"referenceVideo": "https://example.com/number_six_video.mp4"
},
{
"title": "Learn Number Seven",
"description": "Learn how to sign the number seven in sign language.",
"howToDo": "- Extend your index, middle, and ring fingers straight up.\n- Keep your thumb, pinky, and pinky finger folded.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_seven.jpg",
"referenceVideo": "https://example.com/number_seven_video.mp4"
},
{
"title": "Learn Number Eight",
"description": "Learn how to sign the number eight in sign language.",
"howToDo": "- Extend all your fingers straight up.\n- Cross your index and middle fingers over your ring and pinky fingers.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_eight.jpg",
"referenceVideo": "https://example.com/number_eight_video.mp4"
},
{
"title": "Learn Number Nine",
"description": "Learn how to sign the number nine in sign language.",
"howToDo": "- Extend your thumb and all your fingers straight up.\n- Keep your pinky finger folded.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_nine.jpg",
"referenceVideo": "https://example.com/number_nine_video.mp4"
},
{
"title": "Learn Number Ten",
"description": "Learn how to sign the number ten in sign language.",
"howToDo": "- Extend your thumb, index, and middle fingers straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_ten.jpg",
"referenceVideo": "https://example.com/number_ten_video.mp4"
}
]
},
{
"tutorialCode": "02",
"tutorialTitle": "Learn the Basics of Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Introduce the concept of sign language and its importance.\nTeach basic greetings and expressions, such as hello, goodbye, thank you, and sorry.\nProvide visual demonstrations and practice exercises for learners to practice these basic signs."
},
{
"tutorialCode": "03",
"tutorialTitle": "Family Signs in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Teach signs for family members, such as mother, father, sister, brother, etc.\nIntroduce signs for common family-related words, such as family, love, and home.\nProvide visual demonstrations and practice exercises for learners to practice these family signs."
},
{
"tutorialCode": "04",
"tutorialTitle": "Everyday Vocabulary in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Teach signs for everyday objects and activities, such as eat, drink, sleep, book, pen, etc.\nIntroduce signs for common words used in daily life.\nProvide visual demonstrations and interactive exercises for learners to practice using these signs."
},
{
"tutorialCode": "05",
"tutorialTitle": "Basic Conversational Phrases in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Teach simple conversational phrases, such as \"What is your name?\" or \"How are you?\"\nIntroduce signs for common question words and phrases.\nProvide visual demonstrations and practice exercises for learners to practice these conversational phrases."
}
]
},
{
"curriculumCode": "02",
"curriculumLevel": "Medium Level",
"curriculumName": "Learn Sign Language",
"curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorials": []
},
{
"curriculumCode": "03",
"curriculumLevel": "Advance Level",
"curriculumName": "Learn Sign Language",
"curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorials": []
}
]
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/index.tsx
View file @ 189489cd
import { Container, Grid } from '@mui/material'; import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
import { Card, CardContent, CardHeader, Collapse, Container, Grid, IconButton, Typography } from '@mui/material';
import Head from 'next/head'; import Head from 'next/head';
import _mock from 'src/_mock/_mock'; import { useState } from 'react';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs'; import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify'; import Iconify from 'src/components/iconify/Iconify';
import CarouselAnimation from 'src/sections/@dashboard/learning-module/curriculum/CarouselAnimation'; import CarouselAnimation from 'src/sections/@dashboard/learning-module/curriculum/CarouselAnimation';
import CarouselCenterMode from 'src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode';
import { useSettingsContext } from '../../../../components/settings'; import { useSettingsContext } from '../../../../components/settings';
import DashboardLayout from '../../../../layouts/dashboard'; import DashboardLayout from '../../../../layouts/dashboard';
...@@ -13,13 +13,39 @@ CurriculumHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{p ...@@ -13,13 +13,39 @@ CurriculumHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{p
export default function CurriculumHomePage() { export default function CurriculumHomePage() {
const { themeStretch } = useSettingsContext(); const { themeStretch } = useSettingsContext();
const _carouselsExample = [...Array(5)].map((_, index) => ({ const [expanded, setExpanded] = useState(false);
id: _mock.id(index),
title: _mock.text.title(index),
image: _mock.image.cover(index),
description: _mock.text.description(index),
}));
const handleExpandClick = () => {
setExpanded(!expanded);
};
const [curriculums, setCurriculums] = useState<{
id:
string;
title: string;
image: string;
description: string;
}[]>([
{
id: "1",
title: "Base Level - Learn Sign Language",
description: "Begin your journey to learn sign language with our Base Level course. This course is designed for beginners who want to acquire essential sign language skills. Explore the rich world of sign language as you learn basic vocabulary, grammar, and sentence structures. Discover the art of expressing yourself through gestures and facial expressions, opening doors to effective communication with the deaf and hard of hearing community. With a supportive learning environment, interactive lessons, and hands-on practice, our Base Level course provides a solid foundation for your sign language journey. Start building connections and breaking down barriers today!",
image: "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc"
},
{
id: "2",
title: "Medium Level - Enhancing Sign Language Skills",
description: "Take your sign language skills to the next level with our Medium Level course. Designed for learners with some basic knowledge of sign language, this course focuses on expanding your vocabulary, improving grammar usage, and honing your expressive abilities. Dive deeper into the intricacies of sign language communication, including idiomatic expressions and storytelling techniques. Engage in interactive exercises, role-playing scenarios, and conversations to strengthen your fluency. With challenging yet rewarding lessons, our Medium Level course empowers you to communicate more effectively and connect with the deaf community on a deeper level.",
image: "https://drive.google.com/uc?export=view&id=1b5C6VNO55k3Wj6DJ-vJiUFFEuQnXs5Jo"
},
{
id: "3",
title: "Advanced Level - Mastering Sign Language",
description: "Become a proficient sign language user with our Advanced Level course. Designed for experienced sign language learners, this comprehensive course delves into advanced topics, such as complex grammar structures, specialized vocabulary, and cultural nuances. Refine your receptive and expressive skills through immersive activities, real-life simulations, and in-depth discussions. Explore various sign language modalities and gain a deep understanding of different signing systems. With personalized feedback and guidance from expert instructors, our Advanced Level course propels you towards mastery of sign language and equips you to engage in diverse contexts with confidence.",
image: "https://drive.google.com/uc?export=view&id=1k-CtiCkM3efhmTBet-JZt2izxVrAdBL3"
}
])
return ( return (
<> <>
...@@ -45,13 +71,61 @@ export default function CurriculumHomePage() { ...@@ -45,13 +71,61 @@ export default function CurriculumHomePage() {
<Container maxWidth={themeStretch ? false : 'xl'}> <Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}> <Grid container spacing={2} rowSpacing={2}>
<Grid md={12} item> <Grid md={12} item>
<CarouselAnimation data={_carouselsExample} /> <Card>
<CardHeader
title="Learn Sign Language Courses"
subheader="Building a Solid Foundation, Enhancing Skills, and Mastering Sign Language"
action={
<IconButton
aria-expanded={expanded}
aria-label="show more"
onClick={handleExpandClick}
>
<ExpandMoreIcon />
</IconButton>
}
/>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography variant="body1">
Explore the world of sign language with our comprehensive course offerings. We provide three levels of sign language courses designed to cater to learners of varying proficiency levels.
</Typography>
<Typography variant="subtitle1" sx={{ mt: 3 }}>
1. Base Level - Learn Sign Language:
</Typography>
<Typography variant="body2" sx={{ mt: 3 }}>
Start your sign language journey with our Base Level course. Perfect for beginners, this course offers essential sign language skills, including basic vocabulary, grammar, and sentence structures. Through interactive lessons and hands-on practice, you'll learn to express yourself through gestures and facial expressions, enabling effective communication with the deaf and hard of hearing community. Join us today and begin breaking down communication barriers.
</Typography>
<Typography variant="subtitle1" sx={{ mt: 3 }}>
2. Medium Level - Enhancing Sign Language Skills:
</Typography>
<Typography variant="body2" sx={{ mt: 3 }}>
Take your sign language skills to the next level with our Medium Level course. Designed for learners with some basic knowledge of sign language, this course focuses on expanding vocabulary, improving grammar usage, and honing expressive abilities. Engage in challenging yet rewarding lessons, interactive exercises, role-playing scenarios, and conversations to strengthen fluency. By delving deeper into sign language communication, including idiomatic expressions and storytelling techniques, you'll be able to connect with the deaf community on a deeper level.
</Typography>
<Typography variant="subtitle1" sx={{ mt: 3 }}>
3. Advanced Level - Mastering Sign Language:
</Typography>
<Typography variant="body2" sx={{ mt: 3 }}>
Become a proficient sign language user with our Advanced Level course. This comprehensive course is designed for experienced sign language learners seeking mastery. Dive into advanced topics such as complex grammar structures, specialized vocabulary, and cultural nuances. Through immersive activities, real-life simulations, and in-depth discussions, you'll refine your receptive and expressive skills. Explore various sign language modalities and gain a deep understanding of different signing systems. With personalized feedback and guidance from expert instructors, our Advanced Level course equips you to engage confidently in diverse sign language contexts.
</Typography>
<Typography variant="subtitle2" sx={{ mt: 3 }}>
Whether you're starting from scratch or aiming to enhance your existing sign language skills, our courses offer a supportive learning environment and the opportunity to build connections with the deaf community. Join us today and embark on your sign language journey!
</Typography>
</CardContent>
</Collapse>
</Card>
</Grid> </Grid>
<Grid md={12} item> <Grid md={12} item>
<CarouselCenterMode data={_carouselsExample} /> <CarouselAnimation data={curriculums} />
</Grid> </Grid>
</Grid> </Grid>
</Container> </Container >
</> </>
); );
} }
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselAnimation.tsx
View file @ 189489cd
import { m } from 'framer-motion';
import { useRef, useState } from 'react';
// @mui
import { Box, Button, Card, CardContent, Paper, Typography } from '@mui/material'; import { Box, Button, Card, CardContent, Paper, Typography } from '@mui/material';
import { alpha, useTheme } from '@mui/material/styles'; import { alpha, useTheme } from '@mui/material/styles';
// utils import { m } from 'framer-motion';
import { bgGradient } from '../../../../utils/cssStyles';
// components
import Link from 'next/link'; import Link from 'next/link';
import { useRef, useState } from 'react';
import { PATH_DASHBOARD } from 'src/routes/paths'; import { PATH_DASHBOARD } from 'src/routes/paths';
import { MotionContainer, varFade } from '../../../../components/animate'; import { MotionContainer, varFade } from '../../../../components/animate';
import Carousel, { CarouselArrowIndex } from '../../../../components/carousel'; import Carousel, { CarouselArrowIndex } from '../../../../components/carousel';
import Image from '../../../../components/image'; import Image from '../../../../components/image';
import { bgGradient } from '../../../../utils/cssStyles';
// ----------------------------------------------------------------------
type Props = { type Props = {
data: { data: {
...@@ -67,7 +62,6 @@ export default function CarouselAnimation({ data }: Props) { ...@@ -67,7 +62,6 @@ export default function CarouselAnimation({ data }: Props) {
); );
} }
// ----------------------------------------------------------------------
type CarouselItemProps = { type CarouselItemProps = {
item: { item: {
...@@ -84,8 +78,8 @@ function CarouselItem({ item, isActive }: CarouselItemProps) { ...@@ -84,8 +78,8 @@ function CarouselItem({ item, isActive }: CarouselItemProps) {
const { image, title } = item; const { image, title } = item;
return ( return (
<Paper sx={{ position: 'relative', height: 300 }}> <Paper sx={{ position: 'relative', height: 500 }}>
<Image alt={title} src={image} ratio="21/9" /> <Image alt={title} src={image} ratio="16/9" />
<Box <Box
sx={{ sx={{
...@@ -129,7 +123,7 @@ function CarouselItem({ item, isActive }: CarouselItemProps) { ...@@ -129,7 +123,7 @@ function CarouselItem({ item, isActive }: CarouselItemProps) {
<m.div variants={varFade().inRight}> <m.div variants={varFade().inRight}>
<Link href={PATH_DASHBOARD.learningModule.curriculumView}> <Link href={PATH_DASHBOARD.learningModule.curriculumView}>
<Button variant="contained" sx={{ mt: 3 }}> <Button variant="contained" sx={{ mt: 3 }}>
View More View The Curriculum
</Button> </Button>
</Link> </Link>
</m.div> </m.div>
......
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode.tsx
View file @ 189489cd
import { useRef } from 'react'; import { Box, CardContent, Link, Paper } from '@mui/material';
// @mui
import { alpha, useTheme } from '@mui/material/styles'; import { alpha, useTheme } from '@mui/material/styles';
import { Box, Paper, Link, CardContent } from '@mui/material'; import { useRef } from 'react';
// utils import { PATH_DASHBOARD } from 'src/routes/paths';
import { bgGradient } from '../../../../utils/cssStyles'; import Carousel, { CarouselArrows } from '../../../../components/carousel';
// components
import Image from '../../../../components/image';
import Iconify from '../../../../components/iconify'; import Iconify from '../../../../components/iconify';
import Image from '../../../../components/image';
import TextMaxLine from '../../../../components/text-max-line'; import TextMaxLine from '../../../../components/text-max-line';
import Carousel, { CarouselArrows } from '../../../../components/carousel'; import { bgGradient } from '../../../../utils/cssStyles';
import { PATH_DASHBOARD } from 'src/routes/paths';
// ----------------------------------------------------------------------
type Props = { type Props = {
data: { data: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment