Widget:520FamilyFeud: Difference between revisions

From Doc-Wiki
Jump to navigation Jump to search
← Older 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
No edit summary
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 3: Line 3:


== Usage ==
== Usage ==
<pre>{{#Widget:520FamilyFeud}}</pre>
<pre>{{#widget:FamilyFeudNursing}}</pre>
 
== 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
</noinclude><includeonly><html>
</noinclude><includeonly><html>
<div class="family-feud-nursing-game">
<div class="family-feud-nursing-game">
Line 27: Line 11:
     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;
    height: 700px;
     color: white;
     color: white;
     padding: 20px;
     padding: 20px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}
}
.family-feud-nursing-game .ff-container { max-width: 1200px; margin: 0 auto; }
.family-feud-nursing-game .ff-container { max-width: 1000px; margin: 0 auto; height: 100%; }


.family-feud-nursing-game .ff-title { text-align: center; margin-bottom: 20px; }
.family-feud-nursing-game .ff-title { text-align: center; margin-bottom: 15px; }
.family-feud-nursing-game .ff-title h1 {
.family-feud-nursing-game .ff-title h1 {
     font-family: 'Bebas Neue', sans-serif;
     font-family: 'Bebas Neue', sans-serif;
     font-size: 3.5rem;
     font-size: 2.8rem;
     background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
     background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
     -webkit-background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     background-clip: text;
     letter-spacing: 8px;
     letter-spacing: 6px;
}
}
.family-feud-nursing-game .ff-subtitle { font-size: 1.3rem; color: #00d4ff; letter-spacing: 6px; }
.family-feud-nursing-game .ff-subtitle { font-size: 1.1rem; color: #00d4ff; letter-spacing: 4px; }


.family-feud-nursing-game .ff-steve {
.family-feud-nursing-game .ff-steve {
     display: flex; align-items: center; gap: 20px;
     display: flex; align-items: center; gap: 15px;
     background: linear-gradient(145deg, #2d2d44, #1a1a2e);
     background: linear-gradient(145deg, #2d2d44, #1a1a2e);
     border-radius: 20px; padding: 20px; margin-bottom: 20px;
     border-radius: 15px; padding: 15px; margin-bottom: 15px;
     border: 3px solid #ffd700;
     border: 2px solid #ffd700;
}
}
.family-feud-nursing-game .ff-steve-avatar {
.family-feud-nursing-game .ff-steve-avatar {
     width: 80px; height: 80px;
     width: 60px; height: 60px;
     background: linear-gradient(135deg, #ffd700, #ff8c00);
     background: linear-gradient(135deg, #ffd700, #ff8c00);
     border-radius: 50%; display: flex; align-items: center;
     border-radius: 50%; display: flex; align-items: center;
     justify-content: center; font-size: 2.5rem; border: 4px solid #fff;
     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-happy { animation: ffHappy 0.5s ease-out; }
Line 61: Line 50:
@keyframes ffHappy { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2) rotate(10deg); } }
@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); } }
@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-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.3rem; line-height: 1.4; margin-top: 5px; }
.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: 30px; margin-bottom: 20px; }
.family-feud-nursing-game .ff-scores { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; }
.family-feud-nursing-game .ff-score-box {
.family-feud-nursing-game .ff-score-box {
     background: linear-gradient(145deg, #0f3460, #16213e);
     background: linear-gradient(145deg, #0f3460, #16213e);
     padding: 12px 35px; border-radius: 15px; border: 3px solid #00d4ff; text-align: center;
     padding: 10px 30px; border-radius: 12px; border: 2px solid #00d4ff; text-align: center;
}
}
.family-feud-nursing-game .ff-score-label { font-size: 0.85rem; color: #00d4ff; text-transform: uppercase; letter-spacing: 2px; }
.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: 2.5rem; color: #ffd700; }
.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: 15px; margin-bottom: 20px; }
.family-feud-nursing-game .ff-strikes { display: flex; justify-content: center; gap: 12px; margin-bottom: 15px; }
.family-feud-nursing-game .ff-strike {
.family-feud-nursing-game .ff-strike {
     width: 80px; height: 80px; background: #1a1a2e; border: 4px solid #333;
     width: 60px; height: 60px; background: #1a1a2e; border: 3px solid #333;
     border-radius: 12px; display: flex; align-items: center; justify-content: center;
     border-radius: 10px; display: flex; align-items: center; justify-content: center;
     font-size: 3rem; color: transparent;
     font-size: 2.2rem; color: transparent;
}
}
.family-feud-nursing-game .ff-strike.ff-active {
.family-feud-nursing-game .ff-strike.ff-active {
Line 83: Line 72:
     animation: ffStrikeFlash 0.3s ease-out;
     animation: ffStrikeFlash 0.3s ease-out;
}
}
@keyframes ffStrikeFlash { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes ffStrikeFlash { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }


.family-feud-nursing-game .ff-x-overlay, .family-feud-nursing-game .ff-ding-overlay {
.family-feud-nursing-game .ff-x-overlay, .family-feud-nursing-game .ff-ding-overlay {
     position: fixed; top: 0; left: 0; width: 100%; height: 100%;
     position: absolute; top: 0; left: 0; width: 100%; height: 100%;
     display: none; align-items: center; justify-content: center; z-index: 9999;
     display: none; align-items: center; justify-content: center; z-index: 50;
    pointer-events: none; border-radius: 12px;
}
}
.family-feud-nursing-game .ff-x-overlay { background: rgba(139, 0, 0, 0.9); }
.family-feud-nursing-game .ff-x-overlay { background: rgba(139, 0, 0, 0.9); }
Line 94: Line 84:
.family-feud-nursing-game .ff-ding-overlay.ff-show { animation: ffOverlayFade 0.7s forwards; }
.family-feud-nursing-game .ff-ding-overlay.ff-show { animation: ffOverlayFade 0.7s forwards; }
@keyframes ffOverlayFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ffOverlayFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.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-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: 30vw; color: #90EE90; 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; }
@keyframes ffPopIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes ffPopIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }


.family-feud-nursing-game .ff-board {
.family-feud-nursing-game .ff-board {
     background: linear-gradient(180deg, #1a237e, #0d47a1);
     background: linear-gradient(180deg, #1a237e, #0d47a1);
     border-radius: 20px; padding: 25px; margin-bottom: 20px;
     border-radius: 15px; padding: 20px; margin-bottom: 15px;
     border: 5px solid #ffd700;
     border: 4px solid #ffd700;
}
}
.family-feud-nursing-game .ff-question {
.family-feud-nursing-game .ff-question {
     text-align: center; margin-bottom: 20px; padding: 15px;
     text-align: center; margin-bottom: 15px; padding: 12px;
     background: rgba(0,0,0,0.4); border-radius: 12px; border: 2px solid #ffd700;
     background: rgba(0,0,0,0.4); border-radius: 10px; border: 2px solid #ffd700;
}
}
.family-feud-nursing-game .ff-category { font-size: 0.9rem; color: #00d4ff; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 8px; }
.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.4rem; line-height: 1.4; }
.family-feud-nursing-game .ff-question-text { font-size: 1.2rem; line-height: 1.3; }


.family-feud-nursing-game .ff-answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.family-feud-nursing-game .ff-answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.family-feud-nursing-game .ff-answer {
.family-feud-nursing-game .ff-answer {
     background: linear-gradient(145deg, #0d47a1, #1565c0);
     background: linear-gradient(145deg, #0d47a1, #1565c0);
     border: 3px solid #2196f3; border-radius: 10px; padding: 12px 15px;
     border: 2px solid #2196f3; border-radius: 8px; padding: 10px 12px;
     display: flex; justify-content: space-between; align-items: center; min-height: 55px;
     display: flex; justify-content: space-between; align-items: center; min-height: 48px;
}
}
.family-feud-nursing-game .ff-answer.ff-revealed {
.family-feud-nursing-game .ff-answer.ff-revealed {
Line 121: Line 111:
}
}
@keyframes ffReveal { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@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-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.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-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.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-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; }
.family-feud-nursing-game .ff-answer.ff-revealed .ff-answer-pts { color: #1a1a2e; }


.family-feud-nursing-game .ff-input-area { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.family-feud-nursing-game .ff-input-area { display: flex; gap: 10px; justify-content: center; margin-bottom: 15px; }
.family-feud-nursing-game .ff-input {
.family-feud-nursing-game .ff-input {
     flex: 1; max-width: 450px; padding: 12px 20px; font-size: 1.2rem;
     flex: 1; max-width: 400px; padding: 10px 18px; font-size: 1.1rem;
     font-family: 'Oswald', sans-serif; border: 3px solid #00d4ff; border-radius: 50px;
     font-family: 'Oswald', sans-serif; border: 2px solid #00d4ff; border-radius: 50px;
     background: rgba(255,255,255,0.1); color: #fff; text-align: center;
     background: rgba(255,255,255,0.1); color: #fff; text-align: center;
     text-transform: uppercase; letter-spacing: 2px; outline: none;
     text-transform: uppercase; letter-spacing: 2px; outline: none;
}
}
.family-feud-nursing-game .ff-input:focus { border-color: #ffd700; box-shadow: 0 0 20px rgba(255,215,0,0.4); }
.family-feud-nursing-game .ff-input:focus { border-color: #ffd700; box-shadow: 0 0 15px rgba(255,215,0,0.4); }
.family-feud-nursing-game .ff-input::placeholder { color: rgba(255,255,255,0.5); }
.family-feud-nursing-game .ff-input::placeholder { color: rgba(255,255,255,0.5); }
.family-feud-nursing-game .ff-submit {
.family-feud-nursing-game .ff-submit {
     padding: 12px 35px; font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem;
     padding: 10px 30px; font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem;
     background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
     background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
     border-radius: 50px; color: #1a1a2e; cursor: pointer; letter-spacing: 2px;
     border-radius: 50px; color: #1a1a2e; cursor: pointer; letter-spacing: 2px;
Line 144: Line 134:
.family-feud-nursing-game .ff-submit:hover { transform: scale(1.05); }
.family-feud-nursing-game .ff-submit:hover { transform: scale(1.05); }


.family-feud-nursing-game .ff-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.family-feud-nursing-game .ff-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.family-feud-nursing-game .ff-btn {
.family-feud-nursing-game .ff-btn {
     padding: 10px 22px; font-family: 'Oswald', sans-serif; font-size: 0.95rem;
     padding: 8px 18px; font-family: 'Oswald', sans-serif; font-size: 0.85rem;
     border: 2px solid; border-radius: 10px; cursor: pointer; text-transform: uppercase;
     border: 2px solid; border-radius: 8px; cursor: pointer; text-transform: uppercase;
}
}
.family-feud-nursing-game .ff-btn-next { background: linear-gradient(145deg, #00d4ff, #0099cc); border-color: #00d4ff; color: #1a1a2e; }
.family-feud-nursing-game .ff-btn-next { background: linear-gradient(145deg, #00d4ff, #0099cc); border-color: #00d4ff; color: #1a1a2e; }
Line 155: Line 145:
.family-feud-nursing-game .ff-btn:hover { transform: translateY(-2px); }
.family-feud-nursing-game .ff-btn:hover { transform: translateY(-2px); }


/* Start and Game Over screens - positioned within container */
.family-feud-nursing-game .ff-start, .family-feud-nursing-game .ff-gameover {
.family-feud-nursing-game .ff-start, .family-feud-nursing-game .ff-gameover {
     position: fixed; top: 0; left: 0; width: 100%; height: 100%;
     position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     background: linear-gradient(135deg, #1a1a2e, #0f3460);
     background: linear-gradient(135deg, #1a1a2e, #0f3460);
     display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9998;
     display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 12px;
}
}
.family-feud-nursing-game .ff-start.ff-hidden, .family-feud-nursing-game .ff-gameover:not(.ff-show) { display: none; }
.family-feud-nursing-game .ff-start.ff-hidden { display: none; }
.family-feud-nursing-game .ff-gameover { display: none; }
.family-feud-nursing-game .ff-gameover.ff-show { display: flex; }
 
.family-feud-nursing-game .ff-start-title {
.family-feud-nursing-game .ff-start-title {
     font-family: 'Bebas Neue', sans-serif; font-size: 4.5rem;
     font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem;
     background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
     background: linear-gradient(180deg, #ffd700, #ff8c00, #ff4500);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     letter-spacing: 10px; animation: ffPulse 2s infinite;
     letter-spacing: 8px; animation: ffPulse 2s infinite;
}
}
@keyframes ffPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@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-sub { font-size: 1.4rem; color: #00d4ff; margin-bottom: 20px; letter-spacing: 4px; }
.family-feud-nursing-game .ff-start-emoji { font-size: 7rem; margin-bottom: 25px; animation: ffWave 1s infinite; }
.family-feud-nursing-game .ff-start-emoji { font-size: 5rem; margin-bottom: 20px; animation: ffWave 1s infinite; }
@keyframes ffWave { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes ffWave { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.family-feud-nursing-game .ff-play-btn {
.family-feud-nursing-game .ff-play-btn {
     padding: 18px 70px; font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem;
     padding: 15px 60px; font-family: 'Bebas Neue', sans-serif; font-size: 2rem;
     background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
     background: linear-gradient(145deg, #ffd700, #ff8c00); border: none;
     border-radius: 60px; color: #1a1a2e; cursor: pointer; letter-spacing: 5px;
     border-radius: 50px; color: #1a1a2e; cursor: pointer; letter-spacing: 4px;
}
}
.family-feud-nursing-game .ff-play-btn:hover { transform: scale(1.1); }
.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; }
.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; }


.family-feud-nursing-game .ff-final-score { font-family: 'Bebas Neue', sans-serif; font-size: 7rem; color: #ffd700; }
.family-feud-nursing-game .ff-final-score { font-family: 'Bebas Neue', sans-serif; font-size: 5rem; color: #ffd700; }
.family-feud-nursing-game .ff-final-msg { font-size: 1.6rem; color: #00d4ff; margin-bottom: 25px; text-align: center; }
.family-feud-nursing-game .ff-final-msg { font-size: 1.4rem; color: #00d4ff; margin-bottom: 20px; text-align: center; }


.family-feud-nursing-game .ff-confetti {
.family-feud-nursing-game .ff-confetti {
     position: fixed; width: 10px; height: 10px; z-index: 9997;
     position: absolute; width: 10px; height: 10px; z-index: 90;
     animation: ffFall 3s linear forwards;
     animation: ffFall 3s linear forwards;
}
}
@keyframes ffFall {
@keyframes ffFall {
     0% { transform: translateY(-100vh) rotate(0); opacity: 1; }
     0% { transform: translateY(-50px) rotate(0); opacity: 1; }
     100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
     100% { transform: translateY(700px) rotate(720deg); opacity: 0; }
}
}


.family-feud-nursing-game .ff-progress { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-bottom: 15px; }
.family-feud-nursing-game .ff-progress { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-bottom: 12px; }
.family-feud-nursing-game .ff-progress-fill { height: 100%; background: linear-gradient(90deg, #00d4ff, #ffd700); border-radius: 4px; transition: width 0.5s; }
.family-feud-nursing-game .ff-progress-fill { height: 100%; background: linear-gradient(90deg, #00d4ff, #ffd700); border-radius: 3px; transition: width 0.5s; }
 
.family-feud-nursing-game .ff-game-content { display: none; }
.family-feud-nursing-game .ff-game-content.ff-visible { display: block; }


@media (max-width: 768px) {
@media (max-width: 768px) {
     .family-feud-nursing-game .ff-title h1 { font-size: 2.2rem; }
     .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-answers { grid-template-columns: 1fr; }
     .family-feud-nursing-game .ff-steve { flex-direction: column; text-align: center; }
     .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-area { flex-direction: column; align-items: center; }
     .family-feud-nursing-game .ff-input { width: 100%; }
     .family-feud-nursing-game .ff-input { width: 100%; }
     .family-feud-nursing-game .ff-start-title { font-size: 2.8rem; }
     .family-feud-nursing-game .ff-start-title { font-size: 2.5rem; }
}
}
</style>
</style>
Line 206: Line 212:
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&display=swap" rel="stylesheet">


<!-- Overlays -->
<div class="ff-x-overlay" id="ffXOverlay"><div class="ff-big-x">✖</div></div>
<div class="ff-x-overlay" id="ffXOverlay"><div class="ff-big-x">✖</div></div>
<div class="ff-ding-overlay" id="ffDingOverlay"><div class="ff-ding-text">✓</div></div>
<div class="ff-ding-overlay" id="ffDingOverlay"><div class="ff-ding-text">✓</div></div>


<!-- Start Screen - inside main container -->
<div class="ff-start" id="ffStart">
<div class="ff-start" id="ffStart">
     <div class="ff-start-title">FAMILY FEUD</div>
     <div class="ff-start-title">FAMILY FEUD</div>
Line 221: Line 229:
</div>
</div>


<!-- Game Over Screen -->
<div class="ff-gameover" id="ffGameOver">
<div class="ff-gameover" id="ffGameOver">
     <div class="ff-start-emoji">🏆</div>
     <div class="ff-start-emoji">🏆</div>
Line 228: Line 237:
</div>
</div>


<div class="ff-container">
<!-- Game Content - hidden until play is clicked -->
<div class="ff-game-content" id="ffGameContent">
     <div class="ff-title">
     <div class="ff-title">
         <h1>FAMILY FEUD</h1>
         <h1>FAMILY FEUD</h1>
Line 281: Line 291:
     </div>
     </div>
</div>
</div>
</div>
</div>


Line 319: Line 330:
     var questions = [
     var questions = [
         { category: "CARDIOVASCULAR PHARMACOLOGY", question: "Name a common side effect of beta-blockers that nurses should monitor.", answers: [
         { 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: "Bradycardia", points: 35, keywords: ["bradycardia", "brady", "slow heart rate", "slow pulse", "low heart rate"] },
             { text: "Hypotension", points: 25, keywords: ["hypo", "low blood", "pressure", "bp"] },
             { text: "Hypotension", points: 25, keywords: ["hypotension", "low blood pressure", "low bp", "decreased bp"] },
             { text: "Fatigue", points: 15, keywords: ["tired", "fatigue", "weak", "energy"] },
             { text: "Fatigue", points: 15, keywords: ["fatigue", "tired", "tiredness", "weakness", "lethargy"] },
             { text: "Bronchospasm", points: 12, keywords: ["bronch", "wheez", "breathing", "lung"] },
             { text: "Bronchospasm", points: 12, keywords: ["bronchospasm", "bronchoconstriction", "wheezing", "breathing difficulty"] },
             { text: "Depression", points: 8, keywords: ["depress", "mood", "sad"] },
             { text: "Depression", points: 8, keywords: ["depression", "depressed", "mood changes"] },
             { text: "Cold Extremities", points: 5, keywords: ["cold", "extrem", "hands", "feet"] }
             { text: "Cold Extremities", points: 5, keywords: ["cold extremities", "cold hands", "cold feet", "peripheral vasoconstriction"] }
         ]},
         ]},
         { category: "PAIN MANAGEMENT", question: "Name a NON-drug intervention for pain.", answers: [
         { 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: "Heat/Cold Therapy", points: 30, keywords: ["heat therapy", "cold therapy", "ice pack", "warm compress", "heating pad", "cryotherapy"] },
             { text: "Massage", points: 22, keywords: ["massage", "rub", "touch"] },
             { text: "Massage", points: 22, keywords: ["massage", "massage therapy", "therapeutic touch", "rubbing"] },
             { text: "Distraction", points: 18, keywords: ["distract", "music", "tv", "talk"] },
             { text: "Distraction", points: 18, keywords: ["distraction", "music therapy", "television", "talking", "diversion"] },
             { text: "Positioning", points: 12, keywords: ["position", "elevat", "pillow", "move"] },
             { text: "Positioning", points: 12, keywords: ["positioning", "repositioning", "elevation", "elevate", "pillow support"] },
             { text: "Deep Breathing", points: 10, keywords: ["breath", "relax", "deep"] },
             { text: "Deep Breathing", points: 10, keywords: ["deep breathing", "breathing exercises", "relaxation", "relaxation techniques"] },
             { text: "Guided Imagery", points: 8, keywords: ["imager", "visual", "meditat"] }
             { text: "Guided Imagery", points: 8, keywords: ["guided imagery", "visualization", "meditation", "imagery"] }
         ]},
         ]},
         { category: "GERIATRIC NURSING", question: "Name an age-related change affecting drug metabolism.", answers: [
         { category: "GERIATRIC NURSING", question: "Name an age-related change affecting drug metabolism.", answers: [
             { text: "Decreased Liver Function", points: 32, keywords: ["liver", "hepat"] },
             { text: "Decreased Liver Function", points: 32, keywords: ["decreased liver", "liver function", "hepatic function", "reduced liver"] },
             { text: "Reduced Kidney Function", points: 28, keywords: ["kidney", "renal", "gfr"] },
             { text: "Reduced Kidney Function", points: 28, keywords: ["reduced kidney", "kidney function", "renal function", "decreased gfr", "renal impairment"] },
             { text: "Decreased Body Water", points: 15, keywords: ["water", "fluid", "dehydr"] },
             { text: "Decreased Body Water", points: 15, keywords: ["decreased body water", "reduced body water", "dehydration", "less body water"] },
             { text: "Increased Body Fat", points: 12, keywords: ["fat", "adipose"] },
             { text: "Increased Body Fat", points: 12, keywords: ["increased body fat", "increased fat", "more body fat", "adipose tissue"] },
             { text: "Slower GI Motility", points: 8, keywords: ["gi", "gastro", "digest"] },
             { text: "Slower GI Motility", points: 8, keywords: ["slower gi", "decreased motility", "slow digestion", "gi motility", "gastric motility"] },
             { text: "Reduced Albumin", points: 5, keywords: ["albumin", "protein"] }
             { 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: [
         { category: "PATIENT TEACHING", question: "Name an essential part of discharge teaching.", answers: [
             { text: "Medication Instructions", points: 28, keywords: ["med", "drug", "prescription", "pill"] },
             { text: "Medication Instructions", points: 28, keywords: ["medication instructions", "medication teaching", "drug instructions", "medicine instructions", "prescription instructions"] },
             { text: "Warning Signs", points: 24, keywords: ["warning", "return", "call", "er", "emergency"] },
             { 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", "appointment", "visit"] },
             { text: "Follow-up Appointments", points: 18, keywords: ["follow-up", "followup", "follow up appointment", "return visit", "next appointment"] },
             { text: "Written Instructions", points: 12, keywords: ["written", "paper", "handout"] },
             { text: "Written Instructions", points: 12, keywords: ["written instructions", "handout", "printed instructions", "discharge papers", "written materials"] },
             { text: "Teach-Back", points: 10, keywords: ["teach", "repeat", "understand"] },
             { text: "Teach-Back", points: 10, keywords: ["teach-back", "teach back", "return demonstration", "patient understanding", "verify understanding"] },
             { text: "Diet Instructions", points: 8, keywords: ["diet", "food", "eat", "nutrition"] }
             { 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: [
         { 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: "Shortness of Breath", points: 30, keywords: ["shortness of breath", "dyspnea", "difficulty breathing", "breathlessness", "hard to breathe"] },
             { text: "Lung Crackles", points: 25, keywords: ["crackle", "rale", "lung"] },
             { text: "Lung Crackles", points: 25, keywords: ["crackles", "rales", "lung crackles", "pulmonary crackles", "lung sounds"] },
             { text: "Orthopnea", points: 18, keywords: ["orthopnea", "pillow", "sit", "flat"] },
             { text: "Orthopnea", points: 18, keywords: ["orthopnea", "cant lay flat", "needs pillows", "difficulty lying flat"] },
             { text: "Pink Frothy Sputum", points: 12, keywords: ["pink", "frothy", "sputum", "foam"] },
             { text: "Pink Frothy Sputum", points: 12, keywords: ["pink frothy", "frothy sputum", "pink sputum", "pulmonary edema"] },
             { text: "Fatigue", points: 10, keywords: ["fatigue", "tired", "weak"] },
             { text: "Fatigue", points: 10, keywords: ["fatigue", "tired", "exhaustion", "weakness", "lethargy"] },
             { text: "Tachycardia", points: 5, keywords: ["tachy", "fast", "rapid"] }
             { 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: [
         { category: "MEDICATION RIGHTS", question: "Name one of the 'Rights' of medication administration.", answers: [
             { text: "Right Patient", points: 20, keywords: ["patient", "person", "client"] },
             { text: "Right Patient", points: 20, keywords: ["right patient", "correct patient", "patient identification", "verify patient"] },
             { text: "Right Drug", points: 20, keywords: ["drug", "medication", "med"] },
             { text: "Right Drug", points: 20, keywords: ["right drug", "right medication", "correct drug", "correct medication", "right medicine"] },
             { text: "Right Dose", points: 18, keywords: ["dose", "amount"] },
             { text: "Right Dose", points: 18, keywords: ["right dose", "correct dose", "right amount", "correct amount", "proper dose"] },
             { text: "Right Route", points: 15, keywords: ["route", "oral", "iv"] },
             { text: "Right Route", points: 15, keywords: ["right route", "correct route", "administration route", "proper route"] },
             { text: "Right Time", points: 14, keywords: ["time", "when", "schedule"] },
             { text: "Right Time", points: 14, keywords: ["right time", "correct time", "proper time", "scheduled time", "timing"] },
             { text: "Right Documentation", points: 13, keywords: ["document", "chart", "record"] }
             { text: "Right Documentation", points: 13, keywords: ["right documentation", "documentation", "charting", "recording", "right record"] }
         ]},
         ]},
         { category: "ASTHMA DRUGS", question: "Name a medication class for asthma.", answers: [
         { category: "ASTHMA DRUGS", question: "Name a medication class for asthma.", answers: [
             { text: "Beta-2 Agonists", points: 30, keywords: ["beta", "albuterol", "agonist"] },
             { text: "Beta-2 Agonists", points: 30, keywords: ["beta-2 agonist", "beta agonist", "albuterol", "bronchodilator", "saba", "laba"] },
             { text: "Corticosteroids", points: 25, keywords: ["steroid", "cortico", "prednisone"] },
             { text: "Corticosteroids", points: 25, keywords: ["corticosteroid", "steroid", "prednisone", "inhaled steroid", "glucocorticoid"] },
             { text: "Anticholinergics", points: 18, keywords: ["cholinerg", "atrovent"] },
             { text: "Anticholinergics", points: 18, keywords: ["anticholinergic", "ipratropium", "atrovent", "tiotropium", "muscarinic antagonist"] },
             { text: "Leukotriene Inhibitors", points: 12, keywords: ["leuko", "singulair"] },
             { text: "Leukotriene Inhibitors", points: 12, keywords: ["leukotriene", "montelukast", "singulair", "leukotriene modifier"] },
             { text: "Mast Cell Stabilizers", points: 10, keywords: ["mast", "cromolyn"] },
             { text: "Mast Cell Stabilizers", points: 10, keywords: ["mast cell", "cromolyn", "nedocromil", "mast cell stabilizer"] },
             { text: "Theophylline", points: 5, keywords: ["theophylline", "xanthine"] }
             { text: "Theophylline", points: 5, keywords: ["theophylline", "aminophylline", "methylxanthine", "xanthine"] }
         ]},
         ]},
         { category: "LIVER FAILURE", question: "Name a sign of hepatic encephalopathy.", answers: [
         { category: "LIVER FAILURE", question: "Name a sign of hepatic encephalopathy.", answers: [
             { text: "Confusion", points: 30, keywords: ["confus", "mental", "altered", "orient"] },
             { text: "Confusion", points: 30, keywords: ["confusion", "altered mental status", "disorientation", "altered consciousness", "mental status changes"] },
             { text: "Asterixis", points: 25, keywords: ["asterix", "flap", "tremor"] },
             { text: "Asterixis", points: 25, keywords: ["asterixis", "liver flap", "flapping tremor", "hand flapping"] },
             { text: "Ammonia Breath", points: 18, keywords: ["ammonia", "breath", "fetor"] },
             { text: "Ammonia Breath", points: 18, keywords: ["ammonia breath", "fetor hepaticus", "musty breath", "sweet breath"] },
             { text: "Sleep Changes", points: 12, keywords: ["sleep", "insomnia", "awake"] },
             { text: "Sleep Changes", points: 12, keywords: ["sleep changes", "insomnia", "sleep reversal", "sleep disturbance", "day night reversal"] },
             { text: "Personality Changes", points: 10, keywords: ["personal", "behavior", "mood"] },
             { text: "Personality Changes", points: 10, keywords: ["personality changes", "behavior changes", "mood changes", "irritability"] },
             { text: "Slurred Speech", points: 5, keywords: ["slur", "speech"] }
             { 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: [
         { 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: "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: ["noise", "quiet", "background"] },
             { text: "Reduce Noise", points: 22, keywords: ["reduce noise", "quiet environment", "minimize noise", "background noise", "decrease noise"] },
             { text: "Speak Clearly", points: 18, keywords: ["clear", "slow", "loud"] },
             { text: "Speak Clearly", points: 18, keywords: ["speak clearly", "clear speech", "speak slowly", "enunciate", "articulate"] },
             { text: "Write Things Down", points: 14, keywords: ["writ", "paper", "note"] },
             { text: "Write Things Down", points: 14, keywords: ["write things down", "written communication", "write notes", "use paper", "writing"] },
             { text: "Check Hearing Aid", points: 10, keywords: ["hearing aid", "battery"] },
             { text: "Check Hearing Aid", points: 10, keywords: ["check hearing aid", "hearing aid", "hearing device", "assistive device"] },
             { text: "Use Gestures", points: 8, keywords: ["gesture", "point", "sign"] }
             { text: "Use Gestures", points: 8, keywords: ["use gestures", "gestures", "hand signals", "pointing", "nonverbal", "body language"] }
         ]},
         ]},
         { category: "INFECTION CONTROL", question: "Name a Standard Precaution.", answers: [
         { category: "INFECTION CONTROL", question: "Name a Standard Precaution.", answers: [
             { text: "Hand Hygiene", points: 30, keywords: ["hand", "wash", "hygiene", "sanitiz"] },
             { text: "Hand Hygiene", points: 30, keywords: ["hand hygiene", "hand washing", "wash hands", "hand sanitizer", "hand sanitizing"] },
             { text: "Gloves", points: 22, keywords: ["glove"] },
             { text: "Gloves", points: 22, keywords: ["gloves", "wear gloves", "gloving", "disposable gloves"] },
             { text: "Gown", points: 16, keywords: ["gown"] },
             { text: "Gown", points: 16, keywords: ["gown", "isolation gown", "protective gown", "wear gown"] },
             { text: "Mask", points: 14, keywords: ["mask", "n95", "face"] },
             { text: "Mask", points: 14, keywords: ["mask", "face mask", "n95", "surgical mask", "respirator"] },
             { text: "Sharps Disposal", points: 10, keywords: ["sharp", "needle"] },
             { text: "Sharps Disposal", points: 10, keywords: ["sharps disposal", "sharps container", "needle disposal", "sharp disposal", "needle safety"] },
             { text: "Cough Etiquette", points: 8, keywords: ["cough", "cover", "tissue"] }
             { text: "Cough Etiquette", points: 8, keywords: ["cough etiquette", "respiratory hygiene", "cover cough", "cover mouth", "respiratory etiquette"] }
         ]}
         ]}
     ];
     ];
Line 531: Line 542:
     function createConfetti() {
     function createConfetti() {
         var colors = ['#ffd700', '#ff8c00', '#00d4ff', '#ff4500', '#9c27b0', '#4caf50'];
         var colors = ['#ffd700', '#ff8c00', '#00d4ff', '#ff4500', '#9c27b0', '#4caf50'];
         for (var i = 0; i < 80; i++) {
        var container = document.querySelector('.family-feud-nursing-game');
         for (var i = 0; i < 60; i++) {
             var c = document.createElement('div');
             var c = document.createElement('div');
             c.className = 'ff-confetti';
             c.className = 'ff-confetti';
             c.style.left = Math.random() * 100 + 'vw';
             c.style.left = Math.random() * 100 + '%';
             c.style.background = colors[Math.floor(Math.random() * colors.length)];
             c.style.background = colors[Math.floor(Math.random() * colors.length)];
             c.style.animationDelay = Math.random() * 2 + 's';
             c.style.animationDelay = Math.random() * 2 + 's';
             document.querySelector('.family-feud-nursing-game').appendChild(c);
             container.appendChild(c);
             setTimeout(function(el) { el.remove(); }, 4000, c);
             setTimeout(function(el) { el.remove(); }, 4000, c);
         }
         }
Line 547: Line 559:
             playReveal();
             playReveal();
             document.getElementById('ffStart').classList.add('ff-hidden');
             document.getElementById('ffStart').classList.add('ff-hidden');
            document.getElementById('ffGameContent').classList.add('ff-visible');
             loadQuestion();
             loadQuestion();
         },
         },
Line 552: Line 565:
             var input = document.getElementById('ffInput');
             var input = document.getElementById('ffInput');
             var guess = input.value.trim().toLowerCase();
             var guess = input.value.trim().toLowerCase();
             if (!guess) return;
             if (!guess || guess.length < 3) return; // Minimum 3 characters
             var q = questions[currentQ];
             var q = questions[currentQ];
             var found = false;
             var found = false;
            var foundIndex = -1;
           
            // Find the best match (prioritize exact matches and longer keywords)
             q.answers.forEach(function(a, i) {
             q.answers.forEach(function(a, i) {
                 if (revealed.indexOf(i) === -1) {
                 if (revealed.indexOf(i) === -1 && !found) {
                     var match = a.keywords.some(function(k) { return guess.indexOf(k) !== -1 || k.indexOf(guess) !== -1; });
                     var match = a.keywords.some(function(k) {
                     if (match) { revealAnswer(i); found = true; }
                        // 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();
Line 582: Line 635:
             if (currentQ >= questions.length) {
             if (currentQ >= questions.length) {
                 playApplause();
                 playApplause();
                document.getElementById('ffGameContent').classList.remove('ff-visible');
                 document.getElementById('ffGameOver').classList.add('ff-show');
                 document.getElementById('ffGameOver').classList.add('ff-show');
                 document.getElementById('ffFinalScore').textContent = score;
                 document.getElementById('ffFinalScore').textContent = score;
Line 593: Line 647:
             document.getElementById('ffScore').textContent = '0';
             document.getElementById('ffScore').textContent = '0';
             document.getElementById('ffGameOver').classList.remove('ff-show');
             document.getElementById('ffGameOver').classList.remove('ff-show');
            document.getElementById('ffGameContent').classList.remove('ff-visible');
             document.getElementById('ffStart').classList.remove('ff-hidden');
             document.getElementById('ffStart').classList.remove('ff-hidden');
         },
         },

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"