matt/changeblindness
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

First commit.

Browse Source 
This still needs some work on the installer, which is not added yet.
This commit is contained in:
Raymond Jelierse
2012-02-25 20:55:15 +01:00
commit 0fd915729b
18 changed files with 1143 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
views/base.html.twig Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<base href="{{ baseURL }}">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Change blindness test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Change blindness study">
<meta name="author" content="Raymond Jelierse <r.jelierse@student.tudelft.nl>">
<!-- Le styles -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Le jQuery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<article class="container">
{% block content %}
<p>No content here.</p>
{% endblock %}
</article>
<!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- Le APIs -->
{% block webapis %}
{% endblock %}
</body>
</html>

20
views/change.html.twig Normal file
View File

@ -0,0 +1,20 @@
{% extends 'base.html.twig' %}
{% block content %}
<header class="page-header">
<h1>Change blindness test (step {{ step_count }} of 3)</h1>
</header>
<div id="placeholder" class="well">
<p>Please wait while the images are loaded.</p>
</div>
<div id="rotator" class="hide">
<img src="{{ imageWithElement}}">
<img src="{{ imageWithoutElement}}">
</div>
<form method="post" action="" name="changeform" id="changeform">
<input type="hidden" name="xcoordinate" id="xcoordinate" value="0">
<input type="hidden" name="ycoordinate" id="ycoordinate" value="0">
<input type="hidden" name="responsetime" id="responsetime" value="0">
</form>
<script type="text/javascript" src="js/change.js"></script>
{% endblock %}

9
views/finish.html.twig Normal file
View File

@ -0,0 +1,9 @@
{% extends 'base.html.twig' %}
{% block content %}
<header class="page-header">
<h1>Change blindness test</h1>
</header>
<p>Thank you for your participation.</p>
<p><a href="start" class="btn btn-large btn-primary">Return to homepage &raquo;</a></p>
{% endblock %}

29
views/index.html.twig Normal file
View File

@ -0,0 +1,29 @@
{% extends 'base.html.twig' %}
{% block content %}
<header class="hero-unit">
<h1>Change blindness test</h1>
<p>We would like a few minutes of your time to help us with a test in change blindness. Your help is very much appreciated.</p>
<p><a class="btn btn-primary btn-large" href="phase/notable">Get started &raquo;</a></p>
<p><div class="fb-like" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial"></div></p>
<p><a href="https://twitter.com/share" class="twitter-share-button" data-via="RaymondJelierse" data-hashtags="vcd">Tweet</a></p>
</header>
<div class="row">
<aside class="span8">
<h2>Instructions</h2>
<p>You will be shown a series of images, each are a pair of alternating images with a slight alteration. Your task is to find the difference as quick as possible. If you have located the difference, click on the area that you think has been changed.</p>
<p>When you click on the image, you will be taken to the next pair of images. In total, you will assess three different pairs.</p>
</aside>
<aside class="span4">
<h2>Disclaimer</h2>
<p>Zappos.com is in no way affaliated with this website, nor does it have any relation to the contents of this website.</p>
<p>For purposes of keeing track of your progress through the test, this website stores a cookie with session information. This cookie will expire once you close your browser.</p>
</aside>
</div>
{% endblock %}
{% block webapis %}
<div id="fb-root"></div>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1" id="facebook-jssdk"></script>
<script type="text/javascript" src="//platform.twitter.com/widgets.js" id="twitter-wjs"></script>
{% endblock %}

9
views/next.html.twig Normal file
View File

@ -0,0 +1,9 @@
{% extends 'base.html.twig' %}
{% block content %}
<header class="page-header">
<h1>Change blindness test (step {{ step_count }} of 3)</h1>
</header>
<p>Your response has been recorded.</p>
<p><a class="btn">&laquo; Retry</a> <a class="btn btn-primary" href="{{ next_url }}">Continue to step {{ step_count + 1 }} &raquo;</a></p>
{% endblock %}

77
views/results.html.twig Normal file
View File

@ -0,0 +1,77 @@
{% extends 'base.html.twig' %}
{% block content %}
<header class="page-header">
<h1>Change blindness results</h1>
</header>
<div class="alert alert-info">{% if records == 1 %}Retrieved 1 result.{% else %}Retrieved {{ records }} results.{% endif %}</div>
{% if allow_filtering %}
<div class="btn-group">
<a class="btn{% if filtered %} active{% endif %}" href="results/filtered">Filtered results</a>
<a class="btn{% if not filtered %} active{% endif %}" href="results">All results</a>
</div>
{% endif %}
<h2 id="statistics">Statistics</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Notable</th>
<th>Unnoted</th>
<th>Renoted</th>
</tr>
</thead>
<tbody>
{% for record in stats %}
<tr>
<td>{{ loop.index }}.</td>
{% if record.notable.correct %}<td class="alert-success"><i class="icon-ok"></i>{% else %}<td class="alert-danger"><i class="icon-remove"></i>{% endif %}&nbsp;{{ record.notable.time / 1000 }} seconds</td>
{% if record.unnoted.correct %}<td class="alert-success"><i class="icon-ok"></i>{% else %}<td class="alert-danger"><i class="icon-remove"></i>{% endif %}&nbsp;{{ record.unnoted.time / 1000 }} seconds</td>
{% if record.renoted.correct %}<td class="alert-success"><i class="icon-ok"></i>{% else %}<td class="alert-danger"><i class="icon-remove"></i>{% endif %}&nbsp;{{ record.renoted.time / 1000 }} seconds</td>
</tr>
{% endfor %}
</tbody>
</table>
<h2 id="raw-results">Raw results</h2>
<p><a class="btn" href="results/download"><i class="icon-download-alt"></i> Download results</a></p>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th colspan="3">Notable</th>
<th colspan="3">Unnoted</th>
<th colspan="3">Renoted</th>
</tr>
<tr>
<th></th>
<th>x</th>
<th>y</th>
<th>time</th>
<th>x</th>
<th>y</th>
<th>time</th>
<th>x</th>
<th>y</th>
<th>time</th>
</tr>
</thead>
<tbody>
{% for record in data %}
<tr class="{% if record.result.host == '192.168.0.1' %}muted{% endif %}">
<td>{{ loop.index }}.</td>
<td>{{ record.notable.xcoordinate }}</td>
<td>{{ record.notable.ycoordinate }}</td>
<td>{{ record.notable.responsetime }}</td>
<td>{{ record.unnoted.xcoordinate }}</td>
<td>{{ record.unnoted.ycoordinate }}</td>
<td>{{ record.unnoted.responsetime }}</td>
<td>{{ record.renoted.xcoordinate }}</td>
<td>{{ record.renoted.ycoordinate }}</td>
<td>{{ record.renoted.responsetime }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}

5
views/results.txt.twig Normal file
View File

@ -0,0 +1,5 @@
notable unnoted renoted
x y time x y time x y time
{% for result in data %}
{{result.notable.xcoordinate}} {{result.notable.ycoordinate}} {{result.notable.responsetime}} {{result.unnoted.xcoordinate}} {{result.unnoted.ycoordinate}} {{result.unnoted.responsetime}} {{result.renoted.xcoordinate}} {{result.renoted.ycoordinate}} {{result.renoted.responsetime}}
{% endfor %}