setTimeout, setInterval

Tricycle.

Dans le code ci-dessous, l'image a une position absolue dans le cadre div.

Compléter le code de façon à ce que cette image se déplace de gauche à droite de l'écran par petits déplacements successifs, puis revienne à gauche de façon instantanée après 600px et recommence son mouvement indéfiniment.

Vous utiliserez setTimeout ou setInterval.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title> cycle </title>
  
	<style>
	#cadre{
		border:1px solid red;
		height: 100px;
	}
	#velo{
		position: absolute;
		left: 0px;
		top: 10px;
	}
	</style>
</head>
    
<body>

<div id="cadre"> <img id="velo" src="images/velo1.gif" alt="cycle" width="100px"></div>
<script>
var velo = document.getElementById("velo");
 
 
 
</script>
</body>
</html>

Aide

velo.offsetLeft retourne le nombre de pixels séparant le vélo du bord gauche.

Ainsi velo.style.left = velo.offsetLeft + 10 + 'px'; permet d'éloigner le vélo du bord gauche de 10px supplémentaire.

Avec `setTimeout`

Un code possible :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>cycle </title>
	<style>
	#cadre{
		border:1px solid red;
		height: 100px;
	}
	#velo{
		position: absolute;
		left: 0px;
		top: 10px;
	}
	</style>
</head>
    
<body>

<div id="cadre"> <img id="velo" src="images/velo1.gif" alt="tricycle" width="100px"></div>
<script>
var velo = document.getElementById("velo");
var temps = 100;

function avance() {
	if (velo.offsetLeft < 600) velo.style.left =  velo.offsetLeft + 10 + 'px';
	else velo.style.left = 0 + 'px';
	setTimeout(avance, temps);
}
 
avance();
</script>
</body>
</html>

Avec `setInterval`

Un code possible :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title> tricycle </title>
	<style>
	#cadre{
		border:1px solid red;
		height: 100px;
	}
	#velo{
		position: absolute;
		left: 0px;
		top: 10px;
	}
	</style>
</head>
    
<body>

<div id="cadre"> <img id="velo" src="images/velo1.gif" alt="tricycle" width="100px"></div>
<script>
var velo = document.getElementById("velo");
var temps = 100;

function avance() {
	velo.style.left =  velo.offsetLeft + 10 + 'px';
	if (velo.offsetLeft >= 600)  velo.style.left = 0 + 'px';
}
 
setInterval(avance, temps);
</script>
</body>
</html>

Bicycle.

Faites de même avec l'image ci-dessous, en tenant compte de la pente.

grimpeur

Aide

Utiliser velo.offsetTop en plus de velo.offsetLeft.

On aura donc par exemple des instructions telles que :

velo.style.left = velo.offsetLeft + 10 + 'px';
velo.style.left = velo.offsetLeft + 10 + 'px';

Avec `setTimeout`

Un code possible :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>cycle </title>
	<style>
	#cadre{
		height: 200px;
	}
	#velo{
		position: absolute;
		left: 0px;
		top: 100px;
	}
	</style>
</head>
    
<body>

<div id="cadre"> <img id="velo" src="images/velo2.gif" alt="bicycle" width="100px"></div>
<script>
var velo = document.getElementById("velo");
var temps = 100;

function avance() {
	if (velo.offsetLeft < 400) {
		velo.style.left =  velo.offsetLeft + 10 + 'px';
		velo.style.top =  velo.offsetTop - 5 + 'px';
	}
	else {
		velo.style.left = 0 + 'px';
		velo.style.top = 100 + 'px';
	}
	setTimeout(avance, temps);
}
 
avance();
</script>
</body>
</html>

Avec `setInterval`

Un code possible :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title> tricycle </title>
	<style>
	#cadre{
		height: 200px;
	}
	#velo{
		position: absolute;
		left: 0px;
		top: 160px;
	}
	</style>
</head>
    
<body>

<div id="cadre"> <img id="velo" src="images/velo2.gif" alt="tricycle" width="100px"></div>
<script>
var velo = document.getElementById("velo");
var temps = 100;

function avance() {
	velo.style.left =  velo.offsetLeft + 10 + 'px';
	velo.style.top =  velo.offsetTop + (-3) + 'px';
	if (velo.offsetLeft >= 700) {
		 velo.style.left = 0 + 'px';
		 velo.style.top = 160 + 'px';
	 }
}
 
