mise à niveau de tout le site
This commit is contained in:
lrdlg
@@ -0,0 +1,19 @@
|
||||
# Captures d'écran à déposer ici
|
||||
|
||||
Les pages des modules affichent un encadré « Capture à ajouter » tant que le
|
||||
fichier n'est pas présent. Déposer les fichiers ci-dessous dans ce dossier,
|
||||
avec exactement ces noms, fait disparaître l'encadré sans rien modifier au code.
|
||||
|
||||
| Fichier | Ce qu'il doit montrer |
|
||||
|---|---|
|
||||
| `m1-poste.jpg` | Le poste de la salle : unité centrale, écran, clavier et souris visibles. |
|
||||
| `m1-fenetre-writer.png` | La fenêtre complète de LibreOffice Writer, document vide, les six zones numérotées de 1 à 6 (barre de titre, barre de menus, barre de formatage, règle, zone de texte, barre d'état). |
|
||||
| `m1-enregistrer-sous.png` | La boîte de dialogue « Enregistrer sous », avec le champ du nom et le sélecteur de format bien lisibles. |
|
||||
| `m2-caractere-special.png` | La boîte de dialogue « Caractère spécial » de Writer. |
|
||||
|
||||
Conseils de prise de vue :
|
||||
|
||||
- Capturer sur la version de LibreOffice installée en salle, pas sur une autre.
|
||||
- Largeur utile : environ 1400 px. Au-delà, le fichier est lourd pour rien.
|
||||
- PNG pour les captures d'écran, JPEG pour les photos de matériel.
|
||||
- Vérifier qu'aucun nom d'élève ni aucun document personnel n'apparaît.
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>3e TQ Technique sociale — Traitement de texte</title>
|
||||
<meta name="description" content="Les modules du cours de traitement de texte de 3e TQ Technique sociale.">
|
||||
<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">
|
||||
</head>
|
||||
<body class="classe-ts">
|
||||
|
||||
<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><strong>3e TQ Technique sociale</strong>
|
||||
</nav>
|
||||
<h1>3e TQ Technique sociale</h1>
|
||||
<p class="entete__meta">Traitement de texte · M. Courcelle</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="contenu">
|
||||
|
||||
<p class="chapeau">Choisis le module sur lequel tu travailles. Chaque module se lit du début à la fin, avec des exercices à faire directement dans la page.</p>
|
||||
|
||||
<h2>Les modules du cours</h2>
|
||||
|
||||
<!-- ==================================================================
|
||||
POUR AJOUTER UN MODULE
|
||||
1. Créer le dossier du module à côté de ce fichier, avec son
|
||||
index.html dedans (le plus simple : copier un module existant).
|
||||
2. Copier-coller le bloc <li class="module"> ci-dessous, juste
|
||||
avant la fin de la liste, et remplir les quatre champs :
|
||||
module__num « Module 3 », « Module C »…
|
||||
module__titre le titre affiché à l'élève
|
||||
module__resume une phrase sur ce qu'on y fait
|
||||
module__meta nombre de séances, chapitre du cours papier…
|
||||
3. Adapter le href vers le dossier du nouveau module.
|
||||
|
||||
Gabarit à copier :
|
||||
|
||||
<li class="module">
|
||||
<a class="module__lien" href="DOSSIER/index.html">
|
||||
<span class="module__num">Module N</span>
|
||||
<span class="module__titre">Titre du module</span>
|
||||
<span class="module__resume">Ce qu'on y apprend, en une phrase.</span>
|
||||
<span class="module__meta">X séances · cours papier, chapitre Y</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Un module annoncé mais pas encore prêt : garder le <li> en
|
||||
ajoutant la classe « module--bientot » et remplacer le <a> par
|
||||
un <div class="module__lien">, sans href.
|
||||
================================================================== -->
|
||||
|
||||
<ul class="modules">
|
||||
<li class="module">
|
||||
<a class="module__lien" href="module1/index.html">
|
||||
<span class="module__num">Module 1</span>
|
||||
<span class="module__titre">Le poste et les fichiers</span>
|
||||
<span class="module__resume">La machine et ses parties, la fenêtre de Writer, enregistrer et nommer un fichier pour le retrouver.</span>
|
||||
<span class="module__meta">Saisir, enregistrer, retrouver · quiz de fin de module</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="module">
|
||||
<a class="module__lien" href="module2/index.html">
|
||||
<span class="module__num">Module 2</span>
|
||||
<span class="module__titre">Saisir au kilomètre</span>
|
||||
<span class="module__resume">La touche Entrée, la ponctuation, les accents, les raccourcis, et ce que le correcteur ne voit pas.</span>
|
||||
<span class="module__meta">Textes à saisir · chronomètre de frappe · quiz de fin de module</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,248 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Module 1 — 3e TQ Technique sociale</title>
|
||||
<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">
|
||||
</head>
|
||||
<body class="classe-ts">
|
||||
|
||||
<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">3e TQ Technique sociale</a><span aria-hidden="true">/</span><strong>Module 1</strong>
|
||||
</nav>
|
||||
<h1>Le poste et les fichiers</h1>
|
||||
<p class="entete__meta">Traitement de texte · saisir, enregistrer, retrouver</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<nav class="sommaire-lat" aria-label="Sommaire">
|
||||
<a class="top" href="#haut">Module 1</a>
|
||||
<h2>Module 1, le poste et les fichiers</h2>
|
||||
<a href="#m1-machine">La machine</a>
|
||||
<a href="#m1-fenetre">La fenêtre de Writer</a>
|
||||
<a href="#m1-fichier">Fichier, dossier, extension</a>
|
||||
<a href="#m1-enregistrer">Enregistrer</a>
|
||||
<a href="#m1-nommer">Nommer un fichier</a>
|
||||
<a href="#m1-erreurs">Quand ça coince</a>
|
||||
<a href="#m1-quiz">Teste-toi</a>
|
||||
<h2>Autres modules</h2>
|
||||
<a href="../index.html">Tous les modules de la classe</a>
|
||||
<a href="../module2/index.html">Module 2, saisir au kilomètre</a>
|
||||
</nav>
|
||||
|
||||
<main class="feuille" id="haut">
|
||||
<div class="regle" aria-hidden="true"></div>
|
||||
<div class="inner">
|
||||
|
||||
<p class="chapeau">Ce module sert pendant le cours. Tu y retrouves les règles, les captures de
|
||||
la fenêtre de Writer et de quoi vérifier toi-même si tu as compris. Il ne remplace pas tes notes :
|
||||
il sert à les retrouver vite quand tu es devant ton écran.</p>
|
||||
|
||||
<h2 id="m1-machine"><span class="module-tag">Module 1</span><br>La machine et ses parties</h2>
|
||||
|
||||
<p>Un poste de travail se compose de trois familles d'éléments.</p>
|
||||
<table>
|
||||
<tr><th>Famille</th><th>À quoi ça sert</th><th>Exemples</th></tr>
|
||||
<tr><td>Entrée</td><td>Donner des informations à la machine</td><td>Clavier, souris, micro, scanner</td></tr>
|
||||
<tr><td>Sortie</td><td>Recevoir un résultat de la machine</td><td>Écran, imprimante, haut-parleurs</td></tr>
|
||||
<tr><td>Unité centrale</td><td>Traiter et conserver</td><td>Processeur, mémoire vive, disque</td></tr>
|
||||
</table>
|
||||
|
||||
<div class="regle-cle">
|
||||
<p>La mémoire vive s'efface quand la machine s'éteint. Tant que tu n'as pas enregistré, ton document n'existe que là. Une coupure de courant ne laisse rien.</p>
|
||||
</div>
|
||||
|
||||
<figure>
|
||||
<img src="../images/m1-poste.jpg" alt="Le poste de travail de la salle informatique"
|
||||
onerror="this.outerHTML='<div class=\'manque\'>Capture à ajouter : <code>3tq-technique-sociale/images/m1-poste.jpg</code><br>Le poste de la salle, unité centrale, écran, clavier et souris visibles.</div>'">
|
||||
<figcaption>Le poste de travail de la salle.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 id="m1-fenetre">La fenêtre de Writer</h2>
|
||||
<p>Elle contient toujours les mêmes zones. Clique sur une zone pour savoir à quoi elle sert.</p>
|
||||
|
||||
<figure>
|
||||
<img src="../images/m1-fenetre-writer.png" alt="Fenêtre de LibreOffice Writer avec ses différentes zones"
|
||||
onerror="this.outerHTML='<div class=\'manque\'>Capture à ajouter : <code>3tq-technique-sociale/images/m1-fenetre-writer.png</code><br>Fenêtre complète de Writer, document vide, zones numérotées de 1 à 6.</div>'">
|
||||
<figcaption>Les six zones de la fenêtre de Writer.</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="zones" id="zones"></div>
|
||||
<p id="zone-txt">Choisis une zone ci-dessus.</p>
|
||||
|
||||
<h2 id="m1-fichier">Fichier, dossier, extension</h2>
|
||||
<p>Un <strong>fichier</strong> est un ensemble d'informations enregistré sous un nom. Un <strong>dossier</strong> regroupe des fichiers et peut en contenir d'autres : c'est l'arborescence. L'<strong>extension</strong> est ce qui suit le point dans le nom. Elle dit de quel type de fichier il s'agit et quel programme l'ouvrira.</p>
|
||||
|
||||
<table>
|
||||
<tr><th>Extension</th><th>Type</th><th>S'ouvre avec</th></tr>
|
||||
<tr><td><code>.odt</code></td><td>Document texte, format ouvert</td><td>LibreOffice Writer</td></tr>
|
||||
<tr><td><code>.docx</code></td><td>Document texte, format Microsoft</td><td>Word, Writer</td></tr>
|
||||
<tr><td><code>.pdf</code></td><td>Document figé, non modifiable</td><td>Lecteur PDF, navigateur</td></tr>
|
||||
<tr><td><code>.jpg</code> <code>.png</code></td><td>Image</td><td>Visionneuse d'images</td></tr>
|
||||
<tr><td><code>.mp3</code></td><td>Son</td><td>Lecteur audio</td></tr>
|
||||
</table>
|
||||
|
||||
<div class="regle-cle">
|
||||
<p>Renommer <code>photo.jpg</code> en <code>photo.odt</code> ne transforme pas une photo en document. Ça rend seulement le fichier illisible.</p>
|
||||
</div>
|
||||
|
||||
<h3>Ton dossier de l'année</h3>
|
||||
<p class="specimen">traitement-de-texte-<em>tonnom</em><br>
|
||||
m01<br>
|
||||
exercices<br>
|
||||
m02<br>
|
||||
m03 … jusqu'à m09</p>
|
||||
<p>Les numéros à deux chiffres ne sont pas un caprice : sans le zéro, le classement met <code>m10</code> juste après <code>m1</code>.</p>
|
||||
|
||||
<h2 id="m1-enregistrer">Enregistrer</h2>
|
||||
<table>
|
||||
<tr><th>Commande</th><th>Quand</th><th>Ce qu'elle demande</th></tr>
|
||||
<tr><td>Enregistrer sous</td><td>La première fois, ou pour faire une copie</td><td>Où, sous quel nom, dans quel format</td></tr>
|
||||
<tr><td>Enregistrer<br><code>Ctrl+S</code></td><td>Toutes les fois suivantes</td><td>Rien, elle réécrit au même endroit</td></tr>
|
||||
</table>
|
||||
|
||||
<div class="regle-cle">
|
||||
<p><code>Ctrl+S</code> toutes les cinq minutes, sans y penser. C'est le geste le plus rentable de l'année.</p>
|
||||
</div>
|
||||
|
||||
<figure>
|
||||
<img src="../images/m1-enregistrer-sous.png" alt="Boîte de dialogue Enregistrer sous"
|
||||
onerror="this.outerHTML='<div class=\'manque\'>Capture à ajouter : <code>3tq-technique-sociale/images/m1-enregistrer-sous.png</code><br>Boîte Enregistrer sous, champ Nom de fichier et liste Type de fichier bien visibles.</div>'">
|
||||
<figcaption>Les trois questions posées par Enregistrer sous.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 id="m1-nommer">Nommer un fichier</h2>
|
||||
<p>Trois règles, et elles valent aussi en stage.</p>
|
||||
<ol>
|
||||
<li>Ni accent, ni espace, ni caractère spécial. Un tiret remplace l'espace.</li>
|
||||
<li>Un nom qui décrit le contenu. <code>Document1</code> ne dit rien.</li>
|
||||
<li>Une structure constante. Dans ce cours : <code>module-sujet-tonnom</code>.</li>
|
||||
</ol>
|
||||
|
||||
<p>Tape un nom de fichier pour le vérifier.</p>
|
||||
<div class="nomtest">
|
||||
<label for="nom-in">Nom à tester</label><br>
|
||||
<input id="nom-in" type="text" value="Rapport de stage (définitif).odt" spellcheck="false">
|
||||
<ul class="check" id="nom-check"></ul>
|
||||
<p id="nom-suggest"></p>
|
||||
</div>
|
||||
|
||||
<h2 id="m1-erreurs">Quand ça coince</h2>
|
||||
<p>Un message d'erreur n'est pas une punition, c'est une information. On le lit avant de cliquer.</p>
|
||||
|
||||
<details><summary>« Le document a été modifié. Voulez-vous enregistrer ? »</summary>
|
||||
<p>Tu fermes sans avoir enregistré. Réponds Enregistrer, sauf si tu veux vraiment perdre ce que tu viens de faire.</p></details>
|
||||
<details><summary>Mon fichier s'ouvre avec un programme inconnu</summary>
|
||||
<p>L'extension est associée à un autre logiciel. Clic droit sur le fichier, Ouvrir avec, puis choisis LibreOffice Writer.</p></details>
|
||||
<details><summary>Writer ne répond plus</summary>
|
||||
<p>Attends trente secondes sans cliquer partout. Si rien ne revient, ferme par le gestionnaire des tâches, relance Writer et accepte la récupération qu'il propose.</p></details>
|
||||
<details><summary>« Ce fichier est en lecture seule »</summary>
|
||||
<p>Le fichier est déjà ouvert ailleurs, ou il est protégé. Fais Enregistrer sous avec un autre nom.</p></details>
|
||||
<details><summary>Je ne retrouve pas mon travail de la semaine dernière</summary>
|
||||
<p>Dans l'ordre : regarde dans ton dossier de travail, puis cherche un morceau du nom dans le gestionnaire de fichiers, puis ouvre le menu Fichier de Writer et regarde les derniers documents utilisés.</p></details>
|
||||
|
||||
<h2 id="m1-quiz">Teste-toi, module 1</h2>
|
||||
<div class="quiz" id="quiz1"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
<p>Cours de traitement de texte, 3e année Techniques sociales et d'animation. M. Courcelle, 2026-2027.</p>
|
||||
<p>Les captures d'écran sont à réaliser sur la version de LibreOffice installée en salle.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../../assets/atelier-texte.js"></script>
|
||||
<script>
|
||||
"use strict";
|
||||
/* ---------- zones de la fenêtre ---------- */
|
||||
const ZONES = [
|
||||
["Barre de titre","Affiche le nom du document. Tant que tu n'as pas enregistré, elle indique « Sans nom 1 »."],
|
||||
["Barre de menus","Toutes les commandes du logiciel, classées par thème : Fichier, Édition, Format, Tableau…"],
|
||||
["Barre de formatage","Les boutons de mise en forme les plus utilisés : police, taille, gras, alignement."],
|
||||
["Règle","La largeur de la zone de texte et les marges. Plus tard, elle portera aussi les taquets de tabulation."],
|
||||
["Zone de texte","La page sur laquelle tu écris."],
|
||||
["Barre d'état","En bas : numéro de page, nombre de mots, langue du texte."]
|
||||
];
|
||||
const zc = document.getElementById('zones');
|
||||
ZONES.forEach((z,i)=>{
|
||||
const b = document.createElement('button');
|
||||
b.textContent = (i+1)+'. '+z[0];
|
||||
b.setAttribute('aria-pressed','false');
|
||||
b.addEventListener('click',()=>{
|
||||
zc.querySelectorAll('button').forEach(x=>x.setAttribute('aria-pressed','false'));
|
||||
b.setAttribute('aria-pressed','true');
|
||||
document.getElementById('zone-txt').textContent = z[1];
|
||||
});
|
||||
zc.appendChild(b);
|
||||
});
|
||||
|
||||
|
||||
/* ---------- validateur de nom de fichier ---------- */
|
||||
const nomIn = document.getElementById('nom-in');
|
||||
const nomCheck = document.getElementById('nom-check');
|
||||
const nomSug = document.getElementById('nom-suggest');
|
||||
|
||||
function testerNom(){
|
||||
const v = nomIn.value;
|
||||
const base = v.replace(/\.[^.]*$/,'');
|
||||
const tests = [
|
||||
["Pas d'espace", !/\s/.test(v)],
|
||||
["Pas d'accent ni de cédille", !/[àâäéèêëîïôöùûüçÀÂÄÉÈÊËÎÏÔÖÙÛÜÇ]/.test(v)],
|
||||
["Pas de majuscule", v === v.toLowerCase()],
|
||||
["Pas de caractère spécial", !/[()\[\]{}'"?!*:;,\/\\&%$#@]/.test(v)],
|
||||
["Une extension est présente", /\.[a-z0-9]{2,5}$/i.test(v)],
|
||||
["Le nom décrit le contenu", base.length > 5 && !/^(document|truc|nouveau|sans[-_ ]?nom|travail|essai|test)\d*$/i.test(base)]
|
||||
];
|
||||
nomCheck.innerHTML = tests.map(t=>'<li class="'+(t[1]?'ok':'ko')+'">'+t[0]+'</li>').join('');
|
||||
if(tests.every(t=>t[1])){
|
||||
nomSug.innerHTML = '<strong>Ce nom est correct.</strong>';
|
||||
}else{
|
||||
let p = v.normalize('NFD').replace(/[\u0300-\u036f]/g,'').toLowerCase();
|
||||
const m = p.match(/\.[a-z0-9]{2,5}$/);
|
||||
const ext = m ? m[0] : '.odt';
|
||||
p = p.replace(/\.[a-z0-9]{2,5}$/,'');
|
||||
p = p.replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'');
|
||||
nomSug.innerHTML = p ? 'Proposition : <code>'+p+ext+'</code>' : 'Donne un nom qui décrit le contenu.';
|
||||
}
|
||||
}
|
||||
nomIn.addEventListener('input', testerNom);
|
||||
testerNom();
|
||||
|
||||
|
||||
quiz(document.getElementById('quiz1'), [
|
||||
{q:"Tu tapes depuis vingt minutes sans avoir enregistré. Le courant saute. Que reste-t-il ?",
|
||||
r:["Tout, le disque garde le travail","Rien, le texte n'était que dans la mémoire vive","La moitié"],
|
||||
b:1, e:"Tant que tu n'as pas enregistré, le document n'existe que dans la mémoire vive, qui s'efface."},
|
||||
{q:"Quelle commande utilises-tu la première fois que tu enregistres un document ?",
|
||||
r:["Enregistrer","Enregistrer sous","Exporter"],
|
||||
b:1, e:"Enregistrer sous demande où, sous quel nom et dans quel format. Ensuite, Ctrl+S suffit."},
|
||||
{q:"Lequel de ces noms de fichier est correct ?",
|
||||
r:["Rapport de stage (final).odt","m02-annonce-dupont.odt","Document1.odt"],
|
||||
b:1, e:"Pas d'espace, pas d'accent, pas de parenthèse, et un nom qui dit ce qu'il y a dedans."},
|
||||
{q:"Tu renommes une photo de <code>photo.jpg</code> en <code>photo.odt</code>. Que se passe-t-il ?",
|
||||
r:["Elle devient un document texte","Rien ne change","Le fichier ne s'ouvre plus correctement"],
|
||||
b:2, e:"L'extension annonce le type du fichier, elle ne le transforme pas. On ne la change pas à la main."},
|
||||
{q:"Dans quel cas envoies-tu un PDF plutôt qu'un fichier modifiable ?",
|
||||
r:["Quand le document est terminé et doit rester tel quel","Quand le fichier est trop lourd","Quand le destinataire n'a pas d'ordinateur"],
|
||||
b:0, e:"Le PDF fige le document : le destinataire le voit exactement comme tu l'as fait."}
|
||||
]);
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,350 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Module 2 — 3e TQ Technique sociale</title>
|
||||
<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">
|
||||
</head>
|
||||
<body class="classe-ts">
|
||||
|
||||
<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">3e TQ Technique sociale</a><span aria-hidden="true">/</span><strong>Module 2</strong>
|
||||
</nav>
|
||||
<h1>Saisir au kilomètre</h1>
|
||||
<p class="entete__meta">Traitement de texte · ponctuation, raccourcis, vitesse de frappe</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<nav class="sommaire-lat" aria-label="Sommaire">
|
||||
<a class="top" href="#haut">Module 2</a>
|
||||
<h2>Module 2, saisir au kilomètre</h2>
|
||||
<a href="#m2-demo">La démonstration</a>
|
||||
<a href="#m2-kilometre">Saisir au kilomètre</a>
|
||||
<a href="#m2-entree">La touche Entrée</a>
|
||||
<a href="#m2-ponctuation">La ponctuation</a>
|
||||
<a href="#m2-caracteres">Accents et signes</a>
|
||||
<a href="#m2-raccourcis">Raccourcis</a>
|
||||
<a href="#m2-correcteur">Le correcteur</a>
|
||||
<a href="#m2-textes">Textes à saisir</a>
|
||||
<a href="#m2-chrono">Chronomètre</a>
|
||||
<a href="#m2-quiz">Teste-toi</a>
|
||||
<h2>Autres modules</h2>
|
||||
<a href="../index.html">Tous les modules de la classe</a>
|
||||
<a href="../module1/index.html">Module 1, le poste et les fichiers</a>
|
||||
</nav>
|
||||
|
||||
<main class="feuille" id="haut">
|
||||
<div class="regle" aria-hidden="true"></div>
|
||||
<div class="inner">
|
||||
|
||||
<p class="chapeau">Taper vite et bien commence par une règle simple : on tape les mots, la présentation vient après. Ce module montre pourquoi, et entraîne la frappe.</p>
|
||||
|
||||
<h2 id="m2-demo">Commence par ceci</h2>
|
||||
<p>Voici le même paragraphe, tapé de deux façons. À gauche, le texte a été saisi au kilomètre : une seule marque de paragraphe, tout à la fin. À droite, quelqu'un a appuyé sur Entrée en fin de chaque ligne.</p>
|
||||
<p>Affiche les marques, puis agrandis la police. Regarde ce qui arrive à la colonne de droite.</p>
|
||||
|
||||
<div class="demo">
|
||||
<div class="demo-barre">
|
||||
<button id="btn-marques" class="plein" aria-pressed="false">Afficher les marques</button>
|
||||
<label for="taille">Taille : <output id="taille-val">11</output> pt</label>
|
||||
<input type="range" id="taille" min="11" max="26" value="11" step="1">
|
||||
</div>
|
||||
<div class="demo-corps">
|
||||
<div class="demo-col" id="col-bon">
|
||||
<h4>Saisi au kilomètre</h4>
|
||||
<div class="txt"></div>
|
||||
</div>
|
||||
<div class="demo-col" id="col-mauvais">
|
||||
<h4>Entrée à chaque ligne</h4>
|
||||
<div class="txt"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>À gauche, le texte se réorganise tout seul. À droite, il part en morceaux. C'est toute la différence entre un document qu'on peut encore modifier et un document qu'il faudra retaper.</p>
|
||||
|
||||
<h2 id="m2-kilometre"><span class="module-tag">Module 2</span><br>Saisir au kilomètre</h2>
|
||||
<p>Saisir au kilomètre, c'est taper tout le texte d'une traite, sans s'occuper de son apparence. Pas de gras, pas de centrage, pas de police choisie. Rien que les mots, dans l'ordre. La mise en forme vient après.</p>
|
||||
<p>Ce n'est pas un exercice d'école, c'est la façon dont on travaille vraiment. Tu vas plus vite, tu fais moins de fautes, et tu peux changer la présentation d'un seul coup à la fin.</p>
|
||||
|
||||
<h2 id="m2-entree">La touche Entrée</h2>
|
||||
<p>Le logiciel passe tout seul à la ligne quand la ligne est pleine. Tu n'as rien à faire.</p>
|
||||
<div class="regle-cle">
|
||||
<p>Entrée sert à une seule chose : terminer un paragraphe et en commencer un autre. Elle insère une marque de paragraphe <span class="pil">¶</span>.</p>
|
||||
</div>
|
||||
<p><code>Ctrl+F10</code> affiche les marques. Utilise-le chaque fois que quelque chose te semble bizarre : tu verras ce que tu as réellement tapé. Remonte en haut de la page pour revoir la démonstration.</p>
|
||||
<p>Une ligne vide entre deux paragraphes se règle par un espacement, pas par trois touches Entrée. Ça vient au module 3.</p>
|
||||
|
||||
<h2 id="m2-ponctuation">La ponctuation</h2>
|
||||
<table>
|
||||
<tr><th>Signe</th><th>Espace avant</th><th>Espace après</th></tr>
|
||||
<tr><td>virgule <code>,</code></td><td>non</td><td>oui</td></tr>
|
||||
<tr><td>point <code>.</code></td><td>non</td><td>oui</td></tr>
|
||||
<tr><td>point-virgule <code>;</code></td><td>oui, insécable</td><td>oui</td></tr>
|
||||
<tr><td>deux-points <code>:</code></td><td>oui, insécable</td><td>oui</td></tr>
|
||||
<tr><td>point d'interrogation <code>?</code></td><td>oui, insécable</td><td>oui</td></tr>
|
||||
<tr><td>point d'exclamation <code>!</code></td><td>oui, insécable</td><td>oui</td></tr>
|
||||
<tr><td>parenthèse ouvrante <code>(</code></td><td>oui</td><td>non</td></tr>
|
||||
<tr><td>parenthèse fermante <code>)</code></td><td>non</td><td>oui</td></tr>
|
||||
</table>
|
||||
<p>Une espace insécable empêche le logiciel de couper la ligne à cet endroit. Sans elle, un point d'interrogation peut se retrouver tout seul au début de la ligne suivante. On l'obtient par <code>Ctrl+Maj+Espace</code>.</p>
|
||||
<div class="regle-cle">
|
||||
<p>Les deux erreurs qui se voient le plus sur un document imprimé : une espace avant la virgule, et pas d'espace après le point.</p>
|
||||
</div>
|
||||
|
||||
<h3>Trouve les espacements fautifs</h3>
|
||||
<p>Clique sur chaque endroit où l'espacement est faux. Il y en a huit.</p>
|
||||
<div class="chasse" id="chasse-esp"></div>
|
||||
<p class="score" id="score-esp"></p>
|
||||
<div class="actions"><button id="reset-esp">Recommencer</button><button id="sol-esp">Montrer la solution</button></div>
|
||||
|
||||
<h2 id="m2-caracteres">Accents et signes</h2>
|
||||
<p>Les majuscules s'accentuent. On écrit <strong>École</strong>, <strong>À partir de</strong>, <strong>Étienne</strong>. La méthode qui marche sur tous les postes : tape <code>é</code>, sélectionne-le avec <code>Maj</code>+flèche gauche, puis Format, Texte, MAJUSCULES. Sur certains claviers, <code>Verr.Maj</code> suivi de <code>é</code> donne directement <code>É</code> ; sur d'autres, il donne un 2. Essaie sur ton poste.</p>
|
||||
<p>Les symboles absents du clavier (degré, case à cocher, flèche, lettres grecques) se trouvent au même endroit.</p>
|
||||
<figure>
|
||||
<img src="../images/m2-caractere-special.png" alt="Boîte de dialogue Caractère spécial"
|
||||
onerror="this.outerHTML='<div class=\'manque\'>Capture à ajouter : <code>3tq-technique-sociale/images/m2-caractere-special.png</code><br>Boîte Caractère spécial, liste des polices et champ de recherche visibles.</div>'">
|
||||
<figcaption>Insertion, puis Caractère spécial.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 id="m2-raccourcis">Raccourcis</h2>
|
||||
<p>La souris est lente. Tape un mot pour filtrer la liste.</p>
|
||||
<label for="filtre">Filtrer</label><br>
|
||||
<input id="filtre" type="text" placeholder="par exemple : sélectionner" spellcheck="false">
|
||||
<table id="tab-racc"><tbody></tbody></table>
|
||||
|
||||
<h2 id="m2-correcteur">Le correcteur ne relit pas à ta place</h2>
|
||||
<p>Le correcteur souligne les mots qu'il ne trouve pas dans son dictionnaire. Il ne voit pas un mot qui existe mais qui n'est pas le bon.</p>
|
||||
<p>Dans le texte ci-dessous, tous les mots existent en français. Clique sur ceux qui sont faux. Il y en a dix.</p>
|
||||
<div class="chasse" id="chasse-mots"></div>
|
||||
<p class="score" id="score-mots"></p>
|
||||
<div class="actions"><button id="reset-mots">Recommencer</button><button id="sol-mots">Montrer la solution</button></div>
|
||||
<div class="regle-cle">
|
||||
<p>Le correcteur trouve les mots qui n'existent pas. Pas les mots qui ne sont pas à leur place. Tu relis toi-même, toujours, après lui.</p>
|
||||
</div>
|
||||
<p>Vérifie aussi la langue du document, en bas de la fenêtre. Un texte français réglé sur l'anglais est souligné en rouge de bout en bout.</p>
|
||||
|
||||
<h2 id="m2-textes">Textes à saisir</h2>
|
||||
<p>Les textes des exercices, pour les avoir sous les yeux pendant que tu tapes. Ne recopie pas les retours à la ligne que tu vois à l'écran : appuie sur Entrée uniquement entre deux paragraphes.</p>
|
||||
|
||||
<details><summary>Exercice 1, le centre de vacances La Ruche</summary>
|
||||
<div class="specimen">
|
||||
<p>Le centre de vacances La Ruche ouvre ses portes du 1er au 15 juillet. Il accueille les enfants de six à douze ans, du lundi au vendredi, de huit heures trente à seize heures trente. Une garderie est assurée à partir de sept heures trente et jusqu'à dix-sept heures trente.</p>
|
||||
<p>Chaque semaine est construite autour d'un thème. La première semaine sera consacrée à la nature et à la découverte de la forêt voisine. La seconde portera sur les arts du cirque, avec l'intervention de deux artistes professionnels le jeudi.</p>
|
||||
<p>Les inscriptions se prennent au secrétariat, au 12 de la rue des Écoles, ou par téléphone au 069 22 34 56. Le nombre de places est limité à quarante enfants par semaine. Une fiche médicale complétée par les parents est indispensable.</p>
|
||||
<p>Le prix de la semaine est de cinquante euros pour le premier enfant et de quarante euros à partir du second. Ce montant comprend les collations, le matériel et les assurances. Le repas de midi n'est pas fourni.</p>
|
||||
</div>
|
||||
<p>Quatre paragraphes, donc quatre marques <span class="pil">¶</span>. Attention au É de « rue des Écoles ».</p>
|
||||
</details>
|
||||
|
||||
<details><summary>Exercice 3, les services aux familles</summary>
|
||||
<div class="specimen">
|
||||
<p>Services proposés aux familles</p>
|
||||
<p>L'agence communale ouvre un guichet unique destiné aux familles. Que vous cherchiez une place en crèche, une aide administrative ou une information sur les activités extrascolaires, une seule adresse suffit désormais.</p>
|
||||
<p>Quels services trouve-t-on au guichet ? Trois missions principales lui sont confiées.</p>
|
||||
<p>L'accueil et l'orientation : un agent reçoit sans rendez-vous et oriente vers le service compétent. Il dispose de la liste complète des milieux d'accueil de la commune.</p>
|
||||
<p>L'aide au remplissage des documents : allocations, primes de naissance, inscriptions scolaires. Aucune connaissance administrative n'est nécessaire de la part des familles.</p>
|
||||
<p>Le suivi des demandes : chaque dossier reçoit un numéro et peut être suivi par téléphone. Le délai de traitement annoncé est de quinze jours ouvrables.</p>
|
||||
<p>Le guichet est ouvert du lundi au vendredi, de huit heures trente à midi, et le mercredi après-midi de treize heures à seize heures. Il est fermé les jours fériés. Une permanence téléphonique reste assurée en dehors de ces heures.</p>
|
||||
<p>Étienne Delval, échevin des Affaires sociales</p>
|
||||
</div>
|
||||
<p>Espaces insécables devant les deux-points et le point d'interrogation. Et le É d'Étienne.</p>
|
||||
</details>
|
||||
|
||||
<details><summary>Exercice 6, texte du chronomètre</summary>
|
||||
<div class="specimen">
|
||||
<p>L'animation d'un groupe d'enfants demande de la préparation. Avant chaque séance, l'animateur prévoit le matériel, vérifie l'espace disponible et prépare une activité de remplacement en cas de mauvais temps. Il connaît le nombre d'enfants attendus et les éventuelles allergies alimentaires signalées par les parents.</p>
|
||||
<p>Pendant la séance, il observe autant qu'il anime. Un enfant qui reste à l'écart, un groupe qui se forme contre un autre, une consigne qui n'est pas comprise : ce sont des informations utiles pour la suite. L'animateur note ce qu'il remarque, sans interrompre l'activité.</p>
|
||||
<p>Après la séance, un temps de rangement collectif est prévu. Les enfants y participent, car il fait partie de l'activité et non de la corvée qui la suit. L'animateur profite de ce moment pour recueillir les impressions du groupe sur ce qui vient d'être fait.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<h2 id="m2-chrono">Chronomètre</h2>
|
||||
<p>Cinq minutes de frappe. Tape dans le cadre, le compteur avance tout seul. Ce relevé n'est pas coté : il sert à voir ta progression d'un mois à l'autre. Note tes deux chiffres dans ta grille.</p>
|
||||
<div class="chrono">
|
||||
<div class="temps" id="temps">05:00</div>
|
||||
<button id="go" class="plein">Démarrer</button>
|
||||
<button id="stop">Arrêter</button>
|
||||
<div>Mots : <strong id="mots">0</strong></div>
|
||||
</div>
|
||||
<textarea id="zone-frappe" placeholder="Le chronomètre démarre quand tu cliques sur Démarrer." spellcheck="false" disabled></textarea>
|
||||
<p id="bilan"></p>
|
||||
|
||||
<h2 id="m2-quiz">Teste-toi, module 2</h2>
|
||||
<div class="quiz" id="quiz2"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
<p>Cours de traitement de texte, 3e année Techniques sociales et d'animation. M. Courcelle, 2026-2027.</p>
|
||||
<p>Les captures d'écran sont à réaliser sur la version de LibreOffice installée en salle.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../../assets/atelier-texte.js"></script>
|
||||
<script>
|
||||
"use strict";
|
||||
/* ---------- démonstration des marques de paragraphe ---------- */
|
||||
const PARA = "Le centre de vacances La Ruche ouvre ses portes du 1er au 15 juillet. Il accueille les enfants de six à douze ans, du lundi au vendredi. Une garderie est assurée dès sept heures trente.";
|
||||
const LIGNES = ["Le centre de vacances La Ruche ouvre ses","portes du 1er au 15 juillet. Il accueille","les enfants de six à douze ans, du lundi","au vendredi. Une garderie est assurée dès","sept heures trente."];
|
||||
let marques = false;
|
||||
|
||||
function rendreDemo(){
|
||||
const pil = marques ? '<span class="marque">¶</span>' : '';
|
||||
const bon = marques ? PARA.replace(/ /g,'<span class="esp">·</span>') : PARA;
|
||||
document.querySelector('#col-bon .txt').innerHTML = '<p>'+bon+pil+'</p>';
|
||||
const mauvais = LIGNES.map(l=>{
|
||||
const t = marques ? l.replace(/ /g,'<span class="esp">·</span>') : l;
|
||||
return '<p style="margin:0">'+t+pil+'</p>';
|
||||
}).join('');
|
||||
document.querySelector('#col-mauvais .txt').innerHTML = mauvais;
|
||||
}
|
||||
document.getElementById('btn-marques').addEventListener('click', e=>{
|
||||
marques = !marques;
|
||||
e.target.setAttribute('aria-pressed', marques);
|
||||
e.target.textContent = marques ? 'Masquer les marques' : 'Afficher les marques';
|
||||
rendreDemo();
|
||||
});
|
||||
document.getElementById('taille').addEventListener('input', e=>{
|
||||
const v = e.target.value;
|
||||
document.getElementById('taille-val').textContent = v;
|
||||
document.querySelectorAll('.demo-col .txt').forEach(n=>n.style.fontSize = v+'pt');
|
||||
});
|
||||
rendreDemo();
|
||||
|
||||
|
||||
/* espacements fautifs, 8 erreurs */
|
||||
const T_ESP = [
|
||||
{t:"L'",f:true},{t:"animatrice"},{t:"a"},{t:"posé"},{t:"la"},{t:"question"},{t:"suivante"},
|
||||
{t:":«",f:true},{t:"qui"},{t:"veut"},{t:"participer"},{t:"?"},{t:"»"},
|
||||
{t:"Douze"},{t:"enfants"},{t:"ont"},{t:"levé"},{t:"la"},{t:"main"},{t:",trois",f:true},
|
||||
{t:"sont"},{t:"restés"},{t:"silencieux"},{t:".",f:true},
|
||||
{t:"Marie"},{t:"a"},{t:"expliqué"},{t:"le"},{t:"programme"},{t:":"},{t:"départ"},
|
||||
{t:"à"},{t:"neuf"},{t:"heures"},{t:",retour",f:true},{t:"à"},{t:"seize"},{t:"heures."},
|
||||
{t:"Attention"},{t:"!"},{t:"Les"},{t:"parents"},{t:"signent"},{t:"avant"},
|
||||
{t:"mercredi"},{t:";aucune",f:true},{t:"inscription"},{t:"ne"},{t:"sera"},{t:"acceptée"},{t:"après"},{t:"cette"},{t:"date."},
|
||||
{t:"Le"},{t:"prix(",f:true},{t:"cinq"},{t:"euros"},{t:")comprend",f:true},{t:"le"},{t:"transport."}
|
||||
];
|
||||
chasse(document.getElementById('chasse-esp'), document.getElementById('score-esp'),
|
||||
document.getElementById('reset-esp'), document.getElementById('sol-esp'),
|
||||
T_ESP, T_ESP.filter(j=>j.f).length, "Relis la règle : jamais d'espace avant la virgule ou le point.");
|
||||
|
||||
/* mots faux mais existants, 10 erreurs */
|
||||
const T_MOT = [
|
||||
{t:"Les"},{t:"enfants"},{t:"son",f:true},{t:"arrivés"},{t:"a",f:true},{t:"dix"},{t:"heures."},
|
||||
{t:"L'animateur"},{t:"les"},{t:"a"},{t:"accueilli",f:true},{t:"dans"},{t:"la"},{t:"grande"},{t:"salle."},
|
||||
{t:"Ceux"},{t:"qui"},{t:"avais",f:true},{t:"apporté"},{t:"leur"},{t:"pique-nique"},
|
||||
{t:"l'on",f:true},{t:"déposé"},{t:"dans"},{t:"le"},{t:"frigo."},
|
||||
{t:"Les"},{t:"autres"},{t:"on",f:true},{t:"reçu"},{t:"un"},{t:"ticket."},
|
||||
{t:"La"},{t:"sortie"},{t:"et",f:true},{t:"prévue"},{t:"pour"},{t:"quatorze"},{t:"heures."},
|
||||
{t:"Les"},{t:"parents"},{t:"qui"},{t:"souhaite",f:true},{t:"venir"},{t:"doivent"},
|
||||
{t:"ce",f:true},{t:"faire"},{t:"connaître."},{t:"Le"},{t:"car"},{t:"peu",f:true},{t:"prendre"},{t:"cinquante"},{t:"personnes."}
|
||||
];
|
||||
chasse(document.getElementById('chasse-mots'), document.getElementById('score-mots'),
|
||||
document.getElementById('reset-mots'), document.getElementById('sol-mots'),
|
||||
T_MOT, T_MOT.filter(j=>j.f).length, "Et pourtant, le correcteur n'en souligne presque aucune.");
|
||||
|
||||
|
||||
/* ---------- raccourcis filtrables ---------- */
|
||||
const RACC = [
|
||||
["Enregistrer","Ctrl+S"],
|
||||
["Annuler la dernière action","Ctrl+Z"],
|
||||
["Rétablir","Ctrl+Y"],
|
||||
["Afficher les marques de paragraphe","Ctrl+F10"],
|
||||
["Couper","Ctrl+X"],["Copier","Ctrl+C"],["Coller","Ctrl+V"],
|
||||
["Coller sans la mise en forme","Ctrl+Maj+V"],
|
||||
["Tout sélectionner","Ctrl+A"],
|
||||
["Espace insécable","Ctrl+Maj+Espace"],
|
||||
["Aller au début de la ligne","Origine"],
|
||||
["Aller à la fin de la ligne","Fin"],
|
||||
["Aller au début du document","Ctrl+Origine"],
|
||||
["Aller à la fin du document","Ctrl+Fin"],
|
||||
["Avancer d'un mot","Ctrl+flèche droite"],
|
||||
["Sélectionner en se déplaçant","Maj + une touche de déplacement"],
|
||||
["Sélectionner un mot","double-clic sur le mot"],
|
||||
["Vérification orthographique","F7"],
|
||||
["Rechercher et remplacer","Ctrl+H"]
|
||||
];
|
||||
const tb = document.querySelector('#tab-racc tbody');
|
||||
function rendreRacc(q){
|
||||
const f = q ? RACC.filter(r=>(r[0]+' '+r[1]).toLowerCase().includes(q.toLowerCase())) : RACC;
|
||||
tb.innerHTML = f.length
|
||||
? f.map(r=>'<tr><td>'+r[0]+'</td><td><code>'+r[1]+'</code></td></tr>').join('')
|
||||
: '<tr><td colspan="2">Aucun raccourci ne correspond. Essaie un autre mot.</td></tr>';
|
||||
}
|
||||
document.getElementById('filtre').addEventListener('input', e=>rendreRacc(e.target.value));
|
||||
rendreRacc('');
|
||||
|
||||
|
||||
quiz(document.getElementById('quiz2'), [
|
||||
{q:"Quand appuies-tu sur Entrée ?",
|
||||
r:["À la fin de chaque ligne","Seulement pour changer de paragraphe","Quand le texte touche la marge"],
|
||||
b:1, e:"Le passage à la ligne est automatique. Entrée termine un paragraphe et en ouvre un autre."},
|
||||
{q:"Quel espacement est correct ?",
|
||||
r:["Les enfants , les parents et les animateurs","Les enfants, les parents et les animateurs","Les enfants ,les parents et les animateurs"],
|
||||
b:1, e:"Jamais d'espace avant la virgule, toujours une après."},
|
||||
{q:"Comment obtient-on une espace insécable ?",
|
||||
r:["Ctrl+Maj+Espace","Deux fois la barre d'espace","Alt+Espace"],
|
||||
b:0, e:"Elle empêche le logiciel de couper la ligne juste avant un signe comme ? ou :."},
|
||||
{q:"Le correcteur ne souligne rien dans « les enfants son arrivés ». Pourquoi ?",
|
||||
r:["Il est mal réglé","Parce que « son » existe en français","Parce que la phrase est correcte"],
|
||||
b:1, e:"Le correcteur vérifie l'existence des mots, pas leur place dans la phrase."},
|
||||
{q:"Que fait <code>Ctrl+F10</code> ?",
|
||||
r:["Il enregistre le document","Il affiche les marques de paragraphe et les espaces","Il corrige l'orthographe"],
|
||||
b:1, e:"C'est le moyen de voir ce que tu as réellement tapé quand quelque chose semble bizarre."},
|
||||
{q:"Tu colles un texte venu d'un site web et il arrive avec sa mise en forme. Que fais-tu ?",
|
||||
r:["Tu le retapes","Tu utilises Ctrl+Maj+V et Texte non formaté","Tu changes la police à la main"],
|
||||
b:1, e:"Le collage spécial en texte non formaté enlève tout ce qui vient du site."}
|
||||
]);
|
||||
|
||||
|
||||
/* ---------- chronomètre ---------- */
|
||||
let reste = 300, tid = null;
|
||||
const tEl = document.getElementById('temps');
|
||||
const zone = document.getElementById('zone-frappe');
|
||||
const motsEl = document.getElementById('mots');
|
||||
const bilan = document.getElementById('bilan');
|
||||
|
||||
function affiche(){
|
||||
const m = String(Math.floor(reste/60)).padStart(2,'0');
|
||||
const s = String(reste%60).padStart(2,'0');
|
||||
tEl.textContent = m+':'+s;
|
||||
}
|
||||
function compter(){
|
||||
const n = zone.value.trim() ? zone.value.trim().split(/\s+/).length : 0;
|
||||
motsEl.textContent = n;
|
||||
return n;
|
||||
}
|
||||
function arreter(){
|
||||
if(!tid && !zone.value) return; // rien n'a été lancé
|
||||
clearInterval(tid); tid = null; zone.disabled = true;
|
||||
bilan.innerHTML = '<strong>'+compter()+' mots en '+Math.round((300-reste)/60*10)/10+' minute(s).</strong> '
|
||||
+ 'Relis maintenant et compte tes fautes de frappe, puis note les deux chiffres dans ta grille.';
|
||||
}
|
||||
document.getElementById('go').addEventListener('click',()=>{
|
||||
if(tid) return;
|
||||
reste = 300; affiche(); zone.disabled = false; zone.value = ''; compter();
|
||||
bilan.textContent = ''; zone.focus();
|
||||
tid = setInterval(()=>{ reste--; affiche(); if(reste<=0) arreter(); },1000);
|
||||
});
|
||||
document.getElementById('stop').addEventListener('click', arreter);
|
||||
zone.addEventListener('input', compter);
|
||||
affiche();
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user