1
+ <!DOCTYPE html>
2
+ < html >
3
+ < head >
4
+ < title > AC joint injury symptoms</ title >
5
+ < meta charset ="utf-8 ">
6
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7
+ <!-- <link rel="stylesheet" type="text/css" href="assets/css/common.css"> -->
8
+ < link rel ="stylesheet " type ="text/css " href ="assets/css/ac-joint-injury-symptoms.css ">
9
+ < link href ='https://fonts.googleapis.com/css?family=Poppins ' rel ='stylesheet '>
10
+
11
+ </ head >
12
+ < body >
13
+ <!-- header section start -->
14
+ < header >
15
+ < div class ="header_top ">
16
+ < img class ="back " src ="assets/images/back.png ">
17
+ < p > Health Check Questionnaire</ p >
18
+ < img class ="close " src ="assets/images/close.png ">
19
+ </ div >
20
+ < div class ="header_footer ">
21
+ < div class ="real_or "> </ div >
22
+ </ div >
23
+ </ header >
24
+
25
+ <!-- main section -->
26
+ < main class ="main container ">
27
+ < div class ="main_content ">
28
+ < div class ="question_content ">
29
+ < div class ="flex-1 ">
30
+ < div >
31
+ < p > Do you feel any limitation of motion in the shoulder?</ p >
32
+ < p > Select the one that most applies.</ p >
33
+ </ div >
34
+ < div >
35
+ < div class ="grid-4 ">
36
+ < div >
37
+ < div class ="q1_item ">
38
+ < img src ="assets/images/q31.png ">
39
+ < p > Yes</ p >
40
+ </ div >
41
+ </ div >
42
+ < div >
43
+ < div class ="q1_item ">
44
+ < img src ="assets/images/q32.png ">
45
+ < p > No</ p >
46
+ </ div >
47
+ </ div >
48
+ < div >
49
+ < div class ="q1_item ">
50
+ < img src ="assets/images/q33.png ">
51
+ < p > Not Sure</ p >
52
+ </ div >
53
+ </ div >
54
+ </ div >
55
+ </ div >
56
+ </ div >
57
+ </ div >
58
+ < div class ="question_content ">
59
+ < div class ="flex-1 ">
60
+ < div >
61
+ < p > Do you feel like your shoulder is swollen?</ p >
62
+ < p > Select the one that most applies.</ p >
63
+ </ div >
64
+ < div >
65
+ < div class ="grid-4 ">
66
+ < div >
67
+ < div class ="q2_item ">
68
+ < img src ="assets/images/q31.png ">
69
+ < p > Yes</ p >
70
+ </ div >
71
+ </ div >
72
+ < div >
73
+ < div class ="q2_item ">
74
+ < img src ="assets/images/q32.png ">
75
+ < p > No</ p >
76
+ </ div >
77
+ </ div >
78
+ < div >
79
+ < div class ="q2_item ">
80
+ < img src ="assets/images/q33.png ">
81
+ < p > Not Sure</ p >
82
+ </ div >
83
+ </ div >
84
+ </ div >
85
+ </ div >
86
+ </ div >
87
+ </ div >
88
+ < div class ="question_content ">
89
+ < div class ="flex-1 ">
90
+ < div >
91
+ < p > Can you see any bruises on the skin?</ p >
92
+ < p > Select the one that most applies.</ p >
93
+ </ div >
94
+ < div >
95
+ < div class ="grid-4 ">
96
+ < div >
97
+ < div class ="q3_item ">
98
+ < img src ="assets/images/q31.png ">
99
+ < p > Yes</ p >
100
+ </ div >
101
+ </ div >
102
+ < div >
103
+ < div class ="q3_item ">
104
+ < img src ="assets/images/q32.png ">
105
+ < p > No</ p >
106
+ </ div >
107
+ </ div >
108
+ < div >
109
+ < div class ="q3_item ">
110
+ < img src ="assets/images/q33.png ">
111
+ < p > Not Sure</ p >
112
+ </ div >
113
+ </ div >
114
+ </ div >
115
+ </ div >
116
+ </ div >
117
+ </ div >
118
+ < div class ="question_content ">
119
+ < div class ="flex-1 ">
120
+ < div >
121
+ < p > Do you feel any tenderness at the top of the shoulder?</ p >
122
+ < p > Select the one that most applies.</ p >
123
+ </ div >
124
+ < div >
125
+ < div class ="grid-4 ">
126
+ < div >
127
+ < div class ="q4_item ">
128
+ < img src ="assets/images/q31.png ">
129
+ < p > Yes</ p >
130
+ </ div >
131
+ </ div >
132
+ < div >
133
+ < div class ="q4_item ">
134
+ < img src ="assets/images/q32.png ">
135
+ < p > No</ p >
136
+ </ div >
137
+ </ div >
138
+ < div >
139
+ < div class ="q4_item ">
140
+ < img src ="assets/images/q33.png ">
141
+ < p > Not Sure</ p >
142
+ </ div >
143
+ </ div >
144
+ </ div >
145
+ </ div >
146
+ </ div >
147
+ </ div >
148
+ </ div >
149
+ </ main >
150
+ < footer class ="fixed-bottom ">
151
+ < div class ="main_btn ">
152
+ < button id ="q_back " class ="q_back " onclick ="plusSlides(-1) "> Back</ button >
153
+ < button id ="q_next " class ="q_next " onclick ="plusSlides(1) " disabled > Next</ button >
154
+ </ div >
155
+ </ footer >
156
+ </ body >
157
+ < script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "> </ script >
158
+ < script >
159
+ var q_back = document . getElementById ( "q_back" ) ;
160
+ var q_next = document . getElementById ( "q_next" ) ;
161
+ //question1
162
+ var q1_items = document . getElementsByClassName ( "q1_item" ) ;
163
+ for ( var i = 0 ; i < q1_items . length ; i ++ ) {
164
+ q1_items [ i ] . addEventListener ( "click" , function ( ) {
165
+ for ( var j = 0 ; j < q1_items . length ; j ++ ) {
166
+ q1_items [ j ] . classList . remove ( "q1_item_active" ) ;
167
+ }
168
+ this . classList . add ( "q1_item_active" ) ;
169
+ q_next . disabled = false ;
170
+ } ) ;
171
+ }
172
+
173
+ //question2
174
+ var q2_items = document . getElementsByClassName ( "q2_item" ) ;
175
+ for ( var i = 0 ; i < q2_items . length ; i ++ ) {
176
+ q2_items [ i ] . addEventListener ( "click" , function ( ) {
177
+ for ( var j = 0 ; j < q2_items . length ; j ++ ) {
178
+ q2_items [ j ] . classList . remove ( "q2_item_active" ) ;
179
+ }
180
+ this . classList . add ( "q2_item_active" ) ;
181
+ q_next . disabled = false ;
182
+ } ) ;
183
+ }
184
+
185
+ //question3
186
+ var q3_items = document . getElementsByClassName ( "q3_item" ) ;
187
+ for ( var i = 0 ; i < q3_items . length ; i ++ ) {
188
+ q3_items [ i ] . addEventListener ( "click" , function ( ) {
189
+ for ( var j = 0 ; j < q3_items . length ; j ++ ) {
190
+ q3_items [ j ] . classList . remove ( "q3_item_active" ) ;
191
+ }
192
+ this . classList . add ( "q3_item_active" ) ;
193
+ q_next . disabled = false ;
194
+ } ) ;
195
+ }
196
+
197
+ //question4
198
+ var q4_items = document . getElementsByClassName ( "q4_item" ) ;
199
+ for ( var i = 0 ; i < q4_items . length ; i ++ ) {
200
+ q4_items [ i ] . addEventListener ( "click" , function ( ) {
201
+ for ( var j = 0 ; j < q4_items . length ; j ++ ) {
202
+ q4_items [ j ] . classList . remove ( "q4_item_active" ) ;
203
+ }
204
+ this . classList . add ( "q4_item_active" ) ;
205
+ q_next . disabled = false ;
206
+ } ) ;
207
+ }
208
+
209
+ /* Next & previous buttons */
210
+ var slideIndex = 1 ;
211
+ showSlides ( slideIndex ) ;
212
+
213
+ function plusSlides ( n ) {
214
+ showSlides ( slideIndex += n ) ;
215
+ }
216
+ function showSlides ( n ) {
217
+ var i ;
218
+ var slides = document . getElementsByClassName ( "question_content" ) ;
219
+ if ( n > slides . length ) { slideIndex = 1 }
220
+ if ( n < 1 ) { slideIndex = slides . length }
221
+ for ( i = 0 ; i < slides . length ; i ++ ) {
222
+ slides [ i ] . style . display = "none" ;
223
+ slides [ i ] . classList . remove ( "fade" ) ;
224
+ }
225
+ slides [ slideIndex - 1 ] . style . display = "block" ;
226
+ slides [ slideIndex - 1 ] . classList . add ( "fade" ) ;
227
+ }
228
+ /* disabling Next button */
229
+ q_next . addEventListener ( "click" , function ( ) {
230
+ if ( this . disabled === false ) {
231
+ this . disabled = true ;
232
+ }
233
+ } ) ;
234
+ /* enabling Next button */
235
+ q_back . addEventListener ( "click" , function ( ) {
236
+ if ( q_next . disabled === true ) {
237
+ q_next . disabled = false ;
238
+ }
239
+ } ) ;
240
+ </ script >
241
+ </ html >
0 commit comments