function MainComponent() { const [currentQuestion, setCurrentQuestion] = React.useState(0); const [responses, setResponses] = React.useState([]); const [result, setResult] = React.useState(""); const [activeTab, setActiveTab] = React.useState("levelAssessment"); const [levelScores, setLevelScores] = React.useState({ Newbie: 0, Conformist: 0, Practitioner: 0, Engineer: 0, Visionary: 0 }); const [backClicked, setBackClicked] = React.useState(false); const questions = [ { id: "Q1", text: "How do you primarily use Tana?", options: [ { id: "A", text: "For simple, unstructured note-taking and basic task management.", level: "Newbie" }, { id: "B", text: "To apply familiar systems using pre-built templates.", level: "Conformist" }, { id: "C", text: "To build a personalized setup with structured data and customized workflows.", level: "Practitioner" }, { id: "D", text: "To create complex workflows and optimize knowledge management.", level: "Engineer" }, { id: "E", text: "To develop innovative solutions and integrations, pushing the boundaries of Tana's capabilities.", level: "Visionary" } ] }, { id: "Q2", text: "How familiar are you with using supertags in Tana?", options: [ { id: "A", text: "I use them as simple labels without much understanding.", level: "Newbie" }, { id: "B", text: "I create basic supertags for common entities.", level: "Conformist" }, { id: "C", text: "I design supertags for specific entities and use them extensively.", level: "Practitioner" }, { id: "D", text: "I design complex schemas with supertags to optimize workflows.", level: "Engineer" }, { id: "E", text: "I use supertags in developing advanced automations and integrations.", level: "Visionary" } ] }, { id: "Q3", text: "How do you handle templates in Tana?", options: [ { id: "A", text: "I don't use templates much; I find them overwhelming.", level: "Newbie" }, { id: "B", text: "I rely heavily on pre-built templates and follow them mechanically.", level: "Conformist" }, { id: "C", text: "I adapt and modify templates to fit my personalized needs.", level: "Practitioner" }, { id: "D", text: "I design and implement highly customized setups for specific domains.", level: "Engineer" }, { id: "E", text: "I create complex templates and contribute to the Tana community.", level: "Visionary" } ] }, { id: "Q4", text: "How do you approach learning and improving your use of Tana?", options: [ { id: "A", text: "I'm curious and exploring the tool for better organization.", level: "Newbie" }, { id: "B", text: "I'm recognizing potential and seeking a well-structured system.", level: "Conformist" }, { id: "C", text: "I'm focused on building a customized system aligned with my needs.", level: "Practitioner" }, { id: "D", text: "I'm optimizing workflows and sharing my expertise with others.", level: "Engineer" }, { id: "E", text: "I'm exploring new possibilities and shaping the future of Tana.", level: "Visionary" } ] }, { id: "Q5", text: "How do you integrate Tana with other tools or platforms?", options: [ { id: "A", text: "I haven't explored integrations yet.", level: "Newbie" }, { id: "B", text: "I use basic integrations like calendar or voice capture.", level: "Conformist" }, { id: "C", text: "I use pre-built integrations and write basic prompts for AI fields.", level: "Practitioner" }, { id: "D", text: "I develop and implement complex AI workflows and automations.", level: "Engineer" }, { id: "E", text: "I create sophisticated integrations and contribute to Tana's development.", level: "Visionary" } ] }, { id: "Q6", text: "How do you manage and organize your tasks in Tana?", options: [ { id: "A", text: "I put tasks on the daily node without a robust system for tracking them.", level: "Newbie" }, { id: "B", text: "I try to recreate familiar task management systems like GTD using templates.", level: "Conformist" }, { id: "C", text: "I use structured data and queries to manage tasks efficiently.", level: "Practitioner" }, { id: "D", text: "I automate task management workflows to optimize efficiency.", level: "Engineer" }, { id: "E", text: "I design innovative task management systems and share them with the community.", level: "Visionary" } ] }, { id: "Q7", text: "How do you utilize Tana's search functionality?", options: [ { id: "A", text: "I rely heavily on basic search to retrieve lost information.", level: "Newbie" }, { id: "B", text: "I use search to connect several contexts and follow template guidelines.", level: "Conformist" }, { id: "C", text: "I leverage live queries for efficient information retrieval.", level: "Practitioner" }, { id: "D", text: "I create complex queries to reveal non-obvious connections and insights.", level: "Engineer" }, { id: "E", text: "I integrate search with other tools and develop advanced search methodologies.", level: "Visionary" } ] }, { id: "Q8", text: "How do you view your role in the Tana community?", options: [ { id: "A", text: "I'm just beginning to explore and understand the community.", level: "Newbie" }, { id: "B", text: "I actively ask questions to learn from other community members.", level: "Conformist" }, { id: "C", text: "I share my personalized setups and insights with others.", level: "Practitioner" }, { id: "D", text: "I contribute expertise and help optimize others' workflows.", level: "Engineer" }, { id: "E", text: "I lead discussions and contribute to the development of Tana resources.", level: "Visionary" } ] }, { id: "Q9", text: "How do you approach the concept of interconnected knowledge in Tana?", options: [ { id: "A", text: "I connect nodes sporadically without a clear strategy.", level: "Newbie" }, { id: "B", text: "I link related nodes following template guidelines.", level: "Conformist" }, { id: "C", text: "I create meaningful connections for deeper insights.", level: "Practitioner" }, { id: "D", text: "I use bi-directional linking to reveal non-obvious insights.", level: "Engineer" }, { id: "E", text: "I design systems to maximize interconnected knowledge and insights.", level: "Visionary" } ] }, { id: "Q10", text: "How do you handle complexity in your Tana workflows?", options: [ { id: "A", text: "I find the available features overwhelming and stick to basics.", level: "Newbie" }, { id: "B", text: "I follow pre-built templates to manage complexity.", level: "Conformist" }, { id: "C", text: "I adapt templates and design workflows to handle complexity.", level: "Practitioner" }, { id: "D", text: "I break down complex domains into components and optimize workflows.", level: "Engineer" }, { id: "E", text: "I develop and implement complex systems to manage intricate workflows.", level: "Visionary" } ] } ]; const handleAnswer = (questionId, option)=>{ const updatedResponses = [ ...responses ]; updatedResponses[currentQuestion] = { questionId, option }; setResponses(updatedResponses); setBackClicked(false); setTimeout(()=>{ if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { calculateResult(); } }, 500); }; const handleBack = ()=>{ if (currentQuestion > 0) { setCurrentQuestion(currentQuestion - 1); setBackClicked(true); } }; const handleForward = ()=>{ if (currentQuestion < responses.length) { setCurrentQuestion(currentQuestion + 1); setBackClicked(false); } }; const calculateResult = ()=>{ const scores = { Newbie: 0, Conformist: 0, Practitioner: 0, Engineer: 0, Visionary: 0 }; const weights = { Newbie: 1, Conformist: 2, Practitioner: 3, Engineer: 4, Visionary: 5 }; responses.forEach(({ option })=>{ scores[option.level] += weights[option.level]; }); const totalResponses = responses.length; const weightedScores = Object.entries(scores).reduce((acc, [level, score])=>{ acc[level] = score / totalResponses; return acc; }, {}); setLevelScores(weightedScores); const highestScore = Math.max(...Object.values(weightedScores)); const userLevel = Object.keys(weightedScores).find((key)=>weightedScores[key] === highestScore); setResult(userLevel); }; const levelDetails = { Newbie: { title: "Level 1. Newbie", description: [ "Beginners making first steps in Tana.", "Primarily use Tana for simple, unstructured note-taking, similar to basic note-taking apps.", "Might feel overwhelmed by the available features and learning curve.", "Haven't yet grasped the power of supertags or structured data.", "The processes are often intuitive and quite chaotic." ], skills: [ "Workspace orientation", "Basic outlining", "Text formatting" ], principles: [ "Chronological anchors", "Input / Output", "Arrangement" ], functionality: [ "Outlining", "Daily node", "Search", "Supertags [very limited]" ], practice: [ "Using Tana for basic note-taking and task management.", "Taking simple, unstructured notes primarily on the daily node.", "Putting tasks on the daily node without a robust system for tracking them.", "Connecting nodes sporadically without a clear organizational strategy.", "Using supertags as simple labels rather than to define the type (class) of a node.", "Frequently losing information and relying heavily on basic search to retrieve it." ], motivation: "Curiosity, initial exploration of the tool and a desire for better organization." }, Conformist: { title: "Level 2. Conformist", description: [ "Driven by a desire to apply familiar systems / frameworks in Tana.", "Rely heavily on pre-built templates.", "Following templates mechanically without understanding fundamentals.", "Their schema is typically inconsistent, and fragmented, a mix of elements from different templates and their own experimentation (Frankenstein-style).", "Becoming aware of best practices but have not yet figured out how to apply them to their use cases." ], skills: [ "Installing templates", "Creating basic supertags for common entities", "Using references to connect several contexts" ], principles: [ "Classification", "Database thinking", "Hierarchies" ], functionality: [ "Search", "References", "Capture / Voice", "Live queries / feeds", "Supertags [limited]" ], practice: [ "Adjusting their workflows to match templates instead of customizing templates to their needs.", "Trying to recreate in Tana familiar systems like Zettelkasten or GTD.", "Starting applying basic supertags for different types of information (book, project, task, meeting, note, etc.).", "Creating basic queries (for example, to list all meetings happening next week).", "Using voice capture to quickly capture ideas / notes.", "Link related nodes together following the guidelines of the framework or template.", "Using Tana for specific projects or areas of interest, but not yet as a central system.", "Becoming more active in Tana Slack community, asking question to learn from other community members." ], motivation: "Recognizing the potential of Tana, desire for a well-structured and efficient knowledge management / productivity system." }, Practitioner: { title: "Level 3. Practitioner", description: [ "Moving beyond simply conforming to pre-existing structures.", "Focused on building their own personalized Tana setups.", "Solid understanding of Tana's core features.", "Tana workspace is well organized and functional.", "May still rely on templates, but adapting and modifying them to fit their needs.", "Established schema & core workflows.", "Tana is becoming the primary system for knowledge & information management." ], skills: [ "Ability to think in terms of structured data", "Designing supertags for specific entities", "Constructing useful queries", "Using pre-built integrations (Calendar, Readwise)", "Writing basic prompts for AI fields" ], principles: [ "Knowledge structures", "Knowledge graphs", "Information architecture", "Granularity", "Boolean logic" ], functionality: [ "Supertags (fully embraced)", "Live queries / Feeds", "Views / Filters", "Extension", "Related content", "Tana Paste", "Readwise integration", "Command palette" ], practice: [ "Leveraging live queries and AI Chat for efficient information retrieval.", "For example: Creating a dashboard that shows all active project, upcoming deadlines, and recent updates.", "Creating meaningful connections between different sources to gain deeper insights.", "Use outlining to break down complex topics and plan projects.", "Designing schema thoughtfully: considering what fields will make the information useful and searchable.", "Exploring Tana AI features to generate summaries, formatting and brainstorming." ], motivation: "Desire to build more customized system that is better aligned with their specific needs." }, Engineer: { title: "Level 4. Engineer", description: [ "Power users utilizing advanced features to create complex workflows.", "Tana neatly fits their workflows with a well-designed schema.", "Fully embraced the idea of interconnected knowledge.", "Proactively optimize and refactor their systems.", "Using Tana to solve complex problems and manage complex projects." ], skills: [ "The ability to break down any domain into components", "Design well-organized Tana schemas", "Workflows automation", "Complex CoT prompt-engeneering" ], principles: [ "Ontology", "Modularity", "Abstraction", "Emergence", "Prompt engineering" ], functionality: [ "Commands", "Semantic functions", "Prompt workbench", "Hotkeys", "Contextual content" ], practice: [ "Designing and implementing highly customized Tana setups for specific domains or use cases.", "Using bi-directional linking to reveal non-obvious connections and insights.", "Continuously optimizing and refactoring schema and workflows.", "Streamlining the process with hotkeys.", "Actively exploring and implementing new ways to improve their system.", "Sharing expertise with the Tana community." ], motivation: "Maximizing the efficiency of their knowledge work." }, Visionary: { title: "Level 5. Visionary", description: [ "Thought leaders who are pushing the boundaries of what is possible with Tana.", "Developing innovative ways to use Tana for complex knowledge / information management.", "Deep understanding of both the capabilities and limitations of Tana.", "Might be involved in shaping the future of the product as ambassadors / navigators." ], skills: [ "Develop API integrations to connect Tana with other tools and platforms", "Creating multi-level commands with multiple variables", "Create advanced automations", "Complex CoT prompt-engeneering" ], principles: [ "Systems thinking", "System design", "HCI (Human-Computer Interaction)", "Complexity" ], functionality: [ "Commands", "Input API" ], practice: [ "Developing sophisticated integrations with other tools and platforms.", "Designing and implementing complex AI workflows: prompts + commands + custom extensions.", "Contributing to the development of Tana through plugins and community resources.", "Continuously exploring new ways to use Tana for non-obvious use cases." ], motivation: "Pushing the boundaries of what's possible with Tana & and shaping the future." } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] font-inter text-white flex items-center justify-center p-10", __source: { fileName: "", lineNumber: 578, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-8 bg-[#1d1d1d] rounded-lg", __source: { fileName: "", lineNumber: 579, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 580, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 bg-[#444] rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 581, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question text-4xl text-white", __source: { fileName: "", lineNumber: 582, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 585, columnNumber: 9 }, __self: this }, "Tana Maturity Assessment Quiz"), /*#__PURE__*/ React.createElement("h2", { className: "text-sm mb-10 text-center text-gray-400 leading-relaxed", __source: { fileName: "", lineNumber: 588, columnNumber: 9 }, __self: this }, "Original Framework by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://tanastack.com", target: "_blank", rel: "noopener noreferrer", className: "font-bold underline text-blue-400 hover:text-blue-300", __source: { fileName: "", lineNumber: 590, columnNumber: 11 }, __self: this }, "Andrew Altshuler"), " ", "⤫ Quiz Design by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://datadesign.guru", target: "_blank", rel: "noopener noreferrer", className: "font-bold underline text-blue-400 hover:text-blue-300", __source: { fileName: "", lineNumber: 599, columnNumber: 11 }, __self: this }, "Ready"), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 607, columnNumber: 11 }, __self: this }), "Read the full blog post here:", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.tanastack.com/library/tma/", target: "_blank", rel: "noopener noreferrer", className: "font-bold underline text-blue-400 hover:text-blue-300", __source: { fileName: "", lineNumber: 609, columnNumber: 11 }, __self: this }, "Tana Maturity Assessment Blog Post")), result ? /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-8 bg-[#1d1d1d] rounded-lg", __source: { fileName: "", lineNumber: 619, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 620, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 bg-[#444] hover:bg-[#555] rounded-lg mx-2 ${activeTab === "levelAssessment" ? "bg-[#555]" : ""}`, onClick: ()=>setActiveTab("levelAssessment"), __source: { fileName: "", lineNumber: 621, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line mr-2", __source: { fileName: "", lineNumber: 627, columnNumber: 17 }, __self: this }), "Level Assessment"), /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 bg-[#444] hover:bg-[#555] rounded-lg mx-2 ${activeTab === "reviewAnswers" ? "bg-[#555]" : ""}`, onClick: ()=>setActiveTab("reviewAnswers"), __source: { fileName: "", lineNumber: 629, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-list-alt mr-2", __source: { fileName: "", lineNumber: 635, columnNumber: 17 }, __self: this }), "Review Answers"), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#444] hover:bg-[#555] rounded-lg mx-2", onClick: ()=>{ setCurrentQuestion(0); setResponses([]); setResult(""); setActiveTab("levelAssessment"); }, __source: { fileName: "", lineNumber: 637, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo mr-2", __source: { fileName: "", lineNumber: 646, columnNumber: 17 }, __self: this }), "Take the Quiz Again")), activeTab === "reviewAnswers" ? /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 650, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 651, columnNumber: 17 }, __self: this }, "Review Answers"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 652, columnNumber: 17 }, __self: this }, responses.map(({ questionId, option }, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-gray-400", __source: { fileName: "", lineNumber: 654, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 655, columnNumber: 23 }, __self: this }, index + 1, ".", " ", questions.find((q)=>q.id === questionId).text), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 659, columnNumber: 23 }, __self: this }), option.text, " →", " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#ff00ff]", __source: { fileName: "", lineNumber: 661, columnNumber: 23 }, __self: this }, option.level)))), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mt-6", __source: { fileName: "", lineNumber: 665, columnNumber: 17 }, __self: this }, "Rating and Score Sheet"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 space-y-1 text-gray-400", __source: { fileName: "", lineNumber: 668, columnNumber: 17 }, __self: this }, Object.entries(levelScores).map(([level, score], index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 670, columnNumber: 21 }, __self: this }, level, ": ", score.toFixed(2)))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 675, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 676, columnNumber: 19 }, __self: this }, "Your Level: ", result), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-400", __source: { fileName: "", lineNumber: 677, columnNumber: 19 }, __self: this }, "The scoring is based on a normalized weighted model. Each answer is assigned a weight based on its level, and the total score is divided by the number of responses to get an average score. Your level is determined by this average score."))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 688, columnNumber: 17 }, __self: this }, levelDetails[result].title), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 mt-4", __source: { fileName: "", lineNumber: 691, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 692, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 693, columnNumber: 21 }, __self: this }, "Skills & Abilities"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 space-y-1 text-gray-400", __source: { fileName: "", lineNumber: 694, columnNumber: 21 }, __self: this }, levelDetails[result].skills.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 696, columnNumber: 25 }, __self: this }, item)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 700, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 701, columnNumber: 21 }, __self: this }, "First Principles"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 space-y-1 text-gray-400", __source: { fileName: "", lineNumber: 702, columnNumber: 21 }, __self: this }, levelDetails[result].principles.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 704, columnNumber: 25 }, __self: this }, item)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 708, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 709, columnNumber: 21 }, __self: this }, "Functionality"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 space-y-1 text-gray-400", __source: { fileName: "", lineNumber: 710, columnNumber: 21 }, __self: this }, levelDetails[result].functionality.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 712, columnNumber: 25 }, __self: this }, item))))), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mt-6", __source: { fileName: "", lineNumber: 717, columnNumber: 17 }, __self: this }, "In Practice"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 space-y-1 text-gray-400", __source: { fileName: "", lineNumber: 718, columnNumber: 17 }, __self: this }, levelDetails[result].practice.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 720, columnNumber: 21 }, __self: this }, item))), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mt-6", __source: { fileName: "", lineNumber: 723, columnNumber: 17 }, __self: this }, "Motivation"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-400", __source: { fileName: "", lineNumber: 724, columnNumber: 17 }, __self: this }, levelDetails[result].motivation))) : /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-8 bg-[#333] rounded-lg", __source: { fileName: "", lineNumber: 731, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 732, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center w-full max-w-xs mx-auto", __source: { fileName: "", lineNumber: 733, columnNumber: 15 }, __self: this }, Array.from({ length: questions.length }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-4 h-4 mx-1 rounded-full ${index < responses.length ? "bg-green-800" : index === currentQuestion ? "bg-blue-500" : "bg-gray-600"}`, __source: { fileName: "", lineNumber: 735, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-left mb-4", __source: { fileName: "", lineNumber: 748, columnNumber: 13 }, __self: this }, questions[currentQuestion].text), /*#__PURE__*/ React.createElement("ul", { className: "text-left space-y-4", __source: { fileName: "", lineNumber: 751, columnNumber: 13 }, __self: this }, questions[currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 753, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-full py-4 px-6 bg-[#444] hover:bg-[#555] rounded-lg text-left ${responses[currentQuestion]?.option.id === option.id ? backClicked ? "outline outline-2 outline-purple-500" : "animate-sparkle" : ""}`, onClick: ()=>handleAnswer(questions[currentQuestion].id, option), __source: { fileName: "", lineNumber: 754, columnNumber: 19 }, __self: this }, option.text)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-6 space-x-4", __source: { fileName: "", lineNumber: 771, columnNumber: 13 }, __self: this }, currentQuestion > 0 && /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#444] hover:bg-[#555] rounded-lg flex items-center", onClick: handleBack, __source: { fileName: "", lineNumber: 773, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 777, columnNumber: 19 }, __self: this }), "Back"), backClicked && currentQuestion < responses.length && /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#444] hover:bg-[#555] rounded-lg flex items-center", onClick: handleForward, __source: { fileName: "", lineNumber: 781, columnNumber: 17 }, __self: this }, "Forward", /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right ml-2", __source: { fileName: "", lineNumber: 785, columnNumber: 26 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 792, columnNumber: 7 }, __self: this }, ` @keyframes sparkle { 0% { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 75px #ff00ff; } 100% { box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 0 0 20px #ff00ff, 0 0 25px #ff00ff, 0 0 35px #ff00ff; } } .animate-sparkle { animation: sparkle 0.5s ease-in-out; } `)); }

Tana Maturity Assessment Quiz

Original Framework by Andrew Altshuler ⤫ Quiz Design by ReadyRead the full blog post here: Tana Maturity Assessment Blog Post

How do you primarily use Tana?

Original Framework by Andrew Altshuler ⤫ Quiz Design by Ready
Read the full blog post here: Tana Maturity Assessment Blog Post