Checkbox Olympics

Certain cookie opt-out dialogs are a good training ground as well.

I remember playing a version of this on the (386?) PC. Bashing the various keys did not go down well with my dad.

https://www.freegameempire.com/games/Summer-Games

My tool-assisted speedrun (0.001s):

  let setGo = document.querySelector(".setGo");
  let observer = new MutationObserver(mutations => {
      if (setGo.classList.contains("going")) {
          for (const { target } of mutations) {
              if (target.checked == target.disabled) {
                  target.click();
              }
          }
      }
  });
  observer.observe(setGo, {attributes: true});
  document.querySelectorAll(".theSport input").forEach(checkbox => {
      observer.observe(checkbox, {attributes: true});
  });

Explanation: instead of messing about with timers, it asks to be informed when any attribute changes (could use attributeFilter to only hear about "class" for setGo and "disabled" for checkboxes, but I didn’t bother). This is faster than can be acheived with setTimeout, setInterval or requestAnimationFrame, as timers are deliberately speed-capped. (Whereas mutation observers create microtasks, so we can go through this whole thing in one frame.)

When the observer gets notified (in a microtask), it checks if we’re going (in order to avoid false starts), and then goes through the checkboxes it’s been told just changed, and checks if they’re enabled and unchecked, and clicks them. In practice, the first mutation will come in with mutation records for setGo and the first checkbox, which we’ll click, which will trigger an event (a task) from the page code which enables the second checkbox, which will trigger an immediate mutation notification (a microtask), &c. until it’s all done, without ever rendering a frame in the meantime.

I went with a manual-mix approach:

  var boxes = document.querySelectorAll("#root > div > div.sportsWrapper > div.theSport > div:nth-child(2) > input[type=checkbox]")

Then "start", wait for go signal while getting the code below ready on console. on go run the code:

  boxes.forEach(b => b.click())

Got: Time: 0.268

Dunno quite what your idea was with canceled: your comment doesn’t match behaviour at all. As for dispatching a click event, you can just use .click().

Your speedrun code can be reduced to this:

  setInterval(() => document.querySelector('input[type=checkbox]:not(:checked)').click(), 100)

It would be significantly improved by the addition of :enabled and then reduction of interval time.

Brute approach (This doesn't account for whether a checkbox is checked or not so I don't actually know if the game prevents everything getting checked programmatically all at once. I had to set the setTimeout to "2" instead of "1" so it would actually record some time!):

  document.querySelector('.readyButton').click();
  waitForStart();

  function waitForStart() {
    if (document.querySelector('.setGo').classList.value.includes("going")) { 
      for(x=0; x<document.querySelectorAll('input[type="checkbox"]').length; x++) { document.querySelectorAll('input[type="checkbox"]')[x].click(); }
    }
    else { setTimeout(waitForStart, 2); }
  }

If you're going to cheat why not all the way:

    document.querySelector(".time").innerHTML = '<b>Time:</b> 0.0001';
    Array.from(document.querySelectorAll(".theSport input[type='checkbox']"))
      .forEach(e => { e.disabled = false; e.checked = true; });

Wow in Chrome 102.0.5005.115 (Official Build) (arm64) it gives me 3.273s which proves that point even more

I got 0.087 with firefox but subsequent tries are all in the 0.3-0.8 range.

0.012 in Edge

I wonder how much of the time is spent in the onclick handler. Each of those clicks has to wait for the onclick handler before the next one executes, IIUC?

setTimeout doesn't guarantee that it will execute exactly after 3000.

  (() => {
    const targ = $(".setGo");
    const targ2 = $(".theSport > div:nth-child(2)");
    const observer = new MutationObserver((mutations, observer) => {
      if (mutations[0]?.target?.classList.contains('going')) {
        targ2.childNodes.forEach(c => c.click());
      }
    });
  
    observer.observe(targ, {
      subtree: false,
      attributes: true
    });
  
    $('.readyButton').click()
  })();
  

This gives me consistent Time: 0.001 in FF. "Time: not yet set" in Edge/Chrome.

considering how people are already gaming/cheating on this, it's useless stats. Sure, you can write code to check for bots and the bots will write code to beat it...and so on

My TAS can be slightly adjusted to work with this one:

  let observer = new MutationObserver(mutations => {
      for (const { target } of mutations) {
          if (target.checked == target.disabled) {
              target.click();
          }
      }
  });
  document.querySelectorAll("[type=checkbox]").forEach(checkbox => {
      observer.observe(checkbox, {attributes: true});
  });

Then click on the first checkbox and it’ll do all of the rest. Time varies a bit, best I’ve done in a couple of dozen attempts is 00:00:03.

Have you cleaned the ball and the bearings recently? I need to clean a Logitech M570 about every 2-3 weeks.

Click "ready" then wait for the "Go" to go green. Then you can start racing, and here at least, I was able to click through the Set light

I got: 100 Meter Sprint 18.509

110 Meter Hurdles 18.85

Total Time: 37.359

with a mouse on desktop chrome.

Perhaps finding timed checkbox challenges more fun than the other thing? Here are some more ideas for a break:

- https://news.ycombinator.com/item?id=30517626

- https://news.ycombinator.com/item?id=31191152

- https://news.ycombinator.com/item?id=24320277

Good job! I can't get below 10 on my iPad.

it would be such a dream if the hit area for native checkboxes would be larger