Latest version (updated)

scripts/overlayScreen.js

@@ -308,7 +308,7 @@ function overlayScreen(onlyDraw){
                 }
 				setStatusToTrue("highlightedAction");
 				for (var element in elements) {
-					if (element.id === "genderMagCanvas" || element.id === "genderMagCanvasContainer" || element.id === "highlightHover") {
+					if (element.id === "genderMagCanvas" || element.id === "genderMagCanvasContainer" || element.id === "highlightHover" || element.id === "highlightBorder2") {
 						element.style.display = "default";
 					}
 				}
@@ -322,7 +322,8 @@ function overlayScreen(onlyDraw){
 
 
 				setTimeout(function () {
-					$("#highlightHover").remove();
+                    $("#highlightHover").remove();
+                    $("#highlightBorder2").remove();
 					//screenshot process finished, flag set to false
 					screenshotFlag = false;
 				}, 500);
@@ -350,13 +351,35 @@ function overlayScreen(onlyDraw){
 				highlightHover.style.top = rect.startY-20 + "px";
 				highlightHover.style.height = "50px";
 				highlightHover.style.width = "100px";
-				highlightHover.style.border = "3px solid #7D1935";
+				highlightHover.style.border = "6px solid #7D1935";
 				highlightHover.style.opacity = "1";
 			}
 			else{
 				var highlightHover = document.createElement("div");
 				highlightHover.id = "highlightHover";
 			}
+			if($("#highlightBorder2") && screenshotFlag){
+				rect.startX = e.clientX - this.offsetLeft;
+				rect.startY = e.clientY - this.offsetTop;
+				rect.w = (e.pageX - this.offsetLeft) - rect.startX;
+				rect.h = (e.pageY - this.offsetTop) - rect.startY ;
+
+				$("#highlightBorder2").remove();
+				var highlightBorder2 = document.createElement("div");
+				highlightBorder2.id = "highlightBorder2";
+				document.getElementById('genderMagCanvasContainer').appendChild(highlightBorder2);
+				highlightBorder2.style.position = "absolute";
+				highlightBorder2.style.left = rect.startX-30 + "px";
+				highlightBorder2.style.top = rect.startY-20 + "px";
+				highlightBorder2.style.height = "50px";
+				highlightBorder2.style.width = "100px";
+				highlightBorder2.style.border = "3px solid #FFFFFF";
+				highlightBorder2.style.opacity = "1";
+			}
+			else{
+				var highlightBorder2 = document.createElement("div");
+				highlightBorder2.id = "highlightBorder2";
+			}
 		}
 		function draw() {
 			ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
@@ -377,7 +400,7 @@ function renderImage(imgURL){
 	toolTip.id = "myToolTip";
 	toolTip.style.position = "absolute";
 	toolTip.style.left = 100 + "px";
-	toolTip.style.top = 100 + "px";	
+	toolTip.style.top = 100 + "px";
 	toolTip.style.height = "600px";
 	toolTip.style.width = "500px";
 	toolTip.style.zIndex = "99999";

scripts/persona.js

@@ -47,7 +47,7 @@ function loadPersona(personaName){
 		});
 
 	}
-	else if(personaName === "Patrick"){
+	/*else if(personaName === "Patrick"){
 		appendTemplateToElement(sidebarBody().find("#personaInfo"), "./templates/Patrick/patrickPersona.html");
 		var patrickSRC=chrome.extension.getURL("images/Patricmulti.png");
 		var patrickIMG= "<img id='PatrickPhoto' src='" + patrickSRC + "' alt='Patrick Jones' class='sidebarImg' width='100' height='100'/>";
@@ -68,27 +68,27 @@ function loadPersona(personaName){
 		sidebarBody().find(".patrickTTrigger").unbind( "click" ).click(function(){
 			addToolTip("patrickTToolTip", "Patrick");
 		});
-	}
-	else if(personaName === "Patricia"){
-		appendTemplateToElement(sidebarBody().find("#personaInfo"), "./templates/Patricia/patriciaPersona.html");
-		var patriciaSRC=chrome.extension.getURL("images/Patriciamulti.png");
-		var patriciaIMG= "<img id='PatriciaPhoto' src='" + patriciaSRC + "' alt='Patricia Jones' class='sidebarImg' width='100' height='100'/>";
-		sidebarBody().find("#picGoesHere").append(patriciaIMG);
+	} */
+	else if(personaName === "Pat"){
+		appendTemplateToElement(sidebarBody().find("#personaInfo"), "./templates/pat/patPersona.html");
+		var patSRC=chrome.extension.getURL("images/Patmulti.png");
+		var patIMG= "<img id='patPhoto' src='" + patSRC + "' alt='Pat Jones' class='sidebarImg' width='100' height='100'/>";
+		sidebarBody().find("#picGoesHere").append(patIMG);
 
-		sidebarBody().find(".patriciaMTrigger").unbind( "click" ).click(function (){
-			addToolTip("patriciaMToolTip", "Patricia");
+		sidebarBody().find(".patMTrigger").unbind( "click" ).click(function (){
+			addToolTip("patMToolTip", "Pat");
 		});
-		sidebarBody().find(".patriciaIPSTrigger").unbind( "click" ).click(function(){
-			addToolTip("patriciaIPSToolTip", "Patricia");
+		sidebarBody().find(".patIPSTrigger").unbind( "click" ).click(function(){
+			addToolTip("patIPSToolTip", "Pat");
 		});
-		sidebarBody().find(".patriciaSETrigger").unbind( "click" ).click(function(){
-			addToolTip("patriciaSEToolTip", "Patricia");
+		sidebarBody().find(".patSETrigger").unbind( "click" ).click(function(){
+			addToolTip("patSEToolTip", "Pat");
 		});
-		sidebarBody().find(".patriciaRTrigger").unbind( "click" ).click(function(){
-			addToolTip("patriciaRToolTip", "Patricia");
+		sidebarBody().find(".patRTrigger").unbind( "click" ).click(function(){
+			addToolTip("patRToolTip", "Pat");
 		});
-		sidebarBody().find(".patriciaTTrigger").unbind( "click" ).click(function(){
-			addToolTip("patriciaTToolTip", "Patricia");
+		sidebarBody().find(".patTTrigger").unbind( "click" ).click(function(){
+			addToolTip("patTToolTip", "Pat");
 		});
 	}
 	else if(personaName === "Custom"){
@@ -97,20 +97,20 @@ function loadPersona(personaName){
 //	var patrickIMG= "<img id='PatrickPhoto' src='" + patrickSRC + "' alt='Patrick Jones' class='sidebarImg' width='100' height='100'/>";
 //	sidebarBody().find("#picGoesHere").append(patrickIMG);
 
-		sidebarBody().find(".patriciaMTrigger").unbind( "click" ).click(function (){
-			addToolTip("patriciaMToolTip", "Patricia");
+		sidebarBody().find(".patMTrigger").unbind( "click" ).click(function (){
+			addToolTip("patMToolTip", "Pat");
 		});
-		sidebarBody().find(".patriciaIPSTrigger").unbind( "click" ).click(function(){
-			addToolTip("patriciaIPSToolTip", "Patricia");
+		sidebarBody().find(".patIPSTrigger").unbind( "click" ).click(function(){
+			addToolTip("patIPSToolTip", "Pat");
 		});
-		sidebarBody().find(".patriciaSETrigger").unbind( "click" ).click(function(){
-			addToolTip("patriciaSEToolTip", "Patricia");
+		sidebarBody().find(".patSETrigger").unbind( "click" ).click(function(){
+			addToolTip("patSEToolTip", "Pat");
 		});
-		sidebarBody().find(".patriciaRTrigger").unbind( "click" ).click(function(){
-			addToolTip("patriciaRToolTip", "Patricia");
+		sidebarBody().find(".patRTrigger").unbind( "click" ).click(function(){
+			addToolTip("patRToolTip", "Pat");
 		});
-		sidebarBody().find(".patriciaTTrigger").unbind( "click" ).click(function(){
-			addToolTip("patriciaTToolTip", "Patricia");
+		sidebarBody().find(".patTTrigger").unbind( "click" ).click(function(){
+			addToolTip("patTToolTip", "Pat");
 		});
 	}
 	else{

templates/Abi/abiIPSToolTip.html

@@ -1,15 +1,15 @@
  <html>
 	<body>
-		<div style="height:20px; background-color:#4A96AD;text-align:center;"><span style="color:white;">Abi's Comprehensive Information Processing Style</span>  <button id="abiIPSToolTipButton" class="closeToolTip" style="float:right; width:70px; height:20px;background-color:#7D1935;color:white;"> Close </button></div>
+		<div style="height:30px; background-color:#4A96AD;text-align:center;"><span style="color:white;">Abi's Comprehensive Information Processing Style</span>  <button id="abiIPSToolTipButton" class="closeToolTip" style="float:right; width:70px; height:30px;background-color:#7D1935;color:white;"> Close </button></div>
 		<div id="abiIPSToolTip" style="margin:5px;">
-			<span id="abiIPSToolTipPreview" >Abi's <i>comprehensive information processing style</i> means that <span class="pronoun">she</span> tends to gather information about a problem before she starts to solve it. For instance, <span class="pronoun">she</span> might look up a tutorial.</span>
+			<span id="abiIPSToolTipPreview" >Abi's <i>comprehensive information processing style</i> means that <span class="pronoun">they</span> tend to gather information about a problem before they start to solve it. For instance, <span class="pronoun">Abi</span> might look up a tutorial.</span>
 		<span id="abiIPSToolTipComplete" hidden>
-			Abi leans towards a <i>comprehensive information processing style</i>when <span class="pronoun">she</span>
-			needs to gather information to problem-solve. That is, before following any option that seems promising,
-			<span class="pronoun">she</span> first <span style="color:red;">gathers information comprehensively to try to form
-			a complete understanding of the problem before trying to solve it</span>.Thus, <span class="possessive">her</span>
-			style is “burst-y”; first <span class="pronoun">she</span> reads a lot, then <span class="pronoun">she</span>
-			acts on it in a batch of activity.
+			Abi leans towards a <i>comprehensive information processing style</i>when <span class="pronoun">they</span>
+			need to gather information to problem-solve. That is, before following any option that seems promising,
+			<span class="pronoun">Abi</span> first <span style="color:red;">gathers information comprehensively to try to form
+			a complete understanding of the problem before trying to solve it</span>.Thus, <span class="possessive">their</span>
+			style is “burst-y”; first <span class="pronoun">Abi</span> reads a lot, then <span class="pronoun">they</span>
+			act on it in a batch of activity.
 		</span>
 		<button id="abiIPSToolTipSeeMOAR" class="moreOrLess" stateVar=0> See more... </button>
 		</div>

templates/Abi/abiMToolTip.html

@@ -1,10 +1,10 @@
  <html>
 	<body>
-	<div style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Abi's Motivation</span> <button id="abiMToolTipButton"class="closeToolTip" style="float:right; width:70px; height:20px;background-color:#7D1935;color:white;"> Close </button></div>
+	<div style="height:30px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Abi's Motivation</span> <button id="abiMToolTipButton"class="closeToolTip" style="float:right; width:70px; height:30px;background-color:#7D1935;color:white;"> Close </button></div>
 		<div id="abiMToolTip" style="margin:5px;">
-		<span id="abiMToolTipPreview" > Abi prefers to use features and methods that she is familiar with. She's good with technologies that she has used before.</span>
+		<span id="abiMToolTipPreview" > Abi prefers to use features and methods that they are familiar with. Abi is good with technologies that they have used before.</span>
 		<span id="abiMToolTipComplete" hidden>
-			Abi is <span style="color:red;"><u>proficient with the technologies she uses.</u></span> She learns new technologies when she needs to, but she doesn’t spend her free time exploring technology or obscure functionality of programs and devices that she uses. When Abi uses computers to problem-solve, she has <span style="color:red;"><u>little desire to learn new functions</u></span>, or to search for information on them.  She tries to use methods she is <span style="color:red;"><u>already familiar and comfortable with</u></span> to achieve her goals.
+			Abi is <span style="color:red;"><u>proficient with the technologies they use.</u></span> Abi learns new technologies when they need to, but they don’t spend her free time exploring technology or obscure functionality of programs and devices that they use. When Abi uses computers to problem-solve, they have <span style="color:red;"><u>little desire to learn new functions</u></span>, or to search for information on them. Abi tries to use methods they are <span style="color:red;"><u>already familiar and comfortable with</u></span> to achieve their goals.
 		</span>
 		<button id="abiMToolTipSeeMOAR" class="moreOrLess" stateVar=0>See more...</button>
 	</div>			

templates/Abi/abiPersona.html

@@ -6,11 +6,11 @@
 		<div id="picGoesHere" style="height:100%; width:20%;float:left;"></div>
 			<div class="bullets" style="height:100%; width:80%;float:right">
 				<ul>
-					<li>Is <span class="abiMTrigger" style="color:#0645AD; text-decoration: underline;"> motivated </span> by the usefulness of technology (as opposed to the novelty).</li>
-					<li>Has a <span class="abiIPSTrigger" style="color:#0645AD; text-decoration: underline;">comprehensive information processing style </span>.</li>
-					<li>Has <span class="abiSETrigger" style="color:#0645AD; text-decoration: underline;">low computer self-efficacy </span>.</li>
-					<li>Is <span class="abiRTrigger" style="color:#0645AD; text-decoration: underline;">risk-averse</span> when it comes to software.</li>
-					<li>Does not like to <span class="abiTTrigger" style="color:#0645AD; text-decoration: underline;"> explore or tinker</span>.</li>
+					<li>Is <span class="abiMTrigger" style="color:blue; text-decoration: underline;"> motivated </span> by the usefulness of technology (as opposed to the novelty).</li>
+					<li>Has a <span class="abiIPSTrigger" style="color:blue; text-decoration: underline;">comprehensive information processing style </span>.</li>
+					<li>Has <span class="abiSETrigger" style="color:blue; text-decoration: underline;">low computer self-efficacy </span>.</li>
+					<li>Is <span class="abiRTrigger" style="color:blue; text-decoration: underline;">risk-averse</span> when it comes to software.</li>
+					<li>Does not like to <span class="abiTTrigger" style="color:blue; text-decoration: underline;"> explore or tinker</span>.</li>
 				</ul>
 			</div>
 		</div>

templates/Abi/abiRToolTip.html

@@ -1,10 +1,10 @@
  <html>
 	<body>
-	<div style="height:20px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Abi's Attitudes Towards Risk</span> <button id="abiRToolTipButton"class="closeToolTip" style="float:right; width:70px; height:20px;background-color:#7D1935;color:white;"> Close </button></div>
+	<div style="height:30px; background-color:#4A96AD;text-align:center;"> <span style="color:white;">Abi's Attitudes Towards Risk</span> <button id="abiRToolTipButton"class="closeToolTip" style="float:right; width:70px; height:30px;background-color:#7D1935;color:white;"> Close </button></div>
 		<div id="abiRToolTip" style="margin:5px;">
-		<span id="abiRToolTipPreview" > Abi's risk-aversion leads her to mainly use software features that she is familiar with and to avoid features that she hasn't used before.</span>
+		<span id="abiRToolTipPreview" > Abi's risk-aversion leads them to mainly use software features that they are familiar with and to avoid features that they haven't used before.</span>
 		<span id="abiRToolTipComplete" hidden>
-			Abi is <span style="color:red;">risk averse</span> when she uses computers to perform tasks. When confronted with new software features, Abi worries that she will spend time on them and not get any benefits from doing so. She tries to perform tasks "the safe” (ie, familiar) way, even if the less familiar features might promise a more direct solution.
+			Abi is <span style="color:red;">risk averse</span> when they use computers to perform tasks. When confronted with new software features, Abi worries that they will spend time on them and not get any benefits from doing so. Abi tries to perform tasks "the safe” (ie, familiar) way, even if the less familiar features might promise a more direct solution.
 		</span>
 		<button id="abiRToolTipSeeMOAR" class="moreOrLess" stateVar=0> See more... </button>
 		</div>			

templates/Abi/abiSEToolTip.html

@@ -1,10 +1,10 @@
  <html>
 	<body>	
-	<div style="height:20px; background-color:#4A96AD;text-align:center;"><span style="color:white;">Abi's Computer Self-Efficacy</span>  <button id="abiSEToolTipButton" class="closeToolTip" style="float:right; width:70px; height:20px;background-color:#7D1935;color:white;"> Close </button></div>
+	<div style="height:30px; background-color:#4A96AD;text-align:center;"><span style="color:white;">Abi's Computer Self-Efficacy</span>  <button id="abiSEToolTipButton" class="closeToolTip" style="float:right; width:70px; height:30px;background-color:#7D1935;color:white;"> Close </button></div>
 		<div id="abiSEToolTip" style="margin:5px;">
-			<span id="abiSEToolTipPreview" >Abi's low computer self efficacy means that she isn't confident performing computing tasks that she isn't familiar with. She might give up if she runs into too many usability issues.</span>
+			<span id="abiSEToolTipPreview" >Abi's low computer self efficacy means that they aren't confident performing computing tasks that they aren't familiar with. Abi might give up if they run into too many usability issues.</span>
 			<span id="abiSEToolTipComplete" hidden>
-			Abi has low computer self-efficacy, meaning that she has <span style="color:red;">low self-confidence in performing computing tasks</span> other than the ones she is familiar with.  This has a variety of impacts on how she uses software.  For example, she is not confident that she can learn to use new features and, as self-efficacy theory explains, she often gives up if she runs into challenges. Software with usability problems poses more challenges to her than it does to more confident users, and she often blames herself for problems that she encounters.
+			Abi has low computer self-efficacy, meaning that they have <span style="color:red;">low self-confidence in performing computing tasks</span> other than the ones they are familiar with.  This has a variety of impacts on how they use software.  For example, Abi is not confident that they can learn to use new features and, as self-efficacy theory explains, they often give up if they run into challenges. Software with usability problems poses more challenges to her than it does to more confident users, and they often blame themselves for problems that they encounters.
 			</span>
 		<button id="abiSEToolTipSeeMOAR" class="moreOrLess" stateVar=0> See more... </button>
 		</div>