TDD-JavaScript-Demo/index.html at master · Platika/TDD-JavaScript-Demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
  <head>
    <title>Learning to Program Using JavaScript and Test Driven Learning</title>
    <script type="text/javascript" charset="utf-8">
      var i, task;
      var tasks = ["00HelloWorld", "01DieRoll", "02GuessingGame",
                   "03LoopedGuessingGame", "04ParameterizedGuessingGame", "05UserSpecifiedMinMaxGame"
                  ];
    </script>
    <style type="text/css" media="screen">


      h1 {
        padding-top: 5px;
        padding-bottom: 5px;
        font-family: Arial;
        font-variant: small-caps;
      }

      table {
        border-collapse: collapse;
        border: 0px;
        font-family: Sans-serif;
      }

      #content {
        text-align: center;
        margin-top: 20px;
        margin-left: 15%;
        margin-right: 15%;
        width: auto;
        background-color: #ffffff;
      }

     #tasklist {
      margin-left: auto;
      margin-right: auto;
     }

      #notice {
        margin-top: 50px;
        font-family: Sans-serif;
        font-size: 12px;
        text-align: center;
      }

      pre {
        color: red;
      }

      th {
        background-color: #444444;
        border: 1px solid black;
        color: #ffffff;
        text-align: left;
      }


       a:link {
        color:#334488;
        text-decoration:none;
       }

       a:visited {
        color:#884433;
        text-decoration:none;
         }

       a:hover {
        color:#338844;
        text-decoration:none;
       }

       a:active {
        color:#bbbbbb;
        text-decoration:none;
       }

      td {
        text-align: center;
        text-decoration:none;
      }

      #columnone {
        text-align: left;
        background-color: #eaeaea;
      }

    </style>
  </head>
  <body>

    <div id="content">
      <h1>Test-Driven Learning (TDL)<br />Introduction to JavaScript</h1>
      <table id="tasklist" border="3" cellspacing="5" cellpadding="15">
        <tr><th>Task</th><th>Description</th><th>Tests</th><th>Application</th></tr>
        <tr><td id='columnone'>TDD JavaScript Overview</td><td><a target='_blank' href='README.txt'>README</a></td><td colspan='2'>Find out about how this resource is organized and how you're expected to use it.</td></tr>

        <script type="text/javascript" charset="utf-8">

          for (i = 0; i < tasks.length; i = i + 1) {

            task = "<tr>" +
                   "<td id='columnone'>" + tasks[i].replace(/[A-Z]/g, " $&") + "</td>" +
                   "<td><a target='_blank' href='" + tasks[i] + "/README.txt'>README</a></td>" +
                   "<td><a target='_blank' href='" + tasks[i] + "/tests/runTests.html'>Run Test</a></td>" +
                   "<td><a target='_blank' href='" + tasks[i] + "/src/runApp.html'>Run App</a></td>" +
                   "</tr>";

            document.getElementById('tasklist').innerHTML += task;
          }

        </script>
      </table>
      <div id="notice">
        <p><em><b>Privacy Notice:</b></em> These tasks contain a "phone home" feature that, if you are online while running the tests, sends information to a remote server including the value of the authorsName variable and which tests have failed or passed. The purpose of this information is to see the progress that learners make while working through the tasks and to spot difficulties that many learners encounter that might indicate that a task should be revised.</p>
        <p>You can disable the phone home feature by including the following line at the top of your app.js files:</p>
        <pre>
          var phoneHome = false;
        </pre>
      </div>
    </div>

  </body>
</html>