Implemented tutorial/examples + added Documentation page

src/frontend/css/editor.css

@@ -65,3 +65,28 @@ body {
     top: 8px;
     margin-left: 10px;
 }
+
+.popover {
+    z-index: 1500;
+    white-space: normal;
+    color: #333;
+}
+
+.popover-content {
+    font-size: 14px;
+}
+
+.popover-title span {
+    font-size: 18px;
+    margin-top: 6px;
+    display: inline-block;
+}
+
+.popover-title button {
+    float: right;
+    margin-right: -6px;
+}
+
+.clear {
+    clear: both;
+}

src/frontend/js/docs.js

@@ -0,0 +1,3 @@
+(function($, undefined) {
+})(jQuery);
+

src/frontend/js/examples.js

@@ -0,0 +1,213 @@
+(function($) {
+    function Example(actions) {
+        this.actions = actions;
+        this.actions.push(this.destroy_popover);
+    }
+
+    var current_example;
+
+    $.extend(Example.prototype, {
+        destroy_popover: function() {
+            this.current_elem && this.current_elem.popover('destroy');
+        },
+        show_popover: function(selector, alignment, description) {
+            this.destroy_popover();
+            this.current_elem = $(selector);
+            this.current_elem.popover({
+                trigger: 'manual',
+                placement: alignment,
+                html: true,
+                title: '<button id="next-example-step" class="btn btn-primary">next</button><div class="clear"/>',
+                content: description,
+                animation: false
+            }).popover('show');
+        },
+        play: function() {
+            this.current_action = 0;
+            current_example = this;
+            this.next();
+        },
+        next: function() {
+            if (this.current_action < this.actions.length)
+                $.proxy(this.actions[this.current_action++], this)();
+        }
+    });
+
+    $('#next-example-step').live('click', function() {
+        current_example.next();
+    });
+
+    function clear_input() {
+        $('#math-input').val('').change();
+        window.update_math && window.update_math();
+        $('#math-input').focus();
+        this.next();
+    }
+
+    function append_line(line) {
+        return function() {
+            $('#math-input')
+                .val($.trim($('#math-input').val() + '\n' + line))
+                .change();
+            window.update_math();
+            this.next();
+        };
+    }
+
+    function erase_line() {
+        var value = $.trim($('#math-input').val());
+
+        for (var i = value.length - 1; i >= 0; i--) {
+            if (value.charAt(i) == '\n') {
+                value = value.substring(0, i);
+                break;
+            }
+        }
+
+        $('#math-input').val(value).change();
+        window.update_math();
+        this.next();
+    }
+
+    function label_elem(selector, alignment, description) {
+        return function() {
+            this.show_popover(selector, alignment, description);
+        };
+    }
+
+    function label_button(btn, description) {
+        return label_elem('#btn-' + btn, 'bottom', description);
+    }
+
+    function label_input(description) {
+        return label_elem('#math-input', 'left', description);
+    }
+
+    function label_pretty_print(description) {
+        return label_elem('#pretty-print', 'right', description);
+    }
+
+    function click_button(btn) {
+        return function() {
+            console.log($('#btn-' + btn));
+            this.destroy_popover();
+            $('#btn-' + btn).click();
+            this.next();
+        };
+    }
+
+    var tutorial = [
+        clear_input,
+        label_input('You type expressions in this area.'),
+        label_pretty_print('Expressions you type in the input area appear '
+                           + 'here in pretty-printed mathematical notation. '
+                           + 'Click &ldquo;next&rdquo; to try it out!'),
+        append_line('x^2 + 4x - 7'),
+        label_pretty_print('Neat huh...'),
+        label_elem('#btn-answer', 'right', 'These controls allow you to '
+                                           + 'communicate to the system.'),
+        label_button('validate', 'Validate that the steps you have done so far '
+                                 + 'are correct.'),
+        label_button('hint', 'Ask the system for a hint on how to continue when '
+                             + 'you are stuck.'),
+        label_button('step', 'Let the system sort out the next step in your '
+                             + 'calculation'),
+        label_button('answer', 'Let the system do your entire calculation.'),
+        label_elem('#examples', 'bottom', 'Here are some examples that show you '
+                                          + 'how to use the interface properly.'),
+    ];
+
+    $('#tutorial').click(function() {
+        new Example(tutorial).play();
+    });
+
+    var examples = [[
+        clear_input,
+        label_input('This example shows how you can interactively rewrite an '
+                    + 'expression with a little help by the system. Start '
+                    + 'by entering an expression.'),
+        append_line('[sin(x) + sin(x)]\''),
+        label_input('Rewrite the expression as far as you can.'),
+        append_line('[2sin(x)]\''),
+        label_button('validate', 'Validate that your calculation is correct.'),
+        click_button('validate'),
+        label_pretty_print('All icons should be green.'),
+        label_button('hint', 'When you\'re stuck, ask for a hint.'),
+        click_button('hint'),
+        label_pretty_print('The hint appears here, try to apply it.'),
+        //label_button('step', 'If you do not understand the hint, let the '
+        //                     + 'system apply it for you.'),
+        //click_button('step'),
+        //label_pretty_print('Understand it now? You may want to erase the last '
+        //                   + 'line and try for yourself!'),
+        //erase_line,
+        //label_input('Take a step back, try to apply the hint yourself.'),
+        append_line('3[sin(x)]\''),
+        label_button('validate', 'Again, validate that your calculation is '
+                                 + 'correct.'),
+        click_button('validate'),
+        label_pretty_print('Oops! You made an error, you should fix it before '
+                           + 'continuing.'),
+        erase_line,
+        append_line('2[sin(x)]\''),
+        click_button('validate'),
+        label_input('Continue rewriting the expression.'),
+        append_line('(1 + 1)[sin(x)]\''),
+        label_input('This step is correct, but makes no sense because it does '
+                    + 'not help you any further.'),
+        label_button('validate', 'The validator will detect this too.'),
+        click_button('validate'),
+        label_pretty_print('The orange icon indicates that you have not made '
+                           + 'any progress.'),
+        label_input('Go back and try something else.'),
+        erase_line,
+        append_line('2cos(x)'),
+        label_button('validate', 'Keep validating...'),
+        click_button('validate'),
+        label_pretty_print('Yay! This seems to be the answer you were looking '
+                           + 'for.'),
+        label_button('hint', 'Assert that you are done by checking if there '
+                     + 'are any hints left.'),
+        click_button('hint'),
+    ], [
+        clear_input,
+        label_input('This example shows how you can let the system rewrite an '
+                    + 'expression step-wise. Start with an expression.'),
+        append_line('[sin(x) + sin(x)]\''),
+        label_button('step', 'Ask the system to execute a step.'),
+        click_button('step'),
+        label_pretty_print('The step will be displayed with a preceding hint.'),
+        label_button('step', 'You can keep asking for steps until the '
+                             + 'calculation is done.'),
+        click_button('step'),
+        label_button('step', 'You can keep asking for steps until the '
+                             + 'calculation is done.'),
+        click_button('step'),
+        label_button('step', 'You can keep asking for steps until the '
+                             + 'calculation is done.'),
+        click_button('step'),
+    ], [
+        clear_input,
+        label_input('This example shows how you can let the system rewrite an '
+                    + 'expression fast. Start with an expression.'),
+        append_line('[sin(x) + sin(x)]\''),
+        label_button('answer', 'Ask the system for an answer.'),
+        click_button('answer'),
+        label_pretty_print('All steps will be displayed with preceding hints.'),
+    ]];
+
+    $('#examples .dropdown-menu a').each(function(i) {
+        $(this).click(function() {
+            new Example(examples[i]).play();
+        });
+    });
+
+    if (location.search.substr(0, 3) == '?t=') {
+        var t = parseInt(decodeURIComponent(location.search.substr(3)));
+
+        if (t == 0)
+            new Example(tutorial).play();
+        else if (t > 0 && t <= examples.length)
+            new Example(examples[t - 1]).play();
+    }
+})(jQuery);

