Widget: Compass: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
 
(60 intermediate revisions by 3 users not shown)
Line 5: Line 5:
         :root {
         :root {
             --compass-color: #C31980;
             --compass-color: #C31980;
             --handbook-color: #C35C19;
             --handbook-color: #C2902D;
             --safe-color: #80C319;
             --safe-color: #80C319;
        }
        .plus.icon {
            color: currentColor;
            display: inline-block;
            position: relative;
            top: -.3em;
            margin-left: .5em;
        }
        .plus.icon::before {
            content: '';
            position: absolute;
            width: 1em;
            height: 1px;
            background-color: currentColor;
        }
        .plus.icon::after {
            content: '';
            position: absolute;
            width: 1em;
            height: 1px;
            background-color: currentColor;
            transform: rotate(90deg);
            transition: all 0.4s ease;
         }
         }


         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 52: 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;
         }
         }


         #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: 2em;
             margin-top: 1.5em;
             padding-bottom: 5px;
             padding-bottom: 5px;
             color: var(--compass-color);
             color: var(--compass-color);
             cursor: pointer;
             cursor: pointer;
            transition: all 0.4s ease;
         }
         }


Line 69: Line 62:
             display: block;
             display: block;
             position: absolute;
             position: absolute;
             left: 0;
             left: 1.2em;
             bottom: 0;
             bottom: 0;
             width: 100%;
             width: 100%;
Line 85: Line 78:


         #cmp-container h3 {
         #cmp-container h3 {
             font-weight: 1.4em;
             font-size: 1.4em;
             cursor: pointer;
             cursor: pointer;
         }
         }
Line 91: Line 84:
         .subtheme {
         .subtheme {
             margin-bottom: 2em;
             margin-bottom: 2em;
            margin-left: 2em;
         }
         }


         .question {
         .question {
             font-size: 1.2em;
             font-size: 1.1em;
             padding-left: 2em;
             padding-left: 1.65em;
             cursor: pointer;
             cursor: pointer;
             margin-bottom: 1em;
             margin-bottom: 1em;
        }
        .question::before {
            content: "→ ";
         }
         }


         .answer {
         .answer {
             margin: 1.4em;
             margin: 1em 1.8em;
             font-size: 1.2rem;
             font-size: 1.2rem;
         }
         }
Line 123: Line 113:
         .answer-wrapper {
         .answer-wrapper {
             display: grid;
             display: grid;
             grid-template-columns: 1fr 1fr;
             grid-template-columns: 1fr;
             gap: 1em;
             gap: 1em;
         }
         }
Line 131: Line 121:
             flex-flow: row nowrap;
             flex-flow: row nowrap;
             justify-content: flex-start;
             justify-content: flex-start;
             align-items: flex-start;
             align-items: center;
         }
         }


Line 142: 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 173: 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>


     <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 &ndash; Engaging with Citizens and Improving Communication &ndash; 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 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">
                     Whom do you want to include in your collection and analysis of information, and from whom do you
                     <h4>
                    want to collect and analyse information?
                        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">
Line 215: 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 224: 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 233: Line 320:
                 </div>
                 </div>
                 <div class="question" data-aspect="Socio-/Technical">
                 <div class="question" data-aspect="Socio-/Technical">
                     How to collect and analyse information from citizens?
                     <h4>
                        How can you collect and analyse information?
                    </h4>


                     <div class="answer">
                     <div class="answer">
Line 240: 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 247: 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 255: 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 268: 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 275: 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 281: Line 370:
                             <div class="choice handbook" id="q3-handbook">
                             <div class="choice handbook" id="q3-handbook">
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                     Toolkit that targets communication to citizens with diverse needs for
                                    information on disaster management processes.
                                </div>
                             </div>
                             </div>
                         </div>
                         </div>
Line 288: 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 295: 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 302: 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 312: 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 318: Line 411:
                             <div class="choice safe" id="q4-safe">
                             <div class="choice safe" id="q4-safe">
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                    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>
Line 328: 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 336: 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 344: 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 350: Line 448:
                             <div class="choice handbook" id="q5-handbook">
                             <div class="choice handbook" id="q5-handbook">
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                     Toolkit that targets communication to citizens with diverse needs for
                                    information on disaster management processes.
                                </div>
                             </div>
                             </div>
                             <div class="choice safe" id="q5-safe">
                             <div class="choice safe" id="q5-safe">
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                    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>
Line 362: 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 369: 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 376: 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 385: 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 391: Line 496:
                             <div class="choice safe" id="q6-safe">
                             <div class="choice safe" id="q6-safe">
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                    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>
Line 405: 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 412: 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 418: Line 528:
                             <div class="choice handbook" id="q7-handbook">
                             <div class="choice handbook" id="q7-handbook">
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                     Toolkit that targets communication to citizens with diverse needs for
                                    information on disaster management processes.
                                </div>
                             </div>
                             </div>
                             <div class="choice safe" id="q7-safe">
                             <div class="choice safe" id="q7-safe">
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                    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>
Line 430: 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 437: 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 444: 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 450: Line 567:
                             <div class="choice handbook" id="q8-handbook">
                             <div class="choice handbook" id="q8-handbook">
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                     Toolkit that targets communication to citizens with diverse needs for
                                    information on disaster management processes.
                                </div>
                             </div>
                             </div>
                             <div class="choice safe" id="q8-safe">
                             <div class="choice safe" id="q8-safe">
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                    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>
Line 465: 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 472: 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 478: Line 602:
                             <div class="choice handbook" id="q9-handbook">
                             <div class="choice handbook" id="q9-handbook">
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                     Toolkit that targets communication to citizens with diverse needs for
                                    information on disaster management processes.
                                </div>
                             </div>
                             </div>
                             <div class="choice safe" id="q9-safe">
                             <div class="choice safe" id="q9-safe">
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                    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>
Line 490: 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 497: 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 516: 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 522: Line 652:
                             <div class="choice safe" id="q10-safe">
                             <div class="choice safe" id="q10-safe">
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                    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>
Line 532: 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 540: 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 546: Line 681:
                             <div class="choice safe" id="q11-safe">
                             <div class="choice safe" id="q11-safe">
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                    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>
Line 553: 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 560: 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 574: 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 580: Line 720:
                             <div class="choice safe" id="q12-safe">
                             <div class="choice safe" id="q12-safe">
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                 <div class="desc">
                                     consectetur, adipisci velit...</div>
                                    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>
Line 591: 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 600: 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.classList.contains('question')) {
             if (event.target.tagName === 'H4') {
                 event.target.querySelector('.answer')?.classList.toggle('opened');
                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');
                });
             }
             }
         });
         });
Line 686: 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,
Line 704: Line 886:
                 const enc = btoa(encodeURIComponent(JSON.stringify(act)));
                 const enc = btoa(encodeURIComponent(JSON.stringify(act)));
                 window.location.assign('/index.php/List_of_Disaster_Community_Technologies' + (act ? '?do=' + enc : ''));
                 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');
             }
             }


Latest revision as of 16: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"