<<goto "Intro">>
<<set $score = 0>>
<<set $name = "Alex">>
<<set $order = "4829">>
<<set $delivery = "Friday">>
<<set $goal = "loaner by tomorrow + original by Friday">>
<<set $score = 0>>
<<set _max = 8>>
<div class="chat">
<div class="bot">
<b>Welcome to Call Center Demo 2.</b><br>
This is a short simulation of a customer escalation call.
</div>
</div>
<div class="chat">
<div class="bot">
<i>Your goal:</i>
<ul>
<li>De-escalate the situation</li>
<li>Collect the right info</li>
<li>Propose 1–2 options</li>
<li>Confirm next steps</li>
</ul>
</div>
</div>
<div class="chat">
<div class="bot">
<b><<print $name>> (Customer):</b> Finally, someone picked up! My laptop order is late and I’m sick of waiting.
</div>
</div>
<div class="note">
Goal: De-escalate, collect details, propose 1–2 options, confirm next step.
</div>
<div class="buttons">
[[“I'm really sorry about the delay, <<print $name>>. Let me pull up your order and help right away.”->S1 Empathy]]
[[“That's shipping's fault, not ours.”->Hint 1]]
[[“What's your order number?”->S1 Abrupt]]
</div>
:: S1 Empathy
<<set $score += 1>> <!-- Score #1 -->
<div class="pt-note">+1 for starting with empathy + ownership</div>
<div class="chat">
<div class="you">
I'm really sorry about the delay, <<print $name>>. Let me pull up your order and help right away.
</div>
<div class="bot">
<b><<print $name>>:</b> It was supposed to arrive Monday. Now it just says “Pending!” What’s going on?
</div>
</div>
<div class="buttons">
[[Confirm what they need + show ownership->S2 Confirm]]
[[Skip empathy, go to order info->S1 Abrupt]]
</div>
:: S1 Abrupt
<div class="pt-note">No empathy—starts abruptly</div>
<div class="chat">
<div class="you">
What’s your order number?
</div>
<div class="bot">
<b><<print $name>>:</b> Seriously? That’s your opening?
</div>
</div>
<div class="buttons">
[[Try again with empathy + ownership->S1 Empathy]]
[[Stay abrupt and go to order info->S2 Confirm]]
</div>
:: S2 Confirm
<<set $score += 1>> <!-- Score #2 -->
<div class="pt-note">+1 for confirming need + showing ownership</div>
<div class="chat">
<div class="you">
Got it—you were expecting delivery Monday and the tracking shows no update.
Let’s fix this. Do you still need the laptop urgently?
</div>
<div class="bot">
<b><<print $name>>:</b> Yes! I work remotely and I’ve been waiting around.
</div>
</div>
<div class="buttons">
[[Explore options to resolve->O1 Options]]
</div>
<<set $score += 1>> <!-- Score #3 -->
<div class="pt-note">+1 for offering options</div>
<div class="chat">
<div class="you">I hear your frustration, <<print $name>>. Let’s look at options that help: we can <b>expedite</b> at no cost, send a <b>loaner</b> for tomorrow, or discuss a <b>refund</b> if needed. Which is best?</div>
<div class="bot"><b><<print $name>>:</b> I just need something reliable, fast.</div>
</div>
<div class="buttons">
[[Offer Expedite Only->Expedite]]
[[Offer Loaner for Tomorrow->Loaner]]
[[Push Refund (even though they need a device)->Refund Push]]
</div>:: Expedite
<<set $score += 1>> <!-- Score #4 -->
<div class="pt-note">+1 for aligning to immediate need</div>
<div class="chat">
<div class="you">I can expedite the original laptop—it should arrive by Friday. That okay?</div>
<div class="bot"><b><<print $name>>:</b> Fine, as long as I don’t have to pay for shipping.</div>
</div>
<div class="buttons">
[[Close with clear summary, tracking info->Close Good]]
[[Close without confirming next step->Close Risky]]
</div>
:: Loaner
<<set $score += 1>> <!-- Score #5 -->
<div class="pt-note">+1 for aligning to immediate device need</div>
<div class="chat">
<div class="you">Let’s send a loaner for delivery tomorrow so you’re not stuck. The original laptop will follow by Friday.</div>
<div class="bot"><b><<print $name>>:</b> That works—appreciate you doing that.</div>
</div>
<div class="buttons">
[[Close with clear summary, tracking info->Close Good]]
[[Close without confirming next step->Close Risky]]
</div>
:: Refund Push
<div class="chat">
<div class="you">Let me refund you.</div>
<div class="bot"><b><<print $name>>:</b> I need a working device, not just money back.</div>
</div>
<div class="buttons">
[[Combine best-fit option + reassurance->Combo Win]]
[[End without alternate options->Close Risky]]
</div>
:: Combo Win
<<set $score += 1>> <!-- Score #4 -->
<div class="pt-note">+1 for best-fit plan + reassurance</div>
<div class="chat">
<div class="you">We’ll expedite the original and send a loaner for tomorrow. I’ll confirm shipping now and track both orders personally.</div>
<div class="bot"><b><<print $name>>:</b> Thanks. I’ll watch for the email.</div>
</div>
<div class="buttons">
[[Summarize & close well->Close Good]]
</div>
:: Close Good
<<set $score += 1>> <!-- Score #6 -->
<div class="pt-note">+1 for strong close</div>
<div class="chat">
<div class="you">
You’ll get the loaner tomorrow and the original by Friday. I’ll send tracking shortly and follow up in 2 days to confirm delivery.
</div>
<div class="bot">
<b><<print $name>>:</b> Sounds good. Thanks for getting this sorted.
</div>
</div>
<div class="buttons">
[[Show Results->Results]]
</div>
:: Close Risky
<div class="chat">
<div class="you">
Okay, you’ll get the device. Bye.
</div>
<div class="bot">
<b><<print $name>>:</b> Wait—so when is it coming? Are you following up?
</div>
</div>
<div class="buttons">
[[Show Results->Results]]
</div>
<div class="chat">
<div class="bot">Coaching: Avoid blame; start with empathy and ownership. Try acknowledging the delay and offering help.</div>
</div>
<div class="buttons">
[[Try again->Start]]
</div><div class="chat">
<div class="bot">Coaching: Collect details politely. Tone matters as much as content.</div>
</div>
<div class="buttons">
[[Rephrase and proceed->S2 Confirm]]
</div><div class="chat">
<div class="bot">Coaching: When emotions run high, acknowledge + offer options. “I hear your frustration. Let’s look at what we can do…”</div>
</div>
<div class="buttons">
[[Offer options->O1 Options]]
</div><div class="chat">
<div class="bot">Coaching: Align to the customer’s stated need (a working device now). Offer a <b>loaner tomorrow</b> plus the original on <<print $delivery>>.</div>
</div>
<div class="buttons">
[[Offer the combo->Combo Win]]
</div>:: Results
<<set _max = 8>>
<<set _pct = Math.round(($score / _max) * 100)>>
<div class="results-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap">
<div style="font-size:1.15rem;font-weight:800">
Your Score: <span class="score"><<print $score>> / <<print _max>></span>
<<if $score >= 7>><span class="pill good">Excellent</span>
<<elseif $score >= 5>><span class="pill ok">Solid</span>
<<else>><span class="pill bad">Needs Work</span><</if>>
</div>
<div style="font-size:.95rem;color:#475569">Completion: <<print _pct>>%</div>
</div>
<div class="meter"><span style="width: <<print _pct>>%"></span></div>
<<if $score >= 7>>
<p>🎯 <b>Great de-escalation and ownership.</b> You offered options aligned to the customer’s need and closed with a clear next step.</p>
<ul>
<li>Kept empathy up front</li>
<li>Presented options quickly</li>
<li>Strong summary + follow-up</li>
</ul>
<<elseif $score >= 5>>
<p>✅ <b>Solid work.</b> For next time: offer options sooner and make the final summary more explicit.</p>
<ul>
<li>Try moving from confirm → options faster</li>
<li>End with “plan, tracking, and follow-up” explicitly</li>
</ul>
<<else>>
<p>⚠️ <b>Missed key steps.</b> Aim for the path: <i>empathy → confirm → options → clear close</i>.</p>
<ul>
<li>Start with empathy + ownership</li>
<li>Collect details politely</li>
<li>Offer a loaner tomorrow + original by Friday</li>
<li>Close with summary, tracking, follow-up</li>
</ul>
<</if>>
</div>
<div class="buttons">
[[Replay the scenario->Start]]
</div>
:: StoryHeader
Score: <<print $score>> / 8
/* Chat bubbles */
/* Overall chat container */
.chat {
max-width: 720px;
margin: 0 auto;
font-family: system-ui, sans-serif;
font-size: 1em;
line-height: 1.4;
}
/* Individual bot message bubble */
.chat .bot {
background-color: #f5f5f5;
color: #111;
padding: 14px 18px;
border-radius: 10px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Reset styles inside .bot */
.chat .bot * {
margin: 6px 0;
line-height: 1.4;
}
.chat .bot ul {
padding-left: 18px;
}
.chat .bot br {
display: none;
}
/* Choice buttons – updated to dark theme */
.buttons a.link-internal {
display: inline-block;
background-color: #222;
color: #fff;
border: 1px solid #888;
padding: 10px 20px;
margin: 8px;
border-radius: 6px;
text-decoration: none;
transition: background 0.2s ease;
}
.buttons a.link-internal:hover {
background: #444;
color: #fff;
}
.buttons {
margin-top: 12px;
}
/* Floating score header */
#header {
position: fixed;
top: 10px;
right: 18px;
background: #222;
color: #fff;
padding: 6px 12px;
border-radius: 8px;
font-weight: 700;
z-index: 9999;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
/* High-contrast +1 badge */
.pt-note {
display: inline-block;
font-weight: 700;
color: #fff;
background: #0077cc;
padding: 6px 10px;
border-radius: 6px;
marg
<div style="padding: 30px; max-width: 720px; margin: 0 auto;">
<b>Welcome to Call Center Demo 2.</b><br><br>
This is an interactive simulation of a customer escalation call.<br><br>
🎯 <i>Your goal:</i>
<ul>
<li>De-escalate</li>
<li>Gather key info</li>
<li>Offer 1–2 options</li>
<li>Confirm next step</li>
</ul>
<br><center>[[Start the Simulation|Start]]</center>
</div>