DEV Community

Sharad Raj (He/Him)
Sharad Raj (He/Him)

Posted on

Add Quizzes 📃 to your Static Site using this Open Source Web Component 😁😁

Hi Guys! 🤓

I've created a Web Component for Quiz using Vanilla JS.
I've made it open source for the community.

Also the implementation is dead simple, just like other web components.

So here is how it looks:

Snap

LIVE DEMO

https://sharadcodes.github.io/quizzo_web_component/example/

How to use ????

Questions are stored in json file that has following format

[
    {
        "que": "Which among the following is not an operating system ?",
        "opt": [
            "Ububtu",
            "MacOS",
            "Windows",
            "Android"
        ],
        "ans": 3
    },
    {
        "que": "Is Windows good",
        "opt": [
            "Yes",
            "No"
        ],
        "ans": 2
    }
]    
Enter fullscreen mode Exit fullscreen mode

For more info visit the Repo at https://github.com/sharadcodes/quizzo_web_component

Just paste the following script in the head or just before the end of the body tag

<script src="https://sharadcodes.github.io/quizzo_web_component/src/quizzo_web_component.js" async></script>
Enter fullscreen mode Exit fullscreen mode

Now inside the body paste this

  <!-- add the tag with all attributes -->
    <quizzo-web-comp
      json-file="./ques.json" 
      name="This is a demo quiz"
    />
Enter fullscreen mode Exit fullscreen mode

That's it 🤩 .... And you are good to go !!!!!!


ALL LINKS ARE HERE:

Repo: https://github.com/sharadcodes/quizzo_web_component
Live Demo: https://sharadcodes.github.io/quizzo_web_component/example/

Discussion (2)

Collapse
easrng profile image
easrng

Your quiz is wrong. Linux is a kernel, not a full OS. Windows, however is.

Though I 100% agree that Linux is better than windows.

Collapse
sharadcodes profile image
Sharad Raj (He/Him) Author • Edited on

😂 I know it's a kernel forgot for a while