forked from Open-CT/openct-tasks
554 lines
22 KiB
HTML
554 lines
22 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<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: "اجابتك خاطئة"
|
||
};
|
||
</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 {
|
||
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;
|
||
}
|
||
#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 {
|
||
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 {
|
||
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 {
|
||
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;
|
||
}
|
||
|
||
</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">
|
||
قسم القندس المربع الأبیض إلى ٤ مربعات صغیرة، ثم لونه باللون الأزرق والأخضر.
|
||
</p>
|
||
<p class="easy medium">
|
||
بعد ذلك سوف یقسم القندس كل مربع إلى ٤ مربعات أصغر، ثم یلونها بلون <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">
|
||
<div class="result-area">
|
||
<!-- Final state -->
|
||
<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>In summary, you can get the objective with the following rules :</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>Iباختصار ، الحل هو :</p>
|
||
<img src="sol_hard_4.png">
|
||
</div>
|
||
|
||
<h2>إنها معلوماتیة !</h2>
|
||
|
||
</div>
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|