
<!DOCTYPE html>
<html>

<head>
	<title>PARTE</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="/static/forkilla/style8.css">

	
</head>
<body>

<script type="text/javascript" src="/static/forkilla/voice10.js"></script>
<script>

  window.speechSynthesis.cancel();

  var text = "Seguimos rellenando los números del 6 al 9 como puedes er en esta imagen.";
  voice_talk(text);

  var nom = "{{ nom }}";

  var opciones = ["siguiente","atrás", "Pausa","hola","pausa", "repite", "repetir", "stop", "continúa", "continuar", "2"];
  voice_start(opciones,text,nom);
  window.setInterval(function(){
    /// call your function here
    voice_start(opciones,text,nom);
  }, 5000);
</script>


<div style="padding:15px;text-align:center;color: white;">
  <h1>CONDUCTOR A Y CONDUCTOR B</h1>
</div>

<div style="raw">
  
  
    <div class="column" style="text-align: center;">
	  {% if nom == "María" %} 
		<img id="imatgeAvatar" src="/static/forkilla/fig14.PNG"  alt="AVATAR 1" style="width:250px;height:380px;">	
	  {% elif nom == "Jennifer" %} 
		<img src="/static/forkilla/fig18.PNG"  alt="AVATAR 2" style="width:250px;height:380px;">	
	  {% elif nom == "Isabel" %} 
		<img src="/static/forkilla/fig22.PNG"  alt="AVATAR 3" style="width:250px;height:380px;">	
	  {% else %}
		<img src="/static/forkilla/fig14.PNG"  alt="AVATAR 1" style="width:250px;height:380px;">		   
	  {% endif %}

  </div>
  
  <!--
  <div class="column">
	
	<h3> 6. Detalles del asegurado (Nombre, apellidos, ...).  </h3>
		
	<h3> 7. Detalles vehículo. </h3>
		
	<h3> 8. Aseguradora. </h3>
		
	<h3> 9. Detalles de los dos conductores (Nombre, apellidos, ...). </h3>	
	
	
	
  </div> -->
  
  	<div class="column2">
      <img src="/static/forkilla/img_parte2.png"  alt="FOTO PARTE2" width="400" height="400">
    </div>


 
  </div>
</div>


</div>

<footer>

	
	{% if nom == "María" %} 

		<div style="text-align: center;float: left;">
			<input type="image" src='/static/forkilla/back.png' onclick='window.location = "/forkilla/parte/?triaAvatar=María";' style="width:40px;height:40px;margin-top:12px;margin-right:30px;margin-left:50px;"/>
		</div>

	
		<div style="text-align: center;float: right;">
			<input type="image" src='/static/forkilla/next.png' onclick='window.location = "/forkilla/parte11/?triaAvatar=María";' style="width:40px;height:40px;margin-top:12px;margin-right:50px;margin-left:30px;"/>
		</div>

	{% elif nom == "Jennifer" %} 
	
		<div style="text-align: center;float: left;">
			<input type="image" src='/static/forkilla/back.png' onclick='window.location = "/forkilla/parte/?triaAvatar=Jennifer";' style="width:40px;height:40px;margin-top:12px;margin-right:30px;margin-left:50px;"/>
		</div>

		<div style="text-align: center;float: right;">
			<input type="image" src='/static/forkilla/next.png' onclick='window.location = "/forkilla/parte11/?triaAvatar=Jennifer";' style="width:40px;height:40px;margin-top:12px;margin-right:50px;margin-left:30px;"/>
		</div>

	{% elif nom == "Isabel" %} 
	
		<div style="text-align: center;float: left;">
			<input type="image" src='/static/forkilla/back.png' onclick='window.location = "/forkilla/parte/?triaAvatar=Isabel";' style="width:40px;height:40px;margin-top:12px;margin-right:30px;margin-left:50px;"/>
		</div>

		<div style="text-align: center;float: right;">
			<input type="image" src='/static/forkilla/next.png' onclick='window.location = "/forkilla/parte11/?triaAvatar=Isabel";' style="width:40px;height:40px;margin-top:12px;margin-right:50px;margin-left:30px;"/>
		</div>

	{% else %}
	
		<div style="text-align: center;float: left;">
			<input type="image" src='/static/forkilla/back.png' onclick='window.location = "/forkilla/parte/?triaAvatar=María";' style="width:40px;height:40px;margin-top:12px;margin-right:30px;margin-left:50px;"/>
		</div>

		<div style="text-align: center;float: right;">
			<input type="image" src='/static/forkilla/next.png' onclick='window.location = "/forkilla/parte11/?triaAvatar=María";' style="width:40px;height:40px;margin-top:12px;margin-right:50px;margin-left:30px;"/>
		</div>

	{% endif %}
	
	<div style="text-align: center;float: none;">
		<input type="image" src='/static/forkilla/pause.png' onclick="pause();" style="width:40px;height:40px;margin-top:12px;margin-right:12px;margin-left:12px;"/>
		<input type="image" src='/static/forkilla/play-button.png' onclick="resume();" style="width:40px;height:40px;margin-top:12px;margin-right:12px;margin-left:12px;"/>
		<input type="image" src='/static/forkilla/replay.png' onclick="voice_talk(text);" style="width:40px;height:40px;margin-top:12px;margin-right:12px;margin-left:12px;"/>
		<input type="image" src='/static/forkilla/stop.png' onclick="stop();" style="width:40px;height:40px;margin-top:12px;margin-right:12px;margin-left:12px;"/>
	</div>
	


		
</footer> 

</body>
</html>