Introduction to HTML

Lesson by Help@Learnful · 4 years ago ·

Total view 19 Number of likes: 0

Instructional Summary

A very basic tutorial on HTML to showcase the features of the Content Block editor!
Toggle Collapse

Content Blocks

Image
Photo of person using a laptop to write CSS code.

Photo of person using a laptop to write CSS code. Photo credit: Lukas from https://www.pexels.com/@goumbik

Text Block

Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content

HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

Two-Column
Sir Tim Berners Lee arriving at the Guildhall to receive the Honorary Freedom of the City of London.

Sir Tim Berners Lee arriving at the Guildhall to receive the Honorary Freedom of the City of London. Photo credit: Paul Clark https://www.wikidata.org/wiki/Q20202034

Tim Berners-Lee

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990. The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML. Except for the hyperlink tag, these were strongly influenced by SGMLguid, an in-house Standard Generalized Markup Language (SGML)-based documentation format at CERN. Eleven of these elements still exist in HTML 4.

Source: https://en.wikipedia.org/wiki/HTML

Text Block

A Simple HTML Document 




Page Title




My First Heading


My first paragraph.

Example Explained

  • The declaration defines that this document is an HTML5 document
  • The element is the root element of an HTML page
  • The element contains meta information about the HTML page
  • The element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)</li> <li>The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.</li> <li>The <h1> element defines a large heading</li> <li>The <p> element defines a paragraph</li> </ul> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="content-block" > <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--253.html.twig * ds-1col--paragraph-basic-text-block-preview.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-preview.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-preview ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="bootstrap-panel--6"> <div class="panel-heading"> <a aria-controls="bootstrap-panel--6--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#bootstrap-panel--6--content">Text Block</a> </div> <div id="bootstrap-panel--6--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-default" data-bgcolor="#FFFFFF"><div class="tex2jax_process"><h2>What is an HTML Element?</h2> <p>An HTML element is defined by a start tag, some content, and an end tag:</p> <pre> <code class="language-twig"><tagname>Content goes here...</tagname></code></pre><p>The HTML element is everything from the start tag to the end tag:</p> <pre> <code class="language-twig"><h1>My First Heading</h1> <p>My first paragraph.</p></code></pre><table> <tbody> <tr> <td> <p><strong>Start tag</strong></p> </td> <td> <p><strong>Element content</strong></p> </td> <td> <p><strong>End tag</strong></p> </td> </tr> <tr> <td> <p><strong><h1></strong></p> </td> <td> <p>My First Heading</p> </td> <td> <p></h1></p> </td> </tr> <tr> <td> <p><strong><p></strong></p> </td> <td> <p>My first paragraph.</p> </td> <td> <p></p></p> </td> </tr> <tr> <td> <p><strong><br></strong></p> </td> <td> <p>none</p> </td> <td> <p>none</p> </td> </tr> </tbody> </table> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="content-block" > <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--255.html.twig * ds-1col--paragraph-basic-text-block-preview.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-preview.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-preview ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="bootstrap-panel--7"> <div class="panel-heading"> <a aria-controls="bootstrap-panel--7--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#bootstrap-panel--7--content">Text Block</a> </div> <div id="bootstrap-panel--7--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-narrow" data-bgcolor="#FFDC00"><div class="tex2jax_process"><p><strong>Note: </strong>Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!</p> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="content-block" > <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--256.html.twig * ds-1col--paragraph-basic-text-block-preview.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-preview.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-preview ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="bootstrap-panel--8"> <div class="panel-heading"> <a aria-controls="bootstrap-panel--8--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#bootstrap-panel--8--content">Text Block</a> </div> <div id="bootstrap-panel--8--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-default" data-bgcolor="#FFFFFF"><div class="tex2jax_process"><h2>Web Browsers</h2> <p>The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.</p> <p>A browser does not display the HTML tags, but uses them to determine how to display the document:</p> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="content-block" > <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--257.html.twig * ds-1col--paragraph-image-with-caption-preview.html.twig * ds-1col--paragraph-image-with-caption.html.twig * ds-1col--paragraph-preview.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-image-with-caption paragraph--view-mode-preview ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="preview-image p-imagecaption js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="bootstrap-panel--9"> <div class="panel-heading"> <a aria-controls="bootstrap-panel--9--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#bootstrap-panel--9--content">Image</a> </div> <div id="bootstrap-panel--9--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--paragraph--field-image--image-with-caption.html.twig * field--expert--paragraph--image-with-caption.html.twig * field--expert--paragraph--field-image.html.twig * field--expert--field-image--image-with-caption.html.twig * field--expert--image-with-caption.html.twig * field--expert--field-image.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--paragraph--field-image--image-with-caption.html.twig * field--paragraph--field-image.html.twig * field--paragraph--image-with-caption.html.twig * field--field-image.html.twig * field--image.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <figure width="default"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'colorbox_formatter' --> <!-- BEGIN OUTPUT from 'modules/contrib/colorbox/templates/colorbox-formatter.html.twig' --> <a href="https://learnful.ca/sites/default/files/up/para/field-image/2020-06/78/webbrowser_0.png" title="Screenshot of a web browser displaying a basic html webpage." data-colorbox-gallery="" class="colorbox" data-cbox-img-attrs="{"alt":"Screenshot of a web browser displaying a basic html webpage."}"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'image_style' --> <!-- BEGIN OUTPUT from 'core/modules/image/templates/image-style.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'image' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' --> <img src="/sites/default/files/styles/xxl/public/up/para/field-image/2020-06/78/webbrowser_0.png?itok=6V_HbRji" width="1400" height="796" alt="Screenshot of a web browser displaying a basic html webpage." typeof="foaf:Image" class="img-responsive" /> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' --> <!-- END OUTPUT from 'core/modules/image/templates/image-style.html.twig' --> </a> <!-- END OUTPUT from 'modules/contrib/colorbox/templates/colorbox-formatter.html.twig' --> </figure> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--paragraph--field-image-caption--image-with-caption.html.twig * field--expert--paragraph--image-with-caption.html.twig * field--expert--paragraph--field-image-caption.html.twig * field--expert--field-image-caption--image-with-caption.html.twig * field--expert--image-with-caption.html.twig * field--expert--field-image-caption.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--paragraph--field-image-caption--image-with-caption.html.twig * field--paragraph--field-image-caption.html.twig * field--paragraph--image-with-caption.html.twig * field--field-image-caption.html.twig * field--text.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <figcaption > <div class="tex2jax_process"><p>Screenshot of a web browser displaying a basic html webpage.</p> </div> </figcaption> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="content-block" > <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--258.html.twig * ds-1col--paragraph-basic-text-block-preview.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-preview.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-preview ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="bootstrap-panel--10"> <div class="panel-heading"> <a aria-controls="bootstrap-panel--10--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#bootstrap-panel--10--content">Text Block</a> </div> <div id="bootstrap-panel--10--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-default" data-bgcolor="#FFFFFF"><div class="tex2jax_process"><h2>HTML Page Structure</h2> <p>Below is a visualization of an HTML page structure:</p> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="content-block" > <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--259.html.twig * ds-1col--paragraph-image-with-caption-preview.html.twig * ds-1col--paragraph-image-with-caption.html.twig * ds-1col--paragraph-preview.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-image-with-caption paragraph--view-mode-preview ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="preview-image p-imagecaption js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="bootstrap-panel--11"> <div class="panel-heading"> <a aria-controls="bootstrap-panel--11--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#bootstrap-panel--11--content">Image</a> </div> <div id="bootstrap-panel--11--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--paragraph--field-image--image-with-caption.html.twig * field--expert--paragraph--image-with-caption.html.twig * field--expert--paragraph--field-image.html.twig * field--expert--field-image--image-with-caption.html.twig * field--expert--image-with-caption.html.twig * field--expert--field-image.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--paragraph--field-image--image-with-caption.html.twig * field--paragraph--field-image.html.twig * field--paragraph--image-with-caption.html.twig * field--field-image.html.twig * field--image.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <figure width="default"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'colorbox_formatter' --> <!-- BEGIN OUTPUT from 'modules/contrib/colorbox/templates/colorbox-formatter.html.twig' --> <a href="https://learnful.ca/sites/default/files/up/para/field-image/2020-06/78/htmllayout_0.png" title="" data-colorbox-gallery="" class="colorbox" data-cbox-img-attrs="{"alt":"Illustration of a basic html webpage layout."}"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'image_style' --> <!-- BEGIN OUTPUT from 'core/modules/image/templates/image-style.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'image' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' --> <img src="/sites/default/files/styles/xxl/public/up/para/field-image/2020-06/78/htmllayout_0.png?itok=-qTEe4Ie" width="1400" height="948" alt="Illustration of a basic html webpage layout." typeof="foaf:Image" class="img-responsive" /> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' --> <!-- END OUTPUT from 'core/modules/image/templates/image-style.html.twig' --> </a> <!-- END OUTPUT from 'modules/contrib/colorbox/templates/colorbox-formatter.html.twig' --> </figure> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="content-block" > <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--260.html.twig * ds-1col--paragraph-basic-text-block-preview.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-preview.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-preview ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="bootstrap-panel--12"> <div class="panel-heading"> <a aria-controls="bootstrap-panel--12--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#bootstrap-panel--12--content">Text Block</a> </div> <div id="bootstrap-panel--12--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-default" data-bgcolor="#FFFFFF"><div class="tex2jax_process"><h2>HTML History</h2> <p>Since the early days of the World Wide Web, there have been many versions of HTML:</p> <table> <tbody> <tr> <td> <p><strong>Year</strong></p> </td> <td> <p><strong>Version</strong></p> </td> </tr> <tr> <td> <p>1989</p> </td> <td> <p>Tim Berners-Lee invented www</p> </td> </tr> <tr> <td> <p>1991</p> </td> <td> <p>Tim Berners-Lee invented HTML</p> </td> </tr> <tr> <td> <p>1993</p> </td> <td> <p>Dave Raggett drafted HTML+</p> </td> </tr> <tr> <td> <p>1995</p> </td> <td> <p>HTML Working Group defined HTML 2.0</p> </td> </tr> <tr> <td> <p>1997</p> </td> <td> <p>W3C Recommendation: HTML 3.2</p> </td> </tr> <tr> <td> <p>1999</p> </td> <td> <p>W3C Recommendation: HTML 4.01</p> </td> </tr> <tr> <td> <p>2000</p> </td> <td> <p>W3C Recommendation: XHTML 1.0</p> </td> </tr> <tr> <td> <p>2008</p> </td> <td> <p>WHATWG HTML5 First Public Draft</p> </td> </tr> <tr> <td> <p>2012</p> </td> <td> <p><a href="http://whatwg.org/html/" rel="nofollow">WHATWG HTML5 Living Standard</a></p> </td> </tr> <tr> <td> <p>2014</p> </td> <td> <p><a href="http://www.w3.org/TR/html5/" rel="nofollow">W3C Recommendation: HTML5</a></p> </td> </tr> <tr> <td> <p>2016</p> </td> <td> <p>W3C Candidate Recommendation: HTML 5.1</p> </td> </tr> <tr> <td> <p>2017</p> </td> <td> <p><a href="http://www.w3.org/TR/html51/" rel="nofollow">W3C Recommendation: HTML5.1 2nd Edition</a></p> </td> </tr> <tr> <td> <p>2017</p> </td> <td> <p><a href="http://www.w3.org/TR/html52/" rel="nofollow">W3C Recommendation: HTML5.2</a></p> </td> </tr> </tbody> </table> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="content-block" > <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--262.html.twig * ds-1col--paragraph-basic-text-block-preview.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-preview.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-preview ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="bootstrap-panel--13"> <div class="panel-heading"> <a aria-controls="bootstrap-panel--13--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#bootstrap-panel--13--content">Text Block</a> </div> <div id="bootstrap-panel--13--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-default" data-bgcolor="#FFFFFF"><div class="tex2jax_process"><h2>Quiz time!</h2> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="content-block" > <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--261.html.twig * ds-1col--paragraph-interactive-content-h5p--preview.html.twig * ds-1col--paragraph-interactive-content-h5p-.html.twig * ds-1col--paragraph-preview.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-interactive-content-h5p- paragraph--view-mode-preview ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="preview-intcontent js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="bootstrap-panel--14"> <div class="panel-heading"> <a aria-controls="bootstrap-panel--14--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#bootstrap-panel--14--content">Interactive Content</a> </div> <div id="bootstrap-panel--14--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--field-interactive-content--interactive-content-h5p-.html.twig * field--default--paragraph--interactive-content-h5p-.html.twig * field--default--paragraph--field-interactive-content.html.twig * field--default--field-interactive-content--interactive-content-h5p-.html.twig * field--default--interactive-content-h5p-.html.twig * field--default--field-interactive-content.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--field-interactive-content--interactive-content-h5p-.html.twig * field--paragraph--field-interactive-content.html.twig * field--paragraph--interactive-content-h5p-.html.twig * field--field-interactive-content.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-interactive-content field--type-entity-reference field--label-hidden field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--node--128.html.twig * ds-1col--node-resource-h5p-teaser.html.twig * ds-1col--node-resource-h5p.html.twig * ds-1col--node-teaser.html.twig * ds-1col--node.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div data-history-node-id="128" class="node node--type-resource-h5p node--view-mode-teaser ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--node--field-h5p-content--resource-h5p.html.twig * field--default--node--resource-h5p.html.twig * field--default--node--field-h5p-content.html.twig * field--default--field-h5p-content--resource-h5p.html.twig * field--default--resource-h5p.html.twig * field--default--field-h5p-content.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--node--field-h5p-content--resource-h5p.html.twig * field--node--field-h5p-content.html.twig * field--node--resource-h5p.html.twig * field--field-h5p-content.html.twig * field--h5p.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-h5p-content field--type-h5p field--label-hidden field--item"><div class="h5p-iframe-wrapper"><iframe enable-annotation id="h5p-iframe-18" class="h5p-iframe" data-content-id="18" frameborder="0" scrolling="no"></iframe></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class=" mt-3 field-group-tabs-wrapper"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'vertical_tabs' --> <!-- BEGIN OUTPUT from 'core/modules/system/templates/vertical-tabs.html.twig' --> <div data-vertical-tabs-panes> <!-- THEME DEBUG --> <!-- THEME HOOK: 'input__hidden' --> <!-- FILE NAME SUGGESTIONS: * input--hidden.html.twig x input.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/input/input.html.twig' --> <input class="vertical-tabs__active-tab" type="hidden" /> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/input/input.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="edit-group-discussion"> <div class="panel-heading"> <a aria-controls="edit-group-discussion--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#edit-group-discussion--content"><i class="fas fa-comments mr-1"></i> Discussions</a> </div> <div id="edit-group-discussion--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--node--comment--resource-tutorial.html.twig * field--default--node--resource-tutorial.html.twig * field--default--node--comment.html.twig * field--default--comment--resource-tutorial.html.twig * field--default--resource-tutorial.html.twig * field--default--comment.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--node--comment--resource-tutorial.html.twig * field--node--comment.html.twig * field--node--resource-tutorial.html.twig x field--comment.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/custom/learnful-theme/templates/field--comment.html.twig' --> <section id="node-resource-tutorial-comment"> <p class="for-guest"><a href="/login">Login</a> or <a href="/signup/beta">register</a> to join the discussion.</p> <div id="comment-list"> <h2>Comments</h2> <p class="text-muted small">Be the first to comment!</p> </div> </section> <!-- END OUTPUT from 'themes/custom/learnful-theme/templates/field--comment.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'details' --> <!-- FILE NAME SUGGESTIONS: x bootstrap-panel.html.twig * details.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> <div class="js-form-wrapper form-wrapper form-item js-form-item panel panel-default" id="edit-group-adaption"> <div class="panel-heading"> <a aria-controls="edit-group-adaption--content" aria-expanded="true" aria-pressed="true" data-toggle="collapse" role="button" class="panel-title" href="#edit-group-adaption--content"><i class="fas fa-code-branch mr-1"></i> Adaptions</a> </div> <div id="edit-group-adaption--content" class="panel-body panel-collapse collapse fade in"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--node--field-report-adaption--resource-tutorial.html.twig * field--default--node--resource-tutorial.html.twig * field--default--node--field-report-adaption.html.twig * field--default--field-report-adaption--resource-tutorial.html.twig * field--default--resource-tutorial.html.twig * field--default--field-report-adaption.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--node--field-report-adaption--resource-tutorial.html.twig * field--node--field-report-adaption.html.twig * field--node--resource-tutorial.html.twig x field--field-report-adaption.html.twig * field--comment.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/custom/learnful-theme/templates/field--field-report-adaption.html.twig' --> <section id="node-resource-tutorial-field-report-adaption"> <p class="for-guest"><a href="/login">Login</a> or <a href="/signup/beta">register</a> to share your adaptations.</p> <div id="comment-list"> <h2>List of adaptions</h2> <p class="text-muted small">Be the first to add your adaptation here!</p> </div> </section> <!-- END OUTPUT from 'themes/custom/learnful-theme/templates/field--field-report-adaption.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig' --> </div> <!-- END OUTPUT from 'core/modules/system/templates/vertical-tabs.html.twig' --> </div> </div> <div class="group-right"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--dynamic-block-field--node-node-blocks-node-author--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--dynamic-block-field--node-node-blocks-node-author.html.twig * field--expert--dynamic-block-field--node-node-blocks-node-author--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--dynamic-block-field--node-node-blocks-node-author.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--dynamic-block-field--node-node-blocks-node-author--resource-tutorial.html.twig * field--node--dynamic-block-field--node-node-blocks-node-author.html.twig * field--node--resource-tutorial.html.twig * field--dynamic-block-field--node-node-blocks-node-author.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="card field card-stacked"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'container' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/container.html.twig' --> <div class="views-element-container form-group"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/views/views-view.html.twig' --> <div class="view view-node-blocks view-id-node_blocks view-display-id-block_1 js-view-dom-id-2a30f92e42009389c46616b870b06de912876ca7ffbd0af91875dd7cd8648bab"> <div class="view-content"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_unformatted' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-unformatted.html.twig' --> <div> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_fields' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-fields.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_field' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' --> <div class="card-media circle-image"> <a href="/member/learnful" hreflang="en"> <img src="/sites/default/files/styles/100_sc/public/up/profile/pictures/78/2020-09/pexels-photo-220453.jpeg?itok=jHJ2J_2s" width="100" height="100" alt="" typeof="Image" class="img-responsive" /> </a> <div class="card-media-overtop">1910 points</div></div> <div class="card-body"> <h3 class="card-title"><a href="/member/learnful" hreflang="en">Help@Learnful</a></h3> <p>Support @Learnful</p> <p class="card-location"><span class="glyphicon glyphicon-map-marker"></span> Waterloo, ON</p> </div> <div class="card-action"><a href="/member/learnful" hreflang="en">View Portfolio</a></div> <!-- END OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' --> <!-- END OUTPUT from 'core/modules/views/templates/views-view-fields.html.twig' --> </div> <!-- END OUTPUT from 'core/modules/views/templates/views-view-unformatted.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/views/views-view.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/container.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--dynamic-block-field--node-node-blocks-collaborators--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--dynamic-block-field--node-node-blocks-collaborators.html.twig * field--expert--dynamic-block-field--node-node-blocks-collaborators--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--dynamic-block-field--node-node-blocks-collaborators.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--dynamic-block-field--node-node-blocks-collaborators--resource-tutorial.html.twig * field--node--dynamic-block-field--node-node-blocks-collaborators.html.twig * field--node--resource-tutorial.html.twig * field--dynamic-block-field--node-node-blocks-collaborators.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="card field field--name-dynamic-block-fieldnode-node-blocks-collaborators field--type-ds field--label-above"> <h3 class="card-label field-label-above">Collaborators</h3> <!-- THEME DEBUG --> <!-- THEME HOOK: 'container' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/container.html.twig' --> <div class="views-element-container form-group"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/views/views-view.html.twig' --> <div class="view view-node-blocks view-id-node_blocks view-display-id-block_4 js-view-dom-id-c5cdfe6001ee0583fdd726371e0245dc565c1072a5cdae60f9eb1b3cdb1f055f"> <div class="view-empty"> None listed. </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/views/views-view.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/container.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--dynamic-block-field--node-node-license-launch--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--dynamic-block-field--node-node-license-launch.html.twig * field--expert--dynamic-block-field--node-node-license-launch--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--dynamic-block-field--node-node-license-launch.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--dynamic-block-field--node-node-license-launch--resource-tutorial.html.twig * field--node--dynamic-block-field--node-node-license-launch.html.twig * field--node--resource-tutorial.html.twig * field--dynamic-block-field--node-node-license-launch.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="card field field--name-field-license field--type-field--label-above"> <h3 class="card-label field-label-above">License</h3> <!-- THEME DEBUG --> <!-- THEME HOOK: 'container' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/container.html.twig' --> <div class="views-element-container form-group"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/views/views-view.html.twig' --> <div class="view view-node-blocks-license view-id-node_blocks_license view-display-id-launch js-view-dom-id-16a9b53b1e83966a7c3cb4325232d685e84078085b0c4b661c8e82bca24d5b53"> <div class="view-content"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_unformatted' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-unformatted.html.twig' --> <div> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_fields' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-fields.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_field' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' --> <div class="license-icons"><img src="/themes/custom/learnful-theme/assets/cc-icons/cc.svg"><img src="/themes/custom/learnful-theme/assets/cc-icons/by.svg"></div> <p class="license-statement"><a href="/lesson/130" hreflang="en">Introduction to HTML</a> by <a href="/member/learnful" hreflang="en">Help@Learnful</a> is licensed under a <a href="https://creativecommons.org/licenses/by/4.0">Creative Commons Attribution License</a> (CC BY), except where otherwise noted.</p> <!-- END OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' --> <!-- END OUTPUT from 'core/modules/views/templates/views-view-fields.html.twig' --> </div> <!-- END OUTPUT from 'core/modules/views/templates/views-view-unformatted.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/views/views-view.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/container.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field_group_html_element' --> <!-- FILE NAME SUGGESTIONS: * field-group-html-element--node--resource-tutorial--group-metadata.html.twig * field-group-html-element--node--resource-tutorial--div.html.twig * field-group-html-element--node--group-metadata.html.twig * field-group-html-element--node--resource-tutorial.html.twig * field-group-html-element--node--div.html.twig * field-group-html-element--group-metadata.html.twig * field-group-html-element--resource-tutorial.html.twig * field-group-html-element--node.html.twig * field-group-html-element--div.html.twig x field-group-html-element.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/field_group/templates/field-group-html-element.html.twig' --> <div class="card field field-metadata-group field--label-above group-card"> <h3 class="card-label">Metadata</h3> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--node--field-subject-area--resource-tutorial.html.twig * field--default--node--resource-tutorial.html.twig * field--default--node--field-subject-area.html.twig * field--default--field-subject-area--resource-tutorial.html.twig * field--default--resource-tutorial.html.twig * field--default--field-subject-area.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--node--field-subject-area--resource-tutorial.html.twig * field--node--field-subject-area.html.twig * field--node--resource-tutorial.html.twig * field--field-subject-area.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-subject-area field--type-entity-reference field--label-above"> <div class="field--label">Subject Area</div> <div class="field--item">Career and Technical Education</div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--node--field-material-type--resource-tutorial.html.twig * field--default--node--resource-tutorial.html.twig * field--default--node--field-material-type.html.twig * field--default--field-material-type--resource-tutorial.html.twig * field--default--resource-tutorial.html.twig * field--default--field-material-type.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--node--field-material-type--resource-tutorial.html.twig * field--node--field-material-type.html.twig * field--node--resource-tutorial.html.twig * field--field-material-type.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-material-type field--type-entity-reference field--label-above"> <div class="field--label">Material Type</div> <div class="field--item">Reading Material</div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--node--field-educational-use--resource-tutorial.html.twig * field--default--node--resource-tutorial.html.twig * field--default--node--field-educational-use.html.twig * field--default--field-educational-use--resource-tutorial.html.twig * field--default--resource-tutorial.html.twig * field--default--field-educational-use.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--node--field-educational-use--resource-tutorial.html.twig * field--node--field-educational-use.html.twig * field--node--resource-tutorial.html.twig * field--field-educational-use.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-educational-use field--type-entity-reference field--label-above"> <div class="field--label">Educational Use</div> <div class="field--item">Instruction</div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--node--field-education-level--resource-tutorial.html.twig * field--default--node--resource-tutorial.html.twig * field--default--node--field-education-level.html.twig * field--default--field-education-level--resource-tutorial.html.twig * field--default--resource-tutorial.html.twig * field--default--field-education-level.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--node--field-education-level--resource-tutorial.html.twig * field--node--field-education-level.html.twig * field--node--resource-tutorial.html.twig * field--field-education-level.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-education-level field--type-entity-reference field--label-above"> <div class="field--label">Education Level</div> <div class="field--item">Undergraduate</div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/field_group/templates/field-group-html-element.html.twig' --> </div> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-2col-fluid.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/block/block--system.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'block' --> <!-- FILE NAME SUGGESTIONS: * block--modalblockshareresourcemodal.html.twig * block--block-content--603cb987-c17c-49dd-aa45-2db242e60b07.html.twig * block--block-content.html.twig x block.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/block/block.html.twig' --> <section id="block-modalblockshareresourcemodal" class="block block-block-content block-block-content603cb987-c17c-49dd-aa45-2db242e60b07 clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--block-content--body--basic.html.twig * field--block-content--body.html.twig * field--block-content--basic.html.twig * field--body.html.twig * field--text-with-summary.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><!-- Modal --> <div class="modal fade" id="shareResourceModal" tabindex="-1" role="dialog" aria-labelledby="sahreResourceModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="sahreResourceModalLabel">Share this Resource</h4> </div> <div class="modal-body"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#share-url" aria-controls="share-url" role="tab" data-toggle="tab">Share URL</a></li> <li role="presentation"><a href="#share-lms" aria-controls="share-lms" role="tab" data-toggle="tab">Share in Class</a></li> <li role="presentation"><a href="#share-embedcard" aria-controls="share-embedcard" role="tab" data-toggle="tab">Embed Card</a></li> <li role="presentation"><a href="#share-embedpage" aria-controls="share-embedpage" role="tab" data-toggle="tab">Embed page</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="share-url"> <div class="share-url"> <textarea id="[node:nid]">https://learnful.ca/index.php/lesson/130</textarea> <button class="copy-share">Copy</button> </div> <hr> <div class="share-social"> <a class="share-on-twitter social-share-btn tweet" alt="Share this tutorial on twitter with a tweet!" href="#" data-text="Check out this great tutorial on Learnful" data-url="https://learnful.ca/index.php/lesson/130" data-hashtags="[node:field_tags:0:entity:name],[node:field_tags:1:entity:name],[node:field_tags:2:entity:name]" data-via="learnfulLabs" data-related="LearnfulLabs"> <i class="fab fa-twitter"></i> </a> <a class="share-on-linkedin social-share-btn linkedin" alt="Share this tutorial on LinkedIn!" href="#" data-summary="Check out this great tutorial on Learnful" data-title="[node:title]" data-url="https://learnful.ca/index.php/lesson/130" data-source="learnful.ca"> <i class="fab fa-linkedin-in"></i> </a> <a class="share-on-email social-share-btn email" alt="Share this tutorial via email!" href="mailto:?subject=Check out this great tutorial on Learnful&body=[node:title]: https://learnful.ca/index.php/lesson/130"> <i class="fas fa-at"></i> </a> </div> </div> <div role="tabpanel" class="tab-pane" id="share-lms"> <div class="share-lms"> <a href="#" class="share-lms gclassroom" data-url="https://learnful.ca/index.php/lesson/130" data-title="[node:title]" title="Share in your Google Classroom" data-toggle="tooltip" data-placement="top"> <img src="/themes/custom/learnful-theme/assets/icons/lms_gclassroom_icon.png">Google Classroom</a> <a href="#" class="share-lms msteams" data-href="https://learnful.ca/index.php/lesson/130" data-assign-title="[node:title]" data-title="[node:title]" title="Share in Microsoft Teams" data-toggle="tooltip" data-placement="top"> <img src="/themes/custom/learnful-theme/assets/icons/lms_msteams_icon.png">Microsoft Teams</a> <a class="share-lms moodle disabled" title="Moodle LMS coming soon!" data-toggle="tooltip" data-placement="top"> <img src="/themes/custom/learnful-theme/assets/icons/lms_moodle_icon.jpg">Moodle LMS</a> <a href="#" class="share-lms d2l disabled" title="D2L Brightspace coming soon!" data-toggle="tooltip" data-placement="top"> <img src="/themes/custom/learnful-theme/assets/icons/lms_brightspace_icon.png">D2L Brightspace</a> </div> </div> <div role="tabpanel" class="tab-pane" id="share-embedcard"> <div class="row"> <div class="col-sm-6"> <div class="embed-resource mb-1"> <textarea><iframe width="100%" max-width="300px" height="430px" frameborder="0" src="https://learnful.ca/embed/resource/[node:nid]" title="[node:title] on Learnful.ca"></iframe></textarea> <button class="copy-embed">Copy</button> </div> <p class="small text-muted">This embed code will display a stylized 'card' on your site that displays the thumbnail, title, and link to this resource.</p> <p class="small text-muted">A preview of what the styled card looks like is provided: </p> </div> <div class="col-sm-6 text-right"> <div class="embed-preview"> <iframe src="https://learnful.ca/embed/resource/[node:nid]" width="100%" max-width="300px" height="430px" frameborder="0" title="Preview of iframe embed"></iframe> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="share-embedpage"> <p>Embed Page</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </section> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/block/block.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/region.html.twig' --> </section> </div> </div> <footer class="footer container-fluid" role="contentinfo"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'region' --> <!-- FILE NAME SUGGESTIONS: * region--footer.html.twig x region.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/region.html.twig' --> <div class="region region-footer"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'block' --> <!-- FILE NAME SUGGESTIONS: * block--sitefooter.html.twig * block--block-content--ea1b6928-392d-440e-8c5d-44558922bddf.html.twig * block--block-content.html.twig x block.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/block/block.html.twig' --> <section id="block-sitefooter" class="block block-block-content block-block-contentea1b6928-392d-440e-8c5d-44558922bddf clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--block-content--body--basic.html.twig * field--block-content--body.html.twig * field--block-content--basic.html.twig * field--body.html.twig * field--text-with-summary.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><div class="row"> <div class="col-sm-12 col-lg-7 footer-left"> <div class="btn-group"> <a class="btn btn-link btn-sm" href="/">Home</a> <a class="btn btn-link btn-sm" href="/help-centre/partnerships">Partnerships</a> <a class="btn btn-link btn-sm" href="/help-centre/terms-of-use">Terms of Use</a> <a class="btn btn-link btn-sm" href="/help-centre/privacy-policy">Privacy Policy</a> <a class="btn btn-link btn-sm" href="/help-centre">Help Center</a> </div> <p class="small text-mid pt-1 ml-1">Learnful Labs</p> <p class="small text-mid ml-1">Learnful is a free, open, and collaborative platform for educators and education professionals to create, share, and discover reusable content and discuss practices and ideas.</p> <p class="small text-mid pt-1 ml-1"><i class="fab fa-canadian-maple-leaf"></i> Proudly built in Waterloo ON Canada</p> </div> <div class="col-sm-12 col-lg-4 col-lg-offset-1 text-right text-mid small footer-right"> <img src="/sites/default/files/up/ftp/copyright_footer.jpg" alt="Creative Commons License icons" style="max-width: 75px"> <p class="pt-2">Except where otherwise noted, content on this site is licensed under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="nofollow">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.</p> <p class="pt-2">H5P is a registered <a href="https://h5p.org/trademark" target="_blank" rel="nofollow">trademark</a> of <a href="https://joubel.com/" target="_blank" rel="nofollow">Joubel</a>.</p> </div> </div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </section> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/block/block.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/region.html.twig' --> </footer> <!-- END OUTPUT from 'themes/custom/learnful-theme/templates/page.html.twig' --> </div> <!-- END OUTPUT from 'core/modules/system/templates/off-canvas-page-wrapper.html.twig' --> <div id="full-page-overlay"></div> <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/index.php\/","scriptPath":null,"pathPrefix":"","currentPath":"node\/130","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"ajaxPageState":{"libraries":"ajax_comments\/commands,bootstrap\/popover,codesnippet\/codesnippet.highlightjs,codesnippet\/codesnippet.style.github,colorbox\/colorbox,colorbox\/stockholmsyndrome,core\/drupal.collapse,core\/drupal.vertical-tabs,core\/html5shiv,ds\/ds_2col_fluid,field_group_modal_bootstrap\/bootstrap,google_analytics\/google_analytics,h5p\/h5p.content,hypothesis\/hypothesis.page,hypothesis\/hypothesis.showdefault,learnful_theme\/global-styling,mathjax\/setup,paragraphs\/drupal.paragraphs.unpublished,poll\/drupal.poll-links,quiz\/styles,statistics\/drupal.statistics,system\/base,views\/views.ajax,views\/views.module","theme":"learnful_theme","theme_token":null},"ajaxTrustedUrl":[],"google_analytics":{"account":"UA-157130702-1","trackOutbound":true,"trackMailto":true,"trackDownload":true,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip","trackColorbox":true,"trackDomainMode":1,"trackUrlFragments":true},"hypothesis":{"showHighlights":0,"openSidebar":0},"mathjax":{"config_type":1,"config":{"tex2jax":{"inlineMath":[["$$","$$"],["\\(","\\)"]],"processEscapes":"true"},"showProcessingMessages":"false","messageStyle":"none"}},"bootstrap":{"forms_has_error_value_toggle":1,"modal_animation":1,"modal_backdrop":"true","modal_focus_input":1,"modal_keyboard":1,"modal_select_text":1,"modal_show":1,"modal_size":"","popover_enabled":1,"popover_animation":1,"popover_auto_close":1,"popover_container":"body","popover_content":"","popover_delay":"0","popover_html":0,"popover_placement":"right","popover_selector":"","popover_title":"","popover_trigger":"click"},"statistics":{"data":{"nid":"130"},"url":"\/core\/modules\/statistics\/statistics.php"},"field_group":{"html_element":{"mode":"default","context":"view","settings":{"id":"","classes":"p-imagecaption width-default","element":"div","show_label":false,"label_element":"h3","label_element_classes":"","attributes":"","effect":"none","speed":"fast"}},"tabs":{"mode":"full","context":"view","settings":{"direction":"vertical","id":"","classes":""}},"tab":{"mode":"full","context":"view","settings":{"id":"","classes":"","description":"","formatter":"closed"}},"details":{"mode":"preview","context":"view","settings":{"description":"","open":true,"id":"","classes":"preview-image p-imagecaption","required_fields":false}},"modal":{"mode":"full","context":"view","settings":{"show_label":"1","text_button":"","attributes_button":"","attributes":"","id":"share-resource-panel","classes":"no-button"}}},"h5p":{"H5PIntegration":{"baseUrl":"\/","url":"\/sites\/default\/files\/h5p","postUserStatistics":false,"ajax":{"setFinished":"\/h5p-ajax\/set-finished.json?token=fae67f73b6a20","contentUserData":"\/h5p-ajax\/content-user-data\/:contentId\/:dataType\/:subContentId?token=c415e660b36af"},"saveFreq":false,"l10n":{"H5P":{"fullscreen":"Fullscreen","disableFullscreen":"Disable fullscreen","download":"Download","copyrights":"Rights of use","embed":"Embed","size":"Size","showAdvanced":"Show advanced","hideAdvanced":"Hide advanced","advancedHelp":"Include this script on your website if you want dynamic sizing of the embedded content:","copyrightInformation":"Rights of use","close":"Close","title":"Title","author":"Author","year":"Year","source":"Source","license":"License","thumbnail":"Thumbnail","noCopyrights":"No copyright information available for this content.","reuse":"Reuse","reuseContent":"Reuse Content","reuseDescription":"Reuse this content.","downloadDescription":"Download this content as a H5P file.","copyrightsDescription":"View copyright information for this content.","embedDescription":"View the embed code for this content.","h5pDescription":"Visit H5P.org to check out more cool content.","contentChanged":"This content has changed since you last used it.","startingOver":"You\u0027ll be starting over.","by":"by","showMore":"Show more","showLess":"Show less","subLevel":"Sublevel","confirmDialogHeader":"Confirm action","confirmDialogBody":"Please confirm that you wish to proceed. This action is not reversible.","cancelLabel":"Cancel","confirmLabel":"Confirm","licenseU":"Undisclosed","licenseCCBY":"Attribution","licenseCCBYSA":"Attribution-ShareAlike","licenseCCBYND":"Attribution-NoDerivs","licenseCCBYNC":"Attribution-NonCommercial","licenseCCBYNCSA":"Attribution-NonCommercial-ShareAlike","licenseCCBYNCND":"Attribution-NonCommercial-NoDerivs","licenseCC40":"4.0 International","licenseCC30":"3.0 Unported","licenseCC25":"2.5 Generic","licenseCC20":"2.0 Generic","licenseCC10":"1.0 Generic","licenseGPL":"General Public License","licenseV3":"Version 3","licenseV2":"Version 2","licenseV1":"Version 1","licensePD":"Public Domain","licenseCC010":"CC0 1.0 Universal (CC0 1.0) Public Domain Dedication","licensePDM":"Public Domain Mark","licenseC":"Copyright","contentType":"Content Type","licenseExtras":"License Extras","changes":"Changelog","contentCopied":"Content is copied to the clipboard","connectionLost":"Connection lost. Results will be stored and sent when you regain connection.","connectionReestablished":"Connection reestablished.","resubmitScores":"Attempting to submit stored results.","offlineDialogHeader":"Your connection to the server was lost","offlineDialogBody":"We were unable to send information about your completion of this task. Please check your internet connection.","offlineDialogRetryMessage":"Retrying in :num....","offlineDialogRetryButtonLabel":"Retry now","offlineSuccessfulSubmit":"Successfully submitted results."}},"hubIsEnabled":1,"reportingIsEnabled":false,"libraryConfig":null,"pluginCacheBuster":"?sofrnc","libraryUrl":"\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js","siteUrl":"https:\/\/learnful.ca\/","contents":{"cid-18":{"library":"H5P.QuestionSet 1.20","jsonContent":"{\u0022introPage\u0022:{\u0022showIntroPage\u0022:false,\u0022startButtonText\u0022:\u0022Start Quiz\u0022,\u0022title\u0022:\u0022Intro to HTML Quiz\u0022,\u0022introduction\u0022:\u0022\u003Cp\u003ETest your comprehension of the basics of HTML as introduced in this tutorial.\u003C\\\/p\u003E\\n\u0022},\u0022progressType\u0022:\u0022dots\u0022,\u0022passPercentage\u0022:50,\u0022questions\u0022:[{\u0022params\u0022:{\u0022media\u0022:{\u0022disableImageZooming\u0022:false},\u0022answers\u0022:[{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E\\n\u003Cdiv\u003E\\u200b\\u200b\\u200b\\u200b\\u200bHigh Tech Markup Language\u003C\\\/div\u003E\\n\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E\\n\u003Cdiv\u003EHighly Technical Machine Language\u003C\\\/div\u003E\\n\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:true,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E\\n\u003Cdiv\u003EHyper Text Markup Language\u003C\\\/div\u003E\\n\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E\\n\u003Cdiv\u003EHyperlinks and Text Markup Language\u003C\\\/div\u003E\\n\u003C\\\/div\u003E\\n\u0022}],\u0022overallFeedback\u0022:[{\u0022from\u0022:0,\u0022to\u0022:100}],\u0022behaviour\u0022:{\u0022enableRetry\u0022:true,\u0022enableSolutionsButton\u0022:true,\u0022enableCheckButton\u0022:true,\u0022type\u0022:\u0022auto\u0022,\u0022singlePoint\u0022:false,\u0022randomAnswers\u0022:true,\u0022showSolutionsRequiresInput\u0022:true,\u0022confirmCheckDialog\u0022:false,\u0022confirmRetryDialog\u0022:false,\u0022autoCheck\u0022:false,\u0022passPercentage\u0022:100,\u0022showScorePoints\u0022:true},\u0022UI\u0022:{\u0022checkAnswerButton\u0022:\u0022Check\u0022,\u0022showSolutionButton\u0022:\u0022Show solution\u0022,\u0022tryAgainButton\u0022:\u0022Retry\u0022,\u0022tipsLabel\u0022:\u0022Show tip\u0022,\u0022scoreBarLabel\u0022:\u0022You got :num out of :total points\u0022,\u0022tipAvailable\u0022:\u0022Tip available\u0022,\u0022feedbackAvailable\u0022:\u0022Feedback available\u0022,\u0022readFeedback\u0022:\u0022Read feedback\u0022,\u0022wrongAnswer\u0022:\u0022Wrong answer\u0022,\u0022correctAnswer\u0022:\u0022Correct answer\u0022,\u0022shouldCheck\u0022:\u0022Should have been checked\u0022,\u0022shouldNotCheck\u0022:\u0022Should not have been checked\u0022,\u0022noInput\u0022:\u0022Please answer before viewing the solution\u0022},\u0022confirmCheck\u0022:{\u0022header\u0022:\u0022Finish ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to finish ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Finish\u0022},\u0022confirmRetry\u0022:{\u0022header\u0022:\u0022Retry ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to retry ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Confirm\u0022},\u0022question\u0022:\u0022\u003Cp\u003EHTML stands for:\u003C\\\/p\u003E\\n\u0022},\u0022library\u0022:\u0022H5P.MultiChoice 1.16\u0022,\u0022metadata\u0022:{\u0022contentType\u0022:\u0022Multiple Choice\u0022,\u0022license\u0022:\u0022U\u0022,\u0022title\u0022:\u0022HTML stands for\u0022},\u0022subContentId\u0022:\u002277f7530c-3024-4500-9d1d-003546b8367f\u0022},{\u0022params\u0022:{\u0022media\u0022:{\u0022disableImageZooming\u0022:false},\u0022answers\u0022:[{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003EDefines the document\u0027s body, and is a container for all the visible contents\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003EDefines that this document is an HTML document\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:true,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003EContains meta information about the HTML page\u003C\\\/div\u003E\\n\u0022}],\u0022overallFeedback\u0022:[{\u0022from\u0022:0,\u0022to\u0022:100}],\u0022behaviour\u0022:{\u0022enableRetry\u0022:true,\u0022enableSolutionsButton\u0022:true,\u0022enableCheckButton\u0022:true,\u0022type\u0022:\u0022auto\u0022,\u0022singlePoint\u0022:false,\u0022randomAnswers\u0022:true,\u0022showSolutionsRequiresInput\u0022:true,\u0022confirmCheckDialog\u0022:false,\u0022confirmRetryDialog\u0022:false,\u0022autoCheck\u0022:false,\u0022passPercentage\u0022:100,\u0022showScorePoints\u0022:true},\u0022UI\u0022:{\u0022checkAnswerButton\u0022:\u0022Check\u0022,\u0022showSolutionButton\u0022:\u0022Show solution\u0022,\u0022tryAgainButton\u0022:\u0022Retry\u0022,\u0022tipsLabel\u0022:\u0022Show tip\u0022,\u0022scoreBarLabel\u0022:\u0022You got :num out of :total points\u0022,\u0022tipAvailable\u0022:\u0022Tip available\u0022,\u0022feedbackAvailable\u0022:\u0022Feedback available\u0022,\u0022readFeedback\u0022:\u0022Read feedback\u0022,\u0022wrongAnswer\u0022:\u0022Wrong answer\u0022,\u0022correctAnswer\u0022:\u0022Correct answer\u0022,\u0022shouldCheck\u0022:\u0022Should have been checked\u0022,\u0022shouldNotCheck\u0022:\u0022Should not have been checked\u0022,\u0022noInput\u0022:\u0022Please answer before viewing the solution\u0022},\u0022confirmCheck\u0022:{\u0022header\u0022:\u0022Finish ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to finish ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Finish\u0022},\u0022confirmRetry\u0022:{\u0022header\u0022:\u0022Retry ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to retry ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Confirm\u0022},\u0022question\u0022:\u0022\u003Cp\u003EWhat is the purpose of the \u003Cem\u003E\u003Cstrong\u003E\u0026lt;head\u0026gt;\u003C\\\/strong\u003E\u003C\\\/em\u003E html element?\u003C\\\/p\u003E\\n\u0022},\u0022library\u0022:\u0022H5P.MultiChoice 1.16\u0022,\u0022metadata\u0022:{\u0022contentType\u0022:\u0022Multiple Choice\u0022,\u0022license\u0022:\u0022U\u0022,\u0022title\u0022:\u0022What is the purpose of the \u0026lt;head\u0026gt; html element?\u0022},\u0022subContentId\u0022:\u00223c8a8b34-7299-4a18-ba45-b9e7ab28c225\u0022},{\u0022params\u0022:{\u0022media\u0022:{\u0022disableImageZooming\u0022:false},\u0022correct\u0022:\u0022true\u0022,\u0022behaviour\u0022:{\u0022enableRetry\u0022:true,\u0022enableSolutionsButton\u0022:true,\u0022enableCheckButton\u0022:true,\u0022confirmCheckDialog\u0022:false,\u0022confirmRetryDialog\u0022:false,\u0022autoCheck\u0022:false},\u0022l10n\u0022:{\u0022trueText\u0022:\u0022True\u0022,\u0022falseText\u0022:\u0022False\u0022,\u0022score\u0022:\u0022You got @score of @total points\u0022,\u0022checkAnswer\u0022:\u0022Check\u0022,\u0022showSolutionButton\u0022:\u0022Show solution\u0022,\u0022tryAgain\u0022:\u0022Retry\u0022,\u0022wrongAnswerMessage\u0022:\u0022Wrong answer\u0022,\u0022correctAnswerMessage\u0022:\u0022Correct answer\u0022,\u0022scoreBarLabel\u0022:\u0022You got :num out of :total points\u0022},\u0022confirmCheck\u0022:{\u0022header\u0022:\u0022Finish ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to finish ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Finish\u0022},\u0022confirmRetry\u0022:{\u0022header\u0022:\u0022Retry ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to retry ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Confirm\u0022},\u0022question\u0022:\u0022\u003Cp\u003ESome HTML elements have no content and therefore do not an end tag\u003C\\\/p\u003E\\n\u0022},\u0022library\u0022:\u0022H5P.TrueFalse 1.8\u0022,\u0022metadata\u0022:{\u0022contentType\u0022:\u0022True\\\/False Question\u0022,\u0022license\u0022:\u0022U\u0022,\u0022title\u0022:\u0022Some HTML elements have no content and therefore do not an end tag\u0022},\u0022subContentId\u0022:\u00228ae89f7a-7255-40ce-8aa9-d25d297daa38\u0022},{\u0022params\u0022:{\u0022media\u0022:{\u0022disableImageZooming\u0022:false},\u0022correct\u0022:\u0022true\u0022,\u0022behaviour\u0022:{\u0022enableRetry\u0022:true,\u0022enableSolutionsButton\u0022:true,\u0022enableCheckButton\u0022:true,\u0022confirmCheckDialog\u0022:false,\u0022confirmRetryDialog\u0022:false,\u0022autoCheck\u0022:false},\u0022l10n\u0022:{\u0022trueText\u0022:\u0022True\u0022,\u0022falseText\u0022:\u0022False\u0022,\u0022score\u0022:\u0022You got @score of @total points\u0022,\u0022checkAnswer\u0022:\u0022Check\u0022,\u0022showSolutionButton\u0022:\u0022Show solution\u0022,\u0022tryAgain\u0022:\u0022Retry\u0022,\u0022wrongAnswerMessage\u0022:\u0022Wrong answer\u0022,\u0022correctAnswerMessage\u0022:\u0022Correct answer\u0022,\u0022scoreBarLabel\u0022:\u0022You got :num out of :total points\u0022},\u0022confirmCheck\u0022:{\u0022header\u0022:\u0022Finish ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to finish ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Finish\u0022},\u0022confirmRetry\u0022:{\u0022header\u0022:\u0022Retry ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to retry ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Confirm\u0022},\u0022question\u0022:\u0022\u003Cp\u003EThe purpose of a web browser is to read HTML documents and display them correctly\u003C\\\/p\u003E\\n\u0022},\u0022library\u0022:\u0022H5P.TrueFalse 1.8\u0022,\u0022metadata\u0022:{\u0022contentType\u0022:\u0022True\\\/False Question\u0022,\u0022license\u0022:\u0022U\u0022,\u0022title\u0022:\u0022The purpose of a web browser is to read HTML documents and display them correctly\u0022},\u0022subContentId\u0022:\u0022190118cd-cd89-4000-9116-52b9ff00530b\u0022},{\u0022params\u0022:{\u0022media\u0022:{\u0022disableImageZooming\u0022:false},\u0022answers\u0022:[{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E1989\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:true,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E1991\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E1993\u003C\\\/div\u003E\\n\u0022}],\u0022overallFeedback\u0022:[{\u0022from\u0022:0,\u0022to\u0022:100}],\u0022behaviour\u0022:{\u0022enableRetry\u0022:true,\u0022enableSolutionsButton\u0022:true,\u0022enableCheckButton\u0022:true,\u0022type\u0022:\u0022auto\u0022,\u0022singlePoint\u0022:false,\u0022randomAnswers\u0022:true,\u0022showSolutionsRequiresInput\u0022:true,\u0022confirmCheckDialog\u0022:false,\u0022confirmRetryDialog\u0022:false,\u0022autoCheck\u0022:false,\u0022passPercentage\u0022:100,\u0022showScorePoints\u0022:true},\u0022UI\u0022:{\u0022checkAnswerButton\u0022:\u0022Check\u0022,\u0022showSolutionButton\u0022:\u0022Show solution\u0022,\u0022tryAgainButton\u0022:\u0022Retry\u0022,\u0022tipsLabel\u0022:\u0022Show tip\u0022,\u0022scoreBarLabel\u0022:\u0022You got :num out of :total points\u0022,\u0022tipAvailable\u0022:\u0022Tip available\u0022,\u0022feedbackAvailable\u0022:\u0022Feedback available\u0022,\u0022readFeedback\u0022:\u0022Read feedback\u0022,\u0022wrongAnswer\u0022:\u0022Wrong answer\u0022,\u0022correctAnswer\u0022:\u0022Correct answer\u0022,\u0022shouldCheck\u0022:\u0022Should have been checked\u0022,\u0022shouldNotCheck\u0022:\u0022Should not have been checked\u0022,\u0022noInput\u0022:\u0022Please answer before viewing the solution\u0022},\u0022confirmCheck\u0022:{\u0022header\u0022:\u0022Finish ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to finish ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Finish\u0022},\u0022confirmRetry\u0022:{\u0022header\u0022:\u0022Retry ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to retry ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Confirm\u0022},\u0022question\u0022:\u0022\u003Cp\u003ETim Berners-Lee invented HTML in which year?\u003C\\\/p\u003E\\n\u0022},\u0022library\u0022:\u0022H5P.MultiChoice 1.16\u0022,\u0022metadata\u0022:{\u0022contentType\u0022:\u0022Multiple Choice\u0022,\u0022license\u0022:\u0022U\u0022,\u0022title\u0022:\u0022Tim Berners-Lee invented HTML in which year?\u0022},\u0022subContentId\u0022:\u0022635c1122-3553-4a56-9beb-b78afea3cd65\u0022}],\u0022disableBackwardsNavigation\u0022:false,\u0022randomQuestions\u0022:false,\u0022endGame\u0022:{\u0022showResultPage\u0022:true,\u0022showSolutionButton\u0022:true,\u0022showRetryButton\u0022:true,\u0022noResultMessage\u0022:\u0022Finished\u0022,\u0022message\u0022:\u0022Your result:\u0022,\u0022overallFeedback\u0022:[{\u0022from\u0022:0,\u0022to\u0022:100}],\u0022solutionButtonText\u0022:\u0022Show solution\u0022,\u0022retryButtonText\u0022:\u0022Retry\u0022,\u0022finishButtonText\u0022:\u0022Finish\u0022,\u0022showAnimations\u0022:false,\u0022skippable\u0022:false,\u0022skipButtonText\u0022:\u0022Skip video\u0022},\u0022override\u0022:{\u0022checkButton\u0022:true},\u0022texts\u0022:{\u0022prevButton\u0022:\u0022Previous question\u0022,\u0022nextButton\u0022:\u0022Next question\u0022,\u0022finishButton\u0022:\u0022Finish\u0022,\u0022textualProgress\u0022:\u0022Question: @current of @total questions\u0022,\u0022jumpToQuestion\u0022:\u0022Question %d of %total\u0022,\u0022questionLabel\u0022:\u0022Question\u0022,\u0022readSpeakerProgress\u0022:\u0022Question @current of @total\u0022,\u0022unansweredText\u0022:\u0022Unanswered\u0022,\u0022answeredText\u0022:\u0022Answered\u0022,\u0022currentQuestionText\u0022:\u0022Current question\u0022}}","fullScreen":"0","exportUrl":"https:\/\/learnful.ca\/sites\/default\/files\/h5p\/exports\/interactive-content-18.h5p","embedCode":"\u003Ciframe src=\u0022https:\/\/learnful.ca\/h5p\/18\/embed\u0022 width=\u0022:w\u0022 height=\u0022:h\u0022 frameborder=\u00220\u0022 allowfullscreen=\u0022allowfullscreen\u0022 enable-annotation\u003E\u003C\/iframe\u003E","resizeCode":"\u003Cscript src=\u0022https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-resizer.js\u0022 charset=\u0022UTF-8\u0022\u003E\u003C\/script\u003E","url":"https:\/\/learnful.ca\/h5p\/18\/embed","metadata":{"title":"Introduction to HTML Basic Quiz","authors":[{"name":"Learnful","role":"Author"}],"license":"CC BY","licenseVersion":"4.0"},"contentUserData":[{"state":"{}"}],"displayOptions":{"frame":true,"export":true,"embed":true,"copyright":true,"icon":true,"copy":false},"scripts":["https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Transition-1.0\/transition.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-help-dialog.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-message-dialog.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-progress-circle.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-simple-rounded-button.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-speech-bubble.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-throbber.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-tip.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-slider.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-score-bar.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-progressbar.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-ui.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Question-1.5\/scripts\/question.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Question-1.5\/scripts\/explainer.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Question-1.5\/scripts\/score-points.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.MultiChoice-1.16\/js\/multichoice.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.TrueFalse-1.8\/scripts\/h5p-true-false.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.TrueFalse-1.8\/scripts\/h5p-true-false-answer-group.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.TrueFalse-1.8\/scripts\/h5p-true-false-answer.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/scripts\/vimeo.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/scripts\/youtube.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/scripts\/panopto.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/scripts\/html5.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/scripts\/video.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.QuestionSet-1.20\/js\/questionset.js"],"styles":["https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/FontAwesome-4.5\/h5p-font-awesome.min.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.FontIcons-1.0\/styles\/h5p-font-icons.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-help-dialog.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-message-dialog.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-progress-circle.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-simple-rounded-button.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-speech-bubble.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-tip.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-slider.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-score-bar.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-progressbar.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-ui.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-icon.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Question-1.5\/styles\/question.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Question-1.5\/styles\/explainer.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.MultiChoice-1.16\/css\/multichoice.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.TrueFalse-1.8\/styles\/h5p-true-false.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/styles\/video.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.QuestionSet-1.20\/css\/questionset.css","https:\/\/learnful.ca\/modules\/custom\/h5p_css_overrides\/h5p-global-overrides.css"]}},"core":{"scripts":["https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/jquery.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-event-dispatcher.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-x-api-event.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-x-api.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-content-type.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-confirmation-dialog.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-action-bar.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/request-queue.js"],"styles":["https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/styles\/h5p.css","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/styles\/h5p-confirmation-dialog.css","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/styles\/h5p-core-button.css"]}}},"colorbox":{"opacity":"0.85","current":"{current} of {total}","previous":"\u00ab Prev","next":"Next \u00bb","close":"Close","maxWidth":"98%","maxHeight":"98%","fixed":true,"mobiledetect":false,"mobiledevicewidth":"480px"},"views":{"ajax_path":"\/index.php\/views\/ajax","ajaxViews":{"views_dom_id:8e8672b2eb1b4bd38b10a26e3a20708dab0d3c810152db7aa95d290ab51845ae":{"view_name":"page_title_dynamic","view_display_id":"tutorialnode","view_args":"130","view_path":"\/node\/130","view_base_path":null,"view_dom_id":"8e8672b2eb1b4bd38b10a26e3a20708dab0d3c810152db7aa95d290ab51845ae","pager_element":0}}},"user":{"uid":0,"permissionsHash":"cabcb0237ef9d4df41cff38a33db9a4fb6212384441da3b3ed0d960f7518748f"}}</script> <script src="/core/assets/vendor/jquery/jquery.min.js?v=3.5.1"></script> <script src="/core/assets/vendor/underscore/underscore-min.js?v=1.13.1"></script> <script src="/core/assets/vendor/jquery-once/jquery.once.min.js?v=2.2.3"></script> <script src="/core/misc/drupalSettingsLoader.js?v=8.9.16"></script> <script src="/core/misc/drupal.js?v=8.9.16"></script> <script src="/core/misc/drupal.init.js?v=8.9.16"></script> <script src="/core/assets/vendor/jquery.ui/ui/data-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/disable-selection-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/form-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/labels-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/jquery-1-7-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/scroll-parent-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/tabbable-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/unique-id-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/version-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/escape-selector-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/focusable-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/keycode-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/plugin-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/safe-active-element-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/safe-blur-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/widget-min.js?v=1.12.1"></script> <script src="/modules/contrib/google_analytics/js/google_analytics.js?v=8.9.16"></script> <script src="/modules/contrib/hypothesis/js/showdefaults.js?v=8.9.16"></script> <script src="https://hypothes.is/embed.js"></script> <script src="/modules/contrib/mathjax/js/config.js?v=8.9.16"></script> <script src="/libraries/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> <script src="/modules/contrib/mathjax/js/setup.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/drupal.bootstrap.js?sofrnc"></script> <script src="/themes/contrib/bootstrap/js/attributes.js?sofrnc"></script> <script src="/themes/contrib/bootstrap/js/theme.js?sofrnc"></script> <script src="/themes/custom/learnful-theme/js/bootstrap.min.js?sofrnc"></script> <script src="/themes/custom/learnful-theme/js/learnful-theme.js?sofrnc"></script> <script src="/themes/custom/learnful-theme/js/readmore.min.js?sofrnc"></script> <script src="/themes/custom/learnful-theme/js/h5p-resizer.js?sofrnc"></script> <script src="/themes/custom/learnful-theme/js/jquery.matchHeight-min.js?sofrnc"></script> <script src="/themes/custom/learnful-theme/js/widgets.js?sofrnc"></script> <script src="/themes/custom/learnful-theme/js/bootstrap-toc/bootstrap-toc.min.js?sofrnc"></script> <script src="//teams.microsoft.com/share/launcher.js" async></script> <script src="/themes/custom/learnful-theme/js/dknotus-tour.min.js?sofrnc"></script> <script src="/themes/contrib/bootstrap/js/popover.js?sofrnc"></script> <script src="/core/modules/statistics/statistics.js?v=8.9.16"></script> <script src="/core/assets/vendor/jquery-form/jquery.form.min.js?v=4.22"></script> <script src="/core/misc/progress.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/misc/progress.js?sofrnc"></script> <script src="/core/misc/ajax.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/misc/ajax.js?sofrnc"></script> <script src="/core/misc/debounce.js?v=8.9.16"></script> <script src="/core/misc/form.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/misc/form.js?sofrnc"></script> <script src="/modules/contrib/ajax_comments/ajax_comments.js?v=8.9.16"></script> <script src="/core/assets/vendor/matchMedia/matchMedia.min.js?v=0.2.0"></script> <script src="/themes/contrib/bootstrap/js/misc/vertical-tabs.js?sofrnc"></script> <script src="/core/misc/details-aria.js?v=8.9.16"></script> <script src="/core/misc/collapse.js?v=8.9.16"></script> <script src="/modules/contrib/h5p/js/h5p-integration.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js?v=1.9.1"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-event-dispatcher.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-x-api-event.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-x-api.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-content-type.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-confirmation-dialog.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-action-bar.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/request-queue.js?v=1.0"></script> <script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.9.16"></script> <script src="/modules/contrib/colorbox/js/colorbox.js?v=8.9.16"></script> <script src="/modules/contrib/colorbox/styles/stockholmsyndrome/colorbox_style.js?v=8.9.16"></script> <script src="/core/misc/displace.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/modal.js?sofrnc"></script> <script src="/themes/contrib/bootstrap/js/dialog.js?sofrnc"></script> <script src="/core/assets/vendor/jquery.ui/ui/widgets/mouse-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/ie-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/widgets/draggable-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/position-min.js?v=1.12.1"></script> <script src="/core/assets/vendor/jquery.ui/ui/widgets/resizable-min.js?v=1.12.1"></script> <script src="/themes/contrib/bootstrap/js/modal.jquery.ui.bridge.js?sofrnc"></script> <script src="/core/misc/dialog/dialog.js?v=8.9.16"></script> <script src="/core/misc/dialog/dialog.position.js?v=8.9.16"></script> <script src="/core/misc/dialog/dialog.ajax.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/misc/dialog.ajax.js?sofrnc"></script> <script src="/core/modules/views/js/base.js?v=8.9.16"></script> <script src="/core/modules/views/js/ajax_view.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/modules/views/ajax_view.js?sofrnc"></script> <script src="/libraries/codesnippet/lib/highlight/highlight.pack.js?v=8.9.16"></script> <script src="/modules/contrib/codesnippet/js/codesnippet.js?v=8.9.16"></script> </body> </html> <!-- END OUTPUT from 'themes/custom/learnful-theme/templates/html.html.twig' -->