Congrats the user

[GaetanRdn]

It could be great to detect if the user has succeed the exercice and congrats him.

[Nemikolh]

Hey @GaetanRdn! I think this relates to #178 as right now we don't have any way of knowing that the exercise was completed successfully.

Once we have access to this information I think we will expose that through the tutorialStore and so you will be able to congratulate the user by doing something along the lines of:

import { tutorialStore } from 'tutorialkit:store';
import { useStore } from '@nanostore/react';

export default function Congratz() {
  const completed = useStore(tutorialStore.lessonSolved);

  if (!completed) {
    return null;
  }

  return (
    <div className="fixed inset-0 flex items-center justify-center z-50">
      <div className="absolute inset-0 bg-black opacity-50"></div>
      <div className="bg-white p-8 rounded-lg shadow-lg z-10 max-w-md w-full">
        <h2 className="text-2xl font-bold mb-4">Congratulations!</h2>
        <p className="text-gray-700 mb-6">You've successfully completed the lesson. Great job!</p>
      </div>
    </div>
  );
} 

And then in a lesson:

---
type: lesson
title: Foo
---

import Congratz from '@components/Congratz';

<Congratz />

# Welcome to Foo! 

... 

[GaetanRdn]

Is it possible to make a diff between the files that the user can modify and the files from the solution?

[Nemikolh]

I don't think we expose that information right now.

Now with that said, I don't think doing a diff would be very helpful as it's not a correct metric to know whether a lesson was completed successfully or not for programming problems. (If you aren't writing one, then this doesn't apply).

The only reliable way is to test the code (although even then it could be buggy). Doing a diff, even one that ignores whitespaces, comments, different name for identifiers, dead code removal, it would still fails for two programs that are both correct but use different solutions.

[AriPerkkio]

Here's live example: https://stackblitz.com/~/edit/stackblitz-starters-b9ie5x?file=src/components/LessonChecker.tsx&file=src/templates/default/check-lesson.mjs&file=src/content/tutorial/1-basics/1-introduction/1-welcome/content.mdx