Simple Grid - Horizontal Radio: Card Sort/Grid Carousel

This article will help you create a Grid Swipe question using a Simple Grid formatted as Horizontal Radios

Simple Grid - Horizontal Radio: Card Sort

This code will allow you to style a 'Simple Grid - Horizontal Radio' question to show and answer one grid attribute at a time. 

Click here to see an example

Instructions

1. Add a 'Simple Grid - Horizontal Radio' question type to your survey with all of the appropriate responses
   1. See article: Add a Question: Grid
2. Add the following to the 'Source Code Editor' of the 'Footnote' field.
   1. See article: Source Code Editor
      

      <style>
      	/* DISPLAY GRID IN CODEBOOK*/
      	.cm-Codebook .cm-simple-grid {
      		width: 100% !important;
      		height: auto !important;
      		visibility: visible !important;
      	}
      </style>
      		

3. Add the code below to your 'ADD JAVASCRIPT'. 
   1. See article: Adding JavaScript and/or CSS to a Question
      

      (function($) {
      // Options
      var includeDoneMessage = false;
      
      // Script
      var rows = [];
      var activeIndex = 0;
      var rowCount = $('td.cm-simple-grid__row-header').length;
      var selectOneMarkup = '<div class="display-card"><div class="card_text"></div></div>' +
      '<div id="custom-drag-drop-container">' +
        '<div id="custom-draggable-cards"></div>' +
        '<div id="custom-buckets"></div>' +
      '</div>';
      var selectionDebounce = false;
      if (includeDoneMessage) {
        selectOneMarkup = '<p class="display-card_done"><strong>Done!</strong> Press next to continue.</p>' + selectOneMarkup;
      }
      // SETUP MOBILE VERSION
      // Process column headers
      var buttons = '';
      for (var i = 0; i <= $('th.cm-simple-grid__column-header').length - 1; i++) {
        buttons += '<button type="button" class="selectBtn" data-option="' + (i + 1) + '">' +
          $('th.cm-simple-grid__column-header')[i].innerHTML +
        '</button>';
      }
      selectOneMarkup += '<div class="button-group">' + buttons + '</div>';
      $('.cm-simple-grid').before(selectOneMarkup);
      // Collect row headers.
      for (var i = 0; i <= rowCount - 1; i++) {
        var item = {
          index: i,
          cardContent: $('td.cm-simple-grid__row-header')[i].innerHTML
        }
        rows.push(item);
      }
      // First active card.
      $('.card_text').html(rows[activeIndex].cardContent);
      // button clicked
      $('.selectBtn').click(function($event) {
        if (selectionDebounce) {
          return;
        } else {
          selectionDebounce = true;
        }
        var selectIndex = $(this).attr('data-option');
        // select the correlating radio input
        var row = $($('td.cm-simple-grid__row-header')[activeIndex]).parent();
        $(row.children()[selectIndex]).find('input[type="radio"]').click();
        // update activeIndex
        activeIndex += 1;
        if (activeIndex >= rowCount) {
          // done
          if (includeDoneMessage) {
            $('.display-card_done').addClass('show');
            $('.display-card').hide();
            $('.button-group').hide();
          } else {
            $('.cm-navigation-next-button').click();
          }
        } else {
          // next active card
          var activeCard = $('.card_text');
          var newCardContent = '<div class="card_text">' + rows[activeIndex].cardContent + '</div>';
          activeCard.before(newCardContent);
          activeCard.addClass('disolve');
          setTimeout(function() {
            activeCard.remove();
            selectionDebounce = false;
          }, 700);
        }
      });
      // SETUP DRAG & DROP DESKTOP VERSION
      // Create cards
      var offset = 0;
      for (var i = rows.length - 1; i >= 0; i--) {
        var container = $('<div class="card-contain"></div>').appendTo('#custom-draggable-cards');
        var card = $('<div class="custom-drag-card" data-row="' + i + '">' + rows[i].cardContent + '</div>');
        card.appendTo(container)
          .draggable({
            stack: '#custom-draggable-cards div',
            revert: true
          });
        offset += 5;
        container.css({
          left: '-' + ((card.width() / 2) - offset) + 'px',
          zIndes: i * 2
        });
      }
      // Create buckets
      var bucketsCount = $('th.cm-simple-grid__column-header').length;
      var bucketWidth = ((100 / bucketsCount) - 1);
      for (var i = 0; i <= bucketsCount - 1; i++) {
        $('<div class="custom-bucket" data-column="' + (i + 1) + '"><span>' +
          $('th.cm-simple-grid__column-header')[i].innerHTML +
         '</span><div class="bucket"></div></div>')
          .css('width', bucketWidth + '%')
          .appendTo('#custom-buckets')
          .droppable({
            accept: '.custom-drag-card',
            hoverClass: 'hovered',
            drop: handleCustomCardDrop
          });
      }
      // Handle card drops
      function handleCustomCardDrop(event, ui) {
        var bucketNumber = $(this).attr('data-column');
        var cardNumber = ui.draggable.attr('data-row');
        var row = $($('td.cm-simple-grid__row-header')[cardNumber]).parent();
        $(row.children()[bucketNumber]).find('input[type="radio"]').click();
        ui.draggable.detach().appendTo($(this).children('.bucket'));
        ui.draggable.css({left: 0, top: 0, height: 'auto', width: '100%'});
      }
      // Disable horizontal scroll when dragging
      var $body = $(document);
      $body.bind('scroll', function() {
        if ($body.scrollLeft() !== 0) { $body.scrollLeft(0); }
      });
      })(jQuery);
      		

4. Add the code below to your 'ADD CSS'. 
   1. See article: Adding JavaScript and/or CSS to a Question
      

      .cm-simple-grid {
        width: 0;
        height: 0;
        visibility: hidden;
      }
      
      
      .display-card {
        max-width: 26em;
        margin: 0 auto;
        position: relative;
      }
      
      
      .card_text {
        text-align: center;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 100%;
        padding: 2em;
        margin: 0 auto 1em;
        box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
        transform: translateY(0em);
        opacity: 1;
        transition: transform 500ms ease,
                    opacity 500ms ease;
      }
      .card_text.disolve {
        position: absolute;
        top: 0;
        transform: translateY(2em);
        opacity: 0;
      }
      
      
      .button-group {
        text-align: center;
        margin: 0 auto;
        max-width: 20em; /* remove if you want buttons to wrap */
      }
      .button-group button {
        background-color: #fafafa;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 0 0.25em 0.5em;
        padding: 0.25em 0.75em;
        box-shadow: 0 1px 0.25em 0 rgba(0, 0, 0, 0.1);
        width: 100%; /* remove if you want buttons to wrap */
      }
      .button-group button:hover {
        background-color: whitesmoke;
      }
      .button-group button:active {
        background-color: #f0f0f0;
        box-shadow: none;
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
      }
      
      
      .display-card_done {
        display: none;
      }
      .display-card_done.show {
        display: block;
        text-align: center;
        font-size: 1.5em;
        margin: 3em 0;
      }
      .display-card_done.show + .display-card,
      .display-card_done.show + .display-card + .button-group {
        display: none;
      }
      
      
      /* MEDIA QUERIES */
      #custom-drag-drop-container {
        display: none;
      }
      @media (min-width: 700px) {
        #custom-drag-drop-container {
          display: block;
        }
        .display-card,
        .button-group,
        .display-card_done {
          display: none !important;
        }
      }
      		

5. Make sure to test!

• NOTE
  
  • This code works as is in both V1 and V2 themes
  • This currently does not support "Specify" options