example studies: binary search in JS for indifference estimation

congame-example-study/calibration.rkt

@@ -0,0 +1,40 @@
+#lang racket/base
+
+(require congame/components/study
+         congame/components/formular
+         (submod congame/components/formular tools)
+         koyo/haml)
+
+(provide
+ calibration)
+
+(define (calibration-form)
+  (page
+   (haml
+    (.container
+     (:h1 "Calibration")
+
+     (formular
+      (haml
+       (:div
+        (:div
+         (#:wtw
+          (input-number #:attributes `([data-calibration "calibration" ]
+                                       [data-calibrationPrefix "£"]) #:min 0 #:max 4 "WTW" #:step 0.1)))
+        (:div#confirm-choice
+         (:span#confirmation-message "")
+         (:a#reset-button.button ([:href ""])"Reset")
+        (:button.button.next-button ([:type "submit"]) "Yes, proceed to next step")))))))))
+
+(define (end)
+  (page
+   (haml
+    (.container
+     (:h1 "The End")))))
+
+(define calibration
+  (make-study
+   "calibration"
+   (list
+    (make-step 'calibration calibration-form)
+    (make-step 'end end))))

congame-example-study/info.rkt

@@ -15,7 +15,8 @@
     "web-server-lib"))
 (define build-deps '())
 (define congame-studies
-  '((congame-example-study/conscript conscript-example)
+  '((congame-example-study/calibration calibration)
+    (congame-example-study/conscript conscript-example)
     (congame-example-study/conscript-bot conscript-bot-example)
     (congame-example-study/conscript-defvar conscript-defvar-example)
     (congame-example-study/conscript-for-study conscript-for-study-example)

resources/js/app.js

@@ -117,6 +117,93 @@
     }
   });
 
+  up.compiler("[data-calibration]", function(el) {
+    let prefix = el.dataset.calibrationPrefix || "£";
+    let min = el.min && el.min * 100;
+    let max = el.max && el.max * 100;
+    let step = Number(el.step) * 100;
+    let value = 200;
+    let counter = 0;
+    let group = el.closest(".group"); // FIXME: Needs to change for Lioness
+    let formatter = Intl.NumberFormat(undefined, {
+      minimumFractionDigits: 2
+    });
+    let confirmChoice = document.getElementById("confirm-choice");
+    confirmChoice.hidden = true;
+    let confirmationMessage = document.getElementById("confirmation-message");
+    let resetBtn = document.getElementById("reset-button");
+    resetBtn.addEventListener("click", e => {
+      reset();
+      return false;
+    });
+
+    let optionALabel = `Option A: decode 7 sequences for ${prefix}${formatter.format(value / 100)}`
+    let optionABtn = makeButton(optionALabel, () => {
+      if ( counter < 5 ) {
+      max = value;
+        value = (value + min)/2;
+        value = Math.round(value / 10) * 10
+        counter += 1;
+      }
+    });
+
+    let optionBLabel = `Option B: decode 0 sequences for ${prefix}0.00`
+    let optionBBtn = makeButton(optionBLabel, () => {
+      if ( counter < 5 ) {
+        min = value;
+        value = (value + max)/2;
+        value = Math.round(value / 10) * 10
+        counter += 1;
+      }
+    });
+
+    let container = document.createElement("div");
+    container.classList.add("calibration");
+    let label = document.createElement("span");
+    el.closest("label").style.display = "none";
+    container.appendChild(optionABtn);
+    container.appendChild(label);
+    container.appendChild(optionBBtn);
+    group.appendChild(container);
+    update();
+    return () => {
+      optionABtn.parent.removeChild(optionABtn);
+      optionBBtn.parent.removeChild(optionBBtn);
+    };
+
+    function update() {
+      el.value = `${value / 100}`;
+      label.innerText = `${prefix}${formatter.format(el.value)}`;
+      optionABtn.innerText = `Option A: decode 7 sequences for ${prefix}${formatter.format(value / 100)}`;
+      if ( counter >= 5 ) {
+        confirmationMessage.innerText = `Based on your choices, you are willing to decode 7 sequences for ${prefix}${formatter.format(value / 100)} or more, but not for less. If you confirm the choice, check the checkbox; otherwise click the "Reset" button and make your decisions again.`;
+        confirmChoice.hidden = false;
+      }
+    }
+
+    function reset() {
+      console.log("Resetting...")
+      counter = 0;
+      value = 200;
+      min = 0;
+      max = 400;
+      confirmChoice.hidden = true;
+      return false;
+    }
+
+    function makeButton(label, cb) {
+      let elt = document.createElement("button");
+      elt.type = "button";
+      elt.innerText = label;
+      elt.addEventListener("click", e => {
+        cb(e);
+        update();
+        return false;
+      });
+      return elt;
+    }
+  });
+
   up.compiler("[data-track-timings]", function(el) {
     const params = new URL(window.location.href).searchParams;
     const totalStart = time() - params.get("__tt") * 1;