SNT

Cours de SNT
git clone git://git.vgx.fr/SNT
Log | Files | Refs

meridien.html (7479B)

      1 <head>
      2 
      3 <meta charset="utf-8"/>
      4 
      5 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
      6 
      7 <style>
      8 h1,h2 {
      9     font-family: Sans;
     10 }
     11 
     12 .stderr {
     13     background-color: #fee;
     14     color: #900;
     15 }
     16 
     17 .stderr, .stdout {
     18     /* display: contents; */ /* uncomment to make print( end='') work */
     19     margin: 0px;
     20     padding: 0px 0.3em;
     21 }
     22 
     23 .console {
     24     max-height: 20em;
     25     overflow: auto;
     26     border: medium solid black;
     27 }
     28 
     29 .console:empty {
     30     display: none;
     31 }
     32 
     33 #feedback {
     34     border: solid #aaa;
     35     background-color: #eee;
     36 }
     37 
     38 #feedback:empty {
     39     display: none;
     40 }
     41 
     42 </style>
     43 
     44 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
     45 <script src="https://unpkg.com/brython@3.9.3/brython.js"></script>
     46 <script src="https://unpkg.com/brython@3.9.3/brython_stdlib.js"></script>
     47 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
     48 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-python.min.js"></script>
     49 
     50 <script type="text/javascript">
     51 
     52 code = "# Écrivez votre code python ici :\nprint(\"Bonjour !\")";
     53 
     54 score = 0;
     55 
     56 API = window.API || window.parent.API;
     57 
     58 function loadSCO() {
     59     if (API) {
     60         API.LMSInitialize("");
     61 
     62         suspend_data = API.LMSGetValue("cmi.suspend_data");
     63 
     64         if (suspend_data) {
     65             code = suspend_data;
     66         }
     67     }
     68 }
     69 
     70 function sendSCO() {
     71     if (API) {
     72         API.LMSSetValue("cmi.core.score.raw", score);
     73         API.LMSSetValue("cmi.suspend_data", code);
     74         API.LMSSetValue("cmi.core.score.lesson_status", "completed");
     75 
     76         API.LMSCommit("");
     77     }
     78 }
     79 
     80 function nextSCO() {
     81     if (API) {
     82         API.LMSSetValue("nav.event","continue"); // Probably Moodle specific
     83         API.LMSFinish("");
     84     }
     85 }
     86 
     87 // Leaflet stuff
     88 
     89 cognac = [45.69, -0.32];
     90 
     91 markers = [];
     92 click_latlng = {"lat":45.69, "lng":-0.32};
     93 click_func = function() {};
     94 
     95 function clear_map() {
     96     while (markers.length > 0) {
     97         markers.pop().remove();
     98     }
     99 }
    100 
    101 function on_map_click(e) {
    102     document.getElementById("lastclick").innerHTML = e.latlng.lat+", "+e.latlng.lng;
    103     click_latlng = e.latlng;
    104     click_func();
    105 }
    106 
    107 window.onload = function() {
    108     loadSCO();
    109     document.getElementById("code").textContent = code;
    110     
    111     map = L.map('map').setView([0,0], 1);
    112     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    113     map.on("click", on_map_click);
    114 
    115     brython();
    116 }
    117 </script>
    118 
    119 <script type="text/python">
    120 # Requires Brython and Ace editor
    121 
    122 from browser import document, window, html
    123 from sys import stderr, stdout, settrace
    124 from traceback import print_exc, extract_stack, extract_tb
    125 
    126 def make_max_line_tracer(maxlines):
    127     lines = 0
    128     def tracer(frame, event, arg):
    129         nonlocal lines
    130         if event == 'line':
    131             lines += 1
    132             if lines >= maxlines:
    133                 raise TimeoutError
    134         return tracer
    135     return tracer
    136 
    137 def exec_code(editor, id):
    138     effacer()
    139     
    140     console = document[id + "_console"]
    141     console.clear()
    142     stderr.write = lambda data : console_target(data, console, True)
    143     stdout.write = lambda data : console_target(data, console)
    144 
    145     code = editor.getValue()
    146     try:
    147         compiled = compile(code, "<" + id + ">", "exec")
    148     except SyntaxError:
    149         print_exc(limit=0)
    150         return
    151 
    152     settrace(make_max_line_tracer(10000)) # increase to allow longer execution
    153     try:
    154         exec(code)
    155     except TimeoutError:
    156         settrace(None)
    157         print("L'exécution prend trop de temps, abandon.", file=stderr)
    158     except Exception as e:
    159         settrace(None)
    160         tb_len = len(extract_tb(e.__traceback__)) - len(extract_stack())
    161         print_exc(limit=-tb_len)
    162     finally:
    163         settrace(None)
    164 
    165     window.code = code
    166     window.score = check()
    167     window.sendSCO()
    168 
    169 def console_target(data, elt, err=False):
    170     elt <= html.PRE(data, Class="stderr" if err else "stdout")
    171     elt.scrollTop = elt.scrollHeight
    172 
    173 breditors = document.select(".breditor")
    174 
    175 for ed_elt in breditors:
    176     editor = window.ace.edit(ed_elt.id)
    177     editor.session.setMode("ace/mode/python")
    178     #editor.setOption('fontSize', '14px')
    179     editor.setOption('maxLines', 15)
    180 
    181     console = html.DIV(Class="console", id=ed_elt.id + "_console")
    182 
    183     ed_elt.insertAdjacentElement('afterend', console)
    184 
    185     exec_button = html.BUTTON("Exécuter →")
    186     exec_button.bind("click", lambda ev : exec_code(editor, ed_elt.id))
    187     ed_elt.insertAdjacentElement('afterend', exec_button)
    188 
    189 def feedback(msg):
    190     document["feedback"].clear()
    191     document["feedback"] <= msg
    192     
    193 markers = window.markers
    194 L = window.L
    195 map = window.map
    196 
    197 def marqueur(lat, lon, message=None):
    198     mark=L.marker((lat, lon)).addTo(map)
    199     markers.append(mark)
    200 
    201     if message:
    202         mark.bindPopup(message)
    203 
    204 def cercle(lat, lon, rad, col='red', message=None):
    205     mark=L.circle((lat, lon),
    206                 {"color": col,
    207                  "fillColor": col,
    208                  "fillOpacity": 0.5,
    209                  "radius": rad}
    210                  ).addTo(map)
    211     markers.append(mark)
    212 
    213     if message:
    214         mark.bindPopup(message)
    215     
    216 
    217 def dernier_clic():
    218     return window.click_latlng["lat"], window.click_latlng["lng"]
    219 
    220 def au_clic(func):
    221     window.click_func = func
    222 
    223 def effacer():
    224     window.clear_map()
    225 
    226 def check():
    227     score = 0
    228 
    229     if len(markers) == 0:
    230         feedback("Aucun marqueur placé")
    231     elif len(markers) < 80 :
    232         score = 10
    233         feedback("Pas assez de marqueurs placés")
    234     else:
    235         bad_lon = 0
    236 
    237         same = 0
    238         coords_set = set()
    239         
    240         for m in markers:
    241             latlng = m.getLatLng()
    242             coords = (latlng["lat"], latlng["lng"])
    243             if coords[0]<80 and coords in coords_set:
    244                 same += 1
    245             coords_set.add(coords)
    246             if coords[1] != 0:
    247                bad_lon+=1
    248         if bad_lon >0:
    249             score = 30
    250             feedback("Des marqueurs ne sont pas sur le méridien de Greenwich (mauvaise longitude)")
    251         elif same > 0:
    252             score = 60
    253             feedback("Des marqueurs sont superposés (aux mêmes coordonnées)")
    254         else:
    255             score = 100
    256             feedback("Les marqueurs semblent bien placés, bravo ! ")
    257             document["feedback"] <= html.BUTTON("Passer à la suite", onclick="nextSCO();")
    258 
    259     return score
    260 
    261 </script>
    262 
    263 </head>
    264 
    265 <body>
    266 
    267 <h1>Une ligne de marqueurs</h1>
    268 
    269 <div>
    270 On veut faire une ligne de marqueurs depuis l'équateur jusqu'au pôle nord
    271 en suivant le méridien de Greenwich, avec un marqueur par degré.
    272 <br/>
    273 Au niveau des coordonnées, ça veut dire que le premier sera à (0,0), le suivant
    274 à (1,0), puis (2,0), etc. jusqu'à (86,0) (le pôle nord).
    275 <br/>
    276 On utilise toujours la fonction <code>marqueur(latitude, longitude)</code>,
    277 et cette fois-ci il faudra aussi utiliser une boucle <code>for</code>,
    278 rappel :
    279 </div>
    280 <pre><code>for i in range(10):
    281     print(i)
    282 </code></pre>
    283 est équivalent à :
    284 <pre><code>
    285 print(0)
    286 print(1)
    287 print(2)
    288 print(3)
    289 print(4)
    290 print(5)
    291 print(6)
    292 print(7)
    293 print(8)
    294 print(9)
    295 </code></pre>
    296 <div>
    297 <b>
    298 Écrivez le code python qui dessine la ligne décrite ci-dessus.
    299 </b>
    300 </div>
    301 <div>
    302 </div>
    303 
    304 <h2>Carte OpenStreetMap</h2>
    305 
    306 <div id = "map" style = "width: 900px; height: 580px"></div>
    307 
    308 <button onclick="clear_map();">Tout effacer sur la carte</button>
    309 Coordonnées du dernier clic :
    310 <span id="lastclick"></span>
    311 
    312 <h2>Code Python</h2>
    313 
    314 <pre id="code" class="breditor"></pre>
    315 <div id="feedback"></div>
    316 
    317 </body>
    318 </html>