Wheel Tab Max-Diff
mobile-phone
Wheel Tab Max-Diff

For this setup, implement the below style while updating the question ID to be the first looped question id, also update the screen/page no. shown in the navigation in line with text "wheelTab.setTitles(['A', 'B', 'C']);"


<style name="respview.client.js" with="QwtMD_1"><![CDATA[
<link rel="stylesheet" href="${KEDomain}/tools/traditionalMD/theme.min.css"> 
<link rel="stylesheet" href="${KEDomain}/tools/traditionalMD/wheelizate.tab.min.css"> 

<script src="${KEDomain}/tools/traditionalMD/raphael.min.js"></script>
<script src="${KEDomain}/tools/traditionalMD/raphael.icons.min.js"></script>
<script src="${KEDomain}/tools/traditionalMD/wheelnav.min.js"></script>
<script src="${KEDomain}/tools/traditionalMD/wheelizate.tab.min.js"></script>

   <script>

var check=1;
var arQs = [];
var wheelTab;

window.onload = function () {
jQuery(".maxdiffQ").each(function( i ){
jQuery("#tab>div").append("<div>Tab pane " + i + "</div>")
arQs.push(jQuery(this).attr("id"))
           
});

abc(0);check++;
console.log(arQs)	
jQuery("#btn_continue, #btn_finish").hide();	   
    // add/remove checked class
    jQuery(".fir-best-radio").each(function(){
        if(jQuery(this).find('input[type="radio"]').first().attr("checked")){
            jQuery(this).addClass('fir-radio-checked');
        	jQuery(this).find("img").attr("src","${KEDomain}/tools/traditionalMD/img/left_high.png")
        }else{
            jQuery(this).removeClass('fir-radio-checked');
            jQuery(this).find("img").attr("src","${KEDomain}/tools/traditionalMD/img/left_pas.png")
        }
    });


    jQuery(".fir-worst-radio").each(function(){
        if(jQuery(this).find('input[type="radio"]').first().attr("checked")){
            jQuery(this).addClass('fir-radio-checked');
			jQuery(this).find("img").attr("src","${KEDomain}/tools/traditionalMD/img/right_high.png")
        
        }else{
            jQuery(this).removeClass('fir-radio-checked');
			jQuery(this).find("img").attr("src","${KEDomain}/tools/traditionalMD/img/right_pas.png")
        }
    });



    // sync the input state
    jQuery(".fir-best-radio").on("click", function(e){
		e.preventDefault();
		e.stopPropagation();

if (!jQuery(this).parents("tr.row-elements").find(".fir-worst-radio").hasClass("fir-radio-checked")){
        jQuery(this).parents(".answers").find(".fir-best-radio").removeClass('fir-radio-checked');
        jQuery(this).parents(".answers").find(".fir-best-radio").find("img").attr("src","${KEDomain}/tools/traditionalMD/img/left_pas.png")
        jQuery(this).addClass('fir-radio-checked');
        jQuery(this).find("img").attr("src","${KEDomain}/tools/traditionalMD/img/left_high.png")
        var jQueryradio = jQuery(this).find('input[type="radio"]');
        jQueryradio.prop("checked",!jQueryradio.prop("checked"));

goNextonAnswer()
        }

    });


    jQuery(".fir-worst-radio").on("click", function(e){
		e.preventDefault();
		e.stopPropagation();

if (!jQuery(this).parents("tr.row-elements").find(".fir-best-radio").hasClass("fir-radio-checked")){
        jQuery(this).parents(".answers").find(".fir-worst-radio").removeClass('fir-radio-checked');
        jQuery(this).parents(".answers").find(".fir-worst-radio").find("img").attr("src","${KEDomain}/tools/traditionalMD/img/right_pas.png")
        jQuery(this).addClass('fir-radio-checked');
        jQuery(this).find("img").attr("src","${KEDomain}/tools/traditionalMD/img/right_high.png")
        var jQueryradio = jQuery(this).find('input[type="radio"]');
        jQueryradio.prop("checked",!jQueryradio.prop("checked"));

goNextonAnswer()
        }

    });


    jQuery(".best_col.element.clickableCell").on("click", function(e){
		e.preventDefault();
		e.stopPropagation();

if (!jQuery(this).parents("tr.row-elements").find(".fir-worst-radio").hasClass("fir-radio-checked")){
        jQuery(this).parents(".answers").find(".fir-best-radio").removeClass('fir-radio-checked');
        jQuery(this).parents(".answers").find(".fir-best-radio").find("img").attr("src","${KEDomain}/tools/traditionalMD/img/left_pas.png")
        jQuery(this).find(".fir-best-radio").addClass('fir-radio-checked');
        jQuery(this).find(".fir-best-radio").find("img").attr("src","${KEDomain}/tools/traditionalMD/img/left_high.png")
        var jQueryradio = jQuery(this).find('input[type="radio"]');
        jQueryradio.prop("checked",!jQueryradio.prop("checked"));
goNextonAnswer()

}

    });


    jQuery(".worst_col.element.clickableCell").on("click", function(e){
		e.preventDefault();
		e.stopPropagation();

if (!jQuery(this).parents("tr.row-elements").find(".fir-best-radio").hasClass("fir-radio-checked")){
        jQuery(this).parents(".answers").find(".fir-worst-radio").removeClass('fir-radio-checked');
        jQuery(this).parents(".answers").find(".fir-worst-radio").find("img").attr("src","${KEDomain}/tools/traditionalMD/img/right_pas.png")
        jQuery(this).find(".fir-worst-radio").addClass('fir-radio-checked');
        jQuery(this).find(".fir-worst-radio").find("img").attr("src","${KEDomain}/tools/traditionalMD/img/right_high.png")
        var jQueryradio = jQuery(this).find('input[type="radio"]');
        jQueryradio.prop("checked",!jQueryradio.prop("checked"));

goNextonAnswer()
}
    });
        };    
		function abc(tab){
			wheelTab = new wheelizateTab("tab");
            wheelTab.tabType = wheelizateTabTypes.Apart;
            wheelTab.tabSubType = wheelizateTabSubTypes.Top;
            wheelTab.tabWheelType = wheelizateTabWheelTypes.Wheel;
            wheelTab.tabThemeType = wheelizateTabThemeTypes.Basic;
			wheelTab.selectedTab=tab
            wheelTab.wheelRadius = 80;
			wheelTab.titleRotateAngle = -45;
            wheelTab.clockwise = false;
            wheelTab.titleRotateAngle = null;
            wheelTab.iconHeight = 90;
            wheelTab.wheelAnimation = "rotate";
            wheelTab.paneAnimation = "rotate";
            wheelTab.marker = false;
            wheelTab.tabRounded = true;
            wheelTab.tabShadowed = true;
            wheelTab.minHeight = 400;
            wheelTab.setTitles(["A", "B", "C"]);
            wheelTab.createTab();
		if(check==1){
			for(var i=0;i<arQs.length;i++){
				jQuery("#wheelnav-tab-wheel-slice-"+i).attr('data-value',i);
		}
		for(var i=0;i<arQs.length;i++){
			jQuery("#tab-pane-" + i).empty();
		jQuery("#tab-pane-" + i).append(jQuery("#"+arQs[i]));
 jQuery("#tab-content").css("min-height","0px");

 }
 }
			
}
function goNextonAnswer(){
var cntr = 0;
var curindex = jQuery(".wtab-current").index()

if (jQuery(".wtab-current .fir-best-radio.fir-radio-checked").length>0) {
cntr = cntr + 1
}

if (jQuery(".wtab-current .fir-worst-radio.fir-radio-checked").length>0) {
cntr = cntr + 1
}

var totalacc = jQuery(".wtab-pane").length
var indexToActivate = curindex

if ((indexToActivate + 1) < totalacc){
indexToActivate = indexToActivate + 1
}

console.log(curindex)

if (cntr>1){

if (indexToActivate != curindex){
abc(indexToActivate)
}

jQuery("#wheelnav-tab-wheel-slice-"+curindex).css("fill", "#25bb00")

}


var selcntr = 0

if (jQuery(".fir-best-radio.fir-radio-checked").length == jQuery("th.best_col").length) {
selcntr = selcntr + 1
}

if (jQuery(".fir-worst-radio.fir-radio-checked").length == jQuery("th.worst_col").length) {
selcntr = selcntr + 1
}


if (selcntr>1){
jQuery("#btn_continue, #btn_finish").show();
}
}
    </script> 
<style>
.customrad + input::checked{
font-size: 1.5rem;
}
input.input.radio{
display: none;
}
.html.comment{
max-width: 90% !important;
margin-left: auto;
margin-right: auto;
}
.answers{
margin-left: auto;
margin-right: auto;
}
#tab-content{
background: transparent !important;

}
.empty-left{
text-align: center;
}
.question-text{
display: none;
}
.fir-best-radio, .fir-worst-radio {
    cursor: pointer;
    margin-bottom: 0;
    outline: 0;
}
.fir-best-radio input[type="radio"], .fir-worst-radio input[type="radio"] {
    display: none;
}
</style>
]]></style>

