Browse Source

First commit

Victor Hernandez 3 years ago
commit
e24c9e7c11
100 changed files with 7049 additions and 0 deletions
  1. 29
    0
      card.html
  2. 764
    0
      css/style.css
  3. 2
    0
      css/style.min.css
  4. 39
    0
      error.php
  5. 10
    0
      footer.php
  6. 141
    0
      funciones.php
  7. 117
    0
      header.php
  8. 374
    0
      home.php
  9. BIN
      img/.DS_Store
  10. BIN
      img/CDCC.png
  11. BIN
      img/EMA-banner1.png
  12. BIN
      img/EMA-banner2.png
  13. BIN
      img/andrew-neel-cckf4TsHAuw-unsplash.jpeg
  14. BIN
      img/carlos.jpg
  15. BIN
      img/carlos_original.jpg
  16. BIN
      img/coralys.jpg
  17. BIN
      img/coralys_original.jpg
  18. BIN
      img/cytonn-photography-GJao3ZTX9gU-unsplash.jpeg
  19. 6
    0
      img/google.svg
  20. BIN
      img/hector.jpg
  21. BIN
      img/hector_original.jpg
  22. BIN
      img/ivonne.png
  23. BIN
      img/juan.png
  24. BIN
      img/juan_original.png
  25. BIN
      img/pen_1024x1024.png
  26. BIN
      img/pen_800x800.png
  27. BIN
      img/tatiana.jpg
  28. BIN
      img/tatiana_original.jpg
  29. BIN
      img/victor.jpg
  30. 105
    0
      index.php
  31. 51
    0
      js/editQuestion.js
  32. 172
    0
      js/handleSubmit.js
  33. 77
    0
      js/home.js
  34. 39
    0
      js/index.js
  35. 146
    0
      js/main.js
  36. BIN
      js/nameOfTheQuestionnair.xlsx
  37. 242
    0
      js/viewExperience.js
  38. 5
    0
      js/viewMoment.js
  39. 5
    0
      js/viewQuestionnaire.js
  40. BIN
      nameOfTheQuestionnair.xlsx
  41. 342
    0
      old_code/bankOfQuestions.php
  42. 240
    0
      old_code/categories.php
  43. 6
    0
      old_code/conection.php
  44. 37
    0
      old_code/deleteQuestion.php
  45. 30
    0
      old_code/deleteQuestionQuestionnaire.php
  46. 37
    0
      old_code/deleteQuestionnaire.php
  47. 30
    0
      old_code/deleteQuestionnaireExperience.php
  48. 98
    0
      old_code/editExperience.php
  49. 59
    0
      old_code/insertQuestionnaire.php
  50. 32
    0
      old_code/insertQuestionnaireExperience.php
  51. 116
    0
      old_code/newExperience.php
  52. 59
    0
      old_code/subquestionnaires.php
  53. 57
    0
      old_code/updateQuestionnaire.php
  54. 145
    0
      old_code/viewQuestionnaireExperience.php
  55. 67
    0
      processes/addExistingQuestionToMoment.php
  56. 122
    0
      processes/callback.php
  57. 13
    0
      processes/checkLogin.php
  58. 20
    0
      processes/config.php
  59. 25
    0
      processes/dbh.inc.php
  60. 102
    0
      processes/deleteExperience.php
  61. 68
    0
      processes/deleteMoment.php
  62. 77
    0
      processes/deleteQuestion.php
  63. 110
    0
      processes/deleteQuestionnaire.php
  64. 118
    0
      processes/duplicateQuestionnaire.php
  65. 77
    0
      processes/export.php
  66. 20
    0
      processes/fullcalendar/LICENSE.txt
  67. 10
    0
      processes/fullcalendar/README.md
  68. 109
    0
      processes/fullcalendar/examples/background-events.html
  69. 109
    0
      processes/fullcalendar/examples/daygrid-views.html
  70. 75
    0
      processes/fullcalendar/examples/external-dragging-2cals.html
  71. 149
    0
      processes/fullcalendar/examples/external-dragging-builtin.html
  72. 129
    0
      processes/fullcalendar/examples/full-height.html
  73. 86
    0
      processes/fullcalendar/examples/google-calendar.html
  74. 141
    0
      processes/fullcalendar/examples/js/theme-chooser.js
  75. 93
    0
      processes/fullcalendar/examples/json.html
  76. 56
    0
      processes/fullcalendar/examples/json/events.json
  77. 118
    0
      processes/fullcalendar/examples/list-views.html
  78. 152
    0
      processes/fullcalendar/examples/locales.html
  79. 103
    0
      processes/fullcalendar/examples/month-view.html
  80. 50
    0
      processes/fullcalendar/examples/php/get-events.php
  81. 9
    0
      processes/fullcalendar/examples/php/get-time-zones.php
  82. 130
    0
      processes/fullcalendar/examples/php/utils.php
  83. 73
    0
      processes/fullcalendar/examples/rrule.html
  84. 125
    0
      processes/fullcalendar/examples/selectable.html
  85. 215
    0
      processes/fullcalendar/examples/theming.html
  86. 145
    0
      processes/fullcalendar/examples/time-zones.html
  87. 113
    0
      processes/fullcalendar/examples/timegrid-views.html
  88. 118
    0
      processes/fullcalendar/examples/week-numbers.html
  89. BIN
      processes/fullcalendar/fullcalendar-4.3.1.zip
  90. 20
    0
      processes/fullcalendar/packages/bootstrap/LICENSE.txt
  91. 8
    0
      processes/fullcalendar/packages/bootstrap/README.md
  92. 36
    0
      processes/fullcalendar/packages/bootstrap/main.css
  93. 12
    0
      processes/fullcalendar/packages/bootstrap/main.d.ts
  94. 83
    0
      processes/fullcalendar/packages/bootstrap/main.esm.js
  95. 91
    0
      processes/fullcalendar/packages/bootstrap/main.js
  96. 1
    0
      processes/fullcalendar/packages/bootstrap/main.min.css
  97. 6
    0
      processes/fullcalendar/packages/bootstrap/main.min.js
  98. 33
    0
      processes/fullcalendar/packages/bootstrap/package.json
  99. 20
    0
      processes/fullcalendar/packages/core/LICENSE.txt
  100. 0
    0
      processes/fullcalendar/packages/core/README.md

+ 29
- 0
card.html View File

@@ -0,0 +1,29 @@
1
+
2
+    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
3
+  					
4
+  			<br><br><br>		
5
+  			
6
+  			<div class="row">
7
+  				<div class="col-sm-offset-1 col-sm-3">
8
+  					
9
+					<div class="row">
10
+						<div class="col">
11
+							<div class="thumbnail">
12
+								<div class="caption">
13
+									<h4 class="pannel-heading text-center">Tips on Milestones</h4>
14
+									<hr>
15
+									<ul>
16
+										<li>These are the milestones of the students involved in this experience.</li>
17
+										<br>
18
+										<li>Once your moments have been answered you can track the impact these milestones had on the students' answers, if any.</li>
19
+										<br>
20
+										<li>You can create new milestones with the plus button.</li>
21
+									</ul>
22
+								</div>
23
+							</div>
24
+						</div>
25
+					</div>
26
+  						
27
+  				</div><!--col-sm-4-->
28
+  			</div><!--row-->
29
+			

+ 764
- 0
css/style.css View File

