Fix synchronous PI based on testing/feedback

bases/rsptx/assignment_server_api/routers/peer.py

@@ -38,6 +38,7 @@
     fetch_course_students,
     fetch_api_token,
     fetch_question,
+    create_user_experiment_entry,
 )
 from rsptx.db.models import UseinfoValidation, Useinfo
 from rsptx.db.async_session import async_session
@@ -750,6 +751,12 @@ def process_peep(
             rslogger.debug(f"FINAL PEEPS IN CHAT = {peeps}")
             rslogger.debug(f"FINAL PEEPS IN PERSON = {peeps_in_person}")
 
+            experiment_id = f"{div_id}_ab"
+            for sid in peeps_in_person:
+                await create_user_experiment_entry(sid=sid, ab=experiment_id, group=0)
+            for sid in peeps_in_chat:
+                await create_user_experiment_entry(sid=sid, ab=experiment_id, group=1)
+
         # Chat pairing for the remaining students in `peeps`
         done = len(peeps) == 0
         while not done:
@@ -1222,7 +1229,6 @@ async def clear_pairs(
 
 
 @router.get("/course_students")
-@instructor_role_required()
 @with_course()
 async def get_course_students(
     request: Request,

components/rsptx/templates/assignment/instructor/peer_dashboard.html

@@ -240,6 +240,17 @@
     #vote1details[open] summary::before { transform: rotate(90deg); }
     #vote1details summary:hover { color: var(--pi-teal-dark); }
     #vote1details > div { padding: 4px 16px 12px; font-size: 13px; color: var(--af-ink-2); }
+
+    .pi-lineno {
+        display: inline-block;
+        min-width: 2em;
+        color: #999;
+        text-align: right;
+        border-right: 1px solid #ddd;
+        padding-right: 0.5em;
+        margin-right: 0.8em;
+        user-select: none;
+    }
 </style>
 {% endblock %}
 
@@ -271,7 +282,6 @@ <h3>Question {{ current_qnum }} of {{ num_questions }}</h3>
                     </select>
                 </div>
             </div>
-            <div id="pi-session-status">Vote 1 in Progress</div>
             <div id="pi-assignment-navigation">
                 {% if not is_last %}
                 <button type="submit" id="nextq" class="btn btn-info" name="next" value="Next">Next Question</button>
@@ -333,11 +343,12 @@ <h3>Question {{ current_qnum }} of {{ num_questions }}</h3>
                         <button type="button" id="facechat" class="step-action" onclick="enableFaceChat(event)" disabled>Enable In-Person Chat</button>
                         <span class="or">or</span>
                         <button type="button" id="makep" class="step-action" onclick="makePartners(event, false)" disabled>Enable Text Chat</button>
-                        {% if enable_ab %}
-                        <span class="or">or</span>
+                    </div>
+                    {% if enable_ab %}
+                    <div style="margin-top:8px; border-top:1px solid #e5e7eb; padding-top:8px;" class="step-actions">
                         <button type="button" id="makeabgroups" class="step-action" onclick="makePartners(event, true)" disabled>Run A/B Experiment</button>
-                        {% endif %}
                     </div>
+                    {% endif %}
                 </div>
 
                 <div class="pi-step-group pi-step" id="pi-step-col-3">
@@ -577,5 +588,16 @@ <h3>Question {{ current_qnum }} of {{ num_questions }}</h3>
         });
         syncActivityFlow();
     }
+
+    setTimeout(function addLineNumbers() {
+        document.querySelectorAll(".oneq pre").forEach(function (pre) {
+            var lines = pre.innerHTML.split("\n");
+            if (lines.length <= 1) return;
+            if (lines[lines.length - 1].trim() === "") lines.pop();
+            pre.innerHTML = lines.map(function (line, i) {
+                return '<span class="pi-lineno">' + (i + 1) + "</span>" + line;
+            }).join("\n");
+        });
+    }, 1000);
 </script>
 {% endblock %}

components/rsptx/templates/assignment/student/peer_question.html

@@ -30,6 +30,17 @@
     .hidden-content {
         display: none;
     }
