tutorial.html

<!--
    Tutorial phases are separated into recruiting and experiment.
    In the recruiting tutorial the steps ending with _recruiting will be loaded, if they exist.

    A handlebars helper {{> template}} just loads the template with that name.
 -->

<!-- Welcome -->

<template name="tut_welcome">
    <p>Welcome to the Crisis Mapping Project, a Microsoft Corporation research project.</p>

    <p>Before beginning, you will complete a brief tutorial to familiarize yourself with the Crisis Mapping interface.</p>

    <p>You would have completed this tutorial when you registered for the Crisis Mapping Project, but this will refresh your memory.</p>

    {{> tut_welcome_common}}
</template>

<template name="tut_welcome_recruiting">
    <p>This HIT is a training session for the Crisis Mapping Project, a Microsoft Research project.</p>

    <p><b>You will complete this tutorial by yourself, but if you do the Crisis Mapping task later, you may be working <i>either</i> by yourself <i>or</i> with a team of other workers.</b></p>

    {{> tut_welcome_common}}
</template>

<template name="tut_welcome_common">
    <p>To learn more about the team conducting this research, please visit the following links:</p>

    <ul>
        <li><a href="http://research.microsoft.com/en-us/groups/oess_nyc/" target="_blank">http://research.microsoft.com/en-us/groups/oess_nyc/</a></li>
        <li><a href="http://www.andrewmao.net/" target="_blank">http://www.andrewmao.net/</a></li>
    </ul>

    <p>For the best experience, please maximize the window containing this task or make it as large as possible.</p>
</template>

<!-- What is crisis mapping -->

<template name="tut_whatis">
    <p>We need your help to better understand how teams of people can work together on a crisis mapping problem.</p>

    {{> tut_whatis_common}}
</template>

<template name="tut_whatis_recruiting">
    <p>The Crisis Mapping Project is a study to better understand how teams of people can work together on a crisis mapping problem.</p>

    {{> tut_whatis_common}}
</template>

<template name="tut_whatis_common">
    <p>A “crisis map” is created in response to a natural or humanitarian disaster by monitoring social media for reports of events on the ground and placing them on a map.</p>
</template>

<!-- The project -->

<template name="tut_project">
    <p>In this project, you will work with a team of other crisis mappers to create a crisis map for Typhoon Pablo, a Category 5 hurricane which hit the Philippines in December 2012.</p>

    {{> tut_project_common}}
</template>

<template name="tut_project_recruiting">
    <p>In this tutorial, you will be shown Twitter reports from Typhoon Pablo, a Category 5 hurricane which hit the Philippines in December 2012.</p>

    {{> tut_project_common}}
</template>

<template name="tut_project_common">
    <p><b>NOTE: This hurricane and the data you see is historical. This is not an actual current crisis.</b></p>
</template>

<!-- Your task -->

<template name="tut_yourtask">
    <p>To create the crisis map, you and your team members will be shown actual Twitter reports from Typhoon Pablo. Your team must figure out which reports describe relevant crisis events.</p>

    <p>In collaboration with your team, you must record these events describing the types of events, their descriptions, and their locations.</p>

    {{> tut_yourtask_common}}
</template>

<template name="tut_yourtask_recruiting">
    <p>To create the crisis map, you and your team members will be shown actual Twitter reports from Typhoon Pablo. Your team must figure out which reports describe relevant crisis events.</p>

    <p>In this tutorial, you will learn how to record these events by describing the types of events, their descriptions, and their locations.</p>

    {{> tut_yourtask_common}}
</template>

<template name="tut_yourtask_common">
    <p>Relevant reports include damage to infrastructure, reports of flooded regions, casualties, local residents that have been displaced, and evacuation centers. These should be recorded on the crisis map.</p>

    <p>Other reports are irrelevant or inaccurate and should not be recorded.</p>
</template>

<template name="tut_goal">
    <p>This tutorial will provide a general description of the task and explain the basic functions of the Crisis Mapping tool, but it is your job to figure out how to solve the problem.</p>

    <p>By effectively solving this problem and creating an accurate crisis map with your teammates, you can help us learn how to better respond to future natural disasters.</p>

    <p><b>In some cases, you may have a small team, or be the <i>only</i> person on your team, and you may not be able to finish recording events for all of the reports. You should focus on creating accurate, verifiable records over incomplete or partially categorized events.</b></p>
</template>

<!-- Overview of page sections -->

<template name="tut_datastream">
    <p>Data reports appear as Tweets in the Stream on the left.</p>

    <p><i>This tutorial shows a few pieces of example data. You will see much more actual data in the task.</i></p>
</template>

