Home > OS >  Page won't vertically scroll when dragging a draggable item down/up the page
Page won't vertically scroll when dragging a draggable item down/up the page

Time：09-21

I have a drag and drop quiz, where a user would click and drag a term into the correct blank space in a list of statements.

This works however on longer pages when the draggable terms and paragraphs aren't in the viewport and you need to scroll, the page will not move when you drag the term to the bottom edge of the page. I have removed a lot of overflow: hidden from parent elements however I'm still getting this issue.

Can anyone shed some light on why and hopefully offer a solution so the content, while dragging is accessible on shorter viewports? I've noticed while dragging if you use the arrow keys the page does move so I don't think it's an overflow issue?

Added code to post but also available on CodePen if easier to review: https://codepen.io/moy/pen/gOzWBmJ

/**
 * Fix for iOS bug with scroll height when using 100vh/fixed elements.
 */
 
const documentHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--doc-height', '${window.innerHeight}px')
}
window.addEventListener('resize', documentHeight)
documentHeight()




/**
 * jQUery UI tabs
 */

$(function() {
    $('#tabs').tabs();
});




/*------------------------------------*\
    #QUIZZES
\*------------------------------------*/

/**
 * Drag & Drop Quiz.
 *
 * 1. Make words draggable with revert = true.
 */
 
$(document).ready(function() {
    score = 0;
    if ($('.draggable')[0]) {
        $('.draggable').draggable({
            revert: true /* [1] */,
            snapTolerance: 30,
            revertDuration: 0,
            cursor: 'move',
            create: function(event, ui) {
                $(event.target).css('width', Math.ceil($(event.target).width())   1   'px');
            },
            zIndex: 100,
        });
    }
});

/**
 * Make blank spaces accept corresponding word.
 */

$('.blank').each(function(index) {
    toAccept = $(this)[0].getAttribute('data-accept'); //Compatible for lower IE
    // Resize spans to correct answer
    if ($(this).hasClass('resizable')) {
        answer = $('.draggable.'   toAccept);
        width = answer[0].scrollWidth;
        width =
            width -
            $(this)
                .css('padding-left')
                .replace('px', '') *
                2;
        $(this).css('width', width);
    }

    $(this).droppable({
        accept: '.'   toAccept,
        drop: function(event, ui) {
            $(this).append(ui.draggable);
            $(this).addClass('answered');

            score  ;
            $(ui.draggable).draggable('destroy');
            $(this).droppable('destroy');
        },
    });
});

/**
 * Multiple Choice Quiz (radio button based).
 */

function checkMultiChoiceAnswer() {
    score = 0;
    qs = 0;
    $('input[value="true"]').each(function() {
        qs  ;
    });
    $('input').each(function(ind, ele, arr) {
        if (ele.value == 'true' && ele.checked === true) {
            score  ;
        }
    });
    // console.log(score);
    $('.quiz__correct').text(score.toString());
    $('.quiz__total').text(qs.toString());
}

function multiReset() {
    qs = 0;
    $('.checked').each(function(ind, ele, arr) {
        $(ele).removeClass('checked');
    });
    $('input').each(function(ind, ele, arr) {
        ele.checked = false;
    });
    $('input[value="true"]').each(function() {
        qs  ;
    });
    $('.quiz__total').text(qs);
    $('.quiz__correct').text('0');
}

/**
 * Data Entry Quiz (input based).
 */

function checkAnswersCashFlow() {
    score = 0;
    $('.answerable').each(function(index, element, array) {
        givenAns = $(element)[0].value.replace('/[^0-9]/g', '');
        givenAns = givenAns.toLowerCase();

        ans = $(element)[0]
            .getAttribute('data-accept')
            .replace('/[^0-9]/g', '');
        if (givenAns == ans) {
            score  ;
        }
        $('.quiz__correct').text(score);
    });
}

function tableReset() {
    $('.quiz__correct').text('0');
    $('.answerable').val('');
}

/**
 * Sets Quiz score to 0/X on page load and on reset. This works on the "Multiple
 * Choice Quiz" and also the "Data Entry Quiz".
 */

