[Dilettante_Pro]

Считаем, что второй массив картинок - правильный

Выберите картинку:
<img id="i1" style= "width:100px;height:100px" src=""/>
<img id="i2" style= "width:100px;height:100px" src=""/>
<div id="mess" style="display:none; border: 1px solid red; width:400px">Вы ошиблись. Нажмите, чтобы попробовать еще раз</div>
<script>
 var image1 = ["http://javascript.ru/cat/list/scriptaculous_54.png","http://javascript.ru/cat/list/dom.gif","http://javascript.ru/cat/list/firefox.gif"],
      image2 = ["http://javascript.ru/cat/list/jquery_54.png","http://javascript.ru/cat/list/event.gif","http://javascript.ru/cat/list/opera.gif"],
      i = 0;
  randomImage();

  var test = function() {
     if(this.classList.contains("wrong")) {
        this.src = "http://javascript.ru/cat/list/donkey.gif";
        mess.style.display = "block";
     }
     else {
        if (i < 2 ) {
           i++;
           randomImage();
        }
        else { alert("Вот и все");
            i = 0;
            randomImage();
        }
     }
  }
  i1.onclick = test;
  i2.onclick = test;

  mess.onclick = function() {
      document.querySelector(".wrong").src =  image1[i];
      mess.style.display = "none";
  }
function randomImage() {
   var r = Math.random();
   if (r < 0.5) {
        i1.src =  image1[i];
        i2.src =  image2[i];
        i1.classList.remove("right");
        i2.classList.remove("wrong");
        i1.classList.add( "wrong");
        i2.classList.add("right");
   }
   else {
        i2.src =  image1[i];
        i1.src =  image2[i];
        i2.classList.remove("right");
        i1.classList.remove("wrong");
        i2.classList.add("wrong");
        i1.classList.add("right");
   }
}
</script>