Web Page Design Steps

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson
Download our mobile app to listen on the go
Get App

Questions and Answers

Before initiating the design of a webpage, what preliminary step is crucial?

  • Selecting a hosting provider.
  • Creating a rough overview of the webpage. (correct)
  • Preparing a detailed graphic design.
  • Writing the complete HTML code.

During the layout design phase, how should the structure of a webpage be conceptually divided?

  • Into a navigation bar, main content, and sidebar.
  • Into areas for user input, display, and advertising.
  • Into distinct sections for images, text, and videos.
  • Into header, body, and footer parts. (correct)

When setting up the code for a webpage, what is the primary purpose of creating a simple index.html page?

  • To store all media assets like images and videos.
  • To implement advanced JavaScript functionalities.
  • To test if the code is functioning correctly. (correct)
  • To serve as the final version of the homepage.

In HTML, which element is specifically designated for defining a self-contained composition in a document that is intended to be independently distributable or reusable?

<article> (B)
Signup and view all the answers

Which of the following is the correct sequence of steps when building elements for a webpage?

<head>, <body>, <main>, <footer> (C)
Signup and view all the answers

What is the main purpose of using CSS code during the layout design of a webpage?

<p>To fix elements at specific locations and highlight important elements. (C)</p>
Signup and view all the answers

Which of the following actions primarily contributes to customizing a webpage to improve its look and feel?

<p>Adding background images, videos, links, and comments. (B)</p>
Signup and view all the answers

What is the role of the <nav> element in structuring an HTML page?

<p>It defines a set of navigation links. (C)</p>
Signup and view all the answers

How does the <aside> element contribute to an HTML layout?

<p>By defining content aside from the main content (like a sidebar). (A)</p>
Signup and view all the answers

What does the <footer> element primarily define in an HTML document?

<p>A footer for a document or section. (B)</p>
Signup and view all the answers

Which of the following is NOT a typical component of a basic webpage layout?

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

What is the purpose of the <details> element in HTML?

<p>To define additional details that the user can open and close. (D)</p>
Signup and view all the answers

What role does the <summary> tag play when it's used inside a <details> element?

<p>It defines the heading for the <code>&lt;details&gt;</code> element. (C)</p>
Signup and view all the answers

After the initial setup of HTML and CSS files, what should a developer focus on next when building a webpage?

<p>Designing and structuring the webpage elements (C)</p>
Signup and view all the answers

How does creating a rough overview of a webpage enhance the design process?

<p>It helps in organizing elements logically. (C)</p>
Signup and view all the answers

Why is it important to highlight certain elements on a webpage using CSS?

<p>To enhance user engagement and focus attention (C)</p>
Signup and view all the answers

Which element should be used to define a common area that contains the logo and main title?

<header> (C)
Signup and view all the answers

What is the semantic purpose of the <section> element?

<p>To divide a document into thematic grouping of content. (A)</p>
Signup and view all the answers

You can add video content to a website for what purpose?

<p>To engage the user with web pages (B)</p>
Signup and view all the answers

In the context of HTML layout, what primarily constitutes 'page layout'?

<p>The arrangement of visual elements on a page. (C)</p>
Signup and view all the answers

Flashcards

Web page overview

An initial rough plan of your future web page

Web page structure

Header, body, and footer.

Web project folder

A folder to keep your HTML and CSS files organized.

style.css

The file for external CSS styling.

Signup and view all the flashcards

index.html (initial)

An HTML file used to test code functionality.

Signup and view all the flashcards

Essential HTML tags

The basic structure tags to build your web page.

Signup and view all the flashcards

HTML element that defines a header for a document or section.

Signup and view all the flashcards

HTML element that defines a set of navigation links.

Signup and view all the flashcards

HTML element that defines a section in a document.

Signup and view all the flashcards

HTML element that defines independent, self-contained content.

Signup and view all the flashcards

Content aside from the main content

Signup and view all the flashcards

HTML element that defines a footer for a document or a section.

Signup and view all the flashcards

CSS layout

CSS code to precisely position elements and highlight key areas.

Signup and view all the flashcards

Web page customization

Enhancing look and feel, adding images, videos, and links.

Signup and view all the flashcards

Page layout

The arrangement of visual elements on a page

Signup and view all the flashcards

Study Notes

Web Page Design Steps

  • Web page design encompasses several steps to create an effective homepage layout using HTML/CSS.

Designing Layout

  • A rough overview is necessary to prepare before starting to design a webpage.
  • Preparing a rough overview helps to put elements according to user needs.
  • Web pages can be divided into 3 parts: header, body, and footer.

Code set up

  • Starting the process can involve creating a folder to store web pages.
  • A style.css file can be prepared for external styling of the HTML page.
  • A simple index.html page used for checking whether the code is working.

