Difference between revisions of "Show multi, single question in new style"

From Catglobe Wiki
Jump to: navigation, search
 
Line 24: Line 24:
  
 
== Code ==
 
== Code ==
 +
 +
*Javascript
  
 
<source lang="javascript">
 
<source lang="javascript">
−
quest.onInit = function()
+
quest.onInit=function(){
−
{
+
Single_Multi_Question_New_Style("Q2_Rest",[999],"selected",true);
−
  this.initializeLeftList();
+
}
 +
function Single_Multi_Question_New_Style(questionLabel, arrNoMulti, classname, isMulti){
 +
  var obj;
 +
$(".answer_option_cell").css("width",100/$(".answer_option_cell tr:eq(0) td").length +"%");
 
   
 
   
−
//add Remove link after text boxes
+
  $("input[name*='QUESTION." + questionLabel + "']").each(function(){
−
  $("input:text").each(
+
  if($(this).is(':checked')){
−
function(i)
+
  obj = $("input[name$='QUESTION." + questionLabel + "'][value='" + $(this).val() +"']").parent().siblings().children();
−
{
+
  obj.addClass(classname);
−
  $(this).parent().after(
+
  }  
−
  $("<td>")
+
  });
−
.append($("<a href=\"javascript:quest.clearAnswer("+i+");\">Remove</a>"))
 
−
  .addClass("grid_subquestion_text grid_subquestion_odd")
 
−
);
 
−
  }
 
−
  );
 
 
   
 
   
−
  //configure the drag move
+
  $("a.option_link").click(function(){
−
  $(".draggable_text").draggable
+
if(isMulti){
−
  (
+
var input_sibling = $(this).parent().siblings().children().val();
−
  {
+
if($.inArray(Number(input_sibling), arrNoMulti)!=-1){
−
  mouse: "pointer",
+
var isChecked = $(this).hasClass(classname);
−
  helper: 'clone'
+
  $("a.option_link").removeClass(classname);
 +
  if(!isChecked)$(this).addClass(classname);
 +
}
 +
  else {
 +
  $(this).toggleClass(classname);
 +
$.each(arrNoMulti,function(i,v){
 +
  obj = $("input[name$='QUESTION." + questionLabel + "'][value='" + v +"']").parent().siblings().children();
 +
obj.removeClass(classname);
 +
});
 +
}
 
  }
 
  }
−
  );
+
  else{
 +
$("a.option_link").removeClass(classname);
 +
$(this).toggleClass(classname);
 +
}
 
   
 
   
−
  //make the textboxes droppable and not editable
+
  });
−
$("input:text").each(
+
}
−
function(i)
+
</source>
−
{
+
 
−
$(this).addClass("droppable_cell");
+
*CSS
−
$(this)[0].contentEditable = false;
 
−
$(this).width("300px");
 
−
}
 
−
);
 
  
−
  //drop function
+
<source lang="css">
−
$(".droppable_cell").droppable
+
input[type="radio"] {
−
  (
+
  display:none;
−
  {
+
}
−
  accept: ".draggable_text",
+
input[type="checkbox"] {
−
  activeClass: 'droppable-active',
+
display:none;
−
  hoverClass: 'droppable-hover',
+
}
−
  drop: function(ev, ui)
+
a.option_link{
−
  {
+
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
−
  var currentValue = $(this).val();
+
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
−
  var newValue = ui.draggable.text();
+
  box-shadow:inset 0px 1px 0px 0px #ffffff;
−
  if (currentValue != "" && currentValue != newValue)
+
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
−
  {
+
  background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
−
  quest.showProduct(currentValue);  
+
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
−
  }
+
  background-color:#f9f9f9;
−
  $(this).val(ui.draggable.text());  
+
-webkit-border-top-left-radius:4px;
−
  ui.draggable._hide("fast");  
+
-moz-border-radius-topleft:4px;
−
  }
+
border-top-left-radius:4px;
−
  }
+
-webkit-border-top-right-radius:4px;
−
  );  
+
-moz-border-radius-topright:4px;
 +
border-top-right-radius:4px;
 +
-webkit-border-bottom-right-radius:4px;
 +
-moz-border-radius-bottomright:4px;
 +
border-bottom-right-radius:4px;
 +
-webkit-border-bottom-left-radius:4px;
 +
  -moz-border-radius-bottomleft:4px;
 +
  border-bottom-left-radius:4px;
 +
  text-indent:0;
 +
border:1px solid #dcdcdc;
 +
display:inline-block;
 +
  color:#000000!important;
 +
font-family:Arial;
 +
font-size:15px;
 +
font-weight:normal;
 +
font-style:normal;
 +
  height: 30px;
 +
  line-height: 20px;
 +
  padding-top: 10px;
 +
  width:100%;
 +
  text-decoration:none;
 +
  text-align:center!important;
 +
  text-shadow:1px 1px 0px #ffffff;
 +
  margin-top:2px;
 
}
 
}
−
 
