forked from Open-CT/openct-tasks
565 lines
21 KiB
HTML
565 lines
21 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8"></meta>
|
|
|
|
<title>2018-FR-01-recursive-split</title>
|
|
|
|
<script>
|
|
window.stringsLanguage = 'fr';
|
|
</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',
|
|
'jschannel', '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": "fr",
|
|
"version": "fr.01",
|
|
"authors": "Arthur Charguéraud, Mathias Hiron, France-ioi",
|
|
"translators": [],
|
|
"license": "CC BY-SA 3.0",
|
|
"taskPathPrefix": "",
|
|
"modulesPathPrefix": "",
|
|
"browserSupport": [],
|
|
"fullFeedback": true,
|
|
"acceptedAnswers": [],
|
|
"usesRandomSeed": false
|
|
};
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
var taskStrings = {
|
|
success: "Bravo, vous avez réussi !",
|
|
almost: "Le résultat ne correspond pas exactement à l'objectif, mais vous obtenez quand même des points.",
|
|
error: "Le résultat ne correspond pas à l'objectif."
|
|
};
|
|
</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: 0px;
|
|
}
|
|
.img-arrow {
|
|
width: 60px;
|
|
height: 50px;
|
|
display: block;
|
|
margin: 40px 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: 20px;
|
|
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: 20px;
|
|
}
|
|
.transformation {
|
|
margin: 10px 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-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;
|
|
}
|
|
.masked {
|
|
position: absolute;
|
|
text-align: center;
|
|
height: 20px;
|
|
top: 80px;
|
|
left: 0;
|
|
right: 0;
|
|
color: gray;
|
|
}
|
|
.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: -14px;
|
|
}
|
|
.hard.transformation {
|
|
margin-bottom: 23px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="task">
|
|
<h1>Coloriages répétés</h1>
|
|
|
|
<div id="tabsContainer"></div>
|
|
|
|
<div id="taskContent">
|
|
<p id="difficultyWarning" class="hard"></p>
|
|
|
|
<div id="zone_1">
|
|
<div class="consigne">
|
|
<p>
|
|
On commence avec un carré blanc, que l'on va colorier selon des règles que vous pouvez modifier.
|
|
</p>
|
|
<p class="easy medium">
|
|
On colorie d'abord ce carré en 4 carrés, verts ou bleus.
|
|
</p>
|
|
<p class="easy medium">
|
|
On colorie ensuite chacun de ces carrés en 4 carrés plus petits, <span class="easy">blancs, </span>verts ou bleus.
|
|
</p>
|
|
<p class="hard">
|
|
On colorie d'abord le carré blanc en 4 carrés, blancs, verts ou bleus.
|
|
</p>
|
|
<p class="hard">
|
|
On colorie ensuite chacun de ces carrés en 4 carrés plus petits, blancs, verts ou bleus.
|
|
</p>
|
|
<p class="hard">
|
|
On colorie alors chacun de ces petits carrés en 4 carrés encore plus petits, blancs, verts ou bleus.
|
|
</p>
|
|
<p>
|
|
Modifiez les règles de coloriage pour obtenir l'objectif.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="zone_2">
|
|
<div id="anim_container">
|
|
<div class="transformation-area">
|
|
<span class="head-title">Règles de coloriage</span>
|
|
|
|
<div class="easy medium transformation">
|
|
<div class="before">
|
|
<span class="title">Avant</span>
|
|
<div class="background-0"></div>
|
|
<div class="background-1"></div>
|
|
<div class="background-2"></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="after">
|
|
<span class="title">Après</span>
|
|
<div class="column-wrapper">
|
|
<div class="option-1"></div>
|
|
<div class="option-2"></div>
|
|
<div class="option-3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="easy transformation-bracket"></div>
|
|
<div class="medium transformation-bracket"></div>
|
|
<div class="easy transformation-text"><span>Cliquez ici</span></div>
|
|
<div class="medium transformation-text"><span>Cliquez ici</span></div>
|
|
</div>
|
|
|
|
<div class="hard transformation">
|
|
<div class="before">
|
|
<span class="title">Avant</span>
|
|
<div class="background-0"></div>
|
|
<div class="background-1"></div>
|
|
<div class="background-2"></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="after">
|
|
<span class="title">Après</span>
|
|
<div class="column-wrapper">
|
|
<div class="option-1"></div>
|
|
<div class="option-2"></div>
|
|
<div class="option-3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="hard transformation-bracket"></div>
|
|
<div class="hard transformation-text"><span>Cliquez ici</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<span class="head-title">Objectif</span>
|
|
<div id="objective" class="situation"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="result">
|
|
<div class="result-area">
|
|
<!-- Initial state -->
|
|
<div class="initial-situation">
|
|
<span class="sub-title">
|
|
Carré blanc de départ
|
|
</span>
|
|
</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">
|
|
Après le premier coloriage
|
|
</span>
|
|
<div class="after1-situation"></div>
|
|
</div>
|
|
<div class="hard">
|
|
<div class="situation">
|
|
<div class="situation-hidden">
|
|
<span class="sub-title">
|
|
Après 1 coloriage
|
|
</span>
|
|
<span class="masked">
|
|
dessin masqué
|
|
</span>
|
|
</div>
|
|
|
|
<div class="situation-hidden">
|
|
<span class="sub-title">
|
|
Après 2 coloriages
|
|
</span>
|
|
<span class="masked">
|
|
dessin masqué
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle-arrow">
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
</div>
|
|
<!-- Final state -->
|
|
<div class="situation easy medium">
|
|
<span class="result-title">
|
|
Résultat
|
|
</span>
|
|
<span class="sub-title">
|
|
Après le second coloriage
|
|
</span>
|
|
<div class="after2-situation"></div>
|
|
</div>
|
|
|
|
<div class="situation hard">
|
|
<span class="result-title">
|
|
Résultat
|
|
</span>
|
|
<span class="sub-title">
|
|
Après le troisième coloriage
|
|
</span>
|
|
<div class="after3-situation"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<img src="icon.png" style="display:none">
|
|
</div>
|
|
<!-- task -->
|
|
|
|
<div id="solution">
|
|
<h2>Solution</h2>
|
|
|
|
<div class="easy">
|
|
<p>Après le premier coloriage, les deux cases de la moitié droite sont coloriées en vert. Pour obtenir l'objectif après la deuxième étape de coloriage, il faut que la règle de coloriage pour une case verte corresponde au motif répété deux fois sur la moitié droite de l'objectif. Fixons donc déjà la règle de coloriage suivante :</p>
|
|
<img src="sol_easy_1.png">
|
|
<p>On obtient alors la première moitié du résultat :</p>
|
|
<img src="sol_easy_2.png" style="width:600px">
|
|
<p>De la même manière, on peut définir la règle de coloriage d'une case bleue, en recopiant le motif répété deux fois sur la moitié gauche de l'objectif. </p>
|
|
<p>En résumé, on obtient le résultat souhaité avec les règles suivantes :</p>
|
|
<img src="sol_easy_3.png">
|
|
</div>
|
|
|
|
<div class="medium">
|
|
<p>Lors de la première étape, on colorie un carré blanc en 4 carrés verts ou bleus. Pour choisir la couleur des cases, il faut prendre en compte les motifs visibles dans l'objectif : le quart en haut à gauche est identique au quart en bas à droite, et de même le quart en haut à droite est identique au quart en bas à gauche. Il faut refléter ces symétries dans la règle de coloriage pour un carré blanc, par exemple comme cela :</p>
|
|
<img src="sol_medium_1.png">
|
|
<p>On obtient alors :</p>
|
|
<img src="sol_medium_2.png" style="width:600px">
|
|
<p>Il reste à déterminer les règles pour la seconde étape de coloriage. La règle du coloriage pour les cases vertes doit permettre d'obtenir le motif apparaissant dans le quart en haut à droite et le quart en bas à gauche de l'objectif.</p>
|
|
<img src="sol_medium_3.png">
|
|
<p>On obtient alors :</p>
|
|
<img src="sol_medium_4.png" style="width:600px">
|
|
<p>La règle du coloriage pour les cases bleues doit permettre d'obtenir le motif apparaissant dans les deux autres quarts de l'objectif. </p>
|
|
<p>En résumé, on peut obtenir l'objectif avec les règles suivantes :</p>
|
|
<img src="sol_medium_5.png">
|
|
<p>Notez que l'on peut aussi réussir en inversant les couleurs à la première étape; voici l'autre solution :</p>
|
|
<img src="sol_medium_6.png">
|
|
|
|
</div>
|
|
|
|
<div class="hard">
|
|
<p>Observez les motifs formés par tous les carrés de 4 cases qui apparaissent dans l'objectif.</p>
|
|
<img src="sol_hard_0.png">
|
|
<p>On voit qu'il y a 3 types de motifs différents :</p>
|
|
<img src="sol_hard_1.png">
|
|
<p>Il va forcément falloir utiliser ces motifs comme règles de coloriage. Reste à savoir laquelle va correspondre à chaque couleur.</p>
|
|
<p>Pour trouver le motif qui correspond à la règle de coloriage pour le blanc, on découpe l'objectif en 4 carrés (de 16 cases chacun) :</p>
|
|
<img src="sol_hard_2.png">
|
|
<p>On peut alors observer que les deux carrés du haut sont identiques, tandis que les deux carrés du bas présentent tous deux des motifs différents.</p>
|
|
<p>On en déduit que la règle de coloriage du blanc est, parmi les 3 motifs repérés plus haut, celui qui a les deux cases du haut de la même couleur.</p>
|
|
<img src="sol_hard_3.png">
|
|
<p>Une fois que l'on a trouvé la première étape, il reste à utiliser les deux autres motifs repérés comme règles de coloriage pour le vert et pour le bleu. Il n'y a que deux possibilités, que l'on peut tester très rapidement (ou bien sinon on peut réfléchir, mais ça demande ici davantage de temps !).</p>
|
|
<p>En résumé, la solution est :</p>
|
|
<img src="sol_hard_4.png">
|
|
</div>
|
|
|
|
|
|
<h2>C'est de l'informatique !</h2>
|
|
|
|
</div>
|
|
|
|
<!-- task-solution -->
|
|
</body>
|
|
|
|
</html>
|