4th set of JS active learning updates

[chrisdavidmills]

Description

As part of a larger project to make the challenges/reader exercises in MDN learn more consistent, this PR:

• Replaces the old code editors with the live sample + MDN Playground flow.
• Makes some general wording improvements.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs

• /en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Arrays
• /en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Conditionals
• /en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Events

(comment last updated: 2025-07-10 08:32:39)

[bsmth]

I'm happy we can use this here 👍🏻

[chrisdavidmills]

Yeah, I love that we can do this. Unfortunately, the other articles didn't have so much scope for reuse.

[bsmth]

Could make it a little more compact or even hidden?

Suggested change

	// Don't edit the code below here!
	const section = document.querySelector("section");
	const para1 = document.createElement("p");
	para1.textContent = `Array: ${myArray}`;
	const para2 = document.createElement("p");
	para2.textContent = `The length of the array is ${arrayLength}.`;
	const para3 = document.createElement("p");
	para3.textContent = `The last item in the array is "${lastItem}".`;
	section.appendChild(para1);
	section.appendChild(para2);
	section.appendChild(para3);
	```
	```js hidden live-sample___arrays-2
	// The following code checks if your edits work.
	// Don't edit after this line!
	const section = document.querySelector("section");
	const para1 = document.createElement("p");
	para1.textContent = `Array: ${myArray}`;
	const para2 = document.createElement("p");
	para2.textContent = `The length of the array is ${arrayLength}.`;
	const para3 = document.createElement("p");
	para3.textContent = `The last item in the array is "${lastItem}".`;
	section.appendChild(para1);
	section.appendChild(para2);
	section.appendChild(para3);

[chrisdavidmills]

Hey @bsmth! After reading your comment, I experimented with hiding various sections of code to see what the experience was like. I ended up not going for a solution like this, for a couple of reasons:

1. When the code is loaded up in MDN Playground, it gets rid of line breaks at the start and end of the blocks, even if you set them to -nolint in the MDN page. As a result, you get comments right next to one another in a way I didn't want, which annoyed me.
2. When you jump over to the MDN Playground and are presented with code that you didn't know was there, it feels a bit jarring/surprising. I didn't feel like this would be a good experience, especially not for beginners.

To cut down on the size of these examples, I have done two things:

1. Removed unnecessary blank lines, as you suggested.
2. Truncated the shown "don't edit" code with ellipsis comments (// ...) inside the solution listings, keeping the other comments for context so the reader is less likely to get confused about where the solution should go.

Since this is a significant change, I'd like you to review this update to see if you think it works. Thanks!

[bsmth]

Super, thanks, Chris.

I ended up not going for a solution like this, for a couple of reasons:

Good, that all makes sense, tnx. Taking a look now

[bsmth]

Really glad we're refreshing these. General comment about format, and a question about hiding some of the logic checks in JS, but otherwise, looking great! Thank you 👏🏻

[bsmth]

Yeah this looks good, tnx

[bsmth]

This looks really tidy now, nice work

[chrisdavidmills]

Super, thanks @bsmth. I'll follow the same pattern in future PRs.

[bsmth]

Looking great, Chris! 👏🏻