/qwiklabs-completed-labs-tracker

Label completed labs and quests on Qwiklabs

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

Qwiklabs Lab Completion Tracker

๐Ÿ’ก Label completed quests and labs on Qwiklabs webpages

Qwiklabs is a great online self-paced learning platform for getting hands-on experience of the Google Cloud Platform. It has over 400 hands-on labs and quests for learn and practice.

As a Qwiklabs user, I figure out it is messy and damp to look up unenrolled quests or incompleted labs from the Qwiklabs Catalog page or Search Results. I desired to make a straight-forward way to identify the catalog items, by adding a green check-circle next to those completed.

GitHub release (latest by date) License: GPL v3 GitHub Release Date GitHub issues

๐ŸŽฏ Objectives of this project

  • To develop a handy way to implement the enhancement to Qwiklabs website in a web browser.
  • To indicate completed labs and quests in Qwiklabs Catalog pages, thereby easier to inspect the self-learning progress and look for unenrolled quests or incompleted labs.
  • To design a location to store and update the name list of the completed items.

For more information, please read this post on my GitHub Pages.

chriskyfung.github.io

๐Ÿ›ด How to Use

This script requires an userscript manager to run it in your browser, such as Tampermonkey for Google Chrome. Click on the following button to download and install the script via your userscript manager.

Install Script with Tampermonkey

๐ŸŽ Features

๐ŸŒˆ on Home pages

Retrieve the local records and annotate each card in โ€œMy Favoritesโ€, โ€œFeatured Learningโ€, and โ€œWhatโ€™s Hotsโ€ sections with badges.

  • Screenshot:

    badges added to What's Hot cards

๐ŸŒˆ on Catalog pages

Retrieve the local records and annotate each lab and quest item as the following:

  • Label the completed labs and quests with a green check-circle.

  • Highlight any new labs and quests that you have not yet explored in yellow color.

    Screenshot of a Catalog page

๐ŸŒˆ on Quest pages

  • Automatically add a record for the quest or update the info to the local database
  • Add a green check-circle at the end of the page title if the quest is completed.

๐ŸŒˆ on Lab pages

  • Automatically add a record for the lab or update the info to the local database.

  • Add a green check-circle at the end of the lab title if the lab is completed.

    Screenshot of a Lab header

๐ŸŒˆ on Profile page

  • Annotate each table row in Activities tab with colors.

  • Offer pagination links for you to view all previous activities.

  • One-click update the labs and quests status from the activity table to your browser database.

  • Show ๐Ÿ” quick links to search activities that are โš  mismatched with database records.

    Batch Update Activities to Your Database

    Look Up Your Older Activities With Pagination Links

    Investigate Conflicting Records with Quick Search


๐Ÿ‘€ Future Plans

[ ] Sync IndexedDB across computers (#7)

๐Ÿ’— Support Me

Would you like to buy me a coffee? I would really appreciate it if you could support me for this projects.

Buy Me A Coffee

๐Ÿค Contributing

Pull requests for new features, bug fixes, and suggestions are welcome!

โš– License

Distributed under the GNU General Public License v3.0