agdar/OT_Consultation_Form_Cleaned-V7.html
Marwan Alwali 2f1681b18c update
2025-11-11 13:44:48 +03:00

758 lines
43 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OT Consultation Form (OT-F-1)</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f8f9fa;
padding: 30px;
}
.form-section {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
h5 {
color: #2d2d2d;
}
.table td, .table th {
vertical-align: middle;
}
.section-label {
background-color: #9FDC67;
color: #fff;
font-weight: 600;
padding: 4px 12px;
border-radius: 5px;
display: inline-block;
margin-bottom: 8px;
}
.striped-table tbody tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.striped-table thead {
background-color: #e8f6df;
}
.question-box {
background-color: #f2fdf2;
border: 1px solid #9FDC67;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}
.question-box .form-check {
margin-right: 15px;
}
</style>
<script>
function limitCheckboxes(name, max) {
const checkboxes = document.querySelectorAll(`input[name='${name}']`);
checkboxes.forEach(cb => {
cb.addEventListener('change', () => {
const checked = [...checkboxes].filter(i => i.checked);
if (checked.length > max) {
cb.checked = false;
alert(`You can select a maximum of ${max} options.`);
}
});
});
}
document.addEventListener("DOMContentLoaded", () => {
limitCheckboxes('difficultyAreas[]', 3);
});
</script>
</head>
<body>
<div id="formContent">
<!-- Report Header (Not visible in browser, added to PDF only) -->
<div id="reportHeader" style="display:none;">
<div style="font-family: Arial, sans-serif; text-align: center; padding-bottom: 10px;">
<img src="img/Aqdar-Logo.png" style="max-height: 150px; margin-bottom: 10px;"/>
<h2 style="margin: 0;">Agdar Center for Developmental and Behavioral Disorders</h2>
<p style="margin: 0; font-size: 12px;">Riyadh, Saudi Arabia · +966-XXX-XXXXXXX · agdarcenter.com</p>
<hr style="margin-top: 10px;"/>
</div>
</div>
<!-- Section 1: Patient Information -->
<div class="form-section border border-success-subtle p-4 mt-3 mb-4 rounded shadow-sm">
<h5 class="fw-bold mb-3" style="border-left: 6px solid #9FDC67; padding-left: 10px;">1. Patient Information</h5>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label" for="patientName">Full Name</label>
<input class="form-control" id="patientName" name="patientName" placeholder="Enter full name" type="text"/>
</div>
<div class="col-md-3">
<label class="form-label" for="dob">Date of Birth</label>
<input class="form-control" id="dob" name="dob" type="date"/>
</div>
<div class="col-md-3">
<label class="form-label" for="gender">Gender</label>
<select class="form-select" id="gender" name="gender">
<option value="">Select</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label class="form-label" for="consultationDate">Date of Consultation</label>
<input class="form-control" id="consultationDate" name="consultationDate" type="date"/>
</div>
<div class="col-md-8">
<label class="form-label" for="therapistName">Therapist Name</label>
<input class="form-control" id="therapistName" name="therapistName" placeholder="Enter therapist name" type="text"/>
</div>
</div>
</div>
<!-- SECTION 2 -->
<div class="form-section pt-4 pb-4 border-bottom mb-4">
<h5 class="fw-bold mb-3" style="border-left: 6px solid #9FDC67; padding-left: 10px;">1. Reasons of Referral</h5>
<div class="mb-3">
<label class="form-label" for="referralReason">Select the reason for referral <span class="text-danger">*</span></label>
<select class="form-select" id="referralReason" name="referralReason" required="">
<option disabled="" selected="" value="">-- Please select --</option>
<option value="Diagnosis">Multi-disciplinary Team Diagnosis</option>
<option value="Consultation">Consultation</option>
<option value="Assessment">Assessment</option>
<option value="Intervention">Intervention</option>
<option value="ParentTraining">Parent Training</option>
</select>
</div>
<small class="form-text text-muted">Select only one option that best describes the primary reason for referral to OT.</small>
</div>
<!--
==============================================
SECTION 3: Areas of Difficulty
Agdar HIS System | OT Consultation Form (OT-F-1)
Style: Multi-select checkboxes with text inputs
Logic: Max 3 selections
==============================================
-->
<div class="form-section pt-4 pb-4 border-bottom mb-4">
<h5 class="fw-bold mb-3" style="border-left: 6px solid #9FDC67; padding-left: 10px;">2. Areas of Difficulty (Select up to 3)</h5>
<p class="mb-2">Please select up to <strong>3 areas</strong> where your child has shown difficulties in the past 3 months, and provide brief details for each selected item:</p>
<!-- Full list from Word document -->
<div class="row">
<div class="col-md-6">
<div class="form-check mb-3">
<input class="form-check-input" id="sensory" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="sensory">Sensory skills</label>
<input class="form-control form-control-sm mt-1" type="text"
id="sensoryDetails"
name="sensoryDetails"
placeholder="e.g., hypersensitivity, movement seeking">
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="fineMotor" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="fineMotor">Fine motor skills</label>
<input class="form-control form-control-sm mt-1" type="text"
id="fineMotorDetails"
name="fineMotorDetails"
placeholder="e.g., coloring, using scissors">
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="grossMotor" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="grossMotor">Gross motor skills</label>
<input class="form-control form-control-sm mt-1" type="text"
id="grossMotorDetails"
name="grossMotorDetails"
placeholder="e.g., running, stairs, ball play">
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="oralMotor" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="oralMotor">Oral motor / Feeding</label>
<input class="form-control form-control-sm mt-1" type="text"
id="oralMotorDetails"
name="oralMotorDetails"
placeholder="e.g., chewing, straw drinking">
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="adl" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="adl">ADL Activities</label>
<input class="form-control form-control-sm mt-1" type="text"
id="adlDetails"
name="adlDetails"
placeholder="e.g., dressing, toileting">
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="handwriting" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="handwriting">Handwriting</label>
<input class="form-control form-control-sm mt-1" type="text"
id="handwritingDetails"
name="handwritingDetails"
placeholder="e.g., forming letters">
</div>
</div>
<div class="col-md-6">
<div class="form-check mb-3">
<input class="form-check-input" id="play" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="play">Play</label>
<input class="form-control form-control-sm mt-1" type="text"
id="playDetails"
name="playDetails"
placeholder="e.g., pretend play, object use">
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="social" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="social">Social skills</label>
<input class="form-control form-control-sm mt-1" type="text"
id="socialDetails"
name="socialDetails"
placeholder="e.g., turn-taking, sharing">
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="selfInjury" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="selfInjury">Self-injurious behavior</label>
<input class="form-control form-control-sm mt-1" type="text"
id="selfInjuryDetails"
name="selfInjuryDetails"
placeholder="e.g., head banging">
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="disorganized" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="disorganized">Disorganized behaviors</label>
<input class="form-control form-control-sm mt-1" type="text"
id="disorganizedDetails"
name="disorganizedDetails"
placeholder="e.g., aggression, transitions">
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="homeRec" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="homeRec">Home recommendations</label>
<input class="form-control form-control-sm mt-1" type="text"
id="homeRecDetails"
name="homeRecDetails"
placeholder="e.g., sensory equipment">
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="parentEd" name="difficultyAreas[]" type="checkbox">
<label class="form-check-label" for="parentEd">Parental education</label>
<input class="form-control form-control-sm mt-1" type="text"
id="parentEdDetails"
name="parentEdDetails"
placeholder="e.g., workshops, strategies">
</div>
</div>
</div>
<small class="form-text text-muted mt-2">Maximum 3 selections allowed.</small>
</div>
<!-- SECTION 4: Developmental History -->
<div class="form-section pt-4 pb-4 border-bottom mb-4">
<h5 class="fw-bold mb-3" style="border-left: 6px solid #9FDC67; padding-left: 10px;">3. Developmental History</h5>
<p>Please provide approximate ages or observations related to your childs developmental milestones:</p>
<table class="table table-bordered table-striped table-sm align-middle">
<thead class="table-light">
<tr>
<th style="width: 60%;">Milestone</th>
<th>Age / Notes</th>
</tr>
</thead>
<tbody>
<tr><td>Controlling head</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_headControl" name="milestone_headControl" /></td></tr>
<tr><td>Reaching for object</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_reachObject" name="milestone_reachObject" /></td></tr>
<tr><td>Rolling over both ways</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_rollOver" name="milestone_rollOver" /></td></tr>
<tr><td>Finger feeding</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_fingerFeed" name="milestone_fingerFeed" /></td></tr>
<tr style="border-left: 4px solid #9FDC67;"><td><strong>Sitting alone</strong> <span class="text-danger">*</span></td>
<td><input class="form-control form-control-sm" type="text" id="milestone_sitting" name="milestone_sitting" required /></td></tr>
<tr><td>Pulling to stand</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_pullStand" name="milestone_pullStand" /></td></tr>
<tr style="border-left: 4px solid #9FDC67;"><td><strong>Creeping on all fours</strong> <span class="text-danger">*</span></td>
<td><input class="form-control form-control-sm" type="text" id="milestone_crawling" name="milestone_crawling" required /></td></tr>
<tr><td>Drawing a circle</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_drawCircle" name="milestone_drawCircle" /></td></tr>
<tr><td>Eating with spoon</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_spoon" name="milestone_spoon" /></td></tr>
<tr><td>Cutting with scissors</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_cutScissors" name="milestone_cutScissors" /></td></tr>
<tr style="border-left: 4px solid #9FDC67;"><td><strong>Walking</strong> <span class="text-danger">*</span></td>
<td><input class="form-control form-control-sm" type="text" id="milestone_walking" name="milestone_walking" required /></td></tr>
<tr><td>Drinking from a cup</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_drinkCup" name="milestone_drinkCup" /></td></tr>
<tr><td>Jumping</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_jump" name="milestone_jump" /></td></tr>
<tr><td>Hopping</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_hop" name="milestone_hop" /></td></tr>
<tr><td>Hopping on one foot</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_hopOneFoot" name="milestone_hopOneFoot" /></td></tr>
<tr><td>Riding a bike</td>
<td><input class="form-control form-control-sm" type="text" id="milestone_bike" name="milestone_bike" /></td></tr>
</tbody>
</table>
<hr class="mt-4 mb-3"/>
<h6 class="fw-semibold text-muted">Motor Learning &amp; Regression</h6>
<fieldset class="mb-3">
<legend class="form-label">Does your child have difficulty learning new motor skills?</legend>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="motorYes" name="motorLearning" type="radio" value="yes"/>
<label class="form-check-label" for="motorYes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="motorNo" name="motorLearning" type="radio" value="no"/>
<label class="form-check-label" for="motorNo">No</label>
</div>
</div>
<input class="form-control form-control-sm mt-2"
type="text"
id="motorLearningDetails"
name="motorLearningDetails"
placeholder="If yes, describe the difficulties">
</fieldset>
<fieldset class="mb-3">
<legend class="form-label">Did the child lose any previously gained motor skills?</legend>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="regression" name="motorLoss" type="radio" value="yes"/>
<label class="form-check-label" for="regression">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="lossNo" name="motorLoss" type="radio" value="no"/>
<label class="form-check-label" for="lossNo">No</label>
</div>
</div>
<input class="form-control form-control-sm mt-2"
type="text"
id="regressionDetails"
name="regressionDetails"
placeholder="If yes, describe the regression">
</fieldset>
</div>
<!-- SECTION 5 -->
<div class="form-section pt-4 pb-4 border-bottom mb-4">
<h5 class="fw-bold mb-3" style="border-left: 6px solid #9FDC67; padding-left: 10px;">4. Self-Help Skills</h5>
<p>Please indicate whether your child could perform the following tasks during the specified age range.</p>
<table class="table table-bordered table-sm striped-table">
<thead class="table-light">
<tr>
<th style="width: 15%;">Age Range</th>
<th style="width: 45%;">Task</th>
<th class="text-center" style="width: 10%;">Yes</th>
<th class="text-center" style="width: 10%;">No</th>
<th style="width: 20%;">Comments</th>
</tr>
</thead>
<tbody>
<tr><td><span class="section-label">8 9 months</span></td><td>Grasps small items with thumb and index finger</td><td class="text-center"><input name="grasp_8_9" type="radio" value="yes"/></td><td class="text-center"><input name="grasp_8_9" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="grasp_8_9_note" name="grasp_8_9_note" /></td></td></tr>
<tr><td></td><td>Finger feeds self</td><td class="text-center"><input name="fingerfeed_8_9" type="radio" value="yes"/></td><td class="text-center"><input name="fingerfeed_8_9" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="fingerfeed_8_9_note" name="fingerfeed_8_9_note" /></td></td></tr>
<tr><td><span class="section-label">12 18 months</span></td><td>Holds a spoon</td><td class="text-center"><input name="holdspoon_12_18" type="radio" value="yes"/></td><td class="text-center"><input name="holdspoon_12_18" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="holdspoon_12_18_note" name="holdspoon_12_18_note" /></td></td></tr>
<tr><td></td><td>Removes socks</td><td class="text-center"><input name="removesocks_12_18" type="radio" value="yes"/></td><td class="text-center"><input name="removesocks_12_18" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="removesocks_12_18_note" name="removesocks_12_18_note" /></td></td></tr>
<tr><td></td><td>Notifies parent that diapers are soiled</td><td class="text-center"><input name="notifydiaper_12_18" type="radio" value="yes"/></td><td class="text-center"><input name="notifydiaper_12_18" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="notifydiaper_12_18_note" name="notifydiaper_12_18_note" /></td></td></tr>
<tr><td></td><td>Cooperates with dressing</td><td class="text-center"><input name="cooperatedress_12_18" type="radio" value="yes"/></td><td class="text-center"><input name="cooperatedress_12_18" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="cooperatedress_12_18_note" name="cooperatedress_12_18_note" /></td></td></tr>
<tr><td><span class="section-label">18 24 months</span></td><td>Holds and drinks from a cup with minimal spilling</td><td class="text-center"><input name="feedsSelf_18_24" type="radio" value="yes"/></td><td class="text-center"><input name="feedsSelf_18_24" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="feedsSelf_18_24_note" name="feedsSelf_18_24_note" /></td></td></tr>
<tr><td></td><td>Able to load spoon and bring to mouth with moderate spilling</td><td class="text-center"><input name="usesSpoon_18_24" type="radio" value="yes"/></td><td class="text-center"><input name="usesSpoon_18_24" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="usesSpoon_18_24_note" name="usesSpoon_18_24_note" /></td></td></tr>
<tr><td><span class="section-label">2 3 years</span></td><td>Unzips zippers and unbuttons large buttons</td><td class="text-center"><input name="dresses_2_3" type="radio" value="yes"/></td><td class="text-center"><input name="dresses_2_3" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="dresses_2_3_note" name="dresses_2_3_note" /></td></td></tr>
<tr><td></td><td>Requires assistance to manage pullover clothing</td><td class="text-center"><input name="removesShoes_2_3" type="radio" value="yes"/></td><td class="text-center"><input name="removesShoes_2_3" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="removesShoes_2_3_note" name="removesShoes_2_3_note" /></td></td></tr>
<tr><td></td><td>Able to take off pants, coat, socks and shoes without fasteners</td><td class="text-center"><input name="toileting_2_3" type="radio" value="yes"/></td><td class="text-center"><input name="toileting_2_3" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="toileting_2_3_note" name="toileting_2_3_note" /></td></td></tr>
<tr><td></td><td>Able to feed self with little to no spilling</td><td class="text-center"><input name="feedsInd_2_3" type="radio" value="yes"/></td><td class="text-center"><input name="feedsInd_2_3" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="feedsInd_2_3_note" name="feedsInd_2_3_note" /></td></td></tr>
<tr><td><span class="section-label">3 4 years</span></td><td>Independently dresses self, may need help with fasteners</td><td class="text-center"><input name="dressesSelf_3_4" type="radio" value="yes"/></td><td class="text-center"><input name="dressesSelf_3_4" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="dressesSelf_3_4_note" name="dressesSelf_3_4_note" /></td></td></tr>
<tr><td></td><td>Independent with toilet control and notification</td><td class="text-center"><input name="independentToileting_3_4" type="radio" value="yes"/></td><td class="text-center"><input name="independentToileting_3_4" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="independentToileting_3_4_note" name="independentToileting_3_4_note" /></td></td></tr>
<tr><td><span class="section-label">5 6 years</span></td><td>Independent with all dressing, including shoe tying</td><td class="text-center"><input name="dressingComplete_5_6" type="radio" value="yes"/></td><td class="text-center"><input name="dressingComplete_5_6" type="radio" value="no"/></td><td><td><input class="form-control form-control-sm" type="text" id="dressingComplete_5_6_note" name="dressingComplete_5_6_note" /></td></td></tr>
</tbody>
</table>
<small class="form-text text-muted">If "No" is selected, please provide a brief explanation in the comment column.</small>
</div>
<!-- SECTION 6 -->
<div class="form-section pt-4 pb-4 border-bottom mb-4">
<h5 class="fw-bold mb-3" style="border-left: 6px solid #9FDC67; padding-left: 10px;">5. Eating / Feeding</h5>
<p>Please respond to the following regarding your childs eating habits:</p>
<div class="question-box">
<fieldset class="mb-3">
<legend class="form-label fw-semibold">Does your child eat a healthy variety of food?</legend><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" id="healthyYes" name="varietyHealthy" type="radio" value="yes"/>
<label class="form-check-label" for="healthyYes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="healthyNo" name="varietyHealthy" type="radio" value="no"/>
<label class="form-check-label" for="healthyNo">No</label>
</div>
</fieldset>
<fieldset class="mb-3">
<legend class="form-label fw-semibold">Does your child eat a variety of textures and flavors?</legend><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" id="texturesYes" name="varietyTextures" type="radio" value="yes"/>
<label class="form-check-label" for="texturesYes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="texturesNo" name="varietyTextures" type="radio" value="no"/>
<label class="form-check-label" for="texturesNo">No</label>
</div>
</fieldset>
<fieldset class="mb-3">
<legend class="form-label fw-semibold">Does your child easily participate in family meals?</legend><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" id="mealsYes" name="familyMeals" type="radio" value="yes"/>
<label class="form-check-label" for="mealsYes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="mealsNo" name="familyMeals" type="radio" value="no"/>
<label class="form-check-label" for="mealsNo">No</label>
</div>
</fieldset>
</div>
<div class="mb-3">
<label class="form-label fw-semibold" for="eatingComments">Comments, concerns, or questions related to eating:</label>
<textarea class="form-control" id="eatingComments" name="eatingComments" placeholder="Optional notes..." rows="3"></textarea>
</div>
</div>
<!-- Section 7: Current and Previous Behaviors -->
<div class="form-section pt-4 pb-4 border-bottom mb-4">
<h5 class="fw-bold mb-3" style="border-left: 6px solid #9FDC67; padding-left: 10px;">6. Current and Previous Behaviors</h5>
<p>Please select Yes / No / Sometimes for each behavior. Add comments where applicable.</p>
<div class="mb-4">
<span class="section-label">Infant Behavior (First 12 Months)</span>
<table class="table table-bordered table-sm striped-table">
<thead>
<tr>
<th>Behavior</th>
<th class="text-center">Yes</th>
<th class="text-center">No</th>
<th class="text-center">Sometimes</th>
</tr>
</thead>
<tbody>
<tr><td>Cried a lot, fussy, irritable</td><td class="text-center"><input name="infant_cried" type="radio" value="yes"/></td><td class="text-center"><input name="infant_cried" type="radio" value="no"/></td><td class="text-center"><input name="infant_cried" type="radio" value="sometimes"/></td></tr>
<tr><td>Was good, non-demanding</td><td class="text-center"><input name="infant_good" type="radio" value="yes"/></td><td class="text-center"><input name="infant_good" type="radio" value="no"/></td><td class="text-center"><input name="infant_good" type="radio" value="sometimes"/></td></tr>
<tr><td>Was alert</td><td class="text-center"><input name="infant_alert" type="radio" value="yes"/></td><td class="text-center"><input name="infant_alert" type="radio" value="no"/></td><td class="text-center"><input name="infant_alert" type="radio" value="sometimes"/></td></tr>
<tr><td>Was quiet</td><td class="text-center"><input name="infant_quiet" type="radio" value="yes"/></td><td class="text-center"><input name="infant_quiet" type="radio" value="no"/></td><td class="text-center"><input name="infant_quiet" type="radio" value="sometimes"/></td></tr>
<tr><td>Was passive</td><td class="text-center"><input name="infant_passive" type="radio" value="yes"/></td><td class="text-center"><input name="infant_passive" type="radio" value="no"/></td><td class="text-center"><input name="infant_passive" type="radio" value="sometimes"/></td></tr>
<tr><td>Was active</td><td class="text-center"><input name="infant_active" type="radio" value="yes"/></td><td class="text-center"><input name="infant_active" type="radio" value="no"/></td><td class="text-center"><input name="infant_active" type="radio" value="sometimes"/></td></tr>
<tr><td>Liked being held</td><td class="text-center"><input name="infant_likedHeld" type="radio" value="yes"/></td><td class="text-center"><input name="infant_likedHeld" type="radio" value="no"/></td><td class="text-center"><input name="infant_likedHeld" type="radio" value="sometimes"/></td></tr>
<tr><td>Resisted being held</td><td class="text-center"><input name="infant_resistedHeld" type="radio" value="yes"/></td><td class="text-center"><input name="infant_resistedHeld" type="radio" value="no"/></td><td class="text-center"><input name="infant_resistedHeld" type="radio" value="sometimes"/></td></tr>
<tr><td>Was floppy when held</td><td class="text-center"><input name="infant_floppy" type="radio" value="yes"/></td><td class="text-center"><input name="infant_floppy" type="radio" value="no"/></td><td class="text-center"><input name="infant_floppy" type="radio" value="sometimes"/></td></tr>
<tr><td>Was tense when held</td><td class="text-center"><input name="infant_tense" type="radio" value="yes"/></td><td class="text-center"><input name="infant_tense" type="radio" value="no"/></td><td class="text-center"><input name="infant_tense" type="radio" value="sometimes"/></td></tr>
<tr><td>Had good sleep patterns</td><td class="text-center"><input name="infant_sleepGood" type="radio" value="yes"/></td><td class="text-center"><input name="infant_sleepGood" type="radio" value="no"/></td><td class="text-center"><input name="infant_sleepGood" type="radio" value="sometimes"/></td></tr>
<tr><td>Had irregular sleep patterns</td><td class="text-center"><input name="infant_sleepIrregular" type="radio" value="yes"/></td><td class="text-center"><input name="infant_sleepIrregular" type="radio" value="no"/></td><td class="text-center"><input name="infant_sleepIrregular" type="radio" value="sometimes"/></td></tr>
</tbody>
</table>
<label class="form-label mt-2" for="infantComments">Comments:</label>
<textarea class="form-control" id="infantComments" name="infantComments" placeholder="Optional details..." rows="2"></textarea>
</div>
<div class="mb-4">
<span class="section-label">Current Behavior</span>
<table class="table table-bordered table-sm striped-table">
<thead>
<tr>
<th>Behavior</th>
<th class="text-center">Yes</th>
<th class="text-center">No</th>
<th class="text-center">Sometimes</th>
</tr>
</thead>
<tbody>
<tr><td>Is mostly quiet</td><td class="text-center"><input name="current_quiet" type="radio" value="yes"/></td><td class="text-center"><input name="current_quiet" type="radio" value="no"/></td><td class="text-center"><input name="current_quiet" type="radio" value="sometimes"/></td></tr>
<tr><td>Is overly active</td><td class="text-center"><input name="current_active" type="radio" value="yes"/></td><td class="text-center"><input name="current_active" type="radio" value="no"/></td><td class="text-center"><input name="current_active" type="radio" value="sometimes"/></td></tr>
<tr><td>Tires easily</td><td class="text-center"><input name="current_tires" type="radio" value="yes"/></td><td class="text-center"><input name="current_tires" type="radio" value="no"/></td><td class="text-center"><input name="current_tires" type="radio" value="sometimes"/></td></tr>
<tr><td>Talks constantly</td><td class="text-center"><input name="current_talks" type="radio" value="yes"/></td><td class="text-center"><input name="current_talks" type="radio" value="no"/></td><td class="text-center"><input name="current_talks" type="radio" value="sometimes"/></td></tr>
<tr><td>Is impulsive</td><td class="text-center"><input name="current_impulsive" type="radio" value="yes"/></td><td class="text-center"><input name="current_impulsive" type="radio" value="no"/></td><td class="text-center"><input name="current_impulsive" type="radio" value="sometimes"/></td></tr>
<tr><td>Is restless</td><td class="text-center"><input name="current_restless" type="radio" value="yes"/></td><td class="text-center"><input name="current_restless" type="radio" value="no"/></td><td class="text-center"><input name="current_restless" type="radio" value="sometimes"/></td></tr>
<tr><td>Is stubborn</td><td class="text-center"><input name="current_stubborn" type="radio" value="yes"/></td><td class="text-center"><input name="current_stubborn" type="radio" value="no"/></td><td class="text-center"><input name="current_stubborn" type="radio" value="sometimes"/></td></tr>
<tr><td>Is resistant to change</td><td class="text-center"><input name="current_resistant" type="radio" value="yes"/></td><td class="text-center"><input name="current_resistant" type="radio" value="no"/></td><td class="text-center"><input name="current_resistant" type="radio" value="sometimes"/></td></tr>
<tr><td>Fights frequently</td><td class="text-center"><input name="current_fights" type="radio" value="yes"/></td><td class="text-center"><input name="current_fights" type="radio" value="no"/></td><td class="text-center"><input name="current_fights" type="radio" value="sometimes"/></td></tr>
<tr><td>Exhibits frequent temper tantrums</td><td class="text-center"><input name="current_tantrums" type="radio" value="yes"/></td><td class="text-center"><input name="current_tantrums" type="radio" value="no"/></td><td class="text-center"><input name="current_tantrums" type="radio" value="sometimes"/></td></tr>
<tr><td>Is clumsy</td><td class="text-center"><input name="current_clumsy" type="radio" value="yes"/></td><td class="text-center"><input name="current_clumsy" type="radio" value="no"/></td><td class="text-center"><input name="current_clumsy" type="radio" value="sometimes"/></td></tr>
<tr><td>Is frustrated easily</td><td class="text-center"><input name="current_frustrated" type="radio" value="yes"/></td><td class="text-center"><input name="current_frustrated" type="radio" value="no"/></td><td class="text-center"><input name="current_frustrated" type="radio" value="sometimes"/></td></tr>
</tbody>
</table>
<label class="form-label mt-2" for="currentComments">Comments:</label>
<textarea class="form-control" id="currentComments" name="currentComments" placeholder="Optional details..." rows="2"></textarea>
</div>
</div>
<!-- Section 8: Recommendation -->
<div class="form-section pt-4 pb-4 border-bottom mb-4">
<h5 class="fw-bold mb-3" style="border-left: 6px solid #9FDC67; padding-left: 10px;">7. Recommendation</h5>
<p>Please provide your professional recommendation based on the consultation findings:</p>
<div class="mb-3">
<label class="form-label fw-semibold" for="recommendation">Recommendation</label>
<textarea class="form-control border-success border-2" id="recommendation" name="recommendation" placeholder="Write your recommendation here..." required="" rows="5"></textarea>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label fw-semibold" for="therapistName">Therapist Name</label>
<input class="form-control" id="therapistName_1" name="therapistName_1" placeholder="Therapist full name" required="" type="text"/>
</div>
<div class="col-md-6 mb-3">
<label class="form-label fw-semibold" for="consultationDate">Date</label>
<input class="form-control" id="consultationDate_1" name="consultationDate" required="" type="date"/>
</div>
</div>
</div>
<!-- Section 9: Action Buttons -->
<div class="form-section text-center border border-success-subtle p-4 mt-3 mb-4 rounded shadow-sm no-print">
<h6 class="fw-bold mb-3 text-success">Actions</h6>
<button class="btn btn-outline-secondary me-2" onclick="saveDraft()" type="button">💾 Save Draft</button>
<button class="btn btn-success me-2" onclick="exportToPDF()" type="button">📄 Export to PDF</button>
<button class="btn btn-primary" onclick="calculateScore()" type="button">📊 Calculate Score &amp; Recommendation</button>
</div>
<!-- Section 10: Smart Results Output -->
<div class="form-section mt-4 border border-success-subtle p-4 rounded shadow-sm" id="resultsSection" style="display:none;">
<h5 class="fw-bold mb-3" style="border-left: 6px solid #9FDC67; padding-left: 10px;">9. Smart Results</h5>
<div class="mb-3" id="scoreSummary"></div>
<canvas height="200" id="resultsChart"></canvas>
<div class="mt-4">
<label class="form-label fw-bold" for="scoreSummaryText">Plain Text Scoring Summary</label>
<textarea class="form-control" id="scoreSummaryText" name="scoreSummaryText" readonly="" rows="6"></textarea>
</div>
<div class="text-end mt-3 no-print">
<button class="btn btn-outline-success" onclick="downloadSmartResultsPDF()">⬇️ Download Smart Results as PDF</button>
</div>
</div>
</div> <!-- end of #formContent -->
<style>
.no-print {
display: block;
}
@media print {
.no-print {
display: none !important;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const today = new Date().toISOString().split('T')[0];
const consultationDate = document.getElementById('consultationDate');
if (consultationDate) consultationDate.value = today;
const therapistName = localStorage.getItem('agdarTherapistName') || 'Moneer Zakaria';
const therapistInput = document.getElementById('therapistName');
if (therapistInput && !therapistInput.value) therapistInput.value = therapistName;
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function exportToPDF() {
const original = document.getElementById("formContent");
const element = original.cloneNode(true);
// Reveal existing report header inside the cloned form
const header = element.querySelector("#reportHeader");
if (header) header.style.display = "block";
// Remove no-print elements
element.querySelectorAll(".no-print").forEach(e => e.remove());
const opt = {
margin: 0.5,
filename: 'OT_Consultation_Form.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true, logging: false },
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
};
html2pdf().set(opt).from(element).save();
}
</script>
<script>
window.jspdf = window.jspdf || {};
window.jspdf.jsPDF = window.jspdf.jsPDF || window.jspdf.jspdf?.jsPDF;
</script>
<!-- Section 11: Clinician Signature -->
<div class="form-section border border-success-subtle p-4 mt-3 mb-4 rounded shadow-sm">
<h5 class="fw-bold mb-3" style="border-left: 6px solid #9FDC67; padding-left: 10px;">10. Clinician Signature</h5>
<div class="row">
<div class="col-md-6">
<label class="form-label" for="clinicianName">Clinician Full Name</label>
<input class="form-control" id="clinicianName" name="clinicianName" placeholder="Enter full name" type="text"/>
</div>
<div class="col-md-6">
<label class="form-label" for="clinicianSignature">Digital Signature (type or draw)</label>
<input class="form-control" id="clinicianSignature" name="clinicianSignature" placeholder="Type full name as signature" type="text"/>
</div>
</div>
</div>
<!-- Section 12: Scoring Logic & Auto-Recommendation -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let resultsChart;
function calculateScore() {
document.querySelector("button[onclick='calculateScore()']").disabled = true;
let sections = {
selfHelp: 0,
behavior: 0,
developmental: 0,
eating: 0
};
const selfHelpNames = [
'grasp_8_9', 'fingerfeed_8_9',
'holdspoon_12_18', 'removesocks_12_18', 'notifydiaper_12_18', 'cooperatedress_12_18',
'feedsSelf_18_24', 'usesSpoon_18_24',
'dresses_2_3', 'removesShoes_2_3', 'toileting_2_3', 'feedsInd_2_3',
'dressesSelf_3_4', 'independentToileting_3_4',
'dressingComplete_5_6'
];
selfHelpNames.forEach(name => {
const selected = document.querySelector(`input[name='${name}']:checked`);
if (selected) sections.selfHelp += selected.value === 'yes' ? 2 : selected.value === 'sometimes' ? 1 : 0;
});
const behaviorNames = [
'infant_cried', 'infant_good', 'infant_alert', 'infant_quiet', 'infant_passive', 'infant_active',
'infant_likedHeld', 'infant_resistedHeld', 'infant_floppy', 'infant_tense', 'infant_sleepGood', 'infant_sleepIrregular',
'current_quiet', 'current_active', 'current_tires', 'current_talks', 'current_impulsive', 'current_restless',
'current_stubborn', 'current_resistant', 'current_fights', 'current_tantrums', 'current_clumsy', 'current_frustrated'
];
behaviorNames.forEach(name => {
const selected = document.querySelector(`input[name='${name}']:checked`);
if (selected) sections.behavior += selected.value === 'yes' ? 2 : selected.value === 'sometimes' ? 1 : 0;
});
const milestoneIds = ['milestone_sitting', 'milestone_crawling', 'milestone_walking'];
milestoneIds.forEach(id => {
const input = document.getElementById(id);
if (input && input.value.trim() !== '') sections.developmental += 2;
});
const eatingNames = ['varietyHealthy', 'varietyTextures', 'familyMeals'];
eatingNames.forEach(name => {
const selected = document.querySelector(`input[name='${name}']:checked`);
if (selected) sections.eating += selected.value === 'yes' ? 2 : selected.value === 'sometimes' ? 1 : 0;
});
const criticalFlags = [];
const flagChecks = [
{ id: 'regression', label: 'Developmental regression reported' },
{ id: 'infant_sleepIrregular', label: 'Irregular sleep patterns (infancy)' },
{ id: 'varietyTextures', label: 'Feeding difficulty with textures' },
{ id: 'current_fights', label: 'Frequent aggressive behavior (fights)' },
{ id: 'current_tantrums', label: 'Frequent temper tantrums' },
{ id: 'current_restless', label: 'High restlessness and inattention' },
{ id: 'current_resistant', label: 'Strong resistance to change or routines' }
];
flagChecks.forEach(flag => {
const selected = document.querySelector(`input[name='${flag.id}']:checked`);
if (selected && selected.value === 'yes') criticalFlags.push(flag.label);
});
const totalScore = sections.selfHelp + sections.behavior + sections.developmental + sections.eating;
let level = "";
let recommendationText = "";
if (totalScore <= 30) {
level = "⚠️ Needs Immediate Attention";
recommendationText = "The child presents significant delays or difficulties across multiple developmental domains. Immediate referral to Occupational Therapy and interdisciplinary evaluation is recommended.";
} else if (totalScore <= 60) {
level = "⚠ Moderate Difficulty - Follow-Up Needed";
recommendationText = "The child shows moderate concerns that warrant intervention. Recommend starting OT sessions and monitoring progress within 24 months.";
} else {
level = "✅ Age-Appropriate Skills";
recommendationText = "Child demonstrates age-appropriate functioning in assessed areas. Recommend regular developmental screening as part of preventive care.";
}
if (criticalFlags.length > 0) {
recommendationText += "\n\n⚠ Additional concerns flagged: " + criticalFlags.join('; ') + ". These should be reviewed in the full evaluation.";
}
let flagsHTML = "";
if (criticalFlags.length > 0) {
flagsHTML += `<div class='alert alert-danger'><strong>⚠ Critical Concerns:</strong><ul>`;
criticalFlags.forEach(f => { flagsHTML += `<li>${f}</li>`; });
flagsHTML += `</ul></div>`;
}
document.getElementById('resultsSection').style.display = 'block';
document.getElementById('scoreSummary').innerHTML = `
${flagsHTML}
<p><strong>Self-Help Score:</strong> ${sections.selfHelp} / 24</p>
<p><strong>Behavior Score:</strong> ${sections.behavior} / 48</p>
<p><strong>Developmental History Score:</strong> ${sections.developmental} / 6</p>
<p><strong>Eating / Feeding Score:</strong> ${sections.eating} / 6</p>
<p><strong>Total Score:</strong> ${totalScore}</p>
<p><strong>Interpretation:</strong> ${level}</p>
`;
document.getElementById('recommendation').value = recommendationText;
const scoreSummaryText = `
Self-Help Score: ${sections.selfHelp} / 24
Behavior Score: ${sections.behavior} / 48
Developmental History Score: ${sections.developmental} / 6
Eating / Feeding Score: ${sections.eating} / 6
Total Score: ${totalScore}
Interpretation: ${level}`.trim();
const textBox = document.getElementById('scoreSummaryText');
if (textBox) textBox.value = scoreSummaryText;
const ctx = document.getElementById('resultsChart').getContext('2d');
if (resultsChart) resultsChart.destroy();
resultsChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Self-Help', 'Behavior', 'Developmental', 'Eating'],
datasets: [{
label: 'Score',
data: [sections.selfHelp, sections.behavior, sections.developmental, sections.eating],
backgroundColor: ['#9FDC67', '#9FDC67', '#9FDC67', '#9FDC67'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'Score' },
max: 50
},
x: {
title: { display: true, text: 'Category' }
}
},
plugins: {
legend: { display: false },
tooltip: { enabled: true }
}
}
});
document.querySelector("button[onclick='calculateScore()']").disabled = false;
}
</script>
</body>
<!-- end of #formContent -->
</html>