Matching Questions and the start of Order Questions

app/assets/javascripts/table.js

@@ -0,0 +1,125 @@
+function tableDraw()
+        {this.span();
+
+         var props = "";
+         var i = 0;
+         var dummyRows = this.content.length;
+         var dummyCols = this.content[0].length;
+
+         var dummyCode = '<table';
+         for (prop in this)
+                 {if (i >= this.propsLengthPublic) {break;}
+                  dummyCode = dummyCode+' '+prop+'="'+this[prop]+'"';i++;
+                }
+         dummyCode = dummyCode+'>\n';
+
+         for (var i=1;i<=dummyRows;i++)
+                {dummyCode = dummyCode+'<tr>\n';
+                 for (var k=1;k<=dummyCols;k++)
+                        {if (this.content[(i-1)][(k-1)][2] == "false")
+                                {dummyCode = dummyCode+'        <td '+this.content[(i-1)][(k-1)][0]+'>'+this.content[(i-1)][(k-1)][1]+'</td>\n';}
+                        }
+                 dummyCode = dummyCode+'</tr>\n';
+                }
+
+         dummyCode = dummyCode+'</table>\n';
+         return dummyCode;
+        }
+
+function tableSpan()
+        {var dummyRows = this.content.length;
+         var dummyCols = this.content[0].length;
+
+         for (var i=1;i<=dummyRows;i++)
+                {var rowspan = 0;var colspan = 0;
+                 var fromHere = 0;var tillThere = 0;
+                 var myString = "";
+                 for (var k=1;k<=dummyCols;k++)
+                        {rowspan = 0;colspan = 0;
+                         if (this.content[(i-1)][(k-1)][2] == "false")
+                                {myString = (this.content[(i-1)][(k-1)][0]) + "";
+                                 if (myString.indexOf("colspan") >= 0)
+                                        {fromHere = (myString.indexOf("colspan"))+9;
+                                         tillThere = (myString.indexOf('"',fromHere))-1;
+                                         if ((fromHere-tillThere) == 0)
+                                                {colspan = myString.charAt(fromHere);}
+                                         else
+                                                 {colspan = myString.substring(fromHere,tillThere);}
+                                         colspan = parseInt(colspan);
+                                        }
+                                 if (myString.indexOf("rowspan") >= 0)
+                                        {fromHere = (myString.indexOf("rowspan"))+9;
+                                         tillThere = (myString.indexOf('"',fromHere))-1;
+                                         if ((fromHere-tillThere) == 0)
+                                                {rowspan = myString.charAt(fromHere);}
+                                         else
+                                                 {rowspan = myString.substring(fromHere,tillThere);}
+                                         rowspan = parseInt(rowspan);
+                                        }
+                                 if ((colspan >= 2) && (rowspan <= 1))
+                                        {for (var m=2;m<=colspan;m++)
+                                                {this.content[(i-1)][((k-1)+(m-1))][2] = "true";}
+                                        }
+                                 if ((rowspan >= 2) && (colspan <= 1))
+                                        {for (var m=2;m<=rowspan;m++)
+                                                {this.content[((i-1)+(m-1))][(k-1)][2] = "true";}
+                                        }
+                                 if ((rowspan >= 2) && (colspan >= 2))
+                                        {for (var m=1;m<=rowspan;m++)
+                                                {for (var p=1;p<=colspan;p++)
+                                                        {this.content[((i-1)+(m-1))][((k-1)+(p-1))][2] = "true";}
+                                                }
+                                         this.content[(i-1)][(k-1)][2] = "false";
+        }        }        }        }        }
+
+function tableContent(dummyCols,dummyRows)
+        {var dummyContent = "[";
+         for (var i=1;i<=dummyRows;i++)
+                {dummyContent = dummyContent+"["
+                 for (var k=1;k<=dummyCols;k++)
+                        {dummyContent = dummyContent+"[['align="+'"left"'+" valign="+'"top"'+"'],[' '],['false']],";}
+                 dummyContent = dummyContent.substring(0,((dummyContent.length)-1));
+                 dummyContent = dummyContent+"],"
+                }
+         dummyContent = dummyContent.substring(0,((dummyContent.length)-1));
+         dummyContent = dummyContent+"]";
+         return eval(dummyContent);
+        }
+
+function tableContentArraysToArguments()
+        {var dummyRows = this.content.length;
+         var dummyCols = this.content[0].length;
+         for (var i=1;i<=dummyRows;i++)
+                {for (var k=1;k<=dummyCols;k++)
+                        {this.content[(i-1)][(k-1)].props = this.content[(i-1)][(k-1)][0];
+                         this.content[(i-1)][(k-1)].value = this.content[(i-1)][(k-1)][1];
+                         this.content[(i-1)][(k-1)].spans = this.content[(i-1)][(k-1)][2];
+        }        }        }
+
+function tableContentArgumentsToArrays()
+        {var dummyRows = this.content.length;
+         var dummyCols = this.content[0].length;
+         for (var i=1;i<=dummyRows;i++)
+                {for (var k=1;k<=dummyCols;k++)
+                        {this.content[(i-1)][(k-1)][0] = this.content[(i-1)][(k-1)].props;
+                         this.content[(i-1)][(k-1)][1] = this.content[(i-1)][(k-1)].value;
+                         this.content[(i-1)][(k-1)][2] = this.content[(i-1)][(k-1)].spans;
+        }        }        }
+
+function table()
+        {var propsDefaultLength = 2;
+         this.cols = 1;
+         this.rows = 1;
+         for (var i=1;i<=table.arguments.length;i++)
+                {if (table.arguments[(i-1)].indexOf("cols") >= 0) {propsDefaultLength--;}
+                 if (table.arguments[(i-1)].indexOf("rows") >= 0) {propsDefaultLength--;}
+                 eval("this."+table.arguments[(i-1)]);
+                }
+         this.propsLengthPublic = (table.arguments.length + propsDefaultLength);
+         this.propsLengthPrivat = 7;
+         this.content = tableContent(this.cols,this.rows);
+         this.span = tableSpan;
+         this.draw = tableDraw;
+         this.contentArraysToArguments = tableContentArraysToArguments;
+         this.contentArgumentsToArrays = tableContentArgumentsToArrays;
+        }

