<div data-elementor-type="wp-post" data-elementor-id="19067" class="elementor elementor-19067" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-dbe7259 e-flex e-con-boxed e-con e-parent" data-id="dbe7259" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-2cbfbf69 elementor-widget elementor-widget-text-editor" data-id="2cbfbf69" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
									
<p> </p>
<p> </p>
<p></p>
<p><style>
 body {
 font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
 background-color: #f1f5f9;
 color: #1e293b;
 line-height: 1.6;
 padding: 30px 15px;
 max-width: 950px;
 margin: 0 auto;
 }
 h1 {
 color: #b91c1c;
 text-align: center;
 margin-bottom: 5px;
 }
 .reference-text {
 text-align: center;
 font-size: 0.95rem;
 color: #64748b;
 margin-bottom: 35px;
 }
 .exercise-card {
 background: #ffffff;
 border-radius: 12px;
 padding: 25px;
 box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
 margin-bottom: 40px;
 }
 h2 {
 font-size: 1.3rem;
 color: #0f172a;
 border-bottom: 2px solid #e2e8f0;
 padding-bottom: 8px;
 margin-top: 0;
 margin-bottom: 15px;
 }
 .instructions {
 background-color: #fef2f2;
 border-left: 4px solid #ef4444;
 padding: 12px;
 border-radius: 0 8px 8px 0;
 font-size: 0.95rem;
 margin-bottom: 25px;
 }
 /* Grid Layout for Drag & Drop */
 .grid-container {
 display: grid;
 grid-template-columns: 1fr 1.3fr;
 gap: 25px;
 }
 @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: 12px 15px;
 border-radius: 8px;
 cursor: grab;
 font-weight: 600;
 color: #334155;
 text-align: center;
 transition: all 0.2s ease;
 user-select: none;
 box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 .draggable:hover {
 border-color: #ef4444;
 background-color: #fff5f5;
 }
 .draggable:active {
 cursor: grabbing;
 }
 .dropzone-wrapper {
 background: #f8fafc;
 border: 1px solid #e2e8f0;
 border-radius: 8px;
 padding: 12px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 }
 .definition-text {
 font-size: 0.95rem;
 color: #475569;
 font-style: italic;
 }
 .dropzone {
 border: 2px dashed #cbd5e1;
 background: #fff;
 min-height: 44px;
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 5px;
 box-sizing: border-box;
 font-weight: 600;
 transition: all 0.2s;
 color: #94a3b8;
 font-size: 0.95rem;
 }
 .dropzone.hover {
 background: #fee2e2;
 border-color: #ef4444;
 }
 .dropzone.correct {
 border-style: solid;
 border-color: #22c55e;
 background-color: #f0fdf4;
 color: #15803d;
 }
 /* Sentence Completion Styles */
 .sentence-item {
 margin-bottom: 20px;
 padding-bottom: 15px;
 border-bottom: 1px dashed #e2e8f0;
 }
 .sentence-item:last-child {
 border-bottom: none;
 }
 .sentence-text {
 font-size: 1.05rem;
 color: #334155;
 }
 .vocab-select {
 padding: 6px 10px;
 font-size: 0.95rem;
 font-weight: 600;
 border: 2px solid #cbd5e1;
 border-radius: 6px;
 color: #334155;
 background-color: #fff;
 margin: 0 5px;
 cursor: pointer;
 outline: none;
 }
 .vocab-select.correct-select {
 border-color: #22c55e;
 background-color: #f0fdf4;
 color: #15803d;
 }
 .vocab-select.wrong-select {
 border-color: #ef4444;
 background-color: #fef2f2;
 color: #b91c1c;
 }
 .feedback-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: 15px;
 }
 .center-btn {
 text-align: center;
 margin-top: 20px;
 }
 .btn {
 background-color: #475569;
 color: white;
 border: none;
 padding: 10px 24px;
 border-radius: 6px;
 font-size: 0.95rem;
 cursor: pointer;
 transition: background 0.2s;
 font-weight: 500;
 margin: 5px;
 }
 .btn:hover {
 background-color: #334155;
 }
 </style></p>
