Agile Rabbit

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<cacheaudio "opening" "assets/audio/StrongerTogetherSFX_v2_1opening-recovery.mp3">> <<cacheaudio "neighbour" "assets/audio/StrongerTogetherSFX_2 neighbours-recovery.mp3">> <<cacheaudio "forecast" "assets/audio/StrongerTogetherSFX_3 forecast.mp3">> <<cacheaudio "fortune" "assets/audio/StrongerTogetherSFX_4.5 Fortune.mp3">> <<cacheaudio "battle" "assets/audio/StrongerTogetherSFX_v2_5 battle_short.mp3">> <<cacheaudio "prep" "assets/audio/StrongerTogetherSFX_4 preparation.mp3">> <<cacheaudio "diceroll" "assets/audio/StrongerTogetherSFX_dice roll.mp3">> <<cacheaudio "diceshake" "assets/audio/StrongerTogetherSFX_dice shake.mp3">> <<cacheaudio "firemonster" "assets/audio/StrongerTogetherSFX_FireMonster.mp3">> <<cacheaudio "icemonster" "assets/audio/StrongerTogetherSFX_IceMonster.mp3">> <<cacheaudio "watermonster" "assets/audio/StrongerTogetherSFX_v2_WaterMonster.mp3">> <<cacheaudio "galemonster" "assets/audio/StrongerTogetherSFX_v2_WindMonster.mp3">> <<cacheaudio "success1" "assets/audio/StrongerTogetherSFX_Success 1.mp3">> <<cacheaudio "success2" "assets/audio/StrongerTogetherSFX_Success 2.mp3">> <<cacheaudio "success3" "assets/audio/StrongerTogetherSFX_Success 3.mp3">> <<cacheaudio "aftermath" "assets/audio/StrongerTogetherSFX_v2_6 aftermath.mp3">> <<cacheaudio "meow" "assets/audio/StrongerTogetherSFX_meow.mp3">>

<<set $showWallet to false>> <footer> <<link [img[assets/img/back-black.png]]>> <<goto $prevpass>> <</link>> /* <<link "W">> <<set $showWallet to true>> <<include "wallet">> <</link>> */ /* <<link [img[assets/img/for-black.png]]>> <<goto $nextpass>> <</link>> */ </footer>

<<set $showWallet to false>> <footer class="grid-item footer"> <<link [img[assets/img/back-black.png]]>> <<goto $prevpass>> <</link>> /* <<link "W">> <<set $showWallet to true>> <<goto "wallet">> <</link>> */ /* <<link [img[assets/img/for-black.png]]>> <<goto $nextpass>> <</link>> */ <div id="nextButtonContainer"> </div> </footer>

<<set $showWallet to false>> <footer class="grid-item footer"> <<link [img[assets/img/back-black.png]]>> <<goto $prevpass>> <</link>> <div id="nextButtonContainerQ"> </div> </footer>

<<set $showWallet to false>> <footer class="grid-item footer"> /* <<link [img[assets/img/back-black.png]]>> <<goto $prevpass>> <</link>> */ /* <<link "W">> <<set $showWallet to true>> <<goto "wallet">> <</link>> */ /* <div/> */ <div id="nextButtonContainer"> </div> </footer>

<<set $prevpass to "landing">> <<set $pass to "landing">> <<set $nextpass to "intro1">> <<set $withVoiceover to false>> <<set $playerchoices to { chosenmonsters: [], finalmonster: [], originalactions: [], chosenactions: [], diceroll:0, rolledagain:false, chosenactionstosave: [], originalactionstosave: [], changedactions:[], chosenwildcards: [], wildcards:0, score:0, percentage:0 }>> <<set $reducedVol to 0.6>> <<audio ":all" stop>> <audio src="assets/voiceover/strongertogethervo_0_1.mp3" autoplay >Audio is not supported on your device</audio> <main class="landing grid-wrapper split"> <div class="info-container grid-item cards"> <div class="inline-img-container"> <div class="inline-img-wrapper "> <img src="assets/img/logo-189.png" alt="Logo"/></div> </div> </div> <div class="grid-item explanation"> <h1>Welcome to Stronger Together</h1> <br/> <h2>A card game about community resilience </h2> <br/> <div> <<button "Enter">> <<goto $nextpass>> <</button>> </div> </div> </main> /* <<include "wallet">> */

<<addclass "body" "light">> /* <<include "headerIntro">> */ <main class="talking"> <div id="msgMount"></div> <<if $pass>> <<set $uniqueContent to $pass+"-text">> <<include $uniqueContent>> <<else>> No content provided. <</if>> </main> <<include "footeroptionappears">>

<header class="intro"> <h2>Stronger Together</h2> </header>

<<set $prevpass to "landing">> <<set $pass to "intro1">> <<set $nextpass to "intro1b">> <<audio ":all" "stop">> <audio src="assets/voiceover/strongertogethervo_0_2.mp3" autoplay>Audio is not supported on your device</audio> <<include "_templateIntro">>

<h2>Before you begin: </h2> <p>Lay out your cards as below.</p> <div class="inline-img-container"> <div class="inline-img-wrapper arcardhor"> <h3>Game Board</h3><img src="assets/img/board.png" alt="Demo Game Board"/> </div></div> <br/> <p>Choose someone to play your <span class="accent">facilitator</span>, they’ll lead you through the game.</p> <p>The facilitator can play, or sit on the outside, totally up to you. </p> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "intro1">> <<set $pass to "intro1b">> <<set $nextpass to "intro2">> <<audio ":all" "stop">> <audio src="assets/voiceover/strongertogethervo_0_3.mp3" autoplay>Audio is not supported on your device</audio> <<include "_templateIntro">>

<p>Turn the volume up on your device.</p> <br/> <p>Stronger Together has a voiceover which reads out the text on the screen. </p> <br/> <p>You can choose to play <span class="accent">With Voiceover</span>, or with <span class="accent">No Voiceover</span>. </p> <br/> <p>If you have no voiceover, your facilitator will need to read the text aloud. </p> <br/> <p>With both options there is a soundtrack that accompanies the game.</p> <p>If you would prefer no sound at all, please turn your volume down.</p> <br/><br/> <p>Play:</p> <<button "With Voiceover">> <<set $withVoiceover to true>> <<goto $nextpass>> <</button>> <br/><br/> <<button "No Voiceover">> <<set $withVoiceover to false>> <<goto $nextpass>> <</button>>

<<set $prevpass to "intro1b">> <<set $pass to "intro2">> <<set $nextpass to "intro3">> <<if $withVoiceover is true>> <<timed 1s>> <audio src="assets/voiceover/strongertogethervo_1_1+2.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <<audio "opening" "play" "loop">> <<else>> <<audio "opening" "play" "loop">> <</if>> <main class="landing grid-wrapper split"> <div class="info-container grid-item cards"> <div class="inline-img-container"> <div class="inline-img-wrapper "> <img src="assets/img/logo-189.png" alt="Logo"/></div> </div> </div> <div class="grid-item explanation"> <h2>This is Stronger Together.</h2> <br/> <p>A card game offering a 30 minute introduction to community resilience. </p> <p>It’s designed for communities of all kinds to play together. </p> <br/> <p>By community resilience we mean communities using resources, connections, skills and expertise, to help themselves prepare for, respond to and recover from disasters. </p> <p>This isn’t a game about a group of politicians around a table. </p> <p>It's about how communities themselves might embrace what they already have, and come together for their people and their place.</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "intro2">> <<set $pass to "intro3">> <<set $nextpass to "intro3b">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_2_1.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class="landing grid-wrapper split"> <div class="info-container grid-item cards"> <div class="inline-img-container"> <div class="inline-img-wrapper "> <img src="assets/img/cat.png" alt="Logo"/></div> </div> </div> <div class="grid-item explanation"> <p>You will play as neighbours on a single street - High Street - it’s the most common street name in the UK. </p> <p>High Street could be anywhere in the country. There are some houses, a block of flats, a couple of shops and a stray cat named Dot.</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "intro3">> <<set $pass to "intro3b">> <<set $nextpass to "playercards">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_2_2.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <<include "_templateIntro">>

<span id="line1"></span> <span id="line2"></span> <span id="line3"></span> <span id="line4"></span> <span id="line5"></span> <<timed 0.1s>> <<replace "#line1">><p>As the residents of High Street, the disaster you will face is...</p><</replace>> <</timed>> <<timed 3s>> <<replace "#line2">><<type 60ms>><p>...</p><</type>><</replace>> <</timed>> <<timed 4s>> <<replace "#line3">><<type 60ms>><p>...</p><</type>><</replace>> <</timed>> <<timed 5s>> <<replace "#line4">><h2>A MONSTER ATTACK!</h2><</replace>> <</timed>> <<timed 7.5s>> <<replace "#line5">> <br/> <p>The aim of this game is to prepare for, respond to and recover well from this attack. </p> <</replace>> <</timed>> <<timed 13s>> <<append "#line5">> <br/> <p>Good luck!</p> <</append>> <</timed>> <<timed 9s>> <<replace "#nextButtonContainer">> <<button "Let's Play">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "intro3">> <<set $pass to "playercards">> <<set $nextpass to "playercards-b">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_2_3.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class="grid-wrapper"> <div class="info-container grid-item cards"> <div class="inline-img-container"> <div class="inline-img-wrapper arcard"> <h3>Neighbour Cards</h3><img src="assets/img/Demo_Player_Card.png" alt="Player Card"/></div> </div> </div> <div class="grid-item explanation"> <p>Each player will play as a neighbour on High Street. </p> <p>We’ll start by getting to know you. </p> <br/> <p><i>Facilitator, deal out the <span class="accent">Neighbour Cards</span> to each player.</i> </p> <p>Leave the remaining Neighbour Cards in the pile. </p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "playercards">> <<set $pass to "playercards-b">> <<set $nextpass to "playercards-c">> <<audio ":all" "stop" >> <<if $withVoiceover is true>> <audio src="assets/voiceover/strongertogethervo_2_4.mp3" autoplay>Audio is not supported on your device</audio> <<audio "neighbour" "play" "loop">> <<else>> <<audio "neighbour" "play" "loop">> <</if>> <main > <br/> <div class="grid-item explanation"> <p>Your card will tell you about who you’re playing. </p> <p>You’ll find your house number and some interesting and peculiar facts and skills. </p> <p>You can choose the name for your character, it could be your own name, or a different one.</p> <br/> <p>Take a moment to get to know the person you are playing as.</p> </div> </main> <<include "footeroptionappears">> <<timed 5s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "playercards-b">> <<set $pass to "playercards-c">> <<set $nextpass to "monstercards-preintro">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_2_5.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <<timed 5s>> <<include "2headertimer">> <</timed>> <main class=" timer"> <br/> <div class="grid-item explanation"> <p>Take the time to introduce yourselves to your fellow neighbours on High Street. </p> <p>Share your house number, and your interesting and peculiar skills & facts. </p> <p><i>Facilitator, we recommend 2 minutes for this.</i> </p> </div> </main> <<include "footeroptionappears">>

<<set $seconds to 300>> <span id="countdown"></span> <<silently>> <<repeat 1s>> <<set $seconds to $seconds - 1>> <<if $seconds gt 0>> <<replace "#countdown">> <<if $seconds >= 60>> <<set _min to Math.floor($seconds / 60)>> <<set _sec to $seconds % 60>> <span class="secs">_min:<<if _sec lt 10>>0<</if>>_sec</span> <<else>> <span class="secs">$seconds </span> <</if>> <</replace>> <<else>> <<replace "#countdown">><strong>Time's up</strong><</replace>> <<stop>> <</if>> <</repeat>> <</silently>> /* <<timed 1s>> */ <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move On">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

