{"id":18522,"date":"2026-06-29T12:29:55","date_gmt":"2026-06-29T10:29:55","guid":{"rendered":"https:\/\/xenesy.com\/?page_id=18522"},"modified":"2026-06-29T12:37:22","modified_gmt":"2026-06-29T10:37:22","slug":"evaluation-1-h","status":"publish","type":"page","link":"https:\/\/xenesy.com\/zh\/evaluation-1-h\/","title":{"rendered":"Evaluation 1 H"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nBilan de Comp\u00e9tence N\u00b01 \u2014 H\u1ecdc Ti\u1ebfng Ph\u00e1p t\u1ea1i \u0110\u00e0 N\u1eb5ng<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800;900&family=Baloo+2:wght@700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n#bc-bilan{font-family:'Nunito',sans-serif!important;font-size:15px!important;line-height:1.6!important;color:#2a3f55!important;background:transparent!important;max-width:900px!important;margin:0 auto!important}\r\n#bc-bilan *{box-sizing:border-box!important;font-family:'Nunito',sans-serif!important}\r\n\r\n\/* \u2500\u2500 HEADER \u2500\u2500 *\/\r\n#bc-bilan .bc-header{background:#1e3a5f!important;padding:18px 24px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;flex-wrap:wrap!important;border-radius:14px 14px 0 0!important}\r\n#bc-bilan .bc-logo-wrap{display:flex!important;align-items:center!important;gap:14px!important}\r\n#bc-bilan .bc-logo-circle{width:64px!important;height:64px!important;border-radius:50%!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:28px!important;flex-shrink:0!important;border:2px solid #c05068!important;overflow:hidden!important;padding:0!important}\r\n#bc-bilan .bc-logo-circle img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important}\r\n#bc-bilan .bc-logo-text{color:#fff!important}\r\n#bc-bilan .bc-school{font-family:'Baloo 2',sans-serif!important;font-size:1rem!important;font-weight:800!important;color:#c05068!important;line-height:1.2!important}\r\n#bc-bilan .bc-city{font-size:0.78rem!important;font-weight:600!important;color:rgba(255,255,255,0.7)!important}\r\n#bc-bilan .bc-header-title{text-align:right!important}\r\n#bc-bilan .bc-header-title h1{font-family:'Baloo 2',sans-serif!important;font-size:1.3rem!important;font-weight:800!important;color:#fff!important;line-height:1.2!important;margin:0!important;padding:0!important;border:none!important;background:none!important}\r\n#bc-bilan .bc-num{font-size:0.75rem!important;font-weight:700!important;color:#4dacc4!important;text-transform:uppercase!important;letter-spacing:1px!important}\r\n\r\n\/* \u2500\u2500 PARIS BANNER \u2500\u2500 *\/\r\n#bc-bilan .bc-paris{background:linear-gradient(135deg,#1e3a5f 0%,#2d5a8e 60%,#1e3a5f 100%)!important;padding:10px 24px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;font-size:0.82rem!important;color:rgba(255,255,255,0.75)!important;font-weight:600!important}\r\n#bc-bilan .bc-paris span{font-size:1.1rem!important}\r\n\r\n\/* \u2500\u2500 MAIN \u2500\u2500 *\/\r\n#bc-bilan .bc-main{padding:24px 16px 48px!important}\r\n\r\n\/* \u2500\u2500 SECTION TITLE \u2500\u2500 *\/\r\n#bc-bilan .bc-section{margin-bottom:26px!important}\r\n#bc-bilan .bc-section-title{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:14px!important}\r\n#bc-bilan .bc-section-icon{width:38px!important;height:38px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:18px!important;flex-shrink:0!important;border:2px solid!important}\r\n#bc-bilan .bc-section-icon.coral{background:#fde8ec!important;border-color:#c05068!important}\r\n#bc-bilan .bc-section-icon.teal{background:#eef8fb!important;border-color:#4dacc4!important}\r\n#bc-bilan .bc-section-icon.navy{background:#eef1f5!important;border-color:#1e3a5f!important}\r\n#bc-bilan .bc-section-icon.gold{background:#fff7f0!important;border-color:#d07a35!important}\r\n#bc-bilan .bc-section-icon.green{background:#f0f8f0!important;border-color:#7ab87d!important}\r\n#bc-bilan .bc-section-h{flex:1!important}\r\n#bc-bilan .bc-section-h h2{font-family:'Baloo 2',sans-serif!important;font-size:1rem!important;font-weight:800!important;color:#1e3a5f!important;line-height:1.2!important;margin:0!important;padding:0!important;border:none!important;background:none!important}\r\n#bc-bilan .bc-section-h p{font-size:0.75rem!important;color:#7a8fa0!important;font-style:italic!important;margin-top:1px!important}\r\n\r\n\/* \u2500\u2500 EXERCISE CARD \u2500\u2500 *\/\r\n#bc-bilan .bc-excard{background:#fff!important;border-radius:12px!important;border:1px solid #ddeef3!important;margin-bottom:14px!important;overflow:hidden!important}\r\n#bc-bilan .bc-excard-head{padding:10px 16px!important;display:flex!important;align-items:center!important;gap:8px!important;border-bottom:1px solid #ddeef3!important;background:#fff!important}\r\n#bc-bilan .bc-exnum{width:24px!important;height:24px!important;border-radius:50%!important;background:#1e3a5f!important;color:#fff!important;font-size:0.7rem!important;font-weight:800!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}\r\n#bc-bilan .bc-excard-head h3{font-size:0.82rem!important;font-weight:800!important;color:#1e3a5f!important;flex:1!important;margin:0!important;padding:0!important;border:none!important;background:none!important}\r\n#bc-bilan .bc-tag{font-size:0.62rem!important;font-weight:700!important;padding:2px 8px!important;border-radius:10px!important;background:#eef8fb!important;color:#4dacc4!important;white-space:nowrap!important}\r\n#bc-bilan .bc-excard-body{padding:14px 16px!important;background:#fff!important}\r\n#bc-bilan .bc-instr{font-size:0.78rem!important;color:#7a8fa0!important;font-style:italic!important;margin-bottom:12px!important;line-height:1.5!important}\r\n#bc-bilan .bc-instr strong{color:#1e3a5f!important;font-style:normal!important}\r\n\r\n\/* \u2500\u2500 MATCH \u2500\u2500 *\/\r\n#bc-bilan .bc-match-wrap{display:flex!important;gap:12px!important;flex-wrap:wrap!important}\r\n#bc-bilan .bc-match-col{display:flex!important;flex-direction:column!important;gap:7px!important;flex:1!important;min-width:140px!important}\r\n#bc-bilan .bc-match-lbl{font-size:0.65rem!important;font-weight:800!important;text-transform:uppercase!important;color:#7a8fa0!important;margin-bottom:3px!important}\r\n#bc-bilan .bc-match-item{background:#eef8fb!important;border:1.5px solid #ddeef3!important;border-radius:8px!important;padding:8px 12px!important;font-size:0.85rem!important;font-weight:700!important;color:#1e3a5f!important;cursor:grab!important;user-select:none!important;transition:all 0.15s!important}\r\n#bc-bilan .bc-match-item:hover{border-color:#4dacc4!important;background:#e0f2f7!important}\r\n#bc-bilan .bc-match-drop{border:1.5px dashed #ddeef3!important;background:#fafbfc!important;border-radius:8px!important;padding:8px 12px!important;min-height:38px!important;font-size:0.85rem!important;font-weight:700!important;color:#1e3a5f!important;display:flex!important;align-items:center!important;transition:all 0.15s!important}\r\n#bc-bilan .bc-match-drop.dover{border-color:#4dacc4!important;background:#eef8fb!important}\r\n#bc-bilan .bc-match-drop.correct{border-color:#7ab87d!important;background:#f0f8f0!important;border-style:solid!important;color:#2d6e30!important}\r\n#bc-bilan .bc-match-drop.wrong{border-color:#c05068!important;background:#fde8ec!important;border-style:solid!important;color:#c05068!important}\r\n#bc-bilan .bc-match-drop-lbl{font-size:0.78rem!important;color:#aaa!important;font-weight:500!important}\r\n\r\n\/* \u2500\u2500 FORM \u2500\u2500 *\/\r\n#bc-bilan .bc-form-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}\r\n#bc-bilan .bc-form-row{display:flex!important;flex-direction:column!important;gap:4px!important}\r\n#bc-bilan .bc-form-row label{font-size:0.72rem!important;font-weight:800!important;color:#4dacc4!important;text-transform:uppercase!important;letter-spacing:0.5px!important}\r\n#bc-bilan .bc-form-row input,#bc-bilan .bc-form-row select{border:1.5px solid #ddeef3!important;border-radius:8px!important;padding:7px 11px!important;font-family:'Nunito',sans-serif!important;font-size:0.88rem!important;font-weight:700!important;color:#1e3a5f!important;background:#fff!important;outline:none!important;transition:border 0.15s!important;width:100%!important}\r\n#bc-bilan .bc-form-row input:focus,#bc-bilan .bc-form-row select:focus{border-color:#4dacc4!important}\r\n#bc-bilan .bc-form-row input.correct,#bc-bilan .bc-form-row select.correct{border-color:#7ab87d!important;background:#f0f8f0!important;color:#2d6e30!important}\r\n#bc-bilan .bc-form-row input.wrong,#bc-bilan .bc-form-row select.wrong{border-color:#c05068!important;background:#fde8ec!important;color:#c05068!important}\r\n\r\n\/* \u2500\u2500 CLICK CHOICE \u2500\u2500 *\/\r\n#bc-bilan .bc-choice-q{font-size:0.9rem!important;font-weight:700!important;color:#1e3a5f!important;margin-bottom:8px!important;line-height:1.5!important}\r\n#bc-bilan .bc-choices{display:flex!important;flex-wrap:wrap!important;gap:7px!important;margin-bottom:14px!important}\r\n#bc-bilan .bc-choice-btn{border:1.5px solid #ddeef3!important;border-radius:8px!important;padding:7px 14px!important;font-family:'Nunito',sans-serif!important;font-size:0.85rem!important;font-weight:700!important;color:#1e3a5f!important;background:#fff!important;cursor:pointer!important;transition:all 0.15s!important;text-transform:none!important;letter-spacing:normal!important;line-height:normal!important}\r\n#bc-bilan .bc-choice-btn:hover{border-color:#4dacc4!important;background:#eef8fb!important}\r\n#bc-bilan .bc-choice-btn.correct{border-color:#7ab87d!important;background:#f0f8f0!important;color:#2d6e30!important}\r\n#bc-bilan .bc-choice-btn.wrong{border-color:#c05068!important;background:#fde8ec!important;color:#c05068!important}\r\n#bc-bilan .bc-choice-btn:disabled{cursor:not-allowed!important}\r\n\r\n\/* \u2500\u2500 TYPE INPUT \u2500\u2500 *\/\r\n#bc-bilan .bc-type-row{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:8px!important;flex-wrap:wrap!important}\r\n#bc-bilan .bc-type-lbl{font-size:0.88rem!important;font-weight:800!important;color:#1e3a5f!important;min-width:150px!important}\r\n#bc-bilan .bc-type-input{border:1.5px solid #ddeef3!important;border-radius:8px!important;padding:7px 11px!important;font-family:'Nunito',sans-serif!important;font-size:0.88rem!important;font-weight:700!important;color:#1e3a5f!important;flex:1!important;outline:none!important;min-width:100px!important;background:#fff!important;transition:border 0.15s!important}\r\n#bc-bilan .bc-type-input:focus{border-color:#4dacc4!important}\r\n#bc-bilan .bc-type-input.correct{border-color:#7ab87d!important;background:#f0f8f0!important;color:#2d6e30!important}\r\n#bc-bilan .bc-type-input.wrong{border-color:#c05068!important;background:#fde8ec!important;color:#c05068!important}\r\n#bc-bilan .bc-type-hint{font-size:0.72rem!important;color:#aaa!important;font-style:italic!important}\r\n\r\n\/* \u2500\u2500 SENTENCE \u2500\u2500 *\/\r\n#bc-bilan .bc-sentence{font-size:1rem!important;font-weight:700!important;color:#1e3a5f!important;line-height:2.4!important;margin-bottom:10px!important}\r\n#bc-bilan .bc-blank-sel{border:none!important;border-bottom:2px solid #c05068!important;background:transparent!important;font-family:'Nunito',sans-serif!important;font-size:0.95rem!important;font-weight:800!important;color:#c05068!important;padding:0 4px!important;cursor:pointer!important;outline:none!important;min-width:70px!important}\r\n#bc-bilan .bc-blank-sel.correct{border-bottom-color:#7ab87d!important;color:#2d6e30!important}\r\n#bc-bilan .bc-blank-sel.wrong{border-bottom-color:#c05068!important;color:#c05068!important}\r\n\r\n\/* \u2500\u2500 NATION TABLE \u2500\u2500 *\/\r\n#bc-bilan .bc-ntable{width:100%!important;border-collapse:collapse!important;font-size:0.85rem!important}\r\n#bc-bilan .bc-ntable thead th{background:#1e3a5f!important;color:#fff!important;padding:8px 10px!important;text-align:left!important;font-weight:800!important;font-size:0.75rem!important;border:none!important}\r\n#bc-bilan .bc-ntable tbody td{padding:7px 10px!important;border-bottom:1px solid #ddeef3!important;vertical-align:middle!important;color:#1e3a5f!important;background:transparent!important}\r\n#bc-bilan .bc-ntable tbody tr:last-child td{border-bottom:none!important}\r\n#bc-bilan .bc-ntable tbody tr:nth-child(even) td{background:#eef8fb!important}\r\n#bc-bilan .bc-ntable .tn-pays{font-weight:800!important;color:#1e3a5f!important}\r\n#bc-bilan .bc-ntable .tn-masc{font-weight:800!important;color:#4dacc4!important}\r\n#bc-bilan .bc-ntable input.tn-input{border:none!important;border-bottom:1.5px solid #ddeef3!important;background:transparent!important;font-family:'Nunito',sans-serif!important;font-size:0.85rem!important;font-weight:700!important;color:#1e3a5f!important;width:120px!important;padding:2px 4px!important;outline:none!important;transition:border 0.15s!important}\r\n#bc-bilan .bc-ntable input.tn-input:focus{border-bottom-color:#4dacc4!important}\r\n#bc-bilan .bc-ntable input.tn-input.correct{border-bottom-color:#7ab87d!important;color:#2d6e30!important}\r\n#bc-bilan .bc-ntable input.tn-input.wrong{border-bottom-color:#c05068!important;color:#c05068!important}\r\n\r\n\/* \u2500\u2500 PRONOM GAME \u2500\u2500 *\/\r\n#bc-bilan .bc-pron-row{background:#eef8fb!important;border:1px solid #ddeef3!important;border-radius:8px!important;padding:12px 14px!important;margin-bottom:8px!important}\r\n#bc-bilan .bc-pron-q{font-size:0.88rem!important;font-weight:700!important;color:#1e3a5f!important;margin-bottom:8px!important}\r\n#bc-bilan .bc-pron-btns{display:flex!important;flex-wrap:wrap!important;gap:6px!important}\r\n#bc-bilan .bc-pron-btn{border:1.5px solid #ddeef3!important;border-radius:8px!important;padding:5px 14px!important;font-family:'Nunito',sans-serif!important;font-size:0.85rem!important;font-weight:700!important;color:#1e3a5f!important;background:#fff!important;cursor:pointer!important;transition:all 0.15s!important;text-transform:none!important;letter-spacing:normal!important;line-height:normal!important}\r\n#bc-bilan .bc-pron-btn:hover{border-color:#4dacc4!important;background:#eef8fb!important}\r\n#bc-bilan .bc-pron-btn.correct{border-color:#7ab87d!important;background:#f0f8f0!important;color:#2d6e30!important;cursor:not-allowed!important}\r\n#bc-bilan .bc-pron-btn.wrong{border-color:#c05068!important;background:#fde8ec!important;color:#c05068!important;cursor:not-allowed!important}\r\n\r\n\/* \u2500\u2500 BUTTONS \u2500\u2500 *\/\r\n#bc-bilan .bc-btn{border:none!important;border-radius:9px!important;padding:9px 20px!important;font-family:'Nunito',sans-serif!important;font-size:0.85rem!important;font-weight:800!important;cursor:pointer!important;transition:all 0.15s!important;text-transform:none!important;letter-spacing:normal!important;line-height:normal!important;display:inline-block!important}\r\n#bc-bilan .bc-btn-navy{background:#1e3a5f!important;color:#fff!important}\r\n#bc-bilan .bc-btn-navy:hover{background:#16304f!important;color:#fff!important}\r\n#bc-bilan .bc-btn-teal{background:#4dacc4!important;color:#fff!important}\r\n#bc-bilan .bc-btn-teal:hover{opacity:0.9!important;color:#fff!important}\r\n#bc-bilan .bc-btn-out{background:transparent!important;border:1.5px solid #ddeef3!important;color:#7a8fa0!important}\r\n#bc-bilan .bc-btn-out:hover{border-color:#1e3a5f!important;color:#1e3a5f!important;background:transparent!important}\r\n#bc-bilan .bc-checkrow{display:flex!important;gap:8px!important;margin-top:12px!important;flex-wrap:wrap!important;align-items:center!important}\r\n#bc-bilan .bc-result{font-size:0.82rem!important;font-weight:700!important}\r\n\r\n\/* \u2500\u2500 SCORE CARD \u2500\u2500 *\/\r\n#bc-bilan .bc-score-section{background:#fff!important;border-radius:14px!important;border:2px solid #ddeef3!important;padding:22px!important;margin-top:28px!important;display:none!important}\r\n#bc-bilan .bc-score-section.show{display:block!important}\r\n#bc-bilan .bc-score-top{display:flex!important;align-items:center!important;gap:16px!important;margin-bottom:18px!important;flex-wrap:wrap!important}\r\n#bc-bilan .bc-score-big{font-family:'Baloo 2',sans-serif!important;font-size:3.5rem!important;font-weight:800!important;color:#c05068!important;line-height:1!important}\r\n#bc-bilan .bc-score-label{font-size:0.8rem!important;color:#7a8fa0!important;font-weight:600!important}\r\n#bc-bilan .bc-score-msg{font-size:1.1rem!important;font-weight:800!important;color:#1e3a5f!important}\r\n#bc-bilan .bc-competences-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:14px!important}\r\n#bc-bilan .bc-comp-item{display:flex!important;align-items:center!important;gap:8px!important;background:#eef8fb!important;border-radius:8px!important;padding:8px 11px!important;font-size:0.8rem!important;font-weight:700!important;color:#1e3a5f!important}\r\n#bc-bilan .bc-comp-dot{width:22px!important;height:22px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:0.8rem!important;flex-shrink:0!important}\r\n#bc-bilan .bc-comp-dot.ok{background:#f0f8f0!important;border:2px solid #7ab87d!important}\r\n#bc-bilan .bc-comp-dot.ko{background:#fde8ec!important;border:2px solid #c05068!important}\r\n\r\n\/* \u2500\u2500 HEARTS \u2500\u2500 *\/\r\n#bc-bilan .bc-hearts{font-size:0.85rem!important;color:#c05068!important;margin-left:6px!important}\r\n\r\n@media(max-width:520px){\r\n #bc-bilan .bc-form-grid{grid-template-columns:1fr!important}\r\n #bc-bilan .bc-competences-grid{grid-template-columns:1fr!important}\r\n #bc-bilan .bc-match-wrap{flex-direction:column!important}\r\n #bc-bilan .bc-header-title h1{font-size:1rem!important}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"bc-bilan\">\r\n\r\n<!-- HEADER -->\r\n<header class=\"bc-header\">\r\n <div class=\"bc-logo-wrap\">\r\n <div class=\"bc-logo-circle\">\r\n <img decoding=\"async\" src=\"https:\/\/xenesy.com\/wp-content\/uploads\/2026\/06\/logo.jpg\" alt=\"\u6807\u5fd7\" onerror=\"this.style.display='none';this.parentNode.textContent='\ud83d\uddfc'\">\r\n <\/div>\r\n <div class=\"bc-logo-text\">\r\n <div class=\"bc-school\">H\u1ecdc Ti\u1ebfng Ph\u00e1p<\/div>\r\n <div class=\"bc-city\">t\u1ea1i \u0110\u00e0 N\u1eb5ng  \u00b7  Parlez fran\u00e7ais !<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bc-header-title\">\r\n <div class=\"bc-num\">\u00c9valuation \u00b7 Assessment<\/div>\r\n <h1>Bilan de Comp\u00e9tence N\u00b01 \ud83d\udc99<\/h1>\r\n <\/div>\r\n<\/header>\r\n<div class=\"bc-paris\">\r\n <span>\ud83d\uddfc<\/span> Unit\u00e9 1 \u2014 Saluer \u00b7 Se pr\u00e9senter \u00b7 Les nationalit\u00e9s \u00b7 La grammaire\r\n <span>\ud83d\udc99<\/span>\r\n<\/div>\r\n\r\n<main class=\"bc-main\">\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 1 \u2014 COMMUNIQUER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"bc-section\">\r\n <div class=\"bc-section-title\">\r\n <div class=\"bc-section-icon coral\">\ud83d\udcac<\/div>\r\n <div class=\"bc-section-h\">\r\n <h2>1. Communiquer <span class=\"bc-hearts\">\u2665<\/span><\/h2>\r\n <p>Saluer \u00b7 Prendre cong\u00e9 \u00b7 Politesse \/ Greet \u00b7 Say goodbye \u00b7 Be polite<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 1 \u2014 Match salutations -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">1<\/div>\r\n <h3>Associe chaque salutation \u00e0 sa signification<\/h3>\r\n <div class=\"bc-tag\">Match the greeting<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> Fais glisser chaque mot fran\u00e7ais vers sa traduction anglaise. <br><strong>EN :<\/strong> Drag each French word to its English meaning.<\/p>\r\n <div class=\"bc-match-wrap\">\r\n <div class=\"bc-match-col\">\r\n <div class=\"bc-match-lbl\">Fran\u00e7ais \ud83c\uddeb\ud83c\uddf7 \u2014 glisse \/ drag<\/div>\r\n <div id=\"bc-drag-src\"><\/div>\r\n <\/div>\r\n <div class=\"bc-match-col\">\r\n <div class=\"bc-match-lbl\">English \ud83c\uddec\ud83c\udde7 \u2014 d\u00e9pose \/ drop<\/div>\r\n <div id=\"bc-drag-tgt\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bc-checkrow\">\r\n <button class=\"bc-btn bc-btn-teal\" onclick=\"bcCheckMatch()\">\u2714 V\u00e9rifier \/ Check<\/button>\r\n <button class=\"bc-btn bc-btn-out\" onclick=\"bcBuildMatch()\">\u21ba Recommencer \/ Reset<\/button>\r\n <span class=\"bc-result\" id=\"bc-match-result\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 2 \u2014 Politesse click -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">2<\/div>\r\n <h3>Choisis la bonne r\u00e9ponse<\/h3>\r\n <div class=\"bc-tag\">Choose the answer<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> Clique sur la bonne r\u00e9ponse pour chaque situation. <br><strong>EN :<\/strong> Click the correct answer for each situation.<\/p>\r\n <div id=\"bc-politesse-game\"><\/div>\r\n <div class=\"bc-checkrow\"><button class=\"bc-btn bc-btn-out\" onclick=\"bcPolitesseGame()\">\u21ba Nouveau jeu \/ New game<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 2 \u2014 SE PR\u00c9SENTER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"bc-section\">\r\n <div class=\"bc-section-title\">\r\n <div class=\"bc-section-icon teal\">\ud83d\ude4b<\/div>\r\n <div class=\"bc-section-h\">\r\n <h2>2. Se pr\u00e9senter <span class=\"bc-hearts\">\u2665<\/span><\/h2>\r\n <p>Pr\u00e9nom \u00b7 \u00c2ge \u00b7 Nationalit\u00e9 \u00b7 Ville \u00b7 Pays \/ Introduce yourself<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 3 \u2014 Remplir formulaire -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">3<\/div>\r\n <h3>Remplis ta carte d'identit\u00e9<\/h3>\r\n <div class=\"bc-tag\">Fill in your ID card<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> Remplis le formulaire avec tes informations en fran\u00e7ais. <br><strong>EN :<\/strong> Fill in the form with your information in French.<\/p>\r\n <div class=\"bc-form-grid\">\r\n <div class=\"bc-form-row\">\r\n <label>Pr\u00e9nom \/ First name<\/label>\r\n <input id=\"f-prenom\" type=\"text\" placeholder=\"Je m'appelle\u2026\">\r\n <\/div>\r\n <div class=\"bc-form-row\">\r\n <label>\u00c2ge \/ Age<\/label>\r\n <input id=\"f-age\" type=\"text\" placeholder=\"J'ai \u2026 ans\">\r\n <\/div>\r\n <div class=\"bc-form-row\">\r\n <label>Nationalit\u00e9 \/ Nationality<\/label>\r\n <input id=\"f-nat\" type=\"text\" placeholder=\"Je suis\u2026\">\r\n <\/div>\r\n <div class=\"bc-form-row\">\r\n <label>Ville \/ City<\/label>\r\n <input id=\"f-ville\" type=\"text\" placeholder=\"J'habite \u00e0\u2026\">\r\n <\/div>\r\n <div class=\"bc-form-row\">\r\n <label>Pays \/ Country<\/label>\r\n <input id=\"f-pays\" type=\"text\" placeholder=\"\u2026 au\/en\u2026\">\r\n <\/div>\r\n <div class=\"bc-form-row\">\r\n <label>Langues \/ Languages<\/label>\r\n <input id=\"f-langues\" type=\"text\" placeholder=\"Je parle\u2026\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"bc-checkrow\">\r\n <button class=\"bc-btn bc-btn-teal\" onclick=\"bcCheckForm()\">\u2714 V\u00e9rifier \/ Check<\/button>\r\n <button class=\"bc-btn bc-btn-out\" onclick=\"bcResetForm()\">\u21ba Effacer \/ Clear<\/button>\r\n <span class=\"bc-result\" id=\"bc-form-result\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 4 \u2014 Demander infos -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">4<\/div>\r\n <h3>Quelle question poser ?<\/h3>\r\n <div class=\"bc-tag\">Which question to ask?<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> Choisis la bonne question pour chaque r\u00e9ponse. <br><strong>EN :<\/strong> Pick the right question for each answer.<\/p>\r\n <div id=\"bc-question-game\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 3 \u2014 VOCABULAIRE\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"bc-section\">\r\n <div class=\"bc-section-title\">\r\n <div class=\"bc-section-icon navy\">\ud83c\udf0d<\/div>\r\n <div class=\"bc-section-h\">\r\n <h2>3. Pays, Nationalit\u00e9s & Langues <span class=\"bc-hearts\">\u2665<\/span><\/h2>\r\n <p>Reconna\u00eetre les pays \u00b7 Nationalit\u00e9s masc.\/f\u00e9m. \u00b7 Langues parl\u00e9es<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 5 \u2014 Tableau nationalit\u00e9s f\u00e9minin -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">5<\/div>\r\n <h3>Compl\u00e8te le tableau des nationalit\u00e9s<\/h3>\r\n <div class=\"bc-tag\">Complete the nationality table<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> \u00c9cris la nationalit\u00e9 au f\u00e9minin pour chaque pays. <br><strong>EN :<\/strong> Write the feminine form of each nationality.<\/p>\r\n <table class=\"bc-ntable\">\r\n <thead><tr><th>Pays \/ Country<\/th><th>\ud83e\uddd2 Gar\u00e7on \/ Boy<\/th><th>\ud83d\udc67 Fille \/ Girl \u2014 \u00e9cris ici \/ type here<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td class=\"tn-pays\">France \ud83c\uddeb\ud83c\uddf7<\/td><td class=\"tn-masc\">fran\u00e7ais<\/td><td><input class=\"tn-input\" data-ans=\"fran\u00e7aise\" placeholder=\"\u2026\u2026\u2026\u2026\u2026\u2026\"><\/td><\/tr>\r\n <tr><td class=\"tn-pays\">Canada \ud83c\udde8\ud83c\udde6<\/td><td class=\"tn-masc\">canadien<\/td><td><input class=\"tn-input\" data-ans=\"canadienne\" placeholder=\"\u2026\u2026\u2026\u2026\u2026\u2026\"><\/td><\/tr>\r\n <tr><td class=\"tn-pays\">Vietnam \ud83c\uddfb\ud83c\uddf3<\/td><td class=\"tn-masc\">vietnamien<\/td><td><input class=\"tn-input\" data-ans=\"vietnamienne\" placeholder=\"\u2026\u2026\u2026\u2026\u2026\u2026\"><\/td><\/tr>\r\n <tr><td class=\"tn-pays\">Angleterre \ud83c\uddec\ud83c\udde7<\/td><td class=\"tn-masc\">anglais<\/td><td><input class=\"tn-input\" data-ans=\"anglaise\" placeholder=\"\u2026\u2026\u2026\u2026\u2026\u2026\"><\/td><\/tr>\r\n <tr><td class=\"tn-pays\">Espagne \ud83c\uddea\ud83c\uddf8<\/td><td class=\"tn-masc\">espagnol<\/td><td><input class=\"tn-input\" data-ans=\"espagnole\" placeholder=\"\u2026\u2026\u2026\u2026\u2026\u2026\"><\/td><\/tr>\r\n <tr><td class=\"tn-pays\">Cor\u00e9e \ud83c\uddf0\ud83c\uddf7<\/td><td class=\"tn-masc\">cor\u00e9en<\/td><td><input class=\"tn-input\" data-ans=\"cor\u00e9enne\" placeholder=\"\u2026\u2026\u2026\u2026\u2026\u2026\"><\/td><\/tr>\r\n <tr><td class=\"tn-pays\">Russie \ud83c\uddf7\ud83c\uddfa<\/td><td class=\"tn-masc\">russe<\/td><td><input class=\"tn-input\" data-ans=\"russe\" placeholder=\"\u2026\u2026\u2026\u2026\u2026\u2026\"><\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <div class=\"bc-checkrow\">\r\n <button class=\"bc-btn bc-btn-teal\" onclick=\"bcCheckNat()\">\u2714 V\u00e9rifier \/ Check<\/button>\r\n <button class=\"bc-btn bc-btn-out\" onclick=\"bcResetNat()\">\u21ba Recommencer \/ Reset<\/button>\r\n <span class=\"bc-result\" id=\"bc-nat-result\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 6 \u2014 Langues click -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">6<\/div>\r\n <h3>Parles-tu\u2026 ? Choisis la bonne r\u00e9ponse<\/h3>\r\n <div class=\"bc-tag\">Do you speak\u2026? Click!<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> Clique sur la bonne phrase fran\u00e7aise. <br><strong>EN :<\/strong> Click the correct French sentence.<\/p>\r\n <div id=\"bc-langue-game\"><\/div>\r\n <div class=\"bc-checkrow\"><button class=\"bc-btn bc-btn-out\" onclick=\"bcLangueGame()\">\u21ba Nouveau jeu \/ New game<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 4 \u2014 GRAMMAIRE\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"bc-section\">\r\n <div class=\"bc-section-title\">\r\n <div class=\"bc-section-icon gold\">\ud83d\udcd0<\/div>\r\n <div class=\"bc-section-h\">\r\n <h2>4. Grammaire simple <span class=\"bc-hearts\">\u2665<\/span><\/h2>\r\n <p>Tu\/Vous \u00b7 Il\/Elle\/Ils\/Elles \/ Simple grammar<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 7 \u2014 Tu ou Vous -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">7<\/div>\r\n <h3>Tu ou Vous ?<\/h3>\r\n <div class=\"bc-tag\">TU or VOUS?<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> Compl\u00e8te chaque phrase avec TU ou VOUS. <br><strong>EN :<\/strong> Fill in each sentence with TU or VOUS.<\/p>\r\n <div id=\"bc-tuv-rows\">\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\">Ton ami Lucas \u2192<\/span><input class=\"bc-type-input\" data-ans=\"tu\" placeholder=\"tu \/ vous\"><span class=\"bc-type-hint\">(your friend)<\/span><\/div>\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\">Ton professeur \u2192<\/span><input class=\"bc-type-input\" data-ans=\"vous\" placeholder=\"tu \/ vous\"><span class=\"bc-type-hint\">(your teacher)<\/span><\/div>\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\">Ta maman \u2192<\/span><input class=\"bc-type-input\" data-ans=\"tu\" placeholder=\"tu \/ vous\"><span class=\"bc-type-hint\">(your mom)<\/span><\/div>\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\">Un adulte inconnu \u2192<\/span><input class=\"bc-type-input\" data-ans=\"vous\" placeholder=\"tu \/ vous\"><span class=\"bc-type-hint\">(unknown adult)<\/span><\/div>\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\">Ton camarade \u2192<\/span><input class=\"bc-type-input\" data-ans=\"tu\" placeholder=\"tu \/ vous\"><span class=\"bc-type-hint\">(your classmate)<\/span><\/div>\r\n <\/div>\r\n <div class=\"bc-checkrow\">\r\n <button class=\"bc-btn bc-btn-teal\" onclick=\"bcCheckTuV()\">\u2714 V\u00e9rifier \/ Check<\/button>\r\n <button class=\"bc-btn bc-btn-out\" onclick=\"bcResetTuV()\">\u21ba Recommencer \/ Reset<\/button>\r\n <span class=\"bc-result\" id=\"bc-tuv-result\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 8 \u2014 Pronoms il\/elle\/ils\/elles -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">8<\/div>\r\n <h3>Il, Elle, Ils ou Elles ?<\/h3>\r\n <div class=\"bc-tag\">Choose the pronoun<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> Clique sur le bon pronom pour chaque phrase. <br><strong>EN :<\/strong> Click the right pronoun for each sentence.<\/p>\r\n <div id=\"bc-pron-game\"><\/div>\r\n <div class=\"bc-checkrow\"><button class=\"bc-btn bc-btn-out\" onclick=\"bcPronGame()\">\u21ba Nouveau jeu \/ New game<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 9 \u2014 Phrases compl\u00e8tes -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">9<\/div>\r\n <h3>Compl\u00e8te les phrases<\/h3>\r\n <div class=\"bc-tag\">Complete the sentences<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> Choisis le bon mot dans chaque menu d\u00e9roulant. <br><strong>EN :<\/strong> Choose the correct word from each dropdown.<\/p>\r\n <p class=\"bc-sentence\" id=\"bc-sent1\">Je ______ Emma. J'______ 10 ans. Je ______ fran\u00e7aise.<\/p>\r\n <div style=\"margin-bottom:14px\">\r\n <select class=\"bc-blank-sel\" id=\"s1\" data-ans=\"m'appelle\"><option value=\"\">\u2026<\/option><option>m'appelle<\/option><option>suis<\/option><option>parle<\/option><\/select>\r\n  Emma. \r\n J'<select class=\"bc-blank-sel\" id=\"s2\" data-ans=\"ai\"><option value=\"\">\u2026<\/option><option>ai<\/option><option>suis<\/option><option>habite<\/option><\/select>\r\n  10 ans. \r\n Je <select class=\"bc-blank-sel\" id=\"s3\" data-ans=\"suis\"><option value=\"\">\u2026<\/option><option>m'appelle<\/option><option>ai<\/option><option>suis<\/option><\/select>\r\n  fran\u00e7aise.\r\n <\/div>\r\n <p class=\"bc-sentence\">J'______ \u00e0 Da Nang ______ Vietnam. Je ______ fran\u00e7ais et un peu anglais.<\/p>\r\n <div style=\"margin-bottom:8px\">\r\n J'<select class=\"bc-blank-sel\" id=\"s4\" data-ans=\"habite\"><option value=\"\">\u2026<\/option><option>habite<\/option><option>suis<\/option><option>ai<\/option><\/select>\r\n  \u00e0 Da Nang \r\n <select class=\"bc-blank-sel\" id=\"s5\" data-ans=\"au\"><option value=\"\">\u2026<\/option><option>au<\/option><option>\u4e8e<\/option><option>\u00e0<\/option><\/select>\r\n  Vietnam. Je \r\n <select class=\"bc-blank-sel\" id=\"s6\" data-ans=\"parle\"><option value=\"\">\u2026<\/option><option>parle<\/option><option>suis<\/option><option>ai<\/option><\/select>\r\n  fran\u00e7ais et un peu anglais.\r\n <\/div>\r\n <div class=\"bc-checkrow\">\r\n <button class=\"bc-btn bc-btn-teal\" onclick=\"bcCheckSents()\">\u2714 V\u00e9rifier \/ Check<\/button>\r\n <button class=\"bc-btn bc-btn-out\" onclick=\"bcResetSents()\">\u21ba Recommencer \/ Reset<\/button>\r\n <span class=\"bc-result\" id=\"bc-sent-result\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 5 \u2014 CHIFFRES & PAYS\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"bc-section\">\r\n <div class=\"bc-section-title\">\r\n <div class=\"bc-section-icon green\" style=\"background:#f0f8f0;border-color:#7ab87d\">\ud83d\udd22<\/div>\r\n <div class=\"bc-section-h\">\r\n <h2>5. Les chiffres & les pays <span class=\"bc-hearts\">\u2665<\/span><\/h2>\r\n <p>Compter de 0 \u00e0 10 \u00b7 Reconna\u00eetre les pays \/ Numbers & countries<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 10 \u2014 Chiffres 0-10 -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">10<\/div>\r\n <h3>\u00c9cris le chiffre en lettres<\/h3>\r\n <div class=\"bc-tag\">Write the number in French<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> \u00c9cris chaque chiffre en fran\u00e7ais. <br><strong>EN :<\/strong> Write each number in French.<\/p>\r\n <div id=\"bc-chiffres-rows\">\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\" style=\"font-size:1.6rem;font-weight:900;color:#7ab87d;min-width:60px\">3<\/span><input class=\"bc-type-input\" data-ans=\"trois\" placeholder=\"\u2026\"><span class=\"bc-type-hint\">trois ?<\/span><\/div>\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\" style=\"font-size:1.6rem;font-weight:900;color:#7ab87d;min-width:60px\">7<\/span><input class=\"bc-type-input\" data-ans=\"sept\" placeholder=\"\u2026\"><span class=\"bc-type-hint\">sept ?<\/span><\/div>\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\" style=\"font-size:1.6rem;font-weight:900;color:#7ab87d;min-width:60px\">0<\/span><input class=\"bc-type-input\" data-ans=\"z\u00e9ro\" placeholder=\"\u2026\"><span class=\"bc-type-hint\">z\u00e9ro ?<\/span><\/div>\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\" style=\"font-size:1.6rem;font-weight:900;color:#7ab87d;min-width:60px\">5<\/span><input class=\"bc-type-input\" data-ans=\"cinq\" placeholder=\"\u2026\"><span class=\"bc-type-hint\">cinq ?<\/span><\/div>\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\" style=\"font-size:1.6rem;font-weight:900;color:#7ab87d;min-width:60px\">9<\/span><input class=\"bc-type-input\" data-ans=\"neuf\" placeholder=\"\u2026\"><span class=\"bc-type-hint\">neuf ?<\/span><\/div>\r\n <div class=\"bc-type-row\"><span class=\"bc-type-lbl\" style=\"font-size:1.6rem;font-weight:900;color:#7ab87d;min-width:60px\">10<\/span><input class=\"bc-type-input\" data-ans=\"dix\" placeholder=\"\u2026\"><span class=\"bc-type-hint\">dix ?<\/span><\/div>\r\n <\/div>\r\n <div class=\"bc-checkrow\">\r\n <button class=\"bc-btn bc-btn-teal\" onclick=\"bcCheckChiffres()\">\u2714 V\u00e9rifier \/ Check<\/button>\r\n <button class=\"bc-btn bc-btn-out\" onclick=\"bcResetChiffres()\">\u21ba Recommencer \/ Reset<\/button>\r\n <span class=\"bc-result\" id=\"bc-chiffres-result\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 11 \u2014 Pays \u2192 nationalit\u00e9 clic -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">11<\/div>\r\n <h3>Quel pays correspond ?<\/h3>\r\n <div class=\"bc-tag\">Match the country<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> Clique sur le bon pays pour chaque nationalit\u00e9. <br><strong>EN :<\/strong> Click the correct country for each nationality.<\/p>\r\n <div id=\"bc-pays-game\"><\/div>\r\n <div class=\"bc-checkrow\"><button class=\"bc-btn bc-btn-out\" onclick=\"bcPaysGame()\">\u21ba Nouveau jeu \/ New game<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EX 12 \u2014 Demander infos \u00e0 quelqu'un -->\r\n <div class=\"bc-excard\">\r\n <div class=\"bc-excard-head\">\r\n <div class=\"bc-exnum\">12<\/div>\r\n <h3>Demande \u00e0 quelqu'un ses informations<\/h3>\r\n <div class=\"bc-tag\">Ask someone about themselves<\/div>\r\n <\/div>\r\n <div class=\"bc-excard-body\">\r\n <p class=\"bc-instr\"><strong>FR :<\/strong> Choisis la bonne question pour obtenir cette information. <br><strong>EN :<\/strong> Choose the right question to get this information.<\/p>\r\n <div id=\"bc-demande-game\"><\/div>\r\n <div class=\"bc-checkrow\"><button class=\"bc-btn bc-btn-out\" onclick=\"bcDemandeGame()\">\u21ba Nouveau jeu \/ New game<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- BOUTON BILAN -->\r\n <div style=\"text-align:center;margin-bottom:18px\">\r\n <button class=\"bc-btn bc-btn-navy\" style=\"font-size:1rem;padding:12px 32px\" onclick=\"bcShowScore()\">\r\n \ud83c\udfc6 Voir mon bilan \/ See my results\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"bc-score-section\" id=\"bc-score-section\">\r\n <div class=\"bc-score-top\">\r\n <div>\r\n <div class=\"bc-score-big\" id=\"bc-score-pct\">\u2013<\/div>\r\n <div class=\"bc-score-label\">Score global \/ Overall score<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"bc-score-msg\" id=\"bc-score-msg\"><\/div>\r\n <div style=\"font-size:1.6rem;margin-top:4px\" id=\"bc-score-stars\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <h3 style=\"font-size:0.78rem;font-weight:800;text-transform:uppercase;color:#7a8fa0;margin-bottom:10px;letter-spacing:0.5px\">Bilan des comp\u00e9tences \/ Skills summary<\/h3>\r\n <div class=\"bc-competences-grid\" id=\"bc-comp-grid\"><\/div>\r\n <\/div>\r\n\r\n<\/main>\r\n\r\n<script>\r\nconst bcShuffle=a=>[...a].sort(()=>Math.random()-0.5);\r\nconst bcNorm=s=>s.trim().toLowerCase().normalize('NFD').replace(\/[\\u0300-\\u036f]\/g,'').replace(\/[^a-z]\/g,'');\r\n\r\n\/\/ \u2500\u2500 MATCH SALUTATIONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst bcMatchData=[\r\n {fr:'Bonjour !',en:'Hello \/ Good morning',key:'BJ'},\r\n {fr:'Bonsoir !',en:'Good evening',key:'BS'},\r\n {fr:'Au revoir !',en:'Goodbye',key:'AR'},\r\n {fr:'Merci !',en:'Thank you',key:'MC'},\r\n {fr:'Bonne nuit !',en:'Good night',key:'BN'},\r\n];\r\nlet bcDragKey=null,bcDragEl=null,bcTClone=null;\r\n\r\nfunction bcBuildMatch(){\r\n const src=document.getElementById('bc-drag-src');\r\n const tgt=document.getElementById('bc-drag-tgt');\r\n src.innerHTML=''; tgt.innerHTML='';\r\n document.getElementById('bc-match-result').textContent='';\r\n const left=bcShuffle(bcMatchData);\r\n let right=bcShuffle(bcMatchData);\r\n let t=0; while(left.every((p,i)=>right[i].key===p.key)&&t++<10) right=bcShuffle(bcMatchData);\r\n left.forEach(p=>{\r\n const d=document.createElement('div'); d.className='bc-match-item';\r\n d.textContent=p.fr; d.dataset.key=p.key; d.draggable=true;\r\n d.ondragstart=e=>{bcDragKey=p.key;bcDragEl=d;d.classList.add('dragging');};\r\n d.ondragend=()=>d.classList.remove('dragging');\r\n d.addEventListener('touchstart',bcTS,{passive:false});\r\n d.addEventListener('touchmove',bcTM,{passive:false});\r\n d.addEventListener('touchend',bcTE);\r\n src.appendChild(d);\r\n });\r\n right.forEach(p=>{\r\n const z=document.createElement('div'); z.className='bc-match-drop';\r\n z.dataset.ans=p.key; z.dataset.lbl=p.en;\r\n z.innerHTML='<span class=\"bc-match-drop-lbl\">'+p.en+'<\/span>';\r\n z.ondragover=e=>{e.preventDefault();z.classList.add('dover');};\r\n z.ondragleave=()=>z.classList.remove('dover');\r\n z.ondrop=e=>{e.preventDefault();bcDoDrop(z);};\r\n tgt.appendChild(z);\r\n });\r\n \/\/ also make src droppable (to return items)\r\n src.ondragover=e=>e.preventDefault();\r\n src.ondrop=e=>{e.preventDefault();if(bcDragKey){\r\n tgt.querySelectorAll('.bc-match-drop').forEach(z=>{\r\n if(z.dataset.dropped===bcDragKey){z.innerHTML='<span class=\"bc-match-drop-lbl\">'+z.dataset.lbl+'<\/span>';delete z.dataset.dropped;z.classList.remove('correct','wrong');}\r\n });\r\n if(bcDragEl&&src.contains(bcDragEl)) return;\r\n if(bcDragEl){src.appendChild(bcDragEl);}\r\n }};\r\n}\r\n\r\nfunction bcDoDrop(z){\r\n z.classList.remove('dover');\r\n if(!bcDragKey) return;\r\n \/\/ remove from previous slot\r\n document.querySelectorAll('#bc-drag-tgt .bc-match-drop').forEach(d=>{\r\n if(d.dataset.dropped===bcDragKey){d.innerHTML='<span class=\"bc-match-drop-lbl\">'+d.dataset.lbl+'<\/span>';delete d.dataset.dropped;d.classList.remove('correct','wrong');}\r\n });\r\n const p=bcMatchData.find(x=>x.key===bcDragKey);\r\n z.dataset.dropped=bcDragKey;\r\n z.innerHTML='<strong style=\"color:var(--navy)\">'+(p?p.fr:'')+'<\/strong>';\r\n \/\/ remove from src\r\n if(bcDragEl) bcDragEl.remove();\r\n bcDragKey=null; bcDragEl=null;\r\n}\r\n\r\nfunction bcTS(e){\r\n bcDragEl=e.currentTarget; bcDragKey=bcDragEl.dataset.key;\r\n bcTClone=bcDragEl.cloneNode(true);\r\n bcTClone.style.cssText='position:fixed;opacity:.85;pointer-events:none;z-index:9999;padding:8px 12px;border-radius:8px;font-family:Nunito,sans-serif;font-weight:700;font-size:.85rem;background:#eef8fb;border:1.5px solid #4dacc4;color:#1e3a5f;width:'+bcDragEl.offsetWidth+'px';\r\n document.body.appendChild(bcTClone);\r\n const t=e.touches[0]; bcTClone.style.left=(t.clientX-bcDragEl.offsetWidth\/2)+'px'; bcTClone.style.top=(t.clientY-20)+'px';\r\n}\r\nfunction bcTM(e){\r\n e.preventDefault(); if(!bcTClone) return;\r\n const t=e.touches[0]; bcTClone.style.left=(t.clientX-bcDragEl.offsetWidth\/2)+'px'; bcTClone.style.top=(t.clientY-20)+'px';\r\n document.querySelectorAll('#bc-drag-tgt .bc-match-drop').forEach(z=>z.classList.remove('dover'));\r\n const hit=document.elementFromPoint(t.clientX,t.clientY);\r\n if(hit){const z=hit.closest('.bc-match-drop');if(z)z.classList.add('dover');}\r\n}\r\nfunction bcTE(e){\r\n if(bcTClone){document.body.removeChild(bcTClone);bcTClone=null;}\r\n const t=e.changedTouches[0];\r\n const hit=document.elementFromPoint(t.clientX,t.clientY);\r\n const z=hit&&hit.closest('.bc-match-drop');\r\n if(z) bcDoDrop(z);\r\n document.querySelectorAll('#bc-drag-tgt .bc-match-drop').forEach(z2=>z2.classList.remove('dover'));\r\n}\r\n\r\nfunction bcCheckMatch(){\r\n let ok=0,total=bcMatchData.length;\r\n document.querySelectorAll('#bc-drag-tgt .bc-match-drop').forEach(z=>{\r\n z.classList.remove('correct','wrong');\r\n if(z.dataset.dropped){if(z.dataset.dropped===z.dataset.ans){z.classList.add('correct');ok++;}else z.classList.add('wrong');}\r\n });\r\n const r=document.getElementById('bc-match-result');\r\n r.style.color=ok===total?'#2d6e30':'#c05068';\r\n r.textContent=ok===total?'\u2705 Parfait !':ok+'\/'+total+' \u2014 Essaie encore !';\r\n bcCompScores.comm1=ok===total;\r\n}\r\n\r\n\/\/ \u2500\u2500 POLITESSE GAME \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst bcPolData=[\r\n {q:'Apr\u00e8s \u00ab Merci ! \u00bb, on r\u00e9pond :\\nAfter \"Thank you\", we say:',opts:['De rien !','Bonsoir !','Au revoir !'],a:'De rien !'},\r\n {q:\"Tu veux quelque chose \u00e0 un ami :\\nYou want something from a friend:\",opts:[\"S'il te pla\u00eet\",\"S'il vous pla\u00eet\",\"De rien\"],a:\"S'il te pla\u00eet\"},\r\n {q:\"Tu quittes un adulte le soir :\\nYou leave an adult in the evening:\",opts:['Bonne soir\u00e9e !','Bonjour !','Merci !'],a:'Bonne soir\u00e9e !'},\r\n {q:\"Tu arrives \u00e0 l'\u00e9cole le matin :\\nYou arrive at school in the morning:\",opts:['Bonjour !','Bonsoir !','Au revoir !'],a:'Bonjour !'},\r\n {q:\"Tu pars de chez un ami :\\nYou leave a friend's house:\",opts:['Au revoir !','Bonjour !','Merci !'],a:'Au revoir !'},\r\n];\r\nfunction bcPolitesseGame(){\r\n const c=document.getElementById('bc-politesse-game'); c.innerHTML='';\r\n bcShuffle([0,1,2,3,4]).slice(0,3).forEach(idx=>{\r\n const d=bcPolData[idx];\r\n const wrap=document.createElement('div'); wrap.style.marginBottom='12px';\r\n const q=document.createElement('div'); q.className='bc-choice-q';\r\n q.textContent=d.q; wrap.appendChild(q);\r\n const btns=document.createElement('div'); btns.className='bc-choices';\r\n bcShuffle(d.opts).forEach(o=>{\r\n const b=document.createElement('button'); b.className='bc-choice-btn'; b.textContent=o;\r\n b.onclick=()=>{\r\n btns.querySelectorAll('.bc-choice-btn').forEach(x=>{x.classList.remove('correct','wrong');x.disabled=true;});\r\n if(o===d.a){b.classList.add('correct');}\r\n else{b.classList.add('wrong');btns.querySelectorAll('.bc-choice-btn').forEach(x=>{if(x.textContent===d.a)x.classList.add('correct');});}\r\n };\r\n btns.appendChild(b);\r\n });\r\n wrap.appendChild(btns); c.appendChild(wrap);\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500 FORM CHECK \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst bcCompScores={comm1:false,comm2:false,present:false,questions:false,nat:false,langues:false,tuv:false,pron:false,sents:false,chiffres:false,pays:false,demande:false};\r\n\r\nfunction bcCheckForm(){\r\n const fields=['f-prenom','f-age','f-nat','f-ville','f-pays','f-langues'];\r\n let filled=0;\r\n fields.forEach(id=>{\r\n const el=document.getElementById(id);\r\n el.classList.remove('correct','wrong');\r\n if(el.value.trim().length>0){el.classList.add('correct');filled++;}\r\n else el.classList.add('wrong');\r\n });\r\n const r=document.getElementById('bc-form-result');\r\n r.style.color=filled===fields.length?'#2d6e30':'#c05068';\r\n r.textContent=filled===fields.length?'\u2705 Formulaire complet !':filled+'\/'+fields.length+' champs remplis';\r\n bcCompScores.present=filled>=4;\r\n}\r\nfunction bcResetForm(){\r\n ['f-prenom','f-age','f-nat','f-ville','f-pays','f-langues'].forEach(id=>{const e=document.getElementById(id);e.value='';e.classList.remove('correct','wrong');});\r\n document.getElementById('bc-form-result').textContent='';\r\n}\r\n\r\n\/\/ \u2500\u2500 QUESTION GAME \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst bcQData=[\r\n {rep:'Je m\\'appelle Emma.',opts:['Comment t\\'appelles-tu ?','O\u00f9 habites-tu ?','Quel \u00e2ge as-tu ?'],a:'Comment t\\'appelles-tu ?'},\r\n {rep:'J\\'ai 8 ans.',opts:['Quel \u00e2ge as-tu ?','O\u00f9 habites-tu ?','Quelle est ta nationalit\u00e9 ?'],a:'Quel \u00e2ge as-tu ?'},\r\n {rep:'J\\'habite \u00e0 Da Nang au Vietnam.',opts:['O\u00f9 habites-tu ?','Comment t\\'appelles-tu ?','Parles-tu fran\u00e7ais ?'],a:'O\u00f9 habites-tu ?'},\r\n {rep:'Je suis canadienne.',opts:['Quelle est ta nationalit\u00e9 ?','Quel \u00e2ge as-tu ?','O\u00f9 habites-tu ?'],a:'Quelle est ta nationalit\u00e9 ?'},\r\n {rep:'Je parle fran\u00e7ais et un peu anglais.',opts:['Quelles langues parles-tu ?','O\u00f9 habites-tu ?','Comment t\\'appelles-tu ?'],a:'Quelles langues parles-tu ?'},\r\n];\r\nfunction bcBuildQuestions(){\r\n const c=document.getElementById('bc-question-game'); c.innerHTML='';\r\n bcShuffle([0,1,2,3,4]).slice(0,3).forEach(idx=>{\r\n const d=bcQData[idx];\r\n const wrap=document.createElement('div'); wrap.style.marginBottom='12px';\r\n const rep=document.createElement('div');\r\n rep.style.cssText='background:#eef8fb;border-radius:8px;padding:8px 12px;font-size:.88rem;font-weight:700;color:#1e3a5f;margin-bottom:7px;border:1px solid #ddeef3';\r\n rep.textContent='\ud83d\udcac '+d.rep; wrap.appendChild(rep);\r\n const btns=document.createElement('div'); btns.className='bc-choices';\r\n bcShuffle(d.opts).forEach(o=>{\r\n const b=document.createElement('button'); b.className='bc-choice-btn'; b.textContent=o;\r\n b.onclick=()=>{\r\n btns.querySelectorAll('.bc-choice-btn').forEach(x=>{x.classList.remove('correct','wrong');x.disabled=true;});\r\n if(o===d.a){b.classList.add('correct');}else{b.classList.add('wrong');btns.querySelectorAll('.bc-choice-btn').forEach(x=>{if(x.textContent===d.a)x.classList.add('correct');});}\r\n };\r\n btns.appendChild(b);\r\n });\r\n wrap.appendChild(btns); c.appendChild(wrap);\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500 NATIONALITES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction bcCheckNat(){\r\n let ok=0;\r\n document.querySelectorAll('.tn-input').forEach(inp=>{\r\n inp.classList.remove('correct','wrong');\r\n if(bcNorm(inp.value)===bcNorm(inp.dataset.ans)){inp.classList.add('correct');ok++;}\r\n else inp.classList.add('wrong');\r\n });\r\n const total=document.querySelectorAll('.tn-input').length;\r\n const r=document.getElementById('bc-nat-result');\r\n r.style.color=ok===total?'#2d6e30':'#c05068';\r\n r.textContent=ok===total?'\u2705 Parfait !':ok+'\/'+total+' \u2014 Essaie encore !';\r\n bcCompScores.nat=ok>=5;\r\n}\r\nfunction bcResetNat(){\r\n document.querySelectorAll('.tn-input').forEach(i=>{i.value='';i.classList.remove('correct','wrong');});\r\n document.getElementById('bc-nat-result').textContent='';\r\n}\r\n\r\n\/\/ \u2500\u2500 LANGUES GAME \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst bcLangData=[\r\n {q:'Tu parles fran\u00e7ais ?\\nDo you speak French?',opts:['Oui, je parle fran\u00e7ais.','Non, je parle anglais.','Je suis fran\u00e7aise.'],a:'Oui, je parle fran\u00e7ais.'},\r\n {q:'Tu parles un peu vietnamien ?\\nDo you speak a little Vietnamese?',opts:['Oui, un peu !','Je suis vietnamien.','J\\'habite au Vietnam.'],a:'Oui, un peu !'},\r\n {q:'Quelles langues parles-tu ?\\nWhat languages do you speak?',opts:['Je parle anglais et un peu fran\u00e7ais.','J\\'ai 8 ans.','J\\'habite \u00e0 Paris.'],a:'Je parle anglais et un peu fran\u00e7ais.'},\r\n];\r\nfunction bcLangueGame(){\r\n const c=document.getElementById('bc-langue-game'); c.innerHTML='';\r\n bcLangData.forEach(d=>{\r\n const wrap=document.createElement('div'); wrap.style.marginBottom='12px';\r\n const q=document.createElement('div'); q.className='bc-choice-q'; q.textContent=d.q; wrap.appendChild(q);\r\n const btns=document.createElement('div'); btns.className='bc-choices';\r\n bcShuffle(d.opts).forEach(o=>{\r\n const b=document.createElement('button'); b.className='bc-choice-btn'; b.textContent=o;\r\n b.onclick=()=>{\r\n btns.querySelectorAll('.bc-choice-btn').forEach(x=>{x.classList.remove('correct','wrong');x.disabled=true;});\r\n if(o===d.a){b.classList.add('correct');}else{b.classList.add('wrong');btns.querySelectorAll('.bc-choice-btn').forEach(x=>{if(x.textContent===d.a)x.classList.add('correct');});}\r\n };\r\n btns.appendChild(b);\r\n });\r\n wrap.appendChild(btns); c.appendChild(wrap);\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500 TU \/ VOUS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction bcCheckTuV(){\r\n const inputs=document.querySelectorAll('#bc-tuv-rows .bc-type-input');\r\n let ok=0;\r\n inputs.forEach(inp=>{\r\n inp.classList.remove('correct','wrong');\r\n if(bcNorm(inp.value)===inp.dataset.ans){inp.classList.add('correct');ok++;}\r\n else inp.classList.add('wrong');\r\n });\r\n const r=document.getElementById('bc-tuv-result');\r\n r.style.color=ok===inputs.length?'#2d6e30':'#c05068';\r\n r.textContent=ok===inputs.length?'\u2705 Parfait !':ok+'\/'+inputs.length+' \u2014 Essaie encore !';\r\n bcCompScores.tuv=ok>=4;\r\n}\r\nfunction bcResetTuV(){\r\n document.querySelectorAll('#bc-tuv-rows .bc-type-input').forEach(i=>{i.value='';i.classList.remove('correct','wrong');});\r\n document.getElementById('bc-tuv-result').textContent='';\r\n}\r\n\r\n\/\/ \u2500\u2500 PRONOMS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst bcPronData=[\r\n {q:'_____ est espagnol. (un gar\u00e7on)',opts:['il','elle','ils','elles'],a:'il'},\r\n {q:'_____ est cor\u00e9enne. (une fille)',opts:['il','elle','ils','elles'],a:'elle'},\r\n {q:'_____ sont am\u00e9ricains. (groupe mixte)',opts:['il','elle','ils','elles'],a:'ils'},\r\n {q:'_____ sont japonaises. (plusieurs filles)',opts:['il','elle','ils','elles'],a:'elles'},\r\n {q:'_____ habite \u00e0 Paris. (un gar\u00e7on)',opts:['il','elle','ils','elles'],a:'il'},\r\n {q:'_____ parlent fran\u00e7ais. (des filles)',opts:['il','elle','ils','elles'],a:'elles'},\r\n];\r\nfunction bcPronGame(){\r\n const c=document.getElementById('bc-pron-game'); c.innerHTML='';\r\n bcShuffle([0,1,2,3,4,5]).slice(0,4).forEach(idx=>{\r\n const d=bcPronData[idx];\r\n const row=document.createElement('div'); row.className='bc-pron-row';\r\n const q=document.createElement('div'); q.className='bc-pron-q'; q.textContent=d.q; row.appendChild(q);\r\n const btns=document.createElement('div'); btns.className='bc-pron-btns';\r\n d.opts.forEach(o=>{\r\n const b=document.createElement('button'); b.className='bc-pron-btn'; b.textContent=o;\r\n b.onclick=()=>{\r\n btns.querySelectorAll('.bc-pron-btn').forEach(x=>{x.disabled=true;});\r\n if(o===d.a){b.classList.add('correct');}else{b.classList.add('wrong');btns.querySelectorAll('.bc-pron-btn').forEach(x=>{if(x.textContent===d.a)x.classList.add('correct');});}\r\n };\r\n btns.appendChild(b);\r\n });\r\n row.appendChild(btns); c.appendChild(row);\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500 SENTENCES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction bcCheckSents(){\r\n const ids=['s1','s2','s3','s4','s5','s6'];\r\n let ok=0;\r\n ids.forEach(id=>{\r\n const el=document.getElementById(id);\r\n el.classList.remove('correct','wrong');\r\n if(el.value===el.dataset.ans){el.classList.add('correct');ok++;}\r\n else el.classList.add('wrong');\r\n });\r\n const r=document.getElementById('bc-sent-result');\r\n r.style.color=ok===ids.length?'#2d6e30':'#c05068';\r\n r.textContent=ok===ids.length?'\u2705 Parfait !':ok+'\/'+ids.length+' \u2014 Essaie encore !';\r\n bcCompScores.sents=ok>=4;\r\n}\r\nfunction bcResetSents(){\r\n ['s1','s2','s3','s4','s5','s6'].forEach(id=>{const e=document.getElementById(id);e.value='';e.classList.remove('correct','wrong');});\r\n document.getElementById('bc-sent-result').textContent='';\r\n}\r\n\r\n\/\/ \u2500\u2500 CHIFFRES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction bcCheckChiffres(){\r\n const inputs=document.querySelectorAll('#bc-chiffres-rows .bc-type-input');\r\n let ok=0;\r\n inputs.forEach(inp=>{\r\n inp.classList.remove('correct','wrong');\r\n if(bcNorm(inp.value)===bcNorm(inp.dataset.ans)){inp.classList.add('correct');ok++;}\r\n else inp.classList.add('wrong');\r\n });\r\n const r=document.getElementById('bc-chiffres-result');\r\n r.style.color=ok===inputs.length?'#2d6e30':'#c05068';\r\n r.textContent=ok===inputs.length?'\u2705 Parfait !':ok+'\/'+inputs.length+' \u2014 Essaie encore !';\r\n bcCompScores.chiffres=ok>=5;\r\n}\r\nfunction bcResetChiffres(){\r\n document.querySelectorAll('#bc-chiffres-rows .bc-type-input').forEach(i=>{i.value='';i.classList.remove('correct','wrong');});\r\n document.getElementById('bc-chiffres-result').textContent='';\r\n}\r\n\r\n\/\/ \u2500\u2500 PAYS GAME \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst bcPaysData=[\r\n {nat:'Je suis fran\u00e7aise.',opts:['France \ud83c\uddeb\ud83c\uddf7','Espagne \ud83c\uddea\ud83c\uddf8','Canada \ud83c\udde8\ud83c\udde6'],a:'France \ud83c\uddeb\ud83c\uddf7'},\r\n {nat:'Il est japonais.',opts:['Cor\u00e9e \ud83c\uddf0\ud83c\uddf7','Japon \ud83c\uddef\ud83c\uddf5','Chine \ud83c\udde8\ud83c\uddf3'],a:'Japon \ud83c\uddef\ud83c\uddf5'},\r\n {nat:'Elle est canadienne.',opts:['France \ud83c\uddeb\ud83c\uddf7','Angleterre \ud83c\uddec\ud83c\udde7','Canada \ud83c\udde8\ud83c\udde6'],a:'Canada \ud83c\udde8\ud83c\udde6'},\r\n {nat:'Il est vietnamien.',opts:['Vietnam \ud83c\uddfb\ud83c\uddf3','Chine \ud83c\udde8\ud83c\uddf3','Cor\u00e9e \ud83c\uddf0\ud83c\uddf7'],a:'Vietnam \ud83c\uddfb\ud83c\uddf3'},\r\n {nat:'Elle est espagnole.',opts:['Italie \ud83c\uddee\ud83c\uddf9','Espagne \ud83c\uddea\ud83c\uddf8','France \ud83c\uddeb\ud83c\uddf7'],a:'Espagne \ud83c\uddea\ud83c\uddf8'},\r\n {nat:'Il est russe.',opts:['Allemagne \ud83c\udde9\ud83c\uddea','Canada \ud83c\udde8\ud83c\udde6','Russie \ud83c\uddf7\ud83c\uddfa'],a:'Russie \ud83c\uddf7\ud83c\uddfa'},\r\n {nat:'Elle est cor\u00e9enne.',opts:['Japon \ud83c\uddef\ud83c\uddf5','Cor\u00e9e \ud83c\uddf0\ud83c\uddf7','Chine \ud83c\udde8\ud83c\uddf3'],a:'Cor\u00e9e \ud83c\uddf0\ud83c\uddf7'},\r\n {nat:'Il est allemand.',opts:['Angleterre \ud83c\uddec\ud83c\udde7','Allemagne \ud83c\udde9\ud83c\uddea','Espagne \ud83c\uddea\ud83c\uddf8'],a:'Allemagne \ud83c\udde9\ud83c\uddea'},\r\n];\r\nfunction bcPaysGame(){\r\n const c=document.getElementById('bc-pays-game'); c.innerHTML='';\r\n bcShuffle([...Array(bcPaysData.length).keys()]).slice(0,4).forEach(idx=>{\r\n const d=bcPaysData[idx];\r\n const wrap=document.createElement('div'); wrap.style.marginBottom='12px';\r\n const q=document.createElement('div'); q.className='bc-choice-q'; q.textContent='\ud83d\udde3\ufe0f '+d.nat; wrap.appendChild(q);\r\n const btns=document.createElement('div'); btns.className='bc-choices';\r\n bcShuffle(d.opts).forEach(o=>{\r\n const b=document.createElement('button'); b.className='bc-choice-btn'; b.textContent=o;\r\n b.onclick=()=>{\r\n btns.querySelectorAll('.bc-choice-btn').forEach(x=>{x.classList.remove('correct','wrong');x.disabled=true;});\r\n if(o===d.a){b.classList.add('correct');}else{b.classList.add('wrong');btns.querySelectorAll('.bc-choice-btn').forEach(x=>{if(x.textContent===d.a)x.classList.add('correct');});}\r\n };\r\n btns.appendChild(b);\r\n });\r\n wrap.appendChild(btns); c.appendChild(wrap);\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500 DEMANDE GAME \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst bcDemandeData=[\r\n {info:'Tu veux savoir son pr\u00e9nom :\\nYou want to know their name:',opts:['Comment tu t\\'appelles ?','Quel \u00e2ge as-tu ?','O\u00f9 habites-tu ?'],a:'Comment tu t\\'appelles ?'},\r\n {info:'Tu veux savoir son \u00e2ge :\\nYou want to know their age:',opts:['Quel \u00e2ge as-tu ?','Quelle est ta nationalit\u00e9 ?','Comment tu t\\'appelles ?'],a:'Quel \u00e2ge as-tu ?'},\r\n {info:'Tu veux savoir o\u00f9 il habite :\\nYou want to know where they live:',opts:['O\u00f9 habites-tu ?','Quel \u00e2ge as-tu ?','Parles-tu fran\u00e7ais ?'],a:'O\u00f9 habites-tu ?'},\r\n {info:'Tu veux savoir sa nationalit\u00e9 :\\nYou want to know their nationality:',opts:['Quelle est ta nationalit\u00e9 ?','O\u00f9 habites-tu ?','Quel \u00e2ge as-tu ?'],a:'Quelle est ta nationalit\u00e9 ?'},\r\n {info:'Tu veux savoir les langues qu\\'il parle :\\nYou want to know what languages they speak:',opts:['Quelles langues parles-tu ?','O\u00f9 habites-tu ?','Comment tu t\\'appelles ?'],a:'Quelles langues parles-tu ?'},\r\n];\r\nfunction bcDemandeGame(){\r\n const c=document.getElementById('bc-demande-game'); c.innerHTML='';\r\n bcShuffle([0,1,2,3,4]).slice(0,4).forEach(idx=>{\r\n const d=bcDemandeData[idx];\r\n const wrap=document.createElement('div'); wrap.style.marginBottom='12px';\r\n const q=document.createElement('div'); q.className='bc-choice-q'; q.textContent=d.info; wrap.appendChild(q);\r\n const btns=document.createElement('div'); btns.className='bc-choices';\r\n bcShuffle(d.opts).forEach(o=>{\r\n const b=document.createElement('button'); b.className='bc-choice-btn'; b.textContent=o;\r\n b.onclick=()=>{\r\n btns.querySelectorAll('.bc-choice-btn').forEach(x=>{x.classList.remove('correct','wrong');x.disabled=true;});\r\n if(o===d.a){b.classList.add('correct');}else{b.classList.add('wrong');btns.querySelectorAll('.bc-choice-btn').forEach(x=>{if(x.textContent===d.a)x.classList.add('correct');});}\r\n };\r\n btns.appendChild(b);\r\n });\r\n wrap.appendChild(btns); c.appendChild(wrap);\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500 SCORE GLOBAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst bcCompLabels=[\r\n {key:'comm1',label:'Saluer et prendre cong\u00e9'},\r\n {key:'present',label:'Remplir un formulaire personnel'},\r\n {key:'nat',label:'Nationalit\u00e9s masculin \/ f\u00e9minin'},\r\n {key:'tuv',label:'Tu \/ Vous correctement'},\r\n {key:'sents',label:'Phrases compl\u00e8tes (se pr\u00e9senter)'},\r\n {key:'chiffres',label:'Compter de 0 \u00e0 10'},\r\n {key:'pays',label:'Reconna\u00eetre les pays et nationalit\u00e9s'},\r\n {key:'demande',label:'Demander infos \u00e0 quelqu\\'un'},\r\n];\r\n\r\nfunction bcShowScore(){\r\n const total=bcCompLabels.length;\r\n const ok=bcCompLabels.filter(c=>bcCompScores[c.key]).length;\r\n const pct=Math.round(ok\/total*100);\r\n const sec=document.getElementById('bc-score-section');\r\n sec.classList.add('show');\r\n document.getElementById('bc-score-pct').textContent=pct+'%';\r\n const msgs=pct>=80?['\ud83c\udf1f Excellent travail !','\u2b50\u2b50\u2b50']:pct>=60?['\ud83d\udc4d Bien jou\u00e9 !','\u2b50\u2b50']:['\ud83d\udcaa Continue \u00e0 pratiquer !','\u2b50'];\r\n document.getElementById('bc-score-msg').textContent=msgs[0];\r\n document.getElementById('bc-score-stars').textContent=msgs[1];\r\n const grid=document.getElementById('bc-comp-grid'); grid.innerHTML='';\r\n bcCompLabels.forEach(c=>{\r\n const item=document.createElement('div'); item.className='bc-comp-item';\r\n const isOk=bcCompScores[c.key];\r\n item.innerHTML='<div class=\"bc-comp-dot '+(isOk?'ok':'ko')+'\">'+(isOk?'\ud83d\ude0a':'\ud83d\ude1f')+'<\/div>'+c.label;\r\n grid.appendChild(item);\r\n });\r\n sec.scrollIntoView({behavior:'smooth'});\r\n}\r\n\r\n\/\/ \u2500\u2500 RESET ALL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction bcResetAll(){\r\n bcBuildMatch(); bcPolitesseGame(); bcResetForm(); bcBuildQuestions();\r\n bcResetNat(); bcLangueGame(); bcResetTuV(); bcPronGame(); bcResetSents();\r\n bcResetChiffres(); bcPaysGame(); bcDemandeGame();\r\n document.getElementById('bc-score-section').classList.remove('show');\r\n Object.keys(bcCompScores).forEach(k=>bcCompScores[k]=false);\r\n}\r\n\r\n\/\/ \u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nbcBuildMatch();\r\nbcPolitesseGame();\r\nbcBuildQuestions();\r\nbcLangueGame();\r\nbcPronGame();\r\nbcPaysGame();\r\nbcDemandeGame();\r\n<\/script>\r\n<\/div><!-- \/bc-bilan -->\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Bilan de Comp\u00e9tence N\u00b01 \u2014 H\u1ecdc Ti\u1ebfng Ph\u00e1p t\u1ea1i \u0110\u00e0 N\u1eb5ng H\u1ecdc Ti\u1ebfng Ph\u00e1p t\u1ea1i \u0110\u00e0 N\u1eb5ng  \u00b7  Parlez fran\u00e7ais ! \u00c9valuation \u00b7 Assessment Bilan de Comp\u00e9tence N\u00b01 \ud83d\udc99 \ud83d\uddfc Unit\u00e9 1 \u2014 Saluer \u00b7 Se pr\u00e9senter \u00b7 Les nationalit\u00e9s \u00b7 La grammaire \ud83d\udc99 \ud83d\udcac 1. Communiquer \u2665 Saluer \u00b7 Prendre cong\u00e9 \u00b7 Politesse \/ […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-18522","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xenesy.com\/zh\/wp-json\/wp\/v2\/pages\/18522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xenesy.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xenesy.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xenesy.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xenesy.com\/zh\/wp-json\/wp\/v2\/comments?post=18522"}],"version-history":[{"count":7,"href":"https:\/\/xenesy.com\/zh\/wp-json\/wp\/v2\/pages\/18522\/revisions"}],"predecessor-version":[{"id":18530,"href":"https:\/\/xenesy.com\/zh\/wp-json\/wp\/v2\/pages\/18522\/revisions\/18530"}],"wp:attachment":[{"href":"https:\/\/xenesy.com\/zh\/wp-json\/wp\/v2\/media?parent=18522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}