Add average reward hint

index.html

@@ -11,9 +11,11 @@
             margin: 50px auto;
             background-color: #f0f0f0;
         }
+        
         h1, h2 {
             text-align: center;
         }
+        
         .wrapper {
             margin: 0 auto;
             width: 320px;
@@ -23,6 +25,7 @@
             grid-gap: 10px;
             grid-auto-rows: minmax(100px, auto);
         }
+        
         .gridcell, .gridcell-highlighted {
             background-color: #fafafa;
             border: 1px solid #ddd;
@@ -44,6 +47,11 @@
             border: 2px solid #d4380d;
             border-radius: 50%;
         }
+        
+        #avg-reward {
+            text-align: center;
+            font-size: large;
+        }
     </style>
     <script type="module">
         import { shuffle, randint } from "./random.js";
@@ -54,6 +62,9 @@
         let combanditState = combandit.getInitialState();
 
         const handler = {
+            nTrials: 0,
+            avgReward: 0,
+
             getCell(idx) {
                 return document.querySelector(`#gridcell-${idx}`);
             },
@@ -95,9 +106,13 @@
                     let reward;
                     this.completed = true;
                     ({ reward, nextState: combanditState } = combandit.step(combanditState, this.action));
-                    
+                    this.avgReward = (this.avgReward * this.nTrials + reward) / (this.nTrials + 1);
+                    this.nTrials++;
+
                     const rewardText = reward.toFixed(0).replace('-', '&minus;');
+                    const avgRewardText = this.avgReward.toFixed(2).replace('-', '&minus;');
                     document.querySelector('#prompt').innerHTML = `You got ${rewardText} points!`;
+                    document.querySelector('#avg-reward').innerHTML = `Avg reward: ${avgRewardText}, Trials: ${this.nTrials}`;
                     setTimeout(() => this.init(), 2000);
                 }
             },
@@ -129,5 +144,7 @@
         <div class="gridcell" id="gridcell-2"><div class="indicator"></div></div>
         <div class="gridcell" id="gridcell-3"><div class="indicator"></div></div>
     </div>
+
+    <p id="avg-reward">Avg reward: 0</p>
 </body>
 </html>