Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hypothesis Tests FAQ</title> | |
| <!-- Tailwind CSS for styling --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Google Fonts: Inter --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Use the Inter font family */ | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Style for the answer panel for smooth transitions */ | |
| .answer-panel { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto p-4 md:p-8 max-w-4xl"> | |
| <!-- Header Section --> | |
| <div class="text-center mb-8 md:mb-12"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-800">Hypothesis Tests Explained</h1> | |
| <p class="mt-2 text-lg text-gray-600">Key Takeaways on Rejection Regions & P-Values</p> | |
| </div> | |
| <!-- Accordion container --> | |
| <div class="space-y-4"> | |
| <!-- Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200"> | |
| <button class="accordion-toggle w-full p-6 text-left flex justify-between items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500"> | |
| <h2 class="text-lg font-semibold text-gray-800">1. What are the rejection and non-rejection regions?</h2> | |
| <svg class="w-6 h-6 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> | |
| </button> | |
| <div class="answer-panel"> | |
| <div class="px-6 pb-6 text-gray-700"> | |
| <p>The <strong>rejection region</strong> (or critical region) is the set of test statistic values for which we reject the null hypothesis. Conversely, the <strong>non-rejection region</strong> is the area where we do not reject the null hypothesis, generally corresponding to the area under 1-alpha.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200"> | |
| <button class="accordion-toggle w-full p-6 text-left flex justify-between items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500"> | |
| <h2 class="text-lg font-semibold text-gray-800">2. What is the conceptual difference between the two regions?</h2> | |
| <svg class="w-6 h-6 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> | |
| </button> | |
| <div class="answer-panel"> | |
| <div class="px-6 pb-6 text-gray-700"> | |
| <p>The rejection region contains test statistic values that are highly unlikely if the null hypothesis were true. If our result falls here, it's strong evidence against the null. The non-rejection region contains values that are more probable under the null hypothesis.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200"> | |
| <button class="accordion-toggle w-full p-6 text-left flex justify-between items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500"> | |
| <h2 class="text-lg font-semibold text-gray-800">3. What does it mean to assume the test statistic distribution under the null hypothesis?</h2> | |
| <svg class="w-6 h-6 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> | |
| </button> | |
| <div class="answer-panel"> | |
| <div class="px-6 pb-6 text-gray-700"> | |
| <p>It means we start by assuming the null hypothesis is correct. We base our statistical model, expectations, and calculations on this "innocent until proven guilty" premise. We then check if our observed data is a good fit for this assumption.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200"> | |
| <button class="accordion-toggle w-full p-6 text-left flex justify-between items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500"> | |
| <h2 class="text-lg font-semibold text-gray-800">4. Why does a test statistic far from the null hypothesis suggest evidence against it?</h2> | |
| <svg class="w-6 h-6 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> | |
| </button> | |
| <div class="answer-panel"> | |
| <div class="px-6 pb-6 text-gray-700"> | |
| <p>Because the probability of getting such an extreme result is very low if the null hypothesis were true. An extreme value suggests that our initial assumption (the null hypothesis) might be wrong, and another explanation is more likely.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 5 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200"> | |
| <button class="accordion-toggle w-full p-6 text-left flex justify-between items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500"> | |
| <h2 class="text-lg font-semibold text-gray-800">5. Why does a smaller p-value suggest stronger evidence against the null hypothesis?</h2> | |
| <svg class="w-6 h-6 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> | |
| </button> | |
| <div class="answer-panel"> | |
| <div class="px-6 pb-6 text-gray-700"> | |
| <p>The p-value is the probability of seeing a result at least as extreme as the one you observed, assuming the null is true. A tiny p-value (e.g., 0.01) means your observed data is very rare under the null assumption, thus providing strong evidence to reject that assumption.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // JavaScript to handle the accordion toggle functionality | |
| document.addEventListener('DOMContentLoaded', function () { | |
| const accordions = document.querySelectorAll('.accordion-toggle'); | |
| accordions.forEach(clickedButton => { | |
| clickedButton.addEventListener('click', () => { | |
| const answerPanel = clickedButton.nextElementSibling; | |
| // Check if the current accordion is already open | |
| const isAlreadyOpen = answerPanel.style.maxHeight; | |
| // First, close all accordions | |
| accordions.forEach(button => { | |
| const panel = button.nextElementSibling; | |
| const icon = button.querySelector('svg'); | |
| const parentCard = button.parentElement; | |
| panel.style.maxHeight = null; | |
| icon.style.transform = 'rotate(0deg)'; | |
| parentCard.classList.remove('bg-green-50'); | |
| }); | |
| // If the clicked accordion was not open, then open it | |
| if (!isAlreadyOpen) { | |
| const icon = clickedButton.querySelector('svg'); | |
| const parentCard = clickedButton.parentElement; | |
| answerPanel.style.maxHeight = answerPanel.scrollHeight + 'px'; | |
| icon.style.transform = 'rotate(180deg)'; | |
| parentCard.classList.add('bg-green-50'); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |