class: center, middle, bg-info, text-light
# Tutorial on Google Script
<hr class="bg-light">
## Cyrus Ngan
---
# Objectives - Mock Interview Workshop
- Create a google form
- Application for Mock Interview Workshop
- `User` can choose his / her name in a list
- User can apply at most .mark[**_5 courses_**] for the mock interview
1. `User` should enter Course ID in JUPAS
2. `User` should enter link of the course information
- 10 pages slide to complete the simple tutorial
---
class: center middle bg-dark text-light
# Prerequiste
## JavaScript
---
# Free resources
## Start from scratch
- [Harvard University CS50.tv][@1]
- [Codecademy][@2]
- HTML (3Hrs) .badge.badge-info[Create Webpage]
- CSS (11hrs) .badge.badge-info[Style Webpage]
- JavaScript (5hrs) .badge.badge-danger[Interaction with Webpage]
- Command Line (3hrs) .badge.badge-info[Navigate in Unix system]
- [freeCodeCamp][@3]
- [Google App Script][@4]
---
# Begin with the End in Mind
## Final product
.scroll.h-75[
```js
var form = FormApp.openByUrl("Paste_the_form_id_here")
var students = [
"Apple",
"Ball",
"Cat",
"Dog",
"Egg",
"Fan",
"Goat",
"Hand",
"Indian",
"Jam"
]
function printTitle() {
var title = form.getTitle() // get the title of the form
Logger.log(title) // print the title in logger
}
function cleanup() {
form.getItems().forEach(function(item) {
form.deleteItem(item)
})
}
function addStudentList() {
form.addListItem()
.setTitle("Please select your name") // set title of the question
.setRequired(true) // become a required question
.setChoiceValues(students) // set the list to choose
}
function askCourseInfo() {
// loop the contents 5 times
for (i = 0 ; i < 5 ; i++) {
// add section header for each question
form.addSectionHeaderItem().setTitle("Course " + (i + 1))
// 1 line text input
form.addTextItem().setTitle("Course ID")
// multiple line text input
form.addParagraphTextItem().setTitle("Course Information")
}
}
function fullRun() {
cleanup()
form.setTitle("Mock Interview Application") // set title of the form
addStudentList()
askCourseInfo()
}
```
]
---
class: row
.col-3.bg-light.sidebar[
### Tutorial
- Create a form
]
.col[
- Open Google drive
- .text-danger[**Copy**] the link of the google form
]
---
class: row
.col-3.bg-light.sidebar[
### Tutorial
- Create a form
- Open Script Editor
]
.col-9[
- Open script editor
- Open API reference
- `Help` -> `API reference`
- [Forms Service | Google Developers][@5]
- You may find all API in this documentation
- Insert the following code **before** the `function myFunction () {}`
``` js
var form = FormApp.openByUrl('paste_the_link_of_the_form_here')
```
- Inside the curly bracket of `myFunction`
- Copy and paste the following code
- Change the function name `myFunction` to `printTitle`
``` js
function PrintTitle() {
var title = form.getTitle() // get the title of the form
Logger.log(title) // print the title in logger
}
```
]
---
class: row
.col-3.bg-light.sidebar[
### Tutorial
- Create a form
- Open Script Editor
]
.col-9[
## Result
```js
var form = FormApp.openByUrl("paste_the_link_of_the_form_here")
function printTitle() {
var title = form.getTitle() // get the title of the form
Logger.log(title) // print the title in logger
}
```
- Go to `View` and `Logs` to see the log message.
- Printing title is not really fun, let's resume!
]
---
class: row
.col-3.bg-light.sidebar[
### Tutorial
- Create a form
- Open Script Editor
- `cleanup`
]
.col-9[
Before we write something powerful, we need a `cleanup` function
to clean up all codes if we accidently mess up the form. Append the following
code to the script editor
``` js
function cleanup() {
form.getItems().forEach(function(item) {
form.deleteItem(item)
})
}
```
- Choose `cleanup` function to run in the dropdown list.
- Go back to .text-danger[form], see if all questions have already deleted.
]
---
class: row
.col-3.bg-light.sidebar[
### Tutorial
- Create a form
- Open Script Editor
- `cleanup`
- `askStudentName`
]
.col[
Now we start to create some interesting question. First we assume you have an
excel file that stores student information like the table listed below
In the output box of the website you will see the result should look like this
```js
["Apple", "Ball", "Cat", "Dog", "Egg", "Fan", "Goat", "Hand", "Indian", "Jam"]
```
Copy the output and insert it in Script Editor just after the first line
and begin with `var students = `
```js
var form = FormApp.openByUrl(...)
var students = ["Apple", "Ball", "Cat", "Dog", "Egg", "Fan", "Goat", "Hand", "Indian", "Jam"]
```
We here define an array(list) of students for create a list of students
for the form.
]
---
class: row
.col-3.bg-light.sidebar[
### Tutorial
- Create a form
- Open Script Editor
- `cleanup`
- `askStudentName`
]
.col-9[
Now your code should look like this
```js
var form = FormApp.openByUrl("paste_the_link_of_the_form_here")
var students = ["Apple", "Ball", "Cat", "Dog", "Egg", "Fan", "Goat", "Hand", "Indian", "Jam"]
function printTitle() {
var title = form.getTitle() // get the title of the form
Logger.log(title) // print the title in logger
}
function cleanup() {
form.getItems().forEach(function(item) {
form.deleteItem(item)
})
}
```
]
---
class: row
.col-3.bg-light.sidebar[
### Tutorial
- Create a form
- Open Script Editor
- `cleanup`
- `askStudentName`
]
.col-9[
Next we create a function for create list of student. Append the code below
to the bottom of the script.
```js
function addStudentList() {
// map method change the content in the students array
form.addListItem()
.setTitle("Please select your name") // set title of the question
.setRequired(true) // become a required question
.setChoiceValues(students) // set the list to choose
}
```
Choose the function `addStudentList` to run, then go back to form
if the list question is created properly.
Run `cleanup` to cleanup the form if you can create the form successfully.
]
---
class: row
.col-3.bg-light.sidebar[
### Tutorial
- Create a form
- Open Script Editor
- `cleanup`
- `askStudentName`
- `askCourseInfo`
]
.col-9[
We have gone through the most difficult parts, now leave the easier steps.
Create an `askCourseInfo` function to create 2 questions at once. Append the
code below to the bottom of script
```js
function askCourseInfo() {
// loop the contents 5 times
for (i = 0 ; i < 5 ; i++) {
// add section header for each question
form.addSectionHeaderItem().setTitle("Course " + (i + 1))
// 1 line text input
form.addTextItem().setTitle("Course ID")
// multiple line text input
form.addParagraphTextItem().setTitle("Course Information")
}
}
```
Run `askCourseInfo` and go to form to see the result.
If you get the proper result, then run `cleanup` to cleanup the form.
]
---
class: row
.col-3.bg-light.sidebar[
### Tutorial
- Create a form
- Open Script Editor
- `cleanup`
- `askStudentName`
- `askCourseInfo`
- `fullRun`
]
.col-9[
Now we run all function altogether. Append the following code to the script.
```js
function fullRun() {
cleanup()
form.setTitle("Mock Interview Application") // set title of the form
addStudentList()
askCourseInfo()
}
```
Run the `fullRun` function and go to the form to see the result.
]
---
class: center middle bg-dark text-light
# What do you think?
---
class: center middle
## .text-danger[♥] Thanks .text-danger[♥]
<!-- reference links -->
[@1]: http://cs50.tv/2017/fall/
[@2]: https://www.codecademy.com/learn
[@3]: https://www.freecodecamp.org/
[@4]: https://developers.google.com/apps-script/
[@5]: https://developers.google.com/apps-script/reference/forms/