/* <<audio "30s" "play" loop>> */ /* <<set $seconds to 1>> */ <<set $seconds to 180>> <span id="countdown"><span class="secs"></span> <span class="extra"></span></span> <<silently>> <<repeat 1s>> <<set $seconds to $seconds - 1>> <<if $seconds gt 0>> <<replace "#countdown">> <<if $seconds >= 60>> <<set _min to Math.floor($seconds / 60)>> <<set _sec to $seconds % 60>> <span class="secs">_min:<<if _sec lt 10>>0<</if>>_sec</span> <<else>> <span class="secs">$seconds </span> <</if>> <</replace>> <<else>> <<replace "#countdown">><strong>Time's up</strong><</replace>> <<stop>> <</if>> <</repeat>> <</silently>> <<timed 3s>> <<replace "#nextButtonContainer">> <<if $pass is "questions2">> <<button "End">> <<goto $nextpass>> <</button>> <<else>> <<button "Move On">> <<goto $nextpass>> <</button>> <</if>> <</replace>> <</timed>>

/* <<audio "30s" "play" loop>> */ /* <<set $seconds to 1>> */ <<set $seconds to 120>> <span id="countdown"><span class="secs"></span> <span class="extra"></span></span> <<silently>> <<repeat 1s>> <<set $seconds to $seconds - 1>> <<if $seconds gt 0>> <<replace "#countdown">> <<if $seconds >= 60>> <<set _min to Math.floor($seconds / 60)>> <<set _sec to $seconds % 60>> <span class="secs">_min:<<if _sec lt 10>>0<</if>>_sec</span> <<else>> <span class="secs">$seconds </span> <</if>> <</replace>> <<else>> <<replace "#countdown">><strong>Time's up</strong><</replace>> <<stop>> <</if>> <</repeat>> <</silently>> <<timed 3s>> <<replace "#nextButtonContainer">> <<if $pass is "questions2">> <<button "End">> <<goto $nextpass>> <</button>> <<else>> <<button "Move On">> <<goto $nextpass>> <</button>> <</if>> <</replace>> <</timed>>

/* <<set $seconds to 3>> */ <<set $seconds to 300>> <span id="countdown"><span class="secs"></span> <span class="extra"></span></span> <<silently>> <<repeat 1s>> <<set $seconds to $seconds - 1>> <<if $seconds gt 0>> <<replace "#countdown">> <<if $seconds >= 60>> <<set _min to Math.floor($seconds / 60)>> <<set _sec to $seconds % 60>> <span class="secs">_min:<<if _sec lt 10>>0<</if>>_sec</span> <<else>> <span class="secs">$seconds </span> <</if>> <</replace>> <<else>> <<replace "#countdown">><strong>Time's up</strong><</replace>> <<stop>> <</if>> <</repeat>> <</silently>> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move On">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "playercards-c">> <<set $pass to "monstercards-preintro">> <<set $nextpass to "monstercards-preintrob">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_2_6.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class=""> <div class="explanation"> <p>Excellent, you have now met some of your neighbours.</p> <p>For this game, you, as a group, are playing as the representatives of High Street.</p> <p>You will be responsible for helping the whole street prepare for the disaster that looms on the horizon...</p> <p>the Monster that is coming.</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "monstercards-preintro">> <<set $pass to "monstercards-preintrob">> <<set $nextpass to "monstercards-intro">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_2_7.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class=""> <div class="explanation"> <p>You have chosen to be this representative.</p> <p>Actually, let’s be honest... you’re the representatives because you’re the people who turned up to the community planning meeting. </p> <p>There are other people on High Street too, doors not yet opened. </p> <p>Any choice you make will impact your neighbours as much as it impacts all of you. </p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "monstercards-preintrob">> <<set $pass to "monstercards-intro">> <<set $nextpass to "forecasttrans">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_3_1.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class="grid-wrapper"> <div class="info-container grid-item cards"> <div class="inline-img-container"> <div class="inline-img-wrapper arcard"> <img src="assets/img/monster.png" alt="Monsters"/> </div></div> <br/> </div> <div class="grid-item explanation"> <h2>Now to the attack... </h2> <p>There are four possible Monsters that might strike: </p> <h3>Gale, <span class="unbold">a Monster made of wind</span></h3> <h3>Drench, <span class="unbold" >a Monster made of water</span> </h3> <h3>Inferno, <span class="unbold">a Monster made of heat & fire</span></h3> <h3>Crystal, <span class="unbold">a Monster made of snow & ice</span></h3> <p>Before you decide how to prepare for the Monster attack, you’re going to get a forecast. </p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "monstercards-intro">> <<set $pass to "forecasttrans">> <<set $nextpass to "monstercards">> <<audio ":all" stop>> <<if $withVoiceover is true>> <<audio "forecast" "play" "loop">> <<else>> <<audio "forecast" "play" "loop">> <</if>> <main class="cards-selection"> <div class="info-container grid-item cards fadeIn10 fortunetrans"> <div class="inline-img-container"> <div class="inline-img-wrapper arcardbig"> <img src="assets/img/forecast.png" alt="Forecast"/> </div> </div> </div> </main> <<timed 10s>> <<goto $nextpass>> <</timed>>

<<set $prevpass to "monstercards-intro">> <<set $pass to "monstercards">> <<set $nextpass to "chosenMonsterForecast-intro">> <<if $withVoiceover is true>> <<timed 0.1s>> <audio src="assets/voiceover/strongertogethervo_3_2.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <<timed 7s>> <audio src="assets/voiceover/strongertogethervo_3_3.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class=""> <div class="explanation"> <p>Shuffle the Monster Cards and draw 2. </p> <p>Then, select the cards you drew below. </p> </div> <h2>Chosen Monsters: <span id="chosenMonsterMount"><<print $playerchoices.chosenmonsters>></span></h2> <p id="errorMsg" style="color: white;"></p>  <br/> <div class="cards-selection four">  <div id="galeChoice" class="card-selection-item arcard"> <<link [img[assets/img/Demo_Galeforecast.png]]>> <<if $playerchoices.chosenmonsters.includes("Gale")>> <<set $playerchoices.chosenmonsters.delete("Gale")>> <<toggleclass "#galeChoice" "chosen">> <<replace "#errorMsg">><<print "">><</replace>>  <<elseif $playerchoices.chosenmonsters.length < 2>> <<set $playerchoices.chosenmonsters.push("Gale")>> <<toggleclass "#galeChoice" "chosen">> <<replace "#errorMsg">><<print "">><</replace>>  <<else>> <<replace "#errorMsg">><<print "You can only choose 2 monsters!">><</replace>> <</if>> <<include "checkChosenMonsterCards">> <</link>> </div>  <div id="infernoChoice" class="card-selection-item arcard"> <<link [img[assets/img/Demo_Infernoforecast.png]]>> <<if $playerchoices.chosenmonsters.includes("Inferno")>> <<set $playerchoices.chosenmonsters.delete("Inferno")>> <<toggleclass "#infernoChoice" "chosen">> <<replace "#errorMsg">><<print "">><</replace>>  <<elseif $playerchoices.chosenmonsters.length < 2>> <<set $playerchoices.chosenmonsters.push("Inferno")>> <<toggleclass "#infernoChoice" "chosen">> <<replace "#errorMsg">><<print "">><</replace>>  <<else>> <<replace "#errorMsg">><<print "You can only choose 2 monsters!">><</replace>> <</if>> <<include "checkChosenMonsterCards">> <</link>> </div>  <div id="drenchChoice" class="card-selection-item arcard"> <<link [img[assets/img/Demo_Drenchforecast.png]]>> <<if $playerchoices.chosenmonsters.includes("Drench")>> <<set $playerchoices.chosenmonsters.delete("Drench")>> <<toggleclass "#drenchChoice" "chosen">> <<replace "#errorMsg">><<print "">><</replace>>  <<elseif $playerchoices.chosenmonsters.length < 2>> <<set $playerchoices.chosenmonsters.push("Drench")>> <<toggleclass "#drenchChoice" "chosen">> <<replace "#errorMsg">><<print "">><</replace>>  <<else>> <<replace "#errorMsg">><<print "You can only choose 2 monsters!">><</replace>> <</if>> <<include "checkChosenMonsterCards">> <</link>> </div>  <div id="crystalChoice" class="card-selection-item arcard"> <<link [img[assets/img/Demo_Crystalforecast.png]]>> <<if $playerchoices.chosenmonsters.includes("Crystal")>> <<set $playerchoices.chosenmonsters.delete("Crystal")>> <<toggleclass "#crystalChoice" "chosen">> <<replace "#errorMsg">><<print "">><</replace>>  <<elseif $playerchoices.chosenmonsters.length < 2>> <<set $playerchoices.chosenmonsters.push("Crystal")>> <<toggleclass "#crystalChoice" "chosen">> <<replace "#errorMsg">><<print "">><</replace>>  <<else>> <<replace "#errorMsg">><<print "You can only choose 2 monsters!">><</replace>> <</if>> <<include "checkChosenMonsterCards">> <</link>> </div> </div> <br/> <p>The Monster attack will be one of these two cards, but it’s a 50 / 50 chance. </p> </main> <<include "footeroptionappears">> <<timed 0.1s>> <<include "checkChosenMonsterCards">> <</timed>>

<<if $playerchoices.chosenmonsters.includes("Gale")>> <<addclass "#galeChoice" "chosen">> <</if>> <<if $playerchoices.chosenmonsters.includes("Drench")>> <<addclass "#drenchChoice" "chosen">> <</if>> <<if $playerchoices.chosenmonsters.includes("Inferno")>> <<addclass "#infernoChoice" "chosen">> <</if>> <<if $playerchoices.chosenmonsters.includes("Crystal")>> <<addclass "#crystalChoice" "chosen">> <</if>> <<if $playerchoices.chosenmonsters.length === 2>> <<timed 0.1s>> <<replace "#nextButtonContainer">> <<button "Confirm and move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <</if>> <<timed 0.1s>> <<replace "#chosenMonsterMount">> $playerchoices.chosenmonsters <</replace>> <</timed>>

<<set $prevpass to "monstercards">> <<set $pass to "chosenMonsterForecast-intro">> <<set $nextpass to "chosenMonsterForecast">> <<audio ":all" stop>> <<if $withVoiceover is true>> <<timed 2s>> <audio src="assets/voiceover/strongertogethervo_4_1.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <<audio "prep" volume 1 fadeoverto 4 $reducedVol loop>> <<else>> <<audio "prep" "play" "loop">> <</if>> <main class="grid-wrapper split"> <div class="inline-img-container cards-selection grid-item cards wrap"> <div class="inline-img-wrapper arcard"> <img src="assets/img/preparer.png" alt="Prepare Card"/> </div> <div class="inline-img-wrapper arcard"> <img src="assets/img/connect.png" alt="Connect Card"/> </div> </div> <div class="grid-item explanation"> <p>Now you know what could be coming, there is a chance to prepare. </p> <p>There are different actions you might take to get ready for the Monster attack. </p> <p><span class="accent">Prepare</span> actions, physical preparations for neighbours to do at home or on the street. </p> <p><span class="accent">Connect</span> actions, connecting to your neighbours and local community. </p> <br/> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "chosenMonsterForecast-intro">> <<set $pass to "chosenMonsterForecast">> <<set $nextpass to "actions">> <<if $withVoiceover is true>> <<timed 1s>> <audio src="assets/voiceover/strongertogethervo_4_2.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <<timed 5s>> <<include "headertimer">> <</timed>> <main class="timer grid-wrapper split"> <div class=" grid-item explanation"> <p><i>Facilitator, lay out the <span class="accent">Prepare</span> and <span class="accent">Connect</span> actions on the table.</i></p> <p>You need to choose FIVE actions to prepare for the Monster attack. </p> <p>A reminder of the Monsters that might strike...</p> <br/> <<timed 10s>> <p>The clock is ticking.</p> <p>You’ve got five minutes to choose your actions.</p> <</timed>> </div> /* <div class="grid-item cards"> */ <<include "chosenmonstersforecastdisplay">> /* </div> */ <br/> </main> <<include "footeroptionappears">>

