[course] "Complete Chapter" button fails to become enabled in end-of-chapter quizzes when framework is TF

[jake-albert]

Issue description

The button should become enabled once all questions say "You got all the answers!".

Only quizzes with framework selection have this issue (so chapter1's quiz is fine), and only when TensorFlow is selected, as in below for chapter2:

2023-10-16.8.57.56.mov

Reproducible at least in Chrome, Edge, and Safari (all on desktop).

Is this a fatal issue?

No — you can use the sidebar menu to move to any chapter at any time. But it can cause confusion for course takers, making them wonder if there's anything more they need to do on the page when they're actually already done.

Suspected cause

Looking through the code, it seems likely what is happening is that questions corresponding to the PyTorch framework mount shortly before "tf" is read from the URL query parameter, resulting in some unanswerable questions remaining in the answers store in a non-correct state.

Here is the answers store:

doc-builder/kit/src/lib/stores.ts

Lines 25 to 26 in 808766b

	// used for Question.svelte
	export const answers = writable<{ [key: string]: { correct: boolean } }>({});

And here is where a mounting question updates the store to have an initial, non-correct state for itself:

doc-builder/kit/src/lib/Question.svelte

Lines 22 to 24 in 808766b

	onMount(() => {
	$answers = { ...$answers, [id]: { correct: false } };
	});

Whether questions for PyTorch or questions for TF are mounted is determined by the fw value, which is set initially for PyTorch but then overwritten to TF when "tf" is extracted from the URL:

doc-builder/src/doc_builder/convert_md_to_mdx.py

Lines 55 to 59 in 808766b

	let fw: "pt" | "tf" = "pt";
	onMount(() => {
	const urlParams = new URLSearchParams(window.location.search);
	fw = urlParams.get("fw") || "pt";
	});

In the time between line 55 and when the onMount callback runs to set fw to "tf" in line 58, we can observe that not only is the FrameworkSwitchCourse in the "pt" state, but also that questions for PyTorch, like for #5, do in fact mount and are shown briefly:

2023-10-16.9.48.59.mov

Proposed Solutions

Note: I'd be happy to submit a PR when I have time! But unfortunately I've had trouble running doc-builder preview or doc-builder build on my machine to actually try out these fixes, so I'll have to open a separate issue to address that first.

1. A somewhat elegant solution would be possible if the PyTorch questions trigger an onDestroy when they are replaced by the TF questions and disappear. I haven't worked with Svelte so I'm not 100% confident that the lifecycle events work as I think they do, but as long as the questions are being unmounted from the DOM instead of just being hidden, then onDestroy would be called, no? If true, then right under the onMount in Question.svelte we could add an onDestroy that removes the key-value pair for the unmounting question from answers.

2. If that's not possible, perhaps it would work to simply clear the answers store (reset to {}) whenever the fw value is changed based on the URL query parameters? For instance, by importing the store and resetting it inside the onMount in the script from convert_md_to_mdx.

3. I suppose the issue can also be solved by eliminating the period of time where fw is briefly set to "pt", but this seems more complicated and I'd have to actually run the code locally to get a better idea of what exactly that would entail.