{"id":2654,"date":"2024-07-26T08:49:53","date_gmt":"2024-07-26T07:49:53","guid":{"rendered":"https:\/\/msp.netsoul.dev\/game\/"},"modified":"2025-02-12T11:27:51","modified_gmt":"2025-02-12T11:27:51","slug":"game","status":"publish","type":"page","link":"https:\/\/msp.netsoul.dev\/en\/game\/","title":{"rendered":"Game"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2654\" class=\"elementor elementor-2654 elementor-1298\" 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\/en\/quiz-en\/what-do-you-know-about-thermal-stress\/\">\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\/01\/lo.sti_.nspa_.ce_A_vibrant_underwater_photograph_of_a_dense_Pos_fd941310-65cd-4e78-b9ae-589ad0ea209a_0.png\")'; break; case (temp <= 26): backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/01\/lo.sti_.nspa_.ce_A_vibrant_underwater_photograph_of_a_dense_Pos_fd941310-65cd-4e78-b9ae-589ad0ea209a_3.png\")'; break; case (temp <= 32): backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/01\/lo.sti_.nspa_.ce_An_underwater_photograph_of_a_Mediterranean_Po_adc6d4bd-8cad-44e8-8522-0ebc36ea282f_1.png\")'; break; case (temp <= 40): backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/01\/lo.sti_.nspa_.ce_A_stark_underwater_scene_of_the_Mediterranean__5ca95087-454a-47ce-827e-ac7e7ef6de47_1.png\")'; break; default: backgroundImage = 'url(\"https:\/\/msp.netsoul.dev\/wp-content\/uploads\/2025\/01\/lo.sti_.nspa_.ce_A_vibrant_underwater_photograph_of_a_dense_Pos_fd941310-65cd-4e78-b9ae-589ad0ea209a_0.png\")'; } bgGame.style.backgroundImage = backgroundImage; } function updateTemperature(temp) { tempContainer.innerText = temp + '\u00b0C'; } function updateText(temp) { var text; switch (true) { case (temp <= 16): text = \"Posidonia oceanica is crucial for marine biodiversity as it provides shelter and food for numerous fish species, acts as a natural barrier against coastal erosion, and contributes to CO2 absorption.\";\n        break;\n    case (temp <= 26):\n        text = \"Due to the increase in sea temperature, Posidonia is one of the most threatened marine plants by the introduction of alien fish species such as the rabbitfish (Siganus rivulatus and Siganus luridus). The rabbitfish is herbivorous and feeds intensively on algae and marine plants, including Posidonia meadows, which play a fundamental role in the Mediterranean ecosystem.\";\n        break;\n    case (temp <= 32):\n        text = \"The destruction of Posidonia meadows by the rabbitfish can trigger a chain reaction in the marine ecosystem, as the loss of these habitats compromises the survival of many dependent species.\";\n        break;\n    case (temp <= 40):\n        text = \"Native species that depend on grassy or algal habitats, such as the salema (Sarpa salpa) and juvenile gilthead seabream (Sparus aurata), may suffer a drastic decline, causing an ecological imbalance that affects the natural predators of salema, species of high commercial value.\";\n        break;\n    default:\n        text = \"Posidonia oceanica is crucial for marine biodiversity as it provides shelter and food for numerous fish species, acts as a natural barrier against coastal erosion, and contributes to CO2 absorption.\";\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-7e44b54 elementor-absolute elementor-widget elementor-widget-button\" data-id=\"7e44b54\" 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\/en\/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-2654","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/pages\/2654","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=2654"}],"version-history":[{"count":12,"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/pages\/2654\/revisions"}],"predecessor-version":[{"id":2764,"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/pages\/2654\/revisions\/2764"}],"wp:attachment":[{"href":"https:\/\/msp.netsoul.dev\/en\/wp-json\/wp\/v2\/media?parent=2654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}