First commit

card.html

@@ -0,0 +1,29 @@
+
+    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
+  					
+  			<br><br><br>		
+  			
+  			<div class="row">
+  				<div class="col-sm-offset-1 col-sm-3">
+  					
+					<div class="row">
+						<div class="col">
+							<div class="thumbnail">
+								<div class="caption">
+									<h4 class="pannel-heading text-center">Tips on Milestones</h4>
+									<hr>
+									<ul>
+										<li>These are the milestones of the students involved in this experience.</li>
+										<br>
+										<li>Once your moments have been answered you can track the impact these milestones had on the students' answers, if any.</li>
+										<br>
+										<li>You can create new milestones with the plus button.</li>
+									</ul>
+								</div>
+							</div>
+						</div>
+					</div>
+  						
+  				</div><!--col-sm-4-->
+  			</div><!--row-->
+			

css/style.css

@@ -0,0 +1,764 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto);
+/* GLOBALS */
+body {
+  margin: 0;
+  font-family: Avenir, Helvetica, sans-serif;
+  line-height: 1.5;
+}
+
+a, a:hover, a:focus, a:active {
+  text-decoration: none;
+  color: #fff;
+}
+
+.modal {
+  overflow-y: auto;
+}
+
+/* HEADER */
+#main-header {
+  min-height: 8rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  background: rgba(255, 255, 255, 0.7);
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+          box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+  -webkit-backdrop-filter: blur(10px);
+          backdrop-filter: blur(10px);
+}
+
+#logo {
+  font-size: 1.7em;
+  text-decoration: none;
+  color: #606060;
+  height: initial;
+  padding: 0.3em 1em;
+  text-align: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 155px;
+}
+
+#logo:hover,
+#logo:active,
+#logo:focus {
+  color: #333;
+}
+
+#account {
+  padding: 0.3em 1em;
+}
+
+.nav-link {
+  font-size: 1.2em;
+  padding: calc(1em / 2) 1em;
+  text-decoration: none;
+  color: #333;
+  position: relative;
+  -webkit-transition: color 150ms ease-in-out;
+  transition: color 150ms ease-in-out;
+}
+
+.nav-link:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  left: 1em;
+  right: 1em;
+  background-color: #606060;
+  -webkit-transform: scaleX(0);
+          transform: scaleX(0);
+  -webkit-transition: -webkit-transform 150ms ease-in-out;
+  transition: -webkit-transform 150ms ease-in-out;
+  transition: transform 150ms ease-in-out;
+  transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
+}
+
+.nav-link:hover::after,
+.nav-link:focus::after,
+.nav-link:active::after {
+  -webkit-transform: scaleX(1);
+          transform: scaleX(1);
+}
+
+.nav-link:hover,
+.nav-link:focus,
+.nav-link:active {
+  color: #606060;
+}
+
+.sign-out {
+  padding: 0.5em 1em;
+  background-color: #217ce4;
+  color: #fff;
+  text-decoration: none;
+  -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
+          box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
+  -webkit-transition-property: background-color, -webkit-box-shadow;
+  transition-property: background-color, -webkit-box-shadow;
+  transition-property: background-color, box-shadow;
+  transition-property: background-color, box-shadow, -webkit-box-shadow;
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+  -webkit-transition-timing-function: ease-in-out;
+          transition-timing-function: ease-in-out;
+}
+
+.sign-out:hover,
+.sign-out:focus,
+.sign-out:active {
+  background-color: #3d88df;
+  -webkit-box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
+          box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
+}
+
+/* GOOGLE BUTTON */
+.google-button {
+  height: 40px;
+  border-width: 0;
+  background: #fff;
+  color: #737373;
+  border-radius: none;
+  white-space: nowrap;
+  -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
+          box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
+  -webkit-transition-property: background-color, -webkit-box-shadow;
+  transition-property: background-color, -webkit-box-shadow;
+  transition-property: background-color, box-shadow;
+  transition-property: background-color, box-shadow, -webkit-box-shadow;
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+  -webkit-transition-timing-function: ease-in-out;
+          transition-timing-function: ease-in-out;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.google-button:focus,
+.google-button:hover {
+  -webkit-box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
+          box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+.google-button:active {
+  background-color: #e5e5e5;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-transition-duration: 10ms;
+          transition-duration: 10ms;
+}
+
+.google-button__icon {
+  margin: 5px;
+  width: 18px;
+  height: 18px;
+}
+
+.google-button__text {
+  padding: 0 12px;
+  font-size: 14px;
+  font-family: 'Roboto', Arial, sans-serif;
+}
+
+/* (EXPERIENCES PAGE) MAIN SECTION */
+#experience-main {
+  background-color: #606060;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-height: calc(90vh - 8rem - 10vh);
+  padding: 3em 5em;
+}
+
+#experience-main h3 {
+  color: #606060;
+}
+
+.experience-lead {
+  color: #fff;
+  font-size: 2em;
+  margin: 0 0 2em 0;
+  border-bottom: #fff;
+  border-bottom-width: 3px;
+  border-bottom-style: solid;
+}
+
+#experience-content {
+  display: -ms-grid;
+  display: grid;
+  grid-gap: 2em;
+  -ms-grid-columns: 1fr 1fr 1fr;
+      grid-template-columns: 1fr 1fr 1fr;
+  margin-bottom: 1em;
+}
+
+.grid-box {
+  background-color: #fff;
+  height: 15em;
+  width: 15em;
+  border-radius: 15px;
+  -webkit-box-shadow: 1px 1px 3px 1px #333;
+          box-shadow: 1px 1px 3px 1px #333;
+  -ms-grid-column-align: center;
+      justify-self: center;
+  padding: 3em 2em;
+  position: relative;
+  -webkit-transition: -webkit-transform 150ms ease-in-out;
+  transition: -webkit-transform 150ms ease-in-out;
+  transition: transform 150ms ease-in-out;
+  transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
+  cursor: pointer;
+}
+
+.grid-box .box-title {
+  color: #333;
+  font-size: 1.5em;
+  margin-bottom: 2em;
+}
+
+.grid-box .box-dates {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  color: #606060;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.grid-box .box-weeks {
+  color: #606060;
+}
+
+.grid-box .box-edit {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  font-size: 1.5em;
+  background-image: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#e4e1d7));
+  background-image: linear-gradient(to bottom right, #fff, #e4e1d7);
+  /*radial-gradient(circle 200px at bottom right, #fff, $background-color); */
+  height: 2em;
+  width: 2em;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border-bottom-right-radius: 15px;
+}
+
+.grid-box .box-edit a {
+  color: #217ce4;
+}
+
+.grid-box .box-weeks.warning {
+  color: #c83631;
+  font-size: 1.1em;
+}
+
+.grid-box#new-experience {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.grid-box#new-experience span {
+  color: #217ce4;
+  font-size: 5em;
+}
+
+.grid-box#new-experience h4 {
+  color: #606060;
+  margin: 0;
+}
+
+.grid-box:hover {
+  -webkit-transform: translateY(-5px);
+          transform: translateY(-5px);
+}
+
+/* WELCOME SECTION */
+#welcome {
+  margin-top: 8rem;
+  min-height: 25rem;
+  background: #333 url(../img/cytonn-photography-GJao3ZTX9gU-unsplash.jpeg) no-repeat top left;
+  background-size: cover;
+  position: relative;
+  background-blend-mode: screen;
+  border-bottom: 3px solid #f0c873;
+}
+
+#welcome-text {
+  position: absolute;
+  bottom: 2.6rem;
+  left: 5vw;
+  width: 30%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+#welcome-image {
+  height: 75px;
+  width: 75px;
+  border-radius: 50%;
+  margin-bottom: 15px;
+  border: 2px solid #fff;
+  -webkit-box-shadow: 1px 1px 10px 0px #222;
+          box-shadow: 1px 1px 10px 0px #222;
+}
+
+#welcome-user {
+  color: #fff;
+  text-shadow: 1px 1px 5px #222;
+  font-size: 3rem;
+  margin: 0;
+}
+
+/* (LOGIN PAGE) MAIN SECTION */
+#home-main {
+  background-color: #606060;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  min-height: calc(80vh - 8rem - 10vh);
+  padding: 2.5em 2em;
+  color: #fff;
+}
+
+#home-main h3 {
+  font-size: 1.7em;
+  font-weight: 900;
+}
+
+#home-main p {
+  font-size: 1.3em;
+}
+
+#main-sidebar {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  padding-left: 2em;
+}
+
+#main-sidebar h3 {
+  font-weight: 700;
+}
+
+#main-sidebar ul {
+  margin: 0;
+  padding-left: 1em;
+}
+
+#main-sidebar li {
+  list-style: none;
+  font-size: 1.3em;
+}
+
+#main-sidebar a {
+  opacity: 0.7;
+  text-decoration: none;
+}
+
+#main-sidebar a.active,
+#main-sidebar a:hover,
+#main-sidebar a:focus,
+#main-sidebar a:active {
+  opacity: 1;
+}
+
+.main-content {
+  -webkit-box-flex: 3;
+      -ms-flex: 3;
+          flex: 3;
+  overflow: hidden;
+}
+
+.main-content-box {
+  display: none;
+}
+
+.main-content-box.show {
+  display: initial;
+}
+
+.main-content-box #team-images {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: (1fr)[2];
+      grid-template-columns: repeat(2, 1fr);
+  gap: 1em;
+  justify-items: center;
+  margin: 2em 0;
+}
+
+.main-content-box #team-images img {
+  height: 100px;
+  width: 100px;
+  border-radius: 50%;
+  border: 2px #fff solid;
+  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3);
+}
+
+#contact-info {
+  margin-left: 3.5rem;
+  opacity: 0.8;
+}
+
+.login-hr {
+  border-width: 4px;
+  border-radius: 3px;
+}
+
+/* SHOWCASE */
+#showcase {
+  margin-top: 8rem;
+  min-height: calc(100vh - 8rem);
+  background: #333 url(../img/andrew-neel-cckf4TsHAuw-unsplash.jpeg) no-repeat left top;
+  background-size: cover;
+  position: relative;
+  background-blend-mode: screen;
+  border-bottom: 3px #f0c873 solid;
+}
+
+#showcase-text {
+  position: absolute;
+  top: 10vh;
+  right: 5vw;
+  width: 40%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  text-shadow: 1px 1px 5px #222;
+}
+
+#showcase-heading {
+  font-size: 3em;
+  color: #fff;
+  width: 100%;
+  margin-bottom: 0.25em;
+  text-align: right;
+}
+
+#showcase-link {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+
+#showcase-link a {
+  color: #fff;
+  font-size: 1.8em;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#showcase-link a:hover {
+  text-decoration: none;
+}
+
+/* (EXPERIENCE PAGE) SHOWCASE SECTION */
+#view-experience-showcase {
+  background-color: #606060;
+  margin-top: 8rem;
+  color: #fff;
+  border-bottom: 3px solid #f0c873;
+}
+
+#view-experience-buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  height: 100%;
+  max-width: 18em;
+  margin: 0 auto;
+}
+
+#experience-pen {
+  color: #fff;
+  background-color: #217ce4;
+  border-radius: 15px;
+  padding: 0.75em;
+  font-size: 2em;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  -webkit-transition: -webkit-transform 150ms ease-in-out;
+  transition: -webkit-transform 150ms ease-in-out;
+  transition: transform 150ms ease-in-out;
+  transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
+}
+
+#experience-pen:hover,
+#experience-pen:focus,
+#experience-pen:active {
+  -webkit-transform: translateY(-5px);
+          transform: translateY(-5px);
+}
+
+#view-experience-tabs {
+  font-size: 1.2em;
+  margin: 1em 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+
+#view-experience-tabs a {
+  font-size: 1.2em;
+  padding: 0 1em;
+  text-decoration: none;
+  position: relative;
+  -webkit-transition: opacity 150ms ease-in-out;
+  transition: opacity 150ms ease-in-out;
+  opacity: 0.6;
+  font-weight: bold;
+}
+
+#view-experience-tabs a:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  height: 1px;
+  left: 1em;
+  right: 1em;
+  background-color: #fff;
+  -webkit-transform: scaleX(0);
+          transform: scaleX(0);
+  -webkit-transition: -webkit-transform 150ms ease-in-out;
+  transition: -webkit-transform 150ms ease-in-out;
+  transition: transform 150ms ease-in-out;
+  transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
+}
+
+#view-experience-tabs a:hover::after,
+#view-experience-tabs a:focus::after,
+#view-experience-tabs a:active::after,
+#view-experience-tabs a.active::after {
+  -webkit-transform: scaleX(1);
+          transform: scaleX(1);
+}
+
+#view-experience-tabs a.active,
+#view-experience-tabs a:hover,
+#view-experience-tabs a:focus,
+#view-experience-tabs a:active {
+  opacity: 1;
+}
+
+/* (EXPERIENCE PAGE) MAIN SECTION */
+.main-content-box#calendar,
+.main-content-box#questionnaires,
+.main-content-box#moments,
+.main-content-box#milestones {
+  min-height: calc(80vh - 8rem - 10vh);
+}
+
+#view-experience-content {
+  background-color: #fff;
+  min-height: calc(100vh - 8rem);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+/* FOOTER */
+#main-footer {
+  background: #2e2e2e;
+  color: #fff;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  min-height: 10vh;
+  padding: 1.5em;
+  border-top: 3px solid #f0c873;
+}
+
+#main-footer p {
+  margin: 0;
+  font-size: 1.2em;
+}
+
+#main-footer a {
+  color: #aaa;
+  text-decoration: none;
+}
+
+#main-footer a:hover,
+#main-footer a:active,
+#main-footer a:focus {
+  color: #fff;
+  text-decoration: underline;
+}
+
+/* MEDIA QUERIES */
+@media (max-width: 768px) {
+  #showcase {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  #showcase-text {
+    position: initial;
+    min-width: 70%;
+  }
+  #showcase-heading {
+    text-align: center;
+  }
+  #showcase-link {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+  #main-sidebar {
+    display: none;
+  }
+  .main-content-box {
+    display: initial;
+  }
+  #view-experience-buttons {
+    margin: 1rem auto;
+  }
+  #experience-lead {
+    text-align: center;
+  }
+  #experience-content {
+    -ms-grid-columns: 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 580px) {
+  #experience-lead h2 {
+    margin: 20px auto 10px auto;
+  }
+  #experience-content {
+    -ms-grid-columns: 1fr;
+        grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 1080px) {
+  #experience-content {
+    -ms-grid-columns: (1fr)[4];
+        grid-template-columns: repeat(4, 1fr);
+  }
+}
+/*# sourceMappingURL=style.css.map */

