Skip to main content

Google Keep

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Keep Quiz</title>
    <style>
        /* Basic styles for the body within the embed frame */
        body {
            font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.7;
            color: #333;
            background-color: #ffffff;
            margin: 0;
            padding: 20px;
        }

        /* Main container for the quiz */
        .quiz-wrapper {
            max-width: 750px;
            margin: 0 auto; /* Center the wrapper horizontally */
            width: 100%;
        }

        .quiz-container {
            background-color: #f9f9f9;
            padding: 20px 30px;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            position: relative;
            overflow: hidden; /* Contains the confetti */
        }

        /* Headings for quiz sections */
        h3 {
            font-size: 1.5em;
            color: #fbbc05; /* Google Keep's yellow color */
            border-bottom: 2px solid #fff1c6;
            padding-bottom: 10px;
            margin-top: 25px;
            margin-bottom: 20px;
        }
        
        h3:first-of-type {
            margin-top: 0;
        }

        /* Styling for the language tabs */
        .lang-tabs-wrapper {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 15px;
        }
        
        .lang-tabs {
            display: flex;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .lang-tab {
            text-decoration: none;
            font-weight: 600;
            color: #333;
            background-color: #fff;
            padding: 8px 15px;
            border: none;
            cursor: pointer;
            font-size: 0.9em;
            transition: background-color 0.3s;
        }
        
        .lang-tab:not(:last-child) {
            border-right: 1px solid #ccc;
        }

        .lang-tab.active, .lang-tab:hover {
            background-color: #fff1c6;
            color: #b98700;
        }


        /* Styling for each question block */
        .question {
            margin-bottom: 25px;
        }
        
        .question p {
            font-size: 1.1em;
            margin-bottom: 15px;
        }
        
        /* Styling for the multiple-choice options */
        .options .option {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 12px 15px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: background-color 0.3s, border-color 0.3s;
        }
        
        .options .option:hover {
            background-color: #fef8e0;
            border-color: #fbbc05;
        }

        .options.answered .option {
            cursor: not-allowed;
            opacity: 0.7;
        }

        .options .option.correct {
            background-color: #e6ffed;
            border-color: #28a745;
            font-weight: bold;
        }

        .options .option.incorrect {
            background-color: #ffebee;
            border-color: #dc3545;
        }
        
        /* Final Message, Score and Reset Button */
        .final-message {
            text-align: center;
            background-color: #e6ffed;
            border: 1px solid #28a745;
            padding: 10px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .final-message.perfect-score {
            background-color: #d4edda;
            border-color: #155724;
            animation: zoomIn 0.5s ease-out;
        }
        
        .final-message h3 {
            color: #1e8e3e;
            border-bottom: none;
            margin-bottom: 5px;
        }

        .score-container {
            text-align: center;
            font-size: 1.2em;
            font-weight: bold;
            margin-top: 30px;
            padding: 15px;
            background-color: #fff1c6;
            border-radius: 8px;
        }
        
        .reset-btn {
            display: block;
            margin: 20px auto 0;
            padding: 10px 20px;
            font-size: 1em;
            font-weight: bold;
            color: #fff;
            background-color: #fbbc05;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .reset-btn:hover {
            background-color: #d19d04;
        }
        
        /* Animation Keyframes */
        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.5);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* Confetti Styles */
        .confetti-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #f00;
            opacity: 0.7;
            animation: fall 5s linear forwards;
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
        
        /* Mobile-friendly adjustments */
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            .quiz-container {
                padding: 15px;
            }
            .lang-tabs-wrapper {
                justify-content: center; /* Center tabs on mobile */
            }
            .lang-tabs {
                width: 100%;
            }
            .lang-tab {
                flex: 1;
                text-align: center;
                padding: 10px 5px;
            }
            h3 {
                font-size: 1.3em;
            }
            .question p {
                font-size: 1em;
            }
        }

    </style>
