Skip to content

Commit cc7ed25

Browse files
chrisdavidmillsbsmth
chrisdavidmills
and
bsmth
authored
Remove old code editor and "active learning" from Emphasis and importance (#39827)
* Remove old code editor and active learning from Emphasis and importance * Update files/en-us/learn_web_development/core/structuring_content/emphasis_and_importance/index.md Co-authored-by: Brian Smith <brian@smith.berlin> --------- Co-authored-by: Brian Smith <brian@smith.berlin>
1 parent 6ae99fc commit cc7ed25

File tree

1 file changed

+39
-121
lines changed
  • files/en-us/learn_web_development/core/structuring_content/emphasis_and_importance

1 file changed

+39
-121
lines changed

‎files/en-us/learn_web_development/core/structuring_content/emphasis_and_importance/index.md

Lines changed: 39 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -77,142 +77,60 @@ You can nest strong and emphasis inside one another if desired:
7777

7878
{{EmbedLiveSample('Strong importance')}}
7979

80-
## Active learning: Let's be important
80+
## Let's play with emphasis and importance
8181

82-
In this active learning section, we've provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.
82+
In this section, we want you to play with emphasis and importance:
8383

84-
```html hidden
85-
<h2>Live output</h2>
84+
1. Click **"Play"** in the code block below to edit the example in the MDN Playground.
85+
2. In the main heading give the word "Emphasis" emphasis, and the word "importance" strong importance.
86+
3. In the first paragraph, give the coffee machine name strong importance, and emphasize the adjectives used to describe the coffee.
87+
4. In the second paragraph, give the temperature description ("cold") and the action you should take ("wrap up warm to avoid falling ill") strong importance. Give "falling ill" some extra markup so it is both emphasized and important.
8688

87-
<div class="output" style="min-height: 50px;"></div>
89+
If you make a mistake, you can clear your work using the _Reset_ button in the MDN Playground. If you get really stuck, you can view the solution below the code block.
8890

89-
<h2>Editable code</h2>
90-
<p class="a11y-label">
91-
Press Esc to move focus away from the code area (Tab inserts a tab character).
92-
</p>
93-
94-
<textarea id="code" class="input" style="min-height: 200px; width: 95%">
95-
<h1>Important notice</h1>
96-
<p>On Sunday January 9th 2010, a gang of goths were
97-
spotted stealing several garden gnomes from a
98-
shopping center in downtown Milwaukee. They were
99-
all wearing green jumpsuits and silly hats, and
100-
seemed to be having a whale of a time. If anyone
101-
has any information about this incident, please
102-
contact the police now.</p>
103-
</textarea>
104-
105-
<div class="playable-buttons">
106-
<input id="reset" type="button" value="Reset" />
107-
<input id="solution" type="button" value="Show solution" />
108-
</div>
109-
```
110-
111-
```css hidden
112-
html {
113-
font-family: sans-serif;
91+
```css hidden live-sample___emphasis_importance
92+
h1 {
93+
font-weight: normal;
11494
}
95+
```
11596

116-
h2 {
117-
font-size: 16px;
118-
}
97+
```html live-sample___emphasis_importance
98+
<h1>Emphasis and importance</h1>
11999

120-
.a11y-label {
121-
margin: 0;
122-
text-align: right;
123-
font-size: 0.7rem;
124-
width: 98%;
125-
}
100+
<p>
101+
My new coffee machine is called The Percolator 2000. It produces the most
102+
sublime and wonderful brew.
103+
</p>
126104

127-
body {
128-
margin: 10px;
129-
background: #f5f9fa;
130-
}
105+
<p>
106+
In the dead of winter, it will be cold. You should wrap up warm to avoid
107+
falling ill.
108+
</p>
131109
```
132110

133-
```js hidden
134-
const textarea = document.getElementById("code");
135-
const reset = document.getElementById("reset");
136-
const solution = document.getElementById("solution");
137-
const output = document.querySelector(".output");
138-
const code = textarea.value;
139-
let userEntry = textarea.value;
111+
{{ EmbedLiveSample('emphasis_importance', "100%", 160) }}
140112

141-
function updateCode() {
142-
output.innerHTML = textarea.value;
143-
}
113+
<details>
114+
<summary>Click here to show the solution</summary>
144115

145-
const htmlSolution =
146-
"<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>";
147-
let solutionEntry = htmlSolution;
148-
149-
reset.addEventListener("click", () => {
150-
textarea.value = code;
151-
userEntry = textarea.value;
152-
solutionEntry = htmlSolution;
153-
solution.value = "Show solution";
154-
updateCode();
155-
});
156-
157-
solution.addEventListener("click", () => {
158-
if (solution.value === "Show solution") {
159-
textarea.value = solutionEntry;
160-
solution.value = "Hide solution";
161-
} else {
162-
textarea.value = userEntry;
163-
solution.value = "Show solution";
164-
}
165-
updateCode();
166-
});
167-
168-
textarea.addEventListener("input", updateCode);
169-
window.addEventListener("load", updateCode);
170-
171-
// Stop tab key tabbing out of textarea and
172-
// make it write a tab at the caret position instead
173-
textarea.onkeydown = (e) => {
174-
if (e.code === "Tab") {
175-
e.preventDefault();
176-
insertAtCaret("\t");
177-
}
178-
179-
if (e.code === "Escape") {
180-
textarea.blur();
181-
}
182-
};
183-
184-
function insertAtCaret(text) {
185-
const scrollPos = textarea.scrollTop;
186-
let caretPos = textarea.selectionStart;
187-
188-
const front = textarea.value.substring(0, caretPos);
189-
const back = textarea.value.substring(
190-
textarea.selectionEnd,
191-
textarea.value.length,
192-
);
193-
textarea.value = front + text + back;
194-
caretPos += text.length;
195-
textarea.selectionStart = caretPos;
196-
textarea.selectionEnd = caretPos;
197-
textarea.focus();
198-
textarea.scrollTop = scrollPos;
199-
}
116+
Your finished HTML should look like this:
117+
118+
```html
119+
<h1><em>Emphasis</em> and <strong>importance</strong></h1>
200120

201-
// Update the saved userCode every time the user updates the text area code
202-
textarea.onkeyup = () => {
203-
// We only want to save the state when the user code is being shown,
204-
// not the solution, so that solution is not saved over the user code
205-
if (solution.value === "Show solution") {
206-
userEntry = textarea.value;
207-
} else {
208-
solutionEntry = textarea.value;
209-
}
210-
211-
updateCode();
212-
};
121+
<p>
122+
My new coffee machine is called <strong>The Percolator 2000</strong>. It
123+
produces the most <em>sublime</em> and <em>wonderful</em> brew.
124+
</p>
125+
126+
<p>
127+
In the dead of winter, it will be <strong>cold</strong>. You should
128+
<strong>wrap up warm to avoid <em>falling ill</em></strong
129+
>.
130+
</p>
213131
```
214132

215-
{{ EmbedLiveSample('Active_learning_Lets_be_important', 700, 520, "", "") }}
133+
</details>
216134

217135
## Italic, bold, underline…
218136

0 commit comments

Comments
 (0)