@@ -0,0 +1,764 @@
1
+@import url(https://fonts.googleapis.com/css?family=Roboto);
2
+/* GLOBALS */
3
+body {
4
+  margin: 0;
5
+  font-family: Avenir, Helvetica, sans-serif;
6
+  line-height: 1.5;
7
+}
8
+
9
+a, a:hover, a:focus, a:active {
10
+  text-decoration: none;
11
+  color: #fff;
12
+}
13
+
14
+.modal {
15
+  overflow-y: auto;
16
+}
17
+
18
+/* HEADER */
19
+#main-header {
20
+  min-height: 8rem;
21
+  display: -webkit-box;
22
+  display: -ms-flexbox;
23
+  display: flex;
24
+  -webkit-box-orient: horizontal;
25
+  -webkit-box-direction: normal;
26
+      -ms-flex-direction: row;
27
+          flex-direction: row;
28
+  -webkit-box-pack: justify;
29
+      -ms-flex-pack: justify;
30
+          justify-content: space-between;
31
+  -webkit-box-align: center;
32
+      -ms-flex-align: center;
33
+          align-items: center;
34
+  position: fixed;
35
+  top: 0;
36
+  left: 0;
37
+  right: 0;
38
+  z-index: 2;
39
+  background: rgba(255, 255, 255, 0.7);
40
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
41
+          box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
42
+  -webkit-backdrop-filter: blur(10px);
43
+          backdrop-filter: blur(10px);
44
+}
45
+
46
+#logo {
47
+  font-size: 1.7em;
48
+  text-decoration: none;
49
+  color: #606060;
50
+  height: initial;
51
+  padding: 0.3em 1em;
52
+  text-align: center;
53
+  display: -webkit-box;
54
+  display: -ms-flexbox;
55
+  display: flex;
56
+  -webkit-box-orient: horizontal;
57
+  -webkit-box-direction: normal;
58
+      -ms-flex-direction: row;
59
+          flex-direction: row;
60
+  -webkit-box-pack: justify;
61
+      -ms-flex-pack: justify;
62
+          justify-content: space-between;
63
+  -webkit-box-align: center;
64
+      -ms-flex-align: center;
65
+          align-items: center;
66
+  width: 155px;
67
+}
68
+
69
+#logo:hover,
70
+#logo:active,
71
+#logo:focus {
72
+  color: #333;
73
+}
74
+
75
+#account {
76
+  padding: 0.3em 1em;
77
+}
78
+
79
+.nav-link {
80
+  font-size: 1.2em;
81
+  padding: calc(1em / 2) 1em;
82
+  text-decoration: none;
83
+  color: #333;
84
+  position: relative;
85
+  -webkit-transition: color 150ms ease-in-out;
86
+  transition: color 150ms ease-in-out;
87
+}
88
+
89
+.nav-link:after {
90
+  content: '';
91
+  position: absolute;
92
+  bottom: 0;
93
+  height: 2px;
94
+  left: 1em;
95
+  right: 1em;
96
+  background-color: #606060;
97
+  -webkit-transform: scaleX(0);
98
+          transform: scaleX(0);
99
+  -webkit-transition: -webkit-transform 150ms ease-in-out;
100
+  transition: -webkit-transform 150ms ease-in-out;
101
+  transition: transform 150ms ease-in-out;
102
+  transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
103
+}
104
+
105
+.nav-link:hover::after,
106
+.nav-link:focus::after,
107
+.nav-link:active::after {
108
+  -webkit-transform: scaleX(1);
109
+          transform: scaleX(1);
110
+}
111
+
112
+.nav-link:hover,
113
+.nav-link:focus,
114
+.nav-link:active {
115
+  color: #606060;
116
+}
117
+
118
+.sign-out {
119
+  padding: 0.5em 1em;
120
+  background-color: #217ce4;
121
+  color: #fff;
122
+  text-decoration: none;
123
+  -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
124
+          box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
125
+  -webkit-transition-property: background-color, -webkit-box-shadow;
126
+  transition-property: background-color, -webkit-box-shadow;
127
+  transition-property: background-color, box-shadow;
128
+  transition-property: background-color, box-shadow, -webkit-box-shadow;
129
+  -webkit-transition-duration: 150ms;
130
+          transition-duration: 150ms;
131
+  -webkit-transition-timing-function: ease-in-out;
132
+          transition-timing-function: ease-in-out;
133
+}
134
+
135
+.sign-out:hover,
136
+.sign-out:focus,
137
+.sign-out:active {
138
+  background-color: #3d88df;
139
+  -webkit-box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
140
+          box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
141
+}
142
+
143
+/* GOOGLE BUTTON */
144
+.google-button {
145
+  height: 40px;
146
+  border-width: 0;
147
+  background: #fff;
148
+  color: #737373;
149
+  border-radius: none;
150
+  white-space: nowrap;
151
+  -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
152
+          box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
153
+  -webkit-transition-property: background-color, -webkit-box-shadow;
154
+  transition-property: background-color, -webkit-box-shadow;
155
+  transition-property: background-color, box-shadow;
156
+  transition-property: background-color, box-shadow, -webkit-box-shadow;
157
+  -webkit-transition-duration: 150ms;
158
+          transition-duration: 150ms;
159
+  -webkit-transition-timing-function: ease-in-out;
160
+          transition-timing-function: ease-in-out;
161
+  display: -webkit-box;
162
+  display: -ms-flexbox;
163
+  display: flex;
164
+  -ms-flex-pack: distribute;
165
+      justify-content: space-around;
166
+  -webkit-box-align: center;
167
+      -ms-flex-align: center;
168
+          align-items: center;
169
+}
170
+
171
+.google-button:focus,
172
+.google-button:hover {
173
+  -webkit-box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
174
+          box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
175
+  cursor: pointer;
176
+}
177
+
178
+.google-button:active {
179
+  background-color: #e5e5e5;
180
+  -webkit-box-shadow: none;
181
+          box-shadow: none;
182
+  -webkit-transition-duration: 10ms;
183
+          transition-duration: 10ms;
184
+}
185
+
186
+.google-button__icon {
187
+  margin: 5px;
188
+  width: 18px;
189
+  height: 18px;
190
+}
191
+
192
+.google-button__text {
193
+  padding: 0 12px;
194
+  font-size: 14px;
195
+  font-family: 'Roboto', Arial, sans-serif;
196
+}
197
+
198
+/* (EXPERIENCES PAGE) MAIN SECTION */
199
+#experience-main {
200
+  background-color: #606060;
201
+  display: -webkit-box;
202
+  display: -ms-flexbox;
203
+  display: flex;
204
+  -webkit-box-orient: vertical;
205
+  -webkit-box-direction: normal;
206
+      -ms-flex-direction: column;
207
+          flex-direction: column;
208
+  min-height: calc(90vh - 8rem - 10vh);
209
+  padding: 3em 5em;
210
+}
211
+
212
+#experience-main h3 {
213
+  color: #606060;
214
+}
215
+
216
+.experience-lead {
217
+  color: #fff;
218
+  font-size: 2em;
219
+  margin: 0 0 2em 0;
220
+  border-bottom: #fff;
221
+  border-bottom-width: 3px;
222
+  border-bottom-style: solid;
223
+}
224
+
225
+#experience-content {
226
+  display: -ms-grid;
227
+  display: grid;
228
+  grid-gap: 2em;
229
+  -ms-grid-columns: 1fr 1fr 1fr;
230
+      grid-template-columns: 1fr 1fr 1fr;
231
+  margin-bottom: 1em;
232
+}
233
+
234
+.grid-box {
235
+  background-color: #fff;
236
+  height: 15em;
237
+  width: 15em;
238
+  border-radius: 15px;
239
+  -webkit-box-shadow: 1px 1px 3px 1px #333;
240
+          box-shadow: 1px 1px 3px 1px #333;
241
+  -ms-grid-column-align: center;
242
+      justify-self: center;
243
+  padding: 3em 2em;
244
+  position: relative;
245
+  -webkit-transition: -webkit-transform 150ms ease-in-out;
246
+  transition: -webkit-transform 150ms ease-in-out;
247
+  transition: transform 150ms ease-in-out;
248
+  transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
249
+  cursor: pointer;
250
+}
251
+
252
+.grid-box .box-title {
253
+  color: #333;
254
+  font-size: 1.5em;
255
+  margin-bottom: 2em;
256
+}
257
+
258
+.grid-box .box-dates {
259
+  display: -webkit-box;
260
+  display: -ms-flexbox;
261
+  display: flex;
262
+  -webkit-box-orient: vertical;
263
+  -webkit-box-direction: normal;
264
+      -ms-flex-direction: column;
265
+          flex-direction: column;
266
+  color: #606060;
267
+  -webkit-box-pack: justify;
268
+      -ms-flex-pack: justify;
269
+          justify-content: space-between;
270
+}
271
+
272
+.grid-box .box-weeks {
273
+  color: #606060;
274
+}
275
+
276
+.grid-box .box-edit {
277
+  position: absolute;
278
+  right: 0;
279
+  bottom: 0;
280
+  font-size: 1.5em;
281
+  background-image: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#e4e1d7));
282
+  background-image: linear-gradient(to bottom right, #fff, #e4e1d7);
283
+  /*radial-gradient(circle 200px at bottom right, #fff, $background-color); */
284
+  height: 2em;
285
+  width: 2em;
286
+  display: -webkit-box;
287
+  display: -ms-flexbox;
288
+  display: flex;
289
+  -webkit-box-align: center;
290
+      -ms-flex-align: center;
291
+          align-items: center;
292
+  -webkit-box-pack: center;
293
+      -ms-flex-pack: center;
294
+          justify-content: center;
295
+  border-bottom-right-radius: 15px;
296
+}
297
+
298
+.grid-box .box-edit a {
299
+  color: #217ce4;
300
+}
301
+
302
+.grid-box .box-weeks.warning {
303
+  color: #c83631;
304
+  font-size: 1.1em;
305
+}
306
+
307
+.grid-box#new-experience {
308
+  display: -webkit-box;
309
+  display: -ms-flexbox;
310
+  display: flex;
311
+  -webkit-box-orient: vertical;
312
+  -webkit-box-direction: normal;
313
+      -ms-flex-direction: column;
314
+          flex-direction: column;
315
+  -ms-flex-pack: distribute;
316
+      justify-content: space-around;
317
+  -webkit-box-align: center;
318
+      -ms-flex-align: center;
319
+          align-items: center;
320
+}
321
+
322
+.grid-box#new-experience span {
323
+  color: #217ce4;
324
+  font-size: 5em;
325
+}
326
+
327
+.grid-box#new-experience h4 {
328
+  color: #606060;
329
+  margin: 0;
330
+}
331
+
332
+.grid-box:hover {
333
+  -webkit-transform: translateY(-5px);
334
+          transform: translateY(-5px);
335
+}
336
+
337
+/* WELCOME SECTION */
338
+#welcome {
339
+  margin-top: 8rem;
340
+  min-height: 25rem;
341
+  background: #333 url(../img/cytonn-photography-GJao3ZTX9gU-unsplash.jpeg) no-repeat top left;
342
+  background-size: cover;
343
+  position: relative;
344
+  background-blend-mode: screen;
345
+  border-bottom: 3px solid #f0c873;
346
+}
347
+
348
+#welcome-text {
349
+  position: absolute;
350
+  bottom: 2.6rem;
351
+  left: 5vw;
352
+  width: 30%;
353
+  display: -webkit-box;
354
+  display: -ms-flexbox;
355
+  display: flex;
356
+  -webkit-box-orient: vertical;
357
+  -webkit-box-direction: normal;
358
+      -ms-flex-direction: column;
359
+          flex-direction: column;
360
+}
361
+
362
+#welcome-image {
363
+  height: 75px;
364
+  width: 75px;
365
+  border-radius: 50%;
366
+  margin-bottom: 15px;
367
+  border: 2px solid #fff;
368
+  -webkit-box-shadow: 1px 1px 10px 0px #222;
369
+          box-shadow: 1px 1px 10px 0px #222;
370
+}
371
+
372
+#welcome-user {
373
+  color: #fff;
374
+  text-shadow: 1px 1px 5px #222;
375
+  font-size: 3rem;
376
+  margin: 0;
377
+}
378
+
379
+/* (LOGIN PAGE) MAIN SECTION */
380
+#home-main {
381
+  background-color: #606060;
382
+  display: -webkit-box;
383
+  display: -ms-flexbox;
384
+  display: flex;
385
+  -webkit-box-orient: horizontal;
386
+  -webkit-box-direction: normal;
387
+      -ms-flex-direction: row;
388
+          flex-direction: row;
389
+  min-height: calc(80vh - 8rem - 10vh);
390
+  padding: 2.5em 2em;
391
+  color: #fff;
392
+}
393
+
394
+#home-main h3 {
395
+  font-size: 1.7em;
396
+  font-weight: 900;
397
+}
398
+
399
+#home-main p {
400
+  font-size: 1.3em;
401
+}
402
+
403
+#main-sidebar {
404
+  -webkit-box-flex: 1;
405
+      -ms-flex: 1;
406
+          flex: 1;
407
+  padding-left: 2em;
408
+}
409
+
410
+#main-sidebar h3 {
411
+  font-weight: 700;
412
+}
413
+
414
+#main-sidebar ul {
415
+  margin: 0;
416
+  padding-left: 1em;
417
+}
418
+
419
+#main-sidebar li {
420
+  list-style: none;
421
+  font-size: 1.3em;
422
+}
423
+
424
+#main-sidebar a {
425
+  opacity: 0.7;
426
+  text-decoration: none;
427
+}
428
+
429
+#main-sidebar a.active,
430
+#main-sidebar a:hover,
431
+#main-sidebar a:focus,
432
+#main-sidebar a:active {
433
+  opacity: 1;
434
+}
435
+
436
+.main-content {
437
+  -webkit-box-flex: 3;
438
+      -ms-flex: 3;
439
+          flex: 3;
440
+  overflow: hidden;
441
+}
442
+
443
+.main-content-box {
444
+  display: none;
445
+}
446
+
447
+.main-content-box.show {
448
+  display: initial;
449
+}
450
+
451
+.main-content-box #team-images {
452
+  display: -ms-grid;
453
+  display: grid;
454
+  -ms-grid-columns: (1fr)[2];
455
+      grid-template-columns: repeat(2, 1fr);
456
+  gap: 1em;
457
+  justify-items: center;
458
+  margin: 2em 0;
459
+}
460
+
461
+.main-content-box #team-images img {
462
+  height: 100px;
463
+  width: 100px;
464
+  border-radius: 50%;
465
+  border: 2px #fff solid;
466
+  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3);
467
+          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3);
468
+}
469
+
470
+#contact-info {
471
+  margin-left: 3.5rem;
472
+  opacity: 0.8;
473
+}
474
+
475
+.login-hr {
476
+  border-width: 4px;
477
+  border-radius: 3px;
478
+}
479
+
480
+/* SHOWCASE */
481
+#showcase {
482
+  margin-top: 8rem;
483
+  min-height: calc(100vh - 8rem);
484
+  background: #333 url(../img/andrew-neel-cckf4TsHAuw-unsplash.jpeg) no-repeat left top;
485
+  background-size: cover;
486
+  position: relative;
487
+  background-blend-mode: screen;
488
+  border-bottom: 3px #f0c873 solid;
489
+}
490
+
491
+#showcase-text {
492
+  position: absolute;
493
+  top: 10vh;
494
+  right: 5vw;
495
+  width: 40%;
496
+  display: -webkit-box;
497
+  display: -ms-flexbox;
498
+  display: flex;
499
+  -webkit-box-orient: vertical;
500
+  -webkit-box-direction: normal;
501
+      -ms-flex-direction: column;
502
+          flex-direction: column;
503
+  text-shadow: 1px 1px 5px #222;
504
+}
505
+
506
+#showcase-heading {
507
+  font-size: 3em;
508
+  color: #fff;
509
+  width: 100%;
510
+  margin-bottom: 0.25em;
511
+  text-align: right;
512
+}
513
+
514
+#showcase-link {
515
+  display: -webkit-box;
516
+  display: -ms-flexbox;
517
+  display: flex;
518
+  -webkit-box-pack: end;
519
+      -ms-flex-pack: end;
520
+          justify-content: flex-end;
521
+}
522
+
523
+#showcase-link a {
524
+  color: #fff;
525
+  font-size: 1.8em;
526
+  text-decoration: underline;
527
+  cursor: pointer;
528
+}
529
+
530
+#showcase-link a:hover {
531
+  text-decoration: none;
532
+}
533
+
534
+/* (EXPERIENCE PAGE) SHOWCASE SECTION */
535
+#view-experience-showcase {
536
+  background-color: #606060;
537
+  margin-top: 8rem;
538
+  color: #fff;
539
+  border-bottom: 3px solid #f0c873;
540
+}
541
+
542
+#view-experience-buttons {
543
+  display: -webkit-box;
544
+  display: -ms-flexbox;
545
+  display: flex;
546
+  -webkit-box-orient: horizontal;
547
+  -webkit-box-direction: normal;
548
+      -ms-flex-direction: row;
549
+          flex-direction: row;
550
+  -webkit-box-align: center;
551
+      -ms-flex-align: center;
552
+          align-items: center;
553
+  -webkit-box-pack: justify;
554
+      -ms-flex-pack: justify;
555
+          justify-content: space-between;
556
+  height: 100%;
557
+  max-width: 18em;
558
+  margin: 0 auto;
559
+}
560
+
561
+#experience-pen {
562
+  color: #fff;
563
+  background-color: #217ce4;
564
+  border-radius: 15px;
565
+  padding: 0.75em;
566
+  font-size: 2em;
567
+  display: -webkit-box;
568
+  display: -ms-flexbox;
569
+  display: flex;
570
+  -webkit-box-align: center;
571
+      -ms-flex-align: center;
572
+          align-items: center;
573
+  -webkit-box-pack: center;
574
+      -ms-flex-pack: center;
575
+          justify-content: center;
576
+  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
577
+          box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
578
+  cursor: pointer;
579
+  -webkit-transition: -webkit-transform 150ms ease-in-out;
580
+  transition: -webkit-transform 150ms ease-in-out;
581
+  transition: transform 150ms ease-in-out;
582
+  transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
583
+}
584
+
585
+#experience-pen:hover,
586
+#experience-pen:focus,
587
+#experience-pen:active {
588
+  -webkit-transform: translateY(-5px);
589
+          transform: translateY(-5px);
590
+}
591
+
592
+#view-experience-tabs {
593
+  font-size: 1.2em;
594
+  margin: 1em 0;
595
+  display: -webkit-box;
596
+  display: -ms-flexbox;
597
+  display: flex;
598
+  -ms-flex-pack: distribute;
599
+      justify-content: space-around;
600
+}
601
+
602
+#view-experience-tabs a {
603
+  font-size: 1.2em;
604
+  padding: 0 1em;
605
+  text-decoration: none;
606
+  position: relative;
607
+  -webkit-transition: opacity 150ms ease-in-out;
608
+  transition: opacity 150ms ease-in-out;
609
+  opacity: 0.6;
610
+  font-weight: bold;
611
+}
612
+
613
+#view-experience-tabs a:after {
614
+  content: '';
615
+  position: absolute;
616
+  bottom: 0;
617
+  height: 1px;
618
+  left: 1em;
619
+  right: 1em;
620
+  background-color: #fff;
621
+  -webkit-transform: scaleX(0);
622
+          transform: scaleX(0);
623
+  -webkit-transition: -webkit-transform 150ms ease-in-out;
624
+  transition: -webkit-transform 150ms ease-in-out;
625
+  transition: transform 150ms ease-in-out;
626
+  transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
627
+}
628
+
629
+#view-experience-tabs a:hover::after,
630
+#view-experience-tabs a:focus::after,
631
+#view-experience-tabs a:active::after,
632
+#view-experience-tabs a.active::after {
633
+  -webkit-transform: scaleX(1);
634
+          transform: scaleX(1);
635
+}
636
+
637
+#view-experience-tabs a.active,
638
+#view-experience-tabs a:hover,
639
+#view-experience-tabs a:focus,
640
+#view-experience-tabs a:active {
641
+  opacity: 1;
642
+}
643
+
644
+/* (EXPERIENCE PAGE) MAIN SECTION */
645
+.main-content-box#calendar,
646
+.main-content-box#questionnaires,
647
+.main-content-box#moments,
648
+.main-content-box#milestones {
649
+  min-height: calc(80vh - 8rem - 10vh);
650
+}
651
+
652
+#view-experience-content {
653
+  background-color: #fff;
654
+  min-height: calc(100vh - 8rem);
655
+  display: -webkit-box;
656
+  display: -ms-flexbox;
657
+  display: flex;
658
+  -webkit-box-pack: center;
659
+      -ms-flex-pack: center;
660
+          justify-content: center;
661
+  -webkit-box-align: center;
662
+      -ms-flex-align: center;
663
+          align-items: center;
664
+}
665
+
666
+/* FOOTER */
667
+#main-footer {
668
+  background: #2e2e2e;
669
+  color: #fff;
670
+  display: -webkit-box;
671
+  display: -ms-flexbox;
672
+  display: flex;
673
+  -webkit-box-orient: vertical;
674
+  -webkit-box-direction: normal;
675
+      -ms-flex-direction: column;
676
+          flex-direction: column;
677
+  -webkit-box-align: center;
678
+      -ms-flex-align: center;
679
+          align-items: center;
680
+  -webkit-box-pack: center;
681
+      -ms-flex-pack: center;
682
+          justify-content: center;
683
+  min-height: 10vh;
684
+  padding: 1.5em;
685
+  border-top: 3px solid #f0c873;
686
+}
687
+
688
+#main-footer p {
689
+  margin: 0;
690
+  font-size: 1.2em;
691
+}
692
+
693
+#main-footer a {
694
+  color: #aaa;
695
+  text-decoration: none;
696
+}
697
+
698
+#main-footer a:hover,
699
+#main-footer a:active,
700
+#main-footer a:focus {
701
+  color: #fff;
702
+  text-decoration: underline;
703
+}
704
+
705
+/* MEDIA QUERIES */
706
+@media (max-width: 768px) {
707
+  #showcase {
708
+    display: -webkit-box;
709
+    display: -ms-flexbox;
710
+    display: flex;
711
+    -webkit-box-pack: center;
712
+        -ms-flex-pack: center;
713
+            justify-content: center;
714
+    -webkit-box-align: center;
715
+        -ms-flex-align: center;
716
+            align-items: center;
717
+  }
718
+  #showcase-text {
719
+    position: initial;
720
+    min-width: 70%;
721
+  }
722
+  #showcase-heading {
723
+    text-align: center;
724
+  }
725
+  #showcase-link {
726
+    -webkit-box-pack: center;
727
+        -ms-flex-pack: center;
728
+            justify-content: center;
729
+  }
730
+  #main-sidebar {
731
+    display: none;
732
+  }
733
+  .main-content-box {
734
+    display: initial;
735
+  }
736
+  #view-experience-buttons {
737
+    margin: 1rem auto;
738
+  }
739
+  #experience-lead {
740
+    text-align: center;
741
+  }
742
+  #experience-content {
743
+    -ms-grid-columns: 1fr 1fr;
744
+        grid-template-columns: 1fr 1fr;
745
+  }
746
+}
747
+
748
+@media (max-width: 580px) {
749
+  #experience-lead h2 {
750
+    margin: 20px auto 10px auto;
751
+  }
752
+  #experience-content {
753
+    -ms-grid-columns: 1fr;
754
+        grid-template-columns: 1fr;
755
+  }
756
+}
757
+
758
+@media (min-width: 1080px) {
759
+  #experience-content {
760
+    -ms-grid-columns: (1fr)[4];
761
+        grid-template-columns: repeat(4, 1fr);
762
+  }
763
+}
764
+/*# sourceMappingURL=style.css.map */

