RunasSudo/bilirubin-calculator
1
Fork 0
Code Issues Pull Requests Activity

Gradual disclosure for RWH extra questions

Browse Source
This commit is contained in:
RunasSudo 2025-07-25 18:59:56 +10:00
parent 54afd196a2
commit 4820669558
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
2 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/bilirubin_app.js
View File

@ -21,6 +21,21 @@
function updateExtraQuestions() { function updateExtraQuestions() {
// Show or hide extra questions according to guideline and gestation // Show or hide extra questions according to guideline and gestation
let guideline = document.getElementById('guideline').value;
let gestation = document.getElementById('gestation').valueAsNumber;
if (guideline === 'rwh') {
document.getElementById('questions_rwh').classList.remove('hidden');
if (gestation >= 35) {
document.getElementById('questions_rwh_geq35').classList.remove('hidden');
document.getElementById('questions_rwh_lt35').classList.add('hidden');
} else {
document.getElementById('questions_rwh_geq35').classList.add('hidden');
document.getElementById('questions_rwh_lt35').classList.remove('hidden');
}
} else {
document.getElementById('questions_rwh').classList.add('hidden');
}
} }
updateExtraQuestions(); updateExtraQuestions();

42
src/index.html
View File

@ -29,6 +29,7 @@
<div class="max-w-2xl mx-auto my-4 px-4"> <div class="max-w-2xl mx-auto my-4 px-4">
<h1 class="text-gray-900 font-medium text-xl pb-3 mb-4 border-b border-gray-400">Neonatal jaundice treatment thresholds</h1> <h1 class="text-gray-900 font-medium text-xl pb-3 mb-4 border-b border-gray-400">Neonatal jaundice treatment thresholds</h1>
<div class="space-y-2"> <div class="space-y-2">
<!-- Guideline panel -->
<div class="sm:grid sm:grid-cols-3"> <div class="sm:grid sm:grid-cols-3">
<label for="guideline" class="text-sm font-medium text-gray-900 pt-1.5">Guideline:</label> <label for="guideline" class="text-sm font-medium text-gray-900 pt-1.5">Guideline:</label>
<select id="guideline" onchange="updateExtraQuestions();plotGraphData();updateBilirubin()" class="col-span-2 w-full rounded-md shadow-xs border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm"> <select id="guideline" onchange="updateExtraQuestions();plotGraphData();updateBilirubin()" class="col-span-2 w-full rounded-md shadow-xs border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
@ -36,6 +37,7 @@
<option value="rwh">Royal Women's Hospital (RWH)</option> <option value="rwh">Royal Women's Hospital (RWH)</option>
</select> </select>
</div> </div>
<!-- Gestational age panel -->
<div class="sm:grid sm:grid-cols-3"> <div class="sm:grid sm:grid-cols-3">
<label for="gestation" class="text-sm font-medium text-gray-900 pt-1.5">Gestational age:</label> <label for="gestation" class="text-sm font-medium text-gray-900 pt-1.5">Gestational age:</label>
<div class="col-span-2 relative rounded-md shadow-xs"> <div class="col-span-2 relative rounded-md shadow-xs">
@ -45,14 +47,51 @@
</div> </div>
</div> </div>
</div> </div>
<!-- RWH risk factors -->
<div id="questions_rwh" class="hidden">
<div class="sm:grid sm:grid-cols-3">
<label class="text-sm font-medium text-gray-900 pt-1.5">Risk factors:</label>
<div class="col-span-2 py-1.5 space-y-1">
<div class="flex items-center gap-x-2">
<input id="dat" type="checkbox" onchange="plotGraphData();updateBilirubin()" class="size-4 border-gray-300 ring-indigo-600 checked:border-indigo-600 checked:bg-indigo-600">
<label for="dat" class="text-sm text-gray-900">DAT positive</label>
</div>
<!-- 35 weeks and above -->
<div id="questions_rwh_geq35" class="hidden space-y-1">
<div class="flex items-center gap-x-2">
<input id="bw_lt2500" type="checkbox" onchange="plotGraphData();updateBilirubin()" class="size-4 border-gray-300 ring-indigo-600 checked:border-indigo-600 checked:bg-indigo-600">
<label for="bw_lt2500" class="text-sm text-gray-900">Birth weight &lt; 2500 g</label>
</div>
<div class="flex items-center gap-x-2">
<input id="fhx_rbc" type="checkbox" onchange="plotGraphData();updateBilirubin()" class="size-4 border-gray-300 ring-indigo-600 checked:border-indigo-600 checked:bg-indigo-600">
<label for="fhx_rbc" class="text-sm text-gray-900">Family history of red cell defects</label>
</div>
<div class="flex items-center gap-x-2">
<input id="bruising" type="checkbox" onchange="plotGraphData();updateBilirubin()" class="size-4 border-gray-300 ring-indigo-600 checked:border-indigo-600 checked:bg-indigo-600">
<label for="bruising" class="text-sm text-gray-900">Significant/extensive bruising</label>
</div>
</div>
<!-- 34 weeks and below -->
<div id="questions_rwh_lt35" class="hidden space-y-1">
<div class="flex items-center gap-x-2">
<input id="bw_lt1000" type="checkbox" onchange="plotGraphData();updateBilirubin()" class="size-4 border-gray-300 ring-indigo-600 checked:border-indigo-600 checked:bg-indigo-600">
<label for="bw_lt1000" class="text-sm text-gray-900">Birth weight &lt; 1000 g</label>
</div>
</div>
</div>
</div>
</div>
<!-- Time of birth -->
<div class="sm:grid sm:grid-cols-3"> <div class="sm:grid sm:grid-cols-3">
<label for="time_birth" class="text-sm font-medium text-gray-900 pt-1.5">Time of birth:</label> <label for="time_birth" class="text-sm font-medium text-gray-900 pt-1.5">Time of birth:</label>
<input id="time_birth" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-xs border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm"> <input id="time_birth" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-xs border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
</div> </div>
<!-- Time of measurement -->
<div class="sm:grid sm:grid-cols-3"> <div class="sm:grid sm:grid-cols-3">
<label for="time_measurement" class="text-sm font-medium text-gray-900 pt-1.5">Time of measurement:</label> <label for="time_measurement" class="text-sm font-medium text-gray-900 pt-1.5">Time of measurement:</label>
<input id="time_measurement" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-xs border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm"> <input id="time_measurement" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-xs border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
</div> </div>
<!-- Total bilirubin -->
<div class="sm:grid sm:grid-cols-3"> <div class="sm:grid sm:grid-cols-3">
<label for="bilirubin" class="text-sm font-medium text-gray-900 pt-1.5">Total bilirubin:</label> <label for="bilirubin" class="text-sm font-medium text-gray-900 pt-1.5">Total bilirubin:</label>
<div class="col-span-2 relative rounded-md shadow-xs"> <div class="col-span-2 relative rounded-md shadow-xs">
@ -63,12 +102,15 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Result panel -->
<div id="result" class="hidden"> <div id="result" class="hidden">
<p></p> <p></p>
</div> </div>
<!-- Graph -->
<div class="border-t border-gray-400 mt-4 pt-2"> <div class="border-t border-gray-400 mt-4 pt-2">
<canvas id="bilirubinChart" width="672" height="336"></canvas> <canvas id="bilirubinChart" width="672" height="336"></canvas>
</div> </div>
<!-- Footer -->
<div class="border-t border-gray-400 mt-4 pt-4 text-xs text-gray-600 space-y-2"> <div class="border-t border-gray-400 mt-4 pt-4 text-xs text-gray-600 space-y-2">
<p>Treatment thresholds as per: National Institute for Health and Clinical Excellence. Neonatal jaundice treatment threshold graphs. In: Jaundice in newborn babies under 28 days. London: National Institute for Health and Clinical Excellence; 2023. (NICE clinical guidelines; CG98). <a href="https://www.nice.org.uk/guidance/cg98" class="text-blue-500 hover:underline hover:text-blue-600">https://www.nice.org.uk/guidance/cg98</a></p> <p>Treatment thresholds as per: National Institute for Health and Clinical Excellence. Neonatal jaundice treatment threshold graphs. In: Jaundice in newborn babies under 28 days. London: National Institute for Health and Clinical Excellence; 2023. (NICE clinical guidelines; CG98). <a href="https://www.nice.org.uk/guidance/cg98" class="text-blue-500 hover:underline hover:text-blue-600">https://www.nice.org.uk/guidance/cg98</a></p>
<p>This tool is made available in the hope that it will be useful, but <em>WITHOUT ANY WARRANTY</em>; without even the implied warranty of <em>MERCHANTABILITY</em> or <em>FITNESS FOR A PARTICULAR PURPOSE</em>. Information provided in this tool is intended for reference by medical professionals. Nothing in this tool is intended to constitute medical advice.</p> <p>This tool is made available in the hope that it will be useful, but <em>WITHOUT ANY WARRANTY</em>; without even the implied warranty of <em>MERCHANTABILITY</em> or <em>FITNESS FOR A PARTICULAR PURPOSE</em>. Information provided in this tool is intended for reference by medical professionals. Nothing in this tool is intended to constitute medical advice.</p>