Week4: 2/19 - 2/25

Goal for the week:

• Create a storyboard and figure out how the database should look like. (What needs to be stored for each category?).
• Create a simple database with just a few resources (Try two entries per category).
• Take a look into creating a website using Google Script.

Feb 21 Wed

Create a storyboard and figure out what inputs the users have to type:

Feb 23 Fri

• Created a Google site - "Independent Study'18" with two pages
• Created a Google Apps Script that is embedded to Google Site.

--> A script project represents a collection of files and resources in Google Apps Script, sometimes referred to simply as "a script". A script project has one or more script files which can either be code files (having a .gs extension) or HTML files (a .html extension). You can also include JavaScript and CSS in HTML files. The script editor always has one and only one project opened at any given time. You can open multiple projects in multiple browser windows or tabs.

• Tried to use Google Apps Script to display check boxes on the main page.

First attempt: Since the content is in HTML format, I tried using the regular format which is <input id="checkBox" type="checkbox">, but I got a warning message.

Second attempt: Tried making a google site with checkbox using td checkbox in HTML file. Resources can be found at: https://developers.google.com/apps-script/reference/ui/check-box. Tried to implement it, but noticed that the UIs service under Google Apps Script is deprecated since 2014 and is not supported anymore by Google.

Third attempt: Tried using gadgets. Gadgets are HTML and JavaScript applications that can be embedded in web pages such as Sites. These gadgets generate or pull external information into web pages. A gadget is a small .xml file that pass through information from another web site.

Even though gadget is not 100% feature I'm looking for, there was a sample code that could be found at: https://developers.google.com/google-apps/sites/gadgets/site_gadgets so tried implementing it with example gadget.

I created a gadget using the news.xml URL and it did not show the checkbox. Rather, it was supposed to display the news articles. Screenshot is below:

Feb 24 Sat

• Tried making a sample page to get familiarized with Google Apps Script by connecting the Google site to Google Spreadsheet. Resources found at: https://www.youtube.com/watch?v=galfOTzIRiw But the URL format is different, so cannot use the suggested format to generate a key.
• Triggers let Apps Script run a function automatically when a certain event occurs.

--> doGet() trigger runs automatically when a user visits a web app or a program sends an HTTP GET request to a web app.

--> doPost(e) where e is an event object that contains information about the context that caused the trigger to fire, runs when a program sends an HTTP POST request to a web app.

More details can be found at: https://developers.google.com/apps-script/guides/triggers/

Feb 25 Sun

• Every feature and HTML code didn't seem to work. Meanwhile, I found an article that the New Google Site also supports embed HTML and JavaScript code directly into the sites. Sources found at: https://gsuiteupdates.googleblog.com/2017/12/embed-html-and-javascript-in-new-google-sites.html Therefore, I switched the site from Google Classic Site to Google New Site. And now, the checkbox and simple function in HTML works fine as you can see below. Details of HTML can be found at: https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp
• Created another main page for the Curriculum Generator Website

Used the following code:

<p>Display some text when the checkbox is checked:</p>

Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction()">

<p id="text" style="display:none">Checkbox is CHECKED!</p>

<script>

function myFunction() {

var checkBox = document.getElementById("myCheck");

var text = document.getElementById("text");

if (checkBox.checked == true){

text.style.display = "block";

} else {

text.style.display = "none";

}

}

</script>