{"id":3959,"date":"2025-03-02T23:09:52","date_gmt":"2025-03-02T23:09:52","guid":{"rendered":"https:\/\/mitellus.fr\/?p=3959"},"modified":"2025-03-02T23:24:53","modified_gmt":"2025-03-02T23:24:53","slug":"luscher-color-test","status":"publish","type":"post","link":"https:\/\/mitellus.fr\/?p=3959","title":{"rendered":"L\u00fcscher Color Test"},"content":{"rendered":"    <style>\n        #luscher-test { text-align: center; margin: 20px auto; max-width: 800px; }\n        .color-box { width: 100px; height: 100px; display: inline-block; margin: 10px; cursor: pointer; border: 2px solid #ccc; }\n        .selected { opacity: 0.5; pointer-events: none; border-color: #007bff; }\n        .consent-box { margin: 15px 0; }\n        .error-message { color: red; display: none; margin-top: 5px; }\n        #color-container { margin: 20px 0; }\n        .debug-info { background: #fff3cd; padding: 10px; margin: 10px 0; border: 1px solid #ffeeba; }\n    <\/style>\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const colors = [\n                { name: 'Gray', hex: '#8B8B83' },    \/\/ L\u00fcscher Gray\n                { name: 'Blue', hex: '#000099' },    \/\/ L\u00fcscher Blue\n                { name: 'Green', hex: '#006600' },   \/\/ L\u00fcscher Green\n                { name: 'Red', hex: '#CC0000' },     \/\/ L\u00fcscher Red\n                { name: 'Yellow', hex: '#FFFF00' },  \/\/ L\u00fcscher Yellow (close match)\n                { name: 'Violet', hex: '#660066' },  \/\/ L\u00fcscher Violet\n                { name: 'Brown', hex: '#663300' },   \/\/ L\u00fcscher Brown\n                { name: 'Black', hex: '#000000' }    \/\/ L\u00fcscher Black\n            ];\n            \n            function shuffle(array) {\n                for (let i = array.length - 1; i > 0; i--) {\n                    const j = Math.floor(Math.random() * (i + 1));\n                    [array[i], array[j]] = [array[j], array[i]];\n                }\n                return array;\n            }\n            shuffle(colors);\n\n            let firstOrder = [];\n            let secondOrder = [];\n            let round = 1;\n\n            const container = document.getElementById('color-container');\n            const resetBtn = document.getElementById('reset');\n            const form = document.getElementById('luscherForm');\n            const nameInput = document.getElementById('name');\n            const emailInput = document.getElementById('email');\n            const gdprConsent = document.getElementById('gdpr-consent');\n            const healthConsent = document.getElementById('health-consent');\n            const honeypot = document.getElementById('website');\n            const firstOrderInput = document.getElementById('firstOrderInput');\n            const secondOrderInput = document.getElementById('secondOrderInput');\n\n            function renderColors() {\n                container.innerHTML = '';\n                colors.forEach(color => {\n                    const div = document.createElement('div');\n                    div.className = 'color-box';\n                    div.style.backgroundColor = color.hex;\n                    div.dataset.color = color.name;\n                    div.addEventListener('click', handleClick);\n                    container.appendChild(div);\n                });\n            }\n\n            function handleClick(e) {\n                const color = e.target.dataset.color;\n                if (round === 1) {\n                    firstOrder.push(color);\n                    e.target.classList.add('selected');\n                    if (firstOrder.length === 8) {\n                        resetBtn.style.display = 'block';\n                    }\n                } else {\n                    secondOrder.push(color);\n                    e.target.classList.add('selected');\n                    if (secondOrder.length === 8) {\n                        form.querySelector('button[type=\"submit\"]').style.display = 'block';\n                    }\n                }\n            }\n\n            resetBtn.addEventListener('click', function() {\n                round = 2;\n                shuffle(colors);\n                renderColors();\n                resetBtn.style.display = 'none';\n                document.getElementById('instructions').textContent = 'Round 2: Select colors in order of preference again.';\n            });\n\n            form.addEventListener('submit', function(event) {\n                event.preventDefault();\n                \n                let name = nameInput.value.trim();\n                let email = emailInput.value.trim();\n                let gdpr = gdprConsent.checked;\n                let health = healthConsent.checked;\n                let honeypotVal = honeypot.value.trim();\n\n                if (!name) { document.getElementById('name-error').style.display = 'block'; return; }\n                if (!email || !\/\\S+@\\S+\\.\\S+\/.test(email)) { document.getElementById('email-error').style.display = 'block'; return; }\n                if (!gdpr) { document.getElementById('gdpr-error').style.display = 'block'; return; }\n                if (!health) { document.getElementById('health-error').style.display = 'block'; return; }\n                if (honeypotVal) { console.log(\"Spam detected\"); return; }\n                if (firstOrder.length !== 8 || secondOrder.length !== 8) { document.getElementById('selection-error').style.display = 'block'; return; }\n\n                firstOrderInput.value = JSON.stringify(firstOrder);\n                secondOrderInput.value = JSON.stringify(secondOrder);\n                form.submit();\n            });\n\n            renderColors();\n        });\n    <\/script>\n    \n            <form id=\"luscherForm\" method=\"post\" action=\"https:\/\/mitellus.fr\/wp-admin\/admin-post.php?action=luscher_test_submit\">\n            <div id=\"luscher-test\">\n                <h3>L\u00fcscher Color Test<\/h3>\n                <p id=\"instructions\">Round 1: Select colors in order of preference by clicking them.<\/p>\n                \n                <label for=\"name\"><h4>How should I call you?<\/h4><\/label>\n                <input type=\"text\" id=\"name\" name=\"name\" required>\n                <span id=\"name-error\" class=\"error-message\">Please enter your name.<\/span><br><br>\n\n                <label for=\"email\"><h4>Your Email Address:<\/h4><\/label>\n                <input type=\"email\" id=\"email\" name=\"email\" required>\n                <span id=\"email-error\" class=\"error-message\">Please enter a valid email address.<\/span><br><br>\n\n                <label for=\"comment\"><h4>Any Comments:<\/h4><\/label>\n                <textarea id=\"comment\" name=\"comment\" rows=\"4\" cols=\"50\"><\/textarea><br><br>\n\n                <div class=\"consent-box\">\n                    <input type=\"checkbox\" id=\"gdpr-consent\" name=\"gdpr_consent\" required>\n                    <label for=\"gdpr-consent\">I consent to the processing of my personal data in accordance with GDPR for the purpose of this test.<\/label>\n                    <span id=\"gdpr-error\" class=\"error-message\">GDPR consent is required.<\/span>\n                <\/div>\n\n                <div class=\"consent-box\">\n                    <input type=\"checkbox\" id=\"health-consent\" name=\"health_consent\" required>\n                    <label for=\"health-consent\">I consent to my data being used to evaluate my mental state as part of this test.<\/label>\n                    <span id=\"health-error\" class=\"error-message\">Health evaluation consent is required.<\/span>\n                <\/div>\n\n                <div style=\"display: none;\">\n                    <label for=\"website\">Leave this blank:<\/label>\n                    <input type=\"text\" id=\"website\" name=\"website\">\n                <\/div>\n\n                <div id=\"color-container\"><\/div>\n                <span id=\"selection-error\" class=\"error-message\">Please complete both rounds of color selection (8 colors each).<\/span>\n                <button id=\"reset\" style=\"display: none;\">Next Round<\/button>\n                <button type=\"submit\" style=\"display: none;\"><h3>Submit<\/h3><\/button>\n\n                <input type=\"hidden\" id=\"firstOrderInput\" name=\"first_order\" value=\"\">\n                <input type=\"hidden\" id=\"secondOrderInput\" name=\"second_order\" value=\"\">\n            <\/div>\n        <\/form>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3959","post","type-post","status-publish","format-standard","hentry","category-experience"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mitellus.fr\/index.php?rest_route=\/wp\/v2\/posts\/3959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitellus.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitellus.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitellus.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitellus.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3959"}],"version-history":[{"count":3,"href":"https:\/\/mitellus.fr\/index.php?rest_route=\/wp\/v2\/posts\/3959\/revisions"}],"predecessor-version":[{"id":3962,"href":"https:\/\/mitellus.fr\/index.php?rest_route=\/wp\/v2\/posts\/3959\/revisions\/3962"}],"wp:attachment":[{"href":"https:\/\/mitellus.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitellus.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitellus.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}