Merge branch 'views'

Author: thomasbrickhouse

config/urls.py

@@ -7,6 +7,8 @@
 from django.urls import path
 from django.views import defaults as default_views
 from django.views.generic import TemplateView
+from thoughtswap.thoughtswap import views
+
 
 urlpatterns = [
     path("", TemplateView.as_view(template_name="pages/home.html"), name="home"),
@@ -27,6 +29,9 @@
     # ...
     # Media files
     *static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT),
+    path('prompt-bank/', views.prompt_bank_view, name='prompt_bank'),
+    path('add-prompt-to-bank/', views.add_prompt_to_bank, name='add_prompt_to_bank'),
+
 ]
 
 

docs/thoughtswap.md

@@ -0,0 +1,106 @@
+# ThoughtSwap
+
+## Project Overview
+
+Thought Swap is a discussion facilitation app where a facilitator sends prompts to participants, who submit anonymous responses that are later redistributed for small-group discussion.
+
+**Github repository:** https://github.com/Lab-Lab-Lab/ThoughtSwap
+
+**Key technologies:**
+- Django (backend)
+- Django Channels (WebSocket communication)
+- HTML, JavaScript (frontend templates)
+
+**Core features:**
+- Prompt creation, management, and reuse
+- Anonymous response submission
+- Response “swap” feature for small-group discussion
+- Facilitator dashboard with course and session controls
+
+## What Has Been Accomplished
+
+- Set up Django backend and database models
+  - Course, Enrollment, Prompt, Session, PromptUse, Thought
+- Integrated WebSocket support (channels) for real-time updates to both the facilitator and participant
+- Facilitators can switch their course from three states: Active, Draft, and Inactive
+- Facilitators can create prompts ahead of time
+- Facilitators can send prompts to participants to respond to
+- Facilitators can disperse responses using the “swap” feature
+- Participants can join a new course via a room code
+- Participants can view the current prompt
+- Participants can respond to the current prompt
+- Participants can receive a thought to discuss
+
+## Key Decisions Made (with Explanations)
+
+- **What is PromptUse**  
+  The `PromptUse` model acts as a connection between a prompt and a session. It allows the same prompt to be reused across multiple sessions while keeping track of responses specific to each session. This design improves flexibility by avoiding duplicate prompt entries and enables better tracking of when and where prompts were used.
+
+- **Why there are different HTML templates**  
+  I separated the HTML templates into `facilitator_session.html`, `participant_session.html`, and `teacher_dashboard.html` to clearly divide the interfaces by user role. Each role has very different needs:
+
+- **Intended functionality of restrictions around swapping**  
+  When swapping responses, the system should ensure that:
+  - Each participant receives a response from someone else (not their own)
+  - There must be at least two active student who have responded
+  - If there are more students than responses, responses are randomly duplicated
+
+
+## Known Issues or Bugs
+
+- Swapping thoughts needs to be more robust
+- Late joiners need to be fully addressed
+- Saftey and robustness of user contributions has not been fully tested
+
+## Next Steps
+
+- Front-end styling + UX
+- Facilitator's ability to create a new course
+- Facilitator's ability to create a new session
+- “Demo mode,” where the facilitator and/or participants need not create a lasting account
+- Functionality for late joiners
+- When swapping: if one author is more prolific for a certain prompt, before assigning all their thoughts to others, first ensure that each author's thoughts are assigned (and specifically to authors (users who have submitted for this prompt))
+- Somehow allow for the participants indicate their thoguhts about the ditributed thought
+- Start having semantic analysis
+- Find some way to track how the discussion went (Form for after the discussion?)
+- Participant view for the facilitator
+- Offer rich text editor in prompt composition and thought composition
+
+## Important Files / Code to Know
+
+- `facilitator_session.html`
+  This is the main interface for facilitators. It allows them to:
+  - Write and send prompts
+  - Swap anonymous participant responses
+  - Access the prompt bank
+  - View active and past prompts
+  It also includes WebSocket logic to handle live updates from the server.
+
+- `participant_session.html`
+  This is the participant view during a session. Participants can:
+  - See the current prompt
+  - Submit their responses
+  - Receive a swapped response to discuss
+  It connects to the WebSocket server to listen for prompt updates and swapped thoughts.
+
+- `teacher_dashboard.html`
+  This is the dashboard where teachers manage their courses and sessions.
+  - Shows all enrolled courses
+  - Lets the teacher switch session states (Active, Inactive, Draft)
+  - Displays and manages the prompt bank, including adding new prompts
+
+- `models.py`
+  Contains all the Django data models, including:
+  - Course, Enrollment, Prompt, Session, PromptUse, Thought
+
+- `views.py`
+  Contains the Django views that:
+  - Handle requests and render the pages
+  - Manage course state changes
+  - Provide data to the templates
+
+- `consumers.py`
+  Contains the Django Channels consumers that:
+  - Handle WebSocket connections
+  - Receive and send real-time events like new prompts, new thoughts, swaps, and prompt bank data
+

local.sqlite3

@@ -6,6 +6,18 @@ <h2>Facilitator</h2>
 <textarea id="promptText" placeholder="Write a prompt..."></textarea>
 <button onclick="sendPrompt()">Send Prompt</button>
 <button onclick="sendSwap()">Swap Responses</button>
