Difference between revisions of "User Guidance"

From LINKS Community Center
Jump to: navigation, search
Line 1: Line 1:
−
{{Compass}}
+
<noinclude>Development version of the Compass.<br><strong style="color:red;">Not ready for production!</strong>
−
<!--
+
</noinclude>
−
<div id="compass-wrapper">
+
<includeonly>
−
== <span class="mw-customtoggle-t1">Engaging With Citizens <span class="toggle-activator">&#xFF0B;</span></span>==
+
    <style>
 +
        :root {
 +
            --compass-color: #C31980;
 +
            --handbook-color: #C35C19;
 +
            --safe-color: #80C319;
 +
        }
  
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1">
+
        .plus.icon {
−
=== <span class="mw-customtoggle-t1st1">Mobilising Citizens <span class="toggle-activator">&#xFF0B;</span></span>===
+
            color: currentColor;
 +
            display: inline-block;
 +
            position: relative;
 +
            top: -.3em;
 +
            margin-left: .5em;
 +
        }
  
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st1">
+
        .plus.icon::before {
−
==== <span class="mw-customtoggle-myDivision">How can I reach young people? <span class="toggle-activator">&#xFF0B;</span></span> ====
+
            content: '';
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
+
            position: absolute;
−
* Young people increasingly use TikTok.
+
            width: 1em;
−
* You can use the following technologies to interact with TikTok and to measure your impact: {{#ask:
+
            height: 1px;
−
[[Category:Disaster Community Technology]]
+
            background-color: currentColor;
−
[[Data Sources::TikTok]]
+
        }
−
[[Posting content::Yes]]
 
−
}}.
 
−
* You can read more information on how to interact with young people in this guideline: [[EmerGent - Guidelines to increase the benefit of social media in emergencies]].
 
−
</div>
 
−
==== <span class="mw-customtoggle-t1st1q2">Who do you want to mobilise, and from who would you want mobility-affiliated information? <span class="toggle-activator">&#xFF0B;</span></span> ====
 
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st1q2">
 
−
* I want to know when and how mobilizing citizens
 
−
* I want to mobilize minorities
 
−
</div>
 
  
−
==== <span class="mw-customtoggle-t1st1q3">Question 3 <span class="toggle-activator">&#xFF0B;</span></span>====
+
        .plus.icon::after {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st1q3">
+
            content: '';
−
* Answer.
+
            position: absolute;
−
* Another answer.
+
            width: 1em;
−
</div>
+
            height: 1px;
 +
            background-color: currentColor;
 +
            transform: rotate(90deg);
 +
            transition: all 0.4s ease;
 +
        }
  
−
<br />
+
        h2.opened .plus.icon::after,
−
</div>
+
        h3.opened .plus.icon::after {
 +
            transform: rotate(0);
 +
        }
  
−
=== <span class="mw-customtoggle-t1st2">Collecting & Analyzing Information <span class="toggle-activator">&#xFF0B;</span></span>===
+
        #cmp-container {
 +
            font-family: 'Open Sans';
 +
            font-size: 120%;
 +
        }
  
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st2">
+
        #cmp-container h1,
−
==== <span class="mw-customtoggle-t1st2q1"><Question 1> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        #cmp-container h2,
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st2q1">
+
        #cmp-container h3 {
−
* Answer.
+
            font-family: 'Raleway';
−
* Another answer.
+
            font-weight: 300;
−
</div>
+
            letter-spacing: .06em;
 +
            position: relative;
 +
        }
  
−
==== <span class="mw-customtoggle-t1st2q2"><Question 2> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        #cmp-container h1 {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st2q2">
+
            letter-spacing: .06em;
−
* Answer.
+
        }
−
* Another answer.
 
−
</div>
 
  
−
==== <span class="mw-customtoggle-t1st2q3"><Question 3> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        #cmp-container h2 {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st2q3">
+
            margin-top: 2em;
−
* Answer.
+
            padding-bottom: 5px;
−
* Another answer.
+
            color: var(--compass-color);
−
</div>
+
            cursor: pointer;
 +
        }
  
−
<br />
+
        #cmp-container h2::before {
−
</div>
+
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            left: 0;
 +
            bottom: 0;
 +
            width: 100%;
 +
            height: 1px;
 +
            background-color: currentColor;
 +
            letter-spacing: .06em;
 +
            transition: all 0.4s ease;
 +
            transform: scaleX(0);
 +
            transform-origin: bottom left;
 +
        }
  
