Widget:520FamilyFeud: Difference between revisions

From Doc-Wiki
Jump to navigation Jump to search
Newer edit →
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
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:520FamilyFeud}}</pre>
    <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">
== Parameters ==
    <style>
This widget does not accept any parameters.
        * { margin: 0; padding: 0; box-sizing: border-box; }
 
        body {
== Description ==
            font-family: 'Oswald', sans-serif;
An interactive Family Feud-style game for nursing students to study topics including:
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
* Cardiovascular Pharmacology
            min-height: 100vh;
* Pain Management
            color: white;
* Geriatric Nursing
        }
* Patient Teaching
        .game-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
* Heart Failure
       
* Medication Rights
        .title-banner { text-align: center; margin-bottom: 20px; }
* Asthma Medications
        .title-banner h1 {
* Liver Failure
            font-family: 'Bebas Neue', sans-serif;
* Hearing Loss Care
            font-size: 4rem;
* Infection Control
            background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
</noinclude><includeonly><html>
            -webkit-background-clip: text;
<div class="family-feud-nursing-game">
            -webkit-text-fill-color: transparent;
<style>
            letter-spacing: 8px;
.family-feud-nursing-game * { margin: 0; padding: 0; box-sizing: border-box; }
        }
.family-feud-nursing-game {
        .subtitle { font-size: 1.5rem; color: #00d4ff; letter-spacing: 6px; }
    font-family: 'Oswald', sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    color: white;
    padding: 20px;
}
.family-feud-nursing-game .ff-container { max-width: 1200px; margin: 0 auto; }
 
.family-feud-nursing-game .ff-title { text-align: center; margin-bottom: 20px; }
.family-feud-nursing-game .ff-title h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 8px;
}
.family-feud-nursing-game .ff-subtitle { font-size: 1.3rem; color: #00d4ff; letter-spacing: 6px; }
 
.family-feud-nursing-game .ff-steve {
    display: flex; align-items: center; gap: 20px;
    background: linear-gradient(145deg, #2d2d44, #1a1a2e);
    border-radius: 20px; padding: 20px; margin-bottom: 20px;
    border: 3px solid #ffd700;
}
.family-feud-nursing-game .ff-steve-avatar {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 2.5rem; border: 4px solid #fff;
}
.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; }
.family-feud-nursing-game .ff-steve-dialogue { font-size: 1.3rem; line-height: 1.4; margin-top: 5px; }


        .steve-section {
.family-feud-nursing-game .ff-scores { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; }
            display: flex; align-items: center; gap: 20px;
.family-feud-nursing-game .ff-score-box {
            background: linear-gradient(145deg, #2d2d44, #1a1a2e);
    background: linear-gradient(145deg, #0f3460, #16213e);
            border-radius: 20px; padding: 25px; margin-bottom: 20px;
    padding: 12px 35px; border-radius: 15px; border: 3px solid #00d4ff; text-align: center;
            border: 3px solid #ffd700;
}
        }
.family-feud-nursing-game .ff-score-label { font-size: 0.85rem; color: #00d4ff; text-transform: uppercase; letter-spacing: 2px; }
        .steve-avatar {
.family-feud-nursing-game .ff-score-value { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: #ffd700; }
            width: 100px; height: 100px;
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            border-radius: 50%; display: flex; align-items: center;
            justify-content: center; font-size: 3rem; border: 4px solid #fff;
        }
        .steve-avatar.happy { animation: steveHappy 0.5s ease-out; }
        .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-strikes { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
        .score-item {
.family-feud-nursing-game .ff-strike {
            background: linear-gradient(145deg, #0f3460, #16213e);
    width: 80px; height: 80px; background: #1a1a2e; border: 4px solid #333;
            padding: 15px 40px; border-radius: 15px; border: 3px solid #00d4ff; text-align: center;
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
        }
    font-size: 3rem; color: transparent;
        .score-label { font-size: 0.9rem; color: #00d4ff; text-transform: uppercase; letter-spacing: 2px; }
}
        .score-value { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: #ffd700; }
.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.5); } 100% { transform: scale(1); } }


        .strikes-container { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; }
.family-feud-nursing-game .ff-x-overlay, .family-feud-nursing-game .ff-ding-overlay {
        .strike {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            width: 90px; height: 90px; background: #1a1a2e; border: 5px solid #333;
    display: none; align-items: center; justify-content: center; z-index: 9999;
            border-radius: 15px; display: flex; align-items: center; justify-content: center;
}
            font-size: 3.5rem; color: transparent;
.family-feud-nursing-game .ff-x-overlay { background: rgba(139, 0, 0, 0.9); }
        }
.family-feud-nursing-game .ff-x-overlay.ff-show, .family-feud-nursing-game .ff-ding-overlay.ff-show { display: flex; animation: ffOverlayFade 1s forwards; }
        .strike.active {
.family-feud-nursing-game .ff-ding-overlay { background: rgba(0, 100, 0, 0.8); }
            background: linear-gradient(135deg, #ff0000, #8b0000);
.family-feud-nursing-game .ff-ding-overlay.ff-show { animation: ffOverlayFade 0.7s forwards; }
            border-color: #ff4444; color: #fff;
@keyframes ffOverlayFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
            animation: strikeFlash 0.3s ease-out;
.family-feud-nursing-game .ff-big-x { font-size: 50vw; color: #fff; font-family: 'Bebas Neue', sans-serif; animation: ffPopIn 0.2s ease-out; }
        }
.family-feud-nursing-game .ff-ding-text { font-size: 30vw; color: #90EE90; font-family: 'Bebas Neue', sans-serif; animation: ffPopIn 0.2s ease-out; }
        @keyframes strikeFlash { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes ffPopIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }


        .big-x-overlay, .ding-overlay {
.family-feud-nursing-game .ff-board {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, #1a237e, #0d47a1);
            display: none; align-items: center; justify-content: center; z-index: 500;
    border-radius: 20px; padding: 25px; margin-bottom: 20px;
        }
    border: 5px solid #ffd700;
        .big-x-overlay { background: rgba(139, 0, 0, 0.9); }
}
        .big-x-overlay.show, .ding-overlay.show { display: flex; animation: overlayFade 1s forwards; }
.family-feud-nursing-game .ff-question {
        .ding-overlay { background: rgba(0, 100, 0, 0.8); }
    text-align: center; margin-bottom: 20px; padding: 15px;
        .ding-overlay.show { animation: overlayFade 0.7s forwards; }
    background: rgba(0,0,0,0.4); border-radius: 12px; border: 2px solid #ffd700;
        @keyframes overlayFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
}
        .big-x { font-size: 50vw; color: #fff; font-family: 'Bebas Neue', sans-serif; animation: popIn 0.2s ease-out; }
.family-feud-nursing-game .ff-category { font-size: 0.9rem; color: #00d4ff; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 8px; }
        .ding-text { font-size: 30vw; color: #90EE90; font-family: 'Bebas Neue', sans-serif; animation: popIn 0.2s ease-out; }
.family-feud-nursing-game .ff-question-text { font-size: 1.4rem; line-height: 1.4; }
        @keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }


        .answer-board {
.family-feud-nursing-game .ff-answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
            background: linear-gradient(180deg, #1a237e, #0d47a1);
.family-feud-nursing-game .ff-answer {
            border-radius: 20px; padding: 30px; margin-bottom: 20px;
    background: linear-gradient(145deg, #0d47a1, #1565c0);
            border: 5px solid #ffd700;
    border: 3px solid #2196f3; border-radius: 10px; padding: 12px 15px;
        }
    display: flex; justify-content: space-between; align-items: center; min-height: 55px;
        .question-display {
}
            text-align: center; margin-bottom: 25px; padding: 20px;
.family-feud-nursing-game .ff-answer.ff-revealed {
            background: rgba(0,0,0,0.4); border-radius: 15px; border: 2px solid #ffd700;
    background: linear-gradient(145deg, #ffd700, #ff8c00);
        }
    border-color: #fff; animation: ffReveal 0.5s ease-out;
        .question-category { font-size: 1rem; color: #00d4ff; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px; }
}
        .question-text { font-size: 1.5rem; line-height: 1.4; }
@keyframes ffReveal { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.family-feud-nursing-game .ff-answer-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: #ffd700; width: 35px; 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: 1rem; 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.6rem; color: #00d4ff; width: 45px; text-align: center; }
.family-feud-nursing-game .ff-answer.ff-revealed .ff-answer-pts { color: #1a1a2e; }


        .answers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.family-feud-nursing-game .ff-input-area { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
        .answer-slot {
.family-feud-nursing-game .ff-input {
            background: linear-gradient(145deg, #0d47a1, #1565c0);
    flex: 1; max-width: 450px; padding: 12px 20px; font-size: 1.2rem;
            border: 3px solid #2196f3; border-radius: 10px; padding: 15px 20px;
    font-family: 'Oswald', sans-serif; border: 3px solid #00d4ff; border-radius: 50px;
            display: flex; justify-content: space-between; align-items: center; min-height: 60px;
    background: rgba(255,255,255,0.1); color: #fff; text-align: center;
        }
    text-transform: uppercase; letter-spacing: 2px; outline: none;
        .answer-slot.revealed {
}
            background: linear-gradient(145deg, #ffd700, #ff8c00);
.family-feud-nursing-game .ff-input:focus { border-color: #ffd700; box-shadow: 0 0 20px rgba(255,215,0,0.4); }
            border-color: #fff; animation: revealFlip 0.5s ease-out;
.family-feud-nursing-game .ff-input::placeholder { color: rgba(255,255,255,0.5); }
        }
.family-feud-nursing-game .ff-submit {
        @keyframes revealFlip { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
    padding: 12px 35px; font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem;
        .answer-number { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #ffd700; width: 40px; text-align: center; }
    background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
        .answer-slot.revealed .answer-number { color: #1a1a2e; }
    border-radius: 50px; color: #1a1a2e; cursor: pointer; letter-spacing: 2px;
        .answer-text { flex: 1; font-size: 1.1rem; text-align: center; text-transform: uppercase; letter-spacing: 1px; }
}
        .answer-slot.revealed .answer-text { color: #1a1a2e; font-weight: 700; }
.family-feud-nursing-game .ff-submit:hover { transform: scale(1.05); }
        .answer-points { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: #00d4ff; width: 50px; text-align: center; }
        .answer-slot.revealed .answer-points { color: #1a1a2e; }


        .input-section { display: flex; gap: 15px; justify-content: center; margin-bottom: 20px; }
.family-feud-nursing-game .ff-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
        .guess-input {
.family-feud-nursing-game .ff-btn {
            flex: 1; max-width: 500px; padding: 15px 25px; font-size: 1.3rem;
    padding: 10px 22px; font-family: 'Oswald', sans-serif; font-size: 0.95rem;
            font-family: 'Oswald', sans-serif; border: 3px solid #00d4ff; border-radius: 50px;
    border: 2px solid; border-radius: 10px; cursor: pointer; text-transform: uppercase;
            background: rgba(255,255,255,0.1); color: #fff; text-align: center;
}
            text-transform: uppercase; letter-spacing: 2px; outline: none;
.family-feud-nursing-game .ff-btn-next { background: linear-gradient(145deg, #00d4ff, #0099cc); border-color: #00d4ff; color: #1a1a2e; }
        }
.family-feud-nursing-game .ff-btn-reveal { background: linear-gradient(145deg, #9c27b0, #7b1fa2); border-color: #9c27b0; color: #fff; }
        .guess-input:focus { border-color: #ffd700; box-shadow: 0 0 20px rgba(255,215,0,0.4); }
.family-feud-nursing-game .ff-btn-sound { background: linear-gradient(145deg, #4caf50, #388e3c); border-color: #4caf50; color: #fff; }
        .guess-input::placeholder { color: rgba(255,255,255,0.5); }
.family-feud-nursing-game .ff-btn-restart { background: linear-gradient(145deg, #ff5722, #e64a19); border-color: #ff5722; color: #fff; }
        .submit-btn {
.family-feud-nursing-game .ff-btn:hover { transform: translateY(-2px); }
            padding: 15px 40px; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem;
            background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
            border-radius: 50px; color: #1a1a2e; cursor: pointer; letter-spacing: 2px;
        }
        .submit-btn:hover { transform: scale(1.05); }


        .control-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.family-feud-nursing-game .ff-start, .family-feud-nursing-game .ff-gameover {
        .control-btn {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            padding: 12px 25px; font-family: 'Oswald', sans-serif; font-size: 1rem;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
            border: 2px solid; border-radius: 10px; cursor: pointer; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9998;
        }
}
        .control-btn.next { background: linear-gradient(145deg, #00d4ff, #0099cc); border-color: #00d4ff; color: #1a1a2e; }
.family-feud-nursing-game .ff-start.ff-hidden, .family-feud-nursing-game .ff-gameover:not(.ff-show) { display: none; }
        .control-btn.reveal { background: linear-gradient(145deg, #9c27b0, #7b1fa2); border-color: #9c27b0; color: #fff; }
.family-feud-nursing-game .ff-start-title {
        .control-btn.sound { background: linear-gradient(145deg, #4caf50, #388e3c); border-color: #4caf50; color: #fff; }
    font-family: 'Bebas Neue', sans-serif; font-size: 4.5rem;
        .control-btn.restart { background: linear-gradient(145deg, #ff5722, #e64a19); border-color: #ff5722; color: #fff; }
    background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
        .control-btn:hover { transform: translateY(-2px); }
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: 10px; animation: ffPulse 2s infinite;
}
@keyframes ffPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.family-feud-nursing-game .ff-start-sub { font-size: 1.8rem; color: #00d4ff; margin-bottom: 25px; letter-spacing: 5px; }
.family-feud-nursing-game .ff-start-emoji { font-size: 7rem; margin-bottom: 25px; animation: ffWave 1s infinite; }
@keyframes ffWave { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.family-feud-nursing-game .ff-play-btn {
    padding: 18px 70px; font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem;
    background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
    border-radius: 60px; color: #1a1a2e; cursor: pointer; letter-spacing: 5px;
}
.family-feud-nursing-game .ff-play-btn:hover { transform: scale(1.1); }
.family-feud-nursing-game .ff-start-info { margin-top: 25px; text-align: center; color: rgba(255,255,255,0.7); max-width: 480px; line-height: 1.7; }


        .start-screen, .game-over {
.family-feud-nursing-game .ff-final-score { font-family: 'Bebas Neue', sans-serif; font-size: 7rem; color: #ffd700; }
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
.family-feud-nursing-game .ff-final-msg { font-size: 1.6rem; color: #00d4ff; margin-bottom: 25px; text-align: center; }
            background: linear-gradient(135deg, #1a1a2e, #0f3460);
            display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000;
        }
        .start-screen.hidden, .game-over:not(.show) { display: none; }
        .start-title {
            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-confetti {
        .final-message { font-size: 1.8rem; color: #00d4ff; margin-bottom: 30px; text-align: center; }
    position: fixed; width: 10px; height: 10px; z-index: 9997;
    animation: ffFall 3s linear forwards;
}
@keyframes ffFall {
    0% { transform: translateY(-100vh) rotate(0); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}


        .confetti {
.family-feud-nursing-game .ff-progress { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-bottom: 15px; }
            position: fixed; width: 10px; height: 10px; z-index: 999;
.family-feud-nursing-game .ff-progress-fill { height: 100%; background: linear-gradient(90deg, #00d4ff, #ffd700); border-radius: 4px; transition: width 0.5s; }
            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: 2.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.8rem; }
}
</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">
<div class="ff-x-overlay" id="ffXOverlay"><div class="ff-big-x">✖</div></div>
        <div class="start-title">FAMILY FEUD</div>
<div class="ff-ding-overlay" id="ffDingOverlay"><div class="ff-ding-text">✓</div></div>
        <div class="start-subtitle">✨ NURSING EDITION ✨</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">
<div class="ff-start" id="ffStart">
        <div class="start-steve">🏆</div>
    <div class="ff-start-title">FAMILY FEUD</div>
        <div class="final-score" id="finalScore">0</div>
    <div class="ff-start-sub">✨ NURSING EDITION ✨</div>
        <div class="final-message" id="finalMessage"></div>
    <div class="ff-start-emoji">🎤</div>
        <button class="start-btn" onclick="restartGame()">PLAY AGAIN!</button>
    <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">
<div class="ff-gameover" id="ffGameOver">
        <div class="title-banner">
    <div class="ff-start-emoji">🏆</div>
            <h1>FAMILY FEUD</h1>
    <div class="ff-final-score" id="ffFinalScore">0</div>
            <div class="subtitle">Nursing Edition</div>
    <div class="ff-final-msg" id="ffFinalMsg"></div>
        </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>
<div class="ff-container">
    <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>
        }
</div>


        // Generate actual game show sounds
<script>
        function playDing() {
(function() {
            if (!soundEnabled || !audioCtx) return;
    var audioCtx = null;
           
    var soundEnabled = true;
            // Create a nice bell/ding sound
    var currentQ = 0;
            const duration = 0.6;
    var score = 0;
            const frequencies = [880, 1108.73, 1318.51]; // A5, C#6, E6 - A major chord
    var strikes = 0;
           
    var revealed = [];
            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() {
    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!",
            // Create a harsh buzzer sound
        "Oh LAWD! This question is gonna test you!",
            const duration = 0.8;
        "Top answers on the board! Show me what you got!",
            const osc1 = audioCtx.createOscillator();
        "You better KNOW THIS for your NCLEX!",
            const osc2 = audioCtx.createOscillator();
        "Survey says... name something a good nurse knows!"
            const gain = audioCtx.createGain();
    ];
            const distortion = audioCtx.createWaveShaper();
    var correct = [
           
        "GOOD ANSWER! GOOD ANSWER! 👏",
            // Create distortion curve
        "OH! Look at that! You know your stuff!",
            const curve = new Float32Array(256);
        "YES! That's what I'm talking about!",
            for (let i = 0; i < 256; i++) {
        "DING DING DING! You got it!",
                const x = (i - 128) / 128;
        "BOOM! That's nursing knowledge!",
                curve[i] = Math.tanh(x * 3);
        "NICE ONE! Keep it going!"
            }
    ];
            distortion.curve = curve;
    var wrong = [
           
        "Ehhhh... That ain't up there! ❌",
            osc1.connect(distortion);
        "Really? ...STRIKE!",
            osc2.connect(distortion);
        "Ohhh no no no... STRIKE!",
            distortion.connect(gain);
        "What?! ...STRIKE!",
            gain.connect(audioCtx.destination);
        "That's a strike! Come on now!",
           
        "Survey says... WRONG! ❌"
            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 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: ["brady", "slow heart", "heart rate", "pulse"] },
             // Ascending arpeggio
            { text: "Hypotension", points: 25, keywords: ["hypo", "low blood", "pressure", "bp"] },
             const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
            { text: "Fatigue", points: 15, keywords: ["tired", "fatigue", "weak", "energy"] },
             notes.forEach((freq, i) => {
             { text: "Bronchospasm", points: 12, keywords: ["bronch", "wheez", "breathing", "lung"] },
                const osc = audioCtx.createOscillator();
             { text: "Depression", points: 8, keywords: ["depress", "mood", "sad"] },
                const gain = audioCtx.createGain();
             { text: "Cold Extremities", points: 5, keywords: ["cold", "extrem", "hands", "feet"] }
                osc.connect(gain);
        ]},
                gain.connect(audioCtx.destination);
        { category: "PAIN MANAGEMENT", question: "Name a NON-drug intervention for pain.", answers: [
                osc.type = 'sine';
            { text: "Heat/Cold Therapy", points: 30, keywords: ["heat", "cold", "ice", "warm", "compress"] },
                osc.frequency.value = freq;
            { text: "Massage", points: 22, keywords: ["massage", "rub", "touch"] },
                gain.gain.setValueAtTime(0.2, audioCtx.currentTime + i * 0.1);
            { text: "Distraction", points: 18, keywords: ["distract", "music", "tv", "talk"] },
                gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + i * 0.1 + 0.3);
            { text: "Positioning", points: 12, keywords: ["position", "elevat", "pillow", "move"] },
                osc.start(audioCtx.currentTime + i * 0.1);
            { text: "Deep Breathing", points: 10, keywords: ["breath", "relax", "deep"] },
                osc.stop(audioCtx.currentTime + i * 0.1 + 0.3);
             { 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 playApplause() {
    function initAudio() {
            if (!soundEnabled || !audioCtx) return;
        if (!audioCtx) { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); }
           
        if (audioCtx.state === 'suspended') { audioCtx.resume(); }
            // Simulate applause with noise bursts
    }
            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() {
    function playDing() {
            if (!soundEnabled || !audioCtx) return;
        if (!soundEnabled || !audioCtx) return;
           
        var freqs = [880, 1108.73, 1318.51];
            // Play a quick theme jingle
        freqs.forEach(function(freq, i) {
            const melody = [
            var osc = audioCtx.createOscillator();
                { freq: 392, time: 0 },      // G
            var gain = audioCtx.createGain();
                { freq: 440, time: 0.15 },  // A
            osc.connect(gain); gain.connect(audioCtx.destination);
                { freq: 494, time: 0.3 },    // B
            osc.type = 'sine'; osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
                { freq: 523, time: 0.45 },  // C
            gain.gain.setValueAtTime(0, audioCtx.currentTime);
                { freq: 587, time: 0.6 },    // D
            gain.gain.linearRampToValueAtTime(0.3, audioCtx.currentTime + 0.01);
                { freq: 523, time: 0.75 },  // C
            gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.6);
            ];
            osc.start(audioCtx.currentTime + i * 0.05);
           
            osc.stop(audioCtx.currentTime + 0.6);
            melody.forEach(note => {
        });
                const osc = audioCtx.createOscillator();
    }
                const gain = audioCtx.createGain();
                osc.connect(gain);
                gain.connect(audioCtx.destination);
                osc.type = 'triangle';
                osc.frequency.value = note.freq;
                gain.gain.setValueAtTime(0.15, audioCtx.currentTime + note.time);
                gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + note.time + 0.2);
                osc.start(audioCtx.currentTime + note.time);
                osc.stop(audioCtx.currentTime + note.time + 0.2);
            });
        }


        function toggleSound() {
    function playBuzzer() {
            soundEnabled = !soundEnabled;
        if (!soundEnabled || !audioCtx) return;
            document.getElementById('soundBtn').innerHTML = soundEnabled ? '🔊 SOUND ON' : '🔇 SOUND OFF';
        var osc1 = audioCtx.createOscillator();
            if (soundEnabled) initAudio();
        var osc2 = audioCtx.createOscillator();
         }
        var gain = audioCtx.createGain();
        osc1.connect(gain); osc2.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.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.8);
        osc1.start(audioCtx.currentTime); osc2.start(audioCtx.currentTime);
         osc1.stop(audioCtx.currentTime + 0.8); osc2.stop(audioCtx.currentTime + 0.8);
    }


         // Game State
    function playReveal() {
         let currentQuestion = 0;
         if (!soundEnabled || !audioCtx) return;
         let score = 0;
         var notes = [523.25, 659.25, 783.99, 1046.50];
        let strikes = 0;
         notes.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.value = freq;
            gain.gain.setValueAtTime(0.2, audioCtx.currentTime + i * 0.1);
            gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + i * 0.1 + 0.3);
            osc.start(audioCtx.currentTime + i * 0.1);
            osc.stop(audioCtx.currentTime + i * 0.1 + 0.3);
         });
    }


        // Steve's lines
    function playApplause() {
         const steveIntros = [
         if (!soundEnabled || !audioCtx) return;
            "Alright NURSING STUDENTS! Survey says... what's on the board?",
         var duration = 2;
            "This is a GOOD ONE! Think like a nurse!",
         var bufferSize = audioCtx.sampleRate * duration;
            "Oh LAWD! This question is gonna test you!",
         var buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
            "Top answers on the board! Show me what you got!",
         var data = buffer.getChannelData(0);
            "You better KNOW THIS for your NCLEX!",
         for (var i = 0; i < bufferSize; i++) {
            "Survey says... name something a good nurse knows!"
             var envelope = Math.sin((i / bufferSize) * Math.PI);
         ];
             data[i] = (Math.random() * 2 - 1) * envelope * 0.3;
         const steveCorrect = [
            "GOOD ANSWER! GOOD ANSWER! 👏",
            "OH! Look at that! You know your stuff!",
            "YES! That's what I'm talking about!",
            "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
        const questions = [
            {
                category: "CARDIOVASCULAR PHARMACOLOGY",
                question: "Name a common side effect of beta-blockers that nurses should monitor.",
                answers: [
                    { text: "Bradycardia", points: 35, keywords: ["brady", "slow heart", "heart rate", "pulse"] },
                    { text: "Hypotension", points: 25, keywords: ["hypo", "low blood", "pressure", "bp"] },
                    { text: "Fatigue", points: 15, keywords: ["tired", "fatigue", "weak", "energy"] },
                    { text: "Bronchospasm", points: 12, keywords: ["bronch", "wheez", "breathing", "lung"] },
                    { text: "Depression", points: 8, keywords: ["depress", "mood", "sad"] },
                    { text: "Cold Extremities", points: 5, keywords: ["cold", "extrem", "hands", "feet"] }
                ]
            },
            {
                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() {
             initAudio();
            playThemeNote();
             document.getElementById('startScreen').classList.add('hidden');
            loadQuestion();
         }
         }
        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');
        for (var i = 0; i < 80; i++) {
             if (mood) avatar.classList.add(mood);
             var c = document.createElement('div');
             document.getElementById('steveDialogue').textContent = text;
             c.className = 'ff-confetti';
             setTimeout(() => avatar.classList.remove('happy', 'shocked'), 600);
            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.querySelector('.family-feud-nursing-game').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();
            playReveal();
            document.getElementById('ffStart').classList.add('ff-hidden');
            loadQuestion();
        },
         submit: function() {
             var input = document.getElementById('ffInput');
             var guess = input.value.trim().toLowerCase();
             if (!guess) return;
             if (!guess) return;
 
             var q = questions[currentQ];
             const q = questions[currentQuestion];
             var found = false;
             let found = false;
             q.answers.forEach(function(a, i) {
 
                 if (revealed.indexOf(i) === -1) {
             q.answers.forEach((a, i) => {
                    var match = a.keywords.some(function(k) { return guess.indexOf(k) !== -1 || k.indexOf(guess) !== -1; });
                 if (!revealedAnswers.includes(i) && a.keywords.some(k => guess.includes(k) || k.includes(guess))) {
                    if (match) { revealAnswer(i); found = true; }
                    revealAnswer(i);
                    found = true;
                 }
                 }
             });
             });
             if (!found) addStrike();
             if (!found) 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('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('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>

Revision as of 01:11, 11 January 2026

This widget displays the Family Feud Nursing Edition study game.

Usage

{{#Widget:520FamilyFeud}}

Parameters

This widget does not accept any parameters.

Description

An interactive Family Feud-style game for nursing students to study topics including:

  • Cardiovascular Pharmacology
  • Pain Management
  • Geriatric Nursing
  • Patient Teaching
  • Heart Failure
  • Medication Rights
  • Asthma Medications
  • Liver Failure
  • Hearing Loss Care
  • Infection Control
Retrieved from "https://wiki.docmoates.com/index.php?title=Widget:520FamilyFeud&oldid=6655"