VCHS Computer Science: Toilet Paper Problem

https://www.jstor.org/stable/2322567

A: B: P: 0.5

Trial: 0

Sheets Remaining: 0

Avg Sheets Remaining: undefined

Min Sheets Remaining: undefined

Max Sheets Remaining: undefined

Standard Deviation: undefined

Source Code

<a href="https://www.jstor.org/stable/2322567">
https://www.jstor.org/stable/2322567</a>

<p>
  <button id="go" style="display: inline-block;">Go</button>
  <button id="stop" style="display: none;">Stop</button>
  <select id="gender">
    <option value="all-genders" selected="">Unisex</option>
    <option value="girls">Girls</option>
    <option value="boys">Boys</option>
  </select>
  A: <input id="init-cnt-a" type="number" min="1" max="200" step="1" value="100">
  B: <input id="init-cnt-b" type="number" min="1" max="200" step="1" value="100">
  P: <span id="p-display">0.5</span>
  <input id="p-slider" type="range" min="0" max="1" step="0.01" value="0.5" style="display: inline-block;">
  <button id="reset" style="display: inline-block;">Reset</button>
</p>

<div style="float:right;margin-right:2em;margin-top:1em">
  <div>
    Trial: <span id="count">0</span>
  </div>
  <div>
    Sheets Remaining: <span id="rem">0</span>
  </div>
  <div>
    Avg Sheets Remaining: <span id="avg">undefined</span>
  </div>
  <div>
    Min Sheets Remaining: <span id="min">undefined</span>
  </div>
  <div>
    Max Sheets Remaining: <span id="max">undefined</span>
  </div>
  <div>
    Standard Deviation: <span id="std-dev">undefined</span>
  </div>
</div>

(function IIFE() { // Immediately-Invoked Function Expression

"use strict"; // Opt into strict mode.

/* CONSTANTS */

const msBetweenSheets = 10;
const msBetweenRolls = 500;

const bathroomElement = document.getElementById("bathroom");
const goElement = document.getElementById("go");
const stopElement = document.getElementById("stop");
const resetElement = document.getElementById("reset");
const rollAElement = document.getElementById("roll-a");
const rollBElement = document.getElementById("roll-b");
const remElement = document.getElementById("rem");
const avgElement = document.getElementById("avg");
const minElement = document.getElementById("min");
const maxElement = document.getElementById("max");
const sdElement = document.getElementById("std-dev");
const countElement = document.getElementById("count");
const initCntAElement = document.getElementById("init-cnt-a");
const initCntBElement = document.getElementById("init-cnt-b");
const pSliderElement = document.getElementById("p-slider");
const pDisplayElement = document.getElementById("p-display");
const genderElement = document.getElementById("gender");

/* NON-CONSTANT VARIABLES */

let rollACnt = 0;
let rollBCnt = 0;
let pBigChooser = 1;
let count = 0;
let min = Infinity;
let max = -Infinity;
let avg = 0;
let sos = 0; // sum of squares of deviations from the mean
let timer;
let placeMark;

/* INITIALIZATION */

goElement.addEventListener("click", go);
stopElement.addEventListener("click", stop);
resetElement.addEventListener("click", reset);
pSliderElement.addEventListener("change", function() {
  pDisplayElement.innerHTML = pSliderElement.value;
});
genderElement.addEventListener("change", function() {
  bathroomElement.setAttribute("data-gender", genderElement.value);
});
reset();

/* FUNCTIONS */

function consumeOneSheet() {

if (Math.random() < pBigChooser) {
    // User is a Big Chooser.
    if (rollACnt > rollBCnt) {
      --rollACnt;
    }
    else if (rollBCnt > rollACnt) {
      --rollBCnt;
    }
    else {
      takeFromEitherRoll();
    }
  }
  else {
    // User is a Little Chooser.
    if (rollACnt < rollBCnt) {
      --rollACnt;
    }
    else if (rollBCnt < rollACnt) {
      --rollBCnt;
    }
    else {
      takeFromEitherRoll();
    } 
  }

function takeFromEitherRoll() {
    if (Math.random() < 0.5)
      --rollACnt;
    else
      --rollBCnt;
  }

}

function whenOneRollIsEmptyDo() {

let remainder = rollACnt + rollBCnt;

// Update min and max as necessary.
  if (remainder < min) min = remainder;
  if (remainder > max) max = remainder;

// Update avg and variance using Welford's algorithm.
  // See: https://en.wikipedia.org/wiki/
  //      Algorithms_for_calculating_variance
  //      #Welford's_online_algorithm
  const delta = remainder - avg;
  avg += delta / count;
  const delta2 = remainder - avg;
  sos += delta * delta2;
  const variance = sos / count;
  const stdDev = Math.sqrt(variance);

// Display stats.
  sdElement.innerHTML = stdDev;
  avgElement.innerHTML = avg;
  minElement.innerHTML = min;
  maxElement.innerHTML = max;
}

function updatePicture() {
  rollAElement.style.padding = rollACnt + "px";
  rollBElement.style.padding = rollBCnt + "px";
  remElement.innerHTML = rollACnt + rollBCnt;
  countElement.innerHTML = count;
}

function beginAnimation() {

rollACnt = initCntAElement.value;
  rollBCnt = initCntBElement.value;
  pBigChooser = pSliderElement.value;
  ++count;
  placeMark = loop;
  loop();
  
  function loop() {
    if (rollACnt > 0 && rollBCnt > 0) {
      timer = setTimeout(function() {
        consumeOneSheet();
        updatePicture();
        loop();
      }, msBetweenSheets);
    }
    else {
      whenOneRollIsEmptyDo();
      timer = setTimeout(beginAnimation, msBetweenRolls);
    }
  };
}

function go() {
  // resetElement.style.display = "none";
  // initCntAElement.setAttribute("disabled", "true");
  // initCntBElement.setAttribute("disabled", "true");
  // pSliderElement.style.display = "none";
  goElement.style.display = "none";
  stopElement.style.display = "inline-block";
  if (placeMark === undefined)
    beginAnimation();
  else
    placeMark();
}

function stop() {
  resetElement.style.display = "inline-block";
  initCntAElement.removeAttribute("disabled");
  initCntBElement.removeAttribute("disabled");
  pSliderElement.style.display = "inline-block";
  stopElement.style.display = "none";
  goElement.style.display = "inline-block";
  clearTimeout(timer);
}

function reset() {
  stop();
  rollACnt = rollBCnt = 0;
  avg = 0;
  min = Infinity;
  max = -Infinity;
  sos = 0;
  count = 0;
  placeMark = undefined;
  updatePicture();
  avgElement.innerHTML = "undefined";
  minElement.innerHTML = "undefined";
  maxElement.innerHTML = "undefined";
  sdElement.innerHTML = "undefined";
}

})(); // End of IIFE
</script>

Pages

Toilet Paper Problem

Source Code