−
=== <span class="mw-customtoggle-t1st3">Mobilising Volunteers <span class="toggle-activator">&#xFF0B;</span></span>===
+
        #cmp-container h2.opened::before {
 +
            transform: scaleX(1);
 +
        }
  
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st3">
+
        #cmp-container h3 {
−
==== <span class="mw-customtoggle-t1st3q1"><Question 1> <span class="toggle-activator">&#xFF0B;</span></span>====
+
            font-weight: 1.4em;
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st3q1">
+
            cursor: pointer;
−
* Answer.
+
        }
−
* Another answer.
 
−
</div>
 
  
−
==== <span class="mw-customtoggle-t1st3q2"><Question 2> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        .subtheme {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st3q2">
+
            margin-bottom: 2em;
−
* Answer.
+
        }
−
* Another answer.
 
−
</div>
 
  
−
==== <span class="mw-customtoggle-t1st3q3"><Question 3> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        .question {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t1st3q3">
+
            font-size: 1.2em;
−
* Answer.
+
            padding-left: 2em;
−
* Another answer.
+
            cursor: pointer;
−
</div>
+
            margin-bottom: 1em;
 +
        }
  
−
</div>
+
        .question::before {
 +
            content: "• ";
 +
        }
  
−
</div>
+
        .answer {
 +
            margin: 1.4em;
 +
            font-size: 1.2rem;
 +
        }
  
−
== <span class="mw-customtoggle-t2">Improving Communication <span class="toggle-activator">&#xFF0B;</span></span>==
+
        .subtheme,
 +
        .question,
 +
        .answer {
 +
            display: none;
 +
        }
  
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2">
+
        .subtheme.opened,
−
=== <span class="mw-customtoggle-t2st1">Targeting Communication <span class="toggle-activator">&#xFF0B;</span></span>===
+
        .question.opened,
 +
        .answer.opened {
 +
            display: block;
 +
        }
  
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st1">
+
        .answer-wrapper {
−
==== <span class="mw-customtoggle-t2st1q1"><Question 1> <span class="toggle-activator">&#xFF0B;</span></span>====
+
            display: grid;
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st1q1">
+
            grid-template-columns: 1fr;
−
* Answer.
+
            gap: 1em;
−
* Another answer.
+
        }
−
</div>
 
  
−
==== <span class="mw-customtoggle-t2st1q2"><Question 2> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        .choice {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st1q2">
+
            display: flex;
−
* Answer.
+
            flex-flow: row nowrap;
−
* Another answer.
+
            justify-content: flex-start;
−
</div>
+
            align-items: center;
 +
        }
  
−
==== <span class="mw-customtoggle-t2st1q3"><Question 3> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        .choice .button {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st1q3">
+
            flex: 0 0 8.2em;
−
* Answer.
+
            white-space: nowrap;
−
* Another answer.
+
            transition: all 250ms;
−
</div>
+
            display: flex;
 +
            justify-content: center;
 +
            align-items: center;
 +
            padding: 1em;
 +
            border: 1px solid currentColor;
 +
        }
  
−
<br />
+
        .choice .desc {
−
</div>
+
            font-size: 75%;
 +
            padding-left: 1em;
 +
            transition: all 250ms;
 +
        }
  
−
=== <span class="mw-customtoggle-t2st2">Ensuring the Quality of Information <span class="toggle-activator">&#xFF0B;</span></span>===
+
        .choice:hover .desc {
 +
            font-weight: 600;
 +
        }
  
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st2">
+
        .choice.tech {
−
==== <span class="mw-customtoggle-t2st2q1"><Question 1> <span class="toggle-activator">&#xFF0B;</span></span>====
+
            color: var(--links-blue);
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st2q1">
+
        }
−
* Answer.
 
−
* Another answer.
 
−
</div>
 
  
−
==== <span class="mw-customtoggle-t2st2q2"><Question 2> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        .choice.guide {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st2q2">
+
            color: var(--links-orange);
−
* Answer.
+
        }
−
* Another answer.
 
−
</div>
 
  
−
==== <span class="mw-customtoggle-t2st2q3"><Question 3> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        .choice.case {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st2q3">
+
            color: var(--links-cyan);
−
* Answer.
+
        }
−
* Another answer.
 
−
</div>
 
  
−
<br />
+
        .choice.handbook {
−
</div>
+
            color: var(--handbook-color);
 +
        }
  
