For our first implementation, as mentioned previously, we will first create an array of five color names. Then, we will generate a random number between zero and four and pick the color on that index from the array. This color name will be saved in session for validation later on. Then, we will create five colored boxes in HTML and set their background color using the color names defined in the array earlier. We will then create a separate div where the user will drag and drop a colored box. Finally, we will make the dragging and dropping functional.
As far as rules go, we will apply two restrictions: the droppable box could have only one colored box inside it at a time and second, users should also be able to remove an earlier dropped colored box from the droppable container and drop another box.