# Промпт: квиз для GetCourse с сохранением ответов в карточку ученика

Скопируйте всё, что ниже линии, в нейросеть (ChatGPT, Claude, Gemini, DeepSeek — любую сильную модель). Заполните раздел «1. Мой квиз»: всё, что в [квадратных скобках]. Остальное не меняйте — это технические правила, без которых на GetCourse квиз не сохранит данные.

Если ссылки события из модуля воронок у вас ещё нет, оставьте `ВСТАВЬТЕ_ССЫЛКУ_СОБЫТИЯ`. Вставите её потом в одну строку кода (шаг 6 инструкции).

---

Ты — опытный фронтенд-разработчик и UX-дизайнер. Сделай квиз, который будет работать внутри урока или страницы GetCourse и сохранять ответы ученика в его карточку через модуль воронок GetCourse. Сначала прочитай всё задание целиком, потом выполняй.

## 1. Мой квиз

- **Тема и цель:** [например: «Какой формат обучения вам подходит» — помочь ученику выбрать тариф]
- **Для кого:** [например: женщины 35–55, предприниматели, впервые в онлайн-обучении]
- **Вопросы:** [впишите свои вопросы с вариантами ответов — или напишите «предложи 8–10 вопросов сам» и опишите, что нужно выяснить]
- **Типы вопросов:** [один вариант / несколько вариантов / шкала 1–5 / короткий текст — что нужно]
- **Результат для ученика:** [как считать итог: баллы, преобладающий вариант, правила вида «если … то …»; какие бывают результаты и что про каждый сказать]
- **Что после результата:** [кнопка «Записаться» / ссылка на продукт / «вам напишет куратор» / ничего]
- **Тон:** [дружелюбный, на «вы», без канцелярита]
- **Оформление:** [фирменные цвета HEX, скругления, общее настроение; если нет — «спокойный современный стиль»]
- **Префикс полей:** [латиницей, коротко, например `quiz` — из него получатся имена полей `quiz_answers`, `quiz_result` …]
- **Ссылка события из модуля воронок:** [вставьте ссылку из кнопки «Скопировать ссылку» или оставьте ВСТАВЬТЕ_ССЫЛКУ_СОБЫТИЯ]

## 2. Как это устроено на GetCourse (обязательно учти)

1. Квиз — это **один HTML-блок** GetCourse. Внутри одна строка-контейнер `<div id="quiz-root"></div>` и один `<script>`, который рисует весь квиз.
2. Данные пользователя GetCourse подставляет только в **текстовый блок** с включённой галочкой «Заменять переменные пользователя». Поэтому второй блок — скрытый текстовый, со span-ами вида `<span id="quiz-email">{email}</span>`. Скрипт читает из них текст. Если переменная не подставилась (человек не вошёл или поле пустое), в span остаётся буквальный текст вида `{email}`.
3. **Самое важное правило.** В коде HTML-блока **нигде** не должно быть фигурной скобки, сразу за которой идёт слово, а за словом — закрывающая скобка: `{слово}`, `{user.name}`, `{x}`. GetCourse принимает это за переменную, подменяет — и скрипт ломается.
   - После каждой `{` в JS и CSS ставь пробел или перевод строки, перед `}` — тоже. Пример: `function f() { return 1; }`.
   - Никаких шаблонных строк с подстановкой (обратные кавычки с `${…}`). Строки собирай через `+`.
   - Никаких сокращённых объектов `{ a }` без пробелов и регулярных выражений с `{2}` вида `\d{2}`: пиши `\d\d`.
4. **Ответы отправляются POST-запросом** прямо из браузера на ссылку события модуля воронок (`https://…/chtm/app/builder/event/~reg/…?hash=…`). Тело — `application/x-www-form-urlencoded`. Обязательный параметр — `email` (адрес ученика из span), остальные параметры — данные квиза. Ответ платформы — JSON `{"success":true,…}`. Успехом считай только `success === true`.
5. **Не отправляй ничего, пока не найден настоящий e-mail.** В адресе должен быть `@` и не должно быть `{`. Блоки на GetCourse подгружаются не сразу, поэтому ищи e-mail повторно: каждые 500 мс, до 20 раз. Не нашёлся — вместо квиза покажи экран «Войдите в аккаунт, чтобы пройти квиз» со ссылкой `/cms/system/login?required=true&returnUrl=` + `encodeURIComponent(location.href)`.
6. **Никаких внешних скриптов и библиотек** (CDN, jQuery, React, шрифты через JS): GetCourse может их не пустить. Только чистый JS и CSS внутри блока. Шрифт — системный стек или шрифт страницы. Картинки — по https-ссылкам, без base64 крупнее 20 КБ.
7. **Изоляция от стилей GetCourse.** На странице работает Bootstrap 3: `.fade`, `.btn`, `.row`, `.hidden` и другие его классы ломают вёрстку. Поэтому рисуй квиз внутри Shadow DOM: `document.getElementById('quiz-root').attachShadow({ mode: 'open' })`. Все стили клади в `<style>` внутри тени.
8. **Размер.** Весь HTML-блок — не больше 55 000 знаков. Длинные тексты результатов пиши сжато.
9. **Мобильные.** Сначала телефон (ширина от 360 px): одна колонка, кнопки на всю ширину, высота кнопки не меньше 48 px, текст не меньше 16 px, без горизонтальной прокрутки. На компьютере — колонка не шире 720 px по центру.

