mnjoz/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sabaa, Please Forgive Me!</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Welcome Message -->
    <div id="welcomeContainer">
        <h1>Hi, Welcome Sabaa! 🌸</h1>
        <p>It's me, your friend—your best friend—Haider. I know I haven't been in touch, and I want to make it right. So I made this for you to show how much I value our friendship.</p>
        <p>Can we be friends again? 💙</p>
        <button id="yesButton">Yes</button>
        <button id="noButton">No</button>
    </div>

    <!-- Quiz Container -->
    <div id="quizContainer" style="display: none;">
        <h2 id="question"></h2>
        <div id="options"></div>
        <button id="forgiveMeButton" style="display: none;">Forgive Me!</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

## script.js
const questions = [
    {
        question: "Which of the following is the most common cause of left-sided heart failure?",
        options: ["Hypertension", "Mitral stenosis", "Aortic stenosis", "Myocardial infarction"],
        answer: "Myocardial infarction"
    },
    {
        question: "Which electrolyte imbalance is most commonly associated with Addison’s disease?",
        options: ["Hypernatremia", "Hypokalemia", "Hyperkalemia", "Hypocalcemia"],
        answer: "Hyperkalemia"
    },
    {
        question: "A patient with chronic liver disease presents with confusion and asterixis. What is the most likely diagnosis?",
        options: ["Hepatic encephalopathy", "Wernicke's encephalopathy", "Stroke", "Meningitis"],
        answer: "Hepatic encephalopathy"
    },
    {
        question: "A patient presents with fatigue, pallor, and glossitis. Which deficiency is most likely?",
        options: ["Iron", "Vitamin D", "Magnesium", "Zinc"],
        answer: "Iron"
    },
    {
        question: "What is the most common cause of iron deficiency anemia?",
        options: ["Blood loss", "Malabsorption", "Chronic disease", "Dietary deficiency"],
        answer: "Blood loss"
    },
    {
        question: "Which test is most specific for rheumatoid arthritis?",
        options: ["ESR", "CRP", "Rheumatoid factor", "Anti-CCP antibodies"],
        answer: "Anti-CCP antibodies"
    },
    {
        question: "A patient has a dry cough, dyspnea, and bilateral hilar lymphadenopathy on chest X-ray. What is the most likely diagnosis?",
        options: ["Tuberculosis", "Sarcoidosis", "Pulmonary embolism", "Lung cancer"],
        answer: "Sarcoidosis"
    },
    {
        question: "Which neurotransmitter is deficient in Parkinson’s disease?",
        options: ["Acetylcholine", "Dopamine", "Serotonin", "Glutamate"],
        answer: "Dopamine"
    },
    {
        question: "Which of the following is the most common cause of peptic ulcer disease?",
        options: ["NSAIDs", "H. pylori infection", "Alcohol", "Smoking"],
        answer: "H. pylori infection"
    },
    {
        question: "Which lung condition is characterized by a decreased DLCO?",
        options: ["Asthma", "COPD", "Pulmonary fibrosis", "Pneumonia"],
        answer: "Pulmonary fibrosis"
    }
];

let currentQuestionIndex = 0;
let forgiveMeter = 0;

// "Yes" Button Behavior: Moves Away
document.getElementById("yesButton").addEventListener("mouseover", () => {
    const yesButton = document.getElementById("yesButton");
    const randomX = Math.floor(Math.random() * 300) + 50;
    const randomY = Math.floor(Math.random() * 300) + 50;
    yesButton.style.position = "absolute";
    yesButton.style.left = randomX + "px";
    yesButton.style.top = randomY + "px";
});

// "No" Button Behavior: Starts Quiz
document.getElementById("noButton").addEventListener("click", () => {
    const welcomeContainer = document.getElementById("welcomeContainer");
    welcomeContainer.innerHTML = `
        <h1>I knew you’d choose this! 😏</h1>
        <p>It’s okay, Sabaa! I know you’ll forgive me eventually. But first, you’ll have to pass this challenge! Let's see how smart you are. 💡</p>
    `;
    setTimeout(() => {
        welcomeContainer.style.display = "none";
        document.getElementById("quizContainer").style.display = "block";
        loadQuestion();
    }, 3000);
});

function loadQuestion() {
    const q = questions[currentQuestionIndex];
    document.getElementById("question").innerText = q.question;

    let optionsHtml = "";
    q.options.forEach(option => {
        optionsHtml += '<button class="option" onclick="checkAnswer(\'' + option + '\')">' + option + '</button>';
    });

    document.getElementById("options").innerHTML = optionsHtml;
}

