forked from Open-CT/openct-tasks
229 lines
9.2 KiB
HTML
229 lines
9.2 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 = 'sv';
|
||
</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',
|
||
'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": "sv",
|
||
"version": "sv.01",
|
||
"authors": "Arthur Charguéraud, Mathias Hiron, France-ioi",
|
||
"translators": ["Pär Söderhjelm"],
|
||
"license": "CC BY-SA 3.0",
|
||
"taskPathPrefix": "",
|
||
"modulesPathPrefix": "",
|
||
"browserSupport": [],
|
||
"fullFeedback": true,
|
||
"acceptedAnswers": [],
|
||
"usesRandomSeed": false
|
||
};
|
||
</script>
|
||
<script type="text/javascript">
|
||
var taskStrings = {
|
||
error: "Den nuvarande raden är inte exakt likadan som målet.",
|
||
success: "Bravo, du klarade det !",
|
||
before: "Byt ut",
|
||
after: "mot",
|
||
replacedShape : function(nbReplaced, sameShape) {
|
||
if (sameShape) {
|
||
return "Att byta ut en form mot samma form ändrar inte raden."
|
||
} else if (nbReplaced == 0) {
|
||
return "Raden ändras inte eftersom den form du valt att byta ut inte finns med i raden.";
|
||
} else if (nbReplaced == 1) {
|
||
return "Formen har bytts ut."
|
||
} else {
|
||
return nbReplaced + " former har bytts ut."
|
||
}
|
||
},
|
||
undo: "Ångra ett steg"
|
||
};
|
||
</script>
|
||
<script type="text/javascript" src="shape-paths.js"></script>
|
||
<script type="text/javascript" src="task.js"></script>
|
||
<style>
|
||
body * {
|
||
box-sizing: content-box;
|
||
}
|
||
#solution img {
|
||
border-top: solid black 1px;
|
||
border-bottom: solid black 1px;
|
||
}
|
||
#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>Byta ut former</h1>
|
||
<div id="tabsContainer"></div>
|
||
|
||
<div id="taskContent">
|
||
<div id="zone_1">
|
||
<div class="consigne">
|
||
<p>
|
||
Gör den nuvarande raden likadan som målet med hjälp av byten.
|
||
</p>
|
||
<p>
|
||
Du kan byta en form mot en annan genom att klicka på dessa två former bland de grå knapparna.
|
||
</p>
|
||
<p>
|
||
Om du har kört fast, kan du ångra byten du gjort.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div id="zone_2">
|
||
<p class="instructions">Klicka på två former här nedanför :</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">Nuvarande rad :</div>
|
||
<div class="shapes" id="originShapes"></div>
|
||
</div>
|
||
<div id="targetFrame">
|
||
<div class="areaTitle">Mål :</div>
|
||
<div class="shapes" id="targetShapes"></div>
|
||
</div>
|
||
</div>
|
||
<img src="icon.png" style="display:none">
|
||
</div>
|
||
</div><!-- #task -->
|
||
<div id="solution">
|
||
<h2>Lösning</h2>
|
||
|
||
<div class="easy">
|
||
<p> Här är ersättningarna som behöver göras: </p>
|
||
<img src="sol_easy_repl1sv.png" style="margin-right: 3em">
|
||
<img src="sol_easy_repl2sv.png" style="margin-right: 3em">
|
||
<img src="sol_easy_repl3sv.png">
|
||
<p> Dessa ersättningar omvandlar raden steg för steg enligt följande: </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> Låt oss börja med att byta ut kvadraten mot uppochnedvända triangeln, och sedan cirkeln mot kvadraten: </p>
|
||
<img src="sol_medium_repl1sv.png" style="margin-right: 3em">
|
||
<img src="sol_medium_repl2sv.png">
|
||
<p> Dessa ersättningar omvandlar raden steg för steg enligt följande: </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> Nu återstår det att byta ut stjärnan mot den blå triangeln och den blå triangeln mot stjärnan, så här: </p>
|
||
<img src="sol_medium_step2b.png">
|
||
<p> Men för att göra detta är det nödvändigt att använda en tredje form, till exempel en romb. Vi gör 3 ersättningar: </p>
|
||
<img src="sol_medium_repl3sv.png" style="margin-right: 3em">
|
||
<img src="sol_medium_repl4sv.png" style="margin-right: 3em">
|
||
<img src="sol_medium_repl5sv.png">
|
||
<p> Dessa ersättningar omvandlar raden steg för steg till önskat resultat: </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> Låt oss titta på de substitutioner som behöver göras utifrån den gula stjärnan. Stjärnan måste ersättas med en grön kvadrat. Den gröna kvadraten måste bytas ut med en röd romb. Och du måste ersätta den röda romben med den gula stjärnan. </P>
|
||
<img src="sol_hard_step0.png">
|
||
<p> För att göra dessa byten är det nödvändigt att använda en ytterligare form som inte finns med i den ursprungliga raden: korset. Följande ersättningar utförs: </p>
|
||
<img src="sol_hard_repl2sv.png" style="width: 360px">
|
||
<p> Vi får då följande halvfärdiga resultat: </p>
|
||
<img src="sol_hard_step1.png">
|
||
<p> Jämför nu den raden med det önskade målet, som är: </p>
|
||
<img src="sol_hard_step2.png">
|
||
<p> För att uppnå målet behöver du byta den blå triangeln mot den rosa uppochnervända triangeln, den rosa uppochnervända triangeln mot cirkeln, och cirkeln mot den blå triangeln. </p>
|
||
<p> Precis som tidigare måste en ytterligare form användas för att göra ersättningarna. Vi kan återigen använda korset och göra följande ersättningar: </p>
|
||
<img src="sol_hard_repl1sv.png">
|
||
</Div>
|
||
</div>
|
||
</body>
|
||
</html>
|