diff --git a/3tq-technique-sociale/index.html b/3tq-technique-sociale/index.html index 163360a..04be1a1 100644 --- a/3tq-technique-sociale/index.html +++ b/3tq-technique-sociale/index.html @@ -74,6 +74,22 @@ Textes à saisir · chronomètre de frappe · quiz de fin de module +
  • + + Module 3 + Mettre le texte en forme + Caractère ou paragraphe, polices et tailles, alignements, retraits, espacements, encadrés. + Atelier de mise en forme en direct · textes à saisir · quiz de fin de module + +
  • +
  • + + Module 4 + Mise en page et impression + Format et marges, sauts de page, en-tête et pied de page, numérotation, aperçu et PDF. + Feuille A4 réglable · deux démonstrations comparées · quiz de fin de module + +
  • diff --git a/3tq-technique-sociale/indexold.html b/3tq-technique-sociale/indexold.html new file mode 100644 index 0000000..163360a --- /dev/null +++ b/3tq-technique-sociale/indexold.html @@ -0,0 +1,88 @@ + + + + + +3e TQ Technique sociale — Traitement de texte + + + + + + + + + +
    +
    + +

    3e TQ Technique sociale

    +

    Traitement de texte · M. Courcelle

    +
    +
    + +
    + +

    Choisis le module sur lequel tu travailles. Chaque module se lit du début à la fin, avec des exercices à faire directement dans la page.

    + +

    Les modules du cours

    + + + + + +
    + + + + + diff --git a/3tq-technique-sociale/module3/index.html b/3tq-technique-sociale/module3/index.html new file mode 100644 index 0000000..cf5fa38 --- /dev/null +++ b/3tq-technique-sociale/module3/index.html @@ -0,0 +1,230 @@ + + + + + +Module 3 — 3e TQ Technique sociale + + + + + + + + + + +
    +
    + +

    Mettre le texte en forme

    +

    Traitement de texte · caractères, paragraphes, encadrés

    +
    +
    + +
    + + + +
    + +
    + +

    Le module 2 t'interdisait de mettre en forme. Celui-ci t'y autorise enfin. Une + seule règle tient tout le module : la mise en forme se règle par les commandes du logiciel, jamais + par des espaces ou des touches Entrée.

    + +

    Module 3
    Caractère ou paragraphe

    +

    C'est la distinction qui commande tout le reste. Une mise en forme de caractère s'applique à ce que tu as sélectionné. Une mise en forme de paragraphe s'applique au paragraphe entier, celui où se trouve le curseur, même sans sélection.

    + +
    +

    Le caractère se sélectionne. Le paragraphe se pointe.

    +
    + +

    Classe chaque réglage. Clique sur C pour caractère, sur P pour paragraphe.

    +
    +

    +
    + +

    Atelier de mise en forme

    +

    Règle les curseurs et regarde ce qui change. La pastille bleue marque un réglage de caractère, la pastille brune un réglage de paragraphe.

    + +
    +
    +
    + + +
    +
    + + +
    +
    + +
    + + + + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + + +
    +
    +
    +
    +

    La maison de quartier Les Tilleuls organise des ateliers pour les enfants de six à douze ans. Les activités se déroulent dans la salle du rez-de-chaussée, accessible par la cour.

    +

    L'accueil se fait de treize heures à treize heures trente. Les ateliers commencent à quatorze heures et se terminent à seize heures trente.

    +
    +
    +
    +

    Remarque en jouant : les réglages bruns agissent sur les deux paragraphes entiers, sans que tu aies rien sélectionné. C'est exactement ce qui se passe dans Writer.

    + +

    Les caractères

    + + + + + + + + +
    RéglageOùRaccourci
    Police et taillelistes de la barre de formatageaucun
    Grasbouton GCtrl+B
    Italiquebouton ICtrl+I
    Soulignébouton SCtrl+U
    MajusculesFormat, Texteaucun
    Tout au même endroitFormat, Caractèreaucun
    + +
    +

    Une police pour le texte, une pour les titres, pas plus. Texte courant entre 10 et 12 points. Le souligné date de la machine à écrire : aujourd'hui, un mot souligné ressemble à un lien internet.

    +
    + +
    + Boîte de dialogue Caractère +
    Format, puis Caractère.
    +
    + +

    Les paragraphes

    +

    Tout se règle dans Format, puis Paragraphe. Les quatre onglets utiles cette année :

    + + + + + + +
    OngletCe qu'on y trouve
    Retraits et espacementretraits, espacement avant et après, interligne
    Alignementgauche, centré, droite, justifié
    Borduresencadré, épaisseur, espacement intérieur
    Zonecouleur de fond. Cet onglet s'appelle Arrière-plan dans les versions plus anciennes
    + +
    +

    Aucune ligne vide obtenue avec la touche Entrée, aucun alignement obtenu à la barre d'espace. L'espacement après et l'alignement font le travail, et se modifient d'un seul geste sur tout le document.

    +
    + +
    + Boîte de dialogue Paragraphe +
    Format, puis Paragraphe.
    +
    + +

    Reproduire et effacer

    + + + + + + +
    OutilCe qu'il faitOù
    Cloner le formatagecopie une mise en forme et l'applique ailleurspinceau de la barre standard
    Effacer le formatage directramène le texte à sa présentation de baseFormat, ou Ctrl+M
    Collage sans mise en formecolle un texte nu, sans ce qui vient du site d'origineCtrl+Maj+V
    Rechercher et remplacerremplace un mot dans tout le documentCtrl+H
    +

    Avec le pinceau : un clic simple l'active pour une seule application, un double-clic le garde actif jusqu'à ce que tu appuies sur Échap. Maintiens Ctrl+Maj pendant l'application pour emporter aussi la mise en forme du paragraphe.

    + +

    Textes à saisir

    +

    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.

    + +
    Exercice 1, les ateliers du mercredi +
    +

    Ateliers du mercredi après-midi

    +

    La maison de quartier Les Tilleuls organise des ateliers pour les enfants de six à douze ans. Les activités se déroulent dans la salle du rez-de-chaussée, accessible par la cour.

    +

    L'accueil se fait de treize heures à treize heures trente. Les ateliers commencent à quatorze heures et se terminent à seize heures trente. Un goûter est servi à quinze heures quinze.

    +

    La participation est gratuit pour les familles de la commune. Les inscriptions se prennent au 069 22 34 56 ou directement auprès des animateurs, le mercredi.

    +

    Nadia Bouchard, coordinatrice des activités enfance

    +
    +

    Ce texte contient une faute d'accord. La trouveras-tu en le mettant en forme ?

    +
    + +
    Exercice 3, la sortie au musée +
    +

    Sortie au musée de la vie rurale

    +

    Le groupe des huit à dix ans se rendra au musée de la vie rurale le jeudi 12 mars. Le départ est prévu à neuf heures devant la maison de quartier et le retour vers seize heures au même endroit. Le trajet se fait en car.

    +

    La visite est guidée le matin. L'après-midi est consacrée à un atelier de fabrication de pain, animé par le personnel du musée. Les enfants repartent avec ce qu'ils ont préparé.

    +

    Important : l'autorisation parentale doit être rentrée pour le vendredi 6 mars au plus tard. Aucun enfant ne pourra participer sans ce document signé. Prévoir un pique-nique, une tenue qui ne craint rien et des chaussures fermées.

    +
    +
    + +
    Exercice 4, la journée type au centre de vacances +
    +

    Déroulement d'une journée type au centre de vacances

    +

    Le matin

    +

    Les enfants arrivent entre huit heures et neuf heures. Le moniteur responsable du groupe fait l'appel et note les présences. La première activité commence à neuf heures trente.

    +

    Le midi

    +

    Le repas est pris en commun dans la grande salle. Chaque moniteur mange avec son groupe. Le temps de midi comprend aussi un moment calme, pendant lequel les enfants peuvent lire ou jouer à des jeux de table.

    +

    L'après-midi

    +

    Les activités reprennent à quatorze heures. Les moniteurs se répartissent les groupes selon les ateliers proposés. Le goûter est servi à seize heures et les parents arrivent à partir de seize heures trente.

    +

    Le centre de vacances est agréé par l'Office de la naissance et de l'enfance. L'encadrement est assuré par du personnel qualifié et le taux d'encadrement respecte la réglementation en vigueur.

    +
    +
    + +

    Teste-toi, module 3

    +
    + +
    +
    +
    + + + + + + + diff --git a/3tq-technique-sociale/module4/index.html b/3tq-technique-sociale/module4/index.html new file mode 100644 index 0000000..66a6727 --- /dev/null +++ b/3tq-technique-sociale/module4/index.html @@ -0,0 +1,236 @@ + + + + + +Module 4 — 3e TQ Technique sociale + + + + + + + + + + +
    +
    + +

    Mise en page et impression

    +

    Traitement de texte · marges, sauts de page, en-tête, PDF

    +
    +
    + +
    + + + +
    + +
    + +

    Le module 3 travaillait à l'intérieur de la page. Celui-ci travaille sur la page + elle-même : son format, ses marges, l'endroit où elle se coupe, ce qui se répète en haut et en bas, + et la façon dont le document sort de l'ordinateur.

    + +

    Module 4
    La page

    +

    Trois réglages définissent une page, et ils se trouvent tous au même endroit : Format, puis Style de page.

    +

    Déplace les curseurs : la zone bleue est celle où ton texte peut s'écrire.

    + +
    +
    +
    +

    +
    +
    +
    + +
    + + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + + +
    +
    +
    + +
    +

    Format A4 en Belgique, 21 sur 29,7 cm. Deux centimètres de marge conviennent à presque tout. En dessous de 1,5 cm, certaines imprimantes coupent le texte. Pour un document à perforer, 2,5 cm à gauche.

    +
    + +
    + Boîte de dialogue Style de page +
    Format, puis Style de page, onglet Page.
    +
    + +

    Le saut de page

    +

    Deux façons de faire commencer un titre en haut d'une page. Une seule tient la route.

    +

    Clique sur le bouton : une phrase s'ajoute au début du texte, comme quand tu complètes un document déjà écrit.

    + +
    + + +
    + +
    +
    +

    Lignes vides jusqu'à la page suivante

    +
    +
    +
    +

    Saut de page avec Ctrl+Entrée

    +
    +
    +
    + +

    À gauche, le titre glisse au milieu de la page 2 et il faudra supprimer des lignes vides une à une. À droite, il reste en haut de la page 2, quoi que tu ajoutes avant.

    + +
    +

    Ctrl+Entrée pour changer de page. Pour supprimer un saut, place le curseur juste en dessous du trait pointillé et appuie sur Retour arrière.

    +
    + +

    En-tête et pied de page

    +

    L'en-tête est une zone en haut de chaque page, le pied de page une zone en bas. Ce qu'on y écrit se répète automatiquement sur toutes les pages. On y met ce qui identifie le document : son titre, l'organisme, la date, le numéro de page.

    +

    Pour activer : Insertion, puis En-tête et pied de page, puis En-tête ou Pied de page, puis Style par défaut.

    +

    Dans ces zones, la touche Tab saute au centre, une seconde fois à droite. Les taquets y sont déjà posés : tu n'as rien à régler, et surtout rien à aligner à la barre d'espace.

    + +
    +

    Si tu retapes le titre en haut de chaque page dans le corps du texte, tout est faux dès que le texte se décale d'une ligne.

    +
    + +
    + Zone d'en-tête active dans Writer +
    La zone d'en-tête, active.
    +
    + +

    Les champs

    +

    Certaines informations ne se tapent pas : le logiciel les insère et les tient à jour. On les appelle des champs. À l'écran, ils apparaissent sur un fond grisé qui ne s'imprime pas.

    + + + + + + + +
    ChampOù le trouver
    Numéro de pageInsertion, Numéro de page
    Nombre de pagesInsertion, Champ, Nombre de pages
    DateInsertion, Champ, Date
    Nom du fichierInsertion, Champ, Nom de fichier
    + +

    Ajoute des pages au document imaginaire ci-dessous et compare les deux pieds de page.

    + +
    + + +
    + +
    +
    +

    Numéro tapé à la main

    +
    +
    +
    +

    Numéro inséré comme champ

    +
    +
    +
    +

    + +

    Vérifier et imprimer

    +

    L'écran ment : il n'affiche pas la taille réelle et ne montre pas où les pages se coupent. L'aperçu, lui, montre le document tel qu'il sortira. Menu Fichier, puis Aperçu, ou Ctrl+Maj+O.

    +

    Ce qu'on regarde dans l'aperçu :

    +
      +
    • une page se termine-t-elle par un titre seul, sans texte en dessous ?
    • +
    • une page commence-t-elle par une seule ligne isolée ?
    • +
    • l'en-tête et le pied figurent-ils sur toutes les pages ?
    • +
    • reste-t-il une page presque vide ?
    • +
    • les marges sont-elles régulières ?
    • +
    +

    Dans la fenêtre d'impression, Ctrl+P, trois réglages servent souvent : choisir les pages à imprimer en tapant par exemple 2-3, imprimer plusieurs pages sur une feuille pour relire sans gâcher de papier, et choisir le nombre d'exemplaires.

    + +
    +

    Le PDF pour envoyer, le .odt pour garder. Exporter ne remplace pas enregistrer : sans ton fichier modifiable, tu ne pourras plus rien corriger.

    +
    + +

    Pour exporter : Fichier, Exporter vers, Exporter au format PDF.

    + +

    Textes à saisir

    +

    Les textes des exercices. Le document se construit d'un exercice à l'autre : tu repars à chaque fois du fichier précédent.

    + +
    Exercice 1, la fiche d'information +
    +

    Fiche d'information à destination des parents

    +

    La crèche Les Petits Pas accueille les enfants de deux mois et demi à trois ans. Elle dispose de trente-six places réparties en trois sections selon l'âge des enfants. L'équipe se compose de puéricultrices, d'une infirmière et d'une directrice.

    +

    Les inscriptions se prennent à partir du quatrième mois de grossesse. Une visite des locaux est organisée avant toute inscription définitive. Elle permet de rencontrer l'équipe et de poser les questions pratiques liées à l'arrivée de l'enfant.

    +

    La participation financière des parents est calculée sur la base des revenus du ménage, selon le barème fixé par l'Office de la naissance et de l'enfance. Une attestation fiscale est délivrée chaque année pour les frais de garde.

    +

    La crèche est ouverte de sept heures à dix-huit heures trente, du lundi au vendredi. Elle est fermée les jours fériés légaux, entre Noël et Nouvel An, ainsi que trois semaines en été. Les dates de fermeture sont communiquées aux parents en début d'année.

    +
    +
    + +
    Exercice 2, les trois sections à ajouter +
    +

    Le déroulement d'une journée

    +

    L'accueil du matin se fait de sept heures à neuf heures. Chaque enfant est remis à une puéricultrice de sa section, avec les informations utiles de la nuit et du petit-déjeuner. Les activités d'éveil occupent la fin de la matinée.

    +

    Le repas de midi est préparé sur place par une cuisinière. Les menus sont affichés à l'entrée et adaptés à l'âge des enfants. La sieste suit le repas et dure jusqu'à quinze heures pour les plus jeunes.

    +

    Le matériel à fournir

    +

    Les parents fournissent les langes, les vêtements de rechange, le doudou et la tétine si l'enfant en utilise. Tout est marqué au nom de l'enfant. Les biberons sont préparés par la crèche pour les enfants qui ne sont pas allaités.

    +

    Les vêtements de rechange sont vérifiés chaque semaine par l'équipe. Un message est adressé aux parents lorsque le stock est insuffisant.

    +

    En cas de maladie

    +

    Un enfant fiévreux ou contagieux ne peut pas être accueilli. Les parents sont prévenus dès l'apparition des symptômes et viennent le chercher dans les meilleurs délais.

    +

    Aucun médicament n'est administré sans prescription médicale écrite. Les vaccinations obligatoires doivent être à jour et le carnet de vaccination est présenté à l'inscription.

    +
    +
    + +

    Teste-toi, module 4

    +
    + +
    +
    +
    + + + + + + + diff --git a/assets/atelier-m3-m4.css b/assets/atelier-m3-m4.css new file mode 100644 index 0000000..99e39b4 --- /dev/null +++ b/assets/atelier-m3-m4.css @@ -0,0 +1,80 @@ +/* ===================================================================== + atelier-m3-m4.css + Styles propres aux interactions des modules 3 et 4. + Additif : ne redéfinit aucune classe de theme.css ni d'atelier-texte.css. + Tous les sélecteurs sont préfixés par at- pour éviter toute collision. + Les couleurs reprennent les variables du thème quand elles existent, + avec une valeur de repli sinon. + ===================================================================== */ + +.at-badge{ + display:inline-block;width:1.15rem;height:1.15rem;line-height:1.15rem; + text-align:center;font-size:.72rem;font-weight:700; + color:var(--papier,#fff);margin-right:.4rem;vertical-align:.05rem; +} +.at-badge--c{background:var(--repere,#2A6179)} +.at-badge--p{background:#7A5B12} + +/* ---------- barre de réglages ---------- */ +.at-barre{ + background:#F1F4F6;border:1px solid var(--trait,#CBD4DB); + padding:.8rem 1rem; + display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); + gap:.7rem 1.2rem;font-size:.9rem; +} +.at-barre label{display:block;font-size:.84rem;color:var(--encre-clair,#4A5866);margin-bottom:.15rem} +.at-barre label.at-case{display:inline-block;font-size:.9rem;color:var(--encre,#16202B);margin-right:.8rem} +.at-barre select,.at-barre input[type=range]{width:100%;font:inherit;font-size:.9rem} + +.at-atelier{border:1px solid var(--trait,#CBD4DB);margin:1.2rem 0} +.at-atelier .at-barre{border:0;border-bottom:1px solid var(--trait,#CBD4DB)} +.at-atelier__corps{padding:1.4rem 1.2rem;background:var(--papier,#fff)} +#at-apercu{font-family:Cambria,Georgia,serif} + +.at-aligns{display:flex;gap:.3rem;flex-wrap:wrap} +.at-aligns button{padding:.25rem .5rem;font-size:.85rem} +.at-aligns button[aria-pressed="true"]{background:var(--repere,#2A6179);color:var(--papier,#fff)} + +/* ---------- tri caractère / paragraphe ---------- */ +.at-tri{display:grid;grid-template-columns:1fr auto auto;gap:.3rem .5rem;align-items:center;max-width:64ch;font-size:.95rem} +.at-tri__lib{padding:.25rem 0} +.at-tri button{padding:.2rem .6rem;font-size:.85rem} +.at-tri__lib.est-juste{color:var(--juste,#1E7A4C);font-weight:600} +.at-tri__lib.est-faux{color:var(--erreur,#B03A2E)} +.at-score{font-weight:600;margin-top:.6rem} + +/* ---------- comparaison en deux colonnes ---------- */ +.at-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0} +.at-duo h4{margin:0 0 .4rem;font-size:.88rem;color:var(--encre-clair,#4A5866);font-weight:600} +@media(max-width:700px){.at-duo{grid-template-columns:1fr}} + +/* ---------- simulation de flux de pages (module 4) ---------- */ +.at-flux{ + column-count:2;column-gap:1rem;column-rule:1px dashed #9AA8B2; + height:13rem;overflow:hidden;background:#FBFCFC; + border:1px solid var(--trait,#CBD4DB);padding:.8rem 1rem; + font-family:Cambria,Georgia,serif;font-size:.82rem;line-height:1.5; +} +.at-flux p{margin:0 0 .5rem} +.at-flux h5{margin:0 0 .4rem;font-size:.95rem;font-family:inherit;font-weight:700} +.at-flux h5.at-saut{break-before:column;-webkit-column-break-before:always} + +/* ---------- feuille A4 réglable (module 4) ---------- */ +.at-mise{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.4rem;align-items:start;margin:1.2rem 0} +@media(max-width:700px){.at-mise{grid-template-columns:1fr}} +.at-page{ + border:1px solid var(--encre-clair,#4A5866);background:var(--papier,#fff); + width:min(16rem,100%);aspect-ratio:210/297;margin:0 auto;position:relative; +} +.at-page--paysage{aspect-ratio:297/210;width:min(22rem,100%)} +.at-page__zone{position:absolute;background:var(--repere-clair,#E3EDF1);border:1px dashed var(--repere,#2A6179)} +.at-page__bande{ + position:absolute;left:0;right:0;background:#FDF3E3; + border-top:1px solid #D08C3A;border-bottom:1px solid #D08C3A; + font-size:.6rem;text-align:center;color:#9C4221; +} +.at-page__note{text-align:center;font-size:.85rem;color:var(--encre-clair,#4A5866);margin-top:.6rem} + +/* ---------- champ contre texte tapé ---------- */ +.at-pied{font-family:Cambria,Georgia,serif;border:1px solid var(--trait,#CBD4DB);padding:.9rem 1rem;background:#FBFCFC} +.at-champ{background:#E4EAEE} diff --git a/assets/atelier-m3-m4.js b/assets/atelier-m3-m4.js new file mode 100644 index 0000000..624ff11 --- /dev/null +++ b/assets/atelier-m3-m4.js @@ -0,0 +1,250 @@ +/* ===================================================================== + atelier-m3-m4.js + Interactions des modules 3 et 4. À charger APRÈS atelier-texte.js. + Chaque bloc ne s'exécute que si son conteneur existe dans la page, + donc le fichier peut être chargé par les deux modules indifféremment. + ===================================================================== */ +(function(){ +"use strict"; + +/* Réutilise le quiz d'atelier-texte.js s'il est disponible. + Sinon, produit le même balisage, pour que la page reste utilisable. */ +const poserQuiz = (typeof window.quiz === 'function') ? window.quiz : function(el, questions){ + if(!el) return; + el.innerHTML = questions.map(function(q,i){ + return '

    '+(i+1)+'. '+q.q+'

    ' + + q.r.map(function(r,j){ + return ''; + }).join('') + + '
    '; + }).join(''); + el.addEventListener('change', function(e){ + const bloc = e.target.closest('.q'); + const i = +bloc.dataset.i, q = questions[i]; + bloc.querySelectorAll('label').forEach(function(l,j){ + l.className = (j === q.b) ? 'bon' : (l.querySelector('input').checked ? 'mauvais' : ''); + }); + bloc.querySelector('.verdict').textContent = (+e.target.value === q.b ? 'Exact. ' : 'Non. ') + q.e; + }); +}; + +/* ===================================================================== + MODULE 3 + ===================================================================== */ + +/* ---------- tri caractère ou paragraphe ---------- */ +const triEl = document.getElementById('at-tri'); +if(triEl){ + const CP = [ + ["Mettre un mot en gras","c"], + ["Centrer un titre","p"], + ["Changer la police","c"], + ["Justifier le texte","p"], + ["Mettre en italique","c"], + ["Ajouter un retrait de première ligne","p"], + ["Changer la couleur du texte","c"], + ["Encadrer d'une bordure","p"], + ["Régler l'interligne","p"], + ["Mettre en exposant","c"], + ["Espacer deux paragraphes","p"], + ["Changer la taille en points","c"] + ]; + const scoreEl = document.getElementById('at-tri-score'); + let faits = {}; + function rendre(){ + triEl.innerHTML = CP.map(function(r,i){ + const etat = faits[i]; + const cls = etat === undefined ? '' : (etat ? ' est-juste' : ' est-faux'); + return '
    '+r[0]+'
    ' + + '' + + ''; + }).join(''); + const n = Object.keys(faits).length; + const bons = Object.keys(faits).filter(function(k){return faits[k];}).length; + scoreEl.textContent = n + ? bons+' sur '+n+' classés correctement' + + (n === CP.length ? (bons === CP.length ? '. Tout juste.' : '. Reprends ceux en rouge.') : '') + : ''; + } + triEl.addEventListener('click', function(e){ + const b = e.target.closest('button'); if(!b) return; + const i = +b.dataset.i; + faits[i] = (b.dataset.v === CP[i][1]); + rendre(); + }); + document.getElementById('at-tri-reset').addEventListener('click', function(){ faits = {}; rendre(); }); + rendre(); +} + +/* ---------- atelier de mise en forme ---------- */ +const apercu = document.getElementById('at-apercu'); +if(apercu){ + const paras = Array.prototype.slice.call(apercu.querySelectorAll('p')); + const val = function(id){ return document.getElementById(id).value; }; + const coche = function(id){ return document.getElementById(id).checked; }; + function maj(){ + const taille = val('at-taille'), retrait = val('at-retrait'), espace = val('at-espace'); + document.getElementById('at-taille-v').textContent = taille; + document.getElementById('at-retrait-v').textContent = (+retrait).toFixed(2).replace('.',','); + document.getElementById('at-espace-v').textContent = (+espace).toFixed(1).replace('.',','); + const align = document.querySelector('#at-align button[aria-pressed="true"]').dataset.v; + const bord = coche('at-bordure'); + apercu.style.fontFamily = val('at-police'); + apercu.style.fontSize = taille + 'pt'; + apercu.style.fontWeight = coche('at-gras') ? '700' : '400'; + apercu.style.fontStyle = coche('at-italique') ? 'italic' : 'normal'; + paras.forEach(function(p){ + p.style.textAlign = align; + p.style.textIndent = retrait + 'cm'; + p.style.marginBottom = espace + 'cm'; + p.style.lineHeight = val('at-interligne'); + p.style.border = bord ? '1px solid #B8912A' : 'none'; + p.style.background = bord ? '#FEFAEC' : 'transparent'; + p.style.padding = bord ? '.4rem .6rem' : '0'; + }); + } + ['at-police','at-taille','at-retrait','at-espace','at-interligne','at-bordure','at-gras','at-italique'] + .forEach(function(id){ document.getElementById(id).addEventListener('input', maj); }); + document.getElementById('at-align').addEventListener('click', function(e){ + const b = e.target.closest('button'); if(!b) return; + document.querySelectorAll('#at-align button').forEach(function(x){ x.setAttribute('aria-pressed','false'); }); + b.setAttribute('aria-pressed','true'); + maj(); + }); + maj(); +} + +/* ---------- quiz module 3 ---------- */ +poserQuiz(document.getElementById('quiz3'), [ + {q:"Tu poses le curseur dans un mot, sans rien sélectionner, et tu cliques sur Centrer. Que se passe-t-il ?", + r:["Seul le mot se centre","Tout le paragraphe se centre","Rien ne se passe"], + b:1, e:"L'alignement est une mise en forme de paragraphe : elle s'applique au paragraphe entier, sans sélection."}, + {q:"Comment sépares-tu deux paragraphes ?", + r:["Par une ligne vide, avec la touche Entrée","Par un espacement après le paragraphe","Par plusieurs touches Entrée"], + b:1, e:"Le réglage d'espacement se modifie d'un seul geste sur tout le document. Une ligne vide, non."}, + {q:"Quelle taille convient à un texte courant ?", + r:["8 points","10 à 12 points","16 points"], + b:1, e:"En dessous on ne lit plus. Au-dessus, le document semble destiné aux malvoyants, ce qui est parfois exactement le but."}, + {q:"À quoi sert le pinceau de la barre d'outils ?", + r:["À colorier le texte","À reproduire une mise en forme ailleurs","À effacer le texte"], + b:1, e:"Cloner le formatage. Un clic pour une seule application, un double-clic pour en enchaîner plusieurs."}, + {q:"Tu colles un texte venu d'un site et il arrive avec sa mise en forme. Le plus simple ?", + r:["Le coller avec Ctrl+Maj+V en texte non formaté","Le retaper","Changer la police à la main"], + b:0, e:"Et si c'est déjà collé, Ctrl+M efface le formatage direct."}, + {q:"Où trouve-t-on la couleur de fond d'un paragraphe ?", + r:["Format, Caractère","Format, Paragraphe, onglet Zone","Format, Style de page"], + b:1, e:"L'onglet Zone, appelé Arrière-plan dans les versions plus anciennes. Un fond clair, sinon le texte devient illisible."} +]); + +/* ===================================================================== + MODULE 4 + ===================================================================== */ + +/* ---------- feuille A4 et marges ---------- */ +const page = document.getElementById('at-page'); +if(page){ + const zone = document.getElementById('at-page-zone'); + const note = document.getElementById('at-page-note'); + function majPage(){ + const paysage = document.querySelector('#at-orient button[aria-pressed="true"]').dataset.v === 'paysage'; + page.classList.toggle('at-page--paysage', paysage); + const L = paysage ? 29.7 : 21, H = paysage ? 21 : 29.7; + const m = {}; + ['haut','bas','gauche','droite'].forEach(function(k){ + m[k] = +document.getElementById('at-m-'+k).value; + document.getElementById('at-m-'+k+'-v').textContent = String(m[k]).replace('.',','); + }); + zone.style.top = (m.haut/H*100)+'%'; + zone.style.bottom = (m.bas/H*100)+'%'; + zone.style.left = (m.gauche/L*100)+'%'; + zone.style.right = (m.droite/L*100)+'%'; + zone.innerHTML = ''; + if(document.getElementById('at-entete').checked){ + zone.insertAdjacentHTML('beforeend','
    en-tête
    '); + } + if(document.getElementById('at-pied').checked){ + zone.insertAdjacentHTML('beforeend','
    pied de page
    '); + } + let t = 'Zone de texte : ' + + (L - m.gauche - m.droite).toFixed(1).replace('.',',') + ' cm sur ' + + (H - m.haut - m.bas).toFixed(1).replace('.',',') + ' cm.'; + if(m.gauche < 1.5 || m.droite < 1.5 || m.haut < 1.5 || m.bas < 1.5){ + t += ' Attention, en dessous de 1,5 cm certaines imprimantes coupent le texte.'; + } + note.textContent = t; + } + ['at-m-haut','at-m-bas','at-m-gauche','at-m-droite','at-entete','at-pied'] + .forEach(function(id){ document.getElementById(id).addEventListener('input', majPage); }); + document.getElementById('at-orient').addEventListener('click', function(e){ + const b = e.target.closest('button'); if(!b) return; + document.querySelectorAll('#at-orient button').forEach(function(x){ x.setAttribute('aria-pressed','false'); }); + b.setAttribute('aria-pressed','true'); + majPage(); + }); + majPage(); +} + +/* ---------- lignes vides contre saut de page ---------- */ +const fluxA = document.getElementById('at-flux-vides'); +if(fluxA){ + const fluxB = document.getElementById('at-flux-saut'); + const CORPS = "La crèche Les Petits Pas accueille les enfants de deux mois et demi à trois ans. Elle dispose de trente-six places réparties en trois sections. Les inscriptions se prennent à partir du quatrième mois de grossesse. Une visite des locaux est organisée avant toute inscription."; + const SUITE = "L'accueil du matin se fait de sept heures à neuf heures. Chaque enfant est remis à une puéricultrice de sa section."; + const AJOUT = "Une réunion de parents est organisée chaque année en septembre."; + let ajouts = 0; + function rendreFlux(){ + let tete = ''; + for(let i = 0; i < ajouts; i++){ tete += '

    '+AJOUT+'

    '; } + const vides = new Array(7).join('

     

    '); + fluxA.innerHTML = "
    Fiche d'information
    " + tete + '

    '+CORPS+'

    ' + vides + + "
    Le déroulement d'une journée

    "+SUITE+"

    "; + fluxB.innerHTML = "
    Fiche d'information
    " + tete + '

    '+CORPS+'

    ' + + "
    Le déroulement d'une journée

    "+SUITE+"

    "; + } + document.getElementById('at-flux-plus').addEventListener('click', function(){ if(ajouts < 4){ ajouts++; rendreFlux(); } }); + document.getElementById('at-flux-reset').addEventListener('click', function(){ ajouts = 0; rendreFlux(); }); + rendreFlux(); +} + +/* ---------- numéro tapé contre champ inséré ---------- */ +const piedMain = document.getElementById('at-pied-main'); +if(piedMain){ + const piedChamp = document.getElementById('at-pied-champ'); + const noteChamp = document.getElementById('at-champ-note'); + let nb = 4; + function rendreChamp(){ + piedMain.innerHTML = 'Document mis à jour en septembre 2026     Page 1 sur 4'; + piedChamp.innerHTML = 'Document mis à jour en septembre 2026     Page ' + + '1 sur '+nb+''; + noteChamp.textContent = (nb === 4) + ? "Le document compte 4 pages. Les deux pieds de page disent la même chose. Ajoute une page." + : "Le document compte maintenant " + nb + " pages. À gauche, le total est faux et il faudra le corriger sur chaque page. À droite, il s'est recalculé tout seul."; + } + document.getElementById('at-page-plus').addEventListener('click', function(){ if(nb < 12){ nb++; rendreChamp(); } }); + document.getElementById('at-page-reset').addEventListener('click', function(){ nb = 4; rendreChamp(); }); + rendreChamp(); +} + +/* ---------- quiz module 4 ---------- */ +poserQuiz(document.getElementById('quiz4'), [ + {q:"Comment fais-tu commencer un titre en haut de la page suivante ?", + r:["En appuyant plusieurs fois sur Entrée","Avec Ctrl+Entrée","En agrandissant les marges"], + b:1, e:"Le saut de page manuel tient, même si tu ajoutes du texte avant. Les lignes vides, non."}, + {q:"Où règle-t-on les marges d'un document ?", + r:["Format, Paragraphe","Format, Style de page","Insertion, En-tête"], + b:1, e:"La marge définit où commence la zone de texte. Le retrait, lui, éloigne un paragraphe du bord de cette zone."}, + {q:"Tu tapes le numéro 1 dans le pied de page de la première page. Que voit-on page 3 ?", + r:["Le numéro 3","Le numéro 1","Rien"], + b:1, e:"Un texte tapé se répète tel quel sur toutes les pages. Il faut insérer un champ, pas un chiffre."}, + {q:"À quoi sert l'aperçu avant impression ?", + r:["À imprimer plus vite","À voir le document tel qu'il sortira de l'imprimante","À corriger l'orthographe"], + b:1, e:"On y vérifie les coupures de page, les en-têtes et l'équilibre général. Avant d'imprimer, pas après."}, + {q:"Tu envoies un courrier terminé aux parents. Quel format ?", + r:["Le PDF","Le fichier .odt","Une capture d'écran"], + b:0, e:"Le PDF est figé : le destinataire le voit comme tu l'as fait. Tu gardes ton .odt pour pouvoir le modifier."}, + {q:"Dans un en-tête, comment places-tu un texte à droite ?", + r:["Avec des espaces","Avec la touche Tab","En agrandissant la marge"], + b:1, e:"Les taquets sont déjà posés dans l'en-tête : une fois Tab pour le centre, deux fois pour la droite."} +]); + +})();