https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js
/* ── TM17pro Quiz — Scoped Styles (WordPress-safe) ── */
/* Import already handled by above */
#tm17pro-quiz {
font-family: ‘Montserrat’, sans-serif;
max-width: 700px;
margin: 0 auto;
padding: 1.5rem 0.75rem 3rem;
box-sizing: border-box;
color: #4b5b54;
line-height: 1.6;
}
#tm17pro-quiz *, #tm17pro-quiz *::before, #tm17pro-quiz *::after {
box-sizing: border-box;
}
/* Card */
#tm17pro-quiz .tm-card {
background: white;
border-radius: 14px;
box-shadow: 0 4px 24px rgba(59,78,70,0.10);
overflow: visible;
}
/* Header */
#tm17pro-quiz .tm-header {
background: #3b4e46;
padding: 2rem 2rem 1.75rem;
border-radius: 14px 14px 0 0;
text-align: center;
}
#tm17pro-quiz .tm-logo-text {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.25em;
color: #d4f270;
text-transform: uppercase;
margin-bottom: 0.6rem;
font-family: ‘Montserrat’, sans-serif;
}
#tm17pro-quiz .tm-header h1 {
font-size: clamp(1.4rem, 4vw, 2rem);
font-weight: 800;
color: #f9f8f5;
line-height: 1.15;
margin: 0 0 0.4rem 0;
font-family: ‘Montserrat’, sans-serif;
}
#tm17pro-quiz .tm-header p {
font-size: 0.8rem;
color: #a6bfb4;
font-weight: 500;
margin: 0;
}
/* Body */
#tm17pro-quiz .tm-body {
padding: 1.75rem 1.75rem 2rem;
}
@media (max-width: 480px) {
#tm17pro-quiz .tm-header { padding: 1.5rem 1.25rem 1.25rem; }
#tm17pro-quiz .tm-body { padding: 1.25rem 1.25rem 1.5rem; }
}
/* Progress */
#tm17pro-quiz .tm-progress-wrap { margin-bottom: 1.5rem; }
#tm17pro-quiz .tm-progress-label {
font-size: 0.7rem;
font-weight: 600;
color: #4b5b54;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
#tm17pro-quiz .tm-progress-track {
height: 5px;
background: #eaeeea;
border-radius: 99px;
overflow: hidden;
}
#tm17pro-quiz .tm-progress-fill {
height: 100%;
background: #94c01d;
border-radius: 99px;
transition: width 0.4s ease;
width: 4%;
}
/* Question */
#tm17pro-quiz .tm-q-label {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.18em;
color: #94c01d;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
#tm17pro-quiz .tm-q-text {
font-size: clamp(1rem, 2.5vw, 1.2rem);
font-weight: 700;
color: #3b4e46;
line-height: 1.35;
margin: 0 0 1.25rem 0;
font-family: ‘Montserrat’, sans-serif;
}
/* Options */
#tm17pro-quiz .tm-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 1.5rem;
}
#tm17pro-quiz .tm-opt {
background: #f9f8f5;
border: 1.5px solid #eaeeea;
border-radius: 8px;
padding: 0.85rem 1rem;
text-align: left;
font-size: 0.875rem;
font-weight: 500;
color: #4b5b54;
line-height: 1.5;
transition: all 0.2s ease;
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
min-width: 0;
cursor: pointer;
font-family: ‘Montserrat’, sans-serif;
-webkit-tap-highlight-color: transparent;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}
#tm17pro-quiz .tm-opt:hover {
border-color: #94c01d;
background: #f3fde0;
color: #3b4e46;
}
#tm17pro-quiz .tm-opt.sel {
border-color: #94c01d;
background: #d4f270;
color: #3b4e46;
font-weight: 600;
}
#tm17pro-quiz .tm-opt-letter {
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 50%;
background: white;
border: 1.5px solid #eaeeea;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 800;
color: #4b5b54;
flex-shrink: 0;
transition: all 0.2s ease;
margin-top: 1px;
font-family: ‘Montserrat’, sans-serif;
}
#tm17pro-quiz .tm-opt.sel .tm-opt-letter {
background: #94c01d;
border-color: #94c01d;
color: white;
}
#tm17pro-quiz .tm-opt-text {
flex: 1;
min-width: 0;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: normal;
}
/* Nav buttons */
#tm17pro-quiz .tm-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
#tm17pro-quiz .tm-btn-back {
background: none;
border: 1.5px solid #a6bfb4;
border-radius: 8px;
padding: 0.7rem 1.1rem;
font-size: 0.75rem;
font-weight: 700;
color: #4b5b54;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.2s ease;
cursor: pointer;
font-family: ‘Montserrat’, sans-serif;
}
#tm17pro-quiz .tm-btn-back:hover { border-color: #3b4e46; color: #3b4e46; }
#tm17pro-quiz .tm-btn-next {
background: #94c01d;
border: none;
border-radius: 8px;
padding: 0.75rem 1.75rem;
font-size: 0.8rem;
font-weight: 800;
color: #3b4e46;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: all 0.2s ease;
margin-left: auto;
cursor: pointer;
font-family: ‘Montserrat’, sans-serif;
}
#tm17pro-quiz .tm-btn-next:hover:not(:disabled) { background: #d4f270; }
#tm17pro-quiz .tm-btn-next:disabled { opacity: 0.3; cursor: not-allowed; }
/* Screen utility */
#tm17pro-quiz .tm-screen { display: none; }
#tm17pro-quiz .tm-screen.active { display: block; }
/* SR only */
#tm17pro-quiz .sr-only {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* ── RESULTS ── */
#tm17pro-quiz .r-hero {
background: #3b4e46; border-radius: 8px;
padding: 1.5rem; margin-bottom: 1rem; text-align: center;
}
#tm17pro-quiz .r-greet {
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.2em;
color: #94c01d; text-transform: uppercase; margin-bottom: 0.4rem;
}
#tm17pro-quiz .r-name {
font-size: clamp(1.4rem, 4vw, 1.85rem); font-weight: 800;
color: #f9f8f5; line-height: 1.15; margin: 0 0 0.4rem 0;
font-family: ‘Montserrat’, sans-serif;
}
#tm17pro-quiz .r-tagline { font-size: 0.85rem; color: #a6bfb4; font-weight: 500; margin: 0 0 0.85rem 0; }
#tm17pro-quiz .r-phil {
background: rgba(148,192,29,0.13); border-left: 3px solid #94c01d;
border-radius: 0 6px 6px 0; padding: 0.65rem 1rem; text-align: left;
}
#tm17pro-quiz .r-phil p { font-size: 0.78rem; color: #d4f270; font-style: italic; line-height: 1.6; font-weight: 500; }
#tm17pro-quiz .r-section-label {
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.18em;
color: #4b5b54; text-transform: uppercase; margin-bottom: 0.75rem;
}
#tm17pro-quiz .r-radar-wrap {
background: white; border: 1.5px solid #eaeeea; border-radius: 8px;
padding: 1.25rem; margin-bottom: 1rem;
display: flex; flex-direction: column; align-items: center;
}
#tm17pro-quiz .r-radar-wrap canvas { max-width: 100%; height: auto; }
#tm17pro-quiz .r-blend-bars { width: 100%; margin-top: 0.85rem; }
#tm17pro-quiz .r-blend-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#tm17pro-quiz .r-blend-label { font-size: 0.72rem; font-weight: 600; color: #3b4e46; width: 155px; flex-shrink: 0; }
#tm17pro-quiz .r-blend-track { flex: 1; background: #eaeeea; border-radius: 99px; height: 7px; }
#tm17pro-quiz .r-blend-fill { height: 7px; background: #94c01d; border-radius: 99px; }
#tm17pro-quiz .r-blend-pct { font-size: 0.7rem; font-weight: 700; color: #4b5b54; width: 30px; text-align: right; }
#tm17pro-quiz .r-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; margin-top: 0.85rem; }
#tm17pro-quiz .r-legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 500; color: #4b5b54; }
#tm17pro-quiz .r-legend-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0; }
#tm17pro-quiz .r-hahn {
background: #3b4e46; border-left: 4px solid #d4f270;
border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem;
}
#tm17pro-quiz .r-hahn-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em; color: #d4f270; text-transform: uppercase; margin-bottom: 0.3rem; }
#tm17pro-quiz .r-hahn-title { font-size: 1rem; font-weight: 700; color: #f9f8f5; margin-bottom: 0.5rem; font-family: ‘Montserrat’, sans-serif; }
#tm17pro-quiz .r-hahn-text { font-size: 0.8rem; color: #a6bfb4; line-height: 1.65; }
#tm17pro-quiz .r-hahn-source { font-size: 0.68rem; color: #94c01d; font-weight: 700; margin-top: 0.5rem; }
#tm17pro-quiz .r-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1rem; }
@media (max-width: 480px) { #tm17pro-quiz .r-cards2 { grid-template-columns: 1fr; } }
#tm17pro-quiz .r-card { background: white; border: 1.5px solid #eaeeea; border-radius: 8px; padding: 1rem; }
#tm17pro-quiz .r-card-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.15em; color: #94c01d; text-transform: uppercase; margin-bottom: 0.35rem; }
#tm17pro-quiz .r-card p { font-size: 0.8rem; color: #4b5b54; line-height: 1.6; margin: 0; }
#tm17pro-quiz .r-card-source { font-size: 0.65rem; color: #94c01d; font-weight: 700; margin-top: 0.4rem; }
#tm17pro-quiz .r-family { background: white; border: 1.5px solid #d4f270; border-radius: 8px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
#tm17pro-quiz .r-family-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.15em; color: #3b4e46; text-transform: uppercase; margin-bottom: 0.4rem; }
#tm17pro-quiz .r-family p { font-size: 0.8rem; color: #4b5b54; line-height: 1.65; margin: 0; }
#tm17pro-quiz .r-watz { background: #f9f8f5; border: 1.5px solid #eaeeea; border-radius: 8px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
#tm17pro-quiz .r-watz-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.15em; color: #3b4e46; text-transform: uppercase; margin-bottom: 0.65rem; }
#tm17pro-quiz .r-watz-rows { display: flex; flex-direction: column; gap: 10px; }
#tm17pro-quiz .r-watz-row { display: flex; gap: 10px; align-items: flex-start; }
#tm17pro-quiz .r-watz-tag { font-size: 0.6rem; font-weight: 800; color: #3b4e46; background: #d4f270; border-radius: 4px; padding: 3px 8px; flex-shrink: 0; margin-top: 2px; text-transform: uppercase; white-space: nowrap; }
#tm17pro-quiz .r-watz-text { font-size: 0.8rem; color: #4b5b54; line-height: 1.55; }
#tm17pro-quiz .r-ritual { background: white; border-left: 4px solid #94c01d; border-top: 1.5px solid #eaeeea; border-right: 1.5px solid #eaeeea; border-bottom: 1.5px solid #eaeeea; border-radius: 0 8px 8px 0; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
#tm17pro-quiz .r-ritual-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.15em; color: #94c01d; text-transform: uppercase; margin-bottom: 0.3rem; }
#tm17pro-quiz .r-ritual-title { font-size: 0.9rem; font-weight: 700; color: #3b4e46; margin-bottom: 0.35rem; }
#tm17pro-quiz .r-ritual p { font-size: 0.8rem; color: #4b5b54; line-height: 1.6; margin: 0; }
#tm17pro-quiz .r-tips { background: #3b4e46; border-radius: 8px; padding: 1.35rem; margin-bottom: 1rem; }
#tm17pro-quiz .r-tips-title { font-size: 0.9rem; font-weight: 800; color: #d4f270; margin-bottom: 1rem; font-family: ‘Montserrat’, sans-serif; }
#tm17pro-quiz .r-tip-row { display: flex; gap: 10px; margin-bottom: 10px; }
#tm17pro-quiz .r-tip-dot { width: 6px; height: 6px; border-radius: 50%; background: #94c01d; flex-shrink: 0; margin-top: 7px; }
#tm17pro-quiz .r-tip-inner { display: flex; flex-direction: column; gap: 3px; }
#tm17pro-quiz .r-tip-text { font-size: 0.8rem; color: #f9f8f5; line-height: 1.6; }
#tm17pro-quiz .r-tip-src { font-size: 0.68rem; color: #a6bfb4; font-weight: 500; }
#tm17pro-quiz .r-ex { background: white; border: 1.5px solid #eaeeea; border-radius: 8px; padding: 1.35rem; margin-bottom: 1rem; }
#tm17pro-quiz .r-ex-title { font-size: 0.9rem; font-weight: 800; color: #3b4e46; margin-bottom: 1rem; font-family: ‘Montserrat’, sans-serif; }
#tm17pro-quiz .r-ex-item { border-left: 3px solid #d4f270; padding-left: 12px; margin-bottom: 14px; }
#tm17pro-quiz .r-ex-item:last-child { margin-bottom: 0; }
#tm17pro-quiz .r-ex-name { font-size: 0.82rem; font-weight: 700; color: #3b4e46; margin-bottom: 3px; }
#tm17pro-quiz .r-ex-desc { font-size: 0.78rem; color: #4b5b54; line-height: 1.55; margin: 0; }
#tm17pro-quiz .r-closing { background: #3b4e46; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; }
#tm17pro-quiz .r-closing-logo { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.3em; color: #94c01d; text-transform: uppercase; text-align: center; margin-bottom: 0.4rem; }
#tm17pro-quiz .r-closing h2 { font-size: 1.2rem; font-weight: 800; color: #f9f8f5; text-align: center; margin-bottom: 0.6rem; font-family: ‘Montserrat’, sans-serif; }
#tm17pro-quiz .r-closing-text { font-size: 0.8rem; color: #a6bfb4; line-height: 1.7; text-align: center; margin-bottom: 1.1rem; }
#tm17pro-quiz .r-song { background: rgba(212,242,112,0.12); border: 1px solid rgba(212,242,112,0.3); border-radius: 10px; padding: 1rem 1.25rem; }
#tm17pro-quiz .r-song-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0.75rem; }
@media (max-width: 400px) { #tm17pro-quiz .r-song-grid { grid-template-columns: 1fr; } }
#tm17pro-quiz .r-song-col-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em; color: #94c01d; text-transform: uppercase; margin-bottom: 0.3rem; }
#tm17pro-quiz .r-song-text { font-size: 0.9rem; color: #f9f8f5; font-style: italic; line-height: 1.65; font-weight: 500; }
#tm17pro-quiz .r-song-credit { font-size: 0.72rem; color: #a6bfb4; text-align: center; line-height: 1.6; padding-top: 0.75rem; border-top: 1px solid rgba(166,191,180,0.25); }
#tm17pro-quiz .r-dl { background: #4b5b54; border-radius: 8px; padding: 1.35rem; text-align: center; }
#tm17pro-quiz .r-dl h3 { font-size: 1rem; font-weight: 800; color: #f9f8f5; margin-bottom: 0.3rem; font-family: ‘Montserrat’, sans-serif; }
#tm17pro-quiz .r-dl p { font-size: 0.78rem; color: #a6bfb4; margin-bottom: 1rem; line-height: 1.5; }
#tm17pro-quiz .tm-btn-dl {
background: #94c01d; border: none; border-radius: 8px; padding: 0.85rem 1.75rem;
font-size: 0.82rem; font-weight: 800; color: #3b4e46; text-transform: uppercase;
letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 8px;
transition: all 0.2s ease; cursor: pointer; font-family: ‘Montserrat’, sans-serif;
}
#tm17pro-quiz .tm-btn-dl:hover { background: #d4f270; }
/* Share section */
#tm17pro-quiz .tm-share-wrap {
background: #f0f8e0;
border: 1.5px solid #d4f270;
border-radius: 10px;
padding: 1rem 1.25rem;
margin: 0.75rem 0 1.25rem;
}
#tm17pro-quiz .tm-share-label {
font-size: 0.82rem;
font-weight: 600;
color: #3b4e46;
margin: 0 0 0.75rem 0 !important;
line-height: 1.4;
}
#tm17pro-quiz .tm-share-btns {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
#tm17pro-quiz .tm-share-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0.55rem 1rem;
border-radius: 7px;
font-size: 0.8rem;
font-weight: 700;
font-family: ‘Montserrat’, sans-serif;
cursor: pointer;
text-decoration: none;
transition: all 0.18s ease;
border: none;
letter-spacing: 0.03em;
}
#tm17pro-quiz .tm-share-copy {
background: #3b4e46;
color: #d4f270;
}
#tm17pro-quiz .tm-share-copy:hover {
background: #4b5b54;
color: #d4f270;
}
#tm17pro-quiz .tm-share-copy.copied {
background: #94c01d;
color: #3b4e46;
}
#tm17pro-quiz .tm-share-fb {
background: #1877f2;
color: white;
}
#tm17pro-quiz .tm-share-fb:hover {
background: #166fe5;
color: white;
}
#tm17pro-quiz .tm-share-reddit {
background: #ff4500;
color: white;
}
#tm17pro-quiz .tm-share-reddit:hover {
background: #e03d00;
color: white;
}
#tm17pro-quiz .tm-share-ig {
background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
color: white;
border: none;
}
#tm17pro-quiz .tm-share-ig:hover {
opacity: 0.88;
color: white;
}
#tm17pro-quiz .tm-share-ig.copied {
background: #94c01d;
color: #3b4e46;
}
#tm17pro-quiz .tm-ig-hint {
display: none;
align-items: flex-start;
gap: 6px;
margin-top: 10px;
padding: 8px 12px;
background: rgba(148,192,29,0.12);
border: 1px solid #d4f270;
border-radius: 7px;
font-size: 0.78rem;
color: #3b4e46;
font-weight: 500;
line-height: 1.45;
}
#tm17pro-quiz .tm-ig-hint.show {
display: flex;
}
#tm17pro-quiz .tm-ig-hint svg {
flex-shrink: 0;
margin-top: 1px;
}
@media (max-width: 420px) {
#tm17pro-quiz .tm-share-btns { flex-direction: column; }
#tm17pro-quiz .tm-share-btn { justify-content: center; }
}
margin-top: 2rem; padding: 1.5rem; background: white;
border-radius: 14px; border: 1px solid #eaeeea;
}
#tm17pro-quiz .tm-about-box h2 {
font-size: 1.1rem; font-weight: 800; color: #3b4e46;
margin-bottom: 0.75rem; font-family: ‘Montserrat’, sans-serif;
}
#tm17pro-quiz .tm-about-box p {
font-size: 0.85rem; color: #4b5b54; line-height: 1.7;
margin-bottom: 0.75rem;
}
#tm17pro-quiz .tm-about-box p:last-child { margin-bottom: 0; }
/* Animations */
@keyframes tmFadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#tm17pro-quiz .tm-screen.active { animation: tmFadeUp 0.3s ease both; }
#tm17pro-quiz .tm-opt { animation: tmFadeUp 0.2s ease both; }
#tm17pro-quiz .tm-opt:nth-child(1) { animation-delay: 0.03s; }
#tm17pro-quiz .tm-opt:nth-child(2) { animation-delay: 0.07s; }
#tm17pro-quiz .tm-opt:nth-child(3) { animation-delay: 0.11s; }
#tm17pro-quiz .tm-opt:nth-child(4) { animation-delay: 0.15s; }
Soccer Parent Personality Quiz — Questions and Results
About This Quiz
Know other soccer parents who’d find this useful? Share it!
Link copied! Open Instagram, go to your Story or bio, and paste the link there.
The TM17pro Soccer Parent Personality Quiz is a free, research-grounded tool designed to help soccer parents better understand their own support style — and how to channel it in ways that truly serve their child’s development. Developed by a professional therapist and soccer mom with decades of experience in family systems, child development, and youth soccer.
The quiz identifies seven parent types: The Organization Miracle, The Evaluation Expert, The Cheerleader, The Communicator, The Private Coach, The Family Soul, and The Steady Rock. Every parent receives a full blended profile — along with personalized tips, exercises, and communication rituals rooted in the work of Kurt Hahn (experiential learning), Paul Watzlawick (communication theory), Jean Piaget (cognitive development), and Maria Montessori (the prepared environment).
TM17pro is America’s largest independent soccer agency, offering elite youth soccer camps across 36+ US cities and programs in Europe. We believe player development starts with the environment around the child — and that means supporting parents, not just players.
soccer-parent.com 