Карта компетенций дизайнера — тест для диагностики навыков веб-дизайнера в 2026 году

Вставка для Tilda — Карта компетенций дизайнера

:root {
  --bg: #dedede;
  --text: #141416;
  --muted: rgba(20, 20, 22, 0.70);
  --muted2: rgba(20, 20, 22, 0.55);

/* Typography tokens (Inter) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

--fs-display: clamp(44px, 6vw, 64px);
  --fs-h1: 30px; /* question title + category title */
  --fs-h1-mobile: 24px;
  --fs-h2: 20px;
  --fs-body: 16px;
  --fs-ui: 14px;
  --fs-caption: 12px;

--lh-display: 0.92;
  --lh-h1: 1.12;
  --lh-body: 1.45;
  --ls-display: -0.03em;
  --ls-tight: -0.02em;
  --ls-normal: -0.01em;

--card: #f8f8f8;
  --card2: #ffffff;
  --stroke: rgba(0, 0, 0, 0.16);
  --stroke2: rgba(0, 0, 0, 0.22);
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.10);

--radius: 18px;

--btn: #1c1c1e;
  --btnHover: #121214;
  --btnText: #f6f6f6;
  --btn2: #6f6f70;
  --btn2Hover: #5f5f61;

/* Quiz colors (bg + criteria cards) */
  --cat1Bg: #b7c7bb;
  --cat1Crit: #c9d6cf;
  --cat2Bg: #a6b8ce;
  --cat2Crit: #c3d3e6;
  --cat3Bg: #e4c5ee;
  --cat3Crit: #ebd5f2;
  --cat4Bg: #ecf0a6;
  --cat4Crit: #f6f9c2;
  --cat5Bg: #d8d5c2;
  --cat5Crit: #eae7d5;
  --cat6Bg: #b99ce6;
  --cat6Crit: #d5bff8;

--quizBg: var(--cat1Bg);
  --critBg: var(--cat1Crit);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  background: var(--bg);
  color: var(--text);
}

.container {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.viewport {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 16px;
}

.window {
  width: min(980px, 100%);
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  border-radius: 22px;
  padding: 22px;
  min-height: 640px;
  height: min(760px, calc(100vh - 72px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.window__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 14px;
}

.window__name { font-size: 16px; font-weight: var(--fw-semibold); }
.meta { font-size: 13px; color: var(--muted); white-space: nowrap; }

.screen { padding: 6px 2px 2px; flex: 1; overflow: auto; }

.card {
  background: var(--card2);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: none;
  border-radius: var(--radius);
  padding: 18px;
}

.hidden { display: none !important; }

.h1 {
  margin: 0 0 10px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}
.h2 {
  margin: 0 0 12px;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: var(--fw-bold);
}
.muted { color: var(--muted); margin: 0; }
.list { margin: 10px 0 0; color: rgba(20, 20, 22, 0.78); padding-left: 18px; font-size: var(--fs-body); line-height: var(--lh-body); }
.window[data-screen="screenIntro"] .list { font-weight: var(--fw-semibold); }
.list li { margin: 8px 0; }

.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.actions--space { justify-content: space-between; }
.actions__right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.btn {
  appearance: none;
  border: 1px solid var(--stroke2);
  background: transparent;
  color: var(--text);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, opacity .2s ease;
}
.btn:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.30); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--btnText);
}
.btn--primary:hover { background: var(--btnHover); border-color: var(--btnHover); }
.btn--primary[disabled] {
  background: #9ba0a6;
  border-color: #9ba0a6;
  color: rgba(255, 255, 255, 0.92);
}
.btn--secondary {
  border-color: var(--btn2);
  background: var(--btn2);
  color: rgba(255, 255, 255, 0.94);
}
.btn--secondary:hover {
  background: var(--btn2Hover);
  border-color: var(--btn2Hover);
}
.btn--secondary[disabled] {
  opacity: 0.55;
}
.btn--ghost { background: transparent; }

.btn--cta {
  width: 100%;
  justify-content: center;
  padding: 22px 16px;
  border-radius: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  font-size: var(--fs-body);
}

.btn--withIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btnIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn--link {
  border: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(20, 20, 22, 0.66);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.btn--link:active { transform: translateY(1px); }
.btn--link:hover {
  background: transparent;
  color: rgba(20, 20, 22, 0.82);
  text-decoration: underline;
  border: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(20, 20, 22, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 6px 10px;
  margin-bottom: 10px;
  max-width: 100%;
}

.quiz__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.progress {
  width: min(340px, 100%);
  height: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--btn);
}

/* Quiz window background depends on category */
.window[data-screen="screenQuiz"] { background: var(--quizBg); }
.window[data-screen="screenQuiz"][data-cat="1"] { --quizBg: var(--cat1Bg); --critBg: var(--cat1Crit); }
.window[data-screen="screenQuiz"][data-cat="2"] { --quizBg: var(--cat2Bg); --critBg: var(--cat2Crit); }
.window[data-screen="screenQuiz"][data-cat="3"] { --quizBg: var(--cat3Bg); --critBg: var(--cat3Crit); }
.window[data-screen="screenQuiz"][data-cat="4"] { --quizBg: var(--cat4Bg); --critBg: var(--cat4Crit); }
.window[data-screen="screenQuiz"][data-cat="5"] { --quizBg: var(--cat5Bg); --critBg: var(--cat5Crit); }
.window[data-screen="screenQuiz"][data-cat="6"] { --quizBg: var(--cat6Bg); --critBg: var(--cat6Crit); }
.window[data-screen="screenQuiz"]:not([data-cat]) { --quizBg: var(--cat1Bg); --critBg: var(--cat1Crit); }

.options { display: grid; gap: 10px; margin-top: 8px; }
.option {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  padding: 14px 14px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.option:hover { background: rgba(255, 255, 255, 0.70); border-color: rgba(0, 0, 0, 0.22); }
.option:active { transform: translateY(1px); }
.option input {
  margin-top: 3px;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.85);
  flex: 0 0 auto;
}
.option.is-selected input {
  border-color: rgba(0, 0, 0, 0.70);
  background: var(--btn);
}
.option__text { color: rgba(20, 20, 22, 0.92); line-height: 1.35; }
.window[data-screen="screenQuiz"] .option__text { font-weight: var(--fw-semibold); }
.option__sub { color: var(--muted2); font-size: 12px; margin-top: 4px; }
.option.is-selected { border-color: rgba(0, 0, 0, 0.55); }

.grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 920px) { .grid { grid-template-columns: 1fr; } }

.chartWrap { aspect-ratio: 1 / 1; width: 100%; max-width: 560px; margin: 0 auto; }
.chartWrap--lg { max-width: 720px; }
canvas { width: 100%; height: 100%; }

