feat: add unified print utility for students (StepLab & Exams)
This commit is contained in:
Hamza-Ayed
@@ -898,6 +898,7 @@ class StudentPortal
|
||||
<h3 style="font-size: 18px; font-weight: 800;">مختبر التفكير السقراطي والمحاكاة التفاعلية (StepLab) 🧪</h3>
|
||||
<p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">فترة التفكير الإجبارية (Productive Struggle) + محاكاة هندسية بالـ Canvas.</p>
|
||||
</div>
|
||||
<button type="button" onclick="printElement('tab_steplab_content', 'مختبر التفكير السقراطي (StepLab)')" class="btn-primary" style="width: auto; padding: 6px 14px; font-size: 12px; background: rgba(0,245,212,0.15); border: 1px solid rgba(0,245,212,0.3); color: var(--accent-cyan);">🖨️ طباعة المسألة والشرح</button>
|
||||
</div>
|
||||
|
||||
<!-- Problem Selector Chips -->
|
||||
@@ -994,7 +995,10 @@ class StudentPortal
|
||||
<div id="exam_taking_modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(16px); z-index: 200; align-items: center; justify-content: center; padding: 20px;">
|
||||
<div class="auth-box" style="max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;">
|
||||
<h3 style="font-size: 18px; font-weight: 800;" id="exam_title_display">امتحان تقييمي</h3>
|
||||
<div style="display: flex; align-items: center; gap: 10px;">
|
||||
<h3 style="font-size: 18px; font-weight: 800;" id="exam_title_display">امتحان تقييمي</h3>
|
||||
<button type="button" onclick="printElement('exam_question_container', 'سؤال امتحان - صَقِل')" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 11px; cursor: pointer;">🖨️ طباعة السؤال</button>
|
||||
</div>
|
||||
<button type="button" onclick="closeExamModal()" style="background: transparent; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer;">✕</button>
|
||||
</div>
|
||||
|
||||
@@ -2351,6 +2355,106 @@ class StudentPortal
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// Print Utility (طباعة المحتوى للطلاب)
|
||||
// ==========================================
|
||||
function printElement(elementId, title = 'صَقِل - طباعة') {
|
||||
const el = document.getElementById(elementId);
|
||||
if (!el) {
|
||||
showError('المحتوى غير متوفر للطباعة');
|
||||
return;
|
||||
}
|
||||
|
||||
// Clone the element to safely modify it before printing
|
||||
const clone = el.cloneNode(true);
|
||||
|
||||
// Remove interactive elements that shouldn't be printed
|
||||
const removeSelectors = ['button', 'input[type="range"]', '.no-print'];
|
||||
removeSelectors.forEach(sel => {
|
||||
const elements = clone.querySelectorAll(sel);
|
||||
elements.forEach(e => e.remove());
|
||||
});
|
||||
|
||||
// Expand all steplab steps if they are hidden
|
||||
const hiddenSteps = clone.querySelectorAll('.studio-card > div[style*="display: none"]');
|
||||
hiddenSteps.forEach(e => { e.style.display = 'block'; });
|
||||
const dimCards = clone.querySelectorAll('.studio-card[style*="opacity"]');
|
||||
dimCards.forEach(e => { e.style.opacity = '1'; });
|
||||
|
||||
const printWindow = window.open('', '', 'width=900,height=900');
|
||||
printWindow.document.write(`
|
||||
<html dir="rtl" lang="ar">
|
||||
<head>
|
||||
<title>${title}</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--accent-cyan: #000;
|
||||
--accent-gold: #000;
|
||||
--accent-purple: #000;
|
||||
--text-muted: #444;
|
||||
--text-secondary: #222;
|
||||
--border: #ccc;
|
||||
}
|
||||
body {
|
||||
font-family: 'Cairo', system-ui, sans-serif;
|
||||
padding: 30px;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
line-height: 1.6;
|
||||
}
|
||||
h3, h4 { color: #000 !important; }
|
||||
/* Force colors to black/white for print */
|
||||
* {
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.studio-card {
|
||||
border: 1px solid #aaa !important;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background: #fff !important;
|
||||
}
|
||||
.step-card { border: 1px solid #ccc; margin-bottom: 15px; padding: 15px; border-radius: 8px; }
|
||||
/* Show originally hidden step bodies */
|
||||
#steplab_steps_ladder { display: flex !important; flex-direction: column !important; }
|
||||
#steplab_steps_ladder .studio-card div { display: block !important; }
|
||||
|
||||
@media print {
|
||||
@page { margin: 1.5cm; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000; padding-bottom: 15px; margin-bottom: 25px;">
|
||||
<div>
|
||||
<h2 style="margin: 0;">منصة صَقِل التعليمية</h2>
|
||||
<span style="font-size: 14px; color: #555;">المرجع المطبوع - استوديو الطالب</span>
|
||||
</div>
|
||||
<div style="text-align: left;">
|
||||
<h3 style="margin: 0; font-size: 16px;">${title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
${clone.innerHTML}
|
||||
|
||||
<div style="margin-top: 40px; border-top: 1px dashed #ccc; padding-top: 10px; font-size: 12px; text-align: center;">
|
||||
حقوق الطبع محفوظة لمنصة صَقِل - تم توليد هذه الورقة بناءً على المنهاج الوزاري الأردني.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
printWindow.document.close();
|
||||
printWindow.focus();
|
||||
|
||||
setTimeout(() => {
|
||||
printWindow.print();
|
||||
printWindow.close();
|
||||
}, 800);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user