+ 2
- 0
css/style.min.css
File diff suppressed because it is too large
View File


+ 39
- 0
error.php View File

@@ -0,0 +1,39 @@
1
+<?php		
2
+		
3
+	require_once 'processes/config.php';
4
+	require_once 'processes/dbh.inc.php';
5
+	include_once 'header.php';
6
+		
7
+?>
8
+	<!-- START OF home.php -->
9
+	<body style="min-height: 100vh; display: flex; align-items: center;">
10
+	
11
+		<div class='container text-center'>
12
+			<h1>Error</h1>
13
+			<h4>That's odd, something went wrong!</h4>
14
+			<p style='color: red;'>Redirecting you back to login page<span id="dots">...</span></p>
15
+		</div>
16
+		
17
+		<script>
18
+			var numDots = 3;
19
+			var dots = document.getElementById('dots');
20
+			setInterval(function() {
21
+				if(dots.innerText === "...") {
22
+					dots.innerText = ".";
23
+				} else if(dots.innerText === ".") {
24
+					dots.innerText = "..";
25
+				} else if(dots.innerText === "..") {
26
+					dots.innerText = "...";
27
+				}
28
+			}, 500);
29
+		</script>
30
+		
31
+	</body>
32
+	<!-- END OF home.php -->
33
+</html>
34
+<?php
35
+
36
+	header('Refresh: 3; https://tania.uprrp.edu/admin_nuevo/processes/logout.php');
37
+	ob_end_flush();
38
+	
39
+?>

+ 10
- 0
footer.php View File

@@ -0,0 +1,10 @@
1
+    	<footer id="main-footer">
2
+    	    <p>Copyright &copy; <a href="https://cdcc.uprrp.edu">CDCC</a> (<span id="copyrightDate"></span>)</p>
3
+    	    <p>Universidad de Puerto Rico</p>
4
+    	    <p>Recinto de Río Piedras</p>
5
+    	</footer>
6
+
7
+    	<script src="js/main.js" defer></script>
8
+    	
9
+	</body>
10
+</html>

+ 141
- 0
funciones.php View File

@@ -0,0 +1,141 @@
1
+<?php
2
+
3
+function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") {
4
+  $theValue = (!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;
5
+  switch ($theType) {
6
+    case "text":
7
+      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
8
+      break;    
9
+    case "long":
10
+    case "int":
11
+      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
12
+      break;
13
+    case "double":
14
+      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
15
+      break;
16
+    case "date":
17
+      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
18
+      break;
19
+    case "defined":
20
+      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
21
+      break;
22
+  }
23
+  return $theValue;
24
+}
25
+
26
+function presentaPregsRangoSelect($min_val,$min_text,$max_val,$max_text,$id_q)
27
+{
28
+	//print $id_q;
29
+	print('<select class="form-control" name="question'.$id_q.'" required>');
30
+	print('<option></option>');
31
+	print('<option value="'.$min_val.'">'.$min_val." - ".$min_text.'</option>');
32
+	print("\n");
33
+	for($i=$min_val+1;$i<($max_val);$i++)
34
+	{
35
+		print('<option value="'.$i.'">'.$i.'</option>');
36
+		print($i);
37
+		print("\n");
38
+	}
39
+	print('<option value="'.$max_val.'">'.$max_val." - ".$max_text.'</option>');
40
+	print("\n");
41
+	print("</select>");
42
+	print("\n");
43
+}
44
+
45
+function presentaPregsRangoSlider($min_val,$min_text,$max_val,$max_text,$id_q)
46
+{
47
+	//print('<div class="slidecontainer">');
48
+	print('<input type="range" class="form-control-range slider" value="0" min="'.$min_val.'" max="'.$max_val.'" name="question'.$id_q.'" id="question'.$id_q.'" required>');
49
+	print('<div class="row">');
50
+	
51
+    print('<div class="col-4">');
52
+	print("<small>$min_text</small>");
53
+	print('</div>');
54
+    print('<div class="col-4 text-center">');
55
+	print('<span id="val'.$id_q.'"></span>');
56
+	print('</div>');
57
+    print('<div class="col-4 text-right">');
58
+	print("<small>$max_text</small>");
59
+	print('</div>');
60
+	print('</div>');
61
+	
62
+	print('
63
+	<script>
64
+	var slider'.$id_q.' = document.getElementById("question'.$id_q.'");
65
+	var output'.$id_q.' = document.getElementById("val'.$id_q.'");
66
+	output'.$id_q.'.innerHTML = slider'.$id_q.'.value;
67
+
68
+	slider'.$id_q.'.onclick = function() {
69
+	  output'.$id_q.'.innerHTML = this.value;
70
+	}
71
+	</script>
72
+	');
73
+	//print('</div>');
74
+}
75
+
76
+function presentaPregsRangoRadio($min_val,$min_text,$max_val,$max_text,$id_q)
77
+{
78
+	print('<div class="row-sm">');
79
+	print('<div class="form-check">');
80
+	print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$min_val.'" value="'.$min_val.'" required>');
81
+	print('<label class="form-check-label" for="radio'.$min_val.'">'.$min_val.' - '.$min_text.'</label>');
82
+	print('</div>');
83
+
84
+	for($i=$min_val+1;$i<($max_val);$i++)
85
+	{
86
+		print('<div class="form-check">');
87
+		print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$i.'" value="'.$i.'">');
88
+		print('<label class="form-check-label" for="radio'.$i.'">'.$i.'</label>');
89
+		print('</div>');
90
+	}
91
+	print('<div class="form-check">');
92
+	print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$max_val.'" value="'.$max_val.'">');
93
+	print('<label class="form-check-label" for="radio'.$max_val.'">'.$max_val.' - '.$max_text.'</label>');
94
+	print('</div>');
95
+	print('</div>');
96
+
97
+}
98
+
99
+function presentaPregsRangoRadio2($min_val,$min_text,$max_val,$max_text,$id_q)
100
+{
101
+	print('<div class="row-sm">');
102
+    print('<div class="col">');
103
+	print('<div class="form-check form-check-inline">');
104
+	print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$min_val.'" value="'.$min_val.'">');
105
+	print('</div>');
106
+	print('</div>');
107
+
108
+	for($i=$min_val+1;$i<($max_val);$i++)
109
+	{
110
+    print('<div class="col">');
111
+		print('<div class="form-check form-check-inline">');
112
+		print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$i.'" value="'.$i.'">');
113
+		print('</div>');
114
+	print('</div>');
115
+	}
116
+
117
+    print('<div class="col">');
118
+	print('<div class="form-check form-check-inline">');
119
+	print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$max_val.'" value="'.$max_val.'">');
120
+	print('</div>');
121
+	print('</div>');
122
+
123
+	print('</div>');
124
+	print('<div class="row-sm">');
125
+    print('<div class="col">');
126
+	print('<label class="form-check-label" for="radio'.$min_val.'">'.$min_val.' - '.$min_text.'</label>');
127
+	print('</div>');
128
+	for($i=$min_val+1;$i<($max_val);$i++)
129
+	{
130
+    print('<div class="col">');
131
+		print('<label class="form-check-label" for="radio'.$i.'">'.$i.'</label>');
132
+	print('</div>');
133
+	}
134
+    print('<div class="col">');
135
+	print('<label class="form-check-label" for="radio'.$max_val.'">'.$max_val.' - '.$max_text.'</label>');
136
+	print('</div>');
137
+
138
+	print('</div>');
139
+
140
+}
141
+?>

+ 117
- 0
header.php View File

