Marle
/
webAdministracion
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
No Description
1 Commit
1 Branch
Tree: e24c9e7c11
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'e24c9e7c11'
${ noResults }
webAdministracion/viewExperience.php

viewExperience.php 50KB
History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448 
  1. <?php

  2. 

  3. 	// Description: EXTRACT EXPERIENCE ID, AND IF VALID, DISPLAY ITS INFO

  4. 

  5. 	require_once 'processes/config.php';

  6. 	require_once 'processes/dbh.inc.php';

  7. 	require_once 'processes/checkLogin.php';

  8. 

  9. 	// IF VIEW VARIABLE NOT GIVEN, EXIT

  10. 	if(!isset($_GET['view'])) {

  11. 		exit();

  12. 	}

  13. 

  14. 	// WARNING: CHANGE QUERY TO INCLUDE "`id_researcher`='".$dbUserData['id_researcher']."';"

  15. 	$experienceID = mysqli_real_escape_string($connection, trim($_GET['view'])); 

  16. 	$query1 = "SELECT * FROM `experience` WHERE `id` = '$experienceID';";

  17. 	$result1 = mysqli_query($connection, $query1) or die("Error: ".mysqli_error($connection));

  18. 	$row1 = mysqli_fetch_array($result1);

  19. 	

  20. 	// IF EXPERIENCE NOT IN DATABASE, EXIT

  21. 	if($result1->num_rows !== 1) {

  22. 		exit();

  23. 	}

  24. 

  25. 	include_once 'header.php';

  26. 	

  27. ?>

  28. 	<!--START OF viewExperience.php -->

  29. 	<body>

  30. 	

  31.     	<header id="main-header">

  32.         	<a id="logo" href=".">

  33. 				TANIA

  34.             	<img src="./img/pen_800x800.png" alt="tania logo pen" width="25" height="25">

  35.         	</a>

  36.         	<div id="account">

  37.             	<a class="nav-link" href="./questionnaires.php">Questionnaire Collection</a>

  38.             	<a class="sign-out" href="./processes/logout.php">Sign Out</a>

  39.         	</div>

  40.     	</header>

  41. 		

  42. 		<div class="container-fluid" id="view-experience-showcase">

  43. 			<div class="row">

  44. 				<div class="col-sm-12">

  45.         	

  46.         			<h2><?php echo $row1['title']; ?></h2>

  47.         			<div class="row">

  48.         			

  49.         				<div class="col-sm-7 col-md-8 col-lg-9">

  50.         		

  51.         		    		<blockquote style="color:rgb(216,216,216); margin: 0;">

  52. 								<h4><b style="color:#fff;">Description:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['description']; ?></span></h4>

  53. 								<h4><b style="color:#fff;">Type:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['type']; ?></span></h4>

  54. 								<h4><b style="color:#fff;">Duration:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['duration_weeks']; ?> week<?php if((int)$row1['duration_weeks'] > 1) echo "s"; ?></span></h4>

  55. 							</blockquote>

  56.             	

  57. 						</div><!--col-->

  58.             	

  59.             	

  60. 						<div class="col-sm-5 col-md-4 col-lg-3">

  61.             		

  62. 							<div id="view-experience-buttons">

  63. 								<div data-toggle="tooltip" data-placement="top" title="View Results" id="experience-pen" onclick="window.location='respuestas.php?exp=<?php echo $experienceID; ?>'">

  64. 									<span class="fas fa-poll-h"></span>

  65. 								</div>

  66. 								<div data-toggle="tooltip" data-placement="top" title="Edit Experience" id="experience-pen" onclick="nextModal('#Edit')">

  67. 									<span class="fas fa-pen"></span>

  68. 								</div>

  69. 								<div data-toggle="tooltip" data-placement="top" title="Share Experience" id="experience-pen" onclick="prompt('Press Ctrl + C to copy to clipboard!','https://tania.uprrp.edu/enrollInExp.php?id=<?php echo $row1['hash_id']; ?>')">

  70. 									<span class="fas fa-link"></span>

  71. 								</div>

  72. 							</div>

  73.             	

  74.           			  	</div><!--col-->

  75.           			  	

  76.         			</div><!--row-->

  77.         	

  78. 		        	<br>

  79.         	

  80.         			<div class="row hidden-xs" id="view-experience-tabs">

  81. 						<a class="active" href="#calendar">Calendar</a>

  82. 						<a href="#questionnaires">Questionnaires</a>

  83. 						<a href="#moments">Moments</a>

  84. 						<a href="#milestones">Milestones</a>

  85. 					</div><!--row-->

  86.         	

  87.         		</div><!--col-->

  88.         	</div><!--row-->

  89.     	</div><!--container-->

  90. 	

  91. 		<br>

  92. 			

  93. 		<!-- CALENDAR-->

  94. 		<div id="calendar" class="main-content-box show hidden-xs">

  95. 			<div class="container">

  96. 		

  97. 				<div class="row">

  98. 					<h3 class="col-sm-12">Schedule Your Experience</h3>

  99. 				</div><!--row-->

  100. 			

  101. 				<br>

  102. 			

  103. 				<div class="row">

  104. 					<div class="col-sm-12">

  105. 						<div id="actualCalendar"></div>

  106. 					</div>

  107. 				</div>

  108. 			

  109. 				<br><br><br><br>

  110. 			

  111. 			</div><!--container-->

  112. 		</div>

  113. 			

  114. 			

  115. 			

  116. 		<!--QUESTIONNAIRES-->

  117. 		<div id="questionnaires" class="main-content-box">

  118. 			<div class="container">

  119. 		

  120. 				<div class="row">

  121. 					<h3 class="col-xs-7 col-sm-9 col-md-9">Active Questionnaires</h3>

  122. 					<div class="col-xs-5 col-sm-3 col-md-3">

  123. 						<!-- 

  124. <span data-toggle="modal" data-target="#Import" style="margin-right: 1em;">

  125. 							<button type="button" class="btn btn-lg btn-default" data-toggle="tooltip" data-placement="top" title="Import Questionnaire">

  126. 								<span class="glyphicon glyphicon-open-file"></span>

  127. 							</button>

  128. 						</span>

  129. 						<span data-toggle="modal" data-target="#Duplicate">

  130. 							<button type="button" class="btn btn-lg btn-default" data-toggle="tooltip" data-placement="top" title="Duplicate Questionnaire">

  131. 								<span class="glyphicon glyphicon-paste"></span>

  132. 							</button>

  133. 						</span>

  134.  -->

  135. 							<div id="view-experience-buttons">

  136. 								<div data-toggle="tooltip" data-placement="top" title="Import Questionnaire" id="experience-pen" onclick="nextModal('#Import')" style="padding: 0.5em; margin: 0 auto; width: 60px;">

  137. 									<span class="fas fa-file-import"></span>

  138. 								</div>

  139. 								<div data-toggle="tooltip" data-placement="top" title="Duplicate Questionnaire" id="experience-pen" onclick="nextModal('#Duplicate')" style="padding: 0.5em; margin: 0 auto; width: 60px;">

  140. 									<span class="fas fa-copy"></span>

  141. 								</div>

  142. 							</div>

  143. 					</div>

  144. 				</div><!--row-->

  145. 				

  146. 				<br>

  147. 								

  148. 				<div class="row">

  149. 				

  150. 					<div class="col-sm-12">

  151. 						<?php

  152. 						

  153.   							$query2 = "SELECT * FROM questionnair WHERE `id` IN (SELECT `id_questionnair` FROM experience_questionnair WHERE `id_experience` = '$experienceID');";

  154. 							$result2 = mysqli_query($connection, $query2);

  155. 							

  156. 							// IF THE EXPERIENCE HAS AT LEAST ONE QUESTIONNAIRE ASSOCIATED TO IT, SHOW IT

  157. 							// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE

  158. 							if(mysqli_num_rows($result2) > 0):

  159. 							

  160. 						?>

  161. 						<table class="table table-hover table-striped table-responsive">

  162.   							<thead>

  163.   								<tr>

  164.   									<th style="text-align: center;"><h4>Questionnaire</h4></th>

  165.   									<th style="text-align: center;"><h4>Questions</h4></th>

  166.   								</tr>

  167.   							</thead>

  168.   							<tbody>

  169.   								<?php while($row2 = mysqli_fetch_assoc($result2)): ?>

  170.   								<tr style="cursor: pointer;" onclick="location='viewQuestionnaire.php?view=<?php echo $row2['id']?>'">

  171.   									<td style="text-align: center;"><h5><?php echo $row2['q_title']; ?></h5></td>

  172.   									<?php

  173.   										$query3 = "SELECT * FROM questionnair_question WHERE id_questionnair = ".$row2['id'];

  174.   										$result3 = mysqli_query($connection, $query3);

  175.   									?>

  176.   									<td style="text-align: center;"><h5><?php echo mysqli_num_rows($result3); ?></h5></td>

  177.   								</tr>

  178.   								<?php endwhile; ?>

  179. 							</tbody>

  180.   						</table>

  181. 

  182.     					<?php else: ?>

  183.   							<h3 class="text-center"><small>It seems you still haven't added a questionnaire to this experience...</small></h3>

  184.   						<?php endif; ?>

  185.   						 

  186.   						<br>

  187.   						<div class="row">

  188.   							<div class="col-sm-2 col-sm-offset-5">

  189.   								<div data-toggle="tooltip" data-placement="top" title="Create Questionnaire" onclick="nextModal('#NewQuestionnaire')" id="experience-pen" style="padding: 0.5em; margin: 0 auto; width: 60px;">

  190.   									<span class="fas fa-plus"></span>

  191.   								</div>

  192.   							</div>

  193.   						</div>

  194.   						

  195.   					</div><!--col-sm-12-->

  196.   					

  197.   				</div><!--row-->

  198.  

  199. 				<br><br>

  200. 			

  201. 				<div class="row">	

  202. 					<div class="col-sm-offset-2 col-sm-8">	

  203. 						<div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">

  204. 							<button type="button" class="close" data-dismiss="alert" aria-label="Close">

  205. 								<span aria-hidden="true">&times;</span>

  206. 							</button>

  207. 							<h4>Tips on Questionnaires</h4>

  208. 							<hr>

  209. 							<ul>

  210. 								<li>These are the questionnaires that are associated to this experience.</li>

  211. 								<br>

  212. 								<li>Once you have your questionnaire, you can create your moments.</li>

  213. 								<br>

  214. 								<li>You can create new questionnaires with the plus button...

  215. 									<ul>

  216. 										<li>or import questionnaires from an Excel file!</li>

  217. 										<li>or copy a questionnaire from one experience to another!</li>

  218. 									</ul>

  219. 								</li>

  220. 								<br>

  221. 							</ul>

  222. 						</div><!--alert-->

  223. 					</div><!--col-sm-8-->

  224. 				</div><!--row-->

  225.   			

  226.   				<br>

  227.   			

  228.   			</div><!--container-->

  229.   		

  230. 		</div>

  231. 			

  232. 			

  233. 			

  234. 		<!--MOMENTS-->

  235. 		<div id="moments" class="main-content-box">

  236. 			<div class="container">

  237. 			

  238. 				<div class="row">

  239. 					<h3 class="col-sm-12">Active Moments</h3>

  240. 				</div>

  241. 				

  242. 				

  243. 				<div class="row">

  244. 				

  245. 				

  246. 					<div class="col-sm-12">

  247. 						<?php

  248. 						

  249.   							$query4 = "SELECT * FROM subquestionnair WHERE `id_questionnair` IN (SELECT `id_questionnair` FROM experience_questionnair WHERE `id_experience` = '$experienceID') ORDER BY date_to_administer ASC;";

  250. 							$result4 = mysqli_query($connection, $query4);

  251. 							

  252. 							// IF THE EXPERIENCE HAS AT LEAST ONE MOMENT ASSOCIATED TO IT, SHOW IT

  253. 							// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE

  254. 							if(mysqli_num_rows($result4) > 0):

  255. 							

  256. 						?>

  257. 						<table class="table table-hover table-striped table-responsive">

  258.   							<thead>

  259.   								<tr>

  260.   									<th style="text-align: center;"><h4>Moment</h4></th>

  261.   									<th style="text-align: center;"><h4>Questions</h4></th>

  262.   									<th style="text-align: center;"><h4>Date</h4></th>

  263.   								</tr>

  264.   							</thead>

  265.   							<tbody>

  266.   								<?php while($row4 = mysqli_fetch_assoc($result4)): ?>

  267.   								<tr style="cursor: pointer;" onclick="location='viewMoment.php?view=<?php echo $row4['id']?>'">

  268.   									<td style="text-align: center;"><h5><?php echo $row4['title']; ?></h5></td>

  269.   									<?php

  270.   										$query5 = "SELECT * FROM subquestionnair_question WHERE `id_subquestionnair` = ".$row4['id'];

  271.   										$result5 = mysqli_query($connection, $query5);

  272.   									?>

  273.   									<td style="text-align: center;"><h5><?php echo mysqli_num_rows($result5); ?></h5></td>

  274. 									<td style="text-align: center;"><h5><?php echo date("M j, Y (g:i A)", strtotime($row4['date_to_administer'])); ?></h5></td>

  275.   								</tr>

  276.   								<?php endwhile; ?>

  277.   							</tbody>

  278.   						</table>

  279.   					

  280.     					<?php else: ?>

  281.  							<h3 class="text-center"><small>It seems you still haven't added any moments to this experience...</small></h3>

  282.   						<?php endif; ?>

  283.   							 

  284.   						<br>

  285.   					

  286.   						<div class="row">

  287.   							<div class="col-sm-2 col-sm-offset-5">

  288.   								<div data-toggle="tooltip" data-placement="top" title="Create Moment" onclick="nextModal('#NewMoment')" id="experience-pen" style="padding: 0.5em; margin: 0 auto; width: 60px;">

  289.   									<span class="fas fa-plus"></span>

  290.   								</div>

  291.   							</div>

  292.   						</div>

  293.   						

  294.   						

  295.   					</div><!--col-sm-12-->

  296.   				

  297.   				</div><!--row-->

  298. 

  299.   			

  300. 				<br><br>

  301. 				

  302. 				<div class="row">

  303. 					<div class="col-sm-offset-2 col-sm-8">

  304. 						<div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">

  305. 							<button type="button" class="close" data-dismiss="alert" aria-label="Close">

  306. 								<span aria-hidden="true">&times;</span>

  307. 							</button>

  308. 							<h4>Tips on Moments</h4>

  309. 							<hr>

  310. 							<ul>

  311. 								<li>These are the moments that are associated to this experience.</li>

  312. 								<br>

  313. 								<li>Once they're answered, you can track the results with the results button above.</li>

  314. 								<br>

  315. 								<li>You can create new moments with the plus button.</li>

  316. 								<br>

  317. 							</ul>

  318. 						</div><!--alert-->

  319. 					</div><!--col-sm-8-->

  320. 				</div><!--row-->

  321.   				

  322.   				<br>

  323.   			

  324. 			</div><!--container-->

  325. 			

  326. 		</div>

  327. 			

  328. 			

  329. 			

  330. 		<!--MILESTONES-->

  331. 		<div id="milestones" class="main-content-box">

  332. 			<div class="container">

  333. 		

  334. 				<div class="row">

  335. 					<h3 class="col-sm-12">Active Milestones</h3>

  336. 				</div>

  337. 				

  338. 				<div class="row">

  339. 					

  340. 					

  341. 					<div class="col-sm-12">

  342. 						<?php

  343. 						

  344.   							$query6 = "SELECT * FROM `milestone` WHERE `id_experience` = '$experienceID' ORDER BY date ASC;";

  345. 							$result6 = mysqli_query($connection, $query6);

  346. 							

  347. 							// IF THE EXPERIENCE HAS AT LEAST ONE MILESTONE ASSOCIATED TO IT, SHOW IT

  348. 							// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE

  349. 							if(mysqli_num_rows($result6) > 0):

  350. 							

  351. 						?>

  352. 						<table class="table table-hover table-striped table-responsive">

  353.   							<thead>

  354.   								<tr>

  355.   									<th style="text-align: center;"><h4>Milestone</h4></th>

  356.   									<th style="text-align: center;"><h4>Date</h4></th>

  357.   								</tr>

  358.   							</thead>

  359.   							<tbody>

  360. 								<?php while($row6 = mysqli_fetch_assoc($result6)): ?>

  361.   								<tr style="cursor: pointer;">

  362.   									<td style="text-align: center;"><h5><?php echo $row6['title']; ?></h5></td>

  363.   									<td style="text-align: center;"><h5><?php echo date("M j, Y", strtotime($row6['date'])); ?></h5></td>

  364.   								</tr>

  365.    								<?php endwhile; ?>

  366.   							</tbody>

  367.   						</table>

  368.   					

  369.     					<?php else: ?>

  370.  							<h3 class="text-center"><small>It seems you still haven't added any milestones to this experience...</small></h3>

  371.   						<?php endif; ?>

  372.   					

  373.   						<br>

  374.   						

  375.   						<div class="row">

  376.   							<div class="col-sm-2 col-sm-offset-5">

  377.   								<div data-toggle="tooltip" data-placement="top" title="Create Milestone" onclick="nextModal('#NewMilestone')" id="experience-pen" style="padding: 0.5em; margin: 0 auto; width: 60px;">

  378.   									<span class="fas fa-plus"></span>

  379.   								</div>

  380.   							</div>

  381.   						</div>

  382.   						

  383.   						

  384.   					</div><!--col-sm-12-->

  385.   				</div><!--row-->

  386. 

  387. 				<br><br>

  388. 			

  389. 				<div class="row">

  390. 					<div class="col-sm-offset-2 col-sm-8">	

  391. 						<div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">

  392. 							<button type="button" class="close" data-dismiss="alert" aria-label="Close">

  393. 								<span aria-hidden="true">&times;</span>

  394. 							</button>

  395. 							<h4>Tips on Milestones</h4>

  396. 							<hr>

  397. 							<ul>

  398. 								<li>These are the milestones of the students involved in this experience.</li>

  399. 								<br>

  400. 								<li>Once your moments are answered you can track the impact the milestones had on the answers, if any.</li>

  401. 								<br>

  402. 								<li>You can create new milestones with the plus button.</li>

  403. 								<br>

  404. 							</ul>

  405. 						</div><!--alert-->

  406. 					</div><!--col-sm-8-->

  407. 				</div><!--row-->

  408. 

  409. 	  			<br>

  410. 

  411. 			</div><!--container-->

  412. 		

  413. 		</div>

  414. 

  415. 

  416. 

  417. 		<br><br><br><br><br>

  418. 

  419. 

  420. 		

  421. 		<!-- POPUP FOR EDIT EXPERIENCE -->

  422. <form id="editForm"><!--method='POST' action='processes/updateExperience.php'-->

  423. 		<div class="modal fade" id="Edit" tabindex="-1" role="dialog" aria-labelledby="EditLabel" aria-hidden="true">

  424. 			<div class="modal-dialog" role="document">

  425.  				<div class="modal-content">

  426.  				

  427.  					<div class="modal-body">

  428.  						

  429.  						<!-- CLOSE BUTTON -->

  430.  						<button type="button" class="close" data-dismiss="modal" aria-label="Close">

  431.  							<span aria-hidden="true">&times;</span>

  432.  						</button>

  433. 						

  434. 						<div class="row">

  435. 							<div class="col-sm-10">

  436. 								<h2>Edit Experience <small>(Basic Info)</small></h2>

  437. 							</div>

  438. 						</div><!--row--> 						

  439. 

  440. 						<hr><br>

  441. 

  442. 						<div class="form-horizontal">

  443. 	

  444. 							<!-- ID -->

  445. 							<input type="hidden" name="id" value="<?php echo $row1['id']; ?>"> 

  446. 				

  447. 							<!-- NEW TITLE -->

  448. 							<div class="form-group">

  449. 								<label class="control-label col-sm-2 col-sm-offset-1">Title:</label>

  450. 								<div class="col-sm-7">

  451. 									<input type="text" class="form-control text-center" name="newTitle" maxlength="60" value="<?php echo $row1['title']; ?>" required>

  452. 								</div>

  453. 							</div>

  454. 				

  455. 							<!-- NEW DESCRIPTION -->

  456. 							<div class="form-group">

  457. 								<label class="control-label col-sm-2 col-sm-offset-1">Description:</label>

  458. 								<div class="col-sm-7">

  459. 									<textarea class="form-control text-center" name="newDescription" rows="4" style="resize: vertical;" maxlength="100" required><?php echo $row1['description']; ?></textarea>

  460. 								</div>

  461. 							</div>

  462. 							

  463. <!--

  464. 							<!~~ NEW TYPE ~~>

  465. 							<div class='form-group'>

  466. 								<label class='control-label col-sm-2 col-sm-offset-1'>Type:</label>

  467. 								<div class='col-sm-7'>

  468. 									<input type='text' class='form-control text-center' name='newType' required value="<?php echo $row1['type']; ?>">

  469. 								</div>

  470. 							</div>

  471. 

  472. 							<!~~ NEW DURATION ~~>

  473. 							<div class='form-group'>

  474. 								<label class='control-label col-sm-2 col-sm-offset-1'>Duration:</label>

  475. 								<div class='col-sm-7'>

  476. 									<input type='number' class='form-control text-center' name='newDuration' required value="<?php echo $row1['duration_weeks']; ?>" readonly>

  477. 								</div>

  478. 							</div>

  479. 				

  480. 							<!~~ NEW START DATE ~~>

  481. 							<div class='form-group'>

  482. 								<label class='control-label col-sm-2 col-sm-offset-1'>Start Date:</label>

  483. 								<div class='col-sm-7'>

  484. 									<input type='date' class='form-control text-center' name='newStart' required value="<?php echo $row1['start_date']; ?>">

  485. 								</div>

  486. 							</div>

  487. 

  488. 							<!~~ NEW END DATE ~~>

  489. 							<div class='form-group'>

  490. 								<label class='control-label col-sm-2 col-sm-offset-1'>End Date:</label>

  491. 								<div class='col-sm-7'>

  492. 									<input type='date' class='form-control text-center' name='newEnd' required value="<?php echo $row1['end_date']; ?>">

  493. 								</div>

  494. 							</div>

  495. -->

  496. 

  497. 						</div><!--form-horizontal-->

  498. 

  499. 

  500. 

  501. 						<!-- ERROR ALERT FOR USER -->			

  502. 						<div id="error-editForm" class="row" style="display: none;">

  503. 							<div class="col-sm-12">

  504. 								<div class="alert alert-danger mb-1" role="alert">

  505. 									<h4 class="error-lead">Error!</h4>

  506. 									<p class="error-description"></p>

  507. 								</div>

  508. 							</div>

  509. 						</div>

  510. 

  511. 

  512.       				</div><!--modal-body-->

  513.       				

  514.       				<!-- SUBMIT OR CANCEL -->

  515.      				<div class="modal-footer">

  516.        					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

  517.         				<button type="submit" class="btn btn-primary" name="updateExperience" disabled>Save Changes</button>

  518.       				</div>

  519.       				

  520.     			</div><!--modal-content-->

  521.   			</div><!--modal-dialog-->

  522. 		</div><!--modal-->

  523. </form><!--form-->

  524. 		

  525. 		

  526. 		<!--FORM VALIDATION FOR EDIT EXPERIENCE-->

  527. 		<script>

  528. 		

  529. 		let newTitle = document.querySelector('[name=newTitle]');

  530. 		let newDescription = document.querySelector('[name=newDescription]');

  531. // 		let newType = document.querySelector('[name=newType]');

  532. 		

  533. 		newTitle.addEventListener('keyup', validateEditExperience);

  534. 		newTitle.addEventListener('change', validateEditExperience);

  535. 		newDescription.addEventListener('keyup', validateEditExperience);

  536. 		newDescription.addEventListener('change', validateEditExperience);

  537. // 		newType.addEventListener('keyup', validateEditExperience);

  538. // 		newType.addEventListener('change', validateEditExperience);

  539. 		

  540. 		// Only enable submit button when:

  541. 		// 1) changes are detected,

  542. 		// 2) and both strings (title and description) are not empty

  543. 		function validateEditExperience() {

  544. 			let updateExperience = document.querySelector('[name=updateExperience]');

  545. 			updateExperience.disabled = !newTitle.checkValidity() || !newDescription.checkValidity();

  546. 		}

  547. 		

  548. 		</script>

  549. 		

  550. 		

  551. 		

  552. 		<!-- POPUP FOR NEW QUESTIONNAIRE 1 -->

  553. 		<div class="modal fade" id="NewQuestionnaire" tabindex="-1" role="dialog" aria-labelledby="NewQuestionnaireLabel" aria-hidden="true">

  554. 			<div class="modal-dialog modal-lg" role="document">

  555.  				<div class="modal-content">

  556.  				

  557.  					<div class="modal-body">

  558.  						

  559.  						<!-- CLOSE BUTTON -->

  560.  						<button type="button" class="close" data-dismiss="modal" aria-label="Close">

  561.  							<span aria-hidden='true'>&times;</span>

  562.  						</button>

  563. 						

  564. 						<div class="row">

  565. 							<div class="col-sm-10">

  566. 								<h2>New Questionnaire <small>(Basic Info – <em>Part 1</em>)</small></h2>

  567. 							</div>

  568. 						</div><!--row--> 						

  569. 

  570. 						<hr><br>

  571. 

  572. 						<div class="form-horizontal">

  573. 				

  574. 				

  575. 							<!-- TITLE -->

  576. 							<div class="form-group">

  577. 								<label class="control-label col-sm-2">Title:</label>

  578. 								<div class="col-sm-9">

  579. 									<input type="text" class="form-control text-center" name="q_title_tentative" placeholder="Title" maxlength="100" required>

  580. 								</div>

  581. 							</div>

  582. 				

  583. 							<!-- DESCRIPTION -->

  584. 							<div class="form-group">

  585. 								<label class="control-label col-sm-2">Description:</label>

  586. 								<div class="col-sm-9">

  587. 									<textarea class="form-control text-center" name="description_tentative" rows="1" placeholder="Description" maxlength="200" required></textarea>

  588. 								</div>

  589. 							</div>

  590. 

  591. 							<!-- REFERENCE -->

  592. 							<div class="form-group">

  593. 								<label class="control-label col-sm-2">Reference:</label>

  594. 								<div class="col-sm-9">

  595. 									<input type="text" class="form-control text-center" name="referencia_tentative" placeholder="Reference" maxlength="60" required>

  596. 								</div>

  597. 							</div>

  598. 							

  599. 							<br>

  600. 							

  601. 							<!-- CATEGORIES -->

  602. 							<div class="form-group">

  603. 								<label class="control-label col-sm-2">Categories:</label>

  604. 								<div class="col-sm-9">

  605. 									<textarea id="q_categories_tentative" class="form-control text-center" name="q_categories_tentative" rows="1" placeholder="Categories (comma separated)" required></textarea>

  606. 								</div>

  607. 							</div>

  608. 				

  609. 							<!-- SUBCATEGORIES -->

  610. 							<div class="form-group">

  611. 								<label class="control-label col-sm-2">Subcategories:</label>

  612. 								<div class="col-sm-9">

  613. 									<textarea id="q_subcategories_tentative" class="form-control text-center" name="q_subcategories_tentative" rows="1" placeholder="Subcategories (comma separated)" required></textarea>

  614. 								</div>

  615. 							</div>

  616. 							

  617. 						</div>

  618. 			

  619. 						<div class="row">

  620. 							<div class="col col-sm-offset-2 col-sm-9">

  621. 								<p class="alert alert-warning text-justify">

  622. 									<strong>Note:</strong> You should at least have the same number of subcategories as categories.

  623. 								</p>

  624. 							</div>

  625. 						</div>

  626. 						

  627. 			

  628.       				</div><!--modal-body-->

  629.       				

  630.       				<!-- NEXT OR CANCEL -->

  631.      				<div class="modal-footer">

  632.        					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

  633.         				<button id="nextQuestionnaire" type="button" class='btn btn-primary' data-dismiss="modal" onclick="nextModal('#NewQuestionnaire_2')" disabled>Next</button>

  634.       				</div>

  635.       				

  636.     			</div><!--modal-content-->

  637.   			</div><!--modal-dialog-->

  638. 		</div><!--modal-->

  639. 

  640. 

  641. 		<!-- FORM VALIDATION FOR NEW QUESTIONNAIRE (BASIC INFO) -->

  642. 		<script>

  643. 		

  644. 		

  645. 		// Fetch the inputs in the first modal

  646. 		let questionnaireTitle = document.querySelector('[name=q_title_tentative]');

  647. 		let questionnaireDescription = document.querySelector('[name=description_tentative]');

  648. 		let questionnaireReference = document.querySelector('[name=referencia_tentative]');

  649. 		let categories = document.querySelector('[name=q_categories_tentative]');

  650. 		let subcategories = document.querySelector('[name=q_subcategories_tentative]');

  651. 		

  652. 		

  653. 		// Add onchange and onkeyup event listeners to each input in the first modal

  654. 		questionnaireTitle.addEventListener('keyup', validateNewQuestionnaire);

  655. 		questionnaireTitle.addEventListener('change', validateNewQuestionnaire);

  656. 		questionnaireDescription.addEventListener('keyup', validateNewQuestionnaire);

  657. 		questionnaireDescription.addEventListener('change', validateNewQuestionnaire);

  658. 		questionnaireReference.addEventListener('keyup', validateNewQuestionnaire);

  659. 		questionnaireReference.addEventListener('change', validateNewQuestionnaire);

  660. 		categories.addEventListener('keyup', validateNewQuestionnaire);

  661. 		categories.addEventListener('change', validateNewQuestionnaire);

  662. 		subcategories.addEventListener('keyup', validateNewQuestionnaire);

  663. 		subcategories.addEventListener('change', validateNewQuestionnaire);

  664. 		

  665. 		

  666. 		// Pass the values from the first modal to the second, where the actual (hidden) inputs reside

  667. 		questionnaireTitle.addEventListener('keyup', function() {

  668. 			document.querySelector('[name=q_title]').value = questionnaireTitle.value;

  669. 		});

  670. 		questionnaireDescription.addEventListener('keyup', function() {

  671. 			document.querySelector('[name=description]').value = questionnaireDescription.value;

  672. 		});

  673. 		questionnaireReference.addEventListener('keyup', function() {

  674. 			document.querySelector('[name=referencia]').value = questionnaireReference.value;

  675. 		});

  676. 		categories.addEventListener('keyup', function() {

  677. 			document.querySelector('[name=q_categories]').value = categories.value;

  678. 		});

  679. 		subcategories.addEventListener('keyup', function() {

  680. 			document.querySelector('[name=q_subcategories]').value = subcategories.value;

  681. 		});

  682. 		

  683. 		

  684. 		// First modal's validation function

  685. 		// This basically enables the "Next" button if certain conditions are met

  686. 		function validateNewQuestionnaire() {

  687. 		

  688. 		

  689. 			// Fetch "Next" button in modal

  690. 			let nextButton = document.querySelector('#nextQuestionnaire');

  691. 			

  692. 			

  693. 			// Check validity of each input (valid if not empty strings)

  694. 			let validity = questionnaireTitle.checkValidity();

  695. 			validity &= questionnaireDescription.checkValidity();

  696. 			validity &= questionnaireReference.checkValidity();

  697. 			validity &= categories.checkValidity();

  698. 			validity &= subcategories.checkValidity();

  699. 			

  700. 			

  701. 			// Questionnaire should have at least the same number of subcategories as categories

  702. 			let rawCategories = categories.value.split(',');

  703. 			let rawSubcategories = subcategories.value.split(',');

  704. 			let categoriesArray = new Array();

  705. 			let subcategoriesArray = new Array();

  706. 			

  707. 			

  708. 			// IF clause is necessary to avoid array WARNINGS and ERRORS

  709. 			if(categories.value != '' && subcategories.value != '') {

  710. 			

  711. 				// Store the "trimmed" categories in categoriesArray

  712. 				for(let i = 0; i < rawCategories.length; i++) {

  713. 			

  714. 					rawCategories[i] = rawCategories[i].trim();

  715. 				

  716. 					// if string not empty and not whitespace, insert as category option

  717. 					if(/\S/.test(rawCategories[i])) {

  718. 						categoriesArray.push(rawCategories[i]);

  719. 					}

  720. 				

  721. 				}

  722. 			

  723. 				// Store the "trimmed" subcategories in subcategoriesArray

  724. 				for(let i = 0; i < rawSubcategories.length; i++) {

  725. 			

  726. 					rawSubcategories[i] = rawSubcategories[i].trim();

  727. 				

  728. 					// if string not empty and not whitespace, insert as subcategory option

  729. 					if(/\S/.test(rawSubcategories[i])) {

  730. 						subcategoriesArray.push(rawSubcategories[i]);

  731. 					}

  732. 				

  733. 				}

  734. 			

  735. 				// Only valid if there are less or equal number of categories to subcategories

  736. 				validity &= categoriesArray.length <= subcategoriesArray.length;

  737. 				

  738. 			}

  739. 			

  740. 			

  741. 			// Disabled if not valid, enabled otherwise

  742. 			nextButton.disabled = !validity;

  743. 			

  744. 		}

  745. 		</script>

  746. 

  747. 

  748. <form id="newQuestionnaire"><!--method="POST" action="processes/insertQuestionnaire.php"-->

  749. 		<!-- POPUP FOR NEW QUESTIONNAIRE 2 -->

  750. 		<div class="modal fade" id="NewQuestionnaire_2" tabindex="-1" role="dialog" aria-labelledby="NewQuestionnaireLabel_2" aria-hidden="true">

  751. 			<div class="modal-dialog modal-lg" role="document">

  752.  				<div class="modal-content">

  753.  				

  754.  					<div class="modal-body">

  755.  						

  756.  						<!-- CLOSE BUTTON -->

  757.  						<button type="button" class="close" data-dismiss="modal" aria-label="Close">

  758.  							<span aria-hidden="true">&times;</span>

  759.  						</button>

  760. 						

  761. 						<div class="row">

  762. 							<div class="col-sm-10">

  763. 								<h2>New Questionnaire <small>(Questions – <em>Part 2</em>)</small></h2>

  764. 							</div>

  765. 						</div><!--row--> 						

  766. 

  767. 						<hr>

  768. 

  769. 					

  770. 						<!-- EXPERIENCE ID -->

  771. 						<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">

  772. 						

  773. 						<!-- QUESTIONNAIRE TITLE -->

  774. 						<input type="hidden" name="q_title" maxlength="100" required>

  775. 

  776. 						<!-- QUESTIONNAIRE DESCRIPTION --->

  777. 						<input type="hidden" name="description" maxlength="200" required>

  778. 

  779. 						<!-- QUESTIONNAIRE REFERENCE -->

  780. 						<input type="hidden" name="referencia" maxlength="60" required>

  781. 						

  782. 						<!-- QUESTIONNAIRE CATEGORIES -->

  783. 						<input id="q_categories" type="hidden" name="q_categories" required>

  784. 

  785. 						<!-- QUESTIONNAIRE SUBCATEGORIES -->

  786. 						<input id="q_subcategories" type="hidden" name="q_subcategories" required>

  787. 

  788. 

  789. 						<!-- QUESTION -->

  790.  						<div id="q1">

  791. 						

  792. 							<div class="row">

  793. 								<div class="col col-sm-offset-1">

  794. 									<h4>Question 1</h4>

  795. 								</div>

  796. 							</div>

  797. 							

  798. 							<div class="form-horizontal">

  799. 							

  800. 								<!-- PREMISE -->

  801. 								<div class="form-group">

  802. 									<label class="col-sm-offset-1 control-label col-sm-2">Premise:</label>

  803. 									<div class="col-sm-8">

  804. 										<input id="q_premise1" type="text" class="form-control text-center" name="q_premise1" placeholder="Premise" maxlength="600" required>

  805. 									</div>

  806. 								</div>

  807. 						

  808. 								<!-- TYPE -->

  809. 								<div class="form-group">

  810. 									<label class="col-sm-offset-1 control-label col-sm-2">Question Type:</label>

  811. 									<div class="col-sm-8">

  812. 										<select class="form-control text-center" id="q_type1" name="q_type1" style="width:100%; text-align-last:center;" onchange="newThing(event)" required>

  813. <!-- 											<option disabled selected value="">Type</option> -->

  814. 											<option value="1">Scaled</option>

  815. 											<option value="2">Open Answer</option>

  816. 										</select>

  817. 									</div>

  818. 								</div>

  819. 							

  820. 							</div>

  821. 							

  822. 							<!-- MIN/MAX VALUES/TEXT (OPTIONAL) -->

  823. 							<div id="range1">

  824. 								<div class="form-inline col col-sm-offset-2">

  825. 									<div class="form-group">

  826. 										<label class="control-label col-sm-2">Min. Value:</label>

  827. 										<div class="col-sm-8">

  828. 											<input type="number" class="form-control text-center" id="min_val1" name="min_val1" value="1" readonly>

  829. 										</div>

  830. 									</div>

  831. 									<div class="form-group">

  832. 										<label class="control-label col-sm-2">Min. Text:</label>

  833. 										<div class="col-sm-8">

  834. 											<input type="text" class="form-control text-center" id="min_text1" name="min_text1" maxlength="40" placeholder="Very Dissatisfied">

  835. 										</div>

  836. 									</div>

  837. 								</div>

  838. 							

  839. 								<div class="form-inline col col-sm-offset-2">

  840. 									<div class="form-group">

  841. 										<label class="control-label col-sm-2">Max. Value:</label>

  842. 										<div class="col-sm-1">

  843. 											<input type="number" class="form-control text-center" id="max_val1" name="max_val1" value="5" min="2">

  844. 										</div>

  845. 									</div>

  846. 									<div class="form-group">

  847. 										<label class="control-label col-sm-2">Max. Text:</label>

  848. 										<div class="col-sm-1">

  849. 											<input type="text" class="form-control text-center" id="max_text1" name="max_text1" maxlength="40" placeholder="Very Satisfied">

  850. 										</div>

  851. 									</div>

  852. 								</div>

  853. 								

  854. 								<br>

  855. 								

  856. 							</div>

  857. 							

  858. 							<div class="form-horizontal">

  859. 							

  860. 								<!-- CORRESPONDING CATEGORY -->

  861. 								<div class="form-group">

  862. 									<label class="col-sm-offset-1 control-label col-sm-2">Category:</label>

  863. 									<div class="col-sm-8">

  864. 										<select class="form-control text-center" id="q_category1" name="q_category1" style="width: 100%; text-align-last:center;" required>

  865. <!-- 											<option disabled selected value="">Category</option> -->

  866. 										</select>

  867. 									</div>

  868. 								</div>

  869. 								

  870. 								<!-- CORRESPONDING SUBCATEGORY -->

  871. 								<div class="form-group">

  872. 									<label class="col-sm-offset-1 control-label col-sm-2">Subcategory:</label>

  873. 									<div class="col-sm-8">

  874. 										<select class="form-control text-center" id="q_subcategory1" name="q_subcategory1" style="width: 100%; text-align-last:center;" required>

  875. <!-- 											<option disabled selected value="">Subcategory</option> -->

  876. 										</select>

  877. 									</div>

  878. 								</div>

  879. 							

  880. 							</div>

  881. 							

  882.  						</div>

  883. 

  884. 

  885. 						<br>

  886. 

  887.  						<div class="row">

  888.  							<div class="col-sm-offset-9 col-sm-2">

  889. 								<button type="button" class="btn btn-xs btn-default" onclick="addQuestion()">Add Question</button>

  890. 							</div>

  891. 						</div>

  892. 						

  893. 						

  894. 						

  895. 						

  896. 						<!-- ERROR ALERT FOR USER -->			

  897. 						<div id="error-newQuestionnaire" class="row" style="display: none;">

  898. 							<div class="col-sm-12">

  899. 								<div class="alert alert-danger mb-1" role="alert">

  900. 									<h4 class="error-lead">Error!</h4>

  901. 									<p class="error-description"></p>

  902. 								</div>

  903. 							</div>

  904. 						</div>

  905. 			

  906. 			

  907.       				</div><!--modal-body-->

  908.       				

  909.       				<!-- SUBMIT OR PREVIOUS -->

  910.      				<div class="modal-footer">

  911.        					<button type="button" class="btn btn-default" data-dismiss="modal" onclick="nextModal('#NewQuestionnaire')">Previous</button>

  912.         				<button type="submit" class="btn btn-primary" name="createQuestionnaire">Create</button>

  913.       				</div>

  914.       				

  915.     			</div><!--modal-content-->

  916.   			</div><!--modal-dialog-->

  917. 		</div><!--modal-->

  918. </form>

  919. 

  920. 

  921. 

  922. 

  923. 

  924. 		<!-- POPUP FOR IMPORT QUESTIONNAIRE -->

  925. 		<form class='form-horizontal' action='processes/importQuestionnaire.php' method='POST' enctype="multipart/form-data">

  926. 			<div class='modal fade' id='Import' tabindex='-1' role='dialog' aria-labelledby='ImportLabel' aria-hidden='true'>

  927. 				<div class='modal-dialog modal-dialog-centered modal-md' role='document'>

  928.  					<div class='modal-content'>

  929. 						

  930. 						<div class='modal-header'>

  931. 			  	 	  		<h3 class='modal-title' id='ImportLabel'>Import Questionnaire<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button></h3>

  932.    						</div>

  933.  						

  934.  						<div class='modal-body'>

  935. 

  936. 							<div class="form-horizontal">

  937. 							

  938. 								<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">

  939. 							

  940. 								<div class="row">

  941. 									<div class="col-sm-12">

  942. 										<h4>Download Template</h4>

  943. 										<p>Use this template to fill out your questionnaire and we'll do the heavy lifting for you! Once you're done, <strong>submit</strong> it using the "<em>import</em>" button below.</p>

  944. 										<a class="btn btn-primary btn-sm btn-block" href="nameOfTheQuestionnair.xlsx">Download Template</a>

  945. 									</div>

  946. 								</div><!--row-->

  947. 							

  948. 								<br>

  949. 								<br>

  950. 							

  951. 								<div class="form-group">

  952. 									<div class="col-sm-10 col-sm-offset-2">

  953.    										<label for="exampleInputFile">Questionnaire in xlsx format</label>

  954. 										<input type="file" name='import'>

  955. 										<p class="help-block">Choose your .xlsx file (remember it has to have the correct format).</p>

  956. 									</div>

  957. 								</div><!--form-group-->

  958. 								

  959. 							</div>

  960. 

  961. 

  962.       					</div><!--modal-body-->

  963.      					

  964.      					<div class='modal-footer'>

  965.        						<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>

  966.         					<button type='submit' class='btn btn-primary' name='insertQuestionnaire'>Import</button>

  967.       					</div>  					

  968.     			

  969.     				</div><!--modal-content-->

  970.   				</div><!--modal-dialog-->

  971. 			</div><!--modal-->

  972. 			

  973. 			

  974. 			

  975. 			

  976. 			

  977. 		<!-- POPUP FOR DUPLICATE QUESTIONNAIRE -->

  978. 		<form class='form-horizontal' action='processes/duplicateQuestionnaire.php' method='POST'>

  979. 			<div class='modal fade' id='Duplicate' tabindex='-1' role='dialog' aria-labelledby='DuplicateLabel' aria-hidden='true'>

  980. 				<div class='modal-dialog modal-dialog-centered' role='document'>

  981.  					<div class='modal-content'>

  982. 

  983. 						<div class='modal-header'>

  984. 			  	 	  		<h3 class='modal-title' id='DuplicateLabel'>Duplicate Questionnaire<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button></h3>

  985.    						</div>

  986. 

  987.  						<div class='modal-body'>

  988.  							

  989. 							<span class='text-center'>

  990. 								<h4>Copy a questionnaire from one experience to another</h4>

  991. 							</span>

  992. 							

  993. 							<br>

  994. 							

  995. 							<!-- FROM QUESTIONNAIRE -->

  996. 							<label for="fromQuestionnaireID">Which Questionnaire:</label>

  997. 							<select class="form-control text-center" id="fromQuestionnaireID" name="fromQuestionnaireID" style="text-align-last:center;" required>

  998. 								<?php

  999. 								

  1000. 									$queryQuestionnaires = "SELECT * FROM `questionnair` WHERE id IN (SELECT id_questionnair FROM experience_questionnair WHERE id_experience = '$experienceID');";

  1001. 									$resultQuestionnaires = mysqli_query($connection, $queryQuestionnaires);

  1002. 

  1003. 									while($rowQuestionnaires = mysqli_fetch_assoc($resultQuestionnaires)):

  1004. 									

  1005. 								?>

  1006. 									<option value="<?php echo $rowQuestionnaires['id']; ?>"><?php echo $rowQuestionnaires['q_title']; ?></option>

  1007. 								<?php endwhile; ?>

  1008. 							</select>

  1009. 							

  1010. 							<br>

  1011. 							

  1012. 							<!-- TO EXPERIENCE -->

  1013. 							<label for="toExperienceID">To What Experience:</label>

  1014. 							<select class="form-control text-center" id="toExperienceID" name="toExperienceID" style="text-align-last:center;" required>

  1015. 								<?php 

  1016. 								

  1017. 									// WARNING: CHANGE QUERY TO INCLUDE "`id_researcher`='".$dbUserData['id_researcher']."';"

  1018. 									$queryExperience2 = "SELECT * FROM `experience` WHERE id != '$experienceID';";

  1019. 									$resultExperience2 = mysqli_query($connection, $queryExperience2);

  1020. 									

  1021. 									while($rowExperience2 = mysqli_fetch_assoc($resultExperience2)):

  1022. 									

  1023. 								?>

  1024. 								<option value="<?php echo $rowExperience2['id']; ?>"><?php echo $rowExperience2['title']; ?></option>

  1025. 								<?php endwhile; ?>

  1026. 							</select>							

  1027. 							

  1028. 							

  1029. 							

  1030.       					</div><!--modal-body-->

  1031.       					

  1032.       					<!-- SUBMIT OR CANCEL -->

  1033.      					<div class='modal-footer'>

  1034.        						<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>

  1035.         					<button type='submit' class='btn btn-primary' name='duplicateQuestionnaire'>Confirm</button>

  1036.       					</div>

  1037.       					

  1038.     				</div><!--modal-content-->

  1039.   				</div><!--modal-dialog-->

  1040. 			</div><!--modal-->

  1041. 		</form>

  1042. 			

  1043. 

  1044. 

  1045. 

  1046. 

  1047. <!-- POPUP FOR NEW MOMENT 1 -->

  1048. <form id="newMoment"><!--method='POST' action='processes/insertMoment.php'-->

  1049. 		<div class="modal fade" id="NewMoment" tabindex="-1" role="dialog" aria-labelledby="NewMomentLabel" aria-hidden="true">

  1050. 			<div class="modal-dialog modal-lg" role="document">

  1051.  				<div class="modal-content">

  1052.  				

  1053.  					<div class="modal-body">

  1054.  						

  1055.  						<!-- CLOSE BUTTON -->

  1056.  						<button type="button" class="close" data-dismiss="modal" aria-label="Close">

  1057.  							<span aria-hidden='true'>&times;</span>

  1058.  						</button>

  1059. 						

  1060. 						<div class="row">

  1061. 							<div class="col-sm-10">

  1062. 								<h2>New Moment <small>(Basic Info – <em>Part 1</em>)</small></h2>

  1063. 							</div>

  1064. 						</div><!--row--> 						

  1065. 

  1066. 						<hr><br>

  1067. 

  1068. 						

  1069. 						<div class="form-horizontal">

  1070. 				

  1071. 							<!--EXPERIENCE ID-->

  1072. 							<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">

  1073. 						

  1074. 							<!-- TITLE -->

  1075. 							<div class="form-group">

  1076. 								<label class="control-label col-sm-2">Title:</label>

  1077. 								<div class="col-sm-9">

  1078. 									<input type="text" class="form-control text-center" name="m_title" maxlength="60" placeholder="Title" required>

  1079. 								</div>

  1080. 							</div>

  1081. 				

  1082. 							<!-- DESCRIPTION -->

  1083. 							<div class="form-group">

  1084. 								<label class="control-label col-sm-2">Description:</label>

  1085. 								<div class="col-sm-9">

  1086. 									<textarea class="form-control text-center" name="m_description" rows="1" style="resize:vertical;" maxlength="100" placeholder="Description" required></textarea>

  1087. 								</div>

  1088. 							</div>

  1089. 

  1090. 							<!-- DATE TO ADMINISTER -->

  1091. 							<div class="form-group">

  1092. 								<label class="control-label col-sm-2">Date to Administer:</label>

  1093. 								<div class="col-sm-9">

  1094. 									<input type="datetime-local" class="form-control text-center" name="m_date" maxlength="16" placeholder="YYYY-MM-DDThh:mm" required>

  1095. 								</div>

  1096. 							</div>

  1097. 							

  1098. 							<!-- CORRESPONDING QUESTIONNAIRE -->

  1099. 							<?php 

  1100. 							

  1101. 								$query7 = "SELECT * FROM `questionnair` WHERE `id` IN (SELECT `id_questionnair` FROM `experience_questionnair` WHERE `id_experience` = '$experienceID');";

  1102. 								$result7 = mysqli_query($connection, $query7);

  1103. 								

  1104. 								// IF THE EXPERIENCE HAS AT LEAST ONE QUESTIONNAIRE ASSOCIATED TO IT, SHOW IT

  1105. 								// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE

  1106. 								if(mysqli_num_rows($result7) > 0):

  1107. 								

  1108. 							?>

  1109. 							<div class="form-group">

  1110. 								<label class="control-label col-sm-2">Questionnaire:</label>

  1111. 								<div class="col-sm-9">

  1112. 									<select class="form-control" id="m_questionnaire" name="m_questionnaire" style="width:100%; text-align-last:center;" required>

  1113. 										<option disabled selected value>Corresponding Questionnaire</option>

  1114. 										<?php while($row7 = mysqli_fetch_assoc($result7)): ?>

  1115. 										<option value="<?php echo $row7['id']; ?>"><?php echo $row7['q_title']; ?></option>

  1116. 										<?php endwhile; ?>

  1117. 									</select>

  1118. 								</div>

  1119. 							</div>

  1120. 							<?php else: ?>

  1121. 							<div class="text-center">

  1122. 								<h3><small>First add a questionnaire!</small></h3>

  1123. 							</div>

  1124. 							<?php endif; ?>

  1125. 				

  1126. 

  1127. 						</div><!--form-horizontal-->

  1128. 			

  1129.       				</div><!--modal-body-->

  1130.       				

  1131.       				<!-- NEXT OR CANCEL -->

  1132.      				<div class="modal-footer">

  1133.        					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

  1134.         				<button id="nextMoment" type="button" class="btn btn-primary" data-dismiss="modal" onclick="nextModal('#NewMoment_2')" disabled>Next</button>

  1135.       				</div>

  1136.       				

  1137.     			</div><!--modal-content-->

  1138.   			</div><!--modal-dialog-->

  1139. 		</div><!--modal-->

  1140. 		

  1141. 		

  1142. 		

  1143. 		<!-- FORM VALIDATION FOR NEW MOMENT (BASIC INFO) -->

  1144. 		<script>

  1145. 		

  1146. 		

  1147. 		// Fetch the inputs in the first modal

  1148. 		let momentTitle = document.querySelector('[name=m_title]');

  1149. 		let momentDescription = document.querySelector('[name=m_description]');

  1150. 		let momentDate = document.querySelector('[name=m_date]');

  1151. 		let momentQuestionnaire = document.querySelector('[name=m_questionnaire]');

  1152. 		

  1153. 		

  1154. 		// Add onchange and onkeyup event listeners to each input in the first modal

  1155. 		momentTitle.addEventListener('keyup', validateNewMoment);

  1156. 		momentTitle.addEventListener('change', validateNewMoment);

  1157. 		momentDescription.addEventListener('keyup', validateNewMoment);

  1158. 		momentDescription.addEventListener('change', validateNewMoment);

  1159. 		momentDate.addEventListener('keyup', validateNewMoment);

  1160. 		momentDate.addEventListener('change', validateNewMoment);

  1161. 		momentQuestionnaire.addEventListener('keyup', validateNewMoment);

  1162. 		momentQuestionnaire.addEventListener('change', validateNewMoment);

  1163. 		

  1164. 

  1165. 		

  1166. 		// First modal's validation function

  1167. 		// This basically enables the "Next" button if certain conditions are met

  1168. 		function validateNewMoment() {

  1169. 		

  1170. 			// Fetch "Next" button in modal

  1171. 			let nextButton = document.querySelector('#nextMoment');

  1172. 			

  1173. 			// Check validity of each input (valid if not empty strings & "maxlength" is set)

  1174. 			let validity = momentTitle.checkValidity();

  1175. 			validity &= momentDescription.checkValidity();

  1176. 			validity &= momentDate.checkValidity();

  1177. 			validity &= momentQuestionnaire.checkValidity();

  1178. 			

  1179. 			// Disabled if not valid, enabled otherwise

  1180. 			nextButton.disabled = !validity;

  1181. 			

  1182. 		}

  1183. 		

  1184. 		

  1185. 		</script>

  1186. 		

  1187. 		

  1188. 		

  1189. 		<!-- POPUP FOR NEW MOMENT 2 -->

  1190. 		<div class="modal fade" id="NewMoment_2" tabindex="-1" role="dialog" aria-labelledby="NewMomentLabel_2" aria-hidden="true">

  1191. 			<div class="modal-dialog modal-lg" role="document">

  1192.  				<div class="modal-content">

  1193.  				

  1194.  					<div class="modal-body">

  1195.  						

  1196.  						<!-- CLOSE BUTTON -->

  1197.  						<button type="button" class="close" data-dismiss="modal" aria-label="Close">

  1198.  							<span aria-hidden='true'>&times;</span>

  1199.  						</button>

  1200. 						

  1201. 						<div class="row">

  1202. 							<div class="col-sm-10">

  1203. 								<h2>New Moment <small>(Questions – <em>Part 2</em>)</small></h2>

  1204. 							</div>

  1205. 						</div><!--row--> 						

  1206. 

  1207. 						<hr><br>

  1208. 						

  1209. 						<!-- QUESTION -->

  1210. 						<div id="qq1" >

  1211. 						

  1212. 							<div class="row">

  1213. 								<div class="col col-sm-offset-1">

  1214. 									<h4>Question 1</h4>

  1215. 								</div>

  1216. 							</div>

  1217. 

  1218. 						

  1219. 							<!-- CHOOSE QUESTION FROM CORRESPONDING QUESTIONNAIRE -->

  1220. 							<div class="form-horizontal">

  1221. 								<div class="form-group">

  1222. 									<div class='col-sm-offset-2 col-sm-9'>

  1223. 										<select class="form-control" id="m_question_1" name="m_question_1" style="width:100%; text-align-last:center;" required>

  1224. 											<option disabled selected value>Select Question</option>

  1225. 										</select>

  1226. 									</div>

  1227. 								</div>

  1228. 							</div>

  1229. 							

  1230. 						</div>

  1231. 						

  1232. 						

  1233. 						<br>

  1234. 						

  1235. 						 <div class="row">

  1236.  							<div class="col-sm-offset-9 col-sm-2">

  1237. 								<button type='button' class='btn btn-xs btn-default' onclick='addSelectableQuestion()'>Add Question</button>

  1238. 							</div>

  1239. 						</div>

  1240. 						

  1241. 

  1242. 

  1243. 						<!-- ERROR ALERT FOR USER -->			

  1244. 						<div id="error-newMoment" class="row" style="display: none;">

  1245. 							<div class="col-sm-12">

  1246. 								<div class="alert alert-danger mb-1" role="alert">

  1247. 									<h4 class="error-lead">Error!</h4>

  1248. 									<p class="error-description"></p>

  1249. 								</div>

  1250. 							</div>

  1251. 						</div>

  1252. 

  1253. 

  1254. 

  1255.       				</div><!--modal-body-->

  1256.       				

  1257.       				<!-- NEXT OR CANCEL -->

  1258.      				<div class="modal-footer">

  1259.        					<button type="button" class="btn btn-default" data-dismiss="modal" onclick="nextModal('#NewMoment')">Previous</button>

  1260.         				<button type="submit" class="btn btn-primary" name="newMoment" <?php if(mysqli_num_rows($result7) == 0) { echo 'disabled'; } ?>>Create</button>

  1261.       				</div>

  1262.       				

  1263.     			</div><!--modal-content-->

  1264.   			</div><!--modal-dialog-->

  1265. 		</div><!--modal-->

  1266. </form>

  1267. 

  1268. 

  1269. 

  1270. <!-- POPUP FOR NEW MILESTONE -->

  1271. <form id="newMilestone">

  1272. 		<div class="modal fade" id="NewMilestone" tabindex="-1" role="dialog" aria-labelledby="NewMilestoneLabel" aria-hidden="true">

  1273. 			<div class="modal-dialog" role="document"">

  1274.  				<div class="modal-content">

  1275.  				

  1276.  					<div class="modal-body">

  1277.  						

  1278.  						<!-- CLOSE BUTTON -->

  1279.  						<button type="button" class="close" data-dismiss="modal" aria-label="Close">

  1280.  							<span aria-hidden="true">&times;</span>

  1281.  						</button>

  1282. 						

  1283. 						<div class="row">

  1284. 							<div class="col-sm-10">

  1285. 								<h2>New Milestone</h2>

  1286. 							</div>

  1287. 						</div><!--row--> 						

  1288. 

  1289. 						<hr><br>

  1290. 

  1291. 						

  1292. 						<div class="form-horizontal">

  1293. 				

  1294. 							<!-- EXPERIENCE ID -->

  1295. 							<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">

  1296. 							

  1297. 							<!-- TITLE -->

  1298. 							<div class="form-group">

  1299. 								<label class="control-label col-sm-2">Title:</label>

  1300. 								<div class="col-sm-9">

  1301. 									<input type="text" class="form-control text-center" name="mil_title" maxlength="256" placeholder="Title" required>

  1302. 								</div>

  1303. 							</div>

  1304. 				

  1305. 							<!-- DATE -->

  1306. 							<div class="form-group">

  1307. 								<label class="control-label col-sm-2">Date:</label>

  1308. 								<div class="col-sm-9">

  1309. 									<input type="date" class="form-control text-center" name="mil_date" placeholder="YYYY-MM-DD" required>

  1310. 								</div>

  1311. 							</div>

  1312. 						

  1313. 						</div>

  1314. 						

  1315. 

  1316. 						<!-- ERROR ALERT FOR USER -->			

  1317. 						<div id="error-newMilestone" class="row" style="display: none;">

  1318. 							<div class="col-sm-12">

  1319. 								<div class="alert alert-danger mb-1" role="alert">

  1320. 									<h4 class="error-lead">Error!</h4>

  1321. 									<p class="error-description"></p>

  1322. 								</div>

  1323. 							</div>

  1324. 						</div>

  1325. 			

  1326. 			

  1327.       				</div><!--modal-body-->

  1328.       				

  1329.       				<!-- NEXT OR CANCEL -->

  1330.      				<div class="modal-footer">

  1331.        					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

  1332.         				<button type="submit" class="btn btn-primary" name="newMilestone">Create</button>

  1333.       				</div>

  1334.       				

  1335.     			</div><!--modal-content-->

  1336.   			</div><!--modal-dialog-->

  1337. 		</div><!--modal-->		

  1338. </form>

  1339. 		

  1340. 

  1341. 

  1342. 

  1343. 		<!-- STORE START DATE FOR CALENDAR RERENDERING LATER -->

  1344. 		<input id="experience_start_date" type="hidden" value="<?php echo $row1['start_date']; ?>">

  1345. 

  1346. 

  1347. 

  1348. 		<!-- FULL CALENDAR IMPORTS -->

  1349.     	<script src="processes/fullcalendar/packages/core/main.min.js"></script>

  1350.     	<script src="processes/fullcalendar/packages/daygrid/main.min.js"></script>

  1351.     	<script src="processes/fullcalendar/packages/timegrid/main.min.js"></script>

  1352.     	<script src="processes/fullcalendar/packages/interaction/main.min.js"></script>

  1353. <!-- 		<script src="https://unpkg.com/@fullcalendar/core/main.min.js"></script> -->

  1354. <!-- 		<script src="https://unpkg.com/@fullcalendar/daygrid/main.min.js"></script> -->

  1355. <!-- 		<script src="https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js"></script> -->

  1356. <!-- 		<script src="https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js"></script> -->

  1357. 	

  1358. 	

  1359. 		

  1360. 		<script src="js/viewExperience.js"></script>

  1361. 		<script src="js/handleSubmit.js"></script>

  1362. 	

  1363. <script>

  1364. 

  1365. 

  1366. 		["editForm", "newQuestionnaire", "newMoment", "newMilestone"].forEach(function(formName) {

  1367. 			

  1368. 			var form = document.getElementById(formName);

  1369. 			

  1370. 			if(form) {

  1371. 				form.addEventListener('submit', function(e) {

  1372. 					handleSubmit(e, formName);

  1373. 				});

  1374. 			}

  1375. 			

  1376. 		});

  1377. 		

  1378. 

  1379. //window.onload = function() {

  1380. 

  1381. // First load an empty calendar

  1382. var calendarElement = document.getElementById('actualCalendar');

  1383. var calendar = new FullCalendar.Calendar(calendarElement, {

  1384. 	plugins: [ 'dayGrid', 'timeGrid', 'interaction' ],

  1385. 	header: {

  1386. 		left: 'prev,next today',

  1387. 		center: 'title',

  1388. 		right: 'dayGridMonth,timeGridWeek,timeGridDay'

  1389. 	},

  1390. 	defaultDate: document.getElementById('experience_start_date').value,

  1391. 	businessHours: true,

  1392. 	editable: true,

  1393. 	dragScroll: true,

  1394. 	eventDrop: function(eventDropInfo) {

  1395. 		$.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special4.php", {

  1396. 			id: eventDropInfo.event.id,

  1397. 			experienceID: document.querySelector('input[name=id_experience]').value,

  1398. 			newStartDate: Date.parse(eventDropInfo.event.start), // convert to UNIX timestamp

  1399. 			newEndDate: Date.parse(eventDropInfo.event.end) // convert to UNIX timestamp

  1400. 		}).fail(function() {

  1401. 			alert('An error occurred! Resetting calendar...');

  1402. 			eventDropInfo.revert();

  1403. 		});

  1404. 	}

  1405. });

  1406. calendar.render();

  1407. 

  1408. 

  1409. // After the rest of the page has loaded, fetch events from DB & re-render calendar

  1410. var calendarConfig;

  1411. 					

  1412. $.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special2.php", 

  1413. 	{

  1414.  		experienceID: document.querySelector('input[name=id_experience]').value

  1415. 	},

  1416. 	function(data, status) {

  1417. 		if(!isJSON(data)) {

  1418. 			return;

  1419. 		}

  1420. 		calendarConfig = JSON.parse(data);

  1421. 	}

  1422. ).done(function() {

  1423. 	

  1424. // 	console.log(calendarConfig);

  1425. 	

  1426. 	if(calendarConfig === undefined) {

  1427. 		alert("Couldn't fetch your events! Please refresh this page. If this keeps ocurring, contact the page administrator.");

  1428. 		return;

  1429. 	}

  1430. 

  1431. 	calendarConfig.events.forEach(calendarEvent => {

  1432. 		calendar.addEvent(calendarEvent);

  1433. 	});

  1434. 

  1435. 	calendar.render();	

  1436. 

  1437. }).fail(function() { 

  1438. 	alert("Couldn't fetch your events! Please refresh this page. If this keeps ocurring, contact the page administrator.");

  1439. });

  1440. 

  1441. 

  1442. //}//domcontentloaded//onload

  1443. 

  1444. </script>

  1445. 

  1446. 

  1447. 

  1448. <?php include_once 'footer.php'; ?>