Building Elements

  • Start web page creation by designing elements such as ,
    , lastly,
    part.
  • It consists of different tags such as,

    ,, ,

    to
    heading tags, ,<sub>,<ol>, <ul>,<a herf="">, <section>, <articles> <img>, <iframe> and elements like <table>, <nav>, <button>,<textarea> etc.</li> </ul> <h3 id="css-integration" class="contents-heading">CSS Integration</h3> <ul> <li>Use CSS code to fix elements at specific locations.</li> <li>Highlighting important elements is achieved using CSS styling.</li> </ul> <h3 id="customization" class="contents-heading">Customization</h3> <ul> <li>This refines the appearance of the webpage.</li> <li>Customization includes adding background images, video content, links, comments, and lists.</li> </ul> <h3 id="html-page-layout" class="contents-heading">HTML Page Layout</h3> <ul> <li>Page layout is a part of graphic design arranging visual elements on a page.</li> <li>Sections include: header, navigation bar, index, content section, and footer section.</li> </ul> <h3 id="html-layout-elements" class="contents-heading">HTML Layout Elements</h3> <ul> <li>HTML has semantic elements that define parts of a web page.</li> <li><code><header></code> element defines a header for a document or section.</li> <li><code><nav></code> is a set of navigation links.</li> <li><code><section></code> defines a section in a document.</li> <li><code><article></code> defines independent, self-contained content.</li> <li><code><aside></code> defines content aside from the main content (like a sidebar).</li> <li><code><footer></code> defines a footer for a document or a section.</li> <li><code><details></code> defines additional details that the user can open and close on demand.</li> <li><code><summary></code> defines a heading for the <code><details></code> element.</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-2 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-2 sm:p-4 p-4 border-surface-4 dark:border-elevated-2 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/lecture6-VeKFsJ">Web Page Design Steps & Homepage Layout in HTML/CSS</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=1087174&mode=chat'" type="button"> Chat with Document </button> </div> </div> </div> </div> </article> </main> <aside class="lg:col-span-1 hidden lg:block "> <div class="sticky top-6 border-l border-surface-4 dark:border-elevated-2 pl-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-2 sm:p-0 p-0 border-surface-4 dark:border-elevated-2"> <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 === 'web-page-design-steps', 'opacity-0': visibleHeadingId !== 'web-page-design-steps' }"> </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-page-design-steps' }"> <a href="#web-page-design-steps"> Web Page Design Steps </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 === 'designing-layout', 'opacity-0': visibleHeadingId !== 'designing-layout' }"> </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 === 'designing-layout' }"> <a href="#designing-layout"> Designing Layout </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 === 'code-set-up', 'opacity-0': visibleHeadingId !== 'code-set-up' }"> </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 === 'code-set-up' }"> <a href="#code-set-up"> Code set up </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 === 'building-elements', 'opacity-0': visibleHeadingId !== 'building-elements' }"> </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 === 'building-elements' }"> <a href="#building-elements"> Building Elements </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 === 'css-integration', 'opacity-0': visibleHeadingId !== 'css-integration' }"> </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 === 'css-integration' }"> <a href="#css-integration"> CSS Integration </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 === 'customization', 'opacity-0': visibleHeadingId !== 'customization' }"> </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 === 'customization' }"> <a href="#customization"> Customization </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 === 'html-page-layout', 'opacity-0': visibleHeadingId !== 'html-page-layout' }"> </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 === 'html-page-layout' }"> <a href="#html-page-layout"> HTML Page Layout </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 === 'html-layout-elements', 'opacity-0': visibleHeadingId !== 'html-layout-elements' }"> </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 === 'html-layout-elements' }"> <a href="#html-layout-elements"> HTML Layout Elements </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 "> 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-2 sm:p-4 p-4 border-surface-4 dark:border-elevated-2 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-2 sm:p-0 p-0 border-surface-4 dark:border-elevated-2 max-w-sm"> <a href="https://quizgecko.com/learn/html-structure-and-elements-quiz-6buppy"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1501159599894-155982264a55?ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHw1fHxIVE1MJTIwc3RydWN0dXJlJTIwSFRNTCUyMGVsZW1lbnRzJTIwd2ViJTIwcGFnZSUyMGRlc2lnbiUyMGZyb250LWVuZCUyMGRldmVsb3BtZW50fGVufDF8MHx8fDE3MDY0Njg5MzN8MA&ixlib=rb-4.0.3&w=300&fit=crop&h=200&q=75&fm=webp" alt="HTML Structure and Elements 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>28 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/html-structure-and-elements-quiz-6buppy"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> HTML Tags: Case Sensitive True or False Quiz and Flashcards </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-8.webp" alt="FineChrysoprase3242 avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>FineChrysoprase3242</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-2 sm:p-0 p-0 border-surface-4 dark:border-elevated-2 max-w-sm"> <a href="https://quizgecko.com/learn/exploring-html-tags-understanding-the-foundations-of-web-z5fiiu"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1661595677069-d76b2ed2367e?ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHwyNnx8aW1hZ2UlMjBlZGl0aW5nJTIwc29mdHdhcmUlMjBHSU1QJTIwUGVuY2lsJTIwSFRNTCUyMHRhZ3N8ZW58MXwwfHx8MTcwNzQ3NDc5MHww&ixlib=rb-4.0.3&w=300&fit=crop&h=200&q=75&fm=webp" alt="Exploring HTML Tags: Understanding the Foundations of Web Page Design" 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>8 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/exploring-html-tags-understanding-the-foundations-of-web-z5fiiu"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> Exploring HTML Tags: Understanding the Foundations of Web Page Design </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-9.webp" alt="FortuitousColumbus avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>FortuitousColumbus</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-2 sm:p-0 p-0 border-surface-4 dark:border-elevated-2 max-w-sm"> <a href="https://quizgecko.com/learn/dynamic-web-page-design-with-html-css-and-hhqjmi"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHw0fHx3ZWIlMjBkZXZlbG9wbWVudCUyQyUyMEhUTUwlMkMlMjBwcm9ncmFtbWluZ3xlbnwxfDB8fHwxNzE0MjA4Nzc4fDA&ixlib=rb-4.0.3&q=85&w=300&fit=crop&h=200&q=75&fm=webp" alt="Dynamic Web Page Design with HTML, CSS, and JavaScript" 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>5 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/dynamic-web-page-design-with-html-css-and-hhqjmi"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> CSS Styling Websites Quiz: Dynamic Web Page Design with HTML and JavaS... </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-3.webp" alt="ModernAstronomy avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>ModernAstronomy</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-2 sm:p-0 p-0 border-surface-4 dark:border-elevated-2 max-w-sm"> <a href="https://quizgecko.com/learn/html-web-page-design-lbtgev"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1610466896927-699424f3c86d?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHwyN3x8SFRNTCUyMHdlYiUyMGRldmVsb3BtZW50JTIwcHJvZ3JhbW1pbmd8ZW58MXwwfHx8MTcwMzkzNDUzOXww&ixlib=rb-4.0.3&q=85&w=300&fit=crop&h=200&q=75&fm=webp" alt="HTML Web Page Design" 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>12 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/html-web-page-design-lbtgev"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> HTML Web Page Design </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-9.webp" alt="ErrFreeShofar avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>ErrFreeShofar</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">Web Page Design Steps</span> <meta itemprop="position" content="2" /> </li> </ol> </nav> </div> </div> </div> </div> <div id="modal-share-assign-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 }, backOnClose: false, closeModal() { if (this.backOnClose) { window.history.back(); } window.dispatchEvent(new CustomEvent('close-modal', { detail: 'share-assign-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-assign-lesson' ? show = true : null" x-on:close.stop="closeModal()" x-on:close-modal.window="$event.detail == 'share-assign-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-50" 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-50 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 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="pt-12 pr-8 pb-16 pl-8 flex flex-col gap-6 items-center" x-data="{ copied: false, loading: false, visibility: 'Public', init() { // Only track event when modal is actually opened window.addEventListener('open-modal', (event) => { if (event.detail === 'share-assign-lesson') { window.trackEvent('share_lesson', { quiz_id: 1451452, 'via': 'share_assign_modal' }); } }); }, toggleVisibility() { this.loading = true; axios.put('/api/v1/quiz/1451452', { visibility: this.visibility }) .then(response => { this.$dispatch('notify', { title: 'Updated', content: 'Visibility updated successfully', type: 'success', }); }) .catch(error => { this.$dispatch('notify', { title: 'Error', content: error.response?.data?.message || 'Failed to update visibility', type: 'error', }); this.visibility = 'Public'; }) .finally(() => { this.loading = false; }); } }"> <div> <h3 class="text-center text-2xl font-bold relative self-stretch flex items-center justify-center"> Quick Share </h3> <div class="mt-2"> Copy the link below or share directly to socials. </div> </div> <div class="w-full"> <div class="w-full bg-surface-0 dark:bg-elevated-3 rounded-2xl border border-surface-4 dark:border-elevated-1 p-4 flex flex-col gap-4"> <!-- Header --> <!-- Visibility Settings --> <div class="bg-surface-0 dark:bg-elevated-3 rounded-xl border border-surface-4 dark:border-elevated-1 p-2 flex items-center"> <div class="p-2 flex items-center gap-2 flex-1 text-sm"> <svg class="w-6 h-6 text-elevated-3 dark:text-surface-4" 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,16a87.5,87.5,0,0,1,48,14.28V74L153.83,99.74,122.36,104l-.31-.22L102.38,90.92A16,16,0,0,0,79.87,95.1L58.93,126.4a16,16,0,0,0-2.7,8.81L56,171.44l-3.27,2.15A88,88,0,0,1,128,40ZM62.29,186.47l2.52-1.65A16,16,0,0,0,72,171.53l.21-36.23L93.17,104a3.62,3.62,0,0,0,.32.22l19.67,12.87a15.94,15.94,0,0,0,11.35,2.77L156,115.59a16,16,0,0,0,10-5.41l22.17-25.76A16,16,0,0,0,192,74V67.67A87.87,87.87,0,0,1,211.77,155l-16.14-14.76a16,16,0,0,0-16.93-3l-30.46,12.65a16.08,16.08,0,0,0-9.68,12.45l-2.39,16.19a16,16,0,0,0,11.77,17.81L169.4,202l2.36,2.37A87.88,87.88,0,0,1,62.29,186.47ZM185,195l-4.3-4.31a16,16,0,0,0-7.26-4.18L152,180.85l2.39-16.19L184.84,152,205,170.48A88.43,88.43,0,0,1,185,195Z"/></svg> <div class="font-semibold"> Anyone: Anyone can view and access this lesson. </div> </div> </div> <!-- Share Link --> <div x-show="visibility === 'Public'" class="flex flex-col gap-2 w-full"> <div class="flex items-center gap-2 w-full"> <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 flex-1" id="lessonLink" type="text" value="https://quizgecko.com/learn/web-page-design-steps-hwo2mf" 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" color="light" type="button" @click="navigator.clipboard.writeText(document.getElementById('lessonLink').value); copied = true; setTimeout(() => copied = false, 2000)" type="button"> <span x-show="!copied">Copy link</span> <span x-show="copied">Copied!</span> </button> </div> </div> <div x-show="visibility == 'Public'" class="border-t border-surface-4 dark:border-elevated-1"></div> <div class="my-4 relative w-full rounded-xl border border-transparent p-4 bg-warning-2 text-elevated-3" x-show="visibility !== 'Public'" x-data="{ visible: !localStorage.getItem('closed-' + '05ab56dcc91f348602ff155eeff18588') }" x-show="visible" x-cloak> <div class="flex"> <!-- Icon --> <svg class="absolute left-4 top-4 h-5 w-5 text-warning-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /> </svg> <div class="ml-7 flex-1"> <div class="text-sm font-medium"> <p>To share, set lesson to Public.</p> </div> </div> </div> </div> <!-- Social Sharing --> <div x-show="visibility === 'Public'" class="flex items-center justify-center gap-4"> <!-- resources/views/components/social-share-button.blade.php --> <a href="https://wa.me/?text=https%3A%2F%2Fquizgecko.com%2Flearn%2Fweb-page-design-steps-hwo2mf" target="_blank" class="bg-[#daffe9] rounded-lg p-2 flex flex-row gap-2 items-center justify-center shrink-0 relative overflow-hidden hover:opacity-90 transition-all duration-200"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="WhatsappLogo"> <path id="Vector" d="M23.4484 18.105L19.4484 16.105C19.2909 16.0265 19.1156 15.991 18.94 16.002C18.7644 16.0129 18.5948 16.07 18.4484 16.1675L16.6121 17.3925C15.7692 16.9291 15.0755 16.2354 14.6121 15.3925L15.8371 13.5562C15.9346 13.4098 15.9917 13.2402 16.0027 13.0646C16.0136 12.8891 15.9781 12.7137 15.8996 12.5562L13.8996 8.55625C13.8167 8.38884 13.6886 8.248 13.5298 8.14968C13.3709 8.05137 13.1877 7.99952 13.0009 8C11.6748 8 10.403 8.52678 9.46535 9.46447C8.52767 10.4021 8.00088 11.6739 8.00088 13C8.00419 15.9164 9.16418 18.7123 11.2264 20.7745C13.2885 22.8367 16.0845 23.9967 19.0009 24C19.6575 24 20.3077 23.8707 20.9143 23.6194C21.5209 23.3681 22.0721 22.9998 22.5364 22.5355C23.0007 22.0712 23.369 21.52 23.6203 20.9134C23.8716 20.3068 24.0009 19.6566 24.0009 19C24.001 18.8142 23.9494 18.6321 23.8518 18.474C23.7542 18.3159 23.6145 18.1881 23.4484 18.105ZM19.0009 22C16.6147 21.9974 14.3271 21.0483 12.6398 19.361C10.9526 17.6738 10.0035 15.3861 10.0009 13C10.0007 12.3064 10.2408 11.6342 10.6805 11.0977C11.1201 10.5612 11.732 10.1936 12.4121 10.0575L13.8471 12.9325L12.6259 14.75C12.5346 14.8869 12.4786 15.0442 12.4626 15.2079C12.4467 15.3717 12.4714 15.5368 12.5346 15.6888C13.2501 17.3892 14.6029 18.742 16.3034 19.4575C16.4558 19.5235 16.6222 19.5505 16.7876 19.5361C16.953 19.5217 17.1122 19.4663 17.2509 19.375L19.0771 18.1575L21.9521 19.5925C21.815 20.2734 21.4458 20.8856 20.9076 21.3247C20.3693 21.7637 19.6955 22.0024 19.0009 22ZM16.0009 3C13.7565 2.99951 11.5502 3.58011 9.5967 4.68529C7.64324 5.79046 6.00919 7.38256 4.8536 9.30662C3.69801 11.2307 3.06024 13.4212 3.00237 15.6648C2.9445 17.9085 3.46851 20.1289 4.52338 22.11L3.10463 26.3662C2.98712 26.7186 2.97006 27.0968 3.05538 27.4583C3.1407 27.8199 3.32503 28.1505 3.5877 28.4132C3.85037 28.6759 4.181 28.8602 4.54254 28.9455C4.90408 29.0308 5.28224 29.0138 5.63463 28.8962L9.89088 27.4775C11.6343 28.4048 13.5662 28.9228 15.5397 28.992C17.5132 29.0613 19.4765 28.68 21.2807 27.8772C23.0849 27.0743 24.6825 25.871 25.9521 24.3586C27.2218 22.8462 28.1303 21.0644 28.6085 19.1484C29.0868 17.2325 29.1223 15.2328 28.7123 13.301C28.3023 11.3693 27.4577 9.55642 26.2424 7.9999C25.0272 6.44337 23.4733 5.18415 21.6988 4.31782C19.9242 3.45149 17.9756 3.00081 16.0009 3ZM16.0009 27C14.0671 27.0013 12.1673 26.4921 10.4934 25.5238C10.3708 25.4527 10.2346 25.4085 10.0936 25.394C9.9527 25.3796 9.81031 25.3953 9.67588 25.44L5.00088 27L6.55963 22.325C6.60457 22.1907 6.62045 22.0483 6.60622 21.9074C6.592 21.7665 6.548 21.6301 6.47713 21.5075C5.2646 19.4111 4.77777 16.9732 5.09217 14.572C5.40657 12.1707 6.50463 9.94027 8.21599 8.22674C9.92736 6.51321 12.1564 5.41234 14.5573 5.0949C16.9581 4.77747 19.3967 5.26122 21.4945 6.47111C23.5924 7.68099 25.2324 9.54939 26.1601 11.7864C27.0877 14.0235 27.2512 16.5042 26.6252 18.8436C25.9991 21.1831 24.6185 23.2505 22.6976 24.7253C20.7766 26.2 18.4227 26.9996 16.0009 27Z" fill="#33B575" /> </g> </svg> </a> <!-- resources/views/components/social-share-button.blade.php --> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fquizgecko.com%2Flearn%2Fweb-page-design-steps-hwo2mf" target="_blank" class="bg-[#dff5ff] rounded-lg p-2 flex flex-row gap-2 items-center justify-center shrink-0 relative overflow-hidden hover:opacity-90 transition-all duration-200"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="FacebookLogo"> <path id="Vector" d="M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM17 26.9538V19H20C20.2652 19 20.5196 18.8946 20.7071 18.7071C20.8946 18.5196 21 18.2652 21 18C21 17.7348 20.8946 17.4804 20.7071 17.2929C20.5196 17.1054 20.2652 17 20 17H17V14C17 13.4696 17.2107 12.9609 17.5858 12.5858C17.9609 12.2107 18.4696 12 19 12H21C21.2652 12 21.5196 11.8946 21.7071 11.7071C21.8946 11.5196 22 11.2652 22 11C22 10.7348 21.8946 10.4804 21.7071 10.2929C21.5196 10.1054 21.2652 10 21 10H19C17.9391 10 16.9217 10.4214 16.1716 11.1716C15.4214 11.9217 15 12.9391 15 14V17H12C11.7348 17 11.4804 17.1054 11.2929 17.2929C11.1054 17.4804 11 17.7348 11 18C11 18.2652 11.1054 18.5196 11.2929 18.7071C11.4804 18.8946 11.7348 19 12 19H15V26.9538C12.181 26.6964 9.56971 25.3622 7.7093 23.2287C5.8489 21.0952 4.8826 18.3266 5.0114 15.4988C5.1402 12.671 6.35419 10.0017 8.40085 8.04613C10.4475 6.09057 13.1693 4.9993 16 4.9993C18.8307 4.9993 21.5525 6.09057 23.5992 8.04613C25.6458 10.0017 26.8598 12.671 26.9886 15.4988C27.1174 18.3266 26.1511 21.0952 24.2907 23.2287C22.4303 25.3622 19.819 26.6964 17 26.9538Z" fill="#1970FB" /> </g> </svg> </a> <!-- resources/views/components/social-share-button.blade.php --> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fquizgecko.com%2Flearn%2Fweb-page-design-steps-hwo2mf" target="_blank" class="bg-[#dfdfdf] rounded-lg p-2 flex flex-row gap-2 items-center justify-center shrink-0 relative overflow-hidden hover:opacity-90 transition-all duration-200"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="XLogo"> <path id="Vector" d="M26.844 26.4638L19.019 14.1663L26.7403 5.6725C26.9149 5.47565 27.0049 5.21791 26.9907 4.95515C26.9766 4.69239 26.8595 4.44579 26.6647 4.26882C26.47 4.09185 26.2134 3.99876 25.9504 4.00974C25.6875 4.02073 25.4396 4.1349 25.2603 4.3275L17.9053 12.4175L12.844 4.46375C12.7538 4.32169 12.6291 4.20471 12.4816 4.12365C12.3341 4.04258 12.1686 4.00005 12.0003 4H6.00025C5.82095 3.99991 5.64493 4.04803 5.49061 4.13932C5.33629 4.23062 5.20936 4.36172 5.1231 4.5189C5.03684 4.67609 4.99443 4.85357 5.0003 5.03278C5.00618 5.21198 5.06013 5.3863 5.1565 5.5375L12.9815 17.8337L5.26025 26.3337C5.17008 26.4306 5.10004 26.5444 5.05417 26.6685C5.00831 26.7927 4.98754 26.9247 4.99306 27.0569C4.99858 27.1891 5.03029 27.3189 5.08635 27.4388C5.14241 27.5586 5.22171 27.6662 5.31964 27.7552C5.41757 27.8442 5.53219 27.9129 5.65686 27.9572C5.78153 28.0016 5.91377 28.0208 6.04591 28.0137C6.17805 28.0066 6.30746 27.9733 6.42665 27.9158C6.54584 27.8583 6.65243 27.7777 6.74025 27.6787L14.0953 19.5888L19.1565 27.5425C19.2475 27.6834 19.3725 27.7991 19.5199 27.8791C19.6673 27.959 19.8325 28.0006 20.0003 28H26.0003C26.1794 27.9999 26.3552 27.9518 26.5093 27.8606C26.6634 27.7693 26.7902 27.6384 26.8764 27.4814C26.9627 27.3244 27.0051 27.1472 26.9994 26.9681C26.9937 26.7891 26.9401 26.6149 26.844 26.4638ZM20.549 26L7.8215 6H11.4465L24.179 26H20.549Z" fill="#4D4D4D" /> </g> </svg> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('showQuiz', () => ({ loading: false, user: window.user, openQuestions: [], openedQuestions: null, audioLoading: false, quizId: 1451452, isAssignment: false, assignmentSessionId: null, questionCount: 20, init: function() { // maybe not best long term approach, but a quick fix to an odd issue this.slug = window.location.pathname.split('/').pop(); // Check if this is an assignment by looking at the URL pattern const pathParts = window.location.pathname.split('/'); if (pathParts.includes('assignment')) { this.isAssignment = true; // Find the session ID (typically the part after 'assignment/') const assignmentIndex = pathParts.indexOf('assignment'); if (assignmentIndex !== -1 && pathParts.length > assignmentIndex + 1) { this.assignmentSessionId = pathParts[assignmentIndex + 1]; } } // Check if URL has a share hashtag and open the share modal if present if (window.location.hash === '#share') { // Use setTimeout to ensure the modal component is fully initialized setTimeout(() => { this.$dispatch('open-modal', 'share-assign-lesson'); }, 100); } }, getBaseUrl: function() { if (this.isAssignment && this.assignmentSessionId) { return 'https://quizgecko.com/learn/assignment/' + this.assignmentSessionId; } return 'https://quizgecko.com/learn/' + this.slug; }, 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); } } }, // TODO: not esure these flashcard routes are correct playFlashcards: function() { window.location.href = this.getBaseUrl() + '/flashcards/view?mode=review'; }, playSpacedRepetitionFlashcards: function() { if (!window.user) { this.$store.ui.modals.registerModal.toggle(); return; } if (!window.user.is_paid) { this.$store.ui.modals.limitModal.toggle( "Please upgrade to use spaced repetition flashcards" ); return; } window.location.href = this.getBaseUrl() + '/flashcards/view?mode=spaced-repetition'; }, playQuiz: function() { if (!this.questionCount) { window.confirmModal( "No questions available", "This quiz has no questions to play. Please add questions first." ); return; } window.location.href = this.getBaseUrl() + '/play/start'; }, playChat: function() { // Chat always uses quiz ID regardless of whether it's an assignment or not let chatUrl = 'https://quizgecko.com/chat/assistant?quiz_ids=' + this.quizId; // If this is an assignment, add the assignment ID to the URL window.location.href = chatUrl; }, duplicate: function() { if (!this.user) { this.$store.ui.modals.registerModal.toggle(); return; } if (!this.user?.is_paid) { this.$store.ui.modals.limitModal.toggle(); return; } // Duplication always uses the original quiz, regardless of assignment if (this.user && this.user.is_paid) { let url = 'https://quizgecko.com/learn/1451452/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.limitModal.toggle(); return; } // PDF download always uses the original quiz ID 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-40 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"> <svg class="w-8 rounded-md" width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.1778 7.40835C10.9606 8.07549 11.4861 7.98429 11.9672 8.0172C12.122 7.99252 12.6155 8.17517 13.3515 9.10326C13.0139 9.39671 12.2643 9.90793 11.9672 9.60515L10.7862 8.18989C10.709 8.01521 10.2704 7.97804 10.2179 8.16201C9.91186 9.23985 9.31213 8.36828 9.04421 8.60894C8.90786 8.73159 8.84016 8.93693 8.91167 9.10326C9.25301 9.89491 8.7963 9.9776 8.5217 10.1133C8.32243 10.2127 8.29192 10.4803 8.46736 10.6169C9.39482 11.2999 11.9605 12.4437 14.8033 11.5551C14.8989 11.7444 15.0666 12.238 14.9721 12.6988C14.3771 12.4098 12.8367 11.8779 11.4524 12.781C11.1401 12.9601 10.583 13.7684 10.4479 14.6323C10.3497 15.2605 10.0182 15.4196 9.89612 15.4265C9.37362 15.4405 8.75578 14.6107 8.36295 13.9798C8.22089 13.7531 7.82424 13.7522 7.76227 14.0105C7.60399 14.673 7.38851 14.7919 7.16444 14.8133C6.76208 14.8514 6.52372 15.2667 6.71727 15.6124C6.86982 15.8856 6.92131 16.0816 6.60667 16.3752C6.25674 16.7023 6.42265 17.283 6.89747 17.3806C7.46478 17.5535 8.88469 17.7955 10.0259 17.3806C11.1671 16.9657 12.167 16.1434 12.5243 15.7842C12.8788 16.0968 13.6773 16.7666 14.0352 16.9443C13.5907 17.7396 12.1293 19.3386 9.84019 19.3715C7.55108 19.4044 6.02781 18.354 5.55232 17.8247C4.95303 17.2981 3.67005 15.669 3.33242 13.3652C2.91039 10.4855 3.91483 8.64251 3.97391 8.49441C4.16888 8.00572 3.56148 7.36741 3.21283 7.76147C2.9353 8.07515 2.66875 8.42369 2.42923 8.80706C1.72021 9.76147 1.13781 11.695 1.07028 12.5836C0.960552 13.1623 0.898091 14.7557 1.52608 16.5C2.31106 18.6803 3.88948 20.1696 4.98677 20.8936C6.08406 21.6176 7.70467 22.3334 9.50254 22.4322C11.3004 22.5309 12.8028 22.1195 13.5541 21.8151C14.3053 21.5107 16.8375 20.2518 18.4497 18.7544C18.6888 18.8449 19.1047 19.197 18.8548 19.8816C18.4638 20.8775 17.8101 23.047 18.3232 23.7574C18.4052 23.9321 18.6302 23.9934 18.7942 23.8875L18.7932 23.8894C19.3644 23.5196 19.7906 23.6506 20.0833 23.8959C20.3054 24.0826 20.6477 24.0083 20.7764 23.7518C20.9605 23.3867 21.1855 23.0643 22.0169 23.054C22.3029 23.0503 22.2858 22.5913 22.0188 22.4928C21.4076 22.2661 20.7698 21.9149 20.7507 21.4531C20.7715 21.3105 20.9481 20.9561 21.4883 20.6797C22.1636 20.3341 22.5434 19.1658 22.3155 18.055C22.0876 16.9443 21.4123 15.8664 20.9481 15.3728C21.3842 14.5582 22.0775 12.3088 21.3617 9.82729C21.1507 8.7001 20.4332 7.51531 20.2897 7.34253C22.1264 4.47928 20.4754 1.36097 19.4203 0.159721C19.2192 -0.0549163 18.7033 -0.0707127 18.7033 0.220117C18.7043 1.06287 17.9091 0.724655 17.5096 0.703284C17.2998 0.692134 17.1273 0.851022 17.1273 1.05544C17.1254 1.50423 17.6021 2.02735 16.5828 2.22247C16.2663 2.2838 16.2466 2.83373 16.5113 2.99461L18.0952 3.90333C18.7033 4.29827 18.5248 4.9428 18.2332 5.26507C17.5096 4.4875 15.8924 3.82734 15.5291 3.66473C15.4777 3.64058 15.3146 3.555 15.3013 3.50018C14.5575 0.393972 10.8079 0.919957 9.15177 2.07584C7.54804 3.19456 9.30536 6.66316 10.1778 7.40835Z" fill="#4F46E5" /> </svg> </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> <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; // Check if we're on the mobile route if (window.location.pathname === '/mobile') { this.open = false; return; } 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() { 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 }, backOnClose: false, closeModal() { if (this.backOnClose) { window.history.back(); } 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-50" 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-50 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 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 pb-2" x-text="$store.ui?.modals?.help?.title"></h3> </template> <template x-if="$store.ui?.modals?.help?.content"> <p class="mt-3 " x-html="$store.ui?.modals?.help?.content"></p> </template> </div> <div class="flex justify-end p-4 rounded-b-xl 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 }, backOnClose: false, closeModal() { if (this.backOnClose) { window.history.back(); } 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-50" 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-50 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop class="relative transform 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 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.limitModal.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 rounded-b-xl"> <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 }, backOnClose: false, closeModal() { if (this.backOnClose) { window.history.back(); } 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-50" 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-50 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 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" @close-modal.window="if ($event.detail === 'feedback') resetData()" @set-feedback-data.window=" category = $event.detail.category || 'general'; quizId = $event.detail.quizId || null; rating = $event.detail.rating || null; feedback = ''; images = null; // Ensure the received category exists as an option if (category && !$refs.feedbackCategorySelect.querySelector(`option[value='${category}']`)) { let newOption = document.createElement('option'); newOption.value = category; // Create readable text (e.g., 'question_generation' -> 'Question Generation') newOption.text = category.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()); $refs.feedbackCategorySelect.appendChild(newOption); } // Focus the textarea after Alpine updates the DOM $nextTick(() => $refs.feedbackTextarea.focus()); "> <p class="text-2xl sm:text-3xl font-bold pb-2 text-center mt-2"> Feedback </p> <div class="mt-4 prose dark:prose-dark"> <p class=""> 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="RGEerkxLhFm3yfbqYyj32ILaXbsqttKr5Qyr9CCf" autocomplete="off"> <div class="mb-4"> <label for="category" class="block text-sm font-medium "> Category </label> <!-- Add a default size --> <select class="flex-1 block w-full min-w-0 text-base text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 border border-surface-5 dark:border-elevated-1 rounded-xl focus:border-primary-1 focus:ring-0 mt-1 cursor-pointer" id="category" name="category" x-model="category" x-ref="feedbackCategorySelect" > <option value="">Select a category</option> <option value="bug">General Bug</option> <option value="feedback">General feedback</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 "> Feedback </label> <textarea placeholder="Your feedback..." 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 border border-surface-5 dark:border-elevated-1 rounded-xl focus:border-primary-1 mt-1 focus:ring-0" rows="4" id="feedback" name="feedback" x-model="feedback" x-ref="feedbackTextarea"></textarea> </div> <div class="mb-4"> <label for="image" class="block text-sm font-medium "> Image (optional) </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" type="file" id="image" name="image" x-on:change="images = Object.values($event.target.files)"> </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" x-bind:disabled="loading" type="button"> <div x-show="loading"> <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M136,32V64a8,8,0,0,1-16,0V32a8,8,0,0,1,16,0Zm37.25,58.75a8,8,0,0,0,5.66-2.35l22.63-22.62a8,8,0,0,0-11.32-11.32L167.6,77.09a8,8,0,0,0,5.65,13.66ZM224,120H192a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16Zm-45.09,47.6a8,8,0,0,0-11.31,11.31l22.62,22.63a8,8,0,0,0,11.32-11.32ZM128,184a8,8,0,0,0-8,8v32a8,8,0,0,0,16,0V192A8,8,0,0,0,128,184ZM77.09,167.6,54.46,190.22a8,8,0,0,0,11.32,11.32L88.4,178.91A8,8,0,0,0,77.09,167.6ZM72,128a8,8,0,0,0-8-8H32a8,8,0,0,0,0,16H64A8,8,0,0,0,72,128ZM65.78,54.46A8,8,0,0,0,54.46,65.78L77.09,88.4A8,8,0,0,0,88.4,77.09Z"/></svg> </div> <div x-show="!loading"> Submit </div> </button> </div> </form> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('feedbackModal', () => ({ open: false, loading: false, feedback: "", category: "general", images: null, quizId: null, rating: null, init() { // Listener moved to x-data attribute }, resetData() { this.feedback = ""; this.category = "general"; this.images = null; this.quizId = null; this.rating = null; }, submit() { // Don't close the modal immediately this.loading = true; let formData = new FormData(); formData.append('feedback', this.feedback); formData.append('category', this.category); if (this.quizId) { formData.append('quiz_id', this.quizId); } // Ensure rating is appended if it was set initially if (this.rating !== null) { formData.append('rating', this.rating); } if (this.images) { formData.append('image', this.images[0]); } // Keep reference to 'this' for Axios callbacks const self = this; axios.post("/api/v1/feedback", formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then((response) => { // Close modal on success - this triggers the reset listener self.$dispatch('close-modal', 'feedback'); // Reset is handled by the close-modal listener now self.open = false; // Explicitly set open state too window.confirmModal("Submitted", "Thank you for your feedback! Our team reads all messages.", false); }) .catch((error) => { console.error("Error submitting feedback:", error); // Optionally close modal on error too, or leave it open for retry // self.$dispatch('close-modal', 'feedback'); window.confirmModal("Error", "Sorry, there was an error submitting your feedback. Please try again.", false); // Reset is handled by the close-modal listener if we close it }) .finally(() => { self.loading = 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 }, backOnClose: false, closeModal() { if (this.backOnClose) { window.history.back(); } 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-50" 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-50 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 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 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="RGEerkxLhFm3yfbqYyj32ILaXbsqttKr5Qyr9CCf" 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 rounded-b-xl"> <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 }, backOnClose: false, closeModal() { if (this.backOnClose) { window.history.back(); } 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-50" 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-50 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 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 pb-2" x-text="$store.confirmModal.title"></h3> <p class="mt-3 " 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"> <svg class="w-8 rounded-md" width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.1778 7.40835C10.9606 8.07549 11.4861 7.98429 11.9672 8.0172C12.122 7.99252 12.6155 8.17517 13.3515 9.10326C13.0139 9.39671 12.2643 9.90793 11.9672 9.60515L10.7862 8.18989C10.709 8.01521 10.2704 7.97804 10.2179 8.16201C9.91186 9.23985 9.31213 8.36828 9.04421 8.60894C8.90786 8.73159 8.84016 8.93693 8.91167 9.10326C9.25301 9.89491 8.7963 9.9776 8.5217 10.1133C8.32243 10.2127 8.29192 10.4803 8.46736 10.6169C9.39482 11.2999 11.9605 12.4437 14.8033 11.5551C14.8989 11.7444 15.0666 12.238 14.9721 12.6988C14.3771 12.4098 12.8367 11.8779 11.4524 12.781C11.1401 12.9601 10.583 13.7684 10.4479 14.6323C10.3497 15.2605 10.0182 15.4196 9.89612 15.4265C9.37362 15.4405 8.75578 14.6107 8.36295 13.9798C8.22089 13.7531 7.82424 13.7522 7.76227 14.0105C7.60399 14.673 7.38851 14.7919 7.16444 14.8133C6.76208 14.8514 6.52372 15.2667 6.71727 15.6124C6.86982 15.8856 6.92131 16.0816 6.60667 16.3752C6.25674 16.7023 6.42265 17.283 6.89747 17.3806C7.46478 17.5535 8.88469 17.7955 10.0259 17.3806C11.1671 16.9657 12.167 16.1434 12.5243 15.7842C12.8788 16.0968 13.6773 16.7666 14.0352 16.9443C13.5907 17.7396 12.1293 19.3386 9.84019 19.3715C7.55108 19.4044 6.02781 18.354 5.55232 17.8247C4.95303 17.2981 3.67005 15.669 3.33242 13.3652C2.91039 10.4855 3.91483 8.64251 3.97391 8.49441C4.16888 8.00572 3.56148 7.36741 3.21283 7.76147C2.9353 8.07515 2.66875 8.42369 2.42923 8.80706C1.72021 9.76147 1.13781 11.695 1.07028 12.5836C0.960552 13.1623 0.898091 14.7557 1.52608 16.5C2.31106 18.6803 3.88948 20.1696 4.98677 20.8936C6.08406 21.6176 7.70467 22.3334 9.50254 22.4322C11.3004 22.5309 12.8028 22.1195 13.5541 21.8151C14.3053 21.5107 16.8375 20.2518 18.4497 18.7544C18.6888 18.8449 19.1047 19.197 18.8548 19.8816C18.4638 20.8775 17.8101 23.047 18.3232 23.7574C18.4052 23.9321 18.6302 23.9934 18.7942 23.8875L18.7932 23.8894C19.3644 23.5196 19.7906 23.6506 20.0833 23.8959C20.3054 24.0826 20.6477 24.0083 20.7764 23.7518C20.9605 23.3867 21.1855 23.0643 22.0169 23.054C22.3029 23.0503 22.2858 22.5913 22.0188 22.4928C21.4076 22.2661 20.7698 21.9149 20.7507 21.4531C20.7715 21.3105 20.9481 20.9561 21.4883 20.6797C22.1636 20.3341 22.5434 19.1658 22.3155 18.055C22.0876 16.9443 21.4123 15.8664 20.9481 15.3728C21.3842 14.5582 22.0775 12.3088 21.3617 9.82729C21.1507 8.7001 20.4332 7.51531 20.2897 7.34253C22.1264 4.47928 20.4754 1.36097 19.4203 0.159721C19.2192 -0.0549163 18.7033 -0.0707127 18.7033 0.220117C18.7043 1.06287 17.9091 0.724655 17.5096 0.703284C17.2998 0.692134 17.1273 0.851022 17.1273 1.05544C17.1254 1.50423 17.6021 2.02735 16.5828 2.22247C16.2663 2.2838 16.2466 2.83373 16.5113 2.99461L18.0952 3.90333C18.7033 4.29827 18.5248 4.9428 18.2332 5.26507C17.5096 4.4875 15.8924 3.82734 15.5291 3.66473C15.4777 3.64058 15.3146 3.555 15.3013 3.50018C14.5575 0.393972 10.8079 0.919957 9.15177 2.07584C7.54804 3.19456 9.30536 6.66316 10.1778 7.40835Z" fill="#4F46E5" /> </svg> <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-elevated-2 dark:text-surface-5"> Solutions </p> <ul role="list" class="mt-4 space-y-2"> <li> <a href="https://quizgecko.com/for/students" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Students</a> </li> <li> <a href="https://quizgecko.com/plans?offer=teacher" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">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 dark:hover:text-surface-4">Business</a> </li> <li> <a href="https://quizgecko.com/for/parents" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Parents</a> </li> <li> <a href="https://quizgecko.com/for/tutors" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Tutors</a> </li> <li> <a href="https://quizgecko.com/for/homeschooling" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Homeschooling</a> </li> </ul> </div> <div class="mt-10 md:mt-0"> <p class="text-sm font-semibold leading-6 text-elevated-2 dark:text-surface-5"> Account </p> <ul role="list" class="mt-4 space-y-2"> <li> <a href="https://quizgecko.com/library" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">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 dark:hover:text-surface-4">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 dark:hover:text-surface-4">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 dark:hover:text-surface-4">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-elevated-2 dark:text-surface-5"> Resources </p> <ul role="list" class="mt-4 space-y-2"> <li> <a href="https://quizgecko.com/blog" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Blog</a> </li> <li> <a href="/api" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">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 dark:hover:text-surface-4">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 dark:hover:text-surface-4">Browse Lessons</a> </li> </ul> </div> <div class="mt-10 md:mt-0"> <p class="text-sm font-semibold leading-6 text-elevated-2 dark:text-surface-5"> Policies </p> <ul role="list" class="mt-4 space-y-2"> <li> <a href="https://quizgecko.com/terms" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">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 dark:hover:text-surface-4">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 dark:hover:text-surface-4">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 dark:hover:text-surface-4">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>