<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Birthday Treasure Challenge</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: linear-gradient(to bottom right, #ff99cc, #cc99ff); /* Pink to violet gradient */
            color: violet;
        }
        h1 {
            text-align: center;
            font-size: 36px;
            color: #5e239d; /* Dark violet */
            text-shadow: 2px 2px 4px #ffccff;
        }
        h5 {
            text-align: center;
            font-size: 18px;
            color: #7a42a4; /* Medium violet */
            text-shadow: 1px 1px 3px #ffcce6;
        }
        .question h3 {
            color: #5e239d; /* Dark violet */
            text-shadow: 1px 1px 3px #ffccff;
        }
        .options label {
            display: block;
            margin: 5px 0;
            font-size: 16px;
        }
        .options input[type="radio"] {
            margin-right: 10px;
        }
        button {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 18px;
            color: white;
            background: #c71585; /* Deep pink */
            border: none;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 2px 2px 5px #7a42a4;
            transition: background 0.3s ease, transform 0.2s;
        }
        button:hover {
            background: #ff69b4; /* Bright pink */
            transform: scale(1.05);
        }
        .result {
            text-align: center;
            font-size: 24px;
            color: #5e239d; /* Dark violet */
            font-weight: bold;
            margin-top: 20px;
            text-shadow: 1px 1px 3px #ffccff;
        }
        .feedback {
            margin-top: 20px;
            font-size: 18px;
            color: #5e239d; /* Dark violet */
        }
        .correct {
            color: #7a42a4; /* Medium violet */
            font-weight: bold;
        }
        .incorrect {
            color: #c71585; /* Deep pink */
            font-weight: bold;
        }
        form {
            background: rgba(255, 255, 255, 0.8); /* Transparent white background */
            border-radius: 15px;
            padding: 20px;
            box-shadow: 3px 3px 10px #7a42a4;
        }
    </style>