app/assets/stylesheets/layout.css.less

@@ -49,6 +49,13 @@ time {
 	margin: 1em 0;
 }
 
+.bulletless_plus_margin {
+	list-style: none;
+	li {
+		margin: 5px;
+	}
+}
+
 .lead {
 	i {
 		position: relative;
@@ -86,4 +93,4 @@ time {
 
 .island {
 	padding: 1em;
-}
+}

app/assets/stylesheets/questions.css.less

@@ -24,3 +24,18 @@ input[type="checkbox"].questions-table__checkbox {
 .import-info, #compatibility {
 	display: none;
 }
+
+.move_handler {
+	cursor: move;
+}
+
+.ghost {
+  opacity: .5;
+  background: #FECA40;
+}
+
+.create_order_option_list {
+	list-style-type: none; 
+	margin: 0; 
+	padding: 0; 
+}

app/assets/stylesheets/surveys.css.less

@@ -2,18 +2,35 @@
 	font-style: italic;
 	font-size: 80%;
 }
+
 #survey-options-list li {
 	margin-bottom:10px;
 }
+
+.move_handler {
+	cursor: move;
+}
+
+.categoryDiv {
+	border: 1px solid white; 
+	width: 100%; 
+	height: 36px;
+}
+
+.ghost {
+  opacity: .5;
+  background: #FECA40;
+}
+
 #overmsg {
 	display:none;
 	background-color: #FCC;
-	  border: solid 1px #C66;
-	  	-moz-border-radius: 5px;
-		border-radius: 5px;
-		-moz-box-shadow: 5px 5px 2px #C66;
-		-webkit-box-shadow: 5px 5px 2px #C66;
-		box-shadow: 5px 5px 2px #C66;
+	border: solid 1px #C66;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+	-moz-box-shadow: 5px 5px 2px #C66;
+	-webkit-box-shadow: 5px 5px 2px #C66;
+	box-shadow: 5px 5px 2px #C66;
 	margin-bottom:10px;
 }
 #not_running {
@@ -33,6 +50,15 @@
 	padding-bottom: 0.5em;
 	font-weight: bold;
 }
+
+#survey-table {
+	width: 100%;
+
+	td {
+		width: 50%;
+	}
+}
+
 .pointer {
   cursor: pointer;
 }
@@ -56,7 +82,66 @@
 	}
 }
 
+.selectable { 
+	list-style-type: none; 
+	margin: 0; 
+	padding: 0; 
+
+	li { 
+		border: 1px solid LightGray; 
+		padding: 0.4em; 
+		margin-top: 6px;
+		margin-bottom: 6px;
+		text-align: center; 
+		border-radius: 5px;
+		word-wrap: break-word;
+	}
+}
+
+.leftOptions {
+	margin-right: 2px;
+}
+
+.rightOptions {
+	margin-left: 2px;
+}
+
+.select-result {
+	padding: 0em; 
+	margin: 0px;
+}
+
+.select-result div {
+	border: 1px solid LightGray; 
+	margin-bottom: 5px; 
+	padding: 0em; 
+	width:100%; 
+	text-align:center;
+	border-radius: 5px;
+}
+
+.selected_left {
+	width:45%; 
+	word-break: break-all; 
+	padding-top: 5px; 
+	padding-bottom: 5px; 
+	padding-left: 10px;
+}
 
+.selected_right {
+	width:45%; 
+	word-break: break-all; 
+	padding-top: 5px; 
+	padding-bottom: 5px; 
+	padding-right: 5px;
+}
+
+.remove-btn {
+   -moz-box-shadow:    inset 0 0 2px #000000;
+   -webkit-box-shadow: inset 0 0 2px #000000;
+   box-shadow:         inset 0 0 2px #000000;
+   margin:0.4em; 
+}
 
 
 /* ========================================
@@ -96,7 +181,9 @@
 	display: inline;
 }
 
-
+.selected { 
+	background: #FECA40; 
+}
 
 
 
@@ -185,3 +272,59 @@
 		}
 	}
 }
+
+
+/* ========================================
+    RESULT TABLE
+======================================== */
+
+.result-table {
+	table-layout:fixed;
+
+	div {
+		margin: 0px !important;
+	    padding: 0px !important;	
+	}
+
+	th {
+		text-align: center; 
+	    vertical-align: middle;	
+	    word-wrap: break-word;
+	}
+}
+
+.result-table-td {
+    text-align: center; 
+    word-wrap: break-word;
+    margin: 0px !important;
+    padding: 0px !important;
+
+    div {
+	    position: relative; 
+	    height: 100%; 
+	    width:100%; 
+	    text-align:center;
+
+	    div {
+			position: absolute; 
+			left: 0px; 
+			bottom: 0px; 
+			z-index:-1; 
+			background-color: #DAEDF7; 
+			width: 100%; 
+		}
+
+		p {
+			height:any; 
+			width:any; 
+			position:relative; 
+			top:50%; 
+			margin-top:-HalfYourHeigth; 
+			line-height: 0%;
+		}
+	}
+}
+
+.greenBorder {
+	border: 3px solid green !important;
+}