<template name="tut_filterdata">
    <p>You should click on links to see what reports refer to, and to determine whether or not the data is relevant. You may search the Internet for places and phrases mentioned in reports.</p>

    <p>You may also hide tweets that appear to be irrelevant by clicking the
    <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span></button>
    button. When you hide a tweet, it disappears for everyone.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">Great, you hid a tweet. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">To continue, find one irrelevant tweet and hide it.</b>
    {{/if}}
    </p>
</template>

<template name="tut_navbar">
    <p>The navbar allows you to access the three primary ways to record information and work with others: <b>event records</b>, <b>map</b>, and <b>documents</b>.</p>

    <p>It also shows <b>notifications</b> you receive from other mappers.</p>
</template>

<template name="tut_events">
    <p>The <b>Event Records</b> pane is the primary tool for recording events.</p>

    <p>Here you will see all of the event records you and your collaborators create.</p>
</template>

<template name="tut_event_description">
     <p>Event records comprise several fields describing information about events.</p>

     <p>Your job is to fill in these fields for each relevant crisis event.</p>

     <p>Some information about the event can be found in the tweet itself, while other information can be found online or will require your own judgment.</p>
</template>

<template name="tut_create_event">
    <p>Create a new event by clicking the "Create New Event" button at the <b>bottom of the page</b>.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You've created an event. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Create a new event now.</b>
    {{/if}}
    </p>
</template>

<template name="tut_editevent">
    <p>After you create an event, you will automatically be placed in edit mode.</p>

    <p>You may also edit an existing event record by double-clicking or by clicking the blue <button class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-pencil"></span></button> button. You will see edits by other mappers in real-time.</p>

    <p>Only one person can edit an event record at a time, so when you're done, click the green
        <button class="btn btn-xs btn-success">
            <span class="glyphicon glyphicon-check"></span>Save
        </button>
        button to save the event.</p>

    {{!-- Currently no edit step required, as create event automatically does it.

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You can now edit an event. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Edit the event record that you just created.</b>
    {{/if}}
    </p>

    --}}
</template>

<template name="tut_events_index">
    <p>The first column shows records numbered in the order they were created.</p>

    <p>You can use this number to coordinate with other mappers in the chat room, which we'll show later.</p>
</template>

<template name="tut_events_sources">
    <p>The <b>Sources</b> column shows all tweets that refer to the same event.</p>

    <p>You can attach a tweet to the event record by dragging its <b class="text-info">blue header</b> and dropping it on the record.</p>

    <p>Once you attach the tweet to an event record, you may hover over it to see its contents.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You've attached a tweet to an event. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Drag a tweet over to the event you just created.</b>
    {{/if}}
    </p>
</template>

<template name="tut_events_type">
    <p>Events that are relevant for crisis mapping will fit into one of these types:</p>

    <ul>
    <li>Damaged bridges</li>
    <li>Damaged crops</li>
    <li>Damaged hospitals/health facilities</li>
    <li>Damaged housing</li>
    <li>Damaged roads</li>
    <li>Damaged schools</li>
    <li>Damaged vehicles</li>
    <li>Damaged infrastructure (other)</li>
    <li>Death(s) reported</li>
    <li>Displaced population</li>
    <li>Evacuation center</li>
    <li>Flooding</li>
    </ul>

    <p>When you are editing an event record, you can <b>click a field</b> to enter a value. Fields that are empty will display the text <i class="text-muted">(empty)</i>.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You selected a type for an event. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Classify the event by clicking the <i>Type</i> field and choosing from the dropdown menu.</b>
    {{/if}}
    </p>
</template>

<template name="tut_events_description">
    <p>The <b>Description</b> column allows you to record a brief description of the event.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You described the event. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Write something in the event's description.</b>
    {{/if}}
    </p>
</template>

<template name="tut_events_region">
    <p>The <b>Region</b> column shows the region where the event occurred.</p>

    <p>The Philippines has 17 administrative regions. You may need to look for regions and cities on other websites if you can't find them directly on the map.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You selected a region. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Add your best guess of the region from the tweet you just attached.</b>
    Hover your mouse over the tweet you just attached to see its text.
    {{/if}}
    </p>
</template>

<template name="tut_events_province">
    <p>The <b>Province</b> column is the province where the event occurred.</p>

    <p>There are 80 provinces in the Philippines.</p>

    <p>If you can find the province for the tweet, enter it in now.</p>
</template>

<template name="tut_events_location">
    <p>The <b>Location</b> column shows the longitude/latitude for the event.</p>

    <p>If an event record does not have a location yet, you can place it on the map. We will show you how to do this momentarily.</p>

    <p>If you find these numbers from a map service on the Internet, you can use these numbers while editing the event.</p>

    <!--
    <p>The tweet does not have information about the location. Leave it blank for now.</p>
    -->
