Overview of HTML Basics

Overview of HTML

HTML (HyperText Markup Language) is the standard language for creating web pages.
It structures content on the web and is rendered by web browsers.

Basic Structure of an HTML Document

DOCTYPE Declaration
- <!DOCTYPE html>: Indicates the document type and version of HTML.
HTML Element
- <html>: Root element of an HTML page.
Head Element
- <head>: Contains meta-information about the document (title, links, scripts, etc.).
- Key Elements:
  - <title>: Sets the title displayed in the browser tab.
  - <meta>: Provides metadata (e.g., character encoding and page description).
Body Element
- <body>: Contains the content of the document that is displayed to users.

Common HTML Elements

Text Formatting
- <h1> to <h6>: Headings (h1 is the highest level).
- <p>: Paragraph.
- <strong>: Bold text; indicates importance.
- <em>: Italic text; emphasizes text.
Links and Images
- <a href="url">: Hyperlink to another web resource.
- <img src="url" alt="description">: Embeds an image.
Lists
- <ul>: Unordered list (bullets).
- <ol>: Ordered list (numbers).
- <li>: List item.
Tables
- <table>: Creates a table.
- <tr>: Table row.
- <td>: Table data/cell.
- <th>: Table header.

Attributes

Modify elements with attributes that provide additional information.
- Common attributes:
  - id: Unique identifier for an element.
  - class: Class attribute for styling.
  - style: Inline CSS styles.
  - src: Source for images or scripts.

Semantic HTML

Uses HTML elements that convey meaning about the content:
- <header>: Header for a document section.
- <footer>: Footer for a document section.
- <article>: Independent content.
- <section>: Thematic grouping of content.

Forms and Input Elements

Forms
- <form>: Container for form elements.
Input Types
- <input type="text">: Text input.
- <input type="email">: Email input.
- <input type="submit">: Submit button.
Labels
- <label>: Associates a label with an input for accessibility.

Best Practices

Use semantic HTML for better accessibility and SEO.
Validate HTML code to ensure it follows standards and is error-free.
Comment your code using  for clarity.

HTML5 Features

New elements such as <video>, <audio>, and <canvas> for multimedia and graphics.
Improved support for APIs (e.g., geolocation, web storage).

Conclusion

HTML is crucial for web development and serves as the foundation for building web pages.
Understanding HTML is essential for creating structured, accessible, and effective web content.

HTML Overview

HTML is the standard language for building web pages.
Web browsers use HTML to render web content.

Basic Structure of an HTML Document

DOCTYPE Declaration: Indicates the document type and version of HTML.
- Example: <!DOCTYPE html>
HTML Element: The root element of an HTML page.
- Example: <html>
Head Element: Contains meta-information about the document.
- Example: <head>
- Key Elements:
  - <title>: Defines the title displayed in the browser tab.
  - <meta>: Provides metadata like character encoding and page description.
Body Element: Contains the content of the document that is displayed to users.
- Example: <body>

Common HTML Elements

Text Formatting
- <h1> to <h6>: Headings (h1 being the highest level)
- <p>: Paragraph
- <b>: Bold text (indicates importance)
- <i>: Italic text (emphasizes text)
Links and Images
- <a>: Creates a hyperlink to another web resource.
- <img>: Embeds an image inside the document.
Lists
- <ul>: Unordered list (bullets)
- <ol>: Ordered list (numbers)
- <li>: List item
Tables
- <table>: Creates a table
- <tr>: Table row
- <td>: Table data/cell
- <th>: Table header

Attributes

Modify HTML elements with attributes for additional information.
- Example: <img src="image.jpg" alt="Description of the image">
- Common Attributes:
  - id: Unique identifier for an element
  - class: Class attribute for styling
  - style: Inline CSS styles
  - src: Source for images or scripts

Semantic HTML

Use HTML elements that convey meaning about the content:
- <header>: Header for a document section
- <footer>: Footer for a document section
- <article>: Independent content
- <aside>: Thematic grouping of content

Forms and Input Elements

Forms:
- <form>: Container for form elements.
Input Types:
- <input type="text">: Text input
- <input type="email">: Email input
- <input type="submit">: Submit button
Labels:
- <label>: Associates a label with an input for accessibility.

Best Practices

Use semantic HTML for better accessibility and SEO.
Validate HTML code to ensure compliance with standards and for error-free code.
Comment your code using  for clarity.

HTML5 Features

New elements like <video>, <audio>, and <canvas> for multimedia and graphics.
Improved support for APIs (e.g., geolocation, web storage).

Conclusion

Understanding HTML is essential to create structured, accessible, and effective web content.
It's the foundation for building web pages and crucial for web development.

Introduction to HTML

HTML (HyperText Markup Language) is used to create and design web pages.
It tells the web browser how to display content.
It’s like a webpage's skeleton, giving structure and meaning.
To write HTML, a text editor is required, such as Notepad++, Visual Studio Code, Atom, or Sublime Text.
HTML has been around since 1991.

HTML Tags Summary

