-
Notifications
You must be signed in to change notification settings - Fork 2
/
interface1.html
2433 lines (2228 loc) · 130 KB
/
interface1.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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<html>
<head>
<title>SPOT Interface</title>
<script src="build/spot.js"></script>
<script src="build/built_in_trees.js"></script>
<script src="lib/test/mocha.min.js"></script>
<script src="lib/test/chai.min.js"></script>
<link rel="stylesheet" type="text/css" href="spot.css">
<link rel="stylesheet" type="text/css" href="lib/test/mocha.css">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<style>
body {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #6d86a3;
/*border-top: 8px solid white;*/
/*border-bottom: 1px solid gray;*/
position: fixed;
top: 0;
padding: 5px 80px 1px 80px;
z-index: 1;
width: 100%;
color: #ffffff;
}
.header img {
float: left;
width: 44px;
height: 44px;
margin-right: 20px;
}
.header .subtitle {
/*color: #3A5370;*/
position: relative;
top: 12px;
}
.below-header {
padding: 0px 130px;
position: absolute;
top: 50px;
}
.blue-text {
color: #07203D;
}
body{
background-color: #d0d8e0;
}
div.spotBlock{
background-color:white;
padding: 2em;
padding-top: 1em;
margin: 2em;
}
div.spotBlock.input {
min-width: 32em;
width: fit-content;
}
fieldset:not(.open) > :not(legend) {
display: none;
}
fieldset:not(.open) > :not(legend) > :not(legend){
display: none;
}
fieldset legend {
cursor: pointer;
padding-left: 10px;
padding-right: 10px;
border-radius: 3px;
}
fieldset legend:hover {
background-color: #eee;
}
.arrow {
border: solid;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
fieldset:not(.open) legend .arrow {
transform: rotate(45deg);
}
fieldset.open legend .arrow {
transform: rotate(-135deg);
}
.more-constraints{
display: none;
}
table.spaceytable td {
padding:5px
}
#treeTableContainer div > * {
vertical-align: middle;
}
#treeTableContainer {
width: fit-content;
height: 250px;
overflow: scroll;
resize: both;
border: 1px solid #a9a9a9;
}
#autoTreeBox, #genStringsBox {
width: fit-content;
height: 250px;
overflow: scroll;
resize: both;
border: 1px solid #a9a9a9;
}
.inline-block {
display:inline-block
}
.inputContainer {
width: 100%;
padding-right: 5%;
padding-left: 5%;
}
.inputContainer input {
width: 90%;
text-align: center;
}
.catInput {
font-weight: bold;
font-size: 12px;
background-color: #ccc;
}
.idInput {
font-size: 15px;
}
.stemSide {
height: 55px;
}
.stemContainer > div.stemSide {
height: 12px;
}
.treeNode {
display: inline-block;
}
.treeNode:hover {
background-color: #eee;
cursor: pointer;
}
.treeNode.selected {
background-color: #cdf;
}
.treeUI-tree {
margin-top: 15px;
display: inline-block;
}
button {
color: #ffffff;
background-color: #6d86a3;
border-color: #546D8A;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
padding: 4px 8px;
margin: 5px;
}
button:hover {
background-color: #546D8A;
border-color: #3A5370;
}
button.orange-button {
background-color: #f0ad4e;
border-color: #eea236;
}
button.orange-button:hover {
background-color: #ec971f;
border-color: #d58512;
}
button.submit-button {
font-size: 16px;
padding: 8px 20px;
}
button.tab-button {
background-color: #d0d8e0;
color: #07203D;
font-size: 16px;
border-radius: 8px 8px 0px 0px;
padding: 8px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
border-bottom-style: none;
}
button.tab-button:hover {
background-color: white;
}
fieldset {
margin-top: 10px;
border-width: 1px;
}
fieldset h2 {
margin: 0px;
}
h2 {
font-size: 20px;
color: #07203D;
}
h3 {
color: #07203D;
margin-top: 5px;
}
fieldset h3, fieldset p {
margin: 5px;
color: #07203D;
font-weight: normal;
}
fieldset h4 {
margin: 0px;
}
h4 {
color: #07203D;
}
.constraint-selection-table {
padding-left: 20px;
margin-left: 30px;
width:70%;
/*table-layout: fixed;*/
margin-bottom: 8px;
}
.constraint-row{
margin-top: 1em;
padding-bottom: 8px;
}
.constraint-checked .constraint-row:after{
display:block;
content: '';
border-bottom:2px solid #546D8A;
/* width: 90%; */
}
div:not(.constraint-checked) .constraint-row .constraint-row:after{
display:none;
}
.constraint-row span:not(.content){
text-align:left;
display:inline-block;
/*font-variant: small-caps;
font-family: "Palatino Linotype", Garamond, serif;
letter-spacing: 0.07em;*/
width: 90%;
}
.category-row{
margin-left: 2em;
display:block;
padding-bottom: 0.25em;
}
.constraint-selection-table:not(.constraint-checked) .category-row{
display:none;
}
.category-selection-div{
display: inline-block;
width: 5em;
}
.category-selection-div .all-cats{
width: 20em;
}
.option-selection-div{
display: inline-block;
width: 10em;
}
.custom-option-div {
margin-left: 1em;
}
.info .content.custom-option-div {
margin-left: 1.5em;
}
.custom-text {
margin-top: 5px;
margin-bottom: 5px;
}
.custom-text p {
display: inline;
margin-left: 0px;
margin-right: 0px;
}
.stree-textarea {
font-size: 11px;
width: 100%;
}
.info {
margin-left: 5px;
font-size: 13px;
display:inline;
}
.info:before {
display: inline-block;
content: "i";
font-family: "Segoe UI";
font-weight: bold;
border: 1px solid;
border-radius: 1em;
padding-right: 0.4em;
padding-left: 0.4em;
cursor: pointer;
color: #07C;
text-align: right;
}
.info .content {
display: none;
margin-left: 5px;
color: #555;
font-weight: normal;
text-align: left;
}
.info.showing .content {
display: block;
}
.treeUI-tree {
/*display: inline-block;*/
margin-right: 25px;
margin-bottom: 15px;
}
/* The switch - the box around the slider
Copy-Pasted from https://www.w3schools.com/howto/howto_css_switch.asp*/
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 24px;
margin-right: 10px;
vertical-align: middle;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 15px;
width: 15px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #6d86a3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
#doneMessage {
display: none;
color: #555;
font-size: 13px;
margin-left: 10px;
}
#autoDoneMessage {
display: none;
color: #555;
font-size: 14px;
margin-top: 10px;
}
#add-clitics-row{
display: none;
}
/* built in analysis dropdown */
.dropdown {
border: 0.1rem solid #6d86a3;
font-size: 14px;
height: 1.75rem;
}
.not-results{
max-width: 40em;
}
#results-container{
background-color: white;
padding:2em; margin:2em;
}
#results-container:not(.show-tableau){
display: none;
}
.show-more {
color: #555;
margin: 5px;
}
.auto-table {
border-collapse: collapse;
margin: 10px 10px 10px 10px;
}
.auto-table td {
border: 1px solid black;
text-align: left;
padding: 4px;
}
.alert {
padding: 20px;
background-color: #f44336;
color: white;
opacity: 1;
transition: opacity 0.6s;
margin-bottom: 15px;
position: fixed;
width: 37.5em;
z-index: 1;
}
.alert.warning {
background-color: #ff9800;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
.hide {
display: none;
}
.show {
display: block;
}
.msg {
display: inline;
}
#listOfTerminals p {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
color: black;
}
.genStringsNum {
margin-left: 15px !important;
}
.genStringsNumBox {
width: 25px;
text-align: center;
}
#inputOptions button {
margin-left: 0px;
}
</style>
</head>
<body>
<div style="padding-bottom:40px">
<div class="header">
<img src="images/logo.png" alt="SPOT">
<span class="subtitle"><span style="display: inline-block; width:50%; font-size:larger;">Syntax-Prosody in Optimality Theory </span><span style="display:inline-block; text-align:right;"><a href="https://spot.sites.ucsc.edu/">spot.sites.ucsc.edu/</a></span></span>
</div>
<div class="below-header" style="background-color: #d0d8e0;">
<div class="alert" style="display: none" id="error">
<span class="closebtn">×</span>
<strong>Error!</strong>
<div class="msg"></div>
</div>
<div class="alert warning" style="display: none" id="warning">
<span class="closebtn">×</span>
<strong>Warning!</strong>
<div class="msg"></div>
</div>
<br/>
<div style="margin-top: 10px"> Generate and evaluate prosodic and syntactic trees. View and download violation tableaux.
<span class="info"><span class="content">
<ul>
<li>Click on the downward carets to see constraints and add constraints to your constraint set using the associated checkboxes.</li>
<li>By default, XP and φ are selected as the cateogories to assess violations over. Use the checkboxes below each constraint to change the desired category.</li>
<li>SPOT is a JavaScript application. Make sure you have JavaScript enabled. We have tested SPOT in Firefox and Chrome, but not in Edge or Internet Explorer.</li>
</ul>
</span></span>
</div>
<div class="not-results">
<div class="spotBlock">
<h3>Built-in systems
<span class="info"><span class="content" style="font-weight: normal;">To try an analysis from the syntax-prosody literature, select a built-in analysis from the menu, then scroll to the bottom and hit "Get results"</span></span></h3>
<select class="dropdown" name="analysis" id="built-in-dropdown" onchange=built_in(this.value)>
<option value="select">Select</option>
<option value="irish">Irish Phrasing (Elfner 2012)</option>
<option value="kinyambo">Kinyambo (Bellik & Kalivoda 2016)</option>
<option value="ito&mester2017">Japanese (Ito & Mester 2017/2020)</option>
<optgroup label="ICPP2019 systems">
<option value="japanese_rebracketing_1">Japanese ✗: Match only (Bellik, Ito, Kalivoda, & Mester to appear)</option>
<option value="japanese_rebracketing_2">Japanese ✗: Align only (Bellik, Ito, Kalivoda, & Mester to appear)</option>
<option value="japanese_rebracketing_3">Japanese ✔: Match SP, Align SP (Bellik, Ito, Kalivoda, & Mester to appear)</option>
<option value="japanese_rebracketing_4">Japanese ✔: Match PS, Align SP (Bellik, Ito, Kalivoda, & Mester to appear)</option>
<option value="japanese_rebracketing_5">Japanese ✔: Match SP, Align PS (Bellik, Ito, Kalivoda, & Mester to appear)</option>
<option value="japanese_rebracketing_6">Japanese ✔: Match PS, Align PS (Bellik, Ito, Kalivoda, & Mester to appear)</option>
<option value="japanese_BK_2019">Japanese/Basque accents (Bellik & Kalivoda 2019b)</option>
<option value="italian">Italian (Van Handel 2019)</option>
<option value="chamorro">Chamorro, Match (Bibbs 2019)</option>
</optgroup>
<option value="chamorro2021">Chamorro, Align (Bibbs 2021 @ the LSA)</option>
</select>
</div>
<form id="spotForm">
<!--INPUT-->
<div class="spotBlock input">
<h2>GEN: Input parameters
<span class="info">
<span class="content">
To generate input syntactic trees using SPOT's algorithm, use the 'Automatic' tab. To build input syntactic trees yourself, use the 'Manual' tab.
</span>
</span>
</h2>
<p style="margin-bottom: 0"><button id="inputButton" type="button" class="tab-button">Automatic</button><button id="goButton" type="button" class="tab-button" style="background-color: white; border-color: #3A5370">Manual</button></p>
<hr style="margin-block-start: 0; margin-block-start: 0; color: #3A5370; border-style: solid">
<div id="treeUI" style="display: block">
<p>String of terminals: <input type="text" name="inputToGen"><button id="buildButton" type="button">Build syntax</button></p>
<div class="constraint-row">
<span><input type="checkbox" name="genOptions" id="trimTrees">Trim syntactic tree</span>
<div class="info">
<span class="content">When checked, evaluates mapping constraints against a version of the input tree where silent terminals are removed. This reflects the definition of Match-Phrase<sub>T</sub> in Elfner 2012 (p.28). This version of Match ignores terminal nodes that are unrepresented phonologically:<p>"Suppose there is a syntactic phrase (XP) in the syntactic representation that exhaustively dominates a set of one or more terminal nodes α. Assign one violation mark if there is no phonological phrase (φ) in the phonological representation that exhaustively dominates all and only the phonological exponents of the terminal nodes in α."</p>Also removed are terminals of a category other than "x0" or "clitic" and cases of vacuous recursion, eg. [[a b]] → [a b]. </span>
</div>
</div>
<div id="treeUIinner" style="display: none">
<hr/>
<div>
<button class="nodeEditingButton" id="treeUImakeParent" type="button" disabled>Add Mother</button>
<button class="nodeEditingButton" id="treeUIdeleteNodes" type="button" disabled style="margin-right: 50px">Delete</button>
<button class="nodeEditingButton" id="treeUIclearSelection" type="button" disabled>Clear Selection</button>
<span id="treeBuilderInfo" class="info"><span class="content"><p>To add a node, select one or more adjacent sisters and click "Add Mother." To remove nodes, select them and click "Delete." </p>
<p>All labels are editable. The small labels with grey backgrounds represent node categories, and must be "cp", "xp", or "x0" for a node to be visible to the syntax-prosody mapping constraints. Use "clitic" as the category for a node that should be mapped to a syllable instead of an ω. The larger labels with white backgrounds represent node ids, and can be any unique alphanumeric string.</p>
<p>To label a terminal as a clitic do one of these (not both): (i) within the string of terminals append "-clitic" to the desired terminal within the string; (ii) after building the syntax of a string of terminals, change the category label to "clitic" of one of the terminals in the syntactic tree.</p>
<p> Mark nodes as functional by adding ",func" to the category label in the tree builder. Mark nodes as having silent heads by adding ",silentHead" to the category label in the tree builder. Mark nodes as being focused by adding ",foc" to their category label in the tree builder.</p>
<p>To create a new tree, click "Build syntax" again.</p>
</span></span>
</div>
<div id="treeTableContainer"></div>
<p></p>
<button id="htmlToJsonTreeButton" type="button">Done!<br><small></small>Add trees to analysis</small></button>
</button>
<div id="doneMessage">The trees in the analysis are up-to-date</div>
<div style="margin-top: 15px">
<label class="switch">
<input type="checkbox" id="tree-code-box" value="show-tree-code">
<span class="slider round"></span>
</label>
<p id="sliderText" style="font-size: 15; vertical-align: middle; display: inline">Show code</p>
</div>
</div>
<div style="display:none">
<button id="danishJsonTreesButton" type="button">Danish Trees: generate s-tree code</button>
</div>
<div id="tree-code-area" style="display:none">
<hr/>
<p>To enter trees manually... <span class="info"><span class="content">To use a tree you previously made and saved, select a tree or trees from your JavaScript tree file (some pre-made trees are in the directory <i>main/trees</i>, and end with .js). Paste in the contents of JS file of your input syntactic tree(s) (from the opening brace to the closing brace, removing any comments and excluding the final semi-colon). Separate trees with a comma and surround the whole thing with square brackets ("[]") to make it an array. Note that if you're only using Markedness constraints, you can just keep the default value of an empty tree (like so: {}) as the syntactic input.</span></span></p>
<textarea id="stree-textarea" class="stree-textarea" name="sTree" rows="15">{}</textarea>
</div>
</div>
<!-- automatically generate syntax -->
<div id="inputOptions" style="display: none">
<fieldset id="syntax-parameters" class="open">
<legend><h2>Syntax parameters <span class="arrow"></h2></legend>
<div class="constraint-row"><span>Root syntactic tree in</span>
<div class="info">
<span class="content">Choose what syntactic category the roots of generated trees will be.</span>
</div>
</div>
<div class="category-row">
<div class="category-selection-div"><input type="radio" name="autoInputOptions-rootCategory" value="cp">CP</div>
<div class="category-selection-div"><input type="radio" name="autoInputOptions-rootCategory" value="xp" checked="checked">XP</div>
<div class="category-selection-div"><input type="radio" name="autoInputOptions-rootCategory" value="x0">X<sup>0</sup></div>
</div>
<div class="constraint-row"><span>Intermediate nodes are</span>
<div class="info"><span class="content">Choose what syntactic category the nodes between the roots and the terminals will be for the generated trees.</span></div>
</div>
<div class="category-row">
<div class="category-selection-div"><input type="radio" name="autoInputOptions-recursiveCategory" value="cp">CP</div>
<div class="category-selection-div"><input type="radio" name="autoInputOptions-recursiveCategory" value="xp" checked="checked">XP</div>
<div class="category-selection-div"><input type="radio" name="autoInputOptions-recursiveCategory" value="x0">X<sup>0</sup></div>
</div>
<div class="constraint-row"><span>Terminals in input trees are</span>
<div class="info"><span class="content">Choose what category the terminal nodes of the generated input trees will be.</span></div>
</div>
<div class="category-row">
<div class="category-selection-div"><input type="radio" name="autoInputOptions-terminalCategory" value="cp">CP</div>
<div class="category-selection-div"><input type="radio" name="autoInputOptions-terminalCategory" value="xp">XP</div>
<div class="category-selection-div"><input type="radio" name="autoInputOptions-terminalCategory" value="x0" checked="checked">X<sup>0</sup></div>
<div class="category-selection-div"><input type="radio" name="autoInputOptions-terminalCategory" value="ft">ft</div>
<div class="category-selection-div"><input type="radio" name="autoInputOptions-terminalCategory" value="syll">σ</div>
</div>
<div class="constraint-row">
<span><input type="checkbox" name="autoInputOptions" value="noAdjuncts" checked="checked">Include adjunction</span>
<div class="info"><span class="content">If selected, nodes are allowed to have only XP children. If not selected, every node must contain a child of category x0.</span></div>
</div>
<div class="constraint-row">
<span>Head requirements:
<select name="head-req" id="head-req">
<option value="select">Heads can be anywhere</option>
<option value="left-strict">Heads must be at the left edge of an XP</option>
<option value="right-strict">Heads must be at the right edge of an XP</option>
<option value="left" disabled>Heads cannot be on the right edge of an XP</option>
<option value="right" disabled>Heads cannot be on the left edge of an XP</option>
</select>
</span>
<div class="info">
<span class="content">
By default, trees are maximally binary-branching, and there is no distinction between “Heads must be at the left edge of an XP” and “Heads cannot be on the right edge of the XP.” This distinction is only relevant when ternary-branching structures are considered, which occurs when intermediate projections are not treated as phrasal (see: Visibility to Phonology). To require all X<sup>0</sup>s to be at the very left edge of their XP (specifiers and complements are both on the right), select "Heads must be at the left edge of an XP." This will admit [a [b]] and [[a][b]] but not [[a]b[c]] or [[a]b]. To admit [[a]b[c]] while still excluding [[a]b], select "Heads cannot be on the right edge of an XP." To require all X<sup>0</sup>s be at the very right edge of their XP, select "Heads must be at the right edge of an XP." This will admit [[a]b] and [[a][b]], but not [[a]b[c]] or [a[b]]. To admit [[a]b[c]] while still excluding [a[b]], select "Heads cannot be on the left edge of an XP."
</span>
</div>
</div>
</fieldset>
<fieldset id="syntax-parameters-clitics">
<legend><h2>Clitics <span class="arrow"></h2></legend>
<div class="constraint-row">
<span><input type="checkbox" name="autoInputOptions-addClitics" value="right" id="add-clitics">Add a clitic to every tree.</span>
<div class="info"><span class="content">For every terminal string provided, add a terminal labeled as a clitic directly under the root. The exact representation of the clitic and its position will be determined by settings chosen under "Visibility to phonology":
<ul>
<li>By default, unary XPs are visible to phonology as phrases, and clitics are wrapped in an XP layer. SPOT will generate structures like [[clitic][TP]] or [[clitic] T VP]. If "Treat unary XPs as X0s" is checked, then clitics will be represented as X0s only. SPOT will generate structures like [clitic [TP]] or [clitic T VP].</li>
<li>By default, bar levels are treated as phrasal, and SPOT will generate structures like [[clitic] [TP]], on the assumption that clitics are located in the specifier of TP and T' has category 'xp' for purposes of the mapping constraints. Such structures are also compatible with an interpretation where clitics are adjoined to the root phrase. If "Treat bar levels as phrasal" is unchecked, SPOT will generate structures like [[clitic] T VP] or [[clitic] VP], under the assumption that bar levels are invisible to the mapping constraints, and clitics are in the specifier of T.</li>
</ul>
</span></div>
</div>
<div class="category-row" id="add-clitics-row">
<div class="custom-text">Clitics appear on</div>
<div class="category-selection-div">
<input type="radio" name="autoInputOptions-addClitics" value="left" id="add-clitics-left">left
</div>
<div class="category-selection-div">
<input type="radio" name="autoInputOptions-addClitics" value="right" checked="checked">right
</div>
</div>
<div class="constraint-row">
<span><input type="checkbox" name="autoInputOptions" value="allowClitic">Label some terminals as clitics</span>
<div class="info"><span class="content custom-option-div">If checked, then for every clitic-free input tree with <i>n</i> terminals, there are <i>n</i> additional input trees of the same shape, in which one terminal is a clitic (i.e., an sTree node with "cat":"clitic", which will be mapped to a pTree node with "cat":"syll"). That is, for every input tree S with terminal string of non-clitics 1, 2, ..., <i>n</i>, and for every <i>k</i>, 1 ≤ <i>k</i> ≤ <i>n</i>, there exists an input tree S′ in which terminal <i>k</i> is a clitic and S′ is otherwise identical to S.</span></div>
</div>
</fieldset>
<fieldset id="syntax-parameters-phonology">
<legend><h2>Visibility to phonology <span class="arrow"></h2></legend>
<div class="constraint-row">
<span><input type="checkbox" name="autoInputOptions" value="noUnary">Treat non-branching XPs as X<sup>0</sup>s</span>
<div class="info"><span class="content">If selected, all intermediate nodes must have at least two children. Non-branching XPs will be invisible to Match-XP. Clitics (if any) will also be represented as bare X<sup>0</sup>s.</span></div>
</div>
<div class="constraint-row">
<span><input type="checkbox" name="autoInputOptions" value="noBarLevels" checked="checked">Treat intermediate projections (bar levels) as phrasal</span>
<div class="info"><span class="content">By default, SPOT treats bar level projections the same as phrase level projections, and labels them all as XP (or CP). This makes them visible to Match and Align constraints. On this setting, all syntactic trees are binary branching. To treat bar level projections as invisible to mapping constraints, uncheck this box, which will allow GEN to also create ternary branching syntactic trees, in which X′ (or C′) are not represented at all. An example of a tree in which the X′ level is not represented at all: [[spec] head [comp]]. Under default settings, this tree would instead be represented as: [[spec][head [comp]]].</span></div>
</div>
<div class="constraint-row">
<span><input type="checkbox" name="autoInputOptions" value="noMirrorImages">Remove mirror images</span>
<div class="info"><span class="content">If selected, no mirror image pairs will be generated. E.g. [a [b [c]]] and [[[a] b] c] are tree-structural mirror images of each other (disregarding terminal ids); if this option is selected, [[[a] b] c] will be removed.</span></div>
</div>
</fieldset>
<h3 style="margin-top: 15px; margin-bottom: -5px">Specify terminals
<span class="info">
<span class="content">
In the 'String of terminals' textboxes, type the words that you want to be included in the output prosodic trees, separating them with spaces. Under 'Generate combinations and permutations', in the 'List of terminals' textboxes, type the terminals you want to use to generate permutations and combinations that will serve as your input strings. Separate each list with spaces and specify the minimum and maximum number of terminals in the generated strings.
</span>
</span>
</h3>
<div id="terminalStrings">
<p id="str1">String of terminals 1: <input type="text" name="inputToGenAuto"></p>
</div>
<button id="addString" type="button" style="margin-top: -5px">Add terminal string</button>
<!--Automatic terminal string generation-->
<fieldset id="stringGeneration" class="">
<legend><h4>Generate combinations and permutations <span class="arrow"></h4></legend>
<div id="listOfTerminals" style="margin-top: 10px">
<div id="list1">
List of terminals 1: <input type="text" name="genStringsInput">
<p>Number of terminals in generated strings:</p>
<p class="genStringsNum">Min: <input type="text" name="genStringsMin" class="genStringsNumBox" style="margin-left: 4px"></p>
<p class="genStringsNum">Max: <input type="text" name="genStringsMax" class="genStringsNumBox"></p>
</div>
</div>
<button id="addList" type="button">Add list of terminals</button>
<br>
<button id="genStringsDoneButton" class="orange-button" type="button">Generate terminal strings</button>
<div style="margin-top: 15px">
<label class="switch">
<input type="checkbox" id="gen-strings-switch" value="">
<span class="slider round"></span>
</label>
<p id="strings-switch-text" style="font-size: 15; vertical-align: middle; display: inline">Show generated terminal strings</p>
</div>
<div id="genStringsArea" style="display: none">
<br>
<div id="genStringsBox"></div>
</div>
</fieldset>
<button id="autoGenDoneButton" class="orange-button" type="button" style="margin-top: 15px">Generate trees</button>
<div id="autoDoneMessage">The trees in the analysis are up-to-date</div>
<div style="margin-top: 15px">
<label class="switch">
<input type="checkbox" id="syntax-tree-switch" value="show-syntax-tree-box">
<span class="slider round"></span>
</label>
<p id="syntax-switch-text" style="font-size: 15; vertical-align: middle; display: inline">Show syntactic trees</p>
</div>
<div id="autoTreeArea" style="display: none">
<br>
<div id="autoTreeBox"></div>
</div>
</div>
</div>
<!--GEN OPTIONS-->
<div class="spotBlock">
<legend><h2>GEN: Output parameters</h2></legend>
<div style="padding-right: 15px">
<div class="constraint-row">
<span><input type="checkbox" name="genOptions" value="obeysNonrecursivity">No prosodic recursion (Non-Recursivity)</span>
<div class="info">
<span class="content">If selected, no pTree will contain a node of category K that dominates another node of category K.</span>
</div>
</div>
<div class="constraint-row">
<span><input type="checkbox" name="genOptions" value="obeysHeadedness" checked="checked">Enforce headedness</span>
<div class="info">
<span class="content">If selected, every non-terminal pTree node of level <i>k</i> must immediately dominate a node of level <i>k</i> or <i>k</i>−1.</span>
</div>
</div>
<div class="constraint-row">
<span><input type="checkbox" name="genOptions" id="exhaustivityBox" value="obeysExhaustivity">No level-skipping (Exhaustivity)</span>
<div class="info">
<span class="content">If selected, every non-root pTree node of level <i>k</i> is dominated by a node of level <i>k</i> or <i>k</i>+1.</span>
</div>
</div>
<div id="exhaustivityDetailOption1" style="display: none; padding-left: 3em" ><input type="checkbox" name="exhaustivityCats" value="i" checked="checked">ι's children are ≥φs </div>
<div id="exhaustivityDetailOption2" style="display: none"><input type="checkbox" name="exhaustivityCats" value="phi" checked="checked">φ's children are ≥ωs </div>
<div class="constraint-row">
<span><input type="checkbox" name="genOptions" id="branchingBox" value="noUnary">All intermediate nodes are branching</span>
<div class="info">
<span class="content">If selected, every non-root, non-terminal node will have at least two children. No intermediate nodes will be unary.</span>
</div>
</div>
<div class="constraint-row">
<span><input id='maxBranchingBox' type="checkbox" name="genOptions" value="maxBranching" onclick="showMaxBranching()">Restrict maximum number of branches<span id="maxBranchingText" style="display: none"> to <input style="width: 25px; text-align: center" type="text" name="maxBranchingValue" value="2"></span></span>
<div class="info">
<span class="content">If selected, restricts the maximum number of branches that are tolerated to the entered number.</span>
</div>
</div>
<div class="constraint-row">
<span><input type="checkbox" name="genOptions" value="cliticMovement" id='movementOptions'>Allow movement</span>
<div class="info">
<span class="content">If "Move only clitics" is selected, GEN will permute the first node in the syntactic tree with category 'clitic' through the sentence. Ex.: a b c-clitic → a b c-clitic, a c-clitic b, c-clitic a b. If "Reorder all terminals" is selected, GEN will permute all orders of terminals. Ex.: a b c → c a b, a c b, b c a, c b a, b a c, a b c. Only use this if your sentences are short, or in conjunction with non-recursivity or the branching requirement.</span>
</div>
</div>
<div class="category-row" id='movementSpecification' style='display: none'>
<div><input type="radio" name="genOptions-movement" value="GENwithCliticMovement" checked="checked">Move only clitics</div>
<div><input type="radio" name="genOptions-movement" value="GENwithPermutation">Reorder all terminals</div>
</div>
</div>
<fieldset id="prosodicCategories">
<legend><h2>Prosodic categories <span class="arrow"></span></h2></legend>
<div class="constraint-row"><span>Root prosodic tree in</span>
<div class="info">
<span class="content">Specify the category of the root node for all the pTrees created by GEN. If roots are prosodic words, intermediate levels are feet, and terminals are syllables, then [ ] will stand for word boundaries and ( ) for foot boundaries. Otherwise, intonational phrase boundaries will be represented with { }, phonological phrase boundaries with ( ), and word boundaries with (w ).</span>
</div>
</div>
<div class="category-row">
<div class="category-selection-div"><input type="radio" name="genOptions-rootCategory" value="i" checked="checked">ι</div>
<div class="category-selection-div"><input type="radio" name="genOptions-rootCategory" value="phi">φ</div>
<div class="category-selection-div"><input type="radio" name="genOptions-rootCategory" value="w">ω</div>
</div>
<div class="constraint-row"><span>Intermediate nodes are</span>
<div class="info"><span class="content">Specify the category(ies) of the non-root, non-terminal nodes. If recursion is permitted, GEN will produce recursion for all selected categories of non-root, non-terminals. <br>If roots are prosodic words, intermediate levels are feet, and terminals are syllables, then [ ] will stand for word boundaries and ( ) for foot boundaries. Otherwise, intonational phrase boundaries will be represented with { }, phonological phrase boundaries with ( ), and word boundaries with (w ).</span></div>
</div>
<div class="category-row">
<div class="category-selection-div"><input type="checkbox" name="genOptions-recursiveCategory" value="i">ι</div>
<div class="category-selection-div"><input type="checkbox" name="genOptions-recursiveCategory" value="phi" checked="checked">φ</div>
<div class="category-selection-div"><input type="checkbox" name="genOptions-recursiveCategory" value="w">ω</div>
<div class="category-selection-div"><input type="checkbox" name="genOptions-recursiveCategory" value="ft">ft</div>
</div>
<div class="constraint-row"><span>Prosodic terminals are</span>
<div class="info">
<span class="content">Specify the category of the terminal nodes for the pTrees GEN will create. N.B. GEN will always map terminals marked with "-clitic" to syllables.<br> If roots are prosodic words, intermediate levels are feet, and terminals are syllables, then [ ] will stand for word boundaries and ( ) for foot boundaries. Otherwise, intonational phrase boundaries will be represented with { }, phonological phrase boundaries with ( ), and word boundaries with (w ).</span></div>
</div>
<div class="category-row">
<div class="category-selection-div"><input type="radio" name="genOptions-terminalCategory" value="phi">φ</div>
<div class="category-selection-div"><input type="radio" name="genOptions-terminalCategory" value="w" checked="checked">ω</div>
<div class="category-selection-div"><input type="radio" name="genOptions-terminalCategory" value="ft">ft</div>
<div class="category-selection-div"><input type="radio" name="genOptions-terminalCategory" value="syll">σ</div>
</div>
</fieldset>
<fieldset id="treeDisplayOptions">
<legend><h2>Tree marking options <span class="arrow"></span></h2></legend>
<div class="constraint-row"><input type="checkbox" name="genOptions" value="usesTones" id="annotatedWithTones">Annotated with tones</div>
<div class="category-row" style="display: none" id="tonesSelectionRow">
<div class="category-selection-div" style="width: 180px"><input type="radio" name="toneOptions" value="addJapaneseTones" checked="checked">Japanese <div class="info" onclick="toneInfoBlock('japanese')"></div></div>
<div class="category-selection-div" style="width: 180px"><input type="radio" name="toneOptions" value="addIrishTones_Elfner">Irish <div class="info" onclick="toneInfoBlock('irish')"></div></div>
<br/>
<div id="tonesInfoContent"></div>
</div>
<div class="constraint-row">Hide boundaries for nodes of category...</div>
<div class="category-row">
<div class="category-selection-div"><input type="checkbox" name="hideCategory" value="i">ι</div>
<div class="category-selection-div"><input type="checkbox" name="hideCategory" value="phi">φ</div>
<div class="category-selection-div"><input type="checkbox" name="hideCategory" value="w">ω</div>
</div>
<div class="constraint-row">
<span><input type="checkbox" name="genOptions" id="showHeads">Mark prosodic heads</span>
<div class="info">
<span class="content">Selecting this option labels the head of each prosodic constituent with an asterisk on its right edge. For a prosodic constituent p, with children of categories <i>k</i> and/or <i>k</i>−1 in the prosodic hierarchy, p's head is defined as the leftmost or rightmost child of category <i>k</i> in p.
<br>
<br>For example, marking heads on the right for p = (a b c) yields (a b c*), and for p = ((a) (b) c), yields ((a*) (b*)* c). This is the notion of head employed by BinMaxHead, but not the notion employed by AccentAsHead.</span>
</div>
</div>
<div class="category-row" id='headSideOptions' style='display: none'>
<div><input type="radio" name="genOptions-showHeads" value="left">on the left</div>
<div><input type="radio" name="genOptions-showHeads" value="right" checked>on the right</div>
</div>
</fieldset>
</div>
<!--CONSTRAINTS-->
<div class="spotBlock">
<h2>Mapping constraints
<div class="info">
<span class="content">Mapping constraints refer to both syntax and prosody. They are similar to faithfulness constraints in that they regulate the relation between input and output (Prince & Smolensky 1993/2004, McCarthy & Prince 1995), but are distinct from faithfulness since syntactic and prosodic trees are built from different atoms (e.g. XPs and φs) as opposed to elements from the same alphabet (e.g. segments).
<br/>Mapping constraints include constraints from competing theories, e.g. Match vs. Align/Wrap. They come in two types: <ol>
<li>syntax → prosody constraints, which penalize syntactic relationships not represented in the prosodic output, and</li>
<li>prosody → syntax, which penalize prosodic relationships not represented in the syntactic input.</li>
</ol> </span>
</div>
</h2>
<fieldset>
<legend><h2>Match <span class="arrow"></h2></legend>
<div class="constraint-selection-table">
<div class="constraint-row">
<span><input type="checkbox" name="constraints" value="matchSP">Match(Syntax→Prosody)</span>
<div class="info">
<span class="content">Assign one violation for every node of category K in the syntactic tree such that there is no node of the corresponding prosodic category in the prosodic tree that dominates the same set of terminals (that is, all and only the same terminal ids, regardless of order). SPOT function: matchSP(). (<a href ="https://spot.sites.ucsc.edu/bibliography/">Selkirk 2011</a>)</span>
</div>
</div>
<div class="category-row">
<div class="category-selection-div"><input type="checkbox" name="category-matchSP" value="cp">CP</div>
<div class="category-selection-div"><input type="checkbox" name="category-matchSP" value="xp" checked="checked">XP</div>
<div class="category-selection-div"><input type="checkbox" name="category-matchSP" value="x0">X<sup>0</sup></div>
<div class="category-selection-div"><div class="all-cats"><input type="checkbox" name="category-matchSP" value="any">all syntactic categories</div></div>
</div>
<div class="category-row">
<div class="custom-text">
<p>Enforce Match only for syntactic nodes that are...</p>
</div>
<div class="option-selection-div custom-option-div"><input type="checkbox" name="option-matchSP" value="requireLexical">lexical</div>
<div class="info">
<span class="content custom-option-div">Match only syntactic nodes that are not labeled as functional. Mark nodes as functional by adding ",func" to the category label in the tree builder.</span>
</div>
</div>
<div class="category-row">
<div class="option-selection-div custom-option-div"><input type="checkbox" name="option-matchSP" value="requireOvertHead">overtly headed</div>
<div class="info">
<span class="content custom-option-div">Match only syntactic nodes that have a non-silent head. Mark nodes as having silent heads by adding ",silentHead" to the category label in the tree builder.</span>
</div>
</div>
</div>
<div class="constraint-selection-table">
<div class="constraint-row">
<span><input type="checkbox" name="constraints" value="matchPS">Match(Prosody→Syntax)</span>
<div class="info">
<span class="content">Assign one violation for every node of category K in the prosodic tree such that there is no node of the corresponding syntactic category in the syntactic tree that dominates the same set of terminals (that is, all and only the same terminal nodes, regardless of order). SPOT function: matchPS(). (<a href ="https://spot.sites.ucsc.edu/bibliography/">Selkirk 2011</a>)</span>
</div>
</div>
<div class="category-row">
<div class="category-selection-div"><input type="checkbox" name="category-matchPS" value="i">ι</div>
<div class="category-selection-div"><input type="checkbox" name="category-matchPS" value="phi" checked="checked">φ</div>
<div class="category-selection-div"><input type="checkbox" name="category-matchPS" value="w">ω</div>
</div>
</div>
<div class="constraint-selection-table">
<div class="constraint-row">
<span><input type="checkbox" name="constraints" value="matchSPPS">Match(Syntax↔Prosody)</span>
<div class="info">
<span class="content">Combines violations from MatchSP and MatchPS; see information on those constraints. Intended as a symmetrical faithfulness constraint in syntax-prosody mapping, to enable simplified typologies. SPOT function: matchSPPS().</span>
</div>
</div>
<div class="category-row">
<div class="category-selection-div"><input type="checkbox" name="category-matchSPPS" value="cp">CP / ι</div>
<div class="category-selection-div"><input type="checkbox" name="category-matchSPPS" value="xp" checked="checked">XP / φ</div>
<div class="category-selection-div"><input type="checkbox" name="category-matchSPPS" value="x0">X<sup>0</sup> / ω</div>
</div>
</div>
<div onclick="showMore('moreMappingConstraints')" class="show-more" id="moreMappingConstraintsShow">Show more...</div>
<div id="moreMappingConstraints" class="more-constraints">
<div class="constraint-selection-table">
<div class="constraint-row">