Javascript random image and answer

Question

I have this 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 give me a random image and it changes when i click on it. This images are 5 math questions, i want to add 5 answers images: answer1.png, answer2.png ... answer5.png

I want my script to do this:

When i enter webpage to give me a random image (question)
when i click on it to give me the answer image. Ex. If random image is 1.png to give me answer1.png
when i click answer1.png to give me another random question then the answer to that question and so on ... I don't want to get repeated questions until are all displayed then go another random sequence of 5 images and answers.

Thank you!

Or i can use different webpages with links instead of images, but is harder to meke no repeat. What do you think?

2

And what is the question? – oiledCode Jan 21 '15 at 07:51

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

One possibility is to shuffle your array (see How to randomize (shuffle) a JavaScript array? for how to do it), then you can simply iterate on the shuffled array.

edited May 23 '17 at 11:50

Community

1
1

answered Jan 21 '15 at 07:53

yunandtidus

3,847
3
29
42

score 0 · Answer 2 · answered Jan 22 '15 at 07:23

Somebody helped me with this code. Works great.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
 <base href="http://www.vicsjavascripts.org/StdImages/" />
</head>

<body>
<img id="question" src="1.gif" style="visibility:hidden;" onclick="Question('question','answer',QAArray,false);"/> 
<br/>
<img id="answer" src="Egypt5.jpg"  style="visibility:hidden;"onclick="Question('question','answer',QAArray,true);" />

<script type="text/javascript">
/*<![CDATA[*/

var QAArray=[
 ['1.gif','Egypt5.jpg'],
 ['2.gif','Egypt6.jpg'],
 ['3.gif','Egypt7.jpg'],
 ['4.gif','Egypt8.jpg']

]

function Question(q,a,ary,qa){
 var qo=document.getElementById(q),ao=document.getElementById(a),o=Question[a];
 if (!o||!o.a[0]){
  Question[a]=o={
   a:ary.concat().sort(function(){return 0.5 - Math.random();})
  }
 }
 if (o&&o.a[0]){
  if (qo.style.visibility=='hidden'){
   qo.style.visibility='visible';
   qo.src=o.a[0][0];
   ao.src=o.a[0][1];
  }
  if (qa===false&&ao.style.visibility=='hidden'){
   ao.style.visibility='visible';
  }
  else if (qa===true){
   qo.style.visibility=ao.style.visibility='hidden';
   o.a.splice(0,1);
   Question(q,a,ary);
  }
 }
}

Question('question','answer',QAArray);

/*]]>*/
</script>
</body>

</html>

score 0 · Answer 3 · answered Mar 02 '21 at 06:29

0

you can use sort() to shuffle an array like this.

let yourArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
yourArray.sort(() => Math.random() - 0.5);
console.log(yourArray);

answered Mar 02 '21 at 06:29

Mansour Alnasser

4,446
5
40
51

Javascript random image and answer

3 Answers3