Introduction to HTML
Lesson by Help@Learnful · 4 years ago ·
Google Classroom
Microsoft Teams
Moodle LMS
D2L BrightspaceInstructional Summary
A very basic tutorial on HTML to showcase the features of the Content Block editor!Content Blocks
Photo of person using a laptop to write CSS code. Photo credit: Lukas from https://www.pexels.com/@goumbik
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.
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.
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-0a1dde100dd187c46ec63d32fbff47a27d09e3ccb1f8588f247d28a7a79a9ac7"> <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-641c0c51d4cebdd5ebf1ed089e2038ae1edd57c34d119a655b6884eddf3693e1"> <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-7b47fb4322caf2ae43544ca8f4949b69b463e6b8971b5377f4f71df0e7735fd7"> <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/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/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/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/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/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/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":"\/","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=339416995dbe0","contentUserData":"\/h5p-ajax\/content-user-data\/:contentId\/:dataType\/:subContentId?token=143357e98e5b3"},"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":"?smyg82","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":"\/views\/ajax","ajaxViews":{"views_dom_id:42c20e30e16a6f15e01c8079dd133e1aa7c558330a1af674cd18e9b43941bbe1":{"view_name":"page_title_dynamic","view_display_id":"tutorialnode","view_args":"130","view_path":"\/node\/130","view_base_path":null,"view_dom_id":"42c20e30e16a6f15e01c8079dd133e1aa7c558330a1af674cd18e9b43941bbe1","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?smyg82"></script> <script src="/themes/contrib/bootstrap/js/attributes.js?smyg82"></script> <script src="/themes/contrib/bootstrap/js/theme.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/bootstrap.min.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/learnful-theme.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/readmore.min.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/h5p-resizer.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/jquery.matchHeight-min.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/widgets.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/bootstrap-toc/bootstrap-toc.min.js?smyg82"></script> <script src="//teams.microsoft.com/share/launcher.js" async></script> <script src="/themes/custom/learnful-theme/js/dknotus-tour.min.js?smyg82"></script> <script src="/themes/contrib/bootstrap/js/popover.js?smyg82"></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?smyg82"></script> <script src="/core/misc/ajax.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/misc/ajax.js?smyg82"></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?smyg82"></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?smyg82"></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?smyg82"></script> <script src="/themes/contrib/bootstrap/js/dialog.js?smyg82"></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?smyg82"></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?smyg82"></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?smyg82"></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' -->