{"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-10T14:33:42","modified_gmt":"2026-09-10T07:33:42","slug":"mentalhealthcenter","status":"publish","type":"page","link":"https:\/\/dev.ympai.org\/en\/mentalhealthcenter\/","title":{"rendered":"Mental Health Center"},"content":{"rendered":"\n<!-- Library 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: 40px auto;\n  padding: 0 20px;\n  font-family: system-ui, -apple-system, sans-serif;\n  box-sizing: border-box;\n}\n.mhc-header { text-align: center; margin-bottom: 30px; }\n.mhc-title { font-size: 30px; font-weight: 700; color: #2d3748; margin-bottom: 8px; }\n.mhc-subtitle { font-size: 15px; color: #718096; margin: 0; }\n.mhc-card {\n  background: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 20px;\n  padding: 32px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n}\n.form-group { margin-bottom: 20px; text-align: left; }\n.form-group label { display: block; font-size: 14px; font-weight: 600; color: #4a5568; margin-bottom: 8px; }\n.form-group input {\n  width: 100%;\n  padding: 12px 16px;\n  border: 1px solid #cbd5e0;\n  border-radius: 10px;\n  font-size: 15px;\n  box-sizing: border-box;\n}\n.form-group input:focus { outline: none; border-color: #7b94c0; box-shadow: 0 0 0 3px rgba(123, 148, 192, 0.2); }\n.mhc-btn {\n  background: #7b94c0;\n  color: #fff;\n  border: none;\n  padding: 14px 32px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  width: 100%;\n  transition: 0.2s;\n}\n.mhc-btn:hover { background: #637dae; }\n.quiz-section {\n  display: none;\n  background: #fff;\n  border: 1px solid #e2e8f0;\n  border-radius: 20px;\n  padding: 32px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n}\n.btn-back { background: transparent; border: none; color: #718096; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 20px; }\n.question-item { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #edf2f7; }\n.question-item h4 { font-size: 16px; color: #2d3748; margin: 0 0 14px 0; line-height: 1.5; }\n.options-group { display: flex; flex-direction: column; gap: 10px; }\n.option-label {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: 1px solid #e2e8f0;\n  border-radius: 12px;\n  cursor: pointer;\n  font-size: 14px;\n  color: #4a5568;\n}\n.option-label:hover { background: #f7fafc; border-color: #7b94c0; }\n.dass-explanation-box { margin-top: 25px; padding: 18px 20px; border-radius: 12px; text-align: left; font-size: 14px; line-height: 1.6; }\n.dass-explanation-box h4 { margin: 0 0 8px 0; font-size: 16px; font-weight: 700; }\n.dass-explanation-box p { margin: 0; }\n.bg-normal { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; }\n.bg-ringan-sedang { background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404; }\n.bg-parah { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }\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=\"event.preventDefault(); handleStartQuiz();\">\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 type=\"button\" class=\"btn-back\" onclick=\"resetForm()\">\u2190 Isi Ulang Data Diri<\/button>\n    <form id=\"quizForm\" onsubmit=\"event.preventDefault(); submitAssessment();\">\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: 20px; background: #fff;\">\n      <h3 id=\"resultName\" style=\"color: #2d3748; font-size: 22px; margin-bottom: 5px;\">Hasil Asesmen Anda<\/h3>\n      <p id=\"resultEmailSub\" style=\"color: #718096; font-size: 14px; margin-bottom: 20px;\"><\/p>\n      <div style=\"max-width: 550px; margin: 0 auto;\">\n        <canvas id=\"scoreChart\"><\/canvas>\n      <\/div>\n      <div id=\"dassExplanationBox\" class=\"dass-explanation-box\" style=\"display: none;\">\n        <h4 id=\"dassStatusTitle\">Keterangan &#038; Rekomendasi:<\/h4>\n        <p id=\"dassStatusText\"><\/p>\n      <\/div>\n    <\/div>\n\n    <div style=\"display: flex; gap: 15px; justify-content: center; margin-top: 25px;\">\n      <button type=\"button\" class=\"mhc-btn\" onclick=\"downloadPDF()\" style=\"background: #2b6cb0;\">Download Hasil (PDF)<\/button>\n      <button type=\"button\" class=\"mhc-btn\" onclick=\"resetForm()\" style=\"background: #718096;\">Tes Ulang<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\nvar dbQuestions = [];\nvar currentUserData = {};\nvar chartInstance = null;\n\nwindow.addEventListener(\"load\", function () {\n  fetch(\"https:\/\/dev.ympai.org\/wp-json\/fclc\/v1\/kuesioner\")\n    .then(function(res) { return res.json(); })\n    .then(function(data) { dbQuestions = data; })\n    .catch(function(err) { console.error(\"Error Fetch Soal:\", err); });\n});\n\nfunction handleStartQuiz() {\n  var name = document.getElementById(\"userName\").value;\n  var email = document.getElementById(\"userEmail\").value;\n  var 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\").innerText = \"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\").innerText = \"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  var container = document.getElementById(\"quizQuestionsContainer\");\n  container.innerHTML = \"\";\n\n  if (!dbQuestions || dbQuestions.length === 0) {\n    container.innerHTML = '<p style=\"text-align: center; color: red;\">Data soal sedang dimuat dari database. Silakan tunggu beberapa detik lalu coba lagi.<\/p>';\n    return;\n  }\n\n  var filtered = dbQuestions.filter(function(item) {\n    var u = (item.target_usia || \"\").toLowerCase().trim();\n    return u === targetUsia.toLowerCase().trim();\n  });\n\n  filtered.forEach(function(q, idx) {\n    var qText = q.teks_soal || \"Pertanyaan \" + (idx + 1);\n    var qId   = q.id_soal || idx;\n\n    var 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    container.appendChild(qBox);\n  });\n}\n\nfunction submitAssessment() {\n  var formData = new FormData(document.getElementById(\"quizForm\"));\n  var answers  = {};\n\n  formData.forEach(function(value, key) {\n    var qId = key.replace(\"q_\", \"\");\n    answers[qId] = parseInt(value);\n  });\n\n  var payload = {\n    nama: currentUserData.name,\n    email: currentUserData.email,\n    usia: currentUserData.age,\n    answers: answers\n  };\n\n  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  .then(function(res) { return res.json(); })\n  .then(function(data) { renderChartResult(data); })\n  .catch(function(err) { console.error(\"Error Submit:\", err); });\n}\n\nfunction getDASSLevel(type, scale, score) {\n  var isDewasa = (type || '').toLowerCase() === 'dewasa';\n  \n  if (isDewasa) {\n    if (scale === 'depression') {\n      if (score <= 9) return 'Normal';[cite: 1]\n      if (score <= 13) return 'Ringan';[cite: 1]\n      if (score <= 20) return 'Sedang';[cite: 1]\n      if (score <= 27) return 'Parah';[cite: 1]\n      return 'Sangat Parah';[cite: 1]\n    }\n    if (scale === 'anxiety') {\n      if (score <= 7) return 'Normal';[cite: 1]\n      if (score <= 9) return 'Ringan';[cite: 1]\n      if (score <= 14) return 'Sedang';[cite: 1]\n      if (score <= 19) return 'Parah';[cite: 1]\n      return 'Sangat Parah';[cite: 1]\n    }\n    if (scale === 'stress') {\n      if (score <= 14) return 'Normal';[cite: 1]\n      if (score <= 18) return 'Ringan';[cite: 1]\n      if (score <= 25) return 'Sedang';[cite: 1]\n      if (score <= 33) return 'Parah';[cite: 1]\n      return 'Sangat Parah';[cite: 1]\n    }\n  } else {\n    if (scale === 'depression') {\n      if (score <= 6) return 'Normal';[cite: 1]\n      if (score <= 8) return 'Ringan';[cite: 1]\n      if (score <= 13) return 'Sedang';[cite: 1]\n      if (score <= 16) return 'Parah';[cite: 1]\n      return 'Sangat Parah';[cite: 1]\n    }\n    if (scale === 'anxiety') {\n      if (score <= 5) return 'Normal';[cite: 1]\n      if (score <= 7) return 'Ringan';[cite: 1]\n      if (score <= 12) return 'Sedang';[cite: 1]\n      if (score <= 15) return 'Parah';[cite: 1]\n      return 'Sangat Parah';[cite: 1]\n    }\n    if (scale === 'stress') {\n      if (score <= 11) return 'Normal';[cite: 1]\n      if (score <= 13) return 'Ringan';[cite: 1]\n      if (score <= 16) return 'Sedang';[cite: 1]\n      if (score <= 18) return 'Parah';[cite: 1]\n      return 'Sangat Parah';[cite: 1]\n    }\n  }\n  return 'Normal';\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  var lvlDepression = getDASSLevel(data.target_usia, 'depression', data.scores.depression);\n  var lvlAnxiety    = getDASSLevel(data.target_usia, 'anxiety', data.scores.anxiety);\n  var lvlStress     = getDASSLevel(data.target_usia, 'stress', data.scores.stress);\n\n  var 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        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    options: {\n      responsive: 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  var expBox   = document.getElementById(\"dassExplanationBox\");\n  var expTitle = document.getElementById(\"dassStatusTitle\");\n  var expText  = document.getElementById(\"dassStatusText\");\n\n  var allLevels = [lvlDepression, lvlAnxiety, lvlStress];\n  expBox.className = \"dass-explanation-box\";\n\n  if (allLevels.indexOf('Parah') !== -1 || allLevels.indexOf('Sangat Parah') !== -1) {\n    expBox.classList.add('bg-parah');\n    expTitle.innerText = \"Rekomendasi Konseling Profesional\";\n    expText.innerHTML  = \"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>.[cite: 1]\";\n  } \n  else if (allLevels.indexOf('Ringan') !== -1 || allLevels.indexOf('Sedang') !== -1) {\n    expBox.classList.add('bg-ringan-sedang');\n    expTitle.innerText = \"Rekomendasi Tata Kelola Diri\";\n    expText.innerHTML  = \"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.[cite: 1]\";\n  } \n  else {\n    expBox.classList.add('bg-normal');\n    expTitle.innerText = \"Kondisi Mental Stabil\";\n    expText.innerHTML  = \"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).[cite: 1]\";\n  }\n\n  expBox.style.display = \"block\";\n}\n\nfunction downloadPDF() {\n  var element = document.getElementById(\"pdfReportArea\");\n  var opt = {\n    margin: 10,\n    filename: 'Hasil_Asesmen_' + currentUserData.name.replace(\/\\s+\/g, '_') + '.pdf',\n    image: { type: 'jpeg', quality: 0.98 },\n    html2canvas: { scale: 2 },\n    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }\n  };\n  html2pdf().set(opt).from(element).save();\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 Keterangan &#038; Rekomendasi: 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:\/\/dev.ympai.org\/en\/wp-json\/wp\/v2\/pages\/119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.ympai.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.ympai.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.ympai.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.ympai.org\/en\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":19,"href":"https:\/\/dev.ympai.org\/en\/wp-json\/wp\/v2\/pages\/119\/revisions"}],"predecessor-version":[{"id":691,"href":"https:\/\/dev.ympai.org\/en\/wp-json\/wp\/v2\/pages\/119\/revisions\/691"}],"wp:attachment":[{"href":"https:\/\/dev.ympai.org\/en\/wp-json\/wp\/v2\/media?parent=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}