<<set $img1 to "assets/img/" + "Demo_" + $playerchoices.chosenmonsters[0] + ".png">> <<set $img2 to "assets/img/" + "Demo_" + $playerchoices.chosenmonsters[1] + ".png" >> <div class="cards-selection"> <div class="card-selection-item arcard"> [img[$img1]] </div> <div class="card-selection-item arcard"> [img[$img2]] </div> </div>

<<set $prevpass to "chosenMonsterForecast">> <<set $pass to "actions">> <<set $nextpass to "postactionchoice">> <<set $actionsoptions to [ {type: "prepare", letter:"A" , actionnum: 1, text: "Lay out some salt or grit.", id:1}, {type: "prepare", letter:"B" , actionnum: 2, text: "Gather water and ice." , id:2}, {type: "prepare", letter:"C" , actionnum: 3, text: "Clear away or secure outdoor objects.", id:3}, {type: "prepare", letter:"D" , actionnum: 4, text: "Set up barriers, blocks, and absorbent pads.", id:4}, {type: "prepare", letter:"E" , actionnum: 5, text: "Gather an emergency kit.", id:5}, {type: "prepare", letter:"F" , actionnum: 6, text: "Have a plan.", id:6}, {type: "prepare", letter:"G" , actionnum: 7, text: "Move precious belongings inside homes.", id:7}, {type: "connect", letter: "H", actionnum: 1, text: "Set up a messaging group.", id:8}, {type: "connect", letter: "I", actionnum: 2, text: "Go door-knocking.", id:9}, {type: "connect", letter: "J", actionnum: 3, text: "Connect to the community centre.", id:10}, {type: "connect", letter: "K", actionnum: 4, text: "Connect to the local school or faith space.", id:11}, {type: "connect", letter: "L", actionnum: 5, text: "Sign up for alerts and warnings.", id:12} ]>> <<if $withVoiceover is true>> <audio src="assets/voiceover/strongertogethervo_4_4.mp3" autoplay>Audio is not supported on your device</audio> <<else>> <</if>> <main class=""> <div class="explanation"> <p>Take a moment to read out your choices.</p> <p>Then, select them below. </p> </div> <<include "actionslist">> <br/> <<button "Reset">> <<set $playerchoices.chosenactions to []>> <<goto "actions">> <</button>> /* 5 Chosen Actions: <div id="chosenActionsMount"></div> */ </main> /* <<include "wallet">> */ <<include "footeroptionappears">> <<timed 0.1s>> <<include "checkChosenActions">> <</timed>>

<div class="actions-list"> <<for _i to 0; _i lt $actionsoptions.length; _i++>> <<capture _i>> <<set $text to ($actionsoptions[_i].text)>> <div class="actions-item-wrapper"> <div sc-eval:class="'actions-item actions-item' + ($actionsoptions[_i].id)" sc-eval:id="'action' + [_i]" sc-eval:data-id="'action' + [_i]"> <h3>$actionsoptions[_i].letter</h3> <div> <h4>$text</h4> <div sc-eval:id="'chooseBtn'+ $actionsoptions[_i].id" class="chooseBtn"> <<button "> Choose">> /* Remove btn once its clicked */ <<set $btnId to "#chooseBtn" + $actionsoptions[_i].id >> <<replace $btnId>> <</replace>> <<run $playerchoices.chosenactions.push($actionsoptions[_i].id)>> <<timed 0.1s>> <<include "checkChosenActions">> <</timed>> <</button>> </div> </div> </div> </div> <</capture>> <</for>> </div> /* <<include "wallet">> */

<<for _i to 0; _i lt $actionsoptions.length; _i++>> <<if $playerchoices.chosenactions.includes($actionsoptions[_i].id)>> <<set $class to ".actions-item" + (_i+1) >> <<addclass $class "chosen">> <</if>> <</for>> <<if $playerchoices.chosenactions.length < 5>> <<replace "#nextButtonContainer">> <div class="hint" id="hint"><span>Choose 5 actions</span></div> <</replace>> <<elseif $playerchoices.chosenactions.length === 5>> <<timed 0.1s>> /* Disable buttons */ <<replace ".chooseBtn">> <</replace>> <<replace "#nextButtonContainer">> <<button "Confirm and move on">> /* <<run $playerchoices.chosenactions.push($playerchoices.chosenactionstosave)>> */ <<goto $nextpass>> <</button>> <</replace>> <</timed>> <</if>>

<<set $prevpass to "actions">> <<set $pass to "postactionchoice">> <<set $nextpass to "fortunetrans">> <<if $withVoiceover is true>> <audio src="assets/voiceover/strongertogethervo_4_5.mp3" autoplay>Audio is not supported on your device</audio> <<else>> <</if>> <main class=""> <div class="explanation"> <p>Place out the action cards you have chosen on the table. </p> <p>Put the remaining action cards face down in a discard pile. </p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "postactionchoice">> <<set $pass to "fortunetrans">> <<set $nextpass to "predice">> <<audio ":all" stop>> <<if $withVoiceover is true>> <<audio "fortune" "play" volume 1 "loop">> <<else>> <<audio "fortune" "play" "loop">> <</if>> <<set $reducedVol to 0.6>> <main class="cards-selection"> <div class="info-container grid-item cards fadeIn10 fortunetrans"> <div class="inline-img-container"> <div class="inline-img-wrapper arcardbig"> <img src="assets/img/fortunes.png" alt="Fortune"/> </div> </div> </div> </main> <<include "footeroptionappears">> <<timed 10s>> <<goto $nextpass>> <</timed>>

<<set $prevpass to "actions">> <<set $pass to "predice">> <<set $nextpass to "diceresults">> <<set $diceoptions to [ {num:1, text1: `Things aren’t great. Local resources are depleted, so minimal thought and effort has gone into preparing for disaster. Because of poor planning and lack of investment, you’re facing the Monster attack entirely by yourselves. You won’t receive any <span class='accent'>Good Fortune Tokens</span>. Instead, during the attack you’ll face <span class='accent'>one Unpredictable Outcome</span>.`, text2:`You’ll need to come together as a street, and one of you will use your skills and resources to respond. Your facilitator will lead you through this when the moment comes.`, wildcards: 0, changedactions: 2}, {num:2, text1: `Things aren’t great. Local resources are depleted, so minimal thought and effort has gone into preparing for disaster. Because of poor planning and lack of investment, you’re facing the Monster attack entirely by yourselves. You won’t receive any <span class='accent'>Good Fortune Tokens</span>. Instead, during the attack you’ll face <span class='accent'>one Unpredictable Outcome</span>.`, text2:`You’ll need to come together as a street, and one of you will use your skills and resources to respond. Your facilitator will lead you through this when the moment comes.`, wildcards: 0, changedactions: 2}, {num:3, text1: `You are fortunate. Your local council has had the money and resources to put some time into disaster preparation, so there’s extra help available. `, text2:`During the Monster attack you’ll access <span class='accent'> one Good Fortune Token</span>.`, wildcards: 1, changedactions: 0}, {num:4, text1: `You are fortunate. Your local council has had the money and resources to put some time into disaster preparation, so there’s extra help available. `, text2:`During the Monster attack you’ll access <span class='accent'> one Good Fortune Token</span>.`, wildcards: 1, changedactions: 0}, {num:5, text1: `You are very fortunate. Your local council has had the money and resources to put some time into disaster preparation, so there’s extra help available.`, text2:`During the Monster attack you’ll access <span class='accent'>two Good Fortune Tokens</span>.`, wildcards: 2, changedactions: 0}, {num:6, text1: `You are very fortunate. Your local council has had the money and resources to put some time into disaster preparation, so there’s extra help available.`, text2:`During the Monster attack you’ll access <span class='accent'>two Good Fortune Tokens</span>.`, wildcards: 2, changedactions: 0} ] >> <<set $diceroll to "">> <<if $withVoiceover is true>> <<audio "fortune" volume $reducedVol>> <audio src="assets/voiceover/strongertogethervo_5_1.mp3" autoplay>Audio is not supported on your device</audio> <<else>> <</if>> <main class="grid-wrapper"> <div class="info-container grid-item cards"> <div class="inline-img-container"> <div class="inline-img-wrapper arcard"> <img src="assets/img/fortunes.png" alt="Fortune Card"/></div> </div> </div> <div class="explanation grid-item "> <br/> <p>You know little about the High Street you live on. </p> <p>But we all know that the world is unfair. </p> <br/> <p>Life on different High Streets varies wildly across the UK. </p> <br/> <p>Before the Monster arrives, we’re going to find out just how unfair things are: how fortunate this High Street is. </p> <p>To do this you’ll roll a... [virtual] die. </p> <br/> <br/> <div> <<button "Roll">> <<audio "diceshake" "play">> <<set $diceroll to random(0,5) >> <<timed 1.5s>> <<goto "rolling">> <</timed>> <</button>> </div> </div> </main> /* <<include "wallet">> */ <<include "footer">>

<<audio "diceroll" "play">> <main class="maindice"> <div class="dice roll"> <div class="dot top-left"></div> <div class="dot top-right"></div> <div class="dot center"></div> <div class="dot bottom-left"></div> <div class="dot bottom-right"></div> </div> <h2>Rolling...</h2> </main> <<timed 3.5s>><<goto $nextpass>><</timed>>

<<if $diceoptions[$diceroll].num === 1 or $diceoptions[$diceroll].num === 2>> <<timed 0.1s>> <<replace "#audio">> <audio src="assets/voiceover/strongertogethervo_5_2_thingsarentgreat.mp3" autoplay >Audio is not supported on your device</audio> <</replace>> <</timed>> <<elseif $diceoptions[$diceroll].num === 3 or $diceoptions[$diceroll].num === 4>> <<timed 0.1s>> <<replace "#audio">> <audio src="assets/voiceover/strongertogethervo_5_2_fortunate.mp3" autoplay >Audio is not supported on your device</audio> <</replace>> <</timed>> <<elseif $diceoptions[$diceroll].num === 5 or $diceoptions[$diceroll].num === 6>> <<timed 0.1s>> <<replace "#audio">> <audio src="assets/voiceover/strongertogethervo_5_2_veryfortunate.mp3" autoplay >Audio is not supported on your device</audio> <</replace>> <</timed>> <</if>>

