Difference between revisions of "Widget:UserGuidance"

From LINKS Community Center
Jump to: navigation, search
 
(9 intermediate revisions by one other user not shown)
Line 2: Line 2:
 
</noinclude>
 
</noinclude>
 
<includeonly>
 
<includeonly>
−
    <style>
 
−
        :root {
 
−
            --compass-color: #C31980;
 
−
            --handbook-color: #C2902D;
 
−
            --safe-color: #80C319;
 
−
        }
 
  
−
        h2.opened .plus.icon::after,
+
    <!-- STYLES BEGIN -->
−
        h3.opened .plus.icon::after,
+
    <link rel="stylesheet" href="https://www.safetyinnovation.center/lcc/user_guidance/styles.css">
−
        h4.opened .plus.icon::after {
+
    <!-- STYLES END -->
−
            transform: rotate(0);
 
−
        }
 
−
 
 
−
        #cmp-container {
 
−
            font-family: 'Open Sans';
 
−
            font-size: 120%;
 
−
        }
 
−
 
 
−
        #cmp-container h1,
 
−
        #cmp-container h2,
 
−
        #cmp-container h3 {
 
−
            font-family: 'Raleway';
 
−
            font-weight: 300;
 
−
            letter-spacing: .06em;
 
−
            position: relative;
 
−
        }
 
−
 
 
−
        #cmp-container h4 {
 
−
            font-size: 1em;
 
−
            font-weight: 300;
 
−
            transition: all 0.4s ease;
 
−
        }
 
−
 
 
−
        #cmp-container h4.opened {
 
−
            font-size: 1em;
 
−
            font-weight: 500;
 
−
        }
 
−
 
 
−
        #cmp-container h1 {
 
−
            letter-spacing: .06em;
 
−
            color: var(--compass-color);
 
−
        }
 
−
 
 
−
        #cmp-intro h1 svg {
 
−
            height: 2em;
 
−
            fill: var(--compass-color);
 
−
        }
 
−
 
 
−
        #cmp-container h2 {
 
−
            margin-top: 1.5em;
 
−
            padding-bottom: 5px;
 
−
            color: var(--compass-color);
 
−
            cursor: pointer;
 
−
            transition: all 0.4s ease;
 
−
        }
 
−
 
 
−
        #cmp-container h2::before {
 
−
            content: '';
 
−
            display: block;
 
−
            position: absolute;
 
−
            left: 1.2em;
 
−
            bottom: 0;
 
−
            width: 100%;
 
−
            height: 1px;
 
−
            background-color: currentColor;
 
−
            letter-spacing: .06em;
 
−
            transition: all 0.4s ease;
 
−
            transform: scaleX(0);
 
−
            transform-origin: bottom left;
 
−
        }
 
−
 
 
−
        #cmp-container h2.opened::before {
 
−
            transform: scaleX(1);
 
−
        }
 
−
 
 
−
        #cmp-container h3 {
 
−
            font-size: 1.4em;
 
−
            cursor: pointer;
 
−
        }
 
−
 
 
−
        .subtheme {
 
−
            margin-bottom: 2em;
 
−
            margin-left: 2em;
 
−
        }
 
−
 
 
−
        .question {
 
−
            font-size: 1.1em;
 
−
            padding-left: 1.65em;
 
−
            cursor: pointer;
 
−
            margin-bottom: 1em;
 
−
        }
 
−
 
 
−
        .answer {
 
−
            margin: 1em 1.8em;
 
−
            font-size: 1.2rem;
 
−
        }
 
−
 
 
−
        .subtheme,
 
−
        .question,
 
−
        .answer {
 
−
            display: none;
 
−
        }
 
−
 
 
−
        .subtheme.opened,
 
−
        .question.opened,
 
−
        .answer.opened {
 
−
            display: block;
 
−
        }
 
−
 
 
−
        .answer-wrapper {
 
−
            display: grid;
 
−
            grid-template-columns: 1fr 1fr 1fr;
 
−
            gap: 1em;
 
−
            margin-bottom: 2em;
 
−
        }
 
−
 
 
−
        .choice {
 
−
            display: flex;
 
−
            flex-flow: column nowrap;
 
−
            align-items: center;
 
−
            border: 2px solid;
 
−
            border-radius: 5px;
 
−
        }
 
−
 
 
−
        .choice:hover .button {
 
−
            font-weight: 600;
 
−
        }
 
−
 
 
−
        .choice .button {
 
−
            width: 100%;
 
−
            transition: all 250ms;
 
−
            display: flex;
 
−
            justify-content: center;
 
−
            align-items: center;
 
−
            padding: .75em;
 
−
            color: #fff;
 
−
            border-bottom: 2px solid;
 
−
            border-radius: 2px 2px 0 0;
 
−
        }
 
