forked from Open-CT/openct-tasks
566 lines
23 KiB
HTML
566 lines
23 KiB
HTML
<!doctype html>
|
|
<html dir="rtl" lang="ar">
|
|
<head>
|
|
<meta charset="utf-8"></meta>
|
|
|
|
<title>2018-AR-01-recursive-split</title>
|
|
|
|
<script>
|
|
window.stringsLanguage = 'ar';
|
|
</script>
|
|
|
|
<script class="remove" type="text/javascript" src="../../../_common/modules/pemFioi/importModules-1.1_M.js" id="import-modules"></script>
|
|
|
|
<script class="remove" type="text/javascript">
|
|
var modulesPath = '../../../_common/modules';
|
|
importModules([
|
|
'jquery-1.7.1', 'jquery-ui.touch-punch', 'raphael-2.2.1', 'JSON-js', 'grid-1.0',
|
|
'beav-1.0', 'beaver-task-2.0', 'simulation-2.0', 'raphaelFactory-1.0',
|
|
'delayFactory-1.0', 'simulationFactory-1.0', 'raphaelButton-1.0',
|
|
'platform-pr', 'buttonsAndMessages', 'installationAPI.01', 'miniPlatform',
|
|
'taskStyles-0.1'
|
|
]);
|
|
</script>
|
|
<script class="remove" type="text/javascript">
|
|
var json = {
|
|
"id": "http://castor-informatique.fr/tasks/2017/2017-FR-05-draw-shapes/",
|
|
"language": "ar",
|
|
"version": "fr.01",
|
|
"authors": "Arthur Charguéraud, Mathias Hiron, France-ioi",
|
|
"translators": ["Mohamed El-Sherif","Eslam Wageed"],
|
|
"license": "CC BY-SA 3.0",
|
|
"taskPathPrefix": "",
|
|
"modulesPathPrefix": "",
|
|
"browserSupport": [],
|
|
"fullFeedback": true,
|
|
"acceptedAnswers": [],
|
|
"usesRandomSeed": false
|
|
};
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
var taskStrings = {
|
|
success: "أحسنت، لقد نجحت !",
|
|
almost: "النتيجة ليست كالمطلوب, ولكنك حصلت علي بعض النقاط",
|
|
error: "اجابتك خاطئة"
|
|
};
|
|
var enableRtl = true;
|
|
</script>
|
|
|
|
<script type="text/javascript" src="task.js"></script>
|
|
|
|
<style>
|
|
|
|
/* Layout */
|
|
/* screen < 1100px : 1 seule colonne; */
|
|
/*==================
|
|
Generic elements
|
|
==================*/
|
|
.head-title {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-bottom: 30px;
|
|
}
|
|
.img-arrow {
|
|
width: 40px;
|
|
height: 50px;
|
|
display: block;
|
|
margin: 25px 0 40px 0;
|
|
}
|
|
/* grid */
|
|
.situation {
|
|
width: 210px;
|
|
height: 210px;
|
|
}
|
|
|
|
.situation > div {
|
|
height: 100%;
|
|
}
|
|
#result .situation {
|
|
position: relative;
|
|
float: left;
|
|
}
|
|
.background-0 {
|
|
background-color: white;
|
|
}
|
|
|
|
.background-1 {
|
|
background-color: #99FF99;
|
|
}
|
|
|
|
.background-2 {
|
|
background-color: #3333FF;
|
|
}
|
|
|
|
/*==================
|
|
Animation / question elements
|
|
==================*/
|
|
#anim_container {
|
|
margin-top: 24px;
|
|
position: relative;
|
|
}
|
|
#anim_container:after {
|
|
content: " ";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/* Transformation rules */
|
|
.transformation-area {
|
|
|
|
float: left;
|
|
position: relative;
|
|
display: table;
|
|
margin-right: 150px;
|
|
margin-bottom: 54px;
|
|
}
|
|
.transformation {
|
|
margin: 30px 10px 10px 10px;
|
|
display: table;
|
|
position: relative;
|
|
}
|
|
.transformation .before,
|
|
.transformation .middle-arrow,
|
|
.transformation .after,
|
|
.transformation .transformation-text {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
}
|
|
.transformation .before {
|
|
width: 100px;
|
|
height: auto;
|
|
position: relative;
|
|
}
|
|
.transformation .before > div {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 10px;
|
|
border: 1px solid black;
|
|
display: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
}
|
|
.transformation .after .column-wrapper {
|
|
direction: ltr;
|
|
width: 100px;
|
|
height: auto;
|
|
position: relative;
|
|
}
|
|
.transformation .after .column-wrapper > div {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 10px;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
.transformation .after table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.transformation .after table td,
|
|
.transformation .after table th {
|
|
border: 1px solid black;
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
.transformation .title {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0;
|
|
margin-top: 0px;
|
|
/*top: 10px;*/
|
|
width: 100%;
|
|
}
|
|
.transformation-text span {
|
|
|
|
color: red;
|
|
text-align: left;
|
|
padding-left: 10px;
|
|
position: absolute;
|
|
width: 180px;
|
|
|
|
}
|
|
.easy.transformation-text span {
|
|
top: 175px;
|
|
}
|
|
.medium.transformation-text span, .hard.transformation-text span {
|
|
top: 135px;
|
|
}
|
|
.transformation-bracket {
|
|
position: relative;
|
|
width: 10px;
|
|
margin-right: 180px;
|
|
margin-left: 5px;
|
|
border-right: 2px solid green;
|
|
border-top: 2px solid green;
|
|
border-bottom: 2px solid green;
|
|
}
|
|
.easy.transformation-bracket {
|
|
top: 115px;
|
|
height: 174px;
|
|
}
|
|
.medium.transformation-bracket, .hard.transformation-bracket {
|
|
top: 23px;
|
|
height: 266px;
|
|
}
|
|
|
|
/* Goal */
|
|
.grid-container {
|
|
/*float: left;*/
|
|
/*margin-bottom: 54px; same as .transformation-area */
|
|
position: absolute;
|
|
right: 60px;
|
|
top: 0px;
|
|
box-sizing: border-box;
|
|
}
|
|
#objective {
|
|
margin-top: 10px;
|
|
direction: ltr;
|
|
|
|
}
|
|
#objective table {
|
|
border-collapse: collapse;
|
|
margin: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
table-layout: fixed;
|
|
}
|
|
#objective table td,
|
|
#objective table th {
|
|
border: 1px solid black;
|
|
width: 25%;
|
|
height: 25%;
|
|
}
|
|
#objective.hard_table table td,
|
|
#objective.hard_table table th {
|
|
width: 12.5%;
|
|
height: 12.5%;
|
|
}
|
|
|
|
/*==================
|
|
Result
|
|
==================*/
|
|
|
|
#result {
|
|
padding-bottom: 40px;
|
|
}
|
|
.result-area {
|
|
display: table;
|
|
margin-top: 10px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.result-area > div {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
.sub-title {
|
|
position: absolute;
|
|
text-align: center;
|
|
height: 20px;
|
|
top: -30px;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.result-title {
|
|
display: block;
|
|
position: absolute;
|
|
height: 20px;
|
|
top: -55px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.initial-situation {
|
|
position: relative;
|
|
width: 210px;
|
|
height: 210px;
|
|
border: 1px solid;
|
|
float: left;
|
|
}
|
|
.after1-situation table {
|
|
direction: ltr;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.after1-situation table td,
|
|
.after1-situation table th {
|
|
border: 1px solid black;
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
.after2-situation table {
|
|
direction: ltr;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.after2-situation table td,
|
|
.after2-situation table th {
|
|
border: 1px solid black;
|
|
width: 25%;
|
|
height: 25%;
|
|
}
|
|
.after3-situation table {
|
|
direction: ltr;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.after3-situation table td,
|
|
.after3-situation table th {
|
|
border: 1px solid black;
|
|
width: 12.5%;
|
|
height: 12.5%;
|
|
}
|
|
.situation-hidden {
|
|
width: 45%;
|
|
border: 1px solid;
|
|
border-top: 1px dashed;
|
|
border-bottom: 1px dashed;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
.situation-hidden + .situation-hidden {
|
|
margin-left: 5%;
|
|
}
|
|
.situation-hidden .sub-title {
|
|
margin-top: -25px;
|
|
}
|
|
.hard.transformation {
|
|
margin-bottom: 23px;
|
|
}
|
|
.largeScreen #zone_1,
|
|
.largeScreen #zone_2
|
|
{
|
|
float: right;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="task">
|
|
<h1>قواعد الطلاء</h1>
|
|
|
|
<div id="tabsContainer"></div>
|
|
|
|
<div id="taskContent">
|
|
<p id="difficultyWarning" class="hard"></p>
|
|
|
|
<div id="zone_1">
|
|
<div class="consigne">
|
|
<p>
|
|
إذا كان لدى القندس مربع ابيض فسوف يقوم بتقسيمه إلى مربعات اصغر ثم يقوم بطلاء تلك المربعات.
|
|
</p>
|
|
<p class="easy medium">
|
|
قام القندس بتقسيم المربع الأبيض إلى 4 مربعات صغيرة ثم لونها باللون الأزرق والأخضر كما هو موضح بقواعد الطلاء.
|
|
</p>
|
|
<p class="easy medium">
|
|
بعد ذلك قام القندس بتقسيم المربعات الصغيرة إلى 4 مربعات أصغر ثم قام بتلوينها مرة أخرى باللون <span class="easy">الأبيض و </span>الأزرق والأخضر.
|
|
</p>
|
|
<p class="hard">
|
|
أولاً سيقسم المربع الأبیض إلى ٤ مربعات أصغر و یلونهم بالأبيض أو الأخضر أو الأزرق.
|
|
</p>
|
|
<p class="hard">
|
|
ثم يقسم كل من هذه المربعات الصغيرة إلى ٤ مربعات أصغر و يلونهم باللون الأبيض أو الأخضر أو الأزرق.
|
|
</p>
|
|
<p class="hard">
|
|
ثم يقسمهم مرة أخرى إلى ٤ مربعات أصغر منهم و يلونهم باللون الأبيض أو الأخضر أو الأزرق.
|
|
</p>
|
|
<p>
|
|
استنتج قواعد الطلاء التي تجعل مربعات "نتيجة الطلاء" مطابقة للشكل المطلوب. انقر على المربعات الصغير لتغيير ألوانها.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="zone_2">
|
|
<div id="anim_container">
|
|
<div class="transformation-area">
|
|
<span class="head-title">قواعد الطلاء</span>
|
|
|
|
<div class="easy medium transformation">
|
|
<div class="easy transformation-text"><span>انقر على المربعات لتلوينها</span></div>
|
|
<div class="medium transformation-text"><span>انقر على المربعات لتلوينها</span></div>
|
|
<div class="easy transformation-bracket"></div>
|
|
<div class="medium transformation-bracket"></div>
|
|
<div class="after">
|
|
<span class="title">بعد الطلاء</span>
|
|
<div class="column-wrapper">
|
|
<div class="option-1"></div>
|
|
<div class="option-2"></div>
|
|
<div class="option-3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="middle-arrow">
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
</div>
|
|
<div class="before">
|
|
<span class="title">قبل الطلاء</span>
|
|
<div class="background-0"></div>
|
|
<div class="background-1"></div>
|
|
<div class="background-2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hard transformation">
|
|
<div class="hard transformation-text"><span>انقر على المربعات لتلوينها</span></div>
|
|
<div class="hard transformation-bracket"></div>
|
|
<div class="after">
|
|
<span class="title">بعد الطلاء</span>
|
|
<div class="column-wrapper">
|
|
<div class="option-1"></div>
|
|
<div class="option-2"></div>
|
|
<div class="option-3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="middle-arrow">
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
</div>
|
|
<div class="before">
|
|
<span class="title">قبل الطلاء</span>
|
|
<div class="background-0"></div>
|
|
<div class="background-1"></div>
|
|
<div class="background-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<span class="head-title">الشكل المطلوب</span>
|
|
<div id="objective" class="situation"></div>
|
|
</div>
|
|
</div>
|
|
<!-- task -->
|
|
<div id="result">
|
|
<!-- Final state -->
|
|
<div class="result-area">
|
|
<div class="situation easy medium">
|
|
<span class="result-title">
|
|
نتيجة الطلاء
|
|
</span>
|
|
<span class="sub-title">
|
|
بعد الطلاء الثاني
|
|
</span>
|
|
<div class="after2-situation"></div>
|
|
</div>
|
|
|
|
<div class="situation hard">
|
|
<span class="result-title">
|
|
نتيجة الطلاء
|
|
</span>
|
|
<span class="sub-title">
|
|
بعد الطلاء الثالث </span>
|
|
<div class="after3-situation"></div>
|
|
</div>
|
|
<div class="middle-arrow">
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
</div>
|
|
<!-- State after 1 transformation -->
|
|
<div class="situation easy medium">
|
|
<span class="sub-title">
|
|
بعد الطلاء الأول
|
|
</span>
|
|
<div class="after1-situation"></div>
|
|
</div>
|
|
<div class="hard">
|
|
<div class="situation">
|
|
<div class="situation-hidden">
|
|
<span class="sub-title">
|
|
الطلاء مخفي
|
|
</span>
|
|
</div>
|
|
|
|
<div class="situation-hidden">
|
|
<span class="sub-title">
|
|
الطلاء مخفي
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle-arrow">
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
</div>
|
|
<!-- Initial state -->
|
|
<div class="initial-situation">
|
|
<span class="sub-title">
|
|
المربع الأول
|
|
</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<img src="icon.png" style="display:none">
|
|
</div>
|
|
|
|
<!-- task-solution -->
|
|
|
|
<div id="solution">
|
|
<h2>الحل</h2>
|
|
|
|
<div class="easy">
|
|
<p>بعد التلوین الأول، لون الصندوقین في النصف الأیمن هو اللون الأخضر. للحصول على الشكل المطلوب بعد خطوة التلوین الثانیة، یجب أن تتطابق قاعدة التلوین للمربع الأخضر مع النمط المكرر مرتین في النصف الأیمن من الشكل المطلوب. لذلك دعونا نصلح قاعدة التلوین التالیة:</p>
|
|
<img src="sol_easy_1.png">
|
|
<p>ثم نحصل على النصف الأول من النتیجة :</p>
|
|
<img src="sol_easy_2.png" style="width:600px">
|
|
<p>بنفس الطریقة، یمكننا تحدید قاعدة التلوین للمربع الأزرق، عن طریق نسخ نمط التكرار مرتین في النصف الأیسر من الشكل المطلوب.</p>
|
|
<p>باختصار، نحصل على النتیجة المرجوة من خلال القواعد التالیة:</p>
|
|
<img src="sol_easy_3.png">
|
|
</div>
|
|
|
|
<div class="medium">
|
|
<p>في الخطوة الأولى، يجب عليك تلوين المربع البدائي بالأخضر أو الأزرق. لأختيار الألوان الصحيحة، يجب عليك أتباع الشكل المطلوب. سوف تلاحظ أن المربع العلوي علي اليسار مطابق للمربع السفلي علي اليمين. وبالمثل، المربع العلوي علي اليمين مطابق للمربع السفلي علي اليسار. عليك أن تعكس هذه التماثلات في قاعدة التلوين لمربع البدائي ، مثل هذا</p>
|
|
|
|
<img src="sol_medium_1.png">
|
|
<p>ثم نحصل على:</p>
|
|
<img src="sol_medium_2.png" style="width:600px">
|
|
<p>یتبقى تحدید قواعد خطوة التلوین الثانیة. اي تغيير سوف تقوم به في قواعد التلوين للمربع الأخضر، سوف يقوم بتغيير الألوان في المربعات الخضراء فقط. قم بتغيير الألوان لتحصل علي النموذج الظاهر في المربع الاعلى علي اليمين والمربع الاسفل علي اليسار للشكل المطلوب</p>
|
|
<img src="sol_medium_3.png">
|
|
<p>ثم نحصل على :</p>
|
|
<img src="sol_medium_4.png" style="width:600px">
|
|
<p>یتبقى تحدید قواعد خطوة التلوین الثانیة. اي تغيير سوف تقوم به في قواعد التلوين للمربع الأزرق، سوف يقوم بتغيير الألوان في المربعات الزرقاء فقط. قم بتغيير الألوان لتحصل علي النموذج الظاهر في المربعين الاخرين من الشكل المطلوب (المربع الاعلي علي اليسار والمربع الاسفل علي اليمين).</p>
|
|
<p> باختصار، يمكنك الحصول على الهدف من خلال القواعد التلوين التالية: </p>
|
|
<img src="sol_medium_5.png">
|
|
<p>لاحظ أنه یمكننا أیضا النجاح عن طریق قلب الألوان في الخطوة الأولى؛ هنا الحل البدیل:</p>
|
|
<img src="sol_medium_6.png">
|
|
|
|
</div>
|
|
|
|
<div class="hard">
|
|
<p>لاحظ الأنماط التي شكلتها جمیع المربعات المكونة من ٤ مربعات والتي تظهر في الشكل المطلوب.</p>
|
|
<img src="sol_hard_0.png">
|
|
<p>نرى أن هناك ٣ أنواع مختلفة من الأنماط:</p>
|
|
<img src="sol_hard_1.png">
|
|
<p>سیكون من الضروري حتما استخدام هذه الأنماط كقواعد التلوین. یتبقى أن نرى النمط سوف تتوافق مع كل القاعدة.</p>
|
|
<p>للعثور على النمط الذي یتوافق مع قاعدة التلوین للأبیض، قم بقص الشكل المطلوب إلى ٤ مربعات (١٦ مربع لكل منهما):</p>
|
|
<img src="sol_hard_2.png">
|
|
<p>یمكننا أن نلاحظ بعد ذلك أن المربعین العلویین متطابقان، في حین أن المربعین السفلیین لهما أنماط مختلفة.</p>
|
|
<p>نستنتج أن قاعدة تلوین الأبیض هي المعروضة بالاسفل، من بین الأنماط الثلاثة المحددة أعلاه، لوجود مربعین علویین لهم نفس الشكل.</p>
|
|
<img src="sol_hard_3.png">
|
|
<p>بمجرد العثور على الخطوة الأولى، یتعین علینا استخدام النمطين الآخرین اللذین تم تحدیدهما كقواعد للتلوین باللون الأخضر والأزرق. هناك احتمالان فقط یمكن اختبارهما بسرعة كبیرة (و یمكننا التفكیر، لكن الأمر یتطلب المزید من الوقت)!.</p>
|
|
<p>باختصار، الحل هو:</p>
|
|
<img src="sol_hard_4.png">
|
|
</div>
|
|
|
|
<h2>إنها معلوماتیة !</h2>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|