Look at the web page and tick (✓) the tags used to create it.

Answer

<html>, <body>, <title>, </body>

The tags used to create the web page are , , , and </body>.</p> </div> <div class="sr-only"> <h5>Answer for screen readers</h5> <p>The tags used to create the web page are <html>, <body>, <title>, and </body>.</p> </div> </div> <div class="prose dark:prose-dark"> <h4>More Information</h4> <p>These are common HTML tags used to structure a basic web page, where <html> is the root element, <body> contains the main content, <title> sets the page title, and </body> closes the body section.</p> </div> <div class="prose dark:prose-dark"> <h4>Tips</h4> <p>Ensure each opening tag is paired with a closing tag, except for self-closing tags.</p> </div> <div> <p class="text-sm text-elevated-2 dark:text-surface-6"> AI-generated content may contain errors. Please verify critical information </p> </div> <div class="min-h-[70px]"> <div class="flex flex-row gap-2 mt-3" x-show="!shouldHideVoting"> <button class="px-4 py-2.5 text-md rounded-xl w-full 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" full="full" color="secondary" x-on:click="vote('upvote')" type="button"> <svg class="inline-block h-5 w-5 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z"/></svg> Helpful </button> <button class="px-4 py-2.5 text-md rounded-xl w-full 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" full="full" color="secondary" x-on:click="vote('downvote')" type="button"> <svg class="inline-block h-5 w-5 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M239.82,157l-12-96A24,24,0,0,0,204,40H32A16,16,0,0,0,16,56v88a16,16,0,0,0,16,16H75.06l37.78,75.58A8,8,0,0,0,120,240a40,40,0,0,0,40-40V184h56a24,24,0,0,0,23.82-27ZM72,144H32V56H72Zm150,21.29a7.88,7.88,0,0,1-6,2.71H152a8,8,0,0,0-8,8v24a24,24,0,0,1-19.29,23.54L88,150.11V56H204a8,8,0,0,1,7.94,7l12,96A7.87,7.87,0,0,1,222,165.29Z"/></svg> Not Helpful </button> </div> <div x-show="shouldHideVoting" class="mt-3 text-sm dark:text-surface-5 text-elevated-2" x-cloak> Thank you for voting! </div> </div> </div> </div> <style> .steps-to-solve p:not(.not-prose) { margin-left: 2em; } </style> <script> document.addEventListener("alpine:init", () => { Alpine.data("askedQuestion", (askedQuestionId) => ({ showAnswer: false, upvotes: 0, downvotes: 0, votedIds: Alpine.$persist([]), shouldHideVoting: false, init() { if (this.votedIds.includes(askedQuestionId)) { this.shouldHideVoting = true; } }, vote(type) { if (this.votedIds.includes(askedQuestionId)) { return; } this.votedIds.push(askedQuestionId); this.shouldHideVoting = true; axios.post(`/api/v1/asked-questions/${askedQuestionId}/${type}`) .then(response => { this[`${type}s`] = response.data[`${type}s`]; }) .catch(error => { console.error(`Error ${type}ing:`, error); }); }, makePrivate() { axios.post(`/api/v1/asked-questions/${askedQuestionId}/make-private`) .then(response => { alert('Asked question made private successfully'); location.reload(); }); }, })); }); </script> </div> </div> </div> <aside class="lg:col-span-4"> <div class="lg:sticky lg:top-6 space-y-6"> <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-4 p-4 border-surface-4 dark:border-elevated-4"> <div class="flex flex-col items-center"> <div class="flex items-center mb-2"> <svg class="w-5 h-5 mr-2 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"> <path d="M7.39804 12.8088C7.57428 12.9331 7.78476 12.9997 8.00043 12.9993C8.21633 12.9995 8.42686 12.932 8.60243 12.8063C8.77993 12.6758 8.91464 12.4955 8.98943 12.2883L9.43643 10.9153C9.55086 10.571 9.74391 10.2581 10.0003 10.0014C10.2566 9.74467 10.5693 9.5512 10.9134 9.4363L12.3044 8.9853C12.4564 8.93095 12.5936 8.84214 12.7055 8.72586C12.8174 8.60957 12.9008 8.46896 12.9492 8.31503C12.9977 8.16111 13.0098 7.99806 12.9847 7.83867C12.9596 7.67927 12.8979 7.52786 12.8044 7.3963C12.6703 7.21038 12.4794 7.07314 12.2604 7.0053L10.8854 6.5583C10.5409 6.44407 10.2278 6.25111 9.97087 5.99472C9.71396 5.73833 9.52035 5.42558 9.40543 5.0813L8.95343 3.6933C8.88113 3.491 8.74761 3.31624 8.57143 3.1933C8.43877 3.09957 8.28607 3.03809 8.12548 3.01375C7.96489 2.9894 7.80083 3.00286 7.64636 3.05306C7.49188 3.10326 7.35125 3.18881 7.23564 3.3029C7.12004 3.417 7.03265 3.5565 6.98043 3.7103L6.52343 5.1103C6.40884 5.44513 6.21967 5.74954 5.97022 6.00055C5.72076 6.25157 5.41753 6.44263 5.08343 6.5593L3.69243 7.0073C3.54065 7.0617 3.40352 7.15048 3.29177 7.26669C3.18001 7.3829 3.09666 7.5234 3.04824 7.67719C2.99982 7.83097 2.98764 7.99388 3.01265 8.15315C3.03767 8.31243 3.0992 8.46376 3.19243 8.5953C3.32027 8.77475 3.50105 8.90972 3.70943 8.9813L5.08343 9.4263C5.52354 9.57278 5.90999 9.84713 6.19343 10.2143C6.35585 10.4249 6.4813 10.6616 6.56443 10.9143L7.01643 12.3053C7.08846 12.5086 7.22179 12.6845 7.39804 12.8088ZM13.5353 16.8513C13.6713 16.9475 13.8337 16.9992 14.0003 16.9993C14.1654 16.9994 14.3264 16.9484 14.4613 16.8533C14.6008 16.7548 14.7058 16.6149 14.7613 16.4533L15.0093 15.6913C15.0625 15.5329 15.1515 15.3888 15.2693 15.2703C15.3867 15.1518 15.5307 15.063 15.6893 15.0113L16.4613 14.7593C16.619 14.7048 16.7557 14.6024 16.8523 14.4663C16.9257 14.3633 16.9736 14.2444 16.9921 14.1193C17.0106 13.9942 16.9992 13.8665 16.9588 13.7467C16.9184 13.6268 16.8501 13.5183 16.7597 13.4299C16.6692 13.3415 16.5591 13.2759 16.4383 13.2383L15.6743 12.9893C15.5162 12.9368 15.3724 12.8481 15.2544 12.7305C15.1364 12.6128 15.0473 12.4693 14.9943 12.3113L14.7423 11.5383C14.6886 11.3805 14.586 11.2439 14.4493 11.1483C14.3473 11.0754 14.2295 11.0274 14.1056 11.0084C13.9816 10.9893 13.8549 10.9997 13.7357 11.0386C13.6164 11.0775 13.508 11.1439 13.4192 11.2325C13.3304 11.321 13.2636 11.4292 13.2243 11.5483L12.9773 12.3103C12.925 12.468 12.8375 12.6116 12.7213 12.7303C12.6066 12.8468 12.4667 12.9354 12.3123 12.9893L11.5393 13.2413C11.3803 13.2952 11.2422 13.3978 11.1447 13.5346C11.0472 13.6713 10.9952 13.8353 10.9961 14.0032C10.997 14.1712 11.0507 14.3346 11.1496 14.4703C11.2486 14.606 11.3877 14.7071 11.5473 14.7593L12.3103 15.0063C12.4692 15.0597 12.6136 15.149 12.7323 15.2673C12.8505 15.3856 12.939 15.5302 12.9903 15.6893L13.2433 16.4633C13.2981 16.6198 13.4001 16.7554 13.5353 16.8513Z" fill="currentColor"></path> </svg> <span class="text-sm font-semibold text-white">Quizgecko AI</span> </div> <h2 class="text-2xl font-semibold text-white text-center "> Need help with your homework? </h2> <div class="mt-4"> <a 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" href="https://quizgecko.com/solve" color="highlight"> Ask a Question for Free </a> </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-4 p-4 border-surface-4 dark:border-elevated-4"> <h2 class="text-lg font-medium contents-heading">Related Questions</h2> <ul class="mt-4 space-y-4"> <li> <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2 dark:text-surface-5" href="https://quizgecko.com/q/add-63-107-42-106-and-write-your-answer-in-scientific-notation-hzyw0">Add (6.3 × 10^7) + (4.2 × 10^6) and write your answer in scientific notation.</a> </li> <li> <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2 dark:text-surface-5" href="https://quizgecko.com/q/class-9-chemistry-chapter-structure-of-molecules-3gwp3">Class 9 chemistry chapter structure of molecules</a> </li> <li> <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2 dark:text-surface-5" href="https://quizgecko.com/q/what-does-the-transparency-of-water-allow-for-organisms-below-its-surface-pd8vs">What does the transparency of water allow for organisms below its surface?</a> </li> <li> <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2 dark:text-surface-5" href="https://quizgecko.com/q/short-notes-on-money-measurement-concept-mcqex">Short notes on money measurement concept</a> </li> <li> <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2 dark:text-surface-5" href="https://quizgecko.com/q/lt8ml"></a> </li> <li> <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2 dark:text-surface-5" href="https://quizgecko.com/q/generate-quiz-from-j6fkw">generate quiz from</a> </li> <li> <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2 dark:text-surface-5" href="https://quizgecko.com/q/i-have-around-35000-characters-in-my-text-document-how-many-tokens-is-that-wijls">I have around 35000 characters in my text document. How many tokens is that?</a> </li> <li> <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2 dark:text-surface-5" href="https://quizgecko.com/q/what-is-computer-write-characteristics-of-computer-sfbdh">What is Computer? Write Characteristics of computer.</a> </li> </ul> </div> </div> </aside> </div> </div> </div> <script> document.addEventListener("alpine:init", () => { Alpine.data("showAskedQuestion", () => ({ askedQuestion: {"id":162291,"user_id":null,"user_text_input":null,"upload_id":null,"question_id":null,"processed_text":"Look at the web page and tick (\u2713) the tags used to create it.","cleaned_question":"Look at the web page and tick (\u2713) the tags used to create it.","slug":"look-at-the-web-page-and-tick-the-tags-used-to-create-it-czafp","status":"completed","error":null,"understanding_the_problem":"The question is asking to identify and tick the HTML tags used in the displayed web page as part of an activity. It suggests examining the relevant HTML code provided in the image.","category":"knowledge","subcategory":"web development","steps_to_solve":[],"answer":"The tags used to create the web page are \u003Chtml\u003E, \u003Cbody\u003E, \u003Ctitle\u003E, and \u003C\/body\u003E.","concise_answer":"\u003Chtml\u003E, \u003Cbody\u003E, \u003Ctitle\u003E, \u003C\/body\u003E","answer_info":"These are common HTML tags used to structure a basic web page, where \u003Chtml\u003E is the root element, \u003Cbody\u003E contains the main content, \u003Ctitle\u003E sets the page title, and \u003C\/body\u003E closes the body section.","tips":"Ensure each opening tag is paired with a closing tag, except for self-closing tags.","key_concepts":["HTML","Web Development","HTML Tags"],"created_at":"2025-01-26T14:42:49.000000Z","updated_at":"2025-01-26T14:42:59.000000Z","answer_mismatch":null,"sources":[],"upvotes":0,"downvotes":0,"steps_to_solve_markdown":null,"image_path":"question_images\/yH9RQMZNV5DHLGXOOUHaEDSNGoPQsLSXkZL2KWk5.jpg","language":"English","qgid":null,"ip_address":"2401:4900:1cd7:fdb4:c0b2:f505:c9ce:eec6","private":false,"text":"Look at the web page and tick (\u2713) the tags used to create it.","url":"https:\/\/quizgecko.com\/q\/look-at-the-web-page-and-tick-the-tags-used-to-create-it-czafp"}, isLoading: false, hasUpdated: false, init() { if (this.askedQuestion.status !== 'completed') { this.pollForAnswer(); } }, async pollForAnswer() { this.isLoading = true; for (let attempts = 0; attempts < 200; attempts++) { try { const response = await axios.get( `/api/v1/asked-question/${this.askedQuestion.id}`); if (response.data.status === 'completed') { await this.fetchComponentHtml(); return; } await this.delay(800); } catch (error) { console.error('Error retrieving status:', error); this.isLoading = false; return; } } console.error('Max attempts reached. Could not retrieve complete answer.'); this.isLoading = false; }, async fetchComponentHtml() { if (this.hasUpdated) return; try { const response = await axios.get( `/asked-question-component/${this.askedQuestion.id}`); this.$refs.container.innerHTML = response.data; this.hasUpdated = true; setTimeout(() => { window.renderKatex(); }, 100); } catch (error) { console.error('Error retrieving component HTML:', error); } finally { this.isLoading = false; } }, delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } })); }); </script> </div> </main> <div x-data="bottomBannerMobile()" class="sm:hidden" x-show="open" x-cloak> <div class="fixed bottom-0 start-0 z-[4147483004] w-full"> <div id="bottom-banner" tabindex="-1" class="flex justify-between py-4 px-5 border-t bg-surface-0 rounded-t-[20px] z-20">  <div class="relative w-full box-border text-center px-md pt-md pb-xl text-elevated-3"> <div class="mx-auto"> <span class="font-bold text-lg text-elevated-2 ">Use Quizgecko on... </span> </div> <div slot="ctas" class="mt-6 space-y-6"> <div class="flex justify-between box-border mb-md"> <div class="flex items-center space-x-4"> <div class="w-[48px] h-[48px] flex items-center justify-center border border-solid border-neutral-border-weak rounded-lg"> <img class="w-[48px] h-[48px] text-[48px] rounded-lg" src="https://quizgecko.com/images/icon-small.png" alt="Browser" /> </div> <span class="text-16 font-bold text-neutral-content-strong ml-xs" x-text="appName"></span> </div> <a :href="appUrl" class="min-w-[120px] px-[var(--rem14)] items-center justify-center inline-flex bg-primary-1 rounded-lg text-surface-0 font-bold" id="primary-button" rel="nofollow"> <span class="flex items-center justify-center"> <span class="flex items-center gap-xs">Open</span></span> </a> </div> <div class="flex justify-between box-border"> <div class="flex items-center space-x-4"> <div class="w-[48px] h-[48px] flex items-center justify-center border border-solid border-neutral-border-weak rounded-lg"> <img class="w-[40px] h-[40px] text-[40px] rounded-full" src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/f6dbf467-b532-444e-7df3-ba798d577a00/thumb" alt="Browser" /> </div> <span id="continue-label" class="text-16 font-bold text-neutral-content-strong ml-xs"> Browser </span> </div> <button @click="toggle()" class="min-w-[120px] px-[var(--rem14)] items-center justify-center inline-flex bg-surface-3 rounded-lg text-elevated-3 font-bold" id="secondary-button"> <span class="flex items-center justify-center"> <span class="flex items-center gap-xs">Continue</span> </span> </button> </div> </div> </div> </div> </div> <div id="backdrop" part="backdrop" class="fixed inset-0 bg-black opacity-50 z-10"></div> </div> <script> document.addEventListener("alpine:init", () => { Alpine.data("bottomBannerMobile", (quiz) => ({ open: false, os: null, init() { const closedTimestamp = localStorage.getItem('bottomMobileBannerClosedTimestamp'); const currentTimestamp = Date.now(); const oneWeekInMilliseconds = 7 * 24 * 60 * 60 * 1000; this.open = true; if (closedTimestamp && currentTimestamp - closedTimestamp < oneWeekInMilliseconds) { this.open = false; } else { localStorage.removeItem('bottomMobileBannerClosedTimestamp'); } this.os = this.getOS(); this.setAppDetails(); }, setAppDetails() { if (this.os === 'iOS') { this.appUrl = 'https://apps.apple.com/gb/app/quizgecko-ai-study-quizzes/id6473546188'; this.appName = 'iPhone App'; } else if (this.os === 'Android') { this.appUrl = 'https://play.google.com/store/apps/details?id=com.quizgecko'; this.appName = 'Android App'; } else { this.appUrl = 'https://quizgecko.com/mobile'; this.appName = 'Mobile App'; } }, toggle() { console.log('toggle'); this.open = !this.open; if (!this.open) { localStorage.setItem('bottomMobileBannerClosedTimestamp', Date.now()); } else { localStorage.removeItem('bottomMobileBannerClosedTimestamp'); } }, getOS() { const userAgent = window.navigator.userAgent, platform = window.navigator.platform, iosPlatforms = ['iPhone', 'iPad', 'iPod'], androidPlatforms = ['Android']; if (iosPlatforms.indexOf(platform) !== -1) { return 'iOS'; } else if (androidPlatforms.some(substring => userAgent.includes(substring))) { return 'Android'; } else { return 'other'; } } })); }); </script> <div id="modal-help" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'help' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'help' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside=show=false class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8"> <template x-if="$store.ui?.modals?.help?.title"> <h3 class="text-lg font-semibold text-elevated-3 pb-2" x-text="$store.ui?.modals?.help?.title"></h3> </template> <template x-if="$store.ui?.modals?.help?.content"> <p class="mt-3 text-elevated-1 dark:text-surface-5" x-html="$store.ui?.modals?.help?.content"></p> </template> </div> <div class="flex justify-end p-4 space-x-2 bg-surface-2 dark:bg-elevated-3"> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click.prevent="$dispatch('close-modal', 'help')" type="button"> Got it! </button> </div> </div> </div> </div> </div> </div> <div id="modal-limit" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'limit' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'limit' ? show = false : null" x-on:keydown.escape.window="" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div x-data="{ message: '' }" @open-modal.window="message = $event.content"> <div class="p-8">  <h3 class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-3 pb-2 text-center mt-2"> Upgrade to continue </h3> <div> <div class="py-2 mt-2 mb-4 text-elevated-1 dark:text-surface-6 text-md text-center prose-dark">  <p x-show="message" x-text="message" class="mb-4"></p> <div class="max-w-md mx-auto mb-8 mt-2 bg-green-50 rounded-lg text-center"> <div class="p-3"> <div class="ml-3"> <p class="text-md font-bold text-green-600 uppercase"> Today's Special Offer</p> <p class="mt-1 text-md text-green-700"> Save an additional 20% with coupon: SAVE20 </p> </div> </div> </div> <p class="mb-7 mt-2"> <span class="text-elevated-1 dark:text-surface-5"> Upgrade to a paid plan to continue </span> </p> <div class="mx-auto max-w-md"> <a class="px-6 py-4 text-md rounded-xl w-full bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center hover:text-surface-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 mt-8"> <div class="grid grid-cols-2 gap-8 lg:grid-cols-5"> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-16 w-auto object-contain" src="https://quizgecko.com/images/logos/universities/stanford-light.png" alt="Stanford" width="158" height="48"> <img class="hidden dark:block max-h-16 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/stanford-dark.png" alt="Stanford" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-light.png" alt="Princeton" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-dark.png" alt="Princeton" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-light.png" alt="Yale" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-dark.png" alt="Yale" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-light.png" alt="Berkeley" width="158" height="48"> <img class="hidden dark:block max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-dark.png" alt="Berkeley" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-2 lg:col-span-1"> <img class="block dark:hidden max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-light.png" alt="Oxford" width="158" height="48"> <img class="hidden dark:block max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-dark.png" alt="Oxford" width="158" height="48"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="modal-feedback" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'feedback' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'feedback' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside=show=false class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data="feedbackModal"> <p class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-4 pb-2 text-center mt-2"> Feedback </p> <div class="mt-4 prose dark:prose-dark"> <p class="text-elevated-1 dark:text-surface-5"> We read all feedback carefully, but we do not reply to all submissions. If you have an issue requiring a response, please use the <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2" href="https://help.quizgecko.com" target="_blank">Help Center.</a> </p> </div> <div class="mt-6"> <form method="POST" enctype="multipart/form-data" x-on:submit.prevent="submit()"> <input type="hidden" name="_token" value="3M4UbhxgUA09i0ajWAr1ttPJ2jDsSdwMtmgxLVRM" autocomplete="off"> <div class="mb-4"> <label for="category" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Category </label> <select id="category" name="category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-surface-5 dark:border-elevated-2 focus:outline-none focus:ring-primary-1 focus:border-primary-1 dark:bg-elevated-3 dark:text-surface-4 sm:text-sm rounded-md"> <option value="">Select a category</option> <option value="bug">General Bug</option> <option value="feedback">General feedback</option> <option value="question_generation">Generating questions</option> <option value="quiz_play">Playing a quiz</option> <option value="quiz_share">Sharing a quiz</option> </select> </div> <div class="mb-4"> <label for="feedback" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Feedback </label> <textarea id="feedback" name="feedback" rows="4" x-model="feedback" class="mt-1 block w-full p-2.5 text-sm text-gray-900 bg-surface-0 border border-surface-5 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-elevated-3 dark:border-elevated-2 dark:text-surface-4" placeholder="Your feedback..."></textarea> </div> <div class="mb-4"> <label for="image" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Image (optional) </label> <input type="file" id="image" name="image" x-on:change="images = Object.values($event.target.files)" class="mt-1 block w-full text-sm text-gray-900 bg-surface-0 border border-surface-5 cursor-pointer focus:outline-none focus:border-transparent rounded-lg dark:bg-elevated-3 dark:border-elevated-2 dark:text-surface-4"> </div> <div class="flex justify-end"> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="submit" type="button"> Submit </button> </div> </form> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('feedbackModal', () => ({ open: false, feedback: "", category: "general", images: null, submit() { this.$dispatch('close-modal', 'feedback'); let formData = new FormData(); formData.append('feedback', this.feedback); formData.append('category', this.category); if (this.images) { formData.append('image', this.images[0]); } this.open = false; axios.post("/api/v1/feedback", formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then((response) => { this.feedback = ""; this.images = null; this.open = false; window.alert( "Thank you for your feedback! Please note we do not reply to submissions here. If you need a response from us, please use the help center to contact us." ); }) .catch((error) => { console.error("Error submitting feedback:", error); window.alert( "Sorry, there was an error submitting your feedback. Please try again." ); this.open = false; }); } })); }); </script> </div> </div> </div> </div> </div> <div id="modal-register" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'register' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'register' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside=show=false class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data="{ showEmailForm: false }"> <p class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-4 pb-2 text-center mt-2"> Create your free account </p> <div class="mb-3 mt-10" x-show="!showEmailForm"> <div class="mt-6 text-center mx-auto max-w-sm"> <a x-data @click="$store.signInMethod.trackSignIn('google')" x-tooltip="Last used" x-tooltip-position="left" x-tooltip-display="$store.signInMethod.method === 'google'" href="https://quizgecko.com/auth/google/redirect" class="px-5 py-3 text-md rounded-lg w-full bg-blue-600 dark:border-blue-600 hover:bg-blue-700 hover:border-blue-600 active:bg-blue-100 focus:border-blue-600 focus:shadow-outline-gray text-surface-0 disabled:bg-blue-200 disabled:text-surface-3 inline-flex justify-center font-bold border shadow-sm disabled:cursor-not-allowed cursor-pointer disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mt-1 sm:w-full"> <svg class="w-6 h-6 mr-1" viewBox="0 0 533.5 544.3"> <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"></path> <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"></path> <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"></path> <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"></path> </svg> <span class="ml-2"> Continue with Google </span> </a> </div> <div class="mt-2 text-center mx-auto max-w-sm"> <a href="https://quizgecko.com/auth/apple/redirect" x-data @click="$store.signInMethod.trackSignIn('apple')" x-tooltip-position="left" x-tooltip="Last used" x-tooltip-display="$store.signInMethod.method === 'apple'" class="px-5 py-3 text-md rounded-lg w-full dark:border-elevated-3 hover:bg-elevated-3 hover:border-black active:bg-surface-3 focus:border-black focus:shadow-outline-gray text-surface-0 disabled:text-surface-3 disabled:bg-surface-4 inline-flex justify-center font-bold border shadow-sm disabled:cursor-not-allowed cursor-pointer disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 mt-1 sm:w-full bg-black"> <svg class="w-5 h-5 mr-0.5 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"> </path> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"> </path> </svg> <span class="ml-2"> Sign in with Apple </span> </a> </div> <div class="text-center mt-8"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" x-data="" x-tooltip="Last used" x-tooltip-position="left" x-tooltip-display="$store.signInMethod.method === 'email'" color="secondary" type="button" @click="showEmailForm = true; $store.signInMethod.trackSignIn('email')" type="button"> or continue with email </button> </div> </div> <form method="POST" action="https://quizgecko.com/register" class="" x-show="showEmailForm"> <input type="hidden" name="_token" value="3M4UbhxgUA09i0ajWAr1ttPJ2jDsSdwMtmgxLVRM" autocomplete="off"> <div class="mt-2 mb-6"> <button class="px-3 py-2 text-sm rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" color="light" size="sm" @click="showEmailForm = false" type="button"> ← Back </button> </div>  <div> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="name"> Your Name </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="name" type="text" name="name" required="required" autofocus="autofocus"> </div>  <div class="mt-4"> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="email"> Email </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="email" type="email" name="email" required="required"> </div>  <div class="mt-4"> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="password"> Password </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="password" type="password" name="password" required="required" autocomplete="new-password"> </div>  <div class="mt-4"> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="password_confirmation"> Confirm Password </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="password_confirmation" type="password" name="password_confirmation" required="required"> </div> <div class="flex items-center justify-end mt-4"> <a class="text-sm text-elevated-1 underline hover:text-gray-900 dark:text-surface-5 dark:hover:text-surface-3" href="https://quizgecko.com/login"> Already registered? </a> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center ml-4" type="submit" type="button"> Verify email → </button> </div> </form> <div class="mt-12 text-center max-w-sm mx-auto"> <p class="text-sm text-surface-6 "> By continuing, you agree to Quizgecko's <a class="underline" target="_blank" href="https://quizgecko.com/terms">Terms of Service</a> and <a href="https://quizgecko.com/privacy-policy" class="underline" target="_blank" rel="noopener noreferrer">Privacy Policy</a>. </p> </div> </div> <div class="p-8 bg-surface-2 dark:bg-elevated-4"> <div class="mx-auto max-w-sm px-2 mt-4"> <p class="font-semibold text-elevated-1 text-lg text-center dark:text-surface-5"> Trusted by top students and educators worldwide </p> </div> <div class="mb-5 -mt-6"> <div class="mx-auto max-w-7xl px-6 lg:px-8 mt-8"> <div class="grid grid-cols-2 gap-8 lg:grid-cols-5"> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-16 w-auto object-contain" src="https://quizgecko.com/images/logos/universities/stanford-light.png" alt="Stanford" width="158" height="48"> <img class="hidden dark:block max-h-16 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/stanford-dark.png" alt="Stanford" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-light.png" alt="Princeton" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-dark.png" alt="Princeton" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-light.png" alt="Yale" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-dark.png" alt="Yale" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-light.png" alt="Berkeley" width="158" height="48"> <img class="hidden dark:block max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-dark.png" alt="Berkeley" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-2 lg:col-span-1"> <img class="block dark:hidden max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-light.png" alt="Oxford" width="158" height="48"> <img class="hidden dark:block max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-dark.png" alt="Oxford" width="158" height="48"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="modal-confirm" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'confirm' ? show = true : null" x-on:close.stop="show = false" x-on:close-modal.window="$event.detail == 'confirm' ? show = false : null" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside=show=false class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="show = false" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data> <h3 class="text-lg font-semibold text-elevated-3 pb-2" x-text="$store.confirmModal.title"></h3> <p class="mt-3 text-elevated-1 dark:text-surface-5" x-html="$store.confirmModal.message"></p> <div class="mt-6 flex justify-end space-x-3"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" color="secondary" @click="$store.confirmModal.onCancel()" type="button"> Cancel </button> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" @click="$store.confirmModal.onOk()" type="button"> OK </button> </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.store('confirmModal', { open: false, title: '', message: '', onOk: () => {}, onCancel: () => {}, show(title, message) { window.dispatchEvent(new CustomEvent('open-modal', { detail: 'confirm' })); this.title = title; this.message = message; this.open = true; }, hide() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'confirm' })); this.open = false; } }); }); window.confirmModal = (title, message) => { return new Promise((resolve) => { const confirmModal = Alpine.store('confirmModal'); confirmModal.show(title, message); confirmModal.onOk = () => { confirmModal.hide(); resolve(true); }; confirmModal.onCancel = () => { confirmModal.hide(); resolve(false); }; }); }; </script> <div x-data="{ notifications: [], add(e) { if (!e.detail.type) { e.detail.type = 'success' } this.notifications.push({ id: e.timeStamp, type: e.detail.type, content: e.detail.content, title: e.detail.title, linkText: e.detail.linkText, linkUrl: e.detail.linkUrl, }) }, remove(notification) { this.notifications = this.notifications.filter(i => i.id !== notification.id) }, }" @notify.window="add($event)" class="fixed top-2 right-0 z-50" role="status" aria-live="polite">  <div x-show="notifications.length > 0" x-transition class="flex w-full min-w-[300px] max-w-xs xl:max-w-sm flex-col space-y-4 pr-4 pb-4 sm:justify-start">  <template x-for="notification in notifications" :key="notification.id"> <div x-data="{ show: false, init() { this.$nextTick(() => this.show = true) setTimeout(() => this.transitionOut(), 6500) }, transitionOut() { this.show = false setTimeout(() => this.remove(this.notification), 400) }, }" x-show="show" x-transition.duration.300ms class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-surface-0 dark:bg-elevated-4 shadow-lg ring-1 ring-surface-4 dark:ring-elevated-4 ring-opacity-5 p-4"> <div class="flex items-start">  <div x-show="notification.type === 'info'" class="flex-shrink-0"> <svg class="w-6 h-6 text-surface-6 dark:text-elevated-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z"/></svg> <span class="sr-only"> Information: </span> </div> <div x-show="notification.type === 'success'" class="flex-shrink-0"> <svg class="w-6 h-6 text-green-400 dark:text-success-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/></svg> <span class="sr-only"> Success: </span> </div> <div x-show="notification.type === 'error'" class="flex-shrink-0"> <svg class="w-6 h-6 text-red-400 dark:text-error-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"/></svg> <span class="sr-only"> Error: </span> </div>  <div class="ml-3 w-0 flex-1 pt-0.5"> <p x-text="notification.title" x-show="notification.title" class="text-sm font-semibold text-elevated-3 dark:text-surface-4 mb-1"></p> <p x-text="notification.content" class="text-sm text-elevated-2 dark:text-surface-5"></p> <div class="mt-2 flex" x-show="notification.linkText"> <a class="px-3 py-2 text-sm rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="link" target="_blank" x-text="notification.linkText" size="sm" x-bind:href="notification.linkUrl"> </a> </div> </div>  <div class="ml-4 flex flex-shrink-0"> <button @click="transitionOut()" type="button" class="inline-flex text-surface-6 dark:text-elevated-0"> <svg aria-hidden class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> <span class="sr-only">Close notification</span> </button> </div> </div> </div> </template> </div> </div> <footer aria-labelledby="footer-heading"> <p id="footer-heading" class="sr-only">Footer</p> <div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-28"> <div class="xl:grid xl:grid-cols-3 xl:gap-10"> <div class="mt-10 xl:mt-0"> <img class="w-8 rounded-md" src="https://quizgecko.com/images/icon-small.png" alt=""> <div class="mt-4 border-elevated-4/10 pt-4 md:flex md:items-center md:justify-between"> <div class="flex space-x-6 md:order-2"> <a href="https://discord.gg/HsRXwQ3S7Z" target="_blank" class="text-surface-6 hover:text-gray-500"> <span class="sr-only">Discord</span> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M247.51,174.39,218,58a16.08,16.08,0,0,0-13-11.88l-36.06-5.92a16.22,16.22,0,0,0-18.26,11.88l-.21.85a4,4,0,0,0,3.27,4.93,155.62,155.62,0,0,1,24.41,5.62,8.2,8.2,0,0,1,5.62,9.7,8,8,0,0,1-10.19,5.64,155.4,155.4,0,0,0-90.8-.1,8.22,8.22,0,0,1-10.28-4.81,8,8,0,0,1,5.08-10.33,156.85,156.85,0,0,1,24.72-5.72,4,4,0,0,0,3.27-4.93l-.21-.85A16.21,16.21,0,0,0,87.08,40.21L51,46.13A16.08,16.08,0,0,0,38,58L8.49,174.39a15.94,15.94,0,0,0,9.06,18.51l67,29.71a16.17,16.17,0,0,0,21.71-9.1l3.49-9.45a4,4,0,0,0-3.27-5.35,158.13,158.13,0,0,1-28.63-6.2,8.2,8.2,0,0,1-5.61-9.67,8,8,0,0,1,10.2-5.66,155.59,155.59,0,0,0,91.12,0,8,8,0,0,1,10.19,5.65,8.19,8.19,0,0,1-5.61,9.68,157.84,157.84,0,0,1-28.62,6.2,4,4,0,0,0-3.27,5.35l3.49,9.45a16.18,16.18,0,0,0,21.71,9.1l67-29.71A15.94,15.94,0,0,0,247.51,174.39ZM92,152a12,12,0,1,1,12-12A12,12,0,0,1,92,152Zm72,0a12,12,0,1,1,12-12A12,12,0,0,1,164,152Z"/></svg> </a> <a href="https://www.tiktok.com/@quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Tiktok</span> <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"> </path> </svg> </a> <a href="https://instagram.com/quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Instagram</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" /> </svg> </a> <a href="https://twitter.com/Quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">X</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" /> </svg> </a> <a href="https://www.facebook.com/profile.php?id=61550782041398" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Facebook</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /> </svg> </a> <a target="_blank" href="mailto:hello@quizgecko.com" class="text-surface-6 cursor-pointer hover:text-elevated-2 mr-2 rtl:ml-2"> <span class="sr-only">Email</span> <svg class="inline-block w-6 h-7 text-surface-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"/></svg> </a> <a target="_blank" href="https://chrome.google.com/webstore/detail/quizgecko/jipdeflholipfmimeegaphokjfhkbbpl" class="text-surface-6 cursor-pointer hover:text-elevated-2 mr-2 rtl:ml-2"> <span class="sr-only">Chrome</span> <svg class="w-6 h-6 text-surface-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="4"></circle> <line x1="21.17" y1="8" x2="12" y2="8"> </line> <line x1="3.95" y1="6.06" x2="8.54" y2="14"> </line> <line x1="10.88" y1="21.94" x2="15.46" y2="14"> </line> </svg> </a> </div> </div> <div class="flex gap-3 mt-6 -ml-1"> <a href="https://apple.co/4a1UzYI" title="" class="inline-flex items-center justify-center w-full text-left text-surface-0 bg-elevated-4 dark:bg-elevated-2 hover:bg-elevated-1 rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-300 px-2 py-1.5 sm:w-auto" role="button"> <svg aria-hidden="true" class="h-8 w-8 sm:w-10 sm:h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z"> </path> </svg> <div class="ml-2.5"> <span class="block text-xs font-normal leading-none"> Download on the </span> <span class="block text-sm font-bold leading-tight"> App Store </span> </div> </a> <a href="https://bit.ly/quizgecko-android" title="" class="inline-flex items-center justify-center w-full text-left text-surface-0 bg-elevated-4 dark:bg-elevated-2 hover:bg-elevated-1 rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-300 px-2 py-1.5 sm:w-auto" role="button"> <svg aria-hidden="true" class="h-8 w-8 sm:w-10 sm:h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="m12.954 11.616 2.957-2.957L6.36 3.291c-.633-.342-1.226-.39-1.746-.016l8.34 8.341zm3.461 3.462 3.074-1.729c.6-.336.929-.812.929-1.34 0-.527-.329-1.004-.928-1.34l-2.783-1.563-3.133 3.132 2.841 2.84zM4.1 4.002c-.064.197-.1.417-.1.658v14.705c0 .381.084.709.236.97l8.097-8.098L4.1 4.002zm8.854 8.855L4.902 20.91c.154.059.32.09.495.09.312 0 .637-.092.968-.276l9.255-5.197-2.666-2.67z"> </path> </svg> <div class="ml-2.5"> <span class="block text-xxs font-normal leading-none"> Download on </span> <span class="block text-sm font-bold leading-tight"> Google Play </span> </div> </a> </div> </div> <div class="mt-16 grid grid-cols-2 xl:col-span-2 xl:mt-0"> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Solutions </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/plans?offer=teacher" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">For Schools</a> </li> <li> <a href="https://quizgecko.com/for/business" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">For Business</a> </li> <li> <a href="https://quizgecko.com/plans?offer=student" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">For Students</a> </li> <li> <a href="https://quizgecko.com/mobile" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Mobile Apps</a> </li> </ul> </div> <div class="mt-10 md:mt-0"> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Account </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/library" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">My Library</a> </li> <li> <a href="https://quizgecko.com/profile" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">My Profile</a> </li> <li> <a href="https://quizgecko.com/billing" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Billing</a> </li> <li> <a href="https://quizgecko.com/features" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Features</a> </li> </ul> </div> </div> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Resources </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/blog" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Blog</a> </li> <li> <a href="/api" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">API</a> </li> <li> <a href="https://help.quizgecko.com" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Help Center</a> </li> <li> <a href="https://quizgecko.com/discover" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Browse Lessons</a> </li> </ul> </div> <div class="mt-10 md:mt-0"> <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-surface-5"> Policies </p> <ul role="list" class="mt-6 space-y-4"> <li> <a href="https://quizgecko.com/terms" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Terms</a> </li> <li> <a href="https://quizgecko.com/privacy-policy" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Privacy</a> </li> <li> <a href="https://quizgecko.com/copyright" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">Copyright</a> </li> <li> <a href="https://quizgecko.com/legal" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6">More...</a> </li> </ul> </div> </div> </div> </div> </div> <div class="mt-8 border-t border-elevated-4/10 pt-4 md:flex md:items-center md:justify-between"> <div class="text-center mx-auto max-w-xl mt-4 mb-8 text-elevated-0 dark:text-surface-6 text-sm "> <p class="mb-2 text-gray-900 dark:text-surface-5">Change Language</p> <div class="flex-wrap justify-center pt-8 sm:justify-start sm:pt-0 "> <span class="ml-2 mr-2 text-elevated-2 dark:text-surface-5">English</span> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/fr">French</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/de">German</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/es">Spanish</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/pt">Portuguese</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/hi">Hindi</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/ko">Korean</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/zh">Chinese</a> </div> </div> </div> </footer> </div> </body> </html> <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="d9a6b7775026ad1ee541f50c-|49" defer></script>

Look at the web page and tick (✓) the tags used to create it.

Understand the Problem

Answer