/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const leadershipStyles = [ "Coercive", "Authoritative", "Affiliative", "Democratic", "Pacesetting", "Coaching" ]; const originalQuestions = [ { text: "I often tell team members exactly what they need to do and how to do it.", style: "Coercive" }, { text: "I believe tight control over processes is important to get results.", style: "Coercive" }, { text: "I expect immediate compliance with my decisions.", style: "Coercive" }, { text: "I set a clear vision and inspire others to follow.", style: "Authoritative" }, { text: "I provide a lot of autonomy but expect alignment with my vision.", style: "Authoritative" }, { text: "I feel comfortable taking decisive action when the path is unclear.", style: "Authoritative" }, { text: "I prioritize creating harmony and strong relationships within the team.", style: "Affiliative" }, { text: "I focus on supporting others' emotional needs and building trust.", style: "Affiliative" }, { text: "I avoid confrontation or criticism unless it's absolutely necessary.", style: "Affiliative" }, { text: "I regularly seek input and consensus from team members before making decisions.", style: "Democratic" }, { text: "I encourage open dialogue and collective problem-solving.", style: "Democratic" }, { text: "I value collaboration and believe that group decisions lead to better outcomes.", style: "Democratic" }, { text: "I lead by example and set very high standards for myself and others.", style: "Pacesetting" }, { text: "I expect my team to be highly self-motivated and to meet ambitious goals.", style: "Pacesetting" }, { text: "I tend to take over if I see others struggling to meet the pace I set.", style: "Pacesetting" }, { text: "I enjoy helping team members develop their skills and potential.", style: "Coaching" }, { text: "I spend time mentoring and giving personalized feedback.", style: "Coaching" }, { text: "I prioritize long-term development over short-term tasks.", style: "Coaching" } ]; const scaleOptions = [ { value: 0, label: "Never" }, { value: 1, label: "Rarely" }, { value: 2, label: "Sometimes" }, { value: 3, label: "Often" }, { value: 4, label: "Always" }, ]; function shuffleArray(array) { const shuffled = [...array]; 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; } function App() { const [questions, setQuestions] = useState([]); const [currentQuestion, setCurrentQuestion] = useState(0); const [answers, setAnswers] = useState([]); const [showResults, setShowResults] = useState(false); const [showIntro, setShowIntro] = useState(true); useEffect(() => { const shuffledQuestions = shuffleArray(originalQuestions); setQuestions(shuffledQuestions); setAnswers(new Array(shuffledQuestions.length).fill(null)); }, []); const handleAnswer = (value) => { const newAnswers = [...answers]; newAnswers[currentQuestion] = value; setAnswers(newAnswers); if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } }; const handleBack = () => { if (currentQuestion > 0) { setCurrentQuestion(currentQuestion - 1); } else { setShowIntro(true); } }; const handleForward = () => { if (currentQuestion < questions.length - 1 && answers[currentQuestion] !== null) { setCurrentQuestion(currentQuestion + 1); } }; const calculateScores = () => { const rawScores = Object.fromEntries(leadershipStyles.map(style => [style, 0])); questions.forEach((question, index) => { if (answers[index] !== null) { rawScores[question.style] += answers[index]; } }); const totalScore = Object.values(rawScores).reduce((sum, score) => sum + score, 0); const percentageScores = Object.fromEntries( Object.entries(rawScores).map(([style, score]) => [ style, totalScore > 0 ? Math.round((score / totalScore) * 100) : 0 ]) ); return percentageScores; }; const handleSubmit = () => { if (answers.every(answer => answer !== null)) { setShowResults(true); } else { alert("Please answer all questions before submitting."); } }; const resetQuiz = () => { const shuffledQuestions = shuffleArray(originalQuestions); setQuestions(shuffledQuestions); setAnswers(new Array(shuffledQuestions.length).fill(null)); setCurrentQuestion(0); setShowResults(false); setShowIntro(true); }; const startQuiz = () => { setShowIntro(false); }; const ValTownLink = () => (

); if (showIntro) { return (

Leadership Styles Quiz

Welcome to the Leadership Styles Quiz

This quiz is based on Daniel Goleman's six leadership styles: Coercive, Authoritative, Affiliative, Democratic, Pacesetting, and Coaching.

You'll be presented with 18 statements about leadership behaviors. For each statement, indicate how often you engage in that behavior, from "Never" to "Always".

At the end, you'll receive a breakdown of your leadership style tendencies.

); } if (showResults) { const scores = calculateScores(); const sortedStyles = leadershipStyles.sort((a, b) => scores[b] - scores[a]); const maxScore = Math.max(...Object.values(scores)); const naturalStyles = sortedStyles.filter(style => scores[style] === maxScore); return (

Leadership Styles Quiz

Your Leadership Style Results

{sortedStyles.map((style, index) => (

{style}

{scores[style]}%

))}

Your natural style{naturalStyles.length > 1 ? 's appear' : ' appears'} to be: {naturalStyles.join(", ")}

); } if (questions.length === 0) { return

; } return (

Leadership Styles Quiz

Question {currentQuestion + 1} of {questions.length}

{questions[currentQuestion].text}

{scaleOptions.map(option => ( ))}

{currentQuestion === questions.length - 1 ? ( ) : ( )}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Leadership Styles Quiz

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #1F2937; background-color: #F3F4F6; margin: 0; padding: 40px 20px; } .container { max-width: 700px; margin: 0 auto; } .container > *:first-child { margin-top: 0; } .card { background-color: #fff; border-radius: 16px; padding: 40px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); margin-top: 30px; } h1 { color: #111827; font-size: 32px; font-weight: 700; margin-bottom: 30px; text-align: center; } h2 { color: #374151; font-size: 24px; font-weight: 600; margin-top: 0; margin-bottom: 24px; } .question-container { margin-bottom: 30px; } .question-text { height: 100px; overflow-y: auto; margin-bottom: 20px; } .question-text p { font-size: 20px; margin: 0; } .answers { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 30px; } .button { padding: 14px 28px; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 16px; transition: all 0.3s ease; } .button:disabled { opacity: 0.5; cursor: not-allowed; } .button.primary { background-color: #29CC57; color: white; } .button.secondary { background-color: #E5E7EB; color: #374151; } .button.answer { flex: 1; background-color: #F3F4F6; color: #374151; } .button.answer.selected { background-color: #29CC57; color: white; } .button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .navigation { display: flex; justify-content: space-between; margin-bottom: 30px; } .progress-bar { width: 100%; height: 10px; background-color: #E5E7EB; border-radius: 5px; overflow: hidden; } .progress { height: 100%; background-color: #29CC57; transition: width 0.3s ease-in-out; } .result-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 16px 12px; align-items: center; margin-bottom: 30px; } .result-item { display: contents; } .style-name { font-weight: 600; font-size: 18px; } .score-value { text-align: right; font-weight: 600; font-size: 18px; } .natural-style { font-size: 20px; margin-bottom: 30px; } .val-town-link { margin-top: 24px; text-align: center; } .val-town-link a { color: #9CA3AF; text-decoration: none; font-weight: 500; font-size: 14px; } .val-town-link a:hover { text-decoration: underline; } .loading { text-align: center; margin-top: 40px; font-size: 20px; } .intro p { margin-bottom: 20px; } .intro button { margin-top: 10px; } @media (max-width: 600px) { body { padding: 20px 16px; } .card { padding: 30px 20px; } h1 { font-size: 28px; } h2 { font-size: 22px; } .question-text p { font-size: 18px; } .answers { flex-direction: column; } .navigation { flex-direction: column; gap: 16px; } .button { width: 100%; padding: 12px 20px; } .natural-style { font-size: 18px; } } `;

leadership_styles_inventory