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.

\n \n

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

Leadership Styles Quiz

Your Leadership Style Results

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

\n {style}\n

\n {scores[style]}%\n

\n ))}\n

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

\n \n

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

;\n }\n\n return (\n

Leadership Styles Quiz

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

{questions[currentQuestion].text}

\n {scaleOptions.map(option => (\n handleAnswer(option.value)}\n className={`button answer ${answers[currentQuestion] === option.value ? 'selected' : ''}`}\n >\n {option.label}\n \n ))}\n

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

\n \n

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

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