Accordion Max-Diff
Copy the below while updating "
<define label="anchorMD_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="Mxquo22" overquota="noqual" sheet="MaxDiffVersion"/>
<number
label="QaMD_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:
QaMD_Version.val = int(x.split("_")[-1])
break
</exec>
</number>
<suspend/>
<exec>
p.startTime = timeSpent()
</exec>
<loop label="QMDAnchor_mdITM_loop" suspend="0" vars="task">
<block label="QMDAnchor_mdITM_block" randomize="1">
<exec>
Version = QaMD_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_aMD1_[loopvar: label].val = hItem_aMD1_[loopvar: label].attr('item' + str(val1)).index
hItem_aMD2_[loopvar: label].val = hItem_aMD2_[loopvar: label].attr('item' + str(val2)).index
hItem_aMD3_[loopvar: label].val = hItem_aMD3_[loopvar: label].attr('item' + str(val3)).index
hItem_aMD4_[loopvar: label].val = hItem_aMD4_[loopvar: label].attr('item' + str(val4)).index
</exec>
<radio
label="hItem_aMD1_[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="anchorMD_list"/>
</radio>
<radio
label="hItem_aMD2_[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="anchorMD_list"/>
</radio>
<radio
label="hItem_aMD3_[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="anchorMD_list"/>
</radio>
<radio
label="hItem_aMD4_[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="anchorMD_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="QMDanchor_md_loop" suspend="0" vars="task">
<block label="QMDanchor_md_block" randomize="1">
<html label="info_QaMD_[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="accordion">
</div></html>
<radio
label="QaMD_[loopvar: task]"
adim="cols"
fir="off"
grouping="cols"
keepWith="info_QaMD_1"
rowCond="(hItem_aMD1_[loopvar: label][row] or hItem_aMD2_[loopvar: label][row] or hItem_aMD3_[loopvar: label][row] or hItem_aMD4_[loopvar: label][row])"
shuffle="rows"
ss:questionClassNames="maxdiffQ"
surveyDisplay="desktop"
unique="1">
<title> <span class="title accordion">Screen [loopvar: label]</span></title>
<exec>
arrOrder = []
arrOrder.append(hItem_aMD1_[loopvar: label].selected.index)
arrOrder.append(hItem_aMD2_[loopvar: label].selected.index)
arrOrder.append(hItem_aMD3_[loopvar: label].selected.index)
arrOrder.append(hItem_aMD4_[loopvar: label].selected.index)
print arrOrder
QaMD_[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="anchorMD_list"/>
<style cols="best" name="el.radio"><![CDATA[
<label for="$(id)" class="fir-radio fir-best-radio" >
<input type="radio" name="$(name)" value="$(value)" id=$(id) $(checked) class="input radio" $(extra)/>
<i></i>
</label>
]]></style>
<style cols="worst" name="el.radio"><![CDATA[
<label for="$(id)" class="fir-radio fir-worst-radio">
<input type="radio" name="$(name)" value="$(value)" id=$(id) $(checked) class="input radio" $(extra)/>
<i></i>
</label>
]]></style>
<style looprows="1" name="question.after"><![CDATA[
<style>
/* CUSTOM RADIO & CHECKBOXES
.fir-radio{
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
/* RADIO & CHECKBOX STYLES */
/* DEFAULT <i> STYLE */
.fir-radio > i{
display: inline-block;
vertical-align: middle;
height: 30px;
transition: 0.2s;
box-shadow: inset 0 0 0 15px #fff;
border: 1px solid gray;
background: gray;
}
.fir-radio > i {
width: 30px;
border-radius: 50%;
cursor: pointer;
}
.fir-radio:hover > i, td.element:hover .fir-radio > i{ /* HOVER <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: gray;
}
.fir-radio > input:focus + i {
outline: 1px solid blue;
}
.fir-radio > input:checked + i{
box-shadow: inset 0 0 0 3px #fff;
background: orange;
}
input.input.radio{
display: none;
}
.survey-body{
width: 90% !important;
}
.question-text.hidden, .ui-corner-all.hidden{
display: none !important;
}
.html.comment{
max-width: 100% !important;
}
.answers{
margin-left: auto;
margin-right: auto;
}
#tab-content{
background: transparent !important;
box-shadow: none !important;
}
.empty-left{
text-align: center;
}
.ui-accordion .ui-accordion-header{
border: none !important;
background: #ccc;
font-weight: bold;
font-size: 1.25rem;
}
#accordion{
margin-top: 1rem;
}
td.element.best_col{
background: linear-gradient(to right, #00cc00 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-out;
}
td.element.best_col.best-checked{
background-position: left bottom;
}
td.element.worst_col{
background: linear-gradient(to right, transparent 50%, #cc0000 50%);
background-size: 200% 100%;
background-position: left bottom;
transition: all .5s ease-out;
}
td.element.worst_col.worst-checked{
background-position: right bottom;
}
th.row-legend{
background: linear-gradient(to right, #00cc00 0, #00cc00 33.333%, transparent 33.333%, transparent 66.666%, #cc0000 66.666%, #cc0000 100%);
background-size: 300% 100%;
background-position: center bottom;
transition: all .5s ease-out;
}
th.row-legend.best-checked{
background-position: left bottom;
color: #fff;
}
th.row-legend.worst-checked{
background-position: right bottom;
color: #fff;
}
</style>
<script>
jQuery(document).ready(function(){
jQuery(".question.radio").each(function(){
jQuery("#accordion").append("<h3>" + jQuery(this).find("span.title.accordion").text() + "</h3>")
jQuery("#accordion").append(jQuery(this))
});
jQuery( "#accordion" ).accordion({
animate: 1000
});
jQuery(".question-text, .ui-corner-all").addClass("hidden")
jQuery(".cell-text.cell-sub-column").remove();
jQuery("#btn_continue, #btn_finish").hide();
jQuery(".fir-best-radio").each(function(){
if(jQuery(this).find('input[type="radio"]').first().attr("checked")){
jQuery(this).addClass('fir-radio-checked');
jQuery(this).parents("td.element").addClass('best-checked');
jQuery(this).parents("tr.row-elements").find("th.row-legend").addClass('best-checked');
}else{
jQuery(this).removeClass('fir-radio-checked');
jQuery(this).parents("td.element").removeClass('best-checked');
jQuery(this).parents("tr.row-elements").find("th.row-legend").removeClass('best-checked');
}
});
jQuery(".fir-worst-radio").each(function(){
if(jQuery(this).find('input[type="radio"]').first().attr("checked")){
jQuery(this).addClass('fir-radio-checked');
jQuery(this).parents("td.element").addClass('worst-checked');
jQuery(this).parents("tr.row-elements").find("th.row-legend").addClass('worst-checked');
}else{
jQuery(this).removeClass('fir-radio-checked');
jQuery(this).parents("td.element").removeClass('worst-checked');
jQuery(this).parents("tr.row-elements").find("th.row-legend").removeClass('worst-checked');
}
});
jQuery("div.answers").each(function(){
goNextonAnswer()
})
// 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("td.element").removeClass('best-checked');
jQuery(this).parents(".answers").find("th.row-legend").removeClass('best-checked');
jQuery(this).addClass('fir-radio-checked');
jQuery(this).parents("td.element").addClass('best-checked');
jQuery(this).parents("tr.row-elements").find("th.row-legend").addClass('best-checked');
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("td.element").removeClass('worst-checked');
jQuery(this).parents(".answers").find("th.row-legend").removeClass('worst-checked');
jQuery(this).addClass('fir-radio-checked');
jQuery(this).parents("td.element").addClass('worst-checked');
jQuery(this).parents("tr.row-elements").find("th.row-legend").addClass('worst-checked');
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("td.element").removeClass('best-checked');
jQuery(this).parents(".answers").find("th.row-legend").removeClass('best-checked');
jQuery(this).find(".fir-best-radio").addClass('fir-radio-checked');
jQuery(this).addClass('best-checked');
jQuery(this).parents("tr.row-elements").find("th.row-legend").addClass('best-checked');
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("td.element").removeClass('worst-checked');
jQuery(this).parents(".answers").find("th.row-legend").removeClass('worst-checked');
jQuery(this).find(".fir-worst-radio").addClass('fir-radio-checked');
jQuery(this).addClass('worst-checked');
jQuery(this).parents("tr.row-elements").find("th.row-legend").addClass('worst-checked');
var jQueryradio = jQuery(this).find('input[type="radio"]');
jQueryradio.prop("checked",!jQueryradio.prop("checked"));
goNextonAnswer()
}
});
});
function goNextonAnswer(){
var cntr = 0;
var curindex = jQuery( "#accordion" ).accordion( "option", "active" );
if (jQuery(".ui-accordion-content-active .fir-best-radio.fir-radio-checked").length>0) {
cntr = cntr + 1
}
if (jQuery(".ui-accordion-content-active .fir-worst-radio.fir-radio-checked").length>0) {
cntr = cntr + 1
}
var totalacc = jQuery("h3.ui-accordion-header").length
var indexToActivate = curindex
if ((indexToActivate + 1) < totalacc){
indexToActivate = indexToActivate + 1
}
if (cntr>1){
jQuery( "#accordion" ).accordion( "option", "active",indexToActivate );
jQuery( "#accordion" ).on( "accordionactivate", function( event, ui ) {
ui.oldHeader.removeClass("hidden");
ui.oldPanel.removeClass("hidden");
} );
}
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>
<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/>