SNT

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

titres.html (3643B)

      1 <head>
      2 
      3 <meta charset="utf-8"/>
      4 
      5 <style type="text/css" media="screen">
      6     #edcontainer {
      7         display: flex;
      8     }
      9     .edcolumn {
     10         flex: 50%;
     11     }
     12     #editor {
     13         width: 100%;
     14     }
     15     #editout {
     16         width: 100%;
     17     }
     18 </style>
     19 
     20 <script type="text/javascript">
     21 
     22 score = 0;
     23 
     24 data = "";
     25 
     26 API = window.API || window.parent.API;
     27 
     28 function loadSCO() {
     29     if (API) {
     30         API.LMSInitialize("");
     31 
     32         suspend_data = API.LMSGetValue("cmi.suspend_data");
     33 
     34         if (suspend_data) {
     35             data = suspend_data;
     36         }
     37     }
     38 }
     39 
     40 function sendSCO() {
     41     if (API) {
     42         API.LMSSetValue("cmi.core.score.raw", score);
     43         API.LMSSetValue("cmi.suspend_data", data);
     44         API.LMSSetValue("cmi.core.score.lesson_status", "completed");
     45 
     46         API.LMSCommit("");
     47     }
     48 }
     49 
     50 function nextSCO() {
     51     if (API) {
     52         API.LMSSetValue("nav.event","continue"); // Probably Moodle specific
     53         API.LMSFinish("");
     54     }
     55 }
     56 
     57 window.onload = function() {
     58     loadSCO();
     59 }
     60 </script>
     61 
     62 </head>
     63 
     64 <body>
     65 
     66 <h1>Autres tags</h1>
     67 
     68 <p>Il existent de nombreux tags, mais la plupart ont un tag ouvrant
     69 et un tag fermant pour entourer du texte.
     70 Le tag fermant a le même mot clé que le tag ouvrant, avec un "/" en plus
     71 au début, exemple :</p>
     72 
     73 <p><code>&lt;tag&gt; du texte &lt;/tag&gt;</code></p>
     74 
     75 
     76 
     77 <p>Avec ça on peut faire par exemple :
     78 <ul>
     79 <li>
     80     Des titres : <code>&lt;h1&gt; un gros titre &lt;/h1&gt;</code>
     81 </li>
     82 <li>
     83     Des titres plus petits : <code>&lt;h2&gt; un titre plus petit &lt;/h2&gt;</code>
     84 </li>
     85 <li>
     86     Du texte en gras : <code>&lt;b&gt;ce texte est en gras&lt;/b&gt;</code>
     87 </li>
     88 <li>
     89     Du texte en italique : <code>&lt;i&gt;ce texte est en italique&lt;/i&gt;</code>
     90 </li>
     91 </ul>
     92 </p>
     93 
     94 <p>
     95 <b>Écrivez une page avec des titres et du texte en gras et du texte en italique.</b>
     96 Essayez de faire du texte en gras <i><b>et</b></i> en italique.
     97 </p>
     98 
     99 <div id="edcontainer">
    100     <div class="edcolumn">
    101         Code HTML :
    102         <div id="editor"></div>
    103     </div>
    104     <div class="edcolumn">
    105         Résultat :
    106         <iframe id="editout"></iframe>
    107     </div>
    108 </div>
    109 <div id="stats"></div>
    110 
    111 <button onclick="submit();">Valider</button>
    112 <span id="wrong" hidden>❌</span>
    113 
    114 <button id="next" onclick="nextSCO();" hidden>✅ Passer à la suite</button>
    115 
    116 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
    117 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-html.min.js"></script>
    118 <script>
    119 var editor = ace.edit("editor");
    120 var iframe = document.getElementById("editout");
    121 
    122 var num_b = 0;
    123 var num_i = 0;
    124 var num_h = 0;
    125 
    126 editor.setOption('maxLines', 15)
    127 editor.session.setMode("ace/mode/html");
    128 
    129 editor.session.on('change', function() {iframe.srcdoc = editor.getValue();});
    130 
    131 iframe.onload = function() {
    132     var doc = iframe.contentDocument;
    133     var stats = document.getElementById("stats");
    134 
    135     num_b = doc.getElementsByTagName("b").length;
    136     num_i = doc.getElementsByTagName("i").length;
    137     num_h = doc.getElementsByTagName("h1").length + doc.getElementsByTagName("h2").length;
    138     //stats.innerHTML = "Nombre de gras : " + num_bold;
    139 
    140     //for(t of doc.getElementsByTagName("*"))
    141     //    stats.insertAdjacentHTML("beforeend", "<p>"+t.tagName+"</p>");
    142 
    143     
    144 }
    145 
    146 editor.setValue("Du texte ...")
    147 
    148 function submit() {
    149     data = editor.getValue();
    150 
    151     if (num_b > 0 && num_i > 0 && num_h > 0) {
    152         score = 100;
    153         document.getElementById("wrong").hidden = true;
    154         document.getElementById("next").hidden = false;
    155     } else {
    156         document.getElementById("wrong").hidden = false;
    157     }
    158 
    159     sendSCO();
    160 }
    161 
    162 </script>
    163 
    164 </body>
    165 </html>