Made updates as suggested by reviewers

docs/_tutorials/orderofinterpretation.md

@@ -24,7 +24,7 @@ Jekyll converts your site in the following order:
 
 5. **Files**. Jekyll writes the generated content into files in the [directory structure]({% link _docs/structure.md %}) in `_site`. Pages, posts, and collections get structured based on their [permalink]({% link _docs/permalinks.md %}) setting. Directories that begin with `_` (such as `_includes` and `_data`) are usually hidden in the output.
 
-## Scenarios where incorrect configurations yield problems
+## Scenarios where incorrect configurations create problems
 
 For the most part, you don't have to think about the order of interpretation when building your Jekyll site. These details only become important to know when something isn't rendering.
 
@@ -61,7 +61,8 @@ On a page, you try to insert this value:
 ```
 {% raw %}{{ site.data.mydata.somevalue }}{% endraw %}
 ```
-Nothing renders because first the site variables populate, and then Liquid renders. When the site variables populate, the value for `{% raw %}{{site.data.mydata.somevalue}}{% endraw %}` is simply `{% raw %}{{myvar}}{% endraw %}`, which registers as a string and gets printed as a string. You can't use Liquid in data files.
+
+This renders as a string (`{% raw %}"{{ site.data.mydata.somevalue }}{% endraw %}"` rather than the variable's value. This is because first the site variables populate, and then Liquid renders. When the site variables populate, the value for `{% raw %}{{ site.data.mydata.somevalue }}{% endraw %}` is simply `{% raw %}{{ myvar }}{% endraw %}`, which registers as a string. You can't use Liquid in data files.
 
 Similarly, suppose you have a `highlight` tag in your `_data/mydata.yml` file:
 
@@ -102,9 +103,9 @@ The Markdown is not processed because first the Liquid (`include` tag) gets proc
 
 But because the content is included into an *HTML* page, the Markdown isn't rendered. The Markdown filter processes content only in Markdown files.
 
-To make the code work, use HMTL formatting in includes inserted into HTML files.
+To make the code work, use HMTL formatting in includes that are inserted into HTML files.
 
-However, note that `highlight` tags don't require Markdown to process. Suppose your include contains the following:
+Note that `highlight` tags don't require Markdown to process. Suppose your include contains the following:
 
 ```liquid
 {% raw %}{% highlight javascript %}
@@ -116,18 +117,38 @@ The `highlight` tag *is* Liquid. (Liquid passes the content to Rouge or Pygments
 
 ### Liquid mixed with JavaScript isn't rendered
 
-Suppose you try to mix Liquid with JavaScript, like this:
+Suppose you try to mix Liquid's `assign` tag with JavaScript, like this:
 
-```liquid
+```javascript
-{% raw %}if page.type == "home" { 
+{% raw %}<button onclick="someFunction()">Click me</button>
-    $("intro").addClass("bright");
+
-elsif page.type == "normal" {
+<p id="intro"></p>
-    $("intro").addClass("muted");
+
- }{% endraw %}
+<script>
+{% assign someContent = "This is some content" %}
+function someFunction() {
+    document.getElementById("intro").innerHTML = someContent;
+}
+</script>{% endraw %}
 ```
 
-The Liquid renders long before the page gets converted to HTML. So when JavaScript executes in the browser, the Liquid is no longer present.
+This won't work because the `assign` tag is only available during the Liquid rendering phase of the site. In this JavaScript example, the script executes when a user clicks a button ("Click me") on the page. At that time, the Liquid logic is no longer available, so the `assign` tag wouldn't return anything.
 
-You can never mix Liquid with JavaScript because Liquid processes when the site builds. In contrast, JavaScript processes in the browser when a user interacts with your site.
+However, you can use Jekyll's site variables or Liquid to *populate* a script that is executed at a later time. For example, suppose you have the following property in your front matter: `someContent: "This is some content"`. You could do this:
 
-To make the code work, don't mix Liquid with JavaScript. If you need the code to execute in real-time in the browser, use JavaScript.
+```js
+{% raw %}<button onclick="someFunction()">Click me</button>
+
+<p id="intro"></p>
+
+<script>
+
+function someFunction() {
+    document.getElementById("intro").innerHTML = "{{ page.someContent }}";
+}
+</script>{% endraw %}
+```
+
+When Jekyll builds the site, this `someContent` property populates the script's values, converting `{% raw %}{{ page.someContent }}{% endraw %}` to `"This is some content"`.
+
+The key to remember is that Liquid renders when Jekyll builds your site. Liquid is not available at run-time in the browser when a user executes an event.