## 3. Какие данные отправлять (имена полей)

Все имена — латиницей, строчными, через подчёркивание, с моим префиксом. Минимальный набор:

| Параметр | Что внутри | Тип поля в GetCourse |
|---|---|---|
| `<префикс>_answers` | все ответы в машинном виде: `encodeURIComponent(JSON.stringify(объект ответов))`. Кодирование обязательно: в поле не должно быть фигурных скобок, кавычек и `<` | Текст |
| `<префикс>_text` | ответы для менеджера, по строке «Вопрос — ответ» | Текст |
| `<префикс>_result` | название итогового результата | Строка |
| `<префикс>_score` | баллы, если считаются, строкой | Строка |
| `<префикс>_at` | дата и время прохождения «ДД.ММ.ГГГГ ЧЧ:ММ» | Строка |

Если отдельные ответы нужны для сегментации (например, «бюджет», «цель»), добавь параметры `<префикс>_q_<код вопроса>` — по одному на такой вопрос, значение словами.

## 4. Готовый слой отправки — используй как есть

Вставь этот код в свой скрипт без изменений логики. Оформление и экраны пиши сам. Обрати внимание: в коде нет ни одного `{слово}` — сохрани это правило во всём, что допишешь.

```js
var QUIZ_CFG = {
  eventUrl: 'ВСТАВЬТЕ_ССЫЛКУ_СОБЫТИЯ',
  prefix: 'quiz',
  loginUrl: '/cms/system/login?required=true&returnUrl=' + encodeURIComponent(location.href)
};

/* Значение из скрытого текстового блока. Если GetCourse не подставил
   переменную, там остаётся сам шаблон — считаем пустым. */
function quizRead(id) {
  var vals = [id, id + '-alt'].map(function (x) {
    var el = document.getElementById(x);
    return el ? String(el.textContent || '').trim() : '';
  });
  for (var i = 0; i < vals.length; i++) {
    if (vals[i] && !/^\{[^ ]*\}$/.test(vals[i])) { return vals[i]; }
  }
  return '';
}

/* E-mail появляется не сразу: ищем до 10 секунд */
function quizWaitEmail(cb) {
  var n = 0;
  (function tick() {
    var e = quizRead('quiz-email');
    if (e.indexOf('@') > 0 && e.indexOf('{') === -1) { return cb(e); }
    n++;
    if (n >= 20) { return cb(''); }
    setTimeout(tick, 500);
  })();
}

/* Одиночные половинки эмодзи ломают encodeURIComponent — заменяем */
function quizSafe(v) {
  return String(v == null ? '' : v)
    .replace(/[\uD800-\uDBFF](?![\uDC00-\uDFFF])/g, '�')
    .replace(/(^|[^\uD800-\uDBFF])[\uDC00-\uDFFF]/g, '$1�');
}

/* Отправка в событие модуля воронок. Возвращает Promise<boolean>:
   true — только если GetCourse ответил success. */
function quizSend(email, params) {
  if (!QUIZ_CFG.eventUrl || QUIZ_CFG.eventUrl.indexOf('http') !== 0) { return Promise.resolve(false); }
  var body = 'email=' + encodeURIComponent(email);
  Object.keys(params).forEach(function (k) {
    body += '&' + encodeURIComponent(k) + '=' + encodeURIComponent(quizSafe(params[k]));
  });
  var ctl = new AbortController();
  var timer = setTimeout(function () { ctl.abort(); }, 20000);
  return fetch(QUIZ_CFG.eventUrl, {
    method: 'POST',
    credentials: 'include',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
    body: body,
    signal: ctl.signal
  }).then(function (r) { return r.json(); })
    .then(function (d) { clearTimeout(timer); return !!(d && d.success === true); })
    .catch(function () { clearTimeout(timer); return false; });
}

/* Копия на устройстве: если сеть подвела, досылаем при следующем открытии */
function quizKey(email) { return 'quiz_' + QUIZ_CFG.prefix + '_' + email.toLowerCase(); }
function quizSaveLocal(email, params, sent) {
  try { localStorage.setItem(quizKey(email), JSON.stringify({ params: params, sent: !!sent, at: Date.now() })); } catch (e) { }
}
function quizLoadLocal(email) {
  try { return JSON.parse(localStorage.getItem(quizKey(email)) || 'null'); } catch (e) { return null; }
}
function quizFlush(email) {
  var s = quizLoadLocal(email);
  if (s && !s.sent && s.params) {
    quizSend(email, s.params).then(function (ok) { if (ok) { quizSaveLocal(email, s.params, true); } });
  }
}

/* Прошлые ответы из карточки: поле <префикс>_answers, подставленное в скрытый блок */
function quizSaved() {
  var raw = quizRead('quiz-saved');
  if (!raw) { return null; }
  try { return JSON.parse(decodeURIComponent(raw)); } catch (e) { return null; }
}
```

