Server : Apache System : Linux ks5.tuic.fr 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64 User : pragmatice ( 1003) PHP Version : 8.2.24 Disable Function : NONE Directory : /home/pragmatice/tuic38/public_html/cities-cartoon/app/ |
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Cities Cartoon</title>
<meta name="description" content="Application Web accompagnant le projet Cities Cartoon" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<link rel="icon" type="image/ico" href="images/favicon.ico" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/cities.css">
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="js/clipboard.min.js" type="text/javascript"></script>
<script src="js/jquery.qrcode.min.js" type="text/javascript"></script>
<script src="js/cities_data.js" type="text/javascript"></script>
<script src="js/cities.js" type="text/javascript"></script>
</head>
<body>
<div class="container ecran_tous ecran_accueil">
<div class="bandeau_haut">
<img src="images/de.png" class="bt_planche_hasard rotation_360" title="une planche au hasard ?" alt="une planche au hasard ?" />
<img class="logo" src="images/logo_cities_128.png" />
<h1>Cities Cartoon</h1>
</div>
<input type='text' class="form-control" id='filtre' placeholder='Filtrer...' />
<button class="btn btn-info bt_decouvrir_monuments">Découvrir et s'entraîner</button>
<img src="images/bt-infos.png" class="bt_infos effet_bouton" data-toggle="modal" data-target="#modale_infos" />
<div style="clear:both;"></div>
<table class="table table-hover table-sm mt-3" id="liste_planches">
<thead>
<tr>
<th>Planches de BD</th>
<th>Auteurs</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="container ecran_tous ecran_planche" style="display:none;">
<div class="bandeau_haut">
<img src="images/bt_retour_64.png" class="bt_retour_accueil effet_bouton" title="Choisir une autre planche" alt="Choisir une autre planche" />
<img src="images/bt_qrcode.png" class="bt_qrcode effet_bouton" title="Partager cette planche" alt="Partager cette planche" />
<img class="logo" src="images/logo_cities_128.png" />
<h1 class="titre_bd"></h1>
</div>
<div class="row mb-3">
<div class="col"><button class="btn btn-block btn-lg btn-primary bt_bd_pdf"><img src="images/icone_imprimer_64.png" /><br />BD en PDF</button></div>
<div class="col"><button class="btn btn-block btn-lg btn-primary bt_bd_image"><img src="images/icone_bd_64.png" /><br />BD en image</button></div>
<div class="col"><button class="btn btn-block btn-lg btn-primary bt_bd_video"><img src="images/icone_video_64.png" /><br />BD en vidéo</button></div>
</div>
<div class="ecran_jeux ecran_jeu_intro">
<div class="row">
<div class="col-0 col-lg-2"></div>
<div class="col-12 col-lg-8">
<img src="images/recherche_objet.png" class="img-fluid bd_3cases" />
<button class="btn btn-block btn-lg btn-success bt_demarrer_jeu mt-3"><b>Retrouver l'objet disparu !</b></button>
</div>
<div class="col-0 col-lg-2"></div>
</div>
</div>
<div class="ecran_jeux ecran_jeu_do ecran_jeu_3" data-jeu="3">
<h3><img data-son="do_q" src="images/bt_ecouter.png" class="effet_bouton bt_ecouter" /> What can you do with the object?</h3>
<div class="bts_sons"></div>
</div>
<div class="ecran_jeux ecran_jeu_monument ecran_jeu_4" data-jeu="4">
<h3><img data-son="monument_q" src="images/bt_ecouter.png" class="effet_bouton bt_ecouter" /> What monument?</h3>
<div class="bts_sons"></div>
</div>
<div class="ecran_jeux ecran_jeu_ville ecran_jeu_5" data-jeu="5">
<h3><img data-son="ville_q" src="images/bt_ecouter.png" class="effet_bouton bt_ecouter" /> What city?</h3>
<div class="bts_sons"></div>
</div>
<div class="ecran_jeux ecran_jeu_pays ecran_jeu_6" data-jeu="6">
<h3><img data-son="pays_q" src="images/bt_ecouter.png" class="effet_bouton bt_ecouter" /> What country?</h3>
<div class="bts_sons"></div>
</div>
<div class="ecran_jeux ecran_jeu_objet ecran_jeu_7" data-jeu="7">
<h3><img data-son="objet_q" src="images/bt_ecouter.png" class="effet_bouton bt_ecouter" /> Click on the correct object!</h3>
<div class="row zone_objets"></div>
</div>
</div>
<div class="container ecran_tous ecran_monuments" style="display:none;">
<div class="bandeau_haut">
<img src="images/bt_retour_64.png" class="bt_retour_accueil effet_bouton" title="Choisir une autre planche" alt="Choisir une autre planche" />
<img class="logo" src="images/logo_cities_128.png" />
<h1>Découvrir et s'entraîner</h1>
</div>
<div>
<h2>Découvrir les monuments</h2>
<ul>
<li>Cliquer sur le nom du monument pour accéder aux <a target="_blank" href="https://lve38.web.ac-grenoble.fr/12-famous-monuments">activités produites par le groupe LVE 38</a>.</li>
<li>Cliquer sur la photo pour l'agrandir.</li>
</ul>
<table class="table table-striped table-sm tableau_monuments">
<thead>
<tr><th></th><th>Monument</th><th>Ville</th><th>Pays</th></tr>
</thead>
<tbody>
<tr><td><img data-m="0" src="images/monuments/monument0.jpg" class="effet_bouton laphoto" /></td><td class="lactivite" onclick="window.open('https://learningapps.org/tools/111/20/watch?id=pkbyrf4vt01', '_blank');">Big Ben</td><td>London</td><td>England United Kingdom</td></tr>
<tr><td><img data-m="1" src="images/monuments/monument1.jpg" class="effet_bouton laphoto" /></td><td class="lactivite" onclick="window.open('https://learningapps.org/show.php?id=pajzh94s216', '_blank');">Edinburgh Castle</td><td>Edinburgh</td><td>Scotland United Kingdom</td></tr>
<tr><td><img data-m="2" src="images/monuments/monument2.jpg" class="effet_bouton laphoto" /></td><td class="lactivite" onclick="window.open('https://learningapps.org/show.php?id=pue6opw0j16', '_blank');">The CN Tower</td><td>Toronto</td><td>Canada</td></tr>
<tr><td><img data-m="3" src="images/monuments/monument3.jpg" class="effet_bouton laphoto" /></td><td class="lactivite" onclick="window.open('https://learningapps.org/show.php?id=pw8vcwu8j16', '_blank');">The Golden Gate Bridge</td><td>San Francisco</td><td>United States of America</td></tr>
<tr><td><img data-m="4" src="images/monuments/monument4.jpg" class="effet_bouton laphoto" /></td><td class="lactivite" onclick="window.open('https://learningapps.org/show.php?id=peoy7483j16', '_blank');">The National Monument of Scotland</td><td>Edinburgh</td><td>Scotland United Kingdom</td></tr>
<tr><td><img data-m="5" src="images/monuments/monument5.jpg" class="effet_bouton laphoto" /></td><td class="lactivite" onclick="window.open('https://learningapps.org/show.php?id=p18ptv0vj16', '_blank');">The Statue of Liberty</td><td>New York</td><td>United States of America</td></tr>
<tr><td><img data-m="6" src="images/monuments/monument6.jpg" class="effet_bouton laphoto" /></td><td class="lactivite" onclick="window.open('https://learningapps.org/show.php?id=pqkeu8bm316', '_blank');">The Sydney Harbour Bridge</td><td>Sydney</td><td>Australia</td></tr>
<tr><td><img data-m="7" src="images/monuments/monument7.jpg" class="effet_bouton laphoto" /></td><td class="lactivite" onclick="window.open('https://learningapps.org/show.php?id=pbasg7qbt16', '_blank');">The Sydney Opera House</td><td>Sydney</td><td>Australia</td></tr>
<tr><td><img data-m="8" src="images/monuments/monument8.jpg" class="effet_bouton laphoto" /></td><td class="lactivite" onclick="window.open('https://learningapps.org/show.php?id=pqifx6so501', '_blank');">The Tower of London</td><td>London</td><td>England United Kingdom</td></tr>
<tr><td><img data-m="9" src="images/monuments/monument9.jpg" class="effet_bouton laphoto" /></td><td class="lactivite" onclick="window.open('https://learningapps.org/show.php?id=pbj25v6y101', '_blank');">Tower Bridge</td><td>London</td><td>England United Kingdom</td></tr>
</tbody>
</table>
<h2>Reconnaître les monuments et s'approprier le lexique</h2>
<ul>
<li>Ces exercices d'entraînement ont été produits avec <a target="_blank" href="https://pragmatice.net/pragmactivites/pragmaquiz/">PragmaQuiz</a>, un générateur de quiz qui propose plusieurs activités pour un même quiz.</li>
<li>On peut ainsi travailler selon différentes modalités : <em>seul, à plusieurs, en collectif au TNI, ...</em></li>
<li>L'application est téléchargeable pour une utilisation sans connexion Internet : <em>cliquer sur l'icône en haut à droite de la page d'accueil de PragmaQuiz.</em></li>
</ul>
<table class="table table-striped table-sm tableau_entrainement">
<tbody>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=123', '_blank');">En - 10 Famous Monuments (i-s)</td><td>Reconnaître 10 monuments anglophones célèbres (association Image-Son)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=124', '_blank');">En - 10 Famous Monuments (t-i)</td><td>Reconnaître 10 monuments anglophones célèbres (association Texte-Image)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=97', '_blank');">En - Colours (i-s)</td><td>Reconnaître les couleurs (association Image-Son)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=98', '_blank');">En - Colours (t-i)</td><td>Reconnaître les couleurs (association Texte-Image)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=129', '_blank');">En - Materials (i-s)</td><td>Reconnaître les matières (association Image-Son)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=130', '_blank');">En - Materials (t-i)</td><td>Reconnaître les matières (association Texte-Image)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=127', '_blank');">En - Shapes (i-s)</td><td>Reconnaître les formes (association Image-Son)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=128', '_blank');">En - Shapes (t-i)</td><td>Reconnaître les formes (association Texte-Image)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=125', '_blank');">En - Sizes (i-s)</td><td>Reconnaître les tailles (association Image-Son)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=126', '_blank');">En - Sizes (t-i)</td><td>Reconnaître les tailles (association Texte-Image)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=73', '_blank');">En - Transportation (i-s)</td><td>Reconnaître les moyens de transport (association Image-Son)</td></tr>
<tr><td onclick="window.open('https://pragmatice.net/pragmactivites/pragmaquiz/app/index.html?idq=74', '_blank');">En - Transportation (t-i)</td><td>Reconnaître les moyens de transport (association Texte-Image)</td></tr>
</tbody>
</table>
</div>
</div>
<!-- Fenêtre modale d'affichage de la BD en image -->
<div class="modal fade" id='modale_image' tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title titre_bd"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<!-- Fenêtre modale d'affichage de la BD en vidéo -->
<div class="modal fade" id='modale_video' tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title titre_bd"></h4>
<button type="button" class="close stopper_video" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<video id="video_planche" controls class="embed-responsive embed-responsive-16by9"></video>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale affichée en cas d'erreur -->
<div class="modal fade" id='modale_erreur' tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Dommage !</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="text-align: center;">
<div><img src="images/smiley_non.gif" /></div>
<button class="btn btn-warning btn-block mt-3" data-dismiss="modal"><b>Ok, je recommence tout !</b></button>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale affichée quand l'objet a été découvert -->
<div class="modal fade" id='modale_fin' tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Bravo ! Tu as réussi ta mission...</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="text-align: center;">
<p></p>
<div class="image_monument"></div>
<div class="row mt-3">
<div class="col-12 col-md-6"><button class="btn btn-warning btn-block mb-1 mb-md-0 bt_planche_hasard" data-dismiss="modal">Lire une BD au hasard</button></div>
<div class="col-12 col-md-6"><button class="btn btn-success btn-block mb-md-0 bt_retour_accueil" data-dismiss="modal">Choisir une autre BD</button></div>
</div>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale d'affichage de l'aimage du monument -->
<div class="modal fade" id='modale_monument' tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<!-- Fenêtre modale d'infos -->
<div class="modal fade" id='modale_infos'>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><img src="images/bt-infos.png" /> À propos de Cities Cartoon...</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Cette application accompagne le projet <a href="https://numerisere.web.ac-grenoble.fr/cities-cartoon-2021-2022" target="_blank">Cities Cartoon</a> proposé aux écoles iséroises par les groupes <a href="https://numerisere.web.ac-grenoble.fr/" target="_blank">numériques</a> et <a href="https://lve38.web.ac-grenoble.fr/" target="_blank">LVE</a> 38.</p>
<table class='table table-striped table-sm'>
<tr><th>Conception et développement</th><td>Eric Chenavier</td></tr>
<tr><th>Icônes</th><td><a href="https://www.flaticon.com/" target="_blank">Flaticon</a></td></tr>
<tr><th>Planches de BD</th><td>conçues avec l'application <a href="https://bdnf.bnf.fr/" target="_blank">"BDnF, la fabrique à BD"</a></td></tr>
<tr><th>Sons des activités</th><td>... obtenus en synthèse vocale sur le site <a href="https://freetts.com/" target="_blank">Free TTS</a></td></tr>
<tr><th>Bruitages</th><td><a href="https://www.universal-soundbank.com/bruitages.htm" target="_blank">Universal Soundbank </a></td></tr>
<tr><th>Frameworks & plugins</th><td><a href="https://getbootstrap.com/" target="_blank">Bootstrap 4</a>, <a href="https://jquery.com/" target="_blank">Jquery</a>, <a href="https://zenorocha.github.io/clipboard.js" target="_blank">Clipboard.js</a> et <a href="https://github.com/jeromeetienne/jquery-qrcode" target="_blank">Jquery.qrcode.js</a></td></tr>
</table>
<div><img src='images/by-nc-sa_impr.png' style='float:right; margin:0 0 10px 10px;' />L'application Cities Cartoon peut être remixée, arrangée, et adaptée à des fins non commerciales, sous réserve de citer la source originale et de la partager selon les mêmes conditions <em>(licence Creative Commons BY NC SA)</em>.</div>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale de partage avec qrcode -->
<div class="modal fade" id="modale_qrcode" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class='aff_qrcode_jeu' style="float:left;">
<div style='width:140px; height:140px; background:#FFF; padding:11px; margin-top:10px;'></div>
</div>
<div style="margin-left:170px;">
<h6>Lien hypertexte</h6>
<div class="input-group"><input id='jeu_lien' type="text" class="form-control" readonly><span class="input-group-btn"><button data-clipboard-target="#jeu_lien" class="btn btn-info bt_copier_lien">Copier</button></span></div>
<h6 style='margin-top:15px;'>Intégration en iframe dans un blog</h6>
<div class="input-group"><input id='jeu_iframe' type="text" class="form-control" readonly><span class="input-group-btn"><button data-clipboard-target="#jeu_iframe" class="btn btn-info bt_copier_iframe">Copier</button></span></div>
</div>
<div style='clear:both;'></div>
</div>
</div>
</div>
</div>
</body>
</html>