Skip to content

xargon666/Google-Sheet-Quiz

 
 

Repository files navigation

Google-Sheet-Quiz

Google-Sheet-Quiz is a Quiz Generator that serves as a free alternative to "Form Builder for Google Sheets™". This project utilizes vanilla HTML, CSS, and JavaScript to create quizzes from data stored in Google Sheets.

Features

  • Vanilla JS: I thought it would be a useful excercise to avoid any frameworks for this simple project.
  • Google Sheets Integration: Store quiz questions and answers directly in Google Sheets for easy management.
  • Local Storage: Retains previous quiz data in localStorage, enabling users to resume quizzes later from the same browser and device without hardcoding links in the HTML or relying on a backend.

App Functionality

  • Add, Edit and Delete quizzes, saved in your device web browser.

...More features to come!

Using the App

Find the site online hosted on Netlify.

Netlify Status

You can also download or clone this repo, and run the site locally straight out of the box.

Adding a Quiz

  1. Create a New Google Sheet using headers found in the template. Enter your quiz data including: questions, answers, and correct answers. Images and Points are optional (defaults to 1 point per question).

Step 1 image

  1. When you are happy with the data, click the Extensions tab, and select Apps Script.

Step 2 image

  1. Add the code from the code.gs file found in the repo. Name the project if desired.

Step 3 image

  1. Now click Deploy and select New deployment

Step 4 image

  1. Click the cog icon and select Web appropriate

Step 5 image

  1. Give the deployment a description if desired, set 'Who has access' to 'Anyone', then click Deploy.

Step 6 image

  1. You will receive a prompt asking for authorization. Select Authorize access.

Step 7 image

  1. Select your google account.

Step 8 image

  1. If presented with the 'Google hasn't verified this app' screen, to proceed click Advanced.

Step 9 image

  1. Then click the link 'Go to [name here] (unsafe)'

Step 10 image

  1. Click Allow

Step 11 image

  1. Finally we have our Web app link! Click copy.

Step 12 image

  1. Navigate to the quiz app and add a new quiz. Enter your new link in the 'Google Sheets Link' field on the Add New Quiz page on the site.

Step 13 image

Give your quiz a name, a passing score, and submit.

Enjoy your new quiz!

Adding a Quiz on Mobile

Adding a quiz on mobile can be done, but it's trickier due to the lack of certain features in the Googlesheet mobile app.

I reccomend following the above steps on a desktop computer, then when you get to Step 13 send the link from the desktop device to your phone via a cross platform app.

You could do this in many ways, for example:

  • Send a Whatsapp message to yourself.
  • Use a note taking app like Google Keep.

Attribution

About

a Quiz website project, using vanilla JS and Google Sheets for a database.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 58.0%
  • HTML 22.2%
  • CSS 19.8%