Страница не найдена

Квиз ZOV: Кухни и шкафы

function renderQuizDone() { document.getElementById('quiz-main').innerHTML = `

Благодарим за прохождение квиза

В течение 30 минут на указанный вами номер телефона придет ссылка с несколькими дизайн-проектами.

`; document.getElementById('quiz-sidebar').innerHTML = ''; document.querySelector('.quiz-btn').onclick = () => { // Тут можно сбросить квиз или скрыть окно quizType = null; quizState = {}; step = -1; render(); }; } function renderStep(stepsConfig, stepIdx) { const stepObj = stepsConfig[stepIdx]; const stepOptions = typeof stepObj.getOptions === 'function' ? stepObj.getOptions(quizState) : stepObj.options; let html = `

`; html += `

${stepObj.question}

`; // MULTI if (stepObj.type === 'multi') { html += `

`; stepOptions.forEach(opt => { const sel = (quizState[stepObj.key]||[]).includes(opt.value) ? 'selected':''; html += `

${opt.img ? `

` : ""}

${opt.title}

${opt.sub ? `

${opt.sub}

` : ""} ${opt.price ? `

${opt.price}

` : ""}

`; }); html += `

`; } // RADIO else if (stepObj.type === 'radio') { html += `

`; stepOptions.forEach(opt => { const sel = quizState[stepObj.key] === opt.value ? 'selected':''; html += `

${opt.img ? `

` : ""}

${opt.title}

${opt.desc ? `

${opt.desc}

` : ""}

`; }); html += `

`; } // INPUTS else if (stepObj.type === 'inputs') { const fields = stepObj.getFields(quizState); html += ``; } // DOUBLE-SEGMENT else if (stepObj.type === 'double-segment') { html += `

`; html += `

Кухня
`; stepObj.options1.forEach(opt=>{ const sel = quizState.segments?.kitchen===opt.value?'selected':''; html+=`

${opt.title}

${opt.desc||''}

`; }); html+=`

Фурнитура
`; stepObj.options2.forEach(opt=>{ const sel = quizState.segments?.hardware===opt.value?'selected':''; html+=`

${opt.img?`

`:""}

${opt.title}

${opt.desc||''}

`; }); html+='

'; } // radio+checkbox else if (stepObj.type === 'radio+checkbox') { html += `

`; stepOptions.forEach(opt => { const sel = quizState[stepObj.key] === opt.value ? 'selected' : ''; html += `

${opt.title}

`; }); html += `

`; html += `

${stepObj.extra?.label || ''}

`; } // PLAN else if (stepObj.type === 'plan') { html += `

Перетащите мойку, плиту и холодильник на удобные позиции.

`; } // NAV html += `

`; html += ``; html += ``; html += `

`; document.getElementById('quiz-main').innerHTML = html; // === Логика шагов === // MULTI if (stepObj.type === 'multi') { document.querySelectorAll('.quiz-card').forEach(card=>{ card.onclick = ()=>{ let arr = quizState[stepObj.key]||[]; const v = card.dataset.value; if(arr.includes(v)) arr = arr.filter(x=>x!==v); else if(arr.length 0); } // RADIO else if (stepObj.type === 'radio') { document.querySelectorAll('.quiz-card').forEach(card=>{ card.onclick = ()=>{ quizState[stepObj.key]=card.dataset.value; renderStep(stepsConfig,stepIdx); }; }); document.getElementById('quiz-btn-next').disabled = !quizState[stepObj.key]; } // INPUTS else if (stepObj.type === 'inputs') { document.getElementById('size-form').oninput = ()=>{ const fields = stepObj.getFields(quizState); let ok = true, state = {}; fields.forEach(f=>{ const v = document.querySelector(`[name=${f.key}]`).value; state[f.key]=v; if(!v) ok=false; }); quizState[stepObj.key]=state; document.getElementById('quiz-btn-next').disabled = !ok; }; setTimeout(()=>document.getElementById('size-form').oninput(),20); } // double-segment else if (stepObj.type === 'double-segment') { document.querySelectorAll('.quiz-card').forEach(card=>{ card.onclick = ()=>{ const t = card.dataset.type, v = card.dataset.value; quizState.segments=quizState.segments||{}; quizState.segments[t]=v; renderStep(stepsConfig,stepIdx); }; }); document.getElementById('quiz-btn-next').disabled = !(quizState.segments?.kitchen && quizState.segments?.hardware); } // radio+checkbox (wallHeight и antresolDepth) else if (stepObj.type === 'radio+checkbox') { document.querySelectorAll('.quiz-card').forEach(card => { card.onclick = () => { quizState[stepObj.key] = Number(card.dataset.value) || card.dataset.value; renderStep(stepsConfig, stepIdx); }; }); const cb = document.getElementById(stepObj.extra.key); if (cb) { cb.onchange = () => { quizState[stepObj.extra.key] = cb.checked; if (stepObj.extra.key === 'withAntresol' && !cb.checked) { delete quizState.antresolDepth; delete quizState.antresolHandles; } render(); }; } document.getElementById('quiz-btn-next').disabled = !quizState[stepObj.key]; } // PLAN else if (stepObj.type === 'plan') { renderPlanStep( quizState.form, quizState.size || {}, () => { document.getElementById('quiz-btn-next').disabled = false; } ); document.getElementById('quiz-btn-next').disabled = false; } // НАВИГАЦИЯ document.getElementById('quiz-btn-back').onclick=()=>{ if(stepIdx===0) { quizType = null; quizState = {}; step = -1; render(); scrollToQuiz(); } else { // перескакиваем невидимые шаги назад let prevIdx = stepIdx-1; while ( stepsConfig[prevIdx] && typeof stepsConfig[prevIdx].showIf === 'function' && !stepsConfig[prevIdx].showIf(quizState) ) prevIdx--; step = prevIdx; render(); scrollToQuiz(); } }; document.getElementById('quiz-btn-next').onclick=()=>{ // перескакиваем невидимые шаги вперёд let nextIdx = stepIdx+1; while ( stepsConfig[nextIdx] && typeof stepsConfig[nextIdx].showIf === 'function' && !stepsConfig[nextIdx].showIf(quizState) ) nextIdx++; step = nextIdx; render(); }; renderSidebar(stepsConfig, stepIdx); } function getVisibleSteps(cfg, state) { return cfg.filter(step => !step.showIf || step.showIf(state)); } function renderPlanStep(selectedForm, selectedSizes, enableNextBtn) { const grid = document.getElementById('plan-grid'); grid.innerHTML = ''; const cellSize = 60; const widths = Object.values(selectedSizes).map(v => +v || 240); // подстраховка если не выбраны размеры let cols = 0, rows = 0; const invalidCells = new Set(); if (selectedForm === 'Прямая') { cols = Math.max(3, Math.round((widths[0] || 240) / cellSize)); rows = 1; } else if (selectedForm === 'Угловая') { cols = Math.max(2, Math.round((widths[0] || 240) / cellSize)); rows = Math.max(2, Math.round((widths[1] || 180) / cellSize)); invalidCells.add(`${cols-1},${rows-1}`); } else if (selectedForm === 'П-образная') { const [A,B,C] = widths; const w = Math.max(2, Math.round((A || 180) / cellSize)); const h = Math.max(2, Math.round((B || 120) / cellSize)); const back = Math.max(2, Math.round((C || 120) / cellSize)); cols = w; rows = h+1; for (let c = 1; c < back; c++) { for (let r = 1; r < h; r++) { invalidCells.add(`${c},${r}`); } } } else { // дефолт (пусть будет 3x1) cols = 3; rows = 1; } grid.style.gridTemplateColumns = `repeat(${cols}, 60px)`; grid.style.gridTemplateRows = `repeat(${rows}, 60px)`; // собираем валидные ячейки const validCells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const cell = document.createElement('div'); cell.className = 'cell'; cell.style.background = '#fff'; cell.style.borderRadius = '8px'; cell.style.minHeight = '56px'; cell.style.minWidth = '56px'; cell.style.display = 'flex'; cell.style.alignItems = 'center'; cell.style.justifyContent = 'center'; cell.style.boxShadow = '0 1px 4px #0001'; cell.style.border = '1px solid #e0e0e0'; if (invalidCells.has(`${c},${r}`)) { cell.style.background="grey"; cell.style.border="none"; cell.style.opacity = '0.4'; cell.style.pointerEvents = 'none'; } else { validCells.push(cell); } cell.addEventListener('dragover', e => e.preventDefault()); cell.addEventListener('drop', e => { e.preventDefault(); const draggedId = e.dataTransfer.getData('text/plain'); const dragged = document.getElementById(draggedId); if (dragged && cell !== dragged.parentNode) { cell.appendChild(dragged); if(typeof enableNextBtn === 'function') enableNextBtn(); } }); grid.appendChild(cell); } } // какие приборы (можешь добавить еще) const appliances = [ { id: 'sink', img: 'https://russia-zov.ru/wp-content/uploads/2025/07/sink.png' }, { id: 'cooktop', img: 'https://russia-zov.ru/wp-content/uploads/2025/07/base_oven.png' }, { id: 'fridge', img: 'https://russia-zov.ru/wp-content/uploads/2025/07/fridge.png' } ]; // на старте просто кладем приборы в первые свободные клетки appliances.forEach((a, idx) => { if(document.getElementById(`placed-${a.id}`)) return; // уже есть const cell = validCells[idx]; if (!cell) return; const img = document.createElement('img'); img.src = a.img; img.id = `placed-${a.id}`; img.draggable = true; img.style.maxWidth = '44px'; img.style.maxHeight = '44px'; img.style.cursor = 'grab'; img.dataset.type = a.id; img.addEventListener('dragstart', ev => { ev.dataTransfer.setData('text/plain', ev.target.id); }); cell.appendChild(img); // Тач-обработка для мобилок: img.addEventListener('touchstart', function(e) { e.preventDefault(); let moveImg = img.cloneNode(true); moveImg.style.position = 'fixed'; moveImg.style.zIndex = 9999; moveImg.style.pointerEvents = 'none'; moveImg.style.opacity = '0.7'; document.body.appendChild(moveImg); const move = (touch) => { moveImg.style.left = (touch.clientX-22)+'px'; moveImg.style.top = (touch.clientY-22)+'px'; }; move(e.touches[0]); const touchmove = (e) => { move(e.touches[0]); }; const touchend = (e) => { moveImg.remove(); document.removeEventListener('touchmove', touchmove); document.removeEventListener('touchend', touchend); const touch = e.changedTouches[0]; const dropElem = document.elementFromPoint(touch.clientX, touch.clientY); if(dropElem && dropElem.classList.contains('cell') && !dropElem.querySelector('img')) { dropElem.appendChild(img); if(typeof enableNextBtn === 'function') enableNextBtn(); } }; document.addEventListener('touchmove', touchmove); document.addEventListener('touchend', touchend); }); }); if(typeof enableNextBtn === 'function') enableNextBtn(); } function renderSidebar(cfg, idx) { let html = ``; document.getElementById('quiz-sidebar').innerHTML = html; } // Первый рендер render();