forked from Open-CT/openct-tasks
171 lines
7.9 KiB
HTML
171 lines
7.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>2014-CA-02-shout-your-name</title>
|
|
<script>
|
|
window.stringsLanguage = 'fr';
|
|
</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', 'drag_lib-2.0',
|
|
'jschannel', 'platform-pr', 'buttonsAndMessages', 'installationAPI.01', 'randomGenerator-1.0',
|
|
'miniPlatform', 'taskStyles-0.1','graph-1.0', 'visual-graph-1.0']);
|
|
</script>
|
|
<script class="remove" type="text/javascript">
|
|
var json = {
|
|
"id": "http://castor-informatique.fr/tasks/2014/2014-CA-02-shout-your-name/",
|
|
"language": "fr",
|
|
"version": "fr.01",
|
|
"authors": "J.P. Pretti, jpretti@uwaterloo.ca, Canada ; Troy Vasiga, tmjvasiga@uwaterloo.ca, Canada ; Arthur Chargueraud, France-ioi",
|
|
"translators": [],
|
|
"license": "CC BY-NC-SA 3.0",
|
|
"taskPathPrefix": "",
|
|
"modulesPathPrefix": "",
|
|
"browserSupport": [],
|
|
"fullFeedback": true,
|
|
"acceptedAnswers": []
|
|
};
|
|
</script>
|
|
<script>
|
|
var taskStrings = {
|
|
moveNames: "Déplacez les noms pour les mettre dans le bon ordre.",
|
|
success: "Bravo ! Vous avez réussi.",
|
|
failure: "Ce n'est pas le bon ordre. Essayez avec une autre séquence."
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="task.js"></script>
|
|
<style>
|
|
#tree {
|
|
font-family:courier, monospace;
|
|
border: 1px solid black;
|
|
padding: 1em;
|
|
margin: 2em;
|
|
width: 230px;
|
|
float: left;
|
|
}
|
|
#order {
|
|
margin: 1em;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="task">
|
|
<h1>Les discours</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">
|
|
<!-- <table class="task-columns" style="margin-top: -1em"><tr><td> -->
|
|
<p>
|
|
Le diagramme ci-contre représente l'arbre généalogique de Julien,
|
|
avec Paul et Émilie (les parents de Julien), César et Hélène
|
|
(les parents d'Émilie), ainsi que Rodolf et Yasmine (les parents de César).
|
|
</p>
|
|
<p>
|
|
Toutes ces personnes se retrouvent pour une réunion de famille.
|
|
Chaque personne va donner un petit discours, selon le rituel suivant.
|
|
</p>
|
|
<p>
|
|
Lorsqu'une personne reçoit une tape sur l'épaule :
|
|
</p>
|
|
<ul>
|
|
<li>Si ses parents sont absents :
|
|
<ol>
|
|
<li>elle prononce son discours.</li>
|
|
</ol>
|
|
</li>
|
|
<li>Sinon, si ses parents sont présents :
|
|
<ol>
|
|
<li> elle tape sur l'épaule de son père,</li>
|
|
<li> elle attend la fin du discours de son père,</li>
|
|
<li> elle tape sur l'épaule de sa mère,</li>
|
|
<li> elle attend la fin du discours de sa mère,</li>
|
|
<li> elle prononce son propre discours.</li>
|
|
</ol>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
Pour démarrer le rituel, Julien se tape lui-même sur l'épaule.
|
|
</p>
|
|
<p>
|
|
Votre objectif est de retrouver dans quel ordre les personnes réunies ont fait leurs discours.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="zone_2">
|
|
<pre id="tree">
|
|
Rodolf Yasmine
|
|
\ /
|
|
César Hélène
|
|
\ /
|
|
Paul Émilie
|
|
\ /
|
|
Julien
|
|
</pre>
|
|
<div id="order">
|
|
<p>
|
|
<b>Ordre des discours :</b>
|
|
</p>
|
|
<div id='anim'></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<img src="icon.png" style="display:none" >
|
|
|
|
</div><!-- task -->
|
|
<div id="solution">
|
|
|
|
<h2>Solution</h2>
|
|
|
|
<p>Voici les détails du rituel appliquée (qui n'est rien d'autre qu'un algorithme) :</p>
|
|
<p>
|
|
Julien a ses parents, donc il tape sur l'épaule de son père, Paul. <br />
|
|
Paul n'a pas ses parents, il fait son discours. → <b>1) Paul</b> <br />
|
|
Julien tape sur l'épaule de sa mère, Émilie. <br />
|
|
Émilie a ses parents, donc elle tape sur l'épaule de son père, César. <br />
|
|
César a ses parents, donc il tape sur l'épaule de son père, Rodolf. <br />
|
|
Rodolf n'a pas ses parents, il fait son discours. → <b>2) Rodolf</b> <br />
|
|
César tape sur l'épaule de sa mère, Yasmine. <br />
|
|
Yasmine n'a pas ses parents, elle fait son discours. → <b>3) Yasmine</b><br />
|
|
César fait son discours. → <b>4) César</b><br />
|
|
Émilie tape sur l'épaule de sa mère, Hélène. <br />
|
|
Hélène n'a pas ses parents, elle fait son discours. → <b>5) Hélène</b><br />
|
|
Émilie fait son discours. → <b>6) Émilie</b><br />
|
|
Julien fait son discours. → <b>7) Julien</b>
|
|
</p>
|
|
<p>Au final, l'ordre est donc : <span id="textSolution"></span>.</p>
|
|
<pre style="font-family:courier, monospace; padding: 0.5em; margin: 0.2em">
|
|
2:Rodolf 3:Yasmine
|
|
\ /
|
|
4:César 5:Hélène
|
|
\ /
|
|
1:Paul 6:Émilie
|
|
\ /
|
|
7:Julien
|
|
</pre>
|
|
|
|
<h2>C'est de l'informatique !</h2>
|
|
|
|
<p>
|
|
Les « structures arborescentes » sont très utilisées en informatique, que ce soit pour concevoir des algorithmes efficaces ou simplement pour représenter des données de manière structurée. Par exemple, une page web est représentée comme un document au format « HTML », dont les balises organisent implicitement le contenu sous forme d'un arbre.
|
|
</p>
|
|
<p>
|
|
Par exemple, une page web peut contenir plusieurs sections, chaque section peut contenir des tableaux, qui contiennent eux-mêmes des cases, contenant chacune du texte ou des images. Afin d'afficher le contenu de la page, le navigateur traverse la structure d'arbre selon un « ordre de parcours » particulier. Il peut le faire dans différents ordres, selon la méthode adoptée : d'abord obtenir une vision globale de où vont se trouver les tableaux, ou bien d'abord déterminer quelle taille auront les textes et les images se trouvant dans les tableaux.
|
|
</p>
|
|
<p>
|
|
Dans ce sujet, il fallait suivre un ordre de parcours particulier, appelé « ordre post-fix », selon lequel on commence par afficher les branches d'un « noeud » avant d'afficher le noeud lui-même.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|