|
|
| (109 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| − | <noinclude>Development version of the Compass.<br><strong style="color:red;">Not ready for production!</strong> | + | <noinclude>DCT list widget.<br><span style="color: red; font-weight: bold;">Currently in use – do not modify!</span></noinclude> |
| − | </noinclude> | + | |
| | <includeonly> | | <includeonly> |
| − | <style> | + | <link href="/resources/assets/tabulator/dist/css/tabulator.min.css" rel="stylesheet"> |
| − | :root {
| + | <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script> |
| − | --compass-color: #C31980;
| |
| − | --handbook-color: #C35C19;
| |
| − | --safe-color: #80C319;
| |
| − | }
| |
| | | | |
| − | .plus.icon {
| + | <!-- STYLES BEGIN --> |
| − | color: currentColor;
| + | <link rel="stylesheet" href="https://api.safety-base.eu/v2/links/lib?q=dct_list.css"> |
| − | display: inline-block;
| + | <!-- STYLES END --> |
| − | position: relative;
| |
| − | top: -.3em;
| |
| − | margin-left: .5em;
| |
| − | }
| |
| | | | |
| − | .plus.icon::before {
| + | <!-- SCRIPT BEGIN --> |
| − | content: '';
| + | <script type="text/javascript" src="https://api.safety-base.eu/v2/links/lib?q=dct_list.js"></script> |
| − | position: absolute;
| + | <!-- SCRIPT END --> |
| − | width: 1em;
| |
| − | height: 1px;
| |
| − | background-color: currentColor;
| |
| − | }
| |
| | | | |
| − | .plus.icon::after {
| + | <!-- Icon definitons --> |
| − | content: '';
| + | <!--<img src="https://api.safety-base.eu/v2/links/lib?q=unknown.svg">--> |
| − | position: absolute;
| |
| − | width: 1em;
| |
| − | height: 1px;
| |
| − | background-color: currentColor;
| |
| − | transform: rotate(90deg);
| |
| − | transition: all 0.4s ease;
| |
| − | }
| |
| | | | |
| − | h2.opened .plus.icon::after, | + | <div id="dct-list-wrapper"> |
| − | h3.opened .plus.icon::after { | + | <h1> |
| − | transform: rotate(0); | + | <img src="https://api.safety-base.eu/v2/links/lib?q=1-dct_list.svg"> |
| − | } | + | <div> |
| | + | <div>Technologies</div> |
| | + | <div style="font-size:small; letter-spacing:.03em; margin-left: .6em;">Social Media and Crowdsourcing Library</div> |
| | + | </div> |
| | + | </h1> |
| | + | <div id="dct-intro"> |
| | + | <p>The overall goal of the Social Media and Crowdsourcing (SMCS) Technologies Library is to face the growing |
| | + | heterogeneous use of technologies in disasters and the overwhelming number of technologies on the |
| | + | market. It gathers and structures information about existing technologies to provide an up-to-date overview and |
| | + | thus support the selection of suitable technologies. |
| | + | </p> |
| | + | <p> |
| | + | You can use the filters to identify relevant technologies according to your needs and then click on the |
| | + | name of the technology to get further information. |
| | + | </p> |
| | + | </div> |
| | | | |
| − | #cmp-container { | + | <div id="filter-bar"> |
| − | font-family: 'Open Sans'; | + | <div style="display: flex; justify-content: space-between;"> |
| − | font-size: 120%;
| + | |
| − | }
| + | <h2 style="margin-bottom: 1rem;">Selected Filters</h2> |
| − | | + | <div id="filter-summary">No filter. Showing all results.</div> |
| − | #cmp-container h1,
| + | </div> |
| − | #cmp-container h2,
| + | |
| − | #cmp-container h3 {
| + | <button class="large-button open-filters" type="button" onclick="toggleFilter()">Open Filters</button> |
| − | font-family: 'Raleway';
| |
| − | font-weight: 300;
| |
| − | letter-spacing: .06em;
| |
| − | position: relative;
| |
| − | }
| |
| − | | |
| − | #cmp-container h1 {
| |
| − | letter-spacing: .06em;
| |
| − | }
| |
| − | | |
| − | #cmp-container h2 {
| |
| − | margin-top: 2em;
| |
| − | padding-bottom: 5px;
| |
| − | color: var(--compass-color);
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | | |
| − | #cmp-container h2::before {
| |
| − | 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;
| |
| − | }
| |
| − | | |
| − | #cmp-container h2.opened::before {
| |
| − | transform: scaleX(1);
| |
| − | }
| |
| − | | |
| − | #cmp-container h3 {
| |
| − | font-weight: 1.4em;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | | |
| − | .subtheme {
| |
| − | margin-bottom: 2em;
| |
| − | }
| |
| − | | |
| − | .question {
| |
| − | font-size: 1.2em;
| |
| − | padding-left: 2em;
| |
| − | cursor: pointer;
| |
| − | margin-bottom: 1em;
| |
| − | }
| |
| − | | |
| − | .question::before {
| |
| − | content: "→ ";
| |
| − | }
| |
| − | | |
| − | .answer {
| |
| − | margin: 1.4em;
| |
| − | font-size: 1.2rem;
| |
| − | }
| |
| − | | |
| − | .subtheme,
| |
| − | .question,
| |
| − | .answer {
| |
| − | display: none;
| |
| − | }
| |
| − | | |
| − | .subtheme.opened,
| |
| − | .question.opened,
| |
| − | .answer.opened {
| |
| − | display: block;
| |
| − | }
| |
| − | | |
| − | .answer-wrapper {
| |
| − | display: grid;
| |
| − | grid-template-columns: 1fr 1fr;
| |
| − | gap: 1em;
| |
| − | }
| |
| − | | |
| − | .choice {
| |
| − | display: flex;
| |
| − | flex-flow: row nowrap;
| |
| − | justify-content: flex-start;
| |
| − | align-items: flex-start;
| |
| − | }
| |
| − | | |
| − | .choice .button {
| |
| − | flex: 0 0 8.2em;
| |
| − | white-space: nowrap;
| |
| − | transition: all 250ms;
| |
| − | display: flex;
| |
| − | justify-content: center;
| |
| − | align-items: center;
| |
| − | padding: 1em;
| |
| − | border: 1px solid currentColor;
| |
| − | }
| |
| − | | |
| − | .choice .desc {
| |
| − | font-size: 75%;
| |
| − | padding-left: 1em;
| |
| − | transition: all 250ms;
| |
| − | }
| |
| − | | |
| − | .choice:hover .desc {
| |
| − | font-weight: 600;
| |
| − | }
| |
| − | | |
| − | .choice.tech {
| |
| − | color: var(--links-blue);
| |
| − | }
| |
| − | | |
| − | .choice.guide {
| |
| − | color: var(--links-orange);
| |
| − | }
| |
| − | | |
| − | .choice.case {
| |
| − | color: var(--links-cyan);
| |
| − | }
| |
| − | | |
| − | .choice.handbook {
| |
| − | color: var(--handbook-color);
| |
| − | }
| |
| − | | |
| − | .choice.safe {
| |
| − | color: var(--safe-color);
| |
| − | }
| |
| − | | |
| − | .choice.tech:hover .button {
| |
| − | background-color: var(--links-blue);
| |
| − | color: #fff;
| |
| − | }
| |
| − | | |
| − | .choice.guide:hover .button {
| |
| − | background-color: var(--links-orange);
| |
| − | color: #fff;
| |
| − | }
| |
| − | | |
| − | .choice.case:hover .button {
| |
| − | background-color: var(--links-cyan);
| |
| − | color: #fff;
| |
| − | }
| |
| − | | |
| − | .choice.handbook:hover .button {
| |
| − | background-color: var(--handbook-color);
| |
| − | color: #fff;
| |
| − | }
| |
| − | | |
| − | .choice.safe:hover .button {
| |
| − | background-color: var(--safe-color);
| |
| − | color: #fff;
| |
| − | }
| |
| − | </style>
| |
| − | | |
| − | <div id="cmp-container">
| |
| − | | |
| − | <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?
| |
| − | | |
| − | <div class="answer">
| |
| − | <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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
| |
| − | consectetur, adipisci velit...</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| | </div> | | </div> |
| − | <div class="question" data-aspect="Socio-/Technical"> | + | </div> |
| − | How to collect and analyse information from citizens?
| |
| | | | |
| − | | + | <div style=" display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;"> |
| − | <div class="answer-wrapper">
| + | <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2> |
| − | <div class="choice tech" id="q2-tech">
| + | <div>< a href="/ index. php/ Form:Disaster_Community_Technology" style=" color: var(--links- blue) ; font-size: 1. 5em; font-variant:small-caps"> Add new technology</ a></div> |
| − | <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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
| |
| − | consectetur, adipisci velit...</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> |
| − | <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-wrapper">
| + | |
| − | <div class="choice case" id="q3-case"> | + | <h2 style="display: flex; justify-content: space-between;"> |
| − | <div class="button">Use Cases</div>
| + | |
| − | <div class="desc">
| + | <img src="https://www.safetyinnovation.center/lcc/dct_list/img/filters.svg"> |
| − | It provides helpful information from social media and crowdsourcing
| + | <span>Filters</span> |
| − | examples around the theme “Mobilising Citizens”.
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="choice handbook" id="q3-handbook">
| |
| − | <div class="button">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>
| + | <a onclick="toggleFilter()" id="close-filter-button">×</a> |
| − | <div class="question" data-aspect="Socio-/Technical">
| + | </h2> |
| − | How can you mobilise the citizens?
| |
| | | | |
| − | <div class="answer">
| + | <div style=" text- align: center;"> |
| − | <div class=" answer- wrapper"> | + | <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button> |
| − | <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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
| |
| − | consectetur, adipisci velit...</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>
| |
| − | <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=" filter-wrapper"> |
| − | <div class="answer-wrapper">
| + | < h4 class=" filter- toggle"> Functions <div class=" plus icon"></div> |
| − | <div class="choice guide" id="q5-guide">
| + | </h4> |
| − | <div class=" button"> Guidelines</div> | + | <div class=" filter- container"> |
| − | <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
| + | <div class=" filter-button -wrapper"> |
| − | consectetur, adipisci velit...</div>
| + | <button type="button" onclick="selectAll('#functions-filter')">Select all</button> | |
| − | </div>
| + | <button type="button" onclick="deselectAll('#functions-filter')">Clear all</button> |
| − | <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">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 class="filter-content loose" id="functions-filter"></div> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | <div class="question" data-aspect="Socio-/Technical">
| |
| − | How can you mobilise the volunteers?
| |
| | | | |
| − | <div class="answer">
| + | <div class=" filter-wrapper"> |
| − | <div class=" answer-wrapper"> | + | < h4 class=" filter- toggle"> Supported Platforms <div class=" plus icon"></div> |
| − | <div class="choice tech" id="q6-tech">
| + | </h4> |
| − | <div class=" button"> Technologies</div> | + | <div class=" filter- container"> |
| − | <div class="desc">
| + | <div class=" filter-button -wrapper"> |
| − | It allows filtering for software that covers the function Post &
| + | <button type="button" onclick="selectAll('#data-source-filter')">Select all</button> | |
| − | Schedule, which aims at publishing information on social media.
| + | <button type="button" onclick="deselectAll('#data-source-filter')">Clear all</button> |
| − | </div>
| |
| − | </div>
| |
| − | <div class=" choice guide" id="q6- guide"> | |
| − | <div class="button" >Guidelines</div> | |
| − | <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
| |
| − | consectetur, adipisci velit...</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 class="filter-content loose" id="data-source-filter"></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=" filter-wrapper"> |
| − | <div class="answer-wrapper">
| + | < h4 class=" filter- toggle"> Pricing <div class=" plus icon"></div> |
| − | <div class="choice case" id="q7-case">
| + | </h4> |
| − | <div class=" button"> Use Cases</div> | + | <div class=" filter- container"> |
| − | <div class="desc">
| + | <div class=" filter-button -wrapper"> |
| − | It provides helpful information from social media and crowdsourcing
| + | <button type="button" onclick="selectAll('#business-model-filter')">Select all</button> | |
| − | examples around the theme “Making Information Accessible”.
| + | <button type="button" onclick="deselectAll('#business-model-filter')">Clear all</button> |
| − | </div>
| |
| − | </div>
| |
| − | <div class=" choice handbook" id="q7- handbook"> | |
| − | <div class="button" >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 class="filter-content" id="business-model-filter"></div> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | <div class="question" data-aspect="Socio-/Technical">
| |
| − | How can you make your information accessible?
| |
| | | | |
| − | <div class="answer">
| + | < !-- <div class=" filter-wrapper"> |
| − | <div class=" answer-wrapper"> | + | < h4 class=" filter- toggle"> Used by Practitioners <div class=" plus icon"></div> |
| − | <div class="choice tech" id="q8-tech">
| + | </h4> |
| − | <div class=" button"> Technologies</div> | + | <div class=" filter- container"> |
| − | <div class="desc">
| + | <div class=" filter-button -wrapper"> |
| − | It allows filtering for software that covers the function Post &
| + | <button type="button" onclick="selectAll('#dm-use-filter')">Select all</button> | |
| − | Schedule, which aims at publishing information on social media.
| + | <button type="button" onclick="deselectAll('#dm-use-filter')">Clear all</button> |
| − | </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">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 class="filter-content" id="dm-use-filter"></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-wrapper">
| + | style="border-top: 1px solid var(--links-blue); margin-top: 1em; padding-top: 1em;"> |
| − | <div class="choice case" id="q9-case">
| + | |
| − | <div class="button">Use Cases</div>
| + | <input type="checkbox" id="used-by-practitioners" value="yes"> |
| − | <div class="desc">
| + | <label for="used-by-practitioners">Used by practitioners</label> |
| − | 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">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>
| + | <div> |
| − | <div class="question" data-aspect="Socio-/Technical">
| + | <input type="checkbox" id="has-use-case" value="yes"> |
| − | How can you target your communication?
| + | <label for="has-use-case">Use case available</label> |
| − | | |
| − | <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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
| |
| − | consectetur, adipisci velit...</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> |
| − | </div>
| + | <input type="checkbox" id="show-archived" value="yes"> |
| − | <div class="subtheme">
| + | <label for="show-archived">Show archived</label> |
| − | <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> | | </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">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
| |
| − | consectetur, adipisci velit...</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> | | </div> |
| | + | <div id="dct-tabulator"></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) {
| |
| − | // Action takes us to Tech Library
| |
| − | const enc = btoa(encodeURIComponent(JSON.stringify(act)));
| |
| − | window.location.assign('/index.php/List_of_Disaster_Community_Technologies?do=' + enc);
| |
| − | }
| |
| − |
| |
| − | if (answerId.indexOf('safe') !== -1) {
| |
| − | // Action takes us to Feel Safe
| |
| − | window.location.assign('/index.php/Feel_Safe');
| |
| − | }
| |
| − | }
| |
| | | | |
| − | document.querySelectorAll('.choice').forEach(el => el.addEventListener('click', handler, { passive: true }));
| |
| − |
| |
| − | </script>
| |
| | </includeonly> | | </includeonly> |