Interactive Text Editor<\/title>\n <style>\n html {\n font-size: 20px; \/* Base font size *\/\n font-weight: bold; \/* Bold text *\/\n }\n\n body {\n font-size: 1rem; \/* Font size based on HTML setting *\/\n }\n\n @keyframes fadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .interactive {\n cursor: pointer;\n color: blue;\n display: inline-block;\n white-space: nowrap;\n overflow: visible; \/* Changed to visible to prevent clipping *\/\n animation-duration: 0.75s;\n animation-fill-mode: forwards;\n min-width: 10px;\n height: auto; \/* Adjusted for auto height *\/\n line-height: normal; \/* Adjusted for normal line-height *\/\n vertical-align: 1px;\n margin: 0;\n padding: 0;\n text-align: center;\n }\n\n .active-mode { \n background-color: lightgreen; \n }\n\n .interactive.space-button {\n background-color: #f0f0f0;\n }\n\n .space-button.margin-small {\n margin-left: 0;\n margin-right: 0;\n }\n\n .space-button.margin-large {\n margin-left: 5px;\n margin-right: 5px;\n }\n<\/style>\n\n\n <div id=\"content\" style=\"color: black;\">\n \n I have <span class=\"interactive\" data-original=\"liv\u2019d\" data-replacement=\"lived\" data-id=\"1705453772356\" style=\"width: 40px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">liv\u2019d<\/span> long enough: my way of life<br>\n <span class=\"interactive\" data-original=\"Is\" data-replacement=\"Has\" data-id=\"1705453784313\" style=\"width: 17px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">Is<\/span> <span class=\"interactive\" data-original=\"fall\u2019n\" data-replacement=\"fallen\" data-id=\"1705453802257\" style=\"width: 47px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">fall\u2019n<\/span> into <span class=\"interactive\" data-original=\"the sere\" data-replacement=\"decay\" data-id=\"1705453815027\" style=\"width: 77px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">the sere<\/span>, <span class=\"interactive\" data-original=\"\u2605\" data-replacement=\"like\" data-id=\"1705512708124\" style=\"width: 17px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s;\">\u2605<\/span> the <span class=\"interactive\" data-original=\"yellow\" data-replacement=\"yellowed\" data-id=\"1705545053014\" style=\"width: 61px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s;\">yellow<\/span> leaf;<br>\n And<span class=\"interactive space-button margin-small\" data-original=\" \" data-replacement=\"I must not expect to have \" data-id=\"1705432484976\" style=\"width: 0px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn; color: blue;\" data-linked-id=\"1705432469560\"> <\/span><span class=\"interactive\" data-original=\"that\" data-replacement=\"those things\" data-id=\"1705453952286\" style=\"width: 37px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">that<\/span> which should accompany old age,<br>\n <span class=\"interactive\" data-original=\"As\" data-replacement=\"Such as\" data-id=\"1705453969323\" style=\"width: 26px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">As<\/span> honour, love, obedience, troops of friends,<br>\n <span class=\"interactive\" data-original=\"I must not look to have;\" data-replacement=\"\u2605\" data-id=\"1705432469560\" style=\"width: 224px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn; color: blue;\" data-linked-id=\"1705432484976\" id=\"yui_3_17_2_1_1705544993309_415\">I must not look to have;<\/span> but <span class=\"interactive\" data-original=\"in their stead\" data-replacement=\"instead\" data-id=\"1705454085744\" style=\"width: 124px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">in their stead<\/span>,<br>\n <span class=\"interactive\" data-original=\"Curses\" data-replacement=\"I must expect curses\" data-id=\"1705454205127\" style=\"width: 68px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">Curses<\/span>, not loud, but deep, mouth-honour, breath,<br>\n Which the <span class=\"interactive\" data-original=\"\u2605\" data-replacement=\"speaker's\" data-id=\"1705512738155\" style=\"width: 17px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; color: blue; animation-name: fadeIn;\" id=\"yui_3_17_2_1_1705544993309_429\">\u2605<\/span> poor heart would <span class=\"interactive\" data-original=\"fain\" data-replacement=\"rather\" data-id=\"1705454318992\" style=\"width: 36px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">fain<\/span> deny, <span class=\"interactive\" data-original=\"and\" data-replacement=\"but\" data-id=\"1705454327346\" style=\"width: 36px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">and<\/span> dare not.\n <\/div>\n\n\n <script>\n let isEditing = false;\n let isLinking = false;\n let firstLinkedElement = null;\n\n function toggleEditMode() {\n isEditing = !isEditing;\n document.getElementById('editModeButton').classList.toggle('active-mode', isEditing);\n if (isLinking) toggleLinkMode();\n }\n\n function toggleLinkMode() {\n isLinking = !isLinking;\n document.getElementById('linkModeButton').classList.toggle('active-mode', isLinking);\n firstLinkedElement = null;\n if (isEditing) toggleEditMode();\n }\n\n function createInteractiveElement(text, replacement) {\n let span = document.createElement('span');\n span.className = 'interactive';\n span.textContent = text;\n\t\t\t\t\t\tif(text.trim() === '') {\n\n \t\t\t\t\t\t\t span.setAttribute('data-original', ' ');\n\n \t\t\t\t\t\t\t span.setAttribute('data-replacement', '');\n\n}\n\t\t\t\t\t\tif(text.trim() === '') {\n \t\t\t\t\t\t\tspan.classList.add('space-button'); \n}\n\n if (text.trim() === '') {\n span.innerHTML = ' '; \/\/ Using non-breaking space for visibility\n span.classList.add('space-button'); \/\/ Additional class for styling\n text = ' '; \/\/ Original text is a space\n }\n\n span.setAttribute('data-original', text);\n span.setAttribute('data-replacement', replacement);\n span.setAttribute('data-id', Date.now().toString());\n\n \/\/ Set initial width and apply transition\n span.style.width = getWidthForText(text) + \"px\";\n span.style.transition = \"color 1s ease, width 0.5s ease, opacity 1s ease\";\n\n span.onclick = function() {\n if (isLinking) {\n linkElements(this);\n } else {\n toggleText(this);\n }\n };\n return span;\n }\n\n function getWidthForText(text) {\n let tempSpan = document.createElement(\"span\");\n tempSpan.style.visibility = \"hidden\";\n tempSpan.style.position = \"absolute\";\n tempSpan.style.whiteSpace = \"nowrap\";\n tempSpan.style.fontSize = \"1rem\"; \/\/ Use the same font size as your interactive elements\n tempSpan.style.fontWeight = \"bold\"; \/\/ Use the same font weight as your interactive elements\n tempSpan.textContent = text;\n document.body.appendChild(tempSpan);\n let width = tempSpan.offsetWidth;\n document.body.removeChild(tempSpan);\n return width;\n}\n\nfunction updateWidthsForInteractiveElements() {\n document.querySelectorAll('.interactive').forEach(element => {\n let text = element.textContent || element.getAttribute('data-original');\n let newWidth = getWidthForText(text) + \"px\";\n element.style.width = newWidth;\n });\n}\n\n\/\/ Call this function after loading content\nwindow.onload = function() {\n loadFromLocalStorage();\n updateWidthsForInteractiveElements();\n};\n\n function linkElements(element) {\n if (!firstLinkedElement) {\n firstLinkedElement = element;\n } else {\n element.setAttribute('data-linked-id', firstLinkedElement.getAttribute('data-id'));\n firstLinkedElement.setAttribute('data-linked-id', element.getAttribute('data-id'));\n firstLinkedElement = null;\n toggleLinkMode();\n }\n }\nfunction toggleText(element) {\n let originalText = element.getAttribute('data-original');\n let replacementText = element.getAttribute('data-replacement');\n let linkedId = element.getAttribute('data-linked-id');\n\n let isOriginal = element.textContent.trim() === originalText.trim();\n \n \/\/ Toggle the color based on the text state\n if (isOriginal) {\n element.style.color = 'red'; \/\/ Change to red for second state\n } else {\n element.style.color = 'blue'; \/\/ Change back to blue for initial state\n }\n\n animateAndChangeText(element, originalText, replacementText);\n\n \/\/ Handle linked elements\n if (linkedId) {\n document.querySelectorAll('.interactive[data-id=\"' + linkedId + '\"]').forEach(linkedElement => {\n if (linkedElement !== element) {\n let linkedOriginalText = linkedElement.getAttribute('data-original');\n let linkedReplacementText = linkedElement.getAttribute('data-replacement');\n\n \/\/ Toggle the color for linked elements\n if (linkedElement.textContent.trim() === linkedOriginalText.trim()) {\n linkedElement.style.color = 'red';\n } else {\n linkedElement.style.color = 'blue';\n }\n\n animateAndChangeText(linkedElement, linkedOriginalText, linkedReplacementText);\n }\n });\n }\n}\nfunction animateAndChangeText(element, originalText, replacementText) {\n element.style.animationName = 'fadeOut';\n element.addEventListener('animationend', function() {\n \/\/ Update the content and adjust margins after fade-out\n let isOriginal = element.textContent.trim() === originalText.trim();\n element.textContent = isOriginal ? replacementText : originalText;\n\n if (element.classList.contains('space-button')) {\n if (isOriginal) {\n element.classList.remove('margin-small');\n element.classList.add('margin-large');\n } else {\n element.classList.remove('margin-large');\n element.classList.add('margin-small');\n }\n }\n\n void element.offsetWidth; \/\/ Force a reflow\n\n let newWidth = getWidthForText(element.textContent) + \"px\";\n element.style.width = newWidth;\n element.style.animationName = 'fadeIn';\n }, { once: true });\n}\n\n\n\n function saveToLocalStorage() {\n localStorage.setItem('savedInteractiveText', document.getElementById('content').innerHTML);\n alert('Content saved to local storage!');\n }\n\n function loadFromLocalStorage() {\n let savedContent = localStorage.getItem('savedInteractiveText');\n if (savedContent) {\n document.getElementById('content').innerHTML = savedContent;\n }\n addEventListenersToInteractiveElements(); \/\/ Call this regardless of saved content\n updateWidthsForInteractiveElements(); \/\/ Update widths after loading content\n}\n function addEventListenersToInteractiveElements() {\n document.querySelectorAll('.interactive').forEach(element => {\n element.onclick = function() {\n if (isLinking) {\n linkElements(this);\n } else {\n toggleText(this);\n }\n };\n });\n }\n\n document.getElementById('content').addEventListener('mouseup', function(e) {\n if (!isEditing) return;\n\n let selection = window.getSelection();\n if (selection.rangeCount > 0) {\n let range = selection.getRangeAt(0);\n if (range && !range.collapsed) {\n let selectedText = range.toString();\n let replacement = prompt(\"Enter replacement text for \\\"\" + selectedText + \"\\\":\");\n if (replacement) {\n let newSpan = createInteractiveElement(selectedText, replacement);\n range.surroundContents(newSpan);\n }\n }\n }\n });\n\n window.onload = loadFromLocalStorage;\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/oershakespeare.net\/index.php\/about\">About the Dynamic OER Shakespeare<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sample passage (Macbeth Act V, scene 3) Interactive Text Editor I have liv\u2019d long enough: my way of life Is fall\u2019n into the sere, \u2605 the yellow leaf; And that which should accompany old age, As honour, love, obedience, troops of friends, I must not look to have; but in their stead, Curses, not loud, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":27,"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/105"}],"wp:attachment":[{"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7,"date":"2024-01-18T12:47:32","date_gmt":"2024-01-18T12:47:32","guid":{"rendered":"https:\/\/oershakespeare.net\/?page_id=7"},"modified":"2024-01-23T22:50:58","modified_gmt":"2024-01-23T22:50:58","slug":"7-2","status":"publish","type":"page","link":"https:\/\/oershakespeare.net\/","title":{"rendered":""},"content":{"rendered":"\n

Sample passage (Macbeth <\/em>Act V, scene 3)<\/strong><\/p>\n\n\n\n\n\n\n Interactive Text Editor<\/title>\n <style>\n html {\n font-size: 20px; \/* Base font size *\/\n font-weight: bold; \/* Bold text *\/\n }\n\n body {\n font-size: 1rem; \/* Font size based on HTML setting *\/\n }\n\n @keyframes fadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .interactive {\n cursor: pointer;\n color: blue;\n display: inline-block;\n white-space: nowrap;\n overflow: visible; \/* Changed to visible to prevent clipping *\/\n animation-duration: 0.75s;\n animation-fill-mode: forwards;\n min-width: 10px;\n height: auto; \/* Adjusted for auto height *\/\n line-height: normal; \/* Adjusted for normal line-height *\/\n vertical-align: 1px;\n margin: 0;\n padding: 0;\n text-align: center;\n }\n\n .active-mode { \n background-color: lightgreen; \n }\n\n .interactive.space-button {\n background-color: #f0f0f0;\n }\n\n .space-button.margin-small {\n margin-left: 0;\n margin-right: 0;\n }\n\n .space-button.margin-large {\n margin-left: 5px;\n margin-right: 5px;\n }\n<\/style>\n\n\n <div id=\"content\" style=\"color: black;\">\n \n I have <span class=\"interactive\" data-original=\"liv\u2019d\" data-replacement=\"lived\" data-id=\"1705453772356\" style=\"width: 40px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">liv\u2019d<\/span> long enough: my way of life<br>\n <span class=\"interactive\" data-original=\"Is\" data-replacement=\"Has\" data-id=\"1705453784313\" style=\"width: 17px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">Is<\/span> <span class=\"interactive\" data-original=\"fall\u2019n\" data-replacement=\"fallen\" data-id=\"1705453802257\" style=\"width: 47px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">fall\u2019n<\/span> into <span class=\"interactive\" data-original=\"the sere\" data-replacement=\"decay\" data-id=\"1705453815027\" style=\"width: 77px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">the sere<\/span>, <span class=\"interactive\" data-original=\"\u2605\" data-replacement=\"like\" data-id=\"1705512708124\" style=\"width: 17px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s;\">\u2605<\/span> the <span class=\"interactive\" data-original=\"yellow\" data-replacement=\"yellowed\" data-id=\"1705545053014\" style=\"width: 61px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s;\">yellow<\/span> leaf;<br>\n And<span class=\"interactive space-button margin-small\" data-original=\" \" data-replacement=\"I must not expect to have \" data-id=\"1705432484976\" style=\"width: 0px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn; color: blue;\" data-linked-id=\"1705432469560\"> <\/span><span class=\"interactive\" data-original=\"that\" data-replacement=\"those things\" data-id=\"1705453952286\" style=\"width: 37px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">that<\/span> which should accompany old age,<br>\n <span class=\"interactive\" data-original=\"As\" data-replacement=\"Such as\" data-id=\"1705453969323\" style=\"width: 26px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">As<\/span> honour, love, obedience, troops of friends,<br>\n <span class=\"interactive\" data-original=\"I must not look to have;\" data-replacement=\"\u2605\" data-id=\"1705432469560\" style=\"width: 224px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn; color: blue;\" data-linked-id=\"1705432484976\" id=\"yui_3_17_2_1_1705544993309_415\">I must not look to have;<\/span> but <span class=\"interactive\" data-original=\"in their stead\" data-replacement=\"instead\" data-id=\"1705454085744\" style=\"width: 124px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">in their stead<\/span>,<br>\n <span class=\"interactive\" data-original=\"Curses\" data-replacement=\"I must expect curses\" data-id=\"1705454205127\" style=\"width: 68px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">Curses<\/span>, not loud, but deep, mouth-honour, breath,<br>\n Which the <span class=\"interactive\" data-original=\"\u2605\" data-replacement=\"speaker's\" data-id=\"1705512738155\" style=\"width: 17px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; color: blue; animation-name: fadeIn;\" id=\"yui_3_17_2_1_1705544993309_429\">\u2605<\/span> poor heart would <span class=\"interactive\" data-original=\"fain\" data-replacement=\"rather\" data-id=\"1705454318992\" style=\"width: 36px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">fain<\/span> deny, <span class=\"interactive\" data-original=\"and\" data-replacement=\"but\" data-id=\"1705454327346\" style=\"width: 36px; transition: color 1s ease 0s, width 0.5s ease 0s, opacity 1s ease 0s; animation-name: fadeIn;\">and<\/span> dare not.\n <\/div>\n\n\n <script>\n let isEditing = false;\n let isLinking = false;\n let firstLinkedElement = null;\n\n function toggleEditMode() {\n isEditing = !isEditing;\n document.getElementById('editModeButton').classList.toggle('active-mode', isEditing);\n if (isLinking) toggleLinkMode();\n }\n\n function toggleLinkMode() {\n isLinking = !isLinking;\n document.getElementById('linkModeButton').classList.toggle('active-mode', isLinking);\n firstLinkedElement = null;\n if (isEditing) toggleEditMode();\n }\n\n function createInteractiveElement(text, replacement) {\n let span = document.createElement('span');\n span.className = 'interactive';\n span.textContent = text;\n\t\t\t\t\t\tif(text.trim() === '') {\n\n \t\t\t\t\t\t\t span.setAttribute('data-original', ' ');\n\n \t\t\t\t\t\t\t span.setAttribute('data-replacement', '');\n\n}\n\t\t\t\t\t\tif(text.trim() === '') {\n \t\t\t\t\t\t\tspan.classList.add('space-button'); \n}\n\n if (text.trim() === '') {\n span.innerHTML = ' '; \/\/ Using non-breaking space for visibility\n span.classList.add('space-button'); \/\/ Additional class for styling\n text = ' '; \/\/ Original text is a space\n }\n\n span.setAttribute('data-original', text);\n span.setAttribute('data-replacement', replacement);\n span.setAttribute('data-id', Date.now().toString());\n\n \/\/ Set initial width and apply transition\n span.style.width = getWidthForText(text) + \"px\";\n span.style.transition = \"color 1s ease, width 0.5s ease, opacity 1s ease\";\n\n span.onclick = function() {\n if (isLinking) {\n linkElements(this);\n } else {\n toggleText(this);\n }\n };\n return span;\n }\n\n function getWidthForText(text) {\n let tempSpan = document.createElement(\"span\");\n tempSpan.style.visibility = \"hidden\";\n tempSpan.style.position = \"absolute\";\n tempSpan.style.whiteSpace = \"nowrap\";\n tempSpan.style.fontSize = \"1rem\"; \/\/ Use the same font size as your interactive elements\n tempSpan.style.fontWeight = \"bold\"; \/\/ Use the same font weight as your interactive elements\n tempSpan.textContent = text;\n document.body.appendChild(tempSpan);\n let width = tempSpan.offsetWidth;\n document.body.removeChild(tempSpan);\n return width;\n}\n\nfunction updateWidthsForInteractiveElements() {\n document.querySelectorAll('.interactive').forEach(element => {\n let text = element.textContent || element.getAttribute('data-original');\n let newWidth = getWidthForText(text) + \"px\";\n element.style.width = newWidth;\n });\n}\n\n\/\/ Call this function after loading content\nwindow.onload = function() {\n loadFromLocalStorage();\n updateWidthsForInteractiveElements();\n};\n\n function linkElements(element) {\n if (!firstLinkedElement) {\n firstLinkedElement = element;\n } else {\n element.setAttribute('data-linked-id', firstLinkedElement.getAttribute('data-id'));\n firstLinkedElement.setAttribute('data-linked-id', element.getAttribute('data-id'));\n firstLinkedElement = null;\n toggleLinkMode();\n }\n }\nfunction toggleText(element) {\n let originalText = element.getAttribute('data-original');\n let replacementText = element.getAttribute('data-replacement');\n let linkedId = element.getAttribute('data-linked-id');\n\n let isOriginal = element.textContent.trim() === originalText.trim();\n \n \/\/ Toggle the color based on the text state\n if (isOriginal) {\n element.style.color = 'red'; \/\/ Change to red for second state\n } else {\n element.style.color = 'blue'; \/\/ Change back to blue for initial state\n }\n\n animateAndChangeText(element, originalText, replacementText);\n\n \/\/ Handle linked elements\n if (linkedId) {\n document.querySelectorAll('.interactive[data-id=\"' + linkedId + '\"]').forEach(linkedElement => {\n if (linkedElement !== element) {\n let linkedOriginalText = linkedElement.getAttribute('data-original');\n let linkedReplacementText = linkedElement.getAttribute('data-replacement');\n\n \/\/ Toggle the color for linked elements\n if (linkedElement.textContent.trim() === linkedOriginalText.trim()) {\n linkedElement.style.color = 'red';\n } else {\n linkedElement.style.color = 'blue';\n }\n\n animateAndChangeText(linkedElement, linkedOriginalText, linkedReplacementText);\n }\n });\n }\n}\nfunction animateAndChangeText(element, originalText, replacementText) {\n element.style.animationName = 'fadeOut';\n element.addEventListener('animationend', function() {\n \/\/ Update the content and adjust margins after fade-out\n let isOriginal = element.textContent.trim() === originalText.trim();\n element.textContent = isOriginal ? replacementText : originalText;\n\n if (element.classList.contains('space-button')) {\n if (isOriginal) {\n element.classList.remove('margin-small');\n element.classList.add('margin-large');\n } else {\n element.classList.remove('margin-large');\n element.classList.add('margin-small');\n }\n }\n\n void element.offsetWidth; \/\/ Force a reflow\n\n let newWidth = getWidthForText(element.textContent) + \"px\";\n element.style.width = newWidth;\n element.style.animationName = 'fadeIn';\n }, { once: true });\n}\n\n\n\n function saveToLocalStorage() {\n localStorage.setItem('savedInteractiveText', document.getElementById('content').innerHTML);\n alert('Content saved to local storage!');\n }\n\n function loadFromLocalStorage() {\n let savedContent = localStorage.getItem('savedInteractiveText');\n if (savedContent) {\n document.getElementById('content').innerHTML = savedContent;\n }\n addEventListenersToInteractiveElements(); \/\/ Call this regardless of saved content\n updateWidthsForInteractiveElements(); \/\/ Update widths after loading content\n}\n function addEventListenersToInteractiveElements() {\n document.querySelectorAll('.interactive').forEach(element => {\n element.onclick = function() {\n if (isLinking) {\n linkElements(this);\n } else {\n toggleText(this);\n }\n };\n });\n }\n\n document.getElementById('content').addEventListener('mouseup', function(e) {\n if (!isEditing) return;\n\n let selection = window.getSelection();\n if (selection.rangeCount > 0) {\n let range = selection.getRangeAt(0);\n if (range && !range.collapsed) {\n let selectedText = range.toString();\n let replacement = prompt(\"Enter replacement text for \\\"\" + selectedText + \"\\\":\");\n if (replacement) {\n let newSpan = createInteractiveElement(selectedText, replacement);\n range.surroundContents(newSpan);\n }\n }\n }\n });\n\n window.onload = loadFromLocalStorage;\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/oershakespeare.net\/index.php\/about\">About the Dynamic OER Shakespeare<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sample passage (Macbeth Act V, scene 3) Interactive Text Editor I have liv\u2019d long enough: my way of life Is fall\u2019n into the sere, \u2605 the yellow leaf; And that which should accompany old age, As honour, love, obedience, troops of friends, I must not look to have; but in their stead, Curses, not loud, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":27,"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/105"}],"wp:attachment":[{"href":"https:\/\/oershakespeare.net\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}