forked from Open-CT/openct-tasks
178 lines
9.2 KiB
HTML
178 lines
9.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8"></meta>
|
|
<title>2018-FR-04-whos-there</title>
|
|
<script>
|
|
window.stringsLanguage = 'fi';
|
|
</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', 'randomGenerator-1.0'
|
|
]);
|
|
</script>
|
|
<script class="remove" type="text/javascript">
|
|
var json = {
|
|
"id": "http://castor-informatique.fr/tasks/2017/2017-FR-05-draw-shapes/",
|
|
"language": "fi",
|
|
"version": "fi.01",
|
|
"authors": "Arthur Charguéraud, Mathias Hiron, France-ioi",
|
|
"translators": ["Timo Poranen, Heikki Hyyrö"],
|
|
"license": "CC BY-SA 3.0",
|
|
"taskPathPrefix": "",
|
|
"modulesPathPrefix": "",
|
|
"browserSupport": [],
|
|
"fullFeedback": true,
|
|
"acceptedAnswers": [],
|
|
"usesRandomSeed": false
|
|
};
|
|
</script>
|
|
<script type="text/javascript">
|
|
var shapeGroup = function (isPair, isFirst) {
|
|
var s = "3 ";
|
|
s += (isFirst) ? "" : "uutta ";
|
|
s += "keskenään\nsamanlaista ";
|
|
s += (isPair) ? "kuvioparia" : "kuviota";
|
|
return s;
|
|
}
|
|
var taskStrings = {
|
|
start: "Aloita",
|
|
restart: "Aloita uudelleen",
|
|
inHouse: "Sisäänkäynti",
|
|
outHouse: "Uloskäynti",
|
|
clickGroup: function (isPair, isFirst) {
|
|
return "Klikkaa tätä aina, kun\ntalossa on " + shapeGroup(isPair, isFirst);
|
|
},
|
|
resume: function (isPair, isFirst) {
|
|
return "Hyvin menee toistaiseksi!\nKlikkaa tätä jatkaaksesi\nja etsi " + shapeGroup(isPair, isFirst);
|
|
},
|
|
errorWrong: function (isPair, isFirst) {
|
|
return "Talossa ei ole " + shapeGroup(isPair, isFirst) + ".";
|
|
},
|
|
errorMiss: function (isPair, isFirst) {
|
|
return "Sinulta puuttui ryhmä, jossa on " + shapeGroup(isPair, isFirst) + ".";
|
|
},
|
|
shapeInHouse: "Nämä kuviot ovat nyt talossa:",
|
|
shapeList: "Tässä on lista erilaisista kuvioista, jotka voivat siirtyä taloon:",
|
|
shapeListInPairs: "Tässä on lista erilaisista kuvioista, joista muodostuvia pareja voi siirtyä taloon:",
|
|
suboptimal: "Et löytänyt kolmea ryhmää.",
|
|
drawInCanvas: "Piirrä tähän muistiinpanoja",
|
|
success: "Onnittelut, ratkaisit tämän version!",
|
|
partial: "Saat hieman pisteitä.",
|
|
failure: "Et saa pisteitä."
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="raphael.sketchpad.js"></script>
|
|
<script type="text/javascript" src="task.js"></script>
|
|
<style>
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
#canvas {
|
|
width: 600px;
|
|
margin: auto;
|
|
border: 1px solid black;
|
|
}
|
|
#canvasButtons {
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
#canvasButtons button {
|
|
padding: 5px 20px;
|
|
}
|
|
#feedback {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
min-height: 1em;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
#valider {
|
|
display: block;
|
|
margin: auto;
|
|
width: 9em;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="editor"></div>
|
|
|
|
<div id="task">
|
|
<h1>Kuka siellä</h1>
|
|
<div id="tabsContainer"></div>
|
|
|
|
<div id="taskContent">
|
|
<div id="zone_1">
|
|
<div class="consigne">
|
|
<p>Kun klikkaat isoa harmaata "Aloita"-nappia, alkaa kuvioita siirtyä taloon <span class="medium bold"> tai lähteä talosta</span> <span class="easy medium">yksi kerrallaan</span><span class="hard">pareittain</span>.</p>
|
|
<p>Piirrä talon alla olevaan kenttään muistiinpanoja (esim. pisteitä, viivoja tms.) auttaaksesi muistamista.</p>
|
|
<p>Alussa talo on tyhjä.</p>
|
|
<p>Klikkaa isoa harmaata nappia aina, kun taloon ilmestyy uusi kolmen keskenään samanlaisten <span class="hard bold">kuvioparien</span><span class="easy medium">kuvioiden</span> ryhmä.</p>
|
|
</div>
|
|
</div>
|
|
<div id="zone_2">
|
|
<div id="housePaper"></div>
|
|
<div id="shapeListPaper"></div>
|
|
<div id="canvas"></div>
|
|
<div id="canvasButtons">
|
|
<button type="button" class="btn btn-default" id="undoTagButton">Peruuta</button>
|
|
<button type="button" class="btn btn-default" id="redoTagButton">Uudelleen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img id="shape1" src="1.png" style="display:none">
|
|
<img id="shape2" src="2.png" style="display:none">
|
|
<img id="shape3" src="3.png" style="display:none">
|
|
<img id="shape4" src="4.png" style="display:none">
|
|
<img id="shape5" src="5.png" style="display:none">
|
|
<img id="house" src="house.png" style="display:none">
|
|
<img id="arrow" src="arrow.png" style="display:none">
|
|
<img src="icon.png" style="display:none">
|
|
</div>
|
|
<div id="solution">
|
|
<h2>Ratkaisu</h2>
|
|
|
|
<div class="easy">
|
|
<p>Voit esimerkiksi piirtää kuvion alle pisteen joka kerta, kun kyseinen kuvio siirtyy taloon. Alla on havainnollistettu, miltä tämä voisi näyttää:</p>
|
|
<img src="sol_easy1.png">
|
|
<p>Kuvan tilanteessa talossa olisi 1 salmiakki, 3 neliötä, 1 kolmio, 3 6-kulmiota ja 2 tähteä. Tällä tapaa on helppo pitää kirjaa, milloin taloon tulee 3 uutta keskenään samanlaista kuviota.</p>
|
|
</div>
|
|
|
|
<div class="medium">
|
|
<p>Tässä versiossa kuvio voi myös poistua talosta.</p>
|
|
<p>Voit esimerkiksi piirtää kuvion alle pisteen joka kerta, kun kyseinen kuvio siirtyy taloon. Pisteen yli voi vetää viivan aikan kun se poistuu talosta. Alla on havainnollistettu, miltä tämä voisi näyttää:</p>
|
|
<img src="sol_medium1.png">
|
|
<p>Kuvan tilanteessa olisimme nähneet kaikkiaan 2 salmiakkia (joista 1 poistunut), 4 neliötä (joista 2 poistunut), 4 kolmiota (joista 3 poistunut) ja 4 6-kulmiota (kaikki vielä talossa). Tällä tapaa on helppo pitää kirjaa, milloin taloon tulee 3 uutta keskenään samanlaista kuviota.</p>
|
|
</div>
|
|
|
|
<div class="hard">
|
|
<p>Tässä versiossa käsiteltiin yksittäisten kuvioiden sijaan kuviopareja.</p>
|
|
<p>Tehtävässä on monia käteviä kirjanpitotapoja. Edhotamme tässä kolmea erilaista.</p>
|
|
<p><b>Ensimmäinen tapa</b> on piirtää työtilan yläosaan vierekkäin kaikki erilaiset kuvioparit, ja piirtää kuvioparin alle piste aina kun kuviopari siirtyy taloon. Esimerkki:</p>
|
|
<img src="sol_hard3.png">
|
|
<p><b>Toinen tapa</b> on hieman suoraviivaisempi. Kaikkien kuvioparien piirtämisen sijaan piirrämmekin työtilaan vasempaan laitaan kaikki yksittäiset kuviot. Nyt meillä on taulukko, jossa vasemman sarakkeen kuvion rivin ja ylärivin kuvion sarakkeen risteymäkohtaan voi kirjata tietoa kyseisten kuvioiden muodostaman kuvioparin lukumäärästä. Esimerkki:</p>
|
|
<img src="sol_hard2.png">
|
|
<p><b>Kolmas tapa</b> ei vaadi kuvioiden piirtämistä. Kun kuviopari siirtyy taloon, piirrämme työtilaan viivan, joka yhdistää kuvioparin kuvioiden sarakkeet. Esimerkki:</p>
|
|
<img src="sol_hard1.png">
|
|
<p>Tämän kolmannen tavan heikkous on, että sitä käyttäen voi olla kahta ensimmäistä tapaa hankalampaa hahmottaa, kuinka monta millaistakin kuvioparia talossa on.</p>
|
|
</div>
|
|
|
|
|
|
<h2>Tämä on tietojenkäsittelyä!</h2>
|
|
<p>Tehtävän onnistunut ratkaisu luultavasti edellytti sen miettimistä, millaisessa muodossa kuvioita koskevaa tietoa kannattaa kirjata muistiinpanoihin. Hyvin monissa tietojenkäsittelyn ongelmissa kohdataan samantapainen peruskysymys: millaista dataa ja missä muodossa sovelluksen kannattaa tallettaa, jotta datan käyttö olisi mahdollisimman kätevää, tehokasta ja palvelisi sovelluksen tavoitetta. Datan käyttöä helpottavaa/tehostavaa tallennustapaa kutsutaan tietojenkäsittelyssä nimellä <b>tietorakenne</b>. Tämän tehtävän ratkaisuehdotuksissa ehdotettiin käytettäväksi varsin yksinkertaisia <b>taulukoita</b>, mutta monissa tietojenkäsittelyn sovelluksissa käytetään huomattavasti monimutkaisempiakin tietorakenteita.</p>
|
|
<p>Katso lisää esim. <a href="https://fi.wikipedia.org/wiki/Tietorakenne" target="_blank">https://fi.wikipedia.org/wiki/Tietorakenne</a>.</p>
|
|
</div>
|
|
<!-- task-solution -->
|
|
</body>
|
|
|
|
</html>
|