{"id":649,"date":"2026-10-04T15:55:54","date_gmt":"2026-10-04T15:55:54","guid":{"rendered":"https:\/\/mrcottle.co.uk\/WP\/?page_id=649"},"modified":"2026-10-04T15:55:54","modified_gmt":"2026-10-04T15:55:54","slug":"phishing-challenge","status":"publish","type":"page","link":"https:\/\/mrcottle.co.uk\/WP\/phishing-challenge\/","title":{"rendered":"Phishing Challenge"},"content":{"rendered":"


\n
\n
\n
\n
\nPhishing Detective<\/title><\/p>\n<style>\n<p>* {\n box-sizing: border-box;\n}<\/p>\n<p>html,\nbody {\n margin: 0;\n padding: 0;\n height: 100%;\n font-family: Arial, Helvetica, sans-serif;\n background: #f6f8fc;\n color: #202124;\n}<\/p>\n<p>button,\ninput {\n font-family: inherit;\n}<\/p>\n<p>button {\n cursor: pointer;\n}<\/p>\n<p>\/* =========================================================\n TOP BAR\n========================================================= *\/<\/p>\n<p>.topbar {\n height: 64px;\n background: #ffffff;\n border-bottom: 1px solid #dadce0;\n display: flex;\n align-items: center;\n padding: 0 18px;\n gap: 18px;\n}<\/p>\n<p>.menu-button {\n width: 42px;\n height: 42px;\n border: none;\n background: transparent;\n border-radius: 50%;\n font-size: 22px;\n color: #5f6368;\n}<\/p>\n<p>.menu-button:hover {\n background: #f1f3f4;\n}<\/p>\n<p>.mail-logo {\n display: flex;\n align-items: center;\n gap: 10px;\n min-width: 190px;\n}<\/p>\n<p>.mail-icon {\n width: 34px;\n height: 26px;\n border: 3px solid #5f6368;\n border-radius: 4px;\n position: relative;\n}<\/p>\n<p>.mail-icon:after,\n.mail-icon:before {\n content: \"\";\n position: absolute;\n width: 18px;\n height: 3px;\n background: #5f6368;\n top: 7px;\n}<\/p>\n<p>.mail-icon:before {\n left: 0;\n transform: rotate(32deg);\n}<\/p>\n<p>.mail-icon:after {\n right: 0;\n transform: rotate(-32deg);\n}<\/p>\n<p>.logo-text {\n font-size: 22px;\n color: #5f6368;\n font-weight: 400;\n}<\/p>\n<p>.search {\n flex: 1;\n max-width: 720px;\n height: 46px;\n background: #f1f3f4;\n border-radius: 24px;\n display: flex;\n align-items: center;\n padding: 0 18px;\n}<\/p>\n<p>.search-icon {\n color: #5f6368;\n font-size: 18px;\n margin-right: 12px;\n}<\/p>\n<p>.search input {\n width: 100%;\n border: none;\n background: transparent;\n outline: none;\n font-size: 15px;\n}<\/p>\n<p>.top-score {\n margin-left: auto;\n text-align: right;\n white-space: nowrap;\n}<\/p>\n<p>.score-number {\n font-size: 15px;\n font-weight: bold;\n}<\/p>\n<p>.score-label {\n color: #5f6368;\n font-size: 12px;\n}<\/p>\n<p>\/* =========================================================\n APP LAYOUT\n========================================================= *\/<\/p>\n<p>.app {\n height: calc(100vh - 64px);\n display: grid;\n grid-template-columns: 230px minmax(0, 1fr);\n min-height: 0;\n}<\/p>\n<p>\/* =========================================================\n SIDEBAR\n========================================================= *\/<\/p>\n<p>.sidebar {\n background: #ffffff;\n border-right: 1px solid #dadce0;\n padding: 18px 10px;\n min-height: 0;\n overflow-y: auto;\n}<\/p>\n<p>.sidebar-title {\n font-size: 12px;\n color: #80868b;\n font-weight: bold;\n padding: 10px 14px 8px;\n text-transform: uppercase;\n}<\/p>\n<p>.folder-button {\n width: 100%;\n border: none;\n background: transparent;\n height: 42px;\n border-radius: 0 20px 20px 0;\n text-align: left;\n padding: 0 16px;\n color: #3c4043;\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 13px;\n}<\/p>\n<p>.folder-button:hover {\n background: #f1f3f4;\n}<\/p>\n<p>.folder-button.active {\n background: #d3e3fd;\n color: #174ea6;\n font-weight: bold;\n}<\/p>\n<p>.folder-icon {\n width: 20px;\n min-width: 20px;\n text-align: center;\n font-size: 13px;\n font-weight: bold;\n}<\/p>\n<p>.folder-count {\n margin-left: auto;\n font-size: 12px;\n font-weight: bold;\n}<\/p>\n<p>.sidebar-divider {\n border-top: 1px solid #dadce0;\n margin: 20px 10px;\n}<\/p>\n<p>.progress-box {\n margin: 15px 12px;\n padding: 15px;\n background: #f8fafd;\n border: 1px solid #dadce0;\n border-radius: 10px;\n}<\/p>\n<p>.progress-title {\n font-size: 12px;\n color: #5f6368;\n margin-bottom: 8px;\n}<\/p>\n<p>.progress-track {\n height: 7px;\n background: #e0e0e0;\n border-radius: 5px;\n overflow: hidden;\n}<\/p>\n<p>.progress-fill {\n height: 100%;\n width: 0%;\n background: #1a73e8;\n transition: width 0.3s;\n}<\/p>\n<p>.progress-text {\n margin-top: 8px;\n font-size: 12px;\n font-weight: bold;\n}<\/p>\n<p>.reset-button {\n width: calc(100% - 24px);\n margin: 20px 12px;\n height: 38px;\n border: 1px solid #dadce0;\n background: white;\n border-radius: 5px;\n color: #5f6368;\n}<\/p>\n<p>.reset-button:hover {\n background: #f1f3f4;\n}<\/p>\n<p>\/* =========================================================\n WORKSPACE\n========================================================= *\/<\/p>\n<p>.workspace {\n min-width: 0;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(330px, 410px) minmax(0, 1fr);\n background: #ffffff;\n}<\/p>\n<p>\/* =========================================================\n INBOX LIST\n========================================================= *\/<\/p>\n<p>.inbox-panel {\n min-width: 0;\n min-height: 0;\n border-right: 1px solid #dadce0;\n display: flex;\n flex-direction: column;\n}<\/p>\n<p>.inbox-heading {\n height: 66px;\n border-bottom: 1px solid #dadce0;\n padding: 15px 18px;\n flex-shrink: 0;\n}<\/p>\n<p>.heading-title {\n font-size: 20px;\n font-weight: 400;\n}<\/p>\n<p>.heading-subtitle {\n color: #5f6368;\n font-size: 12px;\n margin-top: 4px;\n}<\/p>\n<p>.mail-list {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n}<\/p>\n<p>.mail-row {\n min-height: 78px;\n border-bottom: 1px solid #e6e6e6;\n padding: 11px 15px;\n display: grid;\n grid-template-columns: 30px minmax(0, 1fr) auto;\n column-gap: 8px;\n cursor: pointer;\n background: #ffffff;\n}<\/p>\n<p>.mail-row:hover {\n background: #f5f7f7;\n}<\/p>\n<p>.mail-row.selected {\n background: #e8f0fe;\n}<\/p>\n<p>.mail-avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: #d9e2f3;\n color: #174ea6;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: bold;\n}<\/p>\n<p>.mail-content {\n min-width: 0;\n}<\/p>\n<p>.sender {\n font-size: 14px;\n font-weight: bold;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}<\/p>\n<p>.sender-email {\n color: #777;\n font-size: 11px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}<\/p>\n<p>.subject {\n margin-top: 4px;\n font-size: 13px;\n font-weight: bold;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}<\/p>\n<p>.snippet {\n margin-top: 3px;\n color: #5f6368;\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}<\/p>\n<p>.mail-date {\n font-size: 11px;\n color: #5f6368;\n white-space: nowrap;\n}<\/p>\n<p>.difficulty {\n display: inline-block;\n margin-top: 5px;\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 9px;\n font-weight: bold;\n text-transform: uppercase;\n background: #f1f3f4;\n color: #5f6368;\n}<\/p>\n<p>.empty-folder {\n padding: 60px 25px;\n text-align: center;\n color: #5f6368;\n}<\/p>\n<p>.empty-folder h3 {\n color: #3c4043;\n font-weight: 400;\n}<\/p>\n<p>\/* =========================================================\n EMAIL READER\n========================================================= *\/<\/p>\n<p>.reader {\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n background: #ffffff;\n}<\/p>\n<p>.reader-toolbar {\n height: 54px;\n border-bottom: 1px solid #dadce0;\n display: flex;\n align-items: center;\n padding: 0 18px;\n color: #5f6368;\n font-size: 13px;\n}<\/p>\n<p>.reader-content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 30px 42px 50px;\n}<\/p>\n<p>.email-subject {\n font-size: 23px;\n font-weight: 400;\n margin-bottom: 24px;\n color: #202124;\n}<\/p>\n<p>.email-header {\n display: flex;\n align-items: flex-start;\n gap: 13px;\n margin-bottom: 25px;\n}<\/p>\n<p>.large-avatar {\n width: 42px;\n height: 42px;\n flex-shrink: 0;\n border-radius: 50%;\n background: #d9e2f3;\n color: #174ea6;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n}<\/p>\n<p>.email-header-details {\n min-width: 0;\n}<\/p>\n<p>.email-sender-name {\n font-size: 14px;\n font-weight: bold;\n}<\/p>\n<p>.email-sender-address {\n color: #5f6368;\n font-size: 12px;\n margin-top: 3px;\n}<\/p>\n<p>.email-recipient {\n color: #5f6368;\n font-size: 12px;\n margin-top: 6px;\n}<\/p>\n<p>.email-date {\n margin-left: auto;\n color: #5f6368;\n font-size: 12px;\n white-space: nowrap;\n}<\/p>\n<p>.brand-box {\n margin: 20px 0;\n padding: 15px 18px;\n border: 1px solid #dadce0;\n border-radius: 7px;\n background: #fafafa;\n display: flex;\n align-items: center;\n gap: 15px;\n}<\/p>\n<p>.natwest-logo {\n width: 115px;\n height: 42px;\n background: #42145f;\n color: #ffffff;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 19px;\n letter-spacing: -0.5px;\n border-radius: 2px;\n}<\/p>\n<p>.simulation-label {\n font-size: 10px;\n color: #777;\n text-transform: uppercase;\n letter-spacing: 0.6px;\n}<\/p>\n<p>.email-body {\n max-width: 850px;\n font-size: 15px;\n line-height: 1.65;\n color: #303134;\n}<\/p>\n<p>.email-body p {\n margin: 0 0 16px;\n}<\/p>\n<p>\/* =========================================================\n LINKS\n========================================================= *\/<\/p>\n<p>.email-body .fake-link {\n color: #1a73e8;\n text-decoration: underline;\n word-break: break-all;\n cursor: pointer;\n}<\/p>\n<p>.email-body .fake-link:hover {\n color: #174ea6;\n background: #e8f0fe;\n}<\/p>\n<p>.email-body .warning-box {\n border: 1px solid #dadce0;\n background: #f8f9fa;\n padding: 15px;\n margin: 18px 0;\n border-radius: 5px;\n}<\/p>\n<p>.classification-area {\n margin-top: 35px;\n padding-top: 25px;\n border-top: 1px solid #dadce0;\n max-width: 850px;\n}<\/p>\n<p>.classification-title {\n font-size: 15px;\n font-weight: bold;\n margin-bottom: 15px;\n}<\/p>\n<p>.classification-buttons {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}<\/p>\n<p>.classify-button {\n min-width: 150px;\n height: 45px;\n border-radius: 5px;\n border: 1px solid #dadce0;\n background: white;\n font-weight: bold;\n font-size: 14px;\n}<\/p>\n<p>.classify-button:disabled {\n cursor: default;\n opacity: 0.55;\n}<\/p>\n<p>.phishing-button {\n color: #b3261e;\n border-color: #d93025;\n}<\/p>\n<p>.phishing-button:hover {\n background: #fce8e6;\n}<\/p>\n<p>.safe-button {\n color: #137333;\n border-color: #188038;\n}<\/p>\n<p>.safe-button:hover {\n background: #e6f4ea;\n}<\/p>\n<p>.feedback {\n margin-top: 18px;\n padding: 14px;\n border-radius: 6px;\n display: none;\n font-size: 13px;\n line-height: 1.5;\n}<\/p>\n<p>.feedback.correct {\n display: block;\n background: #e6f4ea;\n border: 1px solid #b7dfc1;\n color: #137333;\n}<\/p>\n<p>.feedback.incorrect {\n display: block;\n background: #fce8e6;\n border: 1px solid #f5c2c0;\n color: #b3261e;\n}<\/p>\n<p>.feedback-ok {\n margin-top: 12px;\n padding: 8px 20px;\n background: #ffffff;\n border: 1px solid currentColor;\n border-radius: 4px;\n font-weight: bold;\n font-size: 13px;\n color: inherit;\n}<\/p>\n<p>.feedback-ok:hover {\n background: rgba(255,255,255,0.7);\n}<\/p>\n<p>.clues {\n margin-top: 25px;\n border-top: 1px solid #eee;\n padding-top: 20px;\n}<\/p>\n<p>.clues h3 {\n font-size: 14px;\n margin: 0 0 10px;\n}<\/p>\n<p>.clue {\n margin: 7px 0;\n padding: 8px 10px;\n background: #f8f9fa;\n border-left: 3px solid #dadce0;\n font-size: 12px;\n}<\/p>\n<p>\/* =========================================================\n FILED BANNER\n========================================================= *\/<\/p>\n<p>.filed-banner {\n padding: 13px 15px;\n background: #e6f4ea;\n border: 1px solid #b7dfc1;\n border-radius: 6px;\n color: #137333;\n font-size: 13px;\n margin-bottom: 25px;\n}<\/p>\n<p>.filed-banner.phishing {\n background: #fce8e6;\n border-color: #f5c2c0;\n color: #b3261e;\n}<\/p>\n<p>\/* =========================================================\n READER PLACEHOLDER\n========================================================= *\/<\/p>\n<p>.reader-placeholder {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 30px;\n color: #5f6368;\n}<\/p>\n<p>.reader-placeholder h2 {\n font-weight: 400;\n color: #3c4043;\n}<\/p>\n<p>\/* =========================================================\n CERTIFICATE\n========================================================= *\/<\/p>\n<p>.certificate-screen {\n position: fixed;\n inset: 0;\n background: #eef2f7;\n z-index: 1000;\n display: none;\n overflow-y: auto;\n padding: 35px 20px;\n}<\/p>\n<p>.certificate-screen.show {\n display: block;\n}<\/p>\n<p>.certificate-wrap {\n max-width: 950px;\n margin: 0 auto;\n}<\/p>\n<p>.certificate {\n background: white;\n border: 12px solid #1a73e8;\n padding: 12px;\n box-shadow: 0 5px 30px rgba(0,0,0,0.15);\n}<\/p>\n<p>.certificate-inner {\n border: 2px solid #dadce0;\n min-height: 600px;\n padding: 55px 50px;\n text-align: center;\n position: relative;\n background:\n linear-gradient(\n 135deg,\n rgba(26,115,232,0.035) 25%,\n transparent 25%,\n transparent 50%,\n rgba(26,115,232,0.035) 50%,\n rgba(26,115,232,0.035) 75%,\n transparent 75%\n );\n background-size: 50px 50px;\n}<\/p>\n<p>.certificate-small-title {\n font-size: 13px;\n color: #5f6368;\n text-transform: uppercase;\n letter-spacing: 4px;\n margin-bottom: 25px;\n}<\/p>\n<p>.certificate-title {\n font-size: 46px;\n letter-spacing: 2px;\n margin: 0;\n color: #174ea6;\n}<\/p>\n<p>.certificate-line {\n width: 180px;\n height: 3px;\n background: #1a73e8;\n margin: 22px auto;\n}<\/p>\n<p>.well-done {\n font-size: 32px;\n margin: 20px 0;\n color: #202124;\n}<\/p>\n<p>.certificate-description {\n max-width: 680px;\n margin: 0 auto;\n font-size: 16px;\n line-height: 1.7;\n color: #5f6368;\n}<\/p>\n<p>.certificate-score {\n margin: 35px auto;\n padding: 18px;\n max-width: 500px;\n border: 1px solid #dadce0;\n background: #f8fafd;\n}<\/p>\n<p>.big-score {\n font-size: 38px;\n font-weight: bold;\n color: #174ea6;\n}<\/p>\n<p>.score-caption {\n margin-top: 5px;\n color: #5f6368;\n font-size: 13px;\n}<\/p>\n<p>.certificate-stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n max-width: 650px;\n margin: 30px auto;\n border-top: 1px solid #dadce0;\n border-bottom: 1px solid #dadce0;\n}<\/p>\n<p>.stat {\n padding: 18px 10px;\n}<\/p>\n<p>.stat + .stat {\n border-left: 1px solid #dadce0;\n}<\/p>\n<p>.stat-number {\n font-size: 24px;\n font-weight: bold;\n color: #202124;\n}<\/p>\n<p>.stat-label {\n margin-top: 4px;\n color: #5f6368;\n font-size: 11px;\n text-transform: uppercase;\n}<\/p>\n<p>.certificate-footer {\n margin-top: 35px;\n font-size: 13px;\n color: #5f6368;\n}<\/p>\n<p>.school-name {\n margin-top: 10px;\n font-size: 17px;\n font-weight: bold;\n color: #202124;\n}<\/p>\n<p>.completion-badge {\n position: absolute;\n right: 35px;\n top: 35px;\n width: 100px;\n height: 100px;\n border: 5px solid #1a73e8;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: #174ea6;\n font-weight: bold;\n font-size: 13px;\n line-height: 1.2;\n transform: rotate(10deg);\n}<\/p>\n<p>.certificate-actions {\n text-align: center;\n padding: 20px;\n}<\/p>\n<p>.restart-large {\n background: #1a73e8;\n color: white;\n border: none;\n border-radius: 5px;\n padding: 12px 25px;\n font-weight: bold;\n font-size: 14px;\n}<\/p>\n<p>.restart-large:hover {\n background: #185abc;\n}<\/p>\n<p>.screenshot-note {\n margin-top: 12px;\n color: #5f6368;\n font-size: 12px;\n}<\/p>\n<p>\/* =========================================================\n RESPONSIVE\n========================================================= *\/<\/p>\n<p>@media (max-width: 900px) {<\/p>\n<p> .app {\n grid-template-columns: 190px minmax(0, 1fr);\n }<\/p>\n<p> .workspace {\n grid-template-columns: 320px minmax(0, 1fr);\n }<\/p>\n<p> .reader-content {\n padding: 25px;\n }<\/p>\n<p> .mail-logo {\n min-width: 130px;\n }<\/p>\n<p> .logo-text {\n font-size: 18px;\n }<\/p>\n<p> .completion-badge {\n position: static;\n margin: 0 auto 20px;\n }\n}<\/p>\n<p>@media (max-width: 700px) {<\/p>\n<p> .app {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .sidebar {\n display: none;\n }<\/p>\n<p> .workspace {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .inbox-panel {\n display: none;\n }<\/p>\n<p> .reader {\n display: flex;\n }<\/p>\n<p> .search {\n display: none;\n }<\/p>\n<p> .top-score {\n font-size: 12px;\n }<\/p>\n<p> .certificate-inner {\n padding: 35px 20px;\n }<\/p>\n<p> .certificate-title {\n font-size: 34px;\n }<\/p>\n<p> .certificate-stats {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .stat + .stat {\n border-left: none;\n border-top: 1px solid #dadce0;\n }\n}<\/p>\n<\/style>\n<p><\/head><\/p>\n<p><body><\/p>\n<header class=\"topbar\">\n<p> <button\n class=\"menu-button\"\n onclick=\"toggleSidebar()\"\n title=\"Menu\"><br \/>\n =<br \/>\n <\/button><\/p>\n<div class=\"mail-logo\">\n<div class=\"mail-icon\"><\/div>\n<div class=\"logo-text\">\n Mail Detective\n <\/div>\n<\/p><\/div>\n<div class=\"search\">\n<div class=\"search-icon\">\n Search\n <\/div>\n<p> <input\n type=\"text\"\n id=\"searchBox\"\n placeholder=\"Search mail\"\n oninput=\"renderMailList()\"\n ><\/p><\/div>\n<div class=\"top-score\">\n<div\n class=\"score-number\"\n id=\"topScore\"><br \/>\n 0 \/ 24\n <\/div>\n<div class=\"score-label\">\n correct\n <\/div>\n<\/p><\/div>\n<\/header>\n<div class=\"app\">\n<aside\n class=\"sidebar\"\n id=\"sidebar\"><\/p>\n<div class=\"sidebar-title\">\n Folders\n <\/div>\n<p> <button\n class=\"folder-button active\"\n id=\"folder-inbox\"\n onclick=\"openFolder('inbox')\"><\/p>\n<p> <span class=\"folder-icon\"><br \/>\n IN<br \/>\n <\/span><\/p>\n<p> <span><br \/>\n Inbox<br \/>\n <\/span><\/p>\n<p> <span\n class=\"folder-count\"\n id=\"inboxCount\"><br \/>\n 24<br \/>\n <\/span><\/p>\n<p> <\/button><\/p>\n<p> <button\n class=\"folder-button\"\n id=\"folder-phishing\"\n onclick=\"openFolder('phishing')\"><\/p>\n<p> <span class=\"folder-icon\"><br \/>\n !<br \/>\n <\/span><\/p>\n<p> <span><br \/>\n Phishing<br \/>\n <\/span><\/p>\n<p> <span\n class=\"folder-count\"\n id=\"phishingCount\"><br \/>\n 0<br \/>\n <\/span><\/p>\n<p> <\/button><\/p>\n<p> <button\n class=\"folder-button\"\n id=\"folder-safe\"\n onclick=\"openFolder('safe')\"><\/p>\n<p> <span class=\"folder-icon\"><br \/>\n OK<br \/>\n <\/span><\/p>\n<p> <span><br \/>\n Safe<br \/>\n <\/span><\/p>\n<p> <span\n class=\"folder-count\"\n id=\"safeCount\"><br \/>\n 0<br \/>\n <\/span><\/p>\n<p> <\/button><\/p>\n<div class=\"sidebar-divider\"><\/div>\n<div class=\"progress-box\">\n<div class=\"progress-title\">\n Activity progress\n <\/div>\n<div class=\"progress-track\">\n<div\n class=\"progress-fill\"\n id=\"progressFill\">\n <\/div>\n<\/p><\/div>\n<div\n class=\"progress-text\"\n id=\"progressText\"><br \/>\n 0 of 24 correct\n <\/div>\n<\/p><\/div>\n<p> <button\n class=\"reset-button\"\n onclick=\"resetActivity()\"><\/p>\n<p> Restart Activity<\/p>\n<p> <\/button><\/p>\n<\/aside>\n<p> <main class=\"workspace\"><\/p>\n<section class=\"inbox-panel\">\n<div class=\"inbox-heading\">\n<div\n class=\"heading-title\"\n id=\"folderTitle\"><br \/>\n Inbox\n <\/div>\n<div\n class=\"heading-subtitle\"\n id=\"folderSubtitle\"><\/p>\n<p> Messages waiting to be classified<\/p><\/div>\n<\/p><\/div>\n<div\n class=\"mail-list\"\n id=\"mailList\">\n <\/div>\n<\/section>\n<section class=\"reader\">\n<div\n class=\"reader-toolbar\"\n id=\"readerToolbar\"><\/p>\n<p> Mail<\/p><\/div>\n<div\n class=\"reader-content\"\n id=\"readerContent\"><\/p>\n<div class=\"reader-placeholder\">\n<div>\n<h2>\n Select an email<br \/>\n <\/h2>\n<p>\n Choose a message from the inbox<br \/>\n to investigate it.\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/main><\/p>\n<\/div>\n<div\n class=\"certificate-screen\"\n id=\"certificateScreen\"><\/p>\n<div class=\"certificate-wrap\">\n<div class=\"certificate\">\n<div class=\"certificate-inner\">\n<div class=\"completion-badge\">\n 100%<br \/>\n COMPLETE\n <\/div>\n<div class=\"certificate-small-title\">\n Certificate of Achievement\n <\/div>\n<h1 class=\"certificate-title\">\n PHISHING DETECTIVE<br \/>\n <\/h1>\n<div class=\"certificate-line\"><\/div>\n<div class=\"well-done\">\n Well Done!\n <\/div>\n<div class=\"certificate-description\">\n<p> This certificate is awarded for successfully<br \/>\n identifying the phishing and legitimate emails<br \/>\n in the Phishing Detective challenge.<\/p><\/div>\n<div class=\"certificate-score\">\n<div\n class=\"big-score\"\n id=\"certificateScore\"><br \/>\n 24 \/ 24\n <\/div>\n<div class=\"score-caption\">\n Correctly classified\n <\/div>\n<\/p><\/div>\n<div class=\"certificate-stats\">\n<div class=\"stat\">\n<div\n class=\"stat-number\"\n id=\"certificatePhishing\"><br \/>\n 0\n <\/div>\n<div class=\"stat-label\">\n Phishing identified\n <\/div>\n<\/p><\/div>\n<div class=\"stat\">\n<div\n class=\"stat-number\"\n id=\"certificateSafe\"><br \/>\n 0\n <\/div>\n<div class=\"stat-label\">\n Safe identified\n <\/div>\n<\/p><\/div>\n<div class=\"stat\">\n<div\n class=\"stat-number\"\n id=\"certificateAttempts\"><br \/>\n 0\n <\/div>\n<div class=\"stat-label\">\n Total attempts\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"certificate-footer\">\n<p> Accuracy:<br \/>\n <strong id=\"certificateAccuracy\"><br \/>\n 100%<br \/>\n <\/strong><\/p>\n<div class=\"school-name\">\n Beechen Cliff School\n <\/div>\n<div style=\"margin-top:6px;\">\n Computing\n <\/div>\n<div style=\"margin-top:10px;\">\n Completed:<br \/>\n <span id=\"certificateDate\"><\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"certificate-actions\">\n<p> <button\n class=\"restart-large\"\n onclick=\"resetActivity()\"><\/p>\n<p> Restart Activity<\/p>\n<p> <\/button><\/p>\n<div class=\"screenshot-note\">\n<p> You can now take a screenshot of your certificate<br \/>\n and submit it to your teacher.<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script><\/p>\n<p>\/* =========================================================\n EMAIL DATA\n========================================================= *\/<\/p>\n<p>const emails = [<\/p>\n<p>\/* =========================================================\n VERY EASY\n========================================================= *\/<\/p>\n<p>{\n id: 1,\n type: \"phishing\",\n difficulty: \"Very Easy\",\n senderName: \"NatWest Security\",\n senderEmail: \"security-alert@natwestsupport-mail.com\",\n subject: \"URGENT: Your account will be closed\",\n date: \"3 Oct\",\n time: \"08:14\",\n recipient: \"student@example.com\",\n brand: \"natwest\",\n body: `<\/p>\n<p>We have detected unusual activity on your NatWest account.<\/p>\n<div class=\"warning-box\">\n Your account will be permanently suspended today unless you confirm your details immediately.\n <\/div>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/natwest-account-check.example\/secure\"\n title=\"https:\/\/natwest-account-check.example\/secure\">\n Confirm your account security now\n <\/a>\n <\/p>\n<p>Failure to act may result in loss of access.<\/p>\n<p> `,\n clues: [\n \"The sender address is not an official NatWest address.\",\n \"The message creates a strong sense of urgency.\",\n \"It threatens to close the account.\",\n \"The link does not lead to the official NatWest website.\"\n ]\n},<\/p>\n<p>{\n id: 2,\n type: \"phishing\",\n difficulty: \"Very Easy\",\n senderName: \"Parcel Delivery\",\n senderEmail: \"delivery-notice@parcel-track-help.com\",\n subject: \"Your parcel could not be delivered\",\n date: \"3 Oct\",\n time: \"08:41\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>We attempted to deliver your parcel today but nobody was available.<\/p>\n<p>\n A small delivery charge is required before we can arrange another delivery.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/parcel-track-help.example\/payment\"\n title=\"https:\/\/parcel-track-help.example\/payment\">\n Pay delivery charge\n <\/a>\n <\/p>\n<p>Your parcel will be returned if payment is not received today.<\/p>\n<p> `,\n clues: [\n \"The email does not identify which delivery company is involved.\",\n \"It asks for payment unexpectedly.\",\n \"The message uses pressure and urgency.\",\n \"The sender address does not match a recognised delivery company.\"\n ]\n},<\/p>\n<p>{\n id: 3,\n type: \"phishing\",\n difficulty: \"Very Easy\",\n senderName: \"Prize Department\",\n senderEmail: \"winner@online-prize-centre.biz\",\n subject: \"Congratulations! You have won \u00a3500\",\n date: \"3 Oct\",\n time: \"09:03\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>Congratulations!<\/p>\n<p>You have been selected as one of today's lucky winners.<\/p>\n<p>\n To receive your \u00a3500 prize, please send us your full name,\n home address and bank details.\n <\/p>\n<p>Reply to this email with the requested information.<\/p>\n<p> `,\n clues: [\n \"You did not enter a competition.\",\n \"It asks for sensitive personal and financial information.\",\n \"There is no clear organisation behind the prize.\",\n \"The sender address looks unrelated to a real company.\"\n ]\n},<\/p>\n<p>{\n id: 4,\n type: \"legitimate\",\n difficulty: \"Very Easy\",\n senderName: \"Beechen Cliff School\",\n senderEmail: \"office@beechencliff.org.uk\",\n subject: \"School finishes at 3:30pm today\",\n date: \"3 Oct\",\n time: \"09:20\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>This is a reminder that school finishes at the normal time of 3:30pm today.<\/p>\n<p>No special arrangements are required.<\/p>\n<p>\n For general school information, please visit the\n <a\n class=\"fake-link\"\n href=\"https:\/\/www.beechencliff.org.uk\/\"\n title=\"https:\/\/www.beechencliff.org.uk\/\">\n Beechen Cliff School website\n <\/a>.\n <\/p>\n<p> `,\n clues: [\n \"The sender uses the school's official domain.\",\n \"The message contains routine school information.\",\n \"The website link is relevant to the message.\",\n \"There is no request for personal information or payment.\"\n ]\n},<\/p>\n<p>\/* =========================================================\n EASY\n========================================================= *\/<\/p>\n<p>{\n id: 5,\n type: \"phishing\",\n difficulty: \"Easy\",\n senderName: \"Microsoft Account Team\",\n senderEmail: \"account-team@microsoft-security-check.com\",\n subject: \"Your password expires today\",\n date: \"3 Oct\",\n time: \"09:42\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>Your Microsoft account password is due to expire today.<\/p>\n<p>\n If you do not confirm your password, your account may be disabled.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/microsoft-security-check.example\/account\"\n title=\"https:\/\/microsoft-security-check.example\/account\">\n Keep my password active\n <\/a>\n <\/p>\n<p> `,\n clues: [\n \"The sender address does not use an official Microsoft domain.\",\n \"The email threatens account loss.\",\n \"It asks you to act immediately.\",\n \"The link should be checked carefully before being opened.\"\n ]\n},<\/p>\n<p>{\n id: 6,\n type: \"legitimate\",\n difficulty: \"Easy\",\n senderName: \"Google Classroom\",\n senderEmail: \"notifications@classroom.google.com\",\n subject: \"New assignment posted\",\n date: \"3 Oct\",\n time: \"10:05\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>A new Computing assignment has been posted in Google Classroom.<\/p>\n<p>\n Your teacher has added a new task called\n <strong>Introduction to Cyber Security<\/strong>.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/classroom.google.com\/\"\n title=\"https:\/\/classroom.google.com\/\">\n View assignment in Google Classroom\n <\/a>\n <\/p>\n<p> `,\n clues: [\n \"The sender uses a Google Classroom domain.\",\n \"The message relates to a task students would expect to receive.\",\n \"The link is relevant to the message.\",\n \"There is no unusual request for personal or financial information.\"\n ]\n},<\/p>\n<p>{\n id: 7,\n type: \"phishing\",\n difficulty: \"Easy\",\n senderName: \"IT Support\",\n senderEmail: \"itsupport@beechencliff-helpdesk.net\",\n subject: \"Important account verification\",\n date: \"3 Oct\",\n time: \"10:26\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>This is an important message from the school IT team.<\/p>\n<p>\n We are updating our systems and require you to confirm your\n username and password.\n <\/p>\n<p>\n Please reply to this email with your current password.\n <\/p>\n<p>No link is required.<\/p>\n<p> `,\n clues: [\n \"A genuine IT team should never ask you to send your password by email.\",\n \"The sender address is not the school's official domain.\",\n \"This phishing email deliberately contains no link.\",\n \"The request for a password is the key warning sign.\"\n ]\n},<\/p>\n<p>{\n id: 8,\n type: \"legitimate\",\n difficulty: \"Easy\",\n senderName: \"Bath Library\",\n senderEmail: \"library@bathnes.gov.uk\",\n subject: \"Your library books are due soon\",\n date: \"3 Oct\",\n time: \"10:51\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>This is a reminder that two books currently borrowed from Bath Library are due soon.<\/p>\n<p>\n You can view your loans and renewal options through the library website.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/www.bathnes.gov.uk\/\"\n title=\"https:\/\/www.bathnes.gov.uk\/\">\n Visit the library website\n <\/a>\n <\/p>\n<p> `,\n clues: [\n \"The sender uses a government organisation domain.\",\n \"The message relates to a normal library service.\",\n \"The link is relevant to checking library loans.\",\n \"There is no pressure to provide passwords or financial information.\"\n ]\n},<\/p>\n<p>\/* =========================================================\n DEVELOPING\n========================================================= *\/<\/p>\n<p>{\n id: 9,\n type: \"phishing\",\n difficulty: \"Developing\",\n senderName: \"School Finance Office\",\n senderEmail: \"finance@beechencliff-schoolaccounts.com\",\n subject: \"Outstanding payment\",\n date: \"3 Oct\",\n time: \"11:12\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>Our records indicate that an outstanding payment is associated with your account.<\/p>\n<p>\n Please reply with the name of the person responsible for the payment\n and their bank account number.\n <\/p>\n<p>Thank you for dealing with this promptly.<\/p>\n<p> `,\n clues: [\n \"The sender address looks school-related but is not the official school domain.\",\n \"The email requests banking information.\",\n \"There is no explanation of what payment is supposedly outstanding.\",\n \"The request is unusual for a school email.\"\n ]\n},<\/p>\n<p>{\n id: 10,\n type: \"legitimate\",\n difficulty: \"Developing\",\n senderName: \"Microsoft 365\",\n senderEmail: \"microsoft-noreply@microsoft.com\",\n subject: \"Your monthly account activity\",\n date: \"3 Oct\",\n time: \"11:34\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>Here is your monthly Microsoft account activity summary.<\/p>\n<p>\n You can review recent sign-in activity and security information\n from your Microsoft account.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/account.microsoft.com\/\"\n title=\"https:\/\/account.microsoft.com\/\">\n Review account activity\n <\/a>\n <\/p>\n<p> `,\n clues: [\n \"The sender address uses the Microsoft domain.\",\n \"The email provides information rather than demanding immediate action.\",\n \"The link is related to account security.\",\n \"Students should still check links rather than trusting branding alone.\"\n ]\n},<\/p>\n<p>{\n id: 11,\n type: \"phishing\",\n difficulty: \"Developing\",\n senderName: \"Head of Year\",\n senderEmail: \"headyear@beechencliff-school.org\",\n subject: \"Can you help with something?\",\n date: \"3 Oct\",\n time: \"12:03\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>Hello,<\/p>\n<p>\n I am currently dealing with an urgent matter and need you to\n purchase three online gift cards for me.\n <\/p>\n<p>\n Please reply once they have been purchased and I will explain\n how they should be sent.\n <\/p>\n<p>Thank you.<\/p>\n<p> `,\n clues: [\n \"The request is unusual for a teacher or head of year.\",\n \"Gift cards are commonly used in impersonation scams.\",\n \"The sender address is similar to, but not the same as, the school's official domain.\",\n \"The email tries to make the request seem urgent and private.\"\n ]\n},<\/p>\n<p>{\n id: 12,\n type: \"legitimate\",\n difficulty: \"Developing\",\n senderName: \"BBC Bitesize\",\n senderEmail: \"updates@bbc.co.uk\",\n subject: \"New computing revision resources\",\n date: \"3 Oct\",\n time: \"12:25\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>We've added some new computing resources to BBC Bitesize.<\/p>\n<p>\n You can explore revision material covering algorithms,\n networks and cyber security.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/www.bbc.co.uk\/bitesize\/\"\n title=\"https:\/\/www.bbc.co.uk\/bitesize\/\">\n Explore computing resources\n <\/a>\n <\/p>\n<p> `,\n clues: [\n \"The sender uses the BBC domain.\",\n \"The content is appropriate for a computing student.\",\n \"The link is relevant to the subject.\",\n \"There is no request for passwords, money or personal information.\"\n ]\n},<\/p>\n<p>\/* =========================================================\n INTERMEDIATE\n========================================================= *\/<\/p>\n<p>{\n id: 13,\n type: \"phishing\",\n difficulty: \"Intermediate\",\n senderName: \"NatWest Online Banking\",\n senderEmail: \"onlinebanking@natwest-secure.co.uk\",\n subject: \"New security information\",\n date: \"3 Oct\",\n time: \"13:04\",\n recipient: \"student@example.com\",\n brand: \"natwest\",\n body: `<\/p>\n<p>We are making some changes to our online banking security procedures.<\/p>\n<p>\n To make sure your account remains fully protected,\n please reply with your full name, date of birth and postcode.\n <\/p>\n<p>\n This request does not require you to click a link.\n <\/p>\n<p> `,\n clues: [\n \"The sender address contains the word NatWest but is not an official NatWest domain.\",\n \"The message asks for several pieces of personal information.\",\n \"A bank would have much of this information already.\",\n \"The absence of a link does not make the email safe.\"\n ]\n},<\/p>\n<p>{\n id: 14,\n type: \"legitimate\",\n difficulty: \"Intermediate\",\n senderName: \"Beechen Cliff Computing\",\n senderEmail: \"computing@beechencliff.org.uk\",\n subject: \"GCSE Computing revision resources\",\n date: \"3 Oct\",\n time: \"13:21\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>\n We have added some additional revision resources for Computing.\n <\/p>\n<p>\n These include practice questions, logic gate activities\n and programming exercises.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/www.beechencliff.org.uk\/\"\n title=\"https:\/\/www.beechencliff.org.uk\/\">\n Open the Computing resources\n <\/a>\n <\/p>\n<p>\n The resources are hosted on the school's normal learning platform.\n <\/p>\n<p> `,\n clues: [\n \"The sender uses the official school domain.\",\n \"The content is relevant to the recipient.\",\n \"The link is expected in this context.\",\n \"The message does not ask for sensitive information.\"\n ]\n},<\/p>\n<p>{\n id: 15,\n type: \"phishing\",\n difficulty: \"Intermediate\",\n senderName: \"School Accounts\",\n senderEmail: \"accounts@beechencliff.org.uk\",\n subject: \"Updated payment details\",\n date: \"3 Oct\",\n time: \"13:48\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>\n Please note that our bank details have changed.\n <\/p>\n<p>\n Any future payments should be sent to the new account details\n shown below.\n <\/p>\n<div class=\"warning-box\">\n Account name: Beechen Cliff Services<br \/>\n Sort code: 20-45-78<br \/>\n Account number: 12345678\n <\/div>\n<p>\n Please forward this information to anyone who makes payments\n on behalf of your family.\n <\/p>\n<p> `,\n clues: [\n \"The sender address alone should not be treated as proof that an email is genuine.\",\n \"Changing bank details by email is a high-risk request.\",\n \"The message provides new financial information without prior context.\",\n \"Important payment changes should be independently verified.\"\n ]\n},<\/p>\n<p>{\n id: 16,\n type: \"legitimate\",\n difficulty: \"Intermediate\",\n senderName: \"ParentPay\",\n senderEmail: \"notifications@parentpay.com\",\n subject: \"Payment confirmation\",\n date: \"3 Oct\",\n time: \"14:06\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>This is a confirmation that a recent school payment has been processed.<\/p>\n<p>\n You can sign in to your ParentPay account to view the transaction.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/www.parentpay.com\/\"\n title=\"https:\/\/www.parentpay.com\/\">\n View your ParentPay account\n <\/a>\n <\/p>\n<p> `,\n clues: [\n \"The message relates to a payment service that families may use.\",\n \"The sender uses the ParentPay domain.\",\n \"The link is relevant to checking a payment.\",\n \"It does not ask the recipient to send payment details by email.\"\n ]\n},<\/p>\n<p>\/* =========================================================\n DIFFICULT\n========================================================= *\/<\/p>\n<p>{\n id: 17,\n type: \"phishing\",\n difficulty: \"Difficult\",\n senderName: \"Google Workspace Admin\",\n senderEmail: \"workspace-admin@googlemail-security.com\",\n subject: \"Account security review\",\n date: \"3 Oct\",\n time: \"14:31\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>\n As part of a routine security review, your Google Workspace account\n requires confirmation.\n <\/p>\n<p>\n Please sign in using the normal school login page to prevent\n interruption to your account.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/googlemail-security.example\/account\"\n title=\"https:\/\/googlemail-security.example\/account\">\n Continue to account review\n <\/a>\n <\/p>\n<p>\n If you have already completed this process, no further action is required.\n <\/p>\n<p> `,\n clues: [\n \"The email uses professional-looking language.\",\n \"The sender address is not an official Google domain.\",\n \"The message is designed to look like a routine security process.\",\n \"The link should be checked carefully rather than trusted because it looks familiar.\"\n ]\n},<\/p>\n<p>{\n id: 18,\n type: \"legitimate\",\n difficulty: \"Difficult\",\n senderName: \"Google Account\",\n senderEmail: \"no-reply@accounts.google.com\",\n subject: \"Security alert\",\n date: \"3 Oct\",\n time: \"14:47\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>\n We noticed a new sign-in to your Google Account.\n <\/p>\n<p>\n If this was you, no action is needed.\n <\/p>\n<p>\n If you do not recognise this activity, you can review your\n account security using the link below.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/myaccount.google.com\/security\"\n title=\"https:\/\/myaccount.google.com\/security\">\n Review recent security activity\n <\/a>\n <\/p>\n<p> `,\n clues: [\n \"The sender uses the official Google account domain.\",\n \"The email does not immediately threaten to close the account.\",\n \"It gives the recipient a choice about whether action is needed.\",\n \"The security link is relevant to the warning.\"\n ]\n},<\/p>\n<p>{\n id: 19,\n type: \"phishing\",\n difficulty: \"Difficult\",\n senderName: \"Amazon\",\n senderEmail: \"order-update@amazon-ordersupport.com\",\n subject: \"Your recent order\",\n date: \"3 Oct\",\n time: \"15:10\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>\n Thank you for your recent order.\n <\/p>\n<p>\n Unfortunately, we were unable to process the payment method\n associated with your order.\n <\/p>\n<p>\n Please review your payment information to prevent the order\n from being cancelled.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/amazon-ordersupport.example\/payment\"\n title=\"https:\/\/amazon-ordersupport.example\/payment\">\n Review payment information\n <\/a>\n <\/p>\n<p> `,\n clues: [\n \"The sender address contains Amazon but is not an Amazon domain.\",\n \"The message creates concern about an order being cancelled.\",\n \"The recipient should check whether they actually placed an order.\",\n \"Payment information should never be entered through an unexpected email link.\"\n ]\n},<\/p>\n<p>{\n id: 20,\n type: \"legitimate\",\n difficulty: \"Difficult\",\n senderName: \"Amazon.co.uk\",\n senderEmail: \"shipment-tracking@amazon.co.uk\",\n subject: \"Your order has been dispatched\",\n date: \"3 Oct\",\n time: \"15:29\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>\n Your order has been dispatched and is now on its way.\n <\/p>\n<p>\n You can check the delivery progress from your Amazon account.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/www.amazon.co.uk\/\"\n title=\"https:\/\/www.amazon.co.uk\/\">\n Track your order\n <\/a>\n <\/p>\n<p>\n You can also check the order directly by signing in to Amazon\n using your usual method.\n <\/p>\n<p> `,\n clues: [\n \"The sender uses an Amazon domain.\",\n \"The message contains normal delivery information.\",\n \"The link is relevant to an existing order.\",\n \"It also suggests using the normal website rather than demanding information.\"\n ]\n},<\/p>\n<p>\/* =========================================================\n EXPERT\n========================================================= *\/<\/p>\n<p>{\n id: 21,\n type: \"phishing\",\n difficulty: \"Expert\",\n senderName: \"Beechen Cliff IT Services\",\n senderEmail: \"itservices@beechencliff-support.co.uk\",\n subject: \"Microsoft account migration\",\n date: \"3 Oct\",\n time: \"15:51\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>\n As part of an upcoming Microsoft account migration,\n some users are being asked to confirm their current account details.\n <\/p>\n<p>\n Please reply with your school username and the email address\n you normally use to access Microsoft 365.\n <\/p>\n<p>\n This request is part of the preparation process and does not\n require you to click a link.\n <\/p>\n<p> `,\n clues: [\n \"The sender address looks convincing but does not use the official school domain.\",\n \"The email uses realistic technical language.\",\n \"It asks for account information that should not normally be collected by reply email.\",\n \"The lack of a link is deliberately misleading.\"\n ]\n},<\/p>\n<p>{\n id: 22,\n type: \"legitimate\",\n difficulty: \"Expert\",\n senderName: \"Beechen Cliff School\",\n senderEmail: \"office@beechencliff.org.uk\",\n subject: \"Emergency contact details\",\n date: \"3 Oct\",\n time: \"16:07\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>\n We are carrying out our routine annual check of emergency contact\n information held by the school.\n <\/p>\n<p>\n Please check the details currently held for your family using\n the school's normal parent portal.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/www.beechencliff.org.uk\/\"\n title=\"https:\/\/www.beechencliff.org.uk\/\">\n Open the parent portal\n <\/a>\n <\/p>\n<p>\n If your details are already correct, no changes are required.\n <\/p>\n<p> `,\n clues: [\n \"The sender uses the official school domain.\",\n \"The request has a plausible school-related reason.\",\n \"It does not ask the recipient to send sensitive information by email.\",\n \"The link takes the user to the normal parent portal rather than asking for details in the email.\"\n ]\n},<\/p>\n<p>{\n id: 23,\n type: \"phishing\",\n difficulty: \"Expert\",\n senderName: \"Finance Department\",\n senderEmail: \"finance@beechencliff.org.uk\",\n subject: \"Invoice query\",\n date: \"3 Oct\",\n time: \"16:22\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>\n Hello,\n <\/p>\n<p>\n We are checking an invoice that appears to have been submitted\n against your account.\n <\/p>\n<p>\n We believe there may be an error in the payment information.\n Please reply with the bank account details that should be used\n for the refund.\n <\/p>\n<p>\n No action is required if you are not expecting a refund.\n <\/p>\n<p> `,\n clues: [\n \"The sender address appears to be an official school address.\",\n \"The request for bank details is still unusual and risky.\",\n \"The recipient has no reason to expect an invoice or refund.\",\n \"A financial request should be independently verified even when the sender address looks genuine.\"\n ]\n},<\/p>\n<p>{\n id: 24,\n type: \"legitimate\",\n difficulty: \"Expert\",\n senderName: \"Beechen Cliff School\",\n senderEmail: \"trips@beechencliff.org.uk\",\n subject: \"Christmas trip information\",\n date: \"3 Oct\",\n time: \"16:45\",\n recipient: \"student@example.com\",\n body: `<\/p>\n<p>\n Information about the upcoming Christmas trip is now available\n through the school's normal communication system.\n <\/p>\n<p>\n The information includes the departure time, clothing requirements\n and arrangements for the day.\n <\/p>\n<p>\n <a\n class=\"fake-link\"\n href=\"https:\/\/www.beechencliff.org.uk\/\"\n title=\"https:\/\/www.beechencliff.org.uk\/\">\n View Christmas trip information\n <\/a>\n <\/p>\n<p>\n Please contact the school office if any of the information\n appears to be incorrect.\n <\/p>\n<p> `,\n clues: [\n \"The sender uses the official school domain.\",\n \"The message concerns a plausible school activity.\",\n \"The link is relevant to the information being provided.\",\n \"The email provides a normal alternative method of contacting the school.\"\n ]\n}<\/p>\n<p>];<\/p>\n<p>\/* =========================================================\n STATE\n========================================================= *\/<\/p>\n<p>let state = {\n folder: \"inbox\",\n selectedId: null,\n statuses: {},\n score: 0,\n attempts: 0,\n inboxOrder: []\n};<\/p>\n<p>\/* =========================================================\n INITIALISE\n========================================================= *\/<\/p>\n<p>function initialise() {<\/p>\n<p> state.statuses = {};<\/p>\n<p> emails.forEach(email => {\n state.statuses[email.id] = \"inbox\";\n });<\/p>\n<p> state.inboxOrder =\n shuffleArray(\n emails.map(email => email.id)\n );<\/p>\n<p> state.folder = \"inbox\";<\/p>\n<p> state.selectedId =\n state.inboxOrder[0];<\/p>\n<p> state.score = 0;\n state.attempts = 0;<\/p>\n<p> document\n .getElementById(\"certificateScreen\")\n .classList.remove(\"show\");<\/p>\n<p> document\n .getElementById(\"searchBox\")\n .value = \"\";<\/p>\n<p> renderEverything();\n}<\/p>\n<p>\/* =========================================================\n FOLDER NAVIGATION\n========================================================= *\/<\/p>\n<p>function openFolder(folder) {<\/p>\n<p> state.folder = folder;<\/p>\n<p> const available =\n getEmailsForFolder(folder);<\/p>\n<p> if (available.length > 0) {<\/p>\n<p> state.selectedId =\n available[0].id;<\/p>\n<p> } else {<\/p>\n<p> state.selectedId = null;<\/p>\n<p> }<\/p>\n<p> updateFolderButtons();<\/p>\n<p> renderEverything();\n}<\/p>\n<p>\/* =========================================================\n UPDATE FOLDER BUTTONS\n========================================================= *\/<\/p>\n<p>function updateFolderButtons() {<\/p>\n<p> document\n .querySelectorAll(\".folder-button\")\n .forEach(button => {\n button.classList.remove(\"active\");\n });<\/p>\n<p> const button =\n document.getElementById(\n \"folder-\" + state.folder\n );<\/p>\n<p> if (button) {\n button.classList.add(\"active\");\n }\n}<\/p>\n<p>\/* =========================================================\n GET EMAILS FOR FOLDER\n========================================================= *\/<\/p>\n<p>function getEmailsForFolder(folder) {<\/p>\n<p> if (folder === \"inbox\") {<\/p>\n<p> return state.inboxOrder\n .map(id =>\n emails.find(\n email => email.id === id\n )\n )\n .filter(email =>\n email &&\n state.statuses[email.id] === \"inbox\"\n );<\/p>\n<p> }<\/p>\n<p> return emails.filter(email => {<\/p>\n<p> return state.statuses[email.id] === folder;<\/p>\n<p> });\n}<\/p>\n<p>\/* =========================================================\n RENDER EVERYTHING\n========================================================= *\/<\/p>\n<p>function renderEverything() {<\/p>\n<p> updateCounts();\n updateProgress();\n updateFolderButtons();\n renderFolderHeading();\n renderMailList();\n renderReader();\n updateTopScore();<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n UPDATE COUNTS\n========================================================= *\/<\/p>\n<p>function updateCounts() {<\/p>\n<p> const inbox =\n emails.filter(\n e => state.statuses[e.id] === \"inbox\"\n ).length;<\/p>\n<p> const phishing =\n emails.filter(\n e => state.statuses[e.id] === \"phishing\"\n ).length;<\/p>\n<p> const safe =\n emails.filter(\n e => state.statuses[e.id] === \"safe\"\n ).length;<\/p>\n<p> document.getElementById(\"inboxCount\")\n .textContent = inbox;<\/p>\n<p> document.getElementById(\"phishingCount\")\n .textContent = phishing;<\/p>\n<p> document.getElementById(\"safeCount\")\n .textContent = safe;\n}<\/p>\n<p>\/* =========================================================\n UPDATE PROGRESS\n========================================================= *\/<\/p>\n<p>function updateProgress() {<\/p>\n<p> const total =\n emails.length;<\/p>\n<p> const percentage =\n Math.round(\n (state.score \/ total) * 100\n );<\/p>\n<p> document.getElementById(\"progressFill\")\n .style.width =\n percentage + \"%\";<\/p>\n<p> document.getElementById(\"progressText\")\n .textContent =\n state.score +\n \" of \" +\n total +\n \" correct\";\n}<\/p>\n<p>\/* =========================================================\n TOP SCORE\n========================================================= *\/<\/p>\n<p>function updateTopScore() {<\/p>\n<p> document.getElementById(\"topScore\")\n .textContent =\n state.score +\n \" \/ \" +\n emails.length;\n}<\/p>\n<p>\/* =========================================================\n FOLDER HEADING\n========================================================= *\/<\/p>\n<p>function renderFolderHeading() {<\/p>\n<p> const titles = {<\/p>\n<p> inbox: \"Inbox\",\n phishing: \"Phishing\",\n safe: \"Safe\"<\/p>\n<p> };<\/p>\n<p> const subtitles = {<\/p>\n<p> inbox:\n \"Messages waiting to be classified\",<\/p>\n<p> phishing:\n \"Emails correctly identified as phishing\",<\/p>\n<p> safe:\n \"Emails correctly identified as legitimate\"<\/p>\n<p> };<\/p>\n<p> document.getElementById(\"folderTitle\")\n .textContent =\n titles[state.folder];<\/p>\n<p> document.getElementById(\"folderSubtitle\")\n .textContent =\n subtitles[state.folder];<\/p>\n<p> document.getElementById(\"readerToolbar\")\n .textContent =\n titles[state.folder];\n}<\/p>\n<p>\/* =========================================================\n MAIL LIST\n========================================================= *\/<\/p>\n<p>function renderMailList() {<\/p>\n<p> const list =\n document.getElementById(\"mailList\");<\/p>\n<p> const search =\n document\n .getElementById(\"searchBox\")\n .value\n .toLowerCase()\n .trim();<\/p>\n<p> let folderEmails =\n getEmailsForFolder(state.folder);<\/p>\n<p> if (search) {<\/p>\n<p> folderEmails =\n folderEmails.filter(email => {<\/p>\n<p> return (<\/p>\n<p> email.senderName\n .toLowerCase()\n .includes(search)<\/p>\n<p> ||<\/p>\n<p> email.senderEmail\n .toLowerCase()\n .includes(search)<\/p>\n<p> ||<\/p>\n<p> email.subject\n .toLowerCase()\n .includes(search)<\/p>\n<p> ||<\/p>\n<p> (\n email.recipient &&\n email.recipient\n .toLowerCase()\n .includes(search)\n )<\/p>\n<p> );<\/p>\n<p> });<\/p>\n<p> }<\/p>\n<p> if (folderEmails.length === 0) {<\/p>\n<p> list.innerHTML = `<\/p>\n<div class=\"empty-folder\">\n<h3>\n<p> ${\n state.folder === \"inbox\"\n ? \"Inbox is empty\"\n : \"No messages here yet\"\n }<\/p>\n<\/h3>\n<p> ${\n state.folder === \"inbox\"\n ? \"Keep investigating the messages.\"\n : \"Correctly classified messages will appear here.\"\n }<\/p>\n<\/p><\/div>\n<p> `;<\/p>\n<p> return;\n }<\/p>\n<p> list.innerHTML =\n folderEmails.map(email => {<\/p>\n<p> const selected =\n email.id === state.selectedId\n ? \"selected\"\n : \"\";<\/p>\n<p> const initial =\n email.senderName\n .charAt(0)\n .toUpperCase();<\/p>\n<p> const snippet =\n stripHTML(email.body)\n .substring(0, 85);<\/p>\n<p> return `<\/p>\n<div\n class=\"mail-row ${selected}\"\n onclick=\"openEmail(${email.id})\"><\/p>\n<div class=\"mail-avatar\">\n ${initial}\n <\/div>\n<div class=\"mail-content\">\n<div class=\"sender\">\n ${escapeHTML(\n email.senderName\n )}\n <\/div>\n<div class=\"sender-email\">\n ${escapeHTML(\n email.senderEmail\n )}\n <\/div>\n<div class=\"subject\">\n ${escapeHTML(\n email.subject\n )}\n <\/div>\n<div class=\"snippet\">\n ${escapeHTML(\n snippet\n )}\n <\/div>\n<p> <span class=\"difficulty\">\n ${email.difficulty}\n <\/span><\/p><\/div>\n<div class=\"mail-date\">\n ${email.date}\n <\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> }).join(\"\");\n}<\/p>\n<p>\/* =========================================================\n OPEN EMAIL\n========================================================= *\/<\/p>\n<p>function openEmail(id) {<\/p>\n<p> state.selectedId = id;<\/p>\n<p> renderMailList();\n renderReader();\n}<\/p>\n<p>\/* =========================================================\n RENDER READER\n========================================================= *\/<\/p>\n<p>function renderReader() {<\/p>\n<p> const reader =\n document.getElementById(\n \"readerContent\"\n );<\/p>\n<p> if (!state.selectedId) {<\/p>\n<p> reader.innerHTML = `<\/p>\n<div class=\"reader-placeholder\">\n<div>\n<h2>\n No messages\n <\/h2>\n<p>\n Select another folder to view messages.\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> return;\n }<\/p>\n<p> const email =\n emails.find(\n e => e.id === state.selectedId\n );<\/p>\n<p> if (!email) {\n return;\n }<\/p>\n<p> const status =\n state.statuses[email.id];<\/p>\n<p> let filedBanner = \"\";<\/p>\n<p> if (status === \"phishing\") {<\/p>\n<p> filedBanner = `<\/p>\n<div class=\"filed-banner phishing\">\n<p> Correctly identified as\n <strong>PHISHING<\/strong>.<\/p>\n<p> This message has been moved to the\n Phishing folder.<\/p><\/div>\n<p> `;<\/p>\n<p> }<\/p>\n<p> if (status === \"safe\") {<\/p>\n<p> filedBanner = `<\/p>\n<div class=\"filed-banner\">\n<p> Correctly identified as\n <strong>SAFE<\/strong>.<\/p>\n<p> This message has been moved to the\n Safe folder.<\/p><\/div>\n<p> `;<\/p>\n<p> }<\/p>\n<p> let brand = \"\";<\/p>\n<p> if (email.brand === \"natwest\") {<\/p>\n<p> brand = `<\/p>\n<div class=\"brand-box\">\n<div class=\"natwest-logo\">\n NatWest\n <\/div>\n<div>\n<div class=\"simulation-label\">\n Classroom simulation\n <\/div>\n<div\n style=\"\n font-size:13px;\n margin-top:4px;\n \"><\/p>\n<p> This is a fictional training email.<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> }<\/p>\n<p> let actions = \"\";<\/p>\n<p> if (status === \"inbox\") {<\/p>\n<p> actions = `<\/p>\n<div class=\"classification-area\">\n<div class=\"classification-title\">\n<p> What do you think this email is?<\/p><\/div>\n<div class=\"classification-buttons\">\n<p> <button\n class=\"classify-button phishing-button\"\n onclick=\"classifyEmail('phishing')\"><\/p>\n<p> Phishing<\/p>\n<p> <\/button><\/p>\n<p> <button\n class=\"classify-button safe-button\"\n onclick=\"classifyEmail('safe')\"><\/p>\n<p> Legitimate \/ Safe<\/p>\n<p> <\/button><\/p><\/div>\n<div\n id=\"feedback\"\n class=\"feedback\">\n <\/div>\n<div class=\"clues\">\n<h3>\n Investigator notes\n <\/h3>\n<p> ${\n email.clues\n .map(clue => `<\/p>\n<div class=\"clue\">\n ${escapeHTML(clue)}\n <\/div>\n<p> `)\n .join(\"\")\n }<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> } else {<\/p>\n<p> actions = `<\/p>\n<div class=\"classification-area\">\n<div class=\"clues\">\n<h3>\n Why this message was classified\n <\/h3>\n<p> ${\n email.clues\n .map(clue => `<\/p>\n<div class=\"clue\">\n ${escapeHTML(clue)}\n <\/div>\n<p> `)\n .join(\"\")\n }<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> }<\/p>\n<p> reader.innerHTML = `<\/p>\n<p> ${filedBanner}<\/p>\n<div class=\"email-subject\">\n<p> ${escapeHTML(\n email.subject\n )}<\/p><\/div>\n<div class=\"email-header\">\n<div class=\"large-avatar\">\n<p> ${email.senderName\n .charAt(0)\n .toUpperCase()}<\/p><\/div>\n<div class=\"email-header-details\">\n<div class=\"email-sender-name\">\n<p> ${escapeHTML(\n email.senderName\n )}<\/p><\/div>\n<div class=\"email-sender-address\">\n<p> <${escapeHTML(\n email.senderEmail\n )}><\/p><\/div>\n<p> ${\n email.recipient\n ? `<\/p>\n<div class=\"email-recipient\">\n<p> To:\n <strong>\n ${escapeHTML(\n email.recipient\n )}\n <\/strong><\/p><\/div>\n<p> `\n : \"\"\n }<\/p><\/div>\n<div class=\"email-date\">\n<p> ${email.date}<br \/>\n ${email.time}<\/p><\/div>\n<\/p><\/div>\n<p> ${brand}<\/p>\n<div class=\"email-body\">\n<p> ${email.body}<\/p><\/div>\n<p> ${actions}<\/p>\n<p> `;\n}<\/p>\n<p>\/* =========================================================\n CLASSIFY EMAIL\n========================================================= *\/<\/p>\n<p>function classifyEmail(choice) {<\/p>\n<p> const email =\n emails.find(\n e => e.id === state.selectedId\n );<\/p>\n<p> if (!email) {\n return;\n }<\/p>\n<p> if (state.statuses[email.id] !== \"inbox\") {\n return;\n }<\/p>\n<p> state.attempts++;<\/p>\n<p> const feedback =\n document.getElementById(\n \"feedback\"\n );<\/p>\n<p> const buttons =\n document.querySelectorAll(\n \".classify-button\"\n );<\/p>\n<p> const selectedType =\n choice === \"safe\"\n ? \"legitimate\"\n : \"phishing\";<\/p>\n<p> if (selectedType === email.type) {<\/p>\n<p> state.score++;<\/p>\n<p> if (selectedType === \"phishing\") {<\/p>\n<p> state.statuses[email.id] =\n \"phishing\";<\/p>\n<p> } else {<\/p>\n<p> state.statuses[email.id] =\n \"safe\";<\/p>\n<p> }<\/p>\n<p> if (feedback) {<\/p>\n<p> feedback.className =\n \"feedback correct\";<\/p>\n<p> feedback.innerHTML =\n selectedType === \"phishing\"<\/p>\n<p> ?<\/p>\n<p> `\n <strong>Correct.<\/strong>\n This is a phishing message.\n It will be moved to the Phishing folder.<\/p>\n<p><\/p>\n<p> <button\n class=\"feedback-ok\"\n onclick=\"continueAfterAnswer()\"><\/p>\n<p> OK<\/p>\n<p> <\/button>\n `<\/p>\n<p> :<\/p>\n<p> `\n <strong>Correct.<\/strong>\n This is a legitimate message.\n It will be moved to the Safe folder.<\/p>\n<p><\/p>\n<p> <button\n class=\"feedback-ok\"\n onclick=\"continueAfterAnswer()\"><\/p>\n<p> OK<\/p>\n<p> <\/button>\n `;<\/p>\n<p> }<\/p>\n<p> buttons.forEach(button => {\n button.disabled = true;\n });<\/p>\n<p> updateCounts();\n updateProgress();\n updateTopScore();<\/p>\n<p> } else {<\/p>\n<p> if (feedback) {<\/p>\n<p> feedback.className =\n \"feedback incorrect\";<\/p>\n<p> feedback.innerHTML = `<\/p>\n<p> <strong>Not quite.<\/strong><\/p>\n<p> Have another look at the sender address,\n links, urgency and information being requested.<\/p>\n<p><\/p>\n<p> <button\n class=\"feedback-ok\"\n onclick=\"closeIncorrectFeedback()\"><\/p>\n<p> OK<\/p>\n<p> <\/button><\/p>\n<p> `;<\/p>\n<p> }<\/p>\n<p> buttons.forEach(button => {\n button.disabled = true;\n });<\/p>\n<p> }<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n CONTINUE AFTER CORRECT ANSWER\n========================================================= *\/<\/p>\n<p>function continueAfterAnswer() {<\/p>\n<p> const remaining =\n getEmailsForFolder(\"inbox\");<\/p>\n<p> if (remaining.length > 0) {<\/p>\n<p> state.folder = \"inbox\";<\/p>\n<p> state.selectedId =\n remaining[0].id;<\/p>\n<p> renderEverything();<\/p>\n<p> } else {<\/p>\n<p> checkForCompletion();<\/p>\n<p> }<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n CLOSE INCORRECT FEEDBACK\n========================================================= *\/<\/p>\n<p>function closeIncorrectFeedback() {<\/p>\n<p> const feedback =\n document.getElementById(\n \"feedback\"\n );<\/p>\n<p> if (feedback) {<\/p>\n<p> feedback.className =\n \"feedback\";<\/p>\n<p> feedback.innerHTML = \"\";<\/p>\n<p> }<\/p>\n<p> const buttons =\n document.querySelectorAll(\n \".classify-button\"\n );<\/p>\n<p> buttons.forEach(button => {\n button.disabled = false;\n });<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n COMPLETION CHECK\n========================================================= *\/<\/p>\n<p>function checkForCompletion() {<\/p>\n<p> const remaining =\n getEmailsForFolder(\"inbox\");<\/p>\n<p> if (\n remaining.length === 0 &&\n state.score === emails.length\n ) {<\/p>\n<p> showCertificate();<\/p>\n<p> }<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n SHOW CERTIFICATE\n========================================================= *\/<\/p>\n<p>function showCertificate() {<\/p>\n<p> const phishingCount =\n emails.filter(\n e => e.type === \"phishing\"\n ).length;<\/p>\n<p> const safeCount =\n emails.filter(\n e => e.type === \"legitimate\"\n ).length;<\/p>\n<p> const accuracy =\n Math.round(\n (state.score \/ emails.length) * 100\n );<\/p>\n<p> const today =\n new Date();<\/p>\n<p> const formattedDate =\n today.toLocaleDateString(\n \"en-GB\",\n {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\"\n }\n );<\/p>\n<p> document.getElementById(\n \"certificateScore\"\n ).textContent =\n state.score +\n \" \/ \" +\n emails.length;<\/p>\n<p> document.getElementById(\n \"certificatePhishing\"\n ).textContent =\n phishingCount;<\/p>\n<p> document.getElementById(\n \"certificateSafe\"\n ).textContent =\n safeCount;<\/p>\n<p> document.getElementById(\n \"certificateAttempts\"\n ).textContent =\n state.attempts;<\/p>\n<p> document.getElementById(\n \"certificateAccuracy\"\n ).textContent =\n accuracy + \"%\";<\/p>\n<p> document.getElementById(\n \"certificateDate\"\n ).textContent =\n formattedDate;<\/p>\n<p> document.getElementById(\n \"certificateScreen\"\n ).classList.add(\"show\");<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n RESET\n========================================================= *\/<\/p>\n<p>function resetActivity() {<\/p>\n<p> const confirmed =\n confirm(\n \"Are you sure you want to restart the activity? Your current progress will be lost.\"\n );<\/p>\n<p> if (!confirmed) {\n return;\n }<\/p>\n<p> initialise();<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n SIDEBAR\n========================================================= *\/<\/p>\n<p>function toggleSidebar() {<\/p>\n<p> const sidebar =\n document.getElementById(\n \"sidebar\"\n );<\/p>\n<p> if (\n sidebar.style.display === \"none\"\n ) {<\/p>\n<p> sidebar.style.display =\n \"block\";<\/p>\n<p> } else {<\/p>\n<p> sidebar.style.display =\n \"none\";<\/p>\n<p> }<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n UTILITIES\n========================================================= *\/<\/p>\n<p>function stripHTML(html) {<\/p>\n<p> const div =\n document.createElement(\"div\");<\/p>\n<p> div.innerHTML = html;<\/p>\n<p> return div.textContent ||\n div.innerText ||\n \"\";<\/p>\n<p>}<\/p>\n<p>function escapeHTML(text) {<\/p>\n<p> if (!text) {\n return \"\";\n }<\/p>\n<p> return text\n .replace(\/&\/g, \"&\")\n .replace(\/<\/g, \"<\")\n .replace(\/>\/g, \">\")\n .replace(\/\"\/g, \""\")\n .replace(\/'\/g, \"'\");<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n RANDOMISE INBOX\n========================================================= *\/<\/p>\n<p>function shuffleArray(array) {<\/p>\n<p> const shuffled =\n [...array];<\/p>\n<p> for (\n let i = shuffled.length - 1;\n i > 0;\n i--\n ) {<\/p>\n<p> const j =\n Math.floor(\n Math.random() * (i + 1)\n );<\/p>\n<p> [\n shuffled[i],\n shuffled[j]\n ] = [\n shuffled[j],\n shuffled[i]\n ];<\/p>\n<p> }<\/p>\n<p> return shuffled;\n}<\/p>\n<p>\/* =========================================================\n START\n========================================================= *\/<\/p>\n<p>initialise();<\/p>\n<p><\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Phishing Detective = Mail Detective Search 0 \/ 24 correct Folders IN Inbox 24 ! Phishing 0 OK Safe 0 Activity progress 0 of 24 correct Restart Activity Inbox Messages waiting to be classified Mail Select an email Choose a message from the inbox to investigate it. 100% COMPLETE Certificate of Achievement PHISHING DETECTIVE Well […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-649","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/comments?post=649"}],"version-history":[{"count":1,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/649\/revisions"}],"predecessor-version":[{"id":651,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/649\/revisions\/651"}],"wp:attachment":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/media?parent=649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}