</head>
<body>

    <div class="quiz-wrapper">
        <div class="quiz-container">
            <div class="confetti-container"></div>
            
            <div class="lang-tabs-wrapper">
                <div class="lang-tabs">
                    <button class="lang-tab active" data-lang="english-quiz">English</button>
                    <button class="lang-tab" data-lang="malayalam-quiz">മലയാളം</button>
                </div>
            </div>

            <!-- English Section -->
            <div id="english-quiz" class="quiz-section">
                <h3>Quiz: Test Your Google Keep Knowledge</h3>
                
                <div class="final-message" style="display: none;"></div>

                <div class="question">
                    <p><strong>Question 1:</strong> What's the best way to organize different types of notes in Google Keep, like "Work," "Personal," and "Shopping"?</p>
                    <div class="options">
                        <div class="option">A) Change the color of each note</div>
                        <div class="option" data-correct="true">B) Use Labels</div>
                        <div class="option">C) Pin the most important notes</div>
                        <div class="option">D) Archive old notes</div>
                    </div>
                </div>
                
                <div class="question">
                    <p><strong>Question 2:</strong> Besides a specific time, what other type of reminder can you set on a note?</p>
                     <div class="options">
                        <div class="option">A) A reminder based on your mood</div>
                        <div class="option">B) A reminder based on your phone's battery</div>
                        <div class="option" data-correct="true">C) A reminder for when you arrive at a specific place</div>
                        <div class="option">D) A reminder that repeats every minute</div>
                    </div>
                </div>

                <div class="question">
                    <p><strong>Question 3:</strong> If you want to share a shopping list with a family member so they can also add items, which feature should you use?</p>
                    <div class="options">
                        <div class="option">A) Send a copy</div>
                        <div class="option" data-correct="true">B) Add Collaborator</div>
                        <div class="option">C) Pin the note</div>
                    </div>
                </div>

                <div class="question">
                    <p><strong>Question 4:</strong> You take a picture of a poster with text on it. How can Google Keep help you get that text into your note?</p>
                    <div class="options">
                        <div class="option">A) Add a drawing on the image</div>
                        <div class="option" data-correct="true">B) Use the "Grab image text" feature</div>
                        <div class="option">C) Set a reminder on the image</div>
                        <div class="option">D) Change the image's color</div>
                    </div>
                </div>
                <div class="score-container">Your Score: <span class="score">0</span> / 4</div>
                <button class="reset-btn">Reset Quiz</button>
            </div>

            <!-- Malayalam Section -->
            <div id="malayalam-quiz" class="quiz-section" style="display: none;">
                <h3>ക്വിസ്: നിങ്ങളുടെ ഗൂഗിൾ കീപ്പ് പരിജ്ഞാനം പരിശോധിക്കുക</h3>
                
                <div class="final-message" style="display: none;"></div>

                <div class="question">
                    <p><strong>ചോദ്യം 1:</strong> ഗൂഗിൾ കീപ്പിൽ "ജോലി," "സ്വകാര്യം," "ഷോപ്പിംഗ്" എന്നിങ്ങനെയുള്ള വ്യത്യസ്ത തരം നോട്ടുകൾ ഓർഗനൈസ് ചെയ്യാനുള്ള മികച്ച മാർഗം ഏതാണ്?</p>
                    <div class="options">
                        <div class="option">A) ഓരോ നോട്ടിനും നിറം മാറ്റുക</div>
                        <div class="option" data-correct="true">B) ലേബലുകൾ ഉപയോഗിക്കുക</div>
                        <div class="option">C) പ്രധാനപ്പെട്ട നോട്ടുകൾ പിൻ ചെയ്യുക</div>
                        <div class="option">D) പഴയ നോട്ടുകൾ ആർക്കൈവ് ചെയ്യുക</div>
                    </div>
                </div>

                <div class="question">
                    <p><strong>ചോദ്യം 2:</strong> ഒരു നിശ്ചിത സമയം കൂടാതെ, മറ്റെന്തരം റിമൈൻഡർ നിങ്ങൾക്ക് ഒരു നോട്ടിൽ സെറ്റ് ചെയ്യാൻ സാധിക്കും?</p>
                    <div class="options">
                        <div class="option">A) നിങ്ങളുടെ മാനസികാവസ്ഥ അനുസരിച്ചുള്ള റിമൈൻഡർ</div>
                        <div class="option">B) ഫോണിന്റെ ബാറ്ററി അനുസരിച്ചുള്ള റിമൈൻഡർ</div>
                        <div class="option" data-correct="true">C) ഒരു പ്രത്യേക സ്ഥലത്ത് എത്തുമ്പോൾ ഓർമ്മിപ്പിക്കാനുള്ള റിമൈൻഡർ</div>
                        <div class="option">D) ഓരോ മിനിറ്റിലും ആവർത്തിക്കുന്ന റിമൈൻഡർ</div>
                    </div>
                </div>

                <div class="question">
                    <p><strong>ചോദ്യം 3:</strong> കുടുംബാംഗങ്ങൾക്കും സാധനങ്ങൾ ചേർക്കാൻ കഴിയുന്ന രീതിയിൽ ഒരു ഷോപ്പിംഗ് ലിസ്റ്റ് ഷെയർ ചെയ്യാൻ ഏത് ഫീച്ചറാണ് ഉപയോഗിക്കേണ്ടത്?</p>
                    <div class="options">
                        <div class="option">A) ഒരു കോപ്പി അയക്കുക</div>
                        <div class="option" data-correct="true">B) പങ്കാളിയെ (Collaborator) ചേർക്കുക</div>
                        <div class="option">C) നോട്ട് പിൻ ചെയ്യുക</div>
                    </div>
                </div>

                <div class="question">
                    <p><strong>ചോദ്യം 4:</strong> നിങ്ങൾ എഴുത്തുകളുള്ള ഒരു പോസ്റ്ററിന്റെ ചിത്രമെടുത്തു. ആ എഴുത്തുകൾ നിങ്ങളുടെ നോട്ടിലേക്ക് മാറ്റാൻ ഗൂഗിൾ കീപ്പ് എങ്ങനെ സഹായിക്കും?</p>
                    <div class="options">
                        <div class="option">A) ചിത്രത്തിൽ ഒരു ഡ്രോയിംഗ് ചേർക്കുക</div>
                        <div class="option" data-correct="true">B) "ചിത്രത്തിലെ എഴുത്ത് എടുക്കുക" (Grab image text) ഫീച്ചർ ഉപയോഗിക്കുക</div>
                        <div class="option">C) ചിത്രത്തിൽ റിമൈൻഡർ സെറ്റ് ചെയ്യുക</div>
                        <div class="option">D) ചിത്രത്തിന്റെ നിറം മാറ്റുക</div>
                    </div>
                </div>
                <div class="score-container">Your Score: <span class="score">0</span> / 4</div>
                <button class="reset-btn">Reset Quiz</button>
            </div>
        </div>
    </div>

    <script>
        const langTabs = document.querySelectorAll('.lang-tab');
        const quizSections = document.querySelectorAll('.quiz-section');
        const confettiContainer = document.querySelector('.confetti-container');
        
        const launchConfetti = () => {
            const colors = ['#ff4e4e', '#4e9aff', '#4eff7b', '#fffb4e', '#ff4ec4'];
            for (let i = 0; i < 100; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.animationDelay = Math.random() * 3 + 's';
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confettiContainer.appendChild(confetti);
            }
        };

        langTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                langTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');

                const targetLang = tab.getAttribute('data-lang');
                quizSections.forEach(section => {
                    if (section.id === targetLang) {
                        section.style.display = 'block';
                    } else {
                        section.style.display = 'none';
                    }
                });
            });
        });

        const allQuizzesData = {};

        const resetAllQuizzes = () => {
            confettiContainer.innerHTML = ''; // Clear confetti
            quizSections.forEach(quiz => {
                const quizId = quiz.id;
                allQuizzesData[quizId] = { score: 0, answeredCount: 0 };
                
                quiz.querySelector('.score').textContent = '0';
                const finalMessage = quiz.querySelector('.final-message');
                finalMessage.style.display = 'none';
                finalMessage.classList.remove('perfect-score');

                quiz.querySelectorAll('.options').forEach(container => {
                    container.classList.remove('answered');
                    container.querySelectorAll('.option').forEach(opt => {
                        opt.classList.remove('correct', 'incorrect');
                    });
                });
            });
        };
        
        quizSections.forEach(quiz => {
            const quizId = quiz.id;
            allQuizzesData[quizId] = { score: 0, answeredCount: 0 };

            const optionsContainers = quiz.querySelectorAll('.options');
            const scoreElement = quiz.querySelector('.score');
            const resetButton = quiz.querySelector('.reset-btn');
            const finalMessageElement = quiz.querySelector('.final-message');
            const totalQuestions = quiz.querySelectorAll('.question').length;

            optionsContainers.forEach(container => {
                container.addEventListener('click', (e) => {
                    if (e.target.classList.contains('option') && !container.classList.contains('answered')) {
                        container.classList.add('answered');
                        allQuizzesData[quizId].answeredCount++;
                        
                        const selectedOption = e.target;
                        const isCorrect = selectedOption.getAttribute('data-correct') === 'true';

                        if (isCorrect) {
                            selectedOption.classList.add('correct');
                            allQuizzesData[quizId].score++;
                            scoreElement.textContent = allQuizzesData[quizId].score;
                        } else {
                            selectedOption.classList.add('incorrect');
                            const correctOption = container.querySelector('[data-correct="true"]');
                            if (correctOption) {
                                correctOption.classList.add('correct');
                            }
                        }
                        
                        if (allQuizzesData[quizId].answeredCount === totalQuestions) {
                            if (allQuizzesData[quizId].score === totalQuestions) {
                                finalMessageElement.innerHTML = `<h3>Perfect Score!</h3><p>Excellent work!</p>`;
                                finalMessageElement.classList.add('perfect-score');
                                launchConfetti();
                            } else {
                                finalMessageElement.innerHTML = `<h3>Quiz Complete!</h3><p>Well done!</p>`;
                            }
                            finalMessageElement.style.display = 'block';
                        }
                    }
                });
            });

            resetButton.addEventListener('click', resetAllQuizzes);
        });

    </script>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Tips and ticks with Android phone

  Presentation - Save Space on Your Device with WhatsApp by Varghese Jose Phone Setup Quiz English മലയാളം English Quiz: Best Practices for Your Phone Question 1: To prevent photos and videos from WhatsApp groups from automatically appearing in your phone's gallery (like Google Photos), what setting should you change? A) Mute Group Notifications B) Turn off Media Visibility C) Archive the Group D) Pin the Chat Question 2: What is the primary benefit of turning off notification tones...
Post a Comment
Read more

Digital Deepak Internship courses

I am super excited to attend the session of www.digitaldeepak.com We will not take it seriously if we get something free . So this course will definitely be a place where I can pay for the course so that I take it seriously . We get reimbursed from the course and are super excited .I am an entrepreneur in a small town towards an outskirts of  Kochi. There is no way Digital Marketing can work for my businesses but my passion for technology has made me enroll . I am also passionate about 360 photography for Google Map . I have shared more that 4000 Photos with 70 million views . Digital Marketing demand  Due to the intervention of technology it is better to find the market the product or target the people than the traditional methods of marketing .  Understanding the needs of people or the correct audience is the most important way to sell the product and services . A better research on understanding the need is important  Use Google Auto Suggest  Answe...
Post a Comment
Read more