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-color: #f5f7fa;\n color: #333;\n line-height: 1.6;\n padding: 20px;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n }<\/p>\n<p> .matching-exercise {\n background-color: white;\n border-radius: 12px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n padding: 25px;\n max-width: 1000px;\n width: 100%;\n }<\/p>\n<p> h3 {\n text-align: center;\n color: #2c3e50;\n margin-bottom: 25px;\n font-size: 1.8rem;\n padding-bottom: 15px;\n border-bottom: 2px solid #eaeaea;\n }<\/p>\n<p> .columns-container {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n margin-bottom: 30px;\n }<\/p>\n<p> .column {\n flex: 1;\n min-width: 300px;\n }<\/p>\n<p> .column h4 {\n color: #3498db;\n margin-bottom: 15px;\n text-align: center;\n font-size: 1.3rem;\n }<\/p>\n<p> .left .item {\n background-color: #e8f4fc;\n border-left: 5px solid #3498db;\n }<\/p>\n<p> .right .item {\n background-color: #f9f7e8;\n border-left: 5px solid #f39c12;\n }<\/p>\n<p> .item {\n padding: 15px;\n margin-bottom: 12px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n user-select: none;\n position: relative;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n }<\/p>\n<p> .item:hover {\n transform: translateY(-3px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n }<\/p>\n<p> .item.selected {\n transform: translateY(-2px);\n box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n }<\/p>\n<p> .left .item.selected {\n background-color: #d1ebff;\n border-left: 5px solid #2980b9;\n }<\/p>\n<p> .right .item.selected {\n background-color: #fef3d9;\n border-left: 5px solid #e67e22;\n }<\/p>\n<p> .item.matched {\n cursor: default;\n opacity: 0.7;\n transform: none;\n }<\/p>\n<p> .item.matched:hover {\n transform: none;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n }<\/p>\n<p> .left .item.matched {\n background-color: #d5f4e6;\n border-left: 5px solid #27ae60;\n }<\/p>\n<p> .right .item.matched {\n background-color: #d5f4e6;\n border-left: 5px solid #27ae60;\n }<\/p>\n<p> .match-line {\n position: absolute;\n background-color: #27ae60;\n height: 3px;\n z-index: 1;\n pointer-events: none;\n transition: all 0.3s ease;\n }<\/p>\n<p> .feedback {\n text-align: center;\n padding: 15px;\n border-radius: 8px;\n margin-top: 20px;\n font-weight: bold;\n font-size: 1.1rem;\n opacity: 0;\n transition: opacity 0.5s ease;\n background-color: #f8f9fa;\n }<\/p>\n<p> .feedback.show {\n opacity: 1;\n }<\/p>\n<p> .feedback.success {\n color: #27ae60;\n background-color: #eafaf1;\n }<\/p>\n<p> .reset-btn {\n display: block;\n margin: 20px auto 0;\n padding: 12px 30px;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 6px;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.3s;\n }<\/p>\n<p> .reset-btn:hover {\n background-color: #2980b9;\n }<\/p>\n<p> .instructions {\n text-align: center;\n color: #7f8c8d;\n margin-bottom: 20px;\n font-size: 0.95rem;\n }<\/p>\n<p> @media (max-width: 768px) {\n .columns-container {\n flex-direction: column;\n }<\/p>\n<p> .column {\n min-width: 100%;\n }<\/p>\n<p> h3 {\n font-size: 1.5rem;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n .matching-exercise {\n padding: 15px;\n }<\/p>\n<p> .item {\n padding: 12px;\n font-size: 0.95rem;\n }<\/p>\n<p> h3 {\n font-size: 1.3rem;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"matching-exercise\">\n<h3>Match the Phrasal Verbs with their Meanings<\/h3>\n<p class=\"instructions\">Click on a phrasal verb from the left column, then click on its meaning from the right column to make a match.<\/p>\n<div class=\"columns-container\">\n<div class=\"column left\">\n<h4>Phrasal Verbs<\/h4>\n<div class=\"item\" data-id=\"1\">Look up to<\/div>\n<div class=\"item\" data-id=\"2\">Run into<\/div>\n<div class=\"item\" data-id=\"3\">Give up<\/div>\n<div class=\"item\" data-id=\"4\">Take after<\/div>\n<div class=\"item\" data-id=\"5\">Bring up<\/div>\n<div class=\"item\" data-id=\"6\">Turn down<\/div>\n<div class=\"item\" data-id=\"7\">Get along with<\/div>\n<div class=\"item\" data-id=\"8\">Put off<\/div>\n<\/p><\/div>\n<div class=\"column right\">\n<h4>Meanings<\/h4>\n<div class=\"item\" data-id=\"a\">To admire or respect someone<\/div>\n<div class=\"item\" data-id=\"b\">To meet someone unexpectedly<\/div>\n<div class=\"item\" data-id=\"c\">To quit or stop trying<\/div>\n<div class=\"item\" data-id=\"d\">To resemble a family member<\/div>\n<div class=\"item\" data-id=\"e\">To raise a topic or child<\/div>\n<div class=\"item\" data-id=\"f\">To reject or refuse<\/div>\n<div class=\"item\" data-id=\"g\">To have a good relationship with<\/div>\n<div class=\"item\" data-id=\"h\">To postpone or delay<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"feedback\" id=\"feedback\"><\/div>\n<p> <button class=\"reset-btn\" id=\"resetBtn\">Reset Exercise<\/button>\n <\/div>\n<p> <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Matching pairs (leftId: rightId)\n const correctPairs = {\n '1': 'a', \/\/ Look up to - To admire or respect someone\n '2': 'b', \/\/ Run into - To meet someone unexpectedly\n '3': 'c', \/\/ Give up - To quit or stop trying\n '4': 'd', \/\/ Take after - To resemble a family member\n '5': 'e', \/\/ Bring up - To raise a topic or child\n '6': 'f', \/\/ Turn down - To reject or refuse\n '7': 'g', \/\/ Get along with - To have a good relationship with\n '8': 'h' \/\/ Put off - To postpone or delay\n };<\/p>\n<p> \/\/ State variables\n let selectedLeft = null;\n let selectedRight = null;\n let matchedPairs = {};\n let lines = [];<\/p>\n<p> \/\/ DOM elements\n const leftItems = document.querySelectorAll('.left .item');\n const rightItems = document.querySelectorAll('.right .item');\n const feedbackEl = document.getElementById('feedback');\n const resetBtn = document.getElementById('resetBtn');<\/p>\n<p> \/\/ Initialize the exercise\n function initExercise() {\n \/\/ Clear selections and matches\n selectedLeft = null;\n selectedRight = null;\n matchedPairs = {};\n lines = [];<\/p>\n<p> \/\/ Remove all lines\n document.querySelectorAll('.match-line').forEach(line => line.remove());<\/p>\n<p> \/\/ Reset all items\n leftItems.forEach(item => {\n item.classList.remove('selected', 'matched');\n item.addEventListener('click', handleLeftClick);\n });<\/p>\n<p> rightItems.forEach(item => {\n item.classList.remove('selected', 'matched');\n item.addEventListener('click', handleRightClick);\n });<\/p>\n<p> \/\/ Clear feedback\n feedbackEl.textContent = '';\n feedbackEl.classList.remove('show', 'success');<\/p>\n<p> \/\/ Update instructions\n document.querySelector('.instructions').textContent = \n 'Click on a phrasal verb from the left column, then click on its meaning from the right column to make a match.';\n }<\/p>\n<p> \/\/ Handle click on left item (phrasal verb)\n function handleLeftClick(e) {\n const item = e.currentTarget;\n const id = item.getAttribute('data-id');<\/p>\n<p> \/\/ If already matched, do nothing\n if (item.classList.contains('matched')) return;<\/p>\n<p> \/\/ If this item is already selected, deselect it\n if (selectedLeft === id) {\n item.classList.remove('selected');\n selectedLeft = null;\n return;\n }<\/p>\n<p> \/\/ Deselect previous left selection\n if (selectedLeft) {\n document.querySelector(`.left .item[data-id=\"${selectedLeft}\"]`).classList.remove('selected');\n }<\/p>\n<p> \/\/ Select this item\n item.classList.add('selected');\n selectedLeft = id;<\/p>\n<p> \/\/ If we have both selections, try to match\n if (selectedLeft && selectedRight) {\n checkMatch();\n }\n }<\/p>\n<p> \/\/ Handle click on right item (meaning)\n function handleRightClick(e) {\n const item = e.currentTarget;\n const id = item.getAttribute('data-id');<\/p>\n<p> \/\/ If already matched, do nothing\n if (item.classList.contains('matched')) return;<\/p>\n<p> \/\/ If this item is already selected, deselect it\n if (selectedRight === id) {\n item.classList.remove('selected');\n selectedRight = null;\n return;\n }<\/p>\n<p> \/\/ Deselect previous right selection\n if (selectedRight) {\n document.querySelector(`.right .item[data-id=\"${selectedRight}\"]`).classList.remove('selected');\n }<\/p>\n<p> \/\/ Select this item\n item.classList.add('selected');\n selectedRight = id;<\/p>\n<p> \/\/ If we have both selections, try to match\n if (selectedLeft && selectedRight) {\n checkMatch();\n }\n }<\/p>\n<p> \/\/ Check if the selected pair is a match\n function checkMatch() {\n const leftItem = document.querySelector(`.left .item[data-id=\"${selectedLeft}\"]`);\n const rightItem = document.querySelector(`.right .item[data-id=\"${selectedRight}\"]`);<\/p>\n<p> \/\/ Check if this is a correct match\n const isCorrect = correctPairs[selectedLeft] === selectedRight;<\/p>\n<p> if (isCorrect) {\n \/\/ Mark as matched\n leftItem.classList.add('matched');\n rightItem.classList.add('matched');\n leftItem.classList.remove('selected');\n rightItem.classList.remove('selected');<\/p>\n<p> \/\/ Store the match\n matchedPairs[selectedLeft] = selectedRight;<\/p>\n<p> \/\/ Draw a line between matched items\n drawMatchLine(leftItem, rightItem);<\/p>\n<p> \/\/ Show success feedback\n showFeedback('Correct match!', true);<\/p>\n<p> \/\/ Check if all pairs are matched\n if (Object.keys(matchedPairs).length === Object.keys(correctPairs).length) {\n showFeedback('Excellent! All phrasal verbs are correctly matched!', true);\n }\n } else {\n \/\/ Show error feedback\n showFeedback('Not quite right. Try again!', false);<\/p>\n<p> \/\/ Deselect after a short delay\n setTimeout(() => {\n leftItem.classList.remove('selected');\n rightItem.classList.remove('selected');\n selectedLeft = null;\n selectedRight = null;\n }, 1000);\n }\n }<\/p>\n<p> \/\/ Draw a line between matched items\n function drawMatchLine(leftItem, rightItem) {\n \/\/ Get positions of the items\n const leftRect = leftItem.getBoundingClientRect();\n const rightRect = rightItem.getBoundingClientRect();\n const containerRect = document.querySelector('.columns-container').getBoundingClientRect();<\/p>\n<p> \/\/ Calculate line coordinates\n const startX = leftRect.right - containerRect.left;\n const startY = leftRect.top + leftRect.height \/ 2 - containerRect.top;\n const endX = rightRect.left - containerRect.left;\n const endY = rightRect.top + rightRect.height \/ 2 - containerRect.top;<\/p>\n<p> \/\/ Calculate line length and angle\n const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));\n const angle = Math.atan2(endY - startY, endX - startX) * 180 \/ Math.PI;<\/p>\n<p> \/\/ Create line element\n const line = document.createElement('div');\n line.className = 'match-line';\n line.style.width = `${length}px`;\n line.style.left = `${startX}px`;\n line.style.top = `${startY}px`;\n line.style.transform = `rotate(${angle}deg)`;\n line.style.transformOrigin = '0 0';<\/p>\n<p> \/\/ Add line to container\n document.querySelector('.columns-container').appendChild(line);\n lines.push(line);\n }<\/p>\n<p> \/\/ Show feedback message\n function showFeedback(message, isSuccess) {\n feedbackEl.textContent = message;\n feedbackEl.className = 'feedback show';<\/p>\n<p> if (isSuccess) {\n feedbackEl.classList.add('success');\n }<\/p>\n<p> \/\/ Auto-hide after 3 seconds unless it's the final success message\n if (!(isSuccess && Object.keys(matchedPairs).length === Object.keys(correctPairs).length)) {\n setTimeout(() => {\n feedbackEl.classList.remove('show');\n }, 3000);\n }\n }<\/p>\n<p> \/\/ Reset button event listener\n resetBtn.addEventListener('click', initExercise);<\/p>\n<p> \/\/ Initialize the exercise\n initExercise();\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><br \/>\n“`<\/p>\n<p>## Ova ve\u017eba sadr\u017ei:<\/p>\n<p>1. **8 parova phrasal verbs** sa njihovim zna\u010denjima:<br \/>\n – Look up to \u2192 To admire or respect someone<br \/>\n – Run into \u2192 To meet someone unexpectedly<br \/>\n – Give up \u2192 To quit or stop trying<br \/>\n – Take after \u2192 To resemble a family member<br \/>\n – Bring up \u2192 To raise a topic or child<br \/>\n – Turn down \u2192 To reject or refuse<br \/>\n – Get along with \u2192 To have a good relationship with<br \/>\n – Put off \u2192 To postpone or delay<\/p>\n<p>2. **Responsive dizajn** koji radi na desktop i mobilnim ure\u0111ajima:<br \/>\n – Fleksibilni raspored koji se prilago\u0111ava \u0161irini ekrana<br \/>\n – Optimizovano za dodir (touch) na mobilnim ure\u0111ajima<\/p>\n<p>3. **JavaScript interaktivnost**:<br \/>\n – Klikom se biraju parovi (prvo levi, pa desni element)<br \/>\n – Vizuelna indikacija selektovanih i spojenih parova<br \/>\n – Linije koje povezuju ta\u010dno spojene parove<br \/>\n – Onemogu\u0107eno ponovno kliktanje na spojene parove<br \/>\n – Poruka kada su svi parovi ta\u010dno spojeni<br \/>\n – Reset dugme za ponovno pokretanje ve\u017ebe<\/p>\n<p>Ve\u017eba je potpuno samostalna i radi u bilo kom modernom browseru.<\/p>\n","protected":false},"excerpt":{"rendered":"<p># Matching Ve\u017eba: Phrasal Verbs Evo kompletnog HTML dokumenta sa interaktivnom matching ve\u017ebom za phrasal verbs na srednjem nivou: “`html Phrasal Verbs Matching Exercise Match the Phrasal Verbs with their Meanings Click on a phrasal verb from the left column, then click on its meaning from the right column to make a match. Phrasal Verbs […]<\/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-473","post","type-post","status-publish","format-standard","hentry","category-frazalni-glagoli"],"_links":{"self":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/473","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=473"}],"version-history":[{"count":2,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/473\/revisions"}],"predecessor-version":[{"id":1095,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/473\/revisions\/1095"}],"wp:attachment":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/media?parent=473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/categories?post=473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/tags?post=473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

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

