Catglobe Wiki - User contributions [en]

Get parameters from answer sheet link

2015-05-26T13:18:54Z

Phamngocson: Created page with "== Challenge == In order to get parameter by js from answer sheet to do some purpose. How can you do that? This article will guide you to get parameter via javascript (both ..."

== Challenge ==

In order to get parameter by js from answer sheet to do some purpose. How can you do that?

This article will guide you to get parameter via javascript (both old and new viewer)

=== Solution ===

*Add a question to Questionnaire editor
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
*Parameter has to use start with cg_ ex: cg_feedback, cg_type,...

=== Code on the new viewer ===

<source lang="javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
Question.bind('afterShowQuestion', function(question, answerSheet, element) {
var param = getQueryVariable("cg_type");
//alert(param);
var url = "https://www.google.com.vn/"
if(param=="feedback")document.location = url;
});
</source>

=== Code on the old viewer ===

<source lang="javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
quest.onInit = function(){
var param = getQueryVariable("cg_type");
//alert(param);
var url = "https://www.google.com.vn/"
if(param=="feedback")document.location = url;
}
</source>

Questionnaire - Javascript Fun Tips

2015-05-26T12:55:27Z

Phamngocson:

'''[[Basic Hints|Basic Hints]]'''

'''[[Show more than one questions in the same page]]'''

'''[[Add answer options of the close questions to the open questions]]'''

'''[[Validate the questions by using the questioncheck() function]]'''

'''[[Show a text grid and a single question in the same page|Show a text grid question and a single question in the same page]]'''

'''[[Show more than one singe grid in the same page|Show more than one single grid in the same page]]'''

'''[[Show more than one singe question in the same page|Show more than one single question in the same page]]'''

'''[[Show single questions as dropdown lists in their own pages]]'''

'''[[Insert a TextGrid question into a SingleGrid Question]]'''

'''[[Some special questions on COOP Site]]'''

----

<br/>[[Showing Answer Option in tab]]

[[Rotate answer options/sub questions]]

[[Randomize answer options/sub questions]]

[[Drag and drop answer option values]]

[[Change Impsys mages]]

[[Add an extra row before a sub question in a grid]]

[[Hide sub question text column in a grid question]]

[[Change stylesheet of an answer option column in a single grid question]]

[[Add an extra column before an answer option column in single grid question]]

[[Both horizontal and vertical single grid]]

[[Disable sub questions in text grids]]

[[Number grid]]

[[Close to URL]]

[[Double columns in text grids]]

[[Count down with invisible counter]]

[[Fold in/out texts in question text]]

[[Force email address]]

[[Force number of characters]]

[[Change text box size]]

[[Set focus on question text in the top]]

[[Maximum text length]]

[[Next button count down]]

[[Mark answer option with keyboard]]

[[Show flash movies on questionnaire viewer|Play a list of movies in questionnaire]] [[Show a single question as a dropdown list inside another text grid question]]

[[Hide Next button in n seconds]]

[[Show datepicker in text/text grid questions]]

[[Show column header in text grid question]]

[[Prioritize sub questions in a text grid question]]

[[Align min/max texts in scale grid questions]]

[[Add text before answer option of single question]]

[[Show language selector page]]

[[Reverse single grid between sub questions and answer options]]

[[Script for making a text grid numerical summing to a specific value]]

[[Convert closed question TextBox into TextArea]]

[[Validate email specified as an open text of a single question]]

[[Require only one check for grid question]]

[[Change non-multi option in Multi question to Radio button]]

[[Make whole cell clickable in single and multi grids]]

[[AutoSum numerical text grid]]

[[Show open textbox in a grid question]]

[[Change progress bar images of questionnaire]]

[[Add CKEditor to an Open question]]

[[Upload images in questionnaire]]

[[Check whether values of open parts of a close question are positive numbers or not]]

[[Reverse the position of the subquestion texts with their textboxes in the text-grid question]]

