);
} else if (mode === 'question') {
/* Même présentation que l'épreuve du portrait : la gravure, le rond
d'écoute posé dessous, puis les deux réponses. */
const m = bonne !== null ? mots[bonne] : null;
const sansGravure = m ? !!s.manquantes[m[0]] : true;
const choix = s.cases.length === 2 ? s.cases : [0, 1];
const libelles = m ? m[7] : ['', ''];
const longueur = Math.max(libelles[0].length, libelles[1].length);
const taille = longueur > 16 ? 21 : longueur > 10 ? 25 : 30;
jeu = (
{sansGravure ? (
⚜
) : null}
{rond(null, true)}
{choix.map(o => React.cloneElement(this.caseChoix(o, libelles[o], taille, m && o === m[8] ? m[10] : null), { key: o }))}
);
} else {
jeu = grille([this.caseChoix('vrai', 'Vrai'), this.caseChoix('faux', 'Faux')]
.map((e, k) => React.cloneElement(e, { key: k })));
}
/* ————— Le diplôme : le dernier quizz du niveau est franchi —————
La mascotte y parle avec la voix de Laurence (14 octobre), une phrase par niveau ;
tant qu'une vidéo manque, la madeleine dorée garde sa place. Fond blanc de la
vidéo fondu dans celui du diplôme (mix-blend-mode), un toucher la fait répéter. */
const dernierQuizz = this.props.quizz >= this.props.quizzParNiveau;
const diplome = fini && reussi && dernierQuizz;
const rangN = this.props.niveau;
const dernierNiveau = rangN >= NIVEAUX.length - 1;
if (diplome) {
return this.cadre(
{this.entete()}
Diplôme — niveau {rangN + 1} sur {NIVEAUX.length}
{VIDEOS_DIPLOME[rangN]
?
);
}
if (fini) {
return this.cadre(
{this.entete()}
⚜
{reussi ? 'Bravo !' : 'On y retourne'}
{s.justes} / {total}
{/* Côte à côte s'il y a la place, l'un sous l'autre sur un téléphone étroit
(« Recommencer » débordait sur le Huawei de Laurence, 5 octobre). */}
);
}
}
/* ————— Le menu : les cinq niveaux ————— */
function MenuQuizz({ onNiveau }) {
/* Chaque niveau porte la couleur de son fond de jeu. Les deux derniers
attendent le choix de l'autrice. */
const fonds = FONDS;
/* Toutes les écritures en crème : cinq boîtes, une seule encre. */
const encres = ['#F3E4C0', '#F3E4C0', '#F3E4C0', '#F3E4C0', '#F3E4C0'];
return (
{NIVEAUX.map((nom, k) => (
))}
);
}
/* ————— Le module : le menu, puis le jeu ————— */
function Quizz({ onSortir }) {
const [niveau, setNiveau] = useState(null);
const [quizz, setQuizz] = useState(1);
const parNiveau = 3;
/* La forme est la même aux cinq niveaux ; c'est le contenu qui durcit.
Un paquet par niveau : mini = les aliments, petite = l'aspect physique.
Les trois suivants attendent les mots de l'autrice. */
const paquet = PAQUETS[Math.min(niveau, PAQUETS.length - 1)];
if (niveau === null) return { setNiveau(k); setQuizz(1); }} />;
return (
setQuizz(q => (q >= parNiveau ? q : q + 1))}
onNiveauSuivant={() => { setNiveau(n => Math.min(n + 1, NIVEAUX.length - 1)); setQuizz(1); }}
onSortir={onSortir} />
);
}
/* L'accueil a besoin du titre du bandeau : on l'expose à côté du module. */
Quizz.PAQUETS = PAQUETS;
Quizz.NIVEAUX = NIVEAUX;
window.Quizz = Quizz;
window.QuizzJeu = Jeu;
window.QuizzMenu = MenuQuizz;
})();
