Live update + class progress

views/admin.ejs

@@ -1,8 +1,12 @@
 <!-- Simple Styling for layout -->
 <style>
   .members {
+    position: absolute;
+    top: 150px;
+    left: 25px;
     width: 230px;
     display: inline-block;
+    max-height: 30px
   }
   .buttons-container {
     position: absolute;
@@ -15,6 +19,19 @@
     border-radius: 10px;
     background-color: rgba(112, 196, 255, .3);
   }
+  .alert {
+    max-width: 58%;
+  }
+  .admin-detail {
+    position: absolute;
+    left: 25px;
+  }
+  #div-container {
+    position: absolute;
+    left: 30%;
+    margin-left: 25vm;
+    margin-right: 25vm;
+  }
   #newTeacher-btn {
     margin-left: 25px;
     margin-top: 10px;
@@ -73,13 +90,32 @@
     font-size: 30px;
     background: #f6f6f6;
   }
+
+  @media (max-width: 800px) {
+    .alert {
+      max-width: 55%;
+    }
+    #div-container {
+      position: absolute;
+      left: 25px;
+      top: 125px;
+      margin-left: 25vm;
+      margin-right: 25vm;
+      max-height: 125px;
+    }
+    .members {
+      position: absolute;
+      left: 24px;
+      top: 300px;
+    }
+  }
 </style>
 
 <!-- Header -->
-<h1 class="mt-4">Site Admin</h1>
 <div class='head'>
   <div id='teacher-container'>
-    <div>
+    <div class='admin-detail'>
+      <h1 class="mt-4">Site Admin</h1>
       <p id='welcome' class="lead mb-3">Welcome Admin</p>
     </div>
     <br>
@@ -87,7 +123,7 @@
       <!-- Action Buttons -->
       <a id='logout-btn' href="/users/logout" class="btn btn-outline-info btn-sm">Logout</a>
       <!-- Button trigger modal -->
-      <button id="newTeacher-btn" onClick='openModal()' type="button" class="btn btn-outline-info btn-sm">
+      <button id="newTeacher-btn" onClick='openModal("#exampleModal")' type="button" class="btn btn-outline-info btn-sm">
         Create New Teacher
       </button>
       <a id='bug-btn' href="https://github.com/Braeden57/XP-System/issues" target="_blank" class='btn btn-outline-info btn-sm'>Report Bug</a>
@@ -97,8 +133,8 @@
 
 <script>
 
-  function openModal() {
-    $("#exampleModal").modal()
+  function openModal(modalName) {
+    $(modalName).modal()
   }
 
   // Creates unique ID
@@ -117,10 +153,10 @@
     let id = makeid(8);
 
     if (type == 'error') {
-      document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none;" class="alert alert-warning alert-dismissible fade show" role="alert">';
+      document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none; clear: right;" class="alert alert-warning alert-dismissible fade show" role="alert">';
     }
     if (type == 'message') {
-      document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none;" class="alert alert-info alert-dismissible fade show" role="alert">';
+      document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none; clear: right;" class="alert alert-info alert-dismissible fade show" role="alert">';
     }
     document.getElementById('new-div-'+id).innerHTML += '<div id="message'+id+'">'+message+'</div>';
     document.getElementById('new-div-'+id).innerHTML += '<button id="close-btn-'+id+'" class="close" data-dismiss="alert" aria-label="Close"></button>';
@@ -135,9 +171,12 @@
   window.onload = function () {
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
-    const isSuccess = urlParams.get('createTeacher')
-    if(isSuccess == 'success') {
-      createDiv('message', 'Successfully Created Teacher')
+    const successRate = urlParams.get('successRate')
+    if(successRate == 'createdTeacher') {
+      createDiv('message', 'Successfully Created Teacher');
+    }
+    if(successRate == 'deletedUser') {
+      createDiv('message', "Successfully Deleted User");
     }
   }
 </script>
@@ -171,7 +210,32 @@
   <!-- Alert container -->
   <div id='div-container'></div>
 
-  <!-- Modal -->
+  <!-- Delete User Warning Modal -->
+  <div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="warningModalLabel">Are you sure you wish to delete this user?</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <form action="/users/deleteUser" method="POST" enctype="multipart/form-data">
+            <input id='delete_id' type='text' name='delete_id' value='' style='display: none'></input>
+            <button type="submit" class="btn btn-primary btn-block">
+              Yes, Continue and Delete This User
+            </button>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Create Teacher Modal -->
   <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
@@ -264,6 +328,11 @@
               <p>XP: <%= member.xp %></p>
 
               <p><%= member.role %></p>
+
+              <!-- Delete User Option -->
+              <button id="delete-btn" onClick='deleteUser("<%= member._id %>")' type="button" class="btn btn-outline-warning btn-sm">
+                Delete User
+              </button>
             </div>
             <br>
 
@@ -294,6 +363,13 @@
 
               // Display Rank
               document.getElementById('userRank-<%= member.id %>').innerHTML = currRank;
+
+              // Delete User Function
+              function deleteUser(id) {
+                document.getElementById('delete_id').value = id;
+                openModal("#warningModal");
+              }
+
             </script>
           </div>
         <% } %>
@@ -308,6 +384,11 @@
             <p class='lead mb-3'><%= member.email %></p>
             <div>
               <p><%= member.role %></p>
+
+              <!-- Delete User Option -->
+              <button id="delete-btn" onClick='deleteUser("<%= member._id %>")' type="button" class="btn btn-outline-warning btn-sm">
+                Delete User
+              </button>
             </div>
             <br>
           </div>

views/studentDashboard.ejs

@@ -2,7 +2,7 @@
 <style>
   .quests-container {
     position: absolute;
-    width: 650px;
+    width: 625px;
     height: 645px;
     top: 100px;
     left: 450px;
@@ -15,9 +15,13 @@
     width: 200px;
   }
   .quest-buttons {
-    margin-left: 25px;
+    margin-left: 10px;
     margin-top: 10px;
   }
+
+  #option1 {
+    width: 50px;
+  }
   #myProgress {
     position: relative;
     height: 200px;