−
=== <span class="mw-customtoggle-t2st3">Making Information Accessible <span class="toggle-activator">&#xFF0B;</span></span>===
+
        .choice.safe {
 +
            color: var(--safe-color);
 +
        }
  
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st3">
+
        .choice.tech:hover .button {
−
==== <span class="mw-customtoggle-t2st3q1"><Question 1> <span class="toggle-activator">&#xFF0B;</span></span>====
+
            background-color: var(--links-blue);
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st3q1">
+
            color: #fff;
−
* Answer.
+
        }
−
* Another answer.
 
−
</div>
 
  
−
==== <span class="mw-customtoggle-t2st3q2"><Question 2> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        .choice.guide:hover .button {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st3q2">
+
            background-color: var(--links-orange);
−
* Answer.
+
            color: #fff;
−
* Another answer.
+
        }
−
</div>
 
  
−
==== <span class="mw-customtoggle-t2st3q3"><Question 3> <span class="toggle-activator">&#xFF0B;</span></span>====
+
        .choice.case:hover .button {
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-t2st3q3">
+
            background-color: var(--links-cyan);
−
* Answer.
+
            color: #fff;
−
* Another answer.
+
        }
−
</div>
 
  
−
<br />
+
        .choice.handbook:hover .button {
−
</div>
+
            background-color: var(--handbook-color);
 +
            color: #fff;
 +
        }
  
−
</div>
+
        .choice.safe:hover .button {
 +
            background-color: var(--safe-color);
 +
            color: #fff;
 +
        }
 +
    </style>
  
−
</div>
+
    <div id="cmp-container">
−
-->
+
        <div class="theme">
 +
            <h2>Engaging Citizens</h2>
 +
            <div class="subtheme">
 +
                <h3>Collecting and Analysing Information from SMCS</h3>
 +
                <div class="question" data-aspect="Social">
 +
                    Whom do you want to include in your collection and analysis of information, and from whom do you
 +
                    want to collect and analyse information?
  
