From d29443967401a53a9ba64ba23f41eee1469940c7 Mon Sep 17 00:00:00 2001 From: ansan johny Date: Sat, 16 Nov 2024 17:50:22 +0530 Subject: [PATCH] Feat:PathFinder --- package-lock.json | 4 +- src/App.tsx | 5 + .../PathFinder/PathFinder.module.css | 114 +++++++ .../Onboarding/PathFinder/PathFinder.tsx | 319 ++++++++++++++++++ 4 files changed, 440 insertions(+), 2 deletions(-) create mode 100644 src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.module.css create mode 100644 src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.tsx diff --git a/package-lock.json b/package-lock.json index 6bf4d846e..7b7be0a82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mulearnfrontend", - "version": "0.0.5", + "version": "0.0.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "mulearnfrontend", - "version": "0.0.5", + "version": "0.0.6", "dependencies": { "@chakra-ui/react": "^2.6.1", "@emotion/react": "^11.10.6", diff --git a/src/App.tsx b/src/App.tsx index 64f87a93e..5ed8e6153 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -58,6 +58,7 @@ import YourLC from "./modules/Dashboard/modules/LearningCircleV2/pages/YourLC/Yo import MoreInfoLC from "./modules/Dashboard/modules/LearningCircleV2/pages/moreInfoLC/MoreInfoLC"; import AttendeeReport from "./modules/Dashboard/modules/LearningCircleV2/pages/AttendeeReport/AttendeeReport"; import LCReport from "./modules/Dashboard/modules/LearningCircleV2/pages/LCReport/LCReport"; +import PathFinder from "./modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder"; const Profile = lazy( () => import("./modules/Dashboard/modules/Profile/pages/Profile") @@ -325,6 +326,10 @@ function App() { path: "/register/organization", element: }, + { + path: "/register/pathfinder", + element: + }, { path: "/signin", element: diff --git a/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.module.css b/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.module.css new file mode 100644 index 000000000..da3f4af1c --- /dev/null +++ b/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.module.css @@ -0,0 +1,114 @@ +.pathFinderContainer { + width: 80%; + margin: 0 auto; + padding: 20px; + background-color: #f9f9f9; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.pathFinderContainer h1 { + text-align: center; + font-size: 2rem; + margin-bottom: 20px; +} + +.pathFinderContainer p { + font-size: 1rem; + margin-bottom: 20px; +} + +.pathFinderContainer .question-box { + padding: 20px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); +} + +.pathFinderContainer .question-no { + font-weight: bold; + color: #333; +} + +.pathFinderContainer h4 { + font-size: 1.25rem; + margin-top: 20px; +} + +.pathFinderContainer .options-table { + width: 100%; + margin-top: 10px; +} + +.pathFinderContainer .options-table td { + padding: 10px 0; + font-size: 1rem; +} + +.pathFinderContainer input[type="checkbox"] { + margin-right: 10px; +} + +.pathFinderContainer .button-container { + display: flex; + justify-content: space-between; /* Aligns buttons to left and right */ + margin-top: 20px; +} + +.pathFinderContainer button.prev { + background-color: #ddd; + color: #333; + padding: 10px 20px; + border: none; + border-radius: 5px; +} + +.pathFinderContainer button.prev:hover { + background-color: #ccc; +} + +.pathFinderContainer button.next { + background-color: #007bff; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 5px; +} + +.pathFinderContainer button.next:hover { + background-color: #0056b3; +} + +.pathFinderContainer .result-box { + padding: 20px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); +} + +.pathFinderContainer .bold-text { + font-weight: bold; + font-size: 1.5rem; + color: #007bff; +} + +.pathFinderContainer .result-heading { + margin-top: 20px; + font-size: 1.25rem; + font-weight: bold; +} + +.pathFinderContainer hr { + margin: 20px 0; + border-top: 2px solid #007bff; +} + +.pathFinderContainer strong { + font-weight: bold; +} + +.pathFinderContainer span { + font-size: 1.25rem; + margin-left: 10px; + color: #333; +} diff --git a/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.tsx b/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.tsx new file mode 100644 index 000000000..457e541b9 --- /dev/null +++ b/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.tsx @@ -0,0 +1,319 @@ +import React, { useState, useEffect } from "react"; +import OnboardingTemplate from "../../../components/OnboardingTeamplate/OnboardingTemplate"; +import styles from "./PathFinder.module.css"; +import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton"; +import { Button } from "@chakra-ui/react"; + +interface Question { + question: string; + options: { text: string; category: string }[]; +} + +const originalQuestions: Question[] = [ + { + question: "What kind of activities do you enjoy the most?", + options: [ + { + text: "Building or crafting physical projects and experimenting with new materials.", + category: "A" + }, + { + text: "Coding and creating software solutions or working with technology.", + category: "B" + }, + { + text: "Designing visual elements, user interfaces, or developing creative content.", + category: "C" + }, + { + text: "Managing projects, understanding market needs, or exploring new knowledge areas.", + category: "D" + } + ] + }, + { + question: "Which of the following skills do you want to improve or develop?", + options: [ + { + text: "Robotics, 3D printing, or IoT-based projects.", + category: "A" + }, + { + text: "Programming, debugging, or developing new applications and algorithms.", + category: "B" + }, + { + text: "Visual communication, UX/UI design, or multimedia creation.", + category: "C" + }, + { + text: "Leadership, marketing, research, or analysis skills.", + category: "D" + } + ] + }, + { + question: "How do you approach problem-solving?", + options: [ + { + text: "By physically experimenting, creating prototypes, and iterating based on testing.", + category: "A" + }, + { + text: "By writing code, creating logical solutions, and troubleshooting issues.", + category: "B" + }, + { + text: "By brainstorming creative approaches, sketching, or creating visual solutions.", + category: "C" + }, + { + text: "By analyzing the problem holistically, researching, and planning solutions with strategic thinking.", + category: "D" + } + ] + }, + { + question: "Which tools or resources are you most interested in using or learning?", + options: [ + { + text: "Electronic components, fabrication tools, robotics kits.", + category: "A" + }, + { + text: "Programming languages, development frameworks, software tools.", + category: "B" + }, + { + text: "Graphic design tools, wireframing software, creative suites.", + category: "C" + }, + { + text: "Business models, research papers, management tools, or policy frameworks.", + category: "D" + } + ] + }, + { + question: "What kind of project excites you the most?", + options: [ + { + text: "Creating a new physical device, electronic gadget, or automated system.", + category: "A" + }, + { + text: "Developing an app, creating a software tool, or building a machine learning model.", + category: "B" + }, + { + text: "Designing a logo, improving a website’s user experience, or making digital illustrations.", + category: "C" + }, + { + text: "Organizing an event, analyzing data trends, developing a new business idea.", + category: "D" + } + ] + }, + { + question: "Which statement resonates most with your aspirations?", + options: [ + { + text: "I want to bring my ideas to life by building things with my hands.", + category: "A" + }, + { + text: "I want to create impactful digital solutions and applications.", + category: "B" + }, + { + text: "I want to communicate stories and ideas through design and visuals.", + category: "C" + }, + { + text: "I want to lead, strategize, and innovate to solve broader problems.", + category: "D" + } + ] + }, + { + question: "In a team project, you usually prefer to:", + options: [ + { + text: "Take the lead in building and assembling the project.", + category: "A" + }, + { + text: "Handle the technical aspects and coding of the project.", + category: "B" + }, + { + text: "Focus on the design and presentation of the project.", + category: "C" + }, + { + text: "Organize the project, plan timelines, and ensure communication.", + category: "D" + } + ] + }, + { + question: "What motivates you the most?", + options: [ + { + text: "The thrill of creating something tangible and functional.", + category: "A" + }, + { + text: "Solving complex problems and coding challenges.", + category: "B" + }, + { + text: "Creating visually appealing designs that communicate effectively.", + category: "C" + }, + { + text: "Leading a team to success and achieving strategic goals.", + category: "D" + } + ] + } +]; + +// Function to shuffle questions randomly +const shuffleQuestions = (questions: Question[]): Question[] => { + const shuffled = [...questions]; + for (let i = shuffled.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; + } + return shuffled; +}; + +const PathFinder: React.FC = () => { + const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); + const [scores, setScores] = useState>( + { + A: 0, + B: 0, + C: 0, + D: 0 + } + ); + const [selectedOptions, setSelectedOptions] = useState>({}); + const [showResults, setShowResults] = useState(false); + const [questions, setQuestions] = useState([]); + + useEffect(() => { + // Shuffle questions whenever the component is loaded + setQuestions(shuffleQuestions(originalQuestions)); + }, []); + + const handleNextQuestion = () => { + if (!selectedOptions[currentQuestionIndex] || selectedOptions[currentQuestionIndex].length === 0) { + alert("Please select at least one option to proceed."); + return; + } + + const updatedScores = { ...scores }; + selectedOptions[currentQuestionIndex].forEach(category => { + updatedScores[category as "A" | "B" | "C" | "D"] += 1; + }); + setScores(updatedScores); + + if (currentQuestionIndex + 1 < questions.length) { + setCurrentQuestionIndex(currentQuestionIndex + 1); + } else { + setShowResults(true); + } + }; + + const handlePrevQuestion = () => { + if (currentQuestionIndex > 0) { + setCurrentQuestionIndex(currentQuestionIndex - 1); + } + }; + + const handleOptionChange = (category: string) => { + setSelectedOptions(prevSelectedOptions => { + const updatedOptions = [...(prevSelectedOptions[currentQuestionIndex] || [])]; + if (updatedOptions.includes(category)) { + const index = updatedOptions.indexOf(category); + updatedOptions.splice(index, 1); // Remove category + } else { + updatedOptions.push(category); // Add category + } + return { + ...prevSelectedOptions, + [currentQuestionIndex]: updatedOptions + }; + }); + }; + + const getRecommendedPathway = () => { + const maxScore = Math.max(scores.A, scores.B, scores.C, scores.D); + if (scores.A === maxScore) return "Maker"; + if (scores.B === maxScore) return "Coder"; + if (scores.C === maxScore) return "Designer"; + return "Others"; + }; + + return ( + +
+

Pathway Identification Questionnaire

+

+ Instructions: For each question, select the options that + best describe you. +

+ + {!showResults ? ( +
+

+ Question No: {currentQuestionIndex + 1} /{" "} + {questions.length} +

+ {questions[currentQuestionIndex] && ( + <> +

+ {questions[currentQuestionIndex].question} +

+ + + {questions[currentQuestionIndex].options.map((option, index) => ( + + + + ))} + +
+ +
+ +
+ + +
+ + )} +
+ ) : ( +
+

Your Recommended Pathway: {getRecommendedPathway()}

+
+ )} +
+ + ); +}; + +export default PathFinder;