forked from Open-CT/openct-tasks
297 lines
12 KiB
HTML
297 lines
12 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>2017-EN-08</title>
|
|
<script>
|
|
window.stringsLanguage = 'en';
|
|
</script>
|
|
<script class="remove" type="text/javascript" src="../../../_common/modules/pemFioi/importModules-1.1.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',
|
|
'beav-1.0', 'beaver-task-2.0', 'simulation-2.0', 'raphaelFactory-1.0',
|
|
'delayFactory-1.0', 'simulationFactory-1.0', 'simpleKeyboard-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-08-combine-shapes/",
|
|
"language": "en",
|
|
"version": "fr.01",
|
|
"authors": "Arthur Charguéraud, Mathias Hiron, Nir Lavee, France-ioi",
|
|
"translators": "Mohamed El-Sherif",
|
|
"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 succeeded !",
|
|
error: "Your combination of shapes is not identical to the required shape.",
|
|
syntaxErrorShape: "You can not place a shape here, use another button.",
|
|
syntaxError: function(symbol) {
|
|
return "You can not place any \"" + symbol + "\" at this point, use another button.";
|
|
},
|
|
examplesTitle: "Examples",
|
|
backspace: "Erase"
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="task.js"></script>
|
|
<style>
|
|
#anim_container {
|
|
text-align: center;
|
|
padding-top: 15px;
|
|
}
|
|
#anim {
|
|
display: inline-block;
|
|
}
|
|
#feedback {
|
|
height: 1em;
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.1em;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
#error {
|
|
color: red;
|
|
}
|
|
#validation {
|
|
margin-top: 1em;
|
|
text-align: center;
|
|
}
|
|
#validation input {
|
|
padding: 2px 10px 2px 10px;
|
|
}
|
|
.sectionContainer {
|
|
text-align: center;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
padding-bottom: 10px;
|
|
*zoom: 1; /*IE6/7*/
|
|
*display: inline; /*IE6/7*/
|
|
}
|
|
.sectionBlock {
|
|
vertical-align: bottom;
|
|
display: inline-block;
|
|
*zoom: 1; /*IE6/7*/
|
|
*display: inline; /*IE6/7*/
|
|
}
|
|
.mainDiv {
|
|
text-align: center;
|
|
}
|
|
.exampleTitle {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.targetTitle {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.exampleTitle, .targetTitle {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
#examplesContainer {
|
|
border: 1px solid black;
|
|
margin-top: 15px;
|
|
margin-bottom: 25px;
|
|
width: 320px;
|
|
}
|
|
.paperDiv {
|
|
border: 1px solid black;
|
|
display: inline-block;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
*zoom: 1; /*IE6/7*/
|
|
*display: inline; /*IE6/7*/
|
|
}
|
|
.symbolButton {
|
|
background: #F2F2F2;
|
|
}
|
|
#inputContainer {
|
|
width: 230px;
|
|
}
|
|
#keyboardContainer {
|
|
margin-top: 5px;
|
|
margin-bottom: 20px;
|
|
width: 220px;
|
|
}
|
|
.keyboard_row {
|
|
display: block;
|
|
}
|
|
.keyboard_button {
|
|
width: 40px;
|
|
margin: 5px;
|
|
padding: 9px;
|
|
}
|
|
.keyboard_button_8 {
|
|
width: 80px;
|
|
}
|
|
#inputDiv {
|
|
border: 2px solid black;
|
|
font-size: 16px;
|
|
min-height: 30px;
|
|
width: 220px;
|
|
text-align: left;
|
|
padding-top: 8px;
|
|
}
|
|
#descriptionContainer {
|
|
text-align: left;
|
|
margin-top: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
#leftContainer {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
width: 440px;
|
|
}
|
|
.example {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
margin-left: 3px;
|
|
margin-right: 3px;
|
|
}
|
|
#inputContainer {
|
|
margin-right: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="task">
|
|
<h1>Combining Shapes</h1>
|
|
<div id="tabsContainer"></div>
|
|
<div id="taskContent">
|
|
<div class="mainDiv">
|
|
<div class="sectionContainer" id="leftContainer">
|
|
<div id="descriptionContainer">
|
|
<p>
|
|
Beaver can create drawings by combining three shapes.
|
|
</p>
|
|
<p>
|
|
Study the examples to understand how he does this, then draw the target shape using the three shapes and operators below.
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="sectionContainer" id="examplesContainer">
|
|
<div class="exampleTitle">Examples</div>
|
|
<div id="examples"></div>
|
|
<!-- Filled automatically with divs of the form.
|
|
<div class="example sectionBlock">
|
|
<span class="paperTitle">A+B</span><br>
|
|
<div class="paperDiv" id="paperExample0"></div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
|
|
<div class="sectionContainer" id="controlContainer">
|
|
<div id="inputContainer" class="sectionBlock">
|
|
<div id="symbolsContainer">
|
|
<!-- Automatically filled with divs in this format:
|
|
<div class="symbol sectionBlock">
|
|
<span class="paperTitle">A</span><br>
|
|
<div class="paperDiv" id="paperSymbolA"></div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
<div id="keyboardContainer"></div>
|
|
<div id="inputDiv"> <span id="input"></span></div>
|
|
<!--<input type="text" id="input" value="abc" disabled>-->
|
|
</div>
|
|
<div class="paperDiv sectionBlock" id="paperUser"></div>
|
|
<div class="objectiveContainer sectionBlock">
|
|
<div class="targetTitle">Target Shape</div>
|
|
<div class="paperDiv" id="paperTarget"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<span id="error"></span>
|
|
</div>
|
|
<img src="icon.png" style="display:none">
|
|
</div>
|
|
</div><!-- task -->
|
|
<div id="solution">
|
|
|
|
<h2>Solution</h2>
|
|
|
|
<div class="easy">
|
|
<p>The objective is similar to Form B, from which the center was removed. Thanks to the examples, we notice that the operation "-" makes it possible to withdraw one form to another. We will start with the form B, and remove the form A, which gives the solution:
|
|
<p><b>B -A</b>
|
|
</div>
|
|
|
|
<div class="medium">
|
|
<p>The objective looks like Form B, from which the center was removed, before adding a part of Form C.
|
|
<p>We start by taking the form B and removing the square shape A:
|
|
<center>
|
|
<b>B -A</b><br/>
|
|
<img src="sol_medium_1.png" style="width:100px">
|
|
</center>
|
|
<p>We then want to add the form C:
|
|
<center>
|
|
<b>B -A +C</b><br/>
|
|
<img src="sol_medium_2.png" style="width:100px">
|
|
</center>
|
|
<p>It remains however to remove the top and the bottom of this form C. For this, one can apply #B to keep only the part which is inside this form, and to obtain:
|
|
<center>
|
|
<b>B -A +C #B</b><br/>
|
|
<img src="sol_medium_3.png" style="width:100px">
|
|
</center>
|
|
</div>
|
|
|
|
<div class="hard">There are several solutions, for example :
|
|
<p>The objective looks like an overlay of B and C, from which the outside and the center have been removed.
|
|
<p>We can start by placing C over B :
|
|
<center>
|
|
<b>B +C</b><br/>
|
|
<img src="sol_hard_1.png" style="width:100px">
|
|
</center>
|
|
<p>We then want to remove the outside and the center. Remove the outside is easy: we narrow the result inside a square A by applying #A :
|
|
<center>
|
|
<b>B +C #A</b><br/>
|
|
<img src="sol_hard_2.png" style="width:100px">
|
|
</center>
|
|
<p>It remains to remove the shape in the center, but we do not have this type of form. However, in the bottom and middle example, <b> A + (B #C) </b>, we see that <b> B #C </b> is the shape we want to remove. This gives :
|
|
<center>
|
|
<table style="text-align:center;width:400px"><tr>
|
|
<td>
|
|
<b>B +C #A</b><br/>
|
|
<img src="sol_hard_2.png" style="width:100px">
|
|
</td>
|
|
<td>
|
|
<b>B #C</b><br/>
|
|
<img src="sol_hard_4.png" style="width:100px">
|
|
</td>
|
|
<td>
|
|
<b>B +C #A -(B #C)</b><br/>
|
|
<img src="sol_hard_3.png" style="width:100px">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</center>
|
|
<p>Expression <b>B +C #A -(B #C)</b>therefore produces the goal. There are other ways to get it, for example :
|
|
<ul>
|
|
<li><p><b>B +C -(B #C) #A</b> : the same approach but we remove the center before removing the outside</li></p>
|
|
<li><p><b>C -B #A +(B -C #A)</b> : we take on the one hand C at which we remove the center and the outside,<br/> Which give <b>C -B #A</b>, and we add B to which the center and the outside are removed, which gives <b>B -C #A</b>.</p></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2>It's computer science !</h2>
|
|
|
|
<p> The software used to make computer images is capable of performing superposition operations (here noted <b> + </b>), subtraction (here noted <b> - </b>), or restriction to a zone (here noted <b> # </b>). </p>
|
|
|
|
<p> These operations on the images are very easy to program. For example, to make <b> A + B </b>, it is sufficient, for each pixel (small dot) of the image <b> A </b>, to look at the color of the corresponding pixel in the image <b> B </b>. If the second one is white (transparent), then we keep the pixel of the image <b> A </b>, otherwise we use the color of the pixel of the image <b> B </b>. Applying this reasoning on all the pixels of the image, we obtain the result of the superposition of the image <b> B </b> on the image <b> A </b>. </P>
|
|
|
|
</div> <!-- task-solution -->
|
|
</body>
|
|
</html>
|