.notice {
  margin-top: 12px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 0.55);
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(20, 20, 22, 0.88);
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 680px) { .split { grid-template-columns: 1fr; } }
.label { font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: var(--muted2); margin-bottom: 8px; }
.stack { display: grid; gap: 10px; }

.tag {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  padding: 10px 12px;
}
.tag__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tag__title { font-weight: var(--fw-bold); }
.tag__score { font-variant-numeric: tabular-nums; color: rgba(20, 20, 22, 0.72); }
.tag__hint { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.35; }

.details { display: grid; gap: 12px; }
.detail {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.40);
  border-radius: 16px;
  padding: 14px;
}
.detail__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.detail__title { font-weight: var(--fw-bold); }
.detail__avg { font-variant-numeric: tabular-nums; color: rgba(20, 20, 22, 0.78); }
.detail__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
@media (max-width: 820px) { .detail__cols { grid-template-columns: 1fr; } }
.miniList { margin: 0; padding-left: 18px; color: var(--muted); }
.miniList li { margin: 4px 0; }
.miniTitle { font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: var(--muted2); margin-bottom: 6px; }

code { color: rgba(20, 20, 22, 0.85); }

@media (max-width: 620px) {
  .viewport { align-items: stretch; padding: 16px; }
  .window { border-radius: 18px; padding: 16px; }
  .window__top { padding-bottom: 12px; }
}

/* Intro screen layout */
.window[data-screen="screenIntro"] .window__top {
  display: none;
}
.window[data-screen="screenIntro"] {
  padding: 0;
}
.window[data-screen="screenIntro"] #screenIntro {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 30px 8px;
}
.introTitle {
  margin: 0;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-extrabold);
}
.introBody {
  margin-top: auto;
  max-width: 560px;
}
.introH2 { margin-bottom: 10px; }
.introActions {
  margin-top: 16px;
  padding-top: 0;
  margin-left: -22px;
  margin-right: -22px;
  padding-bottom: 0;
}
.introResume {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}
.window[data-screen="screenIntro"] .introResume {
  display: none;
}

@media (max-width: 620px) {
  .window[data-screen="screenIntro"] { padding: 0; }
  .window[data-screen="screenIntro"] #screenIntro { padding: 18px 18px 8px; }
  .window[data-screen="screenIntro"] .introActions { margin-left: -10px; margin-right: -10px; }
  .introBody { margin-top: auto; }
}

