Difference between revisions of "Widget:Compass"
From LINKS Community Center
(131 intermediate revisions by 3 users not shown) | |||
Line 3: | Line 3: | ||
<includeonly> | <includeonly> | ||
<style> | <style> | ||
+ | :root { | ||
+ | --compass-color: #C31980; | ||
+ | --handbook-color: #C2902D; | ||
+ | --safe-color: #80C319; | ||
+ | } | ||
+ | |||
+ | h2.opened .plus.icon::after, | ||
+ | h3.opened .plus.icon::after, | ||
+ | h4.opened .plus.icon::after { | ||
+ | transform: rotate(0); | ||
+ | } | ||
+ | |||
#cmp-container { | #cmp-container { | ||
font-family: 'Open Sans'; | font-family: 'Open Sans'; | ||
Line 14: | Line 26: | ||
font-weight: 300; | font-weight: 300; | ||
letter-spacing: .06em; | letter-spacing: .06em; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #cmp-container h4 { | ||
+ | font-size: 1em; | ||
+ | font-weight: 300; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | #cmp-container h4.opened { | ||
+ | font-size: 1em; | ||
+ | font-weight: 500; | ||
} | } | ||
#cmp-container h1 { | #cmp-container h1 { | ||
letter-spacing: .06em; | letter-spacing: .06em; | ||
+ | color: var(--compass-color); | ||
+ | } | ||
+ | |||
+ | #cmp-intro h1 svg { | ||
+ | height: 2em; | ||
+ | fill: var(--compass-color); | ||
} | } | ||
#cmp-container h2 { | #cmp-container h2 { | ||
− | margin-top: | + | margin-top: 1.5em; |
padding-bottom: 5px; | padding-bottom: 5px; | ||
− | + | color: var(--compass-color); | |
− | |||
cursor: pointer; | cursor: pointer; | ||
+ | transition: all 0.4s ease; | ||
} | } | ||
− | #cmp-container h2:: | + | #cmp-container h2::before { |
− | display: | + | content: ''; |
− | + | display: block; | |
− | transform: | + | position: absolute; |
− | + | left: 1.2em; | |
+ | bottom: 0; | ||
+ | width: 100%; | ||
+ | height: 1px; | ||
+ | background-color: currentColor; | ||
+ | letter-spacing: .06em; | ||
+ | transition: all 0.4s ease; | ||
+ | transform: scaleX(0); | ||
+ | transform-origin: bottom left; | ||
} | } | ||
− | #cmp-container h2.opened:: | + | #cmp-container h2.opened::before { |
− | transform: | + | transform: scaleX(1); |
} | } | ||
#cmp-container h3 { | #cmp-container h3 { | ||
− | font- | + | font-size: 1.4em; |
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.subtheme { | .subtheme { | ||
− | + | margin-bottom: 2em; | |
+ | margin-left: 2em; | ||
} | } | ||
.question { | .question { | ||
− | font-size: 1. | + | font-size: 1.1em; |
− | padding-left: | + | padding-left: 1.65em; |
cursor: pointer; | cursor: pointer; | ||
+ | margin-bottom: 1em; | ||
} | } | ||
− | . | + | .answer { |
− | + | margin: 1em 1.8em; | |
+ | font-size: 1.2rem; | ||
} | } | ||
Line 68: | Line 109: | ||
.answer.opened { | .answer.opened { | ||
display: block; | display: block; | ||
+ | } | ||
+ | |||
+ | .answer-wrapper { | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr; | ||
+ | gap: 1em; | ||
+ | } | ||
+ | |||
+ | .choice { | ||
+ | display: flex; | ||
+ | flex-flow: row nowrap; | ||
+ | justify-content: flex-start; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | .choice .button { | ||
+ | flex: 0 0 8.2em; | ||
+ | white-space: nowrap; | ||
+ | transition: all 250ms; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | padding: 1em; | ||
+ | color: #fff; | ||
+ | border: 1px solid; | ||
+ | /* border-radius: 10px; */ | ||
+ | } | ||
+ | |||
+ | .choice .desc { | ||
+ | font-size: 75%; | ||
+ | padding-left: 1em; | ||
+ | transition: all 250ms; | ||
+ | } | ||
+ | |||
+ | .choice:hover .desc { | ||
+ | font-weight: 600; | ||
+ | } | ||
+ | |||
+ | .choice.tech { | ||
+ | color: var(--links-blue); | ||
+ | } | ||
+ | |||
+ | .choice.guide { | ||
+ | color: var(--links-orange); | ||
+ | } | ||
+ | |||
+ | .choice.case { | ||
+ | color: var(--links-cyan); | ||
+ | } | ||
+ | |||
+ | .choice.handbook { | ||
+ | color: var(--handbook-color); | ||
+ | } | ||
+ | |||
+ | .choice.safe { | ||
+ | color: var(--safe-color); | ||
+ | } | ||
+ | |||
+ | .choice.tech .button { | ||
+ | background-color: var(--links-blue); | ||
+ | border-color: var(--links-blue); | ||
+ | } | ||
+ | |||
+ | .choice.guide .button { | ||
+ | background-color: var(--links-orange); | ||
+ | border-color: var(--links-orange); | ||
+ | } | ||
+ | |||
+ | .choice.case .button { | ||
+ | background-color: var(--links-cyan); | ||
+ | border-color: var(--links-cyan); | ||
+ | } | ||
+ | |||
+ | .choice.handbook .button { | ||
+ | background-color: var(--handbook-color); | ||
+ | border-color: var(--handbook-color); | ||
+ | } | ||
+ | |||
+ | .choice.safe .button { | ||
+ | background-color: var(--safe-color); | ||
+ | border-color: var(--safe-color); | ||
+ | } | ||
+ | |||
+ | .choice:hover .button { | ||
+ | background-color: #fff; | ||
+ | } | ||
+ | |||
+ | .choice.tech:hover .button { | ||
+ | color: var(--links-blue); | ||
+ | } | ||
+ | |||
+ | .choice.guide:hover .button { | ||
+ | color: var(--links-orange); | ||
+ | } | ||
+ | |||
+ | .choice.case:hover .button { | ||
+ | color: var(--links-cyan); | ||
+ | } | ||
+ | |||
+ | .choice.handbook:hover .button { | ||
+ | color: var(--handbook-color); | ||
+ | } | ||
+ | |||
+ | .choice.safe:hover .button { | ||
+ | color: var(--safe-color); | ||
} | } | ||
</style> | </style> | ||
<div id="cmp-container"> | <div id="cmp-container"> | ||
+ | <div id="cmp-intro"> | ||
+ | <h1> | ||
+ | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="prefix__Livello_1" x="0" y="0" | ||
+ | version="1.1" viewBox="0 0 128 128"> | ||
+ | <defs id="prefix__defs43"> | ||
+ | <path id="prefix__rect345" d="M977.382 473.479h642.714v494.395H977.382z" /> | ||
+ | </defs> | ||
+ | <style id="style2" type="text/css"> | ||
+ | .prefix__st0 { | ||
+ | fill: #fff | ||
+ | } | ||
+ | |||
+ | .prefix__st1 { | ||
+ | fill: var(--compass-color) | ||
+ | } | ||
+ | |||
+ | .prefix__st2 { | ||
+ | fill: var(--compass-color) | ||
+ | } | ||
+ | </style> | ||
+ | <g id="prefix__g38" transform="translate(-585.75 -578.105)"> | ||
+ | <ellipse id="prefix__circle4" cx="649.905" cy="642.245" stroke-width=".116" class="prefix__st0" | ||
+ | rx="49.012" ry="48.98" /> | ||
+ | <path id="prefix__path6" stroke-width=".116" | ||
+ | d="M649.905 587.962c-30 0-54.32 24.303-54.32 54.283s24.32 54.284 54.32 54.284 54.32-24.303 54.32-54.284c-.002-29.98-24.321-54.283-54.32-54.283zm0 101.565c-26.13 0-47.313-21.169-47.313-47.282 0-26.113 21.183-47.281 47.313-47.281 26.13 0 47.313 21.168 47.313 47.281s-21.183 47.282-47.313 47.282z" | ||
+ | class="prefix__st1" /> | ||
+ | <g id="prefix__g16" transform="matrix(.11647 0 0 .11639 574.077 567.372)"> | ||
+ | <path id="prefix__polygon8" d="m649.51 640.66 38.15 143.56 291.19 185.79-185.78-291.2z" | ||
+ | class="prefix__st2" /> | ||
+ | <path id="prefix__polygon10" d="m650.21 641.36-38.15-143.55-291.19-185.79 185.79 291.2z" | ||
+ | class="prefix__st2" /> | ||
+ | <path id="prefix__polygon12" d="M650.24 640.25 506.68 678.4 320.9 969.6l291.19-185.79z" | ||
+ | class="prefix__st2" /> | ||
+ | <path id="prefix__polygon14" d="m649.97 640.52 143.56-38.15 185.79-291.19-291.2 185.78z" | ||
+ | class="prefix__st2" /> | ||
+ | </g> | ||
+ | <path id="prefix__path18" stroke-width=".116" | ||
+ | d="M649.905 603.864c-21.21 0-38.406 17.184-38.406 38.38 0 21.197 17.195 38.38 38.406 38.38 21.21 0 38.405-17.183 38.405-38.38 0-21.196-17.194-38.38-38.405-38.38zm0 74.706c-20.075 0-36.35-16.263-36.35-36.326s16.274-36.325 36.35-36.325 36.35 16.263 36.35 36.326-16.275 36.325-36.35 36.325z" | ||
+ | class="prefix__st1" /> | ||
+ | <g id="prefix__g28" transform="matrix(.11647 0 0 .11639 574.077 567.372)"> | ||
+ | <path id="prefix__polygon20" d="m649.16 642.83 151.75 88.04 398.36-88.04-398.36-88.03z" | ||
+ | class="prefix__st2" /> | ||
+ | <path id="prefix__polygon22" d="M650.33 642.83 498.58 554.8l-398.35 88.03 398.35 88.04z" | ||
+ | class="prefix__st2" /> | ||
+ | <path id="prefix__polygon24" d="M649.43 641.88 561.4 793.64l88.03 398.35 88.03-398.35z" | ||
+ | class="prefix__st2" /> | ||
+ | <path id="prefix__polygon26" d="m649.43 642.33 88.03-151.75-88.03-398.36-88.03 398.36z" | ||
+ | class="prefix__st2" /> | ||
+ | </g> | ||
+ | <ellipse id="prefix__circle30" cx="649.769" cy="642.189" stroke-width=".116" class="prefix__st0" | ||
+ | rx="13.741" ry="13.731" /> | ||
+ | </g> | ||
+ | </svg> | ||
+ | Compass | ||
+ | </h1> | ||
+ | |||
+ | <p class="lead"> | ||
+ | The LINKS Framework, like a compass, aims to support navigation and orientation within and across two | ||
+ | main themes – Engaging with Citizens and Improving Communication – so that disaster | ||
+ | management | ||
+ | organizations and relevant stakeholders can take more informed decisions on the uses of Social Media and | ||
+ | Crowdsourcing through the | ||
+ | LINKS products. Orientation is supported by pre-defined questions that guide users towards the LINKS | ||
+ | products. | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | <div style="font-size: larger; text-align: center; margin-top: 2.5em; "> | ||
+ | Please select the themes you are interested in below. | ||
+ | </div> | ||
+ | |||
<div class="theme"> | <div class="theme"> | ||
− | <h2>Engaging Citizens</h2> | + | <h2>Engaging with Citizens</h2> |
<div class="subtheme"> | <div class="subtheme"> | ||
− | <h3>Collecting and Analysing Information from | + | <h3>Collecting and Analysing Information from Social Media and Crowdsourcing</h3> |
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Whom do you want to include in your collection and analysis of information, and from whom do you | + | <h4> |
− | + | Whom do you want to include in your collection and analysis of information, and from whom do you | |
+ | want to collect and analyse information? | ||
+ | </h4> | ||
− | <div class="answer"> | + | <div class="answer"> |
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice case" id="q1-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Helpful examples around the theme “Collecting and Analysing Information | ||
+ | from Social Media and Crowdsourcing”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice guide" id="q1-guide"> | ||
+ | <div class="button">Guidelines</div> | ||
+ | <div class="desc"> | ||
+ | Guidance for all interested | ||
+ | stakeholders, including disaster management organisations and practitioners, on how | ||
+ | to collect, analyse and use information from Social Media and Crowdsourcing. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How | + | <h4> |
+ | How can you collect and analyse information? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice tech" id="q2-tech"> | ||
+ | <div class="button">Technologies</div> | ||
+ | <div class="desc"> | ||
+ | Technologies that cover the functions “Search & Monitor” and “Analysis” | ||
+ | of information from Social Media and Crowdsourcing. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice guide" id="q2-guide"> | ||
+ | <div class="button">Guidelines</div> | ||
+ | <div class="desc"> | ||
+ | Several thematic search filters integrated within the Guidelines Library will help | ||
+ | stakeholders retrieve relevant Social Media and Crowdsourcing guidelines to better | ||
+ | mobilise and engage citizens, for instance, the "crowdsourcing" search filter. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice case" id="q2-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Helpful examples around the theme “Collecting and Analysing Information | ||
+ | from Social Media and Crowdsourcing”. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 89: | Line 355: | ||
<h3>Mobilising Citizens</h3> | <h3>Mobilising Citizens</h3> | ||
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Who do you want to mobilise, and from whom would you want mobility-affiliated information? | + | <h4> |
+ | Who do you want to mobilise, and from whom would you want mobility-affiliated information? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice case" id="q3-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Helpful information from Social Media and Crowdsourcing | ||
+ | examples around the theme “Mobilising Citizens”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice handbook" id="q3-handbook"> | ||
+ | <div class="button">Including Citizens Handbook</div> | ||
+ | <div class="desc"> | ||
+ | Toolkit that targets communication to citizens with diverse needs for | ||
+ | information on disaster management processes. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you mobilise the citizens? | + | <h4> |
+ | How can you mobilise the citizens? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice tech" id="q4-tech"> | ||
+ | <div class="button">Technologies</div> | ||
+ | <div class="desc"> | ||
+ | Technologies that cover the function "Post & | ||
+ | Schedule" which aims at publishing information on social media. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice guide" id="q4-guide"> | ||
+ | <div class="button">Guidelines</div> | ||
+ | <div class="desc"> | ||
+ | Guidelines that will support all | ||
+ | interested stakeholders, including disaster management organisations and | ||
+ | practitioners, in mobilising citizens. It also includes search filters that will | ||
+ | allow users to identify relevant sources more easily, such as the "community | ||
+ | management" search filter. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice case" id="q4-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Social Media and Crowdsourcing | ||
+ | examples around the theme “Mobilising Citizens”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice safe" id="q4-safe"> | ||
+ | <div class="button">Feel Safe</div> | ||
+ | <div class="desc"> | ||
+ | Educational platform promoting the use of social media, digital education | ||
+ | and information accessibility to enhance children engagement in disaster prevention | ||
+ | and preparedness. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 98: | Line 424: | ||
<h3>Mobilising Volunteers</h3> | <h3>Mobilising Volunteers</h3> | ||
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Who do you want to mobilise (interested in volunteering), and from whom in such volunteering | + | <h4> |
− | + | Who do you want to mobilise (interested in volunteering), and from whom in such volunteering | |
+ | positions would you want mobility-affiliated information? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice guide" id="q5-guide"> | ||
+ | <div class="button">Guidelines</div> | ||
+ | <div class="desc"> | ||
+ | Guidance for all interested stakeholders on a wide | ||
+ | range of disaster management issues, including guidance on how to further mobilise | ||
+ | volunteers. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice case" id="q5-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Social Media and Crowdsourcing | ||
+ | examples around the theme “Mobilising Volunteers”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice handbook" id="q5-handbook"> | ||
+ | <div class="button">Including Citizens Handbook</div> | ||
+ | <div class="desc"> | ||
+ | Toolkit that targets communication to citizens with diverse needs for | ||
+ | information on disaster management processes. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice safe" id="q5-safe"> | ||
+ | <div class="button">Feel Safe</div> | ||
+ | <div class="desc"> | ||
+ | Educational platform promoting the use of social media, digital education | ||
+ | and information accessibility to enhance children engagement in disaster prevention | ||
+ | and preparedness. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you mobilise the volunteers? | + | <h4> |
+ | How can you mobilise the volunteers? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice tech" id="q6-tech"> | ||
+ | <div class="button">Technologies</div> | ||
+ | <div class="desc"> | ||
+ | Technologies that cover the function "Post & | ||
+ | Schedule", which aims at publishing information on social media. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice guide" id="q6-guide"> | ||
+ | <div class="button">Guidelines</div> | ||
+ | <div class="desc"> | ||
+ | Guidelines that will support interested | ||
+ | stakeholders in mobilising volunteers, and search filters that will allow users to | ||
+ | identify relevant sources more easily, such as the search filters "VOST" and | ||
+ | "unaffiliated volunteers". | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice case" id="q6-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Social Media and Crowdsourcing | ||
+ | examples around the theme “Mobilising Volunteers”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice safe" id="q6-safe"> | ||
+ | <div class="button">Feel Safe</div> | ||
+ | <div class="desc"> | ||
+ | Educational platform promoting the use of social media, digital education | ||
+ | and information accessibility to enhance children engagement in disaster prevention | ||
+ | and preparedness. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 112: | Line 513: | ||
<h3>Making Information Accessible</h3> | <h3>Making Information Accessible</h3> | ||
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Who do you want to access your information, and from whom do you want to access information? | + | <h4> |
+ | Who do you want to access your information, and from whom do you want to access information? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice case" id="q7-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Social Media and Crowdsourcing | ||
+ | examples around the theme “Making Information Accessible”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice handbook" id="q7-handbook"> | ||
+ | <div class="button">Including Citizens Handbook</div> | ||
+ | <div class="desc"> | ||
+ | Toolkit that targets communication to citizens with diverse needs for | ||
+ | information on disaster management processes. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice safe" id="q7-safe"> | ||
+ | <div class="button">Feel Safe</div> | ||
+ | <div class="desc"> | ||
+ | Educational platform promoting the use of social media, digital education | ||
+ | and information accessibility to enhance children engagement in disaster prevention | ||
+ | and preparedness. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you make your information accessible? | + | <h4> |
+ | How can you make your information accessible? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice tech" id="q8-tech"> | ||
+ | <div class="button">Technologies</div> | ||
+ | <div class="desc"> | ||
+ | Technologies that cover the function "Post & | ||
+ | Schedule", which aims at publishing information on social media. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice case" id="q8-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Social Media and Crowdsourcing | ||
+ | examples around the theme “Making Information Accessible”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice handbook" id="q8-handbook"> | ||
+ | <div class="button">Including Citizens Handbook</div> | ||
+ | <div class="desc"> | ||
+ | Toolkit that targets communication to citizens with diverse needs for | ||
+ | information on disaster management processes. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice safe" id="q8-safe"> | ||
+ | <div class="button">Feel Safe</div> | ||
+ | <div class="desc"> | ||
+ | Educational platform promoting the use of social media, digital education | ||
+ | and information accessibility to enhance children engagement in disaster prevention | ||
+ | and preparedness. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 121: | Line 587: | ||
<h3>Targeting Communication</h3> | <h3>Targeting Communication</h3> | ||
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Who do you want to target with your communication plan? | + | <h4> |
+ | Who do you want to target with your communication plan? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice case" id="q9-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Social Media and Crowdsourcing | ||
+ | examples around the theme “Targeting Communication”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice handbook" id="q9-handbook"> | ||
+ | <div class="button">Including Citizens Handbook</div> | ||
+ | <div class="desc"> | ||
+ | Toolkit that targets communication to citizens with diverse needs for | ||
+ | information on disaster management processes. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice safe" id="q9-safe"> | ||
+ | <div class="button">Feel Safe</div> | ||
+ | <div class="desc"> | ||
+ | Educational platform promoting the use of social media, digital education | ||
+ | and information accessibility to enhance children engagement in disaster prevention | ||
+ | and preparedness. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you target your communication? | + | <h4> |
+ | How can you target your communication? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice tech" id="q10-tech"> | ||
+ | <div class="button">Technologies</div> | ||
+ | <div class="desc"> | ||
+ | Technologies that cover the function "Post & | ||
+ | Schedule", which aims at publishing information on social media. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice guide" id="q10-guide"> | ||
+ | <div class="button">Guidelines</div> | ||
+ | <div class="desc"> | ||
+ | This Guidelines Library has been specifically designed to cater to the needs of | ||
+ | disaster management organisation and practitioners. Search filters have been | ||
+ | integrated in the product to optimise users' experience. One of the search filters | ||
+ | integrated in the product is "Vulnerable groups" and gathers relevant resources that | ||
+ | can support DMO and practitioners in targeting their communication efforts towards | ||
+ | specific groups. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice case" id="q10-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Social Media and Crowdsourcing | ||
+ | examples around the theme “Targeting Communication”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice safe" id="q10-safe"> | ||
+ | <div class="button">Feel Safe</div> | ||
+ | <div class="desc"> | ||
+ | Educational platform promoting the use of social media, digital education | ||
+ | and information accessibility to enhance children engagement in disaster prevention | ||
+ | and preparedness. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 130: | Line 665: | ||
<h3>Ensuring Credible Information</h3> | <h3>Ensuring Credible Information</h3> | ||
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Who do you want to share credible information with, and from whom do you receive credible | + | <h4> |
− | information | + | Who do you want to share credible information with, and from whom do you receive credible |
+ | information? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice case" id="q11-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Social Media and Crowdsourcing | ||
+ | examples around the theme “Ensuring Credible Information”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice safe" id="q11-safe"> | ||
+ | <div class="button">Feel Safe</div> | ||
+ | <div class="desc"> | ||
+ | Educational platform promoting the use of social media, digital education | ||
+ | and information accessibility to enhance children engagement in disaster prevention | ||
+ | and preparedness. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you ensure credible information exchange? | + | <h4> |
+ | How can you ensure credible information exchange? | ||
+ | </h4> | ||
+ | |||
+ | <div class="answer"> | ||
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice tech" id="q12-tech"> | ||
+ | <div class="button">Technologies</div> | ||
+ | <div class="desc"> | ||
+ | There are technologies that could help with assessing credible information | ||
+ | by collecting various metrics. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice guide" id="q12-guide"> | ||
+ | <div class="button">Guidelines</div> | ||
+ | <div class="desc"> | ||
+ | One of the search filters is "Verification" and gathers relevant resources that can | ||
+ | support DMO and practitioners in ensuring credibility of information. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice case" id="q12-case"> | ||
+ | <div class="button">Use Cases</div> | ||
+ | <div class="desc"> | ||
+ | Social Media and Crowdsourcing | ||
+ | examples around the theme “Ensuring Credible Information”. | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="choice safe" id="q12-safe"> | ||
+ | <div class="button">Feel Safe</div> | ||
+ | <div class="desc"> | ||
+ | Educational platform promoting the use of social media, digital education | ||
+ | and information accessibility to enhance children engagement in disaster prevention | ||
+ | and preparedness. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 140: | Line 733: | ||
</div> | </div> | ||
<script> | <script> | ||
+ | // Attach plus icon to the title of expandable blocks. | ||
+ | document.querySelectorAll('.theme > h2, .subtheme > h3, .question > h4').forEach(el => { | ||
+ | const icon = document.createElement('div'); | ||
+ | icon.classList.add('plus', 'icon'); | ||
+ | el.insertBefore(icon, el.firstChild); | ||
+ | }); | ||
+ | |||
+ | // Set up toggles for expandable blocks. | ||
document.getElementById('cmp-container').addEventListener('click', event => { | document.getElementById('cmp-container').addEventListener('click', event => { | ||
if (event.target.tagName === 'H2') { | if (event.target.tagName === 'H2') { | ||
− | event.target.classList.toggle('opened'); | + | document.querySelectorAll('H2').forEach(el => { |
− | event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened')); | + | if (el === event.target) el.classList.toggle('opened'); |
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
+ | |||
+ | const group = event.target.closest('.theme'); | ||
+ | document.querySelectorAll('.subtheme').forEach(el => { | ||
+ | if (group.contains(el)) el.classList.toggle('opened'); | ||
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
} | } | ||
if (event.target.tagName === 'H3') { | if (event.target.tagName === 'H3') { | ||
− | event.target.classList.toggle('opened'); | + | document.querySelectorAll('H3').forEach(el => { |
− | event.target.closest('.subtheme').querySelectorAll('.question').forEach(el => el.classList.toggle('opened')); | + | if (el === event.target) el.classList.toggle('opened'); |
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
+ | |||
+ | const group = event.target.closest('.subtheme'); | ||
+ | document.querySelectorAll('.question').forEach(el => { | ||
+ | if (group.contains(el)) el.classList.toggle('opened'); | ||
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
} | } | ||
− | if (event.target.classList. | + | if (event.target.tagName === 'H4') { |
− | event.target. | + | document.querySelectorAll('H4').forEach(el => { |
+ | if (el === event.target) el.classList.toggle('opened'); | ||
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
+ | |||
+ | const group = event.target.closest('.question'); | ||
+ | document.querySelectorAll('.answer').forEach(el => { | ||
+ | if (group.contains(el)) el.classList.toggle('opened'); | ||
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
} | } | ||
}); | }); | ||
+ | |||
+ | const search = 'Search and Monitor', | ||
+ | post = 'Post and Schedule', | ||
+ | analysis = 'Analysis', | ||
+ | metrics = 'Metrics', | ||
+ | report = 'Report', | ||
+ | collab = 'Collaboration', | ||
+ | interop = 'Interoperability', | ||
+ | meta = 'Meta'; | ||
+ | |||
+ | // Click actions. | ||
+ | const actions = { | ||
+ | 'q2-tech': { | ||
+ | filter: { | ||
+ | functions: { | ||
+ | [search]: true, | ||
+ | [analysis]: true, | ||
+ | [post]: false, | ||
+ | [metrics]: false, | ||
+ | [report]: false, | ||
+ | [collab]: false, | ||
+ | [interop]: false, | ||
+ | [meta]: false, | ||
+ | } | ||
+ | } | ||
+ | }, | ||
+ | 'q4-tech': { | ||
+ | filter: { | ||
+ | functions: { | ||
+ | [search]: false, | ||
+ | [analysis]: false, | ||
+ | [post]: true, | ||
+ | [metrics]: false, | ||
+ | [report]: false, | ||
+ | [collab]: false, | ||
+ | [interop]: false, | ||
+ | [meta]: false, | ||
+ | } | ||
+ | } | ||
+ | }, | ||
+ | 'q6-tech': { | ||
+ | filter: { | ||
+ | functions: { | ||
+ | [search]: false, | ||
+ | [analysis]: false, | ||
+ | [post]: true, | ||
+ | [metrics]: false, | ||
+ | [report]: false, | ||
+ | [collab]: false, | ||
+ | [interop]: false, | ||
+ | [meta]: false, | ||
+ | } | ||
+ | } | ||
+ | }, | ||
+ | 'q8-tech': { | ||
+ | filter: { | ||
+ | functions: { | ||
+ | [search]: false, | ||
+ | [analysis]: false, | ||
+ | [post]: true, | ||
+ | [metrics]: false, | ||
+ | [report]: false, | ||
+ | [collab]: false, | ||
+ | [interop]: false, | ||
+ | [meta]: false, | ||
+ | } | ||
+ | } | ||
+ | }, | ||
+ | 'q10-tech': { | ||
+ | filter: { | ||
+ | functions: { | ||
+ | [search]: false, | ||
+ | [analysis]: false, | ||
+ | [post]: true, | ||
+ | [metrics]: false, | ||
+ | [report]: false, | ||
+ | [collab]: false, | ||
+ | [interop]: false, | ||
+ | [meta]: false, | ||
+ | } | ||
+ | } | ||
+ | }, | ||
+ | 'q12-tech': { | ||
+ | filter: { | ||
+ | functions: { | ||
+ | [search]: false, | ||
+ | [analysis]: false, | ||
+ | [post]: false, | ||
+ | [metrics]: true, | ||
+ | [report]: false, | ||
+ | [collab]: false, | ||
+ | [interop]: false, | ||
+ | [meta]: false, | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | const handler = event => { | ||
+ | const answerId = event.currentTarget.id; | ||
+ | const act = actions[answerId]; | ||
+ | |||
+ | if (!actions) return; | ||
+ | |||
+ | if (answerId.indexOf('tech') !== -1) { | ||
+ | const enc = btoa(encodeURIComponent(JSON.stringify(act))); | ||
+ | window.location.assign('/index.php/List_of_Disaster_Community_Technologies' + (act ? '?do=' + enc : '')); | ||
+ | } | ||
+ | |||
+ | if (answerId.indexOf('case') !== -1) { | ||
+ | window.location.assign('/index.php/List_of_Use_Cases'); | ||
+ | } | ||
+ | |||
+ | if (answerId.indexOf('guide') !== -1) { | ||
+ | window.location.assign('/index.php/List_of_Guidelines'); | ||
+ | } | ||
+ | |||
+ | if (answerId.indexOf('safe') !== -1) { | ||
+ | window.location.assign('/index.php/Feel_Safe'); | ||
+ | } | ||
+ | |||
+ | if (answerId.indexOf('handbook') !== -1) { | ||
+ | window.location.assign('/index.php/Including_Citizens_Handbook_-_Accessibility'); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | document.querySelectorAll('.choice').forEach(el => el.addEventListener('click', handler, { passive: true })); | ||
+ | |||
</script> | </script> | ||
</includeonly> | </includeonly> |
Latest revision as of 17:14, 9 December 2022
Development version of the Compass.
Not ready for production!