Phrasal Verbs Matching Exercise<\/title><\/p>\n<style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }<\/p>\n<p> body {\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }<\/p>\n<p> .container {\n background-color: white;\n border-radius: 20px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n width: 100%;\n max-width: 900px;\n padding: 30px;\n text-align: center;\n }<\/p>\n<p> h1 {\n color: #2c3e50;\n margin-bottom: 10px;\n font-size: 2.2rem;\n }<\/p>\n<p> .subtitle {\n color: #7f8c8d;\n margin-bottom: 30px;\n font-size: 1.1rem;\n }<\/p>\n<p> .instructions {\n background-color: #f8f9fa;\n border-left: 4px solid #3498db;\n padding: 15px;\n margin-bottom: 25px;\n text-align: left;\n border-radius: 0 8px 8px 0;\n }<\/p>\n<p> .instructions p {\n margin-bottom: 8px;\n color: #2c3e50;\n }<\/p>\n<p> .game-area {\n display: flex;\n justify-content: space-between;\n gap: 30px;\n margin-bottom: 30px;\n }<\/p>\n<p> .column {\n flex: 1;\n padding: 20px;\n border-radius: 12px;\n min-height: 400px;\n }<\/p>\n<p> .verbs-column {\n background-color: #e8f4fc;\n border: 2px dashed #3498db;\n }<\/p>\n<p> .definitions-column {\n background-color: #f0f7f0;\n border: 2px dashed #27ae60;\n }<\/p>\n<p> .column-title {\n font-size: 1.4rem;\n margin-bottom: 25px;\n color: #2c3e50;\n padding-bottom: 10px;\n border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n }<\/p>\n<p> .verbs-column .column-title {\n color: #2980b9;\n }<\/p>\n<p> .definitions-column .column-title {\n color: #27ae60;\n }<\/p>\n<p> .item {\n background-color: white;\n padding: 15px;\n margin-bottom: 15px;\n border-radius: 10px;\n cursor: move;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);\n transition: all 0.3s ease;\n font-size: 1.1rem;\n border: 2px solid transparent;\n user-select: none;\n }<\/p>\n<p> .verb-item {\n color: #2980b9;\n border-left: 5px solid #2980b9;\n }<\/p>\n<p> .definition-item {\n color: #27ae60;\n border-left: 5px solid #27ae60;\n }<\/p>\n<p> .item.dragging {\n opacity: 0.7;\n transform: scale(1.02);\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n }<\/p>\n<p> .drop-zone {\n min-height: 70px;\n border-radius: 10px;\n margin-bottom: 15px;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px dashed #bdc3c7;\n }<\/p>\n<p> .drop-zone.highlight {\n background-color: rgba(52, 152, 219, 0.1);\n border-color: #3498db;\n border-style: solid;\n }<\/p>\n<p> .drop-zone.matched {\n border: 2px solid #27ae60;\n background-color: rgba(39, 174, 96, 0.05);\n }<\/p>\n<p> .matched-pair {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 15px;\n margin-bottom: 15px;\n border-radius: 10px;\n background-color: white;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);\n border: 2px solid #27ae60;\n animation: fadeIn 0.5s ease;\n }<\/p>\n<p> @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }<\/p>\n<p> .verb-in-pair {\n color: #2980b9;\n font-weight: 600;\n }<\/p>\n<p> .definition-in-pair {\n color: #27ae60;\n font-weight: 600;\n }<\/p>\n<p> .connector {\n color: #7f8c8d;\n margin: 0 10px;\n }<\/p>\n<p> .message {\n margin-top: 25px;\n padding: 20px;\n border-radius: 12px;\n font-size: 1.3rem;\n font-weight: 600;\n opacity: 0;\n transition: opacity 0.5s ease;\n }<\/p>\n<p> .message.success {\n background-color: rgba(39, 174, 96, 0.1);\n color: #27ae60;\n opacity: 1;\n }<\/p>\n<p> .reset-btn {\n background-color: #3498db;\n color: white;\n border: none;\n padding: 14px 28px;\n font-size: 1.1rem;\n border-radius: 50px;\n cursor: pointer;\n transition: all 0.3s ease;\n margin-top: 20px;\n font-weight: 600;\n box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);\n }<\/p>\n<p> .reset-btn:hover {\n background-color: #2980b9;\n transform: translateY(-3px);\n box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);\n }<\/p>\n<p> .reset-btn:active {\n transform: translateY(0);\n }<\/p>\n<p> @media (max-width: 768px) {\n .game-area {\n flex-direction: column;\n }<\/p>\n<p> .container {\n padding: 20px;\n }<\/p>\n<p> h1 {\n font-size: 1.8rem;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"container\">\n<h1>Phrasal Verbs Matching<\/h1>\n<p class=\"subtitle\">Drag the phrasal verbs to match them with their definitions<\/p>\n<div class=\"instructions\">\n<p>\ud83d\udccc <strong>How to play:<\/strong> Drag a phrasal verb from the left column and drop it on the correct definition in the right column.<\/p>\n<p>\u2705 Only correct matches will connect. Complete all 5 pairs to finish the exercise.<\/p>\n<\/p><\/div>\n<div class=\"game-area\">\n<div class=\"column verbs-column\">\n<h2 class=\"column-title\">Phrasal Verbs<\/h2>\n<div id=\"verbs-container\">\n<div class=\"item verb-item\" id=\"verb1\" draggable=\"true\">get up<\/div>\n<div class=\"item verb-item\" id=\"verb2\" draggable=\"true\">look for<\/div>\n<div class=\"item verb-item\" id=\"verb3\" draggable=\"true\">turn off<\/div>\n<div class=\"item verb-item\" id=\"verb4\" draggable=\"true\">give up<\/div>\n<div class=\"item verb-item\" id=\"verb5\" draggable=\"true\">put on<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"column definitions-column\">\n<h2 class=\"column-title\">Definitions<\/h2>\n<div id=\"definitions-container\">\n<div class=\"drop-zone\" data-match=\"verb1\">\n<div class=\"definition-item\">To stop trying to do something<\/div>\n<\/p><\/div>\n<div class=\"drop-zone\" data-match=\"verb2\">\n<div class=\"definition-item\">To rise from bed after sleeping<\/div>\n<\/p><\/div>\n<div class=\"drop-zone\" data-match=\"verb3\">\n<div class=\"definition-item\">To stop a device from working<\/div>\n<\/p><\/div>\n<div class=\"drop-zone\" data-match=\"verb4\">\n<div class=\"definition-item\">To try to find something<\/div>\n<\/p><\/div>\n<div class=\"drop-zone\" data-match=\"verb5\">\n<div class=\"definition-item\">To place clothing on your body<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div id=\"message\" class=\"message\"><\/div>\n<p> <button id=\"resetBtn\" class=\"reset-btn\">Reset Exercise<\/button>\n <\/div>\n<p> <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Correct matches mapping\n const correctMatches = {\n 'verb1': 'To rise from bed after sleeping',\n 'verb2': 'To try to find something',\n 'verb3': 'To stop a device from working',\n 'verb4': 'To stop trying to do something',\n 'verb5': 'To place clothing on your body'\n };<\/p>\n<p> \/\/ State tracking\n let matchedPairs = {};\n let draggedElement = null;<\/p>\n<p> \/\/ Get DOM elements\n const verbsContainer = document.getElementById('verbs-container');\n const definitionsContainer = document.getElementById('definitions-container');\n const messageDiv = document.getElementById('message');\n const resetBtn = document.getElementById('resetBtn');<\/p>\n<p> \/\/ Add event listeners to draggable verbs\n document.querySelectorAll('.verb-item').forEach(verb => {\n verb.addEventListener('dragstart', handleDragStart);\n verb.addEventListener('dragend', handleDragEnd);\n });<\/p>\n<p> \/\/ Add event listeners to drop zones\n document.querySelectorAll('.drop-zone').forEach(zone => {\n zone.addEventListener('dragover', handleDragOver);\n zone.addEventListener('dragenter', handleDragEnter);\n zone.addEventListener('dragleave', handleDragLeave);\n zone.addEventListener('drop', handleDrop);\n });<\/p>\n<p> \/\/ Reset button event listener\n resetBtn.addEventListener('click', resetExercise);<\/p>\n<p> \/\/ Drag and Drop Functions\n function handleDragStart(e) {\n draggedElement = this;\n this.classList.add('dragging');\n e.dataTransfer.setData('text\/plain', this.id);\n e.dataTransfer.effectAllowed = 'move';\n }<\/p>\n<p> function handleDragEnd() {\n this.classList.remove('dragging');\n document.querySelectorAll('.drop-zone').forEach(zone => {\n zone.classList.remove('highlight');\n });\n }<\/p>\n<p> function handleDragOver(e) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n }<\/p>\n<p> function handleDragEnter(e) {\n e.preventDefault();\n this.classList.add('highlight');\n }<\/p>\n<p> function handleDragLeave() {\n this.classList.remove('highlight');\n }<\/p>\n<p> function handleDrop(e) {\n e.preventDefault();\n this.classList.remove('highlight');<\/p>\n<p> const verbId = e.dataTransfer.getData('text\/plain');\n const verbElement = document.getElementById(verbId);\n const dropZone = this;\n const definitionText = dropZone.querySelector('.definition-item').textContent;<\/p>\n<p> \/\/ Check if this is a correct match\n if (correctMatches[verbId] === definitionText) {\n \/\/ Create matched pair\n createMatchedPair(verbElement, dropZone, verbId);<\/p>\n<p> \/\/ Remove the verb from the left column\n verbElement.style.display = 'none';<\/p>\n<p> \/\/ Mark drop zone as matched\n dropZone.classList.add('matched');\n dropZone.innerHTML = '';<\/p>\n<p> \/\/ Store the match\n matchedPairs[verbId] = dropZone.dataset.match;<\/p>\n<p> \/\/ Check if all pairs are matched\n checkCompletion();\n } else {\n \/\/ Visual feedback for incorrect match\n dropZone.style.borderColor = '#e74c3c';\n dropZone.style.backgroundColor = 'rgba(231, 76, 60, 0.1)';<\/p>\n<p> setTimeout(() => {\n dropZone.style.borderColor = '';\n dropZone.style.backgroundColor = '';\n }, 500);\n }\n }<\/p>\n<p> function createMatchedPair(verbElement, dropZone, verbId) {\n \/\/ Create a new element to show the matched pair\n const pairElement = document.createElement('div');\n pairElement.className = 'matched-pair';\n pairElement.id = `pair-${verbId}`;<\/p>\n<p> pairElement.innerHTML = `\n <span class=\"verb-in-pair\">${verbElement.textContent}<\/span>\n <span class=\"connector\">\u2192<\/span>\n <span class=\"definition-in-pair\">${correctMatches[verbId]}<\/span>\n `;<\/p>\n<p> \/\/ Insert the matched pair at the beginning of definitions container\n definitionsContainer.insertBefore(pairElement, definitionsContainer.firstChild);\n }<\/p>\n<p> function checkCompletion() {\n if (Object.keys(matchedPairs).length === Object.keys(correctMatches).length) {\n messageDiv.textContent = 'Bravo! Sve ta\u010dno!';\n messageDiv.classList.add('success');\n }\n }<\/p>\n<p> function resetExercise() {\n \/\/ Reset state\n matchedPairs = {};\n draggedElement = null;<\/p>\n<p> \/\/ Show all verbs again\n document.querySelectorAll('.verb-item').forEach(verb => {\n verb.style.display = 'block';\n });<\/p>\n<p> \/\/ Reset drop zones\n document.querySelectorAll('.drop-zone').forEach((zone, index) => {\n zone.classList.remove('matched');\n zone.classList.remove('highlight');<\/p>\n<p> \/\/ Reset zone content\n const definitions = [\n 'To stop trying to do something',\n 'To rise from bed after sleeping',\n 'To stop a device from working',\n 'To try to find something',\n 'To place clothing on your body'\n ];<\/p>\n<p> zone.innerHTML = `<\/p>\n<div class=\"definition-item\">${definitions[index]}<\/div>\n<p>`;\n });<\/p>\n<p> \/\/ Remove all matched pairs\n document.querySelectorAll('.matched-pair').forEach(pair => {\n pair.remove();\n });<\/p>\n<p> \/\/ Hide message\n messageDiv.textContent = '';\n messageDiv.classList.remove('success');\n }\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><br \/>\n“`<\/p>\n","protected":false},"excerpt":{"rendered":"<p>“`html Phrasal Verbs Matching Exercise Phrasal Verbs Matching Drag the phrasal verbs to match them with their definitions \ud83d\udccc How to play: Drag a phrasal verb from the left column and drop it on the correct definition in the right column. \u2705 Only correct matches will connect. Complete all 5 pairs to finish the exercise. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-475","post","type-post","status-publish","format-standard","hentry","category-frazalni-glagoli"],"_links":{"self":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":2,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":1094,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/475\/revisions\/1094"}],"wp:attachment":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/media?parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/categories?post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/tags?post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":475,"date":"2026-03-09T22:33:30","date_gmt":"2026-03-09T22:33:30","guid":{"rendered":"https:\/\/kursevikonverzacije.com\/blog\/?p=475"},"modified":"2026-03-26T21:39:34","modified_gmt":"2026-03-26T21:39:34","slug":"matching-phrasal-verbs-pocetni-nivo","status":"publish","type":"post","link":"https:\/\/kursevikonverzacije.com\/blog\/matching-phrasal-verbs-pocetni-nivo\/","title":{"rendered":"Matching: Phrasal Verbs (po\u010detni nivo)"},"content":{"rendered":"

“`html
\n
\n
\n
\n
\n
\n Phrasal Verbs Matching Exercise<\/title><\/p>\n<style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }<\/p>\n<p> body {\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }<\/p>\n<p> .container {\n background-color: white;\n border-radius: 20px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n width: 100%;\n max-width: 900px;\n padding: 30px;\n text-align: center;\n }<\/p>\n<p> h1 {\n color: #2c3e50;\n margin-bottom: 10px;\n font-size: 2.2rem;\n }<\/p>\n<p> .subtitle {\n color: #7f8c8d;\n margin-bottom: 30px;\n font-size: 1.1rem;\n }<\/p>\n<p> .instructions {\n background-color: #f8f9fa;\n border-left: 4px solid #3498db;\n padding: 15px;\n margin-bottom: 25px;\n text-align: left;\n border-radius: 0 8px 8px 0;\n }<\/p>\n<p> .instructions p {\n margin-bottom: 8px;\n color: #2c3e50;\n }<\/p>\n<p> .game-area {\n display: flex;\n justify-content: space-between;\n gap: 30px;\n margin-bottom: 30px;\n }<\/p>\n<p> .column {\n flex: 1;\n padding: 20px;\n border-radius: 12px;\n min-height: 400px;\n }<\/p>\n<p> .verbs-column {\n background-color: #e8f4fc;\n border: 2px dashed #3498db;\n }<\/p>\n<p> .definitions-column {\n background-color: #f0f7f0;\n border: 2px dashed #27ae60;\n }<\/p>\n<p> .column-title {\n font-size: 1.4rem;\n margin-bottom: 25px;\n color: #2c3e50;\n padding-bottom: 10px;\n border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n }<\/p>\n<p> .verbs-column .column-title {\n color: #2980b9;\n }<\/p>\n<p> .definitions-column .column-title {\n color: #27ae60;\n }<\/p>\n<p> .item {\n background-color: white;\n padding: 15px;\n margin-bottom: 15px;\n border-radius: 10px;\n cursor: move;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);\n transition: all 0.3s ease;\n font-size: 1.1rem;\n border: 2px solid transparent;\n user-select: none;\n }<\/p>\n<p> .verb-item {\n color: #2980b9;\n border-left: 5px solid #2980b9;\n }<\/p>\n<p> .definition-item {\n color: #27ae60;\n border-left: 5px solid #27ae60;\n }<\/p>\n<p> .item.dragging {\n opacity: 0.7;\n transform: scale(1.02);\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n }<\/p>\n<p> .drop-zone {\n min-height: 70px;\n border-radius: 10px;\n margin-bottom: 15px;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px dashed #bdc3c7;\n }<\/p>\n<p> .drop-zone.highlight {\n background-color: rgba(52, 152, 219, 0.1);\n border-color: #3498db;\n border-style: solid;\n }<\/p>\n<p> .drop-zone.matched {\n border: 2px solid #27ae60;\n background-color: rgba(39, 174, 96, 0.05);\n }<\/p>\n<p> .matched-pair {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 15px;\n margin-bottom: 15px;\n border-radius: 10px;\n background-color: white;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);\n border: 2px solid #27ae60;\n animation: fadeIn 0.5s ease;\n }<\/p>\n<p> @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }<\/p>\n<p> .verb-in-pair {\n color: #2980b9;\n font-weight: 600;\n }<\/p>\n<p> .definition-in-pair {\n color: #27ae60;\n font-weight: 600;\n }<\/p>\n<p> .connector {\n color: #7f8c8d;\n margin: 0 10px;\n }<\/p>\n<p> .message {\n margin-top: 25px;\n padding: 20px;\n border-radius: 12px;\n font-size: 1.3rem;\n font-weight: 600;\n opacity: 0;\n transition: opacity 0.5s ease;\n }<\/p>\n<p> .message.success {\n background-color: rgba(39, 174, 96, 0.1);\n color: #27ae60;\n opacity: 1;\n }<\/p>\n<p> .reset-btn {\n background-color: #3498db;\n color: white;\n border: none;\n padding: 14px 28px;\n font-size: 1.1rem;\n border-radius: 50px;\n cursor: pointer;\n transition: all 0.3s ease;\n margin-top: 20px;\n font-weight: 600;\n box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);\n }<\/p>\n<p> .reset-btn:hover {\n background-color: #2980b9;\n transform: translateY(-3px);\n box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);\n }<\/p>\n<p> .reset-btn:active {\n transform: translateY(0);\n }<\/p>\n<p> @media (max-width: 768px) {\n .game-area {\n flex-direction: column;\n }<\/p>\n<p> .container {\n padding: 20px;\n }<\/p>\n<p> h1 {\n font-size: 1.8rem;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"container\">\n<h1>Phrasal Verbs Matching<\/h1>\n<p class=\"subtitle\">Drag the phrasal verbs to match them with their definitions<\/p>\n<div class=\"instructions\">\n<p>\ud83d\udccc <strong>How to play:<\/strong> Drag a phrasal verb from the left column and drop it on the correct definition in the right column.<\/p>\n<p>\u2705 Only correct matches will connect. Complete all 5 pairs to finish the exercise.<\/p>\n<\/p><\/div>\n<div class=\"game-area\">\n<div class=\"column verbs-column\">\n<h2 class=\"column-title\">Phrasal Verbs<\/h2>\n<div id=\"verbs-container\">\n<div class=\"item verb-item\" id=\"verb1\" draggable=\"true\">get up<\/div>\n<div class=\"item verb-item\" id=\"verb2\" draggable=\"true\">look for<\/div>\n<div class=\"item verb-item\" id=\"verb3\" draggable=\"true\">turn off<\/div>\n<div class=\"item verb-item\" id=\"verb4\" draggable=\"true\">give up<\/div>\n<div class=\"item verb-item\" id=\"verb5\" draggable=\"true\">put on<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"column definitions-column\">\n<h2 class=\"column-title\">Definitions<\/h2>\n<div id=\"definitions-container\">\n<div class=\"drop-zone\" data-match=\"verb1\">\n<div class=\"definition-item\">To stop trying to do something<\/div>\n<\/p><\/div>\n<div class=\"drop-zone\" data-match=\"verb2\">\n<div class=\"definition-item\">To rise from bed after sleeping<\/div>\n<\/p><\/div>\n<div class=\"drop-zone\" data-match=\"verb3\">\n<div class=\"definition-item\">To stop a device from working<\/div>\n<\/p><\/div>\n<div class=\"drop-zone\" data-match=\"verb4\">\n<div class=\"definition-item\">To try to find something<\/div>\n<\/p><\/div>\n<div class=\"drop-zone\" data-match=\"verb5\">\n<div class=\"definition-item\">To place clothing on your body<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div id=\"message\" class=\"message\"><\/div>\n<p> <button id=\"resetBtn\" class=\"reset-btn\">Reset Exercise<\/button>\n <\/div>\n<p> <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Correct matches mapping\n const correctMatches = {\n 'verb1': 'To rise from bed after sleeping',\n 'verb2': 'To try to find something',\n 'verb3': 'To stop a device from working',\n 'verb4': 'To stop trying to do something',\n 'verb5': 'To place clothing on your body'\n };<\/p>\n<p> \/\/ State tracking\n let matchedPairs = {};\n let draggedElement = null;<\/p>\n<p> \/\/ Get DOM elements\n const verbsContainer = document.getElementById('verbs-container');\n const definitionsContainer = document.getElementById('definitions-container');\n const messageDiv = document.getElementById('message');\n const resetBtn = document.getElementById('resetBtn');<\/p>\n<p> \/\/ Add event listeners to draggable verbs\n document.querySelectorAll('.verb-item').forEach(verb => {\n verb.addEventListener('dragstart', handleDragStart);\n verb.addEventListener('dragend', handleDragEnd);\n });<\/p>\n<p> \/\/ Add event listeners to drop zones\n document.querySelectorAll('.drop-zone').forEach(zone => {\n zone.addEventListener('dragover', handleDragOver);\n zone.addEventListener('dragenter', handleDragEnter);\n zone.addEventListener('dragleave', handleDragLeave);\n zone.addEventListener('drop', handleDrop);\n });<\/p>\n<p> \/\/ Reset button event listener\n resetBtn.addEventListener('click', resetExercise);<\/p>\n<p> \/\/ Drag and Drop Functions\n function handleDragStart(e) {\n draggedElement = this;\n this.classList.add('dragging');\n e.dataTransfer.setData('text\/plain', this.id);\n e.dataTransfer.effectAllowed = 'move';\n }<\/p>\n<p> function handleDragEnd() {\n this.classList.remove('dragging');\n document.querySelectorAll('.drop-zone').forEach(zone => {\n zone.classList.remove('highlight');\n });\n }<\/p>\n<p> function handleDragOver(e) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n }<\/p>\n<p> function handleDragEnter(e) {\n e.preventDefault();\n this.classList.add('highlight');\n }<\/p>\n<p> function handleDragLeave() {\n this.classList.remove('highlight');\n }<\/p>\n<p> function handleDrop(e) {\n e.preventDefault();\n this.classList.remove('highlight');<\/p>\n<p> const verbId = e.dataTransfer.getData('text\/plain');\n const verbElement = document.getElementById(verbId);\n const dropZone = this;\n const definitionText = dropZone.querySelector('.definition-item').textContent;<\/p>\n<p> \/\/ Check if this is a correct match\n if (correctMatches[verbId] === definitionText) {\n \/\/ Create matched pair\n createMatchedPair(verbElement, dropZone, verbId);<\/p>\n<p> \/\/ Remove the verb from the left column\n verbElement.style.display = 'none';<\/p>\n<p> \/\/ Mark drop zone as matched\n dropZone.classList.add('matched');\n dropZone.innerHTML = '';<\/p>\n<p> \/\/ Store the match\n matchedPairs[verbId] = dropZone.dataset.match;<\/p>\n<p> \/\/ Check if all pairs are matched\n checkCompletion();\n } else {\n \/\/ Visual feedback for incorrect match\n dropZone.style.borderColor = '#e74c3c';\n dropZone.style.backgroundColor = 'rgba(231, 76, 60, 0.1)';<\/p>\n<p> setTimeout(() => {\n dropZone.style.borderColor = '';\n dropZone.style.backgroundColor = '';\n }, 500);\n }\n }<\/p>\n<p> function createMatchedPair(verbElement, dropZone, verbId) {\n \/\/ Create a new element to show the matched pair\n const pairElement = document.createElement('div');\n pairElement.className = 'matched-pair';\n pairElement.id = `pair-${verbId}`;<\/p>\n<p> pairElement.innerHTML = `\n <span class=\"verb-in-pair\">${verbElement.textContent}<\/span>\n <span class=\"connector\">\u2192<\/span>\n <span class=\"definition-in-pair\">${correctMatches[verbId]}<\/span>\n `;<\/p>\n<p> \/\/ Insert the matched pair at the beginning of definitions container\n definitionsContainer.insertBefore(pairElement, definitionsContainer.firstChild);\n }<\/p>\n<p> function checkCompletion() {\n if (Object.keys(matchedPairs).length === Object.keys(correctMatches).length) {\n messageDiv.textContent = 'Bravo! Sve ta\u010dno!';\n messageDiv.classList.add('success');\n }\n }<\/p>\n<p> function resetExercise() {\n \/\/ Reset state\n matchedPairs = {};\n draggedElement = null;<\/p>\n<p> \/\/ Show all verbs again\n document.querySelectorAll('.verb-item').forEach(verb => {\n verb.style.display = 'block';\n });<\/p>\n<p> \/\/ Reset drop zones\n document.querySelectorAll('.drop-zone').forEach((zone, index) => {\n zone.classList.remove('matched');\n zone.classList.remove('highlight');<\/p>\n<p> \/\/ Reset zone content\n const definitions = [\n 'To stop trying to do something',\n 'To rise from bed after sleeping',\n 'To stop a device from working',\n 'To try to find something',\n 'To place clothing on your body'\n ];<\/p>\n<p> zone.innerHTML = `<\/p>\n<div class=\"definition-item\">${definitions[index]}<\/div>\n<p>`;\n });<\/p>\n<p> \/\/ Remove all matched pairs\n document.querySelectorAll('.matched-pair').forEach(pair => {\n pair.remove();\n });<\/p>\n<p> \/\/ Hide message\n messageDiv.textContent = '';\n messageDiv.classList.remove('success');\n }\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><br \/>\n“`<\/p>\n","protected":false},"excerpt":{"rendered":"<p>“`html Phrasal Verbs Matching Exercise Phrasal Verbs Matching Drag the phrasal verbs to match them with their definitions \ud83d\udccc How to play: Drag a phrasal verb from the left column and drop it on the correct definition in the right column. \u2705 Only correct matches will connect. Complete all 5 pairs to finish the exercise. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-475","post","type-post","status-publish","format-standard","hentry","category-frazalni-glagoli"],"_links":{"self":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":2,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":1094,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/475\/revisions\/1094"}],"wp:attachment":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/media?parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/categories?post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/tags?post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}