<h1>High-Level Topic Vocabulary (Urban &; Housing)</h1>
<!-- EXERCISE 1: DRAG & DROP MATCHING -->
<div class="exercise-card">
<h2>Exercise 1: Term Definition Matching</h2>
<div class="instructions"><strong>How to play:</strong> Drag each vocabulary phrase from the left column and drop it into its matching definition box on the right.</div>
<div class="grid-container"><!-- Left Side: Draggable Words -->
<div id="drag-source-container" class="list-group">
<div id="ex1-t1" class="draggable" draggable="true">Vibrant city</div>
<div id="ex1-t2" class="draggable" draggable="true">Big metropolises</div>
<div id="ex1-t3" class="draggable" draggable="true">Central neighborhood</div>
<div id="ex1-t4" class="draggable" draggable="true">Strategic location / for commuting</div>
<div id="ex1-t5" class="draggable" draggable="true">Transport links</div>
<div id="ex1-t6" class="draggable" draggable="true">Ongoing construction</div>
<div id="ex1-t7" class="draggable" draggable="true">New developments</div>
</div>
<!-- Right Side: Meanings -->
<div class="list-group">
<div class="dropzone-wrapper">
<div class="definition-text">&#8220;A city full of life, energy, and activity.&#8221;</div>
<div class="dropzone" data-accept="ex1-t1">Drop matching term here</div>
</div>
<div class="dropzone-wrapper">
<div class="definition-text">&#8220;Very large, busy, and important cities (great synonym to avoid repeating &#8216;big cities&#8217;).&#8221;</div>
<div class="dropzone" data-accept="ex1-t2">Drop matching term here</div>
</div>
<div class="dropzone-wrapper">
<div class="definition-text">&#8220;A residential area located close to the heart or core of a city.&#8221;</div>
<div class="dropzone" data-accept="ex1-t3">Drop matching term here</div>
</div>
<div class="dropzone-wrapper">
<div class="definition-text">&#8220;Carefully chosen or located to give a specific advantage (e.g., saving time).&#8221;</div>
<div class="dropzone" data-accept="ex1-t4">Drop matching term here</div>
</div>
<div class="dropzone-wrapper">
<div class="definition-text">&#8220;The network of buses, trains, and roads connecting places.&#8221;</div>
<div class="dropzone" data-accept="ex1-t5">Drop matching term here</div>
</div>
<div class="dropzone-wrapper">
<div class="definition-text">&#8220;Building work that is currently in progress and not yet finished.&#8221;</div>
<div class="dropzone" data-accept="ex1-t6">Drop matching term here</div>
</div>
<div class="dropzone-wrapper">
<div class="definition-text">&#8220;Newly built areas, buildings, or infrastructure.&#8221;</div>
<div class="dropzone" data-accept="ex1-t7">Drop matching term here</div>
</div>
</div>
</div>
<div id="ex1-success" class="feedback-banner">ð Brilliant! You&#8217;ve perfectly matched every vocabulary phrase to its textbook meaning from image_c93867.png!</div>
<div class="center-btn"><button class="btn" style="background-color: #dc2626;">Reset &; Reshuffle Exercise 1</button></div>
</div>
<!-- EXERCISE 2: FILL IN THE BLANK CONTEXT CONTEXT -->
<div class="exercise-card">
<h2>Exercise 2: Contextual Application</h2>
<div class="instructions"><strong>How to play:</strong> Read the descriptions below and select the correct urban housing term from each drop-down selection menu to complete the sentence.</div>
<div class="list-group">
<div class="sentence-item"><span class="sentence-text"> 1. Tokyo and New York are massive<select class="vocab-select" data-answer="Big metropolises">
<option value="">&#8212; select term &#8212;</option>
<option value="Vibrant city">Vibrant city</option>
<option value="Big metropolises">Big metropolises</option>
<option value="Transport links">Transport links</option>
</select>that draw millions of professionals and tourists looking for global career growth. </span></div>
<div class="sentence-item"><span class="sentence-text"> 2. Living right next to the central underground interchange station gives our apartment a highly<select class="vocab-select" data-answer="Strategic location / for commuting">
<option value="">&#8212; select term &#8212;</option>
<option value="Central neighborhood">Central neighborhood</option>
<option value="Strategic location / for commuting">Strategic location / for commuting</option>
<option value="Ongoing construction">Ongoing construction</option>
</select>because I can make it to office headquarters in under ten minutes. </span></div>
<div class="sentence-item"><span class="sentence-text"> 3. London boasts an extensive web of<select class="vocab-select" data-answer="Transport links">
<option value="">&#8212; select term &#8212;</option>
<option value="Transport links">Transport links</option>
<option value="New developments">New developments</option>
<option value="Vibrant city">Vibrant city</option>
</select>consisting of overground trains, public cycling loops, and municipal buses. </span></div>
<div class="sentence-item"><span class="sentence-text"> 4. Property value tends to skew much higher when you purchase property situated in a<select class="vocab-select" data-answer="Central neighborhood">
<option value="">&#8212; select term &#8212;</option>
<option value="Big metropolises">Big metropolises</option>
<option value="Ongoing construction">Ongoing construction</option>
<option value="Central neighborhood">Central neighborhood</option>
</select>as opposed to rural outskirts or suburban countryside. </span></div>
<div class="sentence-item"><span class="sentence-text"> 5. The local harbor district is buzzing with<select class="vocab-select" data-answer="Ongoing construction">
<option value="">&#8212; select term &#8212;</option>
<option value="Ongoing construction">Ongoing construction</option>
<option value="Transport links">Transport links</option>
<option value="Strategic location / for commuting">Strategic location / for commuting</option>
</select>with cranes lifting steel support pillars everywhere to finish building the museum by next spring. </span></div>
<div class="sentence-item"><span class="sentence-text"> 6. Barcelona is a famously<select class="vocab-select" data-answer="Vibrant city">
<option value="">&#8212; select term &#8212;</option>
<option value="New developments">New developments</option>
<option value="Central neighborhood">Central neighborhood</option>
<option value="Vibrant city">Vibrant city</option>
</select>bursting with dynamic musical buskers, street art, crowded food markets, and endless nocturnal social activities. </span></div>
<div class="sentence-item"><span class="sentence-text"> 7. If you look at the edge of town, these brand<select class="vocab-select" data-answer="New developments">
<option value="">&#8212; select term &#8212;</option>
<option value="New developments">New developments</option>
<option value="Big metropolises">Big metropolises</option>
<option value="Strategic location / for commuting">Strategic location / for commuting</option>
</select>feature eco-friendly solar high-rises and state-of-the-art public parks. </span></div>
</div>
<div class="center-btn"><button class="btn">Check Answers</button></div>
<div id="ex2-success" class="feedback-banner">ð Outstanding! You got 7/7 correct answers. Your conceptual understanding of urban context sentences is flawless!</div>
</div>
<div class="center-btn"><button class="btn" style="background-color: #0f172a;">Reset All Exercises</button></div>
<p><script>
 let draggedItem = null;
 let ex1Score = 0;

 // Dynamic array to store raw element templates for full clean reshuffling
 const originalDraggables = Array.from(document.querySelectorAll('.draggable')).map(el => el.cloneNode(true));

 function setupDragAndDrop() {
 const draggables = document.querySelectorAll('.draggable');
 draggables.forEach(item => {
 item.addEventListener('dragstart', function() {
 draggedItem = this;
 setTimeout(() => this.style.opacity = '0.3', 0);
 });
 item.addEventListener('dragend', function() {
 this.style.opacity = '1';
 draggedItem = null;
 });
 });
 }

 function shuffleExercise1() {
 ex1Score = 0;
 document.getElementById('ex1-success').style.display = 'none';
 
 const dragContainer = document.getElementById('drag-source-container');
 dragContainer.innerHTML = ''; // Clear container

 // Re-clone items from master checklist template
 const elementsToShuffle = originalDraggables.map(el => el.cloneNode(true));
 
 // Perform random sort loop
 elementsToShuffle.sort(() => Math.random() - 0.5);
 elementsToShuffle.forEach(item => dragContainer.appendChild(item));

 // Clear and restore dropzone states
 const dropzones = document.querySelectorAll('.dropzone');
 dropzones.forEach(zone => {
 zone.textContent = "Drop matching term here";
 zone.className = "dropzone";
 });

 setupDragAndDrop();
 }

 // Initialize dropzone targets
 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) {
 this.textContent = draggedItem.textContent;
 this.classList.add('correct');
 draggedItem.remove();
 ex1Score++;
 if(ex1Score === 7) {
 document.getElementById('ex1-success').style.display = 'block';
 }
 } else {
 alert("Incorrect match. Review the term definitions from image_c93867.png and try again!");
 }
 });
 });

 // Run primary shuffle configuration immediately on system load
 shuffleExercise1();

 // Check dropdown selections for Exercise 2
 function checkExercise2() {
 const selects = document.querySelectorAll('.vocab-select');
 let ex2Score = 0;

 selects.forEach(sel => {
 const selectedValue = sel.value;
 const correctAnswer = sel.getAttribute('data-answer');

 if (selectedValue === correctAnswer) {
 sel.className = "vocab-select correct-select";
 ex2Score++;
 } else {
 sel.className = "vocab-select wrong-select";
 }
 });

 if (ex2Score === 7) {
 document.getElementById('ex2-success').style.display = 'block';
 document.getElementById('ex2-success').scrollIntoView({ behavior: 'smooth' });
 } else {
 alert(`You got ${ex2Score} out of 7 correct. Incorrect choices are highlighted in red. Re-evaluate and try again!`);
 }
 }
 </script></p>
								</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…
Interactive Matching Exercise: Spoken Discourse Markers Matching Exercise Idiomatic Fillers & Spoken Discourse Markers Part…
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…