231 lines
16 KiB
HTML
231 lines
16 KiB
HTML
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0;}
|
||
.w{font-family:var(--font-sans);color:var(--color-text-primary);max-width:740px;margin:0 auto;padding:0 0 2rem;}
|
||
|
||
.dh{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;border-bottom:2px solid var(--color-text-primary);padding-bottom:1rem;margin-bottom:1.5rem;}
|
||
.dk{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:5px;}
|
||
.dt{font-size:20px;font-weight:500;line-height:1.2;}
|
||
.badge{background:#EEEDFE;border:0.5px solid #AFA9EC;border-radius:var(--border-radius-md);padding:6px 14px;text-align:center;flex-shrink:0;}
|
||
.bt{font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#534AB7;}
|
||
.bv{font-size:13px;font-weight:500;color:#3C3489;}
|
||
|
||
.id-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:1.25rem;}
|
||
.idf{display:flex;flex-direction:column;gap:4px;}
|
||
.ifl{font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-tertiary);}
|
||
.ifi{border:none;border-bottom:1px solid var(--color-border-secondary);background:transparent;font-family:var(--font-sans);font-size:13px;color:var(--color-text-primary);padding:4px 0;width:100%;outline:none;}
|
||
.ifi:focus{border-bottom-color:#534AB7;}
|
||
|
||
.intro{background:var(--color-background-secondary);border-left:3px solid #534AB7;border-radius:0;padding:.75rem 1rem;margin-bottom:1.25rem;display:flex;gap:10px;align-items:flex-start;}
|
||
.intro i{color:#534AB7;font-size:15px;flex-shrink:0;margin-top:1px;}
|
||
.intro p{font-size:12.5px;color:var(--color-text-secondary);line-height:1.6;}
|
||
.intro strong{color:var(--color-text-primary);font-weight:500;}
|
||
|
||
.warn{background:#FAEEDA;border:0.5px solid #EF9F27;border-left:3px solid #854F0B;border-radius:0;padding:.75rem 1rem;margin-bottom:1.25rem;display:flex;gap:10px;align-items:flex-start;}
|
||
.warn i{color:#854F0B;font-size:15px;flex-shrink:0;margin-top:1px;}
|
||
.warn p{font-size:12.5px;color:#633806;line-height:1.6;}
|
||
.warn strong{color:#412402;font-weight:500;}
|
||
|
||
.slabel{font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#534AB7;margin-bottom:.75rem;display:flex;align-items:center;gap:8px;}
|
||
.slabel::after{content:'';flex:1;height:1px;background:#AFA9EC;opacity:.4;}
|
||
|
||
.qblock{margin-bottom:1.5rem;}
|
||
.qh{display:flex;align-items:flex-start;gap:12px;margin-bottom:.6rem;}
|
||
.qnum{width:24px;height:24px;border-radius:50%;background:#EEEDFE;border:0.5px solid #AFA9EC;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#3C3489;flex-shrink:0;margin-top:1px;}
|
||
.qt{font-size:14px;color:var(--color-text-primary);line-height:1.55;flex:1;}
|
||
.qhint{font-size:11.5px;color:var(--color-text-secondary);font-style:italic;line-height:1.5;margin-left:36px;margin-bottom:8px;}
|
||
.ta{width:100%;border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);background:var(--color-background-secondary);font-family:var(--font-sans);font-size:13px;color:var(--color-text-primary);padding:8px 10px;resize:none;outline:none;line-height:1.6;}
|
||
.ta:focus{box-shadow:0 0 0 2px #AFA9EC;background:var(--color-background-primary);}
|
||
.ta::placeholder{color:var(--color-text-tertiary);font-style:italic;}
|
||
|
||
.uf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-left:36px;margin-bottom:8px;}
|
||
.ufc{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:10px 12px;}
|
||
.ufc-lbl{font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#534AB7;margin-bottom:2px;}
|
||
.ufc-name{font-size:11.5px;color:var(--color-text-secondary);margin-bottom:6px;}
|
||
|
||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-left:36px;margin-bottom:8px;}
|
||
.tc-wrap{display:flex;flex-direction:column;gap:4px;}
|
||
.tc-lbl{font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-tertiary);}
|
||
|
||
.micro-block{border:0.5px solid #AFA9EC;border-radius:var(--border-radius-lg);overflow:hidden;margin-bottom:1.5rem;}
|
||
.micro-head{background:#EEEDFE;border-bottom:0.5px solid #AFA9EC;padding:10px 16px;display:flex;align-items:center;gap:8px;}
|
||
.micro-head-lbl{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#3C3489;}
|
||
.micro-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px;}
|
||
.mb-row{display:grid;grid-template-columns:160px 1fr;gap:12px;align-items:flex-start;}
|
||
.mb-key{font-size:12px;font-weight:500;color:var(--color-text-secondary);padding-top:9px;}
|
||
.rocco-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:4px;}
|
||
.rg-item{display:flex;flex-direction:column;gap:3px;}
|
||
.rg-lbl{font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-tertiary);}
|
||
|
||
.level-row{display:flex;gap:10px;margin-left:36px;margin-bottom:8px;flex-wrap:wrap;}
|
||
.lopt{display:flex;align-items:center;gap:6px;cursor:pointer;}
|
||
.lopt input{accent-color:#534AB7;width:14px;height:14px;}
|
||
.lopt span{font-size:12.5px;color:var(--color-text-primary);}
|
||
|
||
.sep{border:none;border-top:0.5px solid var(--color-border-tertiary);margin:1.25rem 0;}
|
||
|
||
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:.5rem;}
|
||
.foot-note{font-size:11px;font-style:italic;color:var(--color-text-secondary);flex:1;line-height:1.5;}
|
||
.foot-btns{display:flex;gap:8px;}
|
||
.fbtn{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--border-radius-md);padding:6px 13px;cursor:pointer;display:flex;align-items:center;gap:5px;}
|
||
.fb-p{background:#EEEDFE;border:0.5px solid #AFA9EC;color:#3C3489;}
|
||
.fb-p:hover{background:#E0DEFB;}
|
||
.fb-r{background:var(--color-background-secondary);border:0.5px solid var(--color-border-secondary);color:var(--color-text-secondary);}
|
||
.fb-r:hover{background:var(--color-background-tertiary);}
|
||
</style>
|
||
|
||
<div class="w">
|
||
<h2 style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Fiche de classe inversée à compléter avant le Mercredi 2, lecture UF1 et UF2 en détail, préparation du micro-teaching de 10 minutes</h2>
|
||
|
||
<div class="dh">
|
||
<div>
|
||
<div class="dk">Formation de formateurs IA-PRO · Classe inversée · Séance 2/5</div>
|
||
<div class="dt">Fiche de préparation<br>Mercredi 2 — Maîtriser UF1 & UF2</div>
|
||
</div>
|
||
<div class="badge">
|
||
<div class="bt">Durée estimée</div>
|
||
<div class="bv">~1h30</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="id-row">
|
||
<div class="idf"><span class="ifl">Prénom & nom</span><input class="ifi" type="text" placeholder="Votre nom" aria-label="Prénom et nom"/></div>
|
||
<div class="idf"><span class="ifl">Date de la séance</span><input class="ifi" type="text" placeholder="Mercredi __/__/____" aria-label="Date"/></div>
|
||
<div class="idf"><span class="ifl">Complétée le</span><input class="ifi" type="text" placeholder="__/__/____" aria-label="Date de complétion"/></div>
|
||
</div>
|
||
|
||
<div class="intro">
|
||
<i class="ti ti-book" aria-hidden="true"></i>
|
||
<p>Avant la séance, lisez en détail les séquences de <strong>l'UF1 (chapitres 1, 2 et 3)</strong> et de <strong>l'UF2 (chapitres 1 et 2)</strong> dans le scénario IA-PRO. Complétez ensuite cette fiche. Elle servira de point de départ au débrief collectif — et votre micro-teaching prend appui dessus.</p>
|
||
</div>
|
||
|
||
<div class="warn">
|
||
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
||
<p><strong>Cette séance, la fiche compte double :</strong> elle prépare le débrief collectif ET conditionne votre micro-teaching. Sans lecture approfondie, votre animation de 10 min risque de rester en surface. Prévoyez l'heure et demie conseillée.</p>
|
||
</div>
|
||
|
||
<div class="slabel"><i class="ti ti-layout-grid" style="font-size:13px;color:#534AB7;" aria-hidden="true"></i>Partie 1 — Lecture UF1 & UF2</div>
|
||
|
||
<div class="qblock">
|
||
<div class="qh"><div class="qnum">1</div><div class="qt">Après votre lecture détaillée, quelle est la séquence de l'UF1 ou de l'UF2 qui vous a semblé la plus difficile à enseigner ? Pourquoi ?</div></div>
|
||
<div class="qhint">Pas la plus difficile à comprendre — la plus difficile à transmettre à des apprenants.</div>
|
||
<textarea class="ta" rows="3" placeholder="Ex. : La démo outils (Ch.2 UF1) — parce que les interfaces changent vite et que je crains de perdre de la crédibilité si quelque chose ne fonctionne pas comme prévu…" aria-label="Séquence difficile à enseigner"></textarea>
|
||
</div>
|
||
|
||
<div class="qblock">
|
||
<div class="qh"><div class="qnum">2</div><div class="qt">Pour chacune des UF, identifiez la séquence qui vous semble être le vrai cœur pédagogique — celle sans laquelle le reste perd de son sens.</div></div>
|
||
<div class="uf-grid">
|
||
<div class="ufc">
|
||
<div class="ufc-lbl">UF1</div>
|
||
<div class="ufc-name">Présentation & utilisation de l'IA générative</div>
|
||
<textarea class="ta" rows="2" placeholder="Séquence cœur + pourquoi…" aria-label="Cœur UF1"></textarea>
|
||
</div>
|
||
<div class="ufc">
|
||
<div class="ufc-lbl">UF2</div>
|
||
<div class="ufc-name">Rédaction & prompt engineering</div>
|
||
<textarea class="ta" rows="2" placeholder="Séquence cœur + pourquoi…" aria-label="Cœur UF2"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="qblock">
|
||
<div class="qh"><div class="qnum">3</div><div class="qt">Le scénario UF2 utilise la structure ROCCO pour le prompt engineering. Reformulez chaque lettre avec vos propres mots — comme si vous deviez l'expliquer à un apprenant débutant.</div></div>
|
||
<div class="rocco-grid" style="margin-left:36px;margin-bottom:8px;">
|
||
<div class="rg-item"><div class="rg-lbl">R — Rôle</div><textarea class="ta" rows="2" placeholder="En vos mots…" aria-label="R Rôle"></textarea></div>
|
||
<div class="rg-item"><div class="rg-lbl">O — Objectif</div><textarea class="ta" rows="2" placeholder="En vos mots…" aria-label="O Objectif"></textarea></div>
|
||
<div class="rg-item"><div class="rg-lbl">C — Contexte</div><textarea class="ta" rows="2" placeholder="En vos mots…" aria-label="C Contexte"></textarea></div>
|
||
<div class="rg-item"><div class="rg-lbl">C — Contraintes</div><textarea class="ta" rows="2" placeholder="En vos mots…" aria-label="C Contraintes"></textarea></div>
|
||
<div class="rg-item"><div class="rg-lbl">O — Output</div><textarea class="ta" rows="2" placeholder="En vos mots…" aria-label="O Output"></textarea></div>
|
||
<div class="rg-item"><div class="rg-lbl">Exemple métier</div><textarea class="ta" rows="2" placeholder="Un prompt ROCCO sur votre métier…" aria-label="Exemple métier ROCCO"></textarea></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="qblock">
|
||
<div class="qh"><div class="qnum">4</div><div class="qt">Notez 1 question précise qu'un apprenant pourrait vous poser en séance sur l'UF1 ou l'UF2, et à laquelle vous ne savez pas encore bien répondre.</div></div>
|
||
<div class="qhint">C'est cette question qui ouvrira le débrief. Plus elle est concrète, plus elle sera utile au groupe.</div>
|
||
<div class="two-col">
|
||
<div class="tc-wrap">
|
||
<span class="tc-lbl">La question de l'apprenant</span>
|
||
<textarea class="ta" rows="3" placeholder="Ex. : Est-ce que mon entreprise risque quelque chose si j'utilise ChatGPT avec des données clients ?" aria-label="Question apprenant"></textarea>
|
||
</div>
|
||
<div class="tc-wrap">
|
||
<span class="tc-lbl">Mon ébauche de réponse</span>
|
||
<textarea class="ta" rows="3" placeholder="Ce que je dirais aujourd'hui — même si incomplet ou incertain…" aria-label="Ébauche de réponse"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sep"></div>
|
||
|
||
<div class="slabel"><i class="ti ti-player-play" style="font-size:13px;color:#534AB7;" aria-hidden="true"></i>Partie 2 — Préparation du micro-teaching (10 min)</div>
|
||
|
||
<div class="micro-block">
|
||
<div class="micro-head">
|
||
<i class="ti ti-clipboard-text" style="font-size:15px;color:#534AB7;" aria-hidden="true"></i>
|
||
<span class="micro-head-lbl">Votre séquence choisie pour le micro-teaching</span>
|
||
</div>
|
||
<div class="micro-body">
|
||
<div class="mb-row">
|
||
<span class="mb-key">Séquence choisie</span>
|
||
<textarea class="ta" rows="2" placeholder="Ex. : UF2 – Ch.1 – Rédiger des prompts efficaces (Démo, co-construction, 1h00)" aria-label="Séquence choisie"></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Intention pédagogique</span>
|
||
<textarea class="ta" rows="2" placeholder="Ce que l'apprenant doit comprendre ou savoir faire à l'issue de vos 10 min — 1 phrase max." aria-label="Intention pédagogique"></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Méthode retenue</span>
|
||
<textarea class="ta" rows="2" placeholder="Ex. : Démo live commentée → reformulation → 2 min de pratique apprenant. Pas de slides." aria-label="Méthode retenue"></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Exemple concret préparé</span>
|
||
<textarea class="ta" rows="3" placeholder="L'exemple ou le cas que vous utiliserez — précis, ancré dans un contexte professionnel réel. Ex. : prompt pour rédiger un mail de relance commercial pour une PME agroalimentaire." aria-label="Exemple concret"></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Ce que j'anticipe comme difficulté</span>
|
||
<textarea class="ta" rows="2" placeholder="Ex. : Je risque de manquer de temps sur la partie pratique. Je vais chronométrer ma démo à 4 min max." aria-label="Difficulté anticipée"></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Posture visée</span>
|
||
<textarea class="ta" rows="2" placeholder="Ex. : Praticien qui montre son raisonnement à voix haute — pas expert qui récite des règles." aria-label="Posture visée"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slabel"><i class="ti ti-mood-check" style="font-size:13px;color:#534AB7;" aria-hidden="true"></i>Partie 3 — Positionnement avant la séance</div>
|
||
|
||
<div class="qblock">
|
||
<div class="qh"><div class="qnum">5</div><div class="qt">Comment vous sentez-vous par rapport à l'animation de l'UF1 et de l'UF2 — les contenus que vous avez lus ?</div></div>
|
||
<div class="level-row" role="radiogroup" aria-label="Niveau de confiance UF1 UF2">
|
||
<label class="lopt"><input type="radio" name="conf" value="1"><span>Peu confiant(e)</span></label>
|
||
<label class="lopt"><input type="radio" name="conf" value="2"><span>Hésitant(e)</span></label>
|
||
<label class="lopt"><input type="radio" name="conf" value="3"><span>Assez à l'aise</span></label>
|
||
<label class="lopt"><input type="radio" name="conf" value="4"><span>Confiant(e)</span></label>
|
||
<label class="lopt"><input type="radio" name="conf" value="5"><span>Très confiant(e)</span></label>
|
||
</div>
|
||
<textarea class="ta" rows="2" style="margin-top:8px;" placeholder="Ce qui explique cette position — en particulier sur UF2 / prompt engineering…" aria-label="Commentaire niveau de confiance"></textarea>
|
||
</div>
|
||
|
||
<div class="qblock">
|
||
<div class="qh"><div class="qnum">6</div><div class="qt">Qu'attendez-vous du micro-teaching ? Quel serait, pour vous, un vrai succès à l'issue de votre passage ?</div></div>
|
||
<textarea class="ta" rows="3" placeholder="Ex. : Que mon exemple ROCCO soit parlant pour tout le monde, pas juste pour moi. Et repartir avec 1 retour concret sur ma posture." aria-label="Attentes micro-teaching"></textarea>
|
||
</div>
|
||
|
||
<div class="foot-row" style="margin-top:1.25rem;">
|
||
<div class="foot-note">À apporter en séance ou partager via le drive avant le Mercredi 2. La partie 2 (micro-teaching) est votre billet d'entrée — sans elle, impossible de passer.</div>
|
||
<div class="foot-btns">
|
||
<button class="fbtn fb-r" onclick="clearAll()"><i class="ti ti-eraser" aria-hidden="true"></i> Effacer</button>
|
||
<button class="fbtn fb-p" onclick="window.print()"><i class="ti ti-printer" aria-hidden="true"></i> Imprimer</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script>
|
||
function clearAll(){
|
||
if(!confirm('Effacer toutes les saisies ?'))return;
|
||
document.querySelectorAll('textarea').forEach(t=>t.value='');
|
||
document.querySelectorAll('.ifi').forEach(i=>i.value='');
|
||
document.querySelectorAll('input[type=radio]').forEach(r=>r.checked=false);
|
||
}
|
||
</script>
|