+
Congrats
-
{result}
+
{getResult()}
+
+ {getMessage()}
+
- {/* buttons */}
-
);
}
-export default Results;
+export default Results;
\ No newline at end of file
diff --git a/src/data/questions.js b/src/data/questions.js
index f4c50bc..6c445f2 100644
--- a/src/data/questions.js
+++ b/src/data/questions.js
@@ -1,200 +1,182 @@
export const questions = [
{
id: 1,
- text: "Do you enjoy working on the design and security of a webpage?",
+ text: "Do you enjoy working on the design and visual layout of a webpage?",
options: [
- { answer: "Yes, a lot", points: { fullstack: 2 } },
- { answer: "Not really", points: { frontend: 2 } },
- { answer: "Both", points: { fullstack: 2 } },
+ { answer: "Yes, I love making things look good", points: { frontend: 2, mobile: 1 } },
+ { answer: "I prefer focusing on functionality", points: { backend: 2 } },
+ { answer: "I enjoy both aspects", points: { fullstack: 2 } },
],
},
-
{
id: 2,
- text: "How do you feel about math and algorithms?",
+ text: "How do you feel about logic puzzles and algorithms?",
options: [
- {
- answer: "I enjoy them, I like solving difficult problems",
- points: { backend: 2 },
- },
- {
- answer: "Not my strong suit, I prefer more creative tasks",
- points: { frontend: 2 },
- },
- {
- answer: "I can handle them if needed",
- points: { fullstack: 2 },
- },
+ { answer: "I enjoy them, I like solving complex problems", points: { backend: 2 } },
+ { answer: "Not my strong suit, I prefer more creative tasks", points: { frontend: 2 } },
+ { answer: "I can handle them when needed", points: { fullstack: 2, mobile: 1 } },
],
},
-
{
id: 3,
- text: "If you were given a project, would you start with the database schema or the UI mockup?",
+ text: "When starting a new project, what are you more excited about?",
options: [
- { answer: "Database schema", points: { backend: 2 } },
- { answer: "UI mockup", points: { frontend: 2 } },
- { answer: "No preference", points: { fullstack: 2 } },
+ { answer: "Designing the database schema", points: { backend: 2 } },
+ { answer: "Creating the user interface mockup", points: { frontend: 2, mobile: 2 } },
+ { answer: "Planning the entire application architecture", points: { fullstack: 2, devops: 1 } },
],
},
-
{
id: 4,
- text: "Are you interested in learning how protocols work (HTTP, WebSockets, etc.)?",
+ text: "Are you interested in how servers and networks work (e.g., HTTP, APIs)?",
options: [
- { answer: "Yes, I’m very interested", points: { backend: 2 } },
- { answer: "No thanks, I’ll pass", points: { frontend: 2 } },
- { answer: "I can if necessary", points: { fullstack: 2 } },
+ { answer: "Yes, I find it fascinating", points: { backend: 2, devops: 1 } },
+ { answer: "No, I'd rather not deal with that", points: { frontend: 2 } },
+ { answer: "I'm curious but it's not my main focus", points: { fullstack: 2 } },
],
},
-
{
id: 5,
- text: "Would you like to create animations and interactive interfaces?",
+ text: "Do you like the idea of creating smooth animations and interactive elements?",
options: [
- { answer: "Yes", points: { frontend: 2 } },
- { answer: "No", points: { backend: 2 } },
- { answer: "I like both", points: { fullstack: 2 } },
+ { answer: "Absolutely, that's my favorite part!", points: { frontend: 2, mobile: 2 } },
+ { answer: "No, I'm more into data processing", points: { backend: 2 } },
+ { answer: "It's cool, I'd like to do both", points: { fullstack: 2 } },
],
},
-
{
id: 6,
- text: "Do you prefer optimizing a server’s performance or a website’s loading speed?",
+ text: "Which task sounds more appealing?",
options: [
- { answer: "Server performance", points: { backend: 2 } },
- { answer: "Website loading speed", points: { frontend: 2 } },
- { answer: "Both", points: { fullstack: 2 } },
+ { answer: "Optimizing a server for high performance", points: { backend: 2, devops: 2 } },
+ { answer: "Making a website load instantly", points: { frontend: 2, mobile: 1 } },
+ { answer: "Both sound like interesting challenges", points: { fullstack: 2 } },
],
},
-
{
id: 7,
- text: "If you had to choose, would you work with CSS & JS libraries or with SQL & Node.js?",
+ text: "Which technology stack would you prefer to master?",
options: [
- { answer: "CSS & JS libraries", points: { frontend: 2 } },
- { answer: "SQL & Node.js", points: { backend: 2 } },
- { answer: "Both are interesting", points: { fullstack: 2 } },
+ { answer: "React, Vue, and CSS frameworks", points: { frontend: 2 } },
+ { answer: "Node.js, Python, and SQL/NoSQL databases", points: { backend: 2 } },
+ { answer: "I want to be proficient in both", points: { fullstack: 2 } },
],
},
-
{
id: 8,
- text: "Do you enjoy working with databases?",
+ text: "How do you feel about working with large databases?",
options: [
- { answer: "Yes, very much", points: { backend: 2 } },
- { answer: "No, not for me", points: { frontend: 2 } },
- { answer: "I can if necessary", points: { fullstack: 2 } },
+ { answer: "I find it very interesting", points: { backend: 2 } },
+ { answer: "I'd prefer to avoid it", points: { frontend: 2 } },
+ { answer: "I don't mind it as part of a larger project", points: { fullstack: 2, mobile: 1 } },
],
},
-
- {
+ {
id: 9,
- text: "You’re working at a company and they ask you to learn Java, what do you do?",
+ text: "Are you interested in automating application deployments and managing cloud infrastructure?",
options: [
- {
- answer: "I would seriously consider it",
- points: { backend: 2, fullstack: 2 },
- },
- {
- answer: "I’d pack my things and leave",
- points: { frontend: 2 },
- },
+ { answer: "Yes, that sounds powerful and efficient!", points: { devops: 2 } },
+ { answer: "No, I'd rather focus on coding new features.", points: { frontend: 1, backend: 1, mobile: 1 } },
+ { answer: "I'm open to it if the job requires it.", points: { fullstack: 1 } },
],
},
-
{
id: 10,
- text: "Do you feel more comfortable with colors, fonts and layouts, or with queries and algorithms?",
+ text: "Would you prefer to build an application for a web browser or for a mobile phone?",
options: [
- { answer: "Mainly with UI/UX", points: { frontend: 2 } },
- {
- answer: "I love algorithms and queries",
- points: { backend: 2 },
- },
- { answer: "I can work with both", points: { fullstack: 2 } },
+ { answer: "A mobile phone (iOS/Android)", points: { mobile: 2 } },
+ { answer: "A web browser", points: { frontend: 1, backend: 1, fullstack: 1 } },
+ { answer: "I'm excited by the challenge of building for both.", points: { fullstack: 2, mobile: 1 } },
],
},
-
{
id: 11,
- text: "Do you prefer solving problems related to data and logic?",
+ text: "When you encounter a bug, what's your first instinct?",
options: [
- { answer: "Yes, definitely", points: { backend: 2 } },
- { answer: "No, I find it boring", points: { frontend: 2 } },
- { answer: "I can if needed", points: { fullstack: 2 } },
+ { answer: "Check the browser's developer console for visual errors", points: { frontend: 2 } },
+ { answer: "Look through server logs and database queries", points: { backend: 2, devops: 1 } },
+ { answer: "Systematically check both the client and server side", points: { fullstack: 2 } },
],
},
-
{
id: 12,
- text: "Are you more interested in responsive design or scalability?",
+ text: "How important is pixel-perfect design to you?",
options: [
- { answer: "Responsive design", points: { frontend: 2 } },
- { answer: "Scalability", points: { backend: 2 } },
- { answer: "Both", points: { fullstack: 2 } },
+ { answer: "Extremely important. I want it to look exactly like the mockup", points: { frontend: 2, mobile: 2 } },
+ { answer: "Functionality is more important than perfect visuals", points: { backend: 2 } },
+ { answer: "It's important, but I'm willing to make compromises", points: { fullstack: 1 } },
],
},
-
{
id: 13,
- text: "Do you get more excited about building dashboards & UIs or authentication systems & APIs?",
+ text: "Do you enjoy setting up and configuring development environments?",
options: [
- { answer: "Dashboards & UIs", points: { frontend: 2 } },
- { answer: "Authentication & APIs", points: { backend: 2 } },
- { answer: "Both", points: { fullstack: 2 } },
+ { answer: "Yes, I like making sure everything is set up perfectly", points: { devops: 2, backend: 1 } },
+ { answer: "No, I just want to start coding", points: { frontend: 1 } },
+ { answer: "I can do it, but it's not my favorite task", points: { fullstack: 1, mobile: 1 } },
],
},
-
{
id: 14,
- text: "Do you feel closer to the mindset of ‘making things look good’ or ‘making things work reliably’?",
+ text: "What kind of team do you prefer to work in?",
options: [
- { answer: "Making them look good", points: { frontend: 2 } },
- { answer: "Making them work reliably", points: { backend: 2 } },
- { answer: "Both", points: { fullstack: 2 } },
+ { answer: "A team of designers and UX specialists", points: { frontend: 2 } },
+ { answer: "A team of data architects and system administrators", points: { backend: 2, devops: 1 } },
+ { answer: "A cross-functional team where I can do a bit of everything", points: { fullstack: 2 } },
],
},
-
{
id: 15,
- text: "Do you enjoy working with visible code (React, Vue) or with APIs and servers?",
+ text: "Which statement resonates with you more?",
options: [
- { answer: "I’d prefer React.js + Vue.js", points: { frontend: 2 } },
- {
- answer: "I prefer building APIs and servers",
- points: { backend: 2 },
- },
- { answer: "Both", points: { fullstack: 2 } },
+ { answer: "I want to build what the user sees.", points: { frontend: 2, mobile: 2 } },
+ { answer: "I want to build the engine that makes it all work.", points: { backend: 2 } },
+ { answer: "I want to see the whole system come to life.", points: { fullstack: 2 } },
],
},
-
{
id: 16,
- text: "Would it bother you to tweak buttons, layouts, and colors for an entire 8-hour shift?",
+ text: "Are you interested in the performance of a device's battery life and memory usage?",
options: [
- { answer: "I’d do it gladly", points: { frontend: 2 } },
- { answer: "I’d delegate it to someone else", points: { backend: 2 } },
- { answer: "I’d do it if no one else could", points: { fullstack: 2 } },
+ { answer: "Yes, optimizing for mobile hardware is a key challenge", points: { mobile: 2 } },
+ { answer: "Not really, I'm more focused on web performance", points: { frontend: 1, backend: 1 } },
+ { answer: "It's an interesting factor to consider", points: { fullstack: 1 } },
],
},
-
{
id: 17,
- text: "Do you like seeing how users interact with your UI?",
+ text: "Do you enjoy writing scripts to automate repetitive tasks?",
options: [
- { answer: "Yes", points: { frontend: 2 } },
- { answer: "Not particularly", points: { backend: 2 } },
- { answer: "I don’t mind", points: { fullstack: 2 } },
+ { answer: "Yes, I love finding ways to be more efficient", points: { devops: 2, backend: 1 } },
+ { answer: "No, I prefer to do things manually", points: { frontend: 1 } },
+ { answer: "It depends on the task", points: { fullstack: 1 } },
],
},
-
{
id: 18,
- text: "Do you enjoy building LLMs and AI bots?",
+ text: "How do you feel about working with platform-specific guidelines (e.g., Apple's Human Interface Guidelines or Google's Material Design)?",
+ options: [
+ { answer: "I enjoy following them to create a native feel", points: { mobile: 2, frontend: 1 } },
+ { answer: "I find them too restrictive", points: { backend: 1 } },
+ { answer: "They are useful guides, but not absolute rules", points: { fullstack: 1 } },
+ ],
+ },
+ {
+ id: 19,
+ text: "Which of these tasks would you find most satisfying?",
+ options: [
+ { answer: "Building a secure and reliable user authentication system", points: { backend: 2 } },
+ { answer: "Creating a seamless and intuitive user onboarding experience", points: { frontend: 2, mobile: 1 } },
+ { answer: "Setting up a continuous integration/continuous deployment (CI/CD) pipeline", points: { devops: 2 } },
+ ],
+ },
+ {
+ id: 20,
+ text: "What is your ultimate goal as a developer?",
options: [
- { answer: "Yes, I like it", points: { backend: 2, fullstack: 2 } },
- { answer: "Not at all", points: { frontend: 2 } },
+ { answer: "To create beautiful and user-friendly applications", points: { frontend: 2, mobile: 1 } },
+ { answer: "To build robust and scalable systems", points: { backend: 2, devops: 1 } },
+ { answer: "To be able to build any application from start to finish", points: { fullstack: 2 } },
],
},
-];
+];
\ No newline at end of file
diff --git a/src/data/roles.js b/src/data/roles.js
new file mode 100644
index 0000000..9ace014
--- /dev/null
+++ b/src/data/roles.js
@@ -0,0 +1,27 @@
+export const roles = {
+ frontend: {
+ title: "You are a Frontend Guy!",
+ message:
+ "You have a keen eye for design and user experience. Frontend development is your forte!",
+ },
+ backend: {
+ title: "You are a Backend Guy!",
+ message:
+ "You excel at problem-solving and building robust systems. Backend development suits you well!",
+ },
+ fullstack: {
+ title: "You are a Fullstack Guy!",
+ message:
+ "You are versatile and enjoy working on both the client and server sides. Fullstack development is your strength!",
+ },
+ devops: {
+ title: "You are a DevOps Guy!",
+ message:
+ "You have a knack for infrastructure and automation. DevOps is the perfect fit for you!",
+ },
+ mobile: {
+ title: "You are an App Dev Guy!",
+ message:
+ "You love creating mobile applications that users can enjoy on the go. App development is your passion!",
+ },
+};
\ No newline at end of file
diff --git a/src/hooks/useStacky.jsx b/src/hooks/useStacky.jsx
deleted file mode 100644
index b1afcf0..0000000
--- a/src/hooks/useStacky.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useState } from "react";
-
-export function useStacky(questions) {
- const [currentQ, setCurrentQ] = useState(0);
- const [scores, setScores] = useState({
- frontend: 0,
- backend: 0,
- fullstack: 0,
- });
-
- const [finished, setFinished] = useState(false);
-
-
- // submit answer handler
- const handleAnswer = (points) => {
- setScores((prev) => ({
- frontend: prev.frontend + (points.frontend || 0),
- backend: prev.backend + (points.backend || 0),
- fullstack: prev.fullstack + (points.fullstack || 0),
- }));
-
- if (currentQ + 1 < questions.length) {
- setCurrentQ(currentQ + 1);
- } else {
- setFinished(true);
- }
- };
-
- const restart = () => {
- setCurrentQ(0);
- setScores({ frontend: 0, backend: 0, fullstack: 0 });
- setFinished(false);
- };
-
- const getResult = () => {
- const max = Math.max(scores.frontend, scores.backend, scores.fullstack);
- if (max === scores.frontend) return "You are a Frontend Guy!";
- if (max === scores.backend) return "You are Backend Guy!";
- return "You are Fullstack Guy!";
- };
-
- return {
- currentQ,
- scores,
- finished,
- handleAnswer,
- restart,
- getResult,
- };
-}
diff --git a/src/index.css b/src/index.css
index d7ea140..06adc1e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -219,3 +219,19 @@ button:hover {
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23ffc107' d='M7.45 123.27c2.27 2.46 11.62-1.83 19-5.27c5.53-2.57 27.66-11.65 38.66-16.36c2.97-1.27 7.29-2.93 10.4-7.02c2.76-3.64 10.08-19.1-4.66-34.76c-14.96-15.9-30.37-11.51-36.13-7.43c-3.39 2.4-6.15 7.81-7.39 10.56c-5.24 11.62-12.71 32.91-15.75 41.28c-2.23 6.17-6.38 16.56-4.13 19'/%3E%3Cpath fill='%23ff8f00' d='M25.85 66.49c.14 1.74.49 4.57 1.69 10.02c.82 3.74 2.16 7.66 3.25 10.25c3.27 7.79 7.86 10.93 12.51 13.45c7.9 4.28 13.27 5.08 13.27 5.08l-6.44 2.63s-3.9-.81-9.22-3.43c-5.07-2.5-10.35-6.73-14.21-15.01c-1.67-3.59-2.64-7.07-3.2-9.83c-.69-3.42-.8-5.36-.8-5.36zm-7.91 20.28s.8 6.49 6.16 14.68c6.28 9.58 15.05 11.15 15.05 11.15l-5.83 2.4s-6.51-1.99-12.7-10.44c-3.86-5.27-4.94-11.57-4.94-11.57zm-5.55 15.38s1.46 5.6 4.66 9.78c3.81 4.99 8.66 6.44 8.66 6.44l-4.47 1.98s-3.39-.71-7.1-5.41c-2.82-3.57-3.62-7.67-3.62-7.67z'/%3E%3Cpath fill='%23fffde7' d='M9.96 116.37c-.2-.45-.2-.96.01-1.4l25.47-52.82l4.19 15.75l-26.8 38.71c-.72 1.08-2.34.94-2.87-.24' opacity='0.44'/%3E%3ClinearGradient id='SVGs8hxXbEl' x1='74.384' x2='44.617' y1='61.839' y2='79.699' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.024' stop-color='%238f4700'/%3E%3Cstop offset='1' stop-color='%23703e2d'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23SVGs8hxXbEl)' d='M41.65 83.19c11.9 13.92 25.45 12.18 29.96 8.66c4.52-3.53 8.09-15.66-3.76-29.35c-12.42-14.34-26.48-10.25-29.73-7.15s-7.39 15.07 3.53 27.84'/%3E%3Cpath fill='%2303a9f4' d='M82.52 88.92c-4.34-3.64-6.65-2.99-9.75-1.7c-4 1.66-10.29 2.89-18.83 0l2.57-6.19c5.07 1.71 8.74.88 11.91-.99c4.08-2.4 9.66-5.69 18.34 1.6c3.62 3.04 7.33 5.06 10.05 4.14c1.98-.66 3.03-3.61 3.56-5.96c.05-.21.13-.81.19-1.34c.48-3.67 1.28-11.59 7.18-15.64c6.31-4.33 12.94-4.33 12.94-4.33l1.2 11.92c-3.05-.45-5.17.17-6.96 1.16c-6.74 3.75-.87 18.15-11.36 22.99c-10.09 4.69-18.34-3.4-21.04-5.66'/%3E%3Cpath fill='%23f44336' d='m45.4 73.72l-4.34-3.89c7.97-8.9 5.87-15.44 4.34-20.2c-.31-.96-.6-1.87-.79-2.74c-.68-3.08-.82-5.76-.61-8.1c-3.06-3.81-4.41-7.8-4.5-8.07c-1.86-5.63-.46-11.12 2.75-16.27C48.74 4 60.49 4 60.49 4l3.92 10.49c-2.98-.12-12.75.03-15.75 4.76c-3.79 5.96-1.3 9.64-1.12 10.06c.73-.95 1.47-1.71 2.13-2.3c4.79-4.25 8.95-4.86 11.6-4.62c2.98.27 5.68 1.77 7.61 4.23c2.11 2.7 2.98 6.21 2.31 9.4c-.65 3.11-2.72 5.74-5.83 7.41c-5.43 2.92-9.95 2.52-12.98 1.51c.02.07.03.15.05.22c.11.5.33 1.2.59 2.01c1.77 5.48 5.06 14.18-7.62 26.55m7.35-37.53c.58.42 1.19.77 1.82 1.02c2.1.84 4.39.56 6.99-.84c1.53-.82 1.71-1.7 1.77-1.99c.18-.87-.12-1.98-.77-2.81c-.57-.73-1.23-1.11-2.02-1.19c-1.5-.13-3.53.82-5.56 2.63c-.97.87-1.71 1.94-2.23 3.18'/%3E%3Cpath fill='%23f48fb1' d='m62.77 75.35l-6.21-.17s2.95-16.66 12.5-19.46c1.79-.52 3.75-1.05 5.72-1.34c1.17-.18 3.02-.45 3.93-.79c.21-1.57-.45-3.57-1.19-5.84c-.58-1.76-1.18-3.57-1.5-5.55c-.62-3.86.41-7.27 2.9-9.62c3.04-2.85 7.95-3.76 13.49-2.5c3.16.72 5.49 2.27 7.54 3.63c2.93 1.95 4.64 2.94 8.22.53c4.33-2.92-1.33-14.35-4.34-20.95l11.23-4.68c1.51 3.3 8.8 20.28 3.99 29.97c-1.62 3.26-4.41 5.42-8.07 6.23c-7.96 1.78-12.62-1.32-16.02-3.58c-1.61-1.07-3.02-1.91-4.55-2.35c-10.63-3.03 4.21 12.61-2.74 19.64c-4.17 4.21-14.36 5.32-15.02 5.48c-6.56 1.58-9.88 11.35-9.88 11.35'/%3E%3Cpath fill='%23c92b27' d='M43.99 38.79c-.19 2.2-.28 3.51.29 6.37c2.75 2.02 8.74 2.02 8.74 2.02c-.26-.81-.49-1.51-.59-2.01c-.02-.07-.03-.15-.05-.22c-6.09-3.04-8.39-6.16-8.39-6.16'/%3E%3Cpath fill='%23ffc107' d='m31.53 48.64l-10.34-5.07l5.15-7.44l8.11 5.37z'/%3E%3Cpath fill='%23fb8c00' d='M16.29 34.6c-5.28-.71-10.66-5.19-11.25-5.7l5.19-6.09c1.57 1.33 4.9 3.56 7.13 3.86z'/%3E%3Cpath fill='%2303a9f4' d='m25.61 21.27l-7.6-2.49c.87-2.66 1.1-5.53.65-8.3l7.9-1.27c.65 4.02.32 8.19-.95 12.06'/%3E%3Cpath fill='%23fb8c00' d='m73.073 15.325l7.815-1.71l2.257 10.316l-7.815 1.71z'/%3E%3Cpath fill='%23ffc107' d='m92.46 17.77l-5.5-5.81c2.88-2.73 3.54-6.3 3.54-6.34l7.9 1.29c-.1.63-1.11 6.29-5.94 10.86'/%3E%3Cpath fill='%23fb8c00' d='m95.514 48.58l6.987-2.184l2.386 7.636l-6.987 2.184z'/%3E%3Cpath fill='%23f44336' d='m97.55 113.03l-7.95-.94c.34-2.83-1.77-6.3-2.35-7.07l6.4-4.8c.48.63 4.65 6.4 3.9 12.81'/%3E%3Cpath fill='%23fb8c00' d='M120.37 102.89c-2.99-.45-6.05-.63-9.07-.52l-.27-8c3.51-.12 7.06.08 10.53.61z'/%3E%3Cpath fill='%23f48fb1' d='m109.614 113.902l5.62-5.693l7.735 7.638l-5.62 5.692z'/%3E%3Cpath fill='%23f44336' d='m93.103 63.334l5.78 6.609l-6.609 5.78l-5.78-6.609z'/%3E%3C/svg%3E");
}
+
+.progress-container {
+ width: 100%;
+ height: 10px;
+ background-color: #333;
+ border-radius: 5px;
+ margin-bottom: 20px;
+ overflow: hidden;
+}
+
+.progress-bar {
+ height: 100%;
+ background-color: #4caf50;
+ border-radius: 5px;
+ transition: width 0.3s ease-in-out;
+}
\ No newline at end of file
diff --git a/src/screens/MenuScreen.jsx b/src/screens/MenuScreen.jsx
index 8c996a7..eb07dc0 100644
--- a/src/screens/MenuScreen.jsx
+++ b/src/screens/MenuScreen.jsx
@@ -1,4 +1,3 @@
-// components
import Logo from "../components/Logo";
import Footer from "../components/Footer";
import Button from "../components/Button";
diff --git a/src/screens/QuizScreen.jsx b/src/screens/QuizScreen.jsx
index da5b25c..5e8176f 100644
--- a/src/screens/QuizScreen.jsx
+++ b/src/screens/QuizScreen.jsx
@@ -1,40 +1,35 @@
-// components
import Footer from "../components/Footer";
import Results from "../components/Results";
import Logo from "./../components/Logo";
-
+import ProgressBar from "../components/ProgressBar";
import { questions } from "./../data/questions";
-
-// hooks
-import { useStacky } from "./../hooks/useStacky";
+import { useQuizStore } from "../store/quizStore";
function QuizScreen() {
- const { currentQ, scores, finished, handleAnswer, restart, getResult } =
- useStacky(questions);
+ const {
+ currentQ,
+ handleAnswer,
+ answers,
+ } = useQuizStore();
const q = questions[currentQ];
return (
<>
-
-
+
- {/* current question indicator */}
+
Question {currentQ + 1} of {questions.length}
-
- {/* current question text */}
{q.text}
-
- {/* answer buttons */}
{q.options.map((opt, i) => (
@@ -46,4 +41,4 @@ function QuizScreen() {
);
}
-export default QuizScreen;
+export default QuizScreen;
\ No newline at end of file
diff --git a/src/store/quizStore.js b/src/store/quizStore.js
new file mode 100644
index 0000000..492572c
--- /dev/null
+++ b/src/store/quizStore.js
@@ -0,0 +1,65 @@
+import { create } from "zustand";
+import { questions } from "../data/questions";
+import { roles } from "../data/roles";
+
+const getInitialState = () => {
+ const initialScores = {};
+ for (const role in roles) {
+ initialScores[role] = 0;
+ }
+ return {
+ scores: initialScores,
+ currentQ: 0,
+ answers: {},
+ finished: false,
+ };
+};
+
+export const useQuizStore = create((set, get) => ({
+ ...getInitialState(),
+ handleAnswer: (points, optionIndex) => {
+ const { currentQ, answers } = get();
+ const newAnswers = { ...answers, [currentQ]: optionIndex };
+ const newScores = getInitialState().scores;
+ questions.forEach((question, index) => {
+ const answeredOptionIndex = newAnswers[index];
+ if (answeredOptionIndex !== undefined) {
+ const answerPoints = question.options[answeredOptionIndex].points;
+ for (const role in answerPoints) {
+ if (newScores.hasOwnProperty(role)) {
+ newScores[role] += answerPoints[role];
+ }
+ }
+ }
+ });
+
+ set({ answers: newAnswers, scores: newScores });
+ if (get().currentQ < questions.length - 1) {
+ set((state) => ({ currentQ: state.currentQ + 1 }));
+ } else {
+ set({ finished: true });
+ }
+ },
+
+ restart: () => {
+ set(getInitialState());
+ },
+
+ getWinningRole: () => {
+ const { scores, answers } = get();
+ if (Object.keys(answers).length === 0) {
+ return Object.keys(roles)[0];
+ }
+ return Object.entries(scores).reduce((a, b) => (a[1] > b[1] ? a : b))[0];
+ },
+
+ getResult: () => {
+ const role = get().getWinningRole();
+ return roles[role]?.title || "You are a Developer!";
+ },
+
+ getMessage: () => {
+ const role = get().getWinningRole();
+ return roles[role]?.message || "Time to start your coding journey!";
+ },
+}));
\ No newline at end of file