1344 lines
70 KiB
HTML
1344 lines
70 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Exercices certification C1 à C6 - Mercredi 5</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');
|
|
|
|
:root {
|
|
--primary-hsl: 247, 80%, 62%;
|
|
--primary: hsl(var(--primary-hsl));
|
|
--primary-light: hsl(247, 85%, 96%);
|
|
--primary-dark: hsl(247, 80%, 35%);
|
|
--bg-primary: #f8fafc;
|
|
--bg-secondary: #ffffff;
|
|
--bg-tertiary: #f1f5f9;
|
|
--color-text-primary: #0f172a;
|
|
--color-text-secondary: #475569;
|
|
--color-text-tertiary: #94a3b8;
|
|
--color-border-secondary: #e2e8f0;
|
|
--color-border-tertiary: #e2e8f0;
|
|
--border-radius-md: 14px;
|
|
--border-radius-lg: 18px;
|
|
--shadow-sm: 0 1px 3px 0 rgba(0,0,0,.05), 0 1px 2px 0 rgba(0,0,0,.03);
|
|
--shadow-md: 0 4px 6px -1px rgba(0,0,0,.04), 0 2px 4px -2px rgba(0,0,0,.04);
|
|
--shadow-lg: 0 12px 20px -3px rgba(0,0,0,.05), 0 4px 8px -4px rgba(0,0,0,.05);
|
|
--color-a-bg: hsl(36,85%,96%);
|
|
--color-a-border: hsl(36,80%,88%);
|
|
--color-a-accent: hsl(36,90%,45%);
|
|
--color-a-dark: hsl(36,95%,22%);
|
|
--color-g-bg: hsl(162,85%,96%);
|
|
--color-g-border: hsl(162,80%,90%);
|
|
--color-g-accent: hsl(162,75%,34%);
|
|
--color-g-dark: hsl(162,80%,20%);
|
|
--color-danger-bg: hsl(0,85%,96%);
|
|
--color-danger-border: hsl(0,80%,88%);
|
|
--color-danger-accent: hsl(0,75%,45%);
|
|
--color-danger-dark: hsl(0,95%,22%);
|
|
--font-sans: 'DM Sans', sans-serif;
|
|
--font-heading: 'Nunito', sans-serif;
|
|
--font-mono: 'Courier New', monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-sans);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-image:
|
|
radial-gradient(at 0% 0%, hsla(247,80%,62%,.04) 0px, transparent 50%),
|
|
radial-gradient(at 100% 0%, hsla(162,75%,34%,.01) 0px, transparent 50%),
|
|
radial-gradient(at 50% 100%, hsla(36,90%,45%,.02) 0px, transparent 50%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.w {
|
|
max-width: 960px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 2.5rem 24px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* HEADER */
|
|
.dh {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
padding-bottom: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.dk {
|
|
font-size: .75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .2em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.dt {
|
|
font-size: 2rem;
|
|
font-weight: 900;
|
|
color: var(--color-text-primary);
|
|
line-height: 1.2;
|
|
letter-spacing: -.02em;
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
/* TIMER */
|
|
.tw {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--primary-light);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 10px 18px;
|
|
flex-shrink: 0;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.tl {
|
|
font-size: .65rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--primary-dark);
|
|
opacity: .8;
|
|
}
|
|
|
|
.tv {
|
|
font-size: 1.25rem;
|
|
font-weight: 900;
|
|
color: var(--primary-dark);
|
|
line-height: 1.1;
|
|
font-family: var(--font-heading);
|
|
min-width: 90px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tbs { display: flex; gap: 6px; }
|
|
|
|
.tbtn {
|
|
background: transparent;
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: 8px;
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.tbtn:hover { background: var(--bg-secondary); color: var(--primary); border-color: var(--primary); }
|
|
|
|
/* IDENTITY / SIGNATURE */
|
|
.identity-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.id-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 10px 14px;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all .25s ease;
|
|
}
|
|
|
|
.id-field:focus-within {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px hsla(247,80%,62%,.12), var(--shadow-md);
|
|
}
|
|
|
|
.field-label {
|
|
font-size: .65rem;
|
|
font-weight: 800;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
.field-line {
|
|
border: none;
|
|
background: transparent;
|
|
font-family: var(--font-sans);
|
|
font-size: .9rem;
|
|
color: var(--color-text-primary);
|
|
padding: 2px 0 0;
|
|
width: 100%;
|
|
outline: none;
|
|
}
|
|
|
|
.field-line::placeholder { color: var(--color-text-tertiary); opacity: .7; }
|
|
|
|
/* SCORE STRIP */
|
|
.score-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(7,1fr);
|
|
gap: 12px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.sc {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 12px;
|
|
text-align: center;
|
|
box-shadow: var(--shadow-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
transition: transform .2s ease, box-shadow .2s ease;
|
|
}
|
|
|
|
.sc:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
|
|
|
|
.sc-l {
|
|
font-size: .7rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: .05em;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.sc-v {
|
|
font-size: 1.3rem;
|
|
font-weight: 900;
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
/* NOTICE */
|
|
.notice {
|
|
background: var(--primary-light);
|
|
border-left: 4px solid var(--primary);
|
|
border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
|
|
padding: 14px 20px;
|
|
margin-bottom: 2rem;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.notice i { color: var(--primary); font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
|
|
.notice p { font-size: .9rem; color: var(--color-text-secondary); line-height: 1.6; }
|
|
.notice strong { font-weight: 800; color: var(--primary-dark); }
|
|
|
|
/* EXERCISE BLOCKS */
|
|
.ex {
|
|
margin-bottom: 2.5rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: box-shadow .25s ease;
|
|
}
|
|
|
|
.ex:hover { box-shadow: var(--shadow-md); }
|
|
|
|
.ex-h {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
}
|
|
|
|
.ex-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.3rem;
|
|
flex-shrink: 0;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.i-p { background: var(--primary-light); color: var(--primary); }
|
|
.i-t { background: var(--color-g-bg); color: var(--color-g-accent); }
|
|
.i-r { background: var(--color-danger-bg); color: var(--color-danger-accent); }
|
|
.i-b { background: hsl(213,85%,96%); color: hsl(213,80%,40%); }
|
|
.i-g { background: var(--color-g-bg); color: var(--color-g-accent); }
|
|
.i-a { background: var(--color-a-bg); color: var(--color-a-accent); }
|
|
|
|
.ex:has(.i-p) .ex-h { background: var(--primary-light); }
|
|
.ex:has(.i-t) .ex-h { background: var(--color-g-bg); }
|
|
.ex:has(.i-r) .ex-h { background: var(--color-danger-bg); }
|
|
.ex:has(.i-b) .ex-h { background: hsl(213,85%,96%); }
|
|
.ex:has(.i-g) .ex-h { background: var(--color-g-bg); }
|
|
.ex:has(.i-a) .ex-h { background: var(--color-a-bg); }
|
|
|
|
.ex:has(.i-p) .ex-title { color: var(--primary-dark); }
|
|
.ex:has(.i-t) .ex-title { color: var(--color-g-dark); }
|
|
.ex:has(.i-r) .ex-title { color: var(--color-danger-dark); }
|
|
.ex:has(.i-b) .ex-title { color: hsl(213,80%,25%); }
|
|
.ex:has(.i-g) .ex-title { color: var(--color-g-dark); }
|
|
.ex:has(.i-a) .ex-title { color: var(--color-a-dark); }
|
|
|
|
.ex-meta { flex: 1; display: flex; flex-direction: column; }
|
|
|
|
.ex-num {
|
|
font-size: .65rem;
|
|
font-weight: 800;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-tertiary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.ex-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 900;
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
.ex-pts {
|
|
font-family: var(--font-heading);
|
|
font-size: .75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
border-radius: 8px;
|
|
padding: 6px 12px;
|
|
white-space: nowrap;
|
|
background: var(--color-g-bg);
|
|
color: var(--color-g-accent);
|
|
border: 1px solid var(--color-g-border);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.ex-b { padding: 20px; }
|
|
|
|
/* CASE BOX */
|
|
.cas {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 14px 18px;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.cas-l {
|
|
font-size: .7rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.cas-t { font-size: .9rem; color: var(--color-text-primary); line-height: 1.65; }
|
|
.cas-t strong { font-weight: 800; color: var(--primary-dark); }
|
|
|
|
/* PROMPT BOX */
|
|
.prompt-box {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 14px;
|
|
margin-bottom: 1.5rem;
|
|
font-family: var(--font-mono);
|
|
font-size: .85rem;
|
|
color: var(--color-text-primary);
|
|
line-height: 1.7;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.pb-l {
|
|
font-size: .7rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 8px;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
font-size: .65rem;
|
|
font-weight: 800;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
margin-left: 6px;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.tag-ko { background: var(--color-danger-bg); color: var(--color-danger-accent); border: 1px solid var(--color-danger-border); }
|
|
.tag-ok { background: var(--color-g-bg); color: var(--color-g-accent); border: 1px solid var(--color-g-border); }
|
|
|
|
/* INSTRUCTION */
|
|
.consigne {
|
|
font-size: .85rem;
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.6;
|
|
margin-bottom: 1.5rem;
|
|
font-style: italic;
|
|
opacity: .9;
|
|
}
|
|
|
|
/* QUESTIONS */
|
|
.qrow { margin-bottom: 1.5rem; }
|
|
|
|
.ql {
|
|
font-size: .95rem;
|
|
font-weight: 800;
|
|
color: var(--color-text-primary);
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.qn {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--primary-light);
|
|
border: 1px solid hsl(247,85%,90%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: .75rem;
|
|
font-weight: 800;
|
|
color: var(--primary);
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
/* OPTIONS */
|
|
.opts { display: flex; flex-direction: column; gap: 8px; margin-left: 34px; }
|
|
|
|
.opt {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 10px 16px;
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
cursor: pointer;
|
|
background: var(--bg-secondary);
|
|
transition: all .2s cubic-bezier(.4,0,.2,1);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.opt:hover { border-color: var(--primary); background: var(--primary-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
|
|
.opt.sel { background: var(--primary-light); border-color: var(--primary); box-shadow: var(--shadow-md); }
|
|
.opt.ok { background: var(--color-g-bg) !important; border-color: var(--color-g-accent) !important; box-shadow: var(--shadow-md) !important; }
|
|
.opt.ko { background: var(--color-danger-bg) !important; border-color: var(--color-danger-border) !important; box-shadow: var(--shadow-md) !important; }
|
|
|
|
.or {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--color-text-tertiary);
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--bg-secondary);
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.opt.sel .or { border-color: var(--primary); background: var(--primary); }
|
|
.opt.ok .or { border-color: var(--color-g-accent) !important; background: var(--color-g-accent) !important; }
|
|
.opt.ko .or { border-color: var(--color-danger-accent) !important; background: var(--color-danger-accent) !important; }
|
|
|
|
.od { width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background .2s ease; }
|
|
.opt.sel .od { background: #fff; }
|
|
.opt.ok .od, .opt.ko .od { background: #fff !important; }
|
|
|
|
.ot { font-size: .9rem; color: var(--color-text-primary); line-height: 1.5; }
|
|
.opt.ok .ot { color: var(--color-g-dark); font-weight: 700; }
|
|
.opt.ko .ot { color: var(--color-danger-dark); }
|
|
|
|
/* TEXTAREA */
|
|
.ta {
|
|
width: 100%;
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
background: var(--bg-primary);
|
|
font-family: var(--font-sans);
|
|
font-size: .9rem;
|
|
color: var(--color-text-primary);
|
|
padding: 10px 14px;
|
|
resize: vertical;
|
|
outline: none;
|
|
line-height: 1.55;
|
|
transition: all .25s ease;
|
|
}
|
|
|
|
.ta:focus { border-color: var(--primary); background: var(--bg-secondary); box-shadow: 0 0 0 3px hsla(247,80%,62%,.12); }
|
|
.ta::placeholder { color: var(--color-text-tertiary); font-style: italic; opacity: .7; }
|
|
.ta-ml { margin-left: 34px; width: calc(100% - 34px); }
|
|
|
|
/* ACTIONS */
|
|
.ex-actions { display: flex; align-items: center; gap: 12px; margin-top: 1.5rem; }
|
|
|
|
.abtn {
|
|
font-family: var(--font-heading);
|
|
font-size: .75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
border-radius: 10px;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all .2s cubic-bezier(.4,0,.2,1);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.ab-c { background: var(--primary); border: 1px solid var(--primary); color: white; }
|
|
.ab-c:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(117,95,236,.25); }
|
|
.ab-r { background: var(--bg-secondary); border: 1px solid var(--color-border-secondary); color: var(--color-text-secondary); }
|
|
.ab-r:hover { background: var(--bg-tertiary); color: var(--color-text-primary); transform: translateY(-2px); }
|
|
|
|
/* RESULT BADGE */
|
|
.rbadge {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-family: var(--font-heading);
|
|
font-size: .8rem;
|
|
font-weight: 800;
|
|
padding: 8px 16px;
|
|
border-radius: var(--border-radius-md);
|
|
margin-left: auto;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.rb-ok { background: var(--color-g-bg); border: 1px solid var(--color-g-border); color: var(--color-g-dark); display: flex; }
|
|
.rb-ko { background: var(--color-danger-bg); border: 1px solid var(--color-danger-border); color: var(--color-danger-dark); display: flex; }
|
|
|
|
/* CORRIGÉ */
|
|
.cbtn {
|
|
font-family: var(--font-heading);
|
|
font-size: .75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: 10px;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
margin-top: 1.5rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all .2s cubic-bezier(.4,0,.2,1);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.cbtn:hover { background: var(--bg-tertiary); color: var(--color-text-primary); transform: translateY(-2px); }
|
|
.cbtn.rev { background: var(--color-g-bg); border-color: var(--color-g-accent); color: var(--color-g-dark); }
|
|
|
|
.cpanel {
|
|
display: none;
|
|
margin-top: 1rem;
|
|
background: var(--color-g-bg);
|
|
border: 1px solid var(--color-g-border);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 16px 20px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.cpanel.vis { display: block; animation: slideDown .3s ease-out; }
|
|
|
|
@keyframes slideDown {
|
|
from { opacity: 0; transform: translateY(-8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.cp-t {
|
|
font-size: .75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-g-dark);
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.cp-i {
|
|
font-size: .85rem;
|
|
color: var(--color-g-dark);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
line-height: 1.6;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.cp-i:last-child { margin-bottom: 0; }
|
|
|
|
.cp-i::before { content: '✓'; color: var(--color-g-accent); font-weight: 800; flex-shrink: 0; }
|
|
|
|
.cp-i.warn {
|
|
background: hsl(36,85%,93%);
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
color: var(--color-a-dark);
|
|
}
|
|
|
|
.cp-i.warn::before { content: '!'; color: var(--color-a-accent); }
|
|
|
|
/* SEPARATOR */
|
|
.sep { border: none; border-top: 1px solid var(--color-border-secondary); margin: 2rem 0; }
|
|
|
|
/* PRINT ROW */
|
|
.print-row { display: flex; justify-content: flex-end; margin-top: 2rem; }
|
|
|
|
.pbtn {
|
|
font-family: var(--font-heading);
|
|
font-size: .75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
background: var(--primary);
|
|
border: 1px solid var(--primary);
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 10px 18px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all .2s cubic-bezier(.4,0,.2,1);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.pbtn:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(117,95,236,.25); }
|
|
|
|
/* RESPONSIVE */
|
|
@media (max-width: 860px) {
|
|
.w { padding: 1.5rem 16px; }
|
|
.dh { flex-direction: column; align-items: stretch; gap: 1rem; }
|
|
.dt { font-size: 1.6rem; }
|
|
.identity-row { grid-template-columns: 1fr; gap: 12px; }
|
|
.score-row { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
|
|
.opts { margin-left: 0; }
|
|
.ta-ml { margin-left: 0; width: 100%; }
|
|
.ex-actions { flex-wrap: wrap; }
|
|
.rbadge { margin-left: 0; width: 100%; justify-content: center; }
|
|
}
|
|
|
|
/* SIGNATURE */
|
|
.signature-block {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: 24px;
|
|
box-shadow: var(--shadow-sm);
|
|
margin-bottom: 2rem;
|
|
transition: box-shadow .2s ease;
|
|
}
|
|
|
|
.signature-block:hover { box-shadow: var(--shadow-md); }
|
|
|
|
.signature-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
.signature-col { display: flex; flex-direction: column; gap: 12px; }
|
|
.date-col { justify-content: space-between; }
|
|
|
|
.signature-label {
|
|
font-size: .75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.signature-pad-wrapper {
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
background: var(--bg-primary);
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
transition: all .25s ease;
|
|
}
|
|
|
|
.signature-pad-wrapper:focus-within {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px hsla(247,80%,62%,.12);
|
|
}
|
|
|
|
.signature-pad {
|
|
width: 100%;
|
|
height: 160px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
border: 1px dashed var(--color-border-secondary);
|
|
cursor: crosshair;
|
|
touch-action: none;
|
|
display: block;
|
|
}
|
|
|
|
.signature-pad-controls { display: flex; gap: 10px; justify-content: flex-end; }
|
|
|
|
.signature-btn {
|
|
font-family: var(--font-heading);
|
|
font-size: .75rem;
|
|
font-weight: 700;
|
|
letter-spacing: .03em;
|
|
text-transform: uppercase;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
color: var(--color-text-secondary);
|
|
border-radius: 8px;
|
|
padding: 8px 14px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: all .2s cubic-bezier(.4,0,.2,1);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.signature-btn:hover { background: var(--bg-tertiary); color: var(--color-text-primary); transform: translateY(-1px); }
|
|
.signature-btn.clear:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
|
|
.signature-btn.save { background: var(--primary); border-color: var(--primary); color: white; }
|
|
.signature-btn.save:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 4px 8px rgba(117,95,236,.25); }
|
|
|
|
.signature-info-box {
|
|
background: var(--primary-light);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 16px;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.signature-info-box i { color: var(--primary); font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }
|
|
.signature-info-box p { font-size: .8rem; color: var(--color-text-secondary); line-height: 1.5; }
|
|
|
|
/* FOOTER STRIP */
|
|
.footer-strip {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 1px solid var(--color-border-secondary);
|
|
padding-top: 1.5rem;
|
|
margin-top: 1rem;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-note {
|
|
font-size: .85rem;
|
|
color: var(--color-text-secondary);
|
|
font-style: italic;
|
|
line-height: 1.5;
|
|
flex: 1;
|
|
max-width: 60%;
|
|
}
|
|
|
|
.footer-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
|
|
|
/* PRINT */
|
|
@media (max-width: 860px) {
|
|
.signature-grid { grid-template-columns: 1fr; gap: 16px; }
|
|
.footer-strip { flex-direction: column; align-items: flex-start; }
|
|
.footer-note { max-width: 100%; }
|
|
.footer-btns { flex-direction: column; width: 100%; }
|
|
}
|
|
|
|
@media print {
|
|
body { background: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
.tbtn, .abtn, .cbtn, .signature-pad-controls, .footer-btns { display: none !important; }
|
|
.ex, .cpanel { page-break-inside: avoid; border: 1px solid #94a3b8 !important; background: white !important; box-shadow: none !important; }
|
|
.opt { border: 1px solid #94a3b8 !important; background: white !important; box-shadow: none !important; }
|
|
.signature-block { page-break-inside: avoid; border: 1px solid #94a3b8 !important; background: white !important; box-shadow: none !important; }
|
|
.signature-pad { border: 1px solid #94a3b8 !important; background: white !important; }
|
|
.signature-info-box { border: 1px solid #94a3b8 !important; background: white !important; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="w">
|
|
<h2 style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Exercices d'entraînement certification Mercredi 5 - 6 exercices couvrant C1 à C6, cas métiers réels, QCM interactifs, rédaction de prompts et analyses, corrigés détaillés avec pièges jury</h2>
|
|
|
|
<div class="dh">
|
|
<div>
|
|
<div class="dk">Mercredi 5 · Entraînement certification · C1 à C6</div>
|
|
<div class="dt">Exercices certification<br>conditions proches de l'épreuve</div>
|
|
</div>
|
|
<div class="tw">
|
|
<div class="tl">Minuteur séance</div>
|
|
<div class="tv" id="tv">2:00:00</div>
|
|
<div class="tbs">
|
|
<button class="tbtn" onclick="startT()" aria-label="Démarrer"><i class="ti ti-player-play" aria-hidden="true"></i></button>
|
|
<button class="tbtn" onclick="pauseT()" aria-label="Pause"><i class="ti ti-player-pause" aria-hidden="true"></i></button>
|
|
<button class="tbtn" onclick="resetT()" aria-label="Réinitialiser"><i class="ti ti-refresh" aria-hidden="true"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="identity-row">
|
|
<div class="id-field">
|
|
<span class="field-label">Nom</span>
|
|
<input class="field-line" type="text" placeholder="Entrez votre nom" id="student-lastname" />
|
|
</div>
|
|
<div class="id-field">
|
|
<span class="field-label">Prénom</span>
|
|
<input class="field-line" type="text" placeholder="Entrez votre prénom" id="student-firstname" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="score-row">
|
|
<div class="sc"><div class="sc-l">C1</div><div class="sc-v" id="s1">-/3</div></div>
|
|
<div class="sc"><div class="sc-l">C2</div><div class="sc-v" id="s2">-/3</div></div>
|
|
<div class="sc"><div class="sc-l">C3</div><div class="sc-v" id="s3">-/3</div></div>
|
|
<div class="sc"><div class="sc-l">C4</div><div class="sc-v" id="s4">-/2</div></div>
|
|
<div class="sc"><div class="sc-l">C5</div><div class="sc-v" id="s5">-/2</div></div>
|
|
<div class="sc"><div class="sc-l">C6</div><div class="sc-v" id="s6">-/3</div></div>
|
|
<div class="sc"><div class="sc-l">Total</div><div class="sc-v" id="st">-/16</div></div>
|
|
</div>
|
|
|
|
<div class="notice">
|
|
<i class="ti ti-info-circle" aria-hidden="true"></i>
|
|
<p><strong>Conditions proches de l'épreuve :</strong> travaillez seul et en silence. Pour les exercices de rédaction, formulez votre réponse avant de regarder le corrigé. Le minuteur couvre les 2h de la séance exercices (séquences 2 et 3).</p>
|
|
</div>
|
|
|
|
<div class="ex">
|
|
<div class="ex-h">
|
|
<div class="ex-icon i-p"><i class="ti ti-tool" aria-hidden="true"></i></div>
|
|
<div class="ex-meta"><div class="ex-num">Exercice 1 · C1 · UF1 · 20 min · individuel</div><div class="ex-title">Sélectionner et justifier les outils IA pour un contexte professionnel</div></div>
|
|
<span class="ex-pts">3 pts</span>
|
|
</div>
|
|
<div class="ex-b">
|
|
<div class="cas"><div class="cas-l"><i class="ti ti-briefcase" aria-hidden="true"></i>Contexte - Directrice d'agence immobilière (8 collaborateurs)</div><div class="cas-t">Sophie dirige une agence. Elle veut utiliser l'IA pour <strong>rédiger les annonces de biens</strong>, <strong>répondre aux emails entrants</strong> et <strong>analyser les avis clients</strong> laissés sur Google. Ses collaborateurs utilisent Microsoft 365. Elle traite des données de clients (coordonnées, revenus, situation familiale).</div></div>
|
|
<div class="consigne">Pour chaque usage, choisissez l'outil le plus adapté parmi la liste et justifiez selon les 3 critères : contexte métier, RGPD, intégration existante.</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">1</div>Pour la rédaction d'annonces immobilières (textes marketing, pas de données personnelles), quel outil est le plus adapté ?</div>
|
|
<div class="opts" id="q1">
|
|
<div class="opt" onclick="sel(this,'q1')"><div class="or"><div class="od"></div></div><div class="ot">ChatGPT - outil généraliste puissant pour la rédaction créative, sans contrainte RGPD ici car pas de données personnelles</div></div>
|
|
<div class="opt" onclick="sel(this,'q1')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">Copilot (Microsoft 365) - s'intègre directement dans Word et Outlook déjà utilisés, cohérent avec l'environnement de travail existant</div></div>
|
|
<div class="opt" onclick="sel(this,'q1')"><div class="or"><div class="od"></div></div><div class="ot">Mistral - souverain et conforme RGPD, mais pas utile ici puisqu'il n'y a pas de données sensibles à protéger</div></div>
|
|
<div class="opt" onclick="sel(this,'q1')"><div class="or"><div class="od"></div></div><div class="ot">Gemini - s'intègre à Google Workspace, mais Sophie n'utilise pas Google Workspace</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">2</div>Pour répondre aux emails entrants contenant des informations sur la situation financière des clients, quel outil est le plus adapté ?</div>
|
|
<div class="opts" id="q2">
|
|
<div class="opt" onclick="sel(this,'q2')"><div class="or"><div class="od"></div></div><div class="ot">ChatGPT - le plus performant pour la rédaction d'emails professionnels</div></div>
|
|
<div class="opt" onclick="sel(this,'q2')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">Copilot dans Outlook - intégré à l'environnement M365 existant, hébergement Microsoft conforme RGPD pour les données pro, sans sortir les données clients hors du système</div></div>
|
|
<div class="opt" onclick="sel(this,'q2')"><div class="or"><div class="od"></div></div><div class="ot">Mistral via API - conforme RGPD mais nécessite un développement technique non disponible dans cette structure</div></div>
|
|
<div class="opt" onclick="sel(this,'q2')"><div class="or"><div class="od"></div></div><div class="ot">N'importe quel outil - les emails ne sont pas des données sensibles au sens RGPD</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">3</div>Pour analyser les avis Google (données publiques, noms de clients parfois visibles), quel réflexe RGPD s'impose ?</div>
|
|
<div class="opts" id="q3">
|
|
<div class="opt" onclick="sel(this,'q3')"><div class="or"><div class="od"></div></div><div class="ot">Aucun - les avis Google sont publics donc hors RGPD</div></div>
|
|
<div class="opt" onclick="sel(this,'q3')"><div class="or"><div class="od"></div></div><div class="ot">Demander l'accord de chaque client avant d'utiliser son avis dans un prompt IA</div></div>
|
|
<div class="opt" onclick="sel(this,'q3')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">Anonymiser les avis avant de les soumettre à l'IA (supprimer les noms visibles) - les données publiques restent des données personnelles au sens RGPD si elles permettent l'identification</div></div>
|
|
<div class="opt" onclick="sel(this,'q3')"><div class="or"><div class="od"></div></div><div class="ot">Utiliser uniquement Mistral car c'est le seul outil conforme RGPD pour ce type d'usage</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="ex-actions">
|
|
<button class="abtn ab-c" onclick="checkEx(['q1','q2','q3'],'s1',3,'rb1')"><i class="ti ti-check" aria-hidden="true"></i>Vérifier</button>
|
|
<button class="abtn ab-r" onclick="resetEx(['q1','q2','q3'],'s1','rb1')"><i class="ti ti-refresh" aria-hidden="true"></i>Réinitialiser</button>
|
|
<div id="rb1" class="rbadge"></div>
|
|
</div>
|
|
<button class="cbtn" id="cb1" onclick="togC('cp1','cb1')"><i class="ti ti-eye" aria-hidden="true"></i>Voir le corrigé</button>
|
|
<div class="cpanel" id="cp1">
|
|
<div class="cp-t"><i class="ti ti-check" aria-hidden="true"></i>Corrigé - exercice 1</div>
|
|
<div class="cp-i">Q1 - Copilot. L'intégration M365 est le critère déterminant ici : même si ChatGPT est plus performant en rédaction créative, Copilot évite de faire sortir les données de l'environnement de travail et s'intègre dans les outils déjà maîtrisés.</div>
|
|
<div class="cp-i">Q2 - Copilot dans Outlook. Les données financières des clients sont des données personnelles sensibles. Copilot traite les données dans l'environnement Microsoft 365 de l'entreprise sans les envoyer à un serveur externe non maîtrisé. ChatGPT nécessiterait de copier-coller des données clients hors du système - risque RGPD réel.</div>
|
|
<div class="cp-i warn">Q3 - Anonymiser avant de soumettre. Erreur fréquente : croire que "données publiques = hors RGPD". Les noms visibles dans les avis Google restent des données personnelles. La règle : toujours supprimer ou pseudonymiser avant de passer à l'IA, même pour des données en apparence anodines.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ex">
|
|
<div class="ex-h">
|
|
<div class="ex-icon i-t"><i class="ti ti-prompt" aria-hidden="true"></i></div>
|
|
<div class="ex-meta"><div class="ex-num">Exercice 2 · C2 · UF2 · 25 min · individuel</div><div class="ex-title">Rédiger et itérer un prompt ROCCO complet</div></div>
|
|
<span class="ex-pts">3 pts</span>
|
|
</div>
|
|
<div class="ex-b">
|
|
<div class="cas"><div class="cas-l"><i class="ti ti-briefcase" aria-hidden="true"></i>Besoin métier - Responsable formation dans un groupe hôtelier</div><div class="cas-t">Marc doit créer un <strong>quiz de 5 questions à choix multiples</strong> pour évaluer les connaissances des réceptionnistes sur les procédures d'accueil VIP. Le quiz doit être <strong>niveau débutant</strong>, <strong>en français</strong>, avec <strong>4 options par question</strong> dont une seule correcte, et inclure la <strong>bonne réponse indiquée</strong> après chaque question.</div></div>
|
|
<div class="consigne">Rédigez le prompt ROCCO complet pour ce besoin. Assurez-vous que les 5 composantes sont explicitement présentes.</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">1</div>Rédigez votre prompt ROCCO ci-dessous. Commentez brièvement chaque composante (R, O, C, C, O) juste avant ou après le prompt.</div>
|
|
<textarea class="ta ta-ml" rows="10" placeholder="Rédigez ici votre prompt complet avec les 5 composantes ROCCO identifiées. Ex. : [R - Rôle] Tu es un expert en formation hôtelière spécialisé dans les procédures d'accueil... [O - Objectif] Crée un quiz de 5 QCM... ..." aria-label="Prompt ROCCO exercice 2"></textarea>
|
|
</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">2</div>Après avoir soumis votre prompt, quel élément du résultat vérifieriez-vous en premier pour valider la qualité ?</div>
|
|
<div class="opts" id="q4">
|
|
<div class="opt" onclick="sel(this,'q4')"><div class="or"><div class="od"></div></div><div class="ot">La longueur du quiz - vérifier qu'il y a bien 5 questions</div></div>
|
|
<div class="opt" onclick="sel(this,'q4')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">L'exactitude des bonnes réponses - vérifier que les réponses indiquées comme correctes sont bien exactes sur les procédures VIP réelles</div></div>
|
|
<div class="opt" onclick="sel(this,'q4')"><div class="or"><div class="od"></div></div><div class="ot">Le style rédactionnel - vérifier que le ton est professionnel</div></div>
|
|
<div class="opt" onclick="sel(this,'q4')"><div class="or"><div class="od"></div></div><div class="ot">Le format - vérifier que les 4 options sont bien présentes</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">3</div>Le résultat obtenu contient des questions trop complexes pour des débutants. Quelle reformulation du prompt est la plus efficace ?</div>
|
|
<div class="opts" id="q5">
|
|
<div class="opt" onclick="sel(this,'q5')"><div class="or"><div class="od"></div></div><div class="ot">"Refais le quiz plus simple"</div></div>
|
|
<div class="opt" onclick="sel(this,'q5')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">"Les questions sont trop complexes pour des débutants. Reformule chaque question pour qu'elle ne comporte qu'un seul concept évalué, avec un vocabulaire de base sans jargon hôtelier avancé."</div></div>
|
|
<div class="opt" onclick="sel(this,'q5')"><div class="or"><div class="od"></div></div><div class="ot">"Recommence depuis le début avec un quiz plus facile"</div></div>
|
|
<div class="opt" onclick="sel(this,'q5')"><div class="or"><div class="od"></div></div><div class="ot">"Je veux des questions de niveau 1 sur 5"</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="ex-actions">
|
|
<button class="abtn ab-c" onclick="checkEx(['q4','q5'],'s2',2,'rb2')"><i class="ti ti-check" aria-hidden="true"></i>Vérifier Q2 & Q3</button>
|
|
<button class="abtn ab-r" onclick="resetEx(['q4','q5'],'s2','rb2')"><i class="ti ti-refresh" aria-hidden="true"></i>Réinitialiser</button>
|
|
<div id="rb2" class="rbadge"></div>
|
|
</div>
|
|
<button class="cbtn" id="cb2" onclick="togC('cp2','cb2')"><i class="ti ti-eye" aria-hidden="true"></i>Voir le corrigé</button>
|
|
<div class="cpanel" id="cp2">
|
|
<div class="cp-t"><i class="ti ti-check" aria-hidden="true"></i>Corrigé - exercice 2</div>
|
|
<div class="cp-i">Prompt ROCCO attendu : R = "Tu es un expert en formation hôtelière" · O = "Crée un quiz de 5 QCM pour évaluer les réceptionnistes sur les procédures d'accueil VIP" · C = "Public : réceptionnistes débutants sans expérience VIP" · C = "4 options par question, 1 seule correcte, niveau débutant, en français, sans jargon avancé" · O = "Format : chaque question suivie de 4 options (A/B/C/D) et de la bonne réponse en gras après les options".</div>
|
|
<div class="cp-i">Q2 - L'exactitude des bonnes réponses est le critère prioritaire. L'IA peut halluciner des procédures VIP incorrectes. Format et longueur sont vérifiables visuellement, mais la validité du contenu nécessite une expertise métier que l'IA ne garantit pas.</div>
|
|
<div class="cp-i warn">Q3 - La reformulation précise et structurée. "Refais plus simple" ou "recommence" relance un nouveau prompt sans capitaliser sur ce qui fonctionnait. La bonne itération : nommer le problème précis + donner la contrainte reformulée. "Un seul concept par question + vocabulaire de base" est une instruction actionnable - "plus simple" ne l'est pas.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ex">
|
|
<div class="ex-h">
|
|
<div class="ex-icon i-r"><i class="ti ti-shield" aria-hidden="true"></i></div>
|
|
<div class="ex-meta"><div class="ex-num">Exercice 3 · C3 · UF3 · 15 min · individuel</div><div class="ex-title">Corriger un prompt non conforme RGPD</div></div>
|
|
<span class="ex-pts">3 pts</span>
|
|
</div>
|
|
<div class="ex-b">
|
|
<div class="prompt-box">
|
|
<div class="pb-l">Prompt soumis par un apprenant <span class="tag tag-ko">non conforme</span></div>
|
|
"Tu es un expert RH. Voici le dossier de candidature de Lucas Martin, né le 04/07/1995, demeurant 8 allée des Cerisiers 31000 Toulouse, numéro de sécurité sociale 1 95 07 31 XXX XXX 42. Il postule pour un poste de chef de projet digital. Ses deux derniers employeurs sont Capgemini (2019-2021) et Orange (2021-2023). Il mentionne une période de congé maladie longue durée en 2022. Rédige une synthèse de son profil pour préparer l'entretien."
|
|
</div>
|
|
<div class="consigne">Identifiez tous les éléments problématiques, puis rédigez une version conforme qui reste opérationnellement utile.</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">1</div>Parmi ces éléments du prompt, lesquels posent un problème RGPD ? (plusieurs réponses correctes - cochez toutes celles qui s'appliquent)</div>
|
|
<div class="opts" id="q6m">
|
|
<div class="opt" onclick="selM(this)" data-correct="true"><div class="or" style="border-radius:3px;"><div class="od"></div></div><div class="ot">Nom, prénom et date de naissance - données d'identité directement nominatives</div></div>
|
|
<div class="opt" onclick="selM(this)" data-correct="true"><div class="or" style="border-radius:3px;"><div class="od"></div></div><div class="ot">Adresse complète et numéro de sécurité sociale - données permettant localisation et identification précises</div></div>
|
|
<div class="opt" onclick="selM(this)" data-correct="true"><div class="or" style="border-radius:3px;"><div class="od"></div></div><div class="ot">La mention du congé maladie longue durée - donnée de santé, catégorie spéciale RGPD (art. 9), protection renforcée obligatoire</div></div>
|
|
<div class="opt" onclick="selM(this)"><div class="or" style="border-radius:3px;"><div class="od"></div></div><div class="ot">Les noms des employeurs précédents - ce sont des données professionnelles, pas des données personnelles au sens strict</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">2</div>Rédigez la version conforme du prompt ci-dessous - sans les données problématiques, mais en restant opérationnellement utile.</div>
|
|
<textarea class="ta ta-ml" rows="7" placeholder="Rédigez ici le prompt corrigé. Conseil : l'IA n'a pas besoin du nom réel pour préparer un entretien - elle a besoin du profil, du poste visé et du contexte." aria-label="Prompt corrigé exercice 3"></textarea>
|
|
</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">3</div>Un apprenant vous demande : "Ce candidat peut-il nous poursuivre légalement si on utilise ses données dans ChatGPT ?" Que répondez-vous ?</div>
|
|
<div class="opts" id="q7">
|
|
<div class="opt" onclick="sel(this,'q7')"><div class="or"><div class="od"></div></div><div class="ot">"Oui, il peut déposer une plainte CNIL et obtenir des dommages et intérêts jusqu'à X euros"</div></div>
|
|
<div class="opt" onclick="sel(this,'q7')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">"Je peux vous expliquer que l'utilisation de ses données sans base légale expose à des risques - mais pour votre situation précise, c'est votre DPO ou service juridique qui peut vous répondre. Ce n'est pas mon rôle."</div></div>
|
|
<div class="opt" onclick="sel(this,'q7')"><div class="or"><div class="od"></div></div><div class="ot">"Non, pas de risque si vous utilisez la version payante de ChatGPT"</div></div>
|
|
<div class="opt" onclick="sel(this,'q7')"><div class="or"><div class="od"></div></div><div class="ot">"Ça dépend - si le candidat n'a pas porté plainte depuis 3 ans c'est prescrit"</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="ex-actions">
|
|
<button class="abtn ab-c" onclick="checkEx(['q6m','q7'],'s3',2,'rb3')"><i class="ti ti-check" aria-hidden="true"></i>Vérifier Q1 & Q3</button>
|
|
<button class="abtn ab-r" onclick="resetEx(['q6m','q7'],'s3','rb3')"><i class="ti ti-refresh" aria-hidden="true"></i>Réinitialiser</button>
|
|
<div id="rb3" class="rbadge"></div>
|
|
</div>
|
|
<button class="cbtn" id="cb3" onclick="togC('cp3','cb3')"><i class="ti ti-eye" aria-hidden="true"></i>Voir le corrigé complet</button>
|
|
<div class="cpanel" id="cp3">
|
|
<div class="cp-t"><i class="ti ti-check" aria-hidden="true"></i>Corrigé - exercice 3</div>
|
|
<div class="cp-i">Q1 - Les 3 premières réponses sont correctes. Les noms d'employeurs (Capgemini, Orange) ne sont pas des données personnelles au sens strict - ce sont des entités juridiques publiques. En revanche, le congé maladie est une donnée de santé (catégorie spéciale art. 9 RGPD) qui exige une protection renforcée.</div>
|
|
<div class="cp-i">Q2 - Version conforme attendue : "Tu es un expert RH. Un candidat postule pour un poste de chef de projet digital. Son parcours inclut deux expériences de 2 à 4 ans dans des ESN et opérateurs télécom (2019-2023), avec une interruption notable en 2022. Rédige une synthèse de profil et une liste de questions d'entretien pour explorer ce parcours, notamment la période d'interruption sans en présupposer la cause."</div>
|
|
<div class="cp-i warn">Q3 - B est la seule réponse correcte. Donner des chiffres d'amendes ou parler de prescription, c'est du conseil juridique - même si vous le faites avec précaution. La formule "ce n'est pas mon rôle" doit être dite clairement, sans hésitation, sans s'excuser.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<div class="ex">
|
|
<div class="ex-h">
|
|
<div class="ex-icon i-b"><i class="ti ti-accessible" aria-hidden="true"></i></div>
|
|
<div class="ex-meta"><div class="ex-num">Exercice 4 · C4 · UF4 · 15 min · individuel</div><div class="ex-title">Rédiger un prompt inclusif et évaluer le résultat</div></div>
|
|
<span class="ex-pts">2 pts</span>
|
|
</div>
|
|
<div class="ex-b">
|
|
<div class="cas"><div class="cas-l"><i class="ti ti-briefcase" aria-hidden="true"></i>Contexte - Chargée de communication dans une collectivité</div><div class="cas-t">Amandine doit produire <strong>une version accessible</strong> d'un communiqué de presse technique (160 mots, vocabulaire administratif dense) pour le site de la mairie. Le public cible inclut des personnes avec des <strong>difficultés de lecture et de compréhension</strong>.</div></div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">1</div>Quel standard d'accessibilité Amandine doit-elle appliquer pour ce public spécifique ?</div>
|
|
<div class="opts" id="q8">
|
|
<div class="opt" onclick="sel(this,'q8')"><div class="or"><div class="od"></div></div><div class="ot">WCAG 2.1 AA - accessibilité web, contraste, navigation clavier, lecteur d'écran</div></div>
|
|
<div class="opt" onclick="sel(this,'q8')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">FALC (Facile à Lire et à Comprendre) - accessibilité cognitive, phrases courtes, une idée par phrase, vocabulaire simple, illustrations si possible</div></div>
|
|
<div class="opt" onclick="sel(this,'q8')"><div class="or"><div class="od"></div></div><div class="ot">Sous-titrage SRT - accessibilité auditive pour les contenus vidéo</div></div>
|
|
<div class="opt" onclick="sel(this,'q8')"><div class="or"><div class="od"></div></div><div class="ot">Les deux : WCAG et FALC sont toujours à appliquer ensemble</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">2</div>Rédigez le prompt que vous donneriez à l'IA pour réécrire ce communiqué selon les critères FALC.</div>
|
|
<textarea class="ta ta-ml" rows="6" placeholder="Votre prompt doit nommer explicitement le standard FALC et les critères concrets attendus (longueur des phrases, vocabulaire, structure…) - pas juste 'rends ça plus simple'." aria-label="Prompt FALC exercice 4"></textarea>
|
|
</div>
|
|
<div class="ex-actions">
|
|
<button class="abtn ab-c" onclick="checkEx(['q8'],'s4',1,'rb4')"><i class="ti ti-check" aria-hidden="true"></i>Vérifier Q1</button>
|
|
<button class="abtn ab-r" onclick="resetEx(['q8'],'s4','rb4')"><i class="ti ti-refresh" aria-hidden="true"></i>Réinitialiser</button>
|
|
<div id="rb4" class="rbadge"></div>
|
|
</div>
|
|
<button class="cbtn" id="cb4" onclick="togC('cp4','cb4')"><i class="ti ti-eye" aria-hidden="true"></i>Voir le corrigé</button>
|
|
<div class="cpanel" id="cp4">
|
|
<div class="cp-t"><i class="ti ti-check" aria-hidden="true"></i>Corrigé - exercice 4</div>
|
|
<div class="cp-i">Q1 - FALC. Le WCAG concerne l'accessibilité technique du web (contraste, navigation). Le FALC concerne l'accessibilité cognitive du contenu (lisibilité, compréhension). Pour des difficultés de lecture et de compréhension, c'est le FALC. Erreur fréquente : les appliquer indifféremment.</div>
|
|
<div class="cp-i">Q2 - Prompt attendu : "Tu es un expert en accessibilité cognitive. Réécris ce communiqué de presse selon les critères FALC : phrases de maximum 10-12 mots, une seule idée par phrase, vocabulaire courant (éviter les termes administratifs), actif plutôt que passif, paragraphes courts de 2-3 phrases maximum. Conserve toutes les informations essentielles du texte original. Voici le texte : [texte]."</div>
|
|
<div class="cp-i warn">Piège : un prompt comme "rédige ce texte de façon simple et accessible" ne nomme aucun standard et ne donne pas de critères actionables à l'IA. Résultat probable : un texte légèrement simplifié mais pas réellement FALC.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ex">
|
|
<div class="ex-h">
|
|
<div class="ex-icon i-g"><i class="ti ti-sparkles" aria-hidden="true"></i></div>
|
|
<div class="ex-meta"><div class="ex-num">Exercice 5 · C5 · UF2 & UF4 · 15 min · individuel</div><div class="ex-title">Diagnostiquer et corriger un contenu généré</div></div>
|
|
<span class="ex-pts">2 pts</span>
|
|
</div>
|
|
<div class="ex-b">
|
|
<div class="cas"><div class="cas-l"><i class="ti ti-file-text" aria-hidden="true"></i>Contenu généré par IA - à diagnostiquer</div><div class="cas-t">L'IA a produit ce texte en réponse au prompt : "Rédige un email de relance pour un client qui n'a pas renouvelé son contrat de maintenance."<br><br><span style="font-style:italic;color:var(--color-text-secondary);">"Monsieur, Madame, Nous nous permettons de vous contacter suite à l'expiration de votre contrat de maintenance référencé le 14/03/2024. Il apparaît que votre contrat n'a pas été renouvelé à ce jour. Nous souhaiterions vous informer que notre offre de renouvellement est disponible et que nous serions ravis de continuer à vous accompagner. N'hésitez pas à nous contacter pour tout renseignement complémentaire. Cordialement, Le service client."</span></div></div>
|
|
<div class="consigne">Diagnostiquez les défauts de ce contenu, puis rédigez le prompt de correction. Ne réécrivez pas l'email vous-même.</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">1</div>Identifiez les 2 défauts principaux de cet email généré.</div>
|
|
<div class="opts" id="q9">
|
|
<div class="opt" onclick="sel(this,'q9')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">Ton trop impersonnel et passif ("il apparaît que", "nous nous permettons") + aucun bénéfice concret pour le client, seulement une information neutre sans appel à l'action clair</div></div>
|
|
<div class="opt" onclick="sel(this,'q9')"><div class="or"><div class="od"></div></div><div class="ot">Email trop court et trop simple - il faudrait plus de détails sur l'offre</div></div>
|
|
<div class="opt" onclick="sel(this,'q9')"><div class="or"><div class="od"></div></div><div class="ot">Email trop formel - il faudrait un ton plus familier pour une relance client</div></div>
|
|
<div class="opt" onclick="sel(this,'q9')"><div class="or"><div class="od"></div></div><div class="ot">L'email est acceptable - il est professionnel et factuel</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">2</div>Rédigez le prompt de correction que vous soumettriez à l'IA - sans réécrire l'email vous-même.</div>
|
|
<textarea class="ta ta-ml" rows="5" placeholder="Votre prompt doit nommer précisément les défauts identifiés et demander des modifications spécifiques. L'IA corrige - vous guidez." aria-label="Prompt de correction exercice 5"></textarea>
|
|
</div>
|
|
<div class="ex-actions">
|
|
<button class="abtn ab-c" onclick="checkEx(['q9'],'s5',1,'rb5')"><i class="ti ti-check" aria-hidden="true"></i>Vérifier Q1</button>
|
|
<button class="abtn ab-r" onclick="resetEx(['q9'],'s5','rb5')"><i class="ti ti-refresh" aria-hidden="true"></i>Réinitialiser</button>
|
|
<div id="rb5" class="rbadge"></div>
|
|
</div>
|
|
<button class="cbtn" id="cb5" onclick="togC('cp5','cb5')"><i class="ti ti-eye" aria-hidden="true"></i>Voir le corrigé</button>
|
|
<div class="cpanel" id="cp5">
|
|
<div class="cp-t"><i class="ti ti-check" aria-hidden="true"></i>Corrigé - exercice 5</div>
|
|
<div class="cp-i">Q1 - Défauts principaux : (1) ton passif et bureaucratique ("il apparaît que", "nous nous permettons") qui crée une distance avec le client, (2) absence totale d'un bénéfice client ou d'une offre concrète - l'email annonce l'expiration sans donner de raison de renouveler. Résultat : email informatif mais pas commercial.</div>
|
|
<div class="cp-i">Q2 - Prompt de correction attendu : "Cet email a deux problèmes : le ton est trop passif et bureaucratique, et il n'y a aucun bénéfice concret pour le client. Reformule-le en : (1) adoptant un ton direct et chaleureux à la 2e personne du pluriel, (2) ajoutant en 1 phrase un bénéfice concret du renouvellement (continuité de service, tarif préférentiel fidélité, ou support prioritaire), (3) terminant par un appel à l'action clair avec une date limite ou un lien de renouvellement."</div>
|
|
<div class="cp-i warn">Piège critique C5 : réécrire l'email soi-même au lieu du prompt de correction. Si vous avez écrit directement l'email amélioré - c'est l'erreur la plus pénalisée. Le jury évalue votre capacité à guider l'IA, pas à vous y substituer.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ex">
|
|
<div class="ex-h">
|
|
<div class="ex-icon i-a"><i class="ti ti-scale" aria-hidden="true"></i></div>
|
|
<div class="ex-meta"><div class="ex-num">Exercice 6 · C6 · UF5 · 15 min · individuel</div><div class="ex-title">Analyser un cas éthique selon l'IA Act et faciliter sans prendre parti</div></div>
|
|
<span class="ex-pts">3 pts</span>
|
|
</div>
|
|
<div class="ex-b">
|
|
<div class="cas"><div class="cas-l"><i class="ti ti-building" aria-hidden="true"></i>Cas - Service RH d'une collectivité territoriale (1 200 agents)</div><div class="cas-t">Le DRH souhaite utiliser un système IA pour <strong>analyser les dossiers de candidature</strong> reçus pour les concours internes et produire une <strong>note de synthèse</strong> classant les candidats selon leur adéquation au poste. La décision finale reste humaine, mais le classement IA influence fortement le jury.</div></div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">1</div>Un apprenant affirme : "Ce système est forcément interdit - l'IA Act protège les candidats à l'emploi." Que corrigez-vous dans cette affirmation ?</div>
|
|
<div class="opts" id="q10">
|
|
<div class="opt" onclick="sel(this,'q10')"><div class="or"><div class="od"></div></div><div class="ot">Rien - il a raison : tout système IA influençant l'accès à un emploi dans le secteur public est classé risque inacceptable et interdit par l'IA Act</div></div>
|
|
<div class="opt" onclick="sel(this,'q10')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">L'IA Act ne l'interdit pas : ce type d'usage est classé risque élevé, donc autorisé sous conditions strictes - transparence envers les candidats, supervision humaine documentée, explicabilité du classement et droit de recours</div></div>
|
|
<div class="opt" onclick="sel(this,'q10')"><div class="or"><div class="od"></div></div><div class="ot">L'IA Act ne s'applique pas ici : la décision finale appartenant au jury humain, le système IA est exempt d'obligations réglementaires spécifiques</div></div>
|
|
<div class="opt" onclick="sel(this,'q10')"><div class="or"><div class="od"></div></div><div class="ot">C'est un risque limité : l'obligation principale est d'informer les candidats qu'une IA contribue au processus, sans contrainte supplémentaire</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">2</div>L'apprenant insiste : "C'est scandaleux - une IA qui classe des agents pour un concours interne, ça ne devrait pas exister." Quelle réponse adopte à la fois une posture neutre, recadre factuellement et relance le groupe ?</div>
|
|
<div class="opts" id="q11">
|
|
<div class="opt" onclick="sel(this,'q11')"><div class="or"><div class="od"></div></div><div class="ot">"Je comprends cette préoccupation. L'IA Act est effectivement très strict sur ce type d'usage - c'est précisément pourquoi il impose des obligations de transparence et un droit de recours pour les candidats."</div></div>
|
|
<div class="opt" onclick="sel(this,'q11')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">"C'est une position que beaucoup partagent. Précisons un point : ici l'IA ne décide pas, elle classe - et ce classement est encadré comme risque élevé. Qu'est-ce qui vous semble le plus problématique : le classement lui-même, ou l'absence de transparence envers les candidats ?"</div></div>
|
|
<div class="opt" onclick="sel(this,'q11')"><div class="or"><div class="od"></div></div><div class="ot">"Bonne réaction. Les systèmes à risque élevé comme celui-ci imposent justement des garde-fous : transparence, supervision, recours. Ces garanties vous sembleraient-elles suffisantes ?"</div></div>
|
|
<div class="opt" onclick="sel(this,'q11')"><div class="or"><div class="od"></div></div><div class="ot">"Je comprends l'indignation, mais gardons une lecture nuancée : les biais dans les jurys humains existent aussi - un système IA bien encadré peut parfois être plus cohérent."</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="qrow">
|
|
<div class="ql"><div class="qn">3</div>Six mois après déploiement, le service RH constate que le système favorise systématiquement les candidats titulaires d'un master d'école. Quelle analyse est la plus rigoureuse ?</div>
|
|
<div class="opts" id="q12">
|
|
<div class="opt" onclick="sel(this,'q12')" data-correct="true"><div class="or"><div class="od"></div></div><div class="ot">Biais de représentation probable : si les agents historiquement promus dans cette collectivité avaient majoritairement ce profil, le modèle a appris à le valoriser - reproduisant et amplifiant un biais organisationnel préexistant</div></div>
|
|
<div class="opt" onclick="sel(this,'q12')"><div class="or"><div class="od"></div></div><div class="ot">Ce n'est pas forcément un biais : un master est un critère objectif de qualification, l'IA reflète probablement les exigences réelles du poste</div></div>
|
|
<div class="opt" onclick="sel(this,'q12')"><div class="or"><div class="od"></div></div><div class="ot">C'est un biais de confirmation du jury : les membres humains interprètent favorablement les scores élevés pour les profils qu'ils valorisent déjà, indépendamment de l'IA</div></div>
|
|
<div class="opt" onclick="sel(this,'q12')"><div class="or"><div class="od"></div></div><div class="ot">C'est un problème de paramétrage corrigeable : en repondérant les critères dans l'algorithme, ce résultat disparaît sans remettre en cause le système</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="ex-actions">
|
|
<button class="abtn ab-c" onclick="checkEx(['q10','q11','q12'],'s6',3,'rb6')"><i class="ti ti-check" aria-hidden="true"></i>Vérifier</button>
|
|
<button class="abtn ab-r" onclick="resetEx(['q10','q11','q12'],'s6','rb6')"><i class="ti ti-refresh" aria-hidden="true"></i>Réinitialiser</button>
|
|
<div id="rb6" class="rbadge"></div>
|
|
</div>
|
|
<button class="cbtn" id="cb6" onclick="togC('cp6','cb6')"><i class="ti ti-eye" aria-hidden="true"></i>Voir le corrigé</button>
|
|
<div class="cpanel" id="cp6">
|
|
<div class="cp-t"><i class="ti ti-check" aria-hidden="true"></i>Corrigé - exercice 6</div>
|
|
<div class="cp-i">Q1 - B. L'affirmation de l'apprenant confond risque élevé et risque inacceptable. Le recrutement IA est explicitement classé risque élevé par l'IA Act - autorisé mais sous conditions strictes. Ni la décision humaine finale (piège C), ni le secteur public (piège A), ni la simple information des candidats (piège D) ne suffisent à qualifier le niveau : c'est la nature de l'usage qui détermine la classification.</div>
|
|
<div class="cp-i">Q2 - B. Les trois autres réponses ont chacune un défaut : A valide la position en surenchérissant sur l'IA Act ("très strict"), C prend parti en disant "bonne réaction", D contre-argumente en défendant l'IA. B fait les trois choses attendues d'un facilitateur : accueillir sans valider, recadrer factuellement ("l'IA ne décide pas, elle classe"), relancer avec une question ouverte qui permet au groupe de poursuivre.</div>
|
|
<div class="cp-i warn">Q3 - A. Le piège B ("critère objectif") est classique : les diplômes et l'expérience ne sont pas neutres, ils reproduisent les biais d'accès à l'éducation. Le piège C désigne un vrai biais (biais de confirmation) mais l'attribue au jury, pas à l'IA. Le piège D confond cause et symptôme : repondérer les critères traite l'effet sans corriger les données d'entraînement biaisées à la source.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<div class="section-title" style="font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary);display:flex;align-items:center;gap:8px;margin-bottom:1.25rem;">
|
|
<i class="ti ti-edit" aria-hidden="true"></i>Validation & Signature
|
|
</div>
|
|
|
|
<div class="signature-block">
|
|
<div class="signature-grid">
|
|
<div class="signature-col">
|
|
<div class="signature-label">Signature</div>
|
|
<div class="signature-pad-wrapper">
|
|
<canvas class="signature-pad" id="signature-pad"></canvas>
|
|
<div class="signature-pad-controls">
|
|
<button type="button" class="signature-btn clear" onclick="clearSignature()">
|
|
<i class="ti ti-trash" aria-hidden="true"></i> Effacer
|
|
</button>
|
|
<button type="button" class="signature-btn save" onclick="saveSignature()">
|
|
<i class="ti ti-circle-check" aria-hidden="true"></i> Enregistrer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="signature-col date-col">
|
|
<div class="id-field">
|
|
<span class="field-label">Date de signature</span>
|
|
<input type="text" class="field-line" placeholder="__/__/____" id="signature-date" />
|
|
</div>
|
|
<div class="signature-info-box">
|
|
<i class="ti ti-info-circle" aria-hidden="true"></i>
|
|
<p>Cette signature atteste que vous avez complété cette séance d'entraînement dans les conditions proches de l'épreuve.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-strip">
|
|
<div class="footer-note">À conserver ou partager avant la séance. Le minuteur couvre les 2h des séquences 2 et 3 - travaillez seul et sans consultation des corrigés en cours de route.</div>
|
|
<div class="footer-btns">
|
|
<button class="signature-btn clear" onclick="clearAll()">
|
|
<i class="ti ti-eraser" aria-hidden="true"></i> Effacer toutes les saisies
|
|
</button>
|
|
<button class="signature-btn save" onclick="window.print()">
|
|
<i class="ti ti-printer" aria-hidden="true"></i> Imprimer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// Timer
|
|
let secs=7200,iv=null;
|
|
function fmt(s){const h=Math.floor(s/3600),m=Math.floor((s%3600)/60),ss=s%60;return h+':'+String(m).padStart(2,'0')+':'+String(ss).padStart(2,'0');}
|
|
function startT(){if(iv)return;iv=setInterval(()=>{if(secs<=0){clearInterval(iv);iv=null;document.getElementById('tv').textContent='Temps !';return;}secs--;document.getElementById('tv').textContent=fmt(secs);},1000);}
|
|
function pauseT(){clearInterval(iv);iv=null;}
|
|
function resetT(){clearInterval(iv);iv=null;secs=7200;document.getElementById('tv').textContent=fmt(secs);}
|
|
|
|
const MAXS={s1:3,s2:2,s3:2,s4:1,s5:1,s6:3};
|
|
|
|
function sel(el,qid){
|
|
document.getElementById(qid).querySelectorAll('.opt').forEach(o=>o.classList.remove('sel','ok','ko'));
|
|
el.classList.add('sel');
|
|
}
|
|
function selM(el){el.classList.toggle('sel');}
|
|
|
|
function checkEx(qids,scid,max,rbid){
|
|
let score=0;
|
|
qids.forEach(qid=>{
|
|
const grp=document.getElementById(qid);
|
|
if(!grp)return;
|
|
const opts=grp.querySelectorAll('.opt');
|
|
const isM=opts[0].querySelector('.or').style.borderRadius==='3px';
|
|
if(isM){
|
|
let ok=true;
|
|
opts.forEach(o=>{
|
|
const should=o.dataset.correct==='true';
|
|
const is=o.classList.contains('sel');
|
|
o.classList.remove('sel','ok','ko');
|
|
if(should&&is){o.classList.add('ok');} // coché + correct → vert
|
|
else if(!should&&is){o.classList.add('ko');ok=false;} // coché + incorrect → rouge
|
|
else if(should&&!is){o.classList.add('ok');ok=false;} // manqué → vert (révèle la bonne réponse)
|
|
// non coché + non correct → neutre (rien)
|
|
});
|
|
if(ok)score++;
|
|
} else {
|
|
const s=grp.querySelector('.opt.sel');
|
|
if(!s)return;
|
|
const c=grp.querySelector('[data-correct="true"]');
|
|
s.classList.remove('sel');
|
|
if(s===c){s.classList.add('ok');score++;}
|
|
else{s.classList.add('ko');if(c)c.classList.add('ok');}
|
|
}
|
|
});
|
|
document.getElementById(scid).textContent=score+'/'+max;
|
|
const rb=document.getElementById(rbid);
|
|
rb.className='rbadge '+(score>=Math.ceil(max*0.67)?'rb-ok':'rb-ko');
|
|
rb.innerHTML=(score>=Math.ceil(max*0.67)?'<i class="ti ti-check" aria-hidden="true"></i>':'<i class="ti ti-x" aria-hidden="true"></i>')+' '+score+'/'+max;
|
|
updateTotal();
|
|
}
|
|
|
|
function resetEx(qids,scid,rbid){
|
|
qids.forEach(qid=>{
|
|
const g=document.getElementById(qid);
|
|
if(g)g.querySelectorAll('.opt').forEach(o=>o.classList.remove('sel','ok','ko'));
|
|
});
|
|
document.getElementById(scid).textContent='-/'+MAXS[scid];
|
|
const rb=document.getElementById(rbid);
|
|
rb.className='rbadge';rb.innerHTML='';
|
|
updateTotal();
|
|
}
|
|
|
|
function updateTotal(){
|
|
const ids=['s1','s2','s3','s4','s5','s6'];
|
|
const vals=ids.map(id=>{const t=document.getElementById(id).textContent;return t.startsWith('-')?null:parseInt(t);});
|
|
if(vals.every(v=>v!==null)){
|
|
const tot=vals.reduce((a,b)=>a+b,0);
|
|
document.getElementById('st').textContent=tot+'/16';
|
|
}
|
|
}
|
|
|
|
function togC(pid,bid){
|
|
const p=document.getElementById(pid),b=document.getElementById(bid);
|
|
const v=p.classList.contains('vis');
|
|
p.classList.toggle('vis',!v);
|
|
b.classList.toggle('rev',!v);
|
|
b.innerHTML=v?'<i class="ti ti-eye" aria-hidden="true"></i> Voir le corrigé':'<i class="ti ti-eye-off" aria-hidden="true"></i> Masquer le corrigé';
|
|
}
|
|
|
|
// Identity fields persistence
|
|
document.addEventListener('DOMContentLoaded',()=>{
|
|
const ln=document.getElementById('student-lastname');
|
|
const fn=document.getElementById('student-firstname');
|
|
const sln=localStorage.getItem('student_lastname_m5');
|
|
const sfn=localStorage.getItem('student_firstname_m5');
|
|
if(sln)ln.value=sln;
|
|
if(sfn)fn.value=sfn;
|
|
ln.addEventListener('input',()=>localStorage.setItem('student_lastname_m5',ln.value));
|
|
fn.addEventListener('input',()=>localStorage.setItem('student_firstname_m5',fn.value));
|
|
|
|
// Signature canvas
|
|
const canvas=document.getElementById('signature-pad');
|
|
const ctx=canvas.getContext('2d');
|
|
let isDrawing=false,lastX=0,lastY=0;
|
|
const ratio=Math.max(window.devicePixelRatio||1,1);
|
|
|
|
function resizeCanvas(){
|
|
const rect=canvas.getBoundingClientRect();
|
|
canvas.width=rect.width*ratio;
|
|
canvas.height=rect.height*ratio;
|
|
canvas.style.width=rect.width+'px';
|
|
canvas.style.height=rect.height+'px';
|
|
ctx.scale(ratio,ratio);
|
|
ctx.lineWidth=2;ctx.lineCap='round';ctx.strokeStyle='#0f172a';
|
|
ctx.clearRect(0,0,canvas.width,canvas.height);
|
|
}
|
|
|
|
const ro=new ResizeObserver(()=>{
|
|
resizeCanvas();
|
|
const saved=localStorage.getItem('signatureData_m5');
|
|
if(saved){const img=new Image();img.onload=()=>ctx.drawImage(img,0,0,canvas.width/ratio,canvas.height/ratio);img.src=saved;}
|
|
});
|
|
ro.observe(canvas);
|
|
resizeCanvas();
|
|
|
|
function getPos(e){
|
|
const rect=canvas.getBoundingClientRect();
|
|
const src=e.touches?e.touches[0]:e;
|
|
return[src.clientX-rect.left,src.clientY-rect.top];
|
|
}
|
|
|
|
canvas.addEventListener('mousedown',e=>{isDrawing=true;[lastX,lastY]=getPos(e);});
|
|
canvas.addEventListener('mousemove',e=>{
|
|
if(!isDrawing)return;
|
|
const[x,y]=getPos(e);
|
|
ctx.beginPath();ctx.moveTo(lastX,lastY);ctx.lineTo(x,y);ctx.stroke();
|
|
[lastX,lastY]=[x,y];
|
|
});
|
|
canvas.addEventListener('mouseup',()=>isDrawing=false);
|
|
canvas.addEventListener('mouseout',()=>isDrawing=false);
|
|
canvas.addEventListener('touchstart',e=>{e.preventDefault();isDrawing=true;[lastX,lastY]=getPos(e);},{passive:false});
|
|
canvas.addEventListener('touchmove',e=>{
|
|
e.preventDefault();
|
|
if(!isDrawing)return;
|
|
const[x,y]=getPos(e);
|
|
ctx.beginPath();ctx.moveTo(lastX,lastY);ctx.lineTo(x,y);ctx.stroke();
|
|
[lastX,lastY]=[x,y];
|
|
},{passive:false});
|
|
canvas.addEventListener('touchend',()=>isDrawing=false);
|
|
|
|
window.clearSignature=()=>{ctx.clearRect(0,0,canvas.width,canvas.height);localStorage.removeItem('signatureData_m5');};
|
|
window.saveSignature=()=>{const d=canvas.toDataURL('image/png');localStorage.setItem('signatureData_m5',d);return d;};
|
|
|
|
const saved=localStorage.getItem('signatureData_m5');
|
|
if(saved){const img=new Image();img.onload=()=>ctx.drawImage(img,0,0,canvas.width/ratio,canvas.height/ratio);img.src=saved;}
|
|
|
|
// Date de signature
|
|
const sigDate=document.getElementById('signature-date');
|
|
const savedDate=localStorage.getItem('signatureDate_m5');
|
|
if(savedDate)sigDate.value=savedDate;
|
|
sigDate.addEventListener('input',()=>localStorage.setItem('signatureDate_m5',sigDate.value));
|
|
});
|
|
|
|
// Effacer toutes les saisies
|
|
window.clearAll=function(){
|
|
if(!confirm('Effacer toutes les saisies de cette fiche ?'))return;
|
|
document.querySelectorAll('textarea').forEach(t=>t.value='');
|
|
document.querySelectorAll('.field-line').forEach(i=>i.value='');
|
|
if(typeof clearSignature==='function')clearSignature();
|
|
const sigDate=document.getElementById('signature-date');
|
|
if(sigDate)sigDate.value='';
|
|
const keys=[];
|
|
for(let i=0;i<localStorage.length;i++){
|
|
const k=localStorage.key(i);
|
|
if(k&&(k.startsWith('student_')||k.startsWith('signatureData_m5')||k.startsWith('signatureDate_m5')))keys.push(k);
|
|
}
|
|
keys.forEach(k=>localStorage.removeItem(k));
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|