Difference between revisions of "Widget:Compass"

From LINKS Community Center
Jump to: navigation, search
 
(30 intermediate revisions by 2 users not shown)
Line 10: Line 10:
  
 
         h2.opened .plus.icon::after,
 
         h2.opened .plus.icon::after,
−
         h3.opened .plus.icon::after {
+
         h3.opened .plus.icon::after,
 +
        h4.opened .plus.icon::after {
 
             transform: rotate(0);
 
             transform: rotate(0);
 
         }
 
         }
Line 26: Line 27:
 
             letter-spacing: .06em;
 
             letter-spacing: .06em;
 
             position: relative;
 
             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;
 
         }
 
         }
  
Line 43: Line 55:
 
             color: var(--compass-color);
 
             color: var(--compass-color);
 
             cursor: pointer;
 
             cursor: pointer;
 +
            transition: all 0.4s ease;
 
         }
 
         }
  
Line 49: Line 62:
 
             display: block;
 
             display: block;
 
             position: absolute;
 
             position: absolute;
−
             left: 0;
+
             left: 1.2em;
 
             bottom: 0;
 
             bottom: 0;
 
             width: 100%;
 
             width: 100%;
Line 71: Line 84:
 
         .subtheme {
 
         .subtheme {
 
             margin-bottom: 2em;
 
             margin-bottom: 2em;
 +
            margin-left: 2em;
 
         }
 
         }
  
 
         .question {
 
         .question {
 
             font-size: 1.1em;
 
             font-size: 1.1em;
−
             padding-left: 2em;
+
             padding-left: 1.65em;
 
             cursor: pointer;
 
             cursor: pointer;
 
             margin-bottom: 1em;
 
             margin-bottom: 1em;
Line 81: Line 95:
  
 
         .answer {
 
         .answer {
−
             margin: 1.4em;
+
             margin: 1em 1.8em;
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
         }
 
         }
Line 118: Line 132:
 
             align-items: center;
 
             align-items: center;
 
             padding: 1em;
 
             padding: 1em;
−
             border: 1px solid currentColor;
+
            color: #fff;
 +
             border: 1px solid;
 +
            /* border-radius: 10px; */
 
         }
 
         }
  