Как этим пользоваться в квизе:

1. При запуске: `quizWaitEmail(function (email) { … })`. Пустой e-mail — экран «войдите». Иначе `quizFlush(email)`. Если `quizSaved()` вернул ответы, покажи результат прошлого прохождения и кнопку «Пройти заново».
2. На финише собери параметры из раздела 3. Вызови `quizSaveLocal(email, params, false)`, затем `quizSend(email, params)`.
   - `true` → `quizSaveLocal(email, params, true)` и тихая отметка «Ответы сохранены».
   - `false` → понятное сообщение «Не получилось сохранить — проверьте интернет» и кнопка «Отправить ещё раз». Результат ученику показывай в любом случае.
3. Защита от двойного нажатия: на время отправки кнопка неактивна.

## 5. Что сделать в интерфейсе квиза

- Стартовый экран: заголовок, одна фраза зачем, сколько займёт времени, кнопка «Начать».
- По одному вопросу на экран, прогресс «Вопрос 3 из 10» и полоса, кнопка «Назад».
- Выбор ответа крупными карточками. Для «несколько вариантов» — подсказка «можно выбрать несколько», «Дальше» активна только при выбранном ответе.
- Незаконченное прохождение не теряется при перезагрузке: черновик в `localStorage` под ключом `quiz_draft_<префикс>_<email>`.
- Экран результата: название, 2–4 абзаца, призыв к действию из раздела 1, статус сохранения.
- Доступность: контраст текста не ниже 4.5:1, видимый фокус, всё работает с клавиатуры, `prefers-reduced-motion`.

## 6. Что выдать в ответе — строго в этом порядке

1. **Список дополнительных полей** для GetCourse: таблица «название поля — тип — зачем».
2. **Код для скрытого текстового блока.** Скрытый `div` со span-ами. На каждое поле — два span: `{object.<поле>}` и запасной `{<поле>}` с id `…-alt`. Пример для e-mail и сохранённых ответов:
   ```html
   <div style="display:none">
     <span id="quiz-email">{email}</span>
     <span id="quiz-saved">{object.ПРЕФИКС_answers}</span>
     <span id="quiz-saved-alt">{ПРЕФИКС_answers}</span>
   </div>
   ```
   Здесь, в текстовом блоке, переменные в фигурных скобках как раз нужны.
3. **Код преобразования для ноды «Событие»** (вкладка «Внешний вызов»). По строке на каждый параметр:
   ```
   user.ПРЕФИКС_answers = body.ПРЕФИКС_answers
   user.ПРЕФИКС_text = body.ПРЕФИКС_text
   …
   ```
4. **Таблица для ноды «Обновить поля пользователя»:** «дополнительное поле → переменная» (`ПРЕФИКС_answers → user.ПРЕФИКС_answers` и т. д.).
5. **Код HTML-блока целиком:** `<div id="quiz-root"></div>` и один `<script>`, одним куском, готовым к вставке.
6. **Самопроверка:**
   - сколько знаков в HTML-блоке;
   - подтверждение, что регулярное выражение `\{[A-Za-z_][A-Za-z0-9_.]*\}` не находит в нём ни одного совпадения;
   - где в коде стоит `QUIZ_CFG.eventUrl`.

Не сокращай код многоточиями и не пиши «остальное аналогично» — нужен полностью рабочий блок.