-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
206 lines (171 loc) · 9.02 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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<title>ALKiln Story Test Generator</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
<body>
<header>
<h2><span>ALKiln Story Test Generator<img class="icon" src="noun_dough_3639378.svg"></span></h2>
</header>
<div style="display: none;">2.3</div>
<div class="main">
<section id="intro">
<p>
Welcome to the ALKiln Story Table generator!
</p>
<p>
This tool is here to help you make a new test file for your docassemble ALKiln tests. Using the data from your interview, it will create a Story Table test you can download and put in your "Sources" folder.
</p>
<p>
If you want, you can <a href="https://suffolklitlab.org/docassemble-AssemblyLine-documentation/docs/alkiln">read more about ALKiln in its documentation</a>.
</p>
<p>
Follow the steps below to create a very simple test file. You can ignore advanced features if you want.
</p>
</section>
<section id="prep">
<span class="step_number step_1" alt="Step 1"><span class="number">1</span></span>
<p>To prepare your data:</p>
<ol>
<li>Run your docassemble interview until you get to the page where you want to end your test.</li>
<li>Copy the variables that are on that page. To do that:
<ol>
<li>Tap on the <code></></code> symbol your interview's nav bar.</li>
<li>Scroll down till you see the "Show variables and values" button.</li>
<li>Tap that button. It will open a new page.</li>
<li>Ignore how absolutely bonkers that page looks.</li>
<li>Copy all of the text that appears on that page.</li>
</ol>
</li>
<li>Come back here and paste that text into the text area in step 2.</li>
</ol>
</section>
<section id="data_container">
<span class="step_number step_2" alt="Step 2"><span class="number">2</span></span>
<p>Choose one:</p>
<div class="field_pair both">
<label for="var_data_upload" class="floating_label"><span class="upload_icon" alt="Upload icon">↑</span> <span>Upload your JSON variable file:</span></label>
<input id="var_data_upload" name="var_data_upload" type="file"/>
</div>
<div class="field_pair label">
<label class="floating_label" for="da_data">
Or paste your docassemble 'show variables and values' data into this textarea:
</label>
</div>
<div id="data_error_container" class="hidden error_container">
<p>
<img src="noun_Error_3671601.svg" class="icon small error" alt="Error icon">
<span>There is an error in your interview data:</span>
<span id="data_error_output" class="error_output"></span>
</p>
<p>
<!-- TODO: See if we can paste the textarea contents after code= -->
<span>Try using a </span><a href="https://jsonlint.com/?code=">JSON validator</a><span> on your JSON code.</span>
</p>
</div>
<div class="field_pair field">
<textarea id="da_data" placeholder="Paste data here" rows="4"></textarea>
</div>
<!-- <button class="toggler" for="options_container">▼ Edit test options</button> -->
<hr/>
<!-- Could wrap the below in a div and use top border instead of hr -->
<button id="toggle_exclude" class="toggler" for="ignore_container">▼ Edit excluded variable names (advanced)</button>
<div id="ignore_container" class="togglee collapsed">
<!-- If we find users want it, offer them this fine-grained detail -->
<!-- <div id="ignore_keys"></div> -->
<div id="ignore_anywhere_container" display="none">
<p>
Customize the list of words or characters that will cause a row in the table to be excluded. If the variable name has those words or characters <strong>anywhere in it</strong>, this generator will remove the variable.
</p>
<div class="field_pair both">
<label for="exclude_upload" class="floating_label"><span class="upload_icon" alt="Upload icon">↑</span> Upload a custom JSON list of words or characters to exclude:</label>
<input id="exclude_upload" name="exclude_upload" type="file"/>
</div>
<div class="field_pair label">
<label for="ignore_anywhere_in_var_name" class="floating_label">Or edit this list of words or characters to exclude:</label>
</div>
<button id="reset_ignore">
Reset excluded words
</button>
<div id="ignore_error_container" class="hidden error_container">
<p>
<img src="noun_Error_3671601.svg" class="icon small error" alt="Error icon">
<span>There is an error in this data:</span>
<span id="ignored_error_output" class="error_output"></span>
</p>
<p>
<!-- TODO: See if we can paste the textarea contents after code= -->
<span>Try using a </span><a href="https://jsonlint.com/?code=">JSON validator</a><span> on your JSON code.</span>
</p>
</div>
<div class="field_pair field">
<textarea id="ignore_anywhere_in_var_name" name="ignore_anywhere_in_var_name" cols="" rows=""></textarea>
</div>
</div>
<div>Automatically excluded keys:</div>
<pre id="auto_excluded_keys_only" class="uneditable_code"></pre>
</div>
</section>
<section id="custom_values_container">
<span class="step_number step_3" alt="Step 3"><span class="number">3</span></span>
<div>
<p>
Customize the unique parts of the test file and of the test.<br/>
You <strong>must</strong> fill in the final question id.
</p>
<div class="one_line_field_container">
<label for="yaml_file_name">Interview YAML file name</br>(automatically detected)</label>
<div>
<input id="yaml_file_name" type="text" name="yaml_file_name" placeholder="your_interview.yml">
<div class="example">Example: <strong>file_a_motion.yml</strong></div>
</div>
</div>
<div class="one_line_field_container">
<label for="question_id"><strong>REQUIRED:</strong></br>ID of final question</label>
<div>
<input id="question_id" type="text" name="question_id" placeholder="none">
<div class="example">Example: <strong>download</strong></div>
</div>
</div>
<div class="one_line_field_container">
<label for="new_file_name">Name of this new test file<br/>(optional)</label>
<div>
<input id="new_file_name" type="text" name="new_file_name" placeholder="is_a_user.feature">
<div class="example">Example: <strong>has_children.feature</strong></div>
</div>
</div>
<div class="one_line_field_container">
<label for="feature_description">This <strong>file</strong> is special because the user says</label>
<div>
<input id="feature_description" type="text" name="feature_description" placeholder="I am a user">
<div class="example">Example: <strong>I have children</strong></div>
</div>
</div>
<div class="one_line_field_container">
<label for="scenario_description">This <strong>test</strong> is special because the user says</label>
<div>
<input id="scenario_description" type="text" name="scenario_description" placeholder="I have a name">
<div class="example">Example: <strong>I allow visitation</strong></div>
</div>
</div>
</div>
</section>
<section id="output_container">
<span class="step_number step_4" alt="Step 4"><span class="number">4</span></span>
<p>
You can download this new test here and then upload it to your package's "Sources" folder or, instead, just copy the code and put it wherever you want.
</p>
<p>
Note: If you use <a href="https://docassemble.org/docs/fields.html#index%20variables">index variables</a> or <a href="https://docassemble.org/docs/fields.html#generic">generic objects</a>, you will need to edit the generated code. This is a more advanced task. To learn more, read the <a href="https://suffolklitlab.org/docassemble-AssemblyLine-documentation/docs/alkiln/#story-tables">Story Tables section</a> of the documentation. Specifically pay attention to the <a href="https://suffolklitlab.org/docassemble-AssemblyLine-documentation/docs/alkiln/#trigger">trigger section</a>.
</p>
<button><a id="download_test_file" download="tests.feature"><span class="download_icon">⇩</span> Download generated file</a></button>
<span>or</span>
<button id="copy_scenario">Copy the code below</button>
<pre id="scenario" class="uneditable_code"></pre>
</section>
</div>
<script type="text/javascript" src="exclude.js"></script>
<script type="text/javascript" src="generate.js"></script>
</body>
</html>