Build the Render Function Part 1

In this two-part video, you will write the "Render" function for your A-B testing website.

If you do not know which part of the code you are responsible for, check with your group members.

Only watch the videos necessary to write your part of the code.

Your code will tell your program which poster to show and where to display it in a web browser window.

To do this, you will: Create a template variable to hold the HTML page.

Add a poster URL and name to the template to test your part of the code.

Create a version of the template using the variables.

Then, replace the test values with information from the config part of the code.

First, in the script editor select the "render" file.

Beneath the render function, create a variable called "template." "Variables" allow you to label and store information that can be used throughout your program.

Between the two curly braces, type "VAR, space, template, space, equals sign." The template variable will hold the HTML page.

Click the "page html" file to see this code.

The HTML page tells the computer how to display the poster in a web browser.

"Page html" describes: The heading-- "Does this poster make you want to see the movie?" The yes and no buttons.

And the size of the image on the webpage.

Return to render.  Define the variable so that it gets information from the page HTML file.

After the equals sign, type "space, HtmlService.CreateTemplateFromFile, open parenthesis." Between the parentheses, type "page.HTML" in single quotation marks.

Then, type a semicolon after the parentheses.

This completes the first statement in the render code.

The template variable now holds the contents of "page.html." Test the code you've written so far.

On a new line, type "Logger.log," add open and closed parentheses.

Then, type "template." Another autocorrect menu appears.

Choose "getRawContent." Add open and closed parentheses.

Add a semicolon after the last parentheses to complete the statement.

Then, save your function, click "Run," and accept the permissions.

Now, check the log.

Right now, the code gets the raw content from the variable.

In the log, you should see the contents of "page.html" with the time you ran the code.

Great job! The log contains the html page.

Next, add a test poster URL and a test poster name to the template.

This will allow you to test the website even if your partner has not finished the config code.

Remember: config adds the movie poster links and names to the website.

Type "template.poster, underscore, URL, space, equals, space, double quotation mark, poster.url." Add a semicolon at the end of the statement.

Now do the same for the poster name.

Type "template.poster, underscore, name, space, equals, space, double quotation mark, poster.name, semicolon".

These hardcoded objects define a poster's URL and a poster name.

Your program also needs the URL of the completed webpage that will host your template.

To create this page, type "template.page, underscore, URL, equals, ScriptApp.getService, parenthesis, .getUrl, parenthesis" exactly as you see it on the screen.

Use the autofill menus to help you fill in the code precisely.

Test the version you have now.

Instruct the computer to create a version of the template with these variables.

To do this, type "Logger.log, open parenthesis, template.evaluate, open parenthesis, closed parentheses, .getContent, open parenthesis." Then two closed parentheses and a semicolon exactly as you see it on the screen, using the autofill menus to help.

Remove the "Logger.log, template, get raw content" line to ensure that you're seeing the updated template in the log.

Then, save and run your function.

If your code is working correctly, the HTML page information will appear in the log like it did before.

But the poster name and poster URL will be replaced with what you put in quotation marks.

Great! Now it's your turn: Create a template variable to hold the HTML page.

Add a test poster url and test poster name to the template.

Then, move on to part two of this video to complete the render function.