<<if $diceoptions[$diceroll].num === 1 or $diceoptions[$diceroll].num === 2>> <<timed 33.5s>> <<replace "#audio">> <audio src="assets/voiceover/strongertogethervo_5_3.mp3" autoplay >Audio is not supported on your device</audio> <</replace>> <</timed>> <<elseif $diceoptions[$diceroll].num === 3 or $diceoptions[$diceroll].num === 4>> <<timed 16.5s>> <<replace "#audio">> <audio src="assets/voiceover/strongertogethervo_5_3.mp3" autoplay >Audio is not supported on your device</audio> <</replace>> <</timed>> <<elseif $diceoptions[$diceroll].num === 5 or $diceoptions[$diceroll].num === 6>> <<timed 17.5s>> <<replace "#audio">> <audio src="assets/voiceover/strongertogethervo_5_3.mp3" autoplay >Audio is not supported on your device</audio> <</replace>> <</timed>> <</if>>

<<set $prevpass to "predice">> <<set $pass to "diceresults">> <<set $nextpass to "forecast">> <<if $withVoiceover is true>> <<timed 0.1s>> <<include "choosediceaudio">> <<include "chosetimeafterdiceaudio">> <</timed>> <</if>> <div id="audio"></div> <main> <div class="result grid-wrapper"> <div class="grid-item explanation"> <h2>You rolled a $diceoptions[$diceroll].num</h2> <p>$diceoptions[$diceroll].text1</p> <br/> <div id="proposedChangeMount"></div> <br/> <p> $diceoptions[$diceroll].text2</p> <br/> </div> <<if $diceoptions[$diceroll].wildcards isnot 0>> <div class="inline-img-container wildcards grid-item crd"> <<for _i to 0; _i lt $diceoptions[$diceroll].wildcards; _i++>> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Card"/> </div> <</for>> </div> <</if>> </div> <br/> <br/> <div> <h2>Are you happy with your fortune?</h2> <p>In the real world fortune is very hard to change. </p> <p>But since this is a game... Would you like to roll again? </p> <<button "Roll again">> <<audio "diceshake" "play">> <<timed 1s>> <<audio "diceroll" "play">> <</timed>> <<timed 2s>> <<set $rolledagain to true>> <<set $diceroll to random(0,5) >> <<goto "diceresults">> <</timed>> <</button>> </div> </main> <<include "footeroptionappears">> <<timed 0.1s>> <<replace "#nextButtonContainer">> <<button "Confirm and move on">> <<set $playerchoices.diceroll to $diceoptions[$diceroll].num>> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<div class="wallet"> <h2>Wallet</h2> <span>Monsters: $playerchoices.chosenmonsters</span> <span>Final Monster: $playerchoices.finalmonster</span> <span>Original Actions: $playerchoices.originalactions</span> <span>Chosen Actions: $playerchoices.chosenactions</span> <span>Wildcards: $playerchoices.wildcards</span> <span>Diceroll: $playerchoices.diceroll</span> <span>Total Score: $playerchoices.score</span> </div> <<script>> console.log(State.variables) <</script>> <<print typeof $playerchoices>> <<print JSON.stringify($playerchoices)>> /* <<include "footerwallet">> */

<<set $prevpass to "diceresults">> <<set $pass to "forecast">> <<set $nextpass to "storyintro">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_6_1.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class="grid-wrapper split"> <div class="explanation grid-item"> <h2>Disaster looms.</h2> <br/> <p>The Monster attack is moments away and we can finally see which Monster is coming. </p> <br/> <p><i>Facilitator, shuffle the two Monster cards and hold them out upside down.</i> </p> <p>One player, choose a card to reveal the Monster you will face. </p> <br/> <p><span class="accent">Then, select this Monster below. </span> </p> </div> <<include "choosefinalmonster">> <br/> </main> /* <<include "wallet">> */ <<include "footeroptionappears">>

<<set $img1 to "assets/img/" + "Demo_" + $playerchoices.chosenmonsters[0] + "forecast.png" >> <<set $img2 to "assets/img/" + "Demo_" + $playerchoices.chosenmonsters[1] + "forecast.png" >> <div class="cards-selection grid-item cards"> <div class="inline-img-wrapper card-selection-item arcard" id="card1"> <<link [img[$img1]]>> <<if $playerchoices.finalmonster == $playerchoices.chosenmonsters[0]>> <<set $playerchoices.finalmonster to "">>  <<else>> <<set $playerchoices.finalmonster to $playerchoices.chosenmonsters[0]>>  <<removeclass "#card2" "chosen">> <</if>> <<include "checkFinalMonsterChoice">> <</link>> </div> <div class="inline-img-wrapper card-selection-item arcard" id="card2"> <<link [img[$img2]]>> <<if $playerchoices.finalmonster == $playerchoices.chosenmonsters[1]>> <<set $playerchoices.finalmonster to "">>  <<else>> <<set $playerchoices.finalmonster to $playerchoices.chosenmonsters[1]>>  <<removeclass "#card1" "chosen">> <</if>> <<include "checkFinalMonsterChoice">> <</link>> </div> </div> <<include "checkFinalMonsterChoice">>

<<timed 0.1s>> <<for _i to 0; _i lt 2; _i++>> <<if $playerchoices.finalmonster === $playerchoices.chosenmonsters[0]>> <<set _id to "#card1" >> <<addclass _id "chosen">> <<elseif $playerchoices.finalmonster === $playerchoices.chosenmonsters[1]>> <<set _id to "#card2" >> <<addclass _id "chosen">> <</if>> <</for>> <</timed>> <<timed 0.1s>> <<replace "#nextButtonContainer">> <div class="hint" id="hint"><span>Choose 1 Monster</span></div> <</replace>> <</timed>> <<if $playerchoices.finalmonster != "">> <<timed 0.1s>> <<replace "#nextButtonContainer">> <<button "Confirm and move on">> <<include "workOutScore">> <<timed 0.1s>> <<goto $nextpass>> <</timed>> <</button>> <</replace>> <</timed>> <</if>>

/* There is one point available for every action card selected, so every player / game should be getting a score of 5 / 10 as a minimum. Then for each monster there are 6 optimal choices. For each of these selected, 1 should be added to the score. */ <<set _baseScore = $playerchoices.chosenactions.length>> <<set _optimalActions = { "Gale": [3, 5, 7, 8, 10, 12], "Inferno": [2, 5, 6, 8, 9, 11], "Drench": [4, 6, 7, 8, 11, 12], "Crystal": [1, 5, 6, 9, 10, 11] }>> <<set _finalMonster = $playerchoices.finalmonster>> <<set _optimalForMonster = _optimalActions[_finalMonster]>> <<set _bonusScore = 0>> <<print "includes:">> <<print $playerchoices.chosenactions>> <<for _i to 0; _i lt 5; _i++>> <<if _optimalForMonster.includes($playerchoices.chosenactions[_i])>> <<print "includes:" + $playerchoices.chosenactions[_i]>> <<set _bonusScore += 0.8>> <</if>> <</for>> <<set _totalScore = _baseScore + _bonusScore>> <<set _percentage = Math.round((_totalScore / 10) * 100)>> <<set $playerchoices.score = _totalScore>> <<set $playerchoices.percentage = _percentage>>

<<set $prevpass to "forecast">> <<set $pass to "storyintro">> <<set $nextpass to "">> <<include "choosemonsterpath">> <<timed 0.1s>> /* <<audio ":all" "stop" >> */ <<if $withVoiceover is true>> <<audio ":all" stop>> <<audio "forecast" volume 1 fadeoverto 4 $reducedVol loop>> <<timed 1s>> <<audio $audioMonster "play">> <</timed>> <<timed 3s>> <audio src="assets/voiceover/strongertogethervo_6_2.mp3" autoplay >Audio is not supported on your device</audio> <</timed>> <<else>> <<audio ":all" stop>> <<audio "forecast" "play">> <<audio $audioMonster "play">> <</if>> <</timed>> <<set $imgfinalmonster to "assets/img/" + "Demo_" + $playerchoices.finalmonster + ".png">> <main class="grid-wrapper"> <div class="grid-item explanation"> <h2>The Monster closes in on High Street. </h2> <h3>We’re going to uncover how this attack plays out. </h3> </div> <br/> <div class="inline-img-container grid-item cards"> <div class="inline-img-wrapper arcardbig"> [img[$imgfinalmonster]] </div></div> <<timed 2s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> </main> <<include "footeroptionappears">>

<<if $playerchoices.finalmonster is "Gale">> <<set $nextpass to "galeintro">> <<set $audioMonster to "galemonster">> <</if>> <<if $playerchoices.finalmonster is "Crystal">> <<set $nextpass to "crystalintro">> <<set $audioMonster to "icemonster">> <</if>> <<if $playerchoices.finalmonster is "Inferno">> <<set $nextpass to "infernointro">> <<set $audioMonster to "firemonster">> <</if>> <<if $playerchoices.finalmonster is "Drench">> <<set $nextpass to "drenchintro">> <<set $audioMonster to "watermonster">> <</if>>

<<set $prevpass to "storyintro">> <<set $pass to "galeintro">> <<set $nextpass to "galestory">> <<set $storyMonsterNeeded to "GALE">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <p> Gale swirls into High Street, moving faster than anticipated. </p> <p>Even inside with all doors and windows shut, you can hear her whistling, rattling, slamming, desperate to get in. </p> <p>Thanks to your choices, you manage <span class="accent">$playerchoices.percentage%</span> of Gale’s impacts.</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseIntroAudio()>> <</if>> <</timed>>

<<set $prevpass to "galeintro">> <<set $pass to "galestory">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $nextpass to "gale-poststory">> <<else>> <<set $nextpass to "galefortune">> <</if>> <<set $storyAudioNeeded to []>> <<set $storyMonsterNeeded to "GALE">> <<timed 0.1s>> <<if $withVoiceover is true>> <<audio "success1" "play">> <<else>> <<audio "success1" "play">> <</if>> <</timed>> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <<if $playerchoices.chosenactions.includes(12)>> <<run $storyAudioNeeded.push(12)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/12.png" alt="action card"/> </div> <p>Everyone is warned about Gale's arrival in good time. The alert includes up to date guidance, and no neighbours are caught out by outdated methods. </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(8)>> <<run $storyAudioNeeded.push(8)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/8.png" alt="action card"/> </div> <div> <p>You set up a messaging chat, which connects you to some of your neighbours you are yet to meet. </p> <p>Turn over half of the face down neighbour cards. </p> <p>You can include these neighbours in your preparations, and later in your recovery. You might have skills to exchange, or ways to support one another. </p> </div> </div> <</if>> <<if $playerchoices.chosenactions.includes(3)>> <<run $storyAudioNeeded.push(3)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/3.png" alt="action card"/> </div> <p>Gale bangs at the doors of sheds, and pulls at the cables you’ve tied, but nothing escapes. Your neighbours are safe from flying debris! </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(7)>> <<run $storyAudioNeeded.push(7)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/7.png" alt="action card"/> </div> <p>Gale rattles at the windows, and one shatters in its frame. Fortunately, you have moved all the furniture away, and kept the area clear. Nothing is damaged and everyone is safe.</p> </div> <</if>> <<if $playerchoices.chosenactions.includes(5)>> <<run $storyAudioNeeded.push(5)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/5.png" alt="action card"/> </div> <p>Gale attacks the electricity supply and there is a 24h outage. You’re prepared: you have food, water, a first aid kit, and a wind up radio to stay up to date. Phew!</p> </div> <</if>> <<if $playerchoices.chosenactions.includes(10)>> <<run $storyAudioNeeded.push(10)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/10.png" alt="action card"/> </div> <p>Towards the end of Gale’s visit, resources run low. You turn to the community centre. Several neighbours run out of food, but the community centre’s food bank makes sure everyone is well fed.</p> </div> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseStoryAudio()>> <</if>> <</timed>>

