Adding a Dialogue Panel That Assigns Points

This will build on the dialogue in the first part.

Let us suppose you want the player to set some numerical attributes by spending points, for example, the player has 10 points to spend between three attributes; magic, combat and social.

You need to add a row to your HTML table (in dialogue.html) for each attribute. Here is one row, for magic, you will need one of these for each attribute (they need to go before the </table> line):

           <tr>
            <td style="text-align:right;">
              Magic
            </td>
            <td>
              <span onclick="incAtt('magic');" style="cursor: pointer;">&#x25B2;</span>
              <span onclick="decAtt('magic');" style="cursor: pointer;">&#x25BC;</span>
              <div id="magic" style="display:inline;">0</div>
            </td>
           </tr> 

The first line that start span will add an up arrow (the 25B2 is the code for that character), and when clicked, it will call a function called intAtt. The second span does that for the down arrow.

We also want to show the points remaining, so add this too (again just before the </table> line):

           <tr>
            <td style="text-align:right;">
              Points left
            </td>
            <td>
              <div id="points" style="display:inline;">10</div>
            </td>

And we need to define those intAtt and decAtt functions. This needs to go inside the <script> element. Here is the former. It grabs the number of remaining points first, and if this is greater than 0, it increases the given stat and decreases the points remaining. You can add decAtt yourself!

            function incAtt(att) {
                pts = parseInt($('#points').html());
                flag = (pts > 0);
                if (flag) {
                  n = parseInt($('#' + att).html());
                  $('#' + att).html(n + 1);
                  $('#points').html(pts - 1);
                }
            }

We also need to update setValues to get these new values too. And HandleDialogue, to do something with the values (and you will need to use the Quest function ToInt to convert them from strings to integers). The dialogue will need to be bigger too. You are on your own for HandleDialogue, but here is the complete file:

```

---