−
{{#widget:Compass}}
+
                    <div class="answer">
−
__NOTITLE__
+
                        <div class="answer-wrapper">
 +
                            <div class="choice case" id="q1-case">
 +
                                <div class="button">Use Cases</div>
 +
                                <div class="desc">
 +
                                    It provides helpful information from social media and crowdsourcing
 +
                                    examples around the theme “Collecting and Analysing Information from SMCS”. Also the
 +
                                    question, which vulnerable groups (disabled, migrants, minorities,…) were
 +
                                    specifically involved in social media and crowdsourcing activities is answered.
 +
                                </div>
 +
                            </div>
 +
                            <div class="choice guide" id="q1-guide">
 +
                                <div class="button">Guidelines</div>
 +
                                <div class="desc">
 +
                                    The Guidelines Library will provide guidance to 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 class="question" data-aspect="Socio-/Technical">
 +
                    How to collect and analyse information from citizens?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice tech" id="q2-tech">
 +
                                <div class="button">Technologies</div>
 +
                                <div class="desc">
 +
                                    It allows filtering for software that covers the functions Search &
 +
                                    Monitor and Analysis of information from social media.
 +
                                </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 SMCS 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">
 +
                                    It provides helpful information from social media and crowdsourcing
 +
                                    examples around the theme “Collecting and Analysing Information from SMCS”. Also the
 +
                                    question, which specific functionality SMCS has been used for and how (e.g.
 +
                                    gathering of information) is answered.
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="subtheme">
 +
                <h3>Mobilising Citizens</h3>
 +
                <div class="question" data-aspect="Social">
 +
                    Who do you want to mobilise, and from whom would you want mobility-affiliated information?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice case" id="q3-case">
 +
                                <div class="button">Use Cases</div>
 +
                                <div class="desc">
 +
                                    It provides 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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="question" data-aspect="Socio-/Technical">
 +
                    How can you mobilise the citizens?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice tech" id="q4-tech">
 +
                                <div class="button">Technologies</div>
 +
                                <div class="desc">
 +
                                    It allows filtering for software that covers 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">
 +
                                    This Guidelines Library includes relevant 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">
 +
                                    It provides helpful information from 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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="subtheme">
 +
                <h3>Mobilising Volunteers</h3>
 +
                <div class="question" data-aspect="Social">
 +
                    Who do you want to mobilise (interested in volunteering), and from whom in such volunteering
 +
                    positions would you want mobility-affiliated information?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice guide" id="q5-guide">
 +
                                <div class="button">Guidelines</div>
 +
                                <div class="desc">
 +
                                    This Guidelines Library offers guidance to 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">
 +
                                    It provides helpful information from 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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                            <div class="choice safe" id="q5-safe">
 +
                                <div class="button">Feel Safe</div>
 +
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="question" data-aspect="Socio-/Technical">
 +
                    How can you mobilise the volunteers?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice tech" id="q6-tech">
 +
                                <div class="button">Technologies</div>
 +
                                <div class="desc">
 +
                                    It allows filtering for software that covers 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">
 +
                                    This Guidelines Library includes relevant 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">
 +
                                    It provides helpful information from 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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
 
 +
        <div class="theme">
 +
            <h2>Improving Communication</h2>
 +
            <div class="subtheme">
 +
                <h3>Making Information Accessible</h3>
 +
                <div class="question" data-aspect="Social">
 +
                    Who do you want to access your information, and from whom do you want to access information?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice case" id="q7-case">
 +
                                <div class="button">Use Cases</div>
 +
                                <div class="desc">
 +
                                    It provides helpful information from 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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                            <div class="choice safe" id="q7-safe">
 +
                                <div class="button">Feel Safe</div>
 +
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="question" data-aspect="Socio-/Technical">
 +
                    How can you make your information accessible?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice tech" id="q8-tech">
 +
                                <div class="button">Technologies</div>
 +
                                <div class="desc">
 +
                                    It allows filtering for software that covers 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">
 +
                                    It provides helpful information from 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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                            <div class="choice safe" id="q8-safe">
 +
                                <div class="button">Feel Safe</div>
 +
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="subtheme">
 +
                <h3>Targeting Communication</h3>
 +
                <div class="question" data-aspect="Social">
 +
                    Who do you want to target with your communication plan?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice case" id="q9-case">
 +
                                <div class="button">Use Cases</div>
 +
                                <div class="desc">
 +
                                    It provides helpful information from 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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                            <div class="choice safe" id="q9-safe">
 +
                                <div class="button">Feel Safe</div>
 +
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="question" data-aspect="Socio-/Technical">
 +
                    How can you target your communication?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice tech" id="q10-tech">
 +
                                <div class="button">Technologies</div>
 +
                                <div class="desc">
 +
                                    It allows filtering for software that covers the function Post &
 +
                                    Schedule, which aims at publishing information on social media. It is also possible
 +
                                    to filter by different platforms.
 +
                                </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">
 +
                                    It provides helpful information from 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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="subtheme">
 +
                <h3>Ensuring Credible Information</h3>
 +
                <div class="question" data-aspect="Social">
 +
                    Who do you want to share credible information with, and from whom do you receive credible
 +
                    information?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice case" id="q11-case">
 +
                                <div class="button">Use Cases</div>
 +
                                <div class="desc">
 +
                                    It provides helpful information from 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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="question" data-aspect="Socio-/Technical">
 +
                    How can you ensure credible information exchange?
 +
 
 +
                    <div class="answer">
 +
                        <div class="answer-wrapper">
 +
                            <div class="choice tech" id="q12-tech">
 +
                                <div class="button">Technologies</div>
 +
                                <div class="desc">
 +
                                    There are no mature technologies on the market yet that can examine
 +
                                    information for credibility.
 +
                                </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">
 +
                                    It provides helpful information from 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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
 +
                                    consectetur, adipisci velit...</div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
    <script>
 +
        // Attach plus icon to the title of expandable blocks.
 +
        document.querySelectorAll('.theme > h2, .subtheme > h3').forEach(el => {
 +
            const icon = document.createElement('div');
 +
            icon.classList.add('plus', 'icon');
 +
            el.appendChild(icon);
 +
        });
 +
 
 +
        // Set up toggles for expandable blocks.
 +
        document.getElementById('cmp-container').addEventListener('click', event => {
 +
            if (event.target.tagName === 'H2') {
 +
                event.target.classList.toggle('opened');
 +
                event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened'));
 +
            }
 +
            if (event.target.tagName === 'H3') {
 +
                event.target.classList.toggle('opened');
 +
                event.target.closest('.subtheme').querySelectorAll('.question').forEach(el => el.classList.toggle('opened'));
 +
            }
 +
            if (event.target.classList.contains('question')) {
 +
                event.target.querySelector('.answer')?.classList.toggle('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,
 +
                    }
 +
                }
 +
            }
 +
        };
 +
 
 +
        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('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>

Revision as of 15:53, 25 November 2022

Development version of the Compass.
Not ready for production!


Retrieved from "https://links.communitycenter.eu/index.php?title=User_Guidance&oldid=8794"