forked from Open-CT/openct-tasks
128 lines
6.6 KiB
HTML
128 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>2018-EN-09-graph-of-shapes</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 = '../../../_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', 'raphaelButton-1.0',
|
|
'platform-pr', 'buttonsAndMessages', 'installationAPI.01',
|
|
'miniPlatform', 'taskStyles-0.1','graph-1.0', 'visual-graph-1.0', 'graph-mouse-1.0']);
|
|
</script>
|
|
<script class="remove" type="text/javascript">
|
|
var json = {
|
|
"id": "",
|
|
"language": "en",
|
|
"version": "en.01",
|
|
"authors": "France-ioi",
|
|
"translators": ["Mohamed El-Sherif", "Eslam Wageed"],
|
|
"license": "CC BY-SA 3.0",
|
|
"taskPathPrefix": "",
|
|
"modulesPathPrefix": "",
|
|
"browserSupport": [],
|
|
"fullFeedback": true,
|
|
"acceptedAnswers": [],
|
|
"usesRandomSeed": false
|
|
};
|
|
</script>
|
|
<script type="text/javascript">
|
|
var instructions = "<br/> Click on the squares to change the shapes.";
|
|
var taskStrings = {
|
|
success: "Congratulations, you have succeeded!",
|
|
errorArrivedEarly: "Beaver has arrived home too early, shapes remain in the instructions list." + instructions,
|
|
errorOneNotGood: "The shape on the arrow in front of Beaver doesn't match the shape of the next instruction." + instructions,
|
|
errorSeveralNotGood: "None of the shapes of the arrows in front of Beaver match the shape of the next instruction." + instructions,
|
|
errorMultiplePath: "Several arrows in front of Beaver have the same shape as the next instruction. Beaver doesn't know where to go." + instructions,
|
|
instructions: "Steps:",
|
|
tryButton: "Start",
|
|
stopButton: "Stop",
|
|
validateAnswer: "Try",
|
|
mustFillAll: "There are still grey squares left. Click on them to fill them with a shape."
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="shape-paths.js"></script>
|
|
<script type="text/javascript" src="task.js"></script>
|
|
<style>
|
|
#graph path, #graph rect
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
#graph {
|
|
text-align: center;
|
|
}
|
|
#displayHelper_graderMessage {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="task">
|
|
<h1>Decorated Path</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>Beaver wants to reach his home. He must go through several steps. Every step has a Decorative Shape.</p>
|
|
<p>Beaver will follow the arrows to reach home but he must compelete all the shapes in the steps.</p>
|
|
<p>Beaver should not face similar shapes in any intersection .</p>
|
|
<p style="margin-bottom:0.3em">Click on the gray steps to change the shape. Help the Beaver to choose the right path to compelete all the steps to go home.</p>
|
|
</div>
|
|
</div>
|
|
<div id="zone_2">
|
|
<div id="graph"></div>
|
|
<div id="topBar"></div>
|
|
</div>
|
|
</div>
|
|
<img src="icon.png" style="display:none">
|
|
<img id="castor" src="castor.png" style="display:none">
|
|
<img id="house" src="house.png" style="display:none">
|
|
</div>
|
|
<div id="solution">
|
|
<h2>Solution</h2>
|
|
<!-- description of the solution -->
|
|
|
|
<div class="easy">
|
|
<p>The instructions consist of 5 shapes. We must therefore pass Beaver by the top path, which has 5 arrows, not the bottom path which has only 4 arrows.</p>
|
|
<p>On the way up, we place in the arrows the forms corresponding to the instructions, in order.</p>
|
|
<img src="sol_easy_1.png">
|
|
<p>For the boxes of the bottom path, we can complete them with any shape, just avoid placing a circle on the way down just after the first junction, as this would conflict with the round used on the way from the top. For example, if we put triangles down, we get the following solution :</p>
|
|
<img src="sol_easy_2.png">
|
|
</div>
|
|
|
|
<div class="medium">
|
|
<p>In the course, there are two "loops": one going up and one going down. If we try to use the bottom loop first, we are immediately stuck.</p>
|
|
<img src="sol_medium_1.png">
|
|
<p>Indeed, the following triangle in the instructions will force Beaver to enter a second time in the bottom loop, but then the forms encountered no longer correspond to the instructions.</p>
|
|
|
|
<p>We must therefore leave Beaver first in the top loop :</p>
|
|
<img src="sol_medium_2.png">
|
|
<p>Then we take Beaver in the bottom loop. Beaver will then go one more round in the loop of the top, before going out again following the final round.</p>
|
|
<img src="sol_medium_3.png">
|
|
</div>
|
|
|
|
<div class="hard">
|
|
<p>In the instructions to follow, a pattern is repeated twice (star, triangle, triangle, star), then we have a star, and another pattern that repeats itself twice (round, round, triangle). Let's start by placing the first pattern on the "loop" consisting of 4 arrows.</p>
|
|
<img src="sol_hard_1.png">
|
|
<p>Then complete with the loop of 3 arrows, located at the top right. As for the loop at the top left, we can fill the boxes with any shape, just avoid putting a star on the first arrow of this loop. Here is a solution :</p>
|
|
<img src="sol_hard_2.png">
|
|
</div>
|
|
|
|
<h2>It's computer science !</h2>
|
|
<!-- explanations on why this task is about informatics -->
|
|
<img src="icon.png" style="display:none">
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|