<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Functional English for Global Teams — Module 2</title>
<link href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&f[]=cabinet-grotesk@500,700&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=cdI__95Zt0m5zLMHTEtyBRPR0B6G7rGmeWms5ptMrdGlReXYkQ_zdyjrdQmSIAP0HdJEgdbQaqATuQ_ShOuF-tt3YvMUTholSzgjS7qWo-mCOIF3uzoJvOXc0ZPOmQBjk_68dIdbRaaf09LcA9q6nD4qKnSqkAvp6lrMbceI3x3FiSEpRObIUPvcCX8Fkm2SOWekWclH0eABZAdKRwqxSh_NUQ07-DxeQ_TooStcoz5KZvReOK8GF7iofE4ojzxLMq0Ym0ntqKz2wbx7KeTCaAIHPjmUKIBb8QMdFg8j-8XgZA0FODZB93x-1Rvwzu5lErX09cJ99r8y0rKtnmOSU518xAZSHci0u54U0LRyC_rw_SgDtLELXV02fdujE8iPgdG65F-Uwj2eFS0KAMh2_XDCY83Ecj2VtHGyIaldGnjo2ykBNa4qoTKv8_jVP0Ymwyq0Fs84-aUxOxaD5p_wllrxUpQkwVBppt2YUczei2hkZ7swc22qsp8pUKaBuIGZwsRnoKqQNvtTc-VakqneqRZzU0qckmVnJYvHioxKZsX2oZyxp0tcUmB2jiDu_Z0MqZc1Vvh9--Q6pjnaYVzmwNGqqzWcf2EhYmWDLolwxjEvGaJ33IHrpdYI4f6Qj0QWu_FRaIKFY-0jhGKHP9uctmWFexqkgvJbQl1SRsbuR-nAtEgO-JLSqNCqUY6Nd02SykIr8P34d3s4n33O3eksRJaDZH6Q9z9UrSgOzmveh1j4Xhv8qrk6O7dupj14ooKRHnciC_SnlN5zkycCC74-FPsa-J-Q8siDf-H5VyISUuuQ-YTEK78n926BShLJ984L1x8s4MaTOVbT3V9V-OTh57_0ycNmszn_B-fHkFHO13L2szT-fG0fg2ZFeL6Fh3nqUhCPo0lSFDQtRLdomWCUPDXbahGbx5eu5fzyFxyJXqCeqVPewKSSIBh_wPEAfe2CXOqxqrU0mpkeWfkPbIZJQPt23Mt4Y8xFy5H1t9mWikrlowWRPaDHv3vHrlUww0j38TMMcmkgUiDS3NiYALVR5cCSyOwbRjYcCZFaoyfb0DRprEbGSX6R3BH_60K-OuORt5pueq85HU59JgX4YOPxWMYSxsDGMc_ZaGp2MTV-pwzVklGTr2viU0gSLAkk28JH5wVzNRV5opmc8K3DXsxFr7GG4OxRRdq1A6-KwmT7ZhiB66KcjFaWEE1CJq-_KKwWbEWPOEED-fZdMOZuHy6Sf3DnICN_RBtFeFElhom4j2xPpAT0GUojQFod2-wzk9IQdha3_WCB7SgPdulKl7pRRtsGCbFAHGNavZBR5nYNJzhu2p7DEE9nVDjsQWeZmN6aCh7BY0D5lxZoaEFYX-tMEMzbC2FprQyXe5glMfrGrnnBxQztVEge5PPOOoFh7WZP7hzSBCk8LVCBTGwY5ekMozkmfLb-Y-FgrvXv7i_G6XgOc8AicZ2yWk-pgjxAXU7H628yX-TDIhddTHm7z9wz40LKvdIYXVLmccVRMVvnytTzMG2xTpA81B0Q9osGbcfkMYRFyrqtcAua8ARcwgX1mKyW9n8uZ4tsN9XATMknLD0L1JT1ba-fouihe6MlbZEEvbTOh5IxkV9P92eGaauj8xAcpaCiUwg5F-e6-oKA7RWljQNHE1bVah0jRs4K8XrvvDVJUb66QeMMkrJF4hCUdwo_wIA1zWYzQK0IlhZ2uAE6kqQOvbW-ffXwy9BUUBHLUyOd_-lJpn--0mGwIrnEMQl6tfJNvnddpJ_GrLRiJuOdQ1bAB584-Kez6o5s9Ck-fDRXYVPba2RwYXBILMJVkSIFzD4p85lRy1pGhcDQHCgz3Zc-GYtKn-oXcgpTYGa-k6vCstJ7FQctzxY0YZVAc35aS_dttmCmZ6_qRaUupCURJ5_pPK5tTOKPS-R6hJNyIGMpWbzAEGGcRjwm5wtBh03o_m9jSo5cgmNoZFr4y4QUC2ZayVjomP-yndKWp8NxtEp6Fnpqq7Dhj_mgP_v229yRXIrz79JY4JAQ9G6X8Yo99wf0YFuwc-uDdaYtVFqDmk_B1uQFV8cqN7q4uCledYqqjqZCduYFNbq4hAdUODuZIEb9KEilbGmmKYqAZqLNYBRB3djlkT0xtNX3aBpYdWRuf4Jv_U6_nTrknSLYSJ0Ft0TC2O7TmTulVhucTM1gXMGfWRz7oCNkffCU8MNNosef1rpriWmV9QqyS-eUru_zlnFJbpMU4XeVxprR76Q3An1NG6Pbu71PBzcN_vkBhw" charset="UTF-8"></script><style>
:root, [data-theme="light"] {
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
--space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
--space-12: 3rem; --space-16: 4rem;
--color-bg: #f7f6f2; --color-surface: #f9f8f5; --color-surface-2: #fbfbf9;
--color-surface-offset: #edeae5; --color-border: #d4d1ca; --color-divider: #dcd9d5;
--color-text: #28251d; --color-text-muted: #66645f; --color-text-faint: #989791;
--color-text-inverse: #f9f8f4; --color-primary: #01696f; --color-primary-hover: #0c4e54;
--color-success: #437a22; --color-warning: #964219; --color-error: #a12c7b;
--radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.25rem; --radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(30, 27, 22, 0.08); --shadow-md: 0 10px 30px rgba(30, 27, 22, 0.10);
--font-body: 'Satoshi', 'Inter', sans-serif; --font-display: 'Cabinet Grotesk', 'Inter', sans-serif;
}
[data-theme="dark"] {
--color-bg: #171614; --color-surface: #1c1b19; --color-surface-2: #201f1d;
--color-surface-offset: #262421; --color-border: #393836; --color-divider: #2a2927;
--color-text: #ece9e2; --color-text-muted: #beb8ad; --color-text-faint: #8b877e;
--color-text-inverse: #1c1b19; --color-primary: #4f98a3; --color-primary-hover: #6db5bf;
--color-success: #89bd62; --color-warning: #d08757; --color-error: #d978b2;
--shadow-sm: 0 1px 2px rgba(0,0,0,.24); --shadow-md: 0 16px 36px rgba(0,0,0,.34);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth}
body{margin:0;min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;background:radial-gradient(circle at top right, rgba(1,105,111,.08), transparent 20%), var(--color-bg);color:var(--color-text)}
button,input{font:inherit}
.app{max-width:1100px;margin:0 auto;padding:var(--space-4)}
.skip-link{position:absolute;left:-999px;top:0}.skip-link:focus{left:var(--space-4);top:var(--space-4);background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);z-index:10}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)}
.brand{display:flex;align-items:center;gap:var(--space-3)}
.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--color-primary),color-mix(in srgb, var(--color-primary) 65%, white));display:grid;place-items:center;color:var(--color-text-inverse);box-shadow:var(--shadow-sm)}
.brand h1{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.1;margin:0}
.brand p{margin:0;color:var(--color-text-muted);font-size:var(--text-sm)}
.controls{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.pill{background:var(--color-surface);border:1px solid var(--color-border);padding:0.65rem 0.9rem;border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--color-text-muted)}
.theme-toggle,.nav-btn,.choice-btn,.action-btn,.copy-btn{border:none;border-radius:var(--radius-full);cursor:pointer;transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease}
.theme-toggle{width:46px;height:46px;display:grid;place-items:center;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text)}
.layout{display:grid;grid-template-columns:320px 1fr;gap:var(--space-6)}
.sidebar,.stage{background:color-mix(in srgb, var(--color-surface) 92%, transparent);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.sidebar{padding:var(--space-5);position:sticky;top:var(--space-4);height:fit-content}
.stage{padding:clamp(1.25rem,2vw,2rem);min-height:640px;display:flex;flex-direction:column;justify-content:space-between}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);padding:0.4rem 0.7rem;border-radius:var(--radius-full);background:color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));color:var(--color-primary);font-size:var(--text-sm);font-weight:700;letter-spacing:.02em}
.screen-title{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.02;margin:var(--space-4) 0 var(--space-3)}
.screen-subtitle{color:var(--color-text-muted);max-width:62ch;margin-bottom:var(--space-6)}
.message-card,.tip-card,.exercise-card,.feedback-card,.check-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:calc(var(--radius-lg) - 0.25rem);padding:var(--space-5)}
.meeting-quote{background:var(--color-surface-offset);border:1px dashed color-mix(in srgb, var(--color-primary) 30%, var(--color-border));padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--text-lg);max-width:42ch}
.status-tag{display:inline-flex;margin-top:var(--space-4);padding:0.45rem 0.75rem;border-radius:var(--radius-full);background:color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));color:var(--color-warning);font-weight:700;font-size:var(--text-sm)}
.points{display:grid;gap:var(--space-3);margin:var(--space-4) 0 0;padding:0;list-style:none}
.points li{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--color-surface);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border)}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.principle{padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border)}
.principle h3{margin:0 0 .35rem;font-size:var(--text-base)}
.principle p{margin:0;color:var(--color-text-muted);font-size:var(--text-sm)}
.phrase-bank,.choice-grid{display:grid;gap:var(--space-3)}
.phrase,.blank-box{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.copy-btn{padding:0.55rem 0.8rem;border:1px solid var(--color-border);background:transparent;color:var(--color-text)}
.action-row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-4)}
.action-btn,.nav-btn{padding:0.9rem 1.1rem;background:var(--color-primary);color:var(--color-text-inverse);font-weight:700}
.ghost{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}
.choice-btn{width:100%;text-align:left;padding:var(--space-4);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-md)}
.choice-btn.correct{border-color:color-mix(in srgb, var(--color-success) 45%, var(--color-border));background:color-mix(in srgb, var(--color-success) 12%, var(--color-surface))}
.choice-btn.incorrect{border-color:color-mix(in srgb, var(--color-error) 45%, var(--color-border));background:color-mix(in srgb, var(--color-error) 10%, var(--color-surface))}
.feedback{margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);display:none}
.feedback.show{display:block}
.feedback.success{background:color-mix(in srgb, var(--color-success) 11%, var(--color-surface));border:1px solid color-mix(in srgb, var(--color-success) 35%, var(--color-border))}
.feedback.error{background:color-mix(in srgb, var(--color-error) 10%, var(--color-surface));border:1px solid color-mix(in srgb, var(--color-error) 35%, var(--color-border))}
.footer-nav{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--color-divider)}
.progress{height:10px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden;margin:var(--space-4) 0 var(--space-6)}
.progress-bar{height:100%;width:14%;background:linear-gradient(90deg,var(--color-primary), color-mix(in srgb, var(--color-primary) 50%, white));border-radius:var(--radius-full);transition:width .24s ease}
.nav-list{display:grid;gap:var(--space-2);padding:0;list-style:none}
.nav-item button{width:100%;text-align:left;padding:0.85rem 0.95rem;border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--color-text)}
.nav-item button.active{background:color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));border-color:color-mix(in srgb, var(--color-primary) 30%, var(--color-border));font-weight:700}
.meta{display:flex;justify-content:space-between;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}
.score{margin-top:var(--space-6);padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border)}
input[type="text"]{width:min(280px,100%);padding:0.9rem 1rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text)}
@media (max-width: 900px){.layout{grid-template-columns:1fr}.sidebar{position:relative;top:auto}.stage{min-height:auto}.principles{grid-template-columns:1fr}}
@media (max-width: 640px){.topbar,.footer-nav,.blank-box{flex-direction:column;align-items:stretch}.controls{justify-content:space-between}.screen-title{font-size:clamp(1.8rem,6vw,2.6rem)}.app{padding:var(--space-3)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<div class="app">
<header class="topbar">
<div class="brand">
<div class="logo" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 7H17" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
<path d="M7 12H13" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
<path d="M7 17H11" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
<path d="M16 15.5C17.4 15.5 18.5 14.4 18.5 13C18.5 11.6 17.4 10.5 16 10.5C14.6 10.5 13.5 11.6 13.5 13C13.5 14.4 14.6 15.5 16 15.5Z" fill="currentColor"/>
</svg>
</div>
<div>
<p>Functional English for Global Teams</p>
<h1>Module 2: Asking for Clarification</h1>
</div>
</div>
<div class="controls">
<div class="pill">5–7 min microlearning</div>
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Switch color theme">☾</button>
</div>
</header>
<div class="layout">
<aside class="sidebar" aria-label="Module navigation">
<div class="meta"><span>Progress</span><span id="progressText">1 / 7</span></div>
<div class="progress" aria-hidden="true"><div class="progress-bar" id="progressBar"></div></div>
<ol class="nav-list" id="navList"></ol>
<div class="score" id="scoreCard">
<strong>Practice score</strong>
<p id="scoreText">Complete the quiz and blank check to see your score.</p>
</div>
</aside>
<main class="stage" id="main" tabindex="-1">
<section id="screenContent" aria-live="polite"></section>
<div class="footer-nav">
<button class="nav-btn ghost" id="prevBtn" type="button">Previous</button>
<button class="nav-btn" id="nextBtn" type="button">Next</button>
</div>
</main>
</div>
</div>
<script>
const screens = [
{
title: 'You hear the words, but not the meaning.',
eyebrow: 'Screen 1 · Hook',
subtitle: 'In global meetings, unclear jargon can make even confident professionals stay quiet.',
render: () => `
<div class="message-card">
<div class="meeting-quote">“Let’s finalize the revised structure with aligned dependencies.”</div>
<div class="status-tag">You do not understand — but you stay silent.</div>
</div>
<ul class="points">
<li><span>🎙️</span><div><strong>Real meeting pressure</strong><span>Fast discussion, complex words, and different accents can make this happen to anyone.</span></div></li>
</ul>`
},
{
title: 'Silence creates bigger problems later',
eyebrow: 'Screen 2 · Problem',
subtitle: 'Not asking can feel safer in the moment, but it often creates mistakes and stress.',
render: () => `
<div class="tip-card">
<ul class="points">
<li><span>🌀</span><div><strong>You feel confused</strong><span>You leave the meeting unsure about what was decided.</span></div></li>
<li><span>⚠️</span><div><strong>Work may be incorrect</strong><span>If the task is unclear, the output may not match expectations.</span></div></li>
<li><span>📉</span><div><strong>You lose confidence</strong><span>Silence can make future meetings feel harder.</span></div></li>
</ul>
</div>`
},
{
title: 'Use a simple clarification question',
eyebrow: 'Screen 3 · Better Approach',
subtitle: 'A short, direct question is professional and helps everyone stay aligned.',
render: () => `
<div class="check-card">
<div class="meeting-quote">“Could you explain that again, please?”</div>
</div>
<ul class="points">
<li><span>✅</span><div><strong>Direct</strong><span>The speaker knows you need one more explanation.</span></div></li>
<li><span>🤝</span><div><strong>Polite</strong><span>The phrase stays respectful without sounding weak.</span></div></li>
</ul>`
},
{
title: 'Clarifying is a professional skill',
eyebrow: 'Screen 4 · Key Principle',
subtitle: 'Good questions show focus, accountability, and attention to detail.',
render: () => `
<div class="feedback-card"><strong>Core idea:</strong> Clarifying is professional — not a weakness.</div>
<div class="principles" style="margin-top:1rem">
<div class="principle"><h3>Short</h3><p>Ask one clear question instead of a long explanation.</p></div>
<div class="principle"><h3>Polite</h3><p>Use calm, respectful language like “could you” or “just to confirm.”</p></div>
<div class="principle"><h3>Specific</h3><p>Name the exact point you want clarified.</p></div>
</div>`
},
{
title: 'Use these phrases in meetings',
eyebrow: 'Screen 5 · Phrase Bank',
subtitle: 'These lines help you ask for repetition, examples, or confirmation without sounding unprepared.',
render: () => {
const phrases = [
'Could you please explain that again?',
'Do you mean this section or the full document?',
'Just to confirm, the deadline is Friday, right?',
'Can you give an example?',
'What should I focus on first?'
];
return `<div class="phrase-bank">${phrases.map(p => `<div class="phrase"><span>${p}</span><button class="copy-btn" type="button" data-copy="${p.replaceAll('"','"')}">Copy</button></div>`).join('')}</div>`;
}
},
{
title: 'Pick the best response',
eyebrow: 'Screen 6 · Try It',
subtitle: 'Choose the answer that is clear, professional, and specific.',
render: () => `
<div class="exercise-card">
<div class="choice-grid">
<button class="choice-btn" type="button" data-choice="A"><strong>A.</strong> Stay silent</button>
<button class="choice-btn" type="button" data-choice="B"><strong>B.</strong> I don’t understand anything.</button>
<button class="choice-btn" type="button" data-choice="C"><strong>C.</strong> Could you clarify what you mean by dependencies?</button>
</div>
<div class="feedback" id="quizFeedback"></div>
</div>`
},
{
title: 'Complete the confirmation question',
eyebrow: 'Screen 7 · Check',
subtitle: 'Fill in the missing word to complete the professional confirmation phrase.',
render: () => `
<div class="exercise-card">
<div class="blank-box">
<label for="blankInput"><strong>Just to confirm, we are submitting this on _?</strong></label>
<input id="blankInput" type="text" placeholder="Type one word or phrase" autocomplete="off" />
</div>
<div class="action-row">
<button class="action-btn" type="button" id="checkBlankBtn">Check answer</button>
<button class="action-btn ghost" type="button" id="showBlankBtn">Show answer</button>
</div>
<div class="feedback" id="blankFeedback"></div>
</div>`
}
];
let current = 0;
let quizCorrect = false;
let blankCorrect = false;
const screenContent = document.getElementById('screenContent');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const navList = document.getElementById('navList');
const scoreText = document.getElementById('scoreText');
function updateScore() {
let score = 0;
if (quizCorrect) score += 1;
if (blankCorrect) score += 1;
scoreText.textContent = score === 0 ? 'Complete the quiz and blank check to see your score.' : `You completed ${score} of 2 practice checks.`;
}
function buildNav() {
navList.innerHTML = screens.map((screen, index) => `
<li class="nav-item"><button type="button" data-index="${index}" class="${index === current ? 'active' : ''}">${screen.eyebrow.replace(' · ', ' — ')}</button></li>
`).join('');
navList.querySelectorAll('button').forEach(btn => btn.addEventListener('click', () => {
current = Number(btn.dataset.index);
renderScreen();
}));
}
function renderScreen() {
const screen = screens[current];
screenContent.innerHTML = `
<div>
<span class="eyebrow">${screen.eyebrow}</span>
<h2 class="screen-title">${screen.title}</h2>
<p class="screen-subtitle">${screen.subtitle}</p>
${screen.render()}
</div>`;
progressText.textContent = `${current + 1} / ${screens.length}`;
progressBar.style.width = `${((current + 1) / screens.length) * 100}%`;
prevBtn.disabled = current === 0;
prevBtn.style.opacity = current === 0 ? '.5' : '1';
nextBtn.textContent = current === screens.length - 1 ? 'Restart module' : 'Next';
buildNav();
bindDynamic();
}
function bindDynamic() {
document.querySelectorAll('[data-copy]').forEach(btn => {
btn.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(btn.dataset.copy);
btn.textContent = 'Copied';
setTimeout(() => btn.textContent = 'Copy', 1200);
} catch {
btn.textContent = 'Select text';
}
});
});
const choiceButtons = document.querySelectorAll('.choice-btn');
const quizFeedback = document.getElementById('quizFeedback');
if (choiceButtons.length && quizFeedback) {
choiceButtons.forEach(btn => {
btn.addEventListener('click', () => {
choiceButtons.forEach(b => b.classList.remove('correct', 'incorrect'));
const choice = btn.dataset.choice;
if (choice === 'C') {
btn.classList.add('correct');
quizFeedback.className = 'feedback show success';
quizFeedback.innerHTML = '<strong>Correct.</strong> C is best because it is polite, direct, and specific.';
quizCorrect = true;
} else {
btn.classList.add('incorrect');
quizFeedback.className = 'feedback show error';
quizFeedback.innerHTML = choice === 'A'
? '<strong>Not quite.</strong> Staying silent keeps the confusion in place.'
: '<strong>Not quite.</strong> This response is too negative and not specific enough.';
quizCorrect = false;
}
updateScore();
});
});
}
const checkBlankBtn = document.getElementById('checkBlankBtn');
const showBlankBtn = document.getElementById('showBlankBtn');
const blankInput = document.getElementById('blankInput');
const blankFeedback = document.getElementById('blankFeedback');
if (checkBlankBtn && blankInput && blankFeedback) {
checkBlankBtn.addEventListener('click', () => {
const answer = blankInput.value.trim().toLowerCase();
const accepted = ['friday', 'friday?', 'on friday'];
if (accepted.includes(answer)) {
blankCorrect = true;
blankFeedback.className = 'feedback show success';
blankFeedback.innerHTML = '<strong>Correct.</strong> “Friday” completes the confirmation question clearly.';
} else if (!answer) {
blankCorrect = false;
blankFeedback.className = 'feedback show error';
blankFeedback.innerHTML = '<strong>Try again.</strong> Add the day you are confirming.';
} else {
blankCorrect = false;
blankFeedback.className = 'feedback show error';
blankFeedback.innerHTML = '<strong>Almost.</strong> A clear answer here is “Friday.”';
}
updateScore();
});
}
if (showBlankBtn && blankInput && blankFeedback) {
showBlankBtn.addEventListener('click', () => {
blankInput.value = 'Friday';
blankFeedback.className = 'feedback show success';
blankFeedback.innerHTML = '<strong>Sample answer:</strong> Just to confirm, we are submitting this on Friday?';
});
}
}
prevBtn.addEventListener('click', () => {
if (current > 0) current -= 1;
renderScreen();
});
nextBtn.addEventListener('click', () => {
if (current < screens.length - 1) current += 1; else current = 0;
renderScreen();
});
const themeToggle = document.querySelector('[data-theme-toggle]');
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
themeToggle.textContent = theme === 'dark' ? '☀' : '☾';
themeToggle.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
}
setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
themeToggle.addEventListener('click', () => setTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'));
renderScreen();
updateScore();
</script>
</body>
</html>