Recent

  • Show all results for ""
HTML Basics for Beginners
6 Questions
0 Views

HTML Basics for Beginners

Created by
@EffectualBambooFlute

Questions and Answers

What file extensions are commonly used for HTML documents?

  • .xml
  • .txt
  • .html (correct)
  • .css

    • Which IDE is recommended for coding HTML for beginners?

  • Visual Studio Code (correct)
  • Sublime Text
  • Notepad++
  • Atom

    • What is the purpose of the tag in an HTML document?</p> <span> <span x-show="!openQuestions.includes(2)"> <svg class="w-5 h-5" 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> </span> <span x-show="openQuestions.includes(2)"> <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"/></svg> </span> </span> </h3> <div x-show="openQuestions.includes(2)"> <p class="text-elevated-2 dark:text-surface-5"> <li> To structure the actual content visible to users </li> <li> To define metadata for the webpage </li> <li> To create a hyperlink </li> <li> To display the webpage title in browser tabs <span class="text-success-1 font-semibold"> (correct) </span> </li> </p> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-6 p-4"> <div class="space-y-4"> <h3 @click="openQuestion(3)" id="question-3" class="text-base sm:text-lg font-medium quiz-markdown cursor-pointer flex items-center justify-between"> <p>What does an HTML element consist of?</p> <span> <span x-show="!openQuestions.includes(3)"> <svg class="w-5 h-5" 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> </span> <span x-show="openQuestions.includes(3)"> <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"/></svg> </span> </span> </h3> <div x-show="openQuestions.includes(3)"> <p class="text-elevated-2 dark:text-surface-5"> <span class="relative text-elevated-1 dark:text-surface-5"> <span class="blurred"> <p>An opening tag, content, and a closing tag</p> </span> <span @click="$dispatch('open-modal', 'register')" class="absolute inset-0 flex bg-opacity-90 text-primary-1 cursor-pointer dark:text-primary-1 font-semibold whitespace-nowrap"> <span> <svg class="w-5 h-5 mr-1 mb-0.5 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z"/></svg> </span> Signup and view all the answers </span> </span> </p> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-6 p-4"> <div class="space-y-4"> <h3 @click="openQuestion(4)" id="question-4" class="text-base sm:text-lg font-medium quiz-markdown cursor-pointer flex items-center justify-between"> <p>Why is project organization important in HTML development?</p> <span> <span x-show="!openQuestions.includes(4)"> <svg class="w-5 h-5" 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> </span> <span x-show="openQuestions.includes(4)"> <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"/></svg> </span> </span> </h3> <div x-show="openQuestions.includes(4)"> <p class="text-elevated-2 dark:text-surface-5"> <span class="relative text-elevated-1 dark:text-surface-5"> <span class="blurred"> <p>To facilitate easier management of related files</p> </span> <span @click="$dispatch('open-modal', 'register')" class="absolute inset-0 flex bg-opacity-90 text-primary-1 cursor-pointer dark:text-primary-1 font-semibold whitespace-nowrap"> <span> <svg class="w-5 h-5 mr-1 mb-0.5 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z"/></svg> </span> Signup and view all the answers </span> </span> </p> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-6 p-4"> <div class="space-y-4"> <h3 @click="openQuestion(5)" id="question-5" class="text-base sm:text-lg font-medium quiz-markdown cursor-pointer flex items-center justify-between"> <p>What is the first tag that starts an HTML document indicating the use of HTML5?</p> <span> <span x-show="!openQuestions.includes(5)"> <svg class="w-5 h-5" 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> </span> <span x-show="openQuestions.includes(5)"> <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"/></svg> </span> </span> </h3> <div x-show="openQuestions.includes(5)"> <p class="text-elevated-2 dark:text-surface-5"> <span class="relative text-elevated-1 dark:text-surface-5"> <span class="blurred"> <doctype html> </span> <span @click="$dispatch('open-modal', 'register')" class="absolute inset-0 flex bg-opacity-90 text-primary-1 cursor-pointer dark:text-primary-1 font-semibold whitespace-nowrap"> <span> <svg class="w-5 h-5 mr-1 mb-0.5 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z"/></svg> </span> Signup and view all the answers </span> </span> </p> </div> </div> </div> </div> <div class="dark:bg-elevated-4 mt-12"> <h2 class="text-2xl font-medium contents-heading" id="study-notes"> Study Notes </h2> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-6 p-4 mt-6"> <div class="mt-6 mb-12"> <div class="aspect-video"> <iframe class="w-full h-full" src="https://www.youtube.com/embed/29l2qxSJSIw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> <div class="prose dark:prose-dark max-w-4xl"> <h3 id="html-tutorial-overview" class="contents-heading">HTML Tutorial Overview</h3> <ul> <li>Designed for complete beginners to learn HTML (Hypertext Markup Language), a standard markup language for web pages.</li> <li>HTML is used primarily in web browsers like Google Chrome and Microsoft Edge to structure content.</li> </ul> <h3 id="html-fundamentals" class="contents-heading">HTML Fundamentals</h3> <ul> <li>HTML files are typically saved with the <code>.html</code> or <code>.htm</code> extension.</li> <li>Files can be opened in browsers and edited using text editors.</li> <li>The first website structure includes essential tags that define the content and its type.</li> </ul> <h3 id="setting-up-your-environment" class="contents-heading">Setting Up Your Environment</h3> <ul> <li>Visual Studio Code is recommended as an integrated development environment (IDE) for coding HTML.</li> <li>Installation steps include downloading from the Visual Studio website and agreeing to the terms of service.</li> </ul> <h3 id="basic-html-structure" class="contents-heading">Basic HTML Structure</h3> <ul> <li>A basic HTML document starts with <code><!DOCTYPE html></code>, indicating the use of HTML5.</li> <li>Contains a <code><head></code> section for metadata, links, and styling scripts.</li> <li>A <code><title></code> tag within the head defines the webpage title visible in browser tabs.</li> </ul> <h3 id="html-elements" class="contents-heading">HTML Elements</h3> <ul> <li>HTML elements consist of an opening tag (e.g., <code><p></code>) and a closing tag (e.g., <code></p></code>).</li> <li>Content sits between the opening and closing tags, such as “Hello World” in a paragraph tag.</li> </ul> <h3 id="project-organization" class="contents-heading">Project Organization</h3> <ul> <li>HTML projects should be organized into defined folders for better management.</li> <li>Creating a project folder (e.g., "HTML Tutorial Projects") helps to keep all related files together.</li> </ul> <h3 id="conclusion" class="contents-heading">Conclusion</h3> <ul> <li>HTML serves as the foundational language of web development.</li> <li>Future episodes will cover CSS and JavaScript to enhance styling and functionality.</li> </ul> <h3 id="html-tutorial-overview-1" class="contents-heading">HTML Tutorial Overview</h3> <ul> <li>Aimed at beginners to understand HTML, the standard markup language for web pages.</li> <li>Primarily used in web browsers such as Google Chrome and Microsoft Edge to structure online content.</li> </ul> <h3 id="html-fundamentals-1" class="contents-heading">HTML Fundamentals</h3> <ul> <li>HTML files are saved with the extensions <code>.html</code> or <code>.htm</code>.</li> <li>These files can be viewed in web browsers and edited using text editors, making them accessible for coding.</li> </ul> <h3 id="setting-up-your-environment-1" class="contents-heading">Setting Up Your Environment</h3> <ul> <li>Visual Studio Code is recommended as the preferred integrated development environment (IDE) for writing HTML.</li> <li>Installation involves downloading Visual Studio Code from its official website and accepting the terms of service.</li> </ul> <h3 id="basic-html-structure-1" class="contents-heading">Basic HTML Structure</h3> <ul> <li>An HTML document begins with the <code><!DOCTYPE html></code> declaration, signaling the use of HTML5.</li> <li>The <code><head></code> section is included for metadata, styles, and script links, essential for structuring a webpage.</li> <li>The <code><title></code> tag within the head section sets the webpage title that displays in browser tabs.</li> </ul> <h3 id="html-elements-1" class="contents-heading">HTML Elements</h3> <ul> <li>An HTML element comprises an opening tag (e.g., <code><p></code>) and a closing tag (e.g., <code></p></code>).</li> <li>Content is placed between these tags; for example, “Hello World” would reside within a paragraph tag.</li> </ul> <h3 id="project-organization-1" class="contents-heading">Project Organization</h3> <ul> <li>HTML projects benefit from being organized into specific folders for improved management.</li> <li>Creating a dedicated project folder, such as "HTML Tutorial Projects," helps consolidate all pertinent files.</li> </ul> <h3 id="conclusion-1" class="contents-heading">Conclusion</h3> <ul> <li>HTML is the foundational language in web development, crucial for building websites.</li> <li>Upcoming tutorials will include CSS and JavaScript to introduce styling and enhance web functionality.</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 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 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 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-2xl font-medium contents-heading" id="study-notes"> Description </h2> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-6 p-4 mt-6"> <div class="prose dark:prose-dark max-w-4xl"> <p>This quiz provides an overview of HTML fundamentals essential for beginners. You'll learn about basic HTML structure, environment setup, and how to create a simple webpage. Prepare to dive into the world of web development with HTML!</p> </div> </div> </div> </article> </main> </div> </div> <section class="bg-surface-0 dark:bg-elevated-4 col-span-4 mt-12"> <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6"> <div class="mb-4 lg:mb-8"> <h2 class="text-2xl font-medium text-elevated-5 dark:text-surface-5"> More Quizzes Like This </h2> </div> <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4"> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 max-w-sm"> <a href="https://quizgecko.com/learn/html-and-xml-basics-quiz-sxwbws"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1622675103136-e4b90c9a33d6?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHwyOHx8bGVhZGVyc2hpcCUyMG1hbmFnZW1lbnQlMjBzaXR1YXRpb25hbCUyMGxlYWRlcnNoaXB8ZW58MXwwfHx8MTcwMjcwNzgxMHww&ixlib=rb-4.0.3&q=85&w=800" alt="HTML and XML Basics Quiz" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>5 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/html-and-xml-basics-quiz-sxwbws"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> HTML and XML Basics Quiz </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-5.webp" alt="ProductiveCarnelian avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>ProductiveCarnelian</div> </div> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 max-w-sm"> <a href="https://quizgecko.com/learn/html-elements-basics-vakcua"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHw0fHxIVE1MJTIwZWxlbWVudHMlMkMlMjB3ZWIlMjBkZXZlbG9wbWVudCUyQyUyMG1hcmt1cCUyMGxhbmd1YWdlc3xlbnwxfDB8fHwxNzIxOTA4Nzk1fDA&ixlib=rb-4.0.3&q=85&w=800" alt="HTML Elements Basics" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>28 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/html-elements-basics-vakcua"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> HTML Elements Basics </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-4.webp" alt="AstoundedBamboo8130 avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>AstoundedBamboo8130</div> </div> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 max-w-sm"> <a href="https://quizgecko.com/learn/html-syntax-basics-v6kihe"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1527689368864-3a821dbccc34?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHwyfHxIVE1MJTIwc3ludGF4JTJDJTIwd2ViJTIwZGV2ZWxvcG1lbnQlMkMlMjBtYXJrdXAlMjBsYW5ndWFnZXN8ZW58MXwwfHx8MTcyMjE2NzU0M3ww&ixlib=rb-4.0.3&q=85&w=800" alt="HTML Syntax Basics" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>16 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/html-syntax-basics-v6kihe"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> HTML Syntax Basics </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-16.webp" alt="FirmerJudgment697 avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>FirmerJudgment697</div> </div> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 max-w-sm"> <a href="https://quizgecko.com/learn/introduction-to-html-jg7txs"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1611647832580-377268dba7cb?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHwyNHx8SFRNTCUyMHdlYiUyMGRldmVsb3BtZW50JTIwY29kaW5nfGVufDF8MHx8fDE3MDQxNjU3MDl8MA&ixlib=rb-4.0.3&q=85&w=800" alt="Introduction to HTML" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>8 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/introduction-to-html-jg7txs"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> Introduction to HTML </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-10.webp" alt="LuxuriantCarnelian4523 avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>LuxuriantCarnelian4523</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">HTML Basics for Beginners</span> <meta itemprop="position" content="2" /> </li> </ol> </nav> </div> </div> </section> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('showQuiz', () => ({ loading: false, showStudyNotes: true, hideFlashcards: false, user: window.user, openQuestions: [], openedQuestions: null, init: function() { // maybe not best long term approach, but a quick fix to an odd issue this.slug = window.location.pathname.split('/').pop(); }, openQuestion(id) { if (!this.user && this.openQuestions.length >= 2) { this.$dispatch('open-modal', 'register'); return; } if (!this.user && !this.openedQuestions) { this.openedQuestions = new Set(); } if (!this.user && this.openedQuestions.size >= 2) { this.$dispatch('open-modal', 'register'); return; } if (this.openQuestions.includes(id)) { this.openQuestions.splice(this.openQuestions.indexOf(id), 1); } else { this.openQuestions.push(id); if (!this.user) { this.openedQuestions.add(id); } } }, playFlashcards: function() { if (!window.user) { this.$dispatch('open-modal', 'register'); return; } if (this.hideFlashcards) { return; } window.location.href = 'https://quizgecko.com/quiz/' + this.slug + '/flashcards'; }, playQuiz: function() { if (!window.user) { this.$dispatch('open-modal', 'register'); return; } window.location.href = 'https://quizgecko.com/quiz/' + this.slug + '/play'; }, duplicate: function() { if (!this.user) { this.$dispatch('open-modal', 'register'); return; } if (!this.user?.is_paid) { this.$store.ui.modals.plansModal.toggle(); return; } if (this.user && this.user.is_paid) { let url = 'https://quizgecko.com/learn/787185/duplicate'; return window.location.href = url; } }, downloadPdf: function(quizId, withAnswers) { if (!this.user) { this.$dispatch('open-modal', 'register'); return; } if (!this.user?.is_paid) { this.$store.ui.modals.plansModal.toggle(); return; } const url = `/generate/${quizId}/export/pdf` + (withAnswers ? '?answers=true' : ''); window.location.href = url; }, deleteQuiz(quizId) { if (!confirm("Are you sure you want to delete this quiz?")) { return; } axios.delete(`/api/v1/quiz/${quizId}`) .then(() => { window.location.href = '/library?deleted=true'; }) .catch(error => { console.error("Failed to delete quiz:", error); }); }, })); }); </script> </main> <div x-data="bottomBannerMobile()" class="sm:hidden" x-show="open" x-cloak> <div class="fixed bottom-0 start-0 z-[4147483004] w-full"> <div id="bottom-banner" tabindex="-1" class="flex justify-between py-4 px-5 border-t bg-surface-0 rounded-t-[20px] z-20"> <!-- Banner content --> <div class="relative w-full box-border text-center px-md pt-md pb-xl text-elevated-3"> <div class="mx-auto"> <span class="font-bold text-lg text-elevated-2 ">Use Quizgecko on... </span> </div> <div slot="ctas" class="mt-6 space-y-6"> <div class="flex justify-between box-border mb-md"> <div class="flex items-center space-x-4"> <div class="w-[48px] h-[48px] flex items-center justify-center border border-solid border-neutral-border-weak rounded-lg"> <img class="w-[48px] h-[48px] text-[48px] rounded-lg" src="https://quizgecko.com/images/icon-small.png" alt="Browser" /> </div> <span class="text-16 font-bold text-neutral-content-strong ml-xs" x-text="appName"></span> </div> <a :href="appUrl" class="min-w-[120px] px-[var(--rem14)] items-center justify-center inline-flex bg-primary-1 rounded-lg text-surface-0 font-bold" id="primary-button" rel="nofollow"> <span class="flex items-center justify-center"> <span class="flex items-center gap-xs">Open</span></span> </a> </div> <div class="flex justify-between box-border"> <div class="flex items-center space-x-4"> <div class="w-[48px] h-[48px] flex items-center justify-center border border-solid border-neutral-border-weak rounded-lg"> <img class="w-[40px] h-[40px] text-[40px] rounded-full" src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/f6dbf467-b532-444e-7df3-ba798d577a00/thumb" alt="Browser" /> </div> <span id="continue-label" class="text-16 font-bold text-neutral-content-strong ml-xs"> Browser </span> </div> <button @click="toggle()" class="min-w-[120px] px-[var(--rem14)] items-center justify-center inline-flex bg-surface-3 rounded-lg text-elevated-3 font-bold" id="secondary-button"> <span class="flex items-center justify-center"> <span class="flex items-center gap-xs">Continue</span> </span> </button> </div> </div> </div> </div> </div> <div id="backdrop" part="backdrop" class="fixed inset-0 bg-black opacity-50 z-10"></div> </div> <script> document.addEventListener("alpine:init", () => { Alpine.data("bottomBannerMobile", (quiz) => ({ open: false, os: null, init() { const closedTimestamp = localStorage.getItem('bottomMobileBannerClosedTimestamp'); const currentTimestamp = Date.now(); const oneWeekInMilliseconds = 7 * 24 * 60 * 60 * 1000; this.open = true; if (closedTimestamp && currentTimestamp - closedTimestamp < oneWeekInMilliseconds) { this.open = false; } else { localStorage.removeItem('bottomMobileBannerClosedTimestamp'); } this.os = this.getOS(); this.setAppDetails(); }, setAppDetails() { if (this.os === 'iOS') { this.appUrl = 'https://apps.apple.com/gb/app/quizgecko-ai-study-quizzes/id6473546188'; this.appName = 'iPhone App'; } else if (this.os === 'Android') { this.appUrl = 'https://play.google.com/store/apps/details?id=com.quizgecko'; this.appName = 'Android App'; } else { this.appUrl = 'https://quizgecko.com/mobile'; this.appName = 'Mobile App'; } }, toggle() { console.log('toggle'); this.open = !this.open; if (!this.open) { localStorage.setItem('bottomMobileBannerClosedTimestamp', Date.now()); } else { localStorage.removeItem('bottomMobileBannerClosedTimestamp'); } }, getOS() { const userAgent = window.navigator.userAgent, platform = window.navigator.platform, iosPlatforms = ['iPhone', 'iPad', 'iPod'], androidPlatforms = ['Android']; if (iosPlatforms.indexOf(platform) !== -1) { return 'iOS'; } else if (androidPlatforms.some(substring => userAgent.includes(substring))) { return 'Android'; } else { return 'other'; } } })); }); </script> <div id="modal-help" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'help' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'help' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-4 pt-4 block"> <button type="button" x-on:click="show = false" class="rounded-md bg-surface-0 dark:bg-elevated-3 text-elevated-1 dark:text-surface-5 hover:text-surface-6 dark:hover:text-surface-6 focus:outline-none focus:ring-2 focus:ring-primary-1 dark:focus:ring-primary-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900"> <span class="sr-only">Close</span> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8"> <template x-if="$store.ui?.modals?.help?.title"> <h3 class="text-lg font-semibold text-elevated-3 pb-2" x-text="$store.ui?.modals?.help?.title"></h3> </template> <template x-if="$store.ui?.modals?.help?.content"> <p class="mt-3 text-elevated-1 dark:text-surface-5" x-html="$store.ui?.modals?.help?.content"></p> </template> </div> <div class="flex justify-end p-4 space-x-2 bg-surface-2 dark:bg-elevated-3"> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1" type="button" x-on:click="$dispatch('close-modal', 'help')" type="button"> Got it! </button> </div> </div> </div> </div> </div> </div> <div id="modal-limit" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'limit' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'limit' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-4 pt-4 block"> <button type="button" x-on:click="show = false" class="rounded-md bg-surface-0 dark:bg-elevated-3 text-elevated-1 dark:text-surface-5 hover:text-surface-6 dark:hover:text-surface-6 focus:outline-none focus:ring-2 focus:ring-primary-1 dark:focus:ring-primary-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900"> <span class="sr-only">Close</span> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div> <div class="p-8"> <!-- Title --> <h3 class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-3 pb-2 text-center mt-2"> Upgrade to continue </h3> <div> <div class="py-2 mt-2 mb-4 text-elevated-1 dark:text-surface-6 text-md text-center prose-dark"> <div class="max-w-md mx-auto mb-8 mt-2 bg-green-50 rounded-lg text-center"> <div class="p-3"> <div class="ml-3"> <p class="text-md font-bold text-green-600 uppercase"> Today's Special Offer</p> <p class="mt-1 text-md text-green-700"> Save an additional 20% with coupon: SAVE20 </p> </div> </div> </div> <p class="mb-7 mt-2"> <span class="text-elevated-1 dark:text-surface-5"> Upgrade to a paid plan to continue </span> </p> <div class="mx-auto max-w-md"> <a class="px-6 py-4 text-md rounded-xl w-full bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1" full="true" size="lg" href="https://quizgecko.com/plans?offer=special"> View Special Deals </a> </div> </div> </div> </div> <div class="p-8 bg-surface-2 dark:bg-elevated-4"> <div class="mx-auto max-w-sm px-2 mt-4"> <p class="font-semibold text-elevated-1 dark:text-surface-5 text-lg text-center"> Trusted by top students and educators worldwide </p> </div> <div class="mb-5 -mt-6 hidden:sm-block"> <div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto mt-16 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5"> <img class="block dark:hidden col-span-2 max-h-16 w-full object-contain lg:col-span-1" src="https://quizgecko.com/images/logos/universities/stanford-light.png" alt="Stanford" width="158" height="48"> <img class="hidden dark:block col-span-2 max-h-16 w-full object-contain opacity-80 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/stanford-dark.png" alt="Stanford" width="158" height="48"> <img class="block dark:hidden col-span-2 max-h-10 w-full object-contain opacity-80 sm:col-start-2 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/princeton-light.png" alt="Princeton" width="158" height="48"> <img class="hidden dark:block col-span-2 max-h-10 w-full object-contain opacity-80 sm:col-start-2 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/princeton-dark.png" alt="Princeton" width="158" height="48"> <img class="block dark:hidden col-span-2 max-h-10 w-full object-contain opacity-80 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/yale-light.png" alt="Yale" width="158" height="48"> <img class="hidden dark:block col-span-2 max-h-10 w-full object-contain opacity-80 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/yale-dark.png" alt="Yale" width="158" height="48"> <img class="block dark:hidden col-span-2 max-h-12 w-full object-contain opacity-80 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/berkeley-light.png" alt="Berkeley" width="158" height="48"> <img class="hidden dark:block col-span-2 max-h-12 w-full object-contain opacity-80 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/berkeley-dark.png" alt="Berkeley" width="158" height="48"> <img class="block dark:hidden col-span-2 col-start-2 max-h-14 w-full object-contain opacity-80 sm:col-start-auto lg:col-span-1" src="https://quizgecko.com/images/logos/universities/oxford-light.png" alt="Oxford" width="158" height="48"> <img class="hidden dark:block col-span-2 col-start-2 max-h-14 w-full object-contain opacity-80 sm:col-start-auto lg:col-span-1" 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-feedback" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'feedback' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'feedback' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-4 pt-4 block"> <button type="button" x-on:click="show = false" class="rounded-md bg-surface-0 dark:bg-elevated-3 text-elevated-1 dark:text-surface-5 hover:text-surface-6 dark:hover:text-surface-6 focus:outline-none focus:ring-2 focus:ring-primary-1 dark:focus:ring-primary-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900"> <span class="sr-only">Close</span> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data="feedbackModal"> <p class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-4 pb-2 text-center mt-2"> Feedback </p> <div class="mt-4 prose dark:prose-dark"> <p class="text-elevated-1 dark:text-surface-5"> We are constantly improving Quizgecko and would love to hear your feedback. You can also submit feature requests here: <a href="https://quizgecko.canny.io/feature-requests" class="text-primary-0 dark:text-primary-2 hover:text-primary-1 dark:hover:text-primary-3" target="_blank"> feature requests. </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="iBaNPFWgfr62VNr2mXp3qEaEqcx0nY354hNHsxgC" autocomplete="off"> <div class="mb-4"> <label for="category" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Category </label> <select id="category" name="category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-surface-5 dark:border-elevated-2 focus:outline-none focus:ring-primary-1 focus:border-primary-1 dark:bg-elevated-3 dark:text-surface-4 sm:text-sm rounded-md"> <option value="">Select a category</option> <option value="bug">General Bug</option> <option value="feedback">General feedback</option> <option value="question_generation">Generating questions</option> <option value="quiz_play">Playing a quiz</option> <option value="quiz_share">Sharing a quiz</option> <option value="billing">Billing / my subscription</option> </select> </div> <div class="mb-4"> <label for="feedback" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Feedback </label> <textarea id="feedback" name="feedback" rows="4" x-model="feedback" class="mt-1 block w-full p-2.5 text-sm text-gray-900 bg-surface-0 border border-surface-5 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-elevated-3 dark:border-elevated-2 dark:text-surface-4" placeholder="Your feedback..."></textarea> </div> <div class="mb-4"> <label for="image" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Image (optional) </label> <input type="file" id="image" name="image" x-on:change="images = Object.values($event.target.files)" class="mt-1 block w-full text-sm text-gray-900 bg-surface-0 border border-surface-5 cursor-pointer focus:outline-none focus:border-transparent rounded-lg dark:bg-elevated-3 dark:border-elevated-2 dark:text-surface-4"> </div> <div class="flex justify-end"> <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-surface-0 bg-primary-0 hover:bg-primary-0 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 dark:bg-primary-0 dark:hover:bg-primary-0"> Submit </button> </div> </form> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('feedbackModal', () => ({ open: false, feedback: "", category: "general", images: null, submit() { this.$dispatch('close-modal', 'feedback'); let formData = new FormData(); formData.append('feedback', this.feedback); formData.append('category', this.category); if (this.images) { formData.append('image', this.images[0]); } this.open = false; axios.post("/api/v1/feedback", formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then((response) => { this.feedback = ""; this.images = null; this.open = false; }) .catch((error) => { console.error("Error submitting feedback:", error); window.alert( "Sorry, there was an error submitting your feedback. Please try again." ); this.open = false; }); } })); }); </script> </div> </div> </div> </div> </div> <div id="modal-register" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'register' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'register' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-4 pt-4 block"> <button type="button" x-on:click="show = false" class="rounded-md bg-surface-0 dark:bg-elevated-3 text-elevated-1 dark:text-surface-5 hover:text-surface-6 dark:hover:text-surface-6 focus:outline-none focus:ring-2 focus:ring-primary-1 dark:focus:ring-primary-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900"> <span class="sr-only">Close</span> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data="{ showEmailForm: false }"> <p class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-4 pb-2 text-center mt-2"> Create your free account </p> <div class="mb-3 mt-10" x-show="!showEmailForm"> <div class="mt-6 text-center mx-auto max-w-sm"> <a x-data @click="$store.signInMethod.trackSignIn('google')" x-tooltip="Last used" x-tooltip-position="left" x-tooltip-display="$store.signInMethod.method === 'google'" href="https://quizgecko.com/auth/google/redirect" class="px-5 py-3 text-md rounded-lg w-full bg-blue-600 dark:border-blue-600 hover:bg-blue-700 hover:border-blue-600 active:bg-blue-100 focus:border-blue-600 focus:shadow-outline-gray text-surface-0 disabled:bg-blue-200 disabled:text-surface-3 inline-flex justify-center font-bold border shadow-sm disabled:cursor-not-allowed cursor-pointer disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mt-1 sm:w-full"> <svg class="w-6 h-6 mr-1" viewBox="0 0 533.5 544.3"> <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"></path> <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"></path> <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"></path> <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"></path> </svg> <span class="ml-2"> Continue with Google </span> </a> </div> <div class="mt-2 text-center mx-auto max-w-sm"> <a href="https://quizgecko.com/auth/apple/redirect" x-data @click="$store.signInMethod.trackSignIn('apple')" x-tooltip-position="left" x-tooltip="Last used" x-tooltip-display="$store.signInMethod.method === 'apple'" class="px-5 py-3 text-md rounded-lg w-full dark:border-elevated-3 hover:bg-elevated-3 hover:border-black active:bg-surface-3 focus:border-black focus:shadow-outline-gray text-surface-0 disabled:text-surface-3 disabled:bg-surface-4 inline-flex justify-center font-bold border shadow-sm disabled:cursor-not-allowed cursor-pointer disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 mt-1 sm:w-full bg-black"> <svg class="w-5 h-5 mr-0.5 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"> </path> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"> </path> </svg> <span class="ml-2"> Sign in with Apple </span> </a> </div> <div class="text-center mt-8"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1" 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="iBaNPFWgfr62VNr2mXp3qEaEqcx0nY354hNHsxgC" autocomplete="off"> <div class="mt-2 mb-6"> <button class="px-4 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" 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 border border-surface-5 dark:border-elevated-1 rounded-xl focus:border-primary-1 mt-1 dark:bg-elevated-3 focus:ring-0 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 border border-surface-5 dark:border-elevated-1 rounded-xl focus:border-primary-1 mt-1 dark:bg-elevated-3 focus:ring-0 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 border border-surface-5 dark:border-elevated-1 rounded-xl focus:border-primary-1 mt-1 dark:bg-elevated-3 focus:ring-0 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 border border-surface-5 dark:border-elevated-1 rounded-xl focus:border-primary-1 mt-1 dark:bg-elevated-3 focus:ring-0 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 ml-4" type="submit" type="button"> Verify email → </button> </div> </form> <div class="mt-12 text-center max-w-sm mx-auto"> <p class="text-sm text-surface-6 "> By continuing, you agree to Quizgecko's <a class="underline" target="_blank" href="https://quizgecko.com/terms">Terms of Service</a> and <a href="https://quizgecko.com/privacy-policy" class="underline" target="_blank" rel="noopener noreferrer">Privacy Policy</a>. </p> </div> </div> <div class="p-8 bg-surface-2 dark:bg-elevated-4"> <div class="mx-auto max-w-sm px-2 mt-4"> <p class="font-semibold text-elevated-1 text-lg text-center dark:text-surface-5"> Trusted by top students and educators worldwide </p> </div> <div class="mb-5 -mt-6"> <div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto mt-16 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5"> <img class="block dark:hidden col-span-2 max-h-16 w-full object-contain lg:col-span-1" src="https://quizgecko.com/images/logos/universities/stanford-light.png" alt="Stanford" width="158" height="48"> <img class="hidden dark:block col-span-2 max-h-16 w-full object-contain opacity-80 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/stanford-dark.png" alt="Stanford" width="158" height="48"> <img class="block dark:hidden col-span-2 max-h-10 w-full object-contain opacity-80 sm:col-start-2 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/princeton-light.png" alt="Princeton" width="158" height="48"> <img class="hidden dark:block col-span-2 max-h-10 w-full object-contain opacity-80 sm:col-start-2 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/princeton-dark.png" alt="Princeton" width="158" height="48"> <img class="block dark:hidden col-span-2 max-h-10 w-full object-contain opacity-80 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/yale-light.png" alt="Yale" width="158" height="48"> <img class="hidden dark:block col-span-2 max-h-10 w-full object-contain opacity-80 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/yale-dark.png" alt="Yale" width="158" height="48"> <img class="block dark:hidden col-span-2 max-h-12 w-full object-contain opacity-80 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/berkeley-light.png" alt="Berkeley" width="158" height="48"> <img class="hidden dark:block col-span-2 max-h-12 w-full object-contain opacity-80 lg:col-span-1" src="https://quizgecko.com/images/logos/universities/berkeley-dark.png" alt="Berkeley" width="158" height="48"> <img class="block dark:hidden col-span-2 col-start-2 max-h-14 w-full object-contain opacity-80 sm:col-start-auto lg:col-span-1" src="https://quizgecko.com/images/logos/universities/oxford-light.png" alt="Oxford" width="158" height="48"> <img class="hidden dark:block col-span-2 col-start-2 max-h-14 w-full object-contain opacity-80 sm:col-start-auto lg:col-span-1" 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 id="modal-confirm" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'confirm' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'confirm' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div x-on:click.outside="show = false" class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-4 pt-4 block"> <button type="button" x-on:click="show = false" class="rounded-md bg-surface-0 dark:bg-elevated-3 text-elevated-1 dark:text-surface-5 hover:text-surface-6 dark:hover:text-surface-6 focus:outline-none focus:ring-2 focus:ring-primary-1 dark:focus:ring-primary-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900"> <span class="sr-only">Close</span> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data> <h3 class="text-lg font-semibold text-elevated-3 pb-2" x-text="$store.confirmModal.title"></h3> <p class="mt-3 text-elevated-1 dark:text-surface-5" x-html="$store.confirmModal.message"></p> <div class="mt-6 flex justify-end space-x-3"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1" color="secondary" @click="$store.confirmModal.onCancel()" type="button"> Cancel </button> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1" @click="$store.confirmModal.onOk()" type="button"> OK </button> </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.store('confirmModal', { open: false, title: '', message: '', onOk: () => {}, onCancel: () => {}, show(title, message) { console.log('show', title, message); window.dispatchEvent(new CustomEvent('open-modal', { detail: 'confirm' })); this.title = title; this.message = message; this.open = true; }, hide() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'confirm' })); this.open = false; } }); }); window.confirmModal = (title, message) => { return new Promise((resolve) => { const confirmModal = Alpine.store('confirmModal'); confirmModal.show(title, message); confirmModal.onOk = () => { confirmModal.hide(); resolve(true); }; confirmModal.onCancel = () => { confirmModal.hide(); resolve(false); }; }); }; </script> <div x-data="{ notifications: [], add(e) { if (!e.detail.type) { e.detail.type = 'success' } this.notifications.push({ id: e.timeStamp, type: e.detail.type, content: e.detail.content, title: e.detail.title, linkText: e.detail.linkText, linkUrl: e.detail.linkUrl, }) }, remove(notification) { this.notifications = this.notifications.filter(i => i.id !== notification.id) }, }" @notify.window="add($event)" class="fixed top-2 right-0 flex w-full max-w-xs xl:max-w-sm flex-col space-y-4 pr-4 pb-4 sm:justify-start z-50" role="status" aria-live="polite"> <!-- 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-4 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" 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> <footer aria-labelledby="footer-heading"> <p id="footer-heading" class="sr-only">Footer</p> <div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-28"> <div class="xl:grid xl:grid-cols-3 xl:gap-10"> <div class="mt-10 xl:mt-0"> <img class="w-8 rounded-md" src="https://quizgecko.com/images/icon-small.png" alt=""> <div class="mt-4 border-elevated-4/10 pt-4 md:flex md:items-center md:justify-between"> <div class="flex space-x-6 md:order-2"> <a href="https://discord.gg/HsRXwQ3S7Z" target="_blank" class="text-surface-6 hover:text-gray-500"> <span class="sr-only">Discord</span> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M247.51,174.39,218,58a16.08,16.08,0,0,0-13-11.88l-36.06-5.92a16.22,16.22,0,0,0-18.26,11.88l-.21.85a4,4,0,0,0,3.27,4.93,155.62,155.62,0,0,1,24.41,5.62,8.2,8.2,0,0,1,5.62,9.7,8,8,0,0,1-10.19,5.64,155.4,155.4,0,0,0-90.8-.1,8.22,8.22,0,0,1-10.28-4.81,8,8,0,0,1,5.08-10.33,156.85,156.85,0,0,1,24.72-5.72,4,4,0,0,0,3.27-4.93l-.21-.85A16.21,16.21,0,0,0,87.08,40.21L51,46.13A16.08,16.08,0,0,0,38,58L8.49,174.39a15.94,15.94,0,0,0,9.06,18.51l67,29.71a16.17,16.17,0,0,0,21.71-9.1l3.49-9.45a4,4,0,0,0-3.27-5.35,158.13,158.13,0,0,1-28.63-6.2,8.2,8.2,0,0,1-5.61-9.67,8,8,0,0,1,10.2-5.66,155.59,155.59,0,0,0,91.12,0,8,8,0,0,1,10.19,5.65,8.19,8.19,0,0,1-5.61,9.68,157.84,157.84,0,0,1-28.62,6.2,4,4,0,0,0-3.27,5.35l3.49,9.45a16.18,16.18,0,0,0,21.71,9.1l67-29.71A15.94,15.94,0,0,0,247.51,174.39ZM92,152a12,12,0,1,1,12-12A12,12,0,0,1,92,152Zm72,0a12,12,0,1,1,12-12A12,12,0,0,1,164,152Z"/></svg> </a> <a href="https://www.tiktok.com/@quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Tiktok</span> <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"> </path> </svg> </a> <a href="https://instagram.com/quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Instagram</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" /> </svg> </a> <a href="https://twitter.com/Quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">X</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" /> </svg> </a> <a href="https://www.facebook.com/profile.php?id=61550782041398" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Facebook</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /> </svg> </a> <a target="_blank" href="mailto:hello@quizgecko.com" class="text-surface-6 cursor-pointer hover:text-elevated-2 mr-2 rtl:ml-2"> <span class="sr-only">Email</span> <svg class="inline-block w-6 h-7 text-surface-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"/></svg> </a> <a target="_blank" href="https://chrome.google.com/webstore/detail/quizgecko/jipdeflholipfmimeegaphokjfhkbbpl" class="text-surface-6 cursor-pointer hover:text-elevated-2 mr-2 rtl:ml-2"> <span class="sr-only">Chrome</span> <svg class="w-6 h-6 text-surface-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="4"></circle> <line x1="21.17" y1="8" x2="12" y2="8"> </line> <line x1="3.95" y1="6.06" x2="8.54" y2="14"> </line> <line x1="10.88" y1="21.94" x2="15.46" y2="14"> </line> </svg> </a> </div> </div> <div class="flex gap-3 mt-6 -ml-1"> <a href="https://apple.co/4a1UzYI" title="" class="inline-flex items-center justify-center w-full text-left text-surface-0 bg-elevated-4 dark:bg-elevated-2 hover:bg-elevated-1 rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-300 px-2 py-1.5 sm:w-auto" role="button"> <svg aria-hidden="true" class="h-8 w-8 sm:w-10 sm:h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z"> </path> </svg> <div class="ml-2.5"> <span class="block text-xs font-normal leading-none"> Download on the </span> <span class="block text-sm font-bold leading-tight"> App Store </span> </div> </a> <a href="https://bit.ly/quizgecko-android" title="" class="inline-flex items-center justify-center w-full text-left text-surface-0 bg-elevated-4 dark:bg-elevated-2 hover:bg-elevated-1 rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-300 px-2 py-1.5 sm:w-auto" role="button"> <svg aria-hidden="true" class="h-8 w-8 sm:w-10 sm:h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="m12.954 11.616 2.957-2.957L6.36 3.291c-.633-.342-1.226-.39-1.746-.016l8.34 8.341zm3.461 3.462 3.074-1.729c.6-.336.929-.812.929-1.34 0-.527-.329-1.004-.928-1.34l-2.783-1.563-3.133 3.132 2.841 2.84zM4.1 4.002c-.064.197-.1.417-.1.658v14.705c0 .381.084.709.236.97l8.097-8.098L4.1 4.002zm8.854 8.855L4.902 20.91c.154.059.32.09.495.09.312 0 .637-.092.968-.276l9.255-5.197-2.666-2.67z"> </path> </svg> <div class="ml-2.5"> <span class="block text-xxs font-normal leading-none"> Download on </span> <span class="block text-sm font-bold leading-tight"> Google Play </span> </div> </a> </div> </div> <div class="mt-16 grid grid-cols-2 xl:col-span-2 xl:mt-0"> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Discover </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/plans?offer=student" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">For Students</a> </li> <li> <a href="https://quizgecko.com/plans?offer=teacher" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">For Teachers & Parents</a> </li> <li> <a href="https://quizgecko.com/plans" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">For Work</a> </li> <li> <a href="https://quizgecko.com/mobile" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Mobile Apps</a> </li> </ul> </div> <div class="mt-10 md:mt-0"> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Account </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/library" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">My Library</a> </li> <li> <a href="https://quizgecko.com/profile" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">My Profile</a> </li> <li> <a href="https://quizgecko.com/billing" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Billing</a> </li> <li> <a href="https://quizgecko.com/features" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Features</a> </li> </ul> </div> </div> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Resources </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/blog" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Blog</a> </li> <li> <a href="/api" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">API</a> </li> <li> <a href="https://help.quizgecko.com" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Help Center</a> </li> <li> <a href="https://quizgecko.com/discover" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Browse Quizzes</a> </li> </ul> </div> <div class="mt-10 md:mt-0"> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Policies </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/terms" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Terms</a> </li> <li> <a href="https://quizgecko.com/privacy-policy" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Privacy</a> </li> <li> <a href="https://quizgecko.com/copyright" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Copyright</a> </li> <li> <a href="https://quizgecko.com/legal" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">More...</a> </li> </ul> </div> </div> </div> </div> </div> <div class="mt-8 border-t border-elevated-4/10 pt-4 md:flex md:items-center md:justify-between"> <div class="text-center mx-auto max-w-xl mt-4 mb-8 text-elevated-0 dark:text-surface-6 text-sm "> <p class="mb-2 text-gray-900 dark:text-surface-5">Change Language</p> <div class="flex-wrap justify-center pt-8 sm:justify-start sm:pt-0 dark:bg-elevated-4"> <span class="ml-2 mr-2 text-elevated-2 dark:text-surface-5">English</span> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/fr">French</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/de">German</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/es">Spanish</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/pt">Portuguese</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/hi">Hindi</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/ko">Korean</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/zh">Chinese</a> </div> </div> </div> </footer> </div> </body> </html> <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="e88ef3997ded21076904c683-|49" defer></script>