SNT

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

style.html (3416B)

      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 = 100;
     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         API.LMSFinish("");
     48     }
     49 }
     50 
     51 function nextSCO() {
     52     if (API) {
     53         API.LMSSetValue("nav.event","continue"); // Probably Moodle specific
     54         API.LMSFinish("");
     55     }
     56 }
     57 
     58 window.onload = function() {
     59     loadSCO();
     60 }
     61 </script>
     62 
     63 </head>
     64 
     65 <body>
     66 
     67 <h1>Langage CSS</h1>
     68 
     69 <p>Pour modifier le style
     70 (taille, couleur, police du texte, organisation graphique de la page)
     71 on utilise  plutôt de langage CSS.
     72 </p>
     73 
     74 <p>
     75     On peut intégrer du code CSS dans un document écrit en HTML en utilisant le
     76     tag <code>&lt;style&gt;</code>.
     77     Le langage CSS est très riche et permet de sélectionner précisement quel
     78     élément on veut modifier et quel style on veut lui donner.
     79     Par exemple le code suivant met les titres <code>h1</code> en rouge :
     80 </p>
     81 
     82 <p><pre><code>&lt;style&gt;
     83     h1 {
     84         color : red;
     85     }
     86 &lt;/style&gt;
     87 </code></pre></p>
     88 
     89 
     90 <p>
     91 <b>Colorez les textes italiques (balise <code>&lt;i&gt;</code>) en bleu (couleur <code>blue</code>), et affichez une phrase contenant de l'italique.</b>
     92 </p>
     93 
     94 <div id="edcontainer">
     95     <div class="edcolumn">
     96         Code HTML :
     97         <div id="editor"></div>
     98     </div>
     99     <div class="edcolumn">
    100         Résultat :
    101         <iframe id="editout"></iframe>
    102     </div>
    103 </div>
    104 <div id="stats"></div>
    105 
    106 <button onclick="sendSCO();">Terminer</button>
    107 (Pas de validation auto ici)
    108 <span id="wrong" hidden>❌</span>
    109 
    110 <button id="next" onclick="nextSCO();" hidden>✅ Passer à la suite</button>
    111 
    112 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
    113 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-html.min.js"></script>
    114 <script>
    115 var editor = ace.edit("editor");
    116 var iframe = document.getElementById("editout");
    117 
    118 var num_br = 0
    119 
    120 editor.setOption('maxLines', 15)
    121 editor.session.setMode("ace/mode/html");
    122 
    123 editor.session.on('change', function() {iframe.srcdoc = editor.getValue();});
    124 
    125 iframe.onload = function() {
    126     var doc = iframe.contentDocument;
    127     var stats = document.getElementById("stats");
    128 
    129     num_br = doc.getElementsByTagName("br").length;
    130     //stats.innerHTML = "Nombre de gras : " + num_bold;
    131 
    132     //for(t of doc.getElementsByTagName("*"))
    133     //    stats.insertAdjacentHTML("beforeend", "<p>"+t.tagName+"</p>");
    134 
    135     
    136 }
    137 
    138 editor.setValue("Du texte ...")
    139 
    140 function submit() {
    141     data = editor.getValue();
    142 
    143     if (num_br >= 2) {
    144         score = 100;
    145         document.getElementById("wrong").hidden = true;
    146         document.getElementById("next").hidden = false;
    147     } else {
    148         document.getElementById("wrong").hidden = false;
    149     }
    150 
    151     sendSCO();
    152 }
    153 
    154 </script>
    155 
    156 </body>
    157 </html>