Line 149: Line 165:
 
         .choice.safe {
 
         .choice.safe {
 
             color: var(--safe-color);
 
             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 {
 
         .choice.tech:hover .button {
−
             background-color: var(--links-blue);
+
             color: var(--links-blue);
−
            color: #fff;
 
 
         }
 
         }
  
 
         .choice.guide:hover .button {
 
         .choice.guide:hover .button {
−
             background-color: var(--links-orange);
+
             color: var(--links-orange);
−
            color: #fff;
 
 
         }
 
         }
  
 
         .choice.case:hover .button {
 
         .choice.case:hover .button {
−
             background-color: var(--links-cyan);
+
             color: var(--links-cyan);
−
            color: #fff;
 
 
         }
 
         }
  
 
         .choice.handbook:hover .button {
 
         .choice.handbook:hover .button {
−
             background-color: var(--handbook-color);
+
             color: var(--handbook-color);
−
            color: #fff;
 
 
         }
 
         }
  
 
         .choice.safe:hover .button {
 
         .choice.safe:hover .button {
−
             background-color: var(--safe-color);
+
             color: var(--safe-color);
−
            color: #fff;
 
 
         }
 
         }
 
     </style>
 
     </style>
Line 238: Line 278:
 
                 main themes &ndash; Engaging with Citizens and Improving Communication &ndash; so that disaster
 
                 main themes &ndash; Engaging with Citizens and Improving Communication &ndash; so that disaster
 
                 management
 
                 management
−
                 organizations and relevant stakeholders can take more informed decisions on the uses of SMCS through the
+
                 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 251: Line 292:
 
             <h2>Engaging with Citizens</h2>
 
             <h2>Engaging with Citizens</h2>
 
             <div class="subtheme">
 
             <div class="subtheme">
−
                 <h3>Collecting and Analysing Information from SMCS</h3>
+
                 <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 263: Line 304:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Helpful examples around the theme “Collecting and Analysing Information
−
                                    examples around the theme “Collecting and Analysing Information from SMCS”. Also the
+
                                     from Social Media and Crowdsourcing”.
−
                                     question, which vulnerable groups (disabled, migrants, minorities,…) were
 
−
                                    specifically involved in social media and crowdsourcing activities is answered.
 
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 272: Line 311:
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     The Guidelines Library will provide guidance to all interested
+
                                     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 social media and crowdsourcing.
+
                                     to collect, analyse and use information from Social Media and Crowdsourcing.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 281: Line 320:
 
                 </div>
 
                 </div>
 
                 <div class="question" data-aspect="Socio-/Technical">
 
                 <div class="question" data-aspect="Socio-/Technical">
−
                     How can you collect and analyse information?
+
                     <h4>
 +
                        How can you collect and analyse information?
 +
                    </h4>
  
 
                     <div class="answer">
 
                     <div class="answer">
Line 288: Line 329:
 
                                 <div class="button">Technologies</div>
 
                                 <div class="button">Technologies</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It allows filtering for software that covers the functions Search &
+
                                     Technologies that cover the functions “Search & Monitor” and “Analysis”
−
                                     Monitor and Analysis of information from social media.
+
                                     of information from Social Media and Crowdsourcing.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 295: 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
−
                                    Library will help stakeholders retrieve relevant SMCS guidelines to better mobilise
+
                                    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 303: Line 344:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Helpful examples around the theme “Collecting and Analysing Information
−
                                    examples around the theme “Collecting and Analysing Information from SMCS”. Also the
+
                                     from Social Media and Crowdsourcing”.
−
                                     question, which specific functionality SMCS has been used for and how (e.g.
 
−
                                    gathering of information) is answered.
 
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 316: 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">
Line 323: Line 364:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Helpful information from Social Media and Crowdsourcing
 
                                     examples around the theme “Mobilising Citizens”.
 
                                     examples around the theme “Mobilising Citizens”.
 
                                 </div>
 
                                 </div>
Line 330: Line 371:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides a toolkit that targets communication to citizens with diverse needs for
+
                                     Toolkit that targets communication to citizens with diverse needs for
 
                                     information on disaster management processes.
 
                                     information on disaster management processes.
 
                                 </div>
 
                                 </div>
Line 338: Line 379:
 
                 </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">
Line 345: Line 388:
 
                                 <div class="button">Technologies</div>
 
                                 <div class="button">Technologies</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It allows filtering for software that covers the function Post &
+
                                     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 352: Line 395:
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     This Guidelines Library includes relevant guidelines that will support all
+
                                     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 362: Line 405:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Social Media and Crowdsourcing
 
                                     examples around the theme “Mobilising Citizens”.
 
                                     examples around the theme “Mobilising Citizens”.
 
                                 </div>
 
                                 </div>
Line 369: Line 412:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It is an educational platform promoting the use of social media, digital education
+
                                     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 381: 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>
−
                    positions would you want mobility-affiliated information?
+
                        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">
Line 389: Line 434:
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     This Guidelines Library offers guidance to all interested stakeholders on a wide
+
                                     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 397: Line 442:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Social Media and Crowdsourcing
 
                                     examples around the theme “Mobilising Volunteers”.
 
                                     examples around the theme “Mobilising Volunteers”.
 
                                 </div>
 
                                 </div>
Line 404: Line 449:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides a toolkit that targets communication to citizens with diverse needs for
+
                                     Toolkit that targets communication to citizens with diverse needs for
 
                                     information on disaster management processes.
 
                                     information on disaster management processes.
 
                                 </div>
 
                                 </div>
Line 411: Line 456:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It is an educational platform promoting the use of social media, digital education
+
                                     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 420: Line 465:
 
                 </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">
Line 427: Line 474:
 
                                 <div class="button">Technologies</div>
 
                                 <div class="button">Technologies</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It allows filtering for software that covers the function Post &
+
                                     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 434: Line 481:
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     This Guidelines Library includes relevant guidelines that will support interested
+
                                     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 443: Line 490:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Social Media and Crowdsourcing
 
                                     examples around the theme “Mobilising Volunteers”.
 
                                     examples around the theme “Mobilising Volunteers”.
 
                                 </div>
 
                                 </div>
Line 450: Line 497:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It is an educational platform promoting the use of social media, digital education
+
                                     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 466: 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">
Line 473: Line 522:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Social Media and Crowdsourcing
 
                                     examples around the theme “Making Information Accessible”.
 
                                     examples around the theme “Making Information Accessible”.
 
                                 </div>
 
                                 </div>
Line 480: Line 529:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides a toolkit that targets communication to citizens with diverse needs for
+
                                     Toolkit that targets communication to citizens with diverse needs for
 
                                     information on disaster management processes.
 
                                     information on disaster management processes.
 
                                 </div>
 
                                 </div>
Line 487: Line 536:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It is an educational platform promoting the use of social media, digital education
+
                                     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 496: Line 545:
 
                 </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">
Line 503: Line 554:
 
                                 <div class="button">Technologies</div>
 
                                 <div class="button">Technologies</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It allows filtering for software that covers the function Post &
+
                                     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 510: Line 561:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Social Media and Crowdsourcing
 
                                     examples around the theme “Making Information Accessible”.
 
                                     examples around the theme “Making Information Accessible”.
 
                                 </div>
 
                                 </div>
Line 517: Line 568:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides a toolkit that targets communication to citizens with diverse needs for
+
                                     Toolkit that targets communication to citizens with diverse needs for
 
                                     information on disaster management processes.
 
                                     information on disaster management processes.
 
                                 </div>
 
                                 </div>
Line 524: Line 575:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It is an educational platform promoting the use of social media, digital education
+
                                     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 536: 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">
Line 543: Line 596:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Social Media and Crowdsourcing
 
                                     examples around the theme “Targeting Communication”.
 
                                     examples around the theme “Targeting Communication”.
 
                                 </div>
 
                                 </div>
Line 550: Line 603:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides a toolkit that targets communication to citizens with diverse needs for
+
                                     Toolkit that targets communication to citizens with diverse needs for
 
                                     information on disaster management processes.
 
                                     information on disaster management processes.
 
                                 </div>
 
                                 </div>
Line 557: Line 610:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It is an educational platform promoting the use of social media, digital education
+
                                     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 566: Line 619:
 
                 </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">
Line 573: Line 628:
 
                                 <div class="button">Technologies</div>
 
                                 <div class="button">Technologies</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It allows filtering for software that covers the function Post &
+
                                     Technologies that cover the function "Post &
−
                                     Schedule, which aims at publishing information on social media. It is also possible
+
                                     Schedule", which aims at publishing information on social media.
−
                                    to filter by different platforms.
 
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 592: Line 646:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Social Media and Crowdsourcing
 
                                     examples around the theme “Targeting Communication”.
 
                                     examples around the theme “Targeting Communication”.
 
                                 </div>
 
                                 </div>
Line 599: Line 653:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It is an educational platform promoting the use of social media, digital education
+
                                     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 611: 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">
Line 619: Line 675:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Social Media and Crowdsourcing
 
                                     examples around the theme “Ensuring Credible Information”.
 
                                     examples around the theme “Ensuring Credible Information”.
 
                                 </div>
 
                                 </div>
Line 626: Line 682:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It is an educational platform promoting the use of social media, digital education
+
                                     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 635: Line 691:
 
                 </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">
Line 642: Line 700:
 
                                 <div class="button">Technologies</div>
 
                                 <div class="button">Technologies</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     There are no mature technologies on the market yet that can examine
+
                                     There are technologies that could help with assessing credible information
−
                                     information for credibility.
+
                                     by collecting various metrics.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 656: Line 714:
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="button">Use Cases</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It provides helpful information from social media and crowdsourcing
+
                                     Social Media and Crowdsourcing
 
                                     examples around the theme “Ensuring Credible Information”.
 
                                     examples around the theme “Ensuring Credible Information”.
 
                                 </div>
 
                                 </div>
Line 663: Line 721:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     It is an educational platform promoting the use of social media, digital education
+
                                     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 676: Line 734:
 
     <script>
 
     <script>
 
         // Attach plus icon to the title of expandable blocks.
 
         // Attach plus icon to the title of expandable blocks.
−
         document.querySelectorAll('.theme > h2, .subtheme > h3').forEach(el => {
+
         document.querySelectorAll('.theme > h2, .subtheme > h3, .question > h4').forEach(el => {
 
             const icon = document.createElement('div');
 
             const icon = document.createElement('div');
 
             icon.classList.add('plus', 'icon');
 
             icon.classList.add('plus', 'icon');
−
             el.appendChild(icon);
+
             el.insertBefore(icon, el.firstChild);
 
         });
 
         });
  
Line 685: 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').querySelector('.answer').classList.toggle('opened');
+
                    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');
 +
                });
 
             }
 
             }
−
            // if (event.target.classList.contains('question')) {
 
−
            //    event.target.querySelector('.answer')?.classList.toggle('opened');
 
−
            // }
 
 
         });
 
         });
  
Line 775: 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!


Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:Compass&oldid=9533"