Improve async PI student user experience: step banner, button fix, and prompt update

bases/rsptx/web2py_server/applications/runestone/controllers/peer.py

@@ -724,6 +724,7 @@ def peer_async():
         question_num = int(request.vars.question_num)
 
     current_question, all_done = _get_numbered_question(assignment_id, question_num - 1)
+    total_questions = len(_get_assignment_questions(assignment_id))
 
     assignment = db(db.assignments.id == assignment_id).select().first()
 
@@ -762,6 +763,8 @@ def peer_async():
         assignment_id=assignment_id,
         assignment_name=assignment.name,
         nextQnum=question_num + 1,
+        total_questions=total_questions,
+        is_last_question=(question_num >= total_questions),
         all_done=all_done,
         has_vote1=has_vote1,
         has_reflection=has_reflection,
@@ -929,7 +932,7 @@ def get_async_llm_reflection():
         "only speak in lower case.\n"
         "you are a student talking to another student during peer instruction.\n"
         "you are both looking at the same multiple choice question with code and answers.\n"
-        "you remember the code and choices.\n"
+        "you remember the question and choices.\n"
         "most messages should be short (1 to 3 sentences often very short).\n"
         "use casual informal language and common typos.\n"
         "never use commas.\n"
@@ -938,23 +941,24 @@ def get_async_llm_reflection():
         "do not sound like a teacher.\n"
         "do not explain step by step.\n"
         "never say something is right or wrong.\n"
-        "your answer can shift throughout the conversation\n"
+        "do not pretend to have picked an answer yourself.\n"
         "never mention a choice letter as the correct answer.\n"
-        "never clearly describe the final result of the code.\n"
-        "never fully state what the program prints.\n"
-        "use common misconceptions relating to the specific problem.\n"
-        "refer to code loosely like 'that line' or 'the loop' or 'the head' or 'the print'.\n"
+        "if the question includes code never clearly describe the final result or fully state what it prints.\n"
+        "if the question does not include code do not make up or reference code that is not there.\n"
+        "only refer to what is actually in the question.\n"
+        "be aware of common misconceptions but do not introduce them yourself.\n"
+        "if there is code refer to it loosely like 'that line' or 'the loop' or 'the print'.\n"
         "often hedge with uncertainty.\n"
-        #"never agree with the other student's interpretation even if it sounds correct.\n" #porter found when PI is adversarial students disengage
-        "use content from the other multiple choice options in your reponses when needed\n"
-        "let your mental model shift slightly under pressure but keep reasoning partial and never fully resolve\n"
-        "if the other student clearly sounds confident or repeats the same answer twice stop debating and tell them to vote again or submit it.\n"
+        "ask the other student to explain why they picked their answer and how they reasoned through it.\n"
+        "ask follow up questions about their reasoning like 'what makes you think that' or 'how did you trace through it'.\n"
+        "do not push them toward a different answer or imply their answer is wrong.\n"
+        "never reveal or hint at which answer is correct or incorrect.\n"
+        "never say things like 'the feedback says' or 'according to the answer' or reference any grading or correctness information.\n"
+        "do not make up information that is not in the question.\n"
+        "if you are unsure about something say so honestly instead of guessing.\n"
+        "if the other student clearly sounds confident or repeats the same answer twice tell them to vote again or submit it.\n"
         "do not continue reasoning after telling them to vote again.\n"
-        "sometimes question whether you even read the code correctly before forming an opinion.\n"
-        "occasionally bring up a wrong answer option as if it might be right without committing to it.\n"
-        "pick an answer choice different than the one the student selected and ask the student to explain why it cannot be correct.\n"
-        "show reasoning process not conclusions, think out loud rather than arriving anywhere.\n"
-        "focus on reasoning not teaching.\n\n"
+        "focus on getting them to think through the problem not on changing their mind.\n\n"
     )
 
     if question:

bases/rsptx/web2py_server/applications/runestone/static/js/peer.js

@@ -1,5 +1,4 @@
 // Configuration for the PI steps and helper functions to handle step progression in the instructor's interface
