Multi-Choice Game (Email & Background Send)<\/title>\n <style>\n \/* \n ======================================================================================\n BODY & WRAPPERS\n ======================================================================================\n *\/\n body {\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n background: #f2f2f2; \n min-height: 100vh; \n }\n\n #gameWrapper {\n width: 100%;\n max-width: 100%; \n margin: 0 auto; \n overflow: auto;\n }\n\n #gameContainer {\n width: 100%;\n max-width: 1000px; \n min-height: 800px;\n background: #fff;\n margin: 20px auto; \n position: relative;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n }\n\n #content {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding: 20px;\n position: relative;\n }\n\n .screen {\n width: 100%;\n height: 100%;\n display: none;\n }\n .active {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n }\n\n \/* \n ======================================================================================\n START SCREEN\n ======================================================================================\n *\/\n #startScreen {\n text-align: center;\n }\n\n #startBanner {\n width: 600px; \n height: 296px; \n display: block;\n margin: 0 auto 20px auto; \n object-fit: cover;\n }\n\n #startScreenRectangle {\n background: #fff;\n border: 6px solid #88bd32;\n border-radius: 20px;\n padding: 20px;\n width: 70%;\n margin: 0 auto 60px auto;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n display: flex;\n flex-direction: column;\n }\n\n #instructions {\n color: #000000;\n line-height: 1.5em;\n margin-bottom: 20px;\n }\n\n #startBtn {\n background: #88bd32;\n border: 4px solid #fff;\n box-shadow: 0 2px 6px rgba(0,0,0,0.2);\n color: #fff;\n font-size: 1.2em;\n padding: 15px 30px;\n border-radius: 10px;\n cursor: pointer;\n transition: background 0.3s ease;\n width: 40%;\n align-self: center;\n margin-top:25px;\n margin-bottom:10px;\n }\n #startBtn:hover {\n background: #7aac2b;\n }\n\n \/* \n ======================================================================================\n GAME SCREEN\n ======================================================================================\n *\/\n #gameImageContainer {\n width: 100%;\n text-align: center; \n margin-bottom: 20px;\n }\n #questiontwoImage {\n width: 400px; \n height: 400px;\n object-fit: cover;\n }\n\n #questionInfoRow {\n width: 80%;\n display: flex;\n justify-content: space-between; \n align-items: center;\n margin: 0 auto 20px auto;\n }\n #timer {\n text-align: left;\n font-weight: bold;\n font-size: 1.3em;\n color:#209288;\n }\n .question-label {\n text-align: right;\n font-size: 1.3em;\n font-weight: bold;\n color:#209288;\n }\n\n #questionTextDiv {\n width: 80%;\n margin: 0 auto 5px auto;\n text-align: center;\n font-size: 1.1em;\n color: #000;\n line-height: 1.4em;\n min-height: 4.5em;\n overflow-wrap: break-word;\n }\n\n #answersContainer {\n display: grid;\n grid-template-columns: 1fr 1fr; \n gap: 20px;\n width: 80%;\n margin: 0 auto;\n padding-bottom: 40px;\n }\n @media (max-width: 600px) {\n #answersContainer {\n grid-template-columns: 1fr; \n }\n }\n\n .answer-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.1em;\n font-weight: bold;\n color: #fff;\n border-radius: 15px;\n border: 8px solid #fff;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n min-height: 80px;\n cursor: pointer;\n transition: transform 0.2s ease;\n }\n .answer-btn:hover {\n transform: scale(1.03);\n }\n .answer-red { background-color: #5e9fbb; }\n .answer-orange { background-color: #5f837b; }\n .answer-blue { background-color: #209288; }\n .answer-green { background-color: #38b449; }\n\n \/* \n ======================================================================================\n OVERLAY\n ======================================================================================\n *\/\n #overlay {\n position: absolute;\n top: 0; left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n }\n #overlay.active {\n opacity: 1;\n pointer-events: auto;\n }\n\n #overlayContent {\n background: #fff;\n padding: 30px;\n border-radius: 10px;\n text-align: center;\n width: 70%;\n max-width: 500px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n border: 8px solid transparent;\n }\n #overlayContent h2 {\n margin: 0 0 20px;\n }\n #overlayContent button {\n padding: 10px 20px;\n font-size: 16px;\n cursor: pointer;\n border: 4px solid #fff;\n border-radius: 5px;\n color: #fff;\n box-shadow: 0 2px 6px rgba(0,0,0,0.2);\n transition: background 0.3s ease;\n margin-top: 20px;\n }\n #overlayContent button:hover {\n opacity: 0.9;\n }\n\n \/* NEW: additional fields styling is same as email input *\/\n #overlayContent label {\n display: block;\n margin-top: 10px;\n font-weight: bold;\n text-align: left;\n }\n #overlayContent input {\n width: 80%;\n padding: 8px;\n font-size: 14px;\n margin-top: 4px;\n border: 2px solid #ccc;\n border-radius: 4px;\n }\n #sendEmailBtn {\n margin-top: 16px;\n background: #88bd32;\n border: 4px solid #fff;\n color: #fff;\n padding: 10px 20px;\n font-size: 16px;\n border-radius: 5px;\n cursor: pointer;\n transition: background 0.3s ease;\n }\n #sendEmailBtn:hover {\n background: #7aac2b;\n }\n #emailStatusMsg {\n margin-top: 10px;\n font-weight: bold;\n color: #000;\n }\n <\/style>\n<\/head>\n<body>\n\n <div id=\"gameWrapper\">\n <div id=\"gameContainer\">\n <div id=\"content\">\n \n <div id=\"startScreen\" class=\"screen active\">\n <img decoding=\"async\" id=\"startBanner\"\n src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Banner.jpg\"\n alt=\"Banner (600x296)\" \/>\n <div id=\"startScreenRectangle\">\n <p id=\"instructions\">\n <span style=\"font-size:28px;font-weight:600\">The Exxaro Quiz Challenge<\/span><br>\n <span style=\"font-size:20px;font-weight:600\">Can you get a perfect score?<\/span><br>\n <span style=\"font-size:20px;font-weight:600\">And stand the chance to win a hamper in our lucky draw!<\/span>\n <\/p>\n <ul style=\"text-align:start;color:#000\">\n <li><b>Four questions<\/b> \u2013 each with <b>four possible answers.<\/b><\/li>\n <li>Pick the answer you think is correct.<\/li>\n <li>The game moves forward <b>whether you're right or wrong.<\/b><\/li>\n <li><b>Got one wrong? No worries!<\/b> You\u2019ll start over and try again until you get all four right.<\/li>\n <\/ul>\n <p style=\"text-align:start;color:#000\"><i><b>Top tip: You can always review the stories again to find the answers!<\/b><\/i><\/p>\n <p style=\"text-align:start;color:#000\">\n <b>Race against the clock!<\/b><br>\n The timer <b>starts<\/b> when you hit \u2018Start\u2019 and <b>stops<\/b> when you\u2019ve answered all four questions correctly.\n <\/p>\n <button id=\"startBtn\">Start<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"questionScreen\" class=\"screen\">\n <div id=\"gameImageContainer\">\n <img decoding=\"async\" id=\"questiontwoImage\"\n src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Questionfour.jpg\"\n alt=\"Question Four (400x400)\" \/>\n <\/div>\n <div id=\"questionInfoRow\">\n <div class=\"question-label\" id=\"questionLabel\">Question 1<\/div>\n <div id=\"timer\">Time: 00:00.00<\/div>\n <\/div>\n <div id=\"questionTextDiv\"><\/div>\n <div id=\"answersContainer\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"overlay\">\n <div id=\"overlayContent\">\n <h2 id=\"overlayMessage\"><\/h2>\n\n \n <label for=\"userName\" id=\"nameLabel\" style=\"display:none;\">Name:<\/label>\n <input type=\"text\" id=\"userName\" style=\"display:none;\" placeholder=\"Enter your name\" \/>\n\n \n <label for=\"userSurname\" id=\"surnameLabel\" style=\"display:none;\">Surname:<\/label>\n <input type=\"text\" id=\"userSurname\" style=\"display:none;\" placeholder=\"Enter your surname\" \/>\n\n \n <label for=\"userEmployeeNumber\" id=\"empNoLabel\" style=\"display:none;\">Employee number:<\/label>\n <input type=\"text\" id=\"userEmployeeNumber\" style=\"display:none;\" placeholder=\"Enter your employee number\" \/>\n\n \n <label for=\"userBU\" id=\"buLabel\" style=\"display:none;\">BU:<\/label>\n <input type=\"text\" id=\"userBU\" style=\"display:none;\" placeholder=\"Enter your BU\" \/>\n\n \n <label for=\"userPhone\" id=\"phoneLabel\" style=\"display:none;\">Phone number:<\/label>\n <input type=\"tel\" id=\"userPhone\" style=\"display:none;\" placeholder=\"Enter your phone number\" \/>\n\n \n <div id=\"emailPrompt\" style=\"display:none;\">\n Please enter your email to enter the competition:\n <\/div>\n <input type=\"email\" id=\"userEmail\" style=\"display:none;\" placeholder=\"Enter your email here...\" \/>\n\n \n <button id=\"sendEmailBtn\" style=\"display:none;\">Send Email<\/button>\n <div id=\"emailStatusMsg\"><\/div>\n\n \n <button id=\"overlayBtn\">OK<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/* \n =============================================================================\n ORIGINAL GAME LOGIC (unchanged except where marked)\n =============================================================================\n *\/\n let originalQuestions = [\n {\n originalNumber: 1,\n question: \"Caroline Shirindza has recently been appointed to which Executive role?\",\n answers: [\"Executive Head: Technical Services\", \"CEO\", \"Chairperson\", \"Executive Head: Coal\"],\n correctIndex: 3,\n userAnswer: null\n },\n {\n originalNumber: 2,\n question: \"What is the name of Exxaro\u2019s annual flagship recognition event that took place in August?\",\n answers: [\"Women\u2019s month\", \"Evergreen Awards\", \"Madiba Day\", \"Interim Results\"],\n correctIndex: 1,\n userAnswer: null\n },\n {\n originalNumber: 3,\n question: \"What is the ultimate goal of Exxaro\u2019s One Voice Safety Indabas?\",\n answers: [\"To strengthen our focus on zero harm\", \"To enjoy industrial theatre\", \"To have a party\", \"To unite employees\"],\n correctIndex: 0,\n userAnswer: null\n },\n {\n originalNumber: 4,\n question: \"What does the acronym FUNN stand for in Exxaro\u2019s FUNN@WORK initiative? \",\n answers: [\"Friends Uniting New Norms\", \"Focused Upgrading of New Narratives\", \"Functional Understanding Not Necessary\", \"Fun and Unity for New Networks\"],\n correctIndex: 2,\n userAnswer: null\n }\n ];\n\n let questions = JSON.parse(JSON.stringify(originalQuestions));\n let currentQuestionIdx = 0;\n let startTime = 0;\n let timerInterval = null;\n let isRedoMode = false;\n let gameFinalTime = \"\";\n\n const startScreen = document.getElementById(\"startScreen\");\n const questionScreen = document.getElementById(\"questionScreen\");\n const startBtn = document.getElementById(\"startBtn\");\n const timerDisplay = document.getElementById(\"timer\");\n const questionLabel = document.getElementById(\"questionLabel\");\n const questionTextDiv = document.getElementById(\"questionTextDiv\");\n const answersContainer = document.getElementById(\"answersContainer\");\n\n const overlay = document.getElementById(\"overlay\");\n const overlayContent = document.getElementById(\"overlayContent\");\n const overlayMessage = document.getElementById(\"overlayMessage\");\n const overlayBtn = document.getElementById(\"overlayBtn\");\n\n \/\/ *** NEW: references for added fields\n const nameLabel = document.getElementById(\"nameLabel\");\n const userName = document.getElementById(\"userName\");\n const surnameLabel = document.getElementById(\"surnameLabel\");\n const userSurname = document.getElementById(\"userSurname\");\n const empNoLabel = document.getElementById(\"empNoLabel\");\n const userEmployeeNumber = document.getElementById(\"userEmployeeNumber\");\n const buLabel = document.getElementById(\"buLabel\");\n const userBU = document.getElementById(\"userBU\");\n const phoneLabel = document.getElementById(\"phoneLabel\");\n const userPhone = document.getElementById(\"userPhone\");\n\n const emailPrompt = document.getElementById(\"emailPrompt\");\n const userEmail = document.getElementById(\"userEmail\");\n const sendEmailBtn = document.getElementById(\"sendEmailBtn\");\n const emailStatusMsg = document.getElementById(\"emailStatusMsg\");\n\n const colorClasses = [\"answer-red\",\"answer-orange\",\"answer-blue\",\"answer-green\"];\n\n \/* ===== Event Listeners ===== *\/\n startBtn.addEventListener(\"click\", startGame);\n overlayBtn.addEventListener(\"click\", onOverlayButtonClick);\n sendEmailBtn.addEventListener(\"click\", onSendEmailClick);\n\n \/* ====== Start Game ====== *\/\n function startGame() {\n questions = JSON.parse(JSON.stringify(originalQuestions));\n currentQuestionIdx = 0;\n isRedoMode = false;\n startScreen.classList.remove(\"active\");\n questionScreen.classList.add(\"active\");\n startTimer();\n loadQuestion();\n }\n\n \/* ====== Timer Logic ====== *\/\n function startTimer() {\n startTime = Date.now();\n clearInterval(timerInterval);\n timerInterval = setInterval(() => {\n timerDisplay.textContent = \"Time: \" + formatTime();\n }, 50);\n }\n function stopTimer() {\n clearInterval(timerInterval);\n timerInterval = null;\n gameFinalTime = formatTime();\n }\n function formatTime() {\n const elapsed = Date.now() - startTime;\n const m = Math.floor(elapsed\/60000),\n s = Math.floor((elapsed%60000)\/1000),\n ms = Math.floor((elapsed%1000)\/10);\n return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}.${String(ms).padStart(2,'0')}`;\n }\n\n \/* ====== Load Question ====== *\/\n function loadQuestion() {\n const q = questions[currentQuestionIdx];\n questionLabel.textContent = isRedoMode\n ? \"Redoing Question \" + q.originalNumber\n : \"Question \" + q.originalNumber;\n questionTextDiv.textContent = q.question || \"\";\n answersContainer.innerHTML = \"\";\n q.answers.forEach((ans, idx) => {\n const btn = document.createElement(\"div\");\n btn.classList.add(\"answer-btn\", colorClasses[idx]||colorClasses[3]);\n btn.textContent = ans;\n btn.onclick = () => {\n q.userAnswer = idx;\n currentQuestionIdx++;\n if (currentQuestionIdx < questions.length) loadQuestion();\n else checkAnswers();\n };\n answersContainer.appendChild(btn);\n });\n }\n\n \/* ====== Check Answers ====== *\/\n function checkAnswers() {\n const incorrect = questions.filter(q=>q.userAnswer!==q.correctIndex);\n if (!incorrect.length) {\n stopTimer();\n showOverlay(\n `Well done! All correct in a time of ${gameFinalTime}. Complete your details below to enter the competition.`,\n false\n );\n } else {\n showOverlay(`You got ${incorrect.length} wrong. Please retry!`, true);\n }\n }\n\n \/* ====== Overlays ====== *\/\n function showOverlay(message, redoMode) {\n overlayMessage.textContent = message;\n overlay.classList.add(\"active\");\n isRedoMode = redoMode;\n\n if (redoMode) {\n \/\/ Retry state: hide all input fields\n overlayContent.style.borderColor = \"#ed1e28\";\n overlayBtn.style.backgroundColor = \"#ed1e28\";\n overlayBtn.textContent = \"Retry\";\n overlayBtn.style.display = \"inline-block\";\n\n nameLabel.style.display =\n userName.style.display =\n surnameLabel.style.display =\n userSurname.style.display =\n empNoLabel.style.display =\n userEmployeeNumber.style.display =\n buLabel.style.display =\n userBU.style.display =\n phoneLabel.style.display =\n userPhone.style.display =\n emailPrompt.style.display =\n userEmail.style.display =\n sendEmailBtn.style.display = \"none\";\n\n emailStatusMsg.textContent = \"\";\n\n } else {\n \/\/ Success state: show fields\n overlayContent.style.borderColor = \"#88bd32\";\n overlayBtn.style.display = \"none\";\n\n nameLabel.style.display = \"block\";\n userName.style.display = \"inline-block\";\n surnameLabel.style.display = \"block\";\n userSurname.style.display = \"inline-block\";\n empNoLabel.style.display = \"block\";\n userEmployeeNumber.style.display = \"inline-block\";\n buLabel.style.display = \"block\";\n userBU.style.display = \"inline-block\";\n phoneLabel.style.display = \"block\";\n userPhone.style.display = \"inline-block\";\n\n emailPrompt.style.display = \"block\";\n userEmail.style.display = \"inline-block\";\n sendEmailBtn.style.display = \"inline-block\";\n emailStatusMsg.textContent = \"\";\n }\n }\n\n function hideOverlay() {\n overlay.classList.remove(\"active\");\n }\n\n function onOverlayButtonClick() {\n hideOverlay();\n if (isRedoMode) {\n const wrong = questions.filter(q=>q.userAnswer!==q.correctIndex);\n if (!wrong.length) {\n stopTimer();\n showOverlay(\"All correct! Final time: \" + gameFinalTime, false);\n return;\n }\n questions = wrong.map(q=>({ ...q, userAnswer:null }));\n currentQuestionIdx = 0;\n loadQuestion();\n }\n }\n\n \/* ====== Send Data ====== *\/\n function onSendEmailClick() {\n \/\/ Grab all six fields\n const name = userName.value.trim();\n const surname = userSurname.value.trim();\n const employeeNumber = userEmployeeNumber.value.trim();\n const bu = userBU.value.trim();\n const phone = userPhone.value.trim();\n const emailValue = userEmail.value.trim();\n\n \/\/ Validate\n if (!name || !surname || !employeeNumber || !bu || !phone || !emailValue) {\n emailStatusMsg.textContent = \"Please complete all fields.\";\n return;\n }\n\n \/\/ Send POST\n fetch(\"\/api\/sendEmail.php\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({\n name,\n surname,\n employeeNumber,\n bu,\n phone,\n email: emailValue,\n time: gameFinalTime\n })\n })\n .then(res => {\n if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);\n return res.json();\n })\n .then(data => {\n emailStatusMsg.textContent = data.success\n ? \"Thank you for entering the competition!\"\n : `Error: ${data.message}`;\n })\n .catch(err => {\n emailStatusMsg.textContent = `Error: ${err.message}`;\n });\n }\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><\/div><div class=\"et_pb_section_1 et_pb_section et_section_regular et_block_section\"><div class=\"et_pb_row_1 et_pb_row et_block_row\"><div class=\"et_pb_column_1 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p><strong>Congratulations to the lucky draw winners of our previous XXplore Quiz who each won a hamper!<\/strong><\/p>\n<\/div><\/div><\/div><\/div><div class=\"et_pb_row_2 et_pb_row et_pb_gutters1 et_block_row\"><div class=\"et_pb_column_2 et_pb_column et_pb_column_1_3 et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_image_0 et_pb_image et_pb_module et_block_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Nicky.jpg\" width=\"900\" height=\"636\" srcset=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Nicky.jpg 900w, https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Nicky-480x339.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 900px, 100vw\" class=\"wp-image-4512\" title=\"Nicky\" \/><\/span><\/div><div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>Nicky Ntuli \u2013 Belfast<\/p>\n<\/div><\/div><\/div><div class=\"et_pb_column_3 et_pb_column et_pb_column_1_3 et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_image_1 et_pb_image et_pb_module et_block_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Thembelihle2.jpg\" width=\"600\" height=\"755\" srcset=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Thembelihle2.jpg 600w, https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Thembelihle2-480x604.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 600px, 100vw\" class=\"wp-image-4516\" title=\"Thembelihle2\" \/><\/span><\/div><div class=\"et_pb_text_2 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>Thembelihle Nkosi \u2013 Matla<\/p>\n<\/div><\/div><\/div><div class=\"et_pb_column_4 et_pb_column et_pb_column_1_3 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_image_2 et_pb_image et_pb_module et_block_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/07\/453A1849-Copy-copy.jpg\" width=\"1976\" height=\"1276\" srcset=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/07\/453A1849-Copy-copy.jpg 1976w, https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/07\/453A1849-Copy-copy-1280x827.jpg 1280w, https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/07\/453A1849-Copy-copy-980x633.jpg 980w, https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/07\/453A1849-Copy-copy-480x310.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1976px, 100vw\" class=\"wp-image-4779\" title=\"453A1849 - Copy copy\" \/><\/span><\/div><div class=\"et_pb_text_3 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>Mmaphuthego Kolobe \u2013 Grootegeluk<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"et_pb_section_2 et_pb_section et_section_regular et_block_section\"><div class=\"et_pb_row_3 et_pb_row et_block_row\"><div class=\"et_pb_column_5 et_pb_column et_pb_column_1_2 et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_image_3 et_pb_image et_pb_module et_block_module\"><a href=\"https:\/\/xxplore.co.za\/index.php\/2025\/09\/05\/spring-day\/\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/LeftAttow.png\" width=\"26\" height=\"66\" srcset=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/LeftAttow.png 26w\" sizes=\"(max-width: 26px) 100vw, 26px\" class=\"wp-image-16\" title=\"LeftAttow\" \/><\/span><\/a><\/div><\/div><div class=\"et_pb_column_6 et_pb_column et_pb_column_1_2 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_image_4 et_pb_image et_pb_module et_block_module\"><a href=\"https:\/\/xxplore.co.za\/index.php\/xxplore-e3-2025\/\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/RightArrow.png\" width=\"26\" height=\"66\" srcset=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/RightArrow.png 26w\" sizes=\"(max-width: 26px) 100vw, 26px\" class=\"wp-image-17\" title=\"RightArrow\" \/><\/span><\/a><\/div><\/div><\/div><\/div>\n<div class=\"likebtn_container\" style=\"text-align:center;\"><span class=\"likebtn-wrapper\" data-identifier=\"post_5528\" data-site_id=\"67661c126fd08bb24c1b2b18\" data-theme=\"custom\" data-btn_size=\"80\" data-icon_l=\"false\" data-icon_d=\"false\" data-icon_l_url=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/likebutton.png#4559\" data-icon_d_url=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/dontlikebutton.png#4558\" data-label_c=\"#000000\" data-bg_c=\"rgba(250,250,250,0)\" data-brdr_c=\"rgba(198,198,198,0)\" data-f_size=\"15\" data-label_fs=\"r\" data-tooltip_enabled=\"false\" data-white_label=\"true\" data-i18n_like=\"I like this\" data-i18n_dislike=\"I don't like this\" data-style=\"\" data-unlike_allowed=\"\" data-show_copyright=\"\" data-item_url=\"https:\/\/xxplore.co.za\/index.php\/2025\/09\/18\/quiz-q3\/\" data-item_title=\"Quiz Q3\" data-item_image=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Game.png\" data-item_date=\"2025-09-18T12:23:17+00:00\" data-engine=\"WordPress\" data-plugin_v=\"2.6.60\" data-prx=\"https:\/\/xxplore.co.za\/wp-admin\/admin-ajax.php?action=likebtn_prx\" data-event_handler=\"likebtn_eh\" ><\/span><\/div>","protected":false},"excerpt":{"rendered":"<p>The Exxaro Quiz Challenge<br \/>\nCan you get a perfect score?<br \/>\nAnd stand the chance to win a hamper in our lucky draw!<\/p>\n<div class=\"likebtn_container\" style=\"text-align:center;\"><span class=\"likebtn-wrapper\" data-identifier=\"post_5528\" data-site_id=\"67661c126fd08bb24c1b2b18\" data-theme=\"custom\" data-btn_size=\"80\" data-icon_l=\"false\" data-icon_d=\"false\" data-icon_l_url=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/likebutton.png#4559\" data-icon_d_url=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/dontlikebutton.png#4558\" data-label_c=\"#000000\" data-bg_c=\"rgba(250,250,250,0)\" data-brdr_c=\"rgba(198,198,198,0)\" data-f_size=\"15\" data-label_fs=\"r\" data-tooltip_enabled=\"false\" data-white_label=\"true\" data-i18n_like=\"I like this\" data-i18n_dislike=\"I don't like this\" data-style=\"\" data-unlike_allowed=\"\" data-show_copyright=\"\" data-item_url=\"https:\/\/xxplore.co.za\/index.php\/2025\/09\/18\/quiz-q3\/\" data-item_title=\"Quiz Q3\" data-item_image=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Game.png\" data-item_date=\"2025-09-18T12:23:17+00:00\" data-engine=\"WordPress\" data-plugin_v=\"2.6.60\" data-prx=\"https:\/\/xxplore.co.za\/wp-admin\/admin-ajax.php?action=likebtn_prx\" data-event_handler=\"likebtn_eh\" ><\/span><\/div>","protected":false},"author":1,"featured_media":219,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-5528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-q3-2025"],"_links":{"self":[{"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/5528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/comments?post=5528"}],"version-history":[{"count":8,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/5528\/revisions"}],"predecessor-version":[{"id":7277,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/5528\/revisions\/7277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/media\/219"}],"wp:attachment":[{"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=5528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/categories?post=5528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/tags?post=5528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n \n Multi-Choice Game (Email & Background Send)<\/title>\n <style>\n \/* \n ======================================================================================\n BODY & WRAPPERS\n ======================================================================================\n *\/\n body {\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n background: #f2f2f2; \n min-height: 100vh; \n }\n\n #gameWrapper {\n width: 100%;\n max-width: 100%; \n margin: 0 auto; \n overflow: auto;\n }\n\n #gameContainer {\n width: 100%;\n max-width: 1000px; \n min-height: 800px;\n background: #fff;\n margin: 20px auto; \n position: relative;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n }\n\n #content {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding: 20px;\n position: relative;\n }\n\n .screen {\n width: 100%;\n height: 100%;\n display: none;\n }\n .active {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n }\n\n \/* \n ======================================================================================\n START SCREEN\n ======================================================================================\n *\/\n #startScreen {\n text-align: center;\n }\n\n #startBanner {\n width: 600px; \n height: 296px; \n display: block;\n margin: 0 auto 20px auto; \n object-fit: cover;\n }\n\n #startScreenRectangle {\n background: #fff;\n border: 6px solid #88bd32;\n border-radius: 20px;\n padding: 20px;\n width: 70%;\n margin: 0 auto 60px auto;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n display: flex;\n flex-direction: column;\n }\n\n #instructions {\n color: #000000;\n line-height: 1.5em;\n margin-bottom: 20px;\n }\n\n #startBtn {\n background: #88bd32;\n border: 4px solid #fff;\n box-shadow: 0 2px 6px rgba(0,0,0,0.2);\n color: #fff;\n font-size: 1.2em;\n padding: 15px 30px;\n border-radius: 10px;\n cursor: pointer;\n transition: background 0.3s ease;\n width: 40%;\n align-self: center;\n margin-top:25px;\n margin-bottom:10px;\n }\n #startBtn:hover {\n background: #7aac2b;\n }\n\n \/* \n ======================================================================================\n GAME SCREEN\n ======================================================================================\n *\/\n #gameImageContainer {\n width: 100%;\n text-align: center; \n margin-bottom: 20px;\n }\n #questiontwoImage {\n width: 400px; \n height: 400px;\n object-fit: cover;\n }\n\n #questionInfoRow {\n width: 80%;\n display: flex;\n justify-content: space-between; \n align-items: center;\n margin: 0 auto 20px auto;\n }\n #timer {\n text-align: left;\n font-weight: bold;\n font-size: 1.3em;\n color:#209288;\n }\n .question-label {\n text-align: right;\n font-size: 1.3em;\n font-weight: bold;\n color:#209288;\n }\n\n #questionTextDiv {\n width: 80%;\n margin: 0 auto 5px auto;\n text-align: center;\n font-size: 1.1em;\n color: #000;\n line-height: 1.4em;\n min-height: 4.5em;\n overflow-wrap: break-word;\n }\n\n #answersContainer {\n display: grid;\n grid-template-columns: 1fr 1fr; \n gap: 20px;\n width: 80%;\n margin: 0 auto;\n padding-bottom: 40px;\n }\n @media (max-width: 600px) {\n #answersContainer {\n grid-template-columns: 1fr; \n }\n }\n\n .answer-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.1em;\n font-weight: bold;\n color: #fff;\n border-radius: 15px;\n border: 8px solid #fff;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n min-height: 80px;\n cursor: pointer;\n transition: transform 0.2s ease;\n }\n .answer-btn:hover {\n transform: scale(1.03);\n }\n .answer-red { background-color: #5e9fbb; }\n .answer-orange { background-color: #5f837b; }\n .answer-blue { background-color: #209288; }\n .answer-green { background-color: #38b449; }\n\n \/* \n ======================================================================================\n OVERLAY\n ======================================================================================\n *\/\n #overlay {\n position: absolute;\n top: 0; left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n }\n #overlay.active {\n opacity: 1;\n pointer-events: auto;\n }\n\n #overlayContent {\n background: #fff;\n padding: 30px;\n border-radius: 10px;\n text-align: center;\n width: 70%;\n max-width: 500px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n border: 8px solid transparent;\n }\n #overlayContent h2 {\n margin: 0 0 20px;\n }\n #overlayContent button {\n padding: 10px 20px;\n font-size: 16px;\n cursor: pointer;\n border: 4px solid #fff;\n border-radius: 5px;\n color: #fff;\n box-shadow: 0 2px 6px rgba(0,0,0,0.2);\n transition: background 0.3s ease;\n margin-top: 20px;\n }\n #overlayContent button:hover {\n opacity: 0.9;\n }\n\n \/* NEW: additional fields styling is same as email input *\/\n #overlayContent label {\n display: block;\n margin-top: 10px;\n font-weight: bold;\n text-align: left;\n }\n #overlayContent input {\n width: 80%;\n padding: 8px;\n font-size: 14px;\n margin-top: 4px;\n border: 2px solid #ccc;\n border-radius: 4px;\n }\n #sendEmailBtn {\n margin-top: 16px;\n background: #88bd32;\n border: 4px solid #fff;\n color: #fff;\n padding: 10px 20px;\n font-size: 16px;\n border-radius: 5px;\n cursor: pointer;\n transition: background 0.3s ease;\n }\n #sendEmailBtn:hover {\n background: #7aac2b;\n }\n #emailStatusMsg {\n margin-top: 10px;\n font-weight: bold;\n color: #000;\n }\n <\/style>\n<\/head>\n<body>\n\n <div id=\"gameWrapper\">\n <div id=\"gameContainer\">\n <div id=\"content\">\n \n <div id=\"startScreen\" class=\"screen active\">\n <img decoding=\"async\" id=\"startBanner\"\n src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Banner.jpg\"\n alt=\"Banner (600x296)\" \/>\n <div id=\"startScreenRectangle\">\n <p id=\"instructions\">\n <span style=\"font-size:28px;font-weight:600\">The Exxaro Quiz Challenge<\/span><br>\n <span style=\"font-size:20px;font-weight:600\">Can you get a perfect score?<\/span><br>\n <span style=\"font-size:20px;font-weight:600\">And stand the chance to win a hamper in our lucky draw!<\/span>\n <\/p>\n <ul style=\"text-align:start;color:#000\">\n <li><b>Four questions<\/b> \u2013 each with <b>four possible answers.<\/b><\/li>\n <li>Pick the answer you think is correct.<\/li>\n <li>The game moves forward <b>whether you're right or wrong.<\/b><\/li>\n <li><b>Got one wrong? No worries!<\/b> You\u2019ll start over and try again until you get all four right.<\/li>\n <\/ul>\n <p style=\"text-align:start;color:#000\"><i><b>Top tip: You can always review the stories again to find the answers!<\/b><\/i><\/p>\n <p style=\"text-align:start;color:#000\">\n <b>Race against the clock!<\/b><br>\n The timer <b>starts<\/b> when you hit \u2018Start\u2019 and <b>stops<\/b> when you\u2019ve answered all four questions correctly.\n <\/p>\n <button id=\"startBtn\">Start<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"questionScreen\" class=\"screen\">\n <div id=\"gameImageContainer\">\n <img decoding=\"async\" id=\"questiontwoImage\"\n src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Questionfour.jpg\"\n alt=\"Question Four (400x400)\" \/>\n <\/div>\n <div id=\"questionInfoRow\">\n <div class=\"question-label\" id=\"questionLabel\">Question 1<\/div>\n <div id=\"timer\">Time: 00:00.00<\/div>\n <\/div>\n <div id=\"questionTextDiv\"><\/div>\n <div id=\"answersContainer\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"overlay\">\n <div id=\"overlayContent\">\n <h2 id=\"overlayMessage\"><\/h2>\n\n \n <label for=\"userName\" id=\"nameLabel\" style=\"display:none;\">Name:<\/label>\n <input type=\"text\" id=\"userName\" style=\"display:none;\" placeholder=\"Enter your name\" \/>\n\n \n <label for=\"userSurname\" id=\"surnameLabel\" style=\"display:none;\">Surname:<\/label>\n <input type=\"text\" id=\"userSurname\" style=\"display:none;\" placeholder=\"Enter your surname\" \/>\n\n \n <label for=\"userEmployeeNumber\" id=\"empNoLabel\" style=\"display:none;\">Employee number:<\/label>\n <input type=\"text\" id=\"userEmployeeNumber\" style=\"display:none;\" placeholder=\"Enter your employee number\" \/>\n\n \n <label for=\"userBU\" id=\"buLabel\" style=\"display:none;\">BU:<\/label>\n <input type=\"text\" id=\"userBU\" style=\"display:none;\" placeholder=\"Enter your BU\" \/>\n\n \n <label for=\"userPhone\" id=\"phoneLabel\" style=\"display:none;\">Phone number:<\/label>\n <input type=\"tel\" id=\"userPhone\" style=\"display:none;\" placeholder=\"Enter your phone number\" \/>\n\n \n <div id=\"emailPrompt\" style=\"display:none;\">\n Please enter your email to enter the competition:\n <\/div>\n <input type=\"email\" id=\"userEmail\" style=\"display:none;\" placeholder=\"Enter your email here...\" \/>\n\n \n <button id=\"sendEmailBtn\" style=\"display:none;\">Send Email<\/button>\n <div id=\"emailStatusMsg\"><\/div>\n\n \n <button id=\"overlayBtn\">OK<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/* \n =============================================================================\n ORIGINAL GAME LOGIC (unchanged except where marked)\n =============================================================================\n *\/\n let originalQuestions = [\n {\n originalNumber: 1,\n question: \"Caroline Shirindza has recently been appointed to which Executive role?\",\n answers: [\"Executive Head: Technical Services\", \"CEO\", \"Chairperson\", \"Executive Head: Coal\"],\n correctIndex: 3,\n userAnswer: null\n },\n {\n originalNumber: 2,\n question: \"What is the name of Exxaro\u2019s annual flagship recognition event that took place in August?\",\n answers: [\"Women\u2019s month\", \"Evergreen Awards\", \"Madiba Day\", \"Interim Results\"],\n correctIndex: 1,\n userAnswer: null\n },\n {\n originalNumber: 3,\n question: \"What is the ultimate goal of Exxaro\u2019s One Voice Safety Indabas?\",\n answers: [\"To strengthen our focus on zero harm\", \"To enjoy industrial theatre\", \"To have a party\", \"To unite employees\"],\n correctIndex: 0,\n userAnswer: null\n },\n {\n originalNumber: 4,\n question: \"What does the acronym FUNN stand for in Exxaro\u2019s FUNN@WORK initiative? \",\n answers: [\"Friends Uniting New Norms\", \"Focused Upgrading of New Narratives\", \"Functional Understanding Not Necessary\", \"Fun and Unity for New Networks\"],\n correctIndex: 2,\n userAnswer: null\n }\n ];\n\n let questions = JSON.parse(JSON.stringify(originalQuestions));\n let currentQuestionIdx = 0;\n let startTime = 0;\n let timerInterval = null;\n let isRedoMode = false;\n let gameFinalTime = \"\";\n\n const startScreen = document.getElementById(\"startScreen\");\n const questionScreen = document.getElementById(\"questionScreen\");\n const startBtn = document.getElementById(\"startBtn\");\n const timerDisplay = document.getElementById(\"timer\");\n const questionLabel = document.getElementById(\"questionLabel\");\n const questionTextDiv = document.getElementById(\"questionTextDiv\");\n const answersContainer = document.getElementById(\"answersContainer\");\n\n const overlay = document.getElementById(\"overlay\");\n const overlayContent = document.getElementById(\"overlayContent\");\n const overlayMessage = document.getElementById(\"overlayMessage\");\n const overlayBtn = document.getElementById(\"overlayBtn\");\n\n \/\/ *** NEW: references for added fields\n const nameLabel = document.getElementById(\"nameLabel\");\n const userName = document.getElementById(\"userName\");\n const surnameLabel = document.getElementById(\"surnameLabel\");\n const userSurname = document.getElementById(\"userSurname\");\n const empNoLabel = document.getElementById(\"empNoLabel\");\n const userEmployeeNumber = document.getElementById(\"userEmployeeNumber\");\n const buLabel = document.getElementById(\"buLabel\");\n const userBU = document.getElementById(\"userBU\");\n const phoneLabel = document.getElementById(\"phoneLabel\");\n const userPhone = document.getElementById(\"userPhone\");\n\n const emailPrompt = document.getElementById(\"emailPrompt\");\n const userEmail = document.getElementById(\"userEmail\");\n const sendEmailBtn = document.getElementById(\"sendEmailBtn\");\n const emailStatusMsg = document.getElementById(\"emailStatusMsg\");\n\n const colorClasses = [\"answer-red\",\"answer-orange\",\"answer-blue\",\"answer-green\"];\n\n \/* ===== Event Listeners ===== *\/\n startBtn.addEventListener(\"click\", startGame);\n overlayBtn.addEventListener(\"click\", onOverlayButtonClick);\n sendEmailBtn.addEventListener(\"click\", onSendEmailClick);\n\n \/* ====== Start Game ====== *\/\n function startGame() {\n questions = JSON.parse(JSON.stringify(originalQuestions));\n currentQuestionIdx = 0;\n isRedoMode = false;\n startScreen.classList.remove(\"active\");\n questionScreen.classList.add(\"active\");\n startTimer();\n loadQuestion();\n }\n\n \/* ====== Timer Logic ====== *\/\n function startTimer() {\n startTime = Date.now();\n clearInterval(timerInterval);\n timerInterval = setInterval(() => {\n timerDisplay.textContent = \"Time: \" + formatTime();\n }, 50);\n }\n function stopTimer() {\n clearInterval(timerInterval);\n timerInterval = null;\n gameFinalTime = formatTime();\n }\n function formatTime() {\n const elapsed = Date.now() - startTime;\n const m = Math.floor(elapsed\/60000),\n s = Math.floor((elapsed%60000)\/1000),\n ms = Math.floor((elapsed%1000)\/10);\n return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}.${String(ms).padStart(2,'0')}`;\n }\n\n \/* ====== Load Question ====== *\/\n function loadQuestion() {\n const q = questions[currentQuestionIdx];\n questionLabel.textContent = isRedoMode\n ? \"Redoing Question \" + q.originalNumber\n : \"Question \" + q.originalNumber;\n questionTextDiv.textContent = q.question || \"\";\n answersContainer.innerHTML = \"\";\n q.answers.forEach((ans, idx) => {\n const btn = document.createElement(\"div\");\n btn.classList.add(\"answer-btn\", colorClasses[idx]||colorClasses[3]);\n btn.textContent = ans;\n btn.onclick = () => {\n q.userAnswer = idx;\n currentQuestionIdx++;\n if (currentQuestionIdx < questions.length) loadQuestion();\n else checkAnswers();\n };\n answersContainer.appendChild(btn);\n });\n }\n\n \/* ====== Check Answers ====== *\/\n function checkAnswers() {\n const incorrect = questions.filter(q=>q.userAnswer!==q.correctIndex);\n if (!incorrect.length) {\n stopTimer();\n showOverlay(\n `Well done! All correct in a time of ${gameFinalTime}. Complete your details below to enter the competition.`,\n false\n );\n } else {\n showOverlay(`You got ${incorrect.length} wrong. Please retry!`, true);\n }\n }\n\n \/* ====== Overlays ====== *\/\n function showOverlay(message, redoMode) {\n overlayMessage.textContent = message;\n overlay.classList.add(\"active\");\n isRedoMode = redoMode;\n\n if (redoMode) {\n \/\/ Retry state: hide all input fields\n overlayContent.style.borderColor = \"#ed1e28\";\n overlayBtn.style.backgroundColor = \"#ed1e28\";\n overlayBtn.textContent = \"Retry\";\n overlayBtn.style.display = \"inline-block\";\n\n nameLabel.style.display =\n userName.style.display =\n surnameLabel.style.display =\n userSurname.style.display =\n empNoLabel.style.display =\n userEmployeeNumber.style.display =\n buLabel.style.display =\n userBU.style.display =\n phoneLabel.style.display =\n userPhone.style.display =\n emailPrompt.style.display =\n userEmail.style.display =\n sendEmailBtn.style.display = \"none\";\n\n emailStatusMsg.textContent = \"\";\n\n } else {\n \/\/ Success state: show fields\n overlayContent.style.borderColor = \"#88bd32\";\n overlayBtn.style.display = \"none\";\n\n nameLabel.style.display = \"block\";\n userName.style.display = \"inline-block\";\n surnameLabel.style.display = \"block\";\n userSurname.style.display = \"inline-block\";\n empNoLabel.style.display = \"block\";\n userEmployeeNumber.style.display = \"inline-block\";\n buLabel.style.display = \"block\";\n userBU.style.display = \"inline-block\";\n phoneLabel.style.display = \"block\";\n userPhone.style.display = \"inline-block\";\n\n emailPrompt.style.display = \"block\";\n userEmail.style.display = \"inline-block\";\n sendEmailBtn.style.display = \"inline-block\";\n emailStatusMsg.textContent = \"\";\n }\n }\n\n function hideOverlay() {\n overlay.classList.remove(\"active\");\n }\n\n function onOverlayButtonClick() {\n hideOverlay();\n if (isRedoMode) {\n const wrong = questions.filter(q=>q.userAnswer!==q.correctIndex);\n if (!wrong.length) {\n stopTimer();\n showOverlay(\"All correct! Final time: \" + gameFinalTime, false);\n return;\n }\n questions = wrong.map(q=>({ ...q, userAnswer:null }));\n currentQuestionIdx = 0;\n loadQuestion();\n }\n }\n\n \/* ====== Send Data ====== *\/\n function onSendEmailClick() {\n \/\/ Grab all six fields\n const name = userName.value.trim();\n const surname = userSurname.value.trim();\n const employeeNumber = userEmployeeNumber.value.trim();\n const bu = userBU.value.trim();\n const phone = userPhone.value.trim();\n const emailValue = userEmail.value.trim();\n\n \/\/ Validate\n if (!name || !surname || !employeeNumber || !bu || !phone || !emailValue) {\n emailStatusMsg.textContent = \"Please complete all fields.\";\n return;\n }\n\n \/\/ Send POST\n fetch(\"\/api\/sendEmail.php\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({\n name,\n surname,\n employeeNumber,\n bu,\n phone,\n email: emailValue,\n time: gameFinalTime\n })\n })\n .then(res => {\n if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);\n return res.json();\n })\n .then(data => {\n emailStatusMsg.textContent = data.success\n ? \"Thank you for entering the competition!\"\n : `Error: ${data.message}`;\n })\n .catch(err => {\n emailStatusMsg.textContent = `Error: ${err.message}`;\n });\n }\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><\/div><div class=\"et_pb_section_1 et_pb_section et_section_regular et_block_section\"><div class=\"et_pb_row_1 et_pb_row et_block_row\"><div class=\"et_pb_column_1 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p><strong>Congratulations to the lucky draw winners of our previous XXplore Quiz who each won a hamper!<\/strong><\/p>\n<\/div><\/div><\/div><\/div><div class=\"et_pb_row_2 et_pb_row et_pb_gutters1 et_block_row\"><div class=\"et_pb_column_2 et_pb_column et_pb_column_1_3 et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_image_0 et_pb_image et_pb_module et_block_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Nicky.jpg\" width=\"900\" height=\"636\" srcset=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Nicky.jpg 900w, https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Nicky-480x339.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 900px, 100vw\" class=\"wp-image-4512\" title=\"Nicky\" \/><\/span><\/div><div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>Nicky Ntuli \u2013 Belfast<\/p>\n<\/div><\/div><\/div><div class=\"et_pb_column_3 et_pb_column et_pb_column_1_3 et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_image_1 et_pb_image et_pb_module et_block_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Thembelihle2.jpg\" width=\"600\" height=\"755\" srcset=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Thembelihle2.jpg 600w, https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/Thembelihle2-480x604.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 600px, 100vw\" class=\"wp-image-4516\" title=\"Thembelihle2\" \/><\/span><\/div><div class=\"et_pb_text_2 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>Thembelihle Nkosi \u2013 Matla<\/p>\n<\/div><\/div><\/div><div class=\"et_pb_column_4 et_pb_column et_pb_column_1_3 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_image_2 et_pb_image et_pb_module et_block_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/07\/453A1849-Copy-copy.jpg\" width=\"1976\" height=\"1276\" srcset=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/07\/453A1849-Copy-copy.jpg 1976w, https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/07\/453A1849-Copy-copy-1280x827.jpg 1280w, https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/07\/453A1849-Copy-copy-980x633.jpg 980w, https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/07\/453A1849-Copy-copy-480x310.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1976px, 100vw\" class=\"wp-image-4779\" title=\"453A1849 - Copy copy\" \/><\/span><\/div><div class=\"et_pb_text_3 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>Mmaphuthego Kolobe \u2013 Grootegeluk<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"et_pb_section_2 et_pb_section et_section_regular et_block_section\"><div class=\"et_pb_row_3 et_pb_row et_block_row\"><div class=\"et_pb_column_5 et_pb_column et_pb_column_1_2 et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_image_3 et_pb_image et_pb_module et_block_module\"><a href=\"https:\/\/xxplore.co.za\/index.php\/2025\/09\/05\/spring-day\/\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/LeftAttow.png\" width=\"26\" height=\"66\" srcset=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/LeftAttow.png 26w\" sizes=\"(max-width: 26px) 100vw, 26px\" class=\"wp-image-16\" title=\"LeftAttow\" \/><\/span><\/a><\/div><\/div><div class=\"et_pb_column_6 et_pb_column et_pb_column_1_2 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_image_4 et_pb_image et_pb_module et_block_module\"><a href=\"https:\/\/xxplore.co.za\/index.php\/xxplore-e3-2025\/\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/RightArrow.png\" width=\"26\" height=\"66\" srcset=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/RightArrow.png 26w\" sizes=\"(max-width: 26px) 100vw, 26px\" class=\"wp-image-17\" title=\"RightArrow\" \/><\/span><\/a><\/div><\/div><\/div><\/div>\n<div class=\"likebtn_container\" style=\"text-align:center;\"><span class=\"likebtn-wrapper\" data-identifier=\"post_5528\" data-site_id=\"67661c126fd08bb24c1b2b18\" data-theme=\"custom\" data-btn_size=\"80\" data-icon_l=\"false\" data-icon_d=\"false\" data-icon_l_url=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/likebutton.png#4559\" data-icon_d_url=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/dontlikebutton.png#4558\" data-label_c=\"#000000\" data-bg_c=\"rgba(250,250,250,0)\" data-brdr_c=\"rgba(198,198,198,0)\" data-f_size=\"15\" data-label_fs=\"r\" data-tooltip_enabled=\"false\" data-white_label=\"true\" data-i18n_like=\"I like this\" data-i18n_dislike=\"I don't like this\" data-style=\"\" data-unlike_allowed=\"\" data-show_copyright=\"\" data-item_url=\"https:\/\/xxplore.co.za\/index.php\/2025\/09\/18\/quiz-q3\/\" data-item_title=\"Quiz Q3\" data-item_image=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Game.png\" data-item_date=\"2025-09-18T12:23:17+00:00\" data-engine=\"WordPress\" data-plugin_v=\"2.6.60\" data-prx=\"https:\/\/xxplore.co.za\/wp-admin\/admin-ajax.php?action=likebtn_prx\" data-event_handler=\"likebtn_eh\" ><\/span><\/div>","protected":false},"excerpt":{"rendered":"<p>The Exxaro Quiz Challenge<br \/>\nCan you get a perfect score?<br \/>\nAnd stand the chance to win a hamper in our lucky draw!<\/p>\n<div class=\"likebtn_container\" style=\"text-align:center;\"><span class=\"likebtn-wrapper\" data-identifier=\"post_5528\" data-site_id=\"67661c126fd08bb24c1b2b18\" data-theme=\"custom\" data-btn_size=\"80\" data-icon_l=\"false\" data-icon_d=\"false\" data-icon_l_url=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/likebutton.png#4559\" data-icon_d_url=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/06\/dontlikebutton.png#4558\" data-label_c=\"#000000\" data-bg_c=\"rgba(250,250,250,0)\" data-brdr_c=\"rgba(198,198,198,0)\" data-f_size=\"15\" data-label_fs=\"r\" data-tooltip_enabled=\"false\" data-white_label=\"true\" data-i18n_like=\"I like this\" data-i18n_dislike=\"I don't like this\" data-style=\"\" data-unlike_allowed=\"\" data-show_copyright=\"\" data-item_url=\"https:\/\/xxplore.co.za\/index.php\/2025\/09\/18\/quiz-q3\/\" data-item_title=\"Quiz Q3\" data-item_image=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Game.png\" data-item_date=\"2025-09-18T12:23:17+00:00\" data-engine=\"WordPress\" data-plugin_v=\"2.6.60\" data-prx=\"https:\/\/xxplore.co.za\/wp-admin\/admin-ajax.php?action=likebtn_prx\" data-event_handler=\"likebtn_eh\" ><\/span><\/div>","protected":false},"author":1,"featured_media":219,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-5528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-q3-2025"],"_links":{"self":[{"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/5528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/comments?post=5528"}],"version-history":[{"count":8,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/5528\/revisions"}],"predecessor-version":[{"id":7277,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/5528\/revisions\/7277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/media\/219"}],"wp:attachment":[{"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=5528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/categories?post=5528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/tags?post=5528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}