error.php

@@ -0,0 +1,39 @@
+<?php		
+		
+	require_once 'processes/config.php';
+	require_once 'processes/dbh.inc.php';
+	include_once 'header.php';
+		
+?>
+	<!-- START OF home.php -->
+	<body style="min-height: 100vh; display: flex; align-items: center;">
+	
+		<div class='container text-center'>
+			<h1>Error</h1>
+			<h4>That's odd, something went wrong!</h4>
+			<p style='color: red;'>Redirecting you back to login page<span id="dots">...</span></p>
+		</div>
+		
+		<script>
+			var numDots = 3;
+			var dots = document.getElementById('dots');
+			setInterval(function() {
+				if(dots.innerText === "...") {
+					dots.innerText = ".";
+				} else if(dots.innerText === ".") {
+					dots.innerText = "..";
+				} else if(dots.innerText === "..") {
+					dots.innerText = "...";
+				}
+			}, 500);
+		</script>
+		
+	</body>
+	<!-- END OF home.php -->
+</html>
+<?php
+
+	header('Refresh: 3; https://tania.uprrp.edu/admin_nuevo/processes/logout.php');
+	ob_end_flush();
+	
+?>

footer.php

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

funciones.php

@@ -0,0 +1,141 @@
+<?php
+
+function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") {
+  $theValue = (!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;
+  switch ($theType) {
+    case "text":
+      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
+      break;    
+    case "long":
+    case "int":
+      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
+      break;
+    case "double":
+      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
+      break;
+    case "date":
+      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
+      break;
+    case "defined":
+      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
+      break;
+  }
+  return $theValue;
+}
+
+function presentaPregsRangoSelect($min_val,$min_text,$max_val,$max_text,$id_q)
+{
+	//print $id_q;
+	print('<select class="form-control" name="question'.$id_q.'" required>');
+	print('<option></option>');
+	print('<option value="'.$min_val.'">'.$min_val." - ".$min_text.'</option>');
+	print("\n");
+	for($i=$min_val+1;$i<($max_val);$i++)
+	{
+		print('<option value="'.$i.'">'.$i.'</option>');
+		print($i);
+		print("\n");
+	}
+	print('<option value="'.$max_val.'">'.$max_val." - ".$max_text.'</option>');
+	print("\n");
+	print("</select>");
+	print("\n");
+}
+
+function presentaPregsRangoSlider($min_val,$min_text,$max_val,$max_text,$id_q)
+{
+	//print('<div class="slidecontainer">');
+	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>');
+	print('<div class="row">');
+	
+    print('<div class="col-4">');
+	print("<small>$min_text</small>");
+	print('</div>');
+    print('<div class="col-4 text-center">');
+	print('<span id="val'.$id_q.'"></span>');
+	print('</div>');
+    print('<div class="col-4 text-right">');
+	print("<small>$max_text</small>");
+	print('</div>');
+	print('</div>');
+	
+	print('
+	<script>
+	var slider'.$id_q.' = document.getElementById("question'.$id_q.'");
+	var output'.$id_q.' = document.getElementById("val'.$id_q.'");
+	output'.$id_q.'.innerHTML = slider'.$id_q.'.value;
+
+	slider'.$id_q.'.onclick = function() {
+	  output'.$id_q.'.innerHTML = this.value;
+	}
+	</script>
+	');
+	//print('</div>');
+}
+
+function presentaPregsRangoRadio($min_val,$min_text,$max_val,$max_text,$id_q)
+{
+	print('<div class="row-sm">');
+	print('<div class="form-check">');
+	print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$min_val.'" value="'.$min_val.'" required>');
+	print('<label class="form-check-label" for="radio'.$min_val.'">'.$min_val.' - '.$min_text.'</label>');
+	print('</div>');
+
+	for($i=$min_val+1;$i<($max_val);$i++)
+	{
+		print('<div class="form-check">');
+		print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$i.'" value="'.$i.'">');
+		print('<label class="form-check-label" for="radio'.$i.'">'.$i.'</label>');
+		print('</div>');
+	}
+	print('<div class="form-check">');
+	print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$max_val.'" value="'.$max_val.'">');
+	print('<label class="form-check-label" for="radio'.$max_val.'">'.$max_val.' - '.$max_text.'</label>');
+	print('</div>');
+	print('</div>');
+
+}
+
+function presentaPregsRangoRadio2($min_val,$min_text,$max_val,$max_text,$id_q)
+{
+	print('<div class="row-sm">');
+    print('<div class="col">');
+	print('<div class="form-check form-check-inline">');
+	print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$min_val.'" value="'.$min_val.'">');
+	print('</div>');
+	print('</div>');
+
+	for($i=$min_val+1;$i<($max_val);$i++)
+	{
+    print('<div class="col">');
+		print('<div class="form-check form-check-inline">');
+		print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$i.'" value="'.$i.'">');
+		print('</div>');
+	print('</div>');
+	}
+
+    print('<div class="col">');
+	print('<div class="form-check form-check-inline">');
+	print('<input class="form-check-input" type="radio" name="question'.$id_q.'" id="radio'.$max_val.'" value="'.$max_val.'">');
+	print('</div>');
+	print('</div>');
+
+	print('</div>');
+	print('<div class="row-sm">');
+    print('<div class="col">');
+	print('<label class="form-check-label" for="radio'.$min_val.'">'.$min_val.' - '.$min_text.'</label>');
+	print('</div>');
+	for($i=$min_val+1;$i<($max_val);$i++)
+	{
+    print('<div class="col">');
+		print('<label class="form-check-label" for="radio'.$i.'">'.$i.'</label>');
+	print('</div>');
+	}
+    print('<div class="col">');
+	print('<label class="form-check-label" for="radio'.$max_val.'">'.$max_val.' - '.$max_text.'</label>');
+	print('</div>');
+
+	print('</div>');
+
+}
+?>