+<button onclick="promptBank()">Prompt Bank</button>
+
+<div id="promptBankModal">
+    <ul id="promptBankList"></ul>
+    <button onclick="closePromptBank()">Close</button>
+</div>
+
+<div id="modalBackdrop"
+
+    onclick="closePromptBank()">
+</div>
+
 
 <hr>
 
@@ -21,7 +33,7 @@ <h4 id="activePromptText">Loading prompt...</h4>
 <script>
     const socket = new WebSocket("ws://" + window.location.host + "/ws/thoughtswap/{{ course.join_code }}/");
 
-    const prompts = {{prompts|safe}};
+    const prompts = {{ prompts| safe}};
     const promptIds = Object.keys(prompts);
     let activePromptId = promptIds[promptIds.length - 1];
 
@@ -77,6 +89,9 @@ <h4 id="activePromptText">Loading prompt...</h4>
         }
 
         if (data.type === "new_thought") {
+            console.log("Received new thought:", data);
+            const pid = data.prompt_id;
+            console.log("Prompt ID:", pid);
             if (!prompts[promptId]) {
                 prompts[promptId] = {
                     content: "(Unknown prompt)",
@@ -91,6 +106,32 @@ <h4 id="activePromptText">Loading prompt...</h4>
                 renderActivePrompt(promptId);
             }
         }
+
+        if (data.type === "prompt_bank_data") {
+            const bankList = document.getElementById("promptBankList");
+            bankList.innerHTML = "";
+
+            const sortedPrompts = data.prompts.sort((a, b) => b.id - a.id); 
+            console.log("sorted prompts", sortedPrompts);
+
+            if (sortedPrompts.length === 0) {
+                const li = document.createElement("li");
+                li.innerText = "No prompts available.";
+                bankList.appendChild(li);
+            } else {
+                sortedPrompts.forEach(prompt => {
+                    const li = document.createElement("li");
+                    li.innerText = prompt.content;
+                    const btn = document.createElement("button");
+                    btn.innerText = "Send Prompt";
+                    btn.onclick = () => sendPromptFromBank(prompt.id);
+                    li.appendChild(btn);
+                    bankList.appendChild(li);
+                });
+            }
+
+            openPromptBank();
+        }
     };
 
     function sendPrompt() {
@@ -109,8 +150,33 @@ <h4 id="activePromptText">Loading prompt...</h4>
             type: "swap_responses"
         }));
     }
+    function promptBank() {
+        console.log("Requesting prompt bank");
+        socket.send(JSON.stringify({
+            type: "prompt_bank"
+        }));
+    }
+
+    function sendPromptFromBank(promptId) {
+        socket.send(JSON.stringify({
+            type: "send_bank_prompt",
+            prompt_id: promptId
+        }));
+        closePromptBank();
+    }
+
+    function openPromptBank() {
+        document.getElementById("promptBankModal").style.display = "block";
+        document.getElementById("modalBackdrop").style.display = "block";
+    }
+
+    function closePromptBank() {
+        document.getElementById("promptBankModal").style.display = "none";
+        document.getElementById("modalBackdrop").style.display = "none";
+    }
+
+
 
-    // Initial render
     populatePromptDropdown();
     renderActivePrompt(activePromptId);
 </script>

thoughtswap/templates/thoughtswap/facilitator_session.html

@@ -32,6 +32,10 @@ <h2>Student</h2>
 
     function submitResponse() {
         const content = document.getElementById("responseText").value;
+        if (content.trim() === "") {
+            alert("Please enter a response before submitting.");
+            return;
+        }
         console.log("Sending response:", content);
         socket.send(JSON.stringify({
             type: "submit_thought",

thoughtswap/templates/thoughtswap/participant_session.html

@@ -24,4 +24,55 @@ <h3>My Courses</h3>
     </li>
     {% endfor %}
 </ul>
+
+<hr>
+
+<h3>Prompt Bank</h3>
+<ul id="promptBankList"></ul>
+
+<h6>Add a New Prompt to Bank</h6>
+<textarea id="newPromptText" placeholder="Write a new prompt..."></textarea><br>
+<button onclick="addPromptToBank()">Add to Bank</button>
+
+<script>
+    function loadPromptBank() {
+        fetch("/prompt-bank/")
+            .then(response => response.json())
+            .then(data => {
+                const bankList = document.getElementById("promptBankList");
+                bankList.innerHTML = "";
+
+                const sortedPrompts = data.prompts.sort((a, b) => b.id - a.id);
+
+                sortedPrompts.forEach(prompt => {
+                    const li = document.createElement("li");
+                    li.innerText = prompt.content;
+                    bankList.appendChild(li);
+                });
+            });
+    }
+
+    function addPromptToBank() {
+        const content = document.getElementById("newPromptText").value;
+        if (content.trim() === "") return;
+
+        fetch("/add-prompt-to-bank/", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "X-CSRFToken": "{{ csrf_token }}"
+            },
+            body: JSON.stringify({ content: content })
+        })
+            .then(response => response.json())
+            .then(data => {
+                document.getElementById("newPromptText").value = "";
+                loadPromptBank();
+            });
+    }
+
+    window.onload = loadPromptBank;
+</script>
+
+
 {% endblock %}