<<set $prevpass to "galestory">> <<set $pass to "galefortune">> <<set $nextpass to "gale-poststory">> <<set $storyMonsterNeeded to "GALE">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <div id="mount"></div> <<if $playerchoices.diceroll == 3 or $playerchoices.diceroll == 4>> <<timed 0.1s>> <<replace "#mount">> <h2>Let's see how your good fortune plays out. </h2> <p>You get a Good Fortune Token: </p> <div class="inline-img-container wildcards"> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> </div> <p>In the days following Gale’s visit the fire service are sent to High Street. They clear trees and debris, ensuring all key roads can be accessed and no properties remain at risk. </p> <</replace>> <</timed>> <</if>> <<if $playerchoices.diceroll == 5 or $playerchoices.diceroll == 6>> <<timed 0.1s>> <<replace "#mount">> <h2>Let's see how your good fortune plays out. </h2> <p>You get two Good Fortune Tokens: </p> <div class="inline-img-container wildcards"> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> </div> <p> In the days following Gale’s visit the fire service are sent to High Street. They clear trees and debris, ensuring all key roads can be accessed and no properties remain at risk. </p> <p>Your local councillor also commits to rebuilding some of the damaged public infrastructure. They say everything will be fixed in the next six months. You decide you’ll wait and see. </p> <</replace>> <</timed>> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseFortuneAudio()>> <</if>> <</timed>>

<<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $prevpass to "galestory">> <<else>> <<set $prevpass to "galefortune">> <</if>> <<set $pass to "gale-poststory">> <<set $nextpass to "galeimpacts">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_7_GALE_4.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class=""> <div class="explanation"> <p>Unfortunately, not everything goes as well. </p> <p>Due to the choices you made, there are some challenges you have to face.</p> <p>Here are Gale’s impacts you’re left to contend with...</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "gale-poststory">> <<set $pass to "galeimpacts">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $nextpass to "galefortuneimpacts">> <<else>> <<set $nextpass to "recoverytrans">> <</if>> <<set $impactsAudioNeeded to []>> <<set $storyMonsterNeeded to "GALE">> <<timed 0.1s>> /* <<audio ":all" "stop" >> */ <<if $withVoiceover is true>> <<audio "success2" "play">> <<else>> <<audio "success2" "play">> <</if>> <</timed>> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <<if !$playerchoices.chosenactions.includes(12)>> <<run $impactsAudioNeeded.push(12)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/12.png" alt="action card"/> </div> <p>You didn’t sign up for alerts, and news of Gale’s arrival is contradictory and confusing. One neighbour ends up stuck in their car unable to get home. As Gale retreats they are left shaken and scared. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(8)>> <<run $impactsAudioNeeded.push(8)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/8.png" alt="action card"/> </div> <div> <p>You don’t set up a messaging group, and so you aren’t able to connect to several neighbours. </p> <p><i>Turn over half of the remaining face down neighbour cards. </i></p> <p>You can’t include these neighbours in your preparations or recovery, and you’re not able to provide support to one another. </p> </div> </div> <</if>> <<if !$playerchoices.chosenactions.includes(3)>> <<run $impactsAudioNeeded.push(3)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/3.png" alt="action card"/> </div> <p>Gale bangs at the doors of sheds, lifting chairs and a trampoline into the air. One neighbour is hit by a flying parasol and goes to hospital. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(7)>> <<run $impactsAudioNeeded.push(7)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/7.png" alt="action card"/> </div> <p>Gale rattles at the windows, and one shatters in its frame. No one is hurt, but a TV is knocked over as the pane falls in, its screen is smashed and the table beneath is unusable.</p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(5)>> <<run $impactsAudioNeeded.push(5)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/5.png" alt="action card"/> </div> <p>Gale attacks the electricity supply and there is a 24h outage. Neighbours are unprepared: they don’t have enough blankets or jumpers to stay warm, and none of you have as many tins of beans as you thought. It’s a shock. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(10)>> <<run $impactsAudioNeeded.push(10)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/10.png" alt="action card"/> </div> <p>Resources run low, and you have nowhere to turn. Several neighbours run out of food. They are left hungry. </p> </div> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseImpactsAudio()>> <</if>> <</timed>>

<<set $prevpass to "galeimpacts">> <<set $pass to "galefortuneimpacts">> <<set $nextpass to "recoverytrans">> <<set $storyMonsterNeeded to "GALE">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <div id="mount"></div> <<timed 0.1s>> <<replace "#mount">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <p>Gale retreats and leaves what you can only call a rather large mess...</p> <br/> <h2>Dot, the stray cat, is stuck between a broken fence and some fallen trees. </h2> <br/> <p>Due to your low fortune, there is no councillor to turn to. But you do have each other! </p> <br/> <p>You will use your skills to take action on this <span class="accent">Unpredictable Outcome.</span> </p> <p>Discuss your skills and resources.</p> <p>Together pick one neighbour who will take action to help Dot.</p> <br/> <p><i>Facilitator, invite this player to describe how they will use their skills and resources to take action. </i> </p> <p><i>You will judge whether they have successfully filled the gap. </i></p> <</if>> <</replace>> <</timed>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseFortuneAudio()>> <</if>> <</timed>>

<<set $prevpass to "storyintro">> <<set $pass to "infernointro">> <<set $nextpass to "infernostory">> <<set $storyMonsterNeeded to "INF">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <p>Inferno sizzles into High Street. She clears the sky of clouds, so all you see is blue. </p> <p>Inside and out the air is thick, heavy and still, no cool, no breeze. The thermometer climbs higher and higher. </p> <br/> <p>Thanks to your choices, you manage <span class="accent">$playerchoices.percentage%</span> of Inferno’s impacts.</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseIntroAudio()>> <</if>> <</timed>>

<<set $prevpass to "infernointro">> <<set $pass to "infernostory">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $nextpass to "inferno-poststory">> <<else>> <<set $nextpass to "infernofortune">> <</if>> <<set $storyAudioNeeded to []>> <<set $storyMonsterNeeded to "INF">> <<timed 0.1s>> /* <<audio ":all" "stop" >> */ <<if $withVoiceover is true>> <<audio "success1" "play">> <<else>> <<audio "success1" "play">> <</if>> <</timed>> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <<if $playerchoices.chosenactions.includes(2)>> <<run $storyAudioNeeded.push(2)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/2.png" alt="action card"/> </div> <p>The temperature rises, and you pass out the water and ice you gathered to make sure everyone is cool and hydrated. </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(8)>> <<run $storyAudioNeeded.push(8)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/8.png" alt="action card"/> </div> <div> <p>You set up a messaging chat, which connects you to some of your neighbours you are yet to meet. </p> <p><i>Turn over half the remaining face down neighbour cards. </i></p> <p>You can include these neighbours in your preparations, and later in your recovery. You might have skills to exchange, or ways to support one another. </p> </div> </div> <</if>> <<if $playerchoices.chosenactions.includes(9)>> <<run $storyAudioNeeded.push(9)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/9.png" alt="action card"/> </div> <div> <p>You go door knocking, which connects you to some of your neighbours you are yet to meet. </p> <p><i>Turn over half of the remaining face down neighbour cards.</i> </p> <p>You can include these neighbours in your preparations, and later in your recovery. You might have skills to exchange, or ways to support one another. </p> </div> </div> <</if>> <<if $playerchoices.chosenactions.includes(5)>> <<run $storyAudioNeeded.push(5)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/5.png" alt="action card"/> </div> <p>One of your neighbours faints in the heat, hitting their arm against a low table. Thanks to your emergency kit, you give them food, water and first aid support while you wait for help to come. </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(11)>> <<run $storyAudioNeeded.push(11)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/11.png" alt="action card"/> </div> <p>Several houses are attacked badly by Inferno, and become unsafe to stay in. Neighbours retreat to the safe space.</p> </div> <</if>> <<if $playerchoices.chosenactions.includes(6)>> <<run $storyAudioNeeded.push(6)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/6.png" alt="action card"/> </div> <p>As Neighbours retreat from Inferno’s heat, you grab your to-go bag. You’re grateful for the emergency supplies, and especially your phone charger. The next morning your neighbour calls asking for help. You go to help them. </p> </div> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseStoryAudio()>> <</if>> <</timed>>

<<set $prevpass to "infernostory">> <<set $pass to "infernofortune">> <<set $nextpass to "inferno-poststory">> <<set $storyMonsterNeeded to "INF">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <div id="mount"></div> <<if $playerchoices.diceroll == 3 or $playerchoices.diceroll == 4>> <<timed 0.1s>> <<replace "#mount">> <h2>Let's see how your good fortune plays out. </h2> <p>You get a Good Fortune Token: </p> <div class="inline-img-container wildcards"> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> </div> <p>As the heat reaches dangerous levels, local community health workers set up a first aid tent on High Street, providing emergency medical care and handing out water, cold compresses and rehydration sachets. </p> <</replace>> <</timed>> <</if>> <<if $playerchoices.diceroll == 5 or $playerchoices.diceroll == 6>> <<timed 0.1s>> <<replace "#mount">> <h2>Let's see how your good fortune plays out. </h2> <p>You get two Good Fortune Tokens: </p> <div class="inline-img-container wildcards"> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> </div> <p> As the heat reaches dangerous levels, local community health workers set up a first aid tent on High Street, providing emergency medical care and handing out water, cold compresses and rehydration sachets. </p> <p>A group of healthcare workers are also dispatched to individual houses, to check in on vulnerable members of the community, and provide emergency support where needed.</p> <</replace>> <</timed>> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseFortuneAudio()>> <</if>> <</timed>>

<<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $prevpass to "infernostory">> <<else>> <<set $prevpass to "infernofortune">> <</if>> <<set $pass to "inferno-poststory">> <<set $nextpass to "infernoimpacts">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_7_INF_4.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class=""> <div class="explanation"> <p>Unfortunately, not everything goes quite as well. </p> <p>Due to the choices you made, there are some challenges you have to face. </p> <p>Here are Inferno’s impacts you’re left to contend with...</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "inferno-poststory">> <<set $pass to "infernoimpacts">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $nextpass to "infernofortuneimpacts">> <<else>> <<set $nextpass to "recoverytrans">> <</if>> <<set $impactsAudioNeeded to []>> <<set $storyMonsterNeeded to "INF">> <<timed 0.1s>> /* <<audio ":all" "stop" >> */ <<if $withVoiceover is true>> <<else>> <<audio "success2" "play">> <</if>> <</timed>> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <<if !$playerchoices.chosenactions.includes(2)>> <<run $impactsAudioNeeded.push(2)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/2.png" alt="action card"/> </div> <p>As the temperature rises, some neighbours, especially those with existing health conditions, suffer. Two people are dehydrated and need to be taken to hospital. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(8)>> <<run $impactsAudioNeeded.push(8)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/8.png" alt="action card"/> </div> <div> <p>You don’t set up a messaging group, and so you aren’t able to connect to several neighbours. </p> <p><i>Turn over half of the remaining face down neighbour cards. </i></p> <p>You can’t include these neighbours in your preparations or recovery, and you’re not able to provide support to one another.</p> </div> </div> <</if>> <<if !$playerchoices.chosenactions.includes(9)>> <<run $impactsAudioNeeded.push(9)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/9.png" alt="action card"/> </div> <div> <p>You don’t go door knocking, and so you aren’t able to connect to several neighbours. </p> <p><i>Turn over half of the remaining face down neighbour cards. </i></p> <p>You can’t include these neighbours in your preparations or recovery, and you’re not able to provide support to one another. </p> </div> </div> <</if>> <<if !$playerchoices.chosenactions.includes(5)>> <<run $impactsAudioNeeded.push(5)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/5.png" alt="action card"/> </div> <p>One of your neighbours faints and hits themselves on a low table. With no emergency kit you have no supplies to help them as they wait for an ambulance to arrive. They’re left feeling shaken and a little scared. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(11)>> <<run $impactsAudioNeeded.push(11)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/11.png" alt="action card"/> </div> <p>Several of the houses are attacked badly by Inferno and become unsafe to stay in. There is nowhere for some of the neighbours to go. Neighbours are scared and panicked. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(6)>> <<run $impactsAudioNeeded.push(6)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/6.png" alt="action card"/> </div> <p>Some neighbours do evacuate from Inferno’s heat, but with no grab bag, you forget key items, including your phone charger. Your neighbour calls asking for help, but your phone has no battery. It doesn’t ring.</p> </div> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseImpactsAudio()>> <</if>> <</timed>>