+
a.option_link:hover{
−
quest.initializeLeftList = function()
+
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
−
{
+
  background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
−
  var n = this.questions.length;
+
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
−
var answers = this.getAnswers();
+
  background-color:#e9e9e9;
−
 
−
var products = new Array();
 
−
products[0] = "{{Brands[0]}}";
 
−
products[1] = "{{Brands[1]}}";
 
−
products[2] = "{{Brands[2]}}";
 
−
products[3] = "{{Brands[3]}}";
 
−
products[4] = "{{Brands[4]}}";
 
−
 
−
//add a product cell before the sub question text cell
 
−
 
−
for(var i=0; i<n; i++)
 
−
{
 
−
var v = products[i];
 
−
$("#grid_subquestion_text_" + (i+1))
 
−
.before(
 
−
$("<td>").append(
 
−
$("<div>")
 
−
.append(
 
−
$("<p>").text(v)
 
−
.addClass("draggable_text")
 
−
.css("mouse", "pointer")
 
−
)
 
−
)
 
−
.width("200px")
 
−
)
 
−
.width("10px");  
 
−
  }
 
−
 
−
$("#grid_subquestion_text_1")
 
−
.before(
 
−
$("<td rowspan=\""+(n + 1)+"\">&nbsp;</td>")
 
−
  .addClass("grid_space_cell")
 
−
.width("200px")
 
−
);
 
−
   
 
−
$(".draggable_text").each(
 
−
function(i)
 
−
{
 
−
if (answers.exists($(this).text()))
 
−
$(this)._hide("fast");
 
−
}
 
−
);  
 
 
}
 
}
−
 
