add drag instruction

instruction.html

@@ -58,7 +58,9 @@ <h5>Steps</h5>
  <li>Read the original articles</li>
  <li>Read the paragraphs</li>
  <li>Connect the events with the correct label based on the information from articles and
- paragraphs.
+ paragraphs.<br>
+ PS: Just drag the dot near the source event to the dot near the target event, and the
+ connection will be built automatically.
  </li>
  <li>Switch to the next pair until the end, and submit.</li>
  </ol>
@@ -80,33 +82,33 @@ <h5>Relation Label</h5>
  <table class="table">
  <thead>
  <tr>
- <th style="width: 120px;">relation</th>
  <th>recalled event</th>
  <th>retold event</th>
+ <th style="width: 120px;">relation</th>
  <th style="text-align: justify;">reason</th>
  </tr>
  </thead>
  <tbody>
  <tr>
- <td>Match</td>
  <td>Our family, consisting of, 8 - year old son.</td>
  <td>we, have, an 8 year old</td>
+ <td>Match</td>
  <td style="text-align: justify;">different description, but same meaning
  </td>
  </tr>
  <tr>
- <td>Match</td>
  <td>We, proceeded to, our hotel.</td>
  <td>We, reaching, our hotel on the Canadian side</td>
+ <td>Match</td>
  <td style="text-align: justify;">the second is more detailed, but both of
  them have same meaning.</td>
  </tr>
  <tr>
- <td>Match</td>
  <td>1. he, asked, me<br>
  2. he, asked, marry him
  </td>
  <td>he, propose</td>
+ <td>Match</td>
  <td style="text-align: justify;">Each recalled/retold event may matched to
  multiple retold/recalled
  events.</td>
@@ -133,24 +135,24 @@ <h5>Relation Label</h5>
  <table class="table">
  <thead>
  <tr>
- <th style="width: 120px;">relation</th>
  <th>recalled event</th>
  <th>retold event</th>
+ <th style="width: 120px;">relation</th>
  <th style="text-align: justify;">reason</th>
  </tr>
  </thead>
  <tbody>
  <tr>
- <td>Conflict</td>
  <td>No one, plays, sports</td>
  <td>you, do, sports</td>
+ <td>Conflict</td>
  <td style="text-align: justify;">Same event, but their meaning are
  conflict.</td>
  </tr>
  <tr>
- <td>Conflict</td>
  <td>I, walk to, school</td>
  <td>I, drive to, school</td>
+ <td>Conflict</td>
  <td style="text-align: justify;">Same event, but their meaning are
  conflict.</td>
  </tr>
@@ -164,29 +166,29 @@ <h5>Relation Label</h5>
  </td>
  <td style="text-align: justify;">
  If there are not any relations between events, you can just leave it empty and continue
- to
- label the next pair
+ to label the next pair.<br>
+ In other words, you don't have to link the dots between the recalled and retold events.
  <table class="table">
  <thead>
  <tr>
- <th style="width: 120px;">relation</th>
  <th>recalled event</th>
  <th>retold event</th>
+ <th style="width: 120px;">relation</th>
  <th style="text-align: justify;">reason</th>
  </tr>
  </thead>
  <tbody>
  <tr>
- <td>(No relation)</td>
  <td>we, drive to, our hotel on the Canadian side </td>
  <td>we, exploring, many activities
  </td>
+ <td>(No relation)</td>
  <td style="text-align: justify;"></td>
  </tr>
  <tr>
- <td>(No relation)</td>
  <td>We, go to, Toronto</td>
  <td>We, Driving back</td>
+ <td>(No relation)</td>
  <td style="text-align: justify;">Although the events seem that they have
  relations about match or conflict, the sentences of them are,<br>
  - recalled: Our next stop was Toronto.<br>