src/frontend/tpl/tutorial.html → src/frontend/tpl/docs.html

@@ -13,17 +13,18 @@
                     <a class="brand" href="">Mathematical Term Rewriting</a>
                     <ul class="nav">
                         <li><a href="index.html">Editor</a></li>
-                        <li class="active"><a href="tutorial.html">Tutorial</a></li>
+                        <li><a href="index.html?t=0">Tutorial</a></li>
                         <li class="dropdown">
                             <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                 Examples <b class="caret"></b>
                             </a>
                             <ul class="dropdown-menu">
-                                <li><a href="example1.html">Validation &amp; hints</a></li>
-                                <li><a href="example2.html">Steps</a></li>
-                                <li><a href="example3.html">Direct answer</a></li>
+                                <li><a href="index.html?t=1">Validation &amp; hints</a></li>
+                                <li><a href="index.html?t=2">Steps</a></li>
+                                <li><a href="index.html?t=3">Direct answer</a></li>
                             </ul>
                         </li>
+                        <li class="active"><a href="docs.html">Documentation</a></li>
                     </ul>
                 </div>
             </div>
@@ -34,5 +35,6 @@
 
         <script type="text/javascript" src="/static/js/jquery-1.8.2.min.js"></script>
         <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
+        <script type="text/javascript" src="/static/frontend/js/docs.js"></script>
     </body>
 </html>

src/frontend/tpl/editor.html

@@ -13,17 +13,18 @@
                     <a class="brand" href="">Mathematical Term Rewriting</a>
                     <ul class="nav">
                         <li class="active"><a href="index.html">Editor</a></li>
-                        <li><a href="tutorial.html">Tutorial</a></li>
-                        <li class="dropdown">
+                        <li><a id="tutorial" href="#">Tutorial</a></li>
+                        <li class="dropdown" id="examples">
                             <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                 Examples <b class="caret"></b>
                             </a>
                             <ul class="dropdown-menu">
-                                <li><a href="example1.html">Validation &amp; hints</a></li>
-                                <li><a href="example2.html">Steps</a></li>
-                                <li><a href="example3.html">Direct answer</a></li>
+                                <li><a href="#">Validation &amp; hints</a></li>
+                                <li><a href="#">Steps</a></li>
+                                <li><a href="#">Direct answer</a></li>
                             </ul>
                         </li>
+                        <li><a href="docs.html">Documentation</a></li>
                     </ul>
                 </div>
             </div>
@@ -71,5 +72,6 @@
         <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
         <script type="text/javascript" src="/static/external/mathjax/MathJax.js?config=AM_HTMLorMML-full"></script>
         <script type="text/javascript" src="/static/frontend/js/editor.js"></script>
+        <script type="text/javascript" src="/static/frontend/js/examples.js"></script>
     </body>
 </html>