This repository has been archived by the owner on Jan 21, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
227 lines (226 loc) · 14.7 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La mobilité sur le territoire - Codecom des Portes de Meuse</title>
<meta name="Description" content="Questionnaire visant à recueillir les besoins de la mobilité des habitants du territoire Portes de Meuse">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body class="bg-light">
<div class="container">
<h1 class="text-center my-4">Questionnaire visant à recueillir les besoins de mobilité du territoire Portes de Meuse</h1>
<div class="row">
<div class="col text-center"><img src="img/ARS_LOGOS_RVB_GrandEst-02_o.png" class="" alt="Agence Régionale de Santé"></div>
<div class="col text-center"><img src="img/logo-pdm-100.png" class="" alt="Portes de Meuse"></div>
</div>
<div class="card mb-2" id="context">
<div class="card-body">
<h5 class="card-title">Contexte</h5>
<p class="card-text">Une réflexion sur la mobilité est menée sur la Communauté de Communes des Portes de Meuse, dans le cadre du Contrat Local de Santé, visant à améliorer la qualité de vie des habitants. Ce questionnaire vous est adressé
afin de recueillir vos besoins et contribuer à la réflexion afin d’apporter des réponses adaptées.</p>
<a href="#form" class="btn btn-primary">Commencer</a>
</div>
</div>
<div class="card mb-2" id="form">
<form action="submit.php" method="post">
<div class="card-header text-center">
Formulaire de réponse
</div>
<div class="card-body">
<h5 class="card-title">Dans quelle commune habitez-vous ?</h5>
<div class="form-group">
<label for="citySelect">Ma commune</label>
<select name="city" id="citySelect" class="form-control" required>
<option value="" class="text-muted" selected>Selectionnez votre commune</option>
<option name="Abainville">Abainville</option>
<option name="Amanty">Amanty</option>
<option name="Ancerville">Ancerville</option>
<option name="Aulnois en perthois">Aulnois en perthois</option>
<option name="Bazincourt sur saulx">Bazincourt sur saulx</option>
<option name="Biencourt sur saulx">Biencourt sur saulx</option>
<option name="Bonnet">Bonnet</option>
<option name="Brauvilliers">Brauvilliers</option>
<option name="Brillon en barrois">Brillon en barrois</option>
<option name="Bure">Bure</option>
<option name="Chassey-Beaupré">Chassey-Beaupré</option>
<option name="Cousances les forges">Cousances les forges</option>
<option name="Couvertpuis">Couvertpuis</option>
<option name="Dainville-Bertheleville">Dainville-Bertheleville</option>
<option name="Dammarie sur saulx">Dammarie sur saulx</option>
<option name="Delouze-Rosieres">Delouze-Rosieres</option>
<option name="Damange-Aux-Eaux">Damange-Aux-Eaux</option>
<option name="Fouchères aux bois">Fouchères aux bois</option>
<option name="Gondrecourt-Le-Chateau">Gondrecourt-Le-Chateau</option>
<option name="Haironville">Haironville</option>
<option name="Horville-En-Ornois">Horville-En-Ornois</option>
<option name="Houdelaincourt">Houdelaincourt</option>
<option name="Hévilliers">Hévilliers</option>
<option name="Juvigny en perthois">Juvigny en perthois</option>
<option name="Lavincourt">Lavincourt</option>
<option name="Le bouchon sur saulx">Le bouchon sur saulx</option>
<option name="Les roises">Les roises</option>
<option name="Lisle en rigault">Lisle en rigault</option>
<option name="Mandres en barrois">Mandres en barrois</option>
<option name="Maulan">Maulan</option>
<option name="Mauvages">Mauvages</option>
<option name="Montiers sur saulx">Montiers sur saulx</option>
<option name="Montplone">Montplone</option>
<option name="Morley">Morley</option>
<option name="Ménil sur saulx">Ménil sur saulx</option>
<option name="Nant le petit">Nant le petit</option>
<option name="Ribeaucourt">Ribeaucourt</option>
<option name="Rupt aux nonains">Rupt aux nonains</option>
<option name="Saint-Joire">Saint-Joire</option>
<option name="Savonnières-en-perthois">Savonnières-en-perthois</option>
<option name="Saudrupt">Saudrupt</option>
<option name="Stainville">Stainville</option>
<option name="Sommelone">Sommelone</option>
<option name="Vaudeville-Le-Haut">Vaudeville-Le-Haut</option>
<option name="Tréveray">Tréveray</option>
<option name="Villers le sec">Villers le sec</option>
<option name="Ville sur saulx">Ville sur saulx</option>
<option name="Vouthon-Bas">Vouthon-Bas</option>
<option name="Vouthon-Haut">Vouthon-Haut</option>
</select>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Dans quelle tranche d'âge vous trouvez-vous ?</h5>
<div class="form-group">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="ageRadio" id="ageRadio1" value="1" required>
<label for="ageRadio1" class="form-check-label">Moins de 25 ans</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="ageRadio" id="ageRadio2" value="2" required>
<label for="ageRadio2" class="form-check-label">Entre 25 et 40 ans</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="ageRadio" id="ageRadio3" value="3" required>
<label for="ageRadio3" class="form-check-label">Entre 40 et 60 ans</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="ageRadio" id="ageRadio4" value="4" required>
<label for="ageRadio4" class="form-check-label">Plus de 60 ans</label>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Vos besoins en termes de mobilité</h5>
<div class="list-group list-group-flush">
<div class="list-group-item">
<h6 class="card-subtitle mb-2 text-muted mt-2">L'accès aux sevices de santé et aux soins</h6>
<div class="form-group">
<label for="healthSectors">Vers quels secteurs vous rendez-vous pour accéder aux services de santé et de soins ?</label>
<input type="text" class="form-control" name="healthSectors" id="healthSectors" required>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="hasHealthSectorsProblems" id="hasHealthSectorsProblems">
<label class="form-check-label" for="hasHealthSectorsProblems">Avez-vous des difficultés pour vous y rendre ?</label>
</div>
<div class="form-group">
<label for="healthSectorsProblems">Si oui, lequelles et vers quels secteurs ?</label>
<textarea class="form-control" id="healthSectorsProblems" name="healthSectorsProblems" rows="3"></textarea>
</div>
</div>
<div class="list-group-item">
<h6 class="card-subtitle mb-2 text-muted mt-2">L'accès aux services publics</h6>
<div class="form-group">
<label for="publicSectors">Vers quels secteurs vous rendez-vous pour accéder aux services publics ?</label>
<input type="text" class="form-control" name="publicSectors" id="publicSectors" required>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="hasPublicSectorsProblems" id="hasPublicSectorsProblems">
<label class="form-check-label" for="hasPublicSectorsProblems">Avez-vous des difficultés pour vous y rendre ?</label>
</div>
<div class="form-group">
<label for="publicSectorsProblems">Si oui, lequelles et vers quels services ?</label>
<textarea class="form-control" id="publicSectorsProblems" name="publicSectorsProblems" rows="3"></textarea>
</div>
</div>
<div class="list-group-item">
<h6 class="card-subtitle mb-2 text-muted mt-2">L'accès aux commerces</h6>
<div class="form-group">
<label for="shopsSectors">Vers quels secteurs vous rendez-vous pour accéder aux commerces ?</label>
<input type="text" class="form-control" name="shopsSectors" id="shopsSectors" required>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="hasShopsSectorsProblems" id="hasShopsSectorsProblems">
<label class="form-check-label" for="hasShopsSectorsProblems">Avez-vous des difficultés pour vous y rendre ?</label>
</div>
<div class="form-group">
<label for="shopsSectorsProblems">Si oui, lequelles et vers quelles localitées ?</label>
<textarea class="form-control" id="shopsSectorsProblems" name="shopsSectorsProblems" rows="3"></textarea>
</div>
</div>
<div class="list-group-item">
<h6 class="card-subtitle mb-2 text-muted mt-2">L'accès aux loisirs, aux activités sportives et culturelles</h6>
<div class="form-group">
<label for="hobbiesSectors">Vers quels secteurs vous rendez-vous pour accéder aux loisirs, aux activités sportives et culturelles ?</label>
<input type="text" class="form-control" name="hobbiesSectors" id="hobbiesSectors" required>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="hasHobbiesSectorsProblems" id="hasHobbiesSectorsProblems">
<label class="form-check-label" for="hasHobbiesSectorsProblems">Avez-vous des difficultés pour vous y rendre ?</label>
</div>
<div class="form-group">
<label for="hobbiesSectorsProblems">Si oui, lequelles et vers quelles localitées ?</label>
<textarea class="form-control" id="hobbiesSectorsProblems" name="hobbiesSectorsProblems" rows="3"></textarea>
</div>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Mise en place d'un transport sur le territoire</h5>
<label for="publicTransportUseful">Selon vous, la création d'un service de transport régulier sur votre territoire serait-il utile ?</label>
<div class="form-group" id="publicTransportUseful">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="publicTransportUseful" id="publicTransportUseful0" value="1" required onchange="publicTransportEnable(true)">
<label for="publicTransportUseful0" class="form-check-label">Oui</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="publicTransportUseful" id="publicTransportUseful1" value="0" required onchange="publicTransportEnable(false)" checked>
<label for="publicTransportUseful1" class="form-check-label">Non</label>
</div>
</div>
<label for="publicTransportRate">Si oui, à quelle fréquence ?</label>
<div class="form-group" id="publicTransportRate">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="publicTransportRate" id="publicTransportRate1" value="1" required disabled>
<label for="publicTransportRate1" class="form-check-label">Hebdomadaire</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="publicTransportRate" id="publicTransportRate2" value="2" required disabled>
<label for="publicTransportRate2" class="form-check-label">Quinzaine</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="publicTransportRate" id="publicTransportRate3" value="3" required disabled>
<label for="publicTransportRate3" class="form-check-label">Mensuelle</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="publicTransportRate" id="publicTransportRate4" value="4" required disabled>
<label for="publicTransportRate4" class="form-check-label">Trimestrielle</label>
</div>
</div>
<div class="form-group">
<label for="otherTransports">Quels autres moyens de transport seraient utiles ?</label>
<input type="text" class="form-control" name="otherTransports" id="otherTransports" requried disabled>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Envoyer</button>
</div>
</form>
</div>
<p class="text-right">Merci pour votre participation!</p>
</div>
<script type="text/javascript">
const publicTransportEnable = (val) => document.querySelectorAll('[name="publicTransportRate"], #otherTransports').forEach(item => item.disabled = !val)
const onLoad = () => {
console.log('windowLoad')
}
window.onload = onLoad
</script>
</body>
</html>