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>2018-FR-07-checkers-graph</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',
|
|
'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', 'grid-1.0']);
|
|
</script>
|
|
<script class="remove" type="text/javascript">
|
|
var json = {
|
|
"id": "",
|
|
"language": "sv",
|
|
"version": "sv.01",
|
|
"authors": "France-ioi",
|
|
"translators": ["Fredrik Jansson"],
|
|
"license": "CC BY-SA 3.0",
|
|
"taskPathPrefix": "",
|
|
"modulesPathPrefix": "",
|
|
"browserSupport": [],
|
|
"fullFeedback": true,
|
|
"acceptedAnswers": [],
|
|
"usesRandomSeed": false
|
|
};
|
|
</script>
|
|
<script type="text/javascript">
|
|
var taskStrings = {
|
|
success: "Grattis, du klarade det!",
|
|
errorWrongEdge: "Anslutningen markerad i rött ska inte vara där.",
|
|
errorMissingEdge: "Anslutningen markerad i rött saknas i den nuvarande situationen.",
|
|
connectTokens: function(srcToken, dstToken, direction) {
|
|
var message = srcToken + " är länkad till " + dstToken + " eftersom det är samma ";
|
|
if (direction == "vertical") {
|
|
message += "kolumn.";
|
|
} else {
|
|
message += "rad.";
|
|
}
|
|
return message;
|
|
},
|
|
connexionsInBlue: "Dessa cirklar är blåa i diagrammet.",
|
|
noConnexions: function(srcToken) {
|
|
return "Inga cirklar på samma rad eller kolumn som " + srcToken + ", så vi lägger inte till någon anslutning."
|
|
}
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="task.js"></script>
|
|
<style>
|
|
#board
|
|
{
|
|
width : 450px;
|
|
margin: 10px 10px;
|
|
}
|
|
#board, #graphContainer
|
|
{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
#target
|
|
{
|
|
margin-bottom: 15px;
|
|
}
|
|
#graphContainer
|
|
{
|
|
width: 200px;
|
|
margin: auto;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
}
|
|
.graphTitle {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
#valider
|
|
{
|
|
display: block;
|
|
margin: auto;
|
|
width: 9em;
|
|
}
|
|
#displayHelper_graderMessage {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
#layoutTable {
|
|
margin-top: 20px;
|
|
}
|
|
#layoutTable td {
|
|
vertical-align: top
|
|
}
|
|
td#layoutTableFirstCol {
|
|
width: 480px;
|
|
}
|
|
#message {
|
|
color: green;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="task">
|
|
<h1>Schackbrädet</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>Flytta cirklarna i rutnätet så att ditt diagram har samma anslutningar som målet.</p>
|
|
<p>Det finns en anslutning mellan två cirklar om de är på samma rad eller samma kolumn i rutnätet, precis som tornen på ett schackbräde.</p>
|
|
</div>
|
|
</div>
|
|
<div id="zone_2">
|
|
<table id="layoutTable">
|
|
<tr><td id="layoutTableFirstCol">
|
|
<div id="board"></div>
|
|
<div id="message"></div>
|
|
</td><td>
|
|
<div id="graphContainer">
|
|
<div class="graphTitle">Mål:</div>
|
|
<div id="target"></div>
|
|
<div class="graphTitle">Ditt diagram:</div>
|
|
<div id="current"></div>
|
|
</div>
|
|
</td></tr></table>
|
|
</div>
|
|
</div>
|
|
<!-- <input type="button" value="Valider" id="valider" /> -->
|
|
<img src="icon.png" style="display:none">
|
|
</div><!-- #task -->
|
|
<div id="solution">
|
|
<h2>Lösning</h2>
|
|
|
|
<div class="easy">
|
|
<p>För att få en linje mellan <b>A</b> och <b>B</b> kan vi placera cirklarna på samma rad.</p>
|
|
<img src="sol_easy_1.png">
|
|
<p>För att få en linje mellan <b>B</b> och <b>C</b> måste vi placera <b>C</b> på samma rad eller i samma kolumn som <b>B</b>.</p>
|
|
<p>Men om vi lägger <b>C</b> på samma rad som <b>B</b> får vi också en linje mellan <b>A</b> och <b>C</b> som vi inte vill ha.</p>
|
|
<img src="sol_easy_2.png">
|
|
<p>Vi måste alltså i stället lägga <b>C</b> i samma kolumn som <b>B</b>, t.ex. så här:</p>
|
|
<img src="sol_easy_3.png">
|
|
<p>Återstår att placera ut <b>D</b>. Eftersom vi vill ha en linje från <b>D</b> till <b>C</b>, men inte till <b>B</b> eller <b>A</b>, måste vi placera <b>D</b> på samma rad som <b>C</b>, men inte i samma kolumn som <b>A</b>. Här är en lösning:</p>
|
|
<img src="sol_easy_4.png">
|
|
<p>Det finns många andra lösningar, t.ex. denna där kopplingarna görs tvärtom (rad bytt mot kolumn):</p>
|
|
<img src="sol_easy_5.png">
|
|
</div>
|
|
|
|
<div class="medium">
|
|
<p>För att koppla ihop <b>A</b>, <b>B</b> och <b>C</b> inbördes alla tre, vilket motsvarar en triangel i diagrammet, kan vi placera cirklarna på samma rad.</p>
|
|
<img src="sol_medium_1.png">
|
|
<p>För att sedan förbinda <b>D</b> med <b>B</b>, utan linjer till <b>A</b> eller <b>C</b>, måste vi placera <b>D</b> i samma kolumn som <b>B</b>.</p>
|
|
<img src="sol_medium_2.png">
|
|
<p>Till sist, för att få linjer från <b>E</b> till <b>C</b> och från <b>E</b> till <b>D</b>, måste vi placera <b>E</b> i samma kolumn som <b>C</b> och på samma rad som <b>D</b>.</p>
|
|
<img src="sol_medium_3.png">
|
|
</div>
|
|
|
|
<div class="hard">
|
|
<p>En effektiv metod utnyttjar de trianglar som finns i målbilden. I diagrammet bildas en triangel när de tre cirklarna befinner sig på samma rad eller i samma kolumn.</p>
|
|
<p>För att koppla ihop <b>A</b>, <b>D</b> och <b>G</b> kan vi placera cirklarna på samma rad. Därefter, för att få triangeln <b>D</b> <b>C</b> <b>F</b> kan <b>C</b> och <b>F</b> läggas i samma kolumn som <b>D</b>.</p>
|
|
<img src="sol_hard_1.png">
|
|
<p>För att koppla ihop <b>H</b>, <b>E</b> och <b>C</b> placerar vi <b>H</b> och <b>E</b> på samma rad som <b>C</b>, men undviker någon av de tidigare använda kolumnerna. </p>
|
|
<img src="sol_hard_2.png">
|
|
<p>För att fullborda digrammet ska vi koppla <b>B</b> till <b>E</b> och <b>B</b> till <b>F</b>, vilket går bra om vi lägger <b>B</b> i samma kolumn som <b>E</b> och på samma rad som <b>F</b>.</p>
|
|
<img src="sol_hard_3.png">
|
|
</div>
|
|
|
|
<!-- description of the solution -->
|
|
<h2>Det är datavetenskap!</h2>
|
|
<!-- explanations on why this task is about informatics -->
|
|
<img src="icon.png" style="display:none">
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|