Take a Walk

config.style.page.style: 'none' config.footer.left: '' config.style.backdrop: 'white' config.body.transition.name: 'fadeInOut' config.body.transition.duration: '1000ms' migrantWorkers: 'I feel ' domesticViolence: 'I feel ' liftCare: 'I feel ' thankYourFrontliners: '' thankYourRiders: '' myName: '' takeLift: false submitForm: false -- Most of us have never spent so much time in our homes and neighbourhoods before. In the past few months, the spaces we live in have changed a lot, and those changes have stirred up mixed emotions. [after 2 seconds] Let’s take a virtual walk together. [after 4 seconds] {embed image: 'feet.png', alt: 'Picture of feet, leaving the house' } [[Take the stairs->Stairs]] [[Take the lift->Lift]]

{embed image: 'corridor.png', alt: 'Picture of open window of flat with husband and wife fighting inside' } [after 1500 ms] From April to May 2020, over 450 cases of domestic violence were reported to the police. [after 3 seconds;append] That’s an increase of 22% compared with the monthly average before the circuit breaker period. [after 5 seconds] For some, home means safety. For others, it’s a dangerous place. [after 7 seconds] _How I feel about this_ \ {text input for: 'domesticViolence', required: false} [after 9 seconds] [[Go to coffeeshop->Pass a nurse]] [[Go to playground->Playground]] [[Walk along the park connector->Park Connector]]

takeLift: true -- {embed image: 'lift.png', alt: 'Picture of interior of lift, litter on ground, hand sanitizer strapped on grab bar' } [after 1500ms] You notice litter and then it clicks - the quarantine of migrant workers during the circuit breaker meant some cleaners stopped work. [after 3 seconds] _How I feel about this_ \ {text input for: 'migrantWorkers', required: false} {embed passage: 'Lift 2'}

{embed image: 'coffeeshop.png', alt: 'Picture of coffeeshop' } [after 1500ms] For months, our coffee shops looked like this. Who disappeared from this familiar space? [after 2500ms] The elderly cleaner. [after 3500ms; append] The beer promoter aunty. [after 4500ms; append] What has happened to them? [after 6 seconds] [[Walk along the park connector->Park Connector]] [[Go to playground->Playground]] [[Time to go home->It starts to rain]]

<div id="cf"> <img class="bottom" alt="playground" src="playground_open.png" /> <img class="top" alt="playground-open" src="playground.jpg" /> </div> [after 2000ms] Playgrounds have reopened. For months, they were out of bounds. The activities we once took for granted feel like a special treat now. [after 5 seconds] [[Go to coffeeshop->Pass a nurse]] [[Walk along the park connector->Park Connector]] [[Time to go home->It starts to rain]]

{embed image: 'park.png', alt: 'Long shot of park connector' } [after 1500ms] Grass cutting has been reduced and wildflowers have sprouted in some patches. [after 2500ms] {embed image: 'wildflowers.png', alt: 'Close up of wildflowers' } [after 4 seconds] There’s beauty around us if we pay attention. [[Here's a colouring activity for children->https://letstakeawalk.netlify.app/wildflowers.pdf]] [after 6 seconds] [[Go to coffeeshop->Pass a nurse]] [[Go to playground->Playground]] [[Time to go home->It starts to rain]]

neighbourhood: '' -- Neighbourhood Map {embed image: 'map.png', alt: 'Map of the neighbourhood' } How did you feel during the walk? \ Share your thoughts here. Name: {text input for: 'myName', required: false} Home is at (please enter neighbourhood): {text input for: 'neighbourhood', required: false} [if takeLift] The migrant workers who clean our estates: {text input for: 'migrantWorkers', required: false} Neighbours stepping up: {text input for: 'liftCare', required: false} [else] On the rise in domestic violence: {text input for: 'domesticViolence', required: false} [cont] The frontliners in our midst: {text input for: 'thankYourFrontliners', required: false} Delivery riders who serve: {text input for: 'thankYourRiders', required: false} [[Next->CTA]]

[after 5 seconds] But some people also stepped up to care and share in practical ways. [after 7 seconds] _How I feel about this_ \ {text input for: 'liftCare', required: false} [after 9 seconds] [[Go to coffeeshop->Pass a nurse]] [[Go to playground->Playground]] [[Walk along the park connector->Park Connector]]

{embed image: 'voiddeck.png', alt: 'Picture of an Indian nurse at the void deck' } [after 1500ms] You pass someone at the void deck and take a second look. Like many frontliners, she’s putting herself at risk to keep the rest of us safe. [after 3 seconds] What’s one kind thing you could do to thank the next one you meet in your neighbourhood? [after 5 seconds] _One way I can say thank you_ \ {text input for: 'thankYourFrontliners', required: false} [[Here's a thank-you card for children to colour->https://letstakeawalk.netlify.app/postcard.pdf]] [after 7 seconds] [[Continue to coffeeshop->Coffee Shop]]

{embed image: 'delivery.png', alt: 'Picture of delivery rider in the rain' } [after 1500ms] It rains suddenly. \ But not everyone can get off the streets and go home. \ How could you show appreciation to the next delivery rider who comes to your doorstep? [after 4000ms] _How I could thank the next delivery rider I meet_ \ {text input for: 'thankYourRiders', required: false} [after 6 seconds] [[The End]]

[CSS] img:hover{ opacity: 0.5; } .img__wrap { position: relative; height: 200px; width: 257px; } .img__description { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(29, 106, 154, 0.72); color: #fff; visibility: hidden; opacity: 0; /* transition effect. not necessary */ transition: opacity .2s, visibility .2s; } .img__wrap:hover .img__description { visibility: visible; opacity: 1; } [cont] <div style="display:flex;flex-direction:row;"> <div class="img__wrap" style="flex: 1;margin-right:20px"> {embed Unsplash image: 'https://unsplash.com/photos/Na0BbqKbfAo', alt: 'the moon'} <div class="img__description">This image looks super neat.</div> </div> <div style="flex:1"> [append] [after 1500ms] The quarantine of migrant workers at some point during CB meant some cleaning services in our estates had to be cut back. [after 3500ms] How do I feel about this? \ {text input for: 'migrantWorkers', required: false} [[Next->Ground Floor]] </div> </div>

Thank you {myName} for taking the walk with us. Click [[here->https://www.braveheart.sg/neighbours-m1-walk-results]] to read what others have written. {restart link, label: 'Restart the walk'} [Javascript] const url = 'https://braveheart.sg/_functions/new_walk' if (!engine.state.get('submitForm')){ engine.state.set('submitForm', true); fetch(url, { method: 'POST', headers: { 'Content-Type': 'text/plain' }, body: JSON.stringify({ name: engine.state.get('myName'), neighbourhood: engine.state.get('neighbourhood'), onMigrantWorkers: engine.state.get('migrantWorkers'), onNeighbours: engine.state.get('liftCare'), onDomesticViolence: engine.state.get('domesticViolence'), onThankingRiders: engine.state.get('thankYourRiders'), onThankingFrontliners: engine.state.get('thankYourFrontliners') }) }).then(() => document.location.href = "https://www.braveheart.sg/neighbours-m1-walk-results"); }