#cvProTest{ –navy:#0c2148;–blue:#2f67dc;–ink:#172033;–muted:#667085; width:100%;max-width:780px;margin:20px auto;padding:0 8px 40px; box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,”Noto Sans KR”,”Malgun Gothic”,sans-serif; color:var(–ink);line-height:1.6;-webkit-tap-highlight-color:transparent; } #cvProTest *{box-sizing:border-box} #cvProTest .cvp-card{overflow:hidden;background:#fff;border:1px solid #e2e8f0;border-radius:24px;box-shadow:0 16px 42px rgba(12,33,72,.12)} #cvProTest .cvp-head{padding:25px 18px 22px;text-align:center;color:#fff;background:linear-gradient(135deg,#0a1d41,#2d61ca)} #cvProTest .cvp-head h1{margin:5px 0;color:#fff;font-size:clamp(29px,8vw,43px);font-weight:950;letter-spacing:-1.4px} #cvProTest .cvp-head h1 span{color:#ffd64a} #cvProTest .cvp-head p{max-width:620px;margin:9px auto 0;color:rgba(255,255,255,.9)} #cvProTest .cvp-body{padding:22px 13px 28px} #cvProTest .cvp-toprow{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:650px;margin:0 auto 8px;color:#475569;font-size:13px;font-weight:850} #cvProTest .cvp-timer{padding:6px 11px;border-radius:999px;background:#eef4ff;color:#1d4ed8;font-size:14px} #cvProTest .cvp-progress{max-width:650px;height:10px;margin:0 auto 18px;overflow:hidden;border-radius:999px;background:#e8edf4} #cvProTest .cvp-progress>div{height:100%;width:11.11%;border-radius:999px;background:linear-gradient(90deg,#4e7dff,#2fc590);transition:width .3s} #cvProTest .cvp-question{text-align:center} #cvProTest .cvp-question h2{margin:0 0 5px;font-size:clamp(21px,5vw,28px)} #cvProTest .cvp-question p{margin:0 0 15px;color:#64748b;font-size:14px} #cvProTest .cvp-imagebox{display:flex;align-items:center;justify-content:center;width:100%;max-width:560px;min-height:320px;margin:0 auto 18px;padding:12px;border:1px solid #e1e7ef;border-radius:24px;background:#f8fafc} #cvProTest .cvp-imagebox img{display:block;max-width:100%;width:auto;height:auto;max-height:520px;object-fit:contain} #cvProTest .cvp-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:650px;margin:0 auto} #cvProTest .cvp-option{min-height:56px;padding:10px;border:1px solid #dce3ed;border-radius:14px;background:#fff;color:#25324a;font-family:inherit;font-size:18px;font-weight:900;cursor:pointer} #cvProTest .cvp-option.selected{border-color:#2457d6;background:#edf3ff;color:#1747bd} #cvProTest .cvp-actions{display:flex;gap:9px;max-width:650px;margin:14px auto 0} #cvProTest .cvp-btn{min-height:50px;border:0;border-radius:14px;font-family:inherit;font-size:15px;font-weight:900;cursor:pointer} #cvProTest .cvp-reset{padding:0 18px;background:#e8edf4;color:#334155} #cvProTest .cvp-next{flex:1;background:linear-gradient(135deg,#2457d6,#467ff5);color:#fff} #cvProTest .cvp-next:disabled{opacity:.45;cursor:not-allowed} #cvProTest .cvp-note{max-width:650px;margin:18px auto 0;padding:15px;border-radius:15px;background:#fff8dc;color:#75530a;font-size:13px} #cvProTest .cvp-result{display:none;max-width:680px;margin:0 auto} #cvProTest .cvp-result.show{display:block} #cvProTest .cvp-result-head{text-align:center} #cvProTest .cvp-result-icon{font-size:58px} #cvProTest .cvp-result h2{margin:4px 0 8px;font-size:30px;text-align:center} #cvProTest .cvp-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:15px 0} #cvProTest .cvp-badge{padding:14px 8px;border:1px solid #e2e8f0;border-radius:15px;background:#f8fafc;text-align:center;font-size:13px;color:#64748b} #cvProTest .cvp-badge strong{display:block;margin-top:3px;color:#1d4ed8;font-size:21px} #cvProTest .cvp-gaugebox{margin:18px 0;padding:18px;border:1px solid #e2e8f0;border-radius:17px;background:#fff} #cvProTest .cvp-gauge-title{margin-bottom:15px;text-align:center;font-weight:900} #cvProTest .cvp-scale-labels{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;color:#64748b;font-size:12px;font-weight:800} #cvProTest .cvp-scale{position:relative;height:16px;border-radius:999px;background:linear-gradient(90deg,#ef6b62 0%,#f4c24f 48%,#36b37e 100%)} #cvProTest .cvp-marker{position:absolute;top:-10px;width:4px;height:36px;border-radius:4px;background:#102348;transform:translateX(-50%);transition:left .6s ease} #cvProTest .cvp-marker:before{content:”My spot”;position:absolute;left:50%;bottom:38px;transform:translateX(-50%);white-space:nowrap;padding:4px 8px;border-radius:8px;background:#102348;color:#fff;font-size:11px;font-weight:900} #cvProTest .cvp-gauge-copy{margin:16px 0 0;text-align:center;color:#475569;font-size:14px} #cvProTest .cvp-percentile{margin:16px 0;padding:18px;border-radius:17px;background:linear-gradient(135deg,#eef4ff,#f5f8ff);text-align:center} #cvProTest .cvp-percentile strong{display:block;color:#1d4ed8;font-size:34px} #cvProTest .cvp-percentile span{color:#64748b;font-size:13px} #cvProTest .cvp-detail-title{margin:23px 0 10px;font-size:20px;font-weight:950} #cvProTest .cvp-detail{display:grid;gap:9px} #cvProTest .cvp-row{padding:14px;border:1px solid #e2e8f0;border-radius:15px;background:#f8fafc} #cvProTest .cvp-rowtop{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-weight:900} #cvProTest .cvp-rowgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:13px} #cvProTest .cvp-cell{padding:9px;border-radius:10px;background:#fff;color:#475569} #cvProTest .cvp-cell strong{display:block;color:#172033} #cvProTest .cvp-result-note{margin-top:16px;padding:16px;border-radius:15px;background:#fff8dc;color:#75530a;font-size:13px} #cvProTest .cvp-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px} #cvProTest .cvp-result-actions button{min-height:52px;border:0;border-radius:14px;font-family:inherit;font-size:15px;font-weight:900;cursor:pointer} #cvProTest .cvp-again{background:#102348;color:#fff} #cvProTest .cvp-share{background:#fee500;color:#191919} @media(max-width:600px){ #cvProTest{padding-left:4px;padding-right:4px} #cvProTest .cvp-badges{grid-template-columns:1fr} #cvProTest .cvp-rowgrid{grid-template-columns:1fr} #cvProTest .cvp-result-actions{grid-template-columns:1fr} #cvProTest .cvp-imagebox{min-height:260px} } (function(){ “use strict”; const root=document.getElementById(“cvProTest”); if(!root||root.dataset.ready===”1″)return; root.dataset.ready=”1″; const questions=[{“image”: “https://test.eonis.kr/wp-content/uploads/2026/07/26.png”, “normal”: “26”, “atypical”: [“6”, “2”], “note”: “People with red color vision deficiency may see 6; people with green color vision deficiency may see 2”, “choices”: [“26”, “6”, “2”, “Can’t see a number”], “diagnostic”: true}, {“image”: “https://test.eonis.kr/wp-content/uploads/2026/07/74.png”, “normal”: “74”, “atypical”: [“21”, “Can’t see a number”], “note”: “People with red-green color vision deficiency may see 21 or have trouble distinguishing the number”, “choices”: [“74”, “21”, “71”, “Can’t see a number”], “diagnostic”: true}, {“image”: “https://test.eonis.kr/wp-content/uploads/2026/07/97.png”, “normal”: “97”, “atypical”: [“Can’t see a number”], “note”: “People with color vision deficiency may have trouble distinguishing the number”, “choices”: [“97”, “87”, “74”, “Can’t see a number”], “diagnostic”: true}, {“image”: “https://test.eonis.kr/wp-content/uploads/2026/07/6.png”, “normal”: “6”, “atypical”: [“Can’t see a number”], “note”: “People with red-green color vision deficiency may have trouble distinguishing the number”, “choices”: [“6”, “5”, “8”, “Can’t see a number”], “diagnostic”: true}, {“image”: “https://test.eonis.kr/wp-content/uploads/2026/07/8.png”, “normal”: “8”, “atypical”: [“3”, “Can’t see a number”], “note”: “People with red-green color vision deficiency may see 3 or have trouble distinguishing the number”, “choices”: [“8”, “3”, “6”, “Can’t see a number”], “diagnostic”: true}, {“image”: “https://test.eonis.kr/wp-content/uploads/2026/07/15.png”, “normal”: “15”, “atypical”: [“17”, “Can’t see a number”], “note”: “People with red-green color vision deficiency may see 17 or have trouble distinguishing the number”, “choices”: [“15”, “17”, “16”, “Can’t see a number”], “diagnostic”: true}, {“image”: “https://test.eonis.kr/wp-content/uploads/2026/07/5.png”, “normal”: “5”, “atypical”: [“2”, “Can’t see a number”], “note”: “People with red-green color vision deficiency may see 2 or have trouble distinguishing the number”, “choices”: [“5”, “2”, “6”, “Can’t see a number”], “diagnostic”: true}, {“image”: “https://test.eonis.kr/wp-content/uploads/2026/07/2.png”, “normal”: “2”, “atypical”: [“Can’t see a number”], “note”: “People with red-green color vision deficiency may have trouble distinguishing the number”, “choices”: [“2”, “3”, “8”, “Can’t see a number”], “diagnostic”: true}, {“image”: “https://test.eonis.kr/wp-content/uploads/2026/07/12.png”, “normal”: “12”, “atypical”: [“12”], “note”: “A confirmation question that most people see as 12”, “choices”: [“12”, “17”, “21”, “Can’t see a number”], “diagnostic”: false}]; const img=root.querySelector(“#cvpImg”); const optionsEl=root.querySelector(“#cvpOptions”); const nextBtn=root.querySelector(“#cvpNext”); const resetBtn=root.querySelector(“#cvpReset”); const quiz=root.querySelector(“#cvpQuiz”); const result=root.querySelector(“#cvpResult”); const stepEl=root.querySelector(“#cvpStep”); const pctEl=root.querySelector(“#cvpPct”); const barEl=root.querySelector(“#cvpBar”); const timerEl=root.querySelector(“#cvpTimer”); const resultTitle=root.querySelector(“#cvpResultTitle”); const resultCopy=root.querySelector(“#cvpResultCopy”); const correctEl=root.querySelector(“#cvpCorrect”); const totalTimeEl=root.querySelector(“#cvpTotalTime”); const averageEl=root.querySelector(“#cvpAverage”); const markerEl=root.querySelector(“#cvpMarker”); const gaugeCopy=root.querySelector(“#cvpGaugeCopy”); const percentileEl=root.querySelector(“#cvpPercentile”); const detailEl=root.querySelector(“#cvpDetail”); const againBtn=root.querySelector(“#cvpAgain”); const shareBtn=root.querySelector(“#cvpShare”); let index=0; let responses=[]; let responseTimes=[]; let selected=null; let startTime=0; let questionStart=0; let timerId=null; function formatTime(sec){ if(sec0;i–){ const j=Math.floor(Math.random()*(i+1)); const temp=shuffledChoices[i]; shuffledChoices[i]=shuffledChoices[j]; shuffledChoices[j]=temp; } shuffledChoices.forEach(function(choice){ const btn=document.createElement(“button”); btn.type=”button”; btn.className=”cvp-option”; btn.textContent=choice; btn.addEventListener(“click”,function(){ selected=choice; optionsEl.querySelectorAll(“.cvp-option”).forEach(function(x){x.classList.remove(“selected”)}); btn.classList.add(“selected”); nextBtn.disabled=false; }); optionsEl.appendChild(btn); }); questionStart=performance.now(); } function percentileFrom(correct,totalSeconds){ const base={9:1,8:15,7:32,6:48,5:62,4:74,3:84,2:91,1:96,0:99}[correct]; let penalty=0; if(totalSeconds<=5) penalty=0; else if(totalSeconds<=6) penalty=1; else if(totalSeconds<=8) penalty=2; else if(totalSeconds<=10) penalty=4; else if(totalSeconds<=12) penalty=6; else if(totalSeconds<=15) penalty=9; else if(totalSeconds<=20) penalty=13; else if(totalSeconds<=30) penalty=19; else if(totalSeconds<=45) penalty=26; else if(totalSeconds=88){ resultTitle.textContent=”Your answers mostly matched typical color-vision responses”; resultCopy.textContent=”On this screen, you identified most plates the same way as the typical reference response.”; }else if(marker>=55){ resultTitle.textContent=”A few color combinations produced different responses”; resultCopy.textContent=”On some plates, you chose a different number than the typical response or couldn’t see a number.”; }else{ resultTitle.textContent=”Your answers differed on several plates”; resultCopy.textContent=”If you get the same pattern after retaking the test under different screen conditions, consider a professional color vision exam.”; } gaugeCopy.textContent=”This game-style estimate combines accuracy and total time, placing you in the top “+percentile+”%.”); detailEl.innerHTML=””; questions.forEach(function(q,i){ const row=document.createElement(“div”); row.className=”cvp-row”; const atypical=q.atypical.join(” or “); const isCorrect=responses[i]===q.normal; row.innerHTML= ‘‘+ ‘‘+ ‘‘; detailEl.appendChild(row); }); } function next(){ if(selected===null)return; responses[index]=selected; responseTimes[index]=(performance.now()-questionStart)/1000; if(index<questions.length-1){ index++; render(); }else{ finish(); } } function restart(){ stopClock(); index=0; responses=[]; responseTimes=[]; selected=null; result.classList.remove("show"); quiz.style.display="block"; startClock(); render(); } async function share(){ const text="My color vision self-test results: "+correctEl.textContent+", "+percentileEl.textContent+", total time "+totalTimeEl.textContent; try{ if(navigator.share){ await navigator.share({title:"Color vision self-test",text:text,url:location.href}); }else{ await navigator.clipboard.writeText(text+" "+location.href); alert("Your results and the link have been copied."); } }catch(e){} } nextBtn.addEventListener("click",next); resetBtn.addEventListener("click",restart); againBtn.addEventListener("click",restart); shareBtn.addEventListener("click",share); startClock(); render(); })();