forked from Open-CT/openct-tasks
507 lines
16 KiB
HTML
507 lines
16 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8"></meta>
|
|
|
|
<title>2018-FR-01-recursive-split</title>
|
|
|
|
<script>
|
|
window.stringsLanguage = 'en';
|
|
</script>
|
|
|
|
<script class="remove" type="text/javascript" src="../../modules/pemFioi/importModules-1.1_M.js" id="import-modules"></script>
|
|
|
|
<script class="remove" type="text/javascript">
|
|
var modulesPath = '../../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": "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: "Congratulations, you have successfully completed this level!",
|
|
almost: "The result doesn't match the objective precisely, but you still get some points.",
|
|
error: "The result doesn't match the objective."
|
|
};
|
|
</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-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>Recursive Split</h1>
|
|
|
|
<div id="tabsContainer"></div>
|
|
|
|
<div id="taskContent">
|
|
<p id="difficultyWarning" class="hard"></p>
|
|
|
|
<div id="zone_1">
|
|
<div class="consigne">
|
|
<p>
|
|
We start with a white square, that we will color according to some rules that you can change.
|
|
</p>
|
|
<p class="easy medium">
|
|
We start by coloring this square into 4 smaller green or blue squares.
|
|
</p>
|
|
<p class="easy medium">
|
|
We then color each of these squares into 4 smaller squares, <span class="easy">white, </span>green or bleue.
|
|
</p>
|
|
<p class="hard">
|
|
We start with a white square, and colr it into 4 smaller squares, white, green or blue.
|
|
</p>
|
|
<p class="hard">
|
|
We then color each of these squares into 4 smaller squares, white, greeen or blue.
|
|
</p>
|
|
<p class="hard">
|
|
We then color each of these smaller squares into 4 even smaller squares, white, green or blue.
|
|
</p>
|
|
<p>
|
|
Change the coloring rules to obtain the objective.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="zone_2">
|
|
<div id="anim_container">
|
|
<div class="transformation-area">
|
|
<span class="head-title">Coloring rules</span>
|
|
|
|
<div class="easy medium transformation">
|
|
<div class="before">
|
|
<span class="title">Before</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">After</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>Click here</span></div>
|
|
<div class="medium transformation-text"><span>Click here</span></div>
|
|
</div>
|
|
|
|
<div class="hard transformation">
|
|
<div class="before">
|
|
<span class="title">Before</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">After</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>Click here</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<span class="head-title">Objective</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">
|
|
Initial white square
|
|
</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">
|
|
After the first coloring
|
|
</span>
|
|
<div class="after1-situation"></div>
|
|
</div>
|
|
<div class="hard">
|
|
<div class="situation">
|
|
<div class="situation-hidden">
|
|
<span class="sub-title">
|
|
After 1 hidden coloring
|
|
</span>
|
|
</div>
|
|
|
|
<div class="situation-hidden">
|
|
<span class="sub-title">
|
|
Ater 2 hidden colorings
|
|
</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">
|
|
Result
|
|
</span>
|
|
<span class="sub-title">
|
|
After the second coloring
|
|
</span>
|
|
<div class="after2-situation"></div>
|
|
</div>
|
|
|
|
<div class="situation hard">
|
|
<span class="result-title">
|
|
Result
|
|
</span>
|
|
<span class="sub-title">
|
|
After the third coloring
|
|
</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>
|
|
|
|
<h2>It's informatics!</h2>
|
|
|
|
</div>
|
|
|
|
<!-- task-solution -->
|
|
</body>
|
|
|
|
</html>
|