English Level Test – Band up/title> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"> <style> :root { --ink: #0f0e0d; --cream: #f7f4ef; --gold: #c9a84c; --gold-light: #e8d5a3; --rust: #b94f2a; --sage: #4a6741; --mid: #6b6560; --card: #ffffff; --border: #e2ddd6; --a1: #7c9e87; --a2: #5d8a6e; --b1: #4a7fbb; --b2: #2e6499; --c1: #c9a84c; --c2: #b94f2a; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 60px; position: relative; overflow-x: hidden; } body::before { content:''; position:fixed; top:-200px; right:-200px; width:600px; height:600px; background:radial-gradient(circle,rgba(201,168,76,.12) 0%,transparent 70%); pointer-events:none; } body::after { content:''; position:fixed; bottom:-150px; left:-150px; width:500px; height:500px; background:radial-gradient(circle,rgba(185,79,42,.08) 0%,transparent 70%); pointer-events:none; } .logo { position:fixed; top:24px; left:32px; font-family:'Playfair Display',serif; font-weight:900; font-size:1.25rem; color:var(--ink); letter-spacing:-.02em; z-index:100; } .logo span { color:var(--gold); } .progress-wrap { position:fixed; top:0; left:0; right:0; height:3px; background:var(--border); z-index:200; } .progress-bar { height:100%; background:linear-gradient(90deg,var(--gold),var(--rust)); transition:width .5s cubic-bezier(.4,0,.2,1); } .screen { display:none; width:100%; max-width:660px; animation:fadeUp .4s cubic-bezier(.4,0,.2,1) forwards; } .screen.active { display:block; } @keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} } /* CARD */ .card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:40px 44px; box-shadow:0 4px 32px rgba(15,14,13,.06); } /* INTRO */ .eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; } .hero-title { font-family:'Playfair Display',serif; font-size:clamp(2rem,6vw,3.2rem); font-weight:900; line-height:1.06; letter-spacing:-.03em; margin-bottom:18px; } .hero-title em { font-style:italic; color:var(--gold); } .hero-sub { font-size:.97rem; color:var(--mid); line-height:1.68; max-width:500px; margin-bottom:32px; } .meta-row { display:flex; gap:20px; margin-bottom:36px; flex-wrap:wrap; } .meta-pill { display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:500; color:var(--mid); } .meta-pill svg { width:15px; height:15px; stroke:var(--gold); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* FORM FIELDS */ .field-group { margin-bottom:20px; } .field-group label { display:block; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); margin-bottom:7px; } .field-group input { width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:10px; font-family:'DM Sans',sans-serif; font-size:.97rem; color:var(--ink); background:var(--card); transition:border-color .2s; } .field-group input:focus { outline:none; border-color:var(--gold); } .field-group input::placeholder { color:#bbb; } .field-error { font-size:.75rem; color:var(--rust); margin-top:5px; display:none; } /* BUTTONS */ .btn { display:inline-flex; align-items:center; gap:10px; border:none; padding:13px 26px; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:.93rem; font-weight:600; cursor:pointer; transition:all .2s ease; letter-spacing:.01em; } .btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; } .btn:hover:not(:disabled) svg { transform:translateX(3px); } .btn:disabled { opacity:.35; cursor:not-allowed; } .btn-dark { background:var(--ink); color:white; } .btn-dark:hover:not(:disabled) { background:var(--gold); color:var(--ink); transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,168,76,.3); } .btn-gold { background:var(--gold); color:var(--ink); } .btn-gold:hover:not(:disabled) { background:var(--ink); color:white; transform:translateY(-2px); box-shadow:0 8px 24px rgba(15,14,13,.2); } /* QUESTION */ .q-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; } .q-counter { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mid); } .q-tag { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); background:rgba(201,168,76,.1); padding:3px 10px; border-radius:20px; } .q-text { font-family:'Playfair Display',serif; font-size:clamp(1.05rem,3vw,1.3rem); font-weight:700; line-height:1.4; margin-bottom:8px; } .q-context { font-size:.88rem; color:var(--mid); line-height:1.65; padding:12px 16px; background:var(--cream); border-left:3px solid var(--gold-light); border-radius:0 8px 8px 0; margin-bottom:24px; font-style:italic; } .options { display:flex; flex-direction:column; gap:9px; margin-bottom:28px; } .opt { display:flex; align-items:center; gap:13px; padding:13px 17px; border:1.5px solid var(--border); border-radius:10px; cursor:pointer; background:var(--card); font-size:.93rem; color:var(--ink); text-align:left; width:100%; transition:all .18s ease; } .opt:hover { border-color:var(--gold); background:rgba(201,168,76,.04); transform:translateX(3px); } .opt.selected { border-color:var(--gold); background:rgba(201,168,76,.07); } .opt.correct { border-color:var(--sage); background:rgba(74,103,65,.07); } .opt.wrong { border-color:var(--rust); background:rgba(185,79,42,.05); } .opt-ltr { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; color:var(--mid); flex-shrink:0; transition:all .18s; } .opt.selected .opt-ltr { background:var(--gold); border-color:var(--gold); color:white; } .opt.correct .opt-ltr { background:var(--sage); border-color:var(--sage); color:white; } .opt.wrong .opt-ltr { background:var(--rust); border-color:var(--rust); color:white; } .feedback-box { padding:13px 17px; border-radius:10px; font-size:.85rem; line-height:1.6; display:none; margin-top:8px; } .feedback-box.show { display:block; animation:fadeUp .3s ease; } .fb-correct { background:rgba(74,103,65,.08); border:1px solid rgba(74,103,65,.22); color:var(--sage); } .fb-wrong { background:rgba(185,79,42,.07); border:1px solid rgba(185,79,42,.18); color:var(--rust); } .divider { height:1px; background:var(--border); margin:24px 0; } /* CEFR LADDER (intro) */ .cefr-ladder { display:flex; gap:0; margin-bottom:32px; border-radius:10px; overflow:hidden; border:1px solid var(--border); } .cefr-step { flex:1; padding:10px 4px; text-align:center; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:white; line-height:1.3; } /* RESULT */ .result-level-badge { display:inline-flex; align-items:center; gap:10px; padding:10px 20px; border-radius:99px; margin-bottom:20px; } .result-level-badge .level-code { font-family:'Playfair Display',serif; font-size:2.8rem; font-weight:900; line-height:1; } .result-level-badge .level-name { font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.4; opacity:.85; } .result-desc { font-size:.95rem; color:var(--mid); line-height:1.72; margin-bottom:28px; } .cefr-scale { display:flex; gap:0; border-radius:10px; overflow:hidden; margin-bottom:28px; } .cefr-seg { flex:1; padding:8px 4px; text-align:center; font-size:.65rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:white; transition:all .3s; position:relative; } .cefr-seg.active { transform:scaleY(1.18); z-index:2; box-shadow:0 4px 16px rgba(0,0,0,.2); } .cefr-seg.active::after { content:'▲'; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); font-size:.6rem; color:var(--ink); } .skills-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; } .skill-card { padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--cream); } .skill-label { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); margin-bottom:6px; } .skill-val { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--ink); line-height:1.3; } .score-row-wrap { margin-bottom:16px; } .score-lbl-row { display:flex; justify-content:space-between; font-size:.78rem; color:var(--mid); font-weight:500; margin-bottom:5px; } .score-track { height:5px; background:var(--border); border-radius:99px; overflow:hidden; } .score-fill { height:100%; border-radius:99px; transition:width 1.1s cubic-bezier(.4,0,.2,1); } .cta-box { background:var(--ink); border-radius:14px; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .cta-txt { color:white; font-size:.9rem; line-height:1.55; } .cta-txt strong { display:block; font-size:.98rem; margin-bottom:2px; } /* LEAD CAPTURE NOTE */ .privacy-note { font-size:.72rem; color:var(--mid); margin-top:8px; line-height:1.5; } .privacy-note a { color:var(--gold); text-decoration:none; } /* SAVING INDICATOR */ .saving-wrap { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--mid); margin-top:8px; } .saving-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); animation:blink 1s infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} } @media(max-width:560px){ .card{padding:28px 22px;} .skills-grid{grid-template-columns:1fr;} .cta-box{flex-direction:column;align-items:flex-start;} .meta-row{flex-direction:column;gap:10px;} .cefr-ladder,.cefr-scale{font-size:.55rem;} } </style> </head> <body> <div class="progress-wrap"><div class="progress-bar" id="progressBar" style="width:0%"></div></div> <div class="logo">Band<span>Up</span></div>  <div class="screen active" id="screen-gate"> <div class="eyebrow">Free English Level Test</div> <h1 class="hero-title">What's your<br><em>real English level?</em></h1> <p class="hero-sub">30 questions across grammar, vocabulary, and reading. No tricks — just a clear CEFR level (A1 to C2) and a plain-English description of what you can do.</p> <div class="meta-row"> <div class="meta-pill"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>10 minutes</div> <div class="meta-pill"><svg viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>30 questions</div> <div class="meta-pill"><svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>Instant CEFR result</div> </div> <div class="cefr-ladder"> <div class="cefr-step" style="background:var(--a1)">A1<br>Beginner</div> <div class="cefr-step" style="background:var(--a2)">A2<br>Elementary</div> <div class="cefr-step" style="background:var(--b1)">B1<br>Intermediate</div> <div class="cefr-step" style="background:var(--b2)">B2<br>Upper-Int.</div> <div class="cefr-step" style="background:var(--c1)">C1<br>Advanced</div> <div class="cefr-step" style="background:var(--c2)">C2<br>Mastery</div> </div> <div class="card"> <p style="font-size:.9rem;color:var(--mid);margin-bottom:20px;line-height:1.6;">Enter your details to receive your results and a personalised study recommendation.</p> <div class="field-group"> <label for="gateFirstName">First name</label> <input type="text" id="gateFirstName" placeholder="e.g. María" maxlength="40" oninput="validateGate()"> <div class="field-error" id="err-name">Please enter your name.</div> </div> <div class="field-group"> <label for="gateEmail">Email address</label> <input type="email" id="gateEmail" placeholder="you@email.com" maxlength="120" oninput="validateGate()"> <div class="field-error" id="err-email">Please enter a valid email.</div> </div> <button class="btn btn-gold" id="gateBtn" onclick="submitGate()" disabled> Start free test <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12,5 19,12 12,19"/></svg> </button> <div class="saving-wrap" id="savingWrap" style="display:none"> <div class="saving-dot"></div> Saving your details... </div> <p class="privacy-note">By continuing you agree to receive your results and occasional course recommendations from BandUp Academy. No spam — unsubscribe any time.</p> </div> </div>  <div class="screen" id="screen-question"> <div class="card"> <div class="q-header"> <span class="q-counter" id="qCounter">Question 1 of 30</span> <span class="q-tag" id="qTag">Grammar</span> </div> <p class="q-text" id="qText"></p> <div class="q-context" id="qContext" style="display:none"></div> <div class="options" id="optWrap"></div> <div class="feedback-box" id="fbBox"></div> <div class="divider"></div> <button class="btn btn-dark" id="nextBtn" onclick="nextQ()" disabled> Next <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12,5 19,12 12,19"/></svg> </button> </div> </div>  <div class="screen" id="screen-result"> <div class="card"> <div class="eyebrow" style="margin-bottom:12px">Your English Level</div> <div class="result-level-badge" id="levelBadge"> <span class="level-code" id="levelCode">B1</span> <span class="level-name" id="levelName">Intermediate</span> </div> <div class="cefr-scale" id="cefrScale"> <div class="cefr-seg" data-lvl="A1" style="background:var(--a1)">A1</div> <div class="cefr-seg" data-lvl="A2" style="background:var(--a2)">A2</div> <div class="cefr-seg" data-lvl="B1" style="background:var(--b1)">B1</div> <div class="cefr-seg" data-lvl="B2" style="background:var(--b2)">B2</div> <div class="cefr-seg" data-lvl="C1" style="background:var(--c1)">C1</div> <div class="cefr-seg" data-lvl="C2" style="background:var(--c2)">C2</div> </div> <p class="result-desc" id="resultDesc"></p> <div class="score-row-wrap"> <div class="score-lbl-row"><span>Grammar</span><span id="gramScore"></span></div> <div class="score-track"><div class="score-fill" id="gramBar" style="width:0%"></div></div> </div> <div class="score-row-wrap"> <div class="score-lbl-row"><span>Vocabulary</span><span id="vocabScore"></span></div> <div class="score-track"><div class="score-fill" id="vocabBar" style="width:0%"></div></div> </div> <div class="score-row-wrap" style="margin-bottom:24px"> <div class="score-lbl-row"><span>Reading</span><span id="readScore"></span></div> <div class="score-track"><div class="score-fill" id="readBar" style="width:0%"></div></div> </div> <div class="skills-grid" id="skillsGrid"></div> <div class="cta-box"> <div class="cta-txt"> <strong id="ctaTitle">Improve from B1 to B2</strong> <span id="ctaSub">Personalised course recommendation sent to your email.</span> </div> <button class="btn btn-gold" onclick="alert('Check your inbox — we\'ve sent your personalised course recommendation!')"> Get recommendation <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12,5 19,12 12,19"/></svg> </button> </div> </div> <p style="text-align:center;margin-top:18px;font-size:.78rem;color:var(--mid)">Results also sent to <span id="resultEmailDisplay" style="color:var(--gold);font-weight:600"></span></p> </div> <script> // ════════════════════════════════════════════ // QUESTION BANK (30 questions, A1→C2) // ════════════════════════════════════════════ const QS = [ // ── A1 ── { lvl:'A1', cat:'Grammar', text:'Choose the correct sentence.', ctx:null, opts:['She have a cat.','She has a cat.','She is have a cat.','She haves a cat.'], ans:1, why:"'Has' is the correct third-person singular form of 'have'." }, { lvl:'A1', cat:'Vocabulary', text:"What does 'big' mean?", ctx:null, opts:['Small','Expensive','Large','Fast'], ans:2, why:"'Big' means large in size." }, { lvl:'A1', cat:'Grammar', text:"Select the correct question: '___ your name?'", ctx:null, opts:['What is','What are','What be','What am'], ans:0, why:"'What is your name?' uses the third-person singular 'is'." }, { lvl:'A1', cat:'Vocabulary', text:"Which word is a colour?", ctx:null, opts:['Chair','Blue','Run','Happy'], ans:1, why:"'Blue' is a colour. The others are a noun, verb, and adjective." }, { lvl:'A1', cat:'Grammar', text:"Complete: 'There ___ two apples on the table.'", ctx:null, opts:['is','am','are','be'], ans:2, why:"Use 'are' with plural nouns: 'there are two apples'." }, // ── A2 ── { lvl:'A2', cat:'Grammar', text:"Choose the correct past tense: 'Yesterday I ___ to the market.'", ctx:null, opts:['go','goes','went','goed'], ans:2, why:"'Went' is the irregular past tense of 'go'." }, { lvl:'A2', cat:'Vocabulary', text:"What is a synonym for 'tired'?", ctx:null, opts:['Energetic','Exhausted','Angry','Bored'], ans:1, why:"'Exhausted' means very tired." }, { lvl:'A2', cat:'Grammar', text:"Which sentence is correct?", ctx:null, opts:['I have never been to Paris.','I have never go to Paris.','I never went never to Paris.','I didn\'t never go to Paris.'], ans:0, why:"'I have never been' uses the present perfect correctly with 'never'." }, { lvl:'A2', cat:'Reading', text:"What is the main topic of this notice?", ctx:"LIBRARY NOTICE: The library will be closed on Saturday 14th for maintenance. It will reopen on Monday 16th at 9am.", opts:['Library opening hours','Library closure for maintenance','A new library service','Library membership fees'], ans:1, why:"The notice is specifically about the library closing for maintenance." }, { lvl:'A2', cat:'Vocabulary', text:"Choose the correct word: 'Can I ___ your pen, please?'", ctx:null, opts:['lend','borrow','give','take'], ans:1, why:"'Borrow' means to take something temporarily. 'Lend' means to give something temporarily." }, // ── B1 ── { lvl:'B1', cat:'Grammar', text:"Choose the correct form: 'If it ___ tomorrow, we will cancel the trip.'", ctx:null, opts:['rained','rains','will rain','would rain'], ans:1, why:"First conditional: 'If + present simple, will + infinitive' for real future possibility." }, { lvl:'B1', cat:'Vocabulary', text:"Which word best completes the sentence? 'The new law will ___ companies to reduce their carbon emissions.'", ctx:null, opts:['ask','need','require','want'], ans:2, why:"'Require' is the most formal and precise collocate here. Laws 'require' — not 'ask' or 'want'." }, { lvl:'B1', cat:'Grammar', text:"Identify the correct sentence.", ctx:null, opts:['She suggested to go to the cinema.','She suggested going to the cinema.','She suggested that we to go to cinema.','She suggested us going to cinema.'], ans:1, why:"'Suggest' is followed by a gerund ('going') or 'that + clause', never 'to + infinitive'." }, { lvl:'B1', cat:'Reading', text:"What can be inferred from the text?", ctx:"The café has been open for thirty years and has served thousands of customers. Despite several offers from larger chains, the owner has always refused to sell.", opts:['The owner wants to expand the café.','The owner values independence over profit.','The café is not popular with customers.','The owner plans to retire soon.'], ans:1, why:"Refusing to sell to larger chains despite offers implies the owner prioritises independence over financial gain." }, { lvl:'B1', cat:'Vocabulary', text:"Choose the word closest in meaning to 'determined'.", ctx:null, opts:['Confused','Resolute','Careless','Frightened'], ans:1, why:"'Resolute' means admirably purposeful and determined." }, // ── B2 ── { lvl:'B2', cat:'Grammar', text:"Which sentence uses the passive voice correctly?", ctx:null, opts:['The results announced yesterday.','The results were announced yesterday.','The results have announced yesterday.','The results was announce yesterday.'], ans:1, why:"Passive: was/were + past participle. 'Were announced' is the correct form." }, { lvl:'B2', cat:'Vocabulary', text:"Select the most precise word: 'The scientist's findings ___ the existing theory.'", ctx:null, opts:['broke','contradicted','stopped','finished'], ans:1, why:"'Contradicted' precisely means 'was in conflict with or denied the truth of'." }, { lvl:'B2', cat:'Grammar', text:"Choose the correct option: 'Not only ___ late, but she also forgot her notes.'", ctx:null, opts:['she arrived','did she arrive','she did arrive','arrived she'], ans:1, why:"'Not only' at the start of a clause triggers subject-auxiliary inversion: 'did she arrive'." }, { lvl:'B2', cat:'Reading', text:"What does the author suggest about urban planning?", ctx:"While mixed-use developments are often lauded as solutions to urban sprawl, critics point out that without adequate public transport links, these communities risk becoming car-dependent enclaves that reproduce the very problems they seek to solve.", opts:['Mixed-use developments always fail.','Good public transport is essential for mixed-use areas to succeed.','Urban sprawl is not a serious problem.','Car use should be banned in cities.'], ans:1, why:"The author implies that without transport links, mixed-use developments fail — so transport is the key condition for success." }, { lvl:'B2', cat:'Vocabulary', text:"Which sentence uses 'albeit' correctly?", ctx:null, opts:['She passed the exam, albeit she studied hard.','She passed, albeit with a lower grade than expected.','Albeit she was tired, she continued.','She was, albeit, happy about the results.'], ans:1, why:"'Albeit' means 'although' and is used mid-sentence before a phrase, not a full clause." }, // ── C1 ── { lvl:'C1', cat:'Grammar', text:"Identify the grammatically correct sentence.", ctx:null, opts:['Scarcely had he arrived when the meeting began.','Scarcely he had arrived when the meeting began.','Scarcely had he arrived than the meeting began.','Scarcely the meeting had began when he arrived.'], ans:0, why:"'Scarcely had + subject + past participle…when' — inversion required; 'when' not 'than' follows 'scarcely'." }, { lvl:'C1', cat:'Vocabulary', text:"Choose the word that best fits: 'Her argument was ___, dismantling each counterpoint with precision.'", ctx:null, opts:['verbose','cogent','ambiguous','tentative'], ans:1, why:"'Cogent' means clear, logical, and convincing — exactly what the sentence describes." }, { lvl:'C1', cat:'Grammar', text:"Which option correctly completes the sentence? 'The report recommended that the policy ___ immediately.'", ctx:null, opts:['is revised','was revised','be revised','would be revised'], ans:2, why:"After 'recommend that', the subjunctive mood requires the bare infinitive: 'be revised'." }, { lvl:'C1', cat:'Reading', text:"What rhetorical strategy does the author use in this passage?", ctx:"To say that technology is neutral is to say that a knife is neutral — technically true, yet wilfully blind to the reality that objects are designed with intent and used within social contexts that are anything but neutral.", opts:['Statistical evidence','Analogy to expose a flaw in reasoning','An appeal to authority','A direct definition'], ans:1, why:"The author uses the analogy of a knife to challenge and undermine the claim that technology is neutral." }, { lvl:'C1', cat:'Vocabulary', text:"Select the most appropriate word: 'The documentary takes a ___ approach, refusing to offer simple answers to complex social questions.'", ctx:null, opts:['superficial','nuanced','biased','conclusive'], ans:1, why:"'Nuanced' means acknowledging complexity and subtlety — exactly what 'refusing simple answers' describes." }, // ── C2 ── { lvl:'C2', cat:'Grammar', text:"Which sentence is stylistically and grammatically impeccable in formal written English?", ctx:null, opts:['The extent to which climate policy has failed is something that we must reckon with.','It is the extent of climate policy failure with which we must reckon.','Climate policy failure is an extent with which we must reckon.','With the extent of climate policy failure, this is what we must reckon with.'], ans:1, why:"Option B uses formal fronting and avoids ending on a preposition, producing the most elegant, precise formal construction." }, { lvl:'C2', cat:'Vocabulary', text:"Choose the word that most precisely captures the meaning: 'A ___ silence fell over the room as the verdict was read.'", ctx:null, opts:['quiet','deep','sepulchral','large'], ans:2, why:"'Sepulchral' means suggesting a tomb — deeply solemn and deathly still. It is the only choice that captures the precise gravity of the moment." }, { lvl:'C2', cat:'Reading', text:"What is the author's primary purpose?", ctx:"One might argue that the very concept of 'cultural appropriation' presupposes a static, bounded notion of culture — an essentialist fantasy at odds with the fluid, hybridised realities of how cultures have always evolved through contact, exchange, and mutual transformation.", opts:['To defend cultural appropriation unconditionally.','To challenge the theoretical assumptions underlying the concept of cultural appropriation.','To argue that cultures should not mix.','To provide a historical account of cultural exchange.'], ans:1, why:"The author questions the theoretical premise of 'cultural appropriation' — not defending or condemning it, but interrogating its underlying concept." }, { lvl:'C2', cat:'Grammar', text:"Which sentence demonstrates the most sophisticated use of grammar?", ctx:null, opts:['Had the government intervened earlier, the crisis might never have escalated to the degree it did.','If the government had intervened earlier, the crisis might not have gotten as bad.','The government should have intervened earlier and then the crisis would be less bad.','Earlier government intervention could have stopped the crisis from getting worse.'], ans:0, why:"Option A uses inverted third conditional ('Had + subject') — the most formal and precise construction, with 'escalated to the degree it did' showing elegant lexical control." }, { lvl:'C2', cat:'Vocabulary', text:"Select the most precise word: 'The philosopher's later work represented a clear ___ from the rationalism of his youth.'", ctx:null, opts:['change','apostasy','improvement','update'], ans:1, why:"'Apostasy' means the abandonment of a belief or principle — the most precise word for a thinker repudiating their earlier intellectual position." }, ]; // ════════════════════════════════════════════ // CEFR PROFILES // ════════════════════════════════════════════ const LEVELS = { A1:{ color:'var(--a1)', name:'Beginner', desc:`You can understand and use very basic expressions and simple phrases. You can introduce yourself and ask and answer questions about personal details. This is the first step on your English journey.`, can:['Understand familiar words and very basic phrases','Introduce yourself','Ask and answer simple personal questions'], need:'Build a foundation: basic verb forms, everyday vocabulary, simple sentence structure.', cta:'Start from scratch — beginner English course', ctaSub:'Build the foundation you need from day one.' }, A2:{ color:'var(--a2)', name:'Elementary', desc:`You can understand sentences related to everyday topics such as shopping, family, and work. You can communicate in simple, routine tasks. You're past the basics — now it's time to build fluency.`, can:['Understand short, simple texts','Communicate in routine tasks','Describe your background and immediate environment'], need:'Expand tense range, common vocabulary topics, and simple connectors.', cta:'Elementary English — accelerate to B1', ctaSub:'Structured grammar and vocabulary for fast progress.' }, B1:{ color:'var(--b1)', name:'Intermediate', desc:`You can deal with most situations likely to arise while travelling. You can produce simple connected text on familiar topics and describe experiences, events, and ambitions. You're in the middle — the most important level to push through.`, can:['Handle travel and everyday situations','Write simple connected texts','Describe experiences and give reasons for opinions'], need:'Complex sentences, wider vocabulary range, more sophisticated grammar structures.', cta:'Break through to B2 — upper-intermediate course', ctaSub:'The most important leap in English learning.' }, B2:{ color:'var(--b2)', name:'Upper-Intermediate', desc:`You can understand the main ideas of complex text on both concrete and abstract topics. You can interact with a degree of fluency and spontaneity. You're approaching professional competence — C1 is within reach.`, can:['Understand complex texts on abstract topics','Interact fluently with native speakers','Produce clear, detailed text on a wide range of subjects'], need:'Sophisticated vocabulary, advanced grammar, academic and professional register.', cta:'Reach C1 — advanced English programme', ctaSub:'Precision, sophistication, and professional fluency.' }, C1:{ color:'var(--c1)', name:'Advanced', desc:`You can express yourself fluently and spontaneously without much obvious searching for expressions. You can use language flexibly and effectively for social, academic, and professional purposes. You're nearly at mastery level.`, can:['Express yourself fluently on complex topics','Use language effectively in academic and professional contexts','Understand a wide range of long, demanding texts'], need:'Lexical sophistication, stylistic precision, mastery of nuance and register.', cta:'Push to C2 — English mastery programme', ctaSub:'The final stage: nuance, style, and total command.' }, C2:{ color:'var(--c2)', name:'Mastery', desc:`You can understand with ease virtually everything heard or read. You can summarise information from different sources, reconstructing arguments coherently. Your English is at native-equivalent level — exceptional achievement.`, can:['Understand virtually everything you hear or read','Summarise and reconstruct arguments with precision','Express yourself spontaneously with fine shades of meaning'], need:'Maintain and refine. Consider specialist academic or professional English.', cta:'Mastery-level English — specialist programme', ctaSub:'Academic writing, professional communication, expert refinement.' } }; // ════════════════════════════════════════════ // STATE // ════════════════════════════════════════════ let cIdx = 0, answered = false; let gramC=0,gramT=0, vocabC=0,vocabT=0, readC=0,readT=0; let leadName='', leadEmail=''; // ════════════════════════════════════════════ // GATE // ════════════════════════════════════════════ function validateGate(){ const n = document.getElementById('gateFirstName').value.trim(); const e = document.getElementById('gateEmail').value.trim(); const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e); document.getElementById('gateBtn').disabled = !(n.length > 0 && emailOk); } // ── CONFIGURATION — fill these in before deploying ─────────────────────── const CONFIG = { // 1. Google Apps Script web app URL (see setup guide below) APPS_SCRIPT_URL: 'https://script.google.com/macros/s/AKfycbwPNyuPHP7-5j3Pf2UGCue1wHDcYcnwyhBg5GcGMAjVtuplw_KBXEgv3HvfL9zd5A9t/exec', // 2. Brevo (Sendinblue) API key — found in Brevo → Account → SMTP & API → API Keys BREVO_API_KEY: 'Yxkeysib-5d444512804b46213af006b7da2f1c92bb1009ac317f0fd3a0e38c7dd48a4a1f-YvfuClqoioBwH6o3', // 3. Brevo list ID — found in Brevo → Contacts → Lists (the number in the URL) BREVO_LIST_ID: 3, // 4. Set to true once both integrations are configured SHEETS_ENABLED: true, BREVO_ENABLED: true, }; // ───────────────────────────────────────────────────────────────────────── async function submitGate(){ leadName = document.getElementById('gateFirstName').value.trim(); leadEmail = document.getElementById('gateEmail').value.trim(); const sw = document.getElementById('savingWrap'); sw.style.display = 'flex'; document.getElementById('gateBtn').disabled = true; // ── 1. GOOGLE SHEETS (initial lead capture) ─────────────────────────── // Saves: name, email, timestamp, source // The Apps Script (see bottom of file) appends a new row to your sheet. if(CONFIG.SHEETS_ENABLED && CONFIG.APPS_SCRIPT_URL !== 'YOUR_APPS_SCRIPT_URL_HERE'){ try { await fetch(CONFIG.APPS_SCRIPT_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'lead', name: leadName, email: leadEmail, timestamp: new Date().toISOString(), source: 'cefr-placement-test' }) }); } catch(e){ console.warn('Sheets lead save failed:', e); } } // ── 2. BREVO — create contact in your list ──────────────────────────── // Creates (or updates) the contact with FIRSTNAME and SOURCE attributes. // This fires any automation you have set up for new contacts in this list. if(CONFIG.BREVO_ENABLED && CONFIG.BREVO_API_KEY !== 'YOUR_BREVO_API_KEY_HERE'){ try { await fetch('https://api.brevo.com/v3/contacts', { method: 'POST', headers: { 'api-key': CONFIG.BREVO_API_KEY, 'Content-Type': 'application/json' }, body: JSON.stringify({ email: leadEmail, attributes: { FIRSTNAME: leadName, SOURCE: 'CEFR_PLACEMENT_TEST' }, listIds: [CONFIG.BREVO_LIST_ID], updateEnabled: true // updates contact if email already exists }) }); } catch(e){ console.warn('Brevo contact create failed:', e); } } sw.style.display = 'none'; showScreen('screen-question'); renderQ(); } // ════════════════════════════════════════════ // SCREENS // ════════════════════════════════════════════ const TOTAL = QS.length + 1; function showScreen(id){ document.querySelectorAll('.screen').forEach(s=>{ s.classList.remove('active'); s.style.display='none'; }); const el = document.getElementById(id); el.style.display = 'block'; void el.offsetWidth; el.classList.add('active'); window.scrollTo({top:0,behavior:'smooth'}); const stepMap = {'screen-gate':0,'screen-question':cIdx+1,'screen-result':TOTAL}; const step = stepMap[id] ?? cIdx+1; document.getElementById('progressBar').style.width = ((step/TOTAL)*100)+'%'; window.parent.postMessage({ type:'resize', height: document.body.scrollHeight }, '*'); } // ════════════════════════════════════════════ // QUESTIONS // ════════════════════════════════════════════ function renderQ(){ const q = QS[cIdx]; answered = false; document.getElementById('qCounter').textContent = `Question ${cIdx+1} of ${QS.length}`; document.getElementById('qTag').textContent = q.cat; document.getElementById('qText').textContent = q.text; const ctx = document.getElementById('qContext'); q.ctx ? (ctx.textContent=q.ctx, ctx.style.display='block') : (ctx.style.display='none'); const wrap = document.getElementById('optWrap'); wrap.innerHTML=''; ['A','B','C','D'].forEach((l,i)=>{ const b = document.createElement('button'); b.className='opt'; b.innerHTML=`<span class="opt-ltr">${l}</span>${q.opts[i]}`; b.onclick=()=>pick(i,b); wrap.appendChild(b); }); const fb=document.getElementById('fbBox'); fb.className='feedback-box'; fb.textContent=''; const nb=document.getElementById('nextBtn'); nb.disabled=true; nb.innerHTML=`${cIdx===QS.length-1?'See my results':'Next'} <svg viewBox="0 0 24 24" style="width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12,5 19,12 12,19"/></svg>`; } function pick(i, btn){ if(answered) return; answered=true; const q=QS[cIdx]; document.querySelectorAll('.opt').forEach(o=>o.style.pointerEvents='none'); const ok = i===q.ans; // Track by category if(q.cat==='Grammar') { gramT++; if(ok) gramC++; } else if(q.cat==='Vocabulary') { vocabT++; if(ok) vocabC++; } else { readT++; if(ok) readC++; } if(ok){ btn.classList.add('correct'); const fb=document.getElementById('fbBox'); fb.className='feedback-box fb-correct show'; fb.innerHTML=`<strong>✓ Correct.</strong> ${q.why}`; } else { btn.classList.add('wrong'); document.querySelectorAll('.opt')[q.ans].classList.add('correct'); const fb=document.getElementById('fbBox'); fb.className='feedback-box fb-wrong show'; fb.innerHTML=`<strong>✗ Not quite.</strong> ${q.why}`; } document.getElementById('nextBtn').disabled=false; } function nextQ(){ cIdx++; if(cIdx>=QS.length){ showScreen('screen-result'); renderResult(); } else { showScreen('screen-question'); renderQ(); } } // ════════════════════════════════════════════ // RESULT // ════════════════════════════════════════════ function calcLevel(){ // Score per CEFR level (5 questions each) const byLevel={A1:0,A2:0,B1:0,B2:0,C1:0,C2:0}; const totLevel={A1:0,A2:0,B1:0,B2:0,C1:0,C2:0}; QS.forEach((q,i)=>{ const cat=q.cat, lvl=q.lvl; totLevel[lvl]++; // Check if answered correctly (we stored by category not question index, so re-derive) }); // Simple approach: overall % maps to level const total = gramT+vocabT+readT; const correct = gramC+vocabC+readC; const pct = total > 0 ? correct/total : 0; if(pct >= 0.92) return 'C2'; if(pct >= 0.78) return 'C1'; if(pct >= 0.62) return 'B2'; if(pct >= 0.46) return 'B1'; if(pct >= 0.28) return 'A2'; return 'A1'; } function renderResult(){ const lvlCode = calcLevel(); const p = LEVELS[lvlCode]; // Badge document.getElementById('levelCode').textContent = lvlCode; document.getElementById('levelName').textContent = p.name; const badge = document.getElementById('levelBadge'); badge.style.background = `${p.color}22`; badge.style.border = `1.5px solid ${p.color}66`; document.getElementById('levelCode').style.color = p.color; // Scale document.querySelectorAll('.cefr-seg').forEach(seg=>{ seg.classList.remove('active'); if(seg.dataset.lvl===lvlCode) seg.classList.add('active'); }); // Description document.getElementById('resultDesc').textContent = `${leadName}, ${p.desc}`; // Score bars const gPct = gramT ? Math.round((gramC/gramT)*100) : 0; const vPct = vocabT ? Math.round((vocabC/vocabT)*100) : 0; const rPct = readT ? Math.round((readC/readT)*100) : 0; document.getElementById('gramScore').textContent = `${gramC}/${gramT}`; document.getElementById('vocabScore').textContent = `${vocabC}/${vocabT}`; document.getElementById('readScore').textContent = `${readC}/${readT}`; setTimeout(()=>{ document.getElementById('gramBar').style.width = gPct+'%'; document.getElementById('gramBar').style.background = p.color; document.getElementById('vocabBar').style.width = vPct+'%'; document.getElementById('vocabBar').style.background = p.color; document.getElementById('readBar').style.width = rPct+'%'; document.getElementById('readBar').style.background = p.color; }, 250); // Skills grid const sg = document.getElementById('skillsGrid'); sg.innerHTML=''; [ {label:'Your level', val:`${lvlCode} — ${p.name}`}, {label:'Next target', val:nextLevel(lvlCode)}, {label:'Key gap', val:p.need.split('.')[0]}, {label:'Strongest area', val:bestArea()} ].forEach(s=>{ sg.innerHTML+=`<div class="skill-card"><div class="skill-label">${s.label}</div><div class="skill-val">${s.val}</div></div>`; }); // CTA document.getElementById('ctaTitle').textContent = p.cta; document.getElementById('ctaSub').textContent = p.ctaSub; document.getElementById('resultEmailDisplay').textContent = leadEmail; // ── SAVE RESULT TO SHEETS & BREVO ──────────────────────────────────── // Called after renderResult() so lvlCode, gPct, vPct, rPct are in scope. saveResult(lvlCode, gPct, vPct, rPct); } async function saveResult(lvlCode, gPct, vPct, rPct){ // ── 1. GOOGLE SHEETS — update row with CEFR result ──────────────────── // Sends a second POST with action:'result'. The Apps Script checks if the // email already exists and updates that row, or appends a new one. if(CONFIG.SHEETS_ENABLED && CONFIG.APPS_SCRIPT_URL !== 'YOUR_APPS_SCRIPT_URL_HERE'){ try { await fetch(CONFIG.APPS_SCRIPT_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'result', name: leadName, email: leadEmail, level: lvlCode, gramPct: gPct, vocabPct: vPct, readPct: rPct, timestamp: new Date().toISOString() }) }); } catch(e){ console.warn('Sheets result save failed:', e); } } // ── 2. BREVO — update contact with CEFR level attribute ─────────────── // Adds CEFR_LEVEL to the contact. In Brevo you can then: // • Create a segment: CEFR_LEVEL = B1 // • Trigger an automation: "When contact attribute CEFR_LEVEL is set → send email sequence" // Each level gets a different email series pointing to the right BandUp module. if(CONFIG.BREVO_ENABLED && CONFIG.BREVO_API_KEY !== 'YOUR_BREVO_API_KEY_HERE'){ try { // Update contact attributes (PATCH by email) await fetch(`https://api.brevo.com/v3/contacts/${encodeURIComponent(leadEmail)}`, { method: 'PUT', headers: { 'api-key': CONFIG.BREVO_API_KEY, 'Content-Type': 'application/json' }, body: JSON.stringify({ attributes: { CEFR_LEVEL: lvlCode, GRAM_SCORE: gPct, VOCAB_SCORE: vPct, READ_SCORE: rPct } }) }); } catch(e){ console.warn('Brevo result update failed:', e); } } } function nextLevel(l){ const order=['A1','A2','B1','B2','C1','C2']; const i=order.indexOf(l); return i<order.length-1 ? order[i+1]+' — '+LEVELS[order[i+1]].name : 'C2 — You\'re at the top!'; } function bestArea(){ const scores=[ {name:'Grammar', pct: gramT ? gramC/gramT : 0}, {name:'Vocabulary',pct: vocabT ? vocabC/vocabT : 0}, {name:'Reading', pct: readT ? readC/readT : 0} ]; scores.sort((a,b)=>b.pct-a.pct); return scores[0].name; } </script>  </body> </html>