The Art of Doing - Web Development for Beginners - Final Project Part 6 University Video

The Art of Doing - Web Development for Beginners - Final Project Part 6

Interactive Video

•

Information Technology (IT), Architecture

•

University

•

Hard

Quizizz Content

FREE Resource

The video tutorial guides viewers through creating a contact form for a T-shirt store project. It covers setting up the HTML structure, adding input fields, and styling the form using CSS. The tutorial also demonstrates how to handle form submissions with JavaScript, including form validation and displaying messages based on user input. The video concludes with a review of the entire project, emphasizing the foundational skills in HTML, CSS, and JavaScript for web development.

10 questions

Show all answers

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What is the purpose of the contact form in the final project?

To collect customer feedback

To process payments

To display product details

To gather information to contact potential customers

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

Which HTML element is used to create a text input field for the user's full name?

</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group" data-v-2f4282c7><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex justify-between items-center flex-row flex-nowrap"><div class="flex justify-start items-stretch flex-row flex-nowrap"><div class="border-ds-dark-500-20 p-0 bg-transparent rounded-full w-full h-6"><div class="flex gap-1 justify-start items-center h-full flex-row flex-nowrap" data-testid="qt-indicator-inner"><p class="text-ds-dark-200 text-content-small font-medium">3. </p><div class="bg-transparent p-0 rounded-full w-auto h-auto relative"><div class="flex justify-center items-center w-full h-full flex-row flex-nowrap"></div></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="qt-indicator-text">MULTIPLE CHOICE QUESTION</p></div></div></div><div class="flex group-hover:hidden gap-2 justify-start items-stretch flex-row flex-nowrap"><p class="text-ds-dark-200 text-content-small font-medium">30 sec • 1 pt</p></div><div class="hidden group-hover:block w-auto h-auto"><div class="flex gap-1 justify-start items-stretch flex-row flex-nowrap"><button type="button" aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-1 px-3 border-ds-dark-500-20 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button type="button" aria-label="Edit" class="bg-ds-light-500 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-1 px-3 border-ds-lilac-500 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Edit</p></div></div></button></div></div></div></div><div class="flex gap-1 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>What method is set for the form to ensure data is not displayed in the URL?</p></div></div></div></div><div class="grid w-full gap-2" style="grid-template-rows:repeat(undefined, minmax(0, max-content));grid-template-columns:repeat(2, minmax(0, 1fr));" data-v-2f4282c7><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>GET</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>POST</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>PUT</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>DELETE</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group" data-v-2f4282c7><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex justify-between items-center flex-row flex-nowrap"><div class="flex justify-start items-stretch flex-row flex-nowrap"><div class="border-ds-dark-500-20 p-0 bg-transparent rounded-full w-full h-6"><div class="flex gap-1 justify-start items-center h-full flex-row flex-nowrap" data-testid="qt-indicator-inner"><p class="text-ds-dark-200 text-content-small font-medium">4. </p><div class="bg-transparent p-0 rounded-full w-auto h-auto relative"><div class="flex justify-center items-center w-full h-full flex-row flex-nowrap"></div></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="qt-indicator-text">MULTIPLE CHOICE QUESTION</p></div></div></div><div class="flex group-hover:hidden gap-2 justify-start items-stretch flex-row flex-nowrap"><p class="text-ds-dark-200 text-content-small font-medium">30 sec • 1 pt</p></div><div class="hidden group-hover:block w-auto h-auto"><div class="flex gap-1 justify-start items-stretch flex-row flex-nowrap"><button type="button" aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-1 px-3 border-ds-dark-500-20 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button type="button" aria-label="Edit" class="bg-ds-light-500 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-1 px-3 border-ds-lilac-500 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Edit</p></div></div></button></div></div></div></div><div class="flex gap-1 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>Which CSS property is used to align items horizontally in a flex container?</p></div></div></div></div><div class="grid w-full gap-2" style="grid-template-rows:repeat(undefined, minmax(0, max-content));grid-template-columns:repeat(2, minmax(0, 1fr));" data-v-2f4282c7><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>flex-direction</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>justify-content</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>align-items</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>display</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group" data-v-2f4282c7><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex justify-between items-center flex-row flex-nowrap"><div class="flex justify-start items-stretch flex-row flex-nowrap"><div class="border-ds-dark-500-20 p-0 bg-transparent rounded-full w-full h-6"><div class="flex gap-1 justify-start items-center h-full flex-row flex-nowrap" data-testid="qt-indicator-inner"><p class="text-ds-dark-200 text-content-small font-medium">5. </p><div class="bg-transparent p-0 rounded-full w-auto h-auto relative"><div class="flex justify-center items-center w-full h-full flex-row flex-nowrap"></div></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="qt-indicator-text">MULTIPLE CHOICE QUESTION</p></div></div></div><div class="flex group-hover:hidden gap-2 justify-start items-stretch flex-row flex-nowrap"><p class="text-ds-dark-200 text-content-small font-medium">30 sec • 1 pt</p></div><div class="hidden group-hover:block w-auto h-auto"><div class="flex gap-1 justify-start items-stretch flex-row flex-nowrap"><button type="button" aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-1 px-3 border-ds-dark-500-20 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button type="button" aria-label="Edit" class="bg-ds-light-500 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-1 px-3 border-ds-lilac-500 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Edit</p></div></div></button></div></div></div></div><div class="flex gap-1 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>Which CSS property is used to set the background color of the contact form?</p></div></div></div></div><div class="grid w-full gap-2" style="grid-template-rows:repeat(undefined, minmax(0, max-content));grid-template-columns:repeat(2, minmax(0, 1fr));" data-v-2f4282c7><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>text-color</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>border-color</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>background-color</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>color</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group" data-v-2f4282c7><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex justify-between items-center flex-row flex-nowrap"><div class="flex justify-start items-stretch flex-row flex-nowrap"><div class="border-ds-dark-500-20 p-0 bg-transparent rounded-full w-full h-6"><div class="flex gap-1 justify-start items-center h-full flex-row flex-nowrap" data-testid="qt-indicator-inner"><p class="text-ds-dark-200 text-content-small font-medium">6. </p><div class="bg-transparent p-0 rounded-full w-auto h-auto relative"><div class="flex justify-center items-center w-full h-full flex-row flex-nowrap"></div></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="qt-indicator-text">MULTIPLE CHOICE QUESTION</p></div></div></div><div class="flex group-hover:hidden gap-2 justify-start items-stretch flex-row flex-nowrap"><p class="text-ds-dark-200 text-content-small font-medium">30 sec • 1 pt</p></div><div class="hidden group-hover:block w-auto h-auto"><div class="flex gap-1 justify-start items-stretch flex-row flex-nowrap"><button type="button" aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-1 px-3 border-ds-dark-500-20 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button type="button" aria-label="Edit" class="bg-ds-light-500 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-1 px-3 border-ds-lilac-500 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Edit</p></div></div></button></div></div></div></div><div class="flex gap-1 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>What is the purpose of the 'preventDefault' method in JavaScript?</p></div></div></div></div><div class="grid w-full gap-2" style="grid-template-rows:repeat(undefined, minmax(0, max-content));grid-template-columns:repeat(2, minmax(0, 1fr));" data-v-2f4282c7><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>To stop the form from being submitted</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>To prevent the default action of an event</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>To reload the page</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>To clear the form fields</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group" data-v-2f4282c7><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex justify-between items-center flex-row flex-nowrap"><div class="flex justify-start items-stretch flex-row flex-nowrap"><div class="border-ds-dark-500-20 p-0 bg-transparent rounded-full w-full h-6"><div class="flex gap-1 justify-start items-center h-full flex-row flex-nowrap" data-testid="qt-indicator-inner"><p class="text-ds-dark-200 text-content-small font-medium">7. </p><div class="bg-transparent p-0 rounded-full w-auto h-auto relative"><div class="flex justify-center items-center w-full h-full flex-row flex-nowrap"></div></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="qt-indicator-text">MULTIPLE CHOICE QUESTION</p></div></div></div><div class="flex group-hover:hidden gap-2 justify-start items-stretch flex-row flex-nowrap"><p class="text-ds-dark-200 text-content-small font-medium">30 sec • 1 pt</p></div><div class="hidden group-hover:block w-auto h-auto"><div class="flex gap-1 justify-start items-stretch flex-row flex-nowrap"><button type="button" aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-1 px-3 border-ds-dark-500-20 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button type="button" aria-label="Edit" class="bg-ds-light-500 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-1 px-3 border-ds-lilac-500 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Edit</p></div></div></button></div></div></div></div><div class="flex gap-1 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>How does the script determine whether to contact via email or phone?</p></div></div></div></div><div class="grid w-full gap-2" style="grid-template-rows:repeat(undefined, minmax(0, max-content));grid-template-columns:repeat(2, minmax(0, 1fr));" data-v-2f4282c7><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>By checking the user's location</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>By checking the time of day</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>By checking the user's age</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>By checking the preferred contact method selected</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group hidden" data-v-2f4282c7><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex justify-between items-center flex-row flex-nowrap"><div class="flex justify-start items-stretch flex-row flex-nowrap"><div class="border-ds-dark-500-20 p-0 bg-transparent rounded-full w-full h-6"><div class="flex gap-1 justify-start items-center h-full flex-row flex-nowrap" data-testid="qt-indicator-inner"><p class="text-ds-dark-200 text-content-small font-medium">8. </p><div class="bg-transparent p-0 rounded-full w-auto h-auto relative"><div class="flex justify-center items-center w-full h-full flex-row flex-nowrap"></div></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="qt-indicator-text">MULTIPLE CHOICE QUESTION</p></div></div></div><div class="flex group-hover:hidden gap-2 justify-start items-stretch flex-row flex-nowrap"><p class="text-ds-dark-200 text-content-small font-medium">30 sec • 1 pt</p></div><div class="hidden group-hover:block w-auto h-auto"><div class="flex gap-1 justify-start items-stretch flex-row flex-nowrap"><button type="button" aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-1 px-3 border-ds-dark-500-20 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button type="button" aria-label="Edit" class="bg-ds-light-500 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-1 px-3 border-ds-lilac-500 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Edit</p></div></div></button></div></div></div></div><div class="flex gap-1 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>What is the purpose of the 'querySelector' method in JavaScript?</p></div></div></div></div><div class="grid w-full gap-2" style="grid-template-rows:repeat(undefined, minmax(0, max-content));grid-template-columns:repeat(2, minmax(0, 1fr));" data-v-2f4282c7><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>To remove an element from the DOM</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>To select an element from the DOM</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>To add a new HTML element</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>To change the style of an element</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group hidden" data-v-2f4282c7><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex justify-between items-center flex-row flex-nowrap"><div class="flex justify-start items-stretch flex-row flex-nowrap"><div class="border-ds-dark-500-20 p-0 bg-transparent rounded-full w-full h-6"><div class="flex gap-1 justify-start items-center h-full flex-row flex-nowrap" data-testid="qt-indicator-inner"><p class="text-ds-dark-200 text-content-small font-medium">9. </p><div class="bg-transparent p-0 rounded-full w-auto h-auto relative"><div class="flex justify-center items-center w-full h-full flex-row flex-nowrap"></div></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="qt-indicator-text">MULTIPLE CHOICE QUESTION</p></div></div></div><div class="flex group-hover:hidden gap-2 justify-start items-stretch flex-row flex-nowrap"><p class="text-ds-dark-200 text-content-small font-medium">30 sec • 1 pt</p></div><div class="hidden group-hover:block w-auto h-auto"><div class="flex gap-1 justify-start items-stretch flex-row flex-nowrap"><button type="button" aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-1 px-3 border-ds-dark-500-20 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button type="button" aria-label="Edit" class="bg-ds-light-500 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-1 px-3 border-ds-lilac-500 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Edit</p></div></div></button></div></div></div></div><div class="flex gap-1 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>What was the issue that needed debugging in the JavaScript code?</p></div></div></div></div><div class="grid w-full gap-2" style="grid-template-rows:repeat(undefined, minmax(0, max-content));grid-template-columns:repeat(2, minmax(0, 1fr));" data-v-2f4282c7><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>Incorrect HTML structure</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>Spelling mistake in variable names</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>Incorrect form method</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>Missing CSS styles</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group hidden" data-v-2f4282c7><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex justify-between items-center flex-row flex-nowrap"><div class="flex justify-start items-stretch flex-row flex-nowrap"><div class="border-ds-dark-500-20 p-0 bg-transparent rounded-full w-full h-6"><div class="flex gap-1 justify-start items-center h-full flex-row flex-nowrap" data-testid="qt-indicator-inner"><p class="text-ds-dark-200 text-content-small font-medium">10. </p><div class="bg-transparent p-0 rounded-full w-auto h-auto relative"><div class="flex justify-center items-center w-full h-full flex-row flex-nowrap"></div></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="qt-indicator-text">MULTIPLE CHOICE QUESTION</p></div></div></div><div class="flex group-hover:hidden gap-2 justify-start items-stretch flex-row flex-nowrap"><p class="text-ds-dark-200 text-content-small font-medium">30 sec • 1 pt</p></div><div class="hidden group-hover:block w-auto h-auto"><div class="flex gap-1 justify-start items-stretch flex-row flex-nowrap"><button type="button" aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-1 px-3 border-ds-dark-500-20 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button type="button" aria-label="Edit" class="bg-ds-light-500 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-1 px-3 border-ds-lilac-500 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Edit</p></div></div></button></div></div></div></div><div class="flex gap-1 justify-start items-stretch flex-col flex-nowrap" data-v-2f4282c7><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>What is the final step in the video tutorial?</p></div></div></div></div><div class="grid w-full gap-2" style="grid-template-rows:repeat(undefined, minmax(0, max-content));grid-template-columns:repeat(2, minmax(0, 1fr));" data-v-2f4282c7><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>Styling the form</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>Debugging and finalizing the form</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>Creating a new HTML page</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-content-base font-medium text-wrap" color="dark.primary"><div><p>Adding more input fields</p></div></div></div></div></div></div></div></div></div><div class="bottom-0 right-0 left-0 absolute" data-testid="content-blocker" data-v-fde55780><div class="w-full h-155 content-blocker" data-v-fde55780><div class="flex gap-2 justify-center items-center w-full h-full flex-col flex-nowrap" data-v-fde55780><div class="bg-ds-light-500 rounded-admin-lg shadow-md w-120 h-auto" data-v-fde55780><div class="flex justify-center items-center flex-row flex-nowrap w-full" data-v-fde55780><div class="flex gap-0 justify-center items-start flex-col flex-nowrap w-full" data-v-fde55780><div class="flex justify-start items-stretch w-full h-full flex-col flex-nowrap" data-v-fde55780><div class="flex p-10 justify-start items-stretch w-full flex-col flex-nowrap"><section><h1 class="text-lg md:text-xl text-dark-2 font-semibold text-center" data-testid="auth-modal-welcome-title">Create a free account and access millions of resources</h1><p class="text-sm md:text-base text-dark-4"><span></span></p><div class="flex justify-between mt-2"><div class="flex items-center gap-1"><i class="fas fa-circle-check text-green text-xs"></i><span class="text-dark-4 text-xs">Create resources</span></div><div class="flex items-center gap-1"><i class="fas fa-circle-check text-green text-xs"></i><span class="text-dark-4 text-xs">Host any resource</span></div><div class="flex items-center gap-1"><i class="fas fa-circle-check text-green text-xs"></i><span class="text-dark-4 text-xs">Get auto-graded reports</span></div></div></section><section class="flex flex-col space-y-3 mt-4 w-full"><button role="button" class="text-sm md:text-base rounded w-full flex justify-between items-center py-2 px-4 shadow-sm border border-light-1 hover:shadow-md" data-testid="continue-with-Google"><span class="flex items-center space-x-4 md:justify-start"><img src="https://cf.quizizz.com/img/logos/google-logo-1.png" alt="Google" class="w-4 h-4 object-contain" loading="lazy" data-testid="continue-with-Google-logo"><span class="text-base font-semibold btn-label">Continue with Google</span></span><i class="fas fa-arrow-right text-dark-5 font-normal hover:text-lilac"></i></button><button role="button" class="text-sm md:text-base rounded w-full flex justify-between items-center py-2 px-4 shadow-sm border border-light-1 hover:shadow-md" data-testid="continue-with-Email"><span class="flex items-center space-x-4 md:justify-start"><img src="https://cf.quizizz.com/image/envelope-regular.png" alt="Email" class="w-4 h-4 object-contain" loading="lazy" data-testid="continue-with-Email-logo"><span class="text-base font-semibold btn-label">Continue with Email</span></span><i class="fas fa-arrow-right text-dark-5 font-normal hover:text-lilac"></i></button><button role="button" class="text-sm md:text-base rounded w-full flex justify-between items-center py-2 px-4 shadow-sm border border-light-1 hover:shadow-md" data-testid="continue-with-Classlink"><span class="flex items-center space-x-4 md:justify-start"><img src="https://cf.quizizz.com/img/logos/classlink-logo.png" alt="Classlink" class="w-4 h-4 object-contain" loading="lazy" data-testid="continue-with-Classlink-logo"><span class="text-base font-semibold btn-label">Continue with Classlink</span></span><i class="fas fa-arrow-right text-dark-5 font-normal hover:text-lilac"></i></button><button role="button" class="text-sm md:text-base rounded w-full flex justify-between items-center py-2 px-4 shadow-sm border border-light-1 hover:shadow-md" data-testid="continue-with-Clever"><span class="flex items-center space-x-4 md:justify-start"><img src="https://cf.quizizz.com/image/clever-logo.png" alt="Clever" class="w-4 h-4 object-contain" loading="lazy" data-testid="continue-with-Clever-logo"><span class="text-base font-semibold btn-label">Continue with Clever</span></span><i class="fas fa-arrow-right text-dark-5 font-normal hover:text-lilac"></i></button></section><span class="mt-4 text-dark-4 text-sm flex justify-center">or continue with</span><section class="flex flex-row justify-center mt-4 gap-4"><div class="flex flex-col items-center"><button role="button" class="w-10 h-10 flex items-center justify-center shadow-md rounded-sm cursor-pointer" style="background-color:inherit;" data-testid="continue-with-Microsoft"><img class="object-contain w-6 h-6" src="https://cf.quizizz.com/img/logos/ms-logo.png"></button><span class="text-dark-2 text-[10px] mt-1">Microsoft</span></div><div class="flex flex-col items-center"><button role="button" class="w-10 h-10 flex items-center justify-center shadow-md rounded-sm cursor-pointer" style="background-color:#222;" data-testid="continue-with-Apple"><img class="object-contain w-6 h-6" src="https://cf.quizizz.com/image/Apple.png"></button><span class="text-dark-2 text-[10px] mt-1">Apple</span></div><div class="flex flex-col items-center"><button role="button" class="w-10 h-10 flex items-center justify-center shadow-md rounded-sm cursor-pointer" style="background-color:#8854C0;" data-testid="continue-with-Others"><img class="object-contain w-6 h-6" src="https://cf.quizizz.com/image/shield-halved.png"></button><span class="text-dark-2 text-[10px] mt-1">Others</span></div></section></div><section class="mt-auto w-full"><section class="justify-center text-xs text-center text-dark-5 md:flex px-10 mb-4"><span>By signing up, you agree to our <a href='/tos' style='text-decoration: underline;'>Terms of Service</a> & <a href='/privacy' style='text-decoration: underline;'>Privacy Policy</a></span></section><section role="nudge" class="text-dark-2 py-4 flex items-center justify-center space-x-1 text-xs rounded-b-lg bg-light-6"><span class="xs-hidden">Already have an account?</span><button class="bg-lilac-faded rounded px-3 py-1 text-ds-lilac-600 text-xs font-semibold ml-2" type="button" data-testid="login-button-in-signup">Log in</button></section></section></div></div></div></div><button type="link" aria-label="Let me read it first" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-2 px-4 border-transparent rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer w-fit mx-auto mt-2 bg-none bg-transparent" data-testid="restrict-content-bypass-btn" data-v-fde55780><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><p class="text-ds-dark-200 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Let me read it first</p></div></div></button></div></div></div></div></div></div><div class="flex bg-ds-light-500 gap-4 p-8 rounded-admin-xl border border-ds-dark-500-20 justify-start items-stretch flex-row flex-nowrap"><div class="flex gap-3 max-w-40 justify-start items-start flex-col flex-nowrap" data-testid="similar-resources-identifier"><div class="flex min-h-16 min-w-16 max-w-16 rounded-full bg-ds-info-100 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center w-10 h-10 text-3xl text-ds-info-600 flex-shrink-0" data-testid><i class="fas fa-calculator-simple"></i></div></div><h2 class="text-header-base font-semibold">Similar Resources on Wayground</h2><button type="button" aria-label="View all" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-2 px-4 border-ds-dark-500-20 rounded-admin-lg min-w-20 border bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer" data-testid="recommendations-see-more-button"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">View all</p><div class="flex justify-center items-center h-4 text-xs text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-arrow-right"></i></div></div></div></button></div><div class="overflow-hidden w-auto h-auto flex-grow flex-shrink basis-full relative" data-testid="recommendation-container" data-v-47700e01><div class="h-full relative" data-v-17c94643 data-v-47700e01><div class="scroll-container w-auto h-full" style="height:;max-height:70vh;" data-v-17c94643><div class="content h-full" data-v-17c94643><div class="flex gap-4 justify-start items-stretch flex-row flex-nowrap"><a href="/admin/video-quiz/67b6f8bf0278e4861da23d73/modern-web-design-with-html5-css3-and-javascript-creating-an-html-form-using-cascading-style-sheets-css-grid" data-testid="activity-recommendation-card-67b6f8bf0278e4861da23d73" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Modern Web Design with HTML5, CSS3, and JavaScript - Creating an HTML Form Using Cascading Style Sheets (CSS) Grid" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 8 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.b8fh3daeuyq" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Modern Web Design with HTML5, CSS3, and JavaScript - Creating an HTML Form Using Cascading Style Sheets (CSS) Grid</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/677391baa62f0f241b1b636b/powershell-for-automating-administration-report-consolidation-template-overview" data-testid="activity-recommendation-card-677391baa62f0f241b1b636b" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="PowerShell for Automating Administration - Report Consolidation – Template Overview" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 8 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.ydza561qhvi" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">PowerShell for Automating Administration - Report Consolidation – Template Overview</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/6776f0d9b2cf9cf48ab0f8eb/the-complete-guide-to-aspnet-core-mvc-net-5-designing-book-index-page-part-2" data-testid="activity-recommendation-card-6776f0d9b2cf9cf48ab0f8eb" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="The Complete Guide to ASP.NET Core MVC (.NET 5) - Designing Book Index Page - Part 2" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 8 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.rtiatyk2oq" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">The Complete Guide to ASP.NET Core MVC (.NET 5) - Designing Book Index Page - Part 2</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67a837a43a35662da80b586f/web-scraping-tutorial-with-scrapy-and-python-for-beginners-how-web-scraping-works" data-testid="activity-recommendation-card-67a837a43a35662da80b586f" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Web Scraping Tutorial with Scrapy and Python for Beginners - How Web Scraping Works" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 6 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.c770ifieaav" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Web Scraping Tutorial with Scrapy and Python for Beginners - How Web Scraping Works</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67b6f60b0278e4861da23cc1/building-a-responsive-application-with-bootstrap-video-2" data-testid="activity-recommendation-card-67b6f60b0278e4861da23cc1" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Building a Responsive Application with Bootstrap (Video 2)" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 8 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.90rratd3h1s" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Building a Responsive Application with Bootstrap (Video 2)</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/677435a1a5d02e02535ff91d/modern-html-and-css-from-the-beginning-including-sass-welcome-to-the-course" data-testid="activity-recommendation-card-677435a1a5d02e02535ff91d" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Modern HTML and CSS from the Beginning (Including Sass) - Welcome To The Course" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 6 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.uftukdh5dze" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Modern HTML and CSS from the Beginning (Including Sass) - Welcome To The Course</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/6774d5d31c9730c88fc678ec/the-art-of-doing-web-development-for-beginners-store-front-preview" data-testid="activity-recommendation-card-6774d5d31c9730c88fc678ec" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="The Art of Doing - Web Development for Beginners - Store Front Preview" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 6 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.ccw2gzf05ce" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">The Art of Doing - Web Development for Beginners - Store Front Preview</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/6774265eb673fee414dce573/the-full-stack-web-development-project-building-a-simple-html-template" data-testid="activity-recommendation-card-6774265eb673fee414dce573" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="The Full Stack Web Development - Project - Building A Simple HTML Template" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 11 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.2ftyplkktbw" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">The Full Stack Web Development - Project - Building A Simple HTML Template</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a></div></div></div><div class="left-0 bottom-0 absolute w-full" data-v-17c94643><div class="bg-ds-dark-500-50 border border-ds-light-500-20 rounded-admin-lg w-auto h-2 x-thumb relative cursor-grab" style="width:0%;left:0%;opacity:0;" data-v-17c94643></div></div></div><div class="right-0 top-0 bottom-0 absolute gradient-right" data-v-47700e01><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-47700e01><button type="button" aria-label="chevron-right" class="bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 w-8 h-8 border-ds-dark-500-20 border rounded-admin-lg border bg-clip-padding relative rounded flex items-center justify-center cursor-pointer focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-ds-lilac-500-40 shrink-0" data-testid="carousel-right-button" data-v-47700e01><div class="flex visible justify-center items-center h-full flex-row flex-nowrap"><div class="flex justify-center items-center w-5 h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-chevron-right"></i></div></div></button></div></div></div></div><div class="flex bg-ds-light-500 gap-4 p-8 rounded-admin-xl border border-ds-dark-500-20 justify-start items-stretch flex-row flex-nowrap"><div class="flex gap-3 max-w-40 justify-start items-start flex-col flex-nowrap" data-testid="popular-resources-identifier"><div class="flex min-h-16 min-w-16 max-w-16 rounded-full bg-ds-super-100 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center w-10 h-10 text-3xl text-ds-super-600 flex-shrink-0" data-testid><i class="fas fa-star"></i></div></div><h2 class="text-header-base font-semibold">Popular Resources on Wayground</h2></div><div class="overflow-hidden w-auto h-auto flex-grow flex-shrink basis-full relative" data-testid="recommendation-container" data-v-47700e01><div class="h-full relative" data-v-17c94643 data-v-47700e01><div class="scroll-container w-auto h-full" style="height:;max-height:70vh;" data-v-17c94643><div class="content h-full" data-v-17c94643><div class="flex gap-4 justify-start items-stretch flex-row flex-nowrap"><a href="/admin/quiz/5dcaf57ad15446001b403259/equations-of-circles" data-testid="activity-popular-resource-card-5dcaf57ad15446001b403259" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Equations of Circles" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 25 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.q0ce2v4i569" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Equations of Circles</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>10th - 11th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/68671206841c035e47aeede4/week-5-memory-builder-1-multiplication-and-division-facts" data-testid="activity-popular-resource-card-68671206841c035e47aeede4" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Week 5 Memory Builder 1 (Multiplication and Division Facts)" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 30 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.n0eux7alq3" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Week 5 Memory Builder 1 (Multiplication and Division Facts)</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>9th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/6849b3d89c6a82fefd0b03c6/unit-3-summative-summer-school-immune-system" data-testid="activity-popular-resource-card-6849b3d89c6a82fefd0b03c6" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Unit 3 Summative - Summer School: Immune System" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 33 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.sd4eyvhu6q" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Unit 3 Summative - Summer School: Immune System</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>10th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/57e8225d8ef1ea4b5ae59915/writing-and-identifying-ratios-practice" data-testid="activity-popular-resource-card-57e8225d8ef1ea4b5ae59915" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Writing and Identifying Ratios Practice" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 10 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.mr7otrrp8w" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Writing and Identifying Ratios Practice</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>5th - 6th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/5dc359872829d0001b60162e/prime-and-composite-numbers" data-testid="activity-popular-resource-card-5dc359872829d0001b60162e" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Prime and Composite Numbers" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 36 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.ld2jklepvue" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Prime and Composite Numbers</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>5th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/5dcecd522fee37001bc1342c/exterior-and-interior-angles-of-polygons" data-testid="activity-popular-resource-card-5dcecd522fee37001bc1342c" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Exterior and Interior angles of Polygons" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 14 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.g6jps3j6zf6" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Exterior and Interior angles of Polygons</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>8th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/6865a4679154fb31267f3e3a/camp-re-cap-week-1-no-regression" data-testid="activity-popular-resource-card-6865a4679154fb31267f3e3a" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Camp Re-cap Week 1 (no regression)" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 37 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.p00og6shwyo" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Camp Re-cap Week 1 (no regression)</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>9th - 12th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/675fbcb740406ce6cea2220d/biology-semester-1-review" data-testid="activity-popular-resource-card-675fbcb740406ce6cea2220d" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Biology Semester 1 Review" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 46 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.ecxaj5xzr4" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Biology Semester 1 Review</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>10th Grade</p></div></div></div></div></div></a></div></div></div><div class="left-0 bottom-0 absolute w-full" data-v-17c94643><div class="bg-ds-dark-500-50 border border-ds-light-500-20 rounded-admin-lg w-auto h-2 x-thumb relative cursor-grab" style="width:0%;left:0%;opacity:0;" data-v-17c94643></div></div></div><div class="right-0 top-0 bottom-0 absolute gradient-right" data-v-47700e01><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-47700e01><button type="button" aria-label="chevron-right" class="bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 w-8 h-8 border-ds-dark-500-20 border rounded-admin-lg border bg-clip-padding relative rounded flex items-center justify-center cursor-pointer focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-ds-lilac-500-40 shrink-0" data-testid="carousel-right-button" data-v-47700e01><div class="flex visible justify-center items-center h-full flex-row flex-nowrap"><div class="flex justify-center items-center w-5 h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-chevron-right"></i></div></div></button></div></div></div></div><div class="overflow-hidden w-auto h-auto flex-grow flex-shrink basis-full relative" data-testid="recommendation-container" data-v-47700e01><div class="h-full relative" data-v-17c94643 data-v-47700e01><div class="scroll-container w-auto h-full" style="height:;max-height:70vh;" data-v-17c94643><div class="content h-full" data-v-17c94643><div class="flex gap-4 justify-start items-stretch flex-row flex-nowrap"><div class="flex-shrink-0"><a href="/library/math/geometry/measurement-and-dimension/volume/volume-applications/measuring-and-estimating-volume-of-cones/solving-mathematical-andor-real-world-problems-involving-volume-of-cones" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-0"><div class="flex justify-center items-center h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-500 select-none text-control-base font-semibold">Solving mathematical and/or real-world problems involving volume of cones</span><div class="sr-only"><input type="checkbox" aria-labelledby="Solving mathematical and/or real-world problems involving volume of cones-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/ela/speaking-and-listening/digital-communication/online-collaboration" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-1"><div class="flex justify-center items-center h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-500 select-none text-control-base font-semibold">Online collaboration</span><div class="sr-only"><input type="checkbox" aria-labelledby="Online collaboration-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/social-studies/contemporary-global-issues/global-economy-and-development/technology-and-society/cybersecurity" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-2"><div class="flex justify-center items-center h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-500 select-none text-control-base font-semibold">Cybersecurity</span><div class="sr-only"><input type="checkbox" aria-labelledby="Cybersecurity-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/ela/speaking-and-listening/presentation/planning/develop-supporting-materials" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-3"><div class="flex justify-center items-center h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-500 select-none text-control-base font-semibold">Develop supporting materials</span><div class="sr-only"><input type="checkbox" aria-labelledby="Develop supporting materials-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/math/algebra/roots-and-radicals/understanding-roots/using-symbols-for-solutions-to-equations/using-the-cube-root-symbol-for-solutions-to-equations-of-the-form-x3-p" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-4"><div class="flex justify-center items-center h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-500 select-none text-control-base font-semibold">Using the cube root symbol for solutions to equations of the form x^3 = p</span><div class="sr-only"><input type="checkbox" aria-labelledby="Using the cube root symbol for solutions to equations of the form x^3 = p-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/math/number-system/vectors/vector-operations/adding-and-subtracting-vectors/subtracting-vectors-component-wise-including-determining-magnitude-and-direction-of-the-resultant-vector" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-5"><div class="flex justify-center items-center h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-500 select-none text-control-base font-semibold">Subtracting vectors component-wise (including determining magnitude and direction of the resultant vector)</span><div class="sr-only"><input type="checkbox" aria-labelledby="Subtracting vectors component-wise (including determining magnitude and direction of the resultant vector)-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/ela/reading/literature/theory-and-criticism/rhetorical-analysis/evaluate-subtle-persuasive-techniques" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-6"><div class="flex justify-center items-center h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-500 select-none text-control-base font-semibold">Evaluate subtle persuasive techniques</span><div class="sr-only"><input type="checkbox" aria-labelledby="Evaluate subtle persuasive techniques-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/science/physics/electromagnetism/electromagnetic-theory/boundary-value-problems" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-7"><div class="flex justify-center items-center h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-500 select-none text-control-base font-semibold">Boundary value problems</span><div class="sr-only"><input type="checkbox" aria-labelledby="Boundary value problems-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/math/geometry/area/circles/circle-area-circumference-formulas-usage" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-8"><div class="flex justify-center items-center h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-500 select-none text-control-base font-semibold">Circle Area & Circumference Formulas Usage</span><div class="sr-only"><input type="checkbox" aria-labelledby="Circle Area & Circumference Formulas Usage-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/science/engineering-and-technology/engineering-design-process/solution-development" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-9"><div class="flex justify-center items-center h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-500 select-none text-control-base font-semibold">Solution development</span><div class="sr-only"><input type="checkbox" aria-labelledby="Solution development-label"></div></div></a></div></div></div></div><div class="left-0 bottom-0 absolute w-full" data-v-17c94643><div class="bg-ds-dark-500-50 border border-ds-light-500-20 rounded-admin-lg w-auto h-2 x-thumb relative cursor-grab" style="width:0%;left:0%;opacity:0;" data-v-17c94643></div></div></div><div class="right-0 top-0 bottom-0 absolute gradient-right" data-v-47700e01><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-47700e01><button type="button" aria-label="chevron-right" class="bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 w-8 h-8 border-ds-dark-500-20 border rounded-admin-lg border bg-clip-padding relative rounded flex items-center justify-center cursor-pointer focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-ds-lilac-500-40 shrink-0" data-testid="carousel-right-button" data-v-47700e01><div class="flex visible justify-center items-center h-full flex-row flex-nowrap"><div class="flex justify-center items-center w-5 h-5 text-sm text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-chevron-right"></i></div></div></button></div></div></div></div></div></div><footer class="w-full py-8 mt-auto footer-container bg-light-3" data-v-32684c53><div class="px-4 mx-auto footer-inner-wrapper max-w-320 md:px-10" data-v-32684c53><div class="flex flex-col justify-between w-full" data-v-32684c53><div class="flex flex-col md:flex-row" data-v-32684c53><div class="grid justify-between w-full footer-links-container grow md:grid-rows-1" data-v-32684c53></div></div><div class="flex flex-col-reverse items-center justify-center w-full mb-10 md:mb-0 md:flex-row md:justify-between md:items-end" data-v-32684c53><div class="flex flex-col items-center space-y-4 md:items-start md:mt-5" data-v-32684c53><div class="flex flex-row items-center space-x-4 footer-bottom-container" data-v-32684c53><p class="text-sm font-semibold copyright text-dark-4" data-v-32684c53> © 2025 Quizizz Inc. (DBA Wayground) </p><div class="social-links" data-v-32684c53><a href="https://twitter.com/quizizz" rel="noopener noreferrer" target="_blank" aria-label="Twitter" data-v-32684c53><i class="social-icon fab fa-twitter" data-v-32684c53></i></a><a href="https://facebook.com/quizizz" rel="noopener noreferrer" target="_blank" aria-label="Facebook" data-v-32684c53><i class="social-icon fab fa-facebook" data-v-32684c53></i></a><a href="https://instagram.com/quizizz" rel="noopener noreferrer" target="_blank" aria-label="Instagram" data-v-32684c53><i class="social-icon fab fa-instagram" data-v-32684c53></i></a><span class="block w-px h-5 bg-dark-5" data-v-32684c53></span><a href="/practice/sitemaps" rel="noopenner noreferrer" target="_blank" data-v-32684c53><span class="text-sm text-dark-3 hover:underline" data-v-32684c53><span data-v-32684c53>Sitemap</span></span></a></div></div></div><div class="flex items-center col-span-2 mt-12 mb-6 space-x-4 md:mb-0 md:mt-4 md:col-span-1" data-v-32684c53><label class="text-sm font-bold text-center text-dark-3 hidden md:block" data-v-32684c53><span data-v-32684c53>Get our app</span></label><div class="flex space-x-2" data-v-32684c53><a href="https://share.quizizz.com/nz4P08MhCM" rel="noopener noreferrer" class="transition-all hover:scale-105" target="_blank" aria-label="App Store" data-v-32684c53><img class="m-auto duration-100 ease-linear w-28 app-store app-link" alt="apple store" src="https://cf.quizizz.com/img/landing/apple%20app%20store.png" label="" height="34" width="112" loading="lazy" aria-hidden="true" data-v-32684c53></a><a href="https://share.quizizz.com/EBAH8OlhCM" rel="noopener noreferrer" class="transition-all hover:scale-105" target="_blank" aria-label="Google Store" data-v-32684c53><img class="m-auto duration-100 ease-linear w-28 play-store app-link" alt="google playstore" src="https://cf.quizizz.com/img/landing/google%20play.png" label="" loading="lazy" height="34" width="112" aria-hidden="true" data-v-32684c53></a></div></div></div></div></div></footer></main></div><div id="overlay-layer-1" class="z-1 absolute top-0 left-0"></div><div id="modal-layer-2" class="z-5 absolute top-0 left-0"></div><div id="modal-overlay-layer-3" class="z-10 absolute top-0 left-0"></div><div id="third-party-layer-4" class="z-20 absolute top-0 left-0"></div><div id="layer-1" class="z-1 absolute top-0 left-0"></div><div id="layer-2" class="z-5 absolute top-0 left-0"></div><div id="layer-3" class="z-10 absolute top-0 left-0"></div><div id="layer-4" class="z-20 absolute top-0 left-0"></div><div id="layer-5" class="z-50 absolute top-0 left-0"></div></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":2479,"once":2481,"_errors":2482,"serverRendered":5,"path":2484,"country":91,"region":2485,"nuxtSsrFeatureFlags":2486},["ShallowReactive",3],{"6Fd7tOpyo5":4,"6o8Uk4EAAv":75,"ZLD7uGD49Z":2336,"7wSZoTZccB":2420},{"success":5,"data":6,"time":74},true,{"quizzes":7,"total":70,"timeTaken":71,"experiment":72,"source":73},[8,19,26,33,41,48,55,62],{"id":9,"isSuper":10,"type":11,"info":12,"shouldIndex":10,"stats":17},"67b6f8bf0278e4861da23d73",false,"video-quiz",{"grade":13,"name":15,"slug":15,"image":16},[14,14],"13","Modern Web Design with HTML5, CSS3, and JavaScript - Creating an HTML Form Using Cascading Style Sheets (CSS) Grid","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/b824676e-64ac-4eaa-8554-7e9c18a0473f-v2",{"totalQuestions":18},8,{"id":20,"isSuper":10,"type":11,"info":21,"shouldIndex":10,"stats":25},"677391baa62f0f241b1b636b",{"grade":22,"name":23,"slug":23,"image":24},[14,14],"PowerShell for Automating Administration - Report Consolidation – Template Overview","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/f46c54dc-e0e1-4c36-b95d-7aa7bce859f0-v2",{"totalQuestions":18},{"id":27,"isSuper":10,"type":11,"info":28,"shouldIndex":10,"stats":32},"6776f0d9b2cf9cf48ab0f8eb",{"grade":29,"name":30,"slug":30,"image":31},[14,14],"The Complete Guide to ASP.NET Core MVC (.NET 5) - Designing Book Index Page - Part 2","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/dd52953b-6d30-4685-8e2f-669f6fc0fdd8-v2",{"totalQuestions":18},{"id":34,"isSuper":10,"type":11,"info":35,"shouldIndex":10,"stats":39},"67a837a43a35662da80b586f",{"grade":36,"name":37,"slug":37,"image":38},[14,14],"Web Scraping Tutorial with Scrapy and Python for Beginners - How Web Scraping Works","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/6418d6bb-f98e-421a-b69a-e2131f9423ef-v2",{"totalQuestions":40},6,{"id":42,"isSuper":10,"type":11,"info":43,"shouldIndex":10,"stats":47},"67b6f60b0278e4861da23cc1",{"grade":44,"name":45,"slug":45,"image":46},[14,14],"Building a Responsive Application with Bootstrap (Video 2)","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/66df2263-ca35-471b-a438-4380d26f1f71-v2",{"totalQuestions":18},{"id":49,"isSuper":10,"type":11,"info":50,"shouldIndex":10,"stats":54},"677435a1a5d02e02535ff91d",{"grade":51,"name":52,"slug":52,"image":53},[14,14],"Modern HTML and CSS from the Beginning (Including Sass) - Welcome To The Course","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/010f1f18-f917-43f2-9922-0071b383d497-v2",{"totalQuestions":40},{"id":56,"isSuper":10,"type":11,"info":57,"shouldIndex":10,"stats":61},"6774d5d31c9730c88fc678ec",{"grade":58,"name":59,"slug":59,"image":60},[14,14],"The Art of Doing - Web Development for Beginners - Store Front Preview","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/3a50d842-6313-404d-9e6a-94ed17840450-v2",{"totalQuestions":40},{"id":63,"isSuper":10,"type":11,"info":64,"shouldIndex":10,"stats":68},"6774265eb673fee414dce573",{"grade":65,"name":66,"slug":66,"image":67},[14,14],"The Full Stack Web Development - Project - Building A Simple HTML Template","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/94d58540-7aa1-431f-87db-d00ce3423191-v2",{"totalQuestions":69},11,513738,65,"quizPageRecoPublicSearch","recommended_search","2025-07-14T06:52:46.290358911Z",{"success":5,"message":76,"data":77,"time":2332,"meta":2333},"Ok",{"quiz":78,"draft":82},{"isTagged":10,"isLoved":10,"tagIds":79,"stats":80,"love":81,"cloned":10,"parentDetail":82,"deleted":10,"archived":10,"lifetimeAccess":10,"draftVersion":82,"publishedVersion":83,"isShared":10,"type":11,"_id":84,"createdBy":85,"info":103,"paidOrganization":2328,"createdAt":2329,"updated":2330,"premiumUse":2331,"shouldIndex":5,"hasDraftVersion":10,"hasPublishedVersion":5,"gameChangerBadge":82,"lock":82},[],{"played":81,"totalPlayers":81,"totalCorrect":81,"totalQuestions":81},0,null,"67ae7efb7786211ef4cf2e71","67ae7efb7786211ef4cf2e70",{"_id":86,"firstName":87,"lastName":88,"email":89,"occupation":90,"country":91,"preferences":92,"grades":94,"subject_tags":98,"media":102},"65cf12f6e8a17f8c0da51a59","Quizizz","Content","contentcatalog@quizizz.com","teacher","US",{"lang":93},"en",[40,95,18,96,97],7,9,10,[99,100,101],"Mathematics","English","Science","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/users/145bbecb-5aa3-4a13-9f05-393125fb3d1f-v2",{"lang":93,"aiGenerated":10,"qm":104,"visibility":5,"subjects":118,"topics":121,"subtopics":122,"grade":123,"gradeLevel":82,"deleted":10,"pref":124,"traits":125,"standardIds":127,"__v":128,"meta":129,"_id":83,"name":132,"image":133,"aiCreateMeta":82,"questions":134,"questionDrafts":622,"standards":82,"courses":82,"createdAt":623,"updated":624,"interactiveVideoProps":625,"cached":5,"isProfane":10,"whitelisted":5,"slug":132},{"67ae7f12363bf4923fb063f4":105,"67ae7f12363bf4923fb063f5":107,"67ae7f12363bf4923fb063f6":109,"67ae7f12363bf4923fb063f7":110,"67ae7f12363bf4923fb063f8":111,"67ae7f12363bf4923fb063f9":112,"67ae7f12363bf4923fb063fa":113,"67ae7f12363bf4923fb063fb":114,"67ae7f12363bf4923fb063fc":115,"67ae7f12363bf4923fb063fd":116,"67ae7f12363bf4923fb063fe":117},{"time":106},900000,{"time":108},30000,{"time":108},{"time":108},{"time":108},{"time":108},{"time":108},{"time":108},{"time":108},{"time":108},{"time":108},[119,120],"Information Technology (IT)","Architecture",[],[],[14,14],{"time":82},{"isQuizWithoutCorrectAnswer":10,"totalSlides":81,"totalComprehensionQuestions":126,"nonAnswerableQuestions":126},1,[],5,{"slot":130,"experiment":131},2,"main_main","The Art of Doing - Web Development for Beginners - Final Project Part 6","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/a42573b0-c695-4270-8c97-d2674c6f0055-v2",[135,194,240,283,325,368,410,453,495,537,580],{"structure":136,"standards":176,"topics":177,"isSuperParent":10,"standardIds":178,"aiGenerated":10,"__v":130,"teleportFrom":82,"cloned":82,"ver":179,"parent":82,"_id":180,"time":106,"published":5,"aiCreateMeta":82,"type":137,"comprehensionQuestionIds":181,"createdAt":192,"updated":193,"cached":5},{"kind":137,"answer":138,"settings":139,"marks":141,"query":142,"options":157,"explain":158,"theme":162,"graphs":171,"hints":172,"order":173,"hasMath":10,"media":174,"elements":175},"COMPREHENSION_VIDEO",[],{"hasCorrectAnswer":10,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},"string",{"correct":81,"incorrect":81},{"answerTime":143,"math":144,"type":82,"hasMath":10,"media":146,"text":155,"_id":156},-1,{"latex":145,"template":82},[],[147],{"type":148,"meta":149},"video",{"duration":150,"endTime":150,"startTime":81,"videoId":151,"src":152,"thumbnail":153,"filmstrip":154},1202,"6687fdb4830500027c0d68eb","boclips","https://cdnapisec.kaltura.com/p/1776261/thumbnail/entry_id/1_37i4ip1w/width/{thumbnailWidth}/vid_slices/3/vid_slice/1","https://cdnapisec.kaltura.com/p/1776261/thumbnail/entry_id/1_37i4ip1w/width/{thumbnailWidth}/vid_slices/{thumbnailCount}","","67ae7f122eee9ea8c94695d3",[],{"math":159,"type":155,"hasMath":10,"media":161,"text":155},{"latex":160,"template":82},[],[],{"titleFontFamily":163,"fontFamily":163,"fontColor":164,"background":166,"shape":168},"Quicksand",{"text":165},"#5D2057",{"color":167,"image":155,"video":155},"#FFFFFF",{"largeShapeColor":169,"smallShapeColor":170},"#F2F2F2","#9A4292",[],[],"asc",[],[],[],[],[],3,"67ae7f12363bf4923fb063f4",[182,183,184,185,186,187,188,189,190,191],"67ae7f12363bf4923fb063f5","67ae7f12363bf4923fb063f6","67ae7f12363bf4923fb063f7","67ae7f12363bf4923fb063f8","67ae7f12363bf4923fb063f9","67ae7f12363bf4923fb063fa","67ae7f12363bf4923fb063fb","67ae7f12363bf4923fb063fc","67ae7f12363bf4923fb063fd","67ae7f12363bf4923fb063fe","2025-02-13T23:24:02.714Z","2025-02-13T23:24:03.021Z",{"structure":195,"standards":235,"topics":236,"isSuperParent":10,"standardIds":237,"aiGenerated":5,"__v":126,"teleportFrom":82,"cloned":82,"ver":130,"parent":82,"_id":182,"time":108,"published":5,"aiCreateMeta":82,"type":233,"comprehensionQuestionId":180,"comprehensionTimestamp":238,"createdAt":239,"updated":193,"cached":5},{"settings":196,"hasMath":10,"query":197,"options":203,"explain":228,"hints":232,"kind":233,"marks":234,"answer":179},{"hasCorrectAnswer":5,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":198,"hasMath":10,"math":199,"answerTime":143,"text":201,"media":202},"text",{"latex":200,"template":82},[],"\u003Cp>What is the purpose of the contact form in the final project?\u003C/p>",[],[204,210,216,222],{"type":198,"hasMath":10,"math":205,"answerTime":81,"id":207,"text":208,"media":209,"_id":207},{"latex":206,"template":82},[],"67ae7f127c596cda0ac5f725","\u003Cp>To collect customer feedback\u003C/p>",[],{"type":198,"hasMath":10,"math":211,"answerTime":81,"id":213,"text":214,"media":215,"_id":213},{"latex":212,"template":82},[],"67ae7f127c596c738bc5f726","\u003Cp>To process payments\u003C/p>",[],{"type":198,"hasMath":10,"math":217,"answerTime":81,"id":219,"text":220,"media":221,"_id":219},{"latex":218,"template":82},[],"67ae7f127c596c6ef4c5f727","\u003Cp>To display product details\u003C/p>",[],{"type":198,"hasMath":10,"math":223,"answerTime":81,"id":225,"text":226,"media":227,"_id":225},{"latex":224,"template":82},[],"67ae7f127c596c5ecec5f728","\u003Cp>To gather information to contact potential customers\u003C/p>",[],{"type":198,"text":155,"media":229,"hasMath":10,"math":230,"answerTime":81},[],{"template":82,"latex":231},[],[],"MCQ",{"correct":126,"incorrect":81},[],[],[],126,"2025-02-13T23:24:02.729Z",{"structure":241,"standards":279,"topics":280,"isSuperParent":10,"standardIds":281,"aiGenerated":5,"__v":126,"teleportFrom":82,"cloned":82,"ver":130,"parent":82,"_id":183,"time":108,"published":5,"aiCreateMeta":82,"type":233,"comprehensionQuestionId":180,"comprehensionTimestamp":282,"createdAt":239,"updated":193,"cached":5},{"settings":242,"hasMath":10,"query":243,"options":248,"explain":273,"hints":277,"kind":233,"marks":278,"answer":130},{"hasCorrectAnswer":5,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":198,"hasMath":10,"math":244,"answerTime":143,"text":246,"media":247},{"latex":245,"template":82},[],"\u003Cp>Which HTML element is used to create a text input field for the user's full name?\u003C/p>",[],[249,255,261,267],{"type":198,"hasMath":10,"math":250,"answerTime":81,"id":252,"text":253,"media":254,"_id":252},{"latex":251,"template":82},[],"67ae7f127c596c3f5fc5f72c","\u003Cp>\u003Cbutton>\u003C/p>",[],{"type":198,"hasMath":10,"math":256,"answerTime":81,"id":258,"text":259,"media":260,"_id":258},{"latex":257,"template":82},[],"67ae7f127c596c357ec5f72d","\u003Cp>\u003Cselect>\u003C/p>",[],{"type":198,"hasMath":10,"math":262,"answerTime":81,"id":264,"text":265,"media":266,"_id":264},{"latex":263,"template":82},[],"67ae7f127c596cf78dc5f72e","\u003Cp>\u003Cinput type='text'>\u003C/p>",[],{"type":198,"hasMath":10,"math":268,"answerTime":81,"id":270,"text":271,"media":272,"_id":270},{"latex":269,"template":82},[],"67ae7f127c596c03a1c5f72f","\u003Cp>\u003Ctextarea>\u003C/p>",[],{"type":198,"text":155,"media":274,"hasMath":10,"math":275,"answerTime":81},[],{"template":82,"latex":276},[],[],{"correct":126,"incorrect":81},[],[],[],433,{"structure":284,"standards":322,"topics":323,"isSuperParent":10,"standardIds":324,"aiGenerated":5,"__v":126,"teleportFrom":82,"cloned":82,"ver":130,"parent":82,"_id":184,"time":108,"published":5,"aiCreateMeta":82,"type":233,"comprehensionQuestionId":180,"comprehensionTimestamp":282,"createdAt":239,"updated":193,"cached":5},{"settings":285,"hasMath":10,"query":286,"options":291,"explain":316,"hints":320,"kind":233,"marks":321,"answer":126},{"hasCorrectAnswer":5,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":198,"hasMath":10,"math":287,"answerTime":143,"text":289,"media":290},{"latex":288,"template":82},[],"\u003Cp>What method is set for the form to ensure data is not displayed in the URL?\u003C/p>",[],[292,298,304,310],{"type":198,"hasMath":10,"math":293,"answerTime":81,"id":295,"text":296,"media":297,"_id":295},{"latex":294,"template":82},[],"67ae7f127c596c2d14c5f733","\u003Cp>GET\u003C/p>",[],{"type":198,"hasMath":10,"math":299,"answerTime":81,"id":301,"text":302,"media":303,"_id":301},{"latex":300,"template":82},[],"67ae7f127c596c2335c5f734","\u003Cp>POST\u003C/p>",[],{"type":198,"hasMath":10,"math":305,"answerTime":81,"id":307,"text":308,"media":309,"_id":307},{"latex":306,"template":82},[],"67ae7f127c596cf7c3c5f735","\u003Cp>PUT\u003C/p>",[],{"type":198,"hasMath":10,"math":311,"answerTime":81,"id":313,"text":314,"media":315,"_id":313},{"latex":312,"template":82},[],"67ae7f127c596c6819c5f736","\u003Cp>DELETE\u003C/p>",[],{"type":198,"text":155,"media":317,"hasMath":10,"math":318,"answerTime":81},[],{"template":82,"latex":319},[],[],{"correct":126,"incorrect":81},[],[],[],{"structure":326,"standards":364,"topics":365,"isSuperParent":10,"standardIds":366,"aiGenerated":5,"__v":126,"teleportFrom":82,"cloned":82,"ver":130,"parent":82,"_id":185,"time":108,"published":5,"aiCreateMeta":82,"type":233,"comprehensionQuestionId":180,"comprehensionTimestamp":367,"createdAt":239,"updated":193,"cached":5},{"settings":327,"hasMath":10,"query":328,"options":333,"explain":358,"hints":362,"kind":233,"marks":363,"answer":126},{"hasCorrectAnswer":5,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":198,"hasMath":10,"math":329,"answerTime":143,"text":331,"media":332},{"latex":330,"template":82},[],"\u003Cp>Which CSS property is used to align items horizontally in a flex container?\u003C/p>",[],[334,340,346,352],{"type":198,"hasMath":10,"math":335,"answerTime":81,"id":337,"text":338,"media":339,"_id":337},{"latex":336,"template":82},[],"67ae7f127c596c621ac5f73a","\u003Cp>flex-direction\u003C/p>",[],{"type":198,"hasMath":10,"math":341,"answerTime":81,"id":343,"text":344,"media":345,"_id":343},{"latex":342,"template":82},[],"67ae7f127c596c2bc1c5f73b","\u003Cp>justify-content\u003C/p>",[],{"type":198,"hasMath":10,"math":347,"answerTime":81,"id":349,"text":350,"media":351,"_id":349},{"latex":348,"template":82},[],"67ae7f127c596c012dc5f73c","\u003Cp>align-items\u003C/p>",[],{"type":198,"hasMath":10,"math":353,"answerTime":81,"id":355,"text":356,"media":357,"_id":355},{"latex":354,"template":82},[],"67ae7f127c596c7080c5f73d","\u003Cp>display\u003C/p>",[],{"type":198,"text":155,"media":359,"hasMath":10,"math":360,"answerTime":81},[],{"template":82,"latex":361},[],[],{"correct":126,"incorrect":81},[],[],[],721,{"structure":369,"standards":407,"topics":408,"isSuperParent":10,"standardIds":409,"aiGenerated":5,"__v":126,"teleportFrom":82,"cloned":82,"ver":130,"parent":82,"_id":186,"time":108,"published":5,"aiCreateMeta":82,"type":233,"comprehensionQuestionId":180,"comprehensionTimestamp":367,"createdAt":239,"updated":193,"cached":5},{"settings":370,"hasMath":10,"query":371,"options":376,"explain":401,"hints":405,"kind":233,"marks":406,"answer":130},{"hasCorrectAnswer":5,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":198,"hasMath":10,"math":372,"answerTime":143,"text":374,"media":375},{"latex":373,"template":82},[],"\u003Cp>Which CSS property is used to set the background color of the contact form?\u003C/p>",[],[377,383,389,395],{"type":198,"hasMath":10,"math":378,"answerTime":81,"id":380,"text":381,"media":382,"_id":380},{"latex":379,"template":82},[],"67ae7f127c596c4ba3c5f741","\u003Cp>text-color\u003C/p>",[],{"type":198,"hasMath":10,"math":384,"answerTime":81,"id":386,"text":387,"media":388,"_id":386},{"latex":385,"template":82},[],"67ae7f127c596c5ce9c5f742","\u003Cp>border-color\u003C/p>",[],{"type":198,"hasMath":10,"math":390,"answerTime":81,"id":392,"text":393,"media":394,"_id":392},{"latex":391,"template":82},[],"67ae7f127c596cb194c5f743","\u003Cp>background-color\u003C/p>",[],{"type":198,"hasMath":10,"math":396,"answerTime":81,"id":398,"text":399,"media":400,"_id":398},{"latex":397,"template":82},[],"67ae7f127c596ccae0c5f744","\u003Cp>color\u003C/p>",[],{"type":198,"text":155,"media":402,"hasMath":10,"math":403,"answerTime":81},[],{"template":82,"latex":404},[],[],{"correct":126,"incorrect":81},[],[],[],{"structure":411,"standards":449,"topics":450,"isSuperParent":10,"standardIds":451,"aiGenerated":5,"__v":126,"teleportFrom":82,"cloned":82,"ver":130,"parent":82,"_id":187,"time":108,"published":5,"aiCreateMeta":82,"type":233,"comprehensionQuestionId":180,"comprehensionTimestamp":452,"createdAt":239,"updated":193,"cached":5},{"settings":412,"hasMath":10,"query":413,"options":418,"explain":443,"hints":447,"kind":233,"marks":448,"answer":126},{"hasCorrectAnswer":5,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":198,"hasMath":10,"math":414,"answerTime":143,"text":416,"media":417},{"latex":415,"template":82},[],"\u003Cp>What is the purpose of the 'preventDefault' method in JavaScript?\u003C/p>",[],[419,425,431,437],{"type":198,"hasMath":10,"math":420,"answerTime":81,"id":422,"text":423,"media":424,"_id":422},{"latex":421,"template":82},[],"67ae7f127c596cafd4c5f748","\u003Cp>To stop the form from being submitted\u003C/p>",[],{"type":198,"hasMath":10,"math":426,"answerTime":81,"id":428,"text":429,"media":430,"_id":428},{"latex":427,"template":82},[],"67ae7f127c596c3fb4c5f749","\u003Cp>To prevent the default action of an event\u003C/p>",[],{"type":198,"hasMath":10,"math":432,"answerTime":81,"id":434,"text":435,"media":436,"_id":434},{"latex":433,"template":82},[],"67ae7f127c596cec3cc5f74a","\u003Cp>To reload the page\u003C/p>",[],{"type":198,"hasMath":10,"math":438,"answerTime":81,"id":440,"text":441,"media":442,"_id":440},{"latex":439,"template":82},[],"67ae7f127c596c08a9c5f74b","\u003Cp>To clear the form fields\u003C/p>",[],{"type":198,"text":155,"media":444,"hasMath":10,"math":445,"answerTime":81},[],{"template":82,"latex":446},[],[],{"correct":126,"incorrect":81},[],[],[],1058,{"structure":454,"standards":492,"topics":493,"isSuperParent":10,"standardIds":494,"aiGenerated":5,"__v":126,"teleportFrom":82,"cloned":82,"ver":130,"parent":82,"_id":188,"time":108,"published":5,"aiCreateMeta":82,"type":233,"comprehensionQuestionId":180,"comprehensionTimestamp":452,"createdAt":239,"updated":193,"cached":5},{"settings":455,"hasMath":10,"query":456,"options":461,"explain":486,"hints":490,"kind":233,"marks":491,"answer":179},{"hasCorrectAnswer":5,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":198,"hasMath":10,"math":457,"answerTime":143,"text":459,"media":460},{"latex":458,"template":82},[],"\u003Cp>How does the script determine whether to contact via email or phone?\u003C/p>",[],[462,468,474,480],{"type":198,"hasMath":10,"math":463,"answerTime":81,"id":465,"text":466,"media":467,"_id":465},{"latex":464,"template":82},[],"67ae7f127c596c8c2fc5f74f","\u003Cp>By checking the user's location\u003C/p>",[],{"type":198,"hasMath":10,"math":469,"answerTime":81,"id":471,"text":472,"media":473,"_id":471},{"latex":470,"template":82},[],"67ae7f127c596cd6edc5f750","\u003Cp>By checking the time of day\u003C/p>",[],{"type":198,"hasMath":10,"math":475,"answerTime":81,"id":477,"text":478,"media":479,"_id":477},{"latex":476,"template":82},[],"67ae7f127c596c107ac5f751","\u003Cp>By checking the user's age\u003C/p>",[],{"type":198,"hasMath":10,"math":481,"answerTime":81,"id":483,"text":484,"media":485,"_id":483},{"latex":482,"template":82},[],"67ae7f127c596cef23c5f752","\u003Cp>By checking the preferred contact method selected\u003C/p>",[],{"type":198,"text":155,"media":487,"hasMath":10,"math":488,"answerTime":81},[],{"template":82,"latex":489},[],[],{"correct":126,"incorrect":81},[],[],[],{"structure":496,"standards":534,"topics":535,"isSuperParent":10,"standardIds":536,"aiGenerated":5,"__v":126,"teleportFrom":82,"cloned":82,"ver":130,"parent":82,"_id":189,"time":108,"published":5,"aiCreateMeta":82,"type":233,"comprehensionQuestionId":180,"comprehensionTimestamp":452,"createdAt":239,"updated":193,"cached":5},{"settings":497,"hasMath":10,"query":498,"options":503,"explain":528,"hints":532,"kind":233,"marks":533,"answer":126},{"hasCorrectAnswer":5,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":198,"hasMath":10,"math":499,"answerTime":143,"text":501,"media":502},{"latex":500,"template":82},[],"\u003Cp>What is the purpose of the 'querySelector' method in JavaScript?\u003C/p>",[],[504,510,516,522],{"type":198,"hasMath":10,"math":505,"answerTime":81,"id":507,"text":508,"media":509,"_id":507},{"latex":506,"template":82},[],"67ae7f127c596c28cac5f756","\u003Cp>To remove an element from the DOM\u003C/p>",[],{"type":198,"hasMath":10,"math":511,"answerTime":81,"id":513,"text":514,"media":515,"_id":513},{"latex":512,"template":82},[],"67ae7f127c596c2eabc5f757","\u003Cp>To select an element from the DOM\u003C/p>",[],{"type":198,"hasMath":10,"math":517,"answerTime":81,"id":519,"text":520,"media":521,"_id":519},{"latex":518,"template":82},[],"67ae7f127c596c577bc5f758","\u003Cp>To add a new HTML element\u003C/p>",[],{"type":198,"hasMath":10,"math":523,"answerTime":81,"id":525,"text":526,"media":527,"_id":525},{"latex":524,"template":82},[],"67ae7f127c596c9831c5f759","\u003Cp>To change the style of an element\u003C/p>",[],{"type":198,"text":155,"media":529,"hasMath":10,"math":530,"answerTime":81},[],{"template":82,"latex":531},[],[],{"correct":126,"incorrect":81},[],[],[],{"structure":538,"standards":576,"topics":577,"isSuperParent":10,"standardIds":578,"aiGenerated":5,"__v":126,"teleportFrom":82,"cloned":82,"ver":130,"parent":82,"_id":190,"time":108,"published":5,"aiCreateMeta":82,"type":233,"comprehensionQuestionId":180,"comprehensionTimestamp":579,"createdAt":239,"updated":193,"cached":5},{"settings":539,"hasMath":10,"query":540,"options":545,"explain":570,"hints":574,"kind":233,"marks":575,"answer":126},{"hasCorrectAnswer":5,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":198,"hasMath":10,"math":541,"answerTime":143,"text":543,"media":544},{"latex":542,"template":82},[],"\u003Cp>What was the issue that needed debugging in the JavaScript code?\u003C/p>",[],[546,552,558,564],{"type":198,"hasMath":10,"math":547,"answerTime":81,"id":549,"text":550,"media":551,"_id":549},{"latex":548,"template":82},[],"67ae7f127c596c6a95c5f75d","\u003Cp>Incorrect HTML structure\u003C/p>",[],{"type":198,"hasMath":10,"math":553,"answerTime":81,"id":555,"text":556,"media":557,"_id":555},{"latex":554,"template":82},[],"67ae7f127c596cafb2c5f75e","\u003Cp>Spelling mistake in variable names\u003C/p>",[],{"type":198,"hasMath":10,"math":559,"answerTime":81,"id":561,"text":562,"media":563,"_id":561},{"latex":560,"template":82},[],"67ae7f127c596c4380c5f75f","\u003Cp>Incorrect form method\u003C/p>",[],{"type":198,"hasMath":10,"math":565,"answerTime":81,"id":567,"text":568,"media":569,"_id":567},{"latex":566,"template":82},[],"67ae7f127c596cb895c5f760","\u003Cp>Missing CSS styles\u003C/p>",[],{"type":198,"text":155,"media":571,"hasMath":10,"math":572,"answerTime":81},[],{"template":82,"latex":573},[],[],{"correct":126,"incorrect":81},[],[],[],1199,{"structure":581,"standards":619,"topics":620,"isSuperParent":10,"standardIds":621,"aiGenerated":5,"__v":126,"teleportFrom":82,"cloned":82,"ver":130,"parent":82,"_id":191,"time":108,"published":5,"aiCreateMeta":82,"type":233,"comprehensionQuestionId":180,"comprehensionTimestamp":579,"createdAt":239,"updated":193,"cached":5},{"settings":582,"hasMath":10,"query":583,"options":588,"explain":613,"hints":617,"kind":233,"marks":618,"answer":126},{"hasCorrectAnswer":5,"fibDataType":140,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":198,"hasMath":10,"math":584,"answerTime":143,"text":586,"media":587},{"latex":585,"template":82},[],"\u003Cp>What is the final step in the video tutorial?\u003C/p>",[],[589,595,601,607],{"type":198,"hasMath":10,"math":590,"answerTime":81,"id":592,"text":593,"media":594,"_id":592},{"latex":591,"template":82},[],"67ae7f127c596c43b6c5f764","\u003Cp>Styling the form\u003C/p>",[],{"type":198,"hasMath":10,"math":596,"answerTime":81,"id":598,"text":599,"media":600,"_id":598},{"latex":597,"template":82},[],"67ae7f127c596c9c48c5f765","\u003Cp>Debugging and finalizing the form\u003C/p>",[],{"type":198,"hasMath":10,"math":602,"answerTime":81,"id":604,"text":605,"media":606,"_id":604},{"latex":603,"template":82},[],"67ae7f127c596c2c3dc5f766","\u003Cp>Creating a new HTML page\u003C/p>",[],{"type":198,"hasMath":10,"math":608,"answerTime":81,"id":610,"text":611,"media":612,"_id":610},{"latex":609,"template":82},[],"67ae7f127c596c01d1c5f767","\u003Cp>Adding more input fields\u003C/p>",[],{"type":198,"text":155,"media":614,"hasMath":10,"math":615,"answerTime":81},[],{"template":82,"latex":616},[],[],{"correct":126,"incorrect":81},[],[],[],[],"2025-02-13T23:23:39.280Z","2025-02-14T17:45:26.757Z",{"videoMeta":626,"aiMeta":2264},{"videoId":151,"videoTitle":132,"channelTitle":627,"duration":150,"videoProvider":152,"videoType":628,"videoSubTypes":629,"transcript":631},"Packt - Web Development","INSTRUCTIONAL",[630],"CHALK_AND_TALK_PRESENTATION",[632,636,640,644,648,652,656,660,664,668,672,676,680,684,688,692,696,700,704,708,712,715,719,723,727,731,735,739,743,747,751,755,759,763,767,771,775,779,783,787,791,795,799,803,806,810,814,818,822,826,829,833,837,841,845,849,853,857,861,865,869,873,877,881,885,889,893,897,901,905,909,913,917,921,924,928,932,936,940,944,948,952,956,960,964,968,972,976,980,984,988,992,996,1000,1004,1008,1012,1016,1020,1024,1028,1032,1036,1040,1044,1048,1052,1056,1060,1064,1068,1072,1076,1080,1084,1088,1092,1096,1100,1104,1108,1112,1115,1118,1122,1126,1130,1134,1137,1141,1145,1149,1153,1157,1161,1165,1169,1173,1177,1181,1185,1189,1193,1196,1200,1204,1208,1212,1216,1220,1224,1228,1232,1236,1240,1244,1248,1252,1256,1260,1264,1268,1272,1276,1280,1284,1288,1291,1295,1298,1302,1305,1309,1313,1317,1321,1324,1328,1332,1336,1340,1343,1347,1351,1355,1359,1362,1365,1369,1373,1377,1381,1385,1389,1393,1397,1401,1405,1409,1413,1416,1420,1424,1427,1431,1435,1439,1443,1446,1450,1454,1458,1462,1466,1470,1474,1478,1482,1486,1489,1493,1497,1501,1504,1507,1511,1515,1519,1523,1527,1530,1534,1538,1542,1546,1550,1554,1558,1562,1566,1570,1574,1578,1582,1586,1590,1594,1598,1602,1606,1609,1613,1617,1621,1625,1629,1632,1636,1640,1644,1648,1651,1655,1658,1662,1666,1670,1674,1678,1682,1686,1690,1693,1697,1701,1705,1709,1712,1716,1720,1723,1726,1728,1731,1734,1737,1740,1744,1748,1752,1756,1760,1764,1768,1772,1776,1780,1784,1788,1791,1795,1799,1803,1807,1810,1814,1818,1821,1824,1827,1830,1834,1838,1842,1846,1850,1853,1857,1861,1864,1868,1872,1876,1880,1884,1888,1892,1896,1900,1904,1908,1912,1916,1920,1924,1928,1932,1935,1939,1943,1947,1951,1955,1959,1963,1966,1969,1972,1976,1979,1983,1987,1991,1994,1998,2001,2004,2006,2010,2014,2018,2021,2024,2027,2031,2035,2039,2043,2046,2050,2054,2057,2061,2065,2069,2073,2077,2081,2085,2089,2092,2096,2100,2103,2107,2111,2115,2119,2123,2126,2130,2134,2137,2141,2144,2148,2152,2155,2158,2162,2166,2170,2173,2176,2180,2183,2187,2190,2194,2198,2201,2205,2208,2211,2215,2219,2223,2226,2230,2234,2238,2242,2246,2250,2254,2258,2262],{"text":633,"duration":634,"offset":635},"for our final project, I'm just going to do my",2542,4044,{"text":637,"duration":638,"offset":639},"contact form.",718,6641,{"text":641,"duration":642,"offset":643},"So if you look, everything else for our T-shirt store",2567,7360,{"text":645,"duration":646,"offset":647},"is complete, but we really need to have a form",2229,9975,{"text":649,"duration":650,"offset":651},"here we where we can get some information to reach",2423,12252,{"text":653,"duration":654,"offset":655},"out to a potential customer.",1356,14723,{"text":657,"duration":658,"offset":659},"So let's head over to our I'm just going to",3271,16400,{"text":661,"duration":662,"offset":663},"move my styling script or style dot CSS down the",3652,19747,{"text":665,"duration":666,"offset":667},"line here and we are going to be looking at",3272,23475,{"text":669,"duration":670,"offset":671},"can I?",457,26823,{"text":673,"duration":674,"offset":675},"There we go.",440,27640,{"text":677,"duration":678,"offset":679},"We are going to be looking at our contact form",2335,28720,{"text":681,"duration":682,"offset":683},"here.",253,31106,{"text":685,"duration":686,"offset":687},"So let's go to contact dot HTML and I'm just",2757,31760,{"text":689,"duration":690,"offset":691},"going to copy and paste my sizing right over.",2820,34579,{"text":693,"duration":694,"offset":695},"So that should look pretty good, but we are going",2142,38120,{"text":697,"duration":698,"offset":699},"to have to change a few things here.",1574,40306,{"text":701,"duration":702,"offset":703},"So let's walk through this.",1080,41880,{"text":705,"duration":706,"offset":707},"Instead of my size script, we're going to be bringing",3320,43680,{"text":709,"duration":710,"offset":711},"in our contact script dot JS.",1817,47063,{"text":713,"duration":702,"offset":714},"So that looks good.",49160,{"text":716,"duration":717,"offset":718},"Our header will be the same and in our ID",2465,50560,{"text":720,"duration":721,"offset":722},"here for the main tag, it's no longer going to",2766,53085,{"text":724,"duration":725,"offset":726},"be a tool, but rather I'm going to give it",2526,55911,{"text":728,"duration":729,"offset":730},"an ID of contact.",1023,58497,{"text":732,"duration":733,"offset":734},"The NAV bar will look good, but I'm not going",2880,61200,{"text":736,"duration":737,"offset":738},"to have a tool division or anything like this anymore.",3456,64143,{"text":740,"duration":741,"offset":742},"So I'm actually going to get rid of all of",2860,67600,{"text":744,"duration":745,"offset":746},"this and we'll keep our footer.",2111,70528,{"text":748,"duration":749,"offset":750},"So what do we want to have, Ian?",2200,72920,{"text":752,"duration":753,"offset":754},"Our main tag outside of our navigation, I guess.",3480,75120,{"text":756,"duration":757,"offset":758},"Well, I'm going to 1st create a division and that",2257,78880,{"text":760,"duration":761,"offset":762},"division will hold something.",1337,81183,{"text":764,"duration":765,"offset":766},"I'll call, give it an ID, I'll call it contact",2989,82520,{"text":768,"duration":769,"offset":770},"division.",585,85574,{"text":772,"duration":773,"offset":774},"And what we'll do is we'll put an H2 right",3540,86560,{"text":776,"duration":777,"offset":778},"in here to start and it will say enter your",3625,90184,{"text":780,"duration":781,"offset":782},"information and we will reach out.",2866,93893,{"text":784,"duration":785,"offset":786},"And so now I'm going to create a form and",2171,97480,{"text":788,"duration":789,"offset":790},"the form's going to be really nice because I'm going",2754,99704,{"text":792,"duration":793,"offset":794},"to have lots of different input fields in here.",2489,102510,{"text":796,"duration":797,"offset":798},"And rather than trying to grab every single input in",2713,105000,{"text":800,"duration":801,"offset":802},"my JavaScript, I'm just going to grab the form and",2609,107765,{"text":804,"duration":801,"offset":805},"I'll be able to access all of the information from",110427,{"text":807,"duration":808,"offset":809},"inside of the form.",991,113088,{"text":811,"duration":812,"offset":813},"So I'm going to give it an ID of contact_form",3160,114080,{"text":815,"duration":816,"offset":817},"and I'm Going to set the method to be POST",2950,117310,{"text":819,"duration":820,"offset":821},"so that none of the information is displayed in the",3582,120331,{"text":823,"duration":824,"offset":825},"URL WHEN they enter it and.",1897,123983,{"text":827,"duration":686,"offset":828},"In here I'm, Going to have let's go look at",125880,{"text":830,"duration":831,"offset":832},"the final product we'll.",1538,128701,{"text":834,"duration":835,"offset":836},"Select contact it.",840,130480,{"text":838,"duration":839,"offset":840},"Looks like I've Got 12345 different input entries and then",4394,131320,{"text":842,"duration":843,"offset":844},"two buttons on a line and.",1970,135790,{"text":846,"duration":847,"offset":848},"So I'm Going to put each line in its own",2675,137960,{"text":850,"duration":851,"offset":852},"division here so.",1138,140702,{"text":854,"duration":855,"offset":856},"I'll Have 12345 divisions for inputs and then one division",4941,141840,{"text":858,"duration":859,"offset":860},"for my buttons so.",1534,146866,{"text":862,"duration":863,"offset":864},"Let's go through and and put those in right now",2322,148400,{"text":866,"duration":867,"offset":868},"so.",149,150771,{"text":870,"duration":871,"offset":872},"Here's my First Division and it'll say label, label, tag,",4661,150919,{"text":874,"duration":875,"offset":876},"all right?",818,155662,{"text":878,"duration":879,"offset":880},"And this will say full name.",1840,156720,{"text":882,"duration":883,"offset":884},"They'll enter in their full name.",1280,160000,{"text":886,"duration":887,"offset":888},"And let's give this, it'll be for something with an",3335,162040,{"text":890,"duration":891,"offset":892},"ID of name.",719,165440,{"text":894,"duration":895,"offset":896},"And then let's create our input field.",1480,167600,{"text":898,"duration":899,"offset":900},"So input, the type is text, the ID is name.",5160,169560,{"text":902,"duration":903,"offset":904},"The name that we'll use to pass is, we'll call",4005,175360,{"text":906,"duration":907,"offset":908},"it my name and then we'll say the placeholder will",4354,179452,{"text":910,"duration":911,"offset":912},"be enter your full name and we'll make sure that",4179,183893,{"text":914,"duration":915,"offset":916},"this is required.",1481,188159,{"text":918,"duration":919,"offset":920},"All right, so there's our First Division.",2520,189640,{"text":922,"duration":702,"offset":923},"Let's create another one.",192160,{"text":925,"duration":926,"offset":927},"We'll make a label and I'll say e-mail, e-mail.",5200,194480,{"text":929,"duration":930,"offset":931},"And this will be for e-mail.",1800,200000,{"text":933,"duration":934,"offset":935},"Yep, for e-mail and the input tag will be of",5847,203880,{"text":937,"duration":938,"offset":939},"type e-mail with an ID of e-mail with a name",5848,209860,{"text":941,"duration":942,"offset":943},"of my_email with placeholder text.",4518,215841,{"text":945,"duration":946,"offset":947},"Enter your e-mail and it will be required.",4520,220480,{"text":949,"duration":950,"offset":951},"All right, let's do another division.",1440,226440,{"text":953,"duration":954,"offset":955},"We'll do label phone number, OK, And this will be",6183,228280,{"text":957,"duration":958,"offset":959},"for something with an ID of phone.",4291,234589,{"text":961,"duration":962,"offset":963},"Sometimes my cursor just jumps and that is annoying, so",3085,239840,{"text":965,"duration":966,"offset":967},"I apologize for that.",1179,242981,{"text":969,"duration":970,"offset":971},"We'll create an input field and this will be of",3124,244960,{"text":973,"duration":974,"offset":975},"type Tel for telephone.",1530,248150,{"text":977,"duration":978,"offset":979},"And the ID here will be a phone and the",3396,249960,{"text":981,"duration":982,"offset":983},"name will be my phone.",1917,253443,{"text":985,"duration":986,"offset":987},"And the placeholder text will say enter your phone number",5817,256120,{"text":989,"duration":990,"offset":991},"and we'll make that required.",2960,262039,{"text":993,"duration":994,"offset":995},"All right, let's keep making some divisions.",2160,266200,{"text":997,"duration":998,"offset":999},"Division palooza here.",1400,268800,{"text":1001,"duration":1002,"offset":1003},"So we'll make another label and then we'll say best",3989,270200,{"text":1005,"duration":1006,"offset":1007},"time to contact.",1251,274268,{"text":1009,"duration":1010,"offset":1011},"So we'll give them the option as to what is",1975,277320,{"text":1013,"duration":1014,"offset":1015},"the best time to contact them.",1379,279341,{"text":1017,"duration":1018,"offset":1019},"This will be for time and we'll do another input.",3960,281040,{"text":1021,"duration":1022,"offset":1023},"And this input will be of type time and the",4352,285360,{"text":1025,"duration":1026,"offset":1027},"ID will be time and the name will be equal",4252,289813,{"text":1029,"duration":1030,"offset":1031},"to my_time.",1114,294166,{"text":1033,"duration":1034,"offset":1035},"And we'll say the placeholder is best time to contact.",4160,295600,{"text":1037,"duration":1038,"offset":1039},"All right, change that capital TI think, and we'll make",3048,303240,{"text":1041,"duration":1042,"offset":1043},"this required.",776,306344,{"text":1045,"duration":1046,"offset":1047},"And what do we got?",1200,309640,{"text":1049,"duration":1050,"offset":1051},"One more, I think.",1680,310840,{"text":1053,"duration":1054,"offset":1055},"And this division, we will have a label.",4040,312800,{"text":1057,"duration":1058,"offset":1059},"Oops, get rid of that rogue tag right there.",5040,317200,{"text":1061,"duration":1062,"offset":1063},"We'll create a label and this will say preferred contact",8050,322240,{"text":1065,"duration":1066,"offset":1067},"method.",1007,330433,{"text":1069,"duration":1070,"offset":1071},"All right, And we'll come in here and this will",3203,331440,{"text":1073,"duration":1074,"offset":1075},"say for contact_method.",1567,334712,{"text":1077,"duration":1078,"offset":1079},"And then let's create.",1360,336560,{"text":1081,"duration":1082,"offset":1083},"We're going to create a select tag here for a",2063,338160,{"text":1085,"duration":1086,"offset":1087},"drop down to give them some options.",1651,340269,{"text":1089,"duration":1090,"offset":1091},"So select and we will come over here and we'll",4503,342120,{"text":1093,"duration":1094,"offset":1095},"say ID is equal to contact method, name is equal",4699,346721,{"text":1097,"duration":1098,"offset":1099},"to I don't know, I'll call it preferred method.",4601,351518,{"text":1101,"duration":1102,"offset":1103},"Oops.",240,356600,{"text":1105,"duration":1106,"offset":1107},"Come on, cursor jumping preferred method.",4600,356840,{"text":1109,"duration":1110,"offset":1111},"All right.",680,361440,{"text":1113,"duration":1050,"offset":1114},"And we'll make sure that this is required.",362120,{"text":1116,"duration":994,"offset":1117},"And in here we'll give a couple of options.",364520,{"text":1119,"duration":1120,"offset":1121},"So we'll say e-mail as one option with a value",4390,366920,{"text":1123,"duration":1124,"offset":1125},"of e-mail.",955,371405,{"text":1127,"duration":1128,"offset":1129},"And then our another option will be phone.",1880,373080,{"text":1131,"duration":1132,"offset":1133},"So phone with an value of phone.",4640,375360,{"text":1135,"duration":879,"offset":1136},"So there's all of our inputs.",381000,{"text":1138,"duration":1139,"offset":1140},"But now I want my two buttons.",2600,382840,{"text":1142,"duration":1143,"offset":1144},"So I'm going to put two buttons inside of this",1661,385440,{"text":1146,"duration":1147,"offset":1148},"form and I'm going to wrap them in a division.",1662,387138,{"text":1150,"duration":1151,"offset":1152},"I'll give you this an ID of maybe BTN wrapper.",3640,388800,{"text":1154,"duration":1155,"offset":1156},"Maybe we'll use that ID, maybe we won't.",1720,392560,{"text":1158,"duration":1159,"offset":1160},"I'll see.",480,394280,{"text":1162,"duration":1163,"offset":1164},"So we'll say button submit and we'll declare its type.",6640,395040,{"text":1166,"duration":1167,"offset":1168},"Even though the default type is a submit, we'll declare",3158,401720,{"text":1170,"duration":1171,"offset":1172},"it anyway, submit, and then we'll do a reset.",2584,404935,{"text":1174,"duration":1175,"offset":1176},"So button reset of type reset, all right.",8080,407760,{"text":1178,"duration":1179,"offset":1180},"And then lastly, what we'll do is outside of the",2901,415839,{"text":1182,"duration":1183,"offset":1184},"form, we are going to create a blank paragraph which",3142,418800,{"text":1186,"duration":1187,"offset":1188},"will eventually hold some information for us and we'll give",3565,422002,{"text":1190,"duration":1191,"offset":1192},"it an ID of contact_message.",1691,425628,{"text":1194,"duration":1187,"offset":1195},"If we save this and refresh our contact page, we",428680,{"text":1197,"duration":1198,"offset":1199},"should see everything there.",2080,432320,{"text":1201,"duration":1202,"offset":1203},"Perfect.",520,434400,{"text":1205,"duration":1206,"offset":1207},"Now none of it's styled because we have kind of",3253,435240,{"text":1209,"duration":1210,"offset":1211},"renamed our naming convention.",2077,438563,{"text":1213,"duration":1214,"offset":1215},"I don't want this to look the same as like",2107,440800,{"text":1217,"duration":1218,"offset":1219},"our tools pages.",803,442957,{"text":1221,"duration":1222,"offset":1223},"So we just got to go over to our CSS",2232,443960,{"text":1225,"duration":1226,"offset":1227},"real quick and do some styling for our contact page.",3225,446254,{"text":1229,"duration":1230,"offset":1231},"It shouldn't take too long.",1120,449520,{"text":1233,"duration":1234,"offset":1235},"So let's head over to our style dot CSS and",3504,451000,{"text":1237,"duration":1238,"offset":1239},"I'll Scroll down here to the bottom.",2934,454586,{"text":1241,"duration":1242,"offset":1243},"I'll visually separate this.",2800,457840,{"text":1245,"duration":1246,"offset":1247},"All right, And now I will say contact page styling.",5280,464720,{"text":1249,"duration":1250,"offset":1251},"All right, so the first thing I'm going to do",2114,471040,{"text":1253,"duration":1254,"offset":1255},"is let's just see what do we call our main",1974,473201,{"text":1257,"duration":1258,"offset":1259},"division here?",658,475222,{"text":1261,"duration":1262,"offset":1263},"We called our main division contact.",1920,476000,{"text":1265,"duration":1266,"offset":1267},"So why don't I give it a background color?",2280,478160,{"text":1269,"duration":1270,"offset":1271},"So I'll target contact and we'll give it a background",6439,481520,{"text":1273,"duration":1274,"offset":1275},"of my mint green EBF 5 EE.",3159,488081,{"text":1277,"duration":1278,"offset":1279},"OK.",120,491240,{"text":1281,"duration":1282,"offset":1283},"And so now what's the next thing we can target?",2480,491360,{"text":1285,"duration":1286,"offset":1287},"Well, we've got this big division holding everything, our contact",3743,493840,{"text":768,"duration":1289,"offset":1290},518,497641,{"text":1292,"duration":1293,"offset":1294},"So why don't I target that contact_division?",3520,498160,{"text":1296,"duration":1018,"offset":1297},"I am going to give a display of flex.",503080,{"text":1299,"duration":1300,"offset":1301},"I am going to make the flex direction a column",3741,507880,{"text":1303,"duration":452,"offset":1304},"based layout.",511702,{"text":1306,"duration":1307,"offset":1308},"And then we'll use align items to align on the",3323,513040,{"text":1310,"duration":1311,"offset":1312},"cross axis, which is the horizontal axis of center.",3685,516435,{"text":1314,"duration":1315,"offset":1316},"So I'll save this.",1000,520720,{"text":1318,"duration":1319,"offset":1320},"And now everything is centered here nicely.",2360,522520,{"text":1322,"duration":895,"offset":1323},"OK, so that looks pretty good.",525320,{"text":1325,"duration":1326,"offset":1327},"The next thing that I want to sort of target,",3372,526800,{"text":1329,"duration":1330,"offset":1331},"I think is let's go look what we got in",2923,530247,{"text":1333,"duration":1334,"offset":1335},"our HTML.",674,533245,{"text":1337,"duration":1338,"offset":1339},"The next thing I'm going to target is my my",4465,534880,{"text":637,"duration":1341,"offset":1342},1350,539449,{"text":1344,"duration":1345,"offset":1346},"And I'm going to, within this form, target all divisions",3700,541040,{"text":1348,"duration":1349,"offset":1350},"that sit inside of the form, every single division, including",4032,544806,{"text":1352,"duration":1353,"offset":1354},"our button wrapper.",1255,548904,{"text":1356,"duration":1357,"offset":1358},"So I'm going to say hashtag contact_division, and then we'll",4508,550160,{"text":1360,"duration":737,"offset":1361},"target all divisions that sit inside of there.",554743,{"text":1363,"duration":1242,"offset":1364},"And I'm going to give each 1A display of flex.",558480,{"text":1366,"duration":1367,"offset":1368},"And we'll use the default row layout, which means the",2851,561640,{"text":1370,"duration":1371,"offset":1372},"main axis is the horizontal axis.",1775,564544,{"text":1374,"duration":1375,"offset":1376},"And using justify content along that main axis, I'm going",4430,566600,{"text":1378,"duration":1379,"offset":1380},"to use space between to align them on that axis.",3731,571108,{"text":1382,"duration":1383,"offset":1384},"OK, so that really hasn't done anything yet, but it",3767,576000,{"text":1386,"duration":1387,"offset":1388},"will once I think we begin to change the size",3324,579841,{"text":1390,"duration":1391,"offset":1392},"of some of these elements.",1921,583239,{"text":1394,"duration":1395,"offset":1396},"So let's take a look at maybe doing that right",3102,585440,{"text":1398,"duration":1399,"offset":1400},"now.",270,588610,{"text":1402,"duration":1403,"offset":1404},"So now I'm going to come over here and let's",2770,589120,{"text":1406,"duration":1407,"offset":1408},"change the size of all labels that sit inside of",3021,591953,{"text":1410,"duration":1411,"offset":1412},"our contact division.",1322,595037,{"text":1414,"duration":1262,"offset":1415},"So we've got quite a few of them, right?",596360,{"text":1417,"duration":1418,"offset":1419},"Here's a label, here's a label, here's a label.",2840,598280,{"text":1421,"duration":1422,"offset":1423},"So let's adjust the width of those items.",3040,601120,{"text":1425,"duration":946,"offset":1426},"So I'll say contact_division, and we'll target the labels.",604160,{"text":1428,"duration":1429,"offset":1430},"And in order to change the width, we have to",2388,609160,{"text":1432,"duration":1433,"offset":1434},"change the display to be in line block.",2117,611602,{"text":1436,"duration":1437,"offset":1438},"And then I'm going to set the width to be",2784,613720,{"text":1440,"duration":1441,"offset":1442},"200 pixels.",748,616572,{"text":1444,"duration":674,"offset":1445},"Awesome.",621000,{"text":1447,"duration":1448,"offset":1449},"So that centered them or sort of pushed everything over",3252,621440,{"text":1451,"duration":1452,"offset":1453},"a little bit.",768,624751,{"text":1455,"duration":1456,"offset":1457},"I like that a lot.",960,625520,{"text":1459,"duration":1460,"offset":1461},"Now what we can also target is our what's our",3515,627280,{"text":1463,"duration":1464,"offset":1465},"buttons look like?",1407,630873,{"text":1467,"duration":1468,"offset":1469},"I don't really like how our buttons are sort of",2718,632600,{"text":1471,"duration":1472,"offset":1473},"spaced like that.",984,635376,{"text":1475,"duration":1476,"offset":1477},"So what I'm gonna do is I'm just gonna target",3306,636600,{"text":1479,"duration":1480,"offset":1481},"the button wrapper division that we had.",2940,639980,{"text":1483,"duration":1484,"offset":1485},"So I believe we called it button wrapper.",1520,642920,{"text":1487,"duration":1266,"offset":1488},"If we Scroll down, we have this division.",644440,{"text":1490,"duration":1491,"offset":1492},"So we can be more specific now and our rules",3080,646720,{"text":1494,"duration":1495,"offset":1496},"and we can say let's target the button wrapper.",3290,649870,{"text":1498,"duration":1499,"offset":1500},"So we'll say hashtag BTN_wrapper.",7320,653160,{"text":1502,"duration":733,"offset":1503},"I believe that's the only thing that has that.",660800,{"text":1505,"duration":1046,"offset":1506},"I don't think I did any.",663680,{"text":1508,"duration":1509,"offset":1510},"Let's just check.",760,665360,{"text":1512,"duration":1513,"offset":1514},"Nope, I didn't give any other I DS of button",1859,668280,{"text":1516,"duration":1517,"offset":1518},"wrapper.",339,670181,{"text":1520,"duration":1521,"offset":1522},"So we can just call this button wrapper and I'm",4297,670520,{"text":1524,"duration":1525,"offset":1526},"going to do a display of flex and I'll say",3840,674908,{"text":1528,"duration":1262,"offset":1529},"justify content here.",678839,{"text":1531,"duration":1532,"offset":1533},"Come on you.",560,681640,{"text":1535,"duration":1536,"offset":1537},"A jumping cursor is starting to bother me, but that's",3920,682200,{"text":1539,"duration":1540,"offset":1541},"OK Justify content.",1405,686194,{"text":1543,"duration":1544,"offset":1545},"We're going to do space evenly and I'll give a",3680,687600,{"text":1547,"duration":1548,"offset":1549},"margin of say 20 pixels in all directions.",3360,691360,{"text":1551,"duration":1552,"offset":1553},"So that should put a little bit more space around",2138,694720,{"text":1555,"duration":1556,"offset":1557},"them.",218,696901,{"text":1559,"duration":1560,"offset":1561},"And if we look, I kind of like how that",2460,697440,{"text":1563,"duration":1564,"offset":1565},"looks just a little bit better.",1957,699963,{"text":1567,"duration":1568,"offset":1569},"So there is our finalized form.",3880,702240,{"text":1571,"duration":1572,"offset":1573},"It looks a little different than what we have here,",2518,706120,{"text":1575,"duration":1576,"offset":1577},"but I'm pretty happy with it.",1433,708687,{"text":1579,"duration":1580,"offset":1581},"O I'm going to stick with this.",2440,710520,{"text":1583,"duration":1584,"offset":1585},"O Now what we can do is we can head",2877,713320,{"text":1587,"duration":1588,"offset":1589},"over and try to give some of the JavaScript here",3945,716279,{"text":1591,"duration":1592,"offset":1593},"for this, for this page.",1973,720307,{"text":1595,"duration":1596,"offset":1597},"OK, so let's head to our contact script and let's",3063,722760,{"text":1599,"duration":1600,"offset":1601},"think about what we have to get here.",2314,725886,{"text":1603,"duration":1604,"offset":1605},"So inside of our HTML, we've got all of these",3078,728520,{"text":1607,"duration":698,"offset":1608},"different input fields.",731666,{"text":1610,"duration":1611,"offset":1612},"I do not want to have to target each and",1887,733240,{"text":1614,"duration":1615,"offset":1616},"everyone.",424,735175,{"text":1618,"duration":1619,"offset":1620},"So what I'm going to do instead is just simply",3241,735880,{"text":1622,"duration":1623,"offset":1624},"target the form that they all sit in.",2607,739192,{"text":1626,"duration":1627,"offset":1628},"And I'm also going to target the contact message so",3682,741800,{"text":1630,"duration":1627,"offset":1631},"we can maybe change the text upon the submission of",745555,{"text":1633,"duration":1634,"offset":1635},"our form.",649,749310,{"text":1637,"duration":1638,"offset":1639},"So let's get those two items.",1160,749960,{"text":1641,"duration":1642,"offset":1643},"So I'll say construction contact form is equal to document",6247,751120,{"text":1645,"duration":1646,"offset":1647},"dot query selector, and we'll say hashtag contact_form.",5924,757475,{"text":1649,"duration":1580,"offset":1650},"And I'll do construction.",764240,{"text":1652,"duration":1653,"offset":1654},"Contact message is equal to document dot query selector #contact_message.",7440,767040,{"text":1201,"duration":1656,"offset":1657},360,775080,{"text":1659,"duration":1660,"offset":1661},"So now that I have those two things, what I'm",2347,775440,{"text":1663,"duration":1664,"offset":1665},"going to do is I'm going to put an event",2087,777839,{"text":1667,"duration":1668,"offset":1669},"listener on the form itself.",1460,779979,{"text":1671,"duration":1672,"offset":1673},"So contact form dot add event listener.",2920,781440,{"text":1675,"duration":1676,"offset":1677},"And the event type is going to be a submit",2331,784600,{"text":1679,"duration":1680,"offset":1681},"event.",334,786986,{"text":1683,"duration":1684,"offset":1685},"So when we click the submit button that is attached",3351,787520,{"text":1687,"duration":1688,"offset":1689},"to this form, we will trigger the given event.",3023,790937,{"text":1109,"duration":1691,"offset":1692},400,794840,{"text":1694,"duration":1695,"offset":1696},"And so I'll call that, I'll say function E and",2697,795240,{"text":1698,"duration":1699,"offset":1700},"I'm just going to write it right in here.",2404,797995,{"text":1702,"duration":1703,"offset":1704},"And so the first thing that I want to do",1621,800720,{"text":1706,"duration":1707,"offset":1708},"is I don't want the page to reload.",1419,802381,{"text":1710,"duration":1319,"offset":1711},"I don't want to lose all of the form information.",803800,{"text":1713,"duration":1714,"offset":1715},"So I'm going to call my event E and I'll",3066,806160,{"text":1717,"duration":1718,"offset":1719},"do prevent default.",1457,809303,{"text":1721,"duration":1202,"offset":1722},"Wow, There we go.",812520,{"text":1724,"duration":1315,"offset":1725},"Prevent default.",813040,{"text":1201,"duration":1159,"offset":1727},814480,{"text":1729,"duration":879,"offset":1730},"So now our page won't reload.",814960,{"text":1732,"duration":1580,"offset":1733},"So now let's get all of our form data.",816920,{"text":1735,"duration":1282,"offset":1736},"So I'll say construction data is equal to.",819360,{"text":1738,"duration":1319,"offset":1739},"I need to use the form a form data object.",822080,{"text":1741,"duration":1742,"offset":1743},"So I'll do new form data and I want to",2672,824440,{"text":1745,"duration":1746,"offset":1747},"get the form data that is attached to this current",3516,827182,{"text":1749,"duration":1750,"offset":1751},"form.",352,830768,{"text":1753,"duration":1754,"offset":1755},"So I'll use the this keyword now that I have",3740,831120,{"text":1757,"duration":1758,"offset":1759},"it.",255,834945,{"text":1761,"duration":1762,"offset":1763},"What we're going to do is we're going to update",3062,835200,{"text":1765,"duration":1766,"offset":1767},"our contact message depending upon which one of these two",3714,838327,{"text":1769,"duration":1770,"offset":1771},"options they chose, whether they wanted to be contacted via",3844,842106,{"text":1773,"duration":1774,"offset":1775},"e-mail or by a phone number.",1825,846015,{"text":1777,"duration":1778,"offset":1779},"So we'll say if data dot get so from our",4144,849720,{"text":1781,"duration":1782,"offset":1783},"data that we got from our form data, we're going",4973,853967,{"text":1785,"duration":1786,"offset":1787},"to get the key preferred_method.",3315,859044,{"text":1789,"duration":1198,"offset":1790},"And so let's just go back to our HTML.",862680,{"text":1792,"duration":1793,"offset":1794},"If we look, we gave that a name for our",2372,864760,{"text":1796,"duration":1797,"offset":1798},"select option here, preferred method, it's either going to have",3834,867193,{"text":1800,"duration":1801,"offset":1802},"a value of e-mail or a value of phone.",2312,871087,{"text":1804,"duration":1805,"offset":1806},"So we'll check to see if data dot get of",2848,873800,{"text":1808,"duration":1672,"offset":1809},"that preferred method is equal to e-mail.",876720,{"text":1811,"duration":1812,"offset":1813},"If it is, then we are going to say contact",3294,880080,{"text":1815,"duration":1816,"offset":1817},"message.",628,883452,{"text":1819,"duration":1266,"offset":1820},"There is our a paragraph that we want to update.",884080,{"text":1822,"duration":749,"offset":1823},"So dot inner HTML is going to equal.",886360,{"text":1825,"duration":835,"offset":1826},"And let's say something here.",888840,{"text":1828,"duration":812,"offset":1829},"We'll say thank you and then we'll give their name.",889680,{"text":1831,"duration":1832,"offset":1833},"So we'll do data dot get the key here was",5904,892840,{"text":1835,"duration":1836,"offset":1837},"my name.",1152,898888,{"text":1839,"duration":1840,"offset":1841},"And we'll say someone will reach out you via e-mail",6978,900040,{"text":1843,"duration":1844,"offset":1845},"at and then I will give data dot get my",5337,907154,{"text":1847,"duration":1848,"offset":1849},"e-mail, give their e-mail address.",4653,912627,{"text":1851,"duration":733,"offset":1852},"And then we'll concatenate around.",917280,{"text":1854,"duration":1855,"offset":1856},"And then we'll concatenate the time that they want data",3819,920160,{"text":1858,"duration":1859,"offset":1860},"dot get my_time.",1112,924048,{"text":1862,"duration":725,"offset":1863},"So we're using all the name attributes that we had",925160,{"text":1865,"duration":1866,"offset":1867},"given.",304,927736,{"text":1869,"duration":1870,"offset":1871},"And then we'll just say simply, what did I do?",3600,928320,{"text":1873,"duration":1874,"offset":1875},"My cursor jumped again, Huh?",1240,932120,{"text":1877,"duration":1878,"offset":1879},"All right, perfect.",1600,933480,{"text":1881,"duration":1882,"offset":1883},"And then we'll say talk to you soon.",3120,935080,{"text":1885,"duration":1886,"offset":1887},"All right, so there is our first sort of message.",3560,939280,{"text":1889,"duration":1890,"offset":1891},"And then if it's not e-mail, then that means they",2661,943200,{"text":1893,"duration":1894,"offset":1895},"want to be contacted via phone.",1684,945916,{"text":1897,"duration":1898,"offset":1899},"But I'll just do that in an else block and",1987,947600,{"text":1901,"duration":1902,"offset":1903},"we'll do something really similar here.",1845,949634,{"text":1905,"duration":1906,"offset":1907},"So I'm actually going to just copy this whole message",2887,951600,{"text":1909,"duration":1910,"offset":1911},"and we'll paste it in here and we'll say thank",2506,954541,{"text":1913,"duration":1914,"offset":1915},"you.",217,957102,{"text":1917,"duration":1918,"offset":1919},"Someone will reach out to you via phone AT and",3566,957320,{"text":1921,"duration":1922,"offset":1923},"then we'll put their phone number.",2637,960963,{"text":1925,"duration":1926,"offset":1927},"So instead of saying my e-mail will do my phone",2685,963600,{"text":1929,"duration":1930,"offset":1931},"and the time will still be the same.",2057,966342,{"text":1933,"duration":1050,"offset":1934},"OK, so let's save that.",969040,{"text":1936,"duration":1937,"offset":1938},"And I think this JavaScript file is complete.",2760,970920,{"text":1940,"duration":1941,"offset":1942},"So if I refresh the page, I'll enter my full",2534,973960,{"text":1944,"duration":1945,"offset":1946},"name.",288,976551,{"text":1948,"duration":1949,"offset":1950},"I'll say Mike Ermo my e-mail, Mike dot ermo at",4854,976840,{"text":1952,"duration":1953,"offset":1954},"hotmail.com, if anyone uses Hotmail.",3799,981800,{"text":1956,"duration":1957,"offset":1958},"I don't know my phone number, 1/234/567/8901 not my phone",5892,985600,{"text":1960,"duration":1961,"offset":1962},"number.",723,991596,{"text":1964,"duration":1509,"offset":1965},"Please don't call it.",992320,{"text":1967,"duration":1046,"offset":1968},"I'll set a time here.",993360,{"text":1970,"duration":1874,"offset":1971},"We'll do 11.",994560,{"text":1973,"duration":1974,"offset":1975},"I want to be contacted at 11:50 AM and I",2422,995800,{"text":1893,"duration":1977,"offset":1978},1877,998282,{"text":1980,"duration":1981,"offset":1982},"So when I click submit, we get a nice message",2168,1000160,{"text":1984,"duration":1985,"offset":1986},"here and notice nothing is in our URL because we",2313,1002376,{"text":1988,"duration":1989,"offset":1990},"use the POST method on the form.",1542,1004737,{"text":1992,"duration":1456,"offset":1993},"And thank you Mike Aramo.",1006720,{"text":1995,"duration":1996,"offset":1997},"Someone will reach out to you via phone at 123-456-7890",4369,1007680,{"text":1999,"duration":1341,"offset":2000},"one around 11:50.",1012129,{"text":2002,"duration":835,"offset":2003},"Talk to you soon.",1013480,{"text":1201,"duration":1656,"offset":2005},1014320,{"text":2007,"duration":2008,"offset":2009},"If I change this to e-mail and I hit submit,",5418,1014680,{"text":2011,"duration":2012,"offset":2013},"looks like that's not doing it.",3818,1020222,{"text":2015,"duration":2016,"offset":2017},"Can we only submit this form once?",2560,1026000,{"text":2019,"duration":1110,"offset":2020},"Let's just see.",1028560,{"text":2022,"duration":1139,"offset":2023},"All right, yeah, perfect.",1030240,{"text":2025,"duration":1046,"offset":2026},"There's my phone number.",1033280,{"text":2028,"duration":2029,"offset":2030},"I'll put a time in here and let's do it",3442,1034520,{"text":2032,"duration":2033,"offset":2034},"via e-mail submit.",1588,1038051,{"text":2036,"duration":2037,"offset":2038},"And it looks even if it is at e-mail, we",2378,1039920,{"text":2040,"duration":2041,"offset":2042},"are still getting our phone number.",2082,1042358,{"text":2044,"duration":994,"offset":2045},"So I have a mistake somewhere in here.",1044720,{"text":2047,"duration":2048,"offset":2049},"If I head to the console it's not showing anything,",3247,1046880,{"text":2051,"duration":2052,"offset":2053},"any error messages, but with this set to be e-mail",3184,1050191,{"text":2055,"duration":998,"offset":2056},"it should be printing.",1053439,{"text":2058,"duration":2059,"offset":2060},"So I am going to pause the video and try",2780,1055080,{"text":2062,"duration":2063,"offset":2064},"to debug this issue and I'll be right back.",2990,1057930,{"text":2066,"duration":2067,"offset":2068},"OK I think I see my issue, it's just a",1936,1062960,{"text":2070,"duration":2071,"offset":2072},"small spelling mistake.",1172,1064947,{"text":2074,"duration":2075,"offset":2076},"If we look in our HTML under my select tag",3877,1066359,{"text":2078,"duration":2079,"offset":2080},"here, the name is preferred method 1F2RS and over here",4984,1070329,{"text":2082,"duration":2083,"offset":2084},"when in my conditional for the JavaScript, I have preferred",5446,1075406,{"text":2086,"duration":2087,"offset":2088},"2FS and 1R.",1016,1080944,{"text":2090,"duration":994,"offset":2091},"So let me update that spelling.",1082200,{"text":2093,"duration":2094,"offset":2095},"So now I have this spelled correctly and let's rerun",3005,1084359,{"text":2097,"duration":2098,"offset":2099},"this and see how this works.",1618,1087422,{"text":2101,"duration":1484,"offset":2102},"So I'm going to refresh the page.",1089240,{"text":2104,"duration":2105,"offset":2106},"So we'll put in our name, I'll put in an",2357,1091000,{"text":2108,"duration":2109,"offset":2110},"e-mail, I'll put in a phone number.",2064,1093416,{"text":2112,"duration":2113,"offset":2114},"The time now contact me at 4:57 in the morning",3610,1095840,{"text":2116,"duration":2117,"offset":2118},"via e-mail and there we have it.",2511,1099528,{"text":2120,"duration":2121,"offset":2122},"Thank you.",320,1102040,{"text":2124,"duration":895,"offset":2125},"Someone will reach out to you via e-mail.",1102360,{"text":2127,"duration":2128,"offset":2129},"And if I change this to phone, we then get",2915,1104080,{"text":2131,"duration":2132,"offset":2133},"our phone number perfect.",1735,1107064,{"text":2135,"duration":812,"offset":2136},"So I actually think we are all done.",1108960,{"text":2138,"duration":2139,"offset":2140},"If I just close everything out, I'm going to open",2701,1112119,{"text":2142,"duration":1600,"offset":2143},"up the page from the get go and we'll just",1114875,{"text":2145,"duration":2146,"offset":2147},"overview the entire the entire site that we built.",2756,1117244,{"text":2149,"duration":2150,"offset":2151},"It's kind of a summary here.",1040,1120600,{"text":2153,"duration":1155,"offset":2154},"So I'm going to open up my index page.",1121640,{"text":2156,"duration":879,"offset":2157},"All right, so we have that nice right.",1123360,{"text":2159,"duration":2160,"offset":2161},"So as long as I'm hovering over the main tag",2156,1125200,{"text":2163,"duration":2164,"offset":2165},"of the page, we get that nice transition, which looks",2597,1127405,{"text":2167,"duration":2168,"offset":2169},"kind of cool Colors change can over over this great.",2549,1130051,{"text":2171,"duration":733,"offset":2172},"Click enter Here is our home page.",1132920,{"text":2174,"duration":1155,"offset":2175},"We've got our design tool.",1136160,{"text":2177,"duration":2178,"offset":2179},"Maybe I want a large jersey.",2320,1138720,{"text":2181,"duration":1319,"offset":2182},"I'm going to make it orange.",1141320,{"text":2184,"duration":2185,"offset":2186},"Perfect cool.",800,1144280,{"text":2188,"duration":1882,"offset":2189},"All right, our pricing tool seems to be working.",1145080,{"text":2191,"duration":2192,"offset":2193},"I want one and one all right, so that is",2817,1148200,{"text":2195,"duration":2196,"offset":2197},"good.",353,1151087,{"text":2199,"duration":1638,"offset":2200},"My sizing tool.",1151760,{"text":2202,"duration":2203,"offset":2204},"I'm 5 foot 11 at 165 lbs.",4880,1152920,{"text":2206,"duration":1319,"offset":2207},"I should have a large shirt that is working.",1158160,{"text":2209,"duration":812,"offset":2210},"And then lastly, our contact form is working as well.",1160920,{"text":2212,"duration":2213,"offset":2214},"All right, So I think this is a great place",2811,1164560,{"text":2216,"duration":2217,"offset":2218},"to stop.",523,1167436,{"text":2220,"duration":2221,"offset":2222},"Hopefully you feel like you have learned a lot and",3202,1168400,{"text":2224,"duration":1766,"offset":2225},"you've enjoyed this process of walking through some of the",1171666,{"text":2227,"duration":2228,"offset":2229},"fundamentals of web development using just solely HTMLCSS and JavaScript.",4675,1175444,{"text":2231,"duration":2232,"offset":2233},"I'd like to think that this is a great, you",2191,1180480,{"text":2235,"duration":2236,"offset":2237},"know, foundational starting point in web development that you can",3314,1182722,{"text":2239,"duration":2240,"offset":2241},"now use to jump into, you know, more advanced concepts",2752,1186087,{"text":2243,"duration":2244,"offset":2245},"or using any like frameworks that you might across out",2753,1188890,{"text":2247,"duration":2248,"offset":2249},"there.",306,1191694,{"text":2251,"duration":2252,"offset":2253},"So with that being said, this is going to be",2553,1192800,{"text":2255,"duration":2256,"offset":2257},"our last video and maybe I will see you in",2438,1195411,{"text":2259,"duration":2260,"offset":2261},"another video.",812,1197907,{"text":2002,"duration":1110,"offset":2263},1198920,{"summary":2265,"sections":2266,"learningObjectives":2306,"keyConcepts":2315,"videoTags":2321},"The video tutorial guides viewers through creating a contact form for a T-shirt store project. It covers setting up the HTML structure, adding input fields, and styling the form using CSS. The tutorial also demonstrates how to handle form submissions with JavaScript, including form validation and displaying messages based on user input. The video concludes with a review of the entire project, emphasizing the foundational skills in HTML, CSS, and JavaScript for web development.",[2267,2275,2283,2291,2299],{"title":2268,"start":635,"end":809,"description":2269,"tags":2270},"Introduction to Contact Form","Overview of the contact form setup.",[2271,2272,2273,2274],"contact form","HTML","project setup","web development",{"title":2276,"start":813,"end":1192,"description":2277,"tags":2278},"Form Structure and Inputs","Building the form structure and input fields.",[2279,2280,2281,2282],"form inputs","HTML structure","input fields","web forms",{"title":2284,"start":1195,"end":1569,"description":2285,"tags":2286},"Styling the Contact Form","Applying CSS styles to the contact form.",[2287,2288,2289,2290],"CSS styling","web design","flexbox","form layout",{"title":2292,"start":1585,"end":2136,"description":2293,"tags":2294},"JavaScript for Form Handling","Implementing JavaScript for form submission.",[2295,2296,2297,2298],"JavaScript","form handling","event listener","form validation",{"title":2300,"start":2140,"end":2263,"description":2301,"tags":2302},"Project Review and Conclusion","Review of the project and final thoughts.",[2303,2274,2304,2305],"project review","summary","conclusion",[2307,2308,2309,2310,2311,2312,2313,2314],"Create a contact form","Style with CSS","Use JavaScript events","Validate form inputs","Handle form submission","Debug JavaScript","Apply flexbox layout","Understand HTML structure",[2316,2317,2318,2319,2320],"HTML form creation","CSS styling techniques","JavaScript event handling","Form validation","Web development fundamentals",{"keyTags":2322,"pedagogicalTags":2325},[2274,2272,2323,2295,2271,2324],"CSS","project-based learning",[2324,2326,2327],"hands-on tutorial","step-by-step guide","60919f6b27f749001c9a4bd7","2025-02-13T23:23:39.279Z","2025-02-14T17:45:26.754Z","ENABLED","2025-07-14T06:52:46.280Z",{"service":2334,"version":2335},"quizserver","df7d424f7a8f20710ba0d0f1034d8346f14d75ca",{"success":5,"data":2337,"time":2419},{"countryBasedRecommendations":2338,"subjectBasedRecommendations":2387,"subjectBasedQualifiers":2388},[2339,2346,2353,2359,2363,2368,2373,2380],{"id":2340,"quizId":2341,"country":91,"lowerGrade":97,"upperGrade":69,"quizRank":179,"subject":99,"quizImage":2342,"quizName":2343,"quizType":2344,"noOfQuestions":2345,"noOfSlides":81},"686e4bba357e9371d6091b4d","5dcaf57ad15446001b403259","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/c63613c3-2560-4633-8a36-b1f0ac3b98fa","Equations of Circles","quiz",25,{"id":2347,"quizId":2348,"country":91,"lowerGrade":96,"upperGrade":96,"quizRank":2349,"subject":99,"quizImage":2350,"quizName":2351,"quizType":2344,"noOfQuestions":2352,"noOfSlides":81},"686e4bba357e9371d6091b4e","68671206841c035e47aeede4",4,"https://quizizz.com/media/resource/gs/quizizz-media/quizzes/ed740e8a-7dca-4e98-bce1-b2fe907f7e83","Week 5 Memory Builder 1 (Multiplication and Division Facts)",30,{"id":2354,"quizId":2355,"country":91,"lowerGrade":97,"upperGrade":97,"quizRank":40,"subject":2356,"quizImage":155,"quizName":2357,"quizType":2344,"noOfQuestions":2358,"noOfSlides":81},"686e4bba357e9371d6091b49","6849b3d89c6a82fefd0b03c6","Education","Unit 3 Summative - Summer School: Immune System",33,{"id":2360,"quizId":2361,"country":91,"lowerGrade":128,"upperGrade":40,"quizRank":95,"subject":99,"quizImage":155,"quizName":2362,"quizType":2344,"noOfQuestions":97,"noOfSlides":81},"686e4bba357e9371d6091b4a","57e8225d8ef1ea4b5ae59915","Writing and Identifying Ratios Practice",{"id":2364,"quizId":2365,"country":91,"lowerGrade":128,"upperGrade":128,"quizRank":18,"subject":99,"quizImage":155,"quizName":2366,"quizType":2344,"noOfQuestions":2367,"noOfSlides":81},"686e4bba357e9371d6091b4b","5dc359872829d0001b60162e","Prime and Composite Numbers",36,{"id":2369,"quizId":2370,"country":91,"lowerGrade":18,"upperGrade":18,"quizRank":96,"subject":99,"quizImage":155,"quizName":2371,"quizType":2344,"noOfQuestions":2372,"noOfSlides":81},"68651138c56abb73119b6b81","5dcecd522fee37001bc1342c","Exterior and Interior angles of Polygons",14,{"id":2374,"quizId":2375,"country":91,"lowerGrade":96,"upperGrade":2376,"quizRank":96,"subject":99,"quizImage":2377,"quizName":2378,"quizType":2344,"noOfQuestions":2379,"noOfSlides":81},"686e4bba357e9371d6091b4c","6865a4679154fb31267f3e3a",12,"https://quizizz.com/media/resource/gs/quizizz-media/quizzes/7e81d63c-d81b-4504-bc5f-8ee449c47d54","Camp Re-cap Week 1 (no regression)",37,{"id":2381,"quizId":2382,"country":91,"lowerGrade":97,"upperGrade":97,"quizRank":2376,"subject":2383,"quizImage":2384,"quizName":2385,"quizType":2344,"noOfQuestions":2386,"noOfSlides":81},"68651138c56abb73119b6b8f","675fbcb740406ce6cea2220d","Multiple Subjects","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/bc723152-5a33-4b5a-9917-560dcc8db7d0","Biology Semester 1 Review",46,[],[2389,2392,2395,2398,2401,2404,2407,2410,2413,2416],{"path":2390,"display":2391},"/math/geometry/measurement-and-dimension/volume/volume-applications/measuring-and-estimating-volume-of-cones/solving-mathematical-andor-real-world-problems-involving-volume-of-cones","Solving mathematical and/or real-world problems involving volume of cones",{"path":2393,"display":2394},"/ela/speaking-and-listening/digital-communication/online-collaboration","Online collaboration",{"path":2396,"display":2397},"/social-studies/contemporary-global-issues/global-economy-and-development/technology-and-society/cybersecurity","Cybersecurity",{"path":2399,"display":2400},"/ela/speaking-and-listening/presentation/planning/develop-supporting-materials","Develop supporting materials",{"path":2402,"display":2403},"/math/algebra/roots-and-radicals/understanding-roots/using-symbols-for-solutions-to-equations/using-the-cube-root-symbol-for-solutions-to-equations-of-the-form-x3-p","Using the cube root symbol for solutions to equations of the form x^3 = p",{"path":2405,"display":2406},"/math/number-system/vectors/vector-operations/adding-and-subtracting-vectors/subtracting-vectors-component-wise-including-determining-magnitude-and-direction-of-the-resultant-vector","Subtracting vectors component-wise (including determining magnitude and direction of the resultant vector)",{"path":2408,"display":2409},"/ela/reading/literature/theory-and-criticism/rhetorical-analysis/evaluate-subtle-persuasive-techniques","Evaluate subtle persuasive techniques",{"path":2411,"display":2412},"/science/physics/electromagnetism/electromagnetic-theory/boundary-value-problems","Boundary value problems",{"path":2414,"display":2415},"/math/geometry/area/circles/circle-area-circumference-formulas-usage","Circle Area & Circumference Formulas Usage",{"path":2417,"display":2418},"/science/engineering-and-technology/engineering-design-process/solution-development","Solution development","2025-07-14T06:52:46.441953533Z",{"success":5,"data":2421,"time":2478},{"quizzes":2422,"total":2476,"timeTaken":2477,"experiment":72,"source":73},[2423,2430,2437,2443,2450,2457,2463,2470],{"id":2424,"isSuper":10,"type":11,"info":2425,"shouldIndex":10,"stats":2429},"67b719101f48b145e81c3ba5",{"grade":2426,"name":2427,"slug":2427,"image":2428},[14,14],"Modern HTML and CSS from the Beginning (Including Sass) - Project Intro - Portfolio Website With Sass","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/4e01b8fd-0cb3-48ea-a942-e4acc5bfc5a1-v2",{"totalQuestions":40},{"id":2431,"isSuper":10,"type":11,"info":2432,"shouldIndex":10,"stats":2436},"67ae46846d89602d79bb961a",{"grade":2433,"name":2434,"slug":2434,"image":2435},[14,14],"Modern Web Design with HTML5, CSS3, and JavaScript - Creating a Custom Bootstrap Contact Form Using Bootstrap Form Styli","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/d0054eae-e3f5-46b7-bb1f-16058cd13b32-v2",{"totalQuestions":18},{"id":2438,"isSuper":10,"type":11,"info":2439,"shouldIndex":10,"stats":2442},"67b717bfa5adb6b844cf17fd",{"grade":2440,"name":2434,"slug":2434,"image":2441},[14,14],"https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/6de5d5f0-603c-401e-80b3-c75f65ccbc48-v2",{"totalQuestions":18},{"id":2444,"isSuper":10,"type":11,"info":2445,"shouldIndex":10,"stats":2449},"67760d0eab34a7d795531d63",{"grade":2446,"name":2447,"slug":2447,"image":2448},[14,14],"Modern HTML and CSS from the Beginning (Including Sass) - Contact Page - Portfolio Website With Sass","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/91217f4c-c439-4b4e-b0d6-6454164f4a06-v2",{"totalQuestions":69},{"id":2451,"isSuper":10,"type":11,"info":2452,"shouldIndex":10,"stats":2456},"6777a09d21a6c30b4cf420df",{"grade":2453,"name":2454,"slug":2454,"image":2455},[14,14],"Practical Cyber Hacking Skills for Beginners - HTML, CSS, JavaScript and PHP","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/e23d702f-b0e9-49bc-b9a6-7562ff4b0567-v2",{"totalQuestions":18},{"id":2458,"isSuper":10,"type":11,"info":2459,"shouldIndex":10,"stats":2462},"67b72c810c3a94043878b8eb",{"grade":2460,"name":132,"slug":132,"image":2461},[14,14],"https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/ed8fae4e-ab48-4993-8f7f-aee9ad5f4189-v2",{"totalQuestions":128},{"id":2464,"isSuper":10,"type":11,"info":2465,"shouldIndex":10,"stats":2469},"67ae1acd3728635383103849",{"grade":2466,"name":2467,"slug":2467,"image":2468},[14,14],"HTML CSS and JavaScript for Beginners - A Web Design Course - jQuery Fun with Styling","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/0b343384-9aae-49fc-be59-90a0f3d972af-v2",{"totalQuestions":18},{"id":2471,"isSuper":10,"type":11,"info":2472,"shouldIndex":10,"stats":2475},"6777898c5a01a277d9d7c0dd",{"grade":2473,"name":15,"slug":15,"image":2474},[14,14],"https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/edeb05fe-0299-4dd3-810b-cae3f19c4505-v2",{"totalQuestions":18},474927,48,"2025-07-14T06:52:46.439158274Z",["Reactive",2480],{},["Set"],["ShallowReactive",2483],{"6Fd7tOpyo5":82,"7wSZoTZccB":82,"6o8Uk4EAAv":82,"ZLD7uGD49Z":82},"/admin/video-quiz/67ae7efb7786211ef4cf2e70/the-art-of-doing-web-development-for-beginners-final-project-part-6","none",{"ssr_adp-v2":2487},"var-2"]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{disableS3Cache:false,appEnv:"production",enablePseudoLocale:false,apiBase:"",sentry:{dsn:"https://f45858ca79fd48fe019ce67e6c560868@o984659.ingest.us.sentry.io/4508357912363008",enabled:false},gtag:{id:"G-NYFWYHHSPY"},gtm:{devtools:true,id:"GTM-N3RKJ8L",debug:true,enabled:true,defer:true},app_type:"worker",port:"8080",worker_page_type:"quizPage",i18n:{baseUrl:"https://cf.quizizz.com/translationsV2/nuxtssr",locales:{en:{domain:""},es:{domain:""},fr:{domain:""},pl:{domain:""},ru:{domain:""},id:{domain:""},ms:{domain:""},tl:{domain:""},de:{domain:""},vi:{domain:""},th:{domain:""},az:{domain:""},"pt-br":{domain:""},"zh-CN":{domain:""},"zh-TW":{domain:""},tr:{domain:""},it:{domain:""},ja:{domain:""},kk:{domain:""},ko:{domain:""},nl:{domain:""},et:{domain:""},lt:{domain:""},hu:{domain:""},lv:{domain:""},sv:{domain:""},cs:{domain:""},hi:{domain:""},ro:{domain:""},af:{domain:""}}},device:{defaultUserAgent:"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36",enabled:true,refreshOnResize:false}},app:{baseURL:"/",buildId:"118ebbb9-f120-4281-8eb8-67523d385625",buildAssetsDir:"nuxtssr",cdnURL:"https://cf.quizizz.com"}}</script></body></html>