static files collection structure

.gitignore

@@ -2,4 +2,4 @@ db.sqlite3
 .idea/
 *.pyc
 *~
-
+static/

selectionTask/static/css/cards.css

@@ -0,0 +1,42 @@
+.red {
+    background: darkred;
+}
+
+.green {
+    background: darkgreen;
+}
+
+.blue {
+    background: darkblue;
+}
+
+.orange {
+    background: darkorange;
+}
+
+.yellow {
+    background: yellow;
+}
+
+.white {
+    background: white;
+}
+
+.black {
+    background: black;
+}
+
+.beer {
+    background: url('/selectionTask/static/svg/beer.svg') no-repeat center;
+    background-size: 100%;
+}
+
+.juice {
+    background: url('/selectionTask/static/svg/juice.svg') no-repeat center;
+    background-size: 100%;
+}
+
+.car {
+    background: url('/selectionTask/static/svg/car.svg') no-repeat center;
+    background-size: 100%;
+}

selectionTask/static/css/page.css

@@ -0,0 +1,164 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url('/selectionTask/static/css/UyBMtLsHKBKXelqf4x7VRQ.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url('/selectionTask/static/css/7aC-Y4V2UPHQp-tqeekgkA.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
+body {
+    font-family: 'Lato', sans-serif;
+}
+
+.intro-heading {
+    margin: 3em auto;
+}
+
+.intro-text {
+    max-width: 750px;
+    margin: 3em auto;
+    border: 1px solid #808080;
+    border-radius: 5px;
+    text-align: center;
+    padding: 1%;
+    box-shadow: 4px 4px 10px black;
+}
+
+.progressbar {
+    height: 1em;
+    width: calc(100% - 4em);
+    margin: 2em;
+    background-color: gray;
+    border: 1px solid #808080;
+    border-radius: 5px;
+}
+
+.progress {
+    height: 100%;
+    background-color: #212121;
+    border-radius: 5px;
+}
+
+.title {
+    max-width: 800px;
+    margin: 1em auto 0 auto;
+}
+
+.title p {
+    margin: 0;
+}
+
+.story {
+
+    text-align: center;
+    border: 1px solid #808080;
+    border-radius: 5px;
+    max-width: 750px;
+    margin: 0.5em auto 1em auto;
+    padding: 1%;
+    box-shadow: 4px 4px 10px black;
+}
+
+.taskdescription {
+
+    text-align: center;
+    border: 1px solid #808080;
+    border-radius: 5px;
+    max-width: 750px;
+    margin: 0.5em auto 1em auto;
+    padding: 1%;
+    box-shadow: 4px 4px 10px black;
+}
+
+.taskQuestion {
+
+    text-align: center;
+    border: 1px solid #808080;
+    border-radius: 5px;
+    max-width: 750px;
+    margin: 0.5em auto 1em auto;
+    padding: 1%;
+    box-shadow: 4px 4px 10px black;
+}
+
+.card-centering-row {
+    position: relative;
+    left: 50%;
+}
+
+@media (max-width: 682px) {
+    .card-centering-row {
+        width: 324px;
+    }
+}
+
+.card-container {
+    display: inline-block;
+    padding: 10px;
+    margin: 1em 10px;
+    border-radius: 15px;
+    width: 100%;
+    border: 5px solid rgba(255, 255, 255, 0);
+    cursor: pointer;
+    max-width: 110px;
+}
+
+.selected {
+    border-color: rgba(255, 0, 0, 1);
+}
+
+.card {
+    box-shadow: 4px 4px 10px black;
+    border-radius: 10px;
+    border: 1px solid #808080;
+    font-size: 400%;
+    padding: 0.5em 0;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.nextbutton {
+
+    float: right;
+    margin-right: 10em;
+    margin-bottom: 2em;
+    font-size: 15pt;
+    border-radius: 5px;
+    padding: 15px;
+}
+
+.continuebutton {
+    float: right;
+    margin-right: 10em;
+    margin-bottom: 2em;
+    font-size: 15pt;
+    border-radius: 5px;
+    padding: 15px;
+}
+
+.thanks-text {
+    max-width: 750px;
+    margin: 5em auto;
+    border: 1px solid #808080;
+    border-radius: 5px;
+    text-align: center;
+    padding: 1%;
+    box-shadow: 4px 4px 10px black;
+}
+
+.submitbutton {
+    float: right;
+    font-size: 15pt;
+    border-radius: 5px;
+    margin-right: 3em;
+    padding: 15px;
+}

selectionTask/static/i18n/resources-locale_default.js

@@ -0,0 +1 @@
+resources-locale_jp.js

selectionTask/static/i18n/resources-locale_en.js

@@ -0,0 +1,57 @@
+[
+    {
+        "key"        : "_nextButton_",
+        "value"      : "Next task",
+        "description": "Next button used during the tasks"
+    },
+    {
+        "key"        : "_submitButton_",
+        "value"      : "Submit results",
+        "description": "Submit button used after the tasks to submit results"
+    },
+    {
+        "key"        : "_taskQuestion_",
+        "value"      : "Which cards have to be flipped to proof the above mentioned rule?",
+        "description": "Question regarding the task"
+    },
+    {
+        "key"        : "_welcomeMessage_",
+        "value"      : "Welcome to the experiment",
+        "description": "Welcome Message on introduction page"
+    },
+    {
+        "key"        : "_continueButton_",
+        "value"      : "Continue to experiment",
+        "description": "Continue button on introduction page"
+    },
+    {
+        "key"        : "_thanksText_",
+        "value"      : "Thank you for taking part in the experiment. After pressing the submit button you will be leaded to the survey.",
+        "description": "Thanks text after completing experiment"
+    },
+    {
+        "key"        : "_storyHeading_",
+        "value"      : "Story:",
+        "description": ""
+    },
+    {
+        "key"        : "_ruleHeading_",
+        "value"      : "Rule:",
+        "description": ""
+    },
+    {
+        "key"        : "_error_",
+        "value"      : "Error:",
+        "description": ""
+    },
+    {
+        "key"        : "_questionHeading_",
+        "value"      : "Question:",
+        "description": ""
+    },
+    {
+        "key"        : "_experimentDescription_",
+        "value"      : "Each experiment consists of a description, a story, a rule and four cards. Please read everything carefully and decide which card or cards have to be flipped to proof the rule. It's possible to click any combination of cards or none.",
+        "description": ""
+    }
+]

selectionTask/static/i18n/resources-locale_jp.js

@@ -0,0 +1,57 @@
+[
+    {
+        "key"        : "_nextButton_",
+        "value"      : "次へ",
+        "description": "Next button"
+    },
+    {
+        "key"        : "_submitButton_",
+        "value"      : "送信",
+        "description": "Submit button used after the tasks to submit results"
+    },
+    {
+        "key"        : "_taskQuestion_",
+        "value"      : "上記のルールが守られているかどうかを確かめるためには、どのカードをめくって確かめる必要があると思いますか？",
+        "description": "Question regarding the task"
+    },
+    {
+        "key"        : "_welcomeMessage_",
+        "value"      : "実験ページへようこそ",
+        "description": "Welcome Message on introduction page"
+    },
+    {
+        "key"        : "_continueButton_",
+        "value"      : "実験へ進む",
+        "description": "Continue button on introduction page"
+    },
+    {
+        "key"        : "_thanksText_",
+        "value"      : "ご回答ありがとうございました。送信ボタンを押下すると調査サイトへ戻ります",
+        "description": "Thanks text after completing experiment"
+    },
+    {
+        "key"        : "_storyHeading_",
+        "value"      : "ストーリー：",
+        "description": "Heading which says story"
+    },
+    {
+        "key"        : "_ruleHeading_",
+        "value"      : "ルール：",
+        "description": "Heading which says rule"
+    },
+    {
+        "key"        : "_error_",
+        "value"      : "エラー：",
+        "description": "Heading which says error"
+    },
+    {
+        "key"        : "_questionHeading_",
+        "value"      : "質問：",
+        "description": " question"
+    },
+    {
+        "key"        : "_experimentDescription_",
+        "value"      : "Each experiment consists of a description, a story, a rule and four cards. Please read everything carefully and decide which card or cards have to be flipped to proof the rule. It's possible to click any combination of cards or none.",
+        "description": ""
+    }
+]

selectionTask/static/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html ng-app="selectionTask">
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Four Card Experiment</title>
+    <link rel="stylesheet" href="/static/css/page.css"/>
+    <link rel="stylesheet" href="/static/css/cards.css"/>
+
+    <script type="text/javascript" src="/static/lib/angular.js"></script>
+    <script type="text/javascript" src="/static/lib/angular-route.js"></script>
+    <script type="text/javascript" src="/static/lib/angular-animate.js"></script>
+    <script type="text/javascript" src="/static/lib/angular-mocks.js"></script>
+    <script type="text/javascript" src="/static/lib/localize.js"></script>
+    <script type="text/javascript" src="/static/js/app.js"></script>
+    <script type="text/javascript" src="/static/js/service/service.js"></script>
+    <script type="text/javascript" src="/static/js/controller/introductionCtrl.js"></script>
+    <script type="text/javascript" src="/static/js/controller/taskCtrl.js"></script>
+    <script type="text/javascript" src="/static/js/controller/thanksCtrl.js"></script>
+    <script type="text/javascript" src="/static/js/controller/errorCtrl.js"></script>
+</head>
+<body>
+    <div ng-view></div>
+</body>
+</html>