Team-meeting-quiz

Add this to the Code Module.html

<div class="emoji-quiz-container">
    <h1>Emoji Support Quiz</h1>
    <p class="quiz-description">Guess the common Divi/WordPress issue!</p>
    
    <div class="progress">Question <span id="current-question">1</span> of <span id="total-questions">31</span></div>
    
    <div class="quiz-container">
        <div class="emoji" id="emoji-display"></div>
        <div class="question">What does this mean?</div>
        <button class="reveal-btn" onclick="revealAnswer()">Reveal Answer</button>
        <div class="answer" id="answer-display">Broken desktop view</div>
    </div>
    
    <div class="nav-buttons">
        <button id="prev-btn" onclick="prevQuestion()" disabled>Previous</button>
        <button id="next-btn" onclick="nextQuestion()">Next</button>
    </div>
    
    <div class="footer">
        <p>Emoji Support Quiz - Click "Reveal Answer" to see the solution</p>
    </div>
</div>

<style>
.emoji-quiz-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f7fa;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.emoji-quiz-container h1 {
    color: #6c47ff;
    text-align: center;
    margin-bottom: 20px;
}

.quiz-description {
    text-align: center;
    margin-bottom: 20px;
}

.quiz-container {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
}

.emoji {
    font-size: 100px;
    margin-bottom: 30px;
    line-height: 1.2;
    min-height: 120px;
}

.emoji span {
    display: inline-block;
}

/* Animation classes */
.broken-heart { animation: pulse 1.5s infinite; }
.x-eyes { animation: shake 0.5s infinite; }
.loading { animation: spin 2s linear infinite; }
.confused { animation: tilt 2s ease-in-out infinite; }
.ghost { animation: float 3s ease-in-out infinite; }
.turtle { animation: move 4s linear infinite; }
.angry { animation: shakeAngry 0.3s infinite; }
.spam { animation: fly 2s linear infinite; }
.skull { animation: fade 2s ease-in-out infinite; }
.poop { animation: rotate 3s ease-in-out infinite; }
.rainbow { animation: colorChange 5s linear infinite; }
.thinking { animation: ponder 3s ease-in-out infinite; }
.shrug { animation: shrugMove 2s ease-in-out infinite; }
.sad { animation: bounce 2s infinite; }
.escalate { animation: grow 1.5s infinite alternate; }
.popup { animation: pop 2s infinite; }

