<html>
  <head>
    <title>LangEvolve</title>

    <!-- Bootstrap and JQuery files -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script>
    // Trigger the evolve function when link is clicked
    $(function() {
      $("#evolvetrigger").click(function(e) {evolve()});      
    });
    
    // Request the evolved language from Flask and display it
    function evolve() {
      $.post('/evolve', {}).done(function(evolved) {
                              $(words).text(evolved['words'])
                         }).fail(function() {
                              $(words).text("Error occurred")});
                         };
    </script>
  </head>
  <body>
    <h1>Hello!</h1>
    <p><span id="words">something</p>
    <div><a id="evolvetrigger" href="#">evolve</a></div>
  </body>
</html>

<html>
  <head>
    <title>LangEvolve</title>

    <!-- Bootstrap and JQuery files -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script>
    // Trigger the evolve function when link is clicked
    $(function() {
      $("#evolvetrigger").click(function(e) {evolve()});      
    });
    
    // Request the evolved language from Flask and display it
    function evolve() {
      $.post('/evolve', {}).done(function(evolved) {
        document.getElementById('rules').appendChild(join_array(evolved['rules']));
        document.getElementById('words').appendChild(join_array(evolved['words']));
                         }).fail(function() {
                              $(words).text("Error occurred")});
                         };
    // Joins an array of text into a list element 
    function join_array(a) {
      var list = document.createElement('ul');
      for (var i = 0; i < a.length; i++) {
        var item = document.createElement('li');
        item.appendChild(document.createTextNode(a[i]));
        list.appendChild(item);
      }
      return list
    }
    </script>
  </head>
  <body>
    <h1>Hello!</h1>
    <p><span id="rules"></p>
    <p><span id="words"></p>
    <div><a id="evolvetrigger" href="#">evolve</a></div>
  </body>
</html>

Add list outputting of rules and words
Add list outputting of rules and words
