Add feedback form modal button (#5)

- Add feedback form modal button (14c25abcff5ecc017922414ea30a1fc18947305d)
- Update chat_application/templates/home.html (71bf3c3376376342e8d96c7a65cb403683b912c8)
- Update chat_application/static/styles/styles.css (2fe51e23ad099eb32d220e7f37af3f2f1ecafcc5)
- Update chat_application/static/styles/styles.css (dccf66d0652f81f3b0b74c1f91b85d0853cb4a76)
- Update chat_application/main.py (60df311cf6360dbabcb32e30d033c8517545a83e)

chat_application/main.py

@@ -143,6 +143,7 @@ frobot = "projects/700531062565/locations/us-central1/endpoints/2951406418055397
 client = MongoClient("mongodb://127.0.0.1:27017/")
 db = client["huggingFaceData"]
 rooms_collection = db.rooms
+feedback_collection = db.feedback
 
 # List of fruits to choose display names from
 FRUIT_NAMES = ["blueberry", "strawberry", "orange", "cherry"]
@@ -639,6 +640,16 @@ def choose():
         "ended": False,
         "ended_at": None
     })
+    # Create the new feedback in the database
+    feedback_collection.insert_one({
+        "_id": room_id,
+        # creation date/time
+        "created_at": datetime.utcnow(),
+        # user identity
+        "user_id": user_id,
+        # empty feedback history
+        "feedbacks": [],
+    })
 
     session['room'] = room_id
     session['display_name'] = user_name
@@ -807,6 +818,34 @@ def handle_message(payload):
     # Ask each bot for a response
     socketio.start_background_task(ask_bot_round, room)
 
+
+@socketio.on('feedback_given')
+def handle_message(payload):
+    room = session.get('room')
+    name = session.get('display_name')
+    if not room or not name:
+        return
+
+    text = payload.get("feedback", "").strip()
+    if not text:
+        return  # ignore empty text
+
+    # Database-only message (with datetime)
+    db_feedback = {
+        "message": text,
+        "timestamp": datetime.utcnow()
+    }
+
+    print(db_feedback)
+    # Store the full version in the database
+    result = feedback_collection.update_one(
+        {"_id": room},
+        {"$push": {"feedback_responses": db_feedback}}
+    )
+
+    #LR TODO: add success/faillure msg and confirmation
+
+
 @socketio.on('disconnect')
 def handle_disconnect():
     room = session.get("room")

chat_application/static/styles/styles.css

@@ -498,15 +498,48 @@ hr {
   background: #ccc;
 }
 
-#welcomeOkBtn, #timerOkBtn {
+#welcomeOkBtn, #timerOkBtn, #submitFeedbackBtn {
   background: green;
   color: white;
 }
 
-#welcomeOkBtn:hover, #timerOkBtn:hover {
+#welcomeOkBtn:hover, #timerOkBtn:hover, #submitFeedbackBtn:hover {
   background: #016601;
 }
 
+#feedback-btn {
+  color: white;
+  font-weight: 800;
+  background-color: green;
+  text-decoration: none;
+  padding: 6px;
+  border: 2px solid green;
+  display: inline-block;
+  margin-top: 5px;
+  border-radius: 10px;
+  transition: all 0.1s ease-in;
+}
+
+#feedback-btn:hover {
+  color: green;
+  background-color: white;
+}
+
+.feedback-col {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    textarea {
+        width: 100%;
+        min-height: 120px;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        resize: vertical;
+    }
+}
+
 #idYesBtn {
   background: green;
   color: white;
@@ -534,12 +567,12 @@ hr {
   background: #016991;
 }
 
-#endNoBtn {
+#endNoBtn, #cancelFeedbackBtn {
   background: #e5e5e5;
   color: #333;
 }
 
-#endNoBtn:hover {
+#endNoBtn:hover, #cancelFeedbackBtn:hover {
   background: #ccc;
 }
 

chat_application/templates/home.html

@@ -11,9 +11,6 @@
       <button type="button" id="continue">Continue</button>
     </div>
     <hr />
-    <div class="feedback-notice">
-      <p>We encourage you to message us directly through Prolific about any concerns.  Additionally, you may provide feedback regarding the experiment <a class="feedback-link" target="_blank" href="{{ feedback_form_url | default('https://umw.qualtrics.com/jfe/form/SV_08v26NssCOwZTP8') }}">in this form</a>.</p>
-    </div>
   </form>
 </div>
 <div id="confirmID-modal" class="modal">

chat_application/templates/room.html

@@ -30,6 +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="end-exp-btn">End Chat Session</button>
         <button id="abort-exp-btn">Abort Experiment</button>
       </div>
@@ -67,6 +68,22 @@
         </div>
       </div>
     </div>
+    <div id="feedback-modal" class="modal">
+        <div class="modal-content">
+            <h3>Feedback</h3>
+            <form id="feedback-form">
+                 <div class="feedback-col">
+                   <label for="enter-feedback">Enter Feedback</label>
+                    <textarea id="enter-feedback" name="feedback"></textarea>
+                  </div>
+                  <br>
+                  <div class="modal-buttons">
+                      <button class="modal-btn" id="submitFeedbackBtn" type="submit">Submit</button>
+                      <button type="button" class="modal-btn" id="cancelFeedbackBtn">Cancel</button>
+                  </div>
+              </form>
+          </div>
+      </div>
   </div>
   <div id="chat-room-widget">
     <div id="msgs-container">
@@ -251,6 +268,30 @@
     document.getElementById("abortNoBtn").onclick = function () {
       abortModalConfirm.style.display = "none";
     };
+
+    //handler for feedback modal popup
+    let feedbackModal = document.getElementById("feedback-modal");
+    let form = document.getElementById("feedback-form");
+    document.getElementById("feedback-btn").onclick = function () {
+      feedbackModal.style.display = "block";
+    };
+    document.getElementById("cancelFeedbackBtn").onclick = function () {
+      feedbackModal.style.display = "none";
+    };
+
+    //override form function to instead emit save feedback event
+    form.addEventListener("submit", function (e) {
+        e.preventDefault();
+
+        const data = new FormData(form);
+        const feedback = data.get("feedback")?.trim();
+
+        if (!feedback) return;
+        socketio.emit("feedback_given", { feedback });
+
+        form.reset();
+        document.getElementById("feedback-modal").style.display = "none";
+    });
       
     // add auto scroll
     function isNearBottom(container, threshold = 120) {