<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>Advanced Collocations Review</title>
 <style>
 body {
 font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
 background-color: #f8fafc;
 color: #1e293b;
 line-height: 1.6;
 padding: 30px 15px;
 max-width: 950px;
 margin: 0 auto;
 }
 h1 {
 color: #c2410c;
 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);
 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: #fff7ed;
 border-left: 4px solid #f97316;
 padding: 12px;
 border-radius: 0 8px 8px 0;
 font-size: 0.95rem;
 margin-bottom: 25px;
 }
 .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: #f97316;
 background-color: #fff7ed;
 }
 .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: #ffedd5;
 border-color: #f97316;
 }
 .dropzone.correct {
 border-style: solid;
 border-color: #22c55e;
 background-color: #f0fdf4;
 color: #15803d;
 }
 .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>
</head>
<body>

 <h1>Advanced Collocations &#038; Phrasal Expressions</h1>
 <div class="reference-text">Vocabulary source reference study sheet: <strong>image_d32686.png</strong></div>

 <!-- EXERCISE 1: DRAG & DROP MATCHING -->
 <div class="exercise-card">
 <h2>Exercise 1: Meaning &#038; Function Matching</h2>
 <div class="instructions">
 <strong>How to play:</strong> Drag each phrasal expression from the left column and drop it into its matching definition or conceptual usage slot on the right.
 </div>
 
 <div class="grid-container">
 <!-- Left Side: Draggable Words -->
 <div class="list-group" id="drag-source-container">
 <div class="draggable" draggable="true" id="ex1-t1">Born and raised</div>
 <div class="draggable" draggable="true" id="ex1-t2">Raise a family</div>
 <div class="draggable" draggable="true" id="ex1-t3">Incredibly affordable</div>
 <div class="draggable" draggable="true" id="ex1-t4">Settle down</div>
 <div class="draggable" draggable="true" id="ex1-t5">Absolutely love the energy</div>
 <div class="draggable" draggable="true" id="ex1-t6">Coming online</div>
 <div class="draggable" draggable="true" id="ex1-t7">Starting to skyrocket</div>
 <div class="draggable" draggable="true" id="ex1-t8">Lacking in some areas</div>
 </div>

 <!-- Right Side: Meanings -->
 <div class="list-group">
 <div class="dropzone-wrapper">
 <div class="definition-text">Used to specify the exact location where you were both given birth to and brought up through childhood.</div>
 <div class="dropzone" data-accept="ex1-t1">Drop matching term here</div>
 </div>
 <div class="dropzone-wrapper">
 <div class="definition-text">A collocation referring to bringing up children in a secure, supportive environment.</div>
 <div class="dropzone" data-accept="ex1-t2">Drop matching term here</div>
 </div>
 <div class="dropzone-wrapper">
 <div class="definition-text">An advanced description that premium upgrades the basic, low-level descriptor word &#8220;cheap&#8221;.</div>
 <div class="dropzone" data-accept="ex1-t3">Drop matching term here</div>
 </div>
 <div class="dropzone-wrapper">
 <div class="definition-text">Meaning: to adopt a more permanent, stable lifestyle in one place.</div>
 <div class="dropzone" data-accept="ex1-t4">Drop matching term here</div>
 </div>
 <div class="dropzone-wrapper">
 <div class="definition-text">An expressive phrase indicating extreme enjoyment of a massive metropolis&#8217;s dynamic atmosphere.</div>
 <div class="dropzone" data-accept="ex1-t5">Drop matching term here</div>
 </div>
 <div class="dropzone-wrapper">
 <div class="definition-text">An excellent infrastructure idiom meaning to become operational or available for use.</div>
 <div class="dropzone" data-accept="ex1-t6">Drop matching term here</div>
 </div>
 <div class="dropzone-wrapper">
 <div class="definition-text">Meaning: increasing rapidly to a very high level (often used for prices).</div>
 <div class="dropzone" data-accept="ex1-t7">Drop matching term here</div>
 </div>
 <div class="dropzone-wrapper">
 <div class="definition-text">A polite, sophisticated way to say something is missing key features or needs improvement.</div>
 <div class="dropzone" data-accept="ex1-t8">Drop matching term here</div>
 </div>
 </div>
 </div>
 
 <div class="feedback-banner" id="ex1-success">
 ð Wonderful! You&#8217;ve accurately mapped every phrasal partnership according to image_d32686.png!
 </div>

 <div class="center-btn">
 <button class="btn" style="background-color: #ea580c;">Reset &#038; 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 through the conversations and pick the most appropriate phrase from the dropdown menus to complete the sentences.
 </div>

 <div class="list-group">
 <div class="sentence-item">
 <span class="sentence-text">
 1. &#8220;I was 
 <select class="vocab-select" data-answer="Born and raised">
 <option value="">&#8212; select term &#8212;</option>
 <option value="Born and raised">born and raised</option>
 <option value="Settle down">settle down</option>
 <option value="Coming online">coming online</option>
 </select>
 in Hanoi, so I&#8217;ve witnessed the city transform dramatically over the past two decades.&#8221;
 </span>
 </div>

 <div class="sentence-item">
 <span class="sentence-text">
 2. &#8220;With its safe streets and top-tier local schools, it really is a wonderful place to 
 <select class="vocab-select" data-answer="Raise a family">
 <option value="">&#8212; select term &#8212;</option>
 <option value="Lacking in some areas">lacking in some areas</option>
 <option value="Raise a family">raise a family</option>
 <option value="Starting to skyrocket">starting to skyrocket</option>
 </select>
 if you want a wholesome environment for kids.&#8221;
 </span>
 </div>

 <div class="sentence-item">
 <span class="sentence-text">
 3. &#8220;The cost of living here isn&#8217;t just reasonable; it&#8217;s actually 
 <select class="vocab-select" data-answer="Incredibly affordable">
 <option value="">&#8212; select term &#8212;</option>
 <option value="Incredibly affordable">incredibly affordable</option>
 <option value="Coming online">coming online</option>
 <option value="Born and raised">born and raised</option>
 </select>
 compared to other highly developed financial hubs.&#8221;
 </span>
 </div>

 <div class="sentence-item">
 <span class="sentence-text">
 4. &#8220;After years of backpacking around the globe, I feel like it&#8217;s finally time to buy an apartment and 
 <select class="vocab-select" data-answer="Settle down">
 <option value="">&#8212; select term &#8212;</option>
 <option value="Raise a family">raise a family</option>
 <option value="Settle down">settle down</option>
 <option value="Absolutely love the energy">absolutely love the energy</option>
 </select>
 into a stable lifestyle.&#8221;
 </span>
 </div>

 <div class="sentence-item">
 <span class="sentence-text">
 5. &#8220;I just 
 <select class="vocab-select" data-answer="Absolutely love the energy">
 <option value="">&#8212; select term &#8212;</option>
 <option value="Absolutely love the energy">absolutely love the energy</option>
 <option value="Lacking in some areas">lacking in some areas</option>
 <option value="Incredibly affordable">incredibly affordable</option>
 </select>
 of big metropolises—the bright neon billboards, 24-hour diners, and constant activity.&#8221;
 </span>
 </div>

 <div class="sentence-item">
 <span class="sentence-text">
 6. &#8220;Public transit commuters are highly anticipating the new sky train system 
 <select class="vocab-select" data-answer="Coming online">
 <option value="">&#8212; select term &#8212;</option>
 <option value="Starting to skyrocket">starting to skyrocket</option>
 <option value="Born and raised">born and raised</option>
 <option value="Coming online">coming online</option>
 </select>
 next month, as it will vastly cut travel times.&#8221;
 </span>
 </div>

 <div class="sentence-item">
 <span class="sentence-text">
 7. &#8220;Ever since the tech companies set up their headquarters downtown, local property prices are 
 <select class="vocab-select" data-answer="Starting to skyrocket">
 <option value="">&#8212; select term &#8212;</option>
 <option value="Starting to skyrocket">starting to skyrocket</option>
 <option value="Settle down">settle down</option>
 <option value="Incredibly affordable">incredibly affordable</option>
 </select>
 at an unprecedented rate.&#8221;
 </span>
 </div>

 <div class="sentence-item">
 <span class="sentence-text">
 8. &#8220;The neighborhood has gorgeous architecture, but it&#8217;s definitely 
 <select class="vocab-select" data-answer="Lacking in some areas">
 <option value="">&#8212; select term &#8212;</option>
 <option value="Raise a family">raise a family</option>
 <option value="Coming online">coming online</option>
 <option value="Lacking in some areas">lacking in some areas</option>
 </select>
 when it comes to grocery stores and recreational parks.&#8221;
 </span>
 </div>
 </div>

 <div class="center-btn">
 <button class="btn">Check Answers</button>
 </div>
 <div class="feedback-banner" id="ex2-success">
 ð Outstanding! All 8 sentences are perfectly structured. Your grasp on natural native collocations is excellent!
 </div>
 </div>

 <div class="center-btn">
 <button class="btn" style="background-color: #0f172a;">Reset All Exercises</button>
 </div>

 <script>
 let draggedItem = null;
 let ex1Score = 0;

 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 = ''; 

 const elementsToShuffle = originalDraggables.map(el => el.cloneNode(true));
 elementsToShuffle.sort(() => Math.random() - 0.5);
 elementsToShuffle.forEach(item => dragContainer.appendChild(item));

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

 setupDragAndDrop();
 }

 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 === 8) {
 document.getElementById('ex1-success').style.display = 'block';
 }
 } else {
 alert("Incorrect match. Think about the standard collocations in image_d32686.png and try again!");
 }
 });
 });

 // Initial launch shuffle
 shuffleExercise1();

 // Validate Exercise 2 dropdown selections
 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 === 8) {
 document.getElementById('ex2-success').style.display = 'block';
 document.getElementById('ex2-success').scrollIntoView({ behavior: 'smooth' });
 } else {
 alert(`Score: ${ex2Score}/8. Review highlighted errors in red and update your selections!`);
 }
 }
 </script>
</body>
</html>
<span id="wordads-inline-marker" style="display: none;"></span>
High-Level Topic Vocabulary (Urban & Housing) Exercise 1: Term Definition Matching How to…
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…