forked from Open-CT/openct-tasks
548 lines
20 KiB
HTML
548 lines
20 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8"></meta>
|
|
|
|
<title>2018-FR-01-recursive-split</title>
|
|
|
|
<script>
|
|
window.stringsLanguage = 'sv';
|
|
</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', 'grid-1.0',
|
|
'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'
|
|
]);
|
|
</script>
|
|
|
|
<script class="remove" type="text/javascript">
|
|
var json = {
|
|
"id": "http://castor-informatique.fr/tasks/2017/2017-FR-05-draw-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 = {
|
|
success: "Bravo, du klarade det!",
|
|
almost: "Ditt resultat blev inte exakt som målet, men du får ändå en del poäng.",
|
|
error: "Ditt resultat blev inte som målet."
|
|
};
|
|
</script>
|
|
|
|
<script type="text/javascript" src="task.js"></script>
|
|
|
|
<style>
|
|
|
|
/* Layout */
|
|
/* screen < 1100px : 1 seule colonne; */
|
|
/*==================
|
|
Generic elements
|
|
==================*/
|
|
.head-title {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-bottom: 0px;
|
|
}
|
|
.img-arrow {
|
|
width: 60px;
|
|
height: 50px;
|
|
display: block;
|
|
margin: 30px 0 40px 0;
|
|
}
|
|
/* grid */
|
|
.situation {
|
|
width: 210px;
|
|
height: 210px;
|
|
}
|
|
|
|
.situation > div {
|
|
height: 100%;
|
|
}
|
|
#result .situation {
|
|
position: relative;
|
|
float: left;
|
|
}
|
|
.background-0 {
|
|
background-color: white;
|
|
}
|
|
|
|
.background-1 {
|
|
background-color: #99FF99;
|
|
}
|
|
|
|
.background-2 {
|
|
background-color: #3333FF;
|
|
}
|
|
|
|
/*==================
|
|
Animation / question elements
|
|
==================*/
|
|
#anim_container {
|
|
margin-top: 20px;
|
|
position: relative;
|
|
}
|
|
#anim_container:after {
|
|
content: " ";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/* Transformation rules */
|
|
.transformation-area {
|
|
float: left;
|
|
position: relative;
|
|
display: table;
|
|
margin-right: 150px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.transformation {
|
|
margin: 10px 10px 10px 10px;
|
|
display: table;
|
|
position: relative;
|
|
}
|
|
.transformation .before,
|
|
.transformation .middle-arrow,
|
|
.transformation .after,
|
|
.transformation .transformation-text {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
}
|
|
.transformation .before {
|
|
width: 100px;
|
|
height: auto;
|
|
position: relative;
|
|
}
|
|
.transformation .before > div {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 10px;
|
|
border: 1px solid black;
|
|
display: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
}
|
|
.transformation .after .column-wrapper {
|
|
width: 100px;
|
|
height: auto;
|
|
position: relative;
|
|
}
|
|
.transformation .after .column-wrapper > div {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 10px;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
.transformation .after table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.transformation .after table td,
|
|
.transformation .after table th {
|
|
border: 1px solid black;
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
.transformation .title {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0;
|
|
margin-top: 0px;
|
|
/*top: 10px;*/
|
|
width: 100%;
|
|
}
|
|
.transformation-text span {
|
|
color: red;
|
|
text-align: left;
|
|
padding-left: 10px;
|
|
position: absolute;
|
|
width: 180px;
|
|
}
|
|
.easy.transformation-text span {
|
|
top: 175px;
|
|
}
|
|
.medium.transformation-text span, .hard.transformation-text span {
|
|
top: 135px;
|
|
}
|
|
.transformation-bracket {
|
|
position: relative;
|
|
width: 10px;
|
|
margin-left: 5px;
|
|
border-right: 2px solid green;
|
|
border-top: 2px solid green;
|
|
border-bottom: 2px solid green;
|
|
}
|
|
.easy.transformation-bracket {
|
|
top: 115px;
|
|
height: 174px;
|
|
}
|
|
.medium.transformation-bracket, .hard.transformation-bracket {
|
|
top: 23px;
|
|
height: 266px;
|
|
}
|
|
|
|
/* Goal */
|
|
.grid-container {
|
|
/*float: left;*/
|
|
/*margin-bottom: 54px; same as .transformation-area */
|
|
position: absolute;
|
|
right: 60px;
|
|
top: 0px;
|
|
box-sizing: border-box;
|
|
}
|
|
#objective {
|
|
margin-top: 10px;
|
|
}
|
|
#objective table {
|
|
border-collapse: collapse;
|
|
margin: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
table-layout: fixed;
|
|
}
|
|
#objective table td,
|
|
#objective table th {
|
|
border: 1px solid black;
|
|
width: 25%;
|
|
height: 25%;
|
|
}
|
|
#objective.hard_table table td,
|
|
#objective.hard_table table th {
|
|
width: 12.5%;
|
|
height: 12.5%;
|
|
}
|
|
|
|
/*==================
|
|
Result
|
|
==================*/
|
|
|
|
#result {
|
|
padding-bottom: 40px;
|
|
}
|
|
.result-area {
|
|
display: table;
|
|
margin-top: 10px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.result-area > div {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
.sub-title {
|
|
position: absolute;
|
|
text-align: center;
|
|
height: 20px;
|
|
top: -30px;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.result-title {
|
|
display: block;
|
|
position: absolute;
|
|
height: 20px;
|
|
top: -55px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.initial-situation {
|
|
position: relative;
|
|
width: 210px;
|
|
height: 210px;
|
|
border: 1px solid;
|
|
float: left;
|
|
}
|
|
.after1-situation table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.after1-situation table td,
|
|
.after1-situation table th {
|
|
border: 1px solid black;
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
.after2-situation table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.after2-situation table td,
|
|
.after2-situation table th {
|
|
border: 1px solid black;
|
|
width: 25%;
|
|
height: 25%;
|
|
}
|
|
.after3-situation table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.after3-situation table td,
|
|
.after3-situation table th {
|
|
border: 1px solid black;
|
|
width: 12.5%;
|
|
height: 12.5%;
|
|
}
|
|
.situation-hidden {
|
|
width: 45%;
|
|
border: 1px solid;
|
|
border-top: 1px dashed;
|
|
border-bottom: 1px dashed;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
.situation-hidden + .situation-hidden {
|
|
margin-left: 5%;
|
|
}
|
|
.situation-hidden .sub-title {
|
|
margin-top: -25px;
|
|
}
|
|
.hard.transformation {
|
|
margin-bottom: 23px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="task">
|
|
<h1>Färgläggning</h1>
|
|
|
|
<div id="tabsContainer"></div>
|
|
|
|
<div id="taskContent">
|
|
<p id="difficultyWarning" class="hard"></p>
|
|
|
|
<div id="zone_1">
|
|
<div class="consigne">
|
|
<p>
|
|
Denna uppgift börjar med en stor vit kvadrat, som färgläggs enligt regler som du kan ändra.
|
|
</p>
|
|
<p class="easy medium">
|
|
Vi börjar med att dela in den stora kvadraten i 4 mindre kvadrater, gröna eller blå.
|
|
</p>
|
|
<p class="easy medium">
|
|
Vi delar sedan in var och en av dessa kvadrater i 4 ännu mindre kvadrater, <span class="easy">vita, </span>gröna eller blå.
|
|
</p>
|
|
<p class="hard">
|
|
Vi börjar med att dela in denna kvadrat i 4 mindre kvadrater, vita gröna eller blå.
|
|
</p>
|
|
<p class="hard">
|
|
Vi delar sedan in var och en av dessa kvadrater i 4 ännu mindre kvadrater, vita, gröna eller blå.
|
|
</p>
|
|
<p class="hard">
|
|
Sedan delar vi in var och en av dessa kvadrater i 4 pyttesmå kvadrater, vita, gröna eller blå.
|
|
</p>
|
|
<p>
|
|
Ändra reglerna för färgläggningen så att ditt resultat blir som målet!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="zone_2">
|
|
<div id="anim_container">
|
|
<div class="transformation-area">
|
|
<span class="head-title">Regler för färgläggningen</span>
|
|
|
|
<div class="easy medium transformation">
|
|
<div class="before">
|
|
<span class="title">Före</span>
|
|
<div class="background-0"></div>
|
|
<div class="background-1"></div>
|
|
<div class="background-2"></div>
|
|
</div>
|
|
<div class="middle-arrow">
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
</div>
|
|
<div class="after">
|
|
<span class="title">Efter</span>
|
|
<div class="column-wrapper">
|
|
<div class="option-1"></div>
|
|
<div class="option-2"></div>
|
|
<div class="option-3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="easy transformation-bracket"></div>
|
|
<div class="medium transformation-bracket"></div>
|
|
<div class="easy transformation-text"><span>Klicka här</span></div>
|
|
<div class="medium transformation-text"><span>Klicka här</span></div>
|
|
</div>
|
|
|
|
<div class="hard transformation">
|
|
<div class="before">
|
|
<span class="title">Före</span>
|
|
<div class="background-0"></div>
|
|
<div class="background-1"></div>
|
|
<div class="background-2"></div>
|
|
</div>
|
|
<div class="middle-arrow">
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
</div>
|
|
<div class="after">
|
|
<span class="title">Efter</span>
|
|
<div class="column-wrapper">
|
|
<div class="option-1"></div>
|
|
<div class="option-2"></div>
|
|
<div class="option-3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="hard transformation-bracket"></div>
|
|
<div class="hard transformation-text"><span>Klicka här</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<span class="head-title">Mål</span>
|
|
<div id="objective" class="situation"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="result">
|
|
<div class="result-area">
|
|
<!-- Initial state -->
|
|
<div class="initial-situation">
|
|
<span class="sub-title">
|
|
Stora vita kvadraten
|
|
</span>
|
|
</div>
|
|
<div class="middle-arrow">
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
</div>
|
|
<!-- State after 1 transformation -->
|
|
<div class="situation easy medium">
|
|
<span class="sub-title">
|
|
Efter första indelningen
|
|
</span>
|
|
<div class="after1-situation"></div>
|
|
</div>
|
|
<div class="hard">
|
|
<div class="situation">
|
|
<div class="situation-hidden">
|
|
<span class="sub-title">
|
|
Efter 1 indelning
|
|
</span>
|
|
</div>
|
|
|
|
<div class="situation-hidden">
|
|
<span class="sub-title">
|
|
Efter 2 indelningar
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle-arrow">
|
|
<img src="arrow.jpg" class="img-arrow" />
|
|
</div>
|
|
<!-- Final state -->
|
|
<div class="situation easy medium">
|
|
<span class="result-title">
|
|
Resultat
|
|
</span>
|
|
<span class="sub-title">
|
|
Efter 2 indelningar
|
|
</span>
|
|
<div class="after2-situation"></div>
|
|
</div>
|
|
|
|
<div class="situation hard">
|
|
<span class="result-title">
|
|
Resultat
|
|
</span>
|
|
<span class="sub-title">
|
|
Efter 3 indelningar
|
|
</span>
|
|
<div class="after3-situation"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<img src="icon.png" style="display:none">
|
|
</div>
|
|
<!-- task -->
|
|
|
|
<div id="solution">
|
|
<h2>Lösning</h2>
|
|
<div class="easy">
|
|
<p>Efter den första färgläggningen är de två rutorna på högersidan grönfärgade. För att få målets färgläggning måste regeln för färgläggning av en grön ruta motsvara det upprepade motivet på högra halvan av målet. Vi kan alltså ge följande färgläggningsregel:</p>
|
|
<img src="sol_easy_1.png">
|
|
<p>Vi får så ena halvan av målet:</p>
|
|
<img src="sol_easy_2.png" style="width:600px">
|
|
<p>På samma sätt kan man definiera färgläggningsregeln för en blå ruta, utgående från det upprepade motivet på vänstra halvan av målet. </p>
|
|
<p>Målbilden erhålls alltså enligt följande färgläggningsregler:<p>
|
|
<img src="sol_easy_3.png">
|
|
</div>
|
|
|
|
<div class="medium">
|
|
<p>I första steget delar man en stor vit ruta i fyra mindre, som vardera färgas grön eller blå. I målbilden ser man att övre vänstra hörnet är identiskt med det nedre högra, liksom det övre högra med det nedre vänstra. Man kan ta hänsyn till denna symmetri genom t.ex. följande färgläggningsregel:</p>
|
|
<img src="sol_medium_1.png">
|
|
<p>Man får alltså:</p>
|
|
<img src="sol_medium_2.png" style="width:600px">
|
|
<p>Återstår att bestämma reglerna för det andra steget. Färgläggningen för de gröna rutorna ska ge det upprepade mönstret uppe till höger och nere till vänster.</p>
|
|
<img src="sol_medium_3.png">
|
|
<p>Man får nu:</p>
|
|
<img src="sol_medium_4.png" style="width:600px">
|
|
<p>Färgläggningen för de blå rutorna ska motsvara mönstret uppe till vänster och nere till höger. </p>
|
|
<p>Man uppnår alltså målbilden med följande regler:</p>
|
|
<img src="sol_medium_5.png">
|
|
<p>Notera att man likaväl kan invertera färgerna i första steget, vilket ger följande alternativa regler:</p>
|
|
<img src="sol_medium_6.png">
|
|
|
|
</div>
|
|
|
|
<div class="hard">
|
|
<p>Låt oss titta på målets sexton delkvadrater, med fyra små rutor i varje.</p>
|
|
<img src="sol_hard_0.png">
|
|
<p>Det finns bara tre olika sorter:</p>
|
|
<img src="sol_hard_1.png">
|
|
<p>Dessa tre motiv måste alltså var och en svara mot en färgläggningsregel. Man måste bara bestämma vilken som svarar mot vilken färg.</p>
|
|
<p>För att se vilken regel som svarar mot vit ruta delar man målbilden i fyra större kvadrater (med 16 små i varje) :</p>
|
|
<img src="sol_hard_2.png">
|
|
<p>Vi ser att de två övre kvadraterna är identiska, medan de två undre var och en är olika inbördes, och olika de övre.</p>
|
|
<p>Härav kan man sluta sig till att färgläggningsregeln för vitt motsvarar den med två identiska övre kvadrater.</p>
|
|
<img src="sol_hard_3.png">
|
|
<p>När man väl fått detta första steg att utgå från, gäller det att använda de två andra reglerna antingen för blått eller för grönt. Det finns bara två möjligheter, och man kan snabbt prova båda. (Eller försöka tänka ut vilken som måste vara vilken, vilket dock kräver tid och ro, som man inte hade i detta fall..).</p>
|
|
<p>Lösningen är:</p>
|
|
<img src="sol_hard_4.png">
|
|
</div>
|
|
|
|
<h2>Det är datavetenskap!</h2>
|
|
|
|
</div>
|
|
|
|
<!-- task-solution -->
|
|
</body>
|
|
|
|
</html>
|