
html = r"""<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skrining ADHD Interaktif</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",Arial,sans-serif;background:#f0f4f8;color:#333}
header{background:linear-gradient(135deg,#1a237e,#3949ab);color:#fff;padding:24px 20px;text-align:center}
header h1{font-size:1.7em;margin-bottom:6px}
header p{font-size:.9em;opacity:.85}
.tabs{display:flex;background:#fff;border-bottom:3px solid #1a237e;overflow-x:auto;position:sticky;top:0;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.tab{padding:15px 22px;cursor:pointer;font-weight:600;font-size:.88em;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-3px;color:#777;transition:.2s}
.tab.active,.tab:hover{color:#1a237e;border-bottom-color:#1a237e;background:#f5f7ff}
.container{max-width:820px;margin:20px auto;padding:0 15px 40px}
.section{display:none}.section.active{display:block}
.info-card{background:#fff;border-radius:14px;padding:20px;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.08);border-left:5px solid #1a237e}
.info-card h3{color:#1a237e;margin-bottom:8px;font-size:1.05em}
.info-card p{font-size:.87em;color:#666;line-height:1.6}
.progress-wrap{margin-top:14px}
.progress-text{font-size:.82em;color:#888;margin-bottom:5px}
.progress-bar{background:#e0e0e0;border-radius:10px;height:9px}
.progress-fill{background:linear-gradient(90deg,#1a237e,#42a5f5);height:100%;border-radius:10px;transition:.4s;width:0%}
.sec-label{font-size:.75em;font-weight:700;text-transform:uppercase;color:#1a237e;letter-spacing:1px;margin:20px 0 8px;padding:6px 14px;background:#e8eaf6;border-radius:6px;display:inline-block}
.q-card{background:#fff;border-radius:12px;padding:18px;margin-bottom:10px;box-shadow:0 1px 6px rgba(0,0,0,.07)}
.q-card.answered{border-left:4px solid #43a047}
.q-card h4{font-size:.88em;color:#333;margin-bottom:12px;line-height:1.5;font-weight:500}
.q-card h4 span{color:#1a237e;font-weight:700;margin-right:5px}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{padding:7px 14px;border:2px solid #ddd;border-radius:20px;cursor:pointer;font-size:.82em;transition:.2s;background:#fff;user-select:none}
.opt:hover{border-color:#3949ab;color:#3949ab;background:#f5f7ff}
.opt.selected{background:#1a237e;color:#fff;border-color:#1a237e}
.btn-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btn{padding:12px 28px;border:none;border-radius:25px;cursor:pointer;font-size:.92em;font-weight:700;transition:.2s}
.btn-primary{background:#1a237e;color:#fff}.btn-primary:hover{background:#283593;transform:translateY(-1px)}
.btn-reset{background:#eceff1;color:#546e7a}.btn-reset:hover{background:#cfd8dc}
.btn-print{background:#2e7d32;color:#fff}.btn-print:hover{background:#1b5e20}
.result-box{border-radius:14px;padding:22px;margin-top:22px}
.result-box.hijau{background:#e8f5e9;border-left:6px solid #2e7d32}
.result-box.kuning{background:#fff8e1;border-left:6px solid #f57f17}
.result-box.merah{background:#ffebee;border-left:6px solid #c62828}
.result-box h2{margin-bottom:14px;font-size:1.1em}
.result-row{margin:8px 0;font-size:.9em;display:flex;align-items:center;gap:8px}
.badge{padding:3px 11px;border-radius:12px;font-size:.78em;font-weight:700}
.badge.ok{background:#c8e6c9;color:#1b5e20}
.badge.warn{background:#fff3e0;color:#e65100}
.badge.danger{background:#ffcdd2;color:#b71c1c}
.warn-box{background:#fff3e0;border:1px solid #ffb300;border-radius:8px;padding:12px;margin-top:14px;font-size:.83em;color:#e65100;line-height:1.6}
.hidden{display:none}
@media(max-width:600px){.opts{flex-direction:column}}
@media print{.tabs,.btn-group,header,.info-card{display:none!important}.result-box{border:2px solid #333!important;background:#fff!important}}
</style>
</head>
<body>
<header>
  <h1>&#x1F9E0; Skrining ADHD Interaktif</h1>
  <p>Alat bantu skrining awal ADHD &mdash; bukan pengganti diagnosis profesional</p>
</header>
<div class="tabs">
  <div class="tab active" onclick="switchTab(0)">&#x1F4CB; ASRS v1.1 (Dewasa)</div>
  <div class="tab" onclick="switchTab(1)">&#x1F46A; Vanderbilt Orang Tua</div>
  <div class="tab" onclick="switchTab(2)">&#x1F469;&#x200D;&#x1F3EB; Vanderbilt Guru</div>
</div>
<div class="container">

<div class="section active" id="sec0">
  <div class="info-card">
    <h3>&#x1F4CB; Adult ADHD Self-Report Scale (ASRS v1.1)</h3>
    <p>Kuesioner WHO untuk dewasa. Pilih jawaban yang paling menggambarkan kondisi Anda dalam <strong>6 bulan terakhir</strong>. Terdiri dari 18 pertanyaan.</p>
    <div class="progress-wrap">
      <div class="progress-text" id="pt0">0 dari 18 pertanyaan dijawab</div>
      <div class="progress-bar"><div class="progress-fill" id="pf0"></div></div>
    </div>
  </div>
  <div id="qasrs"></div>
  <div class="btn-group">
    <button class="btn btn-primary" onclick="hitungASRS()">&#x1F4CA; Lihat Hasil</button>
    <button class="btn btn-reset" onclick="resetSec(0)">&#x1F504; Reset</button>
  </div>
  <div id="rasrs" class="hidden"></div>
</div>

<div class="section" id="sec1">
  <div class="info-card">
    <h3>&#x1F46A; Vanderbilt Assessment Scale &mdash; Informan Orang Tua</h3>
    <p>Untuk anak usia 6&ndash;12 tahun. Pilih jawaban berdasarkan perilaku anak dalam <strong>4 minggu terakhir</strong>. Terdiri dari 33 pertanyaan perilaku.</p>
    <div class="progress-wrap">
      <div class="progress-text" id="pt1">0 dari 33 pertanyaan dijawab</div>
      <div class="progress-bar"><div class="progress-fill" id="pf1"></div></div>
    </div>
  </div>
  <div id="qortu"></div>
  <div class="btn-group">
    <button class="btn btn-primary" onclick="hitungVand('ortu')">&#x1F4CA; Lihat Hasil</button>
    <button class="btn btn-reset" onclick="resetSec(1)">&#x1F504; Reset</button>
  </div>
  <div id="rortu" class="hidden"></div>
</div>

<div class="section" id="sec2">
  <div class="info-card">
    <h3>&#x1F469;&#x200D;&#x1F3EB; Vanderbilt Assessment Scale &mdash; Informan Guru</h3>
    <p>Untuk anak usia 6&ndash;12 tahun. Isi berdasarkan pengamatan di sekolah dalam <strong>4 minggu terakhir</strong>. Terdiri dari 35 pertanyaan.</p>
    <div class="progress-wrap">
      <div class="progress-text" id="pt2">0 dari 35 pertanyaan dijawab</div>
      <div class="progress-bar"><div class="progress-fill" id="pf2"></div></div>
    </div>
  </div>
  <div id="qguru"></div>
  <div class="btn-group">
    <button class="btn btn-primary" onclick="hitungVand('guru')">&#x1F4CA; Lihat Hasil</button>
    <button class="btn btn-reset" onclick="resetSec(2)">&#x1F504; Reset</button>
  </div>
  <div id="rguru" class="hidden"></div>
</div>

</div>
<script>
var A={asrs:{},ortu:{},guru:{}};

var asrsQ=[
"Seberapa sering Anda kesulitan menyelesaikan tahap akhir suatu proyek setelah bagian yang menantang selesai?",
"Seberapa sering Anda kesulitan mengatur sesuatu saat mengerjakan tugas yang membutuhkan organisasi?",
"Seberapa sering Anda bermasalah mengingat janji atau kewajiban yang harus dipenuhi?",
"Seberapa sering Anda menunda atau menghindari tugas yang membosankan atau sulit untuk dimulai?",
"Seberapa sering Anda menggeliat atau menggerakkan tangan/kaki saat harus duduk diam dalam waktu lama?",
"Seberapa sering Anda merasa terlalu aktif dan terdorong melakukan sesuatu, seolah digerakkan oleh mesin?",
"Seberapa sering Anda membuat kesalahan ceroboh saat mengerjakan proyek yang membosankan atau sulit?",
"Seberapa sering Anda kesulitan mempertahankan perhatian pada pekerjaan yang membosankan atau berulang?",
"Seberapa sering Anda kesulitan memusatkan perhatian saat seseorang berbicara langsung kepada Anda?",
"Seberapa sering Anda salah meletakkan atau kesulitan menemukan benda di rumah atau kantor?",
"Seberapa sering Anda terganggu oleh aktivitas atau suara di sekitar Anda?",
"Seberapa sering Anda meninggalkan kursi dalam rapat atau situasi di mana Anda diharapkan duduk?",
"Seberapa sering Anda merasa gelisah atau tidak bisa diam?",
"Seberapa sering Anda kesulitan bersantai dan menikmati waktu luang?",
"Seberapa sering Anda merasa terlalu banyak bicara dalam situasi sosial?",
"Seberapa sering Anda menyudahi kalimat orang lain sebelum mereka selesai berbicara?",
"Seberapa sering Anda kesulitan menunggu giliran dalam situasi yang memerlukannya?",
"Seberapa sering Anda menyela atau memotong pembicaraan orang lain saat mereka sedang sibuk?"
];
var asrsOpt=["0 \u2014 Tidak Pernah","1 \u2014 Jarang","2 \u2014 Kadang-kadang","3 \u2014 Sering","4 \u2014 Sangat Sering"];

var vandQ=[
"Gagal memperhatikan detail atau membuat kesalahan ceroboh dalam pekerjaan sekolah",
"Kesulitan mempertahankan perhatian pada tugas atau kegiatan bermain",
"Tampak tidak mendengarkan saat diajak bicara langsung",
"Tidak mengikuti instruksi dan gagal menyelesaikan pekerjaan rumah",
"Kesulitan mengorganisasi tugas dan kegiatan",
"Menghindari atau tidak mau mengerjakan tugas yang memerlukan usaha mental terus-menerus",
"Kehilangan benda yang diperlukan untuk tugas (mainan, PR, pensil)",
"Mudah teralihkan perhatiannya oleh rangsangan luar",
"Pelupa dalam kegiatan sehari-hari",
"Menggeliatkan tangan atau kaki atau menggeliat di tempat duduk",
"Meninggalkan tempat duduk saat diharapkan tetap duduk",
"Berlari atau memanjat secara berlebihan dalam situasi yang tidak sesuai",
"Kesulitan bermain atau melakukan kegiatan santai dengan tenang",
"Selalu bergerak atau bertindak seolah digerakkan oleh mesin",
"Berbicara terlalu banyak",
"Menjawab pertanyaan sebelum pertanyaan selesai diucapkan",
"Kesulitan menunggu giliran",
"Menyela atau mengganggu orang lain",
"Bertengkar dengan orang dewasa",
"Mudah marah atau kehilangan kesabaran",
"Secara aktif menolak mematuhi permintaan atau aturan orang dewasa",
"Dengan sengaja mengganggu orang lain",
"Menyalahkan orang lain atas kesalahan atau perilaku buruknya",
"Mudah tersinggung atau terganggu oleh orang lain",
"Marah dan penuh kebencian",
"Pendendam atau jahat",
"Takut, cemas, atau khawatir",
"Takut mencoba hal-hal baru",
"Merasa tidak berharga atau rendah diri",
"Menyalahkan diri sendiri atas masalah",
"Merasa kesepian, tidak disukai, atau tidak dicintai",
"Sedih, tidak bahagia, atau depresi",
"Pemalu atau mudah malu"
];
var vandGQ=vandQ.concat([
"Bertindak lebih muda dari usianya",
"Tidak memahami instruksi baru kecuali diberikan perlahan, berulang, atau sederhana"
]);
var vandOpt=["0 \u2014 Tidak Pernah","1 \u2014 Jarang","2 \u2014 Sering","3 \u2014 Sangat Sering"];

var seksiOrtu=[{l:"Inatensi",f:0,t:8},{l:"Hiperaktif-Impulsif",f:9,t:17},{l:"Gangguan Perilaku (ODD)",f:18,t:25},{l:"Kecemasan / Depresi",f:26,t:32}];
var seksiGuru=[{l:"Inatensi",f:0,t:8},{l:"Hiperaktif-Impulsif",f:9,t:17},{l:"Gangguan Perilaku (ODD)",f:18,t:25},{l:"Kecemasan / Depresi",f:26,t:32},{l:"Kesulitan Belajar",f:33,t:34}];

function buildQ(cid,qs,opts,key,total,ptId,pfId,seksi){
  var html="",prevSeksi=-1;
  for(var i=0;i<qs.length;i++){
    if(seksi){
      for(var s=0;s<seksi.length;s++){
        if(i===seksi[s].f){html+='<div class="sec-label">'+seksi[s].l+'</div>';break;}
      }
    }
    html+='<div class="q-card" id="qc-'+key+'-'+i+'">';
    html+='<h4><span>'+(i+1)+'.</span>'+qs[i]+'</h4>';
    html+='<div class="opts">';
    for(var v=0;v<opts.length;v++){
      html+='<div class="opt" id="opt-'+key+'-'+i+'-'+v+'" onclick="pilih(\''+key+'\','+i+','+v+','+total+',\''+ptId+'\',\''+pfId+'\')">'+opts[v]+'</div>';
    }
    html+='</div></div>';
  }
  document.getElementById(cid).innerHTML=html;
}

function pilih(key,qi,val,total,ptId,pfId){
  var prev=A[key][qi];
  if(prev!==undefined) document.getElementById("opt-"+key+"-"+qi+"-"+prev).classList.remove("selected");
  A[key][qi]=val;
  document.getElementById("opt-"+key+"-"+qi+"-"+val).classList.add("selected");
  document.getElementById("qc-"+key+"-"+qi).classList.add("answered");
  var done=Object.keys(A[key]).length;
  document.getElementById(ptId).textContent=done+" dari "+total+" pertanyaan dijawab";
  document.getElementById(pfId).style.width=Math.round(done/total*100)+"%";
}

function switchTab(idx){
  document.querySelectorAll(".tab").forEach(function(t,i){t.classList.toggle("active",i===idx);});
  document.querySelectorAll(".section").forEach(function(s,i){s.classList.toggle("active",i===idx);});
}

function resetSec(idx){
  var keys=["asrs","ortu","guru"];
  A[keys[idx]]={};
  buildAll();
  var rids=["rasrs","rortu","rguru"];
  document.getElementById(rids[idx]).classList.add("hidden");
}

function badge(txt,cls){return '<span class="badge '+cls+'">'+txt+'</span>';}

function hitungASRS(){
  if(Object.keys(A.asrs).length<18){alert("Mohon jawab semua 18 pertanyaan!");return;}
  var bagA=0;
  for(var i=0;i<6;i++){var v=A.asrs[i];if(i<3&&v>=3)bagA++;else if(i>=3&&v>=2)bagA++;}
  var tot=0;for(var i=0;i<18;i++)tot+=A.asrs[i];
  var lvl=tot<=11?"hijau":tot<=15?"kuning":"merah";
  var ikon=tot<=11?"&#x2705;":tot<=15?"&#x26A0;&#xFE0F;":"&#x1F534;";
  var judul=tot<=11?"Tidak Ada Indikasi Signifikan":tot<=15?"Kemungkinan Ada Gejala ADHD":"Kemungkinan Tinggi ADHD Dewasa";
  var pesan=tot<=11?"Skor Anda tergolong rendah. Gejala ADHD tidak terlalu mungkin ada saat ini.":tot<=15?"Skor menunjukkan kemungkinan adanya gejala ADHD. Disarankan konsultasi ke psikolog atau psikiater untuk evaluasi lebih lanjut.":"Skor menunjukkan kemungkinan besar adanya ADHD. Sangat disarankan segera melakukan evaluasi klinis dengan profesional.";
  var el=document.getElementById("rasrs");
  el.innerHTML='<div class="result-box '+lvl+'">'+
    '<h2>'+ikon+' '+judul+'</h2>'+
    '<div class="result-row"><strong>Skor Total (18 soal):</strong>&nbsp;'+tot+'/72&nbsp;'+badge(tot<=11?"Rendah":tot<=15?"Sedang":"Tinggi",lvl==="hijau"?"ok":lvl==="kuning"?"warn":"danger")+'</div>'+
    '<div class="result-row"><strong>Bagian A (6 soal screening):</strong>&nbsp;'+bagA+'/6 positif&nbsp;'+badge(bagA>=4?"SKRINING POSITIF":"Negatif",bagA>=4?"danger":"ok")+'</div>'+
    '<div style="margin-top:12px;font-size:.9em;line-height:1.6">'+pesan+'</div>'+
    '<div class="warn-box">&#x26A0;&#xFE0F; <strong>Penting:</strong> Hasil ini BUKAN diagnosis. Hanya psikiater atau psikolog klinis yang dapat menegakkan diagnosis ADHD melalui evaluasi menyeluruh.</div>'+
    '<div class="btn-group"><button class="btn btn-print" onclick="window.print()">&#x1F5A8;&#xFE0F; Cetak Hasil</button></div>'+
  '</div>';
  el.classList.remove("hidden");
  el.scrollIntoView({behavior:"smooth"});
}

function hitungVand(key){
  var total=key==="guru"?35:33;
  if(Object.keys(A[key]).length<total){alert("Mohon jawab semua "+total+" pertanyaan!");return;}
  var inatensi=0,hiper=0,odd=0,anxdep=0,belajar=0;
  for(var i=0;i<9;i++)if(A[key][i]>=2)inatensi++;
  for(var i=9;i<18;i++)if(A[key][i]>=2)hiper++;
  for(var i=18;i<26;i++)if(A[key][i]>=2)odd++;
  for(var i=26;i<33;i++)if(A[key][i]>=2)anxdep++;
  if(key==="guru"){for(var i=33;i<35;i++)if(A[key][i]>=2)belajar++;}
  var adI=inatensi>=6,adH=hiper>=6;
  var positif=adI||adH;
  var tipe=adI&&adH?"ADHD Tipe Kombinasi":adI?"ADHD Tipe Inatensi Predominan":adH?"ADHD Tipe Hiperaktif-Impulsif Predominan":"Tidak Memenuhi Kriteria ADHD";
  var lvl=adI&&adH?"merah":positif?"kuning":"hijau";
  var ikon=lvl==="hijau"?"&#x2705;":lvl==="kuning"?"&#x26A0;&#xFE0F;":"&#x1F534;";
  var rid=key==="ortu"?"rortu":"rguru";
  var lawan=key==="ortu"?"guru":"orang tua";
  var el=document.getElementById(rid);
  el.innerHTML='<div class="result-box '+lvl+'">'+
    '<h2>'+ikon+' '+(positif?tipe:"Tidak Ada Indikasi ADHD Signifikan")+'</h2>'+
    '<div class="result-row"><strong>Inatensi (1-9):</strong>&nbsp;'+inatensi+'/9&nbsp;'+badge(adI?"&ge;6 POSITIF":"&lt;6 Negatif",adI?"danger":"ok")+'</div>'+
    '<div class="result-row"><strong>Hiperaktif-Impulsif (10-18):</strong>&nbsp;'+hiper+'/9&nbsp;'+badge(adH?"&ge;6 POSITIF":"&lt;6 Negatif",adH?"danger":"ok")+'</div>'+
    '<div class="result-row"><strong>ODD / Perilaku (19-26):</strong>&nbsp;'+odd+'/8&nbsp;'+badge(odd>=4?"&ge;4 Perlu Perhatian":"&lt;4 Normal",odd>=4?"warn":"ok")+'</div>'+
    '<div class="result-row"><strong>Kecemasan / Depresi (27-33):</strong>&nbsp;'+anxdep+'/7&nbsp;'+badge(anxdep>=3?"&ge;3 Perlu Evaluasi":"&lt;3 Normal",anxdep>=3?"warn":"ok")+'</div>'+
    (key==="guru"?'<div class="result-row"><strong>Kesulitan Belajar (34-35):</strong>&nbsp;'+belajar+'/2&nbsp;'+badge(belajar>=2?"Perlu Evaluasi":"Normal",belajar>=2?"warn":"ok")+'</div>':'')+
    '<div class="warn-box">&#x26A0;&#xFE0F; <strong>Penting:</strong> Hasil ini BUKAN diagnosis. Harus dikonfirmasi dengan kuesioner '+lawan+' dan evaluasi klinis oleh psikiater atau psikolog anak.</div>'+
    '<div class="btn-group"><button class="btn btn-print" onclick="window.print()">&#x1F5A8;&#xFE0F; Cetak Hasil</button></div>'+
  '</div>';
  el.classList.remove("hidden");
  el.scrollIntoView({behavior:"smooth"});
}

function buildAll(){
  buildQ("qasrs",asrsQ,asrsOpt,"asrs",18,"pt0","pf0",null);
  buildQ("qortu",vandQ,vandOpt,"ortu",33,"pt1","pf1",seksiOrtu);
  buildQ("qguru",vandGQ,vandOpt,"guru",35,"pt2","pf2",seksiGuru);
}
buildAll();
</script>
</body>
</html>"""

with open('/app/working/workspaces/default/skrining-adhd.html', 'w', encoding='utf-8') as f:
    f.write(html)
print("OK: skrining-adhd.html berhasil dibuat!")
