function MainComponent() { const [currentQuestion, setCurrentQuestion] = useState(0); const [answers, setAnswers] = useState({}); const [showResult, setShowResult] = useState(false); const questions = [ { text: "When a child is struggling with homework, I typically...", options: shuffleArray([ { text: "Immediately restrict device access to avoid distractions", type: "limiter" }, { text: "Allow them to use any digital tools they want", type: "enabler" }, { text: "Help them find appropriate digital resources while discussing effective study strategies", type: "mentor" } ]) }, { text: "During family/class time, my approach to devices is...", options: shuffleArray([ { text: "Complete device-free zones and times", type: "limiter" }, { text: "No restrictions on device usage", type: "enabler" }, { text: "Balanced usage with agreed-upon guidelines", type: "mentor" } ]) }, { text: "When it comes to screen time limits...", options: shuffleArray([ { text: "I set strict time limits and use parental controls", type: "limiter" }, { text: "I don't believe in setting specific limits", type: "enabler" }, { text: "We discuss and set reasonable boundaries together", type: "mentor" } ]) }, { text: "When introducing new technology...", options: shuffleArray([ { text: "I carefully monitor and restrict access until I'm sure it's safe", type: "limiter" }, { text: "I let them explore and figure it out on their own", type: "enabler" }, { text: "We explore features together and discuss responsible usage", type: "mentor" } ]) }, { text: "Regarding social media use...", options: shuffleArray([ { text: "I strictly limit or prohibit access until a certain age", type: "limiter" }, { text: "I let them decide when they're ready to start using it", type: "enabler" }, { text: "We discuss online safety and gradually introduce appropriate platforms", type: "mentor" } ]) }, { text: "When it comes to online gaming...", options: shuffleArray([ { text: "I strictly limit gaming time and types of games", type: "limiter" }, { text: "I let them play whatever and whenever they want", type: "enabler" }, { text: "We choose age-appropriate games and set balanced play times together", type: "mentor" } ]) }, { text: "Regarding digital privacy...", options: shuffleArray([ { text: "I regularly monitor all online activities and communications", type: "limiter" }, { text: "I trust them to manage their own privacy settings", type: "enabler" }, { text: "We discuss privacy risks and set up appropriate safeguards together", type: "mentor" } ]) }, { text: "When using devices for learning...", options: shuffleArray([ { text: "I only allow educational apps and websites", type: "limiter" }, { text: "I let them choose their own learning resources", type: "enabler" }, { text: "We evaluate and select quality learning tools together", type: "mentor" } ]) }, { text: "Regarding online communication...", options: shuffleArray([ { text: "I restrict messaging to family members only", type: "limiter" }, { text: "I allow unrestricted communication with anyone", type: "enabler" }, { text: "We discuss online safety and gradually expand communication circles", type: "mentor" } ]) }, { text: "When it comes to digital content creation...", options: shuffleArray([ { text: "I closely monitor and restrict what they can create", type: "limiter" }, { text: "I let them create and share whatever content they want", type: "enabler" }, { text: "We discuss responsible content creation and sharing guidelines", type: "mentor" } ]) }, { text: "Regarding internet access...", options: shuffleArray([ { text: "I use strict content filters and blockers", type: "limiter" }, { text: "I provide unrestricted access to the internet", type: "enabler" }, { text: "We use age-appropriate filters and discuss online safety", type: "mentor" } ]) }, { text: "When dealing with digital distractions...", options: shuffleArray([ { text: "I remove devices immediately when they become distracting", type: "limiter" }, { text: "I let them manage their own attention and focus", type: "enabler" }, { text: "We work together to develop healthy digital habits", type: "mentor" } ]) }, { text: "Regarding digital entertainment...", options: shuffleArray([ { text: "I strictly limit entertainment-related screen time", type: "limiter" }, { text: "I don't place any restrictions on entertainment choices", type: "enabler" }, { text: "We balance digital entertainment with other activities", type: "mentor" } ]) }, { text: "When it comes to device bedtime rules...", options: shuffleArray([ { text: "All devices must be turned in hours before bedtime", type: "limiter" }, { text: "They can keep their devices with them at night", type: "enabler" }, { text: "We establish healthy bedtime routines together", type: "mentor" } ]) }, { text: "Regarding digital rewards and consequences...", options: shuffleArray([ { text: "I use device access as a primary reward/punishment tool", type: "limiter" }, { text: "I never use technology access as a behavioral tool", type: "enabler" }, { text: "We discuss and agree on reasonable technology privileges", type: "mentor" } ]) }, { text: "When handling online mistakes...", options: shuffleArray([ { text: "I implement stricter restrictions after any mishap", type: "limiter" }, { text: "I let them learn from their mistakes independently", type: "enabler" }, { text: "We discuss what happened and how to prevent future issues", type: "mentor" } ]) }, { text: "Regarding digital skills development...", options: shuffleArray([ { text: "I focus only on essential basic skills", type: "limiter" }, { text: "I let them explore and develop skills on their own", type: "enabler" }, { text: "We identify and nurture relevant digital skills together", type: "mentor" } ]) }, { text: "When it comes to digital citizenship...", options: shuffleArray([ { text: "I strictly control all online interactions", type: "limiter" }, { text: "I let them figure out online etiquette themselves", type: "enabler" }, { text: "We discuss and practice responsible online behavior", type: "mentor" } ]) }, { text: "Regarding digital wellness...", options: shuffleArray([ { text: "I enforce strict rules about posture and screen breaks", type: "limiter" }, { text: "I let them manage their own digital health", type: "enabler" }, { text: "We develop healthy digital habits together", type: "mentor" } ]) }, { text: "When approaching new digital trends...", options: shuffleArray([ { text: "I tend to prohibit participation in new trends", type: "limiter" }, { text: "I allow immediate participation in any trend", type: "enabler" }, { text: "We evaluate trends together and make informed decisions", type: "mentor" } ]) } ]; function shuffleArray(array) { const newArray = [ ...array ]; for(let i = newArray.length - 1; i > 0; i--){ const j = Math.floor(Math.random() * (i + 1)); [newArray[i], newArray[j]] = [ newArray[j], newArray[i] ]; } return newArray; } const calculateResult = ()=>{ const counts = Object.values(answers).reduce((acc, type)=>{ acc[type] = (acc[type] || 0) + 1; return acc; }, {}); const total = Object.values(counts).reduce((a, b)=>a + b, 0); const mentorPercent = (counts.mentor || 0) / total * 100; const limiterPercent = (counts.limiter || 0) / total * 100; const enablerPercent = (counts.enabler || 0) / total * 100; return { type: mentorPercent >= limiterPercent && mentorPercent >= enablerPercent ? "Digital Mentor" : limiterPercent >= enablerPercent ? "Digital Limiter" : "Digital Enabler", scores: { mentor: mentorPercent, limiter: limiterPercent, enabler: enablerPercent } }; }; const handleAnswer = (type)=>{ setAnswers({ ...answers, [currentQuestion]: type }); if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { setShowResult(true); } }; const resetQuiz = ()=>{ setCurrentQuestion(0); setAnswers({}); setShowResult(false); }; if (showResult) { const result = calculateResult(); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-blue-50 to-white p-6", __source: { fileName: "", lineNumber: 370, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8", __source: { fileName: "", lineNumber: 371, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center mb-6 text-blue-600", __source: { fileName: "", lineNumber: 372, columnNumber: 11 }, __self: this }, "Your Digital Parenting Style:"), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 375, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold mb-4 text-blue-800", __source: { fileName: "", lineNumber: 376, columnNumber: 13 }, __self: this }, result.type), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 380, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 381, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-1", __source: { fileName: "", lineNumber: 382, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 383, columnNumber: 19 }, __self: this }, "Mentor Approach"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 384, columnNumber: 19 }, __self: this }, Math.round(result.scores.mentor), "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 386, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-600 h-2.5 rounded-full", style: { width: `${result.scores.mentor}%` }, __source: { fileName: "", lineNumber: 387, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 394, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-1", __source: { fileName: "", lineNumber: 395, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 396, columnNumber: 19 }, __self: this }, "Limiter Approach"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 397, columnNumber: 19 }, __self: this }, Math.round(result.scores.limiter), "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 399, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-red-600 h-2.5 rounded-full", style: { width: `${result.scores.limiter}%` }, __source: { fileName: "", lineNumber: 400, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 407, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-1", __source: { fileName: "", lineNumber: 408, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 409, columnNumber: 19 }, __self: this }, "Enabler Approach"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 410, columnNumber: 19 }, __self: this }, Math.round(result.scores.enabler), "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 412, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${result.scores.enabler}%` }, __source: { fileName: "", lineNumber: 413, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-left", __source: { fileName: "", lineNumber: 421, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 422, columnNumber: 15 }, __self: this }, "Key Insights:"), result.type === "Digital Mentor" && /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-2", __source: { fileName: "", lineNumber: 424, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 425, columnNumber: 19 }, __self: this }, "You excel at guiding and balancing technology use"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 426, columnNumber: 19 }, __self: this }, "You promote collaborative decision-making about digital usage"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 430, columnNumber: 19 }, __self: this }, "You help develop healthy digital habits through discussion and example")), result.type === "Digital Limiter" && /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-2", __source: { fileName: "", lineNumber: 437, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 438, columnNumber: 19 }, __self: this }, "You prioritize protection through clear boundaries"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 439, columnNumber: 19 }, __self: this }, "You take a cautious approach to digital exposure"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 440, columnNumber: 19 }, __self: this }, "Consider incorporating more collaborative decision-making")), result.type === "Digital Enabler" && /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-2", __source: { fileName: "", lineNumber: 446, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 447, columnNumber: 19 }, __self: this }, "You embrace technology's potential for growth"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 448, columnNumber: 19 }, __self: this }, "You encourage independent digital exploration"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 449, columnNumber: 19 }, __self: this }, "Consider adding more structured guidance and boundaries"))), /*#__PURE__*/ React.createElement("button", { onClick: resetQuiz, className: "bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition-colors mb-8", __source: { fileName: "", lineNumber: 456, columnNumber: 13 }, __self: this }, "Take Quiz Again"), /*#__PURE__*/ React.createElement("div", { className: "mt-12 pt-8 border-t border-gray-200", __source: { fileName: "", lineNumber: 463, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 464, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 465, columnNumber: 17 }, __self: this }, "Made by Sethi"), /*#__PURE__*/ React.createElement("a", { href: "https://sethideclercq.com/blog/", target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:text-blue-800 transition-colors", __source: { fileName: "", lineNumber: 466, columnNumber: 17 }, __self: this }, "For more info and fun projects, visit sethideclercq.com"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass text-3xl text-blue-600 mt-4", title: "PATH Framework", __source: { fileName: "", lineNumber: 474, columnNumber: 17 }, __self: this })))))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-blue-50 to-white p-6", __source: { fileName: "", lineNumber: 487, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-xl shadow-lg p-8", __source: { fileName: "", lineNumber: 488, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 489, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 490, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 491, columnNumber: 13 }, __self: this }, "Digital Style Quiz"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 494, columnNumber: 13 }, __self: this }, "Question ", currentQuestion + 1, " of ", questions.length)), /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 498, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-blue-600 rounded-full transition-all duration-300", style: { width: `${(currentQuestion + 1) / questions.length * 100}%` }, __source: { fileName: "", lineNumber: 499, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 508, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 509, columnNumber: 11 }, __self: this }, questions[currentQuestion].text), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 512, columnNumber: 11 }, __self: this }, questions[currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswer(option.type), className: "w-full text-left p-4 rounded-lg border border-gray-200 hover:border-blue-500 hover:bg-blue-50 transition-colors", __source: { fileName: "", lineNumber: 514, columnNumber: 15 }, __self: this }, option.text)))))); }