GitGud

This is a relatively short and minor update compared to the previous updates or ships. However, with the Flavortown program nearing its end. I wanted to ship this project one last time and get long-term feedback or suggestions for this project.

In this update, I fixed some bugs to make the site more mobile-friendly, and I also enabled single and double quotes in the terminal to mimic real git commands more closely. (Shoutout to a Hack Clubber who recommended this fix in the last ship feedback!) In the prior version, only the command git commit -m "Recovered fragment" worked, but now both git commit -m "Recovered fragment" and git commit -m 'Recovered fragment' worked nicely. However, non-matching quotes won’t work (i.e., git commit -m "Recovered fragment' or git commit -m 'Recovered fragment")

Additionally, I also followed a suggestion in the previous ship and fixed the devlogs formatting to remove the “single text box” impression and make the whole text easier to read and comprehend. I am not really sure of what to add in the next updates since this project is already so well-developed and complete. So please share your suggestions or feedback for this project if you have any so I can further develop and improve this project. Thankyou <3

In this update, I further improved the mobile view by adding a run button beside the terminal input line to fix the bug where the submit button wasn’t appearing in mobile view. I also decided to remove the animation on/off button as there is already a similar button for the typewriter effect.

Another bug I fixed is the drag and drop question type. Previously, the drag and drop questions were less intuitive with no position indicator when the user dragged the chips and hovered over a certain position. With the addition of the new indicator, users can see where the chips will snap into place when they release. Moreover, the chips are now clickable, so clicking them will add them to the last position and clicking them from the answer box will return them back to the container area.

For the technicalities of this project, I added a new file named ARCHITECTURE.md in the GitHub repository inside the docs/ folder. You can read that documentation file to get a general idea of how the entire system works without needing to read all the code. Please note that I used AI tools and grammar correction tools to help fix my grammar and sentences since my poor grammar can make it hard for people to understand my writing. However, I wrote the original file manually and rechecked all the updated text.

First of all, I’d like to thank everyone for voting for my project and giving amazing feedback on the previous ships. Those feedback helped me find some edge case bugs, suggested new features, and gave me actual feedback into the learning experience. When I read the feedback from the last ship, a major concern was that the lessons were hard to follow for beginners even if the method is already engaging and interesting. To verify this, I tested the project with some of my firends (actual beginners) and they indeed had a hard time following the lessons. To rectify the problem, I’ve now added lessons before the review questions so users actually get the materials before being given a question. However, a side effect of this system is that it makes the review questions feel a bit too easy and less challenging. I overcame that by adding some test questions every once in a while with higher shard rewards and more tricky, thought-provoking questions to keep the challenge alive.

Another key update in this version is the improved mobile view to keep the site usable (at least for now). I’ll try to revamp it into a neat and seamless mobile-first app in the future so using it on a phone is more natural. I also finally fixed a ridiculously stubborn bug where the prologue overlay appears and blocks the question page on page refresh from the question page, making everything get stuck. For context, this was a very, very hard bug to fix (it took me around 3 days to do trial and error before finally fixing it) and I’m really proud of myself! I also fixed another edge case bug where users could click the hint button multiple times and get their shards deducted several times even when the hint was already shown. I blocked the hint button after the first click to fix this.

Another bug I fixed in this update is the map overlay and map sidebar. Previously, the map overlay only showed a list of all the levels and highlighted the completed levels, but now it works like a proper level shifter that allows people freely move back and forth as long as the level is unlocked. Unlocked levels are defined as the highest level completed plus one. We add one to the highest level to ensure that when people complete a level, they don’t need to repeat that same level just to continue their progress. This fix is also shown in the map sidebar in the desktop view.

This is my first update in a while. In this update, I have massively refactored the code and project structure of GitGud. For context, GitGud was initially intended to help people learn Git in an interactive way (in celebration of Git’s birthday). However, it turned out much better than I expected, so I decided to transform it into a fully customizable platform to help people learn any topic.

To make the whole project more maintainable/scalable, I refactored the project to use engine.js and config.js files instead of the prior script.js and chapters.js. The task splitting between those two files remains largely similar; the engine.js file handles the main computing and logic of the game, while the config.js file handles the content and learning materials.

The key difference is in the config.js file because it now stores styling data, such as CSS variables and colour palettes, in addition to stories and questions. This means anyone can use the project as a learning platform template by only modifying the config.js file to create their own questions and stories. (No need to modify the base JS logic or HTML document besides some minor changes)

Another change I made in this update is the improved onboarding tour highlight to dynamically adapt to the highlighted UI element (the previous version was not neat and had inconsistent border-radius). For the next update, I plan to improve some of the UX and UI to make the flow more seamless and more customizable (e.g., advanced controls like typing animation speed, and on/off in the settings panel). I’m also still continuously doing bug fixes to make the site more reliable.

In this update, I improved the spotlight effect for the onboarding process. It now has a highlight and shadow cutout to make the visuals look much better. I also fixed some bugs with the typewriter animation. Before this, the text got scrambled often because the recursive function was called incorrectly, but it is fixed now.

I also patched a bug where the overlay stayed on the screen and got stuck when the page was refreshed. Along with those fixes I did minor UI changes like adjusting the spacing and alignment of buttons and elements.

There is a new settings option where you can restart the lesson or the site onboarding. You can also delete all your current progress and restart from the basics by using the reset option and clicking the confirm button.

Right now the game only supports single player and does not have online data storage. This means all data and settings are saved in local storage. It is persistent so your data will not be lost when you close the browser tab. For the next update I will try to implement multiplayer support and add more learning paths. Based on feedback from the last ship, I also plan to add a direct language option. This will keep the same story but use simpler language to help people follow the narrative without needing advanced reading skills.

In this update, I added some more questions to help people master Git, and also added platform onboarding to help beginners use this website. In addition to extended questions and onboarding, I also fixed some bugs, such as the icon rendering errors in the website. In the next update, I plan to improve the onboarding visuals to create a better spotlight effect of the onboarding process.

In this update, I added more questions and expanded the story to include more topics and learning materials. I am also experimenting with different question types to keep the quiz fun and interactive. You will find some non-typical styles like matching, sorting or sequencing, and drag and drop alongside the usual (common question types) multiple choice, fill in the blanks, and terminal commands.

In the next update, I plan to add more visualizations of the process so people get a better understanding of how branches and Git operations actually work. I am also planning a multiplayer mode with a leaderboard. Though I still need to do some research and learn how to implement that part properly. Finally, I want to add a GitHub learning path as a related complement to the Git material.

This is the first devlog of GitGud. GitGud is a simple, story-based learning platform that teaches people how to use git in a fun and interactive way. I made this project to celebrate the 21st birthday of Git and to encourage more people to use it. This website is built using HTML, CSS, and JS, with questions embedded in the middle of the story. There are also explanations and examples after the user has submitted their answers to provide detailed, accurate information on the use of git. Moreover, there is also a field notes section on the side to help people with past topics as we progress through the story (to ensure players don’t forget basic commands in advanced levels). You can use this website by clicking the demo button directly.