JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<<set $slack to false>> <<script>> UIBar.hide(); <</script>> <<EventMessenger "showMenu" true true>> /* passage content */ <<set $endingImage to "/img/e-burn.png">> <div class="bg bg--red"></div> <div class="abs-wrapper abs-wrapper--ending"> <svg class="logo logo--ending logo--red" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="blink" class="flash" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "🔥🔥 YOU BURNED OUT 🔥🔥">> <div class="ending"> <img class="ending__img" src="img/e-burn.jpg"/> <div class="ending__text"> <h1 class="ending__title">You Burned Out</h1> <p class="ending__desc">You woke up from a recurring work nightmare and thought, “Why am I still in this rat race?” Time to set your Slack status to Away… permanently. (Or for six months, when your bank account forces you to start working again.) </p> </div> </div> <div class="btn-area btn-area--ending"> <div class="button button--top"> <<link "Play Again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> </div> <<audio "over" volume 0.5 play>>
<<set $slack to false>> <<script>> UIBar.hide(); <</script>> <<EventMessenger "menuColor" true>> <<set $endingImage to "/img/e-canned.png">> <div class="bg bg--red"></div> <div class=" abs-wrapper abs-wrapper--ending"> <svg class="logo logo--ending logo--red" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="blink" class="flash" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "🗑️🗑️ YOU GOT CANNED 🗑️🗑️">> <div class="ending"> <img class="ending__img" src="img/e-canned.jpg"/> <div class="ending__text"> <h1 class="ending__title">$user,You Got Canned</h1> <p class="ending__desc">Officially, your position was made redundant in a restructuring designed to right-size the organization. Unofficially, you were the most expensive one on your team. ("I’m still big. It’s the budgets that got small!”)</p> </div> </div> <div class="btn-area btn-area--ending"> <div class="button button--top"> <<link "Play Again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> </div> </div> <<audio "over" volume 0.5 play>>
<<set $quarter to 4>> <<set $time to 1>> <<set $energy to 5>> <<set $approval to 5>> <<set $workStyle to -4>> <<set $orientation to 4>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-cold.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">You're Fuckin' Cold</h1> <p class="scenario__desc">The building is heated like a Victorian prison. Your besuited colleagues don’t seem to notice.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your “Right to Heat!” email goes ignored by most people, who assume it’s some kind of charity.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.hide(); <</script>> <<EventMessenger "showMenu" true true>> /* passage content */ <<set $endingImage to "/img/e-friends_share.png">> <<set $endingLabel to "fri">> <div id="transition" class="bg bg--animation"> <p class="bg__text"><img class="evaluate" src="img/evaluate.png"/><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></p> </div> <div class="bg bg--purple"></div> <div class=" abs-wrapper abs-wrapper--ending"> <svg class="logo logo--ending logo--purple" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="flash" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "👏👏 NOT HERE TO MAKE FRIENDS 👏👏">> <div class="ending"> <div class="img-box"> <img class="img-box__img" src="img/e-friends.jpg"/> <img class="img-box__img img-box__img--hover" @src="$endingImage"/> </div> <div class="ending__text"> <h1 class="ending__title">$user,You’re Not Here to Make Friends</h1> <p class="ending__desc">You’re efficient, strategic, and you’ve kept distractions at bay. You’d prefer coworkers not bother you, but if they must, they need to make it actionable. Don’t expect an invite to happy hour.</p> <div class="ending__replay"> 🕹️ <<link "Play again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> <<SharingModule>> </div> </div> </div> <<timed 1.5s>> <<audio "tada" volume 0.25 play>> <</timed>>
<<script>> UIBar.hide(); <</script>> <<EventMessenger "showMenu" true true>> /* passage content */ <<set $endingImage to "/img/e-boss_share.png">> <<set $endingLabel to "bos">> <div id="transition" class="bg bg--animation"> <p class="bg__text"><img class="evaluate" src="img/evaluate.png"/><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></p> </div> <div class="bg bg--purple"></div> <div class=" abs-wrapper abs-wrapper--ending"> <svg class="logo logo--ending logo--purple" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="flash" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "🤝🧳 YOU MANAGE LIKE A BOSS 🤝🧳">> <div class="ending"> <div class="img-box"> <img class="img-box__img" src="img/e-boss.jpg"/> <img class="img-box__img img-box__img--hover" @src="$endingImage"/> </div> <div class="ending__text"> <h1 class="ending__title">$user,You Manage Like a Boss</h1> <p class="ending__desc">You have an innate ability to inspire your colleagues and herd them toward a common goal. Leadership looks good on you, and people follow your directions without question. Have you considered starting a cult?</p> <div class="ending__replay"> 🕹️ <<link "Play again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> <<SharingModule>> </div> </div> </div> <<timed 1.5s>> <<audio "tada" volume 0.25 play>> <</timed>>
<<script>> UIBar.hide(); <</script>> <<EventMessenger "showMenu" true true>> /* passage content */ <<set $endingImage to "/img/e-beloved_share.png">> <<set $endingLabel to "bel">> <div id="transition" class="bg bg--animation"> <p class="bg__text"><img class="evaluate" src="img/evaluate.png"/><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></p> </div> <div class="bg bg--blue"></div> <div class=" abs-wrapper abs-wrapper--ending"> <svg class="logo logo--ending logo--blue" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="flash" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "💗💗 YOU ARE BELOVED 💗💗">> <div class="ending"> <div class="img-box"> <img class="img-box__img" src="img/e-beloved.jpg"/> <img class="img-box__img img-box__img--hover" @src="$endingImage"/> </div> <div class="ending__text"> <h1 class="ending__title">$user,You're a Beloved Office Presence</h1> <p class="ending__desc">People love working with you, and they trust that you’ve got their back. Just be prepared for a calendar filled with gratuitous coffee chats and one-on-ones.</p> <div class="ending__replay"> 🕹️ <<link "Play again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> <<SharingModule>> </div> </div> </div> <<timed 1.5s>> <<audio "tada" volume 0.25 play>> <</timed>>
<<script>> UIBar.hide(); <</script>> <<EventMessenger "showMenu" true true>> /* passage content */ <<set $endingImage to "/img/e-out_share.png">> <<set $endingLabel to "out">> <div id="transition" class="bg bg--animation"> <p class="bg__text"><img class="evaluate" src="img/evaluate.png"/><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></p> </div> <div class="bg bg--blue"></div> <div class=" abs-wrapper abs-wrapper--ending"> <svg class="logo logo--ending logo--blue" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="flash" class="fill" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "🏃💨 YOU WERE JUST HEADING OUT 🏃💨">> <div class="ending"> <div class="img-box"> <img class="img-box__img" src="img/e-out.jpg"/> <img class="img-box__img img-box__img--hover" @src="$endingImage"/> </div> <div class="ending__text"> <h1 class="ending__title">$user,You Were Just Heading Out</h1> <p class="ending__desc">Oh, a last-minute Zoom meeting? Sorry, you’ll have to circle back. Some call it a healthy work-life balance, you call it self-preservation.</p> <div class="ending__replay"> 🕹️ <<link "Play again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> <<SharingModule>> </div> </div> </div> <<timed 1.5s>> <<audio "tada" volume 0.25 play>> <</timed>>
<<script>> UIBar.hide(); <</script>> <<EventMessenger "showMenu" true true>> /* passage content */ <<set $endingImage to "/img/e-violence_share.png">> <<set $endingLabel to "vio">> <div id="transition" class="bg bg--animation"> <p class="bg__text"><img class="evaluate" src="img/evaluate.png"/><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></p> </div> <div class="bg bg--red"></div> <div class=" abs-wrapper abs-wrapper--ending"> <svg class="logo logo--ending logo--red" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="flash" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "🔪🔪 YOU CHOSE VIOLENCE 🔪🔪">> <div class="ending"> <div class="img-box"> <img class="img-box__img" src="img/e-violence.jpg"/> <img class="img-box__img img-box__img--hover" @src="$endingImage"/> </div> <div class="ending__text"> <h1 class="ending__title">$user,You Chose Violence</h1> <p class="ending__desc">For you to win, someone else has to lose. And so what if you stab your teammate in the back? There are no teams on The Corporate Trail.</p> <div class="ending__replay"> 🕹️ <<link "Play again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> <<SharingModule>> </div> </div> </div> <<timed 1.5s>> <<audio "tada" volume 0.25 play>> <</timed>>
<<script>> UIBar.hide(); <</script>> <<EventMessenger "showMenu" true true>> /* passage content */ <<set $endingImage to "/img/e-profit_share.png">> <<set $endingLabel to "pro">> <div id="transition" class="bg bg--animation"> <p class="bg__text"><img class="evaluate" src="img/evaluate.png"/><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></p> </div> <div class="bg bg--blue"></div> <div class=" abs-wrapper abs-wrapper--ending"> <svg class="logo logo--ending logo--blue" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="flash" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "💸🩸 YOU BLEED FOR PROFIT 💸🩸">> <div class="ending"> <div class="img-box"> <img class="img-box__img" src="img/e-profit.jpg"/> <img class="img-box__img img-box__img--hover" @src="$endingImage"/> </div> <div class="ending__text"> <h1 class="ending__title">$user,You Bleed for Incremental Profit</h1> <p class="ending__desc">Your work ethic is unmatched, but at what cost? You’ve hit revenue targets by missing weekends fueled by triple-shot espressos and gas station No-Doze. The job won’t be done until value is returned to shareholders.</p> <div class="ending__replay"> 🕹️ <<link "Play again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> <<SharingModule>> </div> </div> </div> <<timed 1.5s>> <<audio "tada" volume 0.25 play>> <</timed>>
<<script>> UIBar.hide(); <</script>> <<EventMessenger "showMenu" true true>> /* passage content */ <<set $endingImage to "/img/e-fire_share.png">> <<set $endingLabel to "gre">> <div id="transition" class="bg bg--animation"> <p class="bg__text"><img class="evaluate" src="img/evaluate.png"/><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></p> </div> <div class="bg bg--purple"></div> <div class=" abs-wrapper abs-wrapper--ending"> <svg class="logo logo--ending logo--purple" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="flash" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "🧯🔥 YOU ARE THE RESIDENT FIREFIGHTER 🧯🔥">> <div class="ending"> <div class="img-box"> <img class="img-box__img" src="img/e-fire.jpg"/> <img class="img-box__img img-box__img--hover" @src="$endingImage"/> </div> <div class="ending__text"> <h1 class="ending__title">$user,You Are the Resident Firefighter</h1> <p class="ending__desc">You solve all sorts of problems — even the ones you have nothing to do with. People appreciate your dependability, but after fighting so many dumpster fires, you’re at risk of burning out.</p> <div class="ending__replay"> 🕹️ <<link "Play again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> <<SharingModule>> </div> </div> </div> <<timed 1.5s>> <<audio "tada" volume 0.25 play>> <</timed>>
<<script>> UIBar.hide(); <</script>> <<EventMessenger "showMenu" true true>> /* passage content */ <<set $endingImage to "/img/e-thrones_share.png">> <<set $endingLabel to "got">> <div id="transition" class="bg bg--animation"> <p class="bg__text"><img class="evaluate" src="img/evaluate.png"/><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></p> </div> <div class="bg bg--red"></div> <div class=" abs-wrapper abs-wrapper--ending"> <svg class="logo logo--ending logo--red" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="flash" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "👑👑 YOU GAME OF THRONES'D IT 👑👑">> <div class="ending"> <div class="img-box"> <img class="img-box__img" src="img/e-thrones.jpg"/> <img class="img-box__img img-box__img--hover" @src="$endingImage"/> </div> <div class="ending__text"> <h1 class="ending__title">$user,You Game-of-Thrones'd It</h1> <p class="ending__desc">Your feel for office politics is frighteningly sharp — you’ve outmaneuvered everyone and survived all power plays. After your stint in the C-Suite, you should consider running for Congress.</p> <div class="ending__replay"> 🕹️ <<link "Play again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> <<SharingModule>> </div> </div> </div> <<timed 1.5s>> <<audio "tada" volume 0.25 play>> <</timed>>
<<set $slack to false>> <<script>> UIBar.hide(); <</script>> <<EventMessenger "showMenu" true true>> /* passage content */ <<set $endingImage to "/img/e-quit_share.png">> <<set $endingLabel to "qui">> <div class="bg bg--teal"></div> <div class=" abs-wrapper abs-wrapper--ending"> <svg id="gameover" class="logo logo--ending logo--teal" width="861" height="86" viewBox="0 0 861 86" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="blink" class="flash" d="M24.25 85.2329V73.1079H12.125V60.9829H0V24.6079H12.125V12.4829H24.25V0.35791H84.875V12.4829H36.375V24.6079H24.25V60.9829H36.375V73.1079H60.625V48.8579H48.5V36.7329H84.875V85.2329H24.25ZM97 85.2329V24.6079H109.125V12.4829H121.25V0.35791H157.625V12.4829H169.75V24.6079H181.875V85.2329H157.625V60.9829H121.25V85.2329H97ZM121.25 48.8579H157.625V24.6079H145.5V12.4829H133.375V24.6079H121.25V48.8579ZM194 85.2329V0.35791H218.25V12.4829H230.375V24.6079H242.5V12.4829H254.625V0.35791H278.875V85.2329H254.625V36.7329H242.5V60.9829H230.375V36.7329H218.25V85.2329H194ZM291 85.2329V0.35791H375.875V12.4829H315.25V36.7329H363.75V48.8579H315.25V73.1079H375.875V85.2329H291ZM497.125 85.2329V73.1079H485V12.4829H497.125V0.35791H557.75V12.4829H569.875V73.1079H557.75V85.2329H497.125ZM509.25 73.1079H545.625V12.4829H509.25V73.1079ZM618.375 85.2329V73.1079H606.25V60.9829H594.125V48.8579H582V0.35791H606.25V36.7329H618.375V48.8579H630.5V36.7329H642.625V0.35791H666.875V48.8579H654.75V60.9829H642.625V73.1079H630.5V85.2329H618.375ZM679 85.2329V0.35791H763.875V12.4829H703.25V36.7329H751.75V48.8579H703.25V73.1079H763.875V85.2329H679ZM776 85.2329V0.35791H848.75V12.4829H860.875V48.8579H836.625V60.9829H848.75V73.1079H860.875V85.2329H824.5V73.1079H812.375V60.9829H800.25V85.2329H776ZM800.25 48.8579H824.5V36.7329H836.625V12.4829H800.25V48.8579Z" fill="#FBC307"/> </svg> <div class="rel-wrapper"> <div class="content content--ending"> <<TitleBar "🦎🦎 YOU QUIT 🦎🦎">> <div class="ending"> <div class="img-box"> <img class="img-box__img" src="img/e-quit.jpg"/> <img class="img-box__img img-box__img--hover" @src="$endingImage"/> </div> <div class="ending__text"> <h1 class="ending__title">$user,You Quit</h1> <p class="ending__desc">Spend the best years of your life “circling back” over stale office coffee? No thanks. Time to pack it up, blow it up, and move to Costa Rica. </p> <div class="ending__replay"> 🕹️ <<link "Play again?">> <<script>> Engine.restart(); <</script>> <</link>> </div> </div> </div> <<SharingModule>> </div> </div> </div> <<audio "tada" volume 0.25 play>>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } }); <</script>> <<set $remaining to 3>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q1-glass.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Glass Cliff</h1> <p class="scenario__desc">You’re offered a highly visible role leading a struggling division with minimal support.</p> </div> </div> <<ChoiceModule "F it, we ball" "Your plate is full" "s|Volunteer your rival|Deteriorate|Turn around" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-2" "1" "1" "1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-glass.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Glass Cliff</h1> <p class="scenario__desc">You’re offered a highly visible role leading a struggling division with minimal support.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Who cares if you’re being set up to fail? You’re not going to let that happen. Get in, loser, we’re going on the cover of Forbes.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "-1" "1" "1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-glass.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Glass Cliff</h1> <p class="scenario__desc">You’re offered a highly visible role leading a struggling division with minimal support.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You turn it down. Your blood pressure thanks you, but you’ll have to find another way to stand out. </p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "0" "-1" "1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-glass.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Glass Cliff</h1> <p class="scenario__desc">You’re offered a highly visible role leading a struggling division with minimal support.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Predictably, the situation deteriorates and your rival takes the blame.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "0" "-1" "1">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-glass.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Glass Cliff</h1> <p class="scenario__desc">You’re offered a highly visible role leading a struggling division with minimal support.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">They manage to turn things around, and people start calling them the “turn-around artist.” Ugh.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> <<set $remaining to 3>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q1-wfh.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">RTOh No</h1> <p class="scenario__desc">The exec committee is pushing for five days in-office. It spells disaster for laundry piles everywhere. </p> </div> </div> <<ChoiceModule "h|Support the new policy|Leggings|Impromptu" "s|Fight for your teams|Productivity|Agitator" "Ask for an exception" >> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "-1" "0" "1" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-wfh.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">RTOh No</h1> <p class="scenario__desc">The exec committee is pushing for five days in-office. It spells disaster for laundry piles everywhere.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Sure, you’ll miss working in your leggings, but if leadership doesn’t model this, who will?</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "-1" "-1" "1" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-wfh.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">RTOh No</h1> <p class="scenario__desc">The exec committee is pushing for five days in-office. It spells disaster for laundry piles everywhere.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your unfettered zeal for “impromptu collaboration” is starting to freak some people out.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "-1" "2" "-1" "-1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-wfh.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">RTOh No</h1> <p class="scenario__desc">The exec committee is pushing for five days in-office. It spells disaster for laundry piles everywhere.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You argue that productivity hasn’t dipped and push for WFH Fridays. The execs agree. The people cheer.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "-1" "-2" "-1" "-1">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-wfh.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">RTOh No</h1> <p class="scenario__desc">The exec committee is pushing for five days in-office. It spells disaster for laundry piles everywhere.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">The exec. committee holds firm and brands you an agitator.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "2" "-2" "-1" "1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-wfh.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">RTOh No</h1> <p class="scenario__desc">The exec committee is pushing for five days in-office. It spells disaster for laundry piles everywhere.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You secure your exemption, but whispers start circulating among your team that you’re “too important” to follow the rules.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q2-stake.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Multiple Stakeholders</h1> <p class="scenario__desc">A last-minute emergency hits your inbox at 5 pm — and your nephew’s clarinet recital starts at 5:30.</p> </div> </div> <<ChoiceModule "Stay late" "Bring your laptop|You take|The glow" "Two words: silent mode" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "-2" "1" "1" "-1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-stake.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Multiple Stakeholders</h1> <p class="scenario__desc">A last-minute emergency hits your inbox at 5 pm — and your nephew’s clarinet recital starts at 5:30.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You meet the deadline but miss out on family brownie points. Honestly, he’s not even your favorite nephew.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "1" "0" "0" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-stake.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Multiple Stakeholders</h1> <p class="scenario__desc">A last-minute emergency hits your inbox at 5 pm — and your nephew’s clarinet recital starts at 5:30.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You take a seat in the back and fire off a few emails between performances. Neither the emails nor the recital get your full attention.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "-1" "0" "0" "0">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-stake.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Multiple Stakeholders</h1> <p class="scenario__desc">A last-minute emergency hits your inbox at 5 pm — and your nephew’s clarinet recital starts at 5:30.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">The glow of your laptop garners a lot of dirty looks. You finally shut it in defeat.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "1" "-1" "1" "1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-stake.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Multiple Stakeholders</h1> <p class="scenario__desc">A last-minute emergency hits your inbox at 5 pm — and your nephew’s clarinet recital starts at 5:30.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You’re going to enjoy those 60 minutes of terrible instrumentation come hell or high water.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q2-word.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">The "E" Word</h1> <p class="scenario__desc">After passionately advocating for a project, Brian says you seem "emotional.”</p> </div> </div> <<ChoiceModule "Sorry I care, Brian" "h|Pants him with data|The numbers|You fumble" "s|Judo him verbally|You suggest|You stammer" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "-1" "0" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-word.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">The "E" Word</h1> <p class="scenario__desc">After passionately advocating for a project, Brian says you seem "emotional.”</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">His comment still stings, but at least you got in the last word.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "0" "1" "-1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-word.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">The "E" Word</h1> <p class="scenario__desc">After passionately advocating for a project, Brian says you seem "emotional.”</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You calmly point to the numbers that prove your passion is justified. Eat it, Brian.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "0" "1" "-1">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-word.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">The "E" Word</h1> <p class="scenario__desc">After passionately advocating for a project, Brian says you seem "emotional.”</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You fumble for the relevant facts and figures. Now you’re emotional *and* unconvincing.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "0" "-1" "1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-word.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">The "E" Word</h1> <p class="scenario__desc">After passionately advocating for a project, Brian says you seem "emotional.”</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You suggest Brian could afford to bring a little more passion to his own projects. (Burn!)</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "0" "-1" "1">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-word.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">The "E" Word</h1> <p class="scenario__desc">After passionately advocating for a project, Brian says you seem "emotional.”</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You stammer trying to think of a witty retort. Hours later, it comes to you in the shower.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> <<set $remaining to 3>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q1-cold.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">What's Cooler Than Being Cold?</h1> <p class="scenario__desc">The building is heated like a Victorian prison. Your besuited colleagues don’t seem to notice.</p> </div> </div> <<ChoiceModule "Drape yourself in blankets" "h|Tinker with the thermostat|Descend|Futz" "s|Rally the freezing folk|Coalition|Right to heat" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<audio "neutral" volume 0.5 play>> <<CalcResource "0" "0" "1" "1">> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-cold.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">What's Cooler Than Being Cold?</h1> <p class="scenario__desc">The building is heated like a Victorian prison. Your besuited colleagues don’t seem to notice.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You look like a Nova Scotian fur trader, but at least you’re (mostly) comfortable.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "0" "1" "1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-cold.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">What's Cooler Than Being Cold?</h1> <p class="scenario__desc">The building is heated like a Victorian prison. Your besuited colleagues don’t seem to notice.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You descend into the bowels of the building, find the master terminal, and reprogram it like a deep cover agent codenamed Balmy Breeze.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "0" "1" "1">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-cold.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">What's Cooler Than Being Cold?</h1> <p class="scenario__desc">The building is heated like a Victorian prison. Your besuited colleagues don’t seem to notice.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You try to futz with the nearest box you can see — unsuccessfully. Now everyone knows who to blame when the office turns into a sauna.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "1" "-1" "0">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-cold.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">What's Cooler Than Being Cold?</h1> <p class="scenario__desc">The building is heated like a Victorian prison. Your besuited colleagues don’t seem to notice.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You build a coalition of the cold and successfully advocate for a sensible 70°.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "-1" "-1" "0">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-cold.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">What's Cooler Than Being Cold?</h1> <p class="scenario__desc">The building is heated like a Victorian prison. Your besuited colleagues don’t seem to notice.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your “Right to Heat!” email goes ignored by most people, who assume it’s some kind of philanthropic venture.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> <<set $remaining to 3>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q1-trade.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Trade Show</h1> <p class="scenario__desc">You’ve been asked to join a major industry gathering in Sydney. It’s a 19-hour flight.</p> </div> </div> <<ChoiceModule "Literally anything else" "Embrace globalism" "Send a minion" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "0" "1" "1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-trade.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Trade Show</h1> <p class="scenario__desc">You’ve been asked to join a major industry gathering in Sydney. It’s a 19-hour flight.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">There aren’t enough Grey’s Anatomy episodes in the world. Instead, you bank up on time and sleep — and time asleep.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "2" "1" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-trade.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Trade Show</h1> <p class="scenario__desc">You’ve been asked to join a major industry gathering in Sydney. It’s a 19-hour flight.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You hunt down opportunities wherever they appear like a premium-class predator. You come back with plenty of new connections — and a bevy of frequent flier miles.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "1" "-1" "-1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q1-trade.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Trade Show</h1> <p class="scenario__desc">You’ve been asked to join a major industry gathering in Sydney. It’s a 19-hour flight.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your deputy is young and wild and free. They’ll have a blast — and remember that you made it happen.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q2-roast.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Employee Goes Viral</h1> <p class="scenario__desc">One of your young reports just blew up on #WorkTok with a tirade against the firm.</p> </div> </div> <<ChoiceModule "h|Give them a heads up|She's grateful|Mind your" "Reprimand them privately" "s|Drop a comment|Kinda snarky|Dunked on" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "0" "1" "1" "-1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-roast.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Employee Goes Viral</h1> <p class="scenario__desc">One of your young reports just blew up on #WorkTok with a tirade against the firm.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Grateful, they delete the video and you bank a favor.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "0" "-1" "1" "-1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-roast.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Employee Goes Viral</h1> <p class="scenario__desc">One of your young reports just blew up on #WorkTok with a tirade against the firm.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">They tell you to mind your business. They're probably right.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "0" "1" "1" "-1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-roast.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Employee Goes Viral</h1> <p class="scenario__desc">One of your young reports just blew up on #WorkTok with a tirade against the firm.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You give them a reality check on mixing professionalism and the pursuit of viral fame. They take it in stride, but you wonder if the message really landed.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "1" "0" "-1" "1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-roast.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Employee Goes Viral</h1> <p class="scenario__desc">One of your young reports just blew up on #WorkTok with a tirade against the firm.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your kinda funny, kinda snarky reply strikes fear into their jaded Gen Z heart. They delete the vid.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* passage content */ <<CalcResource "-1" "0" "-1" "1">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-roast.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Employee Goes Viral</h1> <p class="scenario__desc">One of your young reports just blew up on #WorkTok with a tirade against the firm.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">The TikTok trolls come for you instead, and it turns into a viral disaster.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q2-time.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Five Alarm Fire</h1> <p class="scenario__desc">You’ve been given a high-stakes assignment with an impossible deadline.</p> </div> </div> <<ChoiceModule "Sleep when you're dead" "Delegate it away" "Stop the madness" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-2" "1" "1" "-1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-time.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Five Alarm Fire</h1> <p class="scenario__desc">You’ve been given a high-stakes assignment with an impossible deadline.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Late nights and white knuckles make it happen. You celebrate with another can of Celsius.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "-1" "-1" "1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-time.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Five Alarm Fire</h1> <p class="scenario__desc">You’ve been given a high-stakes assignment with an impossible deadline.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You carve it up like a 20-lb turkey and pass it around to everyone. People start avoiding you in the halls.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "-1" "1" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q2-time.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Five Alarm Fire</h1> <p class="scenario__desc">You’ve been given a high-stakes assignment with an impossible deadline.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You tell the top brass it can’t be done. At least, not like this. They pass it to someone else, and you keep your sanity—for now.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q3-coffee.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Coffee Chats</h1> <p class="scenario__desc">As one of the few women executives in the building, you’ve become a de facto mentor to dozens of people.</p> </div> </div> <<ChoiceModule "Find the time" "Set boundaries" "h|Start a resource group|You convince|Get rebranded" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "1" "1" "-1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-coffee.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Coffee Chats</h1> <p class="scenario__desc">As one of the few women executives in the building, you’ve become a de facto mentor to dozens of people.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You manage to meet with everyone, but your work hours suffer. Those late-night Peloton rides become your only downtime. On the plus side, your calves look great.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "-1" "1" "1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-coffee.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Coffee Chats</h1> <p class="scenario__desc">As one of the few women executives in the building, you’ve become a de facto mentor to dozens of people.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You draw the line and protect your time, but people now see you as less approachable. Whatever, expensing coffee is a pain in the ass.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "1" "-1" "-1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-coffee.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Coffee Chats</h1> <p class="scenario__desc">As one of the few women executives in the building, you’ve become a de facto mentor to dozens of people.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You convince the top brass to fund a monthly program with famous guest speakers. Now the only problem is that you’ve added “event planner” to your already overflowing plate.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-2" "0" "-1" "-1">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-coffee.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Coffee Chats</h1> <p class="scenario__desc">As one of the few women executives in the building, you’ve become a de facto mentor to dozens of people.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You get rebranded as the firm’s unpaid DEI person and are given HR tasks in lieu of actual opportunities. Not great — even for those in HR.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q3-planning.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Planning Committee</h1> <p class="scenario__desc">You’ve been tasked with hosting a team-building event, because “you’re so good at that kind of thing.”</p> </div> </div> <<ChoiceModule "Host at the office" "Host at your home" "Cirque du Soleil" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "-1" "0" "1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-planning.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Planning Committee</h1> <p class="scenario__desc">You’ve been tasked with hosting a team-building event, because “you’re so good at that kind of thing.”</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">A few dozen Dunkin’ donuts and a 10-gallon coffee. It checks the box, but no one’s exactly impressed.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "2" "0" "-1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-planning.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Planning Committee</h1> <p class="scenario__desc">You’ve been tasked with hosting a team-building event, because “you’re so good at that kind of thing.”</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You put together a charming soirée, but your house doesn’t survive unscathed. At least your leadership reputation remains intact.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "0" "0" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-planning.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Planning Committee</h1> <p class="scenario__desc">You’ve been tasked with hosting a team-building event, because “you’re so good at that kind of thing.”</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Never a wrong answer. Even if it’s a bit 2000-and-late. Maybe you can follow it up with a team SoulCycle. You made an impression — whether it’s a good one is debatable.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q3-reply.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Reply All</h1> <p class="scenario__desc">A junior associate forwards a long email chain to a client that contains some unflattering remarks — made by you.</p> </div> </div> <<ChoiceModule "Fire their ass" "Teachable moment" "DISREGARD!" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "-1" "1" "1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-reply.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Reply All</h1> <p class="scenario__desc">A junior associate forwards a long email chain to a client that contains some unflattering remarks — made by you.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Anyone who causes you to look bad has got to go. You don’t make the rules. (Well, in this case you do.) Word spreads fast about your harsh leadership style.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "0" "-1" "-1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-reply.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Reply All</h1> <p class="scenario__desc">A junior associate forwards a long email chain to a client that contains some unflattering remarks — made by you.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You turn the incident into a learning opportunity. The team appreciates your approach, but the client relationship is forever strained.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "0" "-1" "0">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-reply.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Reply All</h1> <p class="scenario__desc">A junior associate forwards a long email chain to a client that contains some unflattering remarks — made by you.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your fingers practically trip over each other to send a gratuitous follow-up. Your hasty response draws even more attention to the debacle.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q3-steal.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Stolen Valor</h1> <p class="scenario__desc">You propose a brilliant plan during a strategy session — then Mark proposes it again 10 minutes later.</p> </div> </div> <<ChoiceModule "Let this one go" "h|Put your foot down|You demolish|Too far" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "1" "-1" "-1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-steal.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Stolen Valor</h1> <p class="scenario__desc">You propose a brilliant plan during a strategy session — then Mark proposes it again 10 minutes later.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You let Mark have this one, but deep down, you wonder if appeasing him is worth your self-respect.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "-1" "1" "-1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-steal.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Stolen Valor</h1> <p class="scenario__desc">You propose a brilliant plan during a strategy session — then Mark proposes it again 10 minutes later.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You demolish Mark with some perfectly-modulated sass. You’ve won the battle, but the war’s just begun.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "0" "-1" "1" "1">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q3-steal.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Stolen Valor</h1> <p class="scenario__desc">You propose a brilliant plan during a strategy session — then Mark proposes it again 10 minutes later.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You forget to set your word phasers to “stun” and go a little too far. That escalated quickly.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q4-family.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Family Planning</h1> <p class="scenario__desc">At the EOY forecasting meeting, the COO casually asks if you expect to be “on leave” in the next 18 months — while staring directly at your uterus.</p> </div> </div> <<ChoiceModule "Play it cool" "Get cagey" "None of their business" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "0" "-1" "0">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-family.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Family Planning</h1> <p class="scenario__desc">At the EOY forecasting meeting, the COO casually asks if you expect to be “on leave” in the next 18 months — while staring directly at your uterus.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You mention your scheduled vacation to the Alps. The conversation turns, inexplicably, to fondue.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "0" "1" "-1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-family.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Family Planning</h1> <p class="scenario__desc">At the EOY forecasting meeting, the COO casually asks if you expect to be “on leave” in the next 18 months — while staring directly at your uterus.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You respond with a simple “maybe” and leave no room for follow-ups. Equivocation is the best policy, right? </p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "-1" "1" "1">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-family.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Family Planning</h1> <p class="scenario__desc">At the EOY forecasting meeting, the COO casually asks if you expect to be “on leave” in the next 18 months — while staring directly at your uterus.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You tersely dismiss the question, but now you’re worried that your boundary-setting backfired.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q4-next.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Next Steps</h1> <p class="scenario__desc">You made it to the end of the year—now it’s time to make a case for your promotion.</p> </div> </div> <<ChoiceModule "h|Prepare a PowerPoint|Persuasive slides|Muddled slides" "Conversational Approach" "s|Threaten to walk|Big gamble|Sorry you" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "1" "1" "0">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-next.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Next Steps</h1> <p class="scenario__desc">You made it to the end of the year—now it’s time to make a case for your promotion.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your cogent and persuasive slides build to an almost emotional climax. Did the CEO just wipe away a tear?</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "-1" "1" "0">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-next.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Next Steps</h1> <p class="scenario__desc">You made it to the end of the year—now it’s time to make a case for your promotion.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">With every chart-cluttered, bullet-riddled slide, the exec committee seems to be growing *less* interested in your future.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "0" "0" "0" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-next.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Next Steps</h1> <p class="scenario__desc">You made it to the end of the year—now it’s time to make a case for your promotion.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You keep things light, but by the end of the meeting, it’s clear nothing’s changing. Turns out, charm only goes so far.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "2" "1" "-1" "1">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-next.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Next Steps</h1> <p class="scenario__desc">You made it to the end of the year—now it’s time to make a case for your promotion.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">It’s a big gamble, but it pays off. Your track record speaks for itself — they need you, and they know it.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "-3" "-1" "1">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-next.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Next Steps</h1> <p class="scenario__desc">You made it to the end of the year—now it’s time to make a case for your promotion.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">“We’re sorry you feel that way.” Have six words ever cut so deep? You better start updating your LinkedIn.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q4-performance.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Performance Reviews</h1> <p class="scenario__desc">Time to deliver feedback without bruising any delicate egos.</p> </div> </div> <<ChoiceModule "h|Be objective|Command facts|No feelings" "s|Be diplomatic|Artfully constructed|Gentle parenting" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "0" "1" "1" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-performance.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Performance Reviews</h1> <p class="scenario__desc">Time to deliver feedback without bruising any delicate egos.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your command of the facts makes you sound neutral and measured, like a news anchor who can’t be bought. It’s giving Libra.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "0" "-1" "1" "0">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-performance.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Performance Reviews</h1> <p class="scenario__desc">Time to deliver feedback without bruising any delicate egos.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your all-facts, no-feelings approach leads your direct reports to start referring to you as Elsa — the ice queen.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "0" "1" "-1" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-performance.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Performance Reviews</h1> <p class="scenario__desc">Time to deliver feedback without bruising any delicate egos.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your artfully constructed compliment sandwiches mask the bitter mustard of your critiques. It goes down easy, but your team isn’t any more motivated.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "1" "-1" "0">> <<audio "neutral" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-performance.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Performance Reviews</h1> <p class="scenario__desc">Time to deliver feedback without bruising any delicate egos.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Your “gentle parenting” style feels good in the moment, but leaves your direct reports unlikely to improve.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> /* pass messages */ <<EventMessenger "showMenu" true>> /* handle quarter */ <<script>> $(document).ready(function() { let quarterCheck = State.getVar("$quarterNotification"); if(quarterCheck) { document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); } $("#quarter-close").click(function(){ document.getElementById('quarter').classList.toggle('quarter-indicator--hidden'); }); }); <</script>> /* passage content */ <div class="abs-wrapper"> <div class="rel-wrapper"> <div id="quarter" class="quarter-indicator quarter-indicator--hidden"> <div class="titlebar titlebar--quarter"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">⏳ TIME IS PASSING ⏳</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="calendar"> <p class="calendar__heading">Now starting</p> <p class="calendar__quarter">Q$quarter</p> </div> </div> <div class="content" id="scenario-area"> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario"> <img class="scenario__img" src="img/q4-screen.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Screen Bare</h1> <p class="scenario__desc">While screen-sharing on a prep call for the Q4 earnings report, you accidentally reveal your bulk order for Charmin double-ply.</p> </div> </div> <<ChoiceModule "Pretend no one saw|Close tab|Maybe they didn't" "Own it with a joke|You laugh|Borderline inappropriate" >> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "1" "0" "-1" "0">> <<audio "good" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-screen.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Screen Bare</h1> <p class="scenario__desc">While screen-sharing on a prep call for the Q4 earnings report, you accidentally reveal your bulk order for Charmin double-ply.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You closed the tab fast enough to preserve your dignity. Reflexes 1, Microsoft Teams 0.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "-1" "0" "-1" "0">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-screen.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Screen Bare</h1> <p class="scenario__desc">While screen-sharing on a prep call for the Q4 earnings report, you accidentally reveal your bulk order for Charmin double-ply.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">Maybe they didn’t. Maybe they were all smirking for a totally unrelated reason. Whether anyone noticed or not, you’ll never know — but you’ll always wonder.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<audio "good" volume 0.5 play>> <<CalcResource "0" "1" "1" "0">> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-screen.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Screen Bare</h1> <p class="scenario__desc">While screen-sharing on a prep call for the Q4 earnings report, you accidentally reveal your bulk order for Charmin double-ply.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You laugh, your coworkers laugh, and you get extra credit for being cool and unflappable.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<<script>> UIBar.show(); UIBar.unstow(); <</script>> <<CalcResource "0" "-1" "1" "0">> <<audio "bad" volume 0.5 play>> <<set $quarterLabel to "YOU ARE IN: Q"+ $quarter>> <<TitleBar $quarterLabel>> <div class="scenario scenario--inactive"> <img class="scenario__img" src="img/q4-screen.jpg"/> <div class="scenario__text"> <h1 class="scenario__title">Screen Bare</h1> <p class="scenario__desc">While screen-sharing on a prep call for the Q4 earnings report, you accidentally reveal your bulk order for Charmin double-ply.</p> </div> </div> <div class="alert"> <div class="scenario scenario--alert"> <img class="scenario__icon" src="img/warn1.png"/> <div class="scenario__text scenario__text--alert"> <p class="scenario__desc scenario__desc--alert">You make a borderline inappropriate comment about your personal life. Awkward silence follows.</p> </div> </div> <div class="btn-area btn-area--alert"> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div> </div>
<div class="handbook"> <div> <h1 class="handbook__title">HOW TO PLAY</h1> <div class="handbook__text"> <p>As a woman, you know that climbing the corporate ladder is never just about the work—so watch your step.</p> <p><mark>Likeability</mark> measures your standing at the firm. If it drops to zero, <mark>you will be fired</mark>. <mark>Self-Care</mark> reflects your resilience. If it drops to zero, <mark>you will burn out.</mark></p> <p>You’ll face challenging scenarios with multiple stakeholders during your tenure. Do your best—and remember to smile!</p> </div> </div> <div class="button"> <<link "Next">> <<EndingCheck>> <</link>> </div> </div>
/* Variable Initialization */ <<if $time == undefined>> <<set $time to 0>> <</if>> <<if $quarter == undefined>> <<set $quarter to 0>> <</if>> <<set $class to 1>> <<set $hardSkill to 1>> <<set $softSkill to -1>> <<set $energy to 5>> <<set $energyPercent to 50>> <<set $approval to 5>> <<set $approvalPercent to 50>> <<set $user to "ABC">> <<set $demo to true>> <<set $workStyle to 0>> <<set $orientation to 0>> <<set $quarter to 1>> <<script>> $(document).ready(function() { $("#l-close").click(function(){ document.getElementById('l-about').classList.toggle('about-window--hidden'); }); $("#l-about-mobile").click(function(){ document.getElementById('l-about').classList.toggle('about-window--hidden'); document.getElementById('l-menu-overlay').classList.toggle('menu-overlay--hidden'); document.getElementById('l-hamburger').src="img/menu.svg"; }); $("#l-hamburger").click(function() { if (document.getElementById('l-menu-overlay').classList.contains('menu-overlay--hidden')) { document.getElementById('l-hamburger').src="img/close.svg"; } else { document.getElementById('l-hamburger').src="img/menu.svg"; } document.getElementById('l-menu-overlay').classList.toggle('menu-overlay--hidden'); }); }); <</script>> <div class="menu-bar menu-bar--login"> <img id="l-hamburger" class="menu-bar__btn" src="img/menu.svg" /> <img class="menu-bar__logo" src="img/logo.png" /> <a href="https://chief.com" class="menu-bar__heading">A workplace survival game by<img src="img/chief.svg"/></a> </div> <div id="l-menu-overlay" class="menu-overlay menu-overlay--hidden"> <ul id="l-mobile-menu" class="mobile-menu"> <li id="l-about-mobile" class="mobile-menu__option"><img src="img/about.png" />Who Made This?</li> </ul> </div> <div id="l-about" class="about-window about-window--hidden"> <div class="titlebar titlebar--float"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">WHO MADE THIS?</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="window-text"> <div class="window-text__scroll"> <h1 class="window-text__title">CHIEF IS A NETWORK FOR WOMEN EXECUTIVES</h1> <p class="window-text__copy">Navigating the highs, lows, and absurdities of corporate life at the executive level takes more than grit and hustle. Just ask any of our members—<mark>40% of whom are in the C-Suite</mark>.</p> <p class="window-text__copy">Chief helps you be <mark>a more impactful leader</mark> by connecting you with peers who understand your challenges and ambitions.</p> <p class="window-text__copy">Visit <a href="https://chief.com">Chief.com</a> to learn more.</p> </div> <div id="l-close" class="button"><a>Close</a></div> </div> </div> <div class="abs-wrapper abs-wrapper--login"> <img class="logo" src="img/logo.png"/> <div class="rel-wrapper"> <div class="content content--login"> <<TitleBar "Welcome">> <div class="login-window"> <div> <h1 class="login-window__title">Pick Your Department</h1> <p class="login-window__info">Your skills may affect certain outcomes.</p> <div class="class-selector"> <div class="class class--selected" id="pd"> <img class="class__portrait" src="img/tech.jpg"/> <div class="class-info"> <p class="class-info__title class-info__title--product">TECH</p> <p class="class-info__desc">Software bends to your will. You troubleshoot like it’s a reflex.</p> </div> </div> <div class="class" id="sa"> <img class="class__portrait" src="img/sales.jpg"/> <div class="class-info"> <p class="class-info__title class-info__title--sales">MARKETING</p> <p class="class-info__desc">You can charm, cajole, and occasionally even captivate. You can’t do spreadsheets.</p> </div> </div> <div class="class" id="lg"> <img class="class__portrait" src="img/hr.jpg"/> <div class="class-info"> <p class="class-info__title class-info__title--legal">HR</p> <p class="class-info__desc">You know how to read the room — and the fine print in every benefits package.</p> </div> </div> <div class="class" id="op"> <img class="class__portrait" src="img/ops.jpg"/> <div class="class-info"> <p class="class-info__title class-info__title--ops">OPERATIONS</p> <p class="class-info__desc">Blockers, beware. Neither rain nor shifting priority keeps you from hitting a deadline.</p> </div> </div> </div> </div> <div> <div class="initials-field"> <div class="initials-field__label"> <p>ENTER PLAYER NAME:</p> <p class="initials-sublabel">MAX 8 CHARS.</p> </div> <input id="textbox-user" name="textbox-user" type="text" inputmode="text" placeholder="JANET" maxlength="8" tabindex="0" class="macro-textbox"> </div> <div id="login" class="button button--disabled"> <<link "Next">> <<set $slack to true>> <<set $quarterNotification to true>> <<set $remaining to 4>> <<script>> var userField = document.getElementById("textbox-user"); var inputValue = userField.value.trim(); State.variables.user = inputValue; <</script>> <<GoRandom "Q1">> <</link>> </div> </div> </div> </div> </div> </div> <<script>> $(document).one(':passagedisplay', function () { UIBar.hide(); console.log("Login game logic running."); var divs = document.querySelectorAll('.class'); var userField = document.getElementById("textbox-user"); var inputValue = userField.value.trim(); var classCheck = true; var btn = document.querySelector('#login'); function loginCheck () { if (classCheck && inputValue.length > 1) { console.log("gouda"); btn.classList.remove('button--disabled'); } else { btn.classList.add('button--disabled'); } } divs.forEach(function(div) { div.addEventListener('click', function() { divs.forEach(function(d) { d.classList.remove('class--selected'); }); this.classList.add('class--selected'); if (this.id === "pd") { console.log("pd"); State.variables.hardSkill = 1; State.variables.softSkill = -1; State.variables.class = 1; classCheck = true; } else if (this.id === "sa") { console.log("sa"); State.variables.hardSkill = -1; State.variables.softSkill = 1; State.variables.class = 2; classCheck = true; } else if (this.id === "lg") { console.log("lg"); State.variables.hardSkill = 0; State.variables.softSkill = 0; State.variables.class = 3; classCheck = true; } else if (this.id === "op") { console.log("op"); State.variables.hardSkill = -1; State.variables.softSkill = 1; State.variables.class = 4; classCheck = true; } loginCheck(); }); }); userField.addEventListener('input', function() { inputValue = userField.value.trim(); loginCheck(); }) }); <</script>>
<<script>> UIBar.hide(); <</script>> <div class="bg bg--start"></div> <div class="abs-wrapper abs-wrapper--start"> <img class="logo logo--start" src="img/logo-start.png"/> <a class="start-subhead" href="https://chief.com">A survival game by Chief</a> <div id="notif1" class="notification"> <img class="notification__image" src="img/slack.png"/> <div class="notification-text"> <p class="notification-text__heading">#ALL-TEAM</p> <p class="notification-text__body">Traverse workplace double standards as a woman exec!</p> </div> </div> <div id="notif2" class="notification"> <img class="notification__image" src="img/slack.png"/> <div class="notification-text"> <p class="notification-text__heading">#ALL-TEAM</p> <p class="notification-text__body">Optimize your WELL-BEING without sacrificing LIKEABILITY!</p> </div> </div> <div id="notif3" class="notification"> <img class="notification__image" src="img/slack.png"/> <div class="notification-text"> <p class="notification-text__heading">#ALL-TEAM</p> <p class="notification-text__body">Always remember to smile!</p> </div> </div> <div class="rel-wrapper rel-wrapper--start"> <img class="start-img" src="img/start.jpg" /> <div id="start-btn" class="button button--start button--hidden"> <<link "New Game">> <<goto "Login">> <</link>> </div> </div> </div> <div class="start-footer"> <p>© Chief Games, Inc.</p> <div> <a id="about-lnk">About</a> | <a id="sharing-lnk">Share</a> </div> </div> <<script>> function startUnlock() { const btn = document.querySelector('#start-btn'); btn.classList.remove('button--hidden'); } const waitForGSAP = setInterval(function() { if (typeof gsap !== "undefined") { clearInterval(waitForGSAP); var tl = gsap.timeline(); tl.from(".notification", {delay: 0.5, stagger: 0.75, duration: 0.5, y: 25, opacity: 0, ease: "back.out", onComplete: startUnlock}); tl.fromTo("#start-btn", {y:15}, {y:0, opacity: 1, duration: 0.25}); } }, 100); <</script>>
<<script>> if (document.querySelector('#sharing')) { var endingLabel = State.getVar("$endingLabel").toString(); var endingImage = State.getVar("$endingImage"); var delayInMilliseconds = 10000; //10 second setTimeout(function() { document.getElementById('about').classList.toggle('about-window--hidden'); document.getElementById('about').classList.toggle('about-window--over'); }, delayInMilliseconds); function isDesktop() { const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0; const isLargeScreen = window.innerWidth > 1200; return !hasTouch && isLargeScreen; } if (isDesktop()) { let screensaverTimer; let screensaverInterval; const idleTime = 12000; // 12 seconds const imageDisplayInterval = 3000; // 5 second between images const images = [ '/img/msg1.png', '/img/msg2.png', '/img/msg3.png', '/img/msg4.png', '/img/msg5.png', '/img/msg6.png', '/img/msg7.png' ]; // Start the screensaver timer function resetScreensaverTimer() { clearTimeout(screensaverTimer); removeImages(); screensaverTimer = setTimeout(startScreensaver, idleTime); } // Start displaying images one by one at intervals function startScreensaver() { let imageIndex = 0; screensaverInterval = setInterval(() => { if (imageIndex >= images.length) { clearInterval(screensaverInterval); // Stop when all images have been displayed return; } displayImage(images[imageIndex]); imageIndex++; }, imageDisplayInterval); } // Show a single image at a random position function displayImage(src) { let img = document.createElement('img'); img.src = src; img.classList.add('screensaver-popup'); img.style.top = `${Math.random() * 70}vh`; img.style.left = `${Math.random() * 70}vw`; img.style.opacity = '1'; document.body.appendChild(img); } // Remove all screensaver images function removeImages() { clearInterval(screensaverInterval); // Clear interval in case it’s still running document.querySelectorAll('.screensaver-popup').forEach(img => img.remove()); } // Reset screensaver timer on user activity ['mousemove', 'keypress', 'scroll'].forEach(event => { window.addEventListener(event, resetScreensaverTimer); }); // Initialize screensaver timer resetScreensaverTimer(); } } // Function to fetch the image blob async function fetchImageBlob(imageUrl) { try { const response = await fetch(imageUrl); return await response.blob(); } catch (error) { console.error('Failed to fetch image:', error); return null; } } // Intro screen sharing if (document.querySelector('#sharing-lnk')) { var shareBtn = document.querySelector('#sharing-lnk'); shareBtn.addEventListener('click', async () => { const blob = await fetchImageBlob(endingImage); var resultURL = 'https://thecorporatetrail.chief.com' let shareData = { url: resultURL, }; // Fallback to clipboard if Web Share API is unavailable if (!navigator.canShare || !navigator.canShare(shareData)) { console.log('Web Share API not available. Using clipboard as fallback.'); try { await navigator.clipboard.write([ new ClipboardItem({ 'text/plain': resultURL, }) ]); setTimeout(function () { shareBtn.children[0].innerText = "Copied to Clipboard"; }, 200); } catch (error) { console.error(error); } return; } // Try sharing via Web Share API navigator.share(shareData) .then(() => { console.log('Shared successfully'); }) .catch((e) => { console.log('Error: ' + e); }); }); } // Share button functionality if (document.querySelector('#sharing')) { var shareBtn = document.querySelector('#sharing'); shareBtn.addEventListener('click', async () => { const blob = await fetchImageBlob(endingImage); if (!blob) { console.error('Image blob is not available for sharing.'); return; } var resultURL = 'https://thecorporatetrail.chief.com/?result=' + endingLabel; let shareData = { url: resultURL, }; // Fallback to clipboard if Web Share API is unavailable if (!navigator.canShare || !navigator.canShare(shareData)) { console.log('Web Share API not available. Using clipboard as fallback.'); try { shareBtn.classList.remove("button--success"); shareBtn.children[0].innerText = "Copying..."; await navigator.clipboard.write([ new ClipboardItem({ 'image/png': blob }) ]); setTimeout(function () { shareBtn.children[0].innerText = "Copied to Clipboard"; shareBtn.classList.add("button--success"); }, 200); } catch (error) { console.error(error); } return; } // Try sharing via Web Share API navigator.share(shareData) .then(() => { console.log('Shared successfully'); }) .catch((e) => { console.log('Error: ' + e); }); }); } // Clipboard functionality (Separate Event Listener) if (document.querySelector('#clip')) { var clipBtn = document.querySelector('#clip'); clipBtn.addEventListener('click', async () => { const blob = await fetchImageBlob(endingImage); function isMobileDevice() { return /Mobi|Android/i.test(navigator.userAgent); } if (!blob) { console.error('Image blob is not available for clipboard.'); return; } const link = document.createElement('a'); link.href = URL.createObjectURL(await fetchImageBlob(endingImage)); link.download = 'image.png'; link.click(); }); } <</script>>
<div id="menu-overlay" class="menu-overlay menu-overlay--hidden"> <ul id="mobile-menu" class="mobile-menu"> <li id="about-mobile" class="mobile-menu__option"><img src="img/about.png" />Who Made This?</li> <li id="tut-mobile" class="mobile-menu__option"><img src="img/tutorial.png" />How to Play</li> <li id="quit-mobile" class="mobile-menu__option"><img src="img/quit.png" />Quit</li> </ul> </div> <div id="about" class="about-window about-window--hidden"> <div class="titlebar titlebar--float"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">WHO MADE THIS?</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="window-text"> <div class="window-text__scroll"> <h1 class="window-text__title">CHIEF IS A NETWORK FOR WOMEN EXECUTIVES</h1> <p class="window-text__copy">Navigating the highs, lows, and absurdities of corporate life at the executive level takes more than grit and hustle. Just ask any of our members—<mark>40% of whom are in the C-Suite</mark>.</p> <p class="window-text__copy">Chief helps you be <mark>a more impactful leader</mark> by connecting you with peers who understand your challenges and ambitions.</p> <p class="window-text__copy">Visit <a href="https://chief.com">Chief.com</a> to learn more.</p> </div> <div id="close" class="button"><a>Close</a></div> </div> </div> <div id="tut" class="about-window about-window--hidden about-window--tut"> <div class="titlebar titlebar--float"> <img src="img/grip.svg" class="titlebar__grip"> <p class="titlebar__text">HOW TO PLAY</p> <img src="img/grip.svg" class="titlebar__grip"> </div> <div class="window-text"> <div class="window-text__scroll"> <h1 class="window-text__title">EMPLOYEE HANDBOOK</h1> <p class="window-text__copy">You’re the latest exec hire at MEGA MULTINATIONAL. As a woman, you know a corporate job is never just about the work.</p> <p class="window-text__copy"><mark>LIKEABILITY</mark> measures your standing at the firm. If it drops to zero, <mark>you will be fired</mark>. <mark>WELL-BEING</mark> reflects your stress levels. If it drops to zero, <mark>you will burn out.</mark></p> <p class="window-text__copy">You’ll face scenarios with no obvious solution. Do your best and learn just what kind of executive you really are.</p> </div> <div id="close-tut" class="button"><a>Close</a></div> </div> </div> <<done>> <<script>> $(document).ready(function() { $("#close").click(function(){ document.getElementById('about').classList.toggle('about-window--hidden'); document.getElementById('about').classList.remove('about-window--over'); }); $("#close-tut").click(function(){ document.getElementById('tut').classList.toggle('about-window--hidden'); document.getElementById('tut').classList.remove('about-window--over'); }); $("#about-mobile").click(function(){ document.getElementById('about').classList.toggle('about-window--hidden'); document.getElementById('menu-overlay').classList.toggle('menu-overlay--hidden'); document.getElementById('hamburger').src="img/menu.svg"; }); $("#tut-mobile").click(function(){ document.getElementById('tut').classList.toggle('about-window--hidden'); document.getElementById('menu-overlay').classList.toggle('menu-overlay--hidden'); document.getElementById('hamburger').src="img/menu.svg"; }); }); const waitForGSAP = setInterval(function() { if (typeof gsap !== "undefined") { clearInterval(waitForGSAP); if(document.getElementById('scenario-area')) { var tl = gsap.timeline(); tl.from("#scenario-area", {duration: 0.5, y: 25, ease: "back.out"}, 0); tl.to("#quarter", {duration: 0.5, opacity: 0, y: -25, ease: "back.out", display:"none"}, 1.25); } if(document.getElementById('transition')) { var tl = gsap.timeline(); tl.from(".bg__text", {duration: 2, y: 100, ease: "back.out"}); tl.from(".dot", {delay: 0.5, duration: 0.1, stagger:{ each:0.5, from:"start"}, opacity: 0}, 0); tl.to("#transition", {duration: 0.5, opacity: 0, visibility: "hidden", ease: "back.out"}); tl.from(".rel-wrapper", {duration: 0.5, y: 25, ease: "back.out"}, 1.5); tl.from(".flash", {fill: "#ffffff", duration: 0.1, yoyo: true, repeat: 8, ease: "none"}, 2.25); } else if(document.getElementById('blink')) { gsap.from(".flash", {fill: "#ffffff", duration: 0.1, yoyo: true, repeat: 8, ease: "none"}); } let text = document.querySelector("#quit-btn"); let animation = gsap.to("#quit-btn", { paused: true, duration: 0.1, rotation: 10, yoyo: true, repeat: 5, ease: "power1.inOut" }); text.addEventListener("mouseenter", () => animation.restart()); setInterval(() => { animation.restart(); }, 15000); let about = document.querySelector("#about-btn"); let aboutAnimation = gsap.to("#about-btn", { paused: true, duration: 0.1, rotation: 10, yoyo: true, repeat: 5, ease: "power1.inOut" }); about.addEventListener("mouseenter", () => aboutAnimation.restart()); let tut = document.querySelector("#tut-btn"); let tutAnimation = gsap.to("#tut-btn", { paused: true, duration: 0.1, rotation: 10, yoyo: true, repeat: 5, ease: "power1.inOut" }); tut.addEventListener("mouseenter", () => tutAnimation.restart()); } }, 100); <</script>> <<if $slack is true>> <<timed 0.1s>> <<audio "slack" volume 0.25 play>> <</timed>> <</if>> <</done>>
<<script>> window.addEventListener('message', function (event) { // check the message content if (event.data === 'restart') { // restart the game Engine.restart(); } if (event.data === 'quit') { $.wiki('<<GoRandom "QUIT">>') } }); console.log('Child listening for messages...'); // mobile viewport fix window.onresize = function() { document.body.height = window.innerHeight; } window.onresize(); // called to initially set the height. <</script>>
<div class="menu-bar"> <img id="hamburger" class="menu-bar__btn" src="img/menu.svg" /> <img class="menu-bar__logo" src="img/logo.png" /> <a href="https://chief.com" class="menu-bar__heading">A workplace survival game by<img src="img/chief.svg"/></a> </div> <div id="desktop" class="icon-view"> <div class="icon-group"> <div id="tut-btn" class="icon"> <img class="icon__img" src="img/tutorial.png" /> <p class="icon__label">HOW TO PLAY</p> </div> <div id="about-btn" class="icon"> <img class="icon__img" src="img/about.png" /> <p class="icon__label">WHO MADE THIS?</p> </div> </div> <div id="quit-btn" class="icon"> <img class="icon__img" src="img/quit.png" /> <p class="icon__label">QUIT</p> </div> </div> <div class="bar"> <img class="logo" src="img/logo.png"/> <div class="stats"> <<ResourceMeter>> </div> </div> <<done>> <<script>> $("#quit-btn").click(function() { $.wiki("<<timed 0.1s>><<goto 'QUIT'>><</timed>>"); }); $("#quit-mobile").click(function() { $.wiki("<<timed 0.1s>><<goto 'QUIT'>><</timed>>"); document.getElementById('menu-overlay').classList.toggle('menu-overlay--hidden'); document.getElementById('hamburger').src="img/menu.svg"; }); $("#hamburger").click(function() { if (document.getElementById('menu-overlay').classList.contains('menu-overlay--hidden')) { document.getElementById('hamburger').src="img/close.svg"; } else { document.getElementById('hamburger').src="img/menu.svg"; } document.getElementById('menu-overlay').classList.toggle('menu-overlay--hidden'); }); $(document).ready(function() { $("#about-btn").click(function() { $.wiki("<<audio 'click' volume 2 play>>"); document.getElementById('about').classList.toggle('about-window--hidden'); }); $("#tut-btn").click(function() { $.wiki("<<audio 'click' volume 2 play>>"); document.getElementById('tut').classList.toggle('about-window--hidden'); }); $("#about-lnk").click(function() { $.wiki("<<audio 'click' volume 2 play>>"); document.getElementById('about').classList.toggle('about-window--hidden'); }); }); <</script>> <</done>>
<<cacheaudio "office" "audio/office.mp3">> <<cacheaudio "boom" "audio/boom.mp3">> <<cacheaudio "slack" "audio/slack.mp3">> <<cacheaudio "tada" "audio/tada.mp3">> <<cacheaudio "click" "audio/click.mp3">> <<cacheaudio "over" "audio/gameover.mp3">> <<cacheaudio "bad" "audio/bad.mp3">> <<cacheaudio "neutral" "audio/foreground.mp3">> <<cacheaudio "good" "audio/good.mp3">> /* <<createaudiogroup ":bg">> <</createaudiogroup>> <<createaudiogroup ":sfx">> <</createaudiogroup>> */ <<set $maxEnergy to 10>> <<set $maxApproval to 10>> <<newmeter 'energy' 0.5>> <<colors #74B137 #DDF15B #EEEEE0>> <<sizing 100% 20px>> <<animation 0.5s linear>> <<label '$energy' 'black' right>> <</newmeter>> <<newmeter 'approval' 0.5>> <<colors #74B137 #DDF15B #EEEEE0>> <<sizing 100% 20px>> <<animation 0.5s linear>> <<label '$approval' 'black' right>> <</newmeter>>
<<widget "CalcResource">> <<set $energy to Math.clamp($energy += Number($args[0]), 0, 10)>> <<set $approval to Math.clamp($approval += Number($args[1]), 0, 10)>> <<set $workStyle to Math.clamp($workStyle += Number($args[2]), -8, 8)>> <<set $orientation to Math.clamp($orientation += Number($args[3]), -8, 8)>> <<set $energyDelta to $args[0]>> <<set $approvalDelta to $args[1]>> <<if $energyDelta > 0>> <<set $energyDelta to "+" + $energyDelta>> <</if>> <<if $approvalDelta > 0>> <<set $approvalDelta to "+" + $approvalDelta>> <</if>> <<script>> $(document).ready(function() { $("#energyNotif p").text(State.getVar("$energyDelta").toString()); $("#approvalNotif p").text(State.getVar("$approvalDelta").toString()); }); const waitForGSAP = setInterval(function() { if (typeof gsap !== "undefined") { clearInterval(waitForGSAP); if(document.getElementById('energyNotif')) { gsap.fromTo("#energyNotif", {y: 25}, {y: 0, opacity: 1, duration: 0.5, ease: "back.out"}); gsap.fromTo("#approvalNotif", {y: 25}, {y: 0, opacity: 1, duration: 0.5, ease: "back.out"}); gsap.to("#energyNotif", {delay: 2.5, duration: 0.5, opacity: 0, ease: "back.out"}); gsap.to("#approvalNotif", {delay: 2.5, duration: 0.5, opacity: 0, ease: "back.out"}); } } }, 100); <</script>> <<updatemeter 'approval' `$approval / $maxApproval`>> <<updatemeter 'energy' `$energy / $maxEnergy`>> <</widget>>
<<widget "ChoiceModule">> <div class="action-box"> <<for _i to 0; _i lt _args.length; _i++>> <<capture _i>> <<if _args[_i].includes("|")>> /* split by separator */ <<set _options = $args[_i].split("|")>> <<capture _options>> /* check if special action */ <<if _options.length > 3>> <<set $actionType to _options[0]>> <<switch $actionType>> /* hard skill */ <<case "h">> <<switch $hardSkill>> <<case 1>> <<set $probability to random(30,100)>> <<case -1>> <<set $probability to random(0,0)>> <<case 0>> <<set $probability to random(0,80)>> <</switch>> /* soft skill */ <<case "s">> <<switch $softSkill>> <<case 1>> <<set $probability to random(20,100)>> <<case -1>> <<set $probability to random(0,80)>> <<case 0>> <<set $probability to random(0,100)>> <</switch>> <</switch>> <<if $probability >= 50>> <div class="button"> <<link _options[1]>> <<timed 0.1s>> <<replace "#scenario-area">> <<include _options[2]>> <</replace>> <</timed>> <</link>> </div> <<else>> <div class="button"> <<link _options[1]>> <<timed 0.1s>> <<replace "#scenario-area">> <<include _options[3]>> <</replace>> <</timed>> <</link>> </div> <</if>> <<else>> /* non-special default */ <<set $probability to random(0,100)>> <<if $probability >= 50>> <div class="button"> <<link _options[0]>> <<timed 0.1s>> <<replace "#scenario-area">> <<include _options[1]>> <</replace>> <</timed>> <</link>> </div> <<else>> <div class="button"> <<link _options[0]>> <<timed 0.1s>> <<replace "#scenario-area">> <<include _options[2]>> <</replace>> <</timed>> <</link>> </div> <</if>> <</if>> <</capture>> <<else>> <div class="button"> <<link _args[_i]>> <<timed 0.1s>> <<replace "#scenario-area">> <<include _args[_i]>> <</replace>> <</timed>> <</link>> </div> <</if>> <</capture>> <</for>> </div> <</widget>>
<<widget "EndingCheck">> <<if $quarterNotification is true>> <<set $quarterNotification to false>> <</if>> /* check for fail conditions */ <<if $energy <= 0>> <<goto "Burnout">> <<elseif $approval <= 0>> <<goto "Canned">> <<else>> /* advance time */ <<set $time to $time + 1>> /* check for ending stage */ <<if $quarter == 4 and $time == 2>> <<set $personalityCheck to true>> <</if>> /* move to next quarter */ <<if $time == 2 && $quarter < 4>> <<set $quarter to $quarter + 1>> <<set $quarterNotification to true>> <<set $remaining to 4 - $quarter>> <<set $time to 0>> <</if>> /* go to next scenario */ <<if $quarter is 1>> <<GoRandom "Q1">> <<elseif $quarter is 2>> <<GoRandom "Q2">> <<elseif $quarter is 3>> <<GoRandom "Q3">> <<elseif $quarter == 4 and $time < 2>> <<GoRandom "Q4">> <</if>> <</if>> /* ending check */ <<if $personalityCheck is true>> <<set $slack to false>> <<script>> console.log("Personality check is true"); <</script>> <<if $workStyle is 0>> /* break tie */ <<set $workStyle to ($workStyle += (Math.random() < 0.5 ? 1 : -1))>> <<script>> console.log("Work style tie broken"); <</script>> <</if>> <<if $orientation is 0>> /* break tie */ <<set $orientation to ($orientation += (Math.random() < 0.5 ? 1 : -1))>> <<script>> console.log("Orientation tie broken"); <</script>> <</if>> <<if Math.abs($workStyle) < 4 && Math.abs($orientation) < 4>> <<if $workStyle > 0 && $orientation > 0>> <<goto "Ending 1">> <<elseif $workStyle > 0 && $orientation < 0>> <<goto "Ending 2">> <<elseif $workStyle < 0 && $orientation < 0>> <<goto "Ending 3">> <<else>> <<goto "Ending 4">> <</if>> <<else>> <<if $workStyle > 0 && $orientation > 0>> <<goto "Ending 5">> <<elseif $workStyle > 0 && $orientation < 0>> <<goto "Ending 6">> <<elseif $workStyle < 0 && $orientation < 0>> <<goto "Ending 7">> <<else>> <<goto "Ending 8">> <</if>> <</if>> <</if>> <</widget>>
<<widget "EventMessenger">> <<set $var1 to $args[0]>> <<set $var2 to $args[1]>> <<if $args[2]>> <<set $var3 to $args[2]>> <</if>> <<script>> window.addEventListener("message", (event) => { if (event.data.type === "parentReady") { console.log("Parent is ready, sending message..."); let message; if (!State.getVar("$var3")) { message = { type: State.getVar("$var1"), value: State.getVar("$var2") }; } else { message = { type: State.getVar("$var1"), value: State.getVar("$var2"), mod: State.getVar("$var3") }; } window.parent.postMessage(message, "*"); } }); <</script>> <</widget>>
<<widget "GoRandom">> <<set _possiblePlaces = setup.getPassageNames(_args[0])>> <<set _possiblePlaces to _possiblePlaces.filter(function(passage) { return !hasVisited(passage); })>> <<if _possiblePlaces.length > 0>> <<set _randomPassage = _possiblePlaces[Math.floor(Math.random() * _possiblePlaces.length)]>> <<goto _randomPassage>> <<else>> <<script>> console.log("No more passages."); <</script>> <</if>> <</widget>>
<<widget "MenuBar">> <div class="menu-bar"> <div class="menu-bar__group"> <a class="menu-bar__link">About</a> </div> <img class="menu-bar__logo" src="img/logo-small.png" /> <a class="menu-bar__link">Quit</a> </div> <</widget>>
<<widget "PlayerAvatar">> <div class="avatar"> <<switch $class>> <<case 1>> <img class="avatar__image" src="img/icon1.png"/> <<case 2>> <img class="avatar__image" src="img/icon2.png"/> <<case 3>> <img class="avatar__image" src="img/icon3.png"/> <<case 4>> <img class="avatar__image" src="img/icon4.png"/> <</switch>> </div> <</widget>>
<<widget "QuarterTracker">> <p id="quarter" class="ui-label">Q$quarter</p> <</widget>>
<<widget "QuitButton">> <div class="quit-btn"> [[QUIT]] </div> <</widget>>
<<widget "ResourceMeter">> <div id="resource" class="resource-meter"> <div class="user"> <p class="user__label">Playing as:</p> <h1 class="user__name">$user</h1> </div> <div class="resource-meter__unit"> <div id="energyNotif" class="resource-meter__indicator"> <p>$energyNotif</p> </div> <div class="resource-meter__label"> <p class="resource-meter__name">Well-being</p> </div> <<showmeter 'energy' '_energy / _maxEnergy' />> </div> <div class="resource-meter__unit"> <div id="approvalNotif" class="resource-meter__indicator"> <p>$approvalNotif</p> </div> <div class="resource-meter__label"> <p>Likeability</p> </div> <<showmeter 'approval' '_approval / _maxApproval' />> </div> </div> <</widget>>
<<widget "ResourceUpdate">> <<nobr>> <div class="action-box"> <p><strong><em> <<if $args[0] != 0>> WLB: $args[0] <</if>> <<if $args[2] != 0>> PERFORMANCE: $args[2] <</if>> </em></strong></p> <<link "Next">> <<EndingCheck>> <</link>> </div><</nobr>> <</widget>>
<<widget "SharingModule">> <div class="btn-area btn-area--ending"> <div class="button button--ending button--sharing" id="sharing"><a>Share</a></div> <div class="button button--preview" id="clip"><a><span><img @src="$endingImage" height="200px"/></span>Download Image</a></div> </div> <</widget>>
<<widget "TitleBar">> <div class="titlebar"> <img src="img/grip.svg" class="titlebar__grip"/> <p class="titlebar__text">_args[0]</p> <img src="img/grip.svg" class="titlebar__grip"/> </div> <</widget>>