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

Question

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 class="page"> <div class="page-head">Fixed Header</div> <div class="main"> <div class="main__inner"> <div class="wrap"> <div class="boxout"> <h2>Quiz</h2> <p>Drag the correct words from the list below to complete the following sentences:</p> <div class="missing-words"> <ul class="missing-words__answers"> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-1">Closed</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-2">Characteristics</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-3">Loyalty</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-4">Observations</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-5">Sales</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-6">Primary</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-7">Profiles</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-8">Competitors</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-9">Quantitative</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-10">Same</span></li> </ul> <ul class="missing-words__list"> <li>In order to understand target customers, a business may create customer <span class="missing-words__blank blank resizable" data-accept="word-7"></span> – this involves grouping customers together based on sets of shared <span class="missing-words__blank blank resizable" data-accept="word-2"></span>.</li> <li>Identifying and marketing to target customers is the most effective way for a business to maximise <span class="missing-words__blank blank resizable" data-accept="word-5"></span>. Targeting customers effectively also helps a business to build customer <span class="missing-words__blank blank resizable" data-accept="word-3"></span>.</li> <li><span class="missing-words__blank blank resizable" data-accept="word-8"></span> are other businesses that offer the <span class="missing-words__blank blank resizable" data-accept="word-10"></span> or similar products/services.</li> <li>Questionnaires, focus groups and <span class="missing-words__blank blank resizable" data-accept="word-4"></span> are all examples of <span class="missing-words__blank blank resizable" data-accept="word-6"></span> research methods.</li> <li><span class="missing-words__blank blank resizable" 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 class="missing-words__blank blank resizable" data-accept="word-1"></span> questions.</li> </ul> </div> </div> <div class="table-overflow"> <table class="table-solid"> <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" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"> <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tab-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Ikea</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tab-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Nike</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tab-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Microsoft</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-4" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false"><a href="#tab-4" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Tesla</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-5" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false"><a href="#tab-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5">Starbucks</a></li> </ul> <div id="tab-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" 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" class="ui-tabs-panel ui-widget-content ui-corner-bottom" 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" class="ui-tabs-panel ui-widget-content ui-corner-bottom" 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" class="ui-tabs-panel ui-widget-content ui-corner-bottom" 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" class="ui-tabs-panel ui-widget-content ui-corner-bottom" 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 class="page-foot">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>

Answer 1

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 class="page"> <div class="page-head">Fixed Header</div> <div class="main"> <div class="main__inner"> <div class="wrap"> <div class="boxout"> <h2>Quiz</h2> <p>Drag the correct words from the list below to complete the following sentences:</p> <div class="missing-words"> <ul class="missing-words__answers"> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-1">Closed</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-2">Characteristics</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-3">Loyalty</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-4">Observations</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-5">Sales</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-6">Primary</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-7">Profiles</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-8">Competitors</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-9">Quantitative</span></li> <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-10">Same</span></li> </ul> <ul class="missing-words__list"> <li>In order to understand target customers, a business may create customer <span class="missing-words__blank blank resizable" data-accept="word-7"></span> – this involves grouping customers together based on sets of shared <span class="missing-words__blank blank resizable" data-accept="word-2"></span>.</li> <li>Identifying and marketing to target customers is the most effective way for a business to maximise <span class="missing-words__blank blank resizable" data-accept="word-5"></span>. Targeting customers effectively also helps a business to build customer <span class="missing-words__blank blank resizable" data-accept="word-3"></span>.</li> <li><span class="missing-words__blank blank resizable" data-accept="word-8"></span> are other businesses that offer the <span class="missing-words__blank blank resizable" data-accept="word-10"></span> or similar products/services.</li> <li>Questionnaires, focus groups and <span class="missing-words__blank blank resizable" data-accept="word-4"></span> are all examples of <span class="missing-words__blank blank resizable" data-accept="word-6"></span> research methods.</li> <li><span class="missing-words__blank blank resizable" 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 class="missing-words__blank blank resizable" data-accept="word-1"></span> questions.</li> </ul> </div> </div> <div class="table-overflow"> <table class="table-solid"> <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" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"> <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tab-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Ikea</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tab-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Nike</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tab-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Microsoft</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-4" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false"><a href="#tab-4" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Tesla</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-5" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false"><a href="#tab-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5">Starbucks</a></li> </ul> <div id="tab-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" 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" class="ui-tabs-panel ui-widget-content ui-corner-bottom" 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" class="ui-tabs-panel ui-widget-content ui-corner-bottom" 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" class="ui-tabs-panel ui-widget-content ui-corner-bottom" 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" class="ui-tabs-panel ui-widget-content ui-corner-bottom" 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 class="page-foot">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.