JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<style> video { position: fixed; top: 0px; left: 150px; height: 780px; } .passage input[type="text"] { min-width: 50px; width: 335px; } .BoutonJouer { position: absolute; top: 630px; height: 70px; left: 1120px; width: 150px; background-color: lightgrey; color: black; border: 1.5px solid black; padding: 10px 20px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 20px; font-weight: bold; } </style> <video src="animation_tour.mp4" autoplay loop></video> <<set $prenom to "">> <div class="text_po2"><<type "15ms" skipkey "Tab">>AAAAAAAAAH ! Qu’est-ce-que c’est que ça ???? Pardon, reprenons depuis le début ! Moi c’est Pó ! Je vis dans le noir depuis toujours et tu viens de m’éblouiiiiiir. Mais, c’est quoi ce truc ? Tu veux venir le découvrir avec moi ? Au fait, c’est quoi ton nom à toi ? <<textbox "$prenom" "" autofocus>> <</type>></div> <button id="BoutonJouer" class="BoutonJouer">Entrer</button> <script> document.getElementById("BoutonJouer").addEventListener("click", function () { GE.move("Bonjour") }); </script>
<Po> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Bonjour retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" > </map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <SchemaLumiere> <img src="schema_lumiere.png" usemap="#schema"> </SchemaLumiere> <map name="schema"> <area data-passage="Composition de la lumière prt1" coords="49,402,68,332,61,306,69,256,57,173,101,96,186,76,241,105,278,169,272,231,231,282,193,314,177,352,156,364,133,432,97,451,64,439" shape="poly" > </map> <div class="text_poLumiere"><<type "15ms" skipkey "Tab">>La lumière est une <span id="definition-trigger" onmouseover="showPopup('Onde électromagnétique', 'C\'est une onde qui peut se déplacer dans le vide (la lumière se déplace dans l’espace qui est composé de vide. Par contre, le son n’est pas une onde électromagnétique et ne se déplace pas dans le vide, il n’y a pas de son dans l’espace). ');" onmouseout="hidePopup();"><u>onde électromagnétique</u></span> qui arrive jusqu’à ton œil. Si elle n’est pas perturbée, elle se déplace en ligne droite. Clique sur l’ampoule pour découvrir sa composition. On considère que la lumière est composée de petites particules appelées <span id="definition-trigger" onmouseover="showPopup('Photons', 'Le photon est une particule élémentaire, c\'est-à-dire l\'un des constituants les plus simples de l\'Univers. On peut le définir comme la particule qui transporte l\'énergie lumineuse ou de certains rayons cosmiques. ');" onmouseout="hidePopup();"><u>photons</u></span>. <</type>></div> <script> var popup = null; function showPopup(title, text) { if (popup) return; popup = document.createElement("div"); popup.classList.add("popupLumiere"); var popupTitle = document.createElement("h2"); popupTitle.textContent = title; var popupText = document.createElement("p"); popupText.textContent = text; popup.appendChild(popupTitle); popup.appendChild(popupText); document.body.appendChild(popup); } function hidePopup() { if (popup) { document.body.removeChild(popup); popup = null; } } </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <map name="fleche"> <area data-passage="lumière retour" coords="5,8,134,114" shape="rect" > </map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <SchemaComposition> <img src="Composition_lumiere_1.png" style="width: 840px;"> </SchemaComposition> <Po2> <img src="Po.png" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">>Il existe 2 types de lumières : la lumière naturelle qui vient du soleil et la lumière artificielle créée par les lampes. Ce sont toutes les deux de la lumière blanche. @@#Link;[[Mais qu’est-ce que la lumière blanche ?|Composition de la lumière prt2]]@@ <</type>></div>
<SchemaPropagation> <img src="obj_transparent.png" usemap="#objet" style="width: 1050px;"> </SchemaPropagation> <map name="objet"> <area data-passage="obj_noir" coords="503,324,603,435" shape="rect" > </map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Composition de la lumière prt2 retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <FlecheObjet> <img src="fleche3.png" style="width: 53px;"> </FlecheObjet> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Comme toute onde, elle se déplace dans l’espace, à la vitesse de 300 000 km/s, c’est comme si on faisait 7,5 fois le tour de la Terre en une seconde. Elle se propage en ligne droite. Quand elle rencontre un objet plusieurs phénomènes sont possibles : Si l’objet est totalement transparent, elle passe en ligne droite : c’est la transmission <</type>></div> <div class="text_flechePropagation"> Clique sur l'objet pour le faire changer de couleur </div>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Propagation Fin retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <SchemaDiffraction> <img src="eau_lumiere.png" style="width: 1000px;"> </SchemaDiffraction> <Po> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po> <div class="text_po"><<type "15ms" skipkey "Tab">> Lorsque le faisceau lumineux change d’environnement, il va continuer à se déplacer mais il est dévié, c’est la réfraction. C’est grâce à ce phénomène que se forment les arcs-en-ciel : cela apparaît quand il y a de la pluie et du soleil parce que les gouttes d’eau réfractent la lumière blanche du soleil. <</type>></div>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"><area data-passage="Propagation Fin retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"><area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"><area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po> <img src="polunettes.png" usemap="#lunettes" style="width: 360px;"> </Po> <map name="lunettes"><area data-passage="Pourquoi porter des lunettes ?" coords="142,44,268,135" shape="rect"></map> <div class="text_po"><<type "15ms" skipkey "Tab">>Tu le sais déjà mais c’est l'œil qui nous permet de voir les objets autour de nous. Tu peux passer ta souris sur les mots pour découvrir chaque partie de l’oeil. Tu peux aussi cliquer sur les lunettes de Pó pour découvrir pourquoi certaines personnes doivent porter des lunettes. Puis, clique sur la rétine de l'oeil pour passer à la suite. <</type>></div> <SchemaOeil> <img src="oeil.png" usemap="#image-map"> </SchemaOeil> <map name="image-map"><area data-passage="Retine prt1" coords="486,156,542,128,595,137,638,157,666,200,685,225,690,266,670,239,656,199,620,160,569,143,517,144" shape="poly"> <area coords="275,99,358,132" shape="rect" onmouseover="showPopup('La cornée', 'C\'est une membrane transparente. Elle centralise les rayon lumineux dans l\’oeil.');" onmouseout="hidePopup();"> <area coords="747,89,826,125" shape="rect" onmouseover="showPopup('La rétine', 'Elle est située au fond de l\’oeil et est composée de cellules sensibles à la lumière : les photorécepteurs');" onmouseout="hidePopup();"> <area coords="377,94,479,126" shape="rect" onmouseover="showPopup('Le cristallin', 'En changeant de forme il nous permet de voir net (comme la mise au point d’un appareil photo). Il fonctionne comme une lentille.');" onmouseout="hidePopup();"> <area coords="369,149,418,180" shape="rect" onmouseover="showPopup('L\'iris', 'En s\’ouvrant et se fermant il permet d\’augmenter ou de diminuer la quantité de lumière qui entre dans l\’oeil. c’est lui qui défini la couleur des yeux.');" onmouseout="hidePopup();"> <area coords="241,380,418,410" shape="rect" onmouseover="showPopup('L\'humeur aqueuse', 'C\'est un liquide transparent qui maintient la forme de l\'oeil. On dit qu\'elle nourrit le cristallin parce qu\'elle est renouvellée en permanence et permet d\'apporter tous les nutriments nécessaires.');" onmouseout="hidePopup();"> <area coords="649,5,776,47" shape="rect" onmouseover="showPopup('La sclérotique', 'C\’est la membrane qui entoure l’oeil et le rend rigide on l\’appelle le blanc de l\’oeil.');" onmouseout="hidePopup();"> <area coords="486,262,639,294" shape="rect" onmouseover="showPopup('L\'humeur vitrée', ' C\’est un liquide transparent qui entoure l\'oeil.');" onmouseout="hidePopup();" > <area coords="768,229,838,263" shape="rect" onmouseover="showPopup('La fovéa', 'C\'est la zone de l\'œil de la vision précise, elle est peuplée de cônes.');" onmouseout="hidePopup();"> <area coords="812,254,933,293" shape="rect" onmouseover="showPopup('Le nerf optique', 'Il permet de transférer le message nerveux créé par la rétine au cerveau.');" onmouseout="hidePopup();"></map><script> var popup = null; function showPopup(title, text) { if (popup) return; // If the popup is already open, do nothing popup = document.createElement("div"); popup.classList.add("popup"); var popupTitle = document.createElement("h2"); popupTitle.textContent = title; var popupText = document.createElement("p"); popupText.textContent = text; popup.appendChild(popupTitle); popup.appendChild(popupText); document.body.appendChild(popup); } function hidePopup() { if (popup) { // Remove the popup from the body of the page document.body.removeChild(popup); popup = null; // Reset the popup variable } } </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Vision et fonctionnement de l'oeil retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <PoVision> <img src="polunettes.png" alt="New Image" style="width: 360px;"> </PoVision> <div class="text_poVision"><<type "15ms" skipkey "Tab">>Tu as sûrement déjà remarqué que certaines personnes portaient des lunettes, ou peut-être que toi-même tu en portes, mais pourquoi ? Les lunettes servent à voir plus net, elles sont composées de deux lentilles : une pour chaque oeil. Une lentille est un objet transparent dont le but est de rediriger la lumière. Il existe deux types de lentilles : une lentille convergente qui fonctionne comme une loupe et une lentille divergente qui est le contraire d’une loupe. C’est grâce aux lunettes que tu vois mieux ! <</type>></div> <style> .BoutonMyopie{ position: absolute; top: 234px; left: 145px; height: 273px; width: 287.2px; background-color: #FFCC00; color: black; border: 2px solid black; padding: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 180px; font-weight: bold; font-size: 24px; } .BoutonAstigmatie{ position: absolute; top: 234px; left: 520px; height: 273px; width: 287.2px; background-color: #FFCC00; color: black; border: 2px solid black; padding: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 180px; font-weight: bold; font-size: 24px; } </style> <button id="BoutonMyopie" class="BoutonMyopie">Myopie</button> <button id="BoutonAstigmatie" class="BoutonAstigmatie">Astigmatie</button> <script> document.getElementById("BoutonMyopie").addEventListener("click", function () { GE.move("myopie") }); document.getElementById("BoutonAstigmatie").addEventListener("click", function () { GE.move("astigmatie") }); </script>
<style> FlecheRetine{ position: fixed; left: 1310px; top: 400px; background-repeat: no-repeat; } .text_fleche { position: fixed; left: 1100px; width: 250px; top: 355px; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; text-align: center; background: white; border-width: thick; border: solid; border-color: grey; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 1; color: black; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"><area data-passage="Retine prt1 retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"><area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"><area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po> <img src="Po.png" style="width: 360px;"> </Po> <Retine> <img src="Retine+lumiere.png" style="width: 900px;"> </Retine> <div class="text_poRetine"><<type "15ms" skipkey "Tab">> Il existe 3 types de cônes : ceux qui permettent de voir le bleu, le vert et le rouge. Les bâtonnets sont 10 fois plus nombreux que les cônes. Ils sont surtout concentrés sur les côtés de la rétine et sont sensibles à la lumière. C’est eux qui permettent de voir quand il n’y a pas beaucoup de lumière. Tu peux cliquer sur les cônes pour découvrir le daltonisme, le chat pour savoir comment voient les animaux, ou le cerveau pour passer à la suite. <</type>></div> <IconeDaltonisme> <img src="Normal_trichromate.png" usemap="#daltonisme" style="width: 70px;"> </IconeDaltonisme> <map name="daltonisme"><area data-passage="Daltonisme" coords="2,2,476,510" shape="rect"></map> <IconeChat> <img src="chat.png" usemap="#chat" style="width: 80px;"> </IconeChat> <map name="chat"><area data-passage="Comment voient les animaux" coords="2,2,476,510" shape="rect"></map> <IconeCerveau> <img src="icone_cerveau.png" usemap="#cerveau" style="width: 65px;"> </IconeCerveau> <map name="cerveau"><area data-passage="Cerveau et perception" coords="4,2,453,388" shape="rect"></map> <FlecheRetine> <img src="fleche2.png" style="width: 47px;"> </FlecheRetine> <div class="text_fleche">Clique sur une des 3 icônes</div>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <Po3> <img src="Po.png" alt="New Image" style="width: 335px;"> </Po3> <div class="text_po3"><<type "15ms" skipkey "Tab">> Le daltonisme est dû au mauvais fonctionnement d’un ou plusieurs types de cônes. Il existe plusieurs types de daltonismes. Clique sur les images pour découvrir les types de daltonisme et quels cônes ne fonctionnent pas dans les différents cas. Clique une nouvelle fois dessus pour fermer la fenêtre. <</type>></div> <img src="Tritanopie_photo.png" usemap="#Tritanopie" style="width: 216px; position: fixed; left: 416.44px; top: 109.2px; border: solid black 2px"> <map name="Tritanopie"><area coords="4,0,2288,3204" shape="rect" onclick="togglePopupDaltonisme('Tritanopie', '', 'Tritanopie.png', '416.44px', '109.2px', '186px', '273px');"></map> <img src="Protanopie_photo.png" usemap="#Protanopie" style="width: 216px; position: fixed; left: 660.56px; top: 109.2px; border: solid black 2px"> <map name="Protanopie"><area coords="4,0,2288,3204" shape="rect" onclick="togglePopupDaltonisme('Protanopie', '', 'Protanopie.png', '660.56px', '109.2px', '186px', '273px');"></map> <img src="Deuteranopie_photo.png" usemap="#Deuteranopie" style="width: 216px; position: fixed; left: 904.68px; top: 109.2px; border: solid black 2px"> <map name="Deuteranopie"><area coords="4,0,2288,3204" shape="rect" onclick="togglePopupDaltonisme('Deutéranopie', '', 'Deuteranopie.png', '904.68px', '109.2px', '186px', '273px');"></map> <img src="sans_daltonisme.jpg" usemap="#vision_normale" style="width: 216px; position: fixed; left: 1148.8px; top: 265.2px; border: solid black 2px"> <map name="vision_normale"><area coords="4,0,2288,3204" shape="rect" onclick="togglePopupDaltonisme('Trichromate', 'vision normale', 'Normal_trichromate.png', '1148.8px', '265.2px', '186px', '273px');"></map> <img src="Tritanomalie_photo.png" usemap="#Tritanomalie" style="width: 216px; position: fixed; left: 416.44px; top: 444.6px; border: solid black 2px"> <map name="Tritanomalie"><area coords="4,0,2288,3204" shape="rect" onclick="togglePopupDaltonisme('Tritanomalie', '', 'Tritanomalie.png', '416.44px', '444.6px', '186px', '273px');"></map> <img src="Protanomalie_photo.png" usemap="#Protanomalie" style="width: 216px; position: fixed; left: 660.56px; top: 444.6px; border: solid black 2px"> <map name="Protanomalie"><area coords="4,0,2288,3204" shape="rect" onclick="togglePopupDaltonisme('Protanomalie', '', 'Protanomalie.png', '660.56px', '444.6px', '186px', '273px');"></map> <img src="Deuteranomalie_photo.png" usemap="#Deuteranomalie" style="width: 216px; position: fixed; left: 904.68px; top: 444.6px; border: solid black 2px"> <map name="Deuteranomalie"><area coords="4,0,2288,3204" shape="rect" onclick="togglePopupDaltonisme('Deutéranomalie', '', 'Deuteranomalie.png', '904.68px', '444.6px', '186px', '273px');"></map> <script> var popupsDaltonisme = []; function togglePopupDaltonisme(title, text, imageSrc, left, top, width, height) { var popupIndex = popupsDaltonisme.findIndex(function (popup) { return popup.title === title; }); if (popupIndex !== -1) { // If the popup is already open, close it document.body.removeChild(popupsDaltonisme[popupIndex].element); popupsDaltonisme.splice(popupIndex, 1); } else { // If the popup is closed, open it var popupDaltonisme = document.createElement("div"); popupDaltonisme.classList.add("popupDaltonisme"); if (typeof left !== 'undefined') { popupDaltonisme.style.left = left; } if (typeof top !== 'undefined') { popupDaltonisme.style.top = top; } if (typeof width !== 'undefined') { popupDaltonisme.style.width = width; } if (typeof height !== 'undefined') { popupDaltonisme.style.height = height; } var popupTitle = document.createElement("h2"); popupTitle.textContent = title; var popupText = document.createElement("p"); popupText.textContent = text; var popupImage = document.createElement("img"); popupImage.src = imageSrc; popupImage.alt = "Popup Image"; popupImage.style.width = "150px"; popupDaltonisme.appendChild(popupTitle); popupDaltonisme.appendChild(popupText); popupDaltonisme.appendChild(popupImage); document.body.appendChild(popupDaltonisme); popupsDaltonisme.push({ title: title, element: popupDaltonisme }); // Add click event to close the popup popupDaltonisme.onclick = function () { closePopup(popupDaltonisme, title); }; } } function closePopup(popup, title) { document.body.removeChild(popup); popupsDaltonisme.splice(popupsDaltonisme.findIndex(popup => popup.title === title), 1); } // Add an event listener to the Flecheretour image to close the popup and navigate var flecheretourImage = document.querySelector('Flecheretour img'); if (flecheretourImage) { flecheretourImage.addEventListener('click', function () { var openPopups = document.querySelectorAll('.popupDaltonisme'); openPopups.forEach(function (popup) { closePopup(popup, popup.querySelector('h2').textContent); }); // Navigate to the desired passage // Replace 'YourPassageName' with the actual name of the passage you want to navigate to GE.move("Retine prt2 retour") }); } </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect" > </map> <style> #chien { position: fixed; top: 46.8px; left: 114.88px; height: 163px; } #chat { position: fixed; top: 46.8px; left: 689.28px; height: 163px; } #escargot { position: fixed; top: 46.8px; left: 387.72px; height: 163px; } #RectangleChien { position: fixed; border: 2px solid black; background-color: transparent; left: 50.26px; width: 294px; top: 444.6px; height: 233px; } #RectangleChat { position: fixed; border: 2px solid black; background-color: transparent; left: 359px; width: 289px; top: 444.6px; height: 233px; } #RectangleEscargot { position: fixed; border: 2px solid black; background-color: transparent; left: 663.432px; width: 286px; top: 444.6px; height: 233px; } #visionHumain{ position: fixed; top: 390px; left: 1025.304px; height: 171.6px; border: 2px solid black; } #visionChien{ position: fixed; top: 273px; left: 50.26px; height: 156px; border: 2px solid black; } #visionChat{ position: fixed; top: 273px; left: 359px; height: 156px; border: 2px solid black; } #visionEscargot{ position: fixed; top: 273px; left: 663.432px; height: 156px; border: 2px solid black; } .BoutonValider { position: fixed; top : 702px; left: 50.26px; width: 903.244px; background-color: darkred; color: black; border: 2px solid black; padding: 10px 20px; cursor: pointer; }} </style> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Les animaux voient différemment de nous. Peux-tu retrouver quelle vision appartient à quel animal ? Voilà comment un humain verrait une rue : Clique puis déplace chaque animal dans le rectangle correspondant à sa vision, puis appuie sur valider pour confirmer ta réponse ! <</type>></div> <div id="RectangleChat"></div> <div id="RectangleChien"></div> <div id="RectangleEscargot"></div> <img id="visionHumain" src="visionHumain.png" alt="Vision Humain"> <img id="visionChat" src="visionChat.png" alt="Vision Chat"> <img id="visionChien" src="visionChien.png" alt="Vision Chien"> <img id="visionEscargot" src="visionEscargot.png" alt="Vision Escargot"> <img id="chat" src="chat.png" alt="Chat Image"> <img id="chien" src="chien.png" alt="Chien Image"> <img id="escargot" src="escargot.png" alt="Escargot Image"> <button id="valider-button" class="BoutonValider">Valider</button> <script> var chatDragging = false; var offset = { x: 0, y: 0 }; var chat = document.getElementById("chat"); chat.addEventListener("click", function (e) { if (chatDragging) { chatDragging = false; } else { chatDragging = true; offset.x = e.clientX - chat.getBoundingClientRect().left; offset.y = e.clientY - chat.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (chatDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; chat.style.left = x + "px"; chat.style.top = y + "px"; } }); var chienDragging = false; var offset = { x: 0, y: 0 }; var chien = document.getElementById("chien"); chien.addEventListener("click", function (e) { if (chienDragging) { chienDragging = false; } else { chienDragging = true; offset.x = e.clientX - chien.getBoundingClientRect().left; offset.y = e.clientY - chien.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (chienDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; chien.style.left = x + "px"; chien.style.top = y + "px"; } }); var escargotDragging = false; var offset = { x: 0, y: 0 }; var escargot = document.getElementById("escargot"); escargot.addEventListener("click", function (e) { if (escargotDragging) { escargotDragging = false; } else { escargotDragging = true; offset.x = e.clientX - escargot.getBoundingClientRect().left; offset.y = e.clientY - escargot.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (escargotDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; escargot.style.left = x + "px"; escargot.style.top = y + "px"; } }); document.getElementById("valider-button").addEventListener("click", function () { // Get the coordinates and dimensions of the rectangles and the images var rectangleChat = document.getElementById("RectangleChat").getBoundingClientRect(); var chatImage = document.getElementById("chat").getBoundingClientRect(); var rectangleChien = document.getElementById("RectangleChien").getBoundingClientRect(); var chienImage = document.getElementById("chien").getBoundingClientRect(); var rectangleEscargot = document.getElementById("RectangleEscargot").getBoundingClientRect(); var escargotImage = document.getElementById("escargot").getBoundingClientRect(); // Check if both chat and chien are inside their respective rectangles var chatInsideRectangle = ( chatImage.left >= rectangleChat.left && chatImage.right <= rectangleChat.right && chatImage.top >= rectangleChat.top && chatImage.bottom <= rectangleChat.bottom ); var chienInsideRectangle = ( chienImage.left >= rectangleChien.left && chienImage.right <= rectangleChien.right && chienImage.top >= rectangleChien.top && chienImage.bottom <= rectangleChien.bottom ); var escargotInsideRectangle = ( escargotImage.left >= rectangleEscargot.left && escargotImage.right <= rectangleEscargot.right && escargotImage.top >= rectangleEscargot.top && escargotImage.bottom <= rectangleEscargot.bottom ); if (chatInsideRectangle && chienInsideRectangle && escargotInsideRectangle) { GE.move("chien chat escargot");} else if (chatInsideRectangle && chienInsideRectangle) { GE.move("chien chat");} else if (chatInsideRectangle && escargotInsideRectangle) { GE.move("chat escargot");} else if (chienInsideRectangle && escargotInsideRectangle) { GE.move("chien escargot");} else if (chienInsideRectangle) { GE.move("chien");} else if (chatInsideRectangle) { GE.move("chat");} else if (escargotInsideRectangle) { GE.move("escargot");} else { GE.move("faux"); } }); </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <SchemaCerveau> <img src="cerveau.png" usemap="#cerveau" style="width: 900px"> </SchemaCerveau> <map name="cerveau"> <area data-passage="QCM" coords="435,141,549,23,723,14,849,96,850,243,734,332,762,377,725,384,668,311,493,264" shape="poly"></map> <Po> <img src="Po.png" alt="New Image" style="width: 360px"> </Po> <div class="text_po"><<type "15ms" skipkey "Tab">> Quand la lumière entre dans l'œil, la rétine la transforme en un message électrique grâce aux photorécepteurs. Ce message est transmis via le nerf optique qui va jusqu’au cerveau qui permet de former l’image que nous percevons. C’est le cerveau qui nous permet de voir ! Clique sur le cerveau pour tester tes connaissances ! <</type>></div>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"><area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Attention, voilà la première question. Donne tout ce que tu as ! <</type>></div> <div class="text_question"><<type "15ms" skipkey "Tab">>Qu'est-ce que la lumière ? <</type>></div> <button id="Bouton1" class="Bouton1"><<type "15ms" skipkey "Tab">>Une substance mystérieuse<</type>></button> <button id="Bouton2" class="Bouton2"><<type "15ms" skipkey "Tab">>Une onde électromagnétique<</type>></button> <button id="Bouton3" class="Bouton3"><<type "15ms" skipkey "Tab">>Un type de nourriture pour les plantes<</type>></button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("mauvaise reponse 1") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("question 2") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("mauvaise reponse 1") }); </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <map name="fleche"> <area data-passage="Composition de la lumière prt1 retour" coords="5,8,134,114" shape="rect" > </map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <SchemaComposition> <img src="Composition_lumiere_2.png" style="width: 840px;"> </SchemaComposition> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">>Nous voyons les trois <span id="definition-trigger" onmouseover="showPopup('Couleurs primaires en optique', 'Attention : il ne faut pas confondre les couleurs primaires en optique avec les couleurs primaires en peinture qui sont le rouge, le bleu, et le jaune. ');" onmouseout="hidePopup();"><u>couleurs primaires en optique</u></span> : le rouge, le vert, et le bleu. Si on additionne les lumières de ces trois couleurs, on obtient une lumière blanche. La lumière blanche peut être divisée en plusieurs couleurs, on utilise souvent un prisme pour le faire. On peut voir les 7 couleurs de l’arc-en-ciel : violet, indigo, bleu, vert, jaune, orange et rouge. @@#Link;[[Comment passe-t-on de la lumière blanche aux couleurs?|Propagation Début]]@@ <</type>></div> <script> var popup = null; function showPopup(title, text) { if (popup) return; popup = document.createElement("div"); popup.classList.add("popupComposition"); var popupTitle = document.createElement("h2"); popupTitle.textContent = title; var popupText = document.createElement("p"); popupText.textContent = text; popup.appendChild(popupTitle); popup.appendChild(popupText); document.body.appendChild(popup); } function hidePopup() { if (popup) { document.body.removeChild(popup); popup = null; } } </script>
<SchemaPropagation> <img src="obj_noir.png" usemap="#objet" style="width: 1050px;"> </SchemaPropagation> <map name="objet"> <area data-passage="obj_blanc" coords="503,324,603,435" shape="rect" > </map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Propagation Début retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <FlecheObjet> <img src="fleche3.png" style="width: 53px;"> </FlecheObjet> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">>Si l’objet est noir, la lumière est absorbée. L’objet absorbe toutes les couleurs de la lumière blanche et n’en renvoie aucune : c’est l’absorption. <</type>></div> <div class="text_flechePropagation"> Clique sur l'objet pour le faire changer de couleur </div>
<SchemaPropagation> <img src="obj_blanc.png" usemap="#objet" style="width: 1050px;"> </SchemaPropagation> <map name="objet"> <area data-passage="obj_bleu" coords="503,324,603,435" shape="rect" > </map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="obj_noir retour" coords="5,8,134,114" shape="rect" > </map> <FlecheObjet> <img src="fleche3.png" style="width: 53px;"> </FlecheObjet> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">>Si l’objet est blanc elle peut être déviée, toutes les couleurs de la lumière sont réflechies : c’est la réflexion <</type>></div> <div class="text_flechePropagation"> Clique sur l'objet pour le faire changer de couleur </div>
<SchemaBleu> <img src="obj_bleu.png" usemap="#objet" style="width: 857px"> </SchemaBleu> <map name="objet"> <area data-passage="Propagation Fin" coords="277,583,419,463,455,499,445,537,395,588,330,618,304,612" shape="poly" > </map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="obj_blanc retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <FlecheObjet> <img src="fleche3.png" style="width: 53px;"> </FlecheObjet> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Si la lumière atteint un objet, une partie de la lumière est absorbée, et l’autre est réfléchie. Une manette bleue absorbe toutes les couleurs de la lumière blanche, sauf le bleu qui est réfléchi et parvient à ton œil c’est pourquoi tu la vois bleue. <</type>></div> <div class="text_flechePropagation"> Clique sur l'objet pour le faire changer de couleur</div>
<!DOCTYPE html> <html> <head> <style> canvas { position: absolute; top: 0; left: 0; } </style> </head> <body> <canvas id="drawing-canvas"></canvas> <script> const canvas = document.getElementById('drawing-canvas'); const context = canvas.getContext('2d'); let isDrawing = true; canvas.width = window.innerWidth; canvas.height = window.innerHeight; context.fillStyle = 'black'; context.fillRect(0, 0, canvas.width, canvas.height); canvas.addEventListener('mousemove', draw); function draw(e) { if (!isDrawing) return; context.lineWidth = 500; context.strokeStyle = 'white'; context.lineCap = 'round'; context.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top); context.stroke(); context.beginPath(); context.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const pixelData = imageData.data; const isCanvasWhite = pixelData.every((value, index) => { if (index % 4 === 0 && pixelData[index] !== 255) return false; if (index % 4 === 1 && pixelData[index] !== 255) return false; if (index % 4 === 2 && pixelData[index] !== 255) return false; return true; }); if (isCanvasWhite) { GE.move("video intro"); } } canvas.addEventListener('mousedown', () => { isDrawing = true; }); // Adjust canvas size if the window is resized window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html> <<cacheaudio "son" "bande_son.mp3">> <<audio "son" volume 0.6 loop play>>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Vision et fonctionnement de l'oeil retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <Po> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po> <Retine> <img src="Retine.png" usemap="#retine" style="width: 900px"> </Retine> <map name="retine"> <area data-passage="Retine prt2" alt="Intro" title="Intro" coords="171,63,257,175" shape="rect" > </map> <div class="text_po"><<type "15ms" skipkey "Tab">> La rétine comporte des photorécepteurs. Il existe deux types de photorécepteurs : les cônes et les bâtonnets. Les cônes sont concentrés sur la macula (que l’on appelle tache jaune). Ils permettent de voir la journée ou quand la lumière est allumée. Ils permettent de voir les formes et la couleur des objets. Tu peux cliquer sur l'ampoule pour allumer la lumière. <</type>></div>
<style> .BoutonJouer { position: absolute; top: 560px; left: 520px; width: 400px; background-color: #FFCC00; color: black; border: 2px solid black; padding: 20px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 20px; font-weight: bold; font-size: 24px; } body { background-color: #111322; } </style> <img src="intro_fond.png" style="position: fixed; left: 30px; top: -50px; width: 1400px;"> <img src="logoblanc.png" style="position: fixed; left: 420px; top: 160px; width: 600px;"> <button id="BoutonJouer" class="BoutonJouer">Jouer</button> <script> document.getElementById("BoutonJouer").addEventListener("click", function () { GE.move("canva") }); </script>
<SchemaPropagation> <img src="obj_transparent.png" usemap="#objet" style="width: 1050px;"> </SchemaPropagation><map name="objet"> <area data-passage="obj_noir" coords="503,324,603,435" shape="rect"> <area data-passage="Vision et fonctionnement de l'oeil" coords="810,341,909,423" shape="rect"></map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="obj_bleu retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"><area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <FlecheDiffraction><img src="fleche1.png" style="width: 75px"></FlecheDiffraction> <FlecheOeil><img src="fleche2.png" style="width: 53px;"></FlecheOeil> <Goutte> <img src="goutte.png" usemap="#goutte" style="width: 6%; height: 6%;"> </Goutte> <map name="goutte"> <area data-passage="Phénomènes dus à la diffraction" coords="0,16,820,1288" shape="rect"></map> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Comme toute onde, elle se déplace donc dans l’espace, à la vitesse de 300 000 km/s, c’est comme si on faisait 7,5 fois le tour de la Terre en une seconde. Elle se propage en ligne droite. Quand elle rencontre un objet plusieurs phénomènes sont possibles. Si la lumière atteint un objet, une partie de la lumière est absorbée, et l’autre est réfléchie. Si l’objet est totalement transparent, elle passe en ligne droite : c’est la transmission <</type>></div> <div class="text_flecheOeil"> Clique sur l'oeil pour passer à la suite</div> <div class="text_flecheDiffraction"> Clique sur la goutte d'eau pour découvrir le phénomène de réfraction</div>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect" > </map> <style> #chien { position: fixed; top: 46.8px; left: 114.88px; height: 163px; } #chat { position: fixed; top: 46.8px; left: 689.28px; height: 163px; } #escargot { position: fixed; top: 46.8px; left: 387.72px; height: 163px; } #RectangleChien { position: fixed; border: 2px solid black; background-color: transparent; left: 50.26px; width: 294px; top: 444.6px; height: 233px; } #RectangleChat { position: fixed; border: 2px solid black; background-color: transparent; left: 359px; width: 289px; top: 444.6px; height: 233px; } #RectangleEscargot { position: fixed; border: 2px solid black; background-color: transparent; left: 663.432px; width: 286px; top: 444.6px; height: 233px; } #visionHumain{ position: fixed; top: 390px; left: 1025.304px; height: 171.6px; border: 2px solid black; } #visionChien{ position: fixed; top: 273px; left: 50.26px; height: 156px; border: 2px solid black; } #visionChat{ position: fixed; top: 273px; left: 359px; height: 156px; border: 2px solid black; } #visionEscargot{ position: fixed; top: 273px; left: 663.432px; height: 156px; border: 2px solid black; } .BoutonValider { position: fixed; top : 702px; left: 50.26px; width: 903.244px; background-color: darkred; color: black; border: 2px solid black; padding: 10px 20px; cursor: pointer; }} </style> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Aucune réponse n'est correcte, réessaie ! Voilà comment un humain verrait une rue : <</type>></div> <div id="RectangleChat"></div> <div id="RectangleChien"></div> <div id="RectangleEscargot"></div> <img id="visionHumain" src="visionHumain.png" alt="Vision Humain"> <img id="visionChat" src="visionChat.png" alt="Vision Chat"> <img id="visionChien" src="visionChien.png" alt="Vision Chien"> <img id="visionEscargot" src="visionEscargot.png" alt="Vision Escargot"> <img id="chat" src="chat.png" alt="Chat Image"> <img id="chien" src="chien.png" alt="Chien Image"> <img id="escargot" src="escargot.png" alt="Escargot Image"> <button id="valider-button" class="BoutonValider">Valider</button> <script> var chatDragging = false; var offset = { x: 0, y: 0 }; var chat = document.getElementById("chat"); chat.addEventListener("click", function (e) { if (chatDragging) { chatDragging = false; } else { chatDragging = true; offset.x = e.clientX - chat.getBoundingClientRect().left; offset.y = e.clientY - chat.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (chatDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; chat.style.left = x + "px"; chat.style.top = y + "px"; } }); var chienDragging = false; var offset = { x: 0, y: 0 }; var chien = document.getElementById("chien"); chien.addEventListener("click", function (e) { if (chienDragging) { chienDragging = false; } else { chienDragging = true; offset.x = e.clientX - chien.getBoundingClientRect().left; offset.y = e.clientY - chien.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (chienDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; chien.style.left = x + "px"; chien.style.top = y + "px"; } }); var escargotDragging = false; var offset = { x: 0, y: 0 }; var escargot = document.getElementById("escargot"); escargot.addEventListener("click", function (e) { if (escargotDragging) { escargotDragging = false; } else { escargotDragging = true; offset.x = e.clientX - escargot.getBoundingClientRect().left; offset.y = e.clientY - escargot.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (escargotDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; escargot.style.left = x + "px"; escargot.style.top = y + "px"; } }); document.getElementById("valider-button").addEventListener("click", function () { // Get the coordinates and dimensions of the rectangles and the images var rectangleChat = document.getElementById("RectangleChat").getBoundingClientRect(); var chatImage = document.getElementById("chat").getBoundingClientRect(); var rectangleChien = document.getElementById("RectangleChien").getBoundingClientRect(); var chienImage = document.getElementById("chien").getBoundingClientRect(); var rectangleEscargot = document.getElementById("RectangleEscargot").getBoundingClientRect(); var escargotImage = document.getElementById("escargot").getBoundingClientRect(); // Check if both chat and chien are inside their respective rectangles var chatInsideRectangle = ( chatImage.left >= rectangleChat.left && chatImage.right <= rectangleChat.right && chatImage.top >= rectangleChat.top && chatImage.bottom <= rectangleChat.bottom ); var chienInsideRectangle = ( chienImage.left >= rectangleChien.left && chienImage.right <= rectangleChien.right && chienImage.top >= rectangleChien.top && chienImage.bottom <= rectangleChien.bottom ); var escargotInsideRectangle = ( escargotImage.left >= rectangleEscargot.left && escargotImage.right <= rectangleEscargot.right && escargotImage.top >= rectangleEscargot.top && escargotImage.bottom <= rectangleEscargot.bottom ); if (chatInsideRectangle && chienInsideRectangle && escargotInsideRectangle) { GE.move("chien chat escargot");} else if (chatInsideRectangle && chienInsideRectangle) { GE.move("chien chat");} else if (chatInsideRectangle && escargotInsideRectangle) { GE.move("chat escargot");} else if (chienInsideRectangle && escargotInsideRectangle) { GE.move("chien escargot");} else if (chienInsideRectangle) { GE.move("chien");} else if (chatInsideRectangle) { GE.move("chat");} else if (escargotInsideRectangle) { GE.move("escargot");} else { GE.move("faux"); } }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Mauvaise réponse, réessaie ! Tu peux retourner en arrière si tu as un doute. <</type>></div> <div class="text_question">Qu'est-ce que la lumière ?</div> <button id="Bouton1" class="Bouton1">Une substance mystérieuse</button> <button id="Bouton2" class="Bouton2">Une onde électromagnétique</button> <button id="Bouton3" class="Bouton3">Un type de nourriture pour les plantes</button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("mauvaise reponse 1") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("question 2") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("mauvaise reponse 1") }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Bravo ! Voilà la question suivante : <</type>></div> <div class="text_question"><<type "15ms" skipkey "Tab">>Comment se propage la lumière ? <</type>></div> <button id="Bouton1" class="Bouton1"><<type "15ms" skipkey "Tab">>Elle se propage en zigzag<</type>></button> <button id="Bouton2" class="Bouton2"><<type "15ms" skipkey "Tab">>Elle ne se propage pas<</type>></button> <button id="Bouton3" class="Bouton3"><<type "15ms" skipkey "Tab">>Elle se propage en ligne droite<</type>></button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("mauvaise reponse 2") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("mauvaise reponse 2") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("question 3") }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"> </map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Mauvaise réponse, réessaie ! Tu peux retourner en arrière si tu as un doute. <</type>></div> <div class="text_question">Comment se propage la lumière ?</div> <button id="Bouton1" class="Bouton1">Elle se propage en zigzag</button> <button id="Bouton2" class="Bouton2">Elle ne se propage pas</button> <button id="Bouton3" class="Bouton3">Elle se propage en ligne droite</button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("mauvaise reponse 2") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("mauvaise reponse 2") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("question 3") }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Bravo ! Voilà la question suivante : <</type>></div> <div class="text_question"><<type "15ms" skipkey "Tab">>Comment la lumière nous permet-elle de voir les objets ? <</type>></div> <button id="Bouton1" class="Bouton1"><<type "15ms" skipkey "Tab">>Les objets émettent leur propre lumière<</type>></button> <button id="Bouton2" class="Bouton2"><<type "15ms" skipkey "Tab">>La lumière rebondit sur les objets, ce qui nous permet de les voir<</type>></button> <button id="Bouton3" class="Bouton3"><<type "15ms" skipkey "Tab">>Les objets deviennent invisibles en présence de lumière<</type>></button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("mauvaise reponse 3") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("question 4") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("mauvaise reponse 3") }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Mauvaise réponse, réessaie ! Tu peux retourner en arrière si tu as un doute. <</type>></div> <div class="text_question">Comment la lumière nous permet-elle de voir les objets ?</div> <button id="Bouton1" class="Bouton1">Les objets émettent leur propre lumière</button> <button id="Bouton2" class="Bouton2">La lumière rebondit sur les objets, ce qui nous permet de les voir</button> <button id="Bouton3" class="Bouton3">Les objets deviennent invisibles en présence de lumière</button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("mauvaise reponse 3") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("question 4") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("mauvaise reponse 3") }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Bravo ! Voilà la question suivante : <</type>></div> <div class="text_question"><<type "15ms" skipkey "Tab">>Qu'est-ce que la réflexion de la lumière ? <</type>></div> <button id="Bouton1" class="Bouton1"><<type "15ms" skipkey "Tab">>Quand la lumière rebondit sur une surface<</type>></button> <button id="Bouton2" class="Bouton2"><<type "15ms" skipkey "Tab">>Quand la lumière disparaît<</type>></button> <button id="Bouton3" class="Bouton3"><<type "15ms" skipkey "Tab">>Quand la lumière change de couleur<</type>></button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("question 5") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("mauvaise reponse 4") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("mauvaise reponse 4") }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Mauvaise réponse, réessaie ! Tu peux retourner en arrière si tu as un doute. <</type>></div> <div class="text_question">Qu'est-ce que la réflexion de la lumière ?</div> <button id="Bouton1" class="Bouton1">Quand la lumière rebondit sur une surface</button> <button id="Bouton2" class="Bouton2">Quand la lumière disparaît</button> <button id="Bouton3" class="Bouton3">Quand la lumière change de couleur</button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("question 5") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("mauvaise reponse 4") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("mauvaise reponse 4") }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Bravo ! Voilà la question suivante : <</type>></div> <div class="text_question"><<type "15ms" skipkey "Tab">>Quelles couleurs les photorécepteurs nous permettent-ils de voir ? <</type>></div> <button id="Bouton1" class="Bouton1"><<type "15ms" skipkey "Tab">>Noir, jaune et bleu<</type>></button> <button id="Bouton2" class="Bouton2"><<type "15ms" skipkey "Tab">>Rouge, jaune et bleu<</type>></button> <button id="Bouton3" class="Bouton3"><<type "15ms" skipkey "Tab">>Rouge, vert et bleu<</type>></button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("mauvaise reponse 5") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("mauvaise reponse 5") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("question 6") }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Mauvaise réponse, réessaie ! Tu peux retourner en arrière si tu as un doute. <</type>></div> <div class="text_question">Quelles couleurs les photorécepteurs nous permettent-ils de voir ?</div> <button id="Bouton1" class="Bouton1">Noir, jaune et bleu</button> <button id="Bouton2" class="Bouton2">Rouge, jaune et bleu</button> <button id="Bouton3" class="Bouton3">Rouge, vert et bleu</button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("mauvaise reponse 5") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("mauvaise reponse 5") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("question 6") }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Bravo ! Voilà la question suivante : <</type>></div> <div class="text_question"><<type "15ms" skipkey "Tab">>Quel est l’organe le plus important de la vision ? <</type>></div> <button id="Bouton1" class="Bouton1"><<type "15ms" skipkey "Tab">>L’oeil<</type>></button> <button id="Bouton2" class="Bouton2"><<type "15ms" skipkey "Tab">>Les poumons<</type>></button> <button id="Bouton3" class="Bouton3"><<type "15ms" skipkey "Tab">>Le cerveau<</type>></button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("mauvaise reponse 6") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("mauvaise reponse 6") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("fin") }); </script>
<style> .Bouton1 { position: fixed; top : 413.4px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 507px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 600.6px; left: 244.12px; width: 861.6px; background-color: white; color: black; border: solid black; padding: 20px 20px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <Lampeon> <img src="lampeon.png" style="width: 220px;"> </Lampeon> <div class="text_po4"><<type "15ms" skipkey "Tab">>Mauvaise réponse, réessaie ! Tu peux retourner en arrière si tu as un doute. <</type>></div> <div class="text_question">Quel est l’organe le plus important de la vision ?</div> <button id="Bouton1" class="Bouton1">L’oeil</button> <button id="Bouton2" class="Bouton2">Les poumons</button> <button id="Bouton3" class="Bouton3">Le cerveau</button> <script> document.getElementById("Bouton1").addEventListener("click", function () { GE.move("mauvaise reponse 6") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("mauvaise reponse 6") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("fin") }); </script>
<QCM> <img src="conclusion.png" style="width: 100%; height: 100%;"> </QCM> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <PoFin> <img src="Po.png" style="width: 430px;"> </PoFin> <LampeonFin> <img src="lampeon.png" style="width: 220px;"> </LampeonFin> <InterrupteurOn> <img src="interrupteurOn.png" usemap="#interrupteur" style="width: 170px;"> </InterrupteurOn> <map name="interrupteur"> <area data-passage="ecran noir" coords="115,36,59,86,59,124,92,122,135,67,136,34" shape="poly"></map> <div class="text_poFin"><<type "15ms" skipkey "Tab">>Bonne réponse ! Merci de m'avoir suivi dans cette superbe aventure. Tu en sais maintenant un peu plus sur la lumière. N'oublie pas d’éteindre la lumière avant de partir ! <</type>></div> <<timed 20s>> <script> GE.move("versailles"); </script> <</timed>>
<style> body { background-color: #111322; } .BoutonJouer { position: absolute; top: 500px; left: 450px; width: 300px; background-color: #FFCC00; color: black; border: 1.5px solid black; padding: 20px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 20px; font-weight: bold; line-height: 1.5; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="fin retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <PoFin> <img src="Po.png" style="width: 43%; height: 43%;"> </PoFin> <LampeonFin> <img src="lampeoff.png" style="width: 220px;"> </LampeonFin> <InterrupteurOn> <img src="interrupteurOff.png" usemap="#interrupteur" style="width: 170px;"> </InterrupteurOn> <map name="interrupteur"> <area data-passage="jouer" coords="67,102,12,168,14,193,42,193,135,106" shape="poly"></map> <button id="BoutonJouer" class="BoutonJouer">Rejouer</button> <script> document.getElementById("BoutonJouer").addEventListener("click", function () { GE.move("jouer") }); </script>
<QCM> <img src="QCM.png" style="width: 100%;"> </QCM> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Cerveau et perception retour" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <PoQCM> <img src="poQCM.png" style="width: 440px;"> </PoQCM> <div class="text_poQCM"><<type "15ms" skipkey "Tab">> Tu es arrivé à la fin du parcours, bravo ! Quelques questions t'attendent maintenant pour montrer que tu as tout compris. Tu peux revenir en arrière si tu veux chercher des informations. Tu peux aussi aller au sommaire, en cliquant sur le livre, pour revoir un passage en particulier. Bonne chance ! <</type>></div> <style> .BoutonJouer { position: absolute; top: 234px; left: 904.68px; height: 273px; width: 287.2px; background-color: #FFCC00; color: black; border: 2px solid black; padding: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 180px; font-weight: bold; font-size: 24px; } </style> <button id="BoutonJouer" class="BoutonJouer">Question 1</button> <script> document.getElementById("BoutonJouer").addEventListener("click", function () { GE.move("question 1") }); </script>
<style> .text_po_vision { position: fixed; left: 402.08px; right: calc(100vw - 1436px + 143.6px); top: 600px; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; text-align: left; background: lightgrey; border-width: thick; border: 1.5px solid; border-color: black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 1; color: black; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Pourquoi porter des lunettes ? retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <SchemaMyopie> <img src="myopie.png" style="width: 630px"> </SchemaMyopie> <SchemaEmetropie> <img src="emetropie.png"> </SchemaEmetropie> <Po> <img src="polunettes.png" alt="New Image" style="width: 360px;"> </Po> <div class="text_po_vision"><<type "15ms" skipkey "Tab">> Dans la vision normale, l'image de l'objet se forme sur la rétine. Pour une personne myope, il se forme avant la rétine. L'objet est donc flou. <</type>></div>
<style> .text_po_vision { position: fixed; left: 402.08px; right: calc(100vw - 1436px + 143.6px); top: 580px; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; text-align: left; background: lightgrey; border-width: thick; border: 1.5px solid; border-color: black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 1; color: black; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Pourquoi porter des lunettes ? retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <SchemaMyopie> <img src="astigmatie.png" style="width: 460px;"> </SchemaMyopie> <SchemaEmetropie> <img src="emetropie.png" style="width: 710px;"> </SchemaEmetropie> <Po> <img src="polunettes.png" alt="New Image" style="width: 360px;"> </Po> <div class="text_po_vision"><<type "15ms" skipkey "Tab">> Dans la vision normale, l'image de l'objet se forme sur la rétine. Pour une personne astigmate, l'image se forme plusieurs fois dans l'oeil. L'objet est dédoublé. Cela est dû à la rétine qui à une forme de ballon de rugby. <</type>></div>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect" > </map> <style> #chien { position: fixed; top: 475.8px; left: 114.88px; height: 163px; } #chat { position: fixed; top: 46.8px; left: 689.28px; height: 163px; } #escargot { position: fixed; top: 46.8px; left: 387.72px; height: 163px; } #RectangleChien { position: fixed; border: 2px solid black; background-color: transparent; left: 50.26px; width: 294px; top: 444.6px; height: 233px; } #RectangleChat { position: fixed; border: 2px solid black; background-color: transparent; left: 359px; width: 289px; top: 444.6px; height: 233px; } #RectangleEscargot { position: fixed; border: 2px solid black; background-color: transparent; left: 663.432px; width: 286px; top: 444.6px; height: 233px; } #visionHumain{ position: fixed; top: 390px; left: 1025.304px; height: 171.6px; border: 2px solid black; } #visionChien{ position: fixed; top: 273px; left: 50.26px; height: 156px; border: 2px solid black; } #visionChat{ position: fixed; top: 273px; left: 359px; height: 156px; border: 2px solid black; } #visionEscargot{ position: fixed; top: 273px; left: 663.432px; height: 156px; border: 2px solid black; } .BoutonValider { position: fixed; top : 702px; left: 50.26px; width: 903.244px; background-color: darkred; color: black; border: 2px solid black; padding: 10px 20px; cursor: pointer; }} </style> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Tu as trouvé comment voit le chien. Peux-tu retrouver les autres ? Voilà comment un humain verrait une rue : Glisse chaque animal dans le rectangle correspondant à sa vision, puis appuie sur valider pour confirmer ta réponse ! <</type>></div> <div id="RectangleChat"></div> <div id="RectangleChien"></div> <div id="RectangleEscargot"></div> <img id="visionHumain" src="visionHumain.png" alt="Vision Humain"> <img id="visionChat" src="visionChat.png" alt="Vision Chat"> <img id="visionChien" src="visionChien.png" alt="Vision Chien"> <img id="visionEscargot" src="visionEscargot.png" alt="Vision Escargot"> <img id="chat" src="chat.png" alt="Chat Image"> <img id="chien" src="chien.png" alt="Chien Image"> <img id="escargot" src="escargot.png" alt="Escargot Image"> <button id="valider-button" class="BoutonValider">Valider</button> <script> var chatDragging = false; var offset = { x: 0, y: 0 }; var chat = document.getElementById("chat"); chat.addEventListener("click", function (e) { if (chatDragging) { chatDragging = false; } else { chatDragging = true; offset.x = e.clientX - chat.getBoundingClientRect().left; offset.y = e.clientY - chat.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (chatDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; chat.style.left = x + "px"; chat.style.top = y + "px"; } }); var escargotDragging = false; var offset = { x: 0, y: 0 }; var escargot = document.getElementById("escargot"); escargot.addEventListener("click", function (e) { if (escargotDragging) { escargotDragging = false; } else { escargotDragging = true; offset.x = e.clientX - escargot.getBoundingClientRect().left; offset.y = e.clientY - escargot.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (escargotDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; escargot.style.left = x + "px"; escargot.style.top = y + "px"; } }); document.getElementById("valider-button").addEventListener("click", function () { // Get the coordinates and dimensions of the rectangles and the images var rectangleChat = document.getElementById("RectangleChat").getBoundingClientRect(); var chatImage = document.getElementById("chat").getBoundingClientRect(); var rectangleChien = document.getElementById("RectangleChien").getBoundingClientRect(); var chienImage = document.getElementById("chien").getBoundingClientRect(); var rectangleEscargot = document.getElementById("RectangleEscargot").getBoundingClientRect(); var escargotImage = document.getElementById("escargot").getBoundingClientRect(); // Check if both chat and chien are inside their respective rectangles var chatInsideRectangle = ( chatImage.left >= rectangleChat.left && chatImage.right <= rectangleChat.right && chatImage.top >= rectangleChat.top && chatImage.bottom <= rectangleChat.bottom ); var chienInsideRectangle = ( chienImage.left >= rectangleChien.left && chienImage.right <= rectangleChien.right && chienImage.top >= rectangleChien.top && chienImage.bottom <= rectangleChien.bottom ); var escargotInsideRectangle = ( escargotImage.left >= rectangleEscargot.left && escargotImage.right <= rectangleEscargot.right && escargotImage.top >= rectangleEscargot.top && escargotImage.bottom <= rectangleEscargot.bottom ); if (chatInsideRectangle && chienInsideRectangle && escargotInsideRectangle) { GE.move("chien chat escargot");} else if (chatInsideRectangle && chienInsideRectangle) { GE.move("chien chat");} else if (chatInsideRectangle && escargotInsideRectangle) { GE.move("chat escargot");} else if (chienInsideRectangle && escargotInsideRectangle) { GE.move("chien escargot");} else if (chienInsideRectangle) { GE.move("chien");} else if (chatInsideRectangle) { GE.move("chat");} else if (escargotInsideRectangle) { GE.move("escargot");} else { GE.move("faux"); } }); </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect" > </map> <style> #chien { position: fixed; top: 46.8px; left: 114.88px; height: 163px; } #chat { position: fixed; top: 475.8px; left: 387.72px; height: 163px; } #escargot { position: fixed; top: 46.8px; left: 387.72px; height: 163px; } #RectangleChien { position: fixed; border: 2px solid black; background-color: transparent; left: 50.26px; width: 294px; top: 444.6px; height: 233px; } #RectangleChat { position: fixed; border: 2px solid black; background-color: transparent; left: 359px; width: 289px; top: 444.6px; height: 233px; } #RectangleEscargot { position: fixed; border: 2px solid black; background-color: transparent; left: 663.432px; width: 286px; top: 444.6px; height: 233px; } #visionHumain{ position: fixed; top: 390px; left: 1025.304px; height: 171.6px; border: 2px solid black; } #visionChien{ position: fixed; top: 273px; left: 50.26px; height: 156px; border: 2px solid black; } #visionChat{ position: fixed; top: 273px; left: 359px; height: 156px; border: 2px solid black; } #visionEscargot{ position: fixed; top: 273px; left: 663.432px; height: 156px; border: 2px solid black; } .BoutonValider { position: fixed; top : 702px; left: 50.26px; width: 903.244px; background-color: darkred; color: black; border: 2px solid black; padding: 10px 20px; cursor: pointer; }} </style> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Tu as trouvé comment voit le chat. Peux-tu retrouver les autres ? Voilà comment un humain verrait une rue : Glisse chaque animal dans le rectangle correspondant à sa vision, puis appuie sur valider pour confirmer ta réponse ! <</type>></div> <div id="RectangleChat"></div> <div id="RectangleChien"></div> <div id="RectangleEscargot"></div> <img id="visionHumain" src="visionHumain.png" alt="Vision Humain"> <img id="visionChat" src="visionChat.png" alt="Vision Chat"> <img id="visionChien" src="visionChien.png" alt="Vision Chien"> <img id="visionEscargot" src="visionEscargot.png" alt="Vision Escargot"> <img id="chat" src="chat.png" alt="Chat Image"> <img id="chien" src="chien.png" alt="Chien Image"> <img id="escargot" src="escargot.png" alt="Escargot Image"> <button id="valider-button" class="BoutonValider">Valider</button> <script> var chienDragging = false; var offset = { x: 0, y: 0 }; var chien = document.getElementById("chien"); chien.addEventListener("click", function (e) { if (chienDragging) { chienDragging = false; } else { chienDragging = true; offset.x = e.clientX - chien.getBoundingClientRect().left; offset.y = e.clientY - chien.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (chienDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; chien.style.left = x + "px"; chien.style.top = y + "px"; } }); var escargotDragging = false; var offset = { x: 0, y: 0 }; var escargot = document.getElementById("escargot"); escargot.addEventListener("click", function (e) { if (escargotDragging) { escargotDragging = false; } else { escargotDragging = true; offset.x = e.clientX - escargot.getBoundingClientRect().left; offset.y = e.clientY - escargot.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (escargotDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; escargot.style.left = x + "px"; escargot.style.top = y + "px"; } }); document.getElementById("valider-button").addEventListener("click", function () { // Get the coordinates and dimensions of the rectangles and the images var rectangleChat = document.getElementById("RectangleChat").getBoundingClientRect(); var chatImage = document.getElementById("chat").getBoundingClientRect(); var rectangleChien = document.getElementById("RectangleChien").getBoundingClientRect(); var chienImage = document.getElementById("chien").getBoundingClientRect(); var rectangleEscargot = document.getElementById("RectangleEscargot").getBoundingClientRect(); var escargotImage = document.getElementById("escargot").getBoundingClientRect(); // Check if both chat and chien are inside their respective rectangles var chatInsideRectangle = ( chatImage.left >= rectangleChat.left && chatImage.right <= rectangleChat.right && chatImage.top >= rectangleChat.top && chatImage.bottom <= rectangleChat.bottom ); var chienInsideRectangle = ( chienImage.left >= rectangleChien.left && chienImage.right <= rectangleChien.right && chienImage.top >= rectangleChien.top && chienImage.bottom <= rectangleChien.bottom ); var escargotInsideRectangle = ( escargotImage.left >= rectangleEscargot.left && escargotImage.right <= rectangleEscargot.right && escargotImage.top >= rectangleEscargot.top && escargotImage.bottom <= rectangleEscargot.bottom ); if (chatInsideRectangle && chienInsideRectangle && escargotInsideRectangle) { GE.move("chien chat escargot");} else if (chatInsideRectangle && chienInsideRectangle) { GE.move("chien chat");} else if (chatInsideRectangle && escargotInsideRectangle) { GE.move("chat escargot");} else if (chienInsideRectangle && escargotInsideRectangle) { GE.move("chien escargot");} else if (chienInsideRectangle) { GE.move("chien");} else if (chatInsideRectangle) { GE.move("chat");} else if (escargotInsideRectangle) { GE.move("escargot");} else { GE.move("faux"); } }); </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect" > </map> <style> #chien { position: fixed; top: 46.8px; left: 114.88px; height: 163px; } #chat { position: fixed; top: 46.8px; left: 689.28px; height: 163px; } #escargot { position: fixed; top: 475.8px; left: 689.28px; height: 163px; } #RectangleChien { position: fixed; border: 2px solid black; background-color: transparent; left: 50.26px; width: 294px; top: 444.6px; height: 233px; } #RectangleChat { position: fixed; border: 2px solid black; background-color: transparent; left: 359px; width: 289px; top: 444.6px; height: 233px; } #RectangleEscargot { position: fixed; border: 2px solid black; background-color: transparent; left: 663.432px; width: 286px; top: 444.6px; height: 233px; } #visionHumain{ position: fixed; top: 390px; left: 1025.304px; height: 171.6px; border: 2px solid black; } #visionChien{ position: fixed; top: 273px; left: 50.26px; height: 156px; border: 2px solid black; } #visionChat{ position: fixed; top: 273px; left: 359px; height: 156px; border: 2px solid black; } #visionEscargot{ position: fixed; top: 273px; left: 663.432px; height: 156px; border: 2px solid black; } .BoutonValider { position: fixed; top : 702px; left: 50.26px; width: 903.244px; background-color: darkred; color: black; border: 2px solid black; padding: 10px 20px; cursor: pointer; }} </style> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Tu as trouvé comment voit l'escargot. Peux-tu retrouver les autres ? Voilà comment un humain verrait une rue : Glisse chaque animal dans le rectangle correspondant à sa vision, puis appuie sur valider pour confirmer ta réponse ! <</type>></div> <div id="RectangleChat"></div> <div id="RectangleChien"></div> <div id="RectangleEscargot"></div> <img id="visionHumain" src="visionHumain.png" alt="Vision Humain"> <img id="visionChat" src="visionChat.png" alt="Vision Chat"> <img id="visionChien" src="visionChien.png" alt="Vision Chien"> <img id="visionEscargot" src="visionEscargot.png" alt="Vision Escargot"> <img id="chat" src="chat.png" alt="Chat Image"> <img id="chien" src="chien.png" alt="Chien Image"> <img id="escargot" src="escargot.png" alt="Escargot Image"> <button id="valider-button" class="BoutonValider">Valider</button> <script> var chatDragging = false; var offset = { x: 0, y: 0 }; var chat = document.getElementById("chat"); chat.addEventListener("click", function (e) { if (chatDragging) { chatDragging = false; } else { chatDragging = true; offset.x = e.clientX - chat.getBoundingClientRect().left; offset.y = e.clientY - chat.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (chatDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; chat.style.left = x + "px"; chat.style.top = y + "px"; } }); var chienDragging = false; var offset = { x: 0, y: 0 }; var chien = document.getElementById("chien"); chien.addEventListener("click", function (e) { if (chienDragging) { chienDragging = false; } else { chienDragging = true; offset.x = e.clientX - chien.getBoundingClientRect().left; offset.y = e.clientY - chien.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (chienDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; chien.style.left = x + "px"; chien.style.top = y + "px"; } }); document.getElementById("valider-button").addEventListener("click", function () { // Get the coordinates and dimensions of the rectangles and the images var rectangleChat = document.getElementById("RectangleChat").getBoundingClientRect(); var chatImage = document.getElementById("chat").getBoundingClientRect(); var rectangleChien = document.getElementById("RectangleChien").getBoundingClientRect(); var chienImage = document.getElementById("chien").getBoundingClientRect(); var rectangleEscargot = document.getElementById("RectangleEscargot").getBoundingClientRect(); var escargotImage = document.getElementById("escargot").getBoundingClientRect(); // Check if both chat and chien are inside their respective rectangles var chatInsideRectangle = ( chatImage.left >= rectangleChat.left && chatImage.right <= rectangleChat.right && chatImage.top >= rectangleChat.top && chatImage.bottom <= rectangleChat.bottom ); var chienInsideRectangle = ( chienImage.left >= rectangleChien.left && chienImage.right <= rectangleChien.right && chienImage.top >= rectangleChien.top && chienImage.bottom <= rectangleChien.bottom ); var escargotInsideRectangle = ( escargotImage.left >= rectangleEscargot.left && escargotImage.right <= rectangleEscargot.right && escargotImage.top >= rectangleEscargot.top && escargotImage.bottom <= rectangleEscargot.bottom ); if (chatInsideRectangle && chienInsideRectangle && escargotInsideRectangle) { GE.move("chien chat escargot");} else if (chatInsideRectangle && chienInsideRectangle) { GE.move("chien chat");} else if (chatInsideRectangle && escargotInsideRectangle) { GE.move("chat escargot");} else if (chienInsideRectangle && escargotInsideRectangle) { GE.move("chien escargot");} else if (chienInsideRectangle) { GE.move("chien");} else if (chatInsideRectangle) { GE.move("chat");} else if (escargotInsideRectangle) { GE.move("escargot");} else { GE.move("faux"); } }); </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect" > </map> <style> #chien { position: fixed; top: 475.8px; left: 114.88px; height: 163px; } #chat { position: fixed; top: 475.8px; left: 387.72px; height: 163px; } #escargot { position: fixed; top: 46.8px; left: 387.72px; height: 163px; } #RectangleChien { position: fixed; border: 2px solid black; background-color: transparent; left: 50.26px; width: 294px; top: 444.6px; height: 233px; } #RectangleChat { position: fixed; border: 2px solid black; background-color: transparent; left: 359px; width: 289px; top: 444.6px; height: 233px; } #RectangleEscargot { position: fixed; border: 2px solid black; background-color: transparent; left: 663.432px; width: 286px; top: 444.6px; height: 233px; } #visionHumain{ position: fixed; top: 390px; left: 1025.304px; height: 171.6px; border: 2px solid black; } #visionChien{ position: fixed; top: 273px; left: 50.26px; height: 156px; border: 2px solid black; } #visionChat{ position: fixed; top: 273px; left: 359px; height: 156px; border: 2px solid black; } #visionEscargot{ position: fixed; top: 273px; left: 663.432px; height: 156px; border: 2px solid black; } .BoutonValider { position: fixed; top : 702px; left: 50.26px; width: 903.244px; background-color: darkred; color: black; border: 2px solid black; padding: 10px 20px; cursor: pointer; }} </style> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Tu as trouvé comment voient le chat et le chien. Il ne te reste qu'à placer l'escargot ! Voilà comment un humain verrait une rue : Glisse chaque animal dans le rectangle correspondant à sa vision, puis appuie sur valider pour confirmer ta réponse ! <</type>></div> <div id="RectangleChat"></div> <div id="RectangleChien"></div> <div id="RectangleEscargot"></div> <img id="visionHumain" src="visionHumain.png" alt="Vision Humain"> <img id="visionChat" src="visionChat.png" alt="Vision Chat"> <img id="visionChien" src="visionChien.png" alt="Vision Chien"> <img id="visionEscargot" src="visionEscargot.png" alt="Vision Escargot"> <img id="chat" src="chat.png" alt="Chat Image"> <img id="chien" src="chien.png" alt="Chien Image"> <img id="escargot" src="escargot.png" alt="Escargot Image"> <button id="valider-button" class="BoutonValider">Valider</button> <script> var escargotDragging = false; var offset = { x: 0, y: 0 }; var escargot = document.getElementById("escargot"); escargot.addEventListener("click", function (e) { if (escargotDragging) { escargotDragging = false; } else { escargotDragging = true; offset.x = e.clientX - escargot.getBoundingClientRect().left; offset.y = e.clientY - escargot.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (escargotDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; escargot.style.left = x + "px"; escargot.style.top = y + "px"; } }); document.getElementById("valider-button").addEventListener("click", function () { // Get the coordinates and dimensions of the rectangles and the images var rectangleChat = document.getElementById("RectangleChat").getBoundingClientRect(); var chatImage = document.getElementById("chat").getBoundingClientRect(); var rectangleChien = document.getElementById("RectangleChien").getBoundingClientRect(); var chienImage = document.getElementById("chien").getBoundingClientRect(); var rectangleEscargot = document.getElementById("RectangleEscargot").getBoundingClientRect(); var escargotImage = document.getElementById("escargot").getBoundingClientRect(); // Check if both chat and chien are inside their respective rectangles var chatInsideRectangle = ( chatImage.left >= rectangleChat.left && chatImage.right <= rectangleChat.right && chatImage.top >= rectangleChat.top && chatImage.bottom <= rectangleChat.bottom ); var chienInsideRectangle = ( chienImage.left >= rectangleChien.left && chienImage.right <= rectangleChien.right && chienImage.top >= rectangleChien.top && chienImage.bottom <= rectangleChien.bottom ); var escargotInsideRectangle = ( escargotImage.left >= rectangleEscargot.left && escargotImage.right <= rectangleEscargot.right && escargotImage.top >= rectangleEscargot.top && escargotImage.bottom <= rectangleEscargot.bottom ); if (chatInsideRectangle && chienInsideRectangle && escargotInsideRectangle) { GE.move("chien chat escargot");} else if (chatInsideRectangle && chienInsideRectangle) { GE.move("chien chat");} else if (chatInsideRectangle && escargotInsideRectangle) { GE.move("chat escargot");} else if (chienInsideRectangle && escargotInsideRectangle) { GE.move("chien escargot");} else if (chienInsideRectangle) { GE.move("chien");} else if (chatInsideRectangle) { GE.move("chat");} else if (escargotInsideRectangle) { GE.move("escargot");} else { GE.move("faux"); } }); </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect" > </map> <style> #chien { position: fixed; top: 46.8px; left: 114.88px; height: 163px; } #chat { position: fixed; top: 475.8px; left: 387.72px; height: 163px; } #escargot { position: fixed; top: 475.8px; left: 689.28px; height: 163px; } #RectangleChien { position: fixed; border: 2px solid black; background-color: transparent; left: 50.26px; width: 294px; top: 444.6px; height: 233px; } #RectangleChat { position: fixed; border: 2px solid black; background-color: transparent; left: 359px; width: 289px; top: 444.6px; height: 233px; } #RectangleEscargot { position: fixed; border: 2px solid black; background-color: transparent; left: 663.432px; width: 286px; top: 444.6px; height: 233px; } #visionHumain{ position: fixed; top: 390px; left: 1025.304px; height: 171.6px; border: 2px solid black; } #visionChien{ position: fixed; top: 273px; left: 50.26px; height: 156px; border: 2px solid black; } #visionChat{ position: fixed; top: 273px; left: 359px; height: 156px; border: 2px solid black; } #visionEscargot{ position: fixed; top: 273px; left: 663.432px; height: 156px; border: 2px solid black; } .BoutonValider { position: fixed; top : 702px; left: 50.26px; width: 903.244px; background-color: darkred; color: black; border: 2px solid black; padding: 10px 20px; cursor: pointer; }} </style> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Tu as trouvé comment voient le chat et l'escargot. Il ne te reste qu'à placer le chien ! Voilà comment un humain verrait une rue : Glisse chaque animal dans le rectangle correspondant à sa vision, puis appuie sur valider pour confirmer ta réponse ! <</type>></div> <div id="RectangleChat"></div> <div id="RectangleChien"></div> <div id="RectangleEscargot"></div> <img id="visionHumain" src="visionHumain.png" alt="Vision Humain"> <img id="visionChat" src="visionChat.png" alt="Vision Chat"> <img id="visionChien" src="visionChien.png" alt="Vision Chien"> <img id="visionEscargot" src="visionEscargot.png" alt="Vision Escargot"> <img id="chat" src="chat.png" alt="Chat Image"> <img id="chien" src="chien.png" alt="Chien Image"> <img id="escargot" src="escargot.png" alt="Escargot Image"> <button id="valider-button" class="BoutonValider">Valider</button> <script> var chienDragging = false; var offset = { x: 0, y: 0 }; var chien = document.getElementById("chien"); chien.addEventListener("click", function (e) { if (chienDragging) { chienDragging = false; } else { chienDragging = true; offset.x = e.clientX - chien.getBoundingClientRect().left; offset.y = e.clientY - chien.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (chienDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; chien.style.left = x + "px"; chien.style.top = y + "px"; } }); document.getElementById("valider-button").addEventListener("click", function () { // Get the coordinates and dimensions of the rectangles and the images var rectangleChat = document.getElementById("RectangleChat").getBoundingClientRect(); var chatImage = document.getElementById("chat").getBoundingClientRect(); var rectangleChien = document.getElementById("RectangleChien").getBoundingClientRect(); var chienImage = document.getElementById("chien").getBoundingClientRect(); var rectangleEscargot = document.getElementById("RectangleEscargot").getBoundingClientRect(); var escargotImage = document.getElementById("escargot").getBoundingClientRect(); // Check if both chat and chien are inside their respective rectangles var chatInsideRectangle = ( chatImage.left >= rectangleChat.left && chatImage.right <= rectangleChat.right && chatImage.top >= rectangleChat.top && chatImage.bottom <= rectangleChat.bottom ); var chienInsideRectangle = ( chienImage.left >= rectangleChien.left && chienImage.right <= rectangleChien.right && chienImage.top >= rectangleChien.top && chienImage.bottom <= rectangleChien.bottom ); var escargotInsideRectangle = ( escargotImage.left >= rectangleEscargot.left && escargotImage.right <= rectangleEscargot.right && escargotImage.top >= rectangleEscargot.top && escargotImage.bottom <= rectangleEscargot.bottom ); if (chatInsideRectangle && chienInsideRectangle && escargotInsideRectangle) { GE.move("chien chat escargot");} else if (chatInsideRectangle && chienInsideRectangle) { GE.move("chien chat");} else if (chatInsideRectangle && escargotInsideRectangle) { GE.move("chat escargot");} else if (chienInsideRectangle && escargotInsideRectangle) { GE.move("chien escargot");} else if (chienInsideRectangle) { GE.move("chien");} else if (chatInsideRectangle) { GE.move("chat");} else if (escargotInsideRectangle) { GE.move("escargot");} else { GE.move("faux"); } }); </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect" > </map> <style> #chien { position: fixed; top: 475.8px; left: 114.88px; height: 163px; } #chat { position: fixed; top: 46.8px; left: 689.28px; height: 163px; } #escargot { position: fixed; top: 475.8px; left: 689.28px; height: 163px; } #RectangleChien { position: fixed; border: 2px solid black; background-color: transparent; left: 50.26px; width: 294px; top: 444.6px; height: 233px; } #RectangleChat { position: fixed; border: 2px solid black; background-color: transparent; left: 359px; width: 289px; top: 444.6px; height: 233px; } #RectangleEscargot { position: fixed; border: 2px solid black; background-color: transparent; left: 663.432px; width: 286px; top: 444.6px; height: 233px; } #visionHumain{ position: fixed; top: 390px; left: 1025.304px; height: 171.6px; border: 2px solid black; } #visionChien{ position: fixed; top: 273px; left: 50.26px; height: 156px; border: 2px solid black; } #visionChat{ position: fixed; top: 273px; left: 359px; height: 156px; border: 2px solid black; } #visionEscargot{ position: fixed; top: 273px; left: 663.432px; height: 156px; border: 2px solid black; } .BoutonValider { position: fixed; top : 702px; left: 50.26px; width: 903.244px; background-color: darkred; color: black; border: 2px solid black; padding: 10px 20px; cursor: pointer; }} </style> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Tu as trouvé comment voient le chien et l'escargot. Il ne te reste qu'à placer le chat ! Voilà comment un humain verrait une rue : Glisse chaque animal dans le rectangle correspondant à sa vision, puis appuie sur valider pour confirmer ta réponse ! <</type>></div> <div id="RectangleChat"></div> <div id="RectangleChien"></div> <div id="RectangleEscargot"></div> <img id="visionHumain" src="visionHumain.png" alt="Vision Humain"> <img id="visionChat" src="visionChat.png" alt="Vision Chat"> <img id="visionChien" src="visionChien.png" alt="Vision Chien"> <img id="visionEscargot" src="visionEscargot.png" alt="Vision Escargot"> <img id="chat" src="chat.png" alt="Chat Image"> <img id="chien" src="chien.png" alt="Chien Image"> <img id="escargot" src="escargot.png" alt="Escargot Image"> <button id="valider-button" class="BoutonValider">Valider</button> <script> var chatDragging = false; var offset = { x: 0, y: 0 }; var chat = document.getElementById("chat"); chat.addEventListener("click", function (e) { if (chatDragging) { chatDragging = false; } else { chatDragging = true; offset.x = e.clientX - chat.getBoundingClientRect().left; offset.y = e.clientY - chat.getBoundingClientRect().top; } }); document.addEventListener("mousemove", function (e) { if (chatDragging) { var x = e.clientX - offset.x; var y = e.clientY - offset.y; chat.style.left = x + "px"; chat.style.top = y + "px"; } }); document.getElementById("valider-button").addEventListener("click", function () { // Get the coordinates and dimensions of the rectangles and the images var rectangleChat = document.getElementById("RectangleChat").getBoundingClientRect(); var chatImage = document.getElementById("chat").getBoundingClientRect(); var rectangleChien = document.getElementById("RectangleChien").getBoundingClientRect(); var chienImage = document.getElementById("chien").getBoundingClientRect(); var rectangleEscargot = document.getElementById("RectangleEscargot").getBoundingClientRect(); var escargotImage = document.getElementById("escargot").getBoundingClientRect(); // Check if both chat and chien are inside their respective rectangles var chatInsideRectangle = ( chatImage.left >= rectangleChat.left && chatImage.right <= rectangleChat.right && chatImage.top >= rectangleChat.top && chatImage.bottom <= rectangleChat.bottom ); var chienInsideRectangle = ( chienImage.left >= rectangleChien.left && chienImage.right <= rectangleChien.right && chienImage.top >= rectangleChien.top && chienImage.bottom <= rectangleChien.bottom ); var escargotInsideRectangle = ( escargotImage.left >= rectangleEscargot.left && escargotImage.right <= rectangleEscargot.right && escargotImage.top >= rectangleEscargot.top && escargotImage.bottom <= rectangleEscargot.bottom ); if (chatInsideRectangle && chienInsideRectangle && escargotInsideRectangle) { GE.move("chien chat escargot");} else if (chatInsideRectangle && chienInsideRectangle) { GE.move("chien chat");} else if (chatInsideRectangle && escargotInsideRectangle) { GE.move("chat escargot");} else if (chienInsideRectangle && escargotInsideRectangle) { GE.move("chien escargot");} else if (chienInsideRectangle) { GE.move("chien");} else if (chatInsideRectangle) { GE.move("chat");} else if (escargotInsideRectangle) { GE.move("escargot");} else { GE.move("faux"); } }); </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect" > </map> <style> #chien { position: fixed; top: 475.8px; left: 114.88px; height: 163px; } #chat { position: fixed; top: 475.8px; left: 387.72px; height: 163px; } #escargot { position: fixed; top: 475.8px; left: 689.28px; height: 163px; } #RectangleChien { position: fixed; border: 2px solid black; background-color: transparent; left: 50.26px; width: 294px; top: 444.6px; height: 233px; } #RectangleChat { position: fixed; border: 2px solid black; background-color: transparent; left: 359px; width: 289px; top: 444.6px; height: 233px; } #RectangleEscargot { position: fixed; border: 2px solid black; background-color: transparent; left: 663.432px; width: 286px; top: 444.6px; height: 233px; } #visionHumain{ position: fixed; top: 390px; left: 1025.304px; height: 171.6px; border: 2px solid black; } #visionChien{ position: fixed; top: 273px; left: 50.26px; height: 156px; border: 2px solid black; } #visionChat{ position: fixed; top: 273px; left: 359px; height: 156px; border: 2px solid black; } #visionEscargot{ position: fixed; top: 273px; left: 663.432px; height: 156px; border: 2px solid black; } </style> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2"><<type "15ms" skipkey "Tab">> Bravo tu as trouvé comment chaque animal voit ! @@#Link;[[Tu peux passer à la suite.|Cerveau et perception]]@@ <</type>></div> <div id="RectangleChat"></div> <div id="RectangleChien"></div> <div id="RectangleEscargot"></div> <img id="visionHumain" src="visionHumain.png" alt="Vision Humain"> <img id="visionChat" src="visionChat.png" alt="Vision Chat"> <img id="visionChien" src="visionChien.png" alt="Vision Chien"> <img id="visionEscargot" src="visionEscargot.png" alt="Vision Escargot"> <img id="chat" src="chat.png" alt="Chat Image"> <img id="chien" src="chien.png" alt="Chien Image"> <img id="escargot" src="escargot.png" alt="Escargot Image">
<style> .Bouton1 { position: fixed; top : 280.8px; left: 100.52px; width: 574.4px; background-color: #EDBB99; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton2 { position: fixed; top : 358.8px; left: 100.52px; width: 574.4px; background-color: #FAD7A0; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton3 { position: fixed; top : 436.8px; left: 100.52px; width: 574.4px; background-color: #F9E79F; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton4 { position: fixed; top : 514.8px; left: 100.52px; width: 574.4px; background-color: #A9DFBF; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton5 { position: fixed; top : 592.8px; left: 100.52px; width: 574.4px; background-color: #AED6F1; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton6 { position: fixed; top : 670.8px; left: 100.52px; width: 574.4px; background-color: #D2B4DE; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton1d { position: fixed; top : 280.8px; left: 761.08px; width: 574.4px; background-color: #D2B4DE; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton2d { position: fixed; top : 358.8px; left: 761.08px; width: 574.4px; background-color: #AED6F1; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton3d { position: fixed; top : 436.8px; left: 761.08px; width: 574.4px; background-color: #A9DFBF; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton4d { position: fixed; top : 514.8px; left: 761.08px; width: 574.4px; background-color: #F9E79F; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton5d { position: fixed; top : 592.8px; left: 761.08px; width: 574.4px; background-color: #FAD7A0; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } .Bouton6d { position: fixed; top : 670.8px; left: 761.08px; width: 574.4px; background-color: #EDBB99; color: black; border: solid black; padding: 15px 15px; cursor: pointer; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;" id="backButton"> </FlecheRetour> <map name="fleche"> <area data-passage="previous()" coords="5,8,134,114" shape="rect" > </map> <Po4> <img src="Po.png" style="width: 320px;"> </Po4> <div class="text_po4"><<type "15ms" skipkey "Tab">>Bienvenue dans le sommaire. Tu peux cliquer sur le passage que tu veux revoir. <</type>></div> <button id="Bouton1" class="Bouton1">Qu'est-ce que la lumière ?</button> <button id="Bouton2" class="Bouton2">La composition de la lumière</button> <button id="Bouton3" class="Bouton3">Les couleurs</button> <button id="Bouton4" class="Bouton4">Comment voit-on les objets ?</button> <button id="Bouton5" class="Bouton5">La lumière et l'eau</button> <button id="Bouton6" class="Bouton6">Le fontionnement de l'oeil</button> <button id="Bouton1d" class="Bouton1d">Pourquoi porter des lunettes ?</button> <button id="Bouton2d" class="Bouton2d">La rétine</button> <button id="Bouton3d" class="Bouton3d">Le daltonisme</button> <button id="Bouton4d" class="Bouton4d">Comment voient les animaux ?</button> <button id="Bouton5d" class="Bouton5d">Le cerveau</button> <button id="Bouton6d" class="Bouton6d">Le quiz</button> <script> document.getElementById("backButton").addEventListener("click", function () { // Use history.back() to navigate to the previous passage history.back(); }); document.getElementById("Bouton1").addEventListener("click", function () { GE.move("lumière") }); document.getElementById("Bouton2").addEventListener("click", function () { GE.move("Composition de la lumière prt1") }); document.getElementById("Bouton3").addEventListener("click", function () { GE.move("Composition de la lumière prt2") }); document.getElementById("Bouton4").addEventListener("click", function () { GE.move("Propagation Début") }); document.getElementById("Bouton5").addEventListener("click", function () { GE.move("Phénomènes dus à la diffraction") }); document.getElementById("Bouton6").addEventListener("click", function () { GE.move("Vision et fonctionnement de l'oeil") }); document.getElementById("Bouton1d").addEventListener("click", function () { GE.move("Pourquoi porter des lunettes ?") }); document.getElementById("Bouton2d").addEventListener("click", function () { GE.move("Retine prt1") }); document.getElementById("Bouton3d").addEventListener("click", function () { GE.move("Daltonisme") }); document.getElementById("Bouton4d").addEventListener("click", function () { GE.move("Comment voient les animaux") }); document.getElementById("Bouton5d").addEventListener("click", function () { GE.move("Cerveau et perception") }); document.getElementById("Bouton6d").addEventListener("click", function () { GE.move("QCM") }); </script>
<style> .BoutonOk{ position: absolute; top: 400px; left: 300px; height: 280px; width: 290px; background-color: #FFCC00; color: black; border: 2px solid black; padding: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 180px; font-weight: bold; font-size: 24px; } Ampoule { position: absolute; left: 800px; top: 100px; } </style> <div id="RectangleTest"></div> <Ampoule> <img src="ampoule.png" usemap="#schema"> </Ampoule> <div class="text_rectangle">Pour une meilleure expérience, règle le zoom de ton écran pour que tu puisses voir le rectangle jaune en entier !</div> <button id="BoutonOk" class="BoutonOk">C'est OK pour moi !</button> <script> document.getElementById("BoutonOk").addEventListener("click", function () { GE.move("jouer") }); </script>
<style> video { position: fixed; top: 0px; left: 0px; height: 780px; } bonjour{ position: fixed; left: 0px; top: -46.8px; } PoBonjour{ position: fixed; left: 270px; top: 210px; } .text_poBonjour { position: fixed; left: 770px; width: 300px; top: 230px; height: 230px; padding-left: 15px; padding-right: 15px; padding-top: 20px; padding-bottom: 35px; text-align: center; overflow: hidden; overflow-y: scroll; background: lightgrey; border-width: thick; border: solid; border-color: black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 20px; color: black; } .BoutonJouer { position: absolute; top: 390px; left: 815px; width: 240px; background-color: lightgrey; color: black; border: 1.5px solid black; padding: 10px 20px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 20px; font-weight: bold; line-height: 1.5; } FlecheRetine{ position: fixed; left: 120px; top: 100px; background-repeat: no-repeat; } .text_fleche { position: fixed; left: 200px; width: 280px; top: 100px; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; text-align: center; background: white; border-width: thick; border: solid; border-color: grey; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 1; color: black; border-radius: 20px; } </style> <bonjour> <img src="bonjour.png" style="width: 100%;"> </bonjour> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="video intro retour" coords="5,8,134,114" shape="rect" > </map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <PoBonjour> <img src="Po.png" style="width: 440px;"> </PoBonjour> <div class="text_poBonjour"><<type "15ms" skipkey "Tab">>Salut $prenom ! C'est parti pour l'aventure ! <</type>></div> <button id="BoutonJouer" class="BoutonJouer">Viens en apprendre plus avec moi !</button> <FlecheRetine> <img src="fleche1.png" style="width: 57px;"> </FlecheRetine> <div class="text_fleche">Clique sur l'icône pour accéder au guide de navigation</div> <script> document.getElementById("BoutonJouer").addEventListener("click", function () { GE.move("lumière") }); </script>
<style> .text_guide_titre { position: fixed; left: 265px; width: 850px; top: 100px; text-align: center; border: solid; font-weight: bold; font-size: 25px; border-color: black; border-radius: 20px; background: #FFCC00; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); padding-top: 10px; padding-bottom: 10px; } .text_guide { position: fixed; left: 320px; width: 836px; top: 200px; text-align: left; color: black; font-size: 21px; line-height: 2; } .text_guide_2 { position: fixed; left: 420px; width: 736px; top: 430px; text-align: left; color: black; font-size: 21px; line-height: 3.2; } Fleche{ position: fixed; left: 318px; top: 390px; background-repeat: no-repeat; } I{ position: fixed; left: 338px; top: 471px; background-repeat: no-repeat; } Sommaire{ position: fixed; left: 335px; top: 534px; background-repeat: no-repeat; } .popupGuide { position: fixed; top: 200px; left: 1040px; width: 300px; background: white; padding: 10px; border: 1.5px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 9999; color: black; border-radius: 20px; line-height: 1.5; font-size: 20px; } .popup p { line-height: 1.5; } </style> <Fleche> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;" id="backButton"> </Fleche> <map name="fleche"> <area data-passage="previous()" coords="5,8,134,114" shape="rect" > </map> <I> <img src="i.png" usemap="#i" style="width: 45px;"> </I> <Sommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </Sommaire> <div class="text_guide_titre"> Comment naviguer sur le site ?</div> <div class="text_guide"> Tu peux utiliser la touche tab →I pour que le texte s'affiche plus vite. Tu peux passer ta souris sur les <span id="definition-trigger" onmouseover="showPopup('Une fenêtre comme celle-ci apparaitra alors');" onmouseout="hidePopup();"><u>mots soulignés</u></span> pour avoir leur définition Tu peux cliquer sur les <b>mots en gras</b> pour passer à la page suivante En haut à gauche de ton écran, tu as accès à tout moment à quatres icônes : </div> <div class="text_guide_2">Clique sur la flèche pour revenir en arrière Clique sur le petit i pour revoir ce guide Clique sur le petit livre tu peux accéder au sommaire </div> <script> var popup = null; function showPopup(text) { if (popup) return; popup = document.createElement("div"); popup.classList.add("popupGuide"); var popupText = document.createElement("p"); popupText.textContent = text; popup.appendChild(popupText); document.body.appendChild(popup); } function hidePopup() { if (popup) { document.body.removeChild(popup); popup = null; } } </script>
<QCM> <img src="conclusion.png" style="width: 100%; height: 100%;"> </QCM> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="fin retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <PoFin> <img src="Po.png" style="width: 430px;"> </PoFin> <LampeonFin> <img src="lampeon.png" style="width: 220px;"> </LampeonFin> <InterrupteurOn> <img src="interrupteurOn.png" usemap="#interrupteur" style="width: 170px;"> </InterrupteurOn> <map name="interrupteur"> <area data-passage="ecran noir" coords="115,36,59,86,59,124,92,122,135,67,136,34" shape="poly"></map> <div class="text_poFin"><<type "15ms" skipkey "Tab">>EH OH c'est pas Versailles ici ! <</type>></div>
<style> video { position: fixed; top: 0px; left: 150px; height: 780px; } .passage input[type="text"] { min-width: 50px; width: 335px; } .BoutonJouer { position: absolute; top: 630px; height: 70px; left: 1120px; width: 150px; background-color: lightgrey; color: black; border: 1.5px solid black; padding: 10px 20px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 20px; font-weight: bold; } </style> <video src="animation_tour.mp4" autoplay loop></video> <<set $prenom to "">> <div class="text_po2">AAAAAAAAAH ! Qu’est-ce-que c’est que ça ???? Pardon, reprenons depuis le début ! Moi c’est Pó ! Je vis dans le noir depuis toujours et tu viens de m’éblouiiiiiir. Mais, c’est quoi ce truc ? Tu veux venir le découvrir avec moi ? Au fait, c’est quoi ton nom à toi ? <<textbox "$prenom" "" autofocus>> </div> <button id="BoutonJouer" class="BoutonJouer">Entrer</button> <script> document.getElementById("BoutonJouer").addEventListener("click", function () { GE.move("Bonjour") }); </script>
<style> video { position: fixed; top: 0px; left: 0px; height: 780px; } bonjour{ position: fixed; left: 0px; top: -46.8px; } PoBonjour{ position: fixed; left: 270px; top: 210px; } .text_poBonjour { position: fixed; left: 770px; width: 300px; top: 230px; height: 230px; padding-left: 15px; padding-right: 15px; padding-top: 20px; padding-bottom: 35px; text-align: center; overflow: hidden; overflow-y: scroll; background: lightgrey; border-width: thick; border: solid; border-color: black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 20px; color: black; } .BoutonJouer { position: absolute; top: 390px; left: 815px; width: 240px; background-color: lightgrey; color: black; border: 1.5px solid black; padding: 10px 20px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 20px; font-weight: bold; line-height: 1.5; } FlecheRetine{ position: fixed; left: 120px; top: 100px; background-repeat: no-repeat; } .text_fleche { position: fixed; left: 200px; width: 280px; top: 100px; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; text-align: center; background: white; border-width: thick; border: solid; border-color: grey; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 1; color: black; border-radius: 20px; } </style> <bonjour> <img src="bonjour.png" style="width: 100%;"> </bonjour> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="video intro retour" coords="5,8,134,114" shape="rect" > </map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <PoBonjour> <img src="Po.png" style="width: 440px;"> </PoBonjour> <div class="text_poBonjour">Salut $prenom ! C'est parti pour l'aventure ! </div> <button id="BoutonJouer" class="BoutonJouer">Viens en apprendre plus avec moi !</button> <FlecheRetine> <img src="fleche1.png" style="width: 57px;"> </FlecheRetine> <div class="text_fleche">Clique sur l'icône pour accéder au guide de navigation</div> <script> document.getElementById("BoutonJouer").addEventListener("click", function () { GE.move("lumière") }); </script>
<Po> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Bonjour retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" > </map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <SchemaLumiere> <img src="schema_lumiere.png" usemap="#schema"> </SchemaLumiere> <map name="schema"> <area data-passage="Composition de la lumière prt1" coords="49,402,68,332,61,306,69,256,57,173,101,96,186,76,241,105,278,169,272,231,231,282,193,314,177,352,156,364,133,432,97,451,64,439" shape="poly" > </map> <div class="text_poLumiere">La lumière est une <span id="definition-trigger" onmouseover="showPopup('Onde électromagnétique', 'C\'est une onde qui peut se déplacer dans le vide (la lumière se déplace dans l’espace qui est composé de vide. Par contre, le son n’est pas une onde électromagnétique et ne se déplace pas dans le vide, il n’y a pas de son dans l’espace). ');" onmouseout="hidePopup();"><u>onde électromagnétique</u></span> qui arrive jusqu’à ton œil. Si elle n’est pas perturbée, elle se déplace en ligne droite. Clique sur l’ampoule pour découvrir sa composition. On considère que la lumière est composée de petites particules appelées <span id="definition-trigger" onmouseover="showPopup('Photons', 'Le photon est une particule élémentaire, c\'est-à-dire l\'un des constituants les plus simples de l\'Univers. On peut le définir comme la particule qui transporte l\'énergie lumineuse ou de certains rayons cosmiques. ');" onmouseout="hidePopup();"><u>photons</u></span>. </div> <script> var popup = null; function showPopup(title, text) { if (popup) return; popup = document.createElement("div"); popup.classList.add("popupLumiere"); var popupTitle = document.createElement("h2"); popupTitle.textContent = title; var popupText = document.createElement("p"); popupText.textContent = text; popup.appendChild(popupTitle); popup.appendChild(popupText); document.body.appendChild(popup); } function hidePopup() { if (popup) { document.body.removeChild(popup); popup = null; } } </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <map name="fleche"> <area data-passage="lumière retour" coords="5,8,134,114" shape="rect" > </map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <SchemaComposition> <img src="Composition_lumiere_1.png" style="width: 840px;"> </SchemaComposition> <Po2> <img src="Po.png" style="width: 360px;"> </Po2> <div class="text_po2">Il existe 2 types de lumières : la lumière naturelle qui vient du soleil et la lumière artificielle créée par les lampes. Ce sont toutes les deux de la lumière blanche. @@#Link;[[Mais qu’est-ce que la lumière blanche ?|Composition de la lumière prt2]]@@ </div>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <map name="fleche"> <area data-passage="Composition de la lumière prt1 retour" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <SchemaComposition> <img src="Composition_lumiere_2.png" style="width: 840px;"> </SchemaComposition> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2">Nous voyons les trois <span id="definition-trigger" onmouseover="showPopup('Couleurs primaires en optique', 'Attention : il ne faut pas confondre les couleurs primaires en optique avec les couleurs primaires en peinture qui sont le rouge, le bleu, et le jaune. ');" onmouseout="hidePopup();"><u>couleurs primaires en optique</u></span> : le rouge, le vert, et le bleu. Si on additionne les lumières de ces trois couleurs, on obtient une lumière blanche. La lumière blanche peut être divisée en plusieurs couleurs, on utilise souvent un prisme pour le faire. On peut voir les 7 couleurs de l’arc-en-ciel : violet, indigo, bleu, vert, jaune, orange et rouge. @@#Link;[[Comment passe-t-on de la lumière blanche aux couleurs?|Propagation Début]]@@ </div> <script> var popup = null; function showPopup(title, text) { if (popup) return; popup = document.createElement("div"); popup.classList.add("popupComposition"); var popupTitle = document.createElement("h2"); popupTitle.textContent = title; var popupText = document.createElement("p"); popupText.textContent = text; popup.appendChild(popupTitle); popup.appendChild(popupText); document.body.appendChild(popup); } function hidePopup() { if (popup) { document.body.removeChild(popup); popup = null; } } </script>
<SchemaPropagation> <img src="obj_transparent.png" usemap="#objet" style="width: 1050px;"> </SchemaPropagation> <map name="objet"> <area data-passage="obj_noir" coords="503,324,603,435" shape="rect" > </map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Composition de la lumière prt2 retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <FlecheObjet> <img src="fleche3.png" style="width: 53px;"> </FlecheObjet> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2">Comme toute onde, elle se déplace dans l’espace, à la vitesse de 300 000 km/s, c’est comme si on faisait 7,5 fois le tour de la Terre en une seconde. Elle se propage en ligne droite. Quand elle rencontre un objet plusieurs phénomènes sont possibles : Si l’objet est totalement transparent, elle passe en ligne droite : c’est la transmission </div> <div class="text_flechePropagation"> Clique sur l'objet pour le faire changer de couleur </div>
<SchemaPropagation> <img src="obj_noir.png" usemap="#objet" style="width: 1050px;"> </SchemaPropagation> <map name="objet"> <area data-passage="obj_blanc" coords="503,324,603,435" shape="rect" > </map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Propagation Début retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <FlecheObjet> <img src="fleche3.png" style="width: 53px;"> </FlecheObjet> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2">Si l’objet est noir, la lumière est absorbée. L’objet absorbe toutes les couleurs de la lumière blanche et n’en renvoie aucune : c’est l’absorption. </div> <div class="text_flechePropagation"> Clique sur l'objet pour le faire changer de couleur </div>
<SchemaPropagation> <img src="obj_blanc.png" usemap="#objet" style="width: 1050px;"> </SchemaPropagation> <map name="objet"> <area data-passage="obj_bleu" coords="503,324,603,435" shape="rect" > </map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="obj_noir retour" coords="5,8,134,114" shape="rect" > </map> <FlecheObjet> <img src="fleche3.png" style="width: 53px;"> </FlecheObjet> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2">Si l’objet est blanc elle peut être déviée, toutes les couleurs de la lumière sont réflechies : c’est la réflexion </div> <div class="text_flechePropagation"> Clique sur l'objet pour le faire changer de couleur </div>
<SchemaBleu> <img src="obj_bleu.png" usemap="#objet" style="width: 857px"> </SchemaBleu> <map name="objet"> <area data-passage="Propagation Fin" coords="277,583,419,463,455,499,445,537,395,588,330,618,304,612" shape="poly" > </map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="obj_blanc retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <FlecheObjet> <img src="fleche3.png" style="width: 53px;"> </FlecheObjet> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2">Si la lumière atteint un objet, une partie de la lumière est absorbée, et l’autre est réfléchie. Une manette bleue absorbe toutes les couleurs de la lumière blanche, sauf le bleu qui est réfléchi et parvient à ton œil c’est pourquoi tu la vois bleue. </div> <div class="text_flechePropagation"> Clique sur l'objet pour le faire changer de couleur</div>
<SchemaPropagation> <img src="obj_transparent.png" usemap="#objet" style="width: 1050px;"> </SchemaPropagation><map name="objet"> <area data-passage="obj_noir" coords="503,324,603,435" shape="rect"> <area data-passage="Vision et fonctionnement de l'oeil" coords="810,341,909,423" shape="rect"></map> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="obj_bleu retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"><area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <FlecheDiffraction><img src="fleche1.png" style="width: 75px"></FlecheDiffraction> <FlecheOeil><img src="fleche2.png" style="width: 53px;"></FlecheOeil> <Goutte> <img src="goutte.png" usemap="#goutte" style="width: 6%; height: 6%;"> </Goutte> <map name="goutte"> <area data-passage="Phénomènes dus à la diffraction" coords="0,16,820,1288" shape="rect"></map> <Po2> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po2> <div class="text_po2">Comme toute onde, elle se déplace donc dans l’espace, à la vitesse de 300 000 km/s, c’est comme si on faisait 7,5 fois le tour de la Terre en une seconde. Elle se propage en ligne droite. Quand elle rencontre un objet plusieurs phénomènes sont possibles. Si la lumière atteint un objet, une partie de la lumière est absorbée, et l’autre est réfléchie. Si l’objet est totalement transparent, elle passe en ligne droite : c’est la transmission </div> <div class="text_flecheOeil"> Clique sur l'oeil pour passer à la suite</div> <div class="text_flecheDiffraction"> Clique sur la goutte d'eau pour découvrir le phénomène de réfraction</div>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Propagation Fin retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <SchemaDiffraction> <img src="eau_lumiere.png" style="width: 1000px;"> </SchemaDiffraction> <Po> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po> <div class="text_po">Lorsque le faisceau lumineux change d’environnement, il va continuer à se déplacer mais il est dévié, c’est la réfraction. C’est grâce à ce phénomène que se forment les arcs-en-ciel : cela apparaît quand il y a de la pluie et du soleil parce que les gouttes d’eau réfractent la lumière blanche du soleil. </div>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"><area data-passage="Propagation Fin retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"><area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"><area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po> <img src="polunettes.png" usemap="#lunettes" style="width: 360px;"> </Po> <map name="lunettes"><area data-passage="Pourquoi porter des lunettes ?" coords="142,44,268,135" shape="rect"></map> <div class="text_po">Tu le sais déjà mais c’est l'œil qui nous permet de voir les objets autour de nous. Tu peux passer ta souris sur les mots pour découvrir chaque partie de l’oeil. Tu peux aussi cliquer sur les lunettes de Pó pour découvrir pourquoi certaines personnes doivent porter des lunettes. Puis, clique sur la rétine de l'oeil pour passer à la suite. </div> <SchemaOeil> <img src="oeil.png" usemap="#image-map"> </SchemaOeil> <map name="image-map"><area data-passage="Retine prt1" coords="486,156,542,128,595,137,638,157,666,200,685,225,690,266,670,239,656,199,620,160,569,143,517,144" shape="poly"> <area coords="275,99,358,132" shape="rect" onmouseover="showPopup('La cornée', 'C\'est une membrane transparente. Elle centralise les rayon lumineux dans l\’oeil.');" onmouseout="hidePopup();"> <area coords="747,89,826,125" shape="rect" onmouseover="showPopup('La rétine', 'Elle est située au fond de l\’oeil et est composée de cellules sensibles à la lumière : les photorécepteurs');" onmouseout="hidePopup();"> <area coords="377,94,479,126" shape="rect" onmouseover="showPopup('Le cristallin', 'En changeant de forme il nous permet de voir net (comme la mise au point d’un appareil photo). Il fonctionne comme une lentille.');" onmouseout="hidePopup();"> <area coords="369,149,418,180" shape="rect" onmouseover="showPopup('L\'iris', 'En s\’ouvrant et se fermant il permet d\’augmenter ou de diminuer la quantité de lumière qui entre dans l\’oeil. c’est lui qui défini la couleur des yeux.');" onmouseout="hidePopup();"> <area coords="241,380,418,410" shape="rect" onmouseover="showPopup('L\'humeur aqueuse', 'C\'est un liquide transparent qui maintient la forme de l\'oeil. On dit qu\'elle nourrit le cristallin parce qu\'elle est renouvellée en permanence et permet d\'apporter tous les nutriments nécessaires.');" onmouseout="hidePopup();"> <area coords="649,5,776,47" shape="rect" onmouseover="showPopup('La sclérotique', 'C\’est la membrane qui entoure l’oeil et le rend rigide on l\’appelle le blanc de l\’oeil.');" onmouseout="hidePopup();"> <area coords="486,262,639,294" shape="rect" onmouseover="showPopup('L\'humeur vitrée', ' C\’est un liquide transparent qui entoure l\'oeil.');" onmouseout="hidePopup();" > <area coords="768,229,838,263" shape="rect" onmouseover="showPopup('La fovéa', 'C\'est la zone de l\'œil de la vision précise, elle est peuplée de cônes.');" onmouseout="hidePopup();"> <area coords="812,254,933,293" shape="rect" onmouseover="showPopup('Le nerf optique', 'Il permet de transférer le message nerveux créé par la rétine au cerveau.');" onmouseout="hidePopup();"></map><script> var popup = null; function showPopup(title, text) { if (popup) return; // If the popup is already open, do nothing popup = document.createElement("div"); popup.classList.add("popup"); var popupTitle = document.createElement("h2"); popupTitle.textContent = title; var popupText = document.createElement("p"); popupText.textContent = text; popup.appendChild(popupTitle); popup.appendChild(popupText); document.body.appendChild(popup); } function hidePopup() { if (popup) { // Remove the popup from the body of the page document.body.removeChild(popup); popup = null; // Reset the popup variable } } </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Vision et fonctionnement de l'oeil retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <PoVision> <img src="polunettes.png" alt="New Image" style="width: 360px;"> </PoVision> <div class="text_poVision">Tu as sûrement déjà remarqué que certaines personnes portaient des lunettes, ou peut-être que toi-même tu en portes, mais pourquoi ? Les lunettes servent à voir plus net, elles sont composées de deux lentilles : une pour chaque oeil. Une lentille est un objet transparent dont le but est de rediriger la lumière. Il existe deux types de lentilles : une lentille convergente qui fonctionne comme une loupe et une lentille divergente qui est le contraire d’une loupe. C’est grâce aux lunettes que tu vois mieux ! </div> <style> .BoutonMyopie{ position: absolute; top: 234px; left: 145px; height: 273px; width: 287.2px; background-color: #FFCC00; color: black; border: 2px solid black; padding: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 180px; font-weight: bold; font-size: 24px; } .BoutonAstigmatie{ position: absolute; top: 234px; left: 520px; height: 273px; width: 287.2px; background-color: #FFCC00; color: black; border: 2px solid black; padding: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 180px; font-weight: bold; font-size: 24px; } </style> <button id="BoutonMyopie" class="BoutonMyopie">Myopie</button> <button id="BoutonAstigmatie" class="BoutonAstigmatie">Astigmatie</button> <script> document.getElementById("BoutonMyopie").addEventListener("click", function () { GE.move("myopie") }); document.getElementById("BoutonAstigmatie").addEventListener("click", function () { GE.move("astigmatie") }); </script>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Vision et fonctionnement de l'oeil retour" coords="5,8,134,114" shape="rect" > </map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect" ></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect" > </map> <Po> <img src="Po.png" alt="New Image" style="width: 360px;"> </Po> <Retine> <img src="Retine.png" usemap="#retine" style="width: 900px"> </Retine> <map name="retine"> <area data-passage="Retine prt2" alt="Intro" title="Intro" coords="171,63,257,175" shape="rect" > </map> <div class="text_po">La rétine comporte des photorécepteurs. Il existe deux types de photorécepteurs : les cônes et les bâtonnets. Les cônes sont concentrés sur la macula (que l’on appelle tache jaune). Ils permettent de voir la journée ou quand la lumière est allumée. Ils permettent de voir les formes et la couleur des objets. Tu peux cliquer sur l'ampoule pour allumer la lumière. </div>
<style> FlecheRetine{ position: fixed; left: 1310px; top: 400px; background-repeat: no-repeat; } .text_fleche { position: fixed; left: 1100px; width: 250px; top: 355px; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; text-align: center; background: white; border-width: thick; border: solid; border-color: grey; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 1; color: black; border-radius: 20px; } </style> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"><area data-passage="Retine prt1 retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"><area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"><area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <Po> <img src="Po.png" style="width: 360px;"> </Po> <Retine> <img src="Retine+lumiere.png" style="width: 900px;"> </Retine> <div class="text_poRetine">Il existe 3 types de cônes : ceux qui permettent de voir le bleu, le vert et le rouge. Les bâtonnets sont 10 fois plus nombreux que les cônes. Ils sont surtout concentrés sur les côtés de la rétine et sont sensibles à la lumière. C’est eux qui permettent de voir quand il n’y a pas beaucoup de lumière. Tu peux cliquer sur les cônes pour découvrir le daltonisme, le chat pour savoir comment voient les animaux, ou le cerveau pour passer à la suite. </div> <IconeDaltonisme> <img src="Normal_trichromate.png" usemap="#daltonisme" style="width: 70px;"> </IconeDaltonisme> <map name="daltonisme"><area data-passage="Daltonisme" coords="2,2,476,510" shape="rect"></map> <IconeChat> <img src="chat.png" usemap="#chat" style="width: 80px;"> </IconeChat> <map name="chat"><area data-passage="Comment voient les animaux" coords="2,2,476,510" shape="rect"></map> <IconeCerveau> <img src="icone_cerveau.png" usemap="#cerveau" style="width: 65px;"> </IconeCerveau> <map name="cerveau"><area data-passage="Cerveau et perception" coords="4,2,453,388" shape="rect"></map> <FlecheRetine> <img src="fleche2.png" style="width: 47px;"> </FlecheRetine> <div class="text_fleche">Clique sur une des 3 icônes</div>
<FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Retine prt2 retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <SchemaCerveau> <img src="cerveau.png" usemap="#cerveau" style="width: 900px"> </SchemaCerveau> <map name="cerveau"> <area data-passage="QCM" coords="435,141,549,23,723,14,849,96,850,243,734,332,762,377,725,384,668,311,493,264" shape="poly"></map> <Po> <img src="Po.png" alt="New Image" style="width: 360px"> </Po> <div class="text_po">Quand la lumière entre dans l'œil, la rétine la transforme en un message électrique grâce aux photorécepteurs. Ce message est transmis via le nerf optique qui va jusqu’au cerveau qui permet de former l’image que nous percevons. C’est le cerveau qui nous permet de voir ! Clique sur le cerveau pour tester tes connaissances ! </div>
<QCM> <img src="QCM.png" style="width: 100%;"> </QCM> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="Cerveau et perception retour" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <PoQCM> <img src="poQCM.png" style="width: 440px;"> </PoQCM> <div class="text_poQCM">Tu es arrivé à la fin du parcours, bravo ! Quelques questions t'attendent maintenant pour montrer que tu as tout compris. Tu peux revenir en arrière si tu veux chercher des informations. Tu peux aussi aller au sommaire, en cliquant sur le livre, pour revoir un passage en particulier. Bonne chance ! </div> <style> .BoutonJouer { position: absolute; top: 234px; left: 904.68px; height: 273px; width: 287.2px; background-color: #FFCC00; color: black; border: 2px solid black; padding: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 180px; font-weight: bold; font-size: 24px; } </style> <button id="BoutonJouer" class="BoutonJouer">Question 1</button> <script> document.getElementById("BoutonJouer").addEventListener("click", function () { GE.move("question 1") }); </script>
<QCM> <img src="conclusion.png" style="width: 100%; height: 100%;"> </QCM> <FlecheRetour> <img src="Flecheretour.png" usemap="#fleche" style="width: 90px;"> </FlecheRetour> <map name="fleche"> <area data-passage="QCM retour" coords="5,8,134,114" shape="rect"></map> <IconeI> <img src="i.png" usemap="#i" style="width: 45px;"> </IconeI> <map name="i"> <area data-passage="guide" coords="5,8,134,114" shape="rect"></map> <IconeSommaire> <img src="icone_sommaire.png" usemap="#sommaire" style="width: 51px;"> </IconeSommaire> <map name="sommaire"> <area data-passage="sommaire" coords="5,8,134,114" shape="rect"></map> <PoFin> <img src="Po.png" style="width: 430px;"> </PoFin> <LampeonFin> <img src="lampeon.png" style="width: 220px;"> </LampeonFin> <InterrupteurOn> <img src="interrupteurOn.png" usemap="#interrupteur" style="width: 170px;"> </InterrupteurOn> <map name="interrupteur"> <area data-passage="ecran noir" coords="115,36,59,86,59,124,92,122,135,67,136,34" shape="poly"></map> <div class="text_poFin">Bonne réponse ! Merci de m'avoir suivi dans cette superbe aventure. Tu en sais maintenant un peu plus sur la lumière. N'oublie pas d’éteindre la lumière avant de partir ! </div> <<timed 20s>> <script> GE.move("versailles"); </script> <</timed>>