forked from Open-CT/openct-tasks
228 lines
8.8 KiB
HTML
228 lines
8.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>2018-FR-03-search-replace</title>
|
|
<script class="remove" type="text/javascript" src="../../../_common/modules/pemFioi/importModules-1.1_M.js" id="import-modules"></script>
|
|
<script>
|
|
window.stringsLanguage = 'fr';
|
|
</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', 'drag_lib-2.0', 'raphaelButton-1.0',
|
|
'graph-1.0', 'visual-graph-1.0', 'graph-mouse-1.0', 'randomGenerator-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/2016/2016-FR-07-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 = {
|
|
error: "Le dessin courant ne correspond pas exactement à l'objectif.",
|
|
success: "Bravo, vous avez réussi !",
|
|
before: "Remplacer",
|
|
after: "par",
|
|
replacedShape : function(nbReplaced, sameShape) {
|
|
if (sameShape) {
|
|
return "Remplacer une forme par la même forme ne change pas le dessin courant."
|
|
} else if (nbReplaced == 0) {
|
|
return "Le dessin ne change pas car la première forme sélectionnée n'y apparaît pas.";
|
|
} else if (nbReplaced == 1) {
|
|
return "Un remplacement a été effectué."
|
|
} else {
|
|
return nbReplaced + " remplacements ont été effectués."
|
|
}
|
|
},
|
|
undo: "Annuler une étape"
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="shape-paths.js"></script>
|
|
<script type="text/javascript" src="task.js"></script>
|
|
<style>
|
|
body * {
|
|
box-sizing: content-box;
|
|
}
|
|
#firstShape, #lastShape {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
padding: 5px;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
#taskContent {
|
|
}
|
|
.shape {
|
|
margin: 5px;
|
|
}
|
|
#undoBtnContainer {
|
|
text-align: center;
|
|
margin: 15px 0;
|
|
}
|
|
#taskProcess {
|
|
position: relative;
|
|
margin-top: 30px;
|
|
}
|
|
#taskProcess span {
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
height: 100%;
|
|
line-height: 40px;
|
|
}
|
|
.shapes {
|
|
margin-bottom: 5px;
|
|
text-align: center;
|
|
}
|
|
#topBar {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
#topBar * {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
#allShapes {
|
|
width: 500px;
|
|
}
|
|
#beforeAfter {
|
|
margin-top: 2em;
|
|
padding: 0.5em;
|
|
float: left;
|
|
}
|
|
#originFrame, #targetFrame {
|
|
margin-top: 1em;
|
|
padding: 0.5em;
|
|
width: 80%;
|
|
float: right;
|
|
}
|
|
#targetFrame {
|
|
border: 2px solid green;
|
|
}
|
|
#originFrame {
|
|
border: 2px solid #AAAAFF;
|
|
}
|
|
#comment {
|
|
color: green;
|
|
min-height: 1.5em;
|
|
text-align: center;
|
|
}
|
|
.areaTitle {
|
|
text-align: center;
|
|
}
|
|
.instructions {
|
|
margin-left: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="task">
|
|
<h1>Remplacements</h1>
|
|
<div id="tabsContainer"></div>
|
|
|
|
<div id="taskContent">
|
|
<div id="zone_1">
|
|
<div class="consigne">
|
|
<p>
|
|
Rendez le dessin courant identique à l'objectif en faisant des remplacements.
|
|
</p>
|
|
<p>
|
|
Vous pouvez remplacer une forme par une autre en choisissant ces deux formes parmi les boutons gris.
|
|
</p>
|
|
<p>
|
|
Si vous êtes coincé, vous pouvez annuler des étapes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="zone_2">
|
|
<p class="instructions">Choisissez deux formes ci-dessous :</p>
|
|
<div id="topBar">
|
|
<div class="shapes" id="allShapes"></div>
|
|
<input type="button" id="undo">
|
|
</div>
|
|
<div class="shapes" id="beforeAfter"></div>
|
|
<div id="comment"></div>
|
|
<div id="originFrame">
|
|
<div class="areaTitle">Dessin courant :</div>
|
|
<div class="shapes" id="originShapes"></div>
|
|
</div>
|
|
<div id="targetFrame">
|
|
<div class="areaTitle">Objectif :</div>
|
|
<div class="shapes" id="targetShapes"></div>
|
|
</div>
|
|
</div>
|
|
<img src="icon.png" style="display:none">
|
|
</div>
|
|
</div><!-- #task -->
|
|
<div id="solution">
|
|
<h2>Solution</h2>
|
|
|
|
<div class="easy">
|
|
<p>Voici les remplacements à effectuer :</p>
|
|
<img src="sol_easy_repl1.png" style="margin-right:3em">
|
|
<img src="sol_easy_repl2.png" style="margin-right:3em">
|
|
<img src="sol_easy_repl3.png">
|
|
<p>Ces remplacements transforment le dessin étape par étape de la manière suivante :</p>
|
|
<img src="sol_easy_step0.png"><br/>
|
|
<img src="sol_easy_step1.png"><br/>
|
|
<img src="sol_easy_step2.png"><br/>
|
|
<img src="sol_easy_step3.png">
|
|
</div>
|
|
|
|
<div class="medium">
|
|
<p>Commençons par remplacer le carré par le triangle inversé, puis le rond par le carré :</p>
|
|
<img src="sol_medium_repl1.png" style="margin-right:3em">
|
|
<img src="sol_medium_repl2.png">
|
|
<p>Ces remplacements transforment le dessin étape par étape de la manière suivante :</p>
|
|
<img src="sol_medium_step0.png"><br/>
|
|
<img src="sol_medium_step1.png" style="margin-left:7px"><br/>
|
|
<img src="sol_medium_step2.png" style="margin-left:2px">
|
|
<p>À ce stade, il reste à remplacer l'étoile par le triangle, et le triangle par l'étoile, comme illustré ci-dessous :</p>
|
|
<img src="sol_medium_step2b.png">
|
|
<p>Pour échanger ces deux formes, on est obligé de faire intervenir une troisième forme, par exemple un losange. On effectue 3 remplacements :</p>
|
|
<img src="sol_medium_repl3.png" style="margin-right:3em">
|
|
<img src="sol_medium_repl4.png" style="margin-right:3em">
|
|
<img src="sol_medium_repl5.png">
|
|
<p>Ces remplacements transforment le dessin étape par étape jusqu'au résultat souhaité :</p>
|
|
<img src="sol_medium_step2.png" style="margin-left:2px"><br/>
|
|
<img src="sol_medium_step3.png"><br/>
|
|
<img src="sol_medium_step4.png" style="margin-left:4px"><br/>
|
|
<img src="sol_medium_step5.png" style="margin-left:4px">
|
|
</div>
|
|
|
|
<div class="hard">
|
|
<p>Regardons les remplacements à effectuer en partant de l'étoile jaune. Il faut remplacer l'étoile par un carré vert. Il faut remplacer le carré vert par un losange rouge. Et il faut remplacer le losange rouge par l'étoile jaune.</p>
|
|
<img src="sol_hard_step0.png">
|
|
<p>Pour effectuer ces remplacements, il est nécessaire de faire intervenir une forme supplémentaire, qui n'apparaît par dans le dessin initial : la croix. On effectue les remplacements suivants :</p>
|
|
<img src="sol_hard_repl2.png" style="width: 360px">
|
|
<p>On obtient alors le résultat intermédiaire montré ci-dessous :</p>
|
|
<img src="sol_hard_step1.png">
|
|
<p>Comparons maintenant ce dessin à l'objectif souhaité, qui est :</p>
|
|
<img src="sol_hard_step2.png">
|
|
<p>Pour atteindre cet objectif, il faut remplacer le triangle bleu par le triangle inversé rose, remplacer le triangle inversé par le rond, et remplacer le rond par le triangle bleu.</p>
|
|
<p>Ici encore, il faut faire intervenir une autre forme pour effectuer les remplacements. On peut utiliser la croix, et effectuer les remplacements suivants :</p>
|
|
<img src="sol_hard_repl1.png">
|
|
</div>
|
|
|
|
<h2>C'est de l'informatique !</h2>
|
|
|
|
</div> <!-- task-solution -->
|
|
</body>
|
|
</html>
|