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
 
(145 intermediate revisions by 3 users not shown)
Line 3: Line 3:
<includeonly>
<includeonly>
     <style>
     <style>
        :root {
            --compass-color: #C31980;
            --handbook-color: #C2902D;
            --safe-color: #80C319;
        }
        h2.opened .plus.icon::after,
        h3.opened .plus.icon::after,
        h4.opened .plus.icon::after {
            transform: rotate(0);
        }
        #cmp-container {
            font-family: 'Open Sans';
            font-size: 120%;
        }
         #cmp-container h1,
         #cmp-container h1,
         #cmp-container h2,
         #cmp-container h2,
Line 9: Line 26:
             font-weight: 300;
             font-weight: 300;
             letter-spacing: .06em;
             letter-spacing: .06em;
            position: relative;
        }
        #cmp-container h4 {
            font-size: 1em;
            font-weight: 300;
            transition: all 0.4s ease;
        }
        #cmp-container h4.opened {
            font-size: 1em;
            font-weight: 500;
        }
        #cmp-container h1 {
            letter-spacing: .06em;
            color: var(--compass-color);
        }
        #cmp-intro h1 svg {
            height: 2em;
            fill: var(--compass-color);
        }
        #cmp-container h2 {
            margin-top: 1.5em;
            padding-bottom: 5px;
            color: var(--compass-color);
            cursor: pointer;
            transition: all 0.4s ease;
        }
        #cmp-container h2::before {
            content: '';
            display: block;
            position: absolute;
            left: 1.2em;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: currentColor;
            letter-spacing: .06em;
            transition: all 0.4s ease;
            transform: scaleX(0);
            transform-origin: bottom left;
        }
        #cmp-container h2.opened::before {
            transform: scaleX(1);
        }
        #cmp-container h3 {
            font-size: 1.4em;
            cursor: pointer;
        }
        .subtheme {
            margin-bottom: 2em;
            margin-left: 2em;
        }
        .question {
            font-size: 1.1em;
            padding-left: 1.65em;
            cursor: pointer;
            margin-bottom: 1em;
        }
        .answer {
            margin: 1em 1.8em;
            font-size: 1.2rem;
        }
        .subtheme,
        .question,
        .answer {
            display: none;
        }
        .subtheme.opened,
        .question.opened,
        .answer.opened {
            display: block;
        }
        .answer-wrapper {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1em;
        }
        .choice {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
        }
        .choice .button {
            flex: 0 0 8.2em;
            white-space: nowrap;
            transition: all 250ms;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1em;
            color: #fff;
            border: 1px solid;
            /* border-radius: 10px; */
        }
        .choice .desc {
            font-size: 75%;
            padding-left: 1em;
            transition: all 250ms;
        }
        .choice:hover .desc {
            font-weight: 600;
        }
        .choice.tech {
            color: var(--links-blue);
        }
        .choice.guide {
            color: var(--links-orange);
        }
        .choice.case {
            color: var(--links-cyan);
        }
        .choice.handbook {
            color: var(--handbook-color);
        }
        .choice.safe {
            color: var(--safe-color);
        }
        .choice.tech .button {
            background-color: var(--links-blue);
            border-color: var(--links-blue);
        }
        .choice.guide .button {
            background-color: var(--links-orange);
            border-color: var(--links-orange);
        }
        .choice.case .button {
            background-color: var(--links-cyan);
            border-color: var(--links-cyan);
        }
        .choice.handbook .button {
            background-color: var(--handbook-color);
            border-color: var(--handbook-color);
        }
        .choice.safe .button {
            background-color: var(--safe-color);
            border-color: var(--safe-color);
        }
        .choice:hover .button {
            background-color: #fff;
        }
        .choice.tech:hover .button {
            color: var(--links-blue);
        }
        .choice.guide:hover .button {
            color: var(--links-orange);
        }
        .choice.case:hover .button {
            color: var(--links-cyan);
        }
        .choice.handbook:hover .button {
            color: var(--handbook-color);
        }
        .choice.safe:hover .button {
            color: var(--safe-color);
         }
         }
        .subtheme, .question { display: none; }
        .opened { display: block; }
     </style>
     </style>


     <script>
     <div id="cmp-container">
         document.getElementById('cmp-container').addEventListener('click', event => {
         <div id="cmp-intro">
            if (event.target.tagName === 'H2') {
            <h1>
                event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened'));
                <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">
    </script>
                        <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="text-align: center; color: red; margin-top: 4em;">New version</div>
        <div style="font-size: larger; text-align: center; margin-top: 2.5em; ">
    <hr>
            Please select the themes you are interested in below.
    <h1>Compass</h1>
        </div>


    <div id="cmp-container">
         <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-wrapper">
                            <div class="choice case" id="q1-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Helpful examples around the theme “Collecting and Analysing Information
                                    from Social Media and Crowdsourcing”.
                                </div>
                            </div>
                            <div class="choice guide" id="q1-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">
                                    Guidance for all interested
                                    stakeholders, including disaster management organisations and practitioners, on how
                                    to collect, analyse and use information from Social Media and Crowdsourcing.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
                 <div class="question" data-aspect="Socio-/Technical">
                 <div class="question" data-aspect="Socio-/Technical">
                     How to collect and analyse information from citizens?
                     <h4>
                        How can you collect and analyse information?
                    </h4>
 
                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice tech" id="q2-tech">
                                <div class="button">Technologies</div>
                                <div class="desc">
                                    Technologies that cover the functions “Search & Monitor” and “Analysis”
                                    of information from Social Media and Crowdsourcing.
                                </div>
                            </div>
                            <div class="choice guide" id="q2-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">
                                    Several thematic search filters integrated within the Guidelines Library will help
                                    stakeholders retrieve relevant Social Media and Crowdsourcing guidelines to better
                                    mobilise and engage citizens, for instance, the "crowdsourcing" search filter.
                                </div>
                            </div>
                            <div class="choice case" id="q2-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Helpful examples around the theme “Collecting and Analysing Information
                                    from Social Media and Crowdsourcing”.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
             </div>
             </div>
Line 42: Line 355:
                 <h3>Mobilising Citizens</h3>
                 <h3>Mobilising Citizens</h3>
                 <div class="question" data-aspect="Social">
                 <div class="question" data-aspect="Social">
                     Who do you want to mobilise, and from whom would you want mobility-affiliated information?
                     <h4>
                        Who do you want to mobilise, and from whom would you want mobility-affiliated information?
                    </h4>
 
                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice case" id="q3-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Helpful information from Social Media and Crowdsourcing
                                    examples around the theme “Mobilising Citizens”.
                                </div>
                            </div>
                            <div class="choice handbook" id="q3-handbook">
                                <div class="button">Including Citizens Handbook</div>
                                <div class="desc">
                                    Toolkit that targets communication to citizens with diverse needs for
                                    information on disaster management processes.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
                 <div class="question" data-aspect="Socio-/Technical">
                 <div class="question" data-aspect="Socio-/Technical">
                     How can you mobilise the citizens?
                     <h4>
                        How can you mobilise the citizens?
                    </h4>
 
                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice tech" id="q4-tech">
                                <div class="button">Technologies</div>
                                <div class="desc">
                                    Technologies that cover the function "Post &
                                    Schedule" which aims at publishing information on social media.
                                </div>
                            </div>
                            <div class="choice guide" id="q4-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">
                                    Guidelines that will support all
                                    interested stakeholders, including disaster management organisations and
                                    practitioners, in mobilising citizens. It also includes search filters that will
                                    allow users to identify relevant sources more easily, such as the "community
                                    management" search filter.
                                </div>
                            </div>
                            <div class="choice case" id="q4-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Social Media and Crowdsourcing
                                    examples around the theme “Mobilising Citizens”.
                                </div>
                            </div>
                            <div class="choice safe" id="q4-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Educational platform promoting the use of social media, digital education
                                    and information accessibility to enhance children engagement in disaster prevention
                                    and preparedness.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
             </div>
             </div>
Line 51: 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-wrapper">
                            <div class="choice guide" id="q5-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">
                                    Guidance for all interested stakeholders on a wide
                                    range of disaster management issues, including guidance on how to further mobilise
                                    volunteers.
                                </div>
                            </div>
                            <div class="choice case" id="q5-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Social Media and Crowdsourcing
                                    examples around the theme “Mobilising Volunteers”.
                                </div>
                            </div>
                            <div class="choice handbook" id="q5-handbook">
                                <div class="button">Including Citizens Handbook</div>
                                <div class="desc">
                                    Toolkit that targets communication to citizens with diverse needs for
                                    information on disaster management processes.
                                </div>
                            </div>
                            <div class="choice safe" id="q5-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Educational platform promoting the use of social media, digital education
                                    and information accessibility to enhance children engagement in disaster prevention
                                    and preparedness.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
                 <div class="question" data-aspect="Socio-/Technical">
                 <div class="question" data-aspect="Socio-/Technical">
                     How can you mobilise the volunteers?
                     <h4>
                        How can you mobilise the volunteers?
                    </h4>
 
                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice tech" id="q6-tech">
                                <div class="button">Technologies</div>
                                <div class="desc">
                                    Technologies that cover the function "Post &
                                    Schedule", which aims at publishing information on social media.
                                </div>
                            </div>
                            <div class="choice guide" id="q6-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">
                                    Guidelines that will support interested
                                    stakeholders in mobilising volunteers, and search filters that will allow users to
                                    identify relevant sources more easily, such as the search filters "VOST" and
                                    "unaffiliated volunteers".
                                </div>
                            </div>
                            <div class="choice case" id="q6-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Social Media and Crowdsourcing
                                    examples around the theme “Mobilising Volunteers”.
                                </div>
                            </div>
                            <div class="choice safe" id="q6-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Educational platform promoting the use of social media, digital education
                                    and information accessibility to enhance children engagement in disaster prevention
                                    and preparedness.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
             </div>
             </div>
Line 65: Line 513:
                 <h3>Making Information Accessible</h3>
                 <h3>Making Information Accessible</h3>
                 <div class="question" data-aspect="Social">
                 <div class="question" data-aspect="Social">
                     Who do you want to access your information, and from whom do you want to access information?
                     <h4>
                        Who do you want to access your information, and from whom do you want to access information?
                    </h4>
 
                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice case" id="q7-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Social Media and Crowdsourcing
                                    examples around the theme “Making Information Accessible”.
                                </div>
                            </div>
                            <div class="choice handbook" id="q7-handbook">
                                <div class="button">Including Citizens Handbook</div>
                                <div class="desc">
                                    Toolkit that targets communication to citizens with diverse needs for
                                    information on disaster management processes.
                                </div>
                            </div>
                            <div class="choice safe" id="q7-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Educational platform promoting the use of social media, digital education
                                    and information accessibility to enhance children engagement in disaster prevention
                                    and preparedness.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
                 <div class="question" data-aspect="Socio-/Technical">
                 <div class="question" data-aspect="Socio-/Technical">
                     How can you make your information accessible?
                     <h4>
                        How can you make your information accessible?
                    </h4>
 
                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice tech" id="q8-tech">
                                <div class="button">Technologies</div>
                                <div class="desc">
                                    Technologies that cover the function "Post &
                                    Schedule", which aims at publishing information on social media.
                                </div>
                            </div>
                            <div class="choice case" id="q8-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Social Media and Crowdsourcing
                                    examples around the theme “Making Information Accessible”.
                                </div>
                            </div>
                            <div class="choice handbook" id="q8-handbook">
                                <div class="button">Including Citizens Handbook</div>
                                <div class="desc">
                                    Toolkit that targets communication to citizens with diverse needs for
                                    information on disaster management processes.
                                </div>
                            </div>
                            <div class="choice safe" id="q8-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Educational platform promoting the use of social media, digital education
                                    and information accessibility to enhance children engagement in disaster prevention
                                    and preparedness.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
             </div>
             </div>
Line 74: Line 587:
                 <h3>Targeting Communication</h3>
                 <h3>Targeting Communication</h3>
                 <div class="question" data-aspect="Social">
                 <div class="question" data-aspect="Social">
                     Who do you want to target with your communication plan?
                     <h4>
                        Who do you want to target with your communication plan?
                    </h4>
 
                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice case" id="q9-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Social Media and Crowdsourcing
                                    examples around the theme “Targeting Communication”.
                                </div>
                            </div>
                            <div class="choice handbook" id="q9-handbook">
                                <div class="button">Including Citizens Handbook</div>
                                <div class="desc">
                                    Toolkit that targets communication to citizens with diverse needs for
                                    information on disaster management processes.
                                </div>
                            </div>
                            <div class="choice safe" id="q9-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Educational platform promoting the use of social media, digital education
                                    and information accessibility to enhance children engagement in disaster prevention
                                    and preparedness.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
                 <div class="question" data-aspect="Socio-/Technical">
                 <div class="question" data-aspect="Socio-/Technical">
                     How can you target your communication?
                     <h4>
                        How can you target your communication?
                    </h4>
 
                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice tech" id="q10-tech">
                                <div class="button">Technologies</div>
                                <div class="desc">
                                    Technologies that cover the function "Post &
                                    Schedule", which aims at publishing information on social media.
                                </div>
                            </div>
                            <div class="choice guide" id="q10-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">
                                    This Guidelines Library has been specifically designed to cater to the needs of
                                    disaster management organisation and practitioners. Search filters have been
                                    integrated in the product to optimise users' experience. One of the search filters
                                    integrated in the product is "Vulnerable groups" and gathers relevant resources that
                                    can support DMO and practitioners in targeting their communication efforts towards
                                    specific groups.
                                </div>
                            </div>
                            <div class="choice case" id="q10-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Social Media and Crowdsourcing
                                    examples around the theme “Targeting Communication”.
                                </div>
                            </div>
                            <div class="choice safe" id="q10-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Educational platform promoting the use of social media, digital education
                                    and information accessibility to enhance children engagement in disaster prevention
                                    and preparedness.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
             </div>
             </div>
Line 83: Line 665:
                 <h3>Ensuring Credible Information</h3>
                 <h3>Ensuring Credible Information</h3>
                 <div class="question" data-aspect="Social">
                 <div class="question" data-aspect="Social">
                     Who do you want to share credible information with, and from whom do you receive credible
                     <h4>
                     information?
                        Who do you want to share credible information with, and from whom do you receive credible
                        information?
                    </h4>
 
                     <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice case" id="q11-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Social Media and Crowdsourcing
                                    examples around the theme “Ensuring Credible Information”.
                                </div>
                            </div>
                            <div class="choice safe" id="q11-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Educational platform promoting the use of social media, digital education
                                    and information accessibility to enhance children engagement in disaster prevention
                                    and preparedness.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
                 <div class="question" data-aspect="Socio-/Technical">
                 <div class="question" data-aspect="Socio-/Technical">
                     How can you ensure credible information exchange?
                     <h4>
                        How can you ensure credible information exchange?
                    </h4>
 
                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice tech" id="q12-tech">
                                <div class="button">Technologies</div>
                                <div class="desc">
                                    There are technologies that could help with assessing credible information
                                    by collecting various metrics.
                                </div>
                            </div>
                            <div class="choice guide" id="q12-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">
                                    One of the search filters is "Verification" and gathers relevant resources that can
                                    support DMO and practitioners in ensuring credibility of information.
                                </div>
                            </div>
                            <div class="choice case" id="q12-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    Social Media and Crowdsourcing
                                    examples around the theme “Ensuring Credible Information”.
                                </div>
                            </div>
                            <div class="choice safe" id="q12-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">
                                    Educational platform promoting the use of social media, digital education
                                    and information accessibility to enhance children engagement in disaster prevention
                                    and preparedness.
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
    <script>
        // Attach plus icon to the title of expandable blocks.
        document.querySelectorAll('.theme > h2, .subtheme > h3, .question > h4').forEach(el => {
            const icon = document.createElement('div');
            icon.classList.add('plus', 'icon');
            el.insertBefore(icon, el.firstChild);
        });
        // Set up toggles for expandable blocks.
        document.getElementById('cmp-container').addEventListener('click', event => {
            if (event.target.tagName === 'H2') {
                document.querySelectorAll('H2').forEach(el => {
                    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') {
                document.querySelectorAll('H3').forEach(el => {
                    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') {
                document.querySelectorAll('H4').forEach(el => {
                    if (el === event.target) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
                const group = event.target.closest('.question');
                document.querySelectorAll('.answer').forEach(el => {
                    if (group.contains(el)) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
            }
        });
        const search = 'Search and Monitor',
            post = 'Post and Schedule',
            analysis = 'Analysis',
            metrics = 'Metrics',
            report = 'Report',
            collab = 'Collaboration',
            interop = 'Interoperability',
            meta = 'Meta';
        // Click actions.
        const actions = {
            'q2-tech': {
                filter: {
                    functions: {
                        [search]: true,
                        [analysis]: true,
                        [post]: false,
                        [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            },
            'q4-tech': {
                filter: {
                    functions: {
                        [search]: false,
                        [analysis]: false,
                        [post]: true,
                        [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            },
            'q6-tech': {
                filter: {
                    functions: {
                        [search]: false,
                        [analysis]: false,
                        [post]: true,
                        [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            },
            'q8-tech': {
                filter: {
                    functions: {
                        [search]: false,
                        [analysis]: false,
                        [post]: true,
                        [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            },
            'q10-tech': {
                filter: {
                    functions: {
                        [search]: false,
                        [analysis]: false,
                        [post]: true,
                        [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            },
            'q12-tech': {
                filter: {
                    functions: {
                        [search]: false,
                        [analysis]: false,
                        [post]: false,
                        [metrics]: true,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            }
        };
        const handler = event => {
            const answerId = event.currentTarget.id;
            const act = actions[answerId];
            if (!actions) return;
            if (answerId.indexOf('tech') !== -1) {
                const enc = btoa(encodeURIComponent(JSON.stringify(act)));
                window.location.assign('/index.php/List_of_Disaster_Community_Technologies' + (act ? '?do=' + enc : ''));
            }
            if (answerId.indexOf('case') !== -1) {
                window.location.assign('/index.php/List_of_Use_Cases');
            }
            if (answerId.indexOf('guide') !== -1) {
                window.location.assign('/index.php/List_of_Guidelines');
            }
            if (answerId.indexOf('safe') !== -1) {
                window.location.assign('/index.php/Feel_Safe');
            }
            if (answerId.indexOf('handbook') !== -1) {
                window.location.assign('/index.php/Including_Citizens_Handbook_-_Accessibility');
            }
        }
        document.querySelectorAll('.choice').forEach(el => el.addEventListener('click', handler, { passive: true }));
    </script>
</includeonly>
</includeonly>

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"