</head>
<body>
    <h1>Birthday Treasure Challenge</h1>
    <h5>Get ready for the ultimate 1+8 challenge! Answer all the questions correctly, and a surprise gift awaits you at the finish line!</h5>
    <form id="quiz-form">
        <!-- Question 1 -->
        <div class="question">
            <h3>1: Guess the magic date when we randomly meet for the very first time!</h3>
            <div class="options">
                <label><input type="radio" name="q1" value="1"> 06/05/2023</label>
                <label><input type="radio" name="q1" value="2"> 05/06/2023</label>
                <label><input type="radio" name="q1" value="3"> 04/05/2023</label>
            </div>
        </div>

        <!-- Add all other questions similarly -->
        <!-- Question 2 -->
        <div class="question">
            <h3>2: Which movie did Vishnu watch because of your epic recommendation?</h3>
            <div class="options">
                <label><input type="radio" name="q2" value="1"> Peelichuoulu</label>
                <label><input type="radio" name="q2" value="2"> Orange</label>
                <label><input type="radio" name="q2" value="3"> Mass</label>
            </div>
        </div>

        <!-- Question 3 -->
        <div class="question">
            <h3>3: Can you name Vishnu’s ultimate on-screen hero?</h3>
            <div class="options">
                <label><input type="radio" name="q3" value="1"> Ajith Sir</label>
                <label><input type="radio" name="q3" value="2"> Kamal</label>
                <label><input type="radio" name="q3" value="3"> Surya</label>
            </div>
        </div>
        <!-- Question 4 -->
        <div class="question">
            <h3>4:What’s that one thing Vishnu told you to do, but you still haven’t?</h3>
            <div class="options">
                <label><input type="radio" name="q4" value="1">Herbal medicine</label>
                <label><input type="radio" name="q4" value="2">Leg touch</label>
                <label><input type="radio" name="q4" value="3">Devara</label>
            </div>
        </div>

        <!-- Question 5 -->
        <div class="question">
            <h3>5: When did we last hang out? Think carefully!</h3>
            <div class="options">
                <label><input type="radio" name="q5" value="1">31/05/2024</label>
                <label><input type="radio" name="q5" value="2">13/05/2024</label>
                <label><input type="radio" name="q5" value="3">09/09/2024</label>
            </div>
        </div>

        <!-- Question 6 -->
        <div class="question">
            <h3>6: What’s the date when we randomly bumped into each other last time(Hint:3rd time)?</h3>
            <div class="options">
                <label><input type="radio" name="q6" value="1"> 01/04/2024</label>
                <label><input type="radio" name="q6" value="2"> 02/02/2022</label>
                <label><input type="radio" name="q6" value="3"> 08/04/2024</label>
            </div>
        </div>

        <!-- Question 7 -->
        <div class="question">
            <h3>7: Who’s Vishnu’s cricketing legend? Any guesses?</h3>
            <div class="options">
                <label><input type="radio" name="q7" value="1">Sachin Ramesh Tendulkar</label>
                <label><input type="radio" name="q7" value="2">Virat Kholi</label>
                <label><input type="radio" name="q7" value="3">Dhoni</label>
            </div>
        </div>

        <!-- Question 8 -->
        <div class="question">
            <h3>8: Who takes the top spot as Vaishu’s favorite cricketer?</h3>
            <div class="options">
                <label><input type="radio" name="q8" value="1">Sachin Ramesh Tendulkar</label>
                <label><input type="radio" name="q8" value="2">Virat Kholi</label>
                <label><input type="radio" name="q8" value="3">Dhoni</label>
            </div>
        </div>

        <!-- Question 9 -->
        <div class="question">
            <h3>9: Can you recall the date of our very first conversation? The day it all began!(Hint: difficult one ask vishnu for help)</h3>
            <div class="options">
                <label><input type="radio" name="q9" value="1"> 13/09/2022</label>
                <label><input type="radio" name="q9" value="2"> 14/09/2022</label>
                <label><input type="radio" name="q9" value="3"> 14/09/2023</label>
            </div>
        </div>
        <!-- Continue for all questions... -->
        <button type="button" onclick="checkAnswers()">Submit</button>
    </form>

    <div id="result" class="result"></div>
    <div id="feedback" class="feedback"></div>

    <script>
        // Correct answers
        const correctAnswers = {
            q1: "1",
            q2: "2",
            q3: "1",
            q4: "3",
            q5: "2",
            q6: "3",
            q7: "1",
            q8: "3",
            q9: "2"
        };

        function checkAnswers() {
            const form = document.getElementById("quiz-form");
            const resultDiv = document.getElementById("result");
            const feedbackDiv = document.getElementById("feedback");
            let isCorrect = true;
            let feedbackContent = "";

            // Iterate through each question and check answers
            for (const question in correctAnswers) {
                const selectedAnswer = form.querySelector(`input[name="${question}"]:checked`);

                if (!selectedAnswer || selectedAnswer.value !== correctAnswers[question]) {
                    // Show feedback for each question
                    feedbackContent += `<p class="incorrect">Question ${question.charAt(1)}: Incorrect! Your answer: ${selectedAnswer ? selectedAnswer.nextSibling.textContent : 'None selected'}. Correct answer: Na Solamata Nee eh guess panu</p>`;
                    isCorrect = false;
                } else {
                    feedbackContent += `<p class="correct">Question ${question.charAt(1)}: Correct!</p>`;
                }
            }

            // Show final result
            if (isCorrect) {
              resultDiv.textContent = ""; // Clear any previous content
              let text = "Congratulations, Vaishu! 🎉 You’ve nailed it! Once again, wishing you a fabulous birthday filled with endless joy and laughter. Your special gift is on its way and can’t wait to meet you soon!"; // The text to display letter by letter
              let index = 0; // Index to track the current letter

              // Function to display each letter
              const displayLetters = () => {
             if (index < text.length) {
                resultDiv.textContent += text[index]; // Add the current letter
                index++;
                setTimeout(displayLetters, 150); // Call the function recursively after 500ms
             } else {
    // After all letters are displayed, show the button
    setTimeout(() => {
        const button = document.createElement("button");
        button.textContent = "🎁 Click Here to Reveal Your Gift 🎁";
        button.style.padding = "10px 20px";
        button.style.fontSize = "16px";
        button.style.fontWeight = "bold";
        button.style.backgroundColor = "#ff66b2"; // Pinkish color
        button.style.color = "violet";
        button.style.border = "none";
        button.style.borderRadius = "5px";
        button.style.cursor = "pointer";
        button.style.marginTop = "20px";

        // Add the link navigation
        button.onclick = () => {
            window.location.href = "https://www.amazon.in/g/36RCOE32H3GQ27I8?_encoding=UTF8&asin=B0CWL6LTMK";
        };

        // Append the button to the resultDiv
        resultDiv.appendChild(button);
    }, 5000);
}
           };

             displayLetters();
            } else {
                resultDiv.textContent = "Oops! Some answers are incorrect. Try again!";
                resultDiv.style.color = "red";
            }

            // Display feedback for each question
            feedbackDiv.innerHTML = feedbackContent;
        }

        // Get the correct answer text for each question
        function getCorrectAnswerText(question) {
            const answerMap = {
                q1: "06/05/2023",
                q2: "Orange",
                q3: "Ajith Sir",
                q4: "Devara",
                q5: "13/05/2024",
                q6: "08/04/2024",
                q7: "Sachin Ramesh Tendulkar",
                q8: "Dhoni",
                q9: "14/09/2022"
            };
            return answerMap[question] || "";
        }
    </script>
</body>
</html>

