2. Database

I’m really excited about this code. It’s an example of code I couldn’t find elsewhere on the internet.

The key things in the code (look for the comments in the  code to find where they are):

  1. How to make it mobile first/responsive through Bootstrap (there’s some special code that allows the zoom to be corrected).
  2. How to change pages on a Google script – that’s pretty basic but not straight forward. The other ways I’ve seen on the internet did not work well.
  3. Using localstorage to speed things up. This is a step up from the old way of using cookies.
  4. Allowing the app to be put into an iframe, which means you can give the web app an easy to read address.
  5. Just reading from a google sheet so easily, is amazing.
  6. Using scriplets to access additional style and script sheets.
  7. Keeping all the media (images, audio etc) totally hosted by Google Drive which means that such an app will be super scaleable (so that millions of people can use it at the same time) and totally free to run (instead of costing millions of $s to run the app).

This code will work like this.

In the last example we accessed a google spreadsheet but we didn’t use like a public database that anyone could read and write to yet not see the database itself. In this example you will see how we can replace the traditional database.

To get this project working there are 2 steps:

Step 1:

Create a Google sheet. Input the name of the quiz in the first row and column. Continue the column with a question, then the correct answers, then 3 incorrect answers. Continue this pattern with more question/answer sets. Rename the sheet ‘questions’. See below:

Add a new¬†sheet and rename it ‘users’. Leave it blank.

Step 2:

Copy paste the code from this project.

And change the spreadsheet ID in the serverscript.gs file.

The demo app reads and writes to the spreadsheet so you need to share the spreadsheet and allow it to be edited. To do this press Share > Advanced > edit from the dropdown. Choose the allow edit option.

Now it’s ready for action!