Video

Aula 3

Embed

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes, viewport-fit=cover">
  <title>Questionário de Cuidadoras – V2</title>

  
  <style>
    *{-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
    input, textarea, [contenteditable]{-webkit-user-select:text;user-select:text}
  </style>
  <script>
    (function(){
      const block=e=>{e.preventDefault();e.stopPropagation();return false};
      document.addEventListener('contextmenu',block,true);
      document.addEventListener('copy',block,true);
      document.addEventListener('cut',block,true);
      document.addEventListener('selectstart',block,true);
      document.addEventListener('dragstart',block,true);
      document.addEventListener('keydown',function(e){
        const k=e.key.toLowerCase();
        if((e.ctrlKey||e.metaKey)&&['a','c','x','s','p','u'].includes(k)) block(e);
        if(e.key==='PrintScreen') block(e);
        if(e.keyCode===123) block(e);
      },true);
    })();
  </script>

  <style>
    :root{
      --bg:#F1F8F4; --card:#ffffff; --muted:#6b7368; --text:#3F473C;
      --accent:#567861; --accent-2:#619B75; --danger:#c14254; --ok:#2e8053;
      --ink-weak:#3F473C22; --ink-softer:#3F473C12; --ring:#619B7533; --ring-strong:#619B7566;
      --green-soft:#cfe8da; --green-softer:#e7f2ec; --green-selected:#eaf6f0;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
      background:
        radial-gradient(800px 600px at 110% -10%, rgba(97,155,117,.08), transparent 60%),
        radial-gradient(1200px 800px at 10% -10%, rgba(86,120,97,.08), transparent 55%),
        var(--bg);
    }
    header{
      position: static; z-index: 1;
      background: rgba(241,248,244,.9);
      border-bottom:1px solid var(--ink-weak);
    }
    .wrap{max-width:980px; margin:0 auto; padding:16px}
    .grid{display:grid; grid-template-columns:1fr; gap:16px}
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96));
      border:1px solid var(--ink-weak); border-radius:16px; padding:16px;
      box-shadow: 0 6px 22px rgba(63,71,60,.08);
    }
    .card h2{font-size:16px; margin:0 0 12px}
    .row{display:grid; grid-template-columns:1fr; gap:12px}
    .field{display:grid; gap:6px}
    label{font-size:13px; color:var(--muted)}
    input[type="text"], input[type="tel"]{
      width:100%; padding:12px 14px; font-size:14px; border-radius:12px;
      border:1px solid var(--ink-weak); background:#fff; color:var(--text);
      outline:none; transition:border .2s ease, box-shadow .2s ease;
    }
    input[type="text"]:focus, input[type="tel"]:focus{
      border-color:var(--accent-2); box-shadow:0 0 0 3px var(--ring)
    }
    .q{ padding:16px; border-radius:14px; border:1px solid var(--ink-weak); background:var(--green-softer) }
    .q + .q{margin-top:12px}
    .q-title{font-weight:700; margin-bottom:12px}
    .answers{display:grid; gap:8px}
    .answer{
      display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
      border-radius:12px; border:1px solid var(--ink-weak);
      background:#fff; cursor:pointer; transition:transform .06s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
    }
    .answer:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(63,71,60,.08)}
    .answer input{margin-top:2px}
    .answer.selected{ background:var(--green-selected); border-color:var(--accent-2); box-shadow:0 0 0 2px var(--ring) }
    .actions{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:8px; flex-wrap:wrap}
    .btn{
      appearance:none; border:0; padding:12px 16px; border-radius:12px; font-weight:700;
      cursor:pointer; color:#ffffff; background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 10px 24px rgba(97,155,117,.35);
    }
    .btn[disabled]{opacity:.6; cursor:not-allowed}
    .ghost{background:transparent; color:var(--text); border:1px solid var(--ink-weak); box-shadow:none}
    .status{min-height:24px; font-size:14px}
    .status.error{color:var(--danger)}
    .status.ok{color:var(--ok)}
    .q.error{ border-color:var(--accent-2)!important; box-shadow:0 0 0 2px var(--ring-strong); background:var(--green-soft)}
    .q .err{color:var(--accent); font-size:12px; margin-top:6px}
    .progress{display:flex; align-items:center; gap:10px; min-width:220px}
    .bar{flex:1; height:8px; background:#ffffff; border-radius:999px; overflow:hidden; border:1px solid var(--ink-weak)}
    .bar > i{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2))}
    .count{font-weight:700; font-variant-numeric:tabular-nums}
    @media (max-width:720px){ .row{grid-template-columns:1fr} }
    .input-error{border-color:var(--danger)!important; box-shadow:0 0 0 2px rgba(193,66,84,.25)}
    #success-card .success-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding:32px}
    #success-card .check{
      width:68px; height:68px; border-radius:999px; display:grid; place-items:center;
      background:linear-gradient(135deg, var(--accent-2), var(--accent));
      box-shadow:0 10px 24px rgba(97,155,117,.35);
    }
    #success-card .check svg{width:34px; height:34px; color:#fff}
    #success-card .title{font-size:18px; font-weight:800}
    #success-card .msg{font-size:15px; color:var(--muted); max-width:640px}
  </style>