</template>

<template name="tut_addtweet">
    <p>You may also <b>add additional tweets to existing event records</b> if they refer to the same event. You can also <b>drag tweets from one event to another</b> to correct mistakes or reorganize records.</p>

    <p>If you <b>hover over an attached tweet</b> and find it to be irrelevant, you can use the <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span></button> to hide it.</p>

    <p><b class="text-danger">If you can find another tweet that refers to the same event as this one, add it to the record by dragging and dropping.</b></p>

    <!--
    <p>This tweet has additional information about the event you just recorded.<b class="text-danger">Add this tweet to the record.</b></p>
    -->
</template>

<template name="tut_sortevent">
    <p>You can sort events by their data by clicking the arrows in the event header.</p>
</template>

<template name="tut_map">
    <p>The <b>Map</b> displays a marker for each recorded event.</p>

    <p>If no longitude/latitude has been entered for an event, the marker will not appear on the map.</p>
</template>

<template name="tut_mapcontrols">
    <p>Use these map controls to pan around the map, and zoom in and out. You can also scroll and drag with your mouse.</p>

    <p>With your mouse, you can also pan by dragging and zoom by scrolling.</p>

    <p><b>This map is limited to the area around the Philippines, so you will need to first zoom in before you can pan the view.</b></p>
</template>

<template name="tut_maplocate">
    <p>You can press the
    <button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-screenshot"></span> Locate</button> button to place an event on the map. You may need to search on the Internet to find a precise location for an event that you see.</p>

    <p>As you move your mouse over the map, note that the coordinates are shown in the <b>bottom right</b>. Use this to place the event in a precise location.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You placed an event on the map. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Using the location information from the tweet, place the event on the map.</b>
    {{/if}}
    </p>
</template>

<template name="tut_editmap">
    <p>When looking at the map, you may hover or click on any event to view its details, and drag any event marker to change its geographical location.</p>

    <p>As you learn more information about an event, you will be able to pinpoint its location more accurately.</p>
</template>

<template name="tut_maplocation">
    <p>Notice that the longitude/latitude has automatically been updated in the event record. Now, you can also edit the coordinates by clicking them directly.</p>

    <p>Now, select the province, if you know it, and save the record using the <button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-check"></span>Save</button> button. This will let someone else edit the event.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You saved the event. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Save the event now.</b>
    {{/if}}
    </p>

    <p>Once you have saved the event, you may click its location to see it on the map.</p>
</template>

<template name="tut_verify">
    <p>You may also check the accuracy of the events records created by other crisis mappers by verifying their data. The <span class="badge">0 <span class="glyphicon glyphicon-ok"></span></span> area shows that no one has verified this event yet.</p>

    <p>If you think an event record is accurate, you may verify it by hovering over this area and clicking the <button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok"></span> Verify</button> button. You can also remove your vote for an event if you think it is no longer accurate.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You checked the event. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Since you created this event and believe it is accurate, check it now.</b>
    {{/if}}
    </p>
</template>

<template name="tut_documents">
    <p><b>Documents</b> are available for recording information relevant to the task but not included in event records. They are shared with everyone else and can be edited simultaneously.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You created a document. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Create a document by clicking the <button class="btn btn-primary">New Document</button> button.</b>
    {{/if}}
    </p>
</template>

<template name="tut_editdocs">
    <p>You can rename any document by clicking on its title and create new documents as necessary.</p>

    <p><b class="text-danger">Type something in the document.</b> Other mappers will see this when they read the document.</p>

    <p><b class="text-success">When you're done typing, continue to the next step.</b></p>
</template>

<template name="tut_userlist">
    <p>The <b>User List</b> shows team members who are currently online in <span class="label label-success">green</span>, and those who have stopped participating in <span class="label label-default">grey</span>. You are shown in <span class="label label-inverse">black</span>.</p>

    <p>When other users are online, you may hover your mouse over their name to invite them to chat.</p>

    <p><b>If you are working by yourself, you will see only your own name here.</b></p>
</template>

<template name="tut_chatrooms">
    <p>You may create and join <b>chat rooms</b> to communicate with other users. Use the <button class="btn btn-xs btn-info">New room</button> button to create a chat room.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You created a room. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Create a new chat room now.</b>
    {{/if}}
    </p>
</template>

<template name="tut_notifications">
    <p>When other users invite you to chat or mention you in a chat room, you will see notifications appear here.</p>

    <p>Click on them to go to the chat room.</p>
</template>

<template name="tut_joinchat">
    <p> You will see a list of all chat rooms and the number of people in them, but you can only be in one chat room at a time.</p>

    <p>To join a chat room, just click on it.</p>