@@ -40,6 +44,7 @@
     width: 100%;
     height: 1%;
     background-color: #46c7f2;
+    transition: 1s;
   }
   #pro-pic {
     position: absolute;
@@ -103,6 +108,24 @@
     font-size: 30px;
     background: #f6f6f6;
   }
+
+  @media (max-width: 800px) {
+    .quest-all {
+      position: absolute;
+      top: 770px;
+      right: 1145px;
+    }
+    #quest-title {
+      transform: translate(-125px, 0px);
+    }
+    .quest-container {
+      width: 400px;
+      border-style: solid;
+      border-color: rgba(0, 0, 0, .2);
+      border-radius: 15px;
+      background-color: rgba(0, 0, 0, .2);
+    }
+  }
 </style>
 
 <div class="student-container">
@@ -123,7 +146,7 @@
     <!-- User Data -->
     <div>
       <h1 id='userRank'></h1>
-      <h1>XP: <%= user.xp %></h1>
+      <h1 id='userXP'>XP: <%= user.xp %></h1>
       <p id='XP-Till'></p>
     </div>
     <br>
@@ -135,7 +158,7 @@
   </div>
 </div>
 
-<div>
+<div class="quest-all">
   <h1 id="quest-title">Quests</h1>
   <div class='quests-container'>
     <div class='quest-buttons'>
@@ -186,8 +209,29 @@
   </div>
 </div>
 
-<!-- Quest Display -->
+<script src="/socket.io/socket.io.js"></script>
 <script>
+  let socket = io.connect('http://localhost:5000');
+
+  socket.on("added:xp", function(data) {
+    if(data.userID == '<%=user._id%>') {
+      reCalculate(data.addXP);
+    }
+  });
+
+  window.onload = function() {
+    calculate();
+  }
+
+  let xp = <%= user.xp %>;
+
+  // Passing user _id to edit page script
+  function passData() {
+    let url = '/users/edit?name=' + encodeURIComponent('<%= user._id %>');
+
+    document.location.href = url;
+  }
+
   function showHTML() {
     let state = document.getElementById('HTML-Display').style.display;
     if (state == "block") {
@@ -220,23 +264,6 @@
       document.getElementById('JS-Display').style.display = 'block';
     }
   }
-</script>
-
-<!-- Passing user _id to edit page script -->
-<script>
-  function passData() {
-    let url = '/users/edit?name=' + encodeURIComponent('<%= user._id %>');
-
-    document.location.href = url;
-  }
-</script>
-
-<!-- Calculate Rank Data Script -->
-<script>
-  let xp = <%= user.xp %>;
-  let currRank;
-  let rankUp;
-  let remain;
 
   let ranks = [
     {"Digital Noob": 0}, // index 0
@@ -254,51 +281,157 @@
     {"Master Digital Crafter": 800} // index 12
   ]
 