header.php

@@ -0,0 +1,117 @@
+<?php ob_start(); ?>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<title>TANIA</title>
+		
+    	<!-- BOOTSTRAP STYLE IMPORT -->
+    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
+    	
+    	<!-- JQUERY IMPORT-->
+    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+    	
+		<!-- BOOTSTRAP JS IMPORT -->
+    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
+    	
+    	<!-- FONTAWESOME IMPORT -->
+    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">
+    	
+		<!-- APP ICON IMPORT -->
+		<!-- <link rel="icon" type="image/png" href="img/pen_1024x1024.png" sizes="1024x1024"> -->
+    	<link rel="icon" type="image/png" href="img/pen_800x800.png" sizes="800x800">
+    	
+		<!-- FULLCALENDAR IMPORT -->
+    	<link rel="stylesheet" href="processes/fullcalendar/packages/core/main.css">
+    	<link rel="stylesheet" href="processes/fullcalendar/packages/daygrid/main.css">
+    	<link rel="stylesheet" href="processes/fullcalendar/packages/timegrid/main.css">
+<!-- <link href="https://unpkg.com/@fullcalendar/core/main.min.css"> -->
+<!-- <link href="https://unpkg.com/@fullcalendar/daygrid/main.min.css"> -->
+
+    	<!-- CUSTOM STYLES -->
+    	<link rel="stylesheet" href="css/style.css">
+    	
+    	<style>
+    	
+textarea {
+	resize: vertical;
+}
+
+:root {
+	--size: 12px;
+	/* 15px for btn-xl */
+	/* 15px for btn-lg */
+	/* 12px for btn-md */
+	/* 10px for btn-sm */
+	/* 5px for btn-xs */
+	--period: 750ms;
+	--color: #3498db;
+	--bg-color: white;
+	--thinness: 5;
+	/* 10 is okay */
+}
+
+.loader {
+	display: inline-block;
+	width: 12px;
+	height: 12px;
+	position: relative;
+	margin-right: calc(12px / 2);
+}
+
+.loader:before, .loader:after {
+	content: "";
+	position: absolute;
+	left: 0; /* make sure it's inside the box */
+	width: 100%;
+	height: 100%;
+	border-radius: 100%;
+	border: calc(12px / 5) solid transparent;
+	border-top-color: #3498db;
+}
+
+.loader:before {
+	z-index: 100;
+	animation: spin 750ms infinite;
+}
+
+.loader:after {
+	border: calc(12px / 5) solid white;
+}
+
+@keyframes spin {
+	0% {
+		-webkit-transform: rotate(0deg);
+		-ms-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-webkit-transform: rotate(360deg);
+		-ms-transform: rotate(360deg);
+		-o-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+    	
+    	</style>
+
+		<script>
+// Enable tooltips
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip();
+});
+		</script>
+	</head>
+<?php
+
+	//if(!empty($_SESSION) && !isset($_SESSION['error'])): //IF USER IS LOGGED IN (WITHOUT ANY ERROR)
+	//endif;
+
+	ini_set('display_errors', 1);
+	ini_set('display_startup_errors', 1);
+	error_reporting(E_ALL);
+?>

home.php

