Skip to content

Commit

Permalink
Merge pull request #75 from sairaja9/LatestVersion
Browse files Browse the repository at this point in the history 
Latest version (updated)
  • Loading branch information
@Brijbhuva
Brijbhuva authored Jul 31, 2019
2 parents 92cf48e + eeecb52 commit d42ae5b
Show file tree
Hide file tree
Showing 32 changed files with 196 additions and 116 deletions.
0 images/Patriciamulti.png → images/Patmulti.png
View file
File renamed without changes
31 changes: 27 additions & 4 deletions scripts/overlayScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
}
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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";
Expand Down
54 changes: 27 additions & 27 deletions scripts/persona.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'/>";
Expand All @@ -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"){
Expand All @@ -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{
Expand Down
16 changes: 8 additions & 8 deletions templates/Abi/abiIPSToolTip.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
6 changes: 3 additions & 3 deletions templates/Abi/abiMToolTip.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
10 changes: 5 additions & 5 deletions templates/Abi/abiPersona.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions templates/Abi/abiRToolTip.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
6 changes: 3 additions & 3 deletions templates/Abi/abiSEToolTip.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Loading

0 comments on commit d42ae5b

Please sign in to comment.