Skip to content

Instantly share code, notes, and snippets.

@alothaimeen

alothaimeen/gist:c43b9c571c20bc2b1bfef6b5e473d49f

Last active June 12, 2025 06:26
Show Gist options
  • Save alothaimeen/c43b9c571c20bc2b1bfef6b5e473d49f to your computer and use it in GitHub Desktop.
Save alothaimeen/c43b9c571c20bc2b1bfef6b5e473d49f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديد اختبار اللغة الإنجليزية - أول ثانوي</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">
<style>
/* CSS المضمن */
:root {
--primary-color: #005A9C; /* لون أزرق أساسي */
--secondary-color: #007BFF; /* لون أزرق ثانوي */
--background-color: #f4f7f9; /* لون الخلفية */
--card-background: #ffffff; /* لون خلفية البطاقات */
--text-color: #333333; /* لون النص الأساسي */
--light-text-color: #555555; /* لون النص الثانوي */
--notes-background: #fffbe6; /* لون خلفية الملاحظات */
--notes-border: #ffe58f; /* لون إطار الملاحظات */
--border-radius: 10px;
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
body {
font-family: 'Tajawal', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
margin: 0;
padding: 0;
line-height: 1.8;
}
.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background-color: var(--primary-color);
color: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
header h1 {
margin: 0;
font-size: 2.2em;
}
.general-info {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
background: var(--card-background);
padding: 15px;
margin-bottom: 30px;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
text-align: center;
}
.info-item {
margin: 10px;
font-size: 1.1em;
}
.info-item strong {
display: block;
color: var(--primary-color);
margin-bottom: 5px;
}
.exam-section {
background: var(--card-background);
margin-bottom: 25px;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden; /* لإخفاء أي تجاوزات من الشريط الجانبي */
transition: transform 0.3s ease;
}
.exam-section:hover {
transform: translateY(-5px);
}
.section-header {
background: var(--secondary-color);
color: white;
padding: 15px 20px;
font-size: 1.5em;
font-weight: 700;
}
.section-content {
padding: 20px;
}
ul {
list-style: none;
padding-right: 0;
}
ul li {
position: relative;
padding-right: 25px;
margin-bottom: 12px;
color: var(--light-text-color);
}
ul li::before {
content: '✓';
position: absolute;
right: 0;
top: 0;
color: var(--secondary-color);
font-weight: bold;
}
.pages-list {
color: var(--primary-color);
font-weight: bold;
direction: ltr;
text-align: right;
padding-right: 5px;
display: inline-block;
}
.writing-subsection {
border-top: 1px dashed #ddd;
margin-top: 20px;
padding-top: 20px;
}
.writing-subsection h4 {
font-size: 1.2em;
color: var(--primary-color);
margin-top: 0;
}
.english-text {
direction: ltr;
text-align: left;
background: #e9ecef;
padding: 10px;
border-radius: 5px;
margin-top: 8px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.95em;
color: #495057;
}
.notes {
background: var(--notes-background);
border: 2px solid var(--notes-border);
padding: 20px;
border-radius: var(--border-radius);
}
.notes h3 {
margin-top: 0;
color: var(--primary-color);
}
/* تصميم متجاوب للشاشات الصغيرة */
@media (max-width: 768px) {
header h1 {
font-size: 1.8em;
}
.general-info {
flex-direction: column;
align-items: center;
}
.section-header {
font-size: 1.3em;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>تحديد اختبار نهاية الفصل الثالث<br>مادة اللغة الإنجليزية (Mega Goal 1)</h1>
</header>
<div class="general-info">
<div class="info-item">
<strong>التاريخ</strong>
<span>19 / 12 / 1446 هـ</span>
</div>
<div class="info-item">
<strong>الزمن</strong>
<span>ساعتان ونصف</span>
</div>
<div class="info-item">
<strong>الصف</strong>
<span>الأول ثانوي</span>
</div>
</div>
<div class="exam-section">
<div class="section-header">1. Grammar (6 أسئلة)</div>
<div class="section-content">
<ul>
<li>أسلوب السؤال: اختيار الإجابة الصحيحة من متعدد.</li>
<li>من الصفحات: <span class="pages-list">140 – 148 – 149 – 154 – 162 – 163 – 168 – 176 – 177 – 182 – 190 – 191</span></li>
</ul>
</div>
</div>
<div class="exam-section">
<div class="section-header">2. Vocabulary (6 أسئلة)</div>
<div class="section-content">
<ul>
<li>أسلوب السؤال: اختيار الإجابة الصحيحة من متعدد (عبارات Real Talk ومعاني الكلمات).</li>
<li>من الصفحات: <span class="pages-list">143 – 157 – 171 – 185</span></li>
</ul>
</div>
</div>
<div class="exam-section">
<div class="section-header">3. Reading (6 أسئلة)</div>
<div class="section-content">
<ul>
<li>أسلوب السؤال: أسئلة صح وخطأ (True / False).</li>
<li>من الصفحات: <span class="pages-list">144 – 158 – 172 – 186</span></li>
</ul>
</div>
</div>
<div class="exam-section">
<div class="section-header">4. Writing (قسمان)</div>
<div class="section-content">
<div class="writing-subsection">
<h4>Writing 1 (6 عبارات)</h4>
<ul>
<li>أسلوب السؤال: توصيل الأجزاء (Matching).</li>
<li>المطلوب: توصيل المصطلحات التالية بما يناسبها في رسالة:
<div class="english-text">1- address 2- date 3- greeting 4- reason for writing 5- signature 6- Name of the sender</div>
</li>
</ul>
</div>
<div class="writing-subsection">
<h4>Writing 2 (اختيار موضوع واحد)</h4>
<ul>
<li>المطلوب: كتابة 25 كلمة عن أحد المواضيع التالية (موجودة في الكتاب).</li>
<li>
<b>رسالة شكوى (ص 146):</b>
<div class="english-text">write a letter of complaint to the Customer Service Department of the company or the store where you bought it.</div>
</li>
<li>
<b>وصف Kon-Tiki (ص 161):</b>
<div class="english-text">write a short description of Kon-Tiki</div>
</li>
<li>
<b>بريد إلكتروني للأقارب مع تعليمات للوصول إلى المستشفى (ص 189):</b>
<div class="english-text">Write an email to your uncle and aunt. Tell them what has happened and give them directions on how to reach the hospital.</div>
</li>
<li>
<b>رسالة نصيحة في زاوية الاستشارات (ص 175):</b>
<div class="english-text">Write an advice letter in the advice column.</div>
</li>
</ul>
</div>
</div>
</div>
<div class="notes">
<h3>ملاحظات مهمة</h3>
<ul>
<li>الإجابات تعتمد على فهمك للنصوص والتدريبات، وليس الحفظ فقط.</li>
<li>في جزء الكتابة الأهم هو توصيل الفكرة بوضوح (الأخطاء الإملائية والنحوية لا تخصم إذا كانت الفكرة واضحة).</li>
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment