Quiznode: AI-powered Quizzes for Hashnode Articles
Hi there!👋
I’m Filip, an enthusiastic software development student👨🎓
My passion for learning led me to pursue a path in software development. I believe software has the incredible potential to revolutionize the learning experience, making it more accessible, engaging, and rewarding. With the rapid advancements in AI and other technologies, I'm excited about the potential to make a positive impact in education, and I’m eager to be a part of this transformation.
Why did I start this blog? Mainly for two reasons. First, it keeps me motivated. As an aspiring software developer, I encounter 🐞 every day and sometimes feel like giving up. Writing about my side projects and what I’m learning keeps me going💪 Second, writing helps me organize my thoughts and grasp complex topics more thoroughly. If my posts help someone else too, that’s a huge win!
As a software development student, I enjoy reading articles on Hashnode. These articles are a great and engaging source of information. But do you know what could be useful after reading a technical article? A quiz to see how much I understood the topic. That's why I created Quiznode - a Chrome extension that uses ChatGPT to quiz you on any Hashnode article.
👉 Demo
Planning and research📚
ChatGPT and OpenAI API🤖
Because I wanted to have a quiz for any Hashnode article, the first problem was obvious: who would come up with these quizzes? 🤔 I don't think the authors, who are already providing valuable information, would want to spend even more time creating quizzes.
Since I had been trying out ChatGPT recently, I wondered whether a chatbot could come up with multiple-choice questions based on an article. To test that, I copied a bit of text from Wikipedia and asked ChatGPT to generate multiple-choice questions. In my opinion, the chatbot did pretty well:
After testing it on other articles (including Hashnode articles), I concluded that ChatGPT is good enough to be given the task of creating multiple-choice questions. For my app to communicate with ChatGPT, I would have to use the OpenAI API.
After creating an OpenAI account, I wanted to get familiar with it. Here are the two resources I used:
▶️ OpenAI tutorial series by the Net Ninja
Hashnode API
But how would I get the text of the Hashnode article? Fortunately, Hashnode has a public API through which I can get the markdown of any article. Since it is a GraphQL API, which I had never used before, it was also a chance to learn something new. I watched a tutorial series about GraphQL (also by the Net Ninja), after which I tried making several queries in Hashnode's GraphQL playground.
Chrome extension
My initial idea was that Quiznode would be a web app. But I ran into one big issue - how would the user choose an article they wanted to be quizzed on?
To fetch the markdown of an article, I need to know the host and the slug. Both values can be retrieved from the URL. My idea was that the user would copy the URL and paste it into a text field in my app. Although I was initially somewhat happy with this idea, after some thought, I concluded that this wasn't too practical. The user would:
Read an article
Copy the URL
Open a new tab
Navigate to my web app
Paste the URL...
There were just too many steps.🤷
I wanted to scratch the whole project when I came up with a potential solution: to turn Quiznode into a Chrome extension. This way, when the user finishes reading an article, they just click on the extension, and a quiz pops up right in the window without having to leave the page or copy anything.
Since I had never built a Chrome extension before, I had to do some learning first. Fortunately, the official documentation is well-written and easy to follow. After going through several tutorials, I decided to test myself by building two smaller projects - each one also testing some features that I needed for my Quiznode extension.
Simple Quiz Extension (🔗GitHub)
First, I built a simple quiz extension. I was mainly concerned about the popup UI. Fortunately, building the UI for a Chrome extension is very similar to creating a normal website (using HTML and CSS). I also used the Open Trivia Database API for generating random questions.
By building this extension, I felt confident about creating an interactive quiz extension.
Is it Hashnode? (🔗GitHub)
One problem I encountered was determining whether an article is a Hashnode article. I thought I would simply search the URL to see whether it includes 'hashnode.com'. But then I realized that one of Hashnode's most popular features is allowing authors to publish articles on their own domain. So, I couldn't determine whether an article comes from Hashnode from a URL such as this:
https://blog.mansueli.com/unleash-powerful-webhooks-with-pgwebhook
This troubled me for a while. Fortunately, after going through the contents inside the <head> tag, I came across tags that seem to be on every page that contains a Hashnode article. One of these tags I decided to use is this one:
<link rel="author" href="https://hashnode.com/@username" />
To test this, I created an 'Is it Hashnode?' extension. All this extension does is determine whether a page includes a Hashnode article or not (by looking for the above link tag). If so, it changes its icon to green; otherwise, it changes to red.
👉 Demo
By building this extension, I learned how to determine whether the user is currently on a page containing a Hashnode article and how to change the extension's icon. Both of these features were needed for my Quiznode extension.
Design🎨
After doing some research and learning, it was time to start creating the actual Quiznode Chrome extension. Because I am not a UI designer, I wanted to keep the design simple and easy to use (and easy to implement). I opened up Figma and sketched a couple of ideas. After some tweaking, I ended up with the following design:
Build process🏗️
Because I had tested many features of Quiznode by building the two "smaller" extensions, the build process was quite straightforward.
First, I implemented the 'Is it Hashnode?' feature and ensured that the extension is only enabled on pages containing a Hashnode article. If not, the icon changes color to gray, and the popup window is disabled.
Next, I built the UI and implemented the quiz logic. For this, I just hardcoded sample questions.
The final part was to replace the sample questions with the questions generated by ChatGPT. Because I changed my plans from a web app to a Chrome extension, I have access to the HTML of the page, and I could theoretically extract the text of the article from the page itself. However, I decided to stick with the Hashnode API, which seemed like an easier and more reliable option. The process of creating quiz questions could be summarized as follows:
Get the host and slug from the URL.
Send a request to the Hashnode API to obtain the markdown of the article.
Send a request to the OpenAI API, asking ChatGPT to come up with multiple-choice questions based on the markdown.
Process ChatGPT's reply.
To send requests to the OpenAI API you need to first generate a secret key. Although I could send requests to the OpenAI API from the client side, it would be dangerous as my secret key could be exposed. Because of that, I created a NodeJS backend script, which would handle OpenAI requests while keeping my secret key safe.
After getting back ChatGPT's reply, I would turn the text into an array of questions using regular expressions.
Finally, to test my backend API, I used the Thunder Client VSCode extension, which is a Postman alternative built right into VSCode.
And after some bug fixing, I ended up with a working Quiznode extension.🎉
Conclusion
Even though Quiznode is not a complex Chrome extension by any means, it was a fun project and a great learning experience. By building Quiznode, I learned:
How to create a Chrome extension
Different types of scripts (content, background, popup) and how to communicate between them
How to create a popup window
How to disable the popup window
How to change the appearance of the extension's icon
How to test the extension locally
How to use the OpenAI API for chat completion
How to use GraphQL queries and the Hashnode API
How to use Thunder Client to test API endpoints in VSCode
Although I haven't published the extension, you can try it yourself by cloning my repository🔗
