Human Circulatory System <link rel=”preconnect” href=”https://fonts.googleapis.com”> <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin=””> <link href=”https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap” rel=”stylesheet”> <style> :root{ –navy:#102a43; –blue:#1976d2; –blue-dark:#1257a6; –blue-soft:#eaf4ff; –cyan:#0ea5e9; –red:#dc2626; –red-soft:#fff1f2; –green:#15803d; –green-soft:#ecfdf3; –purple:#6d28d9; –text:#172033; –muted:#667085; –bg:#f3f7fc; –card:#ffffff; –line:#dbe5f0; –shadow:0 18px 45px rgba(16,42,67,.12); –shadow-small:0 5px 18px rgba(16,42,67,.08); –radius:20px; } *{box-sizing:border-box} html{-webkit-font-smoothing:antialiased} body{ margin:0; font-family:”DM Sans”,”Segoe UI”,Arial,sans-serif; color:var(–text); min-height:100vh; padding:28px 14px 60px; background: radial-gradient(circle at 8% 5%,rgba(25,118,210,.12),transparent 28%), radial-gradient(circle at 95% 8%,rgba(220,38,38,.08),transparent 25%), linear-gradient(180deg,#f8fbff 0%,var(–bg) 100%); } .wrap{max-width:720px;margin:0 auto} header{text-align:center;margin-bottom:22px} .badge{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:var(–blue-soft); color:var(–blue-dark); border:1px solid #c8e0fa; font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } header h1{ font-family:”Plus Jakarta Sans”,sans-serif; margin:13px 0 7px; font-size:clamp(1.65rem,5vw,2.15rem); line-height:1.2; font-weight:800; color:var(–navy); } header p{margin:0;color:var(–muted);font-size:.92rem} .scoretrack{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 14px; } .tag{ padding:9px 12px; border-radius:12px; text-align:center; font-size:.82rem; font-weight:700; } .tag.correct{background:var(–green-soft);color:var(–green);border:1px solid #b7e6c8} .tag.wrong{background:var(–red-soft);color:var(–red);border:1px solid #fecdd3} .progress-meta{ display:flex; justify-content:space-between; align-items:center; color:var(–muted); font-size:.78rem; font-weight:600; margin-bottom:7px; } #progress-wrap{ height:8px; background:#dfe8f2; border-radius:99px; overflow:hidden; } #progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(–blue),var(–cyan)); border-radius:99px; transition:width .35s ease; } .card{ margin-top:18px; background:var(–card); border:1px solid var(–line); border-radius:var(–radius); padding:30px; box-shadow:var(–shadow); position:relative; overflow:hidden; animation:slideIn .35s ease; } .card::after{ content:””; position:absolute; width:120px;height:120px; border-radius:50%; background:rgba(25,118,210,.045); right:-55px;top:-55px; } @keyframes slideIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } .qnum{ display:inline-block; color:var(–blue-dark); background:#eef6ff; border-radius:8px; padding:5px 9px; font-size:.72rem; font-weight:800; letter-spacing:.08em; margin-bottom:14px; } .qtext{ font-family:”Plus Jakarta Sans”,sans-serif; font-size:1.18rem; line-height:1.5; font-weight:700; color:var(–navy); margin-bottom:20px; } .options{display:grid;gap:10px} .option{ display:flex; align-items:flex-start; gap:12px; width:100%; border:1.5px solid var(–line); border-radius:14px; padding:14px 15px; background:#fbfdff; color:#344054; font:500 1rem/1.45 “DM Sans”,sans-serif; text-align:left; cursor:pointer; transition:.16s ease; } .option:hover:not(.disabled){ border-color:#7ab6ee; background:#f5faff; transform:translateX(2px); } .letter{ flex:0 0 29px; width:29px;height:29px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:#e9eef5; color:#475467; font-weight:800; font-size:.82rem; } .option.correct{ background:var(–green-soft); border-color:#22a45a; color:#166534; } .option.correct .letter{background:var(–green);color:#fff} .option.wrong{ background:var(–red-soft); border-color:#ef4444; color:#b91c1c; animation:shake .35s ease; } .option.wrong .letter{background:var(–red);color:#fff} .option.disabled{cursor:default} .option.disabled:not(.correct):not(.wrong){opacity:.52} @keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-3px)} } .explain{ display:none; margin-top:17px; padding:13px 15px; border-radius:12px; background:#f6f8fb; border:1px solid #e3e9f1; color:#475467; font-size:.88rem; line-height:1.55; } .explain.show{display:block} .nav{ display:flex; justify-content:flex-end; margin-top:20px; } .next-btn,#restart-btn{ border:0; border-radius:12px; padding:12px 22px; color:white; background:linear-gradient(135deg,var(–blue),var(–blue-dark)); font:700 .92rem “DM Sans”,sans-serif; cursor:pointer; box-shadow:0 8px 18px rgba(25,118,210,.24); transition:.15s ease; } .next-btn{opacity:0;pointer-events:none} .next-btn.show{opacity:1;pointer-events:auto} .next-btn:hover,#restart-btn:hover{transform:translateY(-1px)} #result{ display:none; text-align:center; background:white; border:1px solid var(–line); border-radius:var(–radius); padding:42px 28px; box-shadow:var(–shadow); } #result h2{ font-family:”Plus Jakarta Sans”,sans-serif; color:var(–navy); margin:0; } .big-score{ font-family:”Plus Jakarta Sans”,sans-serif; font-size:3.5rem; font-weight:800; color:var(–blue); margin:12px 0 5px; } .sub{color:var(–muted);margin-bottom:25px} .result-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:25px; } .result-box{ padding:17px 8px; border-radius:14px; border:1px solid var(–line); } .result-box.total{background:#f7faff;color:var(–navy)} .result-box.correct{background:var(–green-soft);color:var(–green)} .result-box.wrong{background:var(–red-soft);color:var(–red)} .result-box .num{ display:block; font-size:1.8rem; font-weight:800; margin-bottom:3px; } .result-box .lbl{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; } @media(max-width:520px){ body{padding:20px 11px 45px} .card{padding:23px 18px} .qtext{font-size:1.05rem} .option{font-size:.94rem} #result{padding:34px 18px} .big-score{font-size:2.8rem} } </style> <div class=”wrap”> <header> <span class=”badge”>Biology · Interactive Quiz</span> <h1>❤️ Human Circulatory System</h1> <p>25 Questions · Class 6–8 · Basic to Advanced</p> </header> <div class=”scoretrack”> <span class=”tag correct” id=”live-correct”>✓ Correct: 0</span> <span class=”tag wrong” id=”live-wrong”>✕ Wrong: 0</span> </div> <div class=”progress-meta”> <span>Quiz Progress</span> <span id=”progress-text”>Question 1 of 25</span> </div> <div id=”progress-wrap”><div id=”progress-bar”></div></div> <div class=”card” id=”quiz-card”> <div class=”qnum” id=”qnum”>QUESTION 1 OF 25</div> <div class=”qtext” id=”qtext”></div> <div class=”options” id=”options”></div> <div class=”explain” id=”explain”></div> <div class=”nav”><button class=”next-btn” id=”next-btn”>Next Question →</button></div> </div> <div id=”result”> <h2>Quiz Complete!</h2> <div class=”big-score” id=”score-percent”>0%</div> <div class=”sub” id=”score-msg”></div> <div class=”result-grid”> <div class=”result-box total”><span class=”num” id=”res-total”>25</span><span class=”lbl”>Total</span></div> <div class=”result-box correct”><span class=”num” id=”res-correct”>0</span><span class=”lbl”>Correct</span></div> <div class=”result-box wrong”><span class=”num” id=”res-wrong”>0</span><span class=”lbl”>Wrong</span></div> </div> <button id=”restart-btn”>↻ Restart Quiz</button> </div> </div> <script> const questions = [ {q:”Which statement best describes the main function of the circulatory system?”, opts:[“It breaks food into simpler substances”,”It transports oxygen, nutrients, hormones and wastes around the body”,”It controls all body movements”],ans:1}, {q:”Why is the heart described as a muscular pump?”, opts:[“It produces blood”,”It stores oxygen”,”It contracts to push blood through blood vessels”],ans:2}, {q:”A red blood cell travels from the lungs toward the heart. Which blood vessel does it enter?”, opts:[“Pulmonary vein”,”Pulmonary artery”,”Vena cava”],ans:0}, {q:”Which chamber receives oxygen-rich blood from the lungs?”, opts:[“Right atrium”,”Left atrium”,”Right ventricle”],ans:1}, {q:”Which chamber pumps oxygen-rich blood into the aorta?”, opts:[“Right ventricle”,”Left atrium”,”Left ventricle”],ans:2}, {q:”Why is the wall of the left ventricle thicker than that of the right ventricle?”, opts:[“It pumps blood to the entire body”,”It receives blood directly from the lungs”,”It contains more valves”],ans:0}, {q:”Which blood vessel carries oxygen-poor blood from the heart to the lungs?”, opts:[“Pulmonary vein”,”Pulmonary artery”,”Aorta”],ans:1}, {q:”Which statement about arteries is generally correct?”, opts:[“They carry blood away from the heart”,”They always carry oxygen-rich blood”,”They always carry blood toward the heart”],ans:0}, {q:”Which statement about veins is generally correct?”, opts:[“They always carry oxygen-rich blood”,”They carry blood away from the heart”,”They generally carry blood toward the heart”],ans:2}, {q:”Why do many veins contain valves?”, opts:[“To increase the amount of oxygen in blood”,”To prevent the backward flow of blood”,”To make blood cells”],ans:1}, {q:”What makes capillaries suitable for exchange of substances with body cells?”, opts:[“They have very thick walls”,”They have very thin walls”,”They have muscular walls like the heart”],ans:1}, {q:”Which blood component is mainly responsible for carrying oxygen?”, opts:[“Red blood cells”,”Platelets”,”White blood cells”],ans:0}, {q:”Why is haemoglobin important in red blood cells?”, opts:[“It helps blood clot”,”It helps destroy germs”,”It binds with oxygen for transport”],ans:2}, {q:”A person gets a cut and bleeding gradually slows down. Which blood component plays the major role in clot formation?”, opts:[“Platelets”,”Red blood cells”,”Plasma”],ans:0}, {q:”Which blood component helps defend the body against infections?”, opts:[“Platelets”,”White blood cells”,”Red blood cells”],ans:1}, {q:”What is the main role of plasma?”, opts:[“It forms the walls of arteries”,”It pumps blood through the heart”,”It transports dissolved substances such as nutrients and wastes”],ans:2}, {q:”A person is exercising vigorously. Why does the heart usually beat faster?”, opts:[“The muscles need increased delivery of oxygen and nutrients”,”The blood needs to become thicker”,”The lungs need to stop exchanging gases”],ans:0}, {q:”Which sequence correctly shows the movement of oxygen-poor blood from the body to the lungs?”, opts:[“Body → Left atrium → Left ventricle → Lungs”,”Body → Right atrium → Right ventricle → Pulmonary artery → Lungs”,”Body → Right ventricle → Left atrium → Lungs”],ans:1}, {q:”Which sequence correctly shows oxygen-rich blood travelling from the lungs to the body?”, opts:[“Lungs → Pulmonary vein → Left atrium → Left ventricle → Aorta → Body”,”Lungs → Pulmonary artery → Right atrium → Aorta → Body”,”Lungs → Vena cava → Right atrium → Left ventricle → Body”],ans:0}, {q:”Why is human circulation called double circulation?”, opts:[“Blood enters the heart twice during one complete journey through the body”,”The heart has two chambers”,”Blood travels through two separate organs only”],ans:0}, {q:”What is the main advantage of double circulation in humans?”, opts:[“It allows oxygen-rich and oxygen-poor blood to remain efficiently separated”,”It prevents blood from reaching the lungs”,”It allows the heart to stop between beats”],ans:0}, {q:”A blockage occurs in a coronary artery. Which organ is directly affected by reduced blood supply?”, opts:[“Brain”,”Heart muscle”,”Stomach”],ans:1}, {q:”Suppose the valves in the heart do not close properly. What is the most likely effect?”, opts:[“Some blood may flow backward”,”Blood will stop containing plasma”,”Red blood cells will stop being produced immediately”],ans:0}, {q:”A student says, \”All arteries carry oxygen-rich blood and all veins carry oxygen-poor blood.\” Why is this statement incorrect?”, opts:[“Arteries and veins carry exactly the same type of blood”,”The pulmonary artery carries oxygen-poor blood, while the pulmonary vein carries oxygen-rich blood”,”Only capillaries carry oxygen-rich blood”],ans:1}, {q:”A red blood cell starts in the right atrium and eventually delivers oxygen to a muscle in the leg. Which pathway is correct?”, opts:[“Right atrium → Right ventricle → Pulmonary artery → Lungs → Pulmonary vein → Left atrium → Left ventricle → Aorta → Leg muscle”,”Right atrium → Left ventricle → Aorta → Lungs → Leg muscle”,”Right atrium → Pulmonary vein → Left atrium → Right ventricle → Aorta → Leg muscle”],ans:0} ]; let current=0, correctCount=0, wrongCount=0, answered=false; const letters=[“A”,”B”,”C”]; const qnumEl=document.getElementById(“qnum”); const qtextEl=document.getElementById(“qtext”); const optionsEl=document.getElementById(“options”); const explainEl=document.getElementById(“explain”); const nextBtn=document.getElementById(“next-btn”); const progressBar=document.getElementById(“progress-bar”); const progressText=document.getElementById(“progress-text”); const liveCorrect=document.getElementById(“live-correct”); const liveWrong=document.getElementById(“live-wrong”); const quizCard=document.getElementById(“quiz-card”); const resultEl=document.getElementById(“result”); function loadQuestion(){ answered=false; const item=questions[current]; qnumEl.textContent=`QUESTION ${current+1} OF ${questions.length}`; qtextEl.textContent=item.q; optionsEl.innerHTML=””; explainEl.classList.remove(“show”); explainEl.textContent=””; nextBtn.classList.remove(“show”); item.opts.forEach((text,i)=>{ const btn=document.createElement(“button”); btn.className=”option”; btn.innerHTML=`<span class=”letter”>${letters[i]}</span><span>${text}</span>`; btn.addEventListener(“click”,()=>selectOption(i,btn)); optionsEl.appendChild(btn); }); progressBar.style.width=`${(current/questions.length)*100}%`; progressText.textContent=`Question ${current+1} of ${questions.length}`; } function selectOption(i,btn){ if(answered)return; answered=true; const item=questions[current]; const allOptions=document.querySelectorAll(“.option”); allOptions.forEach(o=>o.classList.add(“disabled”)); if(i===item.ans){ btn.classList.add(“correct”); correctCount++; }else{ btn.classList.add(“wrong”); allOptions[item.ans].classList.add(“correct”); wrongCount++; } liveCorrect.textContent=`✓ Correct: ${correctCount}`; liveWrong.textContent=`✕ Wrong: ${wrongCount}`; nextBtn.classList.add(“show”); } nextBtn.addEventListener(“click”,()=>{ current++; if(current<questions.length){ loadQuestion(); }else{ showResult(); } }); function showResult(){ quizCard.style.display=”none”; document.getElementById(“progress-wrap”).style.display=”none”; document.querySelector(“.progress-meta”).style.display=”none”; document.querySelector(“.scoretrack”).style.display=”none”; resultEl.style.display=”block”; const total=questions.length; const pct=Math.round((correctCount/total)*100); document.getElementById(“score-percent”).textContent=`${pct}%`; document.getElementById(“res-total”).textContent=total; document.getElementById(“res-correct”).textContent=correctCount; document.getElementById(“res-wrong”).textContent=wrongCount; let msg=””; if(pct>=90) msg=”Outstanding! You have a strong understanding of the circulatory system.”; else if(pct>=70) msg=”Great job! Review a few concepts and try for an even higher score.”; else if(pct>=50) msg=”Good effort! Revise the heart, blood vessels and blood flow and try again.”; else msg=”Keep practising! Review the chapter and retake the quiz.”; document.getElementById(“score-msg”).textContent=msg; } document.getElementById(“restart-btn”).addEventListener(“click”,()=>{ current=0; correctCount=0; wrongCount=0; liveCorrect.textContent=”✓ Correct: 0″; liveWrong.textContent=”✕ Wrong: 0″; resultEl.style.display=”none”; quizCard.style.display=”block”; document.getElementById(“progress-wrap”).style.display=”block”; document.querySelector(“.progress-meta”).style.display=”flex”; document.querySelector(“.scoretrack”).style.display=”grid”; loadQuestion(); }); loadQuestion(); </script> Human Circulatory System | Premium Quiz

Premium Biology Quiz