function checkAnswer(selected) {
    const correct = questions[currentQuestionIndex].answer;
    if (selected === correct) {
        currentQuestionIndex++;
        if (currentQuestionIndex < questions.length) {
            loadQuestion();
        } else {
            showFinalMessage();
        }
    } else {

forgiveMeter++;
        const forgiveMeButton = document.getElementById("forgiveMeButton");
        forgiveMeButton.style.transform = "scale(" + (1 + forgiveMeter * 0.2) + ")";
        forgiveMeButton.style.display = "inline-block";

        if (forgiveMeter >= 5) {
            document.getElementById("quizContainer").innerHTML = `
                <h1>Sabaa, The forgive me exploded! 🥺</h1>
                <p>You’ve made a few mistakes, but that’s okay. Nobody’s perfect, and neither am I. Let’s be friends again! I will make it up to you when we meet! I miss you A lot 💕</p>
            `;
        } else {
            alert("Oops, wrong answer! The 'Forgive Me' button is growing... 👀");
        }
    }
}

function showFinalMessage() {
    document.getElementById("quizContainer").innerHTML = `
        <h1>You’re way too smart for me, Sabaa! 🌟</h1>
        <p>But I miss you so much. Still, can you forgive me? 💖</p>
        <button id="finalYesButton">Yes</button>
        <button id="finalNoButton">No</button>
    `;

    // Add behavior for Yes and No buttons
    document.getElementById("finalYesButton").addEventListener("click", () => {
        document.getElementById("quizContainer").innerHTML = `
            <h1>Thank you, Sabaa! 🎉</h1>
            <p>I promise I’ll make it up to you. Let’s go out soon and catch up! 💕</p>
        `;
    });

    const noButton = document.getElementById("finalNoButton");
    noButton.addEventListener("mouseover", () => {
        const randomX = Math.floor(Math.random() * 300) + 50;
        const randomY = Math.floor(Math.random() * 300) + 50;
        noButton.style.position = "absolute";
        noButton.style.left = randomX + "px";
        noButton.style.top = randomY + "px";
    });
}

## style.css
body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #f0f8ff;
    color: #333;
}

#welcomeContainer, #quizContainer {
    padding: 20px;
}

button {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

button:hover {
    background-color: #45a049;
}

#yesButton {
    position: relative;
}

#noButton {
    background-color: #ff4757;
}

#noButton:hover {
    background-color: #ff6b6b;
}

#forgiveMeButton {
    margin-top: 20px;
    padding: 15px 30px;
    background-color: #ff6f61;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: 18px;
    transition: transform 0.2s ease;
}

h1, h2 {
    color: #2c3e50;
}

## untitled.markdown

      
    Raw
  

              untitled.markdown
            
          
    Untitled