</template>

<template name="tut_leavechat">
    <p>When you are in a chat room, you can see who else is in that room. Each chat room displays the entire history of chats in that room.</p>

    <p>To leave a chat room, you can either click on “leave” or click on another chat room, which will then become active.</p>
</template>

<template name="tut_chatting">
    <p>When you are in a chat room, you can use special characters to notify users and reference tweets or events.</p>

    <ul>
        <li>Use <b class="text-danger">@</b> to mention a user by name. This will notify them.</li>
        <li>Use <b class="text-danger">~</b> (tilde) to reference a tweet by its number.</li>
        <li>Use <b class="text-danger">#</b> to reference an event by its number.</li>
    </ul>

    <p>When you start typing the symbols above, an automatic filtered list will appear.</p>

    <p>Selecting an item in this list will create a link in your chat message that users can click on to jump to the tweet or event.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">You know how to use the chat. Continue to the next step.</b>
    {{else}}
    <b class="text-danger">Type something in the chat.</b> For example, to tell another user to look at the event you created, type <kbd>@{{myusername}} can you take a look at event #1?</kbd> You are talking to yourself here, but you will be chatting with other users in the actual task.
    {{/if}}
    </p>
</template>

<!-- Final reminders -->

<!-- Ground rules - EXPERIMENT ONLY -->

<template name="tut_groundrules">
    <p>The project will run for one hour.</p>

    <p>You may quit the project at any time.</p>

    <!-- <p>You may also pause your work during the project by clicking on the Pause button. You may resume at any time by clicking the Resume button.</p> -->

    <p>If you perform no activity for several minutes, your session will be automatically idled.</p>
</template>

<!-- Payment -->

<template name="tut_payment">
    <p>Your payment will be determined by how much time you personally spend working on the task, and also the overall performance of your team.</p>

    <p>Your team may be competing with other teams, and your team's performance will be measured relative to either the best-performing team or other benchmarks. Your compensation will be calculated as:</p>

    <blockquote>
    <p><b>(minutes you worked)/60 &times; ($6 + your team bonus)</b></p>
    </blockquote>

    <p>Your team bonus will be calculated as:</p>

    <blockquote>
    <p><b>(Valid events your team correctly records)/(Highest number of valid events labeled by any team)</b></p>
    </blockquote>

    <p><b>If you work for the full one hour, your compensation will be no less than $6 and as much as $15, depending on your team's performance.</b></p>

    <p>Your payment will be shown during the task in the highlighted region. If you quit early or are idle you will only by paid for the fraction of time you work.</p>

    <p>Thus, you should not just work hard yourself, but also help your team succeed.</p>

    <p><b>Sometimes, you may be on a team by yourself. In this case, you will be evaluated against others who are also working by themselves.</b></p>
</template>

<template name="tut_payment_recruiting">
    <p>Thank you for participating in the Crisis Mapping Tutorial.</p>

    <p>If you wish, you may now register to participate in the Crisis Mapping Project, to be conducted in the next few weeks.</p>

    <p>The Crisis Mapping Project will run for one hour, at a time and date that we will communicate to you in advance.</p>

    <p>If you work the full hour, you will be compensated <b>at least $6 and as much as $15 as a bonus</b>, depending on your team's performance.</p>
</template>

<!-- Move some of this into exit survey -->

<template name="tut_end">
    <p>Please read and acknowledge the <b>terms of use</b> for participating in this project.</p>

    <blockquote>
        <p><a href="http://research.microsoft.com/en-us/UM/legal/MSRCrisisMapConsent031714.htm" target="_blank">Click to view the terms of use.</a></p>
    </blockquote>

    <p>By clicking the checkbox below you confirm that you are at least 18 years of age, and that you understand what the project is about and how and why it is being done.</p>

    <p>Some tweets may contain descriptions or images of human or animal suffering, and may be disturbing to some users. If you know that you are adversely affected by this kind of content, feel free to exit the experiment. By checking the box, you also acknowledge that you accept this possibility through your participation in crisis mapping.</p>

    <div class="checkbox">
        <label class="checkbox">
            <input type="checkbox" checked={{checked}}> I have read and acknowledged the terms of use.
        </label>
    </div>

    <p>If you have any questions about this project, please contact Andrew Mao at <b>mao@seas.harvard.edu</b>.</p>

    <p>
    {{#if stepCompleted}}
    <b class="text-success">Click 'Finish' below to join a team of other workers and start crisis mapping!</b>
    {{else}}
    <b class="text-danger">Please read and agree to the terms of use.</b>
    {{/if}}
    </p>

    <h4>As you proceed, you may experience a brief lag as the mapping data loads. Please be patient and do not close your browser.</h4>
</template>