<<set $prevpass to "infernoimpacts">> <<set $pass to "infernofortuneimpacts">> <<set $nextpass to "recoverytrans">> <<set $storyMonsterNeeded to "INF">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <div id="mount"></div> <<timed 0.1s>> <<replace "#mount">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <p>The heat rises and rises, High Street is under strain. </p> <br/><br/> <h2>Dot, the stray cat, is stuck up a tree. She is in direct sunlight and dehydrated, refusing to come down. </h2> <br/> <p>Due to your low fortune, there is no councillor to turn to. But you do have each other! </p> <p>You will use your skills to take action on this <span class="accent">Unpredictable Outcome.</span> </p> <br/> <p>Discuss your skills and resources. </p> <p>Together, pick one neighbour who will take action to help Dot.</p> <br/> <p><i>Facilitator, invite the players to describe how they will use their skills to take action.</i> </p> <p><i>You will judge whether they have successfully filled the gap. </i></p> <</if>> <</replace>> <</timed>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseFortuneAudio()>> <</if>> <</timed>>

<<set $prevpass to "storyintro">> <<set $pass to "drenchintro">> <<set $nextpass to "drenchstory">> <<set $storyMonsterNeeded to "DRE">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <p>The skies open and Drench falls down, rushing along the slope of the street, pooling at drains and in potholes that can’t contain her. She slips and slides through cracks and gaps. No matter where you go she is around every corner. </p> <p>Thanks to your choices, you manage <span class="accent">$playerchoices.percentage%</span> of Drench’s impacts.</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseIntroAudio()>> <</if>> <</timed>>

<<set $prevpass to "drenchintro">> <<set $pass to "drenchstory">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $nextpass to "drench-poststory">> <<else>> <<set $nextpass to "drenchfortune">> <</if>> <<set $storyAudioNeeded to []>> <<set $storyMonsterNeeded to "DRE">> <<timed 0.1s>> /* <<audio ":all" "stop" >> */ <<if $withVoiceover is true>> <<audio "success1" "play">> <<else>> <<audio "success1" "play">> <</if>> <</timed>> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <<if $playerchoices.chosenactions.includes(12)>> <<run $storyAudioNeeded.push(12)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/12.png" alt="action card"/> </div> <p>With High Street signed up to alerts, everyone is warned about the Drench’s arrival in good time. The alert includes up to date guidance, which ensures no one uses any out of date methods or approaches to keep Drench at bay. </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(4)>> <<run $storyAudioNeeded.push(4)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/4.png" alt="action card"/> </div> <p>Drench arrives. The barriers, blocks and pads keep most of High Street water free, with no risk of disease or electric shock. </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(7)>> <<run $storyAudioNeeded.push(7)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/7.png" alt="action card"/> </div> <p>A few homes on High Street are unable to keep Drench out. Fortunately, when Drench does rush in, she can’t reach belongings that sit on high shelves and in attics. </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(8)>> <<run $storyAudioNeeded.push(8)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/8.png" alt="action card"/> </div> <div> <p> You set up a messaging chat, which connects you to some of your neighbours you are yet to meet. </p> <p><i>Turn over half the remaining face down neighbour cards. </i></p> <p>You can include these neighbours in your preparations, and later in your recovery. You might have skills to exchange, or ways to support one another. </p> </div> </div> <</if>> <<if $playerchoices.chosenactions.includes(6)>> <<run $storyAudioNeeded.push(6)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/6.png" alt="action card"/> </div> <p>Drench forces several houses to evacuate. Thanks to your plan, you have a to-go bag. You’re grateful for the supplies, and especially your phone charger. The next morning your neighbour calls asking for help. You go to help them. </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(11)>> <<run $storyAudioNeeded.push(11)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/11.png" alt="action card"/> </div> <p>Several homes are now waterlogged and become unsafe to stay in. Neighbours gratefully retreat to the safe space.</p> </div> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseStoryAudio()>> <</if>> <</timed>>

<<set $prevpass to "drenchstory">> <<set $pass to "drenchfortune">> <<set $nextpass to "drench-poststory">> <<set $storyMonsterNeeded to "DRE">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <div id="mount"></div> <<if $playerchoices.diceroll === 3 or $playerchoices.diceroll === 4>> <<timed 0.1s>> <<replace "#mount">> <h2>Let's see how your good fortune plays out. </h2> <p>You get a Good Fortune Token: </p> <div class="inline-img-container wildcards"> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> </div> <p>Emergency services are dispatched to High Street to help people who remain stranded by the lingering floods. A family climbs out of their top floor window, and one man is rescued from his car. </p> <</replace>> <</timed>> <</if>> <<if $playerchoices.diceroll == 5 or $playerchoices.diceroll == 6>> <<timed 0.1s>> <<replace "#mount">> <h2>Let's see how your good fortune plays out. </h2> <p>You get two Good Fortune Tokens: </p> <div class="inline-img-container wildcards"> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> </div> <p>Emergency services are dispatched to High Street to help people who remain stranded by the lingering floods. A family climbs out of their top floor window, and one man is rescued from his car. </p> <p>A group of healthcare workers are dispatched to individual houses, to check in on vulnerable members of the community, and provide emergency support where needed. </p> <</replace>> <</timed>> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseFortuneAudio()>> <</if>> <</timed>>

<<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $prevpass to "drenchstory">> <<else>> <<set $prevpass to "drenchfortune">> <</if>> <<set $pass to "drench-poststory">> <<set $nextpass to "drenchimpacts">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_7_DRE_4.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class=""> <div class="explanation"> <p>Unfortunately, not everything goes quite as well. </p> <p>Due to the choices you made, there are some challenges you have to face. </p> <br/> <p>Here are Drench’s impacts you’re left to contend with...</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "drench-poststory">> <<set $pass to "drenchimpacts">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $nextpass to "drenchfortuneimpacts">> <<else>> <<set $nextpass to "recoverytrans">> <</if>> <<set $impactsAudioNeeded to []>> <<set $storyMonsterNeeded to "DRE">> <<timed 0.1s>> <<if $withVoiceover is true>> <<audio "success2" "play">> <<else>> <<audio "success2" "play">> <</if>> <</timed>> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <<if !$playerchoices.chosenactions.includes(12)>> <<run $impactsAudioNeeded.push(12)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/12.png" alt="action card"/> </div> <p>With High Street not signed up to alerts, not everyone is warned about Drench’s arrival or given up to date guidance in time. Several neighbours use sandbags to block Drench rather than absorbent pads, and this out of date approach allows some of Drench to seep through. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(4)>> <<run $impactsAudioNeeded.push(4)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/4.png" alt="action card"/> </div> <p>Drench arrives and pours into buildings and homes. Then she stays. Two neighbours get respiratory infections from the floodwater, and a family is stuck upstairs in their house, with risk of electric shock below. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(7)>> <<run $impactsAudioNeeded.push(7)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/7.png" alt="action card"/> </div> <p>In several homes, as Drench rushes in, belongings are swept away with her. A neighbour loses all their family photographs, another’s computer is waterlogged and broken. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(8)>> <<run $impactsAudioNeeded.push(8)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/8.png" alt="action card"/> </div> <div> <p>You don’t set up a messaging group, and so you aren’t able to connect to several neighbours. </p> <p><i>Turn over half of the remaining face down neighbour cards.</i> </p> <p>You can’t include these neighbours in your preparations or recovery, and you’re not able to provide support to one another. </p> </div> </div> <</if>> <<if !$playerchoices.chosenactions.includes(11)>> <<run $impactsAudioNeeded.push(11)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/11.png" alt="action card"/> </div> <p>Several homes are flooded and become unsafe to stay in. Yet, there is nowhere to go. One neighbour has to sleep on their dining table. Others grow more and more hungry as the flood keeps them upstairs and away from their kitchen below. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(6)>> <<run $impactsAudioNeeded.push(6)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/6.png" alt="action card"/> </div> <p>Some neighbours do evacuate from their flooded homes, including you. With no grab bag, you forget key items, including your phone charger. Your neighbour calls asking for help, but your phone has no battery. It doesn’t ring.</p> </div> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseImpactsAudio()>> <</if>> <</timed>>

<<set $prevpass to "drenchimpacts">> <<set $pass to "drenchfortuneimpacts">> <<set $nextpass to "recoverytrans">> <<set $storyMonsterNeeded to "DRE">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <div id="mount"></div> <<timed 0.1s>> <<replace "#mount">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <p>Drench starts her retreat and you are relieved to see High Street return.</p> <br/> <h2>You find Dot stranded in the middle of a large, deep pond. Dot famously doesn’t like swimming and can’t escape. </h2> <br/> <p>Due to your low fortune, there is no councillor to turn to. But you do have each other! </p> <br/> <p>You will use your skills to take action on this <span class="accent">Unpredictable Outcome.</span> </p> <br/> <p>Discuss your skills and resources. </p> <p>Together pick one neighbour who will take action to help Dot. </p> <br/> <p><i>Facilitator, invite the players to describe how they will use their skills to take action.</i> </p> <p><i>You will judge whether they have successfully filled the gap. </i></p> <</if>> <</replace>> <</timed>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseFortuneAudio()>> <</if>> <</timed>>

<<set $prevpass to "storyintro">> <<set $pass to "crystalintro">> <<set $nextpass to "crystalstory">> <<set $storyMonsterNeeded to "CRY">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <p>Crystal crawls into High Street. She greets you with a frosty reception. </p> <p>She gathers snow, sleet and ice, depositing them along the street: in front of doors, around cars, at central intersections on major roads. </p> <br/> <p>Thanks to your choices, you manage <span class="accent">$playerchoices.percentage%</span> of Crystal’s impacts.</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseIntroAudio()>> <</if>> <</timed>>

