Cyber Navigators Quiz (14\u201318)<\/title>\r\n<style>\r\n #quizForm {\r\n max-width: 600px;\r\n margin: 40px auto;\r\n padding: 20px;\r\n font-family: sans-serif;\r\n border: 2px solid #e2e2e2;\r\n border-radius: 12px;\r\n background-color: #fdfdfd;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n #quizForm label {\r\n display: block;\r\n margin-bottom: 15px;\r\n font-weight: bold;\r\n color: #333;\r\n }\r\n\r\n #quizForm input[type=\"text\"],\r\n #quizForm input[type=\"email\"],\r\n #quizForm input[type=\"number\"],\r\n #quizForm select {\r\n width: 100%;\r\n padding: 10px;\r\n margin-top: 5px;\r\n border: 1px solid #ccc;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n background: #fff;\r\n }\r\n\r\n #quizForm button {\r\n margin-top: 20px;\r\n padding: 12px 25px;\r\n background-color: #0073aa;\r\n color: white;\r\n font-size: 16px;\r\n border: none;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n }\r\n\r\n #quizForm button:hover {\r\n background-color: #005f8c;\r\n }\r\n\r\n \/* Success card *\/\r\n #successCard {\r\n display: none;\r\n text-align: center;\r\n padding: 30px;\r\n }\r\n\r\n #successCard .card {\r\n background: #fff;\r\n border-radius: 16px;\r\n padding: 30px;\r\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);\r\n max-width: 420px;\r\n margin: 40px auto;\r\n animation: fadeIn 0.5s ease-in-out;\r\n }\r\n\r\n #successCard img {\r\n width: 100px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n #successCard h2 {\r\n color: #28a745;\r\n margin-bottom: 10px;\r\n font-family: sans-serif;\r\n }\r\n\r\n #successCard p {\r\n margin: 8px 0;\r\n color: #333;\r\n font-family: sans-serif;\r\n }\r\n\r\n #successCard button {\r\n margin-top: 20px;\r\n padding: 10px 20px;\r\n background: #ff6b6b;\r\n color: #fff;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n }\r\n\r\n #successCard button:hover {\r\n background: #e05656;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(-20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2 style=\"text-align:center; font-family: sans-serif; color: #d11319; margin-top: 20px;\">\r\n \ud83e\udde0 Cyber Navigators Quiz (Ages 14\u201318)\r\n<\/h2>\r\n\r\n<p style=\"text-align:center; max-width: 500px; margin: auto; color: #000; font-family: sans-serif;\">\r\n Rate how much you agree with each statement (1 = Strongly Disagree, 5 = Strongly Agree)\r\n<\/p>\r\n\r\n<form id=\"quizForm\" novalidate>\r\n <label>Name:\r\n <input type=\"text\" name=\"name\" required \/>\r\n <\/label>\r\n\r\n <label>Email:\r\n <input type=\"email\" name=\"email\" required \/>\r\n <\/label>\r\n \r\n \r\n <label>Age Group:\r\n <input type=\"text\" name=\"age group\" value=\"14-18\" readonly required \/>\r\n <\/label>\r\n\r\n \r\n <label>Q1: I can tell when an online article or post might contain misinformation.\r\n <select name=\"q1\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q2: I understand how to manage my privacy settings on social media.\r\n <select name=\"q2\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q3: I can balance screen time with school, sleep, and offline activities.\r\n <select name=\"q3\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q4: I know how to report and block someone who is being inappropriate online.\r\n <select name=\"q4\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q5: I think critically about what I post before I share it.\r\n <select name=\"q5\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q6: I know when an online source is reliable for schoolwork.\r\n <select name=\"q6\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q7: I can explain why digital footprints are important.\r\n <select name=\"q7\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q8: I understand the consequences of sharing harmful or illegal content.\r\n <select name=\"q8\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q9: I regularly update my devices and apps to stay secure.\r\n <select name=\"q9\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q10: I am aware of how algorithms affect what I see online.\r\n <select name=\"q10\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <button type=\"submit\">Submit<\/button>\r\n<\/form>\r\n\r\n\r\n<div id=\"successCard\">\r\n <div class=\"card\">\r\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/190\/190411.png\" alt=\"Success\" \/>\r\n <h2>\ud83c\udf89 Congratulations!<\/h2>\r\n <p id=\"scoreText\"><\/p>\r\n <p id=\"badgeText\" style=\"font-weight:bold;\"><\/p>\r\n <button id=\"closeBtn\" type=\"button\">Close<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const formEl = document.getElementById(\"quizForm\");\r\n const successCard = document.getElementById(\"successCard\");\r\n const scoreText = document.getElementById(\"scoreText\");\r\n const badgeText = document.getElementById(\"badgeText\");\r\n const closeBtn = document.getElementById(\"closeBtn\");\r\n\r\n \/\/ Your deployed Apps Script Web App URL\r\n const SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbyHO7ahYIrZFJZGGIfGbzG206o0YRqs7c1AtQob3U5sRnG2Mkmz9L-hleZA3erMA779\/exec\";\r\n\r\n closeBtn.addEventListener(\"click\", () => {\r\n \/\/ Reload to allow a fresh submission\r\n location.reload();\r\n });\r\n\r\n formEl.addEventListener(\"submit\", async (e) => {\r\n e.preventDefault();\r\n\r\n \/\/ Validate selects quickly (ensures no empty \"Select\")\r\n const selects = formEl.querySelectorAll(\"select[required]\");\r\n for (const s of selects) {\r\n if (!s.value) {\r\n s.focus();\r\n return;\r\n }\r\n }\r\n\r\n const formData = new FormData(formEl);\r\n\r\n \/\/ Calculate total score\r\n let total = 0;\r\n for (let i = 1; i <= 10; i++) {\r\n total += parseInt(formData.get(\"q\" + i), 10) || 0;\r\n }\r\n\r\n \/\/ Assign badge\r\n let badge = \"\";\r\n if (total >= 40) badge = \"Cyber Scout of SparkleBytes Forest\";\r\n else if (total >= 30) badge = \"Digital Pathfinder of PixelTown\";\r\n else badge = \"Need more practice\";\r\n\r\n \/\/ Append score + badge\r\n formData.append(\"total\", total);\r\n formData.append(\"badge\", badge);\r\n\r\n \/\/ Instantly hide form and show card with \"Submitting...\"\r\n formEl.style.display = \"none\";\r\n successCard.style.display = \"block\";\r\n scoreText.textContent = \"\u23f3 Submitting your response...\";\r\n badgeText.textContent = \"\";\r\n\r\n \/\/ Optional: abort fetch if it takes too long (prevents hanging)\r\n const controller = new AbortController();\r\n const timeoutId = setTimeout(() => controller.abort(), 15000); \/\/ 15s cap\r\n\r\n try {\r\n const res = await fetch(SCRIPT_URL, {\r\n method: \"POST\",\r\n body: formData,\r\n signal: controller.signal,\r\n headers: { \"Accept\": \"application\/json\" },\r\n cache: \"no-store\"\r\n });\r\n\r\n clearTimeout(timeoutId);\r\n\r\n \/\/ Some Apps Scripts return text\/plain; try parsing safely\r\n let data;\r\n const text = await res.text();\r\n try { data = JSON.parse(text); } catch { data = { result: \"success\" }; }\r\n\r\n if (res.ok && data.result === \"success\") {\r\n scoreText.textContent = `\ud83c\udfaf Total Score: ${total}`;\r\n badgeText.textContent = `\ud83c\udfc5 Badge: ${badge}`;\r\n } else {\r\n scoreText.textContent = \"\u274c Error saving response.\";\r\n badgeText.textContent = \"\";\r\n }\r\n } catch (err) {\r\n scoreText.textContent = \"\u274c Network Error: \" + (err.name === \"AbortError\" ? \"Request timed out.\" : err.message);\r\n badgeText.textContent = \"\";\r\n }\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cyber Navigators Quiz (14\u201318) \ud83e\udde0 Cyber Navigators Quiz (Ages 14\u201318) Rate how much you agree with each statement (1 = […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-588","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/pages\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":23,"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/pages\/588\/revisions"}],"predecessor-version":[{"id":1072,"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/pages\/588\/revisions\/1072"}],"wp:attachment":[{"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/media?parent=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nCyber Navigators Quiz (14\u201318)<\/title>\r\n<style>\r\n #quizForm {\r\n max-width: 600px;\r\n margin: 40px auto;\r\n padding: 20px;\r\n font-family: sans-serif;\r\n border: 2px solid #e2e2e2;\r\n border-radius: 12px;\r\n background-color: #fdfdfd;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n #quizForm label {\r\n display: block;\r\n margin-bottom: 15px;\r\n font-weight: bold;\r\n color: #333;\r\n }\r\n\r\n #quizForm input[type=\"text\"],\r\n #quizForm input[type=\"email\"],\r\n #quizForm input[type=\"number\"],\r\n #quizForm select {\r\n width: 100%;\r\n padding: 10px;\r\n margin-top: 5px;\r\n border: 1px solid #ccc;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n background: #fff;\r\n }\r\n\r\n #quizForm button {\r\n margin-top: 20px;\r\n padding: 12px 25px;\r\n background-color: #0073aa;\r\n color: white;\r\n font-size: 16px;\r\n border: none;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n }\r\n\r\n #quizForm button:hover {\r\n background-color: #005f8c;\r\n }\r\n\r\n \/* Success card *\/\r\n #successCard {\r\n display: none;\r\n text-align: center;\r\n padding: 30px;\r\n }\r\n\r\n #successCard .card {\r\n background: #fff;\r\n border-radius: 16px;\r\n padding: 30px;\r\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);\r\n max-width: 420px;\r\n margin: 40px auto;\r\n animation: fadeIn 0.5s ease-in-out;\r\n }\r\n\r\n #successCard img {\r\n width: 100px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n #successCard h2 {\r\n color: #28a745;\r\n margin-bottom: 10px;\r\n font-family: sans-serif;\r\n }\r\n\r\n #successCard p {\r\n margin: 8px 0;\r\n color: #333;\r\n font-family: sans-serif;\r\n }\r\n\r\n #successCard button {\r\n margin-top: 20px;\r\n padding: 10px 20px;\r\n background: #ff6b6b;\r\n color: #fff;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n }\r\n\r\n #successCard button:hover {\r\n background: #e05656;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(-20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2 style=\"text-align:center; font-family: sans-serif; color: #d11319; margin-top: 20px;\">\r\n \ud83e\udde0 Cyber Navigators Quiz (Ages 14\u201318)\r\n<\/h2>\r\n\r\n<p style=\"text-align:center; max-width: 500px; margin: auto; color: #000; font-family: sans-serif;\">\r\n Rate how much you agree with each statement (1 = Strongly Disagree, 5 = Strongly Agree)\r\n<\/p>\r\n\r\n<form id=\"quizForm\" novalidate>\r\n <label>Name:\r\n <input type=\"text\" name=\"name\" required \/>\r\n <\/label>\r\n\r\n <label>Email:\r\n <input type=\"email\" name=\"email\" required \/>\r\n <\/label>\r\n \r\n \r\n <label>Age Group:\r\n <input type=\"text\" name=\"age group\" value=\"14-18\" readonly required \/>\r\n <\/label>\r\n\r\n \r\n <label>Q1: I can tell when an online article or post might contain misinformation.\r\n <select name=\"q1\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q2: I understand how to manage my privacy settings on social media.\r\n <select name=\"q2\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q3: I can balance screen time with school, sleep, and offline activities.\r\n <select name=\"q3\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q4: I know how to report and block someone who is being inappropriate online.\r\n <select name=\"q4\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q5: I think critically about what I post before I share it.\r\n <select name=\"q5\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q6: I know when an online source is reliable for schoolwork.\r\n <select name=\"q6\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q7: I can explain why digital footprints are important.\r\n <select name=\"q7\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q8: I understand the consequences of sharing harmful or illegal content.\r\n <select name=\"q8\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q9: I regularly update my devices and apps to stay secure.\r\n <select name=\"q9\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <label>Q10: I am aware of how algorithms affect what I see online.\r\n <select name=\"q10\" required>\r\n <option value=\"\">Select<\/option>\r\n <option value=\"1\">1 - Strongly Disagree<\/option>\r\n <option value=\"2\">2 - Disagree<\/option>\r\n <option value=\"3\">3 - Neutral<\/option>\r\n <option value=\"4\">4 - Agree<\/option>\r\n <option value=\"5\">5 - Strongly Agree<\/option>\r\n <\/select>\r\n <\/label>\r\n\r\n <button type=\"submit\">Submit<\/button>\r\n<\/form>\r\n\r\n\r\n<div id=\"successCard\">\r\n <div class=\"card\">\r\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/190\/190411.png\" alt=\"Success\" \/>\r\n <h2>\ud83c\udf89 Congratulations!<\/h2>\r\n <p id=\"scoreText\"><\/p>\r\n <p id=\"badgeText\" style=\"font-weight:bold;\"><\/p>\r\n <button id=\"closeBtn\" type=\"button\">Close<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const formEl = document.getElementById(\"quizForm\");\r\n const successCard = document.getElementById(\"successCard\");\r\n const scoreText = document.getElementById(\"scoreText\");\r\n const badgeText = document.getElementById(\"badgeText\");\r\n const closeBtn = document.getElementById(\"closeBtn\");\r\n\r\n \/\/ Your deployed Apps Script Web App URL\r\n const SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbyHO7ahYIrZFJZGGIfGbzG206o0YRqs7c1AtQob3U5sRnG2Mkmz9L-hleZA3erMA779\/exec\";\r\n\r\n closeBtn.addEventListener(\"click\", () => {\r\n \/\/ Reload to allow a fresh submission\r\n location.reload();\r\n });\r\n\r\n formEl.addEventListener(\"submit\", async (e) => {\r\n e.preventDefault();\r\n\r\n \/\/ Validate selects quickly (ensures no empty \"Select\")\r\n const selects = formEl.querySelectorAll(\"select[required]\");\r\n for (const s of selects) {\r\n if (!s.value) {\r\n s.focus();\r\n return;\r\n }\r\n }\r\n\r\n const formData = new FormData(formEl);\r\n\r\n \/\/ Calculate total score\r\n let total = 0;\r\n for (let i = 1; i <= 10; i++) {\r\n total += parseInt(formData.get(\"q\" + i), 10) || 0;\r\n }\r\n\r\n \/\/ Assign badge\r\n let badge = \"\";\r\n if (total >= 40) badge = \"Cyber Scout of SparkleBytes Forest\";\r\n else if (total >= 30) badge = \"Digital Pathfinder of PixelTown\";\r\n else badge = \"Need more practice\";\r\n\r\n \/\/ Append score + badge\r\n formData.append(\"total\", total);\r\n formData.append(\"badge\", badge);\r\n\r\n \/\/ Instantly hide form and show card with \"Submitting...\"\r\n formEl.style.display = \"none\";\r\n successCard.style.display = \"block\";\r\n scoreText.textContent = \"\u23f3 Submitting your response...\";\r\n badgeText.textContent = \"\";\r\n\r\n \/\/ Optional: abort fetch if it takes too long (prevents hanging)\r\n const controller = new AbortController();\r\n const timeoutId = setTimeout(() => controller.abort(), 15000); \/\/ 15s cap\r\n\r\n try {\r\n const res = await fetch(SCRIPT_URL, {\r\n method: \"POST\",\r\n body: formData,\r\n signal: controller.signal,\r\n headers: { \"Accept\": \"application\/json\" },\r\n cache: \"no-store\"\r\n });\r\n\r\n clearTimeout(timeoutId);\r\n\r\n \/\/ Some Apps Scripts return text\/plain; try parsing safely\r\n let data;\r\n const text = await res.text();\r\n try { data = JSON.parse(text); } catch { data = { result: \"success\" }; }\r\n\r\n if (res.ok && data.result === \"success\") {\r\n scoreText.textContent = `\ud83c\udfaf Total Score: ${total}`;\r\n badgeText.textContent = `\ud83c\udfc5 Badge: ${badge}`;\r\n } else {\r\n scoreText.textContent = \"\u274c Error saving response.\";\r\n badgeText.textContent = \"\";\r\n }\r\n } catch (err) {\r\n scoreText.textContent = \"\u274c Network Error: \" + (err.name === \"AbortError\" ? \"Request timed out.\" : err.message);\r\n badgeText.textContent = \"\";\r\n }\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cyber Navigators Quiz (14\u201318) \ud83e\udde0 Cyber Navigators Quiz (Ages 14\u201318) Rate how much you agree with each statement (1 = […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-588","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/pages\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":23,"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/pages\/588\/revisions"}],"predecessor-version":[{"id":1072,"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/pages\/588\/revisions\/1072"}],"wp:attachment":[{"href":"https:\/\/techandchild.com\/index.php\/wp-json\/wp\/v2\/media?parent=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}