627 lines
23 KiB
HTML
627 lines
23 KiB
HTML
{% load i18n %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{ language }}" dir="{% if language == 'ar' %}rtl{% else %}ltr{% endif %}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>{% if language == 'ar' %}استبيان رضا المرضى{% else %}Patient Satisfaction Survey{% endif %} - PX360</title>
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap{% if language == 'ar' %}.rtl{% endif %}.min.css" rel="stylesheet">
|
|
<!-- Bootstrap Icons -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--primary-color: #667eea;
|
|
--secondary-color: #764ba2;
|
|
--success-color: #4caf50;
|
|
--warning-color: #ff9800;
|
|
--danger-color: #f44336;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
min-height: 100vh;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
{% if language == 'ar' %}
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
{% endif %}
|
|
}
|
|
|
|
.survey-container {
|
|
max-width: 600px;
|
|
margin: 20px auto;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.survey-card {
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.survey-header {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
color: white;
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.survey-header h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.survey-header p {
|
|
font-size: 0.9rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.progress-bar-container {
|
|
background: rgba(255,255,255,0.2);
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
margin-top: 15px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
background: white;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.survey-body {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.question-card {
|
|
margin-bottom: 30px;
|
|
padding-bottom: 30px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.question-card:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.question-number {
|
|
display: inline-block;
|
|
background: var(--primary-color);
|
|
color: white;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.question-text {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.required-indicator {
|
|
color: var(--danger-color);
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* Rating Stars */
|
|
.rating-stars {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.rating-star {
|
|
font-size: 2.5rem;
|
|
color: #ddd;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.rating-star:hover,
|
|
.rating-star.active {
|
|
color: #ffc107;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* NPS Scale */
|
|
.nps-scale {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.nps-button {
|
|
width: 45px;
|
|
height: 45px;
|
|
border: 2px solid #ddd;
|
|
border-radius: 8px;
|
|
background: white;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nps-button:hover {
|
|
border-color: var(--primary-color);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.nps-button.selected {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.nps-labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.75rem;
|
|
color: #666;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Likert Scale */
|
|
.likert-scale {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.likert-option {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.likert-option:hover {
|
|
border-color: var(--primary-color);
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.likert-option input[type="radio"] {
|
|
margin-right: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.likert-option.selected {
|
|
border-color: var(--primary-color);
|
|
background: #f0f4ff;
|
|
}
|
|
|
|
/* Yes/No Buttons */
|
|
.yes-no-buttons {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.yes-no-button {
|
|
flex: 1;
|
|
max-width: 150px;
|
|
padding: 15px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 12px;
|
|
background: white;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-align: center;
|
|
}
|
|
|
|
.yes-no-button:hover {
|
|
border-color: var(--primary-color);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.yes-no-button.selected {
|
|
background: var(--success-color);
|
|
color: white;
|
|
border-color: var(--success-color);
|
|
}
|
|
|
|
/* Text Input */
|
|
.form-control {
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 10px;
|
|
padding: 12px 15px;
|
|
font-size: 1rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
|
}
|
|
|
|
/* Submit Button */
|
|
.submit-button {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 15px 40px;
|
|
border-radius: 50px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.submit-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
/* Language Toggle */
|
|
.language-toggle {
|
|
position: fixed;
|
|
top: 20px;
|
|
{% if language == 'ar' %}left{% else %}right{% endif %}: 20px;
|
|
background: white;
|
|
border-radius: 50px;
|
|
padding: 8px 20px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.language-toggle a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Error Messages */
|
|
.error-message {
|
|
background: #ffebee;
|
|
color: #c62828;
|
|
padding: 12px 15px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
border-left: 4px solid #c62828;
|
|
}
|
|
|
|
/* Mobile Optimizations */
|
|
@media (max-width: 576px) {
|
|
.survey-header h1 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.rating-star {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.nps-button {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.question-text {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Language Toggle -->
|
|
<div class="language-toggle">
|
|
{% if language == 'ar' %}
|
|
<a href="?lang=en"><i class="bi bi-translate me-1"></i> English</a>
|
|
{% else %}
|
|
<a href="?lang=ar"><i class="bi bi-translate me-1"></i> العربية</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="survey-container">
|
|
<div class="survey-card">
|
|
<!-- Survey Header -->
|
|
<div class="survey-header">
|
|
<h1>
|
|
{% if language == 'ar' %}
|
|
{{ survey.survey_template.name_ar|default:survey.survey_template.name }}
|
|
{% else %}
|
|
{{ survey.survey_template.name }}
|
|
{% endif %}
|
|
</h1>
|
|
<p>
|
|
{% if language == 'ar' %}
|
|
{{ survey.survey_template.description_ar|default:survey.survey_template.description }}
|
|
{% else %}
|
|
{{ survey.survey_template.description }}
|
|
{% endif %}
|
|
</p>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar-fill" id="progressBar" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Survey Body -->
|
|
<div class="survey-body">
|
|
<!-- Error Messages -->
|
|
{% if errors %}
|
|
<div class="error-message">
|
|
<strong>
|
|
{% if language == 'ar' %}
|
|
يرجى تصحيح الأخطاء التالية:
|
|
{% else %}
|
|
Please correct the following errors:
|
|
{% endif %}
|
|
</strong>
|
|
<ul class="mb-0 mt-2">
|
|
{% for error in errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Survey Form -->
|
|
<form method="post" id="surveyForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="language" value="{{ language }}">
|
|
|
|
{% for question in questions %}
|
|
<div class="question-card" data-question="{{ forloop.counter }}">
|
|
<div class="question-number">{{ forloop.counter }}</div>
|
|
<div class="question-text">
|
|
{% if language == 'ar' and question.text_ar %}
|
|
{{ question.text_ar }}
|
|
{% else %}
|
|
{{ question.text }}
|
|
{% endif %}
|
|
{% if question.is_required %}
|
|
<span class="required-indicator">*</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if question.help_text or question.help_text_ar %}
|
|
<small class="text-muted d-block mb-3">
|
|
{% if language == 'ar' and question.help_text_ar %}
|
|
{{ question.help_text_ar }}
|
|
{% else %}
|
|
{{ question.help_text }}
|
|
{% endif %}
|
|
</small>
|
|
{% endif %}
|
|
|
|
<!-- Rating Question -->
|
|
{% if question.question_type == 'rating' %}
|
|
<div class="rating-stars">
|
|
{% for i in "12345" %}
|
|
<i class="bi bi-star-fill rating-star" data-value="{{ forloop.counter }}"
|
|
onclick="selectRating(this, 'question_{{ question.id }}')"></i>
|
|
{% endfor %}
|
|
</div>
|
|
<input type="hidden" name="question_{{ question.id }}" id="question_{{ question.id }}"
|
|
{% if question.is_required %}required{% endif %}>
|
|
|
|
<!-- NPS Question -->
|
|
{% elif question.question_type == 'nps' %}
|
|
<div class="nps-scale">
|
|
{% for i in "012345678910" %}
|
|
<button type="button" class="nps-button" data-value="{{ forloop.counter0 }}"
|
|
onclick="selectNPS(this, 'question_{{ question.id }}')">
|
|
{{ forloop.counter0 }}
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="nps-labels">
|
|
<span>
|
|
{% if language == 'ar' %}غير محتمل على الإطلاق{% else %}Not at all likely{% endif %}
|
|
</span>
|
|
<span>
|
|
{% if language == 'ar' %}محتمل جداً{% else %}Extremely likely{% endif %}
|
|
</span>
|
|
</div>
|
|
<input type="hidden" name="question_{{ question.id }}" id="question_{{ question.id }}"
|
|
{% if question.is_required %}required{% endif %}>
|
|
|
|
<!-- Likert Scale -->
|
|
{% elif question.question_type == 'likert' %}
|
|
<div class="likert-scale">
|
|
{% for value, label in "1:Strongly Disagree,2:Disagree,3:Neutral,4:Agree,5:Strongly Agree"|split:"," %}
|
|
{% with parts=label|split:":" %}
|
|
<label class="likert-option">
|
|
<input type="radio" name="question_{{ question.id }}" value="{{ parts.0 }}"
|
|
{% if question.is_required %}required{% endif %}
|
|
onchange="selectLikert(this)">
|
|
<span>{{ parts.1 }}</span>
|
|
</label>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Yes/No Question -->
|
|
{% elif question.question_type == 'yes_no' %}
|
|
<div class="yes-no-buttons">
|
|
<button type="button" class="yes-no-button" data-value="yes"
|
|
onclick="selectYesNo(this, 'question_{{ question.id }}')">
|
|
{% if language == 'ar' %}نعم{% else %}Yes{% endif %}
|
|
</button>
|
|
<button type="button" class="yes-no-button" data-value="no"
|
|
onclick="selectYesNo(this, 'question_{{ question.id }}')">
|
|
{% if language == 'ar' %}لا{% else %}No{% endif %}
|
|
</button>
|
|
</div>
|
|
<input type="hidden" name="question_{{ question.id }}" id="question_{{ question.id }}"
|
|
{% if question.is_required %}required{% endif %}>
|
|
|
|
<!-- Multiple Choice -->
|
|
{% elif question.question_type == 'multiple_choice' %}
|
|
<div class="likert-scale">
|
|
{% for choice in question.choices_json %}
|
|
<label class="likert-option">
|
|
<input type="radio" name="question_{{ question.id }}" value="{{ choice.value }}"
|
|
{% if question.is_required %}required{% endif %}
|
|
onchange="selectLikert(this)">
|
|
<span>
|
|
{% if language == 'ar' and choice.label_ar %}
|
|
{{ choice.label_ar }}
|
|
{% else %}
|
|
{{ choice.label }}
|
|
{% endif %}
|
|
</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Text Input -->
|
|
{% elif question.question_type == 'text' %}
|
|
<input type="text" name="question_{{ question.id }}" class="form-control"
|
|
{% if question.is_required %}required{% endif %}
|
|
placeholder="{% if language == 'ar' %}أدخل إجابتك هنا{% else %}Enter your answer here{% endif %}">
|
|
|
|
<!-- Text Area -->
|
|
{% elif question.question_type == 'textarea' %}
|
|
<textarea name="question_{{ question.id }}" class="form-control" rows="4"
|
|
{% if question.is_required %}required{% endif %}
|
|
placeholder="{% if language == 'ar' %}أدخل إجابتك هنا{% else %}Enter your answer here{% endif %}"></textarea>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<!-- Submit Button -->
|
|
<button type="submit" class="submit-button">
|
|
<i class="bi bi-check-circle me-2"></i>
|
|
{% if language == 'ar' %}
|
|
إرسال الاستبيان
|
|
{% else %}
|
|
Submit Survey
|
|
{% endif %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="text-center text-white mt-3 mb-4">
|
|
<small>
|
|
{% if language == 'ar' %}
|
|
شكراً لمشاركتك في تحسين تجربة المرضى
|
|
{% else %}
|
|
Thank you for helping us improve patient experience
|
|
{% endif %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
// Rating Stars
|
|
function selectRating(star, fieldId) {
|
|
const value = star.getAttribute('data-value');
|
|
const stars = star.parentElement.querySelectorAll('.rating-star');
|
|
|
|
stars.forEach((s, index) => {
|
|
if (index < value) {
|
|
s.classList.add('active');
|
|
} else {
|
|
s.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
document.getElementById(fieldId).value = value;
|
|
updateProgress();
|
|
}
|
|
|
|
// NPS Selection
|
|
function selectNPS(button, fieldId) {
|
|
const value = button.getAttribute('data-value');
|
|
const buttons = button.parentElement.querySelectorAll('.nps-button');
|
|
|
|
buttons.forEach(b => b.classList.remove('selected'));
|
|
button.classList.add('selected');
|
|
|
|
document.getElementById(fieldId).value = value;
|
|
updateProgress();
|
|
}
|
|
|
|
// Likert Selection
|
|
function selectLikert(radio) {
|
|
const options = radio.closest('.likert-scale').querySelectorAll('.likert-option');
|
|
options.forEach(opt => opt.classList.remove('selected'));
|
|
radio.closest('.likert-option').classList.add('selected');
|
|
updateProgress();
|
|
}
|
|
|
|
// Yes/No Selection
|
|
function selectYesNo(button, fieldId) {
|
|
const value = button.getAttribute('data-value');
|
|
const buttons = button.parentElement.querySelectorAll('.yes-no-button');
|
|
|
|
buttons.forEach(b => b.classList.remove('selected'));
|
|
button.classList.add('selected');
|
|
|
|
document.getElementById(fieldId).value = value;
|
|
updateProgress();
|
|
}
|
|
|
|
// Update Progress Bar
|
|
function updateProgress() {
|
|
const form = document.getElementById('surveyForm');
|
|
const totalQuestions = {{ total_questions }};
|
|
const answeredQuestions = form.querySelectorAll('input[type="hidden"]:not([value=""]), input[type="radio"]:checked, input[type="text"]:not([value=""]), textarea:not([value=""])').length;
|
|
|
|
const progress = (answeredQuestions / totalQuestions) * 100;
|
|
document.getElementById('progressBar').style.width = progress + '%';
|
|
}
|
|
|
|
// Form Submission
|
|
document.getElementById('surveyForm').addEventListener('submit', function(e) {
|
|
// Validate all required fields
|
|
const requiredFields = this.querySelectorAll('[required]');
|
|
let allValid = true;
|
|
|
|
requiredFields.forEach(field => {
|
|
if (!field.value) {
|
|
allValid = false;
|
|
field.closest('.question-card').style.borderLeft = '4px solid #f44336';
|
|
} else {
|
|
field.closest('.question-card').style.borderLeft = 'none';
|
|
}
|
|
});
|
|
|
|
if (!allValid) {
|
|
e.preventDefault();
|
|
alert('{% if language == "ar" %}يرجى الإجابة على جميع الأسئلة المطلوبة{% else %}Please answer all required questions{% endif %}');
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
});
|
|
|
|
// Initialize progress on page load
|
|
updateProgress();
|
|
</script>
|
|
</body>
|
|
</html>
|