[[Show multi, single question in new style]]

[[Get parameters from answer sheet link]]

Show multi, single question in new style

2014-09-29T08:50:46Z

Phamngocson:

== 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

[[File:Button option.png]]

== Solution ==

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

[[File:Col question.png]]

*Add css to question style sheet
*Add js

== Code ==

*Javascript

<source lang="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);
}

});
}
</source>

*CSS

<source lang="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;
}
</source>

Show multi, single question in new style

2014-09-29T08:48:17Z

Phamngocson:

== 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

[[File:Button option.png]]

== Solution ==

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

[[File:Col question.png]]

*Add css to question style sheet
*Add js

== Code ==

<source lang="javascript">
quest.onInit = function()
{
this.initializeLeftList();

//add Remove link after text boxes
$("input:text").each(
function(i)
{
$(this).parent().after(
$("<td>")
.append($("<a href=\"javascript:quest.clearAnswer("+i+");\">Remove</a>"))
.addClass("grid_subquestion_text grid_subquestion_odd")
);
}
);

//configure the drag move
$(".draggable_text").draggable
(
{
mouse: "pointer",
helper: 'clone'
}
);

//make the textboxes droppable and not editable
$("input:text").each(
function(i)
{
$(this).addClass("droppable_cell");
$(this)[0].contentEditable = false;
$(this).width("300px");
}
);

//drop function
$(".droppable_cell").droppable
(
{
accept: ".draggable_text",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui)
{
var currentValue = $(this).val();
var newValue = ui.draggable.text();
if (currentValue != "" && currentValue != newValue)
{
quest.showProduct(currentValue);
}
$(this).val(ui.draggable.text());
ui.draggable._hide("fast");
}
}
);
}

quest.initializeLeftList = function()
{
var n = this.questions.length;
var answers = this.getAnswers();

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)+"\"> </td>")
.addClass("grid_space_cell")
.width("200px")
);

$(".draggable_text").each(
function(i)
{
if (answers.exists($(this).text()))
$(this)._hide("fast");
}
);
}

//get list of answered value
quest.getAnswers = function()
{
var a = new Array();
a[0] = "{{Q7[0]}}";
a[1] = "{{Q7[1]}}";
a[2] = "{{Q7[2]}}";
a[3] = "{{Q7[3]}}";
a[4] = "{{Q7[4]}}";
return a;
}

//check if a value exists in an array
Array.prototype.exists = function(value)
{
for(var i=0; i<this.length; i++)
{
if (this[i] == value)
return true;
}
return false;
}

//show a product in the left list
quest.showProduct = function(value)
{
$(".draggable_text").each(
function(i)
{
if ($(this).text() == value)
$(this).show();
}
);
}

//remove a product from the right list and put back in the left list
quest.clearAnswer = function(index)
{
var input = $("input:text")[index];
var value = input.value;
if (value != "")
{
this.showProduct(value);
input.value = "";
}
}
</source>

== Source ==

Questionnaire Resource Id on cg.catglobe.com site: 164079 (Question: Q4_Drag_and_drop_answer_option_values)

File:Col question.png

2014-09-29T08:47:02Z

Phamngocson:

File:Button option.png

2014-09-29T08:42:04Z

Phamngocson:

Show multi, single question in new style

2014-09-29T08:37:32Z

Phamngocson: Created page with "Test"

Test

Questionnaire - Javascript Fun Tips

2014-09-29T08:37:02Z

Phamngocson:

Questionnaire - Javascript Fun Tips

2014-09-29T08:36:31Z

Phamngocson:

Talk:Questionnaire - Javascript Fun Tips

2014-09-29T08:34:40Z

Phamngocson: Created page with "Test"

Test

File:DashBoardOnloadSon.png

2013-05-21T04:35:05Z

Phamngocson: uploaded a new version of "File:DashBoardOnloadSon.png"