@@ -0,0 +1,117 @@
1
+<?php ob_start(); ?>
2
+<!DOCTYPE html>
3
+<html lang="en">
4
+	<head>
5
+		<meta charset="UTF-8">
6
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
8
+		<title>TANIA</title>
9
+		
10
+    	<!-- BOOTSTRAP STYLE IMPORT -->
11
+    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
12
+    	
13
+    	<!-- JQUERY IMPORT-->
14
+    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
15
+    	
16
+		<!-- BOOTSTRAP JS IMPORT -->
17
+    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
18
+    	
19
+    	<!-- FONTAWESOME IMPORT -->
20
+    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">
21
+    	
22
+		<!-- APP ICON IMPORT -->
23
+		<!-- <link rel="icon" type="image/png" href="img/pen_1024x1024.png" sizes="1024x1024"> -->
24
+    	<link rel="icon" type="image/png" href="img/pen_800x800.png" sizes="800x800">
25
+    	
26
+		<!-- FULLCALENDAR IMPORT -->
27
+    	<link rel="stylesheet" href="processes/fullcalendar/packages/core/main.css">
28
+    	<link rel="stylesheet" href="processes/fullcalendar/packages/daygrid/main.css">
29
+    	<link rel="stylesheet" href="processes/fullcalendar/packages/timegrid/main.css">
30
+<!-- <link href="https://unpkg.com/@fullcalendar/core/main.min.css"> -->
31
+<!-- <link href="https://unpkg.com/@fullcalendar/daygrid/main.min.css"> -->
32
+
33
+    	<!-- CUSTOM STYLES -->
34
+    	<link rel="stylesheet" href="css/style.css">
35
+    	
36
+    	<style>
37
+    	
38
+textarea {
39
+	resize: vertical;
40
+}
41
+
42
+:root {
43
+	--size: 12px;
44
+	/* 15px for btn-xl */
45
+	/* 15px for btn-lg */
46
+	/* 12px for btn-md */
47
+	/* 10px for btn-sm */
48
+	/* 5px for btn-xs */
49
+	--period: 750ms;
50
+	--color: #3498db;
51
+	--bg-color: white;
52
+	--thinness: 5;
53
+	/* 10 is okay */
54
+}
55
+
56
+.loader {
57
+	display: inline-block;
58
+	width: 12px;
59
+	height: 12px;
60
+	position: relative;
61
+	margin-right: calc(12px / 2);
62
+}
63
+
64
+.loader:before, .loader:after {
65
+	content: "";
66
+	position: absolute;
67
+	left: 0; /* make sure it's inside the box */
68
+	width: 100%;
69
+	height: 100%;
70
+	border-radius: 100%;
71
+	border: calc(12px / 5) solid transparent;
72
+	border-top-color: #3498db;
73
+}
74
+
75
+.loader:before {
76
+	z-index: 100;
77
+	animation: spin 750ms infinite;
78
+}
79
+
80
+.loader:after {
81
+	border: calc(12px / 5) solid white;
82
+}
83
+
84
+@keyframes spin {
85
+	0% {
86
+		-webkit-transform: rotate(0deg);
87
+		-ms-transform: rotate(0deg);
88
+		-o-transform: rotate(0deg);
89
+		transform: rotate(0deg);
90
+	}
91
+
92
+	100% {
93
+		-webkit-transform: rotate(360deg);
94
+		-ms-transform: rotate(360deg);
95
+		-o-transform: rotate(360deg);
96
+		transform: rotate(360deg);
97
+	}
98
+}
99
+    	
100
+    	</style>
101
+
102
+		<script>
103
+// Enable tooltips
104
+$(function () {
105
+  $('[data-toggle="tooltip"]').tooltip();
106
+});
107
+		</script>
108
+	</head>
109
+<?php
110
+
111
+	//if(!empty($_SESSION) && !isset($_SESSION['error'])): //IF USER IS LOGGED IN (WITHOUT ANY ERROR)
112
+	//endif;
113
+
114
+	ini_set('display_errors', 1);
115
+	ini_set('display_startup_errors', 1);
116
+	error_reporting(E_ALL);
117
+?>

+ 374
- 0
home.php View File

@@ -0,0 +1,374 @@
1
+<?php
2
+	
3
+	require_once 'processes/config.php';
4
+	require_once 'processes/dbh.inc.php';
5
+	require_once 'processes/checkLogin.php';
6
+	include_once 'header.php';
7
+	
8
+	// RETRIEVE USER'S NAME AND PICTURE
9
+	$query1 = "SELECT * FROM `researcher` WHERE `email` = '" . $_SESSION['email'] . "';";
10
+	$result1 = mysqli_query($connection, $query1);
11
+	$dbUserData = mysqli_fetch_assoc($result1);
12
+	
13
+	// IF USER NOT IN DATABASE, EXIT
14
+	if($result1->num_rows !== 1) {
15
+		exit();
16
+	}
17
+	
18
+?>
19
+	<!-- START OF home.php -->
20
+	<body>
21
+
22
+    	<header id="main-header">
23
+        	<a id="logo" href=".">
24
+				TANIA
25
+            	<img src="./img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
26
+        	</a>
27
+        	<div id="account">
28
+        	    <a class="nav-link" href="./questionnaires.php">Questionnaire Collection</a>
29
+        	    <a class="sign-out" href="./processes/logout.php">Sign Out</a>
30
+        	</div>
31
+    	</header>
32
+
33
+
34
+    	<section id="welcome">
35
+        	<div id="welcome-text">
36
+        	    <img id="welcome-image" src="<?php echo $dbUserData["picture"]; ?>" alt="User">
37
+        	    <h2 id="welcome-user">Welcome <?php echo explode(" ", $dbUserData['name'])[0]; ?></h2>
38
+        	</div>
39
+    	</section>
40
+
41
+
42
+    	<main id="experience-main">
43
+    	
44
+        	<div class="experience-lead">
45
+        	    <h2>Manage Your Experiences</h2>
46
+        	</div>
47
+        	
48
+        	<div id="experience-content">
49
+
50
+				<!--change to #New when using experience as templates has been implemented-->
51
+            	<div class="grid-box" id="new-experience" onclick="nextModal('#New_2')">
52
+                	<span class="fas fa-plus"></span>
53
+                    <h4>New</h4>
54
+            	</div>
55
+
56
+<?php
57
+	// WARNING: CHANGE QUERY TO INCLUDE "`id_researcher`='".$dbUserData['id_researcher']."';"
58
+	$query2 = "SELECT * FROM `experience`;";
59
+	$result2 = mysqli_query($connection, $query2);
60
+	
61
+	// IF USER HAS EXPERIENCES, SHOW ALL OF THEM
62
+	// ELSE PROMPT USER TO CREATE A NEW EXPERIENCE
63
+	if($result2->num_rows > 0): // USER HAS EXPERIENCE (STANDARD PAGE)
64
+?>
65
+
66
+				<?php while($row = mysqli_fetch_array($result2)): ?>
67
+
68
+            	<div class="grid-box" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'">
69
+            	
70
+            		<?php if(mb_strlen($row['title']) == 0): ?>
71
+                	<span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'"><small>N/A</small></span>
72
+            		<?php elseif(mb_strlen($row['title']) < 21): ?>
73
+                	<span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'"><?php echo $row['title']; ?></span>
74
+                	<?php else: ?>
75
+<!--style="white-space: nowrap;"--><span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'"><?php echo substr($row['title'], 0, 30)."<small>...</small>"; ?></span>
76
+                	<?php endif; ?>
77
+                	
78
+                	<div class="box-dates" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'">
79
+                	    <p style="margin-bottom: 0;">• Starts: <?php echo date("M j, Y", strtotime($row['start_date'])); ?></p>
80
+                	    <p>• Ends: <?php echo date("M j, Y", strtotime($row['end_date'])); ?></p>
81
+                	</div>
82
+                	
83
+                	<?php 
84
+                		$x = (strtotime($row['end_date']) - strtotime('now')) / 604800;
85
+                		if($x <= 0):
86
+                	?>
87
+                	<span class="box-weeks warning">Finished</span>
88
+                	<?php else: ?>
89
+                	<span class="box-weeks"><?php echo round($x); ?> week<?php if(round($x) > 1) echo 's'; ?> remaining</span>
90
+                	<?php endif; ?>
91
+                	<span class="box-edit" style="background: none;">
92
+                	    <a>
93
+                	        <i class="fas fa-pen"></i>
94
+                	    </a>
95
+                	</span>
96
+
97
+            	</div>
98
+	
99
+            	<?php endwhile; ?>
100
+
101
+<?php else: // USER DOESN'T HAVE EXPERIENCES YET (ALTERNATE PAGE) ?>
102
+
103
+				<script> setTimeout(() => $('#FirstTime').modal('show'), 1000); </script>
104
+		
105
+<?php endif; ?>
106
+
107
+			</div>
108
+			
109
+			<br><br>
110
+			
111
+		</main>
112
+
113
+
114
+
115
+		<!-- POPUP FOR FIRST TIME -->
116
+		<div class='modal fade' id='FirstTime' tabindex='-1' role='dialog' aria-labelledby='FirstTimeLabel' aria-hidden='true'>
117
+			<div class='modal-dialog modal-sm' role='document'>
118
+ 				<div class='modal-content'>
119
+ 					<div class='modal-body'>
120
+ 						
121
+ 						
122
+ 						<!-- CLOSE BUTTON -->
123
+ 						<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
124
+						
125
+						<div class="row text-center">
126
+							<h3>You don't have any experiences yet!</h3>
127
+						
128
+							<h5>Press below to create a new one!</h5>
129
+						
130
+							<button type="button" class='btn btn-default' data-dismiss='modal' onclick="nextModal('#New_2')">New</button>
131
+						</div>
132
+ 								
133
+       		
134
+     		 		</div><!--modal-body-->
135
+    			</div><!--modal-content-->
136
+  			</div><!--modal-dialog-->
137
+		</div><!--modal-->
138
+
139
+
140
+<!--
141
+		<!~~ POPUP FOR NEW EXPERIENCE 1 ~~>
142
+		<div class='modal fade' id='New' tabindex='-1' role='dialog' aria-labelledby='NewLabel' aria-hidden='true'>
143
+			<div class='modal-dialog modal-sm' role='document'>
144
+ 				<div class='modal-content'>
145
+ 					<div class='modal-body'>
146
+ 						
147
+ 						
148
+ 						<!~~ CLOSE BUTTON ~~>
149
+ 						<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
150
+						
151
+						<h4 class='text-center'>Want to add another experience?</h4>
152
+						
153
+						<!~~ CHOOSE: BRAND NEW EXPERIENCE OR USE A TEMPLATE~~>
154
+						<div class='row text-center'>
155
+							<div class='btn-group'>
156
+								<button type="button" class='btn btn-default' data-dismiss="modal" onclick="nextModal('#New_2')">Brand New</button>
157
+								<a href='#' class='btn btn-default'>Use Template</a>
158
+							</div>
159
+						</div>
160
+						<br>
161
+ 						
162
+ 						
163
+      				</div><!~~modal-body~~>
164
+    			</div><!~~modal-content~~>
165
+  			</div><!~~modal-dialog~~>
166
+		</div><!~~modal~~>
167
+-->
168
+
169
+		
170
+<form id="newExperience"><!--method='POST' action='processes/insertExperience.php'-->
171
+		<!-- POPUP FOR NEW EXPERIENCE 2 -->
172
+		<div class='modal fade' id='New_2' tabindex='-1' role='dialog' aria-labelledby='NewLabel_2' aria-hidden='true'>
173
+			<div class='modal-dialog modal-lg' role='document'>
174
+ 				<div class='modal-content'>
175
+ 				
176
+ 					<div class='modal-body'>
177
+ 						
178
+ 						
179
+ 						
180
+ 						<!-- CLOSE BUTTON -->
181
+ 						<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
182
+						
183
+						<div class='row'>
184
+							<div class='col-sm-10'>
185
+								<h2>Brand New Experience <small>(Basic Info)</small></h2>
186
+<!-- 								<h3><small>Start creating a new experience by first adding its basic info.</small></h3> -->
187
+							</div>
188
+						</div><!--row--> 						
189
+
190
+						<hr><br>
191
+
192
+	
193
+						<div class="form-horizontal">
194
+	
195
+							<!-- TITLE -->
196
+							<div class='form-group'>
197
+								<label class='control-label col-sm-2' for='e_title'>Title:</label>
198
+								<div class='col-sm-9'>
199
+									<input type='text' class='form-control text-center' id='e_title' name='title' placeholder='Title' maxlength="60" required>
200
+								</div>
201
+							</div>
202
+				
203
+							<!-- DESCRIPTION -->
204
+							<div class='form-group'>
205
+								<label class='control-label col-sm-2' for='e_description'>Description:</label>
206
+								<div class='col-sm-9'>
207
+									<textarea class='form-control text-center' id='e_description' name='description' rows='1' style='resize:vertical;' placeholder='Description' maxlength="100" required></textarea>
208
+								</div>
209
+							</div>
210
+				
211
+							<!-- TYPE -->
212
+							<div class='form-group'>
213
+								<label class='control-label col-sm-2' for='e_description'>Type:</label>
214
+								<div class='col-sm-9'>
215
+									<select class="form-control text-center" style="text-align-last: center;" id='e_type' name='type' required>
216
+										<option selected value="Course-Based Research">Course-Based Research</option>
217
+										<option value="Independent Research">Independent Research</option>
218
+									</select>
219
+								</div>
220
+							</div>
221
+				
222
+							<!-- DURATION -->
223
+							<div class='form-group'>
224
+								<label class='control-label col-sm-2' for='e_description'>Duration:</label>
225
+								<div class='col-sm-9'>
226
+									<input type='number' class='form-control text-center' id='e_duration' name='duration' placeholder='Duration' min="0" required readonly>
227
+								</div>
228
+							</div>
229
+				
230
+							<!-- START DATE -->
231
+							<div class='form-group'>
232
+								<label class='control-label col-sm-2' for='e_start'>Start Date:</label>
233
+								<div class='col-sm-9'>
234
+									<input type='date' class='form-control text-center' id='e_start' name='start' placeholder="YYYY-MM-DD" required>
235
+								</div>
236
+							</div>
237
+				
238
+							<!-- END DATE -->
239
+							<div class='form-group'>
240
+								<label class='control-label col-sm-2' for='e_end'>End Date:</label>
241
+								<div class='col-sm-9'>
242
+									<input type='date' class='form-control text-center' id='e_end' name='end' placeholder="YYYY-MM-DD" required>
243
+								</div>
244
+							</div>
245
+				
246
+							<!-- INSTITUTION -->
247
+							<div class='form-group'>
248
+								<label class='control-label col-sm-2' for='e_institution'>Institution:</label>
249
+								<div class='col-sm-9'>
250
+									<select class="form-control" id='e_institution' name='institution' style='width:100%; text-align-last: center;' required>
251
+										<option disabled selected value>Institution</option>
252
+										<?php
253
+											$query = "SELECT * FROM `institution`;";
254
+											$result = mysqli_query($connection, $query);
255
+											while($row = mysqli_fetch_assoc($result)):
256
+										?>
257
+										<option value='<?php echo $row['id']; ?>'><?php echo $row['name']; ?></option>
258
+										<?php endwhile; ?>
259
+									</select>
260
+								</div>
261
+							</div>
262
+
263
+
264
+							<br><hr style="width: 80%"><br><br>
265
+
266
+							
267
+							<!-- EXPIRY TIME -->
268
+							<div class='form-group'>
269
+								<label class='control-label col-sm-3' for='e_description'>Expiry Time:</label>
270
+								<div class='col-sm-7 input-groupd'>
271
+									<select class="form-control" style="text-align-last: center;" id="expiry_time" name="expiry_time" required>
272
+										<option selected value="30">30 min</option>
273
+										<option value="60">1 hour</option>
274
+										<option value="120">2 hours</option>
275
+										<option value="180">3 hours</option>
276
+<!-- 										<option value="240">4 hours</option> -->
277
+<!-- 										<option value="300">5 hours</option> -->
278
+										<option value="360">6 hours</option>
279
+										<option value="720">12 hours</option>
280
+										<option value="1080">18 hours</option>
281
+										<option value="1440">1 day</option>
282
+										
283
+									</select>
284
+								</div>
285
+							</div>
286
+							
287
+						</div>
288
+						
289
+						<br>
290
+						
291
+						<!--. Each Moment will need to have a <strong>predetermined expiry time</strong>; -->
292
+						<p class='alert alert-warning text-justify' style="width: 80%; margin: 0 auto;">We require that you specify a <strong>Moment Expiry Time</strong>. That is, the amount of time you, the researcher, will allot your subjects to answer a given Moment. The <strong>minimum</strong> we allow is 30 min, while the <strong>maximum</strong> is a whole day. Please keep in mind you should provide your subjects </strong>enough time</strong> so that they are allowed to answer properly, but do not allocate <strong>excessive time</strong>, as your subjects' answers may vary greatly with time.</p>
293
+
294
+						<br>
295
+			
296
+			
297
+
298
+		<!-- ERROR ALERT FOR USER -->			
299
+	<div id="error-newExperience" class="row" style="display: none;">
300
+		<div class="col-sm-12">
301
+			<div class="alert alert-danger mb-1" role="alert">
302
+				<h4 class="error-lead">Error!</h4>
303
+				<p class="error-description"></p>
304
+			</div>
305
+		</div>
306
+	</div>
307
+			
308
+			
309
+      				</div><!--modal-body-->
310
+      				
311
+      				<!-- SUBMIT OR CANCEL -->
312
+     				<div class='modal-footer'>
313
+       					<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
314
+        				<button type='submit' class='btn btn-primary' name='newExperience'>Create</button>
315
+<!--         				<button type='button' class='btn btn-primary' data-dismiss='modal' onclick="nextModal('#New_3')">Next</button> -->
316
+      				</div>
317
+      				
318
+    			</div><!--modal-content-->
319
+  			</div><!--modal-dialog-->
320
+		</div><!--modal-->
321
+</form><!--form-->
322
+
323
+
324
+
325
+
326
+
327
+
328
+
329
+
330
+
331
+
332
+
333
+
334
+
335
+		<script src="js/home.js"></script>
336
+		<script src="js/handleSubmit.js"></script>
337
+
338
+
339
+<script>
340
+
341
+		
342
+		["newExperience"].forEach(function(formName) {
343
+			
344
+			var form = document.getElementById(formName);
345
+			
346
+			if(form) {
347
+				form.addEventListener('submit', function(e) {
348
+					handleSubmit(e, formName);
349
+				});
350
+			}
351
+			
352
+		});
353
+
354
+
355
+		window.onload = function() {
356
+
357
+			// Start Date
358
+			setStartDateRange();
359
+	
360
+			// End Date
361
+			startDate.addEventListener('change', setEndDateRange);
362
+	
363
+			// Duration
364
+			startDate.addEventListener('change', setDuration);
365
+			endDate.addEventListener('change', setDuration);
366
+			
367
+		}		
368
+
369
+		</script>
370
+
371
+		<!-- END OF home.php -->
372
+
373
+
374
+<?php include_once 'footer.php'; ?>

