[FEAT] : Gamify JSON Schema Learning with Scoring & Solutions

[Yashwanth1906]

Currently, the JSON Schema learning tour provides structured lessons, but there is no motivation for users to engage deeply with the content. Users can quickly copy-paste solutions without actually understanding the material. Additionally, without a scoring system, there is no incentive to complete the tour interactively.

Feature Proposal:

1. Scoring System:

   • Assign points for completing each section of the tour.
   • Implement a solution penalty: If the user opens the solution section, deduct points from the total score.
   • Award badges/certificates based on completion levels.

2. Solution Section with Explanations:

   • Having a correct answers section for the users who get stuck and a step-by-step explanation of the solution.

3. Restrict Copy-Pasting in the Editor:

   • Disable copy-paste functionality to ensure users manually type their answers, reinforcing learning.
   • Add a warning message when users attempt to paste code.

Are you working on this?

Yes

[Yashwanth1906]

@JeelRajodiya give me some suggestions to this feature addition? Is it a good feature add on in our tour?

[JeelRajodiya]

@Yashwanth1906 this is a good idea, Can you please give some examples of sites were they have such gamification? Moreover, We have a Figma file in the ReadME, clone and modify that to properly explain the idea. Can you break down this issue into smaller sub-tasks?

relevant issue #78

[Yashwanth1906]

@JeelRajodiya SoloLearn is a good website for learning stuffs which uses similar gamification method, deduce score when the solution is viewed and the Solution Explanations are done in many platforms like Leetcode, CodeNinja, etc.

[Yashwanth1906]

We can breakdown the above idea into three main features.

1. Implementing a scoring for completing the chapters.

   • Each questions carry 2 points . There are total of 44 questions which is equal to 88 points.
   • Each Chapter completion will carry 1.5 points. There are total of 8 chapters which is equal to 12 points.
   • So total 100 points and points should be mentioned in the certificate.
   • Each solution open can deduce 1 points for each questions and we should limit the no.of.solution opens for a day.
   • The score and the chapters completed should be stored in local storage.
   • We should display the score on the UI.

2. Solution Section with Explanation.

   • We need to show the Solution for the particular question as mdx file for each question. (The solution adding can be split among people)
   • There should be ui button show solutions in the editor
   • A pop need to be shown when the show solution is clicks the show solution button that 1 point will be deduced.
   • Need to write a proper explanation for the solutions.

   This second task can be split for the total no.of.questions available.

3. Copy paste avoidance:

   • Enable copy and paste option in the code editor.
   • If they try to paste something show a pop up somewhat that questions them is it right to copy? 😅

This is the complete breakdown of the issue. Would like to clarify more if needed @JeelRajodiya

[AQIB-NAWAB]

@Yashwanth1906 I have suggestion for the view solution issue. Instead of directly add the code into editor we can open up the pop with valid code and don't allow user to copy that code (adding a gradient overlay).

In this way we are presetting the functionality and allow users to see solution without any copy/paste submission.

I hope this help in engaging the users with tour.

Thanks

[Yashwanth1906]

@AQIB-NAWAB It seems like a good idea we can do that for the view solution. A case where users try to copy from ai, there we should disable paste on the code editor.

What are ur views about this @JeelRajodiya .
Thanks

[JeelRajodiya]

@Yashwanth1906
Can you implement your suggested changes in the Figma file (you can find that in the readme file). Make sure you keep the design consistent. Clone the Design file, Modify it and share it here. Then we can discuss the issue further.

[Yashwanth1906]

@JeelRajodiya I can rather show the basic demo of the ui in the website itself. Sry to say this, I don't know figma that much. So can i go with the above mentioned plan? I will show a demo ui within today

[Yashwanth1906]

Screen.Recording.2025-03-20.142744.mp4

This is the mock ui that i made for the proposed idea. Let me know any incites about this @JeelRajodiya .

[Yashwanth1906]

@JeelRajodiya Waiting for ur response...

[JeelRajodiya]

I am busy these days with my academics, We we proceed further when I get some free time. Thanks.

[Yashwanth1906]

@JeelRajodiya Are there any other code base maintainers for this repo?🙂

[JeelRajodiya]

@JeelRajodiya Are there any other code base maintainers for this repo?🙂

Officially it is just me in the tour,
The organization is run by volunteers, we can't really expect everyone to be available all the time.

[Yashwanth1906]

@JeelRajodiya I understand.. Let's discuss about this later . For time being can i work on other kinda features or any other bugs in the tour webiste?