forked from js-parsons/js-parsons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
184 lines (163 loc) · 6.77 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
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!doctype html>
<html>
<head>
<title>Parsonizer</title>
<!-- Don't touch these things -->
<link href="./js-parsons/parsons.css" rel="stylesheet" />
<link href="./js-parsons/lib/prettify.css" rel="stylesheet" />
<script src="./js-parsons/lib/prettify.js"></script>
<script src="./js-parsons/include.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="./guesses-history/modal.css" rel="stylesheet" />
<script src="./guesses-history/scripts.js"></script>
<script src="./guesses-history/global-vars.js"></script>
</head>
<body>
<!-- what you see -->
<div id='parsons-zone'>
<div id="sortableTrash" class="sortable-code"></div>
<div id="sortable" class="sortable-code"></div>
<div style="clear:both;"></div>
</div>
<div id="editor" style="position: relative; width: 800px; height: 400px;"></div>
<div id="control-panel"></div>
<br>
<br>
<div>
<div>
run it: <button onclick="open_in_pytut();">in python tutor</button> <button onclick="copy_it();">copy snippet</button> <br>
study it with: <button onclick="open_in('spot');">spot</button> <button onclick="open_in('shuffle');">shuffle</button>
<br>
<button id="gen-perma" onclick="gen_permalink();">generate permalink:</button>
<input id="display-perma"></input><br>
</div>
<ul>
<li>paste your code in the textarea above and click the [parsonize your code] button to create a study challenge </li>
<li>the first line needs to be all the way to the left </li>
<li>you can add un-necessary lines by typing '#distractor' after them </li>
<li>about parsons problems: <a target="_blank" href="https://computinged.wordpress.com/2017/11/17/parsons-problems-have-same-learning-gains-as-writing-or-fixing-code-in-less-time-koli-calling-2017-preview/">all of the learning, less of the time time</a>.</li>
<li>new permalinks will open to the code in the textarea. If the textarea is empty, it will open to the current parsons problem</li>
</ul>
</div>
<hr>
<h4>examples</h4>
<div>
<p><b>simple script -></b> drag them into the correct order</p>
<pre class="prettyprint">
a = 1
b = 2
c = a + b
</pre>
</div>
<div>
<p><b>careful! -></b> the parsonizer won't work if your first line is indented</p>
<pre class="prettyprint">
a = 1
b = 2
c = a + b
</pre>
</div>
<div>
<p><b>a basic if/else -></b> drop the indented lines at the correct depth</p>
<pre class="prettyprint">
if False:
print('never')
else:
print('always')
</pre>
</div>
<div>
<p><b>nested if's -></b> drop the doubly indented line twice as far in</p>
<pre class="prettyprint">
if False:
print('never')
else:
if True:
print('always')
</pre>
</div>
<div>
<p><b>for loop with return -></b> up the challenge by adding extra lines </p>
<pre class="prettyprint">
for i range(10):
i++
return i #distractor
</pre>
</div>
<div>
<p><b>programming challenges -></b> practice the logic without the errors</p>
<pre class="prettyprint">
# https://dbader.org/blog/python-reverse-string #distractor
def reverse_string(s):
chars = list(s)
for i in range(len(s) // 2):
tmp = chars[i]
chars[i] = chars[len(s) - i - 1]
chars[len(s) - i - 1] = tmp
return ''.join(chars)
</pre>
</div>
<br/>
<hr>
<p> <a href="https://github.com/blocks-to-text/parsonizer" target="_blank">parsonizer source code</a>, powered by <a href="https://github.com/js-parsons/js-parsons" target="_blank"> js-parsons </a>
<br>
<hr>
<hr>
<a href="http://github.com/blocks-to-text/top" target="_blank"><img src="https://user-images.githubusercontent.com/18554853/50098409-22575780-021c-11e9-99e1-962787adaded.png" width="40" height="40"></img> Blocks to Text</a>
<!-- begin guess history modal -->
<div id="guesses-history" style="display:none; overflow-y: hidden;">
<div style="padding-right: 5%; padding-left: 5%; padding-bottom: 5%; overflow-y: hidden;">
<div>
<pre id="the-answer" class="prettyprint">
// no challenge loaded
</pre>
</div>
<div >
<div id="the-guesses" style="height: 75vh; width: 100vh; overflow-y: auto">
no guesses yet
</div>
</div>
</div>
</div>
<div class="modal" style="overflow-y: hidden;">
<div class="modal-inner" style="height: 100%; width: 100%; overflow-y: hidden;">
<a data-modal-close>X</a>
<div class="modal-content" style="overflow-y: hidden;"></div>
</div>
</div>
<script src="./guesses-history/modal.js"></script>
<script>var modal = new VanillaModal.default();</script>
<!-- end guess history modal -->
<!-- why it works -->
<script src="./js-parsons/lib/jquery.min.js"></script>
<script src="./js-parsons/lib/jquery-ui.min.js"></script>
<script src="./js-parsons/lib/jquery.ui.touch-punch.min.js"></script>
<script src="./js-parsons/lib/underscore-min.js"></script>
<script src="./js-parsons/lib/lis.js"></script>
<script src="./js-parsons/parsons.js"></script>
<script src="./parsonizer/init.js"></script>
<script src="./parsonizer/change-mode.js"></script>
<script src="./parsonizer/parsons-mode.js"></script>
<script src="./linking/ctr-c.js"></script>
<script src="./linking/open-in-pytut.js"></script>
<script src="./linking/permalinking.js"></script>
<script src="./ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme('ace/theme/chrome');
editor.setFontSize(15);
editor.getSession().setMode('ace/mode/python');
editor.getSession().setTabSize(2);
var query = read_snippet_query();
if (query) {
editor.setValue(query);
parsons_mode();
} else {
snippet = 'def table():\n return "table"\n\nprint ( table() )';
editor.setValue(snippet);
change_mode();
};
</script>
</body>
</html>