−
 
 
−
        .choice .desc {
 
−
            font-size: 75%;
 
−
            padding: 1em;
 
−
            transition: all 250ms;
 
−
        }
 
−
 
 
−
        .choice.tech {
 
−
            color: var(--links-blue);
 
−
        }
 
−
 
 
−
        .choice.guide {
 
−
            color: var(--links-orange);
 
−
        }
 
−
 
 
−
        .choice.case {
 
−
            color: var(--links-cyan);
 
−
        }
 
−
 
 
−
        .choice.handbook {
 
−
            color: var(--handbook-color);
 
−
        }
 
−
 
 
−
        .choice.safe {
 
−
            color: var(--safe-color);
 
−
        }
 
−
 
 
−
        .choice.tech .button {
 
−
            background-color: var(--links-blue);
 
−
            border-color: var(--links-blue);
 
−
        }
 
−
 
 
−
        .choice.guide .button {
 
−
            background-color: var(--links-orange);
 
−
            border-color: var(--links-orange);
 
−
        }
 
−
 
 
−
        .choice.case .button {
 
−
            background-color: var(--links-cyan);
 
−
            border-color: var(--links-cyan);
 
−
        }
 
−
 
 
−
        .choice.handbook .button {
 
−
            background-color: var(--handbook-color);
 
−
            border-color: var(--handbook-color);
 
−
        }
 
−
 
 
−
        .choice.safe .button {
 
−
            background-color: var(--safe-color);
 
−
            border-color: var(--safe-color);
 
−
        }
 
−
 
 
−
        .choice:hover .button {
 
−
            background-color: #fff;
 
−
        }
 
−
 
 
−
        .choice.tech:hover .button {
 
−
            color: var(--links-blue);
 
−
        }
 
−
 
 
−
        .choice.guide:hover .button {
 
−
            color: var(--links-orange);
 
−
        }
 
−
 
 
−
        .choice.case:hover .button {
 
−
            color: var(--links-cyan);
 
−
        }
 
−
 
 
−
        .choice.handbook:hover .button {
 
−
            color: var(--handbook-color);
 
−
        }
 
−
 
 
−
        .choice.safe:hover .button {
 
−
            color: var(--safe-color);
 
−
        }
 
−
 
 
−
        .rw-wrap {
 
−
            padding: 1em;
 
−
            background-color: #f3f3f3;
 
−
            border-radius: 5px;
 
−
        }
 
−
 
 
−
        .rw small {
 
−
            display: inline-block;
 
−
            padding-bottom: .5em;
 
−
            font-size: smaller;
 
−
        }
 
−
 
 
−
        .rw-link {
 
−
            padding-top: .5em;
 
−
        }
 
−
    </style>
 
  
 
     <div id="cmp-container">
 
     <div id="cmp-container">
Line 338: Line 111:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Handbook on how to mobilise citizens.
+
                                     Learning module on how to be prepared in case of evacuation or in-sheltering.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 344: Line 117:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Handbook on risk awareness.
+
                                     Learning module on how to communicate risk using different media.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 361: Line 134:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     How to set up your communication channel.
+
                                     Learning module on how to create an accessible social media post.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 367: Line 140:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Potential accessibility problems.
+
                                     Learning module on how to solve potential accessibility issues.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 373: Line 146:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Connecting problems to actions.
+
                                     Learning module on how to connect accessibility problems to actions.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 384: Line 157:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Access educational resources on key topics (vulnerability, preparedness, awareness, communication) that can help you organize and conduct diaster preparedness education activities with children.
+
                                     Access educational resources on key topics that can help you organize and conduct diaster preparedness education activities with children.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
−
                            <!-- <div class="choice safe" id="tc-who-stud-safe-vul">
 
−
                                <div class="button">Feel Safe</div>
 
−
                                <div class="desc">
 
−
                                    Reducing vulnerability.
 
−
                                </div>
 
−
                            </div>
 
−
                            <div class="choice safe" id="tc-who-stud-safe-vul">
 
−
                                <div class="button">Feel Safe</div>
 
−
                                <div class="desc">
 
−
                                    Increasing awareness.
 
−
                                </div>
 
−
                            </div>
 
−
                            <div class="choice safe" id="tc-who-stud-safe-vul">
 
−
                                <div class="button">Feel Safe</div>
 
−
                                <div class="desc">
 
−
                                    Stories: Family communication plan.
 
−
                                </div>
 
−
                            </div> -->
 
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
Line 434: Line 189:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Mobility: Giving information to citizens.
+
                                     Learning module on how to communicate with citizens.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 440: Line 195:
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Feel Safe includes several activities on communication.
+
                                     Find here educational resources to explore the importance of a good communication in DRM.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 478: Line 233:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Handbook on accessibility.