Copy the below while updating "" list, quyestion ID and question text acordingly.


  <define label="wheeltabMD_list">
    <row label="item1">2.15oz for $1.99</row>
    <row label="item2">7.8oz for $2.99</row>
    <row label="item3">8.4oz for $2.99</row>
    <row label="item4">7.5oz for $2.99</row>
    <row label="item5">6.6oz for $2.99</row>
    <row label="item6">2.15oz for $1.99</row>
    <row label="item7">15.25oz for $1.69</row>
    <row label="item8">15.25oz for $1.69</row></define>
  <quota label="MxquotMD" overquota="noqual" sheet="MaxDiffVersion"/>

  <number 
   label="QwtMD_Version"
   size="3"
   verify="range(1,10)"
   where="execute,survey,report">
    <title>Q5 - MaxDiff Version</title>
    <exec>
print p.markers
for x in p.markers:
    if "/MaxDiffVersion/ver_" in x:
        QwtMD_Version.val = int(x.split("_")[-1])
        break
    </exec>

  </number>

  <suspend/>

  <exec>
p.startTime = timeSpent()
  </exec>

  <loop label="QMDwt_mdITM_loop" suspend="0" vars="task">
    <block label="QMDwt_mdITM_block" randomize="1">
      <exec>
Version = QwtMD_Version.val
set = [loopvar: label]
c = str(Version)+"x"+str(set)
iter = tmdata.get(c)

