In a recent 99-minute workshop with @utchbe he introduced us to the Impossible Checkbox.
Can you defeat the bear and keep the checkbox checked? If so, tell us how you did it.
7 Likes
What was the context Richard?
I’m mostly assuming it’s a unrealistic user interface defect challenge? The checkbox shown is really only slightly more broken than most checkboxes we see on the web these days.
- It has no legend attached to it that you can click on instead of on the box when the box is too small for me to locate
- It’s not keyboard input accessible
What do we mean by defeat? That implies a prize.
1 Like
Sorry, I should have been clearer.
Can you defeat the bear and keep the checkbox checked?
1 Like
It stays checked
… for a while.
So most automated test cases I’ve seen would pass. But still want to know what the prize is.
I have no prize for you. It’s a challenge.
Can you use DevTools to hack the site to stop the bear.
That’s the challenge, no prize, sorry 
1 Like
Solution found:
Comment out code line as per below
In case the line numbers are difficult to read, this is line 148 in the codepen react file. That seems to be all that’s required
3 Likes
Nice! Taking advantage of the testability here @gerardmccann
You have access to the code, so you’ve altered it to suit your needs.
Can you do it without altering the source code?
Using just devtools, I can mess with the bear … a revenge-oriented approach you might say . Now he can’t switch it off 
. The first playthrough in the GIF is the standard way it works, I then comment out the code below to get it into ‘revenge mode’. Apart from this, I can’t do anything ‘honestly’, i.e. if there is a way to get it to stick on without hacking code, I’m out of ideas 
2 Likes
Arghhh, what a naughty bear!!! 
So in DevTools I did notice when the ‘checkbox’ is clicked the checked attribute is never set. You could just ignore the animation, inspect the element and then within the elements pane manually add a ‘checked’ attribute by altering the page. Alternatively you could also use the console and input the following to set the checked attribute for the ‘checkbox’:
document.querySelectorAll('input[type=checkbox]')[0].setAttribute('checked', 'true');
I guess the point is to make it appear to stay styled as if it were checked/toggled on. The only way I could sort of get this working without altering the code before running the example was again to go in the console and apply the following to alter the styling:
document.getElementsByClassName('checkbox__bg')[0].setAttribute('style', 'background-color: rgb(46, 236, 113);');
document.getElementsByClassName('checkbox__indicator')[0].setAttribute('style', 'transform: translate(100%, 0px);');
3 Likes
Probably not what you are looking for but… You can enable to checkbox by clicking on it. After it’s on, you open a new tab/click on a different browser tab and the checkbox will still be enabled, until you go back to the previous tab 
4 Likes
My JS is still pathetic, but I also discovered the animation event delay lets you do tricks like this, thanks for persevering where I failed.
Thanks for the motivation to really dive into JS.
3 Likes
Hi Richard - I can’t defeat it… I have tried and tried - and now I am ready for a hint or a solution
5 Likes
I thought ‘Force element state’ might do it or ‘Hide element’ but nope! Any clues?
1 Like
Lol cheeky bear. Will see if I can defeat it tomorrow.
3 Likes