BIN
img/.DS_Store View File


BIN
img/CDCC.png View File


BIN
img/EMA-banner1.png View File


BIN
img/EMA-banner2.png View File


BIN
img/andrew-neel-cckf4TsHAuw-unsplash.jpeg View File


BIN
img/carlos.jpg View File


BIN
img/carlos_original.jpg View File


BIN
img/coralys.jpg View File


BIN
img/coralys_original.jpg View File


BIN
img/cytonn-photography-GJao3ZTX9gU-unsplash.jpeg View File


+ 6
- 0
img/google.svg View File

@@ -0,0 +1,6 @@
1
+<svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg">
2
+    <path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" fill="#EA4335"/>
3
+    <path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" fill="#FBBC05"/>
4
+    <path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" fill="#4285F4"/>
5
+    <path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/>
6
+</svg>

BIN
img/hector.jpg View File


BIN
img/hector_original.jpg View File


BIN
img/ivonne.png View File


BIN
img/juan.png View File


BIN
img/juan_original.png View File


BIN
img/pen_1024x1024.png View File


BIN
img/pen_800x800.png View File


BIN
img/tatiana.jpg View File


BIN
img/tatiana_original.jpg View File


BIN
img/victor.jpg View File


+ 105
- 0
index.php View File

@@ -0,0 +1,105 @@
1
+<?php
2
+	
3
+	require_once 'processes/config.php';
4
+	
5
+	// IF USER IS ALREADY LOGGED IN, REDIRECT TO home.php
6
+	// ELSE PROMPT USER TO LOG IN
7
+	if(!empty($_SESSION)) {
8
+		header('Location: home.php');
9
+		exit();
10
+	}
11
+	
12
+	include_once 'header.php';
13
+	
14
+?>
15
+	<!-- START OF index.php -->
16
+	<body>
17
+		<header id="main-header">
18
+        	<a id="logo" href=".">
19
+				TANIA
20
+            	<img src="img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
21
+        	</a>
22
+	        <div id="account">
23
+    	        <button class="google-button" onclick="window.location='<?php echo $loginURL; ?>'">
24
+    	            <img class="google-button__icon" src="img/google.svg" alt="Google">
25
+    	            <span class="google-button__text">Sign in with Google</span>
26
+    	        </button>
27
+    	    </div>
28
+    	</header>
29
+	
30
+  	  	<section id="showcase">
31
+   	     	<div id="showcase-text">
32
+    	        <div id="showcase-heading">
33
+                	Momentary Assesment Research Made Simple
34
+   	         	</div>
35
+    	        <div id="showcase-link">
36
+     	           <a onclick="window.location='<?php echo $loginURL; ?>'">Get Started</a>
37
+     	       </div>
38
+    	    </div>
39
+   	 	</section>	
40
+   	 	
41
+		<main id="home-main">
42
+        	<div id="main-sidebar">
43
+            	<h3>About</h3>
44
+        	    <ul>
45
+            	    <li><a href="#what-we-do" class="active">What We Do</a></li>
46
+                	<li><a href="#team">Team</a></li>
47
+	                <li><a href="#contact">Contact</a></li>
48
+    	        </ul>
49
+    	    </div>
50
+
51
+    	    <div class="main-content">
52
+    	    
53
+        	    <div id="what-we-do" class="main-content-box show">
54
+	                <h3>The problem</h3>
55
+    	            <p>Most research on REUs rely on retrospective recollection of experiences often limited by memory and conditioned to recall bias, where information is selectively withheld or revealed.</p>
56
+        	        <h3>Our proposal</h3>
57
+                	<p>To improve the evaluation strategies of REUs, we propose using Momentary Assessments Research Learning Environments (MARLE), a method used in clinical psychology to repeatedly sample momentary behaviors in real time within the natural environment of an experience or intervention.</p>
58
+                	<br>
59
+                	<hr class="login-hr">
60
+                	<br>
61
+            	</div>
62
+
63
+            	<div id="team" class="main-content-box">
64
+                	<h3>We are a team of professors and students</h3>
65
+                	<div id="team-images">
66
+                	    <img src="img/juan.png" alt="Juan">
67
+						<!-- <img src="img/ivonne.png" alt="Ivonne"> -->
68
+                	    <img src="img/CDCC.png" alt="CDCC" style="background-color: #eee; padding: 5px;">
69
+                	    <!-- <img src="./img/victor.jpg" alt="Víctor" style="height: 100px; width: 100px; border-radius: 50%;"> -->
70
+                		<!-- <img src="./img/hector.jpg" alt="Héctor" style="height: 100px; width: 100px; border-radius: 50%;"> -->
71
+                    	<!-- <img src="./img/tatiana.jpg" alt="Tatiana" style="height: 100px; width: 100px; border-radius: 50%;"> -->
72
+                    	<!-- <img src="./img/coralys.jpg" alt="Coralys" style="height: 100px; width: 100px; border-radius: 50%;"> -->
73
+                    	<!-- <img src="./img/carlos.jpg" alt="Carlos" style="height: 100px; width: 100px; border-radius: 50%;"> -->
74
+                	</div>
75
+					<!-- Dr. Ivonne Vele (Department of Education) -->
76
+                	<p>This is the result of a collaboration between Dr. Juan Ramírez (Department of Biology), and the CDCC at the University of Puerto Rico, Río Piedras Campus.</p>
77
+                	<br>
78
+                	<hr class="login-hr">
79
+                	<br>
80
+            	</div>
81
+
82
+            	<div id="contact" class="main-content-box">
83
+            	    <h3>Contact Us</h3>
84
+            	    <p>Care to use TANIA? Or just curious about the project? Whichever may be the case, don't hesitate to contact Dr. Juan Ramírez!</p>
85
+            	    <br>
86
+            	    <div id="contact-info">
87
+            	    <p>17 Ave. Universidad STE 1701 San Juan, PR 00925-2537</p>
88
+            	    <p>787.764.0000 Ext. 88341, 88349 Fax:787.773.1717</p>
89
+            	    <p>juan.ramirez3@upr.edu</p>
90
+            	    </div>
91
+            	    <br>
92
+            	    <hr class="login-hr hidden-xs">
93
+            	    <br>
94
+            	</div>
95
+            	
96
+            	<br><br><br>
97
+            	
98
+        	</div>
99
+    	</main>
100
+    	
101
+    	<script src="js/index.js"></script>
102
+    	
103
+		<!-- END OF index.php -->
104
+		
105
+<?php include_once 'footer.php'; ?>

+ 51
- 0
js/editQuestion.js View File

