{"id":4214,"date":"2026-04-27T08:41:30","date_gmt":"2026-04-27T08:41:30","guid":{"rendered":"https:\/\/procandor.be\/?page_id=4214"},"modified":"2026-06-16T20:38:39","modified_gmt":"2026-06-16T20:38:39","slug":"color-quickscan","status":"publish","type":"page","link":"https:\/\/procandor.be\/en\/color-quickscan\/","title":{"rendered":"Color Quickscan"},"content":{"rendered":"\t<section class=\"pcqs-section\">\n\t\t<div\n\t\t\tclass=\"pcqs-container\"\n\t\t\tdata-props=\"{&quot;teamUuid&quot;:&quot;&quot;,&quot;questionsJsonUrl&quot;:&quot;https:\\\/\\\/procandor.be\\\/wp-content\\\/themes\\\/bricks-child%281%29\\\/colorscan\\\/Kleurenbevraging.json&quot;,&quot;profilesJsonUrl&quot;:&quot;https:\\\/\\\/procandor.be\\\/wp-content\\\/themes\\\/bricks-child%281%29\\\/colorscan\\\/profiles.json&quot;,&quot;successUrl&quot;:&quot;\\\/color-qs\\\/submission&quot;,&quot;submitUrl&quot;:&quot;https:\\\/\\\/procandor.be\\\/en\\\/wp-json\\\/procandor\\\/v1\\\/colorscan\\\/submit&quot;,&quot;useProfiles&quot;:false,&quot;language&quot;:&quot;nl&quot;,&quot;ui&quot;:{&quot;loading&quot;:&quot;loading...&quot;,&quot;notFound&quot;:&quot;404 message&quot;,&quot;errorMessage&quot;:&quot;error message&quot;,&quot;stepLabel&quot;:&quot;Stap&quot;,&quot;ofLabel&quot;:&quot;van&quot;,&quot;stepsLeftLabel&quot;:&quot;stap(pen)&quot;,&quot;successTitle&quot;:&quot;Indiening succesvol&quot;,&quot;successBody&quot;:&quot;Bedankt voor het invullen van de Color Quickscan vragenlijst. Het profiel wordt gedeeld met je tijdens de aankomende training\\\/coaching&quot;,&quot;formIntro&quot;:&quot;Vul je gegevens in en verstuur je resultaten.&quot;,&quot;nameLabel&quot;:&quot;Naam&quot;,&quot;emailLabel&quot;:&quot;E-mail&quot;,&quot;submittingLabel&quot;:&quot;Bezig met versturen...&quot;,&quot;submitLabel&quot;:&quot;Versturen&quot;,&quot;errorLabel&quot;:&quot;Fout&quot;,&quot;disagreeLabel&quot;:&quot;Oneens&quot;,&quot;agreeLabel&quot;:&quot;Eens&quot;,&quot;previousButton&quot;:&quot;Vorige&quot;,&quot;nextButton&quot;:&quot;Volgende&quot;}}\"\n\t\t>\n\t\t\t<div class=\"pcqs-body\">\n\t\t\t\t<p class=\"pcqs-loading\">loading...<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/section>\n\n\t<style>\n\t\t.pcqs-container{\n\t\t\tfont-size: 18px;\n\t\t\tline-height: 1.6;\n\t\t\t-webkit-font-smoothing: antialiased;\n\t\t\t-moz-osx-font-smoothing: grayscale;\n\t\t}\n\t\t@media (max-width: 640px){\n\t\t\t.pcqs-container{ font-size: 16px; }\n\t\t}\n\t\t.pcqs-section{\n\t\t\tmin-height: 100vh;\n\t\t\tpadding: 60px 0;\n\t\t}\n\t\t.pcqs-container{\n\t\t\tmax-width: 750px;\n\t\t\tmargin: 0 auto;\n\t\t\tpadding: 1.5rem;\n\t\t}\n\t\t\n\t\t.pcqs-muted{ color: #4b5563; }\n\t\t.pcqs-loading{ margin: 0; }\n\t\t.pcqs-card{\n\t\t\tbackground: #fff;\n\t\t\tborder-radius: 0.75rem;\n\t\t\tborder: 2px solid #e5e7eb;\n\t\t\tpadding: 1.5rem;\n\t\t\tmargin-bottom: 1rem;\n\t\t\tbox-shadow: 0 1px 2px rgba(0,0,0,.04);\n\t\t}\n\t\t.pcqs-progress{\n\t\t\tmargin-bottom: 1.5rem;\n\t\t}\n\t\t.pcqs-progress-head{\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: space-between;\n\t\t\tfont-size: 14px;\n\t\t\tcolor: #4b5563;\n\t\t\tmargin-bottom: .25rem;\n\t\t}\n\t\t.pcqs-progress-track{\n\t\t\theight: .5rem;\n\t\t\tbackground: #e5e7eb;\n\t\t\tborder-radius: 9999px;\n\t\t\toverflow: hidden;\n\t\t}\n\t\t.pcqs-progress-bar{\n\t\t\theight: 100%;\n\t\t\tbackground: var(--bricks-color-aucixi);\n\t\t\twidth: 0%;\n\t\t\ttransition: width .3s ease;\n\t\t}\n\t\t.pcqs-nav{\n\t\t\tdisplay:flex;\n\t\t\tjustify-content: space-between;\n\t\t\talign-items: center;\n\t\t\tmargin-top: 1.5rem;\n\t\t\tpadding-top: 1rem;\n\t\t}\n\t\t.pcqs-btn{\n\t\t\tdisplay:inline-flex;\n\t\t\talign-items:center;\n\t\t\tgap:.5rem;\n\t\t\tborder: 0;\n\t\t\tborder-radius: .5rem;\n\t\t\tpadding: .75rem 1.125rem;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tcursor: pointer;\n\t\t\ttransition: background .2s ease, opacity .2s ease;\n\t\t}\n\t\t.pcqs-btn:disabled{ opacity: .55; cursor: not-allowed; }\n\t\t.pcqs-btn-prev{ background:#e5e7eb; color:#374151; }\n\t\t.pcqs-btn-prev:not(:disabled):hover{ background:#d1d5db; }\n\t\t.pcqs-btn-next{ background:var(--bricks-color-lxawwg); color:white; }\n\t\t.pcqs-btn-next:hover{ background: color-mix(in srgb, var(--bricks-color-lxawwg) 85%, #000 15%); }\n\t\t.pcqs-btn-primary{ background:var(--bricks-color-lxawwg); color:white; }\n\t\t.pcqs-btn-primary:hover{ background: color-mix(in srgb, var(--bricks-color-lxawwg) 85%, #000 15%); }\n\n\t\t.pcqs-slider-container {\n\t\t\tpadding: 1.5rem 1rem 2rem;\n\t\t\tborder-radius: 16px;\n\t\t\tmargin-bottom: 1rem;\n\t\t\ttransition: all 0.3s ease;\n\t\t}\n\t\t.pcqs-slider-container:hover {\n\t\t\tbackground: #f1f5f9;\n\t\t\tbox-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.05);\n\t\t}\n\t\t.pcqs-slider-input {\n\t\t\twidth: 100%;\n\t\t\theight: 12px;\n\t\t\tbackground: #e2e8f0;\n\t\t\tborder-radius: 8px;\n\t\t\toutline: none;\n\t\t\t-webkit-appearance: none;\n\t\t\tappearance: none;\n\t\t\tmargin: 0.5rem 0;\n\t\t\tpadding: 0;\n\t\t\ttransition: all 0.2s ease;\n\t\t}\n\t\t.pcqs-slider-input::-webkit-slider-thumb {\n\t\t\t-webkit-appearance: none;\n\t\t\tappearance: none;\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tborder-radius: 50%;\n\t\t\tbackground: var(--bricks-color-lxawwg);\n\t\t\tcursor: pointer;\n\t\t\tborder: 2px solid white;\n\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\t\t\tmargin-top: -8px;\n\t\t\ttransition: all 0.2s ease;\n\t\t}\n\t\t.pcqs-slider-input::-moz-range-thumb {\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tborder-radius: 50%;\n\t\t\tbackground: var(--bricks-color-lxawwg);\n\t\t\tcursor: pointer;\n\t\t\tborder: 2px solid white;\n\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\t\t\tappearance: none;\n\t\t}\n\t\t.pcqs-slider-input::-webkit-slider-runnable-track {\n\t\t\theight: 12px;\n\t\t\tborder-radius: 6px;\n\t\t\tbackground: #e5e7eb;\n\t\t\tappearance: none;\n\t\t}\n\t\t.pcqs-slider-input::-moz-range-track {\n\t\t\theight: 12px;\n\t\t\tborder-radius: 6px;\n\t\t\tbackground: #e5e7eb;\n\t\t}\n\t\t.pcqs-slider-scale {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: space-between;\n\t\t\tpadding: 0;\n\t\t\tmargin: 0.5rem 0 0 0;\n\t\t\twidth: calc(100% - 16px);\n\t\t\tmargin-left: 8px;\n\t\t}\n\t\t.pcqs-scale-point {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tposition: relative;\n\t\t\twidth: 20px;\n\t\t}\n\t\t.pcqs-scale-mark {\n\t\t\twidth: 2px;\n\t\t\theight: 8px;\n\t\t\tbackground: #9ca3af;\n\t\t\tmargin-bottom: 4px;\n\t\t}\n\t\t.pcqs-scale-label {\n\t\t\tfont-size: 12px;\n\t\t\tcolor: #4b5563;\n\t\t\tfont-weight: 500;\n\t\t\tposition: absolute;\n\t\t\ttop: 10px;\n\t\t}\n\t\t.pcqs-slider-input:hover::-webkit-slider-thumb {\n\t\t\ttransform: scale(1.15);\n\t\t\tbox-shadow: 0 4px 12px rgba(26, 158, 255, 0.35);\n\t\t}\n\t\t.pcqs-form-row{ margin-bottom: 1rem; }\n\t\t.pcqs-label{ display:block; font-size:14px; font-weight:600; color:#374151; margin-bottom:.25rem; }\n\t\t.pcqs-input{\n\t\t\twidth: 100%;\n\t\t\tborder: 1px solid #d1d5db;\n\t\t\tborder-radius: .5rem;\n\t\t\tpadding: .75rem .875rem;\n\t\t\tfont-size: 14px;\n\t\t}\n\t\t.pcqs-input:focus{\n\t\t\toutline: none;\n\t\t\tborder-color: var(--bricks-color-lxawwg);\n\t\t\tbox-shadow: 0 0 0 3px rgba(26, 158, 255, 0.25);\n\t\t}\n\t\t.pcqs-status-ok{ font-size: 14px; color:#15803d; margin-top:.5rem; }\n\t\t.pcqs-status-err{ font-size: 14px; color:#b91c1c; margin-top:.5rem; }\n\t<\/style>\n\n\t<script>\n\t(function(){\n\t\tconst root = document.currentScript?.previousElementSibling?.previousElementSibling?.querySelector?.('[data-props]') || document.querySelector('[data-props]');\n\t\tif (!root) return;\n\n\t\tlet props = {};\n\t\ttry { props = JSON.parse(root.getAttribute('data-props') || '{}'); } catch(e) { props = {}; }\n\t\tconst ui = props.ui || {};\n\n\t\tconst LIKERT_MAX_SCORE = 10;\n\t\tconst QUESTIONS_PER_PAGE = 5;\n\t\tconst COLOR_KEYS = ['Rood','Groen','Blauw','Geel'];\n\t\tconst DRAFT_STORAGE_KEY_PREFIX = props.language === 'en' ? 'color-qs-en-draft-' : 'color-qs-draft-';\n\n\t\tconst state = {\n\t\t\tviewState: 'loading', \/\/ loading | found | not-found | error\n\t\t\terrorMessage: '',\n\t\t\tteamUuid: (props.teamUuid || '').trim(),\n\t\t\tcurrentStep: 0,\n\t\t\tinitialLoadDone: false,\n\t\t\tisSubmitting: false,\n\t\t\tsubmitStatus: 'idle', \/\/ idle | success | error\n\t\t\tsubmitErrorMessage: '',\n\t\t\tname: '',\n\t\t\temail: '',\n\t\t\tquestions: [],\n\t\t\tprofiles: [],\n\t\t\tanswers: new Map(), \/\/ index -> { questionIndex, question, kleur, eigenschap, value }\n\t\t};\n\n\t\tfunction qs(sel, el){ return (el || root).querySelector(sel); }\n\t\tfunction t(key, fallback){ return String(ui[key] || fallback || ''); }\n\t\tfunction scrollToTop(){ window.scrollTo({ top: 0, behavior: 'smooth' }); }\n\n\t\tfunction inferTeamUuidFromUrl(){\n\t\t\tif (state.teamUuid) return state.teamUuid;\n\t\t\ttry {\n\t\t\t\tconst url = new URL(window.location.href);\n\t\t\t\tconst q = (url.searchParams.get('team_uuid') || '').trim();\n\t\t\t\tif (q) return q;\n\t\t\t\tconst parts = url.pathname.split('\/').filter(Boolean);\n\t\t\t\tconst last = (parts[parts.length - 1] || '').trim();\n\t\t\t\treturn last || '';\n\t\t\t} catch (_) {\n\t\t\t\treturn '';\n\t\t\t}\n\t\t}\n\n\t\tfunction normalizeColorName(color){\n\t\t\tconst normalized = String(color || '').trim().toLowerCase();\n\t\t\tif (normalized === 'rood' || normalized === 'red') return 'Rood';\n\t\t\tif (normalized === 'groen' || normalized === 'green') return 'Groen';\n\t\t\tif (normalized === 'blauw' || normalized === 'blue') return 'Blauw';\n\t\t\tif (normalized === 'geel' || normalized === 'yellow') return 'Geel';\n\t\t\treturn null;\n\t\t}\n\n\t\tfunction normalizeColorCondition(color){\n\t\t\tconst normalized = normalizeColorName(color);\n\t\t\treturn normalized ? normalized.toLowerCase() : '';\n\t\t}\n\n\t\tfunction totalQuestionSteps(){\n\t\t\treturn Math.ceil((state.questions.length || 0) \/ QUESTIONS_PER_PAGE);\n\t\t}\n\n\t\tfunction totalSteps(){\n\t\t\treturn totalQuestionSteps() + 1; \/\/ last step is form\n\t\t}\n\n\t\tfunction formStepIndex(){\n\t\t\treturn totalSteps() - 1;\n\t\t}\n\n\t\tfunction onFormStep(){\n\t\t\treturn state.currentStep === formStepIndex();\n\t\t}\n\n\t\tfunction stepsLeft(){\n\t\t\treturn totalSteps() - state.currentStep - 1;\n\t\t}\n\n\t\tfunction progressPercent(){\n\t\t\tconst ts = totalSteps();\n\t\t\tif (ts <= 0) return 0;\n\t\t\treturn ((state.currentStep + 1) \/ ts) * 100;\n\t\t}\n\n\t\tfunction getQuestionsForStep(step){\n\t\t\tconst start = step * QUESTIONS_PER_PAGE;\n\t\t\tconst end = Math.min(start + QUESTIONS_PER_PAGE, state.questions.length);\n\t\t\treturn state.questions.slice(start, end).map((q, i) => ({ question: q, index: start + i }));\n\t\t}\n\n\t\tfunction initializeAnswers(){\n\t\t\tstate.questions.forEach((q, index) => {\n\t\t\t\tif (!state.answers.has(index)) {\n\t\t\t\t\tstate.answers.set(index, {\n\t\t\t\t\t\tquestionIndex: index,\n\t\t\t\t\t\tquestion: q.Vraag,\n\t\t\t\t\t\tkleur: q.Kleur,\n\t\t\t\t\t\teigenschap: q.Eigenschap,\n\t\t\t\t\t\tvalue: 1\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\tfunction getAnswerValue(questionIndex){\n\t\t\tconst a = state.answers.get(questionIndex);\n\t\t\treturn a && typeof a.value === 'number' ? a.value : 1;\n\t\t}\n\n\t\tfunction saveDraft(){\n\t\t\tif (!state.teamUuid) return;\n\t\t\ttry{\n\t\t\t\tconst answersObj = {};\n\t\t\t\tstate.answers.forEach((a, idx) => { answersObj[String(idx)] = a.value; });\n\t\t\t\tconst data = { step: state.currentStep, answers: answersObj, name: state.name, email: state.email };\n\t\t\t\tlocalStorage.setItem(DRAFT_STORAGE_KEY_PREFIX + state.teamUuid, JSON.stringify(data));\n\t\t\t}catch(_){}\n\t\t}\n\n\t\tfunction loadDraft(){\n\t\t\tif (!state.teamUuid) return;\n\t\t\ttry{\n\t\t\t\tconst raw = localStorage.getItem(DRAFT_STORAGE_KEY_PREFIX + state.teamUuid);\n\t\t\t\tif (!raw) return;\n\t\t\t\tconst data = JSON.parse(raw) || {};\n\t\t\t\tif (data.step != null) {\n\t\t\t\t\tconst s = Number(data.step);\n\t\t\t\t\tif (!Number.isNaN(s) && s >= 0 && s < totalSteps()) state.currentStep = s;\n\t\t\t\t}\n\t\t\t\tif (data.name != null) state.name = String(data.name);\n\t\t\t\tif (data.email != null) state.email = String(data.email);\n\t\t\t\tif (data.answers && typeof data.answers === 'object') {\n\t\t\t\t\tObject.entries(data.answers).forEach(([key, value]) => {\n\t\t\t\t\t\tconst index = parseInt(key, 10);\n\t\t\t\t\t\tif (Number.isNaN(index) || index < 0 || index >= state.questions.length) return;\n\t\t\t\t\t\tconst existing = state.answers.get(index);\n\t\t\t\t\t\tif (!existing) return;\n\t\t\t\t\t\tconst v = Math.min(LIKERT_MAX_SCORE, Math.max(1, Number(value) || 1));\n\t\t\t\t\t\tstate.answers.set(index, { ...existing, value: v });\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}catch(_){}\n\t\t}\n\n\t\tfunction clearDraft(){\n\t\t\tif (!state.teamUuid) return;\n\t\t\ttry { localStorage.removeItem(DRAFT_STORAGE_KEY_PREFIX + state.teamUuid); } catch(_){}\n\t\t}\n\n\t\tfunction calculateScores(){\n\t\t\tconst totals = { Rood: 0, Groen: 0, Blauw: 0, Geel: 0 };\n\t\t\tstate.answers.forEach((answer) => {\n\t\t\t\tconst colorKey = normalizeColorName(answer.kleur);\n\t\t\t\tif (!colorKey) return;\n\t\t\t\ttotals[colorKey] += (Number(answer.value) || 0);\n\t\t\t});\n\t\t\treturn totals;\n\t\t}\n\n\t\tconst TASK_COLORS = new Set(['Rood', 'Blauw']);\n\t\tconst RELATION_COLORS = new Set(['Geel', 'Groen']);\n\t\tconst INTROVERT_COLORS = new Set(['Blauw', 'Groen']);\n\t\tconst EXTROVERT_COLORS = new Set(['Rood', 'Geel']);\n\n\t\tfunction firstByColorKeyOrder(colors){\n\t\t\treturn [...colors].sort((a, b) => COLOR_KEYS.indexOf(a) - COLOR_KEYS.indexOf(b))[0];\n\t\t}\n\n\t\tfunction colorsAtScore(scores, score){\n\t\t\treturn COLOR_KEYS.filter((color) => scores[color] === score);\n\t\t}\n\n\t\tfunction getUniqueHighestColor(scores){\n\t\t\tconst maxScore = Math.max(...COLOR_KEYS.map((color) => scores[color]));\n\t\t\tconst atMax = colorsAtScore(scores, maxScore);\n\t\t\treturn atMax.length === 1 ? atMax[0] : null;\n\t\t}\n\n\t\tfunction getUniqueLowestColor(scores){\n\t\t\tconst minScore = Math.min(...COLOR_KEYS.map((color) => scores[color]));\n\t\t\tconst atMin = colorsAtScore(scores, minScore);\n\t\t\treturn atMin.length === 1 ? atMin[0] : null;\n\t\t}\n\n\t\tfunction breakTiedLowest(tiedColors, scores){\n\t\t\tconst highest = getUniqueHighestColor(scores);\n\t\t\tif (!highest) return firstByColorKeyOrder(tiedColors);\n\n\t\t\tif (TASK_COLORS.has(highest)) {\n\t\t\t\tconst winners = tiedColors.filter((color) => RELATION_COLORS.has(color));\n\t\t\t\tif (winners.length === 1) return winners[0];\n\t\t\t} else if (RELATION_COLORS.has(highest)) {\n\t\t\t\tconst winners = tiedColors.filter((color) => TASK_COLORS.has(color));\n\t\t\t\tif (winners.length === 1) return winners[0];\n\t\t\t}\n\n\t\t\tif (EXTROVERT_COLORS.has(highest)) {\n\t\t\t\tconst winners = tiedColors.filter((color) => INTROVERT_COLORS.has(color));\n\t\t\t\tif (winners.length === 1) return winners[0];\n\t\t\t} else if (INTROVERT_COLORS.has(highest)) {\n\t\t\t\tconst winners = tiedColors.filter((color) => EXTROVERT_COLORS.has(color));\n\t\t\t\tif (winners.length === 1) return winners[0];\n\t\t\t}\n\n\t\t\treturn firstByColorKeyOrder(tiedColors);\n\t\t}\n\n\t\tfunction breakTiedHighest(tiedColors, scores, referenceLowest){\n\t\t\tconst lowest = referenceLowest || getUniqueLowestColor(scores);\n\t\t\tif (!lowest) return firstByColorKeyOrder(tiedColors);\n\n\t\t\tif (RELATION_COLORS.has(lowest)) {\n\t\t\t\tconst winners = tiedColors.filter((color) => TASK_COLORS.has(color));\n\t\t\t\tif (winners.length === 1) return winners[0];\n\t\t\t} else if (TASK_COLORS.has(lowest)) {\n\t\t\t\tconst winners = tiedColors.filter((color) => RELATION_COLORS.has(color));\n\t\t\t\tif (winners.length === 1) return winners[0];\n\t\t\t}\n\n\t\t\tif (EXTROVERT_COLORS.has(lowest)) {\n\t\t\t\tconst winners = tiedColors.filter((color) => INTROVERT_COLORS.has(color));\n\t\t\t\tif (winners.length === 1) return winners[0];\n\t\t\t} else if (INTROVERT_COLORS.has(lowest)) {\n\t\t\t\tconst winners = tiedColors.filter((color) => EXTROVERT_COLORS.has(color));\n\t\t\t\tif (winners.length === 1) return winners[0];\n\t\t\t}\n\n\t\t\treturn firstByColorKeyOrder(tiedColors);\n\t\t}\n\n\t\tfunction rankColors(scores){\n\t\t\tconst ranked = [...COLOR_KEYS].sort((a, b) => {\n\t\t\t\tif (scores[b] !== scores[a]) return scores[b] - scores[a];\n\t\t\t\treturn COLOR_KEYS.indexOf(a) - COLOR_KEYS.indexOf(b);\n\t\t\t});\n\n\t\t\tconst minScore = scores[ranked[3]];\n\t\t\tconst maxScore = scores[ranked[0]];\n\t\t\tconst topTied = colorsAtScore(scores, maxScore);\n\t\t\tconst bottomTied = colorsAtScore(scores, minScore);\n\t\t\tlet resolvedLowest = null;\n\n\t\t\tif (bottomTied.length === 2) {\n\t\t\t\tresolvedLowest = breakTiedLowest(bottomTied, scores);\n\t\t\t\tconst secondLowest = bottomTied.find((color) => color !== resolvedLowest);\n\t\t\t\tconst middle = ranked.filter((color) => !bottomTied.includes(color));\n\t\t\t\tranked.length = 0;\n\t\t\t\tranked.push(...middle, secondLowest, resolvedLowest);\n\t\t\t}\n\n\t\t\tif (topTied.length === 2) {\n\t\t\t\tconst referenceLowest = resolvedLowest || getUniqueLowestColor(scores);\n\t\t\t\tconst winner = breakTiedHighest(topTied, scores, referenceLowest);\n\t\t\t\tconst runnerUp = topTied.find((color) => color !== winner);\n\t\t\t\tconst rest = ranked.filter((color) => !topTied.includes(color));\n\t\t\t\tranked.length = 0;\n\t\t\t\tranked.push(winner, runnerUp, ...rest);\n\t\t\t}\n\n\t\t\treturn ranked;\n\t\t}\n\n\t\tfunction getHighestAndLowestColor(scores){\n\t\t\tconst ranked = rankColors(scores);\n\t\t\treturn {\n\t\t\t\thighest: String(ranked[0]).toLowerCase(),\n\t\t\t\tlowest: String(ranked[3]).toLowerCase(),\n\t\t\t};\n\t\t}\n\n\t\tfunction getMatchingProfile(scores){\n\t\t\tconst hl = getHighestAndLowestColor(scores);\n\t\t\tfor (const profile of (state.profiles || [])) {\n\t\t\t\tconst conditions = (profile && profile.conditions) || [];\n\t\t\t\tconst matches = conditions.some((c) =>\n\t\t\t\t\tnormalizeColorCondition(c && c.highest) === hl.highest &&\n\t\t\t\t\tnormalizeColorCondition(c && c.lowest) === hl.lowest\n\t\t\t\t);\n\t\t\t\tif (matches) return String(profile.name || '');\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tfunction apiFetch(url, options){\n\t\t\treturn fetch(url, {\n\t\t\t\tcredentials: 'omit',\n\t\t\t\t...options,\n\t\t\t});\n\t\t}\n\n\t\tasync function bootstrap(){\n\t\t\tstate.teamUuid = inferTeamUuidFromUrl();\n\t\t\tif (!state.teamUuid) state.teamUuid = 'default';\n\n\t\t\ttry{\n\t\t\t\tconst questionsRes = await fetch(props.questionsJsonUrl, { cache: 'no-store' });\n\t\t\t\tif (!questionsRes.ok) throw new Error('Questions JSON not found');\n\n\t\t\t\tconst questionsJson = await questionsRes.json();\n\n\t\t\t\tstate.questions = (questionsJson && questionsJson.Vragen) ? questionsJson.Vragen : [];\n\t\t\t\tstate.profiles = [];\n\t\t\t\tif (props.useProfiles) {\n\t\t\t\t\tconst profilesRes = await fetch(props.profilesJsonUrl, { cache: 'no-store' });\n\t\t\t\t\tif (!profilesRes.ok) throw new Error('Profiles JSON not found');\n\t\t\t\t\tconst profilesJson = await profilesRes.json();\n\t\t\t\t\tstate.profiles = (profilesJson && profilesJson.profiles) ? profilesJson.profiles : [];\n\t\t\t\t}\n\n\t\t\t\tinitializeAnswers();\n\n\t\t\t\tloadDraft();\n\t\t\t\tstate.viewState = 'found';\n\t\t\t\trender();\n\t\t\t\tsetTimeout(() => { state.initialLoadDone = true; }, 0);\n\t\t\t}catch(e){\n\t\t\t\tstate.viewState = 'error';\n\t\t\t\tstate.errorMessage = (e && e.message) ? e.message : 'request failed';\n\t\t\t\trender();\n\t\t\t}\n\t\t}\n\n\t\tfunction goNext(){\n\t\t\tif (state.currentStep < totalSteps() - 1) {\n\t\t\t\tstate.currentStep += 1;\n\t\t\t\tsaveDraft();\n\t\t\t\trender();\n\t\t\t\tscrollToTop();\n\t\t\t}\n\t\t}\n\t\tfunction goPrev(){\n\t\t\tif (state.currentStep > 0) {\n\t\t\t\tstate.currentStep -= 1;\n\t\t\t\tsaveDraft();\n\t\t\t\trender();\n\t\t\t\tscrollToTop();\n\t\t\t}\n\t\t}\n\n\t\tfunction handleSliderInput(questionIndex, value){\n\t\t\tconst existing = state.answers.get(questionIndex);\n\t\t\tif (!existing) return;\n\t\t\tconst v = Math.min(LIKERT_MAX_SCORE, Math.max(1, Number(value) || 1));\n\t\t\tstate.answers.set(questionIndex, { ...existing, value: v });\n\t\t\tif (state.initialLoadDone) saveDraft();\n\t\t}\n\n\t\tasync function handleSubmit(e){\n\t\t\te.preventDefault();\n\t\t\tstate.submitStatus = 'idle';\n\t\t\tstate.submitErrorMessage = '';\n\n\t\t\tstate.isSubmitting = true;\n\t\t\trender();\n\n\t\t\ttry{\n\t\t\t\tconst scores = calculateScores();\n\t\t\t\tconst profile = getMatchingProfile(scores);\n\n\t\t\t\tconst answers = Array.from(state.answers.values()).map((a) => ({\n\t\t\t\t\tquestionIndex: a.questionIndex,\n\t\t\t\t\tquestion: a.question,\n\t\t\t\t\tkleur: a.kleur,\n\t\t\t\t\teigenschap: a.eigenschap,\n\t\t\t\t\tvalue: a.value\n\t\t\t\t}));\n\n\t\t\t\tconst res = await fetch(props.submitUrl, {\n\t\t\t\t\tmethod: 'POST',\n\t\t\t\t\theaders: { 'Content-Type': 'application\/json' },\n\t\t\t\t\tbody: JSON.stringify({\n\t\t\t\t\t\tteam_uuid: state.teamUuid,\n\t\t\t\t\t\tname: state.name,\n\t\t\t\t\t\temail: state.email,\n\t\t\t\t\t\tlanguage: props.language || 'nl',\n\t\t\t\t\t\tscores,\n\t\t\t\t\t\tprofile,\n\t\t\t\t\t\tanswers,\n\t\t\t\t\t\tsource_url: window.location.href,\n\t\t\t\t\t\twebsite: '' \/\/ honeypot\n\t\t\t\t\t})\n\t\t\t\t});\n\n\t\t\t\tif (!res.ok) {\n\t\t\t\t\tlet msg = '';\n\t\t\t\t\ttry { msg = (await res.json()).message || ''; } catch(_){}\n\t\t\t\t\tif (!msg) msg = await res.text().catch(() => '');\n\t\t\t\t\tthrow new Error(msg || ('Submission failed (' + res.status + ')'));\n\t\t\t\t}\n\n\t\t\t\tstate.submitStatus = 'success';\n\t\t\t\tclearDraft();\n\t\t\t\trender();\n\t\t\t\t\/\/ Stay on-page and show success message.\n\t\t\t}catch(err){\n\t\t\t\tstate.submitStatus = 'error';\n\t\t\t\tstate.submitErrorMessage = (err && err.message) ? err.message : 'Submission failed';\n\t\t\t\trender();\n\t\t\t}finally{\n\t\t\t\tstate.isSubmitting = false;\n\t\t\t\trender();\n\t\t\t}\n\t\t}\n\n\t\tfunction render(){\n\t\t\tconst body = qs('.pcqs-body');\n\t\t\tif (!body) return;\n\n\t\t\tif (state.viewState === 'loading') {\n\t\t\t\tbody.innerHTML = '<p class=\"pcqs-loading\">' + escapeHtml(t('loading', 'loading...')) + '<\/p>';\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (state.viewState === 'not-found') {\n\t\t\t\tbody.innerHTML = '<p class=\"pcqs-muted\">' + escapeHtml(t('notFound', '404 message')) + '<\/p>';\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (state.viewState === 'error') {\n\t\t\t\tbody.innerHTML = '<p class=\"pcqs-muted\">' + escapeHtml(t('errorMessage', 'error message')) + ' (' + escapeHtml(state.errorMessage) + ')<\/p>';\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst total = totalSteps();\n\t\t\tconst onForm = onFormStep();\n\t\t\tconst progress = progressPercent();\n\n\t\t\tlet html = '';\n\n\t\t\tif (!onForm) {\n\t\t\t\thtml += `\n\t\t\t\t\t<div class=\"pcqs-progress\">\n\t\t\t\t\t\t<div class=\"pcqs-progress-head\">\n\t\t\t\t\t\t\t<span>${escapeHtml(t('stepLabel', 'Stap'))} ${state.currentStep + 1} ${escapeHtml(t('ofLabel', 'van'))} ${total}<\/span>\n\t\t\t\t\t\t\t<span>${stepsLeft()} ${escapeHtml(t('stepsLeftLabel', 'stap(pen)'))}<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"pcqs-progress-track\">\n\t\t\t\t\t\t\t<div class=\"pcqs-progress-bar\" style=\"width:${progress}%\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t`;\n\t\t\t}\n\n\t\t\tif (onForm) {\n\t\t\t\thtml += `\n\t\t\t\t\t<div class=\"pcqs-card\">\n\t\t\t\t\t\t${state.submitStatus === 'success'\n\t\t\t\t\t\t\t? `\n\t\t\t\t\t\t\t\t<h2 style=\"margin:0 0 .5rem 0; font-size:1.75rem; font-weight:800;\">${escapeHtml(t('successTitle', 'Indiening succesvol'))}<\/h2>\n\t\t\t\t\t\t\t\t<p class=\"pcqs-muted\" style=\"margin:0; font-size:18px;\">${escapeHtml(t('successBody', 'Bedankt voor het invullen van de Color Quickscan vragenlijst. Het profiel wordt gedeeld met je tijdens de aankomende training\/coaching'))}<\/p>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t: `\n\t\t\t\t\t\t\t\t<p class=\"pcqs-muted\" style=\"margin:0 0 1rem 0; font-size:18px;\">${escapeHtml(t('formIntro', 'Vul je gegevens in en verstuur je resultaten.'))}<\/p>\n\t\t\t\t\t\t\t\t<form class=\"pcqs-form\" novalidate>\n\t\t\t\t\t\t\t\t\t<div class=\"pcqs-form-row\">\n\t\t\t\t\t\t\t\t\t\t<label class=\"pcqs-label\" for=\"pcqs-name\">${escapeHtml(t('nameLabel', 'Naam'))}<\/label>\n\t\t\t\t\t\t\t\t\t\t<input class=\"pcqs-input\" id=\"pcqs-name\" name=\"name\" type=\"text\" required value=\"${escapeAttr(state.name)}\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"pcqs-form-row\">\n\t\t\t\t\t\t\t\t\t\t<label class=\"pcqs-label\" for=\"pcqs-email\">${escapeHtml(t('emailLabel', 'E-mail'))}<\/label>\n\t\t\t\t\t\t\t\t\t\t<input class=\"pcqs-input\" id=\"pcqs-email\" name=\"email\" type=\"email\" required value=\"${escapeAttr(state.email)}\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<button type=\"submit\" class=\"pcqs-btn pcqs-btn-primary\" ${state.isSubmitting ? 'disabled' : ''}>\n\t\t\t\t\t\t\t\t\t\t${state.isSubmitting ? escapeHtml(t('submittingLabel', 'Bezig met versturen...')) : escapeHtml(t('submitLabel', 'Versturen'))}\n\t\t\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t${state.submitStatus === 'error' ? '<p class=\"pcqs-status-err\">' + escapeHtml(t('errorLabel', 'Fout')) + ': ' + escapeHtml(state.submitErrorMessage) + '<\/p>' : ''}\n\t\t\t\t\t\t\t\t<\/form>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t}\n\t\t\t\t\t<\/div>\n\t\t\t\t`;\n\t\t\t} else {\n\t\t\t\tconst items = getQuestionsForStep(state.currentStep);\n\t\t\t\titems.forEach(({question, index}) => {\n\t\t\t\t\tconst value = getAnswerValue(index);\n\t\t\t\t\thtml += `\n\t\t\t\t\t\t<div class=\"pcqs-card\" data-color=\"${escapeAttr(question.Kleur || '')}\">\n\t\t\t\t\t\t\t<p style=\"font-size:16px; margin:0 0 1rem 0; color:#4b5563; font-style:italic;\">${escapeHtml(question.Vraag || '')}<\/p>\n\t\t\t\t\t\t\t<div class=\"pcqs-slider-container\">\n\t\t\t\t\t\t\t\t<div style=\"display:flex; justify-content:space-between; margin-bottom:.75rem;\">\n\t\t\t\t\t\t\t\t\t<span style=\"font-size:14px; font-weight:600; color:#6b7280;\">${escapeHtml(t('disagreeLabel', 'Oneens'))}<\/span>\n\t\t\t\t\t\t\t\t\t<span style=\"font-size:14px; font-weight:600; color:#6b7280;\">${escapeHtml(t('agreeLabel', 'Eens'))}<\/span>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tclass=\"pcqs-slider-input\"\n\t\t\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t\t\t\tmax=\"${LIKERT_MAX_SCORE}\"\n\t\t\t\t\t\t\t\t\tvalue=\"${value}\"\n\t\t\t\t\t\t\t\t\tdata-qindex=\"${index}\"\n\t\t\t\t\t\t\t\t\/>\n\t\t\t\t\t\t\t\t<div class=\"pcqs-slider-scale\">\n\t\t\t\t\t\t\t\t\t${Array.from({length: LIKERT_MAX_SCORE}).map((_, i) => `\n\t\t\t\t\t\t\t\t\t\t<div class=\"pcqs-scale-point\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"pcqs-scale-mark\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"pcqs-scale-label\">${i+1}<\/span>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t`).join('')}\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t`;\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (!onForm) {\n\t\t\t\thtml += `\n\t\t\t\t\t<div class=\"pcqs-progress\">\n\t\t\t\t\t\t<div class=\"pcqs-progress-head\">\n\t\t\t\t\t\t\t<span>${escapeHtml(t('stepLabel', 'Stap'))} ${state.currentStep + 1} ${escapeHtml(t('ofLabel', 'van'))} ${total}<\/span>\n\t\t\t\t\t\t\t<span>${stepsLeft()} ${escapeHtml(t('stepsLeftLabel', 'stap(pen)'))}<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"pcqs-progress-track\">\n\t\t\t\t\t\t\t<div class=\"pcqs-progress-bar\" style=\"width:${progress}%\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t`;\n\t\t\t}\n\n\t\t\thtml += `\n\t\t\t\t<div class=\"pcqs-nav\">\n\t\t\t\t\t<button type=\"button\" class=\"pcqs-btn pcqs-btn-prev\" data-action=\"prev\" ${state.currentStep === 0 ? 'disabled' : ''}>\u2190 ${escapeHtml(t('previousButton', 'Vorige'))}<\/button>\n\t\t\t\t\t${!onForm ? '<button type=\"button\" class=\"pcqs-btn pcqs-btn-next\" data-action=\"next\">' + escapeHtml(t('nextButton', 'Volgende')) + ' \u2192<\/button>' : '<span><\/span>'}\n\t\t\t\t<\/div>\n\t\t\t`;\n\n\t\t\tbody.innerHTML = html;\n\n\t\t\t\/\/ Wire events\n\t\t\tconst prevBtn = qs('[data-action=\"prev\"]', body);\n\t\t\tconst nextBtn = qs('[data-action=\"next\"]', body);\n\t\t\tif (prevBtn) prevBtn.addEventListener('click', goPrev);\n\t\t\tif (nextBtn) nextBtn.addEventListener('click', goNext);\n\n\t\t\tbody.querySelectorAll('.pcqs-slider-input[data-qindex]').forEach((el) => {\n\t\t\t\tel.addEventListener('input', (evt) => {\n\t\t\t\t\tconst target = evt.currentTarget;\n\t\t\t\t\tconst idx = parseInt(target.getAttribute('data-qindex'), 10);\n\t\t\t\t\thandleSliderInput(idx, target.value);\n\t\t\t\t\tif (state.initialLoadDone) saveDraft();\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tconst form = qs('form.pcqs-form', body);\n\t\t\tif (form) {\n\t\t\t\tconst nameEl = qs('#pcqs-name', form);\n\t\t\t\tconst emailEl = qs('#pcqs-email', form);\n\t\t\t\tif (nameEl) nameEl.addEventListener('input', (e) => { state.name = e.target.value || ''; if (state.initialLoadDone) saveDraft(); });\n\t\t\t\tif (emailEl) emailEl.addEventListener('input', (e) => { state.email = e.target.value || ''; if (state.initialLoadDone) saveDraft(); });\n\t\t\t\tform.addEventListener('submit', handleSubmit);\n\t\t\t}\n\t\t}\n\n\t\tfunction escapeHtml(s){\n\t\t\treturn String(s || '')\n\t\t\t\t.replaceAll('&', '&amp;')\n\t\t\t\t.replaceAll('<', '&lt;')\n\t\t\t\t.replaceAll('>', '&gt;')\n\t\t\t\t.replaceAll('\"', '&quot;')\n\t\t\t\t.replaceAll(\"'\", '&#039;');\n\t\t}\n\t\tfunction escapeAttr(s){ return escapeHtml(s); }\n\n\t\trender();\n\t\tbootstrap();\n\t})();\n\t<\/script>\n\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4214","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/procandor.be\/en\/wp-json\/wp\/v2\/pages\/4214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/procandor.be\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/procandor.be\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/procandor.be\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/procandor.be\/en\/wp-json\/wp\/v2\/comments?post=4214"}],"version-history":[{"count":16,"href":"https:\/\/procandor.be\/en\/wp-json\/wp\/v2\/pages\/4214\/revisions"}],"predecessor-version":[{"id":4379,"href":"https:\/\/procandor.be\/en\/wp-json\/wp\/v2\/pages\/4214\/revisions\/4379"}],"wp:attachment":[{"href":"https:\/\/procandor.be\/en\/wp-json\/wp\/v2\/media?parent=4214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}