-
Notifications
You must be signed in to change notification settings - Fork 8
/
Augmentation.html
84 lines (79 loc) · 4.98 KB
/
Augmentation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>"L'augmentation" inspiré de Georges Perec</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="Augmentation.js" type="module"></script>
<link rel="stylesheet" href="Augmentation.css">
</head>
<body>
<h1 id="augmentation"><em>L'art et les <span class="nbManieres"></span> manières d'aborder son chef de service pour lui demander une augmentation</em> </h1>
<h4>D'après une oeuvre de <a href="http://associationgeorgesperec.fr/georges-perec/" title="Georges Perec - Association Georges Perec">Georges Perec</a>
<input type="button" name="cacherAfficherInstructions" value="Cacher les instructions" id="cacherAfficherInstructions"></h4>
<div id="instructions">
<p><b>Cette page est plus agréable à utiliser avec un écran d'une hauteur suffisante pour afficher l'organigramme complet sans avoir à le faire défiler.</b> <br/>Pour gagner un peu d'espace, vous pouvez cacher ces instructions avec le bouton ci-dessus.</p>
<p>En utilisant <a href="perec-flowchart.jpg" target="_blank">cet organigramme</a> et les quelques indications fournies par Perec «<em>j'ai suivi UN à UN tous les chemins, en recommençant dès le début chaque fois qu'une flèche me ramenait au début</em>» (p 1291, Oeuvres II, Bibliothèque de La Pléiade, Gallimard, 2017), nous avons obtenu <span class="nbManieres"></span> manières différentes d'aborder son chef de service pour lui demander une augmentation. On peut en choisir une en indiquant son numéro.</p>
<p>On peut en obtenir des variantes en fonction des paramètres suivants: temps de verbe pour le récit, le niveau de politesse pour le protagoniste et le sexe/genre des personnages. Le texte généré ne cherche pas à reproduire le texte de Perec, c'est plutôt une démonstration des variantes de phrases générées par <a href="https://github.com/rali-udem/jsRealB">jsRealB</a>.</p>
<p>Les états, les alternatives et les flèches choisis apparaissent en bleu. En plaçant le curseur sur un état, le paragraphe correspondant est entouré dans le texte. De manière symétrique en plaçant le curseur sur un paragraphe l'état correspondant est entouré dans l'organigramme.</p>
<p>En cliquant le bouton <code>À ma manière</code>, on peut construire un texte en choisissant progressivement les alternatives qui apparaissent en vert jusqu'à revenir au début. Le numéro de chemin est alors ignoré, les autres indicateurs restent actifs et modifient le texte généré.</p>
<p><a href="Explications.html" target="_blank">Plus d'informations sur la création de cette page.</a></p>
</div>
<div>
<fieldset>
<legend>Chemin</legend>
<label for="noChemin">Numéro</label>
<input type="number" name="noChemin" value="1" id="noChemin" min="1" max="10"/>
<input type="button" name="a_ma_maniere" value="À ma manière" id="a_ma_maniere">
<select name="temps" id="temps" size="1">
<option value="pc">passé composé</option>
<option value="i">imparfait</option>
<option value="p" selected>présent</option>
<option value="f">futur</option>
</select>
</fieldset>
<fieldset id="protagoniste" class="">
<legend>Protagoniste</legend>
<select name="style" id="style" size="1">
<option value="vous" selected>Vouvoiement</option>
<option value="tu">Tutoiement</option>
</select>
<select name="sexeProtagoniste" id="sexeProtagoniste" size="1">
<option value="m" selected>Homme</option>
<option value="f">Femme</option>
</select>
</fieldset>
<fieldset id="chef">
<legend>X - Chef</legend>
<select name="sexeChef" id="sexeChef" size="1">
<option value="m" selected>Homme</option>
<option value="f">Femme</option>
</select>
</fieldset>
<fieldset id="collegue">
<legend>Y - Collègue</legend>
<select name="sexeCollegue" id="sexeCollegue" size="1">
<option value="m">Homme</option>
<option value="f" selected>Femme</option>
</select>
</fieldset>
</div>
<svg xmlns="http://www.w3.org/2000/svg" id="organigramme">
<defs>
<marker id="arrow" markerWidth="6" markerHeight="6" refX="6" refY="3"
orient="auto" markerUnits="userSpaceOnUse" >
<path d="M0,0 L0,6 L6,3 z" fill="black"/>
</marker>
<marker id="blue-arrow" markerWidth="6" markerHeight="6" refX="6" refY="3"
orient="auto" markerUnits="userSpaceOnUse" >
<path d="M0,0 L0,6 L6,3 z" fill="blue"/>
</marker>
</defs>
</svg>
<div id="realisation"></div>
<p id="legende">Organigramme proposé à Perec en 1968 par Jacques Perriault, chargé de recherches au <em>Centre de calcul</em> de la <em>Maison des sciences de l'homme</em>.<br/>
<a href="perec-flowchart.jpg" target="_blank">Organigramme original.</a>
</p>
<p><a href="mailto:[email protected]">Guy Lapalme</a></p>
</body>
</html>