adding code

Dockerfile

@@ -0,0 +1,19 @@
+FROM ubuntu:16.04
+
+RUN apt-get update && apt-get install -y git python3-pip python3-dev
+WORKDIR /opt 
+RUN git clone https://www.github.com/expfactory/expfactory
+WORKDIR expfactory 
+RUN python3 setup.py install
+RUN python3 -m pip install pandas
+
+RUN mkdir /code  # for script
+WORKDIR /code
+ADD . /code
+RUN chmod u+x /code/entrypoint.sh && \
+    chmod u+x /code/survey.py
+
+RUN mkdir /data  # bind survey folder to
+RUN apt-get clean
+
+ENTRYPOINT ["/bin/bash", "/code/entrypoint.sh"]

README.md

@@ -0,0 +1,72 @@
+# Experiment Factory Survey Generator
+
+You can use the generator to convert a tab delimited file of questions (called `survey.tsv`)
+with a standard [experiment factory config.json](https://expfactory.github.io/expfactory/contribute#the-experiment-config)
+to generate a folder with web content to serve your experiment.
+
+## Usage
+
+First, generate your questions and config. As linked above, the configuration file
+has the same requirements as an experiment in the Experiment Factory. For template,
+you should put `"survey"`. The survey file should have the following fields in the 
+first row, the header:
+
+ - `question_type`: can be one of textfield, numeric (a numeric text field), radio, checkbox, or instruction. These are standard form elements, and will render in the Google Material Design Lite style.
+ - `question_text`: is the text content of the question, e.g., How do you feel when you wake up in the morning?
+ - `required`: is a boolean (0 or 1) to indicate if the participant is required to answer the question (1) or not (0) before moving on in the survey.
+ - `page_number`: determines the page that the question will be rendered on. If you look at an example survey you will notice that questions are separated by Next / Previous tabs, and the final page has a Finish button. It was important for us to give control over pagination to preserve how some “old school” questionnaires were presented to participants.
+ - `option_text`: For radio and checkboxes, you are asking the user to select from one or more options. These should be the text portion (what the user sees on the screen), and separated by commas (e.g, Yes,No,Sometimes. Note: these fields are not required for instructions or textbox types, and can be left as empty tabs.
+ - `option_values`: Also for radio and checkboxes, these are the data values that correspond to the text. For example, the option_text Yes,No may correspond to 1,0. This field is typically blank for instructions or textbox types.
+
+We have provided an folder with examples ([state-minfullness-survey](state-minfullness-survey)) that you can use to generate a new survey.
+
+## Run the Container
+To generate the survey, we will run the container from the folder where our two files are.
+If we run without specifying `start` we will get a help prompt. But really we don't need to look at it,
+because most of the arguments are set in the image. We just need to make sure that 
+
+ - 1. the `config.json` and `survey.tsv` are in the present working directory
+ - 2. we specify `start`
+ - 3. we map the `$PWD` (or where our survey and config are) to `/data` in the container
+
+
+
+```
+cd state-mindfulness-survey
+ls 
+config.json    survey.tsv
+```
+
+The output is minimal, but when we finish, our survey is ready!
+
+```
+$ docker run -v $PWD:/data vanessa/expfactory-survey start
+Writing output files to /data/index.html
+index.html
+js
+css
+LICENSE
+README.md
+
+$ ls
+config.json  css  index.html  js  LICENSE  README.md  survey.tsv
+```
+
+Now we can easily test it by opening a web browser:
+
+```
+python -m http.server 9999
+```
+
+If you need to generate the `index.html` again and force overwrite, use `--force`.
+
+```
+docker run -v $PWD:/data vanessa/expfactory-survey start --force
+```
+
+## Development
+If you want to build the image:
+
+```
+docker build -t vanessa/expfactory-survey .
+```

css/style.css

@@ -0,0 +1,183 @@
+.experiment-ribbon {
+  width: 100%;
+  height: 40vh;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+
+.experiment-main {
+  margin-top: -35vh;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+
+.experiment-header .mdl-layout__header-row {
+  padding-left: 40px;
+}
+
+.experiment-container {
+  max-width: 1600px;
+  width: calc(100% - 16px);
+  margin: 0 auto;
+}
+
+.experiment-content {
+  border-radius: 2px;
+  padding: 80px 56px;
+  margin-bottom: 80px;
+}
+
+.experiment-layout.is-small-screen .experiment-content {
+  padding: 40px 28px;
+}
+
+.experiment-content h3 {
+  margin-top: 48px;
+}
+
+.experiment-footer {
+  padding-left: 40px;
+}
+
+.experiment-footer .mdl-mini-footer--link-list a {
+  font-size: 13px;
+}
+
+#next_button {
+  position: fixed;
+  display: block;
+  right: 0;
+  bottom: 0;
+  margin-right: 40px;
+  margin-bottom: 40px;
+  z-index: 900;
+}
+.mdl-radio__label {
+  padding-right:20px;
+}
+
+/* Jquery Wizard */
+
+#navigation {
+    background-color: #fff;
+    border: #ddd 1px solid;
+    border-radius: 10px;
+    margin: 10px;
+    padding: 10px;
+}
+
+#navigation li {
+    margin: 2px 0;
+}
+
+label.error {
+    color: #ff0000;
+    margin-left: 10px;
+    position: relative;
+}
+
+#progressbar {
+    margin: 10px 0;
+    width: 400px;
+    height: 15px;
+}
+
+
+.navigation {
+    margin-top: 50px;
+    padding-top: 10px;
+}
+
+.navigation ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.navigation li {
+    float: left;
+    margin-right: 10px;
+}
+
+.pad {
+    margin-top:30px;
+    padding: 5px;
+}
+
+.blue {
+    background: blue;
+    color: white;
+}
+
+.pink {
+    background: pink;
+    color: black;
+}
+
+.mdl-radio__label {
+  display: inline-block;
+    width: 10em;
+    padding-top: 1.5em;
+    transform: translate(-53%,0%);
+    text-align: center;
+}
+
+.mdl-radio {
+	float: left;
+	width: 100px;
+	margin-left: 48px;
+}
+
+.experiment-content {
+  border-radius: 2px;
+  padding: 100px 180px 100px;
+  margin-bottom: 80px;
+}
+
+.mdl-cell--8-col, .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
+  width: 1400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mdl-cell--2-col, .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
+  width: calc(0%)
+}
+
+.wizard-step {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+body {
+	line-height: 25px;
+}
+
+p {
+	font-weight: bold;
+}
+
+/* Add gray line for Likert */
+
+form p:before {
+  content: '';
+  position:relative;
+  top:53px;
+  left:61px;
+  display:block;
+  background-color:#efefef;
+  height:4px;
+  width:888px;
+}
+
+.mdl-radio.is-checked .mdl-radio__outer-circle {
+  background-color:transparent;
+}
+
+.mdl-radio__outer-circle{
+  background-color:white;
+}
+

css/surveys.css

@@ -0,0 +1,117 @@
+.experiment-ribbon {
+  width: 100%;
+  height: 40vh;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+
+.experiment-main {
+  margin-top: -35vh;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+
+.experiment-header .mdl-layout__header-row {
+  padding-left: 40px;
+}
+
+.experiment-container {
+  max-width: 1600px;
+  width: calc(100% - 16px);
+  margin: 0 auto;
+}
+
+.experiment-content {
+  border-radius: 2px;
+  padding: 80px 56px;
+  margin-bottom: 80px;
+}
+
+.experiment-layout.is-small-screen .experiment-content {
+  padding: 40px 28px;
+}
+
+.experiment-content h3 {
+  margin-top: 48px;
+}
+
+.experiment-footer {
+  padding-left: 40px;
+}
+
+.experiment-footer .mdl-mini-footer--link-list a {
+  font-size: 13px;
+}
+
+#next_button {
+  position: fixed;
+  display: block;
+  right: 0;
+  bottom: 0;
+  margin-right: 40px;
+  margin-bottom: 40px;
+  z-index: 900;
+}
+.mdl-radio__label {
+  padding-right:20px;
+}
+
+/* Jquery Wizard */
+
+#navigation {
+    background-color: #fff;
+    border: #ddd 1px solid;
+    border-radius: 10px;
+    margin: 10px;
+    padding: 10px;
+}
+
+#navigation li {
+    margin: 2px 0;
+}
+
+label.error {
+    color: #ff0000;
+    margin-left: 10px;
+    position: relative;
+}
+
+#progressbar {
+    margin: 10px 0;
+    width: 400px;
+    height: 15px;
+}
+
+
+.navigation {
+    margin-top: 50px;
+    padding-top: 10px;
+}
+
+.navigation ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.navigation li {
+    float: left;
+    margin-right: 10px;
+}
+
+.pad {
+    margin-top:30px;
+    padding: 5px;
+}
+
+.blue {
+    background: blue;
+    color: white;
+}
+
+.pink {
+    background: pink;
+    color: black;
+}