<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Questionnaire - Accompagnement Psychologique des Femmes Enceintes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
* {
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
font-size: 24px;
}
h2 {
color: #3498db;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-top: 30px;
}
.section {
margin-bottom: 30px;
}
.question {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
}
.checkbox-group, .radio-group {
margin: 10px 0;
}
.checkbox-group label, .radio-group label {
display: flex;
align-items: center;
margin-bottom: 8px;
font-weight: normal;
cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
margin-right: 10px;
}
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
min-height: 100px;
resize: vertical;
}
.btn {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
display: block;
margin: 30px auto;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #2980b9;
}
.hidden {
display: none;
}
.pdf-preview {
border: 1px solid #ddd;
padding: 20px;
margin-top: 20px;
background-color: white;
}
.success-message {
background-color: #d4edda;
color: #155724;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
text-align: center;
}
.other-input {
margin-left: 10px;
padding: 5px;
width: 200px;
}
@media print {
body * {
visibility: hidden;
}
.pdf-preview, .pdf-preview * {
visibility: visible;
}
.pdf-preview {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Questionnaire : L'importance de l'accompagnement psychologique des femmes enceintes durant la grossesse</h1>
<form id="questionnaireForm">
<div class="section">
<h2>I. Identification</h2>
<div class="question">
<label for="age">1. Âge :</label>
<input type="number" id="age" name="age" min="15" max="50" required> ans
</div>
<div class="question">
<label>2. Situation matrimoniale :</label>
<div class="radio-group">
<label><input type="radio" name="matrimonial" value="Célibataire" required> Célibataire</label>
<label><input type="radio" name="matrimonial" value="Mariée"> Mariée</label>
<label><input type="radio" name="matrimonial" value="En union libre"> En union libre</label>
<label><input type="radio" name="matrimonial" value="Divorcée"> Divorcée</label>
<label><input type="radio" name="matrimonial" value="Veuve"> Veuve</label>
</div>
</div>
<div class="question">
<label>3. Niveau d'instruction :</label>
<div class="radio-group">
<label><input type="radio" name="education" value="Primaire" required> Primaire</label>
<label><input type="radio" name="education" value="Secondaire"> Secondaire</label>
<label><input type="radio" name="education" value="Supérieur"> Supérieur</label>
</div>
</div>
<div class="question">
<label for="pregnancies">4. Nombre de grossesses :</label>
<input type="number" id="pregnancies" name="pregnancies" min="1" max="20" required>
</div>
<div class="question">
<label for="children">5. Nombre d'enfants vivants :</label>
<input type="number" id="children" name="children" min="0" max="20" required>
</div>
<div class="question">
<label for="gestationalAge">6. Âge gestationnel actuel :</label>
<input type="number" id="gestationalAge" name="gestationalAge" min="1" max="42" required> semaines
</div>
</div>
<div class="section">
<h2>II. Aspects psychologiques de la grossesse</h2>
<div class="question">
<label>7. Comment avez-vous vécu le début de votre grossesse ?</label>
<div class="radio-group">
<label><input type="radio" name="pregnancyExperience" value="Avec joie" required> Avec joie</label>
<label><input type="radio" name="pregnancyExperience" value="Avec inquiétude"> Avec inquiétude</label>
<label><input type="radio" name="pregnancyExperience" value="Avec indifférence"> Avec indifférence</label>
<label>
<input type="radio" name="pregnancyExperience" value="Autre" id="pregnancyExperienceOther"> Autre (préciser) :
<input type="text" class="other-input" id="pregnancyExperienceOtherText" disabled>
</label>
</div>
</div>
<div class="question">
<label>8. Avez-vous déjà ressenti du stress ou de l'anxiété depuis le début de votre grossesse ?</label>
<div class="radio-group">
<label><input type="radio" name="stress" value="Oui" required> Oui</label>
<label><input type="radio" name="stress" value="Non"> Non</label>
</div>
</div>
<div class="question" id="stressCausesSection">
<label>9. Si oui, quelles en sont les principales causes ? (Plusieurs réponses possibles)</label>
<div class="checkbox-group">
<label><input type="checkbox" name="stressCauses" value="Peur de l'accouchement"> Peur de l'accouchement</label>
<label><input type="checkbox" name="stressCauses" value="Problèmes de couple"> Problèmes de couple</label>
<label><input type="checkbox" name="stressCauses" value="Difficultés financières"> Difficultés financières</label>
<label><input type="checkbox" name="stressCauses" value="Changements physiques"> Changements physiques</label>
<label>
<input type="checkbox" name="stressCauses" value="Autres" id="stressCausesOther"> Autres (préciser) :
<input type="text" class="other-input" id="stressCausesOtherText" disabled>
</label>
</div>
</div>
<div class="question">
<label>10. Avez-vous déjà eu des troubles du sommeil ou de l'appétit pendant cette grossesse ?</label>
<div class="radio-group">
<label><input type="radio" name="sleepAppetite" value="Oui" required> Oui</label>
<label><input type="radio" name="sleepAppetite" value="Non"> Non</label>
</div>
</div>
</div>
<div class="section">
<h2>III. Accompagnement psychologique reçu</h2>
<div class="question">
<label>11. Le personnel de santé vous a-t-il déjà parlé de votre bien-être psychologique pendant vos consultations prénatales ?</label>
<div class="radio-group">
<label><input type="radio" name="healthPersonnel" value="Oui" required> Oui</label>
<label><input type="radio" name="healthPersonnel" value="Non"> Non</label>
</div>
</div>
<div class="question">
<label>12. Avez-vous bénéficié d'un soutien moral ou psychologique de la part :</label>
<div class="checkbox-group">
<label><input type="checkbox" name="supportFrom" value="De votre conjoint"> De votre conjoint</label>
<label><input type="checkbox" name="supportFrom" value="De votre famille"> De votre famille</label>
<label><input type="checkbox" name="supportFrom" value="Du personnel médical"> Du personnel médical</label>
</div>
</div>
<div class="question">
<label>13. Aimeriez-vous que les sages-femmes ou médecins vous accompagnent davantage sur le plan psychologique ?</label>
<div class="radio-group">
<label><input type="radio" name="moreSupport" value="Oui" required> Oui</label>
<label><input type="radio" name="moreSupport" value="Non"> Non</label>
</div>
</div>
<div class="question" id="supportFormSection">
<label>14. Si oui, sous quelle forme ? (Plusieurs réponses possibles)</label>
<div class="checkbox-group">
<label><input type="checkbox" name="supportForm" value="Discussions individuelles"> Discussions individuelles</label>
<label><input type="checkbox" name="supportForm" value="Séances de groupe entre femmes enceintes"> Séances de groupe entre femmes enceintes</label>
<label><input type="checkbox" name="supportForm" value="Conseils après consultation"> Conseils après consultation</label>
<label>
<input type="checkbox" name="supportForm" value="Autres" id="supportFormOther"> Autres (préciser) :
<input type="text" class="other-input" id="supportFormOtherText" disabled>
</label>
</div>
</div>
</div>
<div class="section">
<h2>IV. Appréciation de l'accompagnement psychologique</h2>
<div class="question">
<label>15. Pensez-vous que le soutien psychologique influence le bon déroulement de la grossesse ?</label>
<div class="radio-group">
<label><input type="radio" name="psychologicalImpact" value="Oui" required> Oui</label>
<label><input type="radio" name="psychologicalImpact" value="Non"> Non</label>
<label><input type="radio" name="psychologicalImpact" value="Ne sait pas"> Ne sait pas</label>
</div>
</div>
<div class="question">
<label>16. Selon vous, quelles sont les conséquences d'un manque d'accompagnement psychologique ? (Plusieurs réponses possibles)</label>
<div class="checkbox-group">
<label><input type="checkbox" name="consequences" value="Anxiété accrue"> Anxiété accrue</label>
<label><input type="checkbox" name="consequences" value="Dépression"> Dépression</label>
<label><input type="checkbox" name="consequences" value="Difficultés relationnelles"> Difficultés relationnelles</label>
<label><input type="checkbox" name="consequences" value="Risque de complications à l'accouchement"> Risque de complications à l'accouchement</label>
<label>
<input type="checkbox" name="consequences" value="Autres" id="consequencesOther"> Autres (préciser) :
<input type="text" class="other-input" id="consequencesOtherText" disabled>
</label>
</div>
</div>
<div class="question">
<label for="recommendations">17. Que recommanderiez-vous pour améliorer l'accompagnement psychologique des femmes enceintes dans les structures de santé ?</label>
<textarea id="recommendations" name="recommendations"></textarea>
</div>
</div>
<button type="button" id="generatePdf" class="btn">Générer mon PDF</button>
</form>
<div id="pdfPreview" class="pdf-preview hidden">
</div>
<div id="successMessage" class="success-message hidden">
Votre PDF a été généré avec succès ! Vous pouvez maintenant le télécharger.
</div>
</div>
<script>
document.getElementById('pregnancyExperienceOther').addEventListener('change', function() {
document.getElementById('pregnancyExperienceOtherText').disabled = !this.checked;
});
document.getElementById('stressCausesOther').addEventListener('change', function() {
document.getElementById('stressCausesOtherText').disabled = !this.checked;
});
document.getElementById('supportFormOther').addEventListener('change', function() {
document.getElementById('supportFormOtherText').disabled = !this.checked;
});
document.getElementById('consequencesOther').addEventListener('change', function() {
document.getElementById('consequencesOtherText').disabled = !this.checked;
});
document.querySelectorAll('input[name="stress"]').forEach(radio => {
radio.addEventListener('change', function() {
document.getElementById('stressCausesSection').style.display =
this.value === 'Oui' ? 'block' : 'none';
});
});
document.querySelectorAll('input[name="moreSupport"]').forEach(radio => {
radio.addEventListener('change', function() {
document.getElementById('supportFormSection').style.display =
this.value === 'Oui' ? 'block' : 'none';
});
});
document.getElementById('stressCausesSection').style.display = 'none';
document.getElementById('supportFormSection').style.display = 'none';
document.getElementById('generatePdf').addEventListener('click', function() {
const formData = new FormData(document.getElementById('questionnaireForm'));
const data = {};
for (let [key, value] of formData.entries()) {
if (data[key]) {
if (Array.isArray(data[key])) {
data[key].push(value);
} else {
data[key] = [data[key], value];
}
} else {
data[key] = value;
}
}
const checkboxes = ['stressCauses', 'supportFrom', 'supportForm', 'consequences'];
checkboxes.forEach(name => {
const elements = document.querySelectorAll(`input[name="${name}"]:checked`);
data[name] = Array.from(elements).map(el => el.value);
});
if (data.pregnancyExperience === 'Autre') {
data.pregnancyExperience = `Autre: ${document.getElementById('pregnancyExperienceOtherText').value}`;
}
if (data.stressCauses && data.stressCauses.includes('Autres')) {
const otherIndex = data.stressCauses.indexOf('Autres');
data.stressCauses[otherIndex] = `Autres: ${document.getElementById('stressCausesOtherText').value}`;
}
if (data.supportForm && data.supportForm.includes('Autres')) {
const otherIndex = data.supportForm.indexOf('Autres');
data.supportForm[otherIndex] = `Autres: ${document.getElementById('supportFormOtherText').value}`;
}
if (data.consequences && data.consequences.includes('Autres')) {
const otherIndex = data.consequences.indexOf('Autres');
data.consequences[otherIndex] = `Autres: ${document.getElementById('consequencesOtherText').value}`;
}
let pdfContent = `
<h1 style="text-align: center; color: #2c3e50;">Questionnaire : L'importance de l'accompagnement psychologique des femmes enceintes durant la grossesse</h1>
<h2 style="color: #3498db; border-bottom: 1px solid #eee; padding-bottom: 5px;">I. Identification</h2>
<p><strong>1. Âge :</strong> ${data.age} ans</p>
<p><strong>2. Situation matrimoniale :</strong> ${data.matrimonial}</p>
<p><strong>3. Niveau d'instruction :</strong> ${data.education}</p>
<p><strong>4. Nombre de grossesses :</strong> ${data.pregnancies}</p>
<p><strong>5. Nombre d'enfants vivants :</strong> ${