<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What Is Your Body Trying to Tell You? | Fitness Hacks for Life</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--green-deep: #0F6E56;
--green-mid: #1D9E75;
--green-light: #9FE1CB;
--green-pale: #E1F5EE;
--cream: #FAF8F4;
--ink: #1A1A1A;
--ink-soft: #4A4A4A;
--ink-muted: #888;
--border: rgba(0,0,0,0.1);
--radius: 16px;
--radius-sm: 10px;
}
body {
font-family: 'DM Sans', sans-serif;
background: var(--cream);
color: var(--ink);
min-height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 2rem 1rem 4rem;
}
.quiz-container {
width: 100%;
max-width: 620px;
}
/* Header */
.quiz-header {
text-align: center;
margin-bottom: 2.5rem;
animation: fadeUp 0.6s ease both;
}
.brand-tag {
display: inline-block;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--green-deep);
background: var(--green-pale);
padding: 5px 14px;
border-radius: 20px;
margin-bottom: 1rem;
}
.quiz-title {
font-family: 'DM Serif Display', serif;
font-size: clamp(26px, 5vw, 38px);
line-height: 1.2;
color: var(--ink);
margin-bottom: 0.75rem;
}
.quiz-title em {
font-style: italic;
color: var(--green-mid);
}
.quiz-subtitle {
font-size: 15px;
color: var(--ink-soft);
line-height: 1.6;
max-width: 440px;
margin: 0 auto;
}
/* Progress */
.progress-wrap {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.progress-track {
flex: 1;
height: 3px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--green-mid);
border-radius: 2px;
transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.progress-label {
font-size: 12px;
color: var(--ink-muted);
white-space: nowrap;
}
/* Question card */
.question-card {
background: #fff;
border-radius: var(--radius);
padding: 2rem;
border: 1px solid var(--border);
margin-bottom: 1rem;
animation: fadeUp 0.4s ease both;
}
.q-number {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--green-mid);
margin-bottom: 0.75rem;
}
.q-text {
font-family: 'DM Serif Display', serif;
font-size: clamp(18px, 3vw, 22px);
line-height: 1.35;
color: var(--ink);
margin-bottom: 1.5rem;
}
/* Options */
.options { display: flex; flex-direction: column; gap: 10px; }
.opt {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
background: var(--cream);
transition: all 0.18s ease;
user-select: none;
}
.opt:hover {
border-color: var(--green-mid);
background: var(--green-pale);
transform: translateX(3px);
}
.opt.selected {
border-color: var(--green-mid);
background: var(--green-pale);
}
.opt.selected .opt-check {
background: var(--green-mid);
border-color: var(--green-mid);
}
.opt.selected .opt-check::after { opacity: 1; }
.opt-check {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1.5px solid #ccc;
flex-shrink: 0;
position: relative;
transition: all 0.18s ease;
}
.opt-check::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 7px; height: 7px;
background: #fff;
border-radius: 50%;
opacity: 0;
transition: opacity 0.15s;
}
.opt-icon { font-size: 18px; flex-shrink: 0; }
.opt-text { font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
/* Navigation */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.btn {
padding: 12px 28px;
border-radius: var(--radius-sm);
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.18s ease;
border: 1.5px solid transparent;
}
.btn-back {
background: transparent;
border-color: var(--border);
color: var(--ink-muted);
}
.btn-back:hover { border-color: var(--ink-muted); color: var(--ink); }
.btn-back:disabled { opacity: 0.3; cursor: default; }
.btn-next {
background: var(--green-mid);
color: #fff;
border-color: var(--green-mid);
}
.btn-next:hover:not(:disabled) { background: var(--green-deep); border-color: var(--green-deep); }
.btn-next:disabled { opacity: 0.4; cursor: default; }
.btn-next:active:not(:disabled) { transform: scale(0.98); }
/* Result screen */
.result-screen { animation: fadeUp 0.5s ease both; }
.result-hero {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
text-align: center;
margin-bottom: 1rem;
}
.result-emoji { font-size: 52px; margin-bottom: 1rem; display: block; }
.result-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--green-mid);
margin-bottom: 0.5rem;
}
.result-type {
font-family: 'DM Serif Display', serif;
font-size: clamp(22px, 4vw, 30px);
color: var(--ink);
margin-bottom: 0.5rem;
}
.result-sub {
font-size: 14px;
color: var(--ink-muted);
margin-bottom: 1.25rem;
}
.result-desc {
font-size: 15px;
color: var(--ink-soft);
line-height: 1.7;
text-align: left;
border-top: 1px solid var(--border);
padding-top: 1.25rem;
}
/* Tips */
.tips-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem 2rem;
margin-bottom: 1rem;
}
.tips-heading {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 1rem;
}
.tip {
display: flex;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 14px;
color: var(--ink-soft);
line-height: 1.5;
}
.tip:last-child { border-bottom: none; padding-bottom: 0; }
.tip-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
/* CTA block */
.cta-card {
background: var(--green-deep);
border-radius: var(--radius);
padding: 1.75rem 2rem;
margin-bottom: 1rem;
text-align: center;
}
.cta-card p {
font-size: 15px;
color: var(--green-light);
line-height: 1.6;
margin-bottom: 1.25rem;
}
.cta-btn {
display: inline-block;
padding: 13px 28px;
background: #fff;
color: var(--green-deep);
border-radius: var(--radius-sm);
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: opacity 0.18s;
cursor: pointer;
border: none;
}
.cta-btn:hover { opacity: 0.9; }
/* Share & retake */
.actions {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.action-btn {
padding: 10px 20px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: var(--ink-soft);
cursor: pointer;
transition: all 0.15s;
}
.action-btn:hover { border-color: var(--green-mid); color: var(--green-deep); }
.retake-link {
display: block;
text-align: center;
font-size: 13px;
color: var(--ink-muted);
text-decoration: underline;
cursor: pointer;
background: none;
border: none;
font-family: 'DM Sans', sans-serif;
width: 100%;
}
.retake-link:hover { color: var(--ink); }
/* Animations */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Copied toast */
.toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: var(--ink);
color: #fff;
font-size: 13px;
padding: 10px 20px;
border-radius: 20px;
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
z-index: 9999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 480px) {
.question-card, .tips-card, .result-hero, .cta-card { padding: 1.5rem; }
body { padding: 1.5rem 1rem 3rem; }
}
</style>
</head>
<body>
<div class="quiz-container">
<!-- Header -->
<div class="quiz-header">
<span class="brand-tag">Fitness Hacks for Life</span>
<h1 class="quiz-title">What is your body<br><em>trying to tell you?</em></h1>
<p class="quiz-subtitle">8 questions. Honest answers. Real insights into your mental wellness — and what to do next.</p>
</div>
<!-- Quiz screen -->
<div id="quiz-screen">
<div class="progress-wrap">
<div class="progress-track"><div class="progress-fill" id="progress-fill" style="width:0%"></div></div>
<span class="progress-label" id="progress-label">1 of 8</span>
</div>
<div class="question-card" id="question-card">
<p class="q-number" id="q-number">Question 1</p>
<p class="q-text" id="q-text"></p>
<div class="options" id="options"></div>
</div>
<div class="nav">
<button class="btn btn-back" id="back-btn" onclick="goBack()" disabled>Back</button>
<button class="btn btn-next" id="next-btn" onclick="goNext()" disabled>Next</button>
</div>
</div>
<!-- Result screen -->
<div id="result-screen" style="display:none"></div>
</div>
<div class="toast" id="toast">Copied to clipboard!</div>
<script>
const questions = [
{
text: "When you wake up in the morning, your first feeling is usually...",
options: [
{ icon: "😴", text: "Exhausted — I never feel rested", score: {A:2} },
{ icon: "😟", text: "Anxious — my mind is already racing", score: {B:2} },
{ icon: "😐", text: "Numb — just going through the motions", score: {C:2} },
{ icon: "😊", text: "Okay — some days better than others", score: {D:2} }
]
},
{
text: "When something stressful happens, you tend to...",
options: [
{ icon: "🔒", text: "Shut down and go quiet", score: {C:2,A:1} },
{ icon: "🌀", text: "Overthink it for hours or days", score: {B:2} },
{ icon: "💪", text: "Push through and ignore it", score: {D:1,A:1} },
{ icon: "🗣️", text: "Vent to someone or journal it out", score: {D:2} }
]
},
{
text: "Your relationship with sleep looks like...",
options: [
{ icon: "😵", text: "Can't fall asleep — mind won't stop", score: {B:2} },
{ icon: "💤", text: "Sleep too much but still exhausted", score: {C:2,A:1} },
{ icon: "⚡", text: "Broken sleep — wake up at 3am", score: {A:2,B:1} },
{ icon: "😌", text: "Pretty decent, actually", score: {D:2} }
]
},
{
text: "How do you feel in social situations lately?",
options: [
{ icon: "🚪", text: "Avoiding them whenever possible", score: {C:2,B:1} },
{ icon: "😰", text: "Anxious before, during, and after", score: {B:2} },
{ icon: "🎭", text: "Fine on the outside, struggling inside", score: {A:2,C:1} },
{ icon: "🤝", text: "Generally okay — just need more energy", score: {D:2} }
]
},
{
text: "When you think about the future, you mostly feel...",
options: [
{ icon: "😨", text: "Scared — a lot could go wrong", score: {B:2} },
{ icon: "😶", text: "Blank — I don't like to think about it", score: {C:2} },
{ icon: "😓", text: "Overwhelmed — too much to figure out", score: {A:2,B:1} },
{ icon: "🌱", text: "Cautiously hopeful", score: {D:2} }
]
},
{
text: "How would you describe your relationship with yourself?",
options: [
{ icon: "⚔️", text: "I'm my own worst critic", score: {B:2,C:1} },
{ icon: "👻", text: "I feel disconnected from who I am", score: {C:2} },
{ icon: "🔋", text: "I push myself too hard and crash", score: {A:2} },
{ icon: "🌸", text: "A work in progress — getting better", score: {D:2} }
]
},
{
text: "What drains your energy the most?",
options: [
{ icon: "👥", text: "Other people and their expectations", score: {B:2,C:1} },
{ icon: "📋", text: "My never-ending to-do list", score: {A:2} },
{ icon: "💭", text: "My own thoughts", score: {B:2,C:1} },
{ icon: "❓", text: "I genuinely don't know", score: {C:2} }
]
},
{
text: "What would feel most healing to you right now?",
options: [
{ icon: "🛁", text: "Real rest — not just sleep", score: {A:2} },
{ icon: "🧠", text: "Someone to help me quiet my mind", score: {B:2} },
{ icon: "🤗", text: "Feeling truly seen and understood", score: {C:2} },
{ icon: "🗺️", text: "A clear plan forward", score: {D:2} }
]
}
];
const results = {
A: {
emoji: "🔋",
type: "Burnout & exhaustion",
sub: "Your body and mind are running on empty",
desc: "You've been giving so much to everyone and everything — and quietly running yourself into the ground. The fatigue you're feeling isn't laziness. It's your nervous system saying 'enough.' The good news? Rest is a skill, and you can learn it.",
tips: [
{ icon: "🌿", text: "Try a 5-minute body scan before bed to release stored tension" },
{ icon: "📵", text: "Cut screen time by 30 minutes before sleep — your cortisol will thank you" },
{ icon: "🧘", text: "Start a 10-minute morning ritual that's just for you — no productivity allowed" },
{ icon: "💬", text: "Talk to a therapist who specializes in burnout recovery" }
],
cta: "Want support from a real therapist? TheraConnect matches you with licensed professionals — always free for clients."
},
B: {
emoji: "🌀",
type: "Anxiety & overthinking",
sub: "Your mind rarely gets a quiet moment",
desc: "You're not overreacting — your nervous system has learned to stay on high alert. Anxiety is exhausting because it never really clocks out. But there are practical, proven tools that can turn down the volume in your mind — and you don't have to figure them out alone.",
tips: [
{ icon: "🌬️", text: "Box breathing (4-4-4-4) is your new best friend — try it before stressful moments" },
{ icon: "📓", text: "Brain dump journaling before bed clears the mental queue" },
{ icon: "🖐️", text: "Use the 5-4-3-2-1 grounding method when anxiety spikes" },
{ icon: "💬", text: "A therapist trained in CBT can help rewire anxious thought loops" }
],
cta: "Ready to work with someone who truly gets anxiety? TheraConnect connects you with therapists who specialize in exactly this — free for clients."
},
C: {
emoji: "🌫️",
type: "Emotional numbness",
sub: "You might be protecting yourself without realizing it",
desc: "Feeling detached, flat, or like you're watching your life from behind glass is more common than people admit — and it's often the mind's way of protecting you from overwhelm. It doesn't mean you're broken. It means something needs gentle attention.",
tips: [
{ icon: "🎨", text: "Creative expression (drawing, music, movement) can unlock what words can't reach" },
{ icon: "🌳", text: "15 minutes outside daily — nature quietly reconnects us to our senses" },
{ icon: "📖", text: "Explore the free emotional wellness workbooks at fitnesshacksforlife.org" },
{ icon: "💬", text: "A trauma-informed therapist can help you reconnect safely" }
],
cta: "Feeling disconnected is something a therapist can really help with. TheraConnect matches you with the right professional — always free for clients."
},
D: {
emoji: "🌱",
type: "Building resilience",
sub: "You're in a good place — keep growing",
desc: "You're not in crisis, but you're self-aware enough to know there's always room to grow. That instinct to check in with yourself? It's one of the most powerful mental health tools there is. Let's make sure you have everything you need to keep thriving.",
tips: [
{ icon: "📚", text: "Explore 120+ free resources at fitnesshacksforlife.org" },
{ icon: "🧘", text: "Start a daily mindfulness practice — even 5 minutes shifts your baseline" },
{ icon: "🤝", text: "Consider coaching or therapy as a proactive investment in yourself" },
{ icon: "💌", text: "Join the newsletter for weekly mental wellness tools and tips" }
],
cta: "Want to go even deeper? TheraConnect connects you with coaches and therapists for any stage of the journey — always free for clients."
}
};
let current = 0;
let answers = [];
function renderQuestion() {
const q = questions[current];
const total = questions.length;
document.getElementById('progress-fill').style.width = `${(current / total) * 100}%`;
document.getElementById('progress-label').textContent = `${current + 1} of ${total}`;
document.getElementById('q-number').textContent = `Question ${current + 1}`;
document.getElementById('q-text').textContent = q.text;
const opts = document.getElementById('options');
opts.innerHTML = '';
q.options.forEach((o, i) => {
const div = document.createElement('div');
div.className = 'opt' + (answers[current] === i ? ' selected' : '');
div.innerHTML = `<div class="opt-check"></div><span class="opt-icon">${o.icon}</span><span class="opt-text">${o.text}</span>`;
div.onclick = () => selectOption(i);
opts.appendChild(div);
});
document.getElementById('back-btn').disabled = current === 0;
document.getElementById('next-btn').disabled = answers[current] === undefined;
document.getElementById('next-btn').textContent = current === total - 1 ? 'See my result →' : 'Next →';
const card = document.getElementById('question-card');
card.style.animation = 'none';
card.offsetHeight;
card.style.animation = 'fadeUp 0.35s ease both';
}
function selectOption(i) {
answers[current] = i;
document.querySelectorAll('.opt').forEach((el, idx) => el.classList.toggle('selected', idx === i));
document.getElementById('next-btn').disabled = false;
}
function goNext() {
if (answers[current] === undefined) return;
if (current === questions.length - 1) { showResult(); return; }
current++;
renderQuestion();
}
function goBack() {
if (current > 0) { current--; renderQuestion(); }
}
function showResult() {
const sc = {A:0,B:0,C:0,D:0};
answers.forEach((ans, qi) => {
const s = questions[qi].options[ans].score;
Object.keys(s).forEach(k => sc[k] += s[k]);
});
const top = Object.keys(sc).sort((a,b) => sc[b]-sc[a])[0];
const r = results[top];
document.getElementById('progress-fill').style.width = '100%';
document.getElementById('progress-label').textContent = 'Complete!';
document.getElementById('quiz-screen').style.display = 'none';
const rs = document.getElementById('result-screen');
rs.style.display = 'block';
rs.className = 'result-screen';
rs.innerHTML = `
<div class="result-hero">
<span class="result-emoji">${r.emoji}</span>
<p class="result-label">Your result</p>
<h2 class="result-type">${r.type}</h2>
<p class="result-sub">${r.sub}</p>
<p class="result-desc">${r.desc}</p>
</div>
<div class="tips-card">
<p class="tips-heading">What to do next</p>
${r.tips.map(t => `<div class="tip"><span class="tip-icon">${t.icon}</span><span>${t.text}</span></div>`).join('')}
</div>
<div class="cta-card">
<p>${r.cta}</p>
<a class="cta-btn" href="https://theraconnect.net" target="_blank" rel="noopener">Find a therapist — it's free</a>
</div>
<div class="actions">
<button class="action-btn" onclick="copyResult('${r.type}', '${r.emoji}')">Copy my result</button>
<a class="action-btn" href="https://fitnesshacksforlife.org/resources/" target="_blank" rel="noopener" style="text-decoration:none">Free resources</a>
</div>
<button class="retake-link" onclick="retake()">Retake the quiz</button>
`;
}
function copyResult(type, emoji) {
const text = `I just took the Fitness Hacks for Life mental wellness quiz!\n\nMy result: "${type}" ${emoji}\n\nTake it yourself: https://fitnesshacksforlife.org`;
navigator.clipboard.writeText(text).then(() => {
const t = document.getElementById('toast');
t.classList.add('show');
setTimeout(() => t.classList.remove('show'), 2500);
}).catch(() => {});
}
function retake() {
current = 0;
answers = [];
document.getElementById('result-screen').style.display = 'none';
document.getElementById('quiz-screen').style.display = 'block';
document.getElementById('progress-fill').style.width = '0%';
renderQuestion();
}
renderQuestion();
</script>
</body>
</html>Mental Health Disclaimer:
The information on this site is for educational purposes only and does not replace professional mental health care. We are a non-profit organization committed to increasing access to mental wellness education. If you are experiencing a crisis or need immediate support in the United States, call or text 988 to reach the Suicide & Crisis Lifeline.
Reach out to Providers at Our Sister Site
Leave a Reply