{"id":2662,"date":"2025-02-12T09:10:17","date_gmt":"2025-02-12T09:10:17","guid":{"rendered":"https:\/\/msp.netsoul.dev\/game-3\/"},"modified":"2025-02-12T11:30:20","modified_gmt":"2025-02-12T11:30:20","slug":"game-3","status":"publish","type":"page","link":"https:\/\/msp.netsoul.dev\/en\/game-3\/","title":{"rendered":"Game #3"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2662\" class=\"elementor elementor-2662 elementor-2422\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4673bc9 e-con-full e-flex e-con e-parent\" data-id=\"4673bc9\" data-element_type=\"container\" data-e-type=\"container\" id=\"bg-game\" data-settings=\"{&quot;background_motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-732c8f5 elementor-widget elementor-widget-image\" data-id=\"732c8f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/msp.netsoul.dev\/en\/\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"141\" src=\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2023\/11\/logo-extended-1024x181.png\" class=\"attachment-large size-large wp-image-2498\" alt=\"\" srcset=\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2023\/11\/logo-extended-1024x181.png 1024w, https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2023\/11\/logo-extended-300x53.png 300w, https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2023\/11\/logo-extended-768x136.png 768w, https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2023\/11\/logo-extended.png 1168w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e36628f e-con-full e-transform e-flex e-con e-child\" data-id=\"e36628f\" data-element_type=\"container\" data-e-type=\"container\" id=\"bg-game-background\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_transform_scale_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.1,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b8f6043 e-flex e-con-boxed e-con e-child\" data-id=\"b8f6043\" data-element_type=\"container\" data-e-type=\"container\" id=\"text-container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8081fe5 e-con-full e-flex e-con e-child\" data-id=\"8081fe5\" data-element_type=\"container\" data-e-type=\"container\" id=\"temp-container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0f99ae4 elementor-widget elementor-widget-text-editor\" data-id=\"0f99ae4\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"text-container\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Move the slider down and observe how the sea may vary in terms of warming. Take note of what happens depending on the temperature, then answer the quiz questions!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-249e719 elementor-widget elementor-widget-html\" data-id=\"249e719\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t    <div class=\"slider-container\">\n        <span class=\"temp-min\">10\u00b0C<\/span>\n        <input type=\"range\" id=\"temperature-slider\" min=\"10\" max=\"40\" value=\"10\">\n        <span class=\"temp-max\">40\u00b0C<\/span>\n    <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88d147a elementor-widget elementor-widget-button\" data-id=\"88d147a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/msp.netsoul.dev\/quiz\/cosa-sai-sullo-stress-termico\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Go to the quiz<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-97ca253 elementor-widget elementor-widget-html\" data-id=\"97ca253\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>document.addEventListener('DOMContentLoaded', function() {\n    var slider = document.getElementById('temperature-slider');\n    var bgGame = document.getElementById('bg-game-background');\n    var tempContainer = document.getElementById('temp-container');      \n    var textContainer = document.querySelector('#text-container > div > p');\n    \n    \n\n    var initialTemp = slider.value;\n    updateBackground(initialTemp);\n    updateTemperature(initialTemp);\n    \n\n    slider.addEventListener('input', function() {\n        var temp = slider.value;\n        updateBackground(temp);\n        updateTemperature(temp);\n        updateText(temp);\n    });\n\n    function updateBackground(temp) {\n        var backgroundImage;\n        switch (true) {\n            case (temp <= 16): backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/02\/lo.sti_.nspa_.ce_A_large_school_of_damselfish_Chromis_chromis_s_7385d503-3c25-4c90-b2f5-8a6377c3d010_2.png\")'; break; case (temp <= 26): backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/02\/lo.sti_.nspa_.ce_The_same_Mediterranean_underwater_scene_as_bef_80c5df0a-6a8e-49b0-8487-c786a9ad11a2_2.png\")'; break; case (temp <= 32): backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/02\/lo.sti_.nspa_.ce_An_evolving_Mediterranean_underwater_scene_sho_a1204d98-0ede-42eb-88b1-59d66433311a_0.png\")'; break; case (temp <= 40): backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/02\/lo.sti_.nspa_.ce_A_striking_Mediterranean_underwater_scene_wher_74f3f021-0f8a-4403-9b01-bdfe5ad9f050_3.png\")'; break; default: backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/02\/lo.sti_.nspa_.ce_A_large_school_of_damselfish_Chromis_chromis_s_7385d503-3c25-4c90-b2f5-8a6377c3d010_2.png\")'; } bgGame.style.backgroundImage = backgroundImage; } function updateTemperature(temp) { tempContainer.innerText = temp + '\u00b0C'; } function updateText(temp) { var text; switch (true) { case (temp <= 16): text = \"The damselfish (Chromis chromis), a small pelagic fish common in the shallow waters of the Mediterranean, is the preferred food of groupers (Epinephelus spp.), dentex (Dentex dentex), amberjacks (Seriola dumerili), bonitos (Sarda sarda), barracudas (Sphyraena viridensis), and little tunny (Euthynnus alletteratus).\";\n        break;\n    case (temp <= 26):\n        text = \"The warming of the sea is promoting the spread of the tropical grouper (Cephalopholis taeniops), an invasive species from the tropical Atlantic that poses a significant threat to various Mediterranean species, particularly crustaceans and small coastal fish like the damselfish.\";\n        break;\n    case (temp <= 32):\n        text = \"The damselfish is vulnerable to predation by the tropical grouper because it inhabits the same coastal and rocky environments frequented by the grouper.\";\n        break;\n    case (temp <= 40):\n        text = \"The tropical grouper is an aggressive and adaptable predator, hunting efficiently and reducing populations of smaller fish, thereby altering the local food chain. This imbalance can have cascading effects on the marine ecosystem, reducing biodiversity and disturbing ecological stability.\";\n        break;\n    default:\n        text = \"The damselfish (Chromis chromis), a small pelagic fish common in the shallow waters of the Mediterranean, is the preferred food of groupers (Epinephelus spp.), dentex (Dentex dentex), amberjacks (Seriola dumerili), bonitos (Sarda sarda), barracudas (Sphyraena viridensis), and little tunny (Euthynnus alletteratus).\";\n}\ntextContainer.innerText = text;\n } }); <\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2935145 elementor-widget elementor-widget-html\" data-id=\"2935145\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<svg style=\"position: absolute; width: 0; height: 0;\" aria-hidden=\"true\">\n  <filter id=\"underwater-bubble-filter\">\n    <!-- 1) feTurbulence per l'effetto acqua (animato) -->\n    <feturbulence type=\"fractalNoise\" basefrequency=\"0.02\" numoctaves=\"2\" result=\"turbulenceWater\">\n      <!-- Anima la baseFrequency per dare movimento \u201condeggiante\u201d -->\n      <animate attributename=\"baseFrequency\" values=\"0.02;0.03;0.02\" dur=\"15s\" repeatcount=\"indefinite\"\/>\n    <\/feturbulence>\n    \n    <!-- 2) Prima mappa di displacement: usa \"turbulenceWater\" per distorcere la grafica originale -->\n    <fedisplacementmap in=\"SourceGraphic\" in2=\"turbulenceWater\" scale=\"20\" xchannelselector=\"R\" ychannelselector=\"G\" result=\"underwaterDistortion\"\/>\n    \n    <!-- 3) Seconda feTurbulence per le \u201cbolle astratte\u201d (anch\u2019essa animata) -->\n    <feturbulence type=\"fractalNoise\" basefrequency=\"0.25\" numoctaves=\"1\" seed=\"1\" result=\"noiseBubbles\">\n      <!-- Anima la baseFrequency per far \u201cmuovere\u201d le bolle -->\n      <animate attributename=\"baseFrequency\" values=\"0.25;0.35;0.25\" dur=\"10s\" repeatcount=\"indefinite\"\/>\n    <\/feturbulence>\n    \n    <!-- 4) Creiamo un threshold (b\/n) con feComponentTransfer, cos\u00ec da estrarre zone circolari come \u201cbolle\u201d -->\n    <fecomponenttransfer in=\"noiseBubbles\" result=\"bubbleMask\">\n      <fefuncr type=\"discrete\" tablevalues=\"0 1\"\/>\n      <fefuncg type=\"discrete\" tablevalues=\"0 1\"\/>\n      <fefuncb type=\"discrete\" tablevalues=\"0 1\"\/>\n      <fefunca type=\"discrete\" tablevalues=\"1 1\"\/>\n    <\/fecomponenttransfer>\n    \n    <!-- 5) Ulteriore DisplacementMap: usiamo \u201cbubbleMask\u201d per distorcere l'immagine gi\u00e0 distorta in \u201cunderwaterDistortion\u201d -->\n    <fedisplacementmap in=\"underwaterDistortion\" in2=\"bubbleMask\" scale=\"1.1\" xchannelselector=\"R\" ychannelselector=\"G\" result=\"finalImage\"\/>\n    \n    <!-- Opzionale: se vuoi, puoi aggiungere un feColorMatrix, feGaussianBlur, ecc. Qui l\u2019output finale \u00e8 \"finalImage\" -->\n  <\/filter>\n<\/svg>\n\n\n<style>\n  \/* Applica il filtro al container *\/\n  #bg-game-background {\n    filter: url(#underwater-bubble-filter);\n    \/* Potresti ottimizzare o animare anche la transizione (opzionale) *\/\n    transition: filter 0.3s ease-in-out;\n  }\n\n  \/* (Facoltativo) Se hai un contenitore testuale sovrapposto,\n     potresti volere che non venga distorto.\n     In tal caso: \n     #bg-game .contenuto {\n        position: relative; \n        filter: none !important;\n     }\n  *\/\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe9d4d7 elementor-absolute elementor-widget elementor-widget-button\" data-id=\"fe9d4d7\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/msp.netsoul.dev\/play\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u2190<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Move the slider down and observe how the sea may vary in terms of warming. Take note of what happens depending on the temperature, then answer the quiz questions! 10\u00b0C 40\u00b0C Go to the quiz \u2190<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2662","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/pages\/2662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/comments?post=2662"}],"version-history":[{"count":4,"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/pages\/2662\/revisions"}],"predecessor-version":[{"id":2770,"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/pages\/2662\/revisions\/2770"}],"wp:attachment":[{"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/media?parent=2662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}