@@ -0,0 +1,51 @@
1
+$('#EditQuestion').on('show.bs.modal', function(event) {
2
+  var tableRow = $(event.relatedTarget);
3
+  var questionNumber = $(tableRow).data('question-number');
4
+//   var questionnaireID = $(tableRow).data('questionnaire-id');
5
+  var questionID = $(tableRow).data('question-id');
6
+  var premise = $(tableRow).data('premise');
7
+  var type = $(tableRow).data('type');
8
+  var min_text = $(tableRow).data('min_text');
9
+  var max_val = $(tableRow).data('max_val');
10
+  var max_text = $(tableRow).data('max_text');
11
+  var categoryID = $(tableRow).data('categoryid');
12
+  var subcategoryID = $(tableRow).data('subcategoryid');
13
+  var modal = $(this);
14
+  
15
+//   console.log('questionNumber' + questionNumber);
16
+//   console.log('questionnaireID' + questionnaireID);
17
+//   console.log('questionID' + questionID);
18
+//   console.log('premise' + premise);
19
+//   console.log('type' + type);
20
+//   console.log('min_text' + min_text);
21
+//   console.log('max_val' + max_val);
22
+//   console.log('max_text' + max_text);
23
+//   console.log('categoryID' + categoryID);
24
+//   console.log('subcategoryID' + subcategoryID);
25
+//   console.log(modal);
26
+  
27
+  deleteModal = $('#Delete');
28
+  deleteModal.find('.modal-body [name=questionID]').val(questionID);
29
+  deleteModal.find('.modal-body .question-number').text(questionNumber);
30
+
31
+  modal.find('.modal-body .question-number').text(questionNumber);  
32
+//   modal.find('.modal-body input[name="questionnaireID"]').val(questionnaireID);
33
+  modal.find('.modal-body input[name="questionID"]').val(questionID);
34
+  modal.find('.modal-body input[name="update_q_premise"]').val(premise);
35
+  modal.find('.modal-body select[name="update_q_type"]').val(type);
36
+  // min_val not necessary (always 1)
37
+  modal.find('.modal-body input[name="update_min_text"]').val(min_text);
38
+  modal.find('.modal-body input[name="update_max_val"]').val(max_val);
39
+  modal.find('.modal-body input[name="update_max_text"]').val(max_text);
40
+  modal.find('.modal-body select[name="update_q_category"]').val(categoryID);
41
+  modal.find('.modal-body select[name="update_q_subcategory"]').val(subcategoryID);
42
+
43
+
44
+  if(type === 2) {
45
+    modal.find('.modal-body .range').css('display', 'none');
46
+  } else if(type === 1) {
47
+  	modal.find('.modal-body .range').css('display', 'block');
48
+  }
49
+
50
+  
51
+});

+ 172
- 0
js/handleSubmit.js View File

@@ -0,0 +1,172 @@
1
+function handleSubmit(event, formName) {
2
+
3
+	// Prevent naive submit
4
+	event.preventDefault();
5
+
6
+
7
+	// Fetch error description element
8
+	var errorDescription = document.querySelector('#error-'+formName+' .error-description');
9
+	var submitButton = document.querySelector('#'+formName+' button[type="submit"]');
10
+
11
+
12
+	// Disable button and start "Loading" state
13
+	submitButton.disabled = true;
14
+	submitButton.classList.remove('btn-danger');
15
+	submitButton.classList.add('btn-primary');
16
+	submitButton.innerHTML = '<div class="loader"></div>Loading...';
17
+
18
+
19
+	// Fetch all input from form
20
+	var fields = {};
21
+	$("form#" + formName).find("input, textarea, select, button[type='submit']").each(function() {
22
+		var input = $(this);
23
+		fields[input.attr('name')] = input.val();
24
+	});
25
+
26
+
27
+	// Construct request URL (make sure to use http or https accordingly)
28
+	var baseURI = document.location.protocol + "//tania.uprrp.edu/admin_nuevo/processes/";
29
+	var fullURI = baseURI;
30
+
31
+	switch(formName) {
32
+	
33
+		// home.php
34
+		case "newExperience":
35
+			fullURI += "insertExperience.php";
36
+			break;
37
+		
38
+		// viewExperience.php
39
+		case "editForm":
40
+			fullURI += "updateExperience.php";
41
+			break;
42
+		case "newQuestionnaire":
43
+			fullURI += "insertQuestionnaire.php";
44
+			break;
45
+		case "newMoment":
46
+		 	fullURI += "insertMoment.php";
47
+		 	break;
48
+		case "newMilestone":
49
+			fullURI += "insertMilestone.php";
50
+			break;
51
+		
52
+		// viewQuestionnaire.php
53
+		case "updateQuestionnaire":
54
+			fullURI += "updateQuestionnaire.php";
55
+			break;
56
+		case "deleteQuestionnaire":
57
+			fullURI += "deleteQuestionnaire.php";
58
+			break;
59
+		case "newQuestion":
60
+			fullURI += "insertQuestionToQuestionnaire.php";
61
+			break;
62
+		case "deleteQuestion":
63
+			fullURI += "deleteQuestion.php";
64
+			break;
65
+		
66
+		// viewMoment.php
67
+		case "updateMoment":
68
+			fullURI += "updateMoment.php";
69
+			break;
70
+		case "deleteMoment":
71
+			fullURI += "deleteMoment.php";
72
+			break;
73
+		case "removeQuestionFromMoment":
74
+			fullURI += "removeQuestionFromMoment.php";
75
+			break;
76
+		case "addExistingQuestionToMoment":
77
+			fullURI += "addExistingQuestionToMoment.php";
78
+			break;
79
+		
80
+		// Both viewMoment.php and viewQuestionnaire.php
81
+		case "updateQuestion":
82
+			fullURI += "updateQuestion.php";
83
+			break;
84
+			
85
+
86
+		
87
+		default:
88
+			fullURI = document.location.protocol + '//tania.uprrp.edu/admin_nuevo/test.php';
89
+			
90
+	}
91
+
92
+// 	console.log(JSON.stringify(fields) + "\n" + fullURI);
93
+
94
+
95
+	// Use fullURI to make POST request w/ jQuery,
96
+	// Wait for response (start "Loading" state),
97
+	// Act according to error or success
98
+			
99
+//	!!!!!! SHOULD ADD TIMEOUT TO REQUESTS TO !!!!!!!
100
+	$.post(fullURI, fields)
101
+		.done(function(data, text) {
102
+				
103
+			console.log(data + "and" + text);
104
+
105
+			// Fetch needed elements
106
+			let alert = document.querySelector('#error-'+formName+' .alert');
107
+			let errorLead = document.querySelector('#error-'+formName+' .error-lead');
108
+
109
+
110
+			// Clear errors and change message to "Success"
111
+			errorDescription.remove();
112
+			errorLead.innerText = "Success!";
113
+			errorLead.style.marginBottom = "0";
114
+
115
+
116
+			// Change alert style to "Success"
117
+			alert.classList.remove('alert-danger');
118
+			alert.classList.add('alert-success');
119
+
120
+
121
+			// Change button style to "Success"
122
+			submitButton.classList.remove('btn-primary');
123
+			submitButton.classList.add('btn-success');
124
+			submitButton.innerHTML = '<span class="glyphicon glyphicon-ok"></span> Success!';// could use &#10004;
125
+
126
+
127
+			// Reload page
128
+			setTimeout(function() {
129
+			
130
+				let deleteForms = ["deleteQuestionnaire", "deleteMoment", "deleteExperience"];
131
+			
132
+				if(deleteForms.includes(formName)) {
133
+					history.back(); // go back to viewExperience page (remember we don't know the ID of the experience it came from)
134
+				} else {
135
+					location.reload();
136
+				}
137
+				
138
+			}, 250);
139
+
140
+		})
141
+		.fail(function(request, status, error) {
142
+				
143
+			console.log(request.responseText);
144
+			console.log(status);
145
+			console.log(error);
146
+	
147
+			// Fetch needed elements
148
+			let alertContainer = document.getElementById('error-'+formName);
149
+					
150
+			// If response is not a JSON, or if JSON doesn't have "error" field, say so
151
+			// else, dynamically update error message according to server
152
+			if(!isJSON(request.responseText) || JSON.parse(request.responseText).error === undefined) {
153
+				errorDescription.innerText = "Something went wrong on our side! Please try again later.";
154
+			} else {
155
+				errorDescription.innerText = JSON.parse(request.responseText).error;
156
+			}
157
+
158
+			// Change button style to "Retry"
159
+			submitButton.innerHTML = "Retry";
160
+			submitButton.disabled = false;
161
+					
162
+			// Display alert
163
+			alertContainer.style.display = "initial";
164
+
165
+		});
166
+// 		.always(function(data, textStatus, errorThrown) {
167
+// 			console.log(data);
168
+// 			console.log(textStatus);
169
+// 			console.log(errorThrown);
170
+// 		});
171
+
172
+}

+ 77
- 0
js/home.js View File

@@ -0,0 +1,77 @@
1
+///// !!! home.php !!! /////
2
+
3
+
4
+
5
+// Target the input fields to be updated
6
+let startDate = document.querySelector('input[name=start]');
7
+let endDate = document.querySelector('input[name=end]');
8
+let duration = document.querySelector('input[name=duration]');
9
+
10
+
11
+
12
+// For new experiences, the minimum start date is tomorrow and the maximum is a year from tomorrow
13
+function setStartDateRange() {
14
+
15
+	/* Compute the today, tomorrow and the year after tomorrow */
16
+// 	let today = new Date();
17
+// 	today.setHours(0, 0, 0, 0); // (default to 00:00:00)
18
+// 	let tomorrow = new Date(today);
19
+// 	tomorrow.setDate(tomorrow.getDate() + 1);
20
+// 	let aYearFromTomorrow = new Date(tomorrow);
21
+// 	aYearFromTomorrow.setDate(aYearFromTomorrow.getDate() + 365);
22
+
23
+	// Set minimum start date to tomorrow
24
+// 	startDate.min = tomorrow.toLocaleDateString();
25
+	
26
+	// Set maximum start date to a year from tomorrow
27
+// 	startDate.max = aYearFromTomorrow.toLocaleDateString();
28
+
29
+	if(!isNaN(Date.parse(startDate.value)) && !isNaN(Date.parse(endDate.value))) {
30
+		if(Date.parse(startDate.value) > Date.parse(endDate.value)) {
31
+			endDate.value = startDate.value;
32
+		}
33
+	}
34
+	
35
+}
36
+
37
+
38
+
39
+// For new experiences, the minimum end date is the day after the start date and the maximum is a year from the minimum end date
40
+function setEndDateRange() {
41
+	
42
+	/* Compute the day after the start date value, and the year after that */
43
+// 	let dayAfterStart = new Date(startDate.value);
44
+// 	dayAfterStart.setDate(dayAfterStart.getDate() + 1 + 1); // (additional 1 necessary because of line above, apparent 0-indexing)
45
+// 	let aYearFromMinimumEnd = new Date(dayAfterStart);
46
+// 	aYearFromMinimumEnd.setDate(aYearFromMinimumEnd.getDate() + 365);
47
+	
48
+	// Set minimum end date to the day after the start date
49
+// 	endDate.min = dayAfterStart.toLocaleDateString();
50
+	
51
+	// Set maximum end date to a year from the minimum end date
52
+// 	endDate.max = aYearFromMinimumEnd.toLocaleDateString();
53
+
54
+	if(!isNaN(Date.parse(startDate.value)) && !isNaN(Date.parse(endDate.value))) {
55
+		if(Date.parse(startDate.value) > Date.parse(endDate.value)) {
56
+			startDate.value = endDate.value;
57
+		}
58
+	}
59
+
60
+}
61
+
62
+
63
+
64
+// For new experiences, the duration (in weeks) will be the rounded weeks from start to end dates
65
+function setDuration() {
66
+
67
+	// Calculate the duration in weeks
68
+	x = new Date(startDate.value);
69
+	x.setDate(x.getDate() + 1); // (additional 1 necessary because of line above, apparent 0-indexing)
70
+	y = new Date(endDate.value);
71
+	y.setDate(y.getDate() + 1); // (additional 1 necessary because of line above, apparent 0-indexing)
72
+	
73
+	duration.value = String(Math.max(Math.round((y - x) / 604800000), 0)); // (1000 * 60 * 60 * 24 * 7 = 604800000)
74
+
75
+}
76
+
77
+

+ 39
- 0
js/index.js View File

@@ -0,0 +1,39 @@
1
+///// !!! index.php !!! /////
2
+
3
+// Get tab links and tab panes
4
+let tabLinks = document.querySelectorAll('#main-sidebar a');
5
+let tabPanes = document.querySelectorAll('.main-content-box');
6
+
7
+
8
+
9
+// Add event listener to all tab links
10
+tabLinks.forEach(tabLink => {
11
+	tabLink.addEventListener('click', tabChange);
12
+});
13
+
14
+
15
+
16
+// Add selected link style and remove those who were not selected
17
+function tabChange(e) {
18
+
19
+    e.preventDefault();
20
+    
21
+    // Change the style of the links
22
+    tabLinks.forEach(tabLink => {
23
+    	if(tabLink === e.target) {
24
+    		tabLink.classList.add('active');
25
+    	} else {
26
+    		tabLink.classList.remove('active');
27
+    	}
28
+    });
29
+
30
+    // Change the opacity of each of the panes
31
+    tabPanes.forEach(tabPane => {
32
+    	if(tabPane.id === e.target.hash.substring(1)) {
33
+			tabPane.classList.add('show');
34
+    	} else {
35
+			tabPane.classList.remove('show');
36
+    	}
37
+    });
38
+
39
+}

