Change:
I am learning from the RWD course, and I wanted to revise what I had done previously. I went to previous steps, but I found that the steps are shown incomplete when I open them. It tells you to do the step again. This doesn't make sense because you have a button at the top if you do want to do the step again. Completed code should be shown in completed challenge's code editor along with an indicator like ! !
It would be relatively easy to show the solution to a step, and the "Step completed" text, (rather than storing the user's code) if a user has already submitted that step. If other maintainers are in favour of this change, I'd be happy to open this up for PRs.
My concern with that approach would be it completely destroys the UX if someone wants to go through a practise project again.
I propose to add a button under the summary of each project for this issue.
I'm not keen on adding a button to do that, given the potential for frustration if someone triggers that accidentally.
I think I'd be in favour of the existing flow, presonally.
At a minimum, we could probably add the checkmark next to "Step 22" like we do for all the other challenges after it has been completed. That seems to be missing here. !
That's a good idea, IMO.
I think just adding that check mark is probably the way to go then. It keeps it consistent with everything else. I'm going to open it up for contributions. If anyone still has reservations, be sure to bring them up.
May I suggest in addition to indicating completed challenges in the challenge itself, to do that in the list of steps. Here is a crude representation of what I have in mind: <p align="center"<img src="https://user-" width=500 align="centre"/</p
I believe it already does that. Here's a screenshot of what the challenge looks like for me, after I've completed it (the steps are highlighted in blue instead of white). !
Also, I would like to work on this issue, and I agree that adding a checkmark next to the step would be a good fix, but I noticed that the RWD courses don't have a step number or title at the top like the other courses do. For other courses, the checkmark for completion is displayed next to the name of the challenge, like you can see in the first screenshot (of the JS Algorithms & Data Structures courses). However, for the RWD course, there is nothing in this location, as you can see in the second screenshot. ! ! How should we go about adding a checkmark to the RWD course? Should we just put it next to where it says on the screenshot (inside the instructions block)? Or should we move the step number to the same place as where the challenge names are for the other courses and put the checkmark there, in order to be consistent with the other courses?
Thanks I could not log in since yesterday and this is probably the reason I don't see indication for completed challenges in the list of steps.

Discussion:
max-width: 600px; } <ins> .challenge-description-header { display: flex; } </ins> .description-container h1 { color: var(--secondary-color); font-family: Roboto Mono, monospace;

<ins> import * as ReactDOMServer from 'react-dom/server'; </ins> import Loadable from '@loadable/component'; // eslint-disable-next-line import/no-duplicates import type * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';

isResettingSelector, stopResetting, isProjectPreviewModalOpenSelector, <del> openModal </del> <ins> openModal, isChallengeCompletedSelector </ins> } from '../redux'; <ins> import GreenPass from '../../../assets/icons/green-pass'; </ins> import LowerJaw from './lower-jaw'; import './editor.css';

editableRegionBoundaries?: number[]; }) => void; usesMultifileEditor: boolean; <ins> isChallengeCompleted: boolean; </ins> } // TODO: this is grab bag of unrelated properties.  There's no need for them to

isSignedInSelector, userSelector, challengeTestsSelector, <ins> isChallengeCompletedSelector, </ins> ( canFocus: boolean, { challengeType }: { challengeType: number },

isResetting: boolean, isSignedIn: boolean, { theme = Themes.Default }: { theme: Themes }, <del> tests: [{ text: string; testString: string }] </del> <ins> tests: [{ text: string; testString: string }], isChallengeCompleted: boolean </ins> ) => ({ canFocus: open ? false : canFocus, challengeType,

isSignedIn, output, theme, <del> tests </del> <ins> tests, isChallengeCompleted </ins> }) );

function createDescription(editor: editor.IStandaloneCodeEditor) { if (dataRef.current.descriptionNode) return dataRef.current.descriptionNode; <del> const { description, title } = props; const jawHeading = document.createElement('h1'); jawHeading.innerText = title; </del> <ins> const { description, title, isChallengeCompleted } = props; const jawHeading = isChallengeCompleted ? document.createElement('div') : document.createElement('h1'); if (isChallengeCompleted) { jawHeading.classList.add('challenge-description-header'); const challengeTitle = document.createElement('h1'); challengeTitle.innerText = title; jawHeading.appendChild(challengeTitle); const checkmark = ReactDOMServer.renderToStaticMarkup( <GreenPass style={{ height: '15px', width: '15px', marginLeft: '7px' }} /> ); const completedChallengeHeader = document.createElement('div'); completedChallengeHeader.innerHTML = checkmark; jawHeading.appendChild(completedChallengeHeader); } else { jawHeading.innerText = title; } </ins> const domNode = document.createElement('div'); const desc = document.createElement('div'); const descContainer = document.createElement('div');