physical.html - master - potogon/statbit

physical.html
634 строки25 KB
Alex
fix 0
29 июл 2026, 17:01
29 июл 2026, 17:013d85560
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тест физической активности</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f4f6f9;
    color: #222;
    line-height: 1.5;
  }
  .container { max-width: 800px; margin: 0 auto; padding: 20px; }
  header {
    background: #4a6fa5;
    color: #fff;
    padding: 20px;
    text-align: center;
  }
  header h1 { font-size: 1.4rem; }
  .back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: #4a6fa5;
    text-decoration: none;
    font-size: 0.9rem;
  }
  .card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .intro-text {
    background: #eaf2fb;
    border-left: 4px solid #4a6fa5;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #2c3e50;
  }
  .form-group { margin-bottom: 14px; }
  .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
  }
  .form-group input, .form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
  }
  .form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: #4a6fa5;
    box-shadow: 0 0 0 3px rgba(74,111,165,0.15);
  }
  .question {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .question-number {
    display: inline-block;
    background: #4a6fa5;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 8px;
  }
  .question-text {
    font-size: 0.95rem;
    color: #2c3e50;
    margin-bottom: 14px;
    line-height: 1.5;
  }
  .input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
  .checkbox-group label {
    cursor: pointer;
    font-size: 0.9rem;
    color: #555;
  }
  .number-input {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .number-input input {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 0.95rem;
    text-align: center;
  }
  .number-input input:focus {
    outline: none;
    border-color: #4a6fa5;
    box-shadow: 0 0 0 2px rgba(74,111,165,0.15);
  }
  .number-input label {
    font-size: 0.9rem;
    color: #555;
  }
  .disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .progress-bar {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .progress-track {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
  }
  .progress-fill {
    height: 100%;
    background: #4a6fa5;
    width: 0%;
    transition: width 0.3s;
  }
  .progress-text {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
  }
  .btn {
    display: block;
    width: 100%;
    background: #4a6fa5;
    color: #fff;
    padding: 14px;
    border-radius: 10px;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.15s;
  }
  .btn:hover:not(:disabled) { background: #3a5a8c; }
  .btn:disabled { background: #a0aec0; cursor: not-allowed; }
  .result-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .result-card h2 { margin-bottom: 20px; color: #2c3e50; }
  .hidden { display: none; }
  .error-msg {
    color: #c0392b;
    background: #fdecea;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.9rem;
  }
  @media (max-width: 600px) {
    .container { padding: 12px; }
    header h1 { font-size: 1.2rem; }
    .question, .card { padding: 14px; }
    .input-row { flex-direction: column; align-items: flex-start; }
    .number-input input { width: 100%; }
  }
</style>
</head>
<body>
<header>
  <h1>Тест физической активности</h1>
</header>

<div class="container">
  <a href="index.html" class="back-link">← Назад к списку тестов</a>

  <div id="step-intro">
    <div class="card">
      <h2 style="margin-bottom:16px;color:#2c3e50;">Данные участника</h2>
      <div class="form-group">
        <label for="fio">ФИО *</label>
        <input type="text" id="fio" required placeholder="Иванов Иван Иванович">
      </div>
      <div class="form-group">
        <label for="age">Возраст *</label>
        <input type="number" id="age" min="1" max="120" required placeholder="25">
      </div>
      <div class="form-group">
        <label for="gender">Пол *</label>
        <select id="gender" required>
          <option value="">— Выберите —</option>
          <option value="Мужской">Мужской</option>
          <option value="Женский">Женский</option>
        </select>
      </div>
      <button class="btn" id="startBtn">Начать тест</button>
    </div>
  </div>

  <div id="step-questions" class="hidden"></div>

  <div id="step-result" class="hidden"></div>
</div>

<script src="config.js"></script>
<script>
const state = {
  fio: '', age: '', gender: '',
  answers: {
    q1: { dontKnow: false, days: null },
    q2: { dontKnow: false, hours: null, minutes: null },
    q3: { dontKnow: false, hours: null, minutes: null },
    q4: { dontKnow: false, days: null },
    q5: { dontKnow: false, hours: null, minutes: null },
    q6: { dontKnow: false, hours: null, minutes: null },
    q7: { dontKnow: false, days: null },
    q8: { dontKnow: false, hours: null, minutes: null },
    q9: { dontKnow: false, hours: null, minutes: null },
    q10: { dontKnow: false, hours: null, minutes: null },
    q11: { dontKnow: false, hours: null, minutes: null }
  }
};

const stepIntro = document.getElementById('step-intro');
const stepQuestions = document.getElementById('step-questions');
const stepResult = document.getElementById('step-result');

document.getElementById('startBtn').addEventListener('click', () => {
  const fio = document.getElementById('fio').value.trim();
  const age = document.getElementById('age').value.trim();
  const gender = document.getElementById('gender').value;

  if (!fio || !age || !gender) {
    alert('Пожалуйста, заполните все поля.');
    return;
  }
  if (isNaN(age) || age < 1 || age > 120) {
    alert('Введите корректный возраст.');
    return;
  }

  state.fio = fio;
  state.age = age;
  state.gender = gender;

  renderQuestions();
  stepIntro.classList.add('hidden');
  stepQuestions.classList.remove('hidden');
  window.scrollTo(0, 0);
});

function renderQuestions() {
  let html = `
    <div class="intro-text">
      Я хочу спросить Вас о времени, которое Вы потратили на занятия физической активностью за последние 7 дней. Пожалуйста, отвечайте на каждый вопрос, даже если Вы не считаете себя физически активным человеком. Вспомните обо всех видах деятельности, которыми вы занимаетесь на работе, дома, В Вашем саду или огороде, чтобы добраться от одного места до другого, во время отдыха, а также что Вы делали, занимаясь физкультурой или спортом.Интенсивная физическая активность вызывает сильное учащение дыхания, к ней относится, например, поднятие тяжестей, копание земли, занятия аэробикой или быстрая езда на велосипеде. Вспомните все виды интенсивной физической активности, которыми Вы занимались за последние 7 дней не менее 10 минут за один раз.
    </div>
    <div class="progress-bar">
      <div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
      <div class="progress-text" id="progressText">0 / 11</div>
    </div>
  `;

  // Q1
  html += `<div class="question" data-q="1">
    <div style="margin-bottom:10px;"><span class="question-number">1</span><span class="question-text">За последнюю неделю, сколько дней Вам приходилось заниматься интенсивной физической активностью не менее 10 минут за один раз? (Если не занимался(ась), отметьте "0" и переходите к вопросу 4).</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q1_dk" data-q="1" data-field="dontKnow">
      <label for="q1_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q1_inputs">
      <input type="number" id="q1_days" min="0" max="7" data-q="1" data-field="days" placeholder="">
      <label>дней в неделю</label>
    </div>
  </div>`;

  // Q2
  html += `<div class="question" data-q="2">
    <div style="margin-bottom:10px;"><span class="question-number">2</span><span class="question-text">Сколько времени, в среднем, в день Вы занимались такой интенсивной физической активностью в один из этих дней?</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q2_dk" data-q="2" data-field="dontKnow">
      <label for="q2_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q2_inputs">
      <input type="number" id="q2_hours" min="0" max="23" data-q="2" data-field="hours" placeholder="">
      <label>часов</label>
      <input type="number" id="q2_minutes" min="0" max="59" data-q="2" data-field="minutes" placeholder="">
      <label>минут в день</label>
    </div>
  </div>`;

  // Q3
  html += `<div class="question" data-q="3">
    <div style="margin-bottom:10px;"><span class="question-number">3</span><span class="question-text">Сколько времени в целом за последние 7 дней Вы затратили на занятия интенсивной физической активностью?</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q3_dk" data-q="3" data-field="dontKnow">
      <label for="q3_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q3_inputs">
      <input type="number" id="q3_hours" min="0" data-q="3" data-field="hours" placeholder="">
      <label>часов</label>
      <input type="number" id="q3_minutes" min="0" data-q="3" data-field="minutes" placeholder="">
      <label>минут</label>
    </div>
  </div>`;

  // Q4
  html += `<div class="question" data-q="4">
    <div style="margin-bottom:10px;"><span class="question-number">4</span><span class="question-text">Теперь подумайте о всех видах деятельности, связанных с умеренной физической активностью. Умеренная физическая активность несколько учащает дыхание по сравнению с обычным состоянием. К ней относится, например, перенос нетяжелых предметов, не быстрая езда на велосипеде, игра в парный теннис, мытье полов вручную. Сколько дней Вам приходилось заниматься умеренной физической активностью за последние 7 дней не менее 10 минут за один раз. Не включайте ходьбу. (Если не занимались, отметьте "0" и переходите к вопросу 7)</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q4_dk" data-q="4" data-field="dontKnow">
      <label for="q4_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q4_inputs">
      <input type="number" id="q4_days" min="0" max="7" data-q="4" data-field="days" placeholder="">
      <label>дней в неделю</label>
    </div>
  </div>`;

  // Q5
  html += `<div class="question" data-q="5">
    <div style="margin-bottom:10px;"><span class="question-number">5</span><span class="question-text">Сколько времени, в среднем, в день Вы занимались такой умеренной физической активностью в эти дни?</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q5_dk" data-q="5" data-field="dontKnow">
      <label for="q5_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q5_inputs">
      <input type="number" id="q5_hours" min="0" max="23" data-q="5" data-field="hours" placeholder="">
      <label>часов</label>
      <input type="number" id="q5_minutes" min="0" max="59" data-q="5" data-field="minutes" placeholder="">
      <label>минут в день</label>
    </div>
  </div>`;

  // Q6
  html += `<div class="question" data-q="6">
    <div style="margin-bottom:10px;"><span class="question-number">6</span><span class="question-text">Сколько времени в целом за последние 7 дней Вы затратили на занятия умеренной физической активностью?</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q6_dk" data-q="6" data-field="dontKnow">
      <label for="q6_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q6_inputs">
      <input type="number" id="q6_hours" min="0" data-q="6" data-field="hours" placeholder="">
      <label>часов</label>
      <input type="number" id="q6_minutes" min="0" data-q="6" data-field="minutes" placeholder="">
      <label>минут</label>
    </div>
  </div>`;

  // Q7
  html += `<div class="question" data-q="7">
    <div style="margin-bottom:10px;"><span class="question-number">7</span><span class="question-text">Теперь вспомните, сколько времени за последние 7 дней Вы потратили на ходьбу, включая ходьбу из дома на работу и обратно, чтобы дойти куда-то, а также любые другие прогулки во время отдыха, занятий физкультурой и спортом. В течение последних 7 дней сколько дней Вы ходили, по крайней мере, 10 минут подряд? (Если ходил менее 10 минут за один раз, отметьте "0", и переходите к вопросу 10)</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q7_dk" data-q="7" data-field="dontKnow">
      <label for="q7_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q7_inputs">
      <input type="number" id="q7_days" min="0" max="7" data-q="7" data-field="days" placeholder="">
      <label>дней в неделю</label>
    </div>
  </div>`;

  // Q8
  html += `<div class="question" data-q="8">
    <div style="margin-bottom:10px;"><span class="question-number">8</span><span class="question-text">Сколько всего времени в среднем Вы ходили в течение одного такого дня?</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q8_dk" data-q="8" data-field="dontKnow">
      <label for="q8_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q8_inputs">
      <input type="number" id="q8_hours" min="0" max="23" data-q="8" data-field="hours" placeholder="">
      <label>часов</label>
      <input type="number" id="q8_minutes" min="0" max="59" data-q="8" data-field="minutes" placeholder="">
      <label>минут в день</label>
    </div>
  </div>`;

  // Q9
  html += `<div class="question" data-q="9">
    <div style="margin-bottom:10px;"><span class="question-number">9</span><span class="question-text">Сколько времени в целом Вы потратили на ходьбу за последние 7 дней?</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q9_dk" data-q="9" data-field="dontKnow">
      <label for="q9_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q9_inputs">
      <input type="number" id="q9_hours" min="0" data-q="9" data-field="hours" placeholder="">
      <label>часов</label>
      <input type="number" id="q9_minutes" min="0" data-q="9" data-field="minutes" placeholder="">
      <label>минут</label>
    </div>
  </div>`;

  // Q10
  html += `<div class="question" data-q="10">
    <div style="margin-bottom:10px;"><span class="question-number">10</span><span class="question-text">Теперь вспомните, сколько времени за последние 7 дней Вы провели сидя в один из будних дней (бодрствуя). Включите время, проведенное за рабочим столом, сидя в гостях или транспорте, сидя или лежа за чтением или просмотром телепередач. За последнюю неделю в один из будних дней, сколько времени, в среднем, Вы провели сидя?</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q10_dk" data-q="10" data-field="dontKnow">
      <label for="q10_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q10_inputs">
      <input type="number" id="q10_hours" min="0" max="23" data-q="10" data-field="hours" placeholder="">
      <label>часов</label>
      <input type="number" id="q10_minutes" min="0" max="59" data-q="10" data-field="minutes" placeholder="">
      <label>минут в день</label>
    </div>
  </div>`;

  // Q11
  html += `<div class="question" data-q="11">
    <div style="margin-bottom:10px;"><span class="question-number">11</span><span class="question-text">Сколько всего времени Вы провели сидя в последнюю среду?</span></div>
    <div class="checkbox-group">
      <input type="checkbox" id="q11_dk" data-q="11" data-field="dontKnow">
      <label for="q11_dk">Не знаю</label>
    </div>
    <div class="number-input" id="q11_inputs">
      <input type="number" id="q11_hours" min="0" max="23" data-q="11" data-field="hours" placeholder="">
      <label>часов</label>
      <input type="number" id="q11_minutes" min="0" max="59" data-q="11" data-field="minutes" placeholder="">
      <label>минут в среду</label>
    </div>
  </div>`;

  html += `<button class="btn" id="submitBtn">Завершить тест</button>`;
  stepQuestions.innerHTML = html;

  // Обработчики чекбоксов "Не знаю"
  document.querySelectorAll('.checkbox-group input[type="checkbox"]').forEach(cb => {
    cb.addEventListener('change', handleDontKnow);
  });

  // Обработчики числовых полей
  document.querySelectorAll('.number-input input[type="number"]').forEach(input => {
    input.addEventListener('input', handleNumberInput);
  });

  // Обработчик для Q1, Q4, Q7 — логика перехода
  ['q1', 'q4', 'q7'].forEach(q => {
    const daysInput = document.getElementById(`${q}_days`);
    if (daysInput) {
      daysInput.addEventListener('input', handleSkipLogic);
    }
  });

  updateProgress();
  document.getElementById('submitBtn').addEventListener('click', submitTest);
}

function handleDontKnow(e) {
  const q = e.target.dataset.q;
  const isChecked = e.target.checked;
  state.answers[`q${q}`].dontKnow = isChecked;

  const inputsDiv = document.getElementById(`q${q}_inputs`);
  if (isChecked) {
    inputsDiv.classList.add('disabled');
    inputsDiv.querySelectorAll('input').forEach(inp => {
      inp.value = '';
      inp.disabled = true;
    });
    // Очищаем значения в state
    const answer = state.answers[`q${q}`];
    if (answer.days !== undefined) answer.days = null;
    if (answer.hours !== undefined) answer.hours = null;
    if (answer.minutes !== undefined) answer.minutes = null;
  } else {
    inputsDiv.classList.remove('disabled');
    inputsDiv.querySelectorAll('input').forEach(inp => {
      inp.disabled = false;
    });
  }
  updateProgress();
}

function handleNumberInput(e) {
  const q = e.target.dataset.q;
  const field = e.target.dataset.field;
  const value = e.target.value === '' ? null : parseInt(e.target.value);
  state.answers[`q${q}`][field] = value;
  updateProgress();
}

function handleSkipLogic(e) {
  const q = e.target.dataset.q;
  const days = parseInt(e.target.value);

  // Если 0 дней — скрываем следующие вопросы
  if (q === 'q1' && days === 0) {
    hideQuestions([2, 3]);
  } else if (q === 'q4' && days === 0) {
    hideQuestions([5, 6]);
  } else if (q === 'q7' && days === 0) {
    hideQuestions([8, 9]);
  } else {
    // Показываем скрытые вопросы
    if (q === 'q1') showQuestions([2, 3]);
    if (q === 'q4') showQuestions([5, 6]);
    if (q === 'q7') showQuestions([8, 9]);
  }
}

function hideQuestions(qNums) {
  qNums.forEach(num => {
    const el = document.querySelector(`[data-q="${num}"]`);
    if (el) el.classList.add('hidden');
  });
}

function showQuestions(qNums) {
  qNums.forEach(num => {
    const el = document.querySelector(`[data-q="${num}"]`);
    if (el) el.classList.remove('hidden');
  });
}

function updateProgress() {
  let answered = 0;
  for (let i = 1; i <= 11; i++) {
    const a = state.answers[`q${i}`];
    if (a.dontKnow) {
      answered++;
    } else {
      const hasValue = (a.days !== null && a.days !== undefined) ||
                       (a.hours !== null && a.hours !== undefined) ||
                       (a.minutes !== null && a.minutes !== undefined);
      if (hasValue) answered++;
    }
  }
  const pct = (answered / 11) * 100;
  document.getElementById('progressFill').style.width = pct + '%';
  document.getElementById('progressText').textContent = `${answered} / 11`;
}

async function submitTest() {
  // Проверка полноты
  for (let i = 1; i <= 11; i++) {
    const a = state.answers[`q${i}`];
    if (!a.dontKnow) {
      const hasValue = (a.days !== null && a.days !== undefined) ||
                       (a.hours !== null && a.hours !== undefined) ||
                       (a.minutes !== null && a.minutes !== undefined);
      if (!hasValue) {
        alert(`Пожалуйста, ответьте на вопрос ${i} или отметьте "Не знаю".`);
        const el = document.querySelector(`[data-q="${i}"]`);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
        return;
      }
    }
  }

  const payload = {
    fio: state.fio,
    age: state.age,
    gender: state.gender,
    answers: state.answers,
    testName: 'Тест физической активности'
  };

  const btn = document.getElementById('submitBtn');
  btn.disabled = true;
  btn.textContent = 'Отправка результатов…';

  try {
    const res = await fetch(CONFIG.apiUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'text/plain;charset=utf-8' },
      body: JSON.stringify({ action: 'saveResult', payload })
    });
    const json = await res.json();
    if (!json.ok) throw new Error(json.error || 'Ошибка сохранения');
  } catch (err) {
    alert('Ошибка при сохранении: ' + err.message + '\nРезультаты не были отправлены.');
    btn.disabled = false;
    btn.textContent = 'Завершить тест';
    return;
  }

  stepQuestions.classList.add('hidden');
  stepResult.classList.remove('hidden');
  stepResult.innerHTML = `<div class="result-card">
    <h2>Спасибо за участие!</h2>
    <a href="index.html" class="btn">Вернуться на главную</a>
  </div>`;
  window.scrollTo(0, 0);
}
</script>
</body>
</html>