@@ -0,0 +1,374 @@
+<?php
+	
+	require_once 'processes/config.php';
+	require_once 'processes/dbh.inc.php';
+	require_once 'processes/checkLogin.php';
+	include_once 'header.php';
+	
+	// RETRIEVE USER'S NAME AND PICTURE
+	$query1 = "SELECT * FROM `researcher` WHERE `email` = '" . $_SESSION['email'] . "';";
+	$result1 = mysqli_query($connection, $query1);
+	$dbUserData = mysqli_fetch_assoc($result1);
+	
+	// IF USER NOT IN DATABASE, EXIT
+	if($result1->num_rows !== 1) {
+		exit();
+	}
+	
+?>
+	<!-- START OF home.php -->
+	<body>
+
+    	<header id="main-header">
+        	<a id="logo" href=".">
+				TANIA
+            	<img src="./img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
+        	</a>
+        	<div id="account">
+        	    <a class="nav-link" href="./questionnaires.php">Questionnaire Collection</a>
+        	    <a class="sign-out" href="./processes/logout.php">Sign Out</a>
+        	</div>
+    	</header>
+
+
+    	<section id="welcome">
+        	<div id="welcome-text">
+        	    <img id="welcome-image" src="<?php echo $dbUserData["picture"]; ?>" alt="User">
+        	    <h2 id="welcome-user">Welcome <?php echo explode(" ", $dbUserData['name'])[0]; ?></h2>
+        	</div>
+    	</section>
+
+
+    	<main id="experience-main">
+    	
+        	<div class="experience-lead">
+        	    <h2>Manage Your Experiences</h2>
+        	</div>
+        	
+        	<div id="experience-content">
+
+				<!--change to #New when using experience as templates has been implemented-->
+            	<div class="grid-box" id="new-experience" onclick="nextModal('#New_2')">
+                	<span class="fas fa-plus"></span>
+                    <h4>New</h4>
+            	</div>
+
+<?php
+	// WARNING: CHANGE QUERY TO INCLUDE "`id_researcher`='".$dbUserData['id_researcher']."';"
+	$query2 = "SELECT * FROM `experience`;";
+	$result2 = mysqli_query($connection, $query2);
+	
+	// IF USER HAS EXPERIENCES, SHOW ALL OF THEM
+	// ELSE PROMPT USER TO CREATE A NEW EXPERIENCE
+	if($result2->num_rows > 0): // USER HAS EXPERIENCE (STANDARD PAGE)
+?>
+
+				<?php while($row = mysqli_fetch_array($result2)): ?>
+
+            	<div class="grid-box" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'">
+            	
+            		<?php if(mb_strlen($row['title']) == 0): ?>
+                	<span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'"><small>N/A</small></span>
+            		<?php elseif(mb_strlen($row['title']) < 21): ?>
+                	<span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'"><?php echo $row['title']; ?></span>
+                	<?php else: ?>
+<!--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>
+                	<?php endif; ?>
+                	
+                	<div class="box-dates" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'">
+                	    <p style="margin-bottom: 0;">• Starts: <?php echo date("M j, Y", strtotime($row['start_date'])); ?></p>
+                	    <p>• Ends: <?php echo date("M j, Y", strtotime($row['end_date'])); ?></p>
+                	</div>
+                	
+                	<?php 
+                		$x = (strtotime($row['end_date']) - strtotime('now')) / 604800;
+                		if($x <= 0):
+                	?>
+                	<span class="box-weeks warning">Finished</span>
+                	<?php else: ?>
+                	<span class="box-weeks"><?php echo round($x); ?> week<?php if(round($x) > 1) echo 's'; ?> remaining</span>
+                	<?php endif; ?>
+                	<span class="box-edit" style="background: none;">
+                	    <a>
+                	        <i class="fas fa-pen"></i>
+                	    </a>
+                	</span>
+
+            	</div>
+	
+            	<?php endwhile; ?>
+
+<?php else: // USER DOESN'T HAVE EXPERIENCES YET (ALTERNATE PAGE) ?>
+
+				<script> setTimeout(() => $('#FirstTime').modal('show'), 1000); </script>
+		
+<?php endif; ?>
+
+			</div>
+			
+			<br><br>
+			
+		</main>
+
+
+
+		<!-- POPUP FOR FIRST TIME -->
+		<div class='modal fade' id='FirstTime' tabindex='-1' role='dialog' aria-labelledby='FirstTimeLabel' aria-hidden='true'>
+			<div class='modal-dialog modal-sm' role='document'>
+ 				<div class='modal-content'>
+ 					<div class='modal-body'>
+ 						
+ 						
+ 						<!-- CLOSE BUTTON -->
+ 						<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
+						
+						<div class="row text-center">
+							<h3>You don't have any experiences yet!</h3>
+						
+							<h5>Press below to create a new one!</h5>
+						
+							<button type="button" class='btn btn-default' data-dismiss='modal' onclick="nextModal('#New_2')">New</button>
+						</div>
+ 								
+       		
+     		 		</div><!--modal-body-->
+    			</div><!--modal-content-->
+  			</div><!--modal-dialog-->
+		</div><!--modal-->
+
+
+<!--
+		<!~~ POPUP FOR NEW EXPERIENCE 1 ~~>
+		<div class='modal fade' id='New' tabindex='-1' role='dialog' aria-labelledby='NewLabel' aria-hidden='true'>
+			<div class='modal-dialog modal-sm' role='document'>
+ 				<div class='modal-content'>
+ 					<div class='modal-body'>
+ 						
+ 						
+ 						<!~~ CLOSE BUTTON ~~>
+ 						<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
+						
+						<h4 class='text-center'>Want to add another experience?</h4>
+						
+						<!~~ CHOOSE: BRAND NEW EXPERIENCE OR USE A TEMPLATE~~>
+						<div class='row text-center'>
+							<div class='btn-group'>
+								<button type="button" class='btn btn-default' data-dismiss="modal" onclick="nextModal('#New_2')">Brand New</button>
+								<a href='#' class='btn btn-default'>Use Template</a>
+							</div>
+						</div>
+						<br>
+ 						
+ 						
+      				</div><!~~modal-body~~>
+    			</div><!~~modal-content~~>
+  			</div><!~~modal-dialog~~>
+		</div><!~~modal~~>
+-->
+
+		
+<form id="newExperience"><!--method='POST' action='processes/insertExperience.php'-->
+		<!-- POPUP FOR NEW EXPERIENCE 2 -->
+		<div class='modal fade' id='New_2' tabindex='-1' role='dialog' aria-labelledby='NewLabel_2' aria-hidden='true'>
+			<div class='modal-dialog modal-lg' role='document'>
+ 				<div class='modal-content'>
+ 				
+ 					<div class='modal-body'>
+ 						
+ 						
+ 						
+ 						<!-- CLOSE BUTTON -->
+ 						<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
+						
+						<div class='row'>
+							<div class='col-sm-10'>
+								<h2>Brand New Experience <small>(Basic Info)</small></h2>
+<!-- 								<h3><small>Start creating a new experience by first adding its basic info.</small></h3> -->
+							</div>
+						</div><!--row--> 						
+
+						<hr><br>
+
+	
+						<div class="form-horizontal">
+	
+							<!-- TITLE -->
+							<div class='form-group'>
+								<label class='control-label col-sm-2' for='e_title'>Title:</label>
+								<div class='col-sm-9'>
+									<input type='text' class='form-control text-center' id='e_title' name='title' placeholder='Title' maxlength="60" required>
+								</div>
+							</div>
+				
+							<!-- DESCRIPTION -->
+							<div class='form-group'>
+								<label class='control-label col-sm-2' for='e_description'>Description:</label>
+								<div class='col-sm-9'>
+									<textarea class='form-control text-center' id='e_description' name='description' rows='1' style='resize:vertical;' placeholder='Description' maxlength="100" required></textarea>
+								</div>
+							</div>
+				
+							<!-- TYPE -->
+							<div class='form-group'>
+								<label class='control-label col-sm-2' for='e_description'>Type:</label>
+								<div class='col-sm-9'>
+									<select class="form-control text-center" style="text-align-last: center;" id='e_type' name='type' required>
+										<option selected value="Course-Based Research">Course-Based Research</option>
+										<option value="Independent Research">Independent Research</option>
+									</select>
+								</div>
+							</div>
+				
+							<!-- DURATION -->
+							<div class='form-group'>
+								<label class='control-label col-sm-2' for='e_description'>Duration:</label>
+								<div class='col-sm-9'>
+									<input type='number' class='form-control text-center' id='e_duration' name='duration' placeholder='Duration' min="0" required readonly>
+								</div>
+							</div>
+				
+							<!-- START DATE -->
+							<div class='form-group'>
+								<label class='control-label col-sm-2' for='e_start'>Start Date:</label>
+								<div class='col-sm-9'>
+									<input type='date' class='form-control text-center' id='e_start' name='start' placeholder="YYYY-MM-DD" required>
+								</div>
+							</div>
+				
+							<!-- END DATE -->
+							<div class='form-group'>
+								<label class='control-label col-sm-2' for='e_end'>End Date:</label>
+								<div class='col-sm-9'>
+									<input type='date' class='form-control text-center' id='e_end' name='end' placeholder="YYYY-MM-DD" required>
+								</div>
+							</div>
+				
+							<!-- INSTITUTION -->
+							<div class='form-group'>
+								<label class='control-label col-sm-2' for='e_institution'>Institution:</label>
+								<div class='col-sm-9'>
+									<select class="form-control" id='e_institution' name='institution' style='width:100%; text-align-last: center;' required>
+										<option disabled selected value>Institution</option>
+										<?php
+											$query = "SELECT * FROM `institution`;";
+											$result = mysqli_query($connection, $query);
+											while($row = mysqli_fetch_assoc($result)):
+										?>
+										<option value='<?php echo $row['id']; ?>'><?php echo $row['name']; ?></option>
+										<?php endwhile; ?>
+									</select>
+								</div>
+							</div>
+
+
+							<br><hr style="width: 80%"><br><br>
+
+							
+							<!-- EXPIRY TIME -->
+							<div class='form-group'>
+								<label class='control-label col-sm-3' for='e_description'>Expiry Time:</label>
+								<div class='col-sm-7 input-groupd'>
+									<select class="form-control" style="text-align-last: center;" id="expiry_time" name="expiry_time" required>
+										<option selected value="30">30 min</option>
+										<option value="60">1 hour</option>
+										<option value="120">2 hours</option>
+										<option value="180">3 hours</option>
+<!-- 										<option value="240">4 hours</option> -->
+<!-- 										<option value="300">5 hours</option> -->
+										<option value="360">6 hours</option>
+										<option value="720">12 hours</option>
+										<option value="1080">18 hours</option>
+										<option value="1440">1 day</option>
+										
+									</select>
+								</div>
+							</div>
+							
+						</div>
+						
+						<br>
+						
+						<!--. Each Moment will need to have a <strong>predetermined expiry time</strong>; -->
+						<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>
+
+						<br>
+			
+			
+
+		<!-- ERROR ALERT FOR USER -->			
+	<div id="error-newExperience" class="row" style="display: none;">
+		<div class="col-sm-12">
+			<div class="alert alert-danger mb-1" role="alert">
+				<h4 class="error-lead">Error!</h4>
+				<p class="error-description"></p>
+			</div>
+		</div>
+	</div>
+			
+			
+      				</div><!--modal-body-->
+      				
+      				<!-- SUBMIT OR CANCEL -->
+     				<div class='modal-footer'>
+       					<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
+        				<button type='submit' class='btn btn-primary' name='newExperience'>Create</button>
+<!--         				<button type='button' class='btn btn-primary' data-dismiss='modal' onclick="nextModal('#New_3')">Next</button> -->
+      				</div>
+      				
+    			</div><!--modal-content-->
+  			</div><!--modal-dialog-->
+		</div><!--modal-->
+</form><!--form-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+		<script src="js/home.js"></script>
+		<script src="js/handleSubmit.js"></script>
+
+
+<script>
+
+		
+		["newExperience"].forEach(function(formName) {
+			
+			var form = document.getElementById(formName);
+			
+			if(form) {
+				form.addEventListener('submit', function(e) {
+					handleSubmit(e, formName);
+				});
+			}
+			
+		});
+
+
+		window.onload = function() {
+
+			// Start Date
+			setStartDateRange();
+	
+			// End Date
+			startDate.addEventListener('change', setEndDateRange);
+	
+			// Duration
+			startDate.addEventListener('change', setDuration);
+			endDate.addEventListener('change', setDuration);
+			
+		}		
+
+		</script>
+
+		<!-- END OF home.php -->
+
+
+<?php include_once 'footer.php'; ?>

img/google.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg">
+    <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"/>
+    <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"/>
+    <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"/>
+    <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"/>
+</svg>

index.php

