-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·563 lines (500 loc) · 42.1 KB
/
Copy pathindex.html
File metadata and controls
executable file
·563 lines (500 loc) · 42.1 KB
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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="stylesheet" href="libraries/bootstrap/bootstrap-5.1.3.min.css">
<link rel="stylesheet" href="libraries/jointJS/joint-3.5.4.min.css"/>
<link rel="stylesheet" href="libraries/codemirror/codemirror-5.65.5.min.css"/>
<link rel="stylesheet" href="css/main.css">
<title>Attribute Grammar Tutor</title>
</head>
<body>
<div id="mainContainer" class="container d-flex flex-column">
<!-- Warning for mobile devices -->
<div id="mobileWarning" class="alert alert-warning align-items-center mt-3 text-center mx-auto" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:">
<use xlink:href="#exclamation-triangle-fill"/>
</svg>
<div>This page is not intended to be used on mobile devices, as it relies on the use of such functions, as the mouse wheel or the mouse hover.</div>
</div>
<!-- Header -->
<header class="mt-2 d-flex">
<h1 class="m-0">Attribute Grammar Tutor</h1>
<button id="helpBtn" type="button" class="helpAboutButton btn btn-outline-secondary btn-sm mt-auto ms-auto" title="Help" data-bs-toggle="modal" data-bs-target="#help">
<svg class="bi bi-question-circle" width="18" height="18" role="img" aria-label="Help">
<use xlink:href="#question-circle"/>
</svg>
</button>
<button id="aboutBtn" type="button" class="helpAboutButton btn btn-outline-secondary btn-sm mt-auto ms-2" title="About" data-bs-toggle="modal" data-bs-target="#about">
<svg class="bi bi-info-circle" width="18" height="18" role="img" aria-label="About">
<use xlink:href="#info-circle"/>
</svg>
</button>
</header>
<main>
<!-- Grammar input -->
<div class="input-group pt-4 pb-2">
<div class="input-group-text noselect">Attribute <br>Grammar</div>
<div class="form-control p-0">
<div id="grammarTitle" class="d-flex noselect hide">
<div id="grammarTitleComment" class="CodeMirror-linenumber">//</div>
<div id="grammarTitleText">Grammar title</div>
</div>
<div id="grammarInputWrapper"></div>
</div>
</div>
<!-- Grammar buttons -->
<div class="d-flex align-items-center">
<button type="button" id="applyGrammarButton" class="btn btn-primary me-2" title="Apply attribute grammar and generate exercises">Apply</button>
<button type="button" id="editGrammarButton" class="btn btn-secondary" title="Delete exercises and edit attribute grammar" disabled>Edit</button>
<div class="dropdown ms-auto">
<button id="grammarSelect" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Load attribute grammar</button>
<ul id="grammarSelectList" class="dropdown-menu dropdown-menu-end" aria-labelledby="grammarSelect"></ul>
</div>
</div>
<!-- noscript warning -->
<noscript>
<div class="alert alert-danger" role="alert">This page only works with JavaScript enabled.</div>
</noscript>
<!-- Grammar errors -->
<ul id="grammarErrorMessages" class="list-group pt-3"></ul>
<!-- Local dependencies exercise -->
<div id="dependenciesExercise" class="accordion pt-4">
<div class="accordion-item">
<h2 id="dependencies-heading" class="accordion-header">
<button id="dependenciesCollapseBtn" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#dependencies-collapse" aria-expanded="true" aria-controls="dependencies-collapse">
<span id="dependenciesCollapseBtnTitle" class="d-flex">Local dependency graphs</span>
<span id="dependenciesCollapseBtnInfo" class="d-flex flex-grow-1 pe-3 justify-content-end">
<svg data-bs-toggle="tooltip" data-bs-placement="bottom" class="bi bi-info-circle-fill" width="18" height="18" role="img" aria-label="Info"
data-bs-original-title="For every production rule, draw the syntax tree (blue nodes) and then add the corresponding attributes and their dependencies (green nodes). Start off by double clicking on the graph canvas to create a syntax tree node. For more info, click on help at the top of the page.">
<use xlink:href="#info-circle-fill"/>
</svg>
</span>
</button>
</h2>
<div id="dependencies-collapse" class="accordion-collapse collapse show" aria-labelledby="dependencies-heading">
<div class="accordion-body px-0">
<div class="container px-0">
<div id="dependencyGraphsRow" class="row px-0 gy-4">
<!-- Local dependency graph card -->
<div class="col-auto dependenciesGraphCard" data-index="0">
<div class="card">
<div class="card-header dependenciesGraphCardHeader d-flex align-items-center" data-index="0">
<h6 class="dependenciesGraphCardTitle" data-index="0">X -> X</h6>
<button class="showGraphErrorsBtn btn btn-outline-danger btn-sm" data-index="0">
<svg class="bi bi-exclamation-triangle-fill" width="16" height="16" role="img">
<use xlink:href="#exclamation-triangle-fill"/>
</svg>
</button>
<svg class="dependencyGraphCorrectIcon bi bi-check-circle-fill" data-index="0" width="20" height="20" role="img">
<use xlink:href="#check-circle-fill"/>
</svg>
</div>
<!-- new JointJS graph paper is inserted here -->
<!-- Local dependency graph errors -->
<div class="graphErrors" data-index="0">
<ul class="graphErrorMessages" data-index="0"></ul>
</div>
<!-- Local dependency graph buttons -->
<div class="container text-center p-2 border-top">
<div class="row justify-content-center">
<button type="button" data-index="0" class="col-auto btn btn-outline-secondary btn-sm me-2 dependenciesCheckBtn" title="Check graph and show errors">Check</button>
<button type="button" data-index="0" class="col-auto btn btn-outline-secondary btn-sm me-2 dependenciesClearBtn" title="Clear graph">Clear</button>
<button type="button" data-index="0" class="col-auto btn btn-outline-secondary btn-sm me-2 dependenciesDrawBtn" title="Draw syntax tree">Draw tree</button>
<button type="button" data-index="0" class="col-auto btn btn-outline-secondary btn-sm me-2 dependenciesSolutionBtn" title="Show correct solution">Show solution</button>
<button type="button" data-index="0" class="col-auto btn btn-outline-secondary dependenciesRecenterBtn" title="Recenter canvas">
<svg class="bi" width="16" height="16" role="img">
<use xlink:href="#arrows-to-center"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Local dependency graph ALL buttons -->
<div class="container text-center p-4">
<div class="gy-3 row justify-content-center">
<button id="dependenciesCheckAllBtn" type="button" class="col-auto btn btn-outline-primary me-3" title="Check all graphs and show errors">Check all</button>
<button id="dependenciesClearAllBtn" type="button" class="col-auto btn btn-outline-primary me-3" title="Clear all graphs">Clear all</button>
<button id="dependenciesDrawAllBtn" type="button" class="col-auto btn btn-outline-primary me-3" title="Draw all syntax trees">Draw all trees</button>
<button id="dependenciesAllSolutionsBtn" type="button" class="col-auto btn btn-outline-primary me-3" title="Show correct solution for all graphs">Show all solutions</button>
</div>
</div>
</div>
</div>
</div>
<!-- Strong acyclicity exercise -->
<div id="acyclicityExercise" class="accordion pt-4">
<div class="accordion-item">
<!-- Strong acyclicity heading -->
<h2 id="acyclicity-heading" class="accordion-header">
<button id="acyclicityCollapseBtn" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acyclicity-collapse" aria-expanded="true" aria-controls="acyclicity-collapse">
<span id="acyclicityCollapseBtnTitle" class="d-flex">Strong acyclicity</span>
<span id="acyclicityCollapseBtnInfo" class="d-flex flex-grow-1 pe-3 justify-content-end">
<svg data-bs-toggle="tooltip" data-bs-placement="bottom" class="bi bi-info-circle-fill" width="18" height="18" role="img" aria-label="Info"
data-bs-original-title="For every production rule, draw the redecorated relations with a green edge and the root projections with a yellow one. Decide, whether a cycle was formed in each graph and whether the iteration is stable. Also write down the transitive relation for each non-terminal, using the standard format. For more info, click on help at the top of the page.">
<use xlink:href="#info-circle-fill"/>
</svg>
</span>
</button>
</h2>
<div id="acyclicity-collapse" class="accordion-collapse collapse" aria-labelledby="acyclicity-heading">
<div class="accordion-body">
<!-- Warning: complete local dependency exercise first -->
<div id="acyclicityExerciseNotEnabledWarning" class="alert alert-warning " role="alert">
<div class="p-5 d-flex align-items-center justify-content-center">
<svg class="bi bi-info-circle-fill flex-shrink-0 me-4" width="24" height="24" role="img">
<use xlink:href="#info-circle-fill"/>
</svg>
<div>
This exercise can only be solved, after all local dependency graphs have been drawn correctly.<br><br>
Please finish drawing the local dependency graphs and then click on "Check" for every graph, or click on "Check all" to correct them at once.
</div>
</div>
</div>
<div id="shortcutEnd"></div>
<!-- Nonterminal container -->
<div class="acyclicityNonterminalContainer" data-nonterminal="-1">
<!-- Iteration headings -->
<div class="acyclicityIterationHeaderContainer">
<div class="leftGradient gradient"></div>
<div class="rightGradient gradient"></div>
<div class="acyclicityIterationHeader scrollSync" data-nonterminal="-1">
<ul class="acyclicityIterationHeaderList" data-nonterminal="-1">
<!-- Iteration title is inserted here -->
</ul>
</div>
</div>
<div class="acyclicityContent">
<!-- Nonterminal title bar -->
<div class="acyclicityNonterminalTitle" data-nonterminal="-1">X</div>
<div class="acyclicityProductionRules">
<!-- Production rule row -->
<div class="acyclicityProductionRule d-flex" data-nonterminal="-1" data-production="-1">
<!-- Production rule title -->
<div class="acyclicityProductionRuleText" data-nonterminal="-1" data-production="-1">X -> X</div>
<!-- Graphs row -->
<div class="acyclicityGraphsRow scrollSync d-flex" data-nonterminal="-1" data-production="-1">
<!--Graph card -->
<div class="acyclicityGraphCardContainer" data-nonterminal="-1" data-production="-1" data-iteration="-1">
<div class="acyclicityGraphCard card" data-nonterminal="-1" data-production="-1" data-iteration="-1">
<!-- Graph -->
<div class="acyclicityGraph" data-nonterminal="-1" data-production="-1" data-iteration="-1">
<!-- new JointJS graph paper is inserted here -->
</div>
<!-- Redecorated / projected link choice -->
<div class="acyclicityLinkTypes">
<div class="acyclicityLinkTypesButton linkTypeRedecorated" data-nonterminal="-1" data-production="-1" data-iteration="-1">
<input type="radio" id="linkTypeRedecorated_-1_-1_-1" name="linkType_-1_-1_-1" value="redecorated" autocomplete="off" checked>
<label class="redecorated" for="linkTypeRedecorated_-1_-1_-1" title="Redecorated relations"></label>
</div>
<div class="acyclicityLinkTypesButton linkTypeProjected" data-nonterminal="-1" data-production="-1" data-iteration="-1">
<input type="radio" id="linkTypeProjected_-1_-1_-1" name="linkType_-1_-1_-1" value="projected" autocomplete="off">
<label class="projected" for="linkTypeProjected_-1_-1_-1" title="Root projection"></label>
</div>
</div>
<!-- Cycle found radio buttons -->
<div class="acyclicityCycleFound text-center p-2 border-top d-flex" data-nonterminal="-1" data-production="-1" data-iteration="-1">
<p>Cycle found?</p>
<div class="cycleFoundYes form-check form-check-inline mb-0" data-nonterminal="-1" data-production="-1" data-iteration="-1">
<input class="form-check-input" type="radio" name="cycleFound_-1_-1_-1" id="cycleFoundYes_-1_-1_-1" value="yes" autocomplete="off">
<label class="form-check-label" for="cycleFoundYes_-1_-1_-1">yes</label>
</div>
<div class="cycleFoundNo form-check form-check-inline mb-0" data-nonterminal="-1" data-production="-1" data-iteration="-1">
<input class="form-check-input" type="radio" name="cycleFound_-1_-1_-1" id="cycleFoundNo_-1_-1_-1" value="no" autocomplete="off">
<label class="form-check-label" for="cycleFoundNo_-1_-1_-1">no</label>
</div>
<svg class="acyclicityWarningIcon bi bi-exclamation-triangle-fill" width="18" height="18" role="img" data-nonterminal="-1" data-production="-1" data-iteration="-1">
<use xlink:href="#exclamation-triangle-fill"/>
</svg>
<svg class="acyclicityGraphCorrectIcon bi bi-check-circle-fill" data-nonterminal="-1" data-production="-1" data-iteration="-1" width="18" height="18" role="img">
<use xlink:href="#check-circle-fill"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- Transitive relations -->
<div class="acyclicityTransitiveRelationsContainer d-flex" data-nonterminal="-1">
<div class="acyclicityTransitiveRelationsText greatVibes">R</div>
<div class="acyclicityTransitiveRelations flex-grow-1 scrollSync">
<ul class="acyclicityTransitiveRelationsList" data-nonterminal="-1">
<li class="acyclicityTransitiveRelationsItem" data-nonterminal="-1" data-iteration="-1">
<div class="d-flex">
<label for="transitiveRelation_-1_-1"><span class="greatVibes">R</span> ( <i>X</i> ) =</label>
<input id="transitiveRelation_-1_-1" type="text" placeholder="(a,b), (c,d)" autocomplete="off">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Strong acyclicity footer -->
<div id="acyclicityFooterContainer">
<div class="leftGradient gradient"></div>
<div class="rightGradient gradient"></div>
<div id="acyclicityFooter" class="scrollSync">
<ul id="acyclicityFooterList">
<!-- Check iteration -->
<li class="acyclicityIterationFooter" data-iteration="-1">
<div class="shortcutNext" data-iteration="-1"></div>
<div class="text-center p-2 d-flex">
<p>Iteration stable?</p>
<div class="stableYes form-check form-check-inline" data-iteration="-1">
<input class="form-check-input" type="radio" name="stable_-1" id="stableYes_-1" value="yes" autocomplete="off">
<label class="form-check-label" for="stableYes_-1">yes</label>
</div>
<div class="stableNo form-check form-check-inline" data-iteration="-1">
<input class="form-check-input" type="radio" name="stable_-1" id="stableNo_-1" value="no" autocomplete="off">
<label class="form-check-label" for="stableNo_-1">no</label>
</div>
<button type="button" id="iterationCheck_-1" class="btn btn-primary ms-4 flex-grow-1" title="Check iteration">Check</button>
</div>
</li>
</ul>
</div>
</div>
<!-- Strong acyclicity question -->
<div id="strongAcyclicityQuestion" class="card mt-5">
<div class="card-body d-flex">
<div class="flex-grow-1">
<div><p id="strongAcyclicityQuestionText" class="d-inline-block"></p></div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="acyclic" id="acyclicYes" value="yes" autocomplete="off">
<label class="form-check-label" for="acyclicYes">yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="acyclic" id="acyclicNo" value="no" autocomplete="off">
<label class="form-check-label" for="acyclicNo">no</label>
</div>
</div>
<div class="d-flex align-items-center">
<button type="button" id="acyclicityCheckButton" class="btn btn-primary py-2 px-4">Check</button>
</div>
</div>
</div>
<!-- Congrats -->
<div id="congrats" class="display-1 mt-5 mb-3 text-center"></div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer>
<div class="border-top text-center">
<a href="https://www.in.tum.de/i02/impressum/" target="_blank" rel="noopener noreferrer" class="text-muted">Impressum</a>
</div>
</footer>
</div>
<!-- Help -->
<div id="help" class="modal fade" tabindex="-1" aria-labelledby="helpLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="helpLabel">Help</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul id="helpContents" class="nav justify-content-center">
<li class="nav-item"><a class="nav-link pt-0" href="#helpAttributeGrammar">Attribute Grammar</a></li>
<li class="nav-item"><a class="nav-link pt-0" href="#helpLocalDependencyGraphs">Local dependency graphs</a></li>
<li class="nav-item"><a class="nav-link pt-0" href="#helpStrongAcyclicity">Strong acyclicity</a></li>
</ul>
<!-- Help: attribute grammar -->
<div id="helpAttributeGrammar" class="pb-5">
<h4 class="border-bottom mb-4 pb-1">Attribute Grammar</h4>
<h6 class="mb-3"><u>Buttons</u></h6>
<dl class="row">
<dt class="col-sm-1"><kbd>Apply</kbd></dt>
<dd class="col-sm-11">Parses the specified attribute grammar and generates two exercises based on it: <i>Local dependency graphs</i> and <i>Strong acyclicity</i>. The editing of the grammar is disabled. If errors were found, they are displayed, and they must be removed, before the exercises can be generated.</dd>
<dt class="col-sm-1"><kbd>Edit</kbd></dt>
<dd class="col-sm-11"><b>Warning!</b> Clicking on <code>Edit</code> will delete the exercises and any changes you made to them. This cannot be undone.<br>Afterwards, the attribute grammar can be edited again.</dd>
<dt class="col-sm-3"><kbd>Load attribute grammar</kbd></dt>
<dd class="col-sm-9">Displays a list of the provided attribute grammars. By clicking on one of them, the selected grammar is loaded into the text area.</dd>
</dl>
<h6 class="mt-4 mb-3"><u>Format</u></h6>
<p class="mb-2">Production Rules</p>
<ul>
<li>One production rule per line.</li>
<li>The first non-terminal is separated from the remaining (non-)terminals by an arrow <code>-></code>.<br>
<span class="d-inline-block ps-3"><small class="pe-2">EG:</small><code>S -> A B</code></span>
</li>
<li>(Non-)terminals on the right-hand side of the production rule are separated by a <code>whitespace</code>.</li>
<li>The production rule is separated from its attribute equations by a colon <code>:</code>. The attribute equations are on the same line as the corresponding production rule.<br>
<span class="d-inline-block ps-3"><small class="pe-2">EG:</small><code>production rule : attribute equations</code></span>
</li>
<li>An empty symbol (ε) is represented by an empty right-hand side of the production rule.<br>
<span class="d-inline-block ps-3"><small class="pe-2">EG:</small>The rule <span class="text-black-50">S → ε</span> would be represented as: <code>S -> : …</code></span>
</li>
<li>The name of the (non-)terminals may not contain the characters <code>[</code>, <code>]</code>, <code>;</code>, <code>=</code>.</li>
</ul>
<p class="mt-4 mb-2">Attribute equations</p>
<ul>
<li>Attribute equations are separated by a semicolon <code>;</code>.</li>
<li>The format of an attribute equation is: <code>right side = left side</code>.</li>
<li>The left-hand side is composed of <u>just one</u> attribute, whereas the right-hand side can contain several attributes.</li>
<li>An attribute is composed of its name (any letters or digits), followed by the index of the corresponding (non)-terminal in square brackets <code>[]</code>.<br>
<span class="d-inline-block ps-3"><small class="pe-2">EG:</small><code>a[1]</code>, <code>attr2[0]</code>, <code>1337[42]</code></span>
</li>
<li>An attribute equation can contain any sort of expression. It will be ignored, when extracting the attributes.<br>
<span class="d-inline-block ps-3"><small class="pe-2">EG:</small><code>a[0] = max(a[1], a[2])</code> - the extracted attributes will be <code>a[0]</code>, <code>a[1]</code> and <code>a[2]</code>.</span>
</li>
<li>According to the convention, for example, equation <code>a[0] = b[0]</code> reads as: <i>"Attribute a depends on attribute b."</i> and implies a dependency from <code>b</code> to <code>a</code>.</li>
</ul>
</div>
<!-- Help: local dependency graphs -->
<div id="helpLocalDependencyGraphs" class="pt-4 pb-5">
<h4 class="border-bottom mb-3 pb-1">Local dependency graphs</h4>
<!-- Buttons -->
<h6 class="mb-3"><u>Buttons</u></h6>
<dl class="row">
<dt class="col-sm-2"><kbd>Check</kbd></dt>
<dd class="col-sm-10">Performs a check of the correctness of the graph representation of the production rule. If any error is found, a list of relevant error messages can be displayed by clicking on the red warning button.</dd>
<dt class="col-sm-2"><kbd>Clear</kbd></dt>
<dd class="col-sm-10">Completely erases everything on the graph canvas. Cannot be undone!</dd>
<dt class="col-sm-2"><kbd>Draw tree</kbd></dt>
<dd class="col-sm-10">The syntax tree is automatically drawn on the canvas. This helps you focus on adding the correct attributes and their dependencies. Any changes made to the graph will be erased, before the syntax tree is drawn.</dd>
<dt class="col-sm-2"><kbd>Show solution</kbd></dt>
<dd class="col-sm-10">Shows the correct graph representation of the production rule, with all the attributes and their dependencies. Any changes made to the graph will be erased, before the solution is drawn.</dd>
<dt class="col-sm-2">
<kbd>
<svg class="bi" width="14" height="14" role="img">
<use xlink:href="#arrows-to-center"/>
</svg>
</kbd>
</dt>
<dd class="col-sm-10">Recenters and fits the content to the canvas.</dd>
</dl>
<!-- Draw -->
<h6 class="mt-4 mb-3"><u>Draw</u></h6>
<dl class="row">
<dt class="col-sm-3">New syntax tree node</dt>
<dd class="col-sm-9">A mouse <kbd>double click</kbd> on any empty part of the canvas creates a new syntax tree node.</dd>
<dt class="col-sm-3">New attribute node</dt>
<dd class="col-sm-9">Hover over the corresponding (non-)terminal. <kbd>Click</kbd> on the orange circle with a plus sign, which appears on its right side.</dd>
<dt class="col-sm-3">Rename node</dt>
<dd class="col-sm-9">Hover over the node and use the <kbd>mouse wheel scroll</kbd> to choose the correct name.
<ul class="mb-0">
<li>Syntax tree: only the (non-)terminal names of the corresponding production rule will be toggled.</li>
<li>Attributes: all attribute names from the whole attribute grammar will be toggled. This is due to the fact, that some attributes may be defined in a different production rule.</li>
</ul>
</dd>
<dt class="col-sm-3">Connect nodes</dt>
<dd class="col-sm-9">Move the mouse pointer to the border of the node, from which you want the draw the edge. <kbd>Click and drag</kbd> the new edge to the other node. Only nodes of the same type can be connected. If you release the mouse button midway, no connection is created.</dd>
<dt class="col-sm-3">Reconnect nodes</dt>
<dd class="col-sm-9">To move an edge to another node, <kbd>click and drag</kbd> the arrow from one node to the other node.</dd>
<dt class="col-sm-3">Rearrange edges</dt>
<dd class="col-sm-9">
<ul class="list-unstyled mb-0">
<li>To rearrange the path of an edge, <kbd>click</kbd> on the edge to create a new vertex.</li>
<li>To move this vertex, <kbd>click and drag</kbd> it to any other position.</li>
<li>To delete a vertex, <kbd>double click</kbd> on it.</li>
</ul>
</dd>
<dt class="col-sm-3">Delete element</dt>
<dd class="col-sm-9">
<ul class="list-unstyled mb-0">
<li>Hover over the element and <kbd>click</kbd> on the gray circle with a cross.</li>
<li>You can also delete an element by hovering over it and pressing the <kbd>Del</kbd> key on the keyboard.</li>
<li>Another option is to <kbd>middle click</kbd> on the element to be deleted. This, however, does not work on edges.</li>
</ul>
</dd>
<dt class="col-sm-3">Zoom</dt>
<dd class="col-sm-9">To zoom in or zoom out, use the <kbd>mouse wheel</kbd> over any empty point on the graph canvas.</dd>
<dt class="col-sm-3">Pan</dt>
<dd class="col-sm-9"><kbd>Click and drag</kbd> any blank point on the graph canvas.</dd>
</dl>
</div>
<!-- Help: strong acyclicity -->
<div id="helpStrongAcyclicity" class="pt-4">
<h4 class="border-bottom mb-3 pb-1">Strong acyclicity</h4>
<p><b>Objective:</b> perform the algorithm to find out, whether the attribute grammar is strongly acyclic.<br>
This exercise leads you through the process of establishing the transitive relations and the different iterations, until the algorithm stabilizes.</p>
<dl class="row">
<dt class="col-sm-3 fw-normal"><span class="greatVibes">R</span> (X) [ i ]</dt>
<dd class="col-sm-9">Redecorate the relations from previous iterations to the non-terminals in the current production rule.<br>
Draw the redecorated relations using green edges <span id="helpGreenEdge" class="d-inline-block"></span> between the correct attributes of the corresponding non-terminal.
</dd>
<dt class="col-sm-3 fw-normal">⟦ p ⟧<sup>#</sup> ( <span class="greatVibes">R</span> (X<sub>1</sub>), ..., <span class="greatVibes">R</span> (X<sub>k</sub>) )</dt>
<dd class="col-sm-9">Establish the root projection of the transitive closure of the production rule relations.<br>
Draw the root projection using yellow edges <span id="helpYellowEdge" class="d-inline-block"></span> between the correct attributes.
</dd>
<dt class="col-sm-3 fw-normal"><span class="greatVibes">R</span> (X)</dt>
<dd class="col-sm-9">Write down the union of all transitive relations from the production rules of the corresponding non-terminal.<br>
Please use the following format: a relation from attribute <b>a</b> to attribute <b>b</b> is represented as <code>(a, b)</code>.
</dd>
</dl>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- About -->
<div id="about" class="modal fade" tabindex="-1" aria-labelledby="aboutLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="aboutLabel">About</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="aboutContent" class="modal-body">
<img class="d-block mx-auto w-100 h-auto" src="img/tum_logo.png" alt="TUM logo">
<p class="mt-4">The Attribute Grammar Tutor provides exercises to learn the graph representation of an attribute grammar, as well as the algorithm for determining its strong acyclicity.</p>
<p>It has been developed for the course <em>Compiler Construction</em> at the chair <a href="https://www.in.tum.de/en/i02/" target="_blank" rel="noopener noreferrer">I2</a> of the <a href="https://www.in.tum.de/" target="_blank" rel="noopener noreferrer">Department of Informatics</a> at the <a href="https://www.tum.de/" target="_blank" rel="noopener noreferrer">Technical University of Munich (TUM)</a>, under the supervision of Dr. Michael Petter.</p>
<p>The source code is available on <a href="https://github.com/alglus/attribute-grammar-tutor" target="_blank" rel="noopener noreferrer">github</a>.</p>
<p>In case you found any bug, please report it to <a href="mailto:michael.petter@tum.de">Dr. Michael Petter</a>. If the bug is related to an attribute grammar, please attach the used grammar as well.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- SVGs -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="info-circle" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
</symbol>
<symbol id="info-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="question-circle" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
</symbol>
<symbol id="arrows-to-center" fill="currentColor" viewBox="0 0 16 16">
<path d="m13.188 14.118-1.8789-1.8821v2.5869h-1.2956l-0.0068-0.84422c-0.0037-0.46433-0.0068-1.5494-0.0068-2.4114l-5.7e-5 -1.5671h4.8248v1.3116h-2.5722l3.7474 3.7539-0.93307 0.93451z" stroke-width=".54876" style="paint-order:stroke fill markers"/>
<path d="m2.8118 1.8821 1.8789 1.8821v-2.5869h1.2956l0.00686 0.84422c0.003784 0.46433 0.006868 1.5494 0.006868 2.4114l-1.7e-6 1.5671h-4.8247v-1.3116h2.5722l-3.7474-3.7539 0.93307-0.93451z" stroke-width=".54876" style="paint-order:stroke fill markers"/>
<path d="m1.8821 13.188 1.8821-1.8788h-2.5869v-1.2956l0.84422-0.0069c0.46433-0.0038 1.5494-0.0069 2.4114-0.0069l1.5671 8.3e-5v4.8247h-1.3116v-2.5721l-3.7539 3.7474-0.93451-0.93306z" stroke-width=".54876" style="paint-order:stroke fill markers"/>
<path d="m14.118 2.8118-1.8821 1.8789h2.5869v1.2956l-0.84422 0.00686c-0.46433 0.00378-1.5494 0.00686-2.4114 0.00686l-1.5671 6.3e-6v-4.8247h1.3116v2.5722l3.7539-3.7474 0.93451 0.93307z" stroke-width=".54876" style="paint-order:stroke fill markers"/>
</symbol>
</svg>
<script src="libraries/jointJS/dependencies/jquery-3.6.0.min.js"></script>
<script src="libraries/codemirror/codemirror-5.65.5.min.js"></script>
<script src="libraries/bootstrap/bootstrap-5.1.3.bundle.min.js"></script>
<script src="libraries/jointJS/dependencies/lodash-4.17.21.min.js"></script>
<script src="libraries/jointJS/dependencies/backbone-1.4.1.min.js"></script>
<script src="libraries/jointJS/joint-3.5.4.min.js"></script>
<script type="module" src="js/init.js"></script>
</body>
</html>