/* Animation keyframes */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes tilt {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes move {
    0% { transform: translateX(-20px); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(20px); opacity: 0; }
}

@keyframes shakeAngry {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

@keyframes fly {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

@keyframes fade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes colorChange {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes ponder {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(-5deg); }
    75% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes shrugMove {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes grow {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

@keyframes pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.question {
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 24px;
    color: #444;
}

.answer {
    font-size: 20px;
    color: #6c47ff;
    background-color: #f8f9ff;
    padding: 15px;
    border-radius: 8px;
    margin: 30px 0;
    display: none;
}

.show-answer .answer {
    display: block;
    animation: fadeIn 0.5s;
}

.nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.emoji-quiz-container button {
    background-color: #6c47ff;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.emoji-quiz-container button:hover {
    background-color: #5a3bd6;
    transform: translateY(-2px);
}

.emoji-quiz-container button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

.reveal-btn {
    background-color: #4CAF50;
    margin: 0 auto;
    display: block;
}

.progress {
    text-align: center;
    margin: 20px 0;
    color: #666;
    font-size: 14px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.footer {
    text-align: center;
    margin-top: 40px;
    color: #888;
    font-size: 14px;
}
</style>

<script>
// Quiz data with animated emoji classes
const quizData = [
    { emoji: ["🖥️", "💔"], classes: ["", "broken-heart"], answer: "Broken desktop view" },
    { emoji: ["📱", "❌", "👀"], classes: ["", "x-eyes", "x-eyes"], answer: "Not visible on mobile" },
    { emoji: ["🔁", "🛑"], classes: ["loading", ""], answer: "Divi Builder stuck on loading" },
    { emoji: ["💾", "😵"], classes: ["", "confused"], answer: "Can't save changes" },
    { emoji: ["🖼️", "📱"], classes: ["", ""], answer: "Mobile image not displaying correctly" },
    { emoji: ["🔗", "❌"], classes: ["", "x-eyes"], answer: "Broken links on the site" },
    { emoji: ["📝", "👻"], classes: ["", "ghost"], answer: "Text is invisible/white on the site" },
    { emoji: ["⏳", "🐢"], classes: ["", "turtle"], answer: "Website loading too slow" },
    { emoji: ["💻", "📲", "🤯"], classes: ["", "", "angry"], answer: "Different layout on desktop vs. mobile" },
    { emoji: ["🖱️", "😡"], classes: ["", "angry"], answer: "Hover effect not working" },
    { emoji: ["🛒", "💔"], classes: ["", "broken-heart"], answer: "WooCommerce cart not updating" },
    { emoji: ["🎥", "🚫"], classes: ["", "x-eyes"], answer: "Video background not playing" },
    { emoji: ["🤖", "✉️"], classes: ["", "spam"], answer: "Contact form submissions going to spam" },
    { emoji: ["🔄", "🌐", "🚫"], classes: ["loading", "", "x-eyes"], answer: "Language switcher not working in multilingual site" },
    { emoji: ["😱", "💀"], classes: ["", "skull"], answer: "Accidentally deleted my entire site" },
    { emoji: ["➕", "📦", "❌"], classes: ["", "", "x-eyes"], answer: "Can't add new module" },
    { emoji: ["🛒", "🖼️", "📏"], classes: ["", "", ""], answer: "Product image sizes inconsistent" },
    { emoji: ["📌", "❌"], classes: ["", "x-eyes"], answer: "Sticky element is not working" },
    { emoji: ["🔍", "🚫"], classes: ["", "x-eyes"], answer: "Search is not working" },
    { emoji: ["📱", "💩"], classes: ["", "poop"], answer: "Mobile layout looks bad" },
    { emoji: ["🔐", "🚫"], classes: ["", "x-eyes"], answer: "SSL is not working" },
    { emoji: ["🍔", "🌈"], classes: ["", "rainbow"], answer: "How to change hamburger color" },
    { emoji: ["🤔", "🔗", "📜"], classes: ["thinking", "", ""], answer: "How to edit Footer Links" },
    { emoji: ["📸", "🖼️", "📱", "💩"], classes: ["", "", "", "poop"], answer: "Image looks bad on mobile" },
    { emoji: ["🧩", "📩", "🤷‍♂️"], classes: ["", "", "shrug"], answer: "Contact form not sending emails" },
    // New questions
    { emoji: ["💰", "❌", "😞"], classes: ["", "x-eyes", "sad"], answer: "I need a refund" },
    { emoji: ["🔁", "💬", "📈"], classes: ["", "", "escalate"], answer: "Escalate conversation to next level" },
    { emoji: ["▶️", "🎥", "🔁"], classes: ["", "", "loading"], answer: "How to autoplay video" },
    { emoji: ["🧑‍💻", "🤷‍♂️", "🤖"], classes: ["", "shrug", ""], answer: "Divi AI is not working" },
    { emoji: ["😲", "📍", "🪟"], classes: ["", "", "popup"], answer: "How to create the popup" },
    { emoji: ["📱", "📊", "📏"], classes: ["", "", ""], answer: "How to keep columns on mobile" }
];

let currentQuestion = 0;
const totalQuestions = quizData.length;
let answerRevealed = false;

// Initialize quiz
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('total-questions').textContent = totalQuestions;
    updateQuestion();
    
    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (e.key === 'ArrowRight') nextQuestion();
        else if (e.key === 'ArrowLeft') prevQuestion();
        else if (e.key === ' ' || e.key === 'Enter') revealAnswer();
    });
});

function updateQuestion() {
    const quizItem = quizData[currentQuestion];
    const emojiDisplay = document.getElementById('emoji-display');
    
    // Clear and rebuild emojis
    emojiDisplay.innerHTML = '';
    quizItem.emoji.forEach((emoji, i) => {
        const span = document.createElement('span');
        span.textContent = emoji;
        if (quizItem.classes[i]) span.classList.add(quizItem.classes[i]);
        emojiDisplay.appendChild(span);
    });
    
    document.getElementById('answer-display').textContent = quizItem.answer;
    document.getElementById('answer-display').style.display = 'none';
    document.getElementById('current-question').textContent = currentQuestion + 1;
    
    // Update button states
    document.getElementById('prev-btn').disabled = currentQuestion === 0;
    document.getElementById('next-btn').disabled = currentQuestion === totalQuestions - 1;
    
    answerRevealed = false;
}

function revealAnswer() {
    if (!answerRevealed) {
        document.getElementById('answer-display').style.display = 'block';
        answerRevealed = true;
    }
}

function nextQuestion() {
    if (currentQuestion < totalQuestions - 1) {
        currentQuestion++;
        updateQuestion();
    }
}

function prevQuestion() {
    if (currentQuestion > 0) {
        currentQuestion--;
        updateQuestion();
    }
}
</script>