sebvtl728
645 lines
18 KiB
HTML
645 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Triptyque Breakout - Mercredi</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=nunito:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.wrap {
|
||
font-family: 'nunito', sans-serif;
|
||
color: var(--color-text-primary);
|
||
max-width: 760px;
|
||
margin: 0 auto;
|
||
padding: 0 0 2.5rem;
|
||
}
|
||
|
||
.doc-header {
|
||
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;
|
||
}
|
||
|
||
.doc-kicker {
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
letter-spacing: .18em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.doc-title {
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.timer-pill {
|
||
background: #eeeffe;
|
||
border: 0.5px solid #afa9ec;
|
||
border-radius: 20px;
|
||
padding: 8px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.timer-display {
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
color: #272077;
|
||
min-width: 52px;
|
||
text-align: center;
|
||
}
|
||
|
||
.timer-label {
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
letter-spacing: .1em;
|
||
text-transform: uppercase;
|
||
color: #534ab7;
|
||
}
|
||
|
||
.timer-controls {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.tcbtn {
|
||
background: transparent;
|
||
border: 0.5px solid #afa9ec;
|
||
border-radius: 6px;
|
||
padding: 3px 8px;
|
||
cursor: pointer;
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
color: #534ab7;
|
||
}
|
||
|
||
.tcbtn:hover {
|
||
background: #e0defb;
|
||
}
|
||
|
||
.consigne-bar {
|
||
background: var(--color-background-secondary);
|
||
border: 0.5px solid var(--color-border-tertiary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: .75rem 1rem;
|
||
margin-bottom: 1.5rem;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
}
|
||
|
||
.consigne-bar i {
|
||
color: #534ab7;
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.consigne-bar p {
|
||
font-size: 12.5px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.consigne-bar strong {
|
||
color: var(--color-text-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.col-headers {
|
||
display: grid;
|
||
grid-template-columns: 180px 1fr 1fr 1fr;
|
||
gap: 8px;
|
||
margin-bottom: 6px;
|
||
padding: 0 0 0 0;
|
||
}
|
||
|
||
.ch-empty {}
|
||
|
||
.col-head {
|
||
border-radius: var(--border-radius-md);
|
||
padding: 10px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.ch-purple {
|
||
background: #eeeffe;
|
||
border: 0.5px solid #afa9ec;
|
||
}
|
||
|
||
.ch-teal {
|
||
background: #e1f5ee;
|
||
border: 0.5px solid #5dcaa5;
|
||
}
|
||
|
||
.ch-amber {
|
||
background: #faeeda;
|
||
border: 0.5px solid #ef9f27;
|
||
}
|
||
|
||
.ch-icon {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.ch-icon-p {
|
||
color: #534ab7;
|
||
}
|
||
|
||
.ch-icon-t {
|
||
color: #0f6e56;
|
||
}
|
||
|
||
.ch-icon-a {
|
||
color: #854f0b;
|
||
}
|
||
|
||
.ch-texts {}
|
||
|
||
.ch-num {
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
letter-spacing: .12em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.ch-num-p {
|
||
color: #534ab7;
|
||
}
|
||
|
||
.ch-num-t {
|
||
color: #0f6e56;
|
||
}
|
||
|
||
.ch-num-a {
|
||
color: #854f0b;
|
||
}
|
||
|
||
.ch-name {
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.ch-name-p {
|
||
color: #272077;
|
||
}
|
||
|
||
.ch-name-t {
|
||
color: #085041;
|
||
}
|
||
|
||
.ch-name-a {
|
||
color: #633806;
|
||
}
|
||
|
||
.ch-q {
|
||
font-size: 11px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.ch-q-p {
|
||
color: #534ab7;
|
||
}
|
||
|
||
.ch-q-t {
|
||
color: #0f6e56;
|
||
}
|
||
|
||
.ch-q-a {
|
||
color: #854f0b;
|
||
}
|
||
|
||
.seq-row {
|
||
display: grid;
|
||
grid-template-columns: 180px 1fr 1fr 1fr;
|
||
gap: 8px;
|
||
margin-bottom: 8px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.seq-label-cell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
padding: 12px 10px;
|
||
}
|
||
|
||
.seq-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
background: var(--color-background-secondary);
|
||
border: 0.5px solid var(--color-border-secondary);
|
||
border-radius: 6px;
|
||
padding: 3px 8px;
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
letter-spacing: .1em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 6px;
|
||
width: fit-content;
|
||
}
|
||
|
||
.seq-title-main {
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.35;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.seq-uf-tag {
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.cell {
|
||
background: var(--color-background-primary);
|
||
border: 0.5px solid var(--color-border-tertiary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 10px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.cell-eg {
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
line-height: 1.5;
|
||
padding-bottom: 6px;
|
||
border-bottom: 0.5px solid var(--color-border-tertiary);
|
||
}
|
||
|
||
.cell textarea {
|
||
border: none;
|
||
border-radius: var(--border-radius-md);
|
||
background: var(--color-background-secondary);
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 12.5px;
|
||
color: var(--color-text-primary);
|
||
padding: 8px 10px;
|
||
resize: none;
|
||
outline: none;
|
||
width: 100%;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.cell textarea:focus {
|
||
box-shadow: 0 0 0 2px #afa9ec;
|
||
background: var(--color-background-primary);
|
||
}
|
||
|
||
.cell textarea::placeholder {
|
||
color: var(--color-text-tertiary);
|
||
font-style: italic;
|
||
}
|
||
|
||
.sep {
|
||
border: none;
|
||
border-top: 0.5px solid var(--color-border-tertiary);
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.footer-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
padding-top: .5rem;
|
||
}
|
||
|
||
.foot-note {
|
||
font-size: 11.5px;
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
line-height: 1.5;
|
||
flex: 1;
|
||
}
|
||
|
||
.foot-btns {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.fbtn {
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
border-radius: 6px;
|
||
padding: 6px 13px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.fbtn-print {
|
||
background: #eeeffe;
|
||
border: 0.5px solid #afa9ec;
|
||
color: #272077;
|
||
}
|
||
|
||
.fbtn-print:hover {
|
||
background: #e0defb;
|
||
}
|
||
|
||
.fbtn-reset {
|
||
background: var(--color-background-secondary);
|
||
border: 0.5px solid var(--color-border-secondary);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.fbtn-reset:hover {
|
||
background: var(--color-background-tertiary);
|
||
}
|
||
|
||
.debrief-box {
|
||
margin-top: 1.25rem;
|
||
border: 0.5px solid var(--color-border-tertiary);
|
||
border-radius: var(--border-radius-lg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.debrief-head {
|
||
background: var(--color-background-secondary);
|
||
padding: .7rem 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-bottom: 0.5px solid var(--color-border-tertiary);
|
||
}
|
||
|
||
.debrief-head-label {
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: .12em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.debrief-body {
|
||
padding: .875rem 1rem;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.db-col {}
|
||
|
||
.db-col-label {
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
letter-spacing: .12em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.db-col textarea {
|
||
width: 100%;
|
||
border: 0.5px solid var(--color-border-tertiary);
|
||
border-radius: var(--border-radius-md);
|
||
background: var(--color-background-secondary);
|
||
font-family: 'nunito', sans-serif;
|
||
font-size: 12.5px;
|
||
color: var(--color-text-primary);
|
||
padding: 8px 10px;
|
||
resize: none;
|
||
outline: none;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.db-col textarea:focus {
|
||
box-shadow: 0 0 0 2px #afa9ec;
|
||
background: var(--color-background-primary);
|
||
}
|
||
|
||
.db-col textarea::placeholder {
|
||
color: var(--color-text-tertiary);
|
||
font-style: italic;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="wrap">
|
||
<h2 class="sr-only" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Grille
|
||
triptyque Contenu–Méthode–Posture pour l'atelier breakout rooms du Mercredi 1, avec 3 séquences UF1 et UF2 à
|
||
analyser en sous-groupes</h2>
|
||
|
||
<div class="doc-header">
|
||
<div>
|
||
<div class="doc-kicker">Mercredi 1 · Atelier breakout rooms · Séquence 4 — 14h50</div>
|
||
<div class="doc-title">Grille triptyque — Contenu / Méthode / Posture</div>
|
||
</div>
|
||
<div class="timer-pill">
|
||
<div>
|
||
<div class="timer-label">Minuteur groupe</div>
|
||
<div class="timer-display" id="timer-display">10:00</div>
|
||
</div>
|
||
<div class="timer-controls">
|
||
<button class="tcbtn" onclick="startTimer()" aria-label="Démarrer le minuteur">
|
||
<i class="ti ti-player-play" aria-hidden="true"></i>
|
||
</button>
|
||
<button class="tcbtn" onclick="pauseTimer()" aria-label="Pause">
|
||
<i class="ti ti-player-pause" aria-hidden="true"></i>
|
||
</button>
|
||
<button class="tcbtn" onclick="resetTimer()" aria-label="Réinitialiser">
|
||
<i class="ti ti-refresh" aria-hidden="true"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="consigne-bar">
|
||
<i class="ti ti-clipboard-text" aria-hidden="true"></i>
|
||
<p><strong>Consigne (10 min par groupe) :</strong> Pour la séquence qui vous est assignée, identifiez les 3
|
||
dimensions du triptyque. Notez vos réponses dans la grille. Lors de la restitution en plénière, chaque groupe
|
||
présentera ses 3 dimensions en 5 min.</p>
|
||
</div>
|
||
|
||
<div class="col-headers">
|
||
<div class="ch-empty"></div>
|
||
<div class="col-head ch-purple">
|
||
<i class="ti ti-file-text ch-icon ch-icon-p" aria-hidden="true"></i>
|
||
<div class="ch-texts">
|
||
<div class="ch-num ch-num-p">Dimension 1</div>
|
||
<div class="ch-name ch-name-p">Contenu</div>
|
||
<div class="ch-q ch-q-p">Quoi transmettre ?</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-head ch-teal">
|
||
<i class="ti ti-tools ch-icon ch-icon-t" aria-hidden="true"></i>
|
||
<div class="ch-texts">
|
||
<div class="ch-num ch-num-t">Dimension 2</div>
|
||
<div class="ch-name ch-name-t">Méthode</div>
|
||
<div class="ch-q ch-q-t">Comment l'animer ?</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-head ch-amber">
|
||
<i class="ti ti-user-check ch-icon ch-icon-a" aria-hidden="true"></i>
|
||
<div class="ch-texts">
|
||
<div class="ch-num ch-num-a">Dimension 3</div>
|
||
<div class="ch-name ch-name-a">Posture</div>
|
||
<div class="ch-q ch-q-a">Quelle présence adopter ?</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="seq-row">
|
||
<div class="seq-label-cell">
|
||
<div class="seq-badge"><i class="ti ti-users" style="font-size:12px;" aria-hidden="true"></i>Groupe A</div>
|
||
<div class="seq-title-main">Définition, historique & types d'IA</div>
|
||
<div class="seq-uf-tag">UF1 · Ch.1 · Séq. 1.1 · 0h45</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : panorama IA, distinctions IA faible/forte, mise en contexte professionnel…</div>
|
||
<textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…"
|
||
aria-label="Contenu séquence 1.1"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : présentation + échanges, classe inversée possible…</div>
|
||
<textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…"
|
||
aria-label="Méthode séquence 1.1"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : expert qui contextualise, facilitateur qui interroge…</div>
|
||
<textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…"
|
||
aria-label="Posture séquence 1.1"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="seq-row">
|
||
<div class="seq-label-cell">
|
||
<div class="seq-badge"><i class="ti ti-users" style="font-size:12px;" aria-hidden="true"></i>Groupe B</div>
|
||
<div class="seq-title-main">Les optimisations & opportunités envisageables</div>
|
||
<div class="seq-uf-tag">UF1 · Ch.2 · Séq. 1.5 · 1h30</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : tâches délégables à l'IA, bonnes/mauvaises pratiques, point légal…</div>
|
||
<textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…"
|
||
aria-label="Contenu séquence 1.5"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : travaux de réflexion collective, études de cas…</div>
|
||
<textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…"
|
||
aria-label="Méthode séquence 1.5"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : facilitateur de débat, neutre sur les cas légaux…</div>
|
||
<textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…"
|
||
aria-label="Posture séquence 1.5"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="seq-row">
|
||
<div class="seq-label-cell">
|
||
<div class="seq-badge"><i class="ti ti-users" style="font-size:12px;" aria-hidden="true"></i>Groupe C</div>
|
||
<div class="seq-title-main">Rédiger des prompts efficaces</div>
|
||
<div class="seq-uf-tag">UF2 · Ch.1 · Prompt Engineering · 1h00</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : structure ROCCO, bonnes pratiques, logique d'un prompt pertinent…</div>
|
||
<textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…"
|
||
aria-label="Contenu séquence UF2 prompt"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : démo live, co-construction, ne pas donner de recettes…</div>
|
||
<textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…"
|
||
aria-label="Méthode séquence UF2 prompt"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : praticien qui montre son raisonnement, pair en exploration…</div>
|
||
<textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…"
|
||
aria-label="Posture séquence UF2 prompt"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="sep">
|
||
|
||
<div class="debrief-box">
|
||
<div class="debrief-head">
|
||
<i class="ti ti-message-dots" style="font-size:15px;color:var(--color-text-secondary);" aria-hidden="true"></i>
|
||
<div class="debrief-head-label">Notes de restitution plénière — formateur référent</div>
|
||
</div>
|
||
<div class="debrief-body">
|
||
<div class="db-col">
|
||
<div class="db-col-label">Points forts identifiés</div>
|
||
<textarea rows="4" placeholder="Ce que les groupes ont bien vu…"
|
||
aria-label="Points forts plénière"></textarea>
|
||
</div>
|
||
<div class="db-col">
|
||
<div class="db-col-label">Zones de flou à clarifier</div>
|
||
<textarea rows="4" placeholder="Ce qui nécessite un recadrage ou un approfondissement…"
|
||
aria-label="Zones de flou plénière"></textarea>
|
||
</div>
|
||
<div class="db-col">
|
||
<div class="db-col-label">Point posture à insister</div>
|
||
<textarea rows="4" placeholder="La dimension souvent sous-estimée à mettre en lumière…"
|
||
aria-label="Point posture plénière"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-row" style="margin-top:1.25rem;">
|
||
<div class="foot-note">Durée totale activité : 10 min breakout + 15 min restitution (5 min / groupe). Le minuteur
|
||
compte le temps de travail en sous-groupe.</div>
|
||
<div class="foot-btns">
|
||
<button class="fbtn fbtn-reset" onclick="clearAll()"><i class="ti ti-eraser" aria-hidden="true"></i>Effacer
|
||
tout</button>
|
||
<button class="fbtn fbtn-print" onclick="window.print()"><i class="ti ti-printer"
|
||
aria-hidden="true"></i>Imprimer</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script>
|
||
let secs = 600, interval = null;
|
||
function fmt(s) { const m = Math.floor(s / 60), ss = s % 60; return String(m).padStart(2, '0') + ':' + String(ss).padStart(2, '0'); }
|
||
function render() { document.getElementById('timer-display').textContent = fmt(secs); }
|
||
function startTimer() { if (interval) return; interval = setInterval(() => { if (secs <= 0) { clearInterval(interval); interval = null; document.getElementById('timer-display').textContent = 'Temps !'; return; } secs--; render(); }, 1000); }
|
||
function pauseTimer() { clearInterval(interval); interval = null; }
|
||
function resetTimer() { clearInterval(interval); interval = null; secs = 600; render(); }
|
||
function clearAll() { if (!confirm('Effacer toutes les saisies ?')) return; document.querySelectorAll('textarea').forEach(t => t.value = ''); }
|
||
</script>
|
||
</body>
|
||
|
||
</html> |