-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathquizz.php
212 lines (142 loc) · 9.91 KB
/
quizz.php
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
<?php
session_start();
$pageName='QUIZZ';
include_once 'isAuthentificated.php';
include_once 'assets/bootstrapAsset.php';
include_once 'assets/mainHead.php'
?>
<body>
<?php include_once 'navbarCo.php' ;?>
<div class="quizz__container">
<div class="progress__container">
<h4>Début</h4>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
<h4>Fin</h4>
</div>
<div class="quizz__layout">
<div class="wrapper introduce">
<h2>Outil d’évaluation des symptômes</h2>
<img src="images/quizz.png" alt="">
<p>La maladie coeliaque est une maladie génétique auto-immune dans laquelle la consommation de gluten (une protéine présente dans le blé, le seigle et l’orge) cause des dommages à l’intestin grêle.Si vous avez des symptômes inexpliqués ou si vous avez un membre de votre famille atteint de la maladie coeliaque, complétez l’outil d’évaluation des symptômes pour voir si vous avez un risque accru de maladie coeliaque.</p>
<button class="btn btn3" id="startBtn" >COMMENCER<i id="right" class="fas fa-arrow-alt-circle-right"></i></button>
</div>
<div id="question1" class="wrapper question hidden">
<h2>Membres de la famille<img src="icons/family.png" alt=""></h2>
<p>Avez-vous un membre directe de la famille (parent, frère ou sœur, enfant) atteint de la maladie coeliaque?</p>
<div class="answers one__choice--question" >
<button id="answerBtn" class="answerBtn">OUI</button>
<button id="answerBtn" class="answerBtn">NON</button>
</div>
<button class="btn btn3" disabled='disabled' style="cursor:not-allowed" id="nextQuestionBtn">Question Suivante<i id="right" class="fas fa-arrow-alt-circle-right"></i></button>
<button class="btn btn3" id="previousQuestionBtn" ><i id="left" class="fas fa-arrow-alt-circle-left"></i>Retour</button>
</div>
<div id="question2" class="wrapper question hidden">
<h2>Régime Alimentaire<img src="icons/diet.png" alt=""></h2>
<p>Suivez-vous un régime strict sans gluten (pas d’ingestion de blé, de seigle ou d’orge)?</p>
<div class="answers one__choice--question" >
<button id="answerBtn" class="answerBtn">OUI</button>
<button id="answerBtn" class="answerBtn">NON</button>
</div>
<button class="btn btn3" disabled="disabled" style="cursor:not-allowed" id="nextQuestionBtn">Question Suivante<i id="right" class="fas fa-arrow-alt-circle-right"></i></button>
<button class="btn btn3" id="previousQuestionBtn" ><i id="left" class="fas fa-arrow-alt-circle-left"></i>Question Précédente</button>
</div>
<div id="question3" class="wrapper question hidden">
<h2>Symptomes générales<img src="icons/symptoms.png" alt=""></h2>
<p>Veuillez sélectionner les conditions.</p>
<div class="answers" >
<button id="answerBtn" class="answerBtn valid">Anémie Inéxpliquée</button>
<button id="answerBtn" class="answerBtn valid">Malnutrition ou carence de vitamine</button>
<button id="answerBtn" class="answerBtn valid">Fatigue ou syndrome de fatigue chronique</button>
<button id="answerBtn" class="answerBtn valid" >Carence en IgA</button>
<button id="answerBtn" class="answerBtn none__btn">Rien de ce qui précède</button>
</div>
<button class="btn btn3" id="nextQuestionBtn" style="cursor:not-allowed" disabled='disabled'>Question Suivante<i id="right" class="fas fa-arrow-alt-circle-right"></i></button>
<button class="btn btn3" id="previousQuestionBtn" ><i id="left" class="fas fa-arrow-alt-circle-left"></i>Question Précédente</button>
</div>
<div id="question4" class="wrapper question hidden">
<h2>Conditions gastro-intestinales<img src="icons/stomach.png" alt=""></h2>
<p>Veuillez sélectionner les conditions.</p>
<div class="answers" >
<button id="answerBtn" class="answerBtn valid">Doubleurs Abdominales</button>
<button id="answerBtn" class="answerBtn valid">Ballonnements</button>
<button id="answerBtn" class="answerBtn valid">Intolérance au lactose</button>
<button id="answerBtn" class="answerBtn valid">Constipation</button>
<button id="answerBtn" class="answerBtn none__btn">Rien de ce qui précède</button>
</div>
<button class="btn btn3" id="nextQuestionBtn" style="cursor:not-allowed" disabled='disabled'>Question Suivante<i id="right" class="fas fa-arrow-alt-circle-right"></i></button>
<button class="btn btn3" id="previousQuestionBtn" ><i id="left" class="fas fa-arrow-alt-circle-left"></i>Question Précédente</button>
</div>
<div id="question5" class="wrapper question hidden">
<h2>Conditions squelettiques musculaires<img src="icons/x-ray.png" alt=""></h2>
<p>Veuillez sélectionner toutes les conditions</p>
<div class="answers " >
<button id="answerBtn " class="answerBtn valid">Ostéopénie ou ostéoporose</button>
<button id="answerBtn" class="answerBtn valid">Douleurs osseuses ou articulaires </button>
<button id="answerBtn" class="answerBtn valid">Engourdissement ou douleur dans les mains et les pieds (neuropathie périphérique)</button>
<button id="answerBtn" class="answerBtn none__btn">Rien de ce qui précède</button>
</div>
<button class="btn btn3" id="nextQuestionBtn" style="cursor:not-allowed" disabled='disabled'>Question Suivante<i id="right" class="fas fa-arrow-alt-circle-right"></i></button>
<button class="btn btn3" id="previousQuestionBtn" ><i id="left" class="fas fa-arrow-alt-circle-left"></i>Question Précédente</button>
</div>
<div id="question6" class="wrapper question hidden">
<h2>Troubles de reproduction<img src="icons/pregnant.png" alt=""></h2>
<p>Veuillez sélectionner toutes les conditions</p>
<div class="answers " >
<button id="answerBtn" class="answerBtn valid">Infertilité</button>
<button id="answerBtn" class="answerBtn valid">Fausses couches</button>
<button id="answerBtn" class="answerBtn valid">Irrégularités menstruelles</button>
<button id="answerBtn" class="answerBtn none__btn">Rien de ce qui précède</button>
</div>
<button class="btn btn3" id="nextQuestionBtn" style="cursor:not-allowed" disabled='disabled'>Question Suivante<i id="right" class="fas fa-arrow-alt-circle-right"></i></button>
<button class="btn btn3" id="previousQuestionBtn" ><i id="left" class="fas fa-arrow-alt-circle-left"></i>Question Précédente</button>
</div>
<div id="question7" class="wrapper question hidden">
<h2>Symptomes Cutanées et Dentaires<img src="icons/dental-care.png" alt=""></h2>
<p>sélectionner toutes les conditions</p>
<div class="answers" >
<button id="answerBtn " class="answerBtn valid">Dents décolorées ou perte d’émail</button>
<button id="answerBtn" class="answerBtn valid">Éruption cutanée démangeaisons (herpétiformie de la dermatite)</button>
<button id="answerBtn" class="answerBtn none__btn">Rien de ce qui précède</button>
</div>
<button class="btn btn3" id="nextQuestionBtn" style="cursor:not-allowed" disabled='disabled'>Question Suivante<i id="right" class="fas fa-arrow-alt-circle-right"></i></button>
<button class="btn btn3" id="previousQuestionBtn" ><i id="left" class="fas fa-arrow-alt-circle-left"></i>Question Précédente</button>
</div>
<div id="question8" class="wrapper question hidden">
<h2>Symptomes du système nerveux<img src="icons/brain.png" alt=""></h2>
<p>sélectionner toutes les conditions</p>
<div class="answers" >
<button id="answerBtn" class="answerBtn valid">Dépression</button>
<button id="answerBtn" class="answerBtn valid">Maux de tête ou migraine</button>
<button id="answerBtn" class="answerBtn valid">Brouillard de cerveau ou esprit brumeux</button>
<button id="answerBtn" class="answerBtn valid">TDAH</button>
<button id="answerBtn" class="answerBtn none__btn">Rien de ce qui précède</button>
</div>
<button class="btn btn3" id="nextQuestionBtn" style="cursor:not-allowed" disabled='disabled'>Résultat<i id="right" class="fas fa-arrow-alt-circle-right"></i></button>
<button class="btn btn3" id="previousQuestionBtn" ><i id="left" class="fas fa-arrow-alt-circle-left"></i>Question Précédente</button>
</div>
<div id="result" class="wrapper question result hidden">
<h2>Merci d’avoir terminé l’outil d’évaluation des symptômes</h2>
<div class="result__header">
<img src="" alt="">
<h4>
</h4>
</div>
<div class="result__content">
<p>
</p>
<a href="" class="btn btn3"></a>
</div>
</div>
</div>
</div>
<?php include_once('footer.php'); ?>
<?php include_once 'assets/scripts.php' ?>
<script src="js/quizzScript.js"></script>
<script src="js/main.js"></script>
<script type="js/scrollUpBtn.js"></script>
<script src="js/testnav.js"></script>
</body>
<html>