So I’ve been working on a personal coding project recently.
I like to study and learn new things and one of those things is studying languages. A tool that is a tremendous help to me is using flash cards and Anki is a simple flash card app that helps me do that.
Even though it’s a great tool, I did find a flaw that I do not like about Anki. It’s the simple fact that it is not portable or mobile friendly. Sometimes if I am out on the road or traveling and find myself with some extra time. I want to take advantage of that time and study, and I don’t always have my computer.
Why not use my phone to have a quick 5 min study session? It’s perfect for any situation.
Now I did hear that they had a mobile app that you have to pay for but I also heard there are some issues with it (and to be honest I haven’t dived in too deep to see what they are).
Usually when I discover problems that bother me personally my first reaction is “I need to create my own”. Thankfully I know a little bit of code to help me accomplish this. It’s a simple quiz app I can build out using javascript.
I’m not a master in javascript but I do know my way around and I think one skill I have developed better than any other is the art of research and development.
I love to see what’s been created before and ways I can implement it into my own designs.
If I don’t know how to do it I know I can find someone who has, or at least the pieces I need.
So I started on this endeavor and I got pretty far, yet this post was created in light of a recent issue I came across. This issue doesn’t sound difficult but in Javascript I’ve learned that there are some things that are not built into the program.
Therefore you really have to pull out your developers hat and find a solution for it.
The Problem
The problem was simple, I wanted to shuffle my flashcards.
Let me explain.
I wanted to create a random shuffled list every time I clicked a button or when I finished reviewing a deck.
In coding terms I basically wanted to shuffle the items in my array randomly.
If you know javascript there is no function that shuffles the items in an array. There is a sort function as well as a random function but the created function simply isn’t the best solution for a truly authentic and original item random generator.
It works if you want to shuffle the function once but I found it wasn’t good for consistently shuffling the items randomly.
So I did what I do best and went on the hunt. I then came across the algorithm called the Fisher-Yates algorithm.
Fun fact an algorithm is simply a step by step process for problem solving
I’m not gonna lie, at first glance and reading this solution it seemed complicated but I wanted to figure out how this worked for my project so took my time to really understand how this function worked.
In reality it’s really quite simple when you get the concept. I know the vocabulary in coding is what can trip me up so I broke down every element while I was learning and hopefully what I share can help you if ever need to create a powerful shuffle function.
The Solution
So how does this algorithm work?
I will do my best to explain how I understood it with examples and visuals.
But what really helped me to understand this was the video below…
This is how it works:
The function loops from back to front bypassing (or ignoring) the initial index value, which is 0 or the array (list).
So if an array has 8 items in it the function will only run/loop 7 times.
Then you need to create a random number from 1 – 7 (the length of the array)
Once the random number is generated, the first item that will be affected is the last item in the array and it will be swapped with the generated random value item
So the two items have essentially switched places
Once that first round of the loop is completed the array length is decreased by 1 so we don’t include the previous item we just swapped
This process will repeat and continue all the way until we reach 1 and we will have a completely shuffled array randomly which we can now use.
So the final code will look like this…
Note: I gave two examples, one without comments so you can see what the code looks naturally, and one with comments so you know what is happening at each step
Without comments
With comments
If you’d like to play and see a working example of the code you can visit my codepen here.
I implemented this simple function into my project and now my app works flawlessly and can generate a shuffled list every time I finish a set.
If you interested in the project I will post a working sample soon as I’m still working out a few tweaks.
I hope this function helps anyone looking to add a random shuffle function in their own code.
That’s it for now.
Thanks,
Courey