I recently faced an interesting challenge: how do you turn a static security awareness infographic into an engaging, trackable training exercise that records who participated and what they found, the solution combined image mapping, JavaScript interactivity, IIS logging, and PowerShell automation to create a comprehensive tracking system.
The Challenge
I had a security infographic showing an office scene with 9 hidden security threats scattered throughout. The goal was to make it interactive so users could click on threats to learn about them, while also tracking their progress and discouraging users from simply hunting for hyperlinks to find the answers.
Visuals of the website
This is the main website with clickable parts of the image, on the image are security threats and decoys, this mean people cannot just look for clickable links as the goal is get the security threats and not the decoys - this is the image that has a image hyperlink map outlined on top for the clickable regions:
Building the Interactive Image Map
The first step was creating clickable hotspots on the image. I used an online image mapping tool (image-map.net) to draw rectangles and circles over each security threat and several decoy objects in the office scene.
The initial image map had traditional href links which would show the destination URL on hover, giving away the answers. I needed to remove these while keeping the areas clickable. The solution was to remove the href attributes entirely and use custom data attributes instead:
<map name="image-map">
<area alt="" title="" data-risk="datatransfer"
coords="997,217,45" shape="circle" style="cursor: pointer;">
<area alt="" title="" data-risk="passwordpaper"
coords="721,466,737,491" shape="rect" style="cursor: pointer;">
<area alt="" title="" data-risk="allsecure"
coords="251,279,313,334" shape="rect" style="cursor: pointer;">
<!-- More hotspots... -->
</map>
By completely removing the href attributes (not even using javascript:void(0), which still shows in the browser status bar), users couldn't see where the clickable areas were by hovering. The data-risk attribute stores the threat type for JavaScript to process, while maintaining clean hotspots with no visible URLs. This meant users had to genuinely search the image for security issues rather than hunting for hyperlinks.
JavaScript Takes Over
When a user clicks on a hotspot, JavaScript intercepts the click and determines whether they found a real threat or clicked on a decoy:
area.addEventListener('click', function(e) {
e.preventDefault();
const riskType = this.getAttribute('data-risk');
const coords = this.getAttribute('coords');
const shape = this.getAttribute('shape');
const clickPos = calculateClickPosition(coords, shape);
if (riskType === 'allsecure') {
// Decoy - show red cross
addClickIndicator(clickPos.x, clickPos.y, 'red-cross.PNG');
updateDecoyCounter();
showNotSecurePopup();
} else {
// Real threat - show green tick
addClickIndicator(clickPos.x, clickPos.y, 'green-tick.PNG');
updateThreatCounter();
showSecurityRiskPopup(riskType);
}
});
Visual Feedback: Ticks and Crosses
The script places visual indicators directly on the image where users click. This provides immediate feedback and helps users track what they've already found:
function addClickIndicator(x, y, iconSrc) {
const wrapper = document.getElementById('image-wrapper');
const img = document.getElementById('main-image');
const indicator = document.createElement('img');
indicator.src = iconSrc;
indicator.className = 'click-indicator';
// Scale coordinates to match displayed image size
const scaleX = imgRect.width / img.naturalWidth;
const scaleY = imgRect.height / img.naturalHeight;
const scaledX = x * scaleX;
const scaledY = y * scaleY;
indicator.style.left = (scaledX - 20) + 'px';
indicator.style.top = (scaledY - 20) + 'px';
wrapper.appendChild(indicator);
}
Green ticks appear when users find genuine security threats, while red crosses mark decoy clicks. This creates a visual record of their progress right on the image itself.
Tracking Progress with Counters
At the top of the page, I added two counters to gamify the experience:
<div class="counters-container">
<div class="counter-display threats-counter">
Security Threats Found: <span id="threat-counter">0</span>/9
</div>
<div class="counter-display decoys-counter">
Decoys Found: <span id="decoy-counter">0</span>/5
</div>
</div>
The green counter increments each time a unique threat is found, while the red counter tracks decoy clicks. This encourages users to find all 9 threats while minimizing incorrect guesses.
Hosting on IIS with Windows Authentication
I hosted the site on an IIS server with Windows Authentication enabled. This was crucial because it meant every request would include the user's domain credentials, allowing me to track who participated without requiring any login forms or additional authentication steps.
When a user clicks on a threat, the JavaScript requests the corresponding PNG file from the server:
function showSecurityRiskPopup(riskType) {
const imageSrc = popupContent[riskType]; // e.g., 'popup-datatransfer.PNG'
content.innerHTML = `
<img src="green-tick.PNG" alt="Correct">
<img src="${imageSrc}" alt="Security Risk">
<button onclick="closePopup()">Continue</button>
`;
}
Each image request gets logged in IIS, capturing:
- The username (via Windows Authentication)
- Which threat popup they viewed
- Whether they saw the green tick or red cross
- Timestamp of the interaction
- Client IP address
A typical IIS log entry looks like this:
2025-10-08 11:11:09 10.242.8.164 GET /secspot/popup-datatransfer.PNG - 443 BEAR\Lee 10.32.133.269 Mozilla/5.0... 200 0 0 139
Analyzing the Data with PowerShell
To turn these raw IIS logs into meaningful insights, I created a PowerShell script that analyzes the last seven days of logs:
# Get log files from last 7 days
$DateThreshold = (Get-Date).AddDays(-7)
$LogFiles = Get-ChildItem -Path "\\server\c$\inetpub\logs\LogFiles\W3SVC1" -Filter "*.log" |
Where-Object { $_.LastWriteTime -ge $DateThreshold }
# Process each log file
foreach ($LogFile in $LogFiles) {
$Content = Get-Content -Path $LogFile.FullName
foreach ($Line in $Content) {
if ($Line -match "secspot") {
$Fields = $Line -split '\s+'
$Username = $Fields[7].Split('\')[-1]
$UriStem = $Fields[4]
# Track which threats this user found
if ($UriStem -match "popup-([^\.]+)") {
$PopupType = $Matches[1]
# Record this threat for this user
}
}
}
}
The script creates a comprehensive report showing:
[PSCustomObject]@{
Username = $Username
ClientIP = $ClientIP
FirstAccess = "$Date $Time"
LastAccess = "$Date $Time"
TotalRequests = 0
PageViews = 0
ThreatsFound = 0
ThreatsDetails = ""
StatusImages = ""
}
The output displays each user's activity:
The script also exports all this data to a CSV file for further analysis:
$SortedUsers | Select-Object Username, ClientIP, FirstAccess, LastAccess,
TotalRequests, PageViews, ThreatsFound, ThreatsDetails, StatusImages |
Export-Csv -Path "SecSpot_Usage_Report.csv" -NoTypeInformation
This CSV includes the name of each threat found, first and last interaction timestamps, and whether they triggered the green tick or red cross indicators.
Tracking System
By combining these elements, I created a comprehensive tracking solution:
- Image mapping creates invisible clickable zones that don't give away answers
- JavaScript provides immediate visual feedback with ticks and crosses on the image
- Windows Authentication seamlessly captures user identity without extra logins
- IIS logging records every interaction with timestamp and user details
- PowerShell analysis transforms raw logs into actionable reports and CSV exports
The system tracks:
- Who participated and when
- Which threats each user found
- How many decoys they clicked
- Their first and last interaction times
- Complete interaction history
Heat map Tracking (Hotjar)
To gain even deeper insights into user behavior, I integrated Hotjar tracking into the page, remember to update the <id-here> in bold with your actual ID:
<!-- Hotjar Tracking Code -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:<id-here>,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
This additional layer reveals fascinating insights like where users were trying to click (even on non-interactive areas), how long they spent searching, and which threats were easiest or hardest to find.
Conclusion
This is how you can turn a security infographic into a trackable, engaging training exercise. By combining web technologies, server authentication, and log analysis, I transformed a simple image into a comprehensive security awareness tool that not only teaches but also measures engagement and understanding.
The best part? Users don't realize they're being tracked (in a good way). They're just focused on finding security threats in the office scene, clicking away, learning from the popup cards, and watching their score increase. Meanwhile, I can see exactly who participated, what they learned, and where they struggled—all without any manual data entry or surveys.
Whether you're running security awareness training, creating interactive educational content, or building any kind of trackable exercise, this approach demonstrates how standard web technologies can create surprisingly sophisticated tracking and reporting systems.