Widget:520FamilyFeud: Difference between revisions

From Doc-Wiki
Jump to navigation Jump to search
Docmoates (talk | contribs)
HerzingU-SpecialAccess, Bots, Bureaucrats, Dr. Michael Moates, Interface administrators, Users who may use two-factor authentication, Push subscription managers, Suppressors, Administrators, Upload Wizard campaign editors
2,408 edits
VisualWikitext
Created page with "<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Family Feud: Nursing Edition</title> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&display=swap" rel="stylesheet"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Oswald', sans-serif; backgro..."
 
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<!DOCTYPE html>
<noinclude>
<html lang="en">
This widget displays the Family Feud Nursing Edition study game.
<head>
 
    <meta charset="UTF-8">
== Usage ==
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<pre>{{#widget:FamilyFeudNursing}}</pre>
    <title>Family Feud: Nursing Edition</title>
</noinclude><includeonly><html>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&display=swap" rel="stylesheet">
<div class="family-feud-nursing-game">
    <style>
<style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
.family-feud-nursing-game * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
.family-feud-nursing-game {
            font-family: 'Oswald', sans-serif;
    font-family: 'Oswald', sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
    min-height: 700px;
            color: white;
    height: 700px;
        }
    color: white;
        .game-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
    padding: 20px;
       
    border-radius: 12px;
        .title-banner { text-align: center; margin-bottom: 20px; }
    position: relative;
        .title-banner h1 {
    overflow: hidden;
            font-family: 'Bebas Neue', sans-serif;
}
            font-size: 4rem;
.family-feud-nursing-game .ff-container { max-width: 1000px; margin: 0 auto; height: 100%; }
            background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
 
            -webkit-background-clip: text;
.family-feud-nursing-game .ff-title { text-align: center; margin-bottom: 15px; }
            -webkit-text-fill-color: transparent;
.family-feud-nursing-game .ff-title h1 {
            letter-spacing: 8px;
    font-family: 'Bebas Neue', sans-serif;
        }
    font-size: 2.8rem;
        .subtitle { font-size: 1.5rem; color: #00d4ff; letter-spacing: 6px; }
    background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 6px;
}
.family-feud-nursing-game .ff-subtitle { font-size: 1.1rem; color: #00d4ff; letter-spacing: 4px; }
 
.family-feud-nursing-game .ff-steve {
    display: flex; align-items: center; gap: 15px;
    background: linear-gradient(145deg, #2d2d44, #1a1a2e);
    border-radius: 15px; padding: 15px; margin-bottom: 15px;
    border: 2px solid #ffd700;
}
.family-feud-nursing-game .ff-steve-avatar {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 2rem; border: 3px solid #fff;
    flex-shrink: 0;
}
.family-feud-nursing-game .ff-steve-avatar.ff-happy { animation: ffHappy 0.5s ease-out; }
.family-feud-nursing-game .ff-steve-avatar.ff-shocked { animation: ffShock 0.5s ease-out; }
@keyframes ffHappy { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2) rotate(10deg); } }
@keyframes ffShock { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3) rotate(-10deg); } }
.family-feud-nursing-game .ff-steve-name { font-family: 'Bebas Neue', sans-serif; color: #ffd700; letter-spacing: 2px; font-size: 0.9rem; }
.family-feud-nursing-game .ff-steve-dialogue { font-size: 1.1rem; line-height: 1.3; margin-top: 3px; }
 
.family-feud-nursing-game .ff-scores { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; }
.family-feud-nursing-game .ff-score-box {
    background: linear-gradient(145deg, #0f3460, #16213e);
    padding: 10px 30px; border-radius: 12px; border: 2px solid #00d4ff; text-align: center;
}
.family-feud-nursing-game .ff-score-label { font-size: 0.75rem; color: #00d4ff; text-transform: uppercase; letter-spacing: 2px; }
.family-feud-nursing-game .ff-score-value { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #ffd700; }
 
.family-feud-nursing-game .ff-strikes { display: flex; justify-content: center; gap: 12px; margin-bottom: 15px; }
.family-feud-nursing-game .ff-strike {
    width: 60px; height: 60px; background: #1a1a2e; border: 3px solid #333;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; color: transparent;
}
.family-feud-nursing-game .ff-strike.ff-active {
    background: linear-gradient(135deg, #ff0000, #8b0000);
    border-color: #ff4444; color: #fff;
    animation: ffStrikeFlash 0.3s ease-out;
}
@keyframes ffStrikeFlash { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }


        .steve-section {
.family-feud-nursing-game .ff-x-overlay, .family-feud-nursing-game .ff-ding-overlay {
            display: flex; align-items: center; gap: 20px;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(145deg, #2d2d44, #1a1a2e);
    display: none; align-items: center; justify-content: center; z-index: 50;
            border-radius: 20px; padding: 25px; margin-bottom: 20px;
    pointer-events: none; border-radius: 12px;
            border: 3px solid #ffd700;
}
        }
.family-feud-nursing-game .ff-x-overlay { background: rgba(139, 0, 0, 0.9); }
        .steve-avatar {
.family-feud-nursing-game .ff-x-overlay.ff-show, .family-feud-nursing-game .ff-ding-overlay.ff-show { display: flex; animation: ffOverlayFade 1s forwards; }
            width: 100px; height: 100px;
.family-feud-nursing-game .ff-ding-overlay { background: rgba(0, 100, 0, 0.8); }
            background: linear-gradient(135deg, #ffd700, #ff8c00);
.family-feud-nursing-game .ff-ding-overlay.ff-show { animation: ffOverlayFade 0.7s forwards; }
            border-radius: 50%; display: flex; align-items: center;
@keyframes ffOverlayFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
            justify-content: center; font-size: 3rem; border: 4px solid #fff;
.family-feud-nursing-game .ff-big-x { font-size: 15rem; color: #fff; font-family: 'Bebas Neue', sans-serif; animation: ffPopIn 0.2s ease-out; }
        }
.family-feud-nursing-game .ff-ding-text { font-size: 12rem; color: #90EE90; font-family: 'Bebas Neue', sans-serif; animation: ffPopIn 0.2s ease-out; }
        .steve-avatar.happy { animation: steveHappy 0.5s ease-out; }
@keyframes ffPopIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
        .steve-avatar.shocked { animation: steveShock 0.5s ease-out; }
        @keyframes steveHappy {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2) rotate(10deg); }
        }
        @keyframes steveShock {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3) rotate(-10deg); }
        }
        .steve-name { font-family: 'Bebas Neue', sans-serif; color: #ffd700; letter-spacing: 2px; }
        .steve-dialogue { font-size: 1.4rem; line-height: 1.5; margin-top: 5px; }


        .score-board { display: flex; justify-content: center; gap: 40px; margin-bottom: 20px; }
.family-feud-nursing-game .ff-board {
        .score-item {
    background: linear-gradient(180deg, #1a237e, #0d47a1);
            background: linear-gradient(145deg, #0f3460, #16213e);
    border-radius: 15px; padding: 20px; margin-bottom: 15px;
            padding: 15px 40px; border-radius: 15px; border: 3px solid #00d4ff; text-align: center;
    border: 4px solid #ffd700;
        }
}
        .score-label { font-size: 0.9rem; color: #00d4ff; text-transform: uppercase; letter-spacing: 2px; }
.family-feud-nursing-game .ff-question {
        .score-value { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: #ffd700; }
    text-align: center; margin-bottom: 15px; padding: 12px;
    background: rgba(0,0,0,0.4); border-radius: 10px; border: 2px solid #ffd700;
}
.family-feud-nursing-game .ff-category { font-size: 0.8rem; color: #00d4ff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px; }
.family-feud-nursing-game .ff-question-text { font-size: 1.2rem; line-height: 1.3; }


        .strikes-container { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; }
.family-feud-nursing-game .ff-answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .strike {
.family-feud-nursing-game .ff-answer {
            width: 90px; height: 90px; background: #1a1a2e; border: 5px solid #333;
    background: linear-gradient(145deg, #0d47a1, #1565c0);
            border-radius: 15px; display: flex; align-items: center; justify-content: center;
    border: 2px solid #2196f3; border-radius: 8px; padding: 10px 12px;
            font-size: 3.5rem; color: transparent;
    display: flex; justify-content: space-between; align-items: center; min-height: 48px;
        }
}
        .strike.active {
.family-feud-nursing-game .ff-answer.ff-revealed {
            background: linear-gradient(135deg, #ff0000, #8b0000);
    background: linear-gradient(145deg, #ffd700, #ff8c00);
            border-color: #ff4444; color: #fff;
    border-color: #fff; animation: ffReveal 0.5s ease-out;
            animation: strikeFlash 0.3s ease-out;
}
        }
@keyframes ffReveal { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
        @keyframes strikeFlash { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.family-feud-nursing-game .ff-answer-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: #ffd700; width: 30px; text-align: center; }
.family-feud-nursing-game .ff-answer.ff-revealed .ff-answer-num { color: #1a1a2e; }
.family-feud-nursing-game .ff-answer-text { flex: 1; font-size: 0.9rem; text-align: center; text-transform: uppercase; letter-spacing: 1px; }
.family-feud-nursing-game .ff-answer.ff-revealed .ff-answer-text { color: #1a1a2e; font-weight: 700; }
.family-feud-nursing-game .ff-answer-pts { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: #00d4ff; width: 40px; text-align: center; }
.family-feud-nursing-game .ff-answer.ff-revealed .ff-answer-pts { color: #1a1a2e; }


        .big-x-overlay, .ding-overlay {
.family-feud-nursing-game .ff-input-area { display: flex; gap: 10px; justify-content: center; margin-bottom: 15px; }
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
.family-feud-nursing-game .ff-input {
            display: none; align-items: center; justify-content: center; z-index: 500;
    flex: 1; max-width: 400px; padding: 10px 18px; font-size: 1.1rem;
        }
    font-family: 'Oswald', sans-serif; border: 2px solid #00d4ff; border-radius: 50px;
        .big-x-overlay { background: rgba(139, 0, 0, 0.9); }
    background: rgba(255,255,255,0.1); color: #fff; text-align: center;
        .big-x-overlay.show, .ding-overlay.show { display: flex; animation: overlayFade 1s forwards; }
    text-transform: uppercase; letter-spacing: 2px; outline: none;
        .ding-overlay { background: rgba(0, 100, 0, 0.8); }
}
        .ding-overlay.show { animation: overlayFade 0.7s forwards; }
.family-feud-nursing-game .ff-input:focus { border-color: #ffd700; box-shadow: 0 0 15px rgba(255,215,0,0.4); }
        @keyframes overlayFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.family-feud-nursing-game .ff-input::placeholder { color: rgba(255,255,255,0.5); }
        .big-x { font-size: 50vw; color: #fff; font-family: 'Bebas Neue', sans-serif; animation: popIn 0.2s ease-out; }
.family-feud-nursing-game .ff-submit {
        .ding-text { font-size: 30vw; color: #90EE90; font-family: 'Bebas Neue', sans-serif; animation: popIn 0.2s ease-out; }
    padding: 10px 30px; font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem;
        @keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
    background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
    border-radius: 50px; color: #1a1a2e; cursor: pointer; letter-spacing: 2px;
}
.family-feud-nursing-game .ff-submit:hover { transform: scale(1.05); }


        .answer-board {
.family-feud-nursing-game .ff-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
            background: linear-gradient(180deg, #1a237e, #0d47a1);
.family-feud-nursing-game .ff-btn {
            border-radius: 20px; padding: 30px; margin-bottom: 20px;
    padding: 8px 18px; font-family: 'Oswald', sans-serif; font-size: 0.85rem;
            border: 5px solid #ffd700;
    border: 2px solid; border-radius: 8px; cursor: pointer; text-transform: uppercase;
        }
}
        .question-display {
.family-feud-nursing-game .ff-btn-next { background: linear-gradient(145deg, #00d4ff, #0099cc); border-color: #00d4ff; color: #1a1a2e; }
            text-align: center; margin-bottom: 25px; padding: 20px;
.family-feud-nursing-game .ff-btn-reveal { background: linear-gradient(145deg, #9c27b0, #7b1fa2); border-color: #9c27b0; color: #fff; }
            background: rgba(0,0,0,0.4); border-radius: 15px; border: 2px solid #ffd700;
.family-feud-nursing-game .ff-btn-sound { background: linear-gradient(145deg, #4caf50, #388e3c); border-color: #4caf50; color: #fff; }
        }
.family-feud-nursing-game .ff-btn-restart { background: linear-gradient(145deg, #ff5722, #e64a19); border-color: #ff5722; color: #fff; }
        .question-category { font-size: 1rem; color: #00d4ff; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px; }
.family-feud-nursing-game .ff-btn:hover { transform: translateY(-2px); }
        .question-text { font-size: 1.5rem; line-height: 1.4; }


        .answers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
/* Start and Game Over screens - positioned within container */
        .answer-slot {
.family-feud-nursing-game .ff-start, .family-feud-nursing-game .ff-gameover {
            background: linear-gradient(145deg, #0d47a1, #1565c0);
    position: absolute;
            border: 3px solid #2196f3; border-radius: 10px; padding: 15px 20px;
    top: 0;
            display: flex; justify-content: space-between; align-items: center; min-height: 60px;
    left: 0;
        }
    right: 0;
        .answer-slot.revealed {
    bottom: 0;
            background: linear-gradient(145deg, #ffd700, #ff8c00);
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
            border-color: #fff; animation: revealFlip 0.5s ease-out;
    display: flex;
        }
    flex-direction: column;
        @keyframes revealFlip { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
    align-items: center;
        .answer-number { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #ffd700; width: 40px; text-align: center; }
    justify-content: center;
        .answer-slot.revealed .answer-number { color: #1a1a2e; }
    z-index: 100;
        .answer-text { flex: 1; font-size: 1.1rem; text-align: center; text-transform: uppercase; letter-spacing: 1px; }
    border-radius: 12px;
        .answer-slot.revealed .answer-text { color: #1a1a2e; font-weight: 700; }
}
        .answer-points { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: #00d4ff; width: 50px; text-align: center; }
.family-feud-nursing-game .ff-start.ff-hidden { display: none; }
        .answer-slot.revealed .answer-points { color: #1a1a2e; }
.family-feud-nursing-game .ff-gameover { display: none; }
.family-feud-nursing-game .ff-gameover.ff-show { display: flex; }


        .input-section { display: flex; gap: 15px; justify-content: center; margin-bottom: 20px; }
.family-feud-nursing-game .ff-start-title {
        .guess-input {
    font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem;
            flex: 1; max-width: 500px; padding: 15px 25px; font-size: 1.3rem;
    background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
            font-family: 'Oswald', sans-serif; border: 3px solid #00d4ff; border-radius: 50px;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background: rgba(255,255,255,0.1); color: #fff; text-align: center;
    letter-spacing: 8px; animation: ffPulse 2s infinite;
            text-transform: uppercase; letter-spacing: 2px; outline: none;
}
        }
@keyframes ffPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
        .guess-input:focus { border-color: #ffd700; box-shadow: 0 0 20px rgba(255,215,0,0.4); }
.family-feud-nursing-game .ff-start-sub { font-size: 1.4rem; color: #00d4ff; margin-bottom: 20px; letter-spacing: 4px; }
        .guess-input::placeholder { color: rgba(255,255,255,0.5); }
.family-feud-nursing-game .ff-start-emoji { font-size: 5rem; margin-bottom: 20px; animation: ffWave 1s infinite; }
        .submit-btn {
@keyframes ffWave { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
            padding: 15px 40px; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem;
.family-feud-nursing-game .ff-play-btn {
            background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
    padding: 15px 60px; font-family: 'Bebas Neue', sans-serif; font-size: 2rem;
            border-radius: 50px; color: #1a1a2e; cursor: pointer; letter-spacing: 2px;
    background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
        }
    border-radius: 50px; color: #1a1a2e; cursor: pointer; letter-spacing: 4px;
        .submit-btn:hover { transform: scale(1.05); }
}
.family-feud-nursing-game .ff-play-btn:hover { transform: scale(1.1); }
.family-feud-nursing-game .ff-start-info { margin-top: 20px; text-align: center; color: rgba(255,255,255,0.7); max-width: 400px; line-height: 1.6; font-size: 0.95rem; }


        .control-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.family-feud-nursing-game .ff-final-score { font-family: 'Bebas Neue', sans-serif; font-size: 5rem; color: #ffd700; }
        .control-btn {
.family-feud-nursing-game .ff-final-msg { font-size: 1.4rem; color: #00d4ff; margin-bottom: 20px; text-align: center; }
            padding: 12px 25px; font-family: 'Oswald', sans-serif; font-size: 1rem;
            border: 2px solid; border-radius: 10px; cursor: pointer; text-transform: uppercase;
        }
        .control-btn.next { background: linear-gradient(145deg, #00d4ff, #0099cc); border-color: #00d4ff; color: #1a1a2e; }
        .control-btn.reveal { background: linear-gradient(145deg, #9c27b0, #7b1fa2); border-color: #9c27b0; color: #fff; }
        .control-btn.sound { background: linear-gradient(145deg, #4caf50, #388e3c); border-color: #4caf50; color: #fff; }
        .control-btn.restart { background: linear-gradient(145deg, #ff5722, #e64a19); border-color: #ff5722; color: #fff; }
        .control-btn:hover { transform: translateY(-2px); }


        .start-screen, .game-over {
.family-feud-nursing-game .ff-confetti {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    position: absolute; width: 10px; height: 10px; z-index: 90;
            background: linear-gradient(135deg, #1a1a2e, #0f3460);
    animation: ffFall 3s linear forwards;
            display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000;
}
        }
@keyframes ffFall {
        .start-screen.hidden, .game-over:not(.show) { display: none; }
    0% { transform: translateY(-50px) rotate(0); opacity: 1; }
        .start-title {
    100% { transform: translateY(700px) rotate(720deg); opacity: 0; }
            font-family: 'Bebas Neue', sans-serif; font-size: 5rem;
}
            background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            letter-spacing: 10px; animation: pulse 2s infinite;
        }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
        .start-subtitle { font-size: 2rem; color: #00d4ff; margin-bottom: 30px; letter-spacing: 5px; }
        .start-steve { font-size: 8rem; margin-bottom: 30px; animation: wave 1s infinite; }
        @keyframes wave { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
        .start-btn {
            padding: 20px 80px; font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem;
            background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
            border-radius: 60px; color: #1a1a2e; cursor: pointer; letter-spacing: 5px;
        }
        .start-btn:hover { transform: scale(1.1); }
        .start-info { margin-top: 30px; text-align: center; color: rgba(255,255,255,0.7); max-width: 500px; line-height: 1.8; }


        .final-score { font-family: 'Bebas Neue', sans-serif; font-size: 8rem; color: #ffd700; }
.family-feud-nursing-game .ff-progress { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-bottom: 12px; }
        .final-message { font-size: 1.8rem; color: #00d4ff; margin-bottom: 30px; text-align: center; }
.family-feud-nursing-game .ff-progress-fill { height: 100%; background: linear-gradient(90deg, #00d4ff, #ffd700); border-radius: 3px; transition: width 0.5s; }


        .confetti {
.family-feud-nursing-game .ff-game-content { display: none; }
            position: fixed; width: 10px; height: 10px; z-index: 999;
.family-feud-nursing-game .ff-game-content.ff-visible { display: block; }
            animation: fall 3s linear forwards;
        }
        @keyframes fall {
            0% { transform: translateY(-100vh) rotate(0); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }


        .progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-bottom: 20px; }
@media (max-width: 768px) {
        .progress-fill { height: 100%; background: linear-gradient(90deg, #00d4ff, #ffd700); border-radius: 4px; transition: width 0.5s; }
    .family-feud-nursing-game .ff-title h1 { font-size: 2rem; }
    .family-feud-nursing-game .ff-answers { grid-template-columns: 1fr; }
    .family-feud-nursing-game .ff-steve { flex-direction: column; text-align: center; }
    .family-feud-nursing-game .ff-input-area { flex-direction: column; align-items: center; }
    .family-feud-nursing-game .ff-input { width: 100%; }
    .family-feud-nursing-game .ff-start-title { font-size: 2.5rem; }
}
</style>


        @media (max-width: 768px) {
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&display=swap" rel="stylesheet">
            .title-banner h1 { font-size: 2.5rem; }
            .answers-grid { grid-template-columns: 1fr; }
            .steve-section { flex-direction: column; text-align: center; }
            .input-section { flex-direction: column; align-items: center; }
            .guess-input { width: 100%; }
            .start-title { font-size: 3rem; }
        }
    </style>
</head>
<body>
    <div class="big-x-overlay" id="bigXOverlay"><div class="big-x">✖</div></div>
    <div class="ding-overlay" id="dingOverlay"><div class="ding-text">✓</div></div>


    <div class="start-screen" id="startScreen">
<!-- Overlays -->
        <div class="start-title">FAMILY FEUD</div>
<div class="ff-x-overlay" id="ffXOverlay"><div class="ff-big-x">✖</div></div>
        <div class="start-subtitle">✨ NURSING EDITION ✨</div>
<div class="ff-ding-overlay" id="ffDingOverlay"><div class="ff-ding-text">✓</div></div>
        <div class="start-steve">🎤</div>
        <button class="start-btn" onclick="startGame()">PLAY!</button>
        <div class="start-info">
            Study for your NCLEX with Steve Harvey!<br><br>
            🎯 Cardiovascular, Pharmacology, Pain, Geriatrics & more<br>
            🔊 Sound effects included!
        </div>
    </div>


    <div class="game-over" id="gameOver">
<!-- Start Screen - inside main container -->
        <div class="start-steve">🏆</div>
<div class="ff-start" id="ffStart">
        <div class="final-score" id="finalScore">0</div>
    <div class="ff-start-title">FAMILY FEUD</div>
        <div class="final-message" id="finalMessage"></div>
    <div class="ff-start-sub">✨ NURSING EDITION ✨</div>
        <button class="start-btn" onclick="restartGame()">PLAY AGAIN!</button>
    <div class="ff-start-emoji">🎤</div>
    <button class="ff-play-btn" onclick="FFGame.start()">PLAY!</button>
    <div class="ff-start-info">
        Study for your NCLEX with Steve Harvey!<br><br>
        🎯 Cardiovascular, Pharmacology, Pain, Geriatrics & more<br>
        🔊 Sound effects included!
     </div>
     </div>
</div>


    <div class="game-container">
<!-- Game Over Screen -->
        <div class="title-banner">
<div class="ff-gameover" id="ffGameOver">
            <h1>FAMILY FEUD</h1>
    <div class="ff-start-emoji">🏆</div>
            <div class="subtitle">Nursing Edition</div>
    <div class="ff-final-score" id="ffFinalScore">0</div>
        </div>
    <div class="ff-final-msg" id="ffFinalMsg"></div>
    <button class="ff-play-btn" onclick="FFGame.restart()">PLAY AGAIN!</button>
</div>


        <div class="progress-bar"><div class="progress-fill" id="progressFill" style="width:0%"></div></div>
<!-- Game Content - hidden until play is clicked -->
<div class="ff-game-content" id="ffGameContent">
    <div class="ff-title">
        <h1>FAMILY FEUD</h1>
        <div class="ff-subtitle">Nursing Edition</div>
    </div>


        <div class="steve-section">
    <div class="ff-progress"><div class="ff-progress-fill" id="ffProgress" style="width:0%"></div></div>
            <div class="steve-avatar" id="steveAvatar">🎤</div>
            <div>
                <div class="steve-name">STEVE HARVEY</div>
                <div class="steve-dialogue" id="steveDialogue">Welcome to Family Feud!</div>
            </div>
        </div>


        <div class="score-board">
    <div class="ff-steve">
            <div class="score-item">
        <div class="ff-steve-avatar" id="ffSteve">🎤</div>
                <div class="score-label">Score</div>
        <div>
                <div class="score-value" id="score">0</div>
             <div class="ff-steve-name">STEVE HARVEY</div>
            </div>
            <div class="ff-steve-dialogue" id="ffDialogue">Welcome to Family Feud!</div>
             <div class="score-item">
                <div class="score-label">Round</div>
                <div class="score-value" id="round">1</div>
            </div>
         </div>
         </div>
    </div>


        <div class="strikes-container">
    <div class="ff-scores">
            <div class="strike" id="strike1">✖</div>
        <div class="ff-score-box">
             <div class="strike" id="strike2">✖</div>
             <div class="ff-score-label">Score</div>
             <div class="strike" id="strike3">✖</div>
             <div class="ff-score-value" id="ffScore">0</div>
         </div>
         </div>
 
         <div class="ff-score-box">
         <div class="answer-board">
             <div class="ff-score-label">Round</div>
             <div class="question-display">
            <div class="ff-score-value" id="ffRound">1</div>
                <div class="question-category" id="category">LOADING</div>
                <div class="question-text" id="questionText">Loading...</div>
            </div>
            <div class="answers-grid" id="answersGrid"></div>
         </div>
         </div>
    </div>


        <div class="input-section">
    <div class="ff-strikes">
            <input type="text" class="guess-input" id="guessInput" placeholder="TYPE YOUR ANSWER..." autocomplete="off">
        <div class="ff-strike" id="ffStrike1">✖</div>
            <button class="submit-btn" onclick="submitGuess()">SUBMIT</button>
        <div class="ff-strike" id="ffStrike2">✖</div>
        </div>
        <div class="ff-strike" id="ffStrike3">✖</div>
    </div>


        <div class="control-buttons">
    <div class="ff-board">
            <button class="control-btn sound" id="soundBtn" onclick="toggleSound()">🔊 SOUND ON</button>
        <div class="ff-question">
             <button class="control-btn reveal" onclick="revealAll()">REVEAL ALL</button>
             <div class="ff-category" id="ffCategory">LOADING</div>
             <button class="control-btn next" onclick="nextQuestion()">NEXT →</button>
             <div class="ff-question-text" id="ffQuestion">Loading...</div>
            <button class="control-btn restart" onclick="restartGame()">🔄 RESTART</button>
         </div>
         </div>
        <div class="ff-answers" id="ffAnswers"></div>
     </div>
     </div>


     <script>
     <div class="ff-input-area">
         // Audio Context for generating sounds
         <input type="text" class="ff-input" id="ffInput" placeholder="TYPE YOUR ANSWER..." autocomplete="off">
         let audioCtx = null;
         <button class="ff-submit" onclick="FFGame.submit()">SUBMIT</button>
        let soundEnabled = true;
    </div>


         function initAudio() {
    <div class="ff-buttons">
            if (!audioCtx) {
         <button class="ff-btn ff-btn-sound" id="ffSoundBtn" onclick="FFGame.toggleSound()">🔊 SOUND ON</button>
                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        <button class="ff-btn ff-btn-reveal" onclick="FFGame.revealAll()">REVEAL ALL</button>
            }
        <button class="ff-btn ff-btn-next" onclick="FFGame.next()">NEXT →</button>
            if (audioCtx.state === 'suspended') {
        <button class="ff-btn ff-btn-restart" onclick="FFGame.restart()">🔄 RESTART</button>
                audioCtx.resume();
    </div>
            }
</div>
        }


        // Generate actual game show sounds
</div>
        function playDing() {
            if (!soundEnabled || !audioCtx) return;
           
            // Create a nice bell/ding sound
            const duration = 0.6;
            const frequencies = [880, 1108.73, 1318.51]; // A5, C#6, E6 - A major chord
           
            frequencies.forEach((freq, i) => {
                const osc = audioCtx.createOscillator();
                const gain = audioCtx.createGain();
               
                osc.connect(gain);
                gain.connect(audioCtx.destination);
               
                osc.type = 'sine';
                osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
               
                gain.gain.setValueAtTime(0, audioCtx.currentTime);
                gain.gain.linearRampToValueAtTime(0.3, audioCtx.currentTime + 0.01);
                gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
               
                osc.start(audioCtx.currentTime + i * 0.05);
                osc.stop(audioCtx.currentTime + duration);
            });
        }


        function playBuzzer() {
<script>
            if (!soundEnabled || !audioCtx) return;
(function() {
           
    var audioCtx = null;
            // Create a harsh buzzer sound
    var soundEnabled = true;
            const duration = 0.8;
    var currentQ = 0;
            const osc1 = audioCtx.createOscillator();
    var score = 0;
            const osc2 = audioCtx.createOscillator();
    var strikes = 0;
            const gain = audioCtx.createGain();
    var revealed = [];
            const distortion = audioCtx.createWaveShaper();
           
            // Create distortion curve
            const curve = new Float32Array(256);
            for (let i = 0; i < 256; i++) {
                const x = (i - 128) / 128;
                curve[i] = Math.tanh(x * 3);
            }
            distortion.curve = curve;
           
            osc1.connect(distortion);
            osc2.connect(distortion);
            distortion.connect(gain);
            gain.connect(audioCtx.destination);
           
            osc1.type = 'sawtooth';
            osc2.type = 'square';
            osc1.frequency.setValueAtTime(120, audioCtx.currentTime);
            osc2.frequency.setValueAtTime(123, audioCtx.currentTime);
           
            gain.gain.setValueAtTime(0.4, audioCtx.currentTime);
            gain.gain.linearRampToValueAtTime(0.3, audioCtx.currentTime + 0.1);
            gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
           
            osc1.start(audioCtx.currentTime);
            osc2.start(audioCtx.currentTime);
            osc1.stop(audioCtx.currentTime + duration);
            osc2.stop(audioCtx.currentTime + duration);
        }


         function playReveal() {
    var intros = [
            if (!soundEnabled || !audioCtx) return;
         "Alright NURSING STUDENTS! Survey says... what's on the board?",
           
        "This is a GOOD ONE! Think like a nurse!",
            // Ascending arpeggio
        "Oh LAWD! This question is gonna test you!",
            const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
        "Top answers on the board! Show me what you got!",
            notes.forEach((freq, i) => {
        "You better KNOW THIS for your NCLEX!",
                const osc = audioCtx.createOscillator();
        "Survey says... name something a good nurse knows!"
                const gain = audioCtx.createGain();
    ];
                osc.connect(gain);
    var correct = [
                gain.connect(audioCtx.destination);
        "GOOD ANSWER! GOOD ANSWER! 👏",
                osc.type = 'sine';
        "OH! Look at that! You know your stuff!",
                osc.frequency.value = freq;
        "YES! That's what I'm talking about!",
                gain.gain.setValueAtTime(0.2, audioCtx.currentTime + i * 0.1);
         "DING DING DING! You got it!",
                gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + i * 0.1 + 0.3);
         "BOOM! That's nursing knowledge!",
                osc.start(audioCtx.currentTime + i * 0.1);
        "NICE ONE! Keep it going!"
                osc.stop(audioCtx.currentTime + i * 0.1 + 0.3);
    ];
            });
    var wrong = [
         }
        "Ehhhh... That ain't up there! ❌",
 
        "Really? ...STRIKE!",
         function playApplause() {
        "Ohhh no no no... STRIKE!",
            if (!soundEnabled || !audioCtx) return;
        "What?! ...STRIKE!",
           
        "That's a strike! Come on now!",
            // Simulate applause with noise bursts
        "Survey says... WRONG! ❌"
            const duration = 2;
    ];
            const bufferSize = audioCtx.sampleRate * duration;
            const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
            const data = buffer.getChannelData(0);
           
            for (let i = 0; i < bufferSize; i++) {
                // Create random noise with envelope
                const envelope = Math.sin((i / bufferSize) * Math.PI);
                data[i] = (Math.random() * 2 - 1) * envelope * 0.3;
            }
           
            const source = audioCtx.createBufferSource();
            const gain = audioCtx.createGain();
            const filter = audioCtx.createBiquadFilter();
           
            source.buffer = buffer;
            filter.type = 'bandpass';
            filter.frequency.value = 2000;
            filter.Q.value = 0.5;
           
            source.connect(filter);
            filter.connect(gain);
            gain.connect(audioCtx.destination);
           
            gain.gain.setValueAtTime(0.5, audioCtx.currentTime);
           
            source.start();
        }


         function playThemeNote() {
    var questions = [
             if (!soundEnabled || !audioCtx) return;
         { category: "CARDIOVASCULAR PHARMACOLOGY", question: "Name a common side effect of beta-blockers that nurses should monitor.", answers: [
              
            { text: "Bradycardia", points: 35, keywords: ["bradycardia", "brady", "slow heart rate", "slow pulse", "low heart rate"] },
             // Play a quick theme jingle
            { text: "Hypotension", points: 25, keywords: ["hypotension", "low blood pressure", "low bp", "decreased bp"] },
             const melody = [
            { text: "Fatigue", points: 15, keywords: ["fatigue", "tired", "tiredness", "weakness", "lethargy"] },
                { freq: 392, time: 0 },     // G
            { text: "Bronchospasm", points: 12, keywords: ["bronchospasm", "bronchoconstriction", "wheezing", "breathing difficulty"] },
                { freq: 440, time: 0.15 },   // A
             { text: "Depression", points: 8, keywords: ["depression", "depressed", "mood changes"] },
                { freq: 494, time: 0.3 },   // B
             { text: "Cold Extremities", points: 5, keywords: ["cold extremities", "cold hands", "cold feet", "peripheral vasoconstriction"] }
                { freq: 523, time: 0.45 },   // C
        ]},
                { freq: 587, time: 0.6 },   // D
        { category: "PAIN MANAGEMENT", question: "Name a NON-drug intervention for pain.", answers: [
                { freq: 523, time: 0.75 },   // C
             { text: "Heat/Cold Therapy", points: 30, keywords: ["heat therapy", "cold therapy", "ice pack", "warm compress", "heating pad", "cryotherapy"] },
             ];
            { text: "Massage", points: 22, keywords: ["massage", "massage therapy", "therapeutic touch", "rubbing"] },
              
            { text: "Distraction", points: 18, keywords: ["distraction", "music therapy", "television", "talking", "diversion"] },
             melody.forEach(note => {
            { text: "Positioning", points: 12, keywords: ["positioning", "repositioning", "elevation", "elevate", "pillow support"] },
                const osc = audioCtx.createOscillator();
             { text: "Deep Breathing", points: 10, keywords: ["deep breathing", "breathing exercises", "relaxation", "relaxation techniques"] },
                const gain = audioCtx.createGain();
            { text: "Guided Imagery", points: 8, keywords: ["guided imagery", "visualization", "meditation", "imagery"] }
                osc.connect(gain);
        ]},
                gain.connect(audioCtx.destination);
        { category: "GERIATRIC NURSING", question: "Name an age-related change affecting drug metabolism.", answers: [
                osc.type = 'triangle';
            { text: "Decreased Liver Function", points: 32, keywords: ["decreased liver", "liver function", "hepatic function", "reduced liver"] },
                osc.frequency.value = note.freq;
            { text: "Reduced Kidney Function", points: 28, keywords: ["reduced kidney", "kidney function", "renal function", "decreased gfr", "renal impairment"] },
                gain.gain.setValueAtTime(0.15, audioCtx.currentTime + note.time);
            { text: "Decreased Body Water", points: 15, keywords: ["decreased body water", "reduced body water", "dehydration", "less body water"] },
                gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + note.time + 0.2);
            { text: "Increased Body Fat", points: 12, keywords: ["increased body fat", "increased fat", "more body fat", "adipose tissue"] },
                osc.start(audioCtx.currentTime + note.time);
            { text: "Slower GI Motility", points: 8, keywords: ["slower gi", "decreased motility", "slow digestion", "gi motility", "gastric motility"] },
                osc.stop(audioCtx.currentTime + note.time + 0.2);
            { text: "Reduced Albumin", points: 5, keywords: ["reduced albumin", "decreased albumin", "low albumin", "hypoalbuminemia"] }
             });
        ]},
         }
        { category: "PATIENT TEACHING", question: "Name an essential part of discharge teaching.", answers: [
            { text: "Medication Instructions", points: 28, keywords: ["medication instructions", "medication teaching", "drug instructions", "medicine instructions", "prescription instructions"] },
            { text: "Warning Signs", points: 24, keywords: ["warning signs", "red flags", "when to call", "return precautions", "danger signs", "emergency signs"] },
            { text: "Follow-up Appointments", points: 18, keywords: ["follow-up", "followup", "follow up appointment", "return visit", "next appointment"] },
             { text: "Written Instructions", points: 12, keywords: ["written instructions", "handout", "printed instructions", "discharge papers", "written materials"] },
             { text: "Teach-Back", points: 10, keywords: ["teach-back", "teach back", "return demonstration", "patient understanding", "verify understanding"] },
             { text: "Diet Instructions", points: 8, keywords: ["diet instructions", "dietary", "nutrition", "food restrictions", "eating instructions"] }
        ]},
        { category: "LEFT HEART FAILURE", question: "Name a sign of LEFT-sided heart failure.", answers: [
            { text: "Shortness of Breath", points: 30, keywords: ["shortness of breath", "dyspnea", "difficulty breathing", "breathlessness", "hard to breathe"] },
            { text: "Lung Crackles", points: 25, keywords: ["crackles", "rales", "lung crackles", "pulmonary crackles", "lung sounds"] },
            { text: "Orthopnea", points: 18, keywords: ["orthopnea", "cant lay flat", "needs pillows", "difficulty lying flat"] },
            { text: "Pink Frothy Sputum", points: 12, keywords: ["pink frothy", "frothy sputum", "pink sputum", "pulmonary edema"] },
            { text: "Fatigue", points: 10, keywords: ["fatigue", "tired", "exhaustion", "weakness", "lethargy"] },
            { text: "Tachycardia", points: 5, keywords: ["tachycardia", "fast heart", "rapid pulse", "elevated heart rate", "racing heart"] }
        ]},
        { category: "MEDICATION RIGHTS", question: "Name one of the 'Rights' of medication administration.", answers: [
            { text: "Right Patient", points: 20, keywords: ["right patient", "correct patient", "patient identification", "verify patient"] },
            { text: "Right Drug", points: 20, keywords: ["right drug", "right medication", "correct drug", "correct medication", "right medicine"] },
            { text: "Right Dose", points: 18, keywords: ["right dose", "correct dose", "right amount", "correct amount", "proper dose"] },
            { text: "Right Route", points: 15, keywords: ["right route", "correct route", "administration route", "proper route"] },
            { text: "Right Time", points: 14, keywords: ["right time", "correct time", "proper time", "scheduled time", "timing"] },
            { text: "Right Documentation", points: 13, keywords: ["right documentation", "documentation", "charting", "recording", "right record"] }
        ]},
        { category: "ASTHMA DRUGS", question: "Name a medication class for asthma.", answers: [
            { text: "Beta-2 Agonists", points: 30, keywords: ["beta-2 agonist", "beta agonist", "albuterol", "bronchodilator", "saba", "laba"] },
            { text: "Corticosteroids", points: 25, keywords: ["corticosteroid", "steroid", "prednisone", "inhaled steroid", "glucocorticoid"] },
            { text: "Anticholinergics", points: 18, keywords: ["anticholinergic", "ipratropium", "atrovent", "tiotropium", "muscarinic antagonist"] },
            { text: "Leukotriene Inhibitors", points: 12, keywords: ["leukotriene", "montelukast", "singulair", "leukotriene modifier"] },
            { text: "Mast Cell Stabilizers", points: 10, keywords: ["mast cell", "cromolyn", "nedocromil", "mast cell stabilizer"] },
            { text: "Theophylline", points: 5, keywords: ["theophylline", "aminophylline", "methylxanthine", "xanthine"] }
        ]},
        { category: "LIVER FAILURE", question: "Name a sign of hepatic encephalopathy.", answers: [
            { text: "Confusion", points: 30, keywords: ["confusion", "altered mental status", "disorientation", "altered consciousness", "mental status changes"] },
            { text: "Asterixis", points: 25, keywords: ["asterixis", "liver flap", "flapping tremor", "hand flapping"] },
            { text: "Ammonia Breath", points: 18, keywords: ["ammonia breath", "fetor hepaticus", "musty breath", "sweet breath"] },
            { text: "Sleep Changes", points: 12, keywords: ["sleep changes", "insomnia", "sleep reversal", "sleep disturbance", "day night reversal"] },
            { text: "Personality Changes", points: 10, keywords: ["personality changes", "behavior changes", "mood changes", "irritability"] },
            { text: "Slurred Speech", points: 5, keywords: ["slurred speech", "speech difficulty", "dysarthria", "difficulty speaking"] }
        ]},
        { category: "HEARING LOSS CARE", question: "Name a nursing intervention for hearing-impaired patients.", answers: [
            { text: "Face the Patient", points: 28, keywords: ["face the patient", "face them", "eye contact", "look at patient", "face to face"] },
            { text: "Reduce Noise", points: 22, keywords: ["reduce noise", "quiet environment", "minimize noise", "background noise", "decrease noise"] },
            { text: "Speak Clearly", points: 18, keywords: ["speak clearly", "clear speech", "speak slowly", "enunciate", "articulate"] },
            { text: "Write Things Down", points: 14, keywords: ["write things down", "written communication", "write notes", "use paper", "writing"] },
            { text: "Check Hearing Aid", points: 10, keywords: ["check hearing aid", "hearing aid", "hearing device", "assistive device"] },
            { text: "Use Gestures", points: 8, keywords: ["use gestures", "gestures", "hand signals", "pointing", "nonverbal", "body language"] }
        ]},
        { category: "INFECTION CONTROL", question: "Name a Standard Precaution.", answers: [
            { text: "Hand Hygiene", points: 30, keywords: ["hand hygiene", "hand washing", "wash hands", "hand sanitizer", "hand sanitizing"] },
            { text: "Gloves", points: 22, keywords: ["gloves", "wear gloves", "gloving", "disposable gloves"] },
            { text: "Gown", points: 16, keywords: ["gown", "isolation gown", "protective gown", "wear gown"] },
            { text: "Mask", points: 14, keywords: ["mask", "face mask", "n95", "surgical mask", "respirator"] },
            { text: "Sharps Disposal", points: 10, keywords: ["sharps disposal", "sharps container", "needle disposal", "sharp disposal", "needle safety"] },
             { text: "Cough Etiquette", points: 8, keywords: ["cough etiquette", "respiratory hygiene", "cover cough", "cover mouth", "respiratory etiquette"] }
         ]}
    ];


        function toggleSound() {
    function initAudio() {
            soundEnabled = !soundEnabled;
        if (!audioCtx) { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); }
            document.getElementById('soundBtn').innerHTML = soundEnabled ? '🔊 SOUND ON' : '🔇 SOUND OFF';
        if (audioCtx.state === 'suspended') { audioCtx.resume(); }
            if (soundEnabled) initAudio();
    }
        }


         // Game State
    function playDing() {
         let currentQuestion = 0;
         if (!soundEnabled || !audioCtx) return;
         let score = 0;
         var freqs = [880, 1108.73, 1318.51];
        let strikes = 0;
         freqs.forEach(function(freq, i) {
         let revealedAnswers = [];
            var osc = audioCtx.createOscillator();
            var gain = audioCtx.createGain();
            osc.connect(gain); gain.connect(audioCtx.destination);
            osc.type = 'sine'; osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
            gain.gain.setValueAtTime(0, audioCtx.currentTime);
            gain.gain.linearRampToValueAtTime(0.3, audioCtx.currentTime + 0.01);
            gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.6);
            osc.start(audioCtx.currentTime + i * 0.05);
            osc.stop(audioCtx.currentTime + 0.6);
         });
    }


         // Steve's lines
    function playBuzzer() {
         const steveIntros = [
         if (!soundEnabled || !audioCtx) return;
            "Alright NURSING STUDENTS! Survey says... what's on the board?",
         var osc1 = audioCtx.createOscillator();
            "This is a GOOD ONE! Think like a nurse!",
        var osc2 = audioCtx.createOscillator();
            "Oh LAWD! This question is gonna test you!",
        var gain = audioCtx.createGain();
            "Top answers on the board! Show me what you got!",
        osc1.connect(gain); osc2.connect(gain); gain.connect(audioCtx.destination);
            "You better KNOW THIS for your NCLEX!",
         osc1.type = 'sawtooth'; osc2.type = 'square';
            "Survey says... name something a good nurse knows!"
        osc1.frequency.setValueAtTime(120, audioCtx.currentTime);
         ];
        osc2.frequency.setValueAtTime(123, audioCtx.currentTime);
        const steveCorrect = [
         gain.gain.setValueAtTime(0.4, audioCtx.currentTime);
            "GOOD ANSWER! GOOD ANSWER! 👏",
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.8);
            "OH! Look at that! You know your stuff!",
        osc1.start(audioCtx.currentTime); osc2.start(audioCtx.currentTime);
            "YES! That's what I'm talking about!",
        osc1.stop(audioCtx.currentTime + 0.8); osc2.stop(audioCtx.currentTime + 0.8);
            "DING DING DING! You got it!",
    }
            "BOOM! That's nursing knowledge!",
            "NICE ONE! Keep it going!"
        ];
         const steveWrong = [
            "Ehhhh... That ain't up there! ❌",
            "Really? ...STRIKE!",
            "Ohhh no no no... STRIKE!",
            "What?! ...STRIKE!",
            "That's a strike! Come on now!",
            "Survey says... WRONG! ❌"
        ];


         // Questions
    function playReveal() {
         const questions = [
         if (!soundEnabled || !audioCtx) return;
            {
         var notes = [523.25, 659.25, 783.99, 1046.50];
                category: "CARDIOVASCULAR PHARMACOLOGY",
        notes.forEach(function(freq, i) {
                question: "Name a common side effect of beta-blockers that nurses should monitor.",
             var osc = audioCtx.createOscillator();
                answers: [
             var gain = audioCtx.createGain();
                    { text: "Bradycardia", points: 35, keywords: ["brady", "slow heart", "heart rate", "pulse"] },
             osc.connect(gain); gain.connect(audioCtx.destination);
                    { text: "Hypotension", points: 25, keywords: ["hypo", "low blood", "pressure", "bp"] },
             osc.type = 'sine'; osc.frequency.value = freq;
                    { text: "Fatigue", points: 15, keywords: ["tired", "fatigue", "weak", "energy"] },
             gain.gain.setValueAtTime(0.2, audioCtx.currentTime + i * 0.1);
                    { text: "Bronchospasm", points: 12, keywords: ["bronch", "wheez", "breathing", "lung"] },
             gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + i * 0.1 + 0.3);
                    { text: "Depression", points: 8, keywords: ["depress", "mood", "sad"] },
             osc.start(audioCtx.currentTime + i * 0.1);
                    { text: "Cold Extremities", points: 5, keywords: ["cold", "extrem", "hands", "feet"] }
             osc.stop(audioCtx.currentTime + i * 0.1 + 0.3);
                ]
        });
             },
    }
             {
                category: "PAIN MANAGEMENT",
                question: "Name a NON-drug intervention for pain.",
                answers: [
                    { text: "Heat/Cold Therapy", points: 30, keywords: ["heat", "cold", "ice", "warm", "compress"] },
                    { text: "Massage", points: 22, keywords: ["massage", "rub", "touch"] },
                    { text: "Distraction", points: 18, keywords: ["distract", "music", "tv", "talk"] },
                    { text: "Positioning", points: 12, keywords: ["position", "elevat", "pillow", "move"] },
                    { text: "Deep Breathing", points: 10, keywords: ["breath", "relax", "deep"] },
                    { text: "Guided Imagery", points: 8, keywords: ["imager", "visual", "meditat"] }
                ]
             },
            {
                category: "GERIATRIC NURSING",
                question: "Name an age-related change affecting drug metabolism.",
                answers: [
                    { text: "Decreased Liver Function", points: 32, keywords: ["liver", "hepat"] },
                    { text: "Reduced Kidney Function", points: 28, keywords: ["kidney", "renal", "gfr"] },
                    { text: "Decreased Body Water", points: 15, keywords: ["water", "fluid", "dehydr"] },
                    { text: "Increased Body Fat", points: 12, keywords: ["fat", "adipose"] },
                    { text: "Slower GI Motility", points: 8, keywords: ["gi", "gastro", "digest"] },
                    { text: "Reduced Albumin", points: 5, keywords: ["albumin", "protein"] }
                ]
            },
            {
                category: "PATIENT TEACHING",
                question: "Name an essential part of discharge teaching.",
                answers: [
                    { text: "Medication Instructions", points: 28, keywords: ["med", "drug", "prescription", "pill"] },
                    { text: "Warning Signs", points: 24, keywords: ["warning", "return", "call", "er", "emergency"] },
                    { text: "Follow-up Appointments", points: 18, keywords: ["follow", "appointment", "visit"] },
                    { text: "Written Instructions", points: 12, keywords: ["written", "paper", "handout"] },
                    { text: "Teach-Back", points: 10, keywords: ["teach", "repeat", "understand"] },
                    { text: "Diet Instructions", points: 8, keywords: ["diet", "food", "eat", "nutrition"] }
                ]
            },
             {
                category: "LEFT HEART FAILURE",
                question: "Name a sign of LEFT-sided heart failure.",
                answers: [
                    { text: "Shortness of Breath", points: 30, keywords: ["breath", "sob", "short", "dyspnea"] },
                    { text: "Lung Crackles", points: 25, keywords: ["crackle", "rale", "lung"] },
                    { text: "Orthopnea", points: 18, keywords: ["orthopnea", "pillow", "sit", "flat"] },
                    { text: "Pink Frothy Sputum", points: 12, keywords: ["pink", "frothy", "sputum", "foam"] },
                    { text: "Fatigue", points: 10, keywords: ["fatigue", "tired", "weak"] },
                    { text: "Tachycardia", points: 5, keywords: ["tachy", "fast", "rapid"] }
                ]
            },
            {
                category: "MEDICATION RIGHTS",
                question: "Name one of the 'Rights' of medication administration.",
                answers: [
                    { text: "Right Patient", points: 20, keywords: ["patient", "person", "client"] },
                    { text: "Right Drug", points: 20, keywords: ["drug", "medication", "med"] },
                    { text: "Right Dose", points: 18, keywords: ["dose", "amount"] },
                    { text: "Right Route", points: 15, keywords: ["route", "oral", "iv"] },
                    { text: "Right Time", points: 14, keywords: ["time", "when", "schedule"] },
                    { text: "Right Documentation", points: 13, keywords: ["document", "chart", "record"] }
                ]
             },
            {
                category: "ASTHMA DRUGS",
                question: "Name a medication class for asthma.",
                answers: [
                    { text: "Beta-2 Agonists", points: 30, keywords: ["beta", "albuterol", "agonist"] },
                    { text: "Corticosteroids", points: 25, keywords: ["steroid", "cortico", "prednisone"] },
                    { text: "Anticholinergics", points: 18, keywords: ["cholinerg", "atrovent"] },
                    { text: "Leukotriene Inhibitors", points: 12, keywords: ["leuko", "singulair"] },
                    { text: "Mast Cell Stabilizers", points: 10, keywords: ["mast", "cromolyn"] },
                    { text: "Theophylline", points: 5, keywords: ["theophylline", "xanthine"] }
                ]
             },
             {
                category: "LIVER FAILURE",
                question: "Name a sign of hepatic encephalopathy.",
                answers: [
                    { text: "Confusion", points: 30, keywords: ["confus", "mental", "altered", "orient"] },
                    { text: "Asterixis", points: 25, keywords: ["asterix", "flap", "tremor"] },
                    { text: "Ammonia Breath", points: 18, keywords: ["ammonia", "breath", "fetor"] },
                    { text: "Sleep Changes", points: 12, keywords: ["sleep", "insomnia", "awake"] },
                    { text: "Personality Changes", points: 10, keywords: ["personal", "behavior", "mood"] },
                    { text: "Slurred Speech", points: 5, keywords: ["slur", "speech"] }
                ]
             },
            {
                category: "HEARING LOSS CARE",
                question: "Name a nursing intervention for hearing-impaired patients.",
                answers: [
                    { text: "Face the Patient", points: 28, keywords: ["face", "front", "look", "eye"] },
                    { text: "Reduce Noise", points: 22, keywords: ["noise", "quiet", "background"] },
                    { text: "Speak Clearly", points: 18, keywords: ["clear", "slow", "loud"] },
                    { text: "Write Things Down", points: 14, keywords: ["writ", "paper", "note"] },
                    { text: "Check Hearing Aid", points: 10, keywords: ["hearing aid", "battery"] },
                    { text: "Use Gestures", points: 8, keywords: ["gesture", "point", "sign"] }
                ]
            },
            {
                category: "INFECTION CONTROL",
                question: "Name a Standard Precaution.",
                answers: [
                    { text: "Hand Hygiene", points: 30, keywords: ["hand", "wash", "hygiene", "sanitiz"] },
                    { text: "Gloves", points: 22, keywords: ["glove"] },
                    { text: "Gown", points: 16, keywords: ["gown"] },
                    { text: "Mask", points: 14, keywords: ["mask", "n95", "face"] },
                    { text: "Sharps Disposal", points: 10, keywords: ["sharp", "needle"] },
                    { text: "Cough Etiquette", points: 8, keywords: ["cough", "cover", "tissue"] }
                ]
            }
        ];


        function startGame() {
    function playApplause() {
            initAudio();
        if (!soundEnabled || !audioCtx) return;
            playThemeNote();
        var duration = 2;
             document.getElementById('startScreen').classList.add('hidden');
        var bufferSize = audioCtx.sampleRate * duration;
             loadQuestion();
        var buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
        var data = buffer.getChannelData(0);
        for (var i = 0; i < bufferSize; i++) {
             var envelope = Math.sin((i / bufferSize) * Math.PI);
             data[i] = (Math.random() * 2 - 1) * envelope * 0.3;
         }
         }
        var source = audioCtx.createBufferSource();
        var gain = audioCtx.createGain();
        var filter = audioCtx.createBiquadFilter();
        source.buffer = buffer;
        filter.type = 'bandpass'; filter.frequency.value = 2000; filter.Q.value = 0.5;
        source.connect(filter); filter.connect(gain); gain.connect(audioCtx.destination);
        gain.gain.setValueAtTime(0.5, audioCtx.currentTime);
        source.start();
    }


        function loadQuestion() {
    function showSteve(text, mood) {
            const q = questions[currentQuestion];
        var avatar = document.getElementById('ffSteve');
            document.getElementById('category').textContent = q.category;
        avatar.classList.remove('ff-happy', 'ff-shocked');
            document.getElementById('questionText').textContent = q.question;
        if (mood) avatar.classList.add('ff-' + mood);
            document.getElementById('round').textContent = currentQuestion + 1;
        document.getElementById('ffDialogue').textContent = text;
            document.getElementById('progressFill').style.width = ((currentQuestion / questions.length) * 100) + '%';
        setTimeout(function() { avatar.classList.remove('ff-happy', 'ff-shocked'); }, 600);
    }


            strikes = 0;
    function loadQuestion() {
            revealedAnswers = [];
        var q = questions[currentQ];
            for (let i = 1; i <= 3; i++) document.getElementById(`strike${i}`).classList.remove('active');
        document.getElementById('ffCategory').textContent = q.category;
        document.getElementById('ffQuestion').textContent = q.question;
        document.getElementById('ffRound').textContent = currentQ + 1;
        document.getElementById('ffProgress').style.width = ((currentQ / questions.length) * 100) + '%';
        strikes = 0; revealed = [];
        for (var i = 1; i <= 3; i++) document.getElementById('ffStrike' + i).classList.remove('ff-active');
        var grid = document.getElementById('ffAnswers');
        grid.innerHTML = '';
        q.answers.forEach(function(a, i) {
            var slot = document.createElement('div');
            slot.className = 'ff-answer';
            slot.id = 'ffAnswer' + i;
            slot.innerHTML = '<div class="ff-answer-num">' + (i + 1) + '</div><div class="ff-answer-text">?????</div><div class="ff-answer-pts">??</div>';
            grid.appendChild(slot);
        });
        showSteve(intros[Math.floor(Math.random() * intros.length)]);
        document.getElementById('ffInput').value = '';
        document.getElementById('ffInput').focus();
    }


            const grid = document.getElementById('answersGrid');
    function revealAnswer(index) {
            grid.innerHTML = '';
        if (revealed.indexOf(index) !== -1) return;
            q.answers.forEach((a, i) => {
        playDing();
                const slot = document.createElement('div');
        var overlay = document.getElementById('ffDingOverlay');
                slot.className = 'answer-slot';
        overlay.classList.add('ff-show');
                slot.id = `answer-${i}`;
        setTimeout(function() { overlay.classList.remove('ff-show'); }, 700);
                slot.innerHTML = `<div class="answer-number">${i + 1}</div><div class="answer-text">?????</div><div class="answer-points">??</div>`;
        var q = questions[currentQ];
                grid.appendChild(slot);
        var a = q.answers[index];
            });
        var slot = document.getElementById('ffAnswer' + index);
        slot.classList.add('ff-revealed');
        slot.innerHTML = '<div class="ff-answer-num">' + (index + 1) + '</div><div class="ff-answer-text">' + a.text + '</div><div class="ff-answer-pts">' + a.points + '</div>';
        revealed.push(index);
        score += a.points;
        document.getElementById('ffScore').textContent = score;
        showSteve(correct[Math.floor(Math.random() * correct.length)], 'happy');
    }


            showSteve(steveIntros[Math.floor(Math.random() * steveIntros.length)]);
    function addStrike() {
            document.getElementById('guessInput').value = '';
        strikes++;
            document.getElementById('guessInput').focus();
        document.getElementById('ffStrike' + strikes).classList.add('ff-active');
         }
        playBuzzer();
        var overlay = document.getElementById('ffXOverlay');
        overlay.classList.add('ff-show');
        setTimeout(function() { overlay.classList.remove('ff-show'); }, 1000);
        showSteve(wrong[Math.floor(Math.random() * wrong.length)], 'shocked');
         if (strikes >= 3) setTimeout(function() { FFGame.revealAll(); }, 1200);
    }


        function showSteve(text, mood = '') {
    function createConfetti() {
             const avatar = document.getElementById('steveAvatar');
        var colors = ['#ffd700', '#ff8c00', '#00d4ff', '#ff4500', '#9c27b0', '#4caf50'];
             avatar.classList.remove('happy', 'shocked');
        var container = document.querySelector('.family-feud-nursing-game');
             if (mood) avatar.classList.add(mood);
        for (var i = 0; i < 60; i++) {
             document.getElementById('steveDialogue').textContent = text;
             var c = document.createElement('div');
             setTimeout(() => avatar.classList.remove('happy', 'shocked'), 600);
             c.className = 'ff-confetti';
            c.style.left = Math.random() * 100 + '%';
             c.style.background = colors[Math.floor(Math.random() * colors.length)];
            c.style.animationDelay = Math.random() * 2 + 's';
             container.appendChild(c);
             setTimeout(function(el) { el.remove(); }, 4000, c);
         }
         }
    }


         function submitGuess() {
    window.FFGame = {
             const input = document.getElementById('guessInput');
        start: function() {
             const guess = input.value.trim().toLowerCase();
            initAudio();
             if (!guess) return;
            playReveal();
 
            document.getElementById('ffStart').classList.add('ff-hidden');
             const q = questions[currentQuestion];
            document.getElementById('ffGameContent').classList.add('ff-visible');
             let found = false;
            loadQuestion();
 
         },
             q.answers.forEach((a, i) => {
        submit: function() {
                 if (!revealedAnswers.includes(i) && a.keywords.some(k => guess.includes(k) || k.includes(guess))) {
             var input = document.getElementById('ffInput');
                     revealAnswer(i);
             var guess = input.value.trim().toLowerCase();
                     found = true;
             if (!guess || guess.length < 3) return; // Minimum 3 characters
             var q = questions[currentQ];
             var found = false;
            var foundIndex = -1;
           
            // Find the best match (prioritize exact matches and longer keywords)
             q.answers.forEach(function(a, i) {
                 if (revealed.indexOf(i) === -1 && !found) {
                    var match = a.keywords.some(function(k) {
                        // Require keyword to be at least 3 chars
                        if (k.length < 3) return false;
                       
                        // Check for word-based matching
                        var guessWords = guess.split(/\s+/);
                        var keyWords = k.split(/\s+/);
                       
                        // Exact match of full keyword
                        if (guess === k) return true;
                       
                        // Guess contains the full keyword (for multi-word keywords)
                        if (k.length >= 4 && guess.indexOf(k) !== -1) return true;
                       
                        // Keyword starts with guess (at least 4 chars)
                        if (guess.length >= 4 && k.indexOf(guess) === 0) return true;
                       
                        // Any word in guess matches start of keyword (at least 4 chars)
                        for (var w = 0; w < guessWords.length; w++) {
                            if (guessWords[w].length >= 4) {
                                if (k.indexOf(guessWords[w]) === 0) return true;
                                for (var kw = 0; kw < keyWords.length; kw++) {
                                    if (keyWords[kw].length >= 4 && keyWords[kw].indexOf(guessWords[w]) === 0) return true;
                                    if (guessWords[w].indexOf(keyWords[kw]) === 0 && keyWords[kw].length >= 4) return true;
                                }
                            }
                        }
                       
                        return false;
                     });
                     if (match) {
                        found = true;
                        foundIndex = i;
                    }
                 }
                 }
             });
             });
 
           
             if (!found) addStrike();
             if (found && foundIndex >= 0) {
                revealAnswer(foundIndex);
            } else {
                addStrike();
            }
             input.value = '';
             input.value = '';
             input.focus();
             input.focus();
         }
         },
 
         revealAll: function() {
        function revealAnswer(index) {
             var q = questions[currentQ];
            if (revealedAnswers.includes(index)) return;
             q.answers.forEach(function(a, i) {
 
                 if (revealed.indexOf(i) === -1) {
            playDing();
                     var slot = document.getElementById('ffAnswer' + i);
            const overlay = document.getElementById('dingOverlay');
                     slot.classList.add('ff-revealed');
            overlay.classList.add('show');
                     slot.innerHTML = '<div class="ff-answer-num">' + (i + 1) + '</div><div class="ff-answer-text">' + a.text + '</div><div class="ff-answer-pts">' + a.points + '</div>';
            setTimeout(() => overlay.classList.remove('show'), 700);
                     revealed.push(i);
 
            const q = questions[currentQuestion];
            const a = q.answers[index];
            const slot = document.getElementById(`answer-${index}`);
            slot.classList.add('revealed');
            slot.innerHTML = `<div class="answer-number">${index + 1}</div><div class="answer-text">${a.text}</div><div class="answer-points">${a.points}</div>`;
 
            revealedAnswers.push(index);
            score += a.points;
            document.getElementById('score').textContent = score;
            showSteve(steveCorrect[Math.floor(Math.random() * steveCorrect.length)], 'happy');
         }
 
        function addStrike() {
            strikes++;
            document.getElementById(`strike${strikes}`).classList.add('active');
 
            playBuzzer();
            const overlay = document.getElementById('bigXOverlay');
            overlay.classList.add('show');
            setTimeout(() => overlay.classList.remove('show'), 1000);
 
            showSteve(steveWrong[Math.floor(Math.random() * steveWrong.length)], 'shocked');
            if (strikes >= 3) setTimeout(revealAll, 1200);
        }
 
        function revealAll() {
             const q = questions[currentQuestion];
             q.answers.forEach((a, i) => {
                 if (!revealedAnswers.includes(i)) {
                     const slot = document.getElementById(`answer-${i}`);
                     slot.classList.add('revealed');
                     slot.innerHTML = `<div class="answer-number">${i + 1}</div><div class="answer-text">${a.text}</div><div class="answer-points">${a.points}</div>`;
                     revealedAnswers.push(i);
                 }
                 }
             });
             });
             playReveal();
             playReveal();
             showSteve("There's all the answers! Study these! 📚");
             showSteve("There's all the answers! Study these! 📚");
        },
        next: function() {
            currentQ++;
            if (currentQ >= questions.length) {
                playApplause();
                document.getElementById('ffGameContent').classList.remove('ff-visible');
                document.getElementById('ffGameOver').classList.add('ff-show');
                document.getElementById('ffFinalScore').textContent = score;
                var msg = score >= 800 ? "🌟 INCREDIBLE! You're NCLEX ready! 🌟" : score >= 500 ? "👏 Great job! Keep studying!" : "📚 Good effort! Review and try again!";
                document.getElementById('ffFinalMsg').textContent = msg;
                if (score >= 400) createConfetti();
            } else { loadQuestion(); }
        },
        restart: function() {
            currentQ = 0; score = 0;
            document.getElementById('ffScore').textContent = '0';
            document.getElementById('ffGameOver').classList.remove('ff-show');
            document.getElementById('ffGameContent').classList.remove('ff-visible');
            document.getElementById('ffStart').classList.remove('ff-hidden');
        },
        toggleSound: function() {
            soundEnabled = !soundEnabled;
            document.getElementById('ffSoundBtn').innerHTML = soundEnabled ? '🔊 SOUND ON' : '🔇 SOUND OFF';
            if (soundEnabled) initAudio();
         }
         }
    };


        function nextQuestion() {
    document.getElementById('ffInput').addEventListener('keypress', function(e) { if (e.key === 'Enter') FFGame.submit(); });
            currentQuestion++;
})();
            if (currentQuestion >= questions.length) endGame();
</script>
            else loadQuestion();
</html></includeonly>
        }
 
        function endGame() {
            playApplause();
            document.getElementById('gameOver').classList.add('show');
            document.getElementById('finalScore').textContent = score;
            const msg = score >= 800 ? "🌟 INCREDIBLE! You're NCLEX ready! 🌟" :
                        score >= 500 ? "👏 Great job! Keep studying!" : "📚 Good effort! Review and try again!";
            document.getElementById('finalMessage').textContent = msg;
            if (score >= 400) createConfetti();
        }
 
        function restartGame() {
            currentQuestion = 0;
            score = 0;
            document.getElementById('score').textContent = '0';
            document.getElementById('gameOver').classList.remove('show');
            document.getElementById('startScreen').classList.remove('hidden');
        }
 
        function createConfetti() {
            const colors = ['#ffd700', '#ff8c00', '#00d4ff', '#ff4500', '#9c27b0', '#4caf50'];
            for (let i = 0; i < 80; i++) {
                const c = document.createElement('div');
                c.className = 'confetti';
                c.style.left = Math.random() * 100 + 'vw';
                c.style.background = colors[Math.floor(Math.random() * colors.length)];
                c.style.animationDelay = Math.random() * 2 + 's';
                document.body.appendChild(c);
                setTimeout(() => c.remove(), 4000);
            }
        }
 
        document.getElementById('guessInput').addEventListener('keypress', e => { if (e.key === 'Enter') submitGuess(); });
    </script>
</body>
</html>

Latest revision as of 01:24, 11 January 2026

This widget displays the Family Feud Nursing Edition study game.

Usage

{{#widget:FamilyFeudNursing}}
Retrieved from "https://wiki.docmoates.com/index.php?title=Widget:520FamilyFeud&oldid=6665"