<div data-elementor-type="wp-post" data-elementor-id="19065" class="elementor elementor-19065" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-4e84b066 e-flex e-con-boxed e-con e-parent" data-id="4e84b066" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-26d2df6b elementor-widget elementor-widget-text-editor" data-id="26d2df6b" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
									
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>Interactive Matching Exercise: Spoken Discourse Markers</title>
 <style>
 body {
 font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
 background-color: #f8fafc;
 color: #1e293b;
 line-height: 1.5;
 padding: 30px 15px;
 max-width: 1000px;
 margin: 0 auto;
 }
 h1 {
 color: #0f172a;
 text-align: center;
 margin-bottom: 5px;
 }
 p.subtitle {
 text-align: center;
 color: #64748b;
 margin-bottom: 30px;
 }
 .exercise-card {
 background: white;
 border-radius: 12px;
 padding: 24px;
 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 margin-bottom: 25px;
 }
 h2 {
 font-size: 1.25rem;
 color: #2563eb;
 margin-top: 0;
 border-bottom: 2px solid #e2e8f0;
 padding-bottom: 8px;
 margin-bottom: 20px;
 }
 .instructions {
 background-color: #eff6ff;
 border-left: 4px solid #3b82f6;
 padding: 12px;
 border-radius: 0 8px 8px 0;
 font-size: 0.95rem;
 margin-bottom: 20px;
 }
 .grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 30px;
 }
 @media (max-width: 768px) {
 .grid-container {
 grid-template-columns: 1fr;
 }
 }
 .list-group {
 display: flex;
 flex-direction: column;
 gap: 12px;
 }
 .draggable {
 background-color: #ffffff;
 border: 2px solid #cbd5e1;
 padding: 14px;
 border-radius: 8px;
 cursor: grab;
 font-weight: 500;
 transition: all 0.2s ease;
 user-select: none;
 }
 .draggable:hover {
 border-color: #3b82f6;
 background-color: #f0fdf4;
 transform: translateY(-1px);
 }
 .draggable:active {
 cursor: grabbing;
 }
 .dropzone-wrapper {
 background: #f1f5f9;
 border-radius: 8px;
 padding: 12px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 }
 .target-label {
 font-size: 0.9rem;
 font-weight: 600;
 color: #475569;
 }
 .dropzone {
 border: 2px dashed #94a3b8;
 background: #fff;
 min-height: 52px;
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 5px 10px;
 box-sizing: border-box;
 transition: all 0.2s;
 }
 .dropzone.hover {
 background: #dbeafe;
 border-color: #3b82f6;
 }
 .dropzone.correct {
 border-style: solid;
 border-color: #22c55e;
 background-color: #f0fdf4;
 color: #166534;
 font-weight: 500;
 }
 .locked {
 opacity: 0.5;
 pointer-events: none;
 }
 .success-banner {
 display: none;
 background-color: #dcfce7;
 color: #14532d;
 border: 1px solid #bbf7d0;
 padding: 15px;
 border-radius: 8px;
 text-align: center;
 font-weight: bold;
 margin-top: 20px;
 }
 .reset-container {
 text-align: center;
 margin-top: 20px;
 }
 .btn {
 background-color: #64748b;
 color: white;
 border: none;
 padding: 10px 20px;
 border-radius: 6px;
 font-size: 1rem;
 cursor: pointer;
 transition: background 0.2s;
 }
 .btn:hover {
 background-color: #475569;
 }
 </style>
