SNT

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

lignes.html (3304B)

      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>Langage HTML</h1>
     67 
     68 <p>Le langage HTML permet d'écrire le texte du contenu d'une page Web,
     69 mais aussi de définir sa stucture (titres), de mettre des liens, des images,
     70 des métadonnées, ...</p>
     71 
     72 <p>Le principe du langage est d'écrire directement le texte à afficher mais
     73 d'ajouter parfois des <em>tag</em> (étiquettes) qui permettent de délimiter
     74 des zones, insérer des éléments spéciaux, des métadonnées, etc.</p>
     75 
     76 <p>Ces tag sont des motes entourés par des chevrons :
     77 <code>&lt;exemple&gt;</code>. Par exemple, pour passer à la ligne,
     78 on doit utiliser le tag
     79 <code>&lt;br&gt;</code>
     80 </p>
     81 <p>
     82 Vous pouvez écrire du code HTML ci-dessous et voir le résult.
     83 <b>Écrivez 3 lignes de texte.</b>
     84 </p>
     85 
     86 <div id="edcontainer">
     87     <div class="edcolumn">
     88         Code HTML :
     89         <div id="editor"></div>
     90     </div>
     91     <div class="edcolumn">
     92         Résultat :
     93         <iframe id="editout"></iframe>
     94     </div>
     95 </div>
     96 <div id="stats"></div>
     97 
     98 <button onclick="submit();">Valider</button>
     99 <span id="wrong" hidden>❌</span>
    100 
    101 <button id="next" onclick="nextSCO();" hidden>✅ Passer à la suite</button>
    102 
    103 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
    104 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-html.min.js"></script>
    105 <script>
    106 var editor = ace.edit("editor");
    107 var iframe = document.getElementById("editout");
    108 
    109 var num_br = 0
    110 
    111 editor.setOption('maxLines', 15)
    112 editor.session.setMode("ace/mode/html");
    113 
    114 editor.session.on('change', function() {iframe.srcdoc = editor.getValue();});
    115 
    116 iframe.onload = function() {
    117     var doc = iframe.contentDocument;
    118     var stats = document.getElementById("stats");
    119 
    120     num_br = doc.getElementsByTagName("br").length;
    121     //stats.innerHTML = "Nombre de gras : " + num_bold;
    122 
    123     //for(t of doc.getElementsByTagName("*"))
    124     //    stats.insertAdjacentHTML("beforeend", "<p>"+t.tagName+"</p>");
    125 
    126     
    127 }
    128 
    129 editor.setValue("Du texte ...")
    130 
    131 function submit() {
    132     data = editor.getValue();
    133 
    134     if (num_br >= 2) {
    135         score = 100;
    136         document.getElementById("wrong").hidden = true;
    137         document.getElementById("next").hidden = false;
    138     } else {
    139         document.getElementById("wrong").hidden = false;
    140     }
    141 
    142     sendSCO();
    143 }
    144 
    145 </script>
    146 
    147 </body>
    148 </html>