A Pen by mnjoz on CodePen.
License.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sabaa, Please Forgive Me!</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<!-- Welcome Message -->
	<div id="welcomeContainer">
	<h1>Hi, Welcome Sabaa! 🌸</h1>
	<p>It's me, your friend—your best friend—Haider. I know I haven't been in touch, and I want to make it right. So I made this for you to show how much I value our friendship.</p>
	<p>Can we be friends again? 💙</p>
	<button id="yesButton">Yes</button>
	<button id="noButton">No</button>
	</div>

	<!-- Quiz Container -->
	<div id="quizContainer" style="display: none;">
	<h2 id="question"></h2>
	<div id="options"></div>
	<button id="forgiveMeButton" style="display: none;">Forgive Me!</button>
	</div>

	<script src="script.js"></script>
	</body>
	</html>
	const questions = [
	{
	question: "Which of the following is the most common cause of left-sided heart failure?",
	options: ["Hypertension", "Mitral stenosis", "Aortic stenosis", "Myocardial infarction"],
	answer: "Myocardial infarction"
	},
	{
	question: "Which electrolyte imbalance is most commonly associated with Addison’s disease?",
	options: ["Hypernatremia", "Hypokalemia", "Hyperkalemia", "Hypocalcemia"],
	answer: "Hyperkalemia"
	},
	{
	question: "A patient with chronic liver disease presents with confusion and asterixis. What is the most likely diagnosis?",
	options: ["Hepatic encephalopathy", "Wernicke's encephalopathy", "Stroke", "Meningitis"],
	answer: "Hepatic encephalopathy"
	},
	{
	question: "A patient presents with fatigue, pallor, and glossitis. Which deficiency is most likely?",
	options: ["Iron", "Vitamin D", "Magnesium", "Zinc"],
	answer: "Iron"
	},
	{
	question: "What is the most common cause of iron deficiency anemia?",
	options: ["Blood loss", "Malabsorption", "Chronic disease", "Dietary deficiency"],
	answer: "Blood loss"
	},
	{
	question: "Which test is most specific for rheumatoid arthritis?",
	options: ["ESR", "CRP", "Rheumatoid factor", "Anti-CCP antibodies"],
	answer: "Anti-CCP antibodies"
	},
	{
	question: "A patient has a dry cough, dyspnea, and bilateral hilar lymphadenopathy on chest X-ray. What is the most likely diagnosis?",
	options: ["Tuberculosis", "Sarcoidosis", "Pulmonary embolism", "Lung cancer"],
	answer: "Sarcoidosis"
	},
	{
	question: "Which neurotransmitter is deficient in Parkinson’s disease?",
	options: ["Acetylcholine", "Dopamine", "Serotonin", "Glutamate"],
	answer: "Dopamine"
	},
	{
	question: "Which of the following is the most common cause of peptic ulcer disease?",
	options: ["NSAIDs", "H. pylori infection", "Alcohol", "Smoking"],
	answer: "H. pylori infection"
	},
	{
	question: "Which lung condition is characterized by a decreased DLCO?",
	options: ["Asthma", "COPD", "Pulmonary fibrosis", "Pneumonia"],
	answer: "Pulmonary fibrosis"
	}
	];

	let currentQuestionIndex = 0;
	let forgiveMeter = 0;

	// "Yes" Button Behavior: Moves Away
	document.getElementById("yesButton").addEventListener("mouseover", () => {
	const yesButton = document.getElementById("yesButton");
	const randomX = Math.floor(Math.random() * 300) + 50;
	const randomY = Math.floor(Math.random() * 300) + 50;
	yesButton.style.position = "absolute";
	yesButton.style.left = randomX + "px";
	yesButton.style.top = randomY + "px";
	});

	// "No" Button Behavior: Starts Quiz
	document.getElementById("noButton").addEventListener("click", () => {
	const welcomeContainer = document.getElementById("welcomeContainer");
	welcomeContainer.innerHTML = `
	<h1>I knew you’d choose this! 😏</h1>
	<p>It’s okay, Sabaa! I know you’ll forgive me eventually. But first, you’ll have to pass this challenge! Let's see how smart you are. 💡</p>
	`;
	setTimeout(() => {
	welcomeContainer.style.display = "none";
	document.getElementById("quizContainer").style.display = "block";
	loadQuestion();
	}, 3000);
	});

	function loadQuestion() {
	const q = questions[currentQuestionIndex];
	document.getElementById("question").innerText = q.question;

	let optionsHtml = "";
	q.options.forEach(option => {
	optionsHtml += '<button class="option" onclick="checkAnswer(\'' + option + '\')">' + option + '</button>';
	});

	document.getElementById("options").innerHTML = optionsHtml;
	}

	function checkAnswer(selected) {
	const correct = questions[currentQuestionIndex].answer;
	if (selected === correct) {
	currentQuestionIndex++;
	if (currentQuestionIndex < questions.length) {
	loadQuestion();
	} else {
	showFinalMessage();
	}
	} else {

	forgiveMeter++;
	const forgiveMeButton = document.getElementById("forgiveMeButton");
	forgiveMeButton.style.transform = "scale(" + (1 + forgiveMeter * 0.2) + ")";
	forgiveMeButton.style.display = "inline-block";

	if (forgiveMeter >= 5) {
	document.getElementById("quizContainer").innerHTML = `
	<h1>Sabaa, The forgive me exploded! 🥺</h1>
	<p>You’ve made a few mistakes, but that’s okay. Nobody’s perfect, and neither am I. Let’s be friends again! I will make it up to you when we meet! I miss you A lot 💕</p>
	`;
	} else {
	alert("Oops, wrong answer! The 'Forgive Me' button is growing... 👀");
	}
	}
	}

	function showFinalMessage() {
	document.getElementById("quizContainer").innerHTML = `
	<h1>You’re way too smart for me, Sabaa! 🌟</h1>
	<p>But I miss you so much. Still, can you forgive me? 💖</p>
	<button id="finalYesButton">Yes</button>
	<button id="finalNoButton">No</button>
	`;

	// Add behavior for Yes and No buttons
	document.getElementById("finalYesButton").addEventListener("click", () => {
	document.getElementById("quizContainer").innerHTML = `
	<h1>Thank you, Sabaa! 🎉</h1>
	<p>I promise I’ll make it up to you. Let’s go out soon and catch up! 💕</p>
	`;
	});

	const noButton = document.getElementById("finalNoButton");
	noButton.addEventListener("mouseover", () => {
	const randomX = Math.floor(Math.random() * 300) + 50;
	const randomY = Math.floor(Math.random() * 300) + 50;
	noButton.style.position = "absolute";
	noButton.style.left = randomX + "px";
	noButton.style.top = randomY + "px";
	});
	}
	body {
	font-family: Arial, sans-serif;
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #f0f8ff;
	color: #333;
	}

	#welcomeContainer, #quizContainer {
	padding: 20px;
	}

	button {
	display: inline-block;
	margin: 10px;
	padding: 10px 20px;
	background-color: #4caf50;
	color: white;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	font-size: 16px;
	}

	button:hover {
	background-color: #45a049;
	}

	#yesButton {
	position: relative;
	}

	#noButton {
	background-color: #ff4757;
	}

	#noButton:hover {
	background-color: #ff6b6b;
	}

	#forgiveMeButton {
	margin-top: 20px;
	padding: 15px 30px;
	background-color: #ff6f61;
	color: white;
	border: none;
	cursor: pointer;
	border-radius: 8px;
	font-size: 18px;
	transition: transform 0.2s ease;
	}

	h1, h2 {
	color: #2c3e50;
	}