Hugging Face's logo

Spaces:
ProjectFrozone
/
Site
Running

App Files Community
4

Removed the chatroom "prompt" button entirely

#2
by riderle - opened
base: refs/heads/main
←
from: refs/pr/2
Discussion Files changed
+37
-19
Files changed (3) hide show
  1. chat_application/static/styles/styles.css +4 -4
  2. chat_application/templates/base.html +1 -1
  3. chat_application/templates/room.html +32 -14
chat_application/static/styles/styles.css CHANGED
@@ -462,21 +462,21 @@ hr {
462
  transition: 0.15s ease-in-out;
463
  }
464
 
465
- #abortYesBtn {
466
  background: #d9534f;
467
  color: white;
468
  }
469
 
470
- #abortYesBtn:hover {
471
  background: #c9302c;
472
  }
473
 
474
- #abortNoBtn {
475
  background: #e5e5e5;
476
  color: #333;
477
  }
478
 
479
- #abortNoBtn:hover {
480
  background: #ccc;
481
  }
482
 
 
462
  transition: 0.15s ease-in-out;
463
  }
464
 
465
+ #abortYesBtn, #abortYesBtn-pre {
466
  background: #d9534f;
467
  color: white;
468
  }
469
 
470
+ #abortYesBtn:hover, #abortYesBtn-pre:hover {
471
  background: #c9302c;
472
  }
473
 
474
+ #abortNoBtn, #abortNoBtn-pre {
475
  background: #e5e5e5;
476
  color: #333;
477
  }
478
 
479
+ #abortNoBtn:hover, #abortNoBtn-pre:hover {
480
  background: #ccc;
481
  }
482
 
chat_application/templates/base.html CHANGED
@@ -1,7 +1,7 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <title>Flask Chat</title>
5
  <link rel="stylesheet" href="../static/styles/styles.css" />
6
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
7
  </head>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <title>Chat Experiment</title>
5
  <link rel="stylesheet" href="../static/styles/styles.css" />
6
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
7
  </head>
chat_application/templates/room.html CHANGED
@@ -14,24 +14,20 @@
14
  </div>
15
  <h1 id="home-header">Chat Room</h1>
16
  <div id="room-subsection">
17
- <div class="topic-header-row">
18
  <div class="topic-header-info">
19
- <h2 id="room-code-display">Topic: <span class="topic-title">{{ topic_info.title }}</span>
20
- </h2>
21
- <div class="tooltip">
22
- <button class="prompt-btn">Prompt</button>
23
- <span class="tooltiptext">{{topic_info.text}}</span>
24
- </div>
25
  </div>
26
  <div class="topic-header-buttons">
27
- <button id="end-exp-btn">Chat Session Ends</button>
28
  <button id="abort-exp-btn">Abort Experiment</button>
29
  </div>
30
  </div>
31
  <div id="end-modal" class="modal">
32
  <div class="modal-content">
33
- <h3>Only Exit This Way When Instructed.</h3>
34
- <p>This signals the end of the chat session of the experiment. You will be redirected to the post-survey. This button is only to be used when the experiment ends, as indicated by the proctor. If you wish to exit the chat before instructed, use the "Abort Experiment" button instead.</p>
 
35
  <div class="modal-buttons">
36
  <button class="modal-btn" id="endYesBtn">Continue</button>
37
  <button class="modal-btn" id="endNoBtn">Cancel</button>
@@ -41,7 +37,19 @@
41
  <div id="abort-modal" class="modal">
42
  <div class="modal-content">
43
  <h3>Are you sure you want to leave this experiment?</h3>
44
- <p>This action is permanent. You will be redirected to the post-survey and will not be able to return to the chat room. However, if you do choose to leave, you will still receive the offered extra credit from your professor. If the chat session has ended, as signaled by the proctor, do NOT exit via this button. Use the "Chat Session Ends" button instead.</p>
 
 
 
 
 
 
 
 
 
 
 
 
45
  <div class="modal-buttons">
46
  <button class="modal-btn" id="abortYesBtn">Yes</button>
47
  <button class="modal-btn" id="abortNoBtn">Cancel</button>
@@ -167,10 +175,15 @@
167
  };
168
  // Handler for the Abort Experiment confirmation pop-up
169
  let modal = document.getElementById("abort-modal");
 
170
  document.getElementById("abort-exp-btn").onclick = function () {
171
  modal.style.display = "block";
172
  };
173
- document.getElementById("abortNoBtn").onclick = function () {
 
 
 
 
174
  modal.style.display = "none";
175
  };
