Marketing Stresstest
<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap');
#mst-quiz, #mst-quiz * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#mst-quiz {
--mst-bg: #10284D;
--mst-accent: #0285CE;
--mst-light: #A0D2EF;
--mst-white: #FFFFFF;
--mst-green: #34C578;
--mst-red: #E85D5D;
--mst-opt: rgba(255,255,255,0.07);
--mst-opt-bdr: rgba(255,255,255,0.18);
font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--mst-bg);
border-radius: 22px;
max-width: 580px;
width: 100%;
margin: 0 auto;
color: var(--mst-white);
box-shadow: 0 24px 80px rgba(0,0,0,0.3);
overflow: hidden;
position: relative;
}
/* ─── SCREENS ─────────────────────────────────────── */
#mst-quiz .mst-screen {
padding: 28px 28px 32px;
display: flex;
flex-direction: column;
min-height: 640px;
}
/* ─── INTRO ───────────────────────────────────────── */
#mst-quiz #mst-intro {
justify-content: center;
align-items: center;
text-align: center;
gap: 22px;
}
#mst-quiz .mst-intro-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--mst-light);
background: rgba(160,210,239,0.12);
padding: 6px 16px;
border-radius: 100px;
border: 1px solid rgba(160,210,239,0.28);
display: inline-block;
}
#mst-quiz .mst-intro-title {
font-size: 38px;
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.5px;
}
#mst-quiz .mst-intro-title em {
font-style: normal;
color: var(--mst-light);
}
#mst-quiz .mst-intro-sub {
font-size: 16px;
font-weight: 400;
color: rgba(255,255,255,0.72);
line-height: 1.55;
max-width: 370px;
}
#mst-quiz .mst-intro-meta {
display: flex;
gap: 18px;
justify-content: center;
flex-wrap: wrap;
}
#mst-quiz .mst-intro-meta span {
font-size: 13px;
color: rgba(255,255,255,0.55);
display: flex;
align-items: center;
gap: 7px;
}
#mst-quiz .mst-intro-meta span::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mst-accent);
display: inline-block;
flex-shrink: 0;
}
#mst-quiz .mst-btn-start {
background: var(--mst-accent);
color: var(--mst-white);
border: none;
border-radius: 100px;
padding: 17px 44px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 10px 28px rgba(2,133,206,0.42);
-webkit-font-smoothing: antialiased;
}
#mst-quiz .mst-btn-start:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(2,133,206,0.52);
}
/* ─── QUESTION HEADER ────────────────────────────── */
#mst-quiz .mst-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
#mst-quiz .mst-back-btn {
background: rgba(255,255,255,0.1);
border: none;
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s;
font-family: inherit;
}
#mst-quiz .mst-back-btn:hover { background: rgba(255,255,255,0.2); }
#mst-quiz .mst-back-btn.mst-hidden { visibility: hidden; }
#mst-quiz .mst-prog-bar {
flex: 1;
height: 3px;
background: rgba(255,255,255,0.13);
border-radius: 100px;
overflow: hidden;
}
#mst-quiz .mst-prog-fill {
height: 100%;
background: var(--mst-white);
border-radius: 100px;
transition: width 0.45s ease;
width: 10%;
}
#mst-quiz .mst-counter {
font-size: 13px;
font-weight: 600;
background: rgba(255,255,255,0.11);
padding: 5px 13px;
border-radius: 100px;
flex-shrink: 0;
letter-spacing: 0.3px;
}
#mst-quiz .mst-score-badge {
font-size: 13px;
font-weight: 700;
background: rgba(52,197,120,0.14);
color: #4ade80;
border: 1px solid rgba(52,197,120,0.28);
padding: 5px 13px;
border-radius: 100px;
flex-shrink: 0;
letter-spacing: 0.3px;
}
/* ─── QUESTION CONTENT ───────────────────────────── */
#mst-quiz .mst-sel-badge {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--mst-bg);
background: var(--mst-white);
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 18px;
align-self: flex-start;
}
#mst-quiz .mst-q-text {
font-size: 23px;
font-weight: 800;
line-height: 1.28;
margin-bottom: 22px;
letter-spacing: -0.2px;
}
/* ─── OPTIONS ────────────────────────────────────── */
#mst-quiz .mst-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
#mst-quiz .mst-opt {
background: var(--mst-opt);
border: 1px solid var(--mst-opt-bdr);
border-radius: 12px;
padding: 15px 18px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-family: inherit;
font-size: 15px;
font-weight: 500;
color: var(--mst-white);
text-align: left;
transition: background 0.15s, border-color 0.15s, transform 0.12s;
width: 100%;
gap: 12px;
-webkit-font-smoothing: antialiased;
}
#mst-quiz .mst-opt:hover:not(:disabled) {
background: rgba(255,255,255,0.13);
border-color: rgba(255,255,255,0.36);
transform: translateX(3px);
}
#mst-quiz .mst-opt:disabled { cursor: default; }
#mst-quiz .mst-opt-txt { flex: 1; line-height: 1.4; }
#mst-quiz .mst-opt-icon {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 13px;
font-weight: 800;
opacity: 0;
transition: opacity 0.2s;
}
/* States after answering */
#mst-quiz .mst-opt.opt-sel-correct {
background: var(--mst-white);
color: var(--mst-bg);
border-color: var(--mst-white);
}
#mst-quiz .mst-opt.opt-sel-correct .mst-opt-icon {
background: var(--mst-bg);
color: var(--mst-white);
opacity: 1;
}
#mst-quiz .mst-opt.opt-sel-wrong {
background: var(--mst-white);
color: var(--mst-bg);
border-color: var(--mst-white);
}
#mst-quiz .mst-opt.opt-sel-wrong .mst-opt-icon {
background: var(--mst-bg);
color: var(--mst-white);
opacity: 1;
}
#mst-quiz .mst-opt.opt-unsel-correct {
background: var(--mst-opt);
color: rgba(255,255,255,0.85);
border-color: rgba(255,255,255,0.22);
}
#mst-quiz .mst-opt.opt-unsel-correct .mst-opt-icon {
border: 1.5px solid rgba(255,255,255,0.4);
color: rgba(255,255,255,0.65);
opacity: 1;
}
#mst-quiz .mst-opt.opt-unsel-wrong {
background: rgba(255,255,255,0.03);
color: rgba(255,255,255,0.42);
border-color: rgba(255,255,255,0.08);
}
#mst-quiz .mst-opt.opt-unsel-wrong .mst-opt-icon {
border: 1.5px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.35);
opacity: 1;
}
/* ─── FEEDBACK BOX ───────────────────────────────── */
#mst-quiz .mst-feedback {
background: rgba(255,255,255,0.05);
border: 1.5px solid var(--mst-accent);
border-radius: 16px;
padding: 18px 18px 18px 16px;
margin-bottom: 18px;
display: flex;
align-items: flex-start;
gap: 14px;
animation: mst-fadein 0.3s ease;
}
#mst-quiz .mst-feedback.mst-wrong {
border-color: var(--mst-red);
}
@keyframes mst-fadein {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#mst-quiz .mst-fb-icon {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 16px;
font-weight: 900;
color: white;
}
#mst-quiz .mst-fb-icon.correct { background: var(--mst-green); }
#mst-quiz .mst-fb-icon.wrong { background: var(--mst-red); }
#mst-quiz .mst-fb-body { flex: 1; }
#mst-quiz .mst-fb-title {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
margin-bottom: 6px;
}
#mst-quiz .mst-fb-title.correct { color: var(--mst-green); }
#mst-quiz .mst-fb-title.wrong { color: var(--mst-red); }
#mst-quiz .mst-fb-stat {
font-size: 22px;
font-weight: 800;
color: var(--mst-white);
margin-bottom: 8px;
line-height: 1.2;
}
#mst-quiz .mst-fb-stat span {
font-size: 13px;
font-weight: 400;
color: rgba(255,255,255,0.65);
}
#mst-quiz .mst-fb-expl {
font-size: 14px;
line-height: 1.58;
color: rgba(255,255,255,0.78);
}
/* ─── NEXT BUTTON ────────────────────────────────── */
#mst-quiz .mst-btn-next {
width: 100%;
background: var(--mst-white);
color: var(--mst-bg);
border: none;
border-radius: 100px;
padding: 16px;
font-family: inherit;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.12s, opacity 0.12s;
-webkit-font-smoothing: antialiased;
margin-top: 4px;
}
#mst-quiz .mst-btn-next:hover {
transform: translateY(-1px);
opacity: 0.92;
}
/* ─── RESULTS ────────────────────────────────────── */
#mst-quiz #mst-result {
justify-content: flex-start;
align-items: center;
text-align: center;
gap: 4px;
}
#mst-quiz .mst-res-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--mst-light);
background: rgba(160,210,239,0.12);
padding: 5px 14px;
border-radius: 100px;
border: 1px solid rgba(160,210,239,0.25);
margin-bottom: 16px;
}
#mst-quiz .mst-ring-wrap {
position: relative;
width: 186px;
height: 186px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
#mst-quiz .mst-ring-wrap svg {
position: absolute;
top: 0; left: 0;
transform: rotate(-90deg);
}
#mst-quiz .mst-ring-bg {
fill: none;
stroke: rgba(255,255,255,0.1);
stroke-width: 11;
}
#mst-quiz .mst-ring-fill {
fill: none;
stroke: var(--mst-accent);
stroke-width: 11;
stroke-linecap: round;
stroke-dasharray: 484.8;
stroke-dashoffset: 484.8;
transition: stroke-dashoffset 1.3s cubic-bezier(0.4,0,0.2,1);
}
#mst-quiz .mst-ring-inner {
position: relative;
z-index: 1;
text-align: center;
}
#mst-quiz .mst-ring-pct {
font-size: 46px;
font-weight: 800;
line-height: 1;
display: block;
letter-spacing: -1px;
}
#mst-quiz .mst-ring-sub {
font-size: 13px;
color: rgba(255,255,255,0.55);
margin-top: 3px;
display: block;
}
#mst-quiz .mst-res-title {
font-size: 22px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 10px;
padding: 0 10px;
}
#mst-quiz .mst-res-text {
font-size: 15px;
color: rgba(255,255,255,0.72);
line-height: 1.58;
margin-bottom: 28px;
padding: 0 8px;
max-width: 440px;
}
#mst-quiz .mst-btn-cta {
display: block;
width: 100%;
background: var(--mst-accent);
color: var(--mst-white);
text-decoration: none;
border: none;
border-radius: 100px;
padding: 18px 24px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 10px 28px rgba(2,133,206,0.4);
-webkit-font-smoothing: antialiased;
text-align: center;
}
#mst-quiz .mst-btn-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(2,133,206,0.52);
}
#mst-quiz .mst-btn-restart {
background: none;
border: none;
color: rgba(255,255,255,0.45);
font-family: inherit;
font-size: 13px;
cursor: pointer;
text-decoration: underline;
transition: color 0.15s;
margin-top: 14px;
}
#mst-quiz .mst-btn-restart:hover { color: rgba(255,255,255,0.8); }
#mst-quiz .mst-intro-source {
font-size: 12px;
color: rgba(255,255,255,0.38);
line-height: 1.5;
max-width: 380px;
text-align: center;
margin-top: -6px;
}
#mst-quiz .mst-intro-source em {
font-style: normal;
color: rgba(255,255,255,0.55);
}
#mst-quiz .mst-source-footer {
font-size: 11px;
color: rgba(255,255,255,0.32);
text-align: center;
margin-top: 16px;
line-height: 1.5;
}
/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 480px) {
#mst-quiz .mst-screen { padding: 20px 16px 24px; min-height: 560px; }
#mst-quiz .mst-q-text { font-size: 20px; }
#mst-quiz .mst-intro-title { font-size: 30px; }
#mst-quiz .mst-ring-pct { font-size: 38px; }
}
</style>
<div id="mst-quiz">
<!-- ═══ INTRO SCREEN ════════════════════════════════ -->
<div class="mst-screen" id="mst-intro">
<span class="mst-intro-eyebrow">brandDOC</span>
<h1 class="mst-intro-title">Marketing<br><em>Stresstest</em></h1>
<p class="mst-intro-sub">10 Fragen. Keine Tricks. Wie stark ist Ihr Marketing-Fundament wirklich?</p>
<div class="mst-intro-meta">
<span>10 Fragen</span>
<span>ca. 3 Minuten</span>
<span>Sofortiges Ergebnis</span>
</div>
<p class="mst-intro-source">Basierend auf der Ipsos-Studie <em>»Marketing Anchors«</em> & den Lehrinhalten von Mark Ritson · Erstmals auf Deutsch</p>
<button class="mst-btn-start" onclick="mstStart()">Jetzt starten →</button>
</div>
<!-- ═══ QUESTION SCREEN ══════════════════════════════ -->
<div class="mst-screen" id="mst-question" style="display:none">
<div class="mst-header">
<button class="mst-back-btn mst-hidden" id="mst-back" onclick="mstBack()">‹</button>
<div class="mst-prog-bar"><div class="mst-prog-fill" id="mst-prog"></div></div>
<span class="mst-counter" id="mst-counter">1 / 10</span>
<span class="mst-score-badge" id="mst-score">✓ 0%</span>
</div>
<span class="mst-sel-badge">Eine auswählen</span>
<h2 class="mst-q-text" id="mst-q-text"></h2>
<div class="mst-options" id="mst-options"></div>
<div class="mst-feedback" id="mst-feedback" style="display:none">
<div class="mst-fb-icon" id="mst-fb-icon"></div>
<div class="mst-fb-body">
<div class="mst-fb-title" id="mst-fb-title"></div>
<div class="mst-fb-stat" id="mst-fb-stat"></div>
<div class="mst-fb-expl" id="mst-fb-expl"></div>
</div>
</div>
<button class="mst-btn-next" id="mst-next" onclick="mstNext()" style="display:none">Weiter →</button>
</div>
<!-- ═══ RESULT SCREEN ════════════════════════════════ -->
<div class="mst-screen" id="mst-result" style="display:none">
<span class="mst-res-label">Ihr Ergebnis</span>
<div class="mst-ring-wrap">
<svg width="186" height="186" viewBox="0 0 186 186">
<circle class="mst-ring-bg" cx="93" cy="93" r="77"/>
<circle class="mst-ring-fill" id="mst-ring" cx="93" cy="93" r="77"/>
</svg>
<div class="mst-ring-inner">
<span class="mst-ring-pct" id="mst-ring-pct">0%</span>
<span class="mst-ring-sub">richtig</span>
</div>
</div>
<div class="mst-res-title" id="mst-res-title"></div>
<div class="mst-res-text" id="mst-res-text"></div>
<a class="mst-btn-cta" id="mst-cta"
href="https://calendly.com/branding-agentur-sturmerprobt/kostenloses-erstgesprach"
target="_blank" rel="noopener">
Kostenloses Erstgespräch buchen
</a>
<button class="mst-btn-restart" onclick="mstRestart()">Quiz wiederholen</button>
<p class="mst-source-footer">Quelle: Ipsos »Marketing Anchors« & Mark Ritson · Übersetzt & aufbereitet von brandDOC</p>
</div>
</div><!-- #mst-quiz -->
<script>
(function () {
/* ══════════════════════════════════════════════════════
QUIZ-DATEN
══════════════════════════════════════════════════════ */
var Q = [
{
q: "F1. Die ursprünglichen '4Ps' des Marketing-Mix – welches war NICHT dabei?",
opts: ["Position", "Place (Distribution)", "Promotion (Kommunikation)", "Price (Preis)"],
c: 0,
pct: "68 %",
expl: "Das ist kein Trivia. Die 4Ps – Product, Price, Place, Promotion – sind das Grundgesetz des Marketing. Mark Ritson nennt sie das unverzichtbare Fundament jeder Marketingstrategie. »Position« gehört nicht dazu: Sie ist das Ergebnis strategischer Arbeit, kein Instrument davon. Wer das verwechselt, arbeitet am falschen Ende."
},
{
q: "F2. Wenn Marketer von 'STP' sprechen – was meinen sie damit?",
opts: ["Segmentierung, Targeting, Positionierung", "Spend, Tracking, Performance", "Sales, Trade, Promotions", "Strategy, Tactics, Planning"],
c: 0,
pct: "49 %",
expl: "STP – Segmentierung, Targeting, Positionierung – ist laut Mark Ritson das wichtigste strategische Rahmenwerk im Marketing überhaupt. Trotzdem beherrschen es nur 49 % korrekt, zeigt die Ipsos-Studie »Marketing Anchors«. Wer sein Budget verteilt, bevor er weiß, wen er erreichen will, verschenkt systematisch Wirkung."
},
{
q: "F3. Wenn jemand von 'Markenpositionierung' spricht – was definiert er damit?",
opts: [
"Den Regalplatz der Marke gegenüber Mitbewerbern",
"Die relative Priorität der Marke innerhalb der Kategorie",
"Den angestrebten Platz, den eine Marke im Kopf der Zielkunden einnehmen soll",
"Die Händler und Distributionspartner der Marke"
],
c: 2,
pct: "61 %",
expl: "Mark Ritson ist in diesem Punkt eindeutig: Positionierung ist der gewünschte Platz im Kopf der Zielgruppe – keine Regaloptimierung, kein Ranking. Ipsos-Markendaten belegen zudem, dass der emotionale Wert einer Marke den Kaufentscheid über die Zeit immer stärker beeinflusst. Wer Positionierung dem Zufall überlässt, verliert diesen Platz an den Wettbewerb."
},
{
q: "F4. Wenn jemand von 'DBAs' spricht – was meint er damit?",
opts: [
"Digitale Markenaktivierung",
"Direkte Markenzuschreibung",
"Differenzierte Markenattribute",
"Distinctive Brand Assets (unverwechselbare Markensignale)"
],
c: 3,
pct: "49 %",
expl: "Distinctive Brand Assets sind das, was eine Marke beim Sehen oder Hören sofort erkennbar macht. Ipsos hat Tausende getestet: Nur 15 % erreichen den »Gold Standard«. Der Rest ist austauschbar. Mark Ritson spricht von einer der gravierendsten Fehlinvestitionen im modernen Marketing – man zahlt für Kommunikation, die niemand zuordnet."
},
{
q: "F5. Welcher Begriff beschreibt im Marketing am treffendsten das Konzept 'Penetration'?",
opts: [
"Wie oft bestehende Käufer die Marke kaufen",
"Der Anteil der Kategorie-Käufer, die die Marke mindestens einmal im Zeitraum kaufen",
"Die Anzahl der Wettbewerber, die in die Kategorie eingedrungen sind",
"Der Regalanteil der Marke über alle Handelsflächen"
],
c: 1,
pct: "53 %",
expl: "Byron Sharp hat es belegt, Mark Ritson hat es popularisiert: Wachstum kommt durch Penetration – mehr Käufer, nicht loyalere Stammkunden. Nur 53 % der Marketer können das laut Ipsos korrekt definieren. Wer seine Strategie hauptsächlich auf Bestandskunden ausrichtet, optimiert das falsche Ende."
},
{
q: "F6. Welche dieser Methoden ist eine quantitative Form der Marktforschung?",
opts: [
"Tiefeninterviews (IDIs)",
"Projektive Verfahren",
"Conjoint-Analyse",
"Ethnografische Forschung"
],
c: 2,
pct: "35 %",
expl: "Conjoint ist eine der mächtigsten quantitativen Methoden – sie misst, wie Käufer zwischen Produkteigenschaften und Preispunkten abwägen. Ipsos nutzt sie für Preisoptimierung und Produktentwicklung. Nur 35 % wussten das. Die Unterscheidung zwischen Messen (quantitativ) und Verstehen (qualitativ) ist in der Praxis entscheidend – und wird regelmäßig verwechselt."
},
{
q: "F7. Das Konzept 'Excess Share of Voice' (ESOV) bezeichnet was?",
opts: [
"Share of Voice minus Share of Market",
"Gesamter Share of Voice geteilt durch Wettbewerber-Spendings",
"Die zusätzliche Reichweite über dem Durchschnittsniveau",
"Das durch eine Kampagne verschwendete Werbebudget"
],
c: 0,
pct: "43 %",
expl: "ESOV stammt aus der Binet-&-Field-Forschung und wird von Mark Ritson konsequent in die Praxis übersetzt: Wer mehr Werbedruck hat als Marktanteil (positives ESOV), wächst. Wer weniger hat, schrumpft. Das ist mit Daten belegt. Nur 43 % der Marketer kennen das – was erklärt, warum so viele Unternehmen ihr Werbebudget systematisch zu klein halten."
},
{
q: "F8. Wenn Marketer von 'Above the Line' (ATL) Werbung sprechen – was meinen sie damit?",
opts: [
"Werbung, die im Handel auf Augenhöhe platziert wird",
"Massenmedien-Werbung wie TV, Radio und Außenwerbung",
"Premium-Werbeplatzierungen zu überdurchschnittlichen Kosten",
"Kreative Arbeit, die den Qualitätsdurchschnitt übersteigt"
],
c: 1,
pct: "56 %",
expl: "ATL steht für Massenmedien – TV, Radio, Print, Out-of-Home. Die Ipsos Cross-Media-Datenbank zeigt: Die Kombination von digitalen und klassischen ATL-Medien steigert die Kampagnenreichweite um bis zu 17 %. Mark Ritson warnt seit Jahren vor dem dogmatischen Shift zu »nur noch Digital« – die Daten geben ihm Recht."
},
{
q: "F9. Was ist die wahrscheinlichste Erklärung, wenn eine Marke im Omnichannel-Marketing herausragt?",
opts: [
"Sie balanciert Offline- und Online-Distribution optimal",
"Sie investiert gezielt in die richtigen digitalen Kommunikationskanäle",
"Sie verteilt ihr Budget gleichmäßig auf alle Werbeformen",
"Sie gibt in jedem Kanal mehr aus als die Konkurrenz"
],
c: 0,
pct: "50 %",
expl: "Omnichannel bedeutet nicht Omnipräsenz. Ipsos-Forschung zeigt: Was Marken hier heraushebt, ist die optimale Balance zwischen Offline- und Online-Distribution – nicht mehr Budget in mehr Kanäle. Mark Ritson nennt das »orchestrated presence«. Gleichmäßige Budgetverteilung auf alle Kanäle ist das genaue Gegenteil davon."
},
{
q: "F10. Was meint man mit dem Begriff 'Medianeutralität'?",
opts: [
"Gleichmäßige Budgetverteilung auf alle Medienkanäle",
"Verzicht auf politisch oder kulturell kontroverse Medienplatzierungen",
"Neutrale, unparteiische Botschaften in allen Medienkommunikationen",
"Medienkanäle auf Basis von Wirkungsdaten auswählen – nicht nach persönlicher Präferenz"
],
c: 3,
pct: "43 %",
expl: "Medianeutralität ist das Gegenmodell zum Kanal-Dogmatismus. Mark Ritson formuliert es klar: Welcher Kanal der richtige ist, entscheidet die Wirkungsforschung – nicht die Vorliebe des Marketers, nicht die Begeisterung für neue Plattformen. Ipsos-Daten belegen konsistent: zielgerichtete Kanalauswahl schlägt gleichmäßige Budgetverteilung."
}
];
/* ══════════════════════════════════════════════════════
STATE
══════════════════════════════════════════════════════ */
var state = {
cur: 0,
answers: new Array(10).fill(null), // null | {sel, correct}
score: 0
};
/* ══════════════════════════════════════════════════════
DOM HELPERS
══════════════════════════════════════════════════════ */
function el(id) { return document.getElementById(id); }
function show(id, flex) { el(id).style.display = flex ? 'flex' : 'block'; }
function hide(id) { el(id).style.display = 'none'; }
/* ══════════════════════════════════════════════════════
START
══════════════════════════════════════════════════════ */
window.mstStart = function () {
hide('mst-intro');
show('mst-question', true);
renderQuestion(0);
};
/* ══════════════════════════════════════════════════════
RENDER QUESTION
══════════════════════════════════════════════════════ */
function renderQuestion(idx) {
state.cur = idx;
var q = Q[idx];
/* Header */
el('mst-prog').style.width = ((idx + 1) / 10 * 100) + '%';
el('mst-counter').textContent = (idx + 1) + ' / 10';
el('mst-score').textContent = '\u2713 ' + Math.round(state.score / 10 * 100) + '%';
var backBtn = el('mst-back');
idx > 0 ? backBtn.classList.remove('mst-hidden') : backBtn.classList.add('mst-hidden');
/* Question text */
el('mst-q-text').textContent = q.q;
/* Options */
var container = el('mst-options');
container.innerHTML = '';
var answered = state.answers[idx] !== null;
for (var i = 0; i < q.opts.length; i++) {
var btn = document.createElement('button');
btn.className = 'mst-opt';
btn.disabled = answered;
var txt = document.createElement('span');
txt.className = 'mst-opt-txt';
txt.textContent = q.opts[i];
var icon = document.createElement('span');
icon.className = 'mst-opt-icon';
if (answered) {
var ans = state.answers[idx];
var isCorrect = (i === q.c);
var isSelected = (i === ans.sel);
if (isSelected && isCorrect) { btn.classList.add('opt-sel-correct'); icon.textContent = '\u2713'; }
else if (isSelected && !isCorrect) { btn.classList.add('opt-sel-wrong'); icon.textContent = '\u2715'; }
else if (!isSelected && isCorrect) { btn.classList.add('opt-unsel-correct'); icon.textContent = '\u2713'; }
else { btn.classList.add('opt-unsel-wrong'); icon.textContent = '\u2715'; }
}
btn.appendChild(txt);
btn.appendChild(icon);
if (!answered) {
(function (optIdx) {
btn.addEventListener('click', function () { selectAnswer(optIdx); });
}(i));
}
container.appendChild(btn);
}
/* Feedback + Next */
if (answered) {
showFeedback(idx);
show('mst-feedback', true);
show('mst-next', false);
el('mst-next').textContent = idx === 9 ? 'Ergebnis anzeigen \u2192' : 'Weiter \u2192';
} else {
hide('mst-feedback');
hide('mst-next');
}
}
/* ══════════════════════════════════════════════════════
SELECT ANSWER
══════════════════════════════════════════════════════ */
function selectAnswer(optIdx) {
var q = Q[state.cur];
var isCorrect = (optIdx === q.c);
state.answers[state.cur] = { sel: optIdx, correct: isCorrect };
if (isCorrect) state.score++;
/* Update option visuals */
var btns = el('mst-options').querySelectorAll('.mst-opt');
for (var i = 0; i < btns.length; i++) {
btns[i].disabled = true;
var icon = btns[i].querySelector('.mst-opt-icon');
var isCor = (i === q.c);
var isSel = (i === optIdx);
if (isSel && isCor) { btns[i].classList.add('opt-sel-correct'); icon.textContent = '\u2713'; }
else if (isSel && !isCor) { btns[i].classList.add('opt-sel-wrong'); icon.textContent = '\u2715'; }
else if (!isSel && isCor) { btns[i].classList.add('opt-unsel-correct'); icon.textContent = '\u2713'; }
else { btns[i].classList.add('opt-unsel-wrong'); icon.textContent = '\u2715'; }
}
/* Update score badge */
el('mst-score').textContent = '\u2713 ' + Math.round(state.score / 10 * 100) + '%';
/* Show feedback */
showFeedback(state.cur);
show('mst-feedback', true);
/* Show next button */
show('mst-next', false);
el('mst-next').textContent = state.cur === 9 ? 'Ergebnis anzeigen \u2192' : 'Weiter \u2192';
/* Scroll feedback into view */
setTimeout(function () {
el('mst-feedback').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}, 120);
}
/* ══════════════════════════════════════════════════════
SHOW FEEDBACK
══════════════════════════════════════════════════════ */
function showFeedback(idx) {
var q = Q[idx];
var ans = state.answers[idx];
var correct = ans.correct;
var fb = el('mst-feedback');
fb.classList.toggle('mst-wrong', !correct);
var iconEl = el('mst-fb-icon');
var titleEl = el('mst-fb-title');
iconEl.className = 'mst-fb-icon ' + (correct ? 'correct' : 'wrong');
iconEl.textContent = correct ? '\u2713' : '\u2715';
titleEl.className = 'mst-fb-title ' + (correct ? 'correct' : 'wrong');
titleEl.textContent = correct ? 'Richtig!' : 'Falsch!';
el('mst-fb-stat').innerHTML =
'<strong>' + q.pct + '</strong> <span>haben diese Frage richtig beantwortet</span>';
el('mst-fb-expl').textContent = q.expl;
}
/* ══════════════════════════════════════════════════════
NEXT / BACK
══════════════════════════════════════════════════════ */
window.mstNext = function () {
if (state.cur === 9) {
showResults();
} else {
renderQuestion(state.cur + 1);
el('mst-quiz').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
};
window.mstBack = function () {
if (state.cur > 0) {
renderQuestion(state.cur - 1);
el('mst-quiz').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
};
/* ══════════════════════════════════════════════════════
RESULTS
══════════════════════════════════════════════════════ */
function showResults() {
hide('mst-question');
show('mst-result', true);
var pct = Math.round(state.score / 10 * 100);
var circ = 2 * Math.PI * 77; // r=77 → 483.8
var offset = circ - (pct / 100) * circ;
el('mst-ring-pct').textContent = pct + '%';
el('mst-ring').style.strokeDasharray = circ;
el('mst-ring').style.strokeDashoffset = circ;
setTimeout(function () {
el('mst-ring').style.strokeDashoffset = offset;
}, 250);
/* Score-basierte Botschaft */
var title, text;
if (state.score <= 3) {
title = 'Hier wartet echtes Potenzial.';
text = 'Viele Unternehmen sind besser als ihr Marktauftritt – aber nur, wenn das Marketing-Fundament stimmt. Ein Erstgespräch zeigt Ihnen, wo die größten Hebel liegen.';
} else if (state.score <= 6) {
title = 'Solide Basis – Luft nach oben.';
text = 'Sie kennen die Konzepte. Die entscheidende Frage ist: Werden sie in Ihrem Unternehmen auch konsequent angewendet? Das ist der Unterschied zwischen Theorie und echter Markenwirkung.';
} else if (state.score <= 9) {
title = 'Starke Marketing-Kompetenz.';
text = 'Beeindruckendes Ergebnis. Die meisten schaffen weniger als 70 %. Jetzt stellt sich die Frage: Wird dieses Wissen in Ihrer Organisation auch in echte Marktposition übersetzt?';
} else {
title = '100 % – Respekt.';
text = 'Das schafft kaum jemand. Jetzt geht es darum, dieses Wissen in echte Wirkung zu verwandeln. Sprechen wir darüber, wie das für Ihr Unternehmen konkret aussieht.';
}
el('mst-res-title').textContent = title;
el('mst-res-text').textContent = text;
}
/* ══════════════════════════════════════════════════════
RESTART
══════════════════════════════════════════════════════ */
window.mstRestart = function () {
state.cur = 0;
state.answers = new Array(10).fill(null);
state.score = 0;
hide('mst-result');
show('mst-intro', true);
};
}());
</script>
