S3310002 - Design Layout

Hi Alex, Hope you had a great weekend! Can you please do me a favor and look at this document under Q7? We have a conjoint design which I will need to spin up and I am wondering if we can mirror the design in the questionnaire? I am not sure what you’d need from me to start this, but I think it would take me like an hour or two to generate the code that spits out the piping. All of the bulleted text in the 2nd, 3rd, and 4th columns would be the stuff that comes from the piped text. Are you able to design something for this today? Ideally, I’d like to get a completed link to the client by EOD or sooner… I am painfully late on delivering the initial link so would love to come in strong at the end.  Please let me know if that’s at all possible. Thanks! Justin Pilarcik | Research Results, Inc.

HTML

<script src="https://researchresults.opinioninsight.com/panel/files/24/corner.js"></script>
<table class='dcmTable'>

  <tbody>
    <tr>
      <td colspan='5' class='instructionText'>If these were your only options, which one would you select?
        <br/> Select by clicking one of the buttons below:
      </td>
    </tr>
    <tr>
      <td>• Product Mix</td>
      <td>
        <div class='curveBorderTop'>
          • Depth in a few &#8203; products (e.g., Plate &#8203; / Tubing / Fabrication/ &#8203; Long, etc.)</div>
      </td>
      <td>
        <div class='curveBorderTop'>• Depth in a few products (e.g., Flat / Long / Structurals, etc.)</div>
      </td>
      <td>
        <div class='curveBorderTop'>• Breadth in most products
        </div>
      </td>
      <td class='exclusiveCell' rowspan='7' valign='middle'>
        <div class='curveBorderTop'>I would not select any of these offers</div>
      </td>
    </tr>
    <tr>
      <td>• Product Availability
      </td>
      <td>• Always available</td>
      <td>• Always available</td>
      <td>• Available 90% of the time</td>
    </tr>
    <tr>
      <td>• Sales Responsiveness
      </td>
      <td>• Within 24 hours</td>
      <td>• Within 1 hour</td>
      <td>• Within 4 hours</td>
    </tr>
    <tr>
      <td>• Delivery Integrity
      </td>
      <td>• 95%-100% on time</td>
      <td>• 90%-94% on time</td>
      <td>• Flexible on delivery
      </td>
    </tr>
    <tr>
      <td>• Delivery Speed
      </td>
      <td>• Within 24 hours</td>
      <td>• Within 48 hours</td>
      <td>• Within 72 hours</td>
    </tr>
    <tr>
      <td>• Price</td>
      <td>• Above market prices (5% higher)</td>
      <td>• Below market prices (3% lower)</td>
      <td>• Market Price</td>
    </tr>
    <tr>
      <td>• Value-Added Services
      </td>
      <td>• Premium: Supplier Inventory Management, Stocking Programs, Extended Terms</td>
      <td>• Premium: Supplier Inventory Management, Stocking Programs, Extended...

CSS

table.dcmTable {
  border-collapse: collapse;
  width: 750px;
  border: none;
}

table.dcmTable tbody tr td {
  /*border: solid 1px #000;*/
  vertical-align: top;
  font-size: .68em;
  font-family: arial;
  max-width: 150px;
  padding-left: 5px;
  padding-rigt: 5px;
}

table.dcmTable tbody tr td.exclusiveCell {
  text-align: center;
  vertical-align: top;
}

div.curveBorderTop {
  border-top: solid 1px #ACE;
  border-left: solid 1px #ACE;
  border-right: solid 1px #ACE;
  border-bottom: none;
  width: 100%;
  height: 100% !important;
  margin: 0;
  padding: 0;
  display: block;
}

td.exclusiveCell div.curveBorderTop {
  /*padding-top: 200%;*/
  position: relative;
  display: block;
}

div.curveBorderBottom {
  border-top: none;
  border-left: solid 1px #ACE;
  border-right: solid 1px #ACE;
  border-bottom: solid 1px #ACE;
  width: 100%;
  text-align: center;
  display: block;
}

div.middleRows {
  border-top: none;
  border-left: solid 1px #ACE;
  border-right: solid 1px #ACE;
  border-bottom: none;
  width: 100%;
  height: 100% !important;
  text-align: left;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  display: block;
}

td.selectOne {
  text-align: right;
}

td.instructionText {
  text-align: center;
  font-style: italic;
}

div.firstColumn {
  padding-top: 2.5%;
  padding-bottom: 2.5%;
}

table.dcmTable tbody tr td div.middleRows {
	margin: 0;
	position: relative;
	top: -2px;
}

table.dcmTable tbody tr td div.curveBorderBottom {
	margin: 0;
	position: relative;
	top: -5px;
}

JavaScript

console.log($('span').length);

$('div.curveBorderTop').corner("top");
$('div.curveBorderBottom').corner("bottom");

var targetRows = $('tr:gt(0)').not($('tr:last'));
targetRows.each(function() {
  var notExclusive = $(this).find('td.exclusiveCell');
  var notTop = $(this).find('div.curveBorderTop').closest('td');
  $(this).find('td:gt(0)').not(notExclusive).not(notTop).addClass('middleRows');
  $(this).find('td:eq(0)').addClass('firstColumn');
});

$('td.firstColumn').each(function() {
  var originalText = $(this).text();
  var newHTML = "<div class='firstColumn'>" + originalText + "</div>";
  $(this).html(newHTML);
});

$("td.middleRows").each(function() {
  var originalText = $(this).text();
  var newHTML = "<div class='middleRows'>" + originalText + "</div>";
  $(this).html(newHTML);
});

function makeSameMiddle() {
  $('.middleRows').closest('td').fadeIn(150);
  var elementHeights = $('.middleRows').closest('td').map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable number of arguments
  // `apply` is equivalent to passing each height as an argument
  var maxHeight = Math.max.apply(null, elementHeights);

  // Set each height to the max height
  $('div.middleRows').css('min-height', maxHeight);
}

function makeSameTop() {
  $('.curveBorderTop').closest('td').not($('td.exclusiveCell')).fadeIn(150);
  var elementHeights = $('.curveBorderTop').closest('td').not($('td.exclusiveCell')).map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable number of arguments
  // `apply` is equivalent to passing each height as an argument
  var maxHeight = Math.max.apply(null, elementHeights);

  // Set each height to the max height
  $('div.curveBorderTop').css('min-height', maxHeight);
}

function makeSameBottom() {
  $('.middleRows').closest('td').fadeIn(150);
  var elementHeights = $('.middleRows').closest('td').map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable...