commit 64971ace430a254caf8323a9576721ef1d6d0b2e
parent a8261aa3820bb4dbd1a23ab80c1af2704cf349de
Author: Léo Villeveygoux <l@vgx.fr>
Date: Tue, 29 Jun 2021 15:30:56 +0200
Web: activité sur le langage HTML
Diffstat:
12 files changed, 1116 insertions(+), 0 deletions(-)
diff --git a/web/html/Makefile b/web/html/Makefile
@@ -0,0 +1,3 @@
+html.zip: imsmanifest.xml observation.html lignes.html titres.html lien.html style.html
+ apack $@ $^
+
diff --git a/web/html/cercle.html b/web/html/cercle.html
@@ -0,0 +1,295 @@
+<head>
+
+<meta charset="utf-8"/>
+
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
+
+<style>
+h1,h2 {
+ font-family: Sans;
+}
+
+.stderr {
+ background-color: #fee;
+ color: #900;
+}
+
+.stderr, .stdout {
+ /* display: contents; */ /* uncomment to make print( end='') work */
+ margin: 0px;
+ padding: 0px 0.3em;
+}
+
+.console {
+ max-height: 20em;
+ overflow: auto;
+ border: medium solid black;
+}
+
+.console:empty {
+ display: none;
+}
+
+#feedback {
+ border: solid #aaa;
+ background-color: #eee;
+}
+
+#feedback:empty {
+ display: none;
+}
+
+</style>
+
+<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+<script src="https://unpkg.com/brython@3.9.3/brython.js"></script>
+<script src="https://unpkg.com/brython@3.9.3/brython_stdlib.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-python.min.js"></script>
+
+<script type="text/javascript">
+
+code = "# Écrivez votre code python ici :\nprint(\"Bonjour !\")";
+
+score = 0;
+
+API = window.API || window.parent.API;
+
+function loadSCO() {
+ if (API) {
+ API.LMSInitialize("");
+
+ suspend_data = API.LMSGetValue("cmi.suspend_data");
+
+ if (suspend_data) {
+ code = suspend_data;
+ }
+ }
+}
+
+function sendSCO() {
+ if (API) {
+ API.LMSSetValue("cmi.core.score.raw", score);
+ API.LMSSetValue("cmi.suspend_data", code);
+ API.LMSSetValue("cmi.core.score.lesson_status", "completed");
+
+ API.LMSCommit("");
+ }
+}
+
+function nextSCO() {
+ if (API) {
+ API.LMSSetValue("nav.event","continue"); // Probably Moodle specific
+ API.LMSFinish("");
+ }
+}
+
+// Leaflet stuff
+
+cognac = [45.69, -0.32];
+
+markers = [];
+click_latlng = {"lat":45.69, "lng":-0.32};
+click_func = function() {};
+
+function clear_map() {
+ while (markers.length > 0) {
+ markers.pop().remove();
+ }
+}
+
+function on_map_click(e) {
+ document.getElementById("lastclick").innerHTML = e.latlng.lat+", "+e.latlng.lng;
+ click_latlng = e.latlng;
+ click_func();
+}
+
+window.onload = function() {
+ loadSCO();
+ document.getElementById("code").textContent = code;
+
+ map = L.map('map').setView(cognac, 11);
+ L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+ map.on("click", on_map_click);
+
+ brython();
+}
+</script>
+
+<script type="text/python">
+# Requires Brython and Ace editor
+
+from browser import document, window, html
+from sys import stderr, stdout, settrace
+from traceback import print_exc, extract_stack, extract_tb
+
+def make_max_line_tracer(maxlines):
+ lines = 0
+ def tracer(frame, event, arg):
+ nonlocal lines
+ if event == 'line':
+ lines += 1
+ if lines >= maxlines:
+ raise TimeoutError
+ return tracer
+ return tracer
+
+def exec_code(editor, id):
+ effacer()
+
+ console = document[id + "_console"]
+ console.clear()
+ stderr.write = lambda data : console_target(data, console, True)
+ stdout.write = lambda data : console_target(data, console)
+
+ code = editor.getValue()
+ try:
+ compiled = compile(code, "<" + id + ">", "exec")
+ except SyntaxError:
+ print_exc(limit=0)
+ return
+
+ settrace(make_max_line_tracer(10000)) # increase to allow longer execution
+ try:
+ exec(code)
+ except TimeoutError:
+ settrace(None)
+ print("L'exécution prend trop de temps, abandon.", file=stderr)
+ except Exception as e:
+ settrace(None)
+ tb_len = len(extract_tb(e.__traceback__)) - len(extract_stack())
+ print_exc(limit=-tb_len)
+ finally:
+ settrace(None)
+
+ window.code = code
+ window.score = check()
+ window.sendSCO()
+
+def console_target(data, elt, err=False):
+ elt <= html.PRE(data, Class="stderr" if err else "stdout")
+ elt.scrollTop = elt.scrollHeight
+
+breditors = document.select(".breditor")
+
+for ed_elt in breditors:
+ editor = window.ace.edit(ed_elt.id)
+ editor.session.setMode("ace/mode/python")
+ #editor.setOption('fontSize', '14px')
+ editor.setOption('maxLines', 15)
+
+ console = html.DIV(Class="console", id=ed_elt.id + "_console")
+
+ ed_elt.insertAdjacentElement('afterend', console)
+
+ exec_button = html.BUTTON("Exécuter →")
+ exec_button.bind("click", lambda ev : exec_code(editor, ed_elt.id))
+ ed_elt.insertAdjacentElement('afterend', exec_button)
+
+def feedback(msg):
+ document["feedback"].clear()
+ document["feedback"] <= msg
+
+markers = window.markers
+L = window.L
+map = window.map
+
+def marqueur(lat, lon, message=None):
+ mark=L.marker((lat, lon)).addTo(map)
+ markers.append(mark)
+
+ if message:
+ mark.bindPopup(message)
+
+def cercle(lat, lon, rad, col='red', message=None):
+ mark=L.circle((lat, lon),
+ {"color": col,
+ "fillColor": col,
+ "fillOpacity": 0.5,
+ "radius": rad}
+ ).addTo(map)
+ markers.append(mark)
+
+ if message:
+ mark.bindPopup(message)
+
+
+def dernier_clic():
+ return window.click_latlng["lat"], window.click_latlng["lng"]
+
+def au_clic(func):
+ window.click_func = func
+
+def effacer():
+ window.clear_map()
+
+def check():
+ score = 0
+
+ if len(markers) == 0:
+ feedback("Aucun marqueur ou cercle placé")
+ else:
+ exists = False
+ radius = 0
+ for m in markers:
+ if "_radius" in m:
+ radius = m.getRadius()
+ exists = True
+ if not exists:
+ score = 30
+ feedback("Il y a des marqueurs, mais pas de cercle")
+ elif radius != 10000:
+ score = 60
+ feedback("Le rayon ne fait pas 10km")
+ else:
+ score = 100
+ feedback("Le cercle semble correct, bravo ! ")
+ document["feedback"] <= html.BUTTON("Passer à la suite", onclick="nextSCO();")
+
+ return score
+
+</script>
+
+</head>
+
+<body>
+
+<h1>Un cercle</h1>
+
+<div>
+On peut aussi afficher des cercles : on utilise
+la fonction <code>cercle(latitude, longitude, rayon)</code>
+(le rayon est donné en mètres).
+Ou alors la variante
+<code>cercle(latitude, longitude, rayon, couleur)</code>
+où couleur une du texte (en anglais), exemple :
+</div>
+<pre><code>cercle(45.69, -0.32, 2000, 'blue')
+</code></pre>
+<div>
+<b>
+Écrivez le code python qui dessine un cercle de 10km autour de chez vous.
+</b>
+(même si les mesures sanitaires n'imposent plus d'y rester ...)
+</div>
+<div>
+<i>On pourra encore se servir du fait que les coordonnées du clic sont
+affichées sous la carte.
+</i>
+</div>
+
+<h2>Carte OpenStreetMap</h2>
+
+<div id = "map" style = "width: 900px; height: 580px"></div>
+
+<button onclick="clear_map();">Tout effacer sur la carte</button>
+Coordonnées du dernier clic :
+<span id="lastclick"></span>
+
+<h2>Code Python</h2>
+
+<pre id="code" class="breditor"></pre>
+<div id="feedback"></div>
+
+</body>
+</html>
diff --git a/web/html/edit.html b/web/html/edit.html
@@ -0,0 +1,57 @@
+<head>
+<meta charset="UTF-8">
+<style type="text/css" media="screen">
+ #edcontainer {
+ display: flex;
+ }
+ .edcolumn {
+ flex: 50%;
+ }
+ #editor {
+ width: 100%;
+ }
+ #editout {
+ width: 100%;
+ }
+</style>
+</head>
+
+<div id="edcontainer">
+ <div class="edcolumn">
+ Code HTML :
+ <div id="editor"></div>
+ </div>
+ <div class="edcolumn">
+ Résultat :
+ <iframe id="editout"></iframe>
+ </div>
+</div>
+<div id="stats"></div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-html.min.js"></script>
+<script>
+ var editor = ace.edit("editor");
+ var iframe = document.getElementById("editout");
+
+ editor.setOption('maxLines', 15)
+ editor.session.setMode("ace/mode/html");
+
+ editor.session.on('change', function() {iframe.srcdoc = editor.getValue();});
+
+ iframe.onload = function() {
+ var doc = iframe.contentDocument;
+ var stats = document.getElementById("stats");
+
+ var num_bold = doc.getElementsByTagName("b").length;
+ stats.innerHTML = "Nombre de gras : " + num_bold;
+
+ for(t of doc.getElementsByTagName("*"))
+ stats.insertAdjacentHTML("beforeend", "<p>"+t.tagName+"</p>");
+
+
+ }
+
+ editor.setValue("lol")
+</script>
+
diff --git a/web/html/html.zip b/web/html/html.zip
Binary files differ.
diff --git a/web/html/imsmanifest.xml b/web/html/imsmanifest.xml
@@ -0,0 +1,47 @@
+<manifest identifier="lvgx.SNT.web.html" version="1" xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd http://www.imsglobal.org/xsd/imsmd_rootv1p2p1 imsmd_rootv1p2p1.xsd http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd">
+
+<metadata>
+<schema>ADL SCORM</schema>
+<schemaversion>1.2</schemaversion>
+</metadata>
+
+<organizations default="lvgx">
+ <organization identifier="lvgx">
+ <title>Les langages informatiques du Web</title>
+ <item identifier="observation_item" identifierref="observation_res">
+ <title>Observer une page Web</title>
+ </item>
+ <item identifier="lignes_item" identifierref="lignes_res">
+ <title>HTML : écrire du texte</title>
+ </item>
+ <item identifier="titres_item" identifierref="titres_res">
+ <title>HTML : Écrire des titres, du gras, ...</title>
+ </item>
+ <item identifier="lien_item" identifierref="lien_res">
+ <title>HTML : ajouter des liens, images, ...</title>
+ </item>
+ <item identifier="style_item" identifierref="style_res">
+ <title>Changer le style d'une page Web : CSS</title>
+ </item>
+ </organization>
+</organizations>
+
+<resources>
+ <resource identifier="observation_res" type="webcontent" adlcp:scormtype="sco" href="observation.html">
+ <file href="observation.html"/>
+ </resource>
+ <resource identifier="lignes_res" type="webcontent" adlcp:scormtype="sco" href="lignes.html">
+ <file href="lignes.html"/>
+ </resource>
+ <resource identifier="titres_res" type="webcontent" adlcp:scormtype="sco" href="titres.html">
+ <file href="titres.html"/>
+ </resource>
+ <resource identifier="lien_res" type="webcontent" adlcp:scormtype="sco" href="lien.html">
+ <file href="lien.html"/>
+ </resource>
+ <resource identifier="style_res" type="webcontent" adlcp:scormtype="sco" href="style.html">
+ <file href="style.html"/>
+ </resource>
+</resources>
+
+</manifest>
diff --git a/web/html/lien.html b/web/html/lien.html
@@ -0,0 +1,153 @@
+<head>
+
+<meta charset="utf-8"/>
+
+<style type="text/css" media="screen">
+ #edcontainer {
+ display: flex;
+ }
+ .edcolumn {
+ flex: 50%;
+ }
+ #editor {
+ width: 100%;
+ }
+ #editout {
+ width: 100%;
+ }
+</style>
+
+<script type="text/javascript">
+
+score = 0;
+
+data = "";
+
+API = window.API || window.parent.API;
+
+function loadSCO() {
+ if (API) {
+ API.LMSInitialize("");
+
+ suspend_data = API.LMSGetValue("cmi.suspend_data");
+
+ if (suspend_data) {
+ data = suspend_data;
+ }
+ }
+}
+
+function sendSCO() {
+ if (API) {
+ API.LMSSetValue("cmi.core.score.raw", score);
+ API.LMSSetValue("cmi.suspend_data", data);
+ API.LMSSetValue("cmi.core.score.lesson_status", "completed");
+
+ API.LMSCommit("");
+ }
+}
+
+function nextSCO() {
+ if (API) {
+ API.LMSSetValue("nav.event","continue"); // Probably Moodle specific
+ API.LMSFinish("");
+ }
+}
+
+window.onload = function() {
+ loadSCO();
+}
+</script>
+
+</head>
+
+<body>
+
+<h1>Liens et images</h1>
+
+<p>Le H de HTML vient du mot Hypertexte, c'est à dire du texte avec des liens,
+les liens sont donc extrèmement importants pour le langage HTML, c'est ce qui
+fait que le Web est un réseau de pages connectées.</p>
+
+<p>Pour ajouter des liens il faut utiliser le tag
+<code><a></code> mais il faut ajouter une <em>propriété</em> au tag pour
+pouvoir indiquer l'URL (l'adresse) vers lequel pointe le lien. Exemple :
+</p>
+<p><code><a href="http://example.com/"> texe du lien </a></code></p>
+
+<p>
+<b>Écrivez le code HTML pour avoir un lien vers un article Wikipédia.</b>
+</p>
+
+<p>Vous pouvez aussi essayer d'ajouter une image, il faudra trouver l'adresse
+(URL) de l'image, et l'ajouter à la propriété <code>src</code> du tag
+<code><img></code>, exemple :</p>
+<p><code><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Juvenile_Ragdoll.jpg/534px-Juvenile_Ragdoll.jpg"> </img></code></p>
+
+<div id="edcontainer">
+ <div class="edcolumn">
+ Code HTML :
+ <div id="editor"></div>
+ </div>
+ <div class="edcolumn">
+ Résultat :
+ <iframe id="editout"></iframe>
+ </div>
+</div>
+<div id="stats"></div>
+
+<button onclick="submit();">Valider</button>
+<span id="wrong" hidden>❌</span>
+
+<button id="next" onclick="nextSCO();" hidden>✅ Passer à la suite</button>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-html.min.js"></script>
+<script>
+var editor = ace.edit("editor");
+var iframe = document.getElementById("editout");
+
+var num_a = 0;
+var a_ok = 0;
+
+editor.setOption('maxLines', 15)
+editor.session.setMode("ace/mode/html");
+
+editor.session.on('change', function() {iframe.srcdoc = editor.getValue();});
+
+iframe.onload = function() {
+ var doc = iframe.contentDocument;
+ var stats = document.getElementById("stats");
+
+ num_a = doc.getElementsByTagName("a").length;
+ for(a of doc.getElementsByTagName("a"))
+ if(a.href.match(/http.*wikipedia.org.*/))
+ a_ok = 1;
+ //stats.innerHTML = "Nombre de gras : " + num_bold;
+
+ //for(t of doc.getElementsByTagName("*"))
+ // stats.insertAdjacentHTML("beforeend", "<p>"+t.tagName+"</p>");
+
+
+}
+
+editor.setValue("Du texte ...")
+
+function submit() {
+ data = editor.getValue();
+
+ if (num_a > 0 && a_ok > 0) {
+ score = 100;
+ document.getElementById("wrong").hidden = true;
+ document.getElementById("next").hidden = false;
+ } else {
+ document.getElementById("wrong").hidden = false;
+ }
+
+ sendSCO();
+}
+
+</script>
+
+</body>
+</html>
diff --git a/web/html/lignes.html b/web/html/lignes.html
@@ -0,0 +1,148 @@
+<head>
+
+<meta charset="utf-8"/>
+
+<style type="text/css" media="screen">
+ #edcontainer {
+ display: flex;
+ }
+ .edcolumn {
+ flex: 50%;
+ }
+ #editor {
+ width: 100%;
+ }
+ #editout {
+ width: 100%;
+ }
+</style>
+
+<script type="text/javascript">
+
+score = 0;
+
+data = "";
+
+API = window.API || window.parent.API;
+
+function loadSCO() {
+ if (API) {
+ API.LMSInitialize("");
+
+ suspend_data = API.LMSGetValue("cmi.suspend_data");
+
+ if (suspend_data) {
+ data = suspend_data;
+ }
+ }
+}
+
+function sendSCO() {
+ if (API) {
+ API.LMSSetValue("cmi.core.score.raw", score);
+ API.LMSSetValue("cmi.suspend_data", data);
+ API.LMSSetValue("cmi.core.score.lesson_status", "completed");
+
+ API.LMSCommit("");
+ }
+}
+
+function nextSCO() {
+ if (API) {
+ API.LMSSetValue("nav.event","continue"); // Probably Moodle specific
+ API.LMSFinish("");
+ }
+}
+
+window.onload = function() {
+ loadSCO();
+}
+</script>
+
+</head>
+
+<body>
+
+<h1>Langage HTML</h1>
+
+<p>Le langage HTML permet d'écrire le texte du contenu d'une page Web,
+mais aussi de définir sa stucture (titres), de mettre des liens, des images,
+des métadonnées, ...</p>
+
+<p>Le principe du langage est d'écrire directement le texte à afficher mais
+d'ajouter parfois des <em>tag</em> (étiquettes) qui permettent de délimiter
+des zones, insérer des éléments spéciaux, des métadonnées, etc.</p>
+
+<p>Ces tag sont des motes entourés par des chevrons :
+<code><exemple></code>. Par exemple, pour passer à la ligne,
+on doit utiliser le tag
+<code><br></code>
+</p>
+<p>
+Vous pouvez écrire du code HTML ci-dessous et voir le résult.
+<b>Écrivez 3 lignes de texte.</b>
+</p>
+
+<div id="edcontainer">
+ <div class="edcolumn">
+ Code HTML :
+ <div id="editor"></div>
+ </div>
+ <div class="edcolumn">
+ Résultat :
+ <iframe id="editout"></iframe>
+ </div>
+</div>
+<div id="stats"></div>
+
+<button onclick="submit();">Valider</button>
+<span id="wrong" hidden>❌</span>
+
+<button id="next" onclick="nextSCO();" hidden>✅ Passer à la suite</button>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-html.min.js"></script>
+<script>
+var editor = ace.edit("editor");
+var iframe = document.getElementById("editout");
+
+var num_br = 0
+
+editor.setOption('maxLines', 15)
+editor.session.setMode("ace/mode/html");
+
+editor.session.on('change', function() {iframe.srcdoc = editor.getValue();});
+
+iframe.onload = function() {
+ var doc = iframe.contentDocument;
+ var stats = document.getElementById("stats");
+
+ num_br = doc.getElementsByTagName("br").length;
+ //stats.innerHTML = "Nombre de gras : " + num_bold;
+
+ //for(t of doc.getElementsByTagName("*"))
+ // stats.insertAdjacentHTML("beforeend", "<p>"+t.tagName+"</p>");
+
+
+}
+
+editor.setValue("Du texte ...")
+
+function submit() {
+ data = editor.getValue();
+
+ if (num_br >= 2) {
+ score = 100;
+ document.getElementById("wrong").hidden = true;
+ document.getElementById("next").hidden = false;
+ } else {
+ document.getElementById("wrong").hidden = false;
+ }
+
+ sendSCO();
+}
+
+</script>
+
+</body>
+</html>
diff --git a/web/html/observation.html b/web/html/observation.html
@@ -0,0 +1,91 @@
+<head>
+
+<meta charset="utf-8"/>
+
+<script type="text/javascript">
+
+score = 0;
+
+data = "";
+
+API = window.API || window.parent.API;
+
+function loadSCO() {
+ if (API) {
+ API.LMSInitialize("");
+
+ suspend_data = API.LMSGetValue("cmi.suspend_data");
+
+ if (suspend_data) {
+ data = suspend_data;
+ }
+ }
+}
+
+function sendSCO() {
+ if (API) {
+ API.LMSSetValue("cmi.core.score.raw", score);
+ API.LMSSetValue("cmi.suspend_data", data);
+ API.LMSSetValue("cmi.core.score.lesson_status", "completed");
+
+ API.LMSCommit("");
+ }
+}
+
+function nextSCO() {
+ if (API) {
+ API.LMSSetValue("nav.event","continue"); // Probably Moodle specific
+ API.LMSFinish("");
+ }
+}
+
+function submit() {
+ data = document.getElementById("rep").value;
+
+ if (data == "41") {
+ score = 100;
+ document.getElementById("wrong").hidden = true;
+ document.getElementById("next").hidden = false;
+ } else {
+ document.getElementById("wrong").hidden = false;
+ }
+
+ sendSCO();
+
+
+}
+
+window.onload = function() {
+ loadSCO();
+}
+</script>
+
+</head>
+
+<body>
+
+<h1>Code source d'une page Web</h1>
+
+<p>Les pages Web sont écrites dans des langages informatiques, le plus
+important étant <b>HTML</b> (<i>HyperText Markup Language</i>).</p>
+
+<p>On peut voir le code source HTML d'une page Web avec un clic droit
+→ "Code source de la page" (la formutation peut changer selon les navigateurs).</p>
+
+<p>Ouvrez un onglet avec cette page d'exemple :
+<a href="https://example.com/">https://example.com/</a> ,
+puis observez le code source de la page.</p>
+
+<p>C'est une page assez simple : le code source contient des métadonnées,
+des informations de présentation (style), et le texte du contenu de la page.</p>
+
+<p><b>À Quelle ligne du code source commence le texte du paragraphe affiché sur la page Web (pas le titre) ?</b></p>
+
+
+<input id="rep" type="number" title="ligne"></input>
+<button onclick="submit();">Valider</button>
+<span id="wrong" hidden>❌</span>
+
+<button id="next" onclick="nextSCO();" hidden>✅ Passer à la suite</button>
+</body>
+</html>
diff --git a/web/html/style.html b/web/html/style.html
@@ -0,0 +1,157 @@
+<head>
+
+<meta charset="utf-8"/>
+
+<style type="text/css" media="screen">
+ #edcontainer {
+ display: flex;
+ }
+ .edcolumn {
+ flex: 50%;
+ }
+ #editor {
+ width: 100%;
+ }
+ #editout {
+ width: 100%;
+ }
+</style>
+
+<script type="text/javascript">
+
+score = 100;
+
+data = "";
+
+API = window.API || window.parent.API;
+
+function loadSCO() {
+ if (API) {
+ API.LMSInitialize("");
+
+ suspend_data = API.LMSGetValue("cmi.suspend_data");
+
+ if (suspend_data) {
+ data = suspend_data;
+ }
+ }
+}
+
+function sendSCO() {
+ if (API) {
+ API.LMSSetValue("cmi.core.score.raw", score);
+ API.LMSSetValue("cmi.suspend_data", data);
+ API.LMSSetValue("cmi.core.score.lesson_status", "completed");
+
+ API.LMSCommit("");
+ API.LMSFinish("");
+ }
+}
+
+function nextSCO() {
+ if (API) {
+ API.LMSSetValue("nav.event","continue"); // Probably Moodle specific
+ API.LMSFinish("");
+ }
+}
+
+window.onload = function() {
+ loadSCO();
+}
+</script>
+
+</head>
+
+<body>
+
+<h1>Langage CSS</h1>
+
+<p>Pour modifier le style
+(taille, couleur, police du texte, organisation graphique de la page)
+on utilise plutôt de langage CSS.
+</p>
+
+<p>
+ On peut intégrer du code CSS dans un document écrit en HTML en utilisant le
+ tag <code><style></code>.
+ Le langage CSS est très riche et permet de sélectionner précisement quel
+ élément on veut modifier et quel style on veut lui donner.
+ Par exemple le code suivant met les titres <code>h1</code> en rouge :
+</p>
+
+<p><pre><code><style>
+ h1 {
+ color : red;
+ }
+</style>
+</code></pre></p>
+
+
+<p>
+<b>Colorez les textes italiques (balise <code><i></code>) en bleu (couleur <code>blue</code>), et affichez une phrase contenant de l'italique.</b>
+</p>
+
+<div id="edcontainer">
+ <div class="edcolumn">
+ Code HTML :
+ <div id="editor"></div>
+ </div>
+ <div class="edcolumn">
+ Résultat :
+ <iframe id="editout"></iframe>
+ </div>
+</div>
+<div id="stats"></div>
+
+<button onclick="sendSCO();">Terminer</button>
+(Pas de validation auto ici)
+<span id="wrong" hidden>❌</span>
+
+<button id="next" onclick="nextSCO();" hidden>✅ Passer à la suite</button>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-html.min.js"></script>
+<script>
+var editor = ace.edit("editor");
+var iframe = document.getElementById("editout");
+
+var num_br = 0
+
+editor.setOption('maxLines', 15)
+editor.session.setMode("ace/mode/html");
+
+editor.session.on('change', function() {iframe.srcdoc = editor.getValue();});
+
+iframe.onload = function() {
+ var doc = iframe.contentDocument;
+ var stats = document.getElementById("stats");
+
+ num_br = doc.getElementsByTagName("br").length;
+ //stats.innerHTML = "Nombre de gras : " + num_bold;
+
+ //for(t of doc.getElementsByTagName("*"))
+ // stats.insertAdjacentHTML("beforeend", "<p>"+t.tagName+"</p>");
+
+
+}
+
+editor.setValue("Du texte ...")
+
+function submit() {
+ data = editor.getValue();
+
+ if (num_br >= 2) {
+ score = 100;
+ document.getElementById("wrong").hidden = true;
+ document.getElementById("next").hidden = false;
+ } else {
+ document.getElementById("wrong").hidden = false;
+ }
+
+ sendSCO();
+}
+
+</script>
+
+</body>
+</html>
diff --git a/web/html/titres.html b/web/html/titres.html
@@ -0,0 +1,165 @@
+<head>
+
+<meta charset="utf-8"/>
+
+<style type="text/css" media="screen">
+ #edcontainer {
+ display: flex;
+ }
+ .edcolumn {
+ flex: 50%;
+ }
+ #editor {
+ width: 100%;
+ }
+ #editout {
+ width: 100%;
+ }
+</style>
+
+<script type="text/javascript">
+
+score = 0;
+
+data = "";
+
+API = window.API || window.parent.API;
+
+function loadSCO() {
+ if (API) {
+ API.LMSInitialize("");
+
+ suspend_data = API.LMSGetValue("cmi.suspend_data");
+
+ if (suspend_data) {
+ data = suspend_data;
+ }
+ }
+}
+
+function sendSCO() {
+ if (API) {
+ API.LMSSetValue("cmi.core.score.raw", score);
+ API.LMSSetValue("cmi.suspend_data", data);
+ API.LMSSetValue("cmi.core.score.lesson_status", "completed");
+
+ API.LMSCommit("");
+ }
+}
+
+function nextSCO() {
+ if (API) {
+ API.LMSSetValue("nav.event","continue"); // Probably Moodle specific
+ API.LMSFinish("");
+ }
+}
+
+window.onload = function() {
+ loadSCO();
+}
+</script>
+
+</head>
+
+<body>
+
+<h1>Autres tags</h1>
+
+<p>Il existent de nombreux tags, mais la plupart ont un tag ouvrant
+et un tag fermant pour entourer du texte.
+Le tag fermant a le même mot clé que le tag ouvrant, avec un "/" en plus
+au début, exemple :</p>
+
+<p><code><tag> du texte </tag></code></p>
+
+
+
+<p>Avec ça on peut faire par exemple :
+<ul>
+<li>
+ Des titres : <code><h1> un gros titre </h1></code>
+</li>
+<li>
+ Des titres plus petits : <code><h2> un titre plus petit </h2></code>
+</li>
+<li>
+ Du texte en gras : <code><b>ce texte est en gras</b></code>
+</li>
+<li>
+ Du texte en italique : <code><i>ce texte est en italique</i></code>
+</li>
+</ul>
+</p>
+
+<p>
+<b>Écrivez une page avec des titres et du texte en gras et du texte en italique.</b>
+Essayez de faire du texte en gras <i><b>et</b></i> en italique.
+</p>
+
+<div id="edcontainer">
+ <div class="edcolumn">
+ Code HTML :
+ <div id="editor"></div>
+ </div>
+ <div class="edcolumn">
+ Résultat :
+ <iframe id="editout"></iframe>
+ </div>
+</div>
+<div id="stats"></div>
+
+<button onclick="submit();">Valider</button>
+<span id="wrong" hidden>❌</span>
+
+<button id="next" onclick="nextSCO();" hidden>✅ Passer à la suite</button>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-html.min.js"></script>
+<script>
+var editor = ace.edit("editor");
+var iframe = document.getElementById("editout");
+
+var num_b = 0;
+var num_i = 0;
+var num_h = 0;
+
+editor.setOption('maxLines', 15)
+editor.session.setMode("ace/mode/html");
+
+editor.session.on('change', function() {iframe.srcdoc = editor.getValue();});
+
+iframe.onload = function() {
+ var doc = iframe.contentDocument;
+ var stats = document.getElementById("stats");
+
+ num_b = doc.getElementsByTagName("b").length;
+ num_i = doc.getElementsByTagName("i").length;
+ num_h = doc.getElementsByTagName("h1").length + doc.getElementsByTagName("h2").length;
+ //stats.innerHTML = "Nombre de gras : " + num_bold;
+
+ //for(t of doc.getElementsByTagName("*"))
+ // stats.insertAdjacentHTML("beforeend", "<p>"+t.tagName+"</p>");
+
+
+}
+
+editor.setValue("Du texte ...")
+
+function submit() {
+ data = editor.getValue();
+
+ if (num_b > 0 && num_i > 0 && num_h > 0) {
+ score = 100;
+ document.getElementById("wrong").hidden = true;
+ document.getElementById("next").hidden = false;
+ } else {
+ document.getElementById("wrong").hidden = false;
+ }
+
+ sendSCO();
+}
+
+</script>
+
+</body>
+</html>
diff --git a/web/intro.odt b/web/intro.odt
Binary files differ.
diff --git a/web/intro.pdf b/web/intro.pdf
Binary files differ.
