-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
505 lines (490 loc) · 24 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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>MicroAlg</title>
<meta name="description" content="Langage et environnements dédiés à l’algorithmique">
<meta name="keywords" content="microalg, algo, algorithme, algorithmique, apprendre, lisp, langage, environnement, college, lycee" />
<meta name="author" content="Prof Gra">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="web/style.css" />
<link type="text/css" href="web/parenedit.css" rel="stylesheet" />
<link href="web/css-ninja-tree/css-ninja-tree.css" rel="stylesheet"/>
<link type="text/css" href="web/tipofthemoment.css" rel="stylesheet" />
<link rel="icon" href="visuels/logo_microalg.ico" />
</head>
<body>
<div class="container">
<img id="logo" alt="logo" src="images/logo_microalg.svg" />
<section class="header">
<h2 class="title"><strong>MicroAlg</strong> est un langage de
programmation simple et en français.<br>
Il est dédié à l’algorithmique et à son enseignement.</h2>
<p>Les <strong>débutants en programmation</strong>
n’ont pas besoin d’<strong>un énorme camion</strong> toutes options.
Ils veulent juste <strong>une simple trottinette</strong> qu’ils
comprennent tout de suite.<br>
<span class="u-pull-right">John Maeda, lors d’une
<a href="http://www.nytimes.com/1999/07/27/science/a-conversation-with-john-maeda-when-mit-artist-shouts-his-painting-listens.html">interview</a>.</span>
</p>
<div class="value-props row">
<div class="four columns value-prop">
<img class="value-img" src="images/syntaxe.svg">
Des mots-clefs peu nombreux et en français. Des aides visuelles.<br>
<a href="tuto.html#affichage">Commencer à apprendre</a>
</div>
<div class="four columns value-prop">
<img class="value-img" src="images/blocs.svg">
Des blocs ou briques à déplacer pour programmer.<br>
<a href="tuto_blocs.html#prise-en-main-et-affichage">Commencer à apprendre</a>
</div>
<div class="four columns value-prop">
<img class="value-img" src="images/integrations.svg">
Différentes interfaces possibles : web, consoles de
jeux, robots…<br>
<a href="doc.html#architecture">Voir la doc technique</a>
</div>
</div>
</section>
<div class="navbar-spacer"></div>
<nav class="navbar">
<div class="container">
<ul class="navbar-list">
<li class="navbar-item">
<a class="navbar-link" href="#" data-popover="#introNavPopover">Intro</a>
<div id="introNavPopover" class="popover">
<ul class="popover-list">
<li class="popover-item">
<a class="popover-link" href="#quoi">Qu’est-ce ?</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#qui">Pour qui ?</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#caracs">Caractéristiques</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#jeunesse">Jeunesse</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</li>
<li class="navbar-item">
<a class="navbar-link" href="#" data-popover="#tutosNavPopover">Tutos</a>
<div id="tutosNavPopover" class="popover">
<ul class="popover-list">
<li class="popover-item">
<a class="popover-link" href="tuto_blocs.html">Avec blocs</a>
</li>
<li class="popover-item">
<a class="popover-link" href="tuto.html">Avec code textuel</a>
</li>
<li class="popover-item">
<a class="popover-link" href="tuto_rapide.html">Rapide</a>
</li>
<li class="popover-item">
<a class="popover-link" href="tuto_graphique.html">Graphique</a>
</li>
<li class="popover-item">
<a class="popover-link" href="tuto_tortue.html">Tortue</a>
</li>
</ul>
</div>
</li>
<li class="navbar-item">
<a class="navbar-link" href="#" data-popover="#docsNavPopover">Docs</a>
<div id="docsNavPopover" class="popover">
<ul class="popover-list">
<li class="popover-item">
<a class="popover-link" href="https://github.com/Microalg/Microalg/blob/latest/INSTALL.md">Installation</a>
</li>
<li class="popover-item">
<a class="popover-link" href="doc.html#syntaxe">Syntaxe</a>
</li>
<li class="popover-item">
<a class="popover-link" href="doc.html#listedessymbolesprdfinis">Liste des symboles</a>
</li>
<li class="popover-item">
<a class="popover-link" href="doc.html#limitations">Limitations</a>
</li>
<li class="popover-item">
<a class="popover-link" href="doc.html#erreursfrquentes">Erreurs fréquentes</a>
</li>
<li class="popover-item">
<a class="popover-link" href="doc.html">Toute la doc</a>
</li>
</ul>
</div>
</li>
<li class="navbar-item">
<a class="navbar-link" href="#" data-popover="#vidsNavPopover">Videos</a>
<div id="vidsNavPopover" class="popover">
<ul class="popover-list">
<li class="popover-item">
<a class="popover-link" href="#video-galerie">Galerie</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#video-scite">Éditeur</a>
</li>
</ul>
</div>
</li>
<li class="navbar-item">
<a class="navbar-link" href="#" data-popover="#exNavPopover">Exemples</a>
<div id="exNavPopover" class="popover">
<ul class="popover-list">
<li class="popover-item">
<a class="popover-link" href="#exemple-blocs">Blocs</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#exemple-algues">Algues</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#exemple-tortue">Tortue</a>
</li>
<li class="popover-item">
<a class="popover-link" target="_blank" href="http://galerie.microalg.info">Galerie</a>
</li>
<li class="popover-item">
<a class="popover-link" target="_blank" href="http://microalg.tumblr.com">Tumblr</a>
</li>
</ul>
</div>
</li>
<li class="navbar-item">
<a class="navbar-link" href="bacasable.html">Bac à sable</a>
</li>
</ul>
</div>
</nav>
<div class="docs-section" id="quoi">
<h6 class="docs-header">Qu’est-ce que MicroAlg ?</h6>
<p><strong><em>MicroAlg</em></strong> est un langage de programmation
<strong>en français</strong> dédié à l’algorithmique et à son
enseignement. <strong>Simple</strong> (des parenthèses et des guillemets
pour seuls caractères spéciaux), elle offre un cadre
<strong>rigoureux</strong> pour l’apprentissage des concepts les plus
importants de
<a href="http://fr.wikipedia.org/wiki/Algorithmique" class="wp">l’algorithmique</a> et de la
<a href="http://fr.wikipedia.org/wiki/Programmation_imp%C3%A9rative" class="wp">programmation impérative</a>.</p>
<p>Créé par un professeur de mathématiques de la région Nantaise
(<a href="[email protected]">contacter par courriel</a>),
c’est un
<a href="https://fr.wikipedia.org/wiki/Logiciel_libre" class="wp">logiciel libre</a>
(licence <a href="https://github.com/Microalg/microalg/blob/master/LICENSE">GPL2</a>),
<a href="https://fr.wikipedia.org/wiki/Open_source" class="wp">ouvert</a>
et gratuit.</p>
<p>Une des forces de MicroAlg est qu’elle est utilisable
<strong>dans un navigateur</strong>. En voici la preuve :</p>
<div class="microalg" id="script-si-majeur-mineur"></div>
<p>Non seulement le programme ci-dessus peut être exécuté en cliquant sur
le bouton <span class="microalg"><code>Exécuter</code></span>, mais aussi
modifié avant d’être exécuté à nouveau, sans avoir à télécharger et
installer quoi que ce soit ! Essayez vous-même en modifiant la valeur 18
dans le programme ci-dessus.</p>
</div>
<iframe src="http://microalg.tumblr.com/" width="800" height="400" frameborder="0"></iframe>
<div class="docs-section" id="qui">
<h6 class="docs-header">À qui s’adresse MicroAlg ?</h6>
<p>Le langage en lui-même s’adresse à des enseignants qui voudraient
utiliser, avec leurs élèves, un langage de programmation simple et facile
à mettre en place. Il s’adresse aussi à des débutants qui voudraient
apprendre par eux-mêmes.</p>
<p>Principalement destinée à être utilisée par de grands débutants,
MicroAlg n’est plus vraiment utile à quelqu’un qui sait utiliser une
structure conditionnelle et une structure répétitive astucieusement.
Dans ce cas, la personne peut passer à un langage plus évolué. D’un
autre côté, les non-débutants auront toujours quelque chose à apprendre
de MicroAlg, de par sa syntaxe inhabituelle et pourtant si limpide :
l’arbre des instructions y apparaît tout naturellement.</p>
<p>Ce site propose <a href="tuto_blocs.html">des tutoriels</a>
pour apprendre le langage. Ils permettent à n’importe qui d’apprendre
les bases de l’algorithmique (un niveau minimum de lecture et de patience
étant requis). Si les tutoriels ne vous conviennent pas, vous pouvez
créer vos propres pages dans la
<a href="http://galerie.microalg.info">galerie</a>,
voire intégrer MicroAlg à votre propre site en suivant les
<a href="https://github.com/Microalg/Microalg/blob/latest/INSTALL.md">instructions d’installation</a>.</p>
</div>
<div class="docs-section" id="caracs">
<h6 class="docs-header">Principales caractéristiques</h6>
<ul>
<li>Une <a href="doc.html#syntaxe">syntaxe</a> simplissime et universelle,
qui s’appuie sur la notation polonaise :
<code>(commande argument1 argument2 …)</code>.<br>
<code>2x+1</code> doit donc être écrit <code>(+ (* 2 x) 1)</code>,
où l’on voit clairement que l’expression est une somme. Pour une
bonne introduction à cette syntaxe, voir le
<a target="_blank" href="http://expressions.club">Club des expressions</a>.</li>
<li>Les parenthèses sont colorées en fonction de leur profondeur, pour
aider à leur mise en place correcte :<br>
<pre><span class="paren_1">(</span>Afficher <span class="paren_2">(</span>Concatener <span class="paren_3">(</span>Texte <span class="paren_4">(</span>- <span class="paren_5">(</span>+ 1 <span class="paren_6">(</span>/ <span class="paren_0">(</span>* 2 3<span class="paren_0">)</span> 4<span class="paren_6">)</span><span class="paren_5">)</span><span class="paren_4">)</span><span class="paren_3">)</span> "<span class="text"> est le résultat.</span>"<span class="paren_2">)</span><span class="paren_1">)</span></pre></li>
<li>Des <a href="doc.html#listedessymbolesprdfinis">mots-clés</a> en
français et en nombre réduit.</li>
<li>La possibilité de programmer en déplaçant des blocs (ou briques),
sachant qu’à chaque commande textuelle correspond un bloc et
inversement. Voir
<a href="#exemple-blocs">la démo plus bas sur cette page</a>,
<a href="tuto_blocs.html">le tutoriel par blocs</a>,
<a href="doc.html#blockly">ou la documentation</a>.</li>
<li>La possibilité <a href="doc.html#export">d’exporter</a> (ou de
convertir) du code MicroAlg vers le langage des calculatrices les
plus utilisées, ou d’afficher le code MicroAlg sous forme
d’arbre pour mieux en comprendre la structure.</li>
<li>Une <a href="doc.html#sortiegraphique">sortie graphique</a>
permettant de dessiner des formes géométrique ou de manipuler une
tortue (celle du langage Logo). Voir
<a href="#exemple-algues">les algues</a> ou
<a href="#exemple-tortue">la tortue</a>
plus bas sur cette page, et
<a href="tuto_graphique.html">le tutoriel graphique</a> ou
<a href="tuto_tortue.html">le tutoriel tortue</a>.</li>
<li>Une <a href="http://galerie.microalg.info">galerie</a> permettant
aux enseignants de construire des documents et aux apprenants de
publier leur travail.</li>
</ul>
<p>Fonctionnalités avancées :</p>
<ul>
<li>Une <a href="doc.html#scite">intégration avec l’éditeur de texte
SciTE</a> très complète (une touche pour exécuter, coloration des
parenthèses, aide en ligne sur MicroAlg, auto-complétion,
abréviations…).</li>
<li>Différentes <a href="doc.html#architecture">plateformes d’exécution</a>,
dont Javascript (donc le navigateur), Java et C.</li>
<li>Un mécanisme <a href="http://galerie.microalg.info/microalg:credit_iterations">
limitant les boucles infinies</a>.</li>
<li>De quoi <a href="http://galerie.microalg.info/profgra:tests:exemples_testables">spécifier
et vérifier</a> des jeux de test depuis le langage.</li>
<li>Des tirages pseudo-aléatoires
<a href="http://fr.wikipedia.org/wiki/Reproductibilit%C3%A9"
class="wp">reproductibles</a>
(voir la documentation de la commande
<a href="doc.html#sym-Initialiser@"><code>Initialiser@</code></a>).</li>
<li>Une <a href="doc.html#feuillederoute">feuille de route</a>
ambitieuse…</li>
</ul>
<p>Autres petits « trucs » à savoir ou rappels :</p>
<div id="tip"></div>
</div>
<div class="docs-section" id="jeunesse">
<h6 class="docs-header">Jeunesse</h6>
<p>MicroAlg est encore assez jeune, son développement ayant seulement
commencé fin mars 2014. Elle est tout de même déjà utilisable, même si
elle possède encore
<a href="doc.html#limitations">quelques limitations</a>.
Un brouillon de rapport d’utilisation pour l’année scolaire 2014-2015 est
disponible <a href="http://microalg.info/rapport_2014-2015.html">ici</a>.</p>
<p>Le projet est jeune, mais toute demande de fonctionnalité sera
étudiée. N’hésitez pas à en proposer
<a href="mailto:[email protected]">par email</a>. Aussi, les
<a href="doc.html#contribuer">contributeurs de tous horizons</a>
seront les bienvenus ! Vous pouvez aider ! Même en tant que simple
testeur ! En effet, ce sont vos critiques et vos idées qui donneront à
MicroAlg sa forme la plus harmonieuse.</p>
</div>
<div class="docs-section" id="editeur-fichiers">
<h6 class="docs-header">Éditeur de fichiers</h6>
<p>De plus, MicroAlg peut aussi être utilisée de manière traditionnelle,
avec un éditeur de texte pour travailler sur des fichiers à organiser
comme bon vous semble.</p>
<img alt="copie d’écran de l’éditeur SciTE" src="images/microalg-scite.png" />
<p>Sur cette copie d’écran, un programme est en cours de rédaction. Il a
été testé une fois (on voit le résultat sur la droite) et une ligne est
en cours de rédaction (celle qui commence par <code>(Definir…</code>).
Dès que l’éditeur reconnaît une commande, il propose une petite fenêtre
d’aide qui rappelle le rôle de la commande et ses paramètres.</p>
</div>
<div class="docs-section" id="contact">
<h6 class="docs-header">Contact</h6>
<p>
Microalg a un compte Twitter :
<a target="_blank" href="https://twitter.com/microalg">@microalg</a>
et une adresse email :
<a href="mailto:[email protected]">[email protected]</a>.
<br>
Son créateur aussi :
<a target="_blank" href="https://twitter.com/profgraorg">@profgraorg</a>
et <a href="mailto:[email protected]">[email protected]</a>.
</p>
<p>Le quartier général des développeurs se trouve sur GitHub :</p>
<ul>
<li><a href="https://github.com/Microalg/Microalg/">dépôt principal</a></li>
<li><a href="https://github.com/Microalg/microalg.github.io/">dépôt pour ce site</a></li>
<li><a href="https://github.com/Microalg/dokuwiki-plugin-microalg">plugin Dokuwiki</a></li>
<li><a href="https://github.com/Microalg/microalg-android">application Android</a></li>
</ul>
</div>
<div class="docs-section" id="videos">
<h6 class="docs-header">Vidéos</h6>
<div class="row">
<div class="six columns">
<iframe id="video-galerie" frameborder="1" allowfullscreen
src="https://www.youtube.com/embed/087ZcOumd5w">
</iframe>
</div>
<div class="six columns">
<p><strong>Présentation de la galerie</strong>. D’une part,
parcourir la galerie est intéressant car elle propose des contenus
divers et variés. Et d’autre part, elle permet à des enseignants
ou des apprenants de publier des contenus. Cette vidéo explique,
entre autres choses, comment créer une page.</p>
</div>
</div>
<div class="row">
<div class="six columns">
<iframe id="video-scite" frameborder="1" allowfullscreen
src="https://www.youtube.com/embed/lFMzzvZgvo4">
</iframe>
</div>
<div class="six columns">
<p><strong>Présentation de l’éditeur</strong>. MicroAlg a choisi
SciTE, un éditeur de texte simple mais puissant, pour taper du
code puis l’exécuter. Cette vidéo explique comment installer puis
utiliser cet éditeur.</p>
</div>
</div>
</div>
<div class="docs-section" id="exemple-blocs">
<h6 class="docs-header">Exemple : Blocs</h6>
<div class="microalg" id="script-un-de-plus"></div>
</div>
<div class="docs-section" id="exemple-algues">
<h6 class="docs-header">Exemple : Algues</h6>
<p>La génération des algues peut prendre quelques secondes.</p>
<div class="microalg" id="script-algues"></div>
</div>
<div class="docs-section" id="exemple-tortue">
<h6 class="docs-header">Exemple : Tortue</h6>
<p>Appuyer plusieurs fois sur <code>Exécuter</code> pour voir se dessiner
une étoile.</p>
<div class="microalg" id="script-tortue"></div>
</div>
<div class="docs-section" id="infos">
<h6 class="docs-header">Infos sur ce site</h6>
<p>
Site maintenu par le créateur de MicroAlg :
<a target="_blank" href="https://twitter.com/profgraorg">@profgraorg</a>
et <a href="mailto:[email protected]">[email protected]</a>.
<br>
Pour une liste des changements de ce site, consulter <a href="https://github.com/Microalg/microalg.github.io/commits/master">cette page</a>.
<br>
Thème basé sur
<a target="_blank" href="http://getskeleton.com">Skeleton</a>.
<br>
Pièces de puzzle dessinées grâce à
<a target="_blank" href="https://github.com/Neon22/inkscape-jigsaw/">ce
plugin Inkscape</a>.
</p>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="web/jquery.min.js"><\/script>')</script>
<script src="js/site.js"></script>
<script src="emulisp/int.js"></script>
<script src="emulisp/emulisp_core.js"></script>
<script src="web/ide_injections.js"></script>
<script src="web/parenedit.js"></script>
<script src="web/showdown.js"></script>
<script src="web/svg-tree-drawer/svg-tree-drawer.js"></script>
<script src="web/tipofthemoment.js"></script>
<script>inject_microalg_editor_in('script-si-majeur-mineur', {src:
'(Declarer age De_type "nombre")\n' +
'(Afficher "Quel âge as-tu ?")\n' +
'(Affecter_a age (Demander_un_nombre))\n' +
'(Si (< age 18)\n' +
' Alors\n' +
' (Afficher "Tu es mineur, mais tu peux continuer sur le site.")\n' +
' Sinon\n' +
' (Afficher "Tu prétends être majeur.")\n' +
')'});
</script>
<script>inject_microalg_editor_in('script-un-de-plus', {
blockly: true,
src:
'(!!! "Bouger les blocs pour voir le code se mettre à jour.")\n' +
'(Afficher "Veuillez entrer un nombre.")\n' +
'(Afficher\n' +
' (Concatener\n' +
' "Un de plus: "\n' +
' (Texte (+ 1 (Nombre (Demander))))\n' +
' )\n' +
')'});
</script>
<script>inject_microalg_editor_in('script-tortue', {
processing: true,
src:
'(AV 60)\n' +
'(TD 120)\n' +
'(AV 30)\n' +
'(LC)\n' +
'(AV 60)\n' +
'(TG 23)\n' +
'(BC)'});
</script>
<script>inject_microalg_editor_in('script-algues', {
processing: true,
src:
'(RAZ)\n' +
'(Epaisseur 2)\n' +
'(Remplissage (Liste 255 255 255))\n' +
'(Declarer n x y r decalage De_type "nombre")\n' +
'(Affecter_a n 1)\n' +
'(Affecter_a x 0)\n' +
'(Tant_que (<= n 5)\n' +
' Faire\n' +
' (Affecter_a credit_iterations 300)\n' +
' (Affecter_a x (+ (* n 50) 150))\n' +
' (Affecter_a y 200)\n' +
' (Affecter_a r 25)\n' +
' (Affecter_a decalage 0)\n' +
' (Tant_que (>= r 4)\n' +
' Faire\n' +
' (Contour (Liste (Entier@ 0 255) (Entier@ 0 255) (Entier@ 0 255)))\n' +
' (Cercle (Liste x y) r)\n' +
' (Affecter_a decalage (+ decalage (Entier@ -1 1)))\n' +
' (Si (< decalage -2)\n' +
' Alors\n' +
' (Affecter_a decalage -2)\n' +
' )\n' +
' (Si (> decalage 2)\n' +
' Alors\n' +
' (Affecter_a decalage -2)\n' +
' )\n' +
' (Affecter_a x (+ x decalage))\n' +
' (Affecter_a y (+ y 2))\n' +
' (Si (= 1 (Entier@ 1 6))\n' +
' Alors\n' +
' (Affecter_a r (- r 2))\n' +
' )\n' +
' )\n' +
' (Affecter_a n (+ n 1))\n' +
')'});
</script>
<script type="text/javascript" src="web/tabIndent.js"></script>
<script type="text/javascript" src="web/jquery.textcomplete.min.js"></script>
<link type="text/css" href="web/jquery.textcomplete.css" rel="stylesheet" />
<script>
tabIndent.config.tab = ' ';
tabIndent.renderAll();
attachTextComplete();
</script>
<script type="text/javascript">
var $_Tawk_API={},$_Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5583e0d1cea5d22b4acfee51/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
</body>
</html>