" tags below, so item 1 content will be contained in 2nd element after ''.
var item_label=['','<table><tr><td><img src="[rel A1.png]" ></td><td>A peanut butter cookie is a type of cookie that is distinguished for having peanut butter as a principal ingredient.</td></tr></table>', '<table><tr><td><img src="[rel A2.png]" ></td><td>A peanut butter cup is a molded chocolate candy with a peanut butter filling inside.</td></tr></table>', '<table><tr><td><img src="[rel A3.png]" ></td><td>Brittle is a type of confection consisting of flat broken pieces of hard sugar candy embedded with nuts such as pecans, almonds.</td></tr></table>', '<table><tr><td><img src="[rel A4.png]" ></td><td>The sweet filling is made from corn syrup, sugar and eggs.</td></tr></table>'];
Copy rest if the setup and update version question label, no. of sets as per notes below the question.
<radio
label="MX17"
grouping="cols">
<title><table>
<tr>
<td><img src="[rel dislike.PNG]" /></td>
<td align="center">Swipe the offer that you would most likely choose to the right and the one you would least likely choose to the left.</td>
<td><img src="[rel like.PNG]" /></td>
</tr>
</table>
<br />
<div class="swipe_con"></div>
</title>
<col label="c1">Most</col>
<col label="c2">Least</col>
<row label="r1">r1</row>
<row label="r2">r2</row>
<row label="r3">r3</row>
<row label="r4">r4</row>
<style name="question.after"><![CDATA[
<style type="text/css">
.container{
min-height: 100px;
width: 95%;
padding: 10px;
margin-bottom: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
overflow: hidden;
transition-duration: 0.5s;
}
.container>table>tbody>tr>td:nth-child(2) {
text-align: center;
width: 60%;
}
.container>table {
width: 100%;
}
.worst_c {
background: lightcoral !important;
border-radius: 0px !important;
}
.best_c {
background: lightgreen !important;
border-radius: 0px !important;
}
img {
max-width: 90%;
}
.answers {
display: none;
}
</style>
]]></style>
<style name="question.after"><![CDATA[
<script type="text/javascript" src="[rel maxdiff_Swipe_desgin.js]"></script>
<script src="[rel swipe-it.js]"></script>
<script>
///////***********Convert grid into Maxdiff format start********************//////////
jQuery("table.grid > tbody").each(function(){
jQuery(this).children("tr").each(function(){
jQuery(this).children(".cell:nth-child(2)").after(jQuery(this).children(".cell:nth-child(1)"));
});
});
///////***********Convert grid into Maxdiff format End********************//////////
//////////////***********Show / Hide next button start**********/////////
setInterval(function(){
var vl_arr=[];
jQuery("span.fir-icon.selected").each(function(){
var c_index=jQuery(this).parent().parent().parent().parent().index();
if(vl_arr.indexOf(c_index)>=0){jQuery("input#btn_continue").hide();}
else{vl_arr.push(c_index); jQuery("input#btn_continue").hide(); }
if(vl_arr.length==2 && vl_arr.indexOf(c_index)!=0){jQuery("input#btn_continue").show();}
});
if(vl_arr.length==0) { jQuery("input#btn_continue").hide();}
},100);
//////////////***********Show / Hide next button end**********/////////
var total_items=jQuery("th[scope=row]").length;
var current_set=parseInt("[loopvar: label]");
var total_set=2; /////////////***********Add total numbers of screen/set***************//////////
var current_version=${MX17_Version.val}; ///////****Add version shown***/////////
////////////*********Add item label************//////////////
var item_label=['','<table><tr><td><img src="[rel A1.png]" ></td><td>A peanut butter cookie is a type of cookie that is distinguished for having peanut butter as a principal ingredient.</td></tr></table>', '<table><tr><td><img src="[rel A2.png]" ></td><td>A peanut butter cup is a molded chocolate candy with a peanut butter filling inside.</td></tr></table>', '<table><tr><td><img src="[rel A3.png]" ></td><td>Brittle is a type of confection consisting of flat broken pieces of hard sugar candy embedded with nuts such as pecans, almonds.</td></tr></table>', '<table><tr><td><img src="[rel A4.png]" ></td><td>The sweet filling is made from corn syrup, sugar and eggs.</td></tr></table>'];
var current_desgin=(current_version-1)*total_set;
current_set=current_desgin+current_set;
var k=0;
jQuery("th[scope=row]").each(function(){
var current_design_value=desgin_data[current_set][k];
jQuery(this).empty();
jQuery(this).append(item_label[current_design_value]);
jQuery(".swipe_con").append('<div class="container" data-value="'+k+'">'+item_label[current_design_value]+'</div>');
k++;
});
var qn = ${jsexport()}; //returns json object of the question
console.log(qn) //loads question variables into a console tool
var rsp_id=qn.uid;
var click_ch_1=0;
var click_ch_2=0;
var mySwipeIt = new SwipeIt('.container');
mySwipeIt
.on('swipeLeft',function(e){
if(click_ch_1==0)
{
//your handler here
var c_col=jQuery(this).attr("data-value");
jQuery("label[for='ans"+rsp_id+".0."+c_col+"']").click();
click_ch_1++;
jQuery(this).addClass("worst_c");
jQuery(this).children("table").animate({
marginLeft: '-400px'
}, 300, function () {
jQuery(this).remove();
if(click_ch_1==1 && click_ch_2==1)
{
postIt();
}
})
}
})
.on('swipeRight',function(e){
//your handler here
if(click_ch_2==0)
{
var c_col=jQuery(this).attr("data-value");
jQuery("label[for='ans"+rsp_id+".1."+c_col+"']").click();
click_ch_2++;
jQuery(this).addClass("best_c");
jQuery(this).children("table").animate({
marginLeft: '+400px'
}, 300, function () {
jQuery(this).remove();
if(click_ch_1==1 && click_ch_2==1)
{
postIt();
}
})
}
});
</script>
]]></style>
</radio>
