openct-tasks/bebras/2012/2012-SK-03/index.html

82 lines
5.7 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<link class="module" rel="stylesheet" href="../../../_common/modules/pemFioi/taskStyles-0.1.css" id="http://www.france-ioi.org/modules/pemFioi/taskStyles-0.1.css">
<script class="module" src="../../../_common/modules/ext/jquery/1.7/jquery.min.js" id="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script class="module" type="text/javascript" src="../../../_common/modules/ext/json/json2.min.js" id="https://github.com/douglascrockford/JSON-js"></script>
<script class="remove" type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/installation.js" id="http://www.france-ioi.org/modules/integrationAPI.01/installationAPI.01/pemFioi/installation.js"></script>
<script class="remove" type="text/javascript" src="../../../_common/modules/ext/jschannel/jschannel.js"></script>
<script class="proxy module" type="text/javascript" src="../../../_common/modules/integrationAPI.01/official/platform-pr.js" id="http://www.france-ioi.org/modules/integrationAPI.01/official/platform-pr.js"></script>
<script class="module" type="text/javascript" src="../../../_common/modules/pemFioi/beaver-task.js" id="http://www.france-ioi.org/modules/pemFioi/beaver-task.js"></script>
<script class="stdAnswerTypes module" type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/answerTypes.js" id="http://www.france-ioi.org/modules/integrationAPI.01/installationAPI.01/pemFioi/answerTypes.js"></script>
<link class="stdAnswerTypes module" rel="stylesheet" type="text/css" href="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/answerTypes.css" id="http://www.france-ioi.org/modules/integrationAPI.01/installationAPI.01/pemFioi/stdAnsTypes.css" />
<script class="stdButtonsAndMessages module" type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/buttonsAndMessages.js" id="http://www.france-ioi.org/modules/integrationAPI.01/installationAPI.01/pemFioi/buttonsAndMessages.js"></script>
<script class="remove" type="text/javascript" src="../../../_common/modules/integrationAPI.01/official/miniPlatform.js" id="http://www.france-ioi.org/modules/integrationAPI.01/official/miniPlatform.js"></script>
<script class="task" type="text/javascript">
stdAnsTypes.genTaskMultipleChoices(1, [
"1.<img src='2012-SK-03-1.png'>&nbsp;&nbsp;2.<img src='2012-SK-03-1.png'>&nbsp;&nbsp;3.<img src='2012-SK-03-1.png'>&nbsp;&nbsp;4.<img src='2012-SK-03-1.png'>",
"1.<img src='2012-SK-03-1.png'>&nbsp;&nbsp;2.<img src='2012-SK-03-4.png'>&nbsp;&nbsp;3.<img src='2012-SK-03-2.png'>&nbsp;&nbsp;4.<img src='2012-SK-03-3.png'>",
"1.<img src='2012-SK-03-4.png'>&nbsp;&nbsp;2.<img src='2012-SK-03-3.png'>&nbsp;&nbsp;3.<img src='2012-SK-03-2.png'>&nbsp;&nbsp;4.<img src='2012-SK-03-1.png'>",
"1.<img src='2012-SK-03-1.png'>&nbsp;&nbsp;2.<img src='2012-SK-03-2.png'>&nbsp;&nbsp;3.<img src='2012-SK-03-3.png'>&nbsp;&nbsp;4.<img src='2012-SK-03-4.png'>"
], "added", "#answers_2012-SK-03");
</script>
<script class="remove" type="text/javascript">var json = {
"id": "http://castor-informatique.fr/tasks/2012/2012-SK-03/",
"language": "fr",
"version": "fr.01",
"authors": "France-ioi",
"translators": [
],
"license": "CC BY-SA 3.0",
"taskPathPrefix": "",
"modulesPathPrefix": "",
"browserSupport": [
],
"acceptedAnswers": [
"4"
]
};</script>
</head>
<body>
<div id="task">
<h1>Animation</h1>
<p>
Alice veut illustrer son site web avec une animation montrant une
voiture qui se déplace. Pour cela, elle a préparé 4&nbsp;images.
</p>
<p>Dans quel ordre faut-il afficher les images pour donner
l'impression que la voiture se déplace vers la droite&nbsp;?</p>
<div class="reponses" id="answers_2012-SK-03">
</div>
</div><!-- task -->
<div id="solution">
<!-- réponse : D=4
-->
<div class="explications">
<h2>La solution</h2>
<p>La réponse est <span class="2012-SK-03_choice_4">4</span>.</p>
<p>1.<img src='2012-SK-03-1.png' />&nbsp;&nbsp;2.<img src='2012-SK-03-2.png' />&nbsp;&nbsp;3.<img src='2012-SK-03-3.png' />&nbsp;&nbsp;4.<img src='2012-SK-03-4.png' /></p>
<p>En effet, c'est la seule série d'images sur laquelle la voiture dessinée sur la 3ème image se trouve plus à droite que la voiture dessinée sur la 2ème image.</p>
<h2>Culture informatique</h2>
<p>Toutes les vidéos, que ce soit sur un écran de cinéma ou sur un écran d'ordinateur, sont produites en faisant défiler une succession d'images légèrement différentes. Si l'on ne voit pas cette succession mais un mouvement continu, c'est parce que l'oeil n'arrive pas vraiment à distinguer les choses plus rapidement qu'un dixième de seconde. Par exemple, dans un film au cinéma, 24 images sont projetées chaque seconde, de sorte qu'on a l'illusion de la continuité du mouvement des objets et des personnes filmés.</p>
<img src='2012-SK-03.gif' style="float:right"/>
<p>Au début du Web, la seule manière de faire des animations sur une page Internet consistait à utiliser des images animées. Ces animations, appelées "G<span></span>IF animées" étaient tout simplement obtenues en affichant une succession d'images à un rythme précis. Cependant, en raison du faible débit des connexions Internet, le nombre d'images que l'on pouvait utiliser était très limité, de sorte qu'en regardant l'animation, on pouvait facilement distinguer chaque image de la suivante. C'et le cas sur l'image "G<span></span>IF" animée ci-contre.</p>
</div>
</div> <!-- task-solution -->
</body>
</html>