setInterval(avance, temps);
</script>
</body>
</html>

Virgule.

Programmer est difficile : on oublie une simple virgule et la machine ne comprend plus rien de ce qu'on lui dit.

Ce n'est pas faux. Mais il en va de même dans notre langue.

L' enquête sur l'assassinat de notre correspondant à Lyon.	L' enquête sur l'assassinat, de notre correspondant à Lyon.
Les chiens mordent mon enfant.	Les chiens mordent, mon enfant.

Votre mission est de programmer l'alternance ci-dessous, dont l'objectif est d'aider les enfants impressionnables à saisir l'importance de la ponctuation.

Vous utiliserez setTimeout.

La petite animation à programmer

« Allons manger, les enfants ! »

« Allons manger les enfants ! »

Une aide

Avec element.style.display = "none"; , on peut faire disparaître un élément html (où element est le nom de la variable js dans laquelle on aura récupéré l'élément du DOM).

On peut utiliser de même element.style.color pour modifier la couleur du texte à partir du script...

Un code possible

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>cycle </title>
	<style>
	div{
		background-color: black;
		color: white;
		font-weight: bold;
		font-size: 40px;
		display: inline-block;
		padding: 5px;
		border-radius: 10px;
		border: 1px solid gray;
	}
	img{ display: none;}
	p{ display: none;}
	</style>
</head>
    
<body>


<div id="cadre">
<img id="imageogre" src="images/ogre.jpg" alt="ogre">
<img id="imagefamille" src="images/famille.jpg" alt="famille">
<p id="citationpapa"> « Allons manger, les enfants ! »</p>
<p id="citationogre"> « Allons manger les enfants ! »</p>
</div>

<script>
var cadre = document.getElementById("cadre");
var citationogre = document.getElementById("citationogre");
var citationpapa = document.getElementById("citationpapa");
var imageogre = document.getElementById("imageogre");
var imagefamille = document.getElementById("imagefamille");
var temps = 5000;

 

function horreur() {
	citationpapa.style.display = "none";
	imagefamille.style.display = "none";
	cadre.style.backgroundColor = "black";
	citationogre.style.color = "red";
	imageogre.style.display = "block";
	citationogre.style.display = "block";
	setTimeout(bonheur, temps);
}


function bonheur() {
	imageogre.style.display = "none";
	citationogre.style.display = "none";
	cadre.style.backgroundColor = "white";
	citationpapa.style.color = "pink";
	citationpapa.style.display = "block";
	imagefamille.style.display = "inline";
	setTimeout(horreur, temps);
}
 
 bonheur();
</script>
</body>
</html>

Sources

L'image de l'ogre est l'une des illustrations de Gustave Doré pour Les Contes de Perrault.

La seconde image est de Léo Beley, élève de terminale S au lycée de la Plaine de l'Ain en 2016-2017.
restaurant La Virgule.

QCM avec limite de temps.

Concevoir un qcm :

Une question est posée.
Quelques réponses sont proposées (une seule bonne réponse) sous forme de boutons à cliquer.
Si l'on clique le bon bouton, ils disparaissent et le message "Gagné." apparaît.
Si l'on clique le mauvais bouton, ils disparaissent et le message "Perdu." apparaît.
Si l'utilisateur met trop de temps à cliquer, les boutons disparaissent et le message "Trop tard !" apparaît.

Le dernier point est réalisé avec un setTimeout, il faut donc penser à le désactiver avec un clearTimeout lorsque l'utilisateur clique à temps sur un bouton.

Un code possible

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>cycle </title>
	 
</head>
    
<body>

<p>Le roman « Le Hussard sur le toit » de Jean Giono a été publié en  : </p>
<form id="hussard">
	<button    type="button"  id="d1911"> 1911</button>
	<button    type="button"  id="d1931"> 1931</button>
	<button    type="button"  id="d1951"> 1951</button>
</form> 



<p id="reponse"> </p>


<script>
 
var d1951 = document.getElementById("d1951");
var d1931 = document.getElementById("d1931");
var d1911 = document.getElementById("d1911");
var reponse = document.getElementById("reponse");


function disparition(){
	d1951.style.display = "none";
	d1931.style.display = "none";
	d1911.style.display = "none";
}

function ok() {
	reponse.textContent = "Bravo ! Bonne réponse.";
	clearTimeout(temps);
	disparition();
}



function ko(){
	reponse.textContent = "Oups, mauvaise réponse.";	 
	clearTimeout(temps);
	disparition();
}

 

function tropTard() {
	reponse.textContent = "Trop tard. Perdu.";
	disparition();
}

 
 
d1951.addEventListener('click', ok, false);
d1931.addEventListener('click', ko, false);
d1911.addEventListener('click', ko, false);


var temps = setTimeout(tropTard, 6000);

 
 
</script>
</body>
</html>

Rappel : pour réactiver le code, ajouter par exemple un blanc en fin de partie de code.

Pourcentage de bacheliers dans une classe d'âge.

On se propose d'illustrer l'évolution des pourcentages de bacheliers dans une classe d'âge.

On trouvera les données sur cette page.

Les données à illustrer.

On a extrait les données suivantes de la page citée :


var G = { 2001 : 55.8, 2005: 55.6, 2010: 60.2,2015: 72.7};  
var F = { 2001 : 68.3, 2005 : 67, 2010: 70.1, 2015: 83.2};
var C = { 2001 : 61.9, 2005: 61.2, 2010: 65, 2015: 77.8};

où, par exemple, F[2005] = 67 signifie que 67% des filles de la classe d'âge (passant le bac en 2005) sont bachelières (G pour garçons, F pour filles, C pour classe d'âge).