window.onload = function() {
    if (typeof $('.quiz__total')[0] != 'undefined') {
        qs = 0;
        $('input[value="true"]').each(function() {
            qs  ;
        });
        $('.quiz__total').text(qs);
    }
    if (typeof $('.answerable')[0] != 'undefined') {
        total = 0;
        $('.answerable').each(function(ind, ele, arr) {
            total  ;
        });
        $('.quiz__total').text(total);
    }
};
/* Base */
html {
  background: white;
  font-size: 62.5%;
  height: 100%;
  height: var(--doc-height);
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f7f7f7;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  background: skyblue;
  color: black;
  font-family: Arial;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  min-height: 100%;
  min-height: var(--doc-height);
  letter-spacing: 1px;
  line-height: 1.6em;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0 0 24px;
  padding: 0;
}

/* Page Layout */
.page {
  padding: 72px 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.page-head {
  background-color: white;
  box-shadow: inset 0 -4px 0 #f7f7f7, 0 4px 0 rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  display: flex;
  height: 72px;
  padding: 0 12px;
  position: fixed;
  top: 0;
  text-align: center;
  width: 100%;
  z-index: 100;
}

.page-foot {
  background-color: white;
  box-sizing: border-box;
  box-shadow: inset 0 4px 0 #f7f7f7, 0 -4px 0 rgba(0, 0, 0, 0.08);
  height: 72px;
  padding: 12px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

/* Main Container */
.main {
  display: flex;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px 0 0;
  position: relative;
  width: 100%;
  max-width: 1024px;
  z-index: 10;
}
.main:before, .main:after {
  content: "";
  display: flex;
  flex-shrink: 0;
  position: sticky;
  background: red;
  background-size: 100%;
  height: 370px;
  top: 64px;
  margin-left: -112px;
  width: 112px;
}
.main:after {
  margin-left: auto;
  margin-right: -112px;
}

.main__inner {
  box-sizing: border-box;
  display: block;
  padding: 0 12px;
  width: 100%;
}

/* Content Group */
.wrap {
  background: white;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.08), 4px 4px 0 rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  border-radius: 12px;
  margin: 0 auto 24px;
  padding: 24px 24px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Boxout */
.boxout {
  background-color: #f7f7f7;
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 24px 24px 0;
  position: relative;
}

/* Quiz */
.missing-words {
  position: relative;
}

.missing-words__answers {
  background: white;
  border-radius: 4px;
  margin-bottom: 24px;
  padding: 24px 24px 12px;
  transform: translateZ(0);
}

.missing-words__answers-item {
  background: none;
  box-sizing: border-box;
  display: inline-block;
  min-height: 32px;
  margin: 0 4px 8px 0;
  padding: 0;
  transition: 0.24s ease-in;
  vertical-align: top;
}

.missing-words__draggable {
  background: skyblue;
  border-radius: 24px;
  color: black;
  cursor: -webkit-grab;
  cursor: grab;
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 16px;
  padding: 8px 16px;
  position: relative;
  white-space: nowrap;
}

.missing-word__list {
  border-radius: 4px;
  overflow: hidden;
  padding-left: 0;
}

.missing-words__list li {
  background: white;
  margin-bottom: 2px;
  padding: 24px 24px 15px;
}

.missing-words__blank {
  background: #f7f7f7;
  outline: 2px dashed rgba(0, 0, 0, 0.12);
  border-radius: 24px;
  box-shadow: inset 2px 2px 0 #f7f7f7;
  box-sizing: border-box;
  display: inline-block;
  min-height: 32px;
  letter-spacing: 1px;
  margin: 8px 2px !important;
  text-align: center;
  vertical-align: middle;
  width: calc(100% - 4px);
}

/* Table */
.table-overflow {
  overflow-x: auto;
}

table {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
}

th,
td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

tbody th,
tbody td {
  background: #f7f7f7;
}

/* Tabs */
.ui-tabs {
  margin: 0 0var --spacing-24;
  position: relative;
  text-shadow: none;
  width: 100%;
  overflow: hidden;
}

.ui-tabs-nav {
  font-weight: 700;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.ui-tabs-nav li {
  background: none;
  display: inline-block;
  margin: 0;
  padding-left: 0;
  position: relative;
  width: auto;
}

.ui-tabs-nav a {
  background: skyblue;
  box-sizing: border-box;
  border-radius: 8px 8px 0 0;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-size: 1.4rem;
  height: 48px;
  line-height: 48px;
  outline: none;
  padding: 0 12px;
  transition: none;
  min-width: 48px;
}

.ui-tabs-nav .ui-state-active a {
  background: #f7f7f7;
}

.ui-tabs-panel {
  background: #f7f7f7;
  border-radius: 0 0 12px 12px;
  clear: both;
  display: block;
  margin: 0 0 24px;
  padding: 24px 24px 0;
  position: relative;
}
<div >
  <div >Fixed Header</div>
  <div >
    <div >
      <div >

        <div >
            <h2>Quiz</h2>
          <p>Drag the correct words from the list below to complete the following sentences:</p>
          <div >
            <ul >
              <li ><span >Closed</span></li>
              <li ><span >Characteristics</span></li>
              <li ><span >Loyalty</span></li>
              <li ><span >Observations</span></li>
              <li ><span >Sales</span></li>
              <li ><span >Primary</span></li>
              <li ><span >Profiles</span></li>
              <li ><span >Competitors</span></li>
              <li ><span >Quantitative</span></li>
              <li ><span >Same</span></li>
            </ul>
            <ul >
              <li>In order to understand target customers, a business may create customer <span  data-accept="word-7"></span> – this involves grouping customers together based on sets of shared <span  data-accept="word-2"></span> .</li>
              <li>Identifying and marketing to target customers is the most effective way for a business to maximise <span  data-accept="word-5"></span> . Targeting customers effectively also helps a business to build customer <span  data-accept="word-3"></span> .</li>
              <li><span  data-accept="word-8"></span> are other businesses that offer the <span  data-accept="word-10"></span> or similar products/services.</li>
              <li>Questionnaires, focus groups and <span  data-accept="word-4"></span> are all examples of <span  data-accept="word-6"></span> research methods.</li>
              <li><span  data-accept="word-9"></span> data relates to amounts or quantities and can be easily counted and measured. It can be collected through the use of <span  data-accept="word-1"></span> questions.</li>
            </ul>
          </div>
        </div>

        <div >
          <table >
            <thead>
              <tr>
                <th style="width: 33.33333%;">&nbsp;</th>
                <th style="width: 33.33333%;">Primary research</th>
                <th style="width: 33.33333%;">Secondary research</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Definition:</th>
                <td><textarea></textarea></td>
                <td><textarea></textarea></td>
              </tr>
              <tr>
                <th>Examples:</th>
                <td><textarea></textarea></td>
                <td><textarea></textarea></td>
              </tr>
            </tbody>
          </table>
          <div id="tabs" >
            <ul  role="tablist">
              <li  role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tab-1"  role="presentation" tabindex="-1" id="ui-id-1">Ikea</a></li>
              <li  role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tab-2"  role="presentation" tabindex="-1" id="ui-id-2">Nike</a></li>
              <li  role="tab" tabindex="-1" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tab-3"  role="presentation" tabindex="-1" id="ui-id-3">Microsoft</a></li>
              <li  role="tab" tabindex="-1" aria-controls="tab-4" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false"><a href="#tab-4"  role="presentation" tabindex="-1" id="ui-id-4">Tesla</a></li>
              <li  role="tab" tabindex="-1" aria-controls="tab-5" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false"><a href="#tab-5"  role="presentation" tabindex="-1" id="ui-id-5">Starbucks</a></li>
            </ul>
            <div id="tab-1" aria-labelledby="ui-id-1"  role="tabpanel" aria-hidden="false">
              <h2>Ikea</h2>
              <p>Ikea’s mission statement is:</p>
              <blockquote>
                <p>To offer a wide range of well-designed, functional home furnishing products at prices so low, that as many people as possible will be able to afford them.</p>
              </blockquote>
            </div>
            <div id="tab-2" aria-labelledby="ui-id-2"  role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Nike</h2>
              <p>Nike’s mission statement is:</p>
              <blockquote>
                <p>To bring inspiration and innovation to every athlete in the world – if you have a body, you are an athlete.</p>
              </blockquote>
            </div>
            <div id="tab-3" aria-labelledby="ui-id-3"  role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Microsoft</h2>
              <p>Microsoft’s mission statement is:</p>
              <blockquote>
                <p>To empower every person and every organisation on the planet to achieve more.</p>
              </blockquote>
            </div>
            <div id="tab-4" aria-labelledby="ui-id-4"  role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Tesla</h2>
              <p>Tesla’s mission statement is:</p>
              <blockquote>
                <p>To accelerate the world’s transition to sustainable energy.</p>
              </blockquote>
            </div>
            <div id="tab-5" aria-labelledby="ui-id-5"  role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Starbucks</h2>
              <p>Starbucks’ mission statement is:</p>
              <blockquote>
                <p>To inspire and nurture the human spirit – one person, one cup and one neighbourhood at a time.</p>
              </blockquote>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div >Fixed Footer</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

CodePudding user response：

You will need to use helper and appendTo options. This is discussed more here.

Here is an example.

/**
 * Fix for iOS bug with scroll height when using 100vh/fixed elements.
 */

const documentHeight = () => {
  const doc = document.documentElement
  doc.style.setProperty('--doc-height', '${window.innerHeight}px')
}
window.addEventListener('resize', documentHeight);
documentHeight();


$(function() {
  $('#tabs').tabs();

  var score = 0;
  if ($('.draggable').length) {
    $('.draggable').draggable({
      containment: ".wrap",
      appendTo: ".wrap",
      helper: "clone",
      revert: true,
      snapTolerance: 30,
      revertDuration: 0,
      cursor: 'move',
      create: function(event, ui) {
        $(event.target).css('width', Math.ceil($(event.target).width())   1   'px');
      },
      start: function(e, ui) {
        $(this).css("visibility", "hidden");
      },
      stop: function(e, ui) {
        $(this).css("visibility", "visible");
      },
      zIndex: 1000
    });
  }

  $('.blank').each(function(index) {
    toAccept = $(this)[0].getAttribute('data-accept'); //Compatible for lower IE
    // Resize spans to correct answer
    if ($(this).hasClass('resizable')) {
      answer = $('.draggable.'   toAccept);
      width = answer[0].scrollWidth;
      width =
        width -
        $(this)
        .css('padding-left')
        .replace('px', '') *
        2;
      $(this).css('width', width);
    }

    $(this).droppable({
      accept: '.'   toAccept,
      drop: function(event, ui) {
        $(this).append(ui.draggable);
        ui.draggable.css("visibility", "visible");
        $(this).addClass('answered');
        score  ;
        $(ui.draggable).draggable('destroy');
        $(this).droppable('destroy');
      },
    });
  });

  function checkMultiChoiceAnswer() {
    score = 0;
    qs = 0;
    $('input[value="true"]').each(function() {
      qs  ;
    });
    $('input').each(function(ind, ele, arr) {
      if (ele.value == 'true' && ele.checked === true) {
        score  ;
      }
    });
    // console.log(score);
    $('.quiz__correct').text(score.toString());
    $('.quiz__total').text(qs.toString());
  }

  function multiReset() {
    qs = 0;
    $('.checked').each(function(ind, ele, arr) {
      $(ele).removeClass('checked');
    });
    $('input').each(function(ind, ele, arr) {
      ele.checked = false;
    });
    $('input[value="true"]').each(function() {
      qs  ;
    });
    $('.quiz__total').text(qs);
    $('.quiz__correct').text('0');
  }

  /**
   * Data Entry Quiz (input based).
   */

  function checkAnswersCashFlow() {
    score = 0;
    $('.answerable').each(function(index, element, array) {
      givenAns = $(element)[0].value.replace('/[^0-9]/g', '');
      givenAns = givenAns.toLowerCase();

      ans = $(element)[0]
        .getAttribute('data-accept')
        .replace('/[^0-9]/g', '');
      if (givenAns == ans) {
        score  ;
      }
      $('.quiz__correct').text(score);
    });
  }

  function tableReset() {
    $('.quiz__correct').text('0');
    $('.answerable').val('');
  }

  /**
   * Sets Quiz score to 0/X on page load and on reset. This works on the "Multiple
   * Choice Quiz" and also the "Data Entry Quiz".
   */

  window.onload = function() {
    if (typeof $('.quiz__total')[0] != 'undefined') {
      qs = 0;
      $('input[value="true"]').each(function() {
        qs  ;
      });
      $('.quiz__total').text(qs);
    }
    if (typeof $('.answerable')[0] != 'undefined') {
      total = 0;
      $('.answerable').each(function(ind, ele, arr) {
        total  ;
      });
      $('.quiz__total').text(total);
    }
  };
});
/* Base */

html {
  background: white;
  font-size: 62.5%;
  height: 100%;
  height: var(--doc-height);
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f7f7f7;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  background: skyblue;
  color: black;
  font-family: Arial;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  min-height: 100%;
  min-height: var(--doc-height);
  letter-spacing: 1px;
  line-height: 1.6em;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0 0 24px;
  padding: 0;
}


/* Page Layout */

.page {
  padding: 72px 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.page-head {
  background-color: white;
  box-shadow: inset 0 -4px 0 #f7f7f7, 0 4px 0 rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  display: flex;
  height: 72px;
  padding: 0 12px;
  position: fixed;
  top: 0;
  text-align: center;
  width: 100%;
  z-index: 100;
}

.page-foot {
  background-color: white;
  box-sizing: border-box;
  box-shadow: inset 0 4px 0 #f7f7f7, 0 -4px 0 rgba(0, 0, 0, 0.08);
  height: 72px;
  padding: 12px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}


/* Main Container */

.main {
  display: flex;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px 0 0;
  position: relative;
  width: 100%;
  max-width: 1024px;
  z-index: 10;
}

.main:before,
.main:after {
  content: "";
  display: flex;
  flex-shrink: 0;
  position: sticky;
  background: red;
  background-size: 100%;
  height: 370px;
  top: 64px;
  margin-left: -112px;
  width: 112px;
}

.main:after {
  margin-left: auto;
  margin-right: -112px;
}

.main__inner {
  box-sizing: border-box;
  display: block;
  padding: 0 12px;
  width: 100%;
}


/* Content Group */

.wrap {
  background: white;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.08), 4px 4px 0 rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  border-radius: 12px;
  margin: 0 auto 24px;
  padding: 24px 24px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}


/* Boxout */

.boxout {
  background-color: #f7f7f7;
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 24px 24px 0;
  position: relative;
}


/* Quiz */

.missing-words {
  position: relative;
}

.missing-words__answers {
  background: white;
  border-radius: 4px;
  margin-bottom: 24px;
  padding: 24px 24px 12px;
  transform: translateZ(0);
}

.missing-words__answers-item {
  background: none;
  box-sizing: border-box;
  display: inline-block;
  min-height: 32px;
  margin: 0 4px 8px 0;
  padding: 0;
  transition: 0.24s ease-in;
  vertical-align: top;
}

.missing-words__draggable {
  background: skyblue;
  border-radius: 24px;
  color: black;
  cursor: -webkit-grab;
  cursor: grab;
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 16px;
  padding: 8px 16px;
  position: relative;
  white-space: nowrap;
}

.missing-word__list {
  border-radius: 4px;
  overflow: hidden;
  padding-left: 0;
}

.missing-words__list li {
  background: white;
  margin-bottom: 2px;
  padding: 24px 24px 15px;
}

.missing-words__blank {
  background: #f7f7f7;
  outline: 2px dashed rgba(0, 0, 0, 0.12);
  border-radius: 24px;
  box-shadow: inset 2px 2px 0 #f7f7f7;
  box-sizing: border-box;
  display: inline-block;
  min-height: 32px;
  letter-spacing: 1px;
  margin: 8px 2px !important;
  text-align: center;
  vertical-align: middle;
  width: calc(100% - 4px);
}


/* Table */

.table-overflow {
  overflow-x: auto;
}

table {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
}

th,
td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

tbody th,
tbody td {
  background: #f7f7f7;
}


/* Tabs */

.ui-tabs {
  margin: 0 0var --spacing-24;
  position: relative;
  text-shadow: none;
  width: 100%;
  overflow: hidden;
}

.ui-tabs-nav {
  font-weight: 700;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.ui-tabs-nav li {
  background: none;
  display: inline-block;
  margin: 0;
  padding-left: 0;
  position: relative;
  width: auto;
}

.ui-tabs-nav a {
  background: skyblue;
  box-sizing: border-box;
  border-radius: 8px 8px 0 0;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-size: 1.4rem;
  height: 48px;
  line-height: 48px;
  outline: none;
  padding: 0 12px;
  transition: none;
  min-width: 48px;
}

.ui-tabs-nav .ui-state-active a {
  background: #f7f7f7;
}

.ui-tabs-panel {
  background: #f7f7f7;
  border-radius: 0 0 12px 12px;
  clear: both;
  display: block;
  margin: 0 0 24px;
  padding: 24px 24px 0;
  position: relative;
}
<div >
  <div >Fixed Header</div>
  <div >
    <div >
      <div >
        <div >
          <h2>Quiz</h2>
          <p>Drag the correct words from the list below to complete the following sentences:</p>
          <div >
            <ul >
              <li ><span >Closed</span></li>
              <li ><span >Characteristics</span></li>
              <li ><span >Loyalty</span></li>
              <li ><span >Observations</span></li>
              <li ><span >Sales</span></li>
              <li ><span >Primary</span></li>
              <li ><span >Profiles</span></li>
              <li ><span >Competitors</span></li>
              <li ><span >Quantitative</span></li>
              <li ><span >Same</span></li>
            </ul>
            <ul >
              <li>In order to understand target customers, a business may create customer <span  data-accept="word-7"></span> – this involves grouping customers together based on sets of shared <span 
                  data-accept="word-2"></span> .</li>
              <li>Identifying and marketing to target customers is the most effective way for a business to maximise <span  data-accept="word-5"></span> . Targeting customers effectively also helps a business to
                build customer <span  data-accept="word-3"></span> .</li>
              <li><span  data-accept="word-8"></span> are other businesses that offer the <span  data-accept="word-10"></span> or similar products/services.</li>
              <li>Questionnaires, focus groups and <span  data-accept="word-4"></span> are all examples of <span  data-accept="word-6"></span> research methods.</li>
              <li><span  data-accept="word-9"></span> data relates to amounts or quantities and can be easily counted and measured. It can be collected through the use of <span 
                  data-accept="word-1"></span> questions.</li>
            </ul>
          </div>
        </div>
        <div >
          <table >
            <thead>
              <tr>
                <th style="width: 33.33333%;">&nbsp;</th>
                <th style="width: 33.33333%;">Primary research</th>
                <th style="width: 33.33333%;">Secondary research</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Definition:</th>
                <td><textarea></textarea></td>
                <td><textarea></textarea></td>
              </tr>
              <tr>
                <th>Examples:</th>
                <td><textarea></textarea></td>
                <td><textarea></textarea></td>
              </tr>
            </tbody>
          </table>
          <div id="tabs" >
            <ul  role="tablist">
              <li  role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tab-1"  role="presentation" tabindex="-1" id="ui-id-1">Ikea</a></li>
              <li  role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tab-2"  role="presentation" tabindex="-1" id="ui-id-2">Nike</a></li>
              <li  role="tab" tabindex="-1" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tab-3"  role="presentation" tabindex="-1" id="ui-id-3">Microsoft</a></li>
              <li  role="tab" tabindex="-1" aria-controls="tab-4" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false"><a href="#tab-4"  role="presentation" tabindex="-1" id="ui-id-4">Tesla</a></li>
              <li  role="tab" tabindex="-1" aria-controls="tab-5" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false"><a href="#tab-5"  role="presentation" tabindex="-1" id="ui-id-5">Starbucks</a></li>
            </ul>
            <div id="tab-1" aria-labelledby="ui-id-1"  role="tabpanel" aria-hidden="false">
              <h2>Ikea</h2>
              <p>Ikea’s mission statement is:</p>
              <blockquote>
                <p>To offer a wide range of well-designed, functional home furnishing products at prices so low, that as many people as possible will be able to afford them.</p>
              </blockquote>
            </div>
            <div id="tab-2" aria-labelledby="ui-id-2"  role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Nike</h2>
              <p>Nike’s mission statement is:</p>
              <blockquote>
                <p>To bring inspiration and innovation to every athlete in the world – if you have a body, you are an athlete.</p>
              </blockquote>
            </div>
            <div id="tab-3" aria-labelledby="ui-id-3"  role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Microsoft</h2>
              <p>Microsoft’s mission statement is:</p>
              <blockquote>
                <p>To empower every person and every organisation on the planet to achieve more.</p>
              </blockquote>
            </div>
            <div id="tab-4" aria-labelledby="ui-id-4"  role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Tesla</h2>
              <p>Tesla’s mission statement is:</p>
              <blockquote>
                <p>To accelerate the world’s transition to sustainable energy.</p>
              </blockquote>
            </div>
            <div id="tab-5" aria-labelledby="ui-id-5"  role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Starbucks</h2>
              <p>Starbucks’ mission statement is:</p>
              <blockquote>
                <p>To inspire and nurture the human spirit – one person, one cup and one neighbourhood at a time.</p>
              </blockquote>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div >Fixed Footer</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

To preserve the same UI interactions, we can make the original not visible (visibility: hidden; retains the proper blocking and "reverting" if the user selects the wrong answer.

Page link：https//www.codepudding.com/os/551390.html

Prev:How map my custom data type with AWS Athena data type?
Next:(zsh: command not found: python) MacOS VS Code
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding