-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (84 loc) · 3.83 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>StructuredJS Demo</title>
<link rel="stylesheet" href="demo/demo.css">
<script src="external/jquery.min.js"></script>
<script src="external/underscore.min.js"></script>
<script src="external/esprima.js"></script>
<script src="external/ace-orig.js" type="text/javascript" charset="utf-8"></script>
<script src="external/ace-mode-javascript.js" type="text/javascript" charset="utf-8"></script>
<script src="external/ace-worker-javascript.js" type="text/javascript" charset="utf-8"></script>
<script src="structured.js"></script>
<script src="demo/demo.js"></script>
</head>
<body>
<div id="container">
<div class="page-label">StructuredJS</div>
<div class="summary">
<p><strong><a href="https://github.com/Khan/structuredjs">structured.js</a></strong> is a Javascript library that provides a simple interface for checking the structure of Javascript code, backed by the abstract syntax tree generated by Esprima. Structured.js works in-browser or as a standalone npm module. It is used particularly for checking beginner code to provide useful feedback as part of <a href="https://www.khanacademy.org/cs">Khan Academy's CS curriculum</a>.</p>
<p>A structure is valid Javascript code that contains blanks ( _ characters) and stand-ins ($str) that match values. The structure is sensitive to nesting and ordering. The matcher only requires that code contain the structure -- extra code has no effect.</p>
<p>Structures can contain any Javascript -- control structures (for, while, if, else, try, etc), function calls, variable declarations, parameters, numbers, strings, arrays, objects, and even operators are all fair game. Use _ characters to indicate what can be filled by anything. Use variables starting with $ to indicate what static values should be the same (i.e. $foo to indicate some number, string, or name). You can also check out the <a href="http://khan.github.io/structuredjs/pretty-display/index.html">pretty display</a> of structures.</p>
<p>Try it out!</p>
</div>
<div class="editor-labels">
<span class="structure-label">Required structure</span>
<span class="code-label">Code to check</span>
</div>
<div id="structure" class="code-editor">if (_) {
_ += _;
for (var $a = $start; $a < $check; $a += _) {
rect($a, $bigNum, 30, 30);
_();
}
}</div>
<div id="test-code" class="code-editor">if (y > 30 && x > 13) {
x += y;
for (var i = 0; i < 99; i += 1) {
rect(i, 300, 30, 30);
bar();
x = i + 2;
}
}</div>
<div class="editor-labels">
<span class="var-callbacks-label">Variable callbacks (optional)</span>
<span class="var-callbacks-show-hide"><small>show/hide</small></span>
</div>
<div id="var-callbacks" class="code-editor">// Optional extra functionality for variables.
// Uncomment this code -- select it then cmd-/ or ctrl-/
{
// "$start, $check": function(start, check) {
// if (check.value < start.value) {
// return {"failure": "Double-check your for loop!"}
// }
// return true;
// },
// "$bigNum": function(bigNum) {
// if (bigNum.value < 1000) {
// return {"failure": "Your number is not big enough! " + bigNum.value}
// }
// return true;
// }
}
</div>
<div id="result-wrapper">
<button id="run-button">Check match</button>
<div id="results">
(Match result here)
</div>
<div class="match-fail-message">
(Fail message here)
</div>
</div>
<div id="remaining">
<span class="gen-test"><small>generate qunit test</small></span>
<div class="test-wrapper">
<pre class="test-code">
QUnit test code generated here.
</pre>
</div>
</div>
</div>
<footer>Sophia Westwood, <a href="https://www.khanacademy.org/cs">Khan Academy CS</a></footer>
</body>
</html>