Aqui te dejo un ejemplo que hice para ti pero solo trabajo con javascript asi que puede que te sirva de algo esto que hice para ti, haz pruebas con lo que te deje con diferentes browsers:
Código HTML :
<html id='H' style="overflow:hidden;"><head id="h"><meta charset="utf-8"></head><body id="b" spellcheck="false"><style>.Us{-moz-appearance:none;text-indent:0.01px;text-overflow:'';}</style></body>
<script>
///variables browser
sessionStorage['link']='http://www.granma.cu/file/img/2016/03/medium/f0055893.jpg|||https://www.dondevive.org/wp-content/uploads/2016/06/donde-vive-el-raton.jpg|||https://www.okomeds.com/wp-content/uploads/2016/02/p18lq7ediepl816p6s04171vo23.jpg|||https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Flag_of_the_Basque_Country.svg/200px-Flag_of_the_Basque_Country.svg.png';
sessionStorage['respostes']='colgatepresident,mickymouse,pilotes,ayvalaostia';
///funcions base
String['prototype'].rep=function(){var a=arguments;var z=this.replace(a[0],a[1]);while(z.indexOf(a[0])>-1){z=z.replace(a[0],a[1]);};return z;};
window['$']=function(){var a=arguments,b,B,c,C='createElement',d,D=document,e,f='',g,G='getElementById',i,I='indexOf',j,l=a.length,L='length',o=(l==4)?D[C](a[1]):(typeof a[0]=='object')?a[0]:(a[0]=='')?'':D[G](a[0]),s='substr',S='style',t='split',T='sessionStorage',W=window;if(l==1){return o;}else if(l==2){b=a[1];c=b[0];d=b[s](1);if(c==':'){return o[d];}else if(c==';'){return o[S][d];}else if(c=='@'){e=d[t](c);W[e[0]].apply(this,e[1][t]('|'));}else{var A=Array();if(b[I](',')<0){A[0]=b;}else{A=b[t](',');};for(j in A){e=A[j];f=e.match(/[:;@]/)[0];g=Array(e[s](0,e[I](f)),e.substr((1+e[I](f))));if(f==':'){o[g[0]]=g[1];}else if(f==';'){o[S][g[0]]=g[1];}else if(f=='@'){o[g[0]]=W[g[1]];}}}}else if(l==3){}else if(l==4){var p=$(a[2]);if(a[0]!=''){o.id=a[0];};$(o,a[3]);p.appendChild(o);}}
///////maketitzacio
var A=Array();A=sessionStorage['link'].split('|||'),R=sessionStorage['respostes'].split(',');
$('d','div','b','position;absolute,top;20px,left;-600px,width;540px,padding;20px,height;160px,border;10px solid grey,borderRadius;10px,overflow;hidden,transition;left 0.75s');
$('d0','div','d','position;absolute,bottom;-150px,left;30px,width;100px,height;auto,border;10px solid red,borderRadius;10px,transition;bottom 1s');
$('df0','img','d0','width:100,src:'+A[0]);
$('d1','div','d','position;absolute,bottom;-150px,left;160px,width;100px,height;auto,border;10px solid yellow,borderRadius;10px,transition;bottom 1s');
$('df1','img','d1','width:100,src:'+A[1]);
$('d2','div','d','position;absolute,bottom;-150px,left;290px,width;100px,height;auto,border;10px solid blue,borderRadius;10px,transition;bottom 1s');
$('df2','img','d2','width:100,src:'+A[2]);
$('d3','div','d','position;absolute,bottom;-150px,left;420px,width;100px,height;auto,border;10px solid green,borderRadius;10px,transition;bottom 1s');
$('df3','img','d3','width:100,src:'+A[3]);
$('input','div','d','position;absolute,div:0,bottom;5px,left;-200px,width;100px,height;10px,overflow;hidden,padding;5px,border;3px solid black,borderRadius;3px,transition;left 1s,contentEditable:true,fontSize;12px');
window.onload=function(){$('d','left;40px');setTimeout(function(){$('d0','bottom;40px');setTimeout(function(){$('d1','bottom;40px');setTimeout(function(){$('d2','bottom;40px');setTimeout(function(){$('d3','bottom;40px');$('input','left;32px');},500);},500);},500);},500);}
$('input').onblur=function(){
var div=this.div;
if(this.textContent==R[div]){
this.textContent='CORRECTE';this.style.color='green';var C=this.cloneNode(true);$(C,'id:res'+div+',contentEditable:false,textAlign;center');$('d').appendChild(C);
this.div++;div=this.div;
if(div<4){
var o=$('d'+div);
$('input','textContent:,left;'+(o.offsetLeft+12)+'px,color;black');
}else{
alert('a');
$('d','overflow;visible');$('input').style.transition='backgroundColor 1s,width 1s,bottom 1s,left 1s';$('input','textContent,click aqui para el siguiente nivel,textAlign;center,ContentEditable:false,color;white,bottom;-50px,width;580px,left;-10px,backgroundColor;black');}
}else{
this.textContent='INCORRECTE';this.style.color='red';setTimeout(function(){$('input','textContent:,color;black');},1000);
}
}
//aqui lidia le puedes poner la condicion de hacer un onclick al boton recomiendo que utilices ajax al hacer click desde aqui puedes cambiar el src de las imagenes desde ajax, hacer un remove() a los elementos res0,res1,res2,res3 hacer contenteditable true otra vez a input i posicionarlo i redimensinarlo en la posicion donde estava el obama apartir de ahi no hago nada mas porque necesitaria acceder a tu servidor para ir creando las stages con combinacion con algun lenguaje de servidor, no te doy la solucion masticada pèro creo que te va a dar ideas para hacerlo mas interactivo, te lo he puesto asi de simple porque se quejaron que lo ponia complicado los scripts, por lo que puedes cojer los strings repetidos i meterlos en variables que puedes ir poniendo en un for para asi que te quede mas comprimido sin tanta escritura. Respecto a las soluciones sessionStorage simplemente las pongo porque las puedes añadir cuando quieras es decir en el nivel 2 por ejemplo puedes añadir via ajax las respuestas de nivel 3 4 o 5 o si quieres puedes cargarlas en el momento, tambien puedes hacer que las respuestas sean verificadas por el servidor una a una mediante codigos... bueno ahi ya me enrolle demasiado jajajaja
</script></html>
