Update chat_application/templates/room.html

chat_application/templates/room.html

@@ -30,7 +30,7 @@
     	<h2 id="room-code-display">Topic: <span class="topic-title">{{ topic_info.title }}</span></h2>
       </div>
       <div class="topic-header-buttons">
-        <button id="feedback-btn">Provide Feedback</button>
+        <button id="feedback-btn">Share Feedback and Report Bugs</button>
         <button id="end-exp-btn">End Chat Session</button>
         <button id="abort-exp-btn">Abort Experiment</button>
       </div>
@@ -73,7 +73,7 @@
             <h3>Feedback</h3>
             <form id="feedback-form">
                  <div class="feedback-col">
-                   <label for="enter-feedback">Enter Feedback</label>
+                   <label for="enter-feedback">Tell us if you noticed something confusing, unexpected, or not working.</label>
                     <textarea id="enter-feedback" name="feedback"></textarea>
                   </div>
                   <br>
@@ -84,6 +84,23 @@
               </form>
           </div>
       </div>
+
+    <div id="feedback-status-confirm" class="modal">
+      <div class="modal-content">
+        <p>Feedback submitted.</p>
+        <div class="modal-buttons">
+          <button class="modal-btn" id="cancelFeedbackStatusBtn">Ok</button>
+        </div>
+      </div>
+    </div>
+    <div id="feedback-status-fail" class="modal">
+      <div class="modal-content">
+        <p>Feedback failed to submit.</p>
+        <div class="modal-buttons">
+          <button class="modal-btn" id="cancelFeedbackStatusBtn2">Ok</button>
+        </div>
+      </div>
+    </div>
   </div>
   <div id="chat-room-widget">
     <div id="msgs-container">
@@ -272,6 +289,8 @@
     //handler for feedback modal popup
     let feedbackModal = document.getElementById("feedback-modal");
     let form = document.getElementById("feedback-form");
+    let feedbackConfirm = document.getElementById("feedback-status-confirm");
+    let feedbackFail = document.getElementById("feedback-status-fail");
     document.getElementById("feedback-btn").onclick = function () {
       feedbackModal.style.display = "block";
     };
@@ -279,6 +298,16 @@
       feedbackModal.style.display = "none";
     };
 
+    document.getElementById("cancelFeedbackStatusBtn").onclick = function () {
+      feedbackConfirm.style.display = "none";
+      feedbackFail.style.display = "none";
+    };
+    
+    document.getElementById("cancelFeedbackStatusBtn2").onclick = function () {
+      feedbackConfirm.style.display = "none";
+      feedbackFail.style.display = "none";
+    };
+
     //override form function to instead emit save feedback event
     form.addEventListener("submit", function (e) {
         e.preventDefault();
@@ -287,8 +316,13 @@
         const feedback = data.get("feedback")?.trim();
 
         if (!feedback) return;
-        socketio.emit("feedback_given", { feedback });
-
+      
+        socketio.emit("feedback_given", { feedback }, (response) => {
+          if (response?.status === "True" || response?.status === true) {
+            feedbackConfirm.style.display = "block";
+          }
+        });
+      
         form.reset();
         document.getElementById("feedback-modal").style.display = "none";
     });