-  // Get current rank
+  // Global old variables
+  let currRank;
+  let rankUp;
+  let remain;
+  let goal;
+  let total;
+  let progress;
+  let percent;
   let indexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 12]
-  if (xp < 800) {
-    for(var i = 0; i < ranks.length; i++) {
-      for (let rank in ranks[i]) {
-        let nextIndex = indexes[i];
-        for (let nextRank in ranks[nextIndex]) {
-          if (xp >= ranks[i][rank] && xp < ranks[nextIndex][nextRank]) {
-            currRank = rank;
-            currRankXP = ranks[i][rank]
-            // Calculate xp till next Rank
-            if (i < 12) {
-              i++;
-              let nextRank = ranks[i];
-              for (let r in nextRank) {
-                  let goal = nextRank[r];
-                  rankUp = r;
-                  remain = goal - xp;
-                  // Calculate progress bar
-                  let total = goal - currRankXP;
-                  let progress = xp - currRankXP;
-                  let percent = (progress/total)*100;
-                  let elem = document.getElementById("myBar");
-                  elem.style.height = percent + '%';
-                  document.getElementById('percent').innerHTML = progress + '|' + total;
+
+  // Initial calculate from 0 to current XP
+  function calculate() {
+    // Get current rank
+    if (xp < 800) {
+      for(var i = 0; i < ranks.length; i++) {
+        for (let rank in ranks[i]) {
+          let nextIndex = indexes[i];
+          // Gets rank after current rank
+          for (let nextRank in ranks[nextIndex]) {
+            // Verifies current XP is > currentRank xp level && current XP < nextRank xp level
+            if (xp >= ranks[i][rank] && xp < ranks[nextIndex][nextRank]) {
+              // Sets global old variables
+              currRank = rank;
+              currRankXP = ranks[i][rank]
+              // Calculate xp till next Rank
+              if (i < 12) {
+                i++;
+                let nextRank = ranks[i];
+                for (let r in nextRank) {
+                    goal = nextRank[r];
+                    rankUp = r;
+                    remain = goal - xp;
+                    // Calculate progress bar
+                    total = goal - currRankXP;
+                    progress = xp - currRankXP;
+                    percent = (progress/total)*100;
+                    let elem = document.getElementById("myBar");
+                    elem.style.height = percent + '%';
+                    document.getElementById('percent').innerHTML = progress + '|' + total;
+                }
               }
             }
           }
         }
       }
+    } else {
+      // Display data for max level
+      document.getElementById('percent').innerHTML = '800|800';
+      currRank = "Master Digital Crafter";
+      remain = 0;
+      rankUp = 'No higher Rank, Good Job!';
+      let elem = document.getElementById("myBar");
+      let percent = 100;
+      elem.style.height = percent + '%';
     }
-  } else {
-    // Display data for max level
-    document.getElementById('percent').innerHTML = '800|800';
-    currRank = "Master Digital Crafter";
-    remain = 0;
-    rankUp = 'No higher Rank, Good Job!';
-    let elem = document.getElementById("myBar");
-    let percent = 100;
-    elem.style.height = percent + '%';
+
+    // Display Data
+    document.getElementById('userRank').innerHTML = currRank;
+    document.getElementById('XP-Till').innerHTML = remain + 'XP till your next Rank: ' + rankUp;
   }
 
-  // Display Data
-  document.getElementById('userRank').innerHTML = currRank;
-  document.getElementById('XP-Till').innerHTML = remain + 'XP till your next Rank: ' + rankUp;
+  // Re calculate recaculates all the data from oldXP + addxp to newxp
+  function reCalculate(addXP) {
+    let newXP = xp + parseInt(addXP);
+    console.log(newXP);
+    // Get current rank
+    if (newXP < 800) {
+      for(var i = 0; i < ranks.length; i++) {
+        for (let rank in ranks[i]) {
+          let nextIndex = indexes[i];
+          for (let nextRank in ranks[nextIndex]) {
+            if (newXP >= ranks[i][rank] && newXP < ranks[nextIndex][nextRank]) {
+              let newCurrRank = rank;
+              let newCurrRankXP = ranks[i][rank]
+              // Calculate xp till next Rank
+              if (i < 12) {
+                i++;
+                let newNextRank = ranks[i];
+                for (let r in newNextRank) {
+                  let newRankUp = r;
+                  let newPercent;
+                  let diff = addXP;
+                  let newProgress = progress+diff
+                  let newRemain;
+                  let newGoal;
+                  let newTotal;
+                  // If new Progress doesnt go over current total
+                  if (newProgress < total) {
+                    // Set new percent and new remain
+                    let diffPercent=(diff/total)*100;
+                    newRemain = remain - diff;
+                    newTotal = total;
+                    let elem = document.getElementById("myBar");
+                    newPercent = percent + diffPercent;
+                    elem.style.height = newPercent + "%";
+                    document.getElementById('percent').innerHTML = newProgress + "|" + total;
+                    // Update Display with new Data
+                    document.getElementById('userXP').innerHTML = "XP: " + newXP;
+                    document.getElementById('XP-Till').innerHTML = newRemain + "XP till your next Rank: " + rankUp;
+                    document.getElementById('userRank').innerHTML = currRank;
+                  // If new progress goes over current total
+                  } else if (newProgress >= total) {
+                    // Set new variables
+                    newGoal = newNextRank[r];
+                    newTotal = newGoal - newCurrRankXP;
+                    newProgress = newXP - newCurrRankXP;
+                    newRemain = newTotal - newProgress;
+                    // Update percent from current percent to new percent
+	                  let elem = document.getElementById("myBar");
+                    newPercent = Math.round((newProgress/newTotal)*100);
+                    elem.style.height = newPercent + "%";
+                    // Adds 1 to progress till progress == total
+                    let progressDiff = total-progress;
+                    document.getElementById('percent').innerHTML = newProgress + "|" + newTotal;
+                    // Update Display with new Data
+                    document.getElementById('XP-Till').innerHTML = newRemain + "XP till your next Rank: " + newRankUp;
+                    document.getElementById('userXP').innerHTML = "XP: " + newXP;
+                    document.getElementById('userRank').innerHTML = newCurrRank;
+                    document.getElementById('percent').innerHTML = newProgress + "|" + newTotal;
+                  }
+                  // Set Main Variables to new values
+                  currRank = newCurrRank;
+        	        rankUp = newRankUp;
+                  remain = newRemain;
+      	          goal = newGoal;
+      	          total = newTotal;
+                  progress = newProgress;
+                  percent = newPercent;
+                  xp = newXP;
+                }
+              }
+            }
+          }
+        }
+      }
+    } else {
+      // Display data for max level
+      document.getElementById('percent').innerHTML = '800|800';
+      currRank = "Master Digital Crafter";
+      remain = 0;
+      xp = 800;
+      rankUp = 'No higher Rank, Good Job!';
+      let elem = document.getElementById("myBar");
+      let percent = 100;
+      elem.style.height = percent + '%';
+      // Display Data
+      document.getElementById('userXP').innerHTML = "XP: " + xp;
+      document.getElementById('userRank').innerHTML = currRank;
+      document.getElementById('XP-Till').innerHTML = remain + 'XP till your next Rank: ' + rankUp;
+    }
+  }
 
   function redirect(id) {
     let url = '/users/quests?id=' + encodeURIComponent(id);

views/teacherDashboard.ejs

@@ -40,6 +40,20 @@
     margin-top: 10px;
     margin-right: 15px;
   }
+  .course-container {
+    position: absolute;
+    left: 1000px;
+    background: rgba(0, 0, 0, .2);
+    border-radius: 24px;
+    border-style: solid;
+    border-color: rgba(0, 0, 0, .2);
+  }
+  .course-content {
+    margin-left: 15px;
+    margin-top: 10px;
+    margin-right: 15px;
+    max-width: 200px;
+  }
   .quest {
     color: #e05f3a;
   }
@@ -66,7 +80,7 @@
   }
   .buttons-container {
     position: absolute;
-    top: 425px;
+    top: 380px;
     right: 180px;
   }
   .button-content {
@@ -145,17 +159,9 @@
       <button onClick='passData()' class='button-content btn btn-outline-info btn-sm'>Edit</button>
       <a href="https://github.com/Braeden57/XP-System/issues" target="_blank" class='button-content btn btn-outline-info btn-sm'>Report Bug</a>
       <button class="button-content btn btn-outline-info btn-sm" data-toggle="modal" data-target="#createQuest">New Quest</button>
+      <button class="button-content btn btn-outline-info btn-sm" data-toggle="modal" data-target="#createClass">New Class</button>
     </div>
   </div>
-
-  <!-- Passing user _id to edit page script -->
-  <script>
-    function passData() {
-      let url = '/users/edit?name=' + encodeURIComponent('<%= user._id %>');
-
-      document.location.href = url;
-    }
-  </script>
 </div>
 <br>
 
@@ -192,7 +198,7 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel"</h5>
+        <h5 class="modal-title" id="exampleModalLabel">Add XP</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -203,10 +209,6 @@
             <input id='_id_add' type='text' name='_id_add' value='' style='display: none'></input>
             <input id="current_xp" type="text" name="current_xp" value="" style="display: none"></input>
           </div>
-          <div>
-            <p>Minimum: 1</p>
-            <p>Maximum: 50</p>
-          </div>
           <div class="form-group">
             <label for="amount">Amount</label>
             <input
@@ -214,7 +216,6 @@
               name="amount"
               type="number"
               min="1"
-              max="50"
               value=""
               class="form-control"
               >
@@ -236,7 +237,7 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="createQuestLabel"</h5>
+        <h5 class="modal-title" id="createQuestLabel">Create Quest</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -309,68 +310,63 @@
   </div>
 </div>
 
-<script>
-  // Creates unique ID
-  function makeid(length) {
-    var result = '';
-    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    var charactersLength = characters.length;
-    for ( var i = 0; i < length; i++ ) {
-      result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-    return result;
-  }
-
-  // Create Div
-  function createDiv(type, message) {
-    let id = makeid(8);
-
-    if (type == 'error') {
-      document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none;" class="alert alert-warning alert-dismissible fade show" role="alert">';
-    }
-    if (type == 'message') {
-      document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none;" class="alert alert-info alert-dismissible fade show" role="alert">';
-    }
-    document.getElementById('new-div-'+id).innerHTML += '<div id="message'+id+'">'+message+'</div>';
-    document.getElementById('new-div-'+id).innerHTML += '<button id="close-btn-'+id+'" class="close" data-dismiss="alert" aria-label="Close"></button>';
-    document.getElementById('close-btn-'+id).innerHTML += '<span aria-hidden="true">&times;</span>';
-    document.getElementById('new-div-'+id).style.display = "block";
-  }
-
-  // Pass name to Modal
-  function passName(name, xp, member_id) {
-    if (xp < 800) {
-      document.getElementById("exampleModalLabel").innerHTML = "Give " + name + " XP";
-      document.getElementById("_id_add").value = member_id;
-      document.getElementById("current_xp").value = xp;
-      $("#exampleModal").modal()
-    }
-    if (xp >= 800) {
-      // Construct and show Max XP Alert
-      message = name + ' has reached max XP!';
-      createDiv('message', message);
-    }
-  }
-
-  // Catching url Parameters
-  window.onload = function () {
-    const queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    const successRate = urlParams.get('successRate')
-    if(successRate == 'addXP > 50') {
-      createDiv('error', "Can't add more than 50 XP")
-    }
-    if(successRate == 'addXP <= 0') {
-      createDiv('error', "XP Must be Greater than 0");
-    }
-    if(parseInt(successRate) > 0 && parseInt(successRate) < 50 || parseInt(successRate) == 50) {
-      createDiv('message', "Gave " + successRate + "XP to a Student");
-    }
-    if(successRate == 'createdQuest') {
-      createDiv('message', "Successfully Created Quest");
-    }
-  }
-</script>
+<!-- Create Class Modal -->
+<div class="modal fade" id="createClass" tabindex="-1" role="dialog" aria-labelledby="createClassLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="createClassLabel">Create Class</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <form action="/users/createClass" method="POST">
+          <div>
+            <label for="name">Class Name</label>
+            <input
+              id="name"
+              name="name"
+              type="text"
+              value=""
+              class="form-control"
+              required
+            >
+          </div>
+          <div>
+            <label for="description">Class Description</label>
+            <textarea
+              id="description"
+              name="description"
+              value=""
+              class="form-control"
+              required
+            ></textarea>
+          </div>
+          <div>
+            <label for="grade">Grade</label>
+            <input
+              id="grade"
+              name="grade"
+              type="number"
+              min="8"
+              max="12"
+              value=""
+              class="form-control"
+              required
+            >
+          </div>
+          <button type="submit" class="btn btn-primary">
+            Create Class
+          </button>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
 
 <div class="members-container">
   <!-- List of all site students (not teachers) -->
@@ -442,13 +438,126 @@
   <!-- List of Quests -->
   <div class='quest-content'>
     <h2>All Quests</h2>
+    <ul>
     <% quests.forEach(function (quest) { %>
-      <p class='quest'><%= quest.title %></p>
+      <li><button class='list-button btn btn-outline-success mt-2' onclick="redirect('<%= quest._id %>')"><%= quest.title %></button></li>
+    <% }) %>
+    </ul>
+  </div>
+</div>
+
+<div class="course-container">
+  <!-- List of Courses -->
+  <div class='course-content'>
+    <h2>All Courses</h2>
+    <% courses.forEach(function (course) { %>
+      <div class='course'>
+        <p><%= course.name %>: Grade <%= course.grade %></p>
+      </div>
     <% }) %>
   </div>
+</div>
 
-<!-- Script for show/hide user profile data -->
+<script src="/socket.io/socket.io.js"></script>
 <script>
+  let socket = io.connect('http://localhost:5000');
+
+  // Creates unique ID
+  function makeid(length) {
+    var result = '';
+    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    var charactersLength = characters.length;
+    for ( var i = 0; i < length; i++ ) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+  }
+
+  function passData() {
+    let url = '/users/edit?name=' + encodeURIComponent('<%= user._id %>');
+
+    document.location.href = url;
+  }
+
+  // Create Div
+  function createDiv(type, message) {
+    let id = makeid(8);
+
+    if (type == 'error') {
+      document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none;" class="alert alert-warning alert-dismissible fade show" role="alert">';
+    }
+    if (type == 'message') {
+      document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none;" class="alert alert-info alert-dismissible fade show" role="alert">';
+    }
+    document.getElementById('new-div-'+id).innerHTML += '<div id="message'+id+'">'+message+'</div>';
+    document.getElementById('new-div-'+id).innerHTML += '<button id="close-btn-'+id+'" class="close" data-dismiss="alert" aria-label="Close"></button>';
+    document.getElementById('close-btn-'+id).innerHTML += '<span aria-hidden="true">&times;</span>';
+    document.getElementById('new-div-'+id).style.display = "block";
+  }
+
+  // Pass name to Modal
+  function passName(name, xp, member_id) {
+    if (xp < 800) {
+      document.getElementById("exampleModalLabel").innerHTML = "Give " + name + " XP";
+      document.getElementById("_id_add").value = member_id;
+      document.getElementById("current_xp").value = xp;
+      $("#exampleModal").modal()
+    }
+    if (xp >= 800) {
+      // Construct and show Max XP Alert
+      message = name + ' has reached max XP!';
+      createDiv('message', message);
+    }
+  }
+
+  let getParameterByName = function() {
+    let queries = location.search.substring(1).split('&'),
+        processed = {};
+    for (let query of queries) {
+        let [name, value] = query.split('=');
+        processed[decodeURIComponent(name)] = value? decodeURIComponent(value) : '';
+    }
+
+    return function(name) {
+        if (typeof processed[name] !== 'undefined')
+            return processed[name];
+        else
+            return null;
+    };
+  }();
+
+  function updateXP(addXP, id) {
+    let data = {
+      userID: id,
+      addXP: addXP
+    }
+    socket.emit('add:xp', data);
+  }
+
+  // Catching url Parameters
+  window.onload = function () {
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const successRate = urlParams.get('successRate')
+    if(successRate == 'addXP > 50') {
+      createDiv('error', "Can't add more than 50 XP")
+    }
+    if(successRate == 'addXP <= 0') {
+      createDiv('error', "XP Must be Greater than 0");
+    }
+    if(parseInt(successRate) > 0) {
+      createDiv('message', "Gave " + successRate + "XP to a Student");
+      updateXP(successRate, getParameterByName('id'));
+    }
+    if(successRate == 'createdQuest') {
+      createDiv('message', "Successfully Created Quest");
+    }
+    if(successRate == 'createdClass') {
+      createDiv('message', "Successfully created Course");
+    }
+  }
+
+  // Script for show/hide user profile data
   function openProfile(id) {
     let state = document.getElementById(id).style.display;
     if (state == "block") {
@@ -457,4 +566,11 @@
       document.getElementById(id).style.display = 'block';
     }
   }
+
+  // Script for redirecting to selected Quest
+  function redirect(id) {
+    let url = '/users/quests?id=' + encodeURIComponent(id);
+
+    document.location.href = url;
+  }
 </script>