4TQ séance 2
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,428 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Séance 2 · Ranger, nommer, mettre en forme · 4e TQ Agent d'éducation</title>
|
||||
<meta name="description" content="Séance 2 du cours de TIC de 4e TQ Agent d'éducation : dossier de l'année, règle de nommage, défi A, marques de formatage.">
|
||||
<meta name="robots" content="noindex">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../assets/theme.css">
|
||||
<link rel="stylesheet" href="../../assets/atelier-texte.css">
|
||||
<style>
|
||||
/* Propre à cette page. */
|
||||
.arbo { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: .92rem; background: var(--papier); border: 1px solid var(--trait); border-radius: .3rem; padding: .8rem 1rem; line-height: 1.7; max-width: var(--lecture); overflow-x: auto; white-space: pre; }
|
||||
.nom-regle { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: 1.15rem; font-weight: 700; background: var(--accent-fond); border-radius: .3rem; padding: .6rem .9rem; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
|
||||
.demo-corps.grand { font-size: 1.35rem; }
|
||||
.demo-col .triche { white-space: pre-wrap; margin: 0; }
|
||||
.demo-col .propre p { margin: 0 0 .6rem; }
|
||||
.demo-col .propre .t { text-align: center; font-weight: 700; }
|
||||
.demo-col .propre .j { text-align: justify; }
|
||||
.demo-col .propre .d { text-align: right; }
|
||||
.demo-col .esp { display: inline-block; width: .3em; text-align: center; color: var(--encre-douce); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="classe-ae">
|
||||
|
||||
<header class="entete">
|
||||
<div class="entete__interieur">
|
||||
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||
<a href="../../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="../index.html">4e TQ Agent d'éducation</a><span aria-hidden="true">/</span><strong>Séance 2</strong>
|
||||
</nav>
|
||||
<div class="entete__barre">
|
||||
<div>
|
||||
<h1>Ranger, nommer, mettre en forme</h1>
|
||||
<p class="entete__meta">Période 1 · Séance 2 · TIC (traitement de texte) · M. Courcelle</p>
|
||||
</div>
|
||||
<button type="button" class="action action--secondaire" id="projection" aria-pressed="false">Agrandir</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<nav class="sommaire-lat" aria-label="Sommaire de la séance">
|
||||
<div class="top">Séance 2</div>
|
||||
<h2>Ranger et nommer</h2>
|
||||
<a href="#aujourdhui">Aujourd'hui</a>
|
||||
<a href="#pourquoi">1. Pourquoi ranger ?</a>
|
||||
<a href="#dossier">2. Ton dossier de l'année</a>
|
||||
<a href="#regle">3. La règle de nommage</a>
|
||||
<a href="#entrainement">4. Entraînement : Sam</a>
|
||||
<a href="#defi-a">5. Défi A : Noa</a>
|
||||
<h2>Mettre en forme</h2>
|
||||
<a href="#espaces">6. Tricher avec les espaces</a>
|
||||
<a href="#avant-apres">7. Avant/après</a>
|
||||
<a href="#ticket">8. Ticket de sortie</a>
|
||||
<h2>Si tu as fini</h2>
|
||||
<a href="#bonus">Exercices supplémentaires</a>
|
||||
</nav>
|
||||
|
||||
<main class="feuille">
|
||||
<div class="regle" aria-hidden="true"></div>
|
||||
<div class="inner">
|
||||
|
||||
<span class="module-tag">Période 1 · Séance 2</span>
|
||||
|
||||
<section id="aujourdhui">
|
||||
<h2>Ce que tu vas faire aujourd'hui</h2>
|
||||
<p>Tu vas construire ton dossier de l'année, apprendre à nommer tes fichiers pour les retrouver en trois secondes, puis découvrir pourquoi on ne met jamais un texte en page avec des espaces.</p>
|
||||
<div class="encadre encadre--cle">
|
||||
<p>Aujourd'hui, un exercice est coté : le <strong>défi A, sur 8 points</strong>. Avant lui, tu t'entraînes sur un exercice identique, non coté.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pourquoi">
|
||||
<h2>1. Pourquoi ranger ?</h2>
|
||||
<p>Un agent d'éducation travaille avec beaucoup de documents : fiches d'observation, rapports, cahier de liaison, dossiers des jeunes. Un document introuvable, c'est une information perdue pour toute l'équipe. Et un document mal rangé qui contient des informations sur une personne peut se retrouver entre de mauvaises mains.</p>
|
||||
<p>Pour toi, cette année, c'est pareil. Ton dossier d'apprentissage sera consulté par tes professeurs et par le jury de ta SIPS. Tu dois pouvoir retrouver n'importe quel travail en quelques secondes.</p>
|
||||
</section>
|
||||
|
||||
<section id="dossier">
|
||||
<h2>2. Ton dossier de l'année</h2>
|
||||
<p>Sur ta clé, crée cette arborescence, puis déplace ton fichier du diagnostic de la séance 1 dans <code>P1_Bienvenue</code>.</p>
|
||||
<div class="arbo">4AE_TIC_2026-2027
|
||||
├── P1_Bienvenue de la rentrée au congé d'automne
|
||||
├── P2_Enquete de novembre au congé d'hiver
|
||||
├── P3_Terrain de janvier au congé de détente
|
||||
├── P4_Studio de mars au congé de printemps
|
||||
└── P5_Pitch de mai à la fin de l'année</div>
|
||||
<h3>Comment faire (explorateur de fichiers de Windows)</h3>
|
||||
<ul>
|
||||
<li><strong>Créer un dossier :</strong> clic droit dans la fenêtre, puis Nouveau, puis Dossier. Tape le nom et appuie sur Entrée.</li>
|
||||
<li><strong>Renommer :</strong> clic droit sur le fichier ou le dossier, puis Renommer (ou touche <kbd>F2</kbd>).</li>
|
||||
<li><strong>Déplacer :</strong> fais glisser le fichier dans le dossier, ou clic droit, Couper, puis clic droit dans le dossier, Coller.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="regle">
|
||||
<h2>3. La règle de nommage</h2>
|
||||
<p>Tous tes fichiers de l'année suivent la même règle :</p>
|
||||
<p class="nom-regle">AAAA-MM-JJ_Sx_objet_Prenom</p>
|
||||
<table>
|
||||
<thead><tr><th scope="col">Partie</th><th scope="col">Ce qu'on y met</th><th scope="col">Exemple</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><code>AAAA-MM-JJ</code></td><td>la date du travail, l'année en premier</td><td><code>2026-10-08</code></td></tr>
|
||||
<tr><td><code>Sx</code></td><td>le numéro de la séance</td><td><code>S2</code></td></tr>
|
||||
<tr><td><code>objet</code></td><td>ce que contient le fichier, en minuscules, mots reliés par des tirets</td><td><code>mise-en-forme</code></td></tr>
|
||||
<tr><td><code>Prenom</code></td><td>ton prénom, sans accent</td><td><code>Yasmine</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="encadre encadre--cle">
|
||||
<p><strong>Pourquoi l'année en premier ?</strong> L'ordinateur trie les noms lettre par lettre. Avec l'année, puis le mois, puis le jour, tes fichiers se rangent tout seuls dans l'ordre chronologique.</p>
|
||||
</div>
|
||||
<div class="encadre encadre--attention">
|
||||
<p>Interdit dans un nom de fichier : les espaces, les accents, les caractères spéciaux (<code>! ? ( ) / \ : * " < > |</code>) et les noms qui ne disent rien (<code>Document1</code>, <code>test</code>, <code>final2</code>, <code>ok</code>).</p>
|
||||
</div>
|
||||
|
||||
<div class="nomtest">
|
||||
<h3>Vérifie un nom de fichier</h3>
|
||||
<label for="nom">Tape un nom de fichier :</label><br>
|
||||
<input id="nom" type="text" autocomplete="off" spellcheck="false" placeholder="2026-10-08_S2_mise-en-forme_Yasmine">
|
||||
<ul class="check" id="nom-check" aria-live="polite"></ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="entrainement">
|
||||
<h2>4. Entraînement : la clé de Sam</h2>
|
||||
<p>Non coté. Sam a tout enregistré n'importe comment. Télécharge son dossier, décompresse-le sur ta clé (clic droit, <strong>Extraire tout</strong>) et remets de l'ordre.</p>
|
||||
<div class="actions">
|
||||
<a class="action" href="Cle-de-Sam.zip" download>Télécharger la clé de Sam</a>
|
||||
</div>
|
||||
<ol>
|
||||
<li>Dans le dossier <code>Cle-de-Sam</code>, crée l'arborescence de l'année : <code>4AE_TIC_2026-2027</code> et ses cinq sous-dossiers.</li>
|
||||
<li>Ouvre chaque fichier : la date, la séance et l'objet sont écrits dedans.</li>
|
||||
<li>Renomme chaque fichier selon la règle, avec le prénom <code>Sam</code>.</li>
|
||||
<li>Range chaque fichier dans le dossier de la bonne période, grâce à sa date.</li>
|
||||
</ol>
|
||||
<table>
|
||||
<thead><tr><th scope="col">Période</th><th scope="col">Dates</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><code>P1_Bienvenue</code></td><td>jusqu'au 16 octobre 2026</td></tr>
|
||||
<tr><td><code>P2_Enquete</code></td><td>du 2 novembre au 18 décembre 2026</td></tr>
|
||||
<tr><td><code>P3_Terrain</code></td><td>du 4 janvier au 19 février 2027</td></tr>
|
||||
<tr><td><code>P4_Studio</code></td><td>du 8 mars au 23 avril 2027</td></tr>
|
||||
<tr><td><code>P5_Pitch</code></td><td>à partir du 10 mai 2027</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>On corrige ensemble au tableau.</p>
|
||||
</section>
|
||||
|
||||
<section id="defi-a">
|
||||
<h2>5. Défi A : la clé de Noa</h2>
|
||||
<p>Coté sur <strong>8 points</strong>. Même travail, avec le dossier de Noa et le prénom <code>Noa</code>. Tu as <strong>25 minutes</strong>. Tu travailles seul.</p>
|
||||
<div class="actions">
|
||||
<a class="action" href="Cle-de-Noa.zip" download>Télécharger la clé de Noa</a>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr><th scope="col">Ce qui est vérifié</th><th scope="col">Points</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Le dossier <code>4AE_TIC_2026-2027</code> et ses cinq sous-dossiers existent, avec les noms exacts</td><td>2</td></tr>
|
||||
<tr><td>Chaque fichier (6 fichiers) : nom exact selon la règle (0,5) et rangé dans la bonne période (0,5)</td><td>6</td></tr>
|
||||
<tr><td><strong>Total</strong></td><td><strong>8</strong></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Quand tu as fini, lève la main : le professeur vérifie ton travail à l'écran. Puis passe aux exercices supplémentaires.</p>
|
||||
<div class="encadre">
|
||||
<p>Si ta note ne te convient pas, tu pourras repasser un défi du même type après remédiation. La meilleure note sera gardée.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="espaces">
|
||||
<h2>6. Tricher avec les espaces</h2>
|
||||
<p>Beaucoup de gens mettent un texte en page avec des espaces (pour centrer un titre) et des appuis sur Entrée (pour aller à la ligne ou laisser de la place). À l'écran, ça a l'air correct. Mais dès qu'on change la police, la taille ou une phrase, tout se décale. Essaie :</p>
|
||||
|
||||
<div class="demo">
|
||||
<div class="demo-barre">
|
||||
<label><input type="checkbox" id="demo-marques"> Afficher les marques</label>
|
||||
<button type="button" id="demo-taille" aria-pressed="false">Agrandir le texte</button>
|
||||
</div>
|
||||
<div class="demo-corps" id="demo-corps">
|
||||
<div class="demo-col">
|
||||
<h4>Avec des espaces et des Entrée</h4>
|
||||
<div class="triche" id="demo-triche"></div>
|
||||
</div>
|
||||
<div class="demo-col">
|
||||
<h4>Avec la mise en forme</h4>
|
||||
<div class="propre" id="demo-propre"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Voir l'invisible dans Writer</h3>
|
||||
<p>Menu <strong>Affichage</strong>, puis <strong>Marques de formatage</strong> (raccourci <kbd>Ctrl</kbd>+<kbd>F10</kbd>). Un point <span class="esp">·</span> pour chaque espace, le symbole <span class="marque">¶</span> chaque fois qu'on a appuyé sur Entrée, une flèche pour chaque tabulation.</p>
|
||||
|
||||
<h3>Caractère ou paragraphe ?</h3>
|
||||
<table>
|
||||
<thead><tr><th scope="col">Mise en forme de caractère</th><th scope="col">Mise en forme de paragraphe</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>S'applique aux lettres sélectionnées.</td><td>S'applique à tout le paragraphe, même sans rien sélectionner.</td></tr>
|
||||
<tr><td>Police, taille, gras, italique, souligné, couleur.</td><td>Alignement, retraits, interligne, espacement avant et après.</td></tr>
|
||||
<tr><td>Menu Format, puis Caractère.</td><td>Menu Format, puis Paragraphe.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Un paragraphe, c'est tout ce qui se trouve entre deux appuis sur Entrée, donc entre deux symboles <span class="marque">¶</span>.</p>
|
||||
|
||||
<div class="regle-cle">
|
||||
<p><strong>La règle d'or.</strong> Entrée sert seulement à commencer un nouveau paragraphe. Pour centrer : le bouton Centrer. Pour laisser de la place : l'espacement après. Pour mettre en valeur : le gras, avec modération. Jamais d'espaces ni de lignes vides pour faire de la mise en page.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="avant-apres">
|
||||
<h2>7. Avant/après : le règlement de l'étude</h2>
|
||||
<p>Un vrai type de document de la vie d'un internat, tapé en trichant.</p>
|
||||
<div class="actions">
|
||||
<a class="action" href="S2_document-moche.odt" download>Télécharger le document</a>
|
||||
</div>
|
||||
<ol>
|
||||
<li>Enregistre-le sous <code>AAAA-MM-JJ_S2_reglement-etude_Prenom</code> (date du jour, ton prénom), dans <code>P1_Bienvenue</code>.</li>
|
||||
<li>Affiche les marques de formatage.</li>
|
||||
<li>Supprime tous les espaces et toutes les lignes vides qui servent à la mise en page.</li>
|
||||
<li>Recolle les phrases coupées par des Entrée en trop : un paragraphe doit être d'un seul bloc.</li>
|
||||
<li>Remets en forme : titre centré en gras, taille 16, sans soulignement ; paragraphes justifiés avec un espacement après de 0,3 cm ; les quatre règles en liste numérotée ; la signature alignée à droite.</li>
|
||||
<li>Change la police de tout le document. Si ta mise en page tient toujours, c'est gagné.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section id="ticket">
|
||||
<h2>8. Ticket de sortie</h2>
|
||||
<p>Réponds sur le papillon que je te donne.</p>
|
||||
<ol>
|
||||
<li>Pourquoi met-on l'année en premier dans un nom de fichier ?</li>
|
||||
<li>Cite une chose qu'on ne doit jamais faire avec la touche Entrée.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section id="bonus">
|
||||
<h2>Exercices supplémentaires</h2>
|
||||
<p>Pour toi si tu as terminé avant les autres. Fais-les dans l'ordre que tu veux. Ils ne sont pas cotés.</p>
|
||||
|
||||
<h3>Bonus 1 : conforme ou pas ?</h3>
|
||||
<div class="quiz" id="quiz-noms"></div>
|
||||
|
||||
<h3>Bonus 2 : course aux raccourcis</h3>
|
||||
<p>Chronomètre-toi. Réussis chaque action uniquement au clavier.</p>
|
||||
<table>
|
||||
<thead><tr><th scope="col">Action</th><th scope="col">Raccourci</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Renommer un fichier sélectionné</td><td><kbd>F2</kbd></td></tr>
|
||||
<tr><td>Créer un nouveau dossier (explorateur)</td><td><kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>N</kbd></td></tr>
|
||||
<tr><td>Copier, couper, coller</td><td><kbd>Ctrl</kbd>+<kbd>C</kbd>, <kbd>Ctrl</kbd>+<kbd>X</kbd>, <kbd>Ctrl</kbd>+<kbd>V</kbd></td></tr>
|
||||
<tr><td>Annuler la dernière action</td><td><kbd>Ctrl</kbd>+<kbd>Z</kbd></td></tr>
|
||||
<tr><td>Tout sélectionner</td><td><kbd>Ctrl</kbd>+<kbd>A</kbd></td></tr>
|
||||
<tr><td>Enregistrer</td><td><kbd>Ctrl</kbd>+<kbd>S</kbd></td></tr>
|
||||
<tr><td>Afficher les marques de formatage (Writer)</td><td><kbd>Ctrl</kbd>+<kbd>F10</kbd></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Bonus 3 : l'affiche de la maison de jeunes</h3>
|
||||
<p>Même travail que pour le règlement : supprime la triche, puis refais une affiche lisible, sans un seul espace de mise en page. Choisis tes polices et tes couleurs, mais l'affiche doit rester lisible de loin. Un point d'exclamation par phrase, pas plus.</p>
|
||||
<div class="actions">
|
||||
<a class="action action--secondaire" href="S2_bonus-affiche-moche.odt" download>Télécharger l'affiche</a>
|
||||
</div>
|
||||
|
||||
<h3>Bonus 4 : copie conforme</h3>
|
||||
<p>Ouvre le modèle en PDF, puis reproduis-le le plus fidèlement possible à partir du texte brut : titre, sous-titres, liste à puces, paragraphes justifiés, interligne, couleur.</p>
|
||||
<div class="actions">
|
||||
<a class="action action--secondaire" href="S2_bonus-modele.pdf" target="_blank" rel="noopener">Ouvrir le modèle</a>
|
||||
<a class="action action--secondaire" href="S2_bonus-modele-texte.odt" download>Télécharger le texte brut</a>
|
||||
</div>
|
||||
|
||||
<h3>Bonus 5 : une page, pile</h3>
|
||||
<p>Reprends ton règlement de l'étude remis en forme. Fais-le tenir exactement sur une page, bien rempli, en jouant seulement sur l'interligne, l'espacement après et les marges. Interdiction de descendre sous la taille 11.</p>
|
||||
|
||||
<h3>Bonus 6 : chasse aux fautes</h3>
|
||||
<p>Ce texte contient six fautes. Clique sur chaque mot faux.</p>
|
||||
<div class="chasse" id="chasse-s2"></div>
|
||||
<p class="score" id="chasse-s2-score" role="status" aria-live="polite"></p>
|
||||
<div class="actions">
|
||||
<button type="button" id="chasse-s2-reset">Recommencer</button>
|
||||
<button type="button" id="chasse-s2-sol">Voir la solution</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
Les exercices se font dans LibreOffice Writer. Enregistre ton travail dans ton dossier de l'année, sur ta clé.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../../assets/atelier-texte.js"></script>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
/* ---------- mode projection (TBI) ---------- */
|
||||
(function(){
|
||||
var b = document.getElementById('projection');
|
||||
b.addEventListener('click', function(){
|
||||
var on = document.documentElement.classList.toggle('projection');
|
||||
b.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||
b.textContent = on ? 'Taille normale' : 'Agrandir';
|
||||
});
|
||||
})();
|
||||
|
||||
/* ---------- vérification d'un nom de fichier ---------- */
|
||||
(function(){
|
||||
var champ = document.getElementById('nom');
|
||||
var liste = document.getElementById('nom-check');
|
||||
|
||||
function dateValide(t){
|
||||
var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(t || '');
|
||||
if (!m) return false;
|
||||
var d = new Date(+m[1], +m[2] - 1, +m[3]);
|
||||
return d.getFullYear() === +m[1] && d.getMonth() === +m[2] - 1 && d.getDate() === +m[3];
|
||||
}
|
||||
|
||||
function verifier(){
|
||||
var v = champ.value.trim();
|
||||
if (!v) { liste.innerHTML = ''; return; }
|
||||
var ext = /\.odt$/i.test(v);
|
||||
var n = v.replace(/\.odt$/i, '');
|
||||
var p = n.split('_');
|
||||
var regles = [
|
||||
['Quatre parties séparées par des tirets bas : date, séance, objet, prénom', p.length === 4],
|
||||
['Une date réelle au format AAAA-MM-JJ', dateValide(p[0])],
|
||||
['Un numéro de séance : S suivi d\'un nombre (S2, S15...)', /^S\d{1,2}$/.test(p[1] || '')],
|
||||
['Un objet en minuscules, mots reliés par des tirets', /^[a-z0-9]+(-[a-z0-9]+)*$/.test(p[2] || '')],
|
||||
['Un prénom sans accent', /^[A-Za-z][A-Za-z-]+$/.test(p[3] || '')],
|
||||
['Aucun espace', !/\s/.test(n)],
|
||||
['Aucun accent ni caractère spécial', /^[A-Za-z0-9_-]+$/.test(n)]
|
||||
];
|
||||
liste.innerHTML = regles.map(function(r){
|
||||
return '<li class="' + (r[1] ? 'ok' : 'ko') + '">' + r[0] + '</li>';
|
||||
}).join('') + (ext ? '<li class="ok">Pas besoin de taper .odt : Writer l\'ajoute tout seul.</li>' : '');
|
||||
}
|
||||
|
||||
champ.addEventListener('input', verifier);
|
||||
})();
|
||||
|
||||
/* ---------- démonstration : tricher avec les espaces ---------- */
|
||||
(function(){
|
||||
var triche = [
|
||||
" ÉTUDE DU SOIR",
|
||||
"",
|
||||
"L'étude a lieu du lundi au jeudi,",
|
||||
"de 16 h 30 à 18 h, dans la salle",
|
||||
"12, avec un éducateur.",
|
||||
"",
|
||||
" L'équipe éducative"
|
||||
];
|
||||
var propre = [
|
||||
['t', "Étude du soir"],
|
||||
['j', "L'étude a lieu du lundi au jeudi, de 16 h 30 à 18 h, dans la salle 12, avec un éducateur."],
|
||||
['d', "L'équipe éducative"]
|
||||
];
|
||||
var elT = document.getElementById('demo-triche');
|
||||
var elP = document.getElementById('demo-propre');
|
||||
var caseM = document.getElementById('demo-marques');
|
||||
var btnT = document.getElementById('demo-taille');
|
||||
var corps = document.getElementById('demo-corps');
|
||||
|
||||
function esc(t){ return t.replace(/&/g, '&').replace(/</g, '<'); }
|
||||
|
||||
function dessiner(){
|
||||
var m = caseM.checked;
|
||||
var fin = m ? '<span class="marque">¶</span>' : '';
|
||||
elT.innerHTML = triche.map(function(l){
|
||||
var h = esc(l);
|
||||
if (m) h = h.replace(/ /g, '<span class="esp">·</span>\u200b');
|
||||
return h + fin;
|
||||
}).join('\n');
|
||||
elP.innerHTML = propre.map(function(p){
|
||||
var h = esc(p[1]);
|
||||
if (m) h = h.replace(/ /g, '<span class="esp">·</span>\u200b');
|
||||
return '<p class="' + p[0] + '">' + h + fin + '</p>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
caseM.addEventListener('change', dessiner);
|
||||
btnT.addEventListener('click', function(){
|
||||
var on = corps.classList.toggle('grand');
|
||||
btnT.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||
btnT.textContent = on ? 'Taille normale' : 'Agrandir le texte';
|
||||
});
|
||||
dessiner();
|
||||
})();
|
||||
|
||||
/* ---------- bonus 1 : conforme ou pas ? ---------- */
|
||||
var CP = ["Conforme", "Pas conforme"];
|
||||
quiz(document.getElementById('quiz-noms'), [
|
||||
{ q: "<code>2026-10-08_S2_arborescence_Yasmine</code>", r: CP, b: 0, e: "Date, séance, objet, prénom : tout y est." },
|
||||
{ q: "<code>08-10-2026_S2_arborescence_Yasmine</code>", r: CP, b: 1, e: "La date est à l'envers : les fichiers ne se trieront pas dans l'ordre. Correct : 2026-10-08_S2_arborescence_Yasmine." },
|
||||
{ q: "<code>2026-10-08_S2_mise en forme_Yasmine</code>", r: CP, b: 1, e: "Il y a des espaces. Correct : 2026-10-08_S2_mise-en-forme_Yasmine." },
|
||||
{ q: "<code>2026-10-08_S2_règlement_Yasmine</code>", r: CP, b: 1, e: "Il y a un accent. Correct : 2026-10-08_S2_reglement_Yasmine." },
|
||||
{ q: "<code>Document1</code>", r: CP, b: 1, e: "Ce nom ne dit rien : ni date, ni séance, ni contenu, ni prénom." },
|
||||
{ q: "<code>2026-11-05_S4_question-de-recherche_Noa</code>", r: CP, b: 0, e: "Parfait : l'objet de plusieurs mots est relié par des tirets." },
|
||||
{ q: "<code>2026-11-05_S4_question-de-recherche</code>", r: CP, b: 1, e: "Il manque le prénom à la fin." },
|
||||
{ q: "<code>final_final_v2_ok</code>", r: CP, b: 1, e: "Ce nom ne dit rien et ne peut pas être trié." },
|
||||
{ q: "<code>2027-02-04_S15_compte-rendu-visite_Ines</code>", r: CP, b: 0, e: "Tout est en ordre, prénom sans accent compris." },
|
||||
{ q: "<code>2026-10-08_S2_Arborescence!!_Yasmine</code>", r: CP, b: 1, e: "Une majuscule dans l'objet et des caractères spéciaux. Correct : 2026-10-08_S2_arborescence_Yasmine." }
|
||||
]);
|
||||
|
||||
/* ---------- bonus 6 : chasse aux fautes ----------
|
||||
Un astérisque devant un mot le marque comme faute. */
|
||||
function jetons(texte){
|
||||
return texte.split(' ').map(function(m){
|
||||
return m.charAt(0) === '*' ? { t: m.slice(1), f: true } : { t: m, f: false };
|
||||
});
|
||||
}
|
||||
chasse(
|
||||
document.getElementById('chasse-s2'),
|
||||
document.getElementById('chasse-s2-score'),
|
||||
document.getElementById('chasse-s2-reset'),
|
||||
document.getElementById('chasse-s2-sol'),
|
||||
jetons("Quand tu *enregistre un fichier, choisis un nom clair. Pas d'espace ni d'accent : certains ordinateurs les *acceptes mal. Range *chaques fichier dans le bon dossier, sinon tu *perdra du temps à le chercher. Fais aussi une *sauvgarde : une clé, *sa se perd vite !"),
|
||||
6,
|
||||
"Bravo, tu les as toutes trouvées."
|
||||
);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user