{"id":119,"date":"2026-07-22T06:00:23","date_gmt":"2026-07-22T06:00:23","guid":{"rendered":"https:\/\/dev.ympai.org\/mental-health-center\/"},"modified":"2026-09-11T15:29:46","modified_gmt":"2026-09-11T08:29:46","slug":"mentalhealthcenter","status":"publish","type":"page","link":"https:\/\/ympai.org\/en\/mentalhealthcenter\/","title":{"rendered":"Mental Health Center"},"content":{"rendered":"\n<!-- Include Library Chart.js & html2pdf.js via CDN -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n\n<style>\n.mhc-wrapper {\n  width: 100%;\n  max-width: 800px;\n  margin: 15px auto;\n  padding: 0 10px;\n  font-family: system-ui, -apple-system, sans-serif;\n  box-sizing: border-box;\n}\n\n.mhc-header {\n  text-align: center;\n  margin-bottom: 20px;\n}\n\n.mhc-title {\n  font-size: 24px;\n  font-weight: 700;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n.mhc-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n.mhc-card {\n  background: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 16px;\n  padding: 20px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n}\n\n.form-group {\n  margin-bottom: 16px;\n  text-align: left;\n}\n\n.form-group label {\n  display: block;\n  font-size: 14px;\n  font-weight: 600;\n  color: #4a5568;\n  margin-bottom: 6px;\n}\n\n.form-group input {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid #cbd5e0;\n  border-radius: 10px;\n  font-size: 14px;\n  box-sizing: border-box;\n}\n\n.form-group input:focus {\n  outline: none;\n  border-color: #7b94c0;\n  box-shadow: 0 0 0 3px rgba(123, 148, 192, 0.2);\n}\n\n.mhc-btn {\n  background: #7b94c0;\n  color: #fff;\n  border: none;\n  padding: 12px 20px;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  width: 100%;\n  transition: 0.2s;\n  box-sizing: border-box;\n}\n\n.mhc-btn:hover {\n  background: #637dae;\n}\n\n.quiz-section {\n  display: none;\n  background: #fff;\n  border: 1px solid #e2e8f0;\n  border-radius: 16px;\n  padding: 20px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n}\n\n.btn-back {\n  background: transparent;\n  border: none;\n  color: #718096;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n  margin-bottom: 15px;\n  padding: 0;\n}\n\n.question-item {\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid #edf2f7;\n}\n\n.question-item h4 {\n  font-size: 15px;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n  line-height: 1.4;\n}\n\n.options-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.option-label {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border: 1px solid #e2e8f0;\n  border-radius: 10px;\n  cursor: pointer;\n  font-size: 13px;\n  color: #4a5568;\n  line-height: 1.3;\n}\n\n.option-label:hover {\n  background: #f7fafc;\n  border-color: #7b94c0;\n}\n\n\/* Responsif Tambahan Mobile *\/\n@media (min-width: 640px) {\n  .mhc-wrapper {\n    padding: 0 20px;\n    margin: 30px auto;\n  }\n  .mhc-title {\n    font-size: 28px;\n  }\n  .mhc-card, .quiz-section {\n    padding: 30px;\n  }\n}\n<\/style>\n\n<div class=\"mhc-wrapper\">\n  <div class=\"mhc-header\">\n    <h2 class=\"mhc-title\" id=\"mhcTitle\">Mental Health Centre<\/h2>\n    <p class=\"mhc-subtitle\" id=\"mhcSub\">Silakan isi data diri Anda sebelum memulai tes asesmen mandiri.<\/p>\n  <\/div>\n\n  <!-- FORM DATA DIRI -->\n  <div class=\"mhc-card\" id=\"userInfoView\">\n    <form id=\"userDataForm\" onsubmit=\"handleStartQuiz(event)\">\n      <div class=\"form-group\">\n        <label for=\"userName\">Nama Lengkap<\/label>\n        <input type=\"text\" id=\"userName\" placeholder=\"Masukkan nama Anda\" required=\"\">\n      <\/div>\n      <div class=\"form-group\">\n        <label for=\"userEmail\">Alamat Email <\/label>\n        <input type=\"email\" id=\"userEmail\" placeholder=\"contoh@email.com\" required=\"\">\n      <\/div>\n      <div class=\"form-group\">\n        <label for=\"userAge\">Usia (Tahun)<\/label>\n        <input type=\"number\" id=\"userAge\" placeholder=\"Contoh: 17\" min=\"1\" max=\"100\" required=\"\">\n      <\/div>\n      <button type=\"submit\" class=\"mhc-btn\">Mulai Tes Asesmen<\/button>\n    <\/form>\n  <\/div>\n\n  <!-- VIEW SOAL SPA -->\n  <div class=\"quiz-section\" id=\"quizView\">\n    <button class=\"btn-back\" onclick=\"resetForm()\">\u2190 Isi Ulang Data Diri<\/button>\n    <form id=\"quizForm\" onsubmit=\"submitAssessment(event)\">\n      <div id=\"quizQuestionsContainer\">\n        <p style=\"text-align: center; color: #718096;\">Memuat soal dari database&#8230;<\/p>\n      <\/div>\n      <button type=\"submit\" class=\"mhc-btn\" style=\"margin-top: 20px;\">Kirim Jawaban &amp; Lihat Hasil<\/button>\n    <\/form>\n  <\/div>\n\n  <!-- VIEW HASIL & DOWNLOAD PDF -->\n  <div class=\"quiz-section\" id=\"resultView\" style=\"display: none; text-align: center;\">\n    <div id=\"pdfReportArea\" style=\"padding: 10px; background: #fff;\">\n      <h3 id=\"resultName\" style=\"color: #2d3748; font-size: 20px; margin-bottom: 5px;\">Hasil Asesmen Anda<\/h3>\n      <p id=\"resultEmailSub\" style=\"color: #718096; font-size: 13px; margin-bottom: 15px; word-break: break-all;\"><\/p>\n      <div style=\"width: 100%; max-width: 500px; margin: 0 auto; position: relative;\">\n        <canvas id=\"scoreChart\"><\/canvas>\n      <\/div>\n    <\/div>\n\n    <div style=\"display: flex; flex-direction: column; gap: 10px; margin-top: 20px;\">\n      <button class=\"mhc-btn\" onclick=\"downloadPDF()\" style=\"background: #2b6cb0;\">Download Hasil (PDF)<\/button>\n      <button class=\"mhc-btn\" onclick=\"resetForm()\" style=\"background: #718096;\">Tes Ulang<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\nlet dbQuestions = [];\nlet currentUserData = {};\nlet chartInstance = null;\n\n\/\/ Fetch data kuesioner saat awal muat\nwindow.addEventListener(\"load\", async function () {\n  try {\n    const res = await fetch(\"https:\/\/ympai.org\/wp-json\/fclc\/v1\/kuesioner\");\n    if (res.ok) {\n      dbQuestions = await res.json();\n    } else {\n      const fallbackRes = await fetch(\"https:\/\/dev.ympai.org\/wp-json\/fclc\/v1\/kuesioner\");\n      if (fallbackRes.ok) dbQuestions = await fallbackRes.json();\n    }\n  } catch (err) {\n    console.error(\"Error Fetch Soal:\", err);\n  }\n});\n\nfunction handleStartQuiz(event) {\n  event.preventDefault();\n\n  const name  = document.getElementById(\"userName\").value;\n  const email = document.getElementById(\"userEmail\").value;\n  const age   = parseInt(document.getElementById(\"userAge\").value);\n\n  currentUserData = { name: name, email: email, age: age };\n\n  document.getElementById(\"userInfoView\").style.display = \"none\";\n  document.getElementById(\"resultView\").style.display   = \"none\";\n  document.getElementById(\"quizView\").style.display     = \"block\";\n\n  if (age < 18) {\n    document.getElementById(\"mhcTitle\").innerHTML = \"Tes DASS-Y (Anak &#038; Remaja)\";\n    document.getElementById(\"mhcSub\").innerText   = \"Halo \" + name + \", jawablah pertanyaan di bawah ini sesuai yang kamu rasakan.\";\n    renderDbQuestions(\"remaja\");\n  } else {\n    document.getElementById(\"mhcTitle\").innerHTML = \"Tes DASS-42 (Dewasa)\";\n    document.getElementById(\"mhcSub\").innerText   = \"Halo \" + name + \", jawablah pertanyaan di bawah ini berdasarkan kondisi 1 minggu terakhir.\";\n    renderDbQuestions(\"dewasa\");\n  }\n}\n\nfunction renderDbQuestions(targetUsia) {\n  const container = document.getElementById(\"quizQuestionsContainer\");\n  container.innerHTML = \"\";\n\n  if (!dbQuestions || dbQuestions.length === 0) {\n    container.innerHTML = '<p style=\"text-align: center; color: red;\">Belum ada data pertanyaan di database.<\/p>';\n    return;\n  }\n\n  const filtered = dbQuestions.filter((item) => {\n    const u = (item.target_usia || \"\").toLowerCase().trim();\n    return u === targetUsia.toLowerCase().trim();\n  });\n\n  filtered.forEach((q, idx) => {\n    const qText = q.teks_soal || \"Pertanyaan \" + (idx + 1);\n    const qId   = q.id_soal || idx;\n\n    const qBox = document.createElement(\"div\");\n    qBox.className = \"question-item\";\n    qBox.innerHTML = `\n      <h4>${idx + 1}. ${qText}<\/h4>\n      <div class=\"options-group\">\n        <label class=\"option-label\"><input type=\"radio\" name=\"q_${qId}\" value=\"0\" required> 0 : Tidak pernah \/ tidak sesuai<\/label>\n        <label class=\"option-label\"><input type=\"radio\" name=\"q_${qId}\" value=\"1\"> 1 : Kadang-kadang \/ sampai tingkat tertentu<\/label>\n        <label class=\"option-label\"><input type=\"radio\" name=\"q_${qId}\" value=\"2\"> 2 : Lumayan sering \/ batas yang dipertimbangkan<\/label>\n        <label class=\"option-label\"><input type=\"radio\" name=\"q_${qId}\" value=\"3\"> 3 : Sangat sering \/ sangat sesuai<\/label>\n      <\/div>\n    `;\n    container.appendChild(qBox);\n  });\n}\n\nasync function submitAssessment(event) {\n  event.preventDefault();\n\n  const formData = new FormData(document.getElementById(\"quizForm\"));\n  const answers  = {};\n\n  formData.forEach((value, key) => {\n    const qId = key.replace(\"q_\", \"\");\n    answers[qId] = parseInt(value);\n  });\n\n  const payload = {\n    nama: currentUserData.name,\n    email: currentUserData.email,\n    usia: currentUserData.age,\n    answers: answers,\n  };\n\n  try {\n    let res = await fetch(\"https:\/\/ympai.org\/wp-json\/fclc\/v1\/submit-assessment\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\/json\" },\n      body: JSON.stringify(payload),\n    });\n\n    if (!res.ok) {\n      res = await fetch(\"https:\/\/dev.ympai.org\/wp-json\/fclc\/v1\/submit-assessment\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application\/json\" },\n        body: JSON.stringify(payload),\n      });\n    }\n\n    if (res.ok) {\n      const data = await res.json();\n      renderChartResult(data);\n    }\n  } catch (err) {\n    console.error(\"Error Submit:\", err);\n  }\n}\n\nfunction renderChartResult(data) {\n  document.getElementById(\"quizView\").style.display   = \"none\";\n  document.getElementById(\"resultView\").style.display = \"block\";\n  document.getElementById(\"mhcTitle\").innerText       = \"Hasil Asesmen Mandiri\";\n  document.getElementById(\"mhcSub\").innerText         = \"Berikut adalah grafik tingkat kondisi emosional Anda:\";\n  document.getElementById(\"resultName\").innerText     = \"Hasil Asesmen: \" + data.nama + \" (\" + data.target_usia.toUpperCase() + \")\";\n  document.getElementById(\"resultEmailSub\").innerText = \"Hasil ringkasan juga telah dikirimkan ke email: \" + data.email;\n\n  function getDASSLevel(type, scale, score) {\n    const isDewasa = (type || '').toLowerCase() === 'dewasa';\n    if (isDewasa) {\n      if (scale === 'depression') {\n        if (score <= 9) return 'Normal';\n        if (score <= 13) return 'Ringan';\n        if (score <= 20) return 'Sedang';\n        if (score <= 27) return 'Parah';\n        return 'Sangat Parah';\n      }\n      if (scale === 'anxiety') {\n        if (score <= 7) return 'Normal';\n        if (score <= 9) return 'Ringan';\n        if (score <= 14) return 'Sedang';\n        if (score <= 19) return 'Parah';\n        return 'Sangat Parah';\n      }\n      if (scale === 'stress') {\n        if (score <= 14) return 'Normal';\n        if (score <= 18) return 'Ringan';\n        if (score <= 25) return 'Sedang';\n        if (score <= 33) return 'Parah';\n        return 'Sangat Parah';\n      }\n    } else {\n      if (scale === 'depression') {\n        if (score <= 6) return 'Normal';\n        if (score <= 8) return 'Ringan';\n        if (score <= 13) return 'Sedang';\n        if (score <= 16) return 'Parah';\n        return 'Sangat Parah';\n      }\n      if (scale === 'anxiety') {\n        if (score <= 5) return 'Normal';\n        if (score <= 7) return 'Ringan';\n        if (score <= 12) return 'Sedang';\n        if (score <= 15) return 'Parah';\n        return 'Sangat Parah';\n      }\n      if (scale === 'stress') {\n        if (score <= 11) return 'Normal';\n        if (score <= 13) return 'Ringan';\n        if (score <= 16) return 'Sedang';\n        if (score <= 18) return 'Parah';\n        return 'Sangat Parah';\n      }\n    }\n    return 'Normal';\n  }\n\n  const lvlDepression = getDASSLevel(data.target_usia, 'depression', data.scores.depression);\n  const lvlAnxiety    = getDASSLevel(data.target_usia, 'anxiety', data.scores.anxiety);\n  const lvlStress     = getDASSLevel(data.target_usia, 'stress', data.scores.stress);\n\n  const ctx = document.getElementById(\"scoreChart\").getContext(\"2d\");\n\n  if (chartInstance) {\n    chartInstance.destroy();\n  }\n\n  chartInstance = new Chart(ctx, {\n    type: \"bar\",\n    data: {\n      labels: [\n        \"Depresi (\" + lvlDepression + \")\", \n        \"Kecemasan (\" + lvlAnxiety + \")\", \n        \"Stres (\" + lvlStress + \")\"\n      ],\n      datasets: [\n        {\n          label: \"Skor Poin\",\n          data: [data.scores.depression, data.scores.anxiety, data.scores.stress],\n          backgroundColor: [\"rgba(239, 68, 68, 0.75)\", \"rgba(245, 158, 11, 0.75)\", \"rgba(59, 130, 246, 0.75)\"],\n          borderColor: [\"#ef4444\", \"#f59e0b\", \"#3b82f6\"],\n          borderWidth: 1.5,\n          borderRadius: 8,\n        },\n      ],\n    },\n    options: {\n      responsive: true,\n      maintainAspectRatio: true,\n      animation: false,\n      scales: {\n        y: { beginAtZero: true, max: (data.target_usia || '').toLowerCase() === 'dewasa' ? 42 : 21 },\n      },\n      plugins: { legend: { display: false } },\n    },\n  });\n\n  let expBox = document.getElementById(\"dassExplanationBox\");\n  if (!expBox) {\n    expBox = document.createElement(\"div\");\n    expBox.id = \"dassExplanationBox\";\n    expBox.style.marginTop = \"20px\";\n    expBox.style.padding = \"15px\";\n    expBox.style.borderRadius = \"12px\";\n    expBox.style.textAlign = \"left\";\n    expBox.style.fontSize = \"13px\";\n    expBox.style.lineHeight = \"1.6\";\n    document.getElementById(\"pdfReportArea\").appendChild(expBox);\n  }\n\n  const allLevels = [lvlDepression, lvlAnxiety, lvlStress];\n  const linkText = \"<br><br>Tidak perlu ragu jika Anda membutuhkan bantuan. Anda dapat langsung menghubungi konselor YMPAI melalui tautan berikut: <a href='https:\/\/linktr.ee\/ympaiorg' target='_blank' style='color: inherit; font-weight: bold;'>linktr.ee\/ympaiorg<\/a>\";\n\n  if (allLevels.includes('Parah') || allLevels.includes('Sangat Parah')) {\n    expBox.style.backgroundColor = \"#f8d7da\";\n    expBox.style.border = \"1px solid #f5c6cb\";\n    expBox.style.color = \"#721c24\";\n    expBox.innerHTML = \"<strong>Rekomendasi Konseling Profesional:<\/strong><br>Disarankan untuk melakukan sesi konseling ke profesional. Kamu dapat menghubungi <strong>RKKI YMPAI<\/strong> melalui admin offline di <strong>0857-2089-5262<\/strong> atau admin online di <strong>0896-8838-9566<\/strong>.\" + linkText;\n  } \n  else if (allLevels.includes('Ringan') || allLevels.includes('Sedang')) {\n    expBox.style.backgroundColor = \"#fff3cd\";\n    expBox.style.border = \"1px solid #ffeeba\";\n    expBox.style.color = \"#856404\";\n    expBox.innerHTML = \"<strong>Rekomendasi Tata Kelola Diri:<\/strong><br>Disarankan untuk rutin mengelola diri dengan teknik-teknik tata kelola seperti <em>butterfly hug<\/em>, latihan napas 4x6 atau napas 4-7-8, serta jurnaling yang dilakukan rutin setiap malam sebelum tidur selama 5 menit sambil fokus dan berkesadaran.\" + linkText;\n  } \n  else {\n    expBox.style.backgroundColor = \"#d4edda\";\n    expBox.style.border = \"1px solid #c3e6cb\";\n    expBox.style.color = \"#155724\";\n    expBox.innerHTML = \"<strong>Kondisi Mental Stabil:<\/strong><br>Selamat, Kamu berada dalam kondisi mental yang stabil! Pertahankan terus kesehatan mentalmu dengan menjaga 4 Pilar Kehidupan (menjaga pola makan, pola tidur, tata kelola emosi & olahraga rutin).\" + linkText;\n  }\n\n  expBox.style.display = \"block\";\n}\n\nfunction downloadPDF() {\n  const element = document.getElementById(\"pdfReportArea\");\n\n  \/\/ Konfigurasi khusus html2pdf agar mobile friendly dan tidak kosong\n  const opt = {\n    margin: [10, 10, 10, 10],\n    filename: 'Hasil_Asesmen_' + currentUserData.name.replace(\/\\s+\/g, '_') + '.pdf',\n    image: { type: 'jpeg', quality: 0.98 },\n    html2canvas: { \n      scale: 2, \n      useCORS: true,\n      logging: false,\n      scrollY: 0,\n      windowWidth: document.documentElement.offsetWidth\n    },\n    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }\n  };\n\n  html2pdf().set(opt).from(element).save().catch(function(err) {\n    console.error(\"PDF Export Error:\", err);\n  });\n}\n\nfunction resetForm() {\n  document.getElementById(\"resultView\").style.display   = \"none\";\n  document.getElementById(\"quizView\").style.display     = \"none\";\n  document.getElementById(\"userInfoView\").style.display = \"block\";\n  document.getElementById(\"mhcTitle\").innerText         = \"Mental Health Centre\";\n  document.getElementById(\"mhcSub\").innerText           = \"Silakan isi data diri Anda sebelum memulai tes asesmen mandiri.\";\n  document.getElementById(\"userDataForm\").reset();\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Mental Health Centre Silakan isi data diri Anda sebelum memulai tes asesmen mandiri. Nama Lengkap Alamat Email Usia (Tahun) Mulai Tes Asesmen \u2190 Isi Ulang Data Diri Memuat soal dari database&#8230; Kirim Jawaban &amp; Lihat Hasil Hasil Asesmen Anda Download Hasil (PDF) Tes Ulang<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-119","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/pages\/119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":41,"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/pages\/119\/revisions"}],"predecessor-version":[{"id":715,"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/pages\/119\/revisions\/715"}],"wp:attachment":[{"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/media?parent=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}