search

mdn / content

The content behind MDN Web Docs
https://developer.mozilla.org
Other
9.2k stars 22.49k forks source link

Bug when using "Show solution" option #29421

Closed SergioTEC closed 1 year ago

SergioTEC commented 1 year ago

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals

What specific section or headline is this issue about?

Active learning: A simple calendar and Active learning: More color choices

What information was incorrect, unhelpful, or incomplete?

When you click on "Show solution" and then click on Hide solution or Reset, the exercises continue to work even if you have not placed any code or some code with a syntax error, they just go back to normal if you do the exercise correctly without syntax errors or with some correct modification, to correct this error you need to reload the page, but if you use the "Show solution" option, the problem returns.

What did you expect to see?

I expected that when I clicked on Hide Solution or Reset the exercises would stop working correctly if I put the code with a syntax error or if I didn't even put any code

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

Step 1 - Go to https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals.

Step 2 - Go to Active learning: A simple calendar or Active learning: More color choices exercises.

Step 3 - Write some code with an error, click on Show Solution and then on Hide solution, you will see that the exercise will work correctly even with the error code, if you click reset and put the same error code as before the exercise will still work correctly according to the Show solution code.

Do you have anything more you want to share?

I believe that with the step by step I went through it is possible to reproduce the problem, if it is not possible to reproduce the problem I will complement it with a video.

MDN metadata

Page report details * Folder: `en-us/learn/javascript/building_blocks/conditionals` * MDN URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/javascript/building_blocks/conditionals/index.md * Last commit: https://github.com/mdn/content/commit/acfe8c9f1f4145f77653a2bc64a9744b001358dc * Document last modified: 2023-07-07T07:19:19.000Z
caugner commented 1 year ago

This is in fact a content issue, because the code for the "Show/Hide solution" and "Reset" buttons are embedded in the content.

The problem most likely is that previously added event listeners aren't removed, so as soon as "Show solution" is clicked, the select element will continue to have an event listener that changes the month display.

One solution might be to reload the page in the reset event listener (the code executes in an iframe, so only the iframe gets reloaded):

https://github.com/mdn/content/blob/30c8486641d7aba05079003bff5d8807a44cb395/files/en-us/learn/javascript/building_blocks/conditionals/index.md#L552-L558

wbamberg commented 1 year ago

Yes, you're right, it is a content problem. In fact, the editor adds event listeners every time the text area is edited, and never clears any of them.

One solution might be to reload the page in the reset event listener (the code executes in an iframe, so only the iframe gets reloaded)

But I'm not sure this works either, or at least, it works for Reset but not for transitioning from "Show solution" to "Hide solution", because that transition wants to replace the solution with the current state of the user's own solution.

So consider: