Concept Swiper
For this question, copy the below question and update question label, row label, implement row text in "alt" attribute and the link for image to show in the swiper as row text.
<radio
label="MX6"
fir="off"
shuffle="rows">
<title><center>Swipe Right to Select or Swipe Left to Reject</center></title>
<col label="c1">agree</col>
<col label="c2">disagree</col>
<row label="r1" alt="Kitkat Mini Moments"><span class="imgsrc">/survey/selfserve/560/200209/Slide1.PNG</span></row>
<row label="r2" alt="Kitkat Mini Moments Desserts"><span class="imgsrc">/survey/selfserve/560/200209/Slide2.PNG</span></row>
<row label="r3" alt="Kitkat Classic"><span class="imgsrc">/survey/selfserve/560/200209/Slide3.PNG</span></row>
<row label="r4" alt="Kitkat Mix"><span class="imgsrc">/survey/selfserve/560/200209/Slide4.PNG</span></row>
<style name="question.row"><![CDATA[
\@if ec.simpleList
$(elements)
\@else
\@if this.styles.ss.rowHeight
<$(tag) class="row row-elements row_${ec.row.label} $(style) colCount-$(colCount)" data-index="${ec.row.index}" data-row="${ec.row.label}" style="height:${this.styles.ss.rowHeight};">
\@else
<$(tag) class="row row-elements row_${ec.row.label} $(style) colCount-$(colCount)" data-index="${ec.row.index}" data-row="${ec.row.label}">
\@endif
$(left)
$(elements)
$(right)
</$(tag)>
\@endif
]]></style>
<style name="question.after"><![CDATA[
<div id="ketool-stage-${this.label}" class="dropArea">
</div>
<div class="actions_btn">
<div class="dislike" onclick="dislike(this)" ontouchstart="dislike(this)" data-status="0"><i> </i></div>
<div class="like" onclick="like(this)" ontouchstart="like(this)" data-status="0"><i> </i></div>
</div>
<style type="text/css">
.question {
padding: 0;
margin-top: 0px !important;
}
.question_body {
display: none;
}
body
{
overflow-x: hidden;
}
center {
padding: 5px;
}
#page
{
padding-left: 2px;
padding-right: 2px;
overflow: hidden;
}
.page_header, .question, .page_footer {
margin: 0;
}
.submit_div {
display: none;
}
.header1, .header2, .question_body, .footer {
padding: 0;
}
.page_footer, .question {
padding: 0px !important;
}
.page_footer, .question {
padding: 10px;
background-color: transparent;
}
.page {
background-color: transparent;
}
.touchBox {
width: 95%;
max-width: 355px;
height: 400px;
background: white;
border: 2px solid gray;
box-shadow: 0px 0px 5px lightgrey;
margin: 5px auto;
position: absolute !important;
left:0;
right:0;
top:5px;
z-index:-1;
text-align:center;
border: 1px solid gray;
}
.touchBox > img {
height: 100%;
}
#ketool-stage-${this.label} > .touchBox:nth-child(1)
{
position: relative !important;
z-index:99;
}
#ketool-stage-${this.label} > .touchBox:nth-child(even)
{
transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
#ketool-stage-${this.label} > .touchBox:nth-child(odd)
{
transform: rotate(1deg);
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
div#ketool-stage-${this.label} {
width: 900px;
margin: 0 auto;
background: transparent;
border-radius: 5px;
max-width:100%;
position: relative;
height:400px;
padding-top:10px;
}
.actions_btn div {
float: left;
display: block;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
color: #a7a7a7;
margin: 36px;
width: 80px;
height: 80px;
position: relative;
text-align: center;
line-height: 105px;
border-radius: 50%;
outline: none;
box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff; z-index: 9;
}
.dislike, .like {
display: inline-block;
vertical-align: middle;
line-height: 100px;
}
.dislike i {
background-image: url([rel select_type_icons.png]);
background-position: 0 1px;
height: 27px;
width: 27px;
display: inline-block;
margin-top: 26.5px;
}
.like i {
background-image: url([rel select_type_icons.png]);
background-position: -47px 1px;
height: 28px;
width: 32px;
display: inline-block;
margin-top: 26.5px;
}
.actions_btn {
text-align: center;
width: 500px;
margin: 0px auto;
overflow: hidden;
max-width: 100%;
display: flex;
justify-content: center;
}
img.agree {
position: absolute;
width: 150px;
top: 0;
height: auto !important;
background: white;
box-shadow: 0px 0px 1px grey;
left: 0px;
opacity:0;
}
img.disagree {
position: absolute;
width: 135px;
top: 0;
height: auto !important;
background: white;
box-shadow: 0px 0px 1px grey;
right: 0px;
opacity:0;
}
.answers {
display: none;
}
</style>
<script type="text/javascript" src="[rel jquery-ui.min.js]"></script>
<script type="text/javascript">
var qn = ${jsexport()}; //returns json object of the question
console.log(qn); //loads question variables into a console tool
var resp_id=qn.uid;
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function initTouch()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
jQuery(document).ready(function (){
var customcontainer = jQuery("#ketool-stage-${this.label}")
jQuery("#question_" + qn.label + " tr.row-elements").each(function(){
var imgSrc = jQuery(this).find("th.row-legend .imgsrc").text()
var rowlbl = jQuery(this).attr("data-row")
var rindex = jQuery(this).attr("data-index")
console.log(imgSrc)
console.log(rowlbl)
console.log(rindex)
customcontainer.append("<div id='touchme_" + rowlbl + "' class='touchBox' data-value='" + rindex + "'><img src='" + imgSrc + "' class='rowImg'/><img src='${KEDomain}/tools/swiper/agree.png' class='agree'/><img src='${KEDomain}/tools/swiper/disagree.png' class='disagree'/></div>")
});
var z_index=1;
jQuery(".touchBox").draggable({
// to reset item location.
drag: function( event, ui ) {
var move_pos=jQuery(this).css("left");
move_pos=move_pos.replace("px","");
move_pos=parseFloat(move_pos);
var c_move_pos=move_pos;
var drop_con_width=jQuery("#ketool-stage-${this.label}").width();
var drog_con_width=jQuery(this).width();
var shif_width=(drop_con_width-drog_con_width)/2;
if(c_move_pos>shif_width)
{
c_move_pos=shif_width;
}
var degree=30;
var logo_d=1;
degree=(degree/shif_width)*c_move_pos;
logo_d=(logo_d/(shif_width / 4))*c_move_pos;
if(degree>30){ degree=30;}
if(degree<-30){ degree="-30";}
jQuery(this).css('-webkit-transform','rotate('+degree+'deg)');
jQuery(this).css('-moz-transform','rotate('+degree+'deg)');
jQuery(this).css('transform','rotate('+degree+'deg)');
if(logo_d>=0)
{
jQuery(this).find(".agree").css("opacity",logo_d);
jQuery(this).find(".disagree").css("opacity",0);
}
else
{
logo_d=logo_d*(-1);
jQuery(this).find(".disagree").css("opacity",logo_d);
jQuery(this).find(".agree").css("opacity",0);
}
},
stop: function( event, ui ) {
var degree=0;
var move_pos=jQuery(this).css("left");
move_pos=move_pos.replace("px","");
type=move_pos.indexOf("-");
if(type>=0)
{
move_pos=move_pos.replace("-","");
}
move_pos=parseFloat(move_pos);
var drop_con_width=jQuery("#ketool-stage-${this.label}").width();
var drog_con_width=jQuery(this).width();
var move_px=drop_con_width+drog_con_width+100;
if(move_pos<40)
{
jQuery(this).css('-webkit-transform','rotate('+degree+'deg)');
jQuery(this).css('-moz-transform','rotate('+degree+'deg)');
jQuery(this).css('transform','rotate('+degree+'deg)');
jQuery(this).animate({ left: "0px",top: "0px"});
}
else if(type<0)
{
z_index++;
jQuery(this).parent().find(".touchBox:nth-child(2)").css("zIndex",z_index);
jQuery(this).animate({ left: move_px+"px",top: "0px"},1000, function() {
var c_val=parseInt(jQuery(this).attr("data-value"));
jQuery("input[name='ans"+resp_id+".0."+c_val+"'][value='0']").prop( "checked",true );
jQuery(this).remove();
});
}
else
{
z_index++;
jQuery(this).parents(".dropArea").find(".touchBox:nth-child(2)").css("zIndex",z_index);
jQuery(this).animate({ left: "-"+move_px+"px",top: "0px"},1000, function() {
var c_val=parseInt(jQuery(this).attr("data-value"));
jQuery("input[name='ans"+resp_id+".0."+c_val+"'][value='1']").prop( "checked",true );
jQuery(this).remove();
});
}
jQuery(this).find(".disagree").animate({"opacity":0});
jQuery(this).find(".agree").animate({"opacity":0});
setTimeout(function(){
if(jQuery("#ketool-stage-${this.label} > .touchBox").length==0)
{
jQuery("input#btn_continue, input#btn_finish").click();
//SSI_SubmitMe();
}
},1500);
}
});
initTouch();
});
function like(e){
if(jQuery(e).attr("data-status")==0){
jQuery(e).attr("data-status",1);
jQuery(".dislike").attr("data-status",1);
var degree=60;
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)> .agree").css("opacity",1);
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").css('transition-duration','2.5s');
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").css('-webkit-transform','rotate('+degree+'deg)');
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").css('-moz-transform','rotate('+degree+'deg)');
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").css('transform','rotate('+degree+'deg)');
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").css({ left: "1500px",top: "-1500px"});
var c_val=parseInt(jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").attr("data-value"));
jQuery("input[name='ans"+resp_id+".0."+c_val+"'][value='0']").prop( "checked",true );
setTimeout(function(){
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").remove();
jQuery(e).attr("data-status",0);
jQuery(".dislike").attr("data-status",0);
if(jQuery("#ketool-stage-${this.label} > .touchBox").length==0)
{
jQuery("input#btn_continue, input#btn_finish").click();
}
},1000);
}
else
{
return false;
}
}
function dislike(e){
if(jQuery(e).attr("data-status")==0){
jQuery(e).attr("data-status",1);
jQuery(".like").attr("data-status",1);
var degree="-60";
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)> .disagree").css("opacity",1);
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").css('transition-duration','2.5s');
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").css('-webkit-transform','rotate('+degree+'deg)');
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").css('-moz-transform','rotate('+degree+'deg)');
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").css('transform','rotate('+degree+'deg)');
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").css({ left: "-1500px",top: "-1500px"});
var c_val=parseInt(jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").attr("data-value"));
jQuery("input[name='ans"+resp_id+".0."+c_val+"'][value='1']").prop( "checked",true );
// SSI_SetSelect("[% QuestionName() %]_r"+c_val+"_2",true);
setTimeout(function(){
jQuery("#ketool-stage-${this.label} > .touchBox:nth-child(1)").remove();
jQuery(e).attr("data-status",0);
jQuery(".like").attr("data-status",0);
if(jQuery("#ketool-stage-${this.label} > .touchBox").length==0)
{
jQuery("input#btn_continue, input#btn_finish").click();
}
},1000);
}
else
{
return false;
}
}
</script>
]]></style>
</radio>