janvier 15, 2025 / NSI

NSI, TP JS, Jeu des 7 familles

On veut créer une page html contenant les illustrations des membres d’une des familles du jeu des 7 familles proposé par l’INRIA :
https://interstices.info/dossier/7-familles-de-linformatique/

Une ressource utile :
https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Eventslocks/Events

Etape 1

Créer une page html proposant les illustrations des membres d’une famille de l’informatique de votre choix.

Etape 2

On désire à présent ajouter un peu d’interactivité à notre page. Pour cela, l’utilisateur doit cliquer sur l’illustration correspondant à l’un des personnages affichés que l’on a choisi.
Un message dans le html doit alors indiquer à l’utilisateur si il a fait le bon choix.

Etape 3

Mettre en place un tirage aléatoire sur le nom de la personne à trouver.

Correction Version 1

le html

<!DOCTYPE html>
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
  <title>Jeu des 7 familles</title>
  
</head>
<body>
<div id="plateau">
<img src="images/Alan Kay.png" onclick="clique('Alan Kay')">
<img  src="images/Doug Engelbart.png" onclick="clique('Doug Engelbart')">
<img src="images/Jean-Marie Hullot.png" onclick="clique('Jean-Marie Hullot')">
<img src="images/Joëlle Coutaz.png" onclick="clique('Joëlle Coutaz')">
<img src="images/Marie-Paule Cani.png" onclick="clique('Marie-Paule Cani')">
<img  src="images/Ted Nelson.png" onclick="clique('Ted Nelson')">

<h1 id="texte">Cliquer sur Ted Nelson</h1>
</div>
    </body>
 
	<script src="script.js"></script>
	</html>

le css

#plateau {
    width: 33%;
    margin-left: 33%;
    margin-top:50px;
}
h1 {
	color: #FF5733;
	font-size: 30px;
	width: 50%;
    margin-left: 25%;
	font-family: "Bowlby One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

img {
    width: 30%;
}

le js

var reponse="Ted Nelson";
var texte=document.getElementById("texte");

function clique(nom){
	if (nom==reponse){
		texte.textContent="Bravo, vous avez cliqué sur "+reponse;
	}
	else {
		texte.textContent="Désolé, vous avez cliqué sur "+nom+".Il faut cliquer sur "+reponse;
	}
	
	
}

Version 2

le html

<!DOCTYPE html>
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
  <title>Jeu des 7 familles</title>
  
</head>
<body>
<div id="plateau">
<img id="Alan Kay" src="images/Alan Kay.png">
<img  id="Doug Engelbart" src="images/Doug Engelbart.png">
<img id="Jean-Marie Hullot" src="images/Jean-Marie Hullot.png">
<img id="Joëlle Coutaz" src="images/Joëlle Coutaz.png">
<img id="Marie-Paule Cani" src="images/Marie-Paule Cani.png">
<img  id="Ted Nelson" src="images/Ted Nelson.png">

<h1 id="texte">Cliquer sur Ted Nelson</h1>
</div>
    </body>
 
	<script src="script.js"></script>
	</html>

le js

var reponse="Ted Nelson";
var texte=document.getElementById("texte");

var mes_images=document.getElementsByTagName("img");
for (var i=0;i<6;i++){
	var mon_image=mes_images[i];
	mon_image.addEventListener("mousedown",verif,false);
	
	
}

function verif(evt){
	if (this.id==reponse){
		texte.textContent="Bravo";
	}
	else {
		texte.textContent="Désolé, vous avez cliqué sur "+this.id+".Il faut cliquer sur "+reponse;
	}
	
}

Version 3 sans id dans le html

<!DOCTYPE html>
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
  <title>Jeu des 7 familles</title>
  
</head>
<body>
<div id="plateau">
<img src="images/Alan Kay.png">
<img src="images/Doug Engelbart.png">
<img src="images/Jean-Marie Hullot.png">
<img src="images/Joëlle Coutaz.png">
<img src="images/Marie-Paule Cani.png">
<img src="images/Ted Nelson.png">

<h1 id="texte">Cliquer sur Ted Nelson</h1>
</div>
    </body>
 
	<script src="script.js"></script>
	</html>

le js

var reponse="Ted Nelson";
var texte=document.getElementById("texte");

var mes_images=document.getElementsByTagName("img");
for (var i=0;i<6;i++){
	var mon_image=mes_images[i];
	mon_image.addEventListener("mousedown",verif,false);
	
	
}

function verif(evt){
	nom_image=this.getAttribute("src").slice(7,-4);
	
	if (nom_image==reponse){
		texte.textContent="Bravo";
	}
	else {
		texte.textContent="Désolé, vous avez cliqué sur "+nom_image+".Il faut cliquer sur "+reponse;
	}
	
}

CatégoriesNSI