+ 146
- 0
js/main.js View File

@@ -0,0 +1,146 @@
1
+///// !!! GLOBAL FUNCTIONS !!! /////
2
+
3
+
4
+
5
+// CHECKS THAT STRINGS ARE JSON
6
+function isJSON(item) {
7
+
8
+// 	item = (typeof item !== "string")
9
+// 		? JSON.stringify(item)
10
+// 		: item;
11
+
12
+    try {
13
+        item = JSON.parse(item);
14
+    } catch (e) {
15
+        return false;
16
+    }
17
+
18
+    return (typeof item === "object" && item !== null);
19
+
20
+}
21
+
22
+
23
+
24
+// MODAL SWITCHING FUNCTION (home.php & viewExperience.php)
25
+function nextModal(name) {
26
+	$('[data-toggle="tooltip"]').tooltip('hide');
27
+	setTimeout(() => $(name).modal('show'), 100);
28
+}
29
+
30
+
31
+
32
+// Disable 'enter' key from submitting forms
33
+// $('form').keypress(function(event){ if (event.which == '13') { event.preventDefault(); } } );
34
+// $('[form]:not(button[form])').keypress(function(event){ if (event.which == '13') { event.preventDefault(); } } );
35
+
36
+
37
+
38
+// NUMBER INPUT SANITIZATION (home.php & viewExperience.php)
39
+$('input[type="number"]').on('change keyup', () => {
40
+
41
+	// Remove invalid characters
42
+	var sanitized = $(this).val().replace(/[^0-9]/g, '');
43
+	
44
+	// Update value
45
+	$(this).val(sanitized);
46
+	
47
+});
48
+
49
+
50
+
51
+// DATE INPUT DATEPICKER (home.php & viewExperience.php)
52
+// Taken from: http://www.javascriptkit.com/javatutors/createelementcheck2.shtml
53
+// If browser doesn't support input type="date", load files for jQuery UI Date Picker
54
+let testDateField = document.createElement("input");
55
+
56
+testDateField.setAttribute("type", "date");
57
+
58
+if(testDateField.type != "date") {
59
+	
60
+	// First load the CSS ("base" theme) for the calendar
61
+	document.write('<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n');
62
+	
63
+	// Then load the calendar functionality
64
+    document.write('<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>\n');
65
+   	
66
+   	// Initialize date picker widget (on document.ready)
67
+   	// Help: https://jqueryui.com/datepicker/#min-max
68
+   	window.onload = () => {
69
+   		if($('input[type="date"]').length !== 0) {
70
+	   		jQuery(($) => $('input[type="date"]').datepicker({ minDate: 0, maxDate: "+1Y"}));
71
+   		}
72
+	}
73
+	
74
+}
75
+
76
+
77
+
78
+// FOOTER COPYRIGHT YEAR
79
+let date = new Date().getFullYear();
80
+document.getElementById('copyrightDate').innerHTML = date;
81
+
82
+
83
+
84
+
85
+
86
+
87
+
88
+
89
+
90
+
91
+
92
+
93
+
94
+
95
+// !!! FROM HERE ON DOWN, THERE'S ONLY OLD CODE !!! //
96
+
97
+
98
+
99
+// Declaration and initialization of the "naming counter" 
100
+var selectionCounter = 2;
101
+
102
+// WHEN WANTING TO ADD MULTIPLE QUESTIONNAIRES TO AN EXPERIENCE (newExperience.php and editExperience.php)
103
+function AddQuestionnaire() {
104
+
105
+    // We add two linebreaks so that there is space between each dropdown list
106
+    var br = document.createElement('br');
107
+    document.getElementById('addQuestionnaires').appendChild(br);
108
+    br = document.createElement('br');
109
+    document.getElementById('addQuestionnaires').appendChild(br);
110
+        
111
+    // We create a copy of the dropdown list we already have, so multiple questions can be added at the same time
112
+    var select = document.getElementById('questionnaire');
113
+    var clone = select.cloneNode(true);
114
+        
115
+    // The clones will have the same name as the original but with a number that will distinguish them
116
+    var name = select.getAttribute('name') + selectionCounter++;
117
+    clone.id = name;
118
+    clone.setAttribute('name', name);
119
+    document.getElementById('addQuestionnaires').appendChild(clone);
120
+    //document.getElementById("demo").innerHTML = selectionCounter;
121
+}
122
+
123
+// Reinitialization of the "naming counter"
124
+selectionCounter = 2;
125
+
126
+// WHEN WANTING TO ADD MULTIPLE QUESTIONS TO A QUESTIONNAIRE (newQuestionnaire.php and editQuestionnaire.php)
127
+function AddQuestion() { 
128
+    
129
+    // We add a linebreak so that there is space between each dropdown list
130
+    var br = document.createElement("br");
131
+    document.getElementById("addQuestions").appendChild(br)
132
+    var br2 = document.createElement("br");
133
+    document.getElementById("addQuestions").appendChild(br2)
134
+
135
+    // We create a copy of the dropdown list we already have, so multiple questions can be added at the same time.
136
+    var select = document.getElementById("question");
137
+    var clone = select.cloneNode(true);
138
+
139
+    // The clones will have the same name as the original but with a number that will distinguish them
140
+    var name = select.getAttribute("name") + selectionCounter++;
141
+    clone.id = name;
142
+    clone.setAttribute("name", name)
143
+    document.getElementById("addQuestions").appendChild(clone)
144
+    //document.getElementById("demo").innerHTML = selectionCounter;  	
145
+}
146
+

BIN
js/nameOfTheQuestionnair.xlsx View File


+ 242
- 0
js/viewExperience.js View File

