Matching Quiz Web App

Sunday, October 1st 2023

About The Script

I've been working on putting together a matching quiz app as part of an upcoming feature on my tv and movie car blog. But I wanted to make it reusable by myself and others. How did I pull that off? Well with the power of JSON! Wow, that really does sound like something He-man would say. But anyways. I wrote a basic script to build the quiz using some classes and objects. Then added in some objects to validate and score the quiz. To make it reusable I added in a parameter in the query string to allow the user to pass in a URL for the JSON configuration file (details below). When the parameter "source" is passed the script will load the JSON configuration file from that path and setup the quiz.

Build Your Own Quiz

Building your own quiz is pretty simple. All you need to do is create a JSON configuration file using the template below. Upload the completed JSON configuration file to a public site that allows CORS. I used npoint.io. If using npoint.io, once you've upload the file they'll issue you a special URL. Save this address. Now for the magic. Copy the following URL and replace "" with the special address you saved earlier. Open up the new address in your browser and the quiz will be live. You can share this link with anyone. Or in my case I'll be embedding it in my blog in an iframe like above.

Quiz URL: https://mattkendrick.com/matching-quiz/index.html?source=

Example: https://mattkendrick.com/matching-quiz/index.html?source=https://api.npoint.io/0d89ecf06270394238aa

JSON Configuration Template 
{
    "title": "Adam Sandler Characters",
    "instructions": "Match The Character To The Movie.",
    "questions": [
        {
            "left": "Billy",
            "right": "Billy Madison"
        },
        {
            "left": "Happy",
            "right": "Happy Gilmore"
        },
        {
            "left": "Sonny",
            "right": "Big Daddy"
        },
        {
            "left": "Bobby",
            "right": "Water Boy"
        },
        {
            "left": "Robbie",
            "right": "The Wedding Singer"
        },
        {
            "left": "Lenny",
            "right": "Group Ups"
        }
    ]
}
Disclaimer

Feel free to copy and/or use this code at your own risk. We are not responsible for damages that may occur.

  0

Categories: Portfolio

Tags: apps, javascript