# Matching Ve\u017eba: Phrasal Verbs<\/p>\n

Evo kompletnog HTML dokumenta sa interaktivnom matching ve\u017ebom za phrasal verbs na srednjem nivou:<\/p>\n

“`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-color: #f5f7fa;\n color: #333;\n line-height: 1.6;\n padding: 20px;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n }<\/p>\n<p> .matching-exercise {\n background-color: white;\n border-radius: 12px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n padding: 25px;\n max-width: 1000px;\n width: 100%;\n }<\/p>\n<p> h3 {\n text-align: center;\n color: #2c3e50;\n margin-bottom: 25px;\n font-size: 1.8rem;\n padding-bottom: 15px;\n border-bottom: 2px solid #eaeaea;\n }<\/p>\n<p> .columns-container {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n margin-bottom: 30px;\n }<\/p>\n<p> .column {\n flex: 1;\n min-width: 300px;\n }<\/p>\n<p> .column h4 {\n color: #3498db;\n margin-bottom: 15px;\n text-align: center;\n font-size: 1.3rem;\n }<\/p>\n<p> .left .item {\n background-color: #e8f4fc;\n border-left: 5px solid #3498db;\n }<\/p>\n<p> .right .item {\n background-color: #f9f7e8;\n border-left: 5px solid #f39c12;\n }<\/p>\n<p> .item {\n padding: 15px;\n margin-bottom: 12px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n user-select: none;\n position: relative;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n }<\/p>\n<p> .item:hover {\n transform: translateY(-3px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n }<\/p>\n<p> .item.selected {\n transform: translateY(-2px);\n box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n }<\/p>\n<p> .left .item.selected {\n background-color: #d1ebff;\n border-left: 5px solid #2980b9;\n }<\/p>\n<p> .right .item.selected {\n background-color: #fef3d9;\n border-left: 5px solid #e67e22;\n }<\/p>\n<p> .item.matched {\n cursor: default;\n opacity: 0.7;\n transform: none;\n }<\/p>\n<p> .item.matched:hover {\n transform: none;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n }<\/p>\n<p> .left .item.matched {\n background-color: #d5f4e6;\n border-left: 5px solid #27ae60;\n }<\/p>\n<p> .right .item.matched {\n background-color: #d5f4e6;\n border-left: 5px solid #27ae60;\n }<\/p>\n<p> .match-line {\n position: absolute;\n background-color: #27ae60;\n height: 3px;\n z-index: 1;\n pointer-events: none;\n transition: all 0.3s ease;\n }<\/p>\n<p> .feedback {\n text-align: center;\n padding: 15px;\n border-radius: 8px;\n margin-top: 20px;\n font-weight: bold;\n font-size: 1.1rem;\n opacity: 0;\n transition: opacity 0.5s ease;\n background-color: #f8f9fa;\n }<\/p>\n<p> .feedback.show {\n opacity: 1;\n }<\/p>\n<p> .feedback.success {\n color: #27ae60;\n background-color: #eafaf1;\n }<\/p>\n<p> .reset-btn {\n display: block;\n margin: 20px auto 0;\n padding: 12px 30px;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 6px;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.3s;\n }<\/p>\n<p> .reset-btn:hover {\n background-color: #2980b9;\n }<\/p>\n<p> .instructions {\n text-align: center;\n color: #7f8c8d;\n margin-bottom: 20px;\n font-size: 0.95rem;\n }<\/p>\n<p> @media (max-width: 768px) {\n .columns-container {\n flex-direction: column;\n }<\/p>\n<p> .column {\n min-width: 100%;\n }<\/p>\n<p> h3 {\n font-size: 1.5rem;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n .matching-exercise {\n padding: 15px;\n }<\/p>\n<p> .item {\n padding: 12px;\n font-size: 0.95rem;\n }<\/p>\n<p> h3 {\n font-size: 1.3rem;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"matching-exercise\">\n<h3>Match the Phrasal Verbs with their Meanings<\/h3>\n<p class=\"instructions\">Click on a phrasal verb from the left column, then click on its meaning from the right column to make a match.<\/p>\n<div class=\"columns-container\">\n<div class=\"column left\">\n<h4>Phrasal Verbs<\/h4>\n<div class=\"item\" data-id=\"1\">Look up to<\/div>\n<div class=\"item\" data-id=\"2\">Run into<\/div>\n<div class=\"item\" data-id=\"3\">Give up<\/div>\n<div class=\"item\" data-id=\"4\">Take after<\/div>\n<div class=\"item\" data-id=\"5\">Bring up<\/div>\n<div class=\"item\" data-id=\"6\">Turn down<\/div>\n<div class=\"item\" data-id=\"7\">Get along with<\/div>\n<div class=\"item\" data-id=\"8\">Put off<\/div>\n<\/p><\/div>\n<div class=\"column right\">\n<h4>Meanings<\/h4>\n<div class=\"item\" data-id=\"a\">To admire or respect someone<\/div>\n<div class=\"item\" data-id=\"b\">To meet someone unexpectedly<\/div>\n<div class=\"item\" data-id=\"c\">To quit or stop trying<\/div>\n<div class=\"item\" data-id=\"d\">To resemble a family member<\/div>\n<div class=\"item\" data-id=\"e\">To raise a topic or child<\/div>\n<div class=\"item\" data-id=\"f\">To reject or refuse<\/div>\n<div class=\"item\" data-id=\"g\">To have a good relationship with<\/div>\n<div class=\"item\" data-id=\"h\">To postpone or delay<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"feedback\" id=\"feedback\"><\/div>\n<p> <button class=\"reset-btn\" id=\"resetBtn\">Reset Exercise<\/button>\n <\/div>\n<p> <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Matching pairs (leftId: rightId)\n const correctPairs = {\n '1': 'a', \/\/ Look up to - To admire or respect someone\n '2': 'b', \/\/ Run into - To meet someone unexpectedly\n '3': 'c', \/\/ Give up - To quit or stop trying\n '4': 'd', \/\/ Take after - To resemble a family member\n '5': 'e', \/\/ Bring up - To raise a topic or child\n '6': 'f', \/\/ Turn down - To reject or refuse\n '7': 'g', \/\/ Get along with - To have a good relationship with\n '8': 'h' \/\/ Put off - To postpone or delay\n };<\/p>\n<p> \/\/ State variables\n let selectedLeft = null;\n let selectedRight = null;\n let matchedPairs = {};\n let lines = [];<\/p>\n<p> \/\/ DOM elements\n const leftItems = document.querySelectorAll('.left .item');\n const rightItems = document.querySelectorAll('.right .item');\n const feedbackEl = document.getElementById('feedback');\n const resetBtn = document.getElementById('resetBtn');<\/p>\n<p> \/\/ Initialize the exercise\n function initExercise() {\n \/\/ Clear selections and matches\n selectedLeft = null;\n selectedRight = null;\n matchedPairs = {};\n lines = [];<\/p>\n<p> \/\/ Remove all lines\n document.querySelectorAll('.match-line').forEach(line => line.remove());<\/p>\n<p> \/\/ Reset all items\n leftItems.forEach(item => {\n item.classList.remove('selected', 'matched');\n item.addEventListener('click', handleLeftClick);\n });<\/p>\n<p> rightItems.forEach(item => {\n item.classList.remove('selected', 'matched');\n item.addEventListener('click', handleRightClick);\n });<\/p>\n<p> \/\/ Clear feedback\n feedbackEl.textContent = '';\n feedbackEl.classList.remove('show', 'success');<\/p>\n<p> \/\/ Update instructions\n document.querySelector('.instructions').textContent = \n 'Click on a phrasal verb from the left column, then click on its meaning from the right column to make a match.';\n }<\/p>\n<p> \/\/ Handle click on left item (phrasal verb)\n function handleLeftClick(e) {\n const item = e.currentTarget;\n const id = item.getAttribute('data-id');<\/p>\n<p> \/\/ If already matched, do nothing\n if (item.classList.contains('matched')) return;<\/p>\n<p> \/\/ If this item is already selected, deselect it\n if (selectedLeft === id) {\n item.classList.remove('selected');\n selectedLeft = null;\n return;\n }<\/p>\n<p> \/\/ Deselect previous left selection\n if (selectedLeft) {\n document.querySelector(`.left .item[data-id=\"${selectedLeft}\"]`).classList.remove('selected');\n }<\/p>\n<p> \/\/ Select this item\n item.classList.add('selected');\n selectedLeft = id;<\/p>\n<p> \/\/ If we have both selections, try to match\n if (selectedLeft && selectedRight) {\n checkMatch();\n }\n }<\/p>\n<p> \/\/ Handle click on right item (meaning)\n function handleRightClick(e) {\n const item = e.currentTarget;\n const id = item.getAttribute('data-id');<\/p>\n<p> \/\/ If already matched, do nothing\n if (item.classList.contains('matched')) return;<\/p>\n<p> \/\/ If this item is already selected, deselect it\n if (selectedRight === id) {\n item.classList.remove('selected');\n selectedRight = null;\n return;\n }<\/p>\n<p> \/\/ Deselect previous right selection\n if (selectedRight) {\n document.querySelector(`.right .item[data-id=\"${selectedRight}\"]`).classList.remove('selected');\n }<\/p>\n<p> \/\/ Select this item\n item.classList.add('selected');\n selectedRight = id;<\/p>\n<p> \/\/ If we have both selections, try to match\n if (selectedLeft && selectedRight) {\n checkMatch();\n }\n }<\/p>\n<p> \/\/ Check if the selected pair is a match\n function checkMatch() {\n const leftItem = document.querySelector(`.left .item[data-id=\"${selectedLeft}\"]`);\n const rightItem = document.querySelector(`.right .item[data-id=\"${selectedRight}\"]`);<\/p>\n<p> \/\/ Check if this is a correct match\n const isCorrect = correctPairs[selectedLeft] === selectedRight;<\/p>\n<p> if (isCorrect) {\n \/\/ Mark as matched\n leftItem.classList.add('matched');\n rightItem.classList.add('matched');\n leftItem.classList.remove('selected');\n rightItem.classList.remove('selected');<\/p>\n<p> \/\/ Store the match\n matchedPairs[selectedLeft] = selectedRight;<\/p>\n<p> \/\/ Draw a line between matched items\n drawMatchLine(leftItem, rightItem);<\/p>\n<p> \/\/ Show success feedback\n showFeedback('Correct match!', true);<\/p>\n<p> \/\/ Check if all pairs are matched\n if (Object.keys(matchedPairs).length === Object.keys(correctPairs).length) {\n showFeedback('Excellent! All phrasal verbs are correctly matched!', true);\n }\n } else {\n \/\/ Show error feedback\n showFeedback('Not quite right. Try again!', false);<\/p>\n<p> \/\/ Deselect after a short delay\n setTimeout(() => {\n leftItem.classList.remove('selected');\n rightItem.classList.remove('selected');\n selectedLeft = null;\n selectedRight = null;\n }, 1000);\n }\n }<\/p>\n<p> \/\/ Draw a line between matched items\n function drawMatchLine(leftItem, rightItem) {\n \/\/ Get positions of the items\n const leftRect = leftItem.getBoundingClientRect();\n const rightRect = rightItem.getBoundingClientRect();\n const containerRect = document.querySelector('.columns-container').getBoundingClientRect();<\/p>\n<p> \/\/ Calculate line coordinates\n const startX = leftRect.right - containerRect.left;\n const startY = leftRect.top + leftRect.height \/ 2 - containerRect.top;\n const endX = rightRect.left - containerRect.left;\n const endY = rightRect.top + rightRect.height \/ 2 - containerRect.top;<\/p>\n<p> \/\/ Calculate line length and angle\n const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));\n const angle = Math.atan2(endY - startY, endX - startX) * 180 \/ Math.PI;<\/p>\n<p> \/\/ Create line element\n const line = document.createElement('div');\n line.className = 'match-line';\n line.style.width = `${length}px`;\n line.style.left = `${startX}px`;\n line.style.top = `${startY}px`;\n line.style.transform = `rotate(${angle}deg)`;\n line.style.transformOrigin = '0 0';<\/p>\n<p> \/\/ Add line to container\n document.querySelector('.columns-container').appendChild(line);\n lines.push(line);\n }<\/p>\n<p> \/\/ Show feedback message\n function showFeedback(message, isSuccess) {\n feedbackEl.textContent = message;\n feedbackEl.className = 'feedback show';<\/p>\n<p> if (isSuccess) {\n feedbackEl.classList.add('success');\n }<\/p>\n<p> \/\/ Auto-hide after 3 seconds unless it's the final success message\n if (!(isSuccess && Object.keys(matchedPairs).length === Object.keys(correctPairs).length)) {\n setTimeout(() => {\n feedbackEl.classList.remove('show');\n }, 3000);\n }\n }<\/p>\n<p> \/\/ Reset button event listener\n resetBtn.addEventListener('click', initExercise);<\/p>\n<p> \/\/ Initialize the exercise\n initExercise();\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><br \/>\n“`<\/p>\n<p>## Ova ve\u017eba sadr\u017ei:<\/p>\n<p>1. **8 parova phrasal verbs** sa njihovim zna\u010denjima:<br \/>\n – Look up to \u2192 To admire or respect someone<br \/>\n – Run into \u2192 To meet someone unexpectedly<br \/>\n – Give up \u2192 To quit or stop trying<br \/>\n – Take after \u2192 To resemble a family member<br \/>\n – Bring up \u2192 To raise a topic or child<br \/>\n – Turn down \u2192 To reject or refuse<br \/>\n – Get along with \u2192 To have a good relationship with<br \/>\n – Put off \u2192 To postpone or delay<\/p>\n<p>2. **Responsive dizajn** koji radi na desktop i mobilnim ure\u0111ajima:<br \/>\n – Fleksibilni raspored koji se prilago\u0111ava \u0161irini ekrana<br \/>\n – Optimizovano za dodir (touch) na mobilnim ure\u0111ajima<\/p>\n<p>3. **JavaScript interaktivnost**:<br \/>\n – Klikom se biraju parovi (prvo levi, pa desni element)<br \/>\n – Vizuelna indikacija selektovanih i spojenih parova<br \/>\n – Linije koje povezuju ta\u010dno spojene parove<br \/>\n – Onemogu\u0107eno ponovno kliktanje na spojene parove<br \/>\n – Poruka kada su svi parovi ta\u010dno spojeni<br \/>\n – Reset dugme za ponovno pokretanje ve\u017ebe<\/p>\n<p>Ve\u017eba je potpuno samostalna i radi u bilo kom modernom browseru.<\/p>\n","protected":false},"excerpt":{"rendered":"<p># Matching Ve\u017eba: Phrasal Verbs Evo kompletnog HTML dokumenta sa interaktivnom matching ve\u017ebom za phrasal verbs na srednjem nivou: “`html Phrasal Verbs Matching Exercise Match the Phrasal Verbs with their Meanings Click on a phrasal verb from the left column, then click on its meaning from the right column to make a match. Phrasal Verbs […]<\/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-473","post","type-post","status-publish","format-standard","hentry","category-frazalni-glagoli"],"_links":{"self":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/473","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=473"}],"version-history":[{"count":2,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/473\/revisions"}],"predecessor-version":[{"id":1095,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/posts\/473\/revisions\/1095"}],"wp:attachment":[{"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/media?parent=473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/categories?post=473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kursevikonverzacije.com\/blog\/wp-json\/wp\/v2\/tags?post=473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}