-console.log("PEER JS VERSION TEST 12345");
 const STEP_CONFIG = {
     vote1: {
         next: ['makep', 'facechat', 'makeabgroups'],

bases/rsptx/web2py_server/applications/runestone/views/peer/peer_async.html

@@ -33,6 +33,21 @@
  </div>
 
 <h2>Peer Instruction Question (After Class)</h2>
+
+{{ if all_done == "false": }}
+<div id="stepBanner" style="
+  background: #4A9FDE;
+  color: #fff;
+  padding: 10px 16px;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  font-size: 16px;
+  font-weight: bold;
+">
+  <span style="opacity:1">●</span> <span style="opacity:0.4">●</span> <span style="opacity:0.4">●</span> &nbsp;&nbsp;Step 1 of 3: Answer the question
+</div>
+{{ pass }}
+
 <div id="imessage">
     <p>This page is meant for you to use <i>after</i> the inclass peer instruction is over.
         <ol>
@@ -42,7 +57,7 @@ <h2>Peer Instruction Question (After Class)</h2>
             <li>Answer the question <strong>again.</strong>  Even if you are not changing your answer from the first time.</li>
         </ol>
     </p>
-</div> 
+</div>
 
 <div class="row">
     {{ if all_done == "false": }}
@@ -105,6 +120,15 @@ <h3>Congratulations, you have completed this assignment!</h3>
         </div>
     </div>
     {{pass}}
+    {{ if all_done == "false": }}
+    <div class="col-md-12" style="text-align: right; margin-top: 10px; margin-bottom: 20px;">
+        <form action="/peer/peer_async" style="display: inline;">
+            <input type="hidden" name="assignment_id" value="{{=assignment_id}}" />
+            <input type="hidden" name="question_num" value="{{=nextQnum}}" />
+            <button type="submit" onclick="return checkVoteCount()" class="btn btn-default">{{ if is_last_question: }}Done{{ else: }}Next Question{{ pass }}</button>
+        </form>
+    </div>
+    {{ pass }}
 </div>
 {{ if has_vote1 and has_reflection and llm_reply: }}
 <hr>
@@ -113,16 +137,6 @@ <h3>Congratulations, you have completed this assignment!</h3>
   <p>{{=llm_reply}}</p>
 </div>
 {{ pass }}
-
-{{ if all_done == "false": }}
-<div>
-    <form action="/peer/peer_async">
-        <input type="hidden" name="assignment_id" value="{{=assignment_id}}" />
-        <input type="hidden" name="question_num" value="{{=nextQnum}}" />
-        <button type="submit" onclick="return checkVoteCount()" style="float: right; margin-bottom: 20px;">Next Question</button>
-    </form>
-</div>
-{{ pass }}
 <script>
   window.DISABLE_ASYNC_EXPLAINER = true;
 </script>
@@ -157,6 +171,38 @@ <h3>Congratulations, you have completed this assignment!</h3>
     if (btn) btn.disabled = true;
   }
 
+  function updateStepBanner(step) {
+    const banner = document.getElementById("stepBanner");
+    if (!banner) return;
+    banner.style.color = "#fff";
+    var dots = function(filled) {
+      var html = "";
+      for (var i = 0; i < 3; i++) {
+        var style = i < filled ? "opacity:1" : "opacity:0.4";
+        html += '<span style="' + style + '">●</span> ';
+      }
+      return html;
+    };
+    var label;
+    var bg;
+    if (step === 1) {
+      label = "Step 1 of 3: Answer the question";
+      bg = "#4A9FDE";
+    } else if (step === 2) {
+      label = "Step 2 of 3: Explain your answer and discuss";
+      bg = "#2878B5";
+    } else if (step === 3) {
+      label = "Step 3 of 3: Vote again — you may keep or change your answer";
+      bg = "#1A5276";
+    } else if (step === 4) {
+      var hasNextQ = document.querySelector('form[action="/peer/peer_async"]');
+      label = hasNextQ ? "Done! Move to the next question." : "Done! You have completed this assignment.";
+      bg = "#0E3D56";
+    }
+    banner.innerHTML = dots(step > 3 ? 3 : step) + "&nbsp;&nbsp;" + label;
+    banner.style.background = bg;
+  }
+
   function setReflectionPanelEnabled(enabled) {
     const panel = document.getElementById("reflectionPanel");
     if (!panel) return;
@@ -174,6 +220,7 @@ <h3>Congratulations, you have completed this assignment!</h3>
       alert("Please submit your first vote before voting again.");
       return;
     }
+    updateStepBanner(3);
 
     window._vote2Enabled = true;
     window._vote1Locked = false;
@@ -631,6 +678,7 @@ <h3>Congratulations, you have completed this assignment!</h3>
             if (studentVoteCount === 1 && !window._vote2Enabled) {
               hasVote1 = true;
               console.log("vote 1 submitted");
+              updateStepBanner(2);
 
               const vote2Btn = document.getElementById("readyVote2Btn");
               if (vote2Btn) {
@@ -648,6 +696,7 @@ <h3>Congratulations, you have completed this assignment!</h3>
               studentVoteCount = 2;
               studentSubmittedVote2 = true;
               window._vote2Enabled = false;
+              updateStepBanner(4);
             }
             if (studentSubmittedVote2) {
               try {