@@ -0,0 +1,242 @@
1
+///// !!! viewExperience.php !!! /////
2
+
3
+
4
+
5
+// Get tab links and tab panes
6
+let tabLinks = document.querySelectorAll('#view-experience-tabs a');
7
+let tabPanes = document.querySelectorAll('.main-content-box');
8
+
9
+
10
+
11
+// Add event listener to all tab links
12
+// tabLinks.forEach(tabLink => {
13
+// 	tabLink.addEventListener('click', tabChange);
14
+// });
15
+window.onload = tabChange;
16
+window.onhashchange = tabChange;
17
+
18
+
19
+
20
+// Add selected link style and remove those who were not selected
21
+function tabChange() {
22
+
23
+	let hash = document.location.hash;
24
+	
25
+	validHashes = ['#calendar', '#questionnaires', '#moments', '#milestones'];
26
+	
27
+	if(!validHashes.includes(hash)) {
28
+		hash = '#calendar';
29
+	}
30
+
31
+    // Change the style of the links
32
+    tabLinks.forEach(tabLink => {
33
+    	if(tabLink.hash === hash) {//tabLink === e.target
34
+    		tabLink.classList.add('active');
35
+    	} else {
36
+    		tabLink.classList.remove('active');
37
+    	}
38
+    });
39
+
40
+    // Change the opacity of each of the panes
41
+    tabPanes.forEach(tabPane => {
42
+    	if(tabPane.id === hash.substring(1)) {// tabPane.id === e.target.hash.substring(1)
43
+			tabPane.classList.add('show');
44
+    	} else {
45
+    		tabPane.classList.remove('show');
46
+    	}
47
+    });
48
+    
49
+    // Re-render calendar
50
+    if(calendar && hash === '#calendar') {
51
+    	calendar.render();
52
+    }
53
+
54
+}
55
+
56
+		
57
+		
58
+
59
+
60
+
61
+
62
+
63
+
64
+
65
+
66
+function newThing(e) {
67
+	let type = e.currentTarget.value;
68
+	let range = e.currentTarget.parentNode.parentNode.parentNode.nextElementSibling; // get the 4 (optional) inputs for scaled-type questions
69
+	range.style.display = (type === "1") ? 'block' : 'none'; // "1" corresponds to scaled questions
70
+}
71
+	
72
+	
73
+	
74
+// Add Question to Questionnaire							
75
+var Questions = 1;
76
+function addQuestion() {
77
+	// We add a linebreak so that there is space between each dropdown list
78
+	var br = document.createElement("br");
79
+	document.querySelector('#q'+Questions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', br);
80
+
81
+	// We create a copy of the dropdown list we already have, so multiple questions can be added at the same time.
82
+	var newQuestion = document.getElementById("q"+Questions);
83
+	var clone = newQuestion.cloneNode(true);
84
+
85
+	//The clones will have the same name as the original but with a number that will distinguish them
86
+	var newName = 'q' + Number(Questions + 1);
87
+	clone.id = newName;
88
+								
89
+	document.querySelector('#q'+Questions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', clone);
90
+    							
91
+	document.querySelector('#'+newName+' h4').innerHTML = 'Question '+Number(Questions+1);
92
+    							
93
+	document.querySelector('#'+newName+' #q_premise'+Questions).name = 'q_premise'+Number(Questions+1);
94
+	document.querySelector('#'+newName+' #q_premise'+Questions).id = 'q_premise'+Number(Questions+1);
95
+			
96
+	// Get the question type before changing it's name/id (for some reason it doesn't pass it on)
97
+	let type = $(newQuestion).find("#q_type"+Questions).val();
98
+	document.querySelector('#'+newName+' #q_type'+Questions).value = type;
99
+	document.querySelector('#'+newName+' #q_type'+Questions).name = 'q_type'+Number(Questions+1);
100
+	document.querySelector('#'+newName+' #q_type'+Questions).id = 'q_type'+Number(Questions+1);
101
+	
102
+	// Depending on the question type, display or hide min/max values/labels
103
+	if(type == "1") {
104
+		document.querySelector('#'+newName+' #range'+Questions).style.display = "block";
105
+	} else if(type == "2") {
106
+		document.querySelector('#'+newName+' #range'+Questions).style.display = "none";
107
+	}
108
+	
109
+	document.querySelector('#'+newName+' #range'+Questions).id = 'range'+Number(Questions+1);
110
+								
111
+	document.querySelector('#'+newName+' #min_val'+Questions).name = 'min_val'+Number(Questions+1);
112
+	document.querySelector('#'+newName+' #min_val'+Questions).id = 'min_val'+Number(Questions+1);
113
+								
114
+	document.querySelector('#'+newName+' #min_text'+Questions).name = 'min_text'+Number(Questions+1);
115
+	document.querySelector('#'+newName+' #min_text'+Questions).id = 'min_text'+Number(Questions+1);
116
+    							
117
+	document.querySelector('#'+newName+' #max_val'+Questions).name = 'max_val'+Number(Questions+1);
118
+	document.querySelector('#'+newName+' #max_val'+Questions).id = 'max_val'+Number(Questions+1);
119
+
120
+	document.querySelector('#'+newName+' #max_text'+Questions).name = 'max_text'+Number(Questions+1);
121
+	document.querySelector('#'+newName+' #max_text'+Questions).id = 'max_text'+Number(Questions+1);
122
+
123
+	// Get the question type before changing it's name/id (for some reason it doesn't pass it on)
124
+	let category = $(newQuestion).find("#q_category"+Questions).val();
125
+	document.querySelector('#'+newName+' #q_category'+Questions).value = category;
126
+	document.querySelector('#'+newName+' #q_category'+Questions).name = 'q_category'+Number(Questions+1);
127
+	document.querySelector('#'+newName+' #q_category'+Questions).id = 'q_category'+Number(Questions+1);
128
+
129
+	// Get the question type before changing it's name/id (for some reason it doesn't pass it on)
130
+	let subcategory = $(newQuestion).find("#q_subcategory"+Questions).val();
131
+	document.querySelector('#'+newName+' #q_subcategory'+Questions).value = subcategory;
132
+	document.querySelector('#'+newName+' #q_subcategory'+Questions).name = 'q_subcategory'+Number(Questions+1);
133
+	document.querySelector('#'+newName+' #q_subcategory'+Questions).id = 'q_subcategory'+Number(Questions+1);
134
+								
135
+	Questions++;
136
+	
137
+// 	$('[form]:not(button[form])').keypress(function(event){if (event.which == '13') { event.preventDefault(); } } );
138
+	
139
+}
140
+
141
+
142
+
143
+// For new questionnaires, create the dropdown for category selection
144
+let categoriesString = document.querySelector('#q_categories_tentative');
145
+categoriesString.addEventListener('change', function() {
146
+
147
+	// split input by commas
148
+	let x = document.getElementById('q_categories_tentative').value.split(',');
149
+	let y;// = '<option disabled selected>Category</option>';
150
+		
151
+	// clear any whitespace from each word in the split input
152
+	for(let i = 0; i < x.length; i++) {
153
+		x[i] = x[i].trim();
154
+		
155
+		// if string not empty and not whitespace, insert as category option
156
+		if(/\S/.test(x[i])) {
157
+			y += '<option value="'+x[i]+'">'+x[i]+'</option>';
158
+		}
159
+	}
160
+	
161
+	// change the selectable categories
162
+	$("[id^=q_category]").html(y);
163
+
164
+});
165
+
166
+
167
+
168
+// For new questionnaires, create the dropdowns for subcategory selection
169
+let subcategoriesString = document.querySelector('#q_subcategories_tentative');
170
+subcategoriesString.addEventListener('change', function() {
171
+
172
+	// split input by commas
173
+	let x = document.getElementById('q_subcategories_tentative').value.split(',');
174
+	let y;// = '<option disabled selected>Subcategory</option>';
175
+		
176
+	// clear any whitespace from each word in the split input
177
+	for(let i = 0; i < x.length; i++) {
178
+		x[i] = x[i].trim();
179
+		
180
+		// if string not empty and not whitespace, insert as category option
181
+		if(/\S/.test(x[i])) {
182
+			y += '<option value="'+x[i]+'">'+x[i]+'</option>';
183
+		}
184
+	}
185
+	
186
+	// change the selectable categories
187
+	$("[id^=q_subcategory]").html(y);
188
+
189
+});
190
+
191
+
192
+
193
+// For new moments, create the dropdowns for question selection
194
+let correspondingQuestionnaire = document.querySelector('select#m_questionnaire');
195
+correspondingQuestionnaire.addEventListener('change', function() {
196
+	$.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special.php",
197
+		{
198
+			id_questionnaire: correspondingQuestionnaire.value
199
+		},
200
+		function(data, status) {
201
+			$("select[id^=m_question_]").html(data);
202
+		}
203
+	);
204
+});
205
+
206
+
207
+
208
+// Target the input fields to be updated
209
+let newStartDate = document.querySelector('input[name=newStart]');
210
+let newEndDate = document.querySelector('input[name=newEnd]');
211
+let newDuration = document.querySelector('input[name=newDuration]');
212
+
213
+
214
+
215
+var selectableQuestions = 1;
216
+function addSelectableQuestion() {
217
+
218
+	var br = document.createElement("br");
219
+	document.querySelector('#qq'+selectableQuestions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', br);
220
+	
221
+	// We create a copy of the dropdown list we already have, so multiple questions can be added at the same time.
222
+	var newQuestion = document.getElementById("qq"+selectableQuestions);
223
+	var clone = newQuestion.cloneNode(true);
224
+
225
+	//The clones will have the same name as the original but with a number that will distinguish them
226
+	var newName = 'qq' + Number(selectableQuestions + 1);
227
+	clone.id = newName;
228
+	
229
+	document.querySelector('#qq'+selectableQuestions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', clone);
230
+    							
231
+	document.querySelector('#'+newName+' h4').innerHTML = 'Question '+Number(selectableQuestions+1);
232
+    							
233
+	document.querySelector('#'+newName+' #m_question_'+selectableQuestions).name = 'm_question_'+Number(selectableQuestions+1);
234
+	document.querySelector('#'+newName+' #m_question_'+selectableQuestions).id = 'm_question_'+Number(selectableQuestions+1);
235
+								
236
+	selectableQuestions++;
237
+	
238
+// 	$('[form]:not(button[form])').keypress(function(event){if (event.which == '13') { event.preventDefault(); } } );
239
+
240
+}
241
+
242
+

+ 5
- 0
js/viewMoment.js View File

@@ -0,0 +1,5 @@
1
+function newThing(e) {
2
+	let type = e.currentTarget.value;
3
+	let range = e.currentTarget.parentNode.parentNode.parentNode.nextElementSibling; // get the 4 (optional) inputs for scaled-type questions
4
+	range.style.display = (type === "1") ? 'block' : 'none'; // "1" corresponds to scaled questions
5
+}

+ 5
- 0
js/viewQuestionnaire.js View File

@@ -0,0 +1,5 @@
1
+function newThing(e) {
2
+	let type = e.currentTarget.value;
3
+	let range = e.currentTarget.parentNode.parentNode.parentNode.nextElementSibling; // get the 4 (optional) inputs for scaled-type questions
4
+	range.style.display = (type === "1") ? 'block' : 'none'; // "1" corresponds to scaled questions
5
+}

BIN
nameOfTheQuestionnair.xlsx View File


+ 342
- 0
old_code/bankOfQuestions.php View File

@@ -0,0 +1,342 @@
1
+<?php
2
+
3
+	require_once 'processes/config.php';
4
+	require_once 'processes/dbh.inc.php';
5
+	require_once 'processes/checkLogin.php';
6
+	include_once 'header.php';
7
+	
8
+	// IF USER HAS QUESTIONS, DISPLAY THEM
9
+	// ELSE DON'T DISPLAY THE EMPTY TABLE
10
+	// CAMBIAR $query A "SELECT * FROM `question` WHERE `id_researcher`='".$dbUserData['id_researcher']."';"
11
+	$query1 = "SELECT * FROM `question` WHERE `id_category` IN(SELECT `id` FROM `category`) AND `id_subcategory` IN(SELECT `id` FROM `subcategory`);";
12
+	$result1 = mysqli_query($connection, $query1);
13
+	$x = 1;
14
+	
15
+?>  
16
+		<!-- START OF bankOfQuestions.php -->
17
+		<div class='container'>
18
+		
19
+			<div class='row'>
20
+				<div class='col-sm-10'>
21
+					<h2>Bank Of Questions</h2>
22
+					<p>View, add, and delete any question you like so that, later on, you can create a questionnaire.</p>
23
+				</div>
24
+				<div class='col-sm-2'>
25
+					<br><br>
26
+					<button id='adding' type='button' class='btn btn-default' data-toggle='modal' data-target='#New'>Add Question</button>
27
+				</div>
28
+			</div><!--row-->
29
+		
30
+			<div class='row'><div class='col'><br><hr><br></div></div>
31
+			
32
+			<?php if($result1): ?>
33
+			<div class='row'>
34
+				<div class='col'>
35
+					<table class='table table-hover table-striped' id='tableEvaluations'>
36
+						<thead>
37
+							<tr>
38
+								<th><h4>#</h4></th>
39
+								<th><h4>Premise</h4></th>
40
+								<th><h4>Category</h4></th>
41
+								<th><h4>Subcategory</h4></th>
42
+							</tr>
43
+						</thead>
44
+						<tbody>
45
+						<?php
46
+							while($row = mysqli_fetch_array($result1)):
47
+								$subquery1 = "SELECT `category`.`categoria` FROM `category` WHERE `category`.`id`=(SELECT `question`.`id_category` FROM `question` WHERE `question`.`id`=".$row['id'].");";
48
+								$subresult1 = mysqli_query($connection, $subquery1);
49
+								$subrow1 = mysqli_fetch_array($subresult1);
50
+								$subquery2 = "SELECT `subcategory`.`subcategoria` FROM `subcategory` WHERE `subcategory`.`id`=(SELECT `question`.`id_subcategory` FROM `question` WHERE `question`.`id`=".$row['id'].");";
51
+								$subresult2 = mysqli_query($connection, $subquery2);
52
+								$subrow2 = mysqli_fetch_array($subresult2);
53
+						?>
54
+							<tr>
55
+								<th><?php echo $row['id']; ?></th>
56
+								<td class='text-justify' style='width:35em;'><p><?php echo $row['premise']; ?></p></td>
57
+								<td style='width:18em;'><p><?php echo $subrow1['categoria']; ?></p></td>
58
+								<td style='width:18em;'><p><?php echo $subrow2['subcategoria']; ?></p></td>
59
+								<td style='text-align:center;width:10em;'>
60
+									<div class='btn-group'>
61
+										<button type='button' class='btn btn-default btn-sm' data-toggle='modal' data-target='#Edit_<?php echo $row['id']; ?>'>Edit</button>
62
+										<button type='button' class='btn btn-danger btn-sm' data-toggle='modal' data-target='#Delete_<?php echo $row['id']; ?>'>Delete</button>
63
+									</div>
64
+								</td>
65
+							</tr>
66
+						<?php $x++; endwhile; ?>
67
+						</tbody>
68
+					</table>
69
+				</div><!--col-->
70
+			</div><!--row-->
71
+			<?php endif; ?>
72
+			
73
+		</div><!--container-->
74
+		
75
+		<!-- POPUP FOR NEW QUESTION -->
76
+		<form class='form-horizontal' action='processes/insertQuestion.php' method='POST'>
77
+			<div class='modal fade' id='New' tabindex='-1' role='dialog' aria-labelledby='NewLabel' aria-hidden='true'>
78
+				<div class='modal-dialog modal-dialog-centered' role='document'>
79
+ 					<div class='modal-content'>
80
+						
81
+						<div class='modal-header'>
82
+			  	 	  		<h3 class='modal-title' id='NewLabel'>New Question<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button></h3>
83
+   						</div>
84
+ 						
85
+ 						<div class='modal-body'>
86
+
87
+							
88
+							
89
+							<br>
90
+							<!-- PREMISE -->
91
+							<div class='form-group'>
92
+								<label class='col-sm-offset-1 control-label col-sm-2' for='question_premise'>Premise:</label>
93
+								<div class='col-sm-7'>
94
+									<textarea type='text' class='form-control' id='question_premise' name='question_premise' rows=4 style='resize:vertical'></textarea>
95
+								</div>
96
+							</div>
97
+
98
+							<!-- CATEGORY -->
99
+							<div class='form-group'>
100
+								<label class='col-sm-offset-1 control-label col-sm-2' for='question_category'>Category:</label>
101
+								<div class='col-sm-7'>
102
+									<select name='question_category' id='question_category' style='width:100%;'>
103
+										<option disabled selected>Select the Category</option>
104
+										<?php
105
+											// CAMBIAR $query A "SELECT `id`, `categoria` FROM `category` WHERE `id_researcher`='".$dbUserData['id_researcher']."';"
106
+											$query2 = "SELECT `id`, `categoria` FROM `category`;";
107
+											$result2 = mysqli_query($connection, $query2);
108
+											foreach($result2 as $categorias):
109
+										?>
110
+										<option value="<?php echo $categorias['id']; ?>"><?php echo $categorias['categoria']; ?></option>
111
+										<?php endforeach; ?>
112
+									</select>
113
+ 								</div>
114
+							</div>
115
+
116
+							<!-- SUBCATEGORY -->
117
+							<div class='form-group'>
118
+								<label class='col-sm-offset-1 control-label col-sm-2' for='question_subcategory'>Subcategory:</label>
119
+								<div class='col-sm-7'>
120
+									<select name='question_subcategory' id='question_subcategory' style='width:100%;'>
121
+										<option disabled selected>Select the Subcategory</option>
122
+										<?php
123
+											// CAMBIAR $query A "SELECT `id`, `subcategoria` FROM `subcategory` WHERE `id_researcher`='".$dbUserData['id_researcher']."';"
124
+											$query3 = "SELECT `id`, `subcategoria` FROM `subcategory`;";
125
+											$result3 = mysqli_query($connection, $query3);
126
+											foreach($result3 as $subcategorias):
127
+										?>
128
+										<option value="<?php echo $subcategorias['id']; ?>"><?php echo $subcategorias['subcategoria']; ?></option>
129
+										<?php endforeach; ?>
130
+									</select>
131
+ 								</div>
132
+							</div>
133
+
134
+							<!-- TYPE -->
135
+							<div class='form-group'>
136
+								<label class='col-sm-offset-1 control-label col-sm-2' for='question_type'>Type:</label>
137
+								<div class='col-sm-7'>
138
+									<select name='question_type' id='question_type' style='width:100%;'>
139
+										<option disabled selected>Select the Type of Question</option>
140
+										<?php
141
+											// CAMBIAR $query A "SELECT `id`, `description` FROM `type_of_question` WHERE `id_researcher`='".$dbUserData['id_researcher']."';"
142
+											$query4 = "SELECT `id`, `description` FROM `type_of_question`;";
143
+											$result4 = mysqli_query($connection, $query4);
144
+											foreach($result4 as $types):
145
+										?>
146
+										<option value="<?php echo $types['id']; ?>"><?php echo $types['description']; ?></option>
147
+										<?php endforeach; ?>
148
+									</select>
149
+								</div>
150
+							</div>
151
+
152
+							<!-- REFERENCE -->
153
+							<div class='form-group'>
154
+								<label class='col-sm-offset-1 control-label col-sm-2' for='question_reference'>Reference:</label>
155
+								<div class='col-sm-7'>
156
+									<select name='question_reference' id='question_reference' style='width:100%;'>
157
+										<option disabled selected>Select the Reference</option>
158
+										<?php
159
+											// CAMBIAR $query A "SELECT `id`, `referencia` FROM `reference` WHERE `id_researcher`='".$dbUserData['id_researcher']."';"
160
+											$query5 = "SELECT `id`, `referencia` FROM `reference`;";
161
+											$result5 = mysqli_query($connection, $query5);
162
+											foreach($result5 as $references):
163
+										?>
164
+										<option value="<?php echo $references['id']; ?>"><?php echo $references['referencia']; ?></option>
165
+										<?php endforeach; ?>
166
+									</select>
167
+								</div>
168
+							</div>
169
+							<br>
170
+
171
+
172
+
173
+      					</div><!--modal-body-->
174
+