SpotTheDifference.com cheat

Highlights the solution for the games in SpotTheDifference.com

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         SpotTheDifference.com cheat
// @author       Denilson Sá 
// @namespace    http://denilson.sa.nom.br/
// @version      1.0
// @description  Highlights the solution for the games in SpotTheDifference.com
// @grant        none
// @license      Public domain
// @include http://www.spotthedifference.com/*
// ==/UserScript==

(function() {
	var head=document.getElementsByTagName('head')[0];
	if( head ) {
		var styletext = '';

		// Photo/Tulip/Buttons/Ladybirds/Books game
		var maps = document.getElementsByTagName('map');
		if( maps.length > 0 )
		{
			for(var mapcounter = 0, map; map = maps[mapcounter]; mapcounter++)
			{
				var framenumber = 0;
				if     ( map.getAttribute('name') == 'map1' ) framenumber = 0;
				else if( map.getAttribute('name') == 'map2' ) framenumber = 1;
				else continue;

				var frame = document.getElementById('frame'+framenumber);
				for(var i = 0, area; area = map.childNodes[i]; i++)
				{
					if( area.nodeType == 1 && area.nodeName.toLowerCase() == 'area' )
					{
						var coords = area.getAttribute('coords');
						if( coords != '0,0,280,360' )
						{
							coords = coords.split(','); // left-x, top-y, right-x, bottom-y
							coords[2] -= coords[0];
							coords[3] -= coords[1];
							var elem = document.createElement('div');

							// Commented out because in Firefox the click does not pass
							// through this element.
							/*
							elem.setAttribute('style',
								'position: absolute; '+
								'left: '  +coords[0]+'px; '+
								'top: '   +coords[1]+'px; '+
								'width: ' +coords[2]+'px; '+
								'height: '+coords[3]+'px; '+
								'outline: 2px red dotted;'
							);
							*/

							elem.setAttribute('style',
								'position: absolute; '+
								'left: '+coords[0]+'px; '+
								'top: ' +coords[1]+'px; '+
								'overflow: visible;'
							);

							// Top border
							var border = document.createElement('div');
							border.setAttribute('style',
								'position: absolute; '+
								'left: 0px; '+
								'top: 0px; '+
								'width: '+coords[2]+'px; '+
								'border-top: red 2px dotted;'
							);
							elem.appendChild(border);

							// Left border
							var border = document.createElement('div');
							border.setAttribute('style',
								'position: absolute; '+
								'left: 0px; '+
								'top: 0px; '+
								'height: '+coords[3]+'px; '+
								'border-left: red 2px dotted;'
							);
							elem.appendChild(border);

							// Right border
							var border = document.createElement('div');
							border.setAttribute('style',
								'position: absolute; '+
								'left: '+coords[2]+'px; '+
								'top: 0px; '+
								'height: '+coords[3]+'px; '+
								'border-right: red 2px dotted;'
							);
							elem.appendChild(border);

							// Bottom border
							var border = document.createElement('div');
							border.setAttribute('style',
								'position: absolute; '+
								'left: 0px; '+
								'top: '+coords[3]+'px; '+
								'width: '+coords[2]+'px; '+
								'border-bottom: red 2px dotted;'
							);
							elem.appendChild(border);

							frame.appendChild(elem);
						}
					}
				}
			}
		}

		// GreaseMonkey compatibility (not needed inside Opera)
		if( typeof unsafeWindow != 'undefined' )
		{
			xy = unsafeWindow.xy;
			dw = unsafeWindow.dw;
			ndiff = unsafeWindow.ndiff;
		}

		// Photo game (but breaks the tulip game)
		/*
		var icache = document.getElementById('icache2');
		if( icache )
		{
			for(var i = 0; i < ndiff+2; i++)
				styletext += '#icache'+i+' { outline: 2px red dotted; }\n';
		}
		*/

		// Domino/Numbers game
		if( typeof xy != 'undefined' )
		{
			for(var i = 0; i < ndiff; i++)
			{
				// Domino
				styletext += 'img[onmousedown="javascript:return diff('+i+');"] { outline: 2px red dotted; }\n';
				// Numbers
				styletext += 'div[onmousedown="diff('+i+');"] { outline: 2px red dotted; }\n';
			}
		}

		// Text game
		if( typeof dw != 'undefined' )
		{
			for(var i = 0; i < dw.length; i++)
				styletext += 'span[onmousedown="javascript:return diff('+dw[i]+');"] { text-decoration: underline; }\n';
		}

		// Adding the style sheet
		var style = document.createElement('style');
		style.setAttribute('type','text/css');
		style.appendChild(document.createTextNode(styletext));
		head.appendChild(style);
	}
})();