I am currently working with the following code:
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
<!-- Hide from old browsers
function pickimg(){
var imagenumber = 5 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array
images[1] = "1.png"
images[2] = "2.png"
images[3] = "3.png"
images[4] = "4.png"
images[5] = "5.png"
var image = images[rand1]
document.randimg.src = image
}
// -- End Hiding Here -->
</script>
</head>
<body onLoad="pickimg()">
<a href="" onClick="pickimg();return false;"><IMG SRC="YOUR IMAGE" name="randimg" border=0></a>
</body>
</html>
This piece of code allows me to display a random image and change it when clicked. These images represent math questions, and I also want to include answer images (answer1.png, answer2.png ... answer5.png).
My goal is the following:
When entering the webpage, a random question image should be displayed.
Upon clicking on the question image, the corresponding answer image should appear. For example, if the random question image is 1.png, then the answer1.png should be shown.
If the user clicks on the answer1.png image, another random question image followed by its answer should be displayed. This sequence should continue without repeating questions until all are displayed, and then a new random sequence of 5 images and answers should begin.
Thank you for your assistance!
Alternatively, I could use different webpages with links instead of images, but the process of ensuring no repetition would be more complicated. What do you suggest?