\u0646\u0645\u0648\u0646\u0647 HTML \u062a\u0639\u0627\u0645\u0644\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc | \u0639\u0644\u0648\u0645 \u0648 \u0631\u06cc\u0627\u0636\u06cc \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc<\/title>\n<style>\n:root{--ink:#273043;--muted:#697386;--purple:#6c4ce7;--green:#1f9d68;--greenbg:#eaf8f1;--red:#d7445b;--redbg:#fff0f3;--blue:#3d8bfd;--line:#e7e9f0;--bg:#f7f8fc}\n*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Tahoma,\"Segoe UI\",Arial,sans-serif;line-height:1.9}.wrap{max-width:980px;margin:auto;padding:18px 12px 60px}\n.hero{background:linear-gradient(135deg,#6245dc,#8c6ff0);color:#fff;border-radius:26px;padding:24px;display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:center;box-shadow:0 16px 38px rgba(83,62,167,.18)}.hero h1{margin:0 0 8px;font-size:clamp(25px,4vw,40px);line-height:1.5}.hero p{margin:0;opacity:.95}.hero img{width:100%;max-height:270px;object-fit:cover;border-radius:20px;background:#fff}.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.pill{background:rgba(255,255,255,.16);padding:6px 11px;border-radius:999px;font-size:12px}\n.status{position:sticky;top:8px;z-index:10;margin:14px 0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;box-shadow:0 7px 20px rgba(26,29,46,.06)}.progress{flex:1;min-width:180px;height:10px;background:#ececf4;border-radius:999px;overflow:hidden}.progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--blue));transition:.35s}.score{font-weight:800;color:var(--purple)}\n.section-title{margin:30px 2px 12px;color:#5740bc;font-size:22px}.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;margin:12px 0;box-shadow:0 7px 22px rgba(30,35,60,.045)}.qhead{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}.qnum{display:inline-flex;align-items:center;justify-content:center;background:#eee9ff;color:#5c41c9;border-radius:999px;padding:5px 11px;font-weight:800;font-size:12px;line-height:1.4}.qtitle{font-size:18px;font-weight:800;width:100%;line-height:1.8}.qimg{display:block;width:100%;max-height:310px;object-fit:contain;border-radius:20px!important;background:#fafafa;margin:10px 0 16px;overflow:hidden;box-shadow:0 3px 12px rgba(39,48,67,.06)}\n.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.quiz button.option,.quiz button.visual-choice{-webkit-appearance:none!important;appearance:none!important;border:1px solid #e5e7ef!important;background:#fff!important;color:var(--ink)!important;border-radius:13px!important;padding:11px 12px!important;cursor:pointer;transition:.18s;font:inherit!important;font-weight:700!important;opacity:1!important;text-shadow:none!important}.quiz button.option{text-align:right!important}.quiz button.option:hover,.quiz button.visual-choice:hover{transform:translateY(-1px);border-color:#cfc5ff!important;background:#fbfaff!important;color:var(--ink)!important;opacity:1!important}.quiz button.option.selected,.quiz button.visual-choice.selected{border-color:var(--purple)!important;background:#f3efff!important;color:#4f36b7!important;opacity:1!important}.quiz button.option.correct,.quiz button.visual-choice.correct{border-color:#9ed7bc!important;background:var(--greenbg)!important;color:#146845!important;opacity:1!important}.quiz button.option.wrong,.quiz button.visual-choice.wrong{border-color:#efb0bd!important;background:var(--redbg)!important;color:#9e2e42!important;opacity:1!important}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}button{font:inherit;font-weight:800;border:0;border-radius:11px;padding:9px 14px;cursor:pointer}.btn-primary{background:var(--purple);color:#fff}.btn-soft{background:#eeeafc;color:#5e43c7}.btn-reset{background:#eef1f6;color:#4d5668}.feedback{display:none;margin-top:12px;padding:11px 13px;border-radius:12px;font-size:14px}.feedback.ok{display:block;background:var(--greenbg);color:#176c49}.feedback.bad{display:block;background:var(--redbg);color:#a23148}\n.visual-options{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.visual-choice{text-align:center!important;min-height:96px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px}.emoji{font-size:34px;display:block;margin:0 0 3px}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;margin-top:14px}.dropzone{border:2px dashed #cfd3df;border-radius:18px;min-height:175px;padding:14px;background:#fafbfe;text-align:center}.dropzone h3{margin:0 0 12px;font-size:17px;color:#3d4351}.zone-content{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}.chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:center;margin:14px auto 8px;padding:4px 0}.chip{border:1px solid #dfe2ea;background:#fff;color:var(--ink);border-radius:999px;padding:8px 13px;cursor:grab;user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.5;box-shadow:0 2px 8px rgba(39,48,67,.04);transition:.18s}.chip:hover{border-color:#cfc5ff;background:#fbfaff;transform:translateY(-1px)}.chip.used{opacity:.35;pointer-events:none}.flashcard{perspective:900px;height:170px;cursor:pointer;margin-top:10px}.flash-inner{position:relative;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}.flashcard.flipped .flash-inner{transform:rotateY(180deg)}.flash-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;border:1px solid var(--line);background:#fff;font-weight:800}.flash-back{transform:rotateY(180deg);background:#eef9f3;color:#176c49}.final{display:none;text-align:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;margin-top:20px}.final.show{display:block}.final img{width:170px;max-width:55%;border-radius:16px}.small{font-size:12px;color:var(--muted)}\n@media(max-width:720px){.hero{grid-template-columns:1fr}.hero img{max-height:220px}.options{grid-template-columns:1fr}.visual-options{grid-template-columns:repeat(2,1fr)}.demo-grid{grid-template-columns:1fr}.qhead{gap:7px}.qtitle{font-size:17px}.qimg{border-radius:18px!important}.chips{justify-content:center}.dropzone{min-height:145px}}\n\n\/* ===== \u0627\u0641\u0632\u0648\u062f\u0647\u200c\u0647\u0627\u06cc \u0646\u0633\u062e\u0647 \u062a\u06a9\u0645\u06cc\u0644\u200c\u0634\u062f\u0647\u061b \u0628\u062f\u0648\u0646 \u062d\u0630\u0641 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc ===== *\/\n.bonus-label{\n display:inline-flex;align-items:center;gap:6px;\n background:#fff3cf;color:#8a6310;border:1px solid #f0d98e;\n border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;margin-bottom:9px\n}\n.sequence-grid{\n display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px\n}\n.sequence-card{\n -webkit-appearance:none!important;appearance:none!important;\n border:1px solid #e3e6ef!important;background:#fff!important;color:var(--ink)!important;\n border-radius:16px!important;padding:14px 10px!important;cursor:pointer;\n min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;\n gap:7px;font:inherit!important;font-weight:800!important;transition:.18s;opacity:1!important\n}\n.sequence-card:hover{\n border-color:#c9bfff!important;background:#fbfaff!important;color:var(--ink)!important;\n transform:translateY(-2px)\n}\n.sequence-card .seq-icon{font-size:38px;line-height:1}\n.sequence-card.picked{border-color:var(--purple)!important;background:#f3efff!important;color:#5138b9!important}\n.sequence-card.seq-ok{border-color:#9ed7bc!important;background:var(--greenbg)!important;color:#146845!important}\n.sequence-card.seq-bad{border-color:#efb0bd!important;background:var(--redbg)!important;color:#9e2e42!important}\n.sequence-result{\n min-height:55px;border:1px dashed #d7dae4;border-radius:14px;margin-top:12px;\n padding:10px 12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#fafbfe\n}\n.sequence-pill{\n display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #e2e5ed;\n border-radius:999px;padding:6px 10px;font-weight:700;font-size:13px\n}\n.lab-wrap{\n display:grid;grid-template-columns:.85fr 1.15fr;gap:15px;align-items:stretch;margin-top:12px\n}\n.lab-visual{\n border:1px solid #e3e6ef;border-radius:18px;background:linear-gradient(180deg,#f5fbff,#fbfff8);\n min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;\n padding:18px;text-align:center\n}\n.lab-plant{font-size:86px;line-height:1;transition:.25s;filter:saturate(.75)}\n.lab-status{font-weight:800;margin-top:12px}\n.lab-controls{\n border:1px solid #e3e6ef;border-radius:18px;background:#fff;padding:16px\n}\n.switch-row{\n display:flex;align-items:center;justify-content:space-between;gap:12px;\n border-bottom:1px solid #eef0f5;padding:12px 0\n}\n.switch-row:last-child{border-bottom:0}\n.toggle{\n width:54px;height:30px;border-radius:999px;background:#d8dbe5;position:relative;cursor:pointer;\n border:0!important;padding:0!important;flex:0 0 auto\n}\n.toggle::after{\n content:\"\";position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;\n top:4px;right:4px;box-shadow:0 2px 5px rgba(0,0,0,.16);transition:.2s\n}\n.toggle.on{background:#6c4ce7}\n.toggle.on::after{right:28px}\n.lab-meter{\n height:10px;background:#eceef4;border-radius:999px;overflow:hidden;margin-top:16px\n}\n.lab-meter > div{\n height:100%;width:25%;background:linear-gradient(90deg,#f6b73c,#1f9d68);transition:.3s\n}\n.math-machine{\n display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;margin-top:15px\n}\n.number-box{\n border:1px solid #e1e4ed;border-radius:18px;background:#fff;padding:14px;text-align:center\n}\n.number-title{font-size:13px;color:var(--muted);margin-bottom:7px}\n.number-value{font-size:32px;font-weight:900;color:var(--purple);line-height:1.2}\n.stepper{display:flex;justify-content:center;gap:7px;margin-top:10px}\n.step-btn{\n width:38px;height:38px;border-radius:12px!important;background:#eeeafd!important;color:#5a42c5!important;\n padding:0!important;font-size:21px!important;line-height:1!important\n}\n.math-sign{font-size:28px;font-weight:900;color:#7b8290;text-align:center}\n.total-box{\n background:#eef9f3;border-color:#b5dec8\n}\n.total-box .number-value{color:#176c49}\n.star-line{font-size:26px;letter-spacing:3px;min-height:38px;margin-top:8px;word-break:break-word}\n.mini-tip{\n background:#f5f1ff;border-right:4px solid var(--purple);border-radius:12px;padding:10px 12px;\n margin-top:12px;color:#594b72;font-size:13px\n}\n@media(max-width:720px){\n .sequence-grid{grid-template-columns:repeat(2,1fr)}\n .lab-wrap{grid-template-columns:1fr}\n .math-machine{grid-template-columns:1fr;gap:8px}\n .math-sign{font-size:22px}\n}\n\n<\/style>\n<\/head>\n<body><div class=\"wrap\">\n<section class=\"hero\"><div><div class=\"pills\"><span class=\"pill\">\u0631\u06cc\u0627\u0636\u06cc \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc<\/span><span class=\"pill\">\u0639\u0644\u0648\u0645 \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc<\/span><span class=\"pill\">\u062a\u0639\u0627\u0645\u0644 \u0648\u0627\u0642\u0639\u06cc \u0628\u0627 HTML<\/span><\/div><h1>\u0646\u0645\u0648\u0646\u0647 \u0622\u0645\u0648\u0632\u0634 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc<\/h1><p>\u0646\u0645\u0648\u0646\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0633\u0624\u0627\u0644\u060c \u062a\u0635\u0648\u06cc\u0631\u060c \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0641\u0648\u0631\u06cc\u060c \u0627\u0645\u062a\u06cc\u0627\u0632\u060c \u0628\u0627\u0632\u06cc \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0648 \u0641\u0644\u0634\u200c\u06a9\u0627\u0631\u062a \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc.<\/p><\/div><img decoding=\"async\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-7.webp\" alt=\"\u06a9\u0648\u062f\u06a9\u0627\u0646 \u062f\u0631 \u062d\u0627\u0644 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\"><\/section>\n<div class=\"status\"><div class=\"score\" id=\"scoreText\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u06f0 \u0627\u0632 \u06f3<\/div><div class=\"progress\"><div id=\"progressBar\"><\/div><\/div><button class=\"btn-reset\" onclick=\"resetAll()\">\u0634\u0631\u0648\u0639 \u062f\u0648\u0628\u0627\u0631\u0647<\/button><\/div>\n<h2 class=\"section-title\">\u06f1. \u0633\u0624\u0627\u0644 \u0686\u0647\u0627\u0631\u06af\u0632\u06cc\u0646\u0647\u200c\u0627\u06cc \u0628\u0627 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0641\u0648\u0631\u06cc<\/h2>\n<section class=\"card quiz\" data-answer=\"2\"><div class=\"qhead\"><span class=\"qnum\">\u0633\u0624\u0627\u0644 \u06f1<\/span><div class=\"qtitle\">\u0627\u06af\u0631 \u06f3 \u0633\u06cc\u0628 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 \u0648 \u06f2 \u0633\u06cc\u0628 \u062f\u06cc\u06af\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0686\u0646\u062f \u0633\u06cc\u0628 \u062f\u0627\u0631\u06cc\u0645\u061f<\/div><\/div><img decoding=\"async\" class=\"qimg\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-6.webp\" alt=\"\u0634\u0645\u0627\u0631\u0634 \u062a\u0635\u0648\u06cc\u0631\u06cc\"><div class=\"options\"><button class=\"option\" data-value=\"0\">\u06f4 \u0633\u06cc\u0628<\/button><button class=\"option\" data-value=\"1\">\u06f6 \u0633\u06cc\u0628<\/button><button class=\"option\" data-value=\"2\">\u06f5 \u0633\u06cc\u0628<\/button><button class=\"option\" data-value=\"3\">\u06f7 \u0633\u06cc\u0628<\/button><\/div><div class=\"actions\"><button class=\"btn-primary\" onclick=\"checkQuiz(this)\">\u062b\u0628\u062a \u062c\u0648\u0627\u0628<\/button><button class=\"btn-soft\" onclick=\"showAnswer(this)\">\u0646\u0645\u0627\u06cc\u0634 \u062c\u0648\u0627\u0628<\/button><\/div><div class=\"feedback\"><\/div><\/section>\n<section class=\"card quiz\" data-answer=\"1\"><div class=\"qhead\"><span class=\"qnum\">\u0633\u0624\u0627\u0644 \u06f2<\/span><div class=\"qtitle\">\u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc \u0637\u0648\u0644 \u06cc\u06a9 \u0645\u062f\u0627\u062f \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0648\u0633\u06cc\u0644\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u061f<\/div><\/div><img decoding=\"async\" class=\"qimg\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-4.webp\" alt=\"\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc\"><div class=\"visual-options\"><button class=\"visual-choice\" data-value=\"0\"><span class=\"emoji\">\ud83d\udd2c<\/span>\u0645\u06cc\u06a9\u0631\u0648\u0633\u06a9\u0648\u067e<\/button><button class=\"visual-choice\" data-value=\"1\"><span class=\"emoji\">\ud83d\udccf<\/span>\u062e\u0637\u200c\u06a9\u0634<\/button><button class=\"visual-choice\" data-value=\"2\"><span class=\"emoji\">\u2702\ufe0f<\/span>\u0642\u06cc\u0686\u06cc<\/button><button class=\"visual-choice\" data-value=\"3\"><span class=\"emoji\">\ud83d\udd0d<\/span>\u0630\u0631\u0647\u200c\u0628\u06cc\u0646<\/button><\/div><div class=\"actions\"><button class=\"btn-primary\" onclick=\"checkQuiz(this)\">\u062b\u0628\u062a \u062c\u0648\u0627\u0628<\/button><button class=\"btn-soft\" onclick=\"showAnswer(this)\">\u0646\u0645\u0627\u06cc\u0634 \u062c\u0648\u0627\u0628<\/button><\/div><div class=\"feedback\"><\/div><\/section>\n<section class=\"card quiz\" data-answer=\"3\"><div class=\"qhead\"><span class=\"qnum\">\u0633\u0624\u0627\u0644 \u06f3<\/span><div class=\"qtitle\">\u06a9\u062f\u0627\u0645 \u0645\u0648\u0631\u062f \u0628\u0631\u0627\u06cc \u0631\u0634\u062f \u06cc\u06a9 \u06af\u06cc\u0627\u0647 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a\u061f<\/div><\/div><img decoding=\"async\" class=\"qimg\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-5.webp\" alt=\"\u0631\u0634\u062f \u06af\u06cc\u0627\u0647\"><div class=\"options\"><button class=\"option\" data-value=\"0\">\u067e\u0627\u06a9\u200c\u06a9\u0646<\/button><button class=\"option\" data-value=\"1\">\u0627\u0633\u0628\u0627\u0628\u200c\u0628\u0627\u0632\u06cc<\/button><button class=\"option\" data-value=\"2\">\u0645\u062f\u0627\u062f \u0631\u0646\u06af\u06cc<\/button><button class=\"option\" data-value=\"3\">\u0622\u0628 \u0648 \u0646\u0648\u0631 \u062e\u0648\u0631\u0634\u06cc\u062f<\/button><\/div><div class=\"actions\"><button class=\"btn-primary\" onclick=\"checkQuiz(this)\">\u062b\u0628\u062a \u062c\u0648\u0627\u0628<\/button><button class=\"btn-soft\" onclick=\"showAnswer(this)\">\u0646\u0645\u0627\u06cc\u0634 \u062c\u0648\u0627\u0628<\/button><\/div><div class=\"feedback\"><\/div><\/section>\n<h2 class=\"section-title\">\u06f2. \u0641\u0639\u0627\u0644\u06cc\u062a \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0628\u0627 \u06a9\u0634\u06cc\u062f\u0646 \u0648 \u0631\u0647\u0627 \u06a9\u0631\u062f\u0646<\/h2>\n<section class=\"card\"><div class=\"qtitle\">\u0647\u0631 \u0648\u0633\u06cc\u0644\u0647 \u0631\u0627 \u062f\u0631 \u062f\u0633\u062a\u0647 \u0645\u0646\u0627\u0633\u0628 \u0628\u06cc\u0646\u062f\u0627\u0632<\/div><p class=\"small\">\u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631 \u0628\u06a9\u0634 \u0648 \u0631\u0647\u0627 \u06a9\u0646. \u0631\u0648\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u06cc\u06a9 \u0628\u0627\u0631 \u0631\u0648\u06cc \u06a9\u0627\u0631\u062a \u0628\u0632\u0646 \u0648 \u0628\u0639\u062f \u0631\u0648\u06cc \u062f\u0633\u062a\u0647 \u0645\u0642\u0635\u062f \u0628\u0632\u0646.<\/p><div class=\"chips\"><div class=\"chip\" draggable=\"true\" data-type=\"math\">\ud83d\udccf \u062e\u0637\u200c\u06a9\u0634<\/div><div class=\"chip\" draggable=\"true\" data-type=\"science\">\ud83d\udd2c \u0645\u06cc\u06a9\u0631\u0648\u0633\u06a9\u0648\u067e<\/div><div class=\"chip\" draggable=\"true\" data-type=\"math\">\ud83e\uddee \u0686\u0631\u062a\u06a9\u0647<\/div><div class=\"chip\" draggable=\"true\" data-type=\"science\">\ud83d\udd0d \u0630\u0631\u0647\u200c\u0628\u06cc\u0646<\/div><\/div><div class=\"demo-grid\"><div class=\"dropzone\" data-zone=\"math\"><h3>\u0631\u06cc\u0627\u0636\u06cc<\/h3><div class=\"zone-content\"><\/div><\/div><div class=\"dropzone\" data-zone=\"science\"><h3>\u0639\u0644\u0648\u0645<\/h3><div class=\"zone-content\"><\/div><\/div><\/div><div id=\"dragFeedback\" class=\"feedback\"><\/div><\/section>\n<h2 class=\"section-title\">\u06f3. \u0641\u0644\u0634\u200c\u06a9\u0627\u0631\u062a \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0645\u0631\u0648\u0631 \u0633\u0631\u06cc\u0639<\/h2>\n<section class=\"card\"><div class=\"qtitle\">\u0631\u0648\u06cc \u06a9\u0627\u0631\u062a \u06a9\u0644\u06cc\u06a9 \u06a9\u0646 \u062a\u0627 \u062c\u0648\u0627\u0628 \u0628\u0631\u06af\u0631\u062f\u062f<\/div><div class=\"flashcard\" onclick=\"this.classList.toggle('flipped')\"><div class=\"flash-inner\"><div class=\"flash-face\">\u06af\u06cc\u0627\u0647 \u0628\u0631\u0627\u06cc \u0631\u0634\u062f \u0628\u0647 \u0686\u0647 \u0686\u06cc\u0632\u0647\u0627\u06cc\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f\u061f<\/div><div class=\"flash-face flash-back\">\u0622\u0628\u060c \u0646\u0648\u0631\u060c \u0647\u0648\u0627 \u0648 \u0645\u0648\u0627\u062f \u063a\u0630\u0627\u06cc\u06cc \u062e\u0627\u06a9 \ud83c\udf31<\/div><\/div><\/div><\/section>\n<section class=\"card\"><div class=\"qtitle\">\u0646\u0645\u0648\u0646\u0647 \u062a\u0635\u0648\u06cc\u0631\u06cc\u0650 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0631\u06cc\u0627\u0636\u06cc<\/div><img decoding=\"async\" class=\"qimg\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-3.webp\" alt=\"\u0627\u0634\u06a9\u0627\u0644 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0647\u0627\"><p class=\"small\">\u062f\u0631 \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0631\u0648\u06cc \u0634\u06a9\u0644\u200c\u0647\u0627\u060c \u0631\u0646\u06af\u200c\u0647\u0627 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0647\u0627 \u0633\u0624\u0627\u0644\u200c\u0647\u0627\u06cc \u0645\u0633\u062a\u0642\u0644 \u0633\u0627\u062e\u062a.<\/p><\/section>\n<section class=\"final\" id=\"finalBox\"><img decoding=\"async\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-2.webp\" alt=\"\u062a\u0628\u0631\u06cc\u06a9\"><h2>\u0622\u0641\u0631\u06cc\u0646! \u0647\u0631 \u0633\u0647 \u0633\u0624\u0627\u0644 \u0627\u0635\u0644\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f \ud83c\udf89<\/h2><p id=\"finalText\"><\/p><\/section>\n\n<h2 class=\"section-title\">\u06f4. \u0628\u0627\u0632\u06cc \u062a\u0631\u062a\u06cc\u0628 \u0645\u0631\u0627\u062d\u0644 \u0631\u0634\u062f \u06af\u06cc\u0627\u0647<\/h2>\n<section class=\"card\">\n <span class=\"bonus-label\">\u062a\u0639\u0627\u0645\u0644 \u0622\u0645\u0648\u0632\u0634\u06cc \u062c\u062f\u06cc\u062f<\/span>\n <div class=\"qtitle\">\u0645\u0631\u0627\u062d\u0644 \u0631\u0634\u062f \u06af\u06cc\u0627\u0647 \u0631\u0627 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u062f\u0631\u0633\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646<\/div>\n <p class=\"small\">\u0627\u0632 \u0645\u0631\u062d\u0644\u0647 \u0627\u0648\u0644 \u0634\u0631\u0648\u0639 \u06a9\u0646. \u0647\u0631 \u0628\u0627\u0631 \u0631\u0648\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u062a \u0628\u0632\u0646 \u062a\u0627 \u0648\u0627\u0631\u062f \u062a\u0631\u062a\u06cc\u0628 \u0634\u0648\u062f.<\/p>\n\n <div class=\"sequence-grid\" id=\"sequenceGrid\">\n <button class=\"sequence-card\" data-step=\"3\"><span class=\"seq-icon\">\ud83c\udf3f<\/span><span>\u06af\u06cc\u0627\u0647 \u062c\u0648\u0627\u0646<\/span><\/button>\n <button class=\"sequence-card\" data-step=\"1\"><span class=\"seq-icon\">\ud83c\udf30<\/span><span>\u062f\u0627\u0646\u0647<\/span><\/button>\n <button class=\"sequence-card\" data-step=\"4\"><span class=\"seq-icon\">\ud83c\udf3b<\/span><span>\u06af\u06cc\u0627\u0647 \u0631\u0634\u062f\u06a9\u0631\u062f\u0647<\/span><\/button>\n <button class=\"sequence-card\" data-step=\"2\"><span class=\"seq-icon\">\ud83c\udf31<\/span><span>\u062c\u0648\u0627\u0646\u0647<\/span><\/button>\n <\/div>\n\n <div class=\"sequence-result\" id=\"sequenceResult\">\n <span class=\"small\">\u062a\u0631\u062a\u06cc\u0628 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u062a\u0648 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/span>\n <\/div>\n\n <div class=\"actions\">\n <button class=\"btn-primary\" onclick=\"checkSequence()\">\u0628\u0631\u0631\u0633\u06cc \u062a\u0631\u062a\u06cc\u0628<\/button>\n <button class=\"btn-soft\" onclick=\"resetSequence()\">\u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646<\/button>\n <\/div>\n <div id=\"sequenceFeedback\" class=\"feedback\"><\/div>\n<\/section>\n\n<h2 class=\"section-title\">\u06f5. \u0622\u0632\u0645\u0627\u06cc\u0634 \u0645\u062c\u0627\u0632\u06cc \u0639\u0644\u0648\u0645\u061b \u06af\u06cc\u0627\u0647 \u0628\u0647 \u0686\u0647 \u0686\u06cc\u0632\u0647\u0627\u06cc\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f\u061f<\/h2>\n<section class=\"card\">\n <span class=\"bonus-label\">\u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0627\u062f\u0647<\/span>\n <div class=\"qtitle\">\u0622\u0628 \u0648 \u0646\u0648\u0631 \u0631\u0627 \u0631\u0648\u0634\u0646 \u06cc\u0627 \u062e\u0627\u0645\u0648\u0634 \u06a9\u0646 \u0648 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u0628\u0628\u06cc\u0646<\/div>\n\n <div class=\"lab-wrap\">\n <div class=\"lab-visual\">\n <div class=\"lab-plant\" id=\"labPlant\">\ud83c\udf31<\/div>\n <div class=\"lab-status\" id=\"labStatus\">\u06af\u06cc\u0627\u0647 \u0645\u0646\u062a\u0638\u0631 \u0634\u0631\u0627\u06cc\u0637 \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a<\/div>\n <div class=\"lab-meter\"><div id=\"labMeterFill\"><\/div><\/div>\n <\/div>\n\n <div class=\"lab-controls\">\n <div class=\"switch-row\">\n <div><b>\ud83d\udca7 \u0622\u0628<\/b><div class=\"small\">\u06af\u06cc\u0627\u0647 \u0628\u0631\u0627\u06cc \u0631\u0634\u062f \u0628\u0647 \u0622\u0628 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.<\/div><\/div>\n <button class=\"toggle\" id=\"waterToggle\" aria-label=\"\u0622\u0628\" onclick=\"toggleLab('water')\"><\/button>\n <\/div>\n <div class=\"switch-row\">\n <div><b>\u2600\ufe0f \u0646\u0648\u0631 \u062e\u0648\u0631\u0634\u06cc\u062f<\/b><div class=\"small\">\u0646\u0648\u0631 \u0628\u0647 \u06af\u06cc\u0627\u0647 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u063a\u0630\u0627 \u0628\u0633\u0627\u0632\u062f.<\/div><\/div>\n <button class=\"toggle\" id=\"lightToggle\" aria-label=\"\u0646\u0648\u0631\" onclick=\"toggleLab('light')\"><\/button>\n <\/div>\n <div class=\"mini-tip\" id=\"labTip\">\u0647\u0631 \u062f\u0648 \u0639\u0627\u0645\u0644 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646 \u062a\u0627 \u0628\u0628\u06cc\u0646\u06cc \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u06af\u06cc\u0627\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0648\u0636\u0639\u06cc\u062a \u0631\u0627 \u062f\u0627\u0631\u062f.<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<h2 class=\"section-title\">\u06f6. \u0645\u0627\u0634\u06cc\u0646 \u062c\u0645\u0639 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u06cc\u0627\u0636\u06cc<\/h2>\n<section class=\"card\">\n <span class=\"bonus-label\">\u062a\u0645\u0631\u06cc\u0646 \u0639\u062f\u062f\u0633\u0627\u0632\u06cc<\/span>\n <div class=\"qtitle\">\u062a\u0639\u062f\u0627\u062f \u062f\u0648 \u06af\u0631\u0648\u0647 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0628\u062f\u0647 \u0648 \u062d\u0627\u0635\u0644 \u062c\u0645\u0639 \u0631\u0627 \u0647\u0645\u0627\u0646 \u0644\u062d\u0638\u0647 \u0628\u0628\u06cc\u0646<\/div>\n <p class=\"small\">\u0627\u06cc\u0646 \u0645\u062f\u0644 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u062c\u0645\u0639\u060c \u062a\u0641\u0631\u06cc\u0642\u060c \u0636\u0631\u0628 \u06cc\u0627 \u062d\u062a\u06cc \u062a\u0645\u0631\u06cc\u0646 \u0627\u0631\u0632\u0634 \u0645\u06a9\u0627\u0646\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.<\/p>\n\n <div class=\"math-machine\">\n <div class=\"number-box\">\n <div class=\"number-title\">\u06af\u0631\u0648\u0647 \u0627\u0648\u0644<\/div>\n <div class=\"number-value\" id=\"numA\">2<\/div>\n <div class=\"star-line\" id=\"starsA\">\u2b50\u2b50<\/div>\n <div class=\"stepper\">\n <button class=\"step-btn\" onclick=\"changeNumber('a',1)\">+<\/button>\n <button class=\"step-btn\" onclick=\"changeNumber('a',-1)\">\u2212<\/button>\n <\/div>\n <\/div>\n\n <div class=\"math-sign\">+<\/div>\n\n <div class=\"number-box\">\n <div class=\"number-title\">\u06af\u0631\u0648\u0647 \u062f\u0648\u0645<\/div>\n <div class=\"number-value\" id=\"numB\">3<\/div>\n <div class=\"star-line\" id=\"starsB\">\u2b50\u2b50\u2b50<\/div>\n <div class=\"stepper\">\n <button class=\"step-btn\" onclick=\"changeNumber('b',1)\">+<\/button>\n <button class=\"step-btn\" onclick=\"changeNumber('b',-1)\">\u2212<\/button>\n <\/div>\n <\/div>\n\n <div class=\"math-sign\">=<\/div>\n\n <div class=\"number-box total-box\">\n <div class=\"number-title\">\u062d\u0627\u0635\u0644<\/div>\n <div class=\"number-value\" id=\"numTotal\">5<\/div>\n <div class=\"star-line\" id=\"starsTotal\">\u2b50\u2b50\u2b50\u2b50\u2b50<\/div>\n <\/div>\n <\/div>\n\n <div class=\"mini-tip\">\u0628\u0627 \u0686\u0646\u062f \u0628\u0627\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u0639\u062f\u062f\u0647\u0627\u060c \u062f\u0627\u0646\u0634\u200c\u0622\u0645\u0648\u0632 \u0631\u0627\u0628\u0637\u0647 \u0628\u06cc\u0646 \u00ab\u062a\u0639\u062f\u0627\u062f \u0648\u0627\u0642\u0639\u06cc \u0627\u0634\u06cc\u0627\u00bb \u0648 \u00ab\u0639\u062f\u062f\u00bb \u0631\u0627 \u0647\u0645\u0632\u0645\u0627\u0646 \u0645\u06cc\u200c\u0628\u06cc\u0646\u062f.<\/div>\n<\/section>\n\n<\/div>\n<script>\nconst answered=new Map();let score=0,activeChip=null;\ndocument.querySelectorAll('.quiz .option,.quiz .visual-choice').forEach(btn=>btn.addEventListener('click',()=>{const q=btn.closest('.quiz');q.querySelectorAll('.option,.visual-choice').forEach(x=>x.classList.remove('selected'));btn.classList.add('selected')}));\nfunction checkQuiz(button){const q=button.closest('.quiz'),sel=q.querySelector('.selected'),fb=q.querySelector('.feedback'),correct=Number(q.dataset.answer);if(!sel){fb.className='feedback bad';fb.textContent='\u0627\u0648\u0644 \u06cc\u06a9\u06cc \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646.';return}const value=Number(sel.dataset.value);q.querySelectorAll('.option,.visual-choice').forEach(x=>{x.classList.remove('correct','wrong');if(Number(x.dataset.value)===correct)x.classList.add('correct')});const ok=value===correct;if(!ok)sel.classList.add('wrong');const idx=[...document.querySelectorAll('.quiz')].indexOf(q);if(!answered.has(idx)){answered.set(idx,ok);if(ok)score++}fb.className='feedback '+(ok?'ok':'bad');fb.innerHTML=ok?'<b>\u062f\u0631\u0633\u062a\u0647 \ud83d\udc4f<\/b> \u062e\u06cc\u0644\u06cc \u062e\u0648\u0628! \u062c\u0648\u0627\u0628 \u0631\u0627 \u062f\u0631\u0633\u062a \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u06cc.':'<b>\u0627\u06cc\u0646 \u062c\u0648\u0627\u0628 \u062f\u0631\u0633\u062a \u0646\u06cc\u0633\u062a.<\/b> \u062c\u0648\u0627\u0628 \u0635\u062d\u06cc\u062d \u0628\u0627 \u0631\u0646\u06af \u0633\u0628\u0632 \u0645\u0634\u062e\u0635 \u0634\u062f.';updateStatus()}\nfunction showAnswer(button){const q=button.closest('.quiz'),correct=Number(q.dataset.answer);q.querySelectorAll('.option,.visual-choice').forEach(x=>{x.classList.remove('correct','wrong');if(Number(x.dataset.value)===correct)x.classList.add('correct')});const fb=q.querySelector('.feedback');fb.className='feedback ok';fb.textContent='\u062c\u0648\u0627\u0628 \u0635\u062d\u06cc\u062d \u0628\u0627 \u0631\u0646\u06af \u0633\u0628\u0632 \u0645\u0634\u062e\u0635 \u0634\u062f.'}\nfunction updateStatus(){document.getElementById('scoreText').textContent=`\u0627\u0645\u062a\u06cc\u0627\u0632 ${score} \u0627\u0632 \u06f3`;document.getElementById('progressBar').style.width=`${answered.size\/3*100}%`;if(answered.size===3){const box=document.getElementById('finalBox');box.classList.add('show');document.getElementById('finalText').textContent=score===3?'\u0633\u0647 \u0627\u0632 \u0633\u0647! \u0639\u0627\u0644\u06cc \u0628\u0648\u062f.':score===2?'\u062f\u0648 \u062c\u0648\u0627\u0628 \u062f\u0631\u0633\u062a\u061b \u062e\u06cc\u0644\u06cc \u062e\u0648\u0628 \u067e\u06cc\u0634 \u0631\u0641\u062a\u06cc.':score===1?'\u06cc\u06a9 \u062c\u0648\u0627\u0628 \u062f\u0631\u0633\u062a\u061b \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646.':'\u0627\u06cc\u0646 \u0628\u0627\u0631 \u062c\u0648\u0627\u0628 \u062f\u0631\u0633\u062a \u0646\u062f\u0627\u0634\u062a\u06cc\u061b \u062f\u0648\u0628\u0627\u0631\u0647 \u062a\u0644\u0627\u0634 \u06a9\u0646.';box.scrollIntoView({behavior:'smooth',block:'center'})}}\nfunction resetAll(){answered.clear();score=0;document.querySelectorAll('.quiz').forEach(q=>{q.querySelectorAll('.option,.visual-choice').forEach(x=>x.classList.remove('selected','correct','wrong'));const f=q.querySelector('.feedback');f.className='feedback';f.textContent=''});document.querySelectorAll('.chip').forEach(c=>{c.classList.remove('used');c.style.outline=''});document.querySelectorAll('.zone-content').forEach(z=>z.innerHTML='');const d=document.getElementById('dragFeedback');d.className='feedback';d.textContent='';document.getElementById('finalBox').classList.remove('show');document.querySelectorAll('.flashcard').forEach(f=>f.classList.remove('flipped'));updateStatus()}\ndocument.querySelectorAll('.chip').forEach(chip=>{chip.addEventListener('dragstart',e=>{activeChip=chip;e.dataTransfer.setData('text\/plain',chip.dataset.type)});chip.addEventListener('click',()=>{document.querySelectorAll('.chip').forEach(c=>c.style.outline='');activeChip=chip;chip.style.outline='3px solid #cfc4ff'})});\ndocument.querySelectorAll('.dropzone').forEach(zone=>{zone.addEventListener('dragover',e=>e.preventDefault());zone.addEventListener('drop',e=>{e.preventDefault();if(activeChip)placeChip(activeChip,zone)});zone.addEventListener('click',()=>{if(activeChip)placeChip(activeChip,zone)})});\nfunction placeChip(chip,zone){const ok=chip.dataset.type===zone.dataset.zone,fb=document.getElementById('dragFeedback');if(ok){const clone=chip.cloneNode(true);clone.removeAttribute('draggable');clone.style.cursor='default';clone.style.outline='';zone.querySelector('.zone-content').appendChild(clone);chip.classList.add('used');chip.style.outline='';activeChip=null;const left=[...document.querySelectorAll('.chip')].filter(c=>!c.classList.contains('used')).length;fb.className='feedback ok';fb.textContent=left===0?'\u0639\u0627\u0644\u06cc! \u0647\u0645\u0647 \u0648\u0633\u0627\u06cc\u0644 \u0631\u0627 \u062f\u0631\u0633\u062a \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u06a9\u0631\u062f\u06cc.':'\u062f\u0631\u0633\u062a\u0647\u061b \u06a9\u0627\u0631\u062a \u062f\u0631 \u062f\u0633\u062a\u0647 \u0645\u0646\u0627\u0633\u0628 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a.'}else{fb.className='feedback bad';fb.textContent='\u0627\u06cc\u0646 \u062f\u0633\u062a\u0647 \u062f\u0631\u0633\u062a \u0646\u06cc\u0633\u062a\u061b \u06cc\u06a9 \u0628\u0627\u0631 \u062f\u06cc\u06af\u0631 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646.'}}\n\n\/* ===== \u062a\u0639\u0627\u0645\u0644\u200c\u0647\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0647\u200c\u0634\u062f\u0647 ===== *\/\nlet sequenceOrder=[];\ndocument.querySelectorAll('#sequenceGrid .sequence-card').forEach(card=>{\n card.addEventListener('click',()=>{\n if(card.classList.contains('picked')) return;\n card.classList.add('picked');\n sequenceOrder.push({\n step:Number(card.dataset.step),\n label:card.innerText.trim(),\n html:card.querySelector('.seq-icon').textContent\n });\n renderSequence();\n });\n});\n\nfunction renderSequence(){\n const box=document.getElementById('sequenceResult');\n if(!sequenceOrder.length){\n box.innerHTML='<span class=\"small\">\u062a\u0631\u062a\u06cc\u0628 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u062a\u0648 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/span>';\n return;\n }\n box.innerHTML=sequenceOrder.map((x,i)=>`<span class=\"sequence-pill\">${i+1}. ${x.html} ${x.label}<\/span>`).join('');\n}\n\nfunction checkSequence(){\n const fb=document.getElementById('sequenceFeedback');\n const cards=[...document.querySelectorAll('#sequenceGrid .sequence-card')];\n cards.forEach(c=>c.classList.remove('seq-ok','seq-bad'));\n\n if(sequenceOrder.length<4){\n fb.className='feedback bad';\n fb.textContent='\u0647\u0646\u0648\u0632 \u0647\u0645\u0647 \u0645\u0631\u0627\u062d\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0646\u06a9\u0631\u062f\u06cc.';\n return;\n }\n\n const ok=sequenceOrder.every((x,i)=>x.step===i+1);\n if(ok){\n cards.forEach(c=>c.classList.add('seq-ok'));\n fb.className='feedback ok';\n fb.innerHTML='<b>\u0639\u0627\u0644\u06cc\u0647 \ud83c\udf31<\/b> \u062a\u0631\u062a\u06cc\u0628 \u0631\u0634\u062f \u06af\u06cc\u0627\u0647 \u0631\u0627 \u062f\u0631\u0633\u062a \u0686\u06cc\u062f\u06cc.';\n }else{\n cards.forEach(c=>c.classList.add('seq-bad'));\n fb.className='feedback bad';\n fb.innerHTML='<b>\u0647\u0646\u0648\u0632 \u062a\u0631\u062a\u06cc\u0628 \u062f\u0631\u0633\u062a \u0646\u06cc\u0633\u062a.<\/b> \u0627\u0632 \u062f\u0627\u0646\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646 \u0648 \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646.';\n }\n}\n\nfunction resetSequence(){\n sequenceOrder=[];\n document.querySelectorAll('#sequenceGrid .sequence-card').forEach(c=>c.classList.remove('picked','seq-ok','seq-bad'));\n renderSequence();\n const fb=document.getElementById('sequenceFeedback');\n fb.className='feedback';fb.textContent='';\n}\n\nlet labState={water:false,light:false};\nfunction toggleLab(type){\n labState[type]=!labState[type];\n document.getElementById(type+'Toggle').classList.toggle('on',labState[type]);\n updateLab();\n}\nfunction updateLab(){\n const plant=document.getElementById('labPlant');\n const status=document.getElementById('labStatus');\n const meter=document.getElementById('labMeterFill');\n const tip=document.getElementById('labTip');\n const count=(labState.water?1:0)+(labState.light?1:0);\n\n if(count===2){\n plant.textContent='\ud83c\udf3b';\n plant.style.filter='saturate(1.15)';\n status.textContent='\u0634\u0631\u0627\u06cc\u0637 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a\u061b \u06af\u06cc\u0627\u0647 \u0631\u0634\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f!';\n meter.style.width='100%';\n tip.textContent='\u0646\u062a\u06cc\u062c\u0647: \u0622\u0628 + \u0646\u0648\u0631 \u0628\u0627 \u0647\u0645\u060c \u0634\u0631\u0627\u06cc\u0637 \u0645\u0646\u0627\u0633\u0628\u200c\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc \u0631\u0634\u062f \u06af\u06cc\u0627\u0647 \u0645\u06cc\u200c\u0633\u0627\u0632\u0646\u062f.';\n }else if(count===1){\n plant.textContent='\ud83c\udf31';\n plant.style.filter='saturate(.85)';\n status.textContent='\u06cc\u06a9 \u0646\u06cc\u0627\u0632 \u0641\u0631\u0627\u0647\u0645 \u0634\u062f\u0647\u060c \u0627\u0645\u0627 \u0647\u0646\u0648\u0632 \u06a9\u0627\u0645\u0644 \u0646\u06cc\u0633\u062a';\n meter.style.width='58%';\n tip.textContent=labState.water?'\u0622\u0628 \u0647\u0633\u062a\u061b \u062d\u0627\u0644\u0627 \u0646\u0648\u0631 \u0631\u0627 \u0647\u0645 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646.':'\u0646\u0648\u0631 \u0647\u0633\u062a\u061b \u062d\u0627\u0644\u0627 \u0622\u0628 \u0631\u0627 \u0647\u0645 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646.';\n }else{\n plant.textContent='\ud83e\udd40';\n plant.style.filter='grayscale(.2) saturate(.55)';\n status.textContent='\u0628\u062f\u0648\u0646 \u0622\u0628 \u0648 \u0646\u0648\u0631\u060c \u06af\u06cc\u0627\u0647 \u0648\u0636\u0639\u06cc\u062a \u062e\u0648\u0628\u06cc \u0646\u062f\u0627\u0631\u062f';\n meter.style.width='18%';\n tip.textContent='\u0647\u0631 \u062f\u0648 \u06a9\u0644\u06cc\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0628\u062f\u0647 \u0648 \u0627\u062b\u0631\u0634\u0627\u0646 \u0631\u0627 \u0645\u0642\u0627\u06cc\u0633\u0647 \u06a9\u0646.';\n }\n}\nupdateLab();\n\nlet mathA=2,mathB=3;\nfunction changeNumber(which,delta){\n if(which==='a') mathA=Math.max(0,Math.min(9,mathA+delta));\n else mathB=Math.max(0,Math.min(9,mathB+delta));\n updateMathMachine();\n}\nfunction starString(n){\n return n? '\u2b50'.repeat(n) : '\u2014';\n}\nfunction updateMathMachine(){\n document.getElementById('numA').textContent=mathA;\n document.getElementById('numB').textContent=mathB;\n document.getElementById('numTotal').textContent=mathA+mathB;\n document.getElementById('starsA').textContent=starString(mathA);\n document.getElementById('starsB').textContent=starString(mathB);\n document.getElementById('starsTotal').textContent=starString(mathA+mathB);\n}\nupdateMathMachine();\n\nconst originalResetAll=resetAll;\nresetAll=function(){\n originalResetAll();\n resetSequence();\n labState={water:false,light:false};\n document.getElementById('waterToggle').classList.remove('on');\n document.getElementById('lightToggle').classList.remove('on');\n updateLab();\n mathA=2;mathB=3;updateMathMachine();\n};\n\nupdateStatus();\n<\/script><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0646\u0645\u0648\u0646\u0647 HTML \u062a\u0639\u0627\u0645\u0644\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc | \u0639\u0644\u0648\u0645 \u0648 \u0631\u06cc\u0627\u0636\u06cc \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc \u0631\u06cc\u0627\u0636\u06cc \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc\u0639\u0644\u0648\u0645 \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc\u062a\u0639\u0627\u0645\u0644 \u0648\u0627\u0642\u0639\u06cc \u0628\u0627 HTML \u0646\u0645\u0648\u0646\u0647 \u0622\u0645\u0648\u0632\u0634 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc \u0646\u0645\u0648\u0646\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0633\u0624\u0627\u0644\u060c \u062a\u0635\u0648\u06cc\u0631\u060c \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0641\u0648\u0631\u06cc\u060c \u0627\u0645\u062a\u06cc\u0627\u0632\u060c \u0628\u0627\u0632\u06cc \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0648 \u0641\u0644\u0634\u200c\u06a9\u0627\u0631\u062a \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc. \u0627\u0645\u062a\u06cc\u0627\u0632 \u06f0 \u0627\u0632 \u06f3 \u0634\u0631\u0648\u0639 \u062f\u0648\u0628\u0627\u0631\u0647 \u06f1. \u0633\u0624\u0627\u0644 \u0686\u0647\u0627\u0631\u06af\u0632\u06cc\u0646\u0647\u200c\u0627\u06cc \u0628\u0627 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0641\u0648\u0631\u06cc \u0633\u0624\u0627\u0644 \u06f1 \u0627\u06af\u0631 \u06f3 \u0633\u06cc\u0628 \u062f\u0627\u0634\u062a\u0647 […]<\/p>\n","protected":false},"author":1,"featured_media":900345,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-900351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-14"],"_links":{"self":[{"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/posts\/900351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=900351"}],"version-history":[{"count":4,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/posts\/900351\/revisions"}],"predecessor-version":[{"id":900355,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/posts\/900351\/revisions\/900355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/media\/900345"}],"wp:attachment":[{"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=900351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=900351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=900351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":900351,"date":"2026-09-22T00:01:58","date_gmt":"2026-09-21T20:31:58","guid":{"rendered":"https:\/\/notes.thebestbooks.ir\/?p=900351"},"modified":"2026-09-22T00:14:43","modified_gmt":"2026-09-21T20:44:43","slug":"%d9%86%d9%85%d9%88%d9%86%d9%87-html-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d8%aa%d8%b9%d8%a7%d9%85%d9%84%db%8c","status":"publish","type":"post","link":"https:\/\/notes.thebestbooks.ir\/?p=900351","title":{"rendered":"\u0646\u0645\u0648\u0646\u0647 HTML \u0622\u0645\u0648\u0632\u0634\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc"},"content":{"rendered":"\n\n\n\n\n\n\u0646\u0645\u0648\u0646\u0647 HTML \u062a\u0639\u0627\u0645\u0644\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc | \u0639\u0644\u0648\u0645 \u0648 \u0631\u06cc\u0627\u0636\u06cc \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc<\/title>\n<style>\n:root{--ink:#273043;--muted:#697386;--purple:#6c4ce7;--green:#1f9d68;--greenbg:#eaf8f1;--red:#d7445b;--redbg:#fff0f3;--blue:#3d8bfd;--line:#e7e9f0;--bg:#f7f8fc}\n*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Tahoma,\"Segoe UI\",Arial,sans-serif;line-height:1.9}.wrap{max-width:980px;margin:auto;padding:18px 12px 60px}\n.hero{background:linear-gradient(135deg,#6245dc,#8c6ff0);color:#fff;border-radius:26px;padding:24px;display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:center;box-shadow:0 16px 38px rgba(83,62,167,.18)}.hero h1{margin:0 0 8px;font-size:clamp(25px,4vw,40px);line-height:1.5}.hero p{margin:0;opacity:.95}.hero img{width:100%;max-height:270px;object-fit:cover;border-radius:20px;background:#fff}.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.pill{background:rgba(255,255,255,.16);padding:6px 11px;border-radius:999px;font-size:12px}\n.status{position:sticky;top:8px;z-index:10;margin:14px 0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;box-shadow:0 7px 20px rgba(26,29,46,.06)}.progress{flex:1;min-width:180px;height:10px;background:#ececf4;border-radius:999px;overflow:hidden}.progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--blue));transition:.35s}.score{font-weight:800;color:var(--purple)}\n.section-title{margin:30px 2px 12px;color:#5740bc;font-size:22px}.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;margin:12px 0;box-shadow:0 7px 22px rgba(30,35,60,.045)}.qhead{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}.qnum{display:inline-flex;align-items:center;justify-content:center;background:#eee9ff;color:#5c41c9;border-radius:999px;padding:5px 11px;font-weight:800;font-size:12px;line-height:1.4}.qtitle{font-size:18px;font-weight:800;width:100%;line-height:1.8}.qimg{display:block;width:100%;max-height:310px;object-fit:contain;border-radius:20px!important;background:#fafafa;margin:10px 0 16px;overflow:hidden;box-shadow:0 3px 12px rgba(39,48,67,.06)}\n.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.quiz button.option,.quiz button.visual-choice{-webkit-appearance:none!important;appearance:none!important;border:1px solid #e5e7ef!important;background:#fff!important;color:var(--ink)!important;border-radius:13px!important;padding:11px 12px!important;cursor:pointer;transition:.18s;font:inherit!important;font-weight:700!important;opacity:1!important;text-shadow:none!important}.quiz button.option{text-align:right!important}.quiz button.option:hover,.quiz button.visual-choice:hover{transform:translateY(-1px);border-color:#cfc5ff!important;background:#fbfaff!important;color:var(--ink)!important;opacity:1!important}.quiz button.option.selected,.quiz button.visual-choice.selected{border-color:var(--purple)!important;background:#f3efff!important;color:#4f36b7!important;opacity:1!important}.quiz button.option.correct,.quiz button.visual-choice.correct{border-color:#9ed7bc!important;background:var(--greenbg)!important;color:#146845!important;opacity:1!important}.quiz button.option.wrong,.quiz button.visual-choice.wrong{border-color:#efb0bd!important;background:var(--redbg)!important;color:#9e2e42!important;opacity:1!important}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}button{font:inherit;font-weight:800;border:0;border-radius:11px;padding:9px 14px;cursor:pointer}.btn-primary{background:var(--purple);color:#fff}.btn-soft{background:#eeeafc;color:#5e43c7}.btn-reset{background:#eef1f6;color:#4d5668}.feedback{display:none;margin-top:12px;padding:11px 13px;border-radius:12px;font-size:14px}.feedback.ok{display:block;background:var(--greenbg);color:#176c49}.feedback.bad{display:block;background:var(--redbg);color:#a23148}\n.visual-options{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.visual-choice{text-align:center!important;min-height:96px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px}.emoji{font-size:34px;display:block;margin:0 0 3px}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;margin-top:14px}.dropzone{border:2px dashed #cfd3df;border-radius:18px;min-height:175px;padding:14px;background:#fafbfe;text-align:center}.dropzone h3{margin:0 0 12px;font-size:17px;color:#3d4351}.zone-content{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}.chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:center;margin:14px auto 8px;padding:4px 0}.chip{border:1px solid #dfe2ea;background:#fff;color:var(--ink);border-radius:999px;padding:8px 13px;cursor:grab;user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.5;box-shadow:0 2px 8px rgba(39,48,67,.04);transition:.18s}.chip:hover{border-color:#cfc5ff;background:#fbfaff;transform:translateY(-1px)}.chip.used{opacity:.35;pointer-events:none}.flashcard{perspective:900px;height:170px;cursor:pointer;margin-top:10px}.flash-inner{position:relative;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}.flashcard.flipped .flash-inner{transform:rotateY(180deg)}.flash-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;border:1px solid var(--line);background:#fff;font-weight:800}.flash-back{transform:rotateY(180deg);background:#eef9f3;color:#176c49}.final{display:none;text-align:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;margin-top:20px}.final.show{display:block}.final img{width:170px;max-width:55%;border-radius:16px}.small{font-size:12px;color:var(--muted)}\n@media(max-width:720px){.hero{grid-template-columns:1fr}.hero img{max-height:220px}.options{grid-template-columns:1fr}.visual-options{grid-template-columns:repeat(2,1fr)}.demo-grid{grid-template-columns:1fr}.qhead{gap:7px}.qtitle{font-size:17px}.qimg{border-radius:18px!important}.chips{justify-content:center}.dropzone{min-height:145px}}\n\n\/* ===== \u0627\u0641\u0632\u0648\u062f\u0647\u200c\u0647\u0627\u06cc \u0646\u0633\u062e\u0647 \u062a\u06a9\u0645\u06cc\u0644\u200c\u0634\u062f\u0647\u061b \u0628\u062f\u0648\u0646 \u062d\u0630\u0641 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc ===== *\/\n.bonus-label{\n display:inline-flex;align-items:center;gap:6px;\n background:#fff3cf;color:#8a6310;border:1px solid #f0d98e;\n border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;margin-bottom:9px\n}\n.sequence-grid{\n display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px\n}\n.sequence-card{\n -webkit-appearance:none!important;appearance:none!important;\n border:1px solid #e3e6ef!important;background:#fff!important;color:var(--ink)!important;\n border-radius:16px!important;padding:14px 10px!important;cursor:pointer;\n min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;\n gap:7px;font:inherit!important;font-weight:800!important;transition:.18s;opacity:1!important\n}\n.sequence-card:hover{\n border-color:#c9bfff!important;background:#fbfaff!important;color:var(--ink)!important;\n transform:translateY(-2px)\n}\n.sequence-card .seq-icon{font-size:38px;line-height:1}\n.sequence-card.picked{border-color:var(--purple)!important;background:#f3efff!important;color:#5138b9!important}\n.sequence-card.seq-ok{border-color:#9ed7bc!important;background:var(--greenbg)!important;color:#146845!important}\n.sequence-card.seq-bad{border-color:#efb0bd!important;background:var(--redbg)!important;color:#9e2e42!important}\n.sequence-result{\n min-height:55px;border:1px dashed #d7dae4;border-radius:14px;margin-top:12px;\n padding:10px 12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#fafbfe\n}\n.sequence-pill{\n display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #e2e5ed;\n border-radius:999px;padding:6px 10px;font-weight:700;font-size:13px\n}\n.lab-wrap{\n display:grid;grid-template-columns:.85fr 1.15fr;gap:15px;align-items:stretch;margin-top:12px\n}\n.lab-visual{\n border:1px solid #e3e6ef;border-radius:18px;background:linear-gradient(180deg,#f5fbff,#fbfff8);\n min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;\n padding:18px;text-align:center\n}\n.lab-plant{font-size:86px;line-height:1;transition:.25s;filter:saturate(.75)}\n.lab-status{font-weight:800;margin-top:12px}\n.lab-controls{\n border:1px solid #e3e6ef;border-radius:18px;background:#fff;padding:16px\n}\n.switch-row{\n display:flex;align-items:center;justify-content:space-between;gap:12px;\n border-bottom:1px solid #eef0f5;padding:12px 0\n}\n.switch-row:last-child{border-bottom:0}\n.toggle{\n width:54px;height:30px;border-radius:999px;background:#d8dbe5;position:relative;cursor:pointer;\n border:0!important;padding:0!important;flex:0 0 auto\n}\n.toggle::after{\n content:\"\";position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;\n top:4px;right:4px;box-shadow:0 2px 5px rgba(0,0,0,.16);transition:.2s\n}\n.toggle.on{background:#6c4ce7}\n.toggle.on::after{right:28px}\n.lab-meter{\n height:10px;background:#eceef4;border-radius:999px;overflow:hidden;margin-top:16px\n}\n.lab-meter > div{\n height:100%;width:25%;background:linear-gradient(90deg,#f6b73c,#1f9d68);transition:.3s\n}\n.math-machine{\n display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;margin-top:15px\n}\n.number-box{\n border:1px solid #e1e4ed;border-radius:18px;background:#fff;padding:14px;text-align:center\n}\n.number-title{font-size:13px;color:var(--muted);margin-bottom:7px}\n.number-value{font-size:32px;font-weight:900;color:var(--purple);line-height:1.2}\n.stepper{display:flex;justify-content:center;gap:7px;margin-top:10px}\n.step-btn{\n width:38px;height:38px;border-radius:12px!important;background:#eeeafd!important;color:#5a42c5!important;\n padding:0!important;font-size:21px!important;line-height:1!important\n}\n.math-sign{font-size:28px;font-weight:900;color:#7b8290;text-align:center}\n.total-box{\n background:#eef9f3;border-color:#b5dec8\n}\n.total-box .number-value{color:#176c49}\n.star-line{font-size:26px;letter-spacing:3px;min-height:38px;margin-top:8px;word-break:break-word}\n.mini-tip{\n background:#f5f1ff;border-right:4px solid var(--purple);border-radius:12px;padding:10px 12px;\n margin-top:12px;color:#594b72;font-size:13px\n}\n@media(max-width:720px){\n .sequence-grid{grid-template-columns:repeat(2,1fr)}\n .lab-wrap{grid-template-columns:1fr}\n .math-machine{grid-template-columns:1fr;gap:8px}\n .math-sign{font-size:22px}\n}\n\n<\/style>\n<\/head>\n<body><div class=\"wrap\">\n<section class=\"hero\"><div><div class=\"pills\"><span class=\"pill\">\u0631\u06cc\u0627\u0636\u06cc \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc<\/span><span class=\"pill\">\u0639\u0644\u0648\u0645 \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc<\/span><span class=\"pill\">\u062a\u0639\u0627\u0645\u0644 \u0648\u0627\u0642\u0639\u06cc \u0628\u0627 HTML<\/span><\/div><h1>\u0646\u0645\u0648\u0646\u0647 \u0622\u0645\u0648\u0632\u0634 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc<\/h1><p>\u0646\u0645\u0648\u0646\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0633\u0624\u0627\u0644\u060c \u062a\u0635\u0648\u06cc\u0631\u060c \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0641\u0648\u0631\u06cc\u060c \u0627\u0645\u062a\u06cc\u0627\u0632\u060c \u0628\u0627\u0632\u06cc \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0648 \u0641\u0644\u0634\u200c\u06a9\u0627\u0631\u062a \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc.<\/p><\/div><img decoding=\"async\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-7.webp\" alt=\"\u06a9\u0648\u062f\u06a9\u0627\u0646 \u062f\u0631 \u062d\u0627\u0644 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\"><\/section>\n<div class=\"status\"><div class=\"score\" id=\"scoreText\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u06f0 \u0627\u0632 \u06f3<\/div><div class=\"progress\"><div id=\"progressBar\"><\/div><\/div><button class=\"btn-reset\" onclick=\"resetAll()\">\u0634\u0631\u0648\u0639 \u062f\u0648\u0628\u0627\u0631\u0647<\/button><\/div>\n<h2 class=\"section-title\">\u06f1. \u0633\u0624\u0627\u0644 \u0686\u0647\u0627\u0631\u06af\u0632\u06cc\u0646\u0647\u200c\u0627\u06cc \u0628\u0627 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0641\u0648\u0631\u06cc<\/h2>\n<section class=\"card quiz\" data-answer=\"2\"><div class=\"qhead\"><span class=\"qnum\">\u0633\u0624\u0627\u0644 \u06f1<\/span><div class=\"qtitle\">\u0627\u06af\u0631 \u06f3 \u0633\u06cc\u0628 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 \u0648 \u06f2 \u0633\u06cc\u0628 \u062f\u06cc\u06af\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0686\u0646\u062f \u0633\u06cc\u0628 \u062f\u0627\u0631\u06cc\u0645\u061f<\/div><\/div><img decoding=\"async\" class=\"qimg\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-6.webp\" alt=\"\u0634\u0645\u0627\u0631\u0634 \u062a\u0635\u0648\u06cc\u0631\u06cc\"><div class=\"options\"><button class=\"option\" data-value=\"0\">\u06f4 \u0633\u06cc\u0628<\/button><button class=\"option\" data-value=\"1\">\u06f6 \u0633\u06cc\u0628<\/button><button class=\"option\" data-value=\"2\">\u06f5 \u0633\u06cc\u0628<\/button><button class=\"option\" data-value=\"3\">\u06f7 \u0633\u06cc\u0628<\/button><\/div><div class=\"actions\"><button class=\"btn-primary\" onclick=\"checkQuiz(this)\">\u062b\u0628\u062a \u062c\u0648\u0627\u0628<\/button><button class=\"btn-soft\" onclick=\"showAnswer(this)\">\u0646\u0645\u0627\u06cc\u0634 \u062c\u0648\u0627\u0628<\/button><\/div><div class=\"feedback\"><\/div><\/section>\n<section class=\"card quiz\" data-answer=\"1\"><div class=\"qhead\"><span class=\"qnum\">\u0633\u0624\u0627\u0644 \u06f2<\/span><div class=\"qtitle\">\u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc \u0637\u0648\u0644 \u06cc\u06a9 \u0645\u062f\u0627\u062f \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0648\u0633\u06cc\u0644\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u061f<\/div><\/div><img decoding=\"async\" class=\"qimg\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-4.webp\" alt=\"\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc\"><div class=\"visual-options\"><button class=\"visual-choice\" data-value=\"0\"><span class=\"emoji\">\ud83d\udd2c<\/span>\u0645\u06cc\u06a9\u0631\u0648\u0633\u06a9\u0648\u067e<\/button><button class=\"visual-choice\" data-value=\"1\"><span class=\"emoji\">\ud83d\udccf<\/span>\u062e\u0637\u200c\u06a9\u0634<\/button><button class=\"visual-choice\" data-value=\"2\"><span class=\"emoji\">\u2702\ufe0f<\/span>\u0642\u06cc\u0686\u06cc<\/button><button class=\"visual-choice\" data-value=\"3\"><span class=\"emoji\">\ud83d\udd0d<\/span>\u0630\u0631\u0647\u200c\u0628\u06cc\u0646<\/button><\/div><div class=\"actions\"><button class=\"btn-primary\" onclick=\"checkQuiz(this)\">\u062b\u0628\u062a \u062c\u0648\u0627\u0628<\/button><button class=\"btn-soft\" onclick=\"showAnswer(this)\">\u0646\u0645\u0627\u06cc\u0634 \u062c\u0648\u0627\u0628<\/button><\/div><div class=\"feedback\"><\/div><\/section>\n<section class=\"card quiz\" data-answer=\"3\"><div class=\"qhead\"><span class=\"qnum\">\u0633\u0624\u0627\u0644 \u06f3<\/span><div class=\"qtitle\">\u06a9\u062f\u0627\u0645 \u0645\u0648\u0631\u062f \u0628\u0631\u0627\u06cc \u0631\u0634\u062f \u06cc\u06a9 \u06af\u06cc\u0627\u0647 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a\u061f<\/div><\/div><img decoding=\"async\" class=\"qimg\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-5.webp\" alt=\"\u0631\u0634\u062f \u06af\u06cc\u0627\u0647\"><div class=\"options\"><button class=\"option\" data-value=\"0\">\u067e\u0627\u06a9\u200c\u06a9\u0646<\/button><button class=\"option\" data-value=\"1\">\u0627\u0633\u0628\u0627\u0628\u200c\u0628\u0627\u0632\u06cc<\/button><button class=\"option\" data-value=\"2\">\u0645\u062f\u0627\u062f \u0631\u0646\u06af\u06cc<\/button><button class=\"option\" data-value=\"3\">\u0622\u0628 \u0648 \u0646\u0648\u0631 \u062e\u0648\u0631\u0634\u06cc\u062f<\/button><\/div><div class=\"actions\"><button class=\"btn-primary\" onclick=\"checkQuiz(this)\">\u062b\u0628\u062a \u062c\u0648\u0627\u0628<\/button><button class=\"btn-soft\" onclick=\"showAnswer(this)\">\u0646\u0645\u0627\u06cc\u0634 \u062c\u0648\u0627\u0628<\/button><\/div><div class=\"feedback\"><\/div><\/section>\n<h2 class=\"section-title\">\u06f2. \u0641\u0639\u0627\u0644\u06cc\u062a \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0628\u0627 \u06a9\u0634\u06cc\u062f\u0646 \u0648 \u0631\u0647\u0627 \u06a9\u0631\u062f\u0646<\/h2>\n<section class=\"card\"><div class=\"qtitle\">\u0647\u0631 \u0648\u0633\u06cc\u0644\u0647 \u0631\u0627 \u062f\u0631 \u062f\u0633\u062a\u0647 \u0645\u0646\u0627\u0633\u0628 \u0628\u06cc\u0646\u062f\u0627\u0632<\/div><p class=\"small\">\u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631 \u0628\u06a9\u0634 \u0648 \u0631\u0647\u0627 \u06a9\u0646. \u0631\u0648\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u06cc\u06a9 \u0628\u0627\u0631 \u0631\u0648\u06cc \u06a9\u0627\u0631\u062a \u0628\u0632\u0646 \u0648 \u0628\u0639\u062f \u0631\u0648\u06cc \u062f\u0633\u062a\u0647 \u0645\u0642\u0635\u062f \u0628\u0632\u0646.<\/p><div class=\"chips\"><div class=\"chip\" draggable=\"true\" data-type=\"math\">\ud83d\udccf \u062e\u0637\u200c\u06a9\u0634<\/div><div class=\"chip\" draggable=\"true\" data-type=\"science\">\ud83d\udd2c \u0645\u06cc\u06a9\u0631\u0648\u0633\u06a9\u0648\u067e<\/div><div class=\"chip\" draggable=\"true\" data-type=\"math\">\ud83e\uddee \u0686\u0631\u062a\u06a9\u0647<\/div><div class=\"chip\" draggable=\"true\" data-type=\"science\">\ud83d\udd0d \u0630\u0631\u0647\u200c\u0628\u06cc\u0646<\/div><\/div><div class=\"demo-grid\"><div class=\"dropzone\" data-zone=\"math\"><h3>\u0631\u06cc\u0627\u0636\u06cc<\/h3><div class=\"zone-content\"><\/div><\/div><div class=\"dropzone\" data-zone=\"science\"><h3>\u0639\u0644\u0648\u0645<\/h3><div class=\"zone-content\"><\/div><\/div><\/div><div id=\"dragFeedback\" class=\"feedback\"><\/div><\/section>\n<h2 class=\"section-title\">\u06f3. \u0641\u0644\u0634\u200c\u06a9\u0627\u0631\u062a \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0645\u0631\u0648\u0631 \u0633\u0631\u06cc\u0639<\/h2>\n<section class=\"card\"><div class=\"qtitle\">\u0631\u0648\u06cc \u06a9\u0627\u0631\u062a \u06a9\u0644\u06cc\u06a9 \u06a9\u0646 \u062a\u0627 \u062c\u0648\u0627\u0628 \u0628\u0631\u06af\u0631\u062f\u062f<\/div><div class=\"flashcard\" onclick=\"this.classList.toggle('flipped')\"><div class=\"flash-inner\"><div class=\"flash-face\">\u06af\u06cc\u0627\u0647 \u0628\u0631\u0627\u06cc \u0631\u0634\u062f \u0628\u0647 \u0686\u0647 \u0686\u06cc\u0632\u0647\u0627\u06cc\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f\u061f<\/div><div class=\"flash-face flash-back\">\u0622\u0628\u060c \u0646\u0648\u0631\u060c \u0647\u0648\u0627 \u0648 \u0645\u0648\u0627\u062f \u063a\u0630\u0627\u06cc\u06cc \u062e\u0627\u06a9 \ud83c\udf31<\/div><\/div><\/div><\/section>\n<section class=\"card\"><div class=\"qtitle\">\u0646\u0645\u0648\u0646\u0647 \u062a\u0635\u0648\u06cc\u0631\u06cc\u0650 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0631\u06cc\u0627\u0636\u06cc<\/div><img decoding=\"async\" class=\"qimg\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-3.webp\" alt=\"\u0627\u0634\u06a9\u0627\u0644 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0647\u0627\"><p class=\"small\">\u062f\u0631 \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0631\u0648\u06cc \u0634\u06a9\u0644\u200c\u0647\u0627\u060c \u0631\u0646\u06af\u200c\u0647\u0627 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0647\u0627 \u0633\u0624\u0627\u0644\u200c\u0647\u0627\u06cc \u0645\u0633\u062a\u0642\u0644 \u0633\u0627\u062e\u062a.<\/p><\/section>\n<section class=\"final\" id=\"finalBox\"><img decoding=\"async\" src=\"https:\/\/notes.thebestbooks.ir\/wp-content\/uploads\/2026\/09\/interactive-html-2.webp\" alt=\"\u062a\u0628\u0631\u06cc\u06a9\"><h2>\u0622\u0641\u0631\u06cc\u0646! \u0647\u0631 \u0633\u0647 \u0633\u0624\u0627\u0644 \u0627\u0635\u0644\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f \ud83c\udf89<\/h2><p id=\"finalText\"><\/p><\/section>\n\n<h2 class=\"section-title\">\u06f4. \u0628\u0627\u0632\u06cc \u062a\u0631\u062a\u06cc\u0628 \u0645\u0631\u0627\u062d\u0644 \u0631\u0634\u062f \u06af\u06cc\u0627\u0647<\/h2>\n<section class=\"card\">\n <span class=\"bonus-label\">\u062a\u0639\u0627\u0645\u0644 \u0622\u0645\u0648\u0632\u0634\u06cc \u062c\u062f\u06cc\u062f<\/span>\n <div class=\"qtitle\">\u0645\u0631\u0627\u062d\u0644 \u0631\u0634\u062f \u06af\u06cc\u0627\u0647 \u0631\u0627 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u062f\u0631\u0633\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646<\/div>\n <p class=\"small\">\u0627\u0632 \u0645\u0631\u062d\u0644\u0647 \u0627\u0648\u0644 \u0634\u0631\u0648\u0639 \u06a9\u0646. \u0647\u0631 \u0628\u0627\u0631 \u0631\u0648\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u062a \u0628\u0632\u0646 \u062a\u0627 \u0648\u0627\u0631\u062f \u062a\u0631\u062a\u06cc\u0628 \u0634\u0648\u062f.<\/p>\n\n <div class=\"sequence-grid\" id=\"sequenceGrid\">\n <button class=\"sequence-card\" data-step=\"3\"><span class=\"seq-icon\">\ud83c\udf3f<\/span><span>\u06af\u06cc\u0627\u0647 \u062c\u0648\u0627\u0646<\/span><\/button>\n <button class=\"sequence-card\" data-step=\"1\"><span class=\"seq-icon\">\ud83c\udf30<\/span><span>\u062f\u0627\u0646\u0647<\/span><\/button>\n <button class=\"sequence-card\" data-step=\"4\"><span class=\"seq-icon\">\ud83c\udf3b<\/span><span>\u06af\u06cc\u0627\u0647 \u0631\u0634\u062f\u06a9\u0631\u062f\u0647<\/span><\/button>\n <button class=\"sequence-card\" data-step=\"2\"><span class=\"seq-icon\">\ud83c\udf31<\/span><span>\u062c\u0648\u0627\u0646\u0647<\/span><\/button>\n <\/div>\n\n <div class=\"sequence-result\" id=\"sequenceResult\">\n <span class=\"small\">\u062a\u0631\u062a\u06cc\u0628 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u062a\u0648 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/span>\n <\/div>\n\n <div class=\"actions\">\n <button class=\"btn-primary\" onclick=\"checkSequence()\">\u0628\u0631\u0631\u0633\u06cc \u062a\u0631\u062a\u06cc\u0628<\/button>\n <button class=\"btn-soft\" onclick=\"resetSequence()\">\u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646<\/button>\n <\/div>\n <div id=\"sequenceFeedback\" class=\"feedback\"><\/div>\n<\/section>\n\n<h2 class=\"section-title\">\u06f5. \u0622\u0632\u0645\u0627\u06cc\u0634 \u0645\u062c\u0627\u0632\u06cc \u0639\u0644\u0648\u0645\u061b \u06af\u06cc\u0627\u0647 \u0628\u0647 \u0686\u0647 \u0686\u06cc\u0632\u0647\u0627\u06cc\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f\u061f<\/h2>\n<section class=\"card\">\n <span class=\"bonus-label\">\u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0627\u062f\u0647<\/span>\n <div class=\"qtitle\">\u0622\u0628 \u0648 \u0646\u0648\u0631 \u0631\u0627 \u0631\u0648\u0634\u0646 \u06cc\u0627 \u062e\u0627\u0645\u0648\u0634 \u06a9\u0646 \u0648 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u0628\u0628\u06cc\u0646<\/div>\n\n <div class=\"lab-wrap\">\n <div class=\"lab-visual\">\n <div class=\"lab-plant\" id=\"labPlant\">\ud83c\udf31<\/div>\n <div class=\"lab-status\" id=\"labStatus\">\u06af\u06cc\u0627\u0647 \u0645\u0646\u062a\u0638\u0631 \u0634\u0631\u0627\u06cc\u0637 \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a<\/div>\n <div class=\"lab-meter\"><div id=\"labMeterFill\"><\/div><\/div>\n <\/div>\n\n <div class=\"lab-controls\">\n <div class=\"switch-row\">\n <div><b>\ud83d\udca7 \u0622\u0628<\/b><div class=\"small\">\u06af\u06cc\u0627\u0647 \u0628\u0631\u0627\u06cc \u0631\u0634\u062f \u0628\u0647 \u0622\u0628 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.<\/div><\/div>\n <button class=\"toggle\" id=\"waterToggle\" aria-label=\"\u0622\u0628\" onclick=\"toggleLab('water')\"><\/button>\n <\/div>\n <div class=\"switch-row\">\n <div><b>\u2600\ufe0f \u0646\u0648\u0631 \u062e\u0648\u0631\u0634\u06cc\u062f<\/b><div class=\"small\">\u0646\u0648\u0631 \u0628\u0647 \u06af\u06cc\u0627\u0647 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u063a\u0630\u0627 \u0628\u0633\u0627\u0632\u062f.<\/div><\/div>\n <button class=\"toggle\" id=\"lightToggle\" aria-label=\"\u0646\u0648\u0631\" onclick=\"toggleLab('light')\"><\/button>\n <\/div>\n <div class=\"mini-tip\" id=\"labTip\">\u0647\u0631 \u062f\u0648 \u0639\u0627\u0645\u0644 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646 \u062a\u0627 \u0628\u0628\u06cc\u0646\u06cc \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u06af\u06cc\u0627\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0648\u0636\u0639\u06cc\u062a \u0631\u0627 \u062f\u0627\u0631\u062f.<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<h2 class=\"section-title\">\u06f6. \u0645\u0627\u0634\u06cc\u0646 \u062c\u0645\u0639 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u06cc\u0627\u0636\u06cc<\/h2>\n<section class=\"card\">\n <span class=\"bonus-label\">\u062a\u0645\u0631\u06cc\u0646 \u0639\u062f\u062f\u0633\u0627\u0632\u06cc<\/span>\n <div class=\"qtitle\">\u062a\u0639\u062f\u0627\u062f \u062f\u0648 \u06af\u0631\u0648\u0647 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0628\u062f\u0647 \u0648 \u062d\u0627\u0635\u0644 \u062c\u0645\u0639 \u0631\u0627 \u0647\u0645\u0627\u0646 \u0644\u062d\u0638\u0647 \u0628\u0628\u06cc\u0646<\/div>\n <p class=\"small\">\u0627\u06cc\u0646 \u0645\u062f\u0644 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u062c\u0645\u0639\u060c \u062a\u0641\u0631\u06cc\u0642\u060c \u0636\u0631\u0628 \u06cc\u0627 \u062d\u062a\u06cc \u062a\u0645\u0631\u06cc\u0646 \u0627\u0631\u0632\u0634 \u0645\u06a9\u0627\u0646\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.<\/p>\n\n <div class=\"math-machine\">\n <div class=\"number-box\">\n <div class=\"number-title\">\u06af\u0631\u0648\u0647 \u0627\u0648\u0644<\/div>\n <div class=\"number-value\" id=\"numA\">2<\/div>\n <div class=\"star-line\" id=\"starsA\">\u2b50\u2b50<\/div>\n <div class=\"stepper\">\n <button class=\"step-btn\" onclick=\"changeNumber('a',1)\">+<\/button>\n <button class=\"step-btn\" onclick=\"changeNumber('a',-1)\">\u2212<\/button>\n <\/div>\n <\/div>\n\n <div class=\"math-sign\">+<\/div>\n\n <div class=\"number-box\">\n <div class=\"number-title\">\u06af\u0631\u0648\u0647 \u062f\u0648\u0645<\/div>\n <div class=\"number-value\" id=\"numB\">3<\/div>\n <div class=\"star-line\" id=\"starsB\">\u2b50\u2b50\u2b50<\/div>\n <div class=\"stepper\">\n <button class=\"step-btn\" onclick=\"changeNumber('b',1)\">+<\/button>\n <button class=\"step-btn\" onclick=\"changeNumber('b',-1)\">\u2212<\/button>\n <\/div>\n <\/div>\n\n <div class=\"math-sign\">=<\/div>\n\n <div class=\"number-box total-box\">\n <div class=\"number-title\">\u062d\u0627\u0635\u0644<\/div>\n <div class=\"number-value\" id=\"numTotal\">5<\/div>\n <div class=\"star-line\" id=\"starsTotal\">\u2b50\u2b50\u2b50\u2b50\u2b50<\/div>\n <\/div>\n <\/div>\n\n <div class=\"mini-tip\">\u0628\u0627 \u0686\u0646\u062f \u0628\u0627\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u0639\u062f\u062f\u0647\u0627\u060c \u062f\u0627\u0646\u0634\u200c\u0622\u0645\u0648\u0632 \u0631\u0627\u0628\u0637\u0647 \u0628\u06cc\u0646 \u00ab\u062a\u0639\u062f\u0627\u062f \u0648\u0627\u0642\u0639\u06cc \u0627\u0634\u06cc\u0627\u00bb \u0648 \u00ab\u0639\u062f\u062f\u00bb \u0631\u0627 \u0647\u0645\u0632\u0645\u0627\u0646 \u0645\u06cc\u200c\u0628\u06cc\u0646\u062f.<\/div>\n<\/section>\n\n<\/div>\n<script>\nconst answered=new Map();let score=0,activeChip=null;\ndocument.querySelectorAll('.quiz .option,.quiz .visual-choice').forEach(btn=>btn.addEventListener('click',()=>{const q=btn.closest('.quiz');q.querySelectorAll('.option,.visual-choice').forEach(x=>x.classList.remove('selected'));btn.classList.add('selected')}));\nfunction checkQuiz(button){const q=button.closest('.quiz'),sel=q.querySelector('.selected'),fb=q.querySelector('.feedback'),correct=Number(q.dataset.answer);if(!sel){fb.className='feedback bad';fb.textContent='\u0627\u0648\u0644 \u06cc\u06a9\u06cc \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646.';return}const value=Number(sel.dataset.value);q.querySelectorAll('.option,.visual-choice').forEach(x=>{x.classList.remove('correct','wrong');if(Number(x.dataset.value)===correct)x.classList.add('correct')});const ok=value===correct;if(!ok)sel.classList.add('wrong');const idx=[...document.querySelectorAll('.quiz')].indexOf(q);if(!answered.has(idx)){answered.set(idx,ok);if(ok)score++}fb.className='feedback '+(ok?'ok':'bad');fb.innerHTML=ok?'<b>\u062f\u0631\u0633\u062a\u0647 \ud83d\udc4f<\/b> \u062e\u06cc\u0644\u06cc \u062e\u0648\u0628! \u062c\u0648\u0627\u0628 \u0631\u0627 \u062f\u0631\u0633\u062a \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u06cc.':'<b>\u0627\u06cc\u0646 \u062c\u0648\u0627\u0628 \u062f\u0631\u0633\u062a \u0646\u06cc\u0633\u062a.<\/b> \u062c\u0648\u0627\u0628 \u0635\u062d\u06cc\u062d \u0628\u0627 \u0631\u0646\u06af \u0633\u0628\u0632 \u0645\u0634\u062e\u0635 \u0634\u062f.';updateStatus()}\nfunction showAnswer(button){const q=button.closest('.quiz'),correct=Number(q.dataset.answer);q.querySelectorAll('.option,.visual-choice').forEach(x=>{x.classList.remove('correct','wrong');if(Number(x.dataset.value)===correct)x.classList.add('correct')});const fb=q.querySelector('.feedback');fb.className='feedback ok';fb.textContent='\u062c\u0648\u0627\u0628 \u0635\u062d\u06cc\u062d \u0628\u0627 \u0631\u0646\u06af \u0633\u0628\u0632 \u0645\u0634\u062e\u0635 \u0634\u062f.'}\nfunction updateStatus(){document.getElementById('scoreText').textContent=`\u0627\u0645\u062a\u06cc\u0627\u0632 ${score} \u0627\u0632 \u06f3`;document.getElementById('progressBar').style.width=`${answered.size\/3*100}%`;if(answered.size===3){const box=document.getElementById('finalBox');box.classList.add('show');document.getElementById('finalText').textContent=score===3?'\u0633\u0647 \u0627\u0632 \u0633\u0647! \u0639\u0627\u0644\u06cc \u0628\u0648\u062f.':score===2?'\u062f\u0648 \u062c\u0648\u0627\u0628 \u062f\u0631\u0633\u062a\u061b \u062e\u06cc\u0644\u06cc \u062e\u0648\u0628 \u067e\u06cc\u0634 \u0631\u0641\u062a\u06cc.':score===1?'\u06cc\u06a9 \u062c\u0648\u0627\u0628 \u062f\u0631\u0633\u062a\u061b \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646.':'\u0627\u06cc\u0646 \u0628\u0627\u0631 \u062c\u0648\u0627\u0628 \u062f\u0631\u0633\u062a \u0646\u062f\u0627\u0634\u062a\u06cc\u061b \u062f\u0648\u0628\u0627\u0631\u0647 \u062a\u0644\u0627\u0634 \u06a9\u0646.';box.scrollIntoView({behavior:'smooth',block:'center'})}}\nfunction resetAll(){answered.clear();score=0;document.querySelectorAll('.quiz').forEach(q=>{q.querySelectorAll('.option,.visual-choice').forEach(x=>x.classList.remove('selected','correct','wrong'));const f=q.querySelector('.feedback');f.className='feedback';f.textContent=''});document.querySelectorAll('.chip').forEach(c=>{c.classList.remove('used');c.style.outline=''});document.querySelectorAll('.zone-content').forEach(z=>z.innerHTML='');const d=document.getElementById('dragFeedback');d.className='feedback';d.textContent='';document.getElementById('finalBox').classList.remove('show');document.querySelectorAll('.flashcard').forEach(f=>f.classList.remove('flipped'));updateStatus()}\ndocument.querySelectorAll('.chip').forEach(chip=>{chip.addEventListener('dragstart',e=>{activeChip=chip;e.dataTransfer.setData('text\/plain',chip.dataset.type)});chip.addEventListener('click',()=>{document.querySelectorAll('.chip').forEach(c=>c.style.outline='');activeChip=chip;chip.style.outline='3px solid #cfc4ff'})});\ndocument.querySelectorAll('.dropzone').forEach(zone=>{zone.addEventListener('dragover',e=>e.preventDefault());zone.addEventListener('drop',e=>{e.preventDefault();if(activeChip)placeChip(activeChip,zone)});zone.addEventListener('click',()=>{if(activeChip)placeChip(activeChip,zone)})});\nfunction placeChip(chip,zone){const ok=chip.dataset.type===zone.dataset.zone,fb=document.getElementById('dragFeedback');if(ok){const clone=chip.cloneNode(true);clone.removeAttribute('draggable');clone.style.cursor='default';clone.style.outline='';zone.querySelector('.zone-content').appendChild(clone);chip.classList.add('used');chip.style.outline='';activeChip=null;const left=[...document.querySelectorAll('.chip')].filter(c=>!c.classList.contains('used')).length;fb.className='feedback ok';fb.textContent=left===0?'\u0639\u0627\u0644\u06cc! \u0647\u0645\u0647 \u0648\u0633\u0627\u06cc\u0644 \u0631\u0627 \u062f\u0631\u0633\u062a \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u06a9\u0631\u062f\u06cc.':'\u062f\u0631\u0633\u062a\u0647\u061b \u06a9\u0627\u0631\u062a \u062f\u0631 \u062f\u0633\u062a\u0647 \u0645\u0646\u0627\u0633\u0628 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a.'}else{fb.className='feedback bad';fb.textContent='\u0627\u06cc\u0646 \u062f\u0633\u062a\u0647 \u062f\u0631\u0633\u062a \u0646\u06cc\u0633\u062a\u061b \u06cc\u06a9 \u0628\u0627\u0631 \u062f\u06cc\u06af\u0631 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646.'}}\n\n\/* ===== \u062a\u0639\u0627\u0645\u0644\u200c\u0647\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0647\u200c\u0634\u062f\u0647 ===== *\/\nlet sequenceOrder=[];\ndocument.querySelectorAll('#sequenceGrid .sequence-card').forEach(card=>{\n card.addEventListener('click',()=>{\n if(card.classList.contains('picked')) return;\n card.classList.add('picked');\n sequenceOrder.push({\n step:Number(card.dataset.step),\n label:card.innerText.trim(),\n html:card.querySelector('.seq-icon').textContent\n });\n renderSequence();\n });\n});\n\nfunction renderSequence(){\n const box=document.getElementById('sequenceResult');\n if(!sequenceOrder.length){\n box.innerHTML='<span class=\"small\">\u062a\u0631\u062a\u06cc\u0628 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u062a\u0648 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/span>';\n return;\n }\n box.innerHTML=sequenceOrder.map((x,i)=>`<span class=\"sequence-pill\">${i+1}. ${x.html} ${x.label}<\/span>`).join('');\n}\n\nfunction checkSequence(){\n const fb=document.getElementById('sequenceFeedback');\n const cards=[...document.querySelectorAll('#sequenceGrid .sequence-card')];\n cards.forEach(c=>c.classList.remove('seq-ok','seq-bad'));\n\n if(sequenceOrder.length<4){\n fb.className='feedback bad';\n fb.textContent='\u0647\u0646\u0648\u0632 \u0647\u0645\u0647 \u0645\u0631\u0627\u062d\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0646\u06a9\u0631\u062f\u06cc.';\n return;\n }\n\n const ok=sequenceOrder.every((x,i)=>x.step===i+1);\n if(ok){\n cards.forEach(c=>c.classList.add('seq-ok'));\n fb.className='feedback ok';\n fb.innerHTML='<b>\u0639\u0627\u0644\u06cc\u0647 \ud83c\udf31<\/b> \u062a\u0631\u062a\u06cc\u0628 \u0631\u0634\u062f \u06af\u06cc\u0627\u0647 \u0631\u0627 \u062f\u0631\u0633\u062a \u0686\u06cc\u062f\u06cc.';\n }else{\n cards.forEach(c=>c.classList.add('seq-bad'));\n fb.className='feedback bad';\n fb.innerHTML='<b>\u0647\u0646\u0648\u0632 \u062a\u0631\u062a\u06cc\u0628 \u062f\u0631\u0633\u062a \u0646\u06cc\u0633\u062a.<\/b> \u0627\u0632 \u062f\u0627\u0646\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646 \u0648 \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646.';\n }\n}\n\nfunction resetSequence(){\n sequenceOrder=[];\n document.querySelectorAll('#sequenceGrid .sequence-card').forEach(c=>c.classList.remove('picked','seq-ok','seq-bad'));\n renderSequence();\n const fb=document.getElementById('sequenceFeedback');\n fb.className='feedback';fb.textContent='';\n}\n\nlet labState={water:false,light:false};\nfunction toggleLab(type){\n labState[type]=!labState[type];\n document.getElementById(type+'Toggle').classList.toggle('on',labState[type]);\n updateLab();\n}\nfunction updateLab(){\n const plant=document.getElementById('labPlant');\n const status=document.getElementById('labStatus');\n const meter=document.getElementById('labMeterFill');\n const tip=document.getElementById('labTip');\n const count=(labState.water?1:0)+(labState.light?1:0);\n\n if(count===2){\n plant.textContent='\ud83c\udf3b';\n plant.style.filter='saturate(1.15)';\n status.textContent='\u0634\u0631\u0627\u06cc\u0637 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a\u061b \u06af\u06cc\u0627\u0647 \u0631\u0634\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f!';\n meter.style.width='100%';\n tip.textContent='\u0646\u062a\u06cc\u062c\u0647: \u0622\u0628 + \u0646\u0648\u0631 \u0628\u0627 \u0647\u0645\u060c \u0634\u0631\u0627\u06cc\u0637 \u0645\u0646\u0627\u0633\u0628\u200c\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc \u0631\u0634\u062f \u06af\u06cc\u0627\u0647 \u0645\u06cc\u200c\u0633\u0627\u0632\u0646\u062f.';\n }else if(count===1){\n plant.textContent='\ud83c\udf31';\n plant.style.filter='saturate(.85)';\n status.textContent='\u06cc\u06a9 \u0646\u06cc\u0627\u0632 \u0641\u0631\u0627\u0647\u0645 \u0634\u062f\u0647\u060c \u0627\u0645\u0627 \u0647\u0646\u0648\u0632 \u06a9\u0627\u0645\u0644 \u0646\u06cc\u0633\u062a';\n meter.style.width='58%';\n tip.textContent=labState.water?'\u0622\u0628 \u0647\u0633\u062a\u061b \u062d\u0627\u0644\u0627 \u0646\u0648\u0631 \u0631\u0627 \u0647\u0645 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646.':'\u0646\u0648\u0631 \u0647\u0633\u062a\u061b \u062d\u0627\u0644\u0627 \u0622\u0628 \u0631\u0627 \u0647\u0645 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646.';\n }else{\n plant.textContent='\ud83e\udd40';\n plant.style.filter='grayscale(.2) saturate(.55)';\n status.textContent='\u0628\u062f\u0648\u0646 \u0622\u0628 \u0648 \u0646\u0648\u0631\u060c \u06af\u06cc\u0627\u0647 \u0648\u0636\u0639\u06cc\u062a \u062e\u0648\u0628\u06cc \u0646\u062f\u0627\u0631\u062f';\n meter.style.width='18%';\n tip.textContent='\u0647\u0631 \u062f\u0648 \u06a9\u0644\u06cc\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0628\u062f\u0647 \u0648 \u0627\u062b\u0631\u0634\u0627\u0646 \u0631\u0627 \u0645\u0642\u0627\u06cc\u0633\u0647 \u06a9\u0646.';\n }\n}\nupdateLab();\n\nlet mathA=2,mathB=3;\nfunction changeNumber(which,delta){\n if(which==='a') mathA=Math.max(0,Math.min(9,mathA+delta));\n else mathB=Math.max(0,Math.min(9,mathB+delta));\n updateMathMachine();\n}\nfunction starString(n){\n return n? '\u2b50'.repeat(n) : '\u2014';\n}\nfunction updateMathMachine(){\n document.getElementById('numA').textContent=mathA;\n document.getElementById('numB').textContent=mathB;\n document.getElementById('numTotal').textContent=mathA+mathB;\n document.getElementById('starsA').textContent=starString(mathA);\n document.getElementById('starsB').textContent=starString(mathB);\n document.getElementById('starsTotal').textContent=starString(mathA+mathB);\n}\nupdateMathMachine();\n\nconst originalResetAll=resetAll;\nresetAll=function(){\n originalResetAll();\n resetSequence();\n labState={water:false,light:false};\n document.getElementById('waterToggle').classList.remove('on');\n document.getElementById('lightToggle').classList.remove('on');\n updateLab();\n mathA=2;mathB=3;updateMathMachine();\n};\n\nupdateStatus();\n<\/script><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0646\u0645\u0648\u0646\u0647 HTML \u062a\u0639\u0627\u0645\u0644\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc | \u0639\u0644\u0648\u0645 \u0648 \u0631\u06cc\u0627\u0636\u06cc \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc \u0631\u06cc\u0627\u0636\u06cc \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc\u0639\u0644\u0648\u0645 \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc\u062a\u0639\u0627\u0645\u0644 \u0648\u0627\u0642\u0639\u06cc \u0628\u0627 HTML \u0646\u0645\u0648\u0646\u0647 \u0622\u0645\u0648\u0632\u0634 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0627\u0628\u062a\u062f\u0627\u06cc\u06cc \u0646\u0645\u0648\u0646\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0633\u0624\u0627\u0644\u060c \u062a\u0635\u0648\u06cc\u0631\u060c \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0641\u0648\u0631\u06cc\u060c \u0627\u0645\u062a\u06cc\u0627\u0632\u060c \u0628\u0627\u0632\u06cc \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0648 \u0641\u0644\u0634\u200c\u06a9\u0627\u0631\u062a \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc. \u0627\u0645\u062a\u06cc\u0627\u0632 \u06f0 \u0627\u0632 \u06f3 \u0634\u0631\u0648\u0639 \u062f\u0648\u0628\u0627\u0631\u0647 \u06f1. \u0633\u0624\u0627\u0644 \u0686\u0647\u0627\u0631\u06af\u0632\u06cc\u0646\u0647\u200c\u0627\u06cc \u0628\u0627 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0641\u0648\u0631\u06cc \u0633\u0624\u0627\u0644 \u06f1 \u0627\u06af\u0631 \u06f3 \u0633\u06cc\u0628 \u062f\u0627\u0634\u062a\u0647 […]<\/p>\n","protected":false},"author":1,"featured_media":900345,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-900351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-14"],"_links":{"self":[{"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/posts\/900351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=900351"}],"version-history":[{"count":4,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/posts\/900351\/revisions"}],"predecessor-version":[{"id":900355,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/posts\/900351\/revisions\/900355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=\/wp\/v2\/media\/900345"}],"wp:attachment":[{"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=900351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=900351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.thebestbooks.ir\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=900351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}