"
+ 'Before we start, help us adjust the selection of images by letting us know about the lighting around you' + "
"
+ 'Are you indoors? ' + ""
+ "
"
+ 'What type of lights are around you? ' + ""
+ '(Please select all that apply)' + "
"
+ "
"
+ "
"
+ "
"
+ "
"
+ "
"
+ "
"
+ "
"
+ "
"
+ 'Artificial light' + "
"
+ "
"
+ 'Natural light' + "
"
+ "
"
+ 'Other ' + ""
+ '(Please specify)' + ""
+ "
"
+ "
"
+ "
"
+ "
"
+ 'How bright is your surrounding? ' + ""
+ '(Ignoring the light from your computer screen)' + "
"
+ "
"
+ 'Midnight pitch black' + "
"
+ "
"
+ "
" + 'Noon summer sun' + "
"
+ "
"
+ ""
+ "
"
+ "
"
+ ""
+ "
"
+ 'What color is the light around you?' + "
"
+ "
"
+ 'Yellow' + "
"
+ "
"
+ 'Neutral' + "
"
+ "
"
+ 'White/blue' + "
"
+ "
"
+ ""
+ "
"
+ "
"
+ ""
+ "
"
+ 'What type of monitor do you have? ' + "" + '(If you can tell us your laptop/tablet model or make of your monitor that would be great!)' + "
"
+ "
"
+ ""
+ "
"
+ "Other: "
+ "
"
+ ""
+ "
"
+ "
Monitor brightness
"
+ "
"
+ "
" + 'Minimum brightness' + "
"
+ "
"
+ "
" + 'Maximum brightness' + "
"
+ "
"
+ " "
+ "
"
+ "
"
+ "";
$("input[name=tech]").click( function() {
if ($$$('tech_yes').checked)
$$$("technical").style.display = 'block';
else
$$$("technical").style.display = 'none';
});
$("input[name=cheat]").click( function() {
if ($$$('cheat_yes').checked)
$$$("cheating").style.display = 'block';
else
$$$("cheating").style.display = 'none';
});
// remove loader
$$$("ajax_working").style.display = "none";
$$$("next_button").style.opacity = '1';
showSlide("comments");
showNextButton(submitComments);
hidePrevButton();
disableKeyboard();
}
// functions to control how the comment boxes display
function onFocusBox (box) {
if (box.value === 'You may leave this area blank.' ) {
box.value = '';
box.style.color = "#333";
}
}
function onBlurBox (box) {
if (box.value === '') {
box.value = 'You may leave this area blank.';
box.style.color = "#999";
}
}
function onFocusBox1 (box) {
if (box.value === 'Please specify') {
box.value = '';
box.style.color = "#333";
}
}
function onBlurBox1 (box) {
if (box.value === '') {
box.value = 'Please specify';
box.style.color = "#999";
}
}
// function to submit the comments about the test to the server
function submitComments() {
// validate form
if ($("input[name=cheat]:checked").length == 0 || $("input[name=cheat]:checked").length == 0) {
alert('Please answer the first two questions.');
return;
}
$$$("ajax_working").style.display = 'block';
$$$("ajax_working").style.top = '-85px';
$$$("comments").style.opacity = '0.3';
$$$("next_button").style.opacity = '0.3';
// process the responses
var general = ($$$("general").value == 'You may leave this area blank.') ? "" : $$$("general").value;
var cheating, technical;
if ($$$("cheat_yes").checked)
cheating = ($$$("cheating").value == 'You may leave this area blank.' ) ? "Yes" : $$$("cheating").value;
else
cheating = "";
if ($$$("tech_yes").checked)
technical = ($$$("technical").value == 'You may leave this area blank.' ) ? "Yes" : $$$("technical").value;
else
technical = "";
// AJAX request
$.ajax({
type: 'POST',
url: 'includes/comments.php',
data: {
general: general,
cheating: cheating,
technical: technical,
participant_id: vars.participant_id
}
}).done(function (data) {
$$$("ajax_working").style.display = "none";
$$$("next_button").style.opacity = '1';
//setTimeout(finish, 1000);
showResults1(current_location);
});
}
// helper function to calculate estimated age from results
// returns lowest age from the three vectors
function calculate_age(){
lowest_age_so_far=999;
for (var i = 0 ;i < vector_order.length;i++){
var which_stimuli=vector_order[i];
//exclude luminance
if (which_stimuli!=3){
if (ages[which_stimuli][solutions[i]] "
+ "
"
+ "
"
+ "
"
+ ""
+ "
"
//+ text <-- Yan's results page manipulation
+ 'What does this result mean?' + "
"
+ 'Our results do not necessarily show your actual age, but they report on your "color age." The lower your color age, the better you see and differentiate colors.' + "
"
+ 'Previous research has shown that our ability to differentiate colors tends to get worse as we get older. If our system predicted that you are younger than you are, this might suggest that you have better color vision than would be expected, given your age. This could be because you are generally good at distinguising colors, and you might have the perfect lighting around you. We\'re also still training our algorithm so your input will really help us!' + "
" + 'How are we guessing your age?' + "
"
+ 'Previous research has shown that our ability to differentiate colors tends to get worse as we get older. By reversing this, we are able to predict your age if we know your color differentiation ability. By asking you to identify the gaps in the circles, we are measuring your ability to distinguish the circle color from the background color; this serves as an estimate of your color differentiation abilities, so we can guess your age.' + "
"
+ 'Why are we doing this?' + "
"
+ 'When you look at a website, you might see its colors very differently to somebody else. There are multiple reasons for this, for example your individual ability to perceive and distinguish colors, or the environmental lighting conditions that you are in. Ideally, websites would be able to adapt their colors to these different settings, so that everyone is able to perceive and distinguish colors in an optimal way. In this LabintheWild experiment, we therefore explore the extent to which lighting conditions influence our color perception. The results will hopefully also help us improve the LabintheWild website itself so that you will be able to easily take part in our experiments no matter whether you are sitting in bright sunlight outside, or in a dim room inside.'
+ "
" + '***Keep in mind that this is NOT a medical test!***' + "
"
+ 'Any other comments or questions?' + "
"
+ "
";
// TODO: here is the code (currently) for displaying new tests, taken out, but need to add in the studies
//var results_bottom = "
";
//
//html += results_bottom;
var onclickcall = function() {
$(".ortext").remove();
var canvasx = 800;
var canvasy = 200;
var padding = 50;
var canvasposition = 100;
var canvasHTML = "";
if($(this).hasClass("firstOrder"))
{
alert();
$(".secondOrder").remove();
$(".firstOrder").remove();
var avgtext;
if(randomVar==0)
{
avgtext="This is how you compare to an average person from your country !";
}
else
{
avgtext = "This is how you compare to an average person in the world !";
}
$("#comparetext").html(avgtext);
$("#comparetext").append(canvasHTML);
}
else
{
$(".firstOrder").remove();
$(".secondOrder").remove();
var avgtext;
if(randomVar==0)
{
avgtext="This is how you compare to an average person in the world !";
}
else
{
avgtext = "This is how you compare to an average person from your country !";
}
$("#comparetext").html(avgtext);
$("#comparetext").append(canvasHTML);
}
$(document).off('click','.culturaltendencycontainer',onclickcall);
requiredValue = $(this).data("value");
$.ajax({
type: 'POST',
url: 'includes/culturaltendencyresults.php',
data: {
participant_id: vars.participant_id,
is_individualist: requiredValue
}
}).done(function(data){
if(data!=null)
{
var obj = JSON.parse(data);
canvasit(obj.message, obj.avgValue);
}
});
}
$(document).on('click','.culturaltendencycontainer',onclickcall);
$('input[name=agee]').live('click', function() {
var response = ' ';
// var correct = $$$('correct').checked;
if($$$('nope').checked) {
correctGuess = 0;
var html = "";
for(var i = 0; i < 110; i++) {
html += "";
}
$$$("real").innerHTML = "";
realAge = $$$('realage').value;
} else if($$$('correct').checked){
correctGuess = 1;
$$$('real').innerHTML = "";
realAge = guess;
done(guess, 1);
}
});
window.onbeforeunload = null;
$("#results").html(html);
showSlide("results");
showFinalPage("#results_footer",
vars.participant_id,
"color_age",
$("meta[property='og:title']").attr('content'),
$("meta[property='og:description']").attr('content'),
['newsletter', 'formality-security']);
$$$("ajax_working").style.display = "none";
$$$("next_button").style.opacity = '1';
hideNextButton();
}
function canvasit(message, avgValue) {
var trianglelength = 15;
// initialize canvas
var canvasx = 800;
var canvasy = 200;
//padding value
var padding = 150;
var canvasposition = 100;
//lower age limit and higher age limit
var lowerlimit = 0;
var higherlimit = 100;
var canvas = document.getElementById("drawingcanvas");
var ctx = canvas.getContext("2d");
var order;
var length = canvasx - (2 * padding);
//Graph values (replace 50 and 60 with values from the database)
var averagechosenvaluelocation = padding + ( length * (1- ( (avgValue-lowerlimit) / (higherlimit-lowerlimit))));
ctx.fillStyle = "black";
// draw spectrum line
ctx.beginPath();
ctx.moveTo(padding, canvasposition);
ctx.lineTo(canvasx-padding, canvasposition);
ctx.stroke();
ctx.font = "bold 12px sans-serif";
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
ctx.fillText("", padding-25, canvasposition-8);
ctx.textBaseline = "top";
ctx.fillText('Low Color Vision', padding-25, canvasposition-8);
ctx.textAlign = "left";
ctx.textBaseline = "bottom";
ctx.fillText("", canvasx-padding+25, canvasposition-8);
ctx.textBaseline = "top";
ctx.fillText('High Color Vision', canvasx-padding+25, canvasposition-8);
if(guess>=lowerlimit && guess<=higherlimit)
{
var participantaveragevaluelocation = padding + ( length * (1-( (guess-lowerlimit) / (higherlimit-lowerlimit))));
ctx.fillStyle = "red";
var yourtext = "You (Score: " + guess + ")";
ctx.fillText(yourtext, participantaveragevaluelocation - trianglelength + 5, canvasposition - trianglelength - 20);
ctx.beginPath();
ctx.moveTo(participantaveragevaluelocation,canvasposition);
ctx.lineTo(participantaveragevaluelocation - trianglelength + 5, canvasposition - trianglelength);
ctx.lineTo(participantaveragevaluelocation + trianglelength - 5, canvasposition - trianglelength);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
}
ctx.beginPath();
ctx.moveTo(averagechosenvaluelocation,canvasposition);
ctx.lineTo(averagechosenvaluelocation - trianglelength + 5, canvasposition + trianglelength);
ctx.lineTo(averagechosenvaluelocation + trianglelength - 5, canvasposition + trianglelength);
ctx.closePath();
ctx.fillStyle = "cornflowerblue";
ctx.fill();
message = message + " (Score: " + avgValue + ")";
ctx.fillText(message, averagechosenvaluelocation - trianglelength - 65, canvasposition + trianglelength + 5);
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function sub_final() {
// document.getElementById("fcomment").setAttribute("src", "img/thx.png");
// document.getElementById("fcomment").disabled = true;
var val = $$$('final_comments').value;
$$$("fc").innerHTML = "
";//"div:#ffffff; font-size:20px; font-weight: bold;'>THANKS! :) ";
$.ajax({
type: 'POST',
url: 'includes/resultf.php',
data: {
participant_id: vars.participant_id,
comments: val
}
}).done(function(data){
});
}
// email subscribe helper funcition
// email validator - http://www.w3resource.com/javascript/form/email-validation.php#sthash.YaiMT7Vz.dpuf
function isValidEmail(email)
{
return (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email));
}
// submits the data from the email addresses with error checking
function email_submit()
{
var address_selector = "input[name='address']";
var address = $(address_selector).val();
// if not a valid email address, show error messages and make red
if(!isValidEmail(address))
{
$("#email-signup-box").addClass("error");
$("#email-help").html("The email address you provided is invalid.");
$(address_selector).bind("keydown", function ()
{
$("#email-signup-box").removeClass("error");
$("#email-help").empty();
$(address_selector).unbind("keydown");
});
return;
}
// otherwise submit via ajax
else
{
$("#invalid_address").hide();
$(address_selector).css('color', 'black');
// create data to submit
var data = {};
data["address"] = address;
// ajax
$.ajax({
type: 'POST',
url: '../../../email/subscribe.php',
data: data
}).done (function (link)
{
// if ajax worked correctly, a link starting with http://... is returned
if (link.substring(0, 4) == "http")
{
$("form[name='email']").hide();
$("#email_complete").show();
var msg = 'To unsubscribe click ' + "" + 'here';
$("#unsubscribe").html(msg);
}
// otherwise alert the failure
else
{
alert(link);
}
});
}
}
"
+ "
"
// + "
"
// + "