-1

I am new to Javascript so I apologize if I am using the wrong terms. I have a code where I need to show some HTML images, stored as variables containing multiple items in specific positions (defined by the class) such as:

 var fruit = ["<img class='item1' src='" + Banana + "'>" + 
        "<img class='item2' src='" + Apple + "'>" + 
        "<img class='item3' src='" + Grapes + "'>" + 
        "<img class='item4' src='" + Banana + "'>" +
        "<img class='item5' src='" + Grapes + "'>" + 
        "<img class='item6' src='" + Pear + "'>"],

Later, I need to use all of these items in a bigger picture called stimulus, e.g.:

stimulus: "<div class='container'> <img class='background' src='" + Background + "'>" + fruit + "</div>",

But then I need to only show 3 random fruits among the 6 listed in fruit. For instance, I would need to get something like:

stimulus: "<div class='container'> <img class='background' src='" + Background + "'>" + half_fruit + "</div>",

Where: var half_fruit = ["<img class='item1' src='" + Banana + "'>" + "<img class='item3' src='" + Grapes + "'>" + "<img class='item6' src='" + Pear + "'>"],

Is there any way I can do this, even if my images are not technically items of an array? I have specific fruit combinations (not just the one in the example, roughly 30 in total) and I need to remove 3 items of the ones in that specific combination while also leaving the others in the same position as they were before. This is why I am not storing images as strings in an array. Those variables are defined as var Banana = gorilla.stimuliURL('Banana.png'); etc. (Gorilla is a platform for creating experiments; the stimuliURL function calls image addresses from an online repository). Thank you for your time!

gimi
  • 395
  • 3
  • 13
  • Why are you declaring an array, if you only put a large string inside? I looks like you should reconside your data structure. How are `Banana`, `Apple`, .. defined? – Lain Aug 11 '20 at 09:33
  • If put have three "empty" `img` elements in your HTML, you can use JavaScript to populate them by setting their `src` properties randomly. The only array you would probably want would be made up of some valid values for these `src` properties, like `[banana, apple, grapes, pear]` (where `banana` has some value like `my-image-folder/banana.png`). – Cat Aug 11 '20 at 09:40
  • @Lain those variables are defined as `var Banana = gorilla.stimuliURL('Banana.png');` etc. (Gorilla is a platform for creating experiments; the stimuliURL function calls image addresses from an online repository) – gimi Aug 11 '20 at 09:53
  • @Cat but I have specific `fruit` combinations (not just the one in the example, roughly 30 in total) and I need to remove 3 items of the ones in that specific combination while also leaving the others in the same position as they were before – gimi Aug 11 '20 at 09:55
  • BTW, for building HTML strings in JavaScript, I'd look into the ".insertAdjacentHTML" method (https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) -- Or even the more versatile and less error-prone technique of using the `document.createElement` method with the `.appendChild` method (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement & https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild), in which case you'd probably use `.setAttribute` and `.classList.add` to complete your elements. – Cat Aug 11 '20 at 10:02
  • @gaiamoli Maybe you could add further detail to the question to clarify what all is needed? – Cat Aug 11 '20 at 10:11
  • @Cat Thank you for the suggestion, I hope it's clearer now! Let me know if there's anything else I should specify – gimi Aug 11 '20 at 15:03
  • Does this answer your question? [Parallel randomization/shuffle two arrays in Javascript](https://stackoverflow.com/questions/63519532/parallel-randomization-shuffle-two-arrays-in-javascript) – Liam Aug 21 '20 at 08:52

1 Answers1

0

Thanks to your comments, I rearranged the variables as follows. First, I created variables for each image to access their addresses from Gorilla, e.g.

var banana_img = gorilla.stimuliURL('banana.png');

Then, I created variables for each fruit in each position:

var banana = ["<img class='item1' src='" + banana_img + "'>", "<img class='item2' src='" + banana_img+ "'>", "<img class='item3' src='" + banana_img+ "'>", "<img class='item4' src='" + banana_img + "'>", "<img class='item5' src='" + banana_img + "'>", "<img class='item6' src='" + banana_img + "'>"];

Then, I saved each fruit combination as a variable, e.g.

var fruit = [banana[0], apple[1], grapes[2], banana[3], grapes[4], pear[5]]

FInally, I sorted it and selected the first 3 to get only three random items:

half_fruit = fruit.sort( function() { return 0.5 - Math.random() } ).slice(0, 3).join(" ");

Answer or comment below if you find a better way to do this!

gimi
  • 395
  • 3
  • 13