forked from Open-CT/openct-tasks
181 lines
8.0 KiB
HTML
181 lines
8.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>2014-CH-07</title>
|
|
<script>
|
|
window.stringsLanguage = 'en';
|
|
</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 = '../../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', 'raphaelButton-1.0', //'drag_lib-2.0',
|
|
'platform-pr', 'buttonsAndMessages', 'installationAPI.01', 'randomGenerator-1.0',
|
|
'miniPlatform', 'taskStyles-0.1','graph-1.0', 'visual-graph-1.0']);
|
|
</script>
|
|
<script class="module" type="text/javascript" src="../../../_common/modules/pemFioi/drag_lib-1.0.js" id="http://www.france-ioi.org/modules/pemFioi/drag_lib.js"></script>
|
|
<script class="remove" type="text/javascript">
|
|
var json = {
|
|
"id": "http://castor-informatique.fr/tasks/2014/2014-CH-07-rectangles/",
|
|
"language": "en",
|
|
"version": "en.01",
|
|
"authors": "Caroline Bösinger, caroline.boesinger@gmx.ch, Switzerland ; Ivo Blöchliger, ivo@bloechligair.ch, Switzerland ; Christian Datzko, christian@datzko.ch, Switzerland ; Arthur Chargueraud, France-ioi",
|
|
"translators": [],
|
|
"license": "CC BY-NC-SA 3.0",
|
|
"taskPathPrefix": "",
|
|
"modulesPathPrefix": "",
|
|
"browserSupport": [],
|
|
"acceptedAnswers": [],
|
|
"fullFeedback": true
|
|
};
|
|
</script>
|
|
<script>
|
|
var stringsLanguage = 'en';
|
|
var taskStrings = {
|
|
takeRedPencil: "Take the red pencil",
|
|
takeBlackPencil: "Take the black pencil",
|
|
move1Cell: "Move one cell forward",
|
|
move2Cells: "Move 2 cells forward",
|
|
move3Cells: "Move 3 cells forward",
|
|
turnLeft: "Turn left",
|
|
turnRight: "Turn right",
|
|
deleteDrawing: "Clear drawing",
|
|
noInstructionProvided: "No instructions provided.",
|
|
executionOver: "Execution completed.",
|
|
repetitionNumber: "Repetition number ",
|
|
robotExitsGrid: "The robot is out of the zone.",
|
|
attempt: "Try",
|
|
stop: "Stop",
|
|
moveInstructions: "Move the instructions in the empty boxes to build the program.",
|
|
success: "Congratulations! You succeeded.",
|
|
failure: "This sequence does not produce the right design. Try again."
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="task.js"></script>
|
|
<style>
|
|
#drawing1, #drawing2 {
|
|
margin-left: 1em;
|
|
}
|
|
#drawing1 {
|
|
margin-top: -0.5em;
|
|
float: right;
|
|
}
|
|
#drawing2 {
|
|
}
|
|
#programming {
|
|
/*border: 1px solid black;*/
|
|
height: 300px;
|
|
width: 440px;
|
|
}
|
|
.columns{
|
|
margin-top: 1em;
|
|
}
|
|
.columns td {
|
|
vertical-align: top;
|
|
padding-right: 1em;
|
|
}
|
|
.column_head {
|
|
font-weight: bold;
|
|
}
|
|
#message {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: red;
|
|
padding: 0.5em;
|
|
height: 1em;
|
|
}
|
|
.buttons input {
|
|
margin-bottom: 5px;
|
|
}
|
|
#textSolution li {
|
|
margin-top: 0.2em;
|
|
}
|
|
.valigntop td {
|
|
vertical-align: top;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="task">
|
|
<h1>Robot Drawing</h1>
|
|
<div id="tabsContainer"></div> <!-- will contain the versions tabs -->
|
|
<div id="taskContent"> <!-- will contain the content of the task -->
|
|
<div id="zone_1">
|
|
<div class="consigne">
|
|
<p>
|
|
<div id="drawing1"></div>
|
|
You have a robot. This robot can move and draw black or red lines.
|
|
</p>
|
|
<p>
|
|
Program the robot to draw the target image.
|
|
</p>
|
|
<p>
|
|
The robot is represented by the green triangle.
|
|
</p>
|
|
<p>Drag the instructions below to Build your program. </p>
|
|
<p><b>Your Program will repeat itself 4 times.</b></p>
|
|
</div>
|
|
</div>
|
|
<div id="zone_2">
|
|
<table class="columns" style="clear: both">
|
|
<tr>
|
|
<td style="width:220px"><div class="column_head">Instructions</div></td>
|
|
<td style="width:220px"><div class="column_head">Build your Program</div></td>
|
|
<td style="width:250px"><div class="column_head">Result after 4 repetitions</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<div id="programming" class="touch"></div>
|
|
</td><td>
|
|
<div id="drawing2" style="margin-top: 1em"></div>
|
|
<div><span id="message"></span></div>
|
|
</td></tr></table>
|
|
|
|
<div class="buttons" style="text-align: center">
|
|
<input id="tryOrReset" type="button" value="Essayer">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="icon.png" style="display:none" >
|
|
<img src="robot.png" style="display:none">
|
|
</div><!-- task -->
|
|
<div id="solution">
|
|
<!--
|
|
<h2>Solution</h2>
|
|
|
|
<table class="valigntop"><tr><td>
|
|
<img src="rectangle_sol1.png" />
|
|
</td><td>
|
|
<p>
|
|
On commence par repérer dans la figure un morceau de figure répété 4 fois, comme par exemple, le morceau numéroté (1) ci-dessous.
|
|
</p>
|
|
<p>
|
|
Ensuite, on cherche la séquence d'instructions permettant de dessiner ce morceau de figure, sans oublier de s'assurer que le robot pointe dans la bonne direction à la fin pour pouvoir continuer les répétitions suivantes correctement.
|
|
</p>
|
|
<p>
|
|
Chacune des 4 répétitions dessine ainsi un quart de la figure, et à la fin, on obtient le résultat souhaité.</p>
|
|
<center><img src="rectangle_sol2.png" style="width:500px" /></center>
|
|
</td></tr></table>
|
|
|
|
<h2>C'est de l'informatique !</h2>
|
|
<p>
|
|
Cet exercice présente le concept de répétition, qui s'appelle en informatique le concept de « boucle ». Ici, la boucle consiste à répéter exactement 4 fois une séquence d'instructions. Cette boucle permet de réduire le nombre d'instructions que l'on doit fournir pour obtenir la figure, en exploitant les symétries de cette figure.
|
|
</p>
|
|
<p>
|
|
De manière plus générale, les boucles peuvent s'exécuter un nombre variable de fois. Par exemple, imaginons un programme qui contrôle des cloches qui sonnent l'heure. Ce programme va lire l'heure, puis répéter l'instruction « sonner le cloche » un nombre de fois égal au nombre d'heures écoulées depuis midi ou minuit.
|
|
</p>
|
|
<p>
|
|
Il existe également des boucles qui s'exécutent jusqu'à ce qu'une certaine condition soit réalisée. Par exemple, si un robot explore un labyrinthe, il va répéter l'action « avancer d'une case » jusqu'à ce que la condition « il y a un mur juste devant » devienne vraie. À ce moment là, le robot est obligé de tourner.
|
|
</p>
|
|
<p>
|
|
Enfin, il existe des boucles qui s'exécutent à l'infini, sans jamais s'arrêter. Par exemple, le programme qui gère un site web est basé sur une « boucle infinie », consistant à répéter l'opération : « si je reçois une requête me demandant le contenu d'une page, alors j'envoie le contenu de cette page ».
|
|
</p>
|
|
-->
|
|
</div> <!-- task-solution -->
|
|
</body>
|
|
</html>
|
|
|