@@ -0,0 +1,105 @@
+<?php
+	
+	require_once 'processes/config.php';
+	
+	// IF USER IS ALREADY LOGGED IN, REDIRECT TO home.php
+	// ELSE PROMPT USER TO LOG IN
+	if(!empty($_SESSION)) {
+		header('Location: home.php');
+		exit();
+	}
+	
+	include_once 'header.php';
+	
+?>
+	<!-- START OF index.php -->
+	<body>
+		<header id="main-header">
+        	<a id="logo" href=".">
+				TANIA
+            	<img src="img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
+        	</a>
+	        <div id="account">
+    	        <button class="google-button" onclick="window.location='<?php echo $loginURL; ?>'">
+    	            <img class="google-button__icon" src="img/google.svg" alt="Google">
+    	            <span class="google-button__text">Sign in with Google</span>
+    	        </button>
+    	    </div>
+    	</header>
+	
+  	  	<section id="showcase">
+   	     	<div id="showcase-text">
+    	        <div id="showcase-heading">
+                	Momentary Assesment Research Made Simple
+   	         	</div>
+    	        <div id="showcase-link">
+     	           <a onclick="window.location='<?php echo $loginURL; ?>'">Get Started</a>
+     	       </div>
+    	    </div>
+   	 	</section>	
+   	 	
+		<main id="home-main">
+        	<div id="main-sidebar">
+            	<h3>About</h3>
+        	    <ul>
+            	    <li><a href="#what-we-do" class="active">What We Do</a></li>
+                	<li><a href="#team">Team</a></li>
+	                <li><a href="#contact">Contact</a></li>
+    	        </ul>
+    	    </div>
+
+    	    <div class="main-content">
+    	    
+        	    <div id="what-we-do" class="main-content-box show">
+	                <h3>The problem</h3>
+    	            <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>
+        	        <h3>Our proposal</h3>
+                	<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>
+                	<br>
+                	<hr class="login-hr">
+                	<br>
+            	</div>
+
+            	<div id="team" class="main-content-box">
+                	<h3>We are a team of professors and students</h3>
+                	<div id="team-images">
+                	    <img src="img/juan.png" alt="Juan">
+						<!-- <img src="img/ivonne.png" alt="Ivonne"> -->
+                	    <img src="img/CDCC.png" alt="CDCC" style="background-color: #eee; padding: 5px;">
+                	    <!-- <img src="./img/victor.jpg" alt="Víctor" style="height: 100px; width: 100px; border-radius: 50%;"> -->
+                		<!-- <img src="./img/hector.jpg" alt="Héctor" style="height: 100px; width: 100px; border-radius: 50%;"> -->
+                    	<!-- <img src="./img/tatiana.jpg" alt="Tatiana" style="height: 100px; width: 100px; border-radius: 50%;"> -->
+                    	<!-- <img src="./img/coralys.jpg" alt="Coralys" style="height: 100px; width: 100px; border-radius: 50%;"> -->
+                    	<!-- <img src="./img/carlos.jpg" alt="Carlos" style="height: 100px; width: 100px; border-radius: 50%;"> -->
+                	</div>
+					<!-- Dr. Ivonne Vele (Department of Education) -->
+                	<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>
+                	<br>
+                	<hr class="login-hr">
+                	<br>
+            	</div>
+
+            	<div id="contact" class="main-content-box">
+            	    <h3>Contact Us</h3>
+            	    <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>
+            	    <br>
+            	    <div id="contact-info">
+            	    <p>17 Ave. Universidad STE 1701 San Juan, PR 00925-2537</p>
+            	    <p>787.764.0000 Ext. 88341, 88349 Fax:787.773.1717</p>
+            	    <p>juan.ramirez3@upr.edu</p>
+            	    </div>
+            	    <br>
+            	    <hr class="login-hr hidden-xs">
+            	    <br>
+            	</div>
+            	
+            	<br><br><br>
+            	
+        	</div>
+    	</main>
+    	
+    	<script src="js/index.js"></script>
+    	
+		<!-- END OF index.php -->
+		
+<?php include_once 'footer.php'; ?>

js/editQuestion.js

@@ -0,0 +1,51 @@
+$('#EditQuestion').on('show.bs.modal', function(event) {
+  var tableRow = $(event.relatedTarget);
+  var questionNumber = $(tableRow).data('question-number');
+//   var questionnaireID = $(tableRow).data('questionnaire-id');
+  var questionID = $(tableRow).data('question-id');
+  var premise = $(tableRow).data('premise');
+  var type = $(tableRow).data('type');
+  var min_text = $(tableRow).data('min_text');
+  var max_val = $(tableRow).data('max_val');
+  var max_text = $(tableRow).data('max_text');
+  var categoryID = $(tableRow).data('categoryid');
+  var subcategoryID = $(tableRow).data('subcategoryid');
+  var modal = $(this);
+  
+//   console.log('questionNumber' + questionNumber);
+//   console.log('questionnaireID' + questionnaireID);
+//   console.log('questionID' + questionID);
+//   console.log('premise' + premise);
+//   console.log('type' + type);
+//   console.log('min_text' + min_text);
+//   console.log('max_val' + max_val);
+//   console.log('max_text' + max_text);
+//   console.log('categoryID' + categoryID);
+//   console.log('subcategoryID' + subcategoryID);
+//   console.log(modal);
+  
+  deleteModal = $('#Delete');
+  deleteModal.find('.modal-body [name=questionID]').val(questionID);
+  deleteModal.find('.modal-body .question-number').text(questionNumber);
+
+  modal.find('.modal-body .question-number').text(questionNumber);  
+//   modal.find('.modal-body input[name="questionnaireID"]').val(questionnaireID);
+  modal.find('.modal-body input[name="questionID"]').val(questionID);
+  modal.find('.modal-body input[name="update_q_premise"]').val(premise);
+  modal.find('.modal-body select[name="update_q_type"]').val(type);
+  // min_val not necessary (always 1)
+  modal.find('.modal-body input[name="update_min_text"]').val(min_text);
+  modal.find('.modal-body input[name="update_max_val"]').val(max_val);
+  modal.find('.modal-body input[name="update_max_text"]').val(max_text);
+  modal.find('.modal-body select[name="update_q_category"]').val(categoryID);
+  modal.find('.modal-body select[name="update_q_subcategory"]').val(subcategoryID);
+
+
+  if(type === 2) {
+    modal.find('.modal-body .range').css('display', 'none');
+  } else if(type === 1) {
+  	modal.find('.modal-body .range').css('display', 'block');
+  }
+
+  
+});

js/handleSubmit.js

@@ -0,0 +1,172 @@
+function handleSubmit(event, formName) {
+
+	// Prevent naive submit
+	event.preventDefault();
+
+
+	// Fetch error description element
+	var errorDescription = document.querySelector('#error-'+formName+' .error-description');
+	var submitButton = document.querySelector('#'+formName+' button[type="submit"]');
+
+
+	// Disable button and start "Loading" state
+	submitButton.disabled = true;
+	submitButton.classList.remove('btn-danger');
+	submitButton.classList.add('btn-primary');
+	submitButton.innerHTML = '<div class="loader"></div>Loading...';
+
+
+	// Fetch all input from form
+	var fields = {};
+	$("form#" + formName).find("input, textarea, select, button[type='submit']").each(function() {
+		var input = $(this);
+		fields[input.attr('name')] = input.val();
+	});
+
+
+	// Construct request URL (make sure to use http or https accordingly)
+	var baseURI = document.location.protocol + "//tania.uprrp.edu/admin_nuevo/processes/";
+	var fullURI = baseURI;
+
+	switch(formName) {
+	
+		// home.php
+		case "newExperience":
+			fullURI += "insertExperience.php";
+			break;
+		
+		// viewExperience.php
+		case "editForm":
+			fullURI += "updateExperience.php";
+			break;
+		case "newQuestionnaire":
+			fullURI += "insertQuestionnaire.php";
+			break;
+		case "newMoment":
+		 	fullURI += "insertMoment.php";
+		 	break;
+		case "newMilestone":
+			fullURI += "insertMilestone.php";
+			break;
+		
+		// viewQuestionnaire.php
+		case "updateQuestionnaire":
+			fullURI += "updateQuestionnaire.php";
+			break;
+		case "deleteQuestionnaire":
+			fullURI += "deleteQuestionnaire.php";
+			break;
+		case "newQuestion":
+			fullURI += "insertQuestionToQuestionnaire.php";
+			break;
+		case "deleteQuestion":
+			fullURI += "deleteQuestion.php";
+			break;
+		
+		// viewMoment.php
+		case "updateMoment":
+			fullURI += "updateMoment.php";
+			break;
+		case "deleteMoment":
+			fullURI += "deleteMoment.php";
+			break;
+		case "removeQuestionFromMoment":
+			fullURI += "removeQuestionFromMoment.php";
+			break;
+		case "addExistingQuestionToMoment":
+			fullURI += "addExistingQuestionToMoment.php";
+			break;
+		
+		// Both viewMoment.php and viewQuestionnaire.php
+		case "updateQuestion":
+			fullURI += "updateQuestion.php";
+			break;
+			
+
+		
+		default:
+			fullURI = document.location.protocol + '//tania.uprrp.edu/admin_nuevo/test.php';
+			
+	}
+
+// 	console.log(JSON.stringify(fields) + "\n" + fullURI);
+
+
+	// Use fullURI to make POST request w/ jQuery,
+	// Wait for response (start "Loading" state),
+	// Act according to error or success
+			
+//	!!!!!! SHOULD ADD TIMEOUT TO REQUESTS TO !!!!!!!
+	$.post(fullURI, fields)
+		.done(function(data, text) {
+				
+			console.log(data + "and" + text);
+
+			// Fetch needed elements
+			let alert = document.querySelector('#error-'+formName+' .alert');
+			let errorLead = document.querySelector('#error-'+formName+' .error-lead');
+
+
+			// Clear errors and change message to "Success"
+			errorDescription.remove();
+			errorLead.innerText = "Success!";
+			errorLead.style.marginBottom = "0";
+
+
+			// Change alert style to "Success"
+			alert.classList.remove('alert-danger');
+			alert.classList.add('alert-success');
+
+
+			// Change button style to "Success"
+			submitButton.classList.remove('btn-primary');
+			submitButton.classList.add('btn-success');
+			submitButton.innerHTML = '<span class="glyphicon glyphicon-ok"></span> Success!';// could use &#10004;
+
+
+			// Reload page
+			setTimeout(function() {
+			
+				let deleteForms = ["deleteQuestionnaire", "deleteMoment", "deleteExperience"];
+			
+				if(deleteForms.includes(formName)) {
+					history.back(); // go back to viewExperience page (remember we don't know the ID of the experience it came from)
+				} else {
+					location.reload();
+				}
+				
+			}, 250);
+
+		})
+		.fail(function(request, status, error) {
+				
+			console.log(request.responseText);
+			console.log(status);
+			console.log(error);
+	
+			// Fetch needed elements
+			let alertContainer = document.getElementById('error-'+formName);
+					
+			// If response is not a JSON, or if JSON doesn't have "error" field, say so
+			// else, dynamically update error message according to server
+			if(!isJSON(request.responseText) || JSON.parse(request.responseText).error === undefined) {
+				errorDescription.innerText = "Something went wrong on our side! Please try again later.";
+			} else {
+				errorDescription.innerText = JSON.parse(request.responseText).error;
+			}
+
+			// Change button style to "Retry"
+			submitButton.innerHTML = "Retry";
+			submitButton.disabled = false;
+					
+			// Display alert
+			alertContainer.style.display = "initial";
+
+		});
+// 		.always(function(data, textStatus, errorThrown) {
+// 			console.log(data);
+// 			console.log(textStatus);
+// 			console.log(errorThrown);
+// 		});
+
+}