val1 = iter['item1']
val2 = iter['item2']
val3 = iter['item3']
val4 = iter['item4']


p.cnt = str([loopvar:label])




hItem_wtMD1_[loopvar: label].val = hItem_wtMD1_[loopvar: label].attr('item' + str(val1)).index
hItem_wtMD2_[loopvar: label].val = hItem_wtMD2_[loopvar: label].attr('item' + str(val2)).index
hItem_wtMD3_[loopvar: label].val = hItem_wtMD3_[loopvar: label].attr('item' + str(val3)).index
hItem_wtMD4_[loopvar: label].val = hItem_wtMD4_[loopvar: label].attr('item' + str(val4)).index
      </exec>

      <radio 
     label="hItem_wtMD1_[loopvar: label]"
     optional="0"
     randomize="0"
     translateable="0"
     where="execute,survey,report">
        <title>Item 1 for Max-Diff</title>
        <comment>Hidden question</comment>
        <insert source="wheeltabMD_list"/>
      </radio>

      <radio 
     label="hItem_wtMD2_[loopvar: label]"
     optional="0"
     randomize="0"
     translateable="0"
     where="execute,survey,report">
        <title>Item 2 for Max-Diff</title>
        <comment>Hidden question</comment>
        <insert source="wheeltabMD_list"/>
      </radio>

      <radio 
     label="hItem_wtMD3_[loopvar: label]"
     optional="0"
     randomize="0"
     translateable="0"
     where="execute,survey,report">
        <title>Item 3 for Max-Diff</title>
        <comment>Hidden question</comment>
        <insert source="wheeltabMD_list"/>
      </radio>

      <radio 
     label="hItem_wtMD4_[loopvar: label]"
     optional="0"
     randomize="0"
     translateable="0"
     where="execute,survey,report">
        <title>Item 4 for Max-Diff</title>
        <comment>Hidden question</comment>
        <insert source="wheeltabMD_list"/>
      </radio>
    </block>

    <looprow label="1">
      <loopvar name="task">1</loopvar>
    </looprow>

    <looprow label="2">
      <loopvar name="task">2</loopvar>
    </looprow>

    <looprow label="3">
      <loopvar name="task">3</loopvar>
    </looprow>
  </loop>

  <suspend/>

  <loop label="QMDwt_md_loop" suspend="0" vars="task">
    <block label="QMDwt_md_block" randomize="1">
      <html label="info_QwtMD_[loopvar: task]" looprows="1">Considering only these 4 items, which would you be Most Interested in buying and which would you be Least Interested in buying for your household?
