Fixed and updated tour

www/helpcontent.html

@@ -8,30 +8,30 @@
       in the top-right corner, or press escape.</p>
     <p>For more in-depth help you can visit <a href="http://www.doodle3d.com/help" target="_blank">doodle3d.com/help</a>.</p>
   </li>
-  <li data-class="leftpanel" class="custom" data-button="OK" data-options="tipLocation:right">
+  <li data-id="leftpanel" class="custom" data-button="OK" data-options="tipLocation:right">
     <h2>Left panel</h2>
     <p>Let's first look at the left panel. It's mainly geared towards creating, saving and retrieving doodles.</p>
   </li>
-  <li data-class="btnNew" class="custom" data-text="Next" data-options="tipLocation:right">
+  <li data-id="btnNew" class="custom" data-text="Next" data-options="tipLocation:right">
     <h2>New</h2>
     <p>This button creates a new drawing. Pressing the button will clear the current screen and offers you a clean slate to doodle on.</p>
   </li>
-  <li data-class="btnSave" data-button="Next" data-options="tipLocation:right">
+  <li data-id="btnSave" data-button="Next" data-options="tipLocation:right">
     <h2>Save</h2>
     <p>Saves your doodle to the local Doodle3D Wi-Fi box.</p>
   </li>
-  <li data-class="btnsPrevNext" data-button="Next" data-options="tipLocation:right;tipAdjustmentY:-25" data-action="sayHello">
+  <li data-id="btnsPrevNext" data-button="Next" data-options="tipLocation:right;tipAdjustmentY:-25" data-action="sayHello">
     <h2>View saved doodles</h2>
     <p>Use the buttons '<' and '>' to flip through all the saved doodles on your Wi-Fi box.</p>
   </li>
-  <li data-class="btnOops" data-button="Next" data-options="tipLocation:right">
+  <li data-id="btnOops" data-button="Next" data-options="tipLocation:right">
     <h2>Oops</h2>
     <p>The oops button discards your last steps in drawing your doodle. You can actually keep pressing the button to return to the first step if you want.</p>
   </li>
-  <!--<li data-button="Next">-->
-    <!--<h2>doodle area</h2>-->
-    <!--<p>Some info on the doodle area</p>-->
-  <!--</li>-->
+  <li data-id="btnAdd" data-button="Next" data-options="tipLocation:right">
+    <h2>Add</h2>
+    <p>This button lets you add WordArt and shapes.</p>
+  </li>
   <li data-id="mycanvas" class="d3dDoodleCanvasPanel" data-button="Next" data-options="tipLocation:right;tipAdjustmentX:0">
     <h2>Doodle area</h2>
     <p>This is the drawing canvas. Unleash your inner artist!</p>
@@ -40,9 +40,9 @@
     <h2>Preview</h2>
     <p>The preview field shows a preview of how your doodle will look in real life.</p>
   </li>
-  <li data-button="Next">
+  <li data-id="buttonGroupVerticalShapes" data-button="Next" data-options="tipLocation:left">
     <h2>Manipulating your doodle</h2>
-    <p>In the bottom-right corner of the doodle area are buttons to influence your doodle's visual appearance. Find out how they work!</p>
+    <p>These are buttons to influence your doodle's visual appearance. Find out how they work!</p>
   </li>
   <li data-id="btnsUpDown" data-button="Next" data-options="tipLocation:top">
     <h2>Stretch up/down</h2>
@@ -60,15 +60,15 @@
     <!--<h2>Now for the right panel</h2>-->
     <!--<p>It works as a modal too!</p>-->
   <!--</li>-->
-  <li data-class="rightpanel" data-button="Next" data-options="tipLocation:left;tipAdjustmentY:40">
+  <li data-id="rightpanel" data-button="Next" data-options="tipLocation:left;tipAdjustmentY:40">
     <h2>Right Panel</h2>
     <p>The right panel is geared towards printing, feedback of printer status and controlling your Doodle3D settings.</p>
   </li>
-  <li data-class="btnPrint" data-button="Next" data-options="tipLocation:left;tipAdjustmentY:40">
+  <li data-id="btnPrint" data-button="Next" data-options="tipLocation:left;tipAdjustmentY:40">
     <h2>Print</h2>
     <p>Pressing the print button will print your doodle on the connected 3D printer. Make sure the design is exactly what you want it to be, the printer is connected and turned on, the startup temperature of your printer is reached and the right filament is installed.</p>
   </li>
-  <li data-class="btnStop" data-button="Next" data-options="tipLocation:left">
+  <li data-id="btnStop" data-button="Next" data-options="tipLocation:left">
     <h2>Stop</h2>
     <p>If the print is in progress and you want it to stop printing, press the Stop button on the right hand side of the screen. This will make the printer stop printing the doodle. It can take up to a few seconds for the printer to react.</p>
   </li>