XHTML Basics Quiz
45 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Which of the following is NOT a required element in an XHTML page?

  • ``<title>``
  • ``<head>``
  • ``<header>`` (correct)
  • ``<html>``

    • What is the correct way to close an XHTML tag?

  • Adding a closing bracket (>) after the tag name.
  • Adding a closing bracket (>) before the tag name.
  • Adding a forward slash (/) before the ending tag. (correct)
  • Adding a forward slash (/) after the ending tag.

    • Which of the following is an example of an attribute?

  • ``<p>``
  • ``<h1>``
  • ``align='center'`` (correct)
  • ``<title>``

    • What is the purpose of a DOCTYPE declaration in XHTML?

    <p>To define the version and type of XHTML being used. (B)</p> Signup and view all the answers

    What is the purpose of XHTML tags?

    <p>To define the structure and content of the page. (A)</p> Signup and view all the answers

    Which of the following is an example of a valid XHTML element?

    <p>All of the above. (D)</p> Signup and view all the answers

    What is the main difference between an opening and a closing tag in XHTML?

    <p>An opening tag defines the element, while a closing tag ends the element. (C)</p> Signup and view all the answers

    Why are quotation marks required around attribute values in XHTML?

    <p>All of the above. (D)</p> Signup and view all the answers

    What is the primary consideration when determining a website's purpose and goals?

    <p>The website's target audience (C)</p> Signup and view all the answers

    What is the key challenge facing web designers regarding the look of the final product?

    <p>The lack of control over user's browsers and devices (B)</p> Signup and view all the answers

    Which of these elements contributes to the fast loading speed of a website?

    <p>Saving images in compressed formats and at smaller file sizes (D)</p> Signup and view all the answers

    Why is it essential to use alternate text labels for images on a website?

    <p>To ensure accessibility for users with visual impairments (C)</p> Signup and view all the answers

    How are Cascading Style Sheets (CSS) beneficial in website design?

    <p>They create a consistent visual style across all pages of a website. (D)</p> Signup and view all the answers

    What is the essential first step in creating a successful website?

    <p>Developing a clear understanding of the website's purpose and goals (B)</p> Signup and view all the answers

    Which of the following is NOT a recommended practice for website design?

    <p>Creating multiple versions of the website for different browsers (B)</p> Signup and view all the answers

    What is the significance of 'alternate text labels' in web design?

    <p>They provide alternative descriptions for images in case they fail to load. (A), They make websites more user-friendly for people with disabilities. (D)</p> Signup and view all the answers

    What is the primary function of animations on a website?

    <p>To showcase product features and functionality (D)</p> Signup and view all the answers

    Which of the following is NOT a question to consider when determining the suitability of an animation on a website?

    <p>Are there any costs associated with implementing the animation? (C)</p> Signup and view all the answers

    What type of website animation is most likely to capture user attention?

    <p>A simple, eye-catching animation that highlights a specific element (A)</p> Signup and view all the answers

    Which of the following best describes the purpose of animated GIFs?

    <p>To display a series of images in quick succession, creating the illusion of movement (B)</p> Signup and view all the answers

    Which of the following is a potential disadvantage of using animated GIFs on a website?

    <p>They can be very large in file size, impacting website loading time (C)</p> Signup and view all the answers

    Which of the following is NOT a type of animation or effect discussed in the provided text?

    <p>Parallax Scrolling (D)</p> Signup and view all the answers

    Which of the following is a potential advantage of using DHTML for animations?

    <p>DHTML allows for more complex interactions and user engagement compared to other animation methods (D)</p> Signup and view all the answers

    If a website designer aims to create highly interactive, data-driven animations, which of the following methods would be the most suitable choice?

    <p>Canvas with JavaScript (B)</p> Signup and view all the answers

    Which of the following is NOT a supplemental navigation link typically included in web pages?

    <p>A wireframe (C)</p> Signup and view all the answers

    What is the purpose of a site map?

    <p>To list and organize all web pages in a site (C)</p> Signup and view all the answers

    What is the main function of a hyperlink?

    <p>To create a link to another web page (D)</p> Signup and view all the answers

    Which of the following statements is TRUE about the role of the home page in a website?

    <p>It is generally the first page visitors will see (C)</p> Signup and view all the answers

    What is the primary purpose of wireframing?

    <p>To create a blueprint for design tasks (B)</p> Signup and view all the answers

    What is the primary reason for choosing the MP3 format for audio files on the web?

    <p>Its wide system compatibility (A)</p> Signup and view all the answers

    Which of the following methods allows web visitors to listen to media before it is fully downloaded?

    <p>Streaming (B)</p> Signup and view all the answers

    What is the most suitable method for delivering large video files to website visitors?

    <p>Streaming (B)</p> Signup and view all the answers

    How can the file size of video files be reduced?

    <p>Decreasing the screen size (C)</p> Signup and view all the answers

    Which of the following is NOT a key consideration when choosing an audio file format for the web?

    <p>Image quality (B)</p> Signup and view all the answers

    What is the main purpose of podcasts concerning media files?

    <p>Delivering downloadable media packets (C)</p> Signup and view all the answers

    What does embedding media on a website involve?

    <p>Writing code to place the media within the page (B)</p> Signup and view all the answers

    Which of the following describes the process of creating a hyperlink to access media files?

    <p>Adding a clickable link that navigates to a separate page (C)</p> Signup and view all the answers

    What is the purpose of encoding software when working with media files?

    <p>To create streaming media. (B)</p> Signup and view all the answers

    When embedding a sound file on a webpage, what is the purpose of the <audio> tag?

    <p>To control the playback of the sound file. (C)</p> Signup and view all the answers

    What is the recommended approach for playing a sound file on a webpage to avoid automatic playback?

    <p>Include simple controls for the audio player. (D)</p> Signup and view all the answers

    Which of the following is NOT a recommended way to place a sound file on a webpage?

    <p>Using the <code>&lt;embed&gt;</code> tag to embed the sound file. (C)</p> Signup and view all the answers

    Which of the following statements about embedding a sound file on a web page is TRUE?

    <p>Embedding a sound file can cause the sound to play automatically when the page loads. (A)</p> Signup and view all the answers

    Which of the following is the MAIN advantage of using a hyperlink to place a sound file on a webpage?

    <p>It allows users to choose whether to download or play the sound file. (C)</p> Signup and view all the answers

    If a sound file is embedded on a webpage and the autoplay attribute is set to false, what will happen when the page loads?

    <p>The sound file will not play unless the user clicks a button. (C)</p> Signup and view all the answers

    Which of the following BEST describes the difference between embedding a sound file and providing a hyperlink to it on a webpage?

    <p>Embedding allows automatic playback while a hyperlink requires user interaction. (B)</p> Signup and view all the answers

    Flashcards

    HTML Tags

    Tags that define elements in HTML, enclosed in angle brackets.

    HTML Elements

    Parts of an HTML document that are defined by tags, such as headings or paragraphs.

    Attributes in HTML

    Properties that provide additional information about an element, consisting of name and value.

    Opening and Closing Tags

    Tags that denote the start and end of an HTML element, with closing tags using a forward slash.

    Signup and view all the flashcards

    Empty Elements

    HTML elements that do not have closing tags or contain content, such as
    .

    Signup and view all the flashcards

    DOCTYPE Declaration

    A required declaration at the beginning of an XHTML document indicating the document type.

    Signup and view all the flashcards

    Nesting Elements

    The requirement that elements in HTML must be properly nested within each other.

    Signup and view all the flashcards

    Lowercase in XHTML

    All elements and attributes in XHTML must be written in lowercase letters.

    Signup and view all the flashcards

    Wireframing

    A blueprint for design tasks showing elements needed for a site.

    Signup and view all the flashcards

    Home Page

    The main page of a website, usually the first one visitors see.

    Signup and view all the flashcards

    Navigation Link

    Guides visitors from one page to other pages on a website.

    Signup and view all the flashcards

    Search Function

    Allows visitors to find specific information on a website.

    Signup and view all the flashcards

    Site Map

    A web page that lists and organizes all the pages in a site.

    Signup and view all the flashcards

    Animated GIFs

    Images that display a series of frames in quick succession to create simple animations.

    Signup and view all the flashcards

    Advantages of Animated GIFs

    They grab attention and demonstrate product features effectively.

    Signup and view all the flashcards

    Disadvantages of Animated GIFs

    Can be distracting, cause longer load times, and may annoy viewers.

    Signup and view all the flashcards

    Types of Animations

    Different styles of animations including GIFs, DHTML, JavaScript, and CSS3.

    Signup and view all the flashcards

    DHTML

    Dynamic HTML that allows for interactive and animated content on web pages.

    Signup and view all the flashcards

    CSS3 Animations

    Use Cascading Style Sheets to add transitions and animations to HTML elements.

    Signup and view all the flashcards

    Canvas in Animation

    An HTML element that allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

    Signup and view all the flashcards

    SVG in Animation

    Scalable Vector Graphics, a format that allows for the creation of vector-based animations.

    Signup and view all the flashcards

    Website Planning

    The initial step in website creation, focused on determining the site's purpose and audience.

    Signup and view all the flashcards

    Site Structure

    A visual outline of the main sections and subsections of a website, forming its organization.

    Signup and view all the flashcards

    Content Development

    The process of drafting, editing, and refining text for a website.

    Signup and view all the flashcards

    Web Design Differences

    Key distinctions between web pages and print, affecting layout and user experience.

    Signup and view all the flashcards

    Cascading Style Sheets (CSS)

    A tool to maintain consistency in layout and fonts across a website.

    Signup and view all the flashcards

    Color Selection

    Using hex numbers to specify colors carefully for web design.

    Signup and view all the flashcards

    Image Optimization

    Saving bitmap graphics and photographs in small, compressed sizes for faster loading.

    Signup and view all the flashcards

    Accessibility Features

    Tools that improve site accessibility, such as alternate text for images.

    Signup and view all the flashcards

    Encoding Software

    Software that converts media files from one format to another.

    Signup and view all the flashcards

    Streaming Media

    Media that is transmitted over the internet and can be played in real-time.

    Signup and view all the flashcards

    Embedding Sound Files

    Incorporating sound files directly into a web page.

    Signup and view all the flashcards

    Hyperlinking Sound

    Creating a link to access a sound file externally.

    Signup and view all the flashcards

    Autoplay

    Feature that makes media play automatically when a page opens.

    Signup and view all the flashcards

    HTML5 Audio Player

    A built-in player for audio files in HTML5.

    Signup and view all the flashcards

    Control Attribute

    Attribute that allows users to control audio playback.

    Signup and view all the flashcards

    W3C Standards

    Guidelines set by the World Wide Web Consortium for web development.

    Signup and view all the flashcards

    Choosing audio file format

    Selecting an audio format involves balancing quality, file size, and accessibility.

    Signup and view all the flashcards

    MP3 file format

    A widely-used audio format that compresses data for smaller file sizes while maintaining acceptable quality.

    Signup and view all the flashcards

    Downloading media

    Saving a media file to a local device, allowing offline access after the entire file is downloaded.

    Signup and view all the flashcards

    Embedding media

    Placing media directly into a web page using code, enabling playback without leaving the page.

    Signup and view all the flashcards

    Hyperlink for media

    A link that directs users to another page where media can be accessed, instead of embedding it.

    Signup and view all the flashcards

    Podcasts

    Media packets available for download that allow users to subscribe for updates.

    Signup and view all the flashcards

    Video streaming vs downloading

    Videos are better streamed than downloaded due to their large size, with smaller screens helping to reduce file size.

    Signup and view all the flashcards

    Study Notes

    Chapter 13: Web Development

    • Web development encompasses all processes behind website creation, focusing on how websites work and considering performance and capacity.
    • Web developers write the code and script, focusing on website functionality.
    • Web development methods include writing all code for a site, using website building programs, and using template websites or weblog programs (e.g., WordPress.)
    • Websites must be hosted on a web server to be accessible online.
    • The Universal Resource Locator (URL) is the unique address of a website and the domain name suffix indicates the site type (e.g., .com for commercial, .org for organizations.)
    • Key considerations during web development include goals, audience needs, the kind of information, service, or product offered, the development process, and the site's hosting location. Other factors include: the domain name, who develops the site, site content maintenance, timeline for development, and security procedures.

    Learning Outcomes

    • Explain the difference between web development and web design.
    • Explain various website development methods.
    • List three important web development considerations.
    • Describe the functions of common coding tags.
    • Explain the challenge of web development.
    • Explain how web developers meet the needs of universal access.
    • Write correct code.
    • Explain the differences between HTML, XHTML, and HTML5 elements and their use.

    Introduction to Web Development

    • Web development involves all the processes behind a website.
    • Developers focus on website functionality and consider factors like performance and capacity.

    Methods of Developing Websites

    • Web developers can code an entire website.
    • Some companies employ website-building programs.
    • Template websites and blogging platforms like WordPress are also used.

    Hosting a Website

    • To be accessible, a website must be hosted on a web server.
    • The URL is the website's address.
    • A domain name, a unique name for the website, becomes part of the URL.
    • Domain name suffixes (e.g., .com, .org) indicate a website's category.

    Considerations for Web Development

    • Website goals
    • User needs
    • Information, services, or products offered
    • Development process
    • Site hosting location
    • Domain name
    • Developer
    • Content maintenance
    • Development timeline
    • Security measures

    Writing Code for Web Development

    • HTML (HyperText Markup Language) is used to create web pages.
    • A browser is a program for viewing web pages.
    • HTML files differ in universal constancy compared to PDF files.
    • Different web browsers might display web pages differently.

    Inside HTML

    • HTML translates text and graphics into readable web pages.
    • XHTML is an HTML variant with more stringent rules and options.
    • HTML5, a later standard, isn't universally supported across all browsers and devices.
    • Tags identify elements in an HTML file and instruct browsers on how they should appear on the page.
    • Elements define the structure and content of a web page.
    • Attributes provide extra information about HTML elements.

    XHTML Basics

    • Web pages have fundamental components, starting with the tag, followed by and .</li> <li>Many tags appear in pairs (opening and closing tags).</li> <li>A forward slash (/) indicates a closing tag.</li> <li>Some tags do not require closing tags (empty elements). </li> </ul> <h3 id="xhtml-basics-cont" class="contents-heading">XHTML Basics (cont.)</h3> <ul> <li>XHTML has diverse tags covering various functions.</li> <li>XHTML conventions include using DOCTYPE declarations, requiring elements like <html>, <head>, <title>, and <body>, demanding that elements be closed, nesting them correctly, writing elements and attributes in lowercase, and putting attribute values within quotation marks.</li> </ul> <h3 id="xhtml-basics-cont-1" class="contents-heading">XHTML Basics (cont.)</h3> <ul> <li>Learn XHTML coding by examining source code, focusing on simple pages and understanding the effects created by different codes.</li> <li>Use online tutorials to learn about XHTML tags.</li> </ul> <h3 id="the-ethics-of-copying-code" class="contents-heading">The Ethics of Copying Code</h3> <ul> <li>Consider how much code you borrow before it's no longer your own.</li> <li>When using code, it is important to respect and recognize innovative techniques and credit their originators.</li> <li>Evaluate whether code borrowing hinders or encourages creativity, innovation, and new ideas.</li> </ul> <h3 id="web-and-text-editing-software" class="contents-heading">Web and Text Editing Software</h3> <ul> <li>Web editors create HTML automatically, while simple text editors provide more flexibility for focusing on code.</li> <li>Writing HTML in a plain text editor provides focused, detailed code understanding and manipulation.</li> <li>Some Web editors offer "WYSIWYG" (What You See Is What You Get,) displays, showing results instantly for users in a code-friendly editing form with visual interaction.</li> <li>These editing tools provide functionality options for creating visual and interactive features in web pages.</li> </ul> <h3 id="web-and-text-editing-software-cont" class="contents-heading">Web and Text Editing Software (cont.)</h3> <ul> <li>Text editing software offers a WYSIWYG interface, which is an advantage.</li> <li>Most web editors come with two panels: one showing code and another showing the visual representation on a browser.</li> </ul> <h3 id="web-and-text-editing-software-cont-1" class="contents-heading">Web and Text Editing Software (cont.)</h3> <ul> <li>Web editors provide tools for creating different effects in web pages, including page backgrounds, text formatting in multiple sizes and colors, wraparound text, graphics with horizontal lines, bulleted lists, rollover images, image maps, drop-down menus, and option buttons, input forms, and links.</li> <li>Checking for compatibility with various browsers is also critical.</li> </ul> <h3 id="web-and-text-editing-software-cont-2" class="contents-heading">Web and Text Editing Software (cont.)</h3> <ul> <li>Key considerations when evaluating web editors include templates, media, interactive elements (like HTML5, CSS, and JavaScript), and tables or DIV tags.</li> </ul> <h3 id="obstacles-to-universal-access" class="contents-heading">Obstacles to Universal Access</h3> <ul> <li>Accessibility limitations arise from varying technologies.</li> <li>User display devices (e.g., screen sizes, resolution, colors) and browser types and speeds can affect website use.</li> </ul> <h3 id="obstacles-to-universal-access-cont" class="contents-heading">Obstacles to Universal Access (cont.)</h3> <ul> <li>Website issues, such as download speeds and large file sizes, impact the user's experience.</li> <li>Browser compatibility issues can prevent specific functions or formatting commands from working correctly across various web browsers.</li> </ul> <h3 id="obstacles-to-universal-access-cont-1" class="contents-heading">Obstacles to Universal Access (cont.)</h3> <ul> <li>Mobile device users will need different standards based on their display sizes, download speeds, and browser types to allow website access.</li> </ul> <h3 id="obstacles-to-universal-access-cont-2" class="contents-heading">Obstacles to Universal Access (cont.)</h3> <ul> <li>Accessibility needs to consider conditions like impaired vision, difficulty hearing, and color blindness.</li> </ul> <h3 id="obstacles-to-universal-access-cont-3" class="contents-heading">Obstacles to Universal Access (cont.)</h3> <ul> <li>The World Wide Web Consortium (W3C) has guidelines for accessibility.</li> </ul> <h3 id="ensuring-access-by-using-xhtml" class="contents-heading">Ensuring Access by Using XHTML</h3> <ul> <li>Employ XHTML to promote clear, organized code that meets established quality standards, and using validation helps users to verify that their coding conforms to required standards.</li> <li>To publish a completed website, securely host it on a web server to be accessed online by users.</li> </ul> <h3 id="ensuring-access-by-using-xhtml-cont" class="contents-heading">Ensuring Access by Using XHTML (cont.)</h3> <ul> <li>Understand the process for publishing websites with secure web servers.</li> <li>Know the risks involved with hackers.</li> <li>Understand file transfer protocol (FTP.) Use FTP to transfer files across networks to upload webpages to a web server and keep website files.</li> </ul> <h3 id="key-concepts" class="contents-heading">Key Concepts</h3> <ul> <li>Web developers and designers have different roles.</li> <li>Web developers code website functionality, while designers concentrate on interface, appearance, and graphics.</li> </ul> <h3 id="key-concepts-cont" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>XHTML and HTML5 are languages to show content on a website.</li> <li>These languages are interpreted by various browsers to display the website.</li> <li>The code for a web page is contained within <code><body></code> tags.</li> </ul> <h3 id="key-concepts-cont-1" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Use source code to understand how web pages are designed so that webpages have a design that you prefer.</li> </ul> <h3 id="key-concepts-cont-2" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Understand how the technology of smartphones, tablets, and other mobile devices affects website design and use considerations.</li> <li>Understand how W3C guidelines for websites make a website accessible to various users.</li> <li>Understand how XHTML and HTML5 coding help to create standard webpages that are accessible to users on different devices.</li> </ul> <h3 id="chapter-14-web-design" class="contents-heading">Chapter 14: Web Design</h3> <ul> <li>Websites are collections of linked web pages. Content is central to website design.</li> <li>Understanding the target audience is essential, for which considerations include the users' product or services needs.</li> </ul> <h3 id="planning-content" class="contents-heading">Planning Content</h3> <ul> <li>Begin planning websites by setting goals. Define who the audience is and what products or services will be available.</li> <li>Initial ideas are jotted down for content and features.</li> <li>The site map and outlines help to organize the overall structure.</li> <li>Hyperlinks or site maps are frequently used to navigate webpages.</li> </ul> <h3 id="planning-content-cont" class="contents-heading">Planning Content (cont.)</h3> <ul> <li>Wireframing is a design task blueprint that helps to design the page structure.</li> <li>The main page of a website is the home page.</li> <li>A navigation link guides site visitors through web pages.</li> <li>Search features and site maps help visitors find information.</li> </ul> <h3 id="planning-content-cont-1" class="contents-heading">Planning Content (cont.)</h3> <ul> <li>Hyperlinks use text or objects to link other webpages.</li> </ul> <h3 id="what-works-for-you" class="contents-heading">What Works for You?</h3> <ul> <li>Browsing existing successful websites provides valuable insights for constructing your own site.</li> </ul> <h3 id="creating-content" class="contents-heading">Creating Content</h3> <ul> <li>Web content should be clear, concise, and focused.</li> <li>Web content should be tailored to the specific audience. </li> <li>Information should be concise on opening pages, and more detailed content placed on inner pages.</li> </ul> <h3 id="creating-content-cont" class="contents-heading">Creating Content (cont.)</h3> <ul> <li>Refined text is well organized, clear, and provides the information the audience needs. Content should reflect the needs of the audience to ensure understanding of the topic.</li> </ul> <h3 id="getting-approval" class="contents-heading">Getting Approval</h3> <ul> <li>Clients have the final say on website content and structure.</li> <li>Obtain client approvals at every stage to ensure the design meets their expectations.</li> <li>Showcase the wireframe or organization plan to clients before developing the website content.</li> </ul> <h3 id="organizing-and-naming-website-files" class="contents-heading">Organizing and Naming Website Files</h3> <ul> <li>Create a separate file for each web page.</li> <li>Follow conventions, using lowercase letters, hyphens or underscores instead of spaces, and keywords or descriptions for the page content.</li> </ul> <h3 id="web-design-versus-print-design" class="contents-heading">Web Design Versus Print Design</h3> <ul> <li>Compared to print design, web design offers less control over the final appearance.</li> <li>Websites must accommodate and adapt to browser variations.</li> <li>Site design elements and tools are different from print design.</li> <li>Website users have different attitudes and expectations from print products.</li> </ul> <h3 id="organizing-web-pages" class="contents-heading">Organizing Web Pages</h3> <ul> <li>The top area of a web page typically contains the company's or organization's logo, name, and key navigation functions.</li> <li>The bottom sections often contain copyright information, a site map, and contact details.</li> <li>The main area of a web page displays the website's content and graphics.</li> </ul> <h3 id="organizing-web-pages-cont" class="contents-heading">Organizing Web Pages (cont.)</h3> <ul> <li>Tables were used in the past, but <div> tags are now commonly used to divide web page content.</li> <li>Tables can still be used effectively for numerical content.</li> </ul> <h3 id="using-templates" class="contents-heading">Using Templates</h3> <ul> <li>A template is a file containing common elements for all web pages (master page).</li> <li>Templates have common areas that don't change on each page, and an open area for unique content.</li> </ul> <h3 id="using-design-elements" class="contents-heading">Using Design Elements</h3> <ul> <li>Coherent design helps establish a company identity..</li> <li>Visitors expect a clear purpose and function when visiting a company website.</li> <li>Use clear and legible design elements/tools for the site to maintain readability.</li> </ul> <h3 id="using-design-elements-cont" class="contents-heading">Using Design Elements (cont.)</h3> <ul> <li>Typography choices (font types) affect the overall site; use font options suitable for each visitor to ensure proper readability and clarity.</li> <li>Cascading Style Sheets (CSS) can be an effective way to style fonts consistently.</li> </ul> <h3 id="using-design-elements-cont-1" class="contents-heading">Using Design Elements (cont.)</h3> <ul> <li>Consider both foreground and background colors to provide good contrast and improve readability, and use a hexadecimal number for various color coding combinations.</li> </ul> <h3 id="using-design-elements-cont-2" class="contents-heading">Using Design Elements (cont.)</h3> <ul> <li>Utilize interactive elements (login boxes, radio buttons) and special effects (icons, visual animations) to enhance the user experience, with an emphasis on readability for a better and less distracting user experience.</li> </ul> <h3 id="saving-images-for-web-pages" class="contents-heading">Saving Images for Web Pages</h3> <ul> <li>Bitmap graphics tend to have large files which can make the page load slower to download. </li> <li>Using program editing software to size bitmap images before saving is optimal.</li> <li>Using a resolution of 72 pixels per inch (DPI) ensures clarity on most monitors.</li> <li>Compressing images can reduce file sizes but some image quality will be compromised.</li> </ul> <h3 id="saving-images-for-web-pages-cont" class="contents-heading">Saving Images for Web Pages (cont.)</h3> <ul> <li>High compression reduces file sizes for quicker website loading, but quality may be reduced, depending on the type of compression settings.</li> </ul> <h3 id="placing-images-on-web-pages" class="contents-heading">Placing Images on Web Pages</h3> <ul> <li>Web editors often automatically insert images and let users format them based on relation and space to text, and to add alternate text. </li> </ul> <h3 id="placing-images-on-web-pages-cont" class="contents-heading">Placing Images on Web Pages (cont.)</h3> <ul> <li>Thumbnails are smaller versions of bigger images that speed up image loading times as they allow users to choose if they want to see the bigger image.</li> </ul> <h3 id="placing-images-on-web-pages-cont-1" class="contents-heading">Placing Images on Web Pages (cont.)</h3> <ul> <li>Rollovers are images or text changed by a user's cursor over or click on an image or text, such as a logo or banner. </li> </ul> <h3 id="chapter-53-web-animation" class="contents-heading">Chapter 5.3 Web Animation</h3> <ul> <li>Animated GIFs are a simple way to create animations on a website that include moving images that occur in a succession.</li> <li>Web animation tools are used to attract customers, demonstrate product details, introduce special offers, or emphasize specific content on a webpage.</li> <li>Consider the effect of the animation on the site and if it is used properly; it should not detract from the overall page purpose or intent.</li> </ul> <h3 id="animated-gifs-basics" class="contents-heading">Animated GIFs Basics</h3> <ul> <li>Simple animated GIFs are composed of multiple still images played in a rapid succession to evoke movement (path animation, warping, morphing.)</li> <li>Frames/states are the still images that make up the animated GIF.</li> <li>Looping plays animation frames repeatedly to stretch the duration and presentation.</li> <li>Tweening is a computer-managed process of changing images for smooth animation.</li> </ul> <h3 id="animated-gifs-basics-cont" class="contents-heading">Animated GIFs Basics (cont.)</h3> <ul> <li>Webpage animations use frames to create smooth animation sequences to make the animation appear continuous and smooth. </li> </ul> <h3 id="animated-gifs-basics-cont-1" class="contents-heading">Animated GIFs Basics (cont.)</h3> <ul> <li>Tweening is a computer process of controlling gradual changes to images to create movement.</li> </ul> <h3 id="advantages-and-disadvantages-of-animated-gifs" class="contents-heading">Advantages and Disadvantages of Animated GIFs</h3> <ul> <li>Animated GIFs are easy to create, resulting in graphics that incorporate solid colors and text.</li> <li>The disadvantage is that they have limited color palettes (usually 256 colors) and can have large file sizes, leading to slow download times.</li> </ul> <h3 id="advantages-and-disadvantages-of-animated-gifs-cont" class="contents-heading">Advantages and Disadvantages of Animated GIFs (cont.)</h3> <ul> <li>Optimization choices to create smaller GIFs include using fewer colors, having fewer frames, and placing the animation on a smaller canvas.</li> </ul> <h3 id="saving-animated-gifs" class="contents-heading">Saving Animated GIFs</h3> <ul> <li>GIF animators come in a variety of formats (GIF files, JPEGs, other editable raster files, or videos.)</li> <li>Webpages can typically embed the GIF file directly into the webpage, or it can be hosted by a server and linked to the page with an <code>img src</code> tag.</li> </ul> <h3 id="types-of-animations-and-effects" class="contents-heading">Types of Animations and Effects</h3> <ul> <li>Animations fall into three categories: two-dimensional (2D), three-dimensional (3D), and stop motion.</li> <li>Stop-motion animations involve small physical objects repositioned frame by frame to create movement.</li> </ul> <h3 id="types-of-animations-and-effects-cont" class="contents-heading">Types of Animations and Effects (cont.)</h3> <ul> <li>Banners can include text that moves around a webpage or disappears and reappears. </li> </ul> <h3 id="dynamic-html" class="contents-heading">Dynamic HTML</h3> <ul> <li>Dynamic HTML (DHTML) uses XHTML to create animated text and image effects. </li> <li>Users experience site changes without needing to refresh or reload the page.</li> </ul> <h3 id="dynamic-html-cont" class="contents-heading">Dynamic HTML (cont.)</h3> <ul> <li>A great advantage of DHTML is that it does not use large file sizes; it loads as quickly as any XHTML file.</li> </ul> <h3 id="javascript-and-its-use" class="contents-heading">JavaScript and Its Use</h3> <ul> <li>JavaScript is a programming language to enhance website interactivity.</li> <li>JavaScript code within HTML pages changes the content or appearance based on user actions.</li> <li>This includes using actions from the mouse, searches, popups, or forms.</li> </ul> <h3 id="javascript-cont" class="contents-heading">JavaScript (cont.)</h3> <ul> <li>JavaScript follows XHTML coding rules (e.g., case sensitivity, quotation marks).</li> <li>JavaScript groups statements into curly braces for simultaneously executed actions.</li> </ul> <h3 id="javascript-cont-1" class="contents-heading">JavaScript (cont.)</h3> <ul> <li>JavaScript can create interactive elements like rollovers (changing images or text when hovering over them) or dialog boxes.</li> </ul> <h3 id="css3" class="contents-heading">CSS3</h3> <ul> <li>CSS3 is an advanced version of CSS (Cascading Style Sheets).</li> <li>CSS3 features modules, improving completion time and enabling animations of webpage elements without relying on JavaScript.</li> <li>Keyframes are often used for animation within CSS3 code.</li> </ul> <h3 id="html5-canvas-and-svg" class="contents-heading">HTML5 Canvas and SVG</h3> <ul> <li>HTML5 code animation is rendered directly on the webpage.</li> <li><canvas> is a container for graphics (bitmap graphics) on an HTML page.</li> </ul> <h3 id="key-concepts-1" class="contents-heading">Key Concepts</h3> <ul> <li>Webpage animations are used by businesses to attract customers, demonstrate products, or introduce new offers.</li> </ul> <h3 id="key-concepts-cont-3" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Animated GIFs are simple animations based on graphics in tools like image editing programs.</li> </ul> <h3 id="key-concepts-cont-4" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Animation style programs combine images called frames or states, using the tweening process to add additional frames to reduce image load time.</li> </ul> <h3 id="key-concepts-cont-5" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Animations can be two-dimensional or three-dimensional, or use stop motion to create effects.</li> </ul> <h3 id="key-concepts-cont-6" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Static animation, similar to an animated banner, starts and stops at specific points; stateful animation, for instance, triggers changes when the user moves a cursor or interacts with an object, and dynamic animation relies on user action to initiate changes.</li> </ul> <h3 id="key-concepts-cont-7" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Dynamic HTML uses XHTML code to influence how content is presented.</li> </ul> <h3 id="key-concepts-cont-8" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>JavaScript, as a scripting language, enhances webpage interactivity by enabling real-time responses to user actions. Website interaction is sped up without impacting the webpage load time.</li> </ul> <h3 id="key-concepts-cont-9" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>CSS3 is an advanced style sheet to enhance page design, and can create animations within webpages, replacing the need for other programming languages like Java Script.</li> </ul> <h3 id="key-concepts-cont-10" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>HTML5, with its <code>canvas</code> element, and scalable vector graphics (SVG), offers the potential for dynamic, two-dimensional (or three-dimensional) animations, allowing more flexibility and creativity compared to traditional animation methods.</li> </ul> <h3 id="chapter-16-web-media" class="contents-heading">Chapter 16: Web Media</h3> <h3 id="audio-file-formats" class="contents-heading">Audio File Formats</h3> <ul> <li>Lossless compression files, WAV and AIFF formats, are copies of the original sound.</li> <li>They are used for archiving and as master copies.</li> </ul> <h3 id="audio-file-formats-cont" class="contents-heading">Audio File Formats (cont.)</h3> <ul> <li>Lossy compression files reduce data size (MP3, WMA, AAC, RM.</li> <li>Lossy compression means some sound quality is sacrificed to reduce file size.</li> </ul> <h3 id="audio-file-formats-cont-1" class="contents-heading">Audio File Formats (cont.)</h3> <ul> <li>Use a lossy compression method to minimize download time for audio files when posting on a webpage.</li> </ul> <h3 id="streaming-or-downloading" class="contents-heading">Streaming or Downloading</h3> <ul> <li>Streaming allows media files to begin playing before they're downloaded.</li> <li>Encoding software converts file formats for different browsers and use methods to stream media.</li> </ul> <h3 id="placing-sound-on-the-page" class="contents-heading">Placing Sound on the Page</h3> <ul> <li>Embed sound files directly into a web page.</li> <li>Use hyperlinks to a sound file stored on a web server.</li> <li>HTML5 ( <embed> and <audio> ) tags for sound embedding.</li> </ul> <h3 id="placing-sound-on-the-page-cont" class="contents-heading">Placing Sound on the Page (cont.)</h3> <ul> <li>Autoplay feature in embeddable sound files plays as soon as the page loads.</li> <li>Users should use simple audio controls to help manage sound file interaction.</li> </ul> <h3 id="placing-sound-on-the-page-cont-1" class="contents-heading">Placing Sound on the Page (cont.)</h3> <ul> <li>Hyperlinks allow user control of audio file play/pause.</li> </ul> <h3 id="do-you-want-to-hear-music" class="contents-heading">Do You Want to Hear Music?</h3> <ul> <li>Users are the first consideration during webpage design to incorporate music on a page; if it is not appealing, it is advisable to omit the music to allow users to engage with the webpage.</li> </ul> <h3 id="video" class="contents-heading">Video</h3> <ul> <li>HTML5's <video> tag embeds video files directly into a webpage.</li> <li>Quicktime is an alternative used for browsers that do not support the <video> tag.</li> </ul> <h3 id="creating-podcasts" class="contents-heading">Creating Podcasts</h3> <ul> <li>Podcasting delivers downloadable audio or video files via the internet.</li> <li>Podcasts resemble radio or television shows from the past.</li> </ul> <h3 id="creating-podcasts-cont" class="contents-heading">Creating Podcasts (cont.)</h3> <ul> <li>Downloaded podcasts offer flexibility in when they play and on which devices they're played.</li> </ul> <h3 id="podcasts-blogs-and-shared-media-sites" class="contents-heading">Podcasts, Blogs, and Shared Media Sites</h3> <ul> <li>Podcast, social networking, and media sharing sites are popular because of sharing features and ability to invite users to interact.</li> </ul> <h3 id="podcasts-and-xml" class="contents-heading">Podcasts and XML</h3> <ul> <li>XML (eXtensible Markup Language), a markup language that carries data packets, is used for podcasting; it describes how the data should be displayed on various devices.</li> </ul> <h3 id="podcasts-and-xml-cont" class="contents-heading">Podcasts and XML (cont.)</h3> <ul> <li>XHTML code combines XML with HTML content formatting.</li> <li>XSLT transforms XML data to create an aesthetically appealing format.</li> </ul> <h3 id="steps-in-creating-a-podcast" class="contents-heading">Steps in Creating a Podcast</h3> <ul> <li>Steps to create a podcast involve planning, creating the media file, saving the file, posting it, and inviting subscribers.</li> </ul> <h3 id="steps-in-creating-a-podcast-cont" class="contents-heading">Steps in Creating a Podcast (cont.)</h3> <ul> <li>Create a focused and organized media file. Be prepared prior to recording and organize microphone use to avoid sound distractions. Include the relevant audience. Consider a consistent format and time when producing a podcast. </li> </ul> <h3 id="steps-in-creating-a-podcast-cont-1" class="contents-heading">Steps in Creating a Podcast (cont.)</h3> <ul> <li>Save the file in various formats (e.g., MOV (QuickTime), .WMV (Windows Media Player) .MPE4 for widespread compatibility and efficiency.)</li> </ul> <h3 id="steps-in-creating-a-podcast-cont-2" class="contents-heading">Steps in Creating a Podcast (cont.)</h3> <ul> <li>Post the file to a web server through either a dedicated server or a media hosting service.</li> </ul> <h3 id="steps-in-creating-a-podcast-cont-3" class="contents-heading">Steps in Creating a Podcast (cont.)</h3> <ul> <li>Invite subscribers to your podcast to receive notifications from your podcast or website that has frequently changing content through RSS feed.</li> </ul> <h3 id="chapter-17-web-standards" class="contents-heading">Chapter 17: Web Standards</h3> <h3 id="world-wide-web-consortium-w3c" class="contents-heading">World Wide Web Consortium (W3C)</h3> <ul> <li>W3C helps to develop and manage standards for the web; their standards ensure that websites are displayed consistently across different browsers and screen types.</li> </ul> <h3 id="ensuring-access" class="contents-heading">Ensuring Access</h3> <ul> <li>A growing need is to make websites easily used and understood by everyone. The W3C and Section 508 guidelines focus on these accessibility features for website construction and design.</li> </ul> <h3 id="ensuring-access-cont" class="contents-heading">Ensuring Access (cont.)</h3> <ul> <li>W3C standards are multifaceted efforts, including website accessibility guidelines (WAI) that produce guidelines, resources, and tools for evaluating accessibility through website use by diverse people with or without disabilities.</li> </ul> <h3 id="ensuring-access-cont-1" class="contents-heading">Ensuring Access (cont.)</h3> <ul> <li>The WCAG, a set of recommendations for accessibility for the web, strives to make websites perceivable, operable, understandable, and robust in how they are designed.</li> </ul> <h3 id="ensuring-access-cont-2" class="contents-heading">Ensuring Access (cont.)</h3> <ul> <li>Assistive technology, such as screen readers, helps people with disabilities navigate and access websites.</li> </ul> <h3 id="section-508" class="contents-heading">Section 508</h3> <ul> <li>Section 508 guidelines are similar to W3C standards but apply only to federal agencies to ensure accessibility.</li> </ul> <p>Website Testing</p> <ul> <li>Using code validators, web editors allow users to test their website code to ensure compliance with various standards (markup language, Cascading style sheets, and other features, like mobile technology and RSS or Atom subscription feeds.)</li> </ul> <h3 id="testing-for-accessibility" class="contents-heading">Testing for Accessibility</h3> <ul> <li>A checklist is available to identify and correct accessibility issues that affect a website's usability, such as those related to color contrast, text, graphics, and other components in the design.</li> </ul> <h3 id="web-conventions" class="contents-heading">Web Conventions</h3> <ul> <li>Consistent website design conventions are expected by users for elements like copyright, update dates, home page navigation, email links, and telephone number details.</li> <li>The use of FAQs is typical for providing commonly asked questions' answers.</li> <li>Consistent and standard use of underlined text for hyperlinks, with color contrast and other standards, can keep the site consistent.</li> </ul> <h3 id="are-conventions-worth-following" class="contents-heading">Are Conventions Worth Following?</h3> <ul> <li>Consistent conventions improve user experience.</li> <li>Users experience frustration when navigating a website that is not easy to use.</li> </ul> <h3 id="evaluating-websites" class="contents-heading">Evaluating Websites</h3> <ul> <li>Checklists help evaluate website content and design to identify and correct problematic aspects.</li> </ul> <h3 id="getting-found" class="contents-heading">Getting Found</h3> <ul> <li>Effective websites benefit from advertising in print or other media to increase the site's visibility.</li> </ul> <h3 id="how-search-engines-work" class="contents-heading">How Search Engines Work</h3> <ul> <li>Search engines index websites based on keywords.</li> </ul> <h3 id="how-search-engines-work-cont" class="contents-heading">How Search Engines Work (cont.)</h3> <ul> <li>Search engine software continuously searches and indexes different webpages based on words to link to a website and the content richness of the site. </li> </ul> <h3 id="how-search-engines-work-cont-1" class="contents-heading">How Search Engines Work (cont.)</h3> <ul> <li>Employing well-designed HTML, clear URLs, sitemaps and descriptive titles, and keywords helps websites to appear higher in search results.</li> </ul> <h3 id="how-search-engines-work-cont-2" class="contents-heading">How Search Engines Work (cont.)</h3> <ul> <li>Using the Robot Exclusion Protocol, administrators can prevent search engine spiders from indexing parts of their website.</li> </ul> <h3 id="enhancing-search-results" class="contents-heading">Enhancing Search Results</h3> <ul> <li>Optimization improves website ranking in search results.</li> <li>Techniques used include signing up with webmasters' tools, choosing relevant keywords, creating high-quality website content, and sharing on other websites.</li> <li>SEO consultants may be hired to increase traffic.</li> </ul> <h3 id="web-analytics" class="contents-heading">Web Analytics</h3> <ul> <li>Get insight into your website through analytics tools such as Google Analytics (and Bing tools), which show total site traffic/visitors by day, week, and month, and the average time visitors spend on a webpage.</li> <li>Analytics tools provide data on traffic sources, visitor actions, bounce rates, and sales/purchase behavior.</li> </ul> <h3 id="key-concepts-2" class="contents-heading">Key Concepts</h3> <ul> <li>The key role of W3C is developing final standards for the web, receiving feedback and comments from stakeholders (developers and business owners) to create a reliable, accessible, and functional online presence.</li> </ul> <h3 id="key-concepts-cont-11" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Website accessibility is crucial to support diverse users of differing abilities and disabilities.</li> <li>WCAG, a set of guidelines developed by the W3C, focuses on making websites perceivable, operable, understandable, and robust.</li> </ul> <h3 id="key-concepts-cont-12" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Section 508 in the Rehabilitation Act (U.S. Federal Government) sets standards for government-linked websites.</li> </ul> <h3 id="key-concepts-cont-13" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Web sites create conventions: users have specific expectations of website attributes like copyright date, update date, links to the home page, the email addresses, FAQs on the website, and the use of underlines to identify hyperlinks.</li> </ul> <h3 id="key-concepts-cont-14" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>To gain search engine recognition and a high ranking, focus on website content quality with effective keywords.</li> </ul> <h3 id="key-concepts-cont-15" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Use web analytics to understand website usage trends and optimize content for better user engagement.</li> </ul> <h3 id="topic-71-electronic-collaboration" class="contents-heading">Topic 7.1 Electronic Collaboration</h3> <h3 id="email" class="contents-heading">Email</h3> <ul> <li>Electronic communication transmits data between electronic devices.</li> <li>Email electronically sends messages to one or more recipients, including attachments such as photos, audio recordings, or videos.</li> <li>Email clients manage user email accounts.</li> <li>Internet Service Providers (ISPs) provide email through the internet.</li> </ul> <h3 id="email-cont" class="contents-heading">Email (cont.)</h3> <ul> <li>Web-based/cloud email accounts, such as Gmail/Yahoo, are accessible online.</li> </ul> <h3 id="discussion-threads" class="contents-heading">Discussion Threads</h3> <ul> <li>A post on an online forum is a published message.</li> <li>A discussion thread is a connected chain of messages on a common topic.</li> </ul> <h3 id="cell-phones-and-texting" class="contents-heading">Cell Phones and Texting</h3> <ul> <li>Cell phones are used for text messages (SMS) (Short Message Service).</li> </ul> <h3 id="texting-cont" class="contents-heading">Texting (cont.)</h3> <ul> <li>Text messages are short, typed messages sent between two or more cell phones or other electronic devices, limited to 160 characters.</li> <li>Text messages can be shortened by using abbreviations or acronyms.</li> </ul> <h3 id="cloud-computing" class="contents-heading">Cloud Computing</h3> <ul> <li>Cloud computing delivers shared data via the internet; it is used to store, retrieve, edit, and share information, and is accessible from any device with internet access.</li> <li>Document, photo, video synchronization, and email are accessible from different devices accessing the cloud.</li> </ul> <h3 id="file-sharing" class="contents-heading">File Sharing</h3> <ul> <li>Sending files as email attachments is a rudimentary form of file sharing; using online file-sharing services is a better, more efficient alternative.</li> <li>Online file sharing allows for user participation in project reviews.</li> </ul> <h3 id="wikis" class="contents-heading">Wikis</h3> <ul> <li>Wikis are websites that allow users to create and edit content collaboratively.</li> <li>Some companies and universities use wikis to improve communication and collaboration among staff.</li> <li>Wikis can support project collaboration, learning promotion, and information sharing.</li> </ul> <h3 id="linkedin" class="contents-heading">LinkedIn</h3> <ul> <li>LinkedIn is a popular social networking site for professionals, with online profiles including work history, education, relevant experiences, and contact information.</li> </ul> <h3 id="facebook" class="contents-heading">Facebook</h3> <ul> <li>Facebook allows users to broadcast and share personal information with other users via a central newsfeed.  </li> <li>Using Facebook allows for public, accessible, personal information sharing with others. </li> </ul> <h3 id="social-media-considerations" class="contents-heading">Social Media Considerations</h3> <ul> <li>Social media is a useful tool for sharing information, photos, and thoughts/ideas; information on social media can be seen by potential employers.</li> </ul> <h3 id="twitter" class="contents-heading">Twitter</h3> <ul> <li>Twitter combines social networking with texting.</li> <li>Messages (tweets) sent through Twitter are broadcast to a list of followers.</li> <li>Twitter allows businesses to quickly share content/information to the public. <ul> <li>Tweets are a way for both individuals and businesses to post updates and comments to a public feed.</li> </ul> </li> </ul> <h3 id="twitter-cont" class="contents-heading">Twitter (cont.)</h3> <ul> <li>Tweets are sent and received through devices (phones, laptops, computers, etc.) or other ways to engage with the Twitter platform.</li> <li>Users can post updates and respond to messages on a Twitter platform.</li> </ul> <h3 id="videoconferencing" class="contents-heading">Videoconferencing</h3> <ul> <li>Videoconferencing provides face-to-face communication between individuals located in different places in real time.</li> <li>Saves time and money by avoiding travel costs and can be useful for meetings across time zones.</li> </ul> <h3 id="videoconferencing-preparation" class="contents-heading">Videoconferencing Preparation</h3> <ul> <li>Familiarize yourself with the videoconferencing tools prior to the meeting; understand the equipment and program/software to avoid delays.</li> <li>Prepare ahead, including a copy of the presentation and agenda.</li> </ul> <h3 id="videoconferencing-sound--movement" class="contents-heading">Videoconferencing (Sound & Movement)</h3> <ul> <li>Maintain clear verbal and visual communications to create a successful conference.</li> <li>Use normal speech volume and proper microphone settings to avoid unusual or distracting sounds in recordings or broadcasts.</li> <li>Physical movements should be minimal during the videoconference to avoid unnecessary camera motions.</li> </ul> <h3 id="videoconferencing-visual" class="contents-heading">Videoconferencing (Visual)</h3> <ul> <li>Visual aids, such as slide shows, webpages, and presentations, can be used during videoconferences.</li> <li>Utilize the software to enhance presentations and information sharing.</li> </ul> <h3 id="considerations" class="contents-heading">Considerations</h3> <ul> <li>Videoconferencing system requirements include quality, multimedia needs, recording options, and the total number of attendees.</li> </ul> <h3 id="key-concepts-3" class="contents-heading">Key Concepts</h3> <ul> <li>Electronic communication in forms like email and texting changed how people communicate with one another.</li> </ul> <h3 id="key-concepts-cont-16" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>File sharing and wikis are forms of cloud computing that can also synchronize and share files between many different devices.</li> </ul> <h3 id="key-concepts-cont-17" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Social media sites (LinkedIn, Twitter, and Facebook) allow users to share information easily with those in their network, including broadcast statements and comments to a public page or display.</li> </ul> <h3 id="key-concepts-cont-18" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Videoconferencing bridges the communication gap, offering a face-to-face communication medium for people in different locations.</li> </ul> <h3 id="topic-72-project-development-team" class="contents-heading">Topic 7.2 Project Development Team</h3> <h3 id="stages-of-team-development" class="contents-heading">Stages of Team Development</h3> <ul> <li>Teams go through four stages of development: Forming, Storming, Norming, and Performing.</li> </ul> <h3 id="stages-of-team-development-cont" class="contents-heading">Stages of Team Development (cont.)</h3> <ul> <li>Forming stage includes forming initial ideas and introducing roles; a leader should be available to answer questions.</li> </ul> <h3 id="stages-of-team-development-cont-1" class="contents-heading">Stages of Team Development (cont.)</h3> <ul> <li>Conflict could arise during the storming stage of team development, but this conflict can be resolved with strong leadership; compromises help the team to function smoothly.</li> </ul> <h3 id="stages-of-team-development-cont-2" class="contents-heading">Stages of Team Development (cont.)</h3> <ul> <li>Members agree to a common goal and understand roles during the norming phase, with the team developing a sense of unity. </li> <li>Team members may engage in more activities that strengthen unity and morale.</li> </ul> <h3 id="stages-of-team-development-cont-3" class="contents-heading">Stages of Team Development (cont.)</h3> <ul> <li>The performing stage shows a team understanding its goals, requiring minimal leadership support, to enable the team to function independently and solve conflict well. </li> </ul> <h3 id="team-charter" class="contents-heading">Team Charter</h3> <ul> <li>A team charter defines the team's goals, values, approach, and response to handling tasks.</li> <li>Key questions for defining the team's activities include the team's purpose and structure, what the team plans to accomplish, how the team tracks progress, and how to address problems/ask questions.</li> </ul> <h3 id="team-communications" class="contents-heading">Team Communications</h3> <ul> <li>Robust communications are essential for successful team performance.</li> <li>Avoiding misunderstandings, ridicule, conflict, and differing opinions/thoughts among team members creates a smooth working environment.</li> </ul> <h3 id="cant-we-all-just-get-along" class="contents-heading">Can't We All Just Get Along?</h3> <ul> <li>Successfully functioning teams require that all team members embrace differences and find common ground for the overall success of the team objectives.</li> </ul> <h3 id="team-building-activities" class="contents-heading">Team-Building Activities</h3> <ul> <li>Team-building activities create opportunities for team members to interact, bond, and improve teamwork and communication.</li> <li>Activities can be simple, like sharing meals or playing games; or engaging in recognition of their contributions to help strengthen the team and increase cohesiveness/unity.</li> </ul> <h3 id="team-building-activities-cont" class="contents-heading">Team-Building Activities (cont.)</h3> <ul> <li>Team meetings should be scheduled with defined beginning and ending times and outlined purposes.</li> </ul> <h3 id="team-building-activities-cont-1" class="contents-heading">Team-Building Activities (cont.)</h3> <ul> <li>Team decisions should clearly outline the tasks, deadlines, impact on the team, involvement, and decision-making process.</li> </ul> <h3 id="collaborative-tools" class="contents-heading">Collaborative Tools</h3> <ul> <li>Collaborative technology tools are necessary for teams to collaborate on projects and documents even when team members are not in the same physical location.</li> </ul> <h3 id="role-of-the-client" class="contents-heading">Role of the Client</h3> <ul> <li>External clients, specific department teams, or team members are considered clients.</li> <li>Clients need to be available to respond to communication and feedback requests.</li> </ul> <h3 id="role-of-multimedia-development-team-members" class="contents-heading">Role of Multimedia Development Team Members</h3> <ul> <li>Team Leaders/Project Managers should define project roles and guide the projects' activities; they must also have excellent communication skills for working successfully with team members.</li> </ul> <h3 id="role-of-multimedia-development-team-members-cont" class="contents-heading">Role of Multimedia Development Team Members (cont.)</h3> <ul> <li>Producers are responsible for project execution, establishing project links, and ensuring cohesiveness and professionalism. </li> </ul> <h3 id="role-of-multimedia-development-team-members-cont-1" class="contents-heading">Role of Multimedia Development Team Members (cont.)</h3> <ul> <li>User interface designers specify how different multimedia content interacts with one another and the end users. </li> </ul> <h3 id="role-of-multimedia-development-team-members-cont-2" class="contents-heading">Role of Multimedia Development Team Members (cont.)</h3> <ul> <li>Media specialists are responsible for creating project content, with various specializations. Specializations can include motion design, graphics, audio, videography, writing, and editing.</li> </ul> <h3 id="role-of-multimedia-development-team-members-cont-3" class="contents-heading">Role of Multimedia Development Team Members (cont.)</h3> <ul> <li>Computer systems specialists guarantee user-friendly, functional projects, developing and understanding the computer architecture.</li> </ul> <h3 id="role-of-multimedia-development-team-members-cont-4" class="contents-heading">Role of Multimedia Development Team Members (cont.)</h3> <ul> <li>Quality assurance analysts create guidelines to assess each project's technical standards. They test all content aspects to ensure all standards are met.</li> </ul> <h3 id="the-ethics-of-conflict" class="contents-heading">The Ethics of Conflict</h3> <ul> <li>Conflicts can be used as opportunities; conflict arises when differences of opinion or approaches are presented; it is useful to be able to embrace these differences in ideas to increase problem-solving potential.</li> <li>It is important to be able to provide a neutral environment and for everyone to be able to present their perspectives and ideas without criticism of individuals' contributions.</li> </ul> <h3 id="key-concepts-4" class="contents-heading">Key Concepts</h3> <ul> <li>Developing a project begins with defining a successful team through an initial team development/formation process.</li> </ul> <h3 id="key-concepts-cont-19" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Effective and relevant team-building activities create cohesion among diverse individuals.</li> </ul> <h3 id="key-concepts-cont-20" class="contents-heading">Key Concepts (cont.)</h3> <ul> <li>Essential roles within a multimedia team include project management leadership, content creation, design input, and project support.</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/topic-5-and-6-KRL9Tk">Digital Media 4e - Web Development 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=867386&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>Test your knowledge of XHTML with this quiz that covers essential elements, tag usage, attributes, and best practices in web design. Explore the purpose of DOCTYPE declarations and the significance of Cascading Style Sheets (CSS) in creating effective websites. Perfect for students learning web development.</p> </div> </div> </div> </article> </main> <aside class="lg:col-span-1 hidden lg:block"> <div class="sticky top-6"> <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"> <div x-data="visibleNavHighlighter" class="flex flex-col gap-6 items-start justify-start w-full flex-shrink-0 relative overflow-y-auto pl-4 pb-4 pt-4 max-h-[calc(100vh-3rem)]"> <div class="flex flex-col gap-4 items-start justify-start w-full flex-shrink-0 relative"> <div class="px-3 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'introduction', 'opacity-0': visibleHeadingId !== 'introduction' }"> </div> <div class="text-elevated-3 dark:text-surface-4 text-left font-semibold text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'introduction' }"> <a href="#introduction"> Introduction </a> </div> </div> <div class="px-3 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'podcast', 'opacity-0': visibleHeadingId !== 'podcast' }"> </div> <div class="text-elevated-3 dark:text-surface-4 text-left font-semibold text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'podcast' }"> <a href="#podcast"> Podcast </a> </div> </div> <div class="px-3 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'questions-and-answers', 'opacity-0': visibleHeadingId !== 'questions-and-answers' }"> </div> <div class="text-elevated-3 dark:text-surface-4 text-left font-semibold text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'questions-and-answers' }"> <a href="#questions-and-answers"> Questions and Answers </a> </div> </div> <div class="px-3 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'flashcards', 'opacity-0': visibleHeadingId !== 'flashcards' }"> </div> <div class="text-elevated-3 dark:text-surface-4 text-left font-semibold text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'flashcards' }"> <a href="#flashcards"> Flashcards </a> </div> </div> <div class="px-3 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'study-notes', 'opacity-0': visibleHeadingId !== 'study-notes' }"> </div> <div class="text-elevated-3 dark:text-surface-4 text-left font-semibold text-base leading-6 flex-1 flex items-center justify-between" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'study-notes' }"> <a href="#study-notes"> Study Notes </a> <button @click.prevent.stop="studyNotesExpanded = !studyNotesExpanded" class="transform transition-transform duration-200" :class="{ 'rotate-180': studyNotesExpanded }"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg> </button> </div> </div> <div x-cloak x-show="studyNotesExpanded" x-transition.duration.200ms class="space-y-3"> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'chapter-13-web-development', 'opacity-0': visibleHeadingId !== 'chapter-13-web-development' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'chapter-13-web-development' }"> <a href="#chapter-13-web-development"> Chapter 13: Web Development </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'learning-outcomes', 'opacity-0': visibleHeadingId !== 'learning-outcomes' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'learning-outcomes' }"> <a href="#learning-outcomes"> Learning Outcomes </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'introduction-to-web-development', 'opacity-0': visibleHeadingId !== 'introduction-to-web-development' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'introduction-to-web-development' }"> <a href="#introduction-to-web-development"> Introduction to Web Development </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'methods-of-developing-websites', 'opacity-0': visibleHeadingId !== 'methods-of-developing-websites' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'methods-of-developing-websites' }"> <a href="#methods-of-developing-websites"> Methods of Developing Websites </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'hosting-a-website', 'opacity-0': visibleHeadingId !== 'hosting-a-website' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'hosting-a-website' }"> <a href="#hosting-a-website"> Hosting a Website </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'considerations-for-web-development', 'opacity-0': visibleHeadingId !== 'considerations-for-web-development' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'considerations-for-web-development' }"> <a href="#considerations-for-web-development"> Considerations for Web Development </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'writing-code-for-web-development', 'opacity-0': visibleHeadingId !== 'writing-code-for-web-development' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'writing-code-for-web-development' }"> <a href="#writing-code-for-web-development"> Writing Code for Web Development </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'inside-html', 'opacity-0': visibleHeadingId !== 'inside-html' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'inside-html' }"> <a href="#inside-html"> Inside HTML </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'xhtml-basics', 'opacity-0': visibleHeadingId !== 'xhtml-basics' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'xhtml-basics' }"> <a href="#xhtml-basics"> XHTML Basics </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'xhtml-basics-cont', 'opacity-0': visibleHeadingId !== 'xhtml-basics-cont' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'xhtml-basics-cont' }"> <a href="#xhtml-basics-cont"> XHTML Basics (cont.) </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'xhtml-basics-cont', 'opacity-0': visibleHeadingId !== 'xhtml-basics-cont' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'xhtml-basics-cont' }"> <a href="#xhtml-basics-cont"> XHTML Basics (cont.) </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'the-ethics-of-copying-code', 'opacity-0': visibleHeadingId !== 'the-ethics-of-copying-code' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'the-ethics-of-copying-code' }"> <a href="#the-ethics-of-copying-code"> The Ethics of Copying Code </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'web-and-text-editing-software', 'opacity-0': visibleHeadingId !== 'web-and-text-editing-software' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'web-and-text-editing-software' }"> <a href="#web-and-text-editing-software"> Web and Text Editing Software </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'web-and-text-editing-software-cont', 'opacity-0': visibleHeadingId !== 'web-and-text-editing-software-cont' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'web-and-text-editing-software-cont' }"> <a href="#web-and-text-editing-software-cont"> Web and Text Editing Software (cont.) </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'web-and-text-editing-software-cont', 'opacity-0': visibleHeadingId !== 'web-and-text-editing-software-cont' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'web-and-text-editing-software-cont' }"> <a href="#web-and-text-editing-software-cont"> Web and Text Editing Software (cont.) </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'web-and-text-editing-software-cont', 'opacity-0': visibleHeadingId !== 'web-and-text-editing-software-cont' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'web-and-text-editing-software-cont' }"> <a href="#web-and-text-editing-software-cont"> Web and Text Editing Software (cont.) </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'obstacles-to-universal-access', 'opacity-0': visibleHeadingId !== 'obstacles-to-universal-access' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'obstacles-to-universal-access' }"> <a href="#obstacles-to-universal-access"> Obstacles to Universal Access </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'obstacles-to-universal-access-cont', 'opacity-0': visibleHeadingId !== 'obstacles-to-universal-access-cont' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'obstacles-to-universal-access-cont' }"> <a href="#obstacles-to-universal-access-cont"> Obstacles to Universal Access (cont.) </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'obstacles-to-universal-access-cont', 'opacity-0': visibleHeadingId !== 'obstacles-to-universal-access-cont' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'obstacles-to-universal-access-cont' }"> <a href="#obstacles-to-universal-access-cont"> Obstacles to Universal Access (cont.) </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'obstacles-to-universal-access-cont', 'opacity-0': visibleHeadingId !== 'obstacles-to-universal-access-cont' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'obstacles-to-universal-access-cont' }"> <a href="#obstacles-to-universal-access-cont"> Obstacles to Universal Access (cont.) </a> </div> </div> </div> </div> </div> <script> document.addEventListener('alpine:initializing', () => { Alpine.data('visibleNavHighlighter', () => ({ headings: [], visibleHeadingId: null, studyNotesExpanded: false, init() { this.headings = Array.from(document.querySelectorAll('.contents-heading')); this.assignHeadingIds(); this.highlightVisibleHeading(); window.addEventListener('scroll', () => this.highlightVisibleHeading()); }, assignHeadingIds() { this.headings.forEach(heading => { if (!heading.id) { heading.id = heading.textContent.trim().toLowerCase().replace( /\s+/g, '-'); } }); }, highlightVisibleHeading() { const scrollPosition = window.scrollY; const windowHeight = window.innerHeight; for (let heading of this.headings) { const rect = heading.getBoundingClientRect(); if (rect.top >= 0 && rect.top <= windowHeight * 0.3) { this.visibleHeadingId = heading.id; // console.log('Current visible heading:', this.visibleHeadingId); return; } } // If no heading is found in the top 30% of the viewport, highlight none this.visibleHeadingId = null; } })); }); </script> </div> </div> </aside> </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-and-css-quiz-BZ6YzY"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1611647832580-377268dba7cb?ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHwxOXx8SFRNTCUyMHdlYiUyMGRldmVsb3BtZW50JTIwcHJvZ3JhbW1pbmd8ZW58MXwwfHx8MTcwMzkzNDUzOXww&ixlib=rb-4.0.3&w=300&fit=crop&h=200&q=75&fm=webp" alt="HTML and CSS Quiz" loading="lazy" /> </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>56 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/html-and-css-quiz-BZ6YzY"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> HTML and CSS 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="HealthyWilliamsite avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>HealthyWilliamsite</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/javascript-en-un-documento-xhtml-le4jkc"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1618044619888-009e412ff12a?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHw2fHxIVE1MJTIwQ1NTJTIwSmF2YVNjcmlwdCUyMHdlYiUyMGRldmVsb3BtZW50fGVufDF8MHx8fDE3MDM5MTIxOTV8MA&ixlib=rb-4.0.3&q=85&w=300&fit=crop&h=200&q=75&fm=webp" alt="JavaScript en un Documento XHTML" loading="lazy" /> </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>18 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/javascript-en-un-documento-xhtml-le4jkc"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> JavaScript en un Documento XHTML </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-1.webp" alt="MagnificentTabla avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>MagnificentTabla</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-a-html-et-xhtml-w5zgtl"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1508921340878-ba53e1f016ec?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHw0fHxodG1sJTIwYmFzaWNzJTJDJTIweGh0bWwlMjBkaWZmZXJlbmNlcyUyQyUyMHdlYiUyMGRldmVsb3BtZW50fGVufDF8MHx8fDE3MzY0NDk4Mjh8MA&ixlib=rb-4.0.3&q=85&w=300&fit=crop&h=200&q=75&fm=webp" alt="Introduction à HTML et XHTML" loading="lazy" /> </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>45 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/introduction-a-html-et-xhtml-w5zgtl"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> Introduction à HTML et XHTML </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-19.webp" alt="CuteLearning366 avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>CuteLearning366</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">XHTML Basics Quiz</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 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'share-lesson' })); this.show = false; } }" 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="closeModal()" x-on:close-modal.window="$event.detail == 'share-lesson' ? show = false : null" x-on:keydown.escape.window="closeModal()" 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="closeModal()" 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=closeModal() 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="closeModal()" 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/xhtml-basics-quiz-zdzvke" 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"> <!-- resources/views/components/social-share-button.blade.php --> <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%2Fxhtml-basics-quiz-zdzvke" 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> <!-- resources/views/components/social-share-button.blade.php --> <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%2Fxhtml-basics-quiz-zdzvke" 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> <!-- resources/views/components/social-share-button.blade.php --> <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%2Fxhtml-basics-quiz-zdzvke" 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> <!-- resources/views/components/social-share-button.blade.php --> <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%2Fxhtml-basics-quiz-zdzvke" 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: 1236944, 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.$store.ui.modals.registerModal.toggle(); return; } if (!this.user && !this.openedQuestions) { this.openedQuestions = new Set(); } if (!this.user && this.openedQuestions.size >= 2) { this.$store.ui.modals.registerModal.toggle(); 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.$store.ui.modals.registerModal.toggle(); return; } if (this.hideFlashcards) { return; } window.location.href = 'https://quizgecko.com/learn/' + this.slug + '/flashcards/start?mode=review'; }, playSpacedRepetitionFlashcards: function() { if (!window.user) { this.$store.ui.modals.registerModal.toggle(); return; } if (!window.user.is_paid) { this.$store.ui.modals.plansModal.toggle( "Please upgrade to use spaced repetition flashcards" ); return; } window.location.href = 'https://quizgecko.com/learn/' + this.slug + '/flashcards/start?mode=spaced-repetition'; }, playQuiz: function() { if (!window.user) { this.$store.ui.modals.registerModal.toggle(); return; } window.location.href = 'https://quizgecko.com/learn/' + this.slug + '/play/start'; }, playChat: function() { if (!this.user) { this.$store.ui.modals.registerModal.toggle(); return; } if (!window.user.is_paid) { this.$store.ui.modals.plansModal.toggle( "Please upgrade to use chat to lesson" ); return; } window.location.href = 'https://quizgecko.com/chat/assistant?quiz_ids=' + this.quizId; }, duplicate: function() { if (!this.user) { this.$store.ui.modals.registerModal.toggle(); 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/1236944/duplicate'; return window.location.href = url; } }, downloadPdf: function(quizId, withAnswers) { if (!this.user) { this.$store.ui.modals.registerModal.toggle(); 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"> <!-- Banner content --> <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 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'help' })); this.show = false; } }" 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="closeModal()" x-on:close-modal.window="$event.detail == 'help' ? show = false : null" x-on:keydown.escape.window="closeModal()" 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="closeModal()" 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=closeModal() 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="closeModal()" 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 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'limit' })); this.show = false; } }" 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="closeModal()" x-on:close-modal.window="$event.detail == 'limit' ? show = false : null" x-on:keydown.escape.window="" 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="closeModal()" 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 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="closeModal()" 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-12"> <!-- Title --> <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-1 mb-4 text-elevated-1 dark:text-surface-6 text-md text-center prose-dark"> <!-- Show custom message --> <p class="mb-4" x-text="$store.ui.modals.plansModal.message"></p> <p class="mb-7 mt-2"> </p> <div class="mx-auto max-w-sm mt-12"> <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 hover:text-surface-1" full="true" size="lg" href="https://quizgecko.com/plans?offer=special"> View Plans & Pricing </a> </div> </div> </div> </div> <div class="p-12 bg-surface-2 dark:bg-elevated-4"> <div class="mb-5 -mt-4 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 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 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 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'feedback' })); this.show = false; } }" 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="closeModal()" x-on:close-modal.window="$event.detail == 'feedback' ? show = false : null" x-on:keydown.escape.window="closeModal()" 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="closeModal()" 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=closeModal() 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="closeModal()" 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"> Please use this form to submit feedback or report bugs. You can find answers to most questions in our <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="CmSJuEs8j3jTwHbIBKJFZq7SlxkISjjcbMUKpdtn" 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.confirmModal("Submitted", "Thank you for your feedback!", false); }) .catch((error) => { console.error("Error submitting feedback:", error); window.confirmModal("Error", "Sorry, there was an error submitting your feedback. Please try again.", false); 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 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'register' })); this.show = false; } }" 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="closeModal()" x-on:close-modal.window="$event.detail == 'register' ? show = false : null" x-on:keydown.escape.window="closeModal()" 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="closeModal()" 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=closeModal() 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="closeModal()" 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="CmSJuEs8j3jTwHbIBKJFZq7SlxkISjjcbMUKpdtn" 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> <!-- Name --> <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> <!-- Email Address --> <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> <!-- Password --> <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> <!-- Confirm Password --> <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 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'confirm' })); this.show = false; } }" 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="closeModal()" x-on:close-modal.window="$event.detail == 'confirm' ? show = false : null" x-on:keydown.escape.window="closeModal()" 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="closeModal()" 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=closeModal() 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="closeModal()" 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"> <template x-if="$store.confirmModal.showCancel"> <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> </template> <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: '', showCancel: true, onOk: () => {}, onCancel: () => {}, show(title, message, showCancel = true) { window.dispatchEvent(new CustomEvent('open-modal', { detail: 'confirm' })); this.title = title; this.message = message; this.showCancel = showCancel; this.open = true; }, hide() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'confirm' })); this.open = false; } }); }); window.confirmModal = (title, message, showCancel = true) => { return new Promise((resolve) => { const confirmModal = Alpine.store('confirmModal'); confirmModal.show(title, message, showCancel); 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"> <!-- Show container only when there are notifications --> <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"> <!-- Notification --> <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"> <!-- Icons --> <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> <!-- Text --> <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> <!-- Remove button --> <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"> Solutions </p> <ul role="list" class="mt-6 space-y-4"> <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 Schools</a> </li> <li> <a href="https://quizgecko.com/for/business" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">For Business</a> </li> <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/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 "> <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> <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="d1fab36850c5b3ca72231f25-|49" defer></script>