js/home.js

@@ -0,0 +1,77 @@
+///// !!! home.php !!! /////
+
+
+
+// Target the input fields to be updated
+let startDate = document.querySelector('input[name=start]');
+let endDate = document.querySelector('input[name=end]');
+let duration = document.querySelector('input[name=duration]');
+
+
+
+// For new experiences, the minimum start date is tomorrow and the maximum is a year from tomorrow
+function setStartDateRange() {
+
+	/* Compute the today, tomorrow and the year after tomorrow */
+// 	let today = new Date();
+// 	today.setHours(0, 0, 0, 0); // (default to 00:00:00)
+// 	let tomorrow = new Date(today);
+// 	tomorrow.setDate(tomorrow.getDate() + 1);
+// 	let aYearFromTomorrow = new Date(tomorrow);
+// 	aYearFromTomorrow.setDate(aYearFromTomorrow.getDate() + 365);
+
+	// Set minimum start date to tomorrow
+// 	startDate.min = tomorrow.toLocaleDateString();
+	
+	// Set maximum start date to a year from tomorrow
+// 	startDate.max = aYearFromTomorrow.toLocaleDateString();
+
+	if(!isNaN(Date.parse(startDate.value)) && !isNaN(Date.parse(endDate.value))) {
+		if(Date.parse(startDate.value) > Date.parse(endDate.value)) {
+			endDate.value = startDate.value;
+		}
+	}
+	
+}
+
+
+
+// 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
+function setEndDateRange() {
+	
+	/* Compute the day after the start date value, and the year after that */
+// 	let dayAfterStart = new Date(startDate.value);
+// 	dayAfterStart.setDate(dayAfterStart.getDate() + 1 + 1); // (additional 1 necessary because of line above, apparent 0-indexing)
+// 	let aYearFromMinimumEnd = new Date(dayAfterStart);
+// 	aYearFromMinimumEnd.setDate(aYearFromMinimumEnd.getDate() + 365);
+	
+	// Set minimum end date to the day after the start date
+// 	endDate.min = dayAfterStart.toLocaleDateString();
+	
+	// Set maximum end date to a year from the minimum end date
+// 	endDate.max = aYearFromMinimumEnd.toLocaleDateString();
+
+	if(!isNaN(Date.parse(startDate.value)) && !isNaN(Date.parse(endDate.value))) {
+		if(Date.parse(startDate.value) > Date.parse(endDate.value)) {
+			startDate.value = endDate.value;
+		}
+	}
+
+}
+
+
+
+// For new experiences, the duration (in weeks) will be the rounded weeks from start to end dates
+function setDuration() {
+
+	// Calculate the duration in weeks
+	x = new Date(startDate.value);
+	x.setDate(x.getDate() + 1); // (additional 1 necessary because of line above, apparent 0-indexing)
+	y = new Date(endDate.value);
+	y.setDate(y.getDate() + 1); // (additional 1 necessary because of line above, apparent 0-indexing)
+	
+	duration.value = String(Math.max(Math.round((y - x) / 604800000), 0)); // (1000 * 60 * 60 * 24 * 7 = 604800000)
+
+}
+
+

js/index.js

@@ -0,0 +1,39 @@
+///// !!! index.php !!! /////
+
+// Get tab links and tab panes
+let tabLinks = document.querySelectorAll('#main-sidebar a');
+let tabPanes = document.querySelectorAll('.main-content-box');
+
+
+
+// Add event listener to all tab links
+tabLinks.forEach(tabLink => {
+	tabLink.addEventListener('click', tabChange);
+});
+
+
+
+// Add selected link style and remove those who were not selected
+function tabChange(e) {
+
+    e.preventDefault();
+    
+    // Change the style of the links
+    tabLinks.forEach(tabLink => {
+    	if(tabLink === e.target) {
+    		tabLink.classList.add('active');
+    	} else {
+    		tabLink.classList.remove('active');
+    	}
+    });
+
+    // Change the opacity of each of the panes
+    tabPanes.forEach(tabPane => {
+    	if(tabPane.id === e.target.hash.substring(1)) {
+			tabPane.classList.add('show');
+    	} else {
+			tabPane.classList.remove('show');
+    	}
+    });
+
+}

js/main.js

@@ -0,0 +1,146 @@
+///// !!! GLOBAL FUNCTIONS !!! /////
+
+
+
+// CHECKS THAT STRINGS ARE JSON
+function isJSON(item) {
+
+// 	item = (typeof item !== "string")
+// 		? JSON.stringify(item)
+// 		: item;
+
+    try {
+        item = JSON.parse(item);
+    } catch (e) {
+        return false;
+    }
+
+    return (typeof item === "object" && item !== null);
+
+}
+
+
+
+// MODAL SWITCHING FUNCTION (home.php & viewExperience.php)
+function nextModal(name) {
+	$('[data-toggle="tooltip"]').tooltip('hide');
+	setTimeout(() => $(name).modal('show'), 100);
+}
+
+
+
+// Disable 'enter' key from submitting forms
+// $('form').keypress(function(event){ if (event.which == '13') { event.preventDefault(); } } );
+// $('[form]:not(button[form])').keypress(function(event){ if (event.which == '13') { event.preventDefault(); } } );
+
+
+
+// NUMBER INPUT SANITIZATION (home.php & viewExperience.php)
+$('input[type="number"]').on('change keyup', () => {
+
+	// Remove invalid characters
+	var sanitized = $(this).val().replace(/[^0-9]/g, '');
+	
+	// Update value
+	$(this).val(sanitized);
+	
+});
+
+
+
+// DATE INPUT DATEPICKER (home.php & viewExperience.php)
+// Taken from: http://www.javascriptkit.com/javatutors/createelementcheck2.shtml
+// If browser doesn't support input type="date", load files for jQuery UI Date Picker
+let testDateField = document.createElement("input");
+
+testDateField.setAttribute("type", "date");
+
+if(testDateField.type != "date") {
+	
+	// First load the CSS ("base" theme) for the calendar
+	document.write('<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n');
+	
+	// Then load the calendar functionality
+    document.write('<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>\n');
+   	
+   	// Initialize date picker widget (on document.ready)
+   	// Help: https://jqueryui.com/datepicker/#min-max
+   	window.onload = () => {
+   		if($('input[type="date"]').length !== 0) {
+	   		jQuery(($) => $('input[type="date"]').datepicker({ minDate: 0, maxDate: "+1Y"}));
+   		}
+	}
+	
+}
+
+
+
+// FOOTER COPYRIGHT YEAR
+let date = new Date().getFullYear();
+document.getElementById('copyrightDate').innerHTML = date;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// !!! FROM HERE ON DOWN, THERE'S ONLY OLD CODE !!! //
+
+
+
+// Declaration and initialization of the "naming counter" 
+var selectionCounter = 2;
+
+// WHEN WANTING TO ADD MULTIPLE QUESTIONNAIRES TO AN EXPERIENCE (newExperience.php and editExperience.php)
+function AddQuestionnaire() {
+
+    // We add two linebreaks so that there is space between each dropdown list
+    var br = document.createElement('br');
+    document.getElementById('addQuestionnaires').appendChild(br);
+    br = document.createElement('br');
+    document.getElementById('addQuestionnaires').appendChild(br);
+        
+    // We create a copy of the dropdown list we already have, so multiple questions can be added at the same time
+    var select = document.getElementById('questionnaire');
+    var clone = select.cloneNode(true);
+        
+    // The clones will have the same name as the original but with a number that will distinguish them
+    var name = select.getAttribute('name') + selectionCounter++;
+    clone.id = name;
+    clone.setAttribute('name', name);
+    document.getElementById('addQuestionnaires').appendChild(clone);
+    //document.getElementById("demo").innerHTML = selectionCounter;
+}
+
+// Reinitialization of the "naming counter"
+selectionCounter = 2;
+
+// WHEN WANTING TO ADD MULTIPLE QUESTIONS TO A QUESTIONNAIRE (newQuestionnaire.php and editQuestionnaire.php)
+function AddQuestion() { 
+    
+    // We add a linebreak so that there is space between each dropdown list
+    var br = document.createElement("br");
+    document.getElementById("addQuestions").appendChild(br)
+    var br2 = document.createElement("br");
+    document.getElementById("addQuestions").appendChild(br2)
+
+    // We create a copy of the dropdown list we already have, so multiple questions can be added at the same time.
+    var select = document.getElementById("question");
+    var clone = select.cloneNode(true);
+
+    // The clones will have the same name as the original but with a number that will distinguish them
+    var name = select.getAttribute("name") + selectionCounter++;
+    clone.id = name;
+    clone.setAttribute("name", name)
+    document.getElementById("addQuestions").appendChild(clone)
+    //document.getElementById("demo").innerHTML = selectionCounter;  	
+}
+