176
  document.getElementById("abortYesBtn").onclick = function (e) {
@@ -180,7 +193,7 @@
180
  fetch("/abort", { method: "POST" })
181
  .then(() => {
182
  window.open(endpoint, "_blank");
183
- });
184
  modal.style.display = "none";
185
  textarea.disabled = true;
186
  textarea.placeholder = "The chat has ended.";
@@ -188,9 +201,14 @@
188
  document.getElementById("end-exp-btn").disabled = true;
189
  document.getElementById("abort-exp-btn").disabled = true;
190
  if (socketio) {
191
- socketio.close();
192
  }
 
 
 
 
193
  };
 
194
  // add auto scroll
195
  function isNearBottom(container, threshold = 120) {
196
  const distanceFromBottom = container.scrollHeight - (container.scrollTop + container.clientHeight);
 
14
  </div>
15
  <h1 id="home-header">Chat Room</h1>
16
  <div id="room-subsection">
17
+ <div class="topic-heFader-row">
18
  <div class="topic-header-info">
19
+ <h2 id="room-code-display">Topic: <span class="topic-title">{{ topic_info.title }}</span></h2>
 
 
 
 
 
20
  </div>
21
  <div class="topic-header-buttons">
22
+ <button id="end-exp-btn">End Chat Session</button>
23
  <button id="abort-exp-btn">Abort Experiment</button>
24
  </div>
25
  </div>
26
  <div id="end-modal" class="modal">
27
  <div class="modal-content">
28
+ <h3>Only Exit This Way After 20 Minutes of Participation in the Chatroom.</h3>
29
+ <p>This signals the end of the chat session of the experiment. You will be redirected to the post-survey.</p>
30
+ <p>This button is only to be used at the end of your 20 minutes of participation in the chatroom. <strong>If you wish to exit the chat before finishing your 20 minutes, use the "Abort Experiment" button instead.</strong></p>
31
  <div class="modal-buttons">
32
  <button class="modal-btn" id="endYesBtn">Continue</button>
33
  <button class="modal-btn" id="endNoBtn">Cancel</button>
 
37
  <div id="abort-modal" class="modal">
38
  <div class="modal-content">
39
  <h3>Are you sure you want to leave this experiment?</h3>
40
+ <p>This action is permanent. You will be redirected to the post-survey and will not be able to return to the chat room.</p>
41
+ <p><strong>If you finished your 20 minutes in the chatroom, do NOT exit via this button. Use the "Chat Session Ends" button instead.</strong></p>
42
+ <div class="modal-buttons">
43
+ <button class="modal-btn" id="abortYesBtn-pre">Yes</button>
44
+ <button class="modal-btn" id="abortNoBtn-pre">Cancel</button>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ <div id="abort-modal-confirm" class="modal">
49
+ <div class="modal-content">
50
+ <h3>Confirmation</h3>
51
+ <p>By clicking yes, you will exit the experiment <strong>without</strong> completing the final survey.</p>
52
+ <p>p>We encourage you to message us about any concerns or <a href="{{ feedback_form_url }}" target="_blank">provide feedback here</a>.</p>
53
  <div class="modal-buttons">
54
  <button class="modal-btn" id="abortYesBtn">Yes</button>
55
  <button class="modal-btn" id="abortNoBtn">Cancel</button>
 
175
  };
176
  // Handler for the Abort Experiment confirmation pop-up
177
  let modal = document.getElementById("abort-modal");
178
+ let abortModalConfirm = document.getElementById("abort-modal-confirm");
179
  document.getElementById("abort-exp-btn").onclick = function () {
180
  modal.style.display = "block";
181
  };
182
+ document.getElementById("abortYesBtn-pre").onclick = function () {
183
+ abortModalConfirm.style.display = "block";
184
+ modal.style.display = "none";
185
+ };
186
+ document.getElementById("abortNoBtn-pre").onclick = function () {
187
  modal.style.display = "none";
188
  };
189
  document.getElementById("abortYesBtn").onclick = function (e) {
 
193
  fetch("/abort", { method: "POST" })
194
  .then(() => {
195
  window.open(endpoint, "_blank");
196
+ });
197
  modal.style.display = "none";
198
  textarea.disabled = true;
199
  textarea.placeholder = "The chat has ended.";
 
201
  document.getElementById("end-exp-btn").disabled = true;
202
  document.getElementById("abort-exp-btn").disabled = true;
203
  if (socketio) {
204
+ socketio.close();
205
  }
206
+ abortModalConfirm.style.display = "none";
207
+ };
208
+ document.getElementById("abortNoBtn").onclick = function () {
209
+ abortModalConfirm.style.display = "none";
210
  };
211
+
212
  // add auto scroll
213
  function isNearBottom(container, threshold = 120) {
214
  const distanceFromBottom = container.scrollHeight - (container.scrollTop + container.clientHeight);