{"id":6078,"date":"2025-06-11T10:14:37","date_gmt":"2025-06-11T08:14:37","guid":{"rendered":"https:\/\/ocemflorence.com\/survey\/"},"modified":"2025-12-23T12:57:49","modified_gmt":"2025-12-23T11:57:49","slug":"configuratore","status":"publish","type":"page","link":"https:\/\/ocemflorence.com\/it\/configuratore\/","title":{"rendered":"Configuratore"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6078\" class=\"elementor elementor-6078 elementor-5351\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58605a4 e-flex e-con-boxed e-con e-parent\" data-id=\"58605a4\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-b240739 e-con-full e-flex e-con e-child\" data-id=\"b240739\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6add59e elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"6add59e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Configura il tuo impianto per scoprire la migliore soluzione per la tua produzione\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b4aebcf elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"b4aebcf\" data-element_type=\"widget\" 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>Seleziona i parametri e scopri quale sistema \u00e8 il migliore per le tue necessit\u00e0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9c2bc0b e-con-full e-flex e-con e-child\" data-id=\"9c2bc0b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b414e7d elementor-widget elementor-widget-shortcode\" data-id=\"b414e7d\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"survey-container\"><\/div>\n\n    <style>\n        .survey-slide{display:none}\n        .survey-slide.active{\n            display:flex;\n            gap:20px;\n            align-items:center;\n            animation:slideIn .3s forwards;\n        }\n        @keyframes slideIn{\n            from{opacity:0;transform:translateX(100%)}\n            to{opacity:1;transform:translateX(0)}\n        }\n\n        .survey-col-left{\n            flex:1;\n            display:flex;\n            flex-direction:column;\n            justify-content:center;\n        }\n        .survey-col-right{\n            flex:0 0 50%;\n            max-width:50%;\n        }\n        .survey-col-right img{\n            width:100%;\n            height:auto;\n        }\n\n        .survey-option{\n            cursor:pointer;\n            margin:10px 0;\n            padding:10px;\n            border:1px solid #ccc;\n        }\n        .survey-option:hover,\n        .survey-option.selected{\n            background:#c00;\n            color:#fff;\n            border-color:#c00;\n        }\n        .opt-letter{\n            font-weight:bold;\n            margin-right:6px;\n        }\n\n        .survey-buttons{\n            margin-top:20px;\n            display:flex;\n            gap:10px;\n        }\n        .survey-buttons button{\n            padding:6px 12px;\n        }\n\n        .loading-slide{\n            display:flex;\n            flex-direction:column;\n            justify-content:center;\n            align-items:center;\n            height:300px;\n            animation:fadeIn .3s ease forwards;\n        }\n        .spinner{\n            width:60px;\n            height:60px;\n            border:6px solid #ccc;\n            border-top:6px solid #c00;\n            border-radius:50%;\n            animation:spin 1s linear infinite;\n            margin-bottom:15px;\n        }\n        @keyframes spin{to{transform:rotate(360deg)}}\n        @keyframes fadeIn{from{opacity:0}to{opacity:1}}\n\n        .survey-recap-slide{\n            display:flex;\n            gap:20px;\n            align-items:center;\n            animation:fadeUp .6s ease forwards;\n        }\n        @keyframes fadeUp{\n            from{opacity:0;transform:translateY(40px)}\n            to{opacity:1;transform:translateY(0)}\n        }\n\n        .recap-items{\n            flex:1;\n            display:flex;\n            gap:20px;\n            flex-wrap:wrap;\n            justify-content:center;\n        }\n        .recap-items p{\n            text-align:center;\n            width:150px;\n        }\n        .recap-items img{\n            width:140px;\n            height:140px;\n            object-fit:cover;\n            margin-bottom:10px;\n        }\n\n        .recap-sidebar{\n            flex:0 0 50%;\n            max-width:50%;\n        }\n        .recap-sidebar img{\n            width:100%;\n            height:auto;\n        }\n\n        .primary-btn,\n        .restart-btn button{\n            padding:10px 22px;\n            font-size:16px;\n            border:none;\n            cursor:pointer;\n        }\n        .primary-btn{\n            background:#c00;\n            color:#fff;\n            margin-top:25px;\n            display:block;\n            margin-left:auto;\n            margin-right:auto;\n        }\n        .restart-btn{\n            text-align:center;\n            margin-top:15px;\n        }\n    <\/style>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\",function(){\n\n            const imgFirst =\"\/wp-content\/uploads\/2025\/06\/Final-usage.jpg\";\n            const imgLayer =\"\/wp-content\/uploads\/2025\/06\/Layers.svg\";\n            const imgWidth =\"\/wp-content\/uploads\/2025\/06\/working-width.svg\";\n\n            const imgSingle=\"\/wp-content\/uploads\/2025\/06\/Singolo-layer.svg\";\n            const imgDouble=\"\/wp-content\/uploads\/2025\/06\/Double-layer.svg\";\n            const imgTiles =\"\/wp-content\/uploads\/2025\/06\/Tiles.svg\"; \/\/ usata per Final usage come default\n            const imgBlocks=\"\/wp-content\/uploads\/2025\/06\/Blocks.svg\"; \/\/ non usata ora ma tenuta se servir\u00e0\n\n            const results={\n                A   :{link:\"https:\/\/ocemflorence.com\/impianto-a\/\",\n                      img:\"\/wp-content\/uploads\/2025\/06\/Impianto-A.jpg\"},\n                A1  :{link:\"https:\/\/ocemflorence.com\/impianto-a1\/\",\n                      img:\"\/wp-content\/uploads\/2025\/06\/Impianto-A1.jpg\"},\n                B   :{link:\"https:\/\/ocemflorence.com\/impianto-b\/\",\n                      img:\"\/wp-content\/uploads\/2025\/06\/Impianto-B.jpg\"},\n                B1  :{link:\"https:\/\/ocemflorence.com\/impianto-b1\/\",\n                      img:\"\/wp-content\/uploads\/2025\/06\/Impianto-B1.jpg\"},\n                B2  :{link:\"https:\/\/ocemflorence.com\/impianto-b2\/\",\n                      img:\"\/wp-content\/uploads\/2025\/06\/Impianto-B2.jpg\"},\n                C   :{link:\"https:\/\/ocemflorence.com\/impianto-c\/\",\n                      img:\"\/wp-content\/uploads\/2025\/06\/Impianto-C.jpg\"},\n                C1  :{link:\"https:\/\/ocemflorence.com\/impianto-c1\/\",\n                      img:\"\/wp-content\/uploads\/2025\/06\/Impianto-C1.jpg\"}\n            };\n\n            const survey={\n                D1:{\n                    img:imgFirst,\n                    q:\"End use\",\n                    opt:{\n                        INT:{t:\"Indoor\",           next:\"D2\", root:\"INT\"},\n                        EXT:{t:\"Outdoor\",           next:\"D2\", root:\"EXT\"},\n                        MIX:{t:\"Indoor + Outdoor\", next:\"D2\", root:\"MIX\"}\n                    }\n                },\n                D2:{\n                    img:imgLayer,\n                    q:\"Layer type\",\n                    opt:{\n                        SINGLE:{t:\"Single Layer\",          next:\"D3\", layer:\"SINGLE\"},\n                        DOUBLE:{t:\"Double Layer\",          next:\"D3\", layer:\"DOUBLE\"},\n                        BOTH:{t:\"Single + Double Layer\",   next:\"D3\", layer:\"BOTH\"}\n                    }\n                },\n                D3:{\n                    img:imgWidth,\n                    q:\"Tile size\",\n                    opt:{\n                        W500:{t:\"500x500 mm\",  w:\"500\"},\n                        W600:{t:\"600x600 mm or 2 pieces 400x400 mm\",  w:\"600\"},\n                        W1000:{t:\"1000x1000 mm or 2 pieces 600x600 mm\",w:\"1000\"}\n                    }\n                }\n            };\n\n            const container=document.getElementById(\"survey-container\");\n            const answers={};\n            const history=[\"D1\",\"D2\",\"D3\"];\n            let rootChoice=null;\n            let layerChoice=null;\n            const letters=\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n\n            function getCustomImage(choiceText,defaultImg){\n                const txt=choiceText.toLowerCase();\n                if(txt.includes(\"single\") && !txt.includes(\"+\")) return imgSingle;\n                if(txt.includes(\"double\") && !txt.includes(\"+\")) return imgDouble;\n                return defaultImg;\n            }\n\n            function computeImplant(root,layer,w){\n                if(root===\"INT\"){\n                    if(layer===\"DOUBLE\" && w===\"500\") return \"A\";\n                    if(layer===\"SINGLE\"){\n                        if(w===\"500\") return \"A1\";\n                        if(w===\"600\") return \"B\";\n                        if(w===\"1000\")return \"C\";\n                    }\n                    if(layer===\"BOTH\"){\n                        if(w===\"600\") return \"B2\";\n                        if(w===\"1000\")return \"C1\";\n                    }\n                }\n                if(root===\"EXT\"){\n                    if(layer===\"DOUBLE\"){\n                        if(w===\"500\") return \"A\";\n                        if(w===\"600\") return \"B1\";\n                    }\n                    if(layer===\"SINGLE\"){\n                        if(w===\"500\") return \"A1\";\n                        if(w===\"600\") return \"B\";\n                        if(w===\"1000\")return \"C\";\n                    }\n                    if(layer===\"BOTH\"){\n                        if(w===\"600\") return \"B2\";\n                        if(w===\"1000\")return \"C1\";\n                    }\n                }\n                if(root===\"MIX\"){\n                    if(layer===\"DOUBLE\" && w===\"500\") return \"A\";\n                    if(layer===\"SINGLE\"){\n                        if(w===\"500\") return \"A1\";\n                        if(w===\"600\") return \"B\";\n                        if(w===\"1000\")return \"C\";\n                    }\n                    if(layer===\"BOTH\"){\n                        if(w===\"600\") return \"B2\";\n                        if(w===\"1000\")return \"C1\";\n                    }\n                }\n                return null;\n            }\n\n            function isWidthAllowed(w){\n                if(!rootChoice || !layerChoice) return true;\n                if(rootChoice===\"INT\"){\n                    if(layerChoice===\"DOUBLE\") return w===\"500\";\n                    if(layerChoice===\"SINGLE\") return w===\"500\"||w===\"600\"||w===\"1000\";\n                    if(layerChoice===\"BOTH\")   return w===\"600\"||w===\"1000\";\n                }\n                if(rootChoice===\"EXT\"){\n                    if(layerChoice===\"DOUBLE\") return w===\"500\"||w===\"600\";\n                    if(layerChoice===\"SINGLE\") return w===\"500\"||w===\"600\"||w===\"1000\";\n                    if(layerChoice===\"BOTH\")   return w===\"600\"||w===\"1000\";\n                }\n                if(rootChoice===\"MIX\"){\n                    if(layerChoice===\"DOUBLE\") return w===\"500\";\n                    if(layerChoice===\"SINGLE\") return w===\"500\"||w===\"600\"||w===\"1000\";\n                    if(layerChoice===\"BOTH\")   return w===\"600\"||w===\"1000\";\n                }\n                return false;\n            }\n\n            function renderSlide(id){\n                const step=survey[id];\n                container.innerHTML=\"\";\n                const slide=document.createElement(\"div\");\n                slide.className=\"survey-slide active\";\n\n                const left=document.createElement(\"div\");\n                left.className=\"survey-col-left\";\n                left.innerHTML=`<h4>${step.q}<\/h4>`;\n\n                Object.entries(step.opt).forEach(([key,opt],index)=>{\n                    if(id===\"D3\" && opt.w && !isWidthAllowed(opt.w)){\n                        return;\n                    }\n                    const btn=document.createElement(\"div\");\n                    btn.className=\"survey-option\";\n                    btn.innerHTML=`<span class=\"opt-letter\">${letters[index]})<\/span> ${opt.t}`;\n                    if(answers[id]===key) btn.classList.add(\"selected\");\n\n                    btn.onclick=()=>{\n                        if(id===\"D1\" && opt.root){\n                            rootChoice=opt.root;\n                        }\n                        if(id===\"D2\" && opt.layer){\n                            layerChoice=opt.layer;\n                        }\n\n                        if(answers[id]===key){\n                            delete answers[id];\n                            if(id===\"D1\") rootChoice=null;\n                            if(id===\"D2\") layerChoice=null;\n                            if(id===\"D3\"){} \n                            renderSlide(id);\n                            return;\n                        }\n\n                        answers[id]=key;\n\n                        if(id!==\"D3\"){\n                            const nextId=opt.next;\n                            renderSlide(nextId);\n                        }else{\n                            const w=opt.w;\n                            const resKey=computeImplant(rootChoice,layerChoice,w);\n                            showLoading(resKey);\n                        }\n                    };\n\n                    left.appendChild(btn);\n                });\n\n                const nav=document.createElement(\"div\");\n                nav.className=\"survey-buttons\";\n                const idx=history.indexOf(id);\n                if(idx>0){\n                    const back=document.createElement(\"button\");\n                    back.textContent=\"\u2190 Back\";\n                    back.onclick=()=>renderSlide(history[idx-1]);\n                    nav.appendChild(back);\n                }\n                if(idx<history.length-1){\n                    const next=document.createElement(\"button\");\n                    next.textContent=\"Next \u2192\";\n                    next.onclick=()=>renderSlide(history[idx+1]);\n                    nav.appendChild(next);\n                }\n                left.appendChild(nav);\n\n                const right=document.createElement(\"div\");\n                right.className=\"survey-col-right\";\n                right.innerHTML=`<img decoding=\"async\" src=\"${step.img}\" alt=\"\">`;\n\n                slide.appendChild(left);\n                slide.appendChild(right);\n                container.appendChild(slide);\n            }\n\n            function showLoading(resKey){\n                container.innerHTML=\"\";\n                const load=document.createElement(\"div\");\n                load.className=\"loading-slide\";\n                load.innerHTML=`<div class=\"spinner\"><\/div><p>Setting-up plant...<\/p>`;\n                container.appendChild(load);\n                setTimeout(()=>renderRecap(resKey),2000);\n            }\n\n            function buildDynamicMessage(resKey) {\n                const rootTxt  = survey.D1.opt[answers.D1].t;\n                const layerTxt = survey.D2.opt[answers.D2].t;\n                const widthTxt = survey.D3.opt[answers.D3].t;\n                return `Plant ${resKey} \u2013 ${rootTxt}, ${layerTxt}, ${widthTxt}`;\n}\n\n            function renderRecap(resKey){\n                const resObj=results[resKey];\n                container.innerHTML=\"\";\n\n                const pre=document.createElement(\"h5\");\n                pre.textContent=\"Based on your choices, the best system configuration for your needs is:\";\n                pre.style.textAlign=\"center\";\n\n                const title=document.createElement(\"h5\");\n                title.textContent=buildDynamicMessage(resKey);\n                title.style.textAlign=\"center\";\n\n                const recapSlide=document.createElement(\"div\");\n                recapSlide.className=\"survey-recap-slide\";\n\n                const items=document.createElement(\"div\");\n                items.className=\"recap-items\";\n\n                [\"D1\",\"D2\",\"D3\"].forEach(stepId=>{\n                    const step=survey[stepId];\n                    const ansKey=answers[stepId];\n                    if(!ansKey) return;\n                    const choiceTxt=step.opt[ansKey].t;\n                    let defaultImg=step.img;\n                    if(stepId===\"D1\") defaultImg=imgTiles;\n                    const imgSrc=getCustomImage(choiceTxt,defaultImg);\n                    const card=document.createElement(\"p\");\n                    card.innerHTML=`<img decoding=\"async\" src=\"${imgSrc}\" alt=\"\"><br><strong>${choiceTxt}<\/strong>`;\n                    items.appendChild(card);\n                });\n\n                const sidebar=document.createElement(\"div\");\n                sidebar.className=\"recap-sidebar\";\n                sidebar.innerHTML=`<img decoding=\"async\" src=\"${resObj.img}\" alt=\"\">`;\n\n                recapSlide.appendChild(items);\n                recapSlide.appendChild(sidebar);\n\n                const btn=document.createElement(\"button\");\n                btn.className=\"primary-btn\";\n                btn.textContent=\"Discover the Plant\";\n                btn.onclick=()=>{ if(resObj.link && resObj.link !== \"#\") window.open(resObj.link,\"_blank\"); };\n\n                const restartDiv=document.createElement(\"div\");\n                restartDiv.className=\"restart-btn\";\n                restartDiv.innerHTML=`<button>Restart<\/button>`;\n                restartDiv.querySelector(\"button\").onclick=restartSurvey;\n\n                container.appendChild(pre);\n                container.appendChild(title);\n                container.appendChild(recapSlide);\n                container.appendChild(btn);\n                container.appendChild(restartDiv);\n            }\n\n            function restartSurvey(){\n                for(const k in answers) delete answers[k];\n                rootChoice=null;\n                layerChoice=null;\n                renderSlide(\"D1\");\n            }\n\n            renderSlide(\"D1\");\n        });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Configura il tuo impianto per scoprire la migliore soluzione per la tua produzione Seleziona i parametri e scopri quale sistema \u00e8 il migliore per le tue necessit\u00e0<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-6078","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ocemflorence.com\/it\/wp-json\/wp\/v2\/pages\/6078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ocemflorence.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ocemflorence.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ocemflorence.com\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ocemflorence.com\/it\/wp-json\/wp\/v2\/comments?post=6078"}],"version-history":[{"count":3,"href":"https:\/\/ocemflorence.com\/it\/wp-json\/wp\/v2\/pages\/6078\/revisions"}],"predecessor-version":[{"id":6092,"href":"https:\/\/ocemflorence.com\/it\/wp-json\/wp\/v2\/pages\/6078\/revisions\/6092"}],"wp:attachment":[{"href":"https:\/\/ocemflorence.com\/it\/wp-json\/wp\/v2\/media?parent=6078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}