feat(curriculum): Add interactive examples for u,s, ruby elements lesson (#62704)

curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/6729963b1ab11638753cf082.md

@@ -5,12 +5,14 @@ challengeType: 19
 dashedName: what-are-the-u-s-and-ruby-elements-used-for
 ---
 
-# --description--
+# --interactive--
 
 The unarticulated annotation element, or `u` element for short, is used to represent inline text that has non-textual annotation applied.
 
 Here is an example of using the `u` element to highlight various spelling errors:
 
+:::interactive_editor
+
 ```html
 <p>
   You can use the unarticulated annotation element to highlight
@@ -18,6 +20,8 @@ Here is an example of using the `u` element to highlight various spelling errors
 </p>
 ```
 
+:::
+
 In the example, the words `incorrect`, `spelling`, and `issues` are misspelled. The default styling for the `u` element is a black underline underneath the text.
 
 In HTML4, the `u` element was used for styling purposes. But in HTML5, the `u` element should only be used to indicate that text has non-textual annotation applied.
@@ -26,22 +30,30 @@ If you want to style a piece of text with an underline, you should use CSS inste
 
 The strikethrough element, or `s` element for short, should be used to represent when text is no longer accurate or relevant. Here is an example of using the `s` element to show the cancellation of an activity:
 
+:::interactive_editor
+
 ```html
 <p><s>Tomorrow's hike will be meeting at noon.</s></p>
 
 <p>Due to unforeseen weather conditions, the hike has been canceled.</p>
 ```
 
+:::
+
 In this example, the first sentence is crossed out because the hike was canceled due to weather reasons.
 
 The `s` element should never be used to just to show changes to a document. More appropriate elements in that case would be the deleted text element and the inserted text element.
 
 The `ruby` element represents small text shown above or below the main text. It is typically used to show the pronunciation of East Asian characters. Here is the `ruby` element example from the MDN web docs page:
 
+:::interactive_editor
+
 ```html
 <ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
 ```
 
+:::
+
 The `rp` element, or ruby fallback parenthesis element, is used as a fallback for browsers lacking support for displaying ruby annotations.
 
 The `rt` element, or ruby text element, is used to indicate text for the ruby annotation. This text is usually used for pronunciation, or translation details in East Asian typography.