</head>
<body>
  <main class="wrap">
    <div style="color:#cfe8da; padding-bottom: 50px;">
      <h1>Questionário para Cuidadoras</h1>
      <div>Responda todas as perguntas e envie para avaliação</div>
    </div>

    <div class="grid" id="grid">
      <section class="card" id="card-ident">
        <h2>Identificação</h2>
        <div class="row">
          
          <div class="field">
            <label>Telefone</label>
            <input id="phone" type="tel" placeholder="27999998888" autocomplete="tel" />
          </div>
        </div>
      </section>

      <section class="card" id="card-quiz">
        <h2>Questionário</h2>
        <div id="questions"></div>
        <div class="actions" id="actions">
          <div class="progress">
            <div class="bar"><i id="bar"></i></div>
            <div class="count" id="count">0/0</div>
          </div>
          <div class="status" id="status"></div>
          <div style="display:flex; gap:8px; align-items:center; margin-left:auto;">
            <button class="btn ghost" id="reload" type="button">Recarregar</button>
            <button class="btn" id="submit" type="button">Enviar Respostas</button>
          </div>
        </div>
      </section>

      <section class="card" id="success-card" style="display:none;">
        <div class="success-wrap">
          <div class="check">
            <svg viewBox="0 0 24 24" fill="none">
              <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="title">Obrigado por participar do nosso processo!</div>
          <div class="msg">O resultado do seu teste foi enviado para o time da Vital Assist e você agora faz parte do nosso cadastro de cuidadoras. Entraremos em contato assim que houver uma vaga de trabalho para o seu perfil.</div>
        </div>
      </section>
    </div>
  </main>

  <script>
    // ====== CONFIG ======
    const BASE = 'https://api.vitalassisthomecare.com.br/lifeassist/v1';
    const LIST_URL   = BASE + '/caregivers/quiz/steps/3/questions';
    const SUBMIT_URL = BASE + '/caregivers/quiz/steps/3/submit';
    // 👉 Se quiser redirecionar após sucesso, preencha aqui:
    const REDIRECT_URL = 'https://vitalassisthomecare.com.br/caregivers/aula-04'; // ex.: 'https://vitalassisthomecare.com.br'

    // ====== STATE & ELEMENTS ======
    const state = { tests: [], selections: new Map(), busy: false }
    const el = {
      phone:     document.getElementById('phone'),
      questions: document.getElementById('questions'),
      status:    document.getElementById('status'),
      submit:    document.getElementById('submit'),
      reload:    document.getElementById('reload'),
      bar:       document.getElementById('bar'),
      count:     document.getElementById('count'),
      successCard: document.getElementById('success-card'),
    }

    el.phone.addEventListener('input', () => {
      el.phone.value = el.phone.value.replace(/\D/g, '').slice(0, 11);
    });

    const fmt = v => String(v ?? '').trim();
    const setBusy = v => { state.busy = v; el.submit.disabled = v; el.reload.disabled = v }
    const showStatus = (msg, ok=false) => { el.status.className = ok ? 'status ok' : 'status error'; el.status.textContent = msg }

    const updateProgress = () => {
      const answered = state.selections.size;
      const total    = state.tests.length || 0;
      el.count.textContent = answered + '/' + total;
      const pct = total ? Math.round((answered/total)*100) : 0;
      el.bar.style.width = pct + '%';
      if (el.status.classList.contains('error')) return;
      if (answered === total && total > 0) {
        el.status.className = 'status ok';
        el.status.textContent = 'tudo pronto para enviar';
      } else if (total > 0) {
        el.status.className = 'status';
        el.status.textContent = '';
      }
    }

    const renderQuestions = () => {
      el.questions.innerHTML = '';
      state.tests.forEach((q, idx) => {
        const box = document.createElement('div');
        box.className = 'q';
        box.dataset.qid = q.id;

        const title = document.createElement('div');
        title.className = 'q-title';
        title.textContent = String(idx + 1).padStart(2,'0') + '. ' + q.description;
        box.appendChild(title);

        const answers = document.createElement('div');
        answers.className = 'answers';
        const groupName = 'q_' + q.id;

        q.answers.sort((a,b)=>a.letter.localeCompare(b.letter)).forEach(a => {
          const lbl = document.createElement('label');
          lbl.className = 'answer';

          const radio = document.createElement('input');
          radio.type = 'radio';
          radio.name = groupName;
          radio.value = a.letter;

          radio.addEventListener('change', () => {
            state.selections.set(q.id, a.letter);
            box.classList.remove('error');
            const m = box.querySelector('.err'); if (m) m.remove();
            answers.querySelectorAll('.answer').forEach(x => x.classList.remove('selected'));
            lbl.classList.add('selected');
            updateProgress();
          });

          const text = document.createElement('div');
          const strong = document.createElement('div');
          strong.innerHTML = '<strong>' + a.letter + ')</strong> ' + a.description;
          text.appendChild(strong);

          lbl.appendChild(radio);
          lbl.appendChild(text);
          answers.appendChild(lbl);
        });

        box.appendChild(answers);
        el.questions.appendChild(box);
      });
      updateProgress();
    }

    const loadTests = async () => {
      try {
        setBusy(true);
        showStatus('carregando perguntas...');
        const res = await fetch(LIST_URL, { headers: { 'Accept': 'application/json' }});
        if (!res.ok) throw new Error('falha ao carregar (' + res.status + ')');
        const data = await res.json();
        if (!Array.isArray(data) || !data.length) throw new Error('nenhuma pergunta disponível');
        state.tests = data;
        state.selections = new Map();
        renderQuestions();
        showStatus('');
      } catch (e) {
        showStatus(String(e.message || e), false);
      } finally {
        setBusy(false);
      }
    }

    const validate = () => {
      const phone = fmt(el.phone.value);
      el.phone.classList.remove('input-error');

      if (!phone)            { el.phone.classList.add('input-error'); el.phone.focus(); showStatus('informe seu telefone'); return }
      const digits = phone.replace(/\D/g, '');
      if (digits.length !== 11) { el.phone.classList.add('input-error'); el.phone.focus(); showStatus('telefone deve ter 11 dígitos (ex.: 27999998888)'); return }
      if (!state.tests.length)  { showStatus('sem perguntas para responder'); return }

      // checar respostas faltantes
      let firstMissing = null;
      document.querySelectorAll('.q').forEach(q => { q.classList.remove('error'); const m=q.querySelector('.err'); if(m) m.remove() });
      state.tests.forEach(q => {
        if (!state.selections.has(q.id)) {
          const box = document.querySelector(`.q[data-qid="${q.id}"]`);
          if (box) {
            box.classList.add('error');
            const err = document.createElement('div');
            err.className = 'err';
            err.textContent = 'esta pergunta precisa ser respondida';
            box.appendChild(err);
            if (!firstMissing) firstMissing = box;
          }
        }
      });
      if (state.selections.size !== state.tests.length) {
        showStatus('responda todas as perguntas');
        if (firstMissing) firstMissing.scrollIntoView({ behavior: 'smooth', block: 'center' });
        return;
      }
      return { phone: digits };
    }

    const showSuccessOnly = () => {
      document.getElementById('grid').style.display = 'none';
      el.successCard.style.display = 'block';
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    const submitAnswers = async () => {
      const id = validate();
      if (!id) return;

      const payload = {
        phone: id.phone,
        items: state.tests.map(q => ({ id: q.id, answer: state.selections.get(q.id) }))
      };

      try {
        setBusy(true);
        showStatus('enviando...');
        const res = await fetch(SUBMIT_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
          body: JSON.stringify(payload)
        });
       // 👇 valida o status
        if (res.status === 400) {
        showStatus('Telefone inválido. Verifique se digitou corretamente e tente novamente.', false);
        el.phone.classList.add('input-error');
        el.phone.focus();
        return;
        }
        if (!res.ok) throw new Error('falha no envio (' + res.status + ')');

        showStatus('enviado com sucesso', true);
        showSuccessOnly();

        // 🔀 Redireciona após sucesso (se configurado)
        if (REDIRECT_URL) {
          setTimeout(() => { window.location.href = REDIRECT_URL; }, 1000);
        }
      } catch (e) {
        showStatus(String(e.message || e), false);
      } finally {
        setBusy(false);
      }
    }

    document.getElementById('submit').addEventListener('click', submitAnswers);
    document.getElementById('reload').addEventListener('click', loadTests);

    loadTests();
  </script>
</body>
</html>

Vital Assist - Home Care

We offer a new standard in care: we find, train, and empower the best caregivers, supported by a system that records all tasks in real time and generates transparent reports.

All to provide comfort, care, and safety for those receiving care—and peace of mind for those accompanying care.