Difference between revisions of "Widget:Compass"
From LINKS Community Center
(13 intermediate revisions by 2 users not shown) | |||
Line 32: | Line 32: | ||
font-size: 1em; | font-size: 1em; | ||
font-weight: 300; | font-weight: 300; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | #cmp-container h4.opened { | ||
+ | font-size: 1em; | ||
+ | font-weight: 500; | ||
} | } | ||
Line 49: | Line 55: | ||
color: var(--compass-color); | color: var(--compass-color); | ||
cursor: pointer; | cursor: pointer; | ||
+ | transition: all 0.4s ease; | ||
} | } | ||
Line 55: | Line 62: | ||
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
− | left: | + | left: 1.2em; |
bottom: 0; | bottom: 0; | ||
width: 100%; | width: 100%; | ||
Line 88: | Line 95: | ||
.answer { | .answer { | ||
− | margin: 1. | + | margin: 1em 1.8em; |
font-size: 1.2rem; | font-size: 1.2rem; | ||
} | } | ||
Line 127: | Line 134: | ||
color: #fff; | color: #fff; | ||
border: 1px solid; | border: 1px solid; | ||
+ | /* border-radius: 10px; */ | ||
} | } | ||
Line 270: | Line 278: | ||
main themes – Engaging with Citizens and Improving Communication – so that disaster | main themes – Engaging with Citizens and Improving Communication – so that disaster | ||
management | management | ||
− | organizations and relevant stakeholders can take more informed decisions on the uses of | + | 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 | LINKS products. Orientation is supported by pre-defined questions that guide users towards the LINKS | ||
products. | products. | ||
Line 283: | Line 292: | ||
<h2>Engaging with 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"> | ||
<h4> | <h4> | ||
Line 295: | Line 304: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Helpful examples around the theme “Collecting and Analysing Information | |
− | + | from Social Media and Crowdsourcing”. | |
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 304: | Line 311: | ||
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Guidance for all interested | |
stakeholders, including disaster management organisations and practitioners, on how | stakeholders, including disaster management organisations and practitioners, on how | ||
− | to collect, analyse and use information from | + | to collect, analyse and use information from Social Media and Crowdsourcing. |
</div> | </div> | ||
</div> | </div> | ||
Line 322: | Line 329: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Technologies that cover the functions “Search & Monitor” and “Analysis” | |
− | + | of information from Social Media and Crowdsourcing. | |
</div> | </div> | ||
</div> | </div> | ||
Line 329: | Line 336: | ||
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | Several thematic search filters integrated within the Guidelines | + | Several thematic search filters integrated within the Guidelines Library will help |
− | + | stakeholders retrieve relevant Social Media and Crowdsourcing guidelines to better | |
− | and engage citizens, for instance, the "crowdsourcing" search filter. | + | mobilise and engage citizens, for instance, the "crowdsourcing" search filter. |
</div> | </div> | ||
</div> | </div> | ||
Line 337: | Line 344: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Helpful examples around the theme “Collecting and Analysing Information | |
− | + | from Social Media and Crowdsourcing”. | |
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 359: | Line 364: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Helpful information from Social Media and Crowdsourcing | |
examples around the theme “Mobilising Citizens”. | examples around the theme “Mobilising Citizens”. | ||
</div> | </div> | ||
Line 366: | Line 371: | ||
<div class="button">Including Citizens Handbook</div> | <div class="button">Including Citizens Handbook</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Toolkit that targets communication to citizens with diverse needs for | |
information on disaster management processes. | information on disaster management processes. | ||
</div> | </div> | ||
Line 383: | Line 388: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Technologies that cover the function "Post & | |
− | Schedule | + | Schedule" which aims at publishing information on social media. |
</div> | </div> | ||
</div> | </div> | ||
Line 390: | Line 395: | ||
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Guidelines that will support all | |
interested stakeholders, including disaster management organisations and | interested stakeholders, including disaster management organisations and | ||
practitioners, in mobilising citizens. It also includes search filters that will | practitioners, in mobilising citizens. It also includes search filters that will | ||
Line 400: | Line 405: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Mobilising Citizens”. | examples around the theme “Mobilising Citizens”. | ||
</div> | </div> | ||
Line 407: | Line 412: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 429: | Line 434: | ||
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Guidance for all interested stakeholders on a wide | |
range of disaster management issues, including guidance on how to further mobilise | range of disaster management issues, including guidance on how to further mobilise | ||
volunteers. | volunteers. | ||
Line 437: | Line 442: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Mobilising Volunteers”. | examples around the theme “Mobilising Volunteers”. | ||
</div> | </div> | ||
Line 444: | Line 449: | ||
<div class="button">Including Citizens Handbook</div> | <div class="button">Including Citizens Handbook</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Toolkit that targets communication to citizens with diverse needs for | |
information on disaster management processes. | information on disaster management processes. | ||
</div> | </div> | ||
Line 451: | Line 456: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 469: | Line 474: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Technologies that cover the function "Post & | |
− | Schedule, which aims at publishing information on social media. | + | Schedule", which aims at publishing information on social media. |
</div> | </div> | ||
</div> | </div> | ||
Line 476: | Line 481: | ||
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Guidelines that will support interested | |
stakeholders in mobilising volunteers, and search filters that will allow users to | stakeholders in mobilising volunteers, and search filters that will allow users to | ||
identify relevant sources more easily, such as the search filters "VOST" and | identify relevant sources more easily, such as the search filters "VOST" and | ||
− | "unaffiliated volunteers" | + | "unaffiliated volunteers". |
</div> | </div> | ||
</div> | </div> | ||
Line 485: | Line 490: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Mobilising Volunteers”. | examples around the theme “Mobilising Volunteers”. | ||
</div> | </div> | ||
Line 492: | Line 497: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 517: | Line 522: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Making Information Accessible”. | examples around the theme “Making Information Accessible”. | ||
</div> | </div> | ||
Line 524: | Line 529: | ||
<div class="button">Including Citizens Handbook</div> | <div class="button">Including Citizens Handbook</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Toolkit that targets communication to citizens with diverse needs for | |
information on disaster management processes. | information on disaster management processes. | ||
</div> | </div> | ||
Line 531: | Line 536: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 549: | Line 554: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Technologies that cover the function "Post & | |
− | Schedule, which aims at publishing information on social media. | + | Schedule", which aims at publishing information on social media. |
</div> | </div> | ||
</div> | </div> | ||
Line 556: | Line 561: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Making Information Accessible”. | examples around the theme “Making Information Accessible”. | ||
</div> | </div> | ||
Line 563: | Line 568: | ||
<div class="button">Including Citizens Handbook</div> | <div class="button">Including Citizens Handbook</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Toolkit that targets communication to citizens with diverse needs for | |
information on disaster management processes. | information on disaster management processes. | ||
</div> | </div> | ||
Line 570: | Line 575: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 591: | Line 596: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Targeting Communication”. | examples around the theme “Targeting Communication”. | ||
</div> | </div> | ||
Line 598: | Line 603: | ||
<div class="button">Including Citizens Handbook</div> | <div class="button">Including Citizens Handbook</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Toolkit that targets communication to citizens with diverse needs for | |
information on disaster management processes. | information on disaster management processes. | ||
</div> | </div> | ||
Line 605: | Line 610: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 623: | Line 628: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Technologies that cover the function "Post & | |
− | Schedule, which aims at publishing information on social media | + | Schedule", which aims at publishing information on social media. |
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 642: | Line 646: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Targeting Communication”. | examples around the theme “Targeting Communication”. | ||
</div> | </div> | ||
Line 649: | Line 653: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 671: | Line 675: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Ensuring Credible Information”. | examples around the theme “Ensuring Credible Information”. | ||
</div> | </div> | ||
Line 678: | Line 682: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 696: | Line 700: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | There are | + | There are technologies that could help with assessing credible information |
− | + | by collecting various metrics. | |
</div> | </div> | ||
</div> | </div> | ||
Line 710: | Line 714: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Ensuring Credible Information”. | examples around the theme “Ensuring Credible Information”. | ||
</div> | </div> | ||
Line 717: | Line 721: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 739: | Line 743: | ||
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.tagName === 'H4') { | if (event.target.tagName === 'H4') { | ||
− | event.target.classList.toggle('opened'); | + | document.querySelectorAll('H4').forEach(el => { |
− | event.target.closest('.question'). | + | 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'); | ||
+ | }); | ||
} | } | ||
}); | }); | ||
Line 826: | Line 854: | ||
[post]: true, | [post]: true, | ||
[metrics]: false, | [metrics]: false, | ||
+ | [report]: false, | ||
+ | [collab]: false, | ||
+ | [interop]: false, | ||
+ | [meta]: false, | ||
+ | } | ||
+ | } | ||
+ | }, | ||
+ | 'q12-tech': { | ||
+ | filter: { | ||
+ | functions: { | ||
+ | [search]: false, | ||
+ | [analysis]: false, | ||
+ | [post]: false, | ||
+ | [metrics]: true, | ||
[report]: false, | [report]: false, | ||
[collab]: false, | [collab]: false, |
Latest revision as of 17:14, 9 December 2022
Development version of the Compass.
Not ready for production!