Change programmatic example content

Author: afshinm

example/programmatic/index.html

@@ -33,42 +33,40 @@ <h3 class="muted">Intro.js</h3>
       <hr>
 
       <div class="jumbotron">
-        <h1 id="step1">Intro<span style="font-weight: normal;">.js</span></h1>
-        <p id="step4" class="lead">Better introductions for websites and features with a step-by-step guide for your projects.</p>
+        <h1 id="step1">Programmatic</h1>
+        <p id="step4" class="lead">In this example we are going to define steps with JSON configuration.</p>
         <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
       </div>
 
       <hr>
 
       <div class="row-fluid marketing">
         <div id="step2" class="span6">
-          <h4>Easy to Use</h4>
-          <p>Just include the js and css files and add <code>data-step</code> and <code>data-intro</code> to your code.</p>
+          <h4>Section One</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
 
-          <h4>Fast &amp; Small</h4>
-          <p><strong>7 KB</strong> JavaScript and <strong>3 KB</strong> CSS. That's all.</p>
+          <h4>Section Two</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
 
-          <h4>Free &amp; Open-Source</h4>
-          <p>Free and open-source (including commercial use). Published under MIT license.</p>
+          <h4>Section Three</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
         </div>
 
         <div id="step3" class="span6">
-          <h4>Keyboard + Mouse navigation</h4>
-          <p>Ability to navigate with the mouse, or the keyboard - <code>←</code>, <code>→</code>, <code>ENTER</code> and <code>ESC</code> to exit.</p>
+          <h4>Section Four</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
 
-          <h4>Browser Compatibllity</h4>
-          <p>Better compatibility is on the roadmap, but currently it should work in recent versions of Firefox, Chrome and IE8 also.</p>
-          <h4>Developed with &lt;3</h4>
-          <p>With &lt;3 in <a href='http://usabli.ca/' target="_blank" title="usabli.ca group">usabli.ca</a>, Tehran.</p>
+
+          <h4>Section Five</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+
+          <h4>Section Six</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
         </div>
       </div>
 
       <hr>
 
-      <div class="footer">
-        <p>&copy; <a href='http://usabli.ca/' target="_blank" title="usabli.ca group">usabli.ca</a> 2013 - A weekend project by <a href="http://afshinm.name/" target="_blank">Afshin Mehrabani</a></p>
-      </div>
-
     </div>
     <script type="text/javascript" src="../../intro.js"></script>
     <script type="text/javascript">
@@ -77,26 +75,26 @@ <h4>Developed with &lt;3</h4>
           intro.setOptions({
             steps: [
               {
-                element: document.getElementById('step1'),
-                intro: "Hello all! :) This project's called Intro.js."
+                element: '#step1',
+                intro: "This is a tooltip."
               },
               {
-                element: document.getElementById('step2'),
+                element: '#step2',
                 intro: "Ok, wasn't that fun?",
                 position: 'right'
               },
               {
-                element: document.getElementById('step3'),
+                element: '#step3',
                 intro: 'More features, more fun.',
                 position: 'left'
               },
               {
-                element: document.getElementById('step4'),
-                intro: "Let's try it. It's free and open-source.",
+                element: '#step4',
+                intro: "Another step.",
                 position: 'bottom'
               },
               {
-                element: document.getElementById('step5'),
+                element: '#step5',
                 intro: 'Get it, use it.'
               }
             ]