L'illustration à réaliser.

Source data.education.gouv.fr

Un code possible

 
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> classe d'âge baccalauréat </title>
        <style>
			p#garcon, p#fille, p#classeage{
				color: white;
				font-weight: bold;
				text-align: center;
				height : 3rem;
				border-radius: 5px;
			}
			p#annee{font-size: 2rem;}
        </style>
    </head>
    <body>

<p> Source 
<a href="https://data.education.gouv.fr/explore/dataset/fr-en-proportion-de-bacheliers-dans-une-generation/table/?sort=-annee" target="data.education.gouv.fr">
data.education.gouv.fr</a>
</p>
	
<p id="annee"></p>
<p id="garcon">   </p>
<p id="fille"> </p>
<p id="classeage"> </p>

<script>
/* les données, extrait de 
 https://data.education.gouv.fr/explore/dataset/fr-en-proportion-de-bacheliers-dans-une-generation/table/
*/
var Annees = [2001, 2005, 2010, 2015];
var G = { 2001 : 55.8, 2005: 55.6, 2010: 60.2,2015: 72.7};  
var F = { 2001 : 68.3, 2005 : 67, 2010: 70.1, 2015: 83.2};
var C = { 2001 : 61.9, 2005: 61.2, 2010: 65, 2015: 77.8};

var garcon = document.getElementById("garcon");
var fille = document.getElementById("fille");
var classeage = document.getElementById("classeage");
var annee = document.getElementById("annee");
 
garcon.style.backgroundColor = "red";
fille.style.backgroundColor = "blue";
classeage.style.backgroundColor = "green";


function evolue(indice) {
	let date = Annees[indice];
	annee.textContent = date;
	garcon.style.width =  G[date] * 3 + 'px';
	garcon.textContent = "Garçons : " + G[date] + "%";
	fille.style.width = F[date] * 3 + 'px';
	fille.textContent = "Filles : " + F[date] + "%";
	classeage.style.width = C[date] * 3 + 'px';	
	classeage.textContent = "Classe d'âge : " + C[date] + "%";
	setTimeout(evolue, 8000, (++indice) % Annees.length);
}
 
setTimeout(evolue, 1000, 0); // on déclenche la fonction après 2 s.
</script>
</body>
</html>

Tricycle.

Aide

Avec setTimeout

Avec setInterval

Bicycle.

Aide

Avec setTimeout

Avec setInterval

Virgule.

La petite animation à programmer

Une aide

Un code possible

Sources

QCM avec limite de temps.

Un code possible

Pourcentage de bacheliers dans une classe d'âge.

Les données à illustrer.

L'illustration à réaliser.

Un code possible

Avec `setTimeout`

Avec `setInterval`

Avec `setTimeout`

Avec `setInterval`