SNT

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

lien.html (3694B)

      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>Liens et images</h1>
     67 
     68 <p>Le H de HTML vient du mot Hypertexte, c'est à dire du texte avec des liens,
     69 les liens sont donc extrèmement importants pour le langage HTML, c'est ce qui
     70 fait que le Web est un réseau de pages connectées.</p>
     71 
     72 <p>Pour ajouter des liens il faut utiliser le tag
     73 <code>&lt;a&gt;</code> mais il faut ajouter une <em>propriété</em> au tag pour
     74 pouvoir indiquer l'URL (l'adresse) vers lequel pointe le lien. Exemple :
     75 </p>
     76 <p><code>&lt;a href="http://example.com/"&gt; texe du lien &lt;/a&gt;</code></p>
     77 
     78 <p>
     79 <b>Écrivez le code HTML pour avoir un lien vers un article Wikipédia.</b>
     80 </p>
     81 
     82 <p>Vous pouvez aussi essayer d'ajouter une image, il faudra trouver l'adresse
     83 (URL) de l'image, et l'ajouter à la propriété <code>src</code> du tag
     84 <code>&lt;img&gt;</code>, exemple :</p>
     85 <p><code>&lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Juvenile_Ragdoll.jpg/534px-Juvenile_Ragdoll.jpg"&gt; &lt;/img&gt;</code></p>
     86 
     87 <div id="edcontainer">
     88     <div class="edcolumn">
     89         Code HTML :
     90         <div id="editor"></div>
     91     </div>
     92     <div class="edcolumn">
     93         Résultat :
     94         <iframe id="editout"></iframe>
     95     </div>
     96 </div>
     97 <div id="stats"></div>
     98 
     99 <button onclick="submit();">Valider</button>
    100 <span id="wrong" hidden>❌</span>
    101 
    102 <button id="next" onclick="nextSCO();" hidden>✅ Passer à la suite</button>
    103 
    104 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
    105 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-html.min.js"></script>
    106 <script>
    107 var editor = ace.edit("editor");
    108 var iframe = document.getElementById("editout");
    109 
    110 var num_a = 0;
    111 var a_ok = 0;
    112 
    113 editor.setOption('maxLines', 15)
    114 editor.session.setMode("ace/mode/html");
    115 
    116 editor.session.on('change', function() {iframe.srcdoc = editor.getValue();});
    117 
    118 iframe.onload = function() {
    119     var doc = iframe.contentDocument;
    120     var stats = document.getElementById("stats");
    121 
    122     num_a = doc.getElementsByTagName("a").length;
    123     for(a of doc.getElementsByTagName("a"))
    124         if(a.href.match(/http.*wikipedia.org.*/))
    125             a_ok = 1;
    126     //stats.innerHTML = "Nombre de gras : " + num_bold;
    127 
    128     //for(t of doc.getElementsByTagName("*"))
    129     //    stats.insertAdjacentHTML("beforeend", "<p>"+t.tagName+"</p>");
    130 
    131     
    132 }
    133 
    134 editor.setValue("Du texte ...")
    135 
    136 function submit() {
    137     data = editor.getValue();
    138 
    139     if (num_a > 0 && a_ok > 0) {
    140         score = 100;
    141         document.getElementById("wrong").hidden = true;
    142         document.getElementById("next").hidden = false;
    143     } else {
    144         document.getElementById("wrong").hidden = false;
    145     }
    146 
    147     sendSCO();
    148 }
    149 
    150 </script>
    151 
    152 </body>
    153 </html>