Solving a 2×2 blindfolded is relatively easy and is something every cuber can learn to do. The most challenging part of the process for most people is learning what letters correspond to what pieces on the cube. Luckily, I have created a computer program that makes it extremely easy to practice and memorize the letters and positions of each piece so you can learn how to solve the 2×2 blindfolded faster.
How to Solve the 2×2 Blindfolded
This article is not a tutorial for 2BLD but if you are looking to learn how to solve the 2×2 blindfolded, Jperm has a great tutorial that is short and easy to follow. Essentially, solving the 2×2 blindfolded requires memorizing a string of around 5-8 letters that correspond to the position of each piece and then solving each of those pieces with your eyes closed using only one algorithm. The algorithm used, called the swapping algorithm, goes like this: R U’ R’ U’ R U R’ F’ R U R’ U’ R’ F R. There are also a few special cases you need to know like corner twists. Overall, learning the concept of 2BLD is pretty simple. The only area people sometimes struggle with is memorizing letters. This may be difficult because it’s hard to memorize which tile on the cube corresponds to what letter. That’s why I created the memorization tool.
Introduction to the Tool
Using the 2×2 Blindfolded Memorization Tool is simple. Just open the link, click start, enter the letter of the piece that is bolded, and click the submit button or press the enter key. The lettering scheme in the app is the same as the image above. The website also shows you how many you got correct so far. To reset your score, just reload the page. Feel free to fork the repl and make your own changes!
How it Works
Like most of my other programs, this one is also quite simple. Essentially, the code uses a random index, which decides which box will be selected and bolded. Then it waits for the user’s input. If the input matches the box that’s highlighted, then a new box will be highlighted and the score will be updated, otherwise, it will display an “incorrect” message and let the user try again. The following is a high-level overview of some different aspects of the program.
HTML:
<div id=U>
<div id=u1></div>
<div id=u2></div>
<div id=u4></div>
<div id=u3></div>
</div>
There are six of these groups of pieces, each corresponding to a face on the cube. Dividing them up like this makes it easier to style in CSS later on.
<div id=answer>
<input autocomplete="off" type="text" class=input id=input>
<input type="submit" class=submitButton onClick="checkAnswer()">
<button class=submitButton id=start onclick="start()">Start</button>
</div>
This is the HTML for the input box and select button. It’s just a basic input that runs a function when clicked.
Javascript:
var pieces = ["u1", "u2", "u3", "u4", "l1", "l2", "l3", "l4", "f1", "f2", "f3", "f4", "r1", "r2", "r3", "r4", "b1", "b2", "b3", "b4", "d1", "d2", "d3", "d4"]
var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "z", ]
The first thing I did was define 2 arrays, one that corresponded to each of the pieces, and one that had each of their letters.
function reset() {
for(var i = 0; i<24; i++){
document.getElementById(pieces[i]).style.borderWidth = "1px";
}
document.getElementById('result').innerHTML = "";
}
Whenever this function is called, all the pieces in the display are reset back to their original border size. Make sure to call this after each randomization so you don’t get multiple borders bolded at the same time.
function checkAnswer() {
if(document.getElementById('input').value == letters[random]){
count += 1;
document.getElementById('score').innerHTML = "Score: " + count;
document.getElementById('input').value = "";
check();
}
else {
document.getElementById('result').innerHTML = "Incorrect";
document.getElementById('input').value = "";
}
}
This function gets the input from the text box and checks if it’s equal to the letter pair it’s supposed to be. If it is, the score is updated and a new box is thickened using the DOM borderWidth property. If the answer isn’t correct, then a message is displayed and the user can try again.
function reset() {
for(var i = 0; i<24; i++){
document.getElementById(pieces[i]).style.borderWidth = "1px";
}
document.getElementById('result').innerHTML = "";
}
This function generates a random number and is used to choose a random index from the pieces[] array to thicken. This function is called whenever the user guesses a correct answer.
Keep in mind that this is not the complete code, but just important segments that convey how the code functions behind the scenes. If you’re trying to make this yourself, use these code snippets as ideas to build upon and a foundation for our own spin on things. You can always look at the full code by forking the repl.
CSS:
There is quite a bit of CSS for this project as each piece and face needs to be styled and positioned. There is also CSS for the buttons and input forms.
/* positioning for the piecemap */
#U {
position: relative;
left: 124px;
height: 120px;
width: 120px;
}
#L, #F, #R, #B {
height: 120px;
width: 120px;
display: inline-block;
}
#D {
position: relative;
left: 124px;
height: 120px;
width: 120px;
}
#u1, #u2, #u3, #u4, #l1, #l2, #l3, #l4, #f1, #f2, #f3, #f4, #r1, #r2, #r3, #r4, #b1, #b2, #b3, #b4, #d1, #d2, #d3, #d4 {
border: 1px solid black;
width: 50px;
height: 50px;
margin: 1px;
display: inline-block;
}
/* coloring in the faces */
#U > *{
background-color: white;
}
#L > *{
background-color: orange;
}
#F > *{
background-color: green;
}
#R > *{
background-color: red;
}
#B > *{
background-color: blue;
}
#D > *{
background-color: yellow;
}
/* css for the cube display as a whole */
#cube {
margin: auto;
width: 500px;
position: relative;
left: 55px;
}This is the code for styling the pieces and cube display. It uses the many divs created earlier and styles them according to the standard 2×2 Rubik’s cubes color scheme. One interesting thing I learned while coding this tool is that if you want to style all the elements inside the div, you can do so with the > * symbols. For example, if I wanted to style all the elements inside the “cube” div, then I would do the following:
#cube > *{
/* styling goes here */
}
The rest of the styling is pretty standard so I chose not to include anything else here. Just like javascript, if you would like to view the full source code, you can fork the repl and view it there.
Closing Thoughts
Hopefully, you tried this tool out and found it useful in learning 2BLD. If you have any suggestions or have found a bug of some sort, feel free to comment or email me and I will try my best to address the issue.
Cubing Content 
Leave a comment