Thank you, Joffm! My apologies that I still have a follow-up question, however, I am still struggling to not have the same pictures in question 1 and 2.
I adapted my code based on your guidance - thank you.
However, the pictures are repeating between questions 1 & 2.
Code Question 1:
<script type="text/javascript" charset="utf-8">
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// Function to randomize tone numbers in URLs
function getRandomPic() {
return Math.floor(Math.random() * 3) + 1;
}
var availablePhotos = [
"https://..." + getRandomPic() + ".jpg",
"https://..." + getRandomPic() + ".jpg",
...
"https://..." + getRandomPic() + ".jpg"
];
availablePhotos = shuffle(availablePhotos); // Shuffle the photos
// Inject the shuffled images into the HTML
$('#question443 img:eq(0)').attr('src', availablePhotos[0]);
$('#question443 img:eq(1)').attr('src', availablePhotos[1]);
$('#question443 img:eq(2)').attr('src', availablePhotos[2]);
$('#question443 img:eq(3)').attr('src', availablePhotos[3]);
$('#question443 img:eq(4)').attr('src', availablePhotos[4]);
$('#question443 img:eq(5)').attr('src', availablePhotos[5]);
});
</script>
<table>
<tbody>
<tr>
<td><img alt="Image 1" src="" style="width: 80px;" /></td>
<td><img alt="Image 2" src="" style="width: 80px;" /></td>
<td><img alt="Image 3" src="" style="width: 80px;" /></td>
</tr>
<tr>
<td><img alt="Image 4" src="" style="width: 80px;" /></td>
<td><img alt="Image 5" src="" style="width: 80px;" /></td>
<td><img alt="Image 6" src="" style="width: 80px;" /></td>
</tr>
</tbody>
</table>
Code Question 2:
<script type="text/javascript" charset="utf-8">
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// Function to randomize tone numbers in URLs
function getRandomPic() {
return Math.floor(Math.random() * 3) + 1;
}
var availablePhotos = [
"https://..." + getRandomPic() + ".jpg",
"https://..." + getRandomPic() + ".jpg",
...
"https://..." + getRandomPic() + ".jpg"
];
availablePhotos = shuffle(availablePhotos); // Shuffle the remaining photos
// Inject the shuffled images into the HTML for Question 2
$('#question444 img:eq(0)').attr('src', availablePhotos[6]);
$('#question444 img:eq(1)').attr('src', availablePhotos[7]);
$('#question444 img:eq(2)').attr('src', availablePhotos[8]);
$('#question444 img:eq(3)').attr('src', availablePhotos[9]);
$('#question444 img:eq(4)').attr('src', availablePhotos[10]);
$('#question444 img:eq(5)').attr('src', availablePhotos[11]);
// Show the question with images
$('#question444').show();
});
</script><!-- HTML structure for displaying images in Question 2 -->
<table>
<tbody>
<tr>
<td><img alt="Image 7" src="" style="width: 80px;" /></td>
<td><img alt="Image 8" src="" style="width: 80px;" /></td>
<td><img alt="Image 9" src="" style="width: 80px;" /></td>
</tr>
<tr>
<td><img alt="Image 10" src="" style="width: 80px;" /></td>
<td><img alt="Image 11" src="" style="width: 80px;" /></td>
<td><img alt="Image 12" src="" style="width: 80px;" /></td>
</tr>
</tbody>
</table>
I adapted the way to display photos, thank you!
And again, apologies if I missed something explained in the guide with regard to not having the same pictures shown in question 1 & 2.
Thank you in advance and best!
Topic Author