/* Quiz screen layout (match mock) */
.window[data-screen="screenQuiz"] .window__top {
  display: none;
}
.window[data-screen="screenQuiz"] {
  padding: 0;
  border: 0;
  box-shadow: none;
}
#screenQuiz {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 26px 26px 8px;
  overflow-x: hidden;
}
.quizTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.quizTopRight {
  display: flex;
  align-items: center;
  gap: 14px;
}
.quizCounter {
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: rgba(20, 20, 22, 0.70);
  letter-spacing: -0.01em;
}
.quizProgress {
  width: 280px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.10);
  overflow: hidden;
}
.quizProgress__bar {
  height: 100%;
  background: rgba(20, 20, 22, 0.92);
  border-radius: 999px;
}
.quizBrand {
  font-size: var(--fs-ui);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: var(--fw-semibold);
  color: rgba(20, 20, 22, 0.78);
}
.quizCategoryLine {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: rgba(20, 20, 22, 0.82);
  letter-spacing: -0.01em;
  margin-top: 26px;
}
.quizQuestion {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}
.window[data-screen="screenQuiz"] .options {
  margin-top: 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.window[data-screen="screenQuiz"] .option {
  border-radius: 10px;
  padding: 18px 20px;
  background: var(--critBg);
  border: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.window[data-screen="screenQuiz"] .option:hover {
  border: 0;
  filter: brightness(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.window[data-screen="screenQuiz"] .option.is-selected {
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  filter: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.window[data-screen="screenQuiz"] .option input {
  display: none;
}
.quizBottom {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-left: -18px;
  margin-right: -18px;
  padding-bottom: 0;
}
.window[data-screen="screenQuiz"] .btn--cta {
  padding: 20px 16px;
  border-radius: 14px;
}
.window[data-screen="screenQuiz"] .options {
  gap: 4px;
}

@media (max-width: 620px) {
  .window { min-height: 0; height: auto; }
  #screenQuiz { padding: 18px; }
  .quizQuestion { font-size: var(--fs-h1-mobile); }
  .h1 { font-size: var(--fs-h1-mobile); }
  .quizTopRight { width: 100%; justify-content: space-between; }
  .quizProgress { width: 100%; max-width: 220px; }
  .quizBottom { margin-left: -10px; margin-right: -10px; }
}

/* Results screen layout */
.window[data-screen="screenResults"] .window__top {
  display: none;
}
.window[data-screen="screenResults"] {
  padding: 0;
  border: 0;
  box-shadow: none;
}
.window[data-screen="screenResults"] #screenResults {
  padding: 30px 30px 8px;
  height: 100%;
}
.resultsTitle {
  margin: 0;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-extrabold);
}
.resultsChart {
  margin-top: 18px;
}
.chartLegend {
  margin-top: 12px;
  display: none;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.legendRow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.legendDot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.legendName {
  font-size: var(--fs-body);
  line-height: 1.25;
  font-weight: var(--fw-semibold);
  color: rgba(20, 20, 22, 0.90);
}
.legendScore {
  font-size: var(--fs-body);
  line-height: 1.25;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: rgba(20, 20, 22, 0.72);
  white-space: nowrap;
}
.resultsSummary {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(20, 20, 22, 0.86);
  line-height: 1.45;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.window[data-screen="screenResults"] .notice {
  border: 0;
}
.resultsSW {
  margin-top: 28px;
}
.resultsH2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.resultsH2--sm {
  margin-bottom: 10px;
}
.resultsDetails {
  margin-top: 48px;
}
.window[data-screen="screenResults"] .tag,
.window[data-screen="screenResults"] .detail {
  border: 0;
  box-shadow: none;
}

.window[data-screen="screenResults"] .tag {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.window[data-screen="screenResults"] .detail {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.window[data-screen="screenResults"] .stack { gap: 4px; }
.window[data-screen="screenResults"] .tag__hint { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.window[data-screen="screenResults"] .detail__title {
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}
.window[data-screen="screenResults"] .miniTitle,
.window[data-screen="screenResults"] .miniList li {
  font-size: var(--fs-body);
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  color: rgba(20, 20, 22, 0.92);
}
.window[data-screen="screenResults"] .miniList { color: rgba(20, 20, 22, 0.92); }
.window[data-screen="screenResults"] .tag__title { font-weight: var(--fw-bold); }
.window[data-screen="screenResults"] .detail__avg { font-weight: var(--fw-semibold); }
.window[data-screen="screenResults"] .miniTitle {
  text-transform: none;
  letter-spacing: -0.01em;
  color: rgba(20, 20, 22, 0.70);
}
.window[data-screen="screenResults"] .miniList {
  color: rgba(20, 20, 22, 0.78);
}
.window[data-screen="screenResults"] .tag__hint {
  color: rgba(20, 20, 22, 0.72);
}
.resultsBottom {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  margin-left: -22px;
  margin-right: -22px;
  padding-bottom: 0;
}

.window[data-screen="screenResults"] .itemTable {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.window[data-screen="screenResults"] .itemRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.10);
}
.window[data-screen="screenResults"] .itemTitle {
  font-size: var(--fs-body);
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  color: rgba(20, 20, 22, 0.92);
}
.window[data-screen="screenResults"] .itemScore {
  font-size: var(--fs-body);
  line-height: 1.35;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: rgba(20, 20, 22, 0.72);
  white-space: nowrap;
}
.window[data-screen="screenResults"] .btn--cta {
  padding: 22px 16px;
}
.window[data-screen="screenResults"] .btn--link {
  justify-self: center;
}

@media (max-width: 620px) {
  .window[data-screen="screenResults"] #screenResults { padding: 18px 18px 8px; }
  .resultsBottom { margin-left: -10px; margin-right: -10px; }
  .chartWrap--lg { max-width: 100%; }
  .resultsSummary { padding: 12px 12px; }
  .chartLegend { display: grid; }
}

const STORAGE_KEY = "competency_map_answers_v1";

const els = {
  metaProgress: document.getElementById("metaProgress"),
  window: document.getElementById("window"),
  quizProgress: document.getElementById("quizProgress"),

screenLoading: document.getElementById("screenLoading"),
  screenIntro: document.getElementById("screenIntro"),
  screenQuiz: document.getElementById("screenQuiz"),
  screenResults: document.getElementById("screenResults"),

btnStart: document.getElementById("btnStart"),
  btnResume: document.getElementById("btnResume"),
  btnBack: document.getElementById("btnBack"),
  btnNext: document.getElementById("btnNext"),
  btnReset: document.getElementById("btnReset"),
  btnRestart: document.getElementById("btnRestart"),
  btnExport: document.getElementById("btnExport"),
  btnDownload: document.getElementById("btnDownload"),

quizCategory: document.getElementById("quizCategory"),
  quizTitle: document.getElementById("quizTitle"),
  quizForm: document.getElementById("quizForm"),
  progressBar: document.getElementById("progressBar"),

radarCanvas: document.getElementById("radarCanvas"),
  chartError: document.getElementById("chartError"),
  chartLegend: document.getElementById("chartLegend"),
  resultsSummary: document.getElementById("resultsSummary"),
  strengths: document.getElementById("strengths"),
  weaknesses: document.getElementById("weaknesses"),
  categoryDetails: document.getElementById("categoryDetails"),
};

function clamp(n, min, max) {
  return Math.max(min, Math.min(max, n));
}

function formatScore(n) {
  return (Math.round(n * 100) / 100).toFixed(2);
}

function formatAxisScore(n) {
  const rounded = Math.round(n * 10) / 10;
  const asText = Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
  return asText.replace(".", ",");
}

function getCssVar(name, fallback) {
  const css = getComputedStyle(document.documentElement);
  const value = css.getPropertyValue(name).trim();
  return value || fallback;
}

function splitToTwoLines(text, maxLen = 18) {
  const t = String(text || "").trim();
  if (!t) return ["", ""];
  if (t.length <= maxLen) return [t, ""];

const words = t.split(/\s+/).filter(Boolean);
  if (words.length === 1) {
    const mid = Math.ceil(t.length / 2);
    return [t.slice(0, mid), t.slice(mid)];
  }

let bestIdx = 1;
  let bestScore = Infinity;
  for (let i = 1; i < words.length; i += 1) {
    const a = words.slice(0, i).join(" ");
    const b = words.slice(i).join(" ");
    const worst = Math.max(a.length, b.length);
    const penalty = Math.abs(a.length - b.length);
    const over = Math.max(0, worst - maxLen);
    const score = over * 10 + penalty;
    if (score < bestScore) {
      bestScore = score;
      bestIdx = i;
    }
  }
  return [words.slice(0, bestIdx).join(" "), words.slice(bestIdx).join(" ")];
}

function saveProgress({ answers, currentIndex, version }) {
  const payload = { version, currentIndex, answers, savedAt: new Date().toISOString() };
  localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
}

function clearProgress() {
  localStorage.removeItem(STORAGE_KEY);
}

function downloadJson(filename, data) {
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 3000);
}

function downloadCanvasPng(canvas, filename) {
  if (!canvas) throw new Error("Нет canvas для экспорта");

const tmp = document.createElement("canvas");
  tmp.width = canvas.width;
  tmp.height = canvas.height;
  const ctx = tmp.getContext("2d");
  if (!ctx) throw new Error("Не удалось получить 2D контекст");

// White background for a clean export.
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(0, 0, tmp.width, tmp.height);
  ctx.drawImage(canvas, 0, 0);

const url = tmp.toDataURL("image/png");
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
}

function summarizeLevel(avg) {
  if (avg >= 3.5) return "сильно";
  if (avg >= 2.5) return "уверенно";
  if (avg >= 1.5) return "средне";
  return "слабо";
}

function buildTag({ title, score, hint }) {
  const wrap = document.createElement("div");
  wrap.className = "tag";
  if (hint && typeof hint === "object") {
    // noop; keep backward compatibility if someone accidentally passes wrong shape
  }

const row = document.createElement("div");
  row.className = "tag__row";

const t = document.createElement("div");
  t.className = "tag__title";
  t.textContent = title;

const s = document.createElement("div");
  s.className = "tag__score";
  s.textContent = score;

row.appendChild(t);
  row.appendChild(s);
  wrap.appendChild(row);

if (hint) {
    const p = document.createElement("div");
    p.className = "tag__hint";
    p.textContent = hint;
    wrap.appendChild(p);
  }

return wrap;
}

let radarChart = null;

function renderResults({ data, answers }) {
  const stats = computeCategoryStats(data, answers);
  const catColors = getCategoryColorMap();
  const sorted = [...stats].sort((a, b) => b.avg - a.avg);
  const best = sorted.slice(0, 2);
  const worst = sorted.slice(-2).reverse();

if (els.resultsSummary) {
    const parts = [];
    parts.push("Как читать результат: это снимок текущих практик, а не «оценка как специалиста».");
    parts.push("Выше всего — то, что уже помогает в работе; ниже всего — ближайшие точки роста.");
    parts.push("Рекомендация: выберите 1 зону роста на 2 недели и доведите 1–2 пункта до стабильного уровня «2–3 из 4».");
    els.resultsSummary.innerHTML = parts.join(" ");
  }

els.strengths.innerHTML = "";
  els.weaknesses.innerHTML = "";

for (const s of best) {
    const hint = s.strong_hint || `Уровень: ${summarizeLevel(s.avg)}. Удерживайте качество и масштабируйте подходы.`;
    const tag = buildTag({ title: `✨ ${s.title}`, score: formatScore(s.avg), hint });
    els.strengths.appendChild(tag);
  }
  for (const s of worst) {
    const hint = s.weak_hint || `Уровень: ${summarizeLevel(s.avg)}. Выберите 1–2 пункта и доведите их до «2–3».`;
    const tag = buildTag({ title: `🔥 ${s.title}`, score: formatScore(s.avg), hint });
    els.weaknesses.appendChild(tag);
  }

// Details per category (all items).
  els.categoryDetails.innerHTML = "";
  for (const cat of stats) {
    const detail = document.createElement("div");
    detail.className = "detail";

const head = document.createElement("div");
    head.className = "detail__head";
    const left = document.createElement("div");
    left.className = "detail__title";
    left.textContent = cat.title;
    const right = document.createElement("div");
    right.className = "detail__avg";
    right.textContent = `Среднее: ${formatScore(cat.avg)} из 4`;
    head.appendChild(left);
    head.appendChild(right);
    detail.appendChild(head);

const list = document.createElement("div");
    list.className = "itemTable";

const byScore = [...cat.items].sort((a, b) => b.score - a.score);
    for (const it of byScore) {
      const row = document.createElement("div");
      row.className = "itemRow";

const t = document.createElement("div");
      t.className = "itemTitle";
      t.textContent = it.title;

const s = document.createElement("div");
      s.className = "itemScore";
      s.textContent = `${it.score} из 4`;

row.appendChild(t);
      row.appendChild(s);
      list.appendChild(row);
    }

detail.appendChild(list);
    els.categoryDetails.appendChild(detail);
  }

// Radar chart.
  const labels = stats.map((s) => s.title);
  const values = stats.map((s) => clamp(s.avg, 0, 4));
  const pointColors = stats.map((s) => catColors[String(s.id)] || "#1c1c1e");
  const textDark = getCssVar("--text", "#141416");
  const width = typeof window !== "undefined" ? window.innerWidth : 1200;
  const isMobile = width <= 620;
  const isTiny = width <= 360;
  const nameFont = isTiny ? 11 : isMobile ? 13 : 13;
  const scoreFont = isTiny ? 11 : isMobile ? 13 : 12;
  const layoutPadding = isTiny ? 34 : isMobile ? 40 : 54;

if (!window.Chart) {
    els.chartError.classList.remove("hidden");
    return;
  }

els.chartError.classList.add("hidden");

if (radarChart) {
    radarChart.destroy();
    radarChart = null;
  }

const ctx = els.radarCanvas.getContext("2d");

if (els.chartLegend) {
    els.chartLegend.innerHTML = "";
    for (let i = 0; i < stats.length; i += 1) {
      const s = stats[i];
      const row = document.createElement("div");
      row.className = "legendRow";

const dot = document.createElement("span");
      dot.className = "legendDot";
      dot.style.background = pointColors[i] || "#1c1c1e";

const name = document.createElement("span");
      name.className = "legendName";
      name.textContent = s.title;

const score = document.createElement("span");
      score.className = "legendScore";
      score.textContent = `${formatAxisScore(s.avg)} из 4`;

row.appendChild(dot);
      row.appendChild(name);
      row.appendChild(score);
      els.chartLegend.appendChild(row);
    }
  }

const axisLabelsPlugin = {
    id: "axisLabelsPlugin",
    afterDraw(chart) {
      const scale = chart.scales && chart.scales.r;
      if (!scale) return;

const center = { x: scale.xCenter, y: scale.yCenter };
      const dotRadius = isMobile ? 6 : 4;
      const offset = isTiny ? 10 : isMobile ? 14 : 16;
      const padX = 8;

const ctx2 = chart.ctx;
      ctx2.save();
      ctx2.textAlign = "center";
      ctx2.textBaseline = "top";

for (let i = 0; i < stats.length; i += 1) {
        const s = stats[i];
        const base = scale.getPointPositionForValue(i, scale.max);
        const dx = base.x - center.x;
        const dy = base.y - center.y;
        const len = Math.max(1, Math.hypot(dx, dy));
        const nx = dx / len;
        const ny = dy / len;

let x = base.x + nx * offset;
        let y = base.y + ny * offset;

const [l1, l2] = splitToTwoLines(s.title, isMobile ? 16 : 14);
        const lineHeight = isMobile ? 16 : 17;
        const labelLines = l2 ? 2 : 1;
        const scoreText = `${formatAxisScore(s.avg)} из 4`;

// Measure widths to avoid clipping on the sides.
        ctx2.font = `600 ${nameFont}px Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial`;
        const w1 = ctx2.measureText(l1).width;
        const w2 = l2 ? ctx2.measureText(l2).width : 0;
        ctx2.font = `600 ${scoreFont}px Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial`;
        const ws = ctx2.measureText(scoreText).width;
        const halfW = Math.ceil(Math.max(w1, w2, ws) / 2);

const textBlockHeight = dotRadius + 6 + labelLines * lineHeight + lineHeight; // + score line
        const topPad = 8;
        const bottomPad = 8;

// keep inside canvas (avoid clipping on mobile)
        x = Math.max(padX + halfW, Math.min(chart.width - padX - halfW, x));
        y = Math.max(topPad, Math.min(chart.height - bottomPad - textBlockHeight, y));

// colored dot above the label
        ctx2.fillStyle = pointColors[i] || "#000";
        ctx2.beginPath();
        ctx2.arc(x, y, dotRadius, 0, Math.PI * 2);
        ctx2.fill();

if (isMobile) continue;

const textY = y + dotRadius + 6;

ctx2.fillStyle = textDark;
        ctx2.font = `600 ${nameFont}px Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial`;
        ctx2.fillText(l1, x, textY);
        if (l2) ctx2.fillText(l2, x, textY + (isMobile ? 16 : 18));

ctx2.font = `600 ${scoreFont}px Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial`;
        ctx2.fillText(scoreText, x, textY + (l2 ? (isMobile ? 32 : 36) : (isMobile ? 18 : 20)));
      }

ctx2.restore();
    },
  };

radarChart = new window.Chart(ctx, {
    type: "radar",
    data: {
      labels,
      datasets: [
        {
          label: "Средний балл",
          data: values,
          fill: true,
          backgroundColor: "rgba(20, 20, 22, 0.06)",
          borderColor: "rgba(20, 20, 22, 0.80)",
          pointBackgroundColor: pointColors,
          pointBorderColor: "rgba(255, 255, 255, 0.95)",
          pointRadius: 4,
          borderWidth: 2,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: { legend: { display: false } },
      layout: { padding: layoutPadding },
      scales: {
        r: {
          beginAtZero: true,
          min: 0,
          max: 4,
          ticks: { display: false, stepSize: 1, backdropColor: "transparent" },
          grid: { color: "rgba(0,0,0,0.14)" },
          angleLines: { color: "rgba(0,0,0,0.14)" },
          pointLabels: { display: false },
        },
      },
    },
    plugins: [axisLabelsPlugin],
  });
}

function renderQuestion({ questions, state }) {
  const q = questions[state.currentIndex];
  if (!q) return;

if (els.window) els.window.dataset.cat = String(q.categoryId);
  renderMeta({ currentIndex: state.currentIndex, total: questions.length });
  els.quizCategory.textContent = `${q.categoryId}. ${q.categoryTitle}`;
  els.quizTitle.textContent = q.title;
  if (els.progressBar) {
    els.progressBar.style.width = `${Math.round(((state.currentIndex + 1) / questions.length) * 100)}%`;
  }

els.quizForm.innerHTML = "";
  const currentValue = state.answers[q.itemId];

const optionEls = [];
  for (const opt of q.options) {
    const label = document.createElement("label");
    label.className = "option";

const input = document.createElement("input");
    input.type = "radio";
    input.name = "answer";
    input.value = String(opt.score);
    input.checked = String(currentValue) === String(opt.score);

const textWrap = document.createElement("div");
    textWrap.className = "option__text";
    textWrap.textContent = opt.text;

label.appendChild(input);
    label.appendChild(textWrap);

if (input.checked) label.classList.add("is-selected");

label.addEventListener("click", () => {
      state.answers[q.itemId] = Number(opt.score);
      els.btnNext.disabled = false;
      for (const el of optionEls) el.classList.remove("is-selected");
      label.classList.add("is-selected");
      saveProgress({ answers: state.answers, currentIndex: state.currentIndex, version: state.version });
    });

els.quizForm.appendChild(label);
    optionEls.push(label);
  }

els.btnBack.disabled = state.currentIndex === 0;
  els.btnNext.textContent = state.currentIndex === questions.length - 1 ? "К результатам" : "Дальше";
  els.btnNext.disabled = currentValue === undefined || currentValue === null || Number.isNaN(Number(currentValue));
}

async function main() {
  showScreen("screenLoading");
  const dataEl = document.getElementById("competenciesData");
  if (!dataEl) throw new Error("Не удалось найти встроенные данные competenciesData");
  const raw = String(dataEl.textContent || "").trim();
  if (!raw) throw new Error("competenciesData пустой");
  const data = JSON.parse(raw);

const questions = buildQuestions(data);
  const version = String(data.version || "1");

const saved = loadSaved();
  const hasSaved = saved && saved.version === version && saved.answers && Object.keys(saved.answers).length > 0;
  if (els.btnResume) {
    els.btnResume.classList.toggle("hidden", !hasSaved);
  }

showScreen("screenIntro");

const state = {
    version,
    currentIndex: hasSaved ? clamp(Number(saved.currentIndex) || 0, 0, questions.length - 1) : 0,
    answers: hasSaved ? saved.answers : {},
  };

if (hasSaved && els.btnResume) {
    els.btnResume.addEventListener("click", () => {
      showScreen("screenQuiz");
      renderQuestion({ questions, state });
    });
  }

els.btnStart?.addEventListener("click", () => {
    if (hasSaved) clearProgress();
    state.currentIndex = 0;
    state.answers = {};
    showScreen("screenQuiz");
    renderQuestion({ questions, state });
  });

els.btnBack?.addEventListener("click", () => {
    state.currentIndex = clamp(state.currentIndex - 1, 0, questions.length - 1);
    saveProgress({ answers: state.answers, currentIndex: state.currentIndex, version: state.version });
    renderQuestion({ questions, state });
  });

els.btnNext?.addEventListener("click", () => {
    if (state.currentIndex >= questions.length - 1) {
      saveProgress({ answers: state.answers, currentIndex: state.currentIndex, version: state.version });
      showScreen("screenResults");
      renderMeta({ currentIndex: questions.length - 1, total: questions.length });
      renderResults({ data, answers: state.answers });
      return;
    }
    state.currentIndex = clamp(state.currentIndex + 1, 0, questions.length - 1);
    saveProgress({ answers: state.answers, currentIndex: state.currentIndex, version: state.version });
    renderQuestion({ questions, state });
  });

if (els.btnReset) {
    els.btnReset.addEventListener("click", () => {
      clearProgress();
      state.currentIndex = 0;
      state.answers = {};
      renderQuestion({ questions, state });
    });
  }

els.btnRestart?.addEventListener("click", () => {
    clearProgress();
    state.currentIndex = 0;
    state.answers = {};
    showScreen("screenIntro");
    renderMeta({ currentIndex: 0, total: 0 });
  });

if (els.btnExport) {
    els.btnExport.addEventListener("click", () => {
      const payload = {
        version,
        exportedAt: new Date().toISOString(),
        answers: state.answers,
        averages: computeCategoryStats(data, state.answers).map((c) => ({
          id: c.id,
          title: c.title,
          avg: Math.round(c.avg * 100) / 100,
        })),
      };
      downloadJson("competency-map-answers.json", payload);
    });
  }

if (els.btnDownload) {
    els.btnDownload.addEventListener("click", () => {
      try {
        if (!radarChart || !els.radarCanvas) {
          throw new Error("Схема ещё не готова");
        }
        const filename = `competency-map-result-${version}.png`;
        downloadCanvasPng(els.radarCanvas, filename);
      } catch (err) {
        console.error(err);
        alert(err && err.message ? err.message : String(err));
      }
    });
  }

renderMeta({ currentIndex: 0, total: 0 });
}

main().catch((err) => {
  console.error(err);
  els.screenLoading.innerHTML = `<h1 class="h1">Ошибка загрузки</h1><p class="muted">${String(
    err && err.message ? err.message : err
  )}</p><p class="muted">Подсказка: убедитесь, что вставили блок целиком (CSS+JS+данные) и что Chart.js загрузился.</p>`;
});

{
  "version": "1",
  "scale": {
    "min": 0,
    "max": 4
  },
  "categories": [
    {
      "id": "1",
      "title": "Понимание задачи и контекста",
      "strong_hint": "",
      "weak_hint": "",
      "items": [
        {
          "id": "1.1",
          "title": "Сбор и структурирование вводных",
          "options": [
            {
              "score": 0,
              "text": "начинаю работу почти без погружения, беру в работу то, что дали"
            },
            {
              "score": 1,
              "text": "читаю бриф и задаю базовые вопросы, но часто упускаю важные вводные"
            },
            {
              "score": 2,
              "text": "умею собрать основные данные по проекту: продукт, цель, аудитория, ограничения, пожелания"
            },
            {
              "score": 3,
              "text": "умею структурировать вводные в понятную картину проекта и видеть, чего не хватает для старта"
            },
            {
              "score": 4,
              "text": "умею быстро превращать хаотичные вводные в ясную рабочую основу и направлять клиента точными вопросами"
            }
          ]
        },
        {
          "id": "1.2",
          "title": "Понимание бизнес-задачи проекта",
          "options": [
            {
              "score": 0,
              "text": "думаю в категории «нужно сделать сайт»"
            },
            {
              "score": 1,
              "text": "понимаю общую цель проекта, но не связываю ее с конкретными решениями"
            },
            {
              "score": 2,
              "text": "понимаю, какую задачу должен решать сайт: продажа, упаковка, доверие, заявки, презентация"
            },
            {
              "score": 3,
              "text": "умею подчинять структуру, смыслы и визуал бизнес-задаче проекта"
            },
            {
              "score": 4,
              "text": "умею видеть реальную задачу глубже формулировки клиента и предлагать более точный подход"
            }
          ]
        },
        {
          "id": "1.3",
          "title": "Анализ аудитории",
          "options": [
            {
              "score": 0,
              "text": "не анализирую аудиторию, работаю на общих представлениях"
            },
            {
              "score": 1,
              "text": "могу назвать базовую ЦА, но опираюсь скорее на догадки"
            },
            {
              "score": 2,
              "text": "умею определить основные сегменты, боли, мотивацию и ожидания аудитории"
            },
            {
              "score": 3,
              "text": "умею использовать понимание аудитории в структуре, аргументации и подаче сайта"
            },
            {
              "score": 4,
              "text": "умею находить неочевидные особенности аудитории и на их основе усиливать точность проекта"
            }
          ]
        },
        {
          "id": "1.4",
          "title": "Анализ конкурентов и рынка",
          "options": [
            {
              "score": 0,
              "text": "почти не смотрю рынок или смотрю только ради визуальных референсов"
            },
            {
              "score": 1,
              "text": "могу собрать подборку конкурентов, но без глубоких выводов"
            },
            {
              "score": 2,
              "text": "умею анализировать конкурентов по подаче, структуре, аргументам и визуальному уровню"
            },
            {
              "score": 3,
              "text": "умею замечать рыночные паттерны, перегретые решения и точки для отстройки"
            },
            {
              "score": 4,
              "text": "умею превращать анализ рынка в конкретные рекомендации по стратегии, подаче и визуальному направлению"
            }
          ]
        },
        {
          "id": "1.5",
          "title": "Выделение главного и выбор того, на чем строится сайт",
          "options": [
            {
              "score": 0,
              "text": "пытаюсь уместить всю информацию сразу, не выделяю главное"
            },
            {
              "score": 1,
              "text": "чувствую, что часть информации второстепенна, но не умею уверенно выбирать, на чем строить подачу"
            },
            {
              "score": 2,
              "text": "умею выделять главное и понимать, что должно быть в центре сайта: продукт, выгода, доверие, экспертность, эмоция или образ"
            },
            {
              "score": 3,
              "text": "умею осознанно выбирать логику подачи: строить сайт через рациональные аргументы, доверие, эмоциональное впечатление, экспертность, образ бренда и т.д."
            },
            {
              "score": 4,
              "text": "умею выбирать наиболее точную логику подачи под задачу, аудиторию и контекст проекта, даже если проект сложный или неоднозначный"
            }
          ]
        }
      ]
    },
    {
      "id": "2",
      "title": "Структура, смыслы и логика сайта",
      "strong_hint": "",
      "weak_hint": "",
      "items": [
        {
          "id": "2.1",
          "title": "Проектирование пользовательского сценария и структуры сайта",
          "options": [
            {
              "score": 0,
              "text": "собираю сайт хаотично или по шаблону без понимания логики"
            },
            {
              "score": 1,
              "text": "могу повторить типовую структуру, но не всегда понимаю, почему она работает"
            },
            {
              "score": 2,
              "text": "умею собрать понятную структуру сайта под простую задачу"
            },
            {
              "score": 3,
              "text": "умею строить сценарий пользователя и структуру сайта под конкретную цель, сомнения и мотивацию аудитории"
            },
            {
              "score": 4,
              "text": "умею проектировать сильную структуру даже для сложных, длинных или нестандартных проектов"
            }
          ]
        },
        {
          "id": "2.2",
          "title": "Работа с логикой подачи, заголовками и аргументацией",
          "options": [
            {
              "score": 0,
              "text": "вставляю тексты клиента почти без переработки"
            },
            {
              "score": 1,
              "text": "могу чуть сократить и оформить текст, но логика и сила подачи слабые"
            },
            {
              "score": 2,
              "text": "умею собирать понятные заголовки и базовую аргументацию"
            },
            {
              "score": 3,
              "text": "умею выстраивать убедительную подачу: от первого экрана до CTA, с ясной логикой и сильными акцентами"
            },
            {
              "score": 4,
              "text": "умею превращать разрозненные смыслы в сильную, зрелую и коммерчески убедительную подачу"
            }
          ]
        },
        {
          "id": "2.3",
          "title": "Управление вниманием и акцентами",
          "options": [
            {
              "score": 0,
              "text": "внимание пользователя в макете не управляется"
            },
            {
              "score": 1,
              "text": "базово расставляю акценты, но не всегда удерживаю иерархию"
            },
            {
              "score": 2,
              "text": "умею выделять главное и вести пользователя по странице"
            },
            {
              "score": 3,
              "text": "умею управлять вниманием через структуру, текст, ритм блоков и визуальные акценты"
            },
            {
              "score": 4,
              "text": "умею удерживать сильную иерархию внимания даже в насыщенных и визуально сложных проектах"
            }
          ]
        },
        {
          "id": "2.4",
          "title": "Умение делать сайт понятным, убедительным и целостным",
          "options": [
            {
              "score": 0,
              "text": "сайт выглядит разрозненно и не складывается в ясное впечатление"
            },
            {
              "score": 1,
              "text": "отдельные части работают, но целостности и убедительности не хватает"
            },
            {
              "score": 2,
              "text": "умею делать понятные и собранные сайты на базовом уровне"
            },
            {
              "score": 3,
              "text": "умею создавать сайт, где структура, смыслы и визуал работают как единое решение"
            },
            {
              "score": 4,
              "text": "умею делать сайты, которые одновременно понятны, убедительны, цельны и производят нужное впечатление"
            }
          ]
        }
      ]
    },
    {
      "id": "3",
      "title": "Визуальный язык",
      "strong_hint": "",
      "weak_hint": "",
      "items": [
        {
          "id": "3.1",
          "title": "Связь визуального направления с задачей, нишей и аудиторией",
          "options": [
            {
              "score": 0,
              "text": "выбираю визуал случайно или по принципу «так красивее»"
            },
            {
              "score": 1,
              "text": "подбираю направление по референсам, но не всегда понимаю его уместность"
            },
            {
              "score": 2,
              "text": "умею подобрать визуальное направление под нишу и базовую задачу проекта"
            },
            {
              "score": 3,
              "text": "умею объяснить, почему именно такой визуальный язык лучше подходит продукту, аудитории и задаче"
            },
            {
              "score": 4,
              "text": "умею находить точное и неочевидное визуальное направление, которое усиливает ценность проекта и выделяет его на фоне рынка"
            }
          ]
        },
        {
          "id": "3.2",
          "title": "Цельность, консистентность и уместность визуальной системы",
          "options": [
            {
              "score": 0,
              "text": "проект выглядит разрозненно, решения спорят друг с другом"
            },
            {
              "score": 1,
              "text": "в проекте есть удачные элементы, но система нестабильная"
            },
            {
              "score": 2,
              "text": "умею собирать достаточно цельную визуальную систему"
            },
            {
              "score": 3,
              "text": "умею держать единый характер проекта: в графике, типографике, композиции, акцентах и деталях"
            },
            {
              "score": 4,
              "text": "умею строить сильную и консистентную визуальную систему, которая сохраняет характер на всем протяжении проекта"
            }
          ]
        },
        {
          "id": "3.3",
          "title": "Композиция, типографика, цвет и акценты",
          "options": [
            {
              "score": 0,
              "text": "визуальная база слабая, акценты случайны, композиция разваливается"
            },
            {
              "score": 1,
              "text": "умею собирать экран по референсу, но решения нестабильны"
            },
            {
              "score": 2,
              "text": "уверенно работаю с базовой композицией, типографикой, цветом и акцентами"
            },
            {
              "score": 3,
              "text": "умею осознанно использовать визуальные средства для усиления структуры, атмосферы и впечатления"
            },
            {
              "score": 4,
              "text": "умею управлять ритмом, плотностью, контрастом и характером проекта на сильном визуальном уровне"
            }
          ]
        },
        {
          "id": "3.4",
          "title": "Визуальная аккуратность и качество исполнения",
          "options": [
            {
              "score": 0,
              "text": "в макетах много технической и визуальной неряшливости"
            },
            {
              "score": 1,
              "text": "замечаю часть ошибок, но часто пропускаю неточности"
            },
            {
              "score": 2,
              "text": "делаю аккуратные рабочие макеты с приемлемым качеством исполнения"
            },
            {
              "score": 3,
              "text": "умею доводить макеты до чистого и профессионального уровня в стандартных задачах"
            },
            {
              "score": 4,
              "text": "умею стабильно держать высокий уровень чистоты и точности даже в сложных, объемных или нестандартных проектах"
            }
          ]
        }
      ]
    },
    {
      "id": "4",
      "title": "Работа с графикой и визуальными материалами",
      "strong_hint": "",
      "weak_hint": "",
      "items": [
        {
          "id": "4.1",
          "title": "Подбор и организация визуальных материалов",
          "options": [
            {
              "score": 0,
              "text": "визуальные материалы случайны или слабо подходят проекту"
            },
            {
              "score": 1,
              "text": "могу собрать подборку картинок, но без точного отбора"
            },
            {
              "score": 2,
              "text": "умею подбирать изображения и графику под задачу и общий характер проекта"
            },
            {
              "score": 3,
              "text": "умею формировать продуманную подборку материалов, где все элементы работают на единый образ"
            },
            {
              "score": 4,
              "text": "умею собирать и организовывать визуальные материалы так, чтобы они усиливали подачу и отличали проект от шаблонных решений"
            }
          ]
        },
        {
          "id": "4.2",
          "title": "Работа с фото, иллюстрациями и AI-визуалами",
          "options": [
            {
              "score": 0,
              "text": "почти не умею работать с визуальными материалами как с инструментом"
            },
            {
              "score": 1,
              "text": "могу использовать готовые материалы, но чаще выбираю их поверхностно или по принципу «подходит по настроению»"
            },
            {
              "score": 2,
              "text": "умею подбирать и использовать фото, иллюстрации и AI-визуалы так, чтобы они в целом подходили проекту"
            },
            {
              "score": 3,
              "text": "умею осознанно выбирать тип визуала под задачу, нишу и характер проекта и встраивать его в систему сайта"
            },
            {
              "score": 4,
              "text": "умею с помощью фото, иллюстраций и AI-визуалов формировать сильную подачу, атмосферу и идею проекта"
            }
          ]
        },
        {
          "id": "4.3",
          "title": "Создание атмосферы, образа и характера проекта",
          "options": [
            {
              "score": 0,
              "text": "проект не производит цельного впечатления"
            },
            {
              "score": 1,
              "text": "есть отдельные атмосферные решения, но образ считывается слабо"
            },
            {
              "score": 2,
              "text": "умею создавать базовое нужное настроение и характер проекта"
            },
            {
              "score": 3,
              "text": "умею через визуальные материалы формировать выразительный и уместный образ проекта"
            },
            {
              "score": 4,
              "text": "умею создавать запоминающийся характер проекта, который усиливает бренд, подачу и ценность дизайна"
            }
          ]
        }
      ]
    },
    {
      "id": "5",
      "title": "Инструменты и производственная эффективность",
      "strong_hint": "",
      "weak_hint": "",
      "items": [
        {
          "id": "5.1",
          "title": "Владение Figma",
          "options": [
            {
              "score": 0,
              "text": "владею инструментом слабо"
            },
            {
              "score": 1,
              "text": "умею собирать макеты, но работаю медленно и несистемно"
            },
            {
              "score": 2,
              "text": "уверенно использую Figma для основных рабочих задач"
            },
            {
              "score": 3,
              "text": "умею строить чистые и системные файлы: компоненты, стили, автолейаут, понятная структура, удобство передачи"
            },
            {
              "score": 4,
              "text": "умею выстраивать масштабируемую систему работы в Figma, которая ускоряет проект, упрощает правки и удобна для совместной работы"
            }
          ]
        },
        {
          "id": "5.2",
          "title": "Использование нейросетей в работе",
          "options": [
            {
              "score": 0,
              "text": "не использую ИИ или почти не использую"
            },
            {
              "score": 1,
              "text": "использую хаотично, скорее как эксперимент"
            },
            {
              "score": 2,
              "text": "умею применять ИИ для ускорения части задач: тексты, идеи, визуалы, поиск направлений"
            },
            {
              "score": 3,
              "text": "умею встроить нейросети в рабочий процесс осознанно и без потери качества"
            },
            {
              "score": 4,
              "text": "умею использовать ИИ как усилитель мышления и производства, а не замену собственным решениям"
            }
          ]
        },
        {
          "id": "5.3",
          "title": "Реализация дизайна: от макета до готового сайта",
          "options": [
            {
              "score": 0,
              "text": "не понимаю, как макет превращается в готовый сайт, и не учитываю это в работе"
            },
            {
              "score": 1,
              "text": "знаю базовые технические ограничения, но не всегда учитываю их в дизайне и не могу самостоятельно собрать проект"
            },
            {
              "score": 2,
              "text": "умею делать дизайн с учетом реализации: понимаю ограничения верстки/конструкторов и могу собрать простой сайт самостоятельно"
            },
            {
              "score": 3,
              "text": "умею проектировать дизайн так, чтобы его было удобно собирать, могу общаться с разработчиками на одном языке или самостоятельно реализовать проект средней сложности"
            },
            {
              "score": 4,
              "text": "умею мыслить полным циклом: от идеи и макета до реализации, принимать решения с учетом дизайна, сборки, сроков и ресурсов и самостоятельно доводить проект до запуска"
            }
          ]
        },
        {
          "id": "5.4",
          "title": "Организованность и скорость в производстве",
          "options": [
            {
              "score": 0,
              "text": "работаю хаотично, сроки срываются, процесс нестабилен"
            },
            {
              "score": 1,
              "text": "могу доводить проект до конца, но с потерями по времени и качеству"
            },
            {
              "score": 2,
              "text": "умею организовать свою работу и держать адекватный темп"
            },
            {
              "score": 3,
              "text": "умею работать быстро, системно и без заметной потери качества"
            },
            {
              "score": 4,
              "text": "умею выстраивать устойчивый производственный процесс и эффективно работать даже в плотных сроках"
            }
          ]
        }
      ]
    },
    {
      "id": "6",
      "title": "Софт-скиллы и профессиональная устойчивость",
      "strong_hint": "",
      "weak_hint": "",
      "items": [
        {
          "id": "6.1",
          "title": "Умение доносить ценность, аргументировать и презентовать решения",
          "options": [
            {
              "score": 0,
              "text": "не умею объяснить, за что клиент платит и почему решения такие"
            },
            {
              "score": 1,
              "text": "объясняю через вкус или общие слова"
            },
            {
              "score": 2,
              "text": "умею базово презентовать работу и обосновывать решения"
            },
            {
              "score": 3,
              "text": "умею показывать клиенту ценность этапов, решений и выбранного подхода"
            },
            {
              "score": 4,
              "text": "умею презентовать работу так, что клиент видит в дизайне не набор экранов, а полезное и осмысленное решение"
            }
          ]
        },
        {
          "id": "6.2",
          "title": "Коммуникация с клиентом и командой",
          "options": [
            {
              "score": 0,
              "text": "общение хаотичное, часто возникают недопонимания"
            },
            {
              "score": 1,
              "text": "поддерживаю коммуникацию, но не всегда держу рамку процесса"
            },
            {
              "score": 2,
              "text": "умею ясно общаться с клиентом и базово взаимодействовать с другими специалистами"
            },
            {
              "score": 3,
              "text": "умею задавать правильные вопросы, договариваться, уточнять и удерживать рабочий процесс"
            },
            {
              "score": 4,
              "text": "умею выстраивать зрелую профессиональную коммуникацию, в которой проект движется спокойно и понятно для всех"
            }
          ]
        },
        {
          "id": "6.3",
          "title": "Работа с критикой и обратной связью",
          "options": [
            {
              "score": 0,
              "text": "болезненно реагирую на правки или теряюсь в них"
            },
            {
              "score": 1,
              "text": "принимаю обратную связь, но мне сложно ее фильтровать и использовать"
            },
            {
              "score": 2,
              "text": "умею спокойно принимать правки и дорабатывать проект"
            },
            {
              "score": 3,
              "text": "умею разбирать обратную связь, отделять важное от лишнего и усиливать проект"
            },
            {
              "score": 4,
              "text": "умею превращать даже сложную критику в инструмент улучшения результата и коммуникации"
            }
          ]
        },
        {
          "id": "6.4",
          "title": "Самостоятельность, гибкость и адаптивность",
          "options": [
            {
              "score": 0,
              "text": "мне сложно самостоятельно вести проект: без четких указаний я часто теряюсь и не понимаю, как двигаться дальше"
            },
            {
              "score": 1,
              "text": "могу работать самостоятельно только в очень понятных и предсказуемых задачах"
            },
            {
              "score": 2,
              "text": "умею двигать проект вперед без постоянного контроля"
            },
            {
              "score": 3,
              "text": "умею адаптироваться к изменениям, новым вводным и неопределенности без потери устойчивости"
            },
            {
              "score": 4,
              "text": "умею самостоятельно и уверенно вести работу даже в сложных, неоднозначных и быстро меняющихся проектах"
            }
          ]
        },
        {
          "id": "6.5",
          "title": "Организованность, дедлайны и внимание к деталям",
          "options": [
            {
              "score": 0,
              "text": "часто опаздываю, забываю детали, допускаю много мелких ошибок"
            },
            {
              "score": 1,
              "text": "стараюсь держать сроки и детали под контролем, но нестабильно"
            },
            {
              "score": 2,
              "text": "обычно соблюдаю сроки и удерживаю нормальный уровень внимательности"
            },
            {
              "score": 3,
              "text": "умею надежно вести проект, держать дедлайны и замечать важные нюансы"
            },
            {
              "score": 4,
              "text": "умею быть очень надежным специалистом: точным, внимательным и предсказуемым в работе"
            }
          ]
        }
      ]
    }
  ]
}