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 \/* Removed any \"display: flex\" on body so WordPress layout isn't forced *\/\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 \/* Updated question text area with min-height to support at least 3 lines *\/\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; \/* Ensures at least 3 lines (approx 1.4em each) *\/\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 text-align: 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; color: #fff; }\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 for Email Input & Send button (for background emailing) *\/\n #emailPrompt {\n margin: 20px 0;\n font-weight: bold;\n color: #000;\n }\n #userEmail {\n width: 70%;\n padding: 10px;\n font-size: 16px;\n border: 2px solid #ccc;\n border-radius: 5px;\n margin-bottom: 10px;\n }\n #sendEmailBtn {\n background: #88bd32;\n border: 4px solid #fff;\n color: #fff;\n font-size: 16px;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n transition: background 0.3s ease;\n display: inline-block;\n }\n #sendEmailBtn:hover {\n background: #7aac2b;\n }\n #emailStatusMsg {\n margin-top: 10px;\n font-size: 1em;\n font-weight: bold;\n color: #000;\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1>\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\" \n id=\"startBanner\" \n src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Banner.jpg\"\n alt=\"Banner (600x296)\"\n \/>\n\n <div id=\"startScreenRectangle\">\n <p id=\"instructions\">\n <span style=\"font-size: 28px; font-weight: 600;\">The Exxaro Quiz Challenge<\/span> <br>\n <p style=\"text-align: start; color: #000\">\n <b>Thank you for your participation. <\/b>\n <\/p>\n <p style=\"text-align: start; color: #000\">\n <b>This competition is now closed.<\/b>\n <\/p>\n <p style=\"text-align: start; color: #000\">\n <b>Winners will be announced.<\/b>\n <\/p>\n \n \n <\/div>\n <\/div>\n\n \n <div id=\"questionScreen\" class=\"screen\">\n <div id=\"gameImageContainer\">\n <img decoding=\"async\" \n id=\"questiontwoImage\" \n src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Questionfour.jpg\"\n alt=\"Questionfour (400x400)\"\n \/>\n <\/div>\n\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\n <div id=\"questionTextDiv\"><\/div>\n\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 <div id=\"emailPrompt\" style=\"display:none;\">Please enter your email to enter the competition:<\/div>\n <input type=\"email\" id=\"userEmail\" style=\"display:none;\" placeholder=\"Enter your email here...\" \/>\n <button id=\"sendEmailBtn\" style=\"display:none;\">Send Email<\/button>\n <div id=\"emailStatusMsg\"><\/div>\n <button id=\"overlayBtn\">OK<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/* \n =============================================================================\n ORIGINAL GAME LOGIC (Unchanged except for final time capture fixes)\n =============================================================================\n*\/\nlet originalQuestions = [\n {\n originalNumber: 1,\n question: \"At the 2025 Investing in African Mining Indaba, Exxaro\u2019s leadership contributed to key conversations on critical issues. Name one.\",\n answers: [\"Indaba\", \"Energy transition \/ sustainability\", \"Fashion\", \"Johannesburg\"],\n correctIndex: 1,\n userAnswer: null\n },\n {\n originalNumber: 2,\n question: \"Exxaro is proud to have been officially recognised as a Top Employer in South Africa for 2025, by the global Top Employers Institute. How many times has Exxaro received this prestigious certification?\",\n answers: [\"Never\", \"First\", \"Four\", \"120th\"],\n correctIndex: 2,\n userAnswer: null\n },\n {\n originalNumber: 3,\n question: \"What is the name of the Men\u2019s Forum that Exxaro launched aimed at uniting men across Business Units to highlight the importance of changing and embracing men\u2019s health?\",\n answers: [\"Women in Mining\", \"WiM\", \"Men Unite\", \"Ibandla\"],\n correctIndex: 3,\n userAnswer: null\n },\n {\n originalNumber: 4,\n question: \"What is the name of Exxaro\u2019s energy solutions business?\",\n answers: [\"Cennergi\", \"The green organisation\", \"Matla Mine\", \"Grootegeluk Mine\"],\n correctIndex: 0,\n userAnswer: null\n }\n];\n\nlet questions = JSON.parse(JSON.stringify(originalQuestions));\nlet currentQuestionIdx = 0;\nlet startTime = 0;\nlet timerInterval = null;\nlet isRedoMode = false;\n\n\/\/ New global variable to store the final time immediately after stopping the timer\nlet gameFinalTime = \"\";\n\n\/\/ UI references\nconst startScreen = document.getElementById(\"startScreen\");\nconst questionScreen = document.getElementById(\"questionScreen\");\nconst startBtn = document.getElementById(\"startBtn\");\nconst timerDisplay = document.getElementById(\"timer\");\nconst questionLabel = document.getElementById(\"questionLabel\");\nconst questionTextDiv = document.getElementById(\"questionTextDiv\");\nconst answersContainer = document.getElementById(\"answersContainer\");\n\nconst overlay = document.getElementById(\"overlay\");\nconst overlayContent = document.getElementById(\"overlayContent\");\nconst overlayMessage = document.getElementById(\"overlayMessage\");\nconst overlayBtn = document.getElementById(\"overlayBtn\");\n\n\/\/ Newly added references for email functionality\nconst emailPrompt = document.getElementById(\"emailPrompt\");\nconst userEmail = document.getElementById(\"userEmail\");\nconst sendEmailBtn = document.getElementById(\"sendEmailBtn\");\nconst emailStatusMsg = document.getElementById(\"emailStatusMsg\");\n\n\/\/ Array of color classes for answer buttons\nconst colorClasses = [\"answer-red\", \"answer-orange\", \"answer-blue\", \"answer-green\"];\n\n\/* ===== Event Listeners ===== *\/\nstartBtn.addEventListener(\"click\", startGame);\noverlayBtn.addEventListener(\"click\", onOverlayButtonClick);\nsendEmailBtn.addEventListener(\"click\", onSendEmailClick);\n\n\/* ====== Start Game ====== *\/\nfunction startGame() {\n questions = JSON.parse(JSON.stringify(originalQuestions));\n currentQuestionIdx = 0;\n isRedoMode = false;\n\n startScreen.classList.remove(\"active\");\n questionScreen.classList.add(\"active\");\n\n startTimer();\n loadQuestion();\n}\n\n\/* ====== Timer Logic ====== *\/\nfunction startTimer() {\n startTime = Date.now();\n clearInterval(timerInterval);\n timerInterval = setInterval(() => {\n timerDisplay.textContent = \"Time: \" + formatTime();\n }, 50);\n}\n\nfunction stopTimer() {\n clearInterval(timerInterval);\n timerInterval = null;\n \/\/ Immediately capture the final time in a global variable to ensure consistency\n gameFinalTime = formatTime();\n}\n\nfunction formatTime() {\n const elapsed = Date.now() - startTime;\n const minutes = Math.floor(elapsed \/ 60000);\n const seconds = Math.floor((elapsed % 60000) \/ 1000);\n let ms = Math.floor((elapsed % 1000) \/ 10);\n\n const minStr = String(minutes).padStart(2, '0');\n const secStr = String(seconds).padStart(2, '0');\n const msStr = String(ms).padStart(2, '0');\n\n return `${minStr}:${secStr}.${msStr}`;\n}\n\n\/* ====== Load Question ====== *\/\nfunction loadQuestion() {\n const q = questions[currentQuestionIdx];\n\n if (isRedoMode) {\n questionLabel.textContent = \"Redoing Question \" + q.originalNumber;\n } else {\n questionLabel.textContent = \"Question \" + q.originalNumber;\n }\n\n \/\/ Set question text (supports multiple lines due to min-height on #questionTextDiv)\n questionTextDiv.textContent = q.question || \"\";\n\n \/\/ Clear previous answers\n answersContainer.innerHTML = \"\";\n \/\/ Build new answer buttons\n q.answers.forEach((ans, idx) => {\n const ansDiv = document.createElement(\"div\");\n ansDiv.classList.add(\"answer-btn\");\n ansDiv.classList.add(colorClasses[idx] || colorClasses[colorClasses.length - 1]);\n ansDiv.textContent = ans;\n ansDiv.onclick = () => {\n q.userAnswer = idx;\n currentQuestionIdx++;\n if (currentQuestionIdx < questions.length) {\n loadQuestion();\n } else {\n checkAnswers();\n }\n };\n answersContainer.appendChild(ansDiv);\n });\n}\n\n\/* ====== Check Answers ====== *\/\nfunction checkAnswers() {\n const incorrect = questions.filter(q => q.userAnswer !== q.correctIndex);\n if (incorrect.length === 0) {\n \/\/ All correct => stop timer and capture final time immediately\n stopTimer();\n \/\/ Use gameFinalTime (captured in stopTimer) for consistency\n showOverlay(`Well done! All correct in a time of ${gameFinalTime}`, false);\n } else {\n showOverlay(`You got ${incorrect.length} wrong. Please retry!`, true);\n }\n}\n\n\/* ====== Overlays ====== *\/\nfunction showOverlay(message, redoMode) {\n overlayMessage.textContent = message;\n overlay.classList.add(\"active\");\n isRedoMode = redoMode;\n\n if (redoMode) {\n \/\/ Wrong answers overlay: show OK\/Retry button.\n overlayContent.style.borderColor = \"#ed1e28\";\n overlayBtn.style.backgroundColor = \"#ed1e28\";\n overlayBtn.textContent = \"Retry\";\n overlayBtn.style.display = \"inline-block\"; \/\/ ensure button is visible\n\n \/\/ Hide email prompt & fields in retry mode.\n emailPrompt.style.display = \"none\";\n userEmail.style.display = \"none\";\n sendEmailBtn.style.display = \"none\";\n emailStatusMsg.textContent = \"\";\n } else {\n \/\/ Success overlay: hide the OK button so that only the email input and Send Email button are visible.\n overlayContent.style.borderColor = \"#88bd32\";\n \/\/ Hide the OK button\n overlayBtn.style.display = \"none\";\n \n \/\/ Show email prompt & fields for background email sending.\n emailPrompt.style.display = \"block\";\n userEmail.style.display = \"inline-block\";\n sendEmailBtn.style.display = \"inline-block\";\n userEmail.value = \"\";\n emailStatusMsg.textContent = \"\";\n }\n}\n\nfunction hideOverlay() {\n overlay.classList.remove(\"active\");\n}\n\nfunction onOverlayButtonClick() {\n hideOverlay();\n if (isRedoMode) {\n let stillIncorrect = questions.filter(q => q.userAnswer !== q.correctIndex);\n if (stillIncorrect.length === 0) {\n stopTimer();\n showOverlay(\"All correct! Final time: \" + gameFinalTime, false);\n return;\n }\n questions = stillIncorrect;\n questions.forEach(q => (q.userAnswer = null));\n currentQuestionIdx = 0;\n loadQuestion();\n } else {\n \/\/ Success scenario: do not reset game immediately so user can send email\n \/\/ Optionally, you may call resetGame() after email is sent.\n \/\/ For now, we'll leave the overlay open until the user sends the email.\n }\n}\n\n\/* ====== Reset Game ====== *\/\nfunction resetGame() {\n stopTimer();\n questionScreen.classList.remove(\"active\");\n startScreen.classList.add(\"active\");\n}\n\n\/* \n =============================================================================\n BACKGROUND EMAIL SENDING LOGIC\n =============================================================================\n The function onSendEmailClick() grabs the email and uses the stored \n gameFinalTime to send a POST request via fetch to a backend endpoint.\n*\/\nfunction onSendEmailClick() {\n const emailValue = userEmail.value.trim();\n if (!emailValue) {\n emailStatusMsg.textContent = \"Please enter a valid email.\";\n return;\n }\n\n \/\/ Use the already stored gameFinalTime for consistency\n fetch(\"https:\/\/www.xxplorearchive.co.za\/api\/sendEmail.php\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({\n email: emailValue,\n time: gameFinalTime\n })\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n emailStatusMsg.textContent = \"Thank you for entering the competition!\";\n } else {\n emailStatusMsg.textContent = \"Error sending email: \" + data.message;\n }\n })\n .catch(err => {\n emailStatusMsg.textContent = \"Error: \" + err.message;\n });\n}\n<\/script>\n\n\n<\/body>\n<\/html>\n<\/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_1_2 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\"><a href=\"https:\/\/xxplore.co.za\/index.php\/2025\/05\/23\/exxaro-champions-wetland-clean-up\/\"><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_2 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_1 et_pb_image et_pb_module et_block_module\"><a href=\"https:\/\/xxplore.co.za\/index.php\/xxploree1-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","protected":false},"excerpt":{"rendered":"<p>Play the EXXARO Quiz challenge<\/p>\n","protected":false},"author":1,"featured_media":219,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-218","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-q1-2025"],"_links":{"self":[{"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/218","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=218"}],"version-history":[{"count":4,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/218\/revisions"}],"predecessor-version":[{"id":7232,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/218\/revisions\/7232"}],"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=218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/categories?post=218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/tags?post=218"}],"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 \/* Removed any \"display: flex\" on body so WordPress layout isn't forced *\/\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 \/* Updated question text area with min-height to support at least 3 lines *\/\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; \/* Ensures at least 3 lines (approx 1.4em each) *\/\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 text-align: 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; color: #fff; }\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 for Email Input & Send button (for background emailing) *\/\n #emailPrompt {\n margin: 20px 0;\n font-weight: bold;\n color: #000;\n }\n #userEmail {\n width: 70%;\n padding: 10px;\n font-size: 16px;\n border: 2px solid #ccc;\n border-radius: 5px;\n margin-bottom: 10px;\n }\n #sendEmailBtn {\n background: #88bd32;\n border: 4px solid #fff;\n color: #fff;\n font-size: 16px;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n transition: background 0.3s ease;\n display: inline-block;\n }\n #sendEmailBtn:hover {\n background: #7aac2b;\n }\n #emailStatusMsg {\n margin-top: 10px;\n font-size: 1em;\n font-weight: bold;\n color: #000;\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1>\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\" \n id=\"startBanner\" \n src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Banner.jpg\"\n alt=\"Banner (600x296)\"\n \/>\n\n <div id=\"startScreenRectangle\">\n <p id=\"instructions\">\n <span style=\"font-size: 28px; font-weight: 600;\">The Exxaro Quiz Challenge<\/span> <br>\n <p style=\"text-align: start; color: #000\">\n <b>Thank you for your participation. <\/b>\n <\/p>\n <p style=\"text-align: start; color: #000\">\n <b>This competition is now closed.<\/b>\n <\/p>\n <p style=\"text-align: start; color: #000\">\n <b>Winners will be announced.<\/b>\n <\/p>\n \n \n <\/div>\n <\/div>\n\n \n <div id=\"questionScreen\" class=\"screen\">\n <div id=\"gameImageContainer\">\n <img decoding=\"async\" \n id=\"questiontwoImage\" \n src=\"https:\/\/xxplore.co.za\/wp-content\/uploads\/2025\/05\/Questionfour.jpg\"\n alt=\"Questionfour (400x400)\"\n \/>\n <\/div>\n\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\n <div id=\"questionTextDiv\"><\/div>\n\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 <div id=\"emailPrompt\" style=\"display:none;\">Please enter your email to enter the competition:<\/div>\n <input type=\"email\" id=\"userEmail\" style=\"display:none;\" placeholder=\"Enter your email here...\" \/>\n <button id=\"sendEmailBtn\" style=\"display:none;\">Send Email<\/button>\n <div id=\"emailStatusMsg\"><\/div>\n <button id=\"overlayBtn\">OK<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/* \n =============================================================================\n ORIGINAL GAME LOGIC (Unchanged except for final time capture fixes)\n =============================================================================\n*\/\nlet originalQuestions = [\n {\n originalNumber: 1,\n question: \"At the 2025 Investing in African Mining Indaba, Exxaro\u2019s leadership contributed to key conversations on critical issues. Name one.\",\n answers: [\"Indaba\", \"Energy transition \/ sustainability\", \"Fashion\", \"Johannesburg\"],\n correctIndex: 1,\n userAnswer: null\n },\n {\n originalNumber: 2,\n question: \"Exxaro is proud to have been officially recognised as a Top Employer in South Africa for 2025, by the global Top Employers Institute. How many times has Exxaro received this prestigious certification?\",\n answers: [\"Never\", \"First\", \"Four\", \"120th\"],\n correctIndex: 2,\n userAnswer: null\n },\n {\n originalNumber: 3,\n question: \"What is the name of the Men\u2019s Forum that Exxaro launched aimed at uniting men across Business Units to highlight the importance of changing and embracing men\u2019s health?\",\n answers: [\"Women in Mining\", \"WiM\", \"Men Unite\", \"Ibandla\"],\n correctIndex: 3,\n userAnswer: null\n },\n {\n originalNumber: 4,\n question: \"What is the name of Exxaro\u2019s energy solutions business?\",\n answers: [\"Cennergi\", \"The green organisation\", \"Matla Mine\", \"Grootegeluk Mine\"],\n correctIndex: 0,\n userAnswer: null\n }\n];\n\nlet questions = JSON.parse(JSON.stringify(originalQuestions));\nlet currentQuestionIdx = 0;\nlet startTime = 0;\nlet timerInterval = null;\nlet isRedoMode = false;\n\n\/\/ New global variable to store the final time immediately after stopping the timer\nlet gameFinalTime = \"\";\n\n\/\/ UI references\nconst startScreen = document.getElementById(\"startScreen\");\nconst questionScreen = document.getElementById(\"questionScreen\");\nconst startBtn = document.getElementById(\"startBtn\");\nconst timerDisplay = document.getElementById(\"timer\");\nconst questionLabel = document.getElementById(\"questionLabel\");\nconst questionTextDiv = document.getElementById(\"questionTextDiv\");\nconst answersContainer = document.getElementById(\"answersContainer\");\n\nconst overlay = document.getElementById(\"overlay\");\nconst overlayContent = document.getElementById(\"overlayContent\");\nconst overlayMessage = document.getElementById(\"overlayMessage\");\nconst overlayBtn = document.getElementById(\"overlayBtn\");\n\n\/\/ Newly added references for email functionality\nconst emailPrompt = document.getElementById(\"emailPrompt\");\nconst userEmail = document.getElementById(\"userEmail\");\nconst sendEmailBtn = document.getElementById(\"sendEmailBtn\");\nconst emailStatusMsg = document.getElementById(\"emailStatusMsg\");\n\n\/\/ Array of color classes for answer buttons\nconst colorClasses = [\"answer-red\", \"answer-orange\", \"answer-blue\", \"answer-green\"];\n\n\/* ===== Event Listeners ===== *\/\nstartBtn.addEventListener(\"click\", startGame);\noverlayBtn.addEventListener(\"click\", onOverlayButtonClick);\nsendEmailBtn.addEventListener(\"click\", onSendEmailClick);\n\n\/* ====== Start Game ====== *\/\nfunction startGame() {\n questions = JSON.parse(JSON.stringify(originalQuestions));\n currentQuestionIdx = 0;\n isRedoMode = false;\n\n startScreen.classList.remove(\"active\");\n questionScreen.classList.add(\"active\");\n\n startTimer();\n loadQuestion();\n}\n\n\/* ====== Timer Logic ====== *\/\nfunction startTimer() {\n startTime = Date.now();\n clearInterval(timerInterval);\n timerInterval = setInterval(() => {\n timerDisplay.textContent = \"Time: \" + formatTime();\n }, 50);\n}\n\nfunction stopTimer() {\n clearInterval(timerInterval);\n timerInterval = null;\n \/\/ Immediately capture the final time in a global variable to ensure consistency\n gameFinalTime = formatTime();\n}\n\nfunction formatTime() {\n const elapsed = Date.now() - startTime;\n const minutes = Math.floor(elapsed \/ 60000);\n const seconds = Math.floor((elapsed % 60000) \/ 1000);\n let ms = Math.floor((elapsed % 1000) \/ 10);\n\n const minStr = String(minutes).padStart(2, '0');\n const secStr = String(seconds).padStart(2, '0');\n const msStr = String(ms).padStart(2, '0');\n\n return `${minStr}:${secStr}.${msStr}`;\n}\n\n\/* ====== Load Question ====== *\/\nfunction loadQuestion() {\n const q = questions[currentQuestionIdx];\n\n if (isRedoMode) {\n questionLabel.textContent = \"Redoing Question \" + q.originalNumber;\n } else {\n questionLabel.textContent = \"Question \" + q.originalNumber;\n }\n\n \/\/ Set question text (supports multiple lines due to min-height on #questionTextDiv)\n questionTextDiv.textContent = q.question || \"\";\n\n \/\/ Clear previous answers\n answersContainer.innerHTML = \"\";\n \/\/ Build new answer buttons\n q.answers.forEach((ans, idx) => {\n const ansDiv = document.createElement(\"div\");\n ansDiv.classList.add(\"answer-btn\");\n ansDiv.classList.add(colorClasses[idx] || colorClasses[colorClasses.length - 1]);\n ansDiv.textContent = ans;\n ansDiv.onclick = () => {\n q.userAnswer = idx;\n currentQuestionIdx++;\n if (currentQuestionIdx < questions.length) {\n loadQuestion();\n } else {\n checkAnswers();\n }\n };\n answersContainer.appendChild(ansDiv);\n });\n}\n\n\/* ====== Check Answers ====== *\/\nfunction checkAnswers() {\n const incorrect = questions.filter(q => q.userAnswer !== q.correctIndex);\n if (incorrect.length === 0) {\n \/\/ All correct => stop timer and capture final time immediately\n stopTimer();\n \/\/ Use gameFinalTime (captured in stopTimer) for consistency\n showOverlay(`Well done! All correct in a time of ${gameFinalTime}`, false);\n } else {\n showOverlay(`You got ${incorrect.length} wrong. Please retry!`, true);\n }\n}\n\n\/* ====== Overlays ====== *\/\nfunction showOverlay(message, redoMode) {\n overlayMessage.textContent = message;\n overlay.classList.add(\"active\");\n isRedoMode = redoMode;\n\n if (redoMode) {\n \/\/ Wrong answers overlay: show OK\/Retry button.\n overlayContent.style.borderColor = \"#ed1e28\";\n overlayBtn.style.backgroundColor = \"#ed1e28\";\n overlayBtn.textContent = \"Retry\";\n overlayBtn.style.display = \"inline-block\"; \/\/ ensure button is visible\n\n \/\/ Hide email prompt & fields in retry mode.\n emailPrompt.style.display = \"none\";\n userEmail.style.display = \"none\";\n sendEmailBtn.style.display = \"none\";\n emailStatusMsg.textContent = \"\";\n } else {\n \/\/ Success overlay: hide the OK button so that only the email input and Send Email button are visible.\n overlayContent.style.borderColor = \"#88bd32\";\n \/\/ Hide the OK button\n overlayBtn.style.display = \"none\";\n \n \/\/ Show email prompt & fields for background email sending.\n emailPrompt.style.display = \"block\";\n userEmail.style.display = \"inline-block\";\n sendEmailBtn.style.display = \"inline-block\";\n userEmail.value = \"\";\n emailStatusMsg.textContent = \"\";\n }\n}\n\nfunction hideOverlay() {\n overlay.classList.remove(\"active\");\n}\n\nfunction onOverlayButtonClick() {\n hideOverlay();\n if (isRedoMode) {\n let stillIncorrect = questions.filter(q => q.userAnswer !== q.correctIndex);\n if (stillIncorrect.length === 0) {\n stopTimer();\n showOverlay(\"All correct! Final time: \" + gameFinalTime, false);\n return;\n }\n questions = stillIncorrect;\n questions.forEach(q => (q.userAnswer = null));\n currentQuestionIdx = 0;\n loadQuestion();\n } else {\n \/\/ Success scenario: do not reset game immediately so user can send email\n \/\/ Optionally, you may call resetGame() after email is sent.\n \/\/ For now, we'll leave the overlay open until the user sends the email.\n }\n}\n\n\/* ====== Reset Game ====== *\/\nfunction resetGame() {\n stopTimer();\n questionScreen.classList.remove(\"active\");\n startScreen.classList.add(\"active\");\n}\n\n\/* \n =============================================================================\n BACKGROUND EMAIL SENDING LOGIC\n =============================================================================\n The function onSendEmailClick() grabs the email and uses the stored \n gameFinalTime to send a POST request via fetch to a backend endpoint.\n*\/\nfunction onSendEmailClick() {\n const emailValue = userEmail.value.trim();\n if (!emailValue) {\n emailStatusMsg.textContent = \"Please enter a valid email.\";\n return;\n }\n\n \/\/ Use the already stored gameFinalTime for consistency\n fetch(\"https:\/\/www.xxplorearchive.co.za\/api\/sendEmail.php\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({\n email: emailValue,\n time: gameFinalTime\n })\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n emailStatusMsg.textContent = \"Thank you for entering the competition!\";\n } else {\n emailStatusMsg.textContent = \"Error sending email: \" + data.message;\n }\n })\n .catch(err => {\n emailStatusMsg.textContent = \"Error: \" + err.message;\n });\n}\n<\/script>\n\n\n<\/body>\n<\/html>\n<\/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_1_2 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\"><a href=\"https:\/\/xxplore.co.za\/index.php\/2025\/05\/23\/exxaro-champions-wetland-clean-up\/\"><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_2 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_1 et_pb_image et_pb_module et_block_module\"><a href=\"https:\/\/xxplore.co.za\/index.php\/xxploree1-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","protected":false},"excerpt":{"rendered":"<p>Play the EXXARO Quiz challenge<\/p>\n","protected":false},"author":1,"featured_media":219,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-218","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-q1-2025"],"_links":{"self":[{"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/218","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=218"}],"version-history":[{"count":4,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/218\/revisions"}],"predecessor-version":[{"id":7232,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/posts\/218\/revisions\/7232"}],"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=218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/categories?post=218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xxplore.co.za\/index.php\/wp-json\/wp\/v2\/tags?post=218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}