{"id":2658,"date":"2025-02-12T09:10:12","date_gmt":"2025-02-12T09:10:12","guid":{"rendered":"https:\/\/msp.netsoul.dev\/game-2\/"},"modified":"2025-02-12T11:29:22","modified_gmt":"2025-02-12T11:29:22","slug":"game-2","status":"publish","type":"page","link":"https:\/\/msp.netsoul.dev\/en\/game-2\/","title":{"rendered":"Game #2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2658\" class=\"elementor elementor-2658 elementor-2421\" 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_group_of_common_octopuses_Octopus_vulgaris_i_b2bdde0a-ae24-4658-a696-2232c7dd3bcf_0.png\")'; break; case (temp <= 26): backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/02\/lo.sti_.nspa_.ce_A_spotted_pufferfish_Lagocephalus_sceleratus_s_377d3c25-244d-4ccf-99b1-963832e48221_0.png\")'; break; case (temp <= 32): backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/02\/lo.sti_.nspa_.ce_A_Mediterranean_underwater_scene_where_invasiv_0c982a33-0822-4820-9d5e-dcd7d8e9958f_2.png\")'; break; default: backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/02\/lo.sti_.nspa_.ce_A_group_of_common_octopuses_Octopus_vulgaris_i_b2bdde0a-ae24-4658-a696-2232c7dd3bcf_0.png\")'; } bgGame.style.backgroundImage = backgroundImage; } function updateTemperature(temp) { tempContainer.innerText = temp + '\u00b0C'; } function updateText(temp) { var text; switch (true) { case (temp <= 16): text = \"The common octopus (Octopus vulgaris), once abundant in our seas, is now threatened not only by overfishing but also by climate change.\";\n        break;\n    case (temp <= 26):\n        text = \"The increase in sea temperatures is bringing alien species to the Mediterranean, such as the spotted pufferfish (Lagocephalus sceleratus). The pufferfish is dangerous for fishing and local marine fauna due to its voracious diet and its tetrodotoxin poison.\";\n        break;\n    case (temp <= 32):\n        text = \"The pufferfish, with its powerful mouth and sharp teeth, primarily hunts octopuses and other vulnerable invertebrates, drastically reducing their populations and causing ecological and economic impacts on Mediterranean fisheries.\";\n        break;\n    default:\n        text = \"The common octopus (Octopus vulgaris), once abundant in our seas, is now threatened not only by overfishing but also by climate change.\";\n}\ntextContainer.innerText = text; } }); <\/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-b3770d3 elementor-absolute elementor-widget elementor-widget-button\" data-id=\"b3770d3\" 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\/gioca\/\">\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-2658","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/pages\/2658","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=2658"}],"version-history":[{"count":4,"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/pages\/2658\/revisions"}],"predecessor-version":[{"id":2767,"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/pages\/2658\/revisions\/2767"}],"wp:attachment":[{"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/media?parent=2658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}