!DOCTYPE html: Declares the document type and HTML version.
: The root element that contains all other HTML elements.
: Contains meta-information about the document, such as the title, character set, and links to CSS files or scripts.
</strong>: Sets the title of the web page, which appears in the browser’s title bar or tab.</li> <li> <strong><body></strong>: Contains the visible content of the web page, such as text, images, links, and other elements.</li> <li> <strong><h1></strong>: Defines a top-level heading, with further headings such as <h2>, <h3>, etc. being progressively smaller.</li> <li> <strong><p></strong>: Defines a paragraph of text.</li> <li> <strong><br></strong>: Adds a line break.</li> <li> <strong><hr></strong>: Adds a horizontal line across the page.</li> <li> <strong><b></strong>: Makes text bold.</li> <li> <strong><i></strong>: Makes text italicized.</li> <li> <strong><u></strong>: Underlines text.</li> <li> <strong></strong>: Used for adding comments that won’t be visible on the webpage.</li> </ul> <h3 id="more-tags" class="contents-heading">More Tags</h3> <ul> <li> <strong><ol></strong>: Defines an ordered list.</li> <li> <strong><ul></strong>: Defines an unordered list.</li> <li> <strong><img></strong>: Used to insert an image.</li> <li> <strong><a></strong>: Links to another webpage.</li> <li> <strong><nav></strong>: Defines a section of the page that links to other parts of the page.</li> <li> <strong><div></strong>: Creates a division or section of the webpage for organizing content.</li> </ul> <h3 id="building-a-personal-webpage-example" class="contents-heading">Building a Personal Webpage Example</h3> <ul> <li> <strong><img></strong>: Displays images.</li> <li> <strong><hr></strong>: Creates horizontal lines to separate sections.</li> <li> <strong><h1></strong>, <strong><h2></strong>: Creates levels of headings.</li> <li> <strong><ul></strong>: Creates an unordered list of hobbies in the example.</li> </ul> <h3 id="building-a-community-event-webpage-example" class="contents-heading">Building a Community Event Webpage Example</h3> <ul> <li> <strong><img</strong>: Displays images.</li> <li> <strong><h1></strong>, <strong><h2></strong>: Creates levels of headings.</li> <li> <strong><ul></strong>: Creates an unordered list of event activities.</li> <li> <strong><p></strong>: Contains paragraphs explaining dates, times, locations, and event registration.</li> </ul> <h3 id="key-concepts" class="contents-heading">Key Concepts</h3> <ul> <li>Comments are used to add notes within the code to explain what it does, for future developers or for the creator to remember changes.</li> <li>Code structure includes the basic structure of the HTML document using <code><html></code>, <code><head></code>, <code><body></code>, and other key elements.</li> <li>The use of HTML tags is crucial to display content as intended on a webpage. Using the right tag for the right content determines how content is displayed.</li> </ul> </div> </div> </div> <div class="mt-12"> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-gradient-to-t from-primary-0 to-primary-1 border-0 dark:border-primary-3 text-surface-0 sm:p-0 p-0 border-surface-4 dark:border-elevated-4 overflow-hidden"> <div class="flex flex-col md:flex-row relative"> <div class="w-full md:w-1/2 rounded-t-3xl md:rounded-l-3xl p-8 flex items-center relative z-10"> <div class="space-y-4 mr-4 text-center md:text-left"> <h2 class="text-2xl font-semibold text-white"> Studying That Suits <span class="text-secondary-1"> You </span> </h2> <p class="text-white text-md"> Use AI to generate personalized quizzes and flashcards to suit your learning preferences. </p> <div class="relative z-20 flex justify-center md:justify-start"> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-secondary-1 border-secondary-0 hover:bg-secondary-2 hover:border-secondary-1 active:bg-secondary-0 focus:shadow-outline-yellow text-elevated-4 disabled:bg-surface-4 disabled:text-elevated-0 disabled:border-surface-6 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center register-modal-button" x-data="" @click="$dispatch('open-modal', 'register')" color="highlight" type="button"> Get started for free </button> </div> </div> </div> <div class="w-full md:w-1/2 -mt-16 md:mt-0 relative z-0 md:z-10"> <img src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/9386c9f5-826e-486e-a4a1-ba6708215800/default" alt="Quiz Team" class="w-full h-56 sm:h-full object-cover object-top rounded-t-[2.5rem] md:rounded-r-2xl md:rounded-l-none"> </div> </div> </div> </div> <div class="dark:bg-elevated-4 mt-12"> <h2 class="text-xl font-bold contents-heading" id="study-notes"> Related Documents </h2> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-4 p-4 border-surface-4 dark:border-elevated-4 mt-6"> <div class="flex items-center justify-between"> <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2 text-lg font-medium" href="https://quizgecko.com/upload/html-and-css-grade-8-booklet-z0idge">HTML and CSS Grade 8 booklet.pdf</a> <div class="space-x-2"> <button class="px-3 py-2 text-sm rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" size="sm" @click="window.location.href = 'https://quizgecko.com/chat/assistant?upload_ids=539101&mode=chat'" type="button"> Chat with Document </button> </div> </div> </div> </div> <div class="dark:bg-elevated-4 mt-12"> <h2 class="text-xl font-bold contents-heading" id="study-notes"> Description </h2> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-4 p-4 border-surface-4 dark:border-elevated-4 mt-6"> <div class="prose dark:prose-dark max-w-4xl"> <p>This quiz covers the fundamental aspects of HTML, including its basic structure and essential elements. Participants will learn about the components that make up an HTML document, such as the DOCTYPE declaration, head, and body elements, as well as common HTML tags for formatting and content creation.</p> </div> </div> </div> </article> </main> </div> </div> <div class="mx-auto max-w-screen-xl mb-4"> <div class="mt-12"> <h2 class="text-xl font-bold text-elevated-5 dark:text-surface-5"> More Like This </h2> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-4 p-4 border-surface-4 dark:border-elevated-4 mt-8"> <div class=""> <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4"> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 border-surface-4 dark:border-elevated-4 max-w-sm"> <a href="https://quizgecko.com/learn/html-basics-quiz-mefzec"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHw0fHxIVE1MJTIwYmFzaWNzJTJDJTIwd2ViJTIwZGV2ZWxvcG1lbnQlMkMlMjBtYXJrdXAlMjBsYW5ndWFnZXN8ZW58MXwwfHx8MTcyMjMxNzE4OXww&ixlib=rb-4.0.3&q=85&w=800" alt="HTML Basics Quiz" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>8 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/html-basics-quiz-mefzec"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> HTML Basics Quiz </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-20.webp" alt="EnergyEfficientHedgehog avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>EnergyEfficientHedgehog</div> </div> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 border-surface-4 dark:border-elevated-4 max-w-sm"> <a href="https://quizgecko.com/learn/html-fundamentals-for-web-development-9hz6k4"> <img class="rounded-t-lg xl:h-48" src="https://assets.quizgecko.com/cdn-cgi/image/width=800,quality=90,format=webp/quiz/00ed6e724b495ffbb3901c8ec2f7e6c4.jpg" alt="HTML Fundamentals for Web Development" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>16 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/html-fundamentals-for-web-development-9hz6k4"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> HTML Fundamentals for Web Development </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-7.webp" alt="SteadyCamellia avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>SteadyCamellia</div> </div> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 border-surface-4 dark:border-elevated-4 max-w-sm"> <a href="https://quizgecko.com/learn/introduction-to-html-basics-r7c6ww"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1527689368864-3a821dbccc34?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHwyfHxIVE1MJTIwYmFzaWNzJTJDJTIwd2ViJTIwZGV2ZWxvcG1lbnQlMkMlMjBtYXJrdXAlMjBsYW5ndWFnZXN8ZW58MXwwfHx8MTcyNzA4MjQwOXww&ixlib=rb-4.0.3&q=85&w=800" alt="Introduction to HTML Basics" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>8 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/introduction-to-html-basics-r7c6ww"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> Introduction to HTML Basics </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-15.webp" alt="ThinnerMulberryTree avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>ThinnerMulberryTree</div> </div> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 border-surface-4 dark:border-elevated-4 max-w-sm"> <a href="https://quizgecko.com/learn/introduction-to-html-basics-tw3goi"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1508921340878-ba53e1f016ec?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHw0fHxIVE1MJTIwYmFzaWNzJTJDJTIwd2ViJTIwZGV2ZWxvcG1lbnQlMkMlMjBtYXJrdXAlMjBsYW5ndWFnZXN8ZW58MXwwfHx8MTczMjg5MjA2NHww&ixlib=rb-4.0.3&q=85&w=800" alt="Introduction to HTML Basics" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>5 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/introduction-to-html-basics-tw3goi"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> Introduction to HTML Basics </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-17.webp" alt="AmbitiousFortWorth avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>AmbitiousFortWorth</div> </div> </div> </div> </div> </div> </div> <div class="flex flex-col gap-24 justify-center flex-1 overflow-hidden mt-3 mb-6 p-4"> <div class="text-left font-medium text-sm leading-5 font-weight-500 block md:hidden"> <nav aria-label="breadcrumb"> <ol itemscope itemtype="https://schema.org/BreadcrumbList" class="flex flex-wrap space-x-2"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center"> <a itemprop="item" href="https://quizgecko.com/discover" class="text-primary-1 hover:underline"> <span itemprop="name">Discover</span> </a> <meta itemprop="position" content="1" /> <span class="ml-1">></span> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center"> <span itemprop="name">Overview of HTML Basics</span> <meta itemprop="position" content="2" /> </li> </ol> </nav> </div> </div> </div> </div> <div id="modal-share-lesson" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'share-lesson' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'share-lesson' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8 min-h-80 space-y-6 flex flex-col items-center" x-data="{ copied: false }"> <h3 class="text-3xl font-semibold text-elevated-5 dark:text-surface-0 text-center"> Share this lesson </h3> <div class="text-center text-elevated-1 dark:text-surface-5 -mt-2"> Copy the link or share on socials below </div> <div class="flex items-center justify-center space-x-2"> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1 lg:min-w-[410px]" id="lessonLink" type="text" value="https://quizgecko.com/learn/overview-of-html-basics-dsfcmw" readonly="readonly"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center copy-to-clipboard" color="secondary" type="button" data-clipboard-target="#lessonLink" @click="copied = true; setTimeout(() => copied = false, 2000)" type="button"> <span x-show="!copied">Copy Link</span> <span x-show="copied">Copied!</span> </button> </div> <div class="flex items-center justify-center space-x-2">  <a class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" href="https://wa.me/?text=https%3A%2F%2Fquizgecko.com%2Flearn%2Foverview-of-html-basics-dsfcmw" target="_blank" color="secondary"> <img src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/0fbf9eba-b371-4b2a-b6a7-29413d275f00/w=50" alt="whatsapp icon" class="w-6 h-6"> </a>  <a class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center lg:hidden" href="fb-messenger://share?link=https%3A%2F%2Fquizgecko.com%2Flearn%2Foverview-of-html-basics-dsfcmw" target="_blank" color="secondary"> <img src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/1c156636-b4f7-4ff7-77b6-83b1a6ef0e00/w=50" alt="messenger icon" class="w-6 h-6"> </a>  <a class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fquizgecko.com%2Flearn%2Foverview-of-html-basics-dsfcmw" target="_blank" color="secondary"> <img src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/50948a16-05a8-4b29-2f74-85a8d61be100/w=50" alt="x icon" class="w-6 h-6"> </a>  <a class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fquizgecko.com%2Flearn%2Foverview-of-html-basics-dsfcmw" target="_blank" color="secondary"> <img src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/55f85fb3-9222-4f5e-53f5-514c58715c00/w=50" alt="fb icon" class="w-6 h-6"> </a> </div> </div> </div> <div class="absolute bottom-0 left-0"> <svg width="235" height="104" viewBox="0 0 235 104" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_878_3668)"> <path d="M36.1298 79.0358C42.68 83.8622 40.8211 93.9832 40.8211 93.9832L34.4038 90.869C34.4038 90.869 35.0833 79.1206 26.3422 74.1404L36.1298 79.0358Z" fill="#FDF151" /> <path d="M26.1774 73.7554C26.2261 73.7291 26.2792 73.715 26.3331 73.714C26.3871 73.7131 26.4405 73.7254 26.4898 73.7501L36.2772 78.6454C36.2956 78.6547 36.3134 78.6656 36.3303 78.6779C43.0187 83.6061 41.2038 93.9661 41.1847 94.0703C41.1733 94.1322 41.15 94.1904 41.1165 94.2408C41.083 94.2911 41.04 94.3325 40.9907 94.3617C40.9413 94.3904 40.887 94.4065 40.8315 94.409C40.776 94.4114 40.7208 94.4001 40.6696 94.3758L34.2523 91.2616C34.1059 91.1907 34.015 91.022 34.0253 90.8418C34.0318 90.7268 34.5799 79.3135 26.1699 74.5223C26.1071 74.4865 26.0544 74.4313 26.0178 74.3631C25.9812 74.2949 25.9622 74.2163 25.963 74.1364C25.9638 74.0565 25.9843 73.9784 26.0222 73.911C26.0601 73.8437 26.1139 73.7898 26.1774 73.7554ZM35.9465 79.4126L29.8009 76.3388C32.1695 78.8281 33.3848 81.8504 34.0072 84.2514C34.7771 87.2214 34.8032 89.7399 34.7853 90.5919L40.5238 93.3769C40.7806 91.2855 41.3406 83.413 35.9465 79.4129L35.9465 79.4126Z" fill="#271A79" /> <path d="M20.3269 88.0047C22.643 83.8067 29.7051 76.4713 36.129 79.0344C36.129 79.0344 31.0388 75.7033 26.3414 74.1391C26.3414 74.1391 19.1398 72.5364 13.701 80.528L20.3269 88.0047Z" fill="#FDF151" /> <path d="M18.9084 75.1246C22.874 72.9856 26.3628 73.7116 26.4137 73.7229C26.4249 73.7254 26.436 73.7285 26.447 73.7321C31.1332 75.2923 36.265 78.6333 36.3164 78.667C36.3975 78.72 36.4582 78.8055 36.4866 78.9068C36.515 79.0081 36.5091 79.1179 36.4699 79.2145C36.431 79.3113 36.3616 79.3881 36.2754 79.4297C36.1892 79.4714 36.0924 79.4749 36.0041 79.4396C29.9187 77.0114 22.9978 83.9692 20.6447 88.2337C20.6149 88.2881 20.5746 88.3341 20.527 88.3684C20.4793 88.4026 20.4255 88.4243 20.3695 88.4316C20.3135 88.439 20.2568 88.4319 20.2035 88.4109C20.1503 88.3899 20.1019 88.3555 20.062 88.3103L13.436 80.8334C13.371 80.7601 13.3319 80.6623 13.3259 80.5585C13.32 80.4547 13.3476 80.3519 13.4037 80.2696C15.1458 77.7096 17.0779 76.1117 18.9082 75.1245L18.9084 75.1246ZM26.2543 74.5572C25.8994 74.4878 19.2872 73.3155 14.2029 80.4955L20.2652 87.3359C21.4216 85.4094 23.6353 82.6597 26.488 80.625C28.3575 79.2922 30.9694 77.9464 33.7683 78.0899C31.8633 76.9928 28.9795 75.4673 26.2543 74.5572Z" fill="#271A79" /> </g> <g clip-path="url(#clip1_878_3668)"> <path d="M208.87 107.758C201.247 105.798 199.867 95.5703 199.867 95.5703L206.838 95.9747C206.838 95.9747 209.824 107.267 219.546 108.511L208.87 107.758Z" fill="#FDF151" /> <path d="M219.818 108.81C219.78 108.854 219.735 108.888 219.685 108.91C219.635 108.932 219.581 108.941 219.527 108.938L208.851 108.184C208.831 108.183 208.811 108.179 208.791 108.174C201.007 106.174 199.513 95.7386 199.498 95.6333C199.49 95.5708 199.494 95.5071 199.51 95.4466C199.526 95.3862 199.553 95.3305 199.59 95.2838C199.628 95.2374 199.674 95.2009 199.725 95.1769C199.776 95.1528 199.831 95.1418 199.887 95.1445L206.857 95.5489C207.016 95.5581 207.153 95.6807 207.199 95.8539C207.229 95.9643 210.235 106.891 219.589 108.087C219.658 108.096 219.725 108.127 219.78 108.177C219.835 108.227 219.877 108.293 219.901 108.368C219.925 108.444 219.93 108.525 219.915 108.603C219.901 108.681 219.867 108.753 219.818 108.81ZM208.924 107.334L215.628 107.807C212.642 106.401 210.572 104.041 209.248 102.032C207.611 99.5466 206.81 97.1933 206.564 96.3867L200.331 96.0247C200.736 98.0884 202.638 105.697 208.924 107.334L208.924 107.334Z" fill="#271A79" /> <path d="M220.906 93.1396C220.032 97.9883 215.679 107.644 208.872 107.759C208.872 107.759 214.667 108.888 219.549 108.513C219.549 108.513 226.788 107.191 229.418 97.5564L220.906 93.1396Z" fill="#FDF151" /> <path d="M226.207 104.671C223.152 108.235 219.661 108.923 219.61 108.932C219.598 108.934 219.587 108.936 219.576 108.936C214.706 109.311 208.869 108.189 208.81 108.178C208.718 108.16 208.635 108.104 208.577 108.02C208.519 107.936 208.491 107.83 208.498 107.724C208.504 107.618 208.546 107.519 208.614 107.446C208.682 107.373 208.771 107.332 208.865 107.33C215.313 107.221 219.65 97.9752 220.538 93.0496C220.55 92.9868 220.573 92.9278 220.607 92.8769C220.641 92.8261 220.685 92.7847 220.735 92.7558C220.785 92.7269 220.841 92.7113 220.897 92.7101C220.953 92.7089 221.009 92.7222 221.061 92.749L229.572 97.166C229.655 97.2093 229.722 97.2857 229.76 97.3808C229.797 97.4759 229.803 97.5832 229.776 97.6825C228.934 100.769 227.617 103.027 226.207 104.671L226.207 104.671ZM219.502 108.086C219.855 108.012 226.41 106.518 228.958 97.7841L221.171 93.7432C220.682 96.005 219.456 99.4544 217.412 102.483C216.072 104.468 214.04 106.756 211.375 107.72C213.497 108.002 216.669 108.302 219.502 108.086Z" fill="#271A79" /> </g> <g clip-path="url(#clip2_878_3668)"> <path d="M117.949 107.011C113.273 114.126 118.096 122.885 118.096 122.885L123.168 117.428C123.168 117.428 118.956 106.677 125.64 98.5518L117.949 107.011Z" fill="#FDF151" /> <path d="M125.67 98.1269C125.616 98.1215 125.562 98.1292 125.511 98.1496C125.461 98.1701 125.414 98.2027 125.375 98.2453L117.684 106.704C117.67 106.72 117.657 106.737 117.644 106.755C112.87 114.021 117.724 123.021 117.774 123.111C117.803 123.165 117.843 123.21 117.89 123.244C117.936 123.278 117.989 123.3 118.044 123.308C118.099 123.315 118.155 123.309 118.208 123.289C118.261 123.27 118.309 123.237 118.35 123.194L123.422 117.738C123.537 117.613 123.571 117.419 123.507 117.254C123.466 117.149 119.48 106.66 125.91 98.8433C125.959 98.7848 125.991 98.7123 126.005 98.6338C126.018 98.5554 126.012 98.4742 125.987 98.3995C125.962 98.3249 125.919 98.2597 125.863 98.2115C125.807 98.1633 125.74 98.134 125.67 98.1269ZM118.228 107.293L123.057 101.982C121.593 105.252 121.372 108.567 121.519 111.065C121.7 114.155 122.442 116.528 122.718 117.32L118.183 122.2C117.306 120.339 114.385 113.176 118.228 107.293L118.228 107.293Z" fill="#271A79" /> <path d="M135.497 109.18C132.047 106.158 123.192 102.067 117.946 107.01C117.946 107.01 121.707 101.874 125.637 98.5509C125.637 98.5509 131.905 94.2022 139.437 99.5493L135.497 109.18Z" fill="#FDF151" /> <path d="M132.909 96.5382C128.539 96.0986 125.487 98.1581 125.443 98.1887C125.433 98.1956 125.424 98.2028 125.415 98.2105C121.494 101.525 117.697 106.687 117.659 106.739C117.599 106.82 117.568 106.925 117.572 107.031C117.576 107.137 117.615 107.238 117.681 107.313C117.747 107.388 117.836 107.433 117.929 107.438C118.023 107.443 118.114 107.408 118.187 107.34C123.156 102.658 131.764 106.45 135.269 109.52C135.313 109.559 135.365 109.587 135.42 109.6C135.475 109.613 135.532 109.612 135.587 109.597C135.642 109.582 135.693 109.553 135.736 109.512C135.78 109.471 135.815 109.42 135.839 109.362L139.779 99.7308C139.818 99.6364 139.825 99.5292 139.799 99.4295C139.773 99.3297 139.715 99.2443 139.638 99.1892C137.225 97.4763 134.927 96.7408 132.909 96.538L132.909 96.5382ZM125.846 98.9084C126.158 98.703 132.004 94.991 138.957 99.7169L135.352 108.528C133.681 107.178 130.768 105.474 127.473 104.692C125.314 104.181 122.455 103.95 119.873 105.191C121.326 103.409 123.567 100.839 125.846 98.9084Z" fill="#271A79" /> </g> <g clip-path="url(#clip3_878_3668)"> <path d="M103.326 72.7614C102.689 72.1827 102.028 71.6556 101.343 71.1824C97.4141 68.4645 92.8664 67.706 88.8666 69.1013C85.5503 70.2582 82.8494 72.7907 81.2609 76.2323C79.5997 79.832 79.2479 84.1755 80.2435 88.7934C80.6646 90.7477 81.3672 92.5276 82.3313 94.0842C83.5241 96.0098 85.8658 96.4702 87.5616 95.1122C89.2571 93.7541 89.6648 91.0921 88.4718 89.1661C88.0482 88.4825 87.7334 87.6707 87.5355 86.7535C86.3137 81.0864 88.5562 78.1332 91.062 77.259C93.0123 76.5785 95.3353 77.0212 97.4351 78.4736C99.3662 79.8095 102.071 82.6422 103.989 88.552C104.706 90.7619 106.865 91.8909 108.81 91.0731C110.755 90.2555 111.75 87.8008 111.033 85.5909C109.264 80.1419 106.624 75.7594 103.325 72.7614L103.326 72.7614Z" fill="#C084FC" /> <path d="M101.087 70.5159C101.239 70.6143 101.39 70.7153 101.54 70.8193C102.243 71.3067 102.918 71.8445 103.561 72.4295C106.903 75.4668 109.609 79.9671 111.387 85.4441C112.175 87.8712 111.078 90.5764 108.941 91.4745C108.433 91.6901 107.892 91.7889 107.35 91.7653C106.808 91.7417 106.275 91.5961 105.783 91.3369C105.29 91.0808 104.846 90.716 104.478 90.2637C104.11 89.8113 103.825 89.2803 103.638 88.7015C101.758 82.9074 99.1215 80.1404 97.2412 78.8397C95.2331 77.4503 93.0212 77.0236 91.1733 77.6684C88.8314 78.4853 86.7421 81.2747 87.9016 86.6531C88.0881 87.5184 88.3837 88.2816 88.7803 88.9217C90.0903 91.0367 89.641 93.9708 87.779 95.4624C85.9166 96.9537 83.3358 96.4464 82.0258 94.3314C81.0345 92.7309 80.3127 90.9025 79.8803 88.8967C78.8625 84.1763 79.2256 79.729 80.9299 76.0359C82.5653 72.4925 85.3453 69.8854 88.7581 68.6949C92.7069 67.3175 97.1717 67.9836 101.087 70.5159ZM105.834 90.4079C105.92 90.4634 106.008 90.5148 106.098 90.5618C106.5 90.7739 106.936 90.893 107.379 90.9123C107.823 90.9316 108.265 90.8507 108.681 90.6742C110.429 89.9394 111.327 87.726 110.682 85.7402C108.952 80.4088 106.327 76.0365 103.092 73.0961C102.469 72.5298 101.815 72.0091 101.149 71.5483C97.3101 68.8941 92.8749 68.1509 88.9775 69.5105C85.758 70.6338 83.1359 73.0917 81.5945 76.4314C79.9765 79.9375 79.6359 84.1773 80.6092 88.6927C81.0192 90.5947 81.7024 92.3265 82.6395 93.8394C83.7113 95.5696 85.8231 95.9848 87.3467 94.7647C88.8703 93.5445 89.2377 91.1438 88.1658 89.4133C87.7152 88.6859 87.381 87.8257 87.1721 86.8568C85.8882 80.9011 88.2835 77.7839 90.9535 76.8523C93.0062 76.1362 95.441 76.5955 97.6317 78.1104C99.6139 79.4818 102.387 82.3809 104.342 88.4052C104.615 89.2526 105.143 89.9621 105.833 90.4076L105.834 90.4079Z" fill="#271A79" /> <path d="M82.3353 94.0862C84.7878 98.0446 88.8366 100.272 92.6505 99.7602C95.4668 99.3823 97.7302 97.5015 98.7046 94.7294C99.6481 92.0457 99.7855 87.4989 95.0834 81.0788C94.4431 80.2036 93.7265 79.4042 92.9446 78.693C89.0184 75.1247 83.712 74.0634 78.7222 76.0323C72.4416 78.5105 68.2631 85.0757 68.0772 92.7581C68.0421 94.2135 68.1369 95.6141 68.3594 96.9214C68.7532 99.2346 70.7224 100.745 72.7578 100.295C74.7932 99.8445 76.1241 97.6047 75.7305 95.2915C75.612 94.5942 75.5619 93.8177 75.5821 92.9833C75.7025 88.0091 78.5512 85.1298 81.1773 84.0937C84.2571 82.8783 87.2977 83.7941 89.3111 86.5431C91.0884 88.9699 91.7432 90.5821 91.7061 91.2995C91.6427 92.526 89.6789 91.2708 88.4752 89.168" fill="#C084FC" /> <path d="M91.2308 76.8564C91.9081 77.2945 92.5592 77.7953 93.1789 78.3587C93.9804 79.0881 94.715 79.9075 95.3716 80.8047C100.192 87.3859 100.034 92.0948 99.0526 94.8862C98.0263 97.8062 95.649 99.7862 92.6936 100.183C88.745 100.713 84.5584 98.4158 82.0278 94.3312C81.9705 94.2388 81.9479 94.1242 81.965 94.0126C81.9821 93.9011 82.0374 93.8018 82.1188 93.7366C82.2003 93.6714 82.3011 93.6456 82.3992 93.6649C82.4973 93.6842 82.5846 93.747 82.6419 93.8395C85.0164 97.672 88.9277 99.8291 92.6065 99.3355C95.2838 98.9762 97.433 97.195 98.3556 94.5706C99.2611 91.9945 99.3784 87.61 94.7943 81.3513C94.17 80.4983 93.4716 79.7191 92.7096 79.0255C88.8368 75.5054 83.6534 74.5368 78.8444 76.4344C72.7128 78.8538 68.6335 85.2654 68.452 92.7686C68.4176 94.1933 68.5103 95.5628 68.7275 96.8392C69.0814 98.9176 70.8572 100.28 72.6861 99.8751C74.515 99.4707 75.7152 97.4508 75.3615 95.3723C75.2378 94.6446 75.1856 93.8368 75.2065 92.9713C75.3322 87.7799 78.3095 84.7727 81.0541 83.6897C84.2873 82.414 87.4817 83.3779 89.5994 86.269C91.2274 88.4919 92.1318 90.3341 92.0806 91.3234C92.0578 91.7642 91.854 92.0747 91.5214 92.1751C90.6175 92.4482 89.0538 90.9607 88.1603 89.4001C88.1328 89.3532 88.1137 89.3005 88.1042 89.2451C88.0947 89.1898 88.095 89.1328 88.105 89.0775C88.1151 89.0222 88.1346 88.9697 88.1626 88.923C88.1906 88.8764 88.2265 88.8365 88.2681 88.8056C88.3097 88.7748 88.3563 88.7537 88.4052 88.7435C88.454 88.7333 88.5041 88.7342 88.5526 88.7461C88.6012 88.7581 88.6471 88.7809 88.6878 88.8132C88.7285 88.8454 88.7631 88.8866 88.7897 88.9342C89.753 90.6168 91.029 91.4471 91.3197 91.3543C91.3236 91.3413 91.329 91.3163 91.3312 91.2742C91.3602 90.7115 90.773 89.2061 89.0222 86.8154C87.1127 84.2083 84.2257 83.3413 81.2998 84.4958C78.7925 85.4852 76.0722 88.2372 75.9571 92.9937C75.9376 93.7969 75.9853 94.5425 76.0987 95.2091C76.531 97.7497 75.0641 100.218 72.8287 100.713C70.5932 101.207 68.4228 99.5422 67.9905 97.0021C67.7628 95.665 67.6657 94.233 67.7016 92.7461C67.8919 84.8846 72.1694 78.1656 78.599 75.6284C82.8844 73.9374 87.4553 74.4145 91.2307 76.8566L91.2308 76.8564Z" fill="#271A79" /> <path d="M68.3578 96.9225C69.2879 102.388 72.6101 106.421 76.8216 107.197C80.19 107.818 83.3842 106.174 84.9592 103.007C86.2392 100.434 87.4481 94.8584 81.1598 86.4317C79.9086 84.7549 78.6771 83.3988 77.4804 82.311C70.9462 76.3719 65.4274 78.4219 63.1187 79.7821C59.9875 81.6271 57.4804 85.0753 56.0595 89.4917C54.7005 93.7152 54.4819 98.3812 55.4437 102.63C55.9603 104.911 58.0064 106.283 60.0144 105.694C62.0221 105.104 63.2312 102.777 62.7148 100.495C61.4358 94.8444 63.719 89.036 66.5681 87.3573C67.9774 86.527 71.0027 86.0203 75.4318 91.9555C78.4235 95.9648 78.62 98.2939 78.4413 98.764C78.2544 99.2561 77.8028 99.4531 77.369 99.227C76.4703 98.7579 76.0081 96.9346 75.7287 95.2926" fill="#C084FC" /> <path d="M75.2293 80.0469C76.0392 80.5708 76.8692 81.2077 77.7151 81.9764C78.9805 83.1265 80.2359 84.5322 81.4461 86.1543C87.8814 94.7783 86.614 100.546 85.2856 103.216C83.6322 106.539 80.2861 108.267 76.7609 107.617C72.3922 106.812 68.949 102.645 67.9889 97.0027C67.9714 96.8923 67.9929 96.7785 68.0487 96.6859C68.1045 96.5933 68.1902 96.5293 68.2871 96.5079C68.384 96.4865 68.4844 96.5093 68.5665 96.5714C68.6486 96.6335 68.7059 96.7299 68.7259 96.8398C69.6258 102.127 72.827 106.027 76.8818 106.775C80.0932 107.367 83.1353 105.805 84.6322 102.796C85.8642 100.32 87.0141 94.9358 80.8732 86.7066C79.6941 85.1263 78.4736 83.7591 77.2456 82.643C70.7962 76.7808 65.3382 78.9534 63.2911 80.1595C60.2437 81.955 57.8006 85.3208 56.412 89.6366C55.0789 93.7796 54.864 98.3559 55.8072 102.522C56.2715 104.573 58.1168 105.809 59.9208 105.28C61.7249 104.75 62.8152 102.651 62.3512 100.601C61.0282 94.7562 63.4207 88.7302 66.3955 86.9775C67.9039 86.0888 71.1208 85.5177 75.7182 91.6784C78.5493 95.4726 79.1039 98.0949 78.7859 98.932C78.6552 99.2757 78.4239 99.5347 78.1341 99.6614C77.8426 99.7889 77.515 99.772 77.2122 99.6142C76.3656 99.1721 75.7772 97.8249 75.36 95.3732C75.3425 95.2628 75.364 95.1489 75.4198 95.0563C75.4756 94.9637 75.5613 94.8998 75.6582 94.8784C75.7551 94.8569 75.8555 94.8797 75.9376 94.9418C76.0198 95.004 76.0771 95.1004 76.0971 95.2102C76.4543 97.3092 76.9347 98.5297 77.5258 98.8384C77.6451 98.9006 77.7625 98.9097 77.8653 98.8649C77.9662 98.8209 78.0462 98.7273 78.0966 98.5944C78.2039 98.2628 78.0186 96.0814 75.1454 92.231C70.8843 86.5209 68.0506 86.9634 66.7404 87.7353C64.0169 89.34 61.843 94.9309 63.0783 100.388C63.6455 102.893 62.3129 105.459 60.1077 106.106C57.903 106.754 55.6474 105.242 55.0799 102.736C54.0994 98.4042 54.3221 93.6485 55.7068 89.3449C57.1601 84.8278 59.7311 81.2968 62.946 79.4026C64.8524 78.2794 69.5343 76.3636 75.2291 80.0473L75.2293 80.0469Z" fill="#271A79" /> </g> <g clip-path="url(#clip4_878_3668)"> <path d="M19.815 30.9695C19.8538 30.9719 19.8925 30.975 19.9312 30.9788C21.993 31.1803 23.5157 33.2469 23.3324 35.5945C22.9612 40.3497 21.2912 44.7062 18.5029 48.1922C16.0109 51.3078 12.7471 53.6098 9.0644 54.849C1.7708 57.3032 -5.54182 55.0682 -9.56546 49.1548C-10.831 47.2947 -10.5292 44.6143 -8.89148 43.1681C-7.25325 41.7218 -4.89964 42.0575 -3.6343 43.9172C-1.51065 47.0386 2.64854 48.1178 6.95972 46.667C10.9245 45.333 15.346 41.5321 15.8665 34.8647C16.0462 32.5614 17.8017 30.843 19.815 30.9695Z" fill="#38BDF8" /> <path d="M-10.2944 44.4615C-10.0178 43.8241 -9.61727 43.2665 -9.12329 42.8313C-7.32436 41.243 -4.73019 41.6127 -3.34047 43.6553C-1.31162 46.6373 2.68888 47.6588 6.85175 46.2579C10.6977 44.9638 14.9868 41.2815 15.4904 34.8281C15.6888 32.2851 17.5966 30.403 19.8339 30.5435C20.3962 30.5767 20.9461 30.7415 21.4493 31.0277C21.9524 31.314 22.3979 31.7155 22.7581 32.2071C23.1067 32.6777 23.3698 33.2226 23.5319 33.8103C23.694 34.398 23.752 35.0168 23.7026 35.631C23.3244 40.4803 21.6209 44.923 18.7769 48.4789C16.2385 51.6527 12.9154 53.9967 9.16686 55.2582C1.72403 57.7624 -5.74636 55.4696 -9.86464 49.4169C-10.8601 47.9538 -10.9718 46.0229 -10.2944 44.4615ZM15.0764 39.6883C13.3559 43.6539 10.0805 46.0603 7.06209 47.076C2.60126 48.5772 -1.71503 47.4401 -3.93373 44.1789C-5.07073 42.5078 -7.19325 42.2053 -8.66527 43.5048C-10.1369 44.8043 -10.4089 47.2215 -9.27179 48.8929C-5.34346 54.6665 1.81156 56.8437 8.95626 54.4397C12.573 53.2227 15.7775 50.9632 18.2231 47.9054C20.9557 44.4893 22.5923 40.2196 22.9561 35.5578C22.9966 35.0554 22.9492 34.549 22.8166 34.0682C22.6839 33.5873 22.4687 33.1415 22.1834 32.7565C21.8887 32.3542 21.5241 32.0257 21.1123 31.7915C20.7006 31.5573 20.2506 31.4224 19.7904 31.3954C17.9601 31.2804 16.3995 32.8202 16.237 34.9009C16.097 36.6954 15.6834 38.2893 15.0764 39.6883Z" fill="#271A79" /> <path d="M-9.56805 49.1558C-13.0166 44.0873 -13.4194 38.4939 -10.6456 34.1938C-8.29142 30.5438 -3.95782 28.5055 0.212518 28.767C1.40883 28.842 2.5907 29.1062 3.70948 29.576C8.40848 31.5486 10.9525 36.5571 10.5151 42.9739C10.0849 49.2811 6.942 54.6874 1.66483 58.1968C-2.69768 61.0981 -8.39818 62.5602 -13.9772 62.21L-13.9974 62.2087C-16.0637 62.0773 -17.64 60.0635 -17.5183 57.7111C-17.3967 55.3596 -15.6244 53.5594 -13.5594 53.6891C-13.5528 53.6897 -13.5474 53.6899 -13.5413 53.6902C-9.39326 53.9507 -5.2245 52.9095 -2.10133 50.8325C1.0714 48.7225 2.81055 45.8657 3.04231 42.3393C3.23344 39.4319 2.34878 38.2488 1.09776 37.583C-0.913953 36.5121 -3.62664 37.1561 -4.60857 39.2308C-5.18239 40.4433 -4.99771 41.9181 -3.63681 43.9184" fill="#38BDF8" /> <path d="M-11.8668 35.6601C-11.6105 35.0691 -11.3039 34.4953 -10.9467 33.9415C-8.57338 30.2618 -4.18433 28.0634 0.234962 28.3405C1.49708 28.4197 2.71018 28.7005 3.8408 29.1752C8.70565 31.2173 11.3405 36.3873 10.8894 43.0052C10.4494 49.4565 7.24053 54.9823 1.85378 58.5643C-2.57017 61.5062 -8.34794 62.99 -13.9984 62.6351L-14.0188 62.6339C-15.118 62.564 -16.1263 62.0109 -16.8579 61.0765C-17.5895 60.142 -17.9567 58.9382 -17.8919 57.6865C-17.7583 55.1047 -15.8048 53.1198 -13.5371 53.2623C-9.44282 53.5193 -5.34966 52.499 -2.28918 50.4635C0.779397 48.4228 2.44766 45.6788 2.66912 42.308C2.86039 39.3979 1.90174 38.4816 0.938582 37.9687C-0.986642 36.9439 -3.42464 37.6273 -4.27829 39.4314C-4.61915 40.1516 -4.89275 41.3731 -3.33971 43.6556C-3.28252 43.7452 -3.2583 43.8568 -3.27216 43.9666C-3.28602 44.0765 -3.33688 44.176 -3.41397 44.2441C-3.49106 44.3122 -3.58832 44.3435 -3.68515 44.3315C-3.78198 44.3194 -3.87078 44.2649 -3.93272 44.1795C-5.29902 42.1714 -5.62721 40.4856 -4.93784 39.0285C-3.90444 36.8453 -1.00937 35.9887 1.25788 37.1957C2.92766 38.0847 3.59348 39.6803 3.41653 42.3693C3.17533 46.0377 1.3824 49.0089 -1.91264 51.2001C-5.09708 53.3178 -9.34344 54.3805 -13.5626 54.1155L-13.5875 54.1139C-15.4361 53.9978 -17.0344 55.6216 -17.1437 57.7342C-17.1966 58.7582 -16.8963 59.7432 -16.2978 60.5077C-15.6993 61.2722 -14.8743 61.7249 -13.975 61.7819L-13.9769 62.2092L-13.9551 61.7833C-8.44782 62.1291 -2.82309 60.6876 1.47689 57.8279C6.64431 54.3916 9.72154 49.1049 10.1419 42.9417C10.5657 36.726 8.1124 31.8789 3.57943 29.9758C2.51873 29.5305 1.37877 29.2669 0.191176 29.1925C-3.98143 28.9309 -8.1164 30.9926 -10.3434 34.445C-13.0122 38.5821 -12.6114 43.9838 -9.27103 48.8932C-9.24015 48.9373 -9.2173 48.988 -9.20381 49.0424C-9.19031 49.0967 -9.18644 49.1536 -9.19243 49.2097C-9.19841 49.2658 -9.21413 49.3201 -9.23866 49.3693C-9.2632 49.4185 -9.29606 49.4617 -9.33535 49.4964C-9.37463 49.5311 -9.41956 49.5566 -9.46752 49.5713C-9.51547 49.5861 -9.5655 49.5899 -9.6147 49.5825C-9.66389 49.5751 -9.71128 49.5567 -9.7541 49.5282C-9.79692 49.4998 -9.83432 49.4619 -9.86413 49.4168C-12.9794 44.8378 -13.6767 39.8307 -11.8671 35.6597L-11.8668 35.6601Z" fill="#271A79" /> </g> <g clip-path="url(#clip5_878_3668)"> <path d="M185.876 102.322C186.651 104.521 185.909 107.086 184.048 108.31C180.087 110.914 174.875 111.744 170.771 110.423C167.829 109.477 165.593 107.538 164.306 104.817C161.171 98.1852 163.46 93.2223 164.975 89.9376C166.318 87.0256 166.48 85.7778 165.465 84.4441C164.48 83.1486 160.42 81.9155 152.192 84.7506C149.926 85.5312 147.528 84.0841 146.834 81.5195C146.142 78.9541 147.417 76.2417 149.684 75.4609C164.8 70.253 170.558 75.526 172.644 79.1325C176.539 85.8643 174.15 91.2851 172.584 94.4382C170.999 97.6295 170.654 100.063 173.109 101.083C174.947 101.847 177.777 101.197 179.729 99.9129C181.777 98.5663 184.404 99.3543 185.596 101.673C185.704 101.882 185.797 102.098 185.876 102.322Z" fill="#F5C433" /> <path d="M165.802 73.4162C169.751 74.5327 171.883 76.9329 173.001 78.8661C177.203 86.1269 174.227 92.1176 172.957 94.6756C171.905 96.7926 171.551 98.3021 171.873 99.2898C172.067 99.8835 172.519 100.321 173.255 100.627C174.839 101.286 177.528 100.797 179.512 99.4923C180.602 98.7759 181.871 98.5826 183.092 98.9485C183.692 99.1265 184.255 99.4374 184.748 99.8631C185.242 100.289 185.655 100.821 185.966 101.429C186.084 101.658 186.186 101.896 186.273 102.142C187.133 104.579 186.268 107.41 184.262 108.729C180.206 111.396 174.864 112.245 170.652 110.889C167.596 109.906 165.27 107.885 163.927 105.044C160.684 98.1861 163.037 93.0863 164.593 89.7116C165.975 86.7153 165.938 85.8094 165.139 84.7595C164.179 83.4974 159.971 82.5767 152.316 85.2142C149.828 86.071 147.185 84.4768 146.423 81.6602C146.054 80.2952 146.177 78.8504 146.769 77.5916C147.361 76.3328 148.351 75.4108 149.557 74.9955C156.948 72.4491 162.151 72.384 165.802 73.4162ZM173.43 101.701C173.269 101.655 173.112 101.601 172.96 101.538C171.987 101.134 171.35 100.49 171.068 99.6251C170.648 98.3362 171.01 96.612 172.208 94.1989C173.504 91.5908 176.199 86.1641 172.284 79.3971C170.263 75.9043 164.657 70.8087 149.808 75.9242C148.821 76.2641 148.011 77.0185 147.527 78.0483C147.043 79.078 146.942 80.2603 147.243 81.377C147.867 83.6813 150.03 84.9861 152.065 84.285C160.724 81.3017 164.766 82.7817 165.789 84.1264C167.033 85.7608 166.64 87.3747 165.354 90.1616C163.881 93.3551 161.655 98.1816 164.683 104.587C165.914 107.189 168.059 109.046 170.886 109.955C174.886 111.242 179.966 110.43 183.831 107.889C185.471 106.81 186.179 104.493 185.476 102.5C185.406 102.3 185.321 102.104 185.225 101.916C184.971 101.419 184.632 100.983 184.228 100.635C183.824 100.286 183.364 100.032 182.873 99.8864C182.383 99.7377 181.871 99.7004 181.369 99.7768C180.866 99.8532 180.382 100.042 179.944 100.331C178.181 101.491 175.467 102.276 173.43 101.701L173.43 101.701Z" fill="#271A79" /> </g> <defs> <clipPath id="clip0_878_3668"> <rect width="24.4432" height="26.823" fill="white" transform="matrix(-0.853824 0.460541 -0.395578 -0.948615 43.9531 92.7666)" /> </clipPath> <clipPath id="clip1_878_3668"> <rect width="25.3222" height="25.8606" fill="white" transform="matrix(0.634844 -0.740648 0.687666 0.762409 197.309 97.9424)" /> </clipPath> <clipPath id="clip2_878_3668"> <rect width="23.3528" height="27.9201" fill="white" transform="matrix(0.984913 0.0990542 0.0792183 -1.00497 114.785 122.981)" /> </clipPath> <clipPath id="clip3_878_3668"> <rect width="49.2896" height="54.505" fill="white" transform="matrix(-0.853707 -0.552251 0.441916 -0.881407 91.707 128.071)" /> </clipPath> <clipPath id="clip4_878_3668"> <rect width="46.0044" height="33.6993" fill="white" transform="matrix(-0.393594 0.907219 -0.884393 -0.494938 26.0625 33.6123)" /> </clipPath> <clipPath id="clip5_878_3668"> <rect width="44.9665" height="34.8095" fill="white" transform="matrix(-0.962276 -0.272077 0.214733 -0.976673 184.406 114.786)" /> </clipPath> </defs> </svg> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('showQuiz', () => ({ loading: false, showStudyNotes: true, hideFlashcards: false, user: window.user, openQuestions: [], openedQuestions: null, audioLoading: false, quizId: 974535, init: function() { // maybe not best long term approach, but a quick fix to an odd issue this.slug = window.location.pathname.split('/').pop(); }, openQuestion(id) { if (!this.user && this.openQuestions.length >= 2) { this.$dispatch('open-modal', 'register'); return; } if (!this.user && !this.openedQuestions) { this.openedQuestions = new Set(); } if (!this.user && this.openedQuestions.size >= 2) { this.$dispatch('open-modal', 'register'); return; } if (this.openQuestions.includes(id)) { this.openQuestions.splice(this.openQuestions.indexOf(id), 1); } else { this.openQuestions.push(id); if (!this.user) { this.openedQuestions.add(id); } } }, playFlashcards: function() { if (!window.user) { this.$dispatch('open-modal', 'register'); return; } if (this.hideFlashcards) { return; } window.location.href = 'https://quizgecko.com/learn/' + this.slug + '/flashcards/review'; }, playSpacedRepetitionFlashcards: function() { if (!window.user) { this.$dispatch('open-modal', 'register'); return; } if (!window.user.is_paid) { this.$store.ui.modals.plansModal.toggle( "Upgrade to use spaced repetition flashcards" ); return; } window.location.href = 'https://quizgecko.com/learn/' + this.slug + '/flashcards/spaced-repetition'; }, playQuiz: function() { if (!window.user) { this.$dispatch('open-modal', 'register'); return; } window.location.href = 'https://quizgecko.com/quiz/' + this.slug + '/play'; }, playChat: function() { if (!this.user) { this.$dispatch('open-modal', 'register'); return; } window.location.href = 'https://quizgecko.com/chat/assistant?quiz_ids=' + this.quizId; }, duplicate: function() { if (!this.user) { this.$dispatch('open-modal', 'register'); return; } if (!this.user?.is_paid) { this.$store.ui.modals.plansModal.toggle(); return; } if (this.user && this.user.is_paid) { let url = 'https://quizgecko.com/learn/974535/duplicate'; return window.location.href = url; } }, downloadPdf: function(quizId, withAnswers) { if (!this.user) { this.$dispatch('open-modal', 'register'); return; } if (!this.user?.is_paid) { this.$store.ui.modals.plansModal.toggle(); return; } const url = `/generate/${quizId}/export/pdf` + (withAnswers ? '?answers=true' : ''); window.location.href = url; }, deleteQuiz(quizId) { if (!confirm("Are you sure you want to delete this quiz?")) { return; } axios.delete(`/api/v1/quiz/${quizId}`) .then(() => { window.location.href = '/library?deleted=true'; }) .catch(error => { console.error("Failed to delete quiz:", error); }); }, })); }); </script> </div> </main> <div x-data="bottomBannerMobile()" class="sm:hidden" x-show="open" x-cloak> <div class="fixed bottom-0 start-0 z-[4147483004] w-full"> <div id="bottom-banner" tabindex="-1" class="flex justify-between py-4 px-5 border-t bg-surface-0 rounded-t-[20px] z-20">  <div class="relative w-full box-border text-center px-md pt-md pb-xl text-elevated-3"> <div class="mx-auto"> <span class="font-bold text-lg text-elevated-2 ">Use Quizgecko on... </span> </div> <div slot="ctas" class="mt-6 space-y-6"> <div class="flex justify-between box-border mb-md"> <div class="flex items-center space-x-4"> <div class="w-[48px] h-[48px] flex items-center justify-center border border-solid border-neutral-border-weak rounded-lg"> <img class="w-[48px] h-[48px] text-[48px] rounded-lg" src="https://quizgecko.com/images/icon-small.png" alt="Browser" /> </div> <span class="text-16 font-bold text-neutral-content-strong ml-xs" x-text="appName"></span> </div> <a :href="appUrl" class="min-w-[120px] px-[var(--rem14)] items-center justify-center inline-flex bg-primary-1 rounded-lg text-surface-0 font-bold" id="primary-button" rel="nofollow"> <span class="flex items-center justify-center"> <span class="flex items-center gap-xs">Open</span></span> </a> </div> <div class="flex justify-between box-border"> <div class="flex items-center space-x-4"> <div class="w-[48px] h-[48px] flex items-center justify-center border border-solid border-neutral-border-weak rounded-lg"> <img class="w-[40px] h-[40px] text-[40px] rounded-full" src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/f6dbf467-b532-444e-7df3-ba798d577a00/thumb" alt="Browser" /> </div> <span id="continue-label" class="text-16 font-bold text-neutral-content-strong ml-xs"> Browser </span> </div> <button @click="toggle()" class="min-w-[120px] px-[var(--rem14)] items-center justify-center inline-flex bg-surface-3 rounded-lg text-elevated-3 font-bold" id="secondary-button"> <span class="flex items-center justify-center"> <span class="flex items-center gap-xs">Continue</span> </span> </button> </div> </div> </div> </div> </div> <div id="backdrop" part="backdrop" class="fixed inset-0 bg-black opacity-50 z-10"></div> </div> <script> document.addEventListener("alpine:init", () => { Alpine.data("bottomBannerMobile", (quiz) => ({ open: false, os: null, init() { const closedTimestamp = localStorage.getItem('bottomMobileBannerClosedTimestamp'); const currentTimestamp = Date.now(); const oneWeekInMilliseconds = 7 * 24 * 60 * 60 * 1000; this.open = true; if (closedTimestamp && currentTimestamp - closedTimestamp < oneWeekInMilliseconds) { this.open = false; } else { localStorage.removeItem('bottomMobileBannerClosedTimestamp'); } this.os = this.getOS(); this.setAppDetails(); }, setAppDetails() { if (this.os === 'iOS') { this.appUrl = 'https://apps.apple.com/gb/app/quizgecko-ai-study-quizzes/id6473546188'; this.appName = 'iPhone App'; } else if (this.os === 'Android') { this.appUrl = 'https://play.google.com/store/apps/details?id=com.quizgecko'; this.appName = 'Android App'; } else { this.appUrl = 'https://quizgecko.com/mobile'; this.appName = 'Mobile App'; } }, toggle() { console.log('toggle'); this.open = !this.open; if (!this.open) { localStorage.setItem('bottomMobileBannerClosedTimestamp', Date.now()); } else { localStorage.removeItem('bottomMobileBannerClosedTimestamp'); } }, getOS() { const userAgent = window.navigator.userAgent, platform = window.navigator.platform, iosPlatforms = ['iPhone', 'iPad', 'iPod'], androidPlatforms = ['Android']; if (iosPlatforms.indexOf(platform) !== -1) { return 'iOS'; } else if (androidPlatforms.some(substring => userAgent.includes(substring))) { return 'Android'; } else { return 'other'; } } })); }); </script> <div id="modal-help" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'help' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'help' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8"> <template x-if="$store.ui?.modals?.help?.title"> <h3 class="text-lg font-semibold text-elevated-3 pb-2" x-text="$store.ui?.modals?.help?.title"></h3> </template> <template x-if="$store.ui?.modals?.help?.content"> <p class="mt-3 text-elevated-1 dark:text-surface-5" x-html="$store.ui?.modals?.help?.content"></p> </template> </div> <div class="flex justify-end p-4 space-x-2 bg-surface-2 dark:bg-elevated-3"> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click.prevent="$dispatch('close-modal', 'help')" type="button"> Got it! </button> </div> </div> </div> </div> </div> </div> <div id="modal-limit" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'limit' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'limit' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div> <div class="p-8">  <h3 class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-3 pb-2 text-center mt-2"> Upgrade to continue </h3> <div> <div class="py-2 mt-2 mb-4 text-elevated-1 dark:text-surface-6 text-md text-center prose-dark"> <div class="max-w-md mx-auto mb-8 mt-2 bg-green-50 rounded-lg text-center"> <div class="p-3"> <div class="ml-3"> <p class="text-md font-bold text-green-600 uppercase"> Today's Special Offer</p> <p class="mt-1 text-md text-green-700"> Save an additional 20% with coupon: SAVE20 </p> </div> </div> </div> <p class="mb-7 mt-2"> <span class="text-elevated-1 dark:text-surface-5"> Upgrade to a paid plan to continue </span> </p> <div class="mx-auto max-w-md"> <a class="px-6 py-4 text-md rounded-xl w-full bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" full="true" size="lg" href="https://quizgecko.com/plans?offer=special"> View Special Deals </a> </div> </div> </div> </div> <div class="p-8 bg-surface-2 dark:bg-elevated-4"> <div class="mx-auto max-w-sm px-2 mt-4"> <p class="font-semibold text-elevated-1 dark:text-surface-5 text-lg text-center"> Trusted by top students and educators worldwide </p> </div> <div class="mb-5 -mt-6 hidden:sm-block"> <div class="mx-auto max-w-7xl px-6 lg:px-8 mt-8"> <div class="grid grid-cols-2 gap-8 lg:grid-cols-5"> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-16 w-auto object-contain" src="https://quizgecko.com/images/logos/universities/stanford-light.png" alt="Stanford" width="158" height="48"> <img class="hidden dark:block max-h-16 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/stanford-dark.png" alt="Stanford" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-light.png" alt="Princeton" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-dark.png" alt="Princeton" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-light.png" alt="Yale" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-dark.png" alt="Yale" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-light.png" alt="Berkeley" width="158" height="48"> <img class="hidden dark:block max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-dark.png" alt="Berkeley" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-2 lg:col-span-1"> <img class="block dark:hidden max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-light.png" alt="Oxford" width="158" height="48"> <img class="hidden dark:block max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-dark.png" alt="Oxford" width="158" height="48"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="modal-feedback" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'feedback' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'feedback' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data="feedbackModal"> <p class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-4 pb-2 text-center mt-2"> Feedback </p> <div class="mt-4 prose dark:prose-dark"> <p class="text-elevated-1 dark:text-surface-5"> We read all feedback carefully, but we do not reply to all submissions. If you have an issue requiring a response, please use the <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2" href="https://help.quizgecko.com" target="_blank">Help Center.</a> </p> </div> <div class="mt-6"> <form method="POST" enctype="multipart/form-data" x-on:submit.prevent="submit()"> <input type="hidden" name="_token" value="bGwIFHGf6a4tGeX4P7mdHSkPCXU14qyHEANYbCYf" autocomplete="off"> <div class="mb-4"> <label for="category" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Category </label> <select id="category" name="category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-surface-5 dark:border-elevated-2 focus:outline-none focus:ring-primary-1 focus:border-primary-1 dark:bg-elevated-3 dark:text-surface-4 sm:text-sm rounded-md"> <option value="">Select a category</option> <option value="bug">General Bug</option> <option value="feedback">General feedback</option> <option value="question_generation">Generating questions</option> <option value="quiz_play">Playing a quiz</option> <option value="quiz_share">Sharing a quiz</option> </select> </div> <div class="mb-4"> <label for="feedback" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Feedback </label> <textarea id="feedback" name="feedback" rows="4" x-model="feedback" class="mt-1 block w-full p-2.5 text-sm text-gray-900 bg-surface-0 border border-surface-5 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-elevated-3 dark:border-elevated-2 dark:text-surface-4" placeholder="Your feedback..."></textarea> </div> <div class="mb-4"> <label for="image" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Image (optional) </label> <input type="file" id="image" name="image" x-on:change="images = Object.values($event.target.files)" class="mt-1 block w-full text-sm text-gray-900 bg-surface-0 border border-surface-5 cursor-pointer focus:outline-none focus:border-transparent rounded-lg dark:bg-elevated-3 dark:border-elevated-2 dark:text-surface-4"> </div> <div class="flex justify-end"> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="submit" type="button"> Submit </button> </div> </form> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('feedbackModal', () => ({ open: false, feedback: "", category: "general", images: null, submit() { this.$dispatch('close-modal', 'feedback'); let formData = new FormData(); formData.append('feedback', this.feedback); formData.append('category', this.category); if (this.images) { formData.append('image', this.images[0]); } this.open = false; axios.post("/api/v1/feedback", formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then((response) => { this.feedback = ""; this.images = null; this.open = false; window.alert( "Thank you for your feedback! Please note we do not reply to submissions here. If you need a response from us, please use the help center to contact us." ); }) .catch((error) => { console.error("Error submitting feedback:", error); window.alert( "Sorry, there was an error submitting your feedback. Please try again." ); this.open = false; }); } })); }); </script> </div> </div> </div> </div> </div> <div id="modal-register" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'register' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'register' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data="{ showEmailForm: false }"> <p class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-4 pb-2 text-center mt-2"> Create your free account </p> <div class="mb-3 mt-10" x-show="!showEmailForm"> <div class="mt-6 text-center mx-auto max-w-sm"> <a x-data @click="$store.signInMethod.trackSignIn('google')" x-tooltip="Last used" x-tooltip-position="left" x-tooltip-display="$store.signInMethod.method === 'google'" href="https://quizgecko.com/auth/google/redirect" class="px-5 py-3 text-md rounded-lg w-full bg-blue-600 dark:border-blue-600 hover:bg-blue-700 hover:border-blue-600 active:bg-blue-100 focus:border-blue-600 focus:shadow-outline-gray text-surface-0 disabled:bg-blue-200 disabled:text-surface-3 inline-flex justify-center font-bold border shadow-sm disabled:cursor-not-allowed cursor-pointer disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mt-1 sm:w-full"> <svg class="w-6 h-6 mr-1" viewBox="0 0 533.5 544.3"> <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"></path> <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"></path> <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"></path> <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"></path> </svg> <span class="ml-2"> Continue with Google </span> </a> </div> <div class="mt-2 text-center mx-auto max-w-sm"> <a href="https://quizgecko.com/auth/apple/redirect" x-data @click="$store.signInMethod.trackSignIn('apple')" x-tooltip-position="left" x-tooltip="Last used" x-tooltip-display="$store.signInMethod.method === 'apple'" class="px-5 py-3 text-md rounded-lg w-full dark:border-elevated-3 hover:bg-elevated-3 hover:border-black active:bg-surface-3 focus:border-black focus:shadow-outline-gray text-surface-0 disabled:text-surface-3 disabled:bg-surface-4 inline-flex justify-center font-bold border shadow-sm disabled:cursor-not-allowed cursor-pointer disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 mt-1 sm:w-full bg-black"> <svg class="w-5 h-5 mr-0.5 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"> </path> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"> </path> </svg> <span class="ml-2"> Sign in with Apple </span> </a> </div> <div class="text-center mt-8"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" x-data="" x-tooltip="Last used" x-tooltip-position="left" x-tooltip-display="$store.signInMethod.method === 'email'" color="secondary" type="button" @click="showEmailForm = true; $store.signInMethod.trackSignIn('email')" type="button"> or continue with email </button> </div> </div> <form method="POST" action="https://quizgecko.com/register" class="" x-show="showEmailForm"> <input type="hidden" name="_token" value="bGwIFHGf6a4tGeX4P7mdHSkPCXU14qyHEANYbCYf" autocomplete="off"> <div class="mt-2 mb-6"> <button class="px-3 py-2 text-sm rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" color="light" size="sm" @click="showEmailForm = false" type="button"> ← Back </button> </div>  <div> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="name"> Your Name </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="name" type="text" name="name" required="required" autofocus="autofocus"> </div>  <div class="mt-4"> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="email"> Email </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="email" type="email" name="email" required="required"> </div>  <div class="mt-4"> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="password"> Password </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="password" type="password" name="password" required="required" autocomplete="new-password"> </div>  <div class="mt-4"> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="password_confirmation"> Confirm Password </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="password_confirmation" type="password" name="password_confirmation" required="required"> </div> <div class="flex items-center justify-end mt-4"> <a class="text-sm text-elevated-1 underline hover:text-gray-900 dark:text-surface-5 dark:hover:text-surface-3" href="https://quizgecko.com/login"> Already registered? </a> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center ml-4" type="submit" type="button"> Verify email → </button> </div> </form> <div class="mt-12 text-center max-w-sm mx-auto"> <p class="text-sm text-surface-6 "> By continuing, you agree to Quizgecko's <a class="underline" target="_blank" href="https://quizgecko.com/terms">Terms of Service</a> and <a href="https://quizgecko.com/privacy-policy" class="underline" target="_blank" rel="noopener noreferrer">Privacy Policy</a>. </p> </div> </div> <div class="p-8 bg-surface-2 dark:bg-elevated-4"> <div class="mx-auto max-w-sm px-2 mt-4"> <p class="font-semibold text-elevated-1 text-lg text-center dark:text-surface-5"> Trusted by top students and educators worldwide </p> </div> <div class="mb-5 -mt-6"> <div class="mx-auto max-w-7xl px-6 lg:px-8 mt-8"> <div class="grid grid-cols-2 gap-8 lg:grid-cols-5"> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-16 w-auto object-contain" src="https://quizgecko.com/images/logos/universities/stanford-light.png" alt="Stanford" width="158" height="48"> <img class="hidden dark:block max-h-16 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/stanford-dark.png" alt="Stanford" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-light.png" alt="Princeton" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-dark.png" alt="Princeton" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-light.png" alt="Yale" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-dark.png" alt="Yale" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-light.png" alt="Berkeley" width="158" height="48"> <img class="hidden dark:block max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-dark.png" alt="Berkeley" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-2 lg:col-span-1"> <img class="block dark:hidden max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-light.png" alt="Oxford" width="158" height="48"> <img class="hidden dark:block max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-dark.png" alt="Oxford" width="158" height="48"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="modal-confirm" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'confirm' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'confirm' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data> <h3 class="text-lg font-semibold text-elevated-3 pb-2" x-text="$store.confirmModal.title"></h3> <p class="mt-3 text-elevated-1 dark:text-surface-5" x-html="$store.confirmModal.message"></p> <div class="mt-6 flex justify-end space-x-3"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" color="secondary" @click="$store.confirmModal.onCancel()" type="button"> Cancel </button> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" @click="$store.confirmModal.onOk()" type="button"> OK </button> </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.store('confirmModal', { open: false, title: '', message: '', onOk: () => {}, onCancel: () => {}, show(title, message) { window.dispatchEvent(new CustomEvent('open-modal', { detail: 'confirm' })); this.title = title; this.message = message; this.open = true; }, hide() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'confirm' })); this.open = false; } }); }); window.confirmModal = (title, message) => { return new Promise((resolve) => { const confirmModal = Alpine.store('confirmModal'); confirmModal.show(title, message); confirmModal.onOk = () => { confirmModal.hide(); resolve(true); }; confirmModal.onCancel = () => { confirmModal.hide(); resolve(false); }; }); }; </script> <div x-data="{ notifications: [], add(e) { if (!e.detail.type) { e.detail.type = 'success' } this.notifications.push({ id: e.timeStamp, type: e.detail.type, content: e.detail.content, title: e.detail.title, linkText: e.detail.linkText, linkUrl: e.detail.linkUrl, }) }, remove(notification) { this.notifications = this.notifications.filter(i => i.id !== notification.id) }, }" @notify.window="add($event)" class="fixed top-2 right-0 z-50" role="status" aria-live="polite">  <div x-show="notifications.length > 0" x-transition class="flex w-full min-w-[300px] max-w-xs xl:max-w-sm flex-col space-y-4 pr-4 pb-4 sm:justify-start">  <template x-for="notification in notifications" :key="notification.id"> <div x-data="{ show: false, init() { this.$nextTick(() => this.show = true) setTimeout(() => this.transitionOut(), 6500) }, transitionOut() { this.show = false setTimeout(() => this.remove(this.notification), 400) }, }" x-show="show" x-transition.duration.300ms class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-surface-0 dark:bg-elevated-4 shadow-lg ring-1 ring-surface-4 dark:ring-elevated-4 ring-opacity-5 p-4"> <div class="flex items-start">  <div x-show="notification.type === 'info'" class="flex-shrink-0"> <svg class="w-6 h-6 text-surface-6 dark:text-elevated-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z"/></svg> <span class="sr-only"> Information: </span> </div> <div x-show="notification.type === 'success'" class="flex-shrink-0"> <svg class="w-6 h-6 text-green-400 dark:text-success-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/></svg> <span class="sr-only"> Success: </span> </div> <div x-show="notification.type === 'error'" class="flex-shrink-0"> <svg class="w-6 h-6 text-red-400 dark:text-error-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"/></svg> <span class="sr-only"> Error: </span> </div>  <div class="ml-3 w-0 flex-1 pt-0.5"> <p x-text="notification.title" x-show="notification.title" class="text-sm font-semibold text-elevated-3 dark:text-surface-4 mb-1"></p> <p x-text="notification.content" class="text-sm text-elevated-2 dark:text-surface-5"></p> <div class="mt-2 flex" x-show="notification.linkText"> <a class="px-3 py-2 text-sm rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="link" target="_blank" x-text="notification.linkText" size="sm" x-bind:href="notification.linkUrl"> </a> </div> </div>  <div class="ml-4 flex flex-shrink-0"> <button @click="transitionOut()" type="button" class="inline-flex text-surface-6 dark:text-elevated-0"> <svg aria-hidden class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> <span class="sr-only">Close notification</span> </button> </div> </div> </div> </template> </div> </div> <footer aria-labelledby="footer-heading"> <p id="footer-heading" class="sr-only">Footer</p> <div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-28"> <div class="xl:grid xl:grid-cols-3 xl:gap-10"> <div class="mt-10 xl:mt-0"> <img class="w-8 rounded-md" src="https://quizgecko.com/images/icon-small.png" alt=""> <div class="mt-4 border-elevated-4/10 pt-4 md:flex md:items-center md:justify-between"> <div class="flex space-x-6 md:order-2"> <a href="https://discord.gg/HsRXwQ3S7Z" target="_blank" class="text-surface-6 hover:text-gray-500"> <span class="sr-only">Discord</span> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M247.51,174.39,218,58a16.08,16.08,0,0,0-13-11.88l-36.06-5.92a16.22,16.22,0,0,0-18.26,11.88l-.21.85a4,4,0,0,0,3.27,4.93,155.62,155.62,0,0,1,24.41,5.62,8.2,8.2,0,0,1,5.62,9.7,8,8,0,0,1-10.19,5.64,155.4,155.4,0,0,0-90.8-.1,8.22,8.22,0,0,1-10.28-4.81,8,8,0,0,1,5.08-10.33,156.85,156.85,0,0,1,24.72-5.72,4,4,0,0,0,3.27-4.93l-.21-.85A16.21,16.21,0,0,0,87.08,40.21L51,46.13A16.08,16.08,0,0,0,38,58L8.49,174.39a15.94,15.94,0,0,0,9.06,18.51l67,29.71a16.17,16.17,0,0,0,21.71-9.1l3.49-9.45a4,4,0,0,0-3.27-5.35,158.13,158.13,0,0,1-28.63-6.2,8.2,8.2,0,0,1-5.61-9.67,8,8,0,0,1,10.2-5.66,155.59,155.59,0,0,0,91.12,0,8,8,0,0,1,10.19,5.65,8.19,8.19,0,0,1-5.61,9.68,157.84,157.84,0,0,1-28.62,6.2,4,4,0,0,0-3.27,5.35l3.49,9.45a16.18,16.18,0,0,0,21.71,9.1l67-29.71A15.94,15.94,0,0,0,247.51,174.39ZM92,152a12,12,0,1,1,12-12A12,12,0,0,1,92,152Zm72,0a12,12,0,1,1,12-12A12,12,0,0,1,164,152Z"/></svg> </a> <a href="https://www.tiktok.com/@quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Tiktok</span> <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"> </path> </svg> </a> <a href="https://instagram.com/quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Instagram</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" /> </svg> </a> <a href="https://twitter.com/Quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">X</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" /> </svg> </a> <a href="https://www.facebook.com/profile.php?id=61550782041398" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Facebook</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /> </svg> </a> <a target="_blank" href="mailto:hello@quizgecko.com" class="text-surface-6 cursor-pointer hover:text-elevated-2 mr-2 rtl:ml-2"> <span class="sr-only">Email</span> <svg class="inline-block w-6 h-7 text-surface-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"/></svg> </a> <a target="_blank" href="https://chrome.google.com/webstore/detail/quizgecko/jipdeflholipfmimeegaphokjfhkbbpl" class="text-surface-6 cursor-pointer hover:text-elevated-2 mr-2 rtl:ml-2"> <span class="sr-only">Chrome</span> <svg class="w-6 h-6 text-surface-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="4"></circle> <line x1="21.17" y1="8" x2="12" y2="8"> </line> <line x1="3.95" y1="6.06" x2="8.54" y2="14"> </line> <line x1="10.88" y1="21.94" x2="15.46" y2="14"> </line> </svg> </a> </div> </div> <div class="flex gap-3 mt-6 -ml-1"> <a href="https://apple.co/4a1UzYI" title="" class="inline-flex items-center justify-center w-full text-left text-surface-0 bg-elevated-4 dark:bg-elevated-2 hover:bg-elevated-1 rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-300 px-2 py-1.5 sm:w-auto" role="button"> <svg aria-hidden="true" class="h-8 w-8 sm:w-10 sm:h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z"> </path> </svg> <div class="ml-2.5"> <span class="block text-xs font-normal leading-none"> Download on the </span> <span class="block text-sm font-bold leading-tight"> App Store </span> </div> </a> <a href="https://bit.ly/quizgecko-android" title="" class="inline-flex items-center justify-center w-full text-left text-surface-0 bg-elevated-4 dark:bg-elevated-2 hover:bg-elevated-1 rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-300 px-2 py-1.5 sm:w-auto" role="button"> <svg aria-hidden="true" class="h-8 w-8 sm:w-10 sm:h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="m12.954 11.616 2.957-2.957L6.36 3.291c-.633-.342-1.226-.39-1.746-.016l8.34 8.341zm3.461 3.462 3.074-1.729c.6-.336.929-.812.929-1.34 0-.527-.329-1.004-.928-1.34l-2.783-1.563-3.133 3.132 2.841 2.84zM4.1 4.002c-.064.197-.1.417-.1.658v14.705c0 .381.084.709.236.97l8.097-8.098L4.1 4.002zm8.854 8.855L4.902 20.91c.154.059.32.09.495.09.312 0 .637-.092.968-.276l9.255-5.197-2.666-2.67z"> </path> </svg> <div class="ml-2.5"> <span class="block text-xxs font-normal leading-none"> Download on </span> <span class="block text-sm font-bold leading-tight"> Google Play </span> </div> </a> </div> </div> <div class="mt-16 grid grid-cols-2 xl:col-span-2 xl:mt-0"> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Discover </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/plans?offer=student" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">For Students</a> </li> <li> <a href="https://quizgecko.com/plans?offer=teacher" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">For Teachers & Parents</a> </li> <li> <a href="https://quizgecko.com/plans" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">For Work</a> </li> <li> <a href="https://quizgecko.com/mobile" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Mobile Apps</a> </li> </ul> </div> <div class="mt-10 md:mt-0"> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Account </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/library" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">My Library</a> </li> <li> <a href="https://quizgecko.com/profile" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">My Profile</a> </li> <li> <a href="https://quizgecko.com/billing" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Billing</a> </li> <li> <a href="https://quizgecko.com/features" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Features</a> </li> </ul> </div> </div> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Resources </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/blog" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Blog</a> </li> <li> <a href="/api" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">API</a> </li> <li> <a href="https://help.quizgecko.com" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Help Center</a> </li> <li> <a href="https://quizgecko.com/discover" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Browse Lessons</a> </li> </ul> </div> <div class="mt-10 md:mt-0"> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Policies </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/terms" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Terms</a> </li> <li> <a href="https://quizgecko.com/privacy-policy" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Privacy</a> </li> <li> <a href="https://quizgecko.com/copyright" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Copyright</a> </li> <li> <a href="https://quizgecko.com/legal" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">More...</a> </li> </ul> </div> </div> </div> </div> </div> <div class="mt-8 border-t border-elevated-4/10 pt-4 md:flex md:items-center md:justify-between"> <div class="text-center mx-auto max-w-xl mt-4 mb-8 text-elevated-0 dark:text-surface-6 text-sm "> <p class="mb-2 text-gray-900 dark:text-surface-5">Change Language</p> <div class="flex-wrap justify-center pt-8 sm:justify-start sm:pt-0 dark:bg-elevated-4"> <span class="ml-2 mr-2 text-elevated-2 dark:text-surface-5">English</span> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/fr">French</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/de">German</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/es">Spanish</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/pt">Portuguese</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/hi">Hindi</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/ko">Korean</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/zh">Chinese</a> </div> </div> </div> </footer> </div> </body> </html>

Overview of HTML Basics

Choose a study mode

Podcast

Questions and Answers

Which text editor is known for being lightweight and simple, suitable for basic HTML coding?

What feature is NOT associated with Sublime Text?

Which text editor offers advanced features like Git integration?

Which description best fits Atom?

Which of the following is true about Notepad compared to Atom?

What is the primary purpose of HTML in web development?

Which of the following best describes a text editor used for writing HTML?

Why is it beneficial to learn HTML for someone interested in web development?

How does a web browser utilize HTML when a webpage is accessed?

Which of the following text editors is mentioned as a tool for writing HTML?

Study Notes

Overview of HTML

Basic Structure of an HTML Document

Common HTML Elements

Attributes

Semantic HTML

Forms and Input Elements

Best Practices

HTML5 Features

Conclusion

HTML Overview

Basic Structure of an HTML Document

Common HTML Elements

Attributes

Semantic HTML

Forms and Input Elements

Best Practices

HTML5 Features

Conclusion

Introduction to HTML

HTML Tags Summary