+
a.selected{
−
//get list of answered value
+
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #175691), color-stop(1, #003e76) )!important;
−
quest.getAnswers = function()
+
  background: -moz-linear-gradient(center top , #175691 5%, #003e76 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
−
{
+
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#175691', endColorstr='#003e76')!important;
−
  var a = new Array();
+
  border-color: #175691;
−
  a[0] = "{{Q7[0]}}";
+
  background-color:#175691!important;
−
  a[1] = "{{Q7[1]}}";
+
  box-shadow: none;
−
  a[2] = "{{Q7[2]}}";
+
  color: #fff !important;
−
  a[3] = "{{Q7[3]}}";
+
  text-shadow: none;
−
  a[4] = "{{Q7[4]}}";  
 
−
  return a;  
 
 
}
 
}
−
 
+
.answer_option_cell td {
−
//check if a value exists in an array
+
  text-align: left;
−
Array.prototype.exists = function(value)
+
  vertical-align: middle;
−
{
+
  width: 100%;
−
  for(var i=0; i<this.length; i++)
 
−
  {
 
−
if (this[i] == value)
 
−
return true;
 
−
  }
 
−
return false;
 
 
}
 
}
−
 
+
.answer_option_cell td:first-child {
−
//show a product in the left list
+
  text-align: left;
−
quest.showProduct = function(value)
+
  vertical-align: middle;
−
{
+
  width: auto;
−
  $(".draggable_text").each(
 
−
function(i)
 
−
{
 
−
if ($(this).text() == value)
 
−
  $(this).show();
 
−
  }
 
−
);
 
 
}
 
}
−
 
+
.answer_option_cell td:first {
−
//remove a product from the right list and put back in the left list
+
  text-align: left;
−
quest.clearAnswer = function(index)
+
  vertical-align: middle;
−
{
+
  width: auto;
−
  var input = $("input:text")[index];
 
−
  var value = input.value;
 
−
  if (value != "")
 
−
{
 
−
this.showProduct(value);
 
−
input.value = "";
 
−
}
 
 
}
 
}
 
</source>
 
</source>
−
 
−
== Source ==
 
−
 
−
Questionnaire Resource Id on cg.catglobe.com site: 164079 (Question: Q4_Drag_and_drop_answer_option_values)
 

Latest revision as of 10:50, 29 September 2014

Challenge

In order to be more flexible in displaying questions

As a questionnaire creator

I want to show answer option of single/multi question in buttons

Example

I want to show answer option like this

Button option.png

Solution

  • Create a single/multi question
  • Set number of cols you want in question properties

Col question.png

  • Add css to question style sheet
  • Add js

Code

  • Javascript
quest.onInit=function(){
 Single_Multi_Question_New_Style("Q2_Rest",[999],"selected",true);
}
function Single_Multi_Question_New_Style(questionLabel, arrNoMulti, classname, isMulti){
 var obj;
 $(".answer_option_cell").css("width",100/$(".answer_option_cell tr:eq(0) td").length +"%");
 
 $("input[name*='QUESTION." + questionLabel + "']").each(function(){
 if($(this).is(':checked')){
 obj = $("input[name$='QUESTION." + questionLabel + "'][value='" + $(this).val() +"']").parent().siblings().children(); 
 obj.addClass(classname);
 } 
 });
 
 $("a.option_link").click(function(){
 if(isMulti){
 var input_sibling = $(this).parent().siblings().children().val();
 if($.inArray(Number(input_sibling), arrNoMulti)!=-1){
 var isChecked = $(this).hasClass(classname);
 $("a.option_link").removeClass(classname);
 if(!isChecked)$(this).addClass(classname);
 } 
 else {
 $(this).toggleClass(classname);
 $.each(arrNoMulti,function(i,v){
 obj = $("input[name$='QUESTION." + questionLabel + "'][value='" + v +"']").parent().siblings().children();
 obj.removeClass(classname);
 });
 } 
 }
 else{
 $("a.option_link").removeClass(classname);
 $(this).toggleClass(classname);
 } 
 
 });
}
  • CSS
input[type="radio"] {
 display:none;
}
input[type="checkbox"] {
 display:none;
}
a.option_link{
 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow:inset 0px 1px 0px 0px #ffffff;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
 background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
 background-color:#f9f9f9;
 -webkit-border-top-left-radius:4px;
 -moz-border-radius-topleft:4px;
 border-top-left-radius:4px;
 -webkit-border-top-right-radius:4px;
 -moz-border-radius-topright:4px;
 border-top-right-radius:4px;
 -webkit-border-bottom-right-radius:4px;
 -moz-border-radius-bottomright:4px;
 border-bottom-right-radius:4px;
 -webkit-border-bottom-left-radius:4px;
 -moz-border-radius-bottomleft:4px;
 border-bottom-left-radius:4px;
 text-indent:0;
 border:1px solid #dcdcdc;
 display:inline-block;
 color:#000000!important;
 font-family:Arial;
 font-size:15px;
 font-weight:normal;
 font-style:normal;
 height: 30px;
 line-height: 20px;
 padding-top: 10px;
 width:100%;
 text-decoration:none;
 text-align:center!important;
 text-shadow:1px 1px 0px #ffffff;
 margin-top:2px;
}
a.option_link:hover{
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
 background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
 background-color:#e9e9e9;
}
a.selected{
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #175691), color-stop(1, #003e76) )!important;
 background: -moz-linear-gradient(center top , #175691 5%, #003e76 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#175691', endColorstr='#003e76')!important;
 border-color: #175691;
 background-color:#175691!important;
 box-shadow: none;
 color: #fff !important;
 text-shadow: none;
}
.answer_option_cell td {
 text-align: left;
 vertical-align: middle;
 width: 100%;
}
.answer_option_cell td:first-child {
 text-align: left;
 vertical-align: middle;
 width: auto;
}
.answer_option_cell td:first {
 text-align: left;
 vertical-align: middle;
 width: auto;
}
Retrieved from "http://wiki.catglobe.com/index.php?title=Show_multi,_single_question_in_new_style&oldid=24984"