Difference between revisions of "Widget:Compass"
From LINKS Community Center
(10 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 271: | 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 284: | 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 296: | 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 305: | 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 323: | 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 330: | 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 338: | 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 360: | 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 367: | 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 384: | 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 391: | 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 401: | 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 408: | 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 430: | 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 438: | 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 445: | 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 452: | 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 470: | 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 477: | 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 486: | 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 493: | 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 518: | 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 525: | 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 532: | 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 550: | 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 557: | 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 564: | 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 571: | 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 592: | 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 599: | 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 606: | 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 624: | 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 643: | 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 650: | 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 672: | 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 679: | 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 697: | 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 711: | 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 718: | 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 740: | 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') { | ||
− | document.querySelectorAll('H2').forEach( | + | document.querySelectorAll('H2').forEach(el => { |
− | if ( | + | if (el === event.target) el.classList.toggle('opened'); |
− | else | + | else el.classList.remove('opened'); |
}); | }); | ||
− | const | + | const group = event.target.closest('.theme'); |
− | document.querySelectorAll('.subtheme').forEach( | + | document.querySelectorAll('.subtheme').forEach(el => { |
− | if ( | + | if (group.contains(el)) el.classList.toggle('opened'); |
− | else | + | 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 835: | 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!