No finished example given to recreate

[MON0RION]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays

What specific section or headline is this issue about?

Missing Examples in Javascript lessons

What information was incorrect, unhelpful, or incomplete?

Hi!

I'm working through the arrays section of the Javascript lessons on MDN and It looks like some content may be missing. Each test ends with "Try updating the live code below to recreate the finished example:", but there is nothing following this text besides the editable code window. See here. I could reliably reproduce this in Chrome, Firefox, and Edge on both MacOS and Windows. All ad blockers disabled on each. I believe this may also be affecting other pages as well, like the HTML tests.

I am not sure if I am just missing something, but I figured it was worth bringing up. I'm sure I'm not the first to notice.

What did you expect to see?

I expected to see a photo or text example following the text: "Try updating the live code below to recreate the finished example:"

Do you have any supporting links, references, or citations?

See example here

Do you have anything more you want to share?

No response

MDN metadata

Page report details

* Folder: `en-us/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics` * MDN URL: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md * Last commit: https://github.com/mdn/content/commit/ace1400b3b5cf252d6afc0caaccf170d0316c15e * Document last modified: 2022-07-11T21:07:38.000Z

[wbamberg]

Thanks for filing, @MON0RION ! Just to be clear, you do see the editor, with the code in it, like:

?

If so, I think the idea is that the result is described in prose before the example, and "recreate the finished example" refers to that:

In this task we'd like you to create an array of three items, stored inside a variable called myArray. The items can be anything you want — how about your favorite foods or bands?

Next, modify the first two items in the array using simple bracket notation and assignment. Then add a new item to the beginning of the array.

Perhaps in some cases we could make this clearer by including a screenshot of the result, like:

Is that what you were expecting to see? But that wouldn't be possible for the first example, where we don't specify exactly what should be in the array, and the output doesn't show all the steps you have to follow, only the final result. So we would need to rework all the tests, and some kinds of tests wouldn't be possible.

Or perhaps just the wording "recreate the finished example" is confusing?

As usual with MDN, I think there is a bigger issue too. As a learner, you do this assessment, but have no obvious way to check your answer for yourself, and the page asks you to ask for an assessment in https://discourse.mozilla.org/c/mdn/learn/250. I don't know how well that works for people - looking at recent requests for assessment, they often don't seem to get answers.

[mikoMK]

As usual with MDN, I think there is a bigger issue too. As a learner, you do this assessment, but have no obvious way to check your answer for yourself, and the page asks you to ask for an assessment in https://discourse.mozilla.org/c/mdn/learn/250. I don't know how well that works for people - looking at recent requests for assessment, they often don't seem to get answers.

This situation is probably worth discussing on https://github.com/orgs/mdn/discussions. I was a regular contributor on discourse for the last two years and seeing the forum now, it probably generates a lot of frustration among learners, because of all the unanswered questions. Giving thorough and helpful answers takes time and nobody seems willing to do so at the moment.

[MON0RION]

@wbamberg

Yes I do see the editor clearly in all examples, no issues there. I guess the wording is what confused me in the end. As a beginner it seemed to imply some guidance or confirmation when I got the answer right. I can be a slow learner, so not being able to check my answers makes it a little difficult for me.

That image is what I was expecting to see following the text. I realize it's a large ask to have all the pages changed to include the photo, but maybe consider rewording?

I appreciate your response!

[wbamberg]

As usual with MDN, I think there is a bigger issue too. As a learner, you do this assessment, but have no obvious way to check your answer for yourself, and the page asks you to ask for an assessment in https://discourse.mozilla.org/c/mdn/learn/250. I don't know how well that works for people - looking at recent requests for assessment, they often don't seem to get answers.

This situation is probably worth discussing on https://github.com/orgs/mdn/discussions. I was a regular contributor on discourse for the last two years and seeing the forum now, it probably generates a lot of frustration among learners, because of all the unanswered questions. Giving thorough and helpful answers takes time and nobody seems willing to do so at the moment.

Yes, I know you've been a huge help to learners on Discourse for years. Would love to hear your views too on how we could improve this for learners. Perhaps a documented way for learners to check their own work, and direct them at a forum if they get stuck? Also Mozilla/MDN seems to have more or less abandoned Discourse in favour of Discord, so pointing them at Discourse probably isn't very helpful. Anyway, you're right, let's start a discussion 👍 .

[Josh-Cena]

Related: https://github.com/mdn/content/issues/15834

[OnkarRuikar]

Perhaps in some cases we could make this clearer by including a screenshot of the result, That image is what I was expecting to see following the text. I realize it's a large ask to have all the pages changed to include the photo...

Using screenshots will add a lot to the repo size. Also, when an example is modified contributors will have to update images too; it'll further add old images to GitHistory.

How about we add a section at the end of live samples to show the output. The output can be hard coded or generated using the solution code (code won't be shown though):

[wbamberg]

How about we add a section at the end of live samples to show the output.

As I said in https://github.com/mdn/content/issues/28584#issuecomment-1680976432, this won't always work, because (a) there isn't always one way to do it, and (b) there are sometimes intermediate steps.

I think the best option is to make the wording clearer ("recreate the example" trips people up), but it would take some care. I'm happy to have a go at this.

[OnkarRuikar]

(a) there isn't always one way to do it, and

But for most cases, like this one, the output looks same no matter how you implement it. In other cases we can say "following output is for reference"/"output would look something like following".

(b) there are sometimes intermediate steps.

At the beginning we can show the final output, may be using EmbedLIveSample macro.

---

I think the best option is to make the wording clearer ("recreate the example" trips people up), but it would take some care. I'm happy to have a go at this.

Downside of this is that authors may end up describing solution code itself in English. E.g. From your comment: Next, modify the first two items in the array using simple bracket notation and assignment.\ The simplification will be subjective and the test will reduce to converting English code description to code.

The problem here seems more of how the output should look rather than how to achieve it. A picture(rendered output) is worth 1k words. For newbies it would be 10k words as they just need a visual hint and not spoon feeding.

[wbamberg]

(a) there isn't always one way to do it, and

But for most cases, like this one, the output looks same no matter how you implement it. In other cases we can say "following output is for reference"/"output would look something like following".

(b) there are sometimes intermediate steps.

At the beginning we can show the final output, may be using EmbedLIveSample macro.

Consider the first example in this page:

In this task we'd like you to create an array of three items, stored inside a variable called myArray. The items can be anything you want — how about your favorite foods or bands?

Next, modify the first two items in the array using simple bracket notation and assignment. Then add a new item to the beginning of the array.

There are three steps the reader has to follow here. What would the live sample show, that would help them understand the steps?

[estelle]

One part of the solution for this issue is that we should update every occurrence of "Try updating the live code below to recreate the finished example:" to example a specific directive relevant to the example on the page. This text needs to be updated on other pages as well.

Additionally, for this page, there needs to be output for each step along the way. The prose here needs to be updated. For "white box" tasks, the output of each step needs to be explained.