<<set $prevpass to "crystalintro">> <<set $pass to "crystalstory">> <<set $nextpass to "crystalfortune">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $nextpass to "crystal-poststory">> <<else>> <<set $nextpass to "crystalfortune">> <</if>> <<set $storyAudioNeeded to []>> <<set $storyMonsterNeeded to "CRY">> <<timed 0.1s>> /* <<audio ":all" "stop" >> */ <<if $withVoiceover is true>> <<audio "success1" "play">> <<else>> <<audio "success1" "play">> <</if>> <</timed>> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <<if $playerchoices.chosenactions.includes(1)>> <<run $storyAudioNeeded.push(1)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/1.png" alt="action card"/> </div> <p>Thanks to the salts laid out, there is no mark of Crystal on the streets. Neighbours venture out, and no one slips or falls. </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(9)>> <<run $storyAudioNeeded.push(9)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/9.png" alt="action card"/> </div> <div> <p>You go door knocking, which connects you to some of your neighbours you are yet to meet. </p> <p><i>Turn over half of the remaining face down neighbour cards.</i> </p> <p>You can include these neighbours in your preparations, and later in your recovery. You might have skills to exchange, or ways to support one another. </p> </div> </div> <</if>> <<if $playerchoices.chosenactions.includes(5)>> <<run $storyAudioNeeded.push(5)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/5.png" alt="action card"/> </div> <p>Crystal dangles from the power lines, pulling several down and causing an outage. With your emergency kit you’re prepared: you have food, water, a first aid kit, blankets and a wind up radio to stay up to date. Phew! </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(6)>> <<run $storyAudioNeeded.push(6)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/6.png" alt="action card"/> </div> <p>As Crystal lingers, several houses become too cold and neighbours are forced to evacuate. Thanks to your plan, you have food, water and a phone charger. When your neighbour calls the next morning for help, you pick up. </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(11)>> <<run $storyAudioNeeded.push(11)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/11.png" alt="action card"/> </div> <p>Several neighbours are forced to find refuge from the freezing weather at the safe space. Blankets and mugs of hot chocolate are handed out. </p> </div> <</if>> <<if $playerchoices.chosenactions.includes(10)>> <<run $storyAudioNeeded.push(10)>> <div class="story-line-container"> <div class="inline-img-wrapper "> <img src="assets/img/10.png" alt="action card"/> </div> <p>As Crystal stretches her icy tendrils across the roads, food supplies start to dwindle. You turn to the community centre. The community centre’s food bank makes sure everyone is well fed. </p> </div> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseStoryAudio()>> <</if>> <</timed>>

<<set $prevpass to "crystalstory">> <<set $pass to "crystalfortune">> <<set $nextpass to "crystal-poststory">> <<set $storyMonsterNeeded to "CRY">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <div id="mount"></div> <<if $playerchoices.diceroll == 3 or $playerchoices.diceroll == 4>> <<timed 0.1s>> <<replace "#mount">> <h2>Let's see how your good fortune plays out. </h2> <p>You get a Good Fortune Token: </p> <div class="inline-img-container wildcards"> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> </div> <p>A group of healthcare workers deliver home visits across High Street, to check in on vulnerable members of the community, and provide emergency support where needed. </p> <</replace>> <</timed>> <</if>> <<if $playerchoices.diceroll == 5 or $playerchoices.diceroll == 6>> <<timed 0.1s>> <<replace "#mount">> <h2>Let's see how your good fortune plays out. </h2> <p>You get two Good Fortune Tokens: </p> <div class="inline-img-container wildcards"> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> <div class="inline-img-wrapper arcard"> <img src="assets/img/goodfortune.png" alt="Good Fortune Token"/> </div> </div> <p>A group of healthcare workers deliver home visits across High Street, to check in on vulnerable members of the community, and provide emergency support where needed. </p> <p>Your local councillor also commits to rebuilding some of the damaged public infrastructure. They say everything will be fixed in the next six months. You decide you’ll wait and see. </p> <</replace>> <</timed>> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseFortuneAudio()>> <</if>> <</timed>>

<<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $prevpass to "crystalstory">> <<else>> <<set $prevpass to "crystalfortune">> <</if>> <<set $pass to "crystal-poststory">> <<set $nextpass to "crystalimpacts">> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_7_CRY_4.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class=""> <div class="explanation"> <p>Unfortunately, not everything goes quite as well. </p> <p>Due to the choices you made, there are some challenges you have to face. </p> <br/> <p>Here are Crystal’s impacts you’re left to contend with...</p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "crystal-poststory">> <<set $pass to "crystalimpacts">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <<set $nextpass to "crystalfortuneimpacts">> <<else>> <<set $nextpass to "recoverytrans">> <</if>> <<set $impactsAudioNeeded to []>> <<set $storyMonsterNeeded to "CRY">> <<timed 0.1s>> <<if $withVoiceover is true>> <<audio "success2" "play">> <<else>> <<audio "success2" "play">> <</if>> <</timed>> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <<if !$playerchoices.chosenactions.includes(1)>> <<run $impactsAudioNeeded.push(1)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/1.png" alt="action card"/> </div> <p>With no grit, the streets are slippery and icy. A couple of neighbours venture out and slip and fall, resulting in a broken wrist and two sprained ankles. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(9)>> <<run $impactsAudioNeeded.push(9)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/9.png" alt="action card"/> </div> <div> <p>You don’t go door knocking, and so you aren’t able to connect to several neighbours. </p> <p><i>Turn over half of the remaining face down neighbour cards.</i> </p> <p>You can’t include these neighbours in your preparations or recovery, and you’re not able to provide support to one another. </p> </div> </div> <</if>> <<if !$playerchoices.chosenactions.includes(5)>> <<run $impactsAudioNeeded.push(5)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/5.png" alt="action card"/> </div> <p>Crystal dangles from the power lines, pulling several down and causing an outage. You’re unprepared: you don’t have the blankets and jumpers you need, and struggle to find edible food. It is a shock. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(6)>> <<run $impactsAudioNeeded.push(6)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/6.png" alt="action card"/> </div> <p> As Crystal lingers, several houses become too cold and neighbours are forced to evacuate. You forget key items, including your phone charger. Your neighbour calls asking for help, but your phone has no battery. It doesn’t ring.</p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(11)>> <<run $impactsAudioNeeded.push(11)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/11.png" alt="action card"/> </div> <p>As Crystal’s visit drags on, temperatures dip below safe levels. Some neighbours' homes become unsafe to stay in, but there is nowhere to go. They sit shivering all night. One neighbour ends up with hypothermia. </p> </div> <</if>> <<if !$playerchoices.chosenactions.includes(10)>> <<run $impactsAudioNeeded.push(10)>> <div class="story-line-container"> <div class="inline-img-wrapper grey "> <img src="assets/img/10.png" alt="action card"/> </div> <p>As Crystal stretches her icy tendrils across the roads, food supplies start to dwindle, but there is nowhere to turn. Several neighbours run out of food. They are left hungry. </p> </div> <</if>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseImpactsAudio()>> <</if>> <</timed>>

<<set $prevpass to "crystalimpacts">> <<set $pass to "crystalfortuneimpacts">> <<set $nextpass to "recoverytrans">> <<set $storyMonsterNeeded to "CRY">> <div id="audioMount"> <audio id="audioPlayer" autoplay>Audio is not supported on your device</audio></div> <main class=""> <div class="explanation"> <div id="mount"></div> <<timed 0.1s>> <<replace "#mount">> <<if $playerchoices.diceroll == 1 or $playerchoices.diceroll == 2>> <p>Crystal retreats, leaving a bitter cold.</p> <br/> <h2>You find Dot, the stray cat, stranded in the middle of a frozen pond. </h2> <br/> <p>Due to your low fortune, there is no councillor to turn to. But you do have each other! </p> <p>You will use your skills to take action on this <span class="accent">Unpredictable Outcome.</span> </p> <br/> <p>Discuss your skills and resources. </p> <p>Together pick one neighbour who will take action to help Dot. </p> <br/> <p><i>Facilitator, invite the players to describe how they will use their skills to take action.</i> </p> <p><i>You will judge whether they have successfully filled the gap. </i></p> <</if>> <</replace>> <</timed>> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> <<timed 2s>> <<if $withVoiceover is true>> <<run setup.chooseFortuneAudio()>> <</if>> <</timed>>

<<set $prevpass to "storyintro">> <<set $pass to "recoverytrans">> <<set $nextpass to "aftermathintro">> <<timed 0.1s>> <<audio ":all" "stop" >> <<if $withVoiceover is true>> <<audio "aftermath" "play" "loop">> <<else>> <<audio "aftermath" "play" "loop">> <</if>> <</timed>> <main class="cards-selection"> <div class="info-container grid-item cards fadeIn10 fortunetrans"> <div class="inline-img-container"> <div class="inline-img-wrapper arcardbig"> <img src="assets/img/recovery.png" alt="Recovery"/> </div> </div> </div> </main> <<timed 10s>> <<goto $nextpass>> <</timed>>

<<set $prevpass to "storyintro">> <<set $pass to "aftermathintro">> <<set $nextpass to "aftermath">> <<if $withVoiceover is true>> <<audio "aftermath" volume 1 fadeoverto 2 $reducedVol loop>> <<timed 0.1s>> <audio src="assets/voiceover/strongertogethervo_8_1.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class="grid-wrapper"> <div class="info-container grid-item cards"> <div class="inline-img-container"> <div class="inline-img-wrapper arcard"> <img src="assets/img/recovery.png" alt="Recovery"/></div> </div> </div> <div class="grid-item explanation"> <h2>The Monster retreats from High Street. </h2> <h3>You’re left with the aftermath. </h3> <p>While the street came together, you were not able to keep the Monster completely at bay. </p> <p>You are left facing the consequences. </p> <p>How will you recover? </p> </div> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "aftermathintro">> <<set $pass to "aftermath">> <<set $nextpass to "aftermath2">> <<if $withVoiceover is true>> <<timed 0.1s>> <audio src="assets/voiceover/strongertogethervo_8_2.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main class="timer"> <br/> <h2>The Monster attack has left High Street reeling. </h2> <br/> <p>Morale is low and neighbours across High Street are left scared and shaken. </p> <p>Despite your planning and preparations, the Monster had a big impact, and there were some things you couldn’t predict. </p> <p>Some neighbours have experienced damage to their homes, while others have experienced damage to their health. </p> <p>For everyone, the Monster’s visit has left a lasting impression. </p> <p>High Street doesn’t feel the same. </p> </main> <<include "footeroptionappears">> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>>

<<set $prevpass to "aftermath">> <<set $pass to "aftermath2">> <<set $nextpass to "outro">> <<if $withVoiceover is true>> <<timed 0.1s>> <audio src="assets/voiceover/strongertogethervo_8_3.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <<timed 25s>> <<include "3headertimer">> <</timed>> <main class="timer"> <br/> <h2>Together, you will decide how to use your skills, resources and talents to build morale and put High Street on the road to recovery. </h2> <br/> <p>Your plan could be practical: putting together a team to mend broken windows. </p> <p>Or fantastical: hosting an immersive unicorn party. </p> <p>Or a bit of both!</p> <br/> <p><i>Facilitator, spend three minutes on this discussion.</i> </p> <p>We recommend doing this by inviting everyone to share their pitch for an event, action or activity. </p> <p>Use your skills on your <span class="accent">Neighbour Cards</span></p> <p>When you’ve done that click ‘Move On’.</p> </main> <<include "footeroptionappears">>