<div id="tab">
        <div>

        </div>
    </div></html>

      <radio 
     label="QwtMD_[loopvar: task]"
     adim="cols"
     fir="off"
     grouping="cols"
     keepWith="info_QwtMD_1"
     rowCond="(hItem_wtMD1_[loopvar: label][row] or hItem_wtMD2_[loopvar: label][row] or hItem_wtMD3_[loopvar: label][row] or hItem_wtMD4_[loopvar: label][row])"
     shuffle="rows"
     ss:questionClassNames="maxdiffQ"
     surveyDisplay="desktop"
     unique="1">
        <title>&nbsp;</title>
        <exec>
arrOrder = []
arrOrder.append(hItem_wtMD1_[loopvar: label].selected.index)
arrOrder.append(hItem_wtMD2_[loopvar: label].selected.index)
arrOrder.append(hItem_wtMD3_[loopvar: label].selected.index)
arrOrder.append(hItem_wtMD4_[loopvar: label].selected.index)

print arrOrder
QwtMD_[loopvar: label].rows.order = arrOrder
        </exec>

        <alt>Considering only these 4 items, which would you be Most Interested in buying and which would you be Least Interested in buying for your household?</alt>
        <col label="best" ss:colClassNames="best_col">Most Important</col>
        <col label="worst" ss:colClassNames="worst_col">Least Important</col>
        <insert source="wheeltabMD_list"/>
        <style name="question.left-blank-legend"><![CDATA[
<$(tag) class="cell empty empty-left empty-$(pos) unused ${"desktop" if this.grouping.cols else "mobile"} border-collapse"><b style="font-size:1.25em;">Screen [loopvar: label] of 2</b></$(tag)>
]]></style>
        <style cols="best" name="el.radio"><![CDATA[
<label for="$(id)" class="fir-best-radio">
<img src="${KEDomain}/tools/traditionalMD/img/left_pas.png"/>
<input type="radio" name="$(name)" value="$(value)" id=$(id) $(checked) class="input radio" $(extra)/>
</label>
]]></style>
        <style cols="worst" name="el.radio"><![CDATA[
<label for="$(id)" class="fir-worst-radio">
<img src="${KEDomain}/tools/traditionalMD/img/right_pas.png"/>
<input type="radio" name="$(name)" value="$(value)" id=$(id) $(checked) class="input radio" $(extra)/>
</label>
]]></style>
        <style name="question.top-legend"><![CDATA[
\@if ec.simpleList
    $(legends)
\@else
    <$(tag) class="maxdiff-header-legend row row-col-legends row-col-legends-top ${"mobile-top-row-legend " if mobileOnly else ""}${"GtTenColumns " if ec.colCount > 10 else ""}colCount-$(colCount)">
        ${"%s%s" % (legends.split("</th>")[0],"</th>")}
       $(left)
        ${"%s%s" % (legends.split("</th>")[1],"</th>")}
    </$(tag)>
    \@if not simple
  </tbody>
  <tbody>
    \@endif
\@endif
]]></style>
        <style name="question.row"><![CDATA[
\@if ec.simpleList
    $(elements)
\@else
    <$(tag) class="maxdiff-row row row-elements $(style) colCount-$(colCount)">
        ${"%s%s" % (elements.split("</td>")[0],"</td>")}
        $(left)
        ${"%s%s" % (elements.split("</td>")[1],"</td>")}
    </$(tag)>
\@endif
]]></style>
      </radio>
    </block>

    <looprow label="1">
      <loopvar name="task">1</loopvar>
    </looprow>

    <looprow label="2">
      <loopvar name="task">2</loopvar>
    </looprow>

    <looprow label="3">
      <loopvar name="task">3</loopvar>
    </looprow>
  </loop>

  <suspend/>