TRM Exam Website:

The idea is to create a exam website where the data will be stored in google sheets. Inorder to do so, I am going to use technolgies like:

HTML
BOOTSTRAP CDN
JQuerry CDN
JavaScript

Structure of Files

index.html:

This is main cover page of the website

success.html:

This page shows up only when the user is done with the exam

main.css:

This file provides us with the styling of cover page and success page

cse:

This is folder stores all the question papers. One of the question paper is selected based on the input provided by user in cover page. Eg: User is in 2nd year and prefered field is programming then the question paper will be either cse-2-alpha.html or cse-2-beta.html, as alpha beta are 2 sets and are decided randomly

images:

The background gif of cover page and success page is stored in this folder

Submiting a form to Google Sheets

First, Create the Spreadsheet

Go to Google Sheets and Start a new spreadsheet with the Blank template. Disclaimer: It doesn't really matter how you name the file.
On the first row, write column names and note that these name should match with the input name tag in the form.

Create a Google Apps Script

Click on Tools > Script Editor… which should open a new tab.
Name the script Submit Form to Google Sheets or however you want for you to remember what the script does.
Delete the function myFunction() {} block withing the Code.gs tab.
Paste the following script in its place and File > Save:

var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

Run the setup function

Now, go to Run > Run Function > initialSetup to run this function.
In the Authorization Required dialog, click on Review Permissions.
Sign in or pick the Google account associated with this project.
You should see a dialog that says Hi {Your Name}, Submit Form to Google Sheets wants to...
Then click Allow

Add a new project trigger

Click on triggers > Current project’s triggers.
In the dialog click No triggers set up. Click here to add one now.
In the dropdowns select doPost
Set the events fields to From spreadsheet and On form submit
Then click Save

Publish the project as a web app

Click on Deploy > Deploy as web app….
Set Project Version to New and put initial version in the input field below.
Leave Execute the app as: set to Me(your@address.com).
For Who has access to the app: select Anyone, even anonymous.
Click Deploy.
In the popup, copy the Current web app URL from the dialog.
And click OK.

Input your web app URL

Open the file named index.html. On line 7 replace <SCRIPT URL> with your script url:

<form name="submit-to-google-sheet">
  <input name="email" type="email" placeholder="Email" required>
  <button type="submit">Send</button>
</form>

<script>
  const scriptURL = '<SCRIPT URL>'
  const form = document.forms['submit-to-google-sheet']

  form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
  })
</script>

As you can see, this script uses the Fetch API, a fairly new promise-based mechanism for making web requests. It makes a "POST" request to your script URL and uses FormData to pass in our data as URL parameters.

Adding form data

To capture data, you'll just need to create new columns with titles matching exactly the name values from your form inputs. For example, if you want to add first and last name inputs, you'd give them name values like so:

<form name="submit-to-google-sheet">
  <input name="email" type="email" placeholder="Email" required>
  <input name="firstName" type="text" placeholder="First Name">
  <input name="lastName" type="text" placeholder="Last Name">
  <button type="submit">Send</button>
</form>

Credits ❤️ :https://dev.to/omerlahav/submit-a-form-to-a-google-spreadsheet-1bia

index.html
success.html
stylesheets
	main.css
cse
	cse-2-alpha.html
	cse-1-beta.html
	...
images

zarrar1607/TRM-Exam-Website