+
                                     How to ensure the accessibility of your information.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 484: Line 239:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Handbook on risk awareness.
+
                                     Learning module on how to communicate risk using different media.
−
                                </div>
 
−
                            </div>
 
−
                            <div class="choice safe" id="eci-acc-safe">
 
−
                                <div class="button">Feel Safe</div>
 
−
                                <div class="desc">
 
−
                                    Educational platform Feel Safe also covers information accessibility.
 
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 590: Line 339:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Handbook on mobility includes actions useful for mobilizing citizens.
+
                                     Learning module on how to coordinate spontaneous aids from citizens.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 596: Line 345:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Handbook on risk awareness.
+
                                     Learning module on how to create messages that motivate action.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
−
                             <div class="choice safe" id="ewc-mob-handbook-safe">
+
                             <div class="choice safe" id="ewc-mob-safe">
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="button">Feel Safe</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Feel Safe promotes the use of social media and digital education.
+
                                     Readings, studies and practical tools to help you engage children and young people in DRM.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 634: Line 383:
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="button">Including Citizens Handbook</div>
 
                                 <div class="desc">
 
                                 <div class="desc">
−
                                     Handbook on mobilizing volunteers.
+
                                     Learning module on how to mobilize volunteers.
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 655: Line 404:
 
     </div>
 
     </div>
  
−
     <script>
+
     <!-- SCRIPT BEGIN -->
−
        // Attach plus icon to the title of expandable blocks.
+
    <script type="text/javascript" src="https://www.safetyinnovation.center/lcc/user_guidance/script.js"></script>
−
        document.querySelectorAll('.theme > h2, .subtheme > h3, .question > h4').forEach(el => {
+
    <!-- SCRIPT END -->
−
            const icon = document.createElement('div');
 
−
            icon.classList.add('plus', 'icon');
 
−
            el.insertBefore(icon, el.firstChild);
 
−
        });
 
−
 
 
−
        // Set up toggles for expandable blocks.
 
−
        document.getElementById('cmp-container').addEventListener('click', event => {
 
−
            if (event.target.tagName === 'H2') {
 
−
                document.querySelectorAll('H2').forEach(el => {
 
−
                    if (el === event.target) el.classList.toggle('opened');
 
−
                    else el.classList.remove('opened');
 
−
                });
 
−
 
 
−
                const group = event.target.closest('.theme');
 
−
                document.querySelectorAll('.subtheme').forEach(el => {
 
−
                    if (group.contains(el)) el.classList.toggle('opened');
 
−
                    else el.classList.remove('opened');
 
−
                });
 
−
            }
 
−
            if (event.target.tagName === 'H3') {
 
−
                document.querySelectorAll('H3').forEach(el => {
 
−
                    if (el === event.target) el.classList.toggle('opened');
 
−
                    else el.classList.remove('opened');
 
−
                });
 
−
 
 
−
                const group = event.target.closest('.subtheme');
 
−
                document.querySelectorAll('.question').forEach(el => {
 
−
                    if (group.contains(el)) el.classList.toggle('opened');
 
−
                    else el.classList.remove('opened');
 
−
                });
 
−
            }
 
−
            if (event.target.tagName === 'H4') {
 
−
                document.querySelectorAll('H4').forEach(el => {
 
−
                    if (el === event.target && !el.classList.contains('rw')) el.classList.toggle('opened');
 
−
                    else el.classList.remove('opened');
 
−
                });
 
−
 
 
−
                const group = event.target.closest('.question');
 
−
                document.querySelectorAll('.answer').forEach(el => {
 
−
                    if (group.contains(el)) el.classList.toggle('opened');
 
−
                    else el.classList.remove('opened');
 
−
                });
 
−
            }
 
−
        });
 
−
 
 
−
        const search = 'Search and Monitor',
 
−
            post = 'Post and Schedule',
 
−
            analysis = 'Analysis',
 
−
            metrics = 'Metrics',
 
−
            report = 'Report',
 
−
            collab = 'Collaboration',
 
−
            interop = 'Interoperability',
 
−
            meta = 'Meta';
 
−
 
 
−
        // Click actions.
 
