/*************************************************************
* test.js.php
*
* Main experiment file for the implicit memory test.
*
* Author: Trevor Croxson
* Last Modified: November 5, 2015
*
* © Copyright 2015 LabintheWild.
* For questions about this file and permission to use
* the code, contact us at info@labinthewild.org
*************************************************************/
// alias for the API
var LE = LITWEngine;
var expData = {
instructions: [
"" +
"You'll be shown cards with shapes on them, like these:" +
"
",
"" +
"Each individual card represents a certain chance of rain. Some cards represent a high chance of rain, and some represent a low chance. These chances do not change during the experiment." +
"
" +
"When the cards are shown in combination, the overall chance for rain changes, based on the chances of the individual cards." +
"" +
"On each trial, your job is to decide if the weather will be rainy or not, based on the cards you see. You'll do this by clicking on an icon of a cloud if you think the weather will be rainy, and an icon of a sun if you think the weather will not be rainy." +
"" +
"You can also use the left and right arrow keys to select the weather icons.",
"" +
"At first, you won't know which card combinations indicate rain and which indicate sun, so you'll have to guess." +
"
" +
"Don't worry, though! You'll get immediate feedback about your guess. You'll see a green check if your guess is right, and a red X if you're wrong." +
"
" +
"Over time, your guesses will improve." +
"
" +
"Let's give it a try!",
"
" +
"Good job! If you got some wrong, don't worry. Pay attention to the symbols that appear on each trial, and keep providing your best guess." +
"
" +
"You'll complete several more trials with a different set of symbols. At the end of the experiment you'll see how your results compare with others." +
"
" +
"Ready to go? Click the arrow to get started!"
],
breaks: [
"
" +
"Nice work so far! Feel free to take a break before the next set of trials." +
"
",
"" +
"Whew! You're all done!" +
"
| " +
"If you're feeling up for it, you can complete more trials by clicking the straight arrow. We'll let you know when you're consistently making correct guesses, and then show you your results." +
" |  |
| " +
"Otherwise, you can see your results now by clicking the curved arrow. You'll have a chance to complete more trials after seeing your results." +
" |  |
"
],
probabilities: [
// [[pattern indices], P(pattern), P(rain|pattern)]
[[2], 0.08, 0.375], //0010
[[0,1], 0.09, 0.889], //1100
[[1,2,3], 0.04, 0.25], //0111
[[1], 0.08, 0.625], //0100
[[1,3], 0.06, 0.167], //0101
[[1,2], 0.06, 0.5], //0110
[[3], 0.14, 0.143], //0001
[[0], 0.14, 0.857], //1000
[[0,3], 0.06, 0.5], //1001
[[0,2], 0.06, 0.833], //1010
[[0,2,3], 0.03, 0.333], //1011
[[2,3], 0.09, 0.111], //0011
[[0,1,3], 0.03, 0.667], //1101
[[0,1,2], 0.04, 0.75] //1110
],
// we'll shuffle this order for each experiment run
stimOrdering: ["stim1", "stim2", "stim3", "stim4"],
progression: ["instructions", "practice", "instructions", "trial", "break", "trial", "break"],
trials: [
// first array is phase type; second is number of trials in the phase
["practice", "trial", "trial"],
// note: rounding may produce a final trial count that is slightly different than the values below, depending on which values are used
// [1, 1, 1]
// 60% of original trial count:
[5, 20, 60]
],
// [[phase 1 trials], [phase 2 trials], etc.]
stims: [],
currentStims: [],
correct: [],
blockSize: 20,
blockData: [],
stats: [],
consecutiveCorrect: 0,
indefiniteCorrect: 0,
indefiniteCompleted: 0,
indefiniteReached: false,
// how many consecutive correct trials are needed to demonstrate mastery of the task?
mastery: 15,
statsMappings: {
"You": "You",
"all": "All participants",
"gender=0": "Men",
"gender=1": "Women"
},
commentsDone: false
}
// generates the correct distribution of patterns for _count_ using either the practice symbols or the standard symbols
function generateTrials(type, count) {
var trials = [];
for (var j = 0; j < expData.probabilities.length; j++) {
// get the number of times this pattern will appear for this phase, with a minimum of 1
var num = Math.round(expData.probabilities[j][1] * count);
var num = (num < 1) ? 1 : num;
// generate the trials
for (var k = 0; k < num; k++) {
// add probability that it will rain for this trial
var temp = [expData.probabilities[j][2]];
// loop through cards in the pattern
for (var l = 0; l < expData.probabilities[j][0].length; l++) {
temp.push(expData.stimOrdering[expData.probabilities[j][0][l]] + (type == "practice" ? "alt" : ""));
}
trials.push(temp);
}
}
// slice off extra trials when the trial count is less than the total number of patterns (i.e. for the practice round)
if (count < trials.length) {
trials = trials.slice(0, count);
}
return LE.shuffleArray(trials);
}
function addShare() {
share.linkedin = false;
share.pinterest = false;
share.sinaWeibo = true;
share.makeButtons(".sharingButtons");
}
function setup() {
LE.initialize();
addShare();
expData.stimOrdering = LE.shuffleArray(expData.stimOrdering);
// populate the stims array for the initial practice and trial phases
for (var i = 0; i < expData.trials[0].length; i++) {
expData.stims.push(generateTrials(expData.trials[0][i], expData.trials[1][i]));
}
irb();
}
function irb() {
var html = "Welcome to the implicit memory study!
" +
"You're about to take a test on LabintheWild. Your contribution to our research allows us to learn more about cognitive differences around the world. The results from your test will also tell you something about yourself!
" +
"Please read the following information carefully before proceeding.
" +
"Why we are doing this research: We are trying to learn how people from different cultural and demographic backgrounds form categories based on unfamiliar information.
" +
"What you will have to do: You will be shown a series of symbols over several trials. You will need to provide a guess about the meaning of the symbols on each trial.
" +
"What you will get out of it: We will give you feedback on how your results compare to those of other participants. The final results from this experiment will be posted on our blog page. The experiment is not designed to benefit you, but you may enjoy it and enjoy comparing your results with those of other participants.
" +
"Privacy and Data Collection: We will not ask you for your name. Any data that we collect will be securely stored on our servers.
" +
"Duration: Approximately 8 minutes.
" +
"Contact information: If you have questions about this research, you may contact Professor Katharina Reinecke, Paul G. Allen Center for Computer Science & Engineering, Box 352350, Seattle, WA 98195, reinecke@cs.washington.edu." +
"
If you have questions about your rights as a research participant, or wish to obtain information, ask questions or discuss any concerns about this study with someone other than the researcher(s), please contact the University of Washington Human Subjects Division at 206-543-0098 (for international calls include the US Calling Code: +1-206-543-0098)." +
"
";
$("#irb").html(html);
LE.showSlide("irb");
$("#nextButton").html("
You must check the box to continue.");
$("#agreeToStudy").on("click", function () {
if ($("#agreeToStudy").is(':checked')) {
LE.showNextButton(demographics);
} else {
$("#nextButton").html("
You must check the box to continue.");
}
});
}
function motivations() {
// For compatibility's sake
showNextButton = LE.showNextButton;
motivation_show('motivations', nextPhase, LE.getParticipantId(), "implicit_memory", {});
LE.showSlide("motivations");
}
function demographics() {
LE.newForm("demographics", {
requiredQuestions: ["retake", "multinational", "country0", "gender", "age", "education"]
})
.add("retake")
.add("multinational")
.add("country0")
.add("gender")
.add("age", { style: "numericalFreeText", prompt: "How old are you? (Please type a number between 6 and 99)" })
.add("education")
.add("cognitiveDisability", {
name: "cognitiveDisability",
style: "dropdown",
options: "yesNo",
prompt: "Do you have any cognitive or neurological disorders?",
expand: "cognitiveDisabilityText0",
expansionTrigger: "1",
optionsAsNumbers: true
})
.add("cognitiveDisabilityText0", {
name: "cognitiveDisabilityText0",
style: "freeText",
prompt: "",
expansionPrompt: "",
expansionHeader: "If you are comfortable, please explain in the box below:",
hidden: true,
maxExpansions: 1
})
.add("dyslexia", {
name: "dyslexia",
options: "yesNo",
prompt: "Have you previously been diagnosed with dyslexia?",
optionsAsNumbers: true
})
.render(motivations);
LE.showSlide("demographics");
//LE.showNextButton(motivations);
}
function instructions() {
LE.showSlide("instructions");
var html = expData.instructions.shift();
$("#instructions").html(html);
if (expData.instructions.length > 1) {
LE.showNextButton(instructions, { "loadingOverride": true });
} else {
LE.showNextButton(nextPhase, { "loadingOverride": true });
}
}
function nextPhase() {
var type = expData.progression.shift();
if (type == "instructions") {
// only record progression if this is the first instructions page seen
if (expData.instructions.length == 4)
LE.recordProgression("instructions");
instructions();
} else if (type == "practice" || type == "trial") {
expData.currentStims = expData.stims.shift();
LE.increasePhaseCounter();
// record progression only if this is the first trial for a given set (practice, phase 1, phase 2)
if (type == "practice" && expData.currentStims.length == expData.trials[1][0])
LE.recordProgression("practice");
else if (type == "trial" && expData.currentStims.length == expData.trials[1][1])
LE.recordProgression("trials phase 1");
else if (type == "trial" && expData.currentStims.length == expData.trials[1][2])
LE.recordProgression("trials phase 2");
var html = "" +
"Based on the card(s) above, do you think the weather will be rainy or sunny?" +
"
" +
"Click on the button below that corresponds to your guess:" +
"
";
$("#respButtons").html(html);
LE.showSlide("trials");
nextTrial();
} else if (type == "indefinite") {
if (!expData.indefiniteReached) {
LE.recordProgression("indefinite trials");
expData.indefiniteReached = true;
}
expData.currentStims = generateTrials("trial", 40);
LE.showSlide("trials");
nextTrial({ "mode": "indefinite" });
} else if (type == "break") {
if (expData.breaks.length == 2)
LE.recordProgression("mid-trial break");
else if (expData.breaks.length == 1)
LE.recordProgression("end of trials break");
breakTime();
} else {
comments();
}
}
function breakTime() {
$("#instructions").html(expData.breaks.shift());
LE.showSlide("instructions");
$("#instructions").css("opacity", "1");
if (expData.breaks.length == 0) {
// assume we're one the second break page
LE.hideNextButton();
$(".navButton").each(function(i) {
$(this).on("click", function() {
// if this is the first nav button, progress to more trials
if (i == 0) expData.progression.push("indefinite");
nextPhase();
});
});
} else {
LE.showNextButton(nextPhase);
}
}
function arraySum(array) {
var result = 0;
for (var i = 0; i < array.length; i++) {
result += array[i];
}
return result;
}
function nextTrial(args) {
var args = args || {};
LE.hideNextButton();
var trial = expData.currentStims.shift();
if (trial) {
LE.increaseTrialCounter();
// reset response buttons
$("#rain").attr("src", "img/rain.png");
$("#sun").attr("src", "img/sun.png");
$(".respButton").css("opacity", "1")
.addClass("hoverable");
$("#trialsHeader").html(args.mode == "indefinite" ? "
" : "Trial: " + LE.getCumulativeTrialNum() + "/" + arraySum(expData.trials[1]) + "
");
// add html for stims
var html = "";
for (var i = 1; i < trial.length; i++) {
html += "![](img/" + trial[i] + ".svg)
";
}
$("#trialsContent").html(html);
if (args.mode == "indefinite") {
$("#trialsHeader").remove();
LE.showNextButton(comments, { "iconPath": "../common/img/nextNEW2.png", "iconActivePath": "../common/img/nextNEW2_active.png" });
$("#nextButton").prepend("" + "We'll let you know when you're consistently making correct guesses, but you can click the arrow to continue to stop now:" + "
")
.css("margin-top", "50px");
$("#nextButton img").css("width", "75%")
.css("height", "75%");
$("#continueText").css("float", "left")
.css("width", "400px")
.css("text-align", "right")
.css("margin-left", "295px")
.css("margin-top", "15px");
}
// figure out what the weather will be for this trial based on the conditional probability
var weightedList = [];
for (var i = 0; i < trial[0] * 100; i++) {
weightedList.push("rain");
}
for (var j = 0; j < (100 - trial[0] * 100); j++) {
weightedList.push("sun");
}
var weatherThisTrial = weightedList[Math.floor(Math.random() * (weightedList.length + 1))];
// as per the study, record the 'correct' outcome based on whether or not the conditional probability is above .5
var correctWeather = "";
if (trial[0] == 0.5) {
correctWeather = "neither";
} else if (trial[0] > 0.5) {
correctWeather = "rain";
} else {
correctWeather = "sun";
}
var result = {
participantId: LE.getParticipantId(),
phaseNum: LE.getPhaseNum(),
trialNum: LE.getTrialNum(),
pattern: trial.slice(1).toString(),
pRain: trial[0],
weatherThisTrial: weatherThisTrial,
correctWeather: correctWeather
};
$(".respButton").on("click", function(e) {
handleTrialInput(e, result, weatherThisTrial, correctWeather, args);
});
$(document).on("keydown", function(e) {
var code = e.keyCode || e.which;
if (code == 37) {// left arrow
e.target = $("#rain");
handleTrialInput(e, result, weatherThisTrial, correctWeather, args);
} else if (code == 39) {// right arrow
e.target = $("#sun");
handleTrialInput(e, result, weatherThisTrial, correctWeather, args);
}
});
} else if (args.mode == "indefinite") {
expData.progression.push("indefinite");
nextPhase;
} else {
setTimeout(nextPhase, 1000);
}
}
function handleTrialInput(e, result, weatherThisTrial, correctWeather, args) {
$(".respButton").css("opacity", "0.3")
.removeClass("hoverable")
.off("click");
$(document).off("keydown");
result.response = $(e.target).attr("id");
// handle feedback to user for this trial
if (result.response == weatherThisTrial) {
$(e.target).attr("src", "img/greenCheck.png")
.css("opacity", "1.0");
} else {
$(e.target).attr("src", "img/redX.png")
.css("opacity", "1.0");
}
// record the 'correct' response, based on whether conditional probability is > 0.5
if (result.response == correctWeather) {
(args.mode == "indefinite") ? expData.indefiniteCorrect++ : expData.correct.push(1);
expData.consecutiveCorrect++;
result.correctResponse = 1;
} else {
(args.mode != "indefinite") ? expData.correct.push(0) : "";
expData.consecutiveCorrect = 0;
result.correctResponse = 0;
}
//console.log("result:", result);
LE.recordResult(result);
if (args.mode != "indefinite") {
$.ajax({
type: "POST",
url: "include/data.php",
data: result
}).done(function(result) {
//console.log(result);
});
}
if (args.mode == "indefinite") {
expData.indefiniteCompleted++;
if (expData.consecutiveCorrect == expData.mastery) {
// participant has mastered the task
indefiniteFinished();
} else {
setTimeout(function() { nextTrial({ "mode": "indefinite" }) }, 1000);
}
} else {
setTimeout(nextTrial, 1000);
}
}
function indefiniteFinished() {
LE.showSlide("instructions");
LE.recordProgression("indefinite finished");
$("#instructions").css("opacity", "1");
LE.hideNextButton();
var html = "" +
"Nice! It looks like you've got it down. You're consistently making correct predictions!" + "
" +
"You completed an additional " + expData.indefiniteCompleted + " trials trials during this phase of the experiment, with an overall accuracy during this phase of " + (expData.indefiniteCorrect / expData.indefiniteCompleted * 100).toFixed(1) + "%.
" +
"Click the arrow below to continue to your full results." + "
";
$("#instructions").html(html);
LE.showNextButton(comments);
}
function comments() {
// all user stats are calculated in this function, which is visited only once. That way, no matter how many times
// a participant returns to complete more trials, their stats won't change.
if (!expData.commentsDone) {
LE.recordProgression("comments");
expData.commentsDone = true;
// record blockTrial data
// get the number of trial blocks to report over, including the final block that may be smaller than blockSize
var numBlocks = Math.ceil(parseFloat(expData.correct.slice(expData.trials[1][0]).length) / expData.blockSize);
// ignore practice trial data
var start = expData.trials[1][0],
end;
// loop through all blocks and calculate percentage correct
for (var i = 0; i < numBlocks; i++) {
end = expData.blockSize * (i + 1);
var block = expData.correct.slice(start, end + 1);
// calculate the percentage correct for each block
expData.blockData.push({
blockNum: i + 1,
percentCorrect: block.filter(function(value) { return value == 1 }).length / parseFloat(block.length)
});
}
$.ajax({
type: "POST",
url: "include/blockData.php",
data: {
participantId: LE.getParticipantId(),
blockData: expData.blockData
}
});
// add an empty piece of data to the beginning of the blockData array to make the results page chart more readable
expData.blockData.unshift({
blockNum: 0,
percentCorrect: 0
});
LE.showCommentsPage(results);
} else {
results();
}
}
function results() {
LE.recordProgression("results");
var labels = ["You"],
results = [],
maximums = [],
// scale scores for canvas chart
scale = function(value, xrange, yrange) {
return yrange * (value / xrange);
};
for (var i = 0; i < expData.blockData.length; i++) {
results.push(expData.blockData[i]["percentCorrect"])
}
maximums.push(Math.max.apply(Math, results));
// wrangle aggregate statistics data
var rawStats = LE.getStatistics();
for (var category in rawStats) {
results = [];
labels.push(category);
var temp = [];
for (var j = 1; j <= 4; j++) {
temp.push({
blockNum: j,
percentCorrect: rawStats[category]["block" + j + "Correct_mean"]
});
results.push(rawStats[category]["block" + j + "Correct_mean"]);
}
maximums.push(Math.max.apply(Math, results));
temp.unshift({
blockNum: 0,
percentCorrect: 0
});
// reset stats array in case participant is visiting results page for the second time
expData.stats = [];
expData.stats.push(temp);
}
//var userScore = scale((maximums[0] * 100 - minimums[0] * 100), 100, 400);
//var avgScore = scale((maximums[1] * 100 - minimums[1] * 100), 100, 400);
//console.log(expData.stats);
var userMax = scale((maximums[0] * 100), 100, 400);
var userStart = scale((expData.blockData[1]["percentCorrect"] * 100), 100, 400);
var avgMax = scale((maximums[1] * 100), 100, 400);
var avgStart = scale((expData.stats[0][1]["percentCorrect"] * 100), 100, 400);
var diff = userMax - avgMax;
var resultText = "";
switch (true) {
case (diff > -0.05 && diff < 0.05):
resultText = "By the end of the experiment, your prediction accuracy was about the same as the average participant in our data.";
break;
case (diff >= 0.05 && diff < 0.3):
resultText = "By the end of the experiment, your prediction accuracy was higher than the average participant in our data!";
break;
case (diff >= 0.3):
resultText = "By the end of the experiment, your prediction accuracy was much higher than than the average participant in our data!";
break;
case (diff <= -0.05):
resultText = "By the end of the experiment, your prediction accuracy was lower than the average participant in our data.";
break;
}
$("#resultsHeader").html(
"" +
"Good work, weather forecaster! You achieved " + (maximums[0] * 100).toFixed(1) + "% forecasting accuracy!
" +
"" +
"" +
"" +
"Think you can improve your accuracy? Click the arrow to try. Completing more trials won't change the results we show you on this page, but we'll let you know how many additional trials you complete until you're consistently making correct guesses." +
" | |
" +
"" +
"Want to know how your results compare to those of others? Read on..." +
"
" +
"In this experiment, we asked you to predict the weather from abstract symbols. It wasn't easy! Let's see how your predictions improved over the course of the experiment, compared to the average participant in our data:" +
"
" +
"
"
);
share.makeButtons(".sharingButtons");
var canvas = document.getElementById("chartContainer1");
var ctx = canvas.getContext("2d");
var ctx = canvas.getContext("2d", {alpha: false}); // <-- this apparently helps with text resolution
ctx.rect(0, 0, 800, 200);
ctx.fillStyle = "white";
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(200, 100);
ctx.lineTo(600, 100);
ctx.stroke();
ctx.font="bold 12pt Optima";
var text = "Not accurate";
// make text alignment responsive to text width (useful when text is translated)
ctx.fillText(text, (190 - ctx.measureText(text).width), 104);
var text = "Very accurate";
ctx.fillText(text, 610, 104);
//indicator triangles for user:
ctx.beginPath();
ctx.moveTo(200 + userStart - 10, 120);
ctx.lineTo(200 + userStart + 10, 120);
ctx.lineTo(200 + userStart, 100);
ctx.fillStyle = "#0000AA";
ctx.fill();
var text = "Your starting accuracy";
ctx.fillText(text, (userStart + 220 - ctx.measureText(text).width), 135);
ctx.beginPath();
ctx.moveTo(200 + userMax - 10, 120);
ctx.lineTo(200 + userMax + 10, 120);
ctx.lineTo(200 + userMax, 100);
ctx.fillStyle = "#0000FA";
ctx.fill();
var text = "Your ending accuracy";
// detect if labels will overlap; if so, bump this label down
ctx.fillText(text, 180 + userMax, 135 + ((userMax - userStart < 45) ? 15 : 0));
//indicator triangles for global average:
ctx.beginPath();
ctx.moveTo(200 + avgStart - 10, 80);
ctx.lineTo(200 + avgStart + 10, 80);
ctx.lineTo(200 + avgStart, 100);
ctx.fillStyle = "#999999";
ctx.fill();
var text = "Average starting accuracy";
ctx.fillText(text, avgStart + 220 - ctx.measureText(text).width, 75);
ctx.beginPath();
ctx.moveTo(200 + avgMax - 10, 80);
ctx.lineTo(200 + avgMax + 10, 80);
ctx.lineTo(200 + avgMax, 100);
ctx.fillStyle = "#555555";
ctx.fill();
var text = "Average ending accuracy";
ctx.fillText(text, 180 + avgMax, 75 - ((avgMax - avgStart < 45) ? 15 : 0));
//$("#chartContainer2").hide();
$("#resultsNext").on("click", function() {
expData.progression.push("indefinite");
$("#trials").css("opacity", "1");
nextPhase();
});
$("#resultsBrain").on("mouseover", function() {
$(this).attr("src", "img/brainHighlight.svg");
})
.on("mouseout", function() {
$(this).attr("src", "img/brain.svg");
})
.on("click", function() {
//$("#chartContainer2").show("slide", { direction: "up" }, 1000);
});
// draw the detailed results graph
var width = 550;
var height = 450;
var padding = 80;
// remove the chart element in case participant is re-visiting the results page
d3.select("svg").remove();
var svg = d3.select("#chart")
.append("svg")
.data(expData.blockData)
.attr("width", width)
.attr("height", height);
var x = d3.scale.linear()
.range([padding, width - padding])
.domain([0, expData.blockData.length - 1]);
var y = d3.scale.linear()
.range([height - padding, padding])
.domain([0, 1])
var xAxis = d3.svg.axis().scale(x)
.orient("bottom")
.ticks(expData.blockData.length - 1)
.tickFormat(function(d) {
return d * expData.blockSize;
});
var yAxis = d3.svg.axis().scale(y)
.orient("left")
.tickFormat(function(d) {
return (d * 100) + "%";
});
var line = d3.svg.line()
.x(function(d) { return x(d.blockNum); })
.y(function(d) { return y(d.percentCorrect); });
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + (height - padding) + ")")
.call(xAxis)
.append("text")
.attr("transform", "translate(" + (width / 2 + 30) + ", " + padding / 3 + ")")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Trial number");
svg.append("g")
.attr("class", "yAxis")
.attr("transform", "translate(" + padding + ", 0)")
.call(yAxis)
.append("text")
.attr("transform", "translate(" + -padding + ", " + height / 3 + ") rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Percentage correct");
var colors = LE.getGraphColors();
var color = colors.shift();
svg.append("svg:path")
.attr("d", line(expData.blockData))
.style("stroke", color)
.style("fill", "none")
.style("stroke-width", "2.5");
var legendHTML = "" + generateLegendHTML(color, expData.statsMappings[labels.shift()]);
// draw lines for additional categories
for (var i = 0; i < expData.stats.length; i++) {
var color = colors.shift();
var label = labels.shift();
svg.append("svg:path")
.attr("d", line(expData.stats[i]))
.style("stroke", color)
.style("fill", "none")
.style("opacity", "0.2")
.style("stroke-width", "1.5")
.attr("id", i + "_path");
// generate associated legend element
legendHTML += generateLegendHTML(color, expData.statsMappings[label], i);
}
$("#legend").html("").append(legendHTML + "" + "Legend" + "
");
// adjust inital legend opacities: set all except the first to a lower opacity
$("#legend tr:not(:first-child) td:first-child div").css("opacity", "0.2");
$("#legend tr:not(:first-child)").on("mouseover", function() {
$("td:first-child div", this).css("opacity", "1");
var id = $(this).attr("id").split("_")[0] + "_path";
$("#" + id).css("opacity", "1")
.css("stroke-width", "2.5");
})
.on("mouseout", function() {
$("td:first-child div", this).css("opacity", "0.2");
var id = $(this).attr("id").split("_")[0] + "_path";
$("#" + id).css("opacity", "0.2")
.css("stroke-width", "1.5");
});
//var examplePercent = Math.round(expData.blockData[2]["percentCorrect"] * 100);
//var exampleBlock1 = expData.blockSize;
//var exampleBlock2 = expData.blockSize * 2;
var examplePercent = 34;
var exampleBlock1 = 2;
var exampleBlock2 = 4;
$("#chartHeader").html(
" | " +
"Want to take an even deeper dive?" +
" |
" +
'Most people improve at the weather prediction task over the course of the experiment. The blue line on the graph below shows your improvement, broken down into blocks of ' + expData.blockSize + ' trials.' +
"
" +
"The y-axis of the graph corresponds to the percentage of trials you answered correctly in a given block. " +
'So, for example, you answered ' + examplePercent + '% of trials correctly between trials ' + exampleBlock1 + ' and ' + exampleBlock2 + '.' +
"
" +
"Hover over categories in the legend to examine how your performance compares to the average performance for different groups." +
"
"
);
$("#resultsFooter").html(
"The weather prediction task was introduced in: Knowlton, Barbara J., Larry R. Squire, and Mark A. Gluck. \"Probabilistic classification learning in amnesia.\" Learning & Memory 1.2 (1994): 106-120.
"
);
///* $("#resultsFooter").append(
// " 
