This is the basic set up for almost any page in HTML. defines the code as HTML to the browser. tells the browser that everything in that section is written in HTML unless specified otherwise. is a section that holds information about the page such as the title. is the name that shows up in search results and the name on the tab. <script scr=\"quiz.js\"> is linking the JavaScript file to the HTML file. <body> holds everything that is visible on the page itself. , First you will create a function called start. The rest of your game code will go in this function. This is so you can start your game using a button on your HTML page. The following code creates this function: var start = function(){ } This code creates a variable(var) named 'start':var start. This variable is a function. A variable is a key word that has a bit of data assigned to it, in this case a function. A function is a section of code that can be 'called'. When it is called it runs the code inside its {}. This is so that you don't have to write out the same thing more than once. , These variables will/do contain data such as: the score, the question, and the user input. They go inside the start function's {}. var correct = 0; var incorrect = 0; var question = \"none\"; var input = \"none\"; var answer = \"none\"; correct: This is how many questions the user has answered correctly. incorrect: This is how many questions the user has answered incorrectly. question: This is the question that the user will be given, it will change for each new question. input:This will hold the user's answer or their 'input'. answer: This will hold the correct answer to the question. Note: when you use a variable you don't need to write var, you do this only when making the variable. , The ask function asks the user the var question through a prompt. A prompt is a pop-up box that requires the user to type their answer into the box. var ask = function(){ input = prompt(question); }; Ask is a variable which is a function. The function sets the variable input to the response of the prompt containing the variable question. So in summary: The function asks the user a question in a prompt. The users response is then set to the variable input. So input is the answer that the user put. , The score function reacts to whether the users input is correct or not. It then responds appropriately. var score = function(){ if(input == answer){ correct = correct+1; alert(\"correct\"); }else{ incorrect = incorrect+1; alert(\"incorrect\"); } }; The variable score is a function. if the variable input is equal to the variable answer(this is correct) the variable correct it equal to itself plus one. And it gives the user an alert that reads: 'correct'. else the variable incorrect is equal to itself plus one. And it gives the user an alert that reads: 'incorrect'. In summary: this function checks if the users input is the same as the answer, meaning it is correct. If there is a match then the amount correct goes up one and it alerts the user that their answer was correct. If there wasn't a watch the amount of incorrect goes up one and it alerts the user their answer was incorrect. , This will make writing up the next bit easier. var lazy = function(){ ask(); score(); }; The variable lazy is a function. When run it calls two functions: ask(); and score();. In summary: This function just calls two other functions. It means when you want to call both 'ask' and 'score,' you don't have to call them separately; you can just call 'lazy'. , This could say anything. This code is a basic welcome. You don't need to have a welcome but it can be nice for the user. alert(\"welcome to my quiz, you will be answering 10 questions.\")", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-2" }, { "@type": "HowToStep", "position": 3, "name": "Step 3: Set up your files and folders.", "text": "The following code demonstrates how. question = \"What is the matrix?\"; answer = \"There is no spoon\"; The single = assigns the thing on the right to the variable on the left. This means that the variable question now holds the text(string)\"What is the matrix?\". And the variable answer holds the text(string) \"There is no spoon\". , This function calls the functions 'ask' and 'score'. lazy(); The function 'ask' asks the user the question and saves the users input to the variable input. The function 'score' checks if the users input matches the variable answer and changes the variables 'correct' and 'incorrect' appropriately. , First change the variable 'question' to your new question. Then change the variable 'answer' to the correct answer to your new question. Then run the function ask. , This could involve telling them there score or the percentage of questions they got right. How many they got correct: alert(\"Well done, you got \" + correct + \" out of 10\")", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-3" }, { "@type": "HowToStep", "position": 4, "name": "Step 4: Start with the start function.", "text": "At the very beginning you created a function named 'start'. You want to make the quiz start on the click of a play button. In the HTML body tag add the following code. <button onClick=\"start()\">play</button> This adds a button to your page with the word 'start' on it. When the user clicks on it it will run the function 'start'. This function contains the code of the game. , Using the tag you can add plane text to your web page. You could warn the user that the answers are case sensitive or tell them to have a nice day. Fell free to add whatever you want to. , Does it work how you expect? , You could add more questions or messages, edit the HTML to make the page look nicer.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-4" }, { "@type": "HowToStep", "position": 5, "name": "Step 5: Create the variables.", "text": "Create the variables.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-5" }, { "@type": "HowToStep", "position": 6, "name": "Step 6: Code the ask function.", "text": "Code the ask function.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-6" }, { "@type": "HowToStep", "position": 7, "name": "Step 7: Code the score function.", "text": "Code the score function.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-7" }, { "@type": "HowToStep", "position": 8, "name": "Step 8: Add a function to lazy call two other functions.", "text": "Add a function to lazy call two other functions.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-8" }, { "@type": "HowToStep", "position": 9, "name": "Step 9: Write an introduction to your quiz.", "text": "Write an introduction to your quiz.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-9" }, { "@type": "HowToStep", "position": 10, "name": "Step 10: Set your variables 'question' and 'answer' to a question and answer.", "text": "Set your variables 'question' and 'answer' to a question and answer.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-10" }, { "@type": "HowToStep", "position": 11, "name": "Step 11: Call the function 'lazy'.", "text": "Call the function 'lazy'.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-11" }, { "@type": "HowToStep", "position": 12, "name": "Step 12: Continue this process to add more questions.", "text": "Continue this process to add more questions.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-12" }, { "@type": "HowToStep", "position": 13, "name": "Step 13: End the game when you have enough questions.", "text": "End the game when you have enough questions.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-13" }, { "@type": "HowToStep", "position": 14, "name": "Step 14: Make a start button to launch the game.", "text": "Make a start button to launch the game.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-14" }, { "@type": "HowToStep", "position": 15, "name": "Step 15: Add text to the page about your game.", "text": "Add text to the page about your game.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-15" }, { "@type": "HowToStep", "position": 16, "name": "Step 16: Test your game.", "text": "Test your game.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-16" }, { "@type": "HowToStep", "position": 17, "name": "Step 17: Adapt it.", "text": "Adapt it.", "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz#step-17" } ], "url": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz", "author": { "@type": "Person", "name": "Tyler Bishop", "url": "https://lifeguidehubb.com/authors/tyler-bishop", "jobTitle": "Content Writer", "description": "Specializes in breaking down complex practical skills topics into simple steps." } } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "How to Make a Basic JavaScript Quiz", "description": "\nSet up your programming environment.,\nCreate the files you need.,\nSet up your files and folders.,\nStart with the start function.,\nCreate the variables.,\nCode the ask function.,\nCode the score function.,\nAdd a function to lazy call two other functions.,\nWrite an introduction to your quiz.,\nSet your variables 'question' and 'answer' to a question and answer.,\nCall the function 'lazy'.,\nContinue this process to add more questions.,\nEnd the game when you have enough questions.,\nMake a start button to launch the game.,\nAdd text to the page about your game.,\nTest your game.,\nAdapt it.", "author": { "@type": "Person", "name": "Tyler Bishop", "url": "https://lifeguidehubb.com/authors/tyler-bishop", "jobTitle": "Content Writer", "description": "Specializes in breaking down complex practical skills topics into simple steps." }, "publisher": { "@type": "Organization", "name": "LifeGuide Hub", "logo": { "@type": "ImageObject", "url": "https://lifeguidehubb.com/assets/logo.png" } }, "datePublished": "2025-12-27 17:52:01", "dateModified": "2025-12-27 17:52:01", "mainEntityOfPage": "https://lifeguidehubb.com/categories/education-study/how-to-make-a-basic-javascript-quiz", "articleSection": "Education & Study" } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://lifeguidehubb.com" }, { "@type": "ListItem", "position": 2, "name": "Education & Study", "item": "https://lifeguidehubb.com/categories/education-study" }, { "@type": "ListItem", "position": 3, "name": "How to Make a Basic JavaScript Quiz" } ] } </script> <!-- Organization Schema (Site-wide) --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "LifeGuide Hub", "url": "https://lifeguidehubb.com", "description": "Discover step-by-step guides for home organization, DIY crafts, pet care, cooking recipes, and hobby skills. Expert tips and practical advice for everyday life.", "logo": "https://lifeguidehubb.com/assets/logo.png" } </script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-W3PJEPSWF4"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-W3PJEPSWF4'); </script> <script type="text/javascript"> var x = document.referrer; // Traditional search engines var pattGoogle = new RegExp("google.com"); var pattCocCoc = new RegExp("coccoc.com"); var pattBing = new RegExp("bing.com"); var pattYahoo = new RegExp("yahoo.com"); // AI Search Engines var pattPerplexity = new RegExp("perplexity.ai"); var pattYouCom = new RegExp("you.com"); var pattPhind = new RegExp("phind.com"); var pattKagi = new RegExp("kagi.com"); var pattAndi = new RegExp("andisearch.com"); var pattMetaphor = new RegExp("metaphor.systems"); var pattExa = new RegExp("exa.ai"); var pattGlean = new RegExp("glean.com"); var pattNeeva = new RegExp("neeva.com"); // AI Chatbots & Tools var pattChatGPT = new RegExp("chat.openai.com|chatgpt.com"); var pattClaude = new RegExp("claude.ai"); var pattGemini = new RegExp("gemini.google.com|bard.google.com"); var pattCopilot = new RegExp("copilot.microsoft.com"); var pattPoe = new RegExp("poe.com"); var pattHuggingChat = new RegExp("huggingface.co/chat"); var pattCharacterAI = new RegExp("character.ai|beta.character.ai"); var pattLeMChat = new RegExp("chat.lmsys.org"); var pattMistral = new RegExp("chat.mistral.ai"); var pattOpenRouter = new RegExp("openrouter.ai"); // Developer AI Tools var pattCursor = new RegExp("cursor.sh|cursor.com"); var pattV0 = new RegExp("v0.dev"); var pattReplit = new RegExp("replit.com"); var pattGithubCopilot = new RegExp("github.com/features/copilot"); // Check if referrer matches any pattern if (pattGoogle.test(x) || pattGoogleVN.test(x) || pattCocCoc.test(x) || pattBing.test(x) || pattYahoo.test(x) || pattPerplexity.test(x) || pattYouCom.test(x) || pattPhind.test(x) || pattKagi.test(x) || pattAndi.test(x) || pattMetaphor.test(x) || pattExa.test(x) || pattGlean.test(x) || pattNeeva.test(x) || pattChatGPT.test(x) || pattClaude.test(x) || pattGemini.test(x) || pattCopilot.test(x) || pattPoe.test(x) || pattHuggingChat.test(x) || pattCharacterAI.test(x) || pattLeMChat.test(x) || pattMistral.test(x) || pattOpenRouter.test(x) || pattCursor.test(x) || pattV0.test(x) || pattReplit.test(x) || pattGithubCopilot.test(x)) { history.pushState(null, null, location.href); window.onpopstate = function () { history.go(1); } } </script> </head> <body class="bg-gray-100 min-h-screen flex flex-col"> <!-- Skip to Main Content (Accessibility) --> <a href="#main-content" class="skip-link bg-neo-yellow text-black font-bold px-4 py-2 border-3 border-black"> Skip to main content </a> <!-- Header --> <header role="banner" class="bg-white border-b-4 border-black sticky top-0 z-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-16 md:h-20"> <!-- Logo --> <a href="https://lifeguidehubb.com" class="flex items-center gap-3 group" aria-label="LifeGuide Hub - Home"> <span class="flex-shrink-0" aria-hidden="true"> <svg class="w-10 h-10 md:w-11 md:h-11" width="44" height="44" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <!-- Book base --> <rect x="10" y="15" width="80" height="70" rx="4" fill="#FF6B6B" stroke="#000" stroke-width="4"/> <!-- Book spine --> <rect x="10" y="15" width="12" height="70" fill="#AA96DA" stroke="#000" stroke-width="4"/> <!-- Book pages --> <rect x="26" y="25" width="54" height="8" rx="2" fill="#fff" stroke="#000" stroke-width="2"/> <rect x="26" y="38" width="54" height="8" rx="2" fill="#fff" stroke="#000" stroke-width="2"/> <rect x="26" y="51" width="54" height="8" rx="2" fill="#fff" stroke="#000" stroke-width="2"/> <rect x="26" y="64" width="35" height="8" rx="2" fill="#fff" stroke="#000" stroke-width="2"/> <!-- Bookmark --> <path d="M75 15 L75 35 L82 28 L89 35 L89 15" fill="#4ECDC4" stroke="#000" stroke-width="3"/> </svg> </span> <span class="font-display font-bold text-xl md:text-2xl text-black group-hover:text-neo-pink transition-colors"> LifeGuide Hub </span> </a> <!-- Desktop Navigation --> <nav role="navigation" aria-label="Main navigation" class="hidden lg:flex items-center gap-6"> <a href="https://lifeguidehubb.com" class="font-medium text-gray-700 hover:text-black link-brutal py-1 "> Home </a> <!-- Categories Dropdown --> <div class="dropdown"> <button type="button" class="dropdown-trigger font-medium text-gray-700 hover:text-black py-1 text-black" aria-expanded="false" aria-haspopup="true"> Categories <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="dropdown-menu rounded-lg" role="menu"> <div class="grid grid-cols-3 gap-2"> <a href="https://lifeguidehubb.com/categories/health-fitness" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #10B981"></span> <span class="truncate">Health & Fitness</span> </a> <a href="https://lifeguidehubb.com/categories/beauty-grooming" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #EC4899"></span> <span class="truncate">Beauty & Grooming</span> </a> <a href="https://lifeguidehubb.com/categories/home-garden" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #4ECDC4"></span> <span class="truncate">Home & Garden</span> </a> <a href="https://lifeguidehubb.com/categories/diy-repairs" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #F59E0B"></span> <span class="truncate">DIY & Repairs</span> </a> <a href="https://lifeguidehubb.com/categories/cooking-recipes" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #F38181"></span> <span class="truncate">Cooking & Recipes</span> </a> <a href="https://lifeguidehubb.com/categories/beverages" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #06B6D4"></span> <span class="truncate">Drinks & Beverages</span> </a> <a href="https://lifeguidehubb.com/categories/pets-animals" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #95E1D3"></span> <span class="truncate">Pets & Animals</span> </a> <a href="https://lifeguidehubb.com/categories/relationships" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #EF4444"></span> <span class="truncate">Relationships</span> </a> <a href="https://lifeguidehubb.com/categories/family-parenting" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #8B5CF6"></span> <span class="truncate">Family & Parenting</span> </a> <a href="https://lifeguidehubb.com/categories/social-skills" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #6366F1"></span> <span class="truncate">Social Skills</span> </a> <a href="https://lifeguidehubb.com/categories/career-work" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #3B82F6"></span> <span class="truncate">Career & Work</span> </a> <a href="https://lifeguidehubb.com/categories/education-study" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors bg-gray-100" style="background-color: #0EA5E933"> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #0EA5E9"></span> <span class="truncate">Education & Study</span> </a> <a href="https://lifeguidehubb.com/categories/technology" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #6B7280"></span> <span class="truncate">Technology</span> </a> <a href="https://lifeguidehubb.com/categories/gaming" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #8B5CF6"></span> <span class="truncate">Gaming</span> </a> <a href="https://lifeguidehubb.com/categories/arts-crafts" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #FF6B6B"></span> <span class="truncate">Arts & Crafts</span> </a> <a href="https://lifeguidehubb.com/categories/music" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #A855F7"></span> <span class="truncate">Music</span> </a> <a href="https://lifeguidehubb.com/categories/photography-video" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #14B8A6"></span> <span class="truncate">Photography & Video</span> </a> <a href="https://lifeguidehubb.com/categories/writing" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #64748B"></span> <span class="truncate">Writing</span> </a> <a href="https://lifeguidehubb.com/categories/sports" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #22C55E"></span> <span class="truncate">Sports</span> </a> <a href="https://lifeguidehubb.com/categories/outdoor-activities" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #84CC16"></span> <span class="truncate">Outdoor Activities</span> </a> <a href="https://lifeguidehubb.com/categories/fashion-style" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #F472B6"></span> <span class="truncate">Fashion & Style</span> </a> <a href="https://lifeguidehubb.com/categories/travel" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #0891B2"></span> <span class="truncate">Travel</span> </a> <a href="https://lifeguidehubb.com/categories/automotive" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #78716C"></span> <span class="truncate">Automotive</span> </a> <a href="https://lifeguidehubb.com/categories/finance-money" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #059669"></span> <span class="truncate">Finance & Money</span> </a> <a href="https://lifeguidehubb.com/categories/holidays-events" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #DC2626"></span> <span class="truncate">Holidays & Events</span> </a> <a href="https://lifeguidehubb.com/categories/other" role="menuitem" class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors " style=""> <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: #9CA3AF"></span> <span class="truncate">Other Guides</span> </a> </div> </div> </div> <a href="https://lifeguidehubb.com/search" class="font-medium text-gray-700 hover:text-black link-brutal py-1 "> Search </a> <a href="https://lifeguidehubb.com/about" class="font-medium text-gray-700 hover:text-black link-brutal py-1 "> About </a> </nav> <!-- Search & Mobile Menu Toggle --> <div class="flex items-center gap-3"> <!-- Search Form (Desktop) --> <form role="search" action="https://lifeguidehubb.com/search" method="GET" class="hidden md:flex items-center"> <label for="search-desktop" class="sr-only">Search articles</label> <input type="search" id="search-desktop" name="q" placeholder="Search guides..." class="input-brutal px-4 py-2 w-48 lg:w-64 bg-gray-50 rounded-l-lg focus:bg-white" aria-label="Search for how-to guides"> <button type="submit" class="btn-brutal bg-neo-yellow px-4 py-2 rounded-r-lg font-bold" aria-label="Submit search"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> </svg> </button> </form> <!-- Mobile Menu Button --> <button type="button" id="mobile-menu-btn" class="lg:hidden btn-brutal bg-white p-2 rounded-lg" aria-expanded="false" aria-controls="mobile-menu" aria-label="Toggle navigation menu"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="mobile-menu lg:hidden fixed inset-0 bg-white z-50" aria-hidden="true"> <div class="flex flex-col h-full"> <!-- Mobile Menu Header --> <div class="flex items-center justify-between p-4 border-b-4 border-black"> <span class="font-display font-bold text-xl">LifeGuide Hub</span> <button type="button" id="mobile-menu-close" class="btn-brutal bg-neo-pink p-2 rounded-lg" aria-label="Close menu"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Mobile Search --> <div class="p-4 border-b-2 border-gray-200"> <form role="search" action="https://lifeguidehubb.com/search" method="GET"> <label for="search-mobile" class="sr-only">Search articles</label> <div class="flex"> <input type="search" id="search-mobile" name="q" placeholder="Search guides..." class="input-brutal flex-1 px-4 py-3 bg-gray-50 rounded-l-lg"> <button type="submit" class="btn-brutal bg-neo-yellow px-4 rounded-r-lg font-bold"> Search </button> </div> </form> </div> <!-- Mobile Navigation --> <nav role="navigation" aria-label="Mobile navigation" class="flex-1 overflow-y-auto p-4"> <ul class="space-y-2"> <li> <a href="https://lifeguidehubb.com" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 "> <svg class="flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> Home </a> </li> <li> <a href="https://lifeguidehubb.com/categories/health-fitness" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #10B981"></span> Health & Fitness </a> </li> <li> <a href="https://lifeguidehubb.com/categories/beauty-grooming" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #EC4899"></span> Beauty & Grooming </a> </li> <li> <a href="https://lifeguidehubb.com/categories/home-garden" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #4ECDC4"></span> Home & Garden </a> </li> <li> <a href="https://lifeguidehubb.com/categories/diy-repairs" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #F59E0B"></span> DIY & Repairs </a> </li> <li> <a href="https://lifeguidehubb.com/categories/cooking-recipes" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #F38181"></span> Cooking & Recipes </a> </li> <li> <a href="https://lifeguidehubb.com/categories/beverages" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #06B6D4"></span> Drinks & Beverages </a> </li> <li> <a href="https://lifeguidehubb.com/categories/pets-animals" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #95E1D3"></span> Pets & Animals </a> </li> <li> <a href="https://lifeguidehubb.com/categories/relationships" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #EF4444"></span> Relationships </a> </li> <li> <a href="https://lifeguidehubb.com/categories/family-parenting" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #8B5CF6"></span> Family & Parenting </a> </li> <li> <a href="https://lifeguidehubb.com/categories/social-skills" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #6366F1"></span> Social Skills </a> </li> <li> <a href="https://lifeguidehubb.com/categories/career-work" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #3B82F6"></span> Career & Work </a> </li> <li> <a href="https://lifeguidehubb.com/categories/education-study" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 bg-gray-100" style="background-color: #0EA5E933"> <span class="w-3 h-3 rounded-full" style="background-color: #0EA5E9"></span> Education & Study </a> </li> <li> <a href="https://lifeguidehubb.com/categories/technology" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #6B7280"></span> Technology </a> </li> <li> <a href="https://lifeguidehubb.com/categories/gaming" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #8B5CF6"></span> Gaming </a> </li> <li> <a href="https://lifeguidehubb.com/categories/arts-crafts" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #FF6B6B"></span> Arts & Crafts </a> </li> <li> <a href="https://lifeguidehubb.com/categories/music" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #A855F7"></span> Music </a> </li> <li> <a href="https://lifeguidehubb.com/categories/photography-video" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #14B8A6"></span> Photography & Video </a> </li> <li> <a href="https://lifeguidehubb.com/categories/writing" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #64748B"></span> Writing </a> </li> <li> <a href="https://lifeguidehubb.com/categories/sports" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #22C55E"></span> Sports </a> </li> <li> <a href="https://lifeguidehubb.com/categories/outdoor-activities" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #84CC16"></span> Outdoor Activities </a> </li> <li> <a href="https://lifeguidehubb.com/categories/fashion-style" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #F472B6"></span> Fashion & Style </a> </li> <li> <a href="https://lifeguidehubb.com/categories/travel" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #0891B2"></span> Travel </a> </li> <li> <a href="https://lifeguidehubb.com/categories/automotive" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #78716C"></span> Automotive </a> </li> <li> <a href="https://lifeguidehubb.com/categories/finance-money" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #059669"></span> Finance & Money </a> </li> <li> <a href="https://lifeguidehubb.com/categories/holidays-events" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #DC2626"></span> Holidays & Events </a> </li> <li> <a href="https://lifeguidehubb.com/categories/other" class="flex items-center gap-3 px-4 py-3 font-medium text-lg rounded-lg hover:bg-gray-100 " style=""> <span class="w-3 h-3 rounded-full" style="background-color: #9CA3AF"></span> Other Guides </a> </li> </ul> </nav> <!-- Mobile Footer --> <div class="p-4 border-t-2 border-gray-200"> <div class="flex justify-center gap-4 text-sm text-gray-600"> <a href="https://lifeguidehubb.com/about" class="hover:text-black">About</a> <a href="https://lifeguidehubb.com/contact" class="hover:text-black">Contact</a> <a href="https://lifeguidehubb.com/terms" class="hover:text-black">Terms</a> </div> </div> </div> </div> </header> <!-- Main Content --> <main id="main-content" role="main" class="flex-1"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-8"> <!-- Breadcrumb --> <nav aria-label="Breadcrumb" class="mb-6"> <ol class="flex flex-wrap items-center gap-2 text-sm"> <li> <a href="https://lifeguidehubb.com" class="text-gray-600 hover:text-black">Home</a> </li> <li class="text-gray-400">/</li> <li> <a href="https://lifeguidehubb.com/categories/education-study" class="text-gray-600 hover:text-black"> Education & Study </a> </li> <li class="text-gray-400">/</li> <li aria-current="page" class="font-medium text-black line-clamp-1"> How to Make a Basic JavaScript Quiz </li> </ol> </nav> <div class="lg:grid lg:grid-cols-3 lg:gap-8"> <!-- Main Content --> <article class="lg:col-span-2"> <!-- Article Header --> <header class="bg-white border-3 border-black rounded-lg p-6 md:p-8 mb-8" style="border-left: 8px solid #0EA5E9"> <!-- Category Badge --> <div class="flex items-center gap-2 mb-4"> <span class="w-10 h-10 flex items-center justify-center rounded-lg border-2 border-black" style="background-color: #0EA5E933;" aria-hidden="true"> <svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path> <path d="M8 7h6"></path> <path d="M8 11h8"></path> </svg> </span> <a href="https://lifeguidehubb.com/categories/education-study" class="text-sm font-bold px-3 py-1 rounded-full border-2 border-black hover:shadow-brutal transition-shadow" style="background-color: #0EA5E933;"> Education & Study </a> </div> <!-- Title --> <h1 class="font-display text-2xl md:text-4xl font-bold mb-4 leading-tight"> How to Make a Basic JavaScript Quiz </h1> <!-- Headline/Summary --> <p class="text-gray-600 text-lg mb-6"> Set up your programming environment., Create the files you need., Set up your files and folders., Start with the start function., Create the variables., Code the ask function., Code the score function., Add a function to lazy call two other... </p> <!-- Meta Info --> <div class="flex flex-wrap items-center gap-4 text-sm"> <span class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 rounded-full font-medium"> <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/> </svg> 17 Steps </span> <span class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 rounded-full font-medium"> <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> 6 min read </span> <span class="px-3 py-1.5 rounded-full font-bold border-2 border-black bg-neo-orange"> Advanced </span> </div> </header> <!-- Steps Section --> <section aria-labelledby="steps-heading" class="mb-8"> <h2 id="steps-heading" class="font-display text-xl font-bold mb-6 flex items-center gap-2"> <span class="w-2 h-2 bg-neo-pink rounded-full" aria-hidden="true"></span> Step-by-Step Guide </h2> <ol class="space-y-6" role="list" aria-label="How to Make a Basic JavaScript Quiz - Steps"> <li id="step-1" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 1 of 17: Set up your programming environment."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 1 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 1: </span> Set up your programming environment. </h3> <div class="text-gray-600 prose prose-sm max-w-none"> You will need a text editing program to write your code in.<br /> <br /> You can write it in a notepad document but you will probably want an editor designed for programming such as Notepad++ (Windows), Atom (Mac) or Notepadqq (Linux).<br /> <br /> However any basic text editor does work. </div> </div> </div> </li> <li id="step-2" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 2 of 17: Create the files you need."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 2 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 2: </span> Create the files you need. </h3> <div class="text-gray-600 prose prose-sm max-w-none"> You will need two files: one in HTML that is read by the browser and one in JavaScript that is the game. , Because you only need two files, you don't need any sort of complex filing system.<br /> <br /> As long as the two files are in the same level of the same folder it will work.<br /> <br /> So save both of your files in the same place.<br /> <br /> To save as html add a .html extension.<br /> <br /> Us a .js extension for the JavaScript file.Set up code in your files.<br /> <br /> The JavaScript file requires no setting up but the HTML does.<br /> <br /> In your HTML document add the following code: <!DOCTYPE html> <html> <head> <title>Page Name</title> <script src="quiz.js"></script> </head> <body> </body> </html> This is the basic set up for almost any page in HTML. <!DOCTYPE html> defines the code as HTML to the browser. <html> tells the browser that everything in that section is written in HTML unless specified otherwise. <head> is a section that holds information about the page such as the title. <title> is the name that shows up in search results and the name on the tab. <script scr="quiz.js"> is linking the JavaScript file to the HTML file. <body> holds everything that is visible on the page itself. , First you will create a function called start.<br /> <br /> The rest of your game code will go in this function.<br /> <br /> This is so you can start your game using a button on your HTML page.<br /> <br /> The following code creates this function: var start = function(){ } This code creates a variable(var) named 'start':var start.<br /> <br /> This variable is a function.<br /> <br /> A variable is a key word that has a bit of data assigned to it, in this case a function.<br /> <br /> A function is a section of code that can be 'called'.<br /> <br /> When it is called it runs the code inside its {}.<br /> <br /> This is so that you don't have to write out the same thing more than once. , These variables will/do contain data such as: the score, the question, and the user input.<br /> <br /> They go inside the start function's {}. var correct = 0; var incorrect = 0; var question = "none"; var input = "none"; var answer = "none"; correct:<br /> This is how many questions the user has answered correctly. incorrect:<br /> This is how many questions the user has answered incorrectly. question:<br /> This is the question that the user will be given, it will change for each new question. input:<br /> This will hold the user's answer or their 'input'. answer:<br /> This will hold the correct answer to the question.<br /> <br /> Note: when you use a variable you don't need to write var, you do this only when making the variable. , The ask function asks the user the var question through a prompt.<br /> <br /> A prompt is a pop-up box that requires the user to type their answer into the box. var ask = function(){ input = prompt(question); }; Ask is a variable which is a function.<br /> <br /> The function sets the variable input to the response of the prompt containing the variable question.<br /> <br /> So in summary:<br /> The function asks the user a question in a prompt.<br /> <br /> The users response is then set to the variable input.<br /> <br /> So input is the answer that the user put. , The score function reacts to whether the users input is correct or not.<br /> <br /> It then responds appropriately. var score = function(){ if(input == answer){ correct = correct+1; alert("correct"); }else{ incorrect = incorrect+1; alert("incorrect"); } }; The variable score is a function. if the variable input is equal to the variable answer(this is correct) the variable correct it equal to itself plus one.<br /> <br /> And it gives the user an alert that reads: 'correct'. else the variable incorrect is equal to itself plus one.<br /> <br /> And it gives the user an alert that reads: 'incorrect'.<br /> <br /> In summary: this function checks if the users input is the same as the answer, meaning it is correct.<br /> <br /> If there is a match then the amount correct goes up one and it alerts the user that their answer was correct.<br /> <br /> If there wasn't a watch the amount of incorrect goes up one and it alerts the user their answer was incorrect. , This will make writing up the next bit easier. var lazy = function(){ ask(); score(); }; The variable lazy is a function.<br /> <br /> When run it calls two functions: ask(); and score();.<br /> <br /> In summary:<br /> This function just calls two other functions.<br /> <br /> It means when you want to call both 'ask' and 'score,' you don't have to call them separately; you can just call 'lazy'. , This could say anything.<br /> <br /> This code is a basic welcome.<br /> <br /> You don't need to have a welcome but it can be nice for the user. alert("welcome to my quiz, you will be answering 10 questions.") </div> </div> </div> </li> <li id="step-3" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 3 of 17: Set up your files and folders."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 3 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 3: </span> Set up your files and folders. </h3> <div class="text-gray-600 prose prose-sm max-w-none"> The following code demonstrates how. question = "What is the matrix?"; answer = "There is no spoon"; The single = assigns the thing on the right to the variable on the left.<br /> <br /> This means that the variable question now holds the text(string)"What is the matrix?".<br /> <br /> And the variable answer holds the text(string) "There is no spoon". , This function calls the functions 'ask' and 'score'. lazy(); The function 'ask' asks the user the question and saves the users input to the variable input.<br /> <br /> The function 'score' checks if the users input matches the variable answer and changes the variables 'correct' and 'incorrect' appropriately. , First change the variable 'question' to your new question.<br /> <br /> Then change the variable 'answer' to the correct answer to your new question.<br /> <br /> Then run the function ask. , This could involve telling them there score or the percentage of questions they got right.<br /> <br /> How many they got correct: alert("Well done, you got " + correct + " out of 10") </div> </div> </div> </li> <li id="step-4" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 4 of 17: Start with the start function."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 4 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 4: </span> Start with the start function. </h3> <div class="text-gray-600 prose prose-sm max-w-none"> At the very beginning you created a function named 'start'.<br /> <br /> You want to make the quiz start on the click of a play button.<br /> <br /> In the HTML body tag add the following code. <button onClick="start()">play</button> This adds a button to your page with the word 'start' on it.<br /> <br /> When the user clicks on it it will run the function 'start'.<br /> <br /> This function contains the code of the game. , Using the tag you can add plane text to your web page.<br /> <br /> You could warn the user that the answers are case sensitive or tell them to have a nice day.<br /> <br /> Fell free to add whatever you want to. , Does it work how you expect? , You could add more questions or messages, edit the HTML to make the page look nicer. </div> </div> </div> </li> <li id="step-5" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 5 of 17: Create the variables."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 5 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 5: </span> Create the variables. </h3> </div> </div> </li> <li id="step-6" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 6 of 17: Code the ask function."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 6 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 6: </span> Code the ask function. </h3> </div> </div> </li> <li id="step-7" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 7 of 17: Code the score function."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 7 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 7: </span> Code the score function. </h3> </div> </div> </li> <li id="step-8" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 8 of 17: Add a function to lazy call two other functions."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 8 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 8: </span> Add a function to lazy call two other functions. </h3> </div> </div> </li> <li id="step-9" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 9 of 17: Write an introduction to your quiz."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 9 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 9: </span> Write an introduction to your quiz. </h3> </div> </div> </li> <li id="step-10" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 10 of 17: Set your variables 'question' and 'answer' to a question and answer."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 10 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 10: </span> Set your variables 'question' and 'answer' to a question and answer. </h3> </div> </div> </li> <li id="step-11" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 11 of 17: Call the function 'lazy'."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 11 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 11: </span> Call the function 'lazy'. </h3> </div> </div> </li> <li id="step-12" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 12 of 17: Continue this process to add more questions."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 12 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 12: </span> Continue this process to add more questions. </h3> </div> </div> </li> <li id="step-13" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 13 of 17: End the game when you have enough questions."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 13 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 13: </span> End the game when you have enough questions. </h3> </div> </div> </li> <li id="step-14" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 14 of 17: Make a start button to launch the game."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 14 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 14: </span> Make a start button to launch the game. </h3> </div> </div> </li> <li id="step-15" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 15 of 17: Add text to the page about your game."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 15 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 15: </span> Add text to the page about your game. </h3> </div> </div> </li> <li id="step-16" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 16 of 17: Test your game."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 16 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 16: </span> Test your game. </h3> </div> </div> </li> <li id="step-17" class="card-brutal bg-white rounded-lg p-6" role="listitem" aria-label="Step 17 of 17: Adapt it."> <div class="flex items-start gap-4"> <!-- Step Number --> <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-full border-3 border-black font-display font-bold text-xl" style="background-color: #0EA5E9" aria-hidden="true"> 17 </div> <!-- Step Content --> <div class="flex-1 min-w-0"> <h3 class="font-display font-bold text-lg mb-2"> <span class="sr-only">Step 17: </span> Adapt it. </h3> </div> </div> </li> </ol> </section> <!-- Full Content Section --> <section aria-labelledby="content-heading" class="mb-8"> <h2 id="content-heading" class="font-display text-xl font-bold mb-6 flex items-center gap-2"> <span class="w-2 h-2 bg-neo-blue rounded-full"></span> Detailed Guide </h2> <div class="card-brutal bg-white rounded-lg p-6 md:p-8"> <div class="prose prose-lg max-w-none text-gray-700"> <p class="mb-4">You will need a text editing program to write your code in.<br /> <br /> You can write it in a notepad document but you will probably want an editor designed for programming such as Notepad++ (Windows), Atom (Mac) or Notepadqq (Linux).<br /> <br /> However any basic text editor does work.</p><p class="mb-4">You will need two files: one in HTML that is read by the browser and one in JavaScript that is the game. , Because you only need two files, you don't need any sort of complex filing system.<br /> <br /> As long as the two files are in the same level of the same folder it will work.<br /> <br /> So save both of your files in the same place.<br /> <br /> To save as html add a .html extension.<br /> <br /> Us a .js extension for the JavaScript file.Set up code in your files.<br /> <br /> The JavaScript file requires no setting up but the HTML does.<br /> <br /> In your HTML document add the following code: <!DOCTYPE html> <html> <head> <title>Page Name</title> <script src="quiz.js"></script> </head> <body> </body> </html> This is the basic set up for almost any page in HTML. <!DOCTYPE html> defines the code as HTML to the browser. <html> tells the browser that everything in that section is written in HTML unless specified otherwise. <head> is a section that holds information about the page such as the title. <title> is the name that shows up in search results and the name on the tab. <script scr="quiz.js"> is linking the JavaScript file to the HTML file. <body> holds everything that is visible on the page itself. , First you will create a function called start.<br /> <br /> The rest of your game code will go in this function.<br /> <br /> This is so you can start your game using a button on your HTML page.<br /> <br /> The following code creates this function: var start = function(){ } This code creates a variable(var) named 'start':var start.<br /> <br /> This variable is a function.<br /> <br /> A variable is a key word that has a bit of data assigned to it, in this case a function.<br /> <br /> A function is a section of code that can be 'called'.<br /> <br /> When it is called it runs the code inside its {}.<br /> <br /> This is so that you don't have to write out the same thing more than once. , These variables will/do contain data such as: the score, the question, and the user input.<br /> <br /> They go inside the start function's {}. var correct = 0; var incorrect = 0; var question = "none"; var input = "none"; var answer = "none"; correct:<br /> This is how many questions the user has answered correctly. incorrect:<br /> This is how many questions the user has answered incorrectly. question:<br /> This is the question that the user will be given, it will change for each new question. input:<br /> This will hold the user's answer or their 'input'. answer:<br /> This will hold the correct answer to the question.<br /> <br /> Note: when you use a variable you don't need to write var, you do this only when making the variable. , The ask function asks the user the var question through a prompt.<br /> <br /> A prompt is a pop-up box that requires the user to type their answer into the box. var ask = function(){ input = prompt(question); }; Ask is a variable which is a function.<br /> <br /> The function sets the variable input to the response of the prompt containing the variable question.<br /> <br /> So in summary:<br /> The function asks the user a question in a prompt.<br /> <br /> The users response is then set to the variable input.<br /> <br /> So input is the answer that the user put. , The score function reacts to whether the users input is correct or not.<br /> <br /> It then responds appropriately. var score = function(){ if(input == answer){ correct = correct+1; alert("correct"); }else{ incorrect = incorrect+1; alert("incorrect"); } }; The variable score is a function. if the variable input is equal to the variable answer(this is correct) the variable correct it equal to itself plus one.<br /> <br /> And it gives the user an alert that reads: 'correct'. else the variable incorrect is equal to itself plus one.<br /> <br /> And it gives the user an alert that reads: 'incorrect'.<br /> <br /> In summary: this function checks if the users input is the same as the answer, meaning it is correct.<br /> <br /> If there is a match then the amount correct goes up one and it alerts the user that their answer was correct.<br /> <br /> If there wasn't a watch the amount of incorrect goes up one and it alerts the user their answer was incorrect. , This will make writing up the next bit easier. var lazy = function(){ ask(); score(); }; The variable lazy is a function.<br /> <br /> When run it calls two functions: ask(); and score();.<br /> <br /> In summary:<br /> This function just calls two other functions.<br /> <br /> It means when you want to call both 'ask' and 'score,' you don't have to call them separately; you can just call 'lazy'. , This could say anything.<br /> <br /> This code is a basic welcome.<br /> <br /> You don't need to have a welcome but it can be nice for the user. alert("welcome to my quiz, you will be answering 10 questions.")</p><p class="mb-4">The following code demonstrates how. question = "What is the matrix?"; answer = "There is no spoon"; The single = assigns the thing on the right to the variable on the left.<br /> <br /> This means that the variable question now holds the text(string)"What is the matrix?".<br /> <br /> And the variable answer holds the text(string) "There is no spoon". , This function calls the functions 'ask' and 'score'. lazy(); The function 'ask' asks the user the question and saves the users input to the variable input.<br /> <br /> The function 'score' checks if the users input matches the variable answer and changes the variables 'correct' and 'incorrect' appropriately. , First change the variable 'question' to your new question.<br /> <br /> Then change the variable 'answer' to the correct answer to your new question.<br /> <br /> Then run the function ask. , This could involve telling them there score or the percentage of questions they got right.<br /> <br /> How many they got correct: alert("Well done, you got " + correct + " out of 10")</p><p class="mb-4">At the very beginning you created a function named 'start'.<br /> <br /> You want to make the quiz start on the click of a play button.<br /> <br /> In the HTML body tag add the following code. <button onClick="start()">play</button> This adds a button to your page with the word 'start' on it.<br /> <br /> When the user clicks on it it will run the function 'start'.<br /> <br /> This function contains the code of the game. , Using the tag you can add plane text to your web page.<br /> <br /> You could warn the user that the answers are case sensitive or tell them to have a nice day.<br /> <br /> Fell free to add whatever you want to. , Does it work how you expect? , You could add more questions or messages, edit the HTML to make the page look nicer.</p> </div> </div> </section> <!-- Author Box --> <section aria-labelledby="author-heading" class="mb-8"> <h2 id="author-heading" class="font-display text-xl font-bold mb-6 flex items-center gap-2"> <span class="w-2 h-2 bg-neo-purple rounded-full"></span> About the Author </h2> <a href="https://lifeguidehubb.com/authors/tyler-bishop" class="card-brutal bg-white rounded-lg p-6 md:p-8 flex flex-col sm:flex-row items-start gap-6 group hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all block"> <!-- Author Avatar --> <div class="w-20 h-20 rounded-full bg-#9CA3AF-100 border-3 border-black flex items-center justify-center text-3xl font-black text-#9CA3AF-600 flex-shrink-0"> T </div> <div class="flex-1 min-w-0"> <!-- Author Name --> <h3 class="font-display font-bold text-xl mb-2 group-hover:text-neo-pink transition-colors"> Tyler Bishop </h3> <!-- Author Bio --> <p class="text-gray-600 mb-4 line-clamp-3"> Specializes in breaking down complex practical skills topics into simple steps. </p> <!-- Author Stats & Expertise --> <div class="flex flex-wrap items-center gap-4"> <span class="text-sm text-gray-500"> <span class="font-bold text-gray-900">63</span> articles </span> </div> <span class="inline-flex items-center gap-1 mt-4 text-sm font-bold text-neo-pink"> View all articles <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/> </svg> </span> </div> </a> </section> <!-- Share Section --> <div class="flex flex-wrap items-center gap-4 mb-8"> <span class="font-bold">Share this guide:</span> <a href="https://twitter.com/intent/tweet?text=How+to+Make+a+Basic+JavaScript+Quiz&url=https%3A%2F%2Flifeguidehubb.com%2Fcategories%2Feducation-study%2Fhow-to-make-a-basic-javascript-quiz" target="_blank" rel="noopener noreferrer" class="btn-brutal bg-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-gray-100"> Twitter </a> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flifeguidehubb.com%2Fcategories%2Feducation-study%2Fhow-to-make-a-basic-javascript-quiz" target="_blank" rel="noopener noreferrer" class="btn-brutal bg-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-gray-100"> Facebook </a> <a href="mailto:?subject=How+to+Make+a+Basic+JavaScript+Quiz&body=Check+out+this+guide%3A+https%3A%2F%2Flifeguidehubb.com%2Fcategories%2Feducation-study%2Fhow-to-make-a-basic-javascript-quiz" class="btn-brutal bg-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-gray-100"> Email </a> </div> <!-- Star Rating Section --> <section aria-labelledby="rating-heading" class="mb-8"> <div class="card-brutal bg-white rounded-lg p-6 md:p-8" style="border-left: 6px solid #0EA5E9"> <h2 id="rating-heading" class="font-display text-xl font-bold mb-4 flex items-center gap-2"> <svg class="w-6 h-6 text-yellow-500" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> Rate This Guide </h2> <!-- Current Rating Stats --> <div class="flex flex-col sm:flex-row items-start sm:items-center gap-6 mb-6" id="rating-stats-container"> <!-- Average Rating Display --> <div class="text-center"> <div class="text-4xl font-black text-gray-900" id="rating-average"> <span class="animate-pulse text-gray-300">--</span> </div> <div class="flex items-center justify-center gap-1 my-2" id="average-stars"> <svg class="w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> <svg class="w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> <svg class="w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> <svg class="w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> <svg class="w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> </div> <div class="text-sm text-gray-500" id="rating-count"> <span class="animate-pulse">Loading...</span> </div> </div> <!-- Rating Distribution --> <div class="flex-1 space-y-2 w-full sm:w-auto" id="rating-distribution"> <div class="flex items-center gap-2"> <span class="text-sm font-medium w-8">5</span> <svg class="w-4 h-4 text-yellow-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> <div class="flex-1 h-3 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-yellow-400 rounded-full transition-all duration-300" id="rating-bar-5" style="width: 0%"></div> </div> <span class="text-sm text-gray-500 w-8 text-right" id="rating-count-5"> 0 </span> </div> <div class="flex items-center gap-2"> <span class="text-sm font-medium w-8">4</span> <svg class="w-4 h-4 text-yellow-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> <div class="flex-1 h-3 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-yellow-400 rounded-full transition-all duration-300" id="rating-bar-4" style="width: 0%"></div> </div> <span class="text-sm text-gray-500 w-8 text-right" id="rating-count-4"> 0 </span> </div> <div class="flex items-center gap-2"> <span class="text-sm font-medium w-8">3</span> <svg class="w-4 h-4 text-yellow-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> <div class="flex-1 h-3 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-yellow-400 rounded-full transition-all duration-300" id="rating-bar-3" style="width: 0%"></div> </div> <span class="text-sm text-gray-500 w-8 text-right" id="rating-count-3"> 0 </span> </div> <div class="flex items-center gap-2"> <span class="text-sm font-medium w-8">2</span> <svg class="w-4 h-4 text-yellow-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> <div class="flex-1 h-3 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-yellow-400 rounded-full transition-all duration-300" id="rating-bar-2" style="width: 0%"></div> </div> <span class="text-sm text-gray-500 w-8 text-right" id="rating-count-2"> 0 </span> </div> <div class="flex items-center gap-2"> <span class="text-sm font-medium w-8">1</span> <svg class="w-4 h-4 text-yellow-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> <div class="flex-1 h-3 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-yellow-400 rounded-full transition-all duration-300" id="rating-bar-1" style="width: 0%"></div> </div> <span class="text-sm text-gray-500 w-8 text-right" id="rating-count-1"> 0 </span> </div> </div> </div> <!-- Interactive Star Rating --> <div class="border-t-2 border-gray-100 pt-6"> <p class="text-gray-600 mb-4" id="rating-prompt"> How helpful was this guide? Click to rate: </p> <div class="flex items-center gap-1" id="star-rating-input" role="radiogroup" aria-label="Rate this guide"> <button type="button" class="star-btn p-1 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 rounded" data-rating="1" aria-label="1 star" role="radio" aria-checked="false"> <svg class="w-10 h-10 text-gray-300 transition-colors" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> </button> <button type="button" class="star-btn p-1 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 rounded" data-rating="2" aria-label="2 stars" role="radio" aria-checked="false"> <svg class="w-10 h-10 text-gray-300 transition-colors" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> </button> <button type="button" class="star-btn p-1 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 rounded" data-rating="3" aria-label="3 stars" role="radio" aria-checked="false"> <svg class="w-10 h-10 text-gray-300 transition-colors" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> </button> <button type="button" class="star-btn p-1 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 rounded" data-rating="4" aria-label="4 stars" role="radio" aria-checked="false"> <svg class="w-10 h-10 text-gray-300 transition-colors" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> </button> <button type="button" class="star-btn p-1 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 rounded" data-rating="5" aria-label="5 stars" role="radio" aria-checked="false"> <svg class="w-10 h-10 text-gray-300 transition-colors" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> </button> </div> <!-- Rating Status Message --> <div id="rating-status" class="mt-3 text-sm font-medium hidden"></div> </div> </div> </section> </article> <!-- Sidebar --> <aside class="lg:col-span-1"> <!-- Quick Navigation --> <div class="card-brutal bg-white rounded-lg p-6 mb-6 sticky top-24"> <h3 class="font-display font-bold text-lg mb-4 flex items-center gap-2"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/> </svg> Quick Navigation </h3> <nav aria-label="Article sections"> <ol class="space-y-2 text-sm"> <li> <a href="#step-1" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 1 </span> <span class="line-clamp-1">Set up your programming enviro...</span> </a> </li> <li> <a href="#step-2" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 2 </span> <span class="line-clamp-1">Create the files you need.</span> </a> </li> <li> <a href="#step-3" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 3 </span> <span class="line-clamp-1">Set up your files and folders.</span> </a> </li> <li> <a href="#step-4" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 4 </span> <span class="line-clamp-1">Start with the start function.</span> </a> </li> <li> <a href="#step-5" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 5 </span> <span class="line-clamp-1">Create the variables.</span> </a> </li> <li> <a href="#step-6" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 6 </span> <span class="line-clamp-1">Code the ask function.</span> </a> </li> <li> <a href="#step-7" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 7 </span> <span class="line-clamp-1">Code the score function.</span> </a> </li> <li> <a href="#step-8" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 8 </span> <span class="line-clamp-1">Add a function to lazy call...</span> </a> </li> <li> <a href="#step-9" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 9 </span> <span class="line-clamp-1">Write an introduction to your...</span> </a> </li> <li> <a href="#step-10" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 10 </span> <span class="line-clamp-1">Set your variables 'question'...</span> </a> </li> <li> <a href="#step-11" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 11 </span> <span class="line-clamp-1">Call the function 'lazy'.</span> </a> </li> <li> <a href="#step-12" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 12 </span> <span class="line-clamp-1">Continue this process to add...</span> </a> </li> <li> <a href="#step-13" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 13 </span> <span class="line-clamp-1">End the game when you have...</span> </a> </li> <li> <a href="#step-14" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 14 </span> <span class="line-clamp-1">Make a start button to launch...</span> </a> </li> <li> <a href="#step-15" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 15 </span> <span class="line-clamp-1">Add text to the page about...</span> </a> </li> <li> <a href="#step-16" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 16 </span> <span class="line-clamp-1">Test your game.</span> </a> </li> <li> <a href="#step-17" class="flex items-center gap-2 text-gray-600 hover:text-black hover:underline"> <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full text-xs font-bold border-2 border-gray-300"> 17 </span> <span class="line-clamp-1">Adapt it.</span> </a> </li> </ol> </nav> </div> </aside> </div> <!-- More From Category --> <section aria-labelledby="more-articles" class="mt-12 mb-8"> <h2 id="more-articles" class="font-display text-xl font-bold mb-6 flex items-center gap-2"> <span class="w-2 h-2 bg-neo-green rounded-full"></span> More from Education & Study </h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <article class="card-brutal bg-white rounded-lg p-4 group"> <div class="flex items-center gap-2 mb-2"> <span class="w-2 h-2 rounded-full" style="background-color: #0EA5E9"></span> <span class="text-xs text-gray-500">5 min read</span> </div> <h3 class="font-bold mb-2 group-hover:text-neo-pink transition-colors line-clamp-2"> <a href="https://lifeguidehubb.com/categories/education-study/how-to-critique-literature" class="hover:underline"> How to Critique Literature </a> </h3> <div class="flex items-center gap-2 text-xs text-gray-500"> <span>9 steps</span> <span class="px-2 py-0.5 rounded bg-gray-100">Medium</span> </div> </article> <article class="card-brutal bg-white rounded-lg p-4 group"> <div class="flex items-center gap-2 mb-2"> <span class="w-2 h-2 rounded-full" style="background-color: #0EA5E9"></span> <span class="text-xs text-gray-500">2 min read</span> </div> <h3 class="font-bold mb-2 group-hover:text-neo-pink transition-colors line-clamp-2"> <a href="https://lifeguidehubb.com/categories/education-study/how-to-learn-head-and-chest-voice-in-singing" class="hover:underline"> How to Learn Head and Chest Voice in Singing </a> </h3> <div class="flex items-center gap-2 text-xs text-gray-500"> <span>8 steps</span> <span class="px-2 py-0.5 rounded bg-gray-100">Medium</span> </div> </article> <article class="card-brutal bg-white rounded-lg p-4 group"> <div class="flex items-center gap-2 mb-2"> <span class="w-2 h-2 rounded-full" style="background-color: #0EA5E9"></span> <span class="text-xs text-gray-500">6 min read</span> </div> <h3 class="font-bold mb-2 group-hover:text-neo-pink transition-colors line-clamp-2"> <a href="https://lifeguidehubb.com/categories/education-study/how-to-start-reading-ebooks" class="hover:underline"> How to Start Reading eBooks </a> </h3> <div class="flex items-center gap-2 text-xs text-gray-500"> <span>9 steps</span> <span class="px-2 py-0.5 rounded bg-gray-100">Advanced</span> </div> </article> </div> </section> <!-- Related Guides (Topic Cluster) --> <section aria-labelledby="related-guides" class="mb-8"> <h2 id="related-guides" class="font-display text-xl font-bold mb-6 flex items-center gap-2"> <span class="w-2 h-2 bg-neo-purple rounded-full"></span> Related Guides </h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <article class="card-brutal bg-white rounded-lg p-4 group"> <div class="flex items-center gap-2 mb-2"> <span class="w-2 h-2 rounded-full bg-neo-purple"></span> <span class="text-xs text-gray-500">7 min read</span> </div> <h3 class="font-bold mb-2 group-hover:text-neo-pink transition-colors line-clamp-2"> <a href="https://lifeguidehubb.com/categories/education-study/how-to-write-a-legal-transcript" class="hover:underline"> How to Write a Legal Transcript </a> </h3> <div class="flex items-center gap-2 text-xs text-gray-500"> <span>19 steps</span> <span class="px-2 py-0.5 rounded bg-gray-100">Advanced</span> </div> </article> <article class="card-brutal bg-white rounded-lg p-4 group"> <div class="flex items-center gap-2 mb-2"> <span class="w-2 h-2 rounded-full bg-neo-purple"></span> <span class="text-xs text-gray-500">2 min read</span> </div> <h3 class="font-bold mb-2 group-hover:text-neo-pink transition-colors line-clamp-2"> <a href="https://lifeguidehubb.com/categories/education-study/how-to-delete-browsing-history" class="hover:underline"> How to Delete Browsing History </a> </h3> <div class="flex items-center gap-2 text-xs text-gray-500"> <span>6 steps</span> <span class="px-2 py-0.5 rounded bg-gray-100">Medium</span> </div> </article> <article class="card-brutal bg-white rounded-lg p-4 group"> <div class="flex items-center gap-2 mb-2"> <span class="w-2 h-2 rounded-full bg-neo-purple"></span> <span class="text-xs text-gray-500">3 min read</span> </div> <h3 class="font-bold mb-2 group-hover:text-neo-pink transition-colors line-clamp-2"> <a href="https://lifeguidehubb.com/categories/education-study/how-to-use-adverbs-in-spanish" class="hover:underline"> How to Use Adverbs in Spanish </a> </h3> <div class="flex items-center gap-2 text-xs text-gray-500"> <span>4 steps</span> <span class="px-2 py-0.5 rounded bg-gray-100">Medium</span> </div> </article> </div> </section> <!-- Star Rating JavaScript --> <script> (function() { const ratingContainer = document.getElementById('star-rating-input'); const statusEl = document.getElementById('rating-status'); const averageEl = document.getElementById('rating-average'); const countEl = document.getElementById('rating-count'); const promptEl = document.getElementById('rating-prompt'); const starButtons = ratingContainer ? ratingContainer.querySelectorAll('.star-btn') : []; const articleId = 54046; let currentRating = 0; let isSubmitting = false; let isLoading = true; // Update star colors based on rating value function updateStarColors(rating, isHover = false) { starButtons.forEach((btn, index) => { const svg = btn.querySelector('svg'); const starValue = index + 1; if (starValue <= rating) { svg.classList.remove('text-gray-300'); svg.classList.add('text-yellow-400'); } else { svg.classList.remove('text-yellow-400'); svg.classList.add('text-gray-300'); } }); } // Update rating prompt text function updatePromptText(userRating) { if (promptEl) { if (userRating && userRating > 0) { promptEl.innerHTML = 'You rated this guide <strong>' + userRating + ' star' + (userRating !== 1 ? 's' : '') + '</strong>. Click to change your rating:'; } else { promptEl.textContent = 'How helpful was this guide? Click to rate:'; } } } // Show status message function showStatus(message, type = 'success') { statusEl.textContent = message; statusEl.classList.remove('hidden', 'text-green-600', 'text-red-600', 'text-gray-600'); if (type === 'success') { statusEl.classList.add('text-green-600'); } else if (type === 'error') { statusEl.classList.add('text-red-600'); } else { statusEl.classList.add('text-gray-600'); } } // Update rating statistics in UI function updateStats(stats) { if (averageEl && stats.average !== undefined) { averageEl.textContent = parseFloat(stats.average).toFixed(1); } if (countEl && stats.total_count !== undefined) { countEl.textContent = stats.total_count + ' rating' + (stats.total_count !== 1 ? 's' : ''); } // Update distribution bars if present const totalRatings = stats.total_count || 0; const distribution = stats.distribution || {}; for (let i = 1; i <= 5; i++) { const barEl = document.getElementById('rating-bar-' + i); const countBarEl = document.getElementById('rating-count-' + i); if (barEl && countBarEl) { const starCount = distribution[i] || 0; const percentage = totalRatings > 0 ? (starCount / totalRatings * 100) : 0; barEl.style.width = percentage + '%'; countBarEl.textContent = starCount; } } // Update average stars display const avgStarsContainer = document.getElementById('average-stars'); if (avgStarsContainer) { const avgValue = parseFloat(stats.average) || 0; const stars = avgStarsContainer.querySelectorAll('svg'); stars.forEach((star, index) => { const starValue = index + 1; if (starValue <= Math.round(avgValue)) { star.classList.remove('text-gray-300'); star.classList.add('text-yellow-400'); } else { star.classList.remove('text-yellow-400'); star.classList.add('text-gray-300'); } }); } } // Fetch rating data from API (bypasses cache) async function loadRatingData() { try { const response = await fetch('https://lifeguidehubb.com/api/get-rating?article_id=' + articleId); const data = await response.json(); if (data.success) { // Update stats display if (data.stats) { updateStats(data.stats); } // Update user's current rating if (data.user_rating) { currentRating = parseInt(data.user_rating, 10); updateStarColors(currentRating); updatePromptText(currentRating); // Update ARIA states starButtons.forEach((btn, index) => { btn.setAttribute('aria-checked', (index + 1) === currentRating ? 'true' : 'false'); }); } } } catch (error) { console.error('Failed to load rating data:', error); // Show default state on error if (averageEl) averageEl.textContent = '0.0'; if (countEl) countEl.textContent = '0 ratings'; } finally { isLoading = false; } } // Submit rating to API async function submitRating(rating) { if (isSubmitting || isLoading) return; isSubmitting = true; showStatus('Submitting...', 'info'); try { const formData = new FormData(); formData.append('article_id', articleId); formData.append('rating', rating); const response = await fetch('https://lifeguidehubb.com/api/rate-article', { method: 'POST', body: formData }); const data = await response.json(); if (data.success) { currentRating = rating; updateStarColors(rating); updatePromptText(rating); showStatus('Thank you for rating! You gave ' + rating + ' star' + (rating !== 1 ? 's' : '') + '.', 'success'); // Update ARIA states starButtons.forEach((btn, index) => { btn.setAttribute('aria-checked', (index + 1) === rating ? 'true' : 'false'); }); // Update stats display if (data.stats) { updateStats(data.stats); } } else { showStatus(data.message || 'Failed to submit rating. Please try again.', 'error'); updateStarColors(currentRating); } } catch (error) { console.error('Rating error:', error); showStatus('Network error. Please try again.', 'error'); updateStarColors(currentRating); } finally { isSubmitting = false; } } // Add event listeners to star buttons starButtons.forEach((btn) => { const rating = parseInt(btn.dataset.rating, 10); // Click to rate btn.addEventListener('click', function() { submitRating(rating); }); // Hover preview btn.addEventListener('mouseenter', function() { if (!isSubmitting && !isLoading) { updateStarColors(rating, true); } }); // Keyboard support btn.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); submitRating(rating); } }); }); // Restore original colors when leaving rating area if (ratingContainer) { ratingContainer.addEventListener('mouseleave', function() { if (!isSubmitting && !isLoading) { updateStarColors(currentRating); } }); } // Load rating data on page load (fresh data, bypasses cache) loadRatingData(); })(); </script> </div> </main> <!-- Footer --> <footer role="contentinfo" class="bg-white border-t-4 border-black mt-auto relative overflow-hidden"> <!-- Decorative SVG Elements --> <div class="absolute inset-0 pointer-events-none opacity-30" aria-hidden="true"> <div class="absolute top-8 left-8 hidden lg:block"> <svg width="120" height="120" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M44.3,-51.2C58.4,-43.9,71.7,-32.3,74.5,-18.2C77.2,-4.1,69.4,12.4,59.5,25.4C49.6,38.5,37.6,48.1,23.6,55.4C9.6,62.7,-6.4,67.7,-21.7,65.2C-37,62.7,-51.5,52.7,-59.8,39.1C-68.1,25.5,-70.2,8.3,-67.3,-7.7C-64.4,-23.7,-56.5,-38.4,-44.8,-46.2C-33.1,-54,-17.6,-54.8,-1.3,-53.2C15,-51.5,30.1,-58.5,44.3,-51.2Z" transform="translate(100 100)" fill="#FFE66D" stroke="#000" stroke-width="3"/> </svg> </div> <div class="absolute bottom-16 right-16 hidden lg:block"> <svg width="100" height="100" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M44.3,-51.2C58.4,-43.9,71.7,-32.3,74.5,-18.2C77.2,-4.1,69.4,12.4,59.5,25.4C49.6,38.5,37.6,48.1,23.6,55.4C9.6,62.7,-6.4,67.7,-21.7,65.2C-37,62.7,-51.5,52.7,-59.8,39.1C-68.1,25.5,-70.2,8.3,-67.3,-7.7C-64.4,-23.7,-56.5,-38.4,-44.8,-46.2C-33.1,-54,-17.6,-54.8,-1.3,-53.2C15,-51.5,30.1,-58.5,44.3,-51.2Z" transform="translate(100 100)" fill="#4ECDC4" stroke="#000" stroke-width="3"/> </svg> </div> <div class="absolute top-1/2 left-1/4 hidden lg:block"> <svg width="40" height="40" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="10" cy="10" r="4" fill="#AA96DA"/> <circle cx="30" cy="10" r="4" fill="#AA96DA"/> <circle cx="50" cy="10" r="4" fill="#AA96DA"/> <circle cx="10" cy="30" r="4" fill="#AA96DA"/> <circle cx="30" cy="30" r="4" fill="#AA96DA"/> <circle cx="50" cy="30" r="4" fill="#AA96DA"/> <circle cx="10" cy="50" r="4" fill="#AA96DA"/> <circle cx="30" cy="50" r="4" fill="#AA96DA"/> <circle cx="50" cy="50" r="4" fill="#AA96DA"/> </svg> </div> <div class="absolute bottom-8 left-1/3 hidden md:block"> <svg width="80" height="20" viewBox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 10 Q25 0, 50 10 T100 10" stroke="#FF6B6B" stroke-width="4" fill="none" stroke-linecap="round"/> </svg> </div> </div> <!-- Main Footer --> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Brand --> <div class="relative z-10"> <a href="https://lifeguidehubb.com" class="flex items-center gap-3 mb-4"> <span class="flex-shrink-0" aria-hidden="true"> <svg class="w-9 h-9" width="36" height="36" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <!-- Book base --> <rect x="10" y="15" width="80" height="70" rx="4" fill="#FF6B6B" stroke="#000" stroke-width="4"/> <!-- Book spine --> <rect x="10" y="15" width="12" height="70" fill="#AA96DA" stroke="#000" stroke-width="4"/> <!-- Book pages --> <rect x="26" y="25" width="54" height="8" rx="2" fill="#fff" stroke="#000" stroke-width="2"/> <rect x="26" y="38" width="54" height="8" rx="2" fill="#fff" stroke="#000" stroke-width="2"/> <rect x="26" y="51" width="54" height="8" rx="2" fill="#fff" stroke="#000" stroke-width="2"/> <rect x="26" y="64" width="35" height="8" rx="2" fill="#fff" stroke="#000" stroke-width="2"/> <!-- Bookmark --> <path d="M75 15 L75 35 L82 28 L89 35 L89 15" fill="#4ECDC4" stroke="#000" stroke-width="3"/> </svg> </span> <span class="font-display font-bold text-xl">LifeGuide Hub</span> </a> <p class="text-gray-600 text-sm mb-4"> Your Complete How-To Knowledge Base </p> <p class="text-gray-500 text-xs"> Practical guides for everyday life. Learn how to do anything with step-by-step instructions. </p> </div> <!-- Categories --> <div> <h3 class="font-display font-bold text-lg mb-4 flex items-center gap-2"> <span class="w-2 h-2 bg-neo-pink rounded-full"></span> Categories </h3> <div class="grid grid-cols-2 gap-x-4 gap-y-2"> <a href="https://lifeguidehubb.com/categories/health-fitness" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #10B981"></span> <span class="truncate">Health & Fitness</span> </a> <a href="https://lifeguidehubb.com/categories/beauty-grooming" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #EC4899"></span> <span class="truncate">Beauty & Grooming</span> </a> <a href="https://lifeguidehubb.com/categories/home-garden" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #4ECDC4"></span> <span class="truncate">Home & Garden</span> </a> <a href="https://lifeguidehubb.com/categories/diy-repairs" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #F59E0B"></span> <span class="truncate">DIY & Repairs</span> </a> <a href="https://lifeguidehubb.com/categories/cooking-recipes" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #F38181"></span> <span class="truncate">Cooking & Recipes</span> </a> <a href="https://lifeguidehubb.com/categories/beverages" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #06B6D4"></span> <span class="truncate">Drinks & Beverages</span> </a> <a href="https://lifeguidehubb.com/categories/pets-animals" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #95E1D3"></span> <span class="truncate">Pets & Animals</span> </a> <a href="https://lifeguidehubb.com/categories/relationships" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #EF4444"></span> <span class="truncate">Relationships</span> </a> <a href="https://lifeguidehubb.com/categories/family-parenting" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #8B5CF6"></span> <span class="truncate">Family & Parenting</span> </a> <a href="https://lifeguidehubb.com/categories/social-skills" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #6366F1"></span> <span class="truncate">Social Skills</span> </a> <a href="https://lifeguidehubb.com/categories/career-work" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #3B82F6"></span> <span class="truncate">Career & Work</span> </a> <a href="https://lifeguidehubb.com/categories/education-study" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #0EA5E9"></span> <span class="truncate">Education & Study</span> </a> <a href="https://lifeguidehubb.com/categories/technology" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #6B7280"></span> <span class="truncate">Technology</span> </a> <a href="https://lifeguidehubb.com/categories/gaming" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #8B5CF6"></span> <span class="truncate">Gaming</span> </a> <a href="https://lifeguidehubb.com/categories/arts-crafts" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #FF6B6B"></span> <span class="truncate">Arts & Crafts</span> </a> <a href="https://lifeguidehubb.com/categories/music" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #A855F7"></span> <span class="truncate">Music</span> </a> <a href="https://lifeguidehubb.com/categories/photography-video" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #14B8A6"></span> <span class="truncate">Photography & Video</span> </a> <a href="https://lifeguidehubb.com/categories/writing" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #64748B"></span> <span class="truncate">Writing</span> </a> <a href="https://lifeguidehubb.com/categories/sports" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #22C55E"></span> <span class="truncate">Sports</span> </a> <a href="https://lifeguidehubb.com/categories/outdoor-activities" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #84CC16"></span> <span class="truncate">Outdoor Activities</span> </a> <a href="https://lifeguidehubb.com/categories/fashion-style" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #F472B6"></span> <span class="truncate">Fashion & Style</span> </a> <a href="https://lifeguidehubb.com/categories/travel" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #0891B2"></span> <span class="truncate">Travel</span> </a> <a href="https://lifeguidehubb.com/categories/automotive" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #78716C"></span> <span class="truncate">Automotive</span> </a> <a href="https://lifeguidehubb.com/categories/finance-money" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #059669"></span> <span class="truncate">Finance & Money</span> </a> <a href="https://lifeguidehubb.com/categories/holidays-events" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #DC2626"></span> <span class="truncate">Holidays & Events</span> </a> <a href="https://lifeguidehubb.com/categories/other" class="text-gray-600 hover:text-black hover:underline text-sm flex items-center gap-2 truncate"> <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style="background-color: #9CA3AF"></span> <span class="truncate">Other Guides</span> </a> </div> </div> <!-- Quick Links & Legal --> <div> <h3 class="font-display font-bold text-lg mb-4 flex items-center gap-2"> <span class="w-2 h-2 bg-neo-blue rounded-full"></span> Quick Links </h3> <ul class="space-y-2 mb-6"> <li> <a href="https://lifeguidehubb.com" class="text-gray-600 hover:text-black hover:underline text-sm"> Home </a> </li> <li> <a href="https://lifeguidehubb.com/search" class="text-gray-600 hover:text-black hover:underline text-sm"> Search Guides </a> </li> <li> <a href="https://lifeguidehubb.com/about" class="text-gray-600 hover:text-black hover:underline text-sm"> About Us </a> </li> <li> <a href="https://lifeguidehubb.com/contact" class="text-gray-600 hover:text-black hover:underline text-sm"> Contact </a> </li> </ul> <h3 class="font-display font-bold text-lg mb-4 flex items-center gap-2"> <span class="w-2 h-2 bg-neo-purple rounded-full"></span> Legal </h3> <ul class="space-y-2"> <li> <a href="https://lifeguidehubb.com/terms" class="text-gray-600 hover:text-black hover:underline text-sm"> Terms of Service </a> </li> <li> <a href="https://lifeguidehubb.com/privacy" class="text-gray-600 hover:text-black hover:underline text-sm"> Privacy Policy </a> </li> <li> <a href="https://lifeguidehubb.com/sitemap.xml" class="text-gray-600 hover:text-black hover:underline text-sm"> Sitemap </a> </li> </ul> </div> </div> </div> <!-- Bottom Bar --> <div class="border-t-2 border-gray-200"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> <div class="flex flex-col md:flex-row items-center justify-between gap-4"> <p class="text-gray-500 text-sm text-center md:text-left"> © 2025 LifeGuide Hub. All rights reserved. </p> <p class="text-gray-400 text-xs text-center md:text-right"> Built with knowledge from thousands of how-to guides. </p> </div> </div> </div> </footer> <!-- Mobile Menu JavaScript --> <script> (function() { 'use strict'; const menuBtn = document.getElementById('mobile-menu-btn'); const menuClose = document.getElementById('mobile-menu-close'); const mobileMenu = document.getElementById('mobile-menu'); if (menuBtn && menuClose && mobileMenu) { // Open menu menuBtn.addEventListener('click', function() { mobileMenu.classList.add('active'); mobileMenu.setAttribute('aria-hidden', 'false'); menuBtn.setAttribute('aria-expanded', 'true'); document.body.style.overflow = 'hidden'; // Focus trap menuClose.focus(); }); // Close menu function closeMenu() { mobileMenu.classList.remove('active'); mobileMenu.setAttribute('aria-hidden', 'true'); menuBtn.setAttribute('aria-expanded', 'false'); document.body.style.overflow = ''; menuBtn.focus(); } menuClose.addEventListener('click', closeMenu); // Close on escape key document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && mobileMenu.classList.contains('active')) { closeMenu(); } }); // Close on overlay click mobileMenu.addEventListener('click', function(e) { if (e.target === mobileMenu) { closeMenu(); } }); } // Smooth scroll for skip link const skipLink = document.querySelector('a[href="#main-content"]'); if (skipLink) { skipLink.addEventListener('click', function(e) { e.preventDefault(); const main = document.getElementById('main-content'); if (main) { main.focus(); main.scrollIntoView({ behavior: 'smooth' }); } }); } })(); </script> <!-- WebSite Schema --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "LifeGuide Hub", "url": "https://lifeguidehubb.com", "description": "Discover step-by-step guides for home organization, DIY crafts, pet care, cooking recipes, and hobby skills. Expert tips and practical advice for everyday life.", "potentialAction": { "@type": "SearchAction", "target": { "@type": "EntryPoint", "urlTemplate": "https://lifeguidehubb.com/search?q={search_term_string}" }, "query-input": "required name=search_term_string" } } </script> </body> </html>