−
        const actions = {
 
−
            'eci-acc-tech': {
 
−
                filter: {
 
−
                    functions: {
 
−
                        'Posting content': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'ewc-sam-tech': {
 
−
                filter: {
 
−
                    functions: {
 
−
                        'Hashtag search': true,
 
−
                        'Hashtag monitoring': true,
 
−
                        'Keyword search': true,
 
−
                        'Keyword monitoring': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'ewc-ca-tech': {
 
−
                filter: {
 
−
                    functions: {
 
−
                        'Hashtag search': true,
 
−
                        'Hashtag monitoring': true,
 
−
                        'Keyword search': true,
 
−
                        'Keyword monitoring': true,
 
−
                        'Text analysis': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'tc-who-cit-guide': {
 
−
                filter: {
 
−
                    'Covers Thematic': {
 
−
                        'Crisis communication': true
 
−
                    },
 
−
                    'Target Audience': {
 
−
                        'Policy Makers': true,
 
−
                        'Practitioners': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'tc-who-cit-safe': {
 
−
                url: '/index.php/Feel_Safe#stories'
 
−
            },
 
−
            'tc-who-vg-guide': {
 
−
                filter: {
 
−
                    'Covers Thematic': {
 
−
                        'Vulnerable groups': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'eci-how-guide': {
 
−
                filter: {
 
−
                    'Covers Thematic': {
 
−
                        'Verification': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'eci-acc-guide': {
 
−
                filter: {
 
−
                    'Covers Thematic': {
 
−
                        'Crisis communication': true,
 
−
                        'Content creation': true,
 
−
                    },
 
−
                    'Target Audience': {
 
−
                        'Policy Makers': true,
 
−
                        'Practitioners': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'ewc-ca-guide': {
 
−
                filter: {
 
−
                    'Covers Thematic': {
 
−
                        'Verification': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'ewc-mob-guide': {
 
−
                filter: {
 
−
                    'Covers Thematic': {
 
−
                        'Crowdsourcing': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'ewc-vol-guide': {
 
−
                filter: {
 
−
                    'Covers Thematic': {
 
−
                        'Unaffiliated volunteers': true
 
−
                    },
 
−
                    'Target Audience': {
 
−
                        'Policy Makers': true,
 
−
                        'Practitioners': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'tc-who-cit-case': {
 
−
                filter: {
 
−
                    'Use cases thematic': {
 
−
                        'Targeting Communication': true
 
−
                    },
 
−
                    'Type': {
 
−
                        'Social Media': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'eci-how-case': {
 
−
                filter: {
 
−
                    'Use cases thematic': {
 
−
                        'Ensuring Credible Information': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'eci-acc-case': {
 
−
                filter: {
 
−
                    'Use cases thematic': {
 
−
                        'Making Information Accessible': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'ewc-mob-case': {
 
−
                filter: {
 
−
                    'Use cases thematic': {
 
−
                        'Mobilising Citizens': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'ewc-vol-case': {
 
−
                filter: {
 
−
                    'Use cases thematic': {
 
−
                        'Mobilising Volunteers': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'ewc-sam-case': {
 
−
                filter: {
 
−
                    'Use cases thematic': {
 
−
                        'Collecting and Analysing Information from SMCS': true
 
−
                    }
 
−
                }
 
−
            },
 
−
            'ewc-ca-case': {
 
−
                filter: {
 
−
                    'Use cases thematic': {
 
−
                        'Collecting and Analysing Information from SMCS': true
 
−
                    }
 
−
                }
 
−
            },
 
−
        };
 
−
 
 
−
        const handler = event => {
 
−
            const answerId = event.currentTarget.id;
 
−
            const act = actions[answerId];
 
−
 
 
−
            if (!actions) return;
 
−
 
 
−
            if (answerId.indexOf('tech') !== -1) {
 
−
                const enc = btoa(encodeURIComponent(JSON.stringify(act)));
 
−
                window.location.assign('/index.php/List_of_Disaster_Community_Technologies' + (act ? '?do=' + enc : ''));
 
−
            }
 
−
 
 
−
            if (answerId.indexOf('case') !== -1) {
 
−
                const enc = btoa(encodeURIComponent(JSON.stringify(act)));
 
−
                window.location.assign('/index.php/List_of_Use_Cases' + (act ? '?do=' + enc : ''));
 
−
            }
 
−
 
 
−
            if (answerId.indexOf('guide') !== -1) {
 
−
                const enc = btoa(encodeURIComponent(JSON.stringify(act)));
 
−
                window.location.assign('/index.php/List_of_Guidelines' + (act ? '?do=' + enc : ''));
 
−
            }
 
−
 
 
−
            if (answerId.indexOf('safe') !== -1) {
 
−
                if (act.url) window.location.assign(act.url)
 
−
                else window.location.assign('/index.php/Feel_Safe');
 
−
            }
 
−
 
 
−
            if (answerId.indexOf('handbook') !== -1) {
 
−
                window.location.assign('/index.php/Including_Citizens_Handbook_-_Accessibility');
 
−
            }
 
−
        }
 
−
 
 
−
        document.querySelectorAll('.choice').forEach(el => el.addEventListener('click', handler, { passive: true }));
 
  
−
    </script>
 
 
</includeonly>
 
</includeonly>

Latest revision as of 20:55, 10 May 2024

Development version of the User Guidance.
Under construction.


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