Difference between revisions of "Widget:Compass"

From LINKS Community Center
Jump to: navigation, search
Line 1: Line 1:
−
<noinclude>Development version of the Compass.<br><strong style="color:red;">Not ready for production!</strong></noinclude>
+
<noinclude>Development version of the Compass.<br><strong style="color:red;">Not ready for production!</strong>
 +
</noinclude>
 
<includeonly>
 
<includeonly>
 +
    <style>
 +
        #cmp-container h1,
 +
        #cmp-container h2,
 +
        #cmp-container h3 {
 +
            font-family: 'Raleway';
 +
            font-weight: 300;
 +
            letter-spacing: .06em;
 +
        }
 +
        .subtheme, .question { display: none; }
 +
        .opened { display: block; }
 +
    </style>
 +
 +
    <script>
 +
        document.getElementById('cmp-container').addEventListener('click', event => {
 +
            if (event.target.tagName === 'H2') {
 +
                event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened'));
 +
            }
 +
        });
 +
    </script>
 +
 
     <div style="text-align: center; color: red; margin-top: 4em;">New version</div>
 
     <div style="text-align: center; color: red; margin-top: 4em;">New version</div>
 
     <hr>
 
     <hr>
 
     <h1>Compass</h1>
 
     <h1>Compass</h1>
  
−
     <div class="theme">
+
     <div id="cmp-container">
−
        <h2>Engaging Citizens</h2>
+
        <div class="theme">
−
        <div class="subtheme">
+
            <h2>Engaging Citizens</h2>
−
            <h3>Collecting and Analysing Information from SMCS</h3>
+
            <div class="subtheme">
−
            <div class="question" data-aspect="Social">
+
                <h3>Collecting and Analysing Information from SMCS</h3>
−
                Whom do you want to include in your collection and analysis of information, and from whom do you want to
+
                <div class="question" data-aspect="Social">
−
                collect and analyse information?
+
                    Whom do you want to include in your collection and analysis of information, and from whom do you
−
            </div>
+
                    want to collect and analyse information?
−
            <div class="question" data-aspect="Socio-/Technical">
+
                </div>
−
                How to collect and analyse information from citizens?
+
                <div class="question" data-aspect="Socio-/Technical">
−
            </div>
+
                    How to collect and analyse information from citizens?
−
        </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>
 
−
            <div class="question" data-aspect="Socio-/Technical">
 
−
                How can you mobilise the citizens?
 
 
             </div>
 
             </div>
−
        </div>
+
            <div class="subtheme">
−
        <div class="subtheme">
+
                <h3>Mobilising Citizens</h3>
−
            <h3>Mobilising Volunteers</h3>
+
                <div class="question" data-aspect="Social">
−
            <div class="question" data-aspect="Social">
+
                    Who do you want to mobilise, and from whom would you want mobility-affiliated information?
−
                Who do you want to mobilise (interested in volunteering), and from whom in such volunteering positions
+
                </div>
−
                would you want mobility-affiliated information?
+
                <div class="question" data-aspect="Socio-/Technical">
 +
                    How can you mobilise the citizens?
 +
                </div>
 
             </div>
 
             </div>
−
             <div class="question" data-aspect="Socio-/Technical">
+
             <div class="subtheme">
−
                How can you mobilise the volunteers?
+
                <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>
 +
                <div class="question" data-aspect="Socio-/Technical">
 +
                    How can you mobilise the volunteers?
 +
                </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
    </div>
 
  
−
    <div class="theme">
+
        <div class="theme">
−
        <h2>Improving Communication</h2>
+
            <h2>Improving Communication</h2>
−
        <div class="subtheme">
+
            <div class="subtheme">
−
            <h3>Making Information Accessible</h3>
+
                <h3>Making Information Accessible</h3>
−
            <div class="question" data-aspect="Social">
+
                <div class="question" data-aspect="Social">
−
                Who do you want to access your information, and from whom do you want to access information?
+
                    Who do you want to access your information, and from whom do you want to access information?
−
            </div>
+
                </div>
−
            <div class="question" data-aspect="Socio-/Technical">
+
                <div class="question" data-aspect="Socio-/Technical">
−
                How can you make your information accessible?
+
                    How can you make your information accessible?
−
            </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>
 
             </div>
−
             <div class="question" data-aspect="Socio-/Technical">
+
             <div class="subtheme">
−
                 How can you target your communication?
+
                 <h3>Targeting Communication</h3>
−
            </div>
+
                <div class="question" data-aspect="Social">
−
        </div>
+
                    Who do you want to target with your communication plan?
−
        <div class="subtheme">
+
                </div>
−
            <h3>Ensuring Credible Information</h3>
+
                <div class="question" data-aspect="Socio-/Technical">
−
            <div class="question" data-aspect="Social">
+
                    How can you target your communication?
−
                Who do you want to share credible information with, and from whom do you receive credible information?
+
                </div>
 
             </div>
 
             </div>
−
             <div class="question" data-aspect="Socio-/Technical">
+
             <div class="subtheme">
−
                How can you ensure credible information exchange?
+
                <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>
 +
                <div class="question" data-aspect="Socio-/Technical">
 +
                    How can you ensure credible information exchange?
 +
                </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
</includeonly>
 
</includeonly>

Revision as of 15:57, 22 November 2022

Development version of the Compass.
Not ready for production!


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