Select Random Item (shown in pairs) from Array & Remove It, Restart Once Array is Empty

Question

I'm super newbie in coding and I need help to achieve this code. I'm trying to get a random item (in pairs) from an array and then remove it from this array until user gets to the last item or 60 days have gone from using the service (cookie?)... I have build a script with the help of other questions here in stackoverflow and here is my results so far.

`<script>
var randomizer = document.getElementById("getImgBut");
var dog1 = '/app/wp-content/mediaApp/yo-creo-mi-realidad/01F.jpg';
var dog2 = '/app/wp-content/mediaApp/yo-creo-mi-realidad/01B.jpg';
var dogpics=[dog1,dog2];

var yourPics = [
  dogpics,
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/02F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/02B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/03F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/03B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/04F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/04B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/05F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/05B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/06F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/06B.jpg'   ] //This array has 52 cards but I cutted it for example purposes
];

function get_random_number(array){
    return Math.floor(Math.random() * array.length |0);
}  // here is where I have tried to modify with other scripts like the one in this page https://stackoverflow.com/questions/38882487/select-random-item-from-array-remove-it-restart-once-array-is-empty with no success

randomizer.addEventListener("click", function() {
var rand_number = get_random_number(yourPics);
console.log(rand_number);
document.getElementById('img1').src = yourPics[rand_number][0];
document.getElementById('img2').src = yourPics[rand_number][1];
});

var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});
</script>`

Thank you for your help!

Super Newbies welcome! We all were at one point. So clicking your button (with id `getImgBut`) is supposed to seed your two image elements `img1` and `img2` is that correct? What is happening - at the time of this posting there is no error msg. — Michael Nelles, Mar 23 '20 at 00:57
Thanks Nelles, I want to improve the random code so that when a pair of images (02B and 02F are show) they get discarded in a new array "secondArray" so that when this array "firstArray" is empty the secondArray starts again.. the code works but I want to improve it — Pablo J. Chalita, Mar 23 '20 at 02:09
The "real" post is here https://blstherapy.com/app/title/prueba-audiosw-pch/ Password: test — Pablo J. Chalita, Mar 23 '20 at 02:22

score 0 · Accepted Answer · answered Mar 22 '20 at 22:55

I don't fully understand what you mean by "remove in pairs", but I'll answer presuming you mean you wish to remove the image ending in 02F.jpg at the same time as removing the image ending in 02B.jpg, and then 03F.jpg at the same time as 03B.jpg.

The solution to this that I will propose is that we will structure your data a bit differently to begin with. That is, if those images, the "B image" and "F image" are linked, we could keep them in the same `javascript object. This would look like:

var yourPics = [
  {
    bImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/02F.jpg', 
    fImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/02B.jpg'
  },
  {
    bImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/03F.jpg', 
    fImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/03B.jpg'
  }...]

This would then be an array of objects, rather than strings. We can access the bImage property of an object with just

myObject = yourPics[0]
myObject.bImage

We could delete one of those objects those at random via splice.

myRandomlyRemovedObject = yourPics.splice(myIndexToDeleteFrom, 1) would remove 1 object from yourPics at position of myIndexToDeleteFrom, which you presumably would choose randomly. myRandomlyRemovedObject would be assigned to the one object we removed.

I think this object based approach is safer since you will know for a fact that you will removed both matching strings at the same time.

I think I understand your suggestion and from my logic seems perfect but I don't know how to implement it... I'm not asking for you to do the work for me, don't get me wrong but at the stage I am I lack the logic to construct it. — Pablo J. Chalita, Mar 23 '20 at 02:14
The "real" post is here https://blstherapy.com/app/title/prueba-audiosw-pch/ Password: test — Pablo J. Chalita, Mar 23 '20 at 02:22

Select Random Item (shown in pairs) from Array & Remove It, Restart Once Array is Empty

1 Answers1