{"id":1840,"date":"2026-01-12T18:24:00","date_gmt":"2026-01-12T17:24:00","guid":{"rendered":"http:\/\/labodemaths.fr\/WordPress3\/?p=1840"},"modified":"2026-01-13T08:32:04","modified_gmt":"2026-01-13T07:32:04","slug":"nsi-tp-js-jeu-des-7-familles","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/nsi-tp-js-jeu-des-7-familles\/","title":{"rendered":"NSI, TP JS, interactions diverses, vers un memory"},"content":{"rendered":"\n

On veut cr\u00e9er une page html contenant les illustrations des membres d’une des familles du jeu des 7 familles propos\u00e9 par l’INRIA :
https:\/\/interstices.info\/dossier\/7-familles-de-linformatique\/<\/a><\/p>\n\n\n\n

Une ressource utile :
https:\/\/developer.mozilla.org\/fr\/docs\/Learn\/JavaScript\/Building_blocks\/Events<\/a>locks\/Events<\/p>\n\n\n\n

Un lien avec diff\u00e9rentes propositions de r\u00e9ponses :
https:\/\/labodemaths.fr\/NSI\/TP2_JS\/<\/a><\/p>\n\n\n\n

Etape 1<\/h3>\n\n\n\n

Cr\u00e9er une page html proposant les illustrations des membres d’une famille de l’informatique de votre choix.<\/p>\n\n\n\n

Etape 2<\/h3>\n\n\n\n

On d\u00e9sire \u00e0 pr\u00e9sent ajouter un peu d’interactivit\u00e9 \u00e0 notre page. Pour cela, l’utilisateur doit cliquer sur l’illustration correspondant \u00e0 l’un des personnages affich\u00e9s que l’on a choisi.
Un message dans le html doit alors indiquer \u00e0 l’utilisateur si il a fait le bon choix.
<\/p>\n\n\n\n

Etape 3<\/h3>\n\n\n\n

Mettre en place un tirage al\u00e9atoire sur le nom de la personne \u00e0 trouver.<\/p>\n\n\n\n

Correction Version 1<\/p>\n\n\n\n

le html<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"fr\"><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n  <link rel=\"stylesheet\" href=\"style.css\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&display=swap\" rel=\"stylesheet\">\n  <title>Jeu des 7 familles<\/title>\n  \n<\/head>\n<body>\n<div id=\"plateau\">\n<img src=\"images\/Alan Kay.png\" onclick=\"clique('Alan Kay')\">\n<img  src=\"images\/Doug Engelbart.png\" onclick=\"clique('Doug Engelbart')\">\n<img src=\"images\/Jean-Marie Hullot.png\" onclick=\"clique('Jean-Marie Hullot')\">\n<img src=\"images\/Jo\u00eblle Coutaz.png\" onclick=\"clique('Jo\u00eblle Coutaz')\">\n<img src=\"images\/Marie-Paule Cani.png\" onclick=\"clique('Marie-Paule Cani')\">\n<img  src=\"images\/Ted Nelson.png\" onclick=\"clique('Ted Nelson')\">\n\n<h1 id=\"texte\">Cliquer sur Ted Nelson<\/h1>\n<\/div>\n    <\/body>\n \n\t<script src=\"script.js\"><\/script>\n\t<\/html><\/code><\/pre>\n\n\n\n
le css<\/p>\n\n\n\n
#plateau {\n    width: 33%;\n    margin-left: 33%;\n    margin-top:50px;\n}\nh1 {\n\tcolor: #FF5733;\n\tfont-size: 30px;\n\twidth: 50%;\n    margin-left: 25%;\n\tfont-family: \"Bowlby One\", sans-serif;\n  font-weight: 400;\n  font-style: normal;\n}\n\nimg {\n    width: 30%;\n}<\/code><\/pre>\n\n\n\n
le js<\/p>\n\n\n\n
var reponse=\"Ted Nelson\";\nvar texte=document.getElementById(\"texte\");\n\nfunction clique(nom){\n\tif (nom==reponse){\n\t\ttexte.textContent=\"Bravo, vous avez cliqu\u00e9 sur \"+reponse;\n\t}\n\telse {\n\t\ttexte.textContent=\"D\u00e9sol\u00e9, vous avez cliqu\u00e9 sur \"+nom+\".Il faut cliquer sur \"+reponse;\n\t}\n\t\n\t\n}\n\n<\/code><\/pre>\n\n\n\n
Version 2<\/p>\n\n\n\n
le html<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"fr\"><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n  <link rel=\"stylesheet\" href=\"style.css\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&display=swap\" rel=\"stylesheet\">\n  <title>Jeu des 7 familles<\/title>\n  \n<\/head>\n<body>\n<div id=\"plateau\">\n<img id=\"Alan Kay\" src=\"images\/Alan Kay.png\">\n<img  id=\"Doug Engelbart\" src=\"images\/Doug Engelbart.png\">\n<img id=\"Jean-Marie Hullot\" src=\"images\/Jean-Marie Hullot.png\">\n<img id=\"Jo\u00eblle Coutaz\" src=\"images\/Jo\u00eblle Coutaz.png\">\n<img id=\"Marie-Paule Cani\" src=\"images\/Marie-Paule Cani.png\">\n<img  id=\"Ted Nelson\" src=\"images\/Ted Nelson.png\">\n\n<h1 id=\"texte\">Cliquer sur Ted Nelson<\/h1>\n<\/div>\n    <\/body>\n \n\t<script src=\"script.js\"><\/script>\n\t<\/html><\/code><\/pre>\n\n\n\n
le js<\/p>\n\n\n\n
var reponse=\"Ted Nelson\";\nvar texte=document.getElementById(\"texte\");\n\nvar mes_images=document.getElementsByTagName(\"img\");\nfor (var i=0;i<6;i++){\n\tvar mon_image=mes_images[i];\n\tmon_image.addEventListener(\"mousedown\",verif,false);\n\t\n\t\n}\n\nfunction verif(evt){\n\tif (this.id==reponse){\n\t\ttexte.textContent=\"Bravo\";\n\t}\n\telse {\n\t\ttexte.textContent=\"D\u00e9sol\u00e9, vous avez cliqu\u00e9 sur \"+this.id+\".Il faut cliquer sur \"+reponse;\n\t}\n\t\n}<\/code><\/pre>\n\n\n\n
Version 3 sans id dans le html<\/h1>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"fr\"><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n  <link rel=\"stylesheet\" href=\"style.css\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&display=swap\" rel=\"stylesheet\">\n  <title>Jeu des 7 familles<\/title>\n  \n<\/head>\n<body>\n<div id=\"plateau\">\n<img src=\"images\/Alan Kay.png\">\n<img src=\"images\/Doug Engelbart.png\">\n<img src=\"images\/Jean-Marie Hullot.png\">\n<img src=\"images\/Jo\u00eblle Coutaz.png\">\n<img src=\"images\/Marie-Paule Cani.png\">\n<img src=\"images\/Ted Nelson.png\">\n\n<h1 id=\"texte\">Cliquer sur Ted Nelson<\/h1>\n<\/div>\n    <\/body>\n \n\t<script src=\"script.js\"><\/script>\n\t<\/html><\/code><\/pre>\n\n\n\n
le js<\/p>\n\n\n\n
var reponse=\"Ted Nelson\";\nvar texte=document.getElementById(\"texte\");\n\nvar mes_images=document.getElementsByTagName(\"img\");\nfor (var i=0;i<6;i++){\n\tvar mon_image=mes_images[i];\n\tmon_image.addEventListener(\"mousedown\",verif,false);\n\t\n\t\n}\n\nfunction verif(evt){\n\tnom_image=this.getAttribute(\"src\").slice(7,-4);\n\t\n\tif (nom_image==reponse){\n\t\ttexte.textContent=\"Bravo\";\n\t}\n\telse {\n\t\ttexte.textContent=\"D\u00e9sol\u00e9, vous avez cliqu\u00e9 sur \"+nom_image+\".Il faut cliquer sur \"+reponse;\n\t}\n\t\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
On veut cr\u00e9er une page html contenant les illustrations des membres d’une des familles du…<\/p>\n
Read the postNSI, TP JS, interactions diverses, vers un memory<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":1843,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[57],"tags":[],"_links":{"self":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1840"}],"collection":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/comments?post=1840"}],"version-history":[{"count":15,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1840\/revisions"}],"predecessor-version":[{"id":3000,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1840\/revisions\/3000"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/1843"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=1840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=1840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=1840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}