Difference between revisions of "Widget:Compass"

From LINKS Community Center
Jump to: navigation, search
 
(69 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>
 
                             <div class="choice guide" id="q1-guide">
 
                             <div class="choice guide" id="q1-guide">
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
−
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
+
                                 <div class="desc">
−
                                     consectetur, adipisci velit...</div>
+
                                    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>
Line 230: 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 237: 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>
−
                             <div class="choice guide">
+
                             <div class="choice guide" id="q2-guide">
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
−
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
+
                                 <div class="desc">
−
                                     consectetur, adipisci velit...</div>
+
                                     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>
−
                             <div class="choice case">
+
                             <div class="choice case" id="q2-case">
 
                                 <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 262: 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">
 
                         <div class="answer-wrapper">
 
                         <div class="answer-wrapper">
−
                             <div class="choice case">
+
                             <div class="choice case" id="q3-case">
 
                                 <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>
 
                             </div>
 
                             </div>
−
                             <div class="choice handbook">
+
                             <div class="choice handbook" id="q3-handbook">
−
                                 <div class="button">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 282: 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">
 
                         <div class="answer-wrapper">
 
                         <div class="answer-wrapper">
−
                             <div class="choice tech">
+
                             <div class="choice tech" id="q4-tech">
 
                                 <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>
−
                             <div class="choice guide">
+
                             <div class="choice guide" id="q4-guide">
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
−
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
+
                                 <div class="desc">
−
                                     consectetur, adipisci velit...</div>
+
                                    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>
−
                             <div class="choice case">
+
                             <div class="choice case" id="q4-case">
 
                                 <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>
 
                             </div>
 
                             </div>
−
                             <div class="choice 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 317: 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">
 
                         <div class="answer-wrapper">
 
                         <div class="answer-wrapper">
−
                             <div class="choice guide">
+
                             <div class="choice guide" id="q5-guide">
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
−
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
+
                                 <div class="desc">
−
                                     consectetur, adipisci velit...</div>
+
                                    Guidance for all interested stakeholders on a wide
 +
                                    range of disaster management issues, including guidance on how to further mobilise
 +
                                     volunteers.
 +
                                </div>
 
                             </div>
 
                             </div>
−
                             <div class="choice case">
+
                             <div class="choice case" id="q5-case">
 
                                 <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>
 
                             </div>
 
                             </div>
−
                             <div class="choice handbook">
+
                             <div class="choice handbook" id="q5-handbook">
−
                                 <div class="button">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">
+
                             <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 348: 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">
 
                         <div class="answer-wrapper">
 
                         <div class="answer-wrapper">
−
                             <div class="choice tech">
+
                             <div class="choice tech" id="q6-tech">
 
                                 <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>
−
                             <div class="choice guide">
+
                             <div class="choice guide" id="q6-guide">
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
−
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
+
                                 <div class="desc">
−
                                     consectetur, adipisci velit...</div>
+
                                    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>
−
                             <div class="choice case">
+
                             <div class="choice case" id="q6-case">
 
                                 <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>
 
                             </div>
 
                             </div>
−
                             <div class="choice 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 387: 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">
 
                         <div class="answer-wrapper">
 
                         <div class="answer-wrapper">
−
                             <div class="choice case">
+
                             <div class="choice case" id="q7-case">
 
                                 <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>
 
                             </div>
 
                             </div>
−
                             <div class="choice handbook">
+
                             <div class="choice handbook" id="q7-handbook">
−
                                 <div class="button">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">
+
                             <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 412: 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">
 
                         <div class="answer-wrapper">
 
                         <div class="answer-wrapper">
−
                             <div class="choice tech">
+
                             <div class="choice tech" id="q8-tech">
 
                                 <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>
−
                             <div class="choice case">
+
                             <div class="choice case" id="q8-case">
 
                                 <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>
 
                             </div>
 
                             </div>
−
                             <div class="choice handbook">
+
                             <div class="choice handbook" id="q8-handbook">
−
                                 <div class="button">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">
+
                             <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 447: 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">
 
                         <div class="answer-wrapper">
 
                         <div class="answer-wrapper">
−
                             <div class="choice case">
+
                             <div class="choice case" id="q9-case">
 
                                 <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>
 
                             </div>
 
                             </div>
−
                             <div class="choice handbook">
+
                             <div class="choice handbook" id="q9-handbook">
−
                                 <div class="button">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">
+
                             <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 472: 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">
 
                         <div class="answer-wrapper">
 
                         <div class="answer-wrapper">
−
                             <div class="choice tech">
+
                             <div class="choice tech" id="q10-tech">
 
                                 <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>
−
                             <div class="choice guide">
+
                             <div class="choice guide" id="q10-guide">
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
−
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
+
                                 <div class="desc">
−
                                     consectetur, adipisci velit...</div>
+
                                     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>
−
                             <div class="choice case">
+
                             <div class="choice case" id="q10-case">
 
                                 <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>
 
                             </div>
 
                             </div>
−
                             <div class="choice 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 508: 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">
 
                         <div class="answer-wrapper">
 
                         <div class="answer-wrapper">
−
                             <div class="choice case">
+
                             <div class="choice case" id="q11-case">
 
                                 <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>
 
                             </div>
 
                             </div>
−
                             <div class="choice 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 529: 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">
 
                         <div class="answer-wrapper">
 
                         <div class="answer-wrapper">
−
                             <div class="choice tech">
+
                             <div class="choice tech" id="q12-tech">
 
                                 <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>
−
                             <div class="choice guide">
+
                             <div class="choice guide" id="q12-guide">
 
                                 <div class="button">Guidelines</div>
 
                                 <div class="button">Guidelines</div>
−
                                 <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
+
                                 <div class="desc">
−
                                     consectetur, adipisci velit...</div>
+
                                     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>
−
                             <div class="choice case">
+
                             <div class="choice case" id="q12-case">
 
                                 <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>
 
                             </div>
 
                             </div>
−
                             <div class="choice 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 565: 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 574: 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 601: Line 795:
 
                     functions: {
 
                     functions: {
 
                         [search]: true,
 
                         [search]: true,
−
                         [analysis]: 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,
 
                     }
 
                     }
 
                 }
 
                 }
Line 614: Line 884:
  
 
             if (answerId.indexOf('tech') !== -1) {
 
             if (answerId.indexOf('tech') !== -1) {
−
                 // Action takes us to Tech Library
+
                 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');
 +
            }
  
−
                const str = JSON.stringify(act);
+
            if (answerId.indexOf('safe') !== -1) {
−
                 const enc1 = btoa(encodeURIComponent(str));
+
                 window.location.assign('/index.php/Feel_Safe');
−
                const enc2 = btoa(unescape(encodeURIComponent(str)))
+
            }
  
−
                console.log(enc1)
+
            if (answerId.indexOf('handbook') !== -1) {
−
                 console.log(enc2)
+
                 window.location.assign('/index.php/Including_Citizens_Handbook_-_Accessibility');
 
             }
 
             }
 
         }
 
         }
  
 
         document.querySelectorAll('.choice').forEach(el => el.addEventListener('click', handler, { passive: true }));
 
         document.querySelectorAll('.choice').forEach(el => el.addEventListener('click', handler, { passive: true }));
−
       
+
 
 
     </script>
 
     </script>
 
</includeonly>
 
</includeonly>

Latest revision as of 17:14, 9 December 2022

Development version of the Compass.
Not ready for production!


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