<<set $prevpass to "aftermath2">> <<set $pass to "outro">> <<set $nextpass to "record">> <<if $withVoiceover is true>> <<timed 0.1s>> <audio src="assets/voiceover/strongertogethervo_8_4.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main> <br/> <h2>Now, you need to pick a pitch.</h2> <br/> <p>There might already be a clear winner. </p> <p>If not, go round and make your pitches one last time. </p> <p>What can you do to build High Street’s morale? </p> <br/> <p>Then together, make your choice.</p> <br/> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> </main> <<include "footeroptionappears">>

<<set $prevpass to "outro">> <<set $pass to "record">> <<set $nextpass to "recordttrans">> <<audio ":all" 'stop'>> <<if $withVoiceover is true>> <<timed 0.1s>> <audio src="assets/voiceover/strongertogethervo_8_5.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main> <p>Now you have your pitch, we want you to summarise it.</p> <p>When you’re ready, press ‘Start Recording’ below, speak into the microphone and describe the action you will take for your High Street. </p> <p>It’s time to begin to recover. </p> <br/> /* <iframe src="https://www.speakpipe.com/widget/inline/kp6xzmubni8enwhrhvqo1sx5cbst92iy" allow="microphone" width="100%" height="200" frameborder="0"></iframe> */ <div id="mount"> <<button "Start recording">> <<replace "#mount">> <<include "recordingtimer">> <</replace>> <</button>> </div> <<timed 6s>> <<replace "#nextButtonContainer">> <<button "I've finished recording">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> </main> <<include "footeroptionappears">>

<h3><span id="countup">🎙️ Recording... 0:00</span></h3> <div id="finishButtonContainer" style="margin-top: 1em;"></div> <<set $seconds = 0>> <<silently>> <<repeat 1s>> <<set $seconds += 1>> <<set _min to Math.floor($seconds / 60)>> <<set _sec to $seconds % 60>> <<replace "#countup">> <h3> 🎙️ Recording... <span class="secs">_min:<<if _sec lt 10>>0<</if>>_sec</span> </h3> <</replace>> <</repeat>> <</silently>>

<<set $prevpass to "record">> <<set $pass to "recordttrans">> <<set $nextpass to "postrecord">> <<if $withVoiceover is true>> <<audio "success3" "play">> <<else>> <<audio "success3" "play">> <</if>> <main class="cards-selection"> <div class="info-container grid-item cards fadeIn3 fortunetrans"> <div class="inline-img-container"> <div class="inline-img-wrapper arcardbig"> <img src="assets/img/epilogue.png" alt="Epilogue card"/> </div> </div> </div> </main> <<timed 5s>> <<goto $nextpass>> <</timed>>

<<set $prevpass to "record">> <<set $pass to "postrecord">> <<set $nextpass to "postrecordb">> <<set $improvement to 100- $playerchoices.percentage>> <<if $withVoiceover is true>> <<audio "aftermath" volume 1 fadeoverto 2 $reducedVol loop>> <<timed 0.1s>> <audio src="assets/voiceover/strongertogethervo_8_6.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <<else>> <<audio "aftermath" volume 1 fadeoverto 2 $reducedVol loop>> <</if>> <main> <p>On High Street, your plan is put into action. </p> <br/> <p>You watch the practical and fantastical events unfold and reflect on all you have been through.</p> <p>Dot is impressed.</p> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> </main> <<include "footeroptionappears">>

<<set $prevpass to "postrecord">> <<set $pass to "postrecordb">> <<set $nextpass to "postrecord2">> <<set $improvement to 100- $playerchoices.percentage>> <<if $withVoiceover is true>> <<timed 0.1s>> <audio src="assets/voiceover/strongertogethervo_8_7.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main> <p>You made some good choices. </p> <p>But for each Monster, some actions are more useful than others.</p> <p>Every action was helpful though. </p> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> </main> <<include "footeroptionappears">>

<<set $prevpass to "postrecordb">> <<set $pass to "postrecord2">> <<set $nextpass to "outro2">> <<if $withVoiceover is true>> <<timed 0.1s>> <audio src="assets/voiceover/strongertogethervo_8_8.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main> <p>When it comes to this kind of Monster attack, there is no way to win - High Street will always be impacted. </p> <br/> <p>But your choices are important!</p> <p>Not only in shaping what happens during the attack, but also in what happens after. </p> <p>Your resilience as a street puts you on the road to recovery. </p> <p>That and the practical, fantastical event you planned! </p> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> </main> <<include "footeroptionappears">>

<<set $prevpass to "postrecord2">> <<set $pass to "outro2">> <<set $nextpass to "outro3">> <<if $withVoiceover is true>> <<timed 0.1s>> <audio src="assets/voiceover/strongertogethervo_8_9.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> <</if>> <main> <h2>You faced this Monster as a street. </h2> <p>When you came together, you didn’t only keep the street safe, you looked after each other too. </p> <br/> <p>Well done! </p> <<timed 3s>> <<replace "#nextButtonContainer">> <<button "Move on">> <<goto $nextpass>> <</button>> <</replace>> <</timed>> </main> <<include "footeroptionappears">>

<<set $prevpass to "outro2">> <<set $pass to "outro3">> <<set $nextpass to "end">> <<audio ":all" stop>> <<if $withVoiceover is true>> <<timed 0.1s>> <div id="audioMount"> <audio src="assets/voiceover/strongertogethervo_8_10.mp3" autoplay>Audio is not supported on your device</audio> </div> <</timed>> <</if>> <<timed 7s>> <<include "questionsheadertimer">> <</timed>> <main class="grid-wrapper"> <div class="info-container grid-item cards"> <div class="inline-img-container"> <div class="inline-img-wrapper arcard"> <img src="assets/img/debrief.png" alt="Debrief"/></div> </div> </div> <br/> <div class="grid-item explanation" id="mount"> <h2> Now for the final part of the game: the debrief. </h2> <p>There are several questions for you to reflect on and discuss together. </p> <br/> <p><i>Facilitator, we recommend five minutes for this discussion.</i> </p> </div> <<timed 3s>> <<replace "#nextButtonContainerQ">> <<button "We're ready">> <<replace "#nextButtonContainerQ">><</replace>> <<replace "#mount">> <<include "question1">> <<if $withVoiceover is true>> <<timed 0.1s>> <<replace "#audioMount">> <audio src="assets/voiceover/strongertogethervo_9_Q1.mp3" autoplay>Audio is not supported on your device</audio> <</replace>> <</timed>> <</if>> <</replace>> <</button>> <</replace>> <</timed>> </main> <<include "footerquestions">>

<h2>Question </h2> <p>Today, you came together to face the Monster. </p> <p>Some things went well, others less well, but you stuck it out: you were resilient.</p> <p>If you were going to give your High Street an award - a blue plaque, say - to hang on the wall and commemorate this street and your response to the attack - what would you say? </p> <<timed 3s>> <<replace "#nextButtonContainerQ">> <<button "Next question">> <<replace "#nextButtonContainerQ">><</replace>> <<replace "#mount">> <<include "question2">> <<if $withVoiceover is true>> <<timed 0.1s>> <<replace "#audioMount">> <audio src="assets/voiceover/strongertogethervo_9_Q2.mp3" autoplay>Audio is not supported on your device</audio> <</replace>> <</timed>> <</if>> <</replace>> <</button>> <</replace>> <</timed>>

<h2>Question</h2> <p>If you were to play again, how would you play differently? </p> <<timed 3s>> <<replace "#nextButtonContainerQ">> <<button "Next question">> <<replace "#nextButtonContainerQ">><</replace>> <<replace "#mount">> <<if $rolledagain is true>> <<include "question3">> <<if $withVoiceover is true>> <<timed 0.1s>> <<replace "#audioMount">> <audio src="assets/voiceover/strongertogethervo_9_Q3.mp3" autoplay>Audio is not supported on your device</audio> <</replace>> <</timed>> <</if>> <<else>> <<include "question4">> <<if $withVoiceover is true>> <<timed 0.1s>> <<replace "#audioMount">> <audio src="assets/voiceover/strongertogethervo_9_Q4.mp3" autoplay>Audio is not supported on your device</audio> <</replace>> <</timed>> <</if>> <</if>> <</replace>> <</button>> <</replace>> <</timed>>

<h2>Question </h2> <p>When it came to your fortune, you chose to roll the dice again. </p> <p>At the end of the game, how do you feel about this choice? Would you do the same next time? </p> <<timed 3s>> <<replace "#nextButtonContainerQ">> <<button "Next question">> <<replace "#nextButtonContainerQ">><</replace>> <<replace "#mount">> <<include "question4">> <<if $withVoiceover is true>> <<timed 0.1s>> <<replace "#audioMount">> <audio src="assets/voiceover/strongertogethervo_9_Q4.mp3" autoplay>Audio is not supported on your device</audio> <</replace>> <</timed>> <</if>> <</replace>> <</button>> <</replace>> <</timed>>

<h2>Question </h2> <p>Today you played as a character, but we all live on streets with our own communities, homes and neighbours. </p> <p>We’re going to invite you to take a step away from the game, back to yourself.</p> <p>How did the game make you think about community resilience on your own street? </p> <<timed 3s>> <<replace "#nextButtonContainerQ">> <<button "End">> <<goto "end">> <</button>> <</replace>> <</timed>>

<<set $prevpass to "outro3">> <<set $pass to "end">> <<set $nextpass to "end">> <<timed 0.1s>> <<audio ":all" "stop" >> <<if $withVoiceover is true>> <<timed 0.2s>> <audio src="assets/voiceover/strongertogethervo_10.mp3" autoplay>Audio is not supported on your device</audio> <</timed>> /* <<timed 3.5s>> <<audio "meow" "play">> <</timed>> */ <<else>> /* <<audio "meow" "play" >> */ <</if>> <</timed>> <main class="grid-wrapper"> <div class="info-container grid-item cards finalcat"> <div class="inline-img-container"> <div class="inline-img-wrapper arcard"> <img src="assets/img/cat.png" alt="Cat"/> </div> </div> </div> <br/> <div class="grid-item explanation" id="mount"> <p>No matter what played out, know that High Street is on the road to recovery, and we are <span class="accent">Stronger Together</span>. </p> <br/> <p>Thanks for playing! </p> <br/> <p>For more information on how to prepare for emergencies, please find information about the UK Government’s Prepare Campaign at the link <a href="https://prepare.campaign.gov.uk/" target="_blank" rel="noreferrer"><button>here</button></a> </p> <br/> <p>This game was developed by Mod for Blue Heart. </p> <p>This project is funded by Defra as part of the £200 million Flood and Coastal Innovation Programmes which is managed by the Environment Agency. The programmes will drive innovation in flood and coastal resilience and adaptation to a changing climate.</p> <p>You can read more about the programmes <a href="https://engageenvironmentagency.uk.engagementhq.com/innovation-programme " target="_blank" rel="noreferrer"><button>here</button></a></p> <br/><br/> <div class="inline-img-container wildcards"> <div class="inline-img-wrapper arcard"> <a href="https://www.blueheart.org.uk" target="_blank" rel="noreferrer"> <img src="assets/img/blue-heart-logo.png" alt="Blue Heart Logo"/> </a> </div> <div class="inline-img-wrapper arcard"> <img src="assets/img/ModLogoTrans.png" alt="Mod Logo"/> </div> </div> <br/> <p><i>Please note that no data will be saved from your playthrough of this game.</i> </p> <br/> <<button "Restart">> <<script>>Engine.restart()<</script>> <</button>> </div> </main> <<include "footerend">>