initial commit

aproxima · Feb 4, 2015 · 5910904 · 5910904
commit 5910904
Show file tree

Hide file tree

Showing 45 changed files with 3,267 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+/data/
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,7 @@
+Copyright (c) 2014-2015 aproxima Gesellschaft für Markt- und Sozialforschung Weimar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,46 @@
+## HtmlQ
+
+by **aproxima Gesellschaft für Markt- und Sozialforschung Weimar**
+
+Q-sorting tool in HTML5. Backwards compatible with settings files of [FlashQ](http://www.hackert.biz/flashq/home/).
+
+## Features
+
+* Responsive layout for iPad and Android tablets
+* Compatible with Internet Explorer 8 and later
+* Compatible with settings files of [FlashQ](http://www.hackert.biz/flashq/home/)
+* Compatible with [FlashQ PHP backend](http://www.hackert.biz/flashq/downloads/)
+
+## Settings
+
+All .XML files in the settings subfolder are compatible with the settings files of FlashQ. A description of the settings files can be found at [http://www.hackert.biz/flashq/faq/]().
+
+### Additional settings (vs. FlashQ)
+
+HtmlQ introduces a few new settings that were not available in FlashQ:
+
+`settings/config.xml`:
+
+    <!-- Disable the back button within the page. Users can always use the browser back button to navigate the survey anyway. -->
+    <item id="disableBackButton">true</item>
+
+
+`settings/language.xml`:
+
+    <!-- Label of the back button -->
+    <item id="backButton">Back</item>
+
+    <!-- Message that is shown to the user when not all required fields in step 5 were filled in -->
+    <item id="fillInRequiredFields">Please fill in all required fields.</item>
+
+    <!-- Warning that will be displayed to the user if they try to navigate away from the questionnaire and could lose their data -->
+    <item id="leaveSiteWarning">Your answers will be lost.</item>
+
+
+## Custom Logos
+
+You can add up to three images (e.g. company logos) to the header by replacing the respective `logo.jpg`, `logo_center.jpg` and `logo_right.jpg` files.
+
+## License
+
+HtmlQ is released under the [MIT License](http://www.opensource.org/licenses/MIT).
diff --git a/fonts/glyphicons-halflings-regular.eot b/fonts/glyphicons-halflings-regular.eot
diff --git a/fonts/glyphicons-halflings-regular.svg b/fonts/glyphicons-halflings-regular.svg
diff --git a/fonts/glyphicons-halflings-regular.ttf b/fonts/glyphicons-halflings-regular.ttf
diff --git a/fonts/glyphicons-halflings-regular.woff b/fonts/glyphicons-halflings-regular.woff
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="app" ng-keyup="$broadcast('my:keyup', $event)">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>HtmlQ</title>
+
+        <script src="src/jquery.min.js" type="text/javascript"></script>
+        <script src="src/jquery-ui.min.js" type="text/javascript"></script>
+        <script src="src/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
+        <script src="src/jquery-dateFormat.min.js" type="text/javascript"></script>
+        <script src="src/bootstrap.min.js" type="text/javascript"></script>
+        <script src="src/angular.min.js" type="text/javascript"></script>
+        <script src="src/angular-ui-router.min.js" type="text/javascript"></script>
+        <script src="src/ui-bootstrap-custom-tpls.min.js" type="text/javascript"></script>
+        <script src="src/xml2json.min.js" type="text/javascript"></script>
+        <script src="src/jsonpath.js" type="text/javascript"></script>
+        <script src="src/underscore-min.js" type="text/javascript"></script>
+        <script src="src/htmlq.js" type="text/javascript"></script>
+
+        <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
+        <link rel="stylesheet" href="stylesheets/htmlq.css">
+
+        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+        <!--[if lt IE 9]>
+          <script src="src/html5shiv.min.js"></script>
+          <script src="src/es5-shim.min.js"></script>
+          <script src="src/respond.min.js"></script>
+        <![endif]-->
+    </head>
+    <body>
+        <div ui-view></div>
+    </body>
+</html>
diff --git a/logo.jpg b/logo.jpg
diff --git a/logo_center.jpg b/logo_center.jpg
diff --git a/logo_right.jpg b/logo_right.jpg
diff --git a/settings/config.xml b/settings/config.xml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!-- 
+//
+// ===================================================
+// FlashQ by Christian Hackert and Gernot Braehler
+// ===================================================
+// Configuration file.
+// @author		Christian Hackert <www.hackert.biz/flashq>
+// @version		FlashQ version 1.0
+// ===================================================
+// 
+-->
+
+<config version="1.0" htmlParse="false">
+
+  <!-- title of the study -->
+  <item id="studyTitle">Name of your study</item>
+
+  <!-- text-align property(left|right) -->
+  <item id="textAlign">left</item>
+
+  <!-- shuffle cards (true|false)  -->
+  <item id="shuffleCards">true</item>
+
+  <!-- login required (true|false) -->
+  <item id="loginrequired">false</item>
+  <!-- login with common password (leave blank if not required) -->
+  <item id="loginPassword"></item>
+  <!-- URL to individual login script(leave blank if not required) -->
+  <item id="loginUrl"></item>
+  <!-- request mode (post|get) -->
+  <item id="loginUrlMethod"></item>
+
+  <!-- activate/deactivate optional steps (true|false) -->
+  <item id="showStep3">true</item>
+  <item id="showStep4">true</item>
+  <item id="showStep5">true</item>
+
+  <!-- HtmlQ only: disable the in-window back button -->
+  <item id="disableBackButton">true</item>
+
+  <!-- define form elements for step5; only displayed if showStep5 is true (delete tags if not required) -->
+  <!-- add label: <label>[STRING]</label> -->
+  <!-- add note: <note>[STRING]</note> -->
+  <!-- add input-field: <input type="[text|textarea|radio|select|checkbox|rating2|rating5|rating10]">[VALUE]</input> -->
+  <!-- optional attributes: bg, id, maxlength, restricted, required, scale  -->
+  <item id="form">
+    <label>Age*</label>
+	<note>Please enter your year of birth (YYYY, eg. 1980).</note>
+	<input type="text" required="true" maxlength="4" restricted="0-9"></input>
+
+    <label>Gender*</label>
+	<note>Please select your gender.</note>
+	<input type="radio" required="true">female;male</input>
+
+    <label>Please answer the following questions.</label>
+	<input type="rating2" required="false" scale="Yes;No;">There's a car in my household;I own a car for myself</input>
+
+    <label>What kind of transportation do you use?</label>
+	<input type="checkbox" required="false">Car;Railroad;Bike</input>
+
+    <label>What kind of transportation do you prefer?</label>
+	<input type="select" required="false">Car;Railroad;Bike</input>
+
+    <label>Comments</label>
+	<input type="textarea" required="false"></input>
+
+    <note bg="false">All fields marked with an * are mandatory.</note>
+  </item>
+
+  <!-- URL for data transmission via POST/GET (leave blank if not required) -->
+  <item id="submitUrl">exe.php?do=save</item>
+  <!-- request mode (post|get) -->
+  <item id="submitUrlMethod">post</item>
+
+  <!-- data transmission via email, user must have an e-mail programm like Outlook (leave blank if not required) -->
+  <item id="submitMail">yourdomain.com</item>
+ </config>
diff --git a/settings/language.xml b/settings/language.xml
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!-- 
+//
+// ===================================================
+// FlashQ by Christian Hackert and Gernot Braehler
+// ===================================================
+// Language pack.
+// @author		Christian Hackert <www.hackert.biz/flashq>
+// @version		FlashQ version 1.0
+// ===================================================
+// 
+// In order to translate FlashQ or to customize the texts, 
+// just change the text between the opening and the closing 
+// tag. The attribute 'id' is the name of the variable 
+// and must remain unchanged.  
+//
+// You can use HTML-tags, but you have to braces instead 
+// of the normal angle brackets, otherwise the import will fail. 
+// Example: {b}bold{/b}
+//
+// If your are using German Umlauts and other special 
+// characters, make sure, that you save this XML-file 
+// as an UTF-8-document. White-space inbetween the 
+// nodes are ignored. Any white-space within the text-
+// nodes, including leading or trailing whitespace and 
+// line breaks, is preserved.
+//
+// ===================================================
+// 
+-->
+
+<language version="1.0" htmlParse="true">
+
+  <!-- misc -->
+  <item id="btnContinue">Continue...</item>
+  <item id="btnclose">Close</item>
+  <item id="btnHelp">Help me!</item>
+  <item id="btnAgreement">Agree</item>
+  <item id="btnNeutral">Neutral</item>
+  <item id="btnDisagreement">Disagree</item>
+  <item id="btnTransfer">Submit data</item>
+  <item id="btnMail">Send via email</item>
+  <item id="btnPrint">Print data</item>
+  <item id="btnExit">Exit</item>
+  <item id="selectItem">Please select...</item>
+
+  <!-- Warning when user is trying to leave the page (this item was added for HtmlQ) -->
+  <item id="leaveSiteWarning">Your answers will be lost.</item>
+
+  <!-- HtmlQ only: In-App Back Button -->
+  <item id="backButton">Back</item>
+  <item id="fillInRequiredFields">Please fill in all required fields.</item>
+
+  <!-- errors -->
+  <item id="errorHead">Error!</item>
+  <item id="errorWindowTooSmall">Please maximize your browser for using this application.</item>
+
+  <!-- welcome screen (leave blank to skip screen) -->
+  <item id="welcomeHead">Welcome!</item>
+  <item id="welcomeText">Please note: This is just a demo and no data will be stored. Thanks to Job van Exel, that we can use his survey as an example.{br}{br}Comments and bug reports are highly welcome.{br}{br}Please click on the continue-button.</item>
+
+  <!-- user login, only displayed if access is restricted (see config-file) -->
+  <item id="loginHead">User code</item>
+  <item id="loginText">Please enter your user code. Please note, that in this demo any user code will be accepted.{br}{br}{i}Tip: This is an optional step and you can deactivate it in your own survey.{i}</item>
+  <item id="loginFormHeader">User code</item>
+  <item id="loginNoInput">Please insert your user code.</item>
+  <item id="loginInvalidInput">User code invalid</item>
+  <item id="loginNoConnection">Connection to server failed. Please try again.</item>
+
+  <!-- introduction (leave blank to skip popup) -->
+  <item id="introHead">Introduction</item>
+  <item id="introText">This study is about travel behaviour. We are interested in your attitude towards car and public transport as travel alternatives for middle-distance trips.{br}{br}Please maximize your browser window and click on the continue-button to start the survey.</item>
+
+  <!-- step1: rough sorting into three piles (leave blank to skip popup)-->
+  <item id="step1Head">Step 1 of 5</item>
+  <item id="step1Text">Read the folowing statements carefully and split them up into three piles: a pile for statements you tend to disagree with, a pile for cards you tend to agree with, and a pile for the rest.{br}{br}You can either drag the cards into one of the three piles or press 1, 2, 3 on your keyboard. Changes can be made later.{br}{br}If you want to read this instruction a second time, press the help-button at the bottom left corner.</item>
+
+  <!-- step2: sorting (leave blank to skip popup) -->
+  <item id="step2Head">Step 2 of 5</item>
+  <item id="step2Text">Take the cards from the "AGREE"-pile and read them again. You can scroll through the statements by using the scroll bar. Next, select the two statements you most agree with and place them on right side of the score sheet below the "+2".{br}{br}Now read the cards in the "DISAGREE"-pile again. Just like before, select the two statements you most disagree with and place them on the left side of the score sheet below the "-2".{br}{br}Next, select the statements you second most agree/disagree with and place them under "+1"/"-1". Follow this procedure for all cards in the "AGREE"- and "DIAGREE"-pile.{br}{br}Finally, read the "NEUTRAL"-cards again and arange them in the remaining open boxes of the score sheet.</item>
+
+  <!-- step3: check sorting, only displayed if showStep3== true (see config-file; leave blank to skip popup)-->
+  <item id="step3Head">Step 3 of 5</item>
+  <item id="step3Text">Now you have placed all cards on the score sheet. Please go over your distribution once more and shift cards if you want to.{br}{br}{i}Tip: This is an optional step and you can deactivate it in your own survey.{i}</item>
+
+  <!-- step4: comments on best/worst rated statements, only displayed if showStep4== true (see config-file; leave blank to skip popup) -->
+  <item id="step4Head">Step 4 of 5</item>
+  <item id="step4Text">Please explain why you agree most or disagree most with the following statements you have placed below "+2" or "-2".{br}{br}{i}Tip: This is a optional step and you can deactivate it in your own survey.{i}</item>
+
+  <!-- step5: dditional questions, only displayed if showStep5== true (see config-file; leave blank to skip popup)-->
+  <item id="step5Head">Step 5 of 5</item>
+  <item id="step5Text">Finally, please answer the following questions regarding your background.{br}{br}{i}Tip: This is a optional step and you can deactivate it in your own survey.{i}</item>
+
+  <!-- data transfer, only displayed if submitUrl is not blank (see config-file) -->
+  <item id="transferHead">Submit Data</item>
+  <item id="transferText">You've finished the survey. Please submit your data now.</item>
+  <item id="transferFailed">Data submission failed. Please try again or mail your results via email/post.</item>
+  <item id="transferOk">Thank you for unsing FlashQ. We would appreciate if you could send us feeddback about this application (bugs, ideas, suggestion, etc.).{br}{br}Christian Hackert{br}{a href="http://www.hackert.biz/flashq" target="_blank"}{u}www.hackert.biz/flashq{/u}{/a}.{br}{br}You can now close your browser window.</item>
+
+  <!-- send data via mail, only displayed if submitUrl is blank (see config-file) -->
+  <item id="mailHead">Submit Data</item>
+  <item id="mailText">You can either submit your data either via email or post. In the former case you'll need an email client like Outlook, in the latter a printer.</item>
+
+  <!-- e-mail-body -->
+  <item id="mailBody">Thank you for participating in our survey. Please do not modify the following text:</item>
+
+  <!-- print out -->
+  <item id="printoutText">Somebody{br}Some street 100{br}Some city{br}{br}Please send this printout to address mentioned above. Thanks for you help.</item>
+
+</language>
diff --git a/settings/map.xml b/settings/map.xml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!-- 
+//
+// ===================================================
+// FlashQ by Christian Hackert and Gernot Braehler
+// ===================================================
+// Distribution and score sheet.
+// @author		Christian Hackert <www.hackert.biz/flashq>
+// @version		FlashQ version 1.0
+// ===================================================
+// 
+// In this file you can set up the score sheet. FlashQ can 
+// handle all types of distribution (including non-forced).
+// 
+// EXAMPLE
+// Let's have a look at a (very) simple example with
+// three columns and a bell-shaped distribution:
+//
+// |====|====|====|
+// | -1 | 0  | +1 |
+// |====|====|====|
+// |    |    |    | 
+// |====|====|====|
+//      |    |
+//      |====|
+//
+//
+// We have three columns, so we need three column-
+// nodes in our XML-file. The column heads (-1, 0,
+// +1) are saved in an attribute named 'id'. The 
+// number of rows per column (1, 2, 1) goes between 
+// the opening and the closing column-tag. If you 
+// want to have coloured column heads, use the 'colour'-
+// attribute (hex code). All column-nodes are surrounded 
+// by a parent-node called 'map'. The finshied file 
+// looks like the following:
+// 
+// <map version="1.0" hmtlParse="false">
+//   <column id="-1" colour="FFD5D5">1</column>
+//   <column id="0" colour="E9E9E9">2</column>
+//   <column id="+1" colour="9FDFBF">1</column>
+// </map>
+//
+// ===================================================
+// 
+-->
+
+<map version="1.0" htmlParse="false">
+  <column id="-2" colour="FFD5D5">2</column>
+  <column id="-1" colour="FFD5D5">3</column>
+  <column id=" 0" colour="E9E9E9">4</column>
+  <column id="+1" colour="9FDFBF">3</column>
+  <column id="+2" colour="9FDFBF">2</column>
+</map>