js/viewExperience.js

@@ -0,0 +1,242 @@
+///// !!! viewExperience.php !!! /////
+
+
+
+// Get tab links and tab panes
+let tabLinks = document.querySelectorAll('#view-experience-tabs a');
+let tabPanes = document.querySelectorAll('.main-content-box');
+
+
+
+// Add event listener to all tab links
+// tabLinks.forEach(tabLink => {
+// 	tabLink.addEventListener('click', tabChange);
+// });
+window.onload = tabChange;
+window.onhashchange = tabChange;
+
+
+
+// Add selected link style and remove those who were not selected
+function tabChange() {
+
+	let hash = document.location.hash;
+	
+	validHashes = ['#calendar', '#questionnaires', '#moments', '#milestones'];
+	
+	if(!validHashes.includes(hash)) {
+		hash = '#calendar';
+	}
+
+    // Change the style of the links
+    tabLinks.forEach(tabLink => {
+    	if(tabLink.hash === hash) {//tabLink === e.target
+    		tabLink.classList.add('active');
+    	} else {
+    		tabLink.classList.remove('active');
+    	}
+    });
+
+    // Change the opacity of each of the panes
+    tabPanes.forEach(tabPane => {
+    	if(tabPane.id === hash.substring(1)) {// tabPane.id === e.target.hash.substring(1)
+			tabPane.classList.add('show');
+    	} else {
+    		tabPane.classList.remove('show');
+    	}
+    });
+    
+    // Re-render calendar
+    if(calendar && hash === '#calendar') {
+    	calendar.render();
+    }
+
+}
+
+		
+		
+
+
+
+
+
+
+
+
+function newThing(e) {
+	let type = e.currentTarget.value;
+	let range = e.currentTarget.parentNode.parentNode.parentNode.nextElementSibling; // get the 4 (optional) inputs for scaled-type questions
+	range.style.display = (type === "1") ? 'block' : 'none'; // "1" corresponds to scaled questions
+}
+	
+	
+	
+// Add Question to Questionnaire							
+var Questions = 1;
+function addQuestion() {
+	// We add a linebreak so that there is space between each dropdown list
+	var br = document.createElement("br");
+	document.querySelector('#q'+Questions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', br);
+
+	// We create a copy of the dropdown list we already have, so multiple questions can be added at the same time.
+	var newQuestion = document.getElementById("q"+Questions);
+	var clone = newQuestion.cloneNode(true);
+
+	//The clones will have the same name as the original but with a number that will distinguish them
+	var newName = 'q' + Number(Questions + 1);
+	clone.id = newName;
+								
+	document.querySelector('#q'+Questions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', clone);
+    							
+	document.querySelector('#'+newName+' h4').innerHTML = 'Question '+Number(Questions+1);
+    							
+	document.querySelector('#'+newName+' #q_premise'+Questions).name = 'q_premise'+Number(Questions+1);
+	document.querySelector('#'+newName+' #q_premise'+Questions).id = 'q_premise'+Number(Questions+1);
+			
+	// Get the question type before changing it's name/id (for some reason it doesn't pass it on)
+	let type = $(newQuestion).find("#q_type"+Questions).val();
+	document.querySelector('#'+newName+' #q_type'+Questions).value = type;
+	document.querySelector('#'+newName+' #q_type'+Questions).name = 'q_type'+Number(Questions+1);
+	document.querySelector('#'+newName+' #q_type'+Questions).id = 'q_type'+Number(Questions+1);
+	
+	// Depending on the question type, display or hide min/max values/labels
+	if(type == "1") {
+		document.querySelector('#'+newName+' #range'+Questions).style.display = "block";
+	} else if(type == "2") {
+		document.querySelector('#'+newName+' #range'+Questions).style.display = "none";
+	}
+	
+	document.querySelector('#'+newName+' #range'+Questions).id = 'range'+Number(Questions+1);
+								
+	document.querySelector('#'+newName+' #min_val'+Questions).name = 'min_val'+Number(Questions+1);
+	document.querySelector('#'+newName+' #min_val'+Questions).id = 'min_val'+Number(Questions+1);
+								
+	document.querySelector('#'+newName+' #min_text'+Questions).name = 'min_text'+Number(Questions+1);
+	document.querySelector('#'+newName+' #min_text'+Questions).id = 'min_text'+Number(Questions+1);
+    							
+	document.querySelector('#'+newName+' #max_val'+Questions).name = 'max_val'+Number(Questions+1);
+	document.querySelector('#'+newName+' #max_val'+Questions).id = 'max_val'+Number(Questions+1);
+
+	document.querySelector('#'+newName+' #max_text'+Questions).name = 'max_text'+Number(Questions+1);
+	document.querySelector('#'+newName+' #max_text'+Questions).id = 'max_text'+Number(Questions+1);
+
+	// Get the question type before changing it's name/id (for some reason it doesn't pass it on)
+	let category = $(newQuestion).find("#q_category"+Questions).val();
+	document.querySelector('#'+newName+' #q_category'+Questions).value = category;
+	document.querySelector('#'+newName+' #q_category'+Questions).name = 'q_category'+Number(Questions+1);
+	document.querySelector('#'+newName+' #q_category'+Questions).id = 'q_category'+Number(Questions+1);
+
+	// Get the question type before changing it's name/id (for some reason it doesn't pass it on)
+	let subcategory = $(newQuestion).find("#q_subcategory"+Questions).val();
+	document.querySelector('#'+newName+' #q_subcategory'+Questions).value = subcategory;
+	document.querySelector('#'+newName+' #q_subcategory'+Questions).name = 'q_subcategory'+Number(Questions+1);
+	document.querySelector('#'+newName+' #q_subcategory'+Questions).id = 'q_subcategory'+Number(Questions+1);
+								
+	Questions++;
+	
+// 	$('[form]:not(button[form])').keypress(function(event){if (event.which == '13') { event.preventDefault(); } } );
+	
+}
+
+
+
+// For new questionnaires, create the dropdown for category selection
+let categoriesString = document.querySelector('#q_categories_tentative');
+categoriesString.addEventListener('change', function() {
+
+	// split input by commas
+	let x = document.getElementById('q_categories_tentative').value.split(',');
+	let y;// = '<option disabled selected>Category</option>';
+		
+	// clear any whitespace from each word in the split input
+	for(let i = 0; i < x.length; i++) {
+		x[i] = x[i].trim();
+		
+		// if string not empty and not whitespace, insert as category option
+		if(/\S/.test(x[i])) {
+			y += '<option value="'+x[i]+'">'+x[i]+'</option>';
+		}
+	}
+	
+	// change the selectable categories
+	$("[id^=q_category]").html(y);
+
+});
+
+
+
+// For new questionnaires, create the dropdowns for subcategory selection
+let subcategoriesString = document.querySelector('#q_subcategories_tentative');
+subcategoriesString.addEventListener('change', function() {
+
+	// split input by commas
+	let x = document.getElementById('q_subcategories_tentative').value.split(',');
+	let y;// = '<option disabled selected>Subcategory</option>';
+		
+	// clear any whitespace from each word in the split input
+	for(let i = 0; i < x.length; i++) {
+		x[i] = x[i].trim();
+		
+		// if string not empty and not whitespace, insert as category option
+		if(/\S/.test(x[i])) {
+			y += '<option value="'+x[i]+'">'+x[i]+'</option>';
+		}
+	}
+	
+	// change the selectable categories
+	$("[id^=q_subcategory]").html(y);
+
+});
+
+
+
+// For new moments, create the dropdowns for question selection
+let correspondingQuestionnaire = document.querySelector('select#m_questionnaire');
+correspondingQuestionnaire.addEventListener('change', function() {
+	$.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special.php",
+		{
+			id_questionnaire: correspondingQuestionnaire.value
+		},
+		function(data, status) {
+			$("select[id^=m_question_]").html(data);
+		}
+	);
+});
+
+
+
+// Target the input fields to be updated
+let newStartDate = document.querySelector('input[name=newStart]');
+let newEndDate = document.querySelector('input[name=newEnd]');
+let newDuration = document.querySelector('input[name=newDuration]');
+
+
+
+var selectableQuestions = 1;
+function addSelectableQuestion() {
+
+	var br = document.createElement("br");
+	document.querySelector('#qq'+selectableQuestions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', br);
+	
+	// We create a copy of the dropdown list we already have, so multiple questions can be added at the same time.
+	var newQuestion = document.getElementById("qq"+selectableQuestions);
+	var clone = newQuestion.cloneNode(true);
+
+	//The clones will have the same name as the original but with a number that will distinguish them
+	var newName = 'qq' + Number(selectableQuestions + 1);
+	clone.id = newName;
+	
+	document.querySelector('#qq'+selectableQuestions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', clone);
+    							
+	document.querySelector('#'+newName+' h4').innerHTML = 'Question '+Number(selectableQuestions+1);
+    							
+	document.querySelector('#'+newName+' #m_question_'+selectableQuestions).name = 'm_question_'+Number(selectableQuestions+1);
+	document.querySelector('#'+newName+' #m_question_'+selectableQuestions).id = 'm_question_'+Number(selectableQuestions+1);
+								
+	selectableQuestions++;
+	
+// 	$('[form]:not(button[form])').keypress(function(event){if (event.which == '13') { event.preventDefault(); } } );
+
+}
+
+

js/viewMoment.js

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

js/viewQuestionnaire.js

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

old_code/bankOfQuestions.php

@@ -0,0 +1,342 @@
+<?php
+
+	require_once 'processes/config.php';
+	require_once 'processes/dbh.inc.php';
+	require_once 'processes/checkLogin.php';
+	include_once 'header.php';
+	
+	// IF USER HAS QUESTIONS, DISPLAY THEM
+	// ELSE DON'T DISPLAY THE EMPTY TABLE
+	// CAMBIAR $query A "SELECT * FROM `question` WHERE `id_researcher`='".$dbUserData['id_researcher']."';"
+	$query1 = "SELECT * FROM `question` WHERE `id_category` IN(SELECT `id` FROM `category`) AND `id_subcategory` IN(SELECT `id` FROM `subcategory`);";
+	$result1 = mysqli_query($connection, $query1);
+	$x = 1;
+	
+?>  
+		<!-- START OF bankOfQuestions.php -->
+		<div class='container'>
+		
+			<div class='row'>
+				<div class='col-sm-10'>
+					<h2>Bank Of Questions</h2>
+					<p>View, add, and delete any question you like so that, later on, you can create a questionnaire.</p>
+				</div>
+				<div class='col-sm-2'>
+					<br><br>
+					<button id='adding' type='button' class='btn btn-default' data-toggle='modal' data-target='#New'>Add Question</button>
+				</div>
+			</div><!--row-->
+		
+			<div class='row'><div class='col'><br><hr><br></div></div>
+			
+			<?php if($result1): ?>
+			<div class='row'>
+				<div class='col'>
+					<table class='table table-hover table-striped' id='tableEvaluations'>
+						<thead>
+							<tr>
+								<th><h4>#</h4></th>
+								<th><h4>Premise</h4></th>
+								<th><h4>Category</h4></th>
+								<th><h4>Subcategory</h4></th>
+							</tr>
+						</thead>
+						<tbody>
+						<?php
+							while($row = mysqli_fetch_array($result1)):
+								$subquery1 = "SELECT `category`.`categoria` FROM `category` WHERE `category`.`id`=(SELECT `question`.`id_category` FROM `question` WHERE `question`.`id`=".$row['id'].");";
+								$subresult1 = mysqli_query($connection, $subquery1);
+								$subrow1 = mysqli_fetch_array($subresult1);
+								$subquery2 = "SELECT `subcategory`.`subcategoria` FROM `subcategory` WHERE `subcategory`.`id`=(SELECT `question`.`id_subcategory` FROM `question` WHERE `question`.`id`=".$row['id'].");";
+								$subresult2 = mysqli_query($connection, $subquery2);
+								$subrow2 = mysqli_fetch_array($subresult2);
+						?>
+							<tr>
+								<th><?php echo $row['id']; ?></th>
+								<td class='text-justify' style='width:35em;'><p><?php echo $row['premise']; ?></p></td>
+								<td style='width:18em;'><p><?php echo $subrow1['categoria']; ?></p></td>
+								<td style='width:18em;'><p><?php echo $subrow2['subcategoria']; ?></p></td>
+								<td style='text-align:center;width:10em;'>
+									<div class='btn-group'>
+										<button type='button' class='btn btn-default btn-sm' data-toggle='modal' data-target='#Edit_<?php echo $row['id']; ?>'>Edit</button>
+										<button type='button' class='btn btn-danger btn-sm' data-toggle='modal' data-target='#Delete_<?php echo $row['id']; ?>'>Delete</button>
+									</div>
+								</td>
+							</tr>
+						<?php $x++; endwhile; ?>
+						</tbody>
+					</table>
+				</div><!--col-->
+			</div><!--row-->
+			<?php endif; ?>
+			
+		</div><!--container-->
+		
+		<!-- POPUP FOR NEW QUESTION -->
+		<form class='form-horizontal' action='processes/insertQuestion.php' method='POST'>
+			<div class='modal fade' id='New' tabindex='-1' role='dialog' aria-labelledby='NewLabel' aria-hidden='true'>
+				<div class='modal-dialog modal-dialog-centered' role='document'>
+ 					<div class='modal-content'>
+						
+						<div class='modal-header'>
+			  	 	  		<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>
+   						</div>
+ 						
+ 						<div class='modal-body'>
+
+							
+							
+							<br>
+							<!-- PREMISE -->
+							<div class='form-group'>
+								<label class='col-sm-offset-1 control-label col-sm-2' for='question_premise'>Premise:</label>
+								<div class='col-sm-7'>
+									<textarea type='text' class='form-control' id='question_premise' name='question_premise' rows=4 style='resize:vertical'></textarea>
+								</div>
+							</div>
+
+							<!-- CATEGORY -->
+							<div class='form-group'>
+								<label class='col-sm-offset-1 control-label col-sm-2' for='question_category'>Category:</label>
+								<div class='col-sm-7'>
+									<select name='question_category' id='question_category' style='width:100%;'>
+										<option disabled selected>Select the Category</option>
+										<?php
+											// CAMBIAR $query A "SELECT `id`, `categoria` FROM `category` WHERE `id_researcher`='".$dbUserData['id_researcher']."';"
+											$query2 = "SELECT `id`, `categoria` FROM `category`;";
+											$result2 = mysqli_query($connection, $query2);
+											foreach($result2 as $categorias):
+										?>
+										<option value="<?php echo $categorias['id']; ?>"><?php echo $categorias['categoria']; ?></option>
+										<?php endforeach; ?>
+									</select>
+ 								</div>
+							</div>
+
+							<!-- SUBCATEGORY -->
+							<div class='form-group'>
+								<label class='col-sm-offset-1 control-label col-sm-2' for='question_subcategory'>Subcategory:</label>
+								<div class='col-sm-7'>
+									<select name='question_subcategory' id='question_subcategory' style='width:100%;'>
+										<option disabled selected>Select the Subcategory</option>
+										<?php
+											// CAMBIAR $query A "SELECT `id`, `subcategoria` FROM `subcategory` WHERE `id_researcher`='".$dbUserData['id_researcher']."';"
+											$query3 = "SELECT `id`, `subcategoria` FROM `subcategory`;";
+											$result3 = mysqli_query($connection, $query3);
+											foreach($result3 as $subcategorias):
+										?>
+										<option value="<?php echo $subcategorias['id']; ?>"><?php echo $subcategorias['subcategoria']; ?></option>
+										<?php endforeach; ?>
+									</select>
+ 								</div>
+							</div>
+
+							<!-- TYPE -->
+							<div class='form-group'>
+								<label class='col-sm-offset-1 control-label col-sm-2' for='question_type'>Type:</label>
+								<div class='col-sm-7'>
+									<select name='question_type' id='question_type' style='width:100%;'>
+										<option disabled selected>Select the Type of Question</option>
+										<?php
+											// CAMBIAR $query A "SELECT `id`, `description` FROM `type_of_question` WHERE `id_researcher`='".$dbUserData['id_researcher']."';"
+											$query4 = "SELECT `id`, `description` FROM `type_of_question`;";
+											$result4 = mysqli_query($connection, $query4);
+											foreach($result4 as $types):
+										?>
+										<option value="<?php echo $types['id']; ?>"><?php echo $types['description']; ?></option>
+										<?php endforeach; ?>
+									</select>
+								</div>
+							</div>
+
+							<!-- REFERENCE -->
+							<div class='form-group'>
+								<label class='col-sm-offset-1 control-label col-sm-2' for='question_reference'>Reference:</label>
+								<div class='col-sm-7'>
+									<select name='question_reference' id='question_reference' style='width:100%;'>
+										<option disabled selected>Select the Reference</option>
+										<?php
+											// CAMBIAR $query A "SELECT `id`, `referencia` FROM `reference` WHERE `id_researcher`='".$dbUserData['id_researcher']."';"
+											$query5 = "SELECT `id`, `referencia` FROM `reference`;";
+											$result5 = mysqli_query($connection, $query5);
+											foreach($result5 as $references):
+										?>
+										<option value="<?php echo $references['id']; ?>"><?php echo $references['referencia']; ?></option>
+										<?php endforeach; ?>
+									</select>
+								</div>
+							</div>
+							<br>
+
+
+
+      					</div><!--modal-body-->
+