+
+    .pi-lineno {
+        display: inline-block;
+        min-width: 2em;
+        color: #999;
+        text-align: right;
+        border-right: 1px solid #ddd;
+        padding-right: 0.5em;
+        margin-right: 0.8em;
+        user-select: none;
+    }
 </style>
 {% endblock %}
 
@@ -104,9 +115,11 @@ <h2>Peer Instruction: {{ assignment_name }}</h2>
             </div>
 
             <div id="group_select_panel" class="col-md-6" style="display: none;">
-                <p><strong>In person discussion:</strong> select the people in your discussion group.</p>
+                <p><strong>Who did you talk to?</strong> Click to open the dropdown, type a name to search or scroll to select.</p>
                 <select id="assignment_group" multiple class="assignment_partner_select" style="width: 95%">
+                    <option value=""></option>
                 </select>
+                <p style="font-size:12px; color:#6b7280; margin-top:4px;">You can select multiple people.</p>
             </div>
         </div>
     </div>
@@ -201,5 +214,16 @@ <h2>Peer Instruction: {{ assignment_name }}</h2>
         await setupPeerGroup();
     }
     doIt();
+
+    setTimeout(function addLineNumbers() {
+        document.querySelectorAll(".oneq pre").forEach(function (pre) {
+            var lines = pre.innerHTML.split("\n");
+            if (lines.length <= 1) return;
+            if (lines[lines.length - 1].trim() === "") lines.pop();
+            pre.innerHTML = lines.map(function (line, i) {
+                return '<span class="pi-lineno">' + (i + 1) + "</span>" + line;
+            }).join("\n");
+        });
+    }, 1000);
 </script>
 {% endblock %}

components/rsptx/templates/staticAssets/js/peer.js

@@ -1,15 +1,15 @@
 // Configuration for the PI steps and helper functions to handle step progression in the instructor's interface
 const STEP_CONFIG = {
     vote1: {
-        next: ['makep', 'facechat', 'makeabgroups'],
+        next: ['makep', 'facechat'],
         status: 'Vote 1 Stopped'
     },
     makep: {
-        next: ['vote2'],
+        next: ['vote2', 'makeabgroups'],
         status: 'Text Chat in Progress…'
     },
     facechat: {
-        next: ['vote2'],
+        next: ['vote2', 'makeabgroups'],
         status: 'In-person Chat in Progress…'
     },
     makeabgroups: {
@@ -236,7 +236,7 @@ function connect(event) {
                                 }
                             } else {
                                 if (getVoteNum() < 2) {
-                                    messarea.innerHTML = `<h3>Please give an explanation for your answer.</h3><p>Then, discuss your answer with your group members.</p>`;
+                                    messarea.innerHTML = `<h3>Wait for your instructor to start the discussion.</h3>`;
                                 } else {
                                     messarea.innerHTML = `<h3>Voting for this question is complete.</h3>`;
                                     let feedbackDiv = document.getElementById(`${currentQuestion}_feedback`);
@@ -354,20 +354,7 @@ function connect(event) {
                         }
                     }
 
-                    if (displayPeers.length > 0) {
-                        messarea.innerHTML = `<h3>Current Verbal Discussion Group</h3><p>Please have a verbal discussion with your selected partners:</p><ul>`;
-                        for (const p of displayPeers) {
-                            messarea.innerHTML += `<li>${p}</li>`;
-                        }
-                        messarea.innerHTML += `</ul>`;
-                    } else {
-                        // fallback to server-provided group list
-                        messarea.innerHTML = `<h3>Current Verbal Discussion Group</h3><p>Please have a verbal discussion with the following group:</p><ul>`;
-                        for (const peer of groupList) {
-                            messarea.innerHTML += `<li>${peer}</li>`;
-                        }
-                        messarea.innerHTML += `</ul>`;
-                    }
+                    messarea.innerHTML = `<h3>Current Verbal Discussion Group</h3><p>Please have a verbal discussion with your group, then select who you talked to below.</p>`;
 
                     let facechat = document.getElementById("group_select_panel");
                     if (facechat) {
@@ -805,7 +792,7 @@ async function setupPeerGroup() {
     }
     // Make the select element searchable with multiple selections
     $('.assignment_partner_select').select2({
-        placeholder: "Select up to 4 team members",
+        placeholder: "Click to search or select by name",
         allowClear: true,
         maximumSelectionLength: 4,
     });