</head>
<body>

 <h1>Matching Exercise</h1>
 <p class="subtitle">Idiomatic Fillers &#038; Spoken Discourse Markers</p>

 <!-- PART 1 -->
 <div class="exercise-card">
 <h2>Part 1: Match the Phrase to the Completion</h2>
 <div class="instructions">
 <strong>How to play:</strong> Drag a <strong>Completion</strong> piece from the left column and drop it onto the correct matching <strong>Phrase starter</strong> on the right.
 </div>
 
 <div class="grid-container">
 <!-- Left: Completions to Drag -->
 <div class="list-group" id="part1-draggables">
 <div class="draggable" draggable="true" id="p1-ans-A" data-target="p1-row-5">&#8230; I find the coffee shops are better in the old town.</div>
 <div class="draggable" draggable="true" id="p1-ans-B" data-target="p1-row-3">&#8230; I’m thinking of starting a podcast next year.</div>
 <div class="draggable" draggable="true" id="p1-ans-C" data-target="p1-row-4">&#8230; my job is incredibly demanding.</div>
 <div class="draggable" draggable="true" id="p1-ans-D" data-target="p1-row-2">&#8230; I&#8217;m a teacher, but my real passion is painting.</div>
 <div class="draggable" draggable="true" id="p1-ans-E" data-target="p1-row-1">&#8230; the deadline is next Friday, but I think we can finish early.</div>
 </div>

 <!-- Right: Phrase Targets -->
 <div class="list-group">
 <div class="dropzone-wrapper">
 <span class="target-label">1. &#8220;Well technically, &#8230;&#8221;</span>
 <div class="dropzone" id="p1-row-1" data-accept="p1-ans-E">Drop matching completion here</div>
 </div>
 <div class="dropzone-wrapper">
 <span class="target-label">2. &#8220;But usually I tell people&#8230;&#8221;</span>
 <div class="dropzone" id="p1-row-2" data-accept="p1-ans-D">Drop matching completion here</div>
 </div>
 <div class="dropzone-wrapper">
 <span class="target-label">3. &#8220;Well, there’s always a chance&#8230;&#8221;</span>
 <div class="dropzone" id="p1-row-3" data-accept="p1-ans-B">Drop matching completion here</div>
 </div>
 <div class="dropzone-wrapper">
 <span class="target-label">4. &#8220;As ideal as my [home office] is, &#8230;&#8221;</span>
 <div class="dropzone" id="p1-row-4" data-accept="p1-ans-C">Drop matching completion here</div>
 </div>
 <div class="dropzone-wrapper">
 <span class="target-label">5. &#8220;Specifically, &#8230;&#8221;</span>
 <div class="dropzone" id="p1-row-5" data-accept="p1-ans-A">Drop matching completion here</div>
 </div>
 </div>
 </div>
 </div>

 <!-- PART 2 -->
 <div class="exercise-card locked" id="part2-card">
 <h2>Part 2: Match the Complete Phrase to its Function</h2>
 <div class="instructions">
 <strong>ð Unlocked!</strong> Now drag the <strong>Functions (&#8220;Why it&#8217;s great&#8221;)</strong> from the left and drop them onto the corresponding structural phrase on the right.
 </div>

 <div class="grid-container">
 <!-- Left: Functions to Drag -->
 <div class="list-group" id="part2-draggables">
 <div class="draggable" draggable="true" id="p2-ans-A" data-target="p2-row-5">A precise transition word used to dive straight into concrete examples.</div>
 <div class="draggable" draggable="true" id="p2-ans-B" data-target="p2-row-4">An advanced concessive structure used to highlight a flaw directly after mentioning a benefit.</div>
 <div class="draggable" draggable="true" id="p2-ans-C" data-target="p2-row-1">Used to introduce a precise fact before adding personal nuance.</div>
 <div class="draggable" draggable="true" id="p2-ans-D" data-target="p2-row-2">A great conversational bridge to simplify a complex personal background.</div>
 <div class="draggable" draggable="true" id="p2-ans-E" data-target="p2-row-3">A native-sounding phrase to introduce a future possibility instead of saying &#8220;Maybe I will&#8230;&#8221;</div>
 </div>

 <!-- Right: Phrase Targets -->
 <div class="list-group">
 <div class="dropzone-wrapper">
 <span class="target-label">1. &#8220;Well technically&#8230;&#8221;</span>
 <div class="dropzone" id="p2-row-1" data-accept="p2-ans-C">Drop matching function here</div>
 </div>
 <div class="dropzone-wrapper">
 <span class="target-label">2. &#8220;But usually I tell people&#8230;&#8221;</span>
 <div class="dropzone" id="p2-row-2" data-accept="p2-ans-D">Drop matching function here</div>
 </div>
 <div class="dropzone-wrapper">
 <span class="target-label">3. &#8220;Well, there’s always a chance&#8230;&#8221;</span>
 <div class="dropzone" id="p2-row-3" data-accept="p2-ans-E">Drop matching function here</div>
 </div>
 <div class="dropzone-wrapper">
 <span class="target-label">4. &#8220;As ideal as my [X] is&#8230;&#8221;</span>
 <div class="dropzone" id="p2-row-4" data-accept="p2-ans-B">Drop matching function here</div>
 </div>
 <div class="dropzone-wrapper">
 <span class="target-label">5. &#8220;Specifically&#8230;&#8221;</span>
 <div class="dropzone" id="p2-row-5" data-accept="p2-ans-A">Drop matching function here</div>
 </div>
 </div>
 </div>
 </div>

 <div class="success-banner" id="success-message">
 ð Fantastic work! You have perfectly paired all sentence starters with their completions and correctly identified their conversational functions.
 </div>

 <div class="reset-container">
 <button class="btn" onclick="window.location.reload()">Reset Exercise</button>
 </div>

 <script>
 let draggedItem = null;
 let p1Matches = 0;
 let p2Matches = 0;

 // Shuffle draggable columns on load
 function shuffleChildren(parentElId) {
 const parent = document.getElementById(parentElId);
 const items = Array.from(parent.children);
 items.sort(() => Math.random() - 0.5);
 items.forEach(item => parent.appendChild(item));
 }

 shuffleChildren('part1-draggables');
 shuffleChildren('part2-draggables');

 // Setup Drag Event Listeners
 const draggables = document.querySelectorAll('.draggable');
 draggables.forEach(item => {
 item.addEventListener('dragstart', function() {
 draggedItem = this;
 setTimeout(() => this.style.opacity = '0.4', 0);
 });
 item.addEventListener('dragend', function() {
 this.style.opacity = '1';
 draggedItem = null;
 });
 });

 // Setup Dropzones
 const dropzones = document.querySelectorAll('.dropzone');
 dropzones.forEach(zone => {
 zone.addEventListener('dragover', e => e.preventDefault());
 
 zone.addEventListener('dragenter', function(e) {
 e.preventDefault();
 if(!this.classList.contains('correct')) this.classList.add('hover');
 });

 zone.addEventListener('dragleave', function() {
 this.classList.remove('hover');
 });

 zone.addEventListener('drop', function() {
 this.classList.remove('hover');
 
 if (draggedItem && this.getAttribute('data-accept') === draggedItem.id) {
 // Correct Match
 this.textContent = draggedItem.textContent;
 this.classList.add('correct');
 draggedItem.remove(); // Remove item from original list
 
 // Track Progress
 if (this.id.startsWith('p1')) {
 p1Matches++;
 if (p1Matches === 5) {
 document.getElementById('part2-card').classList.remove('locked');
 }
 } else if (this.id.startsWith('p2')) {
 p2Matches++;
 if (p2Matches === 5) {
 document.getElementById('success-message').style.display = 'block';
 document.getElementById('success-message').scrollIntoView({ behavior: 'smooth' });
 }
 }
 } else {
 alert("Not quite right! Try finding a alternative item that fits better structural context.");
 }
 });
 });
 </script>
</body>
</html>

								</div>
					</div>
				</div>
				</div>
		<span id="wordads-inline-marker" style="display: none;"></span>
Advanced Collocations Review Advanced Collocations & Phrasal Expressions Vocabulary source reference study sheet: image_d32686.png Exercise…
High-Level Topic Vocabulary (Urban & Housing) Exercise 1: Term Definition Matching How to…
IELTS Band 8.0+ Spoken Discourse Markers Review IELTS Band 8.0+ Lexical Review Master Interactive Training…
Khi nói đến việc học tiếng Anh, nhiều người thường tập trung vào việc học…
Trong thời đại toàn cầu hóa, tiếng Anh đã trở thành "cầu nối